/* =====================================================================
   松原塗装店 マツペン — デザイン再現デモ 共有スタイルシート
   HOMEページ + 全サブページ(shokunin/survice/sekou/hosho/about/estimate…)
   がこの1本を共有する。デザイントークン / ヘッダー / フッター /
   再利用コンポーネント(section-heading・works-carousel・strength・
   sidebar・gallery・review・cta・green-banner) を全て収録。
   ブランド: 赤 #b81c2b / 墨 #313131 / 明灰 #f2f2f2 / 見出しは緑の細罫で挟む
   ===================================================================== */

/* ---------- design tokens ---------- */
:root{
  --red:#b81c2b;        /* brand red */
  --red-deep:#9c1524;
  --ink:#313131;        /* 墨 */
  --sub:#555;
  --muted:#888;
  --grey:#f2f2f2;       /* light grey */
  --grey2:#e9e9e9;
  --line:#e2e2e2;
  --green:#3f7d1e;      /* section-rule green */
  --green-band:#3c6b1f; /* textured banner green */
  --green-band2:#2f5417;
  --green-soft:#eef2e8; /* pale-green heading fill */
  --paper:#ffffff;
  --gold:#c99a2e;
  --maxw:1120px;
  --grain:none;
}

*{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;padding-top:88px;
  font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.9;font-weight:500;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:'Concert One',cursive;font-weight:400;letter-spacing:.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* film grain */
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:150px 150px;opacity:.04}

/* =====================================================================
   HEADER  (white bar, round craftsman badge + lockup + nav + red pill)
   ===================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);transition:box-shadow .25s,padding .25s}
.site-header.scrolled{box-shadow:0 6px 20px rgba(30,20,10,.09)}
.hd-inner{max-width:1240px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:22px}
.hd-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hd-badge{width:56px;height:56px;border-radius:50%;flex-shrink:0;object-fit:cover;
  box-shadow:0 2px 8px rgba(40,20,10,.14)}
.hd-lock{line-height:1.15}
.hd-tag{font-size:10.5px;color:var(--sub);letter-spacing:.04em;font-weight:700;
  display:flex;align-items:center;gap:5px}
.hd-tag::before{content:'';display:inline-block;width:16px;height:1px;background:var(--red)}
.hd-name{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:.02em;
  display:flex;align-items:baseline;gap:6px;margin-top:1px}
.hd-name .sasa{font-size:14px;color:var(--red);font-weight:700}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.hd-nav a{font-size:15px;font-weight:700;color:var(--ink);position:relative;
  padding:4px 0;transition:color .18s}
.hd-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--red);transition:right .22s ease}
.hd-nav a:hover{color:var(--red)}
.hd-nav a:hover::after{right:0}
.hd-pill{background:var(--red);color:#fff;font-weight:700;font-size:15px;white-space:nowrap;
  padding:11px 20px;border-radius:26px;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(184,28,43,.28);transition:transform .18s,box-shadow .18s}
.hd-pill:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(184,28,43,.35)}
.hd-pill .ico{width:1em;height:1em;flex:none}
.hd-search{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--sub);flex-shrink:0;
  transition:background .18s,color .18s}
.hd-search:hover{background:var(--grey);color:var(--red)}
.hd-search svg{width:19px;height:19px}
.hd-burger{display:none}

/* =====================================================================
   SECTION HEADINGS — thin green rule above + below
   ===================================================================== */
.gh{position:relative;padding:14px 0;margin:0 0 26px;
  font-size:23px;font-weight:700;color:var(--ink);letter-spacing:.03em;line-height:1.5}
.gh::before,.gh::after{content:'';position:absolute;left:0;right:0;height:2px;
  background:var(--green)}
.gh::before{top:0}.gh::after{bottom:0}
.gh .idx{color:var(--red);margin-right:.35em;font-weight:700}

/* pale-green filled banner heading (施工事例をご紹介 / 口コミ評判 …) */
.gh-fill{background:var(--green-soft);border-left:5px solid var(--green);
  padding:22px 26px;font-size:24px;font-weight:700;color:#2c3a20;
  letter-spacing:.03em;margin:0 0 22px;line-height:1.5}

/* =====================================================================
   BUTTONS / CTA
   ===================================================================== */
.btn-red{display:block;width:100%;text-align:center;background:var(--red);color:#fff;
  font-weight:700;font-size:18px;padding:20px 24px;border-radius:4px;letter-spacing:.04em;
  box-shadow:0 8px 22px rgba(184,28,43,.24);transition:background .2s,transform .18s}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-red.wide{max-width:640px;margin:34px auto}

/* =====================================================================
   HERO  (photo mosaic + centre team + laurel badge)
   ===================================================================== */
.hero{position:relative;background:#111}
/* compact photo mosaic: short landscape tile rows to match reference density.
   2 rows of tiles (~150px each at desktop) + a 2x2 centre team block. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:150px 150px 210px;gap:2px;position:relative}
.mosaic .tile{position:relative;overflow:hidden;background:#222}
.mosaic .tile img{width:100%;height:100%;object-fit:cover;display:block}
/* centre 2x2 team block spans both photo rows */
.mosaic .team{grid-column:3/5;grid-row:1/3}
.mosaic .team img{width:100%;height:100%;object-fit:cover}
/* green banner occupies middle 4 columns of the 3rd row, flanked by two tiles */
.mosaic .green-banner{grid-column:2/6;grid-row:3}
/* gold laurel award emblem (baked image) over lower part of the centre team block */
/* gold laurel emblem sits over the lower part of the centre team block
   (team spans rows 1-2 = ~302px of the mosaic; centre horizontally on the team columns) */
.laurel-badge{position:absolute;left:50%;top:302px;transform:translate(-50%,-72%);
  z-index:5;width:150px;height:150px;pointer-events:none;
  background:url(img/badge-no1.png) no-repeat center/contain;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.5))}

/* green textured seigaiha banner (grid item in mosaic row 3) */
.green-banner{position:relative;overflow:hidden;
  background:#245417 url(img/seigaiha-green.png) center/cover;
  color:#fff;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:12px 24px 16px}
.green-banner::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,58,14,.25),rgba(20,46,10,.4));pointer-events:none}
.green-banner .gb-eyebrow{position:relative;z-index:2;font-size:14px;font-weight:600;
  letter-spacing:.02em;margin-bottom:2px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.green-banner .gb-eyebrow b{color:#ffe89a;font-size:20px;font-weight:800;margin:0 4px;
  letter-spacing:.01em}
.green-banner h2{position:relative;z-index:2;font-family:'Zen Old Mincho','Noto Serif JP',serif;
  font-size:31px;font-weight:700;letter-spacing:.05em;
  margin:2px 0 8px;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.green-banner .gb-lock{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px}
.green-banner .gb-lock img{width:40px;height:40px;border-radius:50%;
  background:#1c3a10;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.green-banner .gb-lock .gl-txt{text-align:left;line-height:1.1}
.green-banner .gb-lock .gl-tag{display:block;font-size:8px;letter-spacing:.05em;opacity:.92}
.green-banner .gb-lock .gl-name{display:block;font-weight:800;font-size:16px;letter-spacing:.02em}
.green-banner .gb-lock .gl-name em{font-style:normal;font-size:11px;font-weight:700;margin-left:4px;
  color:#ffe89a}

/* =====================================================================
   WORKS / BLOG CAROUSEL
   ===================================================================== */
.carousel{background:#fff;padding:34px 0 30px;position:relative}
.caro-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 14px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.caro-track::-webkit-scrollbar{height:0}
.wcard{flex:0 0 262px;scroll-snap-align:start;position:relative;
  background:#fff;transition:transform .18s}
.wcard:hover{transform:translateY(-3px)}
.wcard .thumb{position:relative;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:#eee}
.wcard .thumb img{width:100%;height:100%;object-fit:cover}
.wcard .tag{position:absolute;top:0;right:0;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;padding:5px 12px;letter-spacing:.03em}
.wcard h3{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55;
  margin:11px 2px 0;letter-spacing:.01em}
.caro-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;
  box-shadow:0 3px 12px rgba(30,20,10,.14);transition:background .18s,color .18s}
.caro-nav:hover{background:var(--red);color:#fff;border-color:var(--red)}
.caro-nav.prev{left:-6px}.caro-nav.next{right:-6px}
.caro-dots{display:flex;gap:9px;justify-content:center;margin-top:6px}
.caro-dots button{width:9px;height:9px;border-radius:50%;border:0;background:#cfcfcf;
  cursor:pointer;padding:0;transition:background .18s}
.caro-dots button.on{background:var(--red)}

/* =====================================================================
   INTRO  (創業70年 + red circle accent)
   ===================================================================== */
.intro{padding:56px 0 20px}
.intro .lead-head{position:relative;font-size:26px;font-weight:700;letter-spacing:.03em;
  padding:14px 0;border-top:2px solid var(--green);border-bottom:2px solid var(--green);
  margin-bottom:30px}
.circle70{position:absolute;right:-6px;top:-56px;width:120px;height:120px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;line-height:1.15;
  box-shadow:0 8px 20px rgba(184,28,43,.3);z-index:3;font-weight:700}
.circle70 b{font-size:30px;display:block}
.circle70 span{font-size:12px}
.bodytext p{margin:0 0 1.1em;color:#3a3a3a;line-height:2}
.bodytext p .mk{background:linear-gradient(transparent 62%,#ffe0b0 62%);font-weight:700}
.bodytext strong{font-weight:700}
.figure{margin:26px 0 8px}
.figure img{width:100%;border-radius:4px}
.figure figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.sign-line{text-align:right;color:var(--ink);font-weight:700;margin:22px 0 0;line-height:1.9}
.sign-line .tel{color:var(--red)}

/* =====================================================================
   2-COLUMN LAYOUT  (main + right sidebar)
   ===================================================================== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
  padding:44px 0 20px;align-items:start}
.main-col{min-width:0}

/* strengths */
.strength{margin:0 0 40px}
.strength .figure{margin-top:22px}
.strength p{margin:0 0 1em;line-height:2}

/* --- SIDEBAR (sticky, follows scroll below fixed header) --- */
.sidebar{position:sticky;top:90px;align-self:start}
/* red explosion starburst (baked image with 「まずは無料お見積を！」) */
.starburst{position:relative;display:block;text-align:center}
.starburst .sb-img{display:block;width:100%;max-width:290px;margin:0 auto;
  filter:drop-shadow(0 8px 18px rgba(184,28,43,.28))}
.starburst .sb-click{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  background:var(--red);color:#fff;font-weight:700;font-size:14px;
  padding:8px 18px;border-radius:24px;box-shadow:0 4px 12px rgba(184,28,43,.28)}
.side-banner{display:block;margin-top:16px;border-radius:8px;overflow:hidden;
  box-shadow:0 4px 12px rgba(30,20,10,.1);transition:transform .18s,box-shadow .18s;
  position:relative;background:#222}
.side-banner:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,20,10,.18)}
.side-banner img{width:100%;height:100%;object-fit:cover}
.side-banner .cap{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;
  padding:20px 14px 12px;font-weight:700;font-size:17px;letter-spacing:.02em;line-height:1.4}
.side-banner.tall{aspect-ratio:1/1}
.side-banner.wide{aspect-ratio:16/9}
.side-banner .cap small{display:block;font-size:12px;font-weight:500;opacity:.9;margin-top:2px}

/* closing author note (いかがでしたでしょうか…) */
.author-note{position:relative;border:1px solid var(--line);border-radius:8px;
  background:#fbfbfb;padding:20px 22px 20px 96px;margin:30px 0 0;line-height:1.9;font-size:15px}
.author-note img{position:absolute;left:16px;top:-16px;width:64px;height:64px;border-radius:50%;
  object-fit:cover;border:3px solid #fff;box-shadow:0 3px 10px rgba(30,20,10,.16)}

/* =====================================================================
   ESTIMATE CTA GROUP
   ===================================================================== */
.est-block{padding:20px 0}
.est-lead{text-align:center;font-size:22px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;margin:18px 0 8px}
.est-sub{text-align:center;color:var(--sub);margin:0 0 6px}
.est-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.est-link{border:1px solid var(--line);border-radius:8px;padding:20px 18px;text-align:center;
  background:#fff;transition:border-color .18s,transform .18s;font-weight:700}
.est-link:hover{border-color:var(--red);transform:translateY(-2px)}
.est-link .el-k{color:var(--red);font-size:13px;font-weight:700;letter-spacing:.08em;
  display:block;margin-bottom:6px}
.est-link .el-t{display:block;font-size:17px;color:var(--ink)}
.est-link .el-d{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:6px}

/* =====================================================================
   GALLERY  (施工事例)
   ===================================================================== */
.gallery{padding:24px 0}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin-top:24px}
.gcard .thumb{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#eee}
.gcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gcard:hover .thumb img{transform:scale(1.05)}
.gcard h3{font-size:17px;font-weight:700;color:var(--red);line-height:1.5;
  margin:12px 0 4px;letter-spacing:.01em}
.gcard p{font-size:14px;color:var(--sub);margin:0}
.more-link{text-align:right;margin:26px 2px 0;font-weight:700}
.more-link a{color:var(--red)}

/* =====================================================================
   REVIEWS  (口コミ評判)
   ===================================================================== */
.reviews{padding:24px 0}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;margin-top:24px}
.rcard .thumb{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#eee}
.rcard .thumb img{width:100%;height:100%;object-fit:cover}
.rcard h3{font-size:17px;font-weight:700;color:var(--red);line-height:1.5;margin:12px 0 4px}
.rcard p{font-size:14px;color:var(--sub);margin:0}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:#2a2a2a;color:#d9d9d9;margin-top:60px;padding:52px 0 0;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .fb-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand .fb-logo img{width:52px;height:52px;border-radius:50%}
.foot-brand .fb-logo .fn{font-size:20px;font-weight:700;color:#fff}
.foot-brand p{line-height:1.9;color:#bdbdbd;margin:0 0 4px}
.foot-nav h4{color:#fff;font-size:15px;font-weight:700;margin:0 0 14px;letter-spacing:.03em}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:10px}
.foot-nav a{color:#c9c9c9;transition:color .18s}
.foot-nav a:hover{color:#fff}
.foot-assoc{font-size:13px;color:#a9a9a9;line-height:1.8;margin-top:6px}
.foot-bottom{text-align:center;padding:20px 0 24px;color:#9a9a9a;font-size:12.5px}
.demo-note{background:#1f1f1f;color:#8f8f8f;text-align:center;font-size:12px;
  padding:12px 24px;line-height:1.7}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:960px){
  .layout{grid-template-columns:1fr;gap:34px}
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .sidebar .starburst{grid-column:1/-1}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .hd-nav{display:none}
  .hd-burger{display:flex;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
    border-radius:8px;align-items:center;justify-content:center;background:#fff;cursor:pointer}
  .hd-burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
  .hd-burger span::before,.hd-burger span::after{content:'';position:absolute;left:0;
    width:20px;height:2px;background:var(--ink)}
  .hd-burger span::before{top:-6px}.hd-burger span::after{top:6px}
  .hd-pill{padding:9px 13px;font-size:13.5px}
  .hd-pill .ico{display:none}
  .hd-search{display:none}
}
@media(max-width:680px){
  body{padding-top:78px;font-size:15px}
  html{scroll-padding-top:86px}
  h1,h2,h3{word-break:normal;line-break:auto;overflow-wrap:anywhere}
  .mosaic{grid-template-columns:repeat(4,1fr);grid-template-rows:112px 112px auto}
  .mosaic .team{grid-column:2/4;grid-row:1/3}
  .mosaic .green-banner{grid-column:1/5;grid-row:3}
  .laurel-badge{top:226px;width:112px;height:112px}
  .green-banner{padding:18px 18px}
  .green-banner h2{font-size:23px;margin:2px 0 10px}
  .green-banner .gb-eyebrow{font-size:12px}
  .green-banner .gb-eyebrow b{font-size:16px}
  .green-banner .gb-lock .gl-name{font-size:16px}
  .gh{font-size:20px}.gh-fill{font-size:20px;padding:18px 20px}
  .intro .lead-head{font-size:21px}
  .circle70{width:88px;height:88px;top:-40px;right:0}.circle70 b{font-size:22px}
  .gal-grid,.rev-grid{grid-template-columns:1fr;gap:22px}
  .est-links{grid-template-columns:1fr}
  .est-lead{font-size:19px}
  .foot-top{grid-template-columns:1fr}
  .hd-name{font-size:20px}.hd-badge{width:48px;height:48px}
  .wcard{flex:0 0 76vw}
}
@media(max-width:420px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  .mosaic .tile{height:96px}
  .mosaic .team{grid-column:1/3;height:170px}
  .mosaic .green-banner{grid-column:1/3}
  .laurel-badge{width:96px;height:96px;top:236px;transform:translate(-50%,-72%)}
  .green-banner h2{font-size:20px}
}