@charset "UTF-8";
/* =========================================================
   窓リフォーム専門店 まどごこち
   ※ 架空の店舗を題材にした自主制作サイト
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root{
  /* 色（Figmaのカンプから抽出） */
  --orange:      #DF893B;
  --orange-dark: #C4732B;
  /* ※ 既知のトレードオフ：白文字とのコントラストは
     オレンジ #DF893B → 2.70:1、緑 #31B97E → 2.51:1 で、
     WCAG AA の「大きい文字」基準 3.0 も下回る。
     カンプの色を優先する判断でこのまま使用している。
     基準を満たすなら #A85F1E（4.86:1）/ #1A7B4D（5.27:1）に差し替える */
  --teal:        #1F5E62;
  --line-green:  #31B97E;
  --ink:         #2A2A28;
  --sub:         #6E6A64;
  --line:        #E4DED5;

  --bg:          #FFFFFF;
  --bg-cream:    #FFF9F0;
  --bg-peach:    #FFF6ED;
  --bg-beige:    #EDDDC3;

  /* 書体 */
  --f-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --f-base:  "Noto Sans JP", sans-serif;

  /* レイアウト */
  --wrap: 1140px;   /* 実測：カンプの中身は x180..1260＝1080px。padding-inline:30px を足した外形 */
  --pad:  30px;
  --head-h: 88px;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--head-h);}
body{
  /* 電話番号・URL・英数字の連続でも横に溢れさせない */
  overflow-wrap:anywhere;
  margin:0;
  font-family:var(--f-base);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; vertical-align:bottom;}
ul,ol,dl,dd{margin:0; padding:0; list-style:none;}
h1,h2,h3,p,figure,blockquote{margin:0;}
a{color:inherit; text-decoration:none;}
/* キーボード操作時だけ出す。ブラウザ既定に任せると背景によっては見失う */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid #1F5E62; outline-offset:2px; border-radius:3px;
}
table{border-collapse:collapse; width:100%;}
button,input,textarea{font:inherit; color:inherit;}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.container{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- 共通パーツ ---------- */
.heading{
  font-family:var(--f-round);
  font-weight:700;
  font-size:30px;            /* 実測：各セクションの見出しink 27〜29px */
  line-height:1.5;
  letter-spacing:.04em;
}
.heading--center{text-align:center;}
/* スマホでだけ効かせる改行（見出しの語中改行を防ぐ用） */
.br-sp{display:none;}
.heading--orange{color:var(--orange);}
.heading em{font-style:normal; color:var(--orange);}

/* 見出し下の点線（波線風） */
.heading--wave{position:relative; display:block; text-align:center;}
.heading--wave em{
  background:linear-gradient(transparent 78%, #FFD9A8 78%);
  padding-inline:2px;
}
.heading--deco::after{
  content:""; display:block;
  width:120px; height:6px; margin-top:12px;
  background:repeating-linear-gradient(90deg,var(--orange) 0 14px,transparent 14px 24px);
  border-radius:3px;
}

/* 末尾に1文字だけ残る折り返しを避ける（対応ブラウザのみ／未対応でも従来どおり） */
.how__lead, .effect dd, .faq__list dd, .problem__list small, .note,
.voice__text, .works__voice p, .footer__addr{text-wrap:pretty;}

.note{font-size:13px; color:var(--sub); line-height:1.8;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:5px;
  font-family:var(--f-round); font-weight:700; font-size:15px;
  color:#fff; background:var(--orange);
  border:none; cursor:pointer;
  transition:background .2s, transform .1s;
}
.btn:hover{background:var(--orange-dark);}
.btn:active{transform:translateY(1px);}
.btn--line{background:var(--line-green);}
.btn--line:hover{background:#27a06b;}
.btn--lg{padding:20px 36px; font-size:18px;}

/* ---------- 01 ヘッダー ---------- */
/* カンプ実測：背景は透明でヒーロー写真が透ける。ナビはクリームの角丸ピル */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent;
  pointer-events:none;          /* 透明部分はクリックを透かす */
}
/* .header に pointer-events:none を掛けているので、操作する要素は必ずここに列挙する。
   .navtoggle の書き漏れで、ハンバーガーが1024px以下の全幅でクリック不能だった
   （クリックが背後の .hero__visual に抜けてメニューが一切開かない）*/
.header .logo,
.header .gnav,
.header .navtoggle,
.header .header__cta{pointer-events:auto;}
/* スクロールしても読めるよう、ナビピルに薄い影を付ける */
.gnav ul{box-shadow:0 2px 10px rgba(0,0,0,.08);}
.header__cta{box-shadow:0 2px 10px rgba(0,0,0,.10);}
/* スクロールしても背景は透明のまま。
   ロゴだけは本文に重なって読めなくなるため、スクロールしたら消す（追従させない）*/
.logo{transition:none;}
.header.is-scrolled .logo{opacity:0; visibility:hidden;}
.header__inner{
  max-width:1440px; margin-inline:auto;
  padding:0 70px 0 40px;
  height:88px;
  display:flex; align-items:center; gap:24px;
}
.logo{display:flex; align-items:center; flex:0 0 auto;}
.logo__img{width:194px; height:auto; display:block;}
.logo--footer .logo__img{width:240px;}

.gnav{margin-left:auto;}
.gnav ul{
  display:flex; align-items:center; gap:40px;
  height:38px; padding:0 34px; border-radius:999px;
  background:#FFF6ED;
}
.gnav a{font-size:14px; font-weight:500; padding:0;}
.gnav a:hover{color:var(--orange);}
.header__cta{
  flex:0 0 auto;
  width:205px; height:38px; padding:0;
  border-radius:999px; font-size:14px;
}

/* ---- ハンバーガーボタン（タブレット以下でのみ表示）---- */
.navtoggle{
  display:none;
  position:relative; flex:0 0 auto;
  width:46px; height:46px; padding:0;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  cursor:pointer;
}
.navtoggle span{
  position:absolute; left:13px; width:20px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.navtoggle span:nth-child(1){top:16px;}
.navtoggle span:nth-child(2){top:22px;}
.navtoggle span:nth-child(3){top:28px;}
.is-menu-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.is-menu-open .navtoggle span:nth-child(2){opacity:0;}
.is-menu-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* メニュー内の連絡先はPCでは出さない */
.gnav__contact{display:none;}

/* ---------- 02 ヒーロー ---------- */
/* カンプ実測：写真は全幅・左フェードと下端の波形は画像側。波の下は白 */
.hero{position:relative; background:var(--bg);}
.hero__visual{display:block; width:100%; height:auto;}

.hero__body{position:absolute; top:0; left:0; right:0;}
.hero__inner{
  width:100%; max-width:1080px; margin-inline:auto;
  padding:146px 0 0;
}
.hero__title{
  font-family:var(--f-round); font-weight:700;
  font-size:46px; line-height:1.35; letter-spacing:.01em;
}
.hero__lead{margin-top:26px; font-size:16px; color:#4A4844;}

.badge{
  /* CTAボタンと同じ300px幅の中で中央に置く（右に寄せない）。
     左右のスラッシュは太さが違う（21px / 54px）ので、単純に並べると
     文字の中心が枠の中心より16px左にずれる。1fr で挟んで文字を真ん中に固定する */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center; gap:14px;
  width:300px; margin:36px 0 0 12px;
  font-family:var(--f-round); font-weight:700;
  font-size:18px; line-height:1.55; color:#C4732B;
  text-align:center;
}
.badge__slash{height:33px; width:auto;}
.badge__slash:first-child{justify-self:end;}
.badge__slash:last-child{justify-self:start;}

.hero .btn--lg{
  display:flex; width:300px; height:60px;
  margin:11px 0 0 12px; padding:0; font-size:17px;
}

.tel{margin-top:24px; margin-left:12px;}
.tel__label{display:block; font-size:13px; color:#5D5A55;}
.tel__num{
  display:block; margin-top:2px;
  font-family:var(--f-round); font-weight:700;
  font-size:34px; line-height:1.1; letter-spacing:.01em; color:var(--teal);
}
.tel__note{display:block; margin-top:8px; font-size:13px; color:#5D5A55; line-height:1.7;}

/* 人物：写真の右下から、下の白いエリアまではみ出す。
   %のままだと本文が1080pxで頭打ちなのに人物だけ拡大し続け、
   超ワイド画面で本文との相対サイズが崩れる。1440px相当で頭打ちにする */
.hero__staff{
  position:absolute; left:min(62.5%, calc(50% + 180px)); bottom:-184px;  /* 実測：下端 y=929、写真下端 y=745 */
  width:min(17.4%, 250px); margin:0; z-index:2;                          /* 実測：表示幅 250px / 1440 */
}
.hero__staff img{display:block; width:100%; height:auto;}
.hero__staffname{display:none;}
/* 「まどごこち 代表取締役」「田中太郎」の2かたまり。この間でしか改行させない */
.hero__staffname span{white-space:nowrap;}
.hero__record{display:none;}
.hero__bubble{
  position:absolute; left:106%; top:28%; translate:-50% -50%;
  display:grid; place-items:center;
  width:126px; height:126px; border-radius:50%;
  background:var(--teal); color:#fff;
  /* 人物と同じく1440px相当で頭打ち（%のままだと超ワイドで肥大する）*/
  font-family:var(--f-round); font-weight:700; font-size:15px; line-height:1.5;
  text-align:center;
}

/* ---------- 03 悩み＋実績 ---------- */
/* カンプ実測：見出しink 760 / 円 177×171・間隔54 / 実績ブロック左端860 */
.problem{padding:32px 0 80px; background:var(--bg);}
.problem .heading{text-align:center; font-size:29px;} /* 実測：ink高さ27px・幅455px/16文字 */
.deco-dash{display:block; width:455px; max-width:100%; height:auto; margin:2px auto 0;} /* 実測：ink間14px（行ボックスの下余白ぶんを差し引いた値）*/

/* 見出し・破線は左カラム（円3つ）の幅で中央寄せ */
.problem__head{width:635px;}
.problem__inner{display:grid; grid-template-columns:635px 1fr; gap:83px; margin-top:29px;} /* 実測：円left194 / 実績left900 */
.problem__list{display:grid; grid-template-columns:repeat(3,177px); gap:52px;} /* 実測：ピッチ231/226 */

.problem__circle{position:relative; width:177px; height:171px;}
.problem__circle img.problem__bg{
  position:absolute; inset:0; width:100%; height:100%;   /* 縮小に追従させる */
}
.problem__icon{
  /* 実測比率：円171pxに対しアイコン高さ56px・上に14pxはみ出す */
  position:absolute; top:-8.2%; left:50%; translate:-50% 0;
  width:auto; height:32.7%; z-index:1;
}
.problem__circle b{
  /* 実測：文字inkは円上端から63px＝円の中心より6px下。アイコンが上に乗るぶん下げる */
  position:absolute; left:0; right:0; top:32%;   /* 実測：円上端から55px / 171px */
  font-family:var(--f-round); font-weight:700;
  font-size:24px; line-height:1.5; text-align:center;
  color:#37352F;
}
.problem__list small{
  /* 実測：円の下端から15px。ボックスごと円の中心に置き、中の行は左揃え */
  display:block; width:fit-content; margin:15px auto 0;
  font-size:13px; color:var(--sub); line-height:1.55; text-align:left;
}

.record{
  padding-top:74px; /* 実測：代表者名ink y=926、円の上端868から58px下 */
  /* この塊は nowrap で intrinsic 455px あり、グリッドの列幅362pxを超えて
     右マージンへ意図的にはみ出す（カンプ1440pxではそれで収まる）。
     1440px未満だと画面外まで出て横スクロールになるため、実測値どおりの34pxを
     上限に、幅に比例して縮める。1366px以下で効き始め、1025pxで20.4px。
     係数は各幅の実測はみ出し量（1025:178px / 1100:113 / 1180:73 / 1280:23）から算出 */
  --rec:min(34px, calc(3.99vw - 20.5px));
}
.record__name{font-size:15px; color:#5D5A55; line-height:1.6;} /* 実測：ink高さ14px */
.record__text{
  margin-top:22px;
  font-family:var(--f-round); font-weight:700;
  font-size:var(--rec); line-height:1.75; white-space:nowrap;   /* 実測：1440pxで34px・ink39px・4文字134px */
}
/* 「1,200」だけ書体が違う（終端が丸くない＝Noto Sans JP の極太） */
.record__text strong{
  font-family:var(--f-base); font-weight:900;
  font-size:calc(var(--rec) * 66 / 34); line-height:1; color:var(--orange);  /* 実測：1440pxで66px・ink幅160px・高さ59px */
  letter-spacing:-.02em; margin:0 6px;
  vertical-align:-6px;
}
.record__unit{position:relative;}
/* 「（累計）」は数字の右上に小さく */
/* 「（累計）」は「件超え！」の真上（実測：左端がほぼ同じ x1185 / x1190）*/
.record__note{
  position:absolute; left:-10px; bottom:100%;  /* 「（」の左アキぶん寄せて、見た目で「件」と揃える */
  font-family:var(--f-base); font-weight:400;
  font-size:calc(var(--rec) * 18 / 34); line-height:1; color:#5D5A55;  /* 実測：1440pxで18px・ink高さ17px */
  margin-bottom:2px;
}

/* ---------- 04 仕組み ---------- */
.how{padding:84px 0; background:var(--bg-peach);}

/* 見出し：両方オレンジ。「もう1枚。」だけ大きくして波線を引く
   実測：前半 ink29px(x497-752) / 後半 ink39px(x766-922) / 波線 x747-943 */
.how__title{font-size:30px; line-height:1.4;}
.how__title em{font-style:normal; color:var(--orange);}
.how__strong{
  position:relative; display:inline-block;
  color:var(--orange);
  font-size:40px;          /* 前半30pxに対して大きく */
  margin-left:8px;
}
.how__wave{
  position:absolute; left:50%; translate:-50% 0; bottom:-14px;
  width:196px; height:auto;
}

.how__intro{
  display:flex; align-items:center; justify-content:center; gap:50px;
  margin-top:30px;
}
.how__illust{width:120px; height:auto; flex:0 0 auto;}
.how__lead{color:var(--sub); font-size:15px;}
.how__body{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:44px; align-items:center;}
.how__figcap{
  margin-bottom:16px;
  font-family:var(--f-round); font-weight:700; font-size:14px; color:var(--orange);
}
/* 図解を囲む枠（実測：491×240px・2px黒・角丸14px・白地）*/
.how__figure{width:491px; max-width:100%;}
.diagram{
  display:block; width:100%; height:auto;
  box-sizing:border-box;
  padding:18px 2px;
  background:#fff;
  border:2px solid #000; border-radius:14px;
}
/* 図解は <img src="...svg"> で読み込んでいるため、外部SVGの内部要素には
   親ページのCSSは一切届かない。以前ここにあった .diagram .d-lbl などは
   完全に無効だったので削除した（必要なら SVG 側に style を持たせる）*/

.effect > div{padding:18px 0; border-bottom:1px solid #E6DCCF;}
.effect > div:last-child{border-bottom:none;}
.effect dt{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-round); font-weight:700;
  font-size:20px; color:var(--teal);
}
.effect dt img{width:auto; height:20px;}
.effect dd{margin-top:4px; font-size:14px; color:var(--sub);}

/* ---------- 05 補助金 ---------- */
.subsidy{padding:70px 0; background:var(--bg);}
.subsidy__box{
  padding:44px 40px; text-align:center;
  border:2px solid var(--orange); border-radius:10px;
  background:#FFFDFA;
}
.subsidy__title{
  font-family:var(--f-round); font-weight:700;
  font-size:24px; line-height:1.6;          /* 実測：ink高さ29px・幅658px */
}
/* カンプに強調ラインは無い。サイズを上げるだけ */
.subsidy__title em{font-style:normal; font-size:30px;}
/* 見出しと破線を同じ幅に揃える（実測：見出し658px / 破線651px でほぼ同幅）*/
.subsidy__head{width:fit-content; margin-inline:auto;}
.subsidy__head .deco-dash{width:100%; margin-top:14px;}
.subsidy__box p{margin-top:16px; font-size:14px; color:var(--sub);}
.subsidy__box .note{margin-top:10px;}

/* ---------- 06 施工事例 ---------- */
.works{padding:66px 0 36px; background:var(--bg-cream);}   /* 実測：全高820px・上余白74px。
   コンテナを1080pxに正した結果スライダーが1080×380（＝カンプ通り）になり21px伸びたぶんを下余白で吸収 */
.works__lead{margin-top:12px; text-align:center; font-size:14px; color:var(--sub);}

.ba{
  --x:50%;
  position:relative; margin-top:34px;
  width:100%; aspect-ratio:1080/380;
  overflow:hidden; border-radius:6px;
  background:#ddd;
  /* touch-action:none をここに固定で置くと、画像上から始めた縦スワイプで
     ページがスクロールできなくなる。掴んだ瞬間だけ JS が none にする */
  cursor:ew-resize; touch-action:pan-y; user-select:none;
}
.ba img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
  /* 画像が読めないとき、絶対配置の2枚のaltが重なって読めなくなるのを避ける */
  overflow:hidden; font-size:13px; line-height:1.6; color:var(--sub);
}
.ba img.ba__before{background:var(--bg-cream);}
.ba__before{clip-path:inset(0 calc(100% - var(--x)) 0 0);}
.ba__divider{
  position:absolute; top:0; bottom:0; left:var(--x);
  width:4px; margin-left:-2px; background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.25); pointer-events:none;
}
.ba__handle{
  position:absolute; top:50%; left:var(--x);
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; gap:3px;
  pointer-events:none;
}
.ba__handle i{
  width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.ba__handle i:first-child{border-right:8px solid var(--orange);}
.ba__handle i:last-child{border-left:8px solid var(--orange);}
.ba__tag{
  position:absolute; top:16px;
  padding:5px 12px; border-radius:3px;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:12px; font-weight:700; pointer-events:none;
}
.ba__tag--b{left:16px;}
.ba__tag--a{right:16px;}
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:ew-resize;
}
.ba:focus-within{outline:3px solid var(--orange); outline-offset:3px;}

.works__caption{margin-top:24px;}
.works__title{font-family:var(--f-round); font-weight:700; font-size:18px;}
.works__meta{margin-top:4px; font-size:13px; color:var(--sub);}
.works__voice{
  margin-top:22px; padding:26px 32px;
  background:#fff; border-radius:6px;
}
.works__voice p{font-size:15px; line-height:1.9;}
.works__voice cite{display:block; margin-top:8px; font-size:12px; font-style:normal; color:var(--sub);}

/* ---------- 07 料金 ---------- */
/* 下余白 61→121px：表の行を76pxに詰めたぶん（3行×20px）をここで戻して全高608pxを維持。
   これで注記と波の間隔が 14.6px → 70.6px に広がる（カンプ実測 82.5px）*/
.price{padding:67px 0 117px; background:var(--bg);}            /* 実測：全高608px・上余白75px */
.price__lead{margin-top:12px; text-align:center; font-size:14px; color:var(--sub);}
.price__table{margin-top:36px; border-top:2px solid var(--orange);}
/* カンプ実測：行ピッチ76px（罫線 184.5→260.5→336.5→412.5）。
   24pxだと金額24px×行送り1.9＝45.6と合わせて行が96pxになり、
   3行で60px下にずれて注記が波にぶつかっていた */
.price__table th,
.price__table td{padding:14.7px 0; border-bottom:1px solid var(--line); vertical-align:middle;}
.price__table th{
  text-align:left;
  font-family:var(--f-round); font-weight:700; font-size:18px;
  padding-left:22px; position:relative; white-space:nowrap;
}
.price__table th::before{
  content:""; position:absolute; left:0; top:50%;
  width:10px; height:10px; margin-top:-5px;
  background:var(--orange); border-radius:50%;
}
.price__place{font-size:13px; color:var(--sub);}
.price__yen{
  text-align:right; white-space:nowrap;
  font-family:var(--f-round); font-weight:700;
  font-size:24px; color:var(--teal);
}
.price sup{font-size:.6em; vertical-align:super;}
.price .note{margin-top:14px;}
.price .note:first-of-type{margin-top:20px;}

/* ---------- 08 工事の流れ ---------- */
/* カンプ実測：このセクションだけ上端が波型。カンプ y=3486〜3534.75（高さ48.8px）で、
   セクション本体（430px）の上に乗り、料金セクションの下余白61pxに食い込む。
   波はPDFから1440px幅で座標を拾ってSVG化（assets/img/deco-wave-flow.svg）。
   幅100%＋aspect-ratio で全ブレイクポイントに比例追従する */
.flow{position:relative; padding:40px 0 106px; background:var(--bg-cream);}  /* 実測：全高430px・上余白48px */
.flow::before{
  content:"";
  position:absolute; left:0; right:0; bottom:100%;   /* セクションの真上に置く */
  aspect-ratio:1440/48.8;
  background:url("../img/deco-wave-flow.svg") no-repeat left top/100% 100%;
  pointer-events:none;
}
.flow__list{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
.flow__list li{
  position:relative;
  padding:28px 24px; background:#fff; border-radius:6px;
}
.flow__list li:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:-14px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:9px solid var(--orange); margin-top:-7px;
}
.flow__head{display:flex; align-items:center; gap:10px;}
.flow__num{
  display:block;
  font-family:var(--f-round); font-weight:700;
  font-size:34px; color:var(--orange); line-height:1;
}
.flow__icon{width:40px; height:40px; flex:0 0 auto;}
.flow__title{display:block; margin-top:12px; font-family:var(--f-round); font-weight:700; font-size:17px;}
.flow__list small{display:block; margin-top:8px; font-size:13px; color:var(--sub); line-height:1.8;}

/* ---------- 09 お客様の声 ---------- */
.voice{
  padding:67px 0 120px;      /* 実測：全高486px・上余白75px */
  background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),
             url("../img/voice-bg.webp") center/cover no-repeat;
}
.voice__heading{display:flex; align-items:center; justify-content:center; gap:16px;}
.voice__megaphone{width:auto; height:46px;}
/* カンプ実測：カード高さ209px・全高486px。コンテナ1080でこの高さにするには
   カード幅302.7px＝gap 86px（SVGの比率307:212は崩さない方針を維持）。
   ※カンプのカードは幅277pxで縦に9%引き伸ばされているが、枠の角丸が歪むため
     ここでは比率を保ち、幅が25px広くなるのを許容している */
/* カード幅は302.7px固定（＝高さ209px）。間隔side で幅の差を吸収するので、
   1025〜1439pxでもカードの見た目が1440pxと同じになる。
   1fr＋固定gapだと1100pxでカードが狭くなり、aspect-ratioが不足分を横幅として
   要求して横スクロールになる（実測 scrollW 1146px）ため min-width:0 も併せて置く */
.voice__list{
  display:grid; grid-template-columns:repeat(3,302.7px);
  justify-content:space-between; margin-top:44px;
}
.voice__card{min-width:0;}
/* フキダシはFigmaから書き出した枠SVGを背景に敷く。
   307:212 の比率を保つことで、枠・引用符・尻尾が歪まないようにする */
.voice__card{
  position:relative;
  aspect-ratio:307/212;
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 30px 34px;
  background:url("../img/voice-frame-1.svg") no-repeat center/100% 100%;
}
.voice__card--2{background-image:url("../img/voice-frame-2.svg");}
.voice__card--3{background-image:url("../img/voice-frame-3.svg");}
.voice__label{
  display:inline-block; padding:4px 12px;
  background:var(--orange); color:#fff; border-radius:3px;
  font-family:var(--f-round); font-weight:700; font-size:13px;
}
.voice__who{margin-top:10px; font-family:var(--f-round); font-weight:700; font-size:15px; color:var(--orange);}
.voice__text{margin-top:12px; font-size:13px; color:var(--sub); line-height:1.9;}

/* ---------- 10 FAQ ---------- */
.faq{padding:68px 0 42px; background:var(--bg-cream);}        /* 実測：全高750px・上余白76px */
.faq__list{margin-top:36px;}
.faq__list > div{padding:22px 0; border-bottom:1px solid var(--line);}
.faq__list dt{
  position:relative; padding-left:60px;          /* 実測：Q左端181 / 質問文左端240 */
  font-family:var(--f-round); font-weight:700; font-size:18px;
}
.faq__list dt::before{
  content:"Q"; position:absolute; left:0; top:-8px;
  font-family:var(--f-base); font-weight:700;
  font-size:33px; line-height:1; color:var(--orange);  /* 実測：ink高さ23px */
}
.faq__list dd{margin-top:6px; padding-left:60px; font-size:14px; color:var(--sub);}

/* ---------- 11 会社案内 ---------- */
/* 87/14 だと中身が白枠の下に寄る（上87px・下14px）。上のFAQと同じ 68/42 に揃える。
   ※カンプは 上97/下70＝中身327px。実装の中身は393pxで66px高いため、
     これまで下余白を14pxまで詰めて全高494pxの辻褄を合わせていた。
     この変更で全高は503px（カンプ+9px）になる。中身の内訳合わせは別途。 */
.about{padding:88px 0 70px; background:var(--bg);}   /* カンプ実測：見出しink97 / 本文下端424 / 全高494 */
/* カンプ実測：表 x180..760(580px) / 写真 x831..1229(398px) / 間71px。
   右31pxは余る（カンプで写真がコンテナ右端まで来ていない）ので start 寄せ */
.about__body{
  display:grid;
  /* 580+71+398=1049。1140px未満ではコンテナがこれより狭くなるので minmax で縮ませる
     （固定値のままだと1025pxで写真が画面外に出る／実測 scrollW 1079px）*/
  grid-template-columns:minmax(0,580px) minmax(0,398px); gap:71px;
  justify-content:start; margin-top:16.5px; align-items:start;
}
/* カンプ実測：罫線ピッチ52px（16px→11.25pxで一致）・見出し列175px */
.about__table th,
.about__table td{padding:11.25px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.about__table th{width:175px; font-size:13px; font-weight:500; color:var(--sub);}
.about__table td{font-size:15px;}
/* カンプ実測：写真 398×255px・表の上端より19.5px下から始まる */
.about__photo{margin-top:19.5px;}
.about__photo img{width:100%; aspect-ratio:398/255; object-fit:cover; border-radius:6px;}

/* ---------- 12 お問い合わせ ---------- */
.contact{padding:68px 0 19px; background:var(--bg-beige);}    /* 実測：全高698px・上余白76px */
.contact__lead{margin-top:14px; text-align:center; font-size:15px;}
.contact__body{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:44px;}
.contact__tel{padding:34px 32px; background:#fff; border-radius:8px;}
.contact__map{
  position:relative; margin:20px 0 0;
  padding:0; background:#fff; border-radius:8px; overflow:hidden;
}
.contact__maptag{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:4px 12px; border-radius:3px;
  background:var(--orange); color:#fff;
  font-family:var(--f-round); font-weight:700; font-size:12px;
}
.contact__map img{width:100%;}

.form__row{margin:0 0 16px;}   /* 実測：欄の間隔62px＝46+16 */
.form__label{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:700; color:#4A4844;
}
.form__req{
  display:inline-block; margin-left:6px; padding:1px 6px;
  border-radius:3px; background:#B85C1A; color:#fff;   /* 白文字でAA以上になる濃さ */
  font-size:11px; font-weight:700; vertical-align:1px;
}
.form__err{
  display:block; margin-top:5px;
  font-size:12px; line-height:1.6; color:#B3261E;
}
.form__err:empty{display:none;}
.form .is-error{border-color:#B3261E;}
.form input[type=file]{
  height:auto; padding:11px 14px; line-height:1.5;
  background:#fff; cursor:pointer;
}
.form input[type=file]::file-selector-button{
  margin-right:12px; padding:6px 14px;
  border:none; border-radius:4px;
  background:var(--orange); color:#fff;
  font-family:var(--f-round); font-weight:700; font-size:13px;
  cursor:pointer;
}
.form input[type=file]::file-selector-button:hover{background:var(--orange-dark);}
.form__hint{display:block; margin-top:5px; font-size:12px; color:var(--sub); line-height:1.6;}

.form input,
.form textarea{
  width:100%; height:46px; padding:0 18px;   /* 実測：欄の高さ46px */
  background:#fff; border:1px solid #fff; border-radius:5px;
  font-size:14px; line-height:44px;
}
.form textarea{padding:11px 18px; line-height:1.6;}
.form input::placeholder,
.form textarea::placeholder{color:#A9A49C;}
.form input:focus,
.form textarea:focus{outline:2px solid var(--orange); outline-offset:1px;}
.form textarea{resize:vertical;}
.form__btns{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
.form__btns .btn{padding:17px 20px; font-size:16px;}
.form__msg{margin-top:12px; font-size:13px; color:#8A4B22; min-height:1.6em;}

/* ---------- 13 フッター ---------- */
.footer{padding:60px 0 40px; background:var(--bg);}
.footer__inner{display:flex; justify-content:space-between; align-items:flex-start; gap:30px;}
.footer__name{font-family:var(--f-round); font-weight:700; font-size:18px;}
.footer__addr{margin-top:8px; font-size:13px; color:var(--sub);}
.logo--footer .logo__text strong{font-size:32px;}
.footer__note{margin-top:30px; padding-top:22px; border-top:1px solid var(--line);}
.footer__fiction{font-size:13px; color:var(--orange);}
.footer__copy{margin-top:6px; font-size:11px; color:var(--sub);}

/* ---------- スマホ固定バー（PCでは非表示） ---------- */
.spbar{display:none;}
/* JSのインラインstyleをやめてここに集約。prefers-reduced-motion の
   `*{transition:none !important}` がそのまま効くようにするため */
.spbar{transition:transform .25s ease;}
.spbar.is-hidden{transform:translateY(120%);}

/* =========================================================
   ノートPC（1025〜1439px）：ヒーローだけ 1440px から比例縮小
   ---------------------------------------------------------
   ヒーロー本文は写真の上に絶対配置しているが、写真の高さだけが幅に追従して
   縮む（比率1439:728）のに対し、中の文字は 1440px 実測の px 固定。
   そのため 1250px を下回ると本文が写真からはみ出し、
   1100px では電話番号の注記と「こんなお困りごと」の見出しが40px重なる（実測）。

   ここでは 1440px の実測値をすべて vw に読み替えて（px ÷ 14.4 = vw）、
   写真と同じ倍率で本文全体を縮める。カンプの構図はそのまま保たれる。
   上の PC 用ブロックの実測値は一切いじらないので、1440px以上は無変更。
   ========================================================= */
@media (min-width:1025px) and (max-width:1439px){
  .hero__inner{max-width:75vw; padding-top:10.139vw;}          /* 1080px / 146px */
  .hero__title{font-size:3.194vw;}                             /* 46px */
  .hero__lead{margin-top:1.806vw; font-size:1.111vw;}          /* 26px / 16px */

  .badge{
    width:20.833vw; margin:2.5vw 0 0 0.833vw;                  /* 300px / 36px / 12px */
    font-size:1.25vw; gap:0.972vw;                             /* 18px / 14px */
  }
  .badge__slash{height:2.292vw;}                               /* 33px */

  .hero .btn--lg{
    width:20.833vw; height:4.167vw;                            /* 300px / 60px */
    margin:0.764vw 0 0 0.833vw; font-size:1.181vw;             /* 11px / 12px / 17px */
  }

  .tel{margin-top:1.667vw; margin-left:0.833vw;}               /* 24px / 12px */
  .tel__label{font-size:0.903vw;}                              /* 13px */
  .tel__num{margin-top:0.139vw; font-size:2.361vw;}            /* 2px / 34px */
  .tel__note{margin-top:0.556vw; font-size:0.903vw;}           /* 13px */

  /* 代表と吹き出しも同じ倍率で。left/top/width は元から%なので指定不要 */
  .hero__staff{bottom:-12.778vw;}                              /* -184px */
  .hero__bubble{width:8.75vw; height:8.75vw; font-size:1.042vw;} /* 126px / 15px */
}

/* =========================================================
   タブレット（〜1024px）
   PC版は1440px前提の固定値で組んでいるため、ここから可変に切り替える
   ========================================================= */
@media (max-width:1024px){

  /* ---- ヘッダー ---- */
  .header__inner{padding:0 24px; height:72px;}
  .logo__img{width:170px;}
  .header__cta{display:none;}          /* ヘッダーのCTAはメニュー内に入れる */
  .navtoggle{display:block; margin-left:auto;}

  /* ナビはスライドインするパネルに */
  .gnav{
    position:fixed; inset:0 0 0 auto;
    width:min(340px,86vw);
    padding:96px 28px 40px;
    background:#FFF6ED;
    box-shadow:-8px 0 30px rgba(0,0,0,.12);
    transform:translateX(100%);
    transition:transform .28s ease;
    overflow-y:auto;
    margin-left:0;
  }
  .is-menu-open .gnav{transform:translateX(0);}
  .gnav ul{
    display:block; height:auto; padding:0;
    border-radius:0; background:none; box-shadow:none;
  }
  .gnav li{border-bottom:1px solid rgba(0,0,0,.08);}
  .gnav a{display:block; padding:16px 4px; font-size:16px; font-weight:700;}

  .gnav__contact{display:block; margin-top:28px;}
  .gnav__tel{display:block; margin-bottom:18px;}
  .gnav__tel span{display:block; font-size:12px; color:var(--sub);}
  .gnav__tel strong{
    display:block; margin-top:2px;
    font-family:var(--f-round); font-size:26px; color:var(--teal);
  }
  .gnav__tel small{display:block; font-size:11px; color:var(--sub);}
  /* .gnav a（display:block / padding:16px 4px / font-size:16px）は詳細度 0,1,1 で、
     .btn と .gnav__line（ともに 0,1,0）に勝ってしまう。
     そのためドロワー内のLINEボタンがボタンの体裁を失い、
     文字が中央に来ず左寄せになっていた（実機で発覚）。
     .gnav を前置して詳細度を上げ、ボタンとして描き直す */
  .gnav .gnav__line{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:50px; padding:0;
    font-size:15px; text-align:center;
  }
  /* 電話ブロックにも .gnav a の padding:16px 4px が乗るので打ち消す */
  .gnav .gnav__tel{padding:0;}

  /* メニューを開いている間の背景 */
  .navscrim{
    position:fixed; inset:0; z-index:40;
    background:rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  }
  .is-menu-open .navscrim{opacity:1; visibility:visible;}
  .is-menu-open{overflow:hidden;}

  /* ---- ヒーロー：写真の下に「本文｜代表」の2カラム ---- */
  .hero{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"visual visual" "body staff";
    background:var(--bg-peach);
  }
  /* 左の白フェード部分をトリミングし、下端の波は残す。
     aspect-ratio を詰めるほど cover の倍率が上がって左が切れる。
     975/728 だと見える元画像は x=464〜1439（幅にかかわらず一定）＝スマホ版と同じ範囲。
     1000/728 + 88% では x=386〜1386 で、左に白フェードが残り右も53px余っていた */
  .hero__visual{
    grid-area:visual;
    width:100%; height:auto;
    aspect-ratio:975/728;
    object-fit:cover; object-position:100% top;
  }
  .hero__body{grid-area:body; position:static;}
  .hero__inner{max-width:none; padding:34px 0 44px 30px;}
  /* 26px→28px以上に拡大。768pxで28px（1行目の余り18px）、1024pxで36px。
     3.7vw まで上げると768pxでの余りが12pxしかなく折り返しの危険があるため3.65vw */
  .hero__title{font-size:clamp(28px,3.65vw,36px);}
  .hero__lead{margin-top:16px; font-size:15px;}
  /* ベースの意図どおり「CTAボタンと同じ幅の中で中央」にする。
     width:auto だと本文カラム全幅(512px)に広がり、280pxのボタンとズレて見えた。
     さらに左右のスラッシュは太さが違う（21px / 54px）ので、単純に並べると
     文字の中心が枠の中心より16px左にずれる。1fr で挟んで文字を真ん中に固定する */
  .badge{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center;
    width:280px; margin:24px 0 0; font-size:16px;
  }
  .badge__slash:first-child{justify-self:end;}
  .badge__slash:last-child{justify-self:start;}
  .hero .btn--lg{width:280px; margin:12px 0 0;}
  .tel{margin:22px 0 0;}
  .tel__num{font-size:30px;}

  /* 代表：キャッチコピーの右。名前はすぐ下 */
  .hero{grid-template-areas:"visual visual" "body staff" "body record";}
  .hero__staff{
    grid-area:staff; position:relative;   /* バブルの位置基準 */
    inset:auto;      /* PC用の left:62.5% / bottom:-184px を必ず打ち消す。
                        relative でも「ずらし量」として生き残り、右へ62.5%・下へ184px飛ぶ */
    /* 右マージン70px：フキダシを画面端から24px離したまま、写真に乗る量を
       72px(92%) → 32px(41%) に減らすため、写真ごと40px左へ寄せる（スマホ版と同じ考え方）*/
    width:210px; margin:0 70px 0 16px; align-self:end;
  }
  .hero__bubble{
    /* -46px：写真を40px左へ動かしたぶん外へ出して、画面上の位置を保つ */
    left:auto; right:-46px; top:8%; translate:0 0;
    width:78px; height:78px; font-size:11px;
  }
  .hero__staffname{
    display:block; margin-top:8px;
    font-size:12px; color:var(--sub); text-align:center; line-height:1.6;
  }
  .record__name{display:none;}
  /* 施工実績は代表とセットでヒーロー側に出す */
  .record{display:none;}
  .hero__record{
    /* grid-area:staff だと代表と同じマスに積み重なる（実測で210×277px重複）。
       .hero の grid-template-areas に record 行を用意してあるのでそちらへ */
    grid-area:record; display:block;
    /* 上4px＝代表者名に詰める（スマホ版と同じ）。
       左右は 0/54px。写真は左16px・右70pxに置いてあるので、中心
       （カラム左から121px）を保ったまま横幅を210px→242pxまで広げられる。
       この242pxが nowrap の上限で、字を大きくできる余地になる */
    margin:4px 54px 0 0;
    font-family:var(--f-round); font-weight:700;
    /* 幅に応じて拡大。768pxで16.4px、1024pxで19px（242pxに収まる上限） */
    font-size:clamp(15px, 2.14vw, 19px);
    line-height:1.7; text-align:center; white-space:nowrap;
  }
  .hero__record strong{
    font-family:var(--f-base); font-weight:900;
    font-size:2em;   /* 本文の2倍。768pxで33px、1024pxで38px */
    color:var(--orange); margin:0 3px;
  }
  .hero__record-unit{position:relative;}
  .hero__record-note{
    position:absolute; left:-6px; bottom:100%;
    font-family:var(--f-base); font-weight:400;
    font-size:10px; color:#5D5A55; line-height:1;
  }

  /* ---- 悩み＋実績 ---- */
  /* 上26/下60 だと白枠に対して中身が上に寄って見える（実測 上27px/下61px）。
     行間の差し引きを入れて上下とも43pxに揃える */
  .problem{padding:43px 0 43px;}
  .problem .heading{font-size:26px;}
  .problem__head{width:100%;}
  .deco-dash{width:min(455px,80%);}
  .problem__inner{grid-template-columns:1fr; gap:40px; margin-top:26px;}
  .problem__list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px; max-width:640px; margin-inline:auto;
  }
  .problem__circle{width:100%; height:auto; aspect-ratio:177/171;}
  .problem__bg{width:100%; height:100%;}
  /* 46px固定だと円の大きさに追従しない。タブレット(円215px)では小さすぎ、
     スマホ(円103px)では45%を占めて文字と重なっていた。PCと同じ比率に統一する */
  .problem__icon{height:32.7%; top:-8.2%;}
  /* アイコン下端は 32.7-8.2 = 24.5%。PCと同じ32%にして 7.5% 分あける */
  .problem__circle b{top:32%; font-size:19px;}
  .problem__list small{font-size:12px;}
  .record{padding-top:0; text-align:center;}
  .record__text{font-size:26px; white-space:normal;}
  .record__text strong{font-size:52px;}
  .record__note{font-size:16px; left:-8px;}

  /* ---- 仕組み ---- */
  .how__title{font-size:26px;}
  .how__strong{font-size:34px;}
  .how__wave{width:160px; bottom:-12px;}
  .how__intro{flex-direction:column; gap:24px;}
  .how__lead{text-align:left; font-size:14px;}
  /* 縦積みにするとPCの「リードの右」から「リードの下」へ移ってしまう。
     スマホと同じく見出しのすぐ下に置く */
  .how__illust{width:100px; order:-1;}
  .how__body{grid-template-columns:1fr; gap:30px;}
  .how__figure{width:100%; max-width:491px; margin-inline:auto;}

  /* 料金の下余白121pxは1440px前提。タブレットでは波との間隔が95pxと開きすぎるので、
     1440pxの間隔82.5pxを幅で按分した値（768pxで44px）になるよう70pxにする */
  .price{padding-bottom:70px;}

  /* ---- 補助金 ---- */
  .subsidy__head{width:100%;}
  .subsidy__title{font-size:20px;}
  .subsidy__title em{font-size:24px;}
  .subsidy__head .deco-dash{width:100%; max-width:652px;}

  /* ---- お客様の声 ---- */
  /* 3カラムのままだと1枚220px。aspect-ratio:307/212 があるため
     文章が縦に伸びた分だけ横幅も要求され、カードが350pxまで膨らんで
     ページ幅1129px＝横スクロールになる（768px実測）。2カラムに落とす */
  /* gap:24px は必須。PC側を justify-content:space-between にした際に
     ベースの gap 指定が無くなり、ここが0になっていた
     （カード3の width:calc(50% - 12px) が24px前提なので幅も食い違う） */
  .voice__list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
  /* 3枚目は1枚だけ余るので、2カラム分の中央に置く */
  .voice__card--3{grid-column:1 / -1; width:calc(50% - 12px); margin-inline:auto;}
  /* 枠SVGは viewBox 212 のうち角丸の下端が186.26＝高さの87.9%で、残り12%は尻尾。
     PCの padding-bottom:34px だと600pxでカードが縦に詰まったとき本文が枠から飛び出す
     （実測：使える高さ181.9pxに対し中身181.9pxで余裕ゼロ）。52pxに広げて逃がす。
     カードが大きい1024px側では aspect-ratio 側が効くので高さは変わらない */
  /* 左右もPCの30pxだと600pxでラベル（15文字＝195px＋自身の余白24px）が
     使える幅210pxに収まらず「た」だけ2行目に落ちるので22pxに詰める */
  .voice__card{padding-bottom:52px; padding-left:22px; padding-right:22px;}

  /* ---- その他 ---- */
  .flow__list{grid-template-columns:repeat(2,1fr); gap:24px;}
  .flow__list li:nth-child(2)::after{display:none;}
  .about__body{grid-template-columns:1fr; margin-top:30px;}
  /* 縦積みではPCの19.5px（表と写真のズレ）は不要。
     また1カラムに落ちると520pxの写真が左に張り付く（実測：中心290px / 画面中心384px）ので
     PCの列幅と同じ380pxに絞って中央へ */
  .about__photo{margin-top:24px; max-width:380px; margin-inline:auto;}
  /* PC実測の padding-bottom:14px のままだと写真の下に余白がなくなる */
  .about{padding:56px 0;}
  .contact__body{grid-template-columns:1fr;}
}

/* =========================================================
   スマートフォン（〜767px）
   ========================================================= */
@media (max-width:767px){
  /* ---- お客様の声：2カラムは768pxから ---- */
  /* 2カラムだと600pxでカードが258px＝比率高さ178pxしか取れず、
     中身210.6pxが枠から溢れる（ラベルが枠の上に、本文が尻尾に食い込む）。
     1カラムに戻し、幅420pxで頭打ちにすれば比率高さ290pxに中身が余裕で収まる。
     ※aspect-ratio で高さが確定するとグリッドの stretch が効かず、
       行数の多いカードだけ背が伸びて隣と揃わない問題も、1カラムなら起きない */
  .voice__list{grid-template-columns:1fr; gap:34px;}
  .voice__card{width:min(100%, 420px); margin-inline:auto; min-width:0;}
  .voice__card--3{grid-column:auto; margin-inline:auto;}

  /* ---- ヘッダー ---- */
  .header__inner{padding:0 14px; height:60px;}
  .logo__img{width:140px;}
  .navtoggle{width:42px; height:42px;}
  .navtoggle span{left:11px; width:20px;}
  .navtoggle span:nth-child(1){top:14px;}
  .navtoggle span:nth-child(2){top:20px;}
  .navtoggle span:nth-child(3){top:26px;}
  .gnav{padding:80px 24px 40px;}

  /* ---- ヒーロー：写真を上、文字を下に積む ---- */
  .hero{background:var(--bg-peach);}
  /* 高さ固定にしない。280px固定だと554px以上の幅で横長になりすぎて cover が
     幅基準に切り替わり、縦がクロップされて下端の波形が切れる（かつ白フェードが全部出る）。
     タブレットと同じ aspect-ratio:975/728 に任せれば、見える元画像は
     幅にかかわらず x=464〜1439 で一定。375pxでの高さは 375×728/975 = 280px で同じ */
  .hero__body{position:static;}
  /* 本文を細くしないため、スマホでは2カラムをやめる。
     代表は本文の右下（電話ブロックの右）に重ねる */
  /* 「地域No.1を目指します」の下の余白。.hero__record の margin-bottom だと
     最後の子なので親の外へマージン相殺で抜けてしまう（実測3pxしか空かない） */
  .hero{display:block; padding-bottom:32px;}
  /* aspect-ratio / object-position / object-fit はタブレット側（975/728・100% top）をそのまま使う */
  .hero__body{position:static;}
  .hero__inner{padding:22px 20px 26px;}
  /* 「冬の寒さも、結露も、外の音も。」15文字を必ず1行に収める。
     23px だと 345px 必要で表示幅335pxを超え、「も。」だけ2行目に落ちていた。
     44px は左右padding40px＋安全代4px。375pxで22.07px／390px以上は23pxで頭打ち */
  .hero__title{font-size:min(23px, calc((100vw - 44px) / 15)); letter-spacing:0; line-height:1.55;}
  .hero__lead{margin-top:14px; font-size:14px;}
  /* 左右のスラッシュは太さが違う（左15px / 右39px）ため、単純に並べると
     文字の中心が画面中心より11px左にずれる。左右を 1fr で挟んで文字を真ん中に固定する */
  .badge{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center;
    /* スマホのCTAボタンは width:100% なので、バッジも全幅に戻す
       （タブレット側の width:280px がここまで効いてしまうため明示的に打ち消す）*/
    width:auto;
    margin-top:22px; font-size:14px; gap:8px;
  }
  .badge__slash{height:24px;}
  .badge__slash:first-child{justify-self:end;}
  .badge__slash:last-child{justify-self:start;}
  .hero .btn--lg{width:100%; height:56px; font-size:16px; margin-top:14px;}
  .tel{margin-top:22px;}
  .tel__num{font-size:24px;}
  .tel__note{font-size:12px;}
  /* 代表：本文の右下（電話ブロックの右）に食い込ませる。
     position:absolute + bottom だと基準が .hero の下端＝施工実績の下端になり、
     施工実績を下げても代表が同じだけ下がるので必ず重なる（実測で11px重複）。
     流れに残したまま負のマージンで持ち上げれば、施工実績は常にこの下に並ぶ。
     -166px：頭がCTAボタンに16px重なる位置。
     右マージン50pxで写真を左へ寄せ、フキダシとの重なりを46px→20pxに減らす。
     ただし50px固定だと320pxの端末で左端が174pxまで来て、電話番号の右端179pxに
     5pxかぶる。左端が 189px（電話番号＋10px）を下回らないよう clamp で頭打ちにする
     （100vw - 96(写真) - 189 = 100vw - 285） */
  .hero__staff{
    position:relative;             /* フキダシの位置基準 */
    inset:auto;                    /* PC用の left:62.5% / bottom:-184px を打ち消す */
    /* 96px固定だと767pxで画面の12.5%しかなく、768px（210px＝27.3%）で2.2倍に跳ねる。
       375px:96px → 767px:210px を直線で結んで連続させる
       （傾き (210-96)/(767-375)=0.2908 → 29.08vw - 13.05px） */
    width:clamp(96px, calc(29.08vw - 13.05px), 210px);
    /* 右マージンも 375px:50px → 767px:70px（＝768px側の値）へ。
       50pxのままだとフキダシの右端が767pxで画面から4pxまで迫る。
       calc(100vw - 285px) は「写真の左端が電話番号の右端179px＋10pxを下回らない」上限 */
    margin:-166px clamp(14px, min(calc(100vw - 285px), calc(5.1vw + 30.9px)), 70px) 0 auto;
  }
  /* 頭がCTAボタンに重なるので、ボタンのタップを写真が奪わないようにする */
  .hero__staff img{pointer-events:none;}
  .hero__record{
    margin:4px 0 0; font-size:14px; text-align:center;   /* 上4px＝代表者名に詰める */
  }
  .hero__record strong{font-size:28px;}
  /* 写真を左へ動かしたぶん、フキダシは figure の外へ余分にはみ出させて
     画面上の位置を保つ（結果、写真に乗る量が減る）。右端 = 325+32 = 357px */
  /* 8pxだと「私が解決／します！」が潰れる。375pxで円56px・文字10px。
     写真の拡大に合わせて 767px で 78px・11px（＝768px側の値）まで連続で大きくする */
  .hero__bubble{
    width:clamp(56px, calc(5.61vw + 35px), 78px);
    height:clamp(56px, calc(5.61vw + 35px), 78px);
    right:calc(-3.57vw - 18.6px);     /* 375px:-32px → 767px:-46px */
    top:2%; left:auto; translate:0 0;
    font-size:clamp(10px, 1.44vw, 11px);
  }
  /* 375pxでは9px（幅96pxに「まどごこち 代表取締役」が1行で収まる上限）。
     写真の拡大に合わせて767pxで12px＝768px側の値へ */
  .hero__staffname{font-size:clamp(9px, calc(0.765vw + 6.13px), 12px); margin-top:4px;}


  /* ---- フッター＋固定バー ---- */
  .footer{padding:40px 0 96px;}
  .footer__inner{flex-direction:column-reverse; align-items:flex-start; gap:20px;}
  .logo--footer .logo__img{width:180px;}

  .spbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
    padding:8px; background:rgba(42,42,40,.94);
  }
  .spbar a{
    display:grid; place-items:center;
    padding:13px 4px; border-radius:4px;
    background:#3E3C39; color:#fff;
    font-family:var(--f-round); font-weight:700; font-size:13px;
  }
  .spbar a:nth-child(2){background:var(--line-green);}
  .spbar__cta{background:var(--orange) !important;}
}

/* =========================================================
   小型スマートフォン（〜599px）
   ---------------------------------------------------------
   600〜767pxは「箱はタブレット並みに大きいのに文字だけスマホ用」で
   バランスが崩れていた（767→768で 円 -31% / 円の文字 +46% / 声と流れが1→2列）。
   ヘッダー・ヒーロー・固定バーだけ767pxのままにして、
   本文セクションはタブレットの見た目を599pxまで下ろす。
   ========================================================= */
@media (max-width:599px){
  :root{--pad:20px;}
  body{font-size:15px;}

  /* ---- 悩み＋実績 ---- */
  /* 上20/下48 で中身が白枠の上に寄っていた。上下を揃える（合計68pxは維持） */
  .problem{padding:34px 0;}
  .br-sp{display:inline;}
  /* 見出しは30px＋字送り.04em＝1文字31.2px。360px以上なら「窓を見せてください。」
     10文字（312px）が収まるので30pxのまま。320pxなど狭い端末でだけ縮める */
  .heading{font-size:min(30px, calc((100vw - 44px) / 10.4));}
  /* 16文字。375pxで19px（1行に収まる上限）、599pxで26px＝600px以上のタブレット値に一致。
     320pxなど狭い端末では折り返さないよう更に縮む */
  .problem .heading{font-size:min(26px, max(19px, 4.34vw), calc((100vw - 44px) / 16.6));}
  .deco-dash{width:min(320px,86%);}
  /* 円3つはPCと同じ横並び。比率で組んであるのでそのまま縮む。
     ただし幅なりに伸ばすと599pxで円181pxになり、600px側の143.6pxより大きくなって
     「文字は同じなのに丸だけ急に大きくなる」段差ができる。
     3×143.6＋gap16＝447px を上限にして600px側と一致させる */
  .problem__list{
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
    width:min(100%, 447px); margin-inline:auto;
  }
  /* アイコンを比率指定に統一したので、位置は上の32%（PCと同じ）に任せる。
     文字は固定だと幅が広がるほど円に対して小さく見えるので、
     375pxで13px → 599pxで19px（＝600px以上のタブレット値）まで連続で拡大する */
  .problem__circle b{font-size:clamp(13px, 3.2vw, 19px);}
  .problem__list small{font-size:clamp(10px, 2vw, 12px); line-height:1.55; width:100%;}
  .problem__list small br{display:none;}   /* 幅が狭いので自然折り返しに任せる */

  .record{padding-top:28px;}
  .record__name{font-size:13px;}
  .record__text{font-size:20px; line-height:1.7;}
  .record__text strong{font-size:40px; margin:0 3px;}
  .record__note{font-size:12px; left:-6px;}

  /* ---- 仕組み ---- */
  .how, .works, .price, .flow, .voice, .faq, .about, .contact, .subsidy{padding:48px 0;}
  .how__title{font-size:20px;}
  .how__strong{font-size:26px; margin-left:4px;}
  .how__wave{width:110px; bottom:-9px;}
  .how__illust{width:76px; order:-1;}   /* 見出しのすぐ下に置く */
  .how__lead{font-size:13px;}
  /* PC用の改行位置のまま各文が2行に折り返すと「取り付けま／す。」「多くの場／合、」と
     語中で切れる。スマホでは改行を外して1つの段落として流す */
  .how__lead br{display:none;}
  .diagram{padding:12px 2px; border-radius:10px;}
  .effect dt{font-size:17px;}
  .effect dd{font-size:13px;}

  /* ---- 補助金 ---- */
  .subsidy__box{padding:26px 18px;}
  .subsidy__title{font-size:16px; line-height:1.7;}
  .subsidy__title em{font-size:19px;}
  .subsidy__head .deco-dash{margin-top:10px;}

  /* ---- 施工事例 ---- */
  .ba{aspect-ratio:4/3;}
  .ba__handle{width:44px; height:44px; margin:-22px 0 0 -22px;}
  .works__voice{padding:20px;}

  /* ---- 料金：縦積み ---- */
  .price__table th,
  .price__table td{display:block; width:100%; border-bottom:none; padding:0;}
  .price__table tr{display:block; padding:18px 0; border-bottom:1px solid var(--line);}
  .price__table th{font-size:17px; padding-left:22px;}
  .price__place{margin-top:4px;}
  .price__yen{text-align:left; margin-top:6px; font-size:26px;}

  /* ---- 流れ・声・FAQ ---- */
  .flow__list{grid-template-columns:1fr; gap:34px;}
  .flow__list li{width:min(100%, 420px); margin-inline:auto;}   /* 上と同じ理由 */
  /* 縦積みなので矢印は下向きにしてカードの間に置く */
  .flow__list li:not(:last-child)::after{
    display:block; content:"";
    top:auto; right:auto; bottom:-24px; left:50%;
    margin:0 0 0 -7px;
    border-left:7px solid transparent; border-right:7px solid transparent;
    border-top:9px solid var(--orange);
  }
  .voice__list{grid-template-columns:1fr;}
  /* 1カラムなので、タブレット用の「3枚目だけ半幅で中央」を戻す */
  .voice__card--3{grid-column:auto; width:auto; margin-inline:0;}
  /* min-width:auto（グリッド項目の自動最小幅）のままだと、本文が縦に伸びたぶんを
     aspect-ratio が横幅として要求し、幅320pxでカードが556pxまで膨らんで横スクロールになる。
     0 にすると幅はトラック任せになり、収まらないぶんは高さ側へ逃げる。
     ※PC・タブレットには効かせない（1440pxで声セクションが+11pxずれてカンプと合わなくなる） */
  .voice__card{min-width:0;}
  /* 1カラムだと599pxでカードが559px幅になり、13pxの本文に対して間延びする。
     600px以上の2カラム時（280〜363px）に近づくよう上限を設ける */
  /* margin-inline:auto だけだとグリッド項目が内容幅に縮むので width で明示する */
  .voice__card{width:min(100%, 420px); margin-inline:auto;}
  .voice__heading{gap:10px;}
  .voice__megaphone{height:34px;}
  .voice__card{padding:20px 22px 30px;}
  .faq__list dt{font-size:16px; padding-left:44px;}
  .faq__list dt::before{font-size:26px; top:-6px;}
  .faq__list dd{padding-left:44px; font-size:13px;}

  /* ---- 会社案内・お問い合わせ ---- */
  .about__table th{width:92px; font-size:12px;}
  .about__table td{font-size:14px;}
  .form__btns{grid-template-columns:1fr;}

}

/* 動きを減らす設定のユーザーへの配慮 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}