:root{
  --navy:#1F3A6B;
  --navy-deep:#152A52;
  --yellow:#FFD400;
  --yellow-deep:#F5B800;
  --cream:#FBF8EF;
  --cream-deep:#F4EFDF;
  --red:#E60012;
  --red-deep:#B8000F;
  --green:#1FB04C;
  --blue:#00A0E9;
  --pink:#FF3D8B;
  --orange:#FF7A00;
  --text:#2a2520;
  --muted:#857d72;
  --line:#ece5d4;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{
  font-family:"Noto Sans JP","Inter","Helvetica Neue",sans-serif;
  color:var(--text);background:var(--cream);
  line-height:1.8;-webkit-font-smoothing:antialiased;
  font-weight:500;padding-top:40px /* 上部の提案バーぶん */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.3s}
ul{list-style:none;padding:0;margin:0}

/* =========================================
   提案バナー & 注釈
   ========================================= */
.proposal-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:var(--navy);color:#fff;padding:8px 20px;
  font-size:12px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--yellow);font-family:"Noto Sans JP","Inter",sans-serif
}
.proposal-bar strong{color:var(--yellow);letter-spacing:.08em}
.proposal-bar .pill{background:rgba(255,255,255,.12);padding:3px 10px;border-radius:99px;font-size:11px}
/* v10：DESIGN NOTE 提案用装飾は削除 */

/* =========================================
   HEADER（v3：すっきりシングルバー）
   ========================================= */
.header{
  position:sticky;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line)
}
.header-inner{
  max-width:1320px;margin:0 auto;padding:0 32px;height:74px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px
}

/* ロゴ */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{
  width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;font-family:"Montserrat";
  font-weight:900;font-size:18px;letter-spacing:0
}
.brand .name{display:flex;flex-direction:column;line-height:1.1}
.brand .name .ja{color:var(--navy);font-weight:800;font-size:18px;letter-spacing:.14em}
.brand .name .en{font-family:"Inter","Montserrat";font-size:9px;font-weight:600;letter-spacing:.28em;color:var(--muted);margin-top:3px}

/* グローバルナビ（v12：ホバープルダウン対応） */
.gnav{display:flex;justify-content:center;align-items:center;gap:28px}
.gnav .gnav-item{position:relative;display:flex;align-items:center}
/* リンク自体（単独 a.gnav-item と、.has-sub の中の a の両方） */
.gnav a.gnav-item,
.gnav .has-sub > a{
  position:relative;font-size:13px;font-weight:700;color:var(--text);
  letter-spacing:.06em;padding:24px 0;transition:.25s;display:inline-flex;align-items:center;gap:6px;text-decoration:none
}
.gnav a.gnav-item::after,
.gnav .has-sub > a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:14px;height:2px;
  background:var(--yellow);transition:.3s ease
}
.gnav a.gnav-item:hover,
.gnav .has-sub > a:hover{color:var(--navy)}
.gnav a.gnav-item:hover::after,
.gnav .has-sub > a:hover::after{left:0;right:0}
.gnav .has-sub:hover > a::after{left:0;right:0}
/* キャレット（▼） */
.gnav .caret{
  display:inline-block;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:.25s;opacity:.7
}
.gnav .has-sub:hover .caret,.gnav .has-sub:focus-within .caret{transform:translateY(0) rotate(225deg);opacity:1}

/* ドロップダウン本体 */
.gnav .gnav-sub{
  position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%) translateY(8px);
  min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 48px -12px rgba(31,47,77,.18),0 0 0 1px rgba(31,47,77,.04);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:.22s ease;z-index:120
}
.gnav .gnav-sub::before{
  content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0
}
.gnav .has-sub:hover .gnav-sub,
.gnav .has-sub:focus-within .gnav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
.gnav .gnav-sub a{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;
  font-size:13px;font-weight:700;color:var(--text);letter-spacing:.04em;text-decoration:none;
  transition:.2s;position:relative
}
.gnav .gnav-sub a::before{
  content:"";width:6px;height:6px;background:var(--yellow);border-radius:50%;flex-shrink:0;transition:.2s
}
.gnav .gnav-sub a:hover{background:var(--cream);color:var(--navy)}
.gnav .gnav-sub a:hover::before{background:var(--red);transform:scale(1.4)}
/* hover の隙間でメニューが閉じないように余白を確保 */
.gnav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

/* ハンバーガー（小幅でのみ表示・必ず右端） */
.hamburger{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  position:relative;z-index:1010;
  grid-column:-1;justify-self:end;margin-left:auto
}
.hamburger span{display:block;width:24px;height:2.4px;background:var(--navy);border-radius:2px;transition:.3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* モバイルメニュー背景（タップで閉じる） */
.mm-backdrop{
  position:fixed;inset:0;background:rgba(31,47,77,.45);z-index:990;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease
}
.mm-backdrop[data-open="true"]{opacity:1;visibility:visible}

/* モバイルメニュー本体（v13：<header> の外側に出して fixed の閉じ込めを解消） */
.mobile-menu{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:#fff;padding:80px 22px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  z-index:1000;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s ease;
  visibility:hidden;max-width:420px;margin-left:auto;
  box-shadow:-20px 0 40px rgba(31,47,77,.18)
}
.mobile-menu[data-open="true"]{transform:translateX(0);visibility:visible}
.mm-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.mm-list > li{border-bottom:1px solid var(--line)}
.mm-list > li > a,
.mm-list .mm-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 12px;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:.04em;
  background:transparent;border:0;cursor:pointer;text-decoration:none;text-align:left;
  transition:background-color .28s ease, color .28s ease, padding-left .28s ease
}
.mm-list > li > a::after{
  content:"→";color:var(--yellow);font-weight:900;font-size:18px;transition:color .28s ease, transform .28s ease
}
/* === v57：Option D ホバー（背景ネイビー反転） === */
.mm-list > li > a:hover,
.mm-list > li > a:focus-visible,
.mm-list > li > a:active,
.mm-list .mm-toggle:hover,
.mm-list .mm-toggle:focus-visible{
  background:var(--navy) !important;
  color:#fff !important;
  padding-left:18px !important
}
.mm-list > li > a:hover::after,
.mm-list > li > a:focus-visible::after{
  color:var(--yellow);transform:translateX(4px)
}
.mm-list .mm-toggle:hover .mm-caret,
.mm-list .mm-toggle:focus-visible .mm-caret{
  border-color:var(--yellow)
}
/* 「初めての方へ」項目もホバー時はネイビー反転（インラインstyleを上書き） */
.mm-list > li > a[href*="first-time"]:hover{
  background:var(--navy) !important;
  color:#fff !important
}
.mm-caret{
  display:inline-block;width:10px;height:10px;border-right:2px solid var(--yellow);border-bottom:2px solid var(--yellow);
  transform:rotate(45deg);transition:.25s
}
.mm-toggle[aria-expanded="true"] .mm-caret{transform:rotate(-135deg) translate(-2px,-2px)}
.mm-sub{
  list-style:none;padding:0;margin:0;max-height:0;overflow:hidden;transition:.3s ease;background:var(--cream);border-radius:12px
}
.mm-has-sub.is-open .mm-sub{max-height:400px;margin:0 0 14px;padding:8px 4px}
.mm-sub li{}
.mm-sub li a{
  display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14px;font-weight:700;
  color:var(--text);text-decoration:none;border-radius:8px;transition:.2s
}
.mm-sub li a::before{
  content:"";width:6px;height:6px;background:var(--yellow);border-radius:50%;flex-shrink:0
}
.mm-sub li a:active{background:#fff}
.mm-foot{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.mm-tel{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.mm-tel .lbl{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.06em}
.mm-tel .num{font-family:"Roboto Condensed","Inter";font-size:24px;font-weight:900;color:var(--navy);letter-spacing:.02em}
.mm-tel .meta{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.mm-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--navy);color:#fff;font-weight:900;font-size:14px;letter-spacing:.08em;
  border-radius:99px;padding:16px 22px;text-decoration:none
}
.mm-cta::after{content:"→"}
.menu-open{overflow:hidden}

/* 右ユーティリティ */
.utility{display:flex;align-items:center;gap:18px}
.u-tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;text-decoration:none}
.u-tel .num{font-family:"Roboto Condensed","Inter";font-size:22px;font-weight:800;color:var(--navy);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.u-tel .num::before{content:"";width:14px;height:14px;background:var(--navy);mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 15.5c-1.2 0-2.5-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.7-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.4-1.1-.6-2.4-.6-3.6 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.4c0-.6-.4-1-1-1z'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 15.5c-1.2 0-2.5-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.7-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.4-1.1-.6-2.4-.6-3.6 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.4c0-.6-.4-1-1-1z'/></svg>") center/contain no-repeat}
.u-tel .meta{font-size:10px;color:var(--muted);font-weight:600;margin-top:3px;letter-spacing:.04em}
.u-divider{width:1px;height:28px;background:var(--line)}
.u-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  background:var(--navy);color:#fff;font-weight:700;border-radius:999px;
  letter-spacing:.06em;font-size:13px;transition:.25s;border:1px solid var(--navy)
}
.u-btn::after{content:"→";font-weight:600;transition:.25s}
.u-btn:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.u-btn:hover::after{transform:translateX(3px)}
.u-btn.outline{background:transparent;color:var(--navy)}
.u-btn.outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* =========================================
   FV（v2：丁寧・親しみ・上品）
   ========================================= */
.hero{
  position:relative;min-height:720px;
  background:
    radial-gradient(1200px 600px at 80% 30%, rgba(250,218,36,.08), transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  overflow:hidden;padding:0
}

/* 背景の装飾 */
.hero .grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none
}
.hero .blob1{position:absolute;left:-180px;bottom:-200px;width:520px;height:520px;background:radial-gradient(circle at 30% 30%, rgba(250,218,36,.18), transparent 60%);border-radius:50%;filter:blur(20px)}
.hero .blob2{position:absolute;right:30%;top:-160px;width:420px;height:420px;background:radial-gradient(circle, rgba(255,123,176,.12), transparent 60%);border-radius:50%;filter:blur(20px)}

/* 縦書きの大文字ロゴ */
.hero-vertical{
  position:absolute;left:36px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;
  font-family:"Montserrat";font-weight:900;font-size:120px;color:rgba(255,255,255,.06);
  letter-spacing:.06em;white-space:nowrap;pointer-events:none
}
.hero-vertical b{color:rgba(250,218,36,.18)}

.hero-inner{
  position:relative;max-width:1340px;margin:0 auto;padding:80px 50px 0;
  display:grid;grid-template-columns:48% 52%;gap:40px;align-items:center;z-index:5
}

/* 左：テキスト */
.hero-text{color:#fff;position:relative}
.hero-mini{
  display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);padding:9px 18px;border-radius:99px;
  font-size:12px;letter-spacing:.16em;font-weight:700;margin-bottom:30px;color:#fff
}
.hero-mini::before{content:"📍";font-size:13px}
.hero-catch{
  font-family:"Noto Sans JP","Inter",sans-serif;font-size:60px;font-weight:900;letter-spacing:.05em;
  line-height:1.3;margin-bottom:30px;color:#fff
}
.hero-catch .l1{display:block;font-size:28px;color:var(--yellow);letter-spacing:.12em;margin-bottom:14px;font-weight:800}
.hero-catch em{
  font-style:normal;color:var(--yellow);position:relative;display:inline-block;padding:0 6px
}
.hero-catch em::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;
  background:rgba(250,218,36,.2);border-radius:8px;z-index:-1
}
.hero-sub{
  font-size:15px;line-height:2;opacity:.92;max-width:480px;margin-bottom:22px;font-weight:500;color:#fff
}

/* v228 :: アクション群をコンパクトに（ボタンを上に、スライダーとの隙間も詰める） */
.hero-actions{
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;
  margin-bottom:20px
}

/* v229 :: モバイル hero-text と hero-stage の縦gap を詰める（既存@mediaへの上書き） */
@media(max-width:1170px){
  .hero-stage{margin-top:12px !important}
}
@media(max-width:900px){
  .hero-inner{gap:10px !important;padding-bottom:20px !important}
  .hero-sub{margin-bottom:14px !important}
  .hero-actions{margin-bottom:8px !important}
}
@media(max-width:700px){
  .hero-inner{gap:8px !important;padding-bottom:16px !important}
  .hero-sub{margin-bottom:12px !important}
  .hero-actions{margin-bottom:6px !important}
}

/* v63：岡山県倉敷市を中心に活動中 → プレーンテキスト化 */
.hero-area{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:rgba(255,255,255,.88);
  padding:0;border-radius:0;
  font-weight:700;font-size:13px;letter-spacing:.06em;
  box-shadow:none;border:none;
  position:relative
}
.hero-area::before{
  content:"";display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD400'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0
}
.hero-area:hover{transform:none;box-shadow:none}

/* v63：無料お見積もりはこちら → プライマリボタン化（赤） */
.hero-link{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;
  padding:14px 28px;border-radius:99px;
  font-weight:900;font-size:13.5px;letter-spacing:.06em;
  box-shadow:0 6px 0 var(--red-deep);
  border:none;text-decoration:none;transition:.25s;
  border-bottom:none;padding-bottom:14px
}
.hero-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 0 var(--red-deep);
  background:#fff;color:var(--red)
}
.hero-link::after{content:"→";font-size:15px;font-weight:900;transition:transform .25s}
.hero-link:hover::after{transform:translateX(4px)}

/* 右：写真ステージ */
.hero-stage{
  position:relative;height:560px;
  display:flex;align-items:center;justify-content:center
}

/* メイン写真：余裕のある角丸+柔らかい影 */
.hero-photo{
  position:relative;width:90%;height:100%;border-radius:32px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 8px rgba(255,255,255,.06)
}
.hero-photo img{width:100%;height:100%;object-fit:cover;transition:1s}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(31,47,77,.55) 100%)}

/* 写真内ラベル */
.hero-photo .badge{
  position:absolute;left:24px;top:24px;background:#fff;color:var(--navy);
  padding:8px 14px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);z-index:5
}
.hero-photo .badge::before{content:"";width:8px;height:8px;background:var(--red);border-radius:50%}
.hero-photo .label{
  position:absolute;left:30px;bottom:28px;color:#fff;z-index:5
}
.hero-photo .label .num{font-family:"Montserrat";font-size:13px;letter-spacing:.2em;font-weight:700;color:var(--yellow)}
.hero-photo .label .ttl{font-size:18px;font-weight:900;letter-spacing:.04em;margin-top:4px;font-family:"Noto Sans JP","Inter",sans-serif}

/* ==== CAMPAIGN TAG（上品な縦リボンタグ） ==== */
.hero-stamp{
  position:absolute;right:20px;top:-10px;z-index:8;
  transform:rotate(6deg);transform-origin:top center;
  animation:swing 5s ease-in-out infinite;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.22))
}
/* 吊り紐 */
.hero-stamp::before{
  content:"";position:absolute;left:50%;top:-34px;width:1px;height:34px;
  background:linear-gradient(to bottom,transparent 0,rgba(255,255,255,.8) 20%,rgba(255,255,255,.8) 100%);
  transform:translateX(-.5px)
}
/* 紐の留め金 */
.hero-stamp::after{
  content:"";position:absolute;left:50%;top:-38px;width:10px;height:10px;
  background:#fff;border:1.5px solid var(--navy);border-radius:50%;transform:translateX(-50%);
  box-shadow:0 2px 4px rgba(0,0,0,.15)
}
.hero-stamp .tag{
  position:relative;width:112px;padding:28px 14px 22px;
  background:#FBF8EF;color:var(--navy);text-align:center;
  /* 上部は丸く・下部はタグ風に切り欠き */
  clip-path:polygon(0 14px,50% 0,100% 14px,100% 100%,50% calc(100% - 14px),0 100%);
  border-radius:0
}
/* 紐を通す穴 */
.hero-stamp .tag::before{
  content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--navy);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)
}
/* 細い内側フレーム */
.hero-stamp .tag::after{
  content:"";position:absolute;left:8px;right:8px;top:24px;bottom:20px;
  border:1px solid rgba(31,58,107,.18);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 10px),0 100%)
}
.hero-stamp .cat{
  display:block;font-family:"Montserrat","Inter";font-size:9px;font-weight:700;
  letter-spacing:.22em;color:var(--red);margin:14px 0 10px
}
.hero-stamp .cat::before,.hero-stamp .cat::after{
  content:"";display:inline-block;width:10px;height:1px;background:var(--red);
  vertical-align:middle;margin:0 6px 2px
}
.hero-stamp .ttl{
  display:block;font-family:"Noto Sans JP","Inter",sans-serif;font-weight:900;
  font-size:15px;letter-spacing:.08em;line-height:1.35;color:var(--navy);margin:2px 0
}
.hero-stamp .yr{
  display:block;font-family:"Roboto Condensed","Montserrat";font-size:18px;font-weight:900;
  color:var(--yellow-deep);letter-spacing:.04em;margin-top:6px;line-height:1
}
.hero-stamp .yr small{
  display:block;font-family:"Montserrat";font-size:8px;font-weight:700;
  letter-spacing:.3em;color:var(--muted);margin-top:3px
}

@keyframes swing{
  0%,100%{transform:rotate(6deg)}
  50%{transform:rotate(2deg)}
}

/* 装飾円バッジ：53年（小さく・赤×黄でぱきっと） */
.hero-stamp-2{
  position:absolute;left:-22px;bottom:30px;width:108px;height:108px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:"Noto Sans JP","Inter",sans-serif;font-weight:900;font-size:10px;line-height:1.3;
  box-shadow:0 12px 26px rgba(230,0,18,.45);z-index:8;animation:floatY 4s ease-in-out infinite .8s;
  transform:rotate(8deg);border:4px solid var(--yellow)
}
.hero-stamp-2 .since{font-family:"Montserrat";font-size:8px;color:var(--yellow);font-weight:800;letter-spacing:.2em;display:block}
.hero-stamp-2 b{font-family:"Roboto Condensed";font-size:34px;color:#fff;letter-spacing:0;display:block;line-height:1;margin-top:2px}
.hero-stamp-2 b small{font-size:12px;color:var(--yellow);font-weight:800;margin-left:1px}
.hero-stamp-2 span{font-size:9px;color:#fff;font-weight:800;margin-top:3px;letter-spacing:.06em}

/* 写真サムネイルナビ */
.hero-thumbs{
  position:absolute;right:30px;bottom:30px;display:flex;gap:10px;z-index:6
}
.hero-thumbs .th{
  width:60px;height:42px;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.4);
  cursor:pointer;transition:.3s;background:#999
}
.hero-thumbs .th.active{border-color:var(--yellow);transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.hero-thumbs .th img{width:100%;height:100%;object-fit:cover}

/* 下部：装飾線 */
.hero-bottom-deco{
  position:absolute;left:0;right:0;bottom:0;height:32px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'><path fill='%23FBF8EF' d='M0,16 C240,32 480,0 720,16 C960,32 1200,0 1440,16 L1440,32 L0,32 Z'/></svg>") center/cover no-repeat
}

@keyframes floatY{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* TRUST BAR（v4：上品＆カラフル／FV被り解消） */
.trust-wrap{position:relative;max-width:1240px;margin:-66px auto 0;padding:0 24px;z-index:20}
.trust-bar{
  position:relative;background:#fff;padding:28px 36px;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  border-radius:24px;
  box-shadow:0 30px 60px -10px rgba(31,47,77,.18),0 0 0 1px rgba(31,47,77,.04);
  overflow:hidden
}
.trust-bar::before{
  content:"";position:absolute;left:0;top:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--red) 0 25%,var(--yellow) 25% 50%,var(--green) 50% 75%,var(--blue) 75% 100%)
}
.trust-bar .item{display:flex;align-items:center;gap:16px;position:relative;padding:6px 18px}
.trust-bar .item:not(:last-child)::after{content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.trust-bar .ico{
  width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;flex-shrink:0;
  box-shadow:0 8px 16px rgba(0,0,0,.08)
}
.trust-bar .item:nth-child(1) .ico{background:var(--red)}
.trust-bar .item:nth-child(2) .ico{background:var(--yellow);color:var(--navy)}
.trust-bar .item:nth-child(3) .ico{background:var(--green)}
.trust-bar .item:nth-child(4) .ico{background:var(--blue)}
.trust-bar .num{font-family:"Roboto Condensed","Montserrat";font-size:36px;font-weight:900;color:var(--navy);line-height:1;letter-spacing:.02em;display:block}
.trust-bar .num small{font-size:14px;color:var(--red);font-weight:800;margin-left:3px}
.trust-bar .lbl{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.05em;display:block;margin-top:6px}
.trust-bar .lbl b{display:block;color:var(--text);font-size:13px;letter-spacing:.05em;margin-top:1px;font-weight:800}

/* =========================================
   共通セクション
   ========================================= */
.section{position:relative;padding:90px 0}
.section.tight{padding:64px 0}
.section-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.section-head{text-align:center;margin-bottom:36px}
.section-en{display:inline-flex;align-items:center;gap:14px;font-family:"Montserrat";font-size:12px;letter-spacing:.3em;color:var(--yellow-deep);font-weight:800;margin-bottom:14px}
.section-en::before,.section-en::after{content:"";display:inline-block;width:24px;height:1px;background:var(--yellow-deep)}
.section-title{font-family:"Noto Sans JP","Inter",sans-serif;font-size:28px;font-weight:900;letter-spacing:.06em;line-height:1.55;color:var(--navy)}
.section-title em{font-style:normal;color:var(--red);position:relative;padding:0 4px;display:inline-block}
.section-title em::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--yellow);opacity:.45;z-index:-1;border-radius:4px}

/* =========================================
   サービスカテゴリ
   ========================================= */
.service-section{
  background:#fff;border-radius:0 0 60px 60px;margin-top:-1px;
  padding:90px 0 70px;position:relative
}
/* サービスカテゴリー（従来サイト style.css をそのまま移植） */
.service-categories{display:flex;justify-content:center;gap:3%;padding:40px 0 60px;}
.service-item{position:relative;width:18%;background:#fff;border:3px solid;border-radius:16px;padding:20px 20px 40px;text-align:center;transition:.3s}
.service-item a{display:block}
.service-item .icon{width:70%;aspect-ratio:1/1;margin:0 auto 10px;background:#f3e6c7;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s}
.service-item .icon img{width:70%;height:auto}
.service-item h3{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:.1em;transition:.3s;}
.service-item p{font-size:13px;color:#333;transition:.3s;}
.card-btn{position:absolute;left:50%;bottom:-2.5vw;transform:translateX(-50%);width:clamp(48px,5vw,82px);height:clamp(48px,5vw,82px);border-radius:50%;background:#f5f5f5;border:clamp(4px,0.6vw,8px) solid #e0e0e0;display:flex;align-items:center;justify-content:center;box-shadow:none;}
.card-btn:hover{background: #fff;}
.card-btn .arrow::after{content:"→";display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#201e1e;font-size:18px;margin-left:auto;position:relative;z-index:2;transition:color .3s ease}
.card-btn:hover .arrow { transform:translateX(6px); }
.card-btn:hover .arrow::after { color:#FADA24; }
.color-red{border-color: #e60012;}
.color-yellow{border-color:#f5c400;}
.color-green{border-color:#2fb44a;}
.color-blue{border-color:#00a0e9;}
.color-pink{border-color:#ff5ca8;}
.color-red h3{color:#e60012;}
.color-yellow h3{color:#f5c400;}
.color-green h3{color:#2fb44a;}
.color-blue h3{color:#00a0e9;}
.color-pink h3{color:#ff5ca8;}
.color-red:hover{background:#e60012;}
.color-yellow:hover{background:#f5c400;}
.color-green:hover{background:#2fb44a;}
.color-blue:hover{background:#00a0e9;}
.color-pink:hover{background:#ff5ca8;}
.service-item:hover h3{color:#fff;}
.service-item:hover p{color:#fff;}
.service-item:hover .icon{background:#fff;}

/* v11：worry-btn と同じ意匠（番号丸＋塗りつぶしホバー）に統一 */
.service-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:40px auto 0;padding:0}
.service-buttons .svc-btn{
  display:flex;align-items:center;gap:12px;padding:18px 22px;background:#fff;
  border:2px solid var(--navy);border-radius:14px;font-weight:800;font-size:14px;color:var(--text);
  text-decoration:none;transition:.3s;position:relative;overflow:hidden
}
.service-buttons .svc-btn::after{content:"→";margin-left:auto;font-size:18px;color:var(--navy);transition:.3s;position:relative;z-index:1}
.service-buttons .svc-btn::before{content:"";position:absolute;inset:0;background:var(--navy);transform:translateX(-101%);transition:.4s;z-index:0}
.service-buttons .svc-btn .lbl{position:relative;z-index:1}
.service-buttons .svc-btn:hover{color:#fff}
.service-buttons .svc-btn:hover::before{transform:translateX(0)}
.service-buttons .svc-btn:hover::after{color:var(--yellow)}
.service-buttons .svc-btn .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--yellow);color:var(--navy);border-radius:50%;font-family:"Montserrat";font-weight:900;font-size:13px;position:relative;z-index:1;flex-shrink:0;letter-spacing:.02em}

/* About */
.about-block{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;margin-top:70px;position:relative}
.about-text h2{font-family:"Noto Sans JP","Inter",sans-serif;font-size:26px;font-weight:900;color:var(--navy);letter-spacing:.06em;line-height:1.6;margin-bottom:20px}
.about-text h2 .marker{background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 4px}
.about-text p{font-size:16px;line-height:2.1;color:var(--text);font-weight:500}
.about-kpi{display:flex;gap:14px;margin-top:30px;padding-bottom:8px}
.about-kpi .kpi{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 14px;text-align:center;transition:.3s}
.about-kpi .kpi:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.06);border-color:var(--yellow)}
.about-kpi .kpi b{display:block;font-family:"Roboto Condensed";font-size:34px;font-weight:900;color:var(--navy);line-height:1}
.about-kpi .kpi b small{font-size:14px;color:var(--red);margin-left:2px}
.about-kpi .kpi span{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-top:6px;letter-spacing:.05em}

.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:8px}
.about-cards .ac{position:relative;border-radius:24px;overflow:hidden;height:200px;border:5px solid var(--navy);transition:.3s}
.about-cards .ac:hover{border-color:var(--yellow);transform:translateY(-6px)}
.about-cards .ac img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.about-cards .ac span{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-weight:900;font-size:18px;letter-spacing:.1em;font-family:"Noto Sans JP","Inter",sans-serif}
.about-cards .ac.wide{grid-column:1/3;height:200px}

/* =========================================
   見積りフォーム
   ========================================= */
/* v230 :: QUICK ESTIMATE フォーム全体をコンパクトに
 * v232 :: 送信ボタン下の余白を大きく確保（次セクションと重ならないよう） */
.estimate{background:var(--navy);color:#fff;padding:40px 0 80px;position:relative;overflow:hidden}
@media(max-width:700px){
  .estimate{padding-bottom:64px !important}
}
.estimate::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px}
.estimate-inner{position:relative;max-width:1100px;margin:0 auto;padding:0 20px}
.estimate-head{text-align:center;margin-bottom:18px}
.estimate-en{font-family:"Montserrat";font-size:12px;letter-spacing:.3em;color:var(--yellow);font-weight:800}
.estimate-title{font-family:"Noto Sans JP","Inter",sans-serif;font-size:24px;font-weight:900;letter-spacing:.06em;margin-top:8px;line-height:1.45}
.estimate-title big{font-family:"Montserrat";color:var(--yellow);font-size:36px;margin:0 4px;font-weight:900}
.estimate-title small{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.78);font-weight:500;letter-spacing:.04em}
.estimate-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:22px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:22px}
.form-col label.l{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;margin-bottom:6px;letter-spacing:.06em}
.form-col label.l .req{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.05em}
.form-col input{width:100%;height:46px;border-radius:10px;border:none;background:#fff;padding:0 16px;font-size:14px;color:var(--text);font-weight:600;margin-bottom:14px;font-family:inherit}
.checks{background:#fff;border-radius:12px;padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.checks label{
  display:grid;grid-template-columns:20px 1fr;align-items:center;gap:10px;
  color:var(--text);font-size:13px;font-weight:700;cursor:pointer;
  line-height:1.4;min-height:24px
}
.checks input[type=checkbox]{
  width:20px;height:20px;accent-color:var(--navy);margin:0;flex-shrink:0;
  display:block
}
.estimate-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:18px auto 0;background:var(--yellow);color:var(--navy);
  padding:16px 44px;border:none;border-radius:99px;font-weight:900;font-size:15px;letter-spacing:.08em;
  box-shadow:0 6px 0 var(--yellow-deep);cursor:pointer;transition:.2s;font-family:inherit
}
.estimate-btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--yellow-deep)}

/* =========================================
   お悩み
   ========================================= */
.worry{background:var(--cream);padding:80px 0 80px;position:relative;border-radius:60px 60px 0 0;margin-top:-40px}
.worry-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start;max-width:1180px;margin:0 auto;padding:0 24px}
.worry-box{
  background:var(--yellow);border-radius:28px;padding:36px 32px;position:relative;
  box-shadow:8px 8px 0 var(--navy)
}
.worry-box .tag{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;padding:6px 14px;border-radius:99px;margin-bottom:18px}
.worry-box h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:18px;font-weight:900;color:var(--navy);line-height:1.7;letter-spacing:.04em;padding-bottom:16px;margin-bottom:16px;border-bottom:2px dashed rgba(47,67,105,.3)}
.worry-box ul li{display:flex;gap:14px;margin-bottom:14px;font-size:15px;font-weight:800;color:var(--text);align-items:flex-start;line-height:1.6}
.worry-box ul li::before{content:"✓";flex:0 0 24px;height:24px;background:var(--navy);color:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;margin-top:2px}

.worry-right p{font-size:16px;line-height:2;color:var(--text);font-weight:500;margin-bottom:18px}
.worry-right .strong{font-weight:900;color:var(--navy);background:linear-gradient(transparent 65%,#fff7c2 65%);padding:0 6px}
.worry-buttons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;padding-bottom:8px}
.worry-btn{
  display:flex;align-items:center;gap:12px;padding:18px 22px;background:#fff;
  border:2px solid var(--navy);border-radius:14px;font-weight:800;font-size:14px;color:var(--text);
  transition:.3s;position:relative;overflow:hidden
}
.worry-btn::after{content:"→";margin-left:auto;font-size:18px;color:var(--navy);transition:.3s;position:relative;z-index:1}
.worry-btn::before{content:"";position:absolute;inset:0;background:var(--navy);transform:translateX(-101%);transition:.4s;z-index:0}
.worry-btn span:not(.num){position:relative;z-index:1}
.worry-btn:hover{color:#fff}
.worry-btn:hover::before{transform:translateX(0)}
.worry-btn:hover::after{color:var(--yellow)}
.worry-btn .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--yellow);color:var(--navy);border-radius:50%;font-family:"Montserrat";font-weight:900;font-size:13px;position:relative;z-index:1;flex-shrink:0}

/* =========================================
   選ばれる理由
   ========================================= */
/* v231 :: reason セクションをコンパクトに（特にモバイル） */
.reason{position:relative;background:var(--navy);color:#fff;padding:0 0 40px;overflow:hidden}
@media(max-width:700px){
  .reason{padding-bottom:24px !important}
  .reason-head{padding:20px 0 0 !important}
  .reason-head h2{font-size:22px !important;line-height:1.4 !important;margin-top:6px !important}
  .reason-grid{margin-top:16px !important;gap:14px !important;padding:0 18px !important}
  .reason-text .step{padding:5px 12px !important;font-size:10px !important;margin-bottom:8px !important}
  .reason-text .step b{font-size:13px !important}
  .reason-text h3{font-size:19px !important;line-height:1.4 !important;margin-bottom:10px !important}
  .reason-text p{font-size:13.5px !important;line-height:1.85 !important}
  .reason-img{aspect-ratio:16/10 !important;border-radius:16px !important;margin-top:6px !important}
  .reason-bars{margin:14px 0 8px !important}
  .reason-nav{margin-top:8px !important}
}
.reason-head{padding:36px 0 0px;text-align:center;position:relative;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px}
.reason-head .section-en{color:var(--yellow)}
.reason-head .section-en::before,.reason-head .section-en::after{background:var(--yellow)}
.reason-head h2{font-family:"Noto Sans JP","Inter",sans-serif;font-size:28px;font-weight:900;color:#fff;letter-spacing:.08em;line-height:1.55}
.reason-head h2 em{font-style:normal;color:var(--yellow)}

.reason-grid{display:grid;grid-template-columns:42% 58%;gap:60px;max-width:1200px;margin:50px auto 0;padding:0 24px;align-items:start;position:relative}
.reason-bignum{position:absolute;left:30px;top:-100px;font-family:"Montserrat";font-size:340px;font-weight:900;color:rgba(255,255,255,.06);line-height:.8;letter-spacing:-.03em;pointer-events:none}

.reason-text{position:relative;z-index:2}
.reason-text .step{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--navy);padding:8px 16px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.1em;margin-bottom:20px}
.reason-text .step b{font-family:"Montserrat";font-size:16px}
.reason-text h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:24px;font-weight:900;color:#fff;letter-spacing:.06em;line-height:1.55;margin-bottom:20px}
.reason-text p{font-size:15px;line-height:2.1;color:rgba(255,255,255,.85);font-weight:400}

.reason-img{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;background:#666}
.reason-img img{width:100%;height:100%;object-fit:cover}
.reason-img-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;z-index:1}
.reason-img-slider .slide.active{opacity:1;z-index:2}
.reason-img-slider .slide img{width:100%;height:100%;object-fit:cover;display:block}
.reason-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,47,77,.5),transparent 50%);z-index:3;pointer-events:none}

/* v193 :: バー幅は完全に JS 制御。CSSの width 指定は全削除 */
.reason-bars{display:flex;gap:0;margin:30px 0 18px}
.reason-bars .b{flex:1;height:3px;background:rgba(255,255,255,.18);border-radius:0;overflow:hidden;position:relative}
.reason-bars .b:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
.reason-bars .b:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px}
.reason-bars .b span{display:block;height:100%;width:0;background:var(--yellow);border-radius:0}

.reason-nav{display:flex;gap:0;margin-top:14px}
.reason-nav .item{flex:1;border-top:1px solid rgba(255,255,255,.18);padding:18px 14px;cursor:pointer;transition:.3s;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.reason-nav .item:hover{background:rgba(255,255,255,.04)}
.reason-nav .item.active{border-top-color:var(--yellow);background:rgba(250,218,36,.05)}
.reason-nav .num{font-family:"Montserrat";font-size:20px;font-weight:900;color:rgba(255,255,255,.45);letter-spacing:.04em}
.reason-nav .item.active .num{color:var(--yellow)}
.reason-nav .ttl{font-size:11px;font-weight:800;color:rgba(255,255,255,.85);letter-spacing:.04em;line-height:1.5}

/* =========================================
   施工実績（既存JSの動きを引き継ぎ）
   ========================================= */
.works-section{padding:80px 0 70px;background:var(--cream);position:relative;width:100%;overflow:hidden}
.works-section .section-head{position:relative;z-index:2}

.works-grid{
  margin:40px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  list-style:none;padding:0;width:90%;max-width:1200px
}
.work-item{list-style:none;width:100%;margin:0 auto}

/* カード本体（元デザイン踏襲：枠線でグリッド表現） */
.work-card{
  display:block;border-right:2px solid #353535;border-bottom:2px solid #353535;
  text-decoration:none;position:relative;overflow:hidden;background:#fff;
  transition:.4s;padding:24px;text-align:center;width:100%
}
.work-item:nth-child(-n+4) .work-card{border-top:2px solid #353535}
.work-item:nth-child(1) .work-card,.work-item:nth-child(5) .work-card{border-left:2px solid #353535}

.work-cat{font-size:14px;margin-bottom:20px;font-weight:800;letter-spacing:.04em;font-family:"Noto Sans JP","Inter",sans-serif}
.work-name{font-size:14px;margin-top:20px;font-weight:800;letter-spacing:.04em;font-family:"Noto Sans JP","Inter",sans-serif}
.work-image{width:100%;margin:0 auto;border-radius:16px;overflow:hidden;transition:border-radius .6s ease;aspect-ratio:1/1}
.work-image img{width:100%;height:100%;object-fit:cover}

/* VIEW MORE 円形回転テキスト（元の動き） */
.work-more{
  position:absolute;right:18px;bottom:18px;width:80px;height:80px;
  opacity:0;transition:.4s;display:flex;align-items:center;justify-content:center;pointer-events:none
}
.work-card:hover .work-more{opacity:1}
.circle-text{width:100%;height:100%;animation:rotateCircle 10s linear infinite}
.circle-text text{fill:#353535;font-family:"Montserrat";font-weight:800}
.work-card:hover .circle-text text{fill:#fff}
@keyframes rotateCircle{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ホバー時の塗りつぶし＋色変化（元の動き） */
.work-card:hover{color:#fff}
.work-item:nth-child(1) .work-card:hover,.work-item:nth-child(8) .work-card:hover{background:var(--red)}
.work-item:nth-child(2) .work-card:hover,.work-item:nth-child(7) .work-card:hover{background:#f3c316}
.work-item:nth-child(3) .work-card:hover,.work-item:nth-child(6) .work-card:hover{background:var(--green)}
.work-item:nth-child(4) .work-card:hover,.work-item:nth-child(5) .work-card:hover{background:var(--blue)}

/* blob 画像変形（元の動き） */
.work-card:hover .work-image{animation:blob 2.4s ease infinite}
@keyframes blob{
  0%{border-radius:75% 25% 60% 40% / 35% 65% 30% 70%}
  25%{border-radius:30% 70% 25% 75% / 70% 30% 65% 35%}
  50%{border-radius:65% 35% 80% 20% / 40% 60% 20% 80%}
  75%{border-radius:20% 80% 35% 65% / 75% 25% 55% 45%}
  100%{border-radius:75% 25% 60% 40% / 35% 65% 30% 70%}
}

.works-bottom{max-width:1200px;margin:40px auto 0;padding:0 20px;display:flex;justify-content:flex-end;align-items:center;gap:20px}
.works-more-btn{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  color:#353535;font-weight:900;font-size:16px;font-family:"Noto Sans JP","Inter",sans-serif;letter-spacing:.06em;
  transition:.3s
}
.works-more-btn::after{
  content:"→";display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:#353535;border-radius:50%;color:#fff;font-size:18px;transition:.3s
}
.works-more-btn:hover{transform:translateX(6px)}
.works-more-btn:hover::after{background:var(--yellow);color:var(--navy)}

/* =========================================
   メニュー
   ========================================= */
.menu-sec{background:#fff;padding:80px 0;position:relative}
.menu-block{margin-bottom:48px}
.menu-block .h{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.menu-block .h .badge{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;padding:7px 14px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.08em}
.menu-block .h .badge.yellow{background:var(--yellow);color:var(--navy)}
.menu-block .h h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:18px;font-weight:900;color:var(--navy);letter-spacing:.06em}
.menu-block .h .line{flex:1;height:1px;background:var(--line)}

.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:14px 0 24px}
.menu-card{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  display:flex;flex-direction:column;position:relative
  /* overflow:hiddenを外しシャドウ表示崩れを修正 */
}
.menu-card:hover{
  border-color:var(--navy);transform:translateY(-6px);
  box-shadow:0 18px 36px -6px rgba(31,47,77,.18)
}
.menu-card .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eee;border-radius:16px 16px 0 0}
.menu-card .pic img{width:100%;height:100%;object-fit:cover;transition:.5s}
.menu-card:hover .pic img{transform:scale(1.05)}
.menu-card .pic .lbl{position:absolute;left:0;bottom:0;background:#235899;color:#fff;padding:8px 12px;font-size:10px;font-weight:900;letter-spacing:.05em;font-family:"Noto Sans JP","Inter",sans-serif}
.menu-card .pic .lbl.yellow{background:var(--yellow);color:var(--navy)}
.menu-card .body{padding:16px 16px 20px}
.menu-card .body .type{font-size:10px;font-weight:700;color:var(--muted);margin-bottom:4px}
.menu-card .body .product{font-family:"Noto Sans JP","Inter",sans-serif;font-size:13px;font-weight:900;color:var(--navy);letter-spacing:.04em;line-height:1.55;margin-bottom:12px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--cream);padding:10px 12px;border-radius:10px}
.price-row .badge{background:var(--red);color:#fff;font-size:9px;font-weight:800;padding:3px 7px;border-radius:3px;letter-spacing:.05em}
.price-row .price{font-family:"Roboto Condensed","Montserrat";font-size:22px;font-weight:900;color:var(--navy);line-height:1}
.price-row .price small{font-size:10px;color:var(--text);font-weight:700;margin-left:2px}
.price-row .price tiny{font-size:9px;color:var(--muted);font-weight:700;margin-left:2px}
.menu-card .note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.55}

/* =========================================
   新着情報
   ========================================= */
.news{background:var(--cream);padding:80px 0;position:relative}
.news-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;padding:8px 0}
.news-card{background:#fff;border-radius:18px;overflow:hidden;transition:.3s;cursor:pointer;border:1.5px solid var(--line)}
.news-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.08);border-color:var(--yellow)}
.news-card .pic{aspect-ratio:16/10;overflow:hidden;background:#ddd}
.news-card .pic img{width:100%;height:100%;object-fit:cover;transition:.4s}
.news-card:hover .pic img{transform:scale(1.05)}
.news-card .body{padding:20px}
.news-card .meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.news-card .date{font-family:"Montserrat";font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em}
.news-card .cat{font-size:10px;background:var(--yellow);color:var(--navy);padding:3px 10px;border-radius:99px;font-weight:800}
.news-card h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:14px;font-weight:800;color:var(--text);line-height:1.7;letter-spacing:.04em}
.news-cta{margin-top:32px;text-align:center}
.news-cta a{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-weight:900;letter-spacing:.08em;font-size:14px;border-bottom:2px solid var(--navy);padding-bottom:6px;transition:.3s;font-family:"Noto Sans JP","Inter",sans-serif}
.news-cta a:hover{color:var(--yellow-deep);border-color:var(--yellow-deep)}
.news-cta a::after{content:"→";transition:.3s}
.news-cta a:hover::after{transform:translateX(4px)}

/* =========================================
   QA
   ========================================= */
.qa{background:#fff;padding:80px 0}
.qa-list{max-width:900px;margin:40px auto 0}
.qa-item{border:1.5px solid var(--line);border-radius:18px;margin-bottom:14px;overflow:hidden;transition:.3s;background:#fff}
.qa-item:hover{border-color:var(--navy)}
.qa-q{display:flex;gap:18px;padding:22px 26px;cursor:pointer;align-items:flex-start;user-select:none}
.qa-q .ico{flex:0 0 38px;height:38px;background:var(--yellow);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Montserrat";font-weight:900;font-size:18px}
.qa-q p{flex:1;font-family:"Noto Sans JP","Inter",sans-serif;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:.04em;line-height:1.7;padding-top:6px;margin:0}
.qa-q::after{content:"+";font-size:28px;font-weight:900;color:var(--navy);transition:.3s;align-self:center;line-height:1}
.qa-item.open .qa-q::after{transform:rotate(45deg);color:var(--red)}
.qa-a{
  display:flex;gap:18px;padding:0 26px;align-items:flex-start;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s ease,opacity .25s ease,padding .35s ease
}
.qa-item.open .qa-a{max-height:600px;opacity:1;padding:6px 26px 26px}
.qa-a .ico{flex:0 0 38px;height:38px;background:var(--navy);color:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Montserrat";font-weight:900;font-size:18px}
.qa-a p{flex:1;font-size:14px;color:var(--text);line-height:2;font-weight:500;padding-top:6px;margin:0}

/* =========================================
   お問い合わせ
   ========================================= */
.contact{background:var(--cream);padding:80px 0 70px;position:relative}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:40px;max-width:1180px;margin-left:auto;margin-right:auto;padding:8px 24px}
.contact-card{background:#fff;border-radius:28px;padding:44px;position:relative;transition:.3s}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.contact-card.tel{background:linear-gradient(135deg,#fff 0%,#fff8e1 100%);border:2px solid var(--yellow)}
.contact-card .lbl{display:inline-block;font-family:"Montserrat";font-size:11px;letter-spacing:.2em;color:var(--navy);font-weight:800;background:var(--yellow);padding:6px 14px;border-radius:99px;margin-bottom:20px}
.contact-card.tel .num{font-family:"Roboto Condensed","Montserrat";font-size:54px;font-weight:900;color:var(--navy);letter-spacing:.04em;line-height:1.1}
.contact-card.tel .num small{font-size:18px;color:var(--text);margin-right:8px}
.contact-card.tel .time{font-size:13px;color:var(--muted);font-weight:700;margin-top:10px}
.contact-card .reserve-banner{margin-top:24px;background:var(--navy);border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px}
.contact-card .reserve-banner .ico{width:50px;height:50px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.contact-card .reserve-banner .txt{flex:1;color:#fff;font-weight:800;font-size:13px;letter-spacing:.05em;line-height:1.5;font-family:"Noto Sans JP","Inter",sans-serif}
.contact-card .reserve-banner .txt b{color:var(--yellow);font-size:15px;display:block}

.contact-card.form .h{font-family:"Noto Sans JP","Inter",sans-serif;font-size:22px;font-weight:900;color:var(--navy);letter-spacing:.06em;margin-bottom:20px;line-height:1.5}
.contact-card.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.contact-card.form .row a{display:flex;align-items:center;gap:12px;padding:18px;background:var(--cream);border-radius:14px;font-weight:900;font-size:13px;color:var(--navy);transition:.3s;letter-spacing:.05em;font-family:"Noto Sans JP","Inter",sans-serif}
.contact-card.form .row a .ico{width:40px;height:40px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.contact-card.form .row a:hover{background:var(--navy);color:#fff}
.contact-card.form .row a:hover .ico{background:var(--yellow);color:var(--navy)}
.contact-card.form .big{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--yellow);color:var(--navy);padding:22px 26px;border-radius:99px;font-weight:900;font-size:15px;letter-spacing:.06em;box-shadow:0 6px 0 var(--yellow-deep);transition:.2s;font-family:"Noto Sans JP","Inter",sans-serif}
.contact-card.form .big:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--yellow-deep)}
.contact-card.form .big::after{content:"→";font-size:20px}

/* =========================================
   フッター
   ========================================= */
.footer{background:var(--navy);color:#fff;padding:80px 0 0}
.footer-inner{max-width:1180px;margin:0 auto;padding:0 24px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.18)}
.f-brand .copy{color:var(--yellow);font-size:11px;letter-spacing:.16em;font-weight:800;margin-bottom:8px}
.f-brand .ttl{font-family:"Noto Sans JP","Inter",sans-serif;font-size:32px;font-weight:900;letter-spacing:.18em;margin-bottom:18px}
.f-brand p{font-size:13px;line-height:2;color:rgba(255,255,255,.78)}
.f-col h4{font-family:"Montserrat";font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:18px;color:var(--yellow);display:flex;align-items:center;gap:8px}
.f-col h4::before{content:"";display:inline-block;width:14px;height:1px;background:var(--yellow)}
.f-col ul li{margin-bottom:10px}
.f-col ul li a{font-size:13px;color:rgba(255,255,255,.78);transition:.3s;display:inline-block}
.f-col ul li a:hover{color:var(--yellow);transform:translateX(4px)}
.f-contact .tel{font-family:"Roboto Condensed";font-size:30px;font-weight:900;letter-spacing:.04em;margin-bottom:6px}
.f-contact .time{font-size:11px;color:rgba(255,255,255,.7);margin-bottom:18px}
.f-contact .btn{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);padding:12px 22px;border-radius:99px;font-weight:900;font-size:12px;letter-spacing:.08em;font-family:"Noto Sans JP","Inter",sans-serif}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:11px;color:rgba(255,255,255,.6)}
.footer-bottom .links{display:flex;gap:20px}
.footer-bottom .links a{transition:.3s}
.footer-bottom .links a:hover{color:var(--yellow)}

/* =========================================
   レスポンシブ
   ========================================= */
@media(max-width:1180px){
  .gnav{gap:22px}
  .gnav a{font-size:12px}
  .u-tel .num{font-size:18px}
  .u-tel .meta{font-size:9px}
  .u-btn{padding:10px 18px;font-size:12px}
}
@media(max-width:1170px){
  .header-inner{grid-template-columns:auto 1fr auto auto;height:64px;padding:0 16px;gap:12px}
  .gnav{display:none}
  /* v222 :: utility 内の divider/btn だけ隠す。u-telはPC版と同じ縦2段デザインをそのまま維持 */
  .utility{display:flex !important;gap:12px}
  .utility .u-divider,
  .utility .u-btn{display:none}
  /* u-tel の flex-direction/font-size は base の PC版スタイル（縦積み22px）をそのまま維持するため何も上書きしない */
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;padding:60px 24px 40px}
  .hero-catch{font-size:42px}
  .hero-catch .l1{font-size:22px}
  .hero-stage{height:420px;margin-top:30px}
  .hero-stamp{right:10px;top:4px;transform:rotate(4deg);animation:none}
  .hero-stamp .tag{width:92px;padding:22px 10px 18px}
  .hero-stamp .ttl{font-size:13px}
  .hero-stamp .yr{font-size:15px}
  .hero-stamp-2{width:92px;height:92px;font-size:9px}
  .hero-stamp-2 b{font-size:28px}
  .trust-wrap{margin-top:-30px}
  .trust-bar{grid-template-columns:1fr 1fr;gap:8px 0;padding:24px 18px}
  .trust-bar .item{padding:12px 14px;gap:12px}
  .trust-bar .item:nth-child(2)::after{display:none}
  .trust-bar .item:nth-child(odd)::after{content:"";position:absolute;right:0;top:14px;bottom:14px;width:1px;background:var(--line)}
  .trust-bar .item:nth-child(1),.trust-bar .item:nth-child(2){border-bottom:1px solid var(--line);padding-bottom:18px}
  .trust-bar .item:nth-child(3),.trust-bar .item:nth-child(4){padding-top:18px}
  .trust-bar .ico{width:46px;height:46px;font-size:20px}
  .trust-bar .num{font-size:28px}
  .service-item h3{font-size:12px;margin-bottom:0}
  .service-item p{font-size:8px}
  .service-buttons{grid-template-columns:repeat(2,1fr);gap:12px;max-width:100%;margin:20px auto 0;padding:0}
  .about-block{grid-template-columns:1fr}
  .reason-grid{grid-template-columns:1fr}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .news-list{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .estimate-form{grid-template-columns:1fr}
  .worry-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .u-tel .meta{display:none}
  .u-divider{display:none}
}
/* v9：画面幅700px以下は各種メニューを横スクロール（屋根／外壁どちらも） */
@media(max-width:700px){
  .menu-sec .section-inner{padding-right:0;padding-left:20px}
  .menu-block{margin-bottom:40px}
  .menu-block .h{gap:12px;margin-bottom:14px;padding-right:20px}
  .menu-block .h h3{font-size:16px}
  .menu-block .h .badge{padding:6px 12px;font-size:10px}
  /* grid → 横並び１行スクロール */
  .menu-sec .menu-grid{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:6px 24px 18px;
    margin:0 16px;
    /* スクロールバーを控えめに */
    scrollbar-width:thin;scrollbar-color:rgba(31,58,107,.35) transparent
  }
  .menu-sec .menu-grid::-webkit-scrollbar{height:6px}
  .menu-sec .menu-grid::-webkit-scrollbar-thumb{background:rgba(31,58,107,.35);border-radius:99px}
  .menu-sec .menu-grid::-webkit-scrollbar-track{background:transparent}
  .menu-sec .menu-card{
    flex:0 0 72%;max-width:72%;min-width:220px;
    scroll-snap-align:start
  }
  .menu-sec .menu-card .pic{aspect-ratio:4/3}
  .menu-sec .menu-card .body{padding:14px 14px 18px}
  .menu-sec .menu-card .body .product{font-size:12.5px;margin-bottom:10px}
  .menu-sec .price-row .price{font-size:20px}
  .menu-sec .price-row .price small{font-size:10px}
  /* v147 :: スクロールフェード削除（要望により撤去） */
  .menu-block{position:relative}
  .menu-block::after{ display:none !important; content:none !important; }
}

/* v11：FV（hero）小幅対応 — 破綻箇所を段階的に整理 */
@media(max-width:900px){
  .hero{min-height:auto}
  .hero-inner{padding:50px 22px 30px;gap:28px}
  .hero-catch{font-size:34px;margin-bottom:22px}
  .hero-catch .l1{font-size:18px;margin-bottom:10px}
  .hero-sub{font-size:14px;line-height:1.9;margin-bottom:26px}
  .hero-stage{height:auto;min-height:360px;padding:0 10px}
  .hero-photo{width:100%;height:360px}
  .hero-photo .label{left:20px;bottom:20px}
  .hero-photo .label .ttl{font-size:15px}
  .hero-vertical{display:none}
}
@media(max-width:700px){
  .hero-inner{padding:44px 18px 26px;gap:22px}
  .hero-catch{font-size:28px;line-height:1.35;margin-bottom:18px}
  .hero-catch .l1{font-size:15px;margin-bottom:8px;letter-spacing:.08em}
  .hero-sub{font-size:13px;line-height:1.85;margin-bottom:22px}
  .hero-sub br{display:none}
  .hero-actions{gap:12px}
  .hero-area{padding:0;font-size:12px}
  .hero-link{font-size:12px;padding:12px 22px}
  .hero-stage{min-height:300px;padding:0}
  .hero-photo{width:100%;height:300px;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.32),0 0 0 5px rgba(255,255,255,.05)}
  .hero-photo .badge{left:14px;top:14px;padding:6px 10px;font-size:10px}
  .hero-photo .label{left:16px;bottom:16px}
  .hero-photo .label .num{font-size:11px}
  .hero-photo .label .ttl{font-size:13px;letter-spacing:.02em}
  .hero-thumbs{right:12px;bottom:12px;gap:6px}
  .hero-thumbs .th{width:42px;height:30px;border-radius:6px;border-width:1.5px}
  /* スタンプ類は小幅では邪魔になるので縮小して角へ */
  .hero-stamp{right:6px;top:-4px;transform:rotate(3deg)}
  .hero-stamp .tag{width:70px;padding:18px 8px 14px}
  .hero-stamp .cat{font-size:7px;margin:8px 0 6px;letter-spacing:.16em}
  .hero-stamp .cat::before,.hero-stamp .cat::after{width:6px;margin:0 3px 2px}
  .hero-stamp .ttl{font-size:10px;line-height:1.3}
  .hero-stamp .yr{font-size:11px}
  .hero-stamp-2{width:70px;height:70px;font-size:8px;right:10px;top:-10px}
  .hero-stamp-2 .since{font-size:6px;letter-spacing:.14em}
  .hero-stamp-2 b{font-size:20px}
  .hero-stamp-2 b small{font-size:9px}
  .hero-stamp-2 span{font-size:7px}
  .hero-bottom-deco{height:20px}
}
@media(max-width:460px){
  .hero-inner{padding:38px 14px 22px}
  .hero-catch{font-size:23px}
  .hero-catch .l1{font-size:13px}
  .hero-photo{height:240px;border-radius:18px}
  .hero-thumbs{right:10px;bottom:10px;gap:5px}
  .hero-thumbs .th{width:36px;height:26px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-area{justify-content:center;text-align:center}
  .hero-stamp{right:4px;transform:rotate(2deg)}
  .hero-stamp .tag{width:60px}
  .hero-stamp-2{width:60px;height:60px;right:6px}
  .hero-stamp-2 b{font-size:17px}
}

/* =========================================
   v11：塗装イメージの控えめ背景装飾
   — 各セクションの余白を「筆あと・ペイント滴・ローラー跡」で彩る
   — 主張は弱め（opacity 3〜8%）、コンテンツ可読性を最優先
   ========================================= */
.service-section,.worry,.works-section,.menu-sec,.news,.qa,.contact{isolation:isolate}
.worry{overflow:hidden}
.qa{position:relative;overflow:hidden}
.service-section,.menu-sec,.news,.contact{overflow:hidden}

/* 共通：装飾レイヤーを最下層へ、本文は上に */
.service-section > *,.worry > *,.works-section > *,.menu-sec > *,.news > *,.qa > *,.contact > *{position:relative;z-index:1}

/* 筆あと（大きなブラシスイープ）— 白背景セクション用 */
.service-section::before,.menu-sec::before,.qa::before{
  content:"";position:absolute;right:-80px;top:40px;width:760px;height:280px;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 280'><path d='M0,150 C180,80 360,200 560,130 C680,88 720,160 760,120' stroke='%231F3A6B' stroke-width='4' stroke-linecap='round' fill='none' opacity='0.06'/><path d='M0,172 C160,115 360,210 560,150 C680,115 720,178 760,138' stroke='%231F3A6B' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.05'/><path d='M20,196 C200,150 360,222 540,178 C660,152 720,195 750,168' stroke='%23FFD400' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.35'/></svg>") no-repeat center/contain
}
.menu-sec::before{right:auto;left:-100px;top:60px;transform:scaleX(-1)}
.qa::before{right:-60px;top:20px;width:620px;height:220px;opacity:.9}

/* 筆あと（左下に小さめのもうひとつ）— 反対側への彩り */
.service-section::after,.menu-sec::after{
  content:"";position:absolute;left:-60px;bottom:40px;width:520px;height:200px;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 200'><path d='M0,100 C120,60 280,140 420,90 C480,68 500,110 520,90' stroke='%23E60012' stroke-width='2' stroke-linecap='round' fill='none' opacity='0.08'/><path d='M0,118 C100,88 280,150 420,112 C480,92 500,125 520,108' stroke='%231F3A6B' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='0.05'/></svg>") no-repeat center/contain
}
.menu-sec::after{left:auto;right:-40px;bottom:60px;transform:scaleX(-1)}

/* ローラーで壁を塗ったテクスチャ — クリーム色背景セクション用
   縦長のロール跡（塗りムラ＋エッジ）＋ うっすらしたロール本体の影 */
.worry::before,.news::before,.contact::before{
  content:"";position:absolute;right:0;top:0;width:380px;height:100%;pointer-events:none;z-index:0;
  background:
    /* ローラー塗布の縦長エリア（塗りたて感） */
    linear-gradient(90deg,
      transparent 0,
      rgba(31,58,107,.018) 10%,
      rgba(31,58,107,.030) 30%,
      rgba(31,58,107,.034) 50%,
      rgba(31,58,107,.030) 70%,
      rgba(31,58,107,.018) 90%,
      transparent 100%),
    /* ロール跡の細い縦すじ（テクスチャ感） */
    repeating-linear-gradient(90deg,
      rgba(31,58,107,.045) 0 1px,
      transparent 1px 7px,
      rgba(31,58,107,.025) 7px 8px,
      transparent 8px 18px),
    /* 上端：ローラーの掠れ（薄→濃） */
    linear-gradient(180deg,
      rgba(255,250,235,.85) 0,
      rgba(255,250,235,.4) 30px,
      transparent 90px);
  background-repeat:no-repeat;background-position:right top;
  /* マスクで縦長の塗布形状に整形（ローラー塗布のソフトなエッジ） */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,black 12%,black 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,black 12%,black 88%,transparent 100%)
}
/* 下端のドリップ（少しだけ垂れる） */
.worry::after,.news::after,.contact::after{
  content:"";position:absolute;right:5%;top:0;width:280px;height:auto;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 220'><g opacity='0.10'><path d='M50,0 L52,140 Q50,156 52,168 Q54,156 52,140 L54,0 Z' fill='%231F3A6B'/><path d='M140,0 L142,180 Q140,196 142,208 Q144,196 142,180 L144,0 Z' fill='%231F3A6B'/><path d='M210,0 L212,100 Q210,116 212,128 Q214,116 212,100 L214,0 Z' fill='%231F3A6B'/></g></svg>") no-repeat top right/280px auto;
  height:230px
}
.news::before,.news::after{right:auto;left:0}
.news::before{-webkit-mask-image:linear-gradient(90deg,transparent 0,black 12%,black 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,black 12%,black 88%,transparent 100%)}
.news::after{left:5%;transform:scaleX(-1)}
.contact::before,.contact::after{opacity:.9}

/* ローラー跡（下端の細い縦ストローク）— 任意セクション */
.works-section::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38px;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg, rgba(31,58,107,.07) 0 1px, transparent 1px 22px);
  -webkit-mask-image:linear-gradient(to top, black, transparent);
  mask-image:linear-gradient(to top, black, transparent)
}
.works-section::before{
  content:"";position:absolute;right:-60px;top:30px;width:520px;height:200px;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 200'><path d='M0,110 C140,50 300,160 440,100 C490,78 510,120 520,98' stroke='%23FFD400' stroke-width='3' stroke-linecap='round' fill='none' opacity='0.35'/><path d='M0,130 C120,90 280,170 420,128 C480,108 510,140 520,120' stroke='%231F3A6B' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='0.06'/></svg>") no-repeat center/contain
}

/* 小幅端末では装飾を控えめに（サイズを縮小 or 非表示） */
@media(max-width:900px){
  .service-section::before,.menu-sec::before{width:420px;height:160px;top:20px}
  .service-section::after,.menu-sec::after{width:320px;height:130px;bottom:20px}
  .qa::before{width:380px;height:140px}
  .worry::before,.news::before,.contact::before{width:240px}
  .worry::after,.news::after,.contact::after{width:180px;height:160px;background-size:180px auto}
  .works-section::before{width:340px;height:140px}
}
@media(max-width:700px){
  .service-section::before,.service-section::after,
  .menu-sec::before,.menu-sec::after,
  .qa::before,.works-section::before{display:none}
  .worry::before,.news::before,.contact::before{opacity:.7;width:160px}
  .worry::after,.news::after,.contact::after{opacity:.6;width:120px;height:120px;background-size:120px auto}
}

/* =========================================
   v13：下層ページ（sub-page）共通スタイル
   ========================================= */

/* ページヒーロー（FV代替・タイトル＋パンくず） */
.page-hero{
  position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;padding:35px 0 75px;overflow:hidden;text-align:center
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none
}
.page-hero::after{
  content:"";position:absolute;left:50%;bottom:-80px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(250,218,36,.18),transparent 60%);
  border-radius:50%;filter:blur(20px);transform:translateX(-50%);pointer-events:none
}
.page-hero .page-hero-inner{
  position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px
}
.page-hero .page-en{
  display:inline-flex;align-items:center;gap:14px;font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:13px;letter-spacing:.32em;color:var(--yellow);margin-bottom:10px
}
.page-hero .page-en::before,.page-hero .page-en::after{
  content:"";display:inline-block;width:30px;height:1.5px;background:var(--yellow)
}
.page-hero h1{
  font-family:"Noto Sans JP","Inter",sans-serif;font-size:44px;font-weight:900;
  letter-spacing:.08em;line-height:1.3;color:#fff;margin-bottom:12px
}
.page-hero h1 em{font-style:normal;color:var(--yellow);position:relative;display:inline-block;padding:0 6px}
.page-hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;
  background:rgba(250,218,36,.2);border-radius:8px;z-index:-1
}
.page-hero .page-lead{
  font-size:16px;line-height:2;font-weight:500;color:rgba(255,255,255,.92);
  max-width:760px;margin:0 auto;letter-spacing:.04em
}

/* パンくず */
.breadcrumb{
  background:#fff;padding:14px 0;border-bottom:1px solid var(--line)
}
.breadcrumb ol{
  list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0;
  max-width:1200px;margin:0 auto;padding:0 24px;font-size:12px;color:var(--muted);font-weight:600
}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"/";margin:0 10px;color:var(--line)}
.breadcrumb a{color:var(--navy);text-decoration:none;transition:.2s}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb li[aria-current="page"]{color:var(--text);font-weight:700}

/* サブページコンテンツの共通ラッパー */
.sub-section{position:relative;padding:80px 0;background:#fff;overflow:hidden;isolation:isolate}
.sub-section.cream{background:var(--cream)}
.sub-section.navy{background:var(--navy);color:#fff}
.sub-section .sub-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
.sub-section .sub-head{text-align:center;margin-bottom:50px}

/* 内容カード（汎用） */
.sub-card{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:30px 28px;
  transition:.3s
}
.sub-card:hover{border-color:var(--yellow);box-shadow:0 18px 36px rgba(0,0,0,.06);transform:translateY(-4px)}
.sub-card .num{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:var(--yellow);color:var(--navy);border-radius:50%;
  font-family:"Montserrat";font-weight:900;font-size:16px;margin-bottom:16px
}
.sub-card h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:18px;font-weight:900;color:var(--navy);letter-spacing:.04em;margin-bottom:12px;line-height:1.5}
.sub-card p{font-size:14px;line-height:1.95;color:var(--text);font-weight:500}

/* 2/3/4列グリッド */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* 大きな画像 + 本文の split */
.split-block{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;margin-bottom:60px}
.split-block.reverse{grid-template-columns:1.1fr 1fr}
.split-block.reverse .split-img{order:2}
.split-block .split-img{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#ddd;border:5px solid var(--navy)}
.split-block .split-img img{width:100%;height:100%;object-fit:cover}
.split-block .split-text h3{font-family:"Noto Sans JP","Inter",sans-serif;font-size:22px;font-weight:900;color:var(--navy);letter-spacing:.06em;line-height:1.6;margin-bottom:18px}
.split-block .split-text h3 em{font-style:normal;background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 4px}
.split-block .split-text p{font-size:15px;line-height:2.1;color:var(--text);font-weight:500;margin-bottom:14px}

/* レスポンシブ */
@media(max-width:900px){
  .page-hero{padding:25px 0 60px}
  .page-hero h1{font-size:32px}
  .page-hero .page-lead{font-size:14px}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .split-block,.split-block.reverse{grid-template-columns:1fr;gap:30px}
  .split-block.reverse .split-img{order:0}
}
@media(max-width:600px){
  .page-hero{padding:20px 0 55px}
  .page-hero h1{font-size:24px;letter-spacing:.05em}
  .page-hero .page-en{font-size:11px;letter-spacing:.24em}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .sub-section{padding:60px 0}
}

/* =========================================================
   v14：全ページ背景デザイン強化（ペイント／カラーパレット／壁）
   ========================================================= */

/* --- 1. body 全体に和紙風の塗装テクスチャ ＋ 散りばめたカラードット --- */
body{
  background:
    /* ① ランダムなカラーペイントドット（Y/赤/青/緑/ピンク） */
    radial-gradient(circle at 8% 12%, rgba(255,212,0,.08) 0, rgba(255,212,0,.08) 4px, transparent 4.5px),
    radial-gradient(circle at 92% 18%, rgba(230,0,18,.06) 0, rgba(230,0,18,.06) 5px, transparent 5.5px),
    radial-gradient(circle at 18% 78%, rgba(31,176,76,.05) 0, rgba(31,176,76,.05) 6px, transparent 6.5px),
    radial-gradient(circle at 78% 88%, rgba(0,160,233,.06) 0, rgba(0,160,233,.06) 4px, transparent 4.5px),
    radial-gradient(circle at 50% 45%, rgba(255,61,139,.05) 0, rgba(255,61,139,.05) 5px, transparent 5.5px),
    radial-gradient(circle at 35% 30%, rgba(255,122,0,.05) 0, rgba(255,122,0,.05) 4px, transparent 4.5px),
    /* ② 細かい砂粒テクスチャ（ザラ感） */
    radial-gradient(circle at 25% 25%, rgba(31,58,107,.025) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(31,58,107,.02) 0.5px, transparent 1px),
    /* ③ ベース */
    var(--cream) !important;
  background-size:
    1200px 1200px, 1100px 1100px, 1300px 1300px, 1000px 1000px, 1400px 1400px, 950px 950px,
    18px 18px, 24px 24px,
    auto;
  background-attachment:fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, scroll;
}

/* --- 2. 各セクションに薄い「壁テクスチャ + ペンキ装飾」--- */
.sub-section{position:relative;isolation:isolate}

/* セクション右上の控えめな塗装ローラー帯 */
.sub-section::before{
  content:"";position:absolute;top:0;right:-40px;width:280px;height:100%;
  background:
    repeating-linear-gradient(0deg,
      rgba(31,58,107,.025) 0 2px,
      transparent 2px 14px),
    linear-gradient(135deg, transparent 0, rgba(255,212,0,.04) 50%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, black 20%, black 80%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, black 20%, black 80%, transparent 100%);
  pointer-events:none;z-index:-1
}

/* セクション左下に「色見本のサークル」装飾（パレット） */
.sub-section::after{
  content:"";position:absolute;bottom:30px;left:30px;width:140px;height:140px;
  background:
    radial-gradient(circle at 50% 50%, var(--yellow) 0 18px, transparent 18.5px),
    radial-gradient(circle at 80% 30%, var(--red) 0 14px, transparent 14.5px),
    radial-gradient(circle at 20% 30%, var(--navy) 0 14px, transparent 14.5px),
    radial-gradient(circle at 30% 80%, var(--green) 0 12px, transparent 12.5px),
    radial-gradient(circle at 75% 80%, var(--blue) 0 12px, transparent 12.5px);
  opacity:.07;pointer-events:none;z-index:-1;
  filter:blur(.4px)
}

/* sub-section.cream は左右逆＋色違い */
.sub-section.cream::before{
  left:-40px;right:auto;
  background:
    repeating-linear-gradient(90deg,
      rgba(31,58,107,.03) 0 1px,
      transparent 1px 8px),
    linear-gradient(45deg, rgba(255,122,0,.04) 0, transparent 60%);
  -webkit-mask-image:linear-gradient(0deg, transparent 0, black 15%, black 85%, transparent 100%);
          mask-image:linear-gradient(0deg, transparent 0, black 15%, black 85%, transparent 100%);
}
.sub-section.cream::after{
  left:auto;right:30px;bottom:auto;top:30px;
  background:
    radial-gradient(circle at 50% 50%, var(--pink) 0 16px, transparent 16.5px),
    radial-gradient(circle at 25% 25%, var(--yellow) 0 14px, transparent 14.5px),
    radial-gradient(circle at 75% 25%, var(--blue) 0 14px, transparent 14.5px),
    radial-gradient(circle at 25% 75%, var(--orange) 0 12px, transparent 12.5px),
    radial-gradient(circle at 75% 75%, var(--green) 0 12px, transparent 12.5px);
  opacity:.08;
  transform:rotate(15deg);
}

/* --- 3. ペイント刷毛筋を border として上下に追加 --- */
.sub-section{
  background-image:
    /* 微細な点（壁の質感） */
    radial-gradient(circle at 20% 20%, rgba(31,58,107,.018) 0.6px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(230,0,18,.012) 0.6px, transparent 1px);
  background-size: 14px 14px, 22px 22px;
}
.sub-section.cream{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(31,58,107,.02) 0.6px, transparent 1px),
    radial-gradient(circle at 20% 80%, rgba(245,184,0,.04) 0.6px, transparent 1px);
  background-size: 16px 16px, 28px 28px;
}

/* --- 4. page-hero（下層FV）に塗装ストロークの装飾を追加 --- */
.page-hero{
  background:
    /* 横方向のローラーストローク */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0 1.5px,
      transparent 1.5px 12px),
    /* 黄色の対角ハイライト */
    linear-gradient(135deg,
      rgba(255,212,0,.05) 0%,
      transparent 30%,
      transparent 70%,
      rgba(230,0,18,.04) 100%),
    /* ベースのネイビーグラデ */
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%) !important;
}
.page-hero::before{
  /* 既存のグリッド + パレットドット（右上） */
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(circle at 92% 18%, rgba(255,212,0,.45) 0 9px, transparent 10px),
    radial-gradient(circle at 96% 28%, rgba(230,0,18,.4) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 30%, rgba(0,160,233,.35) 0 7px, transparent 8px) !important;
  background-size: 48px 48px, 48px 48px, auto, auto, auto !important;
}

/* page-hero に下端の波形ペイントドリップ */
.page-hero{position:relative;overflow:visible}
.page-hero .drip-edge{
  position:absolute;left:0;right:0;bottom:-1px;height:40px;pointer-events:none;z-index:3;
  background:
    radial-gradient(circle at 5% 0, var(--cream) 0 18px, transparent 19px),
    radial-gradient(circle at 12% 0, var(--cream) 0 12px, transparent 13px),
    radial-gradient(circle at 22% 0, var(--cream) 0 22px, transparent 23px),
    radial-gradient(circle at 32% 0, var(--cream) 0 14px, transparent 15px),
    radial-gradient(circle at 42% 0, var(--cream) 0 18px, transparent 19px),
    radial-gradient(circle at 52% 0, var(--cream) 0 16px, transparent 17px),
    radial-gradient(circle at 62% 0, var(--cream) 0 20px, transparent 21px),
    radial-gradient(circle at 72% 0, var(--cream) 0 14px, transparent 15px),
    radial-gradient(circle at 82% 0, var(--cream) 0 18px, transparent 19px),
    radial-gradient(circle at 92% 0, var(--cream) 0 12px, transparent 13px),
    linear-gradient(180deg, transparent 0%, var(--cream) 75%, var(--cream) 100%);
}

/* --- 5. sub-card にもさりげなく装飾を追加 --- */
.sub-card{position:relative;overflow:hidden}
.sub-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:80px;height:80px;
  background:radial-gradient(circle, rgba(255,212,0,.08) 0%, transparent 70%);
  border-radius:50%;pointer-events:none;transition:.4s
}
.sub-card:hover::after{transform:scale(1.6);background:radial-gradient(circle, rgba(255,212,0,.15) 0%, transparent 70%)}

/* --- 6. footer にも塗装ハッチ追加 --- */
.footer{position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.015) 0 1px,
      transparent 1px 10px),
    radial-gradient(circle at 90% 20%, rgba(255,212,0,.08) 0%, transparent 30%),
    radial-gradient(circle at 10% 80%, rgba(230,0,18,.05) 0%, transparent 30%);
  pointer-events:none;z-index:0
}
.footer > *{position:relative;z-index:1}

/* --- 7. ヒーロー直下の「カラーストライプ」（5色帯） --- */
.color-stripe{
  height:6px;width:100%;
  background:linear-gradient(90deg,
    var(--red) 0 20%,
    var(--yellow) 20% 40%,
    var(--green) 40% 60%,
    var(--blue) 60% 80%,
    var(--pink) 80% 100%);
  position:relative;z-index:5
}
.color-stripe::after{
  content:"";display:block;height:100%;width:100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.08) 0 1px,
      transparent 1px 28px);
}

/* --- 8. ブレッドクラム背景に紙テクスチャ --- */
.breadcrumb{
  background:
    repeating-linear-gradient(0deg,
      rgba(31,58,107,.02) 0 1px,
      transparent 1px 6px),
    #fff !important;
}

/* --- 9. レスポンシブ：装飾を控えめに --- */
@media(max-width:700px){
  .sub-section::before,.sub-section::after,
  .sub-section.cream::before,.sub-section.cream::after{display:none}
  .sub-card::after{display:none}
  .page-hero .drip-edge{height:24px}
  body{
    background-size:
      800px 800px, 700px 700px, 900px 900px, 600px 600px, 1000px 1000px, 750px 750px,
      14px 14px, 18px 18px, auto;
  }
}

/* =========================================================
   v15：page-hero（FV）を塗装屋らしいオリジナルデザインへ
   ========================================================= */

/* --- 1. page-hero の背景：塗りたて壁＋マスキングテープ＋ローラー筋 --- */
.page-hero{
  position:relative;
  padding:35px 0 80px !important;
  overflow:hidden !important;
  isolation:isolate;
  color:#fff;
  background:
    /* 右上の黄色マスキングテープ斜め */
    linear-gradient(118deg,
      transparent 0,
      transparent 78%,
      rgba(255,212,0,.0) 78%,
      rgba(255,212,0,.22) 79%,
      rgba(255,212,0,.22) 84%,
      rgba(255,212,0,.0) 84.5%,
      transparent 100%),
    /* 左下の赤マスキングテープ斜め */
    linear-gradient(295deg,
      transparent 0,
      transparent 80%,
      rgba(230,0,18,.0) 80%,
      rgba(230,0,18,.18) 81%,
      rgba(230,0,18,.18) 85%,
      rgba(230,0,18,.0) 85.5%,
      transparent 100%),
    /* 横方向の細いローラー筋（壁を塗ったような筋目） */
    repeating-linear-gradient(92deg,
      rgba(255,255,255,.022) 0 1px,
      transparent 1px 7px,
      rgba(255,255,255,.012) 7px 8px,
      transparent 8px 16px),
    /* 大きなブラシ筋（遠方から見た塗りムラ） */
    radial-gradient(ellipse 1100px 280px at 30% 25%, rgba(255,255,255,.05) 0%, transparent 65%),
    radial-gradient(ellipse 900px 240px at 70% 75%, rgba(0,0,0,.18) 0%, transparent 60%),
    /* ベース：上下にやや色味のグラデ（塗装後の壁感） */
    linear-gradient(160deg,
      var(--navy-deep) 0%,
      var(--navy) 45%,
      #1a3260 100%) !important;
  background-size: auto, auto, auto, auto, auto, auto !important;
}

/* グリッド背景は完全に上書きで消す */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    /* 右上：絵の具スプラッタ（小） */
    radial-gradient(circle at 88% 22%, rgba(255,212,0,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 28%, rgba(255,212,0,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 30%, rgba(230,0,18,.45) 0 4px, transparent 5px),
    radial-gradient(circle at 93% 35%, rgba(0,160,233,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 18%, rgba(31,176,76,.35) 0 2px, transparent 3px),
    /* 左下：絵の具スプラッタ */
    radial-gradient(circle at 10% 78%, rgba(255,212,0,.4) 0 3px, transparent 4px),
    radial-gradient(circle at 14% 85%, rgba(230,0,18,.4) 0 4px, transparent 5px),
    radial-gradient(circle at 7% 88%, rgba(0,160,233,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 92%, rgba(255,61,139,.3) 0 3px, transparent 4px) !important;
  background-size: auto !important;
  pointer-events:none !important;
}

/* 縦書きの大文字（FV左端） */
.page-hero::after{
  content:"PAINT・ROLLER・BRUSH";
  position:absolute !important;
  left:18px !important; top:50% !important; bottom:auto !important;
  transform:translateY(-50%) rotate(-90deg) !important;
  transform-origin:left center !important;
  width:auto !important; height:auto !important;
  background:none !important; border-radius:0 !important; filter:none !important;
  font-family:"Montserrat",sans-serif !important;
  font-size:11px !important; font-weight:900 !important;
  letter-spacing:.5em !important;
  color:rgba(255,212,0,.35) !important;
  white-space:nowrap !important;
  z-index:1 !important; opacity:1 !important;
}

/* page-hero-inner を中央に */
.page-hero .page-hero-inner{position:relative;z-index:3}

/* 見出しの装飾を強化（手描き下線） */
.page-hero h1 em{
  position:relative;color:var(--yellow);font-style:normal;display:inline-block;padding:0 10px
}
.page-hero h1 em::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:14px;
  background:rgba(250,218,36,.28);border-radius:8px;z-index:-1;
  transform:rotate(-1.5deg)
}

/* --- 2. FV下端：ペイント刷毛筋でのトランジション（旧drip-edgeを差し替え） --- */
.page-hero .drip-edge{
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:-2px !important;
  height:90px !important;
  background:none !important;
  pointer-events:none; z-index:4;
}
.page-hero .drip-edge::before{
  /* SVG 風の手描きブラシストローク（cream色） */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><defs><filter id='r' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feDisplacementMap in='SourceGraphic' scale='4'/></filter></defs><path d='M0,55 C120,40 280,68 440,52 C620,34 800,72 960,50 C1140,28 1280,68 1440,48 L1440,90 L0,90 Z' fill='%23FBF8EF' filter='url(%23r)'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;background-position:bottom center
}
.page-hero .drip-edge::after{
  /* 黄色の薄いブラシレイヤー（重ね塗り感） */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,68 C140,52 320,82 520,64 C720,46 900,84 1080,62 C1260,40 1380,76 1440,60 L1440,90 L0,90 Z' fill='%23FFD400' fill-opacity='0.18'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;background-position:bottom center;
  mix-blend-mode:screen
}

/* --- 3. color-stripe（5色の帯）を「塗装ペイントチップ」風に再構築 --- */
.color-stripe{
  position:relative;height:auto;background:none !important;
  padding:0 0 0 0;display:block;z-index:5;margin:0
}
.color-stripe::after{display:none !important}
.color-stripe::before{display:none !important}
/* JS側不要。HTML側で構造を作るパターンへ移行するためダミー化 */

/* 新しい paint-tape：FV直下に貼られた色見本テープ */
.paint-tape{
  position:relative;
  background:#fff;
  padding:14px 0 10px;
  border-bottom:1px solid var(--line);
  z-index:5;
  overflow:hidden;
}
.paint-tape::before{
  /* 上端の薄いシャドウ（テープが浮いてる感） */
  content:"";position:absolute;top:-6px;left:0;right:0;height:6px;
  background:linear-gradient(180deg, rgba(0,0,0,.08), transparent);pointer-events:none
}
.paint-tape-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.paint-tape .pt-label{
  font-family:"Montserrat",sans-serif;font-weight:900;font-size:11px;
  letter-spacing:.24em;color:var(--navy);
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0
}
.paint-tape .pt-label::before{
  content:"";display:inline-block;width:14px;height:14px;
  background:var(--yellow);
  border-radius:3px;
  box-shadow:0 0 0 1.5px var(--navy)
}
.paint-tape .pt-chips{
  display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap
}
.paint-tape .pt-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 6px;
  background:#fff;border:1.2px solid var(--line);border-radius:4px;
  font-family:"Inter","Montserrat",sans-serif;font-weight:700;font-size:10px;
  color:var(--text);letter-spacing:.06em;
  transition:.2s
}
.paint-tape .pt-chip:hover{transform:translateY(-1px);border-color:var(--navy)}
.paint-tape .pt-chip .swatch{
  width:14px;height:14px;border-radius:2px;display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)
}
@media(max-width:700px){
  .paint-tape .pt-label{font-size:10px;letter-spacing:.18em}
  .paint-tape .pt-chip{font-size:9px;padding:4px 8px 4px 5px}
  .paint-tape .pt-chip .swatch{width:12px;height:12px}
}

/* --- 4. ハンバーガーメニュー閉じるボタン --- */
.mobile-menu .mm-close{
  position:absolute;top:14px;right:14px;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:0;
  z-index:10;
  transition:.2s;
  box-shadow:0 4px 12px rgba(0,0,0,.18)
}
.mobile-menu .mm-close::before,
.mobile-menu .mm-close::after{
  content:"";position:absolute;
  width:18px;height:2.5px;background:#fff;border-radius:2px
}
.mobile-menu .mm-close::before{transform:rotate(45deg)}
.mobile-menu .mm-close::after{transform:rotate(-45deg)}
.mobile-menu .mm-close:hover{background:var(--red);transform:rotate(90deg)}

/* --- 5. レスポンシブ --- */
@media(max-width:900px){
  .page-hero{padding:25px 0 65px !important}
  .page-hero::after{font-size:9px;left:10px}
  .paint-tape{padding:10px 0 8px}
}
@media(max-width:600px){
  .page-hero{padding:20px 0 60px !important}
  .page-hero::after{display:none !important}
  .page-hero .drip-edge{height:60px !important}
}

/* =========================================================
   v16：施工事例詳細（WordPress投稿テンプレ） + カラーパレット
   ========================================================= */

/* === WP編集ガイドパネル（開発時のみ表示） === */
.wp-guide{
  background:#fff7d6;border:2px dashed var(--yellow-deep);border-radius:14px;
  padding:18px 22px;margin-bottom:30px;font-size:13px;line-height:1.8;
  color:#5d4400;position:relative
}
.wp-guide::before{
  content:"WP";position:absolute;top:-12px;left:18px;background:var(--navy);color:var(--yellow);
  font-family:"Montserrat";font-weight:900;font-size:11px;letter-spacing:.16em;
  padding:4px 12px;border-radius:6px
}
.wp-guide h4{font-weight:900;color:var(--navy);margin:0 0 8px;font-size:14px;letter-spacing:.04em}
.wp-guide ul{margin:6px 0 0;padding:0;list-style:none}
.wp-guide li{padding:4px 0 4px 20px;position:relative;font-size:12.5px}
.wp-guide li::before{content:"▸";position:absolute;left:0;color:var(--red);font-weight:900}
.wp-guide code{background:#fff;padding:1px 8px;border-radius:4px;font-size:11px;
  border:1px solid var(--yellow-deep);color:var(--navy);font-weight:700}

/* === カスタムフィールドラベル（編集箇所インジケータ） === */
.cf-label{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--navy);color:var(--yellow);
  font-family:"Inter","Montserrat",sans-serif;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;
  padding:2px 8px;border-radius:3px;margin-bottom:6px;
  text-transform:uppercase
}
.cf-label::before{content:"⚙";font-size:11px}

/* === 投稿メタ（カテゴリ・日付・場所） === */
.wp-post-meta{
  display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap
}
.wp-post-meta .wp-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;background:var(--navy);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.06em;border-radius:99px
}
.wp-post-meta .wp-cat.cat-roof{background:#1FB04C}
.wp-post-meta .wp-cat.cat-wall{background:var(--red)}
.wp-post-meta .wp-cat.cat-roof-paint{background:#FF7A00}
.wp-post-meta .wp-cat.cat-waterproof{background:#00A0E9}
.wp-post-meta .wp-cat.cat-leak{background:#9B30FF}
.wp-post-meta .wp-case-no{
  background:var(--yellow);color:var(--navy);
  font-family:"Montserrat";font-weight:900;font-size:11px;
  padding:6px 12px;border-radius:99px;letter-spacing:.08em
}
.wp-post-meta .wp-date{color:var(--muted);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.wp-post-meta .wp-date::before{content:"";width:6px;height:6px;background:var(--navy);border-radius:50%}

/* === 投稿カテゴリー候補（WP管理画面で選択するイメージ） === */
.wp-cat-options{
  background:#f6f4ec;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.wp-cat-options .opt-label{
  font-family:"Inter";font-size:11px;font-weight:800;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;flex-shrink:0
}
.wp-cat-options .opt{
  padding:5px 12px;background:#fff;border:1.5px solid var(--line);border-radius:99px;
  font-size:11.5px;font-weight:700;color:var(--text);cursor:default;transition:.2s;
  display:inline-flex;align-items:center;gap:5px
}
.wp-cat-options .opt::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#ddd
}
.wp-cat-options .opt.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.wp-cat-options .opt.active::before{background:var(--yellow)}

/* === 物件情報テーブル === */
.wp-info-table{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:40px
}
.wp-info-table table{width:100%;border-collapse:collapse;font-size:14px}
.wp-info-table th{
  text-align:left;background:var(--cream);padding:14px 20px;
  color:var(--navy);font-weight:800;width:30%;
  border-bottom:1px solid var(--line);vertical-align:top
}
.wp-info-table td{
  padding:14px 20px;border-bottom:1px solid var(--line);font-weight:600
}
.wp-info-table tr:last-child th,
.wp-info-table tr:last-child td{border-bottom:none}

/* === セクション見出し（WPテンプレ用） === */
.wp-h{
  font-size:20px;font-weight:900;color:var(--navy);
  margin:50px 0 22px;padding:14px 18px;
  background:linear-gradient(90deg, var(--cream) 0%, transparent 100%);
  border-left:6px solid var(--yellow);
  letter-spacing:.06em;display:flex;align-items:center;gap:14px
}
.wp-h .wp-h-en{
  font-family:"Montserrat";font-size:11px;font-weight:800;
  color:var(--red);letter-spacing:.16em
}

/* === Before/After 比較 === v208 :: before小 / after大（約1:1.3） === */
.ba-compare{
  display:grid;grid-template-columns:1fr auto 1.3fr;gap:24px;
  position:relative;margin-bottom:40px;align-items:center
}
.ba-compare .ba-col{position:relative;min-width:0}
/* ba-img を button にしたので、デフォルトのbutton装飾をリセット */
.ba-compare .ba-img{
  position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  background:#ddd;border:5px solid var(--line);
  width:100%;padding:0;cursor:zoom-in;
  display:block;font:inherit;color:inherit
}
.ba-compare .ba-col.after .ba-img{border-color:var(--yellow)}
.ba-compare .ba-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.ba-compare .ba-img:hover{border-color:var(--navy)}
.ba-compare .ba-img:hover img{transform:scale(1.04)}
.ba-compare .ba-img:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.ba-compare .ba-tag{
  position:absolute;top:14px;left:14px;
  background:rgba(31,58,107,.92);color:#fff;
  font-family:"Montserrat";font-weight:900;font-size:11px;
  padding:6px 12px;border-radius:6px;letter-spacing:.16em;z-index:2;
  pointer-events:none
}
.ba-compare .ba-col.after .ba-tag{background:var(--red)}
.ba-compare .ba-zoom-hint{
  position:absolute;bottom:10px;right:10px;
  background:rgba(0,0,0,.62);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:5px 10px;border-radius:99px;
  opacity:0;transition:opacity .25s;pointer-events:none;z-index:2
}
.ba-compare .ba-img:hover .ba-zoom-hint,
.ba-compare .ba-img:focus-visible .ba-zoom-hint{opacity:1}
.ba-compare .ba-arrow{
  width:56px;height:56px;background:var(--yellow);
  border-radius:50%;border:4px solid #fff;
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);font-weight:900;font-size:24px;line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  pointer-events:none;flex-shrink:0
}
.ba-compare .arrow-mobile{display:none}
@media(max-width:700px){
  /* モバイル：1列縦並び、矢印は画像と画像の間に挟まる位置 */
  .ba-compare{grid-template-columns:1fr;gap:18px}
  .ba-compare .ba-arrow{
    margin:-8px auto;width:52px;height:52px;font-size:24px
  }
  .ba-compare .arrow-desktop{display:none}
  .ba-compare .arrow-mobile{display:inline}
  /* モバイルで「タップで拡大」を常時表示 */
  .ba-compare .ba-zoom-hint{opacity:1}
}

/* =========================================================
   v74 :: 画像ライトボックス（BEFORE/AFTER タップ拡大）
   ========================================================= */
.kurako-lightbox{
  position:fixed;inset:0;z-index:10000;
  background:rgba(15,22,38,.92);
  display:none;align-items:center;justify-content:center;
  padding:24px;backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:kurako-lb-fade .25s ease-out
}
.kurako-lightbox.is-open{display:flex}
@keyframes kurako-lb-fade{
  from{opacity:0}
  to{opacity:1}
}
.kurako-lightbox-inner{
  position:relative;max-width:min(96vw, 1400px);max-height:90vh;
  display:flex;flex-direction:column;align-items:center;gap:12px
}
.kurako-lightbox-img{
  max-width:100%;max-height:80vh;
  object-fit:contain;border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  background:#fff;animation:kurako-lb-pop .3s ease-out
}
@keyframes kurako-lb-pop{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
.kurako-lightbox-caption{
  color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.04em;text-align:center;
  background:rgba(0,0,0,.4);padding:8px 18px;border-radius:99px
}
.kurako-lightbox-close{
  position:fixed;top:16px;right:16px;z-index:10001;
  width:48px;height:48px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:var(--navy);
  box-shadow:0 6px 14px rgba(0,0,0,.3);transition:.2s
}
.kurako-lightbox-close:hover{transform:rotate(90deg);background:var(--yellow)}
@media(max-width:600px){
  .kurako-lightbox{padding:12px}
  .kurako-lightbox-img{max-height:75vh}
  .kurako-lightbox-close{width:42px;height:42px;top:12px;right:12px;font-size:20px}
  .kurako-lightbox-caption{font-size:12px;padding:6px 14px}
}
/* スクロールロック */
body.kurako-lightbox-active{overflow:hidden}

/* === 使用塗料カラーパレット === */
.paint-palette{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  padding:30px 28px;margin-bottom:40px;position:relative
}
.paint-palette .pp-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;padding-bottom:16px;border-bottom:1px dashed var(--line);
  flex-wrap:wrap;gap:12px
}
.paint-palette .pp-head h3{
  font-size:16px;font-weight:900;color:var(--navy);
  display:flex;align-items:center;gap:10px;letter-spacing:.04em;margin:0
}
.paint-palette .pp-head h3::before{
  content:"";width:18px;height:18px;
  background:linear-gradient(135deg, var(--red) 0%, var(--red) 25%, var(--yellow) 25%, var(--yellow) 50%, var(--green) 50%, var(--green) 75%, var(--blue) 75%);
  border-radius:50%;box-shadow:0 0 0 1.5px var(--navy)
}
.paint-palette .pp-count{
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--cream);padding:4px 10px;border-radius:99px
}
.paint-palette .pp-list{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:18px
}
.pp-color{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px;background:#fafaf6;border-radius:12px;
  border:1px solid var(--line);transition:.25s;position:relative;overflow:hidden
}
.pp-color:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07);border-color:var(--navy)}
.pp-color .pp-swatch{
  flex-shrink:0;width:80px;height:80px;border-radius:10px;
  position:relative;
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,.08),
    0 4px 10px rgba(0,0,0,.1)
}
.pp-color .pp-swatch::after{
  content:"";position:absolute;left:6px;bottom:6px;
  width:18px;height:18px;background:rgba(255,255,255,.55);border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  font-size:0
}
.pp-color .pp-info{flex:1;min-width:0}
.pp-color .pp-name{
  font-family:"Montserrat","Inter";font-weight:900;font-size:14px;
  color:var(--navy);letter-spacing:.04em;margin-bottom:4px;line-height:1.3
}
.pp-color .pp-code{
  font-family:"Roboto Condensed","Inter";font-size:11px;font-weight:700;
  color:var(--red);letter-spacing:.08em;margin-bottom:8px
}
.pp-color .pp-meta{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px
}
.pp-color .pp-tag{
  font-size:10px;font-weight:700;color:var(--text);
  background:#fff;border:1px solid var(--line);
  padding:2px 8px;border-radius:99px
}
.pp-color .pp-tag.brand{color:var(--navy);font-weight:800}
.pp-color .pp-tag.grade{background:var(--navy);color:#fff;border-color:var(--navy)}
.pp-color .pp-tag.area{background:var(--yellow);color:var(--navy);border-color:var(--yellow-deep);font-weight:800}
.pp-color .pp-comment{
  font-size:12px;color:var(--text);font-weight:500;line-height:1.6;margin-top:6px
}
@media(max-width:700px){
  .paint-palette{padding:22px 18px}
  .paint-palette .pp-list{grid-template-columns:1fr}
  .pp-color .pp-swatch{width:64px;height:64px}
}

/* === 工程レポートカード === */
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
.report-card{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  overflow:hidden;transition:.25s
}
.report-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.07);border-color:var(--yellow)}
.report-card .rep-img{aspect-ratio:4/3;background:#ddd;overflow:hidden;position:relative}
.report-card .rep-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.report-card:hover .rep-img img{transform:scale(1.05)}
.report-card .rep-step{
  position:absolute;top:10px;left:10px;
  background:var(--yellow);color:var(--navy);
  font-family:"Montserrat";font-weight:900;font-size:11px;
  padding:5px 10px;border-radius:6px;letter-spacing:.06em;z-index:2
}
.report-card .rep-body{padding:18px 20px}
.report-card .rep-body h4{
  font-size:14px;font-weight:900;color:var(--navy);
  margin:0 0 8px;letter-spacing:.04em
}
.report-card .rep-body p{font-size:12.5px;line-height:1.8;color:var(--text);margin:0;font-weight:500}
@media(max-width:900px){
  .report-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .report-grid{grid-template-columns:1fr}
}

/* === 工事概要コメント === */
.wp-comment{
  background:linear-gradient(135deg, var(--cream) 0%, #fff 100%);
  border-left:5px solid var(--navy);border-radius:0 14px 14px 0;
  padding:24px 28px;margin:30px 0 40px;
  font-size:14.5px;line-height:2;color:var(--text);font-weight:500;
  position:relative
}


/* === ページネーション === */
.wp-pager{
  display:flex;justify-content:space-between;gap:14px;margin-top:50px;flex-wrap:wrap
}
.wp-pager a{
  flex:1;min-width:240px;padding:18px 22px;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;display:flex;align-items:center;gap:14px;transition:.25s;text-decoration:none
}
.wp-pager a:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.06)}
.wp-pager a.next{justify-content:flex-end;text-align:right}
.wp-pager .pg-arrow{font-family:"Montserrat";font-weight:900;font-size:18px;color:var(--yellow-deep)}
.wp-pager .pg-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em;display:block;margin-bottom:3px}
.wp-pager .pg-title{font-size:14px;font-weight:800;color:var(--navy);line-height:1.4}

/* =========================================================
   v17：ワニくんキャラクター散りばめ ＋ AIチャットボット
   ========================================================= */

/* === ワニくんキャラクター（共通） === */
.wani{
  position:absolute;
  width:90px;height:auto;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.15));
  user-select:none;
  will-change:transform;
}
.wani img{width:100%;height:auto;display:block}
/* 軽いサイズ違いでバラエティ */
.wani.size-s{width:64px}
.wani.size-l{width:120px}

/* 配置（4隅） */
.wani-tr{top:24px;right:30px}
.wani-tl{top:24px;left:30px}
.wani-br{bottom:24px;right:30px}
.wani-bl{bottom:24px;left:30px}

/* ふわふわ浮遊（上下） */
@keyframes wani-float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
/* 横に揺れる */
@keyframes wani-sway{
  0%,100%{transform:translateX(0) rotate(-3deg)}
  50%{transform:translateX(8px) rotate(4deg)}
}
/* 元気にぴょんぴょん */
@keyframes wani-bounce{
  0%,30%,60%,100%{transform:translateY(0) rotate(0deg)}
  15%{transform:translateY(-14px) rotate(-6deg)}
  45%{transform:translateY(-10px) rotate(6deg)}
}
/* 物陰からチラ見 */
@keyframes wani-peek{
  0%,100%{transform:translateX(0) rotate(0deg)}
  50%{transform:translateX(10px) rotate(8deg)}
}
/* ぐるぐる首振り */
@keyframes wani-wiggle{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}
/* 反転して元気に */
@keyframes wani-bounce-flip{
  0%,30%,60%,100%{transform:scaleX(-1) translateY(0) rotate(0deg)}
  15%{transform:scaleX(-1) translateY(-14px) rotate(6deg)}
  45%{transform:scaleX(-1) translateY(-10px) rotate(-6deg)}
}
@keyframes wani-float-flip{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(2deg)}
  50%{transform:scaleX(-1) translateY(-12px) rotate(-2deg)}
}
@keyframes wani-sway-flip{
  0%,100%{transform:scaleX(-1) translateX(0) rotate(3deg)}
  50%{transform:scaleX(-1) translateX(8px) rotate(-4deg)}
}

/* アニメーション選択 */
.wani.anim-float{animation:wani-float 4.5s ease-in-out infinite}
.wani.anim-sway{animation:wani-sway 5s ease-in-out infinite}
.wani.anim-bounce{animation:wani-bounce 3.6s ease-in-out infinite}
.wani.anim-peek{animation:wani-peek 4.8s ease-in-out infinite}
.wani.anim-wiggle{animation:wani-wiggle 3.2s ease-in-out infinite}

/* 反転（左向き） */
.wani.flip{transform:scaleX(-1)}
.wani.flip.anim-float{animation:wani-float-flip 4.5s ease-in-out infinite}
.wani.flip.anim-sway{animation:wani-sway-flip 5s ease-in-out infinite}
.wani.flip.anim-bounce{animation:wani-bounce-flip 3.6s ease-in-out infinite}

/* セクションは relative + overflow:visible でちょい飛び出し可 */
.sub-section{overflow:visible !important}
.worry, .menu-sec, .service-section, .news, .qa, .works-section, .reasons{position:relative;overflow:visible}

/* レスポンシブ：小さくして数を間引く */
@media(max-width:900px){
  .wani{width:70px}
  .wani.size-s{width:50px}
  .wani.size-l{width:90px}
  .wani-tr,.wani-tl{top:14px}
  .wani-br,.wani-bl{bottom:14px}
  .wani-tr,.wani-br{right:14px}
  .wani-tl,.wani-bl{left:14px}
}
@media(max-width:600px){
  /* スマホでは半数だけ表示（変更されないものを隠す） */
  .wani.hide-mobile{display:none}
  .wani{width:54px}
  .wani.size-s{width:40px}
  .wani.size-l{width:70px}
}

/* === AIチャットボット === */
.kurako-chatbot{
  position:fixed;bottom:24px;right:24px;z-index:9000;
  font-family:"Noto Sans JP","Inter",sans-serif;
}
.kurako-chatbot .chat-toggle{
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow) 0%,var(--yellow-deep) 100%);
  border:4px solid #fff;cursor:pointer;
  box-shadow:0 10px 28px rgba(31,58,107,.25);
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:6px;
  animation:wani-toggle-bob 3s ease-in-out infinite;
  transition:transform .25s
}
.kurako-chatbot .chat-toggle:hover{transform:scale(1.08) rotate(-5deg)}
.kurako-chatbot .chat-toggle img{width:100%;height:100%;object-fit:contain}
.kurako-chatbot .chat-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--red);color:#fff;font-size:11px;font-weight:900;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;animation:badge-pulse 1.5s ease-in-out infinite;
  font-family:"Inter","Montserrat",sans-serif
}
.kurako-chatbot[data-open="true"] .chat-badge{display:none}

.kurako-chatbot .chat-tooltip{
  position:absolute;right:84px;top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:18px 18px 4px 18px;
  font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  pointer-events:none;
  animation:tooltip-bob 4s ease-in-out infinite
}
.kurako-chatbot .chat-tooltip::after{
  content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  border:8px solid transparent;border-left-color:var(--navy);border-right:none
}
.kurako-chatbot[data-open="true"] .chat-tooltip{display:none}

/* チャットパネル */
.kurako-chatbot .chat-panel{
  position:absolute;bottom:90px;right:0;
  width:340px;height:0;max-height:0;
  background:#fff;border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  overflow:hidden;
  border:1.5px solid var(--line);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(20px) scale(.95);
  transition:opacity .25s, transform .25s, max-height .25s;
  pointer-events:none
}
.kurako-chatbot[data-open="true"] .chat-panel{
  height:auto;max-height:520px;
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto
}

.chat-panel .cp-header{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;padding:16px 18px;
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  position:relative
}
.chat-panel .cp-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px;
  background:repeating-linear-gradient(90deg,
    var(--red) 0 18%, var(--yellow) 18% 36%, var(--green) 36% 54%, var(--blue) 54% 72%, var(--pink) 72% 90%, transparent 90% 100%)
}
.chat-panel .cp-header .cp-avatar-h{
  width:42px;height:42px;border-radius:50%;background:var(--yellow);
  padding:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff
}
.chat-panel .cp-header .cp-avatar-h img{width:100%;height:100%;object-fit:contain}
.chat-panel .cp-header .cp-title{flex:1;min-width:0}
.chat-panel .cp-header .cp-title h4{
  font-size:14px;font-weight:900;margin:0;letter-spacing:.04em;color:#fff;
  display:flex;align-items:center;gap:6px
}
.chat-panel .cp-header .cp-title h4::after{
  content:"";width:8px;height:8px;border-radius:50%;background:#1FB04C;
  box-shadow:0 0 0 0 rgba(31,176,76,.5);animation:status-pulse 2s ease-in-out infinite
}
.chat-panel .cp-header .cp-title p{
  font-size:11px;margin:2px 0 0;color:rgba(255,255,255,.78);font-weight:500
}
.chat-panel .cp-header .cp-close{
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:.2s
}
.chat-panel .cp-header .cp-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

.chat-panel .cp-body{
  flex:1;overflow-y:auto;padding:16px;background:var(--cream);
  display:flex;flex-direction:column;gap:10px;min-height:280px;max-height:340px
}
.chat-panel .cp-msg{display:flex;gap:8px;align-items:flex-start;animation:msg-in .3s ease-out}
.chat-panel .cp-msg.bot .cp-bubble{
  background:#fff;border:1px solid var(--line);
  padding:11px 14px;border-radius:4px 16px 16px 16px;
  font-size:13px;line-height:1.7;font-weight:500;max-width:80%;
  box-shadow:0 2px 4px rgba(0,0,0,.04);color:var(--text)
}
.chat-panel .cp-msg.user{justify-content:flex-end}
.chat-panel .cp-msg.user .cp-bubble{
  background:var(--navy);color:#fff;
  padding:11px 14px;border-radius:16px 4px 16px 16px;
  font-size:13px;line-height:1.6;font-weight:500;max-width:80%
}
.chat-panel .cp-msg.bot .cp-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--yellow);
  flex-shrink:0;padding:3px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.08)
}
.chat-panel .cp-msg.bot .cp-avatar img{width:100%;height:100%;object-fit:contain}

.chat-panel .cp-quick{
  display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0 38px
}
.chat-panel .cp-quick button{
  background:#fff;border:1.2px solid var(--navy);
  color:var(--navy);font-weight:700;font-size:11.5px;
  padding:6px 11px;border-radius:99px;cursor:pointer;
  transition:.2s;font-family:inherit;letter-spacing:.02em
}
.chat-panel .cp-quick button:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}

.chat-panel .cp-input{
  display:flex;gap:8px;padding:12px;background:#fff;
  border-top:1px solid var(--line);flex-shrink:0
}
.chat-panel .cp-input input{
  flex:1;border:1.5px solid var(--line);border-radius:99px;
  padding:8px 14px;font-size:13px;font-family:inherit;outline:none;
  transition:.2s;color:var(--text)
}
.chat-panel .cp-input input:focus{border-color:var(--navy)}
.chat-panel .cp-input button{
  background:var(--navy);color:#fff;border:none;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;transition:.2s
}
.chat-panel .cp-input button:hover{background:var(--red);transform:scale(1.1)}

.chat-panel .cp-foot-note{
  text-align:center;font-size:10px;color:var(--muted);
  padding:6px 12px;background:#f9f7ee;border-top:1px solid var(--line);
  font-weight:600;letter-spacing:.02em
}

@keyframes wani-toggle-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes badge-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}
@keyframes tooltip-bob{
  0%,100%{transform:translateY(-50%)}
  50%{transform:translateY(-58%)}
}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(31,176,76,.6)}
  70%{box-shadow:0 0 0 8px rgba(31,176,76,0)}
  100%{box-shadow:0 0 0 0 rgba(31,176,76,0)}
}
@keyframes msg-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
  .kurako-chatbot{bottom:16px;right:16px}
  .kurako-chatbot .chat-toggle{width:60px;height:60px}
  .kurako-chatbot .chat-tooltip{display:none}
  .kurako-chatbot .chat-panel{
    width:calc(100vw - 32px);max-width:340px;
    right:0;bottom:74px
  }
}

/* =========================================================
   v19：service-categoriesレスポンシブ対応（従来サイト準拠）
   ========================================================= */
.service-categories{
  display:flex;flex-wrap:wrap !important;justify-content:center;
  gap:3%;padding:40px 0 60px;
  list-style:none;margin:0;
}
.service-categories .service-item{
  width:18%;
}
@media(max-width:1100px){
  .service-categories{gap:2%;}
  .service-categories .service-item{width:32%;margin-bottom:20px;}
}
@media(max-width:700px){
  .service-categories{gap:3%;padding:30px 0 40px}
  .service-categories .service-item{width:47%;margin-bottom:14px;padding:14px 14px 26px !important}
  .service-categories .service-item h3{font-size:14px !important;margin-bottom:4px !important}
  .service-categories .service-item p{font-size:11px !important;line-height:1.4}
  .service-categories .service-item .icon{margin-bottom:6px !important}
  /* 奇数枚目は中央寄せ */
  .service-categories .service-item:nth-child(5){
    margin-left:auto;margin-right:auto
  }
}
@media(max-width:480px){
  .service-categories{gap:8px}
  .service-categories .service-item{width:48%;padding:10px 10px 22px !important}
  .service-categories .service-item h3{font-size:12px !important}
  .service-categories .service-item p{font-size:9px !important}
  .service-categories .service-item .card-btn{width:26px;height:26px}
}

/* =========================================================
   v20：複数バグ修正
   ========================================================= */

/* --- 1. menu-card シャドウとカードの高さ整合 --- */
.menu-card{
  /* デフォルトでもうっすら影を出して高さ感を一致 */
  box-shadow:0 4px 14px rgba(31,47,77,.06);
  align-self:stretch !important;  /* mobile横スクロール時の高さ揃え */
}
.menu-card .body{
  /* ボディ内コンテンツを縦に分散して、cardsの底をきれいに揃える */
  display:flex;flex-direction:column;flex:1
}
.menu-card .note{
  margin-top:auto;padding-top:8px;
}
.menu-card .price-row{
  margin-bottom:0
}
@media(max-width:700px){
  /* モバイル横スクロールの時、カードの最低高さを確保 */
  .menu-sec .menu-card{min-height:340px}
  .menu-sec .menu-card .body{padding-bottom:14px}
}

/* --- 2. ワニくんサイズ全体UP --- */
.wani{width:130px !important}
.wani.size-s{width:96px !important}
.wani.size-l{width:170px !important}
@media(max-width:900px){
  .wani{width:100px !important}
  .wani.size-s{width:74px !important}
  .wani.size-l{width:130px !important}
}
@media(max-width:600px){
  .wani{width:80px !important}
  .wani.size-s{width:60px !important}
  .wani.size-l{width:100px !important}
}

/* --- 4. 電話番号のレスポンシブ --- */
.contact-card.tel .num{
  white-space:nowrap;
  font-size:clamp(28px, 5.4vw, 54px) !important;
  letter-spacing:.02em !important;
  line-height:1.05 !important;
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap
}
.contact-card.tel .num small{
  font-size:clamp(13px, 1.8vw, 18px) !important;
  margin-right:6px !important;
  flex-shrink:0
}
@media(max-width:700px){
  .contact-card{padding:30px 22px}
  .contact-card.tel .num{font-size:clamp(28px, 8vw, 42px) !important}
  .contact-card.tel .num small{font-size:13px !important}
  .contact-card.tel .time{font-size:11px}
}
@media(max-width:480px){
  .contact-card{padding:24px 18px}
  .contact-card.tel .num{font-size:clamp(24px, 9vw, 36px) !important}
}

/* =========================================================
   v21：文字サイズ・余白バランス全体調整
   ========================================================= */

/* --- セクション余白を全体的に圧縮 --- */
.worry, .reasons, .menu-sec, .service-section, .news, .qa, .works-section, .contact{
  padding:55px 0 !important;
}
.sub-section{padding:55px 0 !important}
.sub-section.cream{padding:55px 0 !important}
@media(max-width:700px){
  .worry, .reasons, .menu-sec, .service-section, .news, .qa, .works-section, .contact,
  .sub-section, .sub-section.cream{
    padding:40px 0 !important;
  }
}

/* --- セクションタイトル全体のサイズ調整（バランス重視） --- */
.section-title{
  font-size:clamp(22px, 3.4vw, 34px) !important;
  line-height:1.4 !important;
  margin-bottom:14px !important;
}
.section-en{
  font-size:11px !important;
  letter-spacing:.32em !important;
  margin-bottom:8px !important;
}
.section-head{
  margin-bottom:32px !important;
}

/* --- page-hero のタイトルバランス --- */
.page-hero h1{
  font-size:clamp(22px, 3.6vw, 38px) !important;
  line-height:1.45 !important;
  margin-bottom:10px !important;
  letter-spacing:.06em !important;
}
.page-hero .page-en{
  font-size:11px !important;
  letter-spacing:.28em !important;
  margin-bottom:8px !important;
}
.page-hero .page-lead{
  font-size:13px !important;
  line-height:1.85 !important;
  font-weight:500 !important;
}
@media(max-width:700px){
  .page-hero h1{font-size:clamp(20px, 5.5vw, 26px) !important}
  .page-hero .page-lead{font-size:12px !important}
}

/* --- hero（トップFV）タイトル調整 --- */
.hero-catch{
  font-size:clamp(28px, 4.6vw, 52px) !important;
  line-height:1.35 !important;
}
.hero-sub{
  font-size:clamp(13px, 1.4vw, 15px) !important;
  line-height:1.85 !important;
}

/* --- 電話番号バランス調整（v20改善） --- */
.contact-card.tel{
  padding:34px 30px !important;
}
.contact-card.tel .lbl{
  font-size:10px !important;
  letter-spacing:.18em !important;
  padding:5px 12px !important;
  margin-bottom:14px !important;
}
.contact-card.tel .num{
  font-size:clamp(26px, 4.4vw, 44px) !important;
  letter-spacing:.01em !important;
  line-height:1.05 !important;
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  flex-wrap:nowrap;
  gap:0
}
.contact-card.tel .num small{
  font-size:clamp(11px, 1.4vw, 15px) !important;
  margin-right:5px !important;
  font-weight:800 !important;
  flex-shrink:0
}
.contact-card.tel .time{
  font-size:11px !important;
  margin-top:8px !important;
}
.contact-card.tel .reserve-banner{
  margin-top:18px !important;
  padding:14px !important;
}
.contact-card.tel .reserve-banner .ico{
  width:42px !important;height:42px !important;font-size:18px !important;
}
.contact-card.tel .reserve-banner .txt{
  font-size:12px !important;line-height:1.55 !important;
}
.contact-card.tel .reserve-banner .txt b{
  font-size:13px !important;
}

@media(max-width:700px){
  .contact-card.tel{padding:24px 20px !important}
  .contact-card.tel .num{font-size:clamp(24px, 7.5vw, 36px) !important}
  .contact-card.tel .num small{font-size:11px !important}
}
@media(max-width:480px){
  .contact-card.tel .num{font-size:clamp(22px, 8.5vw, 32px) !important}
}

/* --- form側のタイトルもバランス調整 --- */
.contact-card.form{padding:34px 30px !important}
.contact-card.form .h{
  font-size:clamp(16px, 2vw, 20px) !important;
  margin-bottom:16px !important;
  line-height:1.5 !important;
}
.contact-card.form .row a{
  padding:14px !important;
  font-size:12px !important;
}
.contact-card.form .big{
  padding:18px 22px !important;
  font-size:14px !important;
}

/* --- セクション間のヘッダー余白調整 --- */
.menu-block{margin-bottom:32px !important}
.menu-block .h{margin-bottom:14px !important}
.menu-block .h h3{font-size:16px !important}

/* --- サブカード/サブヘッドのスペース --- */
.sub-head{margin-bottom:32px !important}
.wp-h{margin:30px 0 16px !important;font-size:18px !important}

/* --- news / works のグリッド余白詰め --- */
.news-list{margin-top:24px !important;gap:18px !important}
.works-grid{margin-top:24px !important;gap:18px !important}
@media(max-width:700px){
  .news-list,.works-grid{gap:14px !important}
}

/* =========================================================
   v22：お問い合わせフォーム / 確認 / 完了 / プライバシーポリシー
   ========================================================= */

/* === 進捗ステップ === */
.contact-steps{
  display:flex;justify-content:center;align-items:center;gap:0;
  margin-bottom:40px;flex-wrap:wrap
}
.contact-steps .step{
  display:flex;align-items:center;gap:10px;
  padding:12px 22px;background:#fff;border:2px solid var(--line);
  position:relative;color:var(--muted);font-weight:700
}
.contact-steps .step:not(:last-child)::after{
  content:"";display:inline-block;width:20px;height:2px;background:var(--line);
  margin-left:14px
}
.contact-steps .step:first-child{border-radius:99px 0 0 99px;border-right:none}
.contact-steps .step:last-child{border-radius:0 99px 99px 0;border-left:none}
.contact-steps .step .num{
  width:26px;height:26px;border-radius:50%;
  background:var(--line);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Montserrat";font-size:12px;font-weight:900
}
.contact-steps .step .lbl{font-size:13px;letter-spacing:.06em}
.contact-steps .step.is-active{
  background:var(--navy);color:#fff;border-color:var(--navy)
}
.contact-steps .step.is-active .num{background:var(--yellow);color:var(--navy)}
.contact-steps .step.is-done{
  background:#fff;color:var(--navy);border-color:var(--navy)
}
.contact-steps .step.is-done .num{background:var(--navy);color:#fff}
@media(max-width:600px){
  .contact-steps .step{padding:8px 14px}
  .contact-steps .step .lbl{font-size:11px}
  .contact-steps .step .num{width:22px;height:22px;font-size:10px}
  .contact-steps .step:not(:last-child)::after{width:10px;margin-left:8px}
}

/* === エラー表示 === */
.form-errors{
  background:#fff;border:2px solid var(--red);border-radius:12px;
  padding:16px 20px;margin-bottom:24px;color:var(--red);font-size:14px;font-weight:700
}
.form-errors h3{
  font-size:14px;margin:0 0 8px;color:var(--red);
  display:flex;align-items:center;gap:8px
}
.form-errors h3::before{content:"⚠";font-size:18px}
.form-errors ul{margin:0;padding-left:18px;font-size:13px;font-weight:600;line-height:1.85}

/* === フォーム本体 === */
.contact-form{display:flex;flex-direction:column;gap:22px}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-row.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row.form-2col > div{display:flex;flex-direction:column;gap:8px}
@media(max-width:600px){
  .form-row.form-2col{grid-template-columns:1fr}
}
.form-row label{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.04em
}
.form-row label .req{
  background:var(--red);color:#fff;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:3px;letter-spacing:.06em
}
.form-row label .opt{
  background:var(--cream-deep);color:var(--text);font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:3px;letter-spacing:.06em
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea{
  border:1.5px solid var(--line);border-radius:10px;
  padding:13px 16px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--text);transition:.2s;
  font-weight:500;outline:none;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,107,.1)
}
.form-row input.is-error,
.form-row textarea.is-error,
.form-row select.is-error,
.form-row .checkbox-group.is-error,
.form-row .privacy-cb.is-error{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.08)
}
.form-row .err-msg{
  display:none;color:var(--red);font-size:12px;font-weight:700;margin-top:0;
  letter-spacing:.04em
}
.form-row .err-msg.show{display:block}
.form-row .err-msg::before{content:"⚠ "}

/* チェックボックス・ラジオ */
.checkbox-group, .radio-group{
  display:flex;flex-wrap:wrap;gap:10px 18px;padding:6px 0
}
.cb, .rb{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);user-select:none
}
.cb input, .rb input{
  width:18px;height:18px;accent-color:var(--navy);cursor:pointer
}

/* プライバシー同意 */
.form-privacy{
  background:var(--cream);border-radius:14px;padding:18px 22px;border:1.5px solid var(--line);margin-top:6px
}
.privacy-cb{
  display:flex !important;align-items:flex-start;gap:10px;font-size:13px;line-height:1.7
}
.privacy-cb input[type="checkbox"]{
  margin-top:3px;flex-shrink:0;width:18px;height:18px;
  accent-color:var(--navy);cursor:pointer
}
.privacy-cb .privacy-cb-label{
  flex:1;cursor:pointer;display:inline-flex;align-items:center;flex-wrap:wrap;gap:0
}
.privacy-cb a{
  color:var(--navy);text-decoration:underline;font-weight:800;
  cursor:pointer;display:inline-block;padding:2px 0;
  pointer-events:auto
}
.privacy-cb a:hover{color:var(--red)}
.privacy-cb .privacy-cb-suffix{margin-left:0}
.privacy-cb .req{margin-left:8px}

/* アクションボタン */
.form-action{margin-top:14px;display:flex;justify-content:center}
.form-action.two-buttons{justify-content:space-between;gap:14px;flex-wrap:wrap}
.btn-confirm, .btn-submit{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 38px;background:var(--navy);color:#fff;border:none;
  border-radius:99px;font-weight:900;font-size:15px;letter-spacing:.06em;
  cursor:pointer;transition:.25s;font-family:inherit;
  box-shadow:0 6px 0 var(--navy-deep)
}
.btn-confirm:hover, .btn-submit:hover{
  background:var(--red);box-shadow:0 6px 0 var(--red-deep);transform:translateY(-1px)
}
.btn-confirm .arr, .btn-submit .arr{font-size:18px;font-weight:700}
.btn-back{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 38px;background:#fff;color:var(--navy);border:2px solid var(--navy);
  border-radius:99px;font-weight:900;font-size:15px;letter-spacing:.06em;
  cursor:pointer;transition:.25s;font-family:inherit
}
.btn-back:hover{background:var(--navy);color:#fff}
.btn-back .arr{font-size:18px;font-weight:700}
@media(max-width:600px){
  .btn-confirm, .btn-submit, .btn-back{
    padding:14px 24px;font-size:13px;flex:1;min-width:140px;justify-content:center
  }
}

/* === 確認テーブル === */
.confirm-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:30px
}
.confirm-table th{
  background:var(--cream);padding:16px 20px;text-align:left;
  color:var(--navy);font-weight:800;font-size:13px;
  width:34%;vertical-align:top;border-bottom:1px solid var(--line);letter-spacing:.04em
}
.confirm-table td{
  padding:16px 20px;font-size:14px;color:var(--text);font-weight:600;
  border-bottom:1px solid var(--line);line-height:1.85;
  word-break:break-word
}
.confirm-table tr:last-child th, .confirm-table tr:last-child td{border-bottom:none}
.confirm-table td.multiline{white-space:pre-wrap}
@media(max-width:600px){
  .confirm-table th{width:100%;display:block;padding:12px 16px 6px}
  .confirm-table td{display:block;padding:6px 16px 12px}
}

/* === 完了アイコン === */
.thanks-icon{
  width:90px;height:90px;border-radius:50%;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:900;
  margin:30px auto 20px;
  box-shadow:0 12px 30px rgba(31,58,107,.2)
}

/* === プライバシーポリシー本文 === */
.privacy-content{
  background:#fff;border-radius:18px;padding:40px 44px;
  border:1.5px solid var(--line)
}
.privacy-content h2{
  font-size:18px;font-weight:900;color:var(--navy);
  margin:30px 0 14px;padding-left:14px;border-left:5px solid var(--yellow);
  letter-spacing:.04em;line-height:1.5
}
.privacy-content h2:first-child{margin-top:0}
.privacy-content p{
  font-size:14px;line-height:2;color:var(--text);font-weight:500;margin-bottom:14px
}
.privacy-content ul{
  margin:0 0 18px;padding-left:24px;font-size:14px;line-height:2;color:var(--text)
}
.privacy-content li{font-weight:500;padding:2px 0}
.privacy-content .privacy-contact{
  background:var(--cream);border-radius:12px;padding:20px 24px;margin-top:14px
}
.privacy-content .privacy-contact p{margin-bottom:6px}
@media(max-width:600px){
  .privacy-content{padding:24px 20px}
  .privacy-content h2{font-size:15px}
  .privacy-content p, .privacy-content ul{font-size:13px}
}

/* =========================================================
   v25：ワニくんお気軽コンタクトカード（B+ワニ合体）
   ========================================================= */
.kurako-contact-card{
  background:linear-gradient(180deg,#FBF8EF 0%,#fff8e1 100%);
  border-radius:28px;padding:34px 28px 30px;
  border:2.5px solid var(--navy);
  position:relative;overflow:hidden;
  box-shadow:0 10px 0 var(--navy);
  max-width:760px;margin:0 auto
}
/* 装飾ペンキドット */
.kcc-dot{position:absolute;border-radius:50%;opacity:.7;pointer-events:none}
.kcc-dot-1{top:18px;right:24px;width:14px;height:14px;background:var(--pink)}
.kcc-dot-2{top:48px;right:46px;width:8px;height:8px;background:var(--blue)}
.kcc-dot-3{top:60px;left:24px;width:12px;height:12px;background:var(--green)}
.kcc-dot-4{top:32px;left:48px;width:9px;height:9px;background:var(--orange)}
.kcc-dot-5{bottom:120px;right:18px;width:10px;height:10px;background:var(--yellow);opacity:1;border:1.5px solid var(--navy)}

/* ヘッダー：ワニくん＋吹き出し */
.kcc-head{
  display:flex;align-items:flex-end;justify-content:center;gap:18px;margin-bottom:10px;flex-wrap:wrap
}
.kcc-wani{
  width:120px;height:120px;flex-shrink:0;position:relative;
  animation:kcc-wani-bob 3s ease-in-out infinite
}
@keyframes kcc-wani-bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(3deg)}
}
.kcc-wani img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.kcc-bubble{
  background:#fff;border:2.5px solid var(--navy);
  border-radius:24px 24px 24px 4px;
  padding:14px 22px;font-size:14px;font-weight:800;color:var(--navy);
  position:relative;box-shadow:0 4px 0 var(--navy);line-height:1.6;margin-bottom:14px;
  font-family:"Noto Sans JP","Inter",sans-serif
}
.kcc-bubble::before{
  content:"";position:absolute;left:-12px;bottom:-2px;
  width:0;height:0;border-style:solid;border-width:0 14px 14px 0;
  border-color:transparent var(--navy) transparent transparent
}
.kcc-bubble::after{
  content:"";position:absolute;left:-9px;bottom:1px;
  width:0;height:0;border-style:solid;border-width:0 11px 11px 0;
  border-color:transparent #fff transparent transparent
}
.kcc-bubble .accent{color:var(--red);font-size:16px}

/* セクションタイトル */
.kcc-title{text-align:center;margin:6px 0 22px}
.kcc-title .badge{
  background:var(--navy);color:var(--yellow);
  padding:5px 16px;border-radius:99px;
  font-size:11px;font-weight:900;letter-spacing:.18em;
  font-family:"Inter","Montserrat",sans-serif
}
.kcc-title h3{
  font-size:20px;font-weight:900;color:var(--navy);
  margin:12px 0 4px;letter-spacing:.04em;line-height:1.5
}
.kcc-title h3 em{
  font-style:normal;
  background:linear-gradient(transparent 60%,var(--yellow) 60%);
  padding:0 6px
}
.kcc-title .lead{
  font-size:11.5px;color:var(--muted);font-weight:700;margin:0
}

/* 4カードグリッド */
.kcc-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.kcc-card{
  background:#fff;border-radius:20px;
  padding:22px 14px 18px;text-align:center;
  text-decoration:none;color:inherit;
  position:relative;transition:.25s;
  display:block
}
.kcc-card:hover{transform:translateY(-3px)}
.kcc-card .kcc-tag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:900;
  padding:3px 12px;border-radius:99px;
  letter-spacing:.1em;border:2px solid #fff;white-space:nowrap
}
.kcc-card .kcc-icon{
  width:50px;height:50px;border-radius:50%;
  margin:8px auto 8px;
  display:flex;align-items:center;justify-content:center
}
.kcc-card .kcc-icon svg{width:26px;height:26px}
.kcc-card .kcc-line-mark{font-size:24px;font-weight:900;font-family:"Inter",sans-serif}
.kcc-card .kcc-label{
  font-size:11px;color:var(--muted);font-weight:800;
  margin:0 0 2px;letter-spacing:.06em
}
.kcc-card .kcc-main{
  font-size:14px;font-weight:900;margin:0;line-height:1.3
}
.kcc-card .kcc-main.tel{
  font-family:"Roboto Condensed";font-size:18px;letter-spacing:.02em;line-height:1.1
}
.kcc-card .kcc-sub{
  font-size:9.5px;color:var(--muted);font-weight:700;margin:4px 0 0
}

/* カラーバリエーション */
.kcc-card.tel{border:3px solid var(--red);box-shadow:0 5px 0 var(--red)}
.kcc-card.tel .kcc-tag{background:var(--red);color:#fff}
.kcc-card.tel .kcc-icon{background:#FCEBEB}
.kcc-card.tel .kcc-icon svg{fill:var(--red)}
.kcc-card.tel .kcc-main{color:var(--red)}

.kcc-card.line{border:3px solid var(--green);box-shadow:0 5px 0 var(--green)}
.kcc-card.line .kcc-icon{background:#EAF3DE}
.kcc-card.line .kcc-line-mark{color:var(--green)}
.kcc-card.line .kcc-main{color:var(--green)}

.kcc-card.form{border:3px solid var(--blue);box-shadow:0 5px 0 var(--blue)}
.kcc-card.form .kcc-icon{background:#E6F1FB}
.kcc-card.form .kcc-icon svg{fill:var(--blue)}
.kcc-card.form .kcc-main{color:var(--blue)}

.kcc-card.show{border:3px solid var(--orange);box-shadow:0 5px 0 var(--orange)}
.kcc-card.show .kcc-tag{background:var(--yellow);color:var(--navy);border-color:#fff}
.kcc-card.show .kcc-icon{background:#FAEEDA}
.kcc-card.show .kcc-icon svg{fill:var(--orange)}
.kcc-card.show .kcc-main{color:var(--orange)}

/* フッター注釈 */
.kcc-foot{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:20px;padding-top:16px;
  border-top:2px dashed rgba(31,58,107,.2);
  flex-wrap:wrap
}
.kcc-foot .safe{
  background:var(--navy);color:var(--yellow);
  font-size:9px;font-weight:900;padding:3px 8px;border-radius:4px;letter-spacing:.1em;
  font-family:"Inter",sans-serif
}
.kcc-foot p{font-size:11px;color:var(--muted);font-weight:700;margin:0}

/* レスポンシブ */
@media(max-width:600px){
  .kurako-contact-card{padding:26px 18px 22px;border-radius:22px}
  .kcc-wani{width:90px;height:90px}
  .kcc-bubble{font-size:12px;padding:10px 16px}
  .kcc-title h3{font-size:17px}
  .kcc-card{padding:18px 12px 14px}
  .kcc-card .kcc-icon{width:42px;height:42px}
  .kcc-card .kcc-icon svg{width:22px;height:22px}
  .kcc-card .kcc-main{font-size:12.5px}
  .kcc-card .kcc-main.tel{font-size:15.5px}
  .kcc-foot p{font-size:10px}
}

/* =========================================================
   v28：サービスカテゴリー均等横並び＋カード低身長化
   ========================================================= */

/* Grid化で確実に均等配置・きれいに折り返し */
.service-categories{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:16px !important;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:30px 24px 40px !important;
  list-style:none !important;
  flex-wrap:initial !important;
  justify-content:initial !important
}

.service-categories .service-item{
  width:auto !important;
  margin-bottom:0 !important;
  padding:14px 12px 18px !important;
  border-width:2.5px !important;
  border-radius:14px !important
}

/* アイコンを小型化（カード高さ削減） */
.service-categories .service-item .icon{
  width:62% !important;
  margin:0 auto 6px !important
}

.service-categories .service-item h3{
  font-size:14px !important;
  margin-bottom:2px !important;
  letter-spacing:.05em !important;
  line-height:1.3 !important
}

.service-categories .service-item p{
  font-size:11px !important;
  margin-bottom:8px !important;
  line-height:1.4 !important;
  color:#555 !important
}

.service-categories .service-item .card-btn{
  width:30px !important;
  height:30px !important;
  font-size:14px !important
}

/* タブレット：3列で折り返し */
@media(max-width:1000px){
  .service-categories{
    grid-template-columns:repeat(3, 1fr) !important;
    max-width:760px !important
  }
}

/* スマホ：2列で折り返し（5枚目は中央） */
@media(max-width:640px){
  .service-categories{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
    padding:20px 16px 30px !important
  }
  .service-categories .service-item{
    padding:12px 10px 16px !important
  }
  .service-categories .service-item h3{font-size:13px !important}
  .service-categories .service-item p{font-size:10px !important}
  .service-categories .service-item:nth-child(5){
    grid-column:1 / -1;
    max-width:48%;
    margin:0 auto !important
  }
}

/* 小スマホ：余白タイト */
@media(max-width:380px){
  .service-categories{gap:8px !important;padding:16px 10px 24px !important}
  .service-categories .service-item .icon{width:55% !important}
}

/* =========================================================
   v29：service-categories の矢印ボタンをカード追従＆かわいく
   ========================================================= */

/* カード自体を relative にして子要素を内包 */
.service-categories .service-item{
  position:relative !important;
  overflow:hidden !important
}

/* グレーの円から、カラフルなカード追従型に */
.service-categories .service-item .card-btn{
  position:absolute !important;
  left:auto !important;
  right:10px !important;
  bottom:10px !important;
  top:auto !important;
  transform:none !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:2px solid currentColor !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  transition:.25s ease !important
}

/* 矢印 */
.service-categories .service-item .card-btn .arrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important
}
.service-categories .service-item .card-btn .arrow::after{
  content:"→" !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:currentColor !important;
  margin:0 !important;
  transition:.25s ease !important;
  position:relative !important
}

/* カラーごとに矢印ボタンの色を一致させる */
.service-categories .service-item.color-red .card-btn   {color:#e60012 !important;background:rgba(230,0,18,.08) !important}
.service-categories .service-item.color-yellow .card-btn{color:#f5c400 !important;background:rgba(245,196,0,.12) !important}
.service-categories .service-item.color-green .card-btn {color:#2fb44a !important;background:rgba(47,180,74,.1) !important}
.service-categories .service-item.color-blue .card-btn  {color:#00a0e9 !important;background:rgba(0,160,233,.1) !important}
.service-categories .service-item.color-pink .card-btn  {color:#ff5ca8 !important;background:rgba(255,92,168,.1) !important}

/* ホバー：背景をカード色で塗りつぶし＋白矢印＋少し拡大 */
.service-categories .service-item.color-red:hover .card-btn   {background:#e60012 !important;color:#fff !important;border-color:#e60012 !important}
.service-categories .service-item.color-yellow:hover .card-btn{background:#f5c400 !important;color:#1F3A6B !important;border-color:#f5c400 !important}
.service-categories .service-item.color-green:hover .card-btn {background:#2fb44a !important;color:#fff !important;border-color:#2fb44a !important}
.service-categories .service-item.color-blue:hover .card-btn  {background:#00a0e9 !important;color:#fff !important;border-color:#00a0e9 !important}
.service-categories .service-item.color-pink:hover .card-btn  {background:#ff5ca8 !important;color:#fff !important;border-color:#ff5ca8 !important}

.service-categories .service-item:hover .card-btn{
  transform:scale(1.1) !important
}
.service-categories .service-item:hover .card-btn .arrow::after{
  transform:translateX(2px) !important
}

/* ホバー時に矢印自体が少しスライド */
.service-categories .service-item .card-btn:hover .arrow::after{
  transform:translateX(3px) !important
}

/* スマホ：少し小さめに */
@media(max-width:640px){
  .service-categories .service-item .card-btn{
    width:28px !important;
    height:28px !important;
    right:8px !important;
    bottom:8px !important
  }
  .service-categories .service-item .card-btn .arrow::after{
    font-size:12px !important
  }
}

/* カード本体に下方向の余白を確保（ボタンが重ならないように） */
.service-categories .service-item{
  padding-bottom:46px !important
}
@media(max-width:640px){
  .service-categories .service-item{padding-bottom:40px !important}
}


/* =========================================================
   v30：FVスライダー＋画面端隙間の完全撤廃
   ========================================================= */

/* 画面端の隙間を完全撤廃 */
html{margin:0 !important;padding:0 !important;background:var(--navy)}
body{margin:0 !important;padding:0 !important}
.proposal-bar{display:none !important}
.header{box-shadow:0 2px 12px rgba(0,0,0,.06)}

/* 旧サムネナビと旧ラベルを完全に隠す */
.hero-photo .label, .hero-thumbs{display:none !important}

/* スライダー本体 */
.hero-slider{position:relative;border-radius:24px;overflow:hidden;background:#0e2247}
.hero-slider .hs-slides{position:relative;width:100%;height:100%;aspect-ratio:4/3}
.hero-slider .hs-slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.4s ease-in-out;
  pointer-events:none
}
.hero-slider .hs-slide.is-active{opacity:1;pointer-events:auto}
.hero-slider .hs-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform 8s ease-out
}
.hero-slider .hs-slide.is-active img{transform:scale(1.06)}

/* インジケータドット */
.hero-slider .hs-dots{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:5;
  background:rgba(0,0,0,.3);padding:6px 12px;border-radius:99px;backdrop-filter:blur(6px)
}
.hero-slider .hs-dot{
  width:10px;height:10px;border-radius:50%;border:none;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0;
  transition:.25s;flex-shrink:0
}
.hero-slider .hs-dot.is-active{
  background:var(--yellow);width:26px;border-radius:99px;
  box-shadow:0 0 0 2px rgba(255,212,0,.3)
}
.hero-slider .hs-dot:hover{background:rgba(255,255,255,.7)}

/* badge は左上のまま */
.hero-slider .badge{z-index:6}

@media(max-width:700px){
  .hero-slider{border-radius:18px}
  .hero-slider .hs-dots{bottom:10px;padding:4px 10px}
  .hero-slider .hs-dot{width:8px;height:8px}
  .hero-slider .hs-dot.is-active{width:22px}
}


/* =========================================================
   v31：黄色ドット非表示・ワニ画像パス修正
   ========================================================= */
.kcc-dot-5{display:none !important}


/* =========================================================
   v32：ワニくん位置調整（大画面のみ内側／小画面は従来通り端）
   ========================================================= */
/* 大画面のみ少し内側へ */
@media(min-width:1101px){
  .wani-tr{top:60px !important;right:90px !important}
  .wani-tl{top:60px !important;left:90px !important}
  .wani-br{bottom:60px !important;right:90px !important}
  .wani-bl{bottom:60px !important;left:90px !important}
}
/* それより下は従来通り端寄せ（v17の元位置 24/30） */


/* =========================================================
   v38：WPログイン時の admin-bar オフセット
   ========================================================= */
/* WP admin barが表示されているとき、stickyヘッダーがadmin barの下に来るように */
body.admin-bar{padding-top:0 !important}
body.admin-bar .header{top:32px !important}
@media screen and (max-width:782px){
  body.admin-bar .header{top:46px !important}
}
@media screen and (max-width:600px){
  /* WP admin barはモバイル時はsticky解除なので、固定は要らない */
  body.admin-bar .header{top:0 !important}
}

/* ヘッダー高さを保証（見切れ防止） */
.header{min-height:74px}
.header-inner{min-height:74px}

/* メイン部の上端余白も確実にゼロ */
main#main{margin-top:0 !important;padding-top:0 !important}
.hero{margin-top:0 !important}


/* =========================================================
   v40：ヘッダー全面ブラッシュアップ
   ・メニューの折り返し禁止
   ・縦中央揃え／高さ統一
   ・タブレット幅の文字サイズ最適化
   ・ロゴ・電話・CTA間の比率調整
   ========================================================= */

/* ヘッダー全体 — 高さ・余白統一 */
.header{
  height:76px;min-height:76px
}
.header-inner{
  max-width:1280px !important;
  padding:0 24px !important;
  height:76px !important;min-height:76px !important;
  gap:28px !important;
  grid-template-columns:auto 1fr auto !important
}

/* ロゴ — コンパクトかつ縦中央 */
.brand{gap:11px;align-self:center}
.brand .mark{
  width:40px;height:40px;font-size:17px;border-radius:10px
}
.brand .name{line-height:1.15}
.brand .name .ja{
  font-size:15px;font-weight:800;letter-spacing:.08em;
  white-space:nowrap;line-height:1.1
}
.brand .name .en{
  font-size:9px;letter-spacing:.22em;margin-top:3px;
  line-height:1;white-space:nowrap
}

/* グローバルナビ — 折り返し禁止 + 縦中央 */
.gnav{
  display:flex !important;
  justify-content:center !important;
  align-items:stretch !important;
  flex-wrap:nowrap !important;
  gap:22px !important;
  height:76px !important;
  align-self:stretch
}
.gnav .gnav-item{
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  height:100%
}
.gnav a.gnav-item,
.gnav .has-sub > a{
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  padding:0 !important;
  height:76px !important;
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  line-height:1
}
.gnav a.gnav-item::after,
.gnav .has-sub > a::after{
  bottom:18px !important
}
.gnav .has-sub::after{
  top:auto !important;height:18px !important
}

/* ユーティリティ（電話 / お問い合わせ） — 縦中央 */
.utility{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  align-self:center !important;
  flex-shrink:0
}
.u-tel{
  display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.1;text-decoration:none
}
.u-tel .num{
  font-family:"Roboto Condensed","Inter",sans-serif !important;
  font-size:20px !important;font-weight:800 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  color:var(--navy);display:inline-flex;align-items:center;gap:6px
}
.u-tel .meta{
  font-size:10px;color:var(--muted);font-weight:600;
  margin-top:3px;letter-spacing:.04em;
  white-space:nowrap
}
.u-divider{height:32px}
.u-btn{
  padding:11px 20px !important;
  font-size:12.5px !important;
  letter-spacing:.06em;
  white-space:nowrap !important
}

/* タブレット帯（1101〜1280px）：文字サイズを少し下げて折り返し防止 */
@media(min-width:1101px) and (max-width:1280px){
  .header-inner{padding:0 18px !important;gap:18px !important}
  .gnav{gap:14px !important}
  .gnav a.gnav-item,
  .gnav .has-sub > a{
    font-size:12px !important;letter-spacing:.02em !important
  }
  .brand .name .ja{font-size:14px}
  .brand .name .en{font-size:8.5px;letter-spacing:.2em}
  .u-tel .num{font-size:18px}
  .u-tel .meta{font-size:9.5px}
  .u-btn{padding:10px 16px !important;font-size:11.5px !important}
  .utility{gap:12px !important}
}

/* v224 :: 1170px以下：utility(電話番号)を ハンバーガーの左隣 にピタッと配置 */
@media(max-width:1170px){
  .gnav{display:none !important}
  .utility{
    display:flex !important;
    margin-left:auto !important; /* ← utility が右寄せの主役 */
    justify-self:end !important
  }
  .utility .u-divider,
  .utility .u-btn{display:none !important}
  .u-tel{display:flex !important}
  .u-tel .meta{display:block !important}
  .hamburger{
    display:flex !important;
    margin-left:0 !important; /* ★重要：utilityと引っ張り合わないよう auto をリセット */
    justify-self:auto !important
  }
  .header-inner{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:0 14px !important
  }
}

/* v267 :: モバイル画面で電話番号が見切れる問題を修正
 *   680px以下：詳細メタ「受付…」を非表示にして電話番号のみ表示
 *   480px以下（iPhone等）：さらにフォントサイズを縮小
 */
@media(max-width:680px){
  .u-tel .meta{display:none !important}
  .u-tel .num{font-size:18px !important}
  .brand .name{max-width:150px}
  .brand .name .ja{font-size:12.5px}
  .brand .name .en{font-size:8px;letter-spacing:.15em}
}
@media(max-width:480px){
  .u-tel .num{font-size:16px !important;letter-spacing:0 !important}
  .brand .name{max-width:120px}
  .brand .name .ja{font-size:11px;line-height:1.2}
  .brand .name .en{font-size:7.5px}
  .brand .mark{width:34px;height:34px;font-size:16px}
  .header-inner{padding:0 10px !important;gap:8px !important}
}

/* admin-bar 表示時のヘッダー高さ調整（v38との整合） */
.header, .header-inner{box-sizing:border-box}

/* =========================================================
   v44：塗料詳細ページ（page-{paint}.php）専用スタイル
   ========================================================= */

/* スペック概要グリッド */
.paint-spec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 50px
}
@media(max-width:900px){.paint-spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.paint-spec-grid{grid-template-columns:1fr}}

.spec-card{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:22px 20px;text-align:center;position:relative
}
.spec-card.highlight{
  background:linear-gradient(135deg,var(--cream) 0%,#fff8e1 100%);
  border-color:var(--yellow);
  text-align:left
}
.spec-label{
  font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.12em;
  margin:0 0 10px;text-transform:uppercase;font-family:"Inter","Montserrat",sans-serif
}
.spec-value{margin:0;line-height:1.1}
.spec-value .big{
  font-family:"Roboto Condensed",sans-serif;font-size:32px;font-weight:900;
  color:var(--navy);letter-spacing:.02em
}
.spec-value-text{
  font-size:18px;font-weight:900;color:var(--navy);margin:0;
  letter-spacing:.04em
}
.spec-sub{
  font-size:11px;color:var(--muted);font-weight:600;margin:6px 0 0;line-height:1.5
}
.spec-recommend{
  font-size:13px;line-height:1.85;color:var(--text);font-weight:700;margin:0
}

/* カラーバリエーショングリッド */
.paint-color-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px
}
@media(max-width:700px){.paint-color-grid{grid-template-columns:repeat(2,1fr)}}

.paint-color-chip{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:14px;text-align:center;transition:.25s
}
.paint-color-chip:hover{
  transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-color:var(--navy)
}
.chip-swatch{
  width:100%;aspect-ratio:1/1;border-radius:10px;margin-bottom:10px;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.08);
  position:relative
}
.chip-swatch::after{
  content:"";position:absolute;left:8px;bottom:8px;width:14px;height:14px;
  background:rgba(255,255,255,.5);border-radius:50%
}
.chip-name{
  font-size:13px;font-weight:800;color:var(--navy);
  margin:0 0 2px;letter-spacing:.04em
}
.chip-hex{
  font-family:"Roboto Mono","Monaco",monospace;font-size:10.5px;font-weight:700;
  color:var(--red);margin:0;letter-spacing:.04em
}

/* ランニングコストテーブル */
.running-cost-table{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  overflow:hidden;margin-bottom:14px
}
.running-cost-table table{width:100%;border-collapse:collapse;font-size:14px}
.running-cost-table th{
  background:var(--navy);color:#fff;padding:14px 18px;text-align:left;
  font-weight:800;letter-spacing:.06em;font-size:13px
}
.running-cost-table td{
  padding:16px 18px;border-bottom:1px solid var(--line);font-weight:600;color:var(--text)
}
.running-cost-table tr:last-child td{border-bottom:none}
.running-cost-table tr:nth-child(even){background:#fafaf6}
.cost-amount{
  font-family:"Roboto Condensed",sans-serif;
  font-size:18px;font-weight:900;color:var(--navy);letter-spacing:.02em
}
.cost-amount .unit{font-size:12px;font-weight:700;margin-left:2px}
.cost-note{
  font-size:11.5px;color:var(--muted);font-weight:600;margin:0 0 40px;line-height:1.7
}

/* メリット・デメリットリスト */
.merit-list, .demerit-list{
  list-style:none;padding:0;margin:0 0 40px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden
}
.merit-list li, .demerit-list li{
  padding:16px 22px 16px 56px;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.85;color:var(--text);font-weight:600;
  position:relative
}
.merit-list li:last-child, .demerit-list li:last-child{border-bottom:none}
.merit-list li::before{
  content:"✓";position:absolute;left:20px;top:14px;
  width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;line-height:1
}
.demerit-list li::before{
  content:"!";position:absolute;left:20px;top:14px;
  width:24px;height:24px;border-radius:50%;
  background:#FF7A00;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;line-height:1
}

/* CTA */
.paint-cta{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;border-radius:24px;padding:40px 36px;
  text-align:center;margin:0 0 0;position:relative;overflow:hidden
}
.paint-cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;pointer-events:none
}
.paint-cta h3{
  font-size:22px;font-weight:900;color:#fff;letter-spacing:.04em;
  margin:0 0 12px;line-height:1.5;position:relative
}
.paint-cta p{
  font-size:14px;line-height:1.95;color:rgba(255,255,255,.85);
  margin:0 0 24px;font-weight:500;position:relative
}
.paint-cta-buttons{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative
}
.paint-cta-buttons .btn-primary{
  background:var(--yellow);color:var(--navy);
  padding:16px 32px;border-radius:99px;font-weight:900;font-size:14px;
  text-decoration:none;letter-spacing:.04em;
  box-shadow:0 6px 0 var(--yellow-deep);transition:.25s
}
.paint-cta-buttons .btn-primary:hover{
  transform:translateY(-2px);box-shadow:0 8px 0 var(--yellow-deep)
}
.paint-cta-buttons .btn-secondary{
  background:transparent;color:#fff;border:2px solid #fff;
  padding:14px 30px;border-radius:99px;font-weight:900;font-size:14px;
  text-decoration:none;letter-spacing:.04em;transition:.25s;
  font-family:"Roboto Condensed",sans-serif
}
.paint-cta-buttons .btn-secondary:hover{background:#fff;color:var(--navy)}

@media(max-width:600px){
  .paint-cta{padding:30px 22px}
  .paint-cta h3{font-size:17px}
  .paint-cta-buttons .btn-primary,
  .paint-cta-buttons .btn-secondary{padding:13px 22px;font-size:13px}
}

/* =========================================================
   v44：求人ページ（page-recruit.php）スタイル
   ========================================================= */
.recruit-hero-card{
  background:linear-gradient(135deg,var(--cream) 0%,#fff8e1 100%);
  border:2.5px solid var(--yellow);border-radius:24px;
  padding:36px 32px;text-align:center;margin:30px 0 50px;position:relative
}
.recruit-hero-card .badge{
  display:inline-block;background:var(--red);color:#fff;
  font-size:11px;font-weight:900;padding:5px 16px;border-radius:99px;
  letter-spacing:.16em;margin-bottom:14px
}
.recruit-hero-card h3{
  font-size:24px;font-weight:900;color:var(--navy);margin:0 0 12px;
  letter-spacing:.04em;line-height:1.5
}
.recruit-hero-card p{
  font-size:14.5px;line-height:1.95;color:var(--text);font-weight:500;margin:0
}

.recruit-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:50px}
@media(max-width:900px){.recruit-jobs{grid-template-columns:1fr}}
.recruit-job-card{
  background:#fff;border:2px solid var(--line);border-radius:18px;
  padding:26px 24px;transition:.25s;position:relative;overflow:hidden
}
.recruit-job-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.08);border-color:var(--navy)}
.recruit-job-card .job-tag{
  position:absolute;top:14px;right:14px;
  background:var(--yellow);color:var(--navy);font-size:10px;font-weight:900;
  padding:3px 10px;border-radius:99px;letter-spacing:.06em
}
.recruit-job-card h3{
  font-size:18px;font-weight:900;color:var(--navy);margin:0 0 8px;letter-spacing:.04em
}
.recruit-job-card .salary{
  font-family:"Roboto Condensed",sans-serif;font-size:24px;font-weight:900;
  color:var(--red);margin:0 0 14px;letter-spacing:.02em
}
.recruit-job-card .salary small{font-size:13px;color:var(--text);margin-left:4px}
.recruit-job-card p.desc{font-size:13px;line-height:1.85;color:var(--text);font-weight:500;margin:0 0 14px}
.recruit-job-card ul{list-style:none;padding:0;margin:0;font-size:12px;line-height:1.85;color:var(--muted);font-weight:600}
.recruit-job-card ul li::before{content:"▸ ";color:var(--yellow-deep);font-weight:900}

.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:50px}
@media(max-width:900px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.benefit-grid{grid-template-columns:1fr}}
.benefit-card{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:18px 16px;text-align:center;transition:.2s
}
.benefit-card:hover{border-color:var(--yellow);transform:translateY(-2px)}
.benefit-card .icon{
  width:50px;height:50px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;font-size:24px
}
.benefit-card h4{font-size:13px;font-weight:900;color:var(--navy);margin:0 0 6px;letter-spacing:.04em}
.benefit-card p{font-size:11.5px;line-height:1.7;color:var(--text);font-weight:500;margin:0}


/* =========================================================
   v45：無機塗料おすすめ表示
   ========================================================= */
.paint-recommended{
  border-color:var(--red) !important;
  border-width:2.5px !important;
  background:linear-gradient(180deg,#fff 0%,#fff8e1 100%) !important;
  box-shadow:0 8px 24px rgba(230,0,18,.1) !important
}
.paint-recommended:hover{
  border-color:var(--red-deep) !important;
  transform:translateY(-4px) !important;
  box-shadow:0 16px 32px rgba(230,0,18,.18) !important
}
.rec-badge{
  position:absolute;top:-12px;left:18px;
  background:var(--red);color:#fff;
  font-size:11px;font-weight:900;
  padding:5px 14px;border-radius:99px;
  letter-spacing:.1em;
  box-shadow:0 4px 10px rgba(230,0,18,.3);
  z-index:2
}
.rec-badge::before{
  content:"★ "
}


/* =========================================================
   v46：見切れ修正＋CTAアイコン・電話番号リデザイン
   ========================================================= */

/* バッジが見切れないように overflow:visible */
.paint-recommended,
.sub-card.paint-recommended,
.sub-section .sub-card.paint-recommended{
  overflow:visible !important
}
/* 推奨カードの上端に余白を確保（バッジ位置と重ならないように） */
.paint-recommended{
  margin-top:14px !important;
  padding-top:30px !important
}
/* バッジを少し見えやすく */
.rec-badge{
  top:-13px !important;
  font-size:11.5px !important;
  padding:6px 16px !important;
  letter-spacing:.08em !important;
  box-shadow:0 6px 14px rgba(230,0,18,.35) !important;
  white-space:nowrap !important
}

/* その他、絶対配置バッジが見切れる可能性のあるカードを保護 */
.sub-card{position:relative}
.recruit-job-card .job-tag{z-index:3}

/* =========================================================
   v46：paint-cta リデザイン（電話番号 大型・SVGアイコン）
   ========================================================= */
.paint-cta{
  padding:44px 36px !important
}
.paint-cta h3{
  font-size:22px !important;line-height:1.55;
  margin:0 0 10px !important
}
.paint-cta p{margin-bottom:30px !important}
.paint-cta-buttons{
  gap:18px !important;
  align-items:stretch
}

/* 見積もりボタン（メインCTA） */
.paint-cta-buttons .btn-primary{
  background:var(--yellow) !important;color:var(--navy) !important;
  padding:18px 32px !important;font-size:15px !important;
  border-radius:14px !important;
  box-shadow:0 6px 0 var(--yellow-deep) !important;
  display:inline-flex !important;align-items:center !important;gap:12px !important;
  letter-spacing:.06em !important;text-decoration:none !important;
  transition:.25s !important;font-weight:900 !important
}
.paint-cta-buttons .btn-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 0 var(--yellow-deep) !important
}
.paint-cta-buttons .btn-primary svg{
  width:24px;height:24px;flex-shrink:0;fill:currentColor
}

/* 電話ボタン（大型化＋アイコン整列） */
.paint-cta-buttons .btn-secondary{
  background:#fff !important;color:var(--navy) !important;
  border:none !important;
  padding:14px 26px !important;
  font-size:15px !important;
  font-family:"Roboto Condensed","Inter",sans-serif !important;
  border-radius:14px !important;
  display:inline-flex !important;align-items:center !important;gap:12px !important;
  letter-spacing:.02em !important;text-decoration:none !important;
  transition:.25s !important;font-weight:900 !important;
  box-shadow:0 6px 0 rgba(0,0,0,.18) !important;
  min-height:60px;line-height:1
}
.paint-cta-buttons .btn-secondary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 0 rgba(0,0,0,.18) !important;
  background:#fff !important
}
.paint-cta-buttons .btn-secondary .phone-ico{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 2px 6px rgba(230,0,18,.3)
}
.paint-cta-buttons .btn-secondary .phone-ico svg{
  width:22px;height:22px;fill:#fff
}
.paint-cta-buttons .btn-secondary .tel-text{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1
}
.paint-cta-buttons .btn-secondary .tel-text .tel-label{
  font-size:9.5px;font-weight:800;color:var(--muted);letter-spacing:.16em;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-cta-buttons .btn-secondary .tel-text .tel-num{
  font-size:24px;font-weight:900;color:var(--navy);letter-spacing:.02em;
  font-family:"Roboto Condensed","Inter",sans-serif
}

@media(max-width:600px){
  .paint-cta-buttons{flex-direction:column;width:100%}
  .paint-cta-buttons .btn-primary,
  .paint-cta-buttons .btn-secondary{width:100%;justify-content:center}
  .paint-cta-buttons .btn-secondary .tel-text .tel-num{font-size:20px}
}


/* =========================================================
   v47：sub-card .num の数字を大きく＋完全中央配置
   ========================================================= */
.sub-card .num{
  width:52px !important;height:52px !important;
  font-size:20px !important;
  line-height:1 !important;
  /* flexで完全中央 */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  /* テキストの上下バランスを揃えるための微調整 */
  padding-top:2px !important;
  letter-spacing:.02em !important;
  /* 数字を浮かせる立体感 */
  box-shadow:0 4px 0 var(--yellow-deep);
  margin-bottom:18px !important
}
/* レスポンシブ */
@media(max-width:600px){
  .sub-card .num{
    width:44px !important;height:44px !important;
    font-size:17px !important;
    margin-bottom:14px !important
  }
}


/* =========================================================
   v48：ワニくんサイズを小画面で更に縮小
   ========================================================= */
@media(max-width:900px){
  .wani{width:70px !important}
  .wani.size-s{width:54px !important}
  .wani.size-l{width:90px !important}
}
@media(max-width:700px){
  .wani{width:58px !important}
  .wani.size-s{width:44px !important}
  .wani.size-l{width:74px !important}
}
@media(max-width:600px){
  .wani{width:50px !important}
  .wani.size-s{width:38px !important}
  .wani.size-l{width:64px !important}
}
@media(max-width:480px){
  .wani{width:42px !important}
  .wani.size-s{width:32px !important}
  .wani.size-l{width:54px !important}
  /* hide-mobileを持つワニはスマホで非表示 */
  .wani.hide-mobile{display:none !important}
}

/* =========================================================
   v49：塗料詳細ページ 全面リデザイン
   ・大きめフォント・ゆとりある余白・写真ファースト
   ========================================================= */

/* セクション間の余白を全体的に拡大 */
.paint-page-v2 .sub-section{padding:10px 0 !important}
@media(max-width:700px){.paint-page-v2 .sub-section{padding:10px 0 !important}}

/* === ① ビジュアルヒーローカード（写真+スペック） === */
.paint-vhero{
  display:grid;grid-template-columns:1.3fr 1fr;gap:30px;
  margin:30px 0 60px;align-items:stretch
}
@media(max-width:900px){.paint-vhero{grid-template-columns:1fr;gap:20px}}

.paint-vhero-photo{
  position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:4/3;background:#e5e2d8;
  box-shadow:0 20px 50px -10px rgba(31,47,77,.18)
}
.paint-vhero-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:.6s
}
.paint-vhero-photo:hover img{transform:scale(1.05)}
.paint-vhero-photo .photo-tag{
  position:absolute;top:18px;left:18px;
  background:rgba(31,47,77,.85);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.16em;
  padding:6px 14px;border-radius:99px;
  backdrop-filter:blur(8px);
  font-family:"Inter","Montserrat",sans-serif
}

.paint-vhero-info{
  background:linear-gradient(135deg,var(--cream) 0%,#fff8e1 100%);
  border:2.5px solid var(--yellow);border-radius:24px;
  padding:32px 28px;display:flex;flex-direction:column;justify-content:center;
  position:relative
}
.paint-vhero-info .maker-badge{
  display:inline-block;background:var(--navy);color:var(--yellow);
  font-size:11px;font-weight:900;padding:5px 14px;border-radius:99px;
  letter-spacing:.12em;margin-bottom:16px;align-self:flex-start;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-vhero-info .price-row{
  display:flex;align-items:baseline;gap:6px;margin-bottom:6px
}
.paint-vhero-info .price-label{
  font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.12em;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-vhero-info .price-main{
  font-family:"Roboto Condensed",sans-serif;
  font-size:54px;font-weight:900;color:var(--red);
  letter-spacing:.01em;line-height:1
}
.paint-vhero-info .price-unit{
  font-size:18px;font-weight:800;color:var(--text);margin-left:4px
}
.paint-vhero-info .price-sub{
  font-size:12px;color:var(--muted);font-weight:600;margin:8px 0 22px
}
.paint-vhero-info .meta-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding-top:20px;border-top:1.5px dashed rgba(31,47,77,.18)
}
.paint-vhero-info .meta-item{
  display:flex;flex-direction:column;gap:2px
}
.paint-vhero-info .meta-label{
  font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.12em;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-vhero-info .meta-value{
  font-size:18px;font-weight:900;color:var(--navy);letter-spacing:.02em;line-height:1.3
}
.paint-vhero-info .meta-value.small{font-size:14px}

@media(max-width:700px){
  .paint-vhero-info{padding:24px 22px}
  .paint-vhero-info .price-main{font-size:42px}
}

/* === ② 概要セクション === */
.paint-intro{
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;
  align-items:center;margin-bottom:40px
}
@media(max-width:900px){.paint-intro{grid-template-columns:1fr;gap:24px}}
.paint-intro-text h3{
  font-size:26px !important;font-weight:900;color:var(--navy);
  letter-spacing:.04em;line-height:1.5;margin:0 0 18px
}
.paint-intro-text h3 em{
  font-style:normal;
  background:linear-gradient(transparent 60%,var(--yellow) 60%);padding:0 6px
}
.paint-intro-text p{
  font-size:16px;line-height:2.1;color:var(--text);font-weight:500;margin:0
}
.paint-intro-photo{
  border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#e5e2d8;
  box-shadow:0 12px 30px rgba(31,47,77,.1)
}
.paint-intro-photo img{width:100%;height:100%;object-fit:cover}

/* === ③ 特徴グリッド（写真付き大きめ） === */
.paint-features-v2{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:40px
}
@media(max-width:700px){.paint-features-v2{grid-template-columns:1fr;gap:16px}}
.feature-card-v2{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  overflow:hidden;transition:.3s;display:flex;flex-direction:column
}
.feature-card-v2:hover{
  transform:translateY(-4px);box-shadow:0 16px 32px rgba(31,47,77,.12);
  border-color:var(--yellow)
}
.feature-card-v2 .feat-photo{
  aspect-ratio:16/9;overflow:hidden;background:#e5e2d8;position:relative
}
.feature-card-v2 .feat-photo img{
  width:100%;height:100%;object-fit:cover;transition:.6s
}
.feature-card-v2:hover .feat-photo img{transform:scale(1.05)}
.feature-card-v2 .feat-num{
  position:absolute;top:14px;left:14px;
  background:var(--yellow);color:var(--navy);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Roboto Condensed","Montserrat",sans-serif;
  font-size:20px;font-weight:900;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:2
}
.feature-card-v2 .feat-body{padding:24px 22px}
.feature-card-v2 .feat-body h4{
  font-size:18px;font-weight:900;color:var(--navy);
  letter-spacing:.04em;margin:0 0 10px;line-height:1.4
}
.feature-card-v2 .feat-body p{
  font-size:14.5px;line-height:2;color:var(--text);font-weight:500;margin:0
}

/* === ④ カラーバリエーション（より大きく） === */
.paint-color-grid-v2{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px
}
@media(max-width:700px){.paint-color-grid-v2{grid-template-columns:repeat(2,1fr)}}
.color-chip-v2{
  background:#fff;border:1.5px solid var(--line);border-radius:16px;
  padding:0;transition:.3s;overflow:hidden;cursor:default
}
.color-chip-v2:hover{
  transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.1);
  border-color:var(--navy)
}
.color-chip-v2 .swatch-v2{
  width:100%;aspect-ratio:1/1;
  position:relative;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.06)
}
.color-chip-v2 .swatch-v2::after{
  content:"";position:absolute;left:10px;bottom:10px;
  width:18px;height:18px;background:rgba(255,255,255,.45);border-radius:50%
}
.color-chip-v2 .info-v2{padding:14px 16px;text-align:center}
.color-chip-v2 .info-v2 .name-v2{
  font-size:14px;font-weight:900;color:var(--navy);
  margin:0 0 4px;letter-spacing:.04em
}
.color-chip-v2 .info-v2 .hex-v2{
  font-family:"Roboto Mono","Monaco",monospace;
  font-size:11px;font-weight:700;color:var(--red);
  margin:0;letter-spacing:.06em
}

/* === ⑤ コスト比較タイムライン === */
.cost-timeline{
  background:linear-gradient(135deg,#fff 0%,var(--cream) 100%);
  border:1.5px solid var(--line);border-radius:20px;
  padding:36px 32px;margin-bottom:30px
}
@media(max-width:700px){.cost-timeline{padding:24px 20px}}
.cost-timeline-bars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px
}
@media(max-width:700px){.cost-timeline-bars{grid-template-columns:1fr;gap:16px}}
.cost-bar-card{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:22px 20px;text-align:center;position:relative
}
.cost-bar-card .cost-period{
  font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.16em;
  margin-bottom:8px;font-family:"Inter","Montserrat",sans-serif
}
.cost-bar-card .cost-amount-big{
  font-family:"Roboto Condensed",sans-serif;
  font-size:30px;font-weight:900;color:var(--navy);
  letter-spacing:.02em;line-height:1.05;margin-bottom:8px
}
.cost-bar-card .cost-detail{
  font-size:12px;line-height:1.7;color:var(--text);font-weight:600;margin:0
}
.cost-bar-card.highlight{
  border-color:var(--red);background:linear-gradient(180deg,#fff 0%,#fff8e1 100%);
  box-shadow:0 8px 20px rgba(230,0,18,.1)
}
.cost-bar-card.highlight::before{
  content:"NOW";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--red);color:#fff;font-size:10px;font-weight:900;
  padding:3px 12px;border-radius:99px;letter-spacing:.12em;
  font-family:"Inter","Montserrat",sans-serif
}

/* === ⑥ 大型 メリット・デメリット === */
.merit-list-v2, .demerit-list-v2{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  list-style:none;padding:0;margin:0 0 40px
}
@media(max-width:700px){.merit-list-v2, .demerit-list-v2{grid-template-columns:1fr;gap:12px}}
.merit-list-v2 li, .demerit-list-v2 li{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:18px 22px 18px 60px;
  font-size:15px;line-height:1.95;color:var(--text);font-weight:600;
  position:relative;transition:.25s
}
.merit-list-v2 li:hover, .demerit-list-v2 li:hover{
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.06)
}
.merit-list-v2 li{border-left:5px solid var(--green)}
.demerit-list-v2 li{border-left:5px solid #FF7A00}
.merit-list-v2 li::before{
  content:"";position:absolute;left:18px;top:18px;
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900
}
.merit-list-v2 li::before{content:"✓"}
.demerit-list-v2 li::before{
  content:"!";position:absolute;left:18px;top:18px;
  width:28px;height:28px;border-radius:50%;background:#FF7A00;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;font-style:italic
}

/* === ⑦ 施工イメージギャラリー === */
.paint-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px
}
@media(max-width:700px){.paint-gallery{grid-template-columns:repeat(2,1fr)}}
.paint-gallery .gal-item{
  aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:#e5e2d8;transition:.4s;position:relative
}
.paint-gallery .gal-item img{
  width:100%;height:100%;object-fit:cover;transition:.5s
}
.paint-gallery .gal-item:hover img{transform:scale(1.06)}
.paint-gallery .gal-item .gal-cap{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent 0,rgba(0,0,0,.7) 100%);
  color:#fff;padding:30px 14px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em
}

/* === ⑧ セクションタイトル全体大型化 === */
.paint-page-v2 .wp-h{
  font-size:24px !important;
  margin:50px 0 24px !important;
  padding:18px 22px !important
}
.paint-page-v2 .wp-h .wp-h-en{
  font-size:12px !important;letter-spacing:.18em !important
}
.paint-page-v2 .sub-inner{
  max-width:1080px !important
}
@media(max-width:700px){
  .paint-page-v2 .wp-h{font-size:18px !important;padding:14px 16px !important}
  .paint-page-v2 .sub-inner{padding:0 18px !important}
}

/* === セクション説明文 === */
.section-lead{
  font-size:15.5px;line-height:2.1;color:var(--text);font-weight:500;
  margin:0 0 30px;max-width:760px
}

/* =========================================================
   v50：スペックカードB案＋モバイル余白圧縮
   ========================================================= */

/* B案：コンパクト＋ペイント缶装飾 */
.paint-vhero-info{
  background:linear-gradient(135deg,var(--cream) 0%,#fff8e1 100%);
  border:2.5px solid var(--yellow);border-radius:24px;
  padding:22px 24px 24px !important;
  display:block !important;
  position:relative;overflow:hidden
}
/* ペイント缶 装飾（薄く右下） */
.paint-vhero-info::after{
  content:"";
  position:absolute;right:-22px;bottom:-22px;
  width:160px;height:160px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%231F3A6B'><rect x='20' y='30' width='60' height='55' rx='4'/><rect x='30' y='20' width='40' height='14' rx='3'/><rect x='42' y='18' width='16' height='6'/><path d='M28 45 L72 45 L72 50 L28 50 Z' fill='%23FFD400'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  opacity:.07;pointer-events:none
}

/* 上段：メーカー badge ＋ PRICE FROM ラベル */
.paint-vhero-info .vhero-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;position:relative;z-index:1
}
.paint-vhero-info .maker-badge{
  display:inline-block !important;
  background:var(--navy);color:var(--yellow);
  font-size:11px;font-weight:900;padding:5px 14px;border-radius:99px;
  letter-spacing:.12em;margin:0 !important;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-vhero-info .price-from{
  font-family:"Inter","Montserrat",sans-serif;
  font-size:9.5px;font-weight:900;color:var(--muted);letter-spacing:.18em
}

/* 中段：価格＋単位＋目安をinline */
.paint-vhero-info .price-row-v2{
  display:flex;align-items:baseline;gap:8px;margin-bottom:14px;
  flex-wrap:wrap;position:relative;z-index:1
}
.paint-vhero-info .price-main{
  font-family:"Roboto Condensed",sans-serif !important;
  font-size:50px !important;font-weight:900;color:var(--red);
  line-height:.95 !important;letter-spacing:.01em
}
.paint-vhero-info .price-unit{
  font-size:20px !important;font-weight:800;color:var(--text);margin-left:0
}
.paint-vhero-info .price-sub{
  font-size:11px !important;color:var(--muted);font-weight:600;
  margin:0 0 0 auto !important;text-align:right;flex-shrink:0
}

/* 下段：1枚カード内に2列で（耐用 ｜ こんな方に） */
.paint-vhero-info .meta-card{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.7);border-radius:14px;
  border:1px dashed rgba(31,47,77,.18);
  position:relative;z-index:1
}
.paint-vhero-info .meta-col-left{
  text-align:center;padding-right:14px;border-right:1px dashed rgba(31,47,77,.18);
  display:flex;flex-direction:column;justify-content:center
}
.paint-vhero-info .meta-col-right{display:flex;flex-direction:column;justify-content:center}
.paint-vhero-info .meta-label-sm{
  font-size:9.5px !important;font-weight:800;color:var(--muted);
  letter-spacing:.14em;margin:0 0 3px !important;
  font-family:"Inter","Montserrat",sans-serif
}
.paint-vhero-info .meta-value-md{
  font-size:17px !important;font-weight:900;color:var(--navy);
  margin:0 !important;letter-spacing:.02em;white-space:nowrap;line-height:1.2
}
.paint-vhero-info .meta-value-sm{
  font-size:12px !important;font-weight:700;color:var(--text);
  margin:0 !important;line-height:1.55
}

/* 旧 .meta-row の名残ルールは無効化 */
.paint-vhero-info .meta-row,
.paint-vhero-info .price-label{display:none !important}

@media(max-width:700px){
  .paint-vhero-info{padding:18px 18px 20px !important}
  .paint-vhero-info .price-main{font-size:42px !important}
  .paint-vhero-info .price-unit{font-size:17px !important}
  .paint-vhero-info .price-sub{flex-basis:100%;text-align:left;margin-top:4px !important}
  .paint-vhero-info .meta-value-md{font-size:15px !important}
  .paint-vhero-info::after{width:120px;height:120px;right:-15px;bottom:-15px}
}

/* =========================================================
   モバイル時 セクション余白圧縮
   ========================================================= */
@media(max-width:700px){
  .paint-page-v2 .sub-section{padding:10px 0 !important}
  .paint-page-v2 .wp-h{
    margin:24px 0 14px !important;
    padding:12px 14px !important;
    font-size:17px !important
  }
  .paint-page-v2 .section-lead{
    font-size:13.5px !important;line-height:1.95 !important;
    margin:0 0 18px !important
  }
  .paint-page-v2 .sub-inner{padding:0 16px !important}
  /* セクション間の隙間も詰める */
  .paint-vhero{margin:14px 0 30px !important;gap:14px !important}
  .paint-intro{margin-bottom:24px !important;gap:18px !important}
}

/* タブレット（700-900px）も少し詰める */
@media(min-width:701px) and (max-width:900px){
  .paint-page-v2 .sub-section{padding:15px 0 !important}
  .paint-page-v2 .wp-h{margin:30px 0 18px !important}
}

/* =========================================================
   v51：モバイル時のwp-h縦積み＋コスト比較テーブル風
   ========================================================= */
@media(max-width:700px){
  /* ===== ① wp-h：FEATURESサブタイトル風＋タイトル下に左揃え ===== */
  .paint-page-v2 .wp-h{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    padding:12px 14px !important;
    margin:24px 0 14px !important;
    line-height:1.4 !important
  }
  .paint-page-v2 .wp-h .wp-h-en{
    font-size:10px !important;
    letter-spacing:.24em !important;
    margin-bottom:2px;display:inline-block !important
  }

  /* ===== ② コスト比較：テーブル風シンプル ===== */
  .paint-page-v2 .cost-timeline{
    background:#fff !important;
    border:1.5px solid var(--line) !important;
    border-radius:12px !important;
    padding:0 !important;
    overflow:hidden;margin-bottom:14px !important
  }
  .paint-page-v2 .cost-timeline-bars{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:0 !important;
    margin-top:0 !important
  }
  /* テーブルヘッダー擬似 */
  .paint-page-v2 .cost-timeline-bars::before{
    content:"期間 / 累計コスト";
    background:var(--navy);color:var(--yellow);
    padding:9px 14px;
    font-size:10.5px;font-weight:800;letter-spacing:.12em;
    font-family:"Inter","Montserrat",sans-serif
  }
  .paint-page-v2 .cost-bar-card{
    background:#fff !important;
    border:none !important;
    border-radius:0 !important;
    border-bottom:1px solid var(--line) !important;
    padding:10px 14px !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    align-items:center !important;
    text-align:left !important;
    box-shadow:none !important
  }
  .paint-page-v2 .cost-bar-card:last-child{border-bottom:none !important}
  .paint-page-v2 .cost-bar-card.highlight{
    background:#fff8e1 !important
  }
  /* NOW バッジ：highlightの上に被さらないように左カラム内へ */
  .paint-page-v2 .cost-bar-card.highlight::before{
    content:"NOW" !important;
    position:static !important;
    background:var(--red);color:#fff;
    font-size:8.5px;font-weight:900;
    padding:1.5px 7px;border-radius:99px;
    letter-spacing:.08em;
    grid-column:1;grid-row:1;
    align-self:flex-start;justify-self:flex-start;
    transform:none !important;
    margin-right:6px;
    display:inline-block !important;width:fit-content
  }
  .paint-page-v2 .cost-bar-card .cost-period{
    grid-column:1;grid-row:1;
    margin:0 !important;
    font-size:12px !important;
    letter-spacing:.04em !important;
    color:var(--navy) !important;
    font-weight:800 !important;
    align-self:center
  }
  /* highlight時はperiodをNOWの隣に */
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    grid-column:1;grid-row:1;
    display:inline;margin-left:6px !important
  }
  .paint-page-v2 .cost-bar-card .cost-detail{
    grid-column:1;grid-row:2;
    margin:2px 0 0 !important;
    font-size:9.5px !important;
    color:var(--muted) !important;
    font-weight:600 !important;
    line-height:1.4 !important
  }
  .paint-page-v2 .cost-bar-card .cost-amount-big{
    grid-column:2;grid-row:1 / span 2;
    justify-self:end;align-self:center;
    font-size:18px !important;
    color:var(--navy) !important;
    margin:0 !important;
    letter-spacing:.02em !important;
    white-space:nowrap;line-height:1
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    color:var(--red) !important
  }
}

/* =========================================================
   v52：#1 #2 #3 一括反映
   ========================================================= */

/* ===== #2：ワニくんサイズ再UP（v48を上書き） ===== */
@media(max-width:900px){
  .wani{width:95px !important}
  .wani.size-s{width:72px !important}
  .wani.size-l{width:120px !important}
}
@media(max-width:700px){
  .wani{width:78px !important}
  .wani.size-s{width:60px !important}
  .wani.size-l{width:100px !important}
}
@media(max-width:600px){
  .wani{width:65px !important}
  .wani.size-s{width:50px !important}
  .wani.size-l{width:84px !important}
}
@media(max-width:480px){
  .wani{width:52px !important}
  .wani.size-s{width:40px !important}
  .wani.size-l{width:68px !important}
}

/* ===== #1：sub-card のモバイル余白圧縮 ===== */
@media(max-width:700px){
  .grid-2, .grid-3, .grid-4{gap:14px !important}
  .sub-card{padding:20px 18px !important}
  .sub-card h3{font-size:16px !important;margin-bottom:8px !important}
  .sub-card p{font-size:13.5px !important;line-height:1.85 !important}
  .sub-card .num{
    width:38px !important;height:38px !important;
    font-size:15px !important;margin-bottom:10px !important
  }
}

/* ===== #3：30年累計コスト比較表 モバイル時はB案カードリスト ===== */
.cost-compare-mobile{display:none}

@media(max-width:700px){
  /* 既存のテーブルを隠す */
  .running-cost-table.compare-30y{display:none !important}
  /* モバイル用カードリスト表示 */
  .cost-compare-mobile{
    display:block !important;
    background:#fff;border:1.5px solid var(--line);border-radius:12px;
    overflow:hidden;margin-bottom:24px
  }
  .ccm-head{
    background:var(--navy);color:var(--yellow);
    padding:10px 14px;font-size:11px;font-weight:800;letter-spacing:.12em;
    text-align:center;font-family:"Inter","Montserrat",sans-serif
  }
  .ccm-row{
    padding:11px 14px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    flex-wrap:wrap
  }
  .ccm-row:last-child{border-bottom:none}
  .ccm-row.highlight{
    background:#fff8e1;border-left:4px solid var(--red)
  }
  .ccm-name{
    font-size:12.5px;font-weight:900;color:var(--navy);
    margin:0;line-height:1.3;flex:1;min-width:0
  }
  .ccm-name .years{
    font-size:10px;color:var(--muted);font-weight:600;margin-left:3px
  }
  .ccm-row.highlight .ccm-name{color:var(--red)}
  .ccm-total{
    font-family:"Roboto Condensed",sans-serif;
    font-size:14px;font-weight:800;color:var(--muted);
    letter-spacing:.02em;white-space:nowrap;flex-shrink:0
  }
  .ccm-row.highlight .ccm-total{
    font-size:16px;font-weight:900;color:var(--red)
  }
  .ccm-detail{
    flex-basis:100%;font-size:10px;color:var(--muted);font-weight:600;
    margin:2px 0 0;line-height:1.5
  }
}

/* =========================================================
   v53：#1 カラーチップ低身長＋#2 NOWバッジ被り解消＋#3 ワニくん簡素化
   ========================================================= */

/* === #1：カラーチップ モバイルで4:3＋余白圧縮 === */
@media(max-width:700px){
  .color-chip-v2 .swatch-v2{aspect-ratio:4/3 !important}
  .color-chip-v2 .info-v2{padding:8px 10px !important}
  .color-chip-v2 .info-v2 .name-v2{
    font-size:12px !important;margin:0 0 2px !important
  }
  .color-chip-v2 .info-v2 .hex-v2{font-size:10px !important}
  .paint-color-grid-v2{gap:10px !important}
}

/* === #2：NOWバッジ被り解消 === */
.cost-bar-card.highlight{
  overflow:visible !important;
  padding-top:30px !important;
  margin-top:6px
}
.cost-bar-card.highlight::before{
  top:-13px !important;
  font-size:11px !important;
  padding:4px 14px !important;
  letter-spacing:.14em !important;
  box-shadow:0 4px 10px rgba(230,0,18,.35) !important;
  border:2px solid #fff
}
.cost-timeline-bars{overflow:visible !important}
.cost-timeline{overflow:visible !important}

/* === #3：コンタクトカード簡素化 === */
.kurako-contact-card .kcc-head{display:none !important}
.kcc-title-row{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;margin:0 0 4px
}
.kcc-title-row h3{margin:0 !important}
.kcc-mini-wani{
  width:68px;height:68px;flex-shrink:0;
  transform:translateY(2px);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.15));
  animation:wani-mini-bob 3s ease-in-out infinite
}
@keyframes wani-mini-bob{
  0%,100%{transform:translateY(2px) rotate(-3deg)}
  50%{transform:translateY(-4px) rotate(3deg)}
}
@media(max-width:600px){
  .kcc-mini-wani{width:56px;height:56px}
}
@media(max-width:380px){
  .kcc-mini-wani{width:48px;height:48px}
}

/* =========================================================
   v55：お客様の声セクション＋初めての方へページ
   ========================================================= */

/* ===== お客様の声 セクションヘッダー ===== */
.voices-section .voices-head{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;border-radius:16px 16px 0 0;
  padding:24px 28px;text-align:center
}
.voices-section .voices-badge{
  display:inline-block;background:var(--yellow);color:var(--navy);
  font-size:11px;font-weight:900;padding:4px 14px;border-radius:99px;
  letter-spacing:.18em;margin-bottom:8px;
  font-family:"Inter","Montserrat",sans-serif
}
.voices-section .voices-title{
  font-size:24px;font-weight:900;color:#fff;
  letter-spacing:.04em;line-height:1.45;margin:0 0 8px
}
.voices-section .voices-title em{
  font-style:normal;color:var(--yellow);
  background:linear-gradient(transparent 60%,rgba(255,212,0,.18) 60%);
  padding:0 6px
}
.voices-section .voices-lead{
  font-size:13px;color:rgba(255,255,255,.85);
  font-weight:500;margin:0;line-height:1.85
}

/* 統計バー */
.voices-stats{
  background:#fff;border:1.5px solid var(--yellow);border-top:none;
  padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  text-align:center
}
.voices-stats .vs-item{padding:0 4px}
.voices-stats .vs-item:nth-child(2){
  border-left:1px dashed var(--line);border-right:1px dashed var(--line)
}
.voices-stats .vs-value{
  font-family:"Roboto Condensed",sans-serif;
  font-size:32px;font-weight:900;color:var(--red);
  letter-spacing:.02em;line-height:1;margin:0
}
.voices-stats .vs-value.vs-navy{color:var(--navy)}
.voices-stats .vs-value .vs-unit{font-size:13px;color:var(--muted)}
.voices-stats .vs-label{
  font-size:11px;color:var(--muted);font-weight:700;
  margin:4px 0 0;letter-spacing:.04em
}

/* お客様の声 カードグリッド */
.voices-grid{
  background:#fff;border:1.5px solid var(--yellow);border-top:none;
  padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px
}
.voices-cta{
  background:#fff;border:1.5px solid var(--yellow);border-top:none;
  border-radius:0 0 16px 16px;padding:18px;text-align:center
}
.voices-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;background:var(--navy);color:var(--yellow);
  border-radius:99px;font-size:13px;font-weight:900;
  letter-spacing:.06em;text-decoration:none;transition:.25s
}
.voices-cta-btn:hover{
  background:var(--navy-deep);transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(31,47,77,.18)
}
.voices-empty{
  grid-column:1/-1;text-align:center;padding:40px 20px;
  color:var(--muted);font-weight:600;line-height:1.85;font-size:13.5px
}

/* お客様の声 カード */
.voice-card{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  overflow:hidden;transition:.25s
}
.voice-card:hover{
  transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.08);
  border-color:var(--yellow)
}
.voice-card .voice-photo{
  aspect-ratio:4/3;background:linear-gradient(135deg,#3D4F5F,#5C7A99);
  background-size:cover;background-position:center;
  position:relative;overflow:hidden
}
.voice-card .voice-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(31,47,77,.4),rgba(31,47,77,.6));
  pointer-events:none
}
.voice-card .vc-cat-tag{
  position:absolute;top:10px;left:10px;
  background:rgba(31,47,77,.92);color:#fff;
  font-size:10px;font-weight:800;padding:3px 10px;border-radius:99px;
  letter-spacing:.04em;backdrop-filter:blur(4px);z-index:2
}
.voice-card .vc-quote-mark{
  position:absolute;right:14px;bottom:4px;
  color:rgba(255,212,0,.85);font-size:72px;
  font-family:Georgia,serif;font-weight:900;line-height:.7;z-index:2
}
.voice-card .voice-body{padding:16px 18px 16px}
.voice-card .voice-stars{
  color:#F5B800;font-size:15px;
  margin:0 0 6px;letter-spacing:.04em;line-height:1
}
.voice-card .voice-stars .empty{color:#ddd}
.voice-card .voice-quote{
  font-size:14px;color:var(--navy);font-weight:900;
  line-height:1.55;margin:0 0 10px;letter-spacing:.02em
}
.voice-card .voice-text{
  font-size:12px;color:var(--text);
  line-height:1.85;margin:0 0 12px;font-weight:500
}
.voice-card .voice-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;color:var(--muted);font-weight:700;
  padding-top:10px;border-top:1px solid var(--line);gap:8px
}

/* レスポンシブ */
@media(max-width:700px){
  .voices-section .voices-head{padding:18px 20px;border-radius:14px 14px 0 0}
  .voices-section .voices-title{font-size:18px}
  .voices-section .voices-lead{font-size:11.5px}
  .voices-stats{padding:14px;grid-template-columns:repeat(3,1fr)}
  .voices-stats .vs-value{font-size:22px}
  .voices-stats .vs-label{font-size:9.5px}
  .voices-grid{grid-template-columns:1fr;padding:14px;gap:12px}
  .voice-card .voice-body{padding:12px 14px 14px}
  .voice-card .voice-quote{font-size:13px}
  .voice-card .voice-text{font-size:11.5px}
}

/* ===== 初めての方へ FAQ アコーディオン ===== */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;transition:.25s
}
.faq-item[open]{border-color:var(--yellow);box-shadow:0 8px 18px rgba(31,47,77,.06)}
.faq-item summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 20px;cursor:pointer;
  font-size:14.5px;font-weight:800;color:var(--navy);
  letter-spacing:.04em;line-height:1.55;
  list-style:none;position:relative
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";margin-left:auto;font-size:22px;color:var(--yellow-deep);
  font-weight:900;line-height:1;transition:.25s;flex-shrink:0
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-q{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Inter","Montserrat",sans-serif;
  font-size:13px;font-weight:900;line-height:1
}
.faq-item .faq-a{
  padding:0 20px 18px 58px;
  font-size:14px;line-height:2;color:var(--text);font-weight:500
}
.faq-item .faq-a p{margin:0}
@media(max-width:700px){
  .faq-item summary{font-size:13px;padding:14px 16px}
  .faq-item .faq-a{padding:0 16px 14px 50px;font-size:13px}
  .faq-item .faq-q{width:24px;height:24px;font-size:12px}
}

/* ===== first-time-page 微調整 ===== */
.first-time-page .running-cost-table.compare-souba td{
  font-size:14px;font-weight:700
}
.first-time-page .running-cost-table.compare-souba .cost-amount{
  font-size:14px
}
@media(max-width:700px){
  .first-time-page .running-cost-table.compare-souba{
    overflow-x:auto
  }
  .first-time-page .running-cost-table.compare-souba td{font-size:11.5px;padding:10px 8px}
  .first-time-page .running-cost-table.compare-souba th{font-size:10.5px;padding:8px 6px}
}

/* =========================================================
   v56：初めての方へ 動線スタイル
   ========================================================= */

/* ヘッダーナビ「初めての方へ」を黄色強調 */
.gnav a.gnav-item.gnav-item-first{
  background:var(--yellow);color:var(--navy) !important;
  padding:0 14px !important;height:auto !important;
  align-self:center;border-radius:99px;
  font-weight:900 !important;letter-spacing:.06em !important;
  box-shadow:0 4px 0 var(--yellow-deep);
  transition:.25s
}
.gnav a.gnav-item.gnav-item-first:hover{
  background:var(--yellow-deep);color:var(--navy) !important;
  transform:translateY(-2px);box-shadow:0 6px 0 var(--yellow-deep)
}
.gnav a.gnav-item.gnav-item-first::after{display:none !important}
@media(max-width:1280px){
  .gnav a.gnav-item.gnav-item-first{padding:0 10px !important;font-size:11.5px !important}
}

/* ヒーローの「初めての方はこちら」リンク v227 :: margin-top を 0 に（gap で管理） */
.hero-link.hero-link-first{
  background:var(--yellow);color:var(--navy);
  font-weight:900;letter-spacing:.04em;
  padding:14px 24px;border-radius:99px;
  box-shadow:0 5px 0 var(--yellow-deep);
  margin-top:0;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;transition:.25s
}
.hero-link.hero-link-first:hover{
  transform:translateY(-2px);box-shadow:0 7px 0 var(--yellow-deep)
}

/* FIRST TIME バナー（フロントページ） */
.first-time-banner{padding:30px 0;background:var(--cream)}
.first-time-banner .ftb-card{
  display:grid;grid-template-columns:1fr auto;gap:30px;
  align-items:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;border-radius:20px;
  padding:30px 36px;text-decoration:none;
  box-shadow:0 12px 30px rgba(31,47,77,.18);
  transition:.3s;position:relative;overflow:hidden
}
.first-time-banner .ftb-card::after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.18),transparent 70%);
  pointer-events:none
}
.first-time-banner .ftb-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(31,47,77,.25)
}
.first-time-banner .ftb-badge{
  display:inline-block;background:var(--yellow);color:var(--navy);
  font-size:11px;font-weight:900;padding:4px 14px;border-radius:99px;
  letter-spacing:.16em;margin-bottom:10px;
  font-family:"Inter","Montserrat",sans-serif
}
.first-time-banner .ftb-title{
  font-size:26px;font-weight:900;color:#fff;
  letter-spacing:.04em;line-height:1.5;margin:0 0 8px
}
.first-time-banner .ftb-title em{
  font-style:normal;color:var(--yellow);
  background:linear-gradient(transparent 60%,rgba(255,212,0,.18) 60%);
  padding:0 4px
}
.first-time-banner .ftb-lead{
  font-size:14px;line-height:1.85;color:rgba(255,255,255,.85);
  margin:0 0 14px;font-weight:500
}
.first-time-banner .ftb-meta{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.78);font-weight:700;letter-spacing:.04em
}
.first-time-banner .ftb-cta{
  background:var(--yellow);color:var(--navy);
  font-size:15px;font-weight:900;
  padding:16px 28px;border-radius:99px;letter-spacing:.04em;
  white-space:nowrap;display:inline-block;
  box-shadow:0 5px 0 var(--yellow-deep)
}
.first-time-banner .ftb-card:hover .ftb-cta{
  background:#fff;transform:scale(1.05)
}

@media(max-width:900px){
  .first-time-banner .ftb-card{grid-template-columns:1fr;gap:18px;padding:24px}
  .first-time-banner .ftb-title{font-size:20px}
  .first-time-banner .ftb-right{text-align:center}
}
@media(max-width:600px){
  .first-time-banner{padding:20px 0}
  .first-time-banner .ftb-card{padding:20px 22px;border-radius:16px}
  .first-time-banner .ftb-title{font-size:17px}
  .first-time-banner .ftb-lead{font-size:12.5px}
  .first-time-banner .ftb-meta{gap:8px;font-size:10.5px}
  .first-time-banner .ftb-cta{font-size:13px;padding:13px 22px}
}

/* =========================================================
   v58：Contact Form 7 スタイル統合
   ========================================================= */

/* CF7 全体ラッパー */
.kurako-cf7-wrap .wpcf7{
  background:transparent
}
.kurako-cf7-wrap .wpcf7 form{
  display:flex;flex-direction:column;gap:14px
}
.kurako-cf7-wrap p{margin:0}

/* CF7 ラベル — ブロック表示で必須/任意は横並び inline-block */
.kurako-cf7-wrap label{
  display:block;
  font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.04em;
  line-height:1.5
}
.kurako-cf7-wrap label .req,
.kurako-cf7-wrap label .opt{
  display:inline-block !important;
  vertical-align:middle;
  width:auto !important;
  font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:3px;
  letter-spacing:.06em;
  margin-left:8px;
  line-height:1.4
}
.kurako-cf7-wrap label .req{background:var(--red);color:#fff}
.kurako-cf7-wrap label .opt{
  background:var(--cream-deep);color:var(--text);font-weight:700
}
/* 入力欄を新しい行に・ラベルとの間隔を詰める */
.kurako-cf7-wrap label .wpcf7-form-control-wrap{
  display:block;margin-top:6px
}

/* CF7 入力欄 */
.kurako-cf7-wrap input[type="text"],
.kurako-cf7-wrap input[type="tel"],
.kurako-cf7-wrap input[type="email"],
.kurako-cf7-wrap input[type="url"],
.kurako-cf7-wrap select,
.kurako-cf7-wrap textarea{
  width:100% !important;
  border:1.5px solid var(--line);border-radius:10px;
  padding:13px 16px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--text);transition:.2s;
  font-weight:500;outline:none;line-height:1.5;
  box-sizing:border-box
}
.kurako-cf7-wrap input:focus,
.kurako-cf7-wrap select:focus,
.kurako-cf7-wrap textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,107,.1)
}
.kurako-cf7-wrap textarea{min-height:140px;resize:vertical}

/* CF7 ラジオ / チェックボックス */
.kurako-cf7-wrap .wpcf7-list-item{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 16px 8px 0 !important;
  font-size:13px;font-weight:600;color:var(--text)
}
.kurako-cf7-wrap .wpcf7-list-item-label{
  cursor:pointer
}
.kurako-cf7-wrap input[type="checkbox"],
.kurako-cf7-wrap input[type="radio"]{
  width:18px;height:18px;
  accent-color:var(--navy);cursor:pointer;margin:0 4px 0 0;flex-shrink:0
}

/* CF7 2列レイアウト用クラス（フォーム側で .cf-row-2 を使う） */
.kurako-cf7-wrap .cf-row-2{
  display:grid;grid-template-columns:1fr 1fr;gap:18px
}
@media(max-width:600px){
  .kurako-cf7-wrap .cf-row-2{grid-template-columns:1fr}
}

/* CF7 プライバシー同意 */
.kurako-cf7-wrap .cf-privacy{
  background:var(--cream);border-radius:14px;
  padding:18px 22px;border:1.5px solid var(--line);
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.7
}
.kurako-cf7-wrap .cf-privacy .wpcf7-list-item{margin:0 !important}
.kurako-cf7-wrap .cf-privacy a{
  color:var(--navy);text-decoration:underline;font-weight:800
}
.kurako-cf7-wrap .cf-privacy .req{margin-left:8px}

/* CF7 送信ボタン */
.kurako-cf7-wrap .wpcf7-submit,
.kurako-cf7-wrap input[type="submit"]{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 38px;background:var(--navy);color:#fff;border:none;
  border-radius:99px;font-weight:900;font-size:15px;letter-spacing:.06em;
  cursor:pointer;transition:.25s;font-family:inherit;
  box-shadow:0 6px 0 var(--navy-deep);
  margin:14px auto 0;display:block;min-width:280px
}
.kurako-cf7-wrap .wpcf7-submit:hover,
.kurako-cf7-wrap input[type="submit"]:hover{
  background:var(--red);box-shadow:0 6px 0 var(--red-deep);transform:translateY(-1px)
}

/* CF7 バリデーション・通知メッセージ */
.kurako-cf7-wrap .wpcf7-response-output{
  margin:18px 0 0 !important;padding:14px 18px !important;
  border-radius:10px !important;border:1.5px solid var(--red) !important;
  background:#fff !important;color:var(--red) !important;
  font-size:13px;font-weight:700;line-height:1.7
}
.kurako-cf7-wrap .wpcf7-mail-sent-ok + .wpcf7-response-output,
.kurako-cf7-wrap .wpcf7-mail-sent-ok{
  border-color:var(--green) !important;color:var(--green) !important
}
.kurako-cf7-wrap .wpcf7-not-valid-tip{
  color:var(--red);font-size:11.5px;font-weight:700;
  margin-top:4px;display:block
}
.kurako-cf7-wrap .wpcf7-not-valid{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(230,0,18,.08) !important
}

/* CF7 ローディング・スピナー */
.kurako-cf7-wrap .wpcf7-spinner{
  background-color:var(--yellow) !important
}

/* レスポンシブ */
@media(max-width:600px){
  .kurako-cf7-wrap .wpcf7-submit,
  .kurako-cf7-wrap input[type="submit"]{
    padding:14px 24px;font-size:13px;min-width:0;width:100%
  }
}

/* =========================================================
   v61：求人ページ全面リニューアル（11セクション構成）
   prefix: .rcr-*
   ========================================================= */

/* 共通：セクション間のリード文 */
.rcr-section-lead{
  text-align:center;font-size:13.5px;line-height:1.95;color:var(--text);
  font-weight:500;max-width:720px;margin:-8px auto 32px
}

/* ---------------------------------------------------------
   SECTION 01 - 代表メッセージ
   --------------------------------------------------------- */
.rcr-message{
  background:#fff;border-radius:20px;
  border:1px solid rgba(31,58,107,.08);
  padding:36px 40px;display:grid;grid-template-columns:200px 1fr;gap:36px;
  align-items:center;box-shadow:0 8px 28px rgba(31,58,107,.05);
  position:relative;overflow:hidden
}
.rcr-message::before{
  content:"";position:absolute;left:0;top:0;width:6px;height:100%;
  background:linear-gradient(180deg,var(--yellow) 0%,var(--yellow-deep) 100%)
}
.rcr-message-photo{
  width:200px;height:200px;border-radius:50%;background:var(--cream-deep);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;overflow:hidden;
  border:3px solid #fff;box-shadow:0 6px 18px rgba(31,58,107,.12)
}
.rcr-message-photo-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.1em
}
.rcr-message-body{flex:1;min-width:0}
.rcr-message-label{
  display:inline-block;font-family:"Montserrat",sans-serif;
  font-size:11px;font-weight:800;color:var(--yellow-deep);
  letter-spacing:.18em;margin-bottom:10px
}
.rcr-message-body h4{
  font-size:22px;font-weight:800;color:var(--navy);
  line-height:1.55;margin:0 0 16px;letter-spacing:.02em
}
.rcr-message-body p{
  font-size:14px;line-height:2;color:var(--text);
  font-weight:500;margin:0 0 16px
}
.rcr-message-sign{
  display:inline-block;font-size:12px;color:var(--muted);
  font-weight:700;letter-spacing:.06em;padding-top:10px;
  border-top:1px solid rgba(31,58,107,.1)
}
@media(max-width:780px){
  .rcr-message{grid-template-columns:1fr;padding:28px 22px;gap:22px;text-align:center}
  .rcr-message-photo{margin:0 auto;width:140px;height:140px}
  .rcr-message-body h4{font-size:18px}
  .rcr-message-body p{font-size:13.5px;line-height:1.95;text-align:left}
  .rcr-message-sign{display:block}
}

/* ---------------------------------------------------------
   SECTION 02 - なぜクラコーで働くのか（強み）
   --------------------------------------------------------- */
.rcr-strengths{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.rcr-strength{
  background:#fff;border-radius:16px;padding:28px 20px;text-align:center;
  border:1px solid rgba(31,58,107,.08);
  transition:.3s;position:relative;overflow:hidden
}
.rcr-strength::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease
}
.rcr-strength:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(31,58,107,.10);
  border-color:var(--navy)
}
.rcr-strength:hover::after{transform:scaleX(1)}
.rcr-strength-num{
  font-family:"Montserrat",sans-serif;font-weight:900;
  font-size:42px;color:var(--yellow-deep);line-height:1;
  letter-spacing:.02em;margin-bottom:14px
}
.rcr-strength-num small{
  font-size:14px;color:var(--text);margin-left:3px;font-weight:700
}
.rcr-strength h4{
  font-size:15px;font-weight:800;color:var(--navy);
  margin:0 0 10px;letter-spacing:.04em
}
.rcr-strength p{
  font-size:12.5px;line-height:1.85;color:var(--text);
  font-weight:500;margin:0
}
@media(max-width:900px){
  .rcr-strengths{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:480px){
  .rcr-strength{padding:22px 16px}
  .rcr-strength-num{font-size:34px}
  .rcr-strength h4{font-size:14px}
}

/* ---------------------------------------------------------
   SECTION 03 - 募集職種
   --------------------------------------------------------- */
.rcr-jobs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.rcr-job{
  background:#fff;border-radius:16px;
  border:1px solid rgba(31,58,107,.1);
  padding:26px 22px 24px;position:relative;transition:.3s;
  display:flex;flex-direction:column
}
.rcr-job:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(31,58,107,.10);
  border-color:var(--navy)
}
.rcr-job-featured{
  border:2px solid var(--yellow);box-shadow:0 8px 20px rgba(245,184,0,.18)
}
.rcr-job-featured::before{
  content:"PICK UP";position:absolute;top:-12px;right:18px;
  background:var(--navy);color:#fff;font-family:"Montserrat",sans-serif;
  font-size:10px;font-weight:900;letter-spacing:.18em;
  padding:5px 12px;border-radius:99px;
  box-shadow:0 4px 10px rgba(31,58,107,.25)
}
.rcr-job-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px
}
.rcr-job-no{
  font-family:"Montserrat",sans-serif;font-size:10px;font-weight:900;
  letter-spacing:.18em;color:var(--yellow-deep)
}
.rcr-job-tag{
  display:inline-block;font-size:10px;font-weight:800;
  padding:4px 10px;border-radius:4px;letter-spacing:.06em
}
.rcr-job-tag.tag-yellow{background:#FFF5DA;color:#7a5a00}
.rcr-job-tag.tag-navy{background:var(--navy);color:#fff}
.rcr-job h4{
  font-size:20px;font-weight:900;color:var(--navy);
  margin:0 0 10px;letter-spacing:.04em
}
.rcr-job-salary{
  font-family:"Montserrat",sans-serif;
  color:var(--red);font-weight:800;font-size:14px;
  letter-spacing:.02em;margin:0 0 12px;line-height:1.4
}
.rcr-job-salary strong{font-size:28px;font-weight:900;letter-spacing:0;color:var(--red)}
.rcr-job-salary small{font-size:12px;color:var(--text);margin:0 6px 0 2px;font-weight:700}
.rcr-job-bonus{
  display:inline-block;
  font-family:"Noto Sans JP",sans-serif;
  font-size:11px;font-weight:700;color:var(--navy);
  background:#FFF7CC;border:1px solid #FFD400;
  padding:3px 8px;border-radius:999px;
  vertical-align:middle;margin-left:4px;letter-spacing:.04em
}
.rcr-job-desc{
  font-size:12.5px;line-height:1.85;color:var(--text);
  font-weight:500;margin:0 0 14px
}
.rcr-job-list{
  list-style:none;padding:14px 0 0;margin:auto 0 0;
  border-top:1px dashed rgba(31,58,107,.15);
  font-size:12px;line-height:1.9;color:var(--text);font-weight:600
}
.rcr-job-list li{padding:2px 0;display:flex;align-items:flex-start;gap:6px}
.rcr-job-list li::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--yellow-deep);margin-top:8px
}
@media(max-width:900px){
  .rcr-jobs{grid-template-columns:1fr;gap:14px}
  .rcr-job{padding:24px 20px}
}

/* ---------------------------------------------------------
   SECTION 04 - 1日の流れ（タイムライン）
   --------------------------------------------------------- */
.rcr-day{
  list-style:none;padding:0;margin:0;position:relative;
  display:grid;grid-template-columns:1fr;gap:0
}
.rcr-day::before{
  content:"";position:absolute;left:64px;top:14px;bottom:14px;
  width:2px;background:linear-gradient(180deg,var(--yellow) 0%,var(--yellow-deep) 100%);
  border-radius:2px
}
.rcr-day-step{
  display:grid;grid-template-columns:140px 1fr;gap:24px;
  padding:14px 0;position:relative
}
.rcr-day-step::before{
  content:"";position:absolute;left:58px;top:24px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--yellow-deep);
  box-shadow:0 0 0 4px rgba(245,184,0,.12);z-index:1
}
.rcr-day-time{
  font-family:"Montserrat",sans-serif;font-size:18px;font-weight:900;
  color:var(--navy);letter-spacing:.04em;padding-top:6px
}
.rcr-day-body{
  background:#fff;border-radius:12px;padding:16px 20px;
  border:1px solid rgba(31,58,107,.08);
  box-shadow:0 4px 12px rgba(31,58,107,.04)
}
.rcr-day-body h4{
  font-size:15px;font-weight:800;color:var(--navy);
  margin:0 0 6px;letter-spacing:.04em
}
.rcr-day-body p{
  font-size:12.5px;line-height:1.8;color:var(--text);
  font-weight:500;margin:0
}
@media(max-width:700px){
  .rcr-day::before{left:46px}
  .rcr-day-step{grid-template-columns:90px 1fr;gap:14px}
  .rcr-day-step::before{left:40px;top:18px;width:12px;height:12px}
  .rcr-day-time{font-size:15px;padding-top:2px}
  .rcr-day-body{padding:12px 16px}
  .rcr-day-body h4{font-size:14px}
}
@media(max-width:480px){
  .rcr-day::before{left:36px}
  .rcr-day-step{grid-template-columns:70px 1fr;gap:10px}
  .rcr-day-step::before{left:30px;top:16px;width:10px;height:10px;border-width:2px}
  .rcr-day-time{font-size:13px}
}

/* ---------------------------------------------------------
   SECTION 05 - 先輩の声
   --------------------------------------------------------- */
.rcr-voices{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.rcr-voice{
  background:#fff;border-radius:16px;padding:24px 22px;
  border:1px solid rgba(31,58,107,.08);
  position:relative;transition:.3s
}
.rcr-voice:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(31,58,107,.08);
  border-color:rgba(31,58,107,.18)
}
.rcr-voice::before{
  content:"\201C";position:absolute;top:8px;right:18px;
  font-family:Georgia,serif;font-size:54px;color:var(--yellow);
  line-height:1;font-weight:900;opacity:.55
}
.rcr-voice-head{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px dashed rgba(31,58,107,.12)
}
.rcr-voice-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:"Montserrat",sans-serif;font-weight:900;font-size:13px;
  letter-spacing:.04em;flex-shrink:0
}
.rcr-voice-meta{display:flex;flex-direction:column;gap:2px}
.rcr-voice-name{
  font-size:14px;font-weight:800;color:var(--navy);letter-spacing:.02em
}
.rcr-voice-role{
  font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em
}
.rcr-voice-text{
  font-size:12.5px;line-height:1.95;color:var(--text);
  font-weight:500;margin:0;padding:0;border:none
}
@media(max-width:900px){
  .rcr-voices{grid-template-columns:1fr;gap:14px}
}

/* ---------------------------------------------------------
   SECTION 06 - 募集要項テーブル
   --------------------------------------------------------- */
.rcr-req-table{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 20px rgba(31,58,107,.05);
  border:1px solid rgba(31,58,107,.08)
}
.rcr-req-table dl{margin:0;padding:0}
.rcr-req-row{
  display:grid;grid-template-columns:180px 1fr;gap:0;
  border-bottom:1px solid rgba(31,58,107,.08)
}
.rcr-req-row:last-child{border-bottom:none}
.rcr-req-row dt{
  background:var(--navy);color:#fff;
  padding:18px 22px;font-size:13px;font-weight:800;
  letter-spacing:.06em;display:flex;align-items:center
}
.rcr-req-row dd{
  padding:18px 24px;margin:0;font-size:13.5px;line-height:1.9;
  color:var(--text);font-weight:500
}
.rcr-req-row dd small{
  display:inline-block;font-size:11.5px;color:var(--muted);
  margin-top:4px;font-weight:600
}
@media(max-width:700px){
  .rcr-req-row{grid-template-columns:1fr}
  .rcr-req-row dt{padding:10px 18px;font-size:12px}
  .rcr-req-row dd{padding:14px 18px;font-size:13px}
}

/* ---------------------------------------------------------
   SECTION 07 - 福利厚生（アイコングリッド）
   --------------------------------------------------------- */
.rcr-benefits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
.rcr-benefit{
  background:#fff;border-radius:14px;padding:24px 18px;text-align:center;
  border:1px solid rgba(31,58,107,.08);
  transition:.3s
}
.rcr-benefit:hover{
  transform:translateY(-3px);
  border-color:var(--yellow-deep);
  box-shadow:0 10px 22px rgba(31,58,107,.08)
}
.rcr-benefit-icon{
  width:36px;height:36px;fill:var(--yellow-deep);
  margin:0 auto 10px;display:block
}
.rcr-benefit h4{
  font-size:13px;font-weight:800;color:var(--navy);
  margin:0 0 6px;letter-spacing:.04em
}
.rcr-benefit p{
  font-size:11.5px;line-height:1.75;color:var(--muted);
  font-weight:600;margin:0
}
@media(max-width:900px){
  .rcr-benefits{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .rcr-benefits{grid-template-columns:repeat(2,1fr);gap:10px}
  .rcr-benefit{padding:18px 14px}
}

/* ---------------------------------------------------------
   SECTION 08 - 採用までの流れ（5ステップ）
   --------------------------------------------------------- */
.rcr-flow{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative
}
.rcr-flow-step{
  background:#fff;border-radius:14px;padding:22px 16px;text-align:center;
  border:1px solid rgba(31,58,107,.08);
  position:relative;transition:.3s
}
.rcr-flow-step:not(:last-child)::after{
  content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-style:solid;border-width:8px 0 8px 12px;
  border-color:transparent transparent transparent var(--yellow-deep);
  z-index:2
}
.rcr-flow-step:hover{
  transform:translateY(-3px);
  border-color:var(--navy);
  box-shadow:0 10px 22px rgba(31,58,107,.08)
}
.rcr-flow-no{
  display:inline-block;font-family:"Montserrat",sans-serif;
  font-size:11px;font-weight:900;color:#fff;background:var(--yellow-deep);
  padding:4px 12px;border-radius:99px;letter-spacing:.12em;margin-bottom:10px
}
.rcr-flow-step h4{
  font-size:13.5px;font-weight:800;color:var(--navy);
  margin:0 0 6px;letter-spacing:.04em
}
.rcr-flow-step p{
  font-size:11px;line-height:1.7;color:var(--text);
  font-weight:500;margin:0
}
@media(max-width:900px){
  .rcr-flow{grid-template-columns:repeat(2,1fr);gap:10px}
  .rcr-flow-step:not(:last-child)::after{display:none}
}
@media(max-width:480px){
  .rcr-flow{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   SECTION 09 - FAQ（details / summary）
   --------------------------------------------------------- */
.rcr-faq{display:flex;flex-direction:column;gap:10px}
.rcr-faq-item{
  background:#fff;border-radius:12px;
  border:1px solid rgba(31,58,107,.08);
  overflow:hidden;transition:.3s
}
.rcr-faq-item[open]{
  border-color:var(--yellow-deep);
  box-shadow:0 6px 18px rgba(31,58,107,.06)
}
.rcr-faq-item summary{
  list-style:none;cursor:pointer;padding:18px 50px 18px 56px;
  font-size:14px;font-weight:700;color:var(--navy);
  letter-spacing:.02em;line-height:1.6;position:relative;
  user-select:none
}
.rcr-faq-item summary::-webkit-details-marker{display:none}
.rcr-faq-item summary::before{
  content:"Q";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  background:var(--yellow);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:"Montserrat",sans-serif;font-weight:900;font-size:13px;
  letter-spacing:0
}
.rcr-faq-item summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:10px;height:10px;border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s
}
.rcr-faq-item[open] summary::after{
  transform:translateY(-30%) rotate(225deg)
}
.rcr-faq-answer{
  padding:0 24px 20px 56px;font-size:13px;line-height:1.95;
  color:var(--text);font-weight:500;position:relative
}
.rcr-faq-answer::before{
  content:"A";position:absolute;left:18px;top:0;
  width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:"Montserrat",sans-serif;font-weight:900;font-size:13px
}
@media(max-width:600px){
  .rcr-faq-item summary{padding:16px 44px 16px 48px;font-size:13px}
  .rcr-faq-item summary::before{left:14px;width:24px;height:24px;font-size:11px}
  .rcr-faq-item summary::after{right:18px;width:8px;height:8px}
  .rcr-faq-answer{padding:0 18px 16px 48px;font-size:12.5px}
  .rcr-faq-answer::before{left:14px;width:24px;height:24px;font-size:11px}
}

/* =========================================================
   v62：求人ページへの導線（5箇所）
   - .recruit-strip       : front-page末尾ストリップ
   - .recruit-mini-banner : about/company/works archive末尾ミニバナー
   - .mm-recruit          : ハンバーガーメニュー用控えめスタイル
   ========================================================= */

/* ---------------------------------------------------------
   RECRUIT ストリップ（フロントページ末尾）
   --------------------------------------------------------- */
.recruit-strip{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:48px 0;position:relative;overflow:hidden
}
.recruit-strip::before{
  content:"";position:absolute;left:-40px;top:-40px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(245,184,0,.08);pointer-events:none
}
.recruit-strip::after{
  content:"";position:absolute;right:-60px;bottom:-60px;
  width:240px;height:240px;border-radius:50%;
  background:rgba(245,184,0,.06);pointer-events:none
}
.recruit-strip-inner{
  max-width:1100px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;
  align-items:center;position:relative;z-index:2
}
.recruit-strip-photo{
  width:84px;height:84px;border-radius:20px;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 8px 18px rgba(245,184,0,.28)
}
.recruit-strip-icon svg{width:42px;height:42px;fill:var(--navy)}
.recruit-strip-body{color:#fff;min-width:0}
.recruit-strip-label{
  display:inline-block;font-family:"Montserrat",sans-serif;
  font-size:11px;font-weight:900;color:var(--yellow);
  letter-spacing:.24em;margin-bottom:6px
}
.recruit-strip-title{
  font-size:22px;font-weight:900;color:#fff;
  margin:0 0 6px;letter-spacing:.04em;line-height:1.4
}
.recruit-strip-desc{
  font-size:13px;line-height:1.85;color:rgba(255,255,255,.82);
  font-weight:500;margin:0
}
.recruit-strip-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow);color:var(--navy);
  padding:14px 26px;border-radius:99px;
  font-weight:900;font-size:14px;letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 6px 0 var(--yellow-deep);
  transition:.25s
}
.recruit-strip-btn svg{width:16px;height:16px;fill:var(--navy);transition:.25s}
.recruit-strip-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 0 var(--yellow-deep);
  background:#fff
}
.recruit-strip-btn:hover svg{transform:translateX(4px)}
.recruit-strip-br{display:none}
@media(max-width:900px){
  .recruit-strip{padding:36px 0}
  .recruit-strip-inner{grid-template-columns:auto 1fr;gap:20px;row-gap:18px}
  .recruit-strip-btn{grid-column:1/-1;justify-content:center;width:100%}
  .recruit-strip-photo{width:64px;height:64px;border-radius:14px}
  .recruit-strip-icon svg{width:30px;height:30px}
  .recruit-strip-title{font-size:18px}
  .recruit-strip-desc{font-size:12.5px}
}
@media(max-width:600px){
  .recruit-strip-inner{grid-template-columns:1fr;text-align:center}
  .recruit-strip-photo{margin:0 auto}
  .recruit-strip-br{display:inline}
}

/* ---------------------------------------------------------
   RECRUIT ミニバナー（about / company / works archive末尾）
   --------------------------------------------------------- */
.recruit-mini-banner{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;
  align-items:center;
  background:#fff;border:2px solid var(--navy);
  border-radius:14px;padding:18px 24px;
  text-decoration:none;color:var(--text);
  transition:.25s;position:relative;overflow:hidden
}
.recruit-mini-banner::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:6px;
  background:var(--yellow);transition:width .3s
}
.recruit-mini-banner:hover{
  background:var(--navy);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(31,58,107,.18)
}
.recruit-mini-banner:hover::before{width:100%;background:rgba(245,184,0,.92)}
.recruit-mini-banner:hover .recruit-mini-en,
.recruit-mini-banner:hover .recruit-mini-title,
.recruit-mini-banner:hover .recruit-mini-sub,
.recruit-mini-banner:hover .recruit-mini-arrow,
.recruit-mini-banner:hover .recruit-mini-icon svg{position:relative;z-index:2}
.recruit-mini-icon{
  width:54px;height:54px;border-radius:12px;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;z-index:2;transition:.25s
}
.recruit-mini-icon svg{width:28px;height:28px;fill:var(--navy);transition:.25s}
.recruit-mini-banner:hover .recruit-mini-icon{background:#fff}
.recruit-mini-text{display:flex;flex-direction:column;gap:2px;min-width:0;position:relative;z-index:2}
.recruit-mini-en{
  font-family:"Montserrat",sans-serif;font-size:10px;font-weight:900;
  color:var(--yellow-deep);letter-spacing:.2em;transition:.25s
}
.recruit-mini-banner:hover .recruit-mini-en{color:var(--yellow)}
.recruit-mini-title{
  font-size:15px;font-weight:900;color:var(--navy);
  letter-spacing:.02em;line-height:1.4;transition:.25s
}
.recruit-mini-banner:hover .recruit-mini-title{color:#fff}
.recruit-mini-sub{
  font-size:11.5px;color:var(--muted);font-weight:600;
  line-height:1.6;transition:.25s
}
.recruit-mini-banner:hover .recruit-mini-sub{color:rgba(255,255,255,.85)}
.recruit-mini-arrow{
  font-size:13px;font-weight:800;color:var(--navy);
  letter-spacing:.04em;white-space:nowrap;
  padding:6px 14px;border-radius:99px;
  background:var(--cream-deep);transition:.25s;
  position:relative;z-index:2
}
.recruit-mini-banner:hover .recruit-mini-arrow{
  background:var(--yellow);color:var(--navy)
}
@media(max-width:700px){
  .recruit-mini-banner{grid-template-columns:auto 1fr;gap:14px;padding:16px 18px}
  .recruit-mini-arrow{grid-column:1/-1;text-align:center}
  .recruit-mini-icon{width:46px;height:46px}
  .recruit-mini-icon svg{width:24px;height:24px}
  .recruit-mini-title{font-size:14px}
  .recruit-mini-sub{font-size:11px}
}

/* ---------------------------------------------------------
   ハンバーガーメニュー：採用情報項目（控えめ）
   --------------------------------------------------------- */
.mobile-menu .mm-list li.mm-recruit{
  margin-top:8px;border-top:1px solid rgba(31,58,107,.1);
  padding-top:8px
}
.mobile-menu .mm-list li.mm-recruit a{
  background:transparent;border:1px solid var(--navy);
  border-radius:10px;display:flex;flex-direction:column;
  padding:10px 14px 12px;gap:2px;
  color:var(--navy);font-weight:800
}
.mobile-menu .mm-list li.mm-recruit a:hover{
  background:var(--navy);color:#fff
}
.mobile-menu .mm-list li.mm-recruit .mm-recruit-label{
  display:inline-block;font-family:"Montserrat",sans-serif;
  font-size:10px;font-weight:900;color:var(--yellow-deep);
  letter-spacing:.22em;margin-bottom:2px
}
.mobile-menu .mm-list li.mm-recruit a:hover .mm-recruit-label{color:var(--yellow)}
.mobile-menu .mm-list li.mm-recruit .mm-recruit-sub{
  font-size:11px;color:var(--muted);font-weight:600;
  letter-spacing:0;margin-top:2px
}
.mobile-menu .mm-list li.mm-recruit a:hover .mm-recruit-sub{color:rgba(255,255,255,.78)}

/* ---------------------------------------------------------
   v61 セクション間の余白統一
   --------------------------------------------------------- */
.rcr-message-wrap,
.rcr-strengths-wrap,
.rcr-jobs-wrap,
.rcr-day-wrap,
.rcr-voices-wrap,
.rcr-req-wrap,
.rcr-benefits-wrap,
.rcr-flow-wrap,
.rcr-faq-wrap{
  padding-top:64px;padding-bottom:64px
}
@media(max-width:700px){
  .rcr-message-wrap,
  .rcr-strengths-wrap,
  .rcr-jobs-wrap,
  .rcr-day-wrap,
  .rcr-voices-wrap,
  .rcr-req-wrap,
  .rcr-benefits-wrap,
  .rcr-flow-wrap,
  .rcr-faq-wrap{
    padding-top:44px;padding-bottom:44px
  }
}

/* =========================================================
   v65 :: 10項目チェックリスト 写真対応カードグリッド
   ========================================================= */
.sign-check-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:22px;margin-top:8px
}
@media(max-width:900px){
  .sign-check-grid{gap:16px}
}
@media(max-width:600px){
  .sign-check-grid{grid-template-columns:1fr;gap:14px}
}
.sign-check-card{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:.25s;box-shadow:0 2px 8px rgba(31,58,107,.04)
}
.sign-check-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(31,58,107,.10);
  border-color:var(--navy)
}
.sign-check-img{
  position:relative;aspect-ratio:16/10;
  background:linear-gradient(135deg,#f6f3ec 0%,#ece8de 100%);
  overflow:hidden
}
.sign-check-img img{
  width:100%;height:100%;object-fit:cover;display:block
}
.sign-check-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px
}
.sign-check-placeholder img{
  width:60px;height:60px;object-fit:contain;opacity:.45
}
.sign-check-placeholder span{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em
}
.sign-check-no{
  position:absolute;top:12px;left:12px;
  background:var(--navy);color:#fff;
  font-size:10px;font-weight:900;letter-spacing:.1em;
  padding:5px 10px;border-radius:99px
}
.sign-check-body{padding:18px 20px 22px}
.sign-check-body h4{
  font-size:15px;font-weight:900;color:var(--navy);
  margin:0 0 8px;line-height:1.5;letter-spacing:.02em
}
.sign-check-body h4 strong{color:var(--red)}
.sign-check-body p{
  font-size:13px;line-height:1.85;color:var(--text);
  font-weight:500;margin:0
}
.sign-check-body p strong{color:var(--red);font-weight:900}
@media(max-width:600px){
  .sign-check-body{padding:14px 16px 18px}
  .sign-check-body h4{font-size:14px}
  .sign-check-body p{font-size:12.5px}
}

/* =========================================================
   v65 :: その他住宅リフォーム セクション
   ========================================================= */
.other-reform-section{
  background:linear-gradient(135deg,#fafaf7 0%,#fff 100%);
}
.other-reform-intro{
  text-align:center;max-width:780px;margin:0 auto 32px;
  font-size:14.5px;line-height:1.95;color:var(--text);font-weight:500
}
.other-reform-cta{
  display:flex;justify-content:center;margin-top:36px
}
.other-reform-cta a{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;
  padding:16px 32px;border-radius:99px;
  font-weight:900;font-size:14px;letter-spacing:.04em;
  text-decoration:none;transition:.25s;
  box-shadow:0 6px 0 #142a52
}
.other-reform-cta a:hover{
  transform:translateY(2px);
  box-shadow:0 4px 0 #142a52;
  background:#163464
}
.other-reform-cta a::after{content:"→";font-size:16px}

/* =========================================================
   v66 :: SDGsセクション
   ========================================================= */
.sdgs-section{
  background:linear-gradient(135deg,#f8faf8 0%,#fff 60%,#fafaf2 100%);
}
.sdgs-intro{
  text-align:center;max-width:780px;margin:0 auto 36px;
  font-size:14.5px;line-height:1.95;color:var(--text);font-weight:500
}
.sdgs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1080px;margin:0 auto
}
@media(max-width:900px){
  .sdgs-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:600px){
  .sdgs-grid{grid-template-columns:1fr;gap:14px}
}
.sdgs-card{
  position:relative;
  background:#fff;border:1.5px solid var(--line);
  border-top:6px solid var(--sdg-color,var(--navy));
  border-radius:14px;padding:24px 22px 22px;
  transition:.25s;
  box-shadow:0 2px 8px rgba(31,58,107,.04)
}
.sdgs-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(31,58,107,.10);
  border-color:var(--sdg-color,var(--navy))
}
.sdgs-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:var(--sdg-color,var(--navy));color:#fff;
  font-size:22px;font-weight:900;letter-spacing:0;
  border-radius:8px;
  margin-bottom:14px;
  font-family:'Inter','Noto Sans JP',sans-serif
}
.sdgs-card h4{
  font-size:14px;font-weight:900;color:var(--navy);
  line-height:1.5;margin:0 0 10px;letter-spacing:.02em
}
.sdgs-card p{
  font-size:13px;line-height:1.85;color:var(--text);
  font-weight:500;margin:0
}
@media(max-width:600px){
  .sdgs-card{padding:20px 18px}
  .sdgs-no{width:44px;height:44px;font-size:20px}
  .sdgs-card h4{font-size:13.5px}
  .sdgs-card p{font-size:12.5px}
}
.sdgs-footer-note{
  text-align:center;max-width:780px;margin:32px auto 0;
  font-size:12.5px;line-height:1.85;color:var(--muted);
  font-weight:600;padding:0 16px
}

/* =========================================================
   v69 :: レスポンシブ整合性修正＋一押しバッジ被り＋ワニ君被り防止
   ========================================================= */

/* --- ① 福利厚生 9枚：PC 3列化（9÷3＝3行きれい）--- */
.rcr-benefits{grid-template-columns:repeat(3,1fr) !important}
@media(max-width:900px){
  .rcr-benefits{grid-template-columns:repeat(3,1fr) !important;gap:12px !important}
}
@media(max-width:600px){
  .rcr-benefits{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
}

/* --- ② 屋根工事 下段3枚：タブレット幅でも3列維持 --- */
/* 既存 .grid-3 は max-width:900px で 2列に落ちるため、page-service.php の
   「葺き替え・カバー工法」セクションだけ 3列を維持して孤立を防ぐ */
#roof .grid-3{
  grid-template-columns:repeat(3,1fr) !important
}
@media(max-width:600px){
  #roof .grid-3{grid-template-columns:1fr !important}
}

/* --- ③ 募集職種 .rcr-job-head：タグ詰まり対策 --- */
.rcr-job-head{
  flex-wrap:wrap !important;
  gap:8px !important;
  justify-content:flex-start !important
}
.rcr-job-no{
  flex-basis:100%;
  margin-bottom:2px
}
.rcr-job-tag{
  white-space:nowrap
}

/* --- ④ ★クラコー一押しバッジと「03」.num の被り解消 --- */
/* バッジが内側コンテンツに干渉しないよう padding-top を増やす */
.sub-card.paint-recommended{
  padding-top:38px !important
}
/* バッジ自体を少し上に持ち上げて見た目を独立させる */
.sub-card.paint-recommended .rec-badge{
  top:-16px !important;
  z-index:3 !important
}
/* num 円を一段下げて、バッジとの間に確実に余白を確保 */
.sub-card.paint-recommended .num{
  margin-top:4px !important
}

/* --- ⑤ ワニ君被り防止 --- */
/* 共通：ワニはセクションをまたいで重ねないよう z-index を下げ、コンテンツより必ず奥に */
.wani{z-index:1 !important}
/* sub-head（セクション見出し）はワニより前面に */
.sub-head{position:relative;z-index:3}
/* sub-card もワニより前面に */
.sub-card{position:relative;z-index:2}
/* タブレット幅（900px以下）でワニが小さくても近くのカードと被るのを軽減 */
@media(max-width:900px){
  /* size-l のワニはタブレット以下で控えめにサイズダウン */
  .wani.size-l{width:80px !important}
  /* tr/tl/br/bl のオフセットを少し外側へ（はみ出し OK にして本文との被り回避）*/
  .wani-tr{top:10px;right:10px}
  .wani-tl{top:10px;left:10px}
  .wani-br{bottom:10px;right:10px}
  .wani-bl{bottom:10px;left:10px}
}
/* モバイル幅（700px以下）では size-l ワニも縮小 */
@media(max-width:700px){
  .wani.size-l{width:64px !important}
  .wani{opacity:.85}
}
/* スマホ縦持ち（480px以下）では更に控えめ＆hide-mobile指定がないものも縮小で対応 */
@media(max-width:480px){
  .wani{width:46px !important;opacity:.75}
  .wani.size-s{width:36px !important}
  .wani.size-l{width:54px !important}
}

/* =========================================================
   v78 :: フロント施工実績カード レイアウト整理
   - 全カードに4辺の枠線を統一
   - 800〜1100px幅で3列表示を追加
   - テキスト2行になっても高さが揃うよう flex 化
   - 既存の nth-child による複雑なborder指定を無効化
   ========================================================= */

/* --- ① 全カードに4辺枠線を統一（既存の nth-child border を無効化） --- */
.works-grid{
  gap:18px !important;
  grid-template-columns:repeat(4,1fr)
}
.work-item:nth-child(-n+4) .work-card,
.work-item:nth-child(1) .work-card,
.work-item:nth-child(5) .work-card{
  /* 既存指定をリセット */
  border:none
}
.work-card{
  border:2px solid #353535 !important;
  border-radius:14px;
  /* --- ③ flex で高さを揃える --- */
  display:flex !important;
  flex-direction:column;
  height:100%;
  /* 内側余白を少し圧縮（gap を活かす） */
  padding:20px 18px
}
.work-item{display:flex} /* グリッド子に高さを正しく渡す */

/* テキスト要素の高さ揃え（2行になっても凸凹しない） */
.work-cat{
  margin:0 0 14px !important;
  min-height:1.4em;
  display:flex;align-items:center;justify-content:center
}
.work-name{
  margin:14px 0 0 !important;
  min-height:2.8em;  /* 2行分の高さ確保 */
  display:flex;align-items:center;justify-content:center;
  line-height:1.4;
  text-align:center;
  flex-grow:1  /* 残り高さを吸収して下端揃え */
}

/* 画像エリアも常に同じサイズに */
.work-image{aspect-ratio:1/1;flex-shrink:0}

/* --- ② 1100〜800px 幅で 3列表示 --- */
@media(max-width:1100px) and (min-width:801px){
  .works-grid{
    grid-template-columns:repeat(3,1fr) !important;
    gap:16px !important
  }
  .work-card{padding:18px 14px}
}

/* タブレット幅で 2列（800px以下 〜 601px） */
@media(max-width:800px) and (min-width:601px){
  .works-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px !important
  }
}

/* モバイル幅で 1列 */
@media(max-width:600px){
  .works-grid{
    grid-template-columns:1fr !important;
    gap:14px !important
  }
  .work-card{padding:16px 14px}
  .work-name{min-height:2.5em}
}

/* ホバー時の色変化（既存 nth-child(1)-(8) の色ローテーション）を維持しつつ、
   3列表示時の n=9,10 にも対応するため拡張 */
.work-item:nth-child(9) .work-card:hover{background:#f3c316}
.work-item:nth-child(10) .work-card:hover{background:var(--green)}

/* =========================================================
   v80 :: WordPress標準ページネーション（the_posts_pagination）を
   サイトテーマ（ネイビー/イエロー）に合わせてデザイン
   - 施工実績/お客様の声/お知らせ アーカイブで共通使用
   ========================================================= */

.navigation.pagination,
.kurako-pagination{
  display:block;
  margin:50px auto 0;
  text-align:center
}
.navigation.pagination .screen-reader-text{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden
}
.navigation.pagination .nav-links,
.kurako-pagination .nav-links{
  display:inline-flex;align-items:center;flex-wrap:wrap;
  gap:8px;justify-content:center
}

/* 数字・矢印・dots 共通のボタン基礎 */
.navigation.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  background:#fff;
  border:2px solid var(--navy);
  border-radius:10px;
  color:var(--navy);
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-weight:800;font-size:14px;letter-spacing:.04em;
  text-decoration:none;
  transition:.25s ease;
  box-shadow:0 3px 0 var(--navy)
}
.navigation.pagination .page-numbers:hover{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  color:var(--navy);
  transform:translateY(-2px);
  box-shadow:0 5px 0 var(--yellow-deep)
}
.navigation.pagination .page-numbers:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--navy)
}

/* 現在ページ：ネイビー塗りつぶし */
.navigation.pagination .page-numbers.current{
  background:var(--navy);
  color:#fff;
  cursor:default;
  pointer-events:none
}
.navigation.pagination .page-numbers.current:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  transform:none;
  box-shadow:0 3px 0 #142a52
}

/* 「…」（dots）：枠なし */
.navigation.pagination .page-numbers.dots{
  background:transparent;
  border:none;
  box-shadow:none;
  color:var(--muted);
  min-width:24px;
  padding:0;
  cursor:default;
  pointer-events:none;
  font-size:18px;font-weight:900
}
.navigation.pagination .page-numbers.dots:hover{
  background:transparent;
  transform:none;
  box-shadow:none
}

/* 前へ・次へ：少し幅広 */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next{
  min-width:auto;padding:0 18px;
  font-weight:900;letter-spacing:.06em;
  gap:6px
}
.navigation.pagination .page-numbers.prev::before{content:"";display:none}
.navigation.pagination .page-numbers.next::after{content:"";display:none}

/* レスポンシブ */
@media(max-width:700px){
  .navigation.pagination{margin-top:36px}
  .navigation.pagination .nav-links{gap:5px}
  .navigation.pagination .page-numbers{
    min-width:36px;height:36px;
    padding:0 9px;
    font-size:13px;
    border-width:1.5px;
    border-radius:8px;
    box-shadow:0 2px 0 var(--navy)
  }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next{
    padding:0 12px
  }
}
@media(max-width:480px){
  .navigation.pagination .page-numbers{
    min-width:32px;height:32px;
    padding:0 7px;
    font-size:12px
  }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next{
    padding:0 10px;font-size:11.5px
  }
}

/* =========================================================
   v83 :: フッター モバイル整理＆統一デザイン化
   既存の inline-style に依存しないクラスベース実装
   ========================================================= */

/* フッター全体 */
.kurako-footer{
  background:var(--navy);
  color:#fff;
  padding:60px 0 0;
  position:relative
}
.kurako-footer a{transition:color .2s ease}
.kurako-footer a:hover{color:var(--yellow)}

.kurako-footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px
}

/* 3列グリッド（会社情報 / SERVICE / COMPANY） */
.kurako-footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px
}

/* === ① 会社情報ブロック === */
.kurako-footer-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;margin-bottom:20px
}
.kurako-footer-logo-mark{
  width:42px;height:42px;border-radius:10px;
  background:var(--yellow);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:Montserrat,sans-serif;font-weight:900;font-size:20px;
  flex-shrink:0
}
.kurako-footer-logo-text{display:block;line-height:1.2}
.kurako-footer-logo-name{
  display:block;color:#fff;
  font-weight:800;font-size:20px;letter-spacing:.14em;
  white-space:nowrap
}
.kurako-footer-logo-en{
  display:block;color:rgba(255,255,255,.6);
  font-family:Inter,sans-serif;font-size:10px;font-weight:600;letter-spacing:.28em;
  margin-top:2px
}
.kurako-footer-desc{
  font-size:13px;line-height:1.9;
  color:rgba(255,255,255,.78);
  font-weight:500;margin:0
}
.kurako-footer-info{
  margin-top:18px;
  font-size:12px;line-height:1.9;
  color:rgba(255,255,255,.7)
}
.kurako-footer-info a{
  color:inherit;text-decoration:none;font-weight:700
}

/* === ② SERVICE / COMPANY ナビ === */
.kurako-footer-heading{
  font-size:13px;font-weight:900;letter-spacing:.16em;
  color:var(--yellow);margin:0 0 18px
}
.kurako-footer-list{
  list-style:none;padding:0;margin:0;
  font-size:13px;line-height:2;
  color:rgba(255,255,255,.85);font-weight:600
}
.kurako-footer-list a{
  color:inherit;text-decoration:none;
  display:inline-block;padding:1px 0
}
.kurako-footer-list a.is-highlight{
  color:var(--yellow);font-weight:800
}
.kurako-footer-divider{
  border-top:1px dashed rgba(255,255,255,.18);
  padding-top:8px;margin-top:8px
}

/* === ④ コピーライト＋規約 === */
.kurako-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:24px 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  font-size:11px;
  color:rgba(255,255,255,.6);font-weight:600
}
.kurako-footer-copy{flex-shrink:0}
.kurako-footer-legal{
  display:flex;gap:18px;flex-wrap:wrap
}
.kurako-footer-legal a{
  color:inherit;text-decoration:none
}

/* === 📱 タブレット幅 ≤900px === */
@media(max-width:900px){
  .kurako-footer{padding-top:48px}
  .kurako-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px 32px
  }
  /* 会社情報ブロックを横一杯 */
  .kurako-footer-brand{grid-column:1/-1}
  .kurako-footer-desc{max-width:560px}
}

/* === 📱 モバイル ≤700px === */
@media(max-width:700px){
  .kurako-footer{padding-top:40px}
  .kurako-footer-inner{padding:0 22px}

  .kurako-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px 22px;
    margin-bottom:28px
  }
  /* 会社情報：中央寄せに */
  .kurako-footer-brand{
    grid-column:1/-1;
    text-align:center;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    margin-bottom:6px
  }
  .kurako-footer-logo{
    justify-content:center;
    margin-bottom:14px
  }
  .kurako-footer-desc{
    text-align:left;
    max-width:none;
    font-size:12.5px;line-height:1.85
  }
  .kurako-footer-info{
    font-size:11.5px;
    text-align:center
  }
  /* SERVICE / COMPANY を2列に */
  .kurako-footer-heading{
    font-size:12px;
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.18)
  }
  .kurako-footer-list{
    font-size:12px;line-height:1.95
  }

  /* コピーライトは中央寄せ・縦並び */
  .kurako-footer-bottom{
    flex-direction:column;
    text-align:center;
    padding:20px 0 24px;
    gap:10px;
    font-size:10.5px
  }
  .kurako-footer-legal{
    justify-content:center;
    gap:14px;
    flex-wrap:nowrap
  }
}

/* === 📱 スマホ縦 ≤480px === */
@media(max-width:480px){
  .kurako-footer{padding-top:34px}
  .kurako-footer-inner{padding:0 18px}

  .kurako-footer-logo-mark{width:36px;height:36px;font-size:17px}
  .kurako-footer-logo-name{font-size:17px;letter-spacing:.12em}
  .kurako-footer-logo-en{font-size:9px;letter-spacing:.22em}

  .kurako-footer-desc{font-size:12px}
  .kurako-footer-info{font-size:11px}

  .kurako-footer-list{font-size:11.5px}

  /* 規約リンクが詰まる場合は3行縦並びにも対応 */
  .kurako-footer-legal{
    gap:10px 14px;
    flex-wrap:wrap
  }
}

/* =========================================================
   v84 :: CTAコンタクトカード A案 色付き背景化
   - 各カード背景を白→淡カラーに変更し白の割合を削減
   - アイコン円を白に反転して目立たせる
   - 内側padding圧縮で無駄な空白を削減
   - セクション全体の余白も圧縮
   ========================================================= */

/* セクション余白を圧縮 */
.contact .section-inner{padding:32px 24px !important}
@media(max-width:600px){
  .contact .section-inner{padding:24px 16px !important}
}

/* カード本体の余白を圧縮 */
.kurako-contact-card{
  padding:28px 22px 24px !important
}
@media(max-width:600px){
  .kurako-contact-card{padding:22px 16px 18px !important}
}

/* タイトル下マージン圧縮 */
.kcc-title{margin:4px 0 16px !important}

/* === 各カード共通：背景を色付きに変更＋padding圧縮 === */
.kcc-card{
  padding:18px 14px 14px !important
}
@media(max-width:600px){
  .kcc-card{padding:14px 12px 12px !important}
}

/* アイコン円を白背景に統一 */
.kcc-card .kcc-icon{
  background:#fff !important;
  width:48px !important;height:48px !important;
  margin:6px auto 6px !important;
  box-shadow:0 2px 4px rgba(0,0,0,.06)
}
@media(max-width:600px){
  .kcc-card .kcc-icon{width:40px !important;height:40px !important}
}

/* === カラーバリエーション：カード自体を淡色に === */
/* ① 電話：ピンク淡背景 */
.kcc-card.tel{
  background:#FFF1F2 !important
}
.kcc-card.tel .kcc-icon{background:#fff !important}

/* ② LINE：緑淡背景 */
.kcc-card.line{
  background:#F0F8E5 !important
}
.kcc-card.line .kcc-icon{background:#fff !important}

/* ③ フォーム：青淡背景 */
.kcc-card.form{
  background:#EBF3FC !important
}
.kcc-card.form .kcc-icon{background:#fff !important}

/* ④ ショールーム：オレンジ淡背景 */
.kcc-card.show{
  background:#FFF3E0 !important
}
.kcc-card.show .kcc-icon{background:#fff !important}

/* サブテキストの色を少し濃く（淡背景に対するコントラスト確保） */
.kcc-card .kcc-sub{
  color:#666 !important;
  margin-top:3px !important
}
.kcc-card .kcc-label{
  margin-bottom:1px !important
}

/* フッターの上余白圧縮 */
.kcc-foot{
  margin-top:14px !important;
  padding-top:12px !important
}

/* 装飾ドット：残った2つの位置をやや控えめに */
.kcc-dot-1{top:14px !important;right:18px !important;width:12px !important;height:12px !important}
.kcc-dot-3{top:50px !important;left:20px !important;width:10px !important;height:10px !important}

/* =========================================================
   v85 :: サイト全体モバイル余白圧縮（縦長感解消）
   ・スマホで一画面に入る情報量を増やすため、
     sub-section / sub-card / grid のmargin・padding を一斉圧縮
   ========================================================= */

/* === タブレット幅 ≤900px：軽圧縮 === */
@media(max-width:900px){
  .sub-section{padding:54px 0 !important}
  .sub-card{padding:24px 22px}
  .sub-card .num{
    width:42px !important;height:42px !important;
    font-size:14px !important;
    margin-bottom:12px
  }
  .sub-card h3{font-size:17px;margin-bottom:8px}
  .sub-card p{font-size:13.5px;line-height:1.85}
  .sub-head{margin-bottom:28px !important}
  .grid-2,.grid-3,.grid-4{gap:18px}
  .split-block,.split-block.reverse{gap:24px;margin-bottom:36px}
}

/* === モバイル幅 ≤700px：中圧縮 === */
@media(max-width:700px){
  /* セクション上下padding 大幅圧縮 */
  .sub-section{padding:42px 0 !important}
  .sub-section .sub-inner{padding:0 18px}

  /* セクション見出し */
  .sub-head{margin-bottom:22px !important}
  .section-title{font-size:21px;line-height:1.5}
  .section-en{font-size:11px;margin-bottom:10px}

  /* wp-h（小見出し） */
  .wp-h{margin:22px 0 12px !important;font-size:16.5px !important}

  /* sub-card 余白圧縮 */
  .sub-card{padding:20px 18px;border-radius:14px}
  .sub-card .num{
    width:40px !important;height:40px !important;
    font-size:13.5px !important;
    margin-bottom:10px !important
  }
  .sub-card h3{
    font-size:16px;
    margin-bottom:6px;
    line-height:1.45
  }
  .sub-card p{
    font-size:13px;
    line-height:1.8
  }

  /* グリッド gap を狭く */
  .grid-2,.grid-3,.grid-4{gap:12px !important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}

  /* split-block コンパクト化 */
  .split-block,.split-block.reverse{
    gap:18px !important;
    margin-bottom:28px !important;
    grid-template-columns:1fr
  }
  .split-block .split-img{aspect-ratio:16/10}
  .split-block .split-text h3{font-size:18px;margin-bottom:12px}
  .split-block .split-text p{font-size:13.5px;line-height:1.85;margin-bottom:10px}
}

/* === スマホ縦 ≤600px：強圧縮 === */
@media(max-width:600px){
  /* セクション padding をさらに圧縮 */
  .sub-section{padding:36px 0 !important}
  .sub-section .sub-inner{padding:0 16px}

  /* 見出しエリア圧縮 */
  .sub-head{margin-bottom:18px !important}
  .section-title{font-size:19px}
  .section-en{font-size:10.5px;margin-bottom:8px;gap:8px}
  .section-en::before,.section-en::after{width:16px}

  /* wp-h（小見出し）も詰める */
  .wp-h{margin:18px 0 10px !important;font-size:16px !important}

  /* sub-card 強圧縮 */
  .sub-card{
    padding:16px 14px !important;
    border-radius:12px
  }
  .sub-card .num{
    width:36px !important;height:36px !important;
    font-size:12.5px !important;
    margin-bottom:8px !important
  }
  .sub-card h3{
    font-size:15px !important;
    margin-bottom:5px !important;
    line-height:1.4
  }
  .sub-card p{
    font-size:12.5px !important;
    line-height:1.75 !important
  }

  /* グリッド：1列に＋gap詰め */
  .grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr !important;
    gap:10px !important
  }

  /* split-block さらに圧縮 */
  .split-block,.split-block.reverse{
    gap:14px !important;
    margin-bottom:22px !important
  }
  .split-block .split-img{border-width:3px}
  .split-block .split-text h3{font-size:17px;margin-bottom:10px}
  .split-block .split-text p{font-size:13px;line-height:1.8}

  /* sub-head 直後のリード文があれば margin 詰める */
  .sub-head + p,
  .section-lead{
    margin-bottom:18px !important;font-size:13px !important;line-height:1.85 !important
  }
}

/* === スマホ縦持ち極小 ≤380px：最大圧縮 === */
@media(max-width:380px){
  .sub-section{padding:30px 0 !important}
  .sub-card{padding:14px 12px !important}
  .sub-card .num{width:32px !important;height:32px !important;font-size:11.5px !important}
  .sub-card h3{font-size:14px !important}
  .sub-card p{font-size:12px !important}
  .section-title{font-size:17.5px}
  .wp-h{font-size:15px !important}
}

/* =========================================================
   v86 :: トップ簡易見積もりボタン アンカータグ化対応
   button → a に変更したのでリンク用属性を上書き
   ========================================================= */
a.estimate-btn{
  text-decoration:none;
  width:fit-content;
  max-width:90%;
  color:var(--navy)
}
a.estimate-btn:hover{
  color:var(--navy);
  text-decoration:none
}

/* =========================================================
   v87 :: トップ簡易見積もりフォーム ステータス表示
   ========================================================= */
#kurako-quick-estimate{margin:0}

.estimate-status{
  display:none;
  margin:18px auto 4px;
  max-width:680px;
  padding:14px 20px;
  border-radius:10px;
  font-size:14px;font-weight:700;
  letter-spacing:.04em;line-height:1.6;
  text-align:center;
  white-space:pre-line
}
.estimate-status.is-sending{
  display:block;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  border:2px solid var(--navy)
}
.estimate-status.is-success{
  display:block;
  background:#E7F6E2;
  color:#1B6E2F;
  border:2px solid #2DA351
}
.estimate-status.is-error{
  display:block;
  background:#FFE9EB;
  color:#A0162B;
  border:2px solid var(--red);
  text-align:left
}
/* 送信中はボタンを薄く＆ローディング感を演出 */
#kqe-submit:disabled{
  opacity:.6;cursor:wait;transform:none;
  box-shadow:0 6px 0 var(--yellow-deep)
}

/* =========================================================
   v91 :: コスト比較カードの空き解消
   highlight側でNOW＋初期費用＋金額の間に余分な空白ができる問題を、
   flex中央寄せで解消
   ========================================================= */
.cost-bar-card{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:6px
}
.cost-bar-card .cost-period{margin-bottom:0 !important}
.cost-bar-card .cost-amount-big{margin-bottom:2px !important}

/* v92 :: highlightの過剰 padding-top:30px を解除＋全カード同サイズに */
.cost-bar-card.highlight{padding-top:22px !important;margin-top:0 !important}
.cost-timeline-bars{align-items:stretch}

/* v93 :: NOW badge とコンテンツの被り解消（badge押し下げ＋コンテンツ余白確保） */
.cost-bar-card.highlight{padding-top:30px !important}
.cost-bar-card.highlight::before{top:-12px !important}
.cost-bar-card{padding-top:24px;padding-bottom:18px}
.cost-bar-card .cost-period{margin-top:4px !important}

/* v94 :: 塗料ページでv91のflex化を完全打ち消し（gridレイアウト復活） */
.paint-page-v2 .cost-bar-card{
  display:grid !important;
  flex-direction:initial !important;
  justify-content:initial !important;
  gap:0 !important;
  padding:10px 14px !important
}
.paint-page-v2 .cost-bar-card.highlight{
  padding-top:10px !important
}
.paint-page-v2 .cost-bar-card .cost-period{
  margin:0 !important;margin-top:0 !important
}

/* v95 :: cost-amount-big の上余白を半分以下に削減 */
.cost-bar-card{gap:0 !important;justify-content:flex-start !important;padding-top:18px !important}
.cost-bar-card .cost-period{margin:0 0 4px !important}
.cost-bar-card .cost-amount-big{margin-top:0 !important;margin-bottom:4px !important}
.cost-bar-card.highlight{padding-top:24px !important}

/* =========================================================
   v96 :: コスト比較カード 最終整理（バランス全体最適化）
   v91〜v95 の上書き調整を統合し、文字サイズと余白を再構築
   ・amount-big を 30px→22px に縮小（改行解消）
   ・highlight padding-top を 32px に（バッジ24px＋余白で被り解消）
   ・全カードの余白を統一してバランス確保
   ========================================================= */
.cost-bar-card{
  padding:20px 16px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:6px !important
}
.cost-bar-card.highlight{
  padding:32px 16px 20px !important;
  margin-top:0 !important
}
.cost-bar-card.highlight::before{
  top:-13px !important;
  font-size:11px !important;
  padding:5px 16px !important;
  letter-spacing:.12em !important
}
.cost-bar-card .cost-period{
  margin:0 !important;
  font-size:11.5px !important;
  letter-spacing:.14em
}
.cost-bar-card .cost-amount-big{
  margin:0 !important;
  font-size:22px !important;
  line-height:1.2 !important;
  white-space:nowrap
}
.cost-bar-card .cost-detail{
  margin:0 !important;
  font-size:11.5px !important;
  line-height:1.55 !important
}

/* スマホ縦持ちでさらに微調整 */
@media(max-width:480px){
  .cost-bar-card .cost-amount-big{font-size:19px !important}
  .cost-bar-card{padding:16px 12px !important}
  .cost-bar-card.highlight{padding:28px 12px 16px !important}
}

/* v97 :: NOWバッジと初期費用テキストの被り完全解消
   - padding-top を 32px → 42px に拡張（バッジ下に8px以上の余白を確保）
   - padding-bottom も増やして上下バランス確保 */
.cost-bar-card.highlight{padding:42px 16px 28px !important}
@media(max-width:480px){
  .cost-bar-card.highlight{padding:38px 12px 22px !important}
}

/* =========================================================
   v98 :: コスト比較カード NOW被り完全解消（PC＋モバイル両対応）
   - 親セレクタ .cost-timeline-bars で詳細度UP
   - PC：padding-top:50px で確実にバッジ下に余白
   - モバイル(paint-page-v2)：badgeをinline表示に復帰
   ========================================================= */

/* === PC・タブレット：通常版（バッジ完全上方分離） === */
.cost-timeline-bars .cost-bar-card.highlight{
  padding:50px 16px 24px !important;
  position:relative
}
.cost-timeline-bars .cost-bar-card.highlight::before{
  content:"NOW";
  position:absolute !important;
  top:-14px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background:var(--red);
  color:#fff;
  font-size:11px !important;
  font-weight:900;
  padding:6px 18px !important;
  border-radius:99px;
  letter-spacing:.12em !important;
  font-family:"Inter","Montserrat",sans-serif;
  z-index:5;
  white-space:nowrap;
  line-height:1
}

/* === モバイル paint-page-v2（grid表形式）：badgeをinline化 === */
@media(max-width:700px){
  .paint-page-v2 .cost-bar-card.highlight{
    padding:12px 14px !important
  }
  .paint-page-v2 .cost-bar-card.highlight::before{
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    font-size:9px !important;
    padding:2px 8px !important;
    margin-right:6px !important;
    display:inline-block !important;
    width:fit-content;
    align-self:flex-start;justify-self:flex-start;
    grid-column:1;grid-row:1
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    margin-left:4px !important
  }
}

/* =========================================================
   v100 :: 通常カードもhighlight同レイアウトに統一＋モバイルNOWバッジinline化
   ========================================================= */

/* ① PC: 通常版カード(非highlight)も highlight と同じpadding に統一 */
.cost-timeline-bars .cost-bar-card{
  padding:30px 16px 24px !important
}
.cost-timeline-bars .cost-bar-card.highlight{
  padding:30px 16px 24px !important
}

/* ② モバイル paint-page-v2: NOWバッジを absolute解除 → inline 表示 */
@media(max-width:700px){
  .paint-page-v2 .cost-bar-card.highlight::before{
    content:"NOW" !important;
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    display:inline-block !important;
    width:fit-content;
    background:var(--red) !important;
    color:#fff !important;
    font-size:9.5px !important;
    font-weight:900 !important;
    padding:2px 8px !important;
    margin-right:8px !important;     /* ← 文字との間隔 */
    border-radius:99px !important;
    letter-spacing:.08em !important;
    line-height:1.3 !important;
    grid-column:1;grid-row:1;
    align-self:center;justify-self:flex-start;
    vertical-align:middle
  }
  /* highlight時のcost-period「初期費用」「1回目の塗装」をNOWの隣に */
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    display:inline-block !important;
    vertical-align:middle;
    margin:0 !important
  }
}

/* v101 :: 塗料/屋根工事ページ モバイル時のセクション上下padding圧縮 */
@media(max-width:700px){
  .paint-page-v2 .sub-section{padding:10px 0 !important}
}

/* =========================================================
   v102 :: 塗料ページ モバイル highlight 行
   gridだとbadgeとperiodが同セルに重なるため、flexに切替
   レイアウト：[NOW] [初期費用] [金額]
              [1回目の塗装]
   ========================================================= */
@media(max-width:700px){
  .paint-page-v2 .cost-bar-card.highlight{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    padding:12px 14px !important
  }
  .paint-page-v2 .cost-bar-card.highlight::before{
    content:"NOW" !important;
    position:static !important;
    top:auto !important;left:auto !important;
    transform:none !important;
    background:var(--red) !important;color:#fff !important;
    font-size:9.5px !important;font-weight:900 !important;
    padding:2px 8px !important;
    margin-right:8px !important;
    border-radius:99px !important;
    letter-spacing:.06em !important;
    line-height:1.4 !important;
    display:inline-block !important;
    width:auto !important;
    grid-column:auto !important;grid-row:auto !important;
    flex:none !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    flex:1 1 auto !important;
    display:block !important;
    margin:0 !important;
    font-size:12px !important;
    color:var(--navy) !important;
    font-weight:800 !important;
    grid-column:auto !important;grid-row:auto !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    flex:none !important;
    text-align:right !important;
    font-size:18px !important;
    color:var(--red) !important;
    margin:0 !important;
    grid-column:auto !important;grid-row:auto !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-detail{
    flex-basis:100% !important;
    margin-top:4px !important;
    font-size:10px !important;
    color:var(--muted) !important;
    grid-column:auto !important;grid-row:auto !important
  }
}

/* v103 :: cost-amount-big スタイル指定 */
.cost-bar-card .cost-amount-big{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.4 !important;
  white-space:nowrap
}

/* v104 :: NOWを「初期費用」の後ろに移動＋文字サイズ均衡化 */
@media(max-width:700px){
  /* flex order でNOWバッジを cost-period の後ろに */
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    order:1 !important;
    font-size:13px !important;
    font-weight:800 !important;
    color:var(--navy) !important;
    margin:0 !important
  }
  .paint-page-v2 .cost-bar-card.highlight::before{
    order:2 !important;
    margin-right:0 !important;
    margin-left:8px !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    order:3 !important;
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.4 !important;
    margin-left:auto !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-detail{
    order:4 !important;
    font-size:11px !important;
    color:var(--muted) !important
  }
  /* 通常カードのバランスも揃える */
  .paint-page-v2 .cost-bar-card .cost-period{
    font-size:13px !important;
    font-weight:800 !important
  }
  .paint-page-v2 .cost-bar-card .cost-amount-big{
    font-size:18px !important;
    font-weight:900 !important
  }
  .paint-page-v2 .cost-bar-card .cost-detail{
    font-size:11px !important
  }
}

/* =========================================================
   v105 :: 塗料ページ特徴カード 写真撤去＋液だれ風ナンバー
   ・feat-photo を完全非表示
   ・横並びテキストカード化（左：液だれナンバー、右：タイトル＋説明）
   ・番号バッジは不規則なborder-radiusで液だれ感
   ========================================================= */

/* 写真エリア非表示 */
.paint-features-v2 .feat-photo img{display:none !important}
.paint-features-v2 .feat-photo{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  aspect-ratio:auto !important;
  height:auto !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  flex-shrink:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important
}

/* カード全体を横並びレイアウトに */
.paint-features-v2{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:18px !important
}
.paint-features-v2 .feature-card-v2{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:22px !important;
  background:#fff !important;
  border:1.5px solid var(--line);
  border-radius:16px !important;
  padding:24px 26px !important;
  overflow:visible !important;
  box-shadow:0 4px 12px rgba(31,58,107,.04)
}
.paint-features-v2 .feature-card-v2:hover{
  border-color:var(--yellow-deep);
  box-shadow:0 8px 22px rgba(31,58,107,.08);
  transform:translateY(-2px);
  transition:.3s
}

/* === 液だれ風ナンバーバッジ === */
.paint-features-v2 .feat-num{
  position:relative !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:72px !important;
  height:72px !important;
  background:var(--yellow) !important;
  color:var(--navy) !important;
  font-family:"Montserrat","Inter",sans-serif !important;
  font-weight:900 !important;
  font-size:24px !important;
  letter-spacing:.04em !important;
  /* 液だれ感の不規則なborder-radius */
  border-radius:48% 52% 60% 40% / 55% 45% 58% 42% !important;
  flex-shrink:0;
  box-shadow:0 6px 0 var(--yellow-deep), 0 12px 18px rgba(245,184,0,.25);
  transform:rotate(-4deg);
  top:auto !important;left:auto !important;
  animation:numdrip 6s ease-in-out infinite alternate
}
.paint-features-v2 .feature-card-v2:nth-child(even) .feat-num{
  transform:rotate(3deg);
  border-radius:55% 45% 42% 58% / 60% 40% 50% 50% !important
}
/* 液だれの「滴」を疑似要素で追加 */
.paint-features-v2 .feat-num::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:14px;
  background:var(--yellow);
  border-radius:50%;
  box-shadow:0 3px 0 var(--yellow-deep);
  opacity:.85
}
.paint-features-v2 .feature-card-v2:nth-child(even) .feat-num::after{
  left:42%
}

/* ゆらぎアニメ */
@keyframes numdrip{
  0%   {border-radius:48% 52% 60% 40% / 55% 45% 58% 42%}
  50%  {border-radius:52% 48% 45% 55% / 60% 40% 50% 50%}
  100% {border-radius:55% 45% 58% 42% / 48% 52% 45% 55%}
}

/* テキスト部分 */
.paint-features-v2 .feat-body{
  flex:1 1 auto !important;
  padding:0 !important;
  min-width:0
}
.paint-features-v2 .feat-body h4{
  font-size:17px !important;
  font-weight:900 !important;
  color:var(--navy) !important;
  letter-spacing:.04em !important;
  margin:0 0 8px !important;
  line-height:1.45
}
.paint-features-v2 .feat-body p{
  font-size:13.5px !important;
  line-height:1.85 !important;
  color:var(--text) !important;
  font-weight:500 !important;
  margin:0 !important
}

/* === レスポンシブ === */
@media(max-width:900px){
  .paint-features-v2{grid-template-columns:1fr !important}
}
@media(max-width:700px){
  .paint-features-v2 .feature-card-v2{
    padding:18px 18px !important;
    gap:16px !important
  }
  .paint-features-v2 .feat-num{
    width:56px !important;
    height:56px !important;
    font-size:19px !important
  }
  .paint-features-v2 .feat-num::after{
    width:11px;height:11px;bottom:-6px
  }
  .paint-features-v2 .feat-body h4{font-size:15px !important;margin-bottom:5px !important}
  .paint-features-v2 .feat-body p{font-size:12.5px !important;line-height:1.75 !important}
}
@media(max-width:480px){
  .paint-features-v2 .feature-card-v2{padding:14px 14px !important;gap:12px !important}
  .paint-features-v2 .feat-num{width:48px !important;height:48px !important;font-size:16px !important}
}

/* =========================================================
   v106 :: 塗料ページ モバイル コスト比較 シンプル化
   3行を完全に同じレイアウトに統一。
   highlight だけ ①NOWバッジ表示 ②背景クリーム ③金額が赤 のみ違い
   ========================================================= */
@media(max-width:700px){
  /* 全行を grid に戻して順序リセット */
  .paint-page-v2 .cost-bar-card,
  .paint-page-v2 .cost-bar-card.highlight{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:2px !important;
    padding:14px 16px !important;
    background:#fff !important;
    border:none !important;
    border-bottom:1px solid var(--line) !important;
    align-items:center !important
  }

  /* cost-period「初期費用 / 15年後 / 30年後」← 左上 */
  .paint-page-v2 .cost-bar-card .cost-period,
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    grid-column:1 !important;grid-row:1 !important;
    order:initial !important;
    margin:0 !important;
    font-size:13px !important;
    font-weight:800 !important;
    color:var(--navy) !important;
    text-align:left !important
  }

  /* cost-amount-big「金額」← 右 */
  .paint-page-v2 .cost-bar-card .cost-amount-big,
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    grid-column:2 !important;grid-row:1 !important;
    order:initial !important;
    margin:0 !important;
    font-size:18px !important;
    font-weight:900 !important;
    color:var(--navy) !important;
    text-align:right !important;
    line-height:1.4 !important;
    white-space:nowrap !important
  }

  /* cost-detail「説明」← 左下 */
  .paint-page-v2 .cost-bar-card .cost-detail,
  .paint-page-v2 .cost-bar-card.highlight .cost-detail{
    grid-column:1/-1 !important;grid-row:2 !important;
    order:initial !important;
    margin:0 !important;
    font-size:11px !important;
    color:var(--muted) !important;
    line-height:1.5 !important;
    text-align:left !important
  }

  /* === highlight だけの3つの差異 === */
  /* ① 背景クリーム */
  .paint-page-v2 .cost-bar-card.highlight{
    background:#fff8e1 !important
  }
  /* ② 金額が赤 */
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    color:var(--red) !important
  }
  /* ③ NOWバッジ：金額の直前(grid-column:2の左)に inline */
  .paint-page-v2 .cost-bar-card.highlight::before{
    content:"NOW" !important;
    position:static !important;
    display:inline-block !important;
    background:var(--red) !important;color:#fff !important;
    font-size:9.5px !important;font-weight:900 !important;
    padding:2px 8px !important;
    border-radius:99px !important;
    letter-spacing:.06em !important;
    line-height:1.4 !important;
    grid-column:2 !important;grid-row:1 !important;
    justify-self:end !important;align-self:center !important;
    margin-right:8px !important;
    transform:none !important;
    top:auto !important;left:auto !important;
    order:initial !important;
    width:fit-content !important
  }
  /* NOWと金額を1セルに収めるためflexで横並びに */
  .paint-page-v2 .cost-bar-card.highlight{
    /* amount-big と NOW が同セル時用にラッパー的にFlex化を維持しないため、
       grid-column:2 の同セル内で重ねないように amount-bigを別カラムに */
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-amount-big{
    grid-column:3 !important
  }
  .paint-page-v2 .cost-bar-card.highlight{
    grid-template-columns:1fr auto auto !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-period{
    grid-column:1 !important
  }
  .paint-page-v2 .cost-bar-card.highlight .cost-detail{
    grid-column:1/-1 !important
  }
}

/* =========================================================
   v107 :: チャットボット内のCTAリンクボタン
   ========================================================= */
.cp-cta-group{
  display:flex;flex-direction:column;gap:6px;
  margin-top:10px
}
.cp-cta-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--navy);
  color:#fff !important;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;
  padding:8px 14px;border-radius:99px;
  text-decoration:none !important;
  transition:.2s;
  box-shadow:0 3px 0 #142a52
}
.cp-cta-link:hover{
  background:var(--yellow);color:var(--navy) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 0 var(--yellow-deep)
}
.cp-cta-link.cp-cta-tel{
  background:var(--red);
  box-shadow:0 3px 0 var(--red-deep)
}
.cp-cta-link.cp-cta-tel:hover{
  background:#fff;color:var(--red) !important;
  box-shadow:0 4px 0 var(--red-deep)
}

/* v108 :: チャット内 一押し塗料リンクボタン（黄色強調） */
.cp-cta-link.cp-cta-rec{
  background:var(--yellow);
  color:var(--navy) !important;
  box-shadow:0 3px 0 var(--yellow-deep);
  font-weight:900
}
.cp-cta-link.cp-cta-rec:hover{
  background:var(--navy);
  color:var(--yellow) !important;
  box-shadow:0 4px 0 #142a52
}

/* v109 :: チャットボット返答末尾のクイックメニュー（毎回表示） */
.cp-bubble .cp-quick-inline{
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed rgba(31,58,107,.2);
  display:flex;flex-wrap:wrap;gap:6px
}
.cp-bubble .cp-quick-inline button{
  font-size:11.5px;
  padding:5px 10px;
  border-radius:99px;
  background:#fff;
  border:1.5px solid var(--navy);
  color:var(--navy);
  font-weight:700;
  cursor:pointer;
  transition:.2s
}
.cp-bubble .cp-quick-inline button:hover{
  background:var(--navy);color:#fff
}

/* ===== v110 :: ワニ君をセクションとセクションの間に配置（カード被り解消） ===== */
/* セクションを overflow:visible にしてワニがはみ出せるようにする */
.sub-section{ overflow:visible !important; position:relative; }

/* ワニを bottom/top の外側にずらす：セクション境界に立つ */
.wani-bl{ bottom:-48px !important; left:24px !important; top:auto !important; }
.wani-br{ bottom:-48px !important; right:24px !important; top:auto !important; }
.wani-tl{ top:-48px !important; left:24px !important; bottom:auto !important; }
.wani-tr{ top:-48px !important; right:24px !important; bottom:auto !important; }

/* タブレット */
@media (max-width:1100px){
  .wani-bl{ bottom:-38px !important; left:14px !important; }
  .wani-br{ bottom:-38px !important; right:14px !important; }
  .wani-tl{ top:-38px !important; left:14px !important; }
  .wani-tr{ top:-38px !important; right:14px !important; }
}

/* モバイル */
@media (max-width:900px){
  .wani-bl{ bottom:-30px !important; left:8px !important; }
  .wani-br{ bottom:-30px !important; right:8px !important; }
  .wani-tl{ top:-30px !important; left:8px !important; }
  .wani-tr{ top:-30px !important; right:8px !important; }
}

@media (max-width:700px){
  .wani-bl{ bottom:-24px !important; left:6px !important; }
  .wani-br{ bottom:-24px !important; right:6px !important; }
  .wani-tl{ top:-24px !important; left:6px !important; }
  .wani-tr{ top:-24px !important; right:6px !important; }
}

@media (max-width:480px){
  /* 小画面ではワニのサイズが小さくなるので、境界ピッタリに */
  .wani-bl{ bottom:-18px !important; left:4px !important; }
  .wani-br{ bottom:-18px !important; right:4px !important; }
  .wani-tl{ top:-18px !important; left:4px !important; }
  .wani-tr{ top:-18px !important; right:4px !important; }
}

/* ===== v111+v117 :: フッター下部padding統一（v116で規約リンク移設済み・全画面30pxに統一） ===== */
.kurako-footer-bottom{
  padding-right:0 !important;
  padding-bottom:30px !important;
}
@media(max-width:900px){
  .kurako-footer-bottom{ padding-bottom:30px !important; }
}
@media(max-width:700px){
  .kurako-footer-bottom{ padding-bottom:30px !important; }
}
@media(max-width:480px){
  .kurako-footer-bottom{ padding-bottom:30px !important; }
}

/* ===== v112 :: ワニ君 左右交互配置 + z-index前面化 ===== */
/*
 * ルール：
 *   - すべての「下部ワニ (.wani-bl / .wani-br)」→ 右側に統一
 *   - すべての「上部ワニ (.wani-tl / .wani-tr)」→ 左側に統一
 * これにより各セクション境界で「下:右 + 次の上:左」となり、
 * ワニ同士が必ず反対側に来るため重なりが発生しません。
 * (読み下し順では 左→右→左→右 の交互配置になります)
 */

/* z-index を 50 まで引き上げ：sub-card等(1-20)より前面、header(100)/chat(9000)/modal(10000)より背面 */
.wani{ z-index:50 !important; }

/* PC：下部ワニは右、上部ワニは左に強制 */
.wani-bl, .wani-br{
  left:auto !important;
  right:24px !important;
  bottom:-48px !important;
  top:auto !important;
}
.wani-tl, .wani-tr{
  right:auto !important;
  left:24px !important;
  top:-48px !important;
  bottom:auto !important;
}

/* タブレット ≤1100px */
@media(max-width:1100px){
  .wani-bl, .wani-br{ right:14px !important; bottom:-38px !important; }
  .wani-tl, .wani-tr{ left:14px !important; top:-38px !important; }
}

/* モバイル ≤900px */
@media(max-width:900px){
  .wani-bl, .wani-br{ right:8px !important; bottom:-30px !important; }
  .wani-tl, .wani-tr{ left:8px !important; top:-30px !important; }
}

@media(max-width:700px){
  .wani-bl, .wani-br{ right:6px !important; bottom:-24px !important; }
  .wani-tl, .wani-tr{ left:6px !important; top:-24px !important; }
}

@media(max-width:480px){
  .wani-bl, .wani-br{ right:4px !important; bottom:-18px !important; }
  .wani-tl, .wani-tr{ left:4px !important; top:-18px !important; }
}

/* ===== v113 :: ワニ君z-index根本修正 + breadcrumb被り解消 ===== */
/*
 * 【根本原因】
 *   .sub-section に isolation:isolate が指定されていたため、
 *   各セクションが独立した stacking context を生成。
 *   結果、子要素のワニ君 z-index:50 がそのセクション内でしか効かず、
 *   次セクションの背景に上書きされていた。
 *
 * 【修正】
 *   1. .sub-section の isolation を auto に戻す（積層分離を解除）
 *   2. ::before/::after は z-index:0 に変更（旧 -1 だとルートで消失するため）
 *   3. .sub-inner は z-index:1 で擬似要素より前面（既存維持）
 *   4. .wani は z-index:50 でルート文脈に浮上 → 全セクション背景より前面
 */

/* 1. isolation 解除：これでワニがセクション境界を越えて見えるようになる */
.sub-section{ isolation:auto !important; }

/* 2. 装飾用擬似要素：z-index:-1 → 0 に変更（ルート文脈で消えないように） */
.sub-section::before,
.sub-section::after{
  z-index:0 !important;
}

/* 3. sub-inner は擬似要素より前面（既存ルール再確認のため明示） */
.sub-section > .sub-inner{
  position:relative;
  z-index:1;
}

/* 4. ワニ君は z-index:50（v112で設定済み・ヘッダー100, チャット9000より下なので安全） */
/* (v112 ですでに記述済みなのでここでは省略) */

/* ============================================
 * breadcrumb被り対策：最初のsub-sectionのトップワニを右に
 * ============================================ */
/* 1番目の sub-section にあるトップワニはパンくず／ヒーローの真下に出現するため、
 * 左に置くとパンくずリンク「ホーム / xx」と被る。
 * このパターンのみ右側に強制配置する */
.sub-section:first-of-type .wani-tl,
.sub-section:first-of-type .wani-tr{
  left:auto !important;
  right:24px !important;
}

@media(max-width:1100px){
  .sub-section:first-of-type .wani-tl,
  .sub-section:first-of-type .wani-tr{ right:14px !important; }
}
@media(max-width:900px){
  .sub-section:first-of-type .wani-tl,
  .sub-section:first-of-type .wani-tr{ right:8px !important; }
}
@media(max-width:700px){
  .sub-section:first-of-type .wani-tl,
  .sub-section:first-of-type .wani-tr{ right:6px !important; }
}
@media(max-width:480px){
  .sub-section:first-of-type .wani-tl,
  .sub-section:first-of-type .wani-tr{ right:4px !important; }
}

/* ===== v115 :: breadcrumb直後の sub-section トップワニを確実に右側へ ===== */
/*
 * v113 の .sub-section:first-of-type は <section class="page-hero"> が
 * 先にあるためマッチせず無効化されていた。
 * breadcrumb 直後の sub-section を明示的に狙うセレクタに変更。
 */

/* PC：複数パターンを併記して確実に最初の sub-section をキャプチャ */
.breadcrumb + .sub-section .wani-tl,
.breadcrumb + .sub-section .wani-tr,
.page-hero + .breadcrumb + .sub-section .wani-tl,
.page-hero + .breadcrumb + .sub-section .wani-tr,
.page-hero + .sub-section .wani-tl,
.page-hero + .sub-section .wani-tr{
  left:auto !important;
  right:24px !important;
}

@media(max-width:1100px){
  .breadcrumb + .sub-section .wani-tl,
  .breadcrumb + .sub-section .wani-tr,
  .page-hero + .breadcrumb + .sub-section .wani-tl,
  .page-hero + .breadcrumb + .sub-section .wani-tr,
  .page-hero + .sub-section .wani-tl,
  .page-hero + .sub-section .wani-tr{ right:14px !important; }
}
@media(max-width:900px){
  .breadcrumb + .sub-section .wani-tl,
  .breadcrumb + .sub-section .wani-tr,
  .page-hero + .breadcrumb + .sub-section .wani-tl,
  .page-hero + .breadcrumb + .sub-section .wani-tr,
  .page-hero + .sub-section .wani-tl,
  .page-hero + .sub-section .wani-tr{ right:8px !important; }
}
@media(max-width:700px){
  .breadcrumb + .sub-section .wani-tl,
  .breadcrumb + .sub-section .wani-tr,
  .page-hero + .breadcrumb + .sub-section .wani-tl,
  .page-hero + .breadcrumb + .sub-section .wani-tr,
  .page-hero + .sub-section .wani-tl,
  .page-hero + .sub-section .wani-tr{ right:6px !important; }
}
@media(max-width:480px){
  .breadcrumb + .sub-section .wani-tl,
  .breadcrumb + .sub-section .wani-tr,
  .page-hero + .breadcrumb + .sub-section .wani-tl,
  .page-hero + .breadcrumb + .sub-section .wani-tr,
  .page-hero + .sub-section .wani-tl,
  .page-hero + .sub-section .wani-tr{ right:4px !important; }
}

/* ===== v116 :: 規約リンクを住所・電話番号の下に配置 ===== */
/* 会社情報ブロック内：TELの下に表示 */
.kurako-footer-legal-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px;
  color:rgba(255,255,255,.6);
  font-weight:600
}
.kurako-footer-legal-top a{
  color:inherit;
  text-decoration:none;
  transition:.2s
}
.kurako-footer-legal-top a:hover{
  color:#fff;
  text-decoration:underline
}

/* bottom セクションは copyright だけになったので中央寄せ */
.kurako-footer-bottom{
  justify-content:center !important;
  text-align:center;
  padding-right:0 !important;
  padding-bottom:30px !important;
}

/* モバイル：規約リンクを中央寄せに */
@media(max-width:700px){
  .kurako-footer-legal-top{
    justify-content:center;
    text-align:center;
    gap:8px 14px
  }
}

/* ===== v122 :: サービスカテゴリー モバイル(<700px) A案レイアウト ===== */
/* 横長カード：アイコン左 + テキスト右 + 矢印右端
 * 横幅86%、1列、低身長
 */
@media(max-width:700px){
  .service-categories{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px 0 18px;
  }
  .service-item{
    width:86%;
    padding:0 !important;
    background:#fff;
    border-width:2px;
    border-radius:14px;
  }
  .service-item a{
    display:flex !important;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    text-decoration:none;
  }
  /* アイコン円：左に固定サイズ */
  .service-item .icon{
    width:50px !important;
    height:50px !important;
    aspect-ratio:1/1;
    margin:0 !important;
    flex-shrink:0;
    border-radius:50%;
    background:#f3e6c7;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .service-item .icon img{
    width:72% !important;
    height:auto;
  }
  /* テキスト：中央寄せ→左寄せに */
  .service-item .text{
    flex:1;
    text-align:left !important;
    min-width:0;
  }
  .service-item h3{
    font-size:15px !important;
    font-weight:800 !important;
    margin:0 0 2px !important;
    letter-spacing:.04em !important;
    line-height:1.3 !important;
  }
  .service-item p{
    font-size:11.5px !important;
    margin:0 !important;
    line-height:1.3 !important;
    color:#666 !important;
  }
  /* 矢印ボタン：右端の小さい円に */
  .service-item .card-btn{
    position:static !important;
    width:26px !important;
    height:26px !important;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:currentColor; /* 枠色を継承 */
  }
  .service-item .card-btn .arrow{
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
  }
  .service-item .card-btn .arrow::after{
    content:"→";
    color:#fff !important;
    font-size:12px !important;
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    display:inline !important;
    margin:0 !important;
  }
  /* 矢印が .text の中に入っているケース（ショールームカード）にも対応 */
  .service-item .text .card-btn{
    position:absolute !important;
    right:10px;
    top:50%;
    transform:translateY(-50%);
  }
  .service-item{ position:relative; }

  /* ホバー時の色は枠色そのまま使用、文字色は通常時のまま */
  .service-item:hover{
    background:#fff !important;
  }
  .service-item:hover h3,
  .service-item:hover p{ color:inherit !important; }
  .service-item:hover .icon{ background:#f3e6c7 !important; }
}

/* ===== v123 :: サービスカテゴリー モバイルA案 (v122差し替え版・特定性修正) ===== */
@media(max-width:700px){
  /* コンテナ：縦並び中央寄せ */
  .service-categories{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:12px !important;
    padding:20px 0 24px !important;
  }
  /* カード：横幅86%・横長 */
  .service-categories .service-item{
    width:86% !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border-width:2.5px !important;
    border-radius:14px !important;
    position:relative !important;
  }
  /* 内側リンク：flex横並び */
  .service-categories .service-item a{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:12px 14px !important;
    text-decoration:none !important;
  }
  /* アイコン円：左固定45px */
  .service-categories .service-item .icon{
    width:48px !important;
    height:48px !important;
    aspect-ratio:1/1 !important;
    margin:0 !important;
    flex-shrink:0 !important;
    border-radius:50% !important;
    background:#f3e6c7 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .service-categories .service-item .icon img{
    width:78% !important;
    height:auto !important;
  }
  /* テキスト：flex:1で左寄せ */
  .service-categories .service-item .text{
    flex:1 !important;
    text-align:left !important;
    min-width:0 !important;
    padding:0 !important;
  }
  .service-categories .service-item h3{
    font-size:15.5px !important;
    font-weight:800 !important;
    margin:0 0 2px !important;
    letter-spacing:.04em !important;
    line-height:1.3 !important;
  }
  .service-categories .service-item p{
    font-size:11.5px !important;
    margin:0 !important;
    line-height:1.3 !important;
    color:#555 !important;
  }
  /* 矢印ボタン：右端のライトグレー丸＋黒矢印 */
  .service-categories .service-item .card-btn{
    position:static !important;
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    background:#f3f3f3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
    transform:none !important;
    margin:0 !important;
    box-shadow:none !important;
  }
  .service-categories .service-item .card-btn .arrow{
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    margin:0 !important;
    position:static !important;
  }
  .service-categories .service-item .card-btn .arrow::before,
  .service-categories .service-item .card-btn .arrow::after{
    content:"→" !important;
    color:#222 !important;
    font-size:14px !important;
    font-weight:900 !important;
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    display:inline !important;
    position:static !important;
    margin:0 !important;
    padding:0 !important;
  }
  .service-categories .service-item .card-btn .arrow::before{ content:"" !important; display:none !important; }
  /* ショールームカード：.card-btnが.text内にある場合 */
  .service-categories .service-item .text .card-btn{
    position:absolute !important;
    right:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
  /* ホバー反転禁止（モバイルではタッチ時に色変わるのは違和感） */
  .service-categories .service-item:hover{ background:#fff !important; }
  .service-categories .service-item:hover h3{ color:inherit !important; }
  .service-categories .service-item:hover p{ color:#555 !important; }
  .service-categories .service-item:hover .icon{ background:#f3e6c7 !important; }
  .service-categories .service-item:hover .card-btn{ background:#f3f3f3 !important; }
  /* nth-child(5)の中央寄せはflex columnなので不要・自動 */
  .service-categories .service-item:nth-child(5){
    margin-left:0 !important;margin-right:0 !important;
  }
}

/* スマホ縦(<480px)：少しコンパクトに */
@media(max-width:480px){
  .service-categories .service-item{ width:86% !important; }
  .service-categories .service-item a{ padding:10px 12px !important; gap:12px !important; }
  .service-categories .service-item .icon{ width:44px !important; height:44px !important; }
  .service-categories .service-item h3{ font-size:14.5px !important; }
  .service-categories .service-item p{ font-size:11px !important; }
  .service-categories .service-item .card-btn{ width:30px !important; height:30px !important; }
}

/* ===== v124 :: モバイル A案 矢印色を枠色と同期＋ホバー反転 ===== */
@media(max-width:700px){
  /* 矢印ボタン：通常時は枠色背景＋白矢印 */
  .service-categories .service-item.color-red    .card-btn{ background:#e60012 !important; }
  .service-categories .service-item.color-yellow .card-btn{ background:#f5c400 !important; }
  .service-categories .service-item.color-green  .card-btn{ background:#2fb44a !important; }
  .service-categories .service-item.color-blue   .card-btn{ background:#00a0e9 !important; }
  .service-categories .service-item.color-pink   .card-btn{ background:#ff5ca8 !important; }

  /* 矢印の文字は白(通常時) */
  .service-categories .service-item .card-btn .arrow::after{
    color:#fff !important;
  }

  /* ===== ホバー（タップ）：背景=枠色 / 文字・矢印=白 ===== */
  .service-categories .service-item.color-red:hover,
  .service-categories .service-item.color-red:active   { background:#e60012 !important; }
  .service-categories .service-item.color-yellow:hover,
  .service-categories .service-item.color-yellow:active{ background:#f5c400 !important; }
  .service-categories .service-item.color-green:hover,
  .service-categories .service-item.color-green:active { background:#2fb44a !important; }
  .service-categories .service-item.color-blue:hover,
  .service-categories .service-item.color-blue:active  { background:#00a0e9 !important; }
  .service-categories .service-item.color-pink:hover,
  .service-categories .service-item.color-pink:active  { background:#ff5ca8 !important; }

  /* ホバー時：文字を白に */
  .service-categories .service-item:hover h3,
  .service-categories .service-item:active h3{ color:#fff !important; }
  .service-categories .service-item:hover p,
  .service-categories .service-item:active p{ color:#fff !important; }

  /* ホバー時：アイコン背景を白に（中のワニ君が見えやすく） */
  .service-categories .service-item:hover .icon,
  .service-categories .service-item:active .icon{ background:#fff !important; }

  /* ホバー時：矢印ボタンを白丸＋枠色の矢印 反転 */
  .service-categories .service-item.color-red:hover    .card-btn,
  .service-categories .service-item.color-red:active   .card-btn{ background:#fff !important; }
  .service-categories .service-item.color-yellow:hover .card-btn,
  .service-categories .service-item.color-yellow:active .card-btn{ background:#fff !important; }
  .service-categories .service-item.color-green:hover  .card-btn,
  .service-categories .service-item.color-green:active .card-btn{ background:#fff !important; }
  .service-categories .service-item.color-blue:hover   .card-btn,
  .service-categories .service-item.color-blue:active  .card-btn{ background:#fff !important; }
  .service-categories .service-item.color-pink:hover   .card-btn,
  .service-categories .service-item.color-pink:active  .card-btn{ background:#fff !important; }

  /* ホバー時：矢印アイコンを枠色に */
  .service-categories .service-item.color-red:hover    .card-btn .arrow::after,
  .service-categories .service-item.color-red:active   .card-btn .arrow::after{ color:#e60012 !important; }
  .service-categories .service-item.color-yellow:hover .card-btn .arrow::after,
  .service-categories .service-item.color-yellow:active .card-btn .arrow::after{ color:#f5c400 !important; }
  .service-categories .service-item.color-green:hover  .card-btn .arrow::after,
  .service-categories .service-item.color-green:active .card-btn .arrow::after{ color:#2fb44a !important; }
  .service-categories .service-item.color-blue:hover   .card-btn .arrow::after,
  .service-categories .service-item.color-blue:active  .card-btn .arrow::after{ color:#00a0e9 !important; }
  .service-categories .service-item.color-pink:hover   .card-btn .arrow::after,
  .service-categories .service-item.color-pink:active  .card-btn .arrow::after{ color:#ff5ca8 !important; }
}

/* ===== v125 :: お問い合わせ(5枚目)カードを他と同サイズに統一 ===== */
@media(max-width:700px){
  .service-categories .service-item,
  .service-categories .service-item:nth-child(1),
  .service-categories .service-item:nth-child(2),
  .service-categories .service-item:nth-child(3),
  .service-categories .service-item:nth-child(4),
  .service-categories .service-item:nth-child(5){
    width:86% !important;
    max-width:86% !important;
    min-width:86% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    padding:0 !important;
    flex-shrink:0 !important;
  }
}
@media(max-width:480px){
  .service-categories .service-item,
  .service-categories .service-item:nth-child(1),
  .service-categories .service-item:nth-child(2),
  .service-categories .service-item:nth-child(3),
  .service-categories .service-item:nth-child(4),
  .service-categories .service-item:nth-child(5){
    width:86% !important;
    max-width:86% !important;
    min-width:86% !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* ===== v128 :: showroom VISIT FLOW カードを低身長化 ===== */
.visit-flow-card h3{ margin:6px 0 6px !important; font-size:16.5px !important; }
.visit-flow-card p{ font-size:13.5px !important; line-height:1.7 !important; margin:0 !important; }
.visit-flow-card .num{ width:42px !important; height:42px !important; font-size:14px !important; margin:0 !important; }

/* ===== v134 :: 横長ロゴスロット（FV内＋フッター下） ===== */
/* 該当画像ファイル(kurako-img/logo-wide.png / logo-wide-footer.png)を置けばPHP側で自動表示 */
/* v147 :: ロゴサイズ約半分に */
.hero-logo-wide{ margin:0 0 14px; max-width:140px; }
.hero-logo-wide img{ width:100%;height:auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
@media(max-width:900px){ .hero-logo-wide{ max-width:110px;margin-bottom:10px; } }
@media(max-width:480px){ .hero-logo-wide{ max-width:90px;margin-bottom:8px; } }

.kurako-footer-logo-wide{ display:flex;justify-content:center;margin:16px auto 6px;max-width:130px; }
.kurako-footer-logo-wide img{ width:100%;height:auto;display:block;opacity:.92; }
@media(max-width:900px){ .kurako-footer-logo-wide{ max-width:100px; } }

/* ===== v135 :: 工事写真レポート ギャラリー ===== */
.work-report-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:0 0 40px;
}
.work-report-item{
  position:relative;display:block;width:100%;padding:0;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:.25s;
  aspect-ratio:4/3;
}
.work-report-item:hover{ border-color:var(--yellow); transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.08); }
.work-report-item img{ width:100%;height:100%;object-fit:cover;display:block; }
.work-report-no{
  position:absolute;top:8px;left:8px;
  background:var(--navy);color:#fff;font-family:"Montserrat";font-weight:900;
  font-size:11px;padding:3px 9px;border-radius:99px;letter-spacing:.06em;
}
.work-report-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:#fff;font-size:12px;font-weight:600;padding:14px 10px 8px;
}
@media(max-width:700px){
  .work-report-grid{ grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:30px; }
  .work-report-no{ font-size:10px; padding:2px 7px; }
}

/* ===== v144 :: ライトボックスに前後ナビ矢印＋カウンタ追加 ===== */
.kurako-lightbox-prev,
.kurako-lightbox-next{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#1F3A6B;
  border:none;
  font-size:22px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:.25s;
  z-index:10001;
}
.kurako-lightbox-prev{ left:24px; }
.kurako-lightbox-next{ right:24px; }
.kurako-lightbox-prev:hover,
.kurako-lightbox-next:hover{
  background:#FFD400;
  transform:translateY(-50%) scale(1.1);
}
.kurako-lightbox-counter{
  margin-top:10px;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.85);
}
@media(max-width:700px){
  .kurako-lightbox-prev,.kurako-lightbox-next{
    width:42px;height:42px;font-size:18px;
  }
  .kurako-lightbox-prev{ left:10px; }
  .kurako-lightbox-next{ right:10px; }
}

/* ===== v145 :: モバイル時 worry-buttons / service-buttons を1列に ===== */
@media(max-width:700px){
  .worry-buttons{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .worry-buttons .worry-btn{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .service-buttons{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .service-buttons .svc-btn{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
}

/* ===== v145 :: service.php の外壁工事メニュー(#wall) / 屋根工事メニュー(#roof) のグラデ装飾削除 ===== */
.page-service-paint-list,
.page-service .sub-section#wall::before,
.page-service .sub-section#wall::after,
.page-service .sub-section#roof::before,
.page-service .sub-section#roof::after,
#wall::before, #wall::after,
#roof::before, #roof::after{
  display:none !important;
  background:none !important;
  content:none !important;
}

/* ===== v149/v150/v151 :: 携帯600px以下で施工実績を横スクロール（最新5件） ===== */
@media(max-width:600px){
  .works-section .works-grid,
  ul.works-grid,
  .works-grid{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:14px !important;
    padding:6px 14px 18px !important;
    margin:24px 0 0 !important;
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:none !important;
    grid-template:none !important;
    list-style:none;
    box-sizing:border-box;
  }
  .works-section .works-grid::-webkit-scrollbar{ height:6px }
  .works-section .works-grid::-webkit-scrollbar-thumb{ background:rgba(31,58,107,.3);border-radius:4px }

  .works-section .works-grid > .work-item,
  .works-grid > .work-item,
  .works-grid .work-item{
    flex:0 0 82% !important;
    min-width:82% !important;
    max-width:82% !important;
    width:82% !important;
    scroll-snap-align:start;
    margin:0 !important;
    display:block !important;
  }

  /* 6件目以降は非表示（最新5件のみ） */
  .works-section .works-grid > .work-item:nth-child(n+6),
  .works-grid > .work-item:nth-child(n+6){ display:none !important; }

  /* スクロール示唆ヒント（右側に矢印インジケータ） */
  .works-section{ position:rel
/* ===== v154 :: ページネーション 両サイド余白＋うっすら紺色デザイン ===== */
.navigation.pagination,
.kurako-pagination{
  padding:0 24px !important;
  margin-top:40px !important;
}
.navigation.pagination .page-numbers{
  background:rgba(31,58,107,.05) !important;
  border:1.5px solid rgba(31,58,107,.18) !important;
  color:var(--navy) !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
.navigation.pagination .page-numbers:hover{
  background:rgba(31,58,107,.15) !important;
  border-color:rgba(31,58,107,.35) !important;
  color:var(--navy) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(31,58,107,.12) !important;
}
.navigation.pagination .page-numbers.current{
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:#fff !important;
  box-shadow:0 2px 6px rgba(31,58,107,.25) !important;
}
.navigation.pagination .page-numbers.dots{
  background:transparent !important;
  border:none !important;
}
@media(max-width:600px){
  .navigation.pagination,
  .kurako-pagination{ padding:0 16px !important; }
  .navigation.pagination .page-numbers{
    min-width:36px !important;height:36px !important;font-size:13px !important;
  }
}

/* ===== v155 :: 施工実績一覧へボタンのホバー ===== */
.works-list-btn:hover{
  background:rgba(31,58,107,.15) !important;
  border-color:rgba(31,58,107,.35) !important;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(3
/* ===== v161 :: 500px以下のレイアウト微調整・改行不正解消 ===== */
@media(max-width:500px){
  /* ① reason-nav：5列横並びでテキスト崩壊→2列にして詰める */
  .reason-nav{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:6px !important;
  }
  .reason-nav .item{
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    border-radius:8px;
  }
  .reason-nav .num{ font-size:16px !important; flex-shrink:0 }
  .reason-nav .ttl{ font-size:11.5px !important; line-height:1.4 !important; flex:1 }

  /* ② section-title の <em> 改行抑止＋折り返し制御 */
  .section-title,
  h2.section-title{
    font-size:24px !important;
    line-height:1.45 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word;
  }
  .section-title em{ display:inline-block; }

  /* ③ trust-card の数字＋ラベル詰め込み解消 */
  .trust-wrap .kpi-grid,
  .trust-wrap .kpi-list{ gap:8px !important; }
  .trust-wrap .kpi b{ font-size:24px !important; letter-spacing:-.02em }
  .trust-wrap .kpi span{ font-size:10.5px !important; line-height:1.3 !important; word-break:keep-all }

  /* ④ クイック見積もり 送信ボタンの文字改行抑止 */
  #kqe-submit, .kqe-submit, button[type="submit"].kqe-submit{
    font-size:14px !important;
    padding:14px 22px !important;
    white-space:nowrap !important;
    line-height:1.3 !important;
  }
  /* 簡易見積もりフォーム箱の上下余白詰め */
  .quick-estimate, .kqe-form, form#kurako-quick-estimate{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* ⑤ worry-buttons 矢印の右パディング適正化 */
  .worry-buttons .worry-btn{
    padding:14px 18px !important;
    font-size:13px !important;
  }

  /* ⑥ section-en の余白詰め */
  .section-en{ font-size:11px !important; letter-spacing:.18em !important; }
}

/* ===== v165 :: 新着情報セクションのカードを小型化 ===== */
.news-list{
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
  margin-top:32px !important;
}
.news-card .pic{ aspect-ratio:16/9 !important; }
.news-card .body{ padding:14px 16px !important; }
.news-card h3{ font-size:13.5px !important; line-height:1.6 !important; }
.news-card .date{ font-size:10.5px !important; }
.news-card .cat{ font-size:9.5px !important; padding:2px 8px !important; }

@media(max-width:1100px){
  .news-list{ grid-template-columns:repeat(3,1fr) !important; gap:16px !important; }
}
@media(max-width:800px){
  .news-list{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .news-card .pic{ aspect-ratio:16/10 !important; }
  .news-card h3{ font-size:13px !important; }
}
@media(max-width:500px){
  .news-list{ grid-template-columns:1fr !important; gap:12px !important; }
  .news-card{ display:flex; align-items:stretch; }
  .news-card .pic{ flex:0 0 38%; aspect-ratio:1/1 !important; }
  .news-card .body{ flex:1; padding:10px 12px !important; }
  .news-card h3{ font-size:12.5px !important; line-height:1.5 !important; }
}

/* v213 :: カテゴリラベルの縦書き化（文字バラバラ）防止 全画面共通 */
.news-card .cat,
.news-card span.cat{
  white-space:nowrap !important;
  display:inline-block !important;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:keep-all;
  writing-mode:horizontal-tb !important;
  flex-shrink:1;
}
.news-card .meta{
  flex-wrap:wrap !important;
  min-width:0;
}
@media(max-width:500px){
  .news-card .cat,
  .news-card span.cat{
    font-size:9.5px !important;
    padding:2px 7px !important;
    max-width:130px;
  }
  .news-card .meta{
    gap:6px !important;
  }
}

/* ===== v169 :: ブログ末尾テンプレート（装飾） ===== */
.blog-footer-template{
  margin:48px 0 0;
  padding:36px 28px;
  background:linear-gradient(135deg,#FFF7E6 0%,#FFFDF5 60%,#fff 100%);
  border:2px solid rgba(31,58,107,.08);
  border-radius:22px;
  position:relative;
  overflow:hidden;
}
.blog-footer-template::before{
  content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,212,0,.22) 0,transparent 70%);
  pointer-events:none;
}
.blog-footer-template::after{
  content:"";position:absolute;bottom:-60px;left:-60px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(31,58,107,.08) 0,transparent 70%);
  pointer-events:none;
}
.blog-footer-template > *{ position:relative; z-index:1; }

.bft-lead p{
  font-size:14.5px;line-height:1.95;color:#3a3a3a;font-weight:500;margin:0;
}
.bft-lead strong{ color:#e60012; font-weight:900 }

.bft-banner{
  margin:28px -8px;
  text-align:center;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
}
.bft-banner img{
  max-width:100%;height:auto;border-radius:16px;display:inline-block;
  transition:.35s;
}
.bft-banner img:hover{ transform:translateY(-3px); filter:brightness(1.03) }

.bft-highlight{
  background:#fff;
  border:2.5px solid #1F3A6B;
  border-radius:18px;
  padding:24px 24px;
  margin:28px 0;
  box-shadow:0 6px 0 rgba(31,58,107,.12);
}
.bft-headline{
  font-size:17px;font-weight:800;color:#1F3A6B;line-height:1.75;margin:0 0 12px;
  letter-spacing:.02em;
}
.bft-headline strong{ color:#1F3A6B; font-size:19px; }
.bft-mark-orange{
  color:#fff;background:#ff6600;padding:2px 10px;border-radius:6px;
  font-size:.95em;font-weight:900;
}
.bft-mark-red{
  color:#fff;background:#e60012;padding:2px 12px;border-radius:6px;
  font-size:1.05em;font-weight:900;
  box-shadow:0 2px 0 #a8000d;
}
.bft-sub{
  font-size:13.5px;line-height:1.85;color:#555;margin:0 0 18px;
}
.bft-cta{ text-align:center; margin:8px 0 0; }
.bft-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#1F3A6B;color:#fff !important;
  padding:14px 28px;border-radius:99px;
  font-weight:900;font-size:14.5px;text-decoration:none !important;letter-spacing:.04em;
  box-shadow:0 4px 0 #142a52,0 8px 16px rgba(31,58,107,.25);
  transition:.25s;
}
.bft-btn:hover{
  background:#142a52;
  transform:translateY(-2px);
  box-shadow:0 6px 0 #0e1f3d,0 12px 24px rgba(31,58,107,.35);
}
.bft-btn-ico{ font-size:16px; }

.bft-works{
  margin:32px 0 0;padding:24px;background:#fff;
  border-radius:14px;border-left:6px solid #ff6600;
}
.bft-works-title{
  margin:0 0 12px;font-size:15px;font-weight:800;line-height:1.7;
}
.bft-works-title:last-child{ margin-bottom:0 }
.bft-works-link{
  color:#ff6600 !important;text-decoration:none !important;
  display:inline-block;position:relative;
  transition:.2s;padding:6px 0;
  border-bottom:2px dotted transparent;
}
.bft-works-link:hover{
  color:#e64500 !important;
  border-bottom-color:#ff6600;
  transform:translateX(4px);
}

/* モバイル調整 */
@media(max-width:600px){
  .blog-footer-template{ padding:24px 18px;border-radius:18px }
  .bft-headline{ font-size:15px }
  .bft-headline strong{ font-size:16.5px }
  .bft-sub{ font-size:12.5px }
  .bft-btn{ font-size:13px;padding:12px 22px }
  .bft-works{ padding:18px 16px }
  .bft-works-title{ font-size:13.5px }
}

/* ===== v170 :: ブログ記事本文のリッチデザイン化 ===== */
.kurako-post-content{
  font-size:15.5px;
  line-height:2;
  color:#2a2a2a;
  font-weight:500;
}

/* ─── 見出し ─── */
.kurako-post-content h2{
  position:relative;
  margin:60px 0 28px;
  padding:18px 24px 18px 28px;
  background:linear-gradient(135deg,#1F3A6B 0%,#2a4880 100%);
  color:#fff;
  font-size:21px;font-weight:900;letter-spacing:.04em;line-height:1.5;
  border-radius:0 12px 12px 0;
  box-shadow:0 4px 12px rgba(31,58,107,.2);
}
.kurako-post-content h2::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg,#FFD400,#F5B800);
}
.kurako-post-content h2::after{
  content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;
  background:radial-gradient(circle,rgba(255,212,0,.25) 0,transparent 70%);
  border-radius:50%;
}

.kurako-post-content h3{
  position:relative;
  margin:48px 0 22px;
  padding:14px 16px 14px 22px;
  background:#f7faff;
  color:#1F3A6B;
  font-size:18px;font-weight:900;line-height:1.6;letter-spacing:.03em;
  border-left:6px solid #1F3A6B;
  border-bottom:1.5px solid rgba(31,58,107,.18);
  border-radius:0 8px 0 0;
}

.kurako-post-content h4{
  margin:36px 0 18px;
  font-size:16px;font-weight:900;color:#1F3A6B;
  padding:0 0 8px 16px;
  border-bottom:2px dotted rgba(31,58,107,.3);
  position:relative;
}
.kurako-post-content h4::before{
  content:"●";position:absolute;left:0;top:1px;color:#FFD400;font-size:14px;
}

/* ─── 段落 ─── */
.kurako-post-content p{
  margin:0 0 20px;
}
.kurako-post-content p:last-child{ margin-bottom:0; }

/* ─── 強調 ─── */
.kurako-post-content strong,
.kurako-post-content b{
  color:#e60012;
  font-weight:900;
  background:linear-gradient(transparent 60%,#FFF38A 60%);
  padding:0 2px;
}
.kurako-post-content em{
  font-style:normal;color:#1F3A6B;font-weight:800;
  background:linear-gradient(transparent 60%,rgba(255,212,0,.5) 60%);
}

/* ─── リンク ─── */
.kurako-post-content a{
  color:#0F6BB8;
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid rgba(15,107,184,.3);
  padding:1px 2px;
  transition:.25s;
  background-image:linear-gradient(120deg,rgba(255,212,0,0) 0,rgba(255,212,0,0) 100%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.kurako-post-content a:hover{
  color:#1F3A6B;
  border-bottom-color:#FFD400;
  background-image:linear-gradient(120deg,rgba(255,212,0,.4) 0,rgba(255,212,0,.4) 100%);
}
.kurako-post-content a[href^="tel:"]{
  display:inline-flex;align-items:center;gap:6px;
  color:#e60012;font-weight:900;
  border:none;
  background:rgba(230,0,18,.06);
  padding:4px 12px;border-radius:8px;
}
.kurako-post-content a[href^="tel:"]::before{ content:"📞"; }
.kurako-post-content a[href^="tel:"]:hover{
  background:rgba(230,0,18,.15);
  color:#e60012;
}

/* ─── リスト ─── */
.kurako-post-content ul,
.kurako-post-content ol{
  margin:0 0 24px;
  padding:20px 24px 20px 44px;
  background:#FFFDF5;
  border-radius:12px;
  border-left:5px solid #FFD400;
}
.kurako-post-content li{ margin:0 0 8px;line-height:1.85; }
.kurako-post-content li:last-child{ margin-bottom:0; }
.kurako-post-content ul li::marker{ color:#FFD400; font-size:1.2em; }
.kurako-post-content ol li::marker{ color:#1F3A6B; font-weight:900; }

/* ─── 引用 ─── */
.kurako-post-content blockquote{
  margin:24px 0;padding:22px 28px;
  background:linear-gradient(135deg,#FFF7E0 0%,#FFFDF5 100%);
  border-left:5px solid #FFD400;
  border-radius:0 12px 12px 0;
  font-style:italic;color:#5d4400;
  position:relative;
}
.kurako-post-content blockquote::before{
  content:"\201C";position:absolute;top:-10px;left:14px;
  font-size:60px;color:#FFD400;font-weight:900;line-height:1;
  font-family:Georgia,serif;
}
.kurako-post-content blockquote p:last-child{ margin-bottom:0; }

/* ─── 画像 ─── */
.kurako-post-content img{
  max-width:100%;height:auto;border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin:20px auto;display:block;
  transition:.3s;
}
.kurako-post-content img:hover{
  transform:scale(1.01);
  box-shadow:0 12px 32px rgba(0,0,0,.15);
}
.kurako-post-content .aligncenter{ margin-left:auto;margin-right:auto; }
.kurako-post-content .alignleft{ float:left;margin-right:24px;margin-bottom:12px; }
.kurako-post-content .alignright{ float:right;margin-left:24px;margin-bottom:12px; }

/* ─── テーブル ─── */
.kurako-post-content table{
  width:100%;margin:24px 0;border-collapse:collapse;
  border-radius:12px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.kurako-post-content table th{
  background:#1F3A6B;color:#fff;padding:14px 16px;
  font-weight:800;text-align:left;font-size:14px;
}
.kurako-post-content table td{
  padding:14px 16px;border-bottom:1px solid #eee;font-size:14.5px;
  background:#fff;
}
.kurako-post-content table tr:nth-child(even) td{ background:#fafbfd; }

/* ─── 区切り線 ─── */
.kurako-post-content hr{
  border:none;
  height:3px;
  margin:40px 0;
  background:repeating-linear-gradient(90deg,#FFD400 0 12px,transparent 12px 24px);
}

/* ─── code / pre ─── */
.kurako-post-content code{
  background:#FFF6D6;color:#5d4400;padding:2px 8px;
  border-radius:4px;font-size:.92em;font-family:"Menlo","Consolas",monospace;
}
.kurako-post-content pre{
  background:#1F3A6B;color:#FFE680;padding:18px 22px;
  border-radius:12px;overflow:auto;font-size:13.5px;line-height:1.7;
}
.kurako-post-content pre code{ background:none;color:inherit;padding:0; }

/* ─── 動画/embed ─── */
.kurako-post-content iframe{
  max-width:100%;border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* ─── モバイル ─── */
@media(max-width:600px){
  .kurako-post-content{ font-size:14.5px;line-height:1.95; }
  .kurako-post-content h2{ font-size:17px;padding:14px 16px 14px 22px;margin:40px 0 22px; }
  .kurako-post-content h2::after{ display:none }
  .kurako-post-content h3{ font-size:15.5px;padding:12px 14px 12px 18px;margin:32px 0 18px; }
  .kurako-post-content h4{ font-size:14.5px;margin:26px 0 14px; }
  .kurako-post-content ul,
  .kurako-post-content ol{ padding:14px 18px 14px 34px; }
  .kurako-post-content blockquote{ padding:18px 22px; }
  .kurako-post-content table th,
  .kurako-post-content table td{ padding:10px 12px;font-size:13px; }
}

/* ===== v174 :: ブログテンプレ 屋根点検画像を黄色破線区切りに ===== */
.bft-divider{
  height:24px;
  margin:24px 0;
  background:repeating-linear-gradient(90deg,#FFD400 0 14px,transparent 14px 28px);
  opacity:.6;
  border-radius:2px;
}
@media(max-width:600px){
  .bft-divider{ height:18px; margin:18px 0; }
}