/* ==========================================================================
   KOGUCHI PR — AIインフルエンサーマーケティング corporate/agency hub LP
   配色は matsuyoi コーポレートロゴ由来（藍・群青・紫・赤紫・生成り）。
   書体は f-mincho(Shippori Mincho 600) / f-sans(Noto Sans JP) / f-mono(IBM Plex Mono)。
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
  background: var(--cream);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; cursor: pointer; background: none; }
input, textarea { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:root {
  /* --- 地・面 --- */
  --navy-deep: #0B1120;   /* 試写室の地（FV・ダークセクション） */
  --navy: #0F172A;        /* 藍。フレーム内側・ダーク面 */
  --cream: #F4F1EA;       /* 生成り。ライト面の地・ダーク面の文字 */
  --surface: #ffffff;

  /* --- アクセント（ロゴのグラデーション上の点） --- */
  --blue: #1C3680;        /* 群青。主アクセント・リンク */
  --blue-light: #4C63A8;  /* 群青の明るい側。罫線グラデ用 */
  --purple: #3F3470;      /* 紫。グラデ中継点 */
  --plum: #672B51;        /* 赤紫。差し色・グラデ終点 */
  --plum-light: #C89BBE;  /* プラム淡。ダーク面のラベル */

  /* --- 文字 --- */
  --ink: #131A2C;         /* 藍墨。ライト面の本文 */
  --ink-soft: #5A6072;    /* ライト面の副次テキスト */
  --on-dark: #F4F1EA;     /* ダーク面の本文 */
  --on-dark-soft: #AEB5C6;/* ダーク面の副次テキスト */
  --rail: #7A8299;        /* 欄外（縦書きラベル・作品番号） */

  /* --- 線 --- */
  --border: #DED9CE;      /* ライト面の罫線 */
  --border-dark: rgba(244, 241, 234, 0.16); /* ダーク面の罫線 */

  /* --- CTA --- */
  --cta-grad: linear-gradient(135deg, #1C3680 0%, #5B2D5B 100%); /* ライト面 */
  /* ダーク面の CTA は生成りベタ + 藍文字（ロゴマークの関係を踏襲） */

  /* --- 見出しを横切る編集記号のグラデ --- */
  --mark-grad: linear-gradient(90deg, #3E58A0 0%, #7A63A8 52%, #B5698C 100%);

  --wrap: 1140px;
}

.f-mincho { font-family: 'Shippori Mincho', serif; font-weight: 600; line-height: 1.4; }
.f-sans { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; }
.f-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
}

.sp-only { display: inline; }
@media (min-width: 700px) { .sp-only { display: none; } }

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--cta-grad);
  color: #fff;
  border-radius: 999px;
  padding: 0.9em 1.8em;
  font-size: clamp(14px, 3.6vw, 16px);
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(28, 54, 128, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(28, 54, 128, 0.36); }
.btn-cta__arrow { font-size: 0.8em; }
/* ダーク面のCTA。生成りベタ+藍文字（ロゴマークの関係を踏襲。角丸3pxはhero-cta/site-header__ctaと同じ生成りボタンの慣例） */
.btn-cta--dark {
  background: var(--cream);
  color: var(--navy);
  border-radius: 3px;
  box-shadow: none;
}
.btn-cta--dark:hover { box-shadow: none; }

/* ==========================================================================
   ヘッダー — 試写室の操作パネル。半透明の藍+ぼかしで、hero(藍地)にも
   他セクション(生成り地)にも馴染む。SPはナビ4項目を間引く。
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(11, 17, 32, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
}
.site-header__brand {
  font-size: clamp(16px, 2.2vw, 21px);
  letter-spacing: 0.2em;
  color: var(--on-dark);
}
.site-header__nav {
  display: none;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}
.site-header__nav a {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--on-dark-soft);
  transition: color 0.2s ease;
}
.site-header__nav a:hover { color: var(--on-dark); }
.site-header__cta {
  display: inline-flex;
  align-items: center;
  background: var(--cream);
  color: var(--navy);
  border-radius: 3px;
  padding: 0.62em 1.3em;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.site-header__cta:hover { transform: translateY(-1px); }

@media (min-width: 700px) {
  .site-header { padding: 18px 32px; }
  .site-header__nav { display: flex; }
}

/* ==========================================================================
   共通セクション
   後半12セクションは works-head / angles-head と同じ「左寄せ見出し＋右の
   欄外番号（04—15）」を共通言語として使う。中央揃えの eyebrow→title→lead
   の繰り返しが単調さの主因だったため、左寄せ＋罫線区切りに統一する。
   ========================================================================== */
main > section {
  padding: clamp(56px, 12vw, 120px) 20px;
  max-width: var(--wrap);
  margin: 0 auto;
  scroll-margin-top: 76px; /* sticky header に隠れないよう #contact 等へのアンカー着地位置を補正 */
}
/* solution / trust / contact はダーク面。works/angles と同じフルブリード構造 */
main > .solution,
main > .trust,
main > .contact {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  scroll-margin-top: 76px;
}
.chapter-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 12vw, 120px) 20px;
}
.dark-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 見出しを横切る編集記号（--mark-grad）。太字1語だけに使う汎用ユーティリティ */
.hl { position: relative; display: inline-block; }
.hl::before {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.02em;
  top: 0.52em;
  height: 0.1em;
  z-index: -1;
  background: var(--mark-grad);
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(40px, 7vw, 72px);
  border-bottom: 1px solid var(--border);
  padding-bottom: clamp(20px, 4vw, 32px);
}
.sec-head__label { max-width: 680px; }
.sec-head__num {
  flex: none;
  font-size: clamp(11px, 2.6vw, 12px);
  color: var(--rail);
  white-space: nowrap;
  padding-bottom: 0.2em;
}
.sec-eyebrow {
  font-size: clamp(11px, 2.6vw, 12px);
  color: var(--blue);
  text-align: left;
  margin-bottom: 0.9em;
}
.sec-title {
  font-size: clamp(30px, 6.4vw, 44px);
  text-align: left;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  text-wrap: balance;
}
.sec-lead {
  font-size: clamp(15px, 3.6vw, 16px);
  line-height: 1.9;
  color: var(--ink-soft);
  text-align: left;
  max-width: 36em;
  margin: 0.7em 0 0;
  text-wrap: pretty;
}

/* ダーク面（solution / trust / contact）の見出し色 */
.solution .sec-head, .trust .sec-head, .contact .sec-head { border-bottom-color: var(--border-dark); }
.solution .sec-eyebrow, .trust .sec-eyebrow, .contact .sec-eyebrow { color: var(--blue-light); }
.solution .sec-title, .trust .sec-title, .contact .sec-title { color: var(--on-dark); font-size: clamp(32px, 7vw, 50px); }
.solution .sec-lead, .trust .sec-lead, .contact .sec-lead { color: var(--on-dark-soft); }
.solution .sec-head__num, .trust .sec-head__num, .contact .sec-head__num { color: var(--rail); }

/* GSAP reveal 初期状態（JS未読込時は素の表示のまま） */
[data-reveal] { will-change: transform, opacity; }

/* ==========================================================================
   1. HERO — 試写室（A案）
   構造は「作例3層(主/副/断片) + 透過立ち絵 + 見出し + 工程 + 欄外」を
   .hero-stage(container-type:inline-size)の中にcqw単位で絶対配置する。
   PC/SPは別設計（モバイルファーストのベース=SP値、@media(min-width:700px)
   でPC値に上書き）。境界は700pxで既存LPの慣例を踏襲。
   ========================================================================== */
.hero {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--navy);
}
.hero-stage {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  min-height: max(720px, 100svh, 216cqw);
  height: auto;
  background: var(--navy);
  color: var(--on-dark);
}
@media (min-width: 700px) {
  .hero-stage {
    aspect-ratio: 16 / 10;
    min-height: 620px;
    max-height: calc(100svh - 68px); /* sticky .site-header 分を差し引き、下端の工程バー・次セクション予告が画面外に落ちないようにする */
    height: auto;
  }
}

/* フィルムグレイン。質感はこれ1種類のみ */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 作例3層(主/副/断片)。PCは5点、SPはfashion(副)/daily(断片)の2点に間引く */
.hero-frag {
  position: absolute;
  overflow: hidden;
  background: var(--navy);
}
.hero-frag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-frag--daily { left: -13cqw; top: 96cqw; width: 24cqw; height: 44cqw; z-index: 1; transform: rotate(-6deg); opacity: 0.26; }
.hero-frag--fashion { left: -5cqw; top: 90cqw; width: 27cqw; aspect-ratio: 9 / 16; z-index: 2; transform: rotate(4.5deg); opacity: 0.42; }
.hero-frag--food,
.hero-frag--pet,
.hero-frag--fitness { display: none; }

@media (min-width: 700px) {
  .hero-frag--daily { left: -4cqw; top: 6cqw; width: 10cqw; height: auto; aspect-ratio: 9 / 16; z-index: 1; transform: rotate(-6deg); opacity: 0.22; }
  .hero-frag--fashion { left: 86cqw; top: 2cqw; width: 15cqw; z-index: 2; transform: rotate(5deg); opacity: 0.3; }
  .hero-frag--food { display: block; left: 7cqw; top: 44cqw; width: 15cqw; aspect-ratio: 9 / 16; z-index: 2; transform: rotate(-5deg); opacity: 0.34; }
  .hero-frag--pet { display: block; left: 33cqw; top: 52cqw; width: 9cqw; aspect-ratio: 9 / 16; z-index: 1; transform: rotate(5deg); opacity: 0.2; }
  .hero-frag--fitness { display: block; left: 88cqw; top: 41cqw; width: 11cqw; aspect-ratio: 9 / 16; z-index: 2; transform: rotate(-3deg); opacity: 0.3; }
}

/* 代表作(コスメ)。動画確定後は img を video に差し替え、.hero-main__soon を消すだけで良い構造 */
.hero-main {
  position: absolute;
  overflow: hidden;
  background: var(--navy);
  left: 5cqw;
  top: 23cqw;
  width: 56cqw;
  aspect-ratio: 9 / 16;
  z-index: 3;
  transform: rotate(-1.4deg);
  box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, 0.5);
}
.hero-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 34%, rgba(15, 23, 42, 0.72) 74%, rgba(15, 23, 42, 0.96) 100%);
}
.hero-main__tag {
  position: absolute;
  right: 2.4cqw;
  top: 2.6cqw;
  z-index: 2;
  font-size: 2.3cqw;
  letter-spacing: 0.16em;
  text-align: right;
  text-shadow: 0 1px 6px rgba(11, 17, 32, 0.85), 0 1px 2px rgba(11, 17, 32, 0.9);
}
.hero-main__tag em { font-style: normal; color: var(--plum-light); display: block; margin-bottom: 0.6cqw; }
.hero-main__soon {
  position: absolute;
  left: 2.6cqw;
  top: 2.6cqw;
  z-index: 2;
  font-size: 2cqw;
  letter-spacing: 0.2em;
  color: var(--on-dark);
  border: 1px solid rgba(244, 241, 234, 0.34);
  padding: 1cqw 1.8cqw;
  background: rgba(15, 23, 42, 0.5);
}

@media (min-width: 700px) {
  .hero-main {
    left: 52cqw;
    top: 9cqw;
    width: 21.5cqw;
    transform: none;
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.55);
  }
  .hero-main::after {
    background: linear-gradient(90deg, #0F172A 0%, rgba(15, 23, 42, 0.72) 19%, rgba(15, 23, 42, 0) 46%);
  }
  .hero-main__tag {
    left: 0.9cqw;
    right: auto;
    bottom: 0.8cqw;
    top: auto;
    text-align: left;
    font-size: 0.7cqw;
    letter-spacing: 0.18em;
    color: var(--on-dark);
  }
  .hero-main__tag em { margin-bottom: 0.25cqw; }
  .hero-main__soon {
    left: auto;
    right: 0.8cqw;
    top: 0.8cqw;
    font-size: 0.6cqw;
    letter-spacing: 0.22em;
    padding: 0.34cqw 0.72cqw;
  }
}

/* 専属キャラクター。SPは腰下をラッパーのoverflow:hiddenで切る、PCはstage自体の
   overflow:hiddenで裾を画面外に落とす(mockの機構をそのまま踏襲) */
.hero-person {
  position: absolute;
  z-index: 4;
  right: -16cqw;
  top: 28cqw;
  width: 62cqw;
  height: 94cqw;
  overflow: hidden;
}
.hero-person img {
  display: block;
  width: 100%;
  filter: drop-shadow(-2cqw 0 6cqw rgba(0, 0, 0, 0.55));
}
@media (min-width: 700px) {
  .hero-person {
    left: 71cqw;
    right: auto;
    top: auto;
    bottom: -22cqw;
    width: auto;
    height: 125%;
    overflow: visible;
  }
  .hero-person img {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(-1cqw 0 3cqw rgba(0, 0, 0, 0.6)) brightness(0.9) saturate(0.94);
  }
}

/* 暗部ベール。読み場を作るための明度調整のみ(色は付けない) */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.52) 0%, rgba(15, 23, 42, 0.06) 15%, rgba(15, 23, 42, 0.18) 38%,
      rgba(15, 23, 42, 0.8) 55%, rgba(15, 23, 42, 0.96) 66%, rgba(15, 23, 42, 1) 78%);
}
@media (min-width: 700px) {
  .hero-veil {
    background:
      linear-gradient(102deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.9) 30%, rgba(15, 23, 42, 0.24) 52%, rgba(15, 23, 42, 0) 66%),
      linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0) 22%);
  }
}

/* 欄外(縦書き)。PCのみ。「WORKS 01—08」等の英字ラベルはSPでは hero-main__tag / hero-next で担保 */
.hero-rail { display: none; }
@media (min-width: 700px) {
  .hero-rail {
    display: block;
    position: absolute;
    z-index: 7;
    writing-mode: vertical-rl;
    font-size: 0.72cqw;
    letter-spacing: 0.34em;
    color: var(--rail);
  }
  .hero-rail--l { left: 1.1cqw; top: 7.5cqw; }
  .hero-rail--r { right: 1.1cqw; top: 12cqw; }
}

/* 見出し・リード・CTA */
.hero-copy {
  position: absolute;
  z-index: 6;
  left: 5.6cqw;
  top: 112cqw;
  width: 94cqw;
}
@media (min-width: 700px) {
  .hero-copy { left: 3cqw; top: 19cqw; width: 56cqw; }
}

.hero-copy__bar {
  display: block;
  width: 17cqw;
  height: 1.6cqw;
  margin-bottom: 4.4cqw;
  background: linear-gradient(90deg, #4C63A8, #8C6FA8, #C4718F);
}
@media (min-width: 700px) {
  .hero-copy__bar { display: none; }
}

.hero-title {
  margin: 0;
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.hero-title__l1 { display: block; font-size: 9.3cqw; }
.hero-title__l2 { display: block; font-size: 10.1cqw; margin-left: 6cqw; white-space: nowrap; }
.hero-title__period { color: var(--plum-light); }
.hero-title__mark { position: relative; display: inline-block; }

@media (min-width: 700px) {
  .hero-title { line-height: 0.94; letter-spacing: -0.035em; }
  .hero-title__l1 { font-size: 5.4cqw; }
  .hero-title__l2 { font-size: 6.05cqw; margin-left: -1.5cqw; white-space: normal; position: relative; }
  .hero-title__mark::before {
    content: "";
    position: absolute;
    left: -0.06em;
    right: -0.02em;
    top: 0.45em;
    height: 0.115em;
    z-index: -1;
    background: var(--mark-grad);
  }
}

.hero-lead { color: var(--on-dark-soft); }
.hero-lead--pc { display: none; }
.hero-lead--sp { display: block; margin: 5.6cqw 0 0; font-size: 3.6cqw; line-height: 1.78; }
@media (min-width: 700px) {
  .hero-lead--sp { display: none; }
  .hero-lead--pc { display: block; margin: 2.4cqw 0 0; font-size: 1.12cqw; line-height: 1.9; max-width: 33cqw; }
}

/* CTA群。cqw値はhero-stage基準のまま(hero-copyの絶対配置に対する差分で計算済み)。
   PC/SP用テキストは別要素にし、非表示側は display:none で無効化(実質1本のCTA) */
.hero-cta-group {
  position: absolute;
  left: 0;
  top: 46cqw;
  width: 88.8cqw;
  z-index: 6;
}
@media (min-width: 700px) {
  .hero-cta-group {
    position: static;
    width: auto;
    margin-top: 2.9cqw;
    display: flex;
    align-items: center;
    gap: 2cqw;
  }
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  height: 13.6cqw;
  background: var(--cream);
  color: var(--navy);
  border-radius: 3px;
  font-size: 3.7cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero-cta__no { color: var(--ink-soft); font-size: 2.7cqw; }
.hero-cta--pc { display: none; }
.hero-cta--sp { display: flex; }

.hero-works-link {
  display: block;
  margin-top: 4.4cqw;
  font-size: 3.4cqw;
  color: var(--on-dark);
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hero-works-link--pc { display: none; }
.hero-works-link--sp { display: block; border-bottom-color: rgba(244, 241, 234, 0.4); padding-bottom: 0.4cqw; width: fit-content; }

@media (min-width: 700px) {
  .hero-cta {
    display: inline-flex;
    justify-content: flex-start;
    height: 3.9cqw;
    padding: 0 1.5cqw;
    gap: 1.1cqw;
    font-size: 1.02cqw;
  }
  .hero-cta__no { font-size: 0.78cqw; letter-spacing: 0.12em; }
  .hero-cta--pc { display: inline-flex; }
  .hero-cta--sp { display: none; }

  .hero-works-link {
    margin-top: 0;
    font-size: 1cqw;
    border-bottom: 1px solid rgba(244, 241, 234, 0.4);
    padding-bottom: 0.25cqw;
    width: auto;
  }
  .hero-works-link--pc { display: block; }
  .hero-works-link--sp { display: none; }
}

/* 制作工程。PCのみ(SPは「捨てるもの」に含まれる長い説明の一種として省略) */
.hero-flow { display: none; }
@media (min-width: 700px) {
  .hero-flow {
    display: block;
    position: absolute;
    left: 3cqw;
    bottom: 0;
    z-index: 7;
    width: 62cqw;
    border-top: 1px solid var(--border-dark);
    padding-top: 1cqw;
  }
  .hero-flow__list { display: flex; align-items: flex-start; gap: 1.1cqw; }
  .hero-flow__step { display: flex; flex-direction: column; }
  .hero-flow__en { font-size: 0.72cqw; letter-spacing: 0.16em; color: var(--on-dark); }
  .hero-flow__ja { font-size: 0.68cqw; color: var(--rail); margin-top: 0.25cqw; letter-spacing: 0.06em; }
  .hero-flow__arrow {
    font-size: 0.72cqw;
    background: linear-gradient(90deg, #4C63A8, #8C6FA8, #B5698C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 次セクション予告(欄外)。SPは下端に横並び、PCは右下に縦積み */
.hero-next {
  position: absolute;
  left: 5.6cqw;
  bottom: 0;
  z-index: 7;
  width: 88.8cqw;
  border-top: 1px solid var(--border-dark);
  padding-top: 3cqw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hero-next b { font-size: 3.2cqw; letter-spacing: 0.2em; font-weight: 500; color: var(--on-dark); }
.hero-next span { font-size: 2.6cqw; letter-spacing: 0.14em; color: var(--rail); }

@media (min-width: 700px) {
  .hero-next {
    left: auto;
    right: 3cqw;
    bottom: 0.7cqw;
    width: auto;
    border-top: none;
    padding-top: 0;
    display: block;
    text-align: right;
  }
  .hero-next b { display: block; font-size: 0.95cqw; margin-top: 0; }
  .hero-next span { display: block; font-size: 0.72cqw; margin-top: 0.2cqw; }
}

/* ==========================================================================
   2. PROBLEM
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
@media (min-width: 700px) {
  .problem-grid { gap: 20px; }
}
/* アイコンを1列目、タイトルと本文を2列目に積む。flex 横並びだとタイトル列が
   細くなり日本語が1文字ずつ折り返すため grid で列を固定する */
.problem-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(20px, 3.6vw, 24px);
}
.problem-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(167, 221, 196, 0.24), rgba(182, 167, 230, 0.16));
  color: var(--plum);
}
.problem-card__icon svg { width: 20px; height: 20px; }
.problem-card__title { grid-column: 2; font-size: clamp(16px, 3.8vw, 18px); }
.problem-card__text { grid-column: 2; font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.85; }

/* ==========================================================================
   3. SOLUTION（ダーク・意思決定の山場。カードはガラス質の暗いタイルに）
   ========================================================================== */
.solution-flow {
  counter-reset: sol;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 900px) {
  .solution-flow { flex-direction: row; align-items: stretch; gap: 0; }
}
.solution-flow__step {
  position: relative;
  flex: 1;
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid var(--border-dark);
  border-radius: 18px;
  padding: clamp(22px, 3.8vw, 26px) clamp(18px, 3.2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
@media (min-width: 900px) {
  .solution-flow__step { margin-right: 26px; }
  .solution-flow__step:last-child { margin-right: 0; }
  .solution-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--blue-light);
  }
}
.solution-flow__num { font-size: clamp(20px, 4.6vw, 26px); color: var(--blue-light); }
.solution-flow__title { font-size: clamp(16px, 3.8vw, 18px); color: var(--on-dark); }
.solution-flow__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--on-dark-soft); line-height: 1.8; }

.solution-terms {
  margin-top: clamp(28px, 5vw, 40px);
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid var(--border-dark);
  border-radius: 18px;
  padding: clamp(20px, 3.6vw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
}
.solution-terms__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: clamp(13px, 3.2vw, 14.5px);
}
.solution-terms__label { color: var(--on-dark); white-space: nowrap; }
.solution-terms__value { color: var(--on-dark-soft); }

/* ==========================================================================
   4. ABOUT KOGUCHI（Value 4軸）
   ========================================================================== */
.strengths {
  margin-top: clamp(36px, 7vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .strengths { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.strength-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 28px) clamp(16px, 3.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  text-align: center;
  align-items: center;
}
.strength-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(182, 167, 230, 0.18), rgba(167, 221, 196, 0.22));
  color: var(--blue);
}
.strength-card__icon svg { width: 22px; height: 22px; }
.strength-card__title { font-size: clamp(16px, 3.8vw, 18px); }
.strength-card__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.85; }

/* ==========================================================================
   5. USE CASE
   ========================================================================== */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .usecase-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1000px) {
  .usecase-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
}
.usecase-card {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(20px, 3.6vw, 24px) clamp(16px, 3vw, 18px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.usecase-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(60, 54, 70, 0.12); }
.usecase-card__num { font-size: clamp(11px, 2.6vw, 12px); color: var(--blue); }
.usecase-card__title { font-size: clamp(15px, 3.6vw, 17px); }
.usecase-card__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.8; flex: 1; }
.usecase-card__arrow {
  align-self: flex-end;
  font-size: 0.8em;
  color: var(--blue);
  transition: transform 0.25s ease;
}
.usecase-card:hover .usecase-card__arrow { transform: translateX(3px); }

/* ==========================================================================
   6. WHY HYBRID / 共通テーブル（kg-table）
   ========================================================================== */
.kg-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
/* min-width指定のテーブルが画面幅を超え横スクロールになる幅（SP〜768px
   タブレットまで発生）で気づけるよう、右端をフェードアウトさせる。
   実際にはみ出している時だけscript.js(initTableScrollHints)が
   has-overflowを付与する（実機検証で発見・追加） */
.kg-table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.kg-table-wrap.has-overflow::after {
  opacity: 1;
}
.kg-table {
  width: 100%;
  border-collapse: collapse;
}
.kg-table th, .kg-table td {
  padding: 16px 18px;
  font-size: clamp(14px, 3.3vw, 15px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.kg-table tr:last-child th, .kg-table tr:last-child td { border-bottom: none; }
.kg-table thead th {
  background: var(--cream);
  color: var(--ink);
  font-size: clamp(13px, 3.1vw, 15px);
  white-space: nowrap;
}
.kg-table tbody th {
  color: var(--ink);
  white-space: nowrap;
  background: transparent;
}
.kg-table td { color: var(--ink-soft); line-height: 1.75; }
.kg-table--hybrid { min-width: 760px; }
.kg-table--promo { min-width: 620px; }

/* ==========================================================================
   7. CAST & CHARACTER
   ========================================================================== */
.cast-types {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.4vw, 32px);
}
.cast-type {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 32px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.cast-type:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(60, 54, 70, 0.12); }
.cast-type__num { color: var(--blue); font-size: clamp(16px, 3.6vw, 18px); margin-bottom: 0.3em; }
.cast-type__title { font-size: clamp(18px, 4.2vw, 21px); margin-bottom: 0.5em; }
.cast-type__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.85; }
/* 在籍キャラは2名。既存 talent-grid の3列だと右1/3が空くため2列＋中央寄せにする */
.cast-type--primary .talent-grid {
  margin-top: 20px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin-inline: auto;
}
.cast-types__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .cast-types__pair { grid-template-columns: 1fr 1fr; }
}

.talent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 640px) {
  .talent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .talent-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.talent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.talent-card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(60, 54, 70, 0.12); }
.talent-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.talent-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.talent-card__genre {
  font-size: clamp(9.5px, 2.4vw, 10.5px);
  color: var(--plum);
  padding: 14px 16px 0;
}
.talent-card__name { font-size: clamp(16px, 4vw, 18px); padding: 4px 16px 0; }
.talent-card__tagline {
  font-size: clamp(13px, 3.2vw, 14.5px);
  color: var(--ink-soft);
  padding: 6px 16px 0;
  line-height: 1.7;
  flex: 1;
}
.talent-card__link {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(13px, 3.1vw, 14px);
  color: var(--blue);
  padding: 12px 16px 16px;
}
.talent-card__arrow { font-size: 0.8em; transition: transform 0.25s ease; }
.talent-card:hover .talent-card__arrow { transform: translateX(3px); }

/* ==========================================================================
   8. DELIVERABLES（Bento）
   10項目のうち「動画」（納品物本体）と「投稿」（運用代行はしないという
   境界の明示）だけをサイズで強調する。他8項目は横並びの均等タイルのまま。
   ========================================================================== */
.deliverables-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .deliverables-bento { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

.d-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
@media (min-width: 640px) {
  .d-tile { grid-column: span 2; }
}
@media (min-width: 900px) {
  .d-tile { grid-column: span 1; }
}
.d-tile--lg { background: var(--cream); }
@media (min-width: 640px) {
  .d-tile--lg { grid-column: span 2; }
}
@media (min-width: 900px) {
  .d-tile--lg { grid-column: span 2; grid-row: span 2; justify-content: center; }
}

.d-tile__num { font-size: clamp(11px, 2.6vw, 12px); color: var(--blue); }
.d-tile__title { font-size: clamp(16px, 3.8vw, 19px); }
.d-tile__text { font-size: clamp(13.5px, 3.3vw, 15px); color: var(--ink-soft); line-height: 1.85; }
.d-tile__text strong { color: var(--ink); font-weight: 600; }
.d-tile--lg .d-tile__title { font-size: clamp(19px, 4.4vw, 24px); }
.d-tile--lg .d-tile__text { font-size: clamp(14px, 3.4vw, 16px); }

/* ==========================================================================
   9. SAFETY & POLICY（ダーク。白カードのチェックリストではなく、
   欄外番号+罫線の「規約書」のような一段落として読ませる）
   ========================================================================== */
.trust-checklist {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-dark);
}
@media (min-width: 700px) {
  .trust-checklist { grid-template-columns: 1fr 1fr; }
}
.trust-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(18px, 3.4vw, 24px) 0;
  border-bottom: 1px solid var(--border-dark);
}
@media (min-width: 700px) {
  .trust-checklist__item:nth-child(odd) { padding-right: 28px; border-right: 1px solid var(--border-dark); }
  .trust-checklist__item:nth-child(even) { padding-left: 28px; }
}
.trust-checklist__num { flex: none; font-size: clamp(13px, 3vw, 15px); color: var(--plum-light); padding-top: 0.15em; }
.trust-checklist__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--on-dark); line-height: 1.85; margin: 0; }
.trust-footnote {
  margin-top: clamp(24px, 4.4vw, 32px);
  font-size: clamp(12.5px, 3vw, 13.5px);
  color: var(--on-dark-soft);
  line-height: 1.85;
  max-width: 640px;
}
.trust-footnote .f-mono { color: var(--rail); margin-right: 0.7em; font-size: 0.82em; }

/* ==========================================================================
   10. PLAN EXAMPLE（発注のイメージ台帳。カードではなく罫線区切りの
   2x2レジャー表記にして、Bento化したdeliverablesと視覚的に分ける）
   ========================================================================== */
.plan-ledger {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) {
  .plan-ledger { grid-template-columns: 1fr 1fr; }
}
.plan-ledger__row {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 18px;
  padding: clamp(24px, 4.4vw, 32px) clamp(4px, 2vw, 28px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 700px) {
  .plan-ledger__row:nth-child(odd) { border-right: 1px solid var(--border); }
}
.plan-ledger__num { grid-row: 1 / 3; font-size: clamp(20px, 4.4vw, 26px); color: var(--blue); }
.plan-ledger__title { grid-column: 2; font-size: clamp(17px, 4vw, 19px); }
.plan-ledger__text { grid-column: 2; font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.85; margin-top: 0.3em; }
.plan-note {
  text-align: center;
  font-size: clamp(13px, 3.2vw, 14px);
  color: var(--ink-soft);
  margin-top: clamp(20px, 4vw, 24px);
}
.plan-cta { display: flex; justify-content: center; margin-top: clamp(24px, 4.4vw, 32px); }

/* ==========================================================================
   11. FLOW
   ========================================================================== */
.flow-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  counter-reset: flow;
  position: relative;
}
@media (min-width: 640px) {
  .flow-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 900px) {
  .flow-list { grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
}
.flow-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(22px, 4vw, 28px) clamp(20px, 4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.flow-step::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: var(--cta-grad);
}
.flow-step:not(:last-child)::after {
  right: -12px;
  top: 50%;
  width: 22px;
  height: 3px;
  transform: translateY(-50%);
  display: none;
}
@media (min-width: 900px) {
  .flow-step:not(:last-child):not(:nth-child(3))::after { display: block; }
}
.flow-step__num {
  font-size: clamp(20px, 5vw, 26px);
  color: var(--blue);
}
.flow-step__title { font-size: clamp(17px, 4vw, 19px); }
.flow-step__text { font-size: clamp(14px, 3.4vw, 15.5px); color: var(--ink-soft); line-height: 1.85; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 760px) {
  .faq-list { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 20px;
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--blue); }
.faq-item__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-size: clamp(15px, 3.6vw, 17px);
  color: var(--ink);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: '+';
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  color: var(--blue);
  flex: none;
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a {
  font-size: clamp(14px, 3.4vw, 15.5px);
  color: var(--ink-soft);
  line-height: 1.9;
  padding: 0 0 18px;
  margin: 0;
}
.faq-cta { display: flex; justify-content: center; margin-top: clamp(28px, 5vw, 36px); }

/* ==========================================================================
   13. CONTACT（ダーク・締めのCTA。左=見出し/右=フォームカードの2カラム）
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 56px);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: clamp(48px, 6vw, 72px); }
}
.contact-intro__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.1em;
}
.contact-intro__meta .sec-eyebrow { margin-bottom: 0; }

.contact-form {
  background: rgba(244, 241, 234, 0.045);
  border: 1px solid var(--border-dark);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 36px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .form-field--message, .form-submit-row, .form-status { grid-column: 1 / -1; }
}
.form-field { display: flex; flex-direction: column; gap: 0.5em; }
.form-field label { font-size: clamp(13px, 3.2vw, 14.5px); color: var(--on-dark-soft); }
.form-field input, .form-field textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85em 1em;
  font-size: clamp(15px, 3.6vw, 16px);
  color: var(--ink);
  background: var(--surface);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 54, 128, 0.18);
}
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.form-submit-row { display: flex; justify-content: center; margin-top: 4px; }
.form-status {
  text-align: center;
  font-size: clamp(13px, 3.2vw, 14.5px);
  color: var(--on-dark-soft);
}
.form-status.is-error { color: #e08a83; }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(40px, 8vw, 64px) 20px clamp(32px, 6vw, 48px);
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.site-footer__brand { font-size: clamp(16px, 4vw, 18px); }
.site-footer__note {
  font-size: clamp(12px, 3vw, 13.5px);
  color: var(--ink-soft);
  line-height: 1.7;
}
.site-footer__note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__copy { font-size: clamp(10.5px, 2.6vw, 11.5px); color: var(--ink-soft); opacity: 0.8; }

/* ==========================================================================
   KOGUCHI PR — 新設2セクション（SELECTED WORKS / 切り口比較）断片スタイル
   FV（試写室）直後に続く前提。地=var(--navy-deep)、フレーム=var(--navy)、
   文字=var(--on-dark) / var(--on-dark-soft)、作品番号=var(--plum-light)。
   使用フォント: f-mincho / f-sans / f-mono（既存 index.html のクラスをそのまま利用）
   ========================================================================== */

/* main>section の共通 padding/max-width を解除し、フルブリードの暗い地にする */
main > .works,
main > .angles {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  scroll-margin-top: 76px;
}

.works-inner,
.angles-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 12vw, 120px) 20px;
}

/* フィルムグレイン（質感は1種類だけ。opacity .035 + soft-light） */
.works-grain,
.angles-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------
   見出しブロック共通（works-head / angles-head）
   ------------------------------------------------------------------------ */
.works-head,
.angles-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(36px, 6.4vw, 64px);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: clamp(20px, 4vw, 32px);
}
.works-head__label,
.angles-head__label { max-width: 640px; }

.works-eyebrow,
.angles-eyebrow {
  font-size: clamp(11px, 2.6vw, 12px);
  color: var(--blue-light);
  margin-bottom: 0.9em;
}

.works-head__num,
.angles-head__num {
  flex: none;
  font-size: clamp(11px, 2.6vw, 12px);
  color: var(--rail);
  white-space: nowrap;
  padding-bottom: 0.2em;
}

.works-title,
.angles-title {
  color: var(--on-dark);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
}
.works-title__l1,
.angles-title__l1 {
  display: block;
  font-size: clamp(20px, 4.4vw, 28px);
  line-height: 1.15;
  color: var(--on-dark-soft);
}
.works-title__l2,
.angles-title__l2 {
  display: block;
  font-size: clamp(30px, 7.2vw, 52px);
  line-height: 1.08;
  margin-left: -0.01em;
  margin-top: 0.06em;
  text-wrap: balance;
}

/* 見出しを横切る編集記号（--mark-grad。太さ約0.12emの横棒） */
.works-title__mark,
.angles-title__mark {
  position: relative;
  display: inline-block;
}
.works-title__mark::before,
.angles-title__mark::before {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.02em;
  top: 0.46em;
  height: 0.12em;
  z-index: -1;
  background: var(--mark-grad);
}

.works-lead,
.angles-lead {
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.9;
  color: var(--on-dark-soft);
  max-width: 34em;
  text-wrap: pretty;
}

/* ==========================================================================
   1. SELECTED WORKS
   ========================================================================== */
.works-showcase {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 860px) {
  .works-showcase { flex-direction: row; align-items: flex-start; gap: clamp(28px, 4vw, 44px); }
}

/* 代表作（コスメ）: 1本だけ大きく扱う */
.works-primary {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--navy);
  border-radius: 3px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
  width: min(340px, 78vw);
  aspect-ratio: 9 / 16;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
@media (min-width: 860px) {
  .works-primary { width: 38%; max-width: 380px; }
}
@media (hover: hover) and (pointer: fine) {
  .works-primary:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.56); }
}
.works-primary img { width: 100%; height: 100%; object-fit: cover; display: block; }
.works-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0) 40%);
}
.works-primary__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--on-dark);
}
.works-primary__tag em { font-style: normal; display: block; margin-bottom: 0.35em; color: var(--plum-light); }
.works-primary__soon {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--on-dark);
  border: 1px solid rgba(244, 241, 234, 0.34);
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.5);
}

/* 従属7ジャンル: 等間隔のグリッドに見せすぎない(偶数番目を少し下げる) */
.works-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 860px) {
  .works-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.works-grid__item {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-radius: 2px;
  aspect-ratio: 9 / 16;
  transition: transform 0.3s ease;
}
@media (min-width: 860px) {
  .works-grid__item:nth-child(even) { transform: translateY(14px); }
}
@media (hover: hover) and (pointer: fine) {
  .works-grid__item:hover { transform: translateY(-4px); }
  @media (min-width: 860px) {
    .works-grid__item:nth-child(even):hover { transform: translateY(10px); }
  }
}
.works-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.88; }
.works-grid__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0) 46%);
}
.works-grid__label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--rail);
}

/* ==========================================================================
   2. 切り口の作り分け（ANGLES）
   ========================================================================== */
.angles-compare {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 40px);
}

/* 主比較（同一美容液: UGC風 vs ブランド広告風） */
.angles-primary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 760px) {
  .angles-primary { flex-direction: row; align-items: flex-start; gap: clamp(32px, 5vw, 56px); }
}
.angles-primary__frame {
  flex: none;
  overflow: hidden;
  background: var(--navy);
  border-radius: 3px;
  border: 1px solid var(--border-dark);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.46);
  width: min(560px, 100%);
}
.angles-primary__frame img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.angles-primary__cap { flex: 1; min-width: 0; }
.angles-primary__num {
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 0.14em;
  color: var(--plum-light);
  margin-bottom: 1.1em;
}
.angles-primary__text {
  font-size: clamp(15px, 3.6vw, 17px);
  line-height: 1.95;
  color: var(--on-dark-soft);
  max-width: 26em;
  text-wrap: pretty;
}

/* 副比較（同一商品×場面違い／同一商品×フック違い） */
.angles-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  .angles-secondary { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.angles-secondary__frame {
  overflow: hidden;
  background: var(--navy);
  border-radius: 3px;
  border: 1px solid var(--border-dark);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
}
.angles-secondary__frame img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.angles-secondary__num {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--plum-light);
  margin-bottom: 0.6em;
}
.angles-secondary__text {
  font-size: clamp(13.5px, 3.4vw, 15px);
  line-height: 1.85;
  color: var(--on-dark-soft);
}

/* ==========================================================================
   追従CTA — SPのみ表示（PCは常時visibleなヘッダーCTAで足りるため非表示）。
   表示/非表示のトリガーはscript.jsのIntersectionObserver。ここではCSSの
   初期状態(非表示)と表示中クラスのpointer-events切替のみを担当する。
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 0 16px env(safe-area-inset-bottom);
  background: rgba(11, 17, 32, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-dark);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta.is-visible { pointer-events: auto; }
@media (max-width: 699px) {
  .sticky-cta { display: flex; }
}
.sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: var(--cream);
  color: var(--navy);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}