:root { --bg1-image: url('../images/bg1.jpg'); 
    --p1-image: url('../images/p1.png');
    --p2-image: url('../images/p2.png');
    --p3-image: url('../images/p3.png');
    --p4-image: url('../images/p4.png');
    --p5-image: url('../images/p5.jpg');
    --p6-image: url('../images/p6.png');
    --p7-image: url('../images/p7.png');
    --p8-image: url('../images/p8.jpg');
  }

/* =====================================================================
   index.css — Work in Life トップページ
   構成順:
     1. :root 変数 (背景・人物画像 data URI)        <-- 既存ファイル先頭から引き継ぎ
     2. リセット / ベースタイポ
     3. ヘッダー / グローバルナビ
     4. ハンバーガー / SP メニュー
     5. SNS 固定アイコン
     6. メインビジュアル (top-text / anime-area / bottom-text)
     7. SCROLL インジケーター + 横スクロールロゴ
     8. SVG 装飾用クラス (lf-st* / c2-st* — HTML 内 inline SVG が参照)
     9. 共通ブロックレイアウト (.blk)
    10. ブロック3: WORK IN LIFEって何?
    11. ブロック4: #FF8000 セクション (V字 + バブル)
    12. ブロック5: MANIFEST
    13. ブロック6: REAL TALK MOVIE + Vimeo モーダル
    14. ブロック7: COMPANIES
    15. 共通アニメ部品 (.cf-* — JS で行単位カラフル帯マスクに利用)
    16. レスポンシブ (@media) — 各セクションのデスクトップ定義の後にまとめる
   ===================================================================== */


/* ---------------------------------------------------------------------
   2. リセット / ベースタイポ
   --------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* スクリーンリーダー・SEO 用、視覚的には非表示 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  background: #ffffff;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 900;
  color: #040000;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  /* iOS / macOS Safari でのテキスト描画を antialiased に変更。
     デフォルト subpixel-antialiased だと特に font-weight 900 + Hiragino 系
     フォールバック時に PC より太く見える問題を解消。 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iOS 専用 (Hiragino フォールバック時に W9 が過剰に太くなる対策)。
   @supports (-webkit-touch-callout: none) は iOS Safari のみ true。
   font-weight 900 を 700 に下げて PC の見た目に近づける。 */
@supports (-webkit-touch-callout: none) {
  html, body,
  .top-text, .bottom-text,
  .b3-title, .b3-sub, .b3-catch, .b3-body, .b3-body-strong,
  .b4-title, .b4-body,
  .b5-sub, .b5-tag, .b5-decl-text,
  .b6-card-company,
  .b7-logo-text,
  .b8-sub, .b8-tagline, .b8-card-name {
    font-weight: 700;
  }
}


/* ---------------------------------------------------------------------
   3. ヘッダー / グローバルナビ
   --------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 右paddingは SNS の right値(22px) と揃え、About Us の右端と SNS 右端を一致させる */
  padding: 0 22px 0 40px;
  background: #fff;
  z-index: 100;
  transition: transform 0.32s ease-in-out;
}
header.is-hidden { transform: translateY(-100%); } /* 下スクロール時:非表示、上スクロール:表示 */
.header-logo {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.header-logo-img {
  height: 36px;
  width: auto;
  display: block;
  vertical-align: middle;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 50px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
}
nav a {
  text-decoration: none;
  color: #040000;
  font-size: 17px;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 900;
}


/* ---------------------------------------------------------------------
   4. ハンバーガーボタン + SP メニューオーバーレイ
   (ハンバーガーは 2本線 1px、L字ブラケットと同じ線幅)
   --------------------------------------------------------------------- */
.menu-btn {
  position: fixed;
  top: 30px; /* (header 100 - btn 40) / 2 */
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #040000;
  color: #fff;
  border: 0;
  padding: 0;
  display: none;            /* デフォルト非表示。SP ブレイクポイントで表示 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn-bar {
  display: block;
  width: 16px;
  height: 1px;              /* L字ブラケットと同じ 1px */
  background: #fff;
  transition: transform 0.28s ease;
}
/* オープン時:2本が中央に寄って交差し X を形成 */
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.sp-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}
/* バックドロップ (半透明黒、タップで閉じる) */
.sp-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sp-menu.is-open .sp-menu-backdrop {
  opacity: 1;
}
/* メニューパネル (右からスライドイン、横幅 86%、最大 360px) */
.sp-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 86%;
  max-width: 360px;
  background: #ffffff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1);
  display: flex;
  flex-direction: column;
  padding: 88px 28px 32px;   /* 上はヘッダー分の余裕 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sp-menu.is-open .sp-menu-panel {
  transform: translateX(0);
}
.sp-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
}
.sp-menu-list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sp-menu-list a {
  display: block;
  padding: 18px 4px;
  color: #040000;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.18s ease;
}
.sp-menu-list a:active,
.sp-menu-list a:focus {
  color: #FF8000;
}
.sp-menu-social {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  gap: 14px;
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sp-menu-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #040000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-menu-social a svg {
  width: 16px;
  height: 16px;
}
/* メニューオープン時、body のスクロール抑止 (JS で .menu-open を付与) */
body.menu-open {
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   5. SNS 固定アイコン (viewport の縦中央寄せで常時表示)
   --------------------------------------------------------------------- */
.social {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 101;
}
.social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #040000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.social a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}


/* ---------------------------------------------------------------------
   6. メインビジュアル (top-text / anime-area / bottom-text)
   --------------------------------------------------------------------- */
main {
  padding-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
  width: 100%;
  margin: 0 auto;
}

/* タイプライター風テキスト */
.top-text {
  text-align: center;
  /* viewport に応じて連続的にスケールし、どの幅でも変な折り返しを避ける */
  font-size: clamp(13px, 3vw, 45px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 0.05em;
  margin: 30px 0 0 0;
  width: 100%;
  /* 右SNSアイコン群と被らないよう左右に余白を確保(中央揃え保持) */
  padding: 0 100px;
}
.top-text .line {
  display: block;
  /* min-height ではなく明示的な height で固定。
     空スパンでも・タイプ進行中でも常に同じ高さを保ち、
     下の SCROLL/ロゴエリアを動かさない。
     box-sizing: border-box なので height には padding 分も含む */
  height: 1.334em; /* = 0.8em (line-height分) + 0.267em*2 (padding) */
  padding: 0.267em 0;
  line-height: 0.8;
}

/* 帯マスク表示用 (上テキスト 3 行)
   band-wrap: 文字幅にフィットする inline-block。.line は text-align: center で中央寄せ */
.band-wrap {
  position: relative;
  display: inline-block;
  --band-pos: 0; /* 0 → 1 で帯の左端が右に移動 */
  line-height: inherit;
}
.band-text {
  display: inline-block;
  /* line-height 0.8 でボックスが文字より小さくなり descender が切れるため、
     上下に余裕を持たせた負の inset でクリップ範囲を拡張 */
  clip-path: inset(-0.5em calc((1 - var(--band-pos)) * 100%) -0.5em 0);
  -webkit-clip-path: inset(-0.5em calc((1 - var(--band-pos)) * 100%) -0.5em 0);
}
.band-cover {
  position: absolute;
  /* line-box より上下に少し広く取り、descender 領域も白で覆う */
  top: -0.3em;
  bottom: -0.3em;
  left: calc(var(--band-pos) * 100%);
  right: 0;
  background: #ffffff;
  pointer-events: none;
}
.cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  background: #040000;
  vertical-align: middle;
  margin-left: 4px;
  animation: blink 0.8s infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* done 状態でも display:none ではなく visibility:hidden にして高さを保つ */
.top-text.done .cursor,
.bottom-text.done .cursor {
  visibility: hidden;
}

/* アニメエリア */
.anime-area {
  width: 100%;
  max-width: 850px;
  aspect-ratio: 1100 / 335;
  /* compact 時の負マージンを最初から適用してレイアウトを確定させ、
     SCROLL/ロゴエリアがアニメ進行で上下に動かないようにする。
     transform は視覚的なシフトのみで layout に影響しない */
  margin: 15px auto -98px;
  opacity: 0;
  transition: opacity 0.6s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anime-area.show { opacity: 1; }
/* アニメ完了後、ロゴごと上に詰めて下テキストへ寄せる (visualのみ) */
.anime-area.compact {
  transform: translateY(-118px);
}

.bottom-text {
  text-align: center;
  font-size: clamp(12px, 3vw, 35px);
  font-weight: 900;
  letter-spacing: 0.05em;
  /* タイプライターが \n で 2行目を挿入する瞬間にレイアウトシフトが起きないよう、
     最初から 2行分の高さを予約する。 */
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%;
  padding: 0 15px;
}
.bottom-text.show { opacity: 1; }


/* ---------------------------------------------------------------------
   7. SCROLL インジケーター + 横スクロールロゴエリア
   --------------------------------------------------------------------- */
.scroll-indicator {
  text-align: center;
  padding: 70px 0 0;
}
.scroll-text {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #040000;
  margin-bottom: 18px;
}
.scroll-line {
  width: 1px;
  height: 90px;
  margin: 0 auto;
  background: rgba(4, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.scroll-line::before {
  content: '';
  position: absolute;
  top: -45px;
  left: 0;
  width: 1px;
  height: 45px;
  background: linear-gradient(to bottom, transparent, #040000);
  animation: scroll-flow 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scroll-flow {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(135px); opacity: 0; }
}

.logo-section {
  width: 100%;
  background: #f0f0f0;
  padding: 20px 0;
}
.logo-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  animation: marquee 80s linear infinite;
}
.logo-marquee-item {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-marquee-item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ---------------------------------------------------------------------
   8. SVG 装飾用クラス (lf-st* / c2-st*)
   HTML 内 inline SVG (Work in Life ロゴ / Life ロゴ) が参照。
   削除すると SVG のグラデーション・マスク・クリップが失われるため保持。
   --------------------------------------------------------------------- */
          .lf-st0 { fill: url(#lf-linear-gradient2); }
          .lf-st1 { mask: url(#lf-mask-15); }
          .lf-st2 { clip-path: url(#lf-clippath-6); }
          .lf-st3 { clip-path: url(#lf-clippath-7); }
          .lf-st4 { mask: url(#lf-mask-5); }
          .lf-st5 { mask: url(#lf-mask-13); }
          .lf-st6 { fill: url(#lf-linear-gradient34); }
          .lf-st7 { fill: url(#lf-grad-2381); }
          .lf-st8 { clip-path: url(#lf-clippath-4); }
          .lf-st9 { fill: url(#lf-linear-gradient33); }
          .lf-st10 { fill: url(#lf-linear-gradient10); }
          .lf-st11 { mask: url(#lf-mask-1); }
          .lf-st12 { opacity: .2; }
          .lf-st12, .lf-st13, .lf-st14 { fill: #ecee93; }
          .lf-st12, .lf-st13, .lf-st14, .lf-st15, .lf-st16, .lf-st17, .lf-st18, .lf-st19, .lf-st20, .lf-st21 { fill-rule: evenodd; }
          .lf-st22 { fill: url(#lf-linear-gradient32); }
          .lf-st23 { fill: url(#lf-linear-gradient21); }
          .lf-st24 { mask: url(#lf-mask-10); }
          .lf-st25 { mask: url(#lf-mask-6); }
          .lf-st26 { fill: url(#lf-linear-gradient27); }
          .lf-st27 { clip-path: url(#lf-clippath-9); }
          .lf-st28 { mask: url(#lf-mask-7); }
          .lf-st29 { mask: url(#lf-mask-18); }
          .lf-st30 { fill: url(#lf-linear-gradient35); }
          .lf-st31 { mask: url(#lf-mask-17); }
          .lf-st32 { mask: url(#lf-mask); }
          .lf-st33 { fill: url(#lf-linear-gradient26); }
          .lf-st34 { fill: url(#lf-linear-gradient1); }
          .lf-st35 { fill: url(#lf-linear-gradient9); }
          .lf-st36 { fill: url(#lf-linear-gradient18); }
          .lf-st37 { fill: url(#lf-linear-gradient23); }
          .lf-st38 { mask: url(#lf-mask-20); }
          .lf-st39 { fill: url(#lf-linear-gradient8); }
          .lf-st40 { fill: url(#lf-linear-gradient11); }
          .lf-st41 { mask: url(#lf-mask-8); }
          .lf-st42 { fill: url(#lf-linear-gradient16); }
          .lf-st43 { mask: url(#lf-mask-2); }
          .lf-st44 { fill: url(#lf-linear-gradient24); }
          .lf-st45 { mask: url(#lf-mask-9); }
          .lf-st46 { fill: url(#lf-linear-gradient30); }
          .lf-st47 { clip-path: url(#lf-clippath-1); }
          .lf-st48 { fill: url(#lf-linear-gradient22); }
          .lf-st49 { mask: url(#lf-mask-21); }
          .lf-st50 { fill: url(#lf-linear-gradient29); }
          .lf-st51 { clip-path: url(#lf-clippath-5); }
          .lf-st14, .lf-st15 { opacity: .3; }
          .lf-st52 { clip-path: url(#lf-clippath-8); }
          .lf-st53 { fill: url(#lf-linear-gradient19); }
          .lf-st54 { fill: url(#lf-linear-gradient12); }
          .lf-st55 { mask: url(#lf-mask-23); }
          .lf-st56 { fill: url(#lf-linear-gradient28); }
          .lf-st15, .lf-st16 { fill: #bce2e8; }
          .lf-st57 { clip-path: url(#lf-clippath-3); }
          .lf-st58 { fill: url(#lf-linear-gradient7); }
          .lf-st59 { fill: url(#lf-linear-gradient20); }
          .lf-st60 { fill: url(#lf-linear-gradient4); }
          .lf-st61 { mask: url(#lf-mask-24); }
          .lf-st62 { fill: url(#lf-linear-gradient31); }
          .lf-st17 { fill: #0c867b; }
          .lf-st63 { clip-rule: evenodd; fill: none; }
          .lf-st64 { mask: url(#lf-mask-16); }
          .lf-st65 { mask: url(#lf-mask-19); }
          .lf-st66 { fill: url(#lf-linear-gradient14); }
          .lf-st67 { fill: url(#lf-linear-gradient5); }
          .lf-st68 { fill: url(#lf-linear-gradient3); }
          .lf-st69 { mask: url(#lf-mask-25); }
          .lf-st70 { fill: url(#lf-linear-gradient25); }
          .lf-st71 { fill: url(#lf-linear-gradient15); }
          .lf-st72 { mask: url(#lf-mask-11); }
          .lf-st73 { fill: url(#lf-linear-gradient17); }
          .lf-st18 { fill: #002223; }
          .lf-st74 { fill: #070002; }
          .lf-st75 { mask: url(#lf-mask-12); }
          .lf-st19 { fill: #0c3876; }
          .lf-st76 { fill: url(#lf-linear-gradient6); }
          .lf-st77 { mask: url(#lf-mask-22); }
          .lf-st78 { clip-path: url(#lf-clippath-2); }
          .lf-st79 { mask: url(#lf-mask-4); }
          .lf-st20 { fill: #f2ee6d; }
          .lf-st21 { fill: #1c2d61; }
          .lf-st80 { fill: url(#lf-linear-gradient13); }
          .lf-st81 { fill: url(#lf-grad-238); }
          .lf-st82 { mask: url(#lf-mask-14); }
          .lf-st83 { fill: url(#lf-linear-gradient); }
          .lf-st84 { clip-path: url(#lf-clippath); }
          .lf-st85 { mask: url(#lf-mask-3); }
        

/* ===================================================================== */


          .c2-st0 { fill: url(#c2_linear-gradient2); }
          .c2-st1 { mask: url(#c2_mask-5); }
          .c2-st2 { clip-path: url(#c2_clippath-4); }
          .c2-st3 { fill: url(#c2_linear-gradient10); }
          .c2-st4 { mask: url(#c2_mask-1); }
          .c2-st5 { opacity: .2; }
          .c2-st5, .c2-st6, .c2-st7 { fill: #ecee93; }
          .c2-st5, .c2-st6, .c2-st7, .c2-st8, .c2-st9, .c2-st10, .c2-st11, .c2-st12, .c2-st13, .c2-st14 { fill-rule: evenodd; }
          .c2-st15 { mask: url(#c2_mask-10); }
          .c2-st16 { mask: url(#c2_mask-6); }
          .c2-st17 { mask: url(#c2_mask-7); }
          .c2-st18 { mask: url(#c2_mask); }
          .c2-st19 { fill: url(#c2_linear-gradient1); }
          .c2-st20 { fill: url(#c2_linear-gradient9); }
          .c2-st21 { fill: url(#c2_linear-gradient8); }
          .c2-st22 { fill: url(#c2_linear-gradient11); }
          .c2-st23 { mask: url(#c2_mask-8); }
          .c2-st24 { fill: url(#c2_linear-gradient16); }
          .c2-st25 { mask: url(#c2_mask-2); }
          .c2-st26 { mask: url(#c2_mask-9); }
          .c2-st27 { clip-path: url(#c2_clippath-1); }
          .c2-st7, .c2-st8 { opacity: .3; }
          .c2-st28 { fill: url(#c2_linear-gradient12); }
          .c2-st8, .c2-st9 { fill: #bce2e8; }
          .c2-st29 { clip-path: url(#c2_clippath-3); }
          .c2-st30 { fill: url(#c2_linear-gradient7); }
          .c2-st31 { fill: url(#c2_linear-gradient4); }
          .c2-st10 { fill: #0c867b; }
          .c2-st32 { clip-rule: evenodd; fill: none; }
          .c2-st33 { fill: url(#c2_linear-gradient14); }
          .c2-st34 { fill: url(#c2_linear-gradient5); }
          .c2-st35 { fill: url(#c2_linear-gradient3); }
          .c2-st36 { fill: url(#c2_linear-gradient15); }
          .c2-st37 { mask: url(#c2_mask-11); }
          .c2-st38 { fill: url(#c2_linear-gradient17); }
          .c2-st11 { fill: #002223; }
          .c2-st39 { mask: url(#c2_mask-12); }
          .c2-st12 { fill: #0c3876; }
          .c2-st40 { fill: url(#c2_linear-gradient6); }
          .c2-st41 { clip-path: url(#c2_clippath-2); }
          .c2-st42 { mask: url(#c2_mask-4); }
          .c2-st13 { fill: #f2ee6d; }
          .c2-st14 { fill: #1c2d61; }
          .c2-st43 { fill: url(#c2_linear-gradient13); }
          .c2-st44 { fill: url(#c2_linear-gradient); }
          .c2-st45 { clip-path: url(#c2_clippath); }
          .c2-st46 { mask: url(#c2_mask-3); }
        


/* ---------------------------------------------------------------------
   9. 共通ブロックレイアウト
   --------------------------------------------------------------------- */
.blk { width: 100%; position: relative; }
.blk-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }


/* ---------------------------------------------------------------------
   10. ブロック3: WORK IN LIFEって何?
   (キャッチ max 65pt / 本文 max 40pt、vw 比 4.875:3.0 = 1.625)
   --------------------------------------------------------------------- */
.b3 {
  position: relative;
  /* 横はクリップ、縦は visible にして b3-bg-clip 経由で bg1 が b4 領域まで縦リピート可能。
     カーテンは clip-path 内部完結アニメなので b3 外にはみ出さない。 */
  overflow-x: clip;
  overflow-y: visible;
  background: #2a2520;
  color: #fff;
  padding: 110px 0 220px;
}

/* 背景画像 (JS で translateY スクロール、黒オーバーレイなし)
   bg を clip するラッパー: scroll 罫線下〜V字深部までを可視範囲とする。
   overflow:hidden で範囲外の bg を隠すので、bg は translateY で自由に動かせる */
.b3-bg-clip {
  position: absolute;
  top: 0;                /* b3 上端 = scroll 罫線直下 から開始 */
  left: 0;
  right: 0;
  /* b4 のオーバーラップ領域 (margin-top: -560〜-300) + V字深部までカバー。
     b4-bg が初期透明なので、その下に bg1 をリピートで連続表示するため大きく拡張。 */
  bottom: -1200px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.b3-bg {
  position: absolute;
  top: -160px;
  left: 0;
  width: 100%;
  height: calc(100% + 320px);
  background-image: var(--bg1-image);
  /* repeat-y: 下方拡張領域 (b4 重なり部分) を bg1 がタイル状に連続。
     b4-bg 透明時でも bg1 が連続して見える。 */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;
  background-color: #2a2520;
  filter: grayscale(1) brightness(0.92);
  z-index: 0;
  will-change: transform;
}
/* b3 内側コンテナは b4 (z:5) より上に置いてパネルが手前になるようにする */
.b3 .blk-inner { max-width: 1700px; padding: 0 20px; position: relative; z-index: 10; }

/* オレンジカーテン (唯一のオレンジ背景):
   ① b3 全体 (bg1 + panel 1,2) を一気に上→下に覆う (フルカバー)
   ② カーテンの上端が b3 下端付近まで降下し、上端に V字凹みを形成
   ③ カーテンは b4 領域まで延びるので、b4 area もカーテンのオレンジで覆われる
   - b4-bg は廃止 (カーテンのみがオレンジ背景) */
.b3-curtain {
  /* --curtain-extend: b3 下端から b4 下端 (= arc 上端) までの距離。
     JS が `b4.bottom - b3.bottom` を計測して設定する (レスポンシブ対応)。
     fallback: 1500px (PC初期想定値)。 */
  --curtain-extend: 1500px;
  /* 上端の最終位置 (b3 bottom からの上方オフセット px)。SP では media query で上書き。 */
  --top-descent: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* b3 下端から b4 下端 (arc 上端) まで延長。これより下 (arc + b5) には届かないので
     b4/b5 境界の V字アニメが「オレンジ→白」遷移として可視化される。 */
  bottom: calc(-1 * var(--curtain-extend));
  /* オレンジ背景は ::before / ::after で提供 (左右からワイプして中央で合流)。
     親要素自体は透明。 */
  background: transparent;
  z-index: 30;
  pointer-events: none;
  /* オレンジの最終形状 (flat top = --top-descent 位置)。
     ::before / ::after は親 clip-path 内に収まる。 */
  clip-path: polygon(
    0 calc(100% - var(--curtain-extend) - var(--top-descent)),
    100% calc(100% - var(--curtain-extend) - var(--top-descent)),
    100% 100%,
    0 100%
  );
  -webkit-clip-path: polygon(
    0 calc(100% - var(--curtain-extend) - var(--top-descent)),
    100% calc(100% - var(--curtain-extend) - var(--top-descent)),
    100% 100%,
    0 100%
  );
  opacity: 1;
}
/* 左右ワイプ用の半分パネル。outer エッジから inset(100%) で完全クリップ (= 不可視) →
   is-down で inset(0) → 中央に向かって伸びていく。
   width: calc(50% + 1px) で両半分が中央で 2px オーバーラップ → サブピクセル丸めによる
   1px の隙間を防止。 */
.b3-curtain::before,
.b3-curtain::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: #FF8000;
  transition: clip-path 0.7s cubic-bezier(0.55, 0, 0.2, 1),
              -webkit-clip-path 0.7s cubic-bezier(0.55, 0, 0.2, 1);
}
/* 左半分: 右側を 100% inset → 左端で 0 width。アニメで 0% inset → 中央まで伸びる。 */
.b3-curtain::before {
  left: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
/* 右半分: 左側を 100% inset → 右端で 0 width。アニメで 0% inset → 中央まで伸びる。 */
.b3-curtain::after {
  right: 0;
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}
/* パネル2 完了後 → 両 pseudo を inset(0) に → 左右から中央へワイプして合流 */
.b3-curtain.is-down::before,
.b3-curtain.is-down::after {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* タイトル部 */
.b3-head { text-align: center; margin-bottom: 70px; }
.b3-title {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 18px;
  /* 背景写真上でも可読性を確保 */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.b3-divider { width: 48px; height: 1px; background: #fff; margin: 0 auto 18px; opacity: 0.9; }
.b3-sub {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #fff;
}

/* パネル (コーナーブラケット付き)
   Panel 1 入場で出現、Panel 2 は Panel 1 最終行完全表示で出現。@keyframes でバウンス */
.b3-panel {
  position: relative;
  /* レイヤー: パネル(最上) > 円形アニメ/オレンジ(b4) > bg1(b3-bg) */
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  border-radius: clamp(10px, 2vw, 30px);
  color: #040000;
  --pad: clamp(24px, 3.5vw, 60px);
  --bracket-offset: clamp(12px, 2vw, 30px);
  /* 上下左右すべて同じ padding (テキスト左右余白を均等に) */
  padding: var(--pad);
  /* 初期状態 (JS が .is-visible を付与すると keyframes でポップアップ) */
  opacity: 0;
  transform: translateY(60px) scale(0.88);
  will-change: opacity, transform;
}
.b3-panel.is-visible {
  animation: b3-panel-pop 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes b3-panel-pop {
  0%   { opacity: 0; transform: translateY(60px) scale(0.88); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Panel 1: width: max-content でテキスト幅にフィット、左寄せ。
   パネル1〜4 の位置にランダム感を出すため少し右にオフセット */
.b3-panel-large {
  width: max-content;
  max-width: min(1360px, 78%);
  margin: 0 0 120px 8%;
}
/* Panel 2: 右寄せ。パネル1〜4 の位置にランダム感を出すため少し左にオフセット */
.b3-panel-small {
  width: max-content;
  max-width: min(1275px, 78%);
  margin: 0 8% 0 auto;
}
/* Panel 1 末尾のトリガーマーカー (Panel 2 を出現させる目印、視覚的に見えない) */
.b3-p1-end-marker {
  display: block;
  width: 1px;
  height: 1px;
  margin-top: 4px;
}

/* L字横罫線: panel幅の30%、最大値はパネル幅 - 左右offset */
.b3-bracket-h {
  position: absolute;
  top: var(--bracket-offset);
  left: var(--bracket-offset);
  width: min(30%, calc(100% - var(--bracket-offset) * 2));
  height: 1px;
  background: #2a2520;
  pointer-events: none;
}
/* L字縦罫線: テキスト最終行下端まで */
.b3-bracket-v {
  position: absolute;
  top: var(--bracket-offset);
  left: var(--bracket-offset);
  width: 1px;
  bottom: var(--pad); /* テキスト最終行下端 = padding-bottom と一致 */
  background: #2a2520;
  pointer-events: none;
}

/* キャッチ: max 65px、本文 max 40px と比 1.625 を維持 */
.b3-catch {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* 流体スケール: viewport 幅に応じてタイトルが縮小。
     SP 可読性確保のため min を 18px に引き上げ (旧 14px)。
     長い行はパネル幅で自然折返しさせる (text-justify 有効)。 */
  font-size: clamp(18px, 2.6vw, 45px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.b3-body {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* タイトルと同じ縮小比率 (32/45 = 0.71) でスケール。
     clamp(18px, 2.6vw, 45px) × 0.71 ≈ clamp(13px, 1.85vw, 32px) */
  font-size: clamp(13px, 1.85vw, 32px);
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: #1a1a1a;
}
.b3-body-strong {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(11px, 2.8vw, 40px);
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: #1a1a1a;
}


/* ---------------------------------------------------------------------
   11. ブロック4: #FF8000 セクション (bg1写真を下層・V字オレンジ上層・白パネル2枚)
   --------------------------------------------------------------------- */
.b4 {
  position: relative;
  /* 直近バックアップ状態に戻す: b3 と緩めに重ねる程度。
     パネル3,4 は b3 の下方 (b4 領域) で表示される。 */
  margin-top: clamp(-220px, -15vw, -100px);
  overflow-x: clip;
  overflow-y: visible;
  /* z-index 階層: ③ パネル3,4 + バブル (.b4 .blk-inner z:50) が最前面、
     ② オレンジ (b4-bg + arc + curtain) が中段 (z:30)、
     ① bg1 + パネル1,2 が最下層 (z:0〜10)。 */
}
/* b4 領域の bg1 は b3 の .b3-bg-clip (overflow:hidden で bottom: -1200px) +
   .b3-bg (repeat-y) が b3 外まで縦リピートして連続表示する形にする。
   b3 の overflow-y:visible なので b3-bg-clip 拡張部分が b4 領域に重なって見える。
   ※ b4-bg は廃止: オレンジ背景は b3-curtain のみが提供する (curtain は b4 領域まで
      bottom: -1600px で拡張済み)。これにより「オレンジ背景が２つある」状態を解消。 */
.b4 .blk-inner {
  position: relative;
  /* ③ パネル3,4 + バブルを最前面 (b3-curtain z:30 / b4-bg z:30 より上) */
  z-index: 50;
  max-width: 1700px;
  margin: 0 auto;
  /* 上: パネル3 をオレンジ上端 (curtain top descent) のすぐ下に配置。
     - PC: 130px (curtain top 至 panel3 のギャップ約 30px、bubble-a の -40px オフセットを許容)
     - 旧 320px → 130px (パネル全体を 約190px 上に移動) */
  padding: clamp(60px, 9vw, 130px) 20px clamp(0px, 1vw, 24px);
}
/* b4-row: プレースホルダ + 周囲のバブル写真をまとめるレイアウト */
.b4-row {
  position: relative;
  margin-bottom: 90px;
}
.b4-row:last-child { margin-bottom: 0; }
/* placeholder 3 を左寄せ (右余白に写真)。Panel 1 (.b3-panel-large) と X 位置を揃えるため 8% */
.b4-row-3 > .b4-placeholder {
  margin-left: 8%;
  margin-right: auto;
}
/* placeholder 4 を右寄せ (左余白に写真)。Panel 2 (.b3-panel-small) と X 位置を揃えるため 8% */
.b4-row-4 > .b4-placeholder {
  margin-left: auto;
  margin-right: 8%;
}

/* 円形バブル写真: wrap=parallax / inner=pop-up、白枠なし、大きく */
.b4-bubble-wrap {
  position: absolute;
  /* レイヤー: パネル(3) > バブル(2) > オレンジ(b4-bg=1) > bg1(b3-bg=0) */
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}
.b4-bubble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  /* pop-up 初期状態 */
  opacity: 0;
  transform: scale(0);
  will-change: opacity, transform;
}
.b4-bubble-wrap.is-visible > .b4-bubble {
  animation: b4-bubble-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes b4-bubble-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.18); }
  80%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Row 3 周りのバブル (右側に配置)。サイズ 1.5x、X 座標を 4 バブル全て distinct 値にして重複回避。
   X 列: a(-6%) → b(22%) → c(-4%) → d(38%) ※全て異なる値で水平方向の重なり最小化。
   b/d はパネル領域に潜り込む (z:2 < panel z:50 で背面に表示)。 */
.b4-row-3 .b4-bubble-a { top: -80px;     right: -6%; width: clamp(135px, 21vw, 330px);   height: clamp(135px, 21vw, 330px); }
.b4-row-3 .b4-bubble-a > .b4-bubble { background-image: var(--p1-image); }
.b4-row-3 .b4-bubble-b { top: 50px;      right: 22%; width: clamp(105px, 16.5vw, 248px); height: clamp(105px, 16.5vw, 248px); }
.b4-row-3 .b4-bubble-b > .b4-bubble { background-image: var(--p2-image); }
.b4-row-3 .b4-bubble-c { bottom: -250px; right: -4%; width: clamp(128px, 19.5vw, 300px); height: clamp(128px, 19.5vw, 300px); }
.b4-row-3 .b4-bubble-c > .b4-bubble { background-image: var(--p3-image); }
.b4-row-3 .b4-bubble-d { bottom: -100px; right: 38%; width: clamp(90px, 13.5vw, 210px);  height: clamp(90px, 13.5vw, 210px); }
.b4-row-3 .b4-bubble-d > .b4-bubble { background-image: var(--p4-image); }

/* Row 4 周りのバブル (左側に配置、Row 3 ミラー)。X 列: e(-6%) → f(22%) → g(-4%) → h(38%) */
.b4-row-4 .b4-bubble-e { top: -80px;     left: -6%;  width: clamp(135px, 21vw, 330px);   height: clamp(135px, 21vw, 330px); }
.b4-row-4 .b4-bubble-e > .b4-bubble { background-image: var(--p5-image); }
.b4-row-4 .b4-bubble-f { top: 50px;      left: 22%;  width: clamp(105px, 16.5vw, 248px); height: clamp(105px, 16.5vw, 248px); }
.b4-row-4 .b4-bubble-f > .b4-bubble { background-image: var(--p6-image); }
.b4-row-4 .b4-bubble-g { bottom: -250px; left: -4%;  width: clamp(128px, 19.5vw, 300px); height: clamp(128px, 19.5vw, 300px); }
.b4-row-4 .b4-bubble-g > .b4-bubble { background-image: var(--p7-image); }
.b4-row-4 .b4-bubble-h { bottom: -100px; left: 38%;  width: clamp(90px, 13.5vw, 210px);  height: clamp(90px, 13.5vw, 210px); }
.b4-row-4 .b4-bubble-h > .b4-bubble { background-image: var(--p8-image); }

/* プレースホルダ (白パネル)
   横にバブル写真を配置するため max-width を 65% に制限して右/左に
   約 35% の余白を確保 (バブルは最大 right/left:17% + 幅 14vw まで)。 */
.b4-placeholder {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  border-radius: clamp(10px, 2vw, 30px);
  color: #040000;
  --pad: clamp(24px, 3.5vw, 60px);
  --bracket-offset: clamp(12px, 2vw, 30px);
  /* 上下左右すべて同じ padding (テキスト左右余白を均等に) */
  padding: var(--pad);
  width: max-content;
  max-width: min(935px, 55%);
  margin: 0 auto 70px;
  opacity: 0;
  transform: translateY(55px) scale(0.88);
  will-change: opacity, transform;
}
.b4-placeholder:last-child {
  margin-bottom: 0;
}
.b4-placeholder.is-visible {
  animation: b4-pop 0.85s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes b4-pop {
  0%   { opacity: 0; transform: translateY(55px) scale(0.88); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* b4 プレースホルダの L字ブラケット (左上、b3 と同じ仕様) */
.b4-bracket-h {
  position: absolute;
  top: var(--bracket-offset);
  left: var(--bracket-offset);
  width: min(30%, calc(100% - var(--bracket-offset) * 2));
  height: 1px;
  background: #2a2520;
  pointer-events: none;
}
.b4-bracket-v {
  position: absolute;
  top: var(--bracket-offset);
  left: var(--bracket-offset);
  width: 1px;
  bottom: var(--pad);
  background: #2a2520;
  pointer-events: none;
}
.b4-title {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* 流体スケール: SP 可読性確保のため min を 18px に引き上げ (旧 14px)。
     長い行はパネル幅で自然折返しさせる (text-justify 有効)。 */
  font-size: clamp(18px, 2.6vw, 45px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.b4-body {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* タイトルと同じ比率 (32/45 = 0.71) でスケール */
  font-size: clamp(13px, 1.85vw, 32px);
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: #1a1a1a;
}


/* ---------------------------------------------------------------------
   12. ブロック5: MANIFEST
   - bg2.jpg を背景全面 (緑トーン+ダイヤモンド柄は画像に焼き込み済み)
   - 中央に白パネル (BOX) で manifest コンテンツを格納
   - "MANIFEST" タイトルはミントグリーン色
   - 各宣言: 左に緑枠ボックス (緑文字)、右に黒の本文
   --------------------------------------------------------------------- */
.b5 {
  position: relative;
  background: #2ECC9A;  /* bg2 読込前の地色 (画像と近い緑) */
  color: #040000;
  /* 弧アニメの高さ + 上方余白で、コンテンツが弧の下に隠れないように */
  --arc-h: clamp(120px, 18vw, 260px);
  padding-top: calc(var(--arc-h) + clamp(40px, 5vw, 90px));
  padding-bottom: clamp(80px, 9vw, 150px);
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);
  /* b4 と境界をぴったり繋ぐため、b5 を 50px 上に重ねる */
  margin-top: -50px;
  overflow: hidden;
}
.b5-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/bg2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
/* オレンジが b4 下端から V字 (下向き三角) で b5 領域へ滴り落ちるアニメーション。
   b4 のオレンジ (#FF8000、curtain と同じ) を継承。
   .b5-arc はクリップ用の長方形枠 (overflow:hidden で範囲外を隠す)。
   .b5-arc-circle は実体のフルサイズオレンジ矩形 (clip-path で V字に切り出し)。
   .b5-arc は HTML 上 .b4 の末尾に置く ⇒ 親は .b4。
   旧仕様: 円形が降りてきて弧状の遷移を作っていた。
   新仕様: clip-path polygon で V字を形成し、curtain の代わりに V字凹みを担う。 */
.b5-arc {
  --arc-h: clamp(120px, 18vw, 260px);
  position: absolute;
  bottom: calc(-1 * var(--arc-h));
  left: 0;
  width: 100%;
  height: calc(var(--arc-h) + 1px);
  overflow: hidden;
  /* ② オレンジ階層 (b3-curtain と同じ z) */
  z-index: 30;
  pointer-events: none;
}
/* オレンジ V字本体: フルサイズ矩形を clip-path で下向き三角形に切り出し。
   初期は底辺ゼロ (上辺のみ = 不可視)、アニメで V 字に展開。 */
.b5-arc-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #FF8000;
  /* 初期: 上辺のみの退化 polygon (= 不可視)。3 頂点固定で keyframes 補間。 */
  clip-path: polygon(0 0, 100% 0, 50% 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 0);
  will-change: clip-path;
}
.b5-arc.b5-arc-active .b5-arc-circle {
  animation: b5-arc-vdrop 0.9s cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
@keyframes b5-arc-vdrop {
  /* V字 (下向き三角) 形成。tip 中央が下に伸びる。途中で軽くオーバーシュート。 */
  0%   {
    clip-path: polygon(0 0, 100% 0, 50% 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 0);
  }
  70%  {
    clip-path: polygon(0 0, 100% 0, 50% calc(100% + 18px));
    -webkit-clip-path: polygon(0 0, 100% 0, 50% calc(100% + 18px));
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}
/* 中央の白パネル (BOX): manifest コンテンツを内包。全レイヤー最上 */
.b5-inner {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  padding: 70px 80px 80px;
  background: rgba(255, 255, 255, 0.92);
  /* 他パネル (b3-panel / b4-placeholder) と同じ角丸 */
  border-radius: clamp(10px, 2vw, 30px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
  /* 初期状態 (is-visible 付与でポップアップ) */
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  will-change: opacity, transform;
}
.b5-inner.is-visible {
  animation: b5-inner-pop 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes b5-inner-pop {
  0%   { opacity: 0; transform: translateY(60px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.b5-head {
  text-align: center;
  margin-bottom: 70px;
}
.b5-title {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  /* 同構造 (b7-title) と同じサイズ */
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  color: #2ECC9A;  /* ミントグリーン */
  margin-bottom: 22px;
  line-height: 1.1;
}
.b5-divider {
  width: 48px;
  height: 1px;
  background: #040000;
  margin: 0 auto 22px;
  opacity: 0.85;
}
.b5-sub {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* 同構造 (b7-sub) と同じサイズ */
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.7;
  color: #040000;
  margin-bottom: 18px;
}
.b5-note {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1vw, 14px);
  color: #4a4a4a;
  letter-spacing: 0.05em;
}
/* 宣言リスト */
.b5-decls {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.b5-decl {
  display: flex;
  align-items: center;
  gap: 36px;
}
/* 左: 緑枠ボックス (透過/塗りなし) */
.b5-tag {
  flex-shrink: 0;
  width: clamp(120px, 13vw, 170px);
  aspect-ratio: 2 / 1;
  border: 2px solid #2ECC9A;
  color: #2ECC9A;
  background: transparent;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 右: 本文 (背景なし、黒文字) */
.b5-decl-text {
  flex: 1;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.8;
  color: #040000;
  letter-spacing: 0.05em;
}


/* ---------------------------------------------------------------------
   13. ブロック6: REAL TALK MOVIE + Vimeo モーダル
   --------------------------------------------------------------------- */
.b6 {
  position: relative;
  background: #ffffff;
  color: #040000;
  padding: clamp(70px, 8vw, 130px) clamp(20px, 5vw, 90px) clamp(70px, 8vw, 130px);
}
.b6-inner {
  max-width: 1240px;
  margin: 0 auto;
}
/* b6-inner 最大幅 1500px。minmax(360px, 1fr) と組み合わせて
   横最大 3 列にキャップ (4 × 360 + 3 × gap > 1500 のため 4 列入らない)。 */
.b6 .b6-inner {
  max-width: 1500px;
}
.b6-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.b6-title {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  color: #040000;
  margin-bottom: 22px;
}
.b6-divider {
  width: 48px;
  height: 1px;
  background: #040000;
  margin: 0 auto 26px;
  opacity: 0.85;
}
.b6-lead {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 22px);
  color: #040000;
  margin-bottom: 22px;
  letter-spacing: 0.05em;
}
.b6-sub {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
  color: #040000;
}
/* カードグリッド: auto-fit + minmax で広い viewport では 3〜4 列、
   狭くなると順次列数が減って最終的に 1 列まで自動フォールバック。
   カード幅が 320px を下回らないよう保証。 */
.b6-cards {
  display: grid;
  /* min 380px: b6-inner 最大 1500px、gap 含めた 4 列要件 = 380×4+gap×3 = 1580+ > 1500 → 3 列まで。
     ビューポートが狭くなれば 2 → 1 列に自動フォールバック。 */
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  align-items: stretch;
}
.b6-card {
  background: #ffffff;
  /* 薄いグレーの 3px 罫線で囲う */
  border: 3px solid #e6e6e6;
  /* 角丸は他パネルの半径の約半分 */
  border-radius: clamp(5px, 1vw, 15px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.5vw, 24px);
}
/* card-head はロゴ + 社名を横並び。
   高さを固定 (clamp(28px, 3vw, 44px)) してロゴの実寸に関わらずサムネ開始位置を統一。 */
.b6-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: clamp(28px, 3vw, 44px);
}
/* 空の card-head (パフロゴ削除カード) でも他カードと高さが揃うよう min-height を確保 */
.b6-card-head:empty {
  min-height: clamp(28px, 3vw, 44px);
}
.b6-card-logo {
  /* max-height で枠内に収め、はみ出さない (height が card-head 寸法を超えない) */
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}
.b6-card-company {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  /* viewport 連動の流体スケール: SP〜PC で 8-12px の範囲。
     最大 3 列レイアウト前提でカード幅が広くなったため、パーソル 22 文字でも 12px まで表示可能。 */
  font-size: clamp(8px, 0.9vw, 12px);
  color: #040000;
  /* 右寄せ + 1行表示維持 */
  text-align: right;
  white-space: nowrap;
  /* ロゴが無い card-head でも社名を右側に押し付ける (flex 単独子要素の左寄せ防止) */
  margin-left: auto;
  /* min-width: 0 でflex 子要素の縮小を許可 */
  min-width: 0;
}
/* Vimeo サムネイル (クリックでモーダル起動)。
   padding-bottom 56.25% で 16:9 比を強制保証 (aspect-ratio が効かない環境でも OK) */
.b6-card-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: #d8d8d8;
  overflow: hidden;
  /* 映像 BOX は角丸なし */
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b6-card-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.b6-card-video:hover .b6-card-thumb {
  transform: scale(1.03);
}
/* coming soon バリエーション: 動画準備中カード用。
   ライトグレー背景 + 中央に "coming soon" 表記。クリック無効 (cursor default)。 */
.b6-card-video--coming {
  background: #d0d0d0;
  cursor: default;
}
.b6-card-video--coming:hover .b6-card-thumb {
  transform: none;
}
.b6-card-coming-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ライトグレー背景上で視認可能なダークグレー */
  color: #555555;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 600;
  /* サイズ半分 (旧: clamp(16px, 1.8vw, 24px)) */
  font-size: clamp(8px, 0.9vw, 12px);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
}
/* 本文が空のカードは text 要素ごと非表示にして余白も詰める */
.b6-card-text:empty {
  display: none;
}
.b6-card-text {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.85;
  color: #1a1a1a;
  letter-spacing: 0.05em;
  /* 両端揃え (日本語向け) */
  text-align: justify;
  text-justify: inter-ideograph;
  /* 行数を固定して、長い文章は ... で省略表示 (= 全 BOX 同じ高さに) */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 短いテキストでも 5 行分の高さを確保 → BOX 高さを完全固定 */
  min-height: calc(14px * 1.85 * 5);
}

/* ===== Vimeo モーダル ===== */
.vm-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.vm-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.vm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: pointer;
}
.vm-modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1200px);
  max-height: 90vh;
}
.vm-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.vm-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vm-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.vm-modal-close:hover { opacity: 0.7; }


/* ---------------------------------------------------------------------
   14. ブロック7: COMPANIES
   --------------------------------------------------------------------- */
.b7 {
  background: #5BBEE9;
  color: #ffffff;
  padding: clamp(70px, 8vw, 130px) clamp(20px, 5vw, 90px) clamp(80px, 9vw, 140px);
}
.b7-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.b7-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.b7-title {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 22px;
}
.b7-divider {
  width: 48px;
  height: 1px;
  background: #ffffff;
  margin: 0 auto 22px;
  opacity: 0.85;
}
.b7-sub {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.3vw, 18px);
  color: #ffffff;
}
/* アンバサダー説明文 (協賛企業ロゴ並び始まる前)。
   アンバサダーバッジ画像 + テキストを中央寄せでインライン配置。 */
.b7-ambassador-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  text-align: center;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.7;
  color: #ffffff;
  opacity: 0.92;
  margin: 0 auto clamp(20px, 2.5vw, 36px);
  max-width: 760px;
  padding: 0 16px;
}
.b7-ambassador-note-icon {
  height: clamp(20px, 1.9vw, 28px);
  width: auto;
  display: inline-block;
  flex-shrink: 0;
}

/* ロゴグリッド (5列)。
   セクション区切り h3.b7-section-title は grid-column: 1/-1 で全幅占有して行を切り替える。
   minmax(0, 1fr) で min-content 由来の列拡大を抑止 → nowrap 長文セルがあっても全列等幅を維持。 */
.b7-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
/* 全セルラッパー: アンバサダー有無に関わらず行高さを統一するため、
   .b7-cell と .b7-cell--ambassador 両方が同じ縦構造を持つ。
   非アンバサダーセルは ::after で同サイズの透明プレースホルダを表示。 */
.b7-cell,
.b7-cell--ambassador {
  display: flex;
  flex-direction: column;
}
.b7-cell .b7-logo,
.b7-cell--ambassador .b7-logo {
  /* 枠は aspect-ratio: 5/3 を維持 */
  width: 100%;
}
/* バッジサイズ: 現在から × 1.20 (旧 clamp(16,1.6vw,24) → 新 clamp(19,1.92vw,29)) */
.b7-cell-badge {
  display: block;
  height: clamp(19px, 1.92vw, 29px);
  width: auto;
  margin: clamp(4px, 0.6vw, 10px) auto 0;
  object-fit: contain;
}
/* 非アンバサダーセル: バッジと同サイズの透明プレースホルダで高さを揃える */
.b7-cell:not(.b7-cell--ambassador)::after {
  content: '';
  display: block;
  height: clamp(19px, 1.92vw, 29px);
  margin-top: clamp(4px, 0.6vw, 10px);
}
/* 各セクション (フラグシップ / コンテンツ / コア / コミュニティフレンド) 見出し */
.b7-section-title {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.05em;
  color: #ffffff;
  opacity: 0.9;
  margin: clamp(16px, 2vw, 32px) 0 clamp(4px, 0.6vw, 10px);
}
.b7-section-title:first-child {
  margin-top: 0;
}
.b7-logo {
  background: #ffffff;
  border-radius: 2px;
  /* padding を % (セル幅基準) で指定 → PC/SP で「枠に対するロゴサイズ」が常に一定。
     ※ ロゴ画像内蔵余白を全削除した前提で、cell padding 単独で
       一般ブランドガイドライン基準のアイソレーション (clear space ≈ ロゴ高さの 25-30%) を確保。 */
  padding: 20% 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 3;
  /* 安全網: transform: scale で 100% を超えるロゴが narrow viewport で
     セル枠を超え隣のセル/gap にはみ出すのを防止。 */
  overflow: hidden;
  /* a タグ化: テキスト装飾なし + クリック反応 + 微ホバーエフェクト */
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.b7-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.b7-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* ロゴが無い企業 (マクドナルド等) はテキストで社名表示 */
.b7-logo--text {
  text-align: center;
}
.b7-logo-text {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.35;
  color: #1a1a1a;
  letter-spacing: 0.05em;
  display: block;
  /* 長い社名は折返し許容 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* テキスト表示で改行禁止 (マクドナルド等)。
   padding は通常セル (`.b7-logo`) と同じ厚いアイソレーションを維持し、
   フォントを十分小さくスケールさせて狭い内側領域 (~158px) でも 1行表示を維持。 */
.b7-logo--nowrap .b7-logo-text {
  white-space: nowrap;
  /* 内側 ~158px に長い社名 (例: 「日本ケンタッキー・フライド・チキン」17文字) を収めるための小さめスケール */
  font-size: clamp(6px, 0.65vw, 9px);
  word-break: normal;
  overflow-wrap: normal;
}
/* 小ロゴ表示 (もう一回り小さく)。aspect-ratio はそのまま枠を保ちつつ
   img の最大寸を 70% に制限してアイソレーション余白を更に厚く。 */
.b7-logo--small img {
  max-width: 70%;
  max-height: 70%;
}
/* 正方形タイプロゴ: 5:3 セル内で高さ制約により小さくなりがちだが、
   一般アイソレーション基準を満たすため V padding 12% を確保 (=cell 高さの 20%)。
   H は square ロゴが必要以上に広がらないよう default と同じ 18%。 */
.b7-logo--square {
  padding: 12% 18%;
}
/* 中サイズ拡大 (横長で視認性を上げたい場合)。default より控えめ余白。 */
.b7-logo--medium {
  padding: 15% 13%;
}
/* 大幅拡大 (BELLPARK 等)。padding 最小化 + transform スケールで強調。
   ※ 一般アイソレーション基準を意図的に超過 (デザイン上の強調目的)。 */
.b7-logo--larger {
  padding: 7%;
}
.b7-logo--larger img {
  transform: scale(1.4);
  transform-origin: center;
}
/* スケール微調整モディファイア (transform で視覚サイズだけを変更、padding は別モディファイア依存)。
   定義順を --larger より後にして specificity 同位での優先を確保。 */
.b7-logo--scale-65  img { transform: scale(0.65); transform-origin: center; }
.b7-logo--scale-80  img { transform: scale(0.80); transform-origin: center; }
.b7-logo--scale-85  img { transform: scale(0.85); transform-origin: center; }
.b7-logo--scale-90  img { transform: scale(0.90); transform-origin: center; }
.b7-logo--scale-110 img { transform: scale(1.10); transform-origin: center; }
.b7-logo--scale-120 img { transform: scale(1.20); transform-origin: center; }
.b7-logo--scale-140 img { transform: scale(1.40); transform-origin: center; }
.b7-logo--scale-144 img { transform: scale(1.44); transform-origin: center; }
.b7-logo--scale-168 img { transform: scale(1.68); transform-origin: center; }
.b7-logo--scale-173 img { transform: scale(1.73); transform-origin: center; }
.b7-logo--scale-208 img { transform: scale(2.08); transform-origin: center; }


/* ---------------------------------------------------------------------
   14B. B8: About Us (運営・協賛コミュニティ紹介)
   --------------------------------------------------------------------- */
.b8 {
  background: #f7f5f0;  /* オフホワイト / クリーム — b7 の青と差別化 */
  color: #1a1a1a;
  padding: clamp(70px, 8vw, 130px) clamp(20px, 5vw, 90px) clamp(80px, 9vw, 140px);
}
.b8-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.b8-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.b8-title {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  /* 同構造 (b5-title / b7-title) と同じサイズ */
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin-bottom: 22px;
  line-height: 1.1;
}
.b8-divider {
  width: 48px;
  height: 1px;
  background: #1a1a1a;
  margin: 0 auto 22px;
  opacity: 0.6;
}
.b8-sub {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 28px;
}
.b8-tagline {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.6;
  color: #FF8000;
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}
.b8-lead {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.9;
  color: #1a1a1a;
  max-width: 880px;
  margin: 0 auto;
  /* 中央寄せ */
  text-align: center;
}

/* カードグリッド (PC 2列、SP 1列) */
.b8-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
.b8-card {
  background: #ffffff;
  border-radius: clamp(8px, 1.4vw, 20px);
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 3vw, 48px);
  position: relative;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
/* カード上部: ロゴ + ナンバーを横並び */
.b8-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.b8-card-logo {
  display: block;
  width: auto;
  height: clamp(36px, 4vw, 56px);
  max-width: 70%;
  object-fit: contain;
}
.b8-card-num {
  font-family: 'Sen', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.05em;
  color: #FF8000;
  line-height: 1;
}
.b8-card-kicker {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.6;
  color: #777;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.b8-card-name {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 20px;
}
.b8-card-text {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.9;
  color: #1a1a1a;
  margin-bottom: 24px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.b8-card-meta {
  margin: 0 0 28px;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.7;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 10px;
}
.b8-card-meta dt {
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  color: #888;
  white-space: nowrap;
}
.b8-card-meta dd {
  margin: 0;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 500;
  color: #1a1a1a;
}
.b8-card-link {
  /* 下端に揃える: card は flex column */
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  /* 通常状態: オレンジ背景 + 白抜き文字 (border をオレンジに揃えて hover 時の形状変化なし) */
  background: #FF8000;
  border: 1px solid #FF8000;
  border-radius: 999px;
  font-family: "Yu Gothic Heavy", "游ゴシック体", YuGothic, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 14px);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.b8-card-link:hover {
  /* ロールオーバー: 白背景 + 黒罫線 + 黒文字 */
  background: #ffffff;
  border-color: #1a1a1a;
  color: #1a1a1a;
}
.b8-card-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.b8-card-link:hover .b8-card-arrow {
  transform: translateX(4px);
}


/* ---------------------------------------------------------------------
   15. 共通アニメ部品 (.cf-* — JS で行単位カラフル帯マスクに利用)
   <br> 以外の自動折返しを抑止 (SP含め指定の <br> 位置でのみ改行)
   --------------------------------------------------------------------- */
/* cf-line は <br> 区切り単位のブロック。内部の cf-char が自然折返しする。
   JS が レイアウト後に offsetTop で視覚行を検出し、行ごとに帯オーバーレイをアニメ。 */
.cf-line {
  display: inline;
}
.cf-char {
  display: inline;
}


/* =====================================================================
   16. レスポンシブ (@media)
   各セクションごとにまとめず、ブレイクポイント単位で集約。
   (元ファイルでも複数の @media (max-width:768px)/(480px) が散在していたため、
    重複する宣言を統合して読みやすさを優先する)
   ===================================================================== */

/* ---------- @media (max-width: 1100px) ---------- */
@media (max-width: 1100px) {
  /* .top-text / .bottom-text font-size は clamp() で自動調整 */
  nav ul { gap: 24px; }
  nav a { font-size: 14px; }
  .header-logo-img { height: 30px; }
  header { padding: 0 22px 0 30px; } /* About Us と SNS 右端を揃える */
  .anime-area { margin-bottom: -71px; }
  .anime-area.compact { transform: translateY(-86px); }
}

/* ---------- @media (max-width: 768px) ---------- */
@media (max-width: 768px) {
  /* --- ヘッダー / ナビ (SP: グローバルナビ非表示・ハンバーガー表示) --- */
  .header-right nav { display: none; }
  header { padding: 0 80px 0 16px; }
  /* グローバルナビが消えるぶん、ロゴを一回り大きく */
  .header-logo-img { height: 34px; }
  .menu-btn { display: flex; }

  /* --- SNS: SP では画面右固定 SNS アイコンを非表示 (SP メニュー内に集約) --- */
  .social { display: none; }

  /* --- メインビジュアル (SP は文字・ロゴを大きく) --- */
  /* 3行とも 1 行に収まるよう nowrap + viewport 連動フォント */
  .top-text { padding: 0 12px; font-size: clamp(15px, 5.2vw, 30px); }
  .top-text .line { white-space: nowrap; }
  /* SP: タイプライター 2 行分の高さを予約してレイアウトシフト防止 */
  .bottom-text { padding: 0 16px; font-size: clamp(18px, 4.5vw, 30px); line-height: 1.55; height: auto; min-height: calc(1.55em * 2); }
  /* ロゴアニメ: SP では画面横幅いっぱいに */
  .anime-area { max-width: 100%; margin-bottom: -45px; }
  .anime-area.compact { transform: translateY(-54px); }

  /* --- SCROLL + ロゴ --- */
  .scroll-indicator { padding: 50px 0 0; }
  .scroll-text { font-size: 12px; }
  .scroll-line { height: 70px; }
  .logo-marquee-item { height: 60px; }

  /* --- ブロック3: WORK IN LIFEって何? --- */
  /* SP: 上端下降量 (--top-descent = 90px) より下に panel 2 が無いよう padding-bottom 確保 */
  .b3 { padding: 50px 0 110px; }
  .b3-head { margin-bottom: 40px; }
  /* SP: カーテン上端 フラット位置を浅めに (画面が狭く下降量が大きいと圧迫感) */
  .b3-curtain {
    --top-descent: 90px;
  }
  /* SP: bracket-offset を控えめにして、padding-left を広めにとり、
     L字縦線とテキストの距離を確保する */
  /* SP: padding 左右を統一 (36px) してテキスト左右余白を均等に */
  .b3-panel { padding: 28px 36px; --bracket-offset: 10px; }
  /* SP ではパネルを画面幅いっぱい近くまで広げる (max-width 96%、margin 2%) */
  .b3-panel-large { max-width: 82%; margin: 0 auto 50px 2%; }
  .b3-panel-small { max-width: 82%; margin: 0 2% 0 auto; }
  /* パネル1〜4 SPフォント: .b3-catch / .b3-body / .b4-title / .b4-body は
     base 側で clamp() フルードスケール済みなので font-size 上書きせず、
     margin / line-height / text-justify のみ調整。
     ※ HTML 内 <br> は SP では無効化 (PC 用の改行位置が SP の狭幅では不自然になるため、
        text-justify による自然折返しに任せる)。 */
  .b3-title { font-size: 28px; margin-bottom: 14px; }
  .b3-sub   { font-size: 15px; }
  /* 大見出しは justify せず自然に (= 読みやすさ優先)、本文は両端揃えで密度感を出す */
  .b3-catch { line-height: 1.5; margin-bottom: 18px; }
  .b3-body  { line-height: 1.8; text-align: justify; text-justify: inter-ideograph; }
  .b3-catch br, .b3-body br, .b4-title br, .b4-body br { display: none; }
  .b3-body-strong { font-size: clamp(11px, 2.8vw, 26px); line-height: 1.75; }

  /* bg1 背景: SP ではパララックス量・バッファを縮小。
     bg.top = -100px (= 振幅) で進入時に画像真の上端が clip top に一致 */
  .b3-bg-clip { bottom: -420px; } /* V字 (clamp 14vw≈108px on 768) + パララックス 100 + 余裕 */
  .b3-bg {
    top: -100px;
    height: calc(100% + 200px);
    background-size: cover;
  }

  /* --- ブロック4: SP --- */
  /* SP: パネル3 をオレンジ上端 (--top-descent 90px) すぐ下へ。
     b4.margin-top -100px + padding-top 60px → panel3 top = b3.bottom - 40px
     curtain top = b3.bottom - 90px → ギャップ 50px、bubble-a -40px と接近 */
  .b4 .blk-inner { padding: clamp(50px, 8vw, 80px) 16px 0; }
  /* panel 3 → panel 4 もギャップ 50px に統一 */
  .b4-row { margin-bottom: 0; }
  .b4-placeholder { padding: 28px 36px; --bracket-offset: 10px; margin-bottom: 50px; max-width: 78%; }
  /* base 側 clamp() を尊重 (font-size 上書きしない)。大見出しは justify せず読みやすさ優先。 */
  .b4-title { line-height: 1.5; margin-bottom: 18px; }
  .b4-body  { line-height: 1.8; text-align: justify; text-justify: inter-ideograph; }

  /* SP: panel 3 は左寄せ・panel 4 は右寄せ (panel 1 / 2 と同じパターン)。
     空いた側にビジネスマン丸囲み写真をランダム感で配置 (overlap OK)。 */
  .b4-row {
    display: block;
    position: relative;
  }
  .b4-row-3 > .b4-placeholder {
    margin: 0 auto 50px 2%;   /* 左寄せ (panel 1 と同じ) + 下 50px ギャップ */
    max-width: 78%;
    width: auto;
  }
  .b4-row-4 > .b4-placeholder {
    margin: 0 2% 50px auto;   /* 右寄せ (panel 2 と同じ) + 下 50px ギャップ */
    max-width: 78%;
    width: auto;
  }
  .b4-bubble-wrap {
    position: absolute;
    top: auto; bottom: auto; left: auto; right: auto;
    z-index: 2;            /* panel (z:10) より下、bg より上 */
  }
  /* Row 3 SP: X 列を全て distinct (-8%, 22%, -3%, 42%) にして水平方向の重なり回避 */
  .b4-row-3 .b4-bubble-a {
    top: -35px;     right: -8%;
    width: clamp(120px, 33vw, 210px);   height: clamp(120px, 33vw, 210px);
  }
  .b4-row-3 .b4-bubble-b {
    top: 28%;       right: 22%;
    width: clamp(84px, 22.5vw, 143px);  height: clamp(84px, 22.5vw, 143px);
  }
  .b4-row-3 .b4-bubble-c {
    bottom: -150px; right: -3%;
    width: clamp(105px, 28.5vw, 180px); height: clamp(105px, 28.5vw, 180px);
  }
  .b4-row-3 .b4-bubble-d {
    bottom: -50px;  right: 42%;
    width: clamp(75px, 19.5vw, 120px);  height: clamp(75px, 19.5vw, 120px);
  }
  /* Row 4 SP: Row 3 ミラー (X: -8%, 22%, -3%, 42%) */
  .b4-row-4 .b4-bubble-e {
    top: -30px;     left: -8%;
    width: clamp(128px, 34.5vw, 218px); height: clamp(128px, 34.5vw, 218px);
  }
  .b4-row-4 .b4-bubble-f {
    top: 28%;       left: 22%;
    width: clamp(81px, 21vw, 135px);    height: clamp(81px, 21vw, 135px);
  }
  .b4-row-4 .b4-bubble-g {
    bottom: -150px; left: -3%;
    width: clamp(108px, 30vw, 188px);   height: clamp(108px, 30vw, 188px);
  }
  .b4-row-4 .b4-bubble-h {
    bottom: -45px;  left: 42%;
    width: clamp(78px, 19.5vw, 128px);  height: clamp(78px, 19.5vw, 128px);
  }
  /* arc (オレンジドーム) は ② オレンジ階層 (z:30) を継承 */

  /* レガシー: 旧 .b4-bubble.b1 〜 .b8 / .b4-bubbles レイアウト用 (現 HTML 未使用、保持) */
  .b4-bubbles { height: 380px; margin: 40px 0; }
  .b4-bubble.b1, .b4-bubble.b5 { width: 80px; height: 80px; }
  .b4-bubble.b2, .b4-bubble.b6 { width: 64px; height: 64px; }
  .b4-bubble.b3, .b4-bubble.b7 { width: 90px; height: 90px; }
  .b4-bubble.b4, .b4-bubble.b8 { width: 60px; height: 60px; }
  .b4-bubbles-text { padding: 0 28%; }

  /* --- ブロック5: MANIFEST --- */
  /* MANIFEST: 左右余白を 24px (旧 12px の 2倍) でパネルとの間隔を広く */
  .b5 { padding-left: 24px; padding-right: 24px; padding-bottom: 70px; }
  .b5-inner { padding: 50px 30px 56px; max-width: 100%; }
  .b5-head { margin-bottom: 40px; }
  .b5-decls { gap: 26px; }
  .b5-decl { gap: 22px; }
  .b5-tag { width: 100px; font-size: 13px; }
  .b5-decl-text { font-size: 14px; line-height: 1.75; }
  /* SP では本文 <br> を無効化し、自然な折返しに任せる */
  .b5-decl-text br { display: none; }

  /* --- ブロック6: REAL TALK MOVIE (SP: 1 列に、横幅広め) --- */
  .b6 { padding: 60px 8px; }
  .b6-cards { grid-template-columns: 1fr; gap: 22px; }
  .b6-card { padding: 14px; gap: 14px; }
  .b6-card-text { font-size: 14px; line-height: 1.8; min-height: calc(14px * 1.8 * 5); }
  /* SP: b6-sub は両端揃え (start から end まで伸ばす、最終行のみ左寄せ) + <br> 無効化 */
  .b6-sub { text-align: justify; text-justify: inter-ideograph; }
  .b6-sub br { display: none; }

  /* Vimeo モーダル SP */
  .vm-modal-dialog { width: 96vw; }
  .vm-modal-close { top: -36px; width: 30px; height: 30px; font-size: 26px; }

  /* --- ブロック7: COMPANIES (SP: 2 列に、中央寄せ) --- */
  .b7 { padding: 60px 20px; }
  /* blk-inner 継承の padding 0 40px を打ち消して inner を viewport 中央に配置 */
  .b7 .b7-inner { padding: 0; }
  .b7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; justify-content: center; }
  /* SP の padding 上書き削除: base 側 % 指定でセル幅比一致 (PC/SP 同比率) */

  /* --- ブロック8: About Us (SP: 1列カード) --- */
  .b8 { padding: clamp(50px, 7vw, 80px) 20px; }
  .b8 .b8-inner { padding: 0; }
  .b8-cards { grid-template-columns: 1fr; gap: 20px; }
  .b8-card { padding: clamp(24px, 5vw, 36px) clamp(20px, 5vw, 28px); }
  .b8-card-link { padding: 11px 18px; }
}

/* ---------- @media (max-width: 480px) — 小型モバイル ---------- */
@media (max-width: 480px) {
  /* --- ヘッダー / ナビ --- */
  /* 小型 SP でも、グローバルナビが消えるぶんロゴを一回り大きく */
  .header-logo-img { height: 28px; }
  header { height: 70px; padding: 0 64px 0 12px; }
  main { padding-top: 80px; }
  .menu-btn { top: 18px; right: 12px; width: 34px; height: 34px; } /* (70-34)/2 */

  /* --- SNS --- */
  /* 小型 SP も .social 非表示 (768 から継承) */

  /* --- メインビジュアル (小型 SP) --- */
  .top-text { padding: 0 8px; font-size: clamp(14px, 5.2vw, 22px); }
  /* .top-text .line は 768px の nowrap を継承 */
  /* 小型 SP: タイプライター 2 行分の高さを予約 */
  .bottom-text { padding: 0 12px; font-size: clamp(16px, 5vw, 24px); line-height: 1.55; height: auto; min-height: calc(1.55em * 2); }
  .anime-area { max-width: 100%; margin-bottom: -32px; }
  .anime-area.compact { transform: translateY(-38px); }

  /* --- SCROLL + ロゴ --- */
  .scroll-indicator { padding: 40px 0 0; }
  .scroll-text { font-size: 11px; letter-spacing: 0.05em; }
  .scroll-line { height: 56px; }
  .logo-marquee-item { height: 48px; }

  /* --- ブロック3 --- */
  /* 小型 SP: 上端下降量 (--top-descent = 70px) より下に panel 2 が無いよう padding-bottom 確保 */
  .b3 { padding: 36px 0 95px; }
  .b3-head { margin-bottom: 24px; }
  /* 小型 SP: カーテン上端 フラット位置を更に浅めに */
  .b3-curtain {
    --top-descent: 70px;
  }
  /* 小型 SP: bracket-offset 8px、padding-left 30px で隙間確保 */
  /* 小型 SP も padding 左右統一 (30px) */
  .b3-panel { padding: 22px 30px; --bracket-offset: 8px; }
  /* 小型 SP もパネルを画面いっぱいに */
  .b3-panel-large { max-width: 83%; margin: 0 auto 32px 1%; }
  .b3-panel-small { max-width: 83%; margin: 0 1% 0 auto; }
  /* パネル1〜4 SPフォント (狭幅: デスクトップ比 約 0.55倍) */
  .b3-title { font-size: 22px; margin-bottom: 12px; }
  .b3-sub   { font-size: 13px; }
  /* font-size は base 側 clamp() を尊重。大見出しは justify せず読みやすさ優先。 */
  .b3-catch { line-height: 1.5; margin-bottom: 14px; }
  .b3-body  { line-height: 1.75; text-align: justify; text-justify: inter-ideograph; }
  .b3-body-strong { font-size: clamp(11px, 4vw, 20px); line-height: 1.7; }

  /* bg1 背景: 小型 SP では更にバッファ・パララックスを絞る。
     bg.top = -70px (= 振幅) で進入時に画像真の上端が clip top に一致 */
  .b3-bg-clip { bottom: -280px; }
  .b3-bg {
    top: -70px;
    height: calc(100% + 140px);
    background-size: cover;
  }

  /* --- ブロック4: 小型 SP --- */
  /* 小型 SP: --top-descent 70px に合わせてパネル3 を上方に */
  .b4 .blk-inner { padding: clamp(40px, 8vw, 60px) 12px 0; }
  .b4-row { margin-bottom: 0; }
  .b4-placeholder { margin-bottom: 32px; max-width: 82%; padding: 22px 30px; --bracket-offset: 8px; }
  /* font-size は base 側 clamp() を尊重。大見出しは justify せず読みやすさ優先。 */
  .b4-title { line-height: 1.5; margin-bottom: 14px; }
  .b4-body  { line-height: 1.75; text-align: justify; text-justify: inter-ideograph; }
  /* 小型 SP: バブル更に小型化 (768px のflex-wrap配置は継承) */
  /* 小型 SP: panel は 82% 幅 (768 の左右寄せ + bubble 絶対配置を継承、clamp で自動縮小) */
  .b4-row-3 > .b4-placeholder { max-width: 82%; margin: 0 auto 32px 1%; }
  .b4-row-4 > .b4-placeholder { max-width: 82%; margin: 0 1% 32px auto; }

  /* --- ブロック5: MANIFEST 小型 SP (タグを上、本文を下に積む) --- */
  /* 小型 SP も MANIFEST 左右余白を 16px (旧 8px の 2倍) に */
  .b5 { padding-left: 16px; padding-right: 16px; padding-bottom: 50px; }
  .b5-inner { padding: 36px 20px 40px; max-width: 100%; }
  .b5-head { margin-bottom: 30px; }
  .b5-decls { gap: 24px; }
  /* 宣言: タグを上に中央寄せ、本文を下に */
  .b5-decl { flex-direction: column; align-items: center; gap: 10px; }
  .b5-tag { width: 90px; aspect-ratio: 2.2 / 1; font-size: 12px; }
  .b5-decl-text { font-size: 14px; line-height: 1.75; }

  /* --- ブロック6: REAL TALK MOVIE 小型SP (横幅さらに広く) --- */
  .b6 { padding: 50px 4px; }
  .b6-card { padding: 10px; gap: 12px; }
  .b6-card-logo { height: 26px; }
  .b6-card-company { font-size: 12px; }
  .b6-card-text { font-size: 14px; line-height: 1.75; min-height: calc(14px * 1.75 * 5); }

  /* --- ブロック7: COMPANIES 小型SP (2 列維持) --- */
  .b7 { padding: 50px 14px; }
  .b7 .b7-inner { padding: 0; }
  .b7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-content: center; }
  /* 小型 SP も base 側 % 指定を尊重 (px 上書きせず PC と同比率) */

  /* --- ブロック8: About Us 小型SP --- */
  .b8 { padding: 50px 14px; }
  .b8 .b8-inner { padding: 0; }
  .b8-card { padding: 22px 18px; }
  .b8-card-num { font-size: 32px; margin-bottom: 14px; }
  .b8-card-name { font-size: 20px; margin-bottom: 16px; }
}