@charset "utf-8";
/* /inf/ 専用。サイト全体（紫×白）から意図的に離した暗い明朝の面。
   実写画像が入る前提だが、未着でもグラデーションだけで成立するようにしてある。
   モバイル優先（SPを基準に書き、PCは media query で広げる）。 */

.inf {
	--inf-bg:    #06080d;
	--inf-bg2:   #0b0f16;
	--inf-panel: rgba(255,255,255,.035);
	--inf-ink:   #dcdfe7;
	--inf-dim:   #8b92a4;
	--inf-faint: #626a7c;
	--inf-gold:  #c9a86a;
	--inf-line:  rgba(206,214,232,.13);

	background: var(--inf-bg);
	color: var(--inf-ink);
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	line-height: 2.15;
	letter-spacing: .04em;
	position: relative;
	overflow-x: hidden;
	/* サイト共通のコンテナ幅を無視して全幅に出す */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.inf * { box-sizing: border-box; }

.inf__wrap {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 22px;
}

/* ── ヒーロー ───────────────────────────── */
.inf__hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.inf__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* 画像未着時のフォールバック。夜明け前の水面を色だけで表現する */
	background-image:
		radial-gradient(120% 70% at 50% 108%, rgba(28,38,58,.85) 0%, rgba(6,8,13,0) 60%),
		linear-gradient(180deg, #0a1020 0%, #0a0e18 42%, #06080d 100%);
}

.inf__hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* 写真が見えないほど暗くしない。文字の可読性は中央の帯だけで確保する */
	background: linear-gradient(180deg, rgba(6,8,13,.34) 0%, rgba(6,8,13,.12) 42%, rgba(6,8,13,.9) 100%);
}

/* タイプを選んだらヒーローは畳む。以後は問いと物語だけに集中させる */
.inf.is-started .inf__hero { display: none; }

.inf__hero-inner {
	position: relative;
	z-index: 2;
	padding: 78px 22px 64px;
}

.inf__eyebrow {
	font-size: 11px;
	letter-spacing: .34em;
	color: var(--inf-gold);
	margin: 0 0 24px;
	text-indent: .34em;
}

.inf__hero h1 {
	font-size: 25px;
	line-height: 1.95;
	font-weight: 500;
	color: #f0f2f7;
	margin: 0 0 26px;
	letter-spacing: .06em;
}

.inf__hero p {
	font-size: 14px;
	line-height: 2.3;
	color: var(--inf-dim);
	margin: 0;
}

.inf__scroll {
	margin-top: 42px;
	font-size: 10.5px;
	letter-spacing: .3em;
	color: var(--inf-faint);
}
.inf__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 46px;
	margin: 14px auto 0;
	background: linear-gradient(180deg, var(--inf-faint), transparent);
}

/* ── 画面切り替え ────────────────────────── */
.inf__screen { display: none; }
.inf__screen.is-on { display: block; }

.inf__section { padding: 74px 0 84px; }

.inf__lead {
	font-size: 15px;
	line-height: 2.5;
	color: var(--inf-ink);
	margin: 0 0 40px;
	text-align: center;
}
.inf__lead em { font-style: normal; color: var(--inf-gold); }

/* ── タイプ選択カード ───────────────────── */
.inf__choose-title {
	text-align: center;
	font-size: 19px;
	font-weight: 500;
	line-height: 2.1;
	color: #eef0f5;
	margin: 0 0 10px;
	letter-spacing: .07em;
}
.inf__choose-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--inf-faint);
	margin: 0 0 34px;
	line-height: 2.1;
}

.inf__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.inf__card {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	aspect-ratio: 3 / 5;         /* 4行のコピーが入るので縦に伸ばす */
	border: 1px solid var(--inf-line);
	border-radius: 3px;
	overflow: hidden;
	background: var(--inf-bg2);
	cursor: pointer;
	padding: 0;
	text-align: left;
	color: inherit;
	font-family: inherit;
	transition: border-color .5s ease, transform .5s ease;
	-webkit-tap-highlight-color: transparent;
}
.inf__card:hover,
.inf__card:focus-visible { border-color: rgba(201,168,106,.55); transform: translateY(-3px); outline: none; }

.inf__card-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .72;
	transition: opacity .6s ease, transform 6s ease;
}
.inf__card:hover .inf__card-img { opacity: .9; transform: scale(1.05); }

.inf__card--infj .inf__card-img {
	background-image:
		radial-gradient(38% 22% at 50% 27%, rgba(201,168,106,.55) 0%, rgba(201,168,106,0) 70%),
		linear-gradient(180deg, #0d1524 0%, #0a1120 55%, #070a11 100%);
}
.inf__card--infp .inf__card-img {
	background-image:
		radial-gradient(46% 40% at 56% 34%, rgba(178,196,168,.4) 0%, rgba(178,196,168,0) 72%),
		linear-gradient(180deg, #0c1512 0%, #0a1210 55%, #070a0c 100%);
}

.inf__card-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 16px 14px 18px;
	background: linear-gradient(180deg, rgba(6,8,13,0), rgba(6,8,13,.9) 55%);
}
.inf__card-code {
	display: block;              /* span なので明示しないと本文と同じ行に流れる */
	font-size: 10.5px;
	letter-spacing: .26em;
	color: var(--inf-gold);
	margin: 0 0 7px;
}
.inf__card-copy {
	display: block;
	font-size: 11.5px;
	line-height: 1.85;
	color: #dfe2ea;
	margin: 0;
}

/* ── 問い ─────────────────────────────── */
.inf__q-shell {
	position: relative;
	min-height: 92vh;   /* 下にサイト共通の明るいブロックが覗かないように */
	display: flex;
	align-items: center;
	overflow: hidden;
}
.inf__q-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(180deg, #080c14 0%, #060810 100%);
	opacity: .85;
}
.inf__q-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6,8,13,.62);
}
.inf__q-inner { position: relative; z-index: 2; width: 100%; padding: 56px 0 64px; }

.inf__q-count {
	text-align: center;
	font-size: 10.5px;
	letter-spacing: .3em;
	color: var(--inf-faint);
	margin: 0 0 8px;
}
.inf__q-rail {
	width: 100%;
	max-width: 240px;
	height: 1px;
	margin: 0 auto 40px;
	background: rgba(206,214,232,.14);
}
.inf__q-fill {
	height: 100%;
	width: 0;
	background: var(--inf-gold);
	transition: width .7s cubic-bezier(.22,.8,.3,1);
}

.inf__q-text {
	text-align: center;
	font-size: 19px;
	font-weight: 500;
	line-height: 2.15;
	color: #f0f2f7;
	margin: 0 0 38px;
	letter-spacing: .05em;
	min-height: 4.3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inf__opts { display: grid; gap: 12px; }

.inf__opt {
	display: block;
	width: 100%;
	background: var(--inf-panel);
	border: 1px solid var(--inf-line);
	border-radius: 3px;
	color: var(--inf-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.95;
	letter-spacing: .04em;
	padding: 19px 20px;
	text-align: left;
	cursor: pointer;
	transition: background .35s ease, border-color .35s ease, transform .35s ease;
	-webkit-tap-highlight-color: transparent;
}
.inf__opt:hover,
.inf__opt:focus-visible {
	background: rgba(201,168,106,.09);
	border-color: rgba(201,168,106,.42);
	transform: translateX(3px);
	outline: none;
}

.inf__back {
	display: block;
	margin: 30px auto 0;
	background: none;
	border: 0;
	color: var(--inf-faint);
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .16em;
	cursor: pointer;
	padding: 8px 12px;
}
.inf__back[hidden] { display: none; }

/* ── 物語 ─────────────────────────────── */
.inf__story { padding: 68px 0 40px; }

.inf__story-open {
	text-align: center;
	margin: 0 0 54px;
}
.inf__story-open span {
	display: block;
	font-size: 10.5px;
	letter-spacing: .32em;
	color: var(--inf-gold);
	margin-bottom: 20px;
}
.inf__story-open strong {
	display: block;
	font-size: 21px;
	font-weight: 500;
	line-height: 2.1;
	color: #f2f4f8;
	letter-spacing: .06em;
}

.inf__p {
	font-size: 15px;
	line-height: 2.55;
	color: #cdd2dd;
	margin: 0 0 28px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1.4s ease, transform 1.4s ease;
}
.inf__p.is-in { opacity: 1; transform: none; }
.inf__p em { font-style: normal; color: #f0e2c2; border-bottom: 1px solid rgba(201,168,106,.42); padding-bottom: 1px; }

.inf__rule {
	width: 100%;
	height: 1px;
	margin: 52px 0;
	background: linear-gradient(90deg, transparent, var(--inf-line), transparent);
}

.inf__scene {
	height: 190px;
	margin: 52px 0;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(180deg, #0b111c, #070a11);
	opacity: .8;
}

/* 結びの直後に置く一枚。縦位置の被写体（手のひら）なので背景位置を上寄せにする */
.inf__scene--end {
	height: 300px;
	background-position: center 38%;
	margin: 60px 0 44px;
	opacity: .92;
}

/* ── 続きへ ───────────────────────────── */
.inf__bridge {
	margin: 66px 0 0;
	padding: 40px 24px 44px;
	border-top: 1px solid var(--inf-line);
	border-bottom: 1px solid var(--inf-line);
	text-align: center;
	background: linear-gradient(180deg, rgba(201,168,106,.05), rgba(6,8,13,0));
}
.inf__bridge p { margin: 0 0 14px; }
.inf__bridge-lead { font-size: 14.5px; line-height: 2.3; color: #dcdfe7; }
.inf__bridge-sub  { font-size: 13px; line-height: 2.3; color: var(--inf-dim); margin-bottom: 28px !important; }

.inf__go {
	display: inline-block;
	border: 1px solid rgba(201,168,106,.6);
	border-radius: 2px;
	color: #f2e6cc;
	font-size: 13.5px;
	letter-spacing: .22em;
	text-decoration: none;
	padding: 16px 34px;
	transition: background .45s ease, color .45s ease;
}
.inf__go:hover { background: rgba(201,168,106,.14); color: #fff; }

.inf__restart {
	display: block;
	margin: 40px auto 0;
	background: none;
	border: 0;
	color: var(--inf-faint);
	font-family: inherit;
	font-size: 11.5px;
	letter-spacing: .16em;
	cursor: pointer;
	padding: 10px;
}

.inf__note {
	font-size: 11px;
	line-height: 2;
	color: #565d6d;
	text-align: center;
	padding: 30px 0 70px;
	margin: 0;
}
/* サイト共通の下線・打ち消し線がここに効いて取り消し線に見えていた */
.inf a { text-decoration: none; background-image: none; border-bottom: 0; }
.inf__note a { color: var(--inf-gold); border-bottom: 1px solid rgba(201,168,106,.4); }

/* 暗い面がフッターまで続くようにする（下に白が覗くのを防ぐ） */
.inf::after {
	content: "";
	display: block;
	height: 1px;
	background: var(--inf-bg);
	box-shadow: 0 60px 0 60px var(--inf-bg);
}

/* ── PC ───────────────────────────────── */
@media (min-width: 768px) {
	.inf__wrap { padding: 0 28px; }
	.inf__hero { min-height: 84vh; }
	.inf__hero h1 { font-size: 33px; line-height: 2.05; }
	.inf__hero p { font-size: 15px; }
	.inf__cards { gap: 22px; }
	.inf__q-text { font-size: 23px; }
	.inf__opt { font-size: 15px; padding: 22px 26px; }
	.inf__p { font-size: 16px; line-height: 2.65; }
	.inf__story-open strong { font-size: 26px; }
	.inf__scene { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.inf__p { opacity: 1; transform: none; transition: none; }
	.inf__card, .inf__card-img, .inf__opt, .inf__q-fill { transition: none; }
}