/* ===========================================================
   common.css — モーモペイント株式会社  全ページ共通
   読み込み順：common.css → top.css（トップ）／lower.css（下層）

    1. トークン        6. ヘッダー          11. CTA
    2. ベース          7. アイコン          12. フッター
    3. 器              8. 稜線・ブロブ      13. 画面下の固定ボタン
    4. 見出し          9. 共通の部品        14. 余白ユーティリティ
    5. ボタン         10. 写真帯・CTA 帯

   決定の経緯と実測値は projects/mowmopaint/direction-lock.md（§番号）にある。
   =========================================================== */

/* ---------- 1. トークン ---------- */

:root {
  /* 色。--pink は看板（現場シート）の実物から実測した値。
     ロゴ SVG の #BA5594 は CMYK→RGB 変換で沈んだ値なので採らない */
  --ink: #251915;
  --pink: #D55396;
  --pink-deep: #BE4785;   /* 白文字を載せるベタ塗り用。#D55396 に白の 16px 太字だと AA に届かない */
  --pink-pale: #F5A7B1;
  --yellow: #FBEE00;
  --green: #8BC33D;
  --red: #E50014;
  --bg: #FFFBF6;          /* 温かい白。#fff は使わない */
  --bg-2: #FBF3EC;        /* 2段目の地（温かいクリーム） */
  --hill-1: #FBE3E7;      /* 丘の稜線（淡）＝セクションの地にも使う */
  --hill-2: #F5CCD4;      /* 丘の稜線（濃） */
  --tel-bg: #50AF16;      /* 電話ボタンの地色。ヘッダーと画面下の固定帯で共通 */
  --tel-bg-hover: #479C13;

  /* 書体。見出し＝丸ゴ／本文＝角ゴ／英字 eyebrow＝手書き */
  --round: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --gothic: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --script: 'Caveat', 'Zen Maru Gothic', cursive;

  /* 器の幅（1つの幅で全部組まない） */
  --inner-xs: 45rem;    /* 720 読み物 */
  --inner-sm: 60rem;    /* 960 */
  --inner-md: 75rem;    /* 1200 既定 */
  --inner-lg: 87.5rem;  /* 1400 カード・ギャラリー */

  /* セクション上下 */
  --pdg-md: clamp(3.75rem, 2rem + 5.2vw, 7.5rem);
  --pdg-lg: clamp(5rem, 2.6rem + 7vw, 10rem);

  /* 本文。下限 1rem を死守 */
  --fz-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --ls-body: 0.05em;

  /* 電話アイコン（Bootstrap Icons telephone-fill）。data-URI はここ1か所だけに持つ */
  --ico-tel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-telephone-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.885.511a1.745%201.745%200%200%201%202.61.163L6.29%202.98c.329.423.445.974.315%201.494l-.547%202.19a.678.678%200%200%200%20.178.643l2.457%202.457a.678.678%200%200%200%20.644.178l2.189-.547a1.745%201.745%200%200%201%201.494.315l2.306%201.794c.829.645.905%201.87.163%202.611l-1.034%201.034c-.74.74-1.846%201.065-2.877.702a18.634%2018.634%200%200%201-7.01-4.42%2018.634%2018.634%200%200%201-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- 2. ベース ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: var(--ls-body);
  font-feature-settings: 'palt' 1;
}

/* height:auto＝width/height 属性の高さを打ち消し、比率は aspect-ratio 側で決める */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
/* 電話番号は途中で折らない */
a[href^="tel:"] { white-space: nowrap; text-wrap: nowrap; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

p, li { font-size: var(--fz-body); line-height: 2; }

/* ---------- 3. 器 ---------- */

.inner { width: 90%; max-width: var(--inner-md); margin-inline: auto; }
.inner--xs { max-width: var(--inner-xs); }
.inner--sm { max-width: var(--inner-sm); }
.inner--lg { max-width: var(--inner-lg); }
@media (max-width: 859px) { .inner { width: 86%; } }

.sec { position: relative; }

.lead-txt { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.95; }
.nowrap { white-space: nowrap; }

/* 牛柄ブロブの clipPath 置き場（各ページの body 直下） */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 4. 見出し ---------- */

.sec-head { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }

.eyebrow {
  display: block;
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--pink);
  margin-bottom: 0.35rem;
}

/* h2。text-wrap: balance＋word-break: auto-phrase で、行末に1〜2字だけ残るのを防ぐ（承認済み） */
.ttl-02 {
  text-wrap: balance;
  word-break: auto-phrase;
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin: 0;
}
.ttl-03 {
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
  line-height: 1.55;
  letter-spacing: 0.07em;
  margin: 0;
}
.ttl-04 {
  font-family: var(--round);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin: 0;
}
.ttl-02:not(:last-child),
.ttl-03:not(:last-child),
.ttl-04:not(:last-child) { margin-bottom: 1em; }
.sec-head .ttl-02:not(:last-child) { margin-bottom: 0; }
/* 12字を1行に収めたい見出し用 */
.ttl-02--fit { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }

/* ---------- 5. ボタン ---------- */

/* 錠剤型（ヘッダー・FV・SNS） */
.pill {
  display: inline-block;
  font-family: var(--round);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.62em 1.5em;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--ghost { background: var(--bg); color: var(--ink); border: 2px solid var(--ink); }
.pill--pink  { background: var(--pink); color: #fff; border: 2px solid var(--pink); }
.pill--pink:hover { background: #C24686; border-color: #C24686; }

/* 本文中のボタン（円形矢印つき） */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--round);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.8em 1.1em 0.8em 1.8em;
  transition: background .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.btn .arw {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.95rem;
  transition: background .3s ease-out, color .3s ease-out, translate .3s ease-out;
}
.btn:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn:hover .arw { background: #fff; color: var(--pink); translate: 0.25rem 0; }
/* 「前へ」の矢印 */
.arw--back { rotate: 180deg; }

/* ベタ塗りは --pink-deep（白文字とのコントラスト 4.7） */
.btn--pink { background: var(--pink-deep); color: #fff; border-color: var(--pink-deep); }
.btn--pink .arw { background: #fff; color: var(--pink-deep); }
.btn--pink:hover { background: #A63B72; border-color: #A63B72; color: #fff; }
.btn--pink:hover .arw { background: #fff; color: #A63B72; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn-row--ctr { justify-content: center; }

/* SP（720px 以下）は本文中のボタンを全幅にそろえる。矢印は右端に固定、文字は中央。
   SNS のアイコン付きボタン（.pill）と記事の前後ナビ（.article-nav）は対象外 */
@media (max-width: 720px) {
  /* --ctr が justify-content: center を持つので、列を 1fr に固定しないと auto 幅のまま中央に置かれる */
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn,
  .cta-way .btn {
    width: 100%;
    position: relative;
    justify-content: center;
    padding-inline: 3.4em;   /* 左右を同じにして文字を本当の中央に。矢印に文字がかからない幅 */
  }
  .btn-row .btn .arw,
  .cta-way .btn .arw {
    position: absolute;
    right: 1.1em;
    top: 50%;
    margin-top: -1.05rem;   /* .arw は 2.1rem 角。translate はホバーで使うので margin でそろえる */
  }
}

/* ---------- 6. ヘッダー ----------
   写真の上に乗る（position: absolute）。基準の入れ物はトップ＝.hero／下層＝.page-top。
   左上＝ロゴの白いブロブ／中央＝ナビ（1181px 以上）／右＝電話・価格・無料相談・バーガー */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: 0;
}
/* ナビは写真の上に乗るので、上端に地色→透明のごく薄いグラデを敷く（写真全体を暗くするスクリムは使わない） */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 10rem;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(255, 251, 246, .72) 0%,
    rgba(255, 251, 246, .45) 45%,
    rgba(255, 251, 246, 0) 100%);
  pointer-events: none;
}

/* ロゴの白いブロブ。右下の辺だけが不規則な曲線＝牛柄の斑と同じ言語 */
.brand-blob {
  position: relative;
  width: clamp(16.25rem, 33.39vw, 31.59rem);
}
.blob-shape {
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: clamp(7.22rem, 10.47vw, 9.93rem);
  z-index: 0;
}
/* 白い形の path は PC 用と SP 用の2本（全ページ同じマークアップ）。SP 用はトップの 900px 以下だけ top.css が出す */
.blob-shape__sp { display: none; }
/* ロゴ（入稿データ 1206×154。形は改変せず色だけ揃えたもの） */
.brand {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
  padding: clamp(1.43rem, 2.57vw, 2.38rem) 0 0 clamp(1.43rem, 2.76vw, 2.66rem);
}
.brand img {
  height: clamp(1.95rem, 2.8vw, 2.71rem);
  width: auto;
}
/* 359px 以下だけ器とロゴを一段小さくする（320px でバーガーが 14px はみ出していた） */
@media (max-width: 359px) {
  .brand-blob { width: 15rem; }
  .brand { padding-left: 0.9rem; }
  .brand img { height: 1.75rem; }
}

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  gap: clamp(0.6rem, 1.1vw, 1.15rem);
  align-items: center;
  justify-content: flex-end;
  font-family: var(--round);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding-top: clamp(1.9rem, 3.1vw, 2.7rem);
}
@media (max-width: 1180px) { .nav { display: none; } }
.nav a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.15em;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--pink); }

.util {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.6rem;
  padding: clamp(1.55rem, 2.7vw, 2.35rem) clamp(1rem, 2.2vw, 2rem) 0 0;
}

/* 電話ボタン。緑（電話）・白（価格）・ピンク（無料相談）は高さ 38px でそろえる。
   ★白文字 × #50AF16 のコントラストは 2.81。色はデザイナー指定（direction-lock §19-7） */
.site-header .util .tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;      /* 38px */
  padding-block: 0;
  padding-inline: 1.25em;
  line-height: 1.3;
  font-family: var(--round);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  background: var(--tel-bg);
  border: 2px solid var(--tel-bg);
  border-radius: 999px;
}
.site-header .util .tel:hover { background: var(--tel-bg-hover); border-color: var(--tel-bg-hover); }
/* 番号の前の電話アイコン。★display を必ず付ける（1180px 以下で .tel が inline に戻ったとき
   inline の ::before には width/height が効かず、アイコンが消える） */
.site-header .util .tel::before {
  content: '';
  display: inline-block;
  vertical-align: -0.14em;
  margin-inline-end: 0.45em;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico-tel) center / contain no-repeat;
  mask: var(--ico-tel) center / contain no-repeat;
}
.site-header .util .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;      /* 38px＝.tel と同値 */
  padding-block: 0;
  padding-inline: 1.25em;
  line-height: 1.3;
  white-space: nowrap;
}

/* ナビが出ている幅（1181px 以上）は、右側を2行に組む。
   上段＝価格をシミュレーション／下段＝電話・無料相談。ナビの行が2行の「あいだ」に来る */
@media (min-width: 1181px) {
  .site-header .util {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "price price burger"
      "tel   free  burger";
    gap: 0.4rem 0.45rem;
    align-items: center;
    /* ナビの上余白に連動。ナビ文字の中心＝上余白＋12px／2行の隙間の中心＝上余白＋38px＋gap/2 なので 29px 上へ。
       下限 0.5rem は 1181px で価格ボタンが画面上端に触れないための保険 */
    padding-top: max(0.5rem, calc(clamp(1.9rem, 3.1vw, 2.7rem) - 29px));
  }
  .site-header .util .pill--ghost{ grid-area: price; }
  .site-header .util .tel        { grid-area: tel; }
  .site-header .util .pill--pink { grid-area: free; }
  .site-header .util .burger     { grid-area: burger; }
}

/* 狭い幅では「行を1本ずつ落とす」。
   ① 1000px 以下：いちばん長い「価格をシミュレーションする」を落とす（ドロワーの .gnav-sim へ）
   ② 720px 以下：ロゴ＋バーガーだけにする。電話と無料相談は画面下の固定帯（.cta-fixed）へ */
@media (max-width: 1000px) {
  .site-header .util .pill--ghost { display: none; }
}
@media (max-width: 720px) {
  .site-header .util .tel  { display: none; }
  .site-header .util .pill { display: none; }
  .site-header .util { padding-right: clamp(0.9rem, 3.4vw, 1.4rem); }
}

/* ハンバーガー（ナビが入らない 1180px 以下で出る） */
.burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}
.burger span { display: block; width: 1.15rem; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 1180px) { .burger { display: flex; } }

/* ドロワー（popover。JS 不要。top layer に出るので固定帯より必ず上） */
.gnav[popover] {
  margin: 0 0 0 auto;
  inset: auto 0 auto auto;
  top: 5.2rem;
  right: clamp(1rem, 2.2vw, 2rem);
  width: min(20rem, 86vw);
  padding: 1rem 0.6rem;
  border: none;
  border-radius: 1.2rem;
  background: var(--bg);
  box-shadow: 0 1rem 2.4rem rgba(37,25,21,.18);
}
.gnav[popover]::backdrop { background: rgba(37,25,21,.28); }
.gnav a {
  display: block;
  padding: 0.62em 1.1em;
  font-family: var(--round);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 0.6rem;
}
.gnav a:hover { background: rgba(213,83,150,.1); color: var(--pink); }
.gnav hr { border: none; border-top: 1px solid rgba(37,25,21,.12); margin: 0.5rem 0.8rem; }
/* 「価格をシミュレーションする」はページのリンクではなく操作なので、枠付きにして分ける */
.gnav a.gnav-sim {
  margin: 0.5rem 0.6rem 0.2rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-align: center;
}
.gnav a.gnav-sim:hover { background: var(--ink); color: var(--bg); }
/* 720px 以下は入口がドロワーだけになるので「お問い合わせ」を CTA として立たせる */
@media (max-width: 720px) {
  .gnav a.gnav-cta {
    margin: 0.5rem 0.6rem 0.2rem;
    background: var(--pink);
    color: #fff;
    text-align: center;
  }
  .gnav a.gnav-cta:hover { background: var(--pink-deep); color: #fff; }
}

/* ---------- 7. アイコン ----------
   単色 SVG を mask-image ＋ data-URI で敷く（外部参照は file:// で読めないため）。
   出どころ＝Threads: threads-logo-black／TikTok: ionicons logo-tiktok／Instagram: RemixIcon instagram-fill */

/* 電話番号の前に置くアイコン（ヘッダーの .tel 以外はこれを使う） */
.tel-ico::before {
  content: '';
  display: inline-block;
  vertical-align: -0.12em;
  margin-inline-end: 0.4em;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ico-tel) center / contain no-repeat;
  mask: var(--ico-tel) center / contain no-repeat;
}

.ico {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.sns-btns .pill,
.footer-sns .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.ico--threads{ --ico: url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20976.98%201082%22%3E%3Cpath%20d%3D%22M770.35%2C500.35c-1.35-156.85-86.39-251.37-230.02-251.37-95.87%2C0-176.5%2C43.36-218.85%2C112.47l92.82%2C64.71c24.05-37.94%2C57.25-69.45%2C118.23-69.45%2C68.77%2C0%2C104.34%2C38.28%2C114.5%2C109.42-33.2-5.08-66.4-7.79-100.61-7.79-185.65%2C0-273.05%2C84.02-273.05%2C195.13s87.4%2C179.55%2C216.14%2C179.55c141.27%2C0%2C225.62-95.19%2C260.18-213.09%2C35.91%2C16.26%2C60.64%2C54.2%2C60.64%2C111.12%2C0%2C152.45-175.82%2C235.45-324.88%2C235.45-219.86%2C0-363.5-144.32-363.5-379.08%2C0-287.62%2C190.05-471.91%2C445.48-471.91%2C171.42%2C0%2C256.11%2C75.21%2C313.7%2C176.16l94.86-66.4C913.31%2C94.5%2C773.4%2C1%2C563.36%2C1%2C228.65%2C1%2C1%2C238.48%2C1%2C583.01c0%2C315.06%2C222.91%2C497.99%2C488.51%2C497.99%2C219.52%2C0%2C441.42-128.05%2C441.42-347.24%2C0-114.5-65.72-190.39-160.58-233.41h0ZM485.44%2C718.85c-48.44%2C0-91.13-23.04-91.13-65.38%2C0-66.74%2C81.98-87.06%2C162.27-87.06%2C30.49%2C0%2C60.3%2C2.03%2C86.72%2C7.79-18.97%2C86.72-75.21%2C144.66-157.87%2C144.66h0Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico--tiktok{ --ico: url("data:image/svg+xml,%3Csvg%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M412.19%2C118.66a109.27%2C109.27%2C0%2C0%2C1-9.45-5.5%2C132.87%2C132.87%2C0%2C0%2C1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14%2C23.9%2C350%2C16%2C350.13%2C16H267.69V334.78c0%2C4.28%2C0%2C8.51-.18%2C12.69%2C0%2C.52-.05%2C1-.08%2C1.56%2C0%2C.23%2C0%2C.47-.05.71%2C0%2C.06%2C0%2C.12%2C0%2C.18a70%2C70%2C0%2C0%2C1-35.22%2C55.56%2C68.8%2C68.8%2C0%2C0%2C1-34.11%2C9c-38.41%2C0-69.54-31.32-69.54-70s31.13-70%2C69.54-70a68.9%2C68.9%2C0%2C0%2C1%2C21.41%2C3.39l.1-83.94a153.14%2C153.14%2C0%2C0%2C0-118%2C34.52%2C161.79%2C161.79%2C0%2C0%2C0-35.3%2C43.53c-3.48%2C6-16.61%2C30.11-18.2%2C69.24-1%2C22.21%2C5.67%2C45.22%2C8.85%2C54.73v.2c2%2C5.6%2C9.75%2C24.71%2C22.38%2C40.82A167.53%2C167.53%2C0%2C0%2C0%2C115%2C470.66v-.2l.2.2C155.11%2C497.78%2C199.36%2C496%2C199.36%2C496c7.66-.31%2C33.32%2C0%2C62.46-13.81%2C32.32-15.31%2C50.72-38.12%2C50.72-38.12a158.46%2C158.46%2C0%2C0%2C0%2C27.64-45.93c7.46-19.61%2C9.95-43.13%2C9.95-52.53V176.49c1%2C.6%2C14.32%2C9.41%2C14.32%2C9.41s19.19%2C12.3%2C49.13%2C20.31c21.48%2C5.7%2C50.42%2C6.9%2C50.42%2C6.9V131.27C453.86%2C132.37%2C433.27%2C129.17%2C412.19%2C118.66Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico--instagram{ --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M12%202c2.717%200%203.056.01%204.122.06%201.065.05%201.79.217%202.428.465.66.254%201.216.598%201.772%201.153a4.908%204.908%200%200%201%201.153%201.772c.247.637.415%201.363.465%202.428.047%201.066.06%201.405.06%204.122%200%202.717-.01%203.056-.06%204.122-.05%201.065-.218%201.79-.465%202.428a4.883%204.883%200%200%201-1.153%201.772%204.915%204.915%200%200%201-1.772%201.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717%200-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89%204.89%200%200%201-1.772-1.153%204.904%204.904%200%200%201-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013%2015.056%202%2014.717%202%2012c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88%204.88%200%200%201%201.153-1.772A4.897%204.897%200%200%201%205.45%202.525c.638-.248%201.362-.415%202.428-.465C8.944%202.013%209.283%202%2012%202zm0%205a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zm6.5-.25a1.25%201.25%200%200%200-2.5%200%201.25%201.25%200%200%200%202.5%200zM12%209a3%203%200%201%201%200%206%203%203%200%200%201%200-6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* ---------- 8. 丘の稜線・牛柄ブロブ ----------
   セクション境界は直線で切らない。低振幅・非対称・2層の稜線を、セクションの外（上／下）に置き、
   前のセクションの地色を透かす。path は各 HTML のインライン SVG に持つ */

.hill {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(2.8rem, 5.5vw, 6.5rem);
  z-index: 1;
  pointer-events: none;
  display: block;
}
.hill--up   { bottom: 100%; margin-bottom: -1px; }
.hill--down { top: 100%; margin-top: -1px; }
.hill--cap  { top: -1px; }   /* 写真帯の上端を矩形で切らない */

/* 写真を牛柄の型で抜く（clipPath は .svg-defs に4種） */
.blob-1 { clip-path: url(#cowblob1); }
.blob-2 { clip-path: url(#cowblob2); }
.blob-3 { clip-path: url(#cowblob3); }
.blob-4 { clip-path: url(#cowblob4); }

/* ---------- 9. 共通の部品（トップと下層の両方で使う） ---------- */

/* チップ（市区町村・塗料プラン） */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  font-family: var(--round);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1.5px solid rgba(37,25,21,.16);
}
.chip--pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }

/* SNS ボタンの列 */
.sns-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.sns-btns .pill { font-size: 1rem; }

/* 施工事例カード＝完成写真を牛柄ブロブで抜き、Before を丸く重ねる。
   ★clip-path は子要素も切るので、Before の丸はブロブの外側（.work-frame）に置く */
.work-frame { position: relative; }
.work-main { overflow: clip; }
.work-main img {
  width: 100%;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
  object-position: 50% 46%;
}
.work-sub {
  position: absolute;
  z-index: 2;
  right: 1%;
  bottom: -7%;
  width: 40%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: clip;
  border: 5px solid var(--bg);
  box-shadow: 0 0.7rem 1.6rem rgba(37,25,21,.2);
}
.work-sub img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* After の写真が無い事例（登録し忘れ）。器だけ縞で出す＝不足が見える */
.work-main--empty {
  aspect-ratio: 1 / 0.86;
  background:
    repeating-linear-gradient(-45deg,
      rgba(213,83,150,.06) 0 10px, rgba(213,83,150,.12) 10px 20px),
    var(--bg-2);
}
.work-tag {
  position: absolute;
  font-family: var(--round);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
}
.work-tag--after  { top: 9%; left: 16%; z-index: 3; background: var(--pink-deep); color: #fff; }
.work-tag--before { left: 50%; bottom: 0.35rem; translate: -50% 0; background: var(--bg); color: var(--ink); box-shadow: 0 0.2rem 0.5rem rgba(37,25,21,.2); }
/* 丸インセットは写真の下 7% までしか出ないので、チップは 1.8rem 空ければぶつからない */
.works-list .chips { margin-top: 1.8rem; }
/* 事例カードごとリンク（個別ページへ）。トップと施工事例一覧の両方で使う（トップは lower.css を読まないのでここに置く） */
.work-link { display: block; text-decoration: none; color: inherit; }

/* 大きな電話番号（CTA・お問い合わせ） */
.tel-lg {
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.8rem);
  letter-spacing: 0.04em;
  color: var(--pink);
  text-decoration: none;
  line-height: 1.2;
}
.tel-lg:hover { color: var(--pink-deep); }

/* ---------- 10. 写真帯・CTA 帯 ----------
   全幅の写真帯。文字は乗せない（写真の上に文字を置かない＝brand.md）。上下とも稜線で切る。
   パララックス＝background-attachment: fixed（<img> ではなく背景にするのはこの指定のため） */

.photo-band {
  position: relative;
  z-index: 0;
  height: clamp(17rem, 30vw, 32rem);
  overflow: clip;
}
/* CTA 帯。写真はページごとに style="--band:…;--band-sp:…" で差し替える。既定＝096 */
.cta-band {
  position: relative;
  z-index: 0;
  height: clamp(21rem, 38vw, 40rem);
  overflow: clip;
  --band:    url("../images/band-096.webp");
  --band-sp: url("../images/band-096-sp.webp");
}
.photo-band,
.cta-band {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.cta-band { background-image: var(--band); }
/* 帯の上の稜線（.hill--cap）は既定で --bg（白寄り）。直前の面がクリーム（.sec--cream）のときは同じ色にして、境目に白い筋が出ないようにする（2026-09-08 デザイナー・flow の保証・アフターの下） */
.sec--cream + .cta-band .hill--cap path,
.sec-sns + .cta-band .hill--cap path { fill: var(--bg-2); }   /* .sec-sns＝トップの「現場から、毎日発信しています」（クリーム地） */
/* タッチ端末（iOS は fixed が効かない）と動きを減らす設定では貼り付けず、SP 用の切り出しに替える */
@media (max-width: 859px), (hover: none), (prefers-reduced-motion: reduce) {
  .photo-band,
  .cta-band { background-attachment: scroll; }
  .cta-band { background-image: var(--band-sp); }
}

/* ---------- 11. CTA（ピンクの波で上下から挟む。地は白のまま、見出しとボタンをピンクに） ---------- */

.cta2 {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  padding-block: var(--pdg-md);
  text-align: center;
}
.cta2 .sec-head { margin-bottom: 1.4rem; }
.cta2 .eyebrow { color: var(--pink); }
.cta2 .ttl-02 { color: var(--pink); }
.cta2 p { color: var(--ink); }
/* 480px 以下は見出しを一段小さく・字間を詰めて 375px まで2行に収める */
@media (max-width: 480px) {
  .cta2 .ttl-02 { font-size: 1.6rem; letter-spacing: 0.04em; }
}

.cta-ways {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem);
}
@media (min-width: 860px) { .cta-ways { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }

.cta-way {
  background: var(--bg-2);
  border: 2px solid var(--hill-2);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
}
.cta-way .ttl-04 { color: var(--ink); margin: 0; }
.cta-way .hours { font-size: 1rem; color: rgba(37,25,21,.75); margin: 0; }

/* SP（720px 以下）は本文を左揃えにする。見出し・eyebrow・ボタンは中央のまま */
@media (max-width: 720px) {
  .cta2 p { text-align: left; }
}

/* ---------- 12. フッター ---------- */

.footer {
  position: relative;
  background: var(--bg-2);
  padding-block: var(--pdg-md) 2.2rem;
}
.footer-grid { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.15fr 1fr; } }

.footer-logo img { height: clamp(2.1rem, 3vw, 2.9rem); width: auto; margin-bottom: 1.2rem; }
.footer address { font-style: normal; font-size: 1rem; line-height: 2; }
.footer address a { text-decoration: none; }
.footer address a:hover { color: var(--pink); }
.footer .license {
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(37,25,21,.72);
}
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.footer-nav a {
  display: block;
  padding: 0.42em 0;
  font-family: var(--round);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.footer-nav a:hover { color: var(--pink); }
.footer-sns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.footer-sns .pill { font-size: 1rem; }
.copyright {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(37,25,21,.12);
  font-size: 0.9rem;
  color: rgba(37,25,21,.6);
  text-align: center;
}

/* ---------- 13. 画面の下に固定する行動ボタン（720px 以下） ----------
   ヘッダーから落とした「電話」と「無料相談」の行き先。フッターが隠れないよう body に下余白を足す */

.cta-fixed { display: none; }

@media (max-width: 720px) {
  .cta-fixed {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(255, 251, 246, 0.94);
    box-shadow: 0 -0.25rem 0.9rem rgba(37, 25, 21, 0.14);
  }
  .cta-fixed a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;              /* 48px＝指で押せる大きさ */
    font-family: var(--round);
    font-weight: 700;
    font-size: clamp(0.95rem, 0.62rem + 1.4vw, 1.12rem);  /* 320px でも番号が1行に収まる */
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
  }
  .cta-fixed__tel  { background: var(--tel-bg); }
  .cta-fixed__mail { background: var(--pink-deep); }
  .cta-fixed__tel:hover  { background: var(--tel-bg-hover); }
  .cta-fixed__mail:hover { background: #A63B72; }

  body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}

/* ---------- 14. 余白ユーティリティ ----------
   本文中の一点ものの余白調整（インライン style の代わり）。数字＝rem×10。
   同じ詳細度の部品指定に勝つよう、このファイルの最後に置く。
   ★top.css / lower.css にある同じ詳細度の指定（例：.article > * + *）には負ける。
     そういう文脈の余白は、そちらに .article > .btn-row のような形で書く */

.mt-04 { margin-top: 0.4rem; }
.mt-10 { margin-top: 1rem; }
.mt-14 { margin-top: 1.4rem; }
.mt-16 { margin-top: 1.6rem; }
.mt-18 { margin-top: 1.8rem; }
.mb-md { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.mb-lg { margin-bottom: clamp(2rem, 3.4vw, 3rem); }