@charset "UTF-8";
/* ==========================================================================
   b.s. — common.css
   全ページ共通のスタイル。
   - 色・書体・傾きなどの基本値は「TOKENS」を編集すると全ページに反映されます。
   - 各ページ固有の配置は assets/css/<ページ名>.css に書いています。

   ■ デザイン座標系について
   PCデザイン（Illustrator）は幅1280pxで作られています。
   このサイトでは「--u（1デザインpx）」という単位で、
   文字・写真・余白をデザインと同じ比率で拡大縮小します。
   例）デザイン上 23.55px の文字 → font-size: calc(23.55 * var(--u))
   ========================================================================== */

@layer reset, tokens, base, components, layout, pages, motion, utilities;

/* =========================
   RESET
========================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }
  small { font-size: inherit; }
}

/* =========================
   TOKENS（色・書体・傾き）
========================= */
@layer tokens {
  :root {
    /* --- 色 --- */
    --c-pink: #dfa5c6;          /* サイト基調のピンク */
    --c-ink: #231815;           /* 文字の基本色（濃い茶黒） */
    --c-black: #000;
    --c-white: #fff;
    --c-footer: #231815;        /* フッター・contactボタン */
    --c-mustard: #e5b525;       /* 「仕事は、冒険だ。」の背景 */
    --c-green: #00f000;         /* 三代目PROJECT のグリーン */
    --c-yellow: #fff000;        /* PURE WINS ネットshop の帯 */
    --c-grey-1: #d9d9d9;        /* works の帯（濃い順） */
    --c-grey-2: #e5e5e5;
    --c-grey-3: #f2f2f2;
    --c-grey-4: #ffffff;
    --c-about-box: #e5e5e5;     /* about の面 */
    --c-about-word: #666666;    /* about の文字 */

    /* --- 書体 ---
       元デザイン → Web実装
       ヒラギノ明朝 ProN W6/W3 → Noto Serif JP
       しっぽり明朝             → Shippori Mincho（Google Fonts版）
       Galvji                    → Geist
       コーポレート・ロゴ ver2   → Source Sans 3（欧文）＋ M PLUS 1p（和文）  */
    --ff-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --ff-shippori: "Shippori Mincho", "Noto Serif JP", serif;
    --ff-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
    --ff-corporate: "Source Sans 3", "M PLUS 1p", "Noto Sans JP", sans-serif; /* コーポレート・ロゴ ver2 の代替：欧文＝Source Sans 3／和文＝M PLUS 1p */

    --fw-mincho-strong: 700;    /* ヒラギノ明朝 W6 相当 */
    --fw-mincho-regular: 400;   /* ヒラギノ明朝 W3 相当 */

    /* ベースライン計算用の係数（書体ごとの縦メトリクスから算出。通常は変更不要） */
    --k-mincho: 0.4325;
    --k-shippori: 0.436;
    --k-sans: 0.35;
    --k-mplus: 0.43;
    --k-corporate: 0.312;  /* Source Sans 3（行の基準になる書体） */

    /* --- 傾き（デザインの文字はすべて縦方向に傾斜＝skewY） --- */
    --slant-ja: 12.3deg;        /* 和文 */
    --slant-en: 10.4deg;        /* 英字（ナビ・巨大英字） */

    /* --- デザイン座標の単位 ---
       --vw はJavaScriptがスクロールバーを除いた画面幅(px)を入れます。
       1600pxを超える画面では構図の拡大を止めて中央に置きます。 */
    --design-w: 1280;
    --design-max: 1600px;
    --u: calc(min(var(--vw, 100vw), var(--design-max)) / var(--design-w));
    --frame-x: calc((var(--vw, 100vw) - var(--design-w) * var(--u)) / 2);

    /* --- スマートフォン／タブレット用の単位（〜1023px） ---
       SP版は幅390pxを基準に設計しています（--s ＝ SPデザインの1px）。
       --s  : 横方向の位置・幅・大きな文字（画面幅に比例）
       --sv : 縦方向の余白・写真の高さ
       --sf : 本文の文字サイズ
       スマートフォン（〜433px）では3つとも同じ値。タブレットの広い画面では
       --sv と --sf の伸びを抑え、写真が縦に長くなりすぎず、本文が読みやすい大きさに収まるようにしています。 */
    --sp-w: 390;
    --s: calc(var(--vw, 100vw) / var(--sp-w));
    --sv: min(var(--s), calc(1.11px + (var(--s) - 1.11px) * 0.45));
    --sf: min(var(--s), calc(1.11px + (var(--s) - 1.11px) * 0.2));

    /* --- 動き --- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  }
}

/* =========================
   BASE
========================= */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    background: var(--c-pink);
    color: var(--c-ink);
    font-family: var(--ff-mincho);
    font-weight: var(--fw-mincho-strong);
    font-kerning: none;          /* 和文はデザイン（ヒラギノ）と同じくベタ組み。欧文のみカーニングを有効化 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* ページ内リンクで移動したとき、固定ヘッダーに隠れない位置で止める */
  [id] { scroll-margin-top: calc(160 * var(--u)); }
  @media (max-width: 1023px) { [id] { scroll-margin-top: 96px; } }
  [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

  /* 画面外へはみ出す巨大な文字や写真を、横スクロールにせず切り取る */
  main { display: block; overflow-x: clip; }
  :focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 4px;
  }
  ::selection { background: var(--c-ink); color: var(--c-pink); }
}

/* =========================
   LAYOUT : HEADER（固定）
   元デザインのヘッダー（左上ロゴ／傾いたナビ／contact）を
   背景の帯を付けずにそのまま画面上部へ固定します。
   写真の上を通過するときは、JavaScriptが data-tone="light" を付け、
   ロゴとナビを白＋ごく弱い影に切り替えます。
========================= */
@layer layout {
  /* ヘッダー自体は高さを持たず、ロゴ・ナビ・contact をそれぞれ画面に固定します
     （写真や巨大文字との重なりを、部品ごとに調整するため） */
  .l-header { --scene-y: 0; color: var(--c-ink); }
  .l-header__logo,
  .l-header__nav,
  .l-header__contact { position: fixed; z-index: 100; }

  /* ロゴ（デザイン：x24 / y16.75 / 幅271.5） */
  .l-header__logo {
    left: calc(var(--frame-x) + 24 * var(--u));
    top: calc(16.75 * var(--u));
    width: calc(271.5 * var(--u));
    transition: color 0.35s var(--ease-out), filter 0.35s var(--ease-out);
  }
  .l-header__logo .c-logo { width: 100%; height: auto; }

  /* グローバルナビ（1語ずつ傾いて並ぶ） */
  .l-header__nav {
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    transition: color 0.35s var(--ease-out);
  }
  .l-header__list { display: grid; grid-template: auto / minmax(0, 1fr); }
  .l-header__list > * { grid-area: 1 / 1; align-self: start; justify-self: start; }
  .l-header__item {
    --fs: 24; --lh: 1; --k: var(--k-sans); --slant: var(--slant-en);
    --ls: 0.018em;
    font-family: var(--ff-sans);
    font-kerning: normal;
    font-weight: 500;
  }
  .l-header__item a {
    position: relative;
    display: inline-block;
    padding-block: calc(6 * var(--u));
    margin-block: calc(-6 * var(--u));
    pointer-events: auto;
    transition: translate 0.55s var(--ease-out), text-shadow 0.35s var(--ease-out);
  }
  /* hover：傾斜の方向へ進み、傾いた線が文字の下を走る */
  .l-header__item a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(1 * var(--u));
    height: max(1.5px, calc(2 * var(--u)));
    background: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.5s var(--ease-out);
  }
  .l-header__item a:hover,
  .l-header__item a:focus-visible { translate: calc(14 * var(--u)) 0; }
  .l-header__item a:hover::after,
  .l-header__item a:focus-visible::after { scale: 1 1; }
  .l-header__item a[aria-current="page"]::after { scale: 1 1; }
  .l-header__item--philosophy { --x: 411.7; --y: 101.4; }
  .l-header__item--works      { --x: 620.6; --y: 101.4; }
  .l-header__item--projects   { --x: 736.8; --y: 101.4; }
  .l-header__item--characters { --x: 880.7; --y: 101.4; }

  /* contact ボタン（デザイン：x1092 / y62 / 166×47） */
  .l-header__contact {
    left: calc(var(--frame-x) + 1092 * var(--u));
    top: calc(62 * var(--u));
    width: calc(166 * var(--u));
    height: calc(47 * var(--u));
    display: grid;
    place-items: center;
    padding-left: calc(2 * var(--u));
    background: var(--c-footer);
    color: var(--c-white);
    font-family: var(--ff-sans);
    font-kerning: normal;
    font-weight: 500;
    font-size: calc(24 * var(--u));
    letter-spacing: 0.031em;
    line-height: 1;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
  }
  .l-header__contact:hover { background: var(--c-white); color: var(--c-ink); }

  /* SPECIALページ（仕事は、冒険だ。／三代目PROJECT）：ロゴだけを固定 */
  .l-header--special .l-header__logo { color: var(--c-ink); }

  /* 写真の上を通過するとき：白＋ごく淡い影で輪郭を補う */
  .l-header[data-tone="light"] .l-header__logo,
  .l-header[data-tone="light"] .l-header__nav { color: var(--c-white); }
  .l-header[data-tone="light"] .l-header__logo {
    filter: drop-shadow(0 0 calc(1.5 * var(--u)) rgb(0 0 0 / 0.3)) drop-shadow(0 0 calc(12 * var(--u)) rgb(0 0 0 / 0.3));
  }
  .l-header[data-tone="light"] .l-header__item a {
    text-shadow: 0 0 calc(1.5 * var(--u)) rgb(0 0 0 / 0.35), 0 0 calc(12 * var(--u)) rgb(0 0 0 / 0.4);
  }
  /* ロゴ／ナビの真下を大きな文字が通過するとき、その行だけを一時的に淡くして
     ヘッダーと文字が重なって読みにくくなるのを防ぐ（JavaScriptが付与） */
  .c-type .line { transition: opacity 0.35s var(--ease-out); }
  .c-type .line[data-under-header] { opacity: 0.2; }

  /* =========================
     LAYOUT : FOOTER
  ========================= */
  .l-footer {
    --scene-y: 0;
    display: grid;
    grid-template: auto / minmax(0, 1fr);
    min-height: calc(122 * var(--u));
    background: var(--c-footer);
    color: var(--c-white);
  }
  .l-footer__copy {
    /* デザイン：x427.4 / ベースライン72（フッター上端から） */
    --x: 427.4; --y: 72; --fs: 25; --lh: 1; --slant: 0deg;
    --ls: 0.04em;
    font-weight: var(--fw-mincho-regular);
  }
  /* Privacy Policy：コピーライトの右に小さく、目立たせずに置くテキストリンク */
  .l-footer__privacy {
    display: inline-block;
    margin-left: 2.2em;
    padding: 0.6em 0;          /* 押せる高さを確保（見た目の位置は変えない） */
    margin-block: -0.6em;
    font-size: 0.72em;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.62;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: opacity 0.3s linear;
  }
  .l-footer__privacy:hover,
  .l-footer__privacy:focus-visible { opacity: 1; }
  .l-footer__privacy:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
}

/* =========================
   LAYOUT : SMARTPHONE／TABLET（〜1023px）
   ヘッダーは「ロゴ／contact／menu」に組み替え、
   グローバルナビは menu ボタンで開く全画面メニューに移します。
========================= */
@layer layout {
  /* PCではメニュー関連を表示しない */
  .l-header__menu,
  .l-menu { display: none; }

  @media (max-width: 1023px) {
    .l-header__nav { display: none; }

    .l-header__logo {
      left: 16px;
      top: 13px;
      width: clamp(92px, calc(106 * var(--s)), 124px);
    }

    /* contact：見た目は小さな黒い札、押せる範囲は上下に広げて48px確保 */
    .l-header__contact {
      left: auto;
      right: 68px;
      top: 16px;
      width: 78px;
      height: 32px;
      padding-left: 1px;
      font-size: 14px;
      letter-spacing: 0.03em;
    }
    .l-header__contact::before {
      content: "";
      position: absolute;
      inset: -8px -4px;
    }

    /* menu ボタン（48×48px）：傾いた語と、傾いた2本線 */
    .l-header__menu {
      position: fixed;
      z-index: 160;
      top: 8px;
      right: 8px;
      display: grid;
      place-items: center;
      width: 52px;
      height: 48px;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.35s var(--ease-out);
    }
    .l-header__menu-label {
      position: relative;
      display: block;
      font-family: var(--ff-sans);
      font-kerning: normal;
      font-weight: 500;
      font-size: 15px;
      line-height: 1;
      letter-spacing: 0.02em;
      transform: skewY(calc(-1 * var(--slant-en)));
      padding-bottom: 9px;
    }
    .l-header__menu-label::before,
    .l-header__menu-label::after {
      content: "";
      position: absolute;
      left: 0;
      height: 2px;
      background: currentColor;
      transition: scale 0.5s var(--ease-out), translate 0.5s var(--ease-out);
      transform-origin: left center;
    }
    .l-header__menu-label::before { bottom: 3px; width: 100%; }
    .l-header__menu-label::after { bottom: -2px; width: 100%; scale: 0.55 1; translate: 0.45em 0; }
    .l-header[data-tone="light"] .l-header__menu { color: var(--c-white); }
    .l-header[data-tone="light"] .l-header__menu-label { text-shadow: 0 0 10px rgb(0 0 0 / 0.4); }

    /* =========================
       MENU（全画面）
       ページ下部のナビバナーを、傾き・ズレ・巨大文字で再構成
    ========================= */
    .l-menu {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--c-pink);
      padding: 76px 0 20px;
    }
    .l-menu:not([hidden]) { display: flex; flex-direction: column; }
    .l-menu[hidden] { display: none; }
    .l-menu__nav { flex: 1 0 auto; display: flex; flex-direction: column; }
    .l-menu__list {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    /* ---------- TOPのメッセージへの導線（メニューの最初に置く「1枚の画」） ---------- */
    .l-menu__story {
      position: relative;
      display: block;
      flex: 0 0 auto;
      height: clamp(210px, 34svh, 320px);
      margin: -4px 0 24px;
      color: var(--c-white);
      -webkit-tap-highlight-color: transparent;
    }
    .l-menu__story-media {
      position: absolute;
      top: 30%;
      bottom: 0;
      left: 0;
      right: 36px;              /* 右側を空けて、写真と文字をズラす */
      overflow: hidden;
    }
    .l-menu__story-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 22% 40%;  /* 人物のシルエットと夕焼け */
      transition: scale 0.6s var(--ease-out);
    }
    .l-menu__story-copy {
      --lh: 1.28;
      --k: var(--k-mincho);
      position: absolute;
      left: 14px;
      top: 22%;
      font-family: var(--ff-mincho);
      font-weight: var(--fw-mincho-strong);
      font-size: min(8.2vw, 46px);   /* 2行目＋丸矢印が320px幅でも画面内に収まる大きさ */
      line-height: var(--lh);
      letter-spacing: 0;
      white-space: nowrap;
      transform-origin: 0 calc((var(--lh) / 2 + var(--k)) * 1em);
      transform: skewY(calc(-1 * var(--slant-ja)));
    }
    .l-menu__story-copy .line { display: block; width: fit-content; }
    .l-menu__story-arrow {
      display: inline-block;
      width: 0.82em;
      height: 0.82em;
      margin-left: 0.16em;
      vertical-align: -0.1em;
      letter-spacing: 0;
      color: var(--c-black);
      transform-origin: 0 100%;
      transform: skewY(var(--slant-ja));  /* 傾きを打ち消して正円に */
      transition: translate 0.5s var(--ease-out);
    }
    .l-menu__story-arrow svg { width: 100%; height: 100%; }
    .l-menu__story:active .l-menu__story-media img { scale: 1.05; transition-duration: 0.25s; }
    .l-menu__story:active .l-menu__story-arrow { translate: 0.15em 0; transition-duration: 0.25s; }
    .l-menu__story:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

    /* ---------- ページへのナビ（メッセージの下に、控えめな大きさで） ---------- */
    .l-menu__item { flex: 1 1 0; min-height: 60px; max-height: 110px; display: flex; }
    .l-menu__item:nth-child(odd)  { padding: 0 22px 0 8px; }   /* 左右に交互にズラす */
    .l-menu__item:nth-child(even) { padding: 0 8px 0 22px; }
    .l-menu__item--contact { flex: 0 0 auto; min-height: 76px; }
    .l-menu__link {
      position: relative;
      display: block;
      flex: 1;
      overflow: hidden;
      color: var(--c-white);
      -webkit-tap-highlight-color: transparent;
    }
    .l-menu__media { position: absolute; inset: 0; }
    .l-menu__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease-out); }
    .l-menu__item--characters .l-menu__media img { object-position: 85% 50%; }
    .l-menu__word {
      position: absolute;
      left: 12px;
      bottom: 0.2em;
      font-family: var(--ff-sans);
      font-kerning: normal;
      font-weight: 700;
      font-size: clamp(28px, 8.6vw, 46px);
      line-height: 1;
      letter-spacing: -0.035em;
      white-space: nowrap;
      transform-origin: 0 85%;
      transform: skewY(calc(-1 * var(--slant-en)));
      transition: translate 0.5s var(--ease-out);
    }
    .l-menu__item--works .l-menu__word { left: 30%; }
    .l-menu__item--projects .l-menu__word { left: 14%; }
    .l-menu__item--characters .l-menu__word { left: 5%; }
    .l-menu__link--plain { overflow: visible; }
    .l-menu__item--contact .l-menu__word { left: 14%; bottom: 0.3em; }
    /* contact だけは丸矢印を英字の終わりに付ける（傾きを打ち消して正円に戻す） */
    .l-menu__word .l-menu__arrow--inline {
      position: relative;
      right: auto;
      bottom: auto;
      display: inline-block;
      width: 0.42em;
      height: 0.42em;
      margin-left: 0.22em;
      letter-spacing: 0;
      vertical-align: baseline;
      transform-origin: 0 100%;
      transform: skewY(var(--slant-en));
    }
    .l-menu__arrow {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 26px;
      height: 26px;
    }
    .l-menu__arrow svg { width: 100%; height: 100%; }
    .l-menu__link:active .l-menu__media img { scale: 1.05; transition-duration: 0.25s; }
    .l-menu__link:active .l-menu__word { translate: 0.1em 0; transition-duration: 0.25s; }
    .l-menu__link:focus-visible { outline: 3px solid var(--c-white); outline-offset: -6px; }

    /* メニューを開いている間：ページを止め、ヘッダーは濃い色で表示 */
    .is-menu-open { overflow: hidden; }
    .is-menu-open .l-header .l-header__logo,
    .is-menu-open .l-header .l-header__menu { color: var(--c-ink); filter: none; }
    .is-menu-open .l-header .l-header__menu-label { text-shadow: none; }
    .is-menu-open .l-header__logo,
    .is-menu-open .l-header__contact,
    .is-menu-open .l-header__menu { z-index: 160; }
    /* menu → close：2本線が交差して×に近い形へ */
    .is-menu-open .l-header__menu-label::after { scale: 1 1; translate: 0 -5px; rotate: -8deg; }

    /* =========================
       FOOTER
    ========================= */
    .l-footer { min-height: 64px; align-items: center; }
    .l-footer__copy {
      margin: 0 0 0 20px;
      font-size: 11px;
      letter-spacing: 0.06em;
      transform: none;
    }
    .l-footer__privacy { margin-left: 1.6em; font-size: 10px; padding: 9px 0; margin-block: -9px; }
  }
}

/* =========================
   COMPONENTS
========================= */
@layer components {

  /* ---------- c-stack ----------
     セクションの土台。子要素を同じマス目に重ね、
     それぞれを「デザイン座標」で配置します（文書の流れは保ったまま）。
     --scene-y : このセクションのデザイン上の開始Y
     --scene-h : このセクションのデザイン上の高さ               */
  .c-stack {
    position: relative;
    display: grid;
    /* 高さはデザインどおりに固定し、はみ出す文字は次のセクションへ重ねる
       （文章を増やして重なりすぎる場合は、各ページCSSの --scene-h を増やします） */
    grid-template: calc(var(--scene-h, 0) * var(--u)) / minmax(0, 1fr);
  }
  .c-stack .c-stack { grid-template-rows: auto; }
  .c-stack > * { grid-area: 1 / 1; align-self: start; justify-self: start; }

  /* ---------- c-type ----------
     傾いた文字ブロック。値はIllustratorの数値をそのまま入れます。
     --x  : 1行目の書き出し位置（デザインX）
     --y  : 1行目のベースライン（デザインY）
     --fs : 文字サイズ（デザインpx）
     --lh : 行送り ÷ 文字サイズ
     --ls : 字間                                                  */
  .c-type,
  .l-header__item,
  .l-footer__copy {
    --lh: 1.2;
    --k: var(--k-mincho);
    --ls: 0.0406em;
    --slant: var(--slant-ja);
    --baseline: calc(var(--fs) * (var(--lh) / 2 + var(--k)));
    position: relative;
    z-index: 2;
    margin-left: calc(var(--frame-x) + var(--x) * var(--u));
    margin-top: calc((var(--y) - var(--scene-y) - var(--baseline)) * var(--u));
    font-size: calc(var(--fs) * var(--u));
    line-height: var(--lh);
    letter-spacing: var(--ls);
    white-space: nowrap;
    transform-origin: 0 calc((var(--lh) / 2 + var(--k)) * 1em); /* 1行目のベースライン左端 */
    transform: skewY(calc(-1 * var(--slant)));
  }
  .c-type p + p { margin-top: calc(var(--lh) * 1em); }
  .c-type .line { display: block; width: fit-content; }
  .c-type .line--hang { text-indent: -0.5em; } /* 行頭の「をぶら下げる */
  .u-sp { display: none; } /* スマートフォンだけで改行する位置 */

  /* デザインで詰められている約物（、。「」など）の詰め幅。k30 ＝ 0.30文字分 */
  .c-type .k15 { margin-right: -0.15em; }
  .c-type .k20 { margin-right: -0.20em; }
  .c-type .k25 { margin-right: -0.25em; }
  .c-type .k30 { margin-right: -0.30em; }
  .c-type .k35 { margin-right: -0.35em; }
  .c-type .k40 { margin-right: -0.40em; }
  .c-type .k45 { margin-right: -0.45em; }
  .c-type .k50 { margin-right: -0.50em; }
  .c-type .k55 { margin-right: -0.55em; }
  .c-type .k60 { margin-right: -0.60em; }
  .c-type--white { color: var(--c-white); }
  .c-type--black { color: var(--c-black); }
  .c-type--shippori { --k: var(--k-shippori); font-family: var(--ff-shippori); font-weight: 700; }
  .c-type--corporate { --k: var(--k-corporate); font-family: var(--ff-corporate); font-weight: 500; }
  .c-type--regular { font-weight: var(--fw-mincho-regular); }
  .c-type--ink { color: var(--c-ink); }

  /* ---------- c-band ----------
     全幅の写真帯。画像はパララックス用に上下へ少し大きく書き出しています。
     --band-y : 帯の開始Y / --band-h : 帯の高さ / --bleed : 上下の余白（デザインpx） */
  .c-band {
    position: relative;
    z-index: 1;
    justify-self: stretch;
    margin-top: calc((var(--band-y) - var(--scene-y)) * var(--u));
    height: calc(var(--band-h) * var(--u));
    overflow: hidden;
  }
  /* 画面幅いっぱいではない写真（--band-x / --band-w を指定） */
  .c-band--framed {
    justify-self: start;
    margin-left: calc(var(--frame-x) + var(--band-x) * var(--u));
    width: calc(var(--band-w) * var(--u));
  }
  .c-band__inner { position: absolute; inset: 0; overflow: hidden; }
  .c-band__img {
    position: absolute;
    left: 0;
    top: calc(var(--bleed, 0) * -1 * var(--u));
    width: 100%;
    height: calc((var(--band-h) + var(--bleed, 0) * 2) * var(--u));
    max-width: none;
    object-fit: cover;
  }

  /* ---------- c-shape ----------
     色面（長方形・平行四辺形・円）。位置と大きさはデザイン座標（--x/--y/--w/--h）。
     色は --shape-c、平行四辺形の形は --shape-clip（各ページCSSで指定）。 */
  .c-shape {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--frame-x) + var(--x) * var(--u));
    margin-top: calc((var(--y) - var(--scene-y)) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    background: var(--shape-c, var(--c-white));
  }
  .c-shape--poly { clip-path: var(--shape-clip); }
  .c-shape--circle { border-radius: 50%; }

  /* ---------- c-fig ----------
     ロゴ・キャラクターなどの画像。--x/--y は画像の左上、--w は幅（デザイン座標）。 */
  .c-fig {
    position: relative;
    z-index: 2;
    margin-left: calc(var(--frame-x) + var(--x) * var(--u));
    margin-top: calc((var(--y) - var(--scene-y)) * var(--u));
    width: calc(var(--w) * var(--u));
  }
  .c-fig img, .c-fig svg { display: block; width: 100%; height: auto; }

  /* ---------- c-pagehero ----------
     各ページ冒頭の「写真＋英字」の帯（ページ下部のナビと同じ形。リンクではない） */
  .c-pagehero { --scene-y: 0; }
  .c-navlink--hero { --bx: 53; --by: 287; }
  .c-navlink--hero .c-navlink__word { font-weight: 700; }

  /* ---------- c-logo ---------- */
  .c-logo { display: block; overflow: visible; }
  .c-logo-slot {
    position: relative;
    z-index: 2;
    margin-left: calc(var(--frame-x) + var(--x) * var(--u));
    margin-top: calc((var(--y) - var(--scene-y)) * var(--u));
    width: calc(var(--w) * var(--u));
  }
  .c-logo-slot .c-logo { width: 100%; height: auto; }
  .c-logo--dark .c-logo__glyph { fill: var(--c-black); }   /* SPECIALページ：b.s. を黒で */

  /* ---------- c-navlink ----------
     ページ下部の大きなナビ（写真＋傾いた英字＋丸矢印）            */
  .c-navlinks { display: grid; grid-template: auto / minmax(0, 1fr); justify-self: stretch; }
  .c-navlinks > li { grid-area: 1 / 1; align-self: start; display: grid; grid-template: auto / minmax(0, 1fr); }
  .c-navlink {
    --scene-y: 0;
    --frame-x: 0px;
    position: relative;
    display: grid;
    grid-template: auto / minmax(0, 1fr);
    margin-left: calc((var(--vw, 100vw) - var(--design-w) * var(--u)) / 2 + var(--bx) * var(--u));
    margin-top: calc(var(--by) * var(--u));
    width: calc(var(--bw, 1176) * var(--u));
    height: calc(var(--bh, 434) * var(--u));
    isolation: isolate;
  }
  .c-navlink > * { grid-area: 1 / 1; align-self: start; justify-self: start; }
  .c-navlink__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-self: stretch;
  }
  .c-navlink__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.9s var(--ease-out);
  }
  .c-navlink__word {
    --fs: 161; --lh: 1; --k: var(--k-sans); --slant: var(--slant-en);
    --ls: -0.004em;
    font-family: var(--ff-sans);
    font-kerning: normal;
    font-weight: 700;
    color: var(--c-white);
  }
  .c-navlink__word-inner {
    display: inline-block;
    transition: translate 0.7s var(--ease-out);
  }
  /* 各ページ名の英字：写真枠の左上からの位置（デザイン座標）と字間・丸矢印の位置
     --x / --y   : 英字の書き出し位置とベースライン（写真枠の左上から）
     --arrow-dx  : 丸矢印の位置（英字の終わりからの距離） */
  .c-navlink--philosophy .c-navlink__word { --ls: -0.0385em; --x: 35.7; --y: 381.9; --arrow-dx: -39.9; --arrow-dy: 19.6; }
  .c-navlink--works .c-navlink__word { --ls: -0.0315em; --x: 355.6; --y: 323; --arrow-dx: -34.3; --arrow-dy: 0; }
  .c-navlink--projects .c-navlink__word { --ls: -0.0477em; --x: 280.4; --y: 336.8; --arrow-dx: -26; --arrow-dy: 0; }
  .c-navlink--characters .c-navlink__word { --ls: -0.043em; --x: 140.4; --y: 362.6; --arrow-dx: -30.7; --arrow-dy: -1.4; }
  .c-navlink--contact .c-navlink__word { --ls: -0.054em; --x: 55.9; --y: 209.9; --arrow-dx: -17.1; --arrow-dy: 2.9; }

  /* 丸矢印：文字の終わりを基準に置き、傾きを打ち消して正円に戻す */
  .c-arrow {
    display: inline-block;
    /* 大きさ・位置は英字サイズ（1em＝デザイン161px）に対する比率。PCでもSPでも同じ関係を保つ */
    width: calc(43 / 161 * 1em);
    height: calc(43 / 161 * 1em);
    vertical-align: top;
    margin-left: calc(var(--arrow-dx, -30) / 161 * 1em);
    /* 行の上端からベースライン（行間1 ÷ 2 ＋ 係数0.35）まで下げ、--arrow-dy で微調整 */
    translate: 0 calc((var(--arrow-dy, 0) / 161 + 0.85) * 1em);
    transform-origin: 0 0;
    transform: skewY(var(--slant-en));
  }
  .c-arrow svg { width: 100%; height: 100%; }
  a.c-navlink:focus-visible .c-navlink__media img { scale: 1.045; }
  a.c-navlink:focus-visible .c-navlink__word-inner { translate: 0.15em 0; }
  @media (hover: hover) {
    a.c-navlink:hover .c-navlink__media img { scale: 1.045; }
    a.c-navlink:hover .c-navlink__word-inner { translate: 0.15em 0; }
  }
  /* タッチ端末：押している間だけ反応 */
  @media (hover: none) {
    a.c-navlink:active .c-navlink__media img { scale: 1.045; transition-duration: 0.3s; }
    a.c-navlink:active .c-navlink__word-inner { translate: 0.12em 0; transition-duration: 0.3s; }
  }
  .c-navlink:focus-visible { outline: 3px solid var(--c-white); outline-offset: -8px; }

  /* 写真のないナビ（contact） */
  .c-navlink--plain .c-navlink__word { color: var(--c-white); }
}

/* =========================
   COMPONENTS : SMARTPHONE／TABLET（〜1023px）
   PCの「デザイン座標で重ねる」方式から、
   「上から順に積み、負の余白で重ねる」方式に切り替えます。
   各ページCSSの SP 用変数：
   --o   : 並び順          --sx / --sy : 左の位置／直前の要素からの距離（SPデザインpx）
   --sfs : 文字サイズ      --sfs-min   : 文字サイズの下限（本文の読みやすさ確保）
   --slh : 行送り          --sbh / --sby : 写真帯の高さ／直前からの距離
========================= */
@layer components {
  @media (max-width: 1023px) {
    .u-sp { display: inline; }

    .c-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      grid-template: none;
      padding-bottom: calc(var(--spb, 0) * var(--sv));
    }
    .c-stack > * { order: var(--o, 0); }

    .c-type {
      margin-left: calc(var(--sx, 20) * var(--s));
      margin-top: calc(var(--sy, 0) * var(--sv) + var(--sys, 0) * var(--s));
      /* 本文は --sf、大きな文字ほど --s（画面幅）に近い比率で拡大 */
      font-size: max(var(--sfs-min, 0px), calc(var(--sfs, 16) * var(--s) - (var(--s) - var(--sf)) * min(var(--sfs, 16), 24)));
      line-height: var(--slh, var(--lh));
      letter-spacing: var(--sls, var(--ls));
    }

    .c-band {
      align-self: stretch;
      width: 100%;
      margin-top: calc(var(--sby, 0) * var(--sv));
      height: calc(var(--sbh) * var(--sv));
    }
    /* SP用の写真は上下に8%ずつ余白を付けて書き出し（パララックス用） */
    .c-band__img {
      top: -8%;
      height: 116%;
    }

    .c-logo-slot {
      margin-left: calc(var(--sx, 20) * var(--s));
      margin-top: calc(var(--sy, 0) * var(--sv) + var(--sys, 0) * var(--s));
      width: calc(var(--sw) * var(--s));
    }

    /* ---------- ページ下部のナビ ---------- */
    .c-navlinks {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
    .c-navlinks > li { display: block; align-self: stretch; }
    .c-navlink {
      display: block;
      container-type: inline-size;
      width: auto;
      height: calc(188 * var(--sv));
      min-height: 150px;
      margin: 0 22px 0 8px;
    }
    .c-navlinks > li:nth-child(even) .c-navlink { margin: 0 8px 0 22px; } /* 左右に交互にズラす */
    .c-navlink__media { position: absolute; inset: 0; }
    .c-navlink .c-navlink__word {
      position: absolute;
      left: calc(var(--x) / 1176 * 100%);
      bottom: 12%;
      margin: 0;
      font-size: 13.69cqw; /* PCと同じく「写真枠の幅に対する比率」で英字の大きさを決める */
    }
    .c-navlink--plain { height: 140px; min-height: 0; }
    .c-navlink--plain .c-navlink__word { left: 18%; bottom: 30%; }
    .c-arrow { width: max(24px, calc(43 / 161 * 1em)); height: max(24px, calc(43 / 161 * 1em)); }

    /* ---------- 色面・画像 ---------- */
    .c-shape {
      margin-left: calc(var(--sx, 0) * var(--s));
      margin-top: calc(var(--sy, 0) * var(--sv) + var(--sys, 0) * var(--s));
      width: calc(var(--sw, 390) * var(--s));
      height: calc(var(--sh, 100) * var(--sv) + var(--shs, 0) * var(--s));  /* 斜めの帯など、横幅と連動させたい高さは --shs */
    }
    .c-shape--circle { height: auto; aspect-ratio: 1; }
    .c-fig {
      margin-left: calc(var(--sx, 0) * var(--s));
      margin-top: calc(var(--sy, 0) * var(--sv) + var(--sys, 0) * var(--s));
      width: calc(var(--sw, 200) * var(--s));
    }

    /* ---------- 各ページ末尾のロゴ（TOP以外で共通） ---------- */
    .c-closing { --spb: 90; }
    .c-closing__tagline { --sx: 22; --sy: 96; --sfs: 18; --sfs-min: 16px; --slh: 1.78; z-index: 3; }
    .c-closing__logo { --sx: 48; --sy: -8; --sw: 322; }

    /* ---------- ページ冒頭の帯 ---------- */
    .c-pagehero { padding-top: 76px; }
    .c-pagehero .c-navlink { margin-top: 0; align-self: stretch; }
  }
}

/* =========================
   UTILITIES
========================= */
@layer utilities {
  .u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .u-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .u-skip-link {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 200;
    padding: 8px 16px;
    background: var(--c-ink);
    color: var(--c-white);
    font-family: var(--ff-sans);
    translate: 0 -200%;
  }
  .u-skip-link:focus { translate: 0 0; }
}

/* =========================
   MOTION（動き）
   JavaScriptが <html> に .js-motion を付けたときだけ有効になります。
   「視差効果を減らす」設定の環境では .js-motion が付かないため、
   すべて最初から表示された状態になります。
   速さを変えたいときは --dur-* を調整してください。
========================= */
@layer motion {
  :root {
    --dur-line: 1.1s;       /* 1行が現れる時間 */
    --gap-line: 0.09s;      /* 行と行の時間差 */
    --dur-band: 1.4s;       /* 写真が開く時間 */
  }

  /* ---------- ファーストビュー（読み込み時） ---------- */
  .js-motion .l-header { opacity: 0; transition: opacity 1s var(--ease-out) 1.3s, color 0.35s var(--ease-out); }
  .js-motion.is-ready .l-header { opacity: 1; }

  .js-motion [data-intro="logo"] .c-logo__glyph,
  .js-motion [data-reveal="logo"] .c-logo__glyph {
    translate: 0 420px;
    transition: translate 1.25s var(--ease-out) calc(0.1s + var(--i) * 0.09s);
  }
  .js-motion [data-intro="logo"] .c-logo__sub,
  .js-motion [data-reveal="logo"] .c-logo__sub {
    opacity: 0;
    translate: 140px 0;
    transition: translate 0.9s var(--ease-out) 0.62s, opacity 0.5s linear 0.62s;
  }
  .js-motion.is-ready [data-intro="logo"] .c-logo__glyph,
  .js-motion [data-reveal="logo"].is-inview .c-logo__glyph { translate: 0 0; }
  .js-motion.is-ready [data-intro="logo"] .c-logo__sub,
  .js-motion [data-reveal="logo"].is-inview .c-logo__sub { opacity: 1; translate: 0 0; }

  .js-motion [data-intro="lines"] .line,
  .js-motion [data-reveal="lines"] .line {
    clip-path: inset(-30% 100% -45% 0);
    transition:
      clip-path var(--dur-line) var(--ease-inout) calc(var(--delay, 0s) + min(var(--i, 0), 8) * var(--gap-line)),  /* 長い文章でも待たせすぎない */
      opacity 0.35s var(--ease-out);
  }
  .js-motion [data-intro="lines"] { --delay: 0.95s; --gap-line: 0.16s; }
  .js-motion [data-reveal-pace="slow"] { --gap-line: 0.28s; --dur-line: 1.5s; }
  .js-motion.is-ready [data-intro="lines"] .line,
  .js-motion [data-reveal="lines"].is-inview .line { clip-path: inset(-30% -8% -45% -8%); }

  /* ---------- 傾きに沿って差し込む ---------- */
  .js-motion [data-reveal="slide"] {
    opacity: 0;
    translate: calc(90 * var(--u)) calc(-90 * var(--u) * 0.218);
    transition: translate 1.3s var(--ease-out) 0.15s, opacity 0.8s linear 0.15s;
  }
  .js-motion [data-reveal="slide"].is-inview { opacity: 1; translate: 0 0; }

  /* ---------- 一歩ずつ（踏み出していく。） ---------- */
  .js-motion [data-reveal="step"] .line {
    opacity: 0;
    translate: 0 0.28em;
    transition: translate 0.8s var(--ease-out), opacity 0.5s linear;
    transition-delay: calc(0.1s + var(--i, 0) * 0.28s + (var(--i, 0) * var(--i, 0)) * 0.08s);
  }
  .js-motion [data-reveal="step"].is-inview .line { opacity: 1; translate: 0 0; }

  /* ---------- 写真：斜めの縁で開き、水平に落ち着く ---------- */
  .js-motion [data-reveal="band"] .c-band__inner {
    clip-path: polygon(0 calc(100% + 280 * var(--u)), 100% 100%, 100% calc(100% + 280 * var(--u)), 0 calc(100% + 280 * var(--u)));
    transition: clip-path var(--dur-band) var(--ease-inout);
  }
  .js-motion [data-reveal="band"] .c-band__img { scale: 1.12; transition: scale 2.2s var(--ease-out); }
  .js-motion [data-reveal="band"].is-inview .c-band__inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .js-motion [data-reveal="band"].is-inview .c-band__img { scale: 1; }

  /* ---------- ページナビ：少しズレて入り、揃う ---------- */
  .js-motion [data-reveal="nav"] {
    opacity: 0;
    translate: calc(var(--nav-shift, 40) * var(--u)) 0;
    transition: translate 1.2s var(--ease-out), opacity 0.7s linear;
  }
  .js-motion [data-reveal="nav"].is-inview { opacity: 1; translate: 0 0; }
  .c-navlink--philosophy { --nav-shift: 48; }
  .c-navlink--works      { --nav-shift: -36; }
  .c-navlink--projects   { --nav-shift: 28; }
  .c-navlink--characters { --nav-shift: -44; }
  .c-navlink--contact    { --nav-shift: 36; }

  @media (max-width: 1023px) {
    :root { --dur-line: 0.9s; --gap-line: 0.07s; --dur-band: 1.1s; }

    /* ---------- SPメニュー：斜めの縁で上から開き、帯が左右から交互に差し込む ---------- */
    .js-motion .l-menu {
      clip-path: polygon(0 0, 100% 0, 100% -90px, 0 0);
      transition: clip-path 0.26s var(--ease-inout);
    }
    .js-motion .l-menu.is-open {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transition: clip-path 0.6s var(--ease-inout);
    }
    .js-motion .l-menu__item {
      opacity: 0;
      translate: 48px 0;
      transition: translate 0.25s var(--ease-out), opacity 0.2s linear;
    }
    .js-motion .l-menu__item:nth-child(even) { translate: -48px 0; }
    .js-motion .l-menu__word { translate: 0.35em 0; transition: translate 0.25s var(--ease-out); }
    .js-motion .l-menu.is-open .l-menu__item {
      opacity: 1;
      translate: 0 0;
      transition: translate 0.8s var(--ease-out), opacity 0.4s linear;
      transition-delay: calc(0.42s + var(--mi, 0) * 0.06s);
    }
    .js-motion .l-menu.is-open .l-menu__word {
      translate: 0 0;
      transition: translate 1.1s var(--ease-out);
      transition-delay: calc(0.46s + var(--mi, 0) * 0.06s);
    }
    /* メッセージ：写真が横に開き、2行が順に現れる（ナビより先に） */
    .js-motion .l-menu__story-media { clip-path: inset(0 100% 0 0); transition: clip-path 0.2s linear; }
    .js-motion .l-menu__story-copy .line { clip-path: inset(-30% 100% -45% 0); transition: clip-path 0.2s linear; }
    .js-motion .l-menu.is-open .l-menu__story-media {
      clip-path: inset(0 0 0 0);
      transition: clip-path 0.8s var(--ease-inout) 0.12s;
    }
    .js-motion .l-menu.is-open .l-menu__story-copy .line {
      clip-path: inset(-30% -10% -45% -8%);
      transition: clip-path 0.8s var(--ease-inout);
    }
    .js-motion .l-menu.is-open .l-menu__story-copy .line:nth-child(1) { transition-delay: 0.2s; }
    .js-motion .l-menu.is-open .l-menu__story-copy .line:nth-child(2) { transition-delay: 0.34s; }
    .l-menu__item:nth-child(2) { --mi: 1; }
    .l-menu__item:nth-child(3) { --mi: 2; }
    .l-menu__item:nth-child(4) { --mi: 3; }
    .l-menu__item:nth-child(5) { --mi: 4; }
    .js-motion [data-reveal-pace="slow"] { --gap-line: 0.18s; --dur-line: 1.1s; }
    .js-motion [data-reveal="slide"] { translate: 40px calc(-40px * 0.218); }
  }

  /* ---------- ページ冒頭の帯：写真が横に開き、英字が傾きに沿って入る ---------- */
  .js-motion [data-intro="hero"] .c-navlink__media {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-inout) 0.15s;
  }
  .js-motion [data-intro="hero"] .c-navlink__word-inner {
    opacity: 0;
    translate: -0.45em 0.083em;
    transition: translate 1.4s var(--ease-out) 0.55s, opacity 0.6s linear 0.55s;
  }
  .js-motion.is-ready [data-intro="hero"] .c-navlink__media { clip-path: inset(0 0 0 0); }
  .js-motion.is-ready [data-intro="hero"] .c-navlink__word-inner { opacity: 1; translate: 0 0; }

  /* ---------- 段落ごとに、傾きに沿って静かに現れる（長文用） ---------- */
  .js-motion [data-reveal="paras"] > p {
    opacity: 0;
    translate: -18px 4px;
    transition: translate 1.1s var(--ease-out), opacity 0.9s linear;
  }
  .js-motion [data-reveal="paras"] > p.is-inview { opacity: 1; translate: 0 0; }

  /* ---------- 面が横に引かれる ---------- */
  .js-motion [data-reveal="wipe"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-inout);
  }
  .js-motion [data-reveal="wipe"].is-inview { clip-path: inset(0 0 0 0); }
  .js-motion [data-reveal="wipe"].c-shape--poly.is-inview { clip-path: var(--shape-clip); }

  /* ---------- その場で浮かぶ ---------- */
  .js-motion [data-reveal="fade"] { opacity: 0; transition: opacity 1.2s linear 0.2s; }
  .js-motion [data-reveal="fade"].is-inview { opacity: 1; }

  /* ヘッダーの真下を通過中の行（出現の動きより優先） */
  .js-motion .c-type .line[data-under-header] { opacity: 0.2; transition-delay: 0s; }
}

/* =========================
   COMPONENT : MOVIE（動画）
   クリック／タップで再生。再生前は poster 画像と PLAY ボタンを表示し、
   再生後はブラウザ標準の操作パネルに切り替えます。
========================= */
@layer components {
  .c-movie {
    --movie-x: calc(var(--frame-x) + var(--x) * var(--u));
    position: relative;
    z-index: 2;
    margin: calc((var(--y) - var(--scene-y)) * var(--u)) 0 0 var(--movie-x);
    width: calc(var(--w) * var(--u));
  }
  .c-movie__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-black);
    overflow: hidden;
  }
  .c-movie__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--c-black); }
  .c-movie__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-white);
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(28px, calc(96 * var(--u)), 120px);
    letter-spacing: -0.03em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .c-movie__play-label {
    display: inline-block;
    transform: skewY(calc(-1 * var(--slant-en)));
    text-shadow: 0 0 0.3em rgb(0 0 0 / 0.35);
    transition: translate 0.6s var(--ease-out);
  }
  .c-movie__play-icon {
    width: 0.62em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-green, #00f000);
    clip-path: circle(50%);
    position: relative;
    transition: scale 0.6s var(--ease-out);
  }
  .c-movie__play-icon::after {
    content: "";
    position: absolute;
    left: 38%;
    top: 28%;
    border-style: solid;
    border-width: 0.14em 0 0.14em 0.24em;
    border-color: transparent transparent transparent var(--c-black);
  }
  @media (hover: hover) {
    .c-movie__play:hover .c-movie__play-label { translate: 0.12em 0; }
    .c-movie__play:hover .c-movie__play-icon { scale: 1.12; }
  }
  .c-movie__play:focus-visible { outline: 3px solid var(--c-green, #00f000); outline-offset: -6px; }
  .c-movie.is-playing .c-movie__play { display: none; }

  @media (max-width: 1023px) {
    .c-movie { margin: 0; width: 100%; }
  }
}

@layer motion {
  /* 動画：斜めの平行四辺形のマスクが開き、水平の枠に落ち着く */
  .js-motion .c-movie__frame {
    clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
    opacity: 0;
    transition: clip-path 1.2s var(--ease-inout) 0.2s, opacity 0.4s linear 0.2s;
  }
  .js-motion .c-movie.is-inview .c-movie__frame { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* =========================
   TABLET（560〜1023px：大きめのスマートフォン横向き〜タブレット）
   SPのアートディレクションをもとに、広い画面に合わせて調整します。
   - 本文（c-type--body）は、SP用の改行を使わずデザインの改行で組み、行を長く取る
   - ヘッダーのロゴ・contact・menu を少し大きく
========================= */
@layer utilities {
  @media (min-width: 560px) and (max-width: 1023px) {
    .c-type--body .u-sp { display: none; }
    .l-header__logo { left: 28px; top: 18px; width: 132px; }
    .l-header__contact { right: 84px; top: 22px; width: 96px; height: 38px; font-size: 16px; }
    .l-header__menu { right: 16px; top: 16px; width: 60px; height: 52px; }
    .l-header__menu-label { font-size: 17px; }
    .l-menu { padding: 96px 24px 28px; }
    .c-pagehero { padding-top: 96px; }
    .c-navlinks { gap: 16px; }
    .c-navlink--plain { height: calc(140 * var(--sv)); }
    .c-navlink { margin: 0 64px 0 24px; }
    .c-navlinks > li:nth-child(even) .c-navlink { margin: 0 24px 0 64px; }
  }
}