/* ============================================================
   cor.praise — 共通スタイルシート
   DESIGN.md（Loftwork風：白/クリーム下地 + シグネチャーイエロー + 巨大見出し）に基づく
   全ページ（index.html / about.html / service.html / contact.html）から共通で読み込む
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* Color — Base */
  --color-bg: #ffffff;
  --color-bg-deep: #f4f1ea;   /* 特集・引用ブロック用の温かいクリーム */
  --color-line: #e5e5e5;

  /* Color — Brand
     ブランドパレット8色: #ffffff / #f4f1ea / #ffe600 / #c0a700 / #1a1a1a / #4a4a4a / #1a2040 / #ee4444
     白地に本文テキストとして置けるのは Ink(17.4:1) / Ink 2(8.9:1) / Navy(15.9:1) の3色のみ。
     Signature Yellow・Gold・Cream は白地で1.1〜2.4:1しかないため「面・罫線」専用とする。 */
  --color-yellow: #ffe600;
  --color-yellow-soft: #fff59a; /* マーカー・淡い強調（面として使う。文字色には使わない） */
  --color-gold: #c0a700;      /* 罫線・装飾・ロゴタイプ専用。白地の本文文字には使わない（2.39:1） */

  /* Color — Ink（純黒は使わない） */
  --color-ink: #1a1a1a;
  --color-ink-2: #4a4a4a;
  --color-ink-3: #4a4a4a;  /* 旧#8a8a8aは白地3.45:1でAA未達、かつパレット外だったためInk 2へ統合 */

  /* Color — Accent */
  --color-red: #ee4444;   /* 面・アイコン用。16px太字の文字に使うと白地3.79:1でAA未達になるため本文強調には使わない */
  --color-navy: #1a2040;  /* ブランドパレットのネイビー。ロゴの文字色・白地の小見出し文字に使用 */

  /* Font family */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;               /* 本文（Hiragino角ゴPro代替） */
  --font-jp-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;                       /* 見出し（見出ゴMB31代替） */
  --font-en: "Mulish", "Helvetica Neue", Arial, sans-serif;                                    /* 英字見出し・ナビ（proxima-nova代替） */
  --font-accent: "Libre Baskerville", Georgia, "Times New Roman", serif;                       /* セリフの小ラベル */

  /* Typography scale（サイズ / 行間） */
  --text-hero: 56px;          --lh-hero: 1.4;    --ls-hero: 0.01em; /* DESIGN.md指定76.8pxは2カラムHeroでは行数過多のため、Heading1相当まで抑制 */
  --text-hero-sm: 40px;       --lh-hero-sm: 1.35; /* モバイル用Hero見出し */
  --text-h2: 36px;            --lh-h2: 1.4;
  --text-h3: 24px;            --lh-h3: 1.4;
  --text-statement: 40px;     --lh-statement: 1.5;  --ls-statement: 0.045em; /* クロージングの標語 */
  --text-lead: 19.2px;        --lh-lead: 1.85;    /* Heroのサブコピー（2.0は間延びし、SPでCTAを画面外へ押し出していた） */
  --text-body: 16px;          --lh-body: 1.8;     /* 日本語本文の可読行間1.7〜1.8に合わせる */
  --text-nav: 15px;           --lh-nav: 1.5;
  --text-small: 14px;         --lh-small: 1.6;    /* 13pxは40〜60代の可読性に対して小さいため引き上げ */
  --text-label: 14px;         --lh-label: 1.6;    /* ゴールドのセリフ番号ラベル */

  /* Spacing scale */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 80px;
  --space-xxl: 120px;

  /* Radius（角丸ゼロの矩形が基調） */
  --radius: 0px;

  /* Container */
  --container-max: 1280px;
  --container-pad: 24px;

  /* 固定ヘッダーの高さ。body の上余白とアンカー着地位置もこの値を参照する */
  --header-height: 80px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 48px;
  }
}

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

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

body {
  font-family: var(--font-jp);
  background: var(--color-bg);
  color: var(--color-ink-2);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  line-break: strict;
  word-break: normal;
  /* ヘッダー固定分の余白（--header-height と必ず揃える） */
  padding-top: var(--header-height);
}

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

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

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

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-jp-heading);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

/* 意味の区切り単位で折り返す（カタカナ語・複合語の途中分断を防ぐ） */
.phrase {
  display: inline-block;
}

/* ---------- 3. 共通レイアウト（Container / Header / Footer） ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.site-logo {
  font-family: var(--font-en);
  font-size: var(--text-nav);
  font-weight: 800;
  color: var(--color-ink);
}

/* ヘッダーのロゴ画像。ヘッダーの高さに収まるよう高さを基準にする
   （フッターのロゴはテキストのままのため、header配下のみを対象にする） */
.site-header .site-logo {
  display: inline-flex;
  align-items: center;
}

.site-header .site-logo img {
  width: auto;
  height: 52px;
}

/* グローバルナビ */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.site-nav a {
  font-family: var(--font-en);
  font-size: var(--text-nav);
  font-weight: 700;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  /* ホバー時は、見出しで使っている蛍光マーカーと同じ表現を左から引く。
     .btn-primary と同じく、自身に重ね順の基準をつくって背面に敷く */
  .site-nav a {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding-inline: 4px;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0.1em;
    height: 0.5em;
    background: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }

  .site-nav a:hover::after,
  .site-nav a:focus-visible::after {
    transform: scaleX(1);
  }
}

/* SPはメニューが全幅の行になるため、マーカーではなく背景色で示す */
@media (max-width: 767px) {
  .site-nav a:hover {
    background: var(--color-bg-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after {
    transition: none;
  }
}

/* ハンバーガーボタン（SPのみ表示） */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bar {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle__bar::before {
  top: -7px;
}

.nav-toggle__bar::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    /* max-height:0 と overflow:hidden だけではリンクがフォーカス可能なまま残り、
       メニューを閉じていてもTabキーで「見えない3リンク」に入ってしまっていた。
       visibility:hidden でフォーカス対象から外す（閉じるアニメーション後に効かせる） */
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }

  .site-nav.is-open {
    max-height: 320px;
    visibility: visible;
    transition: max-height 0.25s ease, visibility 0s;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-xs);
  }

  .site-nav a {
    display: block;
    padding: var(--space-s) var(--container-pad);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}

.footer-top {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* 3カラムgridから1カラム＋罫線区切りへ統合。ブランド／メニュー／法的情報の
   「塊」が横に3つ並ぶ見え方をやめ、引き算の一貫性を保つ */
.footer-top > * {
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-line);
}

.footer-top > *:first-child {
  padding-top: 0;
  border-top: none;
}

.footer-brand .site-logo {
  display: inline-block;
}

/* フッターのロゴはテキストのまま、色だけロゴマークに合わせる。
   ドットだけゴールドにして、ロゴと同じ「cor.praise」の見え方を再現する。
   すぐ下の .footer-brand p（淡いグレー指定）に負けないよう詳細度を合わせる */
.footer-brand .footer-logo {
  color: var(--color-navy);
}

/* ロゴタイプの一部。WCAG 1.4.3 はロゴ・ブランド名を適用対象外としているため
   ゴールドのまま残す（本文テキストとしてのゴールド使用は別途Navyへ振り替え済み） */
.footer-logo__dot {
  color: var(--color-gold);
}

.footer-brand p {
  margin-top: var(--space-s);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-ink-3);
}

.footer-heading {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: 800;
  color: var(--color-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-nav ul,
.footer-legal ul {
  margin-top: var(--space-s);
  display: flex;
  flex-direction: column;
  /* リンク自身が上下12pxのタップ余白を持つため、gapは詰めても間隔は確保される */
  gap: 0;
}

.footer-nav a,
.footer-legal a {
  /* 行の高さは21pxしかなく、モバイル推奨44pxの半分だった。上下パディングで45pxを確保する */
  display: inline-block;
  padding-block: 12px;
  font-size: var(--text-nav);
  color: var(--color-ink-2);
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.footer-social {
  margin-top: var(--space-m);
  display: flex;
  gap: var(--space-s);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* モバイル推奨タップ領域44×44pxを満たす（旧40×40px） */
  width: 44px;
  height: 44px;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}

.footer-social a:hover {
  background: var(--color-bg-deep);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-m);
}

.footer-bottom p {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-ink-3);
}

/* ---------- 4. Hero ----------
   SP: 画像（<img>）を上、テキストパネルを下に積む縦積み構成（オーバーレイなし）
   PC: 画像を背景に敷き、テキストパネルを重ねるオーバーレイ構成
   ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-deep);
}

/* SP用の画像。
   <img>にすると display:none にしてもPCで読み込まれてしまうため、
   背景画像にしてSP幅のときだけダウンロードされるようにしている */
.hero-mobile-image {
  display: block;
  width: 100%;
  /* 4/3(375px幅で281px)ではファーストビューをほぼ使い切り、CTAが画面外に出ていたため縮める */
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-bg-in 0.9s ease forwards;
}

@media (max-width: 767px) {
  /* 先に共通（TOP）を指定し、あとから各ページの画像で上書きする */
  .hero .hero-mobile-image {
    background-image: url("../images/hero/sp-hero-img.webp");
  }

  .hero--service .hero-mobile-image {
    background-image: url("../images/hero/service-hero-img.webp");
  }

  .hero--about .hero-mobile-image {
    background-image: url("../images/hero/about-hero-img.webp");
  }

  .hero--contact .hero-mobile-image {
    background-image: url("../images/hero/contact-hero-img.webp");
  }
}

/* PC用：背景画像は疑似要素に分離し、テキストパネルと独立してフェードインさせる */
.hero::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (min-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 600px;
    padding-block: var(--space-l);
  }

  .hero-mobile-image {
    display: none;
  }

  .hero::before {
    display: block;
    background-image: url("../images/hero/pc-hero-img.webp");
    /* 画像が切れないよう拡大はせず、標準のcoverで表示する（パネル幅を絞ったことで被写体との重なりを回避） */
    background-size: cover;
    background-position: center center;
    animation: hero-bg-in 1.1s ease forwards;
  }

  /* Serviceページは背景画像だけ差し替える（位置・構造はTOPのheroと完全に共通化） */
  .hero--service::before {
    background-image: url("../images/hero/service-hero-img.webp");
  }

  /* Aboutページも同様に背景画像だけ差し替える */
  .hero--about::before {
    background-image: url("../images/hero/about-hero-img.webp");
  }

  /* Contactページも同様に背景画像だけ差し替える */
  .hero--contact::before {
    background-image: url("../images/hero/contact-hero-img.webp");
  }

  /* Service/About/Contactページはページ見出し用のheroのため、TOPより高さを抑える */
  .hero--service,
  .hero--about,
  .hero--contact {
    min-height: 420px;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 640px;
  }

  .hero--service,
  .hero--about,
  .hero--contact {
    min-height: 460px;
  }
}

.hero .container {
  /* flexコンテナ直下でmargin:autoによる中央寄せが効いてしまうため、幅いっぱいに固定する */
  width: 100%;
}

.hero-panel {
  position: relative;
  z-index: 1;
  /* SPでは画像下端に少しだけ被せる */
  margin-top: -28px;
  /* SPではheroに高さの余白が無く次のセクションと詰まって見えるため、下に余白を確保する */
  margin-bottom: var(--space-l);
  background: var(--color-bg);
  padding: var(--space-m);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-panel-in 0.8s ease forwards;
  animation-delay: 0.35s;
}

@media (min-width: 768px) {
  .hero-panel {
    margin-top: 0;
    /* PCはflex+min-heightで余白が確保されているため不要 */
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    max-width: 440px;
    padding: var(--space-l);
  }
}

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

@keyframes hero-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-mobile-image,
  .hero-panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero h1 {
  /* 40px固定では375px幅で「プロジェクトを」(283px)が見出し領域(279px)に収まらず、
     「を」だけが次行に落ちてマーカーが1文字の行に伸びていた。
     320px→28px / 375px→32px / 414px→35px となるよう可変にする */
  font-size: clamp(28px, 8.6vw, var(--text-hero-sm));
  line-height: var(--lh-hero-sm);
  letter-spacing: var(--ls-hero);
  overflow-wrap: normal;
}

@media (min-width: 768px) {
  .hero h1 {
    /* PC側のHero面積が大きく感じられるため、指定の56pxよりやや控えめに調整 */
    font-size: 44px;
    line-height: var(--lh-hero);
  }
}

.hero p {
  margin-top: var(--space-m);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
  max-width: 480px;
}

/* 蛍光マーカー風の強調（黒字が続くコピー・サブコピーにメリハリをつける）
   文字の下側だけにマーカー面を敷き、文字を塗りつぶさないようにする */
.hero h1 .highlight {
  background-image: linear-gradient(transparent 62%, var(--color-yellow-soft) 62%);
  padding-inline: 0.04em;
}

.hero .btn-primary {
  /* SPではCTAをファーストビュー内に収めるため余白を詰める */
  margin-top: var(--space-m);
}

@media (min-width: 768px) {
  .hero .btn-primary {
    margin-top: var(--space-l);
  }
}

/* ---------- 5. Services ---------- */
.services {
  background: var(--color-bg-deep);
  padding-block: var(--space-xl);
}

.services h2 {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: normal;
  /* 蛍光マーカー風の下線。他セクションの見出し装飾と共通のトーン */
  text-decoration-line: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.32em;
  text-decoration-skip-ink: none;
}

.service-grid {
  margin-top: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

/* 768〜939pxは2列。カードが3枚のため3枚目が下段左に取り残されて右に空白が残る。
   最終カードを2列ぶんに広げたうえで1列幅に制限し、中央に置いて均衡させる
   （gapは48pxなので1列幅 = 50% - 24px） */
@media (min-width: 768px) and (max-width: 939px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 24px);
    justify-self: center;
  }
}

/* 3列化の閾値を1024pxから940pxへ下げ、2列レンジそのものを短くする */
@media (min-width: 940px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  /* 左端に接する見出しタグが枠からはみ出さないように切り取る */
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.service-card:hover,
.service-card:focus-visible {
  border-color: var(--color-ink);
  box-shadow: 0 6px 16px rgba(26, 26, 26, 0.1);
}

.service-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-deep);
}

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

.service-card__body {
  /* 見出しのタグをカード左端まで届かせるため、左右の余白は内側の要素で持たせる。
     上だけ余白を取り、タグの上にカードの地色を見せる */
  padding: var(--space-m) 0 0;
}

.service-number {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-style: normal;
  color: var(--color-gold);
}

.service-card h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  /* タイトル行数が1〜2行で混在するため、タグの高さと本文の開始位置を3枚で揃える */
  min-height: 2lh;
}

.service-card p {
  /* 余白はカードではなくこの本文側で持たせる（タグを左端まで届かせるため） */
  padding: var(--space-m) var(--space-m) 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

@media (min-width: 1024px) {
  .service-card p {
    padding: var(--space-m) var(--space-l) 0;
  }
}

/* リンクであることの手がかりが本文末尾のインライン矢印だけだと、ホバーするまで
   気づかれにくかった（モバイルはホバーが無く尚更）。本文と分けた行に独立させる */
.service-card__more {
  display: block;
  margin-top: var(--space-s);
  padding: 0 var(--space-m) var(--space-m);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .service-card__more {
    padding: 0 var(--space-l) var(--space-l);
  }
}

.service-card__arrow {
  display: inline-block;
  margin-left: var(--space-xs);
  font-weight: 700;
  color: var(--color-ink);
  transition: transform 0.2s ease;
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
  transform: translateX(2px);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  /* 高さ23pxしかなくタップしにくかったため、推奨44pxを確保する */
  min-height: 44px;
  font-size: var(--text-nav);
  line-height: var(--lh-nav);
  font-weight: 700;
  color: var(--color-ink);
}

.service-link:hover {
  text-decoration: underline;
}

.service-link .link-arrow {
  transition: transform 0.2s ease;
}

.service-link:hover .link-arrow,
.service-link:focus-visible .link-arrow {
  transform: translateX(2px);
}

/* ---------- 5.4 TOP Achievements（Aboutの実績への導入セクション） ---------- */
.achievements {
  padding-block: var(--space-xl);
}

.achievements h2 {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: normal;
  /* Servicesと同じ蛍光マーカー風の下線で、サイト内の主要見出しの装飾を揃える */
  text-decoration-line: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.32em;
  text-decoration-skip-ink: none;
}

.achievement-grid {
  margin-top: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

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

.achievement-card {
  border: 1px solid var(--color-line);
  padding: var(--space-m) var(--space-l) var(--space-l);
}

.achievement-card__category {
  font-family: var(--font-accent);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-style: normal;
  /* Goldは白地で2.39:1のためAA未達（.home-about__tagline-en等と同じ理由でNavyを使用） */
  color: var(--color-navy);
}

.achievement-card h3 {
  margin-top: var(--space-xs);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}

/* 担当領域の羅列だけでは規模感が伝わらないため、実績カードにも件数・期間を明示する。
   数値の出所は about.html#projects の .project-case__stats と対応させること */
.achievement-card__stats {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
}

.achievement-card__stats span {
  font-size: var(--text-small);
  color: var(--color-ink-2);
}

.achievement-card__stats strong {
  font-family: var(--font-en);
  font-size: var(--text-nav);
  font-weight: 800;
  color: var(--color-ink);
}

/* ---------- 5.5 TOP About（Aboutページへの導入セクション） ---------- */
.home-about {
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-xl);
}

.home-about__grid {
  display: grid;
  gap: var(--space-l);
}

/* 768pxで2カラムにすると左カラムが約240pxしかなく、36pxの見出しが
   「実現する力 / へ。」のように語の途中で折り返していた。
   左カラムが見出し1行分（約324px）を確保できる1024pxから2カラムにする */
@media (min-width: 1024px) {
  .home-about__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-xl);
  }
}

.home-about__tagline-en {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 20px;
  /* ゴールドは白地で2.39:1しかなくAA未達。パレット内でNavy(15.85:1)に振り替える。
     セリフ体のイタリックは縦線が細く、比率以上に読みにくいため余裕を取る */
  color: var(--color-navy);
}

.home-about__heading {
  margin-top: var(--space-xs);
  /* 36px固定では375px幅で「「やりたい」という」(327px)が領域(327px)ぴったりになり折り返していた */
  font-size: clamp(26px, 8.5vw, var(--text-h2));
  line-height: var(--lh-h2);
}

.home-about__text {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.home-about__stance {
  margin-top: var(--space-m);
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.home-about__footer {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* footer内では.service-linkの上マージンをリセットする */
.home-about__footer .service-link {
  margin-top: 0;
}

/* ---------- 6. Closing ---------- */
.closing {
  background: var(--color-yellow);
  padding-block: var(--space-xl);
}

.closing .container {
  max-width: 720px;
  text-align: center;
}

.closing h2 {
  font-size: var(--text-statement);
  line-height: var(--lh-statement);
  letter-spacing: var(--ls-statement);
}

.closing p {
  margin-top: var(--space-m);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
  /* 2行以上になりうる説明文のため、セクションの中央揃えを上書きして左揃えにする */
  text-align: left;
}

.btn-primary {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-l);
  overflow: hidden;
  background: var(--color-yellow);
  color: var(--color-ink);
  border: none;
  border-radius: var(--radius);
  padding: 18px 32px;
  font-size: var(--text-nav);
  font-weight: 700;
  line-height: var(--lh-nav);
  transition: color 0.3s ease;
}

/* ホバー時は背景色が左から右へスイープして塗り替わる演出 */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #ffffff;
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  transform: scaleX(1);
}

/* Closingセクションはイエロー地のため、CTAはインク面にして視認性を確保する。
   ホバー時も背景と同じイエローに塗り替えると埋没するため、白地に切り替える */
.closing .btn-primary {
  background: var(--color-ink);
  color: #ffffff;
}

.closing .btn-primary::before {
  background: #ffffff;
}

.closing .btn-primary:hover,
.closing .btn-primary:focus-visible {
  color: var(--color-ink);
}

.btn-primary .btn-arrow {
  margin-left: var(--space-xs);
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow,
.btn-primary:focus-visible .btn-arrow {
  transform: translateX(3px);
}

/* ---------- 7. 法務ページ（プライバシーポリシー・利用規約） ---------- */
.legal {
  background: var(--color-bg);
  padding-block: var(--space-xl);
}

.legal .container {
  max-width: 760px;
}

.legal h1 {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
}

.legal .legal-updated {
  margin-top: var(--space-s);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-ink-3);
}

.legal h2 {
  margin-top: var(--space-l);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}

.legal p {
  margin-top: var(--space-s);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.legal ol,
.legal ul {
  margin-top: var(--space-s);
  padding-left: 1.4em;
}

.legal ol {
  list-style: decimal;
}

.legal ul {
  list-style: disc;
}

.legal li {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.legal li::marker {
  color: var(--color-ink-3);
}

/* ---------- 8. Service ページ ---------- */
.page-hero {
  background: var(--color-bg);
  padding-block: var(--space-xl);
}

.page-hero .container {
  max-width: 760px;
}

.page-hero h1 {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 28px;
}

@media (min-width: 768px) {
  .page-hero h1 {
    font-size: var(--text-h2);
  }
}

.page-hero p {
  margin-top: var(--space-m);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
}

.service-category {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-line);
  /* 固定ヘッダーの下に見出しが隠れないよう、アンカー着地位置にゆとりを持たせる */
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
}

.service-category--alt {
  background: var(--color-bg-deep);
}

.service-category__intro {
  /* 640pxだと「プロジェクト推進・制作ディレクション」がPC幅で2行に割れるため拡張。
     実際の折り返しは各ビューポート幅と.phrase(inline-block)の組み合わせで決まるため、
     モバイル幅では従来通り自然に改行される */
  max-width: 760px;
}

.service-category h2 {
  font-size: 28px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .service-category h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
  }
}

/* h2直下の.phraseはdisplay:inline-blockのため、蛍光マーカー風の下線は
   親のh2ではなく.phrase側に直接指定する必要がある */
.service-category h2 .phrase {
  text-decoration-line: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.32em;
  text-decoration-skip-ink: none;
}

.service-category__intro p {
  margin-top: var(--space-s);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.service-list {
  margin-top: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

.service-item {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  /* 帯の上にカードの地色を少し見せるため上だけ余白を取る。
     帯はカードの左端に接するので、左右の余白は内側の要素で持たせる */
  padding: var(--space-m) 0 0;
  overflow: hidden;
}

/* 番号と見出しの行をネイビーのタグにして、項目が続いても区切りが分かるようにする。
   サイト全体は角丸ゼロが基調だが、ここは帯の終わりを示すため右端だけわずかに丸める。
   TOPのServicesカード／Aboutの「大切にしていること」で共通 */
.service-card__head,
.value-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  /* 内容に応じた幅にして、カード右端まで伸びないようにする */
  width: fit-content;
  max-width: 100%;
  background: var(--color-navy);
  border-radius: 0 6px 6px 0;
  padding: var(--space-s) var(--space-m);
}

/* ネイビー地に載せるため、見出しと番号は明るい色にする */
.service-card__head h3,
.value-item__head h3 {
  color: #ffffff;
}

.service-card__head .service-number,
.value-item__head .value-number {
  color: var(--color-yellow);
}

.service-category--alt .service-item {
  background: var(--color-bg);
}

@media (min-width: 768px) {
  /* 3カラムのカードは元々幅が狭いため、右端に少し余白が残る程度に留める */
  .service-card__head,
  .value-item__head {
    max-width: 92%;
  }
}

/* Serviceページの項目見出し（01〜07）：ネイビー地の帯が7項目で反復し視覚的に重かったため、
   装飾を引き算し、見出しテキスト＋ゴールドの細い罫線番号に変更する（2026-08-08） */
.service-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  width: fit-content;
  max-width: 100%;
  padding: 0 var(--space-m) var(--space-s);
  border-bottom: 1px solid var(--color-gold);
}

.service-item__head h3 {
  color: var(--color-ink);
}

.service-item__head .service-number {
  font-weight: 700;
  color: var(--color-navy);
}

@media (min-width: 768px) {
  /* Serviceページのカードは横幅が広いため、6割程度で折り返して右に余白を残す */
  .service-item__head {
    max-width: 62%;
  }
}

@media (min-width: 1024px) {
  .service-item__head {
    padding-inline: var(--space-l);
  }
}

.service-item h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
}

.service-item p {
  /* 余白はカードではなくこの本文側で持たせる（帯を左端まで届かせるため） */
  padding: var(--space-m);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

@media (min-width: 1024px) {
  .service-item p {
    padding: var(--space-m) var(--space-l) var(--space-l);
  }
}

/* 本文中の強調。赤文字(#ee4444)は白地3.79:1・クリーム地3.36:1でAA未達だったうえ、
   色だけで強調を伝えるため色覚多様性にも配慮できていなかった。
   Hero見出しと同じ蛍光マーカー方式に統一し、色に依存しない強調に変える */
.service-item p strong {
  color: var(--color-ink);
  font-weight: 700;
  background-image: linear-gradient(transparent 62%, var(--color-yellow-soft) 62%);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* ---------- 9. About ページ ---------- */
.about-message {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.about-message .container {
  /* 760pxのままだと顔写真の2カラムレイアウトが窮屈になるため、
     経歴セクション（.about-history .container）と同じ960pxに広げる */
  max-width: 960px;
}

/* 署名とロゴを横並びにする行 */
.about-signature-row {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* ロゴ画像用の仮枠 */
.about-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-logo img {
  width: auto;
  height: 88px;
}

@media (min-width: 768px) {
  .about-logo img {
    height: 104px;
  }
}

.about-message h2,
.about-values h2,
.about-projects h2,
.about-history h2,
.about-profile h2 {
  font-size: 28px;
  line-height: 1.4;
  /* 蛍光ペンで引いたような太いアンダーライン。シグネチャーイエローを使用 */
  text-decoration-line: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.32em;
  text-decoration-skip-ink: none;
}

@media (min-width: 768px) {
  .about-message h2,
  .about-values h2,
  .about-projects h2,
  .about-history h2,
  .about-profile h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
  }
}

/* Praise the will to create. 〜 署名までを1枚のパネルとして囲み、装飾を加える */
.about-message__panel {
  position: relative;
  margin-top: var(--space-l);
  background: var(--color-bg);
  border: 1px solid var(--color-gold);
  padding: var(--space-m);
}

@media (min-width: 768px) {
  .about-message__panel {
    padding: var(--space-xl);
  }
}

/* パネル外側四隅に額縁のようなコーナーマークを添える */
.about-message__panel::before,
.about-message__panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gold);
}

.about-message__panel::before {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
}

.about-message__panel::after {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
}

.about-tagline-en {
  margin-top: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 20px;
  /* .home-about__tagline-en と同じ理由でNavyへ（ゴールドは白地2.39:1でAA未達） */
  color: var(--color-navy);
}

.about-tagline-jp {
  margin-top: var(--space-xs);
  /* 28px固定では375px幅で「へ。」だけが3行目に落ちていた（最終行56px）。
     20文字を2行（各10文字）に収めるには、320px幅で22px弱まで詰める必要がある */
  font-size: clamp(21px, 6.8vw, 28px);
  line-height: 1.5;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .about-tagline-jp {
    font-size: var(--text-h2);
  }
}

.about-voice {
  margin-top: var(--space-l);
  padding-left: var(--space-m);
  border-left: 2px solid var(--color-line);
}

.about-voice p {
  font-style: italic;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-3);
}

.about-voice p + p {
  margin-top: var(--space-xs);
}

.about-message__body {
  margin-top: var(--space-l);
}

.about-message__body p {
  margin-top: var(--space-m);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.about-message__body p:first-child {
  margin-top: 0;
}

.about-message .about-signature {
  margin-top: 0;
  font-size: var(--text-nav);
  color: var(--color-ink-2);
}

/* 仕事で大切にしていること */
.about-values {
  padding-block: var(--space-xl);
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-line);
}

.value-list {
  margin-top: var(--space-l);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .value-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-item {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  /* 見出しのタグをカード左端まで届かせるため、左右の余白は内側の要素で持たせる。
     上だけ余白を取り、タグの上にカードの地色を見せる */
  padding: var(--space-m) 0 0;
  overflow: hidden;
}

.value-number {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  color: var(--color-gold);
}

.value-item h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  /* タイトルの行数が1〜2行で混在するため、タグの高さと本文の開始位置を3枚で揃える */
  min-height: 2lh;
}

.value-item p {
  /* 余白はカードではなくこの本文側で持たせる（タグを左端まで届かせるため） */
  padding: var(--space-m);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

@media (min-width: 1024px) {
  .value-item p {
    padding: var(--space-m) var(--space-l) var(--space-l);
  }
}

/* .service-item p strong と同じ理由でマーカー方式に統一 */
.value-item p strong {
  color: var(--color-ink);
  font-weight: 700;
  background-image: linear-gradient(transparent 62%, var(--color-yellow-soft) 62%);
}

/* 主なプロジェクト実績 */
.about-projects {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.about-projects .container {
  max-width: 760px;
}

/* 対応業界の一言。BtoB発注担当者が自社と重ねやすいよう見出し直下に添える */
.about-projects__lead {
  margin-top: var(--space-s);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.project-case {
  margin-top: var(--space-l);
}

.project-case + .project-case {
  margin-top: var(--space-xl);
}

.project-case h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  text-decoration: underline;
}

.project-case > p {
  margin-top: var(--space-s);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.project-case h4 {
  margin-top: var(--space-m);
  font-family: var(--font-jp-heading);
  font-weight: 700;
  font-size: var(--text-nav);
  color: var(--color-ink);
  border-left: 5px solid var(--color-yellow);
  padding-left: 0.9em;
}

.project-case ul {
  margin-top: var(--space-s);
  padding-left: 1.4em;
  list-style: disc;
}

.project-case li {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.project-case li::marker {
  color: var(--color-ink-3);
}

/* 実績の定量値（担当領域の箇条書きだけでは規模感が伝わらないため、
   件数・期間を独立したカードで見せる） */
.project-case__stats {
  margin-top: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
}

.project-case__stat {
  flex: 1 1 160px;
  padding: var(--space-s) var(--space-m);
  background: var(--color-bg-deep);
  border-left: 3px solid var(--color-yellow);
}

.project-case__stat-num {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-ink);
}

.project-case__stat-num span {
  margin-left: 0.25em;
  font-size: var(--text-nav);
  font-weight: 700;
  color: var(--color-ink-2);
}

.project-case__stat-label {
  margin-top: 4px;
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-ink-2);
}

/* 経歴 */
.about-history {
  padding-block: var(--space-xl);
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-line);
}

.about-history .container {
  max-width: 960px;
}

.about-history__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 768px) {
  .about-history__layout {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: var(--space-xl);
  }
}

/* 写真を1枚置くだけだと平坦に見えるため、外側に少しずらしたゴールドの枠を重ねる。
   「名前に込めた想い」のパネルで使っている額縁と同じ表現に揃えている */
.about-history__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--color-bg);
}

.about-history__photo::before {
  content: "";
  position: absolute;
  /* 右下方向へずらした枠。写真の背面に置いて縁からのぞかせる */
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--color-gold);
}

/* SPでは1カラムになるため、指定しないと枠が画面幅いっぱいに広がり、
   縦横比3:4のぶん縦に伸びすぎてしまう。人物写真として自然な大きさに抑え、
   本文が左揃えの中で浮かないよう左右中央に置く
   （PCではグリッドの列幅で決まるため、この指定は不要） */
@media (max-width: 767px) {
  .about-history__photo {
    /* margin-inline:auto を付けるとグリッド項目の自動伸長が効かなくなり、
       中身の文字幅まで縮んでしまうため、幅を明示する */
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
  }
}

.about-history__photo img {
  /* 背面のゴールド枠より前面に置く */
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-history p {
  margin-top: var(--space-s);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.about-history p:first-of-type {
  margin-top: var(--space-l);
}

.about-profile {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}

.about-profile .container {
  max-width: 760px;
}

.profile-table {
  margin-top: var(--space-l);
}

.profile-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-line);
  align-items: center;
}

.profile-row:last-child {
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .profile-row {
    grid-template-columns: 160px 1fr;
    gap: var(--space-m);
  }
}

.profile-row dt {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-ink-3);
}

.profile-row dd {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.profile-row dd a {
  /* 連絡先メールリンクが375pxで高さ24pxしかなかったため、タップ領域を確保する */
  display: inline-block;
  padding-block: 10px;
}

/* ---------- 10. Contact ページ ---------- */
.contact-form {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.contact-form .container {
  max-width: 760px;
}

.contact-form h2 {
  font-size: 28px;
  line-height: 1.4;
}

/* フォーム入力前の心理的ハードルを下げる安心文言 */
.contact-form-intro {
  margin-bottom: var(--space-l);
}

.contact-form-intro__text p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

@media (min-width: 768px) {
  .contact-form h2 {
    font-size: var(--text-h2);
    line-height: var(--lh-h2);
  }
}

.contact-form-embed {
  margin-top: var(--space-l);
  border: 1px solid var(--color-line);
  background: var(--color-bg-deep);
  padding: var(--space-l);
}

/* ---------- フォーム本体
   以前は Google Apps Script の Web アプリを iframe 埋め込みしていたため、
   このスタイル一式は google-apps-script/contact-form/Stylesheet.html の
   内容を元にしている（複数Googleアカウントログイン時にフォームが開けない
   既知の問題を避けるため、フォームHTMLを静的サイト側へ移した）。
   ---------- */

/* メッセージパネル（成功・エラー）。色だけに頼らず、見出しと枠線でも状態が伝わるようにする */
.panel {
  border: 1px solid var(--color-line);
  border-left-width: 5px;
  background: var(--color-bg);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}

.panel__title {
  font-family: var(--font-jp-heading);
  font-weight: 700;
  color: var(--color-ink);
}

.panel__text {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink-2);
}

.panel--error {
  border-left-color: var(--color-red);
}

.panel--success {
  border-left-color: var(--color-yellow);
}

.form-note {
  font-size: var(--text-small);
  color: var(--color-ink-3);
  margin-bottom: var(--space-m);
}

.required-mark {
  color: var(--color-red);
  font-weight: 700;
}

.field {
  margin-bottom: var(--space-l);
}

.field__label {
  display: block;
  font-family: var(--font-jp-heading);
  font-weight: 700;
  font-size: var(--text-nav);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.field__help {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-ink-3);
  margin-bottom: var(--space-xs);
}

.required-badge,
.optional-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 2px 8px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
  border-radius: var(--radius);
}

.required-badge {
  background: var(--color-ink);
  color: #ffffff;
}

.optional-badge {
  background: var(--color-bg);
  color: var(--color-ink-3);
  border: 1px solid var(--color-line);
}

.contact-form-embed input[type="text"],
.contact-form-embed input[type="email"],
.contact-form-embed textarea {
  display: block;
  width: 100%;
  font-family: var(--font-jp);
  /* スマートフォンで自動ズームされないよう16px以上にする */
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.contact-form-embed textarea {
  resize: vertical;
  min-height: 180px;
}

.contact-form-embed input[type="text"]:focus,
.contact-form-embed input[type="email"]:focus,
.contact-form-embed textarea:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 0;
  border-color: var(--color-ink);
}

.field--invalid input[type="text"],
.field--invalid input[type="email"],
.field--invalid textarea {
  border-color: var(--color-red);
  border-width: 2px;
}

.field__error {
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  line-height: 1.7;
  font-weight: 700;
  color: var(--color-red);
}

.field__counter {
  margin-top: var(--space-xs);
  font-family: var(--font-en);
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-ink-3);
  text-align: right;
}

.field__counter--warning {
  color: var(--color-red);
  font-weight: 700;
}

.choice-group {
  border: none;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  /* タップ領域を44px以上にする */
  min-height: 44px;
  padding: var(--space-xs) 0;
  cursor: pointer;
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 6px;
  accent-color: var(--color-navy);
  cursor: pointer;
}

.choice__text {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-ink-2);
}

/* 必須の同意項目は、クリーム地の中でも埋もれないよう白地で囲んで目立たせる */
.choice--privacy {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  padding: var(--space-s);
}

.field--invalid .choice--privacy {
  border-color: var(--color-red);
  border-width: 2px;
}

/* サイト全体の a { text-decoration: none } を打ち消し、リンクと分かるようにする */
.choice--privacy .choice__text a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.choice--privacy .choice__text a:hover,
.choice--privacy .choice__text a:focus-visible {
  color: var(--color-ink);
}

.field--invalid .choice-group .choice__text {
  color: var(--color-ink);
}

/* 自動送信対策用の隠し項目。display:none だと一部のボットに無視されるため画面外へ追い出す */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* スマートフォンでは横幅いっぱいに */
  width: 100%;
  min-height: 56px;
  font-family: var(--font-jp);
  font-size: var(--text-nav);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-yellow);
  border: none;
  border-radius: var(--radius);
  padding: 18px 32px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.submit-button:hover:not(:disabled),
.submit-button:focus-visible:not(:disabled) {
  background: var(--color-ink);
  color: #ffffff;
}

.submit-button:disabled {
  background: var(--color-line);
  color: var(--color-ink-3);
  cursor: not-allowed;
}

@media (min-width: 600px) {
  .submit-button {
    width: auto;
    min-width: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-button {
    transition: none;
  }
}

.contact-form-note {
  margin-top: var(--space-m);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--color-ink-3);
}

.contact-form-note a {
  /* フォームが表示できない場合の唯一の代替手段。375pxで高さ20pxしかなく、
     最も確実にタップさせたい場面で最も押しにくかったため44pxを確保する */
  display: inline-block;
  padding-block: 12px;
  text-decoration: underline;
}

/* ---------- 11.5 ページ内目次（Service / About の長いページ用） ----------
   Serviceは7項目・About(SP)は8,499pxあり、縦に読み進めるしか手段がなかった。
   ヒーロー直下に目次を置き、目的の項目へ直接移動できるようにする */
.page-toc {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-m);
}

/* 目次から飛ぶ先。固定ヘッダーの下に見出しが隠れないようにする
   （.service-category は同じ指定を個別に持っている） */
.about-message,
.about-values,
.about-projects,
.about-history,
.about-profile {
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
}

.page-toc__heading {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.page-toc ul {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  list-style: none;
}

.page-toc a {
  display: inline-flex;
  align-items: center;
  /* モバイルのタップ領域を確保する */
  min-height: 44px;
  font-size: var(--text-nav);
  line-height: var(--lh-nav);
  font-weight: 700;
  color: var(--color-ink);
}

.page-toc a:hover,
.page-toc a:focus-visible {
  text-decoration: underline;
}

/* スクロールスパイ：現在表示中のセクションに対応する項目を強調する。
   js/main.js の setupPageTocScrollSpy が付け外しする */
.page-toc a.is-current {
  color: var(--color-navy);
  text-decoration: underline;
}

.page-toc a.is-current::before {
  color: var(--color-navy);
}

.page-toc a::before {
  content: "↓";
  margin-right: var(--space-xs);
  color: var(--color-ink-2);
}

/* 目次から飛んだとき、画面が一瞬で切り替わると「別ページに移ったのか
   同じページ内を移動したのか」が分からない。ページ内移動であることを
   スクロールの動き自体で伝える（動きを減らす設定の環境では即時移動のまま） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 着地したセクションの左端にイエローのアクセントを一瞬だけ走らせ、
   「ここに来た」ことを視覚的に示す */
.service-category,
.about-message,
.about-values,
.about-projects,
.about-history,
.about-profile {
  position: relative;
}

.page-toc-target::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-yellow);
  transform-origin: top;
  animation: toc-landing 1.6s ease forwards;
}

@keyframes toc-landing {
  0% { opacity: 0; transform: scaleY(0); }
  18% { opacity: 1; transform: scaleY(1); }
  70% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page-toc-target::before {
    animation: none;
    opacity: 0;
  }
}

/* ---------- 12. スクロールリビール（演出トライアル・TOPページのみ） ----------
   初期状態を「表示」にしておき、JSがIntersectionObserverを実際に設定できた要素にだけ
   .is-armed を付けて非表示にする。こうすることで、JSが読み込まれない場合だけでなく
   「JSは動いているが初期化前に例外/early returnで止まった」場合でも本文が消えない。 */
.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-armed {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-armed.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-armed {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Servicesカードは01〜03が1つずつ時間差で現れるようにする */
.service-grid .service-card:nth-child(2) {
  transition-delay: 0.15s;
}

.service-grid .service-card:nth-child(3) {
  transition-delay: 0.3s;
}