:root {
	--font-zen-kakugo: "Zen Kaku Gothic New", sans-serif;
	--font-noto-sans:  "Noto Sans JP", sans-serif;
	--font-jost:  "Jost", sans-serif;
	--font-main-color: #505050;
	--main-color: #2F53A0;
	--accent-color: #FF6A45;
}
html,
body {
	color: #404040;
	background-color: #fff;
	font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック体", "メイリオ", Meiryo, sans-serif;
}
body {
	background: linear-gradient(148deg, #345DB5 19%, #4894D6 67%, #345DB5 100%);
	font-family: sans-serif;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100dvh;
	overflow: hidden;
}

.side-decor {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	height: auto;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
.side-decor--left {
	left: max(2vw, calc(50vw - 225px - 260px));
	width: min(220px, 18vw);
}
.side-decor--right {
	right: max(2vw, calc(50vw - 225px - 300px));
	width: min(260px, 22vw);
	pointer-events: auto;
	cursor: pointer;
	display: block;
}
.side-decor--right img {
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 900px) {
	.side-decor { display: none; }
}

.container {
	position: relative;
	container-type: inline-size;
	max-width: 450px;
	width: 100%;
	height: 100dvh;
	/* aspect-ratio: 750 / 1140; */
	max-height: 100dvh;
	overflow: hidden;
}

.hero-display-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 1500px;
}

.hero-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.hero-content.is-visible {
	visibility: visible;
	opacity: 1;
}

/* --- スクロールモード用のスタイル (content-1, content-2) --- */
.hero-content.scroll-mode {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	display: block; /* 中央寄せ解除 */
	/* スクロールバー非表示 (Firefox, IE/Edge) */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* スクロールバー非表示 (Chrome, Safari) */
.hero-content.scroll-mode::-webkit-scrollbar {
	display: none;
}

/* スクロールモード内の背景画像は高さを自動にし、親要素に合わせてスクロールさせる */
.hero-content.scroll-mode .background-image {
	position: relative; /* absoluteから変更 */
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 1;
	display: block;
}

/* スクロールモード内のオーバーレイは画像全体に被せる */
.hero-content.scroll-mode .overlay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important; /* JSの計算を上書き */
	/* heightはJSで計算された値（画像の高さ）が適用されるため、ここでは指定しない */
}

/* 通常モードの背景画像 */
.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	z-index: 1;
}

@media screen and (max-width: 540px) {
	.background-image {
		object-position: top;
	}
}

.overlay-wrapper {
	position: absolute;
	transform-style: preserve-3d;
	z-index: 2;
}

/* =========================================== */
/* === 質問画面 (content-1 / content-2) ====== */
/* =========================================== */

/* themed-bg の質問画面は overlay-wrapper を使わず page-inner を直接配置 */
.hero-content.themed-bg {
	background: #ffffff;
}

/* scroll-mode + themed-bg では background-image / overlay-wrapper の制約を解除 */
.hero-content.themed-bg.scroll-mode .overlay-wrapper {
	position: static;
	width: auto !important;
	height: auto !important;
}

.page-inner {
	position: relative;
	background: url(../img/bg_content.webp) center/ cover;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: calc(80 / 750 * 100cqw);
}

/* ヘッダー画像 */
.diag-header {
	width: 96.4%;
	margin-inline: auto;
	padding-block: 32px 24px;
}

.diag-header__image {
	display: block;
	width: 100%;
	height: auto;
}

.sub-header-bar, 
.questions-container {
	width: 95%;
	margin-inline: auto;
}
/* サブヘッダー青バー */
.sub-header-bar {
	background: #345DB5;
	color: #ffffff;
	padding: 16px 0;
	font-size: calc(30 / 750 * 100cqw);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04em;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

.sub-header-bar__icon {
	display: inline-block;
	margin-right: 4px;
	font-size: 18px;
	animation: subheader-text-bounce 1.2s ease-in-out infinite;
}

.sub-header-bar__text {
	display: inline-block;
	animation: subheader-text-bounce 1.2s ease-in-out infinite;
}
@keyframes subheader-text-bounce {
	0%, 100% { transform: translateY(-1px); }
	50%      { transform: translateY(-6px); }
}

/* 質問カードコンテナ */
.questions-container {
	display: flex;
	flex-direction: column;
	/* 奇数/偶数で背景色を切り替えるため gap は 0 */
}

.question-card {
	padding: calc(28 / 750 * 100cqw) 16px calc(44 / 750 * 100cqw);
	background: #ffffff;
}

/* 奇数番目 (1,3,5) = 白 / 偶数番目 (2,4,6) = #EEEEEE */
.question-card:nth-child(even) {
	background: #EEEEEE;
}

.question-card__text {
	margin: 0 0 24px;
	font-size: clamp(12px, 4vw, 30px);
	line-height: 1.5;
	color: var(--font-main-color);
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: bold;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

.question-card__q-mark {
	font-family: var(--font-jost);
	color: #FF6A45;
	font-weight: 500;
	font-size: calc(36 / 750 * 100cqw);
	line-height: 1.4;
	flex-shrink: 0;
	letter-spacing: 0.02em;
}

.question-card__body {
	flex: 1;
	font-size: calc(28 / 750 * 100cqw);
	color: var(--font-main-color);
	font-weight: bold;
}

/* 回答ボタン3つ (純CSS) */
.question-row {
	display: grid;
	width: 93%;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 3%;
	align-items: stretch;
	margin-inline: auto;
}

.answer-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid #345DB5;
	background: #ffffff;
	color: #345DB5;
	border-radius: 4px;
	box-shadow: 2px 4px 7px 0 rgba(0, 0, 0, 0.3);
	padding: 0 min(2.5%, 20px);
	height: calc(94 / 750 * 100cqw);
	font-size:  calc(30 / 750 * 100cqw);
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.18s ease-out, color 0.18s ease-out;
	-webkit-tap-highlight-color: transparent;
	font-family: "Zen Kaku Gothic New", sans-serif;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

.answer-btn.selected {
	background: #345DB5;
	color: #ffffff;
}

/* 次へボタンエリア */
.next-btn-container {
	/* padding: 18px 16px 20px; */
	margin-block: 32px;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.3s ease-out, filter 0.3s ease-out;
	/* background: #ffffff; */
}

.next-step-btn {
	display: block;
	width: 85%;
	max-width: 420px;
	margin: 0 auto;
}

.next-btn-container.disabled {
	/* opacity: 0.5; */
	filter: grayscale(1);
	pointer-events: none;
	cursor: not-allowed;
}

/* フッターの文字色変更 */
.footer-links.black-text a {
	color: #000000;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

/* --- 既存スタイル --- */
.fv-item-container {
	position: absolute;
	z-index: 3;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: z-index 0s linear 0.2s;
}

.fv-item-container:hover {
	z-index: 100;
	transition-delay: 0s;
}




.hero-action-button,
.result-button-link {
	position: absolute;
	cursor: pointer;
	transition:
		transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		filter 0.2s ease-out;
	display: block;
}
.hero-action-button img {
	display: block;
	width: 100%;
	  -webkit-animation: moderate-pulse 3s ease-in-out infinite;
		animation: moderate-pulse 3s ease-in-out infinite;
}
.result-button-link img {
	display: block;
	width: 100%;
}
@-webkit-keyframes moderate-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes moderate-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.hero-action-button:hover {
	opacity: 0.8;
}

.result-button-link {
	bottom: 8.125%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
}

/* .result-button-link:hover {
	transform: translateX(-50%) scale(1.08) rotate(-3deg);
	filter: brightness(1.2) drop-shadow(0 0 8px #ffdd00);
} */

.shine-button {
	position: absolute;
	overflow: hidden;
	border-radius: 5px;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.shine-button::before,
.shine-button::after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	transform: skewX(-25deg);
	animation: shine-effect 2.5s infinite linear;
	z-index: 2;
}

.shine-button::before {
	width: 50%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.shine-button::after {
	width: 20%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation-delay: 0.2s;
}

@keyframes shine-effect {
	0% {
		left: -100%;
	}
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

.loading-ui-container,
.result-hero,
.result-item-wrapper {
	position: absolute;
}

.footer-links {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2% 10%; 
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	transition: opacity 0.5s ease-out;
}
.footer-links a {
	color: var(--font-main-color);
	text-decoration: none;
	font-size: calc(20 / 750 * 100cqw);
	font-weight: bold;
	transition: all 0.3s ease-out;
}
@media screen and (max-width: 420px) {
	.footer-links {
		padding: 2% 5%;
	}
}
.footer-links a:hover {
	opacity: 0.5;
}

.footer-links.is-hidden {
	opacity: 0;
	pointer-events: none;
}
/* ========================================= */
/* === ローディング画面 ==================== */
/* ========================================= */

.dark-bg {
	background: var(--dark-blue);
}

/* 回路柄 (薄いドット+直線) */
.circuit-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(
			circle at 15% 20%,
			rgba(120, 170, 230, 0.22) 0,
			rgba(120, 170, 230, 0) 2px
		),
		radial-gradient(
			circle at 85% 35%,
			rgba(120, 170, 230, 0.22) 0,
			rgba(120, 170, 230, 0) 2px
		),
		radial-gradient(
			circle at 40% 70%,
			rgba(120, 170, 230, 0.22) 0,
			rgba(120, 170, 230, 0) 2px
		),
		radial-gradient(
			circle at 75% 85%,
			rgba(120, 170, 230, 0.22) 0,
			rgba(120, 170, 230, 0) 2px
		),
		linear-gradient(
			90deg,
			transparent 49.6%,
			rgba(120, 170, 230, 0.08) 50%,
			transparent 50.4%
		),
		linear-gradient(
			0deg,
			transparent 49.6%,
			rgba(120, 170, 230, 0.08) 50%,
			transparent 50.4%
		);
	background-size:
		220px 220px,
		260px 260px,
		180px 180px,
		300px 300px,
		60px 60px,
		60px 60px;
	opacity: 0.9;
	pointer-events: none;
	z-index: 1;
}

#loading-screen .overlay-wrapper,
#result-content .overlay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#loading-screen .overlay-wrapper {
	background:
		linear-gradient(rgba(3, 50, 82, 0.16), rgba(3, 50, 82, 0.16)),
		url(../img/bg_result.webp) center / cover no-repeat;
}

#result-content .overlay-wrapper {
	background:
		linear-gradient(rgba(3, 50, 82, 0.16), rgba(3, 50, 82, 0.16)),
		url(../img/bg_result.webp) center / cover no-repeat;
}

.loading-ui-container {
	position: absolute;
	top: 38%;
	left: 8%;
	width: 84%;
	color: var(--white);
	text-align: center;
}

.loading-lead {
	color: #fff;	
	margin: 0 0 28px;
	font-size: calc(32 / 750 * 100cqw);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.04em;
}

.loading-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 4px;
	margin-bottom: 8px;
}

.loading-label {
	color: #fff;	
	font-size: calc(32 / 750 * 100cqw);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.progress-text {
	color: #fff;	
	font-family: var(--font-jost);
	font-size: calc(60 / 750 * 100cqw);
	font-weight: 900;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.progress-text span {
	font-size: calc(40 / 750 * 100cqw);
}
.progress-bar-container {
	width: 100%;
	height: 18px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	padding: 3px;
	box-sizing: border-box;
	overflow: hidden;
}

.progress-segments-wrapper {
	width: 100%;
	height: 100%;
	background-color: transparent;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	width: 0%;
	background-color: #ffffff;
	transition: width 0.1s linear;
}

/* ========================================= */
/* === 結果画面 =========================== */
/* ========================================= */

.result_bubble {
	position: absolute;
	width: 100%;
	top: min(5%, 78px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}
.result_bubble img {
	width: 68%;
}

.result-lock-card {
	position: absolute;
	top: min(25%, 320px);
	text-align: center;
}
.result-lock-card img {
	width: 75.6%;
}
.result-lock-icon {
	width: 92px;
	height: auto;
	color: var(--primary-blue);
	display: block;
	margin: 0 auto 18px;
	filter: drop-shadow(0 2px 6px rgba(30, 90, 184, 0.2));
}

.result-cta-bubble {
	display: inline-block;
	padding: 8px 20px;
	background: var(--white);
	color: var(--accent-orange);
	border: 2px solid var(--accent-orange);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.result-cta-bubble__accent {
	color: var(--accent-orange-dark);
}

.result-cta-link {
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	display: block;
	transition:
		transform 0.2s ease-out,
		filter 0.2s ease-out;
}

.result-cta-link img {
	display: block;
	width: 100%;
}

.result-cta-link:hover {
	transform: translateX(-50%) scale(1.03);
	filter: brightness(1.06) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.result-cta-link:active {
	transform: translateX(-50%) scale(0.98);
}

/* === ユーティリティ === */
.is-animating {
	pointer-events: none;
}

/* ========================================= */
/* === 追加アニメーション ================== */
/* ========================================= */

/* --- スタートボタン: その場で拡大・縮小 --- */
#content-0 .hero-action-button.next-button img {
	animation: start-scale 1.4s ease-in-out infinite;
	transform-origin: center center;
}
/* #content-0 .hero-action-button.next-button:hover {
	transform: scale(1.1);
} */
@keyframes start-scale {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.09); }
}

/* --- 質問ボタン: ホバーで青系のリフト --- */
.answer-btn {
	transition:
		background-color 0.2s ease-out,
		color 0.2s ease-out,
		transform 0.2s ease-out,
		box-shadow 0.2s ease-out,
		border-color 0.2s ease-out;
}
@media (hover: hover) {
	.answer-btn:hover:not(.selected) {
		transform: translateY(-5px) scale(1.06);
		background: #EAF2FF;
		color: #2F53A0;
		border-color: #2F53A0;
		box-shadow: 3px 10px 18px 0 rgba(52, 93, 181, 0.45);
	}
	.answer-btn:active:not(.selected) {
		transform: translateY(-1px) scale(1.02);
		box-shadow: 1px 3px 6px 0 rgba(52, 93, 181, 0.35);
	}
}

/* --- result.webp シェイク --- */
.result-lock-card img {
	animation: result-shake 1.4s ease-in-out infinite;
	transform-origin: center center;
}
/* [7] 鍵がカチッと震える感じ: 短いラトル + 小さなポップ */
@keyframes result-shake {
	0%, 82%, 100% { transform: translate(0,0) rotate(0); }
	84%  { transform: translate(-3px, -1px) rotate(-1.5deg); }
	85%  { transform: translate(3px, 1px)  rotate(1.5deg); }
	86%  { transform: translate(-3px, -1px) rotate(-1.5deg); }
	87%  { transform: translate(3px, 1px)  rotate(1.5deg); }
	88%  { transform: translate(-2px, 0)   rotate(-0.8deg); }
	89%  { transform: translate(2px, 0)    rotate(0.8deg); }
	90%  { transform: translate(0, -2px) scale(1.04) rotate(0); }
	94%  { transform: translate(0, 0) scale(1) rotate(0); }
}

/* --- result_bubble ふわふわ --- */
.result_bubble img {
	animation: bubble-float 3.2s ease-in-out infinite;
}
@keyframes bubble-float {
	0%, 100% { transform: translateY(0) rotate(-0.5deg); }
	50%      { transform: translateY(-8px) rotate(0.5deg); }
}


/* --- [3][6] 質問カード: 表示時にスタガ付きフェードイン (CSSのみ) --- */
.hero-content.is-visible .question-card {
	animation: card-reveal 0.55s ease-out both;
}
.hero-content.is-visible .question-card:nth-child(1) { animation-delay: 0.05s; }
.hero-content.is-visible .question-card:nth-child(2) { animation-delay: 0.14s; }
.hero-content.is-visible .question-card:nth-child(3) { animation-delay: 0.23s; }
.hero-content.is-visible .question-card:nth-child(4) { animation-delay: 0.32s; }
.hero-content.is-visible .question-card:nth-child(5) { animation-delay: 0.41s; }
.hero-content.is-visible .question-card:nth-child(6) { animation-delay: 0.50s; }
@keyframes card-reveal {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-content.is-visible .question-card {
		animation: none;
	}
}

/* --- [4] プログレスバー shimmer --- */
.progress-bar-container {
	position: relative;
}
.progress-bar-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: -30%;
	width: 30%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.55) 50%,
		rgba(255,255,255,0) 100%
	);
	transform: skewX(-20deg);
	animation: progress-shimmer 2.4s linear infinite;
	pointer-events: none;
	border-radius: 999px;
}
@keyframes progress-shimmer {
	0%   { left: -30%; }
	60%  { left: 110%; }
	100% { left: 110%; }
}