@charset "UTF-8";
/* ============================================================================
   装飾(DS-003・Claude Design 制作)
   原本: clients/t001/素材/装飾/decorations.css
   取り込み: D-057

   ■ 原本から変えたのは3点だけ。形と寸法には触れていない。
     (1) 色を確定トークン(var)へ配線し直した。
         原本は独自の :root(--paper:#F7F5EF / --ink:#1A1D24 …)を宣言していた。
         DS-003 の本文が受信側で切れ、DESIGN_TOKENS が届かなかったためである。
         ⚠ 同じ役割の変数を2組持つと「一貫性がない」の原因になる。1組に寄せた。
     (2) 追従タグに **スクロールで出現する** 挙動を足した。
         原本は最初から出ていた。顧客の要望は「スクロールしたら出てくる」である。
     (3) 宣言だけで使っていない変数(--rule)を落とした([検証-7])。

   ■ 破線のステッチは、依頼どおりこちら側の実装(本ファイル末尾)。
   ============================================================================ */

/* ── 06 紙のテクスチャ ────────────────────────────────────────────────
   タイルの平均が中間灰で、soft-light で合成するため、
   **合成後の平均色が地色そのもの**になる。地色は指定値のまま使える。
   実測(400×400・確定トークン5色): 最大差 1.41 / 全て ±2 以内。
   ⚠ background-blend-mode とタイル寸法を変えると平均が動く。 */
:root{
  --tex:url(../img/deco/06-paper-texture.svg);
  --tex-size:160px 160px;
}
body,.sec,.sec-usu,.sec-contact,.ft{ background-blend-mode:soft-light; }

/* ── 01 丘 ────────────────────────────────────────────────────────────
   節の下端に置く。横は伸縮、稜線の高さは px 固定。
   3層: 奥=淡群青 / 中=群青(中) / 手前=紙。
   **手前が紙なので、下に続く節が紙の地のときだけ置く。** */
.hills-wrap{ position:relative; line-height:0; margin-top:clamp(40px,6vw,80px);
  /* 🔴 D-066: 丘の下に出ていた**淡群青の帯**を消す。
     丘は節の最後に置かれるが、その下に**節の下余白(--sec-y = 64〜120px)がそのまま残り、**
     **装飾ではない中途半端な面**になっていた(1440で実測 115px)。
     丘そのものが境界なので、その下に地色が残る意味は無い。
     余白ぶんだけ引き上げて、丘の下端を節の下端に一致させる。 */
  margin-bottom:calc(var(--sec-y) * -1) }
.hills{ display:block; width:100%; height:clamp(96px,14vw,300px); border:0 }

/* 丘の稜線に立つ木。稜線の位置に合わせて配置する */
.tree{ position:absolute; display:block; height:auto; pointer-events:none }
.tree-1{ left:8%;  bottom:38%; width:clamp(28px,4.4vw,74px) }
.tree-2{ left:15%; bottom:34%; width:clamp(20px,3.1vw,52px) }
.tree-3{ right:12%; bottom:36%; width:clamp(24px,3.8vw,64px) }
@media (max-width:560px){ .tree-3{ display:none } }

/* ── 03 キラキラ ── 🔴 D-066 で不採用。CSSごと外した ─────────────────
   **参考サイト(8hands.jp)には 20箇所・87px で存在する。**
   **D-063 で、実測に合わせて 5個→20個 / 64px→87px に増やした。**
   **D-066 で、現地担当の判定により**全て除去**した。**

   > **顧客案件では、顧客(と現地担当)の判断が優先する。**
   > **参考サイトに在ることは、採用の理由にならない。**

   絵は消していない。`clients/t001/素材/使わなくなった装飾/` に退避してある。
   復活させるなら、そこから戻して この節の CSS を書き戻す。
   ⚠ `.sec{position:relative}` と `.sec > .wrap{position:relative;z-index:1}` は
     **見出しの背後のペンキ(`.sec-h2::before{z-index:-1}`)が使っているので残す。**
     D-080 で英語見出しを全廃したが、**重ねる仕組みはそのまま使っている。** */
.works-wrap,.sec{ position:relative }
.sec > .wrap{ position:relative; z-index:1 }

/* ── 04 家型の写真マスク ──────────────────────────────────────────────
   `clip-path` なので、刷毛のマスク(mask-image)と同じ要素に同居できる。
   刷毛が塗り、その結果が家の形に抜かれる。

   ⚠ 最初、家の形が見えなかった。切り抜いた外側に出るのが `.work` の面の色で、
     それが枠の縞と同じ色だったためである(#E1E6EF)。**形は出ていたが、見えなかった。**
     事例カードの面をやめ、節の地の上に直接置く形にした。
     参考サイトも、事例の写真は地の上に直接置いてキャプションを下に添えている。 */
.house-clip{ clip-path:polygon(50% 2.2%, 97.8% 44.8%, 97.8% 97.8%, 2.2% 97.8%, 2.2% 44.8%) }
.works-grid .work{ background:transparent }
.works-grid .work-meta{ padding-left:0; padding-right:0 }

/* ── 07 屋根型の切り欠き(問い合わせ節の上端)────────────────────────── */
.roof-top{
  -webkit-mask-image:url(../img/deco/07-roof-notch.svg),linear-gradient(#000,#000);
          mask-image:url(../img/deco/07-roof-notch.svg),linear-gradient(#000,#000);
  -webkit-mask-size:100% 120px,100% calc(100% - 119px);
          mask-size:100% 120px,100% calc(100% - 119px);
  -webkit-mask-position:top left,bottom left;
          mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  padding-top:clamp(120px,14vw,180px);
}

/* ── 05 追従するお問い合わせタグ ──────────────────────────────────────
   🔴 顧客の要望は「スクロールしたら出てくる」。
   よって初期状態は隠し、`.show` が付いたときに出す。
   `.show` は main.js が付ける(ヒーローを過ぎたら出し、問い合わせ節で引っ込める)。
   既存の追従CTA(#fixcta)と役割が重なるため、
   **PCはタグ / スマホは下部バー**に振り分けている(下のメディアクエリ)。 */
.contact-tag{
  position:fixed; right:0; top:50%; z-index:65;
  display:flex; flex-direction:row-reverse; align-items:center; justify-content:center;
  gap:10px;                      /* 縦書き2本が重なっていたため(D-057 の目視で発見) */
  width:132px; height:300px; padding:0 0 0 12px;
  color:var(--sumi); text-decoration:none;
  background:url(../img/deco/05-contact-tag.svg) 0 0 / 100% 100% no-repeat;
  /* ⚠ 隠すのは opacity だけにする。
     横に逃がすと、隠れている間だけ画面の外へ 14px はみ出していた(D-058 の実測)。
     参考サイトも `opacity: 0 → 1` だけで出している(D-053 の実測)。 */
  opacity:0; transform:translateY(-50%); pointer-events:none;
  transition:opacity .4s ease-out, transform .25s ease-out;
}
.contact-tag.show{ opacity:1; transform:translateY(-50%); pointer-events:auto }
.contact-tag.show:hover,
.contact-tag.show:focus-visible{ transform:translateY(-50%) translateX(-6px) }
.contact-tag__label{ writing-mode:vertical-rl; font-size:19px; letter-spacing:.18em; line-height:1.4 }
.contact-tag__en{ writing-mode:vertical-rl; font-family:"JosefinSans","NotoJP",sans-serif;
  font-size:22px; letter-spacing:.02em; color:var(--sumi) }

/* スマホは既存の下部バー(#fixcta)に任せる。タグは出さない
   (同じ役割のものを2つ出さない) */
@media (max-width:760px){ .contact-tag{ display:none } }
/* PCでは下部バーを出さない(タグと重複するため)。
   ただしヘッダーに電話番号が常時出ているので、導線は減らない */
@media (min-width:761px){ .fixcta{ display:none } }

/* ── 破線のステッチ(こちら側の実装・DS-003 で対象外とした分)──────────
   参考サイトは画面の四辺を内側16pxで囲っている。
   ここでは主張しすぎないよう、左右の縦線だけにした。 */
/* ── 画面の縁取り ── 🔴 D-098 で**撤去した**。CSSごと外す ────────────────
   撤回した裁定2件:
     ・D-092「縁取りは3辺のまま。4辺にしない」→ **0辺にする**
     ・D-094「白い線を3種とも引く」のうち、**画面の縁取りだけ**を撤回
       (箱の枠 2px と ナビの縦罫 1px は残す)

   ⚠ 当時の判断が誤りだったのではない。
     参考サイトには縁取りがあり(`.line-stripe` + `.line-bottom`)、
     斜めの線はその**下辺が傾いたもの**だった。だから t001 にも縁取りを置いた。
   ⚠ しかし t001 の縁取りは**破線**である(参考サイトは**実線**)。
     同じ構造を写したのに、**破線が傾いた**。
     現地担当の判定: 「点線も不要。両サイドの点線も不要。」
     → 教訓 [意匠-11] に追記(実装は写せたが、実装が乗っていた条件は写せていなかった)。 */

/* ── 08 斜めに傾いた面(「料金の目安」の上下)── D-092 実装 / D-093 移設 / **D-096 で再配置** ──
   参考サイトは `#home_kodawari::after` に**地色の板**を1枚敷いて傾けている
   (`height:240px; bottom:-120px; transform:skewY(-7.8deg)` / main.css 2283-2294)。
   ⚠ 節そのものは傾けない。傾けると**当たり判定も傾き**、押す所 48px が静かに壊れる。

   🔴 **D-096: 「料金の目安」の上下 2箇所**に置く。現地担当の指定。
   **板は2枚とも「料金の目安」の色(紙)にする。**
   理由: 板の色が、その節の**見えている画素**と違うと「別の帯」に見える(R-092 で実測)。
   「できる工事」と「工事の流れ」は**写真背景**なので、そちら側の色では板が作れない。
   **平らな節の色で作り、写真の節へ食い込ませる。**参考サイトの #home_kodawari と同じ並び。

   🔴 **上げるべき中身は4箇所ある**(板2枚 × 上下2側)。
   ① できる工事の下部 ② 料金の目安の上部 ③ 料金の目安の下部 ④ 工事の流れの上部。
   ⚠ D-092 で①相当、D-093 で②相当を踏んでいる。
     **板の色が隣の節と同じでも、隠れるのは地ではなく中身なので見える。**
   ⚠ この3節はいずれも `mask` を持たない(D-096 で実測)。だから `.wrap` を上げれば足りる。 */
/* 🔴 D-200: **角度を固定するのをやめた。**帯が境界へ届く量を、**器から直接**決める。

   ■ なぜ角度をやめたか
     器の高さは画面幅に**比例しない**。`--sec-y` は
     スマホで **34px 固定**、768px 以上で `clamp(64px,8vw,120px)` になる。
     つまり **496〜767px の帯では、幅だけが伸びて器は 34px のまま**である。
     角度を固定すると、そこで必ず器からあふれる。
     `[実測]` 4° 固定では **496〜767px** で破れていた(8px 刻みで 34点が該当)。

   ■ どう保証するか
     **帯が境界へ届く量 `--skew-2e` を、器そのもの(`--sec-y`)から引いて決める。**
     `2e = --sec-y − 余白` なので、**どの幅でも必ず器より小さい。**式の上で保証される。
     ⚠ 「5点で測って角度を選ぶ」をやめた。点を選ぶ限り、点の間は保証できない。

   ■ 余白 12px
     現地担当の指示「余分は大きすぎてもダメだけど、もうほんの少しあってもいい。
     カードに被るくらいなら少し余分を」。**被らないほうを優先し、12px 取った。**

   ■ 上限 112px / 下限 16px
     上限: `--sec-y` の最大は 120px。112px で止めると、いちばん広い画面でも
           傾きが 4.3° を超えない。
     下限: 16px。**これを下回ると水平に見える。**
           ⚠ `--sec-y` は最小 34px なので `34−12=22px`。**下限は実際には効かない**が、
             `--sec-y` を将来詰めたときの歯止めとして置く。

   ■ 角度は「結果として出るもの」
     `[計算]` 傾き = atan(2e ÷ 画面幅)。**1.64°(767px)〜 3.94°(320px)〜 4.27°(1500px)**。
     ⚠ `skewY` は使わない。**`clip-path` で辺を切る。**
       角度を CSS で計算する必要が無くなり、**届く量が px でそのまま保証される。** */
:root{
  --skew-2e:clamp(16px, calc(var(--sec-y) - 12px), 112px);
}

.skew-band{ position:relative }

/* 板2枚。**上へ**届くもの(::before)と、**下へ**届くもの(::after)。
   ⚠ 届く量は上下とも `--skew-2e` で同じ。**だから2辺は平行になる。** */
.skew-band::before,
.skew-band::after{
  content:""; position:absolute; pointer-events:none; z-index:1;
  left:0; right:0;
  height:calc(var(--skew-2e) + 48px);
  background-color:var(--skew-bg,var(--kami));
  background-image:var(--tex); background-size:var(--tex-size);
  background-blend-mode:soft-light;
}
/* 上の境界。左端が境界、右端が 2e 上。 */
.skew-band::before{
  top:calc(var(--skew-2e) * -1);
  clip-path:polygon(0 var(--skew-2e), 100% 0, 100% 100%, 0 100%);
}
/* 下の境界。左端が 2e 下、右端が境界。**上と同じ向きに傾く。** */
.skew-band::after{
  bottom:calc(var(--skew-2e) * -1);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--skew-2e)), 0 100%);
}

/* ── 斜めの線 ── 🔴 D-099 で**削除した**。CSSブロックごと外す ──────────────
   ⚠ t001 の他の境界は**線が0本**である(実測)。線を引くと、そこだけ別の作りになる。
   ⚠ 参考サイトの `.line-bottom` を「線」と読んだのが誤りだった。
     あれは**画面の縁取りの下辺**であって、境界の線ではない。
     縁取りは D-098 で撤去したので、その辺も一緒に消える。
   → 境界は**背景の色の変わり目だけ**で作る。現地担当の指定:
     「見える実線を引くのではなく、背景の画像が斜めに切れているように見せたい。」 */

/* 🔴 板より上に中身を出す。4箇所すべて。
   参考サイトも同じことをしている(`.home_kodawari--content{position:relative;z-index:40}`)。 */
#service > .wrap,
#service > .svc-stick > .wrap,   /* D-148: 中身を .svc-stick で包んだ */
#price   > .wrap,
#faq     > .wrap{ position:relative; z-index:2 }   /* D-125: 斜めの帯の次の節が #flow → #faq に変わった(工事の流れをトップから外したため) */

/* 🔴 D-096: フッター上端の丘。
   ⚠ 手前の層を「下に続く節の地色」にする規則は、既存の丘と同じである。
     既存の丘は下が紙なので手前が紙。ここは下がフッター(淡群青)なので手前が淡群青。
   ⚠ 丘は `#contact` の中に置く。`#contact` は `mask`(屋根の切り欠き)を持つが、
     丘は要素の**箱の中**に収まるので切られない(はみ出す疑似要素だけが切られる)。 */
.hills-ft{ margin-top:clamp(24px,4vw,56px) }


/* 🔴 D-200: よくある質問の区切りの破線を**撤去した**。
   ⚠ 現地担当の判定「点線も不要」。t001 では破線を一切使わない。
   ⚠ これで **Q と Q のあいだの区切りが無くなった。**
     実線で代替するかどうかは司令が裁定する。**こちらでは代替していない。** */

/* ── 動きを減らす設定 ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sparkle--twinkle{ animation:none; opacity:1 }   /* 明るい最終状態で静止(消えない) */
  .contact-tag{ transition:none }
  .contact-tag.show:hover,
  .contact-tag.show:focus-visible{ transform:translateY(-50%) }
}