@charset "utf-8";
/*
 * トップページ専用（2026-09-11 株式会社きびだんご）
 * 1) セクションの背景に「方眼」と「薄い実写写真」を入れてメリハリをつける
 * 2) ボタンを kbdg-lp の button-09（メインカラーのピル＋白い丸の矢印）に統一
 * 3) FV下の丸バナーを1.5倍にしてFVに半分ほどかぶせる／セクションの上下余白を120pxに（2026-09-11 追加）
 *
 * home-warm.css の後に読み込む（front-page.php の wp_enqueue_style）。
 * FV本体・ヘッダー・フッターには効かせない。
 * 背景写真はすべて自社の実写（重機・ダンプ・職人）。AI生成画像は背景に使わない。
 * 写真の上には同じ色を一枚かぶせて薄くしている（色の変化するグラデーションではない）。
 */

/* ============ 背景：方眼 ============ */
/* 淡いクリームの面：紺の細線 */
.rnw .mt-home-design:is(#reason,#flow){
  background-image:linear-gradient(rgba(21,63,80,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,63,80,.07) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:center top;
}
/* 黄色の面：白の細線 */
.rnw .mt-home-design:is(#menu,#voice),
.rnw .mt-home-design.mt-contact-scope .rnw-contact{
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:center top;
}
/* 淡い緑の面：緑の細線 */
.rnw .mt-home-design#news{
  background-image:linear-gradient(rgba(17,133,104,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(17,133,104,.12) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:center top;
}

/* ============ 背景：薄い実写写真 ============ */
/* 濃い面（自社施工へのこだわり）：自社のダンプ4台 */
.rnw .mt-home-design.pres{
  background-image:linear-gradient(rgba(21,63,80,.86),rgba(21,63,80,.86)),url('img/rnw/bg-trucks.webp');
  background-size:cover;
  background-position:center 60%;
}
/* 濃い面（施工実績）：ロゴ入りの自社重機 */
.rnw .mt-home-design#works{
  background-image:linear-gradient(rgba(21,63,80,.87),rgba(21,63,80,.87)),url('img/rnw/bg-excavator-front.webp');
  background-size:cover;
  background-position:center 40%;
}
/* 淡い面（自社施工と仲介業者の違い ※旧「費用の目安」の場所）：自社重機の側面 */
.rnw .mt-home-design#compare{
  background-image:linear-gradient(rgba(255,248,231,.88),rgba(255,248,231,.88)),url('img/rnw/bg-excavator-side.webp');
  background-size:cover;
  background-position:center;
}
/* 淡い面（対応エリア）：現場へ向かう職人 */
.rnw .mt-home-design#area{
  background-image:linear-gradient(rgba(255,248,231,.88),rgba(255,248,231,.88)),url('img/rnw/bg-crew.webp');
  background-size:cover;
  background-position:center;
}

/* ============ ボタン：button-09 ============ */
/* 丸（::after）と矢印（::before）はCSSで描く。HTMLは変えない */
.rnw .mt-home-design .btn,
.rnw .mt-home-design .rnw-contact .ct .btn{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  min-width:250px;min-height:0;padding:15px 16px 15px 30px;
  border:0;border-radius:999px;background:#153f50;color:#fff8e7;
  font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.5;text-decoration:none;
  box-shadow:none;transform:none;transition:background-color .2s,color .2s,box-shadow .2s;
}
.rnw .mt-home-design .btn::after{
  content:"";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fff8e7;
}
.rnw .mt-home-design .btn::before{
  content:"";position:absolute;top:50%;right:33px;width:7px;height:7px;
  border-top:1.6px solid #153f50;border-right:1.6px solid #153f50;
  transform:translate(50%,-50%) rotate(45deg);
}
.rnw .mt-home-design .btn::after{transition:background-color .2s;}
.rnw .mt-home-design .btn::before{transition:border-color .2s;}
/* 相談帯は3列の箱いっぱいに広げる（狭い画面で箱からはみ出さないよう最小幅を外す） */
.rnw .mt-home-design .rnw-contact .ct .btn{min-width:0;width:100%;}

/* 濃い面の上だけ色を反転（メインカラーの面にメインカラーのボタンだと消えるため） */
.rnw .mt-home-design.pres .pres-body .btn,
.rnw .mt-home-design#works .btn{
  background:#fff8e7;color:#153f50;
}
.rnw .mt-home-design.pres .pres-body .btn::after,
.rnw .mt-home-design#works .btn::after{background:#153f50;}
.rnw .mt-home-design.pres .pres-body .btn::before,
.rnw .mt-home-design#works .btn::before{border-color:#fff8e7;}

/* ホバー・キーボード選択で色を反転（全ボタン共通。2026-09-11 追加）
 * 反転後はボタンの地が背景と同じ色になりうるので、2pxの線（ぼかしなし）で輪郭を残す */
/* 淡い面の上：青緑 → クリーム */
.rnw .mt-home-design .btn:is(:hover,:focus-visible),
.rnw .mt-home-design .rnw-contact .ct .btn:is(:hover,:focus-visible){
  background:#fff8e7;color:#153f50;box-shadow:inset 0 0 0 2px #153f50;transform:none;opacity:1;
}
.rnw .mt-home-design .btn:is(:hover,:focus-visible)::after{background:#153f50;}
.rnw .mt-home-design .btn:is(:hover,:focus-visible)::before{border-color:#fff8e7;}
/* 濃い面の上（自社施工へのこだわり・施工実績）：クリーム → 青緑 */
.rnw .mt-home-design.pres .pres-body .btn:is(:hover,:focus-visible),
.rnw .mt-home-design#works .btn:is(:hover,:focus-visible){
  background:#153f50;color:#fff8e7;box-shadow:inset 0 0 0 2px #fff8e7;
}
.rnw .mt-home-design.pres .pres-body .btn:is(:hover,:focus-visible)::after,
.rnw .mt-home-design#works .btn:is(:hover,:focus-visible)::after{background:#fff8e7;}
.rnw .mt-home-design.pres .pres-body .btn:is(:hover,:focus-visible)::before,
.rnw .mt-home-design#works .btn:is(:hover,:focus-visible)::before{border-color:#153f50;}

@media(prefers-reduced-motion:reduce){.rnw .mt-home-design .btn,.rnw .mt-home-design .btn::after,.rnw .mt-home-design .btn::before{transition:none;}}

/* ============ 自社施工と仲介業者の違い（2026-09-11 「費用の目安」と差し替え） ============ */
/* ミヤテックの列は青緑の見出し＋淡い緑の地、仲介業者の列は白。文字はすべて濃い色（グレー文字は使わない） */
.rnw .mt-home-design .cmp-scroll{margin-top:40px;}
.rnw .mt-home-design .cmp-tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid #d7ccb0;border-radius:18px;overflow:hidden;background:#fff;}
.rnw .mt-home-design .cmp-tbl :is(th,td){padding:20px 22px;border:0;border-right:1px solid #e4dac1;border-bottom:1px solid #e4dac1;font-size:16px;line-height:1.75;color:#153f50;text-align:left;vertical-align:middle;text-wrap:pretty;}
.rnw .mt-home-design .cmp-tbl :is(th,td):last-child{border-right:0;}
.rnw .mt-home-design .cmp-tbl tbody tr:last-child :is(th,td){border-bottom:0;}
.rnw .mt-home-design .cmp-tbl thead th{font-family:var(--font-head);font-size:18px;font-weight:900;line-height:1.4;text-align:center;background:#fff0c0;}
.rnw .mt-home-design .cmp-tbl thead th:first-child{width:22%;}
.rnw .mt-home-design .cmp-tbl thead th.cmp-us{background:#153f50;color:#fff8e7;font-size:22px;}
.rnw .mt-home-design .cmp-tbl thead th.cmp-us small{display:block;margin-top:4px;font-size:14px;font-weight:700;color:#ffdb51;}
.rnw .mt-home-design .cmp-tbl tbody th{background:#fff8e7;font-family:var(--font-head);font-weight:700;}
.rnw .mt-home-design .cmp-tbl td.cmp-us{background:#e5f1e7;font-weight:700;}
.rnw .mt-home-design .cmp-note{margin-top:16px;font-size:14px;line-height:1.8;color:#153f50;}
/* スマホ：項目名を行の上に横長の帯で置き、その下にミヤテック／仲介業者を2列で並べる（項目名が細切れに折り返さないように） */
@media(max-width:620px){
  .rnw .mt-home-design .cmp-scroll{margin-top:28px;}
  .rnw .mt-home-design .cmp-tbl{display:block;border-radius:14px;}
  .rnw .mt-home-design .cmp-tbl :is(thead,tbody){display:block;}
  .rnw .mt-home-design .cmp-tbl tr{display:grid;grid-template-columns:1fr 1fr;}
  .rnw .mt-home-design .cmp-tbl :is(th,td){display:block;padding:12px 12px;font-size:14px;line-height:1.7;}
  .rnw .mt-home-design .cmp-tbl thead th:first-child{display:none;}
  .rnw .mt-home-design .cmp-tbl thead th{font-size:15px;}
  .rnw .mt-home-design .cmp-tbl thead th.cmp-us{font-size:16px;}
  .rnw .mt-home-design .cmp-tbl tbody th{grid-column:1 / -1;padding:8px 12px;border-right:0;background:#fff0c0;font-size:15px;}
}

/* ============ セクションの上下余白 ============ */
/* 基本120px（タブレット88px・スマホ64px）。FVと丸バナーは対象外 */
.rnw .mt-home-design:is(.sec,.pres),
.rnw .mt-home-design#works,
.rnw .mt-home-design.mt-contact-scope .rnw-contact{padding-top:120px;padding-bottom:120px;}
@media(max-width:960px){
  .rnw .mt-home-design:is(.sec,.pres),
  .rnw .mt-home-design#works,
  .rnw .mt-home-design.mt-contact-scope .rnw-contact{padding-top:88px;padding-bottom:88px;}
}
@media(max-width:620px){
  .rnw .mt-home-design:is(.sec,.pres),
  .rnw .mt-home-design#works,
  .rnw .mt-home-design.mt-contact-scope .rnw-contact{padding-top:64px;padding-bottom:64px;}
}

/* ============ 丸バナー：1.5倍にしてFVに半分ほどかぶせる ============ */
/*
 * --bnr-size : 丸の直径（元168px→252px、スマホ124px→186px）
 * --bnr-lift : 互い違いの段差（元30px→45px、スマホ22px→33px）
 * --bnr-over : FVにかぶる量（高い方の丸の上端からFV下端まで）。
 *              丸の半分＋段差の半分＝2段の平均でちょうど半分かぶる量。
 *              ただしFV画像は画面幅で縮むので、画面幅の10%を上限にして
 *              FVの「せんのん？」の文字に丸がかからないようにしている
 */
/* 寸法は .rnw に置く（下の .pres からも同じ値を使うため）
 * --bnr-pb  : 丸の下の余白
 * --bnr-ext : 丸バナーのうちFVより下に出ている高さ（＝.pres の背景を上へ伸ばす量） */
.rnw{
  --bnr-size:252px;--bnr-gap:66px;--bnr-lift:45px;--bnr-pb:40px;
  --bnr-over:min(calc(var(--bnr-size) / 2 + var(--bnr-lift) / 2),10vw);
  --bnr-ext:calc(var(--bnr-lift) + var(--bnr-size) + var(--bnr-pb) - var(--bnr-over));
}
.rnw .rnw-bnr{
  position:relative;z-index:2;background:transparent;
  margin-top:calc(var(--bnr-over) * -1);
  padding:var(--bnr-lift) 0 var(--bnr-pb);
}
.rnw .rnw-bnr .bnr-track{animation-duration:60s;} /* 丸が大きくなった分、流れる速さを元に揃える */
.rnw .rnw-bnr .bnr-row li{width:var(--bnr-size);margin-right:var(--bnr-gap);}
.rnw .rnw-bnr .bnr-row li:nth-child(odd){transform:translateY(calc(var(--bnr-lift) * -1));}
/* FVの上でも輪郭が分かるよう白いフチを付ける（影ではなく線） */
.rnw .rnw-bnr .bnr-row a{width:var(--bnr-size);height:var(--bnr-size);border:5px solid #fff;box-sizing:border-box;}

/* 丸バナーの背景：FVより下は「自社施工へのこだわり」（.pres）の背景を上へ伸ばして敷く。
 * 別に同じ背景を敷くと写真が境目でずれるので、.pres 自体をFVの下端まで持ち上げ、
 * 持ち上げた分だけ上の余白を足して中身の位置は変えない（丸バナーは z-index で上に乗る） */
.rnw .rnw-bnr + .mt-home-design.pres{margin-top:calc(var(--bnr-ext) * -1);padding-top:calc(120px + var(--bnr-ext));}
@media(max-width:960px){
  .rnw .rnw-bnr + .mt-home-design.pres{padding-top:calc(88px + var(--bnr-ext));}
}
@media(max-width:620px){
  .rnw{--bnr-size:186px;--bnr-gap:42px;--bnr-lift:33px;--bnr-pb:28px;}
  .rnw .rnw-bnr .bnr-row a{border-width:4px;}
  .rnw .rnw-bnr + .mt-home-design.pres{padding-top:calc(64px + var(--bnr-ext));}
}