@charset "utf-8";
html, body {
    overflow-x: hidden; /* 横方向のはみ出しを隠す */
    width: 100%;
}
body{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
}
#wrapper{
    /*max-width: 1400px;*/
    margin: auto;
}
#wrapper img{
    width: 100%;
    vertical-align: middle;
}

@media only screen and (max-width: 839px){
#wrapper{
    max-width: 700px;
    margin: auto;
}
}

@media only screen and (min-width: 640px){
    #wrapper{
        max-width: 1920px;
       max-width: 800px;
        margin: auto;
    }
}

h1,h2 {
    margin: 0;
}
.anno {
    font-size: 14px;
    text-align: right;
    color: #646464;
    margin: 0;
}

/*------------------ キャンペーン ------------------*/
.campaign {
    background-image: url(../img/campaign_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 6% 0 23%;
}
.campaign-ttl {
    margin: 0 auto;
    padding: 8% 15%;
}


/*------------------ 入会特典 ------------------*/
.bonus {
    background-image: url(../img/bonus_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 20% 0 10%;
    margin: -15% 0 0;
}
.bonus-ttl {
    padding: 0 5% 3%;
}
.bonus-inner {
    margin: 0 5%;
}


/*------------------ CTA ------------------*/
.cta_area {
    background-image: url(../img/cta_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 12% 7%;
}
.cta_area img {
    margin: 3% 0;
}


/*------------------ 実績 ------------------*/
.achievements {
    background-image: url(../img/achievements_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 12% 7% 1%;
}
.achievements-ttl {
    padding: 2% 5%;
    margin: 0 auto 5%;
}
.achievements-txt {
    padding: 0 18%;
    margin: 0 auto 5%;
}


/*------------------ スライダー ------------------*/
.slider-common {
  width: 100%;
  margin: 0 auto 7%;
}

.slider-common img {
  width: 100%;
  height: auto;
  padding: 10px; /* 画像同士の間隔 */
}
.slick-dots li.slick-active button:before {
    color: #2faaa5 !important;
}
.slick-dots li button:before {
    font-size: 7px !important;
}



/*------------------ 注意 ------------------*/
.caution {
    background-image: url(../img/caution_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 0 15%;
}

.pitfall-inner {
    margin: -8% 0;
}
.pitfall-01 {
    position: relative;
    margin-bottom: 5%;
}
.pitfall-01-slide {
    position: absolute !important;
    top: 40%;
}

/* slide */
.pitfall-01-slide.slick-dotted.slick-slider {
    width: 95%;
    margin: 2%;
}
/* ドットの基本形状を丸から横棒へ */
.pitfall-01-slide .slick-dots li {
  width: 40px;
  height: 3px;
  margin: 0 5px;
}
.pitfall-01-slide .slick-dots li button {
  width: 40px;
  height: 3px;
  padding: 0;
}
.pitfall-01-slide .slick-dots li button:before {
  content: ""; 
  width: 40px;
  height: 4px;
  background: #ccc; /* 待機中の色 */
  opacity: 1;
  border-radius: 10px;
}
.pitfall-01-slide .slick-dots li.slick-active button:before {
  background: #16675f; /* アクティブ時の色 */
  opacity: 100;
}
.pitfall-01-slide .slick-dots {
    bottom: -3px;
}

.pitfall-02 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.pitfall-02 img {
    width: 96% !important;
}

.caution-end {
    margin: 12% 0 0 1%;
}



/*------------------ ポイント ------------------*/
.point {
    background-image: url(../img/point_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15% 0 ;
}
.point-ttl {
    padding: 0 10%;
    margin-bottom: 8%;
}

.flex-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 7%;
}
.flex-end img {
    width: 95% !important;
}
.flex-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.center {
    padding: 5%;
}

/* slide */
.point-01-slide.slick-dotted.slick-slider {
    width: 90%;
    margin: 0 auto 15%;
}
.point-01-slide .slick-dots {
    bottom: -14px !important;
}

.result-slide {
    background-image: url(../img/result_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 5% auto;
}
.result-slide.slick-dotted.slick-slider {
    width: 90%;
    padding: 16% 3% 10%;
}
.result-slide .slick-dots{
    bottom: 12px;
    right: 0%; 
}
.result-slide .slick-prev:before, 
.result-slide .slick-next:before{
    color: #646464 !important;
    line-height: 2 !important;
}
.result-slide .slick-next {
    width: 90px;
}
.result-slide .slick-prev {
    width: 90px;
    z-index: 99;
} 


.point-02 {
    margin: 10% auto;
}

.point-03 .flex-end {
    margin-bottom: 3%;
}



/*------------------ トレーニングスペース ------------------*/
.training-space {
    background-image: url(../img/training-space_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15% 5%;
}
.training-space-ttl {
    padding: 0 5%;
    margin-bottom: 8%;
}
.training-space-txt {
    padding: 0 13%;
    margin-bottom: 10%;
}

.training-space-slide.slick-dotted.slick-slider {
    width: 90%;
    margin: 0px auto 14%;
}
.training-space-slide .slick-dots li.slick-active button:before,
.training-space-slide .slick-dots li.slick-active button::after {
    color: #fff !important;
}



/*------------------ 流れ ------------------*/
.flow {
    background-image: url(../img/flow_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15% 5%;
}
.flow-ttl {
    margin-bottom: 8%;
}
.flow-inner img {
    margin-bottom: 12%;
}



/*------------------ ご予約・店舗情報 ------------------*/
.reserve {
    background-image: url(../img/reserve_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15% 4%;
}
.reserve-ttl {
    padding: 0 6%;
    margin-bottom: 8%;
}

/* アコーディオン全体の枠 */
.details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
/* クリックする部分（サマリー） */
.details-summary {
  background: #f8f9fa;
  padding: 15px 20px;
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* デフォルトの三角を消す */
  position: relative;
  transition: background 0.3s;
  color: #1d8e8b;
}

.details-summary:hover {
  background: #f0f2f5;
}

/* 閉じてる時（デフォルト） */
.details-summary::after {
    content: "▼";
    position: absolute;
    right: 20px;
    font-size: 0.8em;
    color: #1d8e8b;
    transition: transform 0.5s; /* 動きを滑らかにしたい場合 */
}
/* 開いてる時（detailsにopen属性がついた時） */
.details[open] .details-summary::after {
    transform: rotate(180deg);
  }
/* 中身のコンテンツ */
.details-content {
  padding: 15px 20px;
  background: #fff;
}
.form h3 {
  font-size: 1.5rem;
  text-align: center;
  position: relative;
  margin:0 auto 3%;
  color: #1d8e8b;
}

/* 予約フォーム (iframe) */
.trial-booking-iframe {
  width: 100%;
  min-height: 500px; /* フォームの長さに合わせて調整 */
  border: none;
  margin-bottom: 30px;
}
/* 店舗情報のリスト (dl) */
.form dl {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  border-top: 1px solid #eee; /* 上に線を入れると区切りが明確に */
  padding-top: 10px;
}
.form dt {
  width: 30%;      /* 項目名の幅 */
  font-weight: bold;
  padding: 15px 0;
  border-bottom: 1px solid #eee; /* 下線で区切る */
}
.form dd {
  width: 70%;      /* 内容の幅 */
  margin: 0;       /* デフォルトの余白を消す */
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.form dt + dd + dd {
  margin-left: 30%; /* 項目名の幅分あける */
  width: 70%;
  border-top: none; /* 前のddとの間の線を消す（好みで） */
  padding-top: 0;   /* 前のddとの距離を詰める */
}
/* Google Map */
.form iframe:not(.trial-booking-iframe) {
  width: 100% !important; /* 横幅いっぱい */
  height: 300px;
  border-radius: 8px;
  border: 1px solid #eee !important;
}

.v-application--wrap {
    min-height: auto;
}

/*------------------ FAQ ------------------*/
.faq {
    background-image: url(../img/faq_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15% 8%;
}
.faq-ttl {
    padding: 0 15%;
    margin-bottom: 8%;
}


/* アコーディオン全体のコンテナ */
.faq-details {
  margin-bottom: 15px;
  border: none;
}

/* 質問部分（グラデーションと背景） */
.faq-summary {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #31a99d 0%, #2fabac 100%);
  color: #fff;
  position: relative;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* デフォルトの三角を消す（Chrome, Safari） */
.faq-summary::-webkit-details-marker {
  display: none;
}

/* 「Q」のアイコン部分 */
.q-icon {
  font-size: 2rem;
  font-weight: bold;
  font-family: sans-serif;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.6); /* 白い区切り線 */
  line-height: 1;
}

/* 質問テキスト */
.q-text {
  flex: 1;
  font-weight: bold;
  font-size: 1rem;
  padding-right: 30px; /* 右の矢印と被らないように */
}

/* 右側の矢印アイコン */
.faq-summary::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff; /* 下向き三角形 */
  transition: transform 0.3s;
}

/* 開いた時に矢印を回転 */
.faq-details[open] .faq-summary::after {
  transform: rotate(180deg);
}

/* 回答部分のスタイル */
.faq-content {
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -5px; /* summaryの角丸と合わせるための微調整 */
  color: #212121;
}



/*------------------ フッター ------------------*/
footer {
    padding: 13% 15%;
}



/*------------------ 追従 ------------------*/
.follow {
  position: fixed;
  bottom: 20px; /* 下からの距離 */
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  width: 90%;   /* 横幅（適宜調整） */
  max-width: 400px; /* 広がりすぎないように */
  z-index: 999; /* 最前面に */
  display: none; /* 初期状態は非表示 */
}

.follow img {
  width: 100%;
  height: auto;
  display: block;
}