/* ==========================================================================
   初心者向け 遊び方ページ（/page/guide）
   読み物としての読みやすさだけを狙う。サイトの明るい面の上に置く前提で、
   派手な演出は入れない。数値・文言は全てBlade側から入るのでCSSには持たせない。
   横長の説明画像（.guide-shot）は 16:9 で、画像が無い時はBlade側で枠ごと出ない。
   ========================================================================== */

.guide {
	--guide-fg: #1f2430;
	--guide-dim: #6b7280;
	--guide-line: #e5e7eb;
	--guide-card: #f8f9fb;
	--guide-accent: #e53935;
	--guide-accent-soft: #fff4f4;

	max-width: 760px;
	margin: 0 auto;
	padding: 24px 0 56px;
	color: var(--guide-fg);
	line-height: 1.85;
	font-feature-settings: "palt";
}

.guide p { margin: 0 0 1em; }
.guide strong { font-weight: 700; }
.guide a { color: var(--guide-accent); }

/* --- 見出し ------------------------------------------------------------- */
.guide-head {
	text-align: center;
	padding: 8px 0 28px;
	border-bottom: 1px solid var(--guide-line);
	margin-bottom: 28px;
}

.guide-eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--guide-accent-soft);
	color: var(--guide-accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.guide-title {
	margin: 0 0 14px;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.4;
}

.guide-lead {
	margin: 0;
	color: var(--guide-dim);
	font-size: .95rem;
}

/* --- 目次 --------------------------------------------------------------- */
.guide-toc {
	background: var(--guide-card);
	border: 1px solid var(--guide-line);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0 0 36px;
}

.guide-toc-title {
	margin: 0 0 10px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--guide-dim);
	letter-spacing: .08em;
}

.guide-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px 16px;
}

.guide-toc-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	color: var(--guide-fg);
	text-decoration: none;
	font-size: .92rem;
	font-weight: 600;
}

.guide-toc-list a:hover { color: var(--guide-accent); }

.guide-toc-num {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--guide-line);
	color: var(--guide-dim);
	font-size: .72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- セクション --------------------------------------------------------- */
.guide-section {
	padding: 0 0 40px;
	margin: 0 0 40px;
	border-bottom: 1px solid var(--guide-line);
	/* ヘッダーが固定されているページでもアンカーの着地位置が隠れないように */
	scroll-margin-top: 90px;
}

.guide-section:last-of-type { border-bottom: 0; }

.guide-h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 1.28rem;
	font-weight: 800;
	line-height: 1.4;
}

.guide-h2-num {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--guide-accent);
	color: #fff;
	font-size: .92rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.guide-h3 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 12px;
	padding-left: 11px;
	border-left: 4px solid var(--guide-accent);
	font-size: 1.04rem;
	font-weight: 700;
	line-height: 1.5;
}

/* --- 3ステップ ---------------------------------------------------------- */
.guide-steps {
	list-style: none;
	margin: 0 0 20px;
	padding-left: 0;
	display: grid;
	gap: 10px;
}

.guide-steps li {
	background: var(--guide-card);
	border: 1px solid var(--guide-line);
	border-radius: 10px;
	padding: 14px 16px;
}

.guide-step-num {
	display: inline-block;
	margin-right: 10px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--guide-accent);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	vertical-align: 2px;
}

.guide-steps strong { font-size: 1.02rem; }

.guide-step-note {
	display: block;
	margin-top: 2px;
	color: var(--guide-dim);
	font-size: .87rem;
}

/* --- 横長の説明画像 ------------------------------------------------------ */
.guide-shot {
	margin: 20px 0;
	border: 1px solid var(--guide-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--guide-card);
	line-height: 0;
}

.guide-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- 用語の説明 --------------------------------------------------------- */
.guide-defs { margin: 0 0 8px; }

.guide-defs dt {
	margin: 16px 0 4px;
	font-weight: 700;
	font-size: .98rem;
}

.guide-defs dt:first-child { margin-top: 0; }

.guide-defs dd {
	margin: 0;
	padding-left: 14px;
	border-left: 2px solid var(--guide-line);
	color: #414755;
	font-size: .92rem;
}

/* --- 箇条書き ----------------------------------------------------------- */
/* サイト共通CSS(utility.css)が ul,ol の list-style と余白を消すので、ここで戻す */
.guide-list {
	margin: 0 0 1em;
	padding-left: 1.3em;
	list-style: disc;
	font-size: .92rem;
}

.guide-list li { margin-bottom: 4px; }

/* --- 手順 --------------------------------------------------------------- */
/* 番号(1.2.3.)は説明の一部なので、共通CSSで消される list-style をここで戻す */
.guide-flow {
	margin: 0 0 20px;
	padding-left: 1.4em;
	list-style: decimal;
	display: grid;
	gap: 10px;
}

.guide-flow li { padding-left: 4px; }

.guide-flow strong {
	display: block;
	font-size: 1rem;
}

/* --- 2択のカード -------------------------------------------------------- */
.guide-choice {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 20px;
}

.guide-choice-card {
	background: var(--guide-card);
	border: 1px solid var(--guide-line);
	border-radius: 10px;
	padding: 16px;
}

.guide-choice-title {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
}

.guide-choice-card p {
	margin: 0;
	font-size: .89rem;
	color: #414755;
}

/* --- 注意・補足 --------------------------------------------------------- */
.guide-note {
	color: var(--guide-dim);
	font-size: .86rem;
}

.guide-alert {
	background: var(--guide-accent-soft);
	border: 1px solid #f3c9c9;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: .92rem;
}

/* --- イベント ----------------------------------------------------------- */
.guide-event { margin-bottom: 8px; }

.guide-event-more { margin-top: 28px; }

.guide-badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--guide-accent);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.guide-event-now {
	background: #fffaf0;
	border: 1px solid #ffd9a0;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: .94rem;
}

/* --- Q&A ---------------------------------------------------------------- */
.guide-faq dt {
	margin: 18px 0 6px;
	padding-left: 24px;
	position: relative;
	font-weight: 700;
	font-size: .98rem;
}

.guide-faq dt:first-child { margin-top: 0; }

.guide-faq dt::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--guide-accent);
	font-weight: 800;
}

.guide-faq dd {
	margin: 0;
	padding-left: 24px;
	position: relative;
	color: #414755;
	font-size: .92rem;
}

.guide-faq dd::before {
	content: "A";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--guide-dim);
	font-weight: 800;
}

/* --- ボタン ------------------------------------------------------------- */
.guide-cta {
	margin: 20px 0 0;
	text-align: center;
}

.guide-btn {
	display: inline-block;
	min-width: 240px;
	max-width: 100%;
	padding: 13px 24px;
	border-radius: 10px;
	background: var(--guide-accent);
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
}

.guide-btn:hover { opacity: .88; }

.guide-btn-sub {
	background: #fff;
	border: 1px solid var(--guide-line);
	color: var(--guide-fg) !important;
}

.guide-backtotop {
	margin: 32px 0 0;
	text-align: center;
}

/* --- スマホ ------------------------------------------------------------- */
@media screen and (max-width: 640px) {
	.guide { padding: 16px 0 40px; line-height: 1.8; }
	.guide-title { font-size: 1.4rem; }
	.guide-toc-list { grid-template-columns: 1fr; }
	.guide-choice { grid-template-columns: 1fr; }
	.guide-h2 { font-size: 1.16rem; }
	.guide-btn { display: block; min-width: 0; }
}