@charset "UTF-8";

/* =========================================================
   ANOU / common
   design width : PC 1440px / SP 375px
   --u = デザインカンプ上の 1px
   ========================================================= */

:root {
  /* --sb はスクロールバー分の補正（JS が入れる。既定は 1 ＝ 補正なし）。
     ブレイクポイントの切り替えは CSS 側だけで完結させて、
     ウィンドウ幅を変えている途中にズレが出ないようにしている */
  --sb: 1;
  --u: calc(100vw / 1440 * var(--sb));

  --header-h: calc(var(--u) * 89);

  /* ヘッダーと hero 動画以外をまとめて下げる量。
     大きくするほど動画が広く見える
     （カンプ基準の px 値をここだけ変えれば全体が連動します） */
  --down: calc(var(--u) * 180);

  --c-navy: #0f0f2d;
  --c-base: #f0f5ff;
  --c-purple: #5517ff;
  --grad: linear-gradient(90deg, #5517ff 0%, #2d40f7 51%, #4e40ff 100%);

  --f-jp: "source-han-sans-japanese", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", meiryo, sans-serif;
  --f-en: "new-atten", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 画面外にはみ出す装飾で横スクロールが出ないように。
     clip なので縦（ページのスクロール）はそのまま使える */
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  /* -1px：小数計算の端数でヘッダーとの境目に隙間が出るため少し重ねる */
  padding-top: calc(var(--header-h) - 1px);
  background: var(--c-base);
  color: var(--c-navy);
  font-family: var(--f-jp);
  font-weight: 700;
  line-height: 1.7;
  /* clip：hidden と違いスクロール領域を作らないので position: sticky が効く */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, li, figure, small {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

button {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ---------- utility ---------- */
.u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.c-skip {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-navy);
  color: #fff;
  font-size: 14px;
}
.c-skip:focus { top: 0; }

/* フォーカスの枠は、キーボードで操作したときだけ出す。
   マウスのクリック後に枠が残って見えるのを防ぐ */
:focus:not(:focus-visible) { outline: none; }

.u-pc { display: block; }
.u-sp { display: none; }

/* =========================================================
   header
   ========================================================= */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  /* 幕（l-loading の 100）より上。ページが切り替わっても
     ヘッダーだけは出したままにする */
  z-index: 110;
  width: 100%;
  height: var(--header-h);
  background: var(--grad);
}

.l-header__inner {
  position: relative;
  top: calc(var(--u) * 2);
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 39);
}

.l-header__logo {
  position: relative;
  top: calc(var(--u) * 1);
  display: block;
  width: calc(var(--u) * 175);
}
.l-header__logo img { width: 100%; }

.l-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.l-header__list {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 37);
}

.l-header__link {
  display: block;
  color: #fff;
  font-family: var(--f-en);
  font-weight: 700;
  font-style: italic;
  font-size: max(calc(var(--u) * 19.7), 14px);
  line-height: 1;
  letter-spacing: 0.01em;
}

.c-contact {
  display: grid;
  place-items: center;
  /* 狭い幅では文字サイズの下限が効くので、幅は最低値だけ決めて可変にする */
  min-width: calc(var(--u) * 203);
  height: calc(var(--u) * 33);
  padding: 0 calc(var(--u) * 20);
  margin-left: calc(var(--u) * 30);
  white-space: nowrap;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: max(calc(var(--u) * 12.8), 11px);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.l-header__menu {
  /* padding を線の外側に足したいので content-box */
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 20);
  /* 見た目は変えずに、押せる範囲だけ広げる（negative margin で位置を戻す） */
  padding: calc(var(--u) * 16) calc(var(--u) * 8);
  margin: calc(var(--u) * -16) calc(var(--u) * -8) calc(var(--u) * -16) calc(var(--u) * 38);
}

.l-header__menu-bar {
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

@media (hover: hover) {
  .l-header__link:hover { opacity: 0.6; }
  .c-contact:hover { background: #fff; color: var(--c-purple); }
  .l-header__menu:hover .l-header__menu-bar:nth-child(1) { transform: translateY(-2px); }
  .l-header__menu:hover .l-header__menu-bar:nth-child(3) { transform: translateY(2px); }
}

/* Web フォント（Adobe Fonts）が届くまで、ヘッダーの文字は出さない。
   先に出すと、代わりのフォントで一瞬だけ大きく表示されてから縮む。
   wf-loading は Adobe Fonts の読み込みスクリプトが <html> に付ける印で、
   読み込みに失敗しても 3 秒で外れるので文字が消えたままにはならない */
.l-header__link,
.l-drawer__link,
.l-drawer__mail {
  transition: opacity 0.18s linear;
}

.c-contact {
  transition: opacity 0.18s linear,
              background-color 0.3s var(--ease),
              color 0.3s var(--ease);
}

.wf-loading .l-header__link,
.wf-loading .c-contact,
.wf-loading .l-drawer__link,
.wf-loading .l-drawer__mail {
  opacity: 0;
}

/* =========================================================
   drawer
   ========================================================= */
/* .l-drawer = 画面全面のレイヤー（背景の覆い）
   .l-drawer__inner = 実際にスライドしてくる右側のパネル */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 130;
  visibility: hidden;
  transition: visibility 0.5s var(--ease);
}

/* パネル以外の領域を覆う膜（クリックで閉じる） */
.l-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 45, 0.4);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.l-drawer__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 33.3333%;
  min-width: 320px;
  padding: 0 calc(var(--u) * 56);
  /* フッターと同じ 42px の角丸（左側のみ） */
  border-radius: calc(var(--u) * 42) 0 0 calc(var(--u) * 42);
  background: var(--grad);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
}

.l-drawer.is-open { visibility: visible; }
.l-drawer.is-open::before { opacity: 1; }
.l-drawer.is-open .l-drawer__inner { transform: translateX(0); }

.l-drawer__close {
  position: absolute;
  top: calc(var(--u) * 32);
  right: calc(var(--u) * 32);
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  background: url("../img/svg/00_icon_page_close.svg") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}

.l-drawer__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
}

.l-drawer__link {
  display: inline-block;
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--u) * 56);
  line-height: 1.3;
}

.l-drawer__mail {
  margin-top: calc(var(--u) * 56);
  color: var(--c-base);
  font-family: var(--f-en);
  font-size: calc(var(--u) * 20);
}

@media (hover: hover) {
  .l-drawer__close:hover { transform: rotate(90deg); }
  .l-drawer__link:hover { opacity: 0.6; }
  .l-drawer__mail a:hover { opacity: 0.6; }
}

body.is-drawer-open { overflow: hidden; }

/* 内容が少なくてもフッターがウィンドウ最下部に来るようにする */
.l-main { flex: 1 0 auto; }
.l-footer { flex-shrink: 0; }

/* =========================================================
   loading（初回訪問時のみ・JS で制御）
   ========================================================= */
.l-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* JS が付けるまで出さない。JS が動かない環境では
     そもそも表示されないので、閲覧を妨げない */
  visibility: hidden;
  opacity: 0;
}

/* 幕。はみ出したものはここで隠れる */
.l-loading__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--grad);
}

/* ロゴの入れ物。幕と逆向きに同じだけ動かすので、
   画面の上では止まって見えたまま、幕の縁で切り取られていく */
.l-loading__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* JS が「出す」と判断したときだけ表示 */
.l-loading.is-active {
  visibility: visible;
  opacity: 1;
}

/* 幕が上へ抜ける。ロゴは動かず、幕の縁に隠されて消える */
.l-loading.is-done { pointer-events: none; }
.l-loading.is-done .l-loading__bg,
.l-loading.is-done .l-loading__inner {
  animation: loading-out 0.65s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.l-loading.is-done .l-loading__inner { animation-name: loading-out-inner; }

@keyframes loading-out       { to { transform: translateY(-100%); } }
@keyframes loading-out-inner { to { transform: translateY(100%); } }

/* ---- ページ遷移用 ----
   ロゴは出さず、グラデーションの幕だけがサッと通る */
.l-loading.is-transition .l-loading__logo { display: none; }

/* Top へ行き来するとき用（幕の速さ）。
   通しで 1.5 秒になるよう合わせてある。
   文字の指定は .is-active より後ろに置く必要があるので下の方にある */
.l-loading.is-quick.is-cover .l-loading__bg,
.l-loading.is-quick.is-cover .l-loading__inner { animation-duration: 0.46s; }
.l-loading.is-quick.is-done .l-loading__bg,
.l-loading.is-quick.is-done .l-loading__inner { animation-duration: 0.7s; }

/* 出ていくとき：下から上がってきて画面を覆う */
.l-loading.is-cover .l-loading__bg,
.l-loading.is-cover .l-loading__inner {
  animation: loading-in 0.36s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.l-loading.is-cover .l-loading__inner { animation-name: loading-in-inner; }

@keyframes loading-in       { from { transform: translateY(100%); }  to { transform: translateY(0); } }
@keyframes loading-in-inner { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---- 上から下へ通る版（Works へ行くとき・PC のみ）----
   SP は画面が縦に長いので、他と同じ「下から上」で統一する */
@media (min-width: 768px) {
  .l-loading.is-down.is-cover .l-loading__bg    { animation-name: loading-in-down; }
  .l-loading.is-down.is-cover .l-loading__inner { animation-name: loading-in-down-inner; }
  .l-loading.is-down.is-done  .l-loading__bg    { animation-name: loading-out-down; }
  .l-loading.is-down.is-done  .l-loading__inner { animation-name: loading-out-down-inner; }
}

@keyframes loading-in-down        { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes loading-in-down-inner  { from { transform: translateY(100%); }  to { transform: translateY(0); } }
@keyframes loading-out-down       { to { transform: translateY(100%); } }
@keyframes loading-out-down-inner { to { transform: translateY(-100%); } }

/* 幕は画面全体を覆うので、スクロールバー補正（--sb）を使わない。
   --u を使うと、補正が後から効いた瞬間に幅がわずかに変わり、
   ロゴがピクッと動いて見えてしまう */
.l-loading__logo {
  width: 10.4166vw;  /* 1440 のうち 150px ぶん */
}
.l-loading__logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.l-loading__letter {
  fill: url(#ld-grad);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

/* A → N → O → U の順に、ポンッ ポンッ と弾けて出る */
.l-loading.is-active .l-loading__letter {
  animation: loading-letter 0.34s var(--ease) forwards;
  animation-delay: calc(0.06s + var(--i) * 0.1s);
}

/* 0 → ふくらむ（105%）→ 100% で静止。
   出たあとは一切動かさない（forwards で最後の姿を保つ）*/
@keyframes loading-letter {
  0%   { opacity: 0; transform: scale(0); }
  18%  { opacity: 1; }
  65%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* 到着した側。文字は出発ページで出しきっているので、
   アニメーションせずに「出た状態」で置く */
.l-loading.is-ready .l-loading__letter {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Top へ行き来するときの A N O U。初回のローディングとは別の速さにする。
   .is-active の指定と同じ強さなので、必ずこの位置（後ろ）に置くこと。
   .is-ready より後ろだが、こちらは長さと間隔しか指定しないので、
   到着ページで文字が止まったままなのは変わらない */
.l-loading.is-quick .l-loading__letter {
  animation-duration: 0.44s;
  animation-delay: calc(0.08s + var(--i) * 0.13s);
}

/* SP のときだけ、Top へ行き来するときの幕とロゴを少しゆっくりにする。
   画面が小さいぶん、同じ速さだと慌ただしく見えるため（PC は変えない）。
   .is-active の指定より後に置く必要がある（同じ強さなので後ろが勝つ）*/
@media (max-width: 767px) {
  .l-loading.is-quick .l-loading__letter {
    animation-duration: 0.44s;
    animation-delay: calc(0.08s + var(--i) * 0.13s);
  }
  .l-loading.is-quick.is-cover .l-loading__bg,
  .l-loading.is-quick.is-cover .l-loading__inner {
    animation-duration: 0.47s;
  }
  .l-loading.is-quick.is-done .l-loading__bg,
  .l-loading.is-quick.is-done .l-loading__inner {
    animation-duration: 0.72s;
  }
}

/* 動きを減らす設定なら、ローディング自体を出さない */
@media (prefers-reduced-motion: reduce) {
  .l-loading { display: none; }
  /* 黄色の下線は最初から引いておく（後ろにある元の指定より強くするため .p-about を付ける） */
  .p-about .p-about__catch-text::after { transform: none; }
  .p-about .p-about__service-title,
  .p-about .p-about__service-text { opacity: 1; transform: none; }
  /* ロゴのパララックスも止める */
  .p-contact__logo { animation: none; }
}

/* =========================================================
   hero
   ========================================================= */
.p-hero {
  position: relative;
  z-index: 0;
}

/* --- 背景レイヤーの入れ物 ---
   はみ出しの切り取りはここだけで行う。
   .p-hero 側で切ると最後の要素（ボタン）のドロップシャドウまで
   下端でカットされてしまうため。 */
.p-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- 動画 --- */
.p-hero__movie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(var(--u) * 950);
  overflow: hidden;
}

.p-hero__video {
  width: 100%;
  /* 見せる位置を上にずらす。箱より縦に長くしてから、その分だけ持ち上げる。
     （動画は 1920×1080 で、この箱では縦にちょうど収まる大きさなので、
       持ち上げるぶんだけ縦に余裕を作ってやる必要がある）*/
  height: calc(100% + var(--u) * 84);
  margin-top: calc(var(--u) * -84);
  object-fit: cover;
}

/* --- 白の下地（曲線） --- */
.p-hero__base {
  position: absolute;
  /* 他の要素と同じだけ動くようにしてある
     （--down が 100 のとき、元どおりの 769 になる） */
  top: calc(calc(var(--u) * 669) + var(--down));
  left: 0;
  z-index: 2;
  width: 100%;
  height: calc(var(--u) * 928);
  background: url("../img/svg/01_top_bg.svg") center top / 100% 100% no-repeat;
}

/* --- 波 --- */
.p-hero__shape {
  position: absolute;
  top: calc(calc(var(--u) * 586) + var(--down));
  left: calc(var(--u) * -316);
  z-index: 3;
  width: calc(var(--u) * 1960);
  height: calc(var(--u) * 664.5);
  background: url("../img/svg/01_top_shape_01.svg") center / 100% 100% no-repeat;
  pointer-events: none;

  /* 左から右へ「丸い先端」が進みながら現れる。
     考え方は Member のリボン（.p-member__shape）と同じで、
     マスクを 2 枚重ね、位置だけを動かして先端を揃えている */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
          mask-image:
    linear-gradient(90deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
  -webkit-mask-size: 200% 100%, 300% 100%;
          mask-size: 200% 100%, 300% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  /* 先端の丸ごと左端の外に置いた、完全に隠れた状態 */
  -webkit-mask-position: 120% 0, 85% 50%;
          mask-position: 120% 0, 85% 50%;
}

/* 読み込み直後に描く。ゆっくり動き出して、後半でシュッと加速する */
.is-drawn .p-hero__shape {
  animation: hero-shape-draw 1.5s cubic-bezier(0.55, 0, 0.8, 0.2) forwards;
}
/* 動きを減らす設定なら、描き終わった状態で静止 */
.is-static .p-hero__shape {
  -webkit-mask-position: 0 0, 25% 50%;
          mask-position: 0 0, 25% 50%;
}

@keyframes hero-shape-draw {
  from {
    -webkit-mask-position: 120% 0, 85% 50%;
            mask-position: 120% 0, 85% 50%;
  }
  to {
    -webkit-mask-position: 0 0, 25% 50%;
            mask-position: 0 0, 25% 50%;
  }
}

.p-hero__nami {
  position: absolute;
  top: calc(calc(var(--u) * 495) + var(--down));
  left: calc(var(--u) * -130);
  z-index: 4;
  width: calc(var(--u) * 1721);
  height: calc(var(--u) * 325);
  pointer-events: none;
}

.p-hero__nami svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ストロークのグラデーションを流しつつ（SVG 内の animateTransform）、
   読み込み時に線そのものを右から左へ描く。
   パスは右端が始点・左端が終点なので、破線をずらすだけで右→左になる */
.p-hero__nami-line {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" にしてあるので「線全体を 1」とした割合で書ける */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* 3 本を 0.1 秒ずつずらして描く（3 本目が 2 秒ちょうどで描き終わる）。
   待ちをなくして、読み込み後いちばん早いタイミングから描きはじめる */
.is-drawn .p-hero__nami-line {
  animation: nami-draw 1.8s cubic-bezier(0.4, 0, 0.15, 1) forwards;
  animation-delay: calc(var(--i) * 0.1s);
}
/* 動きを減らす設定なら、描き終わった状態で静止 */
.is-static .p-hero__nami-line { stroke-dashoffset: 0; }

@keyframes nami-draw { to { stroke-dashoffset: 0; } }

/* --- キャッチコピー --- */
.p-hero__catch {
  position: absolute;
  top: calc(calc(var(--u) * 618) + var(--down));
  left: calc(var(--u) * 80);
  z-index: 5;
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--u) * 142);
  line-height: 1;
  letter-spacing: -0.008em;
  white-space: nowrap;
  /* 動画の明るいフレームでも読めるように */
  text-shadow:
    0 calc(var(--u) * 2) calc(var(--u) * 16) rgba(26, 44, 132, 0.22),
    0 calc(var(--u) * 8) calc(var(--u) * 48) rgba(32, 62, 178, 0.16);
}

/* --- 本文 --- */
.p-hero__body {
  position: relative;
  z-index: 6;
  padding-top: calc(calc(var(--u) * 814) + var(--down));
  text-align: center;
}

.p-hero__logo {
  width: calc(var(--u) * 1011);
  margin: 0 auto;
}
.p-hero__logo img { width: 100%; }

.p-hero__lead {
  /* 帯と波線が描かれてから 1 行目、少し間をおいて 2 行目 */
  --lines-delay: 0.4s;
  --lines-gap: 0.5s;
  margin-top: calc(var(--u) * 44);
  font-size: max(calc(var(--u) * 31.5), 16px);
  line-height: calc(var(--u) * 55);
  letter-spacing: 0;
}

.p-hero__actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 44);
  padding-right: calc(var(--u) * 113);
}

/* --- ボタン --- */
.c-btn {
  position: relative;   /* hover 時に隣のボタンより前面へ出すため */
  display: grid;
  place-items: center;
  width: calc(var(--u) * 316);
  height: calc(var(--u) * 59);
  border-radius: 999px;
  background: var(--grad);
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: max(calc(var(--u) * 30), 16px);
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

@media (hover: hover) {
  .c-btn:hover {
    /* 隣のボタン／ページトップボタンに影を塗りつぶされないよう前面へ */
    z-index: 1;
    transform: translateY(-3px);
    /* spread をマイナスにして影が左右へ広がりすぎないようにする */
    box-shadow: 0 12px 24px -8px rgba(85, 23, 255, 0.5);
  }
}

/* =========================================================
   marquee（フッター上の流れるテキスト）
   ========================================================= */
.p-marquee {
  margin-top: calc(var(--u) * 86);
  overflow: hidden;
}

.p-marquee__track {
  display: flex;
  width: max-content;
}

.p-marquee__text {
  flex: 0 0 auto;
  /* トラックごとではなく 1 文ずつ動かす。
     アニメーションで生成される描画レイヤーが半分の幅で済むので、
     ウィンドウが大きいときにテキストが描画されなくなるのを防ぐ。 */
  animation: marquee-scroll 40s linear infinite;
  padding-right: calc(var(--u) * 40);
  color: #acbbfc;
  font-family: var(--f-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--u) * 158);
  /* 1 だと g などの下が切れるので余裕を持たせる */
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* 同じ文字列を 2 つ並べ、それぞれを自分の幅ぶん左へ送ると継ぎ目なくループする */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* =========================================================
   about（What's ANOU）
   流れるテキストの下に重なる紫の帯。帯の上端＝流れる文字のベースライン
   あたりに置き、文字の下のはみ出し（g など）は帯で隠す。
   縦位置はすべて「帯の上端」からの距離。
   余白は、サイト上で調整した値（帯→見出し 182、リード→2 カラム 114、
   ボタン→フッター 148）を引き継ぎ、それ以外はカンプ実測。
   ========================================================= */
.p-about {
  /* 2 カラム用の単位。説明文を 12px より小さくしない下限に合わせて、
     箱・余白・見出しも一緒に伸び縮みさせる（--u のままだと狭い画面で文字だけが
     縮まらず箱からはみ出す）。1440 以上では --u とほぼ同じ、狭い画面では最大 1.25 倍 */
  --su: max(var(--u), min(1px, calc(var(--u) * 1.25)));
  /* 2 カラムが --u より大きくなったぶん、その下（ボタン・波・フッター）を下げる量。
     258.1 は 2 カラムの上端からボタンの上端までの距離 */
  --grow: calc((var(--su) - var(--u)) * 258.1);
  position: relative;
  z-index: 1;
  /* 流れるテキストの箱の下端から 54.5 ぶん上に食い込ませる。
     文字の下端（ベースライン）より 5 上で帯が始まり、文字の足元を少し隠す */
  margin-top: calc(var(--u) * -54.5);
  /* 帯の上端から 1166（＋grow）の位置にフッターを置く。
     フッターの上マージン（63）はここで打ち消す */
  height: calc(var(--u) * 1166 + var(--grow));
  margin-bottom: calc(var(--u) * -63);
  color: var(--c-base);
}

/* 背景のまとまり。フッターの下端（1166 + フッター 276）まで伸ばし、
   はみ出したリボンはここで切る（ページの高さを増やさないため） */
.p-about__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--u) * 1442 + var(--grow));
  overflow: hidden;
  pointer-events: none;
}

.p-about__bg,
.p-about__shape,
.p-about__nami {
  position: absolute;
  display: block;
}

/* 紫の帯。下端はリボンとフッターの裏に隠れる位置で止める（フッター上端 +47） */
.p-about__bg {
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--u) * 1213 + var(--grow));
  background: var(--grad);
}

/* リボン（原寸）。フッター上端から 415.1 上 */
.p-about__shape {
  top: calc(var(--u) * 750.9 + var(--grow));
  left: calc(var(--u) * -227);
  width: calc(var(--u) * 2058.9);
  height: calc(var(--u) * 749.6);
  background: url("../img/svg/01_top_shape_02.svg") center / 100% 100% no-repeat;
}

/* 波線（原寸）。フッター上端から 102 上。
   HTML に SVG を埋め込み、ヒーローの波線と同じく色を流す */
.p-about__nami {
  top: calc(var(--u) * 1064 + var(--grow));
  left: calc(var(--u) * -169);
  width: calc(var(--u) * 1668.5);
  height: calc(var(--u) * 291.4);
}

.p-about__nami svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-about__nami-line {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p-about__inner {
  position: relative;
  height: 100%;
}

.p-about__title,
.p-about__catch,
.p-about__lead,
.p-about__services,
.p-about__actions {
  position: absolute;
  left: 0;
  width: 100%;
}

/* ふわっと出すために中身を包んだ要素（transform を効かせるためブロックにする） */
.p-about__catch-inner,
.p-about__lead-inner,
.p-about__actions-inner { display: block; }

/* 見出し。What's の英字と ANOU のロゴをベースラインでそろえる */
.p-about__title {
  top: calc(var(--u) * 177.1);
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: calc(var(--u) * 62.8);
}

.p-about__title-en {
  font-family: var(--f-en);
  font-weight: 400;
  font-size: calc(var(--u) * 102.5);
  line-height: 1;
  letter-spacing: 0;
  /* Regular と Bold の間の太さにする。
     フォントキットに中間の太さが無いので、文字と同じ色の縁取りで少し太らせる */
  -webkit-text-stroke: calc(var(--u) * 1.7) currentColor;
}

/* ロゴは画像だが alt="ANOU" で「What's ANOU」という見出しとして読まれる */
.p-about__title-logo {
  width: calc(var(--u) * 381);
  height: auto;
}

/* 1 文目。黄色の下線を引いて、ほかの文と分けて見せる */
.p-about__catch {
  top: calc(var(--u) * 363.6);
  /* カンプの 20 から、木村さんの指示で 24 に大きくしている */
  font-size: max(calc(var(--u) * 24), 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  text-align: center;
}

.p-about__catch-text {
  position: relative;
  display: inline-block;
  font-weight: inherit;
}

/* 下線。文字の左右から少しはみ出し、文字の下端から少しあけて引く。
   文字の大きさを変えても比率が崩れないよう em で書いている
   （カンプの 20px のとき：上 25.9／左 -7／右 -5／太さ 6.5） */
.p-about__catch-text::after {
  content: "";
  position: absolute;
  top: 1.295em;
  left: -0.35em;
  right: -0.25em;
  height: 0.325em;
  background: #fad701;
  /* 左端を起点に、横幅 0 から伸ばして「左から右へ描く」。
     文字がふわっと出はじめてから少し待って描きはじめる */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}

.is-shown .p-about__catch-text::after { transform: none; }

.p-about__lead {
  top: calc(var(--u) * 453.4);
  font-size: max(calc(var(--u) * 20), 13px);
  font-weight: 700;
  line-height: 2.225;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  text-align: center;
}

/* 映像制作／グラフィックデザインの 2 つの箱（01_top_shape_05 / 06、原寸 430×181）。
   リード文との間は 114。大きさは .p-about で決めた --su で伸び縮みする */
.p-about__services {
  top: calc(var(--u) * 700.9);
  left: 50%;
  display: grid;
  grid-template-columns: calc(var(--su) * 430) calc(var(--su) * 430);
  column-gap: calc(var(--su) * 54);
  width: calc(var(--su) * 914);
  transform: translateX(-50%);
}

.p-about__service {
  position: relative;
  min-height: calc(var(--su) * 181.1);
  padding: calc(var(--su) * 34.5) 0 0 calc(var(--su) * 40.5);
  background: center / 100% 100% no-repeat;
}

.p-about__service--video   { background-image: url("../img/svg/01_top_shape_05.svg?v=2"); }
.p-about__service--graphic { background-image: url("../img/svg/01_top_shape_06.svg?v=2"); }

/* 箱は、映像制作を左の画面外から、グラフィックデザインを右の画面外から滑り込ませる。
   画面の外に出したぶんは html / body の overflow-x: clip で隠れる。
   待避先は画面幅（100vw）なので、どの画面幅でも完全に外から入ってくる。
   グラフィックデザインは c-fade の決まりどおり少し遅れて動く */
.p-about__service.c-fade__item {
  opacity: 1;
  transition: transform 1s var(--ease);
  transition-delay: var(--fade-delay, 0s);
}
.p-about__service--graphic.c-fade__item {
  transition-delay: calc(var(--fade-delay, 0s) + var(--fade-gap, 0.15s));
}
.p-about__service--video.c-fade__item   { transform: translateX(-100vw); }
.p-about__service--graphic.c-fade__item { transform: translateX(100vw); }

.is-shown .p-about__service.c-fade__item { transform: none; }

/* PC は画面が広く移動する距離が長いので、SP（1 秒）よりゆっくり滑らせる */
@media (min-width: 768px) {
  .p-about__service.c-fade__item { transition-duration: 1.5s; }
}

/* 箱の中の見出しと説明文は、箱が滑り込む途中で下からふわっと浮かび上がらせる。
   箱の動き出し（映像制作 0 秒／グラフィックデザイン 0.15 秒）に合わせて、
   見出し → 説明文の順に少しずつ遅らせる */
.p-about__service { --svc-delay: 0s; --svc-text-wait: 0.4s; }
.p-about__service--graphic { --svc-delay: 0.15s; }

.p-about__service-title,
.p-about__service-text {
  opacity: 0;
  transform: translateY(calc(var(--su, var(--u)) * 24));
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
  transition-delay: calc(var(--svc-delay) + var(--svc-text-wait));
}
.p-about__service-text {
  transition-delay: calc(var(--svc-delay) + var(--svc-text-wait) + 0.15s);
}

.is-shown .p-about__service-title,
.is-shown .p-about__service-text {
  opacity: 1;
  transform: none;
}

/* PC は箱の滑り込みが 1.5 秒なので、文字もそれに合わせて少し待ち、ゆっくり出す */
@media (min-width: 768px) {
  .p-about__service { --svc-text-wait: 0.6s; }
  .p-about__service-title,
  .p-about__service-text { transition-duration: 1.2s; }
}

.p-about__service-title {
  position: relative;
  font-size: calc(var(--su) * 25);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  font-feature-settings: "palt" 1;
}

/* 12px を下限にする（--su の中で下限を持たせている） */
.p-about__service-text {
  position: relative;
  margin-top: calc(var(--su) * 27.3);
  font-size: calc(var(--su) * 12);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  white-space: nowrap;
}

/* ボタン。箱の下から 76（枠線の外側まで） */
.p-about__actions {
  top: calc(var(--u) * 959 + var(--grow));
  display: flex;
  justify-content: center;
}

/* 枠線つきボタン。枠は box-shadow で外側に 1px 描く
   （outline だとクリック後のフォーカス解除で消えるため） */
.c-btn--line {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

@media (hover: hover) {
  .c-btn--line:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.7),
      0 12px 24px -8px rgba(85, 23, 255, 0.5);
  }
}

/* =========================================================
   footer
   ========================================================= */
.l-footer {
  position: relative;
  z-index: 6;
  margin-top: calc(var(--u) * 63);
}

.l-footer__inner {
  position: relative;
  width: calc(var(--u) * 1277);
  height: calc(var(--u) * 276);
  margin: 0 auto;
  padding: calc(var(--u) * 77) calc(var(--u) * 61) 0;
  border-radius: calc(var(--u) * 42) calc(var(--u) * 42) 0 0;
  background: var(--grad);
  color: var(--c-base);
}

.l-footer__brand {
  position: absolute;
  top: calc(var(--u) * 77);
  left: calc(var(--u) * 61);
}

.l-footer__logo { width: calc(var(--u) * 157); }
.l-footer__logo img { width: 100%; }

.l-footer__lead {
  margin-top: calc(var(--u) * 45);
  font-size: max(calc(var(--u) * 13.6), 11px);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.l-footer__nav {
  position: absolute;
  top: calc(var(--u) * 107);
  left: calc(var(--u) * 512);
}

.l-footer__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 19);
  line-height: 1;
}

.l-footer__link,
.l-footer__heading,
.l-footer__mail {
  display: block;
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 17), 13px);
  line-height: 1;
}

.l-footer__contact {
  position: absolute;
  top: calc(var(--u) * 107);
  left: calc(var(--u) * 799);
}

.l-footer__note {
  margin-top: calc(var(--u) * 30);
  font-size: max(calc(var(--u) * 13.4), 11px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.l-footer__mail {
  margin-top: calc(var(--u) * 7);
  font-size: max(calc(var(--u) * 18), 13px);
}

.l-footer__copy {
  position: absolute;
  right: calc(var(--u) * 23);
  bottom: calc(var(--u) * 10);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 10), 9px);
  line-height: 1;
}

.l-footer__copy small { font-size: inherit; }

@media (hover: hover) {
  .l-footer__link:hover,
  .l-footer__heading a:hover,
  .l-footer__mail a:hover { opacity: 0.6; }
}

/* =========================================================
   page top
   ========================================================= */
.c-pagetop {
  position: fixed;
  right: calc(var(--u) * 36);
  bottom: calc(var(--u) * 40);
  z-index: 40;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  background: url("../img/svg/00_icon_page_top.svg") center / contain no-repeat;
  transform: translateY(calc(var(--shift, 0px) * -1));
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

@media (hover: hover) {
  .c-pagetop:hover { transform: translateY(calc(var(--shift, 0px) * -1 - 4px)); }
}

/* =========================================================
   SP  (design width : 375px)
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --u: calc(100vw / 375 * var(--sb));
    --header-h: calc(var(--u) * 60);
    --down: calc(var(--u) * 40);
  }

  .u-pc { display: none; }
  .u-sp { display: block; }

  /* ---- header ---- */
  .l-header__inner {
    padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 18);
  }

  .l-header__logo { width: calc(var(--u) * 108); }

  .l-header__nav { display: none; }

  .l-header__menu {
    width: calc(var(--u) * 28);
    height: calc(var(--u) * 11.5);
    margin-left: auto;
    margin-right: calc(var(--u) * -8);
  }

  /* ---- drawer ---- */
  /* スマホは全画面（角丸なし） */
  .l-drawer__inner {
    width: 100%;
    min-width: 0;
    padding: 0 calc(var(--u) * 32);
    border-radius: 0;
  }
  .l-drawer::before { display: none; }

  .l-drawer__close {
    top: calc(var(--u) * 16);
    right: calc(var(--u) * 16);
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
  }

  .l-drawer__list { gap: calc(var(--u) * 18); }
  .l-drawer__link { font-size: calc(var(--u) * 40); }
  .l-drawer__mail {
    margin-top: calc(var(--u) * 40);
    font-size: calc(var(--u) * 16);
  }

  /* ---- hero ---- */
  .l-loading__logo { width: 25.6vw; }  /* 375 のうち 96px ぶん */

  .p-hero__movie { height: calc(var(--u) * 420); }

  /* SP は箱が小さいので、PC の 84 ぶんのずらしは使わない。
     代わりに 45 だけ上へ。こうすると映像の中心が、
     ヘッダーの下端（60）と白い下地の上端（389）のちょうど真ん中に来る。
     下にできるすき間（434〜479）は白い波が完全に覆うので見えない。
     .p-member__video は素の指定がこれより後ろにあって勝ってしまうので、
     Member の SP 指定のところ（下の方）で上書きしている */
  .p-hero__video {
    height: 100%;
    margin-top: calc(var(--u) * -45);
  }

  .p-hero__base {
    top: calc(var(--u) * 330);
    height: calc(var(--u) * 242);
    background-size: 100% 100%;
  }

  .p-hero__shape {
    top: calc(calc(var(--u) * 270) + var(--down));
    left: calc(var(--u) * -150);
    width: calc(var(--u) * 750);
    height: calc(var(--u) * 254);
  }

  .p-hero__nami {
    top: calc(calc(var(--u) * 275) + var(--down));
    /* 線の端が画面内で途切れないよう、左右とも画面外まで伸ばす */
    left: calc(var(--u) * -60);
    width: calc(var(--u) * 500);
    height: calc(var(--u) * 94);
  }

  .p-hero__catch {
    top: calc(calc(var(--u) * 301) + var(--down));
    left: calc(var(--u) * 20);
    font-size: calc(var(--u) * 46);
  }

  .p-hero__body { padding-top: calc(calc(var(--u) * 400) + var(--down)); }

  .p-hero__logo { width: calc(var(--u) * 291); }

  .p-hero__lead {
    margin-top: calc(var(--u) * 26);
    font-size: calc(var(--u) * 15);
    line-height: 1.8;
  }

  .p-hero__actions {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 32);
    padding-right: 0;
  }

  .c-btn {
    width: calc(var(--u) * 240);
    height: calc(var(--u) * 48);
    font-size: calc(var(--u) * 18);
  }

  /* ---- marquee ---- */
  .p-marquee { margin-top: calc(var(--u) * 40); }

  .p-marquee__text {
    padding-right: calc(var(--u) * 20);
    font-size: calc(var(--u) * 62);
  }

  /* ---- about（What's ANOU）----
     SP は中身の量で高さが決まる。リボンと波線はセクションの下端（＝フッターの上端）
     を基準に、PC のカンプを 0.3 倍した位置に置く */
  .p-about {
    margin-top: calc(var(--u) * -21.5);
    height: auto;
    padding: calc(var(--u) * 64) 0 calc(var(--u) * 88);
    margin-bottom: calc(var(--u) * -56);   /* SP のフッター上マージン（56）を打ち消す */
  }

  .p-about__deco { height: calc(100% + var(--u) * 101); }

  .p-about__bg { height: calc(100% - var(--u) * 87); }

  .p-about__shape {
    top: auto;
    bottom: calc(var(--u) * 0.6);   /* 上端がフッター上端から 124.5 上 */
    left: calc(var(--u) * -68);
    width: calc(var(--u) * 617.7);
    height: calc(var(--u) * 224.9);
  }

  .p-about__nami {
    top: auto;
    bottom: calc(var(--u) * 44.2);  /* 上端がフッター上端から 30.6 上 */
    left: calc(var(--u) * -50.7);
    width: calc(var(--u) * 500.6);
    height: calc(var(--u) * 87.4);
  }

  .p-about__inner { height: auto; }

  .p-about__title,
  .p-about__catch,
  .p-about__lead,
  .p-about__services,
  .p-about__actions {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  /* 見出しは PC と同じ比率（今回 1.14 倍）で大きくしている */
  .p-about__title { column-gap: calc(var(--u) * 18); }
  .p-about__title-en {
    font-size: calc(var(--u) * 45.5);
    -webkit-text-stroke-width: calc(var(--u) * 0.8);
  }
  .p-about__title-logo { width: calc(var(--u) * 169); }

  /* 1 文目と残り 3 行。どちらも PC と同じ位置で改行する（9 の大きさなら SP の幅に収まる）。
     2 カラムの説明文は改行位置を固定せず、画面幅で自然に折り返す */
  .p-about__service-text br { display: none; }

  .p-about__catch {
    width: auto;
    margin-top: calc(var(--u) * 28);
    padding: 0 calc(var(--u) * 24);
    font-size: calc(var(--u) * 9);
  }

  /* 下線も文字の大きさ（20 → 9）に合わせて縮める */
  .p-about__catch-text::after {
    top: calc(var(--u) * 11.7);
    left: calc(var(--u) * -3.2);
    right: calc(var(--u) * -2.3);
    height: calc(var(--u) * 2.9);
  }

  .p-about__lead {
    width: auto;
    margin-top: calc(var(--u) * 16);
    padding: 0 calc(var(--u) * 24);
    font-size: calc(var(--u) * 9);
    line-height: 2;
  }

  /* 2 つの箱の横並びは SP でも崩さない */
  .p-about__services {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--u) * 8);
    width: calc(var(--u) * 343);
    margin: calc(var(--u) * 40) auto 0;
  }

  .p-about__service {
    min-height: 0;
    padding: calc(var(--u) * 16) calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12);
  }

  .p-about__service-title {
    font-size: calc(var(--u) * 12);
    letter-spacing: 0.05em;
  }

  .p-about__service-text {
    margin-top: calc(var(--u) * 10);
    /* 読ませるより、デザインの一部として添える扱い（木村さんの判断で 7） */
    font-size: calc(var(--u) * 7);
    line-height: 1.7;
    white-space: normal;
    word-break: auto-phrase;
  }

  .p-about__actions {
    width: auto;
    margin-top: calc(var(--u) * 40);
  }

  /* ---- footer ---- */
  .l-footer { margin-top: calc(var(--u) * 56); }

  .l-footer__inner {
    width: calc(var(--u) * 343);
    height: auto;
    padding: calc(var(--u) * 40) calc(var(--u) * 28) calc(var(--u) * 44);
    border-radius: calc(var(--u) * 20) calc(var(--u) * 20) 0 0;
  }

  .l-footer__brand,
  .l-footer__nav,
  .l-footer__contact {
    position: static;
  }

  .l-footer__logo { width: calc(var(--u) * 132); }

  .l-footer__lead {
    margin-top: calc(var(--u) * 18);
    font-size: calc(var(--u) * 12);
  }

  .l-footer__nav { margin-top: calc(var(--u) * 32); }
  .l-footer__list { gap: calc(var(--u) * 16); }

  .l-footer__link,
  .l-footer__heading,
  .l-footer__mail { font-size: calc(var(--u) * 16); }

  .l-footer__contact { margin-top: calc(var(--u) * 32); }

  .l-footer__note {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 12);
  }

  .l-footer__mail { margin-top: calc(var(--u) * 10); }

  .l-footer__copy {
    right: calc(var(--u) * 16);
    bottom: calc(var(--u) * 12);
    font-size: calc(var(--u) * 10);
  }

  /* ---- page top ---- */
  .c-pagetop {
    right: calc(var(--u) * 16);
    bottom: calc(var(--u) * 20);
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
  }
}

/* =========================================================
   motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .p-works__item { opacity: 1 !important; transform: none !important; }
  .p-marquee__text,
  .p-works-hero__scroll-dot { animation: none !important; }
  /* 見出しは動かさず、最初から見えている状態にする */
  .p-works-hero__heading { animation: none !important; }
  .c-lines__line > span,
  .p-works-hero__field-in,
  .p-works-hero__node-in,
  .p-works-hero__view,
  .p-works-hero__tag,
  .p-works-hero__etc { transform: none !important; }
  .c-fade__item { opacity: 1 !important; transform: none !important; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Works : hero
   ========================================================= */
.p-works-hero {
  /* 下のコンテンツが重なりながら上がってくるので、ヒーローはその場に留める。
     ヒーローが画面より高い場合は、下端が画面下に着いてから留まるよう
     top をマイナスにする（min で自動的に切り替わる） */
  position: sticky;
  top: min(calc(var(--header-h) - 1px), calc(100vh - var(--u) * 916));
  z-index: 0;
  overflow: hidden;
  height: calc(var(--u) * 916);
  /* カンプ実測：3 ストップのブランドグラデーションを 221deg に回転させたもの */
  background: linear-gradient(221deg, #5418ff 0%, #2d40f7 66%, #3e40fb 100%);
  color: var(--c-base);
}

/* 白い下地（曲線）はヒーローと実績の間に置いてある（.p-works-curve） */

.p-works-hero__heading {
  position: absolute;
  top: calc(var(--u) * 105);
  left: 0;
  z-index: 2;
  width: 100%;
  font-size: calc(var(--u) * 62);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  /* 読み込み後、下からすっと上がって出てくる。
     both ＝ 開始前は from の状態、終了後は to の状態で固定 */
  animation: works-heading-rise 2s var(--ease) 0.2s both;
}

/* Web フォントの読み込み中は文字が出ないので、その間は一時停止させる。
   （wf-loading / wf-active は Adobe Fonts が html に付けるクラス）
   読み込みが終わった＝文字が見えるようになってから動き出す */
.wf-loading .p-works-hero__heading { animation-play-state: paused; }

/* 動かす量は em なので、PC でも SP でも文字サイズに対して同じ比率になる */
@keyframes works-heading-rise {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- 無限マーク図版 ---- */
.p-works-hero__diagram {
  position: absolute;
  top: calc(var(--u) * 220);
  left: 50%;
  z-index: 2;
  width: calc(var(--u) * 1138);
  height: calc(var(--u) * 456);
  transform: translateX(calc(-50% - var(--u) * 4));
}

.p-works-hero__mugen {
  position: absolute;
  inset: 0;
}
.p-works-hero__mugen svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- 無限マークのアニメーション ----
   .is-drawn が付いたら「描かれて → 光が流れる」の順に動く */
.p-mugen__dot,
.p-mugen__core,
.p-mugen__line,
.p-mugen__flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.p-mugen__dot {
  stroke: var(--c-base);
  stroke-width: 0.47;
  stroke-dasharray: 0.83 2.49;
  opacity: 0;
}

.p-mugen__core {
  stroke: var(--c-base);
  stroke-width: 0.47;
}

.p-mugen__line {
  stroke: var(--c-base);
  stroke-width: 0.75;
}

/* pathLength="1" にしてあるので、破線の長さは「線全体を 1」とした割合で書ける */
.p-mugen__core,
.p-mugen__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* 線に沿って走る光。dasharray の合計が 1（＝一周ぶん）なので継ぎ目なく回る。
   パスの始点＝終点は中心の交差部に作り替えてあるので、
   光がそこを通過する一瞬に破線が 2 つに割れても、
   線が重なっている場所なので見た目に出ない。
   linecap を butt にして割れ目がぴったり繋がるようにしている。 */
.p-mugen__flow {
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  /* 短く・強めのぼかしにして、光の端が「切れ目」に見えないようにする */
  stroke-dasharray: 0.035 0.965;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(240, 245, 255, 0.95))
          drop-shadow(0 0 3px rgba(240, 245, 255, 0.9));
}

.is-drawn .p-mugen__line {
  animation: mugen-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * 0.18s);
}

.is-drawn .p-mugen__core {
  animation: mugen-draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.9s;
}

.is-drawn .p-mugen__dot {
  animation:
    mugen-appear 0.9s ease forwards,
    mugen-dot-flow 1.4s linear 
  ;
  animation-delay: 1.5s, 1.5s;
  animation-iteration-count: 1, infinite;
}

.is-drawn .p-mugen__flow {
  animation:
    mugen-appear 0.6s ease forwards,
    mugen-flow 4s linear
  ;
  /* 描き終わりを待たず、まだ線を引いている途中から流し始める */
  animation-delay: calc(0.5s + var(--i) * 0.85s), calc(0.5s + var(--i) * 0.85s);
  animation-iteration-count: 1, infinite;
}

/* 逆回り */
.is-drawn .p-mugen__flow--rev {
  animation-name: mugen-appear, mugen-flow-rev;
}

@keyframes mugen-draw   { to { stroke-dashoffset: 0; } }
@keyframes mugen-appear { to { opacity: 1; } }
@keyframes mugen-flow     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mugen-flow-rev { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
@keyframes mugen-dot-flow { to { stroke-dashoffset: -3.32; } }

/* 動きを減らす設定のとき用：描き終わった状態で静止 */
.is-static .p-mugen__core,
.is-static .p-mugen__line { stroke-dashoffset: 0; }
.is-static .p-mugen__dot  { opacity: 1; }
.is-static .p-mugen__flow,
.is-static .p-mugen__flow--rev { display: none; }
/* 見出しも動かさず、出た状態にする */
.is-static .p-works-hero__field-in,
.is-static .p-works-hero__node-in,
.is-static .p-works-hero__view { transform: none; }


.p-works-hero__node {
  position: absolute;
  /* 無限マークの空きが図版の中心より 3px ほど右にあるための補正 */
  left: calc(var(--u) * 4);
  width: 100%;
  font-size: calc(var(--u) * 23);
  line-height: 1;
  /* 無限マークの線に掛からない幅（空き 187px）に収める */
  letter-spacing: 0.12em;
  text-align: center;
}
.p-works-hero__node--direction { top: calc(var(--u) * 92); }
.p-works-hero__node--delivery  { top: calc(var(--u) * 329); }

/* 1 行ぶんの「窓」。line-height が 1 で余白がないので、
   上下に 0.2em 足してから同じ分だけ margin で戻し、
   文字の頭と足が切れないようにしている */
.p-works-hero__node-win {
  display: block;
  overflow: hidden;
  padding: 0.2em 0;
  margin: -0.2em 0;
}

/* 窓の下で待機。「制作」が出きる少し手前から、重なるように上がってくる */
.p-works-hero__node-in {
  display: block;
  transform: translateY(130%);
}
.is-drawn .p-works-hero__node-in {
  animation: mask-rise 1.2s var(--ease) 1.9s both;
}
.is-drawn .p-works-hero__node--delivery .p-works-hero__node-in {
  animation-delay: 2.05s;
}

.p-works-hero__field-title {
  position: absolute;
  top: calc(var(--u) * 187);
  width: max-content;
  transform: translateX(-50%);
  font-size: calc(var(--u) * 23);
  line-height: calc(var(--u) * 43);
  text-align: center;
  white-space: nowrap;
}
/* 1 行ぶんの「窓」。中身がここからはみ出すと隠れる */
.p-works-hero__field-title > span {
  display: block;
  overflow: hidden;
  letter-spacing: 0.5em;
}
.p-works-hero__field-sub { letter-spacing: 0 !important; }

/* 窓の下で待機。無限マークを描いている最中に、下からせり上がる */
.p-works-hero__field-in {
  display: block;
  transform: translateY(110%);
}
.is-drawn .p-works-hero__field-in {
  animation: mask-rise 1.2s var(--ease) 1s both;
}
/* 2 行目（制作）は少し遅らせる */
.is-drawn .p-works-hero__field-title > span:nth-child(2) .p-works-hero__field-in {
  animation-delay: 1.15s;
}

.p-works-hero__field--movie   .p-works-hero__field-title { left: calc(var(--u) * 298); }
.p-works-hero__field--graphic .p-works-hero__field-title { left: calc(var(--u) * 834); }

.p-works-hero__tags {
  position: absolute;
  top: calc(var(--u) * 161);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 9.5);
  width: calc(var(--u) * 200);
}
.p-works-hero__tags--left  { left: calc(var(--u) * -36); }
.p-works-hero__tags--right { left: calc(var(--u) * 983); }

.p-works-hero__tag {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 25);
  padding: 0 calc(var(--u) * 8);
  border-radius: 999px;
  background: var(--c-base);
  color: var(--c-navy);
  font-size: calc(var(--u) * 11.5);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.p-works-hero__etc {
  position: absolute;
  top: calc(var(--u) * 295);
  font-size: calc(var(--u) * 11);
  line-height: 1;
}
.p-works-hero__etc--left  { left: calc(var(--u) * -27); }
.p-works-hero__etc--right { left: calc(var(--u) * 1144); }

/* ---- タグは画面の外から滑り込ませる ----
   ヒーローは overflow: hidden なので、画面の外に出したぶんは隠れる。
   左側のものは左の画面外へ、右側のものは右の画面外へ待避させておく */
.p-works-hero__tags--left .p-works-hero__tag,
.p-works-hero__etc--left {
  transform: translateX(calc(var(--u) * -340));
}
.p-works-hero__tags--right .p-works-hero__tag,
.p-works-hero__etc--right {
  transform: translateX(calc(var(--u) * 340));
}

/* 上から順に 0.09 秒ずつずらして滑り込む */
.is-drawn .p-works-hero__tag,
.is-drawn .p-works-hero__etc {
  animation: slide-in 0.9s var(--ease) both;
}
.is-drawn .p-works-hero__tag:nth-child(1) { animation-delay: 1.6s; }
.is-drawn .p-works-hero__tag:nth-child(2) { animation-delay: 1.69s; }
.is-drawn .p-works-hero__tag:nth-child(3) { animation-delay: 1.78s; }
.is-drawn .p-works-hero__tag:nth-child(4) { animation-delay: 1.87s; }
.is-drawn .p-works-hero__etc { animation-delay: 1.96s; }

/* 待避先は要素ごとに違うので、戻り先（transform なし）だけ書けばよい */
@keyframes slide-in { to { transform: none; } }

/* 動きを減らす設定なら、最初から定位置に */
.is-static .p-works-hero__tags .p-works-hero__tag,
.is-static .p-works-hero__etc { transform: none; }

/* ---- View Works / SCROLL ---- */
.p-works-hero__view {
  position: absolute;
  top: calc(var(--u) * 670);
  left: 0;
  z-index: 2;
  width: 100%;
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--u) * 23);
  line-height: 1;
  text-align: center;
  /* 出るまでは縮んで見えない状態 */
  transform: scale(0);
}

/* 「納品・管理」に少し重なるタイミングで、ポンッと弾んで出る */
.is-drawn .p-works-hero__view {
  animation: pop-in 0.6s var(--ease) 2.9s both;
}

/* 0 →ふくらむ（110%）→ 戻る（100%）*/
@keyframes pop-in {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.p-works-hero__scroll {
  position: absolute;
  top: calc(var(--u) * 708);
  left: calc(var(--u) * 710);
  z-index: 0;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 160);
}

.p-works-hero__scroll svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.p-works-hero__scroll-line {
  fill: none;
  stroke: var(--c-base);
  stroke-width: 0.5;
}

/* 丸が線の上から下へ降りるのを繰り返す。
   数値は SVG の座標系（線の長さ 146.4）。
   無限マークを描き終わる 2.6 秒後から動き出す。 */
.p-works-hero__scroll-dot { fill: var(--c-base); }

.is-drawn .p-works-hero__scroll-dot {
  /* backwards：待っている 2.6 秒の間も 0% の状態（＝非表示）を保つ。
     これがないと待機中に丸が見えていて、動き出す瞬間に一度消えてしまう */
  animation: scroll-dot 2.4s cubic-bezier(0.65, 0, 0.35, 1) 2.6s infinite backwards;
}

@keyframes scroll-dot {
  0%   { transform: translateY(0);       opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(142px);   opacity: 0; }
}
.p-works-hero__scroll span {
  position: absolute;
  top: calc(var(--u) * 55);
  left: calc(var(--u) * 26);
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: calc(var(--u) * 15);
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-works-hero__label {
  position: absolute;
  top: calc(var(--u) * 713);
  left: calc(var(--u) * 64);
  z-index: 2;
  font-size: calc(var(--u) * 12);
  line-height: 1;
  letter-spacing: 0.04em;
}

.p-works-hero__title {
  position: absolute;
  top: calc(var(--u) * 731);
  left: calc(var(--u) * 62);
  z-index: 2;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--u) * 80);
  line-height: 1;
}

/* =========================================================
   Works : list
   ========================================================= */
/* 重なり順は ヒーロー(0) < 波(1) < 実績(2)。
   マイナスの z-index を使うとブラウザによって背面に回り込むことがあるため、
   波はヒーローと実績の間に独立して置いている */
.p-works-curve {
  position: relative;
  z-index: 1;
  height: 0;
  pointer-events: none;
}

/* 実績セクションの上端より 106px 上から始めることで、曲線の山がヒーローに掛かる */
.p-works-curve::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * -106);
  left: 0;
  width: 100%;
  height: calc(var(--u) * 3101);
  background: url("../img/svg/02_works_bg.svg") center top / 100% 100% no-repeat;
}

.p-works {
  position: relative;
  /* 波より手前。波の下半分を隠しつつ、ヒーローの上に重なって上がってくる */
  z-index: 2;
  /* View Works で飛んだときの着地位置。100px ぶん手前で止める */
  scroll-margin-top: calc(var(--u) * 100);
  padding-top: calc(var(--u) * 54);
  background: var(--c-base);
}

.p-works__inner {
  width: calc(var(--u) * 1237);
  margin: 0 auto;
}

.c-breadcrumb {
  position: absolute;
  top: calc(var(--u) * 57.6);
  left: calc(var(--u) * 78.5);
  /* カンプの色（うすいグレー）。小さすぎないよう 11px を下限にしている */
  color: #c4c8d4;
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 17), 11px);
  line-height: 1;
}
.c-breadcrumb__list {
  display: flex;
  gap: calc(var(--u) * 6);
  line-height: 1;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "/";
  margin-right: calc(var(--u) * 7);
  opacity: 0.5;
}

.p-works__lead {
  font-size: max(calc(var(--u) * 48), 22px);
  line-height: calc(var(--u) * 86);
  letter-spacing: -0.02em;
  text-align: center;
}

/* ---- 行単位でマスクからせり上がる文章（c-lines）----
   Top のリード文と Works のリード文で共通に使う */

/* 1 行ぶんの「窓」。はみ出した文字はここで隠れる。
   行間が詰まっている見出しだと y や j の足が、影が付いていれば影までが
   切れてしまうので、切る位置を上下に広げている（既定 0.18em。
   影が付く見出しでは、外側の要素で --lines-bleed を大きく指定する）*/
.c-lines__line {
  display: block;
  overflow: hidden;
  /* 上下に余白を足してから、同じ分だけ margin で戻す。
     こうすると「切る位置」だけが外へ広がり、行の高さは変わらない。
     どのブラウザでも同じに効く書き方にしてある */
  padding: var(--lines-bleed, 0.18em) 0;
  margin: calc(var(--lines-bleed, 0.18em) * -1) 0;
}

/* 親を縦並びの flex にしておく。
   こうすると行どうしの margin が相殺されないので、
   上で足した余白がきれいに打ち消され、行間も高さも元のままになる */
.p-hero__lead,
.p-works__lead,
.p-member__catch,
.p-member__sub {
  display: flex;
  flex-direction: column;
}

/* 窓の下に待機させておく中身。逃がしたぶんも含めて窓の外に出しておく。
   出はじめを遅らせたいときは、外側で --lines-delay を指定する。
   （@keyframes の中では var() が Safari で効かないことがあるため、
     ここはアニメーションではなく transition で書いている）*/
.c-lines__line > span {
  display: block;
  transform: translateY(calc(100% + var(--lines-bleed, 0.18em) + 0.12em));
  transition: transform 1.2s var(--ease);
  transition-delay: var(--lines-delay, 0s);
}
/* 2 行目は少し遅らせる */
.c-lines__line:nth-child(2) > span {
  transition-delay: calc(var(--lines-delay, 0s) + var(--lines-gap, 0.15s));
}

/* 下から せり上がって窓に入ってくる */
.is-shown .c-lines__line > span {
  transform: none;
}

/* ---- ふわっと浮かび上がる（c-fade）----
   下から少し上がりながら、透明から出てくる。
   @keyframes の中で var() を使うと Safari で効かないことがあるため、
   ここはアニメーションではなく transition で書いている */
.c-fade__item {
  opacity: 0;
  transform: translateY(calc(var(--u) * 24));
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease);
  transition-delay: var(--fade-delay, 0s);
}
/* 2 つめは少し遅らせる */
.c-fade__item:nth-child(2) {
  transition-delay: calc(var(--fade-delay, 0s) + var(--fade-gap, 0.15s));
}

.is-shown .c-fade__item {
  opacity: 1;
  transform: none;
}

@keyframes mask-rise {
  from { transform: translateY(calc(100% + 0.3em)); }
  to   { transform: none; }
}

.c-badge {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 154);
  height: calc(var(--u) * 36);
  margin-top: calc(var(--u) * 35);
  border-radius: 999px;
  background: var(--grad);
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: max(calc(var(--u) * 17), 12px);
  line-height: 1;
}

.p-works__feature {
  display: block;
  width: 100%;
  margin-top: calc(var(--u) * 60);
  text-align: center;
  cursor: pointer;
}

.p-works__feature-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--u) * 4);
  aspect-ratio: 16 / 9;
  transition: border-radius 0.5s var(--ease);
}
.p-works__feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.p-works__feature-title {
  display: block;
  margin-top: calc(var(--u) * 37);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: max(calc(var(--u) * 36), 18px);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---- 絞り込み ---- */
.p-works__filter {
  display: flex;
  gap: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 92);
}

.c-tab {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 155);
  height: calc(var(--u) * 36);
  border: 1px solid rgba(15, 15, 45, 0.25);
  border-radius: 999px;
  color: var(--c-navy);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 17), 12px);
  line-height: 1;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.c-tab.is-current {
  border-color: transparent;
  background: var(--grad);
  color: var(--c-base);
}

/* ---- 一覧 ---- */
.p-works__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--u) * 43);
  row-gap: calc(var(--u) * 60);
  margin-top: calc(var(--u) * 69);
}

.p-works__item[hidden] { display: none; }

/* 1 枚目が画面に入ったら、あとは時間差で順に出る。
   --d（並び順）は JS が各カードに入れている */
.p-works__item {
  opacity: 0;
  transform: translateY(calc(var(--u) * 26));
  transition:
    opacity 1.5s var(--ease),
    transform 1.5s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.1s);
}

.p-works__item.is-shown {
  opacity: 1;
  transform: none;
}

.c-card {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.c-card__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--u) * 4);
  aspect-ratio: 16 / 9;
  transition: border-radius 0.5s var(--ease);
}
.c-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* ---- 動画サムネイルの再生マーク ---- */
.c-card__play {
  --play-size: calc(var(--u) * 62);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.p-works__feature-thumb .c-card__play { --play-size: calc(var(--u) * 96); }

.c-card__play::before {
  content: "";
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  background: rgba(15, 15, 45, 0.7);
}
.c-card__play::after {
  content: "";
  position: absolute;
  margin-left: calc(var(--play-size) * 0.07);
  border-style: solid;
  border-width: calc(var(--play-size) * 0.18) 0 calc(var(--play-size) * 0.18) calc(var(--play-size) * 0.29);
  border-color: transparent transparent transparent var(--c-base);
}

/* ホバーできない端末（タッチ）では常に出しておく */
@media (hover: none) {
  .c-card__play { opacity: 1; }
}

.c-card__title {
  display: block;
  margin-top: calc(var(--u) * 22);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 24), 15px);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* タイトルが長くて 2 行になってしまう作品だけ、1 行に収まる大きさにする */
.c-card__title--long {
  font-size: max(calc(var(--u) * 19), 12px);
}

.c-card__cat {
  display: block;
  margin-top: calc(var(--u) * 8);
  color: rgba(15, 15, 45, 0.55);
  font-family: var(--f-en);
  font-weight: 400;
  font-size: max(calc(var(--u) * 13), 11px);
  line-height: 1;
}

@media (hover: hover) {
  .c-tab:hover { border-color: var(--c-purple); color: var(--c-purple); }
  .c-tab.is-current:hover { color: var(--c-base); }
  .c-card:hover .c-card__thumb img,
  .p-works__feature:hover .p-works__feature-thumb img { transform: scale(1.1); }
  /* ホバー中は角丸を落として画像を四角く見せる */
  .c-card:hover .c-card__thumb,
  .p-works__feature:hover .p-works__feature-thumb { border-radius: 0; }
  .c-card:hover .c-card__play,
  .p-works__feature:hover .c-card__play,
  .js-work:focus-visible .c-card__play { opacity: 1; }
  .p-works-hero__view:hover { opacity: 0.6; }
  .c-breadcrumb a:hover { opacity: 0.6; }
}

/* =========================================================
   modal（作品の再生・拡大）
   ========================================================= */
.l-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 60) calc(var(--u) * 80);
  background: rgba(15, 15, 45, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.l-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.l-modal__inner {
  position: relative;
  width: min(calc(var(--u) * 1100), 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.l-modal__close {
  position: fixed;
  top: calc(var(--u) * 32);
  right: calc(var(--u) * 32);
  z-index: 1;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
  background: url("../img/svg/00_icon_page_close.svg") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}

.l-modal__body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: calc(var(--u) * 4);
}
.l-modal__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--u) * 4);
}

.l-modal__title {
  margin-top: calc(var(--u) * 24);
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: max(calc(var(--u) * 24), 15px);
  line-height: 1.3;
  text-align: center;
}

@media (hover: hover) {
  .l-modal__close:hover { transform: rotate(90deg); }
}

body.is-modal-open { overflow: hidden; }

/* =========================================================
   Member
   カンプ基準（1440px）：
   ヒーロー 89–835 / 白い曲線の上端 757.5 / カード 714–1404
   ========================================================= */
.p-member {
  position: relative;
  /* 下に続く Contact セクションより奥に置く */
  z-index: 0;
  /* リボンが画面外まで伸びるので横だけ切る。
     overflow-x: clip だと縦も切られてリボンの裾が欠けるため clip-path を使う */
  clip-path: inset(-100vh 0 -100vh 0);
  /* カードの上端が 714 に来る量（ヘッダー下 89 から 625） */
  padding-top: calc(var(--u) * 543.6);
  /* ここで Member セクションを終え、Contact セクションに渡す（カンプ 1440） */
  padding-bottom: calc(var(--u) * 25);
}

/* ---------- 背景：動画 ---------- */
.p-member__hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(var(--u) * 747.5);
  overflow: hidden;
  background: linear-gradient(221deg, #5418ff 0%, #2d40f7 66%, #3e40fb 100%);
}
.p-member__video {
  width: 100%;
  /* Top と同じく、見せる位置を 84px 上にずらす */
  height: calc(100% + var(--u) * 84);
  margin-top: calc(var(--u) * -84);
  object-fit: cover;
}

/* 動画にかぶせる白のもや（15%）。波の上辺がカンプの y=671 に来る位置 */
.p-member__veil {
  position: absolute;
  top: calc(var(--u) * 583.5);
  left: 0;
  width: 100%;
  height: calc(var(--u) * 1126);
  background: url("../img/svg/03_member_bg_02.svg") center top / 100% 100% no-repeat;
}

/* ---------- 背景：白い下地（曲線） ---------- */
.p-member__curve {
  position: absolute;
  top: calc(var(--u) * 670);
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(var(--u) * 1041);
  background: url("../img/svg/03_member_bg_01.svg") center top / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- 背景：ふわっとしたリボン ---------- */
.p-member__shape {
  position: absolute;
  top: calc(var(--u) * 809.5);
  left: calc(var(--u) * -320);
  z-index: 2;
  width: calc(var(--u) * 1992);
  height: calc(var(--u) * 723);
  background: url("../img/svg/03_member_shape_02.svg") center top / 100% 100% no-repeat;
  pointer-events: none;

  /* 左から右へ「丸い先端」が進みながら現れる。
     マスクを 2 枚重ねている（2 枚の和が見える範囲になる）
       1 枚目：通り過ぎた後ろ側を塗りつぶす四角
       2 枚目：先端の丸（半径＝リボンの高さの半分）
     どちらも位置だけを動かすので、常に同じ場所で先端が揃う */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
          mask-image:
    linear-gradient(90deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
  -webkit-mask-size: 200% 100%, 300% 100%;
          mask-size: 200% 100%, 300% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  /* 先端の丸ごと画面外（リボンの左端より左）に置いた、完全に隠れた状態 */
  -webkit-mask-position: 120% 0, 85% 50%;
          mask-position: 120% 0, 85% 50%;
}

/* 下にスクロールした瞬間に描きはじめる */
.is-drawn .p-member__shape {
  /* 出だしは早めに動かしつつ、中盤で速く、終わりはゆっくり（緩急） */
  animation: member-shape-draw 2.5s cubic-bezier(0.4, 0, 0.15, 1) forwards;
}
/* 動きを減らす設定なら、描き終わった状態で静止 */
.is-static .p-member__shape {
  -webkit-mask-position: 0 0, 25% 50%;
          mask-position: 0 0, 25% 50%;
}

/* 左から右へ、丸い先端が一定の流れで進む。
   2 枚のマスクは同じ先端位置を指すよう連動させている */
@keyframes member-shape-draw {
  from {
    -webkit-mask-position: 120% 0, 85% 50%;
            mask-position: 120% 0, 85% 50%;
  }
  to {
    -webkit-mask-position: 0 0, 25% 50%;
            mask-position: 0 0, 25% 50%;
  }
}




/* ---------- 見出し ---------- */
.p-member__label {
  position: absolute;
  top: calc(var(--u) * 562.7);
  left: calc(var(--u) * 66.8);
  z-index: 3;
  color: var(--c-base);
  font-size: calc(var(--u) * 11);
  line-height: 1;
  letter-spacing: 0.04em;
}
.p-member__title {
  position: absolute;
  top: calc(var(--u) * 576.5);
  left: calc(var(--u) * 59.1);
  z-index: 3;
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--u) * 80);
  line-height: 1;
  letter-spacing: -0.025em;
}

.p-member .c-breadcrumb {
  top: calc(var(--u) * 820.5);
  left: calc(var(--u) * 103.4);
  z-index: 3;
}

/* ---------- リード ---------- */
.p-member__catch {
  /* 画面に入ってすぐ動くと見逃しやすいので、少し待ってから出す */
  --lines-delay: 0.4s;
  position: absolute;
  top: calc(var(--u) * 950.7);
  left: calc(var(--u) * 124.7);
  z-index: 3;
  color: #0500cf;
  font-family: var(--f-en);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--u) * 60);
  line-height: calc(var(--u) * 67);
  letter-spacing: -0.008em;
  white-space: nowrap;
}
.p-member__sub {
  /* キャッチが出てから続けて出す */
  --lines-delay: 0.75s;
  position: absolute;
  top: calc(var(--u) * 1196.1);
  left: calc(var(--u) * 128.1);
  z-index: 3;
  font-size: calc(var(--u) * 37);
  line-height: calc(var(--u) * 58);
  white-space: nowrap;
}

/* ---------- メンバーカード ---------- */
.p-member__list {
  /* 2 枚目は 0.2 秒あとから */
  --fade-gap: 0.2s;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 26);
  width: calc(var(--u) * 753.5);
  margin-left: calc(var(--u) * 605.1);
}

.c-member {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--u) * 25);
  background: #5f5bf0;
}

.c-member__photo {
  background: #fff;
}
.c-member__photo img {
  width: 100%;
  height: calc(var(--u) * 334.2);
  object-fit: cover;
}
/* 2 枚の似顔絵は画の中の顔の位置が違うので、
   カンプと同じ見え方になるよう縦の切り取り位置を個別に指定 */
.p-member__item:nth-child(1) .c-member__photo img { object-position: center 8%; }
.p-member__item:nth-child(2) .c-member__photo img { object-position: center 37%; }

.c-member__body {
  flex: 1 0 auto;
  padding: calc(var(--u) * 21.9) calc(var(--u) * 40) calc(var(--u) * 40.5);
  color: var(--c-base);
}

.c-member__role {
  font-size: calc(var(--u) * 14.6);
  line-height: 1;
  font-feature-settings: "palt" 1;
  letter-spacing: -0.02em;
}

.c-member__name {
  margin-top: calc(var(--u) * 27.2);
}
.c-member__name-en {
  display: block;
  font-family: var(--f-en);
  font-weight: 400;
  font-size: calc(var(--u) * 21);
  line-height: 1;
  word-spacing: calc(var(--u) * 2);
}
.c-member__name-ja {
  display: block;
  margin-top: calc(var(--u) * 6.6);
  font-size: calc(var(--u) * 19);
  line-height: 1;
  letter-spacing: -0.05em;
}

.c-member__text {
  margin-top: calc(var(--u) * 22.8);
  font-weight: 400;
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 25);
  /* カンプと同じ詰め組み（約物を半角に）。1 行の折り返し位置もこれで決まる */
  font-feature-settings: "palt" 1;
  letter-spacing: -0.02em;
}
.c-member__text p + p {
  margin-top: calc(var(--u) * 25);
}

/* カンプの 1 行 ＝ 1 ブロック。
   両端揃え＋ text-align-last で、文字間を自動で伸ばして右端を揃える */
.c-member__line {
  display: block;
  text-align: justify;
  text-align-last: justify;
}
/* 文の切れ目（カンプでも短いままの行）は伸ばさない */
.c-member__line--end {
  text-align-last: left;
}

/* 好きなこと（先頭の丸は CSS で描く） */
.c-member__fav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 25.1);
  font-weight: 400;
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 25);
  letter-spacing: -0.02em;
}
.c-member__fav::before {
  content: "";
  flex: none;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: currentColor;
}

/* =========================================================
   Works : SP  (design width : 375px)
   PC は図版を絶対配置で組んでいるが、SP は縦積みに組み替える
   ========================================================= */
@media (max-width: 767px) {

  /* ---- hero ---- */
  .p-works-hero {
    height: auto;
    /* 下は SCROLL の縦線が収まるぶんだけ余裕をとる */
    padding: calc(var(--u) * 40) calc(var(--u) * 24) calc(var(--u) * 56);
  }

  .p-works-hero { top: calc(var(--header-h) - 1px); }

  .p-works-curve::before {
    top: calc(var(--u) * -26);
    height: calc(var(--u) * 808);
  }

  .p-works-hero__heading {
    position: static;
    width: auto;
    font-size: calc(var(--u) * 28);
  }

  /* 図版はPCと同じ重ね配置のまま、タグだけ落として全幅で見せる */
  .p-works-hero__diagram {
    position: relative;
    /* PC 側の top / left をリセット */
    top: 0;
    left: 0;
    width: 100vw;
    /* ヒーローの左右パディングを打ち消して画面幅いっぱいに */
    margin-left: calc(50% - 50vw);
    height: auto;
    aspect-ratio: 994.29 / 398.23;
    margin-top: calc(var(--u) * 24);
    transform: none;
  }

  .p-works-hero__mugen { inset: 0; }

  /* 位置は図版の高さに対する % 指定。
     無限マークの線の空きに収まる高さを実測して決めている */
  .p-works-hero__node {
    left: 0;
    font-size: calc(var(--u) * 9);
    letter-spacing: 0.02em;
  }
  .p-works-hero__node--direction { top: 13%; }
  .p-works-hero__node--delivery  { top: 75%; }

  .p-works-hero__field { margin-top: 0; }

  .p-works-hero__field-title {
    top: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    font-size: calc(var(--u) * 11);
    line-height: 1.6;
  }
  /* 直下の span（窓）だけに効かせる。中の span まで拾うと、
     「グラフィックデザイン」の字間を詰める指定が上書きされてしまう */
  .p-works-hero__field-title > span { letter-spacing: 0.3em; }
  .p-works-hero__field--movie   .p-works-hero__field-title { left: 23.88%; }
  .p-works-hero__field--graphic .p-works-hero__field-title { left: 76.12%; }

  /* タグは非表示 */
  .p-works-hero__tags,
  .p-works-hero__etc { display: none; }

  /* ---- View Works ----
     PC は絶対配置だが、SP は図版のすぐ下に流し込む */
  .p-works-hero__view {
    position: static;
    display: block;
    width: 100%;
    margin-top: calc(var(--u) * 22);
    font-size: calc(var(--u) * 14);
  }

  /* ---- SCROLL ----
     縦線と丸は右端に、文字はその左に置く */
  /* View Works の下、画面の中央に置く。
     白い波が中央で 419px から始まるので、そこに触れない位置と長さ */
  /* SVG は 7.52 : 149.97（幅1 : 高さ19.94）。この比を崩すと
     先端の丸が楕円になるので、幅と高さを必ず比どおりにする */
  .p-works-hero__scroll {
    top: auto;
    bottom: calc(var(--u) * 31);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(var(--u) * 3.91);
    height: calc(var(--u) * 78);
  }
  /* 文字は PC と同じく線の右側。小さめにして収める */
  .p-works-hero__scroll span {
    top: calc(var(--u) * 34);
    left: calc(var(--u) * 11);
    font-size: calc(var(--u) * 8);
    white-space: nowrap;
  }

  .p-works-hero__label {
    position: static;
    margin-top: calc(var(--u) * 32);
    font-size: calc(var(--u) * 7);
  }

  .p-works-hero__title {
    position: static;
    margin-top: calc(var(--u) * 2);
    font-size: calc(var(--u) * 24);
  }

  /* ---- list ---- */
  .p-works { padding-top: calc(var(--u) * 40); }

  .p-works__inner { width: calc(var(--u) * 327); }

  .c-breadcrumb {
    position: static;
    margin-bottom: calc(var(--u) * 24);
    /* PC は 17px 相当。SP はそのままだと大きいので少し小さく */
    font-size: calc(var(--u) * 13);
  }

  .p-works__lead {
    /* 1 行目（19 文字）が折り返さない大きさ */
    font-size: calc(var(--u) * 17);
    line-height: 1.8;
  }

  .c-badge {
    width: calc(var(--u) * 110);
    height: calc(var(--u) * 30);
    margin-top: calc(var(--u) * 28);
    font-size: calc(var(--u) * 14);
  }

  .p-works__feature { margin-top: calc(var(--u) * 20); }

  .p-works__feature-title {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 20);
  }

  .p-works__filter {
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 40);
  }

  .c-tab {
    width: auto;
    flex: 1 1 0;
    height: calc(var(--u) * 32);
    font-size: calc(var(--u) * 14);
  }

  .p-works__list {
    grid-template-columns: 1fr;
    row-gap: calc(var(--u) * 32);
    margin-top: calc(var(--u) * 32);
  }

  .c-card__title {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 17);
  }
  .c-card__title--long { font-size: calc(var(--u) * 13.5); }

  .c-card__cat {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 12);
  }

  /* ---- modal ---- */
  .l-modal { padding: calc(var(--u) * 76) calc(var(--u) * 16) calc(var(--u) * 24); }

  .l-modal__close {
    top: calc(var(--u) * 16);
    right: calc(var(--u) * 16);
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
  }

  .l-modal__title {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 16);
  }
}


/* =========================================================
   Contact
   カンプ基準（1440px）：
   ヒーロー 89–693 / 白い曲線の上端 615 / フッター上 1614
   ========================================================= */
.p-contact {
  position: relative;
  /* Member セクションの白い下地より手前に重ねる */
  z-index: 1;
  /* #contact で飛んだときの着地位置（ページ上端から 1522px の所で止める） */
  scroll-margin-top: calc(var(--u) * -83);
  /* リボンが画面外まで伸びるので横だけ切る（縦は切らない） */
  clip-path: inset(-100vh 0 -100vh 0);
  min-height: calc(var(--u) * 1557.9);
}

/* ---------- 背景：ヒーロー ---------- */
/* 上端が波の形。白い下地（bg_01）の形でマスクして、
   Member セクションの白から紫へ波打って切り替わるようにしている */
.p-contact__hero {
  position: absolute;
  top: calc(var(--u) * 92.2);
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(var(--u) * 606);
  overflow: hidden;
  background: var(--grad);

  -webkit-mask-image: url("../img/svg/04_contact_bg_01.svg");
          mask-image: url("../img/svg/04_contact_bg_01.svg");
  /* 幅いっぱい＋高さは画像本来の比率（auto）。要素はその上側 606 だけを使う */
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 大きな ANOU（うすい青） */
.p-contact__logo {
  position: absolute;
  top: calc(var(--u) * 68.3);
  left: calc(var(--u) * 460);
  width: calc(var(--u) * 521.8);
  height: calc(var(--u) * 550.7);
  background: url("../img/svg/04_contact_hero_logo.svg") center top / 100% 100% no-repeat;
  /* スクロールに合わせて上下に動かす（JS）。なめらかに動くよう予告しておく */
  will-change: transform;
}

/* ロゴをスクロールに合わせて降ろす（対応ブラウザのみ）
   JS で毎フレーム位置を書き換えると、スマホの慣性スクロールに
   追いつけずカクついて見える。対応ブラウザでは、スクロールに
   直結した CSS アニメーションに任せる（描画側だけで完結するので滑らか）。
   非対応ブラウザは今までどおり JS が動かす（main.js 側で判定）*/
/* 基準線そのものは見えない。非対応ブラウザではただの空要素 */
.p-contact__px-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  pointer-events: none;
}

@supports (animation-timeline: view()) and (timeline-scope: --x) {
  .p-contact { timeline-scope: --contact-logo; }

  /* 見えない基準線。ヒーローの上端に合わせて置き、高さは 0.8 画面ぶん。
       0%       … 線の上端が画面の下端（ロゴは上に隠れている）
       55.5556% … 線の上端が画面の上端（ロゴが定位置）
       100%     … さらに 0.8 画面ぶん進んだところ（少し沈む）*/
  .p-contact__px-line {
    position: absolute;
    top: calc(var(--u) * 92.2);
    left: 0;
    width: 1px;
    height: 80vh;
    pointer-events: none;
    /* この線の見え方を「時間」として使う */
    view-timeline: --contact-logo block;
  }

  .p-contact__logo {
    animation: contact-logo-drop linear both;
    animation-timeline: --contact-logo;
    animation-range: cover 0% cover 100%;
  }

  /* 移動量はロゴ自身の高さに対する％で書く（550.7 に対して 740 と 80）。
     @keyframes の中では var(--u) が効かないブラウザがあるため */
  @keyframes contact-logo-drop {
    0%       { transform: translate3d(0, -134.3744%, 0); }
    55.5556% { transform: translate3d(0, 0, 0); }
    100%     { transform: translate3d(0, 14.5270%, 0); }
  }
}

/* かぶせる白のもや（15%） */
.p-contact__veil {
  position: absolute;
  top: calc(var(--u) * 488.3);
  left: 0;
  width: 100%;
  height: calc(var(--u) * 1318);
  background: url("../img/svg/04_contact_bg_02.svg") center top / 100% 100% no-repeat;
}

/* ---------- 背景：白い下地（曲線） ---------- */
.p-contact__curve {
  position: absolute;
  top: calc(var(--u) * 622);
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(var(--u) * 1276);
  background: url("../img/svg/04_contact_bg_01.svg") center top / 100% 100% no-repeat;
  pointer-events: none;
}

/* ---------- 背景：ふわっとした帯 ---------- */
/* 外側＝上から下へ現れるアニメーション用のマスク
   内側＝白い下地と同じ形の切り抜き（紫のヒーローには掛からないように）
   マスクを 2 種類かけたいので、要素を入れ子にして 1 枚ずつ持たせている */
.p-contact__shape {
  position: absolute;
  top: calc(var(--u) * 392.5);
  left: calc(var(--u) * 79.2);
  z-index: 2;
  width: calc(var(--u) * 691.25);
  height: calc(var(--u) * 1450.5);
  pointer-events: none;

  /* 上から下へ「丸い先端」が進みながら現れる。
     1 枚目：通り過ぎた後ろ側を塗りつぶす四角
     2 枚目：先端の丸（半径＝帯の幅の半分）
     位置 125% / 87.5% は、丸ごと帯の上端より上にある＝完全に隠れた状態 */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
          mask-image:
    linear-gradient(180deg, #000 0 50%, transparent 50%),
    radial-gradient(circle closest-side at 50% 50%, #000 99%, transparent 100%);
  -webkit-mask-size: 100% 200%, 100% 300%;
          mask-size: 100% 200%, 100% 300%;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 125%, 50% 87.5%;
          mask-position: 0 125%, 50% 87.5%;
}

.p-contact__shape-inner {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/svg/04_contact_shape_03.svg") center top / 100% 100% no-repeat;

  -webkit-mask-image: url("../img/svg/04_contact_bg_01.svg");
          mask-image: url("../img/svg/04_contact_bg_01.svg");
  -webkit-mask-size: calc(var(--u) * 1440) auto;
          mask-size: calc(var(--u) * 1440) auto;
  -webkit-mask-position: calc(var(--u) * -79.2) calc(var(--u) * 229.5);
          mask-position: calc(var(--u) * -79.2) calc(var(--u) * 229.5);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ページを開いたら描きはじめる（JS 側で 0.25 秒だけ待っている） */
.is-drawn .p-contact__shape {
  animation: contact-shape-draw 3.5s cubic-bezier(0.4, 0, 0.15, 1) forwards;
}
/* 動きを減らす設定なら、描き終わった状態で静止 */
.is-static .p-contact__shape {
  -webkit-mask-position: 0 0, 50% 25%;
          mask-position: 0 0, 50% 25%;
}
@keyframes contact-shape-draw {
  from {
    -webkit-mask-position: 0 125%, 50% 87.5%;
            mask-position: 0 125%, 50% 87.5%;
  }
  to {
    -webkit-mask-position: 0 0, 50% 25%;
            mask-position: 0 0, 50% 25%;
  }
}

/* ---------- 見出し ---------- */
.p-contact__label {
  position: absolute;
  top: calc(var(--u) * 540.4);
  left: calc(var(--u) * 73);
  z-index: 3;
  color: var(--c-base);
  font-size: calc(var(--u) * 12);
  line-height: 1;
  letter-spacing: 0.04em;
}
.p-contact__title {
  position: absolute;
  top: calc(var(--u) * 553.5);
  left: calc(var(--u) * 70.4);
  z-index: 3;
  color: var(--c-base);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--u) * 80);
  line-height: 1;
  letter-spacing: -0.025em;
}

.p-contact .c-breadcrumb {
  top: calc(var(--u) * 772.2);
  left: calc(var(--u) * 103.5);
  z-index: 3;
}

/* ---------- 連絡先 ---------- */
.p-contact__lead,
.p-contact__area,
.p-contact__blocks {
  position: absolute;
  z-index: 3;
}

.p-contact__lead {
  top: calc(var(--u) * 1037.7);
  left: calc(var(--u) * 191.2);
}
.p-contact__mail {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: calc(var(--u) * 57);
  line-height: 1;
}
.p-contact__note {
  /* 約物を詰める（カンプと同じ組み方） */
  font-feature-settings: "palt" 1;
  font-size: calc(var(--u) * 15.8);
  line-height: calc(var(--u) * 31);
}
.p-contact__lead .p-contact__note {
  margin-top: calc(var(--u) * 7.5);
}

.p-contact__area {
  top: calc(var(--u) * 1329.8);
  left: calc(var(--u) * 187.9);
}
.p-contact__area-title {
  font-size: calc(var(--u) * 36);
  line-height: calc(var(--u) * 51.9);
}
.p-contact__area .p-contact__note {
  margin-top: calc(var(--u) * 11);
}

/* ---------- 用件別のご案内 ---------- */
.p-contact__blocks {
  top: calc(var(--u) * 756.1);
  left: calc(var(--u) * 793.4);
}
.p-contact__block + .p-contact__block {
  margin-top: calc(var(--u) * 112.7);
}

/* ▶ は CSS で描いている */
.p-contact__block-title {
  position: relative;
  padding-left: calc(var(--u) * 21);
  color: #0500cf;
  font-feature-settings: "palt" 1;
  font-size: calc(var(--u) * 16.9);
  line-height: 1;
}
.p-contact__block-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--u) * 7.5) 0 calc(var(--u) * 7.5) calc(var(--u) * 13);
  border-color: transparent transparent transparent currentColor;
  transform: translateY(-50%);
}

.p-contact__quotes {
  margin-top: calc(var(--u) * 27.8);
  /* 行頭の「 はぶら下げ気味に置く */
  padding-left: calc(var(--u) * 10.5);
}
.p-contact__quote {
  font-feature-settings: "palt" 1;
  font-size: calc(var(--u) * 29.8);
  line-height: calc(var(--u) * 44);
  white-space: nowrap;
}
.p-contact__quote::before { content: "「"; }
.p-contact__quote::after  { content: "」"; }

.p-contact__text {
  margin-top: calc(var(--u) * 19.1);
  padding-left: calc(var(--u) * 21.7);
  font-weight: 400;
  font-feature-settings: "palt" 1;
  font-size: calc(var(--u) * 16.3);
  line-height: calc(var(--u) * 27);
}

/* =========================================================
   Member : SP  (design width : 375px)
   PC は絶対配置の一枚絵。SP はヒーローの下に縦積みで並べ替える
   ========================================================= */
@media (max-width: 767px) {

  .p-member {
    /* ヒーロー（330）＋波の見え幅 */
    padding-top: calc(var(--u) * 360);
    /* ここで Member セクションを終え、Contact セクションに渡す */
    padding-bottom: calc(var(--u) * 30);
    /* SP は曲線をヒーロー際だけに置くので、下地はセクション側で持つ */
    background: var(--c-base);
  }

  /* ---- 背景 ---- */
  .p-member__hero { height: calc(var(--u) * 330); }

  /* Top と同じく、SP では上へのずらしをやめる。
     ずらしたままだと映像が 84 ぶん上に寄り、
     ヘッダーと白い波の真ん中より上に見えてしまう */
  .p-member__video {
    height: 100%;
    margin-top: 0;
  }

  /* SVG は縦横比が保たれるので、比率どおりの高さにしないと
     中に縮小配置されて波の位置がずれる（1440 : 1125.67 / 1440 : 1041.12） */
  .p-member__veil {
    top: calc(var(--u) * 257);
    height: calc(var(--u) * 293.2);
  }

  /* 波のいちばん低いところ（左端）が、ヒーローの下端 330 に来る位置 */
  .p-member__curve {
    top: calc(var(--u) * 309.8);
    height: calc(var(--u) * 271.2);
  }

  .p-member__shape {
    top: calc(var(--u) * 430);
    left: calc(var(--u) * -140);
    width: calc(var(--u) * 700);
    height: calc(var(--u) * 254);
  }

  /* ---- 見出し ---- */
  .p-member__label {
    top: calc(var(--u) * 260);
    left: calc(var(--u) * 24);
    font-size: calc(var(--u) * 7);
  }

  .p-member__title {
    top: calc(var(--u) * 272);
    left: calc(var(--u) * 22);
    font-size: calc(var(--u) * 24);
  }

  /* ---- リード ---- */
  /* 背景（曲線・リボン）が z-index を持つので、
     SP でも relative のままにして重なり順を保つ */
  .p-member .c-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--u) * 327);
    margin: 0 auto calc(var(--u) * 22);
  }

  .p-member__catch {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--u) * 327);
    margin: 0 auto;
    font-size: calc(var(--u) * 30);
    line-height: 1.15;
  }

  .p-member__sub {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--u) * 327);
    margin: calc(var(--u) * 26) auto 0;
    font-size: calc(var(--u) * 19);
    line-height: 1.7;
  }

  /* ---- カード ---- */
  .p-member__list {
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 19);
    width: calc(var(--u) * 279);
    margin: calc(var(--u) * 36) auto 0;
  }

  .c-member { border-radius: calc(var(--u) * 13); }

  .c-member__photo img { height: calc(var(--u) * 272); }

  .c-member__body { padding: calc(var(--u) * 19); }

  .c-member__role { font-size: calc(var(--u) * 10.5); }

  .c-member__name { margin-top: calc(var(--u) * 14); }

  .c-member__name-en { font-size: calc(var(--u) * 13.5); }

  .c-member__name-ja {
    margin-top: calc(var(--u) * 5);
    font-size: calc(var(--u) * 11);
  }

  /* カンプの改行位置は PC のみ。SP は幅に合わせて自然に折り返す */
  .u-br-pc { display: none; }

  .c-member__line {
    display: inline;
    text-align-last: auto;
  }

  /* SP は自然に流したうえで、右端だけ揃える */
  .c-member__text p { text-align: justify; }

  .c-member__text {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 9);
    line-height: 1.9;
    letter-spacing: 0;
  }
  .c-member__text p + p { margin-top: calc(var(--u) * 14); }

  .c-member__fav {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 9.5);
    line-height: 1.9;
    letter-spacing: 0;
  }
  .c-member__fav::before {
    width: calc(var(--u) * 5.5);
    height: calc(var(--u) * 5.5);
  }
}

/* =========================================================
   Contact : SP  (design width : 375px)
   PC は絶対配置の一枚絵。SP はヒーローの下に縦積みで並べ替える
   ========================================================= */
@media (max-width: 767px) {

  .p-contact {
    min-height: 0;
    /* ANOU ロゴの頭（セクション上端 +62px）がヘッダー（60px）の
       すぐ下に出る位置で止める */
    scroll-margin-top: calc(var(--u) * -2);
    /* ヒーロー（330）＋波の見え幅 */
    padding-top: calc(var(--u) * 360);
    padding-bottom: calc(var(--u) * 48);
    background: var(--c-base);
  }

  /* ---- 背景 ---- */
  /* 波の画像（幅いっぱいで高さ約332）に収まる高さにしておく */
  .p-contact__hero {
    top: 0;
    height: calc(var(--u) * 330);
  }

  /* 画面中央に置く（375 − 204 の半分 ＝ 85.5）。
     下端が半調の波にちょうど届く高さ */
  .p-contact__logo {
    top: calc(var(--u) * 62);
    left: calc(var(--u) * 85.5);
    width: calc(var(--u) * 204);
    height: calc(var(--u) * 215.3);
  }

  /* SP は 215.3 に対して 740 と 80 */
  @supports (animation-timeline: view()) and (timeline-scope: --x) {
    .p-contact__px-line { top: 0; }
    .p-contact__logo { animation-name: contact-logo-drop-sp; }

    @keyframes contact-logo-drop-sp {
      0%       { transform: translate3d(0, -343.7065%, 0); }
      55.5556% { transform: translate3d(0, 0, 0); }
      100%     { transform: translate3d(0, 37.1574%, 0); }
    }
  }

  /* SVG は縦横比が保たれるので、比率どおりの高さにする */
  .p-contact__veil {
    top: calc(var(--u) * 264.7);
    height: calc(var(--u) * 343.2);
  }

  /* 波のいちばん低いところ（右端）が、ヒーローの下端 330 に来る位置 */
  .p-contact__curve {
    top: calc(var(--u) * 309.8);
    height: calc(var(--u) * 332.2);
  }

  /* PC と同じく、上は波で切られ下はフッターに隠れる大きさにして、
     帯の全体像が見えないようにしている */
  .p-contact__shape {
    top: calc(var(--u) * 250);
    left: calc(var(--u) * -10);
    width: calc(var(--u) * 429);
    height: calc(var(--u) * 900);
  }

  /* 切り抜きは「波の形」＋「その下を全部塗る四角」の 2 枚。
     SP は白い下地の要素が波の分の高さしかないので、
     下側は四角で補っている */
  .p-contact__shape-inner {
    -webkit-mask-image:
      url("../img/svg/04_contact_bg_01.svg"),
      linear-gradient(#000, #000);
            mask-image:
      url("../img/svg/04_contact_bg_01.svg"),
      linear-gradient(#000, #000);
    /* 2 枚目（四角）は 370 から。波の下端 392 より上から始めて
       22px ぶん重ねる。ぴったり隣り合わせにすると、端数の丸めで
       境目に髪の毛ほどの隙間（白い線）が出るため */
    -webkit-mask-size:
      calc(var(--u) * 375) auto,
      100% calc(100% - var(--u) * 370);
            mask-size:
      calc(var(--u) * 375) auto,
      100% calc(100% - var(--u) * 370);
    -webkit-mask-position:
      calc(var(--u) * 10) calc(var(--u) * 59.8),
      0 calc(var(--u) * 370);
            mask-position:
      calc(var(--u) * 10) calc(var(--u) * 59.8),
      0 calc(var(--u) * 370);
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
  }

  /* ---- 見出し ---- */
  .p-contact__label {
    top: calc(var(--u) * 266);
    left: calc(var(--u) * 24);
    font-size: calc(var(--u) * 7);
  }

  .p-contact__title {
    top: calc(var(--u) * 278);
    left: calc(var(--u) * 22);
    font-size: calc(var(--u) * 24);
  }

  /* ---- 本文（縦積み） ---- */
  .p-contact .c-breadcrumb {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--u) * 327);
    margin: 0 auto calc(var(--u) * 34);
  }

  .p-contact__lead,
  .p-contact__area,
  .p-contact__blocks {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--u) * 327);
    margin-left: auto;
    margin-right: auto;
  }

  /* 本文まわりは一律 70%（余白も同じ比率で詰めている） */
  .p-contact__mail { font-size: calc(var(--u) * 24); }

  .p-contact__note {
    font-size: calc(var(--u) * 8.4);
    line-height: 1.9;
  }
  .p-contact__lead .p-contact__note { margin-top: calc(var(--u) * 8); }

  .p-contact__area { margin-top: calc(var(--u) * 52); }
  .p-contact__area-title {
    font-size: calc(var(--u) * 15.4);
    line-height: 1.55;
  }
  .p-contact__area .p-contact__note { margin-top: calc(var(--u) * 10); }

  .p-contact__blocks { margin-top: calc(var(--u) * 35); }
  .p-contact__block + .p-contact__block { margin-top: calc(var(--u) * 29); }

  .p-contact__block-title {
    padding-left: calc(var(--u) * 11);
    font-size: calc(var(--u) * 9.1);
  }
  .p-contact__block-title::before {
    border-width: calc(var(--u) * 3.9) 0 calc(var(--u) * 3.9) calc(var(--u) * 6.7);
  }

  .p-contact__quotes {
    margin-top: calc(var(--u) * 12.5);
    padding-left: calc(var(--u) * 4);
  }
  .p-contact__quote {
    font-size: calc(var(--u) * 11.9);
    line-height: 1.75;
    white-space: normal;
  }

  .p-contact__text {
    margin-top: calc(var(--u) * 10);
    padding-left: calc(var(--u) * 9);
    font-size: calc(var(--u) * 8.4);
    line-height: 1.9;
  }
}