@charset "UTF-8";
/* =========================================================
   MARUKI齋福 ランディングページ専用スタイル
   style.css の後に読み込むこと（変数は style.css の :root を利用）
   設置場所: サイトルート直下 /lp.css
   ========================================================= */

/* ===== 公開前チェック用マーカー ===== */
/* 未確定の情報は <span class="tbd">…</span> で囲む。
   公開前に .tbd が0件になっていることを必ず確認すること。 */
.tbd{
  background:#fff3c4;
  border-bottom:2px dotted #c08a00;
  color:#7a5200;
  font-family:var(--sans);
  font-size:.92em;
  padding:0 3px;
}
.tbd::before{content:'【要確定】';font-size:.8em;font-weight:600;letter-spacing:.5px;margin-right:2px}

/* ===== LP ヒーロー ===== */
.lp-hero{
  position:relative;min-height:78vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:120px 24px 80px;text-align:center;
}
.lp-hero .hero-bg::after{
  background:linear-gradient(180deg,rgba(14,34,53,.78) 0%,rgba(22,52,80,.72) 55%,rgba(14,34,53,.88) 100%);
}
.lp-hero-content{position:relative;z-index:3;max-width:760px}
.lp-hero-label{
  font-family:var(--sans);font-size:11px;letter-spacing:5px;
  color:var(--gold);margin-bottom:22px;font-weight:400;
}
.lp-hero-title{
  font-size:34px;line-height:1.85;letter-spacing:3px;
  color:var(--shiro);font-weight:400;
}
.lp-hero-title span{display:block}
.lp-hero-sub{
  margin-top:26px;font-size:15px;line-height:2.2;
  color:rgba(247,244,239,.78);font-weight:300;letter-spacing:1px;
}
.lp-hero-note{
  margin-top:28px;font-family:var(--sans);font-size:12px;
  color:rgba(247,244,239,.5);letter-spacing:1.5px;
}

/* ===== リード（共感）ブロック ===== */
.lp-lead{
  max-width:680px;margin:0 auto;padding:64px 24px 8px;
  font-size:16.5px;line-height:2.35;color:var(--text-light);
  font-weight:300;letter-spacing:.4px;
}
.lp-lead strong{font-weight:500;color:var(--kon-deep)}
.lp-lead .big{
  display:block;font-size:20px;line-height:2;color:var(--kon-deep);
  font-weight:400;letter-spacing:2px;margin:28px 0;
}

/* ===== 見出し ===== */
.lp-h2{
  max-width:var(--content-w);margin:0 auto;padding:56px 24px 4px;
}
.lp-h2 .eyebrow{
  font-family:var(--sans);font-size:10px;letter-spacing:4px;
  color:var(--gold);margin-bottom:10px;text-transform:uppercase;
}
.lp-h2 h2{
  font-size:23px;font-weight:400;letter-spacing:2.5px;
  color:var(--kon-deep);line-height:1.85;
}
.lp-h2 .sub{
  margin-top:14px;font-size:14.5px;line-height:2.1;
  color:var(--text-light);font-weight:300;
}

/* ===== 困りごとリスト ===== */
.pain-list{
  max-width:var(--content-w);margin:24px auto;padding:0 24px;
  display:grid;gap:1px;background:rgba(22,52,80,.08);
  border:1px solid rgba(22,52,80,.08);
}
.pain-list{padding:0;max-width:calc(var(--content-w) - 0px);margin:24px auto;width:calc(100% - 48px)}
.pain-item{
  background:#fff;padding:18px 22px;
  font-size:14.5px;line-height:1.9;color:var(--text-light);
  font-weight:300;display:flex;gap:12px;align-items:flex-start;
}
.pain-item::before{
  content:'';flex-shrink:0;width:5px;height:5px;margin-top:11px;
  border:1px solid var(--gold);transform:rotate(45deg);
}

/* ===== 解決（3カラム） ===== */
.solve{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:var(--content-w);margin:28px auto;padding:0 24px;
}
.solve-card{
  background:#fff;border:.5px solid rgba(22,52,80,.09);
  padding:28px 20px;text-align:center;
}
.solve-num{
  font-family:var(--sans);font-size:10px;letter-spacing:3px;
  color:var(--gold);margin-bottom:12px;
}
.solve-title{
  font-size:16px;letter-spacing:1.5px;color:var(--kon-deep);
  line-height:1.7;margin-bottom:12px;font-weight:500;
}
.solve-body{
  font-size:13px;line-height:2;color:var(--text-light);
  font-weight:300;text-align:left;
}

/* ===== タイムライン ===== */
.timeline-wrap{max-width:var(--content-w);margin:28px auto;padding:0 24px}
.timeline-head{
  font-family:var(--sans);font-size:12px;letter-spacing:2px;
  color:var(--shiro);background:var(--kon);
  padding:11px 20px;
}
.timeline{
  background:#fff;border:.5px solid rgba(22,52,80,.09);border-top:none;
  padding:8px 20px 16px;
}
.tl-row{
  display:flex;gap:18px;align-items:flex-start;
  padding:13px 0;border-bottom:.5px dashed rgba(22,52,80,.12);
}
.tl-row:last-child{border-bottom:none}
.tl-time{
  flex-shrink:0;width:64px;font-family:var(--sans);
  font-size:13px;letter-spacing:1px;color:var(--kon-mid);font-weight:500;
}
.tl-text{font-size:14px;line-height:1.9;color:var(--text-light);font-weight:300}
.tl-text b{font-weight:500;color:var(--kon-deep)}
.tl-row.accent .tl-text{color:var(--kon-deep)}
.tl-row.accent .tl-time{color:var(--gold)}

/* ===== 費用ボックス ===== */
.cost{
  max-width:var(--content-w);margin:28px auto;padding:0 24px;
}
.cost-inner{background:#fff;border:.5px solid rgba(22,52,80,.09);padding:26px 26px 20px}
.cost-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 0;border-bottom:.5px solid rgba(22,52,80,.07);
  font-size:14.5px;gap:16px;
}
.cost-row:last-of-type{border-bottom:none}
.cost-label{color:var(--text-light);font-weight:300;flex:1}
.cost-value{color:var(--kon-deep);font-family:var(--sans);font-size:14px;white-space:nowrap}
.cost-total{
  margin-top:14px;padding:16px 18px;background:rgba(22,52,80,.045);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.cost-total .cost-label{color:var(--kon-deep);font-weight:500;font-size:15px}
.cost-total .cost-value{font-size:17px;color:var(--kon-deep);font-weight:500}
.cost-per{
  margin-top:10px;font-family:var(--sans);font-size:13px;
  color:var(--gold);letter-spacing:.5px;text-align:right;
}
.cost-note{
  margin-top:14px;font-family:var(--sans);font-size:11.5px;
  line-height:1.95;color:var(--text-light);
}

/* ===== 注意・正直に伝えるボックス ===== */
.notice{
  max-width:var(--content-w);margin:28px auto;padding:0 24px;
}
.notice-inner{
  background:#fff;border-left:3px solid var(--kon);
  border-top:.5px solid rgba(22,52,80,.09);
  border-right:.5px solid rgba(22,52,80,.09);
  border-bottom:.5px solid rgba(22,52,80,.09);
  padding:24px 26px;
}
.notice-title{
  font-size:15px;letter-spacing:1.5px;color:var(--kon-deep);
  margin-bottom:14px;font-weight:500;
}
.notice-item{
  font-size:13.5px;line-height:2.05;color:var(--text-light);
  font-weight:300;padding:9px 0;
  border-bottom:.5px dashed rgba(22,52,80,.1);
}
.notice-item:last-child{border-bottom:none}
.notice-item b{font-weight:500;color:var(--kon-deep)}

/* ===== 引用・メッセージ帯 ===== */
.lp-banner{
  width:100%;padding:64px 24px;margin:56px 0;
  background:linear-gradient(135deg,var(--kon-deep),var(--kon));
  text-align:center;position:relative;overflow:hidden;
}
.lp-banner::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(201,169,110,.025) 0px,rgba(201,169,110,.025) 1px,transparent 1px,transparent 34px);
  pointer-events:none;
}
.lp-banner p{
  position:relative;color:var(--shoji);font-size:21px;
  letter-spacing:3px;font-weight:300;line-height:2.3;
}
.lp-banner em{font-style:normal;color:var(--gold);font-weight:400}

/* ===== CTA ===== */
.lp-cta{
  max-width:var(--content-w);margin:0 auto;padding:48px 24px 16px;text-align:center;
}
.lp-cta h2{
  font-size:21px;letter-spacing:2.5px;color:var(--kon-deep);
  font-weight:400;line-height:1.9;margin-bottom:14px;
}
.lp-cta p{
  font-size:14px;line-height:2.1;color:var(--text-light);
  font-weight:300;margin-bottom:28px;
}
.lp-btn{
  display:inline-block;padding:16px 56px;margin:6px;
  background:var(--kon);color:var(--gold-pale);
  font-size:14.5px;letter-spacing:3px;font-family:var(--serif);
  transition:all .3s;border:1px solid var(--kon);
}
.lp-btn:hover{background:var(--kon-mid);border-color:var(--kon-mid)}
.lp-btn.ghost{background:transparent;color:var(--kon);border-color:rgba(22,52,80,.35)}
.lp-btn.ghost:hover{background:rgba(22,52,80,.05);color:var(--kon-deep)}
.lp-btn.line{background:#06C755;border-color:#06C755;color:#fff}
.lp-btn.line:hover{background:#05a948;border-color:#05a948}

/* ===== フォーム ===== */
.lp-form{
  max-width:var(--content-w);margin:0 auto;padding:8px 24px 24px;
}
.lp-form-inner{background:#fff;border:.5px solid rgba(22,52,80,.09);padding:30px 28px 26px}

/* ===== 施設概要ミニ ===== */
.mini-info{
  max-width:var(--content-w);margin:28px auto;padding:0 24px;
}
.mini-info-inner{background:#fff;border:.5px solid rgba(22,52,80,.09);padding:8px 24px}

/* ===== 本体サイトへの導線 ===== */
.to-main{
  max-width:var(--content-w);margin:0 auto;padding:16px 24px 8px;
  text-align:center;font-family:var(--sans);font-size:12.5px;
  color:var(--text-light);letter-spacing:.5px;line-height:2;
}
.to-main a{color:var(--kon-mid);border-bottom:1px solid rgba(30,68,104,.4)}

/* ===== レスポンシブ ===== */
@media(max-width:768px){
  .lp-hero{min-height:70vh;padding:110px 18px 64px}
  .lp-hero-title{font-size:25px;letter-spacing:2px;line-height:1.95}
  .lp-hero-sub{font-size:14px}
  .lp-lead{padding:48px 18px 8px;font-size:15.5px}
  .lp-lead .big{font-size:17.5px;letter-spacing:1px}
  .lp-h2{padding:44px 18px 4px}
  .lp-h2 h2{font-size:19.5px;letter-spacing:1.5px}
  .solve{grid-template-columns:1fr;padding:0 18px}
  .pain-list{width:calc(100% - 36px)}
  .timeline-wrap,.cost,.notice,.mini-info,.lp-form,.lp-cta{padding-left:18px;padding-right:18px}
  .tl-row{gap:12px}
  .tl-time{width:54px;font-size:12px}
  .tl-text{font-size:13.5px}
  .lp-banner p{font-size:17px;letter-spacing:2px}
  .lp-btn{display:block;padding:15px 20px}
  .cost-row{flex-direction:column;gap:2px}
  .cost-value{align-self:flex-end}
}