/* ==========================================================================
   OCE UI モダン化: ヒーローカルーセル(Swiper)とハンバーガーメニュー
   /mb/css/base.css を読み込んだ後に適用される前提の上書きスタイル。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ヒーローカルーセル（#topSlider）
   -------------------------------------------------------------------------- */

/* 旧 slick 用の左右パディング(.slideWrap ul li)を無効化し、
   spaceBetween(Swiper側オプション)だけでスライド間隔を制御する */
#topSlider.swiper .swiper-slide {
	padding: 0;
}

/* PC(641px以上): slidesPerView:'auto' 用にスライド幅を画像のナチュラル幅に合わせる。
   Swiper 既定の .swiper-slide{width:100%} と base.css の img{width:100%} を打ち消さないと
   640px の画像がコンテナ全幅(例: 1440px)に引き伸ばされる(本番 slick は 640px 表示が正) */
@media (min-width: 641px) {
	#topSlider.swiper .swiper-slide {
		width: auto;
	}
	#topSlider.swiper .swiper-slide img.fit {
		width: auto;
		max-width: none;
	}
}

/* キャプション文言（旧 .slick-slide a .txt を移植） */
#topSlider .swiper-slide a {
	display: block;
	position: relative;
}
#topSlider .swiper-slide a .txt {
	font-size: 12px;
	position: absolute;
	color: #FF0101;
	bottom: 8px;
	width: 100%;
	display: block;
	text-align: center;
	font-weight: bold;
}
@media (max-width: 769px) {
	#topSlider .swiper-slide a .txt {
		font-size: 10px;
		bottom: 8px;
	}
}

/* ページネーション（旧 .slick-dots を移植: 画像の下に静的配置） */
#topSlider .swiper-pagination {
	position: static;
	margin-top: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
}
#topSlider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 10px;
	background: #CCCCCC;
	opacity: 1;
	border-radius: 100px;
}
#topSlider .swiper-pagination-bullet-active {
	background: #666;
}

/* --------------------------------------------------------------------------
   2. ハンバーガーメニュー（#gNav）
   -------------------------------------------------------------------------- */

#gNav {
	--oce-nav-width: 275px;
	position: fixed;
	inset: 0;
	top: 0;
	right: 0;
	width: auto;
	height: 100%;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
	/* base.css 系に #gNav { transition: 1s }（全プロパティ対象）があり、
	   visibility まで 1 秒トランジションして「開いた瞬間の focus() 失敗」
	   「閉じた後も 1 秒 visible が残る」を引き起こすため明示的に無効化する */
	transition: none;
}
/* is-closing: 閉じるトランジション中（約250〜300ms）も暗幕(.cover)がクリックを
   受け続けるようにするための状態。is-open 解除と同時に JS 側で付与し、
   nav の transitionend（またはフォールバックの setTimeout）で解除される */
#gNav.is-open,
#gNav.is-closing {
	visibility: visible;
	pointer-events: auto;
}

/* nav 自体はスクロールしない縦 flex パネルにする。実スクロールは子の
   .gnav-scroll が担当し、MENU 帯(::before)と sticky CTA は nav の
   flex アイテムとして常に同じ位置に留まる（iOS のラバーバンドで
   スクロールコンテナだけが動いても、帯が一緒にズレて見えなくなる） */
#gNav nav {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--oce-nav-width);
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	z-index: 1000;
	transform: translateX(105%);
	transition: transform 250ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
#gNav.is-open nav {
	transform: translateX(0);
	transition: transform 300ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
/* 実際のスクロールコンテナ。overscroll-behavior:contain は body への
   スクロール連鎖だけを防ぎ、端での自然なバウンス（慣性スクロール時の
   伸び）はあえて残す（overscroll-behavior:none にすると動作が硬くなるため） */
#gNav .gnav-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* パネル最上部のヘッダー帯(MENU)。元は SP(max-width:640px)専用だったが、
   PC では #btnMenu(X) がこの帯なしで先頭項目「体験レッスン」に直接重なる
   ため、PC/SP 共通の無条件ルールへ引き上げる(2026-08-19)。
   env(safe-area-inset-*) はノッチ非搭載環境・PCブラウザでは 0 に解決される
   ため、このルールを SP 専用メディアクエリの外に出しても SP の見た目は
   1px も変わらない。閉じるボタンは #btnMenu 自身が fixed で画面右上に
   重なるため、この帯との重なりは考慮不要 */
#gNav nav::before {
	content: "MENU";
	display: flex;
	align-items: center;
	/* nav の flex アイテムになったため、リストが溢れると既定の flex-shrink:1 で
	   帯が圧縮されて薄くなる。固定の厚み(header と同じ)を維持する */
	flex-shrink: 0;
	/* 帯は非スクロールの nav 直下の flex アイテム(スクローラ .gnav-scroll の外)
	   にあるため、.gnav-scroll をどれだけスクロールしても動かない。
	   sticky は不要 */
	/* 閉時の header(base.css で高さ 71px)と厚みを揃え、開閉時に
	   ヘッダー帯の高さが変わったように見えないようにする。
	   ノッチ端末(viewport-fit=cover 時)では safe-area ぶん帯を伸ばし、
	   文字はセーフエリアの下に置く */
	height: calc(71px + env(safe-area-inset-top));
	/* 左 padding はロゴマーク(16px + 28px)+ 余白 10px ぶん確保 */
	padding: env(safe-area-inset-top) 16px 0 54px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.08em;
	color: #ff0c57;
	/* MENU 文字の左にロゴマーク(既存 SVG ロゴを viewBox クロップした
	   テーマ内派生アセット)を背景画像として表示する。縦位置はノッチ端末でも
	   セーフエリア下の可視領域の中央に来るよう safe-area の半分だけ下げる */
	background: #fdf2f7 url(../img/oce-logo-mark.svg) no-repeat 16px calc(50% + (env(safe-area-inset-top) / 2));
	background-size: 28px 28px;
	border-bottom: 1px solid #f6d3e0;
}

#gNav .cover {
	display: block;
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	z-index: 500;
	transition: opacity 250ms ease;
}
#gNav.is-open .cover {
	opacity: 1;
	transition: opacity 300ms ease;
}

/* ハンバーガー(#btnMenu)自身が開閉モーフィングして閉じるボタンを兼ねるため、
   旧来の外部 #btnClose は廃止する（DOM・イベントは header.php / oce-menu.js に
   残っているが、表示しない） */
#gNav #btnClose {
	display: none;
}

/* 開閉時に JS が #btnMenu へ focus() を移すため、iOS Safari 等で
   タップ操作でも青いフォーカスリングが表示されてしまう。キーボード操作
   （:focus-visible）のリングは残し、タップ・プログラム的フォーカスでは消す */
#btnMenu:focus:not(:focus-visible),
#gNav nav ul li a:focus:not(:focus-visible) {
	outline: none;
}

/* タップ領域拡大: メニュー項目・開閉ボタン */
#gNav nav ul li a {
	min-height: 44px;
	box-sizing: border-box;
}
/* #btnMenu 自体の position/right/top/width（base.css 側）は変えず、アイコンの
   描画位置を維持したまま ::before で 44px 角の見えないヒットエリアだけを
   アイコン中心に重ねる（display:flex 等で箱自体を広げるとアイコンの見た目の
   位置がずれるため、この方式に変更した） */
#btnMenu::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* ハンバーガー(3本線) → X のモーフィングアニメーション。
   実測値: バー色 #ff0c57・ラベル色 #666・アイコン幅 23px 相当 */
#btnMenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* <a> 由来の下線がラベル(MENU/CLOSE)に出ないようにする */
	text-decoration: none;
}
/* #btnMenu / #btnClose は <button> 化した（LINE Tag(lt.js) が <a href="#"> の
   クリックに __lt__cid を付けてページ遷移を強制し、開いた直後のメニューが
   閉じる不具合の恒久対策。リンクでなければ計測タグの装飾対象にならない）。
   button の UA デフォルト装飾を打ち消して従来の <a> と同じ見た目に保つ */
#btnMenu,
#btnClose {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	/* base.css 系の汎用フォーム向け button { display:block; width:100% } を打ち消す。
	   幅が全幅化すると position:fixed; right との組で本体が画面中央に見える
	   （<a> 時代は width:auto 相当だった） */
	width: auto;
}
#btnMenu .bar {
	display: block;
	width: 23px;
	height: 3px;
	border-radius: 2px;
	background: #ff0c57;
	transition: transform 300ms cubic-bezier(0.32, 0.72, 0.28, 1), opacity 200ms;
}
/* バー間の間隔は margin でなく gap で確保する（flex アイテム間の margin は
   ブロック要素のように相殺されないため、gap の方が意図した 4px が素直に出る）。
   3px 幅のバー + 4px の gap だと隣接バーの中心間距離がちょうど 7px になり、
   下記の translateY(±7px) で綺麗に中央のバーへ重なる */
#btnMenu .bar + .bar {
	margin-top: 4px;
}
#btnMenu .menu-label {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	color: #666;
	letter-spacing: 0.05em;
	text-align: center;
	/* MENU と CLOSE の文字幅差でボタン全体の幅が変わり、モーフ時にバーが
	   横へ動いて見えるのを防ぐため幅を固定する */
	width: 36px;
}
/* page.css のグローバル span:last-child:after { content: none !important } に
   ラベル(#btnMenu の最後の span)が潰されるため、!important + 高詳細度で勝たせる */
#btnMenu .menu-label::after {
	content: "MENU" !important;
}
#btnMenu.open .menu-label::after {
	content: "CLOSE" !important;
}
#btnMenu.open .bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
#btnMenu.open .bar:nth-child(2) {
	opacity: 0;
}
#btnMenu.open .bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
/* header は base.css で position:fixed のため、#btnMenu は開閉どちらでも
   画面内の同じ位置に留まる（fixed 化して座標を変えるとモーフ時に
   ボタンが移動して見えるため、位置指定はあえて変更しない） */
/* header(base.css で position:fixed + z-index)がスタッキングコンテキストを作るため、
   #btnMenu 単体に z-index:1001 を与えてもパネル(#gNav z-index:1000)の下に描画される。
   開いている間(oce-menu.js が body に付与)だけ header ごとパネルより上に持ち上げ、
   X 以外の header 内容(ロゴ等)は隠してパネルの邪魔をしないようにする */
body.oce-menu-open header {
	z-index: 1001;
	background: transparent;
	border-top-color: transparent;
	box-shadow: none;
}
body.oce-menu-open header .inner > *:not(#btnMenu) {
	visibility: hidden;
}
/* page.css の `html, body, section, div, article { transition: all 1s ease }`
   が #headNavArea(div, class="pc". ログインボタン・FB like・LINE を含む)にも
   掛かっており、visibility の切替が最大 1 秒遅れて開いたパネルに重なって
   見える。#gNav 自体の transition:1s 打ち消し(PR #15)と同じ手口で無効化する。
   ただし #headNavArea 自身だけを打ち消しても、内部の .fb-like・LINE リンクの
   <div> は「div」セレクタでそれぞれ個別に transition:1s を持っているため、
   継承された visibility の変化を子要素ごとに別タイマーで 1 秒かけて追従させて
   しまう(実測: #headNavArea は即座に hidden になるが子の <div> は最大 1 秒
   visible のままで LINE アイコンだけ画面に残る)。#headNavArea の subtree 全体
   を対象にして子要素の transition も無効化する必要がある */
#headNavArea,
#headNavArea * {
	transition: none;
}

/* PC(641px以上): 275px だと「体験レッスン / まずは体験！体験レッスンの内容・流れ」
   のような2行構成の項目名が汚く折り返す（ユーザー指摘・2026-08-19）。
   主要15項目を実測しながら 340〜420px の範囲で調整し、360px で折り返しが解消した */
@media (min-width: 641px) {
	#gNav {
		--oce-nav-width: 360px;
	}
	/* base.css の #btnMenu は position:absolute で header .inner(1000px 中央寄せ)
	   基準のため、PC ではパネル(右端 360px)の中ほどに X が乗り「MENU」の文字と
	   重なる（ユーザー指摘・2026-08-19）。ビューポート右端基準に変えてパネルの
	   右上に置く。
	   開いたときだけ動かす案も試したが、position:absolute → fixed で包含ブロックが
	   変わるため transition が効かず 219px 瞬間移動する（実測）。開閉どちらでも
	   同じ位置に置くことで、モーフィング中にボタンが飛ばないようにする。
	   SP は #gNav が全画面なので base.css の absolute のままで右端に来る */
	#btnMenu {
		position: fixed;
		right: 20px;
	}
}

/* PC(769px以上)のヘッダー最適化。769px を境にしているのは base.css がこの幅から
   header{height:auto; border-top:7px; padding:10px 20px} + .pc{display:block} に
   切り替わり、ヘッダー実高が 71px → 114px になるため（実測）。
   768px 以下は .pc が display:none なので、ここで display を与えると
   ログイン/LINE が SP に出てしまう。必ず 769px 以上に閉じ込めること */
@media (min-width: 769px) {
	/* 帯の高さ 71px は SP のヘッダー高さ。PC は 114px なので、帯だけ 71px だと
	   ヘッダー基準に置かれた X と帯の中心が合わない（ユーザー指摘・2026-08-19）。
	   帯を実ヘッダー高に合わせると X の中心 57px = 帯の中心 57px で一致する */
	#gNav nav::before {
		height: 114px;
	}
	/* X(ハンバーガー)をヘッダー高いっぱいの箱にして縦中央に置く。
	   開閉で座標が変わらないため、モーフィング中にボタンが動かない */
	#btnMenu {
		top: 0;
		height: 114px;
		justify-content: center;
	}
	/* ヘッダーをフルブリード化し、ロゴを header の左パディング(20px)に揃える。
	   右側(ハンバーガー right:20px)と左右対称になり、広い画面でも
	   「左だけ余白が大きい」非対称が出ない */
	header > .inner {
		max-width: none;
	}
	/* ログインと LINE は base.css では 109px 幅の箱に縦 2 段で積まれており、
	   ハンバーガーとも離れてバラバラに見える。1 行・縦中央・ハンバーガーの隣に
	   揃える。right:76px = ハンバーガー(right:20px + 幅36px)の左に 20px の間隔。
	   base.css の `header #headNavArea`(詳細度 0,1,1)に勝つため同じ形で書く */
	header #headNavArea {
		position: fixed;
		top: 0;
		right: 76px;
		height: 114px;
		width: auto;
		display: flex;
		align-items: center;
		gap: 14px;
		text-align: left;
	}
	header #headNavArea > p,
	header #headNavArea > div {
		margin: 0;
	}
	/* FB like は SDK 未読込で高さ 0 のまま行間だけ食うため、行揃えから外す */
	header #headNavArea .fb-like {
		display: none;
	}
	header #headNavArea img {
		display: block;
	}
	/* LINE ボタンは markup が width="40%" 指定。親を可変幅(width:auto)にすると
	   パーセンテージの基準が定まらず原寸 237px まで膨らみ、769〜800px 付近で
	   ロゴと衝突する（実測）。ログインボタン(109px)と釣り合う幅に固定する */
	header #headNavArea > div img {
		width: 110px;
		height: auto;
	}
}

/* 768px 以下（ヘッダー実高 71px）でも X を帯の中央に置く。base.css の
   #btnMenu{top:21px} だと中心が 38.5px となり、帯の中心 35.5px から 3px 下に
   ずれる。PC 側(114px)と同じ考え方で、ヘッダー高いっぱいの箱にして縦中央へ。
   safe-area は帯の height/padding と同じ式にして、ノッチ端末で
   viewport-fit=cover を導入した場合も中心が一致するようにしておく
   （現状の viewport meta に viewport-fit=cover は無く env() は 0 に解決される） */
@media (max-width: 768px) {
	#btnMenu {
		top: 0;
		height: calc(71px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
		box-sizing: border-box;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	#gNav {
		/* スマホは全画面メニュー化し、閉じる導線を右上の X ボタンのみにする */
		--oce-nav-width: 100vw;
	}
	/* MENU ボタンは画面端(base.css は right:11px)から少し離してタップしやすく */
	#btnMenu {
		right: 18px;
	}
	/* height:100% のパネルに帯や余白を足しても合計が画面からはみ出さないようにする。
	   (content-box のままだと、はみ出した高さぶん最下部の項目=プライバシーポリシー等が
	   スクロールしても到達できなくなる) */
	#gNav nav {
		box-sizing: border-box;
	}
	/* 体験レッスン申し込み(CTA)は sticky で常に画面下部に見せる。
	   スクロールが本来の位置に達したら通常の行として流れる */
	#gNav nav ul li.contact {
		position: sticky;
		/* ホームインジケータ領域(viewport-fit=cover 時)に CTA が重ならないように */
		bottom: env(safe-area-inset-bottom);
		z-index: 10;
	}
	/* 最下部の項目が sticky CTA と iOS ツールバーに隠れず読めるよう余白を確保 */
	#gNav nav ul {
		padding-bottom: calc(90px + env(safe-area-inset-bottom));
	}
	/* base.css の @media (max-width:769px) 側で font-size は既に
	   #gNav nav ul li a=16px!important / span=13px!important に拡大済み。
	   ここではタップ領域確保のための padding のみ上書きする
	   （.main_menu li a の padding:3px 5px!important に対抗するため !important が必要）*/
	#gNav nav ul li a {
		padding: 12px 5px !important;
		color: #333;
	}
	/* メイン項目名の可読性を上げる。実際のラベルは .main_menu li a .text
	   (base.css で 13px)にあり、a への指定では届かないため .text を直接上書きする。
	   サブ説明(.text span、base.css で 10px)は 12px にとどめて主従を付ける */
	#gNav nav .main_menu li a .text {
		font-size: 17px !important;
		font-weight: 600;
		line-height: 1.3;
	}
	#gNav nav .main_menu li a .text span {
		font-size: 12px !important;
		font-weight: 400;
		color: #888;
	}
	/* 色付き背景の行(申込CTA・ログイン)では説明文の #888 が読めないため白系に戻す */
	#gNav nav .main_menu li.contact a .text span,
	#gNav nav .main_menu li.login a .text span {
		color: rgba(255, 255, 255, .9);
	}
	/* 白背景の行以外(申込CTA・ログイン)は元の白文字を維持する */
	#gNav nav ul li.contact a,
	#gNav nav ul li.login a {
		color: #fff;
	}
	#gNav nav ul li.contact a span,
	#gNav nav ul li.login a span {
		color: rgba(255, 255, 255, .85);
	}
}

@media (prefers-reduced-motion: reduce) {
	#gNav,
	#gNav nav,
	#gNav .cover,
	#btnMenu .bar {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   5. 詳細ページ回遊導線（講師詳細・お客様の声詳細の前後ナビ）
   設計書: aikataw-hq/projects/OCE/docs/website-improvement/2026-08-19-detail-page-navigation-design.md
   モックアップ: 同ディレクトリ 2026-08-19-detail-page-navigation-mockup.html（案3・案2・案B-1採用）
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 「一覧へもどる」の作り替え（案B・2026-08-19 ユーザー選択）
   /mb/css/page.css の `.backBtn a { background:#868686; ... }` を打ち消す。
   同セレクタは特異性(0,1,1)で同一だが、本ファイルは page.css より後に読み込まれる
   （header.php参照）ため cascade の記述順で上書きされる。#contents を足して
   詳細度を上げ、読み込み順に依存しない形にしている（!important 不使用）。
   矢印は上部 .backBtn（マークアップ変更なし）にも同一 CSS で出したいため、
   inline SVG ではなく ::before の CSS 疑似要素で表現する。
   -------------------------------------------------------------------------- */
/* 枠線付きボタンになったため、全幅のままだと左右の枠線が画面端で切れる。
   本文と同じ約 12px のガターを入れる（padding-top は page.css の
   #voicemore .backBtn { padding-top:10px } を潰さないよう左右だけ指定する）。
   padding-bottom は、講師詳細ページで body の木目テクスチャ背景
   （/mb/css/base.css の body { background: url(bg.jpg) ... } ）がボタンの
   すぐ下で途切れて見える窮屈さを解消するための余白（2026-08-19 ユーザー指摘）。
   #contents 自体・.oce-adjwrap には背景指定が無く body が透けるため、この
   余白部分にも木目が続いて見える（お客様の声側は #voicemore { background:#fff }
   が backBtn を含めて覆っているため、同じ余白でも木目は出ない＝仕様として許容）。 */
#contents .backBtn {
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 28px;
	box-sizing: border-box;
}
#contents .backBtn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 300px;
	max-width: 100%;
	height: 52px;
	margin: 0 auto;
	padding: 10px 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #666;
	font-weight: 700;
	text-decoration: none;
	font-size: 15px;
	box-sizing: border-box;
}
#contents .backBtn a::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-left: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
}
#contents .backBtn a:active {
	background: #f5f5f5;
}

/* --------------------------------------------------------------------------
   5.2 前後ナビ（講師詳細・お客様の声詳細 共通コンポーネント）
   -------------------------------------------------------------------------- */
/* 左右のガターは本文（.lecturerMore .sectionMain / #voicemore .container）の
   約 12px に合わせる。これを入れないとカードの枠線が画面端で切れる */
.oce-adjwrap {
	margin: 0 0 18px;
	/* 上は本文との間、下（.backBtn の padding-bottom）と同じ 28px で揃える。
	   掛け持ち講師でブロックが続くときの区切りも兼ねる */
	padding: 28px 12px 0;
	/* PC の max-width:1000px に padding を含めて本文と左端を揃えるため */
	box-sizing: border-box;
}
/* PC では本文と同じ 1000px 中央寄せに収める。講師詳細の挿入位置は
   max-width を持つコンテナの外なので、指定しないと 1440px 全幅に広がって
   本文とカードの左端が揃わない（page.css の .backBtn と同じ扱いに合わせる）。
   お客様の声側は #voicemore .container の内側なので実質この指定は効かない */
@media (min-width: 769px) {
	.oce-adjwrap {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}
.oce-adjwrap__ttl {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #767676;
	margin: 0 0 8px;
}
.oce-adjwrap__school {
	display: inline-block;
	background: #fdf2f7;
	border: 1px solid #f6d3e0;
	color: #ff0c57;
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 12px;
}
/* 「同じ校舎の講師 [校舎名] ほかN名」の末尾。旧 .oce-more__ttl span と同じ見た目
   （2026-08-19 見出し1行統合。旧デザインは .oce-adjwrap__ttl と .oce-more__ttl の
   2段見出しだった） */
.oce-adjwrap__count {
	font-size: 12px;
	color: #767676;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   5.3 同校舎 横スクロール（講師詳細・案3）
   -------------------------------------------------------------------------- */
/* 横スクロール列は右端だけ画面外へ流して「まだ続く」ことを見せる。
   左は本文ガターに揃えたいので、負のマージンは右だけに掛ける
   （左右とも負にすると先頭のサムネイルが画面端で切れる） */
.oce-more {
	margin: 0 -12px 18px 0;
}
.oce-more__list {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	list-style: none;
	margin: 0;
	/* 末尾までスクロールしたときに右端へ余白が残るようにする */
	padding: 0 12px 6px 0;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.oce-more__list::-webkit-scrollbar {
	height: 4px;
}
.oce-more__list::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}
.oce-more__list li {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 72px;
	text-align: center;
}
.oce-more__list a {
	text-decoration: none;
	color: #333;
	display: block;
}
.oce-more__thumb {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	background: #eee;
	display: block;
	margin: 0 auto;
}
.oce-more__figure {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto;
}
.oce-more__flag {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	background: #eee;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	display: block;
}
.oce-more__name {
	display: block;
	font-size: 11px;
	margin-top: 5px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   5.4 他の声 3件（お客様の声詳細・案2）
   -------------------------------------------------------------------------- */
.oce-vmore {
	margin-bottom: 18px;
}
.oce-vmore__ttl {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
}
.oce-vmore__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.oce-vmore__list a {
	text-decoration: none;
	color: #333;
	display: block;
}
.oce-vmore__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: #eee;
	display: block;
}
.oce-vm__name {
	display: block;
	font-size: 11px;
	margin-top: 5px;
	line-height: 1.3;
}