/* ===================================================================
   対応ケースLP 専用スタイル（main.css を前提に不足分のみ定義）
   =================================================================== */

/* ---------- LPヒーロー ---------- */
.lp-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(130deg,#12212B 0%,#173A4A 45%,#1E3A93 100%);
}
.lp-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
}
.lp-hero .wrap{position:relative; z-index:1; padding-top:66px; padding-bottom:66px;}
.lp-hero .crumb{font-size:.8rem; letter-spacing:.06em; color:#9FC7D6; margin-bottom:18px;}
.lp-hero .crumb a:hover{color:#fff; text-decoration:underline;}
.lp-hero .tag{
  display:inline-block; padding:6px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  font-size:.78rem; font-weight:700; letter-spacing:.08em; color:#DCEBFB; margin-bottom:18px;
}
.lp-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.35; margin-bottom:20px; color:#fff;}
.lp-hero .lead{font-size:1.02rem; color:#DCEBFB; max-width:34em; line-height:1.9; margin-bottom:28px;}
.lp-hero .hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.lp-hero .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff; background:transparent;}
.lp-hero .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff;}

/* ---------- セクション ---------- */
section.lp{padding:72px 0;}
section.lp.alt{background:linear-gradient(180deg,#F6FAFB 0%,#FFFFFF 100%);}

/* ---------- ギャラリー ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;}
.gallery figure{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid var(--line); background:#fff;
  box-shadow:0 16px 36px rgba(10,38,48,.08);
}
.gallery figure picture{display:block;}
.gallery figure img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease;}
.gallery figure:hover img{transform:scale(1.05);}
.gallery figcaption{
  padding:12px 16px; font-size:.85rem; color:var(--slate);
  border-top:1px solid var(--line); background:#fff;
}

/* ---------- 特長カード ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px;}
.feat-card{
  position:relative; overflow:hidden; padding:32px 28px; background:#fff;
  border:1px solid rgba(20,70,80,.12); border-radius:20px;
  box-shadow:0 16px 36px rgba(10,38,48,.07);
}
.feat-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:5px;
  background:linear-gradient(90deg,#22AEB3,#0B2B3A);
}
.feat-card .no{font-weight:900; font-size:.85rem; color:#22AEB3; letter-spacing:.1em;}
.feat-card h4{font-size:1.05rem; margin:8px 0 10px; color:#0B2B3A; font-weight:700;}
.feat-card p{font-size:.9rem; color:var(--slate); line-height:1.8;}

/* ---------- チェックリスト ---------- */
.check{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 30px;}
.check li{position:relative; padding-left:34px; font-size:.95rem; line-height:1.7;}
.check li::before{
  content:""; position:absolute; left:0; top:.35em; width:20px; height:20px; border-radius:50%;
  background:#22AEB3;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/14px no-repeat;
}

/* ---------- 流れ（4ステップ用） ---------- */
.process-list.lp-process{grid-template-columns:repeat(4,1fr);}

/* ---------- 料金表 ---------- */
.price-box{
  border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 16px 36px rgba(10,38,48,.06);
}
.price-box table{width:100%; border-collapse:collapse;}
.price-box th,.price-box td{padding:16px 20px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--line);}
.price-box th{background:var(--panel); color:#0B2B3A; font-weight:700; width:45%;}
.price-box td{color:var(--navy); font-weight:700;}
.price-box tr:last-child th,.price-box tr:last-child td{border-bottom:none;}

/* ---------- CTA（縦並びボタン） ---------- */
.cta-actions{display:flex; flex-direction:column; gap:12px;}
.cta-actions .btn{justify-content:center; font-size:1rem; padding:16px 24px;}
.cta-actions .btn-tel{background:#fff; color:var(--teal-dark);}
.cta-actions .btn-tel .num{font-size:1.25rem; font-weight:900; letter-spacing:.02em;}
.cta-actions .meta{font-size:.8rem; color:#B9D2EA; text-align:center;}

/* ---------- 自由記入エリア ---------- */
.rich{max-width:52em;}
.rich p{margin-bottom:1em; color:var(--slate); line-height:1.95;}
.rich p:last-child{margin-bottom:0;}
.rich h2,.rich h3,.rich h4{margin:1.6em 0 .6em; color:#0B2B3A;}
.rich img{border-radius:14px;}

/* ---------- レスポンシブ ---------- */
@media (max-width:920px){
  .process-list.lp-process{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  section.lp{padding:48px 0;}
  .lp-hero .wrap{padding-top:44px; padding-bottom:44px;}
  .lp-hero .lead{font-size:.95rem;}
}
@media (max-width:560px){
  .process-list.lp-process{grid-template-columns:1fr;}
}