@charset "utf-8";
/* ============================================================
   ENRA SAUNA LP
   ・デザイン基準幅 750px。750px以下はビューポート幅に追従。
   ・var(--u) = デザイン1px の実寸。全数値を calc(N * var(--u)) で指定。
   ============================================================ */
:root{ --u: calc(min(100vw, 750px) / 750); }
@supports (width: 1cqi){
  .lp{ container-type: inline-size; }
  .lp *, .lp{ --u: 0.13333333cqi; }
}

/* リセットは .lp 配下だけに限定（WordPressの管理バーやプラグイン側に影響させない） */
.lp, .lp *{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#000; color:#fff; overflow-x:hidden;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:400; font-optical-sizing:auto;
}
.lp img,.lp video{ display:block; border:0; max-width:100%; }
.lp a{ color:inherit; }

.lp{ width:100%; max-width:750px; margin-left:auto; margin-right:auto; background:#000; }

/* --- セクション（画像＋絶対配置テキスト） --- */
.sec{ position:relative; width:100%; }
.sec .im{ position:absolute; inset:0; width:100%; height:auto; }
.fv{ height:auto; }
.fv .im{ position:static; }

/* --- FV：動画を透明で重ね、実際に再生が始まった瞬間だけ表示する ---
   自動再生が端末に拒否された場合、動画は透明のままなので
   再生ボタンは見えず、下の静止画（動画の最終フレーム）だけが表示されます。 */
.fv-media{ position:relative; width:100%; background:#000; }
.fv-still{ display:block; width:100%; height:auto; }
.fv-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000;
  opacity:0; transition:opacity .3s linear;
  pointer-events:none;
}
.fv-media.is-playing .fv-video{ opacity:1; }

/* iOS Safari が非再生時に出す再生ボタンを隠す（保険） */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls{
  display:none !important; -webkit-appearance:none;
  opacity:0 !important; pointer-events:none !important;
}

/* --- HTMLテキスト --- */
.t{ position:absolute; margin:0; font-weight:500; white-space:nowrap; }
.row-l{ display:flex; justify-content:space-between; align-items:baseline; }

/* --- CTAボタン --- */
.btn{
  position:absolute; left:calc(31 * var(--u)); width:calc(688 * var(--u));
  display:block; transition:opacity .2s;
}
.btn img{ width:100%; height:auto; }
.btn:hover{ opacity:.82; }
.btn:focus-visible,.banner:focus-visible,.ac-btn:focus-visible,.spec-tab:focus-visible{
  outline:calc(3 * var(--u)) solid #fff; outline-offset:calc(3 * var(--u));
}
.banner{ position:absolute; display:block; }

/* --- Spec & Installation タブ --- */
.spec-card{ position:absolute; left:0; width:100%; }
.spec-card .im{ position:static; }
/* タブは表の中身より前面に置く（クリックが届かなくなるため） */
.spec-tabs{ position:absolute; left:0; top:calc(23 * var(--u)); width:100%;
  display:flex; z-index:2; }
.spec-tab{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font:inherit; color:transparent; padding:0;
  width:calc(363 * var(--u)); height:calc(82 * var(--u));
}
.spec-tab:first-child{ margin-left:calc(15 * var(--u)); }
.spec-tab:last-child{ margin-left:calc(-5 * var(--u)); }
/* 表の中身は文字だけなので、クリックを下（＝タブ）へ通す */
.spec-pane{ position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; }
.spec-pane.is-hide{ display:none; }
.sp-row{
  position:absolute; left:calc(55 * var(--u)); width:calc(634 * var(--u));
  height:calc(119 * var(--u));
  display:flex; align-items:center;
  border-bottom:1px solid #A08F70;
  padding-left:calc(8 * var(--u));
}
.spec-pane .sp-row:last-of-type{ border-bottom:0; }
.sp-chip{
  flex:0 0 auto; width:calc(171 * var(--u)); height:calc(64 * var(--u));
  background:#000; color:#fff; border-radius:calc(2 * var(--u));
  display:flex; align-items:center; justify-content:center;
  font-size:calc(24 * var(--u)); letter-spacing:.02em; white-space:nowrap;
}
.sp-val{ color:#604A22; font-size:calc(33 * var(--u)); font-weight:500;
  margin-left:calc(26 * var(--u)); white-space:nowrap; }
.st-row{
  position:absolute; left:calc(50 * var(--u)); width:calc(644 * var(--u));
  height:calc(121 * var(--u)); display:flex; align-items:center;
  border-bottom:1px solid #A08F70;
}
.st-check{ flex:0 0 auto; width:calc(67 * var(--u)); height:auto;
  margin-left:calc(20 * var(--u)); }
.st-row .sp-val{ margin-left:calc(21 * var(--u)); }
.st-note{ position:absolute; left:0; width:100%; text-align:center;
  color:#000; font-size:calc(24 * var(--u)); line-height:calc(35 * var(--u)); }

/* --- アコーディオン（Support / FAQ） --- */
.sec-flow{ position:relative; width:100%; background:#000; }
#support{ padding:calc(20 * var(--u)) 0 calc(74 * var(--u)); }
#faq{ padding:calc(20 * var(--u)) 0 calc(43 * var(--u)); }

.ac-btn{
  -webkit-appearance:none; appearance:none;
  position:relative; display:block; width:calc(698 * var(--u));
  margin-inline:auto; padding:0; border:0; background:transparent;
  cursor:pointer; font:inherit; text-align:left;
}
.ac-btn img{ width:100%; height:auto; }
.ac-ttl{ position:absolute; color:#fff; font-weight:500; white-space:nowrap; }
/* ＋マークは文字ではなくCSSの罫線で描画（フォント差の影響を受けないように） */
.mark{ position:absolute; }
.mark::before,.mark::after{ content:""; position:absolute; background:currentColor; }
.mark::before{ left:0; right:0; top:50%; height:calc(3 * var(--u)); transform:translateY(-50%); }
.mark::after{ top:0; bottom:0; left:50%; width:calc(3 * var(--u)); transform:translateX(-50%); }
.ac-mark{ left:calc(637 * var(--u)); top:calc(59 * var(--u));
  width:calc(30 * var(--u)); height:calc(31 * var(--u)); color:#C8AE7E; }
.ac-body{
  width:calc(698 * var(--u)); margin:calc(32 * var(--u)) auto 0;
  border:1px solid #C8AE7E; background:#000;
  padding:calc(27 * var(--u)) calc(30 * var(--u));
  font-size:calc(24 * var(--u)); line-height:calc(48 * var(--u));
  letter-spacing:.1em; color:#fff;
}
.ac-body[hidden]{ display:none; }
.ac-body p + p{ margin-top:calc(20 * var(--u)); }
.ac-h{ color:#C8AE7E; }
.ac-h + p{ margin-top:0 !important; }

/* --- FAQ --- */
.faq .ac-btn{ width:calc(688 * var(--u)); }
.faq-q{ position:absolute; color:#000; font-weight:500; white-space:nowrap; }
.faq-mark{ left:calc(636 * var(--u)); top:calc(53 * var(--u));
  width:calc(28 * var(--u)); height:calc(31 * var(--u)); color:#000; }
.faq-a{
  width:calc(645 * var(--u)); border:0; background:transparent;
  padding:0; margin:calc(37 * var(--u)) auto 0; color:#fff;
}

/* --- フォーム設置エリア --- */
.form-wrap{ background:#000; padding:0 0 calc(17 * var(--u)); }
.form-box{
  width:calc(688 * var(--u)); min-height:calc(916 * var(--u));
  margin-inline:auto; background:#EEE6D7; border-radius:calc(4 * var(--u));
  padding:calc(40 * var(--u)); color:#000;
}

@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }


/* ============================================================
   WordPressで使う場合の上書き
   テーマのCSSが後から読み込まれても背景が白くならないようにする
   ============================================================ */
html body.enra-lp{
  background:#000 !important;
  color:#fff !important;
  margin:0 !important;
  padding:0 !important;
}
body.enra-lp .lp{
  background:#000 !important;
  max-width:750px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
}
/* Lightning：ヘッダーを非表示 */
#site-header-container {
  display: none !important;
}
/* Lightning：フッターを非表示 */
.site-footer{
  display: none !important;
}

/* Lightning：SPのハンバーガーメニューを非表示 */
html body #vk-mobile-nav-menu-btn,
html body .vk-mobile-nav-menu-btn,
html body #vk-mobile-nav,
html body [class^="vk-mobile-nav"],
html body [class*=" vk-mobile-nav"] {
  display: none !important;
}