/* =========================================================
   MIRAKURU - service.css（THIS HTML専用）
   対象クラス：sHeader / fvSplit / pickCard / estimateBox / step / faq / contact
========================================================= */

:root{
  --card:#fff;
  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --bd: 1px solid rgba(15,23,42,.10);
}

/* 共通：container が site.css に無い場合の保険 */
.container{
  width: var(--container);
  margin: 0 auto;
}

/* ===== simple header（あなたの .sHeader 用） ===== */
.sHeader{
  position: sticky;
  top: 0;
  z-index: 100;
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.sHeaderIn{
  width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}
.sLogo{ font-weight:1000; letter-spacing:.06em; }
.sNav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.sNav a{
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
}
.sNav a:hover{ border-color:rgba(37,99,235,.20); background:rgba(37,99,235,.06); }
.sNavCta{
  background:var(--priSoft);
  border-color:rgba(37,99,235,.18) !important;
  color:#1d4ed8;
}

/* ===== sections ===== */
.sec{ padding:56px 0; }
.secAlt{ background:#f8fafc; }
.secHead h2{
  margin:0 0 8px;
  font-size:clamp(22px, 2.4vw, 30px);
  letter-spacing:.02em;
}
.secHead p{ margin:0 0 22px; color:var(--sub); line-height:1.8; max-width:78ch; }

/* ===== FV：斜め2分割 + ぼかし境界 ===== */
.fvSplit{
  position:relative;
  min-height: clamp(520px, 72vh, 760px);
  overflow:hidden;
  background:#06102a;
}
.fvMedia{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.08)),
    url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1600&q=70");
  background-size:cover;
  background-position:center;
  clip-path: polygon(34% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 86%);
}
.fvContent{
  position:relative;
  width:var(--container);
  margin:0 auto;
  padding: clamp(58px, 8vh, 92px) 0 46px;
  color:#fff;
}
.fvContent::before{
  content:"";
  position:absolute; inset:-60px -40px -40px -40px;
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(37,99,235,.42), transparent 60%),
    linear-gradient(135deg, rgba(37,99,235,.92), rgba(2,6,23,.65));
  clip-path: polygon(0% 0%, 78% 0%, 48% 100%, 0% 100%);
  z-index:-1;
}
.fvEdge{
  position:absolute;
  left:52%;
  top:-10%;
  width:460px;
  height:140%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18),
    rgba(255,255,255,0)
  );
  filter: blur(14px);
  opacity:.75;
  pointer-events:none;
}
.fvEyebrow{
  margin:0 0 10px;
  display:inline-block;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
}
.fvTitle{
  margin:14px 0 10px;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height:1.1;
  font-weight:1000;
}
.fvTitle span{ color: rgba(255,255,255,.92); }
.fvLead{
  margin:0;
  max-width:72ch;
  line-height:1.85;
  color: rgba(255,255,255,.92);
}
.fvActions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.fvBadges{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* ボタン（service用） */
.btnPri, .btnGhost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter: blur(10px);
  transition: transform .12s ease, filter .12s ease;
}
.btnPri{ background: rgba(37,99,235,.92); border-color: rgba(255,255,255,.22); }
.btnGhost{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); }
.btnPri:hover, .btnGhost:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* ===== 内容選択カード ===== */
.chooseGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){
  .chooseGrid{ grid-template-columns: 1fr; }
  .fvEdge{ display:none; }
}

.pickCard{
  border:var(--bd);
  border-radius:18px;
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pickTop{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:#fff;
  border:0;
  cursor:pointer;
  text-align:left;
}
.pickIcon{
  width:44px; height:44px;
  border-radius:14px;
  background: rgba(37,99,235,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  border:1px solid rgba(37,99,235,.18);
}
.pickTxt h3{ margin:0; font-size:18px; }
.pickTxt p{ margin:4px 0 0; color:var(--sub); font-weight:700; font-size:13px; }
.pickArrow{
  margin-left:auto;
  width:34px; height:34px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,23,42,.06);
  font-weight:1000;
}

/* JSで .isOpen を付ける想定 */
.pickBody{ display:none; padding:0 16px 16px; }
.pickCard.isOpen .pickBody{ display:block; }
.pickCard.isOpen .pickArrow{ background: rgba(37,99,235,.12); color:#1d4ed8; }

.formRow{ margin-top:12px; display:grid; gap:10px; }
.lbl{ font-weight:1000; }

.seg{
  display:flex; flex-wrap:wrap; gap:10px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  padding:10px;
  border-radius:14px;
}
.seg label{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  font-weight:900;
  cursor:pointer;
}
.seg input{ accent-color: var(--pri); }

.qty{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  gap:10px;
  align-items:center;
}
.qtyBtn{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:1000;
  cursor:pointer;
}
.qty input{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  padding:0 12px;
  font-weight:1000;
}
.hint{ margin-top:10px; color: rgba(71,85,105,.95); font-size:12.5px; line-height:1.75; }

/* ===== 概算 ===== */
.estimateBox{
  margin-top:16px;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(37,99,235,.10), #fff);
  border:var(--bd);
  box-shadow: var(--shadow);
  padding:16px;
  display:flex;
  gap:14px;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
}
.estLeft{ flex:1; min-width:260px; }
.estLeft h3{ margin:0 0 6px; font-size:18px; }
.estNote{ margin:0 0 10px; color:var(--sub); line-height:1.7; font-weight:700; }
.estLine{
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  line-height:1.7;
  font-weight:800;
  min-height:44px;
}
.estRight{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.estPrice{
  padding:10px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  display:flex;
  flex-direction:column;
  min-width:200px;
}
.estLabel{ color:var(--sub); font-weight:900; font-size:12px; letter-spacing:.06em; }
.estValue{ font-weight:1000; font-size:22px; }
.estBtns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== 施工行程 ===== */
.stepGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){
  .stepGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .stepGrid{ grid-template-columns: 1fr; }
}
.step{
  background:#fff;
  border:var(--bd);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
}
.stepImg{
  height:140px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#e2e8f0;
  margin-bottom:10px;
}

/* ===== 保証 ===== */
.wGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){ .wGrid{ grid-template-columns:1fr; } }
.wCard{
  background:#fff;
  border:var(--bd);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
}

/* ===== Before / After Compare（clip-path方式 / 縮まない） ===== */

#ba .baCompare{
  position:relative;
  width:100%;
  max-width:1000px;
  margin:18px auto 0;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 50px rgba(15,23,42,.12);

  --pos:50%; /* JSで0〜100% */
}

/* Before（下：常に全面） */
#ba .baCompare > img.baImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* After（上：全面固定＋clip-pathで切り抜く） */
#ba .baCompare .baAfter{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#ba .baCompare .baAfter > img.baImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  /* ★ここが肝：画像は動かさず、見える範囲だけ切る */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* 境界線（ハンドル） */
#ba .baCompare .baHandle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  transform:translateX(-50%);
  width:3px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(15,23,42,.25), 0 18px 40px rgba(15,23,42,.18);
  z-index:3;
  pointer-events:none;
}

/* つまみ */
#ba .baCompare .baHandle::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.2);
  box-shadow:0 14px 30px rgba(15,23,42,.25);
}
#ba .baCompare .baHandle::after{
  content:"↔";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-weight:1000;
  color:#0f172a;
}

/* 操作レイヤー */
#ba .baCompare .baRange{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:4;
}

/* ラベル */
#ba .baCompare .baLabel{
  position:absolute;
  top:14px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.10);
  font-weight:1000;
  font-size:12px;
  z-index:5;
}
#ba .baCompare .baLabel--before{ left:14px; }
#ba .baCompare .baLabel--after{ right:14px; }

@media (max-width:760px){
  #ba .baCompare{
    aspect-ratio:4/3;
    border-radius:18px;
  }
}

/* ===== FAQ ===== */
.faq details{
  border:var(--bd);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  margin-bottom:10px;
  overflow:hidden;
}
.faq summary{
  cursor:pointer;
  padding:14px 14px;
  font-weight:1000;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faqBody{
  border-top:1px solid rgba(15,23,42,.08);
  padding:12px 14px;
  color:var(--sub);
  line-height:1.8;
}
.faqCta{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* ===== Contact ===== */
.contact{
  border-radius:22px;
  border:var(--bd);
  background:#fff;
  box-shadow: var(--shadow);
  padding:16px;
}
.cGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){ .cGrid{ grid-template-columns:1fr; } }
.cField{ display:grid; gap:8px; font-weight:900; }
.cField span{ color: rgba(15,23,42,.86); }
.cField input, .cField textarea{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  padding:12px 12px;
  outline:none;
}
.cField input:focus, .cField textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 6px rgba(37,99,235,.12);
}
.cWide{ grid-column: 1 / -1; }
.btnFull{ width:100%; border-radius:14px; padding:14px 16px; }

/* ===== footer ===== */
.sFooter{ border-top:1px solid rgba(15,23,42,.08); padding:18px 0; color:var(--sub); }
.sFooterIn{ display:flex; justify-content:space-between; align-items:center; }

/* placeholder utility */
.ph{ background:#e2e8f0; }
.miniNote{ color: rgba(71,85,105,.85); font-size:12px; line-height:1.7; }

/* =========================================================
  Service Expand Panel (tile -> inlinePanel)
========================================================= */

#svcGrid{ position:relative; }
#svcGrid.is-dim .tile{ opacity:.55; filter:saturate(.9); }
#svcGrid .tile.is-active{ opacity:1; filter:none; outline:2px solid rgba(37,99,235,.28); }

.inlinePanel{
  grid-column: 1 / -1; /* grid全幅 */
  margin-top: -4px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
  overflow:hidden;
}

.inlineHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.inlineH{ font-weight:1000; font-size:16px; letter-spacing:.03em; }
.inlineS{ margin-top:4px; color:rgba(71,85,105,.9); font-weight:800; font-size:12px; line-height:1.6; }

.inlineClose{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
}
.inlineClose:hover{ background:rgba(15,23,42,.04); }

.inlineBody{ padding: 12px 14px 14px; }

.inlineOpts{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.inlineOpt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:16px;
}

.inlineOpt .left{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}
.inlineOpt input[type="checkbox"]{ transform:scale(1.15); margin-top:2px; accent-color: var(--pri); }

.inlineOpt b{ display:block; font-weight:1000; }
.inlineOpt small{ display:block; margin-top:4px; color:rgba(71,85,105,.92); font-weight:800; }

.inlineOpt .right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.qty{
  display:grid;
  grid-template-columns: 36px 64px 36px;
  gap:8px;
  align-items:center;
}
.qtyBtn{
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:1000;
  cursor:pointer;
}
.qtyInput{
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  text-align:center;
  font-weight:1000;
}

.inlineNote{
  margin:10px 0 0;
  color:rgba(71,85,105,.90);
  font-size:12px;
  line-height:1.7;
}

/* 概算見積だけ “細く” する（横フルにしない） */
.estimateBox{
  width: min(1120px, 100%);
  margin: 18px auto 0;
}
/* 中の左右カラムが暴れてはみ出す保険 */
.estimateBox *{ min-width:0; }

@media (max-width: 640px){
  .chooseGrid{
    display: grid; /* 念のため */
    grid-template-columns: repeat(2, 1fr);
    gap: 18px; /* chooseGridのgapに合わせる（違うなら数字を合わせて） */
  }

  .chooseGrid > .tile:last-child:nth-child(odd){
    grid-column: 1 / -1;                 /* 2列ぶち抜き */
    width: calc((100% - 18px) / 2);      /* 1枚分の幅 */
    justify-self: center;                /* 中央 */
  }
}

/* ===============================
   FV 文字位置調整（モバイル専用）
================================ */
@media (max-width: 640px){

  .fvSplit{
    padding-top: calc(var(--header-h, 110px) + 24px) !important;
  }

  .fvSplit .copy{
    margin-top: 20px !important;
  }

  .fvSplit h1{
    margin-top: 20px !important;
  }

}