@charset "UTF-8";
/* ==========================================================================
   pages/home.css — トップページ固有
   ========================================================================== */

/* ==========================================================================
   ファーストビュー ＋ 導入セクション

   .fv-stack がこの2つを包む。FVは sticky で画面に留まり、
   導入セクションが半透明パネルとして上に重なってスクロールしてくる。
   .fv-stack の終端（＝導入セクションの終端）でFVの固定が解除される。
   ========================================================================== */

.fv-stack {
  position: relative;
}

.fv {
  position: sticky;
  top: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #fff;
}

/* ==========================================================================
   背景の波（装飾）— FVと「選ばれる理由」で共有

   参照画像 名称未設定-2.jpg（8000×4501）の実測値：
     1周期        = 780px  → キャンバス高さの 17.33%
     帯の厚み     = 580px（薄い水色）/ 548px（濃い青） → 12.89% / 12.18%
     山と谷の差   = 246px  → 5.46%
     右上がりの傾き = 0.0986 → 5.63°
     中心線の高さ = 21.4%（薄い水色）/ 45.8%（濃い青）※キャンバス中央での値
     色           = #9cd4ec / #146cbc

   ジグザグの形は mask（1周期ぶんのSVGタイルを repeat-x）で抜き、
   下に敷いたグラデーションを見せている。
   要素ごと rotate して右上がりにし、mask だけを流すことで帯に沿って波が進む。
   1周期の整数倍だけ動かすのでループの継ぎ目が出ない。

   寸法はすべて --wave-scale（＝参照画像のキャンバス高さにあたる基準の長さ）に対する
   比率。上の実測値をそのまま比率として持つので、置き場所ごとに --wave-scale を
   渡すだけで、形を保ったまま大きさを変えられる。
     FV              → 画面の見えている高さ（--vis-h）
     選ばれる理由    → セクションに合わせた値（.reasons__waves で指定）

   使う側は
     親（.__waves）  … 位置の器。--wave-scale を渡す
     外側（.__wave） … 傾き・厚み・ざらつき。top で置き場所を決める
     内側（.__wave-band） … 色と波の形。動くのはここだけ
   の3階層で組む。
   ========================================================================== */

/* 外側：傾きと、ざらつき。
   ざらつきは SVGのノイズ（feTurbulence）を feColorMatrix で「白＋ムラのある不透明度」に
   変換し、それを mask にして塗りを少しずつ抜いている（印刷のかすれのような質感）。
     粒の細かさ = baseFrequency（大きいほど細かい）
     ざらつきの強さ = feColorMatrix の値
   タイルは 160px 固定。波の大きさが変わっても粒の大きさは一定になる。
   mask は入れ子にすると自然に重なる（＝両方が効く）ので、
   対応状況が読みにくい mask-composite を使わずに済ませている。
   こちらは動かさないので、ざらつきはその場に留まる。 */
.fv__wave,
.reasons__wave {
  --wave-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='160' height='160' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 0.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --wave-period: calc(var(--wave-scale) * 0.1733);
  /* 色のうねりの周期。色は動かさないので、波だけが色の中を通っていく */
  --wave-tint: calc(var(--wave-period) * 4);

  position: absolute;
  /* 傾けたときに両端が内側へ寄るので、左右にはみ出させておく */
  left: -15%;
  width: 130%;
  height: calc(var(--wave-scale) * 0.1906);
  /* 傾きは置き場所ごとに変えられるようにしてある（既定は参照画像どおりの -5.63deg） */
  transform: rotate(var(--wave-tilt, -5.63deg));
  -webkit-mask-image: var(--wave-grain);
          mask-image: var(--wave-grain);
  -webkit-mask-size: 160px 160px;
          mask-size: 160px 160px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* 内側：色（グラデーション）と波の形。
   帯そのものは動かさない（動かすと剛体がスライドして見える）。
   グラデーションは要素に固定したまま、波の形の mask だけを流す。 */
.fv__wave-band,
.reasons__wave-band {
  position: absolute;
  inset: 0;
  background-image: var(--wave-gradient);
  background-repeat: repeat-x;
  background-size: var(--wave-tint) 100%;
  -webkit-mask-image: var(--wave-mask);
          mask-image: var(--wave-mask);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: var(--wave-period) 100%;
          mask-size: var(--wave-period) 100%;
  animation: wave-ripple var(--wave-speed, 5s) linear infinite;
}

/* 上：薄い水色。線幅130（SVG内の単位。200単位＝1周期）。
   斜めに走るぶん、見かけの縦の厚みは参照画像の580px相当になる */
.fv__wave--cyan,
.reasons__wave--cyan {
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220' preserveAspectRatio='none'%3E%3Cpath d='M-92.3 78.5L0 141.5L107.7 78.5L200 141.5L307.7 78.5' fill='none' stroke='%23fff' stroke-width='130' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wave-gradient: linear-gradient(90deg, #aeddf2 0%, #79c4ea 50%, #aeddf2 100%);
}

/* 下：濃い青。線幅121.4（見かけの縦の厚み548px相当）。
   うねりの速さを変えて、上下2本が同じ動きにならないようにしている */
.fv__wave--blue,
.reasons__wave--blue {
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220' preserveAspectRatio='none'%3E%3Cpath d='M-92.3 78.5L0 141.5L107.7 78.5L200 141.5L307.7 78.5' fill='none' stroke='%23fff' stroke-width='121.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wave-gradient: linear-gradient(90deg, #146cbc 0%, #57a7de 50%, #146cbc 100%);
  --wave-speed: 7s;
}

/* 動かすのは mask（波の形）だけ。帯そのものもグラデーションも動かさない。
   色がその場に留まったまま山と谷だけが進むので、
   「帯がスライドしている」ではなく「線が波打っている」ように見える。
   1周期ぶん進むと元と同じ絵になるため、ループの継ぎ目は出ない。 */
@keyframes wave-ripple {
  from {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
  to {
    -webkit-mask-position: var(--wave-period) 0;
            mask-position: var(--wave-period) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv__wave-band,
  .reasons__wave-band {
    animation: none;
  }
}

/* FVの波は、SPではイラストが全幅になり居場所がないため、PC（900px〜）でのみ表示する。
   置き場所の指定は下の @media (min-width: 900px) 内。 */
.fv__waves {
  display: none;
}

/* --------------------------------------------------------------------------
   黄色の装飾（PCのみ。SPはイラストが全幅で置き場所がないため出さない）

   参照画像 fv_1.jpg（7921×4117・ヘッダー込みのスクリーンショット）の実測値。
   コピーの字面左端が画面幅の5.01%（実装値5.00%）で一致したので、
   同じ画面を撮ったものとして FV の座標系に換算した（ヘッダー700px／見えている高さ3417px）。

     色           #e4ec64
     円           中心 left 5.86% / top 21.22%   直径 24.50%
     四角形       中心 left 30.27% / top 59.80%  一辺 10.01%  傾き 25°
     三角形       重心 left 38.44% / top 8.90%   一辺 10.68%  傾き 19.4°（正三角形）
     パーティクル 中心 left 91.20% / top 8.78%   高さ 12.50%

   left は FV幅に対する割合（cqw）、top とサイズは --vis-h に対する割合。
   -------------------------------------------------------------------------- */

/* 形・色・動きはここに、大きさと置き場所は画面幅ごとの指定に分けてある
   （PCは下の @media (min-width: 900px)、スマホは「モバイルでのイラストの見せ方」の中）。
   出す・出さないも画面幅ごとに切り替える。 */
.fv__deco {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* left / top は図形の中心。負のマージンで中心合わせしているので、
   transform はアニメーション専用に空けてある。 */
.fv__deco > * {
  position: absolute;
  display: block;
  color: #e4ec64;
}

.fv__deco-circle {
  background-color: currentColor;
  border-radius: 50%;
  animation: fv-deco-liquid 9s ease-in-out infinite,
             fv-deco-spin 26s linear infinite,
             fv-deco-float 13s ease-in-out infinite;
}

/* 正三角形。高さ＝一辺×0.866、重心は上から2/3の位置なので、そこを基準にする */
.fv__deco-triangle {
  background-color: currentColor;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  /* アニメーションを止めたときも参照画像と同じ傾きになるようにしておく */
  transform: rotate(19.4deg);
  transform-origin: 50% 66.667%;
  animation: fv-deco-triangle 13s linear infinite;
}

.fv__deco-square {
  background-color: currentColor;
  transform: rotate(25deg);
  animation: fv-deco-square 17s linear infinite;
}

.fv__deco-particle {
  overflow: visible;
}

/* 4本を少しずつずらして光らせると、単純な点滅よりきらめいて見える。
   ずらし幅は1周期に対する比率を保ってあるので、周期を変えても見え方は変わらない */
.fv__deco-particle path {
  stroke: currentColor;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: fv-deco-particle 3s ease-in-out infinite;
}

.fv__deco-particle path:nth-child(2) { animation-delay: 0.12s; }
.fv__deco-particle path:nth-child(3) { animation-delay: 0.24s; }
.fv__deco-particle path:nth-child(4) { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .fv__deco-circle,
  .fv__deco-triangle,
  .fv__deco-square,
  .fv__deco-particle path {
    animation: none;
  }
}

/* 円：液状にゆっくり変形しながら、変形が一周するように回す */
@keyframes fv-deco-liquid {
  0%, 100% { border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%; }
  33%      { border-radius: 57% 43% 41% 59% / 44% 59% 41% 56%; }
  66%      { border-radius: 42% 58% 59% 41% / 59% 46% 54% 41%; }
}

/* 変形が一周するようにゆっくり回す。
   下の fv-deco-float と同時に掛けるため、transform ではなく
   個別プロパティ（rotate / translate）を使って衝突を避けている。 */
@keyframes fv-deco-spin {
  to { rotate: 360deg; }
}

/* ふわふわと少しだけ位置を変える。数値は円の直径に対する割合 */
@keyframes fv-deco-float {
  0%, 100% { translate: 0 0; }
  25%      { translate: 2.2% -5.5%; }
  50%      { translate: -3.2% 1.8%; }
  75%      { translate: 1.4% 4.6%; }
}

/* 三角形：時計回りに回りながら縮小拡大 */
@keyframes fv-deco-triangle {
  0%   { transform: rotate(19.4deg) scale(1); }
  50%  { transform: rotate(199.4deg) scale(0.72); }
  100% { transform: rotate(379.4deg) scale(1); }
}

/* 四角形：反時計回りに回りながら縮小拡大 */
@keyframes fv-deco-square {
  0%   { transform: rotate(25deg) scale(1); }
  50%  { transform: rotate(-155deg) scale(0.75); }
  100% { transform: rotate(-335deg) scale(1); }
}

/* パーティクル：1.5秒で現れて消える */
@keyframes fv-deco-particle {
  0%   { opacity: 0; transform: scale(0.3); }
  28%  { opacity: 1; transform: scale(1); }
  58%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* --------------------------------------------------------------------------
   キャッチコピー

   色は1文字おきの市松。地の色が薄い青で、em を入れた文字が濃い青。
   参照画像（名称未設定-1.jpg）の実測値：
     文字サイズ  = キャンバス高さの 6.92%
     字送り      = 0.134em
     行送り      = 2.02
     左位置      = 左端から 286/8000
     下位置      = 下端から 241/4500
   -------------------------------------------------------------------------- */

.fv__copy {
  font-family: 'Dela Gothic One', var(--ff-heading);
  font-weight: var(--fw-body);
  line-height: 1.97;
  letter-spacing: 0.134em;
  color: #489ad8;
}

.fv__copy-line {
  display: block;
  white-space: nowrap;
}

/* 1文字ずつ左から順に、拡大しながら跳ねる。
   文字は initFvCopy() が span に分割し、何文字目かを --i で渡してくる。

   1文字あたりの動き   0.62秒（0.25秒で上がりきり → 0.46秒で着地 → 0.62秒で小さく跳ね返って終了）
   次の文字までの間隔  0.12秒 … 着地（0.46秒）より短いので、前の文字が降りきる前に次が動き出す
   全16文字           最後の「い」は 15×0.12＝1.80秒 に始まり 2.42秒 に終わる
   1周期              2.42秒 ＋ インターバル3.00秒 ＝ 5.42秒
   キーフレームの % は 5.42秒 に対する割合（0.25秒→4.6% / 0.46秒→8.5% / 0.62秒→11.45%） */
.fv__copy.is-split .fv__copy-char {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: fv-copy-bounce 5.42s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes fv-copy-bounce {
  0%     { transform: translateY(0) scale(1);
           animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); }
  4.6%   { transform: translateY(-0.1em) scale(1.075);
           animation-timing-function: cubic-bezier(0.6, 0, 0.75, 1); }
  8.5%   { transform: translateY(0) scale(1);
           animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); }
  10%    { transform: translateY(-0.03em) scale(1.022); }
  11.45% { transform: translateY(0) scale(1); }
  100%   { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fv__copy.is-split .fv__copy-char {
    animation: none;
  }
}

.fv__copy em {
  font-style: normal;
  color: #176ebc;
}

/* タブレット（600〜899px）：イラストの下に通常の見出しとして置く。
   スマホ（599px以下）はイラストに重ねる。指定は下の「モバイルでのイラストの見せ方」に続けてある */
@media (min-width: 600px) and (max-width: 899px) {
  .fv__copy {
    margin-block: clamp(20px, 5vw, 40px) 0;
    padding-inline: var(--container-pad);
    font-size: clamp(24px, 7.2vw, 56px);
  }
}

/* 背景イラスト＋作業員アニメーションの「舞台」。
   中身はすべて舞台に対する % 指定なので、舞台が伸縮しても位置関係は崩れない。 */
.fv__scene {
  position: relative;
  width: 100%;
  margin-left: auto;
  aspect-ratio: 1448 / 1086;
}

/* --------------------------------------------------------------------------
   モバイルでのイラストの見せ方（参照：assets/image/sample/top_mb/fv.jpg）

   サンプルはイラストの左上あたりを拡大して切り取った縦長の絵。
   サンプル（1562×2484）の中の額縁・時計・観葉植物・キャビネットの位置を
   イラスト原寸（1448×1086）と照合した実測値：

     倍率            原寸の 2.55 倍
     見えている範囲  x = -146 〜 467 ／ y = 0 〜 974
                     → 左端の外側に146px（白地）、右はイラストの32%まで、下は10%を切る
     結果            奥のエクストラクターは枠の外、手前のポリッシャーだけが見える

   枠（.fv__frame）で切り取り、中の舞台（.fv__scene）を拡大して置くことで再現している。
   作業員は舞台に対する％配置なので、舞台ごと拡大しても位置関係は崩れない。
   PCでは枠は position: static のままなので、レイアウトには何も影響しない
   （舞台は .fv に対して絶対配置される）。

   この切り取りはスマホ幅（599px以下）だけに掛ける。
   タブレット幅（600〜899px）で同じ縦横比にすると、768px幅で高さ1221pxの
   イラストになり、最初の画面がイラストだけで埋まってしまうため。
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  .fv__frame {
    position: relative;
    overflow: hidden;
    /* サンプルと同じ縦横比 */
    aspect-ratio: 1562 / 2484;
  }

  /* 枠の幅がイラスト613px相当。イラストの左端は枠の 146/613 = 23.8% の位置、
     イラスト全体（1448px）は枠の 1448/613 = 236.2% の幅になる */
  .fv__scene {
    position: absolute;
    top: 0;
    left: 23.8%;
    width: 236.2%;
  }

  /* 奥のエクストラクターは切り取りの外。読み込むだけ無駄なので出さない
     （切り取り範囲を変えたら、この指定も見直すこと） */
  .fv__worker--vacuum {
    display: none;
  }

  /* キャッチコピーはイラストに重ねて左下に置く。
     サンプル（1562×2484）の文字の外接矩形を実測した値：

       1行目「足元がキレイだと」  x 48〜900 ／ y 2119〜2199
       2行目「毎日が気持ちいい」  x 48〜903 ／ y 2316〜2389

     枠の幅1562pxを画面幅とみなして換算すると
       文字の左端   枠幅の 3.07%
       字面の幅     8文字で枠幅の 54.5% → 文字サイズ 6.15vw
       2行目の下端  枠の下端から 3.8%
     字面と要素の箱は行間のぶんだけずれるので、left / bottom は実測して合わせている。 */
  .fv__copy {
    position: absolute;
    z-index: 1;
    left: 3%;
    bottom: 1.6%;
    margin: 0;
    padding: 0;
    font-size: 6.15vw;
  }

  /* 背景の波。サンプルでは左の白地に2本が見えていて、イラストに掛かる部分は
     イラストの白地に隠れている（＝波はイラストより後ろ。DOM順とz-indexで実現済み）。

     形と動きの指定はPCと共通（上部の「背景の波（装飾）」）。ここでは
     大きさ（--wave-scale）・傾き（--wave-tilt）・置き場所だけを渡している。
     いずれも画面幅が基準なので、スマホの幅が変わっても構図は変わらない。

     サンプルはPCより急な傾きで、階段状に見える。イラストに掛からない範囲
     （x < 360）の帯を実測して合わせた値：

       | | サンプル | 実装 |
       | 水色の厚み（最小/最大） | 259 / 431 | 258 / 416 |
       | 水色の中心（x=0〜300の平均） | 699 | 701 |
       | 青の厚み（最小/最大） | 243 / 413 | 242 / 395 |
       | 青の中心 | 1323 | 1326 |

     （単位はサンプル画像の px。1562×2484 ＝ 390px幅の4倍で描画して突き合わせた）
     波は左へ流れ続けるので、山谷の位置（位相）は合わせていない。 */
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .fv__waves {
      display: block;
    }
  }

  .fv__waves {
    --wave-scale: 145vw;
    --wave-tilt: -25.7deg;

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .fv__wave--cyan {
    top: 7.2%;
  }

  .fv__wave--blue {
    top: 32.4%;
  }

  /* ------------------------------------------------------------------------
     黄色の装飾（形・色・動きは上部にまとめてある。ここは大きさと置き場所だけ）

     PCより小さくして、イラストの絵柄と重ならない空きに置いている。
       円     2本目（青）の波の下。左端から少しはみ出させる
       四角   左上の空き（1本目の波より上）
       三角   上中央より少し右。イラストの天井あたりに重ねる
     大きさは画面幅基準（vw）、置き場所は枠に対する％。
     きらめき（パーティクル）はイラストと重なって見づらいので出さない。
     ------------------------------------------------------------------------ */

  .fv__deco {
    display: block;
  }

  .fv__deco-circle {
    left: 8%;
    top: 72%;
    width: 22vw;
    height: 22vw;
    margin: -11vw 0 0 -11vw;
  }

  .fv__deco-square {
    left: 13%;
    top: 11%;
    width: 12vw;
    height: 12vw;
    margin: -6vw 0 0 -6vw;
  }

  .fv__deco-triangle {
    left: 58%;
    top: 9%;
    width: 12vw;
    /* 正三角形の高さ＝一辺×0.866 */
    height: 10.39vw;
    margin: -6.93vw 0 0 -6vw;
  }

  .fv__deco-particle {
    display: none;
  }
}

.fv__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 作業員アニメーション（500×500 の正方形素材）。
   位置とサイズは ChatGPT Image 2026年8月7日 17_13_44.png の合成位置に合わせている。 */
.fv__worker {
  position: absolute;
  width: 27.4%;
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

/* 手前左：ポリッシャー */
.fv__worker--polisher {
  left: 4.6%;
  top: 46.1%;
  width: 27.4%;
}

/* 奥右：エクストラクター（手前より遠いぶん小さい） */
.fv__worker--vacuum {
  left: 45.1%;
  top: 17.9%;
  width: 21.4%;
}

/* --------------------------------------------------------------------------
   ポリッシャーの WebM ／ スマホ用アニメーション 出し分け

   iOS Safari は WebM のアルファチャンネルに対応しておらず、透過部分が黒く
   塗りつぶされる。768px以上はこれまでどおりWebM、767px以下は同じ絵の
   アニメーションWebP（assets/animation/washman_2-mobile.webp）に
   差し替えて回避している。

   クラス名を形式名（--apng など）にすると素材を替えるたびに名前が合わなくなるため、
   役割で `--mobile` としている。

   素材はどちらも正方形。位置・大きさは上の .fv__worker--polisher（％指定）が
   そのまま効くため、ここでは表示・非表示だけを切り替える。
   （left / top / width / aspect-ratio には一切触っていない）

   !important について：
   実機で確実に消えることを最優先するため、ここだけ例外的に使っている。
   要素名まで含めた `video.fv__worker--polisher` にしているので、
   将来ほかのルールが増えても打ち負けない。
   -------------------------------------------------------------------------- */

/* <picture> は素材の出し分けをするためだけの入れ物。
   ボックスを作らせるとSafariが .fv__scene の幅計算を変えてしまい、
   PCでイラストが縮んでしまう（Chromeでは起きない）。
   display: contents で中の <img> だけを .fv__scene の子として扱わせる。 */
.fv__worker-picture {
  display: contents;
}

.fv__worker--mobile {
  display: none;
}

@media (max-width: 767px) {
  /* 767px以下ではWebMを確実に消す */
  .fv__worker--video,
  video.fv__worker--polisher {
    display: none !important;
  }

  /* 代わりにスマホ用アニメーションを確実に出す */
  .fv__worker--mobile,
  .fv__worker--polisher.fv__worker--mobile {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Safari(WebKit) での差し替え（2026-09-01）

   Safari は WebM の透過に対応しておらず、透明部分が黒く塗られる。
   iOS だけでなく Mac の Safari でも起きるため、画面幅に関係なく動画を止めて
   アニメWebP（＝スマホと同じ素材）に寄せる。
   印を付けているのは index.html の head のインラインスクリプト。

   767px以下の指定と同じことを、幅の条件なしでもう一度書いている。
   詳細度は「クラス2つ＋要素名」で、上の 767px 用ルールと打ち消し合わない。
   -------------------------------------------------------------------------- */

.no-webm-alpha video.fv__worker--polisher {
  display: none !important;
}

.no-webm-alpha .fv__worker--polisher.fv__worker--mobile {
  display: block !important;
}

/* アニメーションWebPは再生を止められないため、モーションを減らす設定のときは
   WebM側と同じポスター画像（＝静止画）に差し替える。
   ネストした @media は使わず、条件を並べて書く（パーサ差異を避けるため）。
   2026-09-01：Safari は幅に関係なくWebPになるので、幅なしの条件も足した。 */
@media (prefers-reduced-motion: reduce) {
  .no-webm-alpha .fv__worker--mobile {
    content: url("../../image/home/washman-2-poster.webp");
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fv__worker--mobile {
    content: url("../../image/home/washman-2-poster.webp");
  }
}

/* --------------------------------------------------------------------------
   FV出し分けのデバッグ表示

   URLの末尾に ?debug=fv を付けたときだけ有効になる（main.js が
   <html> に .is-fv-debug を付ける）。実機で「どちらが表示されているか」を
   目で判別するための仕組みで、通常の閲覧には一切影響しない。
   -------------------------------------------------------------------------- */

.is-fv-debug .fv__worker--mobile {
  outline: 5px solid #ff0000;
}

.is-fv-debug .fv__worker--video {
  outline: 5px solid #00c8ff;
}

.fv-debug {
  display: none;
}

.is-fv-debug .fv-debug {
  display: block;
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 9999;
  max-width: calc(100vw - 16px);
  padding: 10px 12px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.85);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  white-space: pre;
}

/* PC：白地の上に、イラストを右端・画面高さいっぱいで置く。
   16:9 の画面では舞台幅がちょうど 75% になり、左側に見出し用の余白が残る。 */
@media (min-width: 900px) {
  /* .fv 自体は画面いっぱい（100svh）。sticky で top: 0 に貼り付くので、
     ヘッダーが引っ込んでも上に隙間ができない。
     （ヘッダーが隠れるのは scrollY > ヘッダー高さ のときで、
       そのときFVはすでに top: 0 に到達している）

     --vis-h = ヘッダーの下に「見えている」高さ。初期表示の見え方はこれで決まるので、
               イラストとコピーの寸法・位置はすべて --vis-h と --scene-w を基準にする。
               コピーは top で置く（bottom だとFV下端＝画面外が基準になってしまう）。

     --scene-w = イラストの幅。参照画像どおり FV幅の75%。
                 ただし縦横比を保つと縦に長くなり、はみ出したぶんは下端が切れるので、
                 切れ幅が16%を超えないところで頭打ちにしている
                 （そうしないと縦が短いウィンドウで作業員の足元まで切れる）。
                   はみ出し16%まで許容 ⇒ 幅 ≦ --vis-h × 1.16 × 1448/1086 = --vis-h × 1.5468
                 1920×1080 / 1440×900 / 1280×800 では頭打ちにならず 75% になる。

     イラストもコピーも --scene-w を基準に置いているので、
     大きさを変えたいときはこの1行を直せば両方が同じ比率のまま追従する。
     cqw（＝FV幅の1%）を使うため .fv をコンテナにしている。 */
  .fv {
    --vis-h: calc(100svh - var(--header-h));
    --scene-w: min(75cqw, calc(var(--vis-h) * 1.5468));

    container-type: inline-size;
    top: 0;
    height: 100svh;
  }

  /* 参照画像（8000×4500）では、イラストは x=2000〜8000 の右端寄せ。
     下端のはみ出しは .fv の overflow: hidden で切っている。 */
  .fv__scene {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--scene-w);
    height: auto;
  }

  /* mask が効かない環境では帯がただの長方形になってしまうので、その場合は出さない */
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .fv__waves {
      display: block;
    }
  }

  /* 波の大きさの基準は「見えている高さ」。画面の高さに合わせて波も伸び縮みする。
     形と動きの指定は上部の「背景の波（装飾）」にまとめてある。 */
  .fv__waves {
    --wave-scale: var(--vis-h);

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .fv__wave--cyan {
    top: calc(var(--vis-h) * 0.1189);
  }

  .fv__wave--blue {
    top: calc(var(--vis-h) * 0.3622);
  }

  /* ------------------------------------------------------------------------
     黄色の装飾（大きさと置き場所だけ。形・色・動きは上部にまとめてある）
     ------------------------------------------------------------------------ */

  .fv__deco {
    display: block;
  }

  .fv__deco-circle {
    left: 5.86cqw;
    top: calc(var(--vis-h) * 0.2122);
    width: calc(var(--vis-h) * 0.245);
    height: calc(var(--vis-h) * 0.245);
    margin: calc(var(--vis-h) * -0.1225) 0 0 calc(var(--vis-h) * -0.1225);
  }

  .fv__deco-triangle {
    left: 38.44cqw;
    top: calc(var(--vis-h) * 0.089);
    width: calc(var(--vis-h) * 0.1068);
    height: calc(var(--vis-h) * 0.0925);
    margin: calc(var(--vis-h) * -0.0617) 0 0 calc(var(--vis-h) * -0.0534);
  }

  .fv__deco-square {
    left: 30.27cqw;
    top: calc(var(--vis-h) * 0.598);
    width: calc(var(--vis-h) * 0.1001);
    height: calc(var(--vis-h) * 0.1001);
    margin: calc(var(--vis-h) * -0.05005) 0 0 calc(var(--vis-h) * -0.05005);
  }

  .fv__deco-particle {
    left: 91.2cqw;
    top: calc(var(--vis-h) * 0.0878);
    width: calc(var(--vis-h) * 0.0864);
    height: calc(var(--vis-h) * 0.125);
    margin: calc(var(--vis-h) * -0.0625) 0 0 calc(var(--vis-h) * -0.0432);
  }

  /* 文字サイズは参照画像の実測値（イラスト幅 6000 に対して 311.4 ＝ 5.19%）。
     横位置は画面左端から5%（字面の左端。左サイドベアリング 0.0207em ぶん手前に置く）。
     縦は「見えている下端」から 241/4500 上に字面の下端がくる位置。
     2行 × line-height 1.97 ＝ 3.94em ぶん戻して top で指定している。 */
  .fv__copy {
    position: absolute;
    z-index: 1;
    left: calc(5cqw - var(--scene-w) * 0.00107);
    top: calc(var(--vis-h) * 0.94644 + var(--scene-w) * 0.02896 - 3.94em);
    margin: 0;
    font-size: calc(var(--scene-w) * 0.0519);
  }
}

/* --------------------------------------------------------------------------
   導入セクション（FVの上に重なる半透明パネル）
   -------------------------------------------------------------------------- */

.intro {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 9vh, 120px);
}

/* 1画面分の高さを確保する。これがないと導入セクションが画面に収まってしまい、
   最後まで読む前にFVの固定が外れる。 */
@media (min-width: 900px) {
  .intro {
    min-height: 100vh;
    display: grid;
    align-content: center;
  }
}

.intro__panel {
  width: min(92%, 1400px);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  border-radius: clamp(20px, 2.2vw, 40px);
  /* FVが透けて見える半透明パネル */
  background-color: rgba(255, 255, 255, 0.74);
  box-shadow: 0 24px 64px rgba(14, 78, 150, 0.12);
}

/* 対応ブラウザでは背景をぼかして、下のイラストと文字が干渉しないようにする */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .intro__panel {
    background-color: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

@media (min-width: 900px) {
  .intro__panel {
    grid-template-columns: 1fr 0.78fr;
    align-items: center;
  }
}

/* サンプルでは1行あたり最長22文字が1行に収まる。
   左カラムの幅に対して字送りが収まるサイズにしている。 */
/* 色は市松の2色。指定はサービスセクションのタイトルと共有している */
.intro__title {
  font-size: clamp(18px, 1.95vw, 30px);
  font-weight: var(--fw-title);
  line-height: 1.6;
  letter-spacing: 0;
}

.intro__text {
  margin-top: clamp(20px, 2.4vw, 36px);
  font-size: clamp(13px, 1.05vw, 16px);
  /* 半透明パネルの上に載るので、本文（400）より一段階太くして読みやすくしている */
  font-weight: var(--fw-label);
  line-height: 2.1;
  color: var(--c-text);
}

.intro__text p + p {
  margin-top: 1.4em;
}

/* --- 右側の画像 --- */

.intro__media {
  display: grid;
  gap: clamp(12px, 1.8vw, 28px);
  justify-items: center;
}

/* 900px未満ではパネルが1カラムになり、画像2枚がセクションの一番下に積まれる。
   そこまで縦に長くする必要はないので出さない（lazy 指定なので通信も発生しない）。 */
@media (max-width: 899px) {
  .intro__media {
    display: none;
  }
}

/* 2枚を縦に積んでもセクションが1画面（min-height: 100vh）に収まる幅に抑えている */
.intro__frame {
  width: min(100%, 420px);
  aspect-ratio: 320 / 220;
  object-fit: cover;
  border: 2px solid var(--c-brand-blue);
  border-radius: clamp(12px, 1.6vw, 24px);
  background-color: #fff;
}

/* ==========================================================================
   お困りごと（デザインサンプル section_2.jpg に準拠）

   背景 #EAEFF5 の上に白い角丸パネル。
   パネル内に「見出し＋アバター」と、黒枠のカード4枚。
   パネルの外・下に「ひとつでも当てはまったら…」と作業員アイコンを置く。
   ========================================================================== */

.worry {
  /* 導入セクションと同じく、FVの上に半透明のまま重なってスクロールする */
  position: relative;
  z-index: 1;
  background-color: rgba(234, 239, 245, 0.86);
  padding-block: clamp(48px, 7vw, 104px);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .worry {
    background-color: rgba(234, 239, 245, 0.74);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.worry__inner {
  width: min(92%, 1240px);
  margin-inline: auto;
}

.worry__panel {
  padding: clamp(24px, 4.7vw, 68px);
  /* まわり（青みのある半透明の地）と分けるため、青みのない明るいグレー。
     中の白い吹き出しも浮いて見える */
  background-color: #f2f2f2;
  border-radius: clamp(20px, 2.4vw, 40px);
}

/* --- 見出しと吹き出しの舞台 ---
   参照画像（section_11.jpg・パネル 4800×2994）の実測から、
   吹き出しの位置と大きさをパネルに対する % で置いている。
   舞台の縦横比も参照画像に合わせているので、画面幅が変わっても配置は崩れない。 */

.worry__stage {
  position: relative;
  aspect-ratio: 4800 / 2994;
}

/* 見出しは舞台の中央 */
.worry__head {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 32px);
}

.worry__avatar {
  flex-shrink: 0;
  width: clamp(72px, 10vw, 144px);
  height: auto;
}

.worry__title {
  font-size: clamp(17px, 2.2vw, 32px);
  font-weight: var(--fw-title);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* 区切りの出し分け（既定＝PCは「・」） */
.worry__sep--sp {
  display: none;
}

.worry__lead em {
  font-style: normal;
  color: var(--c-brand-blue);
}

/* --- 吹き出し ---
   影は吹き出しの形にだけ掛けたいので、filter は img に当てている
   （要素に掛けると文字にも影が付いてしまう）。
   --body は SVG の本体（しっぽを除いた丸い部分）の中心。文字はそこに合わせる。 */

.worry__bubble {
  position: absolute;
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  transition: opacity 0.7s ease var(--d, 0s),
              transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1.15) var(--d, 0s);
}

.worry__bubble img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(52, 52, 52, 0.18));
}

.worry__bubble span {
  position: absolute;
  top: var(--body, 42%);
  left: 0;
  width: 100%;
  padding-inline: 8%;
  transform: translateY(-50%);
  font-size: clamp(11px, 1.35vw, 20px);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  color: var(--c-ink);
}

/* 現れたあとは、その場で少しだけ漂わせる。
   出現は transform、漂いは translate と別のプロパティを使っているのでぶつからない。 */
.worry__panel.is-visible .worry__bubble {
  opacity: 1;
  transform: none;
  animation: worry-float var(--float, 9s) ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) + 0.9s);
}

/* 動きすぎないよう、振れ幅は吹き出しの大きさの数%に抑えている */
@keyframes worry-float {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0.8% -1.7%; }
  50%      { translate: -1.1% 0.9%; }
  75%      { translate: 0.5% 1.6%; }
}

.worry__bubble--1 { left: 4.8%;  top: 8.2%;  width: 24.1%; --body: 43.4%; --float: 9s; }
.worry__bubble--2 { left: 38.1%; top: 1.8%;  width: 39.9%; --body: 38.3%; --float: 11.5s; }
/* 3（毛並み）は参照画像より少し下、5（どこに〜）は少し中央寄りに調整している */
.worry__bubble--3 { left: 75.1%; top: 56%;   width: 24.3%; --body: 43.2%; --float: 8.4s; }
.worry__bubble--4 { left: 2.6%;  top: 66.3%; width: 28.4%; --body: 38.6%; --float: 10.6s; }
.worry__bubble--5 { left: 43%;   top: 66.3%; width: 27.5%; --body: 45.0%; --float: 12.3s; }

/* SP：舞台の縦横比だと吹き出しが小さくなりすぎるので、縦に積み替える */
@media (max-width: 767px) {
  .worry__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 3vw, 18px);
    aspect-ratio: auto;
  }

  .worry__head {
    position: static;
    order: -1;
    margin-bottom: clamp(8px, 3vw, 16px);
  }

  /* 区切りを「、」＋改行にして3行に分ける */
  .worry__sep--pc {
    display: none;
  }

  .worry__sep--sp {
    display: inline;
  }

  /* アイコンの右に入る幅は狭い。17pxのままだと最後の「か？」だけが
     次の行に落ちるので、行が折り返さない大きさまで下げる。
     いちばん長い行は「こんなお困りありませんか？」の13文字。 */
  .worry__title {
    font-size: clamp(12px, 3.6vw, 17px);
  }

  /* position は relative にすること（static にしてはいけない）。

     中の <span>（文字）は position: absolute で、吹き出しの中に置いている。
     static にすると基準が .worry__stage まで遡ってしまい、文字が吹き出しの外へ飛ぶ。

     PCは吹き出し自身が absolute なので基準になるが、SPは縦積みにするため
     absolute を外す。そのとき relative にしておかないと基準が無くなる。

     transform や translate も基準を作るので、出現アニメーション中と
     漂うアニメーション中はたまたま吹き出しが基準になる。
     問題はその2つの隙間（transform が none になってから
     worry-float が始まる 0.9秒後まで）で、ここだけ基準が外れる。
     Chromeは待ち時間中も基準を作るので起きないが、
     Safari（iPhone）では文字が最大280pxほど飛び出していた。
     モーションを減らす設定では worry-float 自体が動かないため、ずれたままになる。 */
  .worry__bubble {
    position: relative;
    /* PC用に .worry__bubble--N で入れてある left / top を打ち消す。
       static のときは無視されるが、relative では「ずらす量」として効いてしまい、
       吹き出しが右下へ飛んで横スクロールが出る。 */
    inset: auto;
    width: min(86%, 340px);
  }

  .worry__bubble--2,
  .worry__bubble--4 { align-self: flex-start; }
  .worry__bubble--3,
  .worry__bubble--5 { align-self: flex-end; }

  .worry__bubble span {
    font-size: clamp(12px, 3.6vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .worry__panel.is-visible .worry__bubble {
    animation: none;
  }
}

/* --- パネル下の締め --- */

.worry__foot {
  display: flex;
  /* 下揃えだとテキストがアイコンの高さ分だけ沈むため、中央で揃えてパネルに寄せる */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(12px, 1.7vw, 24px);
}

/* お困りごとの結び。見出しと同じ強さで言い切る一文なので、
   ラベル扱いではなくタイトルと同じウェイトにしている */
.worry__lead {
  font-size: clamp(16px, 1.85vw, 27px);
  font-weight: var(--fw-title);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* 「〜カーペットクリーニングが」で折り返すのはモバイルだけ */
.worry__lead-br {
  display: none;
}

/* --- CTAボタン（他セクションでも使う共通クラス） --- */

.cta-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 矢印を添えるボタンがあるため。文字だけのボタンには影響しない */
  gap: clamp(8px, 1vw, 14px);
  min-width: clamp(200px, 22vw, 320px);
  height: clamp(52px, 5.4vw, 78px);
  padding-inline: clamp(20px, 2.6vw, 38px);
  border-radius: 999px;
  background-color: var(--c-brand-blue);
  color: #fff;
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(1, 73, 186, 0.28);
  transition: filter var(--t-fast), transform var(--t-fast);
}

.cta-pill:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
}

.cta-pill svg {
  flex-shrink: 0;
  width: clamp(15px, 1.5vw, 22px);
  height: auto;
}

/* 一定間隔で光の帯が左から右へ走る。
   全部のボタンに付けると画面がちらつくので、特に押してほしい1つにだけ付ける。
   モーションを減らす設定のときは reset.css 側で止まる。 */
.cta-pill--shine {
  position: relative;
  /* 光の帯がボタンの外へはみ出さないようにする */
  overflow: hidden;
}

.cta-pill--shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: cta-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* 前半は待機、後半で一気に走らせることで「時々光る」動きにする */
@keyframes cta-shine {
  0%,
  65% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

/* 狭い画面ではテキストとボタンを縦に積む */
@media (max-width: 767px) {
  .worry__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* 文章は左ぞろえのまま、ボタンだけ中央に置く */
  .worry__foot .cta-pill {
    align-self: center;
  }

  .worry__lead-br {
    display: inline;
  }

  /* 320px級の画面でも「洗浄のプロによるカーペットクリーニングが」が1行に収まるようにする
     （375px以上では16pxのまま変わらない） */
  .worry__lead {
    font-size: clamp(14px, 4.3vw, 16px);
  }
}

/* ==========================================================================
   サービス（デザインサンプル section_10.jpg に準拠）

   参照画像は3ブロックが縦に並んでいるが、実装では1画面ぶんを画面に貼り付け、
   スクロールに合わせて中身だけを入れ替える。

     .service__stage   3画面ぶんの高さ。ここをスクロールしている間だけ貼り付く
     .service__sticky  貼り付く1画面
     .service__window  カードの窓（1枚ぶんの高さ）。中の .service__track が上下に流れる
     .service__loops   背景を流れる英字。カードに対応して切り替わる
     .service__photos  右下の写真。カードに対応して切り替わる

   進捗（--p）と現在のカード番号（.is-active）は initServiceScroll() が更新する。
   JSが動かないときは .is-scroll が付かず、カードが縦に並ぶだけの表示になる。

   寸法は参照画像（幅6000px）の実測から比率で起こしている。
     カード     幅 2942 / 高さ 2475 → 比 1.189、帯幅に対して 56%
     写真       幅 2142 / 高さ 1430 → 比 1.498（3:2）、カード幅の 72.5%
     カードと写真の間隔  カード幅の 6.1%
     英字       字面の高さ 450 → 文字サイズはカード高さの 25.3%
                中心はカード上端から 21.2% の位置
   ========================================================================== */

.service {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 7vw, 104px) 0;
  /* 「選ばれる理由」セクションと同じ背景色 */
  background-color: #e9eef4;
}

.service__head {
  width: min(88%, 1500px);
  margin-inline: auto;
}

/* 参照画像の「▪ 事業内容」。四角は装飾なので擬似要素で置く。
   同じ形の見出しをクリーニング例（▪ 施工一例）・料金（▪ わかりやすい料金体系）・
   お知らせ（▪ お役立ち情報やニュース）でも使うので、指定はここにまとめている */
.service__eyebrow,
.works__eyebrow,
.price__eyebrow,
.news__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 1.4;
  color: var(--c-ink);
}

.service__eyebrow::before,
.works__eyebrow::before,
.price__eyebrow::before,
.news__eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background-color: currentColor;
}

/* 小見出し（▪ …）とセットで置くタイトルは、小見出しとの間隔もそろえる。
   公式Instagramの見出しだけは小見出しを持たないので、下の --insta で 0 に戻している */
.service__title,
.works__title,
.price__title,
.news__title {
  margin-top: clamp(6px, 0.8vw, 12px);
}

/* セクションタイトルの字面 */
.service__title,
.works__title,
.price__title,
.news__title {
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: var(--fw-title);
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* セクションタイトルと各見出しは、1文字おきに濃さの違う青にする。
   地が薄いほうで、em を付けた文字が濃いほう。改行をまたいでも交互のまま。 */
.service__title,
.works__title,
.price__title,
.news__title,
.service-card__title,
.reasons__title,
.intro__title,
.worry__accent {
  color: #489ad8;
}

.service__title em,
.works__title em,
.price__title em,
.news__title em,
.service-card__title em,
.reasons__title em,
.intro__title em,
.worry__accent em {
  font-style: normal;
  color: #176ebc;
}

/* --- カード --- */

.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8dde3;
  border-radius: clamp(16px, 1.8vw, 28px);
  background-color: #fff;
}

.service-card__title {
  font-size: clamp(18px, 1.9vw, 28px);
  font-weight: var(--fw-title);
  line-height: 1.5;
}

.service-card__text {
  margin-top: 1em;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  color: var(--c-ink);
}

/* 本文の改行と読点は画面幅で出し分ける（既定＝PC：改行なし・読点あり）。
   モバイル側の指定は下の @media (max-width: 899px) にある */
.service-card__br {
  display: none;
}

/* 下段：左にボタン、右にイラスト。
   margin-top: auto でカードの下に寄せ、高さはイラストなりにする。
   そのうえで align-items: center にすると、ボタンの中心がイラストの中心にそろう。 */
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
}

.service-card__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.1em 2.2em;
  border-radius: 999px;
  background-color: #176ebc;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transition: background-color var(--t-fast);
}

.service-card__btn:hover {
  background-color: #0f5a9d;
}

.service-card__arrow {
  transition: transform var(--t-fast);
}

.service-card__btn:hover .service-card__arrow {
  transform: translateX(0.25em);
}

/* カードは画面の高さに合わせて縦に伸びるので、イラストも幅に対する割合で置く。
   px で頭打ちにすると大きい画面でカードの中が空いてしまう */
.service-card__illust {
  width: 56%;
  height: auto;
}

/* --- 背景を流れる英字 --- */

/* 塗りは透過、輪郭だけ白。線の太さは文字サイズに比例させる */
/* 3本を同じマスに重ね、対応するカードのものだけを見せる。
   PC・SPどちらも同じ扱いなので、メディアクエリの外に置いている */
.service__loop {
  grid-area: 1 / 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.55s ease;
  font-family: var(--ff-heading);
  font-weight: var(--fw-title);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 0.014em #fff;
}

.service__loop.is-active {
  opacity: 1;
}

/* 輪郭が描けない環境では文字が消えてしまうので、白のベタ塗りにしておく */
@supports not (-webkit-text-stroke: 1px #fff) {
  .service__loop {
    color: #fff;
  }
}

.service__loop-track {
  display: flex;
  width: max-content;
  /* 4つ並べて「2つぶん」動かすので、どこで切り替わっても継ぎ目が出ない。
     --svc-loop-dur は文字列の実測幅から initServiceScroll() が入れる
     （文字数が違っても流れる速さが同じになるように） */
  animation: svc-marquee var(--svc-loop-dur, 24s) linear infinite;
}

.service__loop-track span {
  padding-right: 0.35em;
}

@keyframes svc-marquee {
  to { transform: translateX(-50%); }
}

/* --- 右の写真 --- */

.service__photo {
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 1.8vw, 28px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   SP・タブレット：貼り付けはせず、カードと写真を交互に縦へ並べる。
   窓やトラックは display: contents で「無かったこと」にして、
   order だけで カード → 写真 → カード → 写真 … の順に組み替えている。
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .service__row {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 5vw, 40px);
    width: min(92%, 640px);
    margin-inline: auto;
    padding-block: clamp(28px, 6vw, 48px);
  }

  .service__window,
  .service__track {
    display: contents;
  }

  /* カード外の写真はPCだけ。lazy 指定なので、出さなければ通信も発生しない。
     英字ループは下の「カードを重ねる」節でSP用に出し直す（JSが動くときだけ） */
  .service__photos {
    display: none;
  }

  .service:not(.is-scroll) .service__loops {
    display: none;
  }

  .service-card {
    padding: clamp(20px, 5vw, 32px);
  }

  /* 本文と下段（ボタン＋イラスト）の間が空きすぎるので詰める。
     ボタンとイラストは中心をそろえたままにしたいので、align-items は触らない。

     row-reverse で イラスト（左）／ボタン（右）に入れ替えている。
     右手の親指で押しやすい側にボタンを置くため。
     HTMLの順序（ボタン → イラスト）は変えていないので、
     読み上げとキーボード操作の順序はPCと同じまま。 */
  .service-card__foot {
    flex-direction: row-reverse;
    padding-top: var(--space-2);
  }

  /* 1文目のあとで改行し、文の途中の読点は落とす */
  .service-card__br {
    display: inline;
  }

  .service-card__pc {
    display: none;
  }

  .service-card:nth-child(1) { order: 1; --i: 0; }
  .service-card:nth-child(2) { order: 2; --i: 1; }
  .service-card:nth-child(3) { order: 3; --i: 2; }

  /* ------------------------------------------------------------------------
     SP：カードを重ねて、スクロールで下から上げる
     （デザインサンプル assets/image/sample/top_mb/名称未設定-2.jpg に準拠）

     仕組みはPCと同じ。.service__stage を3画面ぶんにして .service__sticky を
     貼り付け、JSが入れる --p（0〜1）でカードの位置と英字の出し分けを決める。
     PCと違うのは「窓の中を上下に流す」のではなく「画面の下から上げて重ねる」点。

       --p        0 … 01だけ    0.5 … 02が定位置    1 … 03が定位置
       --i        カードの番号（0/1/2）
       --cp       そのカード1枚ぶんの進み具合（0＝画面外の下、1＝定位置）

     上へスクロールすると --p が戻るので、カードもそのまま戻る。
     3枚目が定位置に来た時点で貼り付けが終わり、次のセクションへ進む。
     ------------------------------------------------------------------------ */

  /* 1枚ごとに下へずらす量。JS（tuneStack）も同じ値を読んで置き場の高さを決める */
  .service.is-scroll {
    --svc-sp-step: 10px;
  }

  .service.is-scroll .service__stage {
    height: 300svh;
  }

  .service.is-scroll .service__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100svh;
    /* 定位置に来ていないカードを画面外に隠す */
    overflow: hidden;
  }

  .service.is-scroll .service__row {
    justify-content: center;
    gap: 0;
    padding-block: 0;
  }

  /* カードの重なり置き場。高さは一番高いカードから JS が決める */
  .service.is-scroll .service__window {
    order: 1;
    display: block;
    position: relative;
    height: var(--svc-sp-h, 420px);
  }

  .service.is-scroll .service__track {
    display: contents;
  }

  .service.is-scroll .service-card {
    position: absolute;
    left: 0;
    right: 0;
    /* 下のカードの上端が少しだけ覗くように1枚ずつ下げる＝重なって見える */
    top: calc(var(--i, 0) * var(--svc-sp-step, 10px));
    z-index: calc(var(--i, 0) + 1);
    --cp: clamp(0, calc((var(--p, 0) - (var(--i, 0) - 1) * 0.5) / 0.5), 1);
    /* 1画面ぶん下から上げる。スクロール量と1:1で動く */
    transform: translateY(calc((1 - var(--cp)) * 100svh));
    box-shadow: 0 -8px 28px rgba(23, 110, 188, 0.12);
  }

  /* 英字ループはカードの重なりの下。モバイル向けに縮小し、画面幅いっぱいに流す */
  .service.is-scroll .service__loops {
    order: 2;
    position: relative;
    z-index: 0;
    display: grid;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: clamp(14px, 4vw, 28px);
    font-size: clamp(38px, 13.5vw, 90px);
  }
}

/* --------------------------------------------------------------------------
   PC：1画面ぶんを貼り付けて、中身をスクロールで入れ替える
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .service__row {
    /* 帯（左右の余白を除いたコンテンツ幅） */
    --svc-band: min(94vw, 1800px);
    --svc-pad: clamp(16px, 2vw, 32px);
    /* 画面の中で使える高さ */
    --svc-fit-h: calc(100svh - var(--svc-pad) * 2);

    /* 横は参照画像どおり帯の56%（カード＋間隔＋写真でちょうど帯いっぱいになる比率）。
       ただし参照画像の比率（1.189）のままだと、横長の構図に対して画面が縦に余り、
       上下に白い帯が残ってしまう。そこでカードの高さは画面いっぱいまで伸ばす。
       伸ばしすぎて極端に縦長にならないよう、幅の1.35倍で頭打ちにしている。
       写真・英字は幅を基準にしているので、伸ばしても位置関係は変わらない。 */
    --svc-card-w: min(calc(var(--svc-band) * 0.56), calc(var(--svc-fit-h) * 1.189));
    --svc-card-h: min(var(--svc-fit-h), calc(var(--svc-card-w) * 1.35));
    --svc-gap-x: calc(var(--svc-card-w) * 0.061);
    --svc-gap-y: calc(var(--svc-card-h) * 0.28);

    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--svc-gap-x);
    width: var(--svc-band);
    margin-inline: auto;
    padding-block: var(--svc-pad);
  }

  .service__window {
    position: relative;
    z-index: 1;
    flex: 0 0 var(--svc-card-w);
    height: var(--svc-card-h);
    overflow: hidden;
  }

  .service__track {
    display: flex;
    flex-direction: column;
    gap: var(--svc-gap-y);
    /* カード3枚なので、進捗1で2枚ぶん上へ流す */
    transform: translateY(calc(var(--p, 0) * -2 * (var(--svc-card-h) + var(--svc-gap-y))));
  }

  /* 文字も余白もカード幅に対する割合で決める。
     カードが画面に合わせて伸び縮みしても、中の見た目の比率が変わらない。
     数値は参照画像（カード幅2942px）の実測から：
       見出し  行送り 304 → 幅の10.3%（line-height 1.5 なので 幅の6.2%）
       本文    行送り 177 → 幅の 6.0%（line-height 1.9 なので 幅の3.2%）
     本文は少し詰めて 2.7% にしている */
  .service-card {
    flex: 0 0 auto;
    height: var(--svc-card-h);
    padding: calc(var(--svc-card-w) * 0.058);
  }

  .service-card__title {
    font-size: calc(var(--svc-card-w) * 0.062);
  }

  .service-card__text {
    font-size: calc(var(--svc-card-w) * 0.027);
  }

  .service-card__btn {
    padding: 1.1em 2.2em;
    font-size: calc(var(--svc-card-w) * 0.023);
  }

  /* 英字は画面いっぱいに流したいので、帯からはみ出させる。
     カードは下ぞろえなので、縦位置も下から測る。
     参照画像ではカード上端から21.2%（＝カード幅の17.8%）の位置に中心がある。
     カードは高さを伸ばすことがあるので、幅を基準にして見え方を固定している
     （文字サイズも同様。参照画像の 0.253×高さ ＝ 0.213×幅）。 */
  .service__loops {
    position: absolute;
    z-index: 0;
    bottom: calc(var(--svc-pad) + var(--svc-card-h) - var(--svc-card-w) * 0.178);
    left: calc(50% - 50vw);
    display: grid;
    width: 100vw;
    transform: translateY(50%);
    font-size: calc(var(--svc-card-w) * 0.213);
  }

  .service__photos {
    position: relative;
    z-index: 1;
    flex: 0 0 calc(var(--svc-card-w) * 0.725);
    /* 3:2。下辺がカードの下辺とそろう */
    aspect-ratio: 3 / 2;
  }

  .service__photo {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.55s ease;
  }

  .service__photo.is-active {
    opacity: 1;
  }

  /* JSが動いたときだけ貼り付ける */
  .service.is-scroll .service__stage {
    height: 300svh;
  }

  /* 中身は画面の高さいっぱいには広げず、上下中央に置く。
     下ぞろえにすると余りが全部上に寄ってしまい、ヘッダーが引っ込んだときに
     メニューバーぶんの空白が上に見えてしまうため。 */
  .service.is-scroll .service__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100svh;
    overflow: hidden;
  }

  /* JSが無いときは3枚を縦に並べ、装飾は出さない */
  .service:not(.is-scroll) .service__window {
    height: auto;
    overflow: visible;
  }

  .service:not(.is-scroll) .service__row {
    align-items: center;
  }

  .service:not(.is-scroll) .service__loops,
  .service:not(.is-scroll) .service__photos {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service__loop-track {
    animation: none;
  }
}

/* ==========================================================================
   選ばれる理由（デザインサンプル section_12.jpg に準拠）

   カードを縦に3枚。各カードは
     左上に黄色い丸（FVの装飾と同じ液状の変形。位置は動かさない）
     左にアイコン、右に見出しと本文
   の並び。寸法は参照画像（幅6000px・カード幅4470px）の実測から比率で起こしている。

     黄色い丸   456px → カード幅の10.2%。中心はカードの左上角から少し外
     アイコン   822px → カード幅の18.4%。縦は中央
     左の余白   174px → カード幅の 3.9%
     アイコンと本文の間隔  177px → カード幅の 4.0%
     本文の左端 カード左端から26.1%
   ========================================================================== */

.reasons {
  position: relative;
  /* 傾いた波がセクションの外へ出るぶんを切る */
  overflow: hidden;
  background-color: #e9eef4;
  padding-block: clamp(48px, 7vw, 104px);
}

/* --- 背景の波（FVと共有。形と動きの指定は上部の「背景の波（装飾）」） --- */

.reasons__waves {
  /* FVは画面の高さ（≒900px）が基準。ここも近い値にして、
     ページをスクロールしたときに同じ大きさの波が続いて見えるようにする。
     幅の狭い画面では画面幅に合わせて小さくする。 */
  --wave-scale: clamp(560px, 62vw, 900px);

  /* mask が効かない環境では帯がただの長方形になってしまうので、その場合は出さない */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 主役はカードなので、地の模様として弱める。
     0.5まで落とすと水色と青の差が消えてFVの波に見えなくなるため、この値にしている */
  opacity: 0.65;
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .reasons__waves {
    display: block;
  }
}

/* 置き場所はセクションの高さに対する割合。カードの隙間と左右の余白に帯が覗く */
.reasons__wave--cyan {
  top: 16%;
}

.reasons__wave--blue {
  top: 58%;
}

/* 波より前に出す（.reason__num の黄色い丸が z-index を持つので、
   その基準となるこの要素側で重なり順を確定させておく） */
.reasons__inner {
  position: relative;
  z-index: 1;
  width: min(92%, 1240px);
  margin-inline: auto;
}

.reasons__title {
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: var(--fw-title);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

/* 「〜マンが」で折り返すのはスマホだけ（600px以上は1行に収まる） */
.reasons__br {
  display: none;
}

/* 黄色い丸の大きさを幅から決めるため、ここをコンテナにして cqw を使えるようにする。
   （% だと縦方向が親の「高さ」基準になり、丸が楕円につぶれてしまう） */
.reasons__list {
  container-type: inline-size;
  display: grid;
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: clamp(40px, 5.4vw, 78px);
}

/* --- 1枚分 --- */

.reason {
  /* 参照画像の丸はカード幅の10.2%だが、番号が入るぶん大きく見えるので少し小さくしている
     （.reason は左に丸のはみ出し分の余白があるため、その分を戻した値） */
  --reason-num: clamp(44px, 8.4cqw, 106px);

  position: relative;
  /* 黄色い丸がカードの外へ出る分を空ける */
  padding: calc(var(--reason-num) * 0.42) 0 0 calc(var(--reason-num) * 0.33);
}

/* 3枚が同じ動きに見えないよう、変形と回転の周期・開始位置をずらす。
   周期が互いに割り切れない値なので、時間が経ってもそろわない。 */
.reason:nth-child(2) {
  --blob-morph: 11.5s;
  --blob-spin: 31s;
  --blob-delay: -3.4s;
}

.reason:nth-child(3) {
  --blob-morph: 8.2s;
  --blob-spin: 22s;
  --blob-delay: -5.9s;
}

/* 黄色い丸。中身の番号は回さず、丸だけを ::before で変形させる。
   アニメーションはFVの装飾と共通（液状の変形＋ゆっくり一周）。移動はしない。 */
.reason__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--reason-num);
  aspect-ratio: 1;
  /* 番号だけ LINE Seed JP。数字は latin サブセットに入るので追加読み込みは軽い */
  font-family: "LINE Seed JP", var(--ff-body);
  font-size: calc(var(--reason-num) * 0.38);
  /* LINE Seed JP は800しか読み込んでいないので、合成ボールドを避けて800のままにする */
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  transition: transform 0.35s ease;
}

.reason__num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #edf219;
  border-radius: 50%;
  animation: reason-blob var(--blob-morph, 9.4s) ease-in-out var(--blob-delay, 0s) infinite,
             fv-deco-spin var(--blob-spin, 26s) linear var(--blob-delay, 0s) infinite;
}

/* 2枚目だけ回転を逆にして、さらに動きをばらけさせる */
.reason:nth-child(2) .reason__num::before {
  animation-direction: normal, reverse;
}

/* 円に近いまま、ふちだけがゆっくり揺れる。ふり幅は±4%程度 */
@keyframes reason-blob {
  0%, 100% { border-radius: 50% 50% 50% 50% / 52% 48% 52% 48%; }
  20%      { border-radius: 54% 46% 48% 52% / 47% 53% 47% 53%; }
  40%      { border-radius: 47% 53% 54% 46% / 53% 47% 51% 49%; }
  60%      { border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%; }
  80%      { border-radius: 46% 54% 52% 48% / 51% 49% 53% 47%; }
}

.reason__card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  /* gap と幅は内側（余白を除いた幅）に対する % なので、
     カード幅に対する比率（4.0% / 18.4%）を 0.922 で割った値を入れている */
  gap: 4.34%;
  padding: 2.6% 3.9%;
  border: 1px solid #d8dde3;
  border-radius: clamp(20px, 2.6vw, 40px);
  background-color: #fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.reason__icon {
  flex: 0 0 19.96%;
  width: 19.96%;
  height: auto;
}

.reason__body {
  flex: 1;
  min-width: 0;
}

.reason__heading {
  /* マーカーが文字幅ぴったりに引かれるよう、幅を中身に合わせる */
  width: fit-content;
  font-size: clamp(17px, 2.2vw, 32px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  letter-spacing: 0;
  /* ホバーで下から黄色いマーカーが引かれる */
  background-image: linear-gradient(transparent 60%, var(--c-brand-green-marker) 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.55s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* カードの見出しの青。クリーニング例の見出しも同じ色にそろえている
   （市松の濃いほう `em` と同じ #176ebc） */
.reason__heading,
.work__title {
  color: #176ebc;
}

.reason:hover .reason__heading,
.reason:focus-within .reason__heading {
  background-size: 100% 100%;
}

.reason__text {
  margin-top: clamp(12px, 1.6vw, 24px);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* --- ホバー：カードが浮き上がる（番号も一緒に動かして位置関係を保つ） --- */

.reason:hover .reason__card,
.reason:focus-within .reason__card {
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(52, 52, 52, 0.16);
}

.reason:hover .reason__num,
.reason:focus-within .reason__num {
  transform: scale(1.02);
}

/* SP：アイコンを小さくして、その横に見出しを置く。本文はその下に全幅で回す

     ┌──────┬──────────────┐
     │ アイコン │ 見出し         │
     ├──────┴──────────────┤
     │ 本文                     │
     └─────────────────────┘

   .reason__body を display: contents にして、中の見出しと本文を
   カード（grid）の直接の升目として扱っている。 */
@media (max-width: 599px) {
  .reasons__br {
    display: inline;
  }

  .reason__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(10px, 3.2vw, 16px);
    row-gap: clamp(10px, 3.2vw, 16px);
    padding: clamp(20px, 6vw, 28px);
  }

  /* 見出し1行ぶんに近い大きさまで小さくする */
  .reason__icon {
    grid-column: 1;
    grid-row: 1;
    flex: 0 0 auto;
    width: clamp(48px, 14vw, 64px);
  }

  .reason__body {
    display: contents;
  }

  .reason__heading {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(15px, 4.4vw, 20px);
  }

  .reason__text {
    grid-column: 1 / -1;
    grid-row: 2;
    /* 間隔は row-gap で取るのでリセットする */
    margin-top: 0;
    font-size: clamp(12px, 3.5vw, 15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reason__num::before {
    animation: none;
  }
}


/* ==========================================================================
   対応可能なカーペット（デザインサンプル section_5.jpg に準拠）

   カードを横に並べたスライダー。表示枚数は --per-view で切り替え、
   main.js がその値を読んで移動量とインジケーターを計算する。

   ▼ 2026-08-10 トップでは非表示（index.html 側でHTMLをコメントアウト）。
     別ページで使う可能性があるため、この指定一式は消さずに残している。
     使っているのはこのブロック内の指定だけなので、他ページへ移すときは
     ここをまるごと持っていけばよい。
   ========================================================================== */

.materials {
  background-color: var(--c-brand-blue);
  padding-block: clamp(48px, 7vw, 104px);
}

.materials__inner {
  width: min(92%, 1240px);
  margin-inline: auto;
}

.materials__title {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  letter-spacing: 0;
  color: #fff;
}

.materials__lead {
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  letter-spacing: 0;
  color: #fff;
}

/* --- スライダー --- */

.materials__slider {
  position: relative;
  margin-top: clamp(32px, 4.2vw, 60px);
  /* 表示枚数。main.js がこの値を読む */
  --per-view: 1;
  --gap: clamp(14px, 1.8vw, 26px);
}

@media (min-width: 600px) {
  .materials__slider {
    --per-view: 2;
  }
}

@media (min-width: 900px) {
  .materials__slider {
    --per-view: 3;
  }
}

.materials__viewport {
  overflow: hidden;
  /* カードの高さが小数になると上下の枠線が overflow の境界で削られるため、
     わずかに余白を取り、同じ量のマイナスマージンで位置を戻す */
  padding-block: 2px;
  margin-block: -2px;
}

.materials__track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1);
  will-change: transform;
}

.material {
  flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  padding: clamp(12px, 1.3vw, 18px) clamp(12px, 1.3vw, 18px) clamp(18px, 2vw, 28px);
  background-color: #fff;
  border: 1px solid var(--c-ink);
  border-radius: clamp(16px, 1.8vw, 26px);
}

.material__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: clamp(12px, 1.4vw, 20px);
  background-color: #f4f7fa;
}

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

.material__name {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: var(--fw-label);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-brand-navy);
}

.material__text {
  margin-top: clamp(8px, 0.9vw, 13px);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.85;
  color: var(--c-ink);
}

/* --- 左右の矢印 --- */

.materials__arrow {
  position: absolute;
  top: clamp(70px, 11vw, 160px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(38px, 4.2vw, 60px);
  aspect-ratio: 1;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background-color: #fff;
  color: var(--c-ink);
  transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

.materials__arrow svg {
  width: 45%;
  height: 45%;
}

.materials__arrow:hover:not(:disabled) {
  background-color: var(--c-brand-navy);
  color: #fff;
}

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

.materials__arrow--prev {
  left: clamp(-18px, -1.6vw, -8px);
}

.materials__arrow--next {
  right: clamp(-18px, -1.6vw, -8px);
}

/* --- インジケーター --- */

.materials__dots {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: clamp(24px, 3vw, 42px);
}

.materials__dots button {
  display: block;
  width: clamp(28px, 3.4vw, 48px);
  height: clamp(6px, 0.7vw, 9px);
  /* 中央に表示されていないカードはグレー */
  background-color: #b9bec4;
  transition: background-color var(--t-fast);
}

/* 中央（3枚表示なら2枚目）に来ているカードのぶんだけ白 */
.materials__dots button[aria-current="true"] {
  background-color: #fff;
}

/* ==========================================================================
   料金（デザインサンプル section_6.jpg に準拠）

   左に見出し・写真・説明、右に料金シミュレーター。
   シミュレーターは現状 見た目のみ（計算は未実装）。
   ========================================================================== */

.price {
  --c-sim: #0149ba;
  --c-sim-pale: #f1f6fd;
  /* 「選ばれる理由」セクションと同じ背景色 */
  background-color: #e9eef4;
  padding-block: clamp(48px, 7vw, 104px);
}

.price__inner {
  width: min(92%, 1240px);
  margin-inline: auto;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

@media (min-width: 1000px) {
  .price__inner {
    /* minmax(0,…) にしないと中身の最小幅にカラムが押し広げられる */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

/* --- 左：見出しと説明 --- */

/* 見出し（▪ わかりやすい料金体系 ＋ クリーニング料金）はサービスセクションと同じ形。
   大きさ・色の指定は .service__eyebrow / .service__title と共有している */

/* 2カラムになる幅ではタイトルが1行に収まらない。
   inline-block は行をまたげないので、折り返しは必ず「クリーニング」と「料金」の間で起きる。 */
.price__title span {
  display: inline-block;
}

/* 本文の改行位置を、このカラムの幅で切り替えるためのコンテナ。
   画面幅ではなくカラム幅で判断したいので、メディアクエリではなくコンテナクエリを使う
   （1000px前後では2カラムになってカラムだけが急に狭くなるため） */
.price__body {
  container-type: inline-size;
}

.price__visual {
  overflow: hidden;
  margin-top: clamp(18px, 2.2vw, 30px);
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2vw, 28px);
  background-color: #f4f7fa;
}

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

.price__text {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: var(--fw-label);
  line-height: 2;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* 1行目（28文字）が入りきらない幅では、原稿どおりの改行をやめて自然に折り返す。
   そのままだと「…料金が変わ／る」のように1文字だけ次の行に落ちてしまう。
   しきい値は 1行目の実測幅（13px時で約364px）＋余裕。 */
@container (max-width: 380px) {
  .price__text br {
    display: none;
  }
}

/* 見た目は .cta-pill に揃えてある。ここが持つのは配置だけ */
.price__more {
  margin-top: clamp(18px, 2.2vw, 30px);
}

/* 1カラムになる幅では、文章は左ぞろえのままボタンだけ中央に置く。
   .cta-pill は inline-flex なので、親の text-align で寄せられる */
@media (max-width: 999px) {
  .price__body {
    text-align: left;
  }

  .price__more {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

/* --- 右：料金シミュレーター（表示のみ） --- */

.sim {
  padding: clamp(20px, 2.6vw, 38px);
  background-color: #fff;
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: 0 10px 40px rgba(1, 73, 186, 0.12);
}

.sim__title {
  font-size: clamp(17px, 1.9vw, 27px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: var(--c-sim);
}

/* 「〜クリーニング」で折り返すのはスマホだけ。
   そのままだと390px幅で「…シミュレー／ター」と最後だけが落ちる */
.sim__title-br {
  display: none;
}

@media (max-width: 599px) {
  .sim__title-br {
    display: inline;
  }
}

.sim__lead {
  margin-top: clamp(6px, 0.8vw, 11px);
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.7;
  text-align: center;
  color: var(--c-text-sub);
}

.sim__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(16px, 2vw, 26px);
}

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

.sim__panel {
  min-width: 0;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(12px, 1.4vw, 18px);
}

.sim__panel--input {
  background-color: #fbfcfe;
  border: 1px solid #e2e9f4;
}

.sim__panel--result {
  background-color: var(--c-sim-pale);
}

.sim__panel-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(10px, 1.2vw, 16px);
  border-bottom: 1px solid #dde6f3;
}

.sim__step {
  padding: 3px clamp(8px, 0.9vw, 12px);
  border-radius: 999px;
  background-color: #dde9fa;
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
  color: var(--c-sim);
}

.sim__panel-title {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: var(--fw-title);
  color: var(--c-ink);
}

/* 入力欄 */

.sim__field {
  margin-top: clamp(12px, 1.4vw, 18px);
}

.sim__label {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--c-text-sub);
}

.sim__input {
  display: flex;
  align-items: stretch;
  border: 1px solid #d9e2f0;
  border-radius: clamp(8px, 0.9vw, 12px);
  background-color: #fff;
  overflow: hidden;
}

.sim__input input {
  flex: 1;
  min-width: 0;
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.1vw, 15px);
  border: none;
  background: transparent;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

.sim__input input:focus {
  outline: 2px solid var(--c-sim);
  outline-offset: -2px;
}

/* 数値入力の上下ボタンを消す */
.sim__input input::-webkit-outer-spin-button,
.sim__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sim__input input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sim__unit {
  display: grid;
  place-items: center;
  padding-inline: clamp(10px, 1.1vw, 15px);
  border-left: 1px solid #d9e2f0;
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--c-text-sub);
}

.sim__formula {
  margin-top: clamp(12px, 1.4vw, 18px);
  padding: clamp(9px, 1vw, 14px) clamp(12px, 1.3vw, 18px);
  border-radius: clamp(8px, 0.9vw, 12px);
  background-color: #eef4fd;
  font-size: clamp(11px, 1vw, 15px);
  color: var(--c-text-sub);
}

.sim__formula strong {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: var(--fw-bold);
  color: var(--c-sim);
}

.sim__add {
  width: 100%;
  margin-top: clamp(10px, 1.1vw, 15px);
  padding-block: clamp(9px, 1vw, 14px);
  border: 1px dashed #cfdcf0;
  border-radius: clamp(8px, 0.9vw, 12px);
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--c-text-sub);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.sim__add:hover:not(:disabled) {
  background-color: #f2f7fd;
  color: var(--c-sim);
}

/* サイズが空のとき、上限10枚に達したときは押させない */
.sim__add:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 追加したぶんをまとめて取り消す。1枚も追加していないうちは出さない。
   display を指定するとブラウザ既定の [hidden] に勝ってしまうので、明示的に打ち消す */
.sim__clear {
  display: block;
  width: 100%;
  margin-top: clamp(6px, 0.7vw, 9px);
  font-size: clamp(10px, 0.8vw, 12px);
  text-decoration: underline;
  color: var(--c-text-sub);
  transition: color var(--t-fast);
}

.sim__clear[hidden] {
  display: none;
}

.sim__clear:hover {
  color: var(--c-sim);
}

.sim__note {
  margin-top: clamp(9px, 1vw, 14px);
  font-size: clamp(9px, 0.78vw, 11px);
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* 結果側 */

.sim__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: clamp(10px, 1.2vw, 16px);
  border-bottom: 1px solid #dde6f3;
}

/* 桁数が増えて横に収まらなくなったとき、ラベルを途中で折らずに
   金額のほうを次の行へ送る。「概算料／金」のような割れ方を防ぐ。 */
.sim__row dt {
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: var(--fw-label);
  white-space: nowrap;
  color: var(--c-ink);
}

/* 追加したカーペットは一枚ずつ並べないので、
   いま何枚ぶんの合計を見ているのかをここで補う。
   display を指定するとブラウザ既定の [hidden] に勝ってしまうので、明示的に打ち消す */
.sim__hint {
  display: block;
  margin-top: 2px;
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: var(--fw-body);
  white-space: nowrap;
  color: var(--c-text-sub);
}

.sim__hint[hidden] {
  display: none;
}

.sim__row dd {
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--c-ink);
}

.sim__row dd strong {
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: var(--fw-bold);
  color: var(--c-sim);
}

.sim__row--total dd strong {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
}

.sim__row--total dd span {
  font-size: clamp(9px, 0.8vw, 12px);
  white-space: nowrap; /* 桁が増えても「（税 / 込）」と割らない */
  color: var(--c-text-sub);
}

.sim__detail {
  display: grid;
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: clamp(10px, 1.2vw, 16px);
}

.sim__detail > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: clamp(7px, 0.8vw, 11px) clamp(10px, 1.1vw, 15px);
  border-radius: clamp(6px, 0.7vw, 9px);
  background-color: #fff;
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--c-text-sub);
}

.sim__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(12px, 1.4vw, 18px);
  min-height: clamp(42px, 4vw, 56px);
  padding-inline: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(8px, 0.9vw, 12px);
  background-color: var(--c-sim);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: var(--fw-bold);
  color: #fff;
  transition: filter var(--t-fast);
}

.sim__cta:hover {
  filter: brightness(0.92);
}

.sim__cta svg {
  width: clamp(12px, 1.1vw, 16px);
  height: auto;
}

/* ==========================================================================
   クリーニング例（デザインサンプル section_4.jpg に準拠）

   角丸のスライダー枠を2つ並べ、その下にタイトル・タグ・説明を置く。
   スライダー本体（.ba__*）のスタイルは style.css の共通コンポーネント側にある。
   ========================================================================== */

.works {
  background-color: #fff;
  padding-block: clamp(48px, 7vw, 104px);
}

.works__inner {
  width: min(92%, 1240px);
  margin-inline: auto;
}

/* 見出し（▪ 施工一例 ＋ クリーニング例）はサービスセクションと同じ形。
   大きさ・色の指定は .service__eyebrow / .service__title と共有している */

.works__lead {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* 「〜ビフォーアフターを」で折り返すのはスマホだけ（600px以上は1行に収まる） */
.works__lead-br {
  display: none;
}

@media (max-width: 599px) {
  .works__lead-br {
    display: inline;
  }
}

.works__list {
  display: grid;
  /* 縦に積むとスライダー同士が近く見えるので、下限を広めに取っている */
  gap: clamp(56px, 4.5vw, 64px);
  margin-top: clamp(32px, 4.2vw, 60px);
}

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

/* --- 1件分 --- */

/* スライダーの角丸に詰まって見えないよう、ここだけ余白を広めに取る。
   文字色は選ばれる理由の見出し（.reason__heading）と同じ指定にまとめてある */
.work__title {
  margin-top: clamp(20px, 2.4vw, 34px);
  font-size: clamp(18px, 1.95vw, 28px);
  font-weight: var(--fw-title);
  line-height: 1.4;
  letter-spacing: 0;
}

/* タイトル→タグ→本文は同じ間隔で揃える */
.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.9vw, 13px);
  margin-top: clamp(12px, 1.3vw, 19px);
}

.work__tags li {
  padding: clamp(4px, 0.5vw, 7px) clamp(12px, 1.3vw, 19px);
  border: 1px solid var(--c-brand-navy);
  border-radius: 999px;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: var(--c-brand-navy);
}

.work__text {
  margin-top: clamp(12px, 1.3vw, 19px);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.9;
  color: var(--c-ink);
}

/* --- 比較スライダーの下の案内ボックス ---

   もとは「対応可能なカーペット」（青地）の下に置いていたもの。
   このセクションは地が白なので、白いカードのままでは箱の形が消える。
   お困りごと・サービス・選ばれる理由と同じ #e9eef4 を敷いて面を出している。 */

.works__note {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  /* カード同士の間隔（.works__list の gap）と同じにして並びのリズムを保つ */
  margin-top: clamp(56px, 4.5vw, 64px);
  padding: clamp(16px, 2vw, 28px) clamp(20px, 2.6vw, 38px);
  background-color: #e9eef4;
  border-radius: clamp(24px, 3vw, 44px);
}

.works__note-icon {
  flex-shrink: 0;
  width: clamp(64px, 8vw, 116px);
  height: auto;
}

.works__note-text {
  flex: 1;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* 狭い画面では縦に積む。
   アイコンは縦積みだと場所を取るだけなので出さない（lazy 指定なので通信も発生しない）。
   文章は左ぞろえのまま、ボタンだけ中央に置く。 */
@media (max-width: 899px) {
  .works__note {
    flex-direction: column;
    align-items: flex-start;
    border-radius: clamp(20px, 3vw, 32px);
  }

  .works__note-icon {
    display: none;
  }

  .works__note .cta-pill {
    align-self: center;
  }
}

/* ==========================================================================
   法人のお客様へ（最重要セクション）
   ========================================================================== */

.business {
  display: grid;
  gap: var(--space-6);
}

.business__body {
  display: grid;
  gap: var(--space-4);
}

.business__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-title);
}

.business__text {
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 1024px) {
  .business {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* ==========================================================================
   Instagram 埋め込み枠
   ========================================================================== */

.insta-frame {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--space-5);
  background-color: var(--c-bg-alt);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   旧ファーストビューの骨格（index-b.html が使用中）
   TODO: デザイン案が確定したら削除する
   ========================================================================== */

.hero {
  position: relative;
}

.hero__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.hero__actions .btn {
  flex: 1;
}

/* ==========================================================================
   お知らせ ／ 公式Instagram（デザインサンプル section_7.jpg に準拠）

   左にカード6枚、右にInstagramパネル、その間に縦の区切り線。
   区切り線は grid の1列（幅1px）として置いてある。左右どちらが伸びても
   grid の stretch で自動的に同じ高さになるため、位置合わせが要らない。

   Instagramパネルは sticky で画面に貼り付く。左のカードを最後まで
   スクロールし切ると貼り付きが解け、そのまま次のセクションへ進む。
   パネルは画面の高さに収める。投稿グリッドが余った高さを埋めるので、
   画面が低いときはサムネイルが縮み、パネルが画面からはみ出さない。
   ========================================================================== */

.news {
  background-color: #fff;
  padding-block: clamp(48px, 7vw, 104px);
}

.news__inner {
  width: min(92%, 1400px);
  margin-inline: auto;
  display: grid;
  /* 右カラムの幅が、そのままInstagramパネルの高さを決めている
     （グリッドは幅の90%・投稿は正方形なので、幅が広いほど縦にも伸びる）。
     画面が低いときは幅も詰めないと、パネルが画面に収まらず sticky が破綻する。
     そこで 100vh にも連動させた。

     74vh - 258px の根拠（実測から導出）：
       パネル高 = 1.35W + 100.7  （W＝右カラム幅。実測2点から回帰した式）
       パネルより上の積み上げ（貼り付き14px＋見出し48+37px＋DMボックス57+16px）= 172px
       172 ＋ パネル高 ≦ 100vh を解くと W ≦ 74.07vh − 202。
       Webフォントの読み込みで見出しの高さが数px動くため、余裕を見て 216 にしている

     下限の320pxは「見出しとリンクが1行に収まる幅」。これを下回ると文字が折り返して
     かえって縦に伸びるため、幅を詰める意味がなくなる。 */
  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, clamp(320px, min(33vw, calc(74vh - 216px)), 500px));
  gap: clamp(24px, 3.4vw, 56px);
  /* start が必須。既定の stretch だと右カラムが行の高さいっぱい（＝左カラムと同じ）に
     引き伸ばされ、sticky の可動域が 0 になって貼り付かなくなる。
     start なら中身ぶんの高さに収まり、grid area との差が可動域になる。 */
  align-items: start;
}

.news__divider {
  align-self: stretch;
  background-color: #dde6f3;
}

/* 字面と色はサービスセクションのタイトルと共有（指定はこのファイル上部にまとめてある） */
.news__title {
  margin-bottom: clamp(20px, 2.6vw, 38px);
}

/* Instagramの見出しは、大きくすると右パネルに使える高さが減って
   投稿のグリッドが小さくなってしまうため、字面は従来のまま。
   色のルールだけサービスセクションとそろえている */
.news__title--insta {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 13px);
  /* 小見出しを持たないので、小見出しぶんの間隔は戻す */
  margin-top: 0;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 見出しの文字より少し小さくする。ここが大きいと見出しの高さが増え、
   その分だけ下のパネルに使える高さ（＝投稿の大きさ）が削られる */
.news__title--insta img {
  flex-shrink: 0;
  width: clamp(24px, 2.2vw, 34px);
  height: auto;
}

/* --- 左：お知らせカード --- */

.news__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}

.news-card {
  border: 1px solid #e9eef4;
  border-radius: clamp(10px, 1.2vw, 16px);
  background-color: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.news-card:hover {
  border-color: var(--c-brand-blue);
  box-shadow: 0 10px 28px rgba(1, 73, 186, 0.12);
  transform: translateY(-3px);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(12px, 1.4vw, 20px);
}

.news-card__thumb {
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 14px);
  aspect-ratio: 16 / 10;
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.news-card:hover .news-card__thumb img {
  transform: scale(1.05);
}

.news-card__date {
  display: block;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--c-text-sub);
}

/* 高さの違うタイトルでも、下のタグ・ボタンの行が揃うように余りを吸わせる */
.news-card__title {
  flex: 1;
  margin-top: 3px;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: var(--fw-title);
  line-height: 1.6;
  color: var(--c-ink);
}

.news-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.8vw, 12px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

.news-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.news-card__tags li {
  padding: 3px clamp(7px, 0.8vw, 11px);
  border-radius: 999px;
  background-color: #eef4fd;
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--c-brand-blue);
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px clamp(9px, 1vw, 14px);
  border: 1px solid #d9e2f0;
  border-radius: 999px;
  font-size: clamp(9px, 0.78vw, 11px);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--c-brand-blue);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.news-card__more svg {
  width: clamp(10px, 0.9vw, 13px);
  height: auto;
}

.news-card:hover .news-card__more {
  background-color: var(--c-brand-blue);
  color: #fff;
}

.news__more {
  margin-top: clamp(24px, 3vw, 44px);
}

/* --- 右：公式Instagram --- */

/* ヘッダーの下に潜ってよい前提で貼り付ける。ヘッダーぶんを空けると
   その高さがまるごとパネルから削られ、投稿が小さくなるため。
   ヘッダーは下スクロールで隠れるので、実際に重なる場面も短い。 */
.news__side {
  position: sticky;
  top: clamp(8px, 1vw, 14px);
}

/* 高さは中身なりに任せる。頭打ちにすると投稿が小さくなるため。
   画面に収まらない高さのときは、下の @media で sticky を解除している。 */
.insta {
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.1vw, 16px);
  border: 1px solid #e9eef4;
  border-radius: clamp(10px, 1.2vw, 16px);
}

.insta__head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(8px, 0.9vw, 12px);
}

/* ロゴ全体（W＋WASH MAN）は横長で、丸く切ると文字の左右が欠ける。
   Wマークだけを正方形に切り出した avatar.webp を使っている。
   TODO: Instagramのプロフィール画像を受領したら差し替える */
.insta__avatar {
  flex-shrink: 0;
  width: clamp(38px, 3.6vw, 54px);
  height: clamp(38px, 3.6vw, 54px);
  padding: clamp(2px, 0.25vw, 4px);
  border: 1px solid #e9eef4;
  border-radius: 50%;
  object-fit: contain;
  background-color: #fff;
}

.insta__handle {
  font-size: clamp(9px, 0.78vw, 11px);
  color: var(--c-text-sub);
}

.insta__name {
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

/* 投稿は必ず正方形（Instagramの見え方に合わせる）。
   幅はパネルの90%で固定し、高さは中身なりに伸ばす。
   以前は画面の高さに合わせて幅のほうを縮めていたが、それだと
   パネルの左右が大きく余って投稿が小さくなるため、幅を優先する形に変えた。 */
.insta__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5px, 0.7vw, 10px);
  width: 90%;
  margin-inline: auto;
}

.insta__item {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: clamp(8px, 1vw, 14px);
  background-color: #f4f7fb;
}

.insta__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.insta__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.insta__item:hover img {
  transform: scale(1.06);
}

.insta__link {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  margin-top: clamp(8px, 0.9vw, 12px);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: var(--fw-label);
  color: var(--c-ink);
  transition: color var(--t-fast);
}

.insta__link svg {
  flex-shrink: 0;
  width: clamp(18px, 1.7vw, 24px);
  height: auto;
}

.insta__link span {
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: var(--fw-body);
  color: var(--c-text-sub);
}

.insta__link:hover {
  color: var(--c-brand-blue);
}

/* 見出しとパネルのあいだ。パネルの外にあるので、
   この高さぶんだけ .insta に使える高さが減る（sticky の計算に効いている） */
.news__dm {
  margin-bottom: clamp(10px, 1.2vw, 16px);
  padding: clamp(7px, 0.8vw, 11px) clamp(10px, 1.1vw, 16px);
  border: 2px solid var(--c-brand-blue);
  border-radius: clamp(8px, 0.9vw, 12px);
  background-color: #fff;
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: var(--fw-label);
  text-align: center;
  color: var(--c-brand-blue);
}

/* 右カラムが下限（320px）に達してもパネルが画面に収まらない高さでは、
   貼り付けをやめて普通に流す。sticky のままだと下端（Instagramへのリンク）が
   画面の外に出たまま固定され、いくらスクロールしても見えなくなるため。
   320px のときに必要な画面高は実測で約702px。少し余裕を見て720pxを境にしている。 */

@media (max-height: 720px) {
  .news__side {
    position: static;
  }
}

/* --- タブレット以下：縦積みにして sticky をやめる --- */

@media (max-width: 899px) {
  .news__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1カラムになる幅では、見出しと記事は左ぞろえのまま、ボタンだけ中央に置く。
     お困りごとの結び・クリーニング例の案内・料金と同じ扱い。
     .cta-pill は inline-flex なので、幅を中身ぴったりにして左右autoで寄せる */
  .news__more {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .news__divider {
    display: none;
  }

  .news__side {
    position: static;
    margin-top: clamp(36px, 5vw, 56px);
  }

  /* 縦積みでは横幅に余裕があるので、グリッドをパネルいっぱいまで使う */
  .insta__grid {
    width: 100%;
  }
}

@media (max-width: 599px) {
  .news__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   仮置き画像

   まだ本番の素材が決まっていない画像枠。グレーで塗るだけにしてある。
   関係のない写真を仮に置くと実物と見分けがつかないため、あえて絵を出さない。
   HTML側も img を持たせていないので、無駄な読み込みも起きない。

   TODO: 素材が入ったら <img> を書き戻し、is-placeholder を外す
   ========================================================================== */

.is-placeholder {
  background-color: #d8dce3;
}

/* 中身が無いので、ホバーで拡大する仕掛けも動かないようにしておく */
.is-placeholder img {
  display: none;
}

/* お問い合わせ導線（.contact-lead）とメール／LINEのカード（.contact-card）は
   下層ページでも使うため、共通の style.css へ移した（2026-08-23）。
     .contact-lead …… style.css「14-2. お問い合わせ導線（電話番号）」
     .contact-card …… style.css「15. フッター」 */