@charset "UTF-8";
/* ==========================================================================
   コンテンツページ用スタイル
   gkm-school.net のトップページに合わせた「下層ページ」の見た目を定義する。
   元のstyle.min.cssはトップ専用（p-front-*）で本文用の定義を持たないため、
   本文・見出し・カード・お客様の声などをここで新規に用意している。
   触るときは 03_手引き/更新マニュアル.md を先に読むこと。
   ========================================================================== */

:root {
	--color-text: #4f4241;      /* 本文（やわらかい茶色。真っ黒にしない） */
	--color-heading: #091c27;   /* 見出し */
	--color-accent: #44a368;    /* アクセント（緑） */
	--color-accent-warm: #dd685f; /* 差し色（朱） */
	--color-brown: #b58865;
	--color-cream: #fbf6e9;     /* 背景のクリーム */
	--color-cream-deep: #f5ecd8;
	--color-white: #fff;
	--color-line: #e6dcc6;

	--font-jp: "Zen Maru Gothic", serif;
	--font-en: "Amatic SC", serif;
	--font-num: Outfit, serif;

	--wrap: 104rem;      /* ページ全体の外枠（写真やカードはここまで使ってよい） */
	--wrap-narrow: 78rem;

	/* 文章1行の最大幅。
	   実測で1行62文字あり「横に長すぎる」状態だった（田中指摘 2026-07-27）。
	   日本語は35〜45文字が読みやすいので、42文字相当に絞る。
	   ルート9.6px・本文15.4px換算で 66rem ≒ 42文字。 */
	--measure: 66rem;
}

/* --- 本文の土台 ------------------------------------------------------- */
.l-page {
	background: var(--color-cream);
	padding-bottom: 12rem;
}

.l-page__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 2.4rem;
}

.c-body {
	font-family: var(--font-jp);
	color: var(--color-text);
	font-size: 1.6rem;
	line-height: 2.1;
	letter-spacing: .04em;
}

/* --- 余白の設計 ---------------------------------------------------------
   文章どうしは詰め、写真の前後は大きく空ける。
   同じ間隔で全部並べると、文章と写真がくっついて息が詰まる。
   （実測で写真の上下が0pxだった。figure の margin:0 に打ち消されていた） */
/* figure の既定余白を先に消す。これは必ずこの位置（下の間隔指定より前）に置く。 */
.c-body figure { margin: 0; }

/* 余白の指定そのものは、このファイル下部の「余白の設計（正本）」に一本化してある。
   ここに同じ指定を置くと二重管理になり、どちらが効いているか分からなくなる
   （実際に重複していて、前半が完全な死にコードになっていた。2026-07-29 発見）。
   余白を変えるときは下部のブロックだけを直すこと。 */

/* 文章は狭く、写真・カードは広く。
   全部が同じ幅で並ぶと「のっぺり」した印象になるため、
   読むもの（文章）と見るもの（写真）で幅を変えてリズムを作る。 */
.c-body > p,
.c-body > h2,
.c-body > h3,
.c-body > h4,
.c-body > ul,
.c-body > ol,
.c-body > blockquote,
.c-body > .c-note,
.c-body > .c-voice {
	max-width: var(--measure);
	margin-inline: auto;
}

/* 見るものは外枠いっぱいまで使ってよい */
.c-body > figure,
.c-body > .c-media,
.c-body > .c-gallery,
.c-body > .c-cards,
.c-body > .c-columns,
.c-body > .c-embed {
	max-width: 100%;
}

/* 単独の写真は文章より少しだけ広く見せて、変化をつける */
.c-body > figure,
.c-body > p > img {
	margin-block: 4.8rem;
}

.c-body p { text-wrap: pretty; }

.c-body strong {
	font-weight: 700;
	color: var(--color-heading);
	background: linear-gradient(transparent 62%, #fdf0b5 62%);
}

.c-body a {
	color: var(--color-accent);
	text-underline-offset: .4em;
	text-decoration-thickness: .1em;
	transition: opacity .2s;
}
.c-body a:hover { opacity: .65; }

/* --- 見出し ----------------------------------------------------------- */
.c-body h2 {
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: 700;
	color: var(--color-heading);
	margin-top: 8rem;
	padding-bottom: 1.6rem;
	position: relative;
	text-align: center;
}
/* 見出し下の細い下線（アクセント色）。装飾は控えめにして本文の邪魔をしない */
.c-body h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 0;
	width: 6rem;
	height: .3rem;
	border-radius: 100vmax;
	background: var(--color-accent);
	opacity: .85;
}

.c-body h3 {
	font-size: 2.2rem;
	line-height: 1.6;
	font-weight: 700;
	color: var(--color-heading);
	margin-top: 5.6rem;
}

.c-body h4 {
	font-size: 1.8rem;
	line-height: 1.7;
	font-weight: 700;
	color: var(--color-accent);
	margin-top: 4rem;
}

/* --- リスト ----------------------------------------------------------- */
.c-body ul, .c-body ol { padding-left: 1.6rem; }
.c-body li + li { margin-top: .8rem; }
.c-body ul > li { list-style: none; position: relative; padding-left: 1.8rem; }
.c-body ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: .85em;
	width: .8rem; height: .8rem;
	border-radius: 50%;
	background: var(--color-accent);
}
.c-body ol > li { list-style: decimal; }

/* --- 画像 ------------------------------------------------------------- */
.c-body img {
	max-width: 100%;
	height: auto;
	border-radius: 1.6rem;
	display: block;
}
/* figure の margin リセットは「余白の設計」ブロックの前（上方）にある。
   ここに書くと同じ強さで後勝ちになり、写真の前後の余白を打ち消してしまう
   （実際に全部0pxになる事故が起きた）。この位置には置かないこと。 */

/* --- 画像＋テキストの横並び（旧 wp-block-media-text） ------------------ */
.c-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	background: var(--color-white);
	border-radius: 2.4rem;
	padding: 3.2rem;
	margin-top: 4rem;
}
.c-media__img img { border-radius: 1.6rem; }
.c-media__body > :first-child { margin-top: 0; }

/* --- ギャラリー（旧 wp-block-gallery） --------------------------------- */
.c-gallery {
	display: grid;
	/* 1枚あたりが小さいと写真の中身が見えない（実測189pxで5枚並びだった）。
	   3枚並びを基本にして、写真として成立する大きさを確保する。 */
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: 1.6rem;
	margin-top: 4rem;
}
.c-gallery figure { margin: 0; }

/* --- 段組み（旧 wp-block-columns） ------------------------------------- */
.c-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	gap: 3.2rem;
	margin-top: 4rem;
}
.c-columns__item > :first-child { margin-top: 0; }

/* --- お客様の声 -------------------------------------------------------- */
.c-voice {
	background: var(--color-white);
	border-radius: 2.4rem;
	padding: 3.2rem;
	position: relative;
	margin-top: 3.2rem;
}
.c-voice::before {
	content: "";
	position: absolute;
	top: 2rem; left: 2.4rem;
	width: 3.2rem; height: 3.2rem;
	background: var(--color-cream-deep);
	border-radius: 50%;
	z-index: 0;
}
.c-voice > * { position: relative; z-index: 1; }
.c-voice__name {
	font-size: 1.4rem;
	color: var(--color-brown);
	text-align: right;
}

/* --- ページ見出し（各ページの先頭） ------------------------------------
   見出しそのものは style.min.css の .c-heading-primary をそのまま使う
   （英字の波打つアニメーションを含めてトップと同じ挙動になる）。
   ここでは、その周りの余白と背景だけを足す。
   トップの各セクションが padding:10rem 0 なので、それに合わせる。 */
.c-pagehead {
	background: var(--color-cream);
	padding: 14rem 2.4rem 4rem;
}
.c-pagehead .c-heading-primary > span {
	color: var(--color-accent);
}

/* --- パンくず ---------------------------------------------------------- */
.c-breadcrumb {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 2.4rem;
	font-size: 1.3rem;
	font-family: var(--font-jp);
	color: var(--color-brown);
}
.c-breadcrumb a { color: var(--color-brown); }
.c-breadcrumb li { display: inline; }
.c-breadcrumb li + li::before { content: " › "; opacity: .6; }
.c-breadcrumb ul { list-style: none; padding: 0; margin: 0; }

/* --- CTA ボタン -------------------------------------------------------- */
.c-cta {
	text-align: center;
	margin-top: 6.4rem;
}
.c-cta__btn {
	display: inline-block;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--color-white) !important;
	background: var(--color-accent);
	border-radius: 100vmax;
	padding: 1.8rem 5.6rem;
	text-decoration: none;
	box-shadow: 0 .6rem 0 #35855322;
	transition: translate .15s, box-shadow .15s;
}
.c-cta__btn:hover {
	translate: 0 .3rem;
	box-shadow: 0 .3rem 0 #35855322;
	opacity: 1 !important;
}

/* --- お知らせ一覧 ------------------------------------------------------ */
.c-newslist { list-style: none; padding: 0; }
.c-newslist li { border-bottom: .1rem dashed var(--color-line); }
.c-newslist li::before { display: none; }
.c-newslist a {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 1.6rem;
	padding: 2rem .8rem;
	text-decoration: none;
	color: var(--color-text);
	align-items: baseline;
}
.c-newslist a:hover { background: #ffffff80; }
.c-newslist__date {
	font-family: var(--font-num);
	font-size: 1.4rem;
	color: var(--color-brown);
}

/* --- 下層ページのカード一覧（コース等） --------------------------------- */
.c-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: 3.2rem;
	margin-top: 4rem;
	list-style: none;
	padding: 0;
}
.c-cards li::before { display: none; }
.c-cards li { padding-left: 0; }
.c-cards a { text-decoration: none; color: inherit; display: block; text-align: center; }
/* 画像の縦横比がバラついても行が揃うよう、正方形の枠に収める */
.c-cards img {
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	transition: scale .3s;
}
.c-cards a:hover img { scale: 1.04; }
.c-cards__ja { font-weight: 700; margin-top: 1.6rem; display: block; color: var(--color-heading); }
.c-cards__en { font-family: var(--font-en); font-size: 2rem; color: var(--color-brown); display: block; }

/* --- 埋め込み（Googleカレンダー等） ------------------------------------ */
.c-embed {
	position: relative;
	margin-top: 4rem;
	border-radius: 1.6rem;
	overflow: hidden;
	background: var(--color-white);
}
.c-embed iframe { display: block; width: 100%; border: 0; min-height: 60rem; }

/* --- 色付きセクション（トップの作法をそのまま持ち込む） ------------------
   トップは背景色が変わる境目に必ず手描きの波形を :before で重ねている。
   下層でも同じ作法にしないと切り替わりが硬くなるので、部品にしておく。
   高さが vw なのは画面幅が変わっても波の形を崩さないため（固定pxにしない）。

   使い方:
     <section class="c-section c-section--green">
       <div class="c-section__inner"> ... </div>
     </section>
   ------------------------------------------------------------------------ */
.c-section {
	position: relative;
	padding: 14rem 0;
}
.c-section__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 2.4rem;
}

.c-section--green { background: var(--color-accent); color: var(--color-white); }
.c-section--brown { background: var(--color-brown); color: var(--color-white); }
.c-section--cream { background: var(--color-cream-deep); }

/* 色付きセクションの上端に波形を乗せる（トップと同じ画像を使い回す） */
.c-section--green::before,
.c-section--brown::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2.6666666667vw;
	background-position: center;
	background-size: cover;
}
.c-section--green::before { background-image: url(../img/bg-wave01.webp); }
.c-section--brown::before { background-image: url(../img/bg-wave02.webp); }

/* 色付きの上では、白抜き文字が読めるように見出しと本文の色を反転する */
.c-section--green .c-body,
.c-section--brown .c-body { color: var(--color-white); }
.c-section--green .c-body h2,
.c-section--brown .c-body h2,
.c-section--green .c-body h3,
.c-section--brown .c-body h3 { color: var(--color-white); }
.c-section--green .c-body h4,
.c-section--brown .c-body h4 { color: #fdf0b5; }
.c-section--green .c-body h2::after,
.c-section--brown .c-body h2::after { background: var(--color-white); }
.c-section--green .c-body a,
.c-section--brown .c-body a { color: #fdf0b5; }
.c-section--green .c-body strong,
.c-section--brown .c-body strong {
	color: var(--color-white);
	background: none;
	border-bottom: .2rem solid #fdf0b5;
}

/* --- 本文の中から全幅に飛び出す（色付きセクション用） --------------------
   .c-body は読みやすさのため幅を絞っているが、色付きの帯だけは画面いっぱいに
   広げないとトップページと同じ見え方にならない。左右へはみ出させる。 */
.c-body > .c-section {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	margin-block: 10rem 0;
}
.c-body > .c-section .c-body { max-width: none; }
.c-body > .c-section .c-body > * { max-width: var(--measure); margin-inline: auto; }

/* --- 冒頭の大きな画像 ---------------------------------------------------
   上余白を消すのは「ページの一番上にある」ときだけ。
   :first-child を付けないと、途中で c-hero を使ったページで
   前の段落とくっついて隙間0になる（実測9ページで発生。2026-07-29）。
   !important も使わない。効きすぎて打ち消せなくなるため。 */
.c-body > .c-hero:first-child { margin-top: 0; }
.c-hero img { border-radius: 2.4rem; }

/* --- 導入文（本文より少し大きく） --------------------------------------- */
.c-lead {
	font-size: 1.9rem;
	line-height: 1.9;
	font-weight: 500;
}

/* --- 手順・フェーズ ----------------------------------------------------- */
.c-steps {
	display: grid;
	gap: 2.4rem;
	margin-top: 4rem;
}
.c-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.4rem;
	align-items: start;
	background: var(--color-white);
	border-radius: 2.4rem;
	padding: 3.2rem;
}
.c-steps__num {
	font-family: var(--font-num);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
	background: var(--color-accent);
	border-radius: 50%;
	width: 5.6rem;
	height: 5.6rem;
	display: grid;
	place-items: center;
}
.c-steps__body > :first-child { margin-top: 0; }
.c-steps__body h3 { margin-top: 0; font-size: 2rem; }
.c-steps__meta {
	font-size: 1.4rem;
	color: var(--color-brown);
	margin-top: .4rem !important;
}

/* --- 講師の肩書き ------------------------------------------------------- */
.c-media__role {
	font-size: 1.4rem;
	color: var(--color-brown);
	margin-top: .8rem !important;
}

/* --- 色付きの上に置く白いボタン ----------------------------------------- */
.c-cta__btn--white {
	background: var(--color-white);
	color: var(--color-accent) !important;
	box-shadow: 0 .6rem 0 rgba(0, 0, 0, .12);
}

/* --- 注記 -------------------------------------------------------------- */
.c-note {
	background: #fff8e6;
	border-left: .4rem solid var(--color-accent-warm);
	border-radius: .8rem;
	padding: 2rem 2.4rem;
	font-size: 1.4rem;
}

/* --- タブレット以下 ----------------------------------------------------- */
@media screen and (max-width: 768px) {
	.c-body { font-size: 1.5rem; line-height: 2; }
	.c-body h2 { font-size: 2.2rem; margin-top: 6rem; }
	.c-body h3 { font-size: 1.9rem; }
	.c-body h4 { font-size: 1.7rem; }
	.c-media { grid-template-columns: 1fr; gap: 2.4rem; padding: 2.4rem; }
	.c-pagehead { padding: 10rem 2.4rem 4rem; }
	.c-pagehead__en { font-size: 4.4rem; }
	.c-pagehead__ja { font-size: 1.7rem; }
	.c-newslist a { grid-template-columns: 1fr; gap: .4rem; }
	.c-cta__btn { padding: 1.6rem 3.2rem; font-size: 1.5rem; }
	.c-embed iframe { min-height: 48rem; }
}

/* --- 認定講師一覧・絞り込み ------------------------------------------- */
.c-filter {
	display: grid;
	gap: 2.4rem;
	max-width: var(--measure);
	margin-inline: auto;
	padding: 2.4rem;
	background: var(--color-white);
	border: .1rem solid var(--color-line);
	border-radius: 2rem;
}
.c-filter__group {
	display: grid;
	gap: 1.2rem;
}
.c-filter__label {
	margin: 0;
	font-weight: 700;
	color: var(--color-heading);
}
.c-filter__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}
.c-filter__btn {
	min-height: 4.8rem;
	padding: .8rem 1.8rem;
	font: inherit;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	background: var(--color-cream-deep);
	border: .1rem solid var(--color-brown);
	border-radius: 100vmax;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.c-filter__btn:hover,
.c-filter__btn:focus-visible {
	background: var(--color-white);
}
.c-filter__btn.is-active {
	color: var(--color-white);
	background: var(--color-accent);
	border-color: var(--color-accent);
}
.c-filter__empty {
	font-weight: 700;
	text-align: center;
}
.c-filter__empty[hidden],
.c-instructors > li[hidden] { display: none; }

/* 余白の正本は変えず、この2部品の接続だけ検査基準の30px以上にする。 */
.c-body > .c-filter + .c-instructors { margin-top: 4.8rem; }

.c-instructors {
	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	gap: 3.2rem 2.4rem;
	max-width: 100% !important;
}
.c-instructors > li { margin-top: 0; }
.c-instructors a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: left;
	background: var(--color-white);
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 .2rem 1.2rem rgba(79, 66, 65, .07);
	transition: translate .2s, box-shadow .2s;
}
.c-instructors a:hover {
	translate: 0 -.4rem;
	box-shadow: 0 .8rem 2rem rgba(79, 66, 65, .14);
	opacity: 1;
}
.c-instructors__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	background: var(--color-cream-deep);
	overflow: hidden;
}
.c-instructors .c-instructors__thumb img {
	width: 68%;
	height: 68%;
	object-fit: contain;
	border-radius: 0;
}
.c-instructors__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .8rem;
	padding: 2rem 2.4rem 2.4rem;
}
.c-instructors__name {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-heading);
}
.c-instructors__rank {
	font-size: 1.3rem;
	color: var(--color-brown);
}
.c-instructors__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: auto 0 0;
	padding: 1.2rem 0 0;
	list-style: none;
}
.c-instructors__badges li {
	margin: 0;
	padding: .4rem 1rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-cream-deep);
	border-radius: 100vmax;
}
.c-instructors__badges li::before { display: none; }
.c-instructors__badges .is-hahaoya {
	color: var(--color-white);
	background: var(--color-accent);
}

/* --- 認定講師詳細 ----------------------------------------------------- */
.c-instructor-profile__img {
	display: grid;
	place-items: center;
	min-height: 28rem;
	background: var(--color-cream-deep);
	border-radius: 1.6rem;
	overflow: hidden;
}
.c-instructor-profile__img img {
	width: 72%;
	height: 72%;
	object-fit: contain;
}
.c-instructor-profile h2 {
	margin: 0;
	padding: 0;
	font-size: 2.6rem;
	text-align: left;
}
.c-instructor-profile h2::after { display: none; }
.c-instructor-profile .c-instructors__badges { justify-content: flex-start; }
.c-instructor-qualifications { max-width: var(--measure); }
.c-instructor-facts {
	display: grid;
	gap: 1.6rem;
	max-width: var(--measure);
	margin-inline: auto;
	padding: 2.4rem;
	background: var(--color-white);
	border-radius: 1.6rem;
}
.c-instructor-facts div {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 1.6rem;
}
.c-instructor-facts div + div {
	padding-top: 1.6rem;
	border-top: .1rem solid var(--color-line);
}
.c-instructor-facts dt {
	font-weight: 700;
	color: var(--color-heading);
}
.c-instructor-facts dd { margin: 0; }

/* --- 横長の日程表 ----------------------------------------------------- */
.c-table-scroll {
	max-width: var(--wrap);
	margin-inline: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--color-white);
	border: .1rem solid var(--color-line);
	border-radius: 1.6rem;
}
.c-table-scroll table {
	width: 100%;
	min-width: 76rem;
	border-collapse: collapse;
}
.c-table-scroll th,
.c-table-scroll td {
	padding: 1.2rem 1.6rem;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	border-bottom: .1rem solid var(--color-line);
}
.c-table-scroll th {
	font-weight: 700;
	color: var(--color-heading);
	background: var(--color-cream-deep);
}
.c-table-scroll th:first-child,
.c-table-scroll td:first-child {
	min-width: 32rem;
	white-space: normal;
}
.c-table-scroll tbody tr:last-child td { border-bottom: 0; }

@media screen and (max-width: 768px) {
	.c-filter { padding: 2rem; }
	.c-filter__btn { flex: 1 1 auto; }
	.c-body > .c-filter + .c-instructors { margin-top: 3.2rem; }
	.c-instructors { grid-template-columns: 1fr; gap: 2.4rem; }
	.c-instructor-facts div { grid-template-columns: 1fr; gap: .4rem; }
}

/* ==========================================================================
   余白の正本（ここが最後・これより下に margin を書かない）

   なぜ末尾に集約するか:
   このファイルの途中で余白を指定すると、後続の別ルールに静かに打ち消される。
   実際に「写真の前後が全部0px」という事故を2回起こしている（2026-07-27）。
   余白だけはここ1か所にまとめ、順序事故を構造的に起こせなくする。
   検査は `python3 余白チェック.py` で機械的に行う。
   ========================================================================== */

.c-body > * + *            { margin-top: 3.2rem; }

/* 写真・カード・段組みの前後は大きく空ける（文章とくっつけない） */
.c-body > * + figure,
.c-body > * + .c-media,
.c-body > * + .c-gallery,
.c-body > * + .c-columns,
.c-body > * + .c-steps,
.c-body > * + .c-embed,
.c-body > figure + *,
.c-body > .c-media + *,
.c-body > .c-gallery + *,
.c-body > .c-columns + *,
.c-body > .c-steps + *,
.c-body > .c-embed + *     { margin-top: 8rem; }

/* 見出しは前を大きく空け、直後は詰めてひと塊に見せる */
.c-body > * + h2           { margin-top: 11.2rem; }
.c-body > * + h3           { margin-top: 7.2rem; }
.c-body > h2 + *,
.c-body > h3 + *,
.c-body > h4 + *           { margin-top: 3.2rem; }

/* 見出しの直後が写真・カードのときも「見出しとひと塊」を優先する。
   上の `* + .c-media` 等は詳細度(0,2,1)で `h2 + *`(0,1,1)に勝ってしまうため、
   同じ詳細度で明示的に打ち消す必要がある。
   これが無いと、見出しと図版の間が 8rem(77px) 空いて間延びする
   （Codex検査で library.html の「書籍」見出しが不合格 2026-07-29）。 */
.c-body > h2 + figure, .c-body > h3 + figure, .c-body > h4 + figure,
.c-body > h2 + .c-media, .c-body > h3 + .c-media, .c-body > h4 + .c-media,
.c-body > h2 + .c-gallery, .c-body > h3 + .c-gallery, .c-body > h4 + .c-gallery,
.c-body > h2 + .c-columns, .c-body > h3 + .c-columns, .c-body > h4 + .c-columns,
.c-body > h2 + .c-steps, .c-body > h3 + .c-steps, .c-body > h4 + .c-steps,
.c-body > h2 + .c-cards, .c-body > h3 + .c-cards, .c-body > h4 + .c-cards,
.c-body > h2 + .c-newscards, .c-body > h3 + .c-newscards,
.c-body > h2 + .c-embed, .c-body > h3 + .c-embed, .c-body > h4 + .c-embed
                           { margin-top: 3.2rem; }

/* お客様の声が連続するときだけ詰める */
.c-body > .c-voice + .c-voice { margin-top: 1.6rem; }

/* 最初の要素には上余白を付けない */
.c-body > :first-child     { margin-top: 0; }

@media screen and (max-width: 768px) {
	.c-body > * + *          { margin-top: 2.8rem; }
	.c-body > * + figure,
	.c-body > * + .c-media,
	.c-body > * + .c-gallery,
	.c-body > * + .c-columns,
	.c-body > * + .c-steps,
	.c-body > figure + *,
	.c-body > .c-media + *,
	.c-body > .c-gallery + *,
	.c-body > .c-columns + *,
	.c-body > .c-steps + *   { margin-top: 5.6rem; }
	.c-body > * + h2         { margin-top: 8rem; }
	.c-body > * + h3         { margin-top: 5.6rem; }

	/* PC側と同じ理由で、見出し直後の図版はここでも打ち消す（実測54px→28px） */
	.c-body > h2 + figure, .c-body > h3 + figure, .c-body > h4 + figure,
	.c-body > h2 + .c-media, .c-body > h3 + .c-media, .c-body > h4 + .c-media,
	.c-body > h2 + .c-gallery, .c-body > h3 + .c-gallery, .c-body > h4 + .c-gallery,
	.c-body > h2 + .c-columns, .c-body > h3 + .c-columns, .c-body > h4 + .c-columns,
	.c-body > h2 + .c-steps, .c-body > h3 + .c-steps, .c-body > h4 + .c-steps,
	.c-body > h2 + .c-cards, .c-body > h3 + .c-cards, .c-body > h4 + .c-cards,
	.c-body > h2 + .c-newscards, .c-body > h3 + .c-newscards,
	.c-body > h2 + .c-embed, .c-body > h3 + .c-embed, .c-body > h4 + .c-embed
	                         { margin-top: 2.8rem; }
}

/* --------------------------------------------------------------------------
   単独写真のサイズ上限（パソコンで写真が画面を占領するのを防ぐ）

   旧サイトの画像は 1024x577 や 774x764 と大きく、本文幅いっぱいに広げると
   パソコンでは1枚で画面がほぼ埋まる（田中指摘 2026-07-27）。
   LPのように「キュッと」見せるため、幅と高さの両方に上限を置く。
   スマホは元から画面幅いっぱいでよいので、上限は解除する。
   -------------------------------------------------------------------------- */
.c-body > figure:not(.c-gallery):not(.c-hero) {
	max-width: 68rem;
	margin-inline: auto;
}

.c-body > figure:not(.c-gallery) img {
	/* 画面の高さを超えて主張しない。縦長の図版が巨大化するのを止める */
	max-height: 58vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* 冒頭のヒーロー画像だけは大きく見せてよい（ページの顔） */
.c-body > figure.c-hero { max-width: 100%; }
.c-body > figure.c-hero img { max-height: 46vh; }

/* 写真の説明文（キャプション） */
.c-body figcaption {
	font-size: 1.3rem;
	line-height: 1.8;
	color: var(--color-brown);
	text-align: center;
	margin-top: 1.2rem;
	letter-spacing: .02em;
}

/* ギャラリー内の写真は枠に合わせて切り抜き、行を揃える */
.c-gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	max-height: none;
}

@media screen and (max-width: 768px) {
	/* スマホは画面が狭いので上限を外す（小さくしすぎると見えない） */
	.c-body > figure:not(.c-gallery):not(.c-hero) { max-width: 100%; }
	.c-body > figure:not(.c-gallery) img { max-height: none; width: 100%; }
	.c-body > figure.c-hero img { max-height: none; }
}

/* --------------------------------------------------------------------------
   フッターのロゴの見え方を整える

   ロゴ画像 img-logo01.webp は透過を持たない不透明画像（VP8X / alpha なし）で、
   白い背景が焼き込まれている。これを濃いグレー #323232 のフッターに直接置くと
   「白い長方形を貼っただけ」に見える（田中指摘 2026-07-27「浮いている」）。

   透過素材が無いので、白い部分を「意図した台紙」として見せる方向で整える。
   角丸・余白・影を与え、サイズを落として落ち着かせる。
   透過PNGを先方からもらえたら、この台紙は不要になる。
   -------------------------------------------------------------------------- */
.l-footer__company p a {
	display: inline-block;
	width: auto;
	max-width: 24rem;          /* 36rem は大きすぎた */
	background: var(--color-white);
	border-radius: 1.2rem;
	padding: 1.2rem 1.6rem;
	box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .28);
	transition: translate .2s, box-shadow .2s;
}
.l-footer__company p a:hover {
	translate: 0 -.2rem;
	box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .34);
}
.l-footer__company p a img {
	display: block;
	width: 100%;
	height: auto;
}

/* 見出しとロゴの間隔を整え、左右の柱と高さを揃える */
.l-footer__company {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	padding: 3.2rem 2.4rem;
}
.l-footer__company h3 {
	font-size: 1.5rem;
	letter-spacing: .08em;
	margin: 0;
	opacity: .85;
}

/* 左側の法人情報も中央の柱として整える */
.l-footer__inner { align-items: center; }

@media screen and (max-width: 768px) {
	/* 元の設計ではスマホで非表示だったが、スクールサイトへの導線は残したい */
	.l-footer__company {
		display: flex;
		padding: 2.4rem 2.4rem 3.2rem;
		border-top: 1px solid #707070;
	}
	.l-footer__company p a { max-width: 20rem; }
}

/* トップの各セクション末尾に置く「下層へ渡す」ボタン。
   セクションの色に埋もれないよう、緑背景の上では白抜きにする。 */
.c-cta--front { margin-top: 4.8rem; }
.p-front-skill .c-cta--front .c-cta__btn,
.p-front-movie .c-cta--front .c-cta__btn {
	background: var(--color-white);
	color: var(--color-accent) !important;
}

/* --------------------------------------------------------------------------
   活動報告のカード一覧

   旧サイトの一覧は日付＋タイトルのテキストだけで、写真が一切出ていなかった。
   開催報告は写真そのものが中身なので、サムネイルを出さないと何の記事か
   分からない（田中指摘 2026-07-29「一覧性・視認性が悪い」）。
   -------------------------------------------------------------------------- */
.c-newscards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
	gap: 3.2rem 2.4rem;
	list-style: none;
	padding: 0;
	margin-top: 4rem;
	max-width: 100% !important;
}
.c-newscards li { padding-left: 0; margin-top: 0; }
.c-newscards li::before { display: none; }

.c-newscards a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-white);
	border-radius: 2rem;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text);
	box-shadow: 0 .2rem 1.2rem rgba(79, 66, 65, .07);
	transition: translate .2s, box-shadow .2s;
}
.c-newscards a:hover {
	translate: 0 -.4rem;
	box-shadow: 0 .8rem 2rem rgba(79, 66, 65, .14);
	opacity: 1;
}

/* サムネイル。縦横比を固定して行を揃える */
.c-newscards__thumb {
	aspect-ratio: 16 / 10;
	background: var(--color-cream-deep);
	overflow: hidden;
}
.c-newscards__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
	max-height: none;
}
/* 写真が無い記事は、サイトのイラストで埋めて空白を作らない */
.c-newscards__thumb--none {
	display: grid;
	place-items: center;
	background: var(--color-cream-deep);
}
.c-newscards__thumb--none img {
	width: 40%;
	height: auto;
	object-fit: contain;
}

.c-newscards__body {
	padding: 2rem 2.4rem 2.4rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	flex: 1;
}
.c-newscards__date {
	font-family: var(--font-num);
	font-size: 1.3rem;
	color: var(--color-brown);
	letter-spacing: .04em;
}
.c-newscards__title {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-heading);
}

/* 一覧へ渡すボタンの位置 */
.c-newscards + .c-cta { margin-top: 4.8rem; }

@media screen and (max-width: 768px) {
	.c-newscards {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}
	.c-newscards__body { padding: 1.6rem 2rem 2rem; }
}

/* トップページに差し込む活動実績セクション。
   トップの他セクション（padding:10rem 0）とリズムを合わせる。 */
.p-front-news {
	background: var(--color-cream);
	padding: 10rem 0;
}
.p-front-news__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 2.4rem;
}
.p-front-news .c-heading-primary > span { color: var(--color-accent); }
.p-front-news .c-body { margin-top: 4.8rem; }

@media screen and (max-width: 768px) {
	.p-front-news { padding: 6rem 0; }
}

/* --------------------------------------------------------------------------
   受講生の声カード（サムネイル → 動画へ）

   田中指定 2026-07-29: ダイジェストを先頭に置き、
   個別の声はサムネイルを並べてクリックで動画へ飛ばす（田中祐一公式と同じ形）。
   -------------------------------------------------------------------------- */
.c-voicecards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
	gap: 3.2rem 2.4rem;
	list-style: none;
	padding: 0;
	max-width: 100% !important;
}
.c-voicecards li { padding-left: 0; margin-top: 0; }
.c-voicecards li::before { display: none; }

.c-voicecards a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-white);
	border-radius: 2rem;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text);
	box-shadow: 0 .2rem 1.2rem rgba(79, 66, 65, .07);
	transition: translate .2s, box-shadow .2s;
}
.c-voicecards a:hover {
	translate: 0 -.4rem;
	box-shadow: 0 .8rem 2rem rgba(79, 66, 65, .14);
	opacity: 1;
}

.c-voicecards__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-cream-deep);
	position: relative;
}
.c-voicecards__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
	max-height: none;
}
/* 動画であることが一目で分かるよう再生マークを重ねる */
.c-voicecards__thumb--video::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6.4rem;
	height: 4.4rem;
	background: rgba(0, 0, 0, .68);
	border-radius: 1.2rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.c-voicecards__thumb--video::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 1.8rem solid var(--color-white);
	border-top: 1.1rem solid transparent;
	border-bottom: 1.1rem solid transparent;
	translate: .3rem 0;
	z-index: 1;
}

.c-voicecards__body {
	padding: 2rem 2.4rem 2.4rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	flex: 1;
}
.c-voicecards__title {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-heading);
}
.c-voicecards__name {
	font-size: 1.3rem;
	color: var(--color-brown);
	margin-top: auto;
}

/* 動画の埋め込みは16:9で固定する（高さ指定だと端末で崩れる） */
.c-embed--video iframe {
	aspect-ratio: 16 / 9;
	min-height: 0;
	height: auto;
}

/* 声の箱の中に写真つきカードを入れたときの調整 */
.c-voice > h3:first-child { margin-top: 0; }
.c-voice .c-media {
	background: transparent;
	padding: 0;
	margin-top: 2.4rem;
}

@media screen and (max-width: 768px) {
	.c-voicecards { grid-template-columns: 1fr; gap: 2.4rem; }
	.c-voicecards__body { padding: 1.6rem 2rem 2rem; }
}

/* --------------------------------------------------------------------------
   主CTA（ホームインターメソッド 3日間セミナー）

   田中裁定 2026-07-29: お問い合わせを除き、CTAはすべてここへ集約する。
   誘導コピー2文＋ボタンの構成。旧サイトの青い画像バナーはこれに置き換えた。
   -------------------------------------------------------------------------- */
.c-section--cta .c-body p {
	text-align: center;
	font-size: 1.9rem;
	line-height: 1.9;
	font-weight: 500;
}
.c-section--cta .c-body p + p {
	margin-top: 2.4rem;
	font-size: 1.7rem;
	opacity: .92;
}

@media screen and (max-width: 768px) {
	.c-section--cta .c-body p { font-size: 1.7rem; }
	.c-section--cta .c-body p + p { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   緑帯が2枚続くとき（そのページの主CTA → セミナーCTA）

   田中裁定 2026-07-30: 講座ページは「LINEはこちら」等の主CTAを先に置き、
   その下に3日間セミナーへのCTAを重ねる。
   波形（::before）は緑→クリームの境目に描く前提の画像なので、緑の上に
   出すと帯の途中に妙な筋が入る。2枚目は波を消し、上下の余白も詰めて
   「1つの緑ブロックにボタンが2段ある」見え方に寄せる。
   -------------------------------------------------------------------------- */
.c-section--green + .c-section--green::before { display: none; }
/* margin も潰す。潰さないと上の余白ルール（`.c-body > figure + *` の 8rem 等）が
   効いて帯のあいだに地色の筋が入る。詳細度(0,2,0)でそれらに勝たせている。 */
.c-section--green + .c-section--green { padding-top: 0; margin-top: 0; }
.c-section--green:has(+ .c-section--green) { padding-bottom: 6rem; }

/* 2段になったときは、下段（セミナー）を主CTAより控えめにして主従をつける。
   Codex点検 2026-07-30: 1.7rem では主CTAの本文(1.6rem)より大きく、
   主CTAが短いページ（speech-contest / event / certified-school / senior-amb）では
   下段のほうが高くなって主従が逆転していた。本文を主CTA以下に落とし、
   下の余白も詰めて、下段が上段を上回らないようにする。 */
.c-section--green + .c-section--cta .c-body p { font-size: 1.6rem; }
.c-section--green + .c-section--cta { padding-bottom: 9rem; }

/* 緑帯の中に白いカード（.c-media）が入るとき、文字色を戻す。
   上の「色付きの上では白抜きにする」ルールが白カードにも効いてしまい、
   support.html で白地に白文字（コントラスト1.00）になっていた。
   詳細度を1つ上げて打ち消す。 */
.c-section--green .c-body .c-media,
.c-section--brown .c-body .c-media { color: var(--color-text); }
.c-section--green .c-body .c-media h2,
.c-section--green .c-body .c-media h3,
.c-section--brown .c-body .c-media h2,
.c-section--brown .c-body .c-media h3 { color: var(--color-text); }
.c-section--green .c-body .c-media h4,
.c-section--brown .c-body .c-media h4 { color: var(--color-accent); }
.c-section--green .c-body .c-media a,
.c-section--brown .c-body .c-media a { color: var(--color-accent); }
.c-section--green .c-body .c-media strong,
.c-section--brown .c-body .c-media strong {
	color: var(--color-text);
	border-bottom: 0;
}

@media screen and (max-width: 768px) {
	.c-section--green:has(+ .c-section--green) { padding-bottom: 4rem; }
	.c-section--green + .c-section--cta .c-body p { font-size: 1.4rem; }
	.c-section--green + .c-section--cta { padding-bottom: 6rem; }
}

/* --------------------------------------------------------------------------
   トップの相談室カード（4枚→6枚）

   田中裁定 2026-08-23: 認定園・導入園／協会概要のカードを追加。
   原本のデスクトップ指定は flex 1列・折り返し無しで、サムネは固定25rem。
   6枚だと 6*250 + 5*48 = 1740px 必要になり、そのままでは横にはみ出す。
   折り返しを許可して 4+2 に落とす（justify-content:center なので下段は中央寄せ）。
   -------------------------------------------------------------------------- */
.p-front-course__foot__list { flex-wrap: wrap; row-gap: 6.4rem; }