/* ローカル公開前の状態表示と外部フォントなしでの最小限の補正。 */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-VF.ttf?v=1") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { --font: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Yu Gothic", "Hiragino Sans", system-ui, sans-serif; --font-num: "Helvetica Neue", Arial, sans-serif; }
body { padding-bottom: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.local-notice { margin: 0; padding: 8px 24px; background: var(--warn-bg); color: #614000; font-size: 12px; }
.fixture-note { padding: 12px 16px; border-left: 2px solid var(--warn); background: var(--warn-bg); color: #614000; font-size: 14px; }
.pending-label { display: inline-block; font-size: 10px; font-weight: 400; margin-left: 4px; white-space: nowrap; }
a[aria-disabled="true"] { cursor: default; text-decoration: none; }
a[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.pick__card[aria-disabled] > .pending-label { grid-column: 1 / -1; }
/* 遷移先のない静的カード。通常説明は薄くせず、面と破線でリンクと区別する。 */
.pick__card--pending, .pick__card--pending:hover { background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--ink); box-shadow: none; transform: none; }
.pick__card--pending .pick__ico, .pick__card--pending .pick__go { color: var(--ink-2); }
.skip-link { position: fixed; top: 4px; left: 4px; z-index: 100; padding: 12px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ftr h2 { font-size: 12px; letter-spacing: .16em; margin-bottom: var(--s4); font-weight: 600; }
.ftr h2, .ftr__btm { color: rgba(255,255,255,.72); }
/* 修正メモ 2026-10-02: リンクは 44px の行、著作権表示は文字だけの高さなので、そのままだと著作権表示が上に浮く。
   821px 以上では縦の中央をそろえ、著作権表示を右端へ。820px 以下は下の規則（ホーム以外の縦中央）を参照。 */
@media (width > 820px) { .ftr__btm { align-items: center; } .ftr__copy { margin-left: auto; } }
/* 修正メモ 2026-10-02: PC の縦の余白が大きすぎる。節の上下（既定 最大 132px／法人 152px／個人 112px）の上限だけ下げる。
   下限と傾きは site.css のままなので、1022px 未満（スマホ・タブレット）は変わらず、幅に対して途中で減ることもない。
   トーン別の --sec は site.css で同じ詳細度の規則が持つので、同じ選択子で後から上書きする。 */
:root { --sec: clamp(72px, 9vw, 92px); }
body[data-tone="corp"] :is(.hero, .sec, .cta, .bar), .sec[data-tone="corp"] { --sec: clamp(84px, 10vw, 100px); }
body[data-tone="pop"] :is(.hero, .sec, .cta, .bar), .sec[data-tone="pop"] { --sec: clamp(64px, 8vw, 82px); }
/* 見出しの下（72px）は PC だけ 48px に詰める */
@media (min-width: 1024px) {
  .sec__head { margin-bottom: var(--s7); }
}
/* 820px 以下でも、1 列にしないページ（ホーム以外）は横並びのまま折り返すので、縦中央だけそろえる。
   ホーム（.ftr--single）は縦並びなので掛けない（掛けると横方向の中央へ寄る）。 */
@media (width <= 820px) { .ftr:not(.ftr--single) .ftr__btm { align-items: center; } }
.form a, .prose a[href] { display: inline-flex; align-items: center; min-height: 44px; }
.t a[href], .note a[href] { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.btn { max-width: 100%; white-space: normal; }
.hdr__in { height: auto; min-height: var(--head-h); }
.hdr__act { min-width: 0; }
.hdr__act .btn { white-space: normal; flex-wrap: wrap; }
.hdr__nav { gap: 14px; min-width: 0; flex-wrap: wrap; }
.hdr__nav > a { white-space: normal; }
.hero__in, .case__body { min-width: 0; max-width: 100%; }
.hero__title { overflow-wrap: anywhere; }
.case { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.tag { max-width: 100%; white-space: normal; }
/* 講座の金額タイルは文字拡大に合わせて列数を減らし、数字を切らない。 */
[data-tone="pop"] .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }
@media (max-width: 720px) { .case { grid-template-columns: minmax(0, 1fr); } }
.hdr__drop-menu a { white-space: normal; min-width: 44px; min-height: 44px; }
.js .hdr__drop-label, html:not(.js) .hdr__drop-btn { display: none; }
html:not(.js) .hdr__drop-menu { display: block; position: static; }
.js .hdr__drop:hover .hdr__drop-menu, .js .hdr__drop:focus-within .hdr__drop-menu { display: none; }
.js .hdr__drop-btn[aria-expanded="true"] + .hdr__drop-menu { display: block; }
@media (max-width: 1023px) {
  .hdr__nav[data-open="1"] { max-height: calc(100dvh - var(--head-h)); overflow-y: auto; }
  .hdr__nav--light[data-open="1"] a:focus-visible, .hdr__nav--light[data-open="1"] button:focus-visible { outline-color: var(--cta); box-shadow: none; }
  .js .hdr__nav[data-open="1"] .hdr__drop-btn[aria-expanded="false"] + .hdr__drop-menu { display: none; }
  html:not(.js) .hdr__in { height: auto; flex-wrap: wrap; }
  html:not(.js) .hdr__nav { display: flex; flex-wrap: wrap; width: 100%; order: 5; margin: 0; padding: 12px 0; }
  html:not(.js) .hdr__toggle { display: none; }
}
@media (max-width: 620px) {
  .form { padding: 24px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .about-quote, .about-name { padding: 20px; }
  .voice__head { flex-wrap: nowrap; align-items: flex-start; }
  .voice__who { min-width: 0; overflow-wrap: anywhere; }
  .voice__nowrap { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* トップの背景動画（2026-09-25）。承認済みの試作 hero-home-video/preview.html の「参考寄り（強）」を移植。
   効果は映像の層（動画・幕・.hero__crt）にだけ掛け、見出し（.hero__in）には掛けない。外部読込なし。
   動画が読めない・動きを減らす設定でJSが無い場合も、同じポスターを背景に敷いておく。 */
.hero--full { background: #1b1a18 url("video/hero-home-poster.webp") center / cover no-repeat; }
video.hero__bg { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.1) brightness(.95); }
/* 見出しの行だけ帯状に濃くする（2026-09-25）。承認値の横グラデーションだけでは、明るいフレームで見出しが 3:1 を割った
   （ポスター 2.89、全フレーム最小 1.92。tests/hero_video.cjs）。上下の明るさは承認値のまま残す。 */
.hero--full .hero__veil { background: linear-gradient(to bottom, rgba(20,19,18,0) 22%, rgba(20,19,18,.42) 36%, rgba(20,19,18,.42) 64%, rgba(20,19,18,0) 78%), linear-gradient(to right, rgba(20,19,18,.50) 0%, rgba(20,19,18,.34) 45%, rgba(20,19,18,.24) 100%); }
.hero__crt { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__crt::before, .hero__crt::after { content: ""; position: absolute; inset: 0; }
/* 縦の細い走査線（1px／3px 周期） */
.hero__crt::before { background: repeating-linear-gradient(to right, rgba(0,0,0,.55) 0 1px, transparent 1px 3px); }
/* 周辺減光とごく薄いノイズ。ちらつきと砂の揺れだけ動かす */
.hero__crt::after {
  background: radial-gradient(ellipse 75% 70% at center, transparent 35%, rgba(0,0,0,.20) 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIC4wOSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  animation: hero-crt-flicker 4s steps(40) infinite, hero-crt-grain .6s steps(3) infinite;
}
/* ゆっくり下へ流れる明るい帯。試作と同じく減光・ノイズより上、文字より下 */
.hero__roll {
  position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.07) 50%, transparent);
  animation: hero-crt-roll 9s linear infinite;
}
@keyframes hero-crt-flicker { 0%, 100% { opacity: .96; } 50% { opacity: 1; } 51% { opacity: .93; } 52% { opacity: 1; } }
@keyframes hero-crt-grain { 0% { background-position: center, 0 0; } 33% { background-position: center, -40px 25px; } 66% { background-position: center, 30px -35px; } 100% { background-position: center, 0 0; } }
@keyframes hero-crt-roll { to { transform: translateY(440%); } }
/* 背景の動きを止めるボタン（WCAG 2.2.2）。最初の画面で見えるよう右上（独立レビュー N1）。JS が無いと効かないので隠す */
.hero__pause { position: absolute; top: var(--s5); right: var(--s5); z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(20,19,18,.55); color: #fff; cursor: pointer; }
.hero__pause:hover { background: rgba(20,19,18,.8); }
.hero__pause .ico { width: 18px; height: 18px; }
.hero__pause-play, .hero--full.is-still .hero__pause-stop { display: none; }
.hero--full.is-still .hero__pause-play { display: inline; }
.hero--full.is-still .hero__crt::after, .hero--full.is-still .hero__roll, .hero--full.is-still .hero__scroll-ico { animation-play-state: paused; }
html:not(.js) .hero__pause { display: none; }
/* 紹介の短いループ動画（2026-09-25）。止めるボタンは右下、JS が無いと効かないので隠す */
.motion { position: relative; background: #1b1a18 url("video/intro-tailoring-poster.webp") center / cover no-repeat; border-radius: var(--r3); }
.motion video { background: transparent; }
.motion-pause { position: absolute; right: var(--s3); bottom: var(--s3); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(20,19,18,.55); color: #fff; cursor: pointer; }
.motion-pause:hover { background: rgba(20,19,18,.8); }
/* フォーカス枠は白＋墨の二重。暗い動画の上でも明るい面の上でも見える（独立レビュー3 B1） */
.motion-pause:focus-visible, .hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.motion-pause .ico { width: 18px; height: 18px; }
.motion-pause__play, .motion.is-still .motion-pause__stop { display: none; }
.motion.is-still .motion-pause__play { display: inline; }
html:not(.js) .motion-pause { display: none; }
/* スマホは人物の集まる右寄りを見せ、走査線を少し弱める */
@media (max-width: 620px) {
  .hero--full { background-position: 38% center; }
  video.hero__bg { object-position: center; }   /* スマホは人物中心に縦へ切り抜いた軽い版（hero-home-sp）を読む */
  .hero__crt::before { background: repeating-linear-gradient(to right, rgba(0,0,0,.45) 0 1px, transparent 1px 3px); }
}
/* 動きを減らす設定: 効果の動きは上の全体規則で止まる。帯は消し、JSが無く動画を止められない場合は動画を隠してポスターだけを見せる */
@media (prefers-reduced-motion: reduce) {
  .hero__roll { display: none; }
  html:not(.js) video.hero__bg { visibility: hidden; }
  html:not(.js) .motion video { visibility: hidden; }
}

/* 修正メモ 2026-10-02 17:06 ──────────────────────────────
   遷移先がまだ無い導線は札を外し、押しても何も起きないまま置く（遷移先はあとで足す）。
   上の a[aria-disabled] は禁止カーソル（not-allowed）をやめ、ふつうの矢印にした。 */
/* パンくずの帯: 上の余白をなくし、押せる大きさ（44px）の行の上下中央に文字を置く */
.crumbs-bar { padding: 0; }
.crumbs { min-height: 44px; }
/* 獲得面の見出し: PC では左右 2 列をまたいで 1 行に置き、下に説明と画像を並べる */
.hero__head { margin-bottom: var(--s7); }
.hero__head .hero__title { margin-bottom: 0; }
/* 「を、」だけが次の行の頭に来ないよう、ひとかたまりで折る */
.hero__keep { display: inline-block; }
/* 特商法の代表者名（画像）を文字の高さにそろえる */
.legal-name { display: inline-block; vertical-align: middle; height: 1.5em; width: auto; }
@media (min-width: 1024px) {
  /* 入りきらない長い見出しだけ、文字を少し小さくする（school は 2 列またぎでも 48px で 1,165px 要る） */
  :root body .hero h1.hero__title--long { font-size: clamp(26px, 3vw, 41px); }
  .about-idea__title { max-width: none; }
  .about-idea__title { font-size: 36px; }  /* 820px の 36px と同じ。PC の見出し 42px だと 2 行に折れる */
  /* 本文幅（720px）の見出しの箱を、h1 だけ外す（説明文は 720px のまま） */
  .sec__head:has(> h1) { max-width: none; }
  .sec__head:has(> h1) > :not(h1) { max-width: 720px; }
  .hero--full .hero__title { font-size: clamp(32px, 4.8vw, 64px); }
}
/* 幅 1100px 以上では、修正メモのタブ（右上・y 24〜130）に停止ボタンが隠れないよう、タブの下へ下げる */
@media (min-width: 1100px) { .hero__pause { top: 80px; } }