/* ============================================================
   体験受講について（/trial/）だけの CSS（書き直し 2026-11-10）
   site.css のあとに、このページでだけ読まれる。色・字の大きさは site.css の値を使う。緑の「お問い合わせ」のボタンも site.css の形のまま（ここでは何も足さない）。
   並び：1 値と土台 → 2 写真の帯 → 3 ページ内の案内 → 4 最初の箱 → 5 場面の箱と見出し
        → 6 クラスを選ぶ → 7 当日の進み方 → 8 三つの安心 → 9 申込みの流れ → 10 よくある質問 → 11 最後の緑の箱
   画面幅の区切りは site.css と同じ二つ：1000px、782px
   ============================================================ */


/* 1. 値と土台 ------------------------------------------------ */

.kf-trial-basic {
	--trial-surface: #fffdf8;
	--trial-card: #fffefa;
	--trial-line: #d9cfbb;
	--trial-frame: rgba(201, 184, 151, 0.78);   /* 箱の外枠 */
	--trial-sand: linear-gradient(145deg, #f9f5ec 0%, #f4eddf 100%);   /* 砂色の場面 */
	--trial-green: #5b735e;
	--trial-green-pale: #edf2eb;
	--trial-box: min(1080px, 100% - 48px);
}

.kf-trial-basic :where(dl, dd, ol) { margin: 0; }
.kf-trial-basic :where(ol) { padding: 0; list-style: none; }
.kf-trial-basic :where(a:not(.kf-sample-button, .kf-contact-button)) { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } /* ボタンは site.css の速さのまま */
.kf-trial-basic :where(a:focus-visible, summary:focus-visible) { outline: 2px solid #7e6538; outline-offset: 4px; }

/* 問い合わせフォームの reCAPTCHA の印はこのページでは見せない */
.grecaptcha-badge { visibility: hidden !important; }

/* 小さな英字 */
.kf-trial-basic__hero-eyebrow,
.kf-trial-basic__eyebrow,
.kf-trial-basic__prepare-label {
	font-size: var(--fs-12);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.2em;
	color: var(--bronze);
}
.kf-trial-basic__eyebrow { margin-bottom: 12px; }

/* 箱の幅 */
.kf-trial-basic__jump,
.kf-trial-basic__opening,
.kf-trial-basic__section,
.kf-trial-basic__final {
	width: var(--trial-box);
	margin-inline: auto;
}

/* 「→」の付いた文字のリンク */
.kf-trial-basic__secondary-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-14);
	font-weight: 600;
	text-underline-offset: 5px;
}
.kf-trial-basic__secondary-link:hover { color: var(--ink); }
.kf-trial-basic__all-faq a:hover { color: var(--ink-soft); }

/* 最初の箱と最後の箱の「お問い合わせ」は、マウスを乗せると少し浮く */
:is(.kf-trial-basic__opening, .kf-trial-basic__final) .kf-contact-button:hover { transform: translateY(-1px); }


/* 2. 写真の帯 ------------------------------------------------ */

.kf-trial-basic__hero {
	position: relative;
	min-height: 280px;
	overflow: hidden;
	background: #f4ede1 url("../images/trial-header-belongings-wide-v3.webp") center / cover no-repeat;
	text-align: center;
}
/* 題の後ろを少し明るくする */
.kf-trial-basic__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0 27%, rgba(255, 253, 248, 0.34) 40% 60%, transparent 73% 100%);
	pointer-events: none;
}
.kf-trial-basic__hero-heading {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: min(650px, 100% - 96px);
	transform: translate(-50%, -50%);
}
.kf-trial-basic__hero-eyebrow { margin-bottom: 13px; }
.kf-trial-basic__hero-title { font-size: var(--fs-36); font-weight: 400; line-height: 1.45; letter-spacing: 0.11em; }
.kf-trial-basic__hero-lead { margin-top: 15px; font-size: var(--fs-12); letter-spacing: 0.13em; color: var(--ink-soft); }


/* 3. ページ内の案内 ------------------------------------------ */

.kf-trial-basic__jump {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 48px;
	overflow: hidden;
	border: 1px solid var(--trial-frame);
	border-radius: 12px;
	background: rgba(255, 253, 248, 0.94);
	box-shadow: 0 9px 28px rgba(70, 59, 41, 0.06);
}
.kf-trial-basic__jump a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 66px;
	border-left: 1px solid var(--trial-line);
	font-size: var(--fs-14);
	letter-spacing: 0.035em;
	color: var(--ink);
}
.kf-trial-basic__jump a:first-child { border-left: 0; }
.kf-trial-basic__jump a:hover { background: #f5f0e6; }


/* 4. 最初の箱 ------------------------------------------------ */

.kf-trial-basic__opening {
	display: grid;
	grid-template: "copy guide" "facts facts" / minmax(0, 1fr) 310px;
	margin-top: 18px;
	overflow: hidden;
	border: 1px solid var(--trial-frame);
	border-radius: 18px;
	background: linear-gradient(102deg, #fffdf9 0%, #f4f7ef 43%, #dbe8d7 100%);
	box-shadow: 0 18px 48px rgba(70, 59, 41, 0.08);
}

.kf-trial-basic__opening-copy { grid-area: copy; padding: 60px 62px 54px; }
.kf-trial-basic__opening-title { margin-bottom: 22px; font-size: var(--fs-36); font-weight: 400; line-height: 1.65; letter-spacing: 0.045em; }
.kf-trial-basic__opening-title span { display: block; }
.kf-trial-basic__lead { max-width: 41rem; margin-bottom: 28px; font-size: var(--fs-16); line-height: 2.05; color: var(--ink-soft); }
.kf-trial-basic__response { margin-top: 13px; font-size: var(--fs-12); line-height: 1.7; color: var(--ink-soft); }

/* ルールーと「はじめての方へ」 */
.kf-trial-basic__opening-guide {
	grid-area: guide;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: end;
	padding: 34px 26px 30px 42px;
}
.kf-trial-basic__opening-guide::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -54px;
	right: -54px;
	width: 160px;
	height: 160px;
	border: 1px solid rgba(102, 131, 105, 0.22);
	border-radius: 50%;
}
.kf-trial-basic__opening-guide img { position: relative; z-index: 2; width: min(100%, 205px); margin: 0 auto -3px -18px; }
.kf-trial-basic__opening-guide div { position: relative; z-index: 2; padding-top: 17px; }
.kf-trial-basic__opening-guide :is(span, strong) { display: block; color: var(--ink-soft); }
.kf-trial-basic__opening-guide span { margin-bottom: 6px; font-size: var(--fs-12); letter-spacing: 0.18em; }
.kf-trial-basic__opening-guide strong { margin-bottom: 8px; font-size: var(--fs-16); font-weight: 500; }
.kf-trial-basic__opening-guide p { font-size: var(--fs-12); line-height: 1.8; color: var(--ink-soft); }

/* 対象・開講・体験受講料・場所 */
.kf-trial-basic__facts {
	grid-area: facts;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--trial-line);
	background: rgba(255, 253, 248, 0.72);
}
.kf-trial-basic__facts > div { padding: 21px 16px 23px; border-left: 1px solid var(--trial-line); text-align: center; }
.kf-trial-basic__facts > div:first-child { border-left: 0; }
.kf-trial-basic__facts dt { margin-bottom: 6px; font-size: var(--fs-12); letter-spacing: 0.09em; color: var(--bronze); }
.kf-trial-basic__facts dd { font-size: var(--fs-16); letter-spacing: 0.035em; }


/* 5. 場面の箱と見出し ---------------------------------------- */

.kf-trial-basic__section {
	margin-top: 34px;
	padding: 76px 66px;
	border: 1px solid var(--trial-frame);
	border-radius: 18px;
	background: var(--trial-surface);
	box-shadow: 0 18px 48px rgba(70, 59, 41, 0.07);
	scroll-margin-top: 30px;
}
.kf-trial-basic__section--day,
.kf-trial-basic__section--faq { background: var(--trial-sand); }
.kf-trial-basic__section--reassurance { overflow: hidden; background: var(--trial-green-pale); }

.kf-trial-basic__section-head { max-width: 740px; margin-bottom: 40px; }
.kf-trial-basic__section-head h2 {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	gap: 15px;
	margin-bottom: 16px;
	font-size: var(--fs-36);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.055em;
}
/* 見出しの左の小さな絵 */
.kf-trial-basic__section-head h2::before {
	content: "";
	width: 52px;
	height: 52px;
	background: var(--trial-icon) center / contain no-repeat;
}
.kf-trial-basic__section--classes { --trial-icon: url("../images/heading-icons/heading-classes-v1.png"); }
.kf-trial-basic__section--day { --trial-icon: url("../images/heading-icon-candidates/new/C17-activity-notes.png"); }
.kf-trial-basic__section--reassurance { --trial-icon: url("../images/heading-icon-candidates/new/C01-trial-gate.png"); }
.kf-trial-basic__section--flow { --trial-icon: url("../images/heading-icon-candidates/new/C19-schedule-calendar.png"); }
.kf-trial-basic__section--faq { --trial-icon: url("../images/heading-icon-candidates/new/C03-faq-dialogue.png"); }

.kf-trial-basic__section-head > p:last-child { font-size: var(--fs-14); line-height: 1.95; color: var(--ink-soft); }
.kf-trial-basic__section-head--center { margin-inline: auto; text-align: center; }
.kf-trial-basic__section-head--center h2 { width: fit-content; margin-inline: auto; text-align: left; }

/* 上下に線のある注意書き */
.kf-trial-basic__policy-note {
	max-width: 760px;
	margin: 25px auto 0;
	padding: 14px 20px;
	border-block: 1px solid #c1ccbd;
	font-size: var(--fs-12);
	line-height: 1.75;
	text-align: center;
	color: var(--ink-soft);
}


/* 6. クラスを選ぶ -------------------------------------------- */

.kf-trial-basic__class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.kf-trial-basic__class-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--trial-line);
	border-radius: 14px;
	background: var(--trial-card);
	box-shadow: 0 9px 24px rgba(66, 57, 42, 0.06);
}

.kf-trial-basic__class-photo { position: relative; overflow: hidden; aspect-ratio: 1200 / 630; background: #eae6de; }
.kf-trial-basic__class-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 62%, rgba(29, 29, 25, 0.45));
}
.kf-trial-basic__class-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.kf-trial-basic__class-card:hover .kf-trial-basic__class-photo img { transform: scale(1.018); }
.kf-trial-basic__class-photo figcaption {
	position: absolute;
	z-index: 1;
	right: 18px;
	bottom: 13px;
	font-size: var(--fs-12);
	letter-spacing: 0.14em;
	color: var(--white);
}

.kf-trial-basic__class-content { padding: 30px 30px 32px; }
.kf-trial-basic__class-top { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 16px; }
.kf-trial-basic__class-tag {
	padding: 5px 10px;
	border: 1px solid #c4d0c0;
	border-radius: var(--pill);
	background: #f1f5ef;
	font-size: var(--fs-12);
	letter-spacing: 0.05em;
	color: var(--ink-soft);
}
.kf-trial-basic__class-content h3 { margin-bottom: 14px; font-size: var(--fs-23); font-weight: 500; line-height: 1.45; letter-spacing: 0.05em; }
.kf-trial-basic__class-content h3 span { display: block; margin-top: 4px; font-size: var(--fs-14); font-weight: 400; color: var(--ink-soft); }
.kf-trial-basic__class-content h3 rt { font-size: var(--fs-12); font-weight: 500; }
.kf-trial-basic__class-content > p { min-height: 5.5em; margin-bottom: 22px; font-size: var(--fs-14); line-height: 1.9; color: var(--ink-soft); }

/* 時間・会場・体験日 */
.kf-trial-basic__class-meta { margin-bottom: 24px; border-top: 1px solid var(--trial-line); }
.kf-trial-basic__class-meta > div {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--trial-line);
}
.kf-trial-basic__class-meta dt { font-size: var(--fs-12); color: var(--bronze); }
.kf-trial-basic__class-meta dd { font-size: var(--fs-14); }

/* 「迷ったら」 */
.kf-trial-basic__choice-help {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	margin-top: 24px;
	padding: 22px 26px;
	border: 1px solid #c9d4c6;
	border-radius: 12px;
	background: var(--trial-green-pale);
}
.kf-trial-basic__choice-help > :where(.kf-inline) > span {
	padding: 5px 11px;
	border-radius: var(--pill);
	background: var(--trial-green);
	font-size: var(--fs-12);
	color: var(--white);
}
.kf-trial-basic__choice-help p { font-size: var(--fs-14); line-height: 1.75; color: var(--ink-soft); }


/* 7. 当日の進み方 -------------------------------------------- */

.kf-trial-basic__day-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(270px, 0.68fr); gap: 34px; }

/* 01・02・03 を縦の線でつなぐ */
.kf-trial-basic__day-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 20px;
	padding-bottom: 32px;
}
.kf-trial-basic__day-steps li:last-child { padding-bottom: 0; }
.kf-trial-basic__day-steps li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 44px;
	bottom: 7px;
	left: 20px;
	width: 1px;
	background: #cbbb99;
}
.kf-trial-basic__day-steps li > :where(.kf-inline) > span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid #bda676;
	border-radius: 50%;
	background: #fffaf0;
	font-size: var(--fs-12);
	color: var(--bronze);
}
.kf-trial-basic__day-steps h3 { margin: 2px 0 7px; font-size: var(--fs-19); font-weight: 500; letter-spacing: 0.04em; }
.kf-trial-basic__day-steps p { font-size: var(--fs-14); line-height: 1.85; color: var(--ink-soft); }

/* 服装と持ちもの */
.kf-trial-basic__prepare {
	padding: 28px 26px 26px;
	border: 1px solid #c8d2c3;
	border-radius: 14px;
	background: rgba(255, 255, 252, 0.8);
}
.kf-trial-basic__prepare-label { margin-bottom: 7px; color: var(--ink-soft); }
.kf-trial-basic__prepare h3 { margin-bottom: 20px; font-size: var(--fs-19); font-weight: 500; letter-spacing: 0.05em; }
.kf-trial-basic__prepare li { position: relative; padding: 0 0 17px 24px; }
.kf-trial-basic__prepare li::before {
	content: "";
	position: absolute;
	top: 0.48em;
	left: 1px;
	width: 8px;
	height: 8px;
	border: 2px solid #6e876f;
	border-radius: 50%;
}
.kf-trial-basic__prepare :is(strong, span) { display: block; color: var(--ink-soft); }
.kf-trial-basic__prepare strong { margin-bottom: 3px; font-size: var(--fs-14); }
.kf-trial-basic__prepare span { font-size: var(--fs-12); line-height: 1.65; }
.kf-trial-basic__prepare > p:last-child {
	margin-top: 3px;
	padding-top: 15px;
	border-top: 1px solid #d9dfd5;
	font-size: var(--fs-12);
	line-height: 1.7;
	color: var(--ink-soft);
}


/* 8. 三つの安心 ---------------------------------------------- */

/* 間の 1px に地の色を見せて、仕切りの線にする */
.kf-trial-basic__reassurance-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid #c2d0bf;
	border-radius: 14px;
	background: #c2d0bf;
}
.kf-trial-basic__reassurance-grid article { padding: 32px 26px 30px; background: rgba(255, 254, 250, 0.9); text-align: center; }
.kf-trial-basic__reassurance-grid article > :where(.kf-inline) > span {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 17px;
	border: 1px solid #9bae99;
	border-radius: 50%;
	color: var(--ink-soft);
}
.kf-trial-basic__reassurance-grid h3,
.kf-trial-basic__flow h3 { font-size: var(--fs-16); font-weight: 500; line-height: 1.6; letter-spacing: 0.035em; }
.kf-trial-basic__reassurance-grid h3 { margin-bottom: 11px; }
.kf-trial-basic__reassurance-grid p { font-size: var(--fs-12); line-height: 1.8; color: var(--ink-soft); }


/* 9. 申込みの流れ -------------------------------------------- */

.kf-trial-basic__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kf-trial-basic__flow li {
	position: relative;
	min-width: 0;
	padding: 29px 24px 27px;
	border: 1px solid var(--trial-line);
	border-radius: 12px;
	background: var(--trial-card);
}
/* 箱と箱の間の「→」 */
.kf-trial-basic__flow li:not(:last-child)::after {
	content: "→";
	position: absolute;
	z-index: 1;
	top: 50%;
	right: -17px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--trial-line);
	border-radius: 50%;
	background: var(--trial-surface);
	font-size: var(--fs-12);
	color: var(--bronze);
	transform: translateY(-50%);
}
.kf-trial-basic__flow-number {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 25px;
	border-radius: 50%;
	background: var(--trial-green);
	font-family: Georgia, serif;
	font-size: var(--fs-12);
	color: var(--white);
}
.kf-trial-basic__flow li p { margin-bottom: 6px; font-size: var(--fs-12); letter-spacing: 0.17em; color: var(--bronze); }
.kf-trial-basic__flow h3 { margin-bottom: 12px; }
.kf-trial-basic__flow li div > :where(.kf-inline) > span { font-size: var(--fs-12); line-height: 1.8; color: var(--ink-soft); }

.kf-trial-basic__flow-action { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 30px; }
.kf-trial-basic__flow-action > :where(.kf-inline) > span { font-size: var(--fs-12); color: var(--ink-soft); }


/* 10. よくある質問 ------------------------------------------- */

.kf-trial-basic__faq { display: grid; gap: 10px; }
.kf-trial-basic__faq details { overflow: clip; border: 1px solid #cdbf9f; border-radius: 10px; background: var(--trial-surface); }
.kf-trial-basic__faq summary {
	position: relative;
	min-height: 68px;
	padding: 20px 62px 18px;
	font-size: var(--fs-16);
	font-weight: 500;
	line-height: 1.75;
	list-style: none;
	cursor: pointer;
}
.kf-trial-basic__faq summary::-webkit-details-marker { display: none; }
.kf-trial-basic__faq details[open] summary { background: #f5efe3; }

/* Q と A の丸 */
.kf-trial-basic__faq summary::before,
.kf-trial-basic__faq details p::before {
	position: absolute;
	left: 17px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: var(--fs-12);
}
.kf-trial-basic__faq summary::before { content: "Q"; top: 17px; border: 1px solid #c99591; background: #fbefed; color: #a45f5a; }
.kf-trial-basic__faq details p::before { content: "A"; top: 18px; border: 1px solid #91a78f; background: #dfe9dc; color: var(--ink); }

/* 開く・閉じるの印 */
.kf-trial-basic__faq summary::after {
	content: "+";
	position: absolute;
	top: 22px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid #9f875b;
	border-radius: 50%;
	font-size: var(--fs-16);
	color: var(--bronze);
}
.kf-trial-basic__faq details[open] summary::after { content: "−"; }

.kf-trial-basic__faq details p {
	position: relative;
	padding: 20px 30px 24px 62px;
	border-top: 1px solid #d5c9ae;
	font-size: var(--fs-14);
	line-height: 1.9;
	color: var(--ink-soft);
}
.kf-trial-basic__all-faq { margin-top: 24px; text-align: right; }


/* 11. 最後の緑の箱 ------------------------------------------- */

.kf-trial-basic__final {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
	align-items: center;
	min-height: 410px;
	margin-top: 34px;
	padding: 68px 64px;
	overflow: hidden;
	border: 1px solid #6f846f;
	border-radius: 18px;
	background: linear-gradient(125deg, #405b47 0%, #526b55 64%, #779078 100%);
	box-shadow: 0 18px 48px rgba(42, 58, 44, 0.18);
	color: var(--white);
}
/* 右の二つの輪 */
.kf-trial-basic__final::before,
.kf-trial-basic__final::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
}
.kf-trial-basic__final::before { top: -135px; right: -100px; width: 380px; height: 380px; }
.kf-trial-basic__final::after { right: 40px; bottom: -160px; width: 330px; height: 330px; }

.kf-trial-basic__final-copy { position: relative; z-index: 1; max-width: 600px; }
.kf-trial-basic__final .kf-trial-basic__eyebrow { color: #e1cf9d; }
.kf-trial-basic__final h2 { margin-bottom: 17px; font-size: var(--fs-36); font-weight: 400; line-height: 1.65; letter-spacing: 0.055em; }
.kf-trial-basic__final-copy > p:not(.kf-trial-basic__eyebrow) {
	max-width: 520px;
	margin-bottom: 27px;
	font-size: var(--fs-14);
	line-height: 1.95;
	color: rgba(255, 255, 255, 0.82);
}
.kf-trial-basic__final ul { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 22px; font-size: var(--fs-12); color: rgba(255, 255, 255, 0.82); }
.kf-trial-basic__final li::before { content: "✓"; margin-right: 7px; color: #d9cb9e; }
.kf-trial-basic__final > :where(.kf-inline) > img {
	position: relative;
	z-index: 1;
	width: 225px;
	margin: auto auto -69px;
	filter: drop-shadow(0 13px 14px rgba(26, 39, 28, 0.18));
	transform: translateY(-16px);
}


/* 幅 1000px 以下 --------------------------------------------- */

@media (max-width: 1000px) {
	.kf-trial-basic__opening { grid-template-columns: minmax(0, 1fr) 250px; }
	.kf-trial-basic__opening-copy,
	.kf-trial-basic__section { padding-inline: 42px; }
	.kf-trial-basic__class-content { padding-inline: 24px; }

	/* 持ちものは進み方の下に、二列で */
	.kf-trial-basic__day-layout { grid-template-columns: 1fr; }
	.kf-trial-basic__prepare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
	.kf-trial-basic__prepare-label,
	.kf-trial-basic__prepare h3 { grid-column: 1 / -1; }
	.kf-trial-basic__prepare > p:last-child { align-self: end; }
}


/* 幅 782px 以下（スマホ） ------------------------------------ */

@media (max-width: 782px) {
	.kf-trial-basic { --trial-box: calc(100% - 28px); }

	/* 写真の帯：左右の端に同じ写真を薄く重ねる */
	.kf-trial-basic__hero { min-height: 205px; }
	.kf-trial-basic__hero::before,
	.kf-trial-basic__hero::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 44%;
		background: inherit;
		background-color: transparent;
		background-position: left center;
		background-size: auto 100%;
		mask-image: radial-gradient(ellipse 100% 50% at left center, #000 45%, transparent 100%);
		opacity: 0.65;
		pointer-events: none;
	}
	.kf-trial-basic__hero::after {
		inset: 0 0 0 auto;
		background-position: right center;
		mask-image: radial-gradient(ellipse 100% 50% at right center, #000 45%, transparent 100%);
	}
	.kf-trial-basic__hero-heading { width: calc(100% - 44px); }
	.kf-trial-basic__hero-title { font-size: var(--fs-28); letter-spacing: 0.08em; }
	.kf-trial-basic__hero-lead { margin-top: 11px; letter-spacing: 0.08em; }

	/* ページ内の案内は二列 */
	.kf-trial-basic__jump { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
	.kf-trial-basic__jump a { min-height: 54px; border-top: 1px solid var(--trial-line); font-size: var(--fs-12); }
	.kf-trial-basic__jump a:nth-child(-n + 2) { border-top: 0; }
	.kf-trial-basic__jump a:nth-child(odd) { border-left: 0; }

	/* 最初の箱は縦に */
	.kf-trial-basic__opening { grid-template: "copy" "guide" "facts" / 1fr; margin-top: 14px; border-radius: 14px; }
	.kf-trial-basic__opening-copy { padding: 38px 25px 30px; }
	.kf-trial-basic__opening .kf-contact-button { margin-inline: auto; } /* スマホはお問い合わせのボタンを真ん中に */
	.kf-trial-basic__opening-title { font-size: var(--fs-23); line-height: 1.7; letter-spacing: 0.025em; }
	.kf-trial-basic__lead { font-size: var(--fs-14); line-height: 1.95; }
	.kf-trial-basic__response { text-align: center; }
	.kf-trial-basic__opening-guide {
		grid-template: 1fr / minmax(0, 1fr) 104px;
		align-items: center;
		gap: 16px;
		min-height: 164px;
		padding: 22px 24px 0;
	}
	.kf-trial-basic__opening-guide img { grid-area: 1 / 2; width: 100px; margin: auto 0 0; }
	.kf-trial-basic__opening-guide div { grid-area: 1 / 1; padding: 0; }
	.kf-trial-basic__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kf-trial-basic__facts > div { padding: 16px 8px 18px; border-top: 1px solid var(--trial-line); }
	.kf-trial-basic__facts > div:nth-child(odd) { border-left: 0; }
	.kf-trial-basic__facts dd { font-size: var(--fs-14); }

	/* 場面の箱と見出し */
	.kf-trial-basic__section { margin-top: 22px; padding: 48px 24px; border-radius: 14px; scroll-margin-top: 18px; }
	.kf-trial-basic__section-head { margin-bottom: 28px; }
	.kf-trial-basic__section-head h2 { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; font-size: var(--fs-23); line-height: 1.65; }
	.kf-trial-basic__section-head h2::before { width: 42px; height: 42px; }
	.kf-trial-basic__policy-note { text-align: left; }

	/* クラスを選ぶ */
	.kf-trial-basic__class-grid { grid-template-columns: 1fr; }
	.kf-trial-basic__class-content { padding: 25px 22px 28px; }
	.kf-trial-basic__class-content > p { min-height: 0; }
	.kf-trial-basic__choice-help { grid-template-columns: 1fr; gap: 11px; padding: 20px; }
	.kf-trial-basic__choice-help > :where(.kf-inline) > span { width: max-content; }

	/* 当日の進み方 */
	.kf-trial-basic__day-layout { gap: 30px; }
	.kf-trial-basic__day-steps li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
	.kf-trial-basic__day-steps li > :where(.kf-inline) > span { width: 38px; height: 38px; }
	.kf-trial-basic__day-steps li:not(:last-child)::before { top: 40px; left: 18px; }
	.kf-trial-basic__day-steps h3 { font-size: 17px; }
	.kf-trial-basic__prepare { display: block; padding: 26px 22px 23px; }

	/* 三つの安心、申込みの流れは縦に */
	.kf-trial-basic__reassurance-grid { grid-template-columns: 1fr; }
	.kf-trial-basic__reassurance-grid article { padding: 25px 22px; }
	.kf-trial-basic__flow { grid-template-columns: 1fr; gap: 14px; }
	.kf-trial-basic__flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 23px 20px; }
	.kf-trial-basic__flow li:not(:last-child)::after { top: auto; right: auto; bottom: -16px; left: 24px; transform: rotate(90deg); }
	.kf-trial-basic__flow-number { margin-bottom: 0; }

	/* よくある質問 */
	.kf-trial-basic__faq summary { padding: 19px 48px 17px 52px; font-size: var(--fs-14); }
	.kf-trial-basic__faq summary::before,
	.kf-trial-basic__faq details p::before { left: 13px; width: 28px; height: 28px; }
	.kf-trial-basic__faq summary::before { top: 18px; }
	.kf-trial-basic__faq summary::after { right: 13px; }
	.kf-trial-basic__faq details p { padding: 18px 18px 21px 52px; font-size: var(--fs-12); }
	.kf-trial-basic__all-faq { text-align: left; }

	/* 最後の緑の箱 */
	.kf-trial-basic__final { grid-template-columns: 1fr; min-height: 0; margin-top: 22px; padding: 48px 24px 0; border-radius: 14px; }
	.kf-trial-basic__final h2 { font-size: var(--fs-28); }
	.kf-trial-basic__final > :where(.kf-inline) > img { width: 145px; margin: 25px auto -6px; transform: translateY(-10px); }
	.kf-trial-basic__final ul { display: grid; gap: 7px; }
	.kf-trial-basic__final .kf-contact-button { margin-inline: auto; } /* スマホはお問い合わせのボタンを真ん中に（下のルールーと同じ線） */
}

@media (prefers-reduced-motion: reduce) {
	.kf-trial-basic :where(a),
	.kf-trial-basic__class-photo img { transition: none; }
}