@charset "UTF-8";

/* ==========================================================================
   TSUMUGI WORKS DESIGN — main.css
   Step1：変数 / リセット / 基本 / 共通パーツ / ヘッダー / 固定要素 / フッター
   Step2：ローダー / キービジュアル / ステートメント
   Step3：セクション見出し / アーカイブバナー / マーキー / 人物一覧 / モーダル
   Step4：制作の流れ
   Step5：料金プラン・概要
   Step6：ステッカー装飾 / 動きを減らす設定
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数
   -------------------------------------------------------------------------- */
:root {
  /* カラー（オレンジ基調。元仕様の役割との対応をコメントに記載） */
  --bg: #A8330A;          /* ベース背景・濃オレンジ（元：濃紺） */
  --main: #FB7D0B;        /* メインアクセント・名刺と同じオレンジ。タイル面やフッター（元：紫） */
  --cta: #1F2BFF;         /* CTA・強調・エレクトリックブルー（元：ピンク） */
  --accent: #FFE14A;      /* サブアクセント・イエロー（元：シアン） */
  --ink: #2A0F04;         /* 明るい面の上に置く文字・濃い焦げ茶 */
  --white: #FFFFFF;
  --gray: #D9A58E;        /* 装飾の四角 */
  --sub: #F3D9CC;         /* 補助テキスト */

  /* フォント */
  --font-en: "Funnel Display", "Noto Sans JP", sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* スケーリング単位
     PC：デザイン基準 1440px。calc(var(--u) * 16) で「1440px幅のとき16px」。1920px幅で拡大を止める
     SP：デザイン基準 375px（下のメディアクエリで上書き） */
  --u: calc(min(100vw, 1920px) / 1440);

  /* 共通寸法 */
  --cut: calc(var(--u) * 14);         /* 切り欠きの大きさ */
  --side: calc(var(--u) * 40);        /* 左右の余白 */
  --header-h: calc(var(--u) * 84);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 750px) {
  :root {
    --u: calc(100vw / 375);
    --cut: calc(var(--u) * 10);
    --side: calc(var(--u) * 16);
    --header-h: calc(var(--u) * 56);
  }
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

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

img, video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

small {
  font-size: inherit;
}

i {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   3. 基本
   -------------------------------------------------------------------------- */
body {
  min-width: 320px;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: calc(var(--u) * 15);
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 750px) {
  body {
    font-size: calc(var(--u) * 13);
  }
}

/* フォーカスリング（消さない） */
:focus-visible {
  outline: calc(var(--u) * 3) solid var(--accent);
  outline-offset: calc(var(--u) * 3);
}

/* アンカー移動でフォーカスを受けるだけの要素には枠を出さない（操作できる要素ではないため） */
main:focus,
section:focus {
  outline: none;
}

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

.skip_link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.6em 1em;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-110%);
}

.skip_link:focus {
  transform: translateY(0);
}

/* PC/SP の出し分け用 */
@media (min-width: 751px) {
  .sp { display: none !important; }
}

@media (max-width: 750px) {
  .pc { display: none !important; }
}

/* --------------------------------------------------------------------------
   4. 共通パーツ
   -------------------------------------------------------------------------- */

/* --- CTAボタン：右上を切り欠いた形 ＋ 4つの正方形の矢印 ＋ ホバーで下辺に白ライン --- */
.btn_cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 20);
  min-width: calc(var(--u) * 200);
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 24);
  background: var(--cta);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 17);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* 下辺の白ライン */
.btn_cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--u) * 4);
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}

/* clip-path で outline が切れるため、フォーカスは内側に表示する */
.btn_cta:focus-visible {
  outline-offset: calc(var(--u) * -6);
}

.btn_cta:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .btn_cta:hover::after {
    transform: scaleX(1);
  }

  .btn_cta:hover .btn_cta_arrow {
    transform: translate(calc(var(--u) * 3), calc(var(--u) * -3));
  }
}

/* 矢印：4つの正方形で作る右上向きの矢印（右上の角に3つ＋左下に1つ） */
.btn_cta_arrow {
  --sq: calc(var(--u) * 5);
  display: grid;
  grid-template-columns: repeat(3, var(--sq));
  grid-template-rows: repeat(3, var(--sq));
  flex: none;
  transition: transform 0.45s var(--ease);
}

.btn_cta_arrow i {
  display: block;
  width: var(--sq);
  height: var(--sq);
  background: currentColor;
}

.btn_cta_arrow i:nth-child(1) { grid-area: 1 / 2; }
.btn_cta_arrow i:nth-child(2) { grid-area: 1 / 3; }
.btn_cta_arrow i:nth-child(3) { grid-area: 2 / 3; }
.btn_cta_arrow i:nth-child(4) { grid-area: 3 / 1; }

@media (max-width: 750px) {
  .btn_cta {
    gap: calc(var(--u) * 12);
    min-width: calc(var(--u) * 132);
    height: calc(var(--u) * 44);
    padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 16);
    font-size: calc(var(--u) * 14);
  }

  .btn_cta::after {
    height: calc(var(--u) * 3);
  }

  .btn_cta_arrow {
    --sq: calc(var(--u) * 4);
  }
}

/* --- SNSボタン：切り欠き形・サブアクセント色 --- */
.btn_sns {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  background: var(--accent);
  color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background-color 0.3s, color 0.3s;
}

/* SNSの短い文字（公式アイコン画像を入れるまでの仮表示）と、アイコン画像 */
.sns_label {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  letter-spacing: 0.02em;
}

.sns_icon {
  display: block;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  /* 画像の形でくり抜き、ボタンの文字色（currentColor）で塗る */
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* フッターのボタンはアイコンを少し大きく */
.footer_sns .sns_icon {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
}

.btn_sns svg {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}

.btn_sns:focus-visible {
  outline-color: var(--ink);
  outline-offset: calc(var(--u) * -6);
}

@media (hover: hover) {
  .btn_sns:hover {
    background: var(--white);
  }
}

@media (max-width: 750px) {
  .btn_sns {
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 44);
  }

  .btn_sns svg {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
  }

  .sns_label {
    font-size: calc(var(--u) * 11);
  }

  .sns_icon {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
  }
}

/* --------------------------------------------------------------------------
   5. ヘッダー（固定）
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--header-h);
  padding-left: var(--side);
  transition: background-color 0.4s;
}

/* スクロール後は背景色を敷いて下の内容と重なっても読めるようにする */
.is-scrolled .header {
  background: var(--bg);
}

.header_logo {
  position: relative;
  z-index: 2;
  flex: none;
  display: block;
  width: calc(var(--u) * 90);
}

.header_logo img {
  width: 100%;
}

.header_nav {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}

.header_nav_list {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 48);
  height: 100%;
}

.header_nav_list a {
  position: relative;
  display: block;
  padding: calc(var(--u) * 10) calc(var(--u) * 4);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  letter-spacing: 0.08em;
  /* グリッチ演出中に文字幅が変わっても折り返さない */
  white-space: nowrap;
}

/* ホバー時に左に出る正方形（文字のグリッチ演出は glitch.js） */
.header_nav_list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--u) * -12);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  margin-top: calc(var(--u) * -4);
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}

.header_nav_list a:focus-visible::before {
  transform: scale(1);
}

@media (hover: hover) {
  .header_nav_list a:hover::before {
    transform: scale(1);
  }
}

/* CTAは右上の角にぴったり付ける */
.header_cta {
  margin-left: auto;
  height: 100%;
  min-width: calc(var(--u) * 232);
}

.header_toggle {
  display: none;
}

/* --- SP --- */
@media (max-width: 750px) {
  .header_logo {
    width: calc(var(--u) * 60);
  }

  .header_cta {
    position: relative;
    z-index: 2;
    min-width: calc(var(--u) * 128);
  }

  /* メニュー開閉ボタン：4つの正方形 → 開いた状態では × */
  .header_toggle {
    position: relative;
    z-index: 2;
    order: 3;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--header-h);
    height: var(--header-h);
    background: var(--accent);
    color: var(--ink);
  }

  .header_toggle:focus-visible {
    outline-color: var(--ink);
    outline-offset: calc(var(--u) * -5);
  }

  .header_toggle_dots {
    position: relative;
    display: block;
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
  }

  .header_toggle_dots i {
    position: absolute;
    width: calc(var(--u) * 7);
    height: calc(var(--u) * 7);
    background: currentColor;
    transition: transform 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease);
  }

  .header_toggle_dots i:nth-child(1) { top: 0; left: 0; }
  .header_toggle_dots i:nth-child(2) { top: 0; right: 0; }
  .header_toggle_dots i:nth-child(3) { bottom: 0; left: 0; }
  .header_toggle_dots i:nth-child(4) { bottom: 0; right: 0; }

  /* 開いた状態：2本の線にして × を作る */
  .is-menu-open .header_toggle_dots i:nth-child(1),
  .is-menu-open .header_toggle_dots i:nth-child(4) {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 4);
    margin: calc(var(--u) * -2) 0 0 calc(var(--u) * -12);
  }

  .is-menu-open .header_toggle_dots i:nth-child(1) { transform: rotate(45deg); }
  .is-menu-open .header_toggle_dots i:nth-child(4) { transform: rotate(-45deg); }

  .is-menu-open .header_toggle_dots i:nth-child(2),
  .is-menu-open .header_toggle_dots i:nth-child(3) {
    transform: scale(0);
  }

  /* 全画面メニュー */
  .header_nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: calc(var(--header-h) + var(--u) * 40) var(--side) calc(var(--u) * 40);
    background: var(--bg);
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0s 0.35s;
  }

  .is-menu-open .header_nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s, visibility 0s;
  }

  .header_nav_list {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * 8);
    height: auto;
  }

  .header_nav_list a {
    padding: calc(var(--u) * 10) 0;
    font-size: calc(var(--u) * 44);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .header_nav_list a::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. 固定要素（左下SNS・右下CTA）
   -------------------------------------------------------------------------- */
.btm_fix {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--side) calc(var(--u) * 28);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease), visibility 0s;
}

.btm_fix > * {
  pointer-events: auto;
}

.btm_fix_sns {
  display: flex;
  gap: calc(var(--u) * 8);
}

/* フッターに達したら隠す */
.is-footer-in .btm_fix {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 16));
  transition: opacity 0.4s, transform 0.4s var(--ease), visibility 0s 0.4s;
}

/* SPメニューを開いている間は隠す */
.is-menu-open .btm_fix {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 750px) {
  .btm_fix {
    padding-bottom: calc(var(--u) * 12);
  }

  .btm_fix_sns {
    gap: calc(var(--u) * 6);
  }
}

/* --------------------------------------------------------------------------
   7. フッター
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--main);
  color: var(--ink);
}

.footer :focus-visible {
  outline-color: var(--ink);
}

.footer_inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title   sns"
    "title   contact"
    "logo    copy";
  column-gap: calc(var(--u) * 40);
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(var(--u) * 72) var(--side) calc(var(--u) * 40);
}

.footer_title {
  grid-area: title;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 132);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.footer_sns {
  grid-area: sns;
  justify-self: end;
  display: flex;
  gap: calc(var(--u) * 12);
}

.footer_sns a {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  background: var(--ink);
  color: var(--main);
  transition: background-color 0.3s, color 0.3s;
}

.footer_sns svg {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}

@media (hover: hover) {
  .footer_sns a:hover {
    background: var(--white);
    color: var(--ink);
  }
}

.footer_contact {
  grid-area: contact;
  align-self: end;
  justify-self: end;
  text-align: right;
}

.footer_contact_head {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.14em;
}

.footer_contact_mail {
  display: inline-block;
  margin-top: calc(var(--u) * 10);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--u) * 28);
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-bottom: calc(var(--u) * 2) solid currentColor;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .footer_contact_mail:hover {
    opacity: 0.6;
  }
}

.footer_logo {
  grid-area: logo;
  align-self: end;
  justify-self: start;
  display: block;
  width: calc(var(--u) * 72);
  margin-top: calc(var(--u) * 88);
  /* 白いロゴを濃い焦げ茶で表示する */
  filter: brightness(0);
  opacity: 0.85;
}

.footer_logo img {
  width: 100%;
}

.footer_copy {
  grid-area: copy;
  align-self: end;
  justify-self: end;
  font-family: var(--font-en);
  font-size: calc(var(--u) * 12);
  line-height: 1;
  letter-spacing: 0.08em;
}

@media (max-width: 750px) {
  .footer_inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title   title"
      "contact contact"
      "sns     sns"
      "logo    copy";
    padding: calc(var(--u) * 48) var(--side) calc(var(--u) * 24);
  }

  .footer_title {
    font-size: calc(var(--u) * 54);
  }

  .footer_contact {
    justify-self: start;
    margin-top: calc(var(--u) * 40);
    text-align: left;
  }

  .footer_contact_head {
    font-size: calc(var(--u) * 12);
  }

  .footer_contact_mail {
    margin-top: calc(var(--u) * 8);
    font-size: calc(var(--u) * 20);
  }

  .footer_sns {
    justify-self: start;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 28);
  }

  .footer_sns a {
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 44);
  }

  .footer_sns svg {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
  }

  .footer_logo {
    width: calc(var(--u) * 52);
    margin-top: calc(var(--u) * 48);
  }

  .footer_copy {
    font-size: calc(var(--u) * 10);
  }
}

/* --------------------------------------------------------------------------
   8. ローダー（オープニング）
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 0.7s, visibility 0s 0.7s;
}

.loader[hidden] {
  display: none;
}

/* 閉じる（loader.js の FADE_TIME と時間を合わせる） */
.is-loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 表示中は背景をスクロールさせない */
.is-loading {
  overflow: hidden;
}

.loader_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loader_ui {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 20);
}

.loader_logo {
  width: calc(var(--u) * 120);
  margin-bottom: calc(var(--u) * 12);
}

.loader_text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

/* 正方形が左から順に点灯する */
.loader_dots {
  display: flex;
  gap: calc(var(--u) * 8);
}

.loader_dots i {
  display: block;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  background: var(--main);
  opacity: 0.2;
  animation: loader-dot 1s steps(1, end) infinite;
}

.loader_dots i:nth-child(2) { animation-delay: 0.12s; }
.loader_dots i:nth-child(3) { animation-delay: 0.24s; }
.loader_dots i:nth-child(4) { animation-delay: 0.36s; }
.loader_dots i:nth-child(5) { animation-delay: 0.48s; background: var(--accent); }

@keyframes loader-dot {
  0%, 100% { opacity: 0.2; }
  20%, 60% { opacity: 1; }
}

@media (max-width: 750px) {
  .loader_logo {
    width: calc(var(--u) * 88);
    margin-bottom: calc(var(--u) * 8);
  }

  .loader_text {
    font-size: calc(var(--u) * 12);
  }

  .loader_dots {
    gap: calc(var(--u) * 6);
  }

  .loader_dots i {
    width: calc(var(--u) * 12);
    height: calc(var(--u) * 12);
  }
}

/* --------------------------------------------------------------------------
   9. キービジュアル
   -------------------------------------------------------------------------- */
.area_grid {
  position: relative;
  /* grid.js が実際のセル幅を上書きする。これは JS が動く前の初期値 */
  --grid-cell: calc(100vw / 12);
}

.kv {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: calc(var(--u) * 560);
  height: 100vh;
  height: 100svh;
  /* 下の余白＝タイル1マス分＋少し。最下段のタイル列（常に埋まる）と文字が重ならないようにする */
  padding: var(--header-h) var(--side) calc(var(--grid-cell) + var(--u) * 24);
  overflow: hidden;
  background: var(--ink);
}

.kv_bg,
.kv_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kv_video {
  width: 100%;
  height: 100%;
  /* 画面の縦横比が動画と違っても、伸び縮みさせずに余白なく敷き詰める（はみ出した分は端を切る） */
  object-fit: cover;
  object-position: 50% 50%;
}

/* 縦長の動画（kv_sp.mp4）は、映像の主役を上寄りに置いているので上を基準に合わせる */
@media (max-width: 750px), (max-aspect-ratio: 1/1) {
  .kv_video {
    object-position: 50% 20%;
  }
}

/* 文字を読みやすくするため、右下を少し暗くする */
.kv_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(42, 15, 4, 0) 35%, rgba(42, 15, 4, 0.7) 100%);
}

.kv_canvas {
  pointer-events: none;
}

.kv_info {
  position: relative;
  text-align: right;
}

.kv_title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 112);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.kv_title_line {
  display: block;
  white-space: nowrap;
}

.kv_meta {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 36);
  margin-top: calc(var(--u) * 28);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  letter-spacing: 0.08em;
}

.kv_meta li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
}

.kv_meta_label {
  padding: calc(var(--u) * 5) calc(var(--u) * 7);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.1em;
}

/* 登場アニメーション：ローダーが閉じたら（is-loaded）下から順に現れる */
.kv_title_line,
.kv_meta {
  opacity: 0;
  transform: translateY(calc(var(--u) * 24));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.is-loaded .kv_title_line,
.is-loaded .kv_meta {
  opacity: 1;
  transform: none;
}

.is-loaded .kv_title_line:nth-child(1) { transition-delay: 0.35s; }
.is-loaded .kv_title_line:nth-child(2) { transition-delay: 0.45s; }
.is-loaded .kv_meta { transition-delay: 0.6s; }

@media (max-width: 750px) {
  .kv {
    min-height: calc(var(--u) * 480);
    padding-bottom: calc(var(--grid-cell) + var(--u) * 20);
  }

  .kv_title {
    font-size: calc(var(--u) * 42);
  }

  .kv_meta {
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 18);
    font-size: calc(var(--u) * 12);
  }

  .kv_meta li {
    gap: calc(var(--u) * 8);
  }

  .kv_meta_label {
    padding: calc(var(--u) * 4) calc(var(--u) * 5);
    font-size: calc(var(--u) * 9);
  }
}

/* --------------------------------------------------------------------------
   10. ステートメント
   12分割のグリッド（キービジュアルのタイルと同じセル幅 --grid-cell）に
   すべての要素を吸着させる。リード文は1行＝1マスの高さ。
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background-color: var(--main);
  background-image:
    linear-gradient(to right, rgba(42, 15, 4, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 15, 4, 0.14) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  color: var(--ink);
}

.statement :focus-visible {
  outline-color: var(--ink);
}

.statement .btn_cta:focus-visible {
  outline-color: var(--accent);
}

/* --- 背景：明滅するマス --- */
.statement_tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.statement_tile {
  position: absolute;
  width: var(--grid-cell);
  height: var(--grid-cell);
  opacity: 0;
  transition: opacity 0.25s steps(2, end);
}

.statement_tile._ink { background: rgba(42, 15, 4, 0.16); }
.statement_tile._white { background: rgba(255, 255, 255, 0.28); }
.statement_tile._accent { background: var(--accent); }

.statement_tile.is-on {
  opacity: 1;
}

/* --- 本文のグリッド --- */
.statement_inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    ".  label label lead lead lead lead lead lead lead lead ."
    ".  .     .     def  def  def  .    body body body body ."
    ".  .     .     .    .    .    .    tags tags tags tags ."
    ".  .     .     .    .    .    .    cta  cta  cta  .    .";
  padding-top: var(--grid-cell);
}

.statement_label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  align-self: start;
  height: calc(var(--grid-cell) * 0.5);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.16em;
}

.statement_label_icon {
  display: block;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background: var(--ink);
}

/* リード文：1行＝1マス（_indent を付けた行は1マス右へずらす） */
.statement_lead {
  grid-area: lead;
  font-weight: 900;
  font-size: calc(var(--grid-cell) * 0.86);
  line-height: 1;
  letter-spacing: -0.02em;
}

.statement_line {
  display: block;
  height: var(--grid-cell);
  overflow: hidden;
  white-space: nowrap;
}

.statement_line > span {
  display: flex;
  align-items: center;
  height: 100%;
}

.statement_line._indent {
  padding-left: var(--grid-cell);
}

/* 「紬ぐ」：濃い面に抜き文字 */
.statement_mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.06em;
  margin: 0 0.04em;
  color: var(--main);
  font-style: normal;
}

.statement_mark::before {
  content: "";
  position: absolute;
  inset: 0.04em 0;
  z-index: -1;
  background: var(--ink);
  transform-origin: left center;
}

/* 「紬ぐ」の意味 */
.statement_def {
  grid-area: def;
  align-self: start;
  margin-top: var(--grid-cell);
  margin-right: calc(var(--u) * 32);
  padding-top: calc(var(--u) * 18);
  border-top: calc(var(--u) * 2) solid var(--ink);
  font-size: calc(var(--u) * 13);
  line-height: 1.9;
}

.statement_def dt {
  font-weight: 700;
  font-size: calc(var(--u) * 20);
  line-height: 1.4;
}

.statement_def_kana {
  margin-right: calc(var(--u) * 6);
  font-weight: 500;
  font-size: calc(var(--u) * 13);
}

.statement_def dd {
  margin-top: calc(var(--u) * 6);
}

/* 本文 */
.statement_body {
  grid-area: body;
  margin-top: var(--grid-cell);
  padding-top: calc(var(--u) * 18);
  border-top: calc(var(--u) * 6) solid var(--ink);
  font-size: calc(var(--u) * 16);
  line-height: 2.1;
}

.statement_body p + p {
  margin-top: 1.1em;
}

/* 強調：太字＋蛍光イエローのマーカー（文字の下半分に引く。改行しても各行に引かれる） */
.statement_marker {
  padding: 0 0.15em;
  background: linear-gradient(transparent 52%, #FFF23A 52%, #FFF23A 92%, transparent 92%);
  color: inherit;
  font-weight: 900;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 事業内容のタグ */
.statement_tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 32);
}

.statement_tag {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  line-height: 1.3;
}

.statement_tag::before {
  content: "";
  flex: none;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: var(--accent);
}

.statement_cta {
  grid-area: cta;
  justify-self: stretch;
  margin-top: calc(var(--u) * 48);
  height: calc(var(--grid-cell) * 0.6);
  font-size: calc(var(--u) * 20);
}

/* --- 巨大な欧文の帯：スクロールに合わせて左へ流れる（--p は statement.js が 0〜1 で更新） --- */
.statement_giant {
  position: relative;
  z-index: 1;
  margin-top: var(--grid-cell);
  /* 文字の下側を少しだけ次のセクションに切らせる */
  margin-bottom: calc(var(--grid-cell) * -0.42);
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--grid-cell) * 2.3);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  pointer-events: none;
}

.statement_giant span {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  transform: translate3d(calc(-4% - var(--p, 0) * 28%), 0, 0);
  will-change: transform;
}

/* 区切りの正方形 */
.statement_giant i {
  display: inline-block;
  flex: none;
  width: 0.42em;
  height: 0.42em;
  background: var(--accent);
}

/* --- 登場アニメーション（is-anim は statement.js が付ける。動きを減らす設定では付かない） --- */
.statement.is-anim .statement_line > span {
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}

.statement.is-anim .statement_line:nth-child(2) > span { transition-delay: 0.08s; }
.statement.is-anim .statement_line:nth-child(3) > span { transition-delay: 0.16s; }

.statement.is-anim .statement_mark {
  color: var(--ink);
  transition: color 0.2s 0.95s;
}

.statement.is-anim .statement_mark::before {
  transform: scaleX(0);
  transition: transform 0.5s 0.6s var(--ease);
}

.statement.is-anim .statement_label,
.statement.is-anim .statement_def,
.statement.is-anim .statement_body,
.statement.is-anim .statement_cta {
  opacity: 0;
  transform: translateY(calc(var(--u) * 28));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.statement.is-anim .statement_def { transition-delay: 0.45s; }
.statement.is-anim .statement_body { transition-delay: 0.55s; }
.statement.is-anim .statement_cta { transition-delay: 0.85s; }

.statement.is-anim .statement_tag {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.45s var(--ease);
  transition-delay: calc(0.7s + var(--i, 0) * 0.06s);
}

.statement.is-inview .statement_line > span,
.statement.is-inview .statement_label,
.statement.is-inview .statement_def,
.statement.is-inview .statement_body,
.statement.is-inview .statement_cta,
.statement.is-inview .statement_tag {
  opacity: 1;
  transform: none;
}

.statement.is-inview .statement_mark {
  color: var(--main);
}

.statement.is-inview .statement_mark::before {
  transform: scaleX(1);
}

/* --- 1024px以下のPC：本文を広げる --- */
@media (min-width: 751px) and (max-width: 1100px) {
  .statement_inner {
    grid-template-areas:
      ".  label label lead lead lead lead lead lead lead lead lead"
      ".  .     .     def  def  def  def  body body body body ."
      ".  .     .     .    .    .    .    tags tags tags tags ."
      ".  .     .     .    .    .    .    cta  cta  cta  cta  .";
  }
}

/* --- SP --- */
@media (max-width: 750px) {
  .statement_inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "lead"
      "def"
      "body"
      "tags"
      "cta";
    padding: var(--grid-cell) var(--side) 0;
  }

  .statement_label {
    height: auto;
    margin-bottom: calc(var(--u) * 12);
    font-size: calc(var(--u) * 11);
  }

  .statement_label_icon {
    width: calc(var(--u) * 9);
    height: calc(var(--u) * 9);
  }

  .statement_lead {
    font-size: calc(var(--u) * 46);
  }

  .statement_line {
    height: calc(var(--u) * 62);
  }

  .statement_line._indent {
    padding-left: calc(var(--u) * 46);
  }

  .statement_def {
    margin: calc(var(--u) * 40) 0 0;
    padding-top: calc(var(--u) * 12);
    font-size: calc(var(--u) * 12);
  }

  .statement_def dt {
    font-size: calc(var(--u) * 16);
  }

  .statement_def_kana {
    font-size: calc(var(--u) * 11);
  }

  .statement_body {
    margin-top: calc(var(--u) * 32);
    padding-top: calc(var(--u) * 14);
    border-top-width: calc(var(--u) * 4);
    font-size: calc(var(--u) * 14);
    line-height: 2;
  }

  .statement_tags {
    gap: calc(var(--u) * 6);
    margin-top: calc(var(--u) * 24);
  }

  .statement_tag {
    gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 6) calc(var(--u) * 9);
    font-size: calc(var(--u) * 11);
  }

  .statement_tag::before {
    width: calc(var(--u) * 5);
    height: calc(var(--u) * 5);
  }

  .statement_cta {
    margin-top: calc(var(--u) * 32);
    height: calc(var(--u) * 56);
    font-size: calc(var(--u) * 16);
  }

  .statement_giant {
    margin-top: calc(var(--u) * 56);
    margin-bottom: calc(var(--u) * -22);
    font-size: calc(var(--u) * 112);
  }
}

/* --------------------------------------------------------------------------
   11. セクション見出し（共通）
   欧文の大見出し ＋ 「×」の四角アイコン ＋ 右側に和文の説明
   -------------------------------------------------------------------------- */
.sec_head {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 20);
}

.sec_head_title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 148);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.sec_head_icon {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  margin-top: calc(var(--u) * 6);
  background: var(--accent);
}

.sec_head_icon::before,
.sec_head_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: calc(var(--u) * 5);
  margin: calc(var(--u) * -2.5) 0 0 -28%;
  background: var(--ink);
  transform: rotate(45deg);
}

.sec_head_icon::after {
  transform: rotate(-45deg);
}

.sec_head_text {
  max-width: calc(var(--u) * 400);
  margin-left: auto;
  padding-bottom: calc(var(--u) * 6);
  font-size: calc(var(--u) * 14);
  line-height: 1.9;
}

@media (max-width: 750px) {
  .sec_head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(var(--u) * 10);
  }

  .sec_head_title {
    font-size: calc(var(--u) * 68);
  }

  .sec_head_icon {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
    margin-top: calc(var(--u) * 2);
  }

  .sec_head_icon::before,
  .sec_head_icon::after {
    height: calc(var(--u) * 3);
    margin-top: calc(var(--u) * -1.5);
  }

  .sec_head_text {
    flex-basis: 100%;
    max-width: none;
    margin: calc(var(--u) * 14) 0 0;
    padding-bottom: 0;
    font-size: calc(var(--u) * 13);
  }
}

/* --------------------------------------------------------------------------
   12. アーカイブバナー
   画面幅いっぱいの帯を、スクロールに合わせて左右から切り抜きを広げて見せる
   （--e：0＝左右を大きく切り抜いた状態、1＝画面幅いっぱい。archive.js が更新）
   -------------------------------------------------------------------------- */
.area_content {
  position: relative;
}

.talk_head {
  padding-top: calc(var(--u) * 120);
  background: var(--bg);
}

.archive {
  --e: 1;
  --inset: calc((1 - var(--e)) * 9vw + var(--side) * (1 - var(--e)));
  position: relative;
  display: block;
  clip-path: inset(0 var(--inset) 0 var(--inset));
  will-change: clip-path;
}

/* clip-path で外側が切れるため、フォーカスの枠は内側に表示する */
.archive:focus-visible {
  outline-offset: calc(var(--u) * -8);
}

.archive_frame {
  position: relative;
  display: block;
  /* 画像（2278×1436）の上下を少しだけ切った比率。パソコンとスマホの両方が収まる */
  aspect-ratio: 2278 / 1260;
  overflow: hidden;
  background: var(--ink);
}

.archive_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  /* 広がるにつれて少し引きで見せる */
  transform: scale(calc(1.18 - var(--e) * 0.18));
  transition: filter 0.6s;
}

/* 映像・画像を覆うマス（共通部品。pixels.js が生成し、画面に入るとランダムな順に消える） */
.pixel_cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
  pointer-events: none;
}

.pixel_cover i {
  display: block;
  background: var(--cover, var(--bg));
  /* マス同士の境目に細い隙間が見えないよう、少しだけはみ出させる */
  box-shadow: 0 0 0 1px var(--cover, var(--bg));
}

.pixel_cover.is-open i {
  opacity: 0;
  transition: opacity 0.01s var(--d, 0s);
}

/* 帯 */
.archive_band {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: calc(var(--u) * 128);
  overflow: hidden;
  background: var(--cta);
  color: var(--white);
}

/* ホバーでイエローの面が左から走る */
.archive_band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}

.archive_text {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6) calc(var(--u) * 28);
  align-self: center;
  padding: calc(var(--u) * 20) calc(var(--u) * 40);
  transition: color 0.3s 0.1s;
}

.archive_text_en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 76);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.archive_text_ja {
  font-size: calc(var(--u) * 15);
  line-height: 1.4;
}

/* 右端の正方形の矢印 */
.archive_arrow {
  --sq: calc(var(--u) * 14);
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, var(--sq));
  grid-template-rows: repeat(3, var(--sq));
  place-content: center;
  width: calc(var(--u) * 128);
  background: var(--accent);
  color: var(--ink);
  transition: background-color 0.3s, color 0.3s;
}

.archive_arrow i {
  display: block;
  width: var(--sq);
  height: var(--sq);
  background: currentColor;
  transition: transform 0.45s var(--ease);
}

.archive_arrow i:nth-child(1) { grid-area: 1 / 2; }
.archive_arrow i:nth-child(2) { grid-area: 1 / 3; }
.archive_arrow i:nth-child(3) { grid-area: 2 / 3; }
.archive_arrow i:nth-child(4) { grid-area: 3 / 1; }

.archive:focus-visible .archive_band::before {
  transform: scaleX(1);
}

.archive:focus-visible .archive_text {
  color: var(--ink);
}

@media (hover: hover) {
  .archive:hover .archive_band::before {
    transform: scaleX(1);
  }

  .archive:hover .archive_text {
    color: var(--ink);
  }

  .archive:hover .archive_arrow {
    background: var(--ink);
    color: var(--accent);
  }

  .archive:hover .archive_arrow i {
    transform: translate(calc(var(--u) * 5), calc(var(--u) * -5));
  }
}

@media (max-width: 750px) {
  .talk_head {
    padding-top: calc(var(--u) * 64);
  }

  .archive {
    --inset: calc((1 - var(--e)) * 7vw);
  }

  .archive_frame {
    /* スマホは画像全体を見せる */
    aspect-ratio: 1200 / 756;
  }

  .archive_band {
    min-height: calc(var(--u) * 80);
  }

  .archive_text {
    flex-direction: column;
    gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 14) var(--side);
  }

  .archive_text_en {
    font-size: calc(var(--u) * 32);
  }

  .archive_text_ja {
    font-size: calc(var(--u) * 11);
  }

  .archive_arrow {
    --sq: calc(var(--u) * 8);
    width: calc(var(--u) * 80);
  }
}

/* --------------------------------------------------------------------------
   13. キーワードマーキー
   3本の帯を少しずつ傾けて交差させる。
   帯は CSS アニメーションで流れ続け、さらにスクロール量に合わせて横にずれる（--sx。marquee.js が更新）
   -------------------------------------------------------------------------- */
.marquees {
  position: relative;
  display: grid;
  padding: calc(var(--u) * 150) 0 calc(var(--u) * 170);
  overflow: hidden;
  overflow: clip;
}

.marquee {
  position: relative;
  display: flex;
  /* 傾けても両端が切れないよう、画面より広くする */
  width: 116%;
  margin-left: -8%;
  overflow: hidden;
  padding: calc(var(--u) * 14) 0;
  rotate: var(--tilt, 0deg);
}

.marquee._row1 {
  --tilt: -4deg;
  z-index: 1;
  background: var(--ink);
  color: var(--white);
}

.marquee._row2 {
  --tilt: 3deg;
  z-index: 2;
  margin-top: calc(var(--u) * -40);
  background: var(--accent);
  color: var(--ink);
}

.marquee._row3 {
  --tilt: -1.5deg;
  z-index: 3;
  margin-top: calc(var(--u) * -6);
  background: var(--cta);
  color: var(--white);
}

.marquee_track {
  display: flex;
  flex: none;
  width: max-content;
  translate: var(--sx, 0px) 0;
  will-change: transform;
}

/* marquee.js が幅を測り終えたら流し始める */
.marquee.is-marquee-ready .marquee_track {
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}

.marquee.is-reverse .marquee_track {
  animation-direction: reverse;
}

.marquee.is-paused .marquee_track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--marquee-distance, 50%) * -1), 0, 0); }
}

.marquee_group {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 32);
  padding-right: calc(var(--u) * 32);
}

.marquee_word,
.marquee_slash {
  flex: none;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 132);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.marquee_slash {
  font-weight: 400;
}

.marquee._row1 .marquee_slash { color: var(--accent); }
.marquee._row3 .marquee_slash { color: var(--accent); }

/* 2段目（イエロー）は線だけの文字 */
.marquee._row2 .marquee_word {
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * 2.5) var(--ink);
}

.marquee._row2 .marquee_slash {
  color: var(--cta);
}

.marquee_thumb {
  flex: none;
  display: block;
  width: calc(var(--u) * 210);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  outline: calc(var(--u) * 4) solid currentColor;
  outline-offset: calc(var(--u) * -4);
}

.marquee_thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 750px) {
  .marquees {
    padding: calc(var(--u) * 72) 0 calc(var(--u) * 84);
  }

  .marquee {
    width: 130%;
    margin-left: -15%;
    padding: calc(var(--u) * 6) 0;
  }

  .marquee._row2 {
    margin-top: calc(var(--u) * -14);
  }

  .marquee._row3 {
    margin-top: calc(var(--u) * -2);
  }

  .marquee_group {
    gap: calc(var(--u) * 14);
    padding-right: calc(var(--u) * 14);
  }

  .marquee_word,
  .marquee_slash {
    font-size: calc(var(--u) * 52);
  }

  .marquee._row2 .marquee_word {
    -webkit-text-stroke-width: calc(var(--u) * 1.2);
  }

  .marquee_thumb {
    width: calc(var(--u) * 88);
    outline-width: calc(var(--u) * 2);
    outline-offset: calc(var(--u) * -2);
  }
}

/* --------------------------------------------------------------------------
   14. ABOUT（代表のプロフィールと事業内容）
   -------------------------------------------------------------------------- */
.member {
  padding: calc(var(--u) * 140) var(--side) calc(var(--u) * 170);
  /* 右から入ってくる行で横スクロールが出ないようにする（clip なので sticky は効く） */
  overflow-x: clip;
  background: var(--ink);
}

.member > * {
  max-width: calc(1920px - var(--side) * 2);
  margin-left: auto;
  margin-right: auto;
}

.member_noscript {
  margin-top: calc(var(--u) * 40);
}

.member_body {
  margin-top: calc(var(--u) * 96);
}

/* --- プロフィール：写真 ／ 名前と紹介 ／ 縦書きの名前 --- */
.about_profile {
  display: grid;
  grid-template-columns: calc(var(--u) * 500) minmax(0, 1fr) calc(var(--u) * 96);
  column-gap: calc(var(--u) * 72);
  align-items: center;
}

/* 写真：背後にイエローの面。スクロールで写真と面が逆向きに動く（--pp は speakers.js が -1〜1 で更新） */
.about_photo {
  --pp: 0;
  position: relative;
  margin: 0;
}

.about_photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translate3d(calc(var(--u) * 32), calc(var(--u) * 32 + var(--pp) * var(--u) * 48), 0);
}

.about_photo_frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--white);
}

.about_photo_frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp) * var(--u) * -36), 0) scale(1.1);
}

.about_photo_frame .pixel_cover {
  --cover: var(--ink);
}

/* 写真の左下にはみ出す所在地のタグ */
.about_photo_tag {
  position: absolute;
  left: calc(var(--u) * -16);
  bottom: calc(var(--u) * 40);
  z-index: 2;
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  background: var(--cta);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  letter-spacing: 0.14em;
}

/* 名前と紹介 */
.about_role {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--sub);
}

.about_role_ja {
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: calc(var(--u) * 14);
  letter-spacing: 0.1em;
}

.about_name {
  margin-top: calc(var(--u) * 28);
}

.about_name_line {
  display: block;
  overflow: hidden;
}

.about_name_ja {
  display: block;
  font-weight: 900;
  font-size: calc(var(--u) * 132);
  line-height: 1.12;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.about_name_en {
  display: block;
  margin-top: calc(var(--u) * 6);
  color: var(--accent);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 40);
  line-height: 1.15;
  letter-spacing: 0.12em;
}

.about_meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 20);
  color: var(--sub);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  letter-spacing: 0.14em;
}

.about_meta i {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: var(--main);
}

.about_lead {
  max-width: 34em;
  margin-top: calc(var(--u) * 36);
  padding-top: calc(var(--u) * 28);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: calc(var(--u) * 15);
  line-height: 2.1;
}

.about_lead > * + * {
  margin-top: 1.1em;
}

/* --- VIEW PROFILE で開く続きの文章 ---
   高さ 0 → 中身の高さまで、なめらかに開く（grid の行を 0fr → 1fr にする） */
.about_rest {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}

.about_rest.is-open {
  grid-template-rows: 1fr;
}

.about_rest_inner {
  min-height: 0;
  overflow: hidden;
}

/* 抜粋の続きとして読めるよう、区切り線は付けずに段落の間隔だけ空ける */
.about_lead.about_rest_body {
  margin-top: 1.1em;
  padding-top: 0;
  border-top: 0;
}

/* 開くと段落が1つずつ下から現れる */
.about_rest_body > * {
  opacity: 0;
  transform: translateY(calc(var(--u) * 14));
  transition: opacity 0.5s, transform 0.6s var(--ease);
}

.about_rest.is-open .about_rest_body > * {
  opacity: 1;
  transform: none;
}

.about_rest.is-open .about_rest_body > :nth-child(1) { transition-delay: 0.15s; }
.about_rest.is-open .about_rest_body > :nth-child(2) { transition-delay: 0.22s; }
.about_rest.is-open .about_rest_body > :nth-child(3) { transition-delay: 0.29s; }
.about_rest.is-open .about_rest_body > :nth-child(4) { transition-delay: 0.36s; }
.about_rest.is-open .about_rest_body > :nth-child(5) { transition-delay: 0.43s; }
.about_rest.is-open .about_rest_body > :nth-child(6) { transition-delay: 0.5s; }
.about_rest.is-open .about_rest_body > :nth-child(7) { transition-delay: 0.57s; }
.about_rest.is-open .about_rest_body > :nth-child(n + 8) { transition-delay: 0.64s; }

/* 開いている間は「＋」の縦棒を消して「－」にする */
.about_more_plus::after {
  transition: transform 0.45s var(--ease);
}

.about_more[aria-expanded="true"] .about_more_plus::after {
  transform: rotate(90deg) scaleX(0);
}

/* --- 自己紹介文の部品（ABOUT とモーダルで共通。bio.js が生成） --- */
.bio_catch {
  color: var(--accent);
  font-weight: 900;
  font-size: calc(var(--u) * 30);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.bio_list_title {
  font-weight: 700;
}

.bio_list ul {
  display: grid;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 10);
}

.bio_list li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.bio_list li::before {
  content: "";
  flex: none;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  background: var(--accent);
  transform: translateY(calc(var(--u) * -2));
}

/* 詳しいプロフィールを開くボタン */
.about_more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 28);
  height: calc(var(--u) * 64);
  margin-top: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 24);
  overflow: hidden;
  border: calc(var(--u) * 2) solid var(--white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  line-height: 1;
  letter-spacing: 0.1em;
  transition: color 0.3s;
}

.about_more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease);
}

.about_more {
  z-index: 0;
}

.about_more_plus {
  position: relative;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  background: var(--accent);
  transition: transform 0.45s var(--ease);
}

.about_more_plus::before,
.about_more_plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 4);
  margin: calc(var(--u) * -2) 0 0 calc(var(--u) * -8);
  background: var(--ink);
}

.about_more_plus::after {
  transform: rotate(90deg);
}

.about_more:focus-visible {
  color: var(--ink);
}

.about_more:focus-visible::before {
  transform: scaleY(1);
}

@media (hover: hover) {
  .about_more:hover {
    color: var(--ink);
  }

  .about_more:hover::before {
    transform: scaleY(1);
  }

  .about_more[aria-expanded="false"]:hover .about_more_plus {
    transform: rotate(90deg);
  }
}

/* 縦書きの名前（線だけの文字） */
.about_vertical {
  align-self: stretch;
  justify-self: end;
  overflow: hidden;
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * 1.5) rgba(255, 255, 255, 0.35);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 92);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* --- 事業内容：左に見出し（固定）、右に一覧 --- */
.about_service {
  display: grid;
  grid-template-columns: calc(var(--u) * 420) minmax(0, 1fr);
  column-gap: calc(var(--u) * 72);
  align-items: start;
  margin-top: calc(var(--u) * 180);
}

.about_service_head {
  position: sticky;
  top: calc(var(--header-h) + var(--u) * 40);
}

.about_service_title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 64);
  line-height: 1;
  letter-spacing: -0.01em;
}

.about_service_title span {
  display: block;
  margin-top: calc(var(--u) * 14);
  color: var(--sub);
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  letter-spacing: 0.12em;
}

/* 項目数を巨大な線文字で */
.about_service_count {
  margin-top: calc(var(--u) * 16);
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * 2.5) var(--main);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 280);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.about_service_list {
  border-top: calc(var(--u) * 3) solid var(--white);
}

.about_service_item {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: calc(var(--u) * 128) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 36) calc(var(--u) * 28);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.35s;
}

/* 画面の中央に来た行は、イエローの面が左から走って強調される */
.about_service_item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}

.about_service_item.is-active {
  color: var(--ink);
}

.about_service_item.is-active::before {
  transform: scaleX(1);
}

.about_service_num {
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * 1.5) var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 76);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition: color 0.35s, -webkit-text-stroke-color 0.35s;
}

.about_service_item.is-active .about_service_num {
  color: var(--ink);
  -webkit-text-stroke-color: var(--ink);
}

.about_service_name {
  display: block;
  font-weight: 700;
  font-size: calc(var(--u) * 30);
  line-height: 1.4;
}

.about_service_desc {
  display: block;
  margin-top: calc(var(--u) * 6);
  color: var(--sub);
  font-size: calc(var(--u) * 14);
  line-height: 1.7;
  transition: color 0.35s;
}

.about_service_item.is-active .about_service_desc {
  color: var(--ink);
}

/* 右端の3つの正方形：強調された行では順に点灯する */
.about_service_pixels {
  display: flex;
  gap: calc(var(--u) * 6);
}

.about_service_pixels i {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s;
}

.about_service_item.is-active .about_service_pixels i {
  background: var(--ink);
}

.about_service_item.is-active .about_service_pixels i:nth-child(2) { transition-delay: 0.1s; }
.about_service_item.is-active .about_service_pixels i:nth-child(3) { transition-delay: 0.2s; }

/* --- 登場アニメーション（is-anim は speakers.js が付ける。動きを減らす設定では付かない） --- */
.about_info.is-anim .about_name_line > span {
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}

.about_info.is-anim .about_name_line:nth-child(2) > span {
  transition-delay: 0.12s;
}

.about_info.is-anim .about_role,
.about_info.is-anim .about_meta,
.about_info.is-anim .about_lead,
.about_info.is-anim .about_more {
  opacity: 0;
  transform: translateY(calc(var(--u) * 24));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.about_info.is-anim .about_meta { transition-delay: 0.3s; }
.about_info.is-anim .about_lead { transition-delay: 0.4s; }
.about_info.is-anim .about_more { transition-delay: 0.5s; }

.about_service_head.is-anim {
  opacity: 0;
  transform: translateX(calc(var(--u) * -60));
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.about_service_item.is-anim {
  opacity: 0;
  transform: translateX(calc(var(--u) * 120));
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), color 0.35s;
}

.about_info.is-inview .about_name_line > span,
.about_info.is-inview .about_role,
.about_info.is-inview .about_meta,
.about_info.is-inview .about_lead,
.about_info.is-inview .about_more,
.about_service_head.is-inview,
.about_service_item.is-inview {
  opacity: 1;
  transform: none;
}

/* --- 1100px以下のPC：縦書きの名前を外して詰める --- */
@media (min-width: 751px) and (max-width: 1100px) {
  .about_profile {
    grid-template-columns: calc(var(--u) * 460) minmax(0, 1fr);
  }

  .about_vertical {
    display: none;
  }

  .about_service {
    grid-template-columns: calc(var(--u) * 340) minmax(0, 1fr);
  }
}

/* --- SP --- */
@media (max-width: 750px) {
  .member {
    padding: calc(var(--u) * 72) var(--side) calc(var(--u) * 88);
  }

  .member_body {
    margin-top: calc(var(--u) * 48);
  }

  .about_profile {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 44);
  }

  .about_photo {
    margin-right: calc(var(--u) * 18);
  }

  .about_photo::before {
    transform: translate3d(calc(var(--u) * 16), calc(var(--u) * 16 + var(--pp) * var(--u) * 20), 0);
  }

  .about_photo_tag {
    left: calc(var(--u) * -8);
    bottom: calc(var(--u) * 24);
    padding: calc(var(--u) * 8) calc(var(--u) * 10);
    font-size: calc(var(--u) * 10);
  }

  .about_role {
    gap: calc(var(--u) * 10);
    font-size: calc(var(--u) * 10);
  }

  .about_role_ja {
    padding: calc(var(--u) * 6) calc(var(--u) * 9);
    font-size: calc(var(--u) * 12);
  }

  .about_name {
    margin-top: calc(var(--u) * 18);
  }

  .about_name_ja {
    font-size: calc(var(--u) * 62);
  }

  .about_name_en {
    font-size: calc(var(--u) * 20);
  }

  .about_meta {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 10);
  }

  .about_lead {
    margin-top: calc(var(--u) * 24);
    padding-top: calc(var(--u) * 20);
    font-size: calc(var(--u) * 14);
    line-height: 2;
  }

  .bio_catch {
    font-size: calc(var(--u) * 21);
  }

  .bio_list li::before {
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 6);
  }

  .about_more {
    gap: calc(var(--u) * 20);
    height: calc(var(--u) * 54);
    margin-top: calc(var(--u) * 28);
    padding-left: calc(var(--u) * 18);
    font-size: calc(var(--u) * 14);
  }

  .about_more_plus {
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
  }

  .about_more_plus::before,
  .about_more_plus::after {
    width: calc(var(--u) * 14);
    height: calc(var(--u) * 3);
    margin: calc(var(--u) * -1.5) 0 0 calc(var(--u) * -7);
  }

  .about_vertical {
    display: none;
  }

  .about_service {
    grid-template-columns: minmax(0, 1fr);
    margin-top: calc(var(--u) * 88);
  }

  .about_service_head {
    position: static;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: calc(var(--u) * 24);
  }

  .about_service_title {
    font-size: calc(var(--u) * 40);
  }

  .about_service_title span {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 12);
  }

  .about_service_count {
    margin-top: 0;
    font-size: calc(var(--u) * 110);
    -webkit-text-stroke-width: calc(var(--u) * 1.5);
  }

  .about_service_item {
    grid-template-columns: calc(var(--u) * 52) minmax(0, 1fr);
    column-gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 20) calc(var(--u) * 12);
  }

  .about_service_num {
    font-size: calc(var(--u) * 34);
    -webkit-text-stroke-width: calc(var(--u) * 1);
  }

  .about_service_name {
    font-size: calc(var(--u) * 17);
  }

  .about_service_desc {
    font-size: calc(var(--u) * 12);
  }

  .about_service_pixels {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   15. モーダル
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  opacity: 0;
  transition: opacity 0.35s; /* modal.js の FADE_TIME と合わせる */
}

.modal[hidden] {
  display: none;
}

.modal.is-open {
  opacity: 1;
}

/* 開いている間は背景をスクロールさせない */
.is-modal-open {
  overflow: hidden;
}

.modal_bg {
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 4, 0.94);
  /* 後ろのページをぼかして、モーダルの文字を読みやすくする */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.modal_dialog {
  position: relative;
  height: 100%;
}

.modal_dialog:focus {
  outline: none;
}

.modal_scroll {
  display: flex;
  height: 100%;
  padding: calc(var(--u) * 120) var(--side);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal_body {
  width: 100%;
  max-width: calc(var(--u) * 1120);
  margin: auto;
}

.modal_content {
  display: grid;
  grid-template-columns: calc(var(--u) * 420) minmax(0, 1fr);
  column-gap: calc(var(--u) * 72);
  align-items: start;
  transform: translateY(calc(var(--u) * 20));
  transition: transform 0.5s var(--ease);
}

.modal.is-open .modal_content {
  transform: none;
}

.modal_content._a { --group: var(--accent); }
.modal_content._b { --group: var(--main); }

.modal_photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}

.modal_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal_group {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 8) calc(var(--u) * 12);
  background: var(--group);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.04em;
}

.modal_group span {
  font-weight: 700;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.14em;
}

.modal_name {
  margin-top: calc(var(--u) * 20);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 76);
  line-height: 0.95;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.modal_meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4) calc(var(--u) * 16);
  margin-top: calc(var(--u) * 18);
  color: var(--sub);
  font-family: var(--font-en);
  font-size: calc(var(--u) * 15);
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.modal_country {
  font-weight: 700;
}

.modal_bio {
  margin-top: calc(var(--u) * 36);
  padding-top: calc(var(--u) * 32);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: calc(var(--u) * 15);
  line-height: 2.1;
}

.modal_bio > * + * {
  margin-top: 1.4em;
}

/* キャッチコピーの前後は少し広く空ける */
.modal_bio .bio_catch {
  margin-top: 1.8em;
}

.modal_bio .bio_catch + * {
  margin-top: 1.8em;
}

.modal_links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 36);
}

.modal_links a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 18);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: background-color 0.3s;
}

.modal_links a:focus-visible {
  outline-color: var(--cta);
  outline-offset: calc(var(--u) * -5);
}

@media (hover: hover) {
  .modal_links a:hover {
    background: var(--accent);
  }
}

.modal_link_arrow {
  --sq: calc(var(--u) * 4);
  display: grid;
  grid-template-columns: repeat(3, var(--sq));
  grid-template-rows: repeat(3, var(--sq));
}

.modal_link_arrow i {
  display: block;
  width: var(--sq);
  height: var(--sq);
  background: currentColor;
}

.modal_link_arrow i:nth-child(1) { grid-area: 1 / 2; }
.modal_link_arrow i:nth-child(2) { grid-area: 1 / 3; }
.modal_link_arrow i:nth-child(3) { grid-area: 2 / 3; }
.modal_link_arrow i:nth-child(4) { grid-area: 3 / 1; }

/* 閉じるボタン：右上の正方形 */
.modal_close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: var(--header-h);
  height: var(--header-h);
  background: var(--accent);
  transition: background-color 0.3s;
}

.modal_close::before,
.modal_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 5);
  margin: calc(var(--u) * -2.5) 0 0 calc(var(--u) * -15);
  background: var(--ink);
  transform: rotate(45deg);
}

.modal_close::after {
  transform: rotate(-45deg);
}

.modal_close:focus-visible {
  outline-color: var(--white);
  outline-offset: calc(var(--u) * -6);
}

@media (hover: hover) {
  .modal_close:hover {
    background: var(--white);
  }
}

@media (max-width: 750px) {
  .modal_scroll {
    padding: calc(var(--header-h) + var(--u) * 24) var(--side) calc(var(--u) * 56);
  }

  .modal_content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 24);
  }

  .modal_photo {
    width: calc(var(--u) * 220);
  }

  .modal_group {
    font-size: calc(var(--u) * 12);
  }

  .modal_group span {
    font-size: calc(var(--u) * 10);
  }

  .modal_name {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 44);
  }

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

  .modal_bio {
    margin-top: calc(var(--u) * 24);
    padding-top: calc(var(--u) * 22);
    font-size: calc(var(--u) * 14);
    line-height: 2;
  }

  .modal_links {
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 28);
  }

  .modal_links a {
    height: calc(var(--u) * 42);
    font-size: calc(var(--u) * 13);
  }

  .modal_close::before,
  .modal_close::after {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 4);
    margin: calc(var(--u) * -2) 0 0 calc(var(--u) * -12);
  }
}

/* --------------------------------------------------------------------------
   16. 制作の流れ（元仕様のタイムテーブル）
   トラックの色：A＝--accent（イエロー）、B＝--main（オレンジ）
   -------------------------------------------------------------------------- */
.flow {
  position: relative;
  background: var(--ink);
}

/* --- 背景：画面に貼り付いたまま、写真がクロスフェードで切り替わる --- */
.flow_bg {
  position: absolute;
  inset: 0;
}

.flow_bg_sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

.flow_bg_item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s;
}

.flow_bg_item.is-active {
  opacity: 1;
}

.flow_bg_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字を読みやすくするため、写真の上に濃い色を重ねる */
.flow_bg_sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 4, 0.72);
}

.flow_inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(var(--u) * 140) var(--side) calc(var(--u) * 170);
}

.flow_noscript {
  margin-top: calc(var(--u) * 40);
}

/* --- 2トラックを左右に並べる --- */
.flow_body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 24);
  align-items: start;
  margin-top: calc(var(--u) * 88);
}

.flow_track._a { --group: var(--accent); }
.flow_track._b { --group: var(--main); }

/* 先頭行：「START ＋ TRACK A - WEB」 */
.flow_open {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 14) calc(var(--u) * 24);
  border: calc(var(--u) * 3) solid var(--group);
  color: var(--group);
  font-family: var(--font-en);
  line-height: 1;
}

.flow_open_time {
  font-weight: 800;
  font-size: calc(var(--u) * 34);
  letter-spacing: -0.01em;
}

.flow_open_name {
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  letter-spacing: 0.12em;
}

/* --- 各枠 --- */
.flow_slot {
  display: grid;
  grid-template-columns: calc(var(--u) * 170) minmax(0, 1fr);
  column-gap: calc(var(--u) * 24);
  padding: calc(var(--u) * 28) calc(var(--u) * 28) calc(var(--u) * 34);
}

/* 背景色は交互：トラックの色 ／ 濃いグレー */
.flow_slot._color {
  --badge-bg: var(--ink);
  --badge-color: var(--white);
  --line: rgba(42, 15, 4, 0.3);
  background: var(--group);
  color: var(--ink);
}

.flow_slot._gray {
  --badge-bg: var(--group);
  --badge-color: var(--ink);
  --line: rgba(255, 255, 255, 0.25);
  background: #3A2C26;
  color: var(--white);
}

.flow_slot._color :focus-visible {
  outline-color: var(--ink);
}

/* 通し番号バッジ */
.flow_slot_badge {
  display: inline-block;
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  background: var(--badge-bg);
  color: var(--badge-color);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  letter-spacing: 0.08em;
}

/* 期間（大きな数字） */
.flow_slot_period {
  margin-top: calc(var(--u) * 18);
  font-family: var(--font-en);
  line-height: 1;
}

.flow_slot_unit {
  display: block;
  font-weight: 700;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.2em;
}

.flow_slot_nums {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 6);
  font-weight: 800;
  font-size: calc(var(--u) * 54);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.flow_slot_dash {
  font-weight: 400;
  font-size: calc(var(--u) * 36);
}

.flow_slot_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  padding-bottom: calc(var(--u) * 16);
  border-bottom: 1px solid var(--line);
}

.flow_slot_person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--u) * 2) calc(var(--u) * 12);
  font-family: var(--font-en);
  font-size: calc(var(--u) * 12);
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.flow_slot_name {
  flex-basis: 100%;
  font-weight: 700;
  font-size: calc(var(--u) * 24);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: calc(var(--u) * 2);
  text-underline-offset: calc(var(--u) * 5);
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}

.flow_slot_name:focus-visible {
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .flow_slot_name:hover {
    text-decoration-color: currentColor;
  }
}

.flow_slot_country {
  font-weight: 700;
}

/* 所要期間 */
.flow_slot_duration {
  flex: none;
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  border: calc(var(--u) * 2) solid currentColor;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.flow_slot_title {
  margin-top: calc(var(--u) * 18);
  font-weight: 700;
  font-size: calc(var(--u) * 21);
  line-height: 1.5;
}

/* 工程名の横のドット絵アイコン（schedule.js が生成） */
.flow_slot_title:has(.flow_slot_icon) {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

.flow_slot_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  background: var(--icon-bg);
  color: var(--icon-color);
}

.flow_slot_icon svg {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
}

/* 色：トラック色の枠では濃い面にトラック色、グレーの枠ではトラック色の面に濃い色 */
.flow_slot._color { --icon-bg: var(--ink); --icon-color: var(--group); }
.flow_slot._gray { --icon-bg: var(--group); --icon-color: var(--ink); }

/* 担当者の行が無いときは、タイトルを上端に揃える */
.flow_slot_main > .flow_slot_title:first-child {
  margin-top: 0;
}

.flow_slot_desc {
  margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 14);
  line-height: 1.9;
}

@media (max-width: 750px) {
  .flow_inner {
    padding: calc(var(--u) * 72) var(--side) calc(var(--u) * 88);
  }

  /* SPは縦積み */
  .flow_body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 48);
    margin-top: calc(var(--u) * 48);
  }

  .flow_open {
    gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 10) calc(var(--u) * 14);
    border-width: calc(var(--u) * 2);
  }

  .flow_open_time {
    font-size: calc(var(--u) * 24);
  }

  .flow_open_name {
    font-size: calc(var(--u) * 12);
  }

  .flow_slot {
    grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 24);
  }

  .flow_slot_side {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .flow_slot_badge {
    order: 2;
    font-size: calc(var(--u) * 11);
  }

  .flow_slot_period {
    margin-top: 0;
  }

  .flow_slot_unit {
    font-size: calc(var(--u) * 10);
  }

  .flow_slot_nums {
    font-size: calc(var(--u) * 44);
  }

  .flow_slot_dash {
    font-size: calc(var(--u) * 30);
  }

  .flow_slot_head {
    margin-top: calc(var(--u) * 16);
    padding-bottom: calc(var(--u) * 14);
  }

  .flow_slot_person {
    font-size: calc(var(--u) * 11);
  }

  .flow_slot_name {
    font-size: calc(var(--u) * 20);
  }

  .flow_slot_duration {
    font-size: calc(var(--u) * 11);
  }

  .flow_slot_title {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 18);
  }

  .flow_slot_main > .flow_slot_title:first-child {
    margin-top: calc(var(--u) * 14);
  }

  .flow_slot_title:has(.flow_slot_icon) {
    gap: calc(var(--u) * 10);
  }

  .flow_slot_icon {
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
  }

  .flow_slot_icon svg {
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
  }

  .flow_slot_desc {
    font-size: calc(var(--u) * 13);
  }
}

/* --------------------------------------------------------------------------
   17. 料金プラン・概要（元仕様のチケット・概要）
   -------------------------------------------------------------------------- */
.price {
  background: var(--bg);
}

.price_inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(var(--u) * 140) var(--side) calc(var(--u) * 170);
}

/* --- チケット型の料金カード：上段＝オレンジ（プラン名＋CTA）、下段＝青（料金）、境目は点線 --- */
.ticket {
  position: relative;
  margin-top: calc(var(--u) * 88);
  clip-path: polygon(0 0, calc(100% - var(--u) * 40) 0, 100% calc(var(--u) * 40), 100% 100%, 0 100%);
}

.ticket_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 32);
  padding: calc(var(--u) * 48) calc(var(--u) * 56) calc(var(--u) * 44);
  background: var(--main);
  color: var(--ink);
}

.ticket_top :focus-visible {
  outline-color: var(--ink);
}

.ticket_label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.16em;
}

.ticket_name {
  margin-top: calc(var(--u) * 14);
  font-weight: 700;
  font-size: calc(var(--u) * 52);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.ticket_note {
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 14);
  line-height: 1.8;
}

.ticket_cta {
  flex: none;
  min-width: calc(var(--u) * 280);
  height: calc(var(--u) * 72);
  font-size: calc(var(--u) * 19);
}

.ticket_btm {
  position: relative;
  padding: calc(var(--u) * 28) calc(var(--u) * 56) calc(var(--u) * 36);
  background: var(--cta);
  color: var(--white);
}

/* 料金の一覧：PCは2列。受付終了の行だけ全幅にする */
.ticket_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 56);
}

.ticket_row._soldout,
.ticket_row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.ticket_foot {
  margin-top: calc(var(--u) * 20);
  font-size: calc(var(--u) * 13);
  line-height: 1.8;
}

/* 上下の境目の点線（切り取り線） */
.ticket_btm::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * -2);
  left: 0;
  width: 100%;
  border-top: calc(var(--u) * 4) dashed var(--bg);
}

.ticket_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 18) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.ticket_row_label {
  font-weight: 700;
  font-size: calc(var(--u) * 17);
  line-height: 1.5;
}

.ticket_row_price {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
}

.ticket_price {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 30);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* 売り切れ（受付終了）：取り消し線＋薄く表示 */
.ticket_row._soldout .ticket_row_label,
.ticket_row._soldout .ticket_price {
  opacity: 0.5;
}

.ticket_row._soldout .ticket_price {
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--u) * 3);
}

.ticket_soldout {
  padding: calc(var(--u) * 5) calc(var(--u) * 8);
  background: var(--white);
  color: var(--cta);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  line-height: 1;
}

/* --- キャンペーン：流れる帯 --- */
.ticket_ticker {
  display: flex;
  margin: calc(var(--u) * -28) calc(var(--u) * -56) calc(var(--u) * 12);
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
}

.ticket_ticker_track {
  display: flex;
  flex: none;
  width: max-content;
  animation: ticket-ticker 22s linear infinite;
}

.ticket_ticker_group {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * 10) 0;
  font-weight: 900;
  font-size: calc(var(--u) * 15);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ticket_ticker_group i {
  flex: none;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  background: var(--cta);
}

@keyframes ticket-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* --- キャンペーン価格の行 --- */
.ticket_row._campaign {
  align-items: center;
  padding: calc(var(--u) * 26) 0 calc(var(--u) * 22);
}

.ticket_row._campaign .ticket_row_label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 10);
}

/* 最安プランの内容（行の下に全幅で表示） */
.ticket_row:has(.ticket_spec) {
  flex-wrap: wrap;
}

.ticket_spec {
  flex-basis: 100%;
  display: block;
  margin-top: calc(var(--u) * 18);
  padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 16);
  background: rgba(42, 15, 4, 0.28);
}

.ticket_spec_title {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  line-height: 1;
  letter-spacing: 0.08em;
}

.ticket_spec_list {
  display: grid;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 10);
}

.ticket_spec_item {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-size: calc(var(--u) * 13.5);
  line-height: 1.6;
}

.ticket_spec_item::before {
  content: "";
  flex: none;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: var(--accent);
  transform: translateY(calc(var(--u) * -2));
}

/* 「10名様限定」 */
.ticket_limit {
  display: inline-block;
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  background: var(--white);
  color: var(--cta);
  font-weight: 900;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.04em;
}

/* シールと元の料金を重ねる：元の料金は下の段に薄く、シールは上の段から少しかぶせる */
.ticket_row._campaign .ticket_row_price {
  display: grid;
  justify-items: end;
}

.ticket_price._was {
  position: relative;
  z-index: 0;
  margin-top: calc(var(--u) * -8);
  opacity: 0.42;
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--u) * 3);
}

/* 割引価格のシール */
.ticket_deal {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12);
  border: calc(var(--u) * 3) solid var(--white);
  background: var(--accent);
  color: var(--ink);
  box-shadow: calc(var(--u) * 6) calc(var(--u) * 6) 0 rgba(42, 15, 4, 0.45);
  transform: rotate(-4deg);
  transform-origin: right center;
}

.ticket_deal_head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-weight: 900;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  letter-spacing: 0.06em;
}

.ticket_deal_head b {
  padding: calc(var(--u) * 4) calc(var(--u) * 7);
  background: var(--cta);
  color: var(--white);
  font-weight: 900;
}

/* 点滅する正方形 */
.ticket_deal_blink {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  background: var(--cta);
  animation: ticket-blink 1s steps(1, end) infinite;
}

@keyframes ticket-blink {
  50% { opacity: 0; }
}

.ticket_deal_price {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 44);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* --- 2カラムの並び --- */
.price_cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--u) * 56);
  align-items: start;
  margin-top: calc(var(--u) * 96);
}

/* 地図をなくしたので、概要は1列（行が横に間延びしないよう幅を抑える） */
.price_cols._single {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--u) * 900);
}

.price_cols._frames {
  /* ご依頼の流れが長いので、お問い合わせ方法の枠は伸ばさず、スクロールに合わせて画面上部に留める */
  align-items: start;
  column-gap: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 88);
}

.price_sub {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 14);
  padding-bottom: calc(var(--u) * 16);
  border-bottom: calc(var(--u) * 3) solid var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 32);
  line-height: 1;
}

.price_sub span {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.1em;
}

/* --- 概要（定義リスト） --- */
.overview_row {
  display: grid;
  grid-template-columns: calc(var(--u) * 120) minmax(0, 1fr);
  column-gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 18) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: calc(var(--u) * 15);
  line-height: 1.8;
}

.overview_row dt {
  font-weight: 700;
}

.overview_row dd {
  overflow-wrap: anywhere;
}

.overview_row a {
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 4);
}

@media (hover: hover) {
  .overview_row a:hover {
    text-decoration: none;
  }
}

.overview_en {
  margin-left: calc(var(--u) * 12);
  font-family: var(--font-en);
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.14em;
}

.overview_services li {
  position: relative;
  padding-left: calc(var(--u) * 16);
}

.overview_services li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: var(--accent);
}

/* --- 太枠のブロック：ご依頼の流れ（青枠）／お問い合わせ方法（イエロー枠） --- */
.steps,
.notice {
  padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 44);
  border: calc(var(--u) * 6) solid var(--frame);
  background: var(--ink);
}

.steps { --frame: var(--cta); }
.notice {
  --frame: var(--accent);
  position: sticky;
  top: calc(var(--header-h) + var(--u) * 24);
}

.frame_title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6) calc(var(--u) * 14);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 30);
  line-height: 1;
}

.frame_title span {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.1em;
}

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

.steps_item {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u) * 48) minmax(0, 1fr);
  column-gap: calc(var(--u) * 20);
  padding-bottom: calc(var(--u) * 30);
}

.steps_item:last-child {
  padding-bottom: 0;
}

/* 番号どうしをつなぐ縦の点線 */
.steps_item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 48);
  bottom: 0;
  left: calc(var(--u) * 22);
  border-left: calc(var(--u) * 4) dotted var(--cta);
}

.steps_num {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  background: var(--cta);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: calc(var(--u) * 20);
  line-height: 1;
}

.steps_title {
  padding-top: calc(var(--u) * 8);
  font-weight: 700;
  font-size: calc(var(--u) * 20);
  line-height: 1.5;
}

.steps_text p {
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--u) * 14);
  line-height: 1.9;
}

.steps_text p + p {
  margin-top: 1em;
}

/* 【制作費の残額50％】の強調 */
.steps_em {
  color: var(--accent);
  font-weight: 700;
}

/* 見出し下の説明文 */
.steps_lead {
  margin-top: calc(var(--u) * 20);
  font-size: calc(var(--u) * 14);
  line-height: 1.9;
}

.notice_text {
  margin-top: calc(var(--u) * 28);
  font-size: calc(var(--u) * 14);
  line-height: 1.9;
}

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

.notice_list > div {
  display: grid;
  grid-template-columns: calc(var(--u) * 80) minmax(0, 1fr);
  align-items: baseline;
  padding: calc(var(--u) * 14) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.notice_list dt {
  color: var(--accent);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.14em;
}

.notice_list dd a {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--u) * 24);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .notice_list dd a:hover {
    text-decoration: underline;
    text-underline-offset: calc(var(--u) * 5);
  }
}

.notice_line {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  margin-top: calc(var(--u) * 24);
}

.notice_line[hidden] {
  display: none;
}

.notice_line_qr {
  width: calc(var(--u) * 120);
  height: auto;
  background: var(--white);
}

.notice_line_title {
  font-weight: 700;
  font-size: calc(var(--u) * 16);
}

.notice_line_btn {
  display: inline-block;
  margin-top: calc(var(--u) * 10);
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(var(--u) * 14);
  line-height: 1;
}

@media (max-width: 750px) {
  .price_inner {
    padding: calc(var(--u) * 72) var(--side) calc(var(--u) * 88);
  }

  .ticket {
    margin-top: calc(var(--u) * 48);
    clip-path: polygon(0 0, calc(100% - var(--u) * 24) 0, 100% calc(var(--u) * 24), 100% 100%, 0 100%);
  }

  .ticket_top {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--u) * 24);
    padding: calc(var(--u) * 28) calc(var(--u) * 20) calc(var(--u) * 28);
  }

  .ticket_label {
    font-size: calc(var(--u) * 11);
  }

  .ticket_name {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 32);
  }

  .ticket_note {
    font-size: calc(var(--u) * 12);
  }

  .ticket_cta {
    min-width: 0;
    height: calc(var(--u) * 52);
    font-size: calc(var(--u) * 15);
  }

  .ticket_btm {
    padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 24);
  }

  .ticket_list {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .ticket_btm::before {
    border-top-width: calc(var(--u) * 3);
  }

  .ticket_row {
    flex-direction: column;
    gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 14) 0;
  }

  .ticket_row_label {
    font-size: calc(var(--u) * 14);
  }

  .ticket_price {
    font-size: calc(var(--u) * 26);
  }

  .ticket_soldout {
    font-size: calc(var(--u) * 11);
  }

  .ticket_ticker {
    margin: calc(var(--u) * -16) calc(var(--u) * -20) calc(var(--u) * 8);
  }

  .ticket_ticker_group {
    gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 8) 0;
    font-size: calc(var(--u) * 12);
  }

  .ticket_ticker_group i {
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 6);
  }

  .ticket_row._campaign {
    flex-direction: row;
    align-items: center;
    padding: calc(var(--u) * 20) 0 calc(var(--u) * 16);
  }

  .ticket_row._campaign .ticket_row_label {
    gap: calc(var(--u) * 8);
  }

  .ticket_limit {
    padding: calc(var(--u) * 5) calc(var(--u) * 8);
    font-size: calc(var(--u) * 11);
  }

  .ticket_spec {
    margin-top: calc(var(--u) * 14);
    padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 14);
  }

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

  .ticket_spec_list {
    gap: calc(var(--u) * 4);
    margin-top: calc(var(--u) * 8);
  }

  .ticket_spec_item {
    font-size: calc(var(--u) * 12);
  }

  .ticket_price._was {
    margin-top: calc(var(--u) * -5);
    font-size: calc(var(--u) * 18);
  }

  .ticket_deal {
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 7) calc(var(--u) * 10) calc(var(--u) * 8);
    border-width: calc(var(--u) * 2);
    box-shadow: calc(var(--u) * 4) calc(var(--u) * 4) 0 rgba(42, 15, 4, 0.45);
  }

  .ticket_deal_head {
    gap: calc(var(--u) * 5);
    font-size: calc(var(--u) * 10);
  }

  .ticket_deal_head b {
    padding: calc(var(--u) * 3) calc(var(--u) * 5);
  }

  .ticket_deal_blink {
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 6);
  }

  .ticket_deal_price {
    font-size: calc(var(--u) * 26);
  }

  .price_cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 56);
    margin-top: calc(var(--u) * 56);
  }

  .price_cols._frames {
    row-gap: calc(var(--u) * 16);
    margin-top: calc(var(--u) * 56);
  }

  .price_sub {
    padding-bottom: calc(var(--u) * 12);
    border-bottom-width: calc(var(--u) * 2);
    font-size: calc(var(--u) * 24);
  }

  .price_sub span {
    font-size: calc(var(--u) * 11);
  }

  .overview_row {
    grid-template-columns: calc(var(--u) * 84) minmax(0, 1fr);
    padding: calc(var(--u) * 14) 0;
    font-size: calc(var(--u) * 13);
  }

  .overview_en {
    display: block;
    margin-left: 0;
    font-size: calc(var(--u) * 10);
  }

  .notice {
    position: static;
  }

  .steps,
  .notice {
    padding: calc(var(--u) * 24) calc(var(--u) * 18) calc(var(--u) * 28);
    border-width: calc(var(--u) * 4);
  }

  .frame_title {
    font-size: calc(var(--u) * 22);
  }

  .frame_title span {
    font-size: calc(var(--u) * 11);
  }

  .steps_list {
    margin-top: calc(var(--u) * 24);
  }

  .steps_item {
    grid-template-columns: calc(var(--u) * 36) minmax(0, 1fr);
    column-gap: calc(var(--u) * 14);
    padding-bottom: calc(var(--u) * 22);
  }

  .steps_item:not(:last-child)::before {
    top: calc(var(--u) * 36);
    left: calc(var(--u) * 16.5);
    border-left-width: calc(var(--u) * 3);
  }

  .steps_num {
    width: calc(var(--u) * 36);
    height: calc(var(--u) * 36);
    font-size: calc(var(--u) * 15);
  }

  .steps_title {
    padding-top: calc(var(--u) * 4);
    font-size: calc(var(--u) * 16);
  }

  .steps_lead {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 12.5);
  }

  .steps_text p,
  .notice_text {
    font-size: calc(var(--u) * 13);
  }

  .notice_text {
    margin-top: calc(var(--u) * 18);
  }

  /* メールアドレスが途中で折り返さないよう、見出しと値を縦に積む */
  .notice_list > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 12) 0;
  }

  .notice_list dt {
    font-size: calc(var(--u) * 10);
  }

  .notice_list dd a {
    font-size: calc(var(--u) * 15);
  }

  .notice_line_qr {
    width: calc(var(--u) * 96);
  }
}

/* --------------------------------------------------------------------------
   18. ステッカー装飾
   各セクションの余白に散らす。位置・大きさ・傾きはここで指定し、
   上下の動き（--py）は stickers.js が書き換える。
   ._pc が付いたものはSPでは表示しない（SPは数を半分にする）。
   -------------------------------------------------------------------------- */
.talk_head,
.marquees,
.member,
.price {
  position: relative;
}

.sticker {
  position: absolute;
  z-index: 2;
  width: calc(var(--u) * var(--w));
  max-width: none;
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
}

/* キービジュアル：左上（タイトルは右下にあるので重ならない） */
.sticker._kv  { --w: 150; --rot: -8deg; top: 20%; left: 5%; }
/* ステートメント：右上の余白／左下の余白 */
.sticker._st1 { --w: 118; --rot: 7deg;  top: calc(var(--grid-cell) * 0.35); right: calc(var(--grid-cell) * 0.4); }
.sticker._st2 { --w: 96;  --rot: -6deg; top: calc(var(--grid-cell) * 5.2); left: calc(var(--grid-cell) * 0.6); }
/* バナーとマーキーの間の余白 */
.sticker._th  { --w: 116; --rot: 8deg;  top: calc(var(--u) * 64); right: 12%; z-index: 4; }
/* ABOUT：上の余白の右／下の余白 */
.sticker._mb1 { --w: 110; --rot: 6deg;  top: calc(var(--u) * 20); right: 7%; }
.sticker._mb2 { --w: 80;  --rot: -9deg; bottom: calc(var(--u) * 14); left: 30%; }
/* FLOW：上の余白の中央／下の余白の右 */
.sticker._fl1 { --w: 138; --rot: -5deg; top: calc(var(--u) * 30); left: 46%; }
.sticker._fl2 { --w: 108; --rot: 8deg;  bottom: calc(var(--u) * 36); right: 9%; }
/* PRICE：上の余白／下の余白の左 */
.sticker._pr1 { --w: 90;  --rot: 9deg;  top: calc(var(--u) * 26); right: 28%; }
.sticker._pr2 { --w: 138; --rot: -7deg; bottom: calc(var(--u) * 48); left: 7%; }

@media (max-width: 750px) {
  .sticker._pc {
    display: none;
  }

  .sticker._kv  { --w: 92; top: 15%; left: 5%; }
  .sticker._st1 { --w: 56; top: calc(var(--u) * 14); right: 5%; }
  .sticker._mb1 { --w: 62; top: calc(var(--u) * 14); right: 5%; }
  .sticker._fl2 { --w: 62; bottom: calc(var(--u) * 20); right: 6%; }
  .sticker._pr1 { --w: 48; top: calc(var(--u) * 12); right: 6%; }
}

/* --------------------------------------------------------------------------
   19. 動きを減らす設定
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* マーキーは流さず、先頭の位置で止める */
  .marquee.is-marquee-ready .marquee_track {
    animation: none;
  }

  /* ステッカーは傾きだけ残して動かさない（stickers.js 側でも停止している） */
  .sticker {
    transform: rotate(var(--rot, 0deg));
  }

  /* ローダーの点滅は止めて、全部点灯した状態にする */
  .loader_dots i {
    animation: none;
    opacity: 1;
  }

  /* キャンペーンの帯は流さず、点滅もしない */
  .ticket_ticker_track,
  .ticket_deal_blink {
    animation: none;
  }

  /* VIEW PROFILE の続きは、動かさずにすぐ開閉する */
  .about_rest,
  .about_rest_body > * {
    transition: none !important;
  }

  /* ABOUT の写真の視差は行わない */
  .about_photo {
    --pp: 0 !important;
  }

  /* マーキーのずれ・バナーの拡大は行わない */
  .marquee_track {
    translate: none;
  }

  /* ステートメントの帯は動かさない */
  .statement_giant span {
    transform: translate3d(-4%, 0, 0);
  }

  /* キービジュアルの登場アニメーションは行わず、最初から表示する */
  .kv_title_line,
  .kv_meta {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}