@charset "UTF-8";

/* ==========================================================================
   店舗ページ（page-store.php）
   TOPと共通のセクションは style.css を使用し、ここでは
   FV・CTA・店舗情報セクションの差分のみを定義する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   FV
   -------------------------------------------------------------------------- */

/* 店舗名の行が入る分、動画の表示位置がTOPより下がる */
.bz-hero--store .bz-hero__video,
.bz-hero--store .bz-hero__poster {
  top: 19.13%;
}

.bz-hero--store.is-campaign .bz-hero__video,
.bz-hero--store.is-campaign .bz-hero__poster {
  top: 18.42%;
}

/* 店舗名（固定ページタイトル） */
.bz-hero__store-name {
  position: absolute;
  top: 12.9721%;
  left: 3.6232%;
  z-index: 2;
  width: 88%;
  margin: 0;
}

.bz-hero--store.is-campaign .bz-hero__store-name {
  top: 10.9272%;
}

.bz-hero__store-name-text {
  display: inline-block;
  border-bottom: 0.0625rem solid #0c3217;
  color: #0c3217;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8125rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03625rem;
}

.bz-hero--store .bz-hero__cta {
  top: 65.3524%;
  width: 93.2367%;
}

.bz-hero--store.is-campaign .bz-hero__cta {
  top: 56.64%;
}

/* --------------------------------------------------------------------------
   中盤CTA（1回目から変化を実感）
   -------------------------------------------------------------------------- */

.bz-trial--store .bz-trial__cta {
  top: 34.17%;
  left: 50%;
  width: 94.3816%;
  transform: translateX(-50%);
}

.bz-trial--store .bz-trial__cta-info {
  transform: none;
}

.bz-trial--store.is-campaign .bz-trial__cta {
  top: 25.4%;
  left: 0;
  width: 100%;
  transform: none;
}

.bz-trial--store.is-campaign .bz-trial__cta-info {
  transform: translateX(0.5rem);
}

/* --------------------------------------------------------------------------
   予約ボタン（画像＋店舗名テキスト）
   -------------------------------------------------------------------------- */

.bz-store-cta {
  display: block;
  line-height: 0;
  transition: transform 0.3s;
}

.bz-store-cta__img {
  display: block;
  width: 100%;
  height: auto;
}

.bz-store-cta__store {
  position: absolute;
  top: 25.18%;
  left: 0;
  width: 100%;
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
}

.bz-store-cta--fv,
.bz-store-cta--trial {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (hover: hover) {
  .bz-store-cta--fv:hover,
  .bz-store-cta--trial:hover {
    transform: translateX(-50%) scale(1.03);
  }

  .bz-store-cta--info:hover {
    transform: scale(1.03);
  }
}

.bz-store-cta--fv {
  top: 44.71%;
  width: 92.9192%;
}

.bz-store-cta--fv .bz-store-cta__store {
  font-size: 0.6299rem;
}

.is-campaign .bz-store-cta--fv {
  top: 63.7%;
  width: 93.0052%;
}

.is-campaign .bz-store-cta--fv .bz-store-cta__store {
  font-size: 0.6305rem;
}

.bz-store-cta--trial {
  top: 49.34%;
  width: 100.96%;
}

.bz-store-cta--trial .bz-store-cta__store {
  font-size: 0.6929rem;
}

.is-campaign .bz-store-cta--trial {
  top: 65.5%;
  width: 99%;
}

.is-campaign .bz-store-cta--trial .bz-store-cta__store {
  font-size: 0.72rem;
}

.bz-store-cta--info {
  position: relative;
  width: 98.1522%;
  margin: 0.6956rem auto 0;
}

.bz-store-cta--info .bz-store-cta__store {
  font-size: 0.7138rem;
}

/* --------------------------------------------------------------------------
   キャンペーン価格（画像の空欄にテキストを重ねる）
   数字はデザインと同じ Gidole（Google Fonts）。Gidoleは400のみの提供なので、
   デザインの太さに合わせて font-weight:700（合成ボールド）で表示している。
   黒フチと影はCSSで再現。
   -------------------------------------------------------------------------- */

.bz-campaign-price,
.bz-campaign-off {
  position: absolute;
  z-index: 3;
  display: inline-block;
  font-family: "Gidole", "Noto Sans JP", sans-serif;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform-origin: right top;
}

.bz-campaign-price {
  /* PHPが「はみ出す桁数」のときだけ1未満を渡す（通常は等倍）。 */
  --bz-price-fit: 1;
  color: #e84145;
  transform-origin: top center;
  letter-spacing: -0.01em;
  paint-order: stroke fill;
  text-shadow: 0.215875rem 0.2rem 0 #000;
  -webkit-text-stroke-width: 0.278125rem;
  -webkit-text-stroke-color: #000;
}

.bz-campaign-price__comma {
  letter-spacing: -0.2rem;
}

.bz-campaign-price__digits {
  position: relative;
  display: inline-block;
  -webkit-text-stroke-width: 0.338125rem;
  -webkit-text-stroke-color: #000000;
}

.bz-campaign-price__digits::after {
  position: absolute;
  inset: 0;
  color: #e84145;
  content: attr(data-digits);
  letter-spacing: inherit;
  paint-order: stroke fill;
  text-shadow: none;
  -webkit-text-stroke-width: 0.06rem;
  -webkit-text-stroke-color: #e84145;
}

.bz-campaign-off {
  color: #ffffff;
  letter-spacing: -0.01em;
}

.bz-campaign-price--fv {
  top: 15.46%;
  left: 47.76%;
  font-size: calc(5.075rem * var(--bz-price-fit));
  transform: translateX(-50%) scaleX(0.95);
}

.bz-campaign-off--fv {
  top: 15.67%;
  right: 8.21%;
  font-size: 1.97rem;
  transform: none;
}

.bz-campaign-price--trial {
  top: 17.53%;
  left: 47.58%;
  font-size: calc(5.314rem * var(--bz-price-fit));
  transform: translateX(-50%);
}

.bz-campaign-off--trial {
  top: 17.47%;
  right: 6.66%;
  font-size: 2rem;
  transform: none;
}

/* FAQ下のキャンペーンバナー（数値を抜いた画像＋テキスト） */
.bz-faq__campaign--store {
  position: relative;
}

.bz-campaign-price--faq {
  top: 25.3%;
  left: 48.02%;
  font-size: calc(5.075rem * var(--bz-price-fit));
  transform: translateX(-50%) scaleX(0.95);
}

.bz-campaign-off--faq {
  top: 26.56%;
  right: 7.41%;
  font-size: 1.87rem;
  transform: none;
}

/* 「通常◯円の60分コースが、対象店舗限定で」 */
.bz-campaign-lead {
  position: absolute;
  z-index: 3;
  width: 100%;
  margin: 0;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.bz-campaign-lead--fv {
  top: calc(13.04% - 0.375em);
  left: -0.3em;
  font-size: 0.78rem;
  font-weight: 500;
}

.bz-campaign-lead--trial {
  top: calc(13.26% - 0.675em);
  left: 0.1rem;
  font-size: 0.9071rem;
}

.bz-campaign-lead--faq {
  top: calc(21.4% - 0.575em);
  left: 0;
  font-size: 0.8456rem;
}

/* 予約ボタン内の「通常◯円のコースが◯円に」 */
.bz-store-cta__lead {
  position: absolute;
  top: calc(32.7% - 0.825em);
  left: 0;
  width: 100%;
  color: #fcfcfc;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-align: center;
}

.bz-store-cta--fv .bz-store-cta__lead {
  font-size: 0.7449rem;
}

.bz-store-cta--trial .bz-store-cta__lead {
  font-size: 0.8512rem;
}

.bz-store-cta--info .bz-store-cta__lead {
  font-size: 0.8439rem;
}

/* --------------------------------------------------------------------------
   店舗情報セクション
   -------------------------------------------------------------------------- */

.bz-store-info {
  padding-bottom: 0.7rem;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
}

.bz-store-info__inner {
  width: 100%;
  margin-inline: auto;
}

.bz-store-info__title {
  margin: 0;
}

.bz-store-info__title-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 店舗写真（左上・右下の緑デコを重ねる） */
.bz-store-photo {
  position: relative;
  width: 88.4855%;
  margin: 0.5852rem auto 0;
}

.bz-store-photo__img {
  position: absolute;
  top: 4.119%;
  left: 2.9535%;
  z-index: 1;
  width: 93.797%;
  height: 92.175%;
  object-fit: cover;
}

.bz-store-photo__deco {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.bz-store-info__body {
  width: 83.483%;
  margin-inline: auto;
}

.bz-store-info__name {
  margin: 0.6425rem 0 0;
}

.bz-store-info__name-text {
  display: inline-block;
  border-bottom: 0.1rem solid #029f53;
  color: #029f53;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.0625rem;
}

.bz-store-info__list {
  display: flex;
  flex-direction: column;
  gap: 1.1875rem;
  margin: 1.4094rem 0 0;
}

.bz-store-info__row {
  display: flex;
  gap: 0.9375rem;
  align-items: flex-start;
}

.bz-store-info__label {
  display: flex;
  flex: 0 0 5.6875rem;
  align-items: center;
  justify-content: center;
  min-height: 1.7151rem;
  margin: 0;
  border-radius: 5.5821rem;
  background-color: #cde9dc;
  color: #029f53;
  font-size: 0.9418rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.0848rem;
}

.bz-store-info__value {
  margin: 0;
  padding-top: 0.0625rem;
  color: #029f53;
  font-size: 0.9063rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.0544rem;
  white-space: pre-line;
}

.bz-store-info__tel {
  color: inherit;
  text-decoration: none;
}

.bz-store-info__map {
  margin-top: 0.875rem;
  margin-left: 6.5625rem;
}

.bz-store-info__map-frame {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  aspect-ratio: 243.9 / 129.47;
}

/* --------------------------------------------------------------------------
   PC左カラム（768px以上）
   カード画像は 475px 幅で表示されるため、重ねるテキストは px 指定にする
   （.bz-pc-left 全体が JS の scale で追従するので px でも崩れない）。
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  .bz-store-cta--pc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  @media (hover: hover) {
    .bz-store-cta--pc:hover {
      transform: translateX(-50%) scale(1.03);
    }
  }

  /* キャンペーン版のカード */
  .bz-pc-left__campaign--ca .bz-store-cta--pc {
    top: 57.4%;
    width: 72.25%;
  }

  /* 通常版のカード */
  .bz-pc-left__campaign--normal .bz-store-cta--pc {
    top: 45.25%;
    width: 80.6%;
  }

  .bz-pc-left__campaign--ca .bz-store-cta--pc .bz-store-cta__lead {
    font-size: 11.4px;
  }

  .bz-pc-left__campaign--normal .bz-store-cta--pc .bz-store-cta__store {
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13.864px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.693px;
    text-align: center;
  }

  .bz-campaign-lead--pc {
    top: calc(32.4% - 0.37em);
    left: -1.7px;
    font-size: 16.4px;
  }

  .bz-campaign-price--pc {
    top: 37.78%;
    left: 47.72%;
    font-size: calc(78px * var(--bz-price-fit));
    transform: translateX(-50%) scaleX(0.95);
    letter-spacing: 0;
    letter-spacing: 0.1rem;
  }

  .bz-campaign-off--pc {
    top: 37.1%;
    right: 16.77%;
    font-size: 31.5px;
    transform: none;
  }
}