* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* index */
.loading {
	opacity: 0.5;
	pointer-events: none;
}

.gameScreen {
	overflow: hidden;
	touch-action: pan-y;

	background-color: black;
	height: 100vh;

	/* fontの共通設定 */
	font-family: "Noto Sans JP", sans-serif;

	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 180%;
	letter-spacing: 0.06em;
	color: #ffffff;
	text-shadow: 0px 0px 14px rgba(0, 0, 0, 0.6);
}

.gameFrame {
	width: 1280px;
	height: 720px;
	overflow: hidden;
	background-color: #ffffff;
	background-position: center;
	background-size: contain;
	background-repeat: repeat-x;

	transform-origin: 0px 0px;
}

.fade-in {
	opacity: 0;
	animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.selectFrame {
	background-color: var(--yellow-300, #fde047);
	background-image: url(/assets/svg/bgFrameTilted.svg);
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
}

.startContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

.start-contents {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 共通部品 */
.gameScreen .small-font {
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 180%;
}

.start-content .flex-column-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 20px;

	position: absolute;
	width: 750px;
	top: 48px;
	left: 466px;
}

.start-content .flex-row-container {
	display: flex;
	flex-direction: row;
	width: fit-content;
	column-gap: 20px;
	row-gap: 0;
}

.start-content .sub-title {
	width: 130px;
}

.start-content .sub-content {
	width: 614px;
}

.relative-container {
	position: relative;
	width: fit-content;
	top: -6px;
}

.start-content .border {
	width: 750px;
	height: 1px;
	background-color: var(--black, #fff);
}

.start-content .icon {
	position: relative;
	width: 40px;
	height: 40px;
}

.start-content .checkbox,
.start-content .radio {
	position: relative;
	width: 24px;
	height: 24px;
}

.start-content .checkbox {
	background: url(./images/index/svg/checkbox.svg);
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.start-content .radio {
	background: url(./images/index/svg/radio.svg);
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

/* ページヘッダー */
.start-content .page-header {
	position: absolute;
	width: 322px;
	height: 172px;
	left: 0px;
	top: 6.67%;

	background: linear-gradient(
		270deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.48) 5%,
		rgba(0, 0, 0, 0.72) 10%,
		rgba(0, 0, 0, 0.8) 33%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

.start-content .page-header.one-row {
	height: 110px;
}

.start-content .page-header.two-row {
	height: 157px;
}

.page-header-value {
	position: absolute;
	left: 40px;
	top: 50%;
	transform: translateY(-50%);

	font-weight: 700;
	font-size: 24px;
	line-height: 51px;
	letter-spacing: 0.08em;
}

/* ボタン系 */
.action-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 24px 40px;
	gap: 10px;

	background: #ffffff;
	border-radius: 8px;

	font-weight: 700;
	line-height: 38px;
	text-align: center;
	letter-spacing: 0.1em;

	color: #000000;
	text-shadow: none;

	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}

.action-button.disabled {
	background: #a4a4a4;
}

.clickable {
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}

/* スマホ/タブレットでプレイする前の準備 */
.setup-content {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.setup-step-images {
	height: 362.5px;
}

.setup-step-image {
	width: 210px;
	height: 160px;
	margin-top: 33px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.setup-step-image > img {
	width: 210px;
}

.setup-step-image > .setup-step-image-2 {
	width: 200px;
}

.setup-step-image > .setup-step-image-3 {
	width: 130px;
}

.setup-step-image > .setup-step-image-4 {
	width: 120px;
}

.setup-step-description {
	width: 210px;
	margin-top: 24px;
	text-align: center;

	display: flex;
	justify-content: center;
	align-items: center;
}

.setup-step-icon {
	width: 19.07px;
	height: 24.25px;
	margin-right: 9px;
}

.right-curly-brace {
	width: 15px;
	height: 314.5px;
	margin-top: 24px;

	background-image: url("./images/index/right_curly_brace.png");

	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.setup-navigation {
	position: absolute;
	width: 750px;
	top: 630px;
	left: 466px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 32px;
}

.setup-navigation-added {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 16px 40px;
	gap: 10px;

	height: 50px;
	width: 240px;
	color: #000000;
	background: #ffffff;
	border-radius: 8px;
	text-shadow: none;

	cursor: pointer;
}

.setup-navigation-next {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	cursor: pointer;
}

.setup-confirm {
	position: absolute;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;

	background: linear-gradient(
		270deg,
		rgba(0, 0, 0, 0.54) 10%,
		rgba(0, 0, 0, 0.81) 50%,
		rgba(0, 0, 0, 0.54) 90%,
		rgba(0, 0, 0, 0) 100%
	);
	backdrop-filter: blur(8px);
}

.setup-confirm-content {
	position: absolute;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.setup-confirm .title {
	position: absolute;
	top: 226px;
	font-size: 42px;
}

.setup-confirm .description {
	position: absolute;
	top: 307px;
	text-align: center;
}

.setup-confirm .setup-confirm-navigation {
	position: absolute;
	top: 423px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px;
	gap: 40px;
}

.setup-confirm .setup-confirm-button {
	width: 400px;
	height: 71px;
	border-radius: 8px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.setup-confirm-button.confirm-next {
	font-size: 32px;
	border: 1.5px solid #ffffff;
	color: #ffffff;
}

.setup-confirm-button.confirm-return {
	font-size: 28px;
	color: #000000;
	background: #ffffff;
	text-shadow: none;
}

/* このゲームの遊び方 */
.how-to-play-content {
	position: relative;
	top: 10px;
}

/* スマホかPCか選んでスタート */
.setup-content .attention-text {
	color: #ff6a6a;
}

.setup-content .balloon-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.setup-content .balloon {
	width: 364px;
	height: 56px;
	padding-top: calc(28px - (1em / 2));

	box-shadow: none;
	color: #ffffff;
	text-align: center;
	text-shadow: none;
	line-height: 1;
	letter-spacing: 0.1em;

	background: url(./images/index/svg/balloon.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.setup-content .balloon.checked {
	height: 72px;
	color: #000000;
	background: url(./images/index/svg/balloon_checked.svg);
}

/* 操作に関する注意点 */
.operating-precautions-content .icon.attention {
	background: url(./images/index/svg/icon_attention.svg);
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

/* 困ったときは */
.when-in-trouble-content .icon.question {
	background: url(./images/index/svg/icon_question.svg);
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.when-in-trouble-content .contact-button {
	position: relative;
	width: 236px;
	height: 51px;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 10px;

	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 40px;

	border: 1.5px solid #ffffff;
	border-radius: 8px;
}

/* 事前アンケート */
.start-content .survey-content .flex-column-container {
	gap: 6px;
}

#survey-complete-notice {
	position: absolute;
	top: 566px;
}

#survey-complete-notice > p {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.form-container .img-input-container {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 8px;

	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}

.form-container input:checked + .img-input-container .checkbox {
	background: url(./images/index/svg/checkbox_checked.svg);
}

.form-container input:checked + .img-input-container .radio {
	background: url(./images/index/svg/radio_checked.svg);
}

.send-survey {
	position: absolute;
	height: 51px;
	left: 721px;
	right: 319px;
	bottom: 114px;
}

/* 最終確認 */
.final-confirmation .img-input-container {
	gap: 20px;
	align-items: flex-start;
}

.final-confirmation .img-input-container .checkbox {
	margin-top: 9px;
}

.final-confirmation input:checked + .img-input-container .checkbox {
	background: url(./images/index/svg/checkbox_no_border_checked.svg);
}

.final-confirmation-footer {
	position: relative;
	top: 453px;
	height: fit-content;
}

.final-confirmation-contact {
	position: relative;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
}

.final-confirmation-trademark {
	position: relative;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
}

.game-start {
	position: relative;
	width: 400px;
	height: 70px;
	left: 50%;
	transform: translateX(-50%);
}

.pagination-container {
	position: absolute;
	top: 642px;
	left: 402px;
	width: 878px;
}

.indicator-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px;
	gap: 16px;
}

.pagination-button {
	height: 39px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 16px;
	gap: 10px;

	border: 1.5px solid #ffffff;
	border-radius: 8px;

	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;

	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0.1em;
}

.pagination-button.opacity-0 {
	cursor: none;
	pointer-events: none;
}

.pagination-indicators {
	background-color: #ffffff;
	border: 1px solid #000000;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	opacity: 0.6;
}

.pagination-indicators.here {
	opacity: 1;
}

.loading-spinner {
	width: Min(12vw, 120px);
	height: Min(12vw, 120px);
}

#back-image {
	width: 100%;
	height: 100%;
	overflow: hidden;

	position: relative;
}

#back-image > .startbg {
	position: absolute;
	background: url(./images/index/startbg.webp);
	width: 1280px;
	height: 720px;

	background-repeat: no-repeat;
	background-size: contain;
}

.page-content {
	position: absolute;
	width: 878px;
	height: 720px;
	left: 402px;
}

.page-content-background {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.5);
}

.game-portrait-screen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 99999;
}

.start-portrait,
.game-portrait {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: black;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 180%;
	color: #ffffff;
}

.game-portrait {
	width: 1280px;
	height: 725px;
}

/* portraitの中央に配置 */
.to-landscape-container {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	/* ソースでscale設定 */
	transform-origin: 0px 0px;
}

.to-landscape-container > .to-landscape-image {
	position: relative;
	background: url(./images/index/toLandscape.png);
	width: 251px;
	height: 240px;
	left: 50%;
	transform: translateX(-50%);

	background-repeat: no-repeat;
	background-size: contain;
}

.to-landscape-container > .to-landscape-message {
	white-space: nowrap;

	margin-top: 50px;
	font-size: 40px;
	line-height: 48px;
}

.introductionContainer {
	position: absolute;
	transition: opacity 0.3s 0s ease-out;
	opacity: 1;
	z-index: 1;
	top: 0;
}

.introductionContainer.clicked {
	opacity: 0;
	z-index: 0;
}

.introductionContainer > .jackeyes-logo {
	position: absolute;
	background: url(./images/index/jackeyesLogo.png);
	width: 549px;
	height: 251px;
	top: 19px;
	left: 565px;

	background-repeat: no-repeat;
	background-size: contain;
}

.introductionContainer > .introductionContent {
	position: absolute;
	width: 500px;
	height: 258px;
	top: 284px;
	left: 613px;
}

.introductionContainer > .readDescriptionButton {
	position: absolute;
	background: url(./images/index/btn_primary.png);
	width: 400px;
	height: 70px;
	top: 462px;
	left: 641px;

	background-repeat: no-repeat;
	background-size: contain;
}

/* screen */
.gamemenu-screen,
.setting-screen {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	height: 720px;
}

.gamemenu-screen {
	padding: 92px 30px 0;
	overflow: hidden;
}

.gamemenu-screen.open,
.setting-screen.open {
	visibility: visible;
}

.topmenu-screen {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	height: 720px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: 0.5s;
	z-index: 15;
}

.topmenu-screen.open {
	visibility: visible;
	opacity: 1;
}

/* menu */
.gamemenu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 1280px;
	height: 720px;
	background-color: rgba(255, 255, 255, 0);
	backdrop-filter: blur(8px);
	visibility: hidden;
	opacity: 0;
}

.gamemenu {
	position: relative;
	font-family: "ta-oonishi", "Noto Sans JP", sans-serif;
	font-weight: 300;
	color: #000;
	width: 100%;
	height: 100%;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	top: 5%;
}

.menu-inner {
	display: flex;
	height: inherit;
}

.menu-tabs {
	position: absolute;
	width: 10%;
	display: flex;
	writing-mode: vertical-lr;
	margin-top: 30px;
	gap: 20px;
}

.menu-tabs .tab {
	cursor: pointer;
	font-size: 32px;
	line-height: 38.4px;
	letter-spacing: 0.1em;
	margin-left: 22px;
	padding: 24px 8px;
	transition: margin-left 0.2s;
}

.menu-tabs .tab.active {
	margin-left: 0;
}

.menu-contents {
	position: relative;
	right: -6%;
	width: 94%;
}

.menu-contents .content {
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.menu-contents .content.active {
	display: block;
}

.menu-tabs #eventsTab {
	background: url(./images/tag_events.png) 0 0 / 100% 100% no-repeat;
}

.menu-tabs #charactersTab {
	background: url(./images/tag_characters.png) 0 0 / 100% 100% no-repeat;
}

.menu-contents #eventsContent {
	position: relative;
}

.sort-toggle-btn {
	position: fixed;
	top: 5%;
	right: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	color: #fff;
	height: 100px;
	visibility: hidden;
	opacity: 0;
}

.sort-toggle-btn label {
	font-size: 22px;
	letter-spacing: 0.1em;
	padding-right: 50px;
	cursor: pointer;
}

.sort-toggle-btn input[type="checkbox"] {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(calc(-50% + 2px));
	appearance: none;
	background-color: transparent;
	width: 44px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 12px;
	cursor: pointer;
}

.sort-toggle-btn input[type="checkbox"]::before {
	content: "";
	background-color: #fff;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 2px;
	margin-top: 2px;
	transition: margin-left 0.2s;
	border-radius: 8px;
}

.sort-toggle-btn input[type="checkbox"]:checked {
	background-color: #8aff59;
}

.sort-toggle-btn input[type="checkbox"]:checked::before {
	background-color: #ffffff;
	margin-left: 22px;
}

/* menu-contents */
.gamemenu .events,
.gamemenu .characters {
	height: 100%;
	overflow-y: hidden;
}

.gamemenu .bg-wrapper {
	position: relative;
	background-image: url(./images/bg_header.png), url(./images/bg_footer.png), url(./images/bg_middle.png);
	background-position: top, bottom, top;
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-size: 100%, 100%, 100%;
	background-clip: padding-box, padding-box, content-box;
	background-attachment: local;
	padding: 120px 0;
}

.gamemenu .bg-inner {
	margin: -120px 0;
	padding: 0 30px;
}

.gamemenu .events .bg-inner {
	margin: -90px 0;
	padding: 0;
	padding-left: 30px;
}

.gamemenu .events::-webkit-scrollbar,
.gamemenu .characters::-webkit-scrollbar {
	display: none;
}

/* events */
.gamemenu ul.events-list {
	padding: 10px 0;
	height: 600px;
	overflow: hidden;
}

.gamemenu ul.events-list > li {
	position: relative;
	display: flex;
	font-size: 28px;
	width: 100%;
}

.gamemenu ul.events-list > li:not(:last-of-type) {
	margin-bottom: 50px;
}

.gamemenu ul.events-list > li:not(:last-of-type)::after {
	content: "";
	position: absolute;
	bottom: -26px;
	left: 0;
	background-color: #000;
	width: calc(100% - 30px);
	height: 1px;
	opacity: 0.5;
}

.gamemenu ul.events-list > li .event-options {
	width: 20%;
}

.gamemenu ul.events-list > li .event-details {
	width: 65%;
}

.gamemenu ul.events-list > li .replay-btn-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
	width: 15%;
	padding: 5px;
	border-radius: 2px;
}

.gamemenu ul.events-list > li .replay-btn-wrapper::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	border: 7px solid transparent;
	border-right: 14px solid rgba(0, 0, 0, 0.3);
}

.gamemenu ul.events-list li .replay-btn-wrapper .replay-btn {
	position: relative;
	display: grid;
	place-items: center;
	background: #eee;
	width: 100%;
	aspect-ratio: 16 / 9;
	cursor: pointer;
}

.gamemenu ul.events-list li .replay-btn-wrapper .replay-btn:hover {
	opacity: 0.8;
	filter: brightness(110%);
}

.gamemenu ul.events-list li .replay-btn-wrapper .replay-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% + 2px);
	transform: translate(-50%, -50%);
	background: url(./images/play_icon.png) 0 0 / 100% 100% no-repeat;
	width: 65px;
	height: 65px;
	pointer-events: none;
}

.gamemenu ul.events-list li .replay-btn-wrapper .replay-btn img {
	width: 100%;
}

/* events-options */
.event-options .event-options-list {
	width: 100%;
}

.event-options .event-options-list li {
	display: flex;
	flex-direction: column;
	background: url(./images/bg_event_options.png) 0 0 / 100% 100% no-repeat;
	font-size: 24px;
	line-height: 1;
	width: 100%;
	padding: 10px 15px;
}

.event-options .event-options-list li > span {
	font-size: 18px;
	line-height: 1;
	margin-bottom: 10px;
}

.event-options .event-options-list li:not(:last-of-type) {
	margin-bottom: 10px;
}

/* events-details */
.event-details .event-details-list {
	background: url(./images/bg_event_details.png) 0 0 / 100% 100% no-repeat;
	padding: 20px 30px 25px 10px;
	margin-left: 20px;
}

.event-details .event-details-list li {
	position: relative;
	line-height: 39.2px;
	letter-spacing: -0.05em;
	margin-left: 26px;
}

.event-details .event-details-list li:not(:last-of-type) {
	margin-bottom: 20px;
}

.event-details .event-details-list li::before {
	content: "・";
	position: absolute;
	left: -26px;
}

/* characters */
.gamemenu ul.char-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	height: 544px;
	max-width: 780px;
	overflow: hidden;
	margin: -76px auto -90px;
	padding: 20px 0;
}

.gamemenu ul.char-list li {
	position: relative;
	width: 45%;
	padding: 25px 0;
}

.gamemenu ul.char-list li:nth-of-type(-n + 2) {
	padding-top: 0;
}

.gamemenu ul.char-list li:nth-of-type(2n):not(:last-of-type)::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	background: #000;
	width: 300%;
	max-width: 780px;
	height: 1px;
	opacity: 0.5;
}

.gamemenu ul.char-list li a {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 36px;
	letter-spacing: -0.06em;
	color: #000;
	text-decoration: none;
}

.gamemenu ul.char-list li a img {
	margin-right: 20px;
}

.gamemenu ul.char-list li a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: url(./images/arrow_handDraw_right.png) 0 0 / contain;
	width: 36px;
	height: 36px;
}

.gamemenu .characters .char-content {
	display: none;
	width: 100%;
	height: auto;
	min-height: 100%;
	margin-bottom: 90px;
}

.gamemenu .char-content-inner {
	display: flex;
	width: 100%;
}

.gamemenu .characters .char-content.show {
	display: flex;
}

/* char-info */
.char-content .char-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 24px;
	width: 100%;
	padding: 50px 25px;
}

.char-info .char-info-inner::-webkit-scrollbar {
	display: none;
}

.char-info .char-name {
	font-size: 58px;
	letter-spacing: -0.06em;
	line-height: 1;
	margin-bottom: 40px;
}

.char-info .char-details {
	font-size: 32px;
	font-weight: normal;
}

.char-info .char-details .char-details-name {
	line-height: 44px;
}

.char-info .char-details > div:not(:last-of-type) {
	display: flex;
	margin-bottom: 30px;
}

.char-info .char-details-label {
	display: inline-block;
	position: relative;
	width: 4em;
}

.char-info .char-details-label::after {
	content: "：";
	position: absolute;
	right: 0;
}

.char-info .char-details .char-details-content {
	display: block;
}

.char-info .char-details .char-details-content p {
	line-height: 51.2px;
	margin-bottom: 1em;
}

.char-info .char-details .char-details-content p:first-of-type {
	min-height: 200px;
}

.char-info .char-details .char-details-content span {
	display: block;
	line-height: 51.2px;
}

.char-info .char-details .char-details-content span:first-of-type {
	padding-top: 32px;
	border-top: 1px solid #a4a4a4;
}

.char-info .char-info-close {
	position: fixed;
	left: 50%;
	transform: translateX(calc(-50% + 40px));
	bottom: 20px;
	width: 341px;
	height: 56px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	background-image: url("./images/char_info_close.png");
	background-size: contain;
}

.char-info .char-info-close:hover {
	background-image: url("./images/char_info_close2.png");
}

/* char-imgs */
.char-content .char-imgs {
	position: relative;
	display: flex;
	width: 40%;
	margin-left: 5%;
	overflow-x: hidden;
	float: right;
}

.gamemenu-screen:not(.open) .char-content .char-imgs {
	display: none;
}

.char-imgs-control {
	position: absolute;
	top: 50%;
	width: 100%;
}

.char-imgs-control > div {
	position: absolute;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.char-imgs-control .prev-btn {
	background: url(./images/arrow_handDraw_left.png) 0 0 / contain;
	left: 0;
}

.char-imgs-control .next-btn {
	background: url(./images/arrow_handDraw_right.png) 0 0 / contain;
	right: 0;
}

.char-imgs-inner,
.char-imgs-item,
.char-imgs-item img {
	width: 100%;
}

.char-imgs-inner {
	position: relative;
	left: 0;
	display: flex;
	width: 100%;
	transition: 0.5s;
}

.char-imgs-item {
	flex: none;
	overflow: hidden;
}

.char-imgs img {
	height: 100%;
	object-fit: contain;
	padding: 0 30px;
	pointer-events: none;
}

.char-imgs img.show {
	display: block;
}

@media screen and (max-width: 768px) {
	.menu-inner {
		display: flex;
	}

	.gamemenu-close-button {
		height: 30px;
	}

	#eventsContent .sort-toggle-btn {
		top: 30px;
		height: 30px;
	}

	.event-details .event-details-list li {
		margin-left: 12px;
	}
}

.gamemenu-close-button:hover,
.gamemenu-top-menu-thirdeye:hover {
	cursor: pointer;
}

/* menu-scroll */
.menu-scroll-buttons {
	position: fixed;
	bottom: calc(20px - 5%);
	left: 35px;
	visibility: hidden;
	opacity: 0;
}

.gamemenu .menu-scroll-buttons img {
	width: 36px;
	height: 38px;
	cursor: pointer;
	visibility: inherit;
}

.gamemenu .menu-scroll-buttons .menu-scroll.top {
	margin-bottom: 15px;
}

.gamemenu .menu-scroll-buttons .menu-scroll.bottom {
	transform: rotate(180deg);
}

/* 画面共通の設定 */
.thirdeye-frame,
.thirdeye-frame input {
	font-size: 22px;
	font-weight: 700;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
}

.thirdeye-frame input {
	font-size: 24px;
}

.thirdeye-frame {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	height: 720px;
	z-index: 10;
	overflow: hidden;
	color: white;
	transition: 0.5s;
}

.thirdeye-frame.open {
	visibility: visible;
	opacity: 1;
}

.gamemenu-background,
.thirdeye-background {
	position: absolute;
	width: 1280px;
	height: 720px;
	left: 0px;
	top: 0px;

	background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.285) 33.5%, rgba(0, 0, 0, 0.541527) 100%);

	visibility: hidden;
	opacity: 0;
}

.topmenu-close-button {
	position: fixed;
	min-width: 122px;
	height: 80px;
	left: 10px;
	top: 40px;

	z-index: 10;
	font-weight: 700;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 28px;
	color: #ffffff;
	white-space: nowrap;

	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 14px;

	pointer-events: auto;
	cursor: pointer;
	transition: top 0.5s;
}

.topmenu-screen.open .topmenu-close-button {
	top: 10px;
}

.thirdeye-close-button {
	top: calc(10px + 5%);
	transition: top 0.5s;
}

.thirdeye-frame.open .thirdeye-close-button {
	top: 10px;
}

.thirdeye-close-button.can-hover,
.thirdeye-button.can-hover,
.thirdeye-top-menu-game.can-hover,
.thirdeye-keyboard-button.can-hover,
.thirdeye-date-button.can-hover,
.trial-thirdeye-button {
	cursor: pointer;
}

.thirdeye-button.can-hover:not(.disabled),
.trial-thirdeye-button:hover {
	background: linear-gradient(
		90deg,
		rgba(138, 255, 89, 0) 0%,
		rgba(138, 255, 89, 0.72) 15%,
		rgba(138, 255, 89, 0.72) 85%,
		rgba(138, 255, 89, 0) 100%
	);
	color: #464646;
}

.topmenu {
	position: fixed;
	top: -9%;
	left: 50%;
	transform: translateX(-50%);
	width: 562px;
	height: 9%;
	z-index: 10;

	font-weight: 700;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 28px;
	color: #ffffff;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.49) 5%,
		rgba(0, 0, 0, 0.49) 95%,
		rgba(0, 0, 0, 0) 100%
	);

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	transition: top 0.5s;

	pointer-events: auto;
}

.topmenu-screen.open .topmenu {
	top: 20px;
}

.topmenu-item {
	display: flex;
	flex-wrap: row;
	align-items: center;
	padding: 5px 0;
	cursor: pointer;
}

.thirdeye-menu-item-img,
.gamemenu-menu-item-img {
	width: 50px;
	height: 50px;
	padding: 5px 10px;
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(209deg) brightness(111%) contrast(101%);
}

.topmenu-item-img {
	background-size: cover;
	margin-right: 10px;
	filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(209deg) brightness(111%) contrast(101%);
}

.topmenu-game .topmenu-item-img {
	background-image: url(./images/thirdeye/svg/pen.svg);
	width: 30px;
	height: 30px;
}

.topmenu-thirdeye .topmenu-item-img {
	background-image: url(./images/thirdeye/svg/eye.svg);
	width: 35px;
	height: 35px;
}

.topmenu-item.active {
	color: #8aff59;
	pointer-events: none;
}

.topmenu-item.active .topmenu-item-img {
	pointer-events: none;
	filter: none;
	transform: translateY(-1px);
}

.topmenu-game.active .topmenu-item-img {
	background-image: url(./images/thirdeye/svg/pen_active.svg);
	scale: 1.02;
}

.topmenu-thirdeye.active .topmenu-item-img {
	background-image: url(./images/thirdeye/svg/eye_active.svg);
	scale: 1.03;
}

.thirdeye-main-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	height: 100%;
	width: 100%;

	display: grid;
	grid-template-rows: auto 1fr;
}

.thirdeye-keyword {
	position: absolute;
	top: 20%;
	width: 100%;
	height: 40%;
	transition: top 0.5s;
}

.thirdeye-frame.open .thirdeye-keyword {
	top: 15%;
}

.thirdeye-keyword-item.keyword-when {
	position: absolute;
	width: 571px;
	height: 88px;
	left: 53px;
	top: 0px;
}

.thirdeye-keyword-item.keyword-where {
	position: absolute;
	width: 571px;
	height: 88px;
	left: 656px;
	top: 0px;
}

.thirdeye-keyword-item.keyword-who {
	position: absolute;
	width: 571px;
	height: 88px;
	left: 53px;
	top: 158px;
}

.thirdeye-keyword-item.keyword-what {
	position: absolute;
	width: 571px;
	height: 134px;
	left: 656px;
	top: 158px;
}

.thirdeye-keyword-title {
	display: flex;
	align-items: center;
}

.thirdeye-keyword-content {
	position: relative;
	width: 100%;
}

.thirdeye-keyword-text,
.thirdeye-keyword-input {
	position: absolute;
	top: 0;
	height: 80px;
	width: 100%;
	border: 6px solid rgba(255, 255, 255, 0);
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 5px;

	color: black;
	font-size: 24px;

	display: flex;
	align-items: center;
	padding-left: 24px;
}

.thirdeye-keyword-input {
	visibility: hidden;
	border: none;
	outline: none;
}

.thirdeye-keyword-text.can-hover,
.thirdeye-keyword-text.selecting,
.thirdeye-keyword-input:focus {
	background: rgba(234, 255, 226, 0.8);
	border: 6px solid #8aff59;
}

.thirdeye-keyword-text span {
	font-size: 18px;
	margin-left: 10px;
}

.thirdeye-button,
.trial-thirdeye-button {
	position: absolute;
	top: calc(449px + 5%);
	left: 50%;
	transform: translateX(-50%);
	height: 94px;
	width: 528px;
	z-index: 3;

	font-size: 34px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.56) 15%,
		rgba(0, 0, 0, 0.56) 85%,
		rgba(0, 0, 0, 0) 100%
	);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: top 0.5s;
}

.thirdeye-frame.open .thirdeye-button {
	top: 449px;
}

.thirdeye-button.disabled {
	cursor: default;
	color: #a4a4a4;
}

.thirdeye-keyboard-button,
.thirdeye-date-button {
	visibility: hidden;
	position: absolute;
	bottom: 3%;
	right: 0;
	z-index: 3;
	opacity: 0;
}

.thirdeye-keyboard-button img,
.thirdeye-date-button img {
	width: 336px;
	height: 89px;
	object-fit: contain;
}

.thirdeye-keyboard-button.can-hover img {
	content: url("./images/thirdeye/keyboard_button_focus.png");
}

.thirdeye-date-button.can-hover img {
	content: url("./images/thirdeye/date_button_focus.png");
}

.thirdeye-choice-outer {
	visibility: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	height: 58%;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.thirdeye-choice {
	visibility: hidden;
	position: absolute;
	bottom: -42%;
	width: 100%;
	height: 42%;
	background-color: #d5d7dd;
	user-select: none;
	z-index: 5;
	padding: 30px;
	align-content: start;
}

.thirdeye-choice-enter-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	visibility: hidden;
	font-size: 32px;
	line-height: 180%;
	color: #000000;
}

.thirdeye-choice-item-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	visibility: hidden;
	opacity: 0;
	max-height: 100%;
	overflow-y: auto;
	padding-bottom: 100px;
}

.thirdeye-choice-item-container::-webkit-scrollbar {
	display: none;
}

.thirdeye-choice-item {
	padding: 18px;
	height: 61px;
	font-size: 24px;
	color: black;

	background-color: white;
	border: 3px solid #a4a4a4;
	border-radius: 5px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.thirdeye-choice-item.selected {
	color: #a4a4a4;
	background: #eaeaea;
}

.thirdeye-choice-item span {
	font-size: 18px;
	margin-left: 10px;
}

.thirdeye-cursor,
.trial-thirdeye-cursor {
	position: absolute;
	top: 480px;
	left: 800px;
	width: 150px;
	z-index: 3;
	display: none;
	animation-duration: 2500ms;
	animation-play-state: running;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

/* setting */
.setting-menu-wrapper {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.06em;
	color: #fff;
	display: flex;
	position: relative;
	justify-content: end;
	height: 100%;
}

.setting-menu-wrapper .setting-menu-outer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.setting-menu-wrapper .setting-menu {
	display: block;
	position: absolute;
	top: -10px;
	right: 0;
	background: linear-gradient(
		270deg,
		rgba(0, 0, 0, 0.7) 84.56%,
		rgba(0, 0, 0, 0.63) 89.57%,
		rgba(0, 0, 0, 0.42) 94.39%,
		rgba(0, 0, 0, 0) 100%
	);
	width: 27.5%;
	height: 740px;
}

.setting-menu-wrapper .setting-menu.hide {
	display: none;
}

.setting-menu-wrapper .setting-quit,
.setting-menu-wrapper .setting-guide,
.setting-menu-wrapper .setting-guide-top,
.setting-menu-wrapper .setting-option {
	display: none;
	position: absolute;
	top: -10px;
	left: -10px;
	background: linear-gradient(
		270deg,
		rgba(0, 0, 0, 0.54) 10%,
		rgba(0, 0, 0, 0.81) 50%,
		rgba(0, 0, 0, 0.54) 90%,
		rgba(0, 0, 0, 0) 100%
	);
	width: 1300px;
	height: 740px;
}

.setting-menu-wrapper .setting-quit.show,
.setting-menu-wrapper .setting-guide.show,
.setting-menu-wrapper .setting-guide-top.show,
.setting-menu-wrapper .setting-option.show {
	display: block;
}

/* setting-main */
.setting-menu-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	margin-left: 5%;
	padding: 10px 20px 0;
}

.setting-menu-close {
	display: flex;
	justify-content: end;
	padding: 54px 0 32px;
}

.setting-close-btn {
	background: url(./images/setting_close.png) 0 0 / contain no-repeat;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.setting-heading {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .setting-heading::before,
.setting-heading::after {
	content: "";
	top: 50%;
	flex: 1;
	background-color: #fff;
	height: 2px;
} */

/* .setting-heading::before {
	margin-right: 10px;
} */

/* .setting-heading::after {
	margin-left: 10px;
} */

.setting-option-btn,
.setting-guide-btn,
.setting-log-btn,
.setting-quit-btn {
	position: relative;
	cursor: pointer;
}

.setting-option-btn::before,
.setting-guide-btn::before,
.setting-log-btn::before,
.setting-quit-btn::before {
	position: absolute;
	content: "";
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: url(./images/arrow_min.png) 0 0 / contain no-repeat;
	width: 18px;
	height: 18px;
}

.setting-content .setting-item {
	position: relative;
	padding: 27px 0;
}

.setting-content .setting-item:not(:last-of-type)::after {
	position: absolute;
	content: "";
	bottom: 0px;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5);
	width: 100%;
	height: 0.5px;
}

.setting-menu-separator {
	background-color: #fff;
	height: 2px;
}

.volume-option .volume-option-item {
	display: flex;
	align-items: center;
}

.volume-option .volume-option-item:not(:last-of-type) {
	margin-bottom: 27px;
}

.volume-option-item label {
	flex: 1;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.1em;
}

.volume-option-item input {
	appearance: none;
	width: 70%;
	height: 15px;
	background: linear-gradient(90deg, #8aff59 50%, #ffffff4d 50%);
	cursor: pointer;
}

.volume-option-item input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 23px;
	height: 23px;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
}

.inputRange::-moz-range-thumb {
	border: none;
	width: 23px;
	height: 23px;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
}

.setting-option-inner {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 1280px;
	height: 720px;
	backdrop-filter: blur(8px);
}

.setting-option-inner .option-close-btn {
	content: "";
	position: absolute;
	top: 54px;
	right: 24px;
	background: url(./images/setting_close.png) 0 0 / contain no-repeat;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.setting-option-inner .option-title {
	position: absolute;
	top: 72px;
	left: 96px;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
}

.setting-option-wrapper {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 72px;
	left: 241px;
	width: 940.69px;
	gap: 38px;
}

.setting-option-wrapper .title {
	position: absolute;
	font-size: 24px;
	line-height: 1;
}

.setting-option-wrapper .description {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

.setting-option-wrapper .setting-option-volume {
	position: relative;
	height: 82px;
}

.setting-option-wrapper .volume-option {
	position: absolute;
	top: 0;
	left: 332.88px;
	width: 447px;
}

.setting-option-wrapper .setting-option-quality {
	position: relative;
	height: 103px;
}

.setting-option-wrapper .quality-option {
	position: absolute;
	top: 0;
	left: 335.94px;
	width: 444px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.setting-option-wrapper .quality-name {
	position: relative;
	display: flex;
	justify-content: space-between;
	font-size: 20px;
	font-weight: 500;
}

.setting-option-wrapper .quality-name div {
	position: relative;
}

.setting-option-wrapper .quality-option input {
	position: relative;
	width: 444px;
	height: 28px;
	-webkit-appearance: none;
	appearance: none;
	background: url(./images/quality_background.png) no-repeat center center / contain;
	/* 背景画像 */
	border: none;
	outline: none;
}

/* WebKit系 (Chrome, Safari) のつまみ */
.setting-option-wrapper .quality-option input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	background: url(./images/quality_thumb.png) no-repeat center center / contain;
	cursor: pointer;
}

/* Firefox のつまみ */
.setting-option-wrapper .quality-option input::-moz-range-thumb {
	width: 28px;
	height: 28px;
	background: url(./images/quality_thumb.png) no-repeat center center / contain;
	border: none;
	cursor: pointer;
}

.setting-option-wrapper .setting-option-quality .description {
	position: absolute;
	top: 88px;
}

.setting-option-wrapper .setting-option-reload {
	position: relative;
	height: 263px;
}

.setting-option-wrapper .setting-option-reload .title {
	position: absolute;
	height: 10px;
}

.setting-option-wrapper .reload-option {
	position: absolute;
	top: 0;
	left: 336.14px;
	width: 260px;
	height: 47px;
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 24px;
	letter-spacing: 0.1em;
}

.setting-option-wrapper .reload-option div {
	position: relative;
}

.setting-option-wrapper div.reload-switch {
	position: relative;
	background: url(./images/switch_off.png) no-repeat center/contain;
	width: 137px;
	height: 47px;
}

.setting-option-wrapper input.reload-switch:checked + .reload-switch {
	background: url(./images/switch_on.png) no-repeat center/contain;
}

.setting-option-wrapper .setting-option-reload .description {
	position: absolute;
	margin-top: 93px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.setting-menu-guide .setting-item .setting-guide-btn {
	display: flex;
	align-items: center;
}

.setting-menu-guide .setting-item .setting-guide-btn img {
	margin-right: 8px;
}

.setting-menu-guide .setting-item .setting-guide-btn div {
	flex: 1;
}

.setting-menu-guide .setting-item .setting-guide-btn span {
	font-size: 20px;
}

.setting-guide-top-close-btn {
	position: absolute;
	left: 1355px;
	top: 154px;

	width: 40px;
	height: 40px;
}

.setting-guide-top-wrapper {
	position: relative;
	width: 1020px;

	display: flex;
	flex-direction: column;
	gap: 24px;
}

.setting-guide-top-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 40px;
	width: 100%;
}

.setting-guide-top-thumbnail {
	width: 240px;
	height: 134.86px;
}

.setting-guide-top-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	width: 100%;
}

.setting-guide-top-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 24px;
	flex: 1;
	font-size: 32px;
}

.setting-guide-top-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	gap: 40px;

	margin: 0 auto;
	width: 400px;
}

.setting-guide-top-detail {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	gap: 32px;
	width: 100%;
}

.setting-guide-top-detail div {
	width: 366px;
}

.setting-guide-top-icon {
	width: 35.56px;
	height: 35.56px;
}

.setting-guide-top-heading {
	padding-bottom: 3px;
}

.setting-option-separator,
.setting-guide-top-separator {
	border: 1px solid #ffffff;
	width: 100%;
}

/* setting-guide */
.setting-guide .setting-guide-inner {
	position: relative;
	display: grid;
	place-items: center;
	height: 100%;
}

.setting-guide .setting-guide-inner::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	backdrop-filter: blur(8px);
	width: 1280px;
	height: 720px;
	z-index: -1;
}

.setting-guide-inner .guide-top-close-btn,
.setting-guide-inner .guide-close-btn {
	content: "";
	position: absolute;
	top: 30px;
	right: 30px;
	background: url(./images/setting_close.png) 0 0 / contain no-repeat;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.guide-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1100px;
	gap: 40px;
}

.guide-heading {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 30px;
}

.guide-heading::before,
.guide-heading::after {
	content: "";
	top: 50%;
	flex: 1;
	background-color: #fff;
	height: 2px;
}

.guide-heading::before {
	margin-right: 11px;
}

.guide-heading::after {
	margin-left: 5px;
}

.guide-wrapper .guide-content .guide-content-item {
	display: none;
	height: 100%;
}

.guide-wrapper .guide-content .guide-content-item.show {
	display: block;
}

.guide-content-item .guide-content-heading {
	display: flex;
	font-size: 32px;
	gap: 24px;
}

.guide-content-item .guide-content-heading-image {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.guide-content-item .guide-content-heading-image img {
	width: 35.56px;
	height: 35.56px;
}

.guide-content-item .guide-content-main {
	display: flex;
	gap: 24px;
}

.guide-content-item .guide-image img {
	width: 600px;
	height: 337px;
}

.guide-content-item .guide-text {
	width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.guide-content-item .guide-text-inner {
	height: 210px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.guide-content-item .guide-text .guide-text-heading {
	font-size: 24px;
	font-weight: 700;
}

.guide-content-item .guide-text-inner .guide-list-title {
	margin-bottom: 0.5em;
}

.guide-content-item .guide-text-inner.thirdeye-guide-5 {
	height: 301px;
}

.guide-content-item .guide-text-inner .guide-item {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 1em;
}

.guide-content-item .guide-text-inner .guide-item::before {
	content: "・";
	position: absolute;
	left: 0;
}

.guide-wrapper .guide-control {
	display: flex;
	justify-content: center;
	align-items: center;
}

.guide-wrapper .guide-control.hidden {
	display: none;
}

.guide-wrapper .guide-return-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 24px;
	cursor: pointer;
}

.guide-wrapper .guide-return-top span {
	font-size: 20px;
}

.guide-wrapper .guide-return-top img {
	width: 24px;
	height: 24px;
	transform: rotate(180deg);
}

.guide-wrapper .guide-control .guide-control-btn {
	background: none;
	font-family: "Noto Sans JP", sans-serif;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 5px 20px;
	border: 1.5px solid #fff;
	border-radius: 8px;
	cursor: pointer;
}

.guide-wrapper .guide-control .guide-control-btn:disabled {
	opacity: 0.5;
}

.guide-wrapper .guide-control .guide-page-index {
	margin: 0 30px;
}

/* setting-quit */
.setting-quit-inner {
	position: relative;
	display: grid;
	place-items: center;
	text-align: center;
	height: 100%;
}

.setting-quit-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	backdrop-filter: blur(4px);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.quit-content {
	width: 100%;
}

.quit-text {
	font-size: 22px;
	margin-bottom: 40px;
}

.quit-text .quit-heading {
	font-size: 40px;
	margin-bottom: 20px;
}

.setting-quit .quit-btns {
	display: flex;
	justify-content: space-between;
	width: 65%;
	margin: 0 auto;
}

.setting-quit .quit-btns div {
	font-size: 30px;
	width: 400px;
	height: 73px;
	line-height: 48px;
	border: 2px solid #fff;
	border-radius: 8px;
	cursor: pointer;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

/* tutorial */
.tutorial-screen {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	height: 720px;

	z-index: 20;
}

.tutorial-screen .tutorial-item {
	visibility: hidden;
	opacity: 0;
}

.tutorial-screen .overlay {
	position: absolute;
	top: -10px;
	left: -10px;
	height: 740px;
	width: 1300px;
	visibility: hidden;
	opacity: 0;
}

.tutorial-screen .content {
	position: relative;
	display: flex;
	justify-content: center;
}

.tutorial-screen .description {
	position: absolute;
	top: 114px;
	text-align: center;

	color: #ffffff;
	font-size: 32px;
	font-weight: 500;
	margin-top: -12.8px;
	line-height: 180%;
}

.tutorial-screen .enter {
	position: absolute;
	top: 243px;
	height: 55px;
	width: 111px;

	border: 2px solid #ffffff;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0);
	color: white;
	font-size: 32px;
	font-weight: 700;

	cursor: pointer;
}

/* talk-select */
.talk-select_base {
	position: absolute;
	left: 730px;
	bottom: 0;
	width: 550px;
}

.pc-safari .talk-select_base {
	top: 448px;
}

.loading-screen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1280px;
	height: 720px;
	z-index: 9999;
	pointer-events: none;
	background-color: black;
	display: none;
}

.loadingContainer {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 200px;
	height: 160px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.loadingContainer .loadingImage {
	margin-bottom: 20px;
}

.loadingContainer .loadingText {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
	color: #8aff59;
	margin-left: -16px;
}

.loadingContainer .loadingText::after {
	content: "";
	position: absolute;
	animation: dots 1s steps(4, end) infinite;
}

.loading-screen .tapToContinue {
	position: absolute;
	right: 32px;
	bottom: 0px;
	width: 200px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
}

.loading-screen .tapToContinueInner {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 24px;
	color: #8aff59;
}

.fade-out {
	opacity: 0;
	animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes dots {
	0% {
		content: "";
	}

	25% {
		content: ".";
	}

	50% {
		content: "..";
	}

	75% {
		content: "...";
	}

	100% {
		content: "";
	}
}