@charset "UTF-8";
/* BUILD_TAG: sunpaint_child_ver1.0 / 2026-09-14 */
/* 燦Paint カスタムスタイル（SWELL子テーマ用） */

:root{
  --sp-green-900:#0F3524;
  --sp-green-700:#1E5138;
  --sp-green-500:#2E6F4E;
  --sp-green-050:#EDF3EF;
  --sp-orange:#F09000;
  --sp-orange-600:#D97B00;
  --sp-ink:#1C1C1A;
  --sp-ink-60:#5A5A56;
  --sp-line:#DCDCD6;
  --sp-bg:#FBFAF7;
  --sp-serif:"Shippori Mincho","游明朝",YuMincho,"Yu Mincho","ヒラギノ明朝 ProN","Noto Serif JP",serif;
  --sp-sans:"游ゴシック",YuGothic,"Yu Gothic","Noto Sans JP","ヒラギノ角ゴ ProN",メイリオ,Meiryo,"MS Pゴシック",sans-serif;
  --sp-bar-h:64px;
}

body{
  font-family:var(--sp-sans);
  color:var(--sp-ink);
  overflow-x:hidden;
}

.sp-serif,
.sp-section__title,
.sp-lead{ font-family:var(--sp-serif); font-weight:500; }

/* ---------- セクション見出し ---------- */
.sp-section{ padding:clamp(56px,8vw,104px) 0; }
.sp-section--tint{ background:var(--sp-bg); }
.sp-section__head{ text-align:center; margin-bottom:clamp(32px,5vw,56px); }
.sp-section__en{
  display:block; font-family:var(--sp-sans); font-size:.72rem; letter-spacing:.22em;
  color:var(--sp-green-500); margin-bottom:.6em;
}
.sp-section__title{
  font-size:clamp(1.4rem,3.4vw,2rem); letter-spacing:.08em; line-height:1.6; margin:0;
}
.sp-section__title::after{
  content:""; display:block; width:40px; height:1px; margin:1.1em auto 0; background:var(--sp-green-500);
}
.sp-lead{ font-size:clamp(1rem,2.4vw,1.2rem); line-height:2.1; letter-spacing:.06em; }

/* ---------- Before / After スライダー ---------- */
.sp-ba{ margin:0 0 1.2em; }
.sp-ba__frame{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:2px; background:#EEEEEE; user-select:none; touch-action:pan-y;
}
.sp-ba__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.sp-ba__after{ clip-path:inset(0 0 0 50%); }
.sp-ba__label{
  position:absolute; top:12px; z-index:3; padding:.32em 1em;
  font-size:.74rem; letter-spacing:.14em; color:#FFFFFF; background:rgba(15,53,36,.78);
  pointer-events:none;
}
.sp-ba__label--before{ left:12px; }
.sp-ba__label--after{ right:12px; background:rgba(217,123,0,.88); }
.sp-ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:4;
  background:#FFFFFF; transform:translateX(-1px); pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
}
.sp-ba__knob{
  position:absolute; top:50%; left:50%; z-index:5; width:44px; height:44px;
  margin:-22px 0 0 -22px; border-radius:50%; background:#FFFFFF; cursor:ew-resize;
  box-shadow:0 2px 10px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.sp-ba__knob::before,
.sp-ba__knob::after{
  content:""; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.sp-ba__knob::before{ border-right:7px solid var(--sp-green-700); margin-right:4px; }
.sp-ba__knob::after{ border-left:7px solid var(--sp-green-700); margin-left:4px; }
.sp-ba__range{
  position:absolute; inset:0; z-index:6; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none; background:transparent;
}
.sp-ba__range:focus-visible{ outline:2px solid var(--sp-orange); outline-offset:2px; opacity:1; }
.sp-ba__caption{
  margin-top:.7em; font-size:.86rem; line-height:1.9; color:var(--sp-ink-60);
}

/* ---------- 施工事例 ---------- */
.sp-works{ display:grid; gap:clamp(24px,4vw,40px); grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.sp-work__title{ font-family:var(--sp-serif); font-size:1.05rem; margin:.9em 0 .4em; letter-spacing:.04em; }
.sp-work__meta{ margin:0; padding:0; font-size:.84rem; color:var(--sp-ink-60); line-height:1.95; overflow:hidden; }
.sp-work__meta dt{ float:left; width:6.2em; font-weight:400; color:var(--sp-green-700); }
.sp-work__meta dd{ margin:0 0 0 6.2em; }

/* ---------- 追従バー ---------- */
.sp-fixbar{
  position:fixed; z-index:9990; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96); border-top:1px solid var(--sp-line);
  box-shadow:0 -2px 14px rgba(0,0,0,.08);
  transform:translateY(110%); transition:transform .32s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.sp-fixbar.is-visible{ transform:translateY(0); }
.sp-fixbar__item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--sp-bar-h); text-decoration:none; color:var(--sp-green-900);
  font-size:.68rem; letter-spacing:.04em; line-height:1.3;
  border-left:1px solid var(--sp-line);
}
.sp-fixbar__item:first-child{ border-left:0; }
.sp-fixbar__item svg{ width:21px; height:21px; }
.sp-fixbar__item--contact{ background:var(--sp-green-700); color:#FFFFFF; border-left-color:var(--sp-green-700); }
.sp-fixbar__item--line{ color:#06C755; }
.sp-fixbar__item--review{ color:var(--sp-orange-600); }

@media (min-width:960px){
  .sp-fixbar{
    left:auto; right:24px; bottom:24px; width:88px;
    grid-template-columns:1fr; border:1px solid var(--sp-line); border-radius:4px;
    overflow:hidden; transform:translateX(140%);
  }
  .sp-fixbar.is-visible{ transform:translateX(0); }
  .sp-fixbar__item{ height:76px; border-left:0; border-top:1px solid var(--sp-line); }
  .sp-fixbar__item:first-child{ border-top:0; }
}
@media (max-width:959px){
  body{ padding-bottom:var(--sp-bar-h); }
}

/* ---------- 汎用 ---------- */
.sp-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.sp-reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .sp-reveal{ opacity:1; transform:none; transition:none; }
  .sp-fixbar{ transition:none; }
  html{ scroll-behavior:auto; }
}