/* ==========================================================================
   Natch Design portfolio — style.css（2026-09 リデザイン）

   デザインの考え方
   - キャッチコピーは「その魅力を、伝わる形に。」
     ファーストビューは写真を使わず、太い和文の見出しを画面幅いっぱいに組んで主役にする。
   - 各セクションの背景に大きな英字（WORKS / SERVICE など）を敷く。
     背景と同系色の薄い色にして読みを邪魔せず、スクロールに合わせて少し横に流れる。
   - 色は徳島の2色から取る。文字と濃色面は「阿波藍」、差し色は「すだち」。
     すだち色は文字色には使わず（明るすぎて読めないため）、面・丸・マーカーにだけ使う。
   - カード（影つきの箱）・グラデーション・ぼかしは使わない。
     セクションごとに背景色（紙 → 藍 → 紙 → すだち）を切り替えてリズムをつくる。

   目次
   01. トークン / ベース
   02. レイアウト共通
   03. ヘッダー・メニュー
   04. ボタン・リンク
   05. セクション見出し
   06. トップ：ファーストビュー
   07. 背景の大きな英字
   08. トップ：制作実績（流れる帯）
   10. できることと料金
   11. 進め方
   12. Natch Designについて（トップ）
   13. ご相談（すだち色の面）
   14. フッター
   15. 下層ページ共通の見出し
   16. 制作実績一覧
   17. 制作実績詳細
   18. 料金ページ
   19. Aboutページ
   20. 文章ページ（プライバシーポリシー）
   21. お問い合わせフォーム
   22. 画像モーダル
   23. 動き（表示時・ホバー）
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. トークン / ベース
   -------------------------------------------------------------------------- */
:root {
  /* 紙：すだちの緑にわずかに寄せた明るいグレー。黄みのある生成りは使わない */
  --paper: #f4f5f0;
  --paper-2: #e6e9df;
  /* 文字色は黒ではなく阿波藍 */
  --ink: #1b2a4e;
  --ink-2: #4b5570;
  --ink-3: #5e6780; /* 小さな補足文字用。紙の上でコントラスト 5:1 */
  --line: #cdd1d6;

  /* 差し色：すだち。面・丸・マーカー専用（文字色にはしない） */
  --sudachi: #cadf45;

  /* 旧トークン名との互換（番号などの小さな強調は藍の太字で表す） */
  --shu: var(--sudachi);
  --shu-text: var(--ink);

  /* 濃色面：阿波藍 */
  --ai: #1b2a4e;
  --ai-deep: #121d38;
  --on-ai: #f4f5f0;
  --on-ai-2: #aeb8cc;
  --on-ai-line: rgba(244, 245, 240, 0.18);

  /* 書体は Zen Kaku Gothic New（見出し・数字）と Noto Sans JP（本文）の2つだけ。
     英字用の書体を別に足すと「小さな英字ラベル」の多用につながるため、数字も和文書体で組む */
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-latin: var(--font-head);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --header-h: 4rem;
  --radius: 4px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 固定ヘッダーの下にアンカー先が隠れないように */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

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

a {
  color: inherit;
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  /* 見出しは文節で改行し、行末に1文字だけ残る折り返しを防ぐ（対応ブラウザのみ） */
  word-break: auto-phrase;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.u-nowrap {
  display: inline-block;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   02. レイアウト共通
   -------------------------------------------------------------------------- */
.l-container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(5rem, 11vw, 9rem);
}

.section--tint {
  background: var(--paper-2);
}

/* 藍の面。料金など「きちんと読ませたい」情報をここに置く */
.section--dark {
  background: var(--ai);
  color: var(--on-ai);
}

/* 直前のページ見出しと続けて読ませたいとき */
.section--flush-top {
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   03. ヘッダー・メニュー
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  transition: transform 0.4s var(--ease-out), box-shadow 0.3s;
}

/* 下にスクロール中は隠し、上に戻したら出す（作品を見る面積を広く取るため） */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

.site-header__logo img {
  width: auto;
  height: 1.25rem;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  /* 「メニュー」の文字を隠して線だけになったため、押せる範囲を幅でも確保する（線は右端にそろえたまま） */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0 0 0.5rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 0.8125rem/1 var(--font-body);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.menu-button__icon {
  position: relative;
  width: 1.5rem;
  height: 0.5rem;
}

.menu-button__icon::before,
.menu-button__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}

.menu-button__icon::before {
  top: 0;
}

.menu-button__icon::after {
  top: calc(100% - 1.5px);
}

.menu-button[aria-expanded="true"] .menu-button__icon::before {
  top: calc(50% - 0.75px);
  transform: rotate(20deg);
}

.menu-button[aria-expanded="true"] .menu-button__icon::after {
  top: calc(50% - 0.75px);
  transform: rotate(-20deg);
}

/* スマホ・タブレット：全面のメニュー。目次と同じ番号つきで並べる */
.global-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.global-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.global-nav__list {
  border-top: 1px solid var(--ink);
}

.global-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
}

.global-nav__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.global-nav__cta::after {
  content: "→";
  font-family: var(--font-latin);
}

@media (min-width: 1024px) {
  :root {
    --header-h: 4.75rem;
  }

  .site-header__logo img {
    height: 1.375rem;
  }

  .menu-button {
    display: none;
  }

  .global-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
  }

  .global-nav__list {
    display: flex;
    gap: 2rem;
    border: 0;
  }

  .global-nav__list a {
    position: relative;
    padding: 0.5rem 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* 現在地・ホバーは下線で示す（色を増やさない） */
  .global-nav__list a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.2rem;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease-out);
  }

  .global-nav__list a:hover::after,
  .global-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* ヘッダーで唯一色のある要素にして、どのページからも相談の入口が分かるようにする */
  .global-nav__cta {
    gap: 0.75rem;
    padding: 0.7rem 1.1rem;
    background: var(--sudachi);
    color: var(--ink);
    font-size: 0.875rem;
    transition: background 0.25s, color 0.25s;
  }

  .global-nav__cta:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

/* --------------------------------------------------------------------------
   04. ボタン・リンク
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn__arrow {
  font-family: var(--font-latin);
  font-weight: 500;
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(0.35rem);
}

.btn:hover {
  border-color: var(--sudachi);
  background: var(--sudachi);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* LINEボタン：LINEだと一目で分かるよう、公式の緑を小さな印にだけ使う */
.btn__line-mark {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: #06c755;
  vertical-align: 0.1em;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s, gap 0.35s var(--ease-out);
}

.text-link::after {
  content: "→";
  font-family: var(--font-latin);
  font-weight: 500;
}

.text-link:hover {
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   05. セクション見出し
   番号や英字の小見出しは付けず、太い和文の見出しだけで区切る
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section-head__title {
  font-size: clamp(2.125rem, 6vw, 4.25rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.section-head__lead {
  max-width: 34em;
  color: var(--ink-2);
}

.section--dark .section-head__lead {
  color: var(--on-ai-2);
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
  }

  .section-head__title {
    grid-column: 1 / 8;
  }

  .section-head__lead {
    grid-column: 8 / 13;
    padding-bottom: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   06. トップ：ファーストビュー
   写真を置かず、見出しを画面幅いっぱいまで大きく組んで主役にする。
   2行を左と右にずらし、視線が左上から右下へ流れるようにする。
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* 見出しがヘッダーに詰まって見えないよう、上下の余白を広めに取る */
  /* スマホで縦に詰まって見えないよう、下限を大きめにしている */
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(5.5rem, 10vw, 8rem);
  overflow: hidden;
}

/* 文字は背景の円より手前に置く */
.hero > .l-container {
  position: relative;
  z-index: 1;
}

/* 背景の飾り：ロゴの円と点。写真を使わないファーストビューに、ブランドの形で奥行きを足す。
   線は罫線と同じ薄い色にして、見出しの読みを邪魔しない。
   背景の飾りなので、位置は絶対配置で決める（レイアウトには影響させない） */
.hero__ring {
  position: absolute;
  top: 4rem;
  right: -14%;
  width: 64vw;
  aspect-ratio: 1;
  /* スマホは円の右側が画面外に出るため、円ごと回して、点の最初の位置を画面内（円の上側）に持ってくる */
  transform: rotate(-70deg);
  pointer-events: none;
}

.hero__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__ring-line {
  fill: none;
  /* 罫線の色だと薄すぎて飾りとして効かないため、藍を薄く重ねて存在感を出す */
  stroke: var(--ink);
  stroke-opacity: 0.22;
  stroke-width: 0.6;
}

.hero__ring-dot {
  fill: var(--sudachi);
}

/* 2つ目の円の上を、黄緑の点と逆向きに回る小さな輪 */
.hero__ring-sub {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-opacity: 0.5;
  stroke-width: 0.6;
}

/* 回転の中心は大きい円の中心 */
.hero__ring-orbit,
.hero__ring-drift {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* 小さな輪は2つ目の円（中心 100,150）の周りを回る */
.hero__ring-orbit--sub {
  transform-origin: 50% 75%;
}

/* 2つの点がぶつかったときの演出を出す層（main.js で .hero の中に作る） */
.hero__burst {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* はじける黄緑の輪 */
.hero__burst-ring {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  margin: -3.75rem 0 0 -3.75rem;
  /* 黄緑は背景になじみやすいため、線を太めにして、はじけた瞬間が分かるようにする */
  border: 3px solid var(--sudachi);
  border-radius: 50%;
  animation: burst-ring 0.9s var(--ease-out) forwards;
}

/* 飛び散る粒。飛ぶ方向と距離は main.js で --dx / --dy に入れる */
.hero__burst-bit {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem 0 0 -0.3rem;
  border-radius: 50%;
  background: var(--sudachi);
  animation: burst-bit 0.8s var(--ease-out) forwards;
}

.hero__burst-bit--ink {
  background: var(--ink);
  opacity: 0.6;
}

@keyframes burst-ring {
  from {
    opacity: 1;
    transform: scale(0.1);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes burst-bit {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.4);
  }
}

/* ぶつかった瞬間、2つの点が一瞬ふくらむ */
.hero__ring-dot,
.hero__ring-sub {
  transform-box: fill-box;
  transform-origin: center;
}

/* 表示時のフェード（.js 側の指定）を上書きするため .js を付けて優先度を上げ、見えている状態を保つ */
.js .hero__ring-dot.is-hit,
.js .hero__ring-sub.is-hit {
  opacity: 1;
  animation: dot-hit 0.5s var(--ease-out);
}

.hero__ring-sub.is-hit {
  fill: var(--sudachi);
}

@keyframes dot-hit {
  40% {
    transform: scale(1.8);
  }
}

/* タブレット：スマホ用の大きさのままだと円がファーストビューの下にはみ出すため、小さくする */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__ring {
    top: 3rem;
    right: -4%;
    width: 42vw;
  }
}

@media (min-width: 1024px) {
  /* 画面の端ではなく、コンテンツ（l-container）の右端を基準に置く。
     画面の端基準だと、広い画面ほど円がキャッチコピーから離れていくため。
     円の右端はコンテンツの右端より12rem外側。上に少しずらして、円の下側が2行目「形に。」にかからないようにする */
  .hero__ring {
    top: -6rem;
    right: calc(max(var(--gutter), (100% - var(--container)) / 2) - 12rem);
    width: min(36vw, 29rem);
    transform: none;
  }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 見出しの文字サイズは、コンテナの幅（cqi）から逆算する。
   2行とも6文字。1行目は左、2行目は右にそろえて段違いにするため、
   1行が幅いっぱいにならない大きさにして、ずれが見えるようにする（スマホ約90%・PC約78%） */
.hero__stage {
  container-type: inline-size;
  /* 上の小さな文字は見出しの添え書きなので、見出しに近づけてひとまとまりに見せる */
  margin-top: clamp(2.5rem, 4vw, 3rem);
}

.hero__title {
  font-size: 15cqi;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero__line {
  display: block;
  overflow: hidden;
  /* 行の途中で折り返すと段違いの組み方が崩れるため、行の中では改行させない */
  white-space: nowrap;
  /* 行ごとにせり上げるため、はみ出しを隠す。句読点が切れないよう下に余裕を持たせる */
  padding-bottom: 0.06em;
}

.hero__line--2 {
  text-align: right;
}

.hero__text {
  display: inline-block;
}

/* 「伝わる」にだけ、すだち色のマーカーを引く */
.hero__mark {
  background: linear-gradient(var(--sudachi), var(--sudachi)) 0 78% / 100% 42% no-repeat;
}

.hero__foot {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3.5rem, 7vw, 5rem);
}

.hero__lead {
  max-width: 30em;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 2;
  /* 「デザイ／ン」「見る人／が」のような語の途中での改行を避ける（中央寄せの幅で特に目立つため） */
  word-break: auto-phrase;
}

/* 対応ツールのバッジ：説明文の補足なので、小さく細い枠で控えめに並べる */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.hero__tags li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

@media (min-width: 768px) {
  .hero__title {
    /* 高さでも頭打ちにし、背の低い画面で見出しが画面を埋め尽くさないようにする */
    font-size: min(13cqi, 22vh);
    line-height: 1.08;
  }
}

/* PC：1行目は左から、2行目は右から同じだけ内側に入れる。
   見出し全体を中央にまとめつつ、1行目と2行目の段違い（約1.5文字分）は残すため。
   文字の大きさ12cqi × 内側への寄せ0.4em ＝ 幅の4.8%（説明文の左端をこの値でそろえる） */
@media (min-width: 1024px) {
  .hero__title {
    font-size: min(12cqi, 22vh);
  }

  .hero__line--1 {
    padding-left: 0.4em;
  }

  .hero__line--2 {
    padding-right: 0.4em;
  }

  /* 見出しの上の小さな文字も、1行目の書き出しにそろえる */
  .hero__meta {
    padding-left: 4.8%;
  }
}

/* PC：説明文とボタンを横に並べる。
   見出しの段違い（1行目は左、2行目は右）に合わせ、説明文は1行目の書き出しの下、ボタンは2行目の終わりの下に置く。
   左右とも幅の4.8%内側に入れて、端まで振り分けたときの間延びを防ぐ */
@media (min-width: 1024px) {
  .hero__foot {
    display: flex;
    justify-content: space-between;
    padding-inline: 4.8%;
    align-items: flex-end;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .hero__intro {
    flex: 0 1 auto;
  }

  .hero__actions {
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   07. 背景の大きな英字
   セクションの名前を背景に大きく敷く。背景と同系色の薄い色にし、見出しの読みを邪魔しない。
   main.js でスクロールに合わせて少しだけ横に動かす（セクションの切り替わりを感じさせるため）
   -------------------------------------------------------------------------- */
.has-bg-word {
  position: relative;
  overflow: clip;
}

.has-bg-word > .l-container {
  position: relative;
  z-index: 1;
}

/* 上端はセクションの内側に収め、文字の頭が切れないようにする（左右は流れる動きのため端で切れてよい） */
/* 左端は、画面が広くてもコンテンツから離れすぎないよう、コンテンツの左端より6.25rem外側を下限にする。
   1440px幅以下では従来どおり画面の左端（-0.04em）に置かれ、それより広い画面ではコンテンツと一緒に内側へ寄る */
.bg-word {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  left: max(-0.04em, calc((100% - var(--container)) / 2 - 6.25rem));
  z-index: 0;
  color: var(--paper-2);
  font-family: var(--font-head);
  font-size: clamp(5rem, 21vw, 19rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* 動かさない英字（トップの制作実績）は、ほかの英字のように横に流れて位置が変わらず、
   画面の左端に張り付いて見えるため、見出しと同じ左端（コンテナの端）にそろえる */
.bg-word--static {
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* 背景色ごとに、英字の色を「背景より一段だけ濃い（明るい）色」にする */
.section--tint .bg-word {
  color: #d9ded0;
}

.section--dark .bg-word {
  color: rgba(244, 245, 240, 0.05);
}

.contact-band .bg-word {
  color: rgba(27, 42, 78, 0.08);
}

/* 下層ページの見出しの背景：日本語の大見出し（h1）と同じ行に並べ、右端・下端をそろえる。
   英字は l-container の中に置き、コンテナを1列のグリッドにして
   grid-row で「h1の行」を位置の基準にしている（h1の高さが変わっても追従させるため） */
.page-head > .l-container {
  display: grid;
}

.page-head.has-bg-word .bg-word {
  /* 絶対配置の要素は終わりの線が auto だとコンテナ端まで広がるため、開始・終了の線を両方書く */
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  top: auto;
  /* 動かさずに固定し、コンテナの右端に合わせる */
  right: 0;
  bottom: 0;
  left: auto;
  /* コンテナ（z-index:1）の中で、見出しの文字より奥に敷く */
  z-index: -1;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 0.8;
}

/* --------------------------------------------------------------------------
   08. トップ：制作実績（流れる帯）
   文字だけのファーストビューの直後に、作品が横にゆっくり流れる帯を置く。
   画像の高さだけそろえ、横長・縦長・正方形の比率はそのまま見せる。
   背景の英字（WORKS）は置かない：横に動くものが2つ重なると落ち着かないため
   -------------------------------------------------------------------------- */
.works-top {
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* 見出し・説明・リンクを1段にまとめ、帯までの距離を縮める */
.section-head--inline {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head__link {
  justify-self: start;
}

@media (min-width: 1024px) {
  .section-head--inline .section-head__title {
    grid-column: 1 / 6;
  }

  .section-head--inline .section-head__lead {
    grid-column: 6 / 11;
  }

  .section-head--inline .section-head__link {
    grid-column: 11 / 13;
    justify-self: end;
    margin-bottom: 0.6rem;
  }
}

.marquee {
  --marquee-h: 11.5rem;
  --marquee-gap: 1rem;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  /* 1周分（リスト1つ分）動かすと、2つ目のリストが1つ目と同じ位置に来てつながる。
     速度は main.js が帯の長さから計算して --marquee-duration に入れる */
  animation: marquee-scroll var(--marquee-duration, 90s) linear infinite;
}

/* マウスを乗せる・キーボードで選ぶ・停止ボタンで止める */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee__list {
  display: flex;
  align-items: flex-start;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}

.marquee__item a {
  display: block;
  text-decoration: none;
}

.marquee__item img {
  width: auto;
  height: var(--marquee-h);
  border-radius: 2px;
  transition: opacity 0.3s;
}

/* Webサイトはモックアップ画像（背景透過）なので枠は付けない。端末の影が紙色の背景にそのまま落ちる */

.marquee__caption {
  display: block;
  max-width: 100%;
  margin-top: 0.6rem;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 止まっている帯の中で、指している作品以外を少し下げて、選んでいる感覚をつくる */
.marquee:hover .marquee__item img {
  opacity: 0.55;
}

.marquee .marquee__item a:hover img,
.marquee .marquee__item a:focus-visible img {
  opacity: 1;
}

.marquee__item a:hover .marquee__caption {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.marquee__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

.marquee__hint {
  color: var(--ink-3);
  font-size: 0.75rem;
}

.marquee__toggle {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 700 0.8125rem/1 var(--font-body);
  cursor: pointer;
}

.marquee__toggle:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (min-width: 768px) {
  .marquee {
    --marquee-h: 15rem;
    --marquee-gap: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .marquee {
    --marquee-h: 17.5rem;
  }
}

/* 動きを減らす設定の端末：流さず、手で横スクロールして見る */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }

  .marquee__track {
    animation: none;
  }

  .marquee__list[aria-hidden="true"],
  .marquee__toggle,
  .marquee__hint {
    display: none;
  }

  .marquee__list {
    padding-left: var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   10. できることと料金
   料金はサービスとセットで見せる（別セクションに分けると行き来が増えるため）
   -------------------------------------------------------------------------- */
.services__layout {
  display: grid;
  gap: 2.5rem;
}

.services__intro .section-head {
  margin-bottom: 1.5rem;
}

.services__note {
  margin-top: 1.25rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.services__intro .text-link {
  margin-top: 1.5rem;
}

.service-list {
  border-top: 1px solid var(--ink);
}

.service {
  display: grid;
  gap: 1rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.service__title {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: clamp(1.125rem, 4.8vw, 1.3125rem);
}

.service__title span {
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 600;
}

.service__text {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.service__tools {
  margin-top: 0.6rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.service__prices {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.service__price {
  display: grid;
  gap: 0.1rem;
}

.service__price-label {
  color: var(--ink-3);
  font-size: 0.75rem;
  line-height: 1.5;
}

.service__price-value {
  font-family: var(--font-latin);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.service__price-value small {
  margin-left: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
}

.service__price-text {
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .service {
    grid-template-columns: minmax(0, 1fr) 13rem;
    column-gap: 2.5rem;
  }

  .service__title {
    grid-column: 1 / 3;
  }
}

@media (min-width: 1024px) {
  .services__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .services__intro {
    grid-column: 1 / 5;
  }

  /* 左の見出しはスクロールしても残し、右の一覧と対応させる */
  .services__intro-inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .services__intro .section-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .services__intro .section-head__title,
  .services__intro .section-head__lead {
    grid-column: auto;
    padding: 0;
  }

  /* 左の狭い列に収まるサイズに抑える */
  .services__intro .section-head__title {
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  }

  .services__body {
    grid-column: 6 / 13;
  }
}

/* 藍の面に置いたときの色 */
.section--dark .service-list {
  border-top-color: var(--on-ai);
}

.section--dark .service {
  border-bottom-color: var(--on-ai-line);
}

.section--dark .service__text,
.section--dark .service__tools,
.section--dark .service__price-label,
.section--dark .services__note {
  color: var(--on-ai-2);
}

.section--dark .service__title span {
  color: var(--sudachi);
}

/* 料金の数字だけ、すだち色で拾えるようにする */
.section--dark .service__price-value {
  color: var(--sudachi);
}

/* --------------------------------------------------------------------------
   11. 進め方
   -------------------------------------------------------------------------- */
.flow__list {
  display: grid;
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  padding-bottom: 2rem;
}

/* スマホ：左に縦の線を引き、順番に進むことを見せる */
.flow__step::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  bottom: 0.4rem;
  left: 1rem;
  width: 1px;
  background: var(--line);
}

.flow__step:last-child::before {
  display: none;
}

.flow__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sudachi);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.flow__title {
  font-size: 1.125rem;
  line-height: 2rem;
}

.flow__text {
  grid-column: 2;
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.8;
}

.flow__text ul {
  display: grid;
  gap: 0.2rem;
}

.flow__text li {
  padding-left: 1em;
  text-indent: -1em;
}

.flow__text li::before {
  content: "・";
}

.flow__note {
  margin-top: 0.4rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  /* PC：横一列の時間軸にする */
  .flow__list--row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .flow__list--row .flow__step {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .flow__list--row .flow__step::before {
    top: 1rem;
    right: -1.5rem;
    bottom: auto;
    left: 2rem;
    width: auto;
    height: 1px;
  }

  .flow__list--row .flow__title {
    margin-top: 1.25rem;
    line-height: 1.5;
  }

  .flow__list--row .flow__text {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   12. Natch Designについて（トップ）
   -------------------------------------------------------------------------- */
.statement-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* ラベルの前にも、サイト共通の「すだちの丸」を置く */
.statement-label::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--sudachi);
}

/* ページ中盤の見せ場：大きな一文 */
.statement {
  margin-bottom: clamp(3.5rem, 8vw, 6.5rem);
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.statement__sub {
  display: block;
  margin-top: 1.25rem;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.profile {
  display: grid;
  gap: 2.5rem;
}

.profile__photo {
  justify-self: center;
  /* スマホで写真が画面の大半を占め、本文まで遠くなっていたため小さめにする */
  width: min(60%, 15rem);
}

.profile__text {
  display: grid;
  gap: 1.1rem;
  max-width: 36em;
  color: var(--ink-2);
}

.profile__facts {
  display: grid;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.profile__facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.profile__facts dt {
  color: var(--ink-3);
}

.profile__more {
  margin-top: 2rem;
}

/* タブレット：縦積みだと本文が左に寄って右側が空くため、写真と本文を横に並べる */
@media (min-width: 768px) and (max-width: 1023px) {
  .profile {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 2.5rem;
    align-items: start;
  }

  .profile__photo {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .statement {
    width: 85%;
  }

  .profile {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }

  .profile__photo {
    grid-column: 1 / 5;
    width: 100%;
  }

  .profile__body {
    grid-column: 6 / 12;
  }
}

/* --------------------------------------------------------------------------
   13. ご相談（すだち色の面）
   ページの最後だけ明るい色の面にして、「ここで相談できる」ことをはっきり見せる
   -------------------------------------------------------------------------- */
.contact-band {
  padding-block: clamp(5rem, 11vw, 8.5rem);
  background: var(--sudachi);
  color: var(--ink);
}

.contact-band__title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.3;
}

.contact-band__body {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.contact-band__text {
  display: grid;
  gap: 1rem;
  max-width: 34em;
}

.contact-band__actions {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.contact-band .btn:hover {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.contact-band .btn--ghost {
  background: transparent;
  color: var(--ink);
}

.contact-band .btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* タブレットでも本文とボタンを左右に並べる。縦積みだと本文だけ左に寄って右側が空くため */
@media (min-width: 768px) {
  .contact-band__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
  }

  .contact-band__text {
    grid-column: 1 / 7;
  }

  .contact-band__actions {
    grid-column: 8 / 13;
  }
}

/* --------------------------------------------------------------------------
   14. フッター
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: 3.5rem 2rem;
  background: var(--ai-deep);
  color: var(--on-ai-2);
  font-size: 0.8125rem;
}

.site-footer__inner {
  display: grid;
  gap: 2.5rem;
}

.site-footer__logo {
  width: auto;
  height: 1.25rem;
  margin-bottom: 1rem;
}

.site-footer__invoice {
  margin-top: 0.5rem;
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 0.5rem 2.5rem;
}

.site-footer__nav a {
  color: var(--on-ai);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__copy {
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-ai-line);
  font-family: var(--font-latin);
  font-size: 0.75rem;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .site-footer__brand {
    grid-column: 1 / 6;
  }

  .site-footer__nav {
    grid-column: 8 / 13;
  }

  .site-footer__copy {
    grid-column: 1 / 13;
  }
}

/* --------------------------------------------------------------------------
   15. 下層ページ共通の見出し
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.page-head__title {
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 1.25;
}

.page-head__body {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.page-head__lead {
  max-width: 36em;
  color: var(--ink-2);
}

/* 1文ごとに改行したい説明文（お問い合わせ）：1文が1行に収まるよう幅を広げる。
   幅が足りないスマホでは、言葉の途中で折り返さないようにする */
.page-head__lead--wide {
  max-width: none;
  word-break: auto-phrase;
}

/* ページ内の目次（料金ページなど）。トップの目次と同じ作り */
.page-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.page-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.page-index a:hover {
  border-bottom-color: currentColor;
  color: var(--shu-text);
}

.page-index__count {
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: 0.75rem;
}

@media (min-width: 1024px) {
  .page-head__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .page-head__lead {
    grid-column: 1 / 7;
  }

  .page-head__lead--wide {
    grid-column: 1 / -1;
  }

  .page-index {
    grid-column: 8 / 13;
    align-content: start;
  }
}

/* 404ページ：説明文の下に、戻り先のボタンとリンクを横に並べる（PCでも説明文の下に全幅で置く） */
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   16. 制作実績一覧
   -------------------------------------------------------------------------- */
.works-cat {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.works-cat + .works-cat {
  padding-top: 0;
}

.works-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
}

.works-cat__title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.works-cat__title small {
  margin-left: 0.75rem;
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: 0.8125rem;
  font-weight: 500;
}

.works-cat__note {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.works-grid {
  display: grid;
  gap: 3rem 2rem;
}

.works-grid--web {
  gap: 3.5rem 2rem;
}

.work-item {
  display: grid;
  gap: 1rem;
  align-content: start;
  text-decoration: none;
}

.work-item__img {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.work-item__img img {
  width: 100%;
  transition: transform 0.9s var(--ease-out);
}

.work-item:hover .work-item__img img {
  transform: scale(1.03);
}

.work-item--web .work-item__img img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.work-item__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  row-gap: 0.25rem;
}

.work-item__no {
  grid-row: 1 / 3;
  padding-top: 0.35rem;
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 600;
}

.work-item__title {
  font-size: 1.1875rem;
  line-height: 1.45;
  /* auto-phrase で1語扱いになった長い作品名が、スマホの2列表示で列幅を押し広げないようにする保険 */
  overflow-wrap: anywhere;
}

.work-item__title span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease-out);
}

.work-item:hover .work-item__title span {
  background-size: 100% 1px;
}

.work-item__meta {
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* スマホ：縦長・正方形の画像は2列にして、1件あたりの縦の長さを抑える */
.works-grid--three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1rem;
}

.works-grid--three .work-item__title {
  font-size: 0.9375rem;
}

.works-grid--landscape {
  grid-template-columns: 1fr;
}

.work-item__badge {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--shu-text);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .works-grid--web {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-item__title {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  .works-cat__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .works-cat__layout .works-cat__head {
    grid-column: 1 / 13;
  }

  /* Webサイトは2列で、右列を半段下げて互い違いにする */
  .works-grid--web {
    grid-column: 1 / 13;
    column-gap: 4rem;
    row-gap: 5rem;
  }

  .works-grid--web > :nth-child(even) {
    margin-top: 7rem;
  }

  .works-grid--web .work-item__title {
    font-size: 1.375rem;
  }

  .works-grid--three {
    grid-column: 1 / 13;
    column-gap: 2.5rem;
  }

  /* 正方形のバナーは大きくなりすぎないよう列を詰める */
  .works-grid--square {
    grid-column: 1 / 11;
  }
}

/* --------------------------------------------------------------------------
   17. 制作実績詳細
   -------------------------------------------------------------------------- */
.case-head {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.case-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.case-head__no {
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.case-head__no span {
  color: var(--ink-3);
  font-weight: 500;
}

.case-head__type {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.case-head__title {
  margin-top: 0.25rem;
  font-weight: 900;
  font-size: clamp(2.25rem, 7.5vw, 5rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.case-head__title--long {
  font-size: clamp(1.625rem, 4.4vw, 3rem);
  line-height: 1.4;
}

.case-head__body {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink);
}

.case-head__lead {
  max-width: 36em;
  color: var(--ink-2);
}

.case-head__demo {
  margin-top: 1.5rem;
}

.case-head__demo-note {
  margin-top: 0.6rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}

/* 制作概要：アイコンは使わず、罫線で区切った仕様表にする */
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.spec div {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.spec dt {
  color: var(--ink-3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.spec dd {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}

.spec__tags {
  grid-column: 1 / -1;
}

.spec__tags dd {
  color: var(--ink-2);
  font-weight: 400;
}

@media (min-width: 1024px) {
  .case-head__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .case-head__intro {
    grid-column: 1 / 7;
  }

  .spec {
    grid-column: 8 / 13;
    align-self: start;
  }
}

/* メインの画面：ノートPC＋スマホのモックアップ（背景透過）を中央に置く */
.case-visual {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem);
  /* 端末の下半分にだけ色面を敷き、机に置いたような安定感とページの区切りをつくる */
  background: linear-gradient(var(--paper) 55%, var(--paper-2) 55%);
}

/* モックアップ画像は幅1688px。高画質の画面でもぼやけにくいよう、表示は最大1040pxまでにする */
.case-visual__mockup {
  max-width: 1040px;
  margin-inline: auto;
}

.case-visual__mockup img {
  width: 100%;
}

/* SNS・画像制作のメイン画像 */
.case-visual--graphic .case-visual__single {
  margin-inline: auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--line);
}

.case-visual--thumbnail .case-visual__single {
  max-width: 960px;
}

.case-visual--banner .case-visual__single {
  max-width: 640px;
}

/* Instagram：横スワイプで1枚ずつ見る（投稿の見られ方に合わせる） */
.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.carousel__slide {
  flex: 0 0 72%;
  scroll-snap-align: start;
}

.carousel__slide img {
  width: 100%;
  border-radius: 2px;
}

.carousel__slide figcaption {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: 0.75rem;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}

.carousel__hint {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.carousel__buttons {
  display: flex;
  gap: 0.5rem;
}

.carousel__button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.carousel__button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.carousel__button:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (min-width: 768px) {
  .carousel__slide {
    flex-basis: 38%;
  }
}

@media (min-width: 1024px) {
  .carousel__track {
    gap: 1.5rem;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .carousel__slide {
    flex-basis: calc((100% - 1.5rem * 3) / 3.5);
  }
}

/* 本文＋デザインのポイント（欄外注） */
.case-about__layout {
  display: grid;
  gap: 3rem;
}

.case-about__title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.case-about__text {
  display: grid;
  gap: 1.1rem;
  max-width: 36em;
}

.case-points {
  counter-reset: point;
}

.case-points__title {
  margin-bottom: 0.5rem;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.case-points li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}

.case-points li::before {
  counter-increment: point;
  content: counter(point, decimal-leading-zero);
  grid-row: 1 / 3;
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 2.1;
}

.case-points h3 {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.case-points p {
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.85;
}

@media (min-width: 1024px) {
  .case-about__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .case-about__main {
    grid-column: 1 / 7;
  }

  .case-points {
    grid-column: 8 / 13;
  }
}

/* ページの流れ：上から順にスクリーンショットを並べ、縦線で順番をつなぐ */
.case-flow__title {
  margin-bottom: 0.5rem;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.case-flow__lead {
  margin-bottom: 2.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.case-flow__list {
  display: grid;
}

.case-flow__item {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: 0 0 3rem 2.75rem;
}

.case-flow__item::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0;
  left: 0.55rem;
  width: 1px;
  background: var(--line);
}

.case-flow__item:last-child::before {
  display: none;
}

.case-flow__step {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.case-flow__caption h3 {
  font-family: var(--font-latin), var(--font-head);
  font-size: 1.125rem;
  line-height: 1.6;
}

.case-flow__caption small {
  display: block;
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.case-flow__caption p {
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.85;
}

.case-flow__shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  cursor: zoom-in;
}

.case-flow__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  transition: transform 0.9s var(--ease-out);
}

.case-flow__shot:hover img {
  transform: scale(1.02);
}

.case-flow__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  background: rgba(33, 31, 29, 0.82);
  color: var(--paper);
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .case-flow__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .case-flow__intro {
    grid-column: 1 / 5;
  }

  .case-flow__intro-inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .case-flow__list {
    grid-column: 5 / 13;
  }

  .case-flow__item {
    grid-template-columns: 15rem 1fr;
    column-gap: 2rem;
    padding-bottom: 4rem;
  }
}

/* 前後の作品へ */
.case-pager {
  border-top: 1px solid var(--ink);
}

.case-pager__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.case-pager a {
  display: grid;
  gap: 0.2rem;
  padding: 1.75rem 0;
  text-decoration: none;
}

.case-pager__next {
  justify-items: end;
  text-align: right;
}

.case-pager__label {
  color: var(--ink-3);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.case-pager__name {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2.4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
  transition: color 0.2s;
}

.case-pager a:hover .case-pager__name {
  color: var(--shu-text);
}

.case-pager__all {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 1.25rem 0;
  font-size: 0.875rem;
}

.case-pager__all .text-link {
  display: inline-flex;
  padding: 0 0 0.2rem;
}

/* --------------------------------------------------------------------------
   18. 料金ページ
   -------------------------------------------------------------------------- */
.price-group + .price-group {
  margin-top: clamp(4.5rem, 10vw, 7.5rem);
}

/* 料金ページは説明文の長さがグループごとに違う。下端そろえのままだと、長い説明文（SNS）ほど
   見出しが押し下げられて上の空きが広がるため、見出しと説明文を上端でそろえる */
@media (min-width: 1024px) {
  .price-group > .section-head {
    align-items: start;
  }

  .price-group > .section-head .section-head__lead {
    padding-top: 0.9rem;
    padding-bottom: 0;
  }
}

/* プランは箱にせず、縦の罫線で段組みにする */
.plans {
  display: grid;
  border-top: 1px solid var(--ink);
}

.plan {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
}

.plan__head {
  display: grid;
  gap: 0.35rem;
}

.plan__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.375rem;
}

.plan__flag {
  color: var(--shu-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
}

.plan__spec {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.plan__price {
  font-family: var(--font-latin);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.plan__price small {
  margin-left: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
}

.plan__text {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.plan__list-title {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
}

.check-list {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.check-list li {
  position: relative;
  padding-left: 1.4rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.1rem;
  width: 0.7rem;
  height: 0.35rem;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.note {
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.8;
}

.note--spaced {
  margin-top: 1.25rem;
}

/* SNS画像制作の共通内容：3プランに同じ内容を繰り返さず、上に1回だけ示す */
.sns-common {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.check-list--inline {
  gap: 0.35rem 2rem;
}

@media (min-width: 768px) {
  .check-list--inline {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
}

@media (min-width: 768px) {
  .plans--two {
    grid-template-columns: 1fr 1fr;
  }

  .plans--two .plan:first-child {
    padding-right: 2.5rem;
    border-right: 1px solid var(--line);
  }

  .plans--two .plan:last-child {
    padding-left: 2.5rem;
  }

  .plans--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .plans--three .plan {
    padding-inline: 1.75rem;
  }

  .plans--three .plan:first-child {
    padding-left: 0;
  }

  .plans--three .plan:last-child {
    padding-right: 0;
  }

  .plans--three .plan + .plan {
    border-left: 1px solid var(--line);
  }

  .plans--three .plan__price {
    font-size: 1.875rem;
  }
}

/* 2プランの比較・維持費 */
.compare {
  margin-top: 2.5rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper-2);
}

.compare__title {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}

.compare__grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.compare__grid h4 {
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.compare__grid p {
  color: var(--ink-2);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .compare__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

/* オプション：項目名と金額の一覧（点線はうるさく見えるため使わず、行の罫線だけで区切る） */
.menu-list {
  border-top: 1px solid var(--line);
}

.menu-list div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.menu-list dt {
  flex: 1 1 auto;
}

/* 金額と「/ 1ページ」などの単位を別の列に分け、単位がない行も同じ幅の空き列を持たせる。
   こうすると単位の有無にかかわらず、金額の右端（〜）が縦にそろう */
.menu-list dd {
  display: grid;
  grid-template-columns: auto 4.5rem;
  align-items: baseline;
  justify-items: end;
  margin-left: auto;
  font-family: var(--font-latin);
  font-weight: 600;
}

.menu-list dd small {
  justify-self: start;
  padding-left: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
}

.option-block {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

.option-block__title {
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .option-block {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .option-block__title {
    grid-column: 1 / 4;
  }

  .option-block__body {
    grid-column: 4 / 11;
  }
}

/* ご確認ください：用語と説明の2段組 */
.terms {
  display: grid;
  border-top: 1px solid var(--ink);
}

.terms div {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.terms dt {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
}

.terms dd {
  display: grid;
  gap: 0.6rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .terms div {
    grid-template-columns: 16rem 1fr;
    column-gap: 3rem;
  }
}

/* よくある質問 */
.faq {
  border-top: 1px solid var(--ink);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: "Q";
  flex-shrink: 0;
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-weight: 600;
}

/* 開閉の印：＋が−に変わる */
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease-out);
}

.faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transform: translateY(-50%) rotate(180deg);
}

.faq details p {
  padding: 0 0 1.5rem 2rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .price-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .price-split > .section-head {
    grid-column: 1 / 13;
  }

  .price-split__body {
    grid-column: 3 / 13;
  }
}

/* --------------------------------------------------------------------------
   19. Aboutページ
   左に章の見出し（柱）、右に読む列、の本の組み方
   -------------------------------------------------------------------------- */
.about-hero {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink);
}

.about-hero__catch {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.55;
}


@media (min-width: 1024px) {
  .about-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
  }

  .about-hero__catch {
    grid-column: 1 / 10;
  }
}

.chapter {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
}

.chapter__label {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.chapter__label span {
  color: var(--shu-text);
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.chapter__label h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.prose {
  display: grid;
  gap: 1.25rem;
  font-size: 1.0625rem;
  line-height: 2.05;
}

.prose p {
  color: var(--ink-2);
}

.prose__lead {
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.9;
}

.prose__lead--spaced {
  margin-bottom: 1.5rem;
}

.chapter__figure {
  max-width: 34rem;
  margin-top: 1.5rem;
}

.chapter__figure img {
  width: 100%;
  border-radius: 2px;
}

.chapter__figure figcaption {
  margin-top: 0.6rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}

@media (min-width: 1024px) {
  .chapter {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .chapter__label {
    grid-column: 1 / 4;
    flex-direction: column;
    gap: 0.5rem;
  }

  .chapter__label-inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .chapter__body {
    grid-column: 4 / 12;
  }

  /* 3つの動詞を並べる章だけ、本文列を右端まで広げる */
  .chapter--wide .chapter__body {
    grid-column: 4 / 13;
  }

}

/* 対応できること：3つの動詞を大きく */
.verbs {
  display: grid;
  border-top: 1px solid var(--ink);
}

.verbs article {
  display: grid;
  gap: 0.6rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.verbs h3 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.3;
}

.verbs p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.verbs article:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .verbs {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
  }

  .verbs article {
    align-content: start;
    padding: 1.75rem 1.5rem 2rem;
    border-bottom: 0;
  }

  .verbs article:first-child {
    padding-left: 0;
  }

  .verbs article + article {
    border-left: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   20. 文章ページ（プライバシーポリシー）
   -------------------------------------------------------------------------- */
.doc {
  display: grid;
  gap: 0;
  max-width: 48rem;
  border-top: 1px solid var(--ink);
}

.doc section {
  display: grid;
  gap: 0.6rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.doc h2 {
  font-size: 1.125rem;
}

.doc p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   21. お問い合わせフォーム（クラス名は contact/functions.php と共通）
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: 3rem;
}

.contact-aside {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  font-size: 0.9375rem;
}

.contact-aside h2 {
  font-size: 1.125rem;
}

.contact-aside ul {
  display: grid;
  gap: 0.5rem;
  color: var(--ink-2);
}

.contact-aside li {
  padding-left: 1em;
  text-indent: -1em;
}

.contact-aside li::before {
  content: "・";
}

.contact-aside__line {
  padding: 1.5rem;
  background: var(--paper-2);
}

.contact-aside__line p {
  margin-bottom: 1rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .contact-layout > .contact-form-card,
  .contact-layout > .contact-confirm-card,
  .contact-layout > .contact-complete-card {
    grid-column: 1 / 8;
  }

  .contact-aside {
    grid-column: 9 / 13;
  }

  .contact-aside__inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    display: grid;
    gap: 1.5rem;
  }
}

/* 確認画面・エラー時（PHPで出力）の外枠。フォームを読みやすい幅に収める */
.contact-form-section {
  padding-bottom: clamp(5rem, 11vw, 9rem);
}

.contact-form-inner {
  width: min(100% - var(--gutter) * 2, 52rem);
  margin-inline: auto;
}

.contact-form-alert {
  grid-column: 1 / -1;
  padding: 1rem 1.25rem;
  border-left: 3px solid #b3261e;
  background: #fbeeec;
  color: #8c1d18;
  font-size: 0.9375rem;
  font-weight: 700;
}

.contact-form-grid {
  display: grid;
  gap: 1.75rem;
  border-top: 1px solid var(--ink);
  padding-top: 2rem;
}

/* 1行目に「項目名＋必須／任意」を横に並べ、入力欄・注記は2行目以降に幅いっぱいで置く。
   項目名は文字だけ（タグなし）でグリッドの1マス目になるため、列を2つ用意して「必須」を2マス目に入れる */
.contact-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.contact-field > span,
.contact-field > small {
  align-self: center;
  justify-self: start;
}

.contact-field > input,
.contact-field > select,
.contact-field > textarea,
.contact-field > em,
.contact-field > .contact-checks {
  grid-column: 1 / -1;
}

.contact-field span,
.contact-field legend span {
  margin-left: 0.5rem;
  color: var(--shu-text);
  font-size: 0.75rem;
}

.contact-field small,
.contact-field legend small {
  margin-left: 0.5rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 500;
}

.contact-field legend {
  padding: 0;
  margin-bottom: 0.75rem;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid #bdb8ae;
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.7 var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-field select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23211f1d' stroke-width='1.5'/%3E%3C/svg%3E") right 1rem center / 12px no-repeat;
}

.contact-field textarea {
  min-height: 12rem;
  resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--sudachi);
}

.contact-field em {
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
}

.contact-checks {
  display: grid;
  gap: 0.6rem;
  font-weight: 400;
}

.contact-checks label,
.contact-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  cursor: pointer;
}

/* 「ご希望のサービス」は .contact-field の中にあるため、入力欄用の min-height・padding が
   チェックボックスにもかかり、箱だけ縦に大きくなって文字とずれていた。ここで打ち消す */
.contact-checks input,
.contact-privacy input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0.25rem 0 0;
  padding: 0;
  accent-color: var(--ink);
}

.contact-privacy-note {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.contact-hp {
  position: absolute;
  left: -9999px;
}

.form-error {
  color: #b3261e;
  font-size: 0.8125rem;
  font-weight: 700;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: 700 0.9375rem/1.5 var(--font-body);
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.contact-submit:hover {
  border-color: var(--shu-text);
  background: var(--shu-text);
}

.contact-submit--secondary {
  background: transparent;
  color: var(--ink);
}

.contact-submit--secondary:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}

.contact-confirm-list {
  border-top: 1px solid var(--ink);
}

.contact-confirm-list div {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-confirm-list dt {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.contact-confirm-list dd {
  overflow-wrap: anywhere;
}

.contact-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-complete-card {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
  color: var(--ink-2);
}

@media (min-width: 768px) {
  .contact-form-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }

  .contact-field--full {
    grid-column: 1 / -1;
  }

  .contact-checks {
    grid-template-columns: 1fr 1fr;
  }

  .contact-confirm-list div {
    grid-template-columns: 11rem 1fr;
    gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   22. 画像モーダル
   -------------------------------------------------------------------------- */
.work-image-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.work-image-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.work-image-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 33, 48, 0.86);
}

.work-image-modal__dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(100%, 1100px);
  max-height: calc(100svh - 2rem);
  background: var(--paper);
}

.work-image-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.work-image-modal__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.work-image-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 500 0.8125rem/1 var(--font-body);
  cursor: pointer;
}

.work-image-modal__close:hover {
  background: var(--ink);
  color: var(--paper);
}

/* 縦に長いページ全体のスクリーンショットを、モーダル内でスクロールして見る */
.work-image-modal__image {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.work-image-modal__image img {
  width: 100%;
}

/* --------------------------------------------------------------------------
   23. 動き（表示時・ホバー）
   - ファーストビューは1文字ずつ順に立ち上がり（main.js で文字を包む）、最後に「伝わる」へマーカーが引かれる。
     読む順番どおりに見せ、いちばん伝えたい言葉で視線を止めるため
   - 背景の大きな英字は、スクロールに合わせて少し横に流れる（main.js）
     全要素をフェードインさせる動きは入れない（どこを見ればよいかが分からなくなるため）
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mark-in {
  from {
    background-size: 0% 42%;
  }
  to {
    background-size: 100% 42%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.js .hero__line > * {
  transform: translateY(105%);
  animation: rise-in 0.9s var(--ease-out) forwards;
}

.js .hero__line--1 > * {
  animation-delay: 0.1s;
}

.js .hero__line--2 > * {
  animation-delay: 0.35s;
}

/* キャッチコピー：main.js で1文字ずつ包み（is-split）、少し傾いた状態から順にせり上げる。
   行ごとの動きより細かく、文字が次々に立ち上がるリッチな見え方にする */
@keyframes char-rise {
  to {
    transform: none;
  }
}

.js .hero__title.is-split .hero__line > * {
  transform: none;
  animation: none;
}

.hero__char {
  display: inline-block;
}

.hero__line--1 {
  --line-delay: 0.15s;
}

.hero__line--2 {
  --line-delay: 0.5s;
}

.js .is-split .hero__char {
  transform: translateY(115%) rotate(10deg);
  transform-origin: left bottom;
  animation: char-rise 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
  animation-delay: calc(var(--line-delay) + var(--i) * 0.055s);
}

.js .hero__mark {
  background-size: 0% 42%;
  animation: mark-in 0.6s 1.3s var(--ease-out) forwards;
}

.js .hero__foot {
  opacity: 0;
  animation: fade-in 0.8s 1.4s ease forwards;
}

/* 背景の円：読み込み時に上から時計回りに線が描かれ、描き終わると点が現れて円の上を回り続ける */
@keyframes ring-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ring-orbit {
  to {
    transform: rotate(360deg);
  }
}

.js .hero__ring-line {
  /* 線の長さ(1)より少し長い区切りにして、描き終わりの継ぎ目に切れ目が残らないようにする */
  stroke-dasharray: 1.01 1;
  stroke-dashoffset: 1;
  animation: ring-draw 1.3s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* 2つ目の円：1つ目を描いている途中から描き始め、そのあと大きい円の中心の周りをゆっくり逆回りする。
   2つの円の交わる位置が少しずつ移り変わる */
.js .hero__ring-line--second {
  animation-delay: 0.5s;
}

.js .hero__ring-drift {
  animation: ring-orbit 26s linear infinite reverse;
}

.js .hero__ring-dot,
.js .hero__ring-sub {
  opacity: 0;
  animation: fade-in 0.4s 1.2s ease forwards;
}

/* 大きい点は約12秒で1周。2つの点がぶつかったときだけ、main.js ではじける演出を出す */
.js .hero__ring-orbit {
  animation: ring-orbit 12s 1.2s linear infinite;
}

.js .hero__ring-orbit--sub {
  animation: ring-orbit 9s 1.2s linear infinite reverse;
}

/* A. 進め方：01から順に番号が灯り、次の番号へ線が伸びる（main.js で is-motion / is-inview を付ける）
   1工程あたりの間隔は --flow-gap。番号が灯ってから、次の番号へ向けて線が伸びる */
.flow__list.is-motion {
  --flow-gap: 0.32s;
}

.flow__list.is-motion .flow__no {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.4s var(--ease-out);
  transition-delay: calc(var(--step) * var(--flow-gap));
}

.flow__list.is-inview .flow__no {
  background-color: var(--sudachi);
  box-shadow: inset 0 0 0 1px var(--sudachi);
  color: var(--ink);
}

/* 灰色の線の上に、濃い線を重ねて伸ばす（位置は灰色の線 ::before と同じ） */
.flow__list.is-motion .flow__step::after {
  content: "";
  position: absolute;
  top: 1.9rem;
  bottom: 0.4rem;
  left: 1rem;
  width: 1px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--flow-gap) linear;
  transition-delay: calc(var(--step) * var(--flow-gap) + 0.1s);
}

.flow__list.is-motion .flow__step:last-child::after {
  display: none;
}

.flow__list.is-inview .flow__step::after {
  transform: scaleY(1);
}

@media (min-width: 1024px) {
  /* PC：横一列の時間軸なので、線は横に伸ばす */
  .flow__list--row.is-motion .flow__step::after {
    top: 1rem;
    right: -1.5rem;
    bottom: auto;
    left: 2rem;
    width: auto;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .flow__list--row.is-inview .flow__step::after {
    transform: scaleX(1);
  }
}

/* B. 大きな見出し：行ごとに下からせり上がる（main.js で行を .reveal-line に包む）
   極太の文字の上下や句読点が枠で欠けないよう、見た目の行間は変えずに上下へ逃げを作る */
.reveal-line {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.reveal-line__text {
  display: block;
}

.is-motion > .reveal-line > .reveal-line__text {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--line) * 0.14s);
}

.is-inview > .reveal-line > .reveal-line__text {
  transform: none;
}

.is-motion > .reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease 0.45s;
}

.is-inview > .reveal-fade {
  opacity: 1;
}

/* C. 制作実績のカード：枠ごと少し下から浮き上がる（main.js で画像の読み込みを待ってから is-inview を付ける）。
   以前は画像だけを幕で開いていたが、空の枠が先に見えて中身が遅れて出るのがぎこちなかったため、カード全体を動かす */
.work-item.is-motion {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease var(--reveal-delay, 0s), transform 0.9s var(--ease-out) var(--reveal-delay, 0s);
}

.work-item.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  .js .hero__line > *,
  .js .hero__foot {
    transform: none;
    opacity: 1;
  }

  .js .hero__mark {
    background-size: 100% 42%;
  }

  /* 背景の円は描き終えた状態で止める（回り続ける動きは、時間を縮めると高速回転になるため止める） */
  .js .hero__ring-line {
    stroke-dashoffset: 0;
  }

  .js .hero__ring-dot,
  .js .hero__ring-sub {
    opacity: 1;
  }

  .js .hero__ring-orbit,
  .js .hero__ring-drift {
    animation: none;
  }
}

@media print {
  .site-header,
  .contact-band,
  .site-footer {
    display: none;
  }
}