/* =========================================================================
   サービス詳細ページ用の追加スタイル
   style.css は 1 文字も変えていません。足りない分をこの 1 枚に足しています。
   読み込む順番は必ず style.css → service.css。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. トップページの SERVICES（等高線カード）
   濃い青の上に 7 枚のカードを 2 - 3 - 2 で並べます。
   色は2種類あります。混ざらないように気をつけてください。
     ・地色  … カードの「位置」ごと。青の濃淡で、下の nth-child で決めています
     ・--sc-accent … カードの「事業」ごと。番号の丸と上端の線。index.html 側で指定
   ------------------------------------------------------------------------- */
.service-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
}

/* 上段2枚・中段3枚・下段2枚。並び順を変えるときはここも見ること。 */
.sc-card:nth-child(1),
.sc-card:nth-child(2) { grid-column: span 3; }
.sc-card:nth-child(3),
.sc-card:nth-child(4),
.sc-card:nth-child(5) { grid-column: span 2; }
.sc-card:nth-child(6),
.sc-card:nth-child(7) { grid-column: span 3; }

.sc-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 17rem;
  flex-direction: column;
  padding: clamp(1.3rem, 2vw, 1.9rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.8rem;
  background: #2a5674;
  /* 1本目の inset は、触ったとき明るくするための膜。ふだんは透明にしてあります。
     background を直に変えるとアニメーションしないので、影で代用しています。 */
  box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0), 0 0.8rem 2.4rem rgba(8, 23, 36, 0.22);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.45s ease;
}

/* カードの地色。青のまま、明るい〜濃いを散らして平坦に見えないようにしています。
   事業ごとの色ではなく「置かれた場所」の色なので、並び順を変えたらここも見直すこと。 */
.sc-card:nth-child(1) { background: #2b5875; }
.sc-card:nth-child(2) { background: #1c3b52; }
.sc-card:nth-child(3) { background: #356a8e; }
.sc-card:nth-child(4) { background: #20465f; }
.sc-card:nth-child(5) { background: #2f6081; }
.sc-card:nth-child(6) { background: #193648; }
.sc-card:nth-child(7) { background: #2a5674; }

/* 等高線の透かし（PROJECTS の地図と揃えた同心円。画像は使いません） */
.sc-card::before {
  position: absolute;
  right: -18%;
  bottom: -42%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(255, 255, 255, 0.15) 13px 14px);
  opacity: 0.4;
  content: "";
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 上端のアクセント線。触ったときだけ左から伸びます。 */
.sc-card::after {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sc-accent, var(--yellow));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-card:hover,
.sc-card:focus-within {
  border-color: var(--sc-accent, rgba(255, 255, 255, 0.75));
  box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.07), 0 1.4rem 3.4rem rgba(8, 23, 36, 0.3);
  transform: translateY(-6px);
}

.sc-card:hover::before,
.sc-card:focus-within::before { opacity: 0.75; transform: scale(1.06) rotate(-4deg); }

.sc-card:hover::after,
.sc-card:focus-within::after { transform: scaleX(1); }

.sc-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sc-no {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--sc-accent, var(--yellow));
  border-radius: 50%;
  color: var(--sc-accent, var(--yellow));
  font-family: var(--round);
  font-size: 0.6rem;
  font-weight: 800;
}

.sc-en {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-align: right;
}

/* ★ここに position: relative を付けないこと。
   下の .sc-title a::after は「カード全面に広がる透明な板」で、リンクの
   当たり判定を carda 全体に広げるためのものです。absolute の位置は
   「いちばん近い position 付きの親」を基準にするので、この h3 に
   relative が付いていると板が見出しの箱の中で止まり、カードの本文や
   矢印を押しても何も起きなくなります（実際そうなっていました）。
   基準にしたいのは position: relative を持つ .sc-card の方です。   */
.sc-title {
  margin: 1.4rem 0 0.7rem;
  font-family: var(--round);
  font-size: clamp(1.35rem, 2.1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

/* 見出しのリンクをカード全面に広げます（キーボードの枠は見出しに出ます）。
   inset: 0 の基準は .sc-card。上のコメントも参照。                   */
.sc-title a::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
}

/* style.css の青い枠は濃紺の上で見えないので、ここだけ金色にします。 */
.sc-title a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.sc-card p {
  position: relative;
  max-width: 30rem;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 620;
  line-height: 1.8;
  opacity: 0.92;
}

.sc-foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.6rem;
  gap: 1rem;
}

.sc-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.35rem;
  list-style: none;
}

.sc-tags li {
  padding: 0.3rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.sc-go {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  font-size: 0.95rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-card:hover .sc-go,
.sc-card:focus-within .sc-go {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  transform: translate(3px, -3px);
}

@media (max-width: 1000px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .service-cards .sc-card { min-height: 15rem; grid-column: span 1; }
}

@media (max-width: 640px) {
  .service-cards { grid-template-columns: 1fr; }
  .service-cards .sc-card { min-height: 0; }
}

/* -------------------------------------------------------------------------
   2. トップページの CAPABILITIES（登っていく道）
   4つの数字を、左下から右上へ登る金の道の上に置いています。
   点の位置は index.html 側の --x / --y、道は同じ座標の polyline です。
   **数字を動かすときは、かならず両方をいっしょに直してください。**
   ------------------------------------------------------------------------- */
/* 下の ::before（等高線の丸）が右にはみ出すので、ここで切ります。
   これがないと、スマホでページの横幅が画面より約100px広がってしまい、
   指で左に寄せると右に空白が出ます。hero / philosophy / services も同じ理由で
   それぞれ overflow: hidden を持っています。 */
.results { overflow: hidden; }

.cap-map {
  position: relative;
  min-height: clamp(23rem, 34vw, 32rem);
}

/* 等高線の透かし（PROJECTS の地図と揃えた同心円。画像は使いません） */
.cap-map::before {
  position: absolute;
  right: -10%;
  top: -26%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 17px, rgba(24, 39, 56, 0.07) 17px 18px);
  content: "";
  pointer-events: none;
}

/* 道。viewBox を横に引き伸ばすので、線の太さだけ non-scaling-stroke で固定しています。 */
.cap-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cap-pt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 20.5%;
}

.cap-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #ad8740;
  /* まわりの白フチは、道の線が点の下から透けないようにするためのものです */
  box-shadow: 0 0 0 0.3rem var(--paper-light);
  transform: translate(-50%, -50%);
}

/* 終点（S→I）だけ、登りきった印にします */
.cap-pt-goal .cap-dot {
  width: 1.2rem;
  height: 1.2rem;
  border: 0.28rem solid var(--paper-light);
  background: var(--ink);
  box-shadow: 0 0 0 0.22rem #ad8740;
}

.cap-no {
  display: block;
  padding-top: 1.5rem;
  font-family: var(--round);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.5;
}

.cap-pt strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--round);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.cap-pt strong sup { margin-left: 0.05em; font-size: 0.3em; vertical-align: top; }

.cap-pt strong i {
  margin: 0 0.04em;
  color: #ad8740;
  font-size: 0.6em;
  font-style: normal;
  vertical-align: 0.16em;
}

.cap-pt b {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--round);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.cap-pt p { margin: 0.25rem 0 0; font-size: 0.74rem; font-weight: 650; opacity: 0.7; }

/* 横に並べられない幅では、道を縦にして上から下へ読ませます。
   --rail は左の縦線から本文までの距離。点はこの線の上に乗せます。 */
@media (max-width: 900px) {
  .cap-map { --rail: 1.7rem; min-height: 0; padding-left: var(--rail); }
  .cap-route { display: none; }
  .cap-map::after {
    position: absolute;
    left: 0;
    top: 0.7rem;
    bottom: 3.5rem;
    width: 1px;
    background: linear-gradient(#ad8740, rgba(173, 135, 64, 0.25));
    content: "";
  }
  .cap-map::before { right: -34%; top: auto; bottom: -8%; width: 22rem; height: 22rem; }

  /* static にすると点の基準が .cap-map になって全部左上に重なるので、relative にします */
  .cap-pt {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding-bottom: 2.6rem;
  }
  .cap-pt:last-child { padding-bottom: 0; }
  .cap-dot { left: calc(var(--rail) * -1); top: 0.7rem; }
  .cap-no { padding-top: 0; }
}

/* -------------------------------------------------------------------------
   3. トップページの Hero（幕 → 霧 → 道をひらく）

   流れ：
     幕（生成りのベタ）が出る → ロゴが浮かぶ → 画面下に「道」が描かれる
     → 幕がムラのある霧にほどけて山が現れる → なぞると霧が晴れて道が出る
     → 晴れたら道沿いのライトが麓から順に灯る

   幕の役をしているのは style.css の .opening（画面いっぱいの固定レイヤー）
   そのままです。ここでは「左右に割れる動き」を止めて、霧の canvas と
   誘導文を足しています。進行は assets/js/main.js の opening()。

   ★色や大きさの土台は style.css 側にあります。ここは足すだけで、
     style.css は 1 文字も触っていません。
   ------------------------------------------------------------------------- */

/* この章だけで使う金色（style.css には無いので、ここで定義します） */
.opening,
.hero-mountain-reference { --gold: #c8a75f; }

/* 幕は左右に割れません。もとの半分ずつのパネルは出しません。
   （幕を割ってから霧も晴らすと「ひらく」が2回になってくどいため）      */
.opening::before,
.opening::after { display: none; }

/* なぞれる間はカーソルを消して、代わりに下の .opening-torch を出します */
.opening { cursor: none; }

/* ロゴと下の「道」の濃さ・位置は main.js が毎フレーム入れます。
   transition が残っていると、その値に遅れて追いかける形になって
   動きがもたつくので、この2つだけ切っておきます。                      */
.opening-center,
.opening-caption { transition: none; }

/* 幕の中は「ロゴだけ」。
   もとは白い四角の枠に入ったロゴ＋社名テキストでしたが、幕は
   ロゴが1つ浮かぶだけにします。囲みを外して、生成りの幕に黒いロゴが
   じかに乗っている状態に。浮かび上がる動きは main.js が持っているので、
   もとから付いていた openingPop も止めます（動きが二重になるため）。

   ★ロゴ画像は「透明背景に白い字」です。そのまま置くと幕に埋もれて
   見えません。黒く落とす filter は style.css 側で当たっています。    */
.opening-logo-wrap {
  width: auto;
  height: auto;
  overflow: visible;
  border: 0;
  background: none;
  animation: none;
}
.opening-logo { width: clamp(5rem, 11vw, 8rem); }

/* -------------------------------------------------------------------- 霧
   幕のムラはここに描きます。ベタ塗りの幕そのものは .opening の背景色で、
   その濃さは main.js が下げていきます（canvas でベタを描かないので、
   JS が動かなくても幕が真っ白のまま残るような事故になりません）。
   なぞった所は destination-out で削られます。                          */
.opening-fog {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------- 画面下の「道」
   もとは 2px の直線でした。山を登る道の形（SVG）にして、左（麓）から
   右（頂）へ描かれ、描き終わると山の道の方へ吸い込まれて消えます。
   下の線が、山の道への伏線になります。                                  */
.opening-caption > span { flex: none; white-space: nowrap; }

/* ★min-width: 0 が要ります。
   flex の中身は既定で「これ以上は縮まない最小幅」を持っていて、SVG は
   その最小幅が大きめに出ます。指定しないと線が縮みきれず、右の
   「道がひらく。」が画面の外へ押し出されて見切れます。                */
.opening-caption-path { flex: 1 1 0; min-width: 0; height: 26px; overflow: visible; }
.opening-caption-path path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* --------------------------------------------------------------- 誘導文 */
.opening-hint {
  position: absolute;
  z-index: 6;
  bottom: 6.5rem;
  left: 50%;
  margin: 0;
  color: var(--ink);
  font-family: var(--round);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.55s ease;
  pointer-events: none;
  /* 文が長くなって折り返したとき用。左揃えのままだと、真ん中に置いたつもりが
     左に寄って見えます（2026-08-08、スマホで実際にそう見えていました）。 */
  text-align: center;
}
/* 太字の側（「己の道をひらく。」）は途中で切らせません。これが無いと
   「……なぞって、己の / 道をひらく。」のように、意味の切れ目と違う所で
   折り返してしまいます。 */
.opening-hint b { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------ なぞる所を示す輪 */
.opening-torch {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 1px solid rgba(200, 167, 95, 0.75);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.opening-torch.on { opacity: 1; }

/* --------------------------------------------------- 山の絵（登場のしかた）
   幕がほどけるにつれて、少し大きい状態から実寸へ落ち着きます。
   opacity と transform は main.js が毎フレーム入れます。               */
.hero-mountain-reference { transform-origin: 70% 100%; }

/* --------------------------------------------------------- 道沿いのライト
   霧が晴れたあと、道をはさんで左右に灯りが点きます。
   左右はいつも同じ高さで「同時」。それが麓から頂上へ、一段ずつ。

   ★位置は % で置いています。親（.hero-mountain-reference）は山の絵と
   ぴったり同じ大きさの箱なので、% はそのまま「絵の中の位置」になります。
   画面幅が変わってもスマホで山が拡大されても、座標を計算し直す必要が
   なく、道からズレようがありません。canvas に描くとズレます（実際ズレて、
   この方式に変えて直りました）。

   位置の値は index.html の style="" 側。ここは見た目と間合いだけです。 */
.hero-mountain-reference {
  --lit-delay: 900ms;   /* 霧が晴れてから、いちばん下の1組が灯るまで */
  --lit-step:  340ms;   /* 次の組が灯るまでの間隔 */
  --lit-rise:  620ms;   /* ひと組が灯りきるまでの時間 */
}

.road-light {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 3.4%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--s));
  pointer-events: none;
}
.road-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* 芯は白っぽく、外へいくほど金にほどけて消える */
  background: radial-gradient(circle closest-side,
    rgba(255, 244, 214, 0.95) 0%,
    rgba(214, 178, 100, 0.62) 16%,
    rgba(200, 167, 95, 0.26) 38%,
    rgba(200, 167, 95, 0.08) 62%,
    rgba(200, 167, 95, 0) 100%);
  animation: rl-breathe 5.2s var(--ph) ease-in-out infinite;
}

/* 霧が晴れると main.js が .lights-on を付けます。
   あとは順番も間合いも CSS 側の仕事です。                              */
.hero-mountain-reference.lights-on .road-light {
  animation: rl-on var(--lit-rise)
             calc(var(--lit-delay) + var(--i) * var(--lit-step))
             cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

/* 灯る瞬間だけ、ひと呼吸ぶん大きく強く光ってから落ち着きます */
@keyframes rl-on {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(calc(var(--s) * 0.45)); }
  45%  { opacity: 1;    transform: translate(-50%, -50%) scale(calc(var(--s) * 1.30)); }
  100% { opacity: 0.86; transform: translate(-50%, -50%) scale(var(--s)); }
}
@keyframes rl-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@media (max-width: 680px) {
  .opening { cursor: auto; }
  .opening-torch { display: none; }
  .opening-hint { bottom: 5rem; font-size: 0.66rem; }
}

/* ------------------------------------------- 「動きを減らす」設定について
   ★ここは Hal の明示的な判断です（2026-08-08）。
     このサイトは OS の「視差効果を減らす（prefers-reduced-motion）」を
     一切見ません。誰が見ても同じものが出ます。

   もともとは
     ・style.css の最後に、動きを全部止める打ち消し
     ・service.css の各所に、その打ち消しをさらに戻す例外
     ・main.js に reduced という分岐
   の3段重ねになっていて、直すたびに例外が増えていました。
   なので打ち消しごと全部やめて、分岐そのものを無くしています。

   ＝いま止まるものは何もありません。具体的には設定オンの人にも
     幕（オープニング）／道沿いのライト／KINETIC の流れる文字／
     [data-reveal] のふわっと出る動き／数字のカウントアップ／
     ボタンやカードのホバー が、オフの人と同じように出ます。

   ※これは Hal が承知のうえで選んだ形です。動きが苦手な人には
     全部そのまま届く、というトレードオフがあります。
     戻したくなったら、style.css の末尾（打ち消しがあった場所に
     経緯のコメントを残してあります）と main.js の
     カウントアップの節、この3つを一緒に見てください。          */

/* -------------------------------------------------------------------------
   2. ページごとの色
   --accent   … 番号バッジ・見出しの下線などに使う色
   --on-accent … その色の上に乗せる文字色
   ------------------------------------------------------------------------- */
.sv-page { --accent: var(--blue); --on-accent: #fff; }
.sv-advertising { --accent: #a66c5e; --on-accent: #fff; }
.sv-web         { --accent: #2f5c7d; --on-accent: #fff; }
.sv-system      { --accent: #182738; --on-accent: #fff; }
.sv-media       { --accent: #d6bd78; --on-accent: #182738; }
.sv-consulting  { --accent: #6f8977; --on-accent: #fff; }
.sv-product     { --accent: #c7d8dd; --on-accent: #182738; }
.sv-realestate  { --accent: #a66c5e; --on-accent: #fff; }
.sv-recruit     { --accent: #ad8740; --on-accent: #fff; }
.sv-contact     { --accent: #2f5c7d; --on-accent: #fff; }

/* -------------------------------------------------------------------------
   3. ページ全体
   このページには起動アニメーションの幕がないので、
   幕を待っている間の初期状態（body のスクロール止め・ヘッダーの隠し）を打ち消す。
   ------------------------------------------------------------------------- */
body.sv-page { background: var(--paper); }
body.sv-page.opening-active { overflow: visible; }
body.sv-page .topbar { transform: translateY(0); }

/* ヘッダーの文字色は、下にあるセクションが濃いかどうかで切り替えます。
   その仕組みはこのファイル末尾の「固定ヘッダーの色」にまとめてあるので、
   ここでは何もしません。濃いセクション（.sv-hero とフッター）側に
   data-header-dark を付けることで効きます。 */

.sv-page .section-label { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.sv-page .section-label + .sv-h2 { margin-top: 0; }

.sv-h2 {
  max-width: 22em;
  margin: 0 0 clamp(2.2rem, 4.5vw, 3.5rem);
  font-family: var(--round);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.16;
  word-break: auto-phrase;
}

.sv-h2 i { font-family: var(--serif); font-weight: 400; }

/* -------------------------------------------------------------------------
   4. ページ上部（濃紺）
   ------------------------------------------------------------------------- */
.sv-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(8.5rem, 13vw, 12rem) var(--page-x) clamp(4.5rem, 8vw, 7.5rem);
  background: var(--ink);
  color: white;
}

.sv-hero::after {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #ad8740, var(--yellow));
  content: "";
}

.sv-hero-orb {
  position: absolute;
  z-index: 1;
  right: -17%;
  bottom: -62%;
  width: 48vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.28;
}

.sv-crumb {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--round);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.sv-crumb a { opacity: 0.72; transition: opacity 0.2s ease; }
.sv-crumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.35em; }
.sv-crumb span { opacity: 0.4; }
.sv-crumb b { color: var(--yellow); }

.sv-hero-id {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.8rem, 6vw, 5rem);
}

.sv-hero-id span {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-family: var(--round);
  font-size: 0.8rem;
  font-weight: 900;
}

.sv-hero-id small { font-family: var(--round); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.15em; }

.sv-hero h1 {
  position: relative;
  z-index: 3;
  max-width: 20em;
  margin: 1.7rem 0 0;
  font-family: var(--round);
  font-size: clamp(2.05rem, 5.1vw, 4.3rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.2;
  word-break: auto-phrase;
}

.sv-hero h1 em { color: var(--yellow); font-style: normal; }

.sv-hero-lead {
  position: relative;
  z-index: 3;
  max-width: 42rem;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  font-weight: 650;
  line-height: 1.95;
  opacity: 0.93;
}

/* -------------------------------------------------------------------------
   5. 本文
   ------------------------------------------------------------------------- */
.sv-body { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: var(--paper-light); }
.sv-prose { max-width: 46rem; }
.sv-prose p { margin: 0 0 1.55rem; font-size: clamp(0.98rem, 1.15vw, 1.06rem); font-weight: 600; line-height: 2; }
.sv-prose > *:last-child { margin-bottom: 0; }

.sv-prose p.sv-prose-lead {
  margin-bottom: 2.2rem;
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  font-weight: 700;
  line-height: 1.85;
}

.sv-prose strong {
  font-weight: 900;
  background: linear-gradient(transparent 62%, rgba(214, 189, 120, 0.7) 62%);
}

.sv-prose h3 {
  margin: clamp(3rem, 5.5vw, 4.5rem) 0 1.4rem;
  font-family: var(--round);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.sv-prose h3:first-child { margin-top: 0; }
.sv-prose h3::before { display: block; width: 2.4rem; height: 3px; margin-bottom: 0.95rem; background: var(--accent); content: ""; }

/* -------------------------------------------------------------------------
   6. 実績（表とハイライト）
   ------------------------------------------------------------------------- */
.sv-proof { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: var(--paper); }

.sv-table {
  width: 100%;
  border: 1px solid var(--ink);
  border-collapse: collapse;
  background: white;
}

.sv-table th,
.sv-table td { padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sv-table thead th { background: var(--ink); color: white; font-family: var(--round); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; }
.sv-table tbody th { width: 13rem; font-size: 0.92rem; font-weight: 900; }
.sv-table td { font-size: 0.95rem; font-weight: 650; line-height: 1.8; }
/* 表の中の数字。ページの色に関係なく、ここだけは必ず目立たせたいので固定色 */
.sv-table b { color: #a66c5e; font-size: 1.2em; font-weight: 900; }
.sv-table tbody tr:last-child th,
.sv-table tbody tr:last-child td { border-bottom: 0; }

.sv-proof-note { max-width: 46rem; margin: 2.2rem 0 0; font-size: clamp(0.95rem, 1.15vw, 1.05rem); font-weight: 650; line-height: 1.95; }

.sv-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }

.sv-highlight { padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--ink); border-radius: 0.7rem; background: white; }
.sv-highlight strong { display: block; font-family: var(--round); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.95; }
.sv-highlight b { display: block; margin-top: 0.9rem; font-family: var(--round); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; }
.sv-highlight p { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 650; line-height: 1.8; }

/* -------------------------------------------------------------------------
   7. 任せる理由
   ------------------------------------------------------------------------- */
.sv-reasons { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: var(--paper); }
.sv-proof + .sv-reasons { background: var(--paper-light); }
.sv-reason-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }

.sv-reason {
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 1px solid var(--ink);
  border-radius: 0.7rem;
  background: white;
  box-shadow: 0 1rem 2.5rem rgba(24, 39, 56, 0.07);
}

.sv-reason > span {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--round);
  font-size: 0.72rem;
  font-weight: 900;
}

.sv-reason strong { display: block; margin: 1.4rem 0 0.75rem; font-family: var(--round); font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 900; letter-spacing: -0.015em; }
.sv-reason p { margin: 0; font-size: 0.88rem; font-weight: 620; line-height: 1.85; }

/* -------------------------------------------------------------------------
   8. 対応領域
   ------------------------------------------------------------------------- */
.sv-scope { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: var(--paper); }
/* 実績セクションがないページは「本文 → 任せる理由 → 対応領域」と続き、
   このままだと後ろ2つが同じ色で境目が消えるので、ここだけ明るい方に振る */
.sv-body + .sv-reasons + .sv-scope { background: var(--paper-light); }
.sv-tags { display: flex; flex-wrap: wrap; max-width: 62rem; margin: 0; padding: 0; gap: 0.6rem; list-style: none; }
.sv-tags li { padding: 0.62rem 1.1rem; border: 1px solid var(--ink); border-radius: 999px; background: white; font-size: 0.78rem; font-weight: 800; }

/* -------------------------------------------------------------------------
   9. お問い合わせ
   ------------------------------------------------------------------------- */
.sv-cta {
  position: relative;
  display: grid;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 9rem) var(--page-x);
  justify-items: center;
  background: #e7ece9;
  text-align: center;
}

/* このセクションだけ中央寄せなので、見出しラベルは幅いっぱいの左寄せに戻す */
.sv-cta .section-label { width: 100%; text-align: left; }
.sv-cta .sv-h2 { margin-bottom: 1.6rem; }
.sv-cta > p { max-width: 42rem; margin: 0; font-size: clamp(1rem, 1.4vw, 1.22rem); font-weight: 700; line-height: 1.95; }
.sv-cta .big-contact { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sv-cta-note { max-width: 34rem; margin: 2.5rem 0 0; font-family: var(--round); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1.9; }

/* -------------------------------------------------------------------------
   10. 他のサービス
   ------------------------------------------------------------------------- */
.sv-others { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x) clamp(6rem, 10vw, 10rem); background: var(--paper-light); }
/* カードはいつも 6 枚。3 列・2 列・1 列のどれでも余りが出ないようにしている
   （余ると、そのマスが濃紺のまま残ってしまうため） */
.sv-other-list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); gap: 1px; background: var(--ink); }

.sv-other {
  display: grid;
  align-content: start;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  gap: 0.5rem;
  background: var(--paper-light);
  transition: background 0.25s ease, color 0.25s ease;
}

.sv-other > span { font-family: var(--round); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; }
.sv-other strong { font-family: var(--round); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 900; letter-spacing: -0.02em; }
.sv-other small { font-size: 0.78rem; font-weight: 650; line-height: 1.75; opacity: 0.82; }
.sv-other b { margin-top: 0.5rem; font-size: 1.1rem; }
.sv-other:hover { background: var(--ink); color: white; }

/* -------------------------------------------------------------------------
   11. 画面が狭いとき
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .sv-other-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .sv-other-list { grid-template-columns: 1fr; }
  .sv-hero { padding-top: 7.5rem; }
  .sv-hero-id span { width: 2.7rem; height: 2.7rem; font-size: 0.7rem; }
  .sv-hero-id small { font-size: 0.6rem; letter-spacing: 0.1em; }
  .sv-hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); line-height: 1.32; }
  .sv-hero-orb { right: -30%; bottom: -20%; width: 90vw; }

  /* 表は 1 行ずつ縦に積む */
  .sv-table,
  .sv-table tbody,
  .sv-table tr,
  .sv-table th,
  .sv-table td { display: block; }
  .sv-table thead { display: none; }
  .sv-table { border-bottom: 0; }
  .sv-table tbody tr { border-bottom: 1px solid var(--ink); }
  .sv-table tbody tr:last-child { border-bottom: 0; }
  .sv-table tbody th { width: auto; padding-bottom: 0.35rem; border-bottom: 0; font-size: 0.85rem; }
  .sv-table tbody td { padding-top: 0; border-bottom: 0; }

  .sv-reason { box-shadow: 0 0.7rem 1.8rem rgba(24, 39, 56, 0.07); }
  .sv-cta .big-contact { width: 12.5rem; }
}

/* -------------------------------------------------------------------------
   12. フッターのメニュー（全ページ共通）「道標」

   道そのものは1本も描きません。道ばたに立っている標識だけを置きます。
   金の矢印板が進む先を指していて、触るとその板が塗りつぶされ、柱を軸に
   わずかに首を振ります。

   組み立ては1項目あたり ——
     a::before … 柱。板の左端に立て、上へ少し飛び出させて下は地面まで
     a::after  … 地面。柱の根元に引く短い横線
     span      … 標識の板（中の i が番号）
     b / small … 英語のラベルと日本語の説明

   板は clip-path で矢印の形に切っています。clip-path で切ると border は
   一緒に消えてしまうので、枠線は使えません。代わりに、金の板の上に濃紺の
   板（span::before）を 1.3px 内側に重ねて、はみ出した金を輪郭として
   見せています。触ると濃紺側が消えて、金の塗りになります。

   ※ 旧デザイン（6等分のマス目）の .footer-links は style.css 側に残って
     いますが、HTML からは外したので効いていません。
   ------------------------------------------------------------------------- */
.footer-nav {
  /* 板のかたち。70% を大きくすると先が鈍く、小さくすると鋭くなります */
  --sign-arrow: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
  /* 板の内側に敷く色。フッターの地色（style.css の .footer）と同じにすること */
  --sign-bg: #101d2a;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.4rem);
  padding: clamp(2.4rem, 3.4vw, 3.4rem) 0 clamp(1.8rem, 2.6vw, 2.4rem);
}

.footer-nav a {
  position: relative;
  display: block;
  font-family: var(--round);
}

/* 柱。板の裏を通るので、板の高さのぶんは隠れます（板は柱の前面に付いている）。
   高さの内訳は 上のはみ出し 0.3 ＋ 板 1.5 ＋ 地面まで 1.05 = 2.85rem。
   top / height / a::after の top は連動しています。ひとつ変えたら全部見ること。 */
.footer-nav a::before {
  position: absolute;
  z-index: 0;
  top: -0.3rem;
  left: 0;
  width: 2px;
  height: 2.85rem;
  background: linear-gradient(rgba(214, 189, 120, 0.9), rgba(214, 189, 120, 0.45));
  content: "";
  transition: background 0.28s ease;
}

/* 地面。丸で終わらせると浮いて見えるので、短い横線にしています */
.footer-nav a::after {
  position: absolute;
  top: 2.55rem;
  left: -0.24rem;
  width: 0.85rem;
  height: 1px;
  background: rgba(214, 189, 120, 0.5);
  content: "";
  transition: background 0.28s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 標識の板 */
.footer-nav span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 3.6rem;
  height: 1.5rem;
  padding-right: 0.95rem;
  place-items: center;
  background: var(--yellow);
  clip-path: var(--sign-arrow);
  color: var(--yellow);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  /* 回転の軸は柱の位置。板だけが首を振ります */
  transform-origin: 1px center;
  transition: color 0.28s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 板の中身。これが消えると金の塗りになります */
.footer-nav span::before {
  position: absolute;
  inset: 1.3px;
  background: var(--sign-bg);
  clip-path: var(--sign-arrow);
  content: "";
  transition: opacity 0.28s ease;
}

.footer-nav span i { position: relative; z-index: 1; font-style: normal; }

.footer-nav b {
  display: block;
  margin-top: 1.75rem;   /* 柱と地面のぶん下げています */
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  transition: color 0.28s ease;
}

.footer-nav small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  opacity: 0.55;
  transition: opacity 0.28s ease;
}

/* マウスでもキーボード（Tab）でも同じ見た目になるようにしています */
.footer-nav a:hover::before,
.footer-nav a:focus-visible::before { background: linear-gradient(var(--yellow), rgba(214, 189, 120, 0.7)); }
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after { width: 1.15rem; background: var(--yellow); }
.footer-nav a:hover span,
.footer-nav a:focus-visible span { color: var(--ink); transform: rotate(-2.2deg); }
.footer-nav a:hover span::before,
.footer-nav a:focus-visible span::before { opacity: 0; }
.footer-nav a:hover b,
.footer-nav a:focus-visible b { color: var(--yellow); }
.footer-nav a:hover small,
.footer-nav a:focus-visible small { opacity: 0.85; }

/* 濃紺の上では style.css の青い枠線が沈むので、金にします */
.footer-nav a:focus-visible { outline-color: var(--yellow); outline-offset: 6px; }

@media (max-width: 900px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
}

@media (max-width: 680px) {
  .footer-nav { grid-template-columns: 1fr; row-gap: 1.5rem; }
}

/* -------------------------------------------------------------------------
   13. 採用ページ（recruit.html）だけで使うもの
   ------------------------------------------------------------------------- */

/* 背景色の並び。前後のセクションと同じ色が続かないように調整 */
.sv-recruit .sv-scope { background: var(--paper-light); }
.sv-recruit .sv-cta { background: #efe8d9; }

/* 太陽マークのバッジ（数字ではないので少し大きく） */
.sv-recruit .sv-hero-id span { font-size: 1.15rem; }

/* セクションの終わりに置く補足の一文 */
.rc-note {
  max-width: 46rem;
  margin: clamp(2rem, 3.5vw, 2.8rem) 0 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.95;
  opacity: 0.85;
}

/* 「向いていないかもしれない人」 */
.rc-nofit { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: var(--paper-light); }

.rc-nofit-lead {
  max-width: 42rem;
  margin: 0 0 clamp(1.8rem, 3vw, 2.4rem);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 700;
  line-height: 1.95;
}

.rc-nofit-list {
  max-width: 52rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.rc-nofit-list li {
  position: relative;
  display: grid;
  padding: 1.5rem 0 1.5rem 2.2rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.rc-nofit-list li::before {
  position: absolute;
  top: 1.95rem;
  left: 0;
  width: 1.2rem;
  height: 2px;
  background: var(--accent);
  content: "";
}

.rc-nofit-list b {
  font-family: var(--round);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 900;
  letter-spacing: -0.015em;
}

.rc-nofit-list span { font-size: 0.9rem; font-weight: 620; line-height: 1.9; opacity: 0.85; }

/* 選考の流れ */
.rc-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  gap: 1px;
  background: var(--ink);
  list-style: none;
}

.rc-flow li {
  display: grid;
  align-content: start;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  gap: 0.6rem;
  background: white;
}

.rc-flow li > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--round);
  font-size: 0.7rem;
  font-weight: 900;
}

.rc-flow strong {
  font-family: var(--round);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.rc-flow p { margin: 0; font-size: 0.85rem; font-weight: 620; line-height: 1.85; }

/* 応募セクションの EMAIL / FORM リンク
   （トップページでは絶対配置なので、ここでは通常の並びに戻す） */
.sv-cta .contact-mini {
  position: static;
  justify-content: center;
  margin: 2rem 0 0.9rem;
  gap: 2.5rem;
}

/* 事業一覧は 7 つあるので、3 列だと最後の行にすき間が残ります。
   採用ページとお問い合わせページだけ「マス目を線で描く」方式にして、
   空いたマスが濃紺で残らないようにする。 */
.sv-recruit .sv-other-list,
.sv-contact .sv-other-list { border: 0; gap: 0; background: transparent; }
.sv-recruit .sv-other,
.sv-contact .sv-other { outline: 1px solid var(--ink); }

/* =========================================================================
   PROJECTS と COMPANY のイラスト（2026-08-08 差し替え）

   もとは CSS の図形（太陽・雲・丘・道）で組んでいましたが、Hero の山と同じ
   作法で描いた画像 4 枚に差し替えました。図形用のルールは style.css に
   残っていますが、HTML から参照しなくなったので何も描画されません。
   （style.css は元ファイルとの差分を増やさない方針なので、消していません）
   ========================================================================= */

/* カードいっぱいに画像を敷く。カードは縦横比が画面幅で変わるので cover で切る */
.project-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像の読み込み前に地色が見えるので、画像の余白と同じ生成りにしておく。
   もとは art-lime / art-coral / art-aqua が背景色を付けていた場所です。 */
.project-art { background: #f7f4eb; }

/* COMPANY のアーチ窓も同じ。もとの background: var(--sky)（水色）のままだと
   読み込み前に水色が出てしまうので上書きします。 */
.company-window { background: #f7f4eb; }

.company-window > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 事例モーダルの中の絵も同じ扱い（main.js が同じ構造を組み立てています） */
.dialog-grid .project-art > img { width: 100%; height: 100%; object-fit: cover; }

/* フッター最下部から「KAGOSHIMA & NAHA / JAPAN」を消したので、
   3列（1fr 1fr auto）のままだと TOPボタンが真ん中に残ってしまいます。2列に詰めます。 */
.footer-bottom { grid-template-columns: 1fr auto; }

/* フッター上段からも社名（晴レル屋 / HALLELUYA INC.）を消したので、
   残るのは「ロゴ」と「晴れる。道がひらく。」の2つ。3列（auto 1fr auto）だと
   右端の列が空いてコピーが左に寄るため、2列に詰めます。 */
.footer-main { grid-template-columns: auto 1fr; }

/* =========================================================================
   固定ヘッダーの色（2026-08-08）

   スクロールしてもしなくても、ヘッダーの背景は Hero と同じ生成り #f7f4eb で固定。
   もとは追従を始めたときだけ半透明のクリーム（rgba(244,239,227,.88)）に変わっていて、
   その色が Hero の生成りと微妙に違うため、境目が帯に見えていました。

   濃紺のセクション（PHILOSOPHY / SERVICES / 下層ページのヒーロー / フッター）の上でも
   同じ生成りの帯が出ますが、文字は常に濃紺のままなのでどこでも読めます。
   ========================================================================= */

.topbar {
  background: #f7f4eb;
}

/* 追従したときも色は変えない。
   下線は「色を透明にする」だけでは駄目で、太さごと 0 にします。
   もとの指定は border-bottom: 1px solid var(--line) で、
     ・太さ 0 → 1px  … 一瞬で変わるので 1px ぶんガクッと動く
     ・色 濃紺 → 透明 … border-color だけ transition されているため、
                        濃紺の線が出てから 0.35 秒かけて薄れていく
   という二段構えで、スクロールし始めに線が走って見えていました。 */
.topbar-compact {
  background: #f7f4eb;
  backdrop-filter: none;
  border-bottom: 0;

  /* 大きさも変えません。
     もとは 48px スクロールした時点で高さが 99px → 74px に縮み、
     ヘッダーの中身（ロゴ・ナビ・ボタン）が 13px ほど上へせり上がっていました。
     ページを送っている最中にヘッダーまで動くので、動きが二重になって
     「ガクッ」と引っかかって見えます。縮ませないことで、
     スクロール中にヘッダーは一切動かなくなります。 */
  min-height: 6.2rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

/* =========================================================================
   お問い合わせページ（contact.html）だけで使うもの

   下層ページの共通部品（.sv-hero / .sv-h2 / .rc-flow / .sv-others）は
   そのまま使い回しています。ここに書いてあるのは、フォームまわりだけです。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. フォームのセクション
   ------------------------------------------------------------------------- */
.ct-form-sec {
  padding: clamp(4.5rem, 8vw, 8rem) var(--page-x);
  background: var(--paper-light);
  /* SERVICES から「#form」付きで飛んできたとき、固定ヘッダーの下に
     見出しが潜り込まないように、上へ余白を確保しておきます。 */
  scroll-margin-top: 7rem;
}

.ct-form { max-width: 54rem; }

.ct-form-lead {
  margin: 0 0 clamp(2rem, 3.5vw, 2.6rem);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.9;
  opacity: 0.85;
}

/* 必須 / 任意 の小さな札 */
.ct-req,
.ct-any {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-family: var(--round);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.ct-req { background: #a66c5e; color: white; }
.ct-any { border: 1px solid var(--line); opacity: 0.7; }

/* -------------------------------------------------------------------------
   2. 入力欄
   ------------------------------------------------------------------------- */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 1.6rem);
}

.ct-field { display: grid; align-content: start; gap: 0.55rem; }
.ct-field-wide { margin-top: clamp(2.2rem, 4vw, 3rem); }

.ct-field > label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--round);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.ct-field input,
.ct-field textarea {
  width: 100%;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--ink);
  border-radius: 0.6rem;
  background: white;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.75;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-field textarea { resize: vertical; min-height: 11rem; }

.ct-field input::placeholder,
.ct-field textarea::placeholder { color: rgba(24, 39, 56, 0.38); font-weight: 600; }

.ct-field input:focus,
.ct-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 92, 125, 0.16);
}

/* 入力し終わって中身が間違っているときだけ赤くします。
   :user-invalid は「一度さわった欄」だけが対象なので、
   まだ何も入力していない段階で赤くなりません。 */
.ct-field input:user-invalid,
.ct-field textarea:user-invalid { border-color: #a6382a; }

.ct-hint { font-size: 0.78rem; font-weight: 620; line-height: 1.7; opacity: 0.72; }

/* --------------------------------------------------- 入力の形がちがうときの警告
   電話番号とメールアドレスの下に出ます（2026-08-08 追加）。
   ふだんは HTML の hidden で隠れていて、JS が文章を入れて出します。

   ★ .ct-field は display: grid なので、この段落もそのまま1行として並びます。
     [hidden] を打ち消す指定は書かないこと（書くと隠れなくなります）。
     念のため、display は指定していません。 */
.ct-field-error {
  display: flex;
  margin: 0;
  padding: 0.7rem 0.9rem;
  gap: 0.5rem;
  align-items: flex-start;
  border-radius: 0.45rem;
  background: #fdf3f1;
  color: var(--btn-hover);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.75;
}

/* display: flex を書いたので、hidden が効くように打ち消しておきます
   （.ct-submit で一度これを踏んでいます） */
.ct-field-error[hidden] { display: none; }

/* 行頭の「！」。文章そのものには含めず、記号は CSS 側で足します。 */
.ct-field-error::before {
  flex: 0 0 auto;
  font-family: var(--round);
  font-weight: 900;
  content: "！";
}

/* 警告が出ている欄は、枠も赤くします。
   :user-invalid（上の指定）は「一度さわった欄」だけが対象で、
   確認ボタンを押しただけの欄には当たらないので、こちらでも指定します。 */
.ct-field.is-invalid input { border-color: #a6382a; }
.ct-field.is-invalid input:focus {
  border-color: #a6382a;
  box-shadow: 0 0 0 3px rgba(166, 56, 42, 0.16);
}

/* -------------------------------------------------------------------------
   3. お問い合わせジャンル（チェックのカード）
   色は SERVICES のカードと同じものを、HTML 側から --g で渡しています。
   ------------------------------------------------------------------------- */
.ct-genre {
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border: 0;
}

.ct-genre legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  font-family: var(--round);
  font-size: 0.8rem;
  font-weight: 900;
}

.ct-genre-hint { margin: 0.55rem 0 0; }

/* SERVICES から来たときだけ出る一言 */
.ct-from {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--yellow);
  background: rgba(214, 189, 120, 0.16);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.8;
}

.ct-genre-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  margin-top: 1rem;
  gap: 0.7rem;
}

.ct-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 1rem 1.05rem;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* チェック本体は見た目を隠しますが、キーボードでは選べるように残します
   （display:none にすると Tab で飛べなくなるため、この形にしています） */
.ct-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ct-check-box {
  position: relative;
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 0.3rem;
  background: white;
  transition: background 0.18s ease;
}

.ct-check-box::after {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
  content: "✓";
}

.ct-check-text b {
  display: block;
  font-family: var(--round);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.ct-check-text small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--round);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

.ct-check:hover { border-color: var(--ink); }

/* 選ばれたカード。地色はそのジャンルの色を白で薄めたものです。 */
.ct-check:has(input:checked) {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--g) 26%, white);
  box-shadow: 0 0.6rem 1.6rem rgba(24, 39, 56, 0.1);
}

.ct-check:has(input:checked) .ct-check-box { background: var(--g); }
.ct-check:has(input:checked) .ct-check-box::after { opacity: 1; transform: scale(1); }
.ct-check:has(input:checked) .ct-check-text small { opacity: 0.75; }

/* キーボードで移動しているときの枠。ふだんの :focus-visible と同じ見た目にします。 */
.ct-check:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

/* 下段の2枚（その他／まだわからない）。上の事業カードとは別の箱に入れて、
   幅いっぱいを2等分して横に並べます。上は6枚ちょうどなので、
   3列でも2列でも最後の行に余りが出ません。 */
.ct-genre-extra {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.3rem;
  gap: 0.7rem;
}

/* 「まだわからない」だけは破線。ほかと性格が違うことを見た目にも出します */
.ct-check-unknown {
  border-style: dashed;
  border-width: 1.5px;
}

/* ジャンル未選択のときだけ出るお知らせ */
.ct-error {
  display: none;
  margin: 1.1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: rgba(166, 56, 42, 0.1);
  color: #8f2e22;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.7;
}

.ct-error.is-on { display: block; }

/* -------------------------------------------------------------------------
   3-2. 優先したいご返信（電話 / メール）
   ジャンルのカードと同じ形ですが、こちらはラジオなので選べるのは片方だけ。
   四角ではなく丸にして、「1つだけ」を見た目でも分かるようにしています。
   ------------------------------------------------------------------------- */
.ct-reply {
  margin: clamp(2.2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border: 0;
}

.ct-reply legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  font-family: var(--round);
  font-size: 0.8rem;
  font-weight: 900;
}

.ct-reply-hint { margin: 0.55rem 0 0; }

.ct-reply-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  max-width: 32rem;
  margin-top: 1rem;
  gap: 0.7rem;
}

.ct-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 1rem 1.05rem;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* チェックのときと同じで、見た目だけ隠してキーボード操作は残します */
.ct-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ct-radio-dot {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: white;
}

.ct-radio-dot::after {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  transform: scale(0);
  transition: transform 0.18s ease;
}

.ct-radio:hover { border-color: var(--ink); }

.ct-radio:has(input:checked) {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, white);
  box-shadow: 0 0.6rem 1.6rem rgba(24, 39, 56, 0.1);
}

.ct-radio:has(input:checked) .ct-radio-dot::after { transform: scale(1); }
.ct-radio:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   4. 同意のチェックと、送信ボタン
   ------------------------------------------------------------------------- */
.ct-agree {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  gap: 0.8rem;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.85;
  cursor: pointer;
}

.ct-agree input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.3rem 0 0;
  accent-color: var(--accent);
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  /* PCでは、まわりの入力欄より少しだけ横に広く取ります。
     幅がせまいときは、下の 680px 以下の指定で画面いっぱいに切り替わります。 */
  min-width: 16rem;
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
  padding: 1rem 2.2rem;
  gap: 0.8rem;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  box-shadow: 0 1rem 2.5rem rgba(24, 39, 56, 0.18);
  cursor: pointer;
  font-family: var(--round);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, background 0.25s ease;
}

/* 反転したときは赤ではなくゴールド。
   ゴールドの上に白文字は読みにくいので、文字は濃紺に戻します
   （#d6bd78 と #182738 のコントラスト比は約 8.2 で、十分読めます）。 */
.ct-submit:hover {
  transform: translateY(-0.25rem);
  background: var(--yellow);
  color: var(--ink);
}

.ct-submit b { font-size: 1.05rem; }

/* 送信中はボタンを押せなくします（二重送信よけ）。JS が disabled を付けます。 */
.ct-submit:disabled { cursor: default; }

/* 送信が終わったらボタンごと消します。
   ★ hidden 属性を付けるだけでは消えません。ブラウザが持っている
     [hidden] { display: none } より、上で書いた display: inline-flex のほうが
     強いためです。こう書いて打ち消しておく必要があります
     （2026-08-08、実際にボタンが残ったままになりました）。 */
.ct-submit[hidden] { display: none; }

/* --------------------------------------------------- 迷惑メールよけの「わな」
   人には見えない入力欄です。ここが埋まっていたら機械だと判断します。
   display: none にしないのは、賢いボットが「隠された欄だ」と気づいて
   避けてしまうためです。画面の外へ飛ばすだけにして、見た目には出しません。
   読み上げソフトは HTML 側の aria-hidden で、キーボードは tabindex="-1" で
   それぞれ触れないようにしてあるので、じゃまにはなりません。 */
.ct-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信できなかったときのお知らせ。
   ★クラス名を .ct-error にしないこと。あれは上のほう（「ジャンル未選択」の警告）で
     すでに使われていて、display: none ＋ .is-on で出し入れする仕組みです。
     同じ名前にすると display: none を引き継いでしまい、hidden を外しても
     画面に出てきません（2026-08-08、実際にこれで一度出なくなりました）。 */
.ct-send-error {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: clamp(1rem, 2vw, 1.3rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border: 2px solid var(--btn-hover);
  border-radius: 0.6rem;
  background: #fdf3f1;
  color: var(--btn-hover);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.85;
}
.ct-send-error:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* 送信前の確認パネル（.ct-confirm）と、送信後の完了パネル（.ct-sent）。
   中身の並べ方はまったく同じなので、見た目もそのまま共有しています。
   ★ここに display を書かないこと。書くと hidden 属性が効かなくなり、
     どちらのパネルも最初から出てしまいます。 */
.ct-sent,
.ct-confirm {
  margin-top: clamp(2rem, 3.5vw, 2.6rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--ink);
  border-radius: 0.7rem;
  background: white;
  box-shadow: 0 1rem 2.5rem rgba(24, 39, 56, 0.07);
}

.ct-sent strong,
.ct-confirm strong { display: block; font-family: var(--round); font-size: 1.15rem; font-weight: 900; }
.ct-sent p,
.ct-confirm p { margin: 0.7rem 0 0; font-size: 0.88rem; font-weight: 650; line-height: 1.9; }

.ct-sent dl,
.ct-confirm dl {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--line);
  gap: 0;
}

.ct-sent dt,
.ct-sent dd,
.ct-confirm dt,
.ct-confirm dd {
  margin: 0;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.8;
}

.ct-sent dt,
.ct-confirm dt { font-weight: 900; }
.ct-sent dd,
.ct-confirm dd { font-weight: 620; white-space: pre-wrap; word-break: break-word; }

/* -------------------------------------------------------------------------
   4-2. 送信前の確認（2026-08-08 追加）

   「入力内容を確認する」を押すと、入力欄が引っこんで、代わりにここが出ます。
   まだ送信されていないことがひと目で分かるように、
     ・枠を2本線にして、上辺だけゴールドの帯を渡す
     ・地色をほんのり生成りにする
   の2つで、白い完了パネルと区別しています。
   ------------------------------------------------------------------------- */

/* 入力欄をしまう。JS が form に is-confirming を付け外しします。
   display: none にしても、入力した値は消えませんし、送信内容にも影響しません
   （「書き直す」で戻れば、打ったままの状態が残っています）。 */
.ct-form.is-confirming .ct-form-lead,
.ct-form.is-confirming .ct-grid,
.ct-form.is-confirming .ct-reply,
.ct-form.is-confirming .ct-genre,
.ct-form.is-confirming .ct-field-wide,
.ct-form.is-confirming .ct-agree,
.ct-form.is-confirming .ct-submit { display: none; }

.ct-confirm {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  background: #fbf9f3;

  /* パネルの先頭へスクロールしたときに、固定ヘッダーの下へ
     「この内容で送信します。」が潜り込まないよう、上に余白を確保します
     （.ct-form-sec と同じやり方）。 */
  scroll-margin-top: 7rem;
}

/* 上辺のゴールドの帯。「ここが今のあなたの居場所」の目印です。 */
.ct-confirm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--yellow);
}

.ct-confirm[hidden] { display: none; }
.ct-confirm:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* 「書き直す」と「送信する」。せまいときは縦に積みます。 */
.ct-confirm-actions {
  display: flex;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
  align-items: center;
}

/* 送信ボタン。上の .ct-submit と同じ形ですが、
   .ct-submit には margin-top が入っているので、そこだけ書き直しています。 */
.ct-send {
  display: inline-flex;
  min-width: 14rem;
  padding: 1rem 2.2rem;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  box-shadow: 0 1rem 2.5rem rgba(24, 39, 56, 0.18);
  cursor: pointer;
  font-family: var(--round);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ct-send:hover { transform: translateY(-0.25rem); background: var(--yellow); color: var(--ink); }
.ct-send b { font-size: 1.05rem; }
.ct-send:disabled { transform: none; cursor: default; }

/* 「書き直す」は、押し間違えても困らない側なので、線だけの控えめな形にします。 */
.ct-back {
  display: inline-flex;
  padding: 0.85rem 1.6rem;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--round);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, color 0.25s ease;
}

.ct-back:hover { background: var(--ink); color: white; }
.ct-back:disabled { opacity: 0.45; cursor: default; }
.ct-back b { font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   5. 送ったあとの流れ
   ------------------------------------------------------------------------- */
/* 生成りが3つ続くと単調なので、この章だけ淡い緑にして色の切れ目をつくります */
.ct-flow-sec { padding: clamp(4.5rem, 8vw, 8rem) var(--page-x); background: #e7ece9; }

/* -------------------------------------------------------------------------
   5-2. 右上の「相談する」ボタンが無いページのヘッダー

   ヘッダーは「ロゴ／ナビ／相談するボタン」の3列です。ボタンを置かないページでは
   3列目が空になり、そのままだと真ん中のナビが右へずれて見えます。
   両端を同じ 1fr にして、ナビが画面の中央に来るようにします。

   ページ名ではなく「ボタンが入っていないヘッダー」で拾っているので、
   今後どのページでボタンを外しても、ここを直す必要はありません。
   （いま該当するのは contact.html と、小売・不動産の2ページです）

   980px 以下ではナビ自体が MENU ボタンに変わり、style.css が 2 列に組み直すので、
   この指定はぶつからないように 981px 以上のときだけ効かせます。
   ------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .topbar:not(:has(.topbar-contact)) { grid-template-columns: 1fr auto 1fr; }
}

/* -------------------------------------------------------------------------
   6. 幅がせまいとき
   ------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-genre-list { grid-template-columns: 1fr; }
  .ct-genre-extra { grid-template-columns: 1fr; }
  .ct-reply-list { grid-template-columns: 1fr; }
  .ct-submit { width: 100%; min-width: 0; padding-inline: 1.5rem; }
  .ct-sent dl,
  .ct-confirm dl { grid-template-columns: 1fr; }
  .ct-sent dt,
  .ct-confirm dt { padding-bottom: 0; border-bottom: 0; }

  /* 確認パネルのボタンは縦積み。「送信する」を上、「書き直す」を下にして、
     押したいほうを親指の届く位置に置きます（HTML の並びは逆なので order で入れ替え）。 */
  .ct-confirm-actions { flex-direction: column; align-items: stretch; }
  .ct-send { order: 1; width: 100%; min-width: 0; padding-inline: 1.5rem; }
  .ct-back { order: 2; width: 100%; }
}


/* -------------------------------------------------------------------------
   「相談する」ボタンのマウスオーバー色（ゴールド）

   ふだんは濃紺（--ink）、乗せるとゴールドに変わります。
   対象は2つだけ：
     ・.topbar-contact … ヘッダー右上の丸いボタン
     ・.big-contact    … CONTACT の大きい丸ボタン

   もとは style.css の --btn-hover（#bc4f3a・赤茶）でした。
   style.css は触らない方針なので、ここで上書きしています。
   --btn-hover 自体は変えていません（変えると、まだHTMLから使われていない
   お問い合わせフォームの送信ボタンまで一緒に変わってしまうため）。

   ★色は --yellow（#d6bd78）。サイトのゴールドと同じで、SERVICES カードの
     矢印ボタンのホバーと揃います。濃い方の金（#ad8740）だと白文字が
     読みにくくなるので、明るい金＋濃紺の文字にしています。
   ------------------------------------------------------------------------- */
.topbar-contact:hover,
.big-contact:hover {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

/* ヘッダー側は、もともと背景色に transition が掛かっていなかったので
   パッと切り替わっていました。乗せたとき・外したときに色がなじむよう、
   background と color も一緒に動かします。                            */
.topbar-contact { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.25s ease; }
.big-contact    { transition: transform 0.3s ease, background 0.25s ease, color 0.25s ease; }

/* 矢印の丸。ふだんは白丸に濃紺、乗せたら濃紺の丸に金の矢印で反転させます。 */
.topbar-contact b { transition: background 0.25s ease, color 0.25s ease; }
.topbar-contact:hover b { background: var(--ink); color: var(--yellow); }

/* -------------------------------------------------------------------------
   KINETIC（COMPANY の上の3本の帯）— 文字を流し続ける
   参考：at-q.com トップの「About Us」。背景の帯だけがずっと横に流れて、
   中央のものは動かない、というつくりです。

   もとの style.css では、スクロールの勢い（--scroll-nudge）に合わせて
   文字がちょっとだけ横にズレる作りでした。＝止まると文字も止まる。
   ここでは、スクロールと関係なくずっと流れる形に差し替えています。

   仕組み：
     HTML で同じ文字を6つ横に並べて（.kinetic-row > div > span）、
     その並び全体を「1つ分」＝ 100% ÷ 6 = 16.6667% だけ左に動かして
     0 に戻す、をくり返す。1つ分ちょうど動かすので、戻った瞬間が
     見た目まったく同じになり、つなぎ目が分かりません。
     ※6つなのは 4K の横長画面でも右端が途切れないようにするため。
       減らすと、広い画面で帯の右に隙間ができます。
     ※span ごとの余白は padding-right（gap ではなく）。
       gap だと最後の1つだけ余白が付かず、幅が揃わなくてズレます。

   真ん中の行だけ逆向きに流します（もとの見た目でも、真ん中だけ
   反対にズレる作りだったので、それを踏襲しています）。
   ------------------------------------------------------------------------- */
.kinetic-row > div {
  display: flex;
  width: max-content;
  transition: none;
  animation: kinetic-flow var(--kinetic-speed, 32s) linear infinite;
}
.kinetic-row > div > span { padding-right: 0.35em; }

/* 速さは行ごとに少しずらしています。同じだと3本が揃って動いて機械っぽい。 */
.kinetic-blue   > div { --kinetic-speed: 32s; }
.kinetic-yellow > div { --kinetic-speed: 24s; animation-name: kinetic-flow-reverse; }
.kinetic-red    > div { --kinetic-speed: 40s; }

@keyframes kinetic-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-16.6667%); }
}
@keyframes kinetic-flow-reverse {
  from { transform: translateX(-16.6667%); }
  to   { transform: translateX(0); }
}

/* 中央の丸ロゴ。傾き（rotate(-2deg)）をやめて、まっすぐ置きます。
   translate(-50%,-50%) は真ん中に寄せるためのものなので残します。 */
.kinetic-center { transform: translate(-50%, -50%); }


/* =========================================================================
   PROJECTS の絵は「押せる」と分かるようにする
   -------------------------------------------------------------------------
   もともとカードにマウスを乗せると 0.3rem 浮くだけで、押せるものだと
   気づきにくい状態でした。追従カーソルに「みる」の文字は出ますが、
   カーソルは小さいので見落とします。そこで絵の側で三つ同時に反応させます。

     1. 絵がゆっくり寄る（scale 1.045）……「生きている」合図
     2. 紺の幕がふわっと乗る          ……絵が一段沈んで、上に何か出る予告
     3. 金の丸ボタン「VIEW」が浮き出る ……押せる場所だと言い切る

   丸＋紺の枠＋金の塗りは、事例モーダルの閉じるボタン（.dialog-close）と
   PROJECTS の数字の横の丸（.project-result > b）で既に使っている形なので、
   新しい語彙を増やさずに済みます。

   仕掛ける相手は .project-art の ::before と ::after。どちらもこのサイトでは
   まだ未使用です。絵の上に敷きますが pointer-events: none なので、クリックは
   これまでどおり上に被さっている透明ボタン（.project-open）が受け取ります。

   ★ ホバーの起点が .project-art:hover ではなく .project-card:hover なのは、
     絵の上に .project-open（inset: 0 でカード全体を覆う透明ボタン）が
     乗っていて、絵そのものにマウスが届かないためです。結果として文章側に
     マウスを乗せたときも反応しますが、カード全体がひとつのボタンなので
     むしろ自然です。
   ========================================================================= */

/* 絵が寄る動き。ホバーできる環境だけに限定（下の @media 参照）。
   .project-art は overflow: hidden なので、はみ出した分は切られます。 */
.project-art > img { transition: transform 0.5s ease; }

/* 幕。絵の彩度を落として、上に出る金の丸を目立たせる役です。 */
.project-art::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: rgba(24, 39, 56, 0.34);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* 金の丸ボタン。文字は英字にしてあります（追従カーソルが日本語で「みる」を
   出すので、同じ言葉を二重に見せないため）。 */
.project-art::after {
  content: "VIEW ↗";
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(5.6rem, 8.5vw, 7.4rem);
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--round);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  /* 少し小さい状態から実寸へ。奥から出てくる感じにします。 */
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  pointer-events: none;
}

/* --- マウスを乗せたとき ---------------------------------------------------
   (hover: hover) で囲うのは、スマホ対策です。タッチ端末で :hover を素で使うと
   一度タップした要素にホバー状態が貼りついたまま残ります。 */
@media (hover: hover) {
  .project-card:hover .project-art > img { transform: scale(1.045); }
  .project-card:hover .project-art::before { opacity: 1; }
  .project-card:hover .project-art::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* --- キーボードで来たとき -------------------------------------------------
   Tab で透明ボタンに入ったときも同じ見た目を出します。スキップリンクを
   やめたぶん、キーボードだけで回る人がここを通る機会が増えているので、
   「今ここが押せる」が分かる状態にしておきます。
   .project-open + .project-art は「すぐ次の兄弟」の意味で、HTML の並びが
   ボタン → 絵 なのでそのまま効きます。 */
.project-open:focus-visible + .project-art > img { transform: scale(1.045); }
.project-open:focus-visible + .project-art::before { opacity: 1; }
.project-open:focus-visible + .project-art::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* 枠も光らせる。既定の点線だと紺の幕に沈んで見えないため。 */
.project-open:focus-visible + .project-art {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.project-open:focus-visible { outline: none; }

/* 事例モーダルの中にも同じ .project-art があります（main.js が組み立てている）。
   あちらは .project-card の中ではないので上のホバーは効きませんが、
   ::before / ::after の初期状態だけは当たるので、明示的に消しておきます。 */
.dialog-grid .project-art::before,
.dialog-grid .project-art::after { content: none; }


/* =========================================================================
   フッター最下部（2026-08-08 追加）

   © 表記の右にプライバシーポリシーへのリンクを足しました。
   .footer-bottom は2列（1fr auto）のグリッドで、右の列は「TOPへ」ボタンです。
   列を増やすと、幅がせまいときに組み直す指定（style.css 側）とぶつかるので、
   左の列の中に .footer-meta という入れ物を作って、その中に2つ並べています。
   ========================================================================= */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
}

.footer-meta a {
  position: relative;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

/* 下線はホバーで伸ばします（フッターの他のリンクと同じ振る舞い） */
.footer-meta a::after {
  position: absolute;
  bottom: -0.35em;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--yellow);
  content: "";
  transition: width 0.25s ease;
}

.footer-meta a:hover { opacity: 1; }
.footer-meta a:hover::after { width: 100%; }
.footer-meta a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }


/* =========================================================================
   404ページ（404.html）

   使っている部品は下層ページと同じ（.sv-hero / .sv-others）です。
   ここで足しているのは、ヒーローに置く大きな「404」の文字だけ。
   ========================================================================= */

/* パンくずのすぐ下に置くので、上の余白は詰めています。
   色は白の薄いやつ。濃紺の地に沈ませて、主役（見出し）を食わないようにします。 */
.nf-code {
  margin: clamp(1rem, 2.5vw, 1.6rem) 0 0;
  color: rgba(255, 255, 255, 0.14);
  font-family: var(--round);
  font-size: clamp(5.5rem, 17vw, 13rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.82;

  /* 中を抜いた輪郭文字にします。塗りが残っていると、
     うしろの光（.sv-hero-orb）と重なって濁って見えるためです。 */
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3);
}

/* ヒーローの中で 404 だけ前に出したいので、光より手前に置きます */
.nf-hero { position: relative; }
.nf-hero > * { position: relative; z-index: 1; }
.nf-hero .sv-hero-orb { z-index: 0; }

/* 「404」とその下の見出しは、ひとかたまりに見せたいので間を詰めます。
   （ほかの下層ページは、パンくずの下にたっぷり余白を取る作りです） */
.nf-hero .sv-hero-id { margin-top: clamp(1.4rem, 3vw, 2.4rem); }

/* 行き先の一覧。中身は下層ページの「ほかの事業を見る」と同じ部品です。 */
.nf-guide { background: var(--paper-light); }

@media (max-width: 680px) {
  .nf-code { -webkit-text-stroke-width: 1px; }
}


/* =========================================================================
   プライバシーポリシー（privacy.html）

   本文は下層ページと同じ .sv-prose を使っています。
   .sv-prose は段落（p）と見出し（h3）しか想定していなかったので、
   ここで箇条書きと会社情報の表を足しています。
   ========================================================================= */

/* 条文が続くページなので、見出しの前後をふつうより広めに取ります */
.pv-doc h3 { margin-top: clamp(2.8rem, 5vw, 3.6rem); }

.pv-doc ul {
  margin: 0 0 1.55rem;
  padding-left: 0;
  list-style: none;
}

.pv-doc li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  font-weight: 600;
  line-height: 1.95;
}

/* 行頭の点。文字色ではなくアクセント色にして、条文の区切りを見やすくします。 */
.pv-doc li::before {
  position: absolute;
  top: 0.72em;
  left: 0.25rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

/* 事業者情報。トップの会社概要（.company-card dl）と同じ組み方です。 */
.pv-info {
  display: grid;
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
  gap: 0;
}

.pv-info > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--line);
  gap: 0.5rem;
}

.pv-info dt {
  margin: 0;
  font-family: var(--round);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.pv-info dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.85;
}

.pv-info a { text-decoration: underline; text-underline-offset: 0.3em; }
.pv-info a:hover { color: var(--accent); }

.pv-date {
  margin-top: 2.4rem !important;
  font-family: var(--round);
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em;
  opacity: 0.62;
}

/* 同意チェックの中のリンク（contact.html）。文中なので下線で示します。 */
.ct-agree a { text-decoration: underline; text-underline-offset: 0.25em; }
.ct-agree a:hover { color: var(--accent); }

@media (max-width: 680px) {
  .pv-info > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* =========================================================================
   スマホのメニュー（全ページ共通）

   直した理由が3つあります。

   1.「閉じられない」
      ヘッダー（style.css の .topbar、z-index: 900）は、青いメニュー
      （.mobile-nav、z-index: 850）より手前にいます。そのヘッダーに
      このファイルの上のほうで生成り #f7f4eb の背景を敷いているので、
      メニューを開いたときの「白い CLOSE と白い×」が生成りに同化して、
      押すものが無いように見えていました。
      → 開いている間はヘッダーの背景を透明にして、×を白のまま残します。

   2.「MENU」の文字をやめて3本線に
      3本目だけ短くして、左のロゴの重さと釣り合わせています。
      見た目は小さくなりますが、当たり判定は 2.75rem（44px）角のままです。

   3. 色がサイトから浮いていた
      地色の var(--blue) #2f5c7d は、サイトの他の場所で大きく使っていない
      色でした。フッターと同じ濃紺 #101d2a に変えて、罫線・番号・矢印の
      配色もフッターの「道標」と揃えています。

   ここは style.css を書き換えずに、あとから打ち消す形で書いています。
   style.css は Codex 側の公開版と共通なので、差分を増やさないためです。
   ========================================================================= */

@media (max-width: 980px) {

  /* ---- 開くボタン（3本線） ------------------------------------------- */
  /* style.css 側は「MENU の文字＋2本線」を絶対配置で組んでいたので、
     display と margin をいったん戻してから組み直します。 */
  .nav-trigger {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem; /* 線の右端を、ロゴの左端と同じ余白に揃える */
  }

  .nav-trigger i,
  .nav-trigger i:last-child {
    position: absolute;
    right: 0.62rem;
    height: 2px;
    margin: 0;
    background: var(--ink);
    transition: top 0.25s ease, width 0.25s ease, opacity 0.15s ease,
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  }

  /* 2.75rem（44px）の中央 22px を真ん中の線に置いて、上下に 8px ずつ振り分け */
  .nav-trigger i:nth-child(1) { top: 0.875rem; width: 1.5rem; }
  .nav-trigger i:nth-child(2) { top: 1.375rem; width: 1.5rem; }
  .nav-trigger i:nth-child(3) { top: 1.875rem; width: 1rem;   }

  /* ---- 閉じるボタン（×） --------------------------------------------- */
  /* 3本を真ん中に集めて、上下を交差させます。真ん中の1本は消します。
     場所が変わらないので、開いた指をそのまま下ろせば閉じられます。 */
  .nav-open .nav-trigger i,
  .nav-open .nav-trigger i:last-child {
    top: 1.375rem;
    width: 1.5rem;
    background: white;
  }
  .nav-open .nav-trigger i:nth-child(1) { transform: rotate(45deg); }
  .nav-open .nav-trigger i:nth-child(2) { opacity: 0; }
  .nav-open .nav-trigger i:nth-child(3) { transform: rotate(-45deg); }

  /* 今回の不具合の元。開いている間だけ、ヘッダーの生成りの帯を消します。
     .topbar-compact（スクロール後）の指定も一緒に打ち消す必要があるので、
     .nav-open を頭に付けて優先度を上げています。 */
  .nav-open .topbar,
  .nav-open .topbar-compact {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
  }
  /* ロゴは濃紺のままだと沈むので、開いている間だけ白く抜きます */
  .nav-open .topbar-logo { filter: brightness(0) invert(1); }

  /* ---- メニュー本体 --------------------------------------------------- */
  /* 開き方も変えています。もとは右上を中心に円が広がるワイプでしたが、
     オープニングの幕と動きの向きが揃わないので、上から降ろします。 */
  .mobile-nav {
    z-index: 880;                    /* ヘッダー(900)より下、本文より上 */
    display: flex;
    flex-direction: column;
    height: 100svh;                  /* iOS のツールバーぶんを引いた高さ */
    padding: 7.1rem var(--page-x) calc(1.25rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;    /* 端まで送っても後ろのページを動かさない */
    clip-path: none;
    transform: translateY(-100%);
    transition: visibility 0s linear 0.55s,
                transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);

    /* 地色はフッターと同じ濃紺。その上に、足元へ山を敷きます。
       山は assets/img/menu-mountain.svg（ヒーローの絵から実測して起こしたもの）。
       濃さを変えたいときは CSS ではなく、あの SVG の中の rgba() を触ってください。

       ・background-size の 360px … 山の高さ。小さくすると控えめになります
       ・center bottom            … 画面の下辺に貼りつける
       ・no-repeat                … 繰り返さない（既定だと敷き詰められます）
       中身がはみ出て縦に送れるときも、山は画面の下に貼りついたまま動きません。 */
    background-color: #101d2a;
    background-image: url("../img/menu-mountain.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 360px;
  }

  .mobile-nav-open {
    clip-path: none;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* ---- 並び --------------------------------------------------------- */
  /* 罫線の濃さはフッターに合わせています（もとは白 55% で強すぎました）。
     右の列は矢印1文字ぶん。外部リンクではないので ↗ ではなく → です。 */
  .mobile-nav nav { border-top: 1px solid rgba(255, 255, 255, 0.22); }

  .mobile-nav nav a {
    grid-template-columns: 2.1rem 1fr 1.25rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .mobile-nav nav small { color: var(--yellow); letter-spacing: 0.06em; }

  .mobile-nav nav span {
    font-size: clamp(1.7rem, 7.4vw, 2.4rem);
    line-height: 1.05;
  }

  /* 英語の下に置く日本語。フッターの道標と同じ言い回しにしています */
  .mobile-nav nav span i {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--sans);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 650;
    letter-spacing: 0.06em;
  }

  .mobile-nav nav b {
    color: var(--yellow);
    font-size: 1rem;
    text-align: right;
  }

  /* ---- 相談するボタン ------------------------------------------------- */
  /* 980px 以下ではヘッダーの「相談する」が消えるので、ここに置き直します。
     ヘッダーにボタンを置いていないページ（contact / 小売 / 不動産）には、
     HTML 側でこの行を入れていません。 */
  .mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.6rem;
    padding: 0.85rem 1rem 0.85rem 1.3rem;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--round);
    font-size: 0.9rem;
    font-weight: 900;
  }

  .mobile-nav-cta b {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--yellow);
    font-size: 0.75rem;
  }

  /* ---- 足元 ----------------------------------------------------------- */
  .mobile-nav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--round);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.1em;
  }

  /* キーボードで送ったときの枠。濃紺の上では既定の青が沈むので黄にします */
  .mobile-nav a:focus-visible { outline-color: var(--yellow); outline-offset: 6px; }
}

@media (max-width: 680px) {
  /* ヘッダーが 6.2rem → 4.7rem に縮むぶん、メニューの上の余白も詰めます */
  .mobile-nav { padding-top: 5.6rem; }
}