@charset "UTF-8";

/* 標準SP表示 ~767px */

body {
  /* background-image: url(../images/body-bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom; */
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    height: 200vh !important;
}

img {
  width: 100%;
  margin-top: -1px; /*--隙間調整--*/
}

.main {
  margin-top: 70px; /* グローバルメニューの高さ分のマージンを追加 */
}


/* コンテンツの横幅 */
/* ============================================ */
.o-wrapper {
  width: 100%;
  max-width: 1200px; /*ここでコンテンツの横幅を変更*/
  margin: 0 auto; /* 横中央に配置 */
}
/* コンテンツの横幅 ここまで */
/* ============================================ */



/* グローバルメニュー（スマホファースト） */
/* ============================================ */
.g-menu {
  padding: 16px;
  background-color: #ffffff;
  position: fixed; /* 相対位置から固定位置に変更 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 他の要素より前面に表示 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を追加して浮いた感じにする */
}

.g-menu__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.g-menu__logo {
  font-size: 12px;
  font-weight: bold;
  z-index: 1001; /* ロゴをハンバーガーメニュー展開時も前面に */
}

.g-menu__logo a {
  text-decoration: none;
  color: #B28610;
}

/* ハンバーガーメニュー */
.g-menu__hamburger {
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 1001; /* 常に最前面に表示 */
}


.g-menu__hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #B28610;
  transition: all 0.3s;
}

.g-menu__hamburger span:nth-child(1) {
  top: 0;
}

.g-menu__hamburger span:nth-child(2) {
  top: 11px;
}

.g-menu__hamburger span:nth-child(3) {
  bottom: 0;
}

/* スクロール時のスタイル変化 */
.g-menu.scrolled {
  background-color: rgba(255, 255, 255, 0.95); /* 少し透明度を持たせる */
  transition: background-color 0.3s ease;
}

/* ハンバーガーメニューがアクティブ時の状態 */
.g-menu__hamburger.active span:nth-child(1) {
  transform: translateY(11px) rotate(-45deg);
}

.g-menu__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.g-menu__hamburger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
}

/* ハンバーガーオープン時にスクロール禁止 */
body.no-scroll {
  overflow: hidden;
}

/* ナビゲーション（スマホ・タブレット） */
.g-menu__nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  padding-top: 80px; /* ロゴとハンバーガーの下から表示 */
  z-index: 1000;
  transform: translateX(100%); /* 初期状態は画面外に */
  transition: transform 0.3s;
  overflow-y: auto;
}

.g-menu__nav.active {
  transform: translateX(0); /* メニュー表示時は画面内に */
}

.g-menu__list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.g-menu__item {
  margin-bottom: 20px;
  text-align: center;
}

.g-menu__item a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  display: block;
  padding: 10px;
}
/* グローバルメニュー（スマホファースト）ここまで */
/* ============================================ */

/*共通設定*/

/*カラムごとの題*/

/* 文字と線をまとめている外枠 */
.concept-group {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* ★これで文字も線も「横方向の真ん中」に揃う */
  text-align: center;
  
}
/* CONCEPTの文字 */
.concept-title {
  color: #B28610;
  font-size: 36px;      /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  margin-top: 40px;
  margin-bottom: 10px;    /* 文字と線の間の距離 */
  font-feature-settings: "palt";
}
/* 下の短い線 */
.concept-line {
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
}

/*魅力の文字*/
.concept-group1{
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* ★これで文字も線も「横方向の真ん中」に揃う */
  text-align: center;
  margin-top: -5%;

}

/* BODY BALANCEの魅力の文字 */
.concept-title1{
  color: #B28610;
  font-size: 36px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  margin-bottom: 10px;    /* 文字と線の間の距離 */
 font-feature-settings: "palt";
}

.concept-title2{
  color: #B28610;
  font-size: 16px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  margin-top: 40px;
}

/* 下の短い線 */
.concept-line1{
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
  margin-bottom:10px;
}

/*コースの文字*/
.courese-title{
  color: #B28610;
  font-size: 36px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  margin-top: 20px;
  margin-bottom: 10px;    /* 文字と線の間の距離 */
  font-feature-settings: "palt";
}

/* 下の短い線 */
.concept-line2{
  margin-bottom: 20px;
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
}

/*オプションの文字*/
.option-title{
  color: #B28610;
  font-size: 32px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  margin-top: 20px;
  margin-bottom: 10px;    /* 文字と線の間の距離 */
  font-feature-settings: "palt";
}
/* 下の短い線 */
.option-line{
  margin-bottom: 20px;
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
}



/*FAQの下線*/
.concept-line3{
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
  margin-bottom:50px;
}

/*アクセスの文字*/
.access-title {
  color: #B28610;
  font-size: 36px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  font-feature-settings: "palt";
  margin-bottom: 10px;    /* 文字と線の間の距離 */
}

/* 下の短い線 */
.access-line {
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #B28610; /* 線の色 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6%;
}

/*WEB予約見出し*/
.WEBrese-title {
  color: #ffffff;
  font-size: 36px;        /* 大きさは適宜調整 */
  font-weight: bold;
  letter-spacing: 0.1em;  /* 文字の間隔を少し開けると綺麗です */
  font-feature-settings: "palt";
  margin-top: 40px;
  margin-bottom: 10px;    /* 文字と線の間の距離 */
}
/* 下の短い線 */
.WEBrese-line {
  display: block;         /* 横幅を指定できるようにする */
  width: 80px;            /* ★線の長さ（好きな長さに変えてください） */
  height: 3px;            /* 線の太さ */
  background-color: #fff; /* 線の色 */
}

.icon{
  width: 8%;
  height: auto;
  margin: 4% 0 2%;
}
.icon-1{
  width: 30%;
  height: auto;
  margin: 2% 0 2%;
}
.icon-2{
  width: 6%;
  height: auto;
  margin: 2% 0 2%;
}

.icon-3{
  width: 8%;
  height: auto;
  margin: 4% 0 2%;
}

.icon-4{
  width: 10%;
  height: auto;
  margin: 4% 0 2%;
}


/*見出しここまで*/
/*====================================*/

/*====================================*/
/*予約・問い合わせボタン*/
/*PCのヘッダーに出すボタン*/
.PConly-btn{
    display: flex;
    margin-left: auto;   /* 左側の余白を最大にする */
    margin-right: 0;
  }

 .reserve-btn-1{ 
  margin: 10px auto; /* 上下の距離と中央寄せ */
  background: linear-gradient(to right, #31cadd, #91cac4, #bec2ae); /* ボタンの背景色 */
  border: none;       /* ボタンの枠線を消す */
  border-radius: 50px; /* ボタンの角を丸くする */
  width: 280px;
  height: 45px;
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color:#fefefe;
  text-align: center;
  font-size: 15px;
 }

  .reserve-btn-1:hover{
  transform: scale(1.05); /* 1.05倍に大きくする */
  cursor: pointer;
 }

/*お問合せ*/
.inquiry-btn{
  margin: 10px auto 10px 10px; /* 上下の距離と中央寄せ */
  background-color: transparent; 
  border: 2px solid #2fd5ea ;
  border-radius: 50px; /* ボタンの角を丸くする */
  width: 190px;
  height: 45px;
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color:#595959;
  text-align: center;
  font-size: 15px;
}

.inquiry-btn:hover{
  background-color: #2fd5ea; 
}

.reserve-btn{ 
  margin: 6% auto ; /* 上下の距離と中央寄せ */
  background: linear-gradient(to right, #31cadd, #91cac4, #bec2ae); /* ボタンの背景色 */     /* ボタンの枠線を消す */
  border-radius: 50px; /* ボタンの角を丸くする */
  border: 2px solid #31cadd; 
  width: 250px;
  height: 60px;
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color:#fefefe;
  text-align: center;
  font-size: 15px;

 }

  .reserve-btn:hover{
  transform: scale(1.05); /* 1.05倍に大きくする */
  cursor: pointer;
 }


/*fv*/
.PConly-btn{
    display: none !important;
  }


.fv{
  background: #f7f3eb;
  overflow: hidden;
  
}

.fv__title{
    padding-top: 5%;
    width: 275px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

.catch-copy{
    color: #B28610;        /* 文字色：白 */
    font-size: 20px;    /* 文字の大きさ */
    line-height: 1.5;   /* 行間 */
    text-align: center;   /* 左寄せ */
    padding: 3% 0;
    font-family: serif;
    font-feature-settings: "palt";
    }


.FV{
    width: 250px;
    height: auto;
    padding-top: 3%;
    display: block;
    margin: 0 auto;
  }

/* 3つの丸を包むコンテナ */
.circle-container {
  display: flex;         /* 横並びにする */
  align-items: center;   /* 上下中央揃え */
  justify-content: center;
  text-align: center;
}

/* 丸の共通スタイル */
.circle1, .circle2, .circle3 {
  width: 100px;          /* 丸の幅 */
  height: 100px;         /* 丸の高さ（幅と同じにする） */
  border-radius: 50%;    /* これで正方形が丸になります */
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color: #595959;           /* 文字色 */
  font-size: 14px;       /* 文字サイズ */
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  padding: 10px;         /* 文字が縁に当たらないよう調整 */
  box-sizing: border-box;
  
  /* ★丸同士を重ねる設定 PCだけかさねる*/
  margin-right: -15px;   /* 右側にマイナスの余白を作って、次の丸を引き寄せる */
  
  /* 少し透けさせると重なりが綺麗に見えます */
  opacity: 0.9;
}

/* 各丸の色（画像に近い色を設定） */
.circle1 { background-color: #2fd5ea; }
.circle2 { background-color: #98ded7; }
.circle3 { background-color: #dfe4cb; }

/* 一番最後の丸は右に重ねる必要がないのでマージンを戻す */
.circle:last-child {
  margin-right: 0;
}

/*fvここまで*/

/*コンセプト*/

.CONCEPT{
  background-color: #f7f3eb;
  display: flex;
}

.message-container {
  text-align: center; /* 全体を真ん中寄せ */
  margin: 10px;
}

.border-text {
  color: #B28610;
  font-size: 20px;
  font-weight: bold;
  line-height: 2.0; /* 行間を広めに取ると綺麗です */
  margin: 0;
  font-feature-settings: "palt";
  line-height: 1.5;
}

.honnbun{
  color: #595959;
  font-size: 16px;
  line-height: 1.8;
  margin: 20px auto 30px;
  display: block;
  text-align: center;
  font-feature-settings: "palt";
  width: 70%;
}

.concept-img1{
  width: 150px;
  height: auto;
  display: block;
  margin: 5% auto;
}

.concept-images{
  display: flex;         /* 横並びにする */
  align-items: center;   /* 上下中央揃え */
  justify-content: center;
  text-align: center;
}

.concept-img2{
  width: 80px;
  height: auto;
  margin-top: 10%;
}

.concept-img3{
  width: 120px;
  height: auto;
}
/*コンセプトここまで*/

/*魅力*/
.miryoku{
  position: relative;
}

.border-text1 {
  color: #B28610;
  font-size: 18px;
  line-height: 2.0; /* 行間を広めに取ると綺麗です */
  margin: 12px 0;
  font-weight: Bold;
  word-break: keep-all;
  overflow-wrap: anywhere; /* 画面幅が狭い場合、どこでも改行する */
  font-feature-settings: "palt";
   line-height: 1;
}

.miryoku-image2{
  position: absolute;
  left: 20vw;
  top: 10px;
  width: 20%;
  height: auto;
  transform: translate(-50%, -50%); 
  z-index: 100;
}

.miryoku-image3{
  position: absolute;
  left: 85vw;
  
  transform: translate(-50%, -50%);
  width: 13%;
  height: auto;
  z-index: 40;
}

.miryoku-text{
  color: #595959;
  line-height: 1.5;
  font-size: 12px;
}

.miryoku-table__item{
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.miryoku-table, 
  .miryoku-table tbody, 
  .miryoku-table tr {
    display: contents !important; /* 行（tr）の枠組みを無視させる魔法の指示 */
  }

  /* 2. 外側の親要素（もしあれば）か、テーブル自体をGridにする */
  /* ここでは、テーブルを包んでいる親要素がGridとして機能するようにします */
  .miryoku-table {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 横に2列（50%ずつ） */
    gap: 10px; /* マス同士の隙間 */
    width: 90%;
    text-align: center;
    border: none;
    border-collapse: collapse;
    margin-left: auto !important;  /* 左の余白を自動 */
    margin-right: auto !important; /* 右の余白を自動 */
    margin-top: 5%; 
    margin-bottom: 5%;
  /* 上下に少し隙間を作りたい場合はこちら */
  /* margin: 40px auto !important; */
  }

/* tbodyやtrもcontentsにして Gridを親に直結 */
  .miryoku-table tbody,
  .miryoku-table tr {
    display: contents !important;
  }

  /* 3. 各マス（td）を一つの独立した「箱」にする */
  .miryoku-table td {
    display: flex !important;
    flex-direction: column;
    padding: 20px 10px; /* 余白を調整 */
    height: 100%;
    box-sizing: border-box;
    align-items: center; /* 中身を中央へ */
    text-align: center;
    /* 一度すべての線を消す */
    border: none !important;
  }

  /* 4. 【縦線】2列目（右側のマス）に左線を引く */
  .miryoku-table td:nth-child(even) {
    border-left: 1px solid #595959 !important;
  }

  /* 5. 【横線】1, 2番目、3, 4番目のマスに下線を引く（5, 6番目は引かない） */
  /* 「5番目以降（n+5）」以外のマス、という指定 */
  .miryoku-table td:not(:nth-last-child(-n+2)) {
    border-bottom: 1px solid #595959 !important;
  }

 /*魅力ここまで*/

 /*コース*/ 
 .courese{
  background-color: #f7f3eb;
  width: 80%;
  height: auto;
  border-radius: 20px;  
  overflow: visible; 
  display: block;  
  margin: 5% auto;
  padding-top: 5%;
}

.courese-image{
  width: 12%;
  height: auto;
  position: relative;
  left: 5%;
  margin-bottom: -22%;
}

 .COURESE-table {
  display: block;
  overflow: visible;
  overflow-x: auto;         
  scroll-snap-type: x mandatory; 
  width: 100%;
  height: 100%;
  -ms-overflow-style: auto !important;  
  border-spacing: 0;
  word-break: keep-all;
  scroll-marker-group: after;
  /* スクロールバー非表示 */
  scrollbar-width: none;
  overflow-wrap: anywhere; /* 画面幅が狭い場合、どこでも改行する */
  anchor-name: --carousel;
   
}

.COURESE-1 {
  display: flex;  
  height: 100%;
}

.COURESE-1 td{
  display: block;
  flex: 0 0 80%;
  flex-shrink: 0;
  scroll-snap-align: center;
  padding-top: 40px;
  box-sizing: border-box;
  text-align: left;
  padding: 20px;
}


.Rectangle{
    max-width: 90%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}


.couresecontent-line{
   max-width:   100%;
   display: block;
   margin: 0 auto;
}

.couresename{
  font-size: 24px;
  font-weight: Bold;
  margin: 20px 0  20px 10px;
  color: #B28610;
}

.couresecontent{
  font-size: 16px;
  margin: 20px 0  20px 10px;
  color: #595959;
  word-break: keep-all; /* 日本語の単語途中での折り返しを防ぐ */
  overflow-wrap: anywhere; /* 画面幅が狭い場合、どこでも改行する */
  font-feature-settings: "palt";
  line-height: 1.5;
}

.couresecontent-line{
  display: block;         /* 横幅を指定できるようにする */
  width: auto;            /* ★線の長さ（好きな長さに変えてください） */
  height: 1px;            /* 線の太さ */
  background-color: #595959; /* 線の色 */
}

.sort{
font-size: 12px;
margin: 20px 0  20px 10px;
color: #595959;
font-feature-settings: "palt";
line-height: 1.8;
}

/* ★新しく追加するスタイル */
.carousel-container {
  position: relative; /* ボタンをカルーセル基準で配置するため */
  width: 100%;
  overflow: visible;
}

.carousel-btn {
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  padding: 0;
  color: #B28610;
  border: 1px solid #B28610;
  transition: background-color 0.2s, color 0.2s;
  
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;

  /* ★矢印（◀▶）を丸のど真ん中に配置する設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px; /* 見本に合わせて少し小さく調整（お好みで変えてください） */
}

.carousel-btn:hover {
  background-color: #B28610;
  color: #fff;
}

/* ★左ボタン：カードの左フチに半分重なるように配置 */
.prev-btn {
  left: 0;
  transform: translate(-50%, -50%); /* 元の50%上にずらす動きに加えて、左に半分はみ出させる */
}

/* ★右ボタン：カードの右フチに半分重なるように配置 */
.next-btn {
  right: 0;
  transform: translate(50%, -50%); /* 元の50%上にずらす動きに加えて、右に半分はみ出させる */
}

/*コースここまで*/

/*レンタルオプション*/
.option{
  margin-bottom: 8%;
}

.option-image{
  width: 13%;
  height: auto;
  position: relative;
  left: 80%;
}

.rentaloption {
  width: 80%;
  border-collapse: collapse; /* 線を一本にまとめる */
  margin: 30px auto;  
}

.rentaloption td {
  padding: 20px 20px;           /* 上下の余白（左右は0でOK） */
  border-bottom: 1px solid #595959; /* 下線を引く */
  font-size: 16px;
  display: flex;
  justify-content: space-between; /* 左と右に振り分ける */
  align-items: center;
}

.rentaloption td p {
  margin: 0;
}

/* 1行目だけ、上にも線を引く（画像のように囲む場合） */
.rentaloption tr:first-child td {
  border-top: 1px solid #595959;
}

/* 左側のマス（アイテム名）の設定 */
.option-name {
  text-align: left;
  color: #595959;
}

/* 右側のマス（価格）の設定 */
.option-price {
  text-align: right;
  color: #595959; 
}

/*レンタルオプションここまで*/


/* QA */
.faq {
  /* background-image: url(../images/qa__bg.jpg);
  background-size: cover; */
  padding-bottom: 30px;
  width: 90%;
  max-width: 1000px;
  margin: auto;
}
.faq__title {
  padding-bottom: 20px;
}
.faq__toggle-contents {
  margin-bottom: 3px;
  padding: 0 10px;
}
.faq__toggle-title {
  position: relative;
  cursor: pointer;
  padding: 16px;
  margin-bottom: 10px;
  background: #f7f3eb;
  color: #595959;
  border-radius: 4px;
  font-size: 18px;
}
.faq__toggle-btn {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  display: block;
  width: 24px;
  height: 24px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}
.faq__toggle-btn:before,
.faq__toggle-btn:after {
  display: block;
  content: "";
  background-color: #595959;
  position: absolute;
  width: 10px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq__toggle-btn:before {
  width: 2px;
  height: 10px;
}
.faq__toggle-title.selected .faq__toggle-btn:before {
  content: normal;
}
.faq__toggle-contents dd {
  display: none;
  background: #fff;
  font-size: 14px;
  padding: 10px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.faq-image1 {
  width: 15%;
  height: auto;
  position: relative;
  left: 40px;
  top: 110px;
  transform: translate(-50%, -50%);
}

.faq-image2 {
  width: 15%;
  height: auto;
  position: relative;
  left: 90%;
  margin-bottom: -7%;
  margin-top: -30px;
  transform: translate(-50%, -50%);
}


/*FAQここまで*/

/*セクションスライダー*/
.access-section{
  position: relative;
  width: 100%; /* 必要に応じて調整 */
  height: auto;
  overflow: hidden; /* スライダーがはみ出る場合の保険 */
}

.access-image{
  display: block;
  z-index: 1;
  margin-top: 10%;
}
.slider-wrapper {
  position: absolute;
  top: 75%;
  left: 0;
  transform: translateY(-50%);
  z-index: 100;
  width: 100%;
  display: flex; /* slider同士を横並びに */
  overflow: hidden; 
}

.slider {
  display: flex;
  flex-shrink: 0; /* PC画面でもスライダーが圧縮されないようにする重要設定 */
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scroll-left 40s infinite linear; /* 画像が大きい場合は少し時間を伸ばすと綺麗です */
}

.slide {
  flex-shrink: 0; /* スライドの中身を縮ませない */
  padding: 0 10px; /* 画像同士の隙間を調整 */
}

.slide img {
  display: block;
  width: auto;      /* 横幅を自動（元のサイズ）に */
  height: 50%;     /* 高さを自動（元のサイズ）に */
  max-width: none;  /* 他のCSSでmax-widthが効いている場合の対策 */
  margin-top: 40px;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*======*/


/*アクセス*/
.access{
  background-color: #f7f3eb;

}

.map-container {
  display: flex;
  flex-direction: column; /* ★基本は「縦並び」 */
  align-items: center;    /* 中央に寄せる */
  gap: 30px;              /* 文字ブロックと地図の間の隙間 */
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
}

.access-content {
  display: flex;
  flex-direction: column;
  align-items: center;    /* 中身（タイトルやテキスト）を中央に */
  text-align: center;
  width: 100%;
}

/* 文章の箱：左揃えにしつつ、箱ごと中央に置く */
.access-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ★中身（p）を左に寄せる */
  width: fit-content;      /* 箱の幅を文字の長さに合わせる */
  margin: 0 auto 20px;     /* 左右autoで箱ごと中央へ */
}

.access-text p {
  text-align: left;        /* 行内の文字を左揃え */
  margin: 0;
  line-height: 1.8;
  color: #595959;
}

.access-map {
  width: 85%;
  height: auto;
  border: #B28610 solid 2px;
  margin-bottom: 3%;
}

.access-map iframe {
  width: 100% !important;  /* スマホでは横幅いっぱい */
  height: auto;
  aspect-ratio: 4 / 3;     /* 地図の比率を維持 */
}


/*ボタン輝かせる*/
.shine-btn {
    display: block;	/* ボタンの表示形式は block にしておく */
    background: green;	/* ボタン背景色の指定 */
    margin: 1.5em auto;	/* 上下に1emの余白, 左右は中央揃えにするために auto */
    text-align: center;	/* ボタン内の文字列を中央表示*/
    width: 350px;	/* ボタンの横幅を目いっぱいに伸ばす */
    height: 80px;	/* でもボタンの最大幅は500pxに制限 */
    border-radius: 100px;	/* ボタンの角に丸みを持たせる */
}

.line-btn {
    display: block;	/* リンクの表示形式は block にしておく */
    padding: 1em;	/* 上下左右に1文字分の余白を設ける */
    width: 100%;	/* 横幅をボタンの横幅いっぱいにしておく */
    color: #fefefe;	/* 文字色を白色に指定*/
    text-decoration: none;	/* リンクの下線は非表示 */
    position: relative;
    overflow: hidden; /* はみ出た光を隠す */
}
/* 親要素の調整（光がはみ出さないようにする） */
.shine-btn a {
  position: relative;
  overflow: hidden; /* これが重要：はみ出た光を隠します */
  display: inline-block; /* サイズを正しく適用させるため */
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

/* 光の要素を作成 */
.shine-btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* スタート位置を左側に隠す */
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); /* 斜めにする */
  animation: shine 3s infinite; /* 3秒ごとに無限ループ */
}

/* アニメーションの動き */
@keyframes shine {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/*アクセスここまで*/

/*WEB予約*/
.WEBreservation{
  background-image: url(../images/予約背景.jpeg);
   background-size: cover; 
   background-color: #595959;
   background-blend-mode: multiply;
   overflow: hidden;
}

.shop-name{
  font-size: 20px;
  font-weight: bold;
}

.reservation-text{
  margin: 4% 0;
  text-align: center;
  font-size:  16px;    /* ボタンの文字サイズ */
  color: #fff;        /* ボタンの文字色 */  
  line-height: 1.6;
}

.reserve-btn-2{ 
  margin: 10px auto 40px; /* 上下の距離と中央寄せ */
  background: linear-gradient(to right, #31cadd, #91cac4, #bec2ae); /* ボタンの背景色 */
  border: none;       /* ボタンの枠線を消す */
  border-radius: 50px; /* ボタンの角を丸くする */
  width: 250px;
  height: 60px;
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color:#fefefe;
  text-align: center;
  font-size: 15px;
 }

  .reserve-btn-2:hover{
  transform: scale(1.05); /* 1.05倍に大きくする */
  cursor: pointer;
 }

 
/*WEB予約ここまで*/

/*フッター*/

.footer-text-box{
  display: block;
  align-items: center;  /* 上下中央で揃える（お好みで flex-start に変更可） */
  margin: 0 auto;
 text-align: center;
}

.footer-text{
  margin-bottom: 10px;
}

.footer-h1{
  font-size:32px;
  font-weight: Bold;
  margin-top: 40px;
}

.sb-tittle{
  font-size: 18px;
}

.SNS-icon{
  width: 150px;
  height: auto;
  gap: 20px;
  display: flex;
  margin: 30px auto;
}


.footer-access{
  line-height: 1.5;
}
/*フッター追加ここまで*/


@media screen and (min-width: 750px) {
  .faq {
    padding-bottom: 5%;
  }
  
  .faq__toggle-btn:before {
    height: 15px;
  }
  .faq__toggle-btn:after {
    width: 15px;
  }
  .faq__toggle-contents dd {
    font-size: 16px;
    padding: 20px;
  }
/* QA ここまで */
/* ============================================ */

}


/* footer */
/* ============================================ */
footer {
  display: block;
  padding-top: 10px;
  background: #98ded7;
}
ul {
  list-style: none;
}
.footer_nav {
  text-align: center;
  padding: 16px;
}
.footer_nav li{
  align-items: center;
  font-size: 13px;
  margin-bottom: 10px;
}
.footer_nav li a {
  text-decoration: none;
  padding: 0 10px 0 0;
  color: #000;
}
.footer_nav li:last-child {
  border: none;
}

footer .copyright {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  padding-bottom: 10px;
}

/* footer ここまで */
/* ============================================ */


/* タブレット */
/* ============================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.fv-wrapper{
  position: relative;
  display: block;
  height: 700px;
  width: 100%;
}

.fv{
    display: block; /* 縦並びを解除して、自由配置（absolute）を有効にする */
    height: 700px;  /* デザインに合わせた高さを確保 */
  }

.FV{
    position: absolute;
    top: 22%;
    left: 47%;
    width: auto;
    height: 70%;
    z-index: 1;
  }

.fv__title {
    position: absolute;
    top:2%;
    left: 25%;
    width: 500px;
    height: auto;
    z-index: 100;
  }
  
.circle-container {
    position: absolute;
    top: 60%;
    left: 7%;
    display: flex; /* ここで横並びにする */
    z-index: 101;
  }

.circle1, .circle2, .circle3 {
  width: 135px;          /* 丸の幅 */
  height: 135px;         /* 丸の高さ */
  margin-right: -20px;
}

.catch-copy {
    position: absolute;
    top: 35%;
    left: 10%;
    text-align: left;
    color: #B28610;
    font-size: 32px;
    z-index:102;
}

.reserve-btn{
  display: none;}

/*コンセプト*/
.concept-wrapper{
  position: relative;
  display: block;
  width: 100%;
}

.CONCEPT{
  display: flex;
}

.concept-img1{
  position: absolute;
  z-index: 102; /*　圧倒的に手前！ */
  max-width: 20%;
  height: auto;
  top: -5%;
  left: 5%;
}

.concept-img2{
  position: absolute;
  z-index: 100; /*　圧倒的に手前！ */
  right: 1%;
  width: 150px;
  top: 20%;/* 画像の位置を調整（必要に応じて変更） */
}

.concept-img3{
  position: absolute;
  z-index: 1;
  right: 10%;
  width: 100px; /* 画像の最大幅を設定 */
  top: 60%;/* 画像の位置を調整（必要に応じて変更） */
}

.honnbun{
  width: 50%;
}

/*魅力*/
.miryoku-table__item{
  width: 125px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.miryoku-image2{
  width: 20%;
  left: 15vw;
}
.miryoku-image3{
  width: 13%;
  right: 8vw;
}

.message-container{
  margin: 30px auto 30px auto;
}

/*コース*/
.courese-image{
  left: 10%;
}

/*FAQ*/
.faq {
  width: 80%;
}
.faq__toggle-contents{
  padding: 0;
}


.access-image{
  display: block;
  z-index: 1;
  margin-top: 2%;
}
.slide img {
  display: block;
  width: auto;      /* 横幅を自動（元のサイズ）に */
  height: 75%;     /* 高さを自動（元のサイズ）に */
  max-width: none;  /* 他のCSSでmax-widthが効いている場合の対策 */
  margin-top: 10px;
}


/*アクセス*/  
  .map-container {
    flex-direction: row;   /* ★横並びに切り替え */
    justify-content: center;
    gap: 60px;             /* PCでは隙間を広げる */
  }

  .access-content, 
  .access-map {
    flex: 1;               /* 左右で50%ずつ分け合う */
    max-width: 500px;      /* 広がりすぎ防止 */
  }

  /* PCでは地図を少し大きく見せる調整も可能 */
  .access-map iframe {
    height: 350px;         /* 高さを固定してもOK */
  }

}




/* タブレット ここまで */
/* ============================================ */

/* PC */
/* ============================================ */
@media screen and (min-width: 1024px){
  
  /* ハンバーガーメニューを非表示 */
  .g-menu__hamburger {
    display: none;
  }
  
  .g-menu__nav {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    padding-top: 0;
    transform: translateX(0);
    overflow-y: visible;
    display: none;
  }
  
  .g-menu__list {
    flex-direction: row;
    padding: 0;
  }
  
  .g-menu__item {
    margin-bottom: 0;
    margin-left: 30px;
    text-align: left;
  }
  
  .g-menu__item:first-child {
    margin-left: 0;
  }


/*タイトルPC*/

.concept-title{
  font-size: 50px;
}

.concept-title1{
  font-size: 50px;
}

.courese-title{
  font-size: 50px;
}

.option-title{
  font-size: 50px;
}

.access-title{
  font-size: 50px;
}

.WEBrese-title{
  font-size: 50px;
}

  .PConly-btn {
    display: flex !important;
    align-items: center;
    margin-left: auto;   /* 左側の余白を最大にする */
    margin-right: 0;
  }
/*==============================================*/

/*FV*/
.reserve-btn{
    display: none;
  }

.fv-wrapper{
  position: relative;
  display: block;
  height: 700px;
  width: 100%;
}

.fv{
    display: block; /* 縦並びを解除して、自由配置（absolute）を有効にする */
    height: 700px;  /* デザインに合わせた高さを確保 */
  }

.FV{
    position: absolute;
    top: 3%;
    left: 40%;
    width: 420px;
    height: auto;
    z-index: 1;
  }

.fv__title {
    position: absolute;
    top: 25%;
    left: 5%;
    width: 450px;
    height: auto;
    z-index: 100;
  }
  
.catch-copy {
    position: absolute;
    top: 45%;
    right: 1%;
    text-align: left;
    color: #B28610;
    font-size: 32px;
    z-index:102;
  }

.circle-container {
    position: absolute;
    top: 55%;
    left: 8%;
    display: flex; /* ここで横並びにする */
    z-index: 101;
  }

.circle1, .circle2, .circle3 {
  width: 135px;          /* 丸の幅 */
  height: 135px;         /* 丸の高さ */
  margin-right: -20px;
  font-size: 16px;
}

/*==============================================*/
.concept-wrapper{
  position: relative;
  display: block;
  width: 100%;
}

.CONCEPT{
  display: flex;
}

.concept-img1{
  position: absolute;
  z-index: 101; /*　圧倒的に手前！ */
  width: 200px;
  height: auto;
  top: -10px;
  left: 5%;
}

.concept-img2{
  position: absolute;
  z-index: 100; /*　圧倒的に手前！ */
  right: 1%;
  width: 150px; /* 画像の最大幅を設定 */
  top: 1%;/* 画像の位置を調整（必要に応じて変更） */
}

.concept-img3{
  position: absolute;
  z-index: 1;
  right:5%;
  top: 67%;
  max-width: 100px; /* 画像の最大幅を設定 */
  height: auto;
}

.message-container{
  margin: 30px auto 30px auto;
}

.honnbun{
  width: 50%;
}

/*==============================================*/

/*魅力*/
.miryoku{
  position: relative;   /* アイコンの位置計算の基準にする */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;      /* セクション全体を中央に配置 */
}

.concept-group1{
  margin-top: -5%;
}


.miryoku-image2{
  position: absolute;
  z-index: 100;
  width: 15%;
  left: 200px;
  top: 50px;
}

.miryoku-image3{
  width: 10%;
}

.border-text1{
  font-size: 20px;
}

  /* 一旦、全ての線の指定をリセットする（これが重要！） */
  .miryoku-table {
    display: grid ;
    /* 1. 横3列（33.3%ずつ）に設定 */
    grid-template-columns: repeat(3, 1fr); 
    /* 2. 幅を80%にして中央寄せ */
    width: 80% ;
    margin: 3% auto;
    /* 3. 外枠を完全に消す */
    border: none;
    border-collapse: collapse;
  }

  html body .o-wrapper .miryoku-table tr td {
    border: none !important;
  }

  /* 2. 【縦線】3列目（3n）以外に右線を引く */
  html body .o-wrapper .miryoku-table tr td:not(:nth-child(3n)) {
    border-right: 1px solid #2b2b2b !important;
  }

  /* 3. 【横線】2行目（最後の3つ）以外に下線を引く */
  /* 合計6つの要素がある場合、1, 2, 3番目にだけ下線がつきます */
  html body .o-wrapper .miryoku-table tr td:nth-last-child(n+4) {
    border-bottom: 1px solid #2b2b2b !important;
  }

  /*=====================================================*/

/*コース　横並べにする*/
  /* 1. カルーセルを包むコンテナの余白をリセット */
  .carousel-container {
    padding: 0;
  }

  /* 2. テーブル要素を「普通の横並び（Flexbox）」に変更 */
  .COURESE-table {
    display: block;
    width: 100%;
    overflow: visible; /* はみ出しを隠さない（すべて表示する） */
  }

  .COURESE-1 {
    display: flex;
    justify-content: center; /* 3つのカードを均等に並べる */
  }

  /* 3. 各カード（td）の横幅を3等分にする */
  .COURESE-1 td {
    flex: 1; /* 均等な幅で横並びにする */
    max-width: calc(33.333% - 14px); /* gapの分を考慮して綺麗に収める */
    padding: 10px; /* PC用の余白調整 */
  }

  /* 4. 【重要】PCでは「前へ」「次へ」のボタンを非表示にする */
  .carousel-btn {
    display: none !important;
  }

.couresename{
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
  word-break: keep-all;
  font-feature-settings: "palt";
  line-height: 1;
}

.couresecontent{
  font-size: 16px;
  margin-left: 0;
  font-feature-settings: "normal";
  line-height: 1.8;
}

.sort{
font-size: 14px;
margin: 5% 0;
}

.courese{
  padding-top: 3%;
}

.courese-image{
  width: 8%;
  top:-100px;
}


/*オプション*/
.option{
  margin-bottom: 10%;
}
.option-image{
  width: 10%;
  height: auto;
  position: relative;
  left: 80%;
}

/*FAQ*/
.faq {
  width: 90%;
}
.faq__toggle-contents{
  padding: 0;
}

.faq-image1{
  width: 10%;
  left: 10%;
  margin-top: -8%;
  
}


.faq-image2 {
  width: 10%;
  margin-bottom: -50px;
}

/*セクションスライダー*/
.access-image{
  display: block;
  z-index: 1;
  margin-top: 2%;
  height: 200%;

}

.slide img {
  display: block;
  width: 100%;      /* 横幅を自動（元のサイズ）に */
  height:  85%;
  margin-top: 5px;
}

/*アクセス*/  
  .map-container {
    flex-direction: row;   /* ★横並びに切り替え */
    justify-content: center;
    gap: 60px;             /* PCでは隙間を広げる */
  }

  .access-content, 
  .access-map {
    flex: 1;               /* 左右で50%ずつ分け合う */
    max-width: 500px;      /* 広がりすぎ防止 */
  }

  /* PCでは地図を少し大きく見せる調整も可能 */
  .access-map iframe {
    height: 350px;         /* 高さを固定してもOK */
  }


/**/
.reserve-btn-2{ 
  margin: 10px auto 50px; /* 上下の距離と中央寄せ */
  background: linear-gradient(to right, #31cadd, #91cac4, #bec2ae); /* ボタンの背景色 */
  border: none;       /* ボタンの枠線を消す */
  border-radius: 50px; /* ボタンの角を丸くする */
  width: 400px;
  height: 70px;
  display: flex;         /* 中の文字を中央に寄せるため */
  align-items: center;
  justify-content: center;
  color:#fefefe;
  text-align: center;
  font-size: 20px;
 }

  .reserve-btn-2:hover{
  transform: scale(1.05); /* 1.05倍に大きくする */
  cursor: pointer;
 }


  /* フッターナビゲーション */
  .footer_nav {
    display: flex;
    justify-content: center; /* 中央寄せ */
    text-align: left;
    padding: 16px;
  }
  
  .footer_nav li {
    margin-bottom: 0;
    margin-right: 20px; /* 項目間の間隔 */
  }
  
  .footer_nav li:last-child {
    margin-right: 0;
  }


.access-map iframe {
  width: 100%;          /* 親の400pxいっぱいに広げる */
 
}

.access-content {
  flex: 1;   
}

/*WEB予約*/


.reservation-text{
  font-size: 24px;    /* ボタンの文字サイズ */
  line-height: 1.8;

}


/*フッター*/
.footer-text-box{
  display: block;
  margin: 0 0 0 10%;
  text-align: left;
}

.footer-text{
  margin-bottom: 20px;

}

.footer-access{
  line-height: 1.8;
}
.footer-h1{
  font-size:50px;
  font-style: bold;
  margin-bottom: 1%;
}

.sb-tittle{
  font-size: 16px;
  margin: -5% 0 0 45%;
}
}

/* PC ここまで */