/* =========================================================
   大型LEDビジョン広告のページ。body は .pat-e .pat-lp。
   トップの12列の板は使わず、紙色の地に1本の読み筋を通す縦組みのLPにする。
   バー・メニュー・フッター・書体・単位は core-x.css + style-e.css をそのまま使う。
   ========================================================= */

/* ---- 地を反転する。文字色は指定を忘れると紙に紙色で乗るので明示 ---- */
body.pat-lp{background:var(--acc-bg);color:var(--acc-fg)}
.pat-lp ::selection{background:var(--ink);color:var(--acc-bg)}

/* ---- 版面 ----
   読み物なので本文は1段。約36字で折れる幅に絞り、図版だけ外へ広げる。 */
.lp{padding-top:var(--barh)}
.lp-wrap{width:min(100% - clamp(32px,8vw,calc(96 * var(--px))), calc(880 * var(--px)));margin-inline:auto}
.lp-wrap--wide{width:min(100% - clamp(16px,3vw,calc(40 * var(--px))), calc(1240 * var(--px)))}

/* 章は罫1本と余白で切る。囲みは作らない（枠が増えるほど読み筋が途切れる） */
.lp-sec{padding:clamp(56px,9vh,calc(128 * var(--px))) 0}
.lp-sec + .lp-sec{border-top:1px solid var(--acc-rule)}

/* ---- 見出し ----
   英字を大きく、和文をその脇に小さく。トップの章見出し（.tile-head）と同じ組み方。 */
.lp-h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em 1em;
  margin-bottom:clamp(28px,4vh,calc(52 * var(--px)))}
.lp-h2 .en{font-weight:300;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(30px,19px + 2.2vw,calc(60 * var(--px)))}
.lp-h2 b{font-weight:500;font-size:var(--t-label);letter-spacing:.16em;color:var(--acc-muted)}
.lp-note{margin-top:clamp(18px,2.6vh,calc(28 * var(--px)));
  font-size:var(--t-small);line-height:2.1;letter-spacing:.04em;color:var(--acc-muted)}

/* ---- ヒーロー ---- */
.lp-hero{padding:clamp(44px,8vh,calc(104 * var(--px))) 0 0}
.lp-kicker{font-family:var(--f-en);font-weight:400;font-size:var(--t-label);letter-spacing:.24em;
  color:var(--acc-muted)}
.lp-h1{margin-top:clamp(14px,2vh,calc(22 * var(--px)));
  font-weight:600;letter-spacing:.04em;line-height:1.4;
  font-size:clamp(30px,19px + 2.4vw,calc(60 * var(--px)))}
.lp-lead{margin-top:clamp(20px,3vh,calc(32 * var(--px)));max-width:34em;
  font-size:clamp(14px,12.6px + .34vw,calc(17 * var(--px)));line-height:2.15;letter-spacing:.04em}
.lp-addr{margin-top:clamp(16px,2.4vh,calc(24 * var(--px)));
  font-size:var(--t-small);letter-spacing:.06em;color:var(--acc-muted)}

/* 主写真は版面の外まで広げる。紙面が白いぶん、写真1枚で場所の空気を出す */
.lp-kv{margin-top:clamp(32px,5vh,calc(64 * var(--px)));
  width:min(100% - clamp(16px,3vw,calc(40 * var(--px))), calc(1440 * var(--px)));
  margin-inline:auto;aspect-ratio:16/7;overflow:hidden}
.lp-kv img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){ .lp-kv{aspect-ratio:4/3} }

/* ---- ボタン。この面でいちばん押してほしいので紺のベタで置く ---- */
.lp-btn{display:inline-flex;align-items:center;gap:.9em;
  margin-top:clamp(24px,3.4vh,calc(38 * var(--px)));
  padding:calc(15 * var(--px)) calc(38 * var(--px));
  background:var(--ink);color:var(--acc-bg);border:1px solid var(--ink);
  font-weight:500;font-size:var(--t-small);letter-spacing:.08em;white-space:nowrap;
  transition:background .3s var(--ease-out-quad),color .3s}
.lp-btn span{display:inline-block;transition:transform .45s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .lp-btn:hover{background:transparent;color:var(--ink)}
  .lp-btn:hover span{transform:translateX(8px)}
}

/* ---- 強み。1項目1行で降ろす。横に3つ並べるより読み落としが少ない ---- */
.pt{list-style:none}
.pt li{display:grid;grid-template-columns:calc(72 * var(--px)) minmax(0,1fr);
  gap:0 clamp(12px,2vw,calc(28 * var(--px)));
  padding:clamp(24px,3.4vh,calc(38 * var(--px))) 0;border-top:1px solid var(--acc-rule)}
.pt li:last-child{border-bottom:1px solid var(--acc-rule)}
.pt-no{font-family:var(--f-en);font-style:italic;font-weight:300;line-height:1.1;color:var(--acc-rule);
  font-size:clamp(26px,3vw,calc(42 * var(--px)))}
.pt h3{font-weight:600;letter-spacing:.04em;line-height:1.5;
  font-size:clamp(18px,14px + .8vw,calc(27 * var(--px)))}
.pt p{margin-top:calc(10 * var(--px));max-width:32em;
  font-size:var(--t-small);line-height:2.1;letter-spacing:.04em;color:var(--acc-muted)}
@media (max-width:560px){
  .pt li{grid-template-columns:1fr;gap:calc(8 * var(--px))}
  .pt-no{font-size:calc(24 * var(--px))}
}

/* ---- 設置場所 ---- */
/* 紙の地なので地図は反転させない（トップの .gmap は紺地用）。
   width と align-self を明示するのは WebKit 対策。aspect-ratio を持つグリッドの子を
   既定の stretch のままにすると、高さから幅を逆算して列より細く出る。 */
.pat-lp .gmap{background:var(--acc-bg);aspect-ratio:16/9;width:100%;align-self:start}
.pat-lp .gmap iframe{filter:none}
.pat-lp .gmap::after{display:none}
.pat-lp .gmap::before{box-shadow:inset 0 0 0 1px var(--acc-rule)}
@media (max-width:760px){ .pat-lp .gmap{aspect-ratio:4/3} }
.gmap-link{color:var(--acc-muted)}
@media (hover:hover) and (pointer:fine){ .pat-lp .gmap-link:hover{color:var(--acc-fg)} }

/* 図版は本文より広く取る。地図と写真は同じ高さで並べる */
.lp-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(16px,2vw,calc(28 * var(--px)));align-items:stretch;
  margin-top:clamp(26px,4vh,calc(44 * var(--px)))}
.lp-fig{position:relative;overflow:hidden;background:var(--acc-rule);min-height:calc(240 * var(--px))}
.lp-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-fig--wide{min-height:0;aspect-ratio:16/9}
@media (max-width:760px){ .lp-fig--wide{aspect-ratio:3/2} }
@media (max-width:900px){
  .lp-pair{grid-template-columns:1fr}
  /* aspect-ratio だけで高さを持つ子は、align-self:start にしないと WebKit で高さ0になる */
  .lp-fig{min-height:0;aspect-ratio:3/2;align-self:start}
}

/* ---- 媒体データ ---- */
.lp-dl > div{display:grid;grid-template-columns:calc(140 * var(--px)) minmax(0,1fr);
  gap:calc(16 * var(--px));
  padding:calc(16 * var(--px)) 0;border-top:1px solid var(--acc-rule)}
.lp-dl > div:last-child{border-bottom:1px solid var(--acc-rule)}
.lp-dl dt{font-size:var(--t-label);letter-spacing:.16em;color:var(--acc-muted)}
.lp-dl dd{font-weight:500;font-size:var(--t-small);letter-spacing:.05em;line-height:1.9}
@media (max-width:560px){ .lp-dl > div{grid-template-columns:1fr;gap:calc(4 * var(--px))} }

/* ---- 料金 ---- */
.price-h{font-size:var(--t-label);letter-spacing:.16em;color:var(--acc-muted)}
.price-block + .price-block{margin-top:clamp(30px,4.4vh,calc(52 * var(--px)))}
.price{width:100%;border-collapse:collapse;margin-top:calc(14 * var(--px))}
.price th,.price td{text-align:left;vertical-align:baseline;
  padding:calc(17 * var(--px)) calc(16 * var(--px)) calc(17 * var(--px)) 0;
  border-top:1px solid var(--acc-rule)}
.price tr:last-child th,.price tr:last-child td{border-bottom:1px solid var(--acc-rule)}
.price thead th{border-top:0;padding-top:0;
  font-weight:500;font-size:var(--t-label);letter-spacing:.14em;color:var(--acc-muted)}
.price tbody th{width:26%;font-weight:600;font-size:var(--t-small);letter-spacing:.08em}
/* 金額は英字書体。桁が揃って、和文の中でも数字として立つ */
.price td{font-family:var(--f-en);font-weight:400;letter-spacing:.02em;
  font-size:clamp(18px,14px + .8vw,calc(28 * var(--px)))}
.price td small{font-family:var(--f-jp);font-size:var(--t-label);letter-spacing:.08em;
  color:var(--acc-muted);margin-left:.5em}
@media (max-width:560px){
  .price th,.price td{padding-right:calc(8 * var(--px))}
  .price tbody th{width:22%}
  .price td{font-size:calc(17 * var(--px))}
  .price td small{margin-left:.3em}
}

/* ---- 締めの導線。紙の面を紺で断ち切って、最後に一度だけ強く出す ---- */
.lp-cta{background:var(--ink);color:var(--fg);
  padding:clamp(52px,8vh,calc(112 * var(--px))) 0}
.lp-cta h2{font-weight:600;letter-spacing:.04em;line-height:1.5;
  font-size:clamp(20px,15px + 1vw,calc(32 * var(--px)))}
.lp-cta p{margin-top:clamp(16px,2.4vh,calc(24 * var(--px)));max-width:32em;
  font-size:var(--t-small);line-height:2.1;letter-spacing:.04em;color:var(--fg-soft)}
.lp-cta .lp-btn{background:var(--fg);color:var(--ink);border-color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .lp-cta .lp-btn:hover{background:transparent;color:var(--fg)}
}
.lp-back{display:flex;width:fit-content;align-items:center;gap:.6em;
  margin-top:clamp(26px,3.4vh,calc(40 * var(--px)));
  font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-soft);
  transition:color .3s var(--ease-out-quad)}
.lp-back span{display:inline-block;transition:transform .45s var(--ease-out-quart)}
@media (hover:hover) and (pointer:fine){
  .lp-back:hover{color:var(--fg)}
  .lp-back:hover span{transform:translateX(-6px)}
}

/* ---- フッター。紙の地のままだと紙色の文字が消えるので、紺の帯に戻す ---- */
.pat-lp .board-foot{background:var(--ink);color:var(--fg);max-width:none;
  padding-left:clamp(16px,3vw,calc(40 * var(--px)));
  padding-right:clamp(16px,3vw,calc(40 * var(--px)))}