/* 本体テーマと同じ書体（WordPress化でテーマCSSに載る場合、この import は削除可） */
  @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
  /*
    ── 設計方針 ──
    参考：recruit.vision-net.co.jp/top-message の「1ブロック=1スクロール」縦長構成。
    大きなビジュアル → 見出し＋本文が交互に続く、ゆったりした読み物レイアウト。
    全体を約8スクリーンに区切る（各 .ep-scene が概ね1画面分の余白を持つ）。
    見出し・年表の色は既存HPのブルー #315BA3 / #27528C に統一。
    ヘッダー/フッターは既存HP共通パーツを差し込む前提（本文セクションのみ実装）。
  */
  :root{
    --ink:#282828;
    --sub:#7A828C;
    --line:#DCE3EC;
    --blue:#315BA3;        /* 既存HPの見出し・リンク青 */
    --blue-d:#27528C;      /* 既存HPの濃い青 */
    --blue-soft:#F2F7FF;   /* 淡い青（背景アクセント） */
    --bg:#ffffff;
    /* 面で敷く地色。#F8FAFD（薄い青）は本番サイトのどこにも無い色だったので、
       共通のベージュに揃える。theme.css で9か所（.topics / .repairFlow /
       .supportMainBlock / 採用・キャリアの帯）に使われている値。
       TOPページのお客様の声も同じ #F6F1ED。 */
    --bg-soft:#F6F1ED;
    --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
    --sans:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; /* サイトは明朝一本のため serif に集約 */
    --maxw:1080px;
    --readw:720px;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--sans);line-height:2.0;font-size:16px;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .read{max-width:var(--readw);margin-left:auto;margin-right:auto;}

  /* ══ 共通：シーン（1スクロール単位） ══ */
  .ep-scene{padding:64px 0;}
  .ep-scene.tight{padding:52px 0;}
  .ep-scene.soft{background:var(--bg-soft);}
  .eyebrow{font-size:12px;letter-spacing:.32em;color:var(--blue);text-transform:uppercase;
    display:block;margin-bottom:14px;font-weight:700;}
  .ep-scene h2{font-family:var(--serif);font-size:clamp(22px,3.2vw,30px);font-weight:600;
    line-height:1.6;color:var(--blue-d);margin:0 0 28px;}
  /* 副題。ダッシュで繋げず、級数と色を落として下に添える */
  .ep-sub{display:block;margin-top:10px;font-family:var(--sans);font-size:14px;
    font-weight:400;line-height:1.8;letter-spacing:.04em;color:var(--sub);}
  .ep-scene p{margin:0 auto 20px;}
  .ep-scene .read p:last-child{margin-bottom:0;}

  /* ══ 1. ヒーロー（1スクリーン目） ══ */
  .hero{position:relative;overflow:hidden;background-color:#dce6f2;
    width:100%;aspect-ratio:1920/700;max-height:62vh;
    background-repeat:no-repeat;background-position:center center;background-size:cover;
    background-image:url("../img/ceo.jpg");
    background-image:image-set(url("../img/ceo.webp") type("image/webp"), url("../img/ceo.jpg") type("image/jpeg"));}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 34%,rgba(20,35,60,.06) 100%);}



  /* ══ 2. メッセージ（1スクリーン） ══ */
  /* ══ 2. メッセージ（ラクー方式：見出し→本文→署名） ══ */
  .msg-head{text-align:center;margin-bottom:8px;}
  .msg-head .en-lg{display:block;font-size:13px;letter-spacing:.34em;color:var(--blue);
    font-weight:700;text-transform:uppercase;margin-bottom:12px;}
  .msg-head h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);font-weight:600;color:var(--blue-d);margin:0;}
  .msg-head .lead-line{display:block;font-size:clamp(16px,2.2vw,19px);color:var(--ink);
    font-weight:600;margin-top:20px;line-height:1.7;}
  .msg-body{max-width:var(--readw);margin:36px auto 0;}
  .msg-body p{margin:0 0 20px;}
  /* 署名：本文の後に写真＋氏名 */
  /* 署名：顔アイコンは廃止し、氏名＋自筆サインでまとめる */
  .msg-sign{display:flex;flex-direction:column;align-items:flex-end;gap:14px;
    max-width:var(--readw);margin:44px auto 0;}
  .msg-sign .sign-text{text-align:right;}
  .msg-sign .sign-text .role{font-size:14px;color:var(--sub);margin:0;letter-spacing:.06em;line-height:1.8;}
  /* 氏名（文字）。自筆サイン画像が入るまでの表示。
     本文より一段大きい明朝で、肩書きの下に置く。姓と名の間は半角空き（本文と同じ表記） */
  .msg-sign .sign-text .nm{font-family:var(--serif);font-size:22px;font-weight:600;
    letter-spacing:.14em;color:var(--ink);margin:6px 0 0;line-height:1.5;}
  /* 自筆サイン（画像差し替え枠） */
  .msg-sign .sign-auto{width:300px;max-width:72vw;}
  .msg-sign .sign-auto img{width:100%;height:auto;display:block;}
  .msg-sign .sign-auto.placeholder{border:1px dashed #b9c6da;border-radius:0;background:var(--blue-soft);
    color:#7d8fa8;font-size:12.5px;line-height:1.9;text-align:center;padding:22px 14px;}
  @media(max-width:560px){
    .msg-sign{align-items:center;}
    .msg-sign .sign-text{text-align:center;}
  }

  /* ══ エピソード見出しの通し番号 ══ */
  .ep-index{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap;}
  .ep-index .era{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sub);
    background:var(--blue-soft);border-radius:0;padding:3px 10px;}
  .ep-index{display:flex;align-items:baseline;gap:16px;margin-bottom:6px;}
  .ep-index .no{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--blue);line-height:1;opacity:.9;}
  .ep-index .label{font-size:12px;letter-spacing:.24em;color:var(--sub);text-transform:uppercase;}

  /* ══ 動画（ショート縦型を本文と横組み） ══ */
  .ep-media{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start;
    max-width:var(--maxw);margin:0 auto;}
  .ep-media .ep-text{max-width:560px;}
  .ep-media .ep-text .ep-index{margin-bottom:6px;}
  .ep-media.reverse{grid-template-columns:auto 1fr;}
  .ep-media.reverse .short-item{order:-1;}
  .short-item{width:296px;max-width:80vw;}
  .short-frame{position:relative;aspect-ratio:9/16;border-radius:0;overflow:hidden;background:#000;
    box-shadow:0 14px 40px rgba(39,82,140,.12);}
  .short-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .short-cap{font-size:12.5px;color:var(--sub);margin-top:12px;text-align:center;line-height:1.7;}
  .short-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--blue);
    background:var(--blue-soft);border-radius:999px;padding:4px 12px;margin-bottom:14px;}
  @media(max-width:820px){
    .ep-media,.ep-media.reverse{grid-template-columns:1fr;gap:32px;justify-items:center;}
    .ep-media .ep-text{max-width:100%;}
    .ep-media.reverse .short-item{order:0;}
  }

  /* ══ 本文＋横長画像（写真・イラスト）の横組み ══ */
  .ep-figure{flex:0 0 auto;width:360px;max-width:82vw;}
  .ep-figure img{width:100%;height:auto;display:block;border-radius:0;
    box-shadow:0 10px 30px rgba(39,82,140,.10);background:#fff;}
  .ep-figure figcaption{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.7;text-align:center;}
  .ep-media.has-figure{align-items:center;}
  /* 画像未確定セクションの仮枠 */
  .ep-figure.placeholder{width:360px;max-width:82vw;aspect-ratio:4/3;border:2px dashed #b9c6da;
    border-radius:0;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;
    text-align:center;padding:22px;color:#7d8fa8;font-size:13px;line-height:1.9;}
  @media(max-width:820px){
    .ep-figure{width:100%;max-width:420px;}
    .ep-figure.placeholder{width:100%;max-width:420px;}
  }

  /* ══ 全幅背景のエピソード（Episode 02） ══
     写真を全幅に敷き、右から白のグラデーションを重ねて本文を読ませる。
     他のエピソードが 1080px の2カラムで揃っているため、ここだけ幅と
     見せ方を変えて、読み進むリズムに区切りをつける。 */
  /* 写真は左の一部だけなので、その外側は白。読み込み中の下地も兼ねる */
  .ep-bleed{position:relative;padding:0;overflow:hidden;background:#fff;}
  /* 写真は全幅に敷かない。左寄せで幅を絞ることで、その分だけ縮んで「引き」になる。
     右側はどのみち白で潰す領域なので、そこまで写真を伸ばす意味がない。
     幅の上限をpxでも切っているのは、画面が広いほど写真が拡大されるのを止めるため。
     右端は mask で写真自体をフェードさせ、白地との境に硬い線が出ないようにする。 */
  .ep-bleed::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:0;
    width:min(74%,1180px);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 100%);
            mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 100%);
    background-image:url("../img/ep02-oversea.jpg");
    background-image:image-set(url("../img/ep02-oversea.webp") type("image/webp"), url("../img/ep02-oversea.jpg") type("image/jpeg"));
    background-size:cover;background-position:center center;background-repeat:no-repeat;}
  /* 右側だけ白を強め、左は写真を見せる */
  .ep-bleed::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.35) 46%,
      rgba(255,255,255,.80) 58%,
      #fff 68%);}
  .ep-bleed .wrap{position:relative;z-index:2;}
  .ep-bleed-inner{display:flex;justify-content:flex-end;
    min-height:clamp(420px,44vw,560px);align-items:center;padding:72px 0;}
  .ep-bleed .ep-text{max-width:500px;}
  /* 1100px以下は本文の左端が写真側に寄ってくるので、写真のフェードを早めに始めて
     見出しが濃い部分に乗らないようにする（820px以下は重ねない別レイアウトに切替）。 */
  @media(min-width:821px) and (max-width:1100px){
    .ep-bleed::before{width:min(68%,760px);
      -webkit-mask-image:linear-gradient(to right,#000 0,#000 42%,transparent 100%);
              mask-image:linear-gradient(to right,#000 0,#000 42%,transparent 100%);}
  }
  @media(max-width:820px){
    /* 狭い画面では重ねない。上に写真の帯、下は白地に本文。
       重ねると見出しが写真の濃い部分に乗って読めなくなるため。 */
    .ep-bleed{background:#fff;}
    /* SPは重ねず「上に写真の帯・下に本文」なので、左寄せと右フェードは解除して
       画面幅いっぱいの帯に戻す（PC用の width / mask をここで打ち消す）。 */
    .ep-bleed::before{bottom:auto;height:clamp(200px,52vw,260px);
      width:100%;-webkit-mask-image:none;mask-image:none;}
    .ep-bleed::after{bottom:auto;height:clamp(200px,52vw,260px);
      background:linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.06) 58%,
        rgba(255,255,255,.86) 86%,
        #fff 100%);}
    .ep-bleed-inner{display:block;min-height:0;
      padding:calc(clamp(200px,52vw,260px) + 28px) 0 8px;}
    .ep-bleed .ep-text{max-width:100%;}
  }

  /* ══ 全幅背景のエピソード・右配置（Episode 05） ══
     完成イメージは白地のイラストなので、節の地色（白）と溶けて1枚に見える。
     枠もキャプションも置かず、画像そのものを背景として大きく右に流す。 */
  .ep-bleed-r{position:relative;overflow:hidden;background:#fff;}
  /* 画面の右端ではなく本文グリッド（1080px）の右端を基準にする。
     こうしないと画面が広いほど画像だけが右へ流れ、本文との間に穴が空く。
     60px ぶんだけグリッドの外へはみ出させて、背景らしい抜け感を出す。 */
  .ep-bleed-r::before{content:"";position:absolute;top:50%;
    right:max(0px, calc((100% - min(100%, 1080px)) / 2 - 60px));transform:translateY(-50%);
    width:min(56%,660px);aspect-ratio:900/639;z-index:0;pointer-events:none;
    background-image:url("../img/ep05-bisei.jpg");
    background-image:image-set(url("../img/ep05-bisei.webp") type("image/webp"), url("../img/ep05-bisei.jpg") type("image/jpeg"));
    background-size:contain;background-position:right center;background-repeat:no-repeat;}
  .ep-bleed-r .wrap{position:relative;z-index:1;}
  .ep-bleed-r-inner{display:flex;justify-content:flex-start;align-items:center;
    min-height:clamp(440px,40vw,600px);padding:72px 0;}
  .ep-bleed-r .ep-text{max-width:min(36%,420px);}
  @media(max-width:900px){
    /* 重なると文字が読めなくなるので、上に本文・下に画像へ切り替える */
    .ep-bleed-r::before{position:static;transform:none;display:block;
      width:100%;max-width:560px;margin:0 auto;}
    .ep-bleed-r-inner{display:block;min-height:0;padding:56px 0 0;}
    .ep-bleed-r .ep-text{max-width:100%;margin-bottom:8px;}
  }

  /* ══ 漫画 試し読み ══ */
  .manga-outer{max-width:var(--maxw);margin:0 auto;}

  /* 漫画と書籍をひとまとまりに。書籍が唐突に現れないよう共通の見出しを置く */
  .reading-set{max-width:var(--maxw);margin:56px auto 0;}
  /* .mission の text-align:center を継承すると、罫線だけ左に残って文字が中央に寄る。
     この位置は中央揃えの節なので、罫線は使わず中央のまま細い線を下に敷く。 */
  .reading-ttl{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--blue-d);
    letter-spacing:.16em;margin:0 0 24px;line-height:1.5;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:16px;}
  .reading-ttl::before,.reading-ttl::after{content:"";width:34px;height:1px;
    background:var(--blue);opacity:.4;}
  .reading-lead{text-align:center;font-size:14px;color:var(--sub);margin:0 0 26px;line-height:1.9;}
  .reading-set .book{margin:24px auto 0;}
  .manga{background:#fff;border:1px solid var(--line);border-radius:0;padding:22px 24px 18px;margin-top:0;
    box-shadow:0 6px 24px rgba(39,82,140,.06);}
  .manga h4{font-family:var(--serif);font-size:18px;margin:0 0 4px;font-weight:600;color:var(--blue-d);}
  .manga>p{font-size:13.5px;color:var(--sub);margin:0 0 14px;line-height:1.85;}
  /* 埋め込み：1ページ表示＋進む/戻る */
  .manga-embed{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 6px;}
  .manga-embed .me-nav{flex:0 0 44px;align-self:center;height:44px;border-radius:50%;border:1px solid var(--line);
    background:#fff;color:var(--blue);font-size:20px;cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:background .15s,color .15s;}
  .manga-embed .me-nav:hover:not(:disabled){background:var(--blue);color:#fff;}
  .manga-embed .me-nav:active:not(:disabled){transform:scale(.92);}
  .manga-embed .me-nav:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
  .manga-embed .me-nav:disabled{opacity:.3;cursor:default;}

  /* 送り・閉じるの記号は字形（‹ › ×）をやめて図形で描く。
     字形はインクが送り幅の中で偏っていて（‹ は右寄り）、
     ボタンの中央に置いても中心がずれて見える。書体でずれ方も変わる。
     24×24の枠に、上下・左右とも中心12で対称になるよう引いてある。 */
  .navArw{width:17px;height:17px;display:block;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;}
  .mv-nav .navArw{width:20px;height:20px;stroke-width:1.7;}
  .mv-close .navArw{width:18px;height:18px;stroke-width:1.7;}
  .manga-embed .me-page{flex:1 1 auto;width:auto;max-width:520px;aspect-ratio:1400/993;
    border:1px solid var(--line);border-radius:0;overflow:hidden;cursor:pointer;position:relative;
    padding:0;background:#f4f6f9;box-shadow:0 6px 20px rgba(39,82,140,.07);transition:box-shadow .15s;}
  .manga-embed .me-page:hover{box-shadow:0 10px 28px rgba(39,82,140,.13);}
  .manga-embed .me-page:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
  .manga-embed .me-page img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
  .manga-embed .me-pgno{position:absolute;left:8px;bottom:8px;z-index:3;font-size:11px;font-weight:700;
    color:#fff;background:rgba(39,82,140,.85);border-radius:0;padding:3px 9px;letter-spacing:.04em;}
  /* ホバー（およびキーボードフォーカス）で暗幕を掛け、中央に操作を出す。
     常時のヒント文を置かずに済むよう、必要なときだけ意図を示す。 */
  .manga-embed .me-page .zoom{position:absolute;inset:0;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:rgba(18,26,40,.52);color:#fff;
    font-size:13.5px;letter-spacing:.1em;font-weight:600;
    opacity:0;transition:opacity .22s;pointer-events:none;}
  .manga-embed .me-page .zoom::before{content:"⤢";display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
    font-size:17px;font-weight:400;}
  .manga-embed .me-page:hover .zoom,
  .manga-embed .me-page:focus-visible .zoom{opacity:1;}
  /* 触屏では hover が残り続けるので出さない */
  @media(hover:none){ .manga-embed .me-page .zoom{display:none;} }
  .manga .m-hint{font-size:12px;color:var(--sub);margin:12px 0 0;text-align:center;letter-spacing:.04em;}
  .manga .m-hint a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(49,91,163,.35);padding-bottom:2px;}
  .manga .m-hint a:hover{border-bottom-color:var(--blue);}
  .manga .m-btn{display:inline-block;margin-top:16px;font-size:13px;color:#fff;text-decoration:none;
    background:var(--blue);border:1px solid var(--blue);border-radius:0;padding:9px 24px;transition:.15s;font-weight:600;}
  .manga .m-btn:hover{background:var(--blue-d);border-color:var(--blue-d);}
  @media(max-width:640px){
    /* 送りボタンが横幅の1/3を占めてしまうため、画像の上に重ねる */
    .manga-embed{gap:0;position:relative;}
    .manga-embed .me-page{width:100%;max-width:100%;}
    .manga-embed .me-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
      flex-basis:40px;width:40px;height:40px;font-size:17px;
      background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(39,82,140,.22);}
    .manga-embed .me-nav:active:not(:disabled){transform:translateY(-50%) scale(.92);}
    .manga-embed #meNext{left:6px;}
    .manga-embed #mePrev{right:6px;}
    .manga{padding:24px 16px;}
  }

  /* 漫画の下：資料請求CTA */
  .manga-cta{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:center;}
  .manga-cta .cta-lead{font-family:var(--serif);font-size:15.5px;color:var(--blue-d);margin:0 0 14px;font-weight:600;}
  .manga-cta .cta-sub{font-size:13px;color:var(--sub);margin:0 0 16px;line-height:1.9;}
  /* 「読みもの」の2つのボタン（冊子・書籍）は同じ見た目にする。
     片方が青ベタで大きく中央、もう片方が細い線で小さく左だと、
     並んだときに別の種類の操作に見えてしまう。 */
  .manga-cta .cta-btn,
  .book-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
    background:var(--blue);color:#fff;text-decoration:none;
    font-weight:700;font-size:15px;letter-spacing:.04em;border-radius:0;padding:14px 34px;
    box-shadow:0 8px 22px rgba(49,91,163,.16);transition:.15s;}
  .manga-cta .cta-btn:hover,
  .book-btn:hover{background:var(--blue-d);}
  /* 外部リンクの記号。枠から矢印が出る形で「このサイトの外へ出る」ことを示す。
     記号だけでは行き先は分からないので、必ず下の .btn-note と対にして使う。 */
  .extArw{width:14px;height:14px;display:block;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
  /* ボタンの下に置く、行き先の注記。
     .book 側は .book p{margin:0} が先に効いてしまうので、両方を名指しする。 */
  .manga-cta .btn-note,
  .book .btn-note{font-size:11.5px;line-height:1.75;letter-spacing:.02em;
    color:var(--sub);margin:12px 0 0;}

  /* ══ 漫画ビューア（モーダル） ══ */
  /* 高さは vh ではなく「上下バーを引いた残り」で決める。
     画面が低い端末でも操作バーが画像に重ならない。 */
  .mv-overlay{position:fixed;inset:0;z-index:1000;background:rgba(18,26,40,.92);
    display:none;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:16px 20px 20px;overscroll-behavior:contain;}
  .mv-overlay.open{display:flex;}
  .mv-top{flex:0 0 auto;width:100%;max-width:1180px;display:flex;align-items:center;
    justify-content:space-between;color:#fff;margin-bottom:12px;}
  .mv-top .mv-title{font-size:14px;font-weight:700;letter-spacing:.04em;}
  .mv-top .mv-title small{font-weight:400;opacity:.7;margin-left:8px;}
  /* 字形（×）を前提に line-height で中央に見せていたため、図形に替えたら
     11pxずれた。中身を flex で中央に置く。 */
  .mv-close{background:none;border:0;color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:50%;transition:background .15s;}
  .mv-close:hover{background:rgba(255,255,255,.14);}
  .mv-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;
    justify-content:center;gap:16px;width:100%;max-width:1180px;}
  .mv-img-wrap{position:relative;flex:1 1 auto;min-width:0;min-height:0;height:100%;
    display:flex;justify-content:center;align-items:center;}
  .mv-img-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:0;
    box-shadow:0 12px 48px rgba(0,0,0,.5);background:#fff;object-fit:contain;}
  /* 送りボタン：漫画なので「次（左）」が左、「前（右）」が右 */
  .mv-nav{flex:0 0 52px;align-self:center;height:52px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(255,255,255,.14);color:#fff;font-size:22px;display:flex;align-items:center;
    justify-content:center;transition:background .15s;}
  .mv-nav:hover:not(:disabled){background:rgba(255,255,255,.28);}
  .mv-nav:active:not(:disabled){transform:scale(.92);}
  .mv-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .mv-nav:disabled{opacity:.28;cursor:default;}
  .mv-bottom{flex:0 0 auto;width:100%;max-width:1180px;margin-top:14px;color:#fff;text-align:center;}
  .mv-counter{font-size:13px;letter-spacing:.08em;opacity:.85;}
  .mv-dots{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-direction:row-reverse;}
  .mv-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);cursor:pointer;border:0;
    transition:background .15s,transform .15s;}
  .mv-dot.active{background:#fff;transform:scale(1.25);}
  .mv-hint-r2l{font-size:11px;opacity:.6;margin-top:10px;}
  /* 最終ページ後の資料請求CTA */
  .mv-end{display:none;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:#fff;padding:40px 24px;max-height:74vh;}
  .mv-end.show{display:flex;}
  .mv-end h3{font-family:var(--serif);font-size:22px;margin:0 0 12px;}
  .mv-end p{font-size:14px;opacity:.85;max-width:420px;margin:0 0 24px;line-height:1.9;}
  .mv-end .mv-cta{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
    font-weight:700;font-size:15px;border-radius:0;padding:13px 32px;transition:background .15s;}
  .mv-end .mv-cta:hover{background:#4a74bd;}
  .mv-end .mv-back{display:inline-block;margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.7);
    text-decoration:underline;cursor:pointer;background:none;border:0;}
  @media(max-width:640px){
    .mv-overlay{padding:12px 10px 16px;}
    .mv-stage{gap:0;}
    .mv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
      flex-basis:42px;width:42px;height:42px;font-size:18px;
      background:rgba(18,26,40,.62);box-shadow:0 2px 12px rgba(0,0,0,.4);}
    .mv-nav:active:not(:disabled){transform:translateY(-50%) scale(.92);}
    #mvNext{left:2px;}
    #mvPrev{right:2px;}
    .mv-img-wrap{width:100%;}
  }

  /* ══ 年表 ══ */
  .profile h2{text-align:center;}
  .profile .sub{text-align:center;font-size:14px;color:var(--sub);margin:-16px 0 32px;letter-spacing:.06em;}
  /* テーマCSS（style.css）は素の table を自前のレイアウト用に潰している。
       table{display:inline-flex} / tbody{display:flex;flex-direction:column}
       tr{display:flex} / th,td{display:inline-block}
     会社概要ページの .companyTable のための指定だが、素タグに当たっているため
     この年表にも効いてしまい、列幅が揃わず右へはみ出していた。
     共通ヘッダー／フッターを入れた時点（2026-08-19）から起きていた崩れ。
     この表だけ、本来の table の組み方に戻す。 */
  table.tl{display:table;width:100%;max-width:860px;margin:0 auto;
    border-collapse:collapse;table-layout:auto;overflow:visible;font-size:14.5px;}
  table.tl thead{display:table-header-group;}
  table.tl tbody{display:table-row-group;}
  table.tl tr{display:table-row;}
  table.tl th,
  table.tl td{display:table-cell;}
  table.tl th{background:var(--blue);color:#fff;text-align:left;padding:11px 14px;font-weight:600;letter-spacing:.04em;}
  table.tl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
  table.tl td.y{color:var(--blue);font-weight:700;white-space:nowrap;}
  table.tl td.a{color:var(--sub);white-space:nowrap;}
  table.tl tr:nth-child(even) td{background:var(--bg-soft);}

  /* ══ 使命 ══ */
  .mission{text-align:center;}
  .mission h2{color:var(--blue-d);}
  .mission .read p{text-align:left;}

  /* ══ 書籍 ══ */
  /* 漫画と同じ幅・同じ枠にして、「読みもの」2点として並びを揃える。
     青い左罫は他にない飾りだったので外す。 */
  /* 漫画ブロックと同じ組み立てにする。
       中身 → 細い罫 → 中央にボタン
     ボタンだけ同じ見た目にしても、片方が中央・片方が本文の左端では揃って見えない。 */
  .book{max-width:var(--maxw);margin:24px auto 0;
    border:1px solid var(--line);border-radius:0;padding:24px;background:#fff;text-align:left;}
  .book-main{display:flex;gap:28px;align-items:center;}
  .book-body{flex:1;}
  .book .book-sub{font-size:13px;color:var(--sub);margin:0 0 12px;letter-spacing:.04em;}
  @media(max-width:560px){.book{text-align:center;} .book-main{flex-direction:column;}}
  .book .book-cover{flex:0 0 132px;width:132px;}
  .book .book-cover img{width:100%;height:auto;display:block;border-radius:0;
    box-shadow:0 6px 18px rgba(39,82,140,.12);}
  .book h4{font-family:var(--serif);font-size:16px;margin:0 0 8px;font-weight:600;color:var(--blue-d);}
  .book p{font-size:13.5px;color:var(--sub);margin:0;}
  /* 書籍の購入導線。区切り方も漫画の .manga-cta と同じ値にしてある。 */
  .book-buy{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);text-align:center;}

  /* ══ 他ストーリー ══ */
  .more h2{text-align:center;color:var(--blue-d);font-size:22px;margin-bottom:32px;letter-spacing:.06em;}
  .more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--maxw);margin:0 auto;}
  @media(max-width:820px){.more-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.more-grid{grid-template-columns:1fr;}}
  .more-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
    border-radius:0;padding:24px 18px;transition:.15s;background:#fff;text-align:center;}
  .more-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 24px rgba(39,82,140,.08);}
  .more-card .en{font-size:11px;letter-spacing:.2em;color:var(--blue);display:block;margin-bottom:8px;font-weight:700;}
  .more-card .ja{font-family:var(--serif);font-size:15px;color:var(--ink);}
  .more-card .arrow{font-size:12px;color:var(--blue);margin-top:14px;display:inline-flex;
    align-items:center;gap:8px;letter-spacing:.08em;}
  .more-card .arrow::after{content:"";width:16px;height:1px;background:currentColor;}

  /* 左右反転レイアウト（画像枠も入れ替える） */
  .ep-media.reverse .ep-figure{order:-1;}

  /* SP専用の改行。PCでは自然折返しに任せる。
     中央揃えの宣言は意味の切れ目で、左揃えの読み物は句点のうしろで切る。 */
  .brSp{display:none;}
  /* 最終行が1〜2文字だけで残るのを避ける。対応していないブラウザでは無視される。 */
  .ep-text p,.mission .read p,#message .read p,.book p,.book-sub,
  .reading-lead,.manga>p{text-wrap:pretty;}
  @media(max-width:767px){ .brSp{display:inline;} }

  section{scroll-margin-top:80px;}
  @media(prefers-reduced-motion:reduce){.more-card,.manga .m-btn{transition:none;}}
  /* ══ 既存HP共通ヘッダー／フッターとの噛み合わせ ══
     テーマCSS（style.css）を先に読み、このページ固有のCSSを後に置いている。
     テーマ側と同名だった .scene は .ep-scene へ改名済み（テーマの .scene は
     max-width:1440px のコンテナ指定で、Episode 02 の全幅背景と衝突するため）。 */
  /* 共通ヘッダーは position:fixed の白帯（81px／1123px以下は63px）。
     ヒーロー写真の上端が隠れるので、同じぶんだけ下げる。 */
  .hero{margin-top:81px;}
  @media (max-width:1123px){ .hero{margin-top:63px;} }
  /* .head はテーマ既定で上に 100〜140px 空ける（固定ヘッダー用の逃げ）。
     このページはヒーロー画像が上にあるので詰める。
     あわせて左右のグリッドを本文（.wrap＝最大1080px＋左右24px）に合わせる。
     テーマ既定のままだと最大1440pxグリッドになり、ページタイトルと本文の
     頭が揃わない（1900pxで34pxのずれ）。 */
  main > .head{margin-top:clamp(28px,3.4vw,48px);
    max-width:var(--maxw);margin-left:auto;margin-right:auto;
    padding-left:24px;padding-right:24px;}
  /* テーマCSSは素のタグにも指定を持っている（main{line-height:1.75}、
     p{font-size:clamp(1.45rem,1.1vw,1.6rem)}）。読み物ページとして決めた
     16px / 行間2.0 が上書きされてしまうので、main の中だけ戻す。
     クラスで明示している文字サイズ（.reading-lead など）はそのまま生きる。 */
  main{line-height:2.0;color:var(--ink);}
  main p{font-size:inherit;line-height:inherit;}

  /* 固定ヘッダーぶん、アンカー送りの位置を下げる */
  section{scroll-margin-top:clamp(80px,9vw,120px);}