/* =============================================================
   aetta トップページ（ヴィンテージ・プレイビル）

   マークアップは front-page.php で自前に組んでいるので、親テーマの
   header-hero を上書きするための !important は要らなくなった。
   色とタイポグラフィの変数は assets/base.css の :root を使う。

   旧 M-Raising から引き継いだ「ヒーロー左右の広告レール」は削除した
   （実装計画 §7.1・仕様 §11.5 で広告は対象外。大人向けの信頼感も損なう）。
   ============================================================= */

/* 全幅セクションで横スクロールを出さない */
body.home { overflow-x: clip; }

/* トップは自前ヒーローを持つので、親テーマの上余白を詰める */
body.home .site-content { padding-top: 24px; }

/* ---------- 最上部ティッカー ---------- */

.emr-ticker {
	flex: 0 0 auto;                 /* body が flex のため潰れ防止 */
	width: 100%;
	background: var(--mr-ink);
	color: var(--mr-paper);
	border-bottom: 2px solid var(--mr-gold);
	overflow: hidden;
	white-space: nowrap;
}

.emr-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: emr-slide 40s linear infinite;
}

.emr-ticker__track > span {
	flex: none;
	display: block;
	padding: 9px 0;
	white-space: nowrap;
	font-family: var(--mr-mono);
	font-size: 12px;
	letter-spacing: .16em;
}

.emr-ticker .emr-star { color: var(--mr-gold); }

@keyframes emr-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.emr-ticker__track { animation: none; }
}

/* ---------- 共通パーツ ---------- */

.emr-kicker {
	display: block;
	font-family: var(--mr-disp);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mr-cobalt);
	margin-bottom: 6px;
}

/* 和文のキッカー。--mr-disp は欧文専用、uppercase と .14em の字間も
   和字には効かない（むしろ間延びする）ので打ち消す。 */
.emr-kicker--ja {
	font-family: var(--mr-disp-ja);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: none;

	/* ヒーローの背景画像の濃い部分（木立）に乗ると、コバルトでは 3.0:1 まで落ちる。
	   一段濃い青にして 5.1:1 を確保する。 */
	color: var(--mr-cobalt-deep);
}

.emr-h2 {
	font-weight: 800;
	font-size: clamp(24px, 3vw, 32px);
	letter-spacing: .03em;
	margin: 0;
}

.emr-section { margin-top: 56px; }

.emr-sec-head {
	border-bottom: 3px solid var(--mr-ink);
	padding-bottom: 12px;
	margin-bottom: 26px;
}

.emr-section__more {
	margin: 18px 0 0;
	text-align: right;
	font-family: var(--mr-mono);
	font-size: 13px;
	letter-spacing: .08em;
}

.emr-section__more a {
	color: var(--mr-cobalt);
	border-bottom: 2px solid var(--mr-gold);
	padding-bottom: 2px;
}

/* ---------- ヒーロー左右の広告枠 ---------- */

/* 本文カラムの外側に絶対配置する。`right:100%` / `left:100%` で本文の縁に
   寄せるので、`calc(50% - 520px)` のような固定値を持たない（本文幅を変えても追従する）。
   .emr-hero は overflow:hidden なので、その外側の .emr-home を基準にする。 */
.emr-home { position: relative; }

.emr-adrail {
	position: absolute;
	top: 0;
	width: 160px;
	height: 600px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.emr-adrail--left  { right: 100%; margin-right: 28px; }
.emr-adrail--right { left: 100%;  margin-left: 28px; }

.emr-adposter,
.emr-adsky {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	border: 3px solid var(--mr-ink);
	box-shadow: 5px 5px 0 rgba(22, 35, 59, .2);
	transition: transform .12s ease, box-shadow .12s ease;
}

/* 内側の細罫（型押しの額縁。文字色に追従させる） */
.emr-adposter::before,
.emr-adsky::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid currentColor;
	opacity: .32;
	pointer-events: none;
}

.emr-adposter:hover,
.emr-adsky:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 rgba(22, 35, 59, .26);
}

.emr-adposter { flex: 1; min-height: 0; padding: 16px 10px; }
.emr-adsky    { flex: 1; min-height: 0; padding: 26px 14px; gap: 14px; }

.emr-adposter__kicker,
.emr-adsky__kicker {
	position: relative;
	font-family: var(--mr-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	padding: 3px 8px;
	font-size: 9px;
}

.emr-adsky__kicker { font-size: 11px; letter-spacing: .2em; padding: 5px 12px; }

/* 見出しは和文なので --mr-disp（Anton／欧文専用）ではなく和文用を使う。 */
.emr-adposter__title,
.emr-adsky__title {
	position: relative;
	font-family: var(--mr-disp-ja);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .08em;
	font-size: 28px;
}

.emr-adsky__title { font-size: 34px; }

.emr-adposter__note,
.emr-adsky__note {
	position: relative;
	font-size: 11px;
	line-height: 1.6;
	font-weight: 700;
}

.emr-adsky__note { font-size: 13px; }

.emr-adsky__size {
	position: relative;
	font-family: var(--mr-mono);
	font-size: 10px;
	letter-spacing: .14em;
	opacity: .6;
	margin-top: 2px;
}

/* ゴールド地・生成り地・濃紺地の3色。子テーマのテーマカラーに合わせる。 */
.emr-adposter--gold { background: var(--mr-gold); color: var(--mr-ink); }
.emr-adposter--gold .emr-adposter__kicker { background: var(--mr-ink); color: var(--mr-gold); }

.emr-adposter--paper { background: var(--mr-paper-2); color: var(--mr-ink); }
.emr-adposter--paper .emr-adposter__kicker { background: #B5462F; color: var(--mr-paper); }
.emr-adposter--paper .emr-adposter__title { color: #B5462F; }

.emr-adsky--ink { background: var(--mr-ink); color: var(--mr-paper); }
.emr-adsky--ink .emr-adsky__kicker { background: var(--mr-gold); color: var(--mr-ink); }
.emr-adsky--ink .emr-adsky__title { color: var(--mr-gold); }

/* ホバー時の文字色。
   親テーマの `a:hover{color:#1db1fc}` が効いて水色になるので、
   各枠の配色の中で収まる落ち着いた色に固定する。 */
.emr-adposter--gold:hover { color: var(--mr-cobalt-deep); }

.emr-adposter--paper:hover,
.emr-adposter--paper:hover .emr-adposter__title { color: #8E3423; }

.emr-adsky--ink:hover { color: var(--mr-gold); }

/* 本文の外に 160px + 余白 28px を2本ぶん置けない画面では出さない。 */
@media (max-width: 1560px) {
	.emr-adrail { display: none; }
}

/* ---------- ヒーロー（額装したプレイビル） ---------- */

.emr-hero {
	background: var(--mr-paper-2);
	border: 3px solid var(--mr-ink);
	box-shadow: 10px 10px 0 var(--mr-ink);
	overflow: hidden;
}

.emr-billing {
	background: var(--mr-ink);
	color: var(--mr-paper);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 22px;
	font-family: var(--mr-mono);
	font-size: 12px;
	letter-spacing: .26em;
	text-transform: uppercase;
	line-height: 1.2;
}

.emr-billing__side {
	font-family: var(--mr-disp);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .1em;
}

/* ヒーロー本体。街のイラストを敷き、その上に紙色のスクリムを重ねてから文字を置く。
 *
 * ⚠️ **スクリムなしでは読めない。** 原画は明るいが、左上の木立・左下の人物・
 * 右側の店先が濃紺で、そこに文字が乗ると最悪 1.0:1（＝完全に埋もれる）になる。
 * 実測では見出し領域の 11%、ジャンル帯の 36% の画素が 4.5:1 を下回った。
 * 紙色 70% を重ね、さらに小さい文字の色を一段濃くすることで全項目が基準を満たす
 * （実測: キッカー 5.1:1 / 見出し 7.5:1 / リード 5.6:1 / ジャンル帯 4.8:1）。
 * スクリムだけで解こうとすると 84% でもキッカーが 4.4:1 で届かない。
 * 絵が飛んでしまうので、暗い背景に負ける小さい文字の側を濃くしている。
 *
 * スクリムは linear-gradient を画像の上に重ねる形で持つ。疑似要素にすると
 * 検索フォームの z-index と競合するので、背景だけで完結させている。 */
.emr-hero__body {
	padding: 30px 30px 26px;
	background-image:
		linear-gradient( rgba( var(--mr-paper-2-rgb), .7 ), rgba( var(--mr-paper-2-rgb), .7 ) ),
		url("hero-street.webp");
	background-size: cover;
	background-position: center;
}

.emr-hero__title {
	font-weight: 800;
	font-size: clamp(30px, 5.2vw, 56px);
	line-height: 1.15;
	letter-spacing: .02em;
	color: var(--mr-ink);
	margin: 10px 0 0;
}

/* 改行は本文の <br>（句点で切る）に任せ、幅の制限はかけない。
   max-width を残すと狭い箱の中で中途半端に折り返して <br> と二重に折れる。 */
.emr-hero__lead {
	color: var(--mr-ink-soft);
	font-size: 16px;
	line-height: 1.9;
	margin: 16px 0 0;
	border-top: 2px solid var(--mr-rule);
	padding-top: 16px;
}

.emr-hero__search { margin: 22px 0 24px; }

/* ヒーロー下の帯。和文を主、欧文をその下に小さく添える。
   読ませるのは和文なので、欧文は装飾として残すだけにする。 */
.emr-subbilling {
	margin: 0;
	padding-top: 18px;
	border-top: 2px solid var(--mr-rule);
}

.emr-subbilling__ja {
	margin: 0;
	font-family: var(--mr-disp-ja);
	font-weight: 800;
	color: var(--mr-cobalt-deep);
	font-size: clamp(19px, 2.8vw, 32px);
	letter-spacing: .06em;
	line-height: 1.25;
}

/* 装飾の英字。**opacity で薄めない。** .5 では無地の紙の上でも 2.4:1 しかなく、
   背景画像が入るとほぼ読めない。小ささと字間で従属させ、色は保つ。 */
.emr-subbilling__en {
	margin: 5px 0 0;
	font-family: var(--mr-disp);
	text-transform: uppercase;
	color: var(--mr-ink-soft);
	font-size: clamp(11px, 1.2vw, 14px);
	letter-spacing: .2em;
	line-height: 1;
}

/* 旧レイアウトは flex の gap で間隔をとっていた。インラインに戻したので中黒側で持つ。 */
.emr-subbilling .emr-dot {
	color: var(--mr-gold);
	margin: 0 .3em;
}

/* ジャンル節の中で教室／イベントを分ける小見出し。 */
.emr-subhead {
	margin: 26px 0 12px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--mr-ink-soft);
	border-left: 5px solid var(--mr-gold);
	padding-left: 10px;
	line-height: 1.4;
}

.emr-subhead:first-of-type { margin-top: 8px; }

/* ---------- 2導線（習う／参加する） ---------- */

.emr-routes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 32px;
}

/* 2枚の高さはグリッドの stretch で勝手に揃う。
   本文に min-height で高さを予約すると、1行で収まる幅では約2行分が死に余白になる。
   揃えたいのは「さがす」リンクの位置なので、縦積みの flex にして底へ貼る。
   ⚠️ align-items を flex-start にしないと、既定の stretch で
      .emr-route__label（紺のバッジ）が横いっぱいに伸びる。 */
.emr-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	background: var(--mr-paper-2);
	border: 3px solid var(--mr-ink);
	box-shadow: 8px 8px 0 var(--mr-ink);
	padding: 20px 24px 18px;
	color: var(--mr-ink);
	transition: transform .15s, box-shadow .15s;
}

.emr-route:hover {
	transform: translate(-3px, -3px);
	box-shadow: 11px 11px 0 var(--mr-ink);
	color: var(--mr-ink);
}

.emr-route__label {
	display: inline-block;
	background: var(--mr-cobalt);
	color: var(--mr-paper);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .16em;
	padding: 6px 18px;
}

.emr-route--alt .emr-route__label { background: var(--mr-gold-deep); }

.emr-route__title {
	display: block;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	letter-spacing: .04em;
	margin: 10px 0 6px;
}

.emr-route__text {
	display: block;
	font-size: 16px;
	line-height: 1.85;
	color: var(--mr-ink-soft);
}

.emr-route__more {
	display: inline-block;
	margin-top: auto;
	padding-top: 12px;
	font-family: var(--mr-mono);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--mr-cobalt);
	border-bottom: 2px solid var(--mr-gold);
	padding-bottom: 2px;
}

/* ---------- コラム・お知らせ（投稿） ---------- */

/* 額装は1枚だけ。行ごとに枠と影を付けると影が5つ縦に連なって重くなる。 */
.emr-posts {
	background: var(--mr-paper-2);
	border: 3px solid var(--mr-ink);
	box-shadow: 8px 8px 0 var(--mr-ink);
	padding: 2px 22px;
}

.emr-post {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--mr-rule);
	color: var(--mr-ink);
}

.emr-post:first-child { border-top: 0; }

/* アイキャッチが無い投稿は画像を出さない（プレースホルダは意匠に合わない）。
   ただし列は残し、本文を2列目に固定する。1列に畳むと、その行だけ左端が
   ずれてリストがガタつく。 */

/* パネル全体は浮かせない。行ごとに動くとリストがガタつく。 */
.emr-post:hover { color: var(--mr-ink); }
.emr-post:hover .emr-post__title { color: var(--mr-cobalt-deep); }

.emr-post__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 2px solid var(--mr-rule);
	background: var(--mr-paper);
}

.emr-post__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.emr-post__body { display: block; min-width: 0; grid-column: 2; }

.emr-post__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.55;
	letter-spacing: .02em;
}

.emr-post__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--mr-ink-soft);
}

/* 2導線のすぐ下に続くので、セクション既定の 56px より詰める。 */
.emr-section--tight { margin-top: 36px; }

/* ---------- 体験3ステップ（濃紺・全幅） ---------- */

.emr-steps {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--mr-ink);
	color: var(--mr-paper);
	padding: 58px 0;
	margin-top: 64px;
}

.emr-steps__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.emr-steps .emr-sec-head { border-bottom-color: var(--mr-gold); }
.emr-steps .emr-kicker   { color: var(--mr-gold); }
.emr-steps .emr-h2       { color: var(--mr-paper); }

.emr-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.emr-step {
	border: 1px solid rgba(243, 233, 207, .28);
	padding: 26px 24px;
}

.emr-step__no {
	font-family: var(--mr-disp);
	font-size: 56px;
	line-height: .85;
	color: var(--mr-gold);
	margin-bottom: 12px;
}

.emr-step__title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--mr-paper);
}

.emr-step__text {
	font-size: 14px;
	color: rgba(243, 233, 207, .78);
	margin: 0;
	line-height: 1.8;
}

/* ---------- 掲載CTA（コバルト・全幅） ---------- */

.emr-cta {
	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--mr-cobalt);
	color: var(--mr-paper);
	border-top: 3px solid var(--mr-ink);
	border-bottom: 3px solid var(--mr-ink);
}

.emr-cta__stripe {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .12;
	background: repeating-linear-gradient(45deg, var(--mr-paper) 0 14px, transparent 14px 34px);
}

.emr-cta__inner {
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
	padding: 48px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}

.emr-cta .emr-kicker { color: var(--mr-gold); }
.emr-cta .emr-h2     { color: var(--mr-paper); margin: 6px 0 8px; }

.emr-cta__text p {
	margin: 0;
	color: rgba(243, 233, 207, .88);
	font-size: 15px;
	line-height: 1.8;
	max-width: 46em;
}

.emr-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mr-gold);
	color: var(--mr-ink);
	border: 2px solid var(--mr-gold-deep);
	font-weight: 800;
	font-size: 16px;
	padding: 14px 26px;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s;
}

.emr-cta__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--mr-ink);
	color: var(--mr-ink);
}

/* ---------- 新着カードの小物（親テーマの緑を差し替え） ---------- */

.emr-home .hp-listing .hp-icon.fa-map-marker-alt { color: var(--mr-cobalt); }

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
	.emr-routes { grid-template-columns: 1fr; }
	.emr-steps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.emr-billing { font-size: 10px; letter-spacing: .12em; padding: 9px 14px; }
	.emr-hero { box-shadow: 6px 6px 0 var(--mr-ink); }

	.emr-hero__body { padding: 22px 18px 20px; }
	.emr-route { box-shadow: 5px 5px 0 var(--mr-ink); padding: 18px 18px 16px; }

	.emr-posts { box-shadow: 5px 5px 0 var(--mr-ink); padding: 2px 14px; }
	.emr-post { grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 0; }
	.emr-post__title { font-size: 15px; }
	.emr-post__excerpt { font-size: 12.5px; margin-top: 4px; -webkit-line-clamp: 1; }
	.emr-cta__inner { flex-direction: column; align-items: flex-start; }
}