@charset "UTF-8";

/* =========================================================
   ZEXNS

   雰囲気の参考：ソニー株式会社のコーポレートサイト（sony.co.jp）。
   参考にしたのは「組み方の文法」だけで、
   画像・ロゴ・文章・コードは一切流用していない。

     ・黒から青へのグラデーションを地にする
     ・角丸を持たせない。区切りは1pxのヘアラインだけで、影は使わない
     ・見出しは「英語を小さく上に、日本語を大きく下に」の2段
     ・文字は中央そろえ。色数を絞り、余白を大きく取る
     ・唯一の色は、Xから伸びる線と同じ青。ここぞという場所にだけ使う

   1. Design tokens
   2. Reset & base
   3. Layout / Section
   4. Header & Footer
   5. Opening（トップページ冒頭の演出）
   6. Philosophy
   7. Service
   8. Flow
   9. Works
   10. Contact / Button / Form
   11. Page（下層ページ）
   12. Responsive
   13. Reduced motion
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* 面 */
  --c-black: #000000;

  /* 地のグラデーション。上を黒、下へ向かって青へ。
     途中に暗い紺を挟んでいるのは、黒から青へ直接つなぐと
     中間で色が濁って帯状の縞（バンディング）が見えるため。 */
  --c-blue: #0b39b5;
  --c-blue-deep: #041a4d;
  --grad-bg: linear-gradient(
    180deg,
    var(--c-black) 0%,
    #000914 30%,
    var(--c-blue-deep) 68%,
    var(--c-blue) 100%
  );

  /* Xと、そこから伸びる線に使う青。地のグラデーションより明るい純青 */
  --c-beam: #2b3df0;

  /* 文字。すべて白でそろえている。
     薄い灰色を使わないぶん、強弱は文字の大きさと太さ、余白で付ける。 */
  --c-ink: #ffffff;
  --c-ink-mid: #ffffff;
  --c-ink-weak: #ffffff;
  /* 入力欄の下書き文字だけは薄くする。
     打った文字と同じ白にすると、入力済みかどうかが見分けられない。 */
  --c-placeholder: rgba(255, 255, 255, .45);

  /* 線 */
  --c-line: rgba(255, 255, 255, .14);
  --c-line-strong: rgba(255, 255, 255, .38);

  /* 面をわずかに起こすときの重ね色。地のグラデーションを殺さない濃さ */
  --c-veil: rgba(255, 255, 255, .04);

  --radius-pill: 999px;

  --header-h: 68px;
  --container: 1100px;
  --gutter: 24px;

  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-en: "Barlow", "Noto Sans JP", sans-serif;

  --ease: cubic-bezier(.2, .7, .3, 1);
  /* 線が消えるときだけ、ほぼ一定の速さで動く曲線を使う。
     --ease は出足が速いので、時間を延ばしても
     最初にほとんど縮みきってしまい、ゆっくりに見えない。 */
  --ease-even: cubic-bezier(.45, .05, .55, .95);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
  /* スクロールバーを出さない。
     出すと、その幅（実測で15px）だけ表示できる幅が狭まり、
     中央に置いたものが画面の中央から7.5px左にずれる。
     全画面で見せる作りなので、ずれないことを優先している。
     スマホは元から画面に重ねて出るため、何も変わらない。 */
  overflow-y: scroll;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome / Safari / Edge */

body {
  margin: 0;
  /* グラデーションを敷く前の下地。読み込みの一瞬に白が出るのを防ぐ */
  background: var(--c-black);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.9;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

/* 地のグラデーション。
   body の background に直接置くと、内容が短いあいだは画面の一部にしか掛からず、
   逆に内容が長くなると全体へ引き伸ばされて、青が最下部にしか出なくなる。
   画面に貼り付けた1枚を後ろに敷くことで、長さによらず同じ見え方にしている。
   background-attachment: fixed を使わないのは、
   スマートフォンでアドレスバーが伸縮するたびに背景が飛ぶため。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grad-bg);
}

/* トップページだけ、地を黒から始めて演出の途中で浮かび上がらせる。
   色から色へ直接変化させることはできないため、
   重ねた1枚の濃さで「黒 → グラデーション」を表している。 */
body.has-intro::before {
  opacity: 0;
  animation: bgFadeIn 1.6s var(--ease) 4s forwards;
}
@keyframes bgFadeIn { to { opacity: 1; } }

h1, h2, h3, p, ul, ol, li, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }

/* キーボードで操作している方にだけ、はっきりした枠を出す */
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-black);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* 狭い画面でだけ入れる改行。広い画面では消す。
   これがないと、折り返しが語の途中に来て読みにくくなる。 */
.br-sp { display: none; }
/* 逆に、広い画面でだけ入れる改行。狭い画面では詰めて流す */
.br-nl { display: inline; }

/* 折り返しの規則。
   中央そろえは、行の長さが不揃いだと粗く見える。

     balance … 行の長さをそろえる（見出しなど、行数の少ないもの向け）
     pretty  … 最後の行に1語だけ残る「ひとりぼっち」を避ける（本文向け）
     strict  … 小さい「っ」「ー」や句読点が行頭に来ないようにする

   対応していないブラウザでは、これまでどおり普通に折り返される。 */
h1, h2, h3,
.page__lead,
.section__ja,
.pillar__title,
.plan__title,
.flow__title,
.work__title,
.entry__ja {
  text-wrap: balance;
  line-break: strict;
}
.page__read,
.section__read,
.section__note,
.pillar__text,
.plan__text,
.plan__list li,
.flow__text,
.work__text,
.work__detail dd,
.work__note,
.terms p,
.terms li,
.form__note,
.form__done-text {
  text-wrap: pretty;
  line-break: strict;
}

/* 句読点でしか折り返さないようにする。
   日本語は語の切れ目に空白がないため、放っておくと
   「初めての／方が」のように語の途中で切れる。
   text-wrap: pretty でも直らない。
   句読点までを1つの塊にして、塊の中では折り返させない。 */
.wb span { display: inline-block; }

/* 本文中のリンク */
.link {
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 1px;
  transition: border-color .3s var(--ease);
}
.link:hover { border-bottom-color: var(--c-ink); }

/* スクロールして視界に入ったら現れる。合図は main.js が付ける */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 3. Layout / Section ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding: clamp(88px, 12vw, 160px) 0;
  text-align: center;
}
/* 1つおきにうっすら面を起こして、区切りを作る */
.section--alt { background: var(--c-veil); }

/* 見出しは英語を小さく上に、日本語を大きく下に置く2段組 */
.section__head { margin-bottom: 48px; }
.section__en {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--c-ink-weak);
}
.section__ja {
  margin-top: 12px;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
/* 見出しの下に引く1本。中央から左右へ伸びる。
   合図（is-in）は、囲んでいる .section__head が受け取る。 */
.section__ja::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 28px auto 0;
  background: var(--c-beam);
  transform: scaleX(0);
  transition: transform .9s var(--ease) .25s;
}
.section__head.is-in .section__ja::after { transform: scaleX(1); }

.section__read {
  max-width: 30em;
  margin-inline: auto;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.section__note {
  max-width: 30em;
  margin: 48px auto 0;
  font-size: clamp(14px, 1.5vw, 15px);
  line-height: 1.9;
  color: var(--c-ink-weak);
}

/* ---------- 4. Header & Footer ---------- */
/* 下の内容が透けて ZEXNS と重ならないよう、面を持たせる。
   地のグラデーションは上端が純黒なので、ここを黒で塗っても継ぎ目は見えない。 */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--header-h);
  background: var(--c-black);
  border-bottom: 1px solid transparent;
  transition: border-color .6s var(--ease);
}
body.is-landed .site-header { border-bottom-color: var(--c-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: var(--gutter);
}
/* ロゴは画像にせず文字で組んでいる。
   字形をSVGに書き出すと、閲覧環境にフォントがない場合に崩れるため。 */
.logo {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
}

.site-footer {
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.site-footer__inner { padding-block: 64px 56px; }
.site-footer__brand {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1;
}
.site-footer__read {
  display: block;
  margin-top: 12px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--c-ink-weak);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 40px;
  font-size: 14px;
}
.site-footer__nav a {
  color: var(--c-ink-mid);
  transition: color .3s var(--ease);
}
.site-footer__nav a:hover { color: var(--c-ink); }
.site-footer__copy {
  margin-top: 40px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--c-ink-weak);
}

/* ---------- 5. Opening ---------- */
/* 画面の中央に貼り付けたまま、スクロールに合わせて縮んでヘッダーへ収まる。
   位置合わせに transform を使っているので、
   動きのキーフレームにも中央へ寄せる分を必ず含めること
   （含め忘れると、動き終わりに左上へ跳ねる）。 */
.brand {
  position: fixed;
  left: 50%;
  /* 縦の位置と大きさは、スクロール量に応じて main.js が px で上書きする */
  top: 50%;
  z-index: 100;                 /* ヘッダーより前面 */
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-size: clamp(48px, 12vw, 132px);
  font-weight: 700;
  line-height: 1;
  /* letter-spacing の余りは最後の文字の右側に付くため、
     同じ量を字下げして左右のつり合いを取る */
  letter-spacing: .16em;
  text-indent: .16em;
  white-space: nowrap;
  opacity: 0;
  animation: brandFadeIn 1.5s var(--ease) .3s forwards;
}
@keyframes brandFadeIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); filter: blur(12px); }
  to   { opacity: 1; transform: translate(-50%, -50%);              filter: blur(0); }
}

/* Xだけ、5文字が出そろってから青に変わる */
.brand__x {
  position: relative;
  animation: xToBlue .8s var(--ease) 1.9s forwards;
}
@keyframes xToBlue { to { color: var(--c-beam); } }

/* Xの中心から上下へ伸びる線。
   横位置は、この span の中心から字送りの余りの半分だけ左へ戻した位置。
   letter-spacing の余りは字の右側に付くため、
   span の中心と字形の中心はその半分ずれている。 */
.brand__beam {
  position: absolute;
  left: calc(50% - .08em);
  top: 0;
  bottom: 0;
  width: 0;
}
.brand__beam::before,
.brand__beam::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 2px;
  /* 画面の端まで必ず届く長さ。
     .brand が position:fixed なので、はみ出してもスクロール範囲は広がらない */
  height: 120vh;
  background: var(--c-beam);
  transform: scaleY(0);
}
/* 伸びるときは字の側が起点、消えるときは外側の端が起点。
   起点が前後で逆になるので、消える動きのキーフレームには
   transform-origin も含めている。 */
.brand__beam::before {
  bottom: calc(100% + .1em);
  transform-origin: bottom;
  animation: beamGrow 1.1s var(--ease) 2.8s forwards,
             beamUpVanish 1.6s var(--ease-even) 5.8s forwards;
}
.brand__beam::after {
  top: calc(100% + .1em);
  transform-origin: top;
  animation: beamGrow 1.1s var(--ease) 2.8s forwards,
             beamDownVanish 1.6s var(--ease-even) 5.8s forwards;
}
@keyframes beamGrow { to { transform: scaleY(1); } }
@keyframes beamUpVanish {
  from { transform-origin: top; transform: scaleY(1); }
  to   { transform-origin: top; transform: scaleY(0); }
}
@keyframes beamDownVanish {
  from { transform-origin: bottom; transform: scaleY(1); }
  to   { transform-origin: bottom; transform: scaleY(0); }
}

/* 順に現れる文。行は貼り付けず、そのまま流す。
   1行ずつの間隔（margin-top）は main.js が画面の高さから決める。 */
.lead-slot { position: static; }
/* 線を下へぶら下げるので、位置の基準にしている */
.lead-band { position: relative; }
.lead {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  text-align: center;
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(10px);
  transition: opacity 1.5s var(--ease),
              transform 1.5s var(--ease),
              filter 1.5s var(--ease);
}
.lead.is-in { opacity: 1; transform: none; filter: blur(0); }

/* 文と文をつなぐ線。その文が現れ終わったら下へ伸び、以後そのまま残る。
   長さは main.js が決める（次の文の手前まで届かせる）。 */
.lead-line {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  width: 2px;
  height: 150px;
  margin-left: -1px;
  background: var(--c-beam);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease), opacity .6s var(--ease);
}
.lead-band.is-line .lead-line { opacity: 1; transform: scaleY(1); }

/* ---------- 5b. 入口（トップページの行き先） ---------- */
/* 上から下へ読ませる並び。最後の文から伸びた線が、そのままここへ入る。
   横幅いっぱいを押せる範囲にしているので、スマホでも押しやすい。 */
.entry { padding: 0 var(--gutter) clamp(96px, 12vw, 150px); }
.entry__list {
  max-width: var(--container);
  margin-inline: auto;
  border-top: 1px solid var(--c-line);
}
.entry__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 38px) 56px;
  border-bottom: 1px solid var(--c-line);
  transition: background-color .4s var(--ease);
}
.entry__item:hover { background: var(--c-veil); }
/* 英語を小さく上に、日本語を大きく下に。見出しと同じ組み方 */
.entry__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.entry__en {
  font-family: var(--font-en);
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: .18em;
  /* 字送りの余りは最後の文字の右に付く。同じ分だけ字下げして中央にそろえる */
  text-indent: .18em;
  color: var(--c-ink-weak);
}
.entry__ja {
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
/* 文字を中央に置くため、矢印は流れから外して右端に固定する。
   中に入れると、そのぶん文字が左へ寄ってしまう。 */
.entry__arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1;
  color: var(--c-ink-weak);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.entry__item:hover .entry__arrow {
  transform: translate(10px, -50%);
  color: var(--c-ink);
}

/* ---------- 6. 3本の柱（理念ページ） ---------- */
.pillar {
  max-width: 32em;
  margin: 72px auto 0;
}
.pillar__item { position: relative; }
.pillar__item + .pillar__item { margin-top: 116px; }

/* 柱と柱をつなぐ青い縦線。
   前の文のすぐ下（18px）から始めて、下へ伸ばす。
   トップページで文と文をつないでいる線と、始まる位置も間隔もそろえている。

   線はその柱の下にぶら下げているので、
   柱が現れきってから伸びはじめるよう1.1秒遅らせる。
   結果として「前の文が出る → 線が伸びる → 次の文が出る」の順になる。 */
.pillar__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  width: 2px;
  height: 56px;
  margin-left: -1px;
  background: var(--c-beam);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease) 1.1s;
}
.pillar__item.is-in::after { transform: scaleY(1); }
.pillar__num {
  font-family: var(--font-en);
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  /* 字送りの余りは最後の文字の右に付く。同じ分だけ字下げして中央にそろえる */
  text-indent: .14em;
  color: var(--c-ink);
}
.pillar__title {
  margin-top: 16px;
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}
.pillar__text {
  margin-top: 20px;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.pillar__text + .pillar__text { margin-top: 16px; }
/* 太字は色を変えず、太さだけで示す。
   青は線と番号にだけ使うと決めているため */
.pillar__text strong {
  font-weight: 700;
  color: var(--c-ink);
}

/* ---------- 7. Service ---------- */
.plan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 64px;
  /* 枠線を1本ずつ引くと角で二重になるので、
     すき間（gap 1px）に下の色を透かして線に見せている */
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.plan__item {
  padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 40px);
  background: var(--c-veil);
}
.plan__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--c-ink-weak);
}
.plan__title {
  margin-top: 10px;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: .04em;
}
.plan__title::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 20px auto;
  background: var(--c-line-strong);
}
.plan__text {
  max-width: 24em;
  margin-inline: auto;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
  color: var(--c-ink-mid);
}
/* 箇条書きは、中央に置いた塊の中で行頭をそろえる。
   一行ずつ中央にそろえると、行頭が階段状になって読みにくい。 */
.plan__list { margin-top: 24px; }
.plan__list li {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.1;
}
.plan__list li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--c-beam);
}

/* ---------- 7b. プラン ---------- */
/* 金額そのものを主役にする。月額を大きく出し、初期費用はその下に置く。
   枠は薄いままにして、上端の青い線と数字の大きさで見せる。 */
.price {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: 64px;
}
.price__item {
  position: relative;
  padding: clamp(44px, 5vw, 64px) clamp(20px, 3vw, 40px) clamp(36px, 4vw, 48px);
  border: 1px solid var(--c-line);
  background: var(--c-veil);
  transition: border-color .4s var(--ease),
              background-color .4s var(--ease),
              transform .4s var(--ease);
}
.price__item:hover {
  border-color: var(--c-line-strong);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-4px);
}
/* 上端の青い線。カードが現れたときに中央から左右へ伸びる */
.price__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--c-beam);
  transform: scaleX(0);
  transition: transform .9s var(--ease) .2s;
}
.price.is-in .price__item::before { transform: scaleX(1); }
.price__item:nth-child(2)::before { transition-delay: .45s; }

.price__index {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-ink);
}
.price__title {
  margin-top: 14px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* プランの中身の説明。金額の前に、何が付くのかを伝える */
.price__desc {
  max-width: 24em;
  margin: 16px auto 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.95;
  color: var(--c-ink-mid);
}

.price__hero { margin-top: clamp(28px, 3.5vw, 44px); }
/* 説明が入っている側は、そのぶん上の余白を詰める */
.price__desc + .price__hero { margin-top: clamp(20px, 2.4vw, 28px); }
/* 費目が2つあるときは横に並べる。
   狭い画面で入りきらなければ、そのまま下へ折り返す */
.price__heroes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(20px, 4vw, 48px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
.price__desc + .price__heroes { margin-top: clamp(20px, 2.4vw, 28px); }
.price__heroes .price__hero { margin-top: 0; }
.price__label {
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
}
.price__num {
  display: block;
  margin-top: 6px;
  font-family: var(--font-en);
  /* 見出しの「制作費」と同じ寸法にそろえる */
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}
.price__unit {
  margin-left: 4px;
  /* 数字と同じ大きさで見せる。字形は日本語の書体のまま */
  font-family: var(--font);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
}

/* 初期費用など、月額以外の項目 */
.price__rows {
  display: inline-block;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  text-align: left;
}
.price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding: 8px 0;
}
.price__row dt {
  font-size: clamp(14px, 1.5vw, 15px);
  letter-spacing: .04em;
  white-space: nowrap;
}
.price__row dd {
  font-family: var(--font-en);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* 制作費のほかに月額がかかることを、金額の下に添える */
.price__plus {
  margin-top: 10px;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-ink-mid);
}

/* 金額に幅があるときの「〜」。数字と同じ大きさだと目立ちすぎる */
.price__wave {
  margin: 0 2px;
  font-size: .7em;
  vertical-align: .08em;
}
.price__row dd .price__unit {
  font-size: clamp(12px, 1.4vw, 14px);
  margin-left: 2px;
}

/* ---------- 8. Flow ---------- */
.flow {
  margin-top: 64px;
  border-top: 1px solid var(--c-line);
}
.flow__item {
  padding: 32px 8px;
  border-bottom: 1px solid var(--c-line);
}
.flow__num {
  font-family: var(--font-en);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--c-ink);
}
.flow__title { margin-top: 8px; }
.flow__title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}
.flow__text {
  max-width: 32em;
  margin: 10px auto 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
  color: var(--c-ink-mid);
}

/* ---------- 9. Works ---------- */
.work {
  max-width: 40em;
  margin: 64px auto 0;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 48px);
  border: 1px solid var(--c-line);
  background: var(--c-veil);
}
.work__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.9;
  color: var(--c-ink-weak);
}
/* 掲載の許可をいただいた店名。ふりがなは下に小さく添える。 */
.work__client {
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  /* 字送りの余りは最後の文字の右に付く。同じ分だけ字下げして中央にそろえる */
  text-indent: .14em;
}
.work__client-read {
  display: block;
  margin-top: 12px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--c-ink-weak);
}
.work__title {
  margin-top: 24px;
  font-size: clamp(20px, 2.6vw, 29px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
}
.work__text {
  max-width: 32em;
  margin: 24px auto 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.work__detail {
  max-width: 32em;
  margin: 32px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.1;
}
.work__detail dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--c-ink);
}
.work__detail dd + dt { margin-top: 22px; }
.work__detail dd { color: var(--c-ink-mid); }
/* 実際に公開しているサイトへの入口。別のタブで開く。
   問い合わせの「相談してみる」を主役にしたいので、こちらは枠だけの形にする。 */
.work__site { margin-top: 32px; }
.work__site .btn {
  max-width: 100%;
  /* 画面が狭いとき、URL は日本語のように折り返せない。
     左右の余白と字の大きさを詰めて、はみ出しを防ぐ */
  padding: 0 clamp(20px, 4vw, 36px);
  font-family: var(--font-en);
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  letter-spacing: .04em;
}
.work__site .btn__arrow { font-size: .9em; }
.work__site .btn:hover .btn__arrow { transform: translate(3px, -3px); }

/* 押したときに青と黒のグラデーションで満たす。
   グラデーションそのものは transition で移り変わらないため、
   背面に一枚敷いて、その濃さだけを動かしている。
   isolation で重なりの基準をボタン自身にし、z-index:-1 が
   ページの背景まで潜らないようにしている。 */
.work__site .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.work__site .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg,
              var(--c-beam) 0%,
              var(--c-blue) 45%,
              var(--c-black) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
/* :active は指で触れているあいだ。:hover はマウス、
   :focus-visible はキーボードで送ったとき */
.work__site .btn:hover::before,
.work__site .btn:focus-visible::before,
.work__site .btn:active::before { opacity: 1; }

/* 効果をうたう記述には、条件が変われば結果も変わることを添える。
   根拠のない効果の断定は、景品表示法上の問題（優良誤認）になるため。 */
.work__note {
  max-width: 30em;
  margin: 28px auto 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-ink-weak);
}

/* ---------- 10. Contact / Button / Form ---------- */
.cta { margin-top: 48px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s var(--ease),
              border-color .3s var(--ease),
              color .3s var(--ease);
}
.btn--primary { background: var(--c-ink); color: var(--c-black); }
.btn--primary:hover { background: var(--c-ink-mid); }
.btn--ghost { border-color: var(--c-line-strong); color: var(--c-ink); }
.btn--ghost:hover { border-color: var(--c-ink); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn__arrow {
  font-family: var(--font-en);
  transition: transform .3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.form {
  max-width: 34em;
  margin: 48px auto 0;
}
/* 打った文字だけは左そろえのまま。
   中央にすると、打つたびに文字が左右へ動いて書いている場所を見失う。 */
.form__input { text-align: left; }
.form__row { margin-top: 28px; }
.form__label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}
.form__req {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--c-line-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-ink-mid);
  vertical-align: 2px;
}
.form__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--c-line);
  border-radius: 0;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 17px;          /* 16px 未満だと iOS が入力時に拡大する */
  line-height: 1.7;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.form__input::placeholder { color: var(--c-placeholder); }
.form__input:focus {
  outline: none;
  background: rgba(255, 255, 255, .1);
  border-color: var(--c-ink);
}
.form__input--area { resize: vertical; }
.form__input.is-error { border-color: #ff8080; }
.form__error {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #ff8080;
}
.form__submit { margin-top: 40px; text-align: center; }
.form__note {
  max-width: 34em;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-weak);
}
.form__done { margin-top: 48px; }
.form__done:focus { outline: none; }
.form__done-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .02em;
}
.form__done-text {
  max-width: 40em;
  margin: 14px auto 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
  color: var(--c-ink-mid);
}

/* ---------- 11. Page（下層ページ） ---------- */
.page {
  padding-top: calc(var(--header-h) + clamp(64px, 9vw, 120px));
  padding-bottom: clamp(80px, 10vw, 140px);
  text-align: center;
}
/* ページの冒頭に置く一文。見出しより下、本文より大きい。
   下へ線を伸ばして、次の文へ視線を送る。
   トップページで文と文をつないでいる線と同じ役目。 */
.page__lead {
  position: relative;
  max-width: 24em;
  margin: 44px auto 0;
  padding-bottom: 88px;
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
}
.page__lead::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 2px;
  height: 56px;
  margin-left: -1px;
  background: var(--c-beam);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease) .35s;
}
.page__lead.is-in::after { transform: scaleY(1); }
.page__lead + .page__read {
  margin-top: 0;
  /* 上の線が伸びきってから出る */
  transition-delay: .9s;
}

.page__read {
  max-width: 30em;
  margin: 32px auto 0;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.page__back { margin-top: 56px; font-size: 15px; }
.page__back a {
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.page__back a:hover { border-bottom-color: var(--c-ink); }

/* 規約や方針の本文。読ませる文章なので、ここだけ左そろえ */
.terms {
  max-width: 34em;
  margin: 48px auto 0;
}
.terms h2 {
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 700;
  letter-spacing: .04em;
}
.terms h2:first-child { margin-top: 0; }
.terms p,
.terms li {
  margin-top: 16px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.1;
  color: var(--c-ink-mid);
}
.terms ul { margin-top: 8px; }
.terms li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--c-line-strong);
}
.terms__date {
  margin-top: 56px;
  font-size: 14px;
  color: var(--c-ink-weak);
}

/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
  .plan,
  .price { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }

  .br-sp { display: inline; }
  .br-nl { display: none; }

  .lead { line-height: 1.55; }
  .section__head { margin-bottom: 36px; }
  .section__ja::after { margin-top: 22px; }

  .flow__item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 28px 4px;
  }
  .flow__num { grid-row: auto; }

  .site-footer__nav { gap: 12px 20px; }
}

/* 幅の狭い端末（320px級）だけ、文を一回り小さくする。
   「誰も予想できない、新しい未来へ。」を1行に収めるため。
   360px以上では既定の20pxのまま1行に収まる。 */
@media (max-width: 345px) {
  .lead { font-size: 18px; }
}

/* ---------- 13. Reduced motion ---------- */
/* 「視差効果を減らす」設定の方には動きを出さない。
   ただし内容は必ず見えている状態にする。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .brand {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: none;
    animation: none;
  }
  .brand__x { color: var(--c-beam); animation: none; }
  /* 線は最後に消えるものなので、動きを出さない場合は最初から出さない */
  .brand__beam { display: none; }

  body.has-intro::before { opacity: 1; animation: none; }

  .lead, .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .page__lead + .page__read { transition-delay: 0s; }
  .lead-line { transition: none; }
  /* 青い線は伸ばさず、最初から引かれた状態にする */
  .section__ja::after,
  .page__lead::after,
  .pillar__item:not(:last-child)::after {
    transform: none;
    transition: none;
  }
}