/* ============================================================
   ANZAS v2 — main.css(トップページ+共通シェル)
   出典: トップのカンプ(hifi)
   トークン: ブルー #1298D6 × イエロー #FFC906 / Poppins + Zen Kaku Gothic New
   BP: 1080 / 900 / 840 / 640 / 560(デザインリファレンス helmet 準拠)
   ============================================================ */

/* 日本語文中の欧文サイズ補正。
   実測(canvas)では漢字の字面は欧文大文字より約 17% 高く、同じ font-size だと
   英数字だけ small に見える。書体は Zen Kaku Gothic New のまま(=印象を変えず)、
   欧文サブセットだけを size-adjust で拡大して視覚サイズを揃える。
   ※ Zen Kaku Gothic New は palt 非対応のため、約物の詰めは別途 CSS で行う。 */
@font-face {
  font-family: 'Zen Kaku Latin Fit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/v18-gNMYW2drQpDw0GjzrVNFf_valaDBcznOojxoTE76QGE.woff2) format('woff2');
  size-adjust: 110%; unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'Zen Kaku Latin Fit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/v18-gNMVW2drQpDw0GjzrVNFf_valaDBcznOqs9LWWPYTUtP2d4.woff2) format('woff2');
  size-adjust: 110%; unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'Zen Kaku Latin Fit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/v18-gNMVW2drQpDw0GjzrVNFf_valaDBcznOqodNWWPYTUtP2d4.woff2) format('woff2');
  size-adjust: 110%; unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'Zen Kaku Latin Fit'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(../fonts/v18-gNMVW2drQpDw0GjzrVNFf_valaDBcznOqr9PWWPYTUtP2d4.woff2) format('woff2');
  size-adjust: 110%; unicode-range: U+0020-007E;
}

:root {
  --av2-ink: #1F2227;
  --av2-ink-mid: #2B2E34;
  --av2-body: #3D4042;
  --av2-cap: #8A8F93;
  --av2-line: #E3E6E7;
  --av2-surface: #F7F8F8;
  --av2-brand: #1298D6;
  --av2-brand-hover: #0F86BC;
  --av2-tint: #EAF5FB;
  --av2-tint-border: #BFE2F4;
  --av2-yellow: #FFC906;
  --av2-footer: #1F2227;
  --av2-en: Poppins, "Zen Kaku Gothic New", system-ui, sans-serif;
  --av2-shadow-sm: 0 2px 12px rgba(43, 46, 52, .06);
  --av2-shadow: 0 16px 40px rgba(43, 46, 52, .10);
  --av2-shadow-lg: 0 16px 40px rgba(43, 46, 52, .12);
}

body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
.av2-yellow { color: var(--av2-yellow); }

/* ルート直下(header/main/footer)の blockGap を無効化 ─
   高さ0のヘッダーを margin が突き抜け、ヒーロー上に隙間を作るため。 */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- 共通部品: ピルボタン+円形矢印 ---------- */

.av2-pill { display: inline-flex; align-items: center; gap: 20px; height: 56px; padding: 0 8px 0 28px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s ease; }
.av2-pill__arrow { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--av2-en); font-size: 16px; flex-shrink: 0; }
.av2-pill--fill { background: var(--av2-brand); color: #fff !important; }
.av2-pill--fill:hover { background: var(--av2-brand-hover); color: #fff !important; }
.av2-pill--fill .av2-pill__arrow { background: #fff; color: var(--av2-brand); }
.av2-pill--ghost { background: #fff; border: 1px solid var(--av2-brand); color: var(--av2-brand) !important; }
.av2-pill--ghost:hover { background: var(--av2-tint); color: var(--av2-brand) !important; }
.av2-pill--ghost .av2-pill__arrow { background: var(--av2-brand); color: #fff; }
.av2-pill--white { background: #fff; color: var(--av2-ink) !important; }
.av2-pill--white .av2-pill__arrow { background: var(--av2-brand); color: #fff; }
.av2-pill--onblue { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.85); color: #fff !important; }
.av2-pill--onblue:hover { background: rgba(255,255,255,.24); color: #fff !important; }
.av2-pill--onblue .av2-pill__arrow { background: #fff; color: var(--av2-brand); }
.av2-pill--s { height: 48px; gap: 16px; padding: 0 8px 0 24px; font-size: 13px; }
.av2-pill--s .av2-pill__arrow { width: 32px; height: 32px; font-size: 13px; }

/* LINEは共通の相談導線。緑の背景と白い文字で揃える。 */
.av2-pill--line, .av2-menu__cta--line, .av2-hnav__cta.av2-hnav__cta--line { background: #06C755; color: #fff !important; }
.av2-pill--line:hover, .av2-menu__cta--line:hover, .av2-hnav__cta.av2-hnav__cta--line:hover { background: #42D57E; color: #fff !important; }
.av2-pill--line .av2-pill__arrow { background: #fff; color: #123D27; }
.av2-pill--line:focus-visible, .av2-menu__cta--line:focus-visible, .av2-hnav__cta--line:focus-visible { outline: 3px solid var(--av2-ink); outline-offset: 4px; }

/* 下線リンク+ミニ円矢印 */
.av2-uline { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding-bottom: 4px; border-bottom: 2px solid currentColor; text-decoration: none; transition: color .2s ease; }
.av2-uline__arrow { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--av2-en); font-size: 10px; flex-shrink: 0; }
.av2-uline--ink { color: var(--av2-ink-mid) !important; }
.av2-uline--ink:hover { color: var(--av2-brand) !important; }
.av2-uline--ink .av2-uline__arrow, .av2-uline--blue .av2-uline__arrow { background: var(--av2-brand); color: #fff; }
.av2-uline--blue { color: var(--av2-brand) !important; }
.av2-uline--blue:hover { color: var(--av2-brand-hover) !important; }
.av2-uline--white { color: #fff !important; }
.av2-uline--white:hover { color: var(--av2-yellow) !important; }
.av2-uline--white .av2-uline__arrow { background: #fff; color: var(--av2-brand); }

/* CTA 行 */
.av2-ctarow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.av2-ctarow--center { justify-content: center; margin-top: 36px; }

/* タグ(黄色の英字ラベル) */
.av2-tag { font-family: var(--av2-en); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--av2-yellow); }
.av2-tag--blue { color: var(--av2-brand); }

/* チップ */
.av2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.av2-chip { border: 1px solid var(--av2-line); border-radius: 999px; padding: 5px 12px; font-size: 11px; color: var(--av2-body); }

/* バーストマーク */
.av2-burst { width: 26px; height: 26px; display: inline-block; }
.av2-burst--invert { filter: brightness(0) invert(1); }
.av2-burst--lg { width: 40px; height: 40px; }

/* ---------- セクション骨格 ---------- */

.av2-sec { position: relative; z-index: 0; max-width: 1140px; margin: 0 auto; padding: 128px 40px 0; }
.av2-surface { position: relative; z-index: 0; background: var(--av2-surface); margin-top: 128px; }
.av2-surface--slant { clip-path: polygon(0 0, 100% 56px, 100% 100%, 0 100%); }

.av2-ghost { position: absolute; z-index: -1; top: 96px; right: 0; font-family: var(--av2-en); font-weight: 600; font-size: 180px; line-height: 1; letter-spacing: -0.02em; color: var(--av2-surface); white-space: nowrap; pointer-events: none; }
.av2-ghost--white { color: #fff; right: 24px; top: 72px; }
.av2-ghost--why { top: 24px; right: -24px; font-size: 220px; color: rgba(255,255,255,.07); }

.av2-eyebrow { display: flex; align-items: flex-end; gap: 12px; }
.av2-eyebrow__num { font-family: var(--av2-en); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--av2-cap); }
.av2-sec__en { font-family: var(--av2-en); font-weight: 600; font-size: 56px; letter-spacing: -0.01em; color: var(--av2-ink); margin: 14px 0 0; line-height: 1.05; }
/* このセクションの H2(render.php)。英語は上の意匠で、見出しの実体はこちら。
   見出しの既定 margin / font-size を打ち消し、見た目は変えない。 */
.av2-sec__jp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 14px; line-height: 1.7; color: var(--av2-brand); margin: 12px 0 0; }
.av2-badge { background: var(--av2-yellow); color: var(--av2-ink); font-weight: 700; font-size: 11px; border-radius: 999px; padding: 4px 12px; }

.av2-sechead--split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.av2-sechead__lead { padding-top: 56px; }
.av2-sechead__lead--plain { font-size: 14px; line-height: 2.0; }
.av2-sechead__copy { font-weight: 700; font-size: 24px; line-height: 1.6; color: var(--av2-ink); }
.av2-sechead__sub { font-size: 14px; line-height: 2.0; margin-top: 8px; }

.av2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.av2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 56px 0 0; padding: 0; list-style: none; }
/* ul で使う場合の li。中のカードを幅・高さとも 1 セルいっぱいに伸ばす。
   セレクタは > li に限定する ─ 素の li に display を当てると本文の箇条書きが壊れる。 */
.av2-grid3 > li { display: flex; }
.av2-grid3 > li > * { flex: 1 1 auto; min-width: 0; }
/* li 自身がカード(.av2-box)のときは flex コンテナにしない。
   中身(タイトル・本文)が flex item になって横に割れるため。 */
.av2-grid3 > li.av2-box, .av2-grid4 > li.av2-box { display: block; }
.av2-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
/* li を挟んでもカード幅が縮まないようにする */
.av2-grid4 > li { display: flex; }
.av2-grid4 > li > .av2-ncard, .av2-grid4 > li > .av2-box { flex: 1; }

/* ---------- ヘッダー ---------- */

.av2-header { position: relative; z-index: 30; padding-top: 24px; }
.av2-header--overlay { position: absolute; top: 32px; left: 0; right: 0; padding-top: 0; }
body.admin-bar .av2-header--overlay { top: 64px; }
.av2-header__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.av2-hd { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: 14px; padding: 0 14px 0 28px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 2px 16px rgba(43,46,52,.12); }
/* 下層(sticky)ヘッダーの見た目は pages.css の .av2-header--sticky に集約する。
   ここに :not(--overlay) で書くと詳細度が勝ってしまい、カードに枠が残る。 */
.av2-hd__logo img { height: 50px; width: auto; display: block; }
.av2-hnav { display: flex; align-items: center; gap: 22px; }
.av2-hnav__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.av2-hnav__link { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--av2-ink-mid) !important; white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.av2-hnav__link:hover { color: var(--av2-brand) !important; }
.av2-hnav__ctas { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.av2-hnav__cta { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--av2-brand); color: #fff !important; font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background .2s ease; }
.av2-hnav__cta:hover { background: var(--av2-brand-hover); }
/* 狭い画面では短いラベルに切り替え、2つのCTAを残す。 */
.av2-hnav__cta-short { display: none; }

.av2-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--av2-line); background: #fff; cursor: pointer; padding: 0; }
.av2-burger__bars { display: flex; flex-direction: column; gap: 5px; }
.av2-burger__bars i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--av2-ink); }
.av2-burger__bars i:nth-child(2) { background: var(--av2-brand); }
.av2-burger__close { display: none; font-size: 16px; color: var(--av2-ink); line-height: 1; }
.av2-burger.is-open .av2-burger__bars { display: none; }
.av2-burger.is-open .av2-burger__close { display: block; }

/* visibility も切る: パネルは backdrop-filter を持つため合成レイヤーに昇格し、
   親の overflow: hidden + max-height: 0 だけでは枠線が透けて見えることがある。 */
.av2-menu { max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); overflow: hidden; pointer-events: none; transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s; }
/* LINEの追加行も表示し、低い画面ではメニュー内をスクロールできるようにする。 */
.av2-menu.is-open { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior-y: contain; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility 0s; }
.av2-menu__panel { background: rgba(255,255,255,.98); backdrop-filter: blur(8px); border-radius: 12px; margin-top: 8px; padding: 12px 8px; box-shadow: 0 12px 40px rgba(43,46,52,.16); display: flex; flex-direction: column; }
.av2-menu__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.av2-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #F0F2F3; font-size: 14px; font-weight: 700; color: var(--av2-ink-mid) !important; text-decoration: none; }
/* li でくるむと a はどれも :last-of-type になる(親ごとに 1 つずつのため)。
   最後の項目だけ線を消すには、li の位置で判定する。 */
.av2-menu__list li:last-child .av2-menu__link { border-bottom: 0; }
.av2-menu__link span { font-family: var(--av2-en); font-size: 12px; color: var(--av2-brand); }
.av2-menu__ctas { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 8px 8px; }
.av2-menu__ctas .av2-menu__cta--line { flex-basis: 100%; }
.av2-menu__cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; }
.av2-menu__cta--fill { background: var(--av2-brand); color: #fff !important; }
.av2-menu__cta--ghost { border: 1px solid var(--av2-brand); color: var(--av2-brand) !important; }

/* ---------- 01 ヒーロー ---------- */

.av2-hero { position: relative; }
/* background: 写真ロード完了までの間、スクリム(黒グラデ)だけが露出して
   「黒いマスク」に見えるのを防ぐプレースホルダー。overflow はズーム時のはみ出し保険。 */
.av2-hero__photo { --av2-hero-h: 840px; position: relative; height: var(--av2-hero-h); overflow: hidden; background: linear-gradient(180deg, #EAF5FB 0%, #BFE2F4 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 140px)); }
.av2-hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 斜めカットの白い三角を上からも描く保険 ─ iframe は合成レイヤーになるため
   親の clip-path が適用されないことがある(その場合ここが暗いまま残る)。 */
.av2-hero__photo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 140px; background: #fff; clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* 背景動画(YouTube iframe)。ポスター画像の上に重ね、再生準備ができたらフェードイン。
   幅・高さを 16:9 の「大きい方」に合わせて object-fit: cover 相当にする(黒帯を出さない)。 */
.av2-hero__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.av2-hero__video.is-ready { opacity: 1; }
.av2-hero__video iframe {
  position: absolute; top: 50%; left: 50%;
  /* scale: YouTube が動画の四隅に出すタイトル・チャンネル名・ロゴを枠外へ追い出す
     (パラメータでは消せないため、オーバースキャンさせる) */
  transform: translate(-50%, -50%) scale(1.32);
  width: max(100%, calc(var(--av2-hero-h) * 16 / 9));
  height: max(100%, 56.25vw);
  border: 0; pointer-events: none;
}
.av2-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,34,.12) 0%, rgba(15,23,34,.04) 45%, rgba(15,23,34,.30) 100%); pointer-events: none; }
.av2-hero__rail { position: absolute; right: 36px; bottom: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; }
.av2-hero__rail-text { writing-mode: vertical-rl; font-family: var(--av2-en); font-weight: 600; font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,.9); }
.av2-hero__rail-line { width: 1px; height: 64px; background: rgba(255,255,255,.7); }

/* padding/max-width は .av2-sec と同一 ─ ヒーローのコンテンツ左端と幅を
   下のセクション・ヘッダーカードに揃える(3者とも左端 70px / 幅 1140px)。 */
.av2-heroc { position: relative; z-index: 2; max-width: 1140px; margin: -480px auto 0; padding: 0 40px; }
.av2-hero__copy { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; line-height: 1; }
/* padding は左右と上下を分けて書く。ショートハンドで書くと、後ろのメディアクエリで
   上下だけ変えたいときに左右まで巻き込み、下の .av2-kern-* の詰めを打ち消してしまう
   (実測: 560px 以下で行頭「の詰めが消えていた)。左右は --av2-mpad だけで動かす。 */
.av2-hero__marker { --av2-mpad: 22px; background: var(--av2-brand); color: #fff; font-weight: 700; white-space: nowrap; padding-block: 16px; padding-inline: var(--av2-mpad); }
.av2-hero__marker--lg { font-size: clamp(26px, 3.6vw, 44px); box-shadow: 0 12px 40px rgba(15,23,34,.18); }
.av2-hero__marker--sm { --av2-mpad: 18px; font-size: clamp(16px, 2.1vw, 24px); padding-block: 12px; box-shadow: 0 12px 40px rgba(15,23,34,.14); }
/* 行頭「・行末」。、 の字形の空きを相殺し、各行の左右端を視覚的に揃える。
   実測では「の左空き 0.64em / 。の右空き 0.65em。ほぼ全量を詰めて、他の行の
   文字と左右端を合わせる。max() は padding が負になってレイアウトが崩れるのを
   防ぐガード(詰め量がフォントサイズを上回る小さい画面で効く)。 */
.av2-kern-open { padding-left: max(0px, calc(var(--av2-mpad) - 0.62em)); }
.av2-kern-close { padding-right: max(0px, calc(var(--av2-mpad) - 0.62em)); }
.av2-hero__marker--lg + .av2-hero__marker--sm { margin-top: 8px; }
.av2-hero__speak { margin-top: 64px; font-family: var(--av2-en); font-weight: 700; font-size: clamp(56px, 9.5vw, 116px); line-height: 1; letter-spacing: -0.045em; color: var(--av2-ink); text-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 36px rgba(255,255,255,.85), 0 0 72px rgba(255,255,255,.7), 0 0 120px rgba(255,255,255,.55); }
.av2-hero__speak span { color: var(--av2-brand); }
/* text-shadow: 背景動画・写真の明るい部分に重なっても読めるように(Speak out. と同じ手法)。
   白地の上では見えないので、斜めカットより下に来る場合も無害。 */
/* このページの H1。見出しの既定 margin / font-size を打ち消し、見た目はタグラインのまま。 */
.av2-hero__tagline { margin: 22px 0 0; font-size: 15px; line-height: 1.9; font-weight: 700; letter-spacing: 0.05em; color: var(--av2-body); text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7); }
/* 折り返しは span の切れ目(「｜」の後)だけで起きるようにする。
   素のテキストだと狭い画面で最後の1文字だけが次行に落ちる。 */
.av2-hero__tagline > span { display: inline-block; }

/* マーキー帯 */
@keyframes av2-marq { to { transform: translateX(-50%); } }
.av2-marquee { overflow: hidden; padding: 56px 0 0; pointer-events: none; }
.av2-marquee__track { display: flex; width: max-content; animation: av2-marq 42s linear infinite; }
.av2-marquee__track span { white-space: nowrap; font-weight: 900; font-size: 72px; line-height: 1.2; color: var(--av2-tint); padding-right: 64px; }

/* ---------- 02 Three weapons ---------- */

/* ---------- 使命(ヒーローと Three weapons のあいだの宣言) ----------
   縦の軸を 2 本に揃える。
   ・見出し … ヒーロー / 各セクションと同じコンテナ左端
   ・本文   … Three weapons の見出し 2 カラム(.av2-sechead--split: 1fr 1fr / gap 40px)の右カラム。
              すぐ下の「英語を喋りまくる毎日の、その先へ。」と左端が縦に揃う
   中央寄せにすると、左揃えのヒーローと Three weapons のあいだで軸が途切れて視線が迷う
   (実測: ほかの要素は左端 x=150、中央寄せのミッションは 394 / 429 / 643 とばらばらだった)。 */
/* なぜ「喋りまくる」のか ─ ヒーローの 3 文の答え。軸はヒーローの文字と同じ左端(x = コンテナの左)。
   縦の線は CTA の下から下りてきて見出しにつながる。左は主張と本文、右の箱は /three-months/ への導線。 */
.av2-method { max-width: 1140px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: stretch; }
.av2-method > .av2-method__line { grid-column: 1 / -1; }
.av2-method__line { display: block; width: 2px; height: 112px; margin: 24px 0 0 12px; background: linear-gradient(180deg, rgba(18,152,214,0) 0%, var(--av2-brand) 100%); transform-origin: top; }
.av2-method__eyebrow { align-items: center; }
.av2-method__en { font-family: var(--av2-en); font-weight: 600; font-size: 13px; letter-spacing: .16em; color: var(--av2-brand); }
.av2-method__jp { font-size: 12px; font-weight: 700; color: var(--av2-cap); }
/* 左は見出しの帯を箱の上端に、本文の最後の行を箱の下端にそろえる(余りは見出しと本文のあいだ)。 */
.av2-method__body { display: flex; flex-direction: column; margin-top: 10px; }
.av2-method__title { margin: 22px 0 0; font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.6; letter-spacing: .02em; color: var(--av2-ink); }
.av2-method__title > span { display: inline-block; }
.av2-method__text { margin: auto 0 calc((1em - 2.1em) / 2); padding-top: 20px; font-size: 15px; line-height: 2.1; color: var(--av2-body); }
.av2-method__card { margin-top: 10px; padding: 30px 32px 28px; border: 1px solid var(--av2-tint-border); border-radius: 16px; background: var(--av2-tint); }
.av2-method__num { font-family: var(--av2-en); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.01em; color: var(--av2-brand); }
.av2-method__num small { font-family: "Zen Kaku Gothic New", system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0; margin: 0 4px; }
.av2-method__num small:first-child { margin-left: 0; }
.av2-method__label { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--av2-ink); }
.av2-method__desc { margin: 14px 0 18px; font-size: 14px; line-height: 2.0; color: var(--av2-body); }

.av2-mission { position: relative; z-index: 0; max-width: 1140px; margin: 0 auto; padding: 112px 40px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.av2-mission > * { grid-column: 1 / -1; }
.av2-mission__eyebrow { align-items: center; }
.av2-mission__en { font-family: var(--av2-en); font-weight: 600; font-size: 13px; letter-spacing: .16em; color: var(--av2-brand); }
.av2-mission__title { margin: 30px 0 0; font-weight: 900; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.55; letter-spacing: .02em; color: var(--av2-ink); }
/* 行ごとの span を inline-block にして、語の途中で折り返さない(ヒーローのタグラインと同じ手法)。 */
.av2-mission__title > span { display: inline-block; }
/* 行頭の「は字面が 0.62em 右から始まる(実測)。1 行目「世」の字面(0.035em)に左端を揃える。 */
.av2-mission__open { margin-left: -0.585em; }
.av2-mission__mark { background: linear-gradient(transparent 60%, rgba(255,201,6,.6) 60%); }
.av2-mission__text { grid-column: 2; margin: 44px 0 0; font-size: 15px; line-height: 2.2; color: var(--av2-body); }
.av2-mission__text > span { display: inline-block; }

/* Three weapons はマーキーの直後なので、既定の余白(128px)から詰める。 */
.av2-weapons { padding-top: 72px; }
.av2-weapons .av2-ghost { top: 40px; }
.av2-wcard { position: relative; border-radius: 20px; border: 1px solid var(--av2-line); background: #fff; padding: 28px 28px 36px; transition: transform .25s ease, box-shadow .25s ease; }
.av2-wcard:hover { transform: translateY(-6px); box-shadow: var(--av2-shadow); }
.av2-wcard__no { position: absolute; top: 24px; right: 26px; display: flex; align-items: flex-start; gap: 6px; }
.av2-wcard__digits { font-family: var(--av2-en); font-weight: 700; font-size: 56px; line-height: 0.9; letter-spacing: -0.03em; color: var(--av2-brand); }
.av2-wcard__vert { writing-mode: vertical-rl; font-family: var(--av2-en); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; color: var(--av2-brand); }
.av2-wcard__img { width: min(62%, 200px); aspect-ratio: 1 / 1; margin: 52px auto 8px; }
/* display:block ─ img は既定で inline のため行ボックスの下に余白が生まれ、
   スロットが指定した aspect-ratio より数 px 縦長になる。 */
.av2-wcard__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.av2-wcard__body { margin-top: 28px; }
.av2-wcard__title { font-weight: 900; font-size: 24px; color: var(--av2-ink); margin-top: 10px; }
.av2-wcard__body p { margin: 12px 0 0; font-size: 14px; line-height: 2.0; }

/* ---------- 03 In the classroom ---------- */

.av2-class__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.av2-class__visual { position: relative; min-width: 0; }
.av2-class__tint { position: absolute; left: -24px; bottom: -24px; width: 65%; height: 45%; background: var(--av2-tint); border-radius: 16px; }
.av2-class__burst { position: absolute; top: -18px; right: -14px; z-index: 2; width: 40px; height: 40px; }
.av2-class__photo { position: relative; aspect-ratio: 4 / 5; width: 100%; }
.av2-class__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.av2-class__title { font-weight: 700; font-size: 28px; line-height: 1.6; color: var(--av2-ink); margin-top: 32px; }
.av2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.av2-stat { border-top: 2px solid var(--av2-brand); padding-top: 16px; }
.av2-stat__num { font-family: var(--av2-en); font-weight: 600; font-size: 52px; line-height: 1; color: var(--av2-brand); }
.av2-stat__label { font-size: 13px; font-weight: 700; color: var(--av2-ink-mid); margin-top: 8px; }
.av2-class__text { margin: 32px 0 0; font-size: 15px; line-height: 2.0; }

/* ---------- 04 Beyond the classroom ---------- */

.av2-beyond { padding: 152px 40px 104px; }
.av2-beyond .av2-ghost { top: 128px; }
.av2-pcard { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--av2-shadow-sm); display: flex; flex-direction: column; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.av2-pcard:hover { transform: translateY(-6px); box-shadow: var(--av2-shadow-lg); }
/* flex: 0 0 auto / min-height: 0 ─ flex アイテムの既定 min-height:auto は
   中の img の内在サイズを最小高さにしてしまい、aspect-ratio を上書きして
   カードごとに写真の高さがずれる(元画像が縦長なほど高くなる)。 */
.av2-pcard__img { aspect-ratio: 16 / 10; width: 100%; min-width: 0; flex: 0 0 auto; min-height: 0; }
.av2-pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2-pcard__body { padding: 28px; flex: 1; }
.av2-pcard__title { font-weight: 700; font-size: 20px; color: var(--av2-ink); margin-top: 12px; }
.av2-pcard__body p { margin: 12px 0 0; font-size: 14px; line-height: 2.0; color: var(--av2-body); }
.av2-pcard__body b { color: var(--av2-ink); }

/* ---------- 05 Stay in the city ---------- */

.av2-scard { border: 1px solid var(--av2-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.av2-scard:hover { transform: translateY(-6px); box-shadow: var(--av2-shadow); }
.av2-scard__img { aspect-ratio: 16 / 10; width: 100%; min-width: 0; flex: 0 0 auto; min-height: 0; }
.av2-scard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2-scard__body { padding: 28px; flex: 1; }
.av2-scard__title { font-weight: 700; font-size: 20px; color: var(--av2-ink); }
.av2-scard__body p { margin: 12px 0 0; font-size: 14px; line-height: 2.0; color: var(--av2-body); }

/* ---------- 06 Your path ---------- */

.av2-ncard { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--av2-line); border-radius: 12px; padding: 28px 24px; color: var(--av2-body) !important; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.av2-ncard:hover { transform: translateY(-6px); box-shadow: var(--av2-shadow); background: var(--av2-tint); }
.av2-ncard .av2-tag { font-size: 11px; }
.av2-ncard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.av2-ncard__title { font-weight: 700; font-size: 18px; color: var(--av2-ink); }
.av2-circle-arrow { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--av2-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--av2-en); font-size: 13px; }
.av2-ncard__sub { font-size: 13px; line-height: 1.9; }
.av2-path__all { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--av2-line); }
.av2-path__others { font-size: 13px; line-height: 1.9; color: var(--av2-cap); }
.av2-groupband { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; background: var(--av2-tint); border-radius: 12px; padding: 24px 28px; }
.av2-groupband__text { font-size: 13px; line-height: 1.9; }
.av2-groupband__text b { color: var(--av2-ink); }

/* ---------- 07 Pricing ---------- */

.av2-pricing { padding: 104px 40px; }
.av2-price { background: #fff; border-radius: 12px; padding: 32px 28px; box-shadow: var(--av2-shadow-sm); }
.av2-price__term { font-size: 13px; font-weight: 700; color: var(--av2-cap); }
.av2-price__num { font-family: var(--av2-en); font-weight: 600; font-size: 44px; line-height: 1.1; color: var(--av2-brand); margin-top: 12px; }
.av2-price__num span { font-size: 15px; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--av2-ink-mid); }
.av2-pricing__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.av2-pricing__note { font-size: 13px; line-height: 1.9; color: var(--av2-cap); max-width: 720px; }
.av2-pricing__foot .av2-uline { font-size: 14px; padding-bottom: 6px; }
.av2-pricing__foot .av2-uline__arrow { width: 22px; height: 22px; font-size: 11px; }

/* ---------- 08 Why cross the sea? ---------- */

.av2-why { position: relative; background: var(--av2-brand); clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%); margin-top: 128px; overflow: hidden; }
.av2-why__inner { padding: 176px 40px 120px; }
.av2-why .av2-eyebrow__num { color: rgba(255,255,255,.7); }
.av2-why .av2-sec__en { color: #fff; }
.av2-why .av2-sec__jp { color: rgba(255,255,255,.85); }
.av2-why__title { font-weight: 700; font-size: 28px; line-height: 1.6; color: #fff; margin-top: 40px; }
.av2-vs { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 12px; align-items: stretch; margin-top: 48px; }
.av2-vs__side { background: var(--av2-brand-hover); border-radius: 12px; padding: 40px 36px; }
.av2-vs__row { margin-top: 24px; }
.av2-vs__row + .av2-vs__row { margin-top: 28px; }
.av2-vs__num { font-family: var(--av2-en); font-weight: 600; font-size: 44px; line-height: 1.1; color: #fff; }
.av2-vs__num span { font-size: 14px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; }
.av2-vs__word { font-weight: 900; font-size: 26px; line-height: 1.3; color: #fff; }
.av2-vs__cap { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.8); margin-top: 6px; }
.av2-vs__mid { display: flex; align-items: center; justify-content: center; }
.av2-vs__mid span { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); display: inline-flex; align-items: center; justify-content: center; font-family: var(--av2-en); font-weight: 600; font-size: 22px; color: #fff; }
.av2-why__footnote { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 16px; }
.av2-ceo { position: relative; background: #fff; border-radius: 12px; padding: 48px 48px 40px; margin-top: 48px; }
.av2-ceo__quote { position: absolute; top: 8px; right: 32px; font-family: var(--av2-en); font-weight: 600; font-size: 120px; line-height: 1; color: var(--av2-tint); pointer-events: none; }
.av2-ceo p { position: relative; margin: 20px 0 0; font-size: 15px; line-height: 2.1; color: var(--av2-body); max-width: 800px; }
.av2-ceo p b { color: var(--av2-ink); }
.av2-ceo__credit { margin-top: 24px; text-align: right; font-size: 13px; line-height: 1.8; color: var(--av2-cap); }
.av2-ceo__credit b { color: var(--av2-ink-mid); }
.av2-why__close { margin-top: 80px; text-align: center; }
.av2-why__decl { font-weight: 900; font-size: 40px; line-height: 1.6; color: #fff; }
.av2-why__sub { font-size: 16px; font-weight: 700; line-height: 2.0; color: rgba(255,255,255,.9); margin-top: 12px; }
.av2-why__link { margin-top: 28px; }

/* ---------- 09 Voices ---------- */

.av2-vcard { position: relative; border: 1px solid var(--av2-line); border-radius: 12px; padding: 32px 28px; transition: transform .25s ease, box-shadow .25s ease; }
.av2-vcard:hover { transform: translateY(-6px); box-shadow: var(--av2-shadow); }
.av2-vcard__quote { position: absolute; top: 12px; right: 24px; font-family: var(--av2-en); font-weight: 600; font-size: 72px; line-height: 1; color: var(--av2-tint); pointer-events: none; }
.av2-vcard__head { display: flex; align-items: center; gap: 16px; }
.av2-vcard__face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.av2-vcard__name { font-weight: 700; font-size: 15px; color: var(--av2-ink); }
.av2-vcard__meta { font-size: 12px; color: var(--av2-cap); margin-top: 2px; }
.av2-vcard p { position: relative; margin: 20px 0 0; font-size: 14px; line-height: 2.0; }
.av2-vcard p b { color: var(--av2-ink); }
.av2-voices__more { display: flex; justify-content: flex-end; margin-top: 32px; }

/* ---------- 10 Trust ---------- */

.av2-trust__cards { margin-top: 56px; }
.av2-tcard { border: 1px solid var(--av2-line); border-radius: 12px; padding: 32px 28px; }
.av2-tcard__title { font-weight: 700; font-size: 22px; color: var(--av2-ink); margin-top: 14px; }
.av2-tcard__cap { font-size: 13px; line-height: 1.8; color: var(--av2-cap); margin-top: 6px; }
.av2-tcard__num { font-family: var(--av2-en); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--av2-brand); }
.av2-tcard__text { font-size: 13px; line-height: 1.8; color: var(--av2-body); margin-top: 10px; }
.av2-trust__nap { font-size: 12px; line-height: 1.9; color: var(--av2-cap); margin-top: 24px; }
.av2-trust__people { gap: 24px; margin-top: 48px; }
.av2-person { text-decoration: none; }
.av2-person__img { aspect-ratio: 4 / 5; width: 100%; min-width: 0; }
.av2-person__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.av2-person__role { font-weight: 700; font-size: 13px; color: var(--av2-brand); margin-top: 14px; }
.av2-person__name { font-weight: 700; font-size: 16px; color: var(--av2-ink); margin-top: 4px; }
.av2-person__note { font-size: 12px; line-height: 1.8; color: var(--av2-cap); margin-top: 4px; }

/* ---------- 11 Learn more ---------- */

.av2-learn { padding: 104px 40px; }
.av2-lpanel { background: #fff; border-radius: 12px; padding: 40px 36px; box-shadow: var(--av2-shadow-sm); }
.av2-lpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.av2-lpanel__title { font-weight: 700; font-size: 20px; color: var(--av2-ink); }
.av2-lpanel__note { font-size: 12px; color: var(--av2-cap); }
.av2-lpanel__list { display: flex; flex-direction: column; margin-top: 20px; }
.av2-lpanel__list a { font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--av2-ink-mid) !important; padding: 14px 0; border-top: 1px solid var(--av2-line); text-decoration: none; transition: color .2s ease; }
.av2-lpanel__list a:last-child { border-bottom: 1px solid var(--av2-line); }
.av2-lpanel__list a:hover { color: var(--av2-brand) !important; }
.av2-lpanel__more { margin-top: 24px; }

/* ---------- 12 Global Nobushi + CTA ---------- */

.av2-gn { padding: 128px 40px 96px; }
.av2-gn__word { font-family: var(--av2-en); font-weight: 600; font-size: 112px; line-height: 1.0; letter-spacing: -0.02em; margin-top: 20px; }
.av2-gn__outline { color: transparent; -webkit-text-stroke: 2px var(--av2-ink); }
.av2-gn__fill { color: var(--av2-brand); }
.av2-gn__sub { font-weight: 700; font-size: 14px; color: var(--av2-ink-mid); margin-top: 20px; }
.av2-cta-card { background: var(--av2-brand); border-radius: 12px; padding: 64px 48px; margin-top: 48px; text-align: center; }
.av2-cta-card__title { font-weight: 700; font-size: 28px; line-height: 1.6; color: #fff; }
.av2-cta-card__lead { font-size: 14px; line-height: 2.0; color: rgba(255,255,255,.9); margin-top: 8px; }
.av2-cta-card__group { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 24px; }
.av2-cta-card__group a { color: #fff !important; text-decoration: underline; }
.av2-cta-card__group a:hover { color: var(--av2-yellow) !important; }

/* ---------- フッター ---------- */

.av2-foot { position: relative; z-index: 0; background: var(--av2-footer); color: rgba(255,255,255,.75); overflow: hidden; }
.av2-foot__ghost { position: absolute; z-index: -1; left: 50%; bottom: -64px; transform: translateX(-50%); font-family: var(--av2-en); font-weight: 700; font-size: 280px; line-height: 1; letter-spacing: 0.04em; color: rgba(255,255,255,.035); white-space: nowrap; pointer-events: none; }
.av2-foot__inner { max-width: 1140px; margin: 0 auto; padding: 88px 40px 0; }
.av2-foot__grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 56px; align-items: start; }
/* ロゴはトップへのリンク。押せる範囲をロゴの大きさに留める */
.av2-foot__home { display: inline-block; }
.av2-foot__logo { margin-top: 16px; height: 48px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
.av2-foot__about { margin: 20px 0 0; font-size: 13px; line-height: 2.0; color: rgba(255,255,255,.7); }
.av2-foot__addr { margin-top: 24px; font-size: 12px; font-style: normal; line-height: 2.0; color: rgba(255,255,255,.5); }
.av2-foot__badges { display: flex; gap: 8px; margin-top: 20px; }
.av2-foot__badge { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.75); }
.av2-foot__label { font-family: var(--av2-en); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; color: var(--av2-yellow); }
.av2-foot__links { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.av2-foot__links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75) !important; text-decoration: none; transition: color .2s ease; }
.av2-foot__links a:hover { color: #fff !important; }
.av2-foot .av2-pill { margin-top: 28px; }
.av2-foot__ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 28px; }
.av2-foot__ctas .av2-pill { margin-top: 0; }
.av2-foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); margin-top: 72px; padding: 28px 0 36px; }
.av2-foot__legal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.av2-foot__copy { font-family: var(--av2-en); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,.45); }
.av2-foot__privacy { font-size: 11px; color: rgba(255,255,255,.45) !important; text-decoration: none; transition: color .2s ease; }
.av2-foot__privacy:hover { color: #fff !important; }
.av2-foot__tail { display: flex; align-items: center; gap: 16px; }
.av2-foot__slogan { font-family: var(--av2-en); font-weight: 600; font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,.45); }
.av2-totop { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-family: var(--av2-en); font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.av2-totop:hover { background: var(--av2-brand); border-color: var(--av2-brand); }

/* ---------- 共通の追従相談CTA ---------- */

.av2-float-cta {
  position: fixed; z-index: 25;
  inset: auto max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box; max-width: 480px; margin-inline: auto;
  display: flex; gap: 8px; padding: 6px; border-radius: 999px;
  background: #fff; box-shadow: 0 6px 32px rgba(0, 78, 168, .14), 0 1px 6px rgba(0, 78, 168, .06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s .3s;
}
.av2-float-cta[hidden] { display: none !important; }
.av2-float-cta.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* 2 つのボタンは同じ幅(flex-basis 0 で、文字の長さに左右されない)。高さはタップしやすい最小限 */
.av2-float-cta__link {
  box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 48px;
  display: flex; align-items: center; justify-content: center; padding: 8px 16px 9px;
  border-radius: 999px; background: var(--av2-brand); color: #fff !important;
  font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  text-decoration: none !important; white-space: nowrap; transition: background-color .2s ease;
}
.av2-float-cta__link:hover { background: var(--av2-brand-hover); }
.av2-float-cta__link--line { background: #06C755; }
.av2-float-cta__link--line:hover { background: #08B64F; }
.av2-float-cta__link:focus-visible { outline: 3px solid #004EA8; outline-offset: 3px; }
/* 96px = 帯の高さ 60(48 + 上下 6)+ 下の余白 20 + ゆとり 16 */
.av2-has-floating-cta { scroll-padding-bottom: 96px; }
@media (max-width: 640px) {
  .av2-float-cta { bottom: max(12px, env(safe-area-inset-bottom)); gap: 6px; padding: 5px; }
  .av2-float-cta__link { min-height: 44px; padding: 6px 10px 7px; font-size: clamp(13px, 3.7vw, 16px); letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
  .av2-float-cta, .av2-float-cta__link { transition: none; }
}
@media print {
  .av2-float-cta { display: none !important; }
}

/* ---------- 下層シェル(暫定) ---------- */

.av2-shell { padding: 48px 24px 96px; }

/* ============================================================
   レスポンシブ(デザインリファレンス helmet 準拠)
   ============================================================ */

@media (max-width: 1080px) {
  .av2-ghost { font-size: 140px; }
  .av2-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Speak out. は幅が狭いほど小さくなり、それに引きずられて斜めカットより上に外れる。
     ヒーロー全体を少し下げて、線に重なる位置を保つ(下の 840 / 560 も同じ理由)。 */
  .av2-heroc { margin-top: -460px; }
}

/* ナビ、ロゴ、2つのCTAの間隔を画面幅に合わせる。 */
@media (max-width: 1200px) {
  .av2-hd { height: 72px; padding: 0 12px 0 22px; gap: 14px; }
  .av2-hd__logo img { height: 44px; }
  .av2-hnav, .av2-hnav__list { gap: 16px; }
  .av2-hnav__cta { height: 44px; padding: 0 20px; font-size: 13px; }
}
@media (max-width: 1040px) {
  .av2-hd { height: 68px; padding: 0 10px 0 18px; gap: 10px; }
  .av2-hd__logo img { height: 40px; }
  .av2-hnav, .av2-hnav__list { gap: 12px; }
  .av2-hnav__link { letter-spacing: 0; }
  .av2-hnav__cta { height: 40px; padding: 0 16px; font-size: 12px; }
}

/* バーガーへの切替。相談ボタンはヘッダーに表示し続ける。 */
@media (max-width: 940px) {
  .av2-burger { display: inline-flex; }
  .av2-hnav__list { display: none; }
  .av2-hd { padding: 0 12px 0 20px; gap: 12px; }
  .av2-hnav { gap: 14px; }
  .av2-hnav__cta { height: 44px; padding: 0 22px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  .av2-sechead--split { grid-template-columns: 1fr; gap: 16px; }
  .av2-sechead__lead { padding-top: 0; }
  /* 使命の本文も Three weapons と同じ幅で 1 カラムに畳み、見出しの下に置く。 */
  .av2-mission { padding-top: 96px; }
  .av2-mission__text { grid-column: 1 / -1; margin-top: 28px; }
  /* 縦に積む: 主張と本文 → 箱。 */
  .av2-method { grid-template-columns: 1fr; }
  .av2-method__text { margin-bottom: 0; }
  .av2-method__card { margin-top: 32px; }
  .av2-method__card { max-width: 560px; }
  .av2-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av2-class__grid { grid-template-columns: 1fr; gap: 48px; }
  .av2-class__visual { max-width: 440px; }
}

@media (max-width: 840px) {
  .av2-hero__rail { display: none; }
  .av2-heroc { padding: 0 24px; margin-top: -440px; }
  .av2-hero__photo { --av2-hero-h: 760px; }
  .av2-marquee__track span { font-size: 44px; }
  .av2-sec { padding-left: 24px; padding-right: 24px; }
  .av2-mission { padding-left: 24px; padding-right: 24px; }
  .av2-method { padding-left: 24px; padding-right: 24px; }
  .av2-ghost { font-size: 96px; }
  .av2-ghost--why { font-size: 120px; }
  .av2-vs { grid-template-columns: 1fr; }
  .av2-grid2 { grid-template-columns: 1fr; }
  .av2-foot__grid { grid-template-columns: 1fr; gap: 44px; }
  .av2-foot__inner { padding-left: 24px; padding-right: 24px; }
  .av2-gn__word { font-size: 72px; }
}

@media (max-width: 640px) {
  .av2-grid3 { grid-template-columns: 1fr; }
  .av2-ctarow { flex-direction: column; align-items: stretch; }
  .av2-ctarow .av2-pill { width: 100%; justify-content: space-between; box-sizing: border-box; }
}

@media (max-width: 560px) {
  .av2-sec { padding-left: 20px; padding-right: 20px; }
  /* 見出しは 1 行 16 字。コンテンツ幅に対する比率で決め、320px 幅でも行の途中で割れないようにする
     (実測: 5.3vw では 320px 幅で左右の余裕が 1px ずつしかなかった。5vw で 9px ずつ)。 */
  .av2-mission { padding: 64px 20px 0; }
  .av2-method { padding: 0 20px; }
  .av2-method__line { height: 80px; margin-top: 20px; }
  .av2-method__title { font-size: clamp(19px, 5.4vw, 24px); }
  .av2-method__text { font-size: 14px; }
  .av2-method__card { padding: 24px 20px 22px; }
  .av2-method__num { font-size: 52px; }
  .av2-mission__title { font-size: clamp(16px, 5vw, 24px); }
  .av2-mission__text { font-size: 14px; }
  .av2-heroc { padding: 0 20px; margin-top: -320px; }
  .av2-hero__photo { --av2-hero-h: 680px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 90px)); }
  .av2-hero__photo::after { height: 90px; }
  /* 左右は --av2-mpad だけで動かす。padding-inline をここで書くと .av2-kern-* の詰めを打ち消す。 */
  /* clamp の下限は 320px 幅でも 1 行目(最長)がコンテンツ幅に収まる値にする。
     nowrap なので、はみ出すとページごと横スクロールする(実測: 下限 15px で 320px 幅が溢れた)。 */
  .av2-hero__marker--lg { --av2-mpad: 14px; font-size: clamp(13px, 4.5vw, 24px); padding-block: 12px; }
  .av2-hero__marker--sm { --av2-mpad: 12px; font-size: clamp(10px, 3.3vw, 17px); padding-block: 10px; }
  /* 既定の clamp は下限 56px で、狭い画面では幅が余っていた。
     コンテンツ幅に対する比率で決めて、端まで届く大きさにする(320px でも収まる係数)。 */
  .av2-hero__speak { margin-top: 48px; font-size: clamp(48px, 16vw, 64px); }
  .av2-ghost { font-size: 64px; }
  .av2-ghost--why { font-size: 80px; }
  .av2-gn__word { font-size: 56px; }
  .av2-ceo { padding: 28px 22px; }
  .av2-vs__side { padding: 28px 22px; }
  .av2-lpanel { padding: 28px 22px; }
  .av2-grid4 { gap: 12px; }
}

/* ============================================================
   アニメーション
   ・ヒーロー: ロード時にマーカー帯 → Speak out. → CTA の順で出現
   ・以降: スクロール連動リビール(.av2-reveal は JS が付与。JS 無効時は即表示)
   ・translate/opacity のみ使用 ─ カードの :hover transform と競合させない
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes av2-hero-in { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes av2-hero-up { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

  /* 写真自体はアニメーションさせない ─ scale 等で img がコンポジタレイヤーに
     昇格すると、親の clip-path(斜めカット)がアニメーション中に適用されず、
     切り取った領域に写真+スクリムが矩形のまま薄黒く描画されるため。 */
  .av2-hero__marker { opacity: 0; animation: av2-hero-in .55s cubic-bezier(.22,.61,.36,1) forwards; }
  .av2-hero__copy .av2-hero__marker:nth-child(1) { animation-delay: .05s; }
  .av2-hero__copy .av2-hero__marker:nth-child(2) { animation-delay: .18s; }
  .av2-hero__copy .av2-hero__marker:nth-child(3) { animation-delay: .34s; }
  .av2-hero__copy .av2-hero__marker:nth-child(4) { animation-delay: .44s; }
  .av2-hero__speak { opacity: 0; animation: av2-hero-up .8s cubic-bezier(.22,.61,.36,1) .5s forwards; }
  .av2-hero__tagline { opacity: 0; animation: av2-hero-up .7s cubic-bezier(.22,.61,.36,1) .66s forwards; }
  .av2-heroc .av2-ctarow { opacity: 0; animation: av2-hero-up .7s cubic-bezier(.22,.61,.36,1) .78s forwards; }

  .av2-reveal { transition:
    opacity .7s ease var(--av2-d, 0s),
    translate .7s cubic-bezier(.22,.61,.36,1) var(--av2-d, 0s),
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease; }
  .av2-reveal:not(.is-inview) { opacity: 0; translate: 0 28px; }

  /* ミッション見出しのマーカー: 見出しが出きるのを待って、左から右へ引く。
     .av2-reveal が付かない環境(JS 無効・動きを減らす設定)では、引いた状態で最初から出る。 */
  .av2-mission__title.av2-reveal .av2-mission__mark { background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .9s cubic-bezier(.22,.61,.36,1) .45s; }
  .av2-mission__title.av2-reveal:not(.is-inview) .av2-mission__mark { background-size: 0% 100%; }

  /* ヒーローから下りる縦の線: 上から下へ伸びる(位置は動かさない)。 */
  .av2-method__line.av2-reveal { transition: scale .9s cubic-bezier(.22,.61,.36,1) .1s; }
  .av2-method__line.av2-reveal:not(.is-inview) { opacity: 1; translate: none; scale: 1 0; }
}

/* ---------- モバイルヘッダー ---------- */
@media (max-width: 640px) {
  .av2-header--overlay { top: 16px; }
  .av2-header__inner { padding-inline: 12px; }
  .av2-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: 64px; padding-inline: 10px; gap: 8px; border-radius: 14px; }
  .av2-hd__logo img { width: clamp(88px, 28vw, 116px); max-width: 100%; height: auto; }
  .av2-hnav, .av2-hnav__ctas { gap: 6px; }
  .av2-hnav__cta { box-sizing: border-box; justify-content: center; width: clamp(60px, 16vw, 68px); height: 44px; padding: 0 0 2px; border-radius: 9px; font-size: 13px; line-height: 1.2; letter-spacing: .015em; }
  .av2-hnav__cta-full { display: none; }
  .av2-hnav__cta-short { display: inline; }
  .av2-burger { flex-shrink: 0; border: 0; border-radius: 9px; background: transparent; }
}