@charset "UTF-8";

/* =========================================
   0. 変数・リセット
   ========================================= */
:root {
  /* 白 + 旬な薄い青 */
  --blue-50:  #f5fafe;
  --blue-100: #e8f4fd;
  --blue-200: #d3eafb;
  --blue-300: #b3dbf6;
  --blue-400: #86c5ee;
  --blue-500: #58ade4;   /* メインカラー */
  --blue-600: #3d94cf;
  --blue-800: #235a7d;   /* 薄い青の背景に小さな文字を置くときの濃い青 */
  --accent:   #ffd98a;   /* さし色（やわらかい黄色） */

  --white: #ffffff;
  --text:  #2e3a45;        /* 本文・見出し（白背景でコントラスト比 約11:1） */
  --text-light: #56646f;   /* 補足テキスト（同 約6.4:1／AA適合） */

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 32px;

  --shadow-s: 0 4px 16px rgba(88, 173, 228, .10);
  --shadow-m: 0 10px 30px rgba(88, 173, 228, .14);

  --container: 1120px;
  --header-h: 68px;

  /* 日本語（見出し・本文・ボタン） */
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium",
             "游ゴシック Medium", "YuGothic", "Meiryo", sans-serif;
  /* 英語表記・英語ラベル */
  --font-en: "Montserrat", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* ウェイト */
  --w-heading: 700;   /* 大見出し */
  --w-subhead: 600;   /* 中見出し */
  --w-body:    400;   /* 本文 */
  --w-btn:     600;   /* ボタン */
  --w-label:   500;   /* 英語ラベル */
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: var(--w-body);
  line-height: 1.8;
  color: var(--text);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 英語表記・英語ラベルは Montserrat */
.en, .section__label, .logo__text small, .footer__copy {
  font-family: var(--font-en);
  font-weight: var(--w-label);
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s, color .25s, background-color .25s; }
a:hover { opacity: .75; }
button { font-family: inherit; }

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* =========================================
   1. 共通パーツ
   ========================================= */
.section { padding: 88px 0; }

.section__head { text-align: center; margin-bottom: 56px; }

.section__label {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--blue-500);
  background: var(--blue-100);
  border-radius: 999px;
  padding: 4px 18px;
  margin-bottom: 16px;
}

.section__title {
  font-size: clamp(24px, 5vw, 34px);
  font-weight: var(--w-heading);
  line-height: 1.5;
  letter-spacing: .04em;
}

/* TOPのセクション見出しに敷く黄色いマーカー。
   ABOUTなどのページタイトル（.subpage-title）と同じ形・同じ動きを使い回す。
   引くきっかけだけ、スクロール表示の既存の仕組み（.is-visible）に合わせる */
.section__title--marker {
  position: relative;
  isolation: isolate;   /* ラインが文字より前へ出ないようにする */
  width: fit-content;
  margin-inline: auto;
}
.section__title--marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: .14em;         /* 最後の文字の字間ぶんを詰める */
  bottom: .2em;
  height: 5px;
  background: var(--accent);
  /* JSが動かない環境では、最初から引かれた状態で見せる */
  transform: scaleX(1);
  transform-origin: left center;
}
/* JSが監視を始めた時点でいったん引っ込め、画面に入ったら1回だけ引く */
.section__head.motion-reveal .section__title--marker::after { transform: scaleX(0); }
.section__head.is-visible .section__title--marker::after {
  animation: subpageTitleLineDraw .5s cubic-bezier(.22, .75, .3, 1) .35s forwards;
}

/* 見出し・中央寄せの短文だけ、改行位置を文節単位にする。
   1文字だけ行末に残るのを防ぐため。本文に効かせると右端が
   不揃いになるので対象を限定している。
   （非対応ブラウザでは無視されるだけで表示崩れはなし） */
h1, h2, h3, h4, .section__desc, .cta__text, .hero__tagline {
  word-break: auto-phrase;
}

.section__desc {
  margin-top: 16px;
  color: var(--text-light);
  font-size: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  font-weight: var(--w-btn);
  font-size: 16px;
  letter-spacing: .04em;
  text-align: center;
}
.btn:hover { opacity: 1; transform: translateY(-2px); }
.btn { transition: transform .25s, box-shadow .25s, background-color .25s, color .25s; }

.btn--primary {
  background: var(--blue-500);
  color: var(--white);
  box-shadow: var(--shadow-m);
}
.btn--primary:hover { background: var(--blue-600); }

.btn--ghost {
  background: var(--white);
  color: var(--blue-600);
  border: 2px solid var(--blue-200);
}
.btn--ghost:hover { background: var(--blue-50); }

.btn--lg { min-height: 62px; padding: 0 44px; font-size: 17px; }

/* =========================================
   2. ヘッダー
   ========================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blue-100);
}

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

.logo { display: flex; align-items: center; gap: 10px; }

/* ロゴマーク（画像）。元画像は円のまわりに白い余白があるため
   円形に切り抜いて、背景の色に関係なくなじむようにしている */
.logo__mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 17px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
}
.logo__text small {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-light);
}

.nav__list { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }

.nav__btn {
  background: var(--blue-500);
  color: var(--white);
  font-weight: var(--w-btn);
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: var(--shadow-s);
}

/* ハンバーガー */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-600);
  transition: transform .3s, opacity .3s;
}
.nav-toggle span + span { margin-top: 6px; }

/* =========================================
   TOPページの文字組み（ヒーローを除く）
   body.page-top が付く index.html でだけ効きます。
   他のページには一切影響しません。

   ヒーローは個別に調整済みのため、この指定の対象から外しています。
   継承で紛れ込まないよう、body ではなく
   「ヘッダー」「main 直下のヒーロー以外」「フッター」に限定して当てています。

   文字間隔がばらついて見えるのは、全角の字幅（1em）に対して
   字面の大きさが文字種ごとに違うためです。
     ・約物（、。「」）… 字面は半分ほどで、残りが余白になる
     ・カタカナ　　　　… 字面が細く、左右の余白が大きい
     ・漢字　　　　　　… 字面がほぼ全角いっぱいで、余白がない
   そこで、一律の字送りではなく次の3段構えで整えています。
     1. palt で字幅そのものを字面に合わせる（文字種ごとの余白差を消す）
     2. text-spacing-trim で行頭・行末や約物どうしの重なりを詰める
     3. 詰まったぶんを、ひらがなの見え方を基準にした字送りで戻す
   ========================================= */
.page-top > .header,
.page-top > main > *:not(.hero),
.page-top > .footer,
/* ABOUT／DESIGN／NEWS／CONTACT も同じ指定を共有する（値を書き分けない）。
   黄色いライン付きタイトルが入る各ページの pagehead は対象から外す */
.page-about > .header,
.page-about > main > *:not(.about-pagehead),
.page-about > .footer,
.page-design > .header,
.page-design > main > *:not(.design-pagehead),
.page-design > .footer,
.page-news > .header,
.page-news > main > *:not(.news-pagehead),
.page-news > .footer,
.page-contact > .header,
.page-contact > main > *:not(.contact-pagehead),
.page-contact > .footer {
  /* 1. 全角の余白を字面基準の字幅に置き換える＋ペアカーニング。
        約物とカタカナが最も詰まり、漢字はほぼ変わらないため、
        文字種が切り替わっても間隔が揃って見えるようになる */
  font-kerning: normal;
  font-feature-settings: "palt" 1, "kern" 1;
  /* 2. 行頭の「や、行末の」、約物が連続する箇所の余白を詰める */
  text-spacing-trim: trim-start;
  /* 3. ひらがなが自然に見える字送り。letter-spacing は継承されるので、
        独自の値を持つ見出しやラベルは今までの値のまま残る */
  letter-spacing: .09em;
}
/* 独自に .09em より狭い字送りを持つ見出し・ラベルも、
   ひらがな基準の .09em にそろえて、本文との差が出ないようにする。
   一方、字送りを広く取ること自体が狙いのラベル
   （.section__label .18em、.logo__text small .14em、
     .conclusion__label .1em、英字の .footer__copy .08em）は
   意図した値なのでそのまま残す。
   ここに並ぶクラスは、ヒーローにも .about-pagehead にも存在しない */
.page-top .section__title,
.page-top .card__title,
.page-top .topic__title,
.page-top .cta__title,
.page-top .talk__name,
.page-top .btn,
.page-top .logo__text,
.page-about .about-section__title,
.page-about .about-quote,
.page-about .about-tools__name,
.page-about .logo__text,
.page-design .design-card__meta-term,
.page-design .design-card__name,
.page-design .design-card__thumb-note,
.page-design .logo__text,
.page-news .news-item__category,
.page-news .logo__text,
.page-contact .contact-field__label,
.page-contact .contact-badge,
.page-contact .contact-confirm__title,
.page-contact .btn,
.page-contact .logo__text { letter-spacing: .09em; }

/* CONTACTのボタンは button 要素で、ブラウザ既定により
   font-feature-settings を継承しない。他ページの同等ボタン（a 要素）に
   見え方をそろえるため、ここだけ明示的に指定する */
.page-contact .btn {
  font-kerning: normal;
  font-feature-settings: "palt" 1, "kern" 1;
}

/* 英数字だけが入る箇所は、日本語用の字送りを乗せない。
   ・入力欄（メールアドレス・電話番号・URL などを打ち込む場所）
   ・確認画面に並ぶ入力内容（打ち込まれた値をそのまま出す場所）
   ・NEWSの日付は .news-item__date が自前で .06em を持つので対象外 */
.page-contact .contact-field__input,
.page-contact .contact-field__textarea,
.page-contact .contact-confirm__desc { letter-spacing: normal; }
/* 英字だけのナビゲーションには字送りを足さない */
.page-top .nav__list a,
.page-about .nav__list a,
.page-design .nav__list a,
.page-news .nav__list a,
.page-contact .nav__list a { letter-spacing: normal; }

/* =========================================
   3. ヒーロー（TOPページ全面動画）
   index.html のヒーローだけで使用します。
   動画を全面に敷き、その上に文字とマスコットを重ねます。
   文字が読めるよう、下へ向かって濃くなる紺の重ねを入れています。
   ========================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* svh を使い、スマホのアドレスバーで高さが揺れないようにする */
  min-height: 680px;
  min-height: min(94svh, 960px);
  display: flex;
  align-items: flex-end;
  /* 読み込み前も空白にならないよう淡い青を敷く */
  background: var(--blue-100);
}

/* --- 背景の動画 --- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--blue-100);   /* 動画が出るまでの下地 */
}
/* 表示領域より少し広く取り、ゆっくり左右へ流す */
.hero-media__video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 108%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
  from { transform: translateX(-53%); }
  to   { transform: translateX(-47%); }
}

/* 文字の可読性を確保する重ね。動画の雰囲気は残す濃度 */
.hero-media__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(22, 41, 62, .30)  0%,
      rgba(22, 41, 62, .12) 30%,
      rgba(22, 41, 62, .52) 68%,
      rgba(22, 41, 62, .84) 100%);
}

/* 右上の小さなラベル */
.hero-media__caption {
  position: absolute;
  z-index: 2;
  top: 26px;
  right: max(20px, calc((100% - var(--container)) / 2));
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: var(--w-label);
  letter-spacing: .18em;
  color: rgba(247, 248, 250, .72);
}
.hero-media__caption span { color: rgba(247, 248, 250, .95); }

/* --- マスコット --- */
/* 前面には出さず、動画となじむ背景の要素として右側へ大きく置く。
   重ね順は「動画 → 重ね → マスコット → 文字」 */
.hero__mascot {
  position: absolute;
  z-index: 2;
  margin: 0;
  right: -3.5vw;
  bottom: 0;
  width: clamp(200px, 42vw, 600px);
  pointer-events: none;
}
/* 不透明度は画像側で指定する。
   登場アニメーションが figure の opacity を 1 に戻すため */
.hero__mascot-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .58;
  /* 輪郭が急に途切れないよう、外へ向かって自然に薄くする */
  -webkit-mask-image: radial-gradient(118% 108% at 60% 40%,
                        #000 40%, rgba(0,0,0,.6) 70%, transparent 100%);
          mask-image: radial-gradient(118% 108% at 60% 40%,
                        #000 40%, rgba(0,0,0,.6) 70%, transparent 100%);
}

/* --- 中身の配置 --- */
/* 大きなメインキャッチを主役に置き、その下にサブキャッチと制作実績を並べる */
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: clamp(28px, 3.4vw, 52px);
  padding-block: 92px 128px;
}

/* --- メインキャッチ --- */
.hero__tagline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(14px, 1.6vw, 26px);
  font-size: clamp(15px, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .92);
  /* 動画に埋もれないよう、輪郭を軽く補助するだけの黒い影 */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.hero__tagline::before {
  content: "";
  flex: none;
  width: clamp(24px, 3.6vw, 56px);
  height: 2px;
  margin-top: .78em;
  border-radius: 2px;
  background: var(--blue-300);
}

/* 3行の見出し。基準は主役の「Web Designer」に合わせ、
   ほかの2行を em で小さくしてジャンプ率を作る */
.hero__title {
  font-size: clamp(30px, 8.8vw, 128px);
  font-weight: var(--w-heading);
  line-height: 1.16;
  letter-spacing: .02em;
  color: #FFFFFF;
  /* 影は行ごとに役割へ合わせて指定する。ここは大きい2・3行目に合わせる */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .38);
}

/* 1行目「宇都宮市の」は明朝体 */
.hero__title-jp {
  display: inline-block;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
               "YuMincho", "MS PMincho", serif;
  font-weight: 600;
  font-size: .7em;
  line-height: 1.34;
  /* 一括の字送りはやめ、下で1文字ずつ調整する */
  letter-spacing: 0;
  /* 詰め組みを無効にし、全角の升目を基準に手で整える */
  font-feature-settings: "palt" 0;
  /* 明朝の細い画が動画に負けないよう、上のキャッチより少しだけ強くする */
  text-shadow: 0 2px 7px rgba(0, 0, 0, .42);
}
/* 字面の詰まり方が字ごとに違うため、右の余白を個別に与える */
.hero__title-ch {
  display: inline-block;
  margin-right: .1em;
}
.hero__title-ch--to   { margin-right: .12em; }  /* 「都」は右が詰まって見える */
.hero__title-ch--miya { margin-right: .11em; }  /* 「宮」も少し広く */
.hero__title-ch--shi  { margin-right: .03em; }  /* 「市」は右が空くので詰める */

/* 末尾の「の」。「宇都宮市」より小さいまま、従来の1.5倍（.5em → .75em）にする。
   inline-block なので「宇都宮市」とベースラインで揃う。
   大きくすると字面も広がるため、下への落とし込みと左の余白を詰め直す */
.hero__title-small {
  display: inline-block;
  font-size: .75em;
  letter-spacing: 0;
  margin-left: .02em;
  position: relative;
  top: .035em;
}

/* 2行目「Web Designer」。見出しの主役。必ず1行で表示する */
.hero__title-em {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: var(--w-heading);
  font-size: 1em;
  line-height: 1.22;
  letter-spacing: .01em;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .38);
}
/* 黄色いマーカー。文字幅に合わせ、左から右へ引く */
.hero__title-em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: .01em;            /* 最後の文字の字間ぶんを詰める */
  bottom: .3em;
  height: .28em;
  border-radius: 3px;
  background: rgba(255, 217, 138, .58);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  animation: heroMarkerDraw .85s cubic-bezier(.22, .75, .3, 1) .95s forwards;
}
@keyframes heroMarkerDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 3行目「つとむん」。不透明な白い帯の上に、サイトの青で文字を置く。
   帯は ::before の1枚だけで、角丸なしの横長の長方形。
   光彩・ぼかし・グラデーション・立体的な影は使わない */
.hero__title-name {
  position: relative;
  display: inline-block;
  font-size: .936em;   /* 従来 .72em の約1.3倍 */
  width: fit-content;
  line-height: 1.05;
  letter-spacing: .04em;
  white-space: nowrap;   /* 4文字を途中で折り返さない */
  /* 帯は文字の輪郭に沿わせ、必要最小限の余白だけを持たせる */
  padding: .04em .15em;
  color: var(--blue-600);
  text-shadow: none;     /* 見出しから受け継ぐ影を外す */
}
/* 白い帯。左から右へ伸びる */
.hero__title-name::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #FFFFFF;
  border-radius: 0;
  transform: scaleX(0);          /* 初期状態は非表示 */
  transform-origin: left center;
  animation: heroNameBand .9s cubic-bezier(.22, .75, .3, 1) .35s both;
}
/* 青い文字。帯に少し遅れて、左から右へ現れる */
.hero__title-name-inner {
  position: relative;
  z-index: 1;
  display: inline-block;
  /* かなの字面は行の中で上寄りになるため、その分だけ戻して
     文字を帯の上下中央にそろえる（左右は余白だけで揃う） */
  top: -.068em;
  clip-path: inset(0 100% 0 0);  /* 初期状態は非表示 */
  animation: heroNameReveal .7s cubic-bezier(.22, .75, .3, 1) .95s both;
}
/* どちらも1回だけ再生し、終わった状態で静止する */
@keyframes heroNameBand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroNameReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* --- サブキャッチと制作実績 --- */
/* 見出しが大きくなったぶん、この2つは横に並べて高さを抑える */
.hero__side {
  display: grid;
  /* 左列はサブキャッチの幅ぶんだけに抑え、余ったぶんは列の間の余白に回す。
     こうすると、サブキャッチの行数は変えずにカードだけを右へ動かせる */
  grid-template-columns: minmax(0, max-content) auto;
  justify-content: start;
  align-items: end;
  /* サブキャッチの右端とマスコットのパソコンの左端の、ちょうど中間に
     カードが来る間隔。画面幅に追従するので後付けの位置ずらしにならない */
  column-gap: clamp(24px, 3.2vw, 60px);
  row-gap: clamp(20px, 2vw, 32px);
  /* 右側はマスコットの居場所として空けておく */
  max-width: 82%;
}

.hero__lead {
  /* 敷きの左端はコンテナの内側＝「つとむん」の白帯の左端と同じ基準に置く。
     26.8em は指定の5行のうち最長行（約397px）が収まる文字幅で、
     左右の padding ぶんだけ箱を広げている */
  max-width: calc(26.8em + 28px);
  padding: 9px 14px;
  font-size: 15px;
  line-height: 2;
  /* 字詰めで締まったぶんを戻し、ひらがな基準で均等に見せる */
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .30);
  /* 動画をわずかに沈めるだけの薄い敷き。箱として目立たせない */
  background: rgba(0, 0, 0, .20);
  border-radius: 5px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
/* PCでは指定の位置で5行に折る。狭い画面ではこの改行を使わず、
   画面幅に合わせて自然に折り返させる（下の768px以下で無効化） */
.hero__lead-br { display: inline; }

.hero__actions { margin-top: 26px; }

/* 制作実績。丸いCTAではなく、細い線で囲んだ落ち着いた紹介リンク */
.hero__work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta  arrow"
    "name  arrow"
    "more  arrow";
  align-items: center;
  gap: 4px 18px;
  max-width: 420px;
  padding: 18px 20px;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .30);
  background: rgba(18, 35, 54, .46);
  border: 1px solid rgba(247, 248, 250, .28);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.hero__work-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__work-no {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: var(--w-label);
  letter-spacing: .16em;
  color: #FFFFFF;
}
.hero__work-label {
  font-size: 11px;
  font-weight: var(--w-subhead);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .88);
}
.hero__work-name {
  grid-area: name;
  font-size: 17px;
  font-weight: var(--w-subhead);
  line-height: 1.6;
  letter-spacing: .02em;
}
.hero__work-more {
  grid-area: more;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
}
.hero__work-arrow {
  grid-area: arrow;
  justify-self: end;
  font-size: 17px;
  line-height: 1;
  color: #FFFFFF;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .hero__work:hover {
    transform: translateY(-3px);
    background: rgba(18, 35, 54, .62);
    border-color: rgba(247, 248, 250, .48);
    opacity: 1;
  }
  .hero__work:hover .hero__work-arrow { transform: translateX(4px); }
}
.hero__work:focus-visible {
  outline: 3px solid #BFE2F7;
  outline-offset: 3px;
}

/* --- ヒーロー内の日本語のカーニング --- */
/* フォントが持つ字詰め（palt）とペアカーニング（kern）を有効にして、
   「、」「。」「「」「」」まわりの空きを自然に詰める。
   字詰めで全体が締まるぶん、ひらがなの見え方を基準に
   わずかな字送りを足して視覚的な均等さを保つ。
   英語の「Web Designer」と、字ごとに手で調整した
   「宇都宮市の」は対象に含めない。
   ※ヒーローは調整済みのため、TOPページ全体の文字組み指定からは外してある */
.hero__tagline,
.hero__lead,
.hero__title-name,
.hero__work-name,
.hero__work-label,
.hero__work-more {
  font-kerning: normal;
  font-feature-settings: "palt" 1, "kern" 1;
}

/* --- 下端の波形 --- */
.hero__wave {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.hero__wave svg { width: 100%; height: 80px; display: block; }

/* --- 登場アニメーション（読み込み時に1回だけ） --- */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroRiseSm {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.page-top .hero-media   { animation: heroFadeIn .9s ease-out both; }
.page-top .hero__tagline{ animation: heroRiseSm .7s cubic-bezier(.22,.75,.3,1) .25s both; }
.page-top .hero__title  { animation: heroRise   .8s cubic-bezier(.22,.75,.3,1) .35s both; }
.page-top .hero__lead   { animation: heroRiseSm .75s cubic-bezier(.22,.75,.3,1) .62s both; }
.page-top .hero__actions{ animation: heroRiseSm .7s cubic-bezier(.22,.75,.3,1) .84s both; }
.page-top .hero__mascot { animation: heroRiseSm .8s cubic-bezier(.22,.75,.3,1) 1.02s both; }

/* --- 1024px --- */
@media (max-width: 1024px) {
  .hero__inner { padding-block: 80px 112px; }
  .hero__lead { font-size: 14.5px; }
  /* 制作実績に重ならないよう、列の間隔を詰めてマスコットを右へ寄せる */
  .hero__side { column-gap: clamp(20px, 4.4vw, 60px); max-width: 78%; }
  .hero__mascot { right: -6vw; width: clamp(200px, 44vw, 460px); }
  .hero__mascot-img { opacity: .55; }
}

/* --- 768px以下：縦並び。マスコットは最後に小さく置く --- */
@media (max-width: 768px) {
  .hero {
    min-height: 600px;
    min-height: min(88svh, 780px);
  }
  .hero__inner {
    gap: 26px;
    padding-block: 64px 104px;
  }
  /* 狭い画面ではサブキャッチと制作実績を縦に積む */
  .hero__side {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 22px;
    max-width: none;
  }
  .hero__lead { max-width: none; }
  /* 固定の改行はやめ、画面幅に合わせて折り返す */
  .hero__lead-br { display: none; }
  .hero__work { max-width: 420px; }
  /* マスコットは右下へ。文字に重なりすぎない大きさに抑える */
  .hero__mascot {
    right: -6vw;
    width: min(56vw, 330px);
  }
  .hero__mascot-img { opacity: .5; }
  .hero__wave svg { height: 52px; }
}

/* --- タブレット縦（701〜768px）--- */
/* カード420pxと右下のマスコットの両方が収まるのはこの幅から上。
   マスコットの居場所ぶんを右に確保したうえで、残りの中央に置く。
   これより狭いとカードが入りきらないため、下の指定どおり左そろえのままにする */
@media (min-width: 701px) and (max-width: 768px) {
  .hero__actions { padding-right: min(16vw, 130px); }
  .hero__work { margin-inline: auto; }
}

/* --- 600px以下 --- */
@media (max-width: 600px) {
  /* 下段（実績カード＋マスコット）の高さぶんだけ余白を取る */
  .hero__inner {
    padding-block: 46px 72px;
    /* メインキャッチの下をしっかり空け、サブキャッチ以下を下へ送る */
    gap: 68px;
  }
  .hero__tagline { gap: 10px; letter-spacing: .08em; }
  /* サブキャッチと下段（カード＋マスコット）の間を空ける */
  .hero__side { gap: 44px; }

  /* メインキャッチを約1.5倍へ。ただし「Web Designer」が1行で収まる幅が上限。
     7.6 は「Web Designer」の幅 ÷ 文字サイズの実測値で、
     これを超えると2行になるか画面からはみ出す */
  .hero__title {
    font-size: min(13.2vw, (100vw - 40px) / 7.6);
    line-height: 1.14;
  }

  /* 実績カードは、右のマスコットの居場所を空けて左半分に置く。
     この余白のぶんだけカードが縮み、マスコットと横一列に並ぶ */
  /* 右のマスコットの居場所を空けて、カードをその左に置く。
     マスコットは右へ 6vw 逃がしてあるので、その分を差し引く */
  .hero__actions {
    margin-top: 0;
    margin-right: calc(min(56vw, 215px) - 6vw - 10px);
  }
  .hero__work {
    max-width: none;
    /* 横は据え置き、上下だけ詰めて縦を短くする */
    padding: 8px 11px;
    gap: 1px 10px;
    /* 狭い幅では矢印を最終行へ移し、社名に横幅をすべて使わせる。
       これで社名の折り返しが減り、カードの縦横比が自然になる */
    grid-template-areas:
      "meta meta"
      "name name"
      "more arrow";
  }
  .hero__work-arrow { align-self: center; }
  /* ラベルは語の途中で折らず、入らないときだけ行を分ける */
  .hero__work-meta { gap: 6px; flex-wrap: wrap; }
  .hero__work-no,
  .hero__work-label { white-space: nowrap; }
  /* 社名は「有限会社」と「誉幸電気工業　様」を別の行に分け、
     狭い幅でも窮屈にならないよう社名だけ少し小さくする */
  .hero__work-name { line-height: 1.25; }
  .hero__work-corp,
  .hero__work-brand { display: block; }
  .hero__work-corp  { font-size: 11px; letter-spacing: .04em; opacity: .9; }
  .hero__work-brand { font-size: 14px; letter-spacing: .01em; }

  /* マスコットはヒーロー右下へ。下端をヒーローの下端に接地させ、
     右へ少し逃がして人物を大きく見せる（透明な余白しか画面外へ出ない） */
  .hero__mascot {
    right: -6vw;
    bottom: 0;
    width: min(56vw, 215px);
  }
  /* 下端へ向かってだけ薄くし、背景動画へ溶け込ませる。
     顔と上半身（画像の上55%）は不透明のまま残す */
  .hero__mascot-img {
    opacity: .72;
    -webkit-mask-image: linear-gradient(to bottom,
                          #000 0%, #000 55%, rgba(0,0,0,.55) 80%, transparent 100%);
            mask-image: linear-gradient(to bottom,
                          #000 0%, #000 55%, rgba(0,0,0,.55) 80%, transparent 100%);
  }
  .hero-media__caption { top: 18px; font-size: 10px; letter-spacing: .12em; }
}

/* =========================================
   4. サービス内容
   ========================================= */
.service { background: var(--white); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }

/* アイコンエリア。高さを固定してアイコンを中央に置く */
.card__thumb {
  height: 140px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  border-bottom: 1px solid var(--blue-100);
}
.card__thumb img { width: 76px; height: 76px; }

.card__body { padding: 26px 24px 30px; flex: 1; display: flex; flex-direction: column; }

.card__title {
  font-size: 20px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px dotted var(--blue-200);
}

.card__text { font-size: 16px; color: var(--text-light); }

.card__list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font-size: 16px;
}
.card__list li {
  position: relative;
  padding-left: 26px;
  background: var(--blue-50);
  border-radius: var(--radius-s);
  padding-block: 8px;
  padding-right: 12px;
  line-height: 1.7;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--blue-400);
}

/* =========================================
   5. 会社をサポート
   ========================================= */
.support {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
}

.topic {
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  padding: 48px 44px;
  margin-bottom: 40px;
}
.topic:last-child { margin-bottom: 0; }

.topic__title {
  display: flex;
  align-items: flex-start;   /* 見出しが2行になっても●が1行目の横に来るように */
  gap: 12px;
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: var(--w-subhead);
  line-height: 1.6;
  letter-spacing: .04em;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--blue-100);
  margin-bottom: 12px;
}
.topic__dot {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: .55em;         /* 1行目の中心に合わせる */
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 5px var(--blue-100);
}

.topic__block { margin-top: 34px; }

.topic__sub {
  display: inline-block;
  font-size: 17px;
  font-weight: var(--w-subhead);
  color: var(--blue-600);
  background: var(--blue-100);
  border-radius: 999px;
  padding: 6px 22px;
  margin-bottom: 22px;
}

/* 会話（吹き出し） */
.talk { display: grid; gap: 22px; }

.talk__item { display: flex; align-items: flex-start; gap: 14px; }
.talk__item--right { flex-direction: row-reverse; }

.talk__avatar {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-50);
}

.talk__bubble {
  position: relative;
  max-width: 640px;
  padding: 16px 22px;
  border-radius: var(--radius-m);
  font-size: 16px;
}
.talk__bubble p { line-height: 1.8; }

.talk__item--left .talk__bubble { background: var(--blue-50); border: 1px solid var(--blue-100); }
.talk__item--right .talk__bubble { background: var(--blue-500); color: var(--white); }

/* 吹き出しのしっぽ */
.talk__bubble::before {
  content: "";
  position: absolute;
  top: 22px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
.talk__item--left .talk__bubble::before {
  left: -7px;
  background: var(--blue-50);
  border-left: 1px solid var(--blue-100);
  border-bottom: 1px solid var(--blue-100);
}
.talk__item--right .talk__bubble::before {
  right: -6px;
  background: var(--blue-500);
}

.talk__name {
  display: block;
  font-size: 13px;
  font-weight: var(--w-subhead);
  letter-spacing: .06em;
  margin-bottom: 4px;
  opacity: .8;
}

/* YouTube挿入スペース */
.video-slot { margin-top: 40px; }
.video-slot__frame {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 2px dashed var(--blue-300);
  border-radius: var(--radius-m);
  background: var(--blue-50);
}
.video-slot__note {
  font-size: 15px;
  font-weight: var(--w-subhead);
  color: var(--blue-600);
  letter-spacing: .06em;
}

/* SNS活用アイデア */
.idea-list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.idea {
  position: relative;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-m);
  padding: 22px 24px 22px 26px;
}
.idea::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: var(--blue-400);
}

.idea__title { font-size: 17px; font-weight: var(--w-subhead); margin-bottom: 6px; }
.idea__text { font-size: 16px; color: var(--text-light); }

/* 締め */
.conclusion {
  margin-top: 34px;
  background: var(--blue-100);
  border-radius: var(--radius-m);
  padding: 28px 32px;
  font-size: 16px;
}
.conclusion__label {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--w-subhead);
  letter-spacing: .1em;
  color: var(--white);
  background: var(--blue-500);
  border-radius: 999px;
  padding: 3px 16px;
  margin-bottom: 10px;
}

/* =========================================
   6. CTA / フッター
   ========================================= */
.cta {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-500) 100%);
  color: var(--white);
  padding: 76px 0;
  text-align: center;
}
.cta__title { font-size: clamp(22px, 4.4vw, 30px); font-weight: var(--w-heading); letter-spacing: .04em; line-height: 1.6; }
.cta__text { margin: 18px 0 32px; font-size: 16px; }
.cta .btn--primary { background: var(--white); color: var(--blue-600); }
.cta .btn--primary:hover { background: var(--blue-50); }

.footer {
  background: var(--blue-50);
  padding: 48px 0 36px;
  border-top: 1px solid var(--blue-100);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
/* フッターはロゴを主役にするので少し大きく */
.logo--footer .logo__mark { width: 60px; height: 60px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; font-weight: 500; }
/* タップしやすいように余白で当たり判定を確保 */
.footer__nav a { display: inline-block; padding: 10px 6px; }
.footer__copy { font-size: 12px; letter-spacing: .08em; color: var(--text-light); }

/* =========================================
   7. レスポンシブ
   ========================================= */

/* --- タブレット（〜1024px） --- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .topic { padding: 40px 32px; }
}

/* --- タブレット縦・スマホ（〜768px） --- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section__head { margin-bottom: 40px; }

  /* ナビをドロワーに */
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--blue-100);
    box-shadow: var(--shadow-m);
    padding: 12px 20px 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s, transform .28s, visibility .28s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px dotted var(--blue-200); }
  .nav__list a { display: block; padding: 16px 6px; }
  .nav__btn {
    margin-top: 16px;
    text-align: center;
    border-radius: 999px;
  }
  .nav__list li:has(.nav__btn) { border-top: 0; }

  /* ハンバーガー開いた状態 */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* サポート */
  .topic { padding: 32px 20px; border-radius: var(--radius-m); }
  .topic__block { margin-top: 26px; }
  .idea-list { grid-template-columns: 1fr; }
  .conclusion { padding: 22px 20px; }
}

/* --- スマホ（〜600px） --- */
@media (max-width: 600px) {
  /* 本文は縮めない（16px・行間1.8を維持） */
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { border-radius: var(--radius-m); }
  .card__body { padding: 22px 20px 26px; }

  .btn { width: 100%; }

  /* 会話は縦にコンパクトに */
  .talk__avatar { width: 46px; height: 46px; }
  .talk__item, .talk__item--right { gap: 10px; }
  .talk__bubble { padding: 14px 16px; border-radius: 18px; }

  .video-slot__frame { border-radius: var(--radius-s); }
  .cta { padding: 60px 0; }
  /* 3つのリンクが1行に収まるように間隔を詰める（タップ領域の高さは維持） */
  .footer__nav { gap: 4px 10px; }
  .footer__nav a { padding: 10px 2px; }
}

/* --- 動きを減らす設定への配慮 --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }

  /* ヒーローは動画の横移動も登場の動きも止め、最初から通常表示にする */
  .hero-media__video,
  .page-top .hero-media,
  .page-top .hero__tagline,
  .page-top .hero__title,
  .page-top .hero__lead,
  .page-top .hero__actions,
  .page-top .hero__mascot {
    animation: none;
    opacity: 1;
  }
  .hero-media__video { transform: translateX(-50%); }
  /* 黄色いマーカーは動かさず、最初から引かれた状態で表示する */
  .hero__title-em::after {
    animation: none;
    transform: scaleX(1);
  }
  /* 「つとむん」の白い帯と青文字は、最初から完成状態で表示する */
  .hero__title-name::before {
    animation: none;
    transform: scaleX(1);
  }
  .hero__title-name-inner {
    animation: none;
    clip-path: inset(0 0 0 0);
  }
  .page-top .hero__tagline,
  .page-top .hero__title,
  .page-top .hero__lead,
  .page-top .hero__actions,
  .page-top .hero__mascot { transform: none; }
}

/* =========================================
   ABOUTページ専用
   ここから下は about.html でのみ使用します。
   既存のスタイルに影響しないよう、クラス名は
   すべて .about- で始めています。
   余白・細い罫線・文字サイズの差で情報を整理し、
   セクションごとに組み方を変えています。
   ========================================= */

/* 現在表示中のページを示す控えめな下線 */
.about-nav-current {
  border-bottom: 2px solid var(--blue-500);
  padding-bottom: 3px;
}

/* --- ページタイトル（左揃え・白地・細い罫線で区切る） --- */
.about-pagehead {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  padding: 64px 0 56px;
  text-align: center;
}
.about-pagehead__en {
  font-family: var(--font-en);
  font-weight: var(--w-heading);
  font-size: 38px;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--text);
}

/* --- セクション --- */
.about-section { padding: 68px 0; }
/* 淡い青は「ホームページ制作の目的」だけに使う */
.about-section--tint { background: var(--blue-50); }

/* 見出しは左揃え。飾りは付けず、細い罫線だけで区切る */
.about-section__title {
  font-size: 24px;
  font-weight: var(--w-subhead);
  line-height: 1.6;
  letter-spacing: .04em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--blue-200);
  margin-bottom: 36px;
}

/* --- 本文 --- */
.about-text {
  max-width: 40em;      /* 長文が読みやすい行幅 */
  font-size: 16px;
  line-height: 2;
}
.about-text p + p { margin-top: 1.9em; }

/* --- 代表挨拶：写真と本文を並べた編集記事のような組み --- */
.about-greeting {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.about-greeting .about-text { max-width: 38em; }

.about-portrait { margin: 0; }
/* 写真が入るまでの仮枠。3:4 の縦長 */
.about-portrait__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--text-light);
}

/* --- ホームページ制作の目的 --- */
/* 一文だけを静かに際立たせる。文字サイズと余白で表現する */
.about-quote {
  margin: 2.4em 0 2.4em;
  padding-left: 20px;
  border-left: 2px solid var(--blue-400);
  font-size: 21px;
  font-weight: var(--w-subhead);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--blue-800);
}

/* --- 事業者情報：細い罫線で整理した表 --- */
.about-info {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border-top: 1px solid var(--blue-200);
  max-width: 760px;
}
.about-info__term {
  padding: 17px 20px 17px 0;
  font-size: 15px;
  font-weight: var(--w-subhead);
  color: var(--text-light);
  border-bottom: 1px solid var(--blue-100);
}
.about-info__desc {
  margin: 0;
  padding: 17px 0;
  border-bottom: 1px solid var(--blue-100);
}
.about-info__desc a {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 使用ツール：小さなカードを横一列に --- */
.about-tools {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.about-tools__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 14px;
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: 6px;
}
.about-tools__icon {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--blue-600);
}
.about-tools__name {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .01em;
}

/* --- タブレット --- */
@media (max-width: 1024px) {
  .about-greeting { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .about-tools { grid-template-columns: repeat(3, 1fr); }
}

/* --- スマートフォン --- */
@media (max-width: 768px) {
  .about-section { padding: 52px 0; }
  .about-greeting { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .about-portrait { max-width: 240px; }
  .about-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .about-pagehead__en { font-size: 30px; }
  .about-section__title { font-size: 21px; margin-bottom: 28px; }
  .about-quote { font-size: 18px; padding-left: 16px; }
  .about-info { grid-template-columns: minmax(0, 1fr); }
  .about-info__term { padding: 16px 0 2px; border-bottom: 0; }
  .about-info__desc { padding: 0 0 16px; }
  .about-tools { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================
   DESIGNページ専用
   ここから下は design.html でのみ使用します。
   既存のスタイルに影響しないよう、クラス名は
   すべて .design- で始めています。
   角丸・線の太さ・余白は既存のカードに合わせています。
   ========================================= */

/* 現在表示中のページを示す控えめな下線 */
.design-nav-current {
  border-bottom: 2px solid var(--blue-500);
  padding-bottom: 3px;
}

/* --- ページタイトル --- */
.design-pagehead {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  padding: 64px 0 56px;
  text-align: center;
}
.design-pagehead__en {
  font-family: var(--font-en);
  font-weight: var(--w-heading);
  font-size: 38px;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--text);
}

/* --- 実績一覧 --- */
.design-section { padding: 72px 0; }

.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.design-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}

/* 実績画像を入れるスペース */
.design-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  border-bottom: 1px solid var(--blue-100);
}
.design-card__thumb::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px dashed var(--blue-300);
  border-radius: var(--radius-m);
}
.design-card__thumb-note {
  position: relative;
  font-size: 14px;
  font-weight: var(--w-subhead);
  letter-spacing: .06em;
  color: var(--blue-600);
}

.design-card__body {
  flex: 1;
  padding: 26px 24px 30px;
}

/* 案件名を入れるスペース */
.design-card__name {
  font-size: 19px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  color: var(--text-light);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px dotted var(--blue-200);
}

/* 制作種別・担当範囲を入れるスペース */
.design-card__meta {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px 14px;
  align-items: center;
  margin: 0;
}
.design-card__meta-term {
  font-size: 13px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  color: var(--blue-800);
  background: var(--blue-100);
  border-radius: 999px;
  padding: 4px 0;
  text-align: center;
}
.design-card__meta-desc { margin: 0; }

/* 未入力であることが分かる控えめな空欄 */
.design-card__blank {
  display: block;
  height: 12px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
}

/* --- 狭い画面での最低限の崩れ防止 --- */
@media (max-width: 1024px) {
  .design-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .design-grid { grid-template-columns: 1fr; gap: 20px; }
  .design-pagehead__en { font-size: 30px; }
  .design-card { border-radius: var(--radius-m); }
  .design-card__body { padding: 22px 20px 26px; }
}

/* =========================================
   NEWSページ専用
   ここから下は news.html でのみ使用します。
   既存のスタイルに影響しないよう、クラス名は
   すべて .news- で始めています。
   角丸・線の太さ・余白は既存のカードに合わせています。
   ========================================= */

/* 現在表示中のページを示す控えめな下線 */
.news-nav-current {
  border-bottom: 2px solid var(--blue-500);
  padding-bottom: 3px;
}

/* --- ページタイトル --- */
.news-pagehead {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  padding: 64px 0 56px;
  text-align: center;
}
.news-pagehead__en {
  font-family: var(--font-en);
  font-weight: var(--w-heading);
  font-size: 38px;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--text);
}

/* --- 記事一覧 --- */
.news-section { padding: 72px 0; }

.news-list {
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

/* 1行＝1記事。日付・カテゴリー・タイトルの3枠 */
.news-item {
  display: grid;
  grid-template-columns: 140px 132px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
}
/* 行同士を細い境界線で区切る（最終行の下には引かない） */
.news-item + .news-item {
  border-top: 1px solid var(--blue-100);
}

.news-item__date {
  font-family: var(--font-en);
  font-weight: var(--w-label);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--text-light);
}

.news-item__category {
  justify-self: start;
  min-width: 112px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  text-align: center;
  color: var(--blue-800);
  background: var(--blue-100);
  border-radius: 999px;
}

.news-item__title {
  font-size: 16px;
  color: var(--text-light);
}

/* --- 狭い画面での最低限の崩れ防止 --- */
@media (max-width: 768px) {
  .news-item {
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    padding: 20px;
  }
  .news-item__title { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .news-pagehead__en { font-size: 30px; }
  .news-list { border-radius: var(--radius-m); }
}

/* =========================================
   CONTACTページ専用
   ここから下は contact.html でのみ使用します。
   既存のスタイルに影響しないよう、クラス名は
   すべて .contact- で始めています。
   input / textarea / button といった要素名だけの
   指定はしていません（すべてクラス経由）。
   角丸・線の太さ・余白は既存のカードに合わせています。
   ========================================= */

/* 現在表示中のページを示す控えめな下線 */
.contact-nav-current {
  border-bottom: 2px solid var(--blue-500);
  padding-bottom: 3px;
}

/* --- ページタイトル --- */
.contact-pagehead {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  padding: 64px 0 56px;
  text-align: center;
}
.contact-pagehead__en {
  font-family: var(--font-en);
  font-weight: var(--w-heading);
  font-size: 38px;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--text);
}

/* --- フォーム --- */
.contact-section {
  padding: 72px 0;
  background: var(--blue-50);
}

/* 中央寄せ・1列。読みやすい幅に制限している */
.contact-form {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  padding: 48px 56px;
}

.contact-field { display: grid; gap: 10px; }

.contact-field__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
}

/* 必須・任意の表示。
   文字がバッジの縦横中央に来るよう inline-flex で組み、
   高さと最小幅を固定している（上下の padding は使わない） */
.contact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 24px;
  min-width: 48px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
}
.contact-badge--required {
  background: var(--blue-500);
  color: var(--white);
}
.contact-badge--optional {
  background: var(--blue-100);
  color: var(--blue-800);
}

/* 入力欄。細線で囲み、フォーカス時だけ色を濃くする */
.contact-field__input,
.contact-field__textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-s);
  padding: 11px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.contact-field__input:focus,
.contact-field__textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.contact-field__textarea {
  min-height: 180px;
  resize: vertical;
}

/* --- 送信ボタンと注意書き --- */
.contact-actions {
  margin-top: 8px;
  text-align: center;
}
.contact-submit { min-width: 280px; }
.contact-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-light);
}

/* --- 狭い画面での最低限の崩れ防止 --- */
@media (max-width: 600px) {
  .contact-pagehead__en { font-size: 30px; }
  .contact-form {
    padding: 28px 20px;
    border-radius: var(--radius-m);
    gap: 22px;
  }
  .contact-submit { min-width: 0; }
}

/* =========================================
   TOPページ YouTube埋め込み専用
   「動画編集からYouTube発信へ」の1箇所だけで使用します。
   クラス名は .youtube-embed 始まりに限定しており、
   iframe 要素そのものへの指定はしていないため、
   他のiframeや共通要素には影響しません。
   ========================================= */

/* 16:9を保った枠。はみ出しは切り取る */
.youtube-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-m);
}

/* 枠いっぱいに広げる。幅は親に追従するので画面幅に合わせて縮む */
.youtube-embed__iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================
   TOPページの控えめな動き
   ・.page-top（index.html）でのみ効きます
   ・motion-reveal 系のクラスは JavaScript が付与するため、
     JSが動かない環境ではこれらの指定は適用されず通常表示になります
   ・動きを抑える設定への対応は JavaScript 側で行っています
     （該当時はクラスを付与しないため、既存の
       prefers-reduced-motion 指定をそのまま活かせます）
   ========================================= */

/* 現在表示中のページを示す控えめな下線 */
.top-nav-current {
  border-bottom: 2px solid var(--blue-500);
  padding-bottom: 3px;
}

/* --- グローバルメニューの「CONTACT」だけを青帯にする --- */
/* .page-top（index.html）／.page-about（about.html）／
   .page-design（design.html）／.page-news（news.html）かつ
   contact.html へのリンクだけに当たるので、
   他のメニュー項目にも、CONTACTページにも影響しません。
   値は1か所にまとめてあり、ページごとに書き分けていません。
   HTMLは変更していません。
   色はロゴと同じ青系（--blue-500 #58ade4）の濃度違いで、
   白文字が読める明度まで落としたものを使っています */
.page-top .nav__list a[href="contact.html"],
.page-about .nav__list a[href="contact.html"],
.page-design .nav__list a[href="contact.html"],
.page-news .nav__list a[href="contact.html"] {
  --contact-blue:        #2a76a6;   /* 通常時（白文字とのコントラスト 5.0:1） */
  --contact-blue-bright: #2d7cad;   /* 脈動の山（同 4.6:1） */
  --contact-blue-hover:  #1f5c85;   /* ホバー時はさらに濃く */
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--contact-blue);
  color: var(--white);
  /* 背景色と影だけを 3秒周期で往復させる。
     transform も layout も動かさないので描画負荷は小さい */
  animation: navContactPulse 3s ease-in-out infinite;
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* ホバー時の矢印。場所は最初から確保しておき、
   透明度と横位置だけを変えるので、周りのメニューがずれない */
.page-top .nav__list a[href="contact.html"]::after,
.page-about .nav__list a[href="contact.html"]::after,
.page-design .nav__list a[href="contact.html"]::after,
.page-news .nav__list a[href="contact.html"]::after {
  content: "→";
  margin-left: .4em;
  font-size: 1em;
  line-height: 1;
  color: var(--white);
  opacity: 0;
  transform: translateX(-.2em);
  transition: opacity .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .page-top .nav__list a[href="contact.html"]:hover,
.page-about .nav__list a[href="contact.html"]:hover,
.page-design .nav__list a[href="contact.html"]:hover,
.page-news .nav__list a[href="contact.html"]:hover {
    background: var(--contact-blue-hover);
    box-shadow: 0 2px 10px rgba(31, 92, 133, .35);
    opacity: 1;                 /* 全体の a:hover の薄まりを打ち消す */
    /* 脈動を止める。一時停止だとアニメーション側の色が優先されたままになるため、
       none にして上の background / box-shadow を効かせる */
    animation: none;
  }
  .page-top .nav__list a[href="contact.html"]:hover::after,
.page-about .nav__list a[href="contact.html"]:hover::after,
.page-design .nav__list a[href="contact.html"]:hover::after,
.page-news .nav__list a[href="contact.html"]:hover::after {
    opacity: 1;
    transform: translateX(0);
  }
}
.page-top .nav__list a[href="contact.html"]:focus-visible,
.page-about .nav__list a[href="contact.html"]:focus-visible,
.page-design .nav__list a[href="contact.html"]:focus-visible,
.page-news .nav__list a[href="contact.html"]:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}
/* 3秒で1周。0%と100%を通常時、50%をわずかに明るい状態にして
   「明るくなって戻る」1サイクルにする。まわりのにじみも一緒に呼吸させる */
@keyframes navContactPulse {
  0%, 100% {
    background-color: var(--contact-blue);
    box-shadow: 0 0 0 0 rgba(88, 173, 228, 0);
  }
  50% {
    background-color: var(--contact-blue-bright);
    box-shadow: 0 0 0 5px rgba(88, 173, 228, .20);
  }
}

/* スマホのドロワー内でも同じ青帯にする */
@media (max-width: 768px) {
  /* 上の点線罫線は青帯の上には引かない */
  .page-top .nav__list li:has(a[href="contact.html"]),
.page-about .nav__list li:has(a[href="contact.html"]),
.page-design .nav__list li:has(a[href="contact.html"]),
.page-news .nav__list li:has(a[href="contact.html"]) { border-top: 0; }
  .page-top .nav__list a[href="contact.html"],
.page-about .nav__list a[href="contact.html"],
.page-design .nav__list a[href="contact.html"],
.page-news .nav__list a[href="contact.html"] {
    display: flex;
    justify-content: center;
    margin: 14px 0 2px;
    /* 横幅いっぱいでもはみ出さないよう、左右の余白は据え置き */
    padding: 14px 16px;
  }
}
/* ホバーできない端末では矢印が出ないので、その分の場所も空けずに
   文字をボタンのちょうど中央に置く */
@media (max-width: 768px) and (hover: none) {
  .page-top .nav__list a[href="contact.html"]::after,
.page-about .nav__list a[href="contact.html"]::after,
.page-design .nav__list a[href="contact.html"]::after,
.page-news .nav__list a[href="contact.html"]::after { display: none; }
}

/* 動きを抑える設定では脈動させず、通常時の色で止める */
@media (prefers-reduced-motion: reduce) {
  .page-top .nav__list a[href="contact.html"],
.page-about .nav__list a[href="contact.html"],
.page-design .nav__list a[href="contact.html"],
.page-news .nav__list a[href="contact.html"] {
    animation: none;
    background: var(--contact-blue);
  }
}

/* --- スクロールで表示 --- */
.page-top .motion-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.page-top .motion-reveal--left  { transform: translateX(-20px); }
.page-top .motion-reveal--right { transform: translateX(20px); }

.page-top .motion-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- お問い合わせボタンの反応 --- */
/* マウスが使える環境だけ。指で操作する端末では効かせない */
@media (hover: hover) {
  .cta .btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(88, 173, 228, .30);
  }
}
.cta .btn:active { transform: translateY(0) scale(.98); }
/* キーボード操作時に位置が分かるように */
.cta .btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* --- サービスカードのアイコン（既存のカード浮き上がりは変更なし） --- */
.card__thumb img {
  transition: transform .3s ease;
}
@media (hover: hover) {
  .card:hover .card__thumb img {
    transform: translateY(-3px) scale(1.05);
  }
}

/* =========================================
   下層ページのタイトル登場アニメーション
   ABOUT / DESIGN / NEWS / CONTACT の4ページ共通。
   ページを開いたときに1回だけ再生します。
   TOPヒーローとは別の名前を使っており、
   ヒーローの黄色いマーカーCSSは変更していません。
   ========================================= */

/* タイトルが下から上がってくる */
@keyframes subpageTitleRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* 黄色いラインが左から右へ伸びる */
@keyframes subpageTitleLineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 幅を文字ぴったりに縮めて中央に置く。
   ブロックのままなので、青い背景の高さは変わらない */
.subpage-title {
  position: relative;
  isolation: isolate;   /* ラインが文字より前へ出ないようにする */
  width: fit-content;
  margin-inline: auto;
  animation: subpageTitleRise .6s cubic-bezier(.22, .75, .3, 1) forwards;
}

/* 文字のすぐ下に敷く黄色いライン。文字幅に合わせる */
.subpage-title::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: .14em;         /* 最後の文字の字間ぶんを詰める */
  bottom: .2em;
  height: 5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: subpageTitleLineDraw .5s cubic-bezier(.22, .75, .3, 1) .35s forwards;
}

/* 動きを抑える設定では、最初から完成した状態で表示する */
@media (prefers-reduced-motion: reduce) {
  .subpage-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .subpage-title::after {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  /* TOPのセクション見出しのマーカーも、最初から引かれた状態で表示する */
  .section__title--marker::after {
    animation: none !important;
    transform: scaleX(1) !important;
  }
}

/* =========================================
   CONTACTページ 確認画面専用
   contact.html でのみ使用します。
   クラス名はすべて .contact- で始めています。
   ========================================= */

/* 迷惑送信対策の非表示項目。画面にも読み上げにも出さない */
.contact-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 表示の切り替え。display 指定が [hidden] に勝たないようにする */
.contact-form[hidden],
.contact-confirm[hidden] { display: none; }

/* --- 確認画面 --- */
.contact-confirm {
  max-width: 720px;
  margin-inline: auto;
  padding: 48px 56px;
  background: var(--white);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.contact-confirm__title {
  font-size: 20px;
  font-weight: var(--w-subhead);
  letter-spacing: .04em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--blue-200);
  margin-bottom: 28px;
}

/* 項目名と内容を細い罫線で整理する */
.contact-confirm__list {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--blue-100);
}
.contact-confirm__term {
  padding: 14px 16px 14px 0;
  font-size: 14px;
  font-weight: var(--w-subhead);
  color: var(--text-light);
  border-bottom: 1px solid var(--blue-100);
}
.contact-confirm__desc {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--blue-100);
  white-space: pre-wrap;      /* 問い合わせ内容の改行を保つ */
  overflow-wrap: anywhere;    /* 長いメールアドレスでもはみ出さない */
}
.contact-confirm__desc--empty { color: var(--text-light); }

.contact-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.contact-confirm__actions .btn { min-width: 220px; }
.contact-confirm__send[disabled] { opacity: .6; cursor: default; }
.contact-confirm__send[disabled]:hover { transform: none; }

/* --- スマートフォン --- */
@media (max-width: 600px) {
  .contact-confirm {
    padding: 28px 20px;
    border-radius: var(--radius-m);
  }
  .contact-confirm__list { grid-template-columns: minmax(0, 1fr); }
  .contact-confirm__term { padding: 14px 0 2px; border-bottom: 0; }
  .contact-confirm__desc { padding: 0 0 14px; }
  .contact-confirm__actions .btn { min-width: 0; width: 100%; }
}

/* =========================================
   TOPページの地の色と質感（ヒーロー以外）
   ・.page-top（index.html）だけに効きます
   ・変えているのは「背景色・境界線の色・影の強さ・余白」だけで、
     レイアウト、文言、フォント、字送り、角丸、要素の配置は触っていません
   ・ねらいは、真っ白＋水色カードの均一な面を、
     わずかに色みのある地の上に白いカードが載る関係に置き換えて、
     色数を増やさずに奥行きと落ち着きを出すことです
   ========================================= */
.page-top {
  /* 地の色。青みをほんの少し含んだオフホワイト */
  --surface:   #f2f5f8;
  /* 段落ちさせたい帯で使う、ひとつ深い地 */
  --surface-2: #e9eef3;
  /* 罫線は青ではなく文字色の薄めに。面の切り替えが主張しなくなる */
  --line:      rgba(46, 58, 69, .09);
  /* 影は青みを抜き、輪郭を締める近い影と、浮きを出す遠い影の2枚で薄く */
  --shadow-card:       0 1px 2px rgba(30, 41, 51, .05), 0 10px 28px rgba(30, 41, 51, .05);
  --shadow-card-hover: 0 2px 4px rgba(30, 41, 51, .06), 0 18px 40px rgba(30, 41, 51, .09);
  background: var(--surface);
}

/* --- セクションの地 --- */
.page-top .service { background: var(--surface); }
/* 会話が続く長い帯だけひとつ深くして、読み進む区切りをつくる */
.page-top .support { background: var(--surface-2); }
.page-top .footer  { background: var(--surface-2); border-top: 1px solid var(--line); }
/* ヒーロー下端の波は、下のセクションと同じ色でつながることが役割。
   地の色を変えたので、その色に追従させる */
.page-top .hero__wave path { fill: var(--surface); }

/* --- 余白のリズム --- */
/* 面のコントラストを弱めたぶん、余白で区切りを持たせる */
.page-top .section { padding: 104px 0; }
.page-top .section__head { margin-bottom: 64px; }
/* 既存の 1024px 以下の詰めを打ち消さないよう、同じ比率で追随させる */
@media (max-width: 1024px) {
  .page-top .section { padding: 76px 0; }
  .page-top .section__head { margin-bottom: 46px; }
}

/* --- 見出し上の小ラベル --- */
/* 水色の錠剤をやめ、色を1つ減らして文字だけで見せる */
.page-top .section__label {
  background: transparent;
  color: var(--blue-800);
  padding: 0;
  margin-bottom: 14px;
}

/* --- カード --- */
/* 地が色を持ったので、カードは白のまま置くだけで浮き上がる。
   罫線と影を弱めて、輪郭ではなく面の差で見せる */
.page-top .card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.page-top .card:hover { box-shadow: var(--shadow-card-hover); }
.page-top .card__thumb {
  background: #f7f9fb;
  border-bottom: 1px solid var(--line);
}
.page-top .card__title { border-bottom-color: var(--line); }

/* --- サポートセクションの中身 --- */
.page-top .topic {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.page-top .topic__sub {
  background: transparent;
  color: var(--blue-800);
  padding: 0;
}
.page-top .talk__item--left .talk__bubble,
.page-top .talk__item--left .talk__bubble::before {
  background: var(--surface-2);
  border-color: var(--line);
}
.page-top .idea {
  background: var(--surface);
  border-color: var(--line);
}
.page-top .conclusion {
  background: var(--surface-2);
}
.page-top .video-slot__frame {
  background: var(--surface);
  border: 1px dashed var(--blue-300);
}

/* --- 締めのお問い合わせ帯 --- */
/* 淡い青のグラデーションをやめ、ブランドの青1色に。
   白抜き文字のコントラストも 2.1:1 → 5.0:1 に上がる */
.page-top .cta { background: #2a76a6; }
.page-top .cta .btn--primary { color: var(--blue-800); }
.page-top .cta .btn--primary:hover { background: var(--surface); }

/* =========================================
   ABOUTページの地の色と質感（本文エリアのみ）
   ・.page-about（about.html）だけに効きます
   ・TOPページと同じ地の色・罫線・影の値を使い、
     サイト全体でひとつのデザインルールになるようにしています
   ・ページタイトルエリア（.about-pagehead）、ヘッダー、ナビ、
     黄色いマーカー付きタイトルには一切当てていません
   ・変えているのは「背景色・境界線の色・影・余白」だけで、
     角丸、サイズ、配置、文言、画像は触っていません
   ========================================= */
.page-about {
  /* 値はTOPページと同一 */
  --surface:   #f2f5f8;
  --surface-2: #e9eef3;
  --line:      rgba(46, 58, 69, .09);
  --shadow-card: 0 1px 2px rgba(30, 41, 51, .05), 0 10px 28px rgba(30, 41, 51, .05);
  background: var(--surface);
}

/* --- セクションの地と余白のリズム --- */
.page-about .about-section { padding: 84px 0; }
/* 帯で色を変えていた節は、ひとつ深い地に置き換える */
.page-about .about-section--tint { background: var(--surface-2); }
.page-about .footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

/* --- 見出しの下線 --- */
/* 水色の罫線を中立の細罫にして、面の切り替えを主張させない */
.page-about .about-section__title { border-bottom-color: var(--line); }

/* --- 事業者情報の一覧 --- */
/* 地が色を持ったぶん、情報が詰まったこの表だけ白い面にして浮かせる。
   角丸は付けず、細罫だけで囲う（編集的な見え方にする） */
.page-about .about-info {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 6px 28px;
}
.page-about .about-info__term,
.page-about .about-info__desc { border-bottom-color: var(--line); }

/* --- 代表写真の枠 --- */
.page-about .about-portrait__frame {
  background: var(--white);
  border-color: var(--line);
}

/* --- 使用ツール --- */
/* 白のまま置くだけで地から浮くので、罫線と影を弱める */
.page-about .about-tools__item {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

/* --- 引用 --- */
/* 青のアクセントは残しつつ、面は地になじませる */
.page-about .about-quote { border-left-color: var(--blue-500); }

/* --- スマホ --- */
@media (max-width: 600px) {
  /* 既存の詰めを打ち消さないよう、同じ比率で追随させる */
  .page-about .about-section { padding: 64px 0; }
  /* 画面が狭いので、白い面の左右の余白は控えめにする */
  .page-about .about-info { padding: 4px 16px; }
}

/* =========================================
   DESIGNページの地の色と質感（本文エリアのみ）
   ・.page-design（design.html）だけに効きます
   ・TOP／ABOUTと同じ地の色・罫線・影の値を使い、
     サイト全体でひとつのデザインルールになるようにしています
   ・ページタイトルエリア（.design-pagehead）、ヘッダー、ナビ、
     黄色いマーカー付きタイトルには一切当てていません
   ・変えているのは「背景色・境界線の色・影・余白」だけで、
     角丸、カードの並び、画像の比率、文言は触っていません
   ========================================= */
.page-design {
  /* 値はTOP／ABOUTと同一 */
  --surface:   #f2f5f8;
  --surface-2: #e9eef3;
  --line:      rgba(46, 58, 69, .09);
  --shadow-card:       0 1px 2px rgba(30, 41, 51, .05), 0 10px 28px rgba(30, 41, 51, .05);
  --shadow-card-hover: 0 2px 4px rgba(30, 41, 51, .06), 0 18px 40px rgba(30, 41, 51, .09);
  background: var(--surface);
}

/* --- セクションの地と余白 --- */
/* 作品が主役になるよう、一覧の上下だけ余白を広げる */
.page-design .design-section { padding: 88px 0; }
.page-design .footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

/* --- 作品カード --- */
/* 地が色を持ったので、カードは白のまま置くだけで浮き上がる。
   青い罫線と青い影をやめ、輪郭ではなく面の差で見せる */
.page-design .design-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow .3s;
}
/* 作品一覧らしく、浮きがわずかに増すだけの控えめなホバー
   （位置も大きさも動かさない） */
@media (hover: hover) {
  .page-design .design-card:hover { box-shadow: var(--shadow-card-hover); }
}

/* 画像が入る面。比率（16/10）はそのままで、色だけ地になじませる */
.page-design .design-card__thumb {
  background: #f7f9fb;
  border-bottom: 1px solid var(--line);
}
.page-design .design-card__thumb::before { border-color: rgba(46, 58, 69, .14); }

/* --- カード内の情報 --- */
.page-design .design-card__name { border-bottom-color: var(--line); }
/* 水色の錠剤をやめ、地の色の小さなラベルにして色数を増やさない */
.page-design .design-card__meta-term { background: var(--surface); }
.page-design .design-card__blank {
  background: var(--surface);
  border-color: var(--line);
}

/* =========================================
   NEWSページの地の色と質感（本文エリアのみ）
   ・.page-news（news.html）だけに効きます
   ・TOP／ABOUT／DESIGNと同じ地の色・罫線・影の値を使い、
     サイト全体でひとつのデザインルールになるようにしています
   ・ページタイトルエリア（.news-pagehead）、ヘッダー、ナビ、
     黄色いマーカー付きタイトルには一切当てていません
   ・読むページなので、装飾は足さず、面の主張を弱める方向だけに絞っています
   ========================================= */
.page-news {
  /* 値はTOP／ABOUT／DESIGNと同一 */
  --surface:   #f2f5f8;
  --surface-2: #e9eef3;
  --line:      rgba(46, 58, 69, .09);
  --shadow-card: 0 1px 2px rgba(30, 41, 51, .05), 0 10px 28px rgba(30, 41, 51, .05);
  background: var(--surface);
}

/* --- セクションの地と余白 --- */
/* 読み物なので、一覧の上下をひろく取って落ち着かせる */
.page-news .news-section { padding: 88px 0; }
.page-news .footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

/* --- 記事一覧の面 --- */
/* 白のまま置くだけで地から浮くので、青い罫線と青い影をやめて
   輪郭ではなく面の差で見せる */
.page-news .news-list {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
/* 行の区切りも中立の細罫にして、読む邪魔をしない */
.page-news .news-item + .news-item { border-top-color: var(--line); }

/* --- 行の余白 --- */
/* 1行あたりを少しゆるめて、日付・カテゴリー・見出しの間を読みやすくする */
.page-news .news-item { padding: 26px 30px; }

/* --- カテゴリー --- */
/* 水色の錠剤をやめ、地の色の小さなラベルにして色数を増やさない */
.page-news .news-item__category { background: var(--surface); }

/* --- スマホ --- */
@media (max-width: 768px) {
  /* 既存の詰め（20px）をそのまま活かす */
  .page-news .news-item { padding: 20px; }
}

/* =========================================
   CONTACTページの地の色と質感（本文エリアのみ）
   ・.page-contact（contact.html）だけに効きます
   ・TOP／ABOUT／DESIGN／NEWSと同じ地の色・罫線・影の値を使い、
     サイト全体でひとつのデザインルールになるようにしています
   ・ページタイトルエリア（.contact-pagehead）、ヘッダー、ナビ、
     黄色いマーカー付きタイトルには一切当てていません
   ・フォームの項目・順番・送信の仕組み・文言には触れていません
   ========================================= */
.page-contact {
  /* 値は他ページと同一 */
  --surface:   #f2f5f8;
  --surface-2: #e9eef3;
  --line:      rgba(46, 58, 69, .09);
  /* 入力欄だけは、触れる場所とわかるよう少し濃い罫にする */
  --line-field: rgba(46, 58, 69, .16);
  --shadow-card: 0 1px 2px rgba(30, 41, 51, .05), 0 10px 28px rgba(30, 41, 51, .05);
  background: var(--surface);
}

/* --- セクションの地と余白 --- */
/* 落ち着いて入力できるよう、フォームの上下をひろく取る */
.page-contact .contact-section {
  background: var(--surface);
  padding: 88px 0;
}
.page-contact .footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

/* --- フォームの面 --- */
/* 白のまま置くだけで地から浮くので、青い罫線と青い影をやめる。
   このページの主役なので、内側の余白だけ少し広げる */
.page-contact .contact-form,
.page-contact .contact-confirm {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 54px 56px;
}

/* --- 入力欄 --- */
/* 面をほんのり沈ませ、罫は中立の濃さに。
   「ここに入力する」ことが白い面の上でもすぐ分かるようにする */
.page-contact .contact-field__input,
.page-contact .contact-field__textarea {
  background: #fafbfc;
  border-color: var(--line-field);
}
/* 入力中は青で示す（安心して操作できる手がかりなので、青は残す） */
.page-contact .contact-field__input:focus,
.page-contact .contact-field__textarea:focus {
  background: var(--white);
}

/* --- 任意バッジ --- */
/* 必須は今までどおり青のまま。任意だけ地の色にして色数を増やさない */
.page-contact .contact-badge--optional { background: var(--surface); }

/* --- 確認画面の罫線 --- */
.page-contact .contact-confirm__title { border-bottom-color: var(--line); }
.page-contact .contact-confirm__list,
.page-contact .contact-confirm__term,
.page-contact .contact-confirm__desc { border-color: var(--line); }

/* --- スマホ --- */
@media (max-width: 600px) {
  /* 既存の詰め（28px 20px）をそのまま活かす */
  .page-contact .contact-form,
  .page-contact .contact-confirm { padding: 28px 20px; }
}