@charset "UTF-8";
/* =================================================================
   1. 共通リセット・ベーススタイル
   ================================================================= */
* {
  margin: 0;
}
body {
  overflow-x: hidden;
}
html {
  font-family: "Noto Sans JP", sans-serif, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
video {
  width: 100%;
  max-width: 750px;
  height: auto;
  display: block;
  margin: auto;
}
ul {
  padding: 0;
}
li {
  list-style: none;
}
address {
  font-style: inherit;
}
.wrapper {
  max-width: 750px;
  margin: 0 auto;
}
.red {
    text-decoration: underline;
    color: #DF0012;
}

/* =================================================================
   2. 共通ユーティリティ / アニメーション
   ================================================================= */
.block {
  display: block;
}
.flex {
  display: flex;
}
.relative {
  position: relative;
  background: #eaf8ff;
}

/* ふわふわ上下に動くアニメーション（updown1） */
.updown {
  animation-name: updown1;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes updown1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ドキドキ拡大縮小アニメーション（dokundokun） */
.dokidoki {
  animation: dokundokun 2300ms ease infinite;
}
@keyframes dokundokun {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.1); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
}

/* キラッと光るアニメーション（shine） */
@-webkit-keyframes shine {
  100% { left: 100%; }
}
@keyframes shine {
  100% { left: 100%; }
}


/* =================================================================
   3. CTAボタン（.btn / .btn2）共通
   ================================================================= */
.btn a {
  display: inline-block;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 90%;
  left: 4%;
}
/* キラッと光る装飾 */
.btn a::before,
.btn2 a::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
  -webkit-animation: shine 1s infinite;
  animation: shine 1s infinite;
  pointer-events: none;
}
.btn.updown {
  width: 90%;
  margin: 5% auto;
}


/* =================================================================
   4. FV（ファーストビュー）
   ※ shop.html <section class="fv">
   ================================================================= */
.fv_btn {
  position: absolute;
  bottom: 4%;
  left: 65%;
  width: 32%;
  margin-bottom: 100%;
}
.fv_cta_area {
  margin-bottom: 0; /* 旧: -18px → 240930_shopLP で上書き */
}
.fv_note {
  position: absolute;
  bottom: 0.7%;
  right: 6%;
  color: white;
  font-size: clamp(10px, 3vw, 20px);
}
.fv_note p {
  line-height: 1.3em;
  text-align: end;
}
/* 末尾の追加調整 */
.fv_note { bottom: 4%; }
.fv_btn  { bottom: 6.5%; }


/* =================================================================
   5. トライアル（trial.php）
   ================================================================= */
.trial {
  position: relative;
  margin-bottom: 0; /* 旧: -18px → 250227編集_櫻井 で上書き */
}
.kengaku_2 {
  margin-top: 0; /* 旧: -19px → 250227編集_櫻井 で上書き */
}
.researve-btn {
  margin: auto;
  width: 86%;
}
.researve-btn_top {
  position: absolute;
  top: 70%;
  width: 85%;
  left: 8%;
}
.trial_last-message {
  position: absolute;
  top: 85%;
  bottom: 10%;
  left: 50%;
  width: 95%;
  text-align: center;
  transform: translateX(-50%);
    line-height: 1.8em;
}
.trial_last-message p {
  padding: 8px 0;
  width: 95%;
  margin: auto;
  font-size: clamp(9px, 2.5vw, 20px);
}


/* =================================================================
   6. benefits（入会キャンペーン特典 / parts/benefits.php）
   ================================================================= */
.benefits {
  background: url(../img/common/benefits/membership_benefits_bg.webp) no-repeat 0 0 / 100% 100%;
}
/* 2回目benefits（CTA・適用条件付き）専用
   注釈は .cpbox の内側に配置されるため、.cpbox基準で絶対配置となる。
   背景画像はセクション全体ではなく .cpbox の幅・高さに合わせる */
.benefits--second {
  background: none;
}
.benefits--second .cpbox {
  background: url(../img/common/benefits/membership_benefits_bg.webp) no-repeat 0 0 / 100% 100%;
  padding-bottom: 10%;
}
.benefits_text01 {
  margin: 2% 0;
  width: 100%;
  left: 0;
  top: 54%;
  line-height: 2em;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
}
.benefits_text02 {
  width: 83%;
  margin: 5% auto;
  line-height: 1.6em;
  color: #ffffff;
}
.benefits_text02 p {
  padding-left: 2em;
  text-indent: -2em;
}
.benefits_transfer {
  width: 85%;
  padding-left: 3%;
  margin: auto;
}
.cta_area.benefits_cta_area {
  padding: 5% 0;
}
section#benefits {
  padding-bottom: 10%;
}

/* 適用条件（rules） */
.rules {
  text-decoration: underline;
}
.rules_wrap {
  background: url("../img/common/benefits/rules_bg.png") no-repeat 0 0/cover;
  padding: 70px 30px;
}
.rules_wrap dt {
  font-weight: normal;
  font-size: 26px;
  margin-bottom: 20px;
}
.rules_wrap dt:nth-of-type(2) {
  margin-top: 80px;
}
.rules_wrap dd {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 18px;
  margin: 0 14px;
  line-height: 1.9;
}
#rules dd:before {
  position: relative;
  content: "・";
}


/* =================================================================
   7. 鳥瞰図（birds-eye）
   ================================================================= */
.birds_eye {
  position: relative;
}


/* =================================================================
   8. サービス紹介（service-list-hotyoga / -pilates / -kickboxing）
   ※ newstore/php/service/{hotyoga,machine_pilates,kickboxing}.php
   ================================================================= */
.service-list-hotyoga {
  position: relative;
}

/* 背景 */
.service-bg-hotyoga {
  position: relative;
  padding: 480px 0 90px;
}
.service-bg-hotyoga::before {
  content: "";
  display: block;
  background-image: url("../img/common/service/service-bg_hotyoga.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.service-bg-pilates {
  position: relative;
  padding: 65% 0 90px;
}
.service-bg-pilates::before {
  content: "";
  display: block;
  background-image: url("../img/common/service/service-bg_pilates.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.service-bg-kickboxing {
  position: relative;
  padding: 65% 0 90px;
}
.service-bg-kickboxing::before {
  content: "";
  display: block;
  background-image: url("../img/common/service/service-bg_kickboxing.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* リスト本体 */
.service-list-area {
  width: 93%;
  padding: 0 0 2%;
  background-color: #fff;
  border-radius: 54px 0 0 0;
}
.service-list-area img {
  z-index: 2;
  position: relative;
  margin-left: -1px;
  margin-top: -1px;
}

/* 各リスト共通の左右ライン装飾 */
.list-hotyoga    { margin: auto 0 auto auto; position: relative; }
.list-pilates    { position: relative; margin: auto 0 auto auto; }
.list-kickboxing { position: relative; margin: auto 0 auto auto; }
.list-hotyoga::before {
  content: ""; display: block;
  background-color: #469bcf;
  position: absolute; top: 0; right: 0;
  width: 80%; height: 10px; z-index: 1;
}
.list-pilates::before {
  content: ""; display: block;
  background-color: #AF62A2;
  position: absolute; top: 0; right: 0;
  width: 80%; height: 10px; z-index: 1;
}
.list-kickboxing::before {
  content: ""; display: block;
  background-color: #AF62A2;
  position: absolute; top: 0; right: 0;
  width: 80%; height: 10px; z-index: 1;
}
/* ::after は最終的に非表示 */
.list-hotyoga::after,
.list-pilates::after,
.list-kickboxing::after {
  display: none;
}

/* 開閉ボタン（3サービス共通） */
.open-btn-hotyoga,
.open-btn-pilates,
.open-btn-kickboxing {
  position: absolute;
  width: 70px;
  top: 80px;
  right: 30px;
}
.open-btn-hotyoga:hover,
.open-btn-pilates:hover,
.open-btn-kickboxing:hover {
  cursor: pointer;
}
.close-btn-hotyoga,
.close-btn-pilates,
.close-btn-kickboxing {
  position: absolute;
  width: 42px;
  top: 28px;
  right: 18px;
  z-index: -1;
}
.close-btn-hotyoga.open,
.close-btn-pilates.open,
.close-btn-kickboxing.open {
  z-index: 9999;
  right: 29px;
  position: absolute;
  width: 70px;
  top: 80px;
}

/* 開閉でフェードする領域 */
.fade-area {
  display: none;
}
.list-text {
  width: 95%;
  margin: 20px 0 auto auto;
}


/* =================================================================
   9. 競合比較表（comparison）
   ================================================================= */
ul.comparison_note {
  position: absolute;
  bottom: 8%;
  left: 5%;
}


/* =================================================================
   10. 会員さまの声（voice / slick）
   ================================================================= */
section.voice {
  position: relative;
  padding: 70px 0;
}
section.voice::before {
  content: "";
  display: block;
  background-image: url("../img/common/voice/voice_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* voice 内側の要素を背景画像の上に重ねる */
section.voice > * {
  position: relative;
  z-index: 1;
}
.voice-top {
  width: 74%;
  margin: 0 auto;
}
.voice_contents {
  text-align: center;
  margin-bottom: 40px;
}
.voice_contents img {
  width: 80%;
  padding: 25px 0 0;
}
p.voice-message {
  font-size: 14px;
  color: #fff;
  width: 95%;
  margin: 12px auto 0;
  line-height: 1.3em;
}

/* Slickスライダー */
.slider {
  display: none;
  margin: 0 auto;
}
.slider img {
  height: auto;
}

/* 各スライド画像のサイズ統一
   元画像サイズが揃っていない（ホットヨガ/ピラティス: 528x452、
   キックボクシング: 550x530）ので、表示上は 550:530 のアスペクト比に
   揃える。画像内のテキストが切れないよう object-fit: contain で
   全体表示する（縦長になっている画像は左右に余白が入る）。 */
.voice_slide {
  width: 100%;
  aspect-ratio: 550 / 530;
  object-fit: contain;
  object-position: center;
}
.slick-arrow_prev,
.slick-arrow_next {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}
.slick-arrow_prev { left: 20px; }
.slick-arrow_next { right: 20px; }
/* スライダー本体を初期非表示にし、slick初期化後に表示 */
.slider.slick-initialized {
  display: block;
}

/* 左右の画像を縮小・半透明にする中央演出 */
.slider .slick-slide {
  transform: scale(0.9);
  transition: all .5s;
  opacity: 0.5;
}

/* 中央のスライドだけ等倍・不透明に戻す */
.slider .slick-slide.slick-center {
  transform: scale(1);
  opacity: 1;
}

/* =================================================================
   11. 体験レッスン0円セクション（kengaku_info_wrap）
   ※ 南富山店と同じ実装：タイトル画像 + YouTube動画 + CTA(.btn) + 注釈
   ================================================================= */
.kengaku_info_wrap {
  background: url("../img/common/trial/taiken_0_bg.png") no-repeat 0 0 / 100% 100%;
  padding: 3em 0;
}
section.kengaku_info_wrap.relative.floating_start h2,
section.kengaku_info_wrap.relative h2 {
  width: 80%;
  margin: auto;
}
.cp_video_wrap {
  width: 90%;
  margin: 2rem auto;
  border: 15px solid #fff;
  box-sizing: border-box;
}
.cp_video_inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
}
.cp_video_inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
p.kengaku_comment {
  width: 85%;
  margin: auto;
}
@media (min-width: 750px) {
  .cp_video_wrap {
    margin: 20px auto 0 auto;
  }
}


/* =================================================================
   12. 店舗情報（shop-info / store_information.php）
   ================================================================= */
.shop-info {
  position: relative;
  margin-bottom: 0;
}
.shop-info p {
  line-height: 1.4;
}
.shop_info_wrap {
  background: url("../img/common/shop-info/shop_info_bg.png") no-repeat 0 0/cover;
  padding: 90px 90px 30px;
}
.shop_info_title {
  font-weight: bold;
  font-size: clamp(3rem, 6vw, 50px);
  text-align: center;
  position: relative;
}
.shop_info_title::before {
  content: "";
  position: absolute;
  display: inline-block;
  background: url("../img/common/shop-info/shop_info_bg_tx.png") no-repeat 0 0/contain;
  width: 280px;
  height: 129px;
  top: -64px;
  left: calc(50% - 140px);
}
.shop_info_tx {
  color: #5b4020;
  font-weight: bold;
  font-size: clamp(1.2rem, 3.5vw, 28px);
  text-align: center;
  margin: 60px auto 30px;
}
.shop_info_logo {
  width: 361px;
  display: block;
  margin: 0 auto;
}

/* 各情報行 */
.shop-info_text01,
.shop-info_text02,
.shop-info_text03,
.shop-info_text04,
.shop-info__btn01 {
  position: inherit; /* 旧の絶対配置をリセット */
}
.shop-info_text01,
.shop-info_text02,
.shop-info_text03,
.shop-info_text04 {
  line-height: 1.8;
  color: #5b4020;
}
.shop-info_text01 {
  display: flex;
  padding: 60px 0;
  justify-content: center;
  align-items: center;
  font-size: clamp(10px, 3vw, 20px);
}
.shop-info_text02,
.shop-info_text03,
.shop-info_text04,
.shop-info_text05 {
  padding: 40px 0;
  border-top: 1px solid #5b4020;
  width: 100%;
}
.shop-info_text02 { font-size: clamp(10px, 4vw, 28px); }
.shop-info_text03 { font-feature-settings: "palt"; font-size: clamp(10px, 3.7vw, 28px); }
.shop-info_text04,
.shop-info_text05 {
  line-height: 1.8;
  color: #5b4020;
  font-size: clamp(10px, 4vw, 28px);
}
.shop-info_text03_03 {
  margin-top: 1em;
}
.shop-info p.shop_info_attention {
  font-size: clamp(0.9rem, 3vw, 18px);
  margin-top: 10px;
  line-height: 1.8;
}
.shop-info__btn01 {
  width: 100%;
  margin: 20px auto;
}

p.shop {
  font-size: clamp(17px, 5vw, 40px);
  font-weight: 500;
}
p.user {
  border: solid 1px #5b4020;
  padding: 0.3em;
  color: #5b4020;
  font-weight: 600;
  margin-left: 1.5em;
}
p.title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Google Map */
.gmaps {
  width: 100%;
}
.gmaps__area {
  position: relative;
  width: 100%;
  height: 0;
  margin: auto;
  padding-top: 90%; /* 縦長レイアウト */
}
.gmaps__area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* =================================================================
   13. 料金プラン（price / newstore/php/price.php）
   ================================================================= */
section.price {
  background: #fff;
  margin-top: 40px;
}
a.price_cp {
  position: relative;
  display: block;
}
p.price_cp_text {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 5%;
}
.price_detail {
  display: none; /* 初期非表示。JS or .open 時に display:block */
}
.price_comment_wrap {
  padding: 20px 60px;
}
.price_comment_wrap p {
  padding-left: 1em;
  text-indent: -1em;
  color: #4F4F4F;
  line-height: 1.9;
  font-size: 1.13rem;
  font-weight: 500;
}

/* 「他プランを見る」開閉ボタン */
.detail_btn {
  color: #e63865;
  border-radius: 50px;
  border: solid 1.5px #e63865;
  background-color: #fff;
  margin: 24px auto 0 auto;
  display: inline-block;
  box-shadow: 9px 11px 17px -12px #bababa;
}
.label_price {
  cursor: pointer;
  font-size: 1.8rem;
  padding: 20px 60px 20px 30px;
  position: relative;
  transition: .5s;
  width: 340px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  margin: 5% auto;
}
.label_price::before,
.label_price::after {
  content: '';
  width: 13px;
  height: 1px;
  background: #e63865;
  position: absolute;
  top: 50%;
  right: 23%;
  transform: translateY(-50%);
}
.label_price::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}
.label_price.open::before {
  opacity: 0;
}
.label_price.open::after {
  transform: rotate(180deg);
}


/* =================================================================
   14. 追従ボタン（floating / newstore/php/floating_cta.php）
   ================================================================= */
.fixed_bnr_sp {
  position: fixed;
  bottom: 0;
  z-index: 500;
  width: 100%;
}
.floating__inner {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.floating__inner a {
  display: inline-block;
  margin-left: 0;
  width: 12rem;
}
.floating__inner img {
  display: block;
  margin-left: 0;
  width: 100%;
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .floating__inner img {
    display: block;
    margin-left: auto;
  }
}
@media screen and (min-width: 751px) {
  .floating__inner {
    max-width: 850px;
  }
}
@media screen and (min-width: 901px) {
  .floating__inner img {
    display: block;
    width: 200px;
    margin-left: 630px;
  }
}


/* =================================================================
   15. フッター（footer.php）
   ================================================================= */
#copyright {
  text-align: center;
  background: antiquewhite;
  font-size: .8em;
  padding: 1em 0;
}
ul.select-1-nav {
  justify-content: center;
  gap: 14px;
  margin-top: 3em;
  margin-bottom: 1em;
  color: #5b4020;
}
ul.select-1-nav li {
  font-size: 14px;
  padding-right: 10px;
  border-right: solid 1px #000;
}
ul.select-1-nav li:last-child {
  border-right: none;
  padding-right: 0;
}


/* =================================================================
   16. 750px以下 共通メディアクエリ（SP最適化）
   各セクションのSP用上書きをまとめて記述
   ================================================================= */
@media screen and (max-width: 750px) {

  /* ベース */
  html {
    font-size: calc(100vw / 37.5);
  }

  /* benefits */
  .benefits_text01 {
    font-size: 1.4rem;
  }
  .benefits_text02 {
    font-size: 0.9rem;
  }
  .rules_wrap {
    padding: 4rem 2rem;
  }
  .rules_wrap dt {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  .rules_wrap dt:nth-of-type(2) {
    margin-top: 4rem;
  }
  .rules_wrap dd {
    padding-left: 1em;
    text-indent: -1em;
    font-size: 1rem;
    margin: 0 0.8rem;
  }
  .kengaku_2 {
    margin-top: 0;
  }

  /* サービス紹介 */
  .service-bg-hotyoga,
  .service-bg-pilates,
  .service-bg-kickboxing {
    padding: 22rem 0 8rem;
  }
  .open-btn-hotyoga,
  .open-btn-pilates,
  .open-btn-kickboxing {
    width: 5rem;
    top: 2.8rem;
    right: 1.5rem;
  }
  .close-btn-hotyoga.open,
  .close-btn-pilates.open,
  .close-btn-kickboxing.open {
    width: 5rem;
    top: 2.8rem;
    right: 1.5rem;
  }

  /* voice */
  section.voice {
    padding: 2rem 0 3.5rem;
  }
  p.voice-message {
    font-size: 1rem;
  }

  /* slick */
  .slick-arrow_prev,
  .slick-arrow_next {
    width: 5rem;
    height: 50px;
    z-index: 200;
  }
  .slick-arrow_prev {
    left: 0.5rem;
  }
  .slick-arrow_next {
    right: 0.5rem;
  }

  /* 店舗情報 */
  .shop_info_wrap {
    padding: 6rem 3.5rem 2rem;
  }
  .shop_info_title::before {
    width: 14rem;
    height: 7rem;
    top: -3.4rem;
    left: calc(50% - 7rem);
  }
  .shop_info_tx {
    margin: 3rem auto 1.5rem;
  }
  .shop_info_logo {
    width: 18rem;
  }
  .shop-info_text01 {
    padding: 3rem 0;
  }
  .shop-info_text02,
  .shop-info_text03,
  .shop-info_text04,
  .shop-info_text05 {
    padding: 2rem 0;
  }
  .shop-info__btn01 {
    margin: 1rem auto;
  }
  .shop-info p.shop_info_attention {
    margin-top: 0.5rem;
  }

  /* 料金 */
  .label_price {
    padding: 1.5rem 6rem;
    width: 16rem;
  }
  .label_price::before,
  .label_price::after {
    right: 10%;
  }
  .price_comment_wrap {
    padding: 1rem 3rem;
  }

  /* floating */
  .floating__inner a {
    margin-left: 24.7rem;
    width: 12rem;
  }

  /* フッター */
  ul.select-1-nav li {
    font-size: 1.1rem;
  }
  #copyright {
    font-size: 1.25rem;
  }
}


/* =================================================================
   17. 751px以上 個別調整（PC/タブレット向け微調整）
   ================================================================= */
@media screen and (min-width: 751px) {
  .benefits_text01 {
    top: 59%;
  }
}