/* =========================================================
   LP style.css（全体マージ版）
   - スマホファースト / PC左右背景
   - ヘッダー追従（ロゴ&CTAサイズ調整済み）
   - FV画像のみ
   - FV下：見出し画像 + お客様画像 自動スクロール（サイズ拡大可）
   - 料金表タブ
   - 追従フッター
   - 本文CTA：背景 + 予約ボタン + 電話ボタン（3枚重ね）
   ========================================================= */


:root{
  --content-max: 430px;     /* 本文はスマホ幅固定 */
  --gutter: 0px;
  --sticky-height: 84px;    /* 追従フッターの見込み高さ */
  --header-bg: rgba(255,255,255,.92);

  /* PC左右背景（差し替え） */
  --pc-bg-left: url("../img/bg_left.jpg");
  --pc-bg-right: url("../img/bg_right.jpg");

  /* ヘッダーの見た目サイズ（ロゴ/CTA） */
  --header-logo-h: clamp(32px, 8vw, 44px);
  --header-cta-h:  clamp(46px, 12vw, 64px);

  /* 自動スクロール（速度・画像サイズ） */
  --marquee-duration: 20s; /* 基本はHTMLの inline --marquee-duration が優先 */
  --marquee-img-h: clamp(110px, 30vw, 150px);

  /* （旧）2枚重ねCTAを使う場合のボタン配置 */
  --cta-btn-width: 72%;
  --cta-btn-bottom: 10%;

  /* ===== 本文CTA（3枚重ね：背景 + 予約 + 電話） ===== */
  --cta3-max-w: 430px;/*360px*/

  /* 予約ボタン */
  --cta3-reserve-w: 46%;
  --cta3-reserve-left: 10%;
  --cta3-reserve-bottom: 10%;

  /* 電話ボタン */
  --cta3-tel-w: 46%;
  --cta3-tel-right: 10%;
  --cta3-tel-bottom: 10%;
}


*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  color:#111;
  background:#fff;
  line-height: 1.6;
  overflow-x: hidden;

  /* fixedフッター分だけ下に余白を確保 */
  padding-bottom: calc(var(--sticky-height) + env(safe-area-inset-bottom));
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ===== PC左右背景（本文は中央スマホ幅のまま） ===== */
body::before,
body::after{
  content:"";
  position: fixed;
  top:0; bottom:0;
  width: calc((100vw - var(--content-max)) / 2);
  z-index: 0;
  display:none; /* モバイルは非表示 */
  background-size: cover;
  background-position: center;
}

body::before{ left:0;  background-image: var(--pc-bg-left); }
body::after{ right:0; background-image: var(--pc-bg-right); }

@media (min-width: 768px){
  body::before, body::after{ display:block; }
}

/* ===== 共通コンテナ ===== */
.container{
  position: relative;
  z-index: 1; /* 背景の上 */
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== ヘッダー（追従：sticky） ===== */
.lp-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  /*border-bottom: 1px solid rgba(0,0,0,.06);*/
}

.lp-header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

.lp-logo{
  display:flex;
  align-items:center;
  min-width: 0;
}

.lp-logo img{
  height: var(--header-logo-h);
  width: auto;
}

/* ヘッダーCTA（単体ボタンリンク） */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.header-cta img{
  height: var(--header-cta-h);
  width: auto;
  display:block;
}

.header-cta:active{ transform: translateY(1px); }

/* （保険）もしヘッダーに .cta-stack を残していてもサイズを揃える */
.lp-header .cta-stack{
  width: auto;
}
.lp-header .cta-stack img{
  width: auto;
  height: var(--header-cta-h);
}

/* ===== セクション ===== */
main{ padding: 0 0 28px; }
.sec{ padding: /*22px*/ 0; }

.section-title{
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: .02em;
}

.card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

/* ===== 料金表タブ ===== */
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tab-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.tab-btn[aria-selected="true"]{
  border-color: rgba(0,0,0,.24);
  background: rgba(0,0,0,.04);
  font-weight: 600;
}

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.price-img{
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
}

/* ===== 追従フッター ===== */
.sticky-footer{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}

.sticky-footer__inner{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* （旧）追従CTAが .cta-stack の場合 */
.sticky-footer .cta-stack{
  width: calc(var(--content-max) - (var(--gutter) * 2));
  max-width: 360px;
}

/* ===== FV（画像のみ） ===== */
.fv{ padding: 0; }
.fv__img{
  width: 100%;
  display: block;
  height: auto;
}

/* ===== FV下：見出し画像 + お客様画像 自動スクロール ===== */
.customer-strip{
  padding-top: 14px;
}

.customer-strip__heading{
  width: 100%;
  display: block;
  height: auto;
  margin-bottom: 10px;
}

/* 自動スクロール本体 */
.marquee{
  position: relative;
  overflow: hidden;
  /* 秒数はHTML側でも上書きできる（style="--marquee-duration: 20s;"） */
  --marquee-duration: var(--marquee-duration);

  /* 端をふわっと（不要なら消してOK） */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee__track{
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee__list{
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee__item img{
  height: var(--marquee-img-h);
  width: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* ホバー時に止めたいなら（不要なら消してOK） */
.marquee:hover .marquee__track{
  animation-play-state: paused;
}

/* ループ（2セット分の幅の半分だけ動かす） */
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* 動きを減らす設定の人には停止 */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* =========================================================
   （旧）本文CTA：ベース画像 + ボタン画像だけリンク（残しておく）
   ※現在は3枚重ねCTAを使う想定なので、使わなければ不要
   ========================================================= */
.cta-overlay{
  position: relative;
  width: 100%;
  max-width: 360px;
}
.cta-overlay__base{
  width: 100%;
  display:block;
}
.cta-overlay__btn{
  position: absolute;
  left: 50%;
  bottom: var(--cta-btn-bottom);
  transform: translateX(-50%);
  width: var(--cta-btn-width);
  display:block;
  -webkit-tap-highlight-color: transparent;
}
.cta-overlay__btn img{
  width: 100%;
  display:block;
}
.cta-overlay__btn:active{
  transform: translateX(-50%) translateY(1px);
}

/* =========================================================
   本文CTA：背景 + 予約ボタン + 電話ボタン（3枚重ね）
   ========================================================= */
.cta-3{
  position: relative;
  width: 100%;
  max-width: var(--cta3-max-w);
}

.cta-3__bg{
  width: 100%;
  display: block;
}

/* ボタン共通 */
.cta-3__btn{
  position: absolute;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.cta-3__btn img{
  width: 100%;
  display: block;
}

.cta-3__btn:active{
  transform: translateY(1px);
}

/* 予約ボタン配置 */
.cta-3__btn--reserve{
  width: var(--cta3-reserve-w);
  left: var(--cta3-reserve-left);
  bottom: var(--cta3-reserve-bottom);
}

/* 電話ボタン配置 */
.cta-3__btn--tel{
  width: var(--cta3-tel-w);
  right: var(--cta3-tel-right);
  bottom: var(--cta3-tel-bottom);
}



/* =========================================================
   CTA（添付イメージの配置）：背景 + 電話(上) + 予約(下)
   末尾追記でOK（既存 .cta-3 を上書き）
   ========================================================= */

/* ボタン位置（必要ならここだけ調整） */
:root{
  --cta3-btn-w: 82%;        /* ボタン横幅 */
  --cta3-btn-left: 9%;      /* 左余白（左からの位置） */

  --cta3-tel-top: 25%;    /* 電話ボタン 上からの位置 */
  --cta3-web-top: 48%;    /* 予約ボタン 上からの位置 */
}

/* CTAラッパーはそのまま使う（max-width等は既存のままでOK） */
.cta-3--stacked .cta-3__bg{
  width: 100%;
  display: block;
}

/* ボタン共通（縦積み配置に上書き） */
.cta-3--stacked .cta-3__btn{
  left: var(--cta3-btn-left);
  right: auto;
  bottom: auto;            /* 以前のbottom指定を無効化 */
  width: var(--cta3-btn-w);
  display: block;
  z-index: 2;
}

.cta-3--stacked .cta-3__btn img{
  width: 100%;
  display: block;
}

.cta-3--stacked .cta-3__btn--tel{
  top: var(--cta3-tel-top);
}

.cta-3--stacked .cta-3__btn--reserve{
  top: var(--cta3-web-top);
}

.cta-3--stacked .cta-3__btn:active{
  transform: translateY(1px);
}


/* =========================================================
   料金表：背景(100%) + 切替画像(中央90%) + 透明タブ
   ※style.cssの末尾に追記（既存を上書き）
   ========================================================= */

:root{
  --price-max-w: 430px;

  /* 切替画像レイヤーのサイズと位置 */
  --price-overlay-w: 90%;   /* ← ここが「中央90%」 */
  --price-overlay-top: 35%;  /* ← 背景上の見出しと被るなら 2%〜8% あたりに */

  /* タブ当たり判定（overlay内での位置） */
  --price-hit-top: 0%;
  --price-hit-h: 12%;       /* ← タブの高さが合わない時は 10%〜16%で調整 */
}

.price-switch{
  position: relative;
  width: 100%;
  max-width: var(--price-max-w);
  margin: 0 auto;
}

.price-switch__bg{
  width: 100%;
  display: block;
}

/* 90%中央の重ね領域 */
.price-switch__overlay{
  position: absolute;
  left: 50%;
  top: var(--price-overlay-top);
  transform: translateX(-50%);
  width: var(--price-overlay-w);
  z-index: 2;
}

/* 切替画像（overlayに対して100%） */
.price-switch__layer{
  width: 100%;
  display: block;
}

/* 透明タブ */
.price-switch__hit{
  position: absolute;
  top: var(--price-hit-top);
  height: var(--price-hit-h);
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3; /* 画像より上に */
  -webkit-tap-highlight-color: transparent;
}

.price-switch__hit--insurance{
  left: 0;
  width: 50%;
}

.price-switch__hit--selfpay{
  right: 0;
  width: 50%;
}

.price-switch__hit:active{
  transform: translateY(1px);
}

/* =========================================================
   flow画像の上に「電話番号画像＋WEBボタン画像」を重ねる
   ========================================================= */
:root{
  --flow-overlay-top: 18.5%;     /* オーバーレイ領域の開始位置（上下調整） */
  --flow-overlay-width: 88%;   /* オーバーレイ横幅 */
  --flow-tel-width: 92%;       /* 電話番号画像の横幅 */
  --flow-web-width: 92%;       /* WEBボタン画像の横幅 */
  --flow-gap: 50px;            /* 電話とボタンの間隔 */
}

.flow-hero{
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.flow-hero__img{
  width: 100%;
  display: block;
  height: auto;
}

.flow-hero__overlay{
  position: absolute;
  top: var(--flow-overlay-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--flow-overlay-width);
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--flow-gap);
}

.flow-hero__telimg{
  display: block;
  width: var(--flow-tel-width);
  -webkit-tap-highlight-color: transparent;
}

.flow-hero__telimg img{
  width: 100%;
  display: block;
}

.flow-hero__webbtn{
  display: block;
  width: var(--flow-web-width);
  -webkit-tap-highlight-color: transparent;
}

.flow-hero__webbtn img{
  width: 100%;
  display: block;
}

.flow-hero__telimg:active,
.flow-hero__webbtn:active{
  transform: translateY(1px);
}

/* ===== フッター（Copyright） ===== */
.lp-footer{
  padding: 18px 0;
  text-align: center;
}

.lp-footer__copyright{
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0,0,0,.6);
}