body {
  margin: 0;
  padding: 0;
  color: #333333;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  background-color: #ffffff;
  font-weight: 500;
}

a, a:visited, a:hover, a:active, a:focus {
  text-decoration: none; /* 下線を削除 */

}

.campaign-text {
  color: #000000; /* 白い文字 */
  text-align: center;
  font-size: 25px; /* 大きなフォントサイズ */
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
}

.campaign-highlight{
  font-size: 50px;
  color: #ff5e5e;
}

@media screen and (min-width: 769px) {
  .sp-only-br {
      display: none; /* PC版では改行を表示しない */
  }
}


.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 0 auto;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PCサイズ用スタイル */
@media (min-width: 769px) {
  .video-container {
    max-width: 512px;
    margin: 20px auto;
    padding-bottom: 385px;
  }
}

/* SP版用スタイル */
@media (max-width: 768px) {
  .video-container {
      padding-bottom: 56.25%; /* 16:9 ratio */
      margin: 15px;
  }

  .campaign-text {
    color: #000000; /* 白い文字 */
    text-align: center;
    font-size: 20px; /* 大きなフォントサイズ */
  }
  
  .campaign-highlight{
    font-size: 40px;
  }
  
}

.grecaptcha-badge { visibility: hidden; }

/* フェードイン */
.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}

.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左へフェードイン */
@keyframes fadeInRightToLeft {
  from {
      transform: translateX(10%); /* ここで移動距離を調整 */
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

/* アニメーションを適用するクラス */
.slide-in {
  animation-duration: 1s; /* アニメーションの持続時間 */
  animation-fill-mode: both; /* アニメーション終了時の状態を維持 */
  visibility: hidden; /* 初期状態では非表示 */
}

/* スクロールで表示されたときに適用するクラス */
.slide-in.visible {
  visibility: visible;
  animation-name: fadeInRightToLeft;
}


/* アニメーションを適用するクラス */
.scale-up {
  opacity: 0; /* 初期状態では不透明度を0に */
  transform: scale(0.8); /* 初期状態では少し小さく */
  transition: opacity 0.5s, transform 0.5s; /* トランジションの設定 */
}

/* スクロールで表示されたときに適用するクラス */
.scale-up.visible {
  opacity: 1;
  transform: scale(1);
}


.fixed-banner {
  position: fixed; /* バナーを固定位置にします */
  z-index: 999; /* コンテンツの上に表示されるようにz-indexを高く設定します */
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0; /* マージンをリセットします */
  padding: 0; /* パディングをリセットします */
  background-color: rgba(183, 110, 121, 0.8); /* 背景色に透明度を持たせます */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px; /* 内側に余白を追加します */
  box-sizing: border-box;
}

.banner-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.promo-text {
  color: #fff;
  font-size: 16px;
  margin-right: 40px;
}

.promo-button {
  background-color: #fff;
  color: #B76E79;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.promo-button:hover {
  background-color: #B76E79;
  color: #fff;
}

@media (max-width: 768px) {

  .fixed-banner{
    padding: 20px 10px;
  }

  .promo-text {
    font-size: 13px;
    margin-right: 10px;
  }
  
  .promo-button {
    padding: 8px 16px;
    font-size: 12px;
  }
}

.fixed-banner:hover {
  opacity: 0.9;
}


.storebar {
  width: 100%;
  height: auto;
}

/* SP用のスタイル */
@media screen and (max-width: 767px) {
  .storebar {
    content: url(../img/sp-storebar.webp);
    padding: 0px 10px 10px;
    margin-top: -10px;
  }
}

/* PC用のスタイル */
@media screen and (min-width: 768px) {
  .storebar {
      content: url('../img/pc-storebar.png');
      max-width: 1060px;
      margin: -41px auto 0;
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-image: linear-gradient(150deg, rgba(255, 227, 185, 1), rgba(183, 110, 121, 1) 84%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

.main-content {
  position: relative;
  z-index: 3;
 
  width: 100%;
  
  transition: opacity 1s ease-in-out;
  overflow: hidden;
}

.champain-catch{
  width: auto;
  margin: auto;
  margin-top: 70px;
}

/* ヘッダーのスタイル */
/* 既存のPC版スタイル */

.logo-link{
  
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #E0E0E0;
}

.logo-link {
  display: flex;
  align-items: center;
  margin-right: auto;
  max-width: 80px;
}

nav {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px 10px 7px;
}

.menu-container {
  display: flex;
  align-items: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  margin: 0;
}

nav li {
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%; /* Make sure li takes full width */
}

nav a {
  text-decoration: none;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: color 0.3s, background-color 0.3s;
  height: 100%;
  width: 100%; /* Make sure a takes full width */
}

.menu-arrow {
  display: none;
}

nav a:hover {
  color: #B76E79;
  background-color: rgba(255, 255, 255, 0.2);
}

.catchphrase {
  font-size: 12px;
  color: #333;
  padding-left: 25px;
  text-wrap: nowrap;
}

.contact-button {
  background-color: #ff3131;
  color: #FFFFFF;
  padding: 20px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.top-menu-flex {
  display: flex;
}

.contact-button:hover {
  background-color: darken(#ff3131, 10%);
}

.reservation-button {
  display: inline-block;
  text-align: center;
  padding: 10px 17px;
  background-color: #ff3131;
  color: white;
  text-decoration: none;
  font-weight: 400;
  transition: background-color 0.3s;
}

.reservation-button i {
  display: block;
  font-size: 24px;
  margin-bottom: 5px;
}

.reservation-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.hamburger {
  display: none;
  cursor: pointer;
  margin-top: 6px;
  margin-left: 15px;
  text-align: -webkit-center;
  z-index: 2000;
}

.menu-text {
  font-size: 12px;
  margin-top: 5px;
}

.logo-link img {
  /* その他のスタイリング */
}

.bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 0 0 5px 0;
  background-color: #a35c5c;
}

nav ul.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s ease, visibility 0s, opacity 0.5s ease;
}

nav li {
  width: 100%;
  border-bottom: 1px solid #ddd;
}

nav a {
  color: #333;
  font-size: .9em;
  transition: color 0.3s;
}

nav a:hover {
  color: #B76E79;
}

.contact-button {
  background-color: #B76E79;
  padding: 20px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.contact-button:hover {
  background-color: #9e564a;
}

nav ul.show .close-button {
  display: block;
}

nav li:last-child {
  border-bottom: none;
}
nav a .menu-arrow{
  display: none;
}

.calender-icon {
  width: 45px;
  height: auto;
  margin-left: 7px;
  margin-bottom: 5px;
}



@media (max-width: 768px) {

  .champain-catch {
    max-width: 340px;
    margin: auto;
    margin-top: 20px;
    height: auto;
}


  .calender-icon {
    width: 35px;
  }
}

@media (max-width: 768px) {
  .catchphrase {
    font-size: 11px;
    color: #333;
    padding-left: 15px;
    text-wrap: nowrap;
  }
  .fa-chevron-right:before {
    display: block;
  }
  .reserve-sp-menu {
    background-color: rgb(229 163 173);
  }
  .reserve-sp-menu-text {
    color: #fff;
  }

  nav a .menu-arrow {
    margin-left: auto;
    position: absolute;
    right: 15px;
    top: 24px;
    display: block;
  }

  .logo-link {
    max-width: 55px;
  }

  nav ul {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 70px !important;
    right: 0;
    height: calc(100% - 70px);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.5s ease, visibility 0s 0.5s, opacity 0.5s ease;
  }

  nav {
    height: 70px;
    padding: 10px 20px;
  }

  .reservation-button {
    padding: 6px 11px;
  }

  .menu-arrow {
    display: inline;
  }
}

@media (min-width: 1280px) {
  .sp-none {
    display: none;
  }

  
  nav a {
    padding: 10px 15px 10px;
  }


  .reserve-sp-menu {
    display: none;
  }

  .menu-arrow {
    display: none;
  }
}

@media (max-width: 1279px) {
  .hamburger {
    display: block;
  }

  .text-sp-color{
    color: #fff;
  }
  .reserve-sp-menu {
    background-color: rgb(229 163 173);
  }
  .reserve-sp-menu-text {
    color: #fff;
    align-content: center;
  }
  .menu-none {
    display: none;
  }

  nav ul {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 90px;
    right: 0;
    height: calc(100% - 90px);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.5s ease, visibility 0s 0.5s, opacity 0.5s ease;
  }

  nav ul.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.5s ease, visibility 0s, opacity 0.5s ease;
  }

  nav li {
    width: 100%;
    border-bottom: 1px solid #ddd;
    background-color: #f8f8f8;
    padding: 21.5px 15px;
  }

  .reservation-button {
    font-size: 12px;
  }

  nav a {
    display: block;
    color: #333;
    font-size: 15px;
    align-content: center;
    
    transition: color 0.3s;
  }

  nav a:hover {
    color: #B76E79;
  }
}

@media (min-width: 1280px) {
  nav ul {
    visibility: visible;
    opacity: 1;
    margin-right: 10px;
    position: static;
    flex-direction: row;
    transform: none;
    transition: none;
    align-self: center;
  }

  nav li {
    width: auto;
    margin: 0 5px;
    padding: 0;
    border-bottom: none;
  }

  .hamburger {
    display: none;
  }

  .menu-arrow {
    display: none;
  }

  .reservation-button-container {
    margin-left: auto;
  }
}


/* ディスプレイ広告用--------------------------------------- */
.campaign-container {
  position: relative;
  width: 100%;
  text-align: center;
}

#countdown {
  display: flex;
  justify-content: center;
  gap: 4vw; /* ビューウィンドウの幅に対してギャップを設定 */
  position: absolute;
  top: 20%; /* バナーの上部から20%の位置に配置 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1; /* 画像の上に表示 */
}
@media (min-width: 1390px) {
  #countdown {
    gap: 54px;
  }
  
}


.time-box {
  text-align: center;
  width: 60px; /* 固定幅を設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 1390px) {
  .time-box {
    width: 4vw;
  }
  
}


.time-box span {
  display: block;
  font-family: "Fraunces", serif;
  font-size: clamp(16px, 3.5vw, 48.65px);
  font-weight: bold; /* 数字を太字にする */
  color: #000000; /* 数字の色を背景色と同じにする */
  width: 100%; /* 数字の幅を固定 */
  text-align: center; /* 数字を中央揃えに */
}

.colon {
  font-family: "Fraunces", serif;
  font-size: clamp(16px, 3.5vw, 48.65px);
  font-weight: bold; /* コロンを太字に */
  color: #000000; /* コロンの色を背景色と同じに */
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  #countdown {
      top: 10%; /* スマートフォンでは位置を調整 */
      margin-top: 13vw;
        gap: 1.8vw;
  }
  .time-box {
      padding: 10px 5px; /* スマートフォンではパディングを調整 */
      width: 8vw; /* 固定幅をスマートフォンに合わせて調整 */
  }
  .time-box span {
      font-size: 20px; /* スマートフォンでは数字のフォントサイズを調整 */
  }
  .time-box span, .colon {
      font-size: 5.5vw; /* スマートフォンでは数字とコロンのフォントサイズを調整 */
  }
}

.ad-container {
  width: 100%;
  position: relative;
}

.ad-banner {
  width: 100%;
  height: auto;
  display: none; /* すべてのバナーを初期状態で非表示に */
}

/* PC用のバナー */
@media screen and (min-width: 768px) {
  .ad-banner.pc {
      display: block; /* PC用バナーを表示 */
      padding: 0 20px;
      max-width: 1380px;
      margin: auto;
  }
}

/* スマートフォン用のバナー */
@media screen and (max-width: 767px) {
  .ad-banner.pc {
      display: none; /* PC用バナーを非表示 */
  }
  .ad-banner.sp {
      display: block; /* スマートフォン用バナーを表示 */
      padding: 7px;
  }
}


/* 張り付きメニュー */
.sticky-menu {
  position: fixed;
  top: 30%; /* ウィンドウ上部からの位置を調整 */
  left: 0;
  
  border-right: 1px solid #ddd;
  padding: 10px 0;
  z-index: 999; /* 他の要素より上に表示されないように調整。必要に応じてこの値を変更 */
}

.sticky-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sticky-menu li {
  margin-bottom: 10px;
  text-align: center; /* テキストを中央揃えにする */
  transform: rotate(-10deg); /* メニュー項目を斜めに傾ける */
  transition: transform 0.3s; /* アニメーションの速さを設定 */
}

.sticky-menu a {
  text-decoration: none;
  color: #333;
  padding: 5px 20px;
  display: block;
}

.sticky-menu li:hover {
  transform: rotate(0deg) translateY(-10px); /* 傾きを0度に戻して、上に10px移動させる */
}

.sticky-menu a:hover {
  background-color: #D88A92;
  color: #fff;
}

.hidden {
  display: none;
}

.contact-button {
  background-color: #ff3131;
  border-radius: 5px; /* ボタンの角を丸める */
}

.contact-button:hover {
  background-color: #b92b2b; /* ホバー時の背景色を少し暗く */
}


/* First View Styles -------------------------------------------------------------------*/
.first-view {
  background-image: url('../img/TOP.webp');
  background-size: cover;
  padding-left: 5%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    margin-top: 90px;
    height: 55vw; /* ビューポートの高さいっぱい */
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: flex-start; /* 子要素を左端に配置 */
    justify-content: flex-start; /* 左隅に配置 */
    
    /* font-family: 'Noto Serif JP', serif; */
}

.view-content {
  
  margin-top: 16vh;
  padding: 30px 50px; /* より大きな内側の余白を設定 */
  display: flex;
  align-self: center;
}

.text-content h1 {
  letter-spacing: 0.15em;
  line-height: 1.8em;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 5px 3px 4px rgb(67 67 67 / 17%);
}

.title-section01 {
  font-size: 3.3vw;
  line-height: 2.4em;

}
.title-section02 {
  font-size: 2vw;
  line-height: 1.8em;
  font-weight: 500;

}

.feature-flex {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 48%;
}

.text-content p {
  font-size: 1.5em; /* テキストサイズを大きく */
  margin: 0;
  margin-bottom: 10px; /* 下部の余白を増やす */
  color: #ffffff;
}

.logo {
  margin-left: 50px;
  max-width: 200px; /* ロゴのサイズを大きく */
  height: auto;
}

.features {
  display: flex; /* 子要素を横並びにする */
  margin-top: 10px;
  align-items: center; /* 上下中央に配置 */
  gap: 5px;
}

.main-logo {
  max-width: 100px; /* ロゴの最大幅を指定 */
  height: auto;
  margin-left: 40px;
}

.main-satisfy{
  max-width: 160px; /* ロゴの最大幅を指定 */
  height: auto;
}

.feature-text {
  background-color: rgba(0, 0, 0, 0.8); /* 黒背景透明度80% */
  padding: 10px 20px;
  border-radius: 5px; /* 角を少し丸める */
  flex: 1; /* 各テキストアイテムが均等な幅を取るようにする */
  text-align: center; /* テキストを中央揃えにする */
}

.feature-text p {
  margin: 0;
  color: #ffffff; /* 文字色を白に設定 */
  white-space: nowrap;
}

/* 既存のスタイルはそのまま */

/* スマートフォン向けのスタイル */
@media screen and (max-width: 768px) {
  .first-view {
    height: auto; /* 自動高さ調整 */
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 0;
    height: 100vh;
    background-image: url(../img/sp-top.png);
  }

  .view-content {
    flex-direction: column; /* 縦方向に配置 */
    margin-top: 15.5vh; /* マージンを縮小 */
    padding: 20px; /* 内側の余白を縮小 */
  }

  .text-content h1 {
    font-size: 4.5vw;
    line-height: 1.5em; /* 行の高さを縮小 */
    margin-bottom: 0px;
  }

  .title-section01 {
    font-size: 7vw;
    line-height: 2.2em;
  }

  .title-section02 {
    font-size: 1.25em;
    line-height: 1.4em;
    font-weight: 600;
  }

  .text-content p {
    font-size: 1.2em; /* テキストサイズを縮小 */
  }

  .main-logo {
    max-width: 80px; /* ロゴの最大幅を縮小 */
    margin-left: 0;
    margin-top: 20px; /* ロゴの上部マージン */
  }

  .features {
    
  }

  .feature-flex{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    width: 100%;
  }

  .feature-text {
    flex: none; /* フレックスを無効にする */
    width: calc(50% - 5px); /* 幅を50%に調整し、間隔を考慮して引き算 */
    padding: 5px;
    box-sizing: border-box; /* パディングやボーダーを含む幅計算 */
  }

  .feature-text p{
    font-size: 3vw;
  }

  .main-satisfy {
    max-width: 90px; /* ロゴの最大幅を縮小 */
    height: auto;
  
  }
}

@media (min-width: 769px) and (max-width: 960px) {

  .first-view {
    background-image: url(../img/sp-top.png);
    background-size: cover;
    padding-left: 5%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 130vh;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* font-family: 'Noto Serif JP', serif; */
}

  .title-section01 {
    font-size: 4.5vw;
  }
  .title-section02 {
    font-size: 4vw;
    
}
}

@media (min-width: 961px){
  .first-view {
    
}
.title-section01{
  font-size: 2em;
  line-height: 2.4em;

}
.title-section02{
  font-size: 1.7em;
  line-height: 1.8em;
  font-weight: 600;
}

}

.tile-menu-container {
  display: none; /* デフォルトでは非表示 */
}

.tile-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #B76E79;
  border-left: solid 1px #B76E79;
}

.tile-li {
  width: calc(100% / 3);
  height: 5.5rem;
  float: left;
  border-right: solid 1px #B76E79;
  border-bottom: solid 1px #B76E79;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tile-sp-grid-item {
  text-decoration: none;
  color: #333;
  text-align: -webkit-center;
}

.tile-sp-grid-item .tile-icon {
  margin-bottom: 5px;
}

.tile-sp-grid-item .tile-icon img {
  width: 40px;
  height: 40px;
}

.tile-sp-grid-item .tile-title {
  font-size: 12px;
  color: #B76E79;
}

@media (max-width: 768px) {
  .tile-menu-container {
      display: block; /* SP版で表示 */
  }
}


/* concept-------------------------------------------------------------------------- */
.pricingBtn {
  width: 400px;
  margin: 60px auto;
}
.pricingBtn a {
  background: #B76E79;
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding: 1.5rem 3rem;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.pricingBtn a::after {
  content: '→';
  position: absolute;
  right: 1.5rem;
  font-size: 1rem;
  color: #fff;
}
a {
  color: #333;
  text-decoration: none;
  transition: all .3s;
}
@media screen and (max-width: 599px) {
  .pricingBtn {
      max-width: 300px;
      width: 100%;
      margin: 0 auto;
  }
  .pricingBtn a {
      padding: 1.2rem 3rem;
  }
  .pricingBtn a::after {
      right: 1rem;
      font-size: 1.2rem;
  }
}

.bodyimage-container {
  text-align: center;
  margin-bottom: 20px; /* テキストと画像の間の余白を調整 */
}

.body-image {
  max-width: 480px;
      display: block;
    margin: 0 auto;
    height: 240px;
    object-fit: cover;
}

/* 共通スタイル */
.toggleBlock {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7px;
}

.toggleItem {
  margin-bottom: 10px;
  overflow: hidden;
}

.toggleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fdedf0;
  cursor: pointer;
}

.toggleImage {
  width: 300px;
  height: 180px;
  object-fit: cover;
}

.toggleText {
  flex-grow: 1;
  margin-left: 80px;
  font-weight: 600;
  font-size: 23px;
  color: #B76E79;
}

.toggleIcon {
  font-size: 3.5rem;
  color: #B76E79;
}

/* SP版のスタイル */
@media (max-width: 768px) {
  .toggleContent {
    display: none;
    padding: 20px;
    background: #fff6f8;
  }

  .toggleContent p {
    margin: 0;
    color: #333;
    font-size: 12px;
    line-height: 1.8em;
  }

  .toggleIcon{
    font-size: 2rem;
    margin-right: 8px;
  }
  .toggleText{
    font-size: 3.3vw;
    margin-left: 10px;
  }

  .toggleImage{
    width: 100px;
    height: 100px;
    object-fit: cover;
  }

}

/* PC版のスタイル */
@media (min-width: 769px) {
  .toggleHeader {
    cursor: default;
  }

  .toggleIcon {
    display: none;
  }


  .toggleContent {
    display: block;
    padding: 30px 35px;
    background: #fff6f8;

  }

  .toggleContent p {
    margin: 0;
    color: #333;
    line-height: 2em;
  }
}



.concept-content {
  padding: 100px 20px;
  text-align: center;
  background-color: #f9f9f9;
}

.highlight {
  font-weight: 600;
  font-size: 2.5em;
  margin-bottom: 50px;
  line-height: 1.5em;
  position: relative;
}

.highlight span {
  color: #B76E79;
  font-size: 1.2em;
  position: relative;
  display: inline-block;
}

.highlight span::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.2em;
  background-color: #B76E79;
  z-index: -1;
  transition: height 0.3s ease;
}

.highlight span:hover::before {
  height: 100%;
}

.special-text-emphasized {
  background-color: #B76E79;
  color: #fff;
  padding: 0.2em 0.5em;
  border-radius: 5px;
  display: inline-block;
  animation: highlightFlash 1.5s infinite;
}

@keyframes highlightFlash {
  0%, 100% {
      background-color: #B76E79;
      color: #fff;
  }
  50% {
      background-color: #fff;
      color: #B76E79;
      border: 2px solid #B76E79;
  }
}

.description {
  line-height: 1.8;
  font-size: 1.1em;
  margin-bottom: 30px;
}

.special-text {
  font-size: 23px;
  font-weight: 600;
  padding: 0.2em 0.5em;
  background-color: #fff5f5;
  border-left: 5px solid #B76E79;
  display: inline-block;
}

.bodyimage-container {
  margin-bottom: 30px;
}

.bodyimage-container img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.highlight-keywords {
  font-size: 1.5em;
  font-weight: bold;
  color: #B76E79;
  margin: 10px 0;
}

.highlight-keywords span {
  display: inline-block;
  font-size: 1.2em;
  background-color: #fff5f5;
  padding: 0.2em 0.5em;
  border-radius: 5px;
  margin: 0 0.2em;
}

@media (max-width: 768px) {
  .highlight, .main-title {
      font-size: 6vw;
      margin-bottom: 40px;
  }

  .concept-content {
    padding: 20px;
  }

  .description {
      line-height: 2;
      font-size: 14px;
      margin-bottom: 20px;
  }

  .special-text {
      font-size: 15px;
  }

  .highlight-keywords {
      font-size: 4vw;
  }

  .highlight-keywords span {
      font-size: 5vw;
  }
}


.image-section {
  display: flex;             /* 子要素を横並びにする */
  justify-content: center;   /* 子要素を中央揃えにする */
  gap: 20px;                 /* 画像間のスペース */
  padding: 30px 0;          /* 上下の余白を設定 */
}

.image-item {
  flex: 1;                   /* 各画像が均等な幅を取るようにする */
  max-width: calc(33.33% - 20px);  /* 3つの画像の合計幅を100%にし、20pxの間隔を考慮する */
  height: auto;
}

.center-image-section {
  display: flex;
  justify-content: center;   /* 画像を中央揃えにする */
  padding: 30px 0;          /* 上下の余白を設定 */
}

.center-image {
  max-width: 80%;           /* 画像の最大幅を設定（必要に応じて変更可能） */
  height: auto;
}


/* こんなお悩みありませんか */
.issue-title p {
  text-align: center;
  font-size: 2rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* ドロップシャドウを追加 */
}

.emphasis-text {
  color: rgb(255 133 133);
  font-size: 3.5rem;
  font-weight: 500;
}

.issues-container {
  display: flex;
  width: 680px;
  justify-content: center; /* 子要素を水平方向に中央揃えにする */
  align-items: flex-start; /* 子要素を垂直方向に上揃えにする */
  background-color: #F9E4D1;
  border-radius: 15px;
  padding: 45px 20px;
  gap: 40px; /* アイテム間のギャップ */
  margin: 20px auto 100px; /* コンテナ全体を中央に配置 */
  position: relative; /* 絶対位置指定された子要素の基準点として機能させる */
}

.issues-container::after {
  content: ''; /* 必須: これがないと疑似要素は表示されない */
  position: absolute;
  top: 10px; /* 点線の位置をコンテナの枠から少し内側に */
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px dashed #ffffff; /* 点線のスタイルを設定 */
  border-radius: 12px; /* コンテナのborder-radiusよりわずかに小さくする */
  pointer-events: none; /* 点線がクリックイベントを捉えないようにする */
}

.issues-list {
  display: flex;
  flex-direction: column; /* 要素を縦一列に並べる */
}

.issue-item {
  display: flex;
  align-items: center; /* アイテムを垂直方向に中央揃えにする */
  margin-bottom: 10px; /* アイテムの下の余白 */
}

.checkbox-image {
  margin-right: 10px; /* チェックボックスとテキストの間の余白 */
  width: 30px; /* チェックボックス画像の幅 */
  height: auto;
}

.issue-text {
  flex: 1; /* テキスト内容が残りのスペースを埋めるようにする */
  font-size: 18px;
  font-weight: 600;
  line-height: 2.5em;
}

.issue-image {
  flex-shrink: 0; /* 画像のサイズがコンテナによって縮小されないようにする */
}

.issue-image-02{
  max-width: 680px;
    margin: auto;
}

.large-image-02{
  width: 100%;
}

.large-image {
  max-width: 290px; /* 大きな画像の最大幅を制限する */
  height: auto; /* 画像の高さを自動で調整する */
}

@media (max-width: 768px) {

  .issue-title p {
      font-size: 1.5rem; /* フォントサイズを小さくする */
  }

  .emphasis-text {
      font-size: 2.5rem; /* 強調テキストのフォントサイズを調整 */
  }

  .issues-container {
      flex-direction: column; /* 要素を縦方向に並べ替える */
      width: max-content;
      padding: 30px; /* パディングを調整 */
      gap: 0px; /* ギャップを小さくする */
      align-items: flex-start; /* コンテナ内の要素を左揃え */
      margin-bottom: 30px;
  }

  .issues-list {
      width: 100%; /* 一覧の幅を100%に設定 */
      display: flex; /* フレックスコンテナに設定 */
      flex-direction: column; /* 縦方向に並べる */
      align-items: flex-start; /* 子要素を左揃えに配置 */
  }

  .issue-item {
      margin-bottom: 15px; /* アイテム間の余白を調整 */
      width: 200px;
      align-self: center;
  }

  .checkbox-image {
      width: 25px; /* チェックボックス画像の幅を調整 */
  }

  .issue-text {
      font-size: 14px; /* テキストのフォントサイズを調整 */
      line-height: 1.8em; /* 行間を調整 */
  }

  .issue-image {
      display: flex;
      justify-content: center; /* 画像を中央に配置 */
      align-self: center;
  }
  
  .large-image {
    max-width: 270px; /* 大きな画像の最大幅を制限する */
    height: auto; /* 画像の高さを自動で調整する */
  }

  .large-image-02 {
    width: 100%;
    padding: 7px;
}
}



/* vip-------------------------------------------------------------------------- */
.vip-section {
 
  padding: 80px 0px 50px 0;

}

.vip-title-bold {
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 10px; /* タイトルの下の余白 */
}

.vip-title-thin {
  font-weight: normal;
  font-weight: 600;
  font-size: 2em;
  margin-bottom: 20px; /* サブタイトルの下の余白 */
}

.vip-subtitle {
  font-weight: light;
  font-size: 20px;
  margin-bottom: 70px;
}

.vip-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px; /* 横の余白を設定 */
}

.vip-features-wrapper {
  display: flex;
  justify-content: center;
  gap: 50px;   /* 3つのvip-featureの間のスペース */
}

.vip-feature {
  flex-basis: calc(33.33% - 40px); /* 3つ分の幅から20px (左右の余白)を引いたもの */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5em;
  width: 250px;
}

.vip-feature img {
  width: 135px; /* 画像のサイズを調整（必要に応じて変更可能） */
  height: auto;
  margin-bottom: 10px;
}

.vip-feature h5 {
  margin-bottom: 10px;
  font-size: 1.5em;
  color: rgb(249 185 195 / 90%);
}

.vip-feature p {
  text-align: center;
  text-wrap: nowrap;
}

.com-image-02{
max-width: 1200px;
margin: auto;
}


@media (max-width: 768px) {
  .vip-section {
      
      padding: 15px 0px;
  }

  .vip-title-bold, .vip-title-thin {
    font-size: 6.5vw; /* タイトルのフォントサイズを調整 */
  }

  .vip-subtitle {
      font-size: 16px; /* サブタイトルのフォントサイズを調整 */
      margin-bottom: 30px; /* 余白を調整 */
  }

  .vip-features-wrapper {
      flex-direction: column; /* 要素を縦に並べる */
      gap: 30px; /* 要素間のギャップを調整 */
  }

  .vip-feature {
      width: 100%; /* 機能の幅を100%にする */
      margin: 0; /* 左右の余白をなくす */
      font-size: 1.2em; /* テキストのフォントサイズを調整 */
  }

  .vip-feature h5{
    font-size: 8vw;
  }

  .vip-feature p{
    font-size: 18px;
  }

  .vip-feature img {
    width: 100px;
  }
}


/* before after */
.interview-layout-center {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 60px auto 0;
  border: 2px solid #B76E79;
}

.interviewee-name {
  font-weight: bold;
  color: #B76E79;
  text-align: center;
  margin-bottom: 15px;
  font-size: 35px;
}

.interview-image-center {
  width: 40%;
  padding: 10px;
}

.interview-text-center {
  width: 60%;
  padding: 10px;
  color: rgb(0, 0, 0);
}

.question {
  font-weight: bold;
  color: #B76E79;
  font-size: 18px;
  cursor: pointer;
}

.answer {
  margin-left: 20px;
  padding-bottom: 25px;
  font-size: 15px;
  padding-top: 10px;
}

.collapsible .collapsible-content {
  max-height: none;
  overflow: visible;
  transition: max-height 0.3s ease-out;
}

.read-more {
  display: none;
}

@media (max-width: 768px) {
  .interview-layout-center {
    margin: 30px 7px 0;
    display: block;
  }

  .interviewee-name { font-size: 24px; }

  .interview-image-center { width: 100%; }

  .interview-text-center { padding: 5px; width: 100%; }

  .question { font-size: 16px; }

  .answer {
    margin-left: 10px;
    font-size: 14px;
  }

  /* ▼閉じている時に少しだけ見せる */
  .collapsible .collapsible-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
    transition: max-height .3s ease;
  }

  /* 下端ぼかし */
  .collapsible .collapsible-content:not(.active)::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  }

  /* ← ここにあった line-clamp の … 制御を削除しました */

  /* 開いたら全表示 */
  .collapsible .collapsible-content.active {
    max-height: 1000px;
  }
  .collapsible .collapsible-content.active::after {
    display: none;
  }

  /* 続きを見るボタン */
  .read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    padding: 14px 16px;
    margin: 12px 0 0;
    background: linear-gradient(to bottom, #B76E79, #F0A3A3);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 0;
    box-shadow: 0 6px 16px rgba(183,110,121,.35);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .read-more::after {
    content: "";
    width: 12px; height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .collapsible .collapsible-content.active + .read-more::after {
    transform: rotate(-135deg);
  }

  .read-more:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(183,110,121,.45);
  }
  .read-more:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
}




/* service */

.service-title{
  font-weight: 600;
  font-size: 2em;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 110px;
}

.line {
background-color: rgba(183, 110, 121, 0.9);;
  height: 2px;
  width: 0;
  animation-name: none; /* 初期状態ではアニメーションなし */
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.line.animate {
  animation-name: grow;
}

@keyframes grow {
  0% {
      width: 0vw; /* 真ん中を基点に開始 */
  }
  100% {
      width: 10vw; /* 少し伸びるように調整 */
  }
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-section {
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.button-container {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
  align-items: center; /* 縦方向中央揃え（必要なら） */
}

.page-link-button {
  display: inline-block;
  margin: 1rem 0; /* 上下マージン */
  background: #B76E79; /* 背景色 */
  color: #fff; /* テキスト色 */
  text-align: center; /* テキストを中央揃え */
  padding: 1.2rem 6rem; /* パディング */
  font-size: 18px; /* フォントサイズ */
  font-weight: 500; /* フォントウェイト */
  cursor: pointer; /* カーソルの形状 */
  text-decoration: none; /* 下線を消す */
  transition: background 0.3s; /* 背景色の遷移 */
  position: relative; /* アイコン位置調整のため */
}

.page-link-button i {
  position: absolute; /* アイコン位置調整 */
  right: 15px; /* 右端からの距離 */
  top: 50%; /* 垂直方向中央揃え */
  transform: translateY(-50%); /* 中央揃えのための変換 */
}

.page-link-button:hover {
  background: #B76E79; /* ホバー時の背景色 */
}

.inner-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750px;
  padding: 70px;
  background-color: rgba(255, 255, 255, 0.92); /* FFFFFFの透明度92% */
  border-radius: 10px; /* 角を少し丸くする。必要に応じて変更 */
}

.block-title {
  font-size: 2em;
  margin-bottom: 20px; /* 下の余白 */
  text-align: center;
}

.block-description {
  margin-bottom: 10px; /* 下の余白 */
  font-weight: 600;
  font-size: 1.1em;
}

.block-content {
  display: flex;
  margin-top: 20px; /* 上の余白 */
}

.content-image {
  width: 200px; /* サイズは調整してください */
  height: auto;
  margin-right: 20px; /* 右の余白 */
}

.content-text {
  flex: 1; /* 残りのスペースを取る */
  font-size: 1.06em;
}
@media (max-width: 768px) {
  .service-title {
    font-size: 4.7vw;
      margin-top: 5vh; /* 上の余白を調整 */
  }

  .line {
      width: 50%; /* 線の長さを調整 */
  }

  .outer-section {
      padding: 30px 0; /* セクションのパディングを調整 */
      margin-top: 25px !important;
      background-size: cover; /* 背景画像のサイズをカバーに設定 */
  }

  .inner-block {
      width: 100%; /* ブロックの幅を調整 */
      padding: 10px;
      margin: 0 10px;
  }

  .block-title {
    font-size: 20px; /* タイトルのフォントサイズを調整 */
  }

  .block-description {
    font-size: 15px;
    margin-bottom: 8px; /* 説明文のフォントサイズを調整 */
  }

  .content-text {
    font-size: 13px;
    text-align: center;
    line-height: 2em;
    font-weight: 500;
  }

  .block-content {
      flex-direction: column; /* コンテンツを縦方向に並べる */
  }

  .content-image {
      width: 100%; /* 画像の幅を調整 */
      margin: 0 0 20px; /* 画像の余白を調整 */
  }

  .page-link-button {
    text-align: center;
    padding: 1rem 6rem;
    font-size: 14px;
}
}


/* 選ばれる7つのポイント */
.merits-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 要素を中央に寄せる */
  gap: 50px;
  max-width: 1400px; /* 最大幅を設定 */
  margin: 0 auto; /* 中央寄せ */
  padding-top: 100px;
}

.merit {
  flex: calc(40% - 10px); /* 2列の場合、間隔の調整を考慮して10px減少 */
  box-sizing: border-box; /* パディングとボーダーを含むボックスモデル */
  padding: 20px;
}

.catch-subtitle{
  text-align: center;
  margin-top: 30px;
  font-size: 26px;
  color: #B76E79;
}


.merit-title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.merit-subtitle {
  font-size: 20px;
  margin-bottom: 10px;
  color: #888888;
}

.merit-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.merit-text {
  text-align: left;
  font-weight: 500;
}


.sub_container{
  width: 100%;
  margin: 100px 0;

}
.section_title{
  color: #B76E79;
  width: 100%;
  height: 10vh;
  display: flex;
  align-items: center;
}
.section_title_inner{
  margin-left: 80px;
}
.section_inner{
  /* margin-top: 50px; */

  width: 100%;
  /* background-color: #F8F6F4; */
}
img{
  width: 100%;
  height: 100%;

}

@media screen and (max-width: 768px) {
  .merits-section {
      padding: 20px;
      gap: 35px;
  }

  .merit {
      flex: 100%; /* 1列に表示 */
      padding: 0;
  }

  .section_title_inner {
      margin-left: 20px;
  }

  .catch-subtitle{
    font-size: 4.5vw;
  }

  .merit-title {
    font-size: 18px; /* タイトルとサブタイトルのフォントサイズを小さく */
  }

  .merit-subtitle{
    font-size: 14px;
  }

  .merit-text {
    font-size: 13px; /* テキストのフォントサイズを小さく */
    margin-bottom: 10px;
    line-height: 1.8;
  }

  /* 他に必要なスタイルを追加 */
}

/* plan */

.image-campaign {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
}

.image-campaign img {
  width: 500px; /* 画像の幅を500pxに固定します */
  height: auto; /* 画像の高さを自動で調整し、アスペクト比を保持します */
}


.campaign-content {
  padding: 30px 20px 50px;
  background-color: #F8F6F4;
  text-align: center;
  margin: 20px auto;

}

.campaign-section {
  text-align: center;
  margin: 0 auto;
  padding: 20px;
}

.campaign-section p {
  margin-bottom: 7px;
  font-size: 1.2rem;
  font-weight: 600;
}

.price-tag {
  border: 2px solid #13BC6E;
  display: inline-block;
  padding: 10px;
  margin-top: 20px; /* 価格表示の上のスペース */
}

.price-tag p {
  margin: 5px 0; /* 価格表示の行間 */
  font-size: 1.4rem; /* 価格表示の文字の大きさ */
}

.new-price {
  color: #13BC6E;
  font-size: 2.0rem; /* 新価格の文字の大きさ */
  font-weight: bold;
}

.option-support {
  background-color: #13BC6E;
  color: white;
  display: inline-block;
  padding: 5px 10px;
  margin-top: 10px; /* オプション説明の上のスペース */
  border-radius: 5px; /* 角を丸くする */
}

.image-container {
  display: flex;
  justify-content: center; /* コンテナ内のアイテムを中央に寄せる */
  gap: 40px; /* 画像間のギャップ */
}

.image {
  max-width: 300px;
  height: auto;
}

.plan-title{
  font-weight: 600;
  font-size: 2.5em;
  text-align: center;
  /* margin: 10px 0; */
  margin-top: 95px;
  color: #B76E79;
  margin-bottom: 10px;
}

.plan-desc{
  font-weight: 600;
  font-size: 2em;
  text-align: center;
  margin-top: 95px;
  color: #B76E79;
  margin-bottom: 30px;
}

.glow-button {
  display: block; /* ブロック要素として表示 */
  width: 550px;
  margin: 0 auto; /* 左右のマージンを自動に設定して中央揃え */
  background-color: #ff3131; /* 特別感を出すための背景色 */
  color: white; /* テキストの色 */
  padding: 20px 40px; /* 内側の余白を大きく */
  font-size: 1.5rem; /* フォントサイズを大きく */
  font-weight: bold; /* フォントを太く */
  text-align: center; /* テキストを中央揃えに */
  text-decoration: none; /* アンダーラインを無効に */
  border-radius: 10px; /* 角をより丸く */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* ボックスシャドウを追加 */
  transition: all 0.3s ease; /* トランジション効果 */
  border: 2px solid white; /* 白い境界線を追加 */
}

.glow-button:hover {
  background-color: #c94c24; /* ホバー時の背景色を変更 */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.7); /* ホバー時にグローエフェクト */
  transform: scale(1.05); /* ホバー時に少し拡大 */
}



.equipment-container {
  max-width: 950px;
  margin: 0 auto;
  padding: 40px 20px 0;
  box-sizing: border-box;
}

.equipment-item {
  display: flex;
  align-items: center;
  justify-content: center; /* 子要素を中央寄せに */
  margin-bottom: 30px;
  border-radius: 8px;

  
}

.equipment-media,
.equipment-info {
  flex: 1;
  text-align: -webkit-center;
}

.equipment-title {
  padding-bottom: 30px;
  width: 100%;
  font-size: 23px;
  font-weight: 500;
}

.equipment-image {
  width: 25%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.equipment-image:hover {
  transform: scale(1.05);
}

.equipment-info {
  padding: 20px;
    text-align: left;
}

.equipment-price {
  font-weight: bold;
  color: #B76E79;
  text-align: -webkit-left;
  margin-bottom: 40px;
  padding-left: 30px;
  font-size: 25px;
}

.equipment-description p {
  margin: 0;
}

.opt-option-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

:root {
  --color_htag: #B76E79;
  --color_htag_light: rgba(183, 110, 121, 0.5); /* 薄い色 */
}

.opt-product-title {
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.opt-product-title::after {
  content: "";
  display: block;
  width: 30%;
  height: 2px;
  background: var(--color_htag);
  position: absolute;
  bottom: -10px;
  left: 0;
}

.opt-product-title::before {
  content: "";
  display: block;
  width: 70%;
  height: 2px;
  background: var(--color_htag_light);
  position: absolute;
  bottom: -10px;
  left: 30%;
}

.opt-product-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 60px 0px;
}

.opt-product-image {
  width: 41%;
  padding: 20px;
  text-align: -webkit-center;
  place-self: center;
}

.opt-product-image img {
  width: 150px;
  padding: 20px;
  height: auto;
}

.opt-product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.opt-service-bubble {
  background-color: #B76E79;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
  width: fit-content;
  margin-bottom: 15px;
}

.opt-price {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  padding: 25px 20px;
  background-color: rgba(183, 110, 121, 0.3);
}

.opt-description {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .opt-product-title{
    font-size: 18px;
  }
  .opt-price {
    font-size: 16px;
  }
  .opt-product-content {
    flex-direction: column;
    align-items: center;
    margin: 0px;
  }

  .opt-product-image img {
    width: 100%;
    max-width: 300px;
    padding: 0;
  }

  .opt-product-details {
    align-items: center;
  }

  .opt-service-bubble,
  .opt-price,
  .opt-description {
    
  }
}


/* 支払い方法 */
.payment-options {
  width: 100%;
  max-width: 1100px;
  margin: 50px auto; /* 上下のマージンは0、左右のマージンは自動 */
  border-collapse: collapse; /* ボーダーをまとめる */
  table-layout: auto; /* 自動的な表のレイアウト */
}

.payment-options img{
  width: 30%;
}

.payment-options th, .payment-options td {
  border: 1px solid #ddd; /* セルに境界線を設定 */
  padding: 8px; /* セル内の余白を設定 */
  text-align: left; /* テキストを左揃え */
}


.payment-options th {
  background-color: #f2f2f2; /* ヘッダーセルの背景色を設定 */
  color: #333; /* ヘッダーセルのテキスト色を設定 */
}

.information{
  text-align: center;
}
.information p{
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 0;
}
@keyframes shineEffect {
  0%, 100% {
      opacity: 1; 
  }
  50% {
      opacity: 0.75; 
  }
}
.information p span{
  font-size: 4.0rem;
  animation: shineEffect 1.5s infinite; /* 1.5秒の間隔で無限に繰り返す */
  color: #FF3030;
}
/* スマートフォン用スタイル */
@media (max-width: 768px) {

  .sub_container {
    width: 100%;
    margin: 0;
}

  .image-campaign {
      height: auto; /* 高さを自動に設定 */
  }

  .image-campaign img {
      width: 80%; /* 画像の幅を画面幅の80%に設定 */
      height: auto; /* 高さを自動に設定 */
  }

  .campaign-content, .campaign-section {
    padding: 10px 10px 5px;
      margin: 10px auto 0; /* 上下のマージンを調整 */
  }

  .campaign-section p, .price-tag p {
      font-size: 1rem; /* フォントサイズを調整 */
  }

  .price-tag {
      padding: 5px; /* パディングを調整 */
  }

  .new-price {
      font-size: 1.5rem; /* 新価格のフォントサイズを調整 */
  }

  .option-support {
      padding: 3px 7px; /* パディングを調整 */
      margin-top: 5px; /* 上の余白を調整 */
  }
  .equipment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0;
    box-sizing: border-box;
  }

  .equipment-item {
    flex-direction: column;
    margin-bottom: 0;
  }
  
  .equipment-media,
  .equipment-info {
    width: 100%; /* スマートフォン表示のために100%に */
  }

  .equipment-title {
    padding-bottom: 20px;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
  }
  
  .equipment-image {
    width: 25%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  
  .equipment-image:hover {
    transform: scale(1.05);
  }
  
  .equipment-info {
    padding: 20px;
      text-align: left;
  }
  
  .equipment-price {
    font-weight: bold;
    color: #E53935;
    text-align: justify;
    margin-bottom: 20px;
    padding-left: 30px;
    font-size: 1.5rem;
  }
  
  .equipment-description p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .payment-options th, .payment-options td {
    border: 1px solid #ddd; /* セルに境界線を設定 */
    padding: 8px; /* セル内の余白を設定 */
    text-align: left; /* テキストを左揃え */
    font-size: 12px;
  }

  /* 画像コンテナのスタイル調整 */
  .image-container {
    gap: 0px;
    display: block;
  }

  .image {
    max-width: 70%; /* スマートフォンの画面幅に対して80%の幅 */
    margin: 10px auto;
  }

/* プラン説明文とタイトルのスタイル調整 */
.plan-title{
  font-size: 24px;
  margin-top: 60px;
  margin-bottom: 10px;
}

.plan-desc {
  font-size: 4.5vw;
  margin-top: 40px;
  margin-bottom: 35px;
}

/* 「プラン・料金ページへ」ボタンのスタイル調整 */
.glow-button {
    width: 90%;
    margin: 0 auto;
    padding: 30px;
    font-size: 1.2rem;
}

/* 支払い方法の表のスタイル調整 */
.payment-options {
  max-width: 95%; /* 最大幅を100%に設定 */
  margin: 20px auto; /* 上下のマージンを小さく */
  font-size: 14px; /* フォントサイズを小さく */
}

.payment-options td img {
  width: 100%; /* 画像の幅を100%に */
  max-width: 150px; /* 画像の最大幅を150pxに */
  height: auto;
}

.information{
  text-align: center;
}
.information p{
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 10px 0;
}
@keyframes shineEffect {
  0%, 100% {
      opacity: 1; 
  }
  50% {
      opacity: 0.75; 
  }
}
.information p span{
  font-size: 2.0rem;
  animation: shineEffect 1.5s infinite; /* 1.5秒の間隔で無限に繰り返す */
  color: #FF3030;
}

}



/* ------ frows css ------ */
.down-arrow img{
  height: max-content;
  display: none;
}

#frows{
  height: 100%;
}
#frows .frows_inner{
  display: flex;
  justify-content: center;
  flex-direction: column;
  
}

/* 共通設定 */
.accBtn.open, .accBtn_v2.open, .moreBtn.open {
  background: #B76E79;
  color: #fff;
}

.accBtn, .accBtn_v2, .moreBtn {
  width: 300px;
  margin: 1rem 0;
  background: #B76E79;
  color: #fff;
  text-align: center;
  padding: 1rem 3rem;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.accBtn i ,.accCloseBtn i{
  position: absolute;
  right: 15px;
}

.accBox {
  display: none;
  /* padding: 15px 0; */
  /* background: #f9f9f9; */
}


.frows_inner_container{

  padding: 20px 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#frows .frows_inner .frows_arrows{
  width: 80%;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frows_arrows .arrows_icon{
  width: 60px;
  height: 60px;
  background-color: black;
}
.frows_inner_details{
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 15px 0;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.plan_inner_details{
  display: flex;
  align-items: center;
  padding: 20px 20px 10px;
  margin: 15px 0;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.plan_inner_details div:nth-child(1){
  margin-right: 50px;
}
.frows_inner_details div:nth-child(1){
  margin-right: 50px;
}
.frows_inner_details_images{
  width: 500px;
  margin-bottom: auto;
}
.frows_inner_details_detail{
  width: 500px;
  color: #333333;
  margin-bottom: auto;
  margin-top: 15px;
  text-align: left;
}

.plan_inner_details_detail{
}

.frows_inner_container_share{
  height: 60%;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: column;

}
.frows_reserved_title h2{
  margin: 50px 0;
  color: #B76E79;
  font-weight: 500;
  font-size: 2.2em;
}

.frows_inner_details_detail h3{
  font-weight: 500;
  font-size: 1.8em;
}

.frows_inner_details_detail h4{
  font-size: 25px;
}

.frows_reserved_details_detail h3, .frows_access_details_detail h3 {
  position: relative; /* 疑似要素の基準として機能させる */
  display: inline-block; /* 疑似要素を正確に配置するため */
  margin-bottom: 10px; /* 下のコンテンツとの間隔 */
}

.frows_reserved_details_detail h3::after , .frows_access_details_detail h3::after{
  content: ''; /* 疑似要素の内容は空 */
  position: absolute; /* 親要素に対して絶対位置指定 */
  left: 0;
  bottom: -5px; /* 下線の位置を調整 */
  width: 100%; /* 下線の幅 */
  height: 2px; /* 下線の高さ */
  background-color: #B76E79; /* 下線の色 */
}

.frows_counseling_details_detail h3, .frows_free_trial_details_detail h3, .frows_plan_title h2, .frows_admission_title h2 {
  position: relative; /* 疑似要素の基準として機能させる */
  display: inline-block; /* 疑似要素を正確に配置するため */
  margin-bottom: 10px; /* 下のコンテンツとの間隔 */
}

.frows_counseling_details_detail h3::after, .frows_free_trial_details_detail h3::after, .frows_plan_title h2::after, .frows_admission_title h2::after {
  content: ''; /* 疑似要素の内容は空 */
  position: absolute; /* 親要素に対して絶対位置指定 */
  left: 0;
  bottom: -5px; /* 下線の位置を調整 */
  width: 100%; /* 下線の幅 */
  height: 2px; /* 下線の高さ */
  background-color: #B76E79; /* 下線の色 */
}



/* --- 各種設定 --- */
.frows_inner_container_access .frows_access_title{
  width: 80%;
  height: 20%;
  display: flex;
  align-items: center;
}
.frows_access_title .clock_icon{
  width: 40px;
  height: 40px;
}
.frows_access_title span{
  font-size: 2rem;
  color: #B76E79;
  font-weight: 600;
}
.frows_access_details .frows_access_details_detail p{
  margin: 20px auto;
  font-size: 1.1em;
}
#frows .frows_inner .frows_inner_container .frows_access_buttons{
  padding-top: 20px;
  width: 80%;
  height: 40%;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.frows_access_buttons .frows_access_btn {
  width: 250px;
  height: 60px;
  border: none;
  border-radius: 100vh;
  font-size: 1.3rem;
  background-color: #B76E79;
  color: #fff;
  box-shadow: 0px 4px 10px #B76E79;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* この行を追加 */
}

.frows_access_buttons .frows_access_btn:hover {
  background-color: #9A5A63;
  box-shadow: 0px 6px 12px #B76E79;
 
}

.frows_inner_details_detail p{
  line-height: 2em;
  font-weight: 500;
  overflow-wrap: normal;
  font-size: 1.1em;
  margin-top: 30px;
}
.frows_counseling_details_detail p{
  overflow-wrap: normal;
font-size: 1em;
  line-height: 2em;
  font-weight: 500;
}
.frows_free_trial_details_detail p{
  overflow-wrap: normal;
  font-size: 0.95em;
  line-height: 2em;
  font-weight: 500;
}
.frows_plan_detail{
  width: 85%;
  justify-content: left;
  margin-top: 50px;
}
.frows_plan_detail p{
  text-align: center;
  line-height: 2em;
  font-weight: 500;
}

.frows_plan_title h2{
  font-weight: 500;
  font-size: 2em;
}

.frows_inner_container_admission .frows_admission_title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.frows_inner_container_admission .frows_admission_title p{
  margin: 30px 0;
  text-align: center;
  line-height: 2em;
  font-weight: 500;
}
.frows_inner_container_admission .frows_admission_detail{
  
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frows_inner_container_admission .frows_admission_detail h3{
}

.frows_inner_container_plan{
  padding: 20px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;

}

.frows_admission_title h2{
  color: #B76E79;
    font-weight: 500;
    font-size: 2.2em;
}

.frows_admission_detail{
  font-weight: 500;
  font-size: 1.5em;
}

.align-center{
  text-align: -webkit-center;
}

.bg-white{
  background-color: #fff;
}

.accCloseBtn {
  width: 300px;
  margin: 1rem auto;
  background: #B76E79;
  color: #fff;
  text-align: center;
  padding: 1rem 3rem;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.accCloseBtn i {
  margin-left: 10px;
}



@media (max-width: 768px) {
  .accArea{
    text-align: -webkit-center;
  }

  .plan_inner_details div:nth-child(1){
    margin-right: 0px;
  }

  .accBtn, .accCloseBtn{
    font-size: 12px;
  }

  #frows .frows_inner {
    flex-direction: column;
    align-items: center;
  }

  .frows_inner_details_detail h4 {
    font-size: 18px;
    text-align: center;
}

  .frows_reserved_title h2{
    margin: 20px 0 10px;
    color: #B76E79;
    font-weight: 600;
      font-size: 24px;
  }

  .frows_inner_container {
    width: 100%; /* コンテナの幅を100%に */
    padding: 20px 0; /* パディングを調整 */
  }

  .frows_inner_details {
    flex-direction: column; /* 項目を縦に並べる */
    padding: 10px;
  }

  .frows_inner_details_images {
    margin-right: 0px;
    width: 100%; /* 画像の幅を100%に */
    height: auto; /* 高さを自動調整 */
    margin-bottom: 20px; /* 画像の下の余白 */

  }

  .frows_inner_details div:nth-child(1){
    margin-right: 0px;
  }

  .frows_inner_details_detail {
    width: 100%; /* 詳細の幅を100%に */
  }

  .frows_access_buttons .frows_access_btn {
    width: 100%; /* ボタンの幅を100%に */
    margin-bottom: 20px; /* ボタン間の余白 */
  }

  .frows_inner_container {
    width: 100%; /* コンテナの幅を100%に調整 */
    padding: 10px 15px; /* パディングを調整 */
  }

  .view_inner_details{
    /* height: 160px; */
  }

  .entry_inner_details{
    /* height: 155px; */
  }

  .counce_inner_details{
    /* height: 220px; */
  }

  .frows_inner_details, .frows_inner_container_admission .frows_admission_detail {
    flex-direction: column; /* 項目を縦に並べる */
    align-items: center;
  }

  .frows_inner_details_images, .frows_inner_details_detail {
    width: 100%; /* 画像と詳細の幅を100%に */
  }

  .frows_inner_details_detail p, .frows_counseling_details_detail p, .frows_free_trial_details_detail p, .frows_plan_detail p {
    font-size: 14px; /* フォントサイズを小さく調整 */
    line-height: 1.8em; /* 行間を調整 */
    text-align: -webkit-left;
  }

  .frows_plan_detail, .frows_admission_title {
    text-align: center; /* テキストを中央揃えに */
  }

  .frows_admission_title h2, .frows_admission_detail {
    font-size: 1.2em; /* ヘッダーテキストサイズを調整 */

  }

  .plan_inner_details{
    display: block;
    padding: 10px 10px 10px;
  }

    .frows_inner_container_access .frows_access_title {
    width: 100%; /* コンテナの幅を100%に調整 */
  }

  .frows_access_title .clock_icon {
    width: 30px; /* アイコンのサイズを調整 */
    height: 30px;
  }

  .frows_access_title span {
    font-size: 19px; /* フォントサイズを小さく調整 */
  }

  .frows_access_details .frows_access_details_detail p {
    font-size: 1em; /* フォントサイズを小さく調整 */
    margin: 15px auto; /* マージンを調整 */
  }

  #frows .frows_inner .frows_inner_container .frows_access_buttons {
    padding-top: 0px; /* パディングを調整 */
    margin: auto;
    justify-content: center;
  }

  .frows_access_buttons .frows_access_btn {
    width: 100%; /* ボタンの幅を100%に */
    font-size: 18px;
        min-width: 200px;
        margin: 15px 0;
        height: 50px;
  }

  .frows_plan_detail {
    width: 100%; /* プラン詳細の幅を100%に */
    margin-top: 0;
  }

  .frows_plan_title h2, .frows_admission_title h2 {
    font-size: 1.8em; /* タイトルのフォントサイズを調整 */
  }

  .frows_admission_title p {
    font-size: 14px; /* テキストのフォントサイズを調整 */
  }

  .frows_admission_detail h3{
    margin-bottom: 0px!important;
    font-size: 20px;
  }

  .frows_inner_details_detail h3{
    font-size: 20px;
    font-weight: 600;
  }

  .frows_inner_container_plan {
    padding: 10px;
}

  .down-arrow img{
    margin-top: 10px;
  }
}


/* よくあるご質問 */
.faq-container {
  max-width: 900px;
  margin: 50px auto;
}

.qa-subtitle {
  font-size: 23px;
  color: #5b5b5b;
}

.faq-item {
  margin-bottom: 20px;
}

.faq-question, .faq-answer {
  background-color: #F8F6F4;
  display: flex;
  padding: 10px;
  cursor: pointer; /* 質問にカーソルを追加 */
}

.faq-answer {
  display: none; /* 初期状態で回答を非表示 */
}

.faq-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #007bff; /* アイコンの背景色 */
  color: white;
  margin-right: 20px;
  border-radius: 50%; /* アイコンを円形に */
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0; /* アイコンの圧縮を防ぐ */
}

.faq-question .faq-icon {
  background-color: #B76E79; /* 質問アイコンの背景色 */
}

.faq-answer .faq-icon {
  background-color: #b3b3b3; /* 回答アイコンの背景色 */
}

.faq-question p {
  font-weight: 600;
  font-size: 20px;
}

.faq-question p, .faq-answer p {
  margin: 0;
  line-height: 1.8em;
}

.arrow-icon {
  margin-left: auto;
  font-size: 20px;
}

@media (max-width: 768px) {
  .faq-container .faq-icon {
      width: 20px; /* スマホサイズでアイコンのサイズを小さく */
      height: 20px; /* スマホサイズでアイコンのサイズを小さく */
      font-size: 12px; /* スマホサイズでアイコン内の文字サイズを小さく */
  }

  .faq-container {
      margin: 25px auto;
  }

  .faq-icon {
      margin-right: 10px;
  }

  .faq-container .faq-question p, .faq-container .faq-answer p {
      font-size: 13.5px; /* スマホサイズでテキストのサイズを小さく */
  }

  .faq-item {
      margin: 10px;
  }

  .qa-subtitle {
      font-size: 18px;
  }
}



/* ------ trainer css ------ */
.trainer_inner{
  background-color: #F8F6F4;
  padding: 50px 0px;
  margin: 30px 0 0;
}

/* --- trainer_overview --- */
.trainer_overview{
  width: 100%;
  height: 38%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trainer_overview_photos{
  margin-right: 100px;
}
.trainer_photos{
  width: 256px;
  height: 321px;
  
}
#badges{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 35px;
}
.badge{
  text-align: center;
}
.badge .icons{
  width: 80px;
  height: 80px;
  
}



@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 全スライドの幅分スクロール */
}


/* --- trainer_detail --- */

.trainer-intro-store{
  font-size: 1.3em;
}

.trainer_overview_inner h2{
  font-size: 24px;
}

.trainer_detail {
  width: 100%;
  height: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.trainer_detail_inner {
  text-align: left;
  width: 80%;
  /* background-color: #fff; */
  border-radius: 10px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  padding: 20px;
}
.trainer_detail h3 {
  margin-top: 20px;
  font-size: 1.5em;
  color: #B76E79;
  border-bottom: 2px solid #B76E79;
  padding-bottom: 5px;
}
.trainer_detail p {
  line-height: 2em;
  margin-top: 10px;
  font-size: 1.1em;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.trainer_detail p:last-child {
  border-bottom: none;
}

.trainer-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.instagram-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  color: #7b7b7b;
  font-size: 0.8em;
}

.instagram-link img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}
.badge{
  text-align: -webkit-center;
}

.manage-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* はみ出た部分を隠す */
}

.manage-container {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 20px; /* コンテナのマージン */
  max-width: 1200px; /* 4つのブロックの幅（各300px）+ マージン */
  overflow-x: hidden; /* 横スクロールバーを隠す */
}

.manage-block {
  flex: 0 0 300px; /* ブロックの幅を固定 */
  display: flex;
  flex-direction: column; /* 縦並びに設定 */
  align-items: center;
  margin-right: 10px;
}

.manage-block img {
  width: 100%;
  height: auto;
}

.scroll-button {
  cursor: pointer;
  background-color: #ddd;
  border: none;
  padding: 10px 20px;
}

/* 画面全体を覆うようにコンテナを調整 */
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.instagram-link i {
  font-size: 30px;
  font-weight: 600;
  color: #BC7A84;
  margin-bottom: 5px;
}


@media (max-width: 768px) {
  .trainer_inner {
    background-color: #F8F6F4;
    padding: 15px 0px;
  }

  .trainer_overview {
    flex-direction: column; /* 項目を縦に並べる */
    height: auto; /* 高さを自動に */
    padding: 20px 0; /* パディングを追加 */
  }

  .trainer_overview_photos {
    margin-right: 0;
    margin-bottom: 20px; /* 下マージンを追加 */
  }

  .trainer_photos {
    width: 100%; /* 画像の幅を100%に */
    max-width: 256px; /* 最大幅を設定 */
    height: auto; /* 高さを自動に */
  }

  #badges {
    flex-direction: column; /* バッジを縦に並べる */
    gap: 20px; /* バッジ間の余白を調整 */
  }

  .instagram-link {
    font-size: 0.8em;
  }

  .instagram-link i{
    font-size: 27px;
  }

  .instagram-link img {
      width: 20px;
      height: 20px;
  }
  .trainer-name{
    gap: 15px;
    display: block;
    text-align: center;
  }

  .badge .icons {
    width: 35px; /* アイコンのサイズを調整 */
    height: 35px;
  }

  .trainner-aw{
    font-size: 14px;
    font-weight: 600;
  }

  .trainer_detail {
    height: auto; /* 高さを自動に */
    padding: 0 10px;
  }

  .trainer_detail_inner {
    width: 100%; /* 幅を100%に */
    padding: 0 15px;
  }



  .trainer_detail h3 {
    font-size: 18px; /* タイトルのフォントサイズを調整 */
  }

  .trainer-name-h2{
    font-size: 24px;
  }
  

  .trainer_detail p, .trainer-intro-store {
    font-size: 13px;
    line-height: 1.6em;
    margin-top: 5px;
    font-weight: 600;
  }


  .section_inner {
    margin-top: 15px; /* スマートフォンでは少し小さいマージン */
    width: 100%; /* 幅は画面いっぱいに */
    height: auto; /* 高さは自動にしてコンテンツに合わせる */
  }

  .social-links {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    margin-top: 10px;
  }
  
  .instagram-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: #7b7b7b;
    font-size: 10px;
  }
  
  .instagram-link img {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
  }

}

/* ------ access ------ */
.access_inner {
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}
.access_inner_map {
  width: 500px;
  height: 500px;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.access_inner_detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}
.access_inner_detail_char_container {
  text-align: left;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 2px solid #B76E79;
}
.access_inner_detail_char_container:last-child {
  border-bottom: none;
}
.access_inner_detail_char_container h2 {
  font-size: 1.8em;
  margin-bottom: 10px;
}
.access_inner_detail_char_container h3 {
  font-size: 1.2em;
  color: #555;
}
@media (max-width: 768px) {
  .access_inner {
      flex-direction: column; /* アイテムを縦に並べる */
      padding: 20px 0; /* パディングを調整 */
      gap: 20px;
      text-align: -webkit-center;
        align-items: center;
  }
  .access_inner_map {
      width: 100%; /* 幅を100%に */
      height: auto; /* 高さを自動に */
      margin-right: 0; /* 右マージンを削除 */
  }
  .access_inner_detail {
      width: 100%; /* 幅を100%に */
  }
  .access_inner_detail_char_container {
      line-height: 1.6em; /* 行間を調整 */
      margin: 10px 0; /* 上下のマージンを調整 */
  }
  .access_inner_detail_char_container h2 {
      font-size: 1.3em; /* フォントサイズを調整 */
      padding-bottom: 5px; /* 下パディングを調整 */
  }
  .access_inner_detail_char_container h3 {
      font-size: 1em; /* フォントサイズを調整 */
  }
}

/* ------ blog ------ */
.blog-container{
  text-align: center;
  
}

.blog-container h3{
  margin: 20px 0;
  font-size: 23px;
}

/* 画像に適用する基本スタイル */
.blog-container img {
  border-radius: 15px;
  width: 850px;
  margin: auto;
  /* 画像の影と遷移効果を追加 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
  transition: all 0.3s ease; /* アニメーションのスムーズさを調整 */
}

/* ホバー時のスタイル */
.blog-container img:hover {
  transform: translateY(-5px); /* 画像を上に少し移動させる */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 影を強調 */
}

@media (max-width: 768px) {
  .blog-container h3{
    font-size: 1em;
  }
  .blog-container img{
    padding: 0 20px;
    box-shadow: none;
  }

}

/* ------ contact ------ */
/* 共通スタイル */
.required-label {
  display: inline-block;
  padding: 1px 10px;
  background-color: #ff3131;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
}

.contact-form {
  max-width: 1100px;
  margin: 50px auto;
  padding: 2rem 3rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-title {
  text-align: center;
  color: #B76E79;
}

.form-label {
  display: block;
  margin: 10px 0;
  color: #555;
  flex: 1;
}

.form-input-container {
  flex: 4;
}

.form-input,
.form-select,
.form-button {
  width: 100%;
  padding: 13px;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #f0f2f3;
  height: 50px; /* お名前などのフォームと同じ高さに設定 */
}

.form-textarea{
  width: 100%;
  padding: 13px;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #f0f2f3;
  height: 150px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #B76E79;
  outline: none;
}

.form-button {
  background-color: #B76E79;
  color: #fff;
  border: none;
  cursor: pointer;
}

.form-button:hover {
  background-color: #a1606b;
}

.radio-group {
  display: flex;
  flex: 4;
  align-items: center;
  gap: 31px;
  flex-wrap: wrap;
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-label {
  margin-left: 8px;
}

.form-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 35px 0;
}

.date-time-container {
  display: flex;
  gap: 10px;
  flex: 4;
}

.date-time-container .form-input,
.date-time-container .form-select {
  width: 40%;
}

.form-age-input {
  width: calc(25% - 22px);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* 削除: appearance プロパティを削除 */
input[type="date"] {
  background-color: #f0f2f3; /* 他のフォーム要素と同じ背景色に設定 */
  padding: 13px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #555;
  font-size: 16px;
  height: 50px; /* お名前などのフォームと同じ高さに設定 */
}

select.form-select {
  background-color: #f0f2f3; /* 他のフォーム要素と同じ背景色に設定 */
  padding: 13px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #555;
  font-size: 16px;
  height: 50px; /* お名前などのフォームと同じ高さに設定 */
}

/* SP版のスタイル */
@media (max-width: 768px) {
  .contact-form {
    padding: 10px 15px;
    margin: 20px 10px;
    font-size: 13px;
  }

  .form-input,
  .form-textarea,
  .form-select {
    font-size: 14px;
  }

  .form-label {
    margin: 20px 0 10px 0;
  }

  .form-row {
    flex-direction: column;
    align-items: flex-start;
    margin: 15px 0;
    display: block;
  }

  .form-row .form-input,
  .form-row .form-select {
    width: 100%;
  }

  .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .date-time-container {
    flex-direction: column;
  }

  .date-time-container .form-input,
  .date-time-container .form-select {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 960px) {
  .contact-form {
    margin: 20px 15px;
  }
}

/* iPhone対応のリセット */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}


/* --- 問い合わせボタン --- */
.applay-container {
  background: #000 url(../img/applay-back.png) no-repeat center right;
  padding: 90px 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.applay-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background: linear-gradient(to right, rgb(43 43 43), rgba(0, 0, 0, 0));
  transform: translateX(-50%);
  z-index: 1;
}

.wi1100 {
  width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btns a {
  text-decoration: none;
  color: #ffffff;
  font-size: 26px;
  font-weight: 600;
}

.btn-green {
  width: 530px;
  height: 5.5rem;
  margin-right: 4rem;
  margin-bottom: 2rem;
  background: linear-gradient(to bottom, #B76E79, #F0A3A3);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Adjusted to space between text and icon */
  padding: 50px 20px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.btns-text {
  margin-left: 55px;
}

.applay-icon {
  width: 39px;
  height: 39px;
}

.hk {
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.txt_link {
  color: #F0A3A3;
  text-decoration: underline;
}

/* SP版対応 */
@media (max-width: 768px) {

  .applay-container {
    background: #ffffff url(../img/sp-applay-back.png) no-repeat center right;
    padding: 78px 0;
    color: white;
    position: relative;
    overflow: hidden;
  }

  .applay-container::before{
    background: linear-gradient(to top, rgb(43 43 43), rgba(0, 0, 0, 0));
  }

  .wi1100 {
    width: 90%;
    text-align: center;
  }

  .btn-green {
    width: 100%;
    margin-right: 0;
    height: auto;
    padding: 1rem;
    justify-content: center; /* Center the content for SP */
  }

  .btns-text {
    margin: 0 10px 0 0; /* Add some margin to the text */
    font-size: 18px;
  }

  .applay-icon {
    width: 30px;
    height: 30px;
  }

  .hk{
    font-size: 2.8vw;
    text-align: center;
  }
}

.bfaf-banner {
  position: relative;
  background: #000 url(../img/applay-back.png) no-repeat center right;
  padding: 60px 30px;
  color: #fff;
  overflow: hidden;
}

.bfaf-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(35, 35, 35, 0.9), rgba(0, 0, 0, 0.3));
}

.bfaf-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右ほぼ均等 */
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* 左：コメント */
.bfaf-quotes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.bfaf-quote {
  background: #fff;
  color: #222;
  border-left: 5px solid #B76E79;
  padding: .6em .9em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

/* 右：継続率とボタン */
.bfaf-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  text-align: center;
}

/* 継続率 */
.bfaf-badge {
  background: #fff;
  color: #B76E79;
  font-weight: 800;
  font-size: 23px;
  padding: 12px 24px;
  border: 3px solid #B76E79;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.bfaf-badge span {
  font-size: 40px;
  margin: 0 4px;
}

/* ボタン */
.bfaf-btn {
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
     padding: 15px 61px;         /* 横に広げる */
  width: 100%;                 /* カラムいっぱいに広げる */
  border-radius: 0;            /* 角丸をなくす */
  background: linear-gradient(to bottom, #B76E79, #F0A3A3);
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(183,110,121,.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bfaf-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(183,110,121,.5);
}
.bfaf-btn__icon {
  width: 26px;
  height: 26px;
}

/* SP版 */
@media (max-width: 768px) {
   .bfaf-banner {
    background: #000 url(../img/sp-applay-back.png) no-repeat center right;
    padding: 30px 16px;
  }
  .bfaf-banner__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .bfaf-quotes { gap: 14px; }
  .bfaf-quote { font-size: 4vw; text-align: left; }

  /* 継続率はSPでは非表示 */
  .bfaf-badge {
    display: none;
  }

  .bfaf-btn {
    width: 100%;                 /* 横幅いっぱい */           /* 高さを確保 */
    font-size: 18px;
    border-radius: 0;            /* 角丸なし */
  }
  .bfaf-btn__icon {
    width: 24px;
    height: 24px;
  }
}



.cta_custom_list {
  display: flex;
  justify-content: center;
  margin: 0;
  gap: 10px;
  margin-bottom: 80px;
}

.cta_custom_list span {
  font-weight: 600;
}

.custom_card {
  width: 300px;
  height: 280px;
  background: #fff5f5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 0;
  color: #000;
  font-weight: 500;
  font-size: 1.4rem;
  text-decoration: none;
  transition: all .3s;
}

.custom_card:hover {
  background-color: #fffcfc; /* 色を薄くする */
}

.custom_icon {
  width: 130px;
  height: 130px;
  margin-bottom: 10px;
}

.custom_pc {
  display: none;
}

.cta_contact {
  text-align: center;
  line-height: 2em;
  margin: 30px 0;
  font-weight: 600;
}

@media (min-width: 768px) {
  .custom_pc {
      display: inline;
  }
}

@media (max-width: 768px) {
  .cta_custom_list {
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;
  }

  .cta_contact p{
    font-size: 13px;
    padding: 0 20px;
  }

  .custom_card {
      width: 90%;
      height: auto;
      padding: 20px;
      flex-direction: row;
      align-items: center;
  }

  .custom_icon {
      width: 50px;
      height: 50px;
      margin-bottom: 0;
      margin-right: 20px;
  }

  .custom_card span {
      flex-grow: 1;
      text-align: left;
  }

  .applay-container {
      background-position: center right 10%;
      padding: 45px 0;
  }

  .wi1100 {
      width: 100%;
      text-align: center;
  }

  .btn-green {
      width: 100%;
      margin-right: 0;
      padding: 1rem 8vw;
  }

  .btns {
      justify-content: center;
  }
}




@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.contact_inner_btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 280px;
    height: 85px;
  background-color: #ff3131;
  border: none;
  border-radius: 58px;
  margin: 0 25px;
  font-size: 1.1rem;
  box-shadow: 0px 4px 10px #ff3131;
  animation: poyopoyo 2s ease-out infinite;
}

.contact_buttons .contact_inner_btn div:first-child{
  background-color: #fff;
  margin: 5px auto;
  width: 120px;
}
.contact_buttons .contact_inner_btn div:nth-child(2){
  color: #fff;
}
#phone_icon{
  width: 15px;
  height: 15px;
  background-color: yellow;
}

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
  #contact {
    height: auto; /* 高さを自動に */
  }

  #contact .section_inner {
    height: auto; /* 高さを自動に */
  }

  .contact_inner {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃えに */
  }

  .contact_inner_logo {
    margin: 0 auto;
    text-align: center; /* 中央揃えに */
    padding-bottom: 30px; /* パディングを調整 */
  }

  .contact_inner_logo h2 {
    font-size: 1.8em; /* フォントサイズを調整 */
  }

  .contact_inner_logo_container {
    width: 120px; /* ロゴコンテナの幅を調整 */
    height: 120px; /* ロゴコンテナの高さを調整 */
    display: inline-flex;
  }
  .contact_inner_btn {
    width: 260px;
    margin-bottom: 15px; /* ボタン間の余白を調整 */
    margin: 20px 15px;
  }
  .contact_buttons{
    display: block;

  }

}



/* --- SNSボタン --- */

.contact_text {
  display: block;
  text-align: center;
  color: #000; /* テキストの色 */
  margin-bottom: 10px; /* ボタンとの間隔 */
  font-size: 1rem; /* フォントサイズ */
}

.sns_button_inline{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}

.sns_buttons{
  
}
.sns_buttons .sns_buttons_inner{
  justify-content: center;
  align-items: center;

}
.sns_buttons .sns_buttons_inner .sns_btn{
  width: 200px;
  height: 75px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 30px;
  text-decoration: none; /* アンカーの下線を削除 */
  background-color: #B76E79; /* 任意の背景色 */
  color: #fff; /* テキストの色 */
  border-radius: 5px; /* 角を少し丸く */
  transition: background-color 0.3s; /* ホバーエフェクトのアニメーション */
  font-size: 25px;
}
.sns_buttons .sns_buttons_inner .sns_btn:hover {
  background-color: #aaaaaa; /* ホバー時の背景色 */
}

.sns_buttons .sns_buttons_inner .sns_btn img{
  width: 50px;
  height: 50px;
  
}
.sns_buttons .sns_buttons_inner .sns_btn span{
  color: #fff;
}
.sns_buttons .sns_buttons_inner #sns_btn_line span{
  font-size: 1.5rem;
} 
.sns_buttons .sns_buttons_inner #sns_btn_mail span{
  font-size: 1.2rem;
  border-bottom: 1.3px solid #fff;
} 
.sns_buttons .sns_buttons_inner #sns_btn_line{
  background-color: #04BC04;
}
.sns_buttons .sns_buttons_inner #sns_btn_mail{
  background-color: #52DCE4;
}

@media (max-width: 768px) {
  .contact_text{
    padding-top: 25px;
  }

  .sns_button_inline{
    text-align: -webkit-center;
    display: block;
    padding-top: 0;
  }

  .sns_buttons {
    margin: 10px auto; /* マージンを調整 */
  }

  .sns_buttons h2{
    font-size: 1.1em;
    margin: 30px 0;
  }

  .sns_buttons .sns_buttons_inner {
    flex-direction: column; /* アイテムを縦に並べる */
    width: 200px;
  }

  .sns_buttons .sns_buttons_inner .sns_btn {
   
    height: 60px; /* 高さを調整 */
    margin: 10px 0; /* 上下のマージンを調整 */
  }

  .sns_buttons .sns_buttons_inner .sns_btn img {
    width: 40px; /* 画像の幅を調整 */
    height: 40px; /* 画像の高さを調整 */
  }

  .sns_buttons .sns_buttons_inner #sns_btn_line span,
  .sns_buttons .sns_buttons_inner #sns_btn_mail span {
    font-size: 1em; /* フォントサイズを調整 */
  }

  .sns_buttons .sns_buttons_inner #sns_btn_mail {
    border-bottom: 1px solid #fff; /* 下線を細く */
  }


}

/* --- footer --- */
.footer{
  width: 100%;
  height: 30vh;
  background-color: #B76E79;
  display: flex;
  justify-content: center;
  align-items: center;
}
.instagram_icon_container{
  width: 200px;
  height: 200px;
  text-align: -webkit-center;
}
.menu_container{
  color: #333;
  margin-left: 100px;
}
.menu_details {
  display: flex; /* Flexbox モデルを使用 */
  flex-wrap: wrap; /* アイテムがコンテナの幅を超えた場合に折り返す */
  gap: 10px; /* アイテム間の隙間を設定 */
}

.menu_details a {
  flex-basis: calc(25% - 10px); /* コンテナの25%の幅を使用し、gap分の隙間を引く */
  text-decoration: none; /* リンクの下線を削除 */
  color: #fff; /* リンクのテキスト色を白に設定 */
  display: flex; /* Flexboxを使用して、中のpを中央揃えに */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}

.menu_details a p {
  padding: 10px; /* パディングを調整 */
  border-right: none; /* 右のボーダーを削除 */
  border-bottom: 2px solid #D1D1D1; /* 下のボーダーを追加 */
  box-sizing: border-box; /* paddingとborderを要素の幅に含める */
  margin: 0; /* pタグのデフォルトのマージンを削除 */
}


.copyright{
  width: 100%;
  height: 5vh;
  color: #fff;
  text-align: center;
  line-height: 5vh;
  background-color: rgba(0,0,0, .7);
}

#instagram_icon{
  width: 100px;
}

@media (max-width: 768px) {
  .footer {
    
    height: auto; /* 高さを自動に */
    padding: 20px 0; /* 上下のパディングを追加 */
  }

  .instagram_icon_container {
    width: 150px; /* 幅を小さく */
    height: 150px; /* 高さを小さく */
    margin-bottom: 20px; /* 下のマージンを追加 */
  }

  .menu_container {
    margin-left: 0; /* 左のマージンを削除 */
    text-align: center; /* テキストを中央揃えに */
  }

  .menu_details {
    display: block; /* フレックスをブロックに変更 */
  }

  .menu_details p {
    padding: 10px 0; /* パディングを調整 */
    border-right: none; /* 右のボーダーを削除 */
    
  }

  .menu_details a{
    border-bottom: 2px solid #D1D1D1;
  }

  .menu_details a p{
    border-bottom: none;
  }

  #instagram_icon {
    width: 80px; /* アイコンのサイズを小さく */
  }

  .menu_details p:nth-child(n):nth-child(-n+5){
    border-right: none;
  }

}


/* -----------------------プランページ--------------------------------------------------------------------------------------------- */

/* First View Styles */
.first-view-plan {
  background-image: url('../img/plan-back.png');
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 20rem; /* ビューポートの高さいっぱい */
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: flex-start; /* 子要素を左端に配置 */
    justify-content: flex-start; /* 左隅に配置 */
    
    /* font-family: 'Noto Serif JP', serif; */
}

.price-table-container {
  text-align: center;
  margin: 20px auto; /* 上下のマージンは20px、左右のマージンは自動に設定 */
  max-width: 950px; /* コンテナの最大幅を1400pxに設定 */
}

.price-table {
  margin-bottom: 20px; /* テーブルの下のマージン */
  border-collapse: collapse;
  width: 100%; /* テーブルの幅をコンテナの幅に合わせる */
  font-size: 1.1rem; /* フォントサイズを大きく */
}

/* ライトプランのスタイル */
.light-plan thead th {
  background-color: #f395a3; /* 明るい青色 */
}

/* スタンダードプランのスタイル */
.standard-plan thead th {
  background-color: #a39b81; /* 明るい黄色 */
}

.price-table th, .price-table td {
  width: 50%;
  border: 1px solid #ddd;
  padding: 13px 0;
  text-align: center;
  font-size: 1.2em;
}

.price-table thead th {

  color: white;
}

.price-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.price-table-container {
  text-align: center;
  margin: 20px auto 150px;
  max-width: 950px;
}

.price-table {
  margin-bottom: 20px;
  border-collapse: collapse;
  width: 100%;
  font-size: 1.2rem; /* フォントサイズを若干大きく */
}

/* ダイエットプランのスタイル */
.diet-plan thead th {
  background-color: #B76E79; /* 指定されたカラー */
  color: white;
  font-size: 1.4rem; /* 見出しのフォントサイズをさらに大きく */
}

.diet-plan tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* #B76E79の薄いシェード */
}



.diet-plan tbody td {
  padding: 15px; /* セルのパディングを増やす */
  border: 1px solid #B76E79; /* 指定されたカラーの境界線 */
}

.tax-included {
  font-size: 0.8rem; /* より小さいフォントサイズ */
  margin-left: 5px; /* 数字との間隔を設ける */
}

/* ペアプランのスタイル */
.pair-plan thead th {
  background-color: #FFB8DA; /* 指定されたカラー */
  color: white;
  font-size: 1.4rem; /* 見出しのフォントサイズをさらに大きく */
}

.line-support thead th {
  background-color: #13BC6E; /* 指定されたカラー */
  color: white;
  font-size: 1.4rem; /* 見出しのフォントサイズをさらに大きく */
}

.pair-plan tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* #B76E79の薄いシェード */
}


.pair-plan tbody td {
  padding: 15px; /* セルのパディングを増やす */
  border: 1px solid #ddd; /* 指定されたカラーの境界線 */
}

/* 税込テキストのスタイルは共通 */
.tax-included {
  font-size: 0.8rem;
  margin-left: 5px;
}

@media (min-width: 1280px) {
  .first-view-plan{
   
  }
}

@media (max-width: 768px) {
  .first-view-plan {
      height: 30vh; /* ビューポートの高さいっぱい */
  }

  .price-table-container {
    text-align: center;
    margin: 20px auto 70px;
  }

  .diet-plan thead th{
    font-size: 18px;
  }

  .light-plan thead th, .line-support thead th{
    font-size: 18px;
  }

  .price-table td{
    font-size: 16px;
    font-weight: 600;
  }
}

.price, .tableArea {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 6rem;
  padding: 20px;
}

.plan-catch-color {
  font-size: 2rem;
  font-weight: 600;
  color: #B76E79;
  line-height: 1.7;
  text-align: center;
  letter-spacing: .06em;
  margin: 25px 0 2rem;
}

.tableBox table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.tableBox table thead th {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: 400;
  padding: 24px;
  border-right: solid 1px #f0f2f3;
}

.tableBox table thead th:last-child {
  border-right: none;
}

.tableBox table tbody th, 
.tableBox table tbody td {
  text-align: center;
  padding: 24px;
  border-right: solid 1px #f0f2f3;
}

.tableBox table tbody th {
  font-weight: 500;
}

.tableBox table tbody tr:nth-child(even) th,
.tableBox table tbody tr:nth-child(even) td {
  background: #e6e1dc;
}

.tableBox table tbody td {
  color: #333;
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}

.tableBox table tbody .yen {
  font-size: 1.6rem;
  font-weight: 500;
  color: #B76E79;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}

.tableBox table tbody .tax {
  display: inline;
  font-size: 1.2rem;
  color: #666;
  margin-left: 5px;
}

.price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.original-price {
  text-decoration: line-through;
  color: #666;
  font-size: 18px;
}

.original-price-02{
  text-decoration: line-through;
  color: #666;
  font-size: 14px;
}

.discounted-price-container {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.campaign-label {
  background-color: #B76E79;
  color: #fff;
  padding: 3px;
  margin-right: 5px;
  font-size: 0.65rem;
  font-weight: 400;
  border-radius: 5px;
}

.arrow {
  font-size: 1.5rem;
  margin-right: 5px;
  color: #B76E79;
}
.discounted-price {
  color: #B76E79;
  font-weight: 500;
  font-size: 25px;
}

.discounted-price-table {
  color: #B76E79;
  font-weight: 500;
  font-size: 25px;
}


.tableBox table tbody {
  font-size: 1.2rem;
  color: #666;
}

.tableBox table tbody tr:last-child th, 
.tableBox table tbody tr:last-child td {
  border-bottom: solid 1px #f0f2f3;
}

.tableBox table tbody tr:last-child td:last-child {
  border-right: none;
}

@media (max-width: 768px) {
  .tableBox table thead {
      display: none;
  }

  .price, .tableArea {
      padding: 10px;
      margin: 0 auto 2rem;
  }

  .discounted-price-table {
    font-size: 12px;
  }
  

  .tableBox table tbody, 
  .tableBox table tr, 
  .tableBox table td, 
  .tableBox table th {
      display: block;
      width: 100%;
      text-align-last: center;
  }

  .tableBox table tbody th {
      background: #e6e1dc;
      text-align: left;
      padding: 15px;
      border: none;
      font-size: 14px;
  }

  .tableBox table tbody td {
      text-align: left;
      padding: 15px;
      font-size: 15px;
      background: #fff!important;
      border: none;
      border: 1px solid #f0f2f3;
  }

  .tableBox table tbody .yen {
      font-size: 18px;
      white-space: normal;
  }

  .tableBox table tbody .tax {
      display: inline;
      font-size: 13px;
      color: #666;
      margin-left: 5px;
  }

  .tableBox table tbody .bikou {
      font-size: 13px;
      color: #B76E79;
  }

  .discounted-price {
    font-size: 18px;
  }

  .plan-catch-color {
      font-size: 18px;
      margin: 0px 0 1rem;
  }

  .tableBox table tbody .vip {
      background-color: #B76E79;
      color: #fff;
      text-align: left;
      padding: 15px;
  }
  .campaign-label{
    font-size: 0.4rem;
  }

  .original-price {
    font-size: 10px;
  }
  .original-price-02{
    font-size: 10px;
  }
  .arrow {
    font-size: 10px;
  }
}

.comparisonTableArea {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 6rem;
}

.comparisonGoldCatch {
  font-size: 2rem;
  color: #B76E79;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  letter-spacing: .06em;
  margin: 25px 0 2rem;
}

.comparisonTableBoxWrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  padding: 0 15px;
}

.comparisonTableBox {
  overflow-x: auto;
  width: 100%;
}

.comparisonTableBox table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparisonTableBox table thead th,
.comparisonTableBox table tbody th,
.comparisonTableBox table tbody td {
  text-align: center;
  padding: 30px;
  border: 1px solid #f0f2f3;
  font-weight: 600;
  font-size: 18px;
  min-width: 150px; /* Ensure columns have a minimum width */
}

.comparisonTableBox table thead th {
  background: #000;
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 24px;
  z-index: 2;
}

.comparisonTableBox table tbody th {
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 1;
}

.comparisonTableBox table tbody td {
  color: #333;
}

.comparisonTableBox table tbody .vip {
  background-color: #B76E79;
  color: #fff;
  white-space: nowrap; /* Prevent line break */
}

.comparisonTableBox table tbody .tax {
  display: inline;
  font-size: 0.8rem;
  color: #666;
  margin-left: 5px; /* Add some space between the price and the tax text */
}

/* スクロールボタンのスタイル */
.scrollLeft, .scrollRight {
  display: none;
}

.scrollLeft, .scrollRight {
  background: #B76E79;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.scrollLeft {
  left: 0;
}

.scrollRight {
  right: 0;
}

/* SP版対応 */
@media (max-width: 768px) {
  .comparisonTableBoxWrapper {
      overflow-x: auto;
  }

  .comparisonTableBox {
      overflow-x: auto;
  }

  .comparisonTableBox table {
      width: auto; /* Allow table to grow beyond container width */
      min-width: 600px; /* Ensure a minimum width for better readability */
  }

  .comparisonTableBox table thead th,
  .comparisonTableBox table tbody th,
  .comparisonTableBox table tbody td {
      padding: 16px;
      font-size: 0.8rem;
  }

  .comparisonTableBox table thead th,
  .comparisonTableBox table tbody th {
      position: sticky;
      z-index: 2;
  }

  .comparisonTableBox table thead th {
      top: 0;
      left: 0;
      background: #000;
  }

  .comparisonTableBox table tbody th {
      left: 0;
      background: #f2f2f2;
  }

  .scrollLeft, .scrollRight {
      display: block;
  }
}

.installmentButtonWrapper {
  text-align: center;
  margin-top: 20px;
}

.installmentButton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  background-color: #B76E79;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.5rem;
  width: 480px;
  transition: background-color 0.3s ease;
}

.installmentButton:hover {
  background-color: #a65f6b;
}

.installmentButton .icon,
.installmentButton .arrow {
  width: 40px;
  height: 40px;
}

.installmentButton .icon {
  margin-right: 10px;
}

.installmentButton .arrow {
  margin-left: 10px;
}

.planContent {
  margin: 20px auto;
  max-width: 1100px;
}

.planDescription {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-evenly;
}

.planImage {
  width: 50%;
}

.planImage img {
  width: 100%;
  height: auto;
  margin-right: 20px;
}

.planText p {
  font-size: 16px;
  color: #333;
}

.pointContent {
  margin: 55px 0px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.pointContent h3 {
  font-size: 1.6rem;
  color: #B76E79;
  margin-bottom: 10px;
  padding-left: 10px;
}

.points {
  list-style: none;
  text-align: left;
  padding: 0;
  border: 1px solid #B76E79;
}

.points li {
  font-size: 16.5px;
  color: #333;
  padding: 20px;
  font-weight: 600;
  border-bottom: 1px solid #B76E79;
}

.points li:last-child {
  border-bottom: none;
}

.pointNumber {
  color: #B76E79;
  font-weight: bold;
}

.recommendContent {
  position: relative;
  border: 1px solid #B76E79;
  padding: 20px;
  padding-top: 40px; /* h3にかぶさる余白 */
  margin: auto;
}

.recommendContent h3 {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  color: #B76E79;
  background: #fff;
  padding: 0 10px;
}

.recommendBox {
  padding: 20px 80px;
}

.recommendList {
  list-style: none;
  padding: 0;
}

.recommendList li {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 20px;
}

.recommendList img {
  width: 23px;
  height: auto;
  margin-right: 10px;
}

/* プライムコース */
.primeBox {
  max-width: 1100px;
  margin: 0 auto;
  padding: 45px;
  background: #fdedf0;
}

.primeGoldCatch {
  font-size: 1.8rem;
  color: #B76E79;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
}

.primeMenu {
  display: flex;
  justify-content: center;
  margin: 3rem 0 1rem;
  flex-wrap: wrap;
}

.primeItemBox {
  width: 320px;
  background: #fff;
  margin: 0 2rem 2rem 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.primeTit {
  background: #B76E79;
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 23px;
  padding: 5px;
}

.primeTxtBox {
  padding: 2rem;
  text-align: center;
}

.primeTime {
  font-size: 1.2rem;
  color: #666;
}


.per1-price{
  font-size: 16px;
}


.primeYen {
  font-size: 2rem;
  color: #B76E79;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}

.primeTax {
  font-size: 1rem;
  color: #666;
}

.primeAttention {
  font-size: 1rem;
  color: #666;
}

/* SP版対応 */
@media (max-width: 768px) {

  .installmentButton{
    padding: 10px 15px;
    width: 80%;
    font-size: 16px;
  }

  .installmentButton .icon, .installmentButton .arrow{
    width: 35px;
    height: 35px;
  }

  .planDescription {
    flex-direction: column;
    align-items: center;
  }

  .planImage {
    width: 100%;
    margin-bottom: 20px;
  }

  .planContent{
    padding: 0 10px;
  }

  .planText{
    width: 100%;
  }

  .pointContent {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    margin: 0px 0 20px;
  }

  .recommendBox {
    padding: 0px;
  }

  .primeMenu {
    flex-direction: column;
    align-items: center;
    margin: 1rem 0 1rem;
  }

  .recommendContent h3{
    top: -13px;
    left: 25%;
    transform: translateX(-16%);
    font-size: 5vw;
  }

  .primeBox{
    padding: 20px;
    margin: 0 10px;
  }

  .primeItemBox {
    width: 100%;
    margin: 10px 0;
  }

  .points li{
    font-size: 16px;
  }

  .recommendList li{
    font-size: 3.9vw;
  }

  .pointContent h3{
    font-size: 23px;
  }

  .primeGoldCatch{
    font-size: 21px;
  }

  .prime-box-text, .primeAttention{
    font-size: 13px;
  }

  .primeTit{
    font-size: 20px;
  }

  .primeTime{
    font-size: 18px;
  }

  .per1-price{
    font-size: 14px;
  }

  .primeYen{
    font-size: 23px;
  }

  .primeTxtBox {
    padding: 1.5rem;
  }
}

.courseTableArea {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 3rem auto 3rem;
}

.courseTableBoxWrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  padding: 0 10px;
  margin-bottom: 1.5rem;
}

.scroll-nav {
  text-align: center;
  margin: 10px 0;
  font-size: 0.9rem;
  color: #666;
}

.courseTableBox {
  overflow-x: auto;
  width: 100%;
}

.courseTableBox table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.courseTableBox table thead th,
.courseTableBox table tbody th,
.courseTableBox table tbody td {
  text-align: center;
  padding: 20px;
  border: 1px solid #f0f2f3;
  font-weight: 600;
  font-size: 18px;
}

.courseTableBox table thead th {
  background: #e6e1dc;
  color: #666666;
  font-weight: 500;
}

.courseTableBox table thead tr:first-child th {
  background: #B76E79;
  color: #fff;
  font-size: 1rem;
  padding: 15px;
}

.courseTableBox table tbody th {
  font-weight: 600;
}

.courseTableBox table tbody td {
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

.courseTableBox table tbody .vip {
  background-color: #B76E79;
  color: #fff;
  white-space: nowrap;
}

.courseTableBox table tbody .tax {
  display: inline;
  font-size: 0.8rem;
  color: #666;
}



/* SP版対応 */
@media (max-width: 768px) {
  .courseTableBoxWrapper {
    overflow-x: auto;
  }

  .courseTableBox {
    overflow-x: auto;
    text-align: -webkit-center;
  }

  .courseTableBox table {
    width: auto;
    /* min-width: 600px; */
  }

  .courseTableBox table thead th,
  .courseTableBox table tbody th,
  .courseTableBox table tbody td {
    padding: 5px;
    font-size: 0.7rem;
  }

  .courseTableBox table thead th,
  .courseTableBox table tbody th {
    position: static;
  }

  .courseTableBox table thead th {
  
  }

  .courseTableBox table thead tr:first-child th {
    background: #B76E79;
  }

  .courseTableBox table tbody th {
    background: #f2f2f2;
  }

  .courseTableBox table tbody .tax {
    font-size: 0.5rem;
  }

  .scroll-nav {
    display: block;
  }
}

/* -----------------------ビフォーアフター--------------------------------------------------------------------------------------------- */

.bfafhead-title{
  font-weight: 500;
  font-size: 26px;
  text-align: center;
  margin-bottom: 90px;
  line-height: 60px;
  margin-top: 110px;
  color: #B76E79;
}

.bfafBox{
max-width: 1100px;
  margin: 0 auto;
  padding: 60px;
  background: linear-gradient(rgba(255,245,245,0.5), rgba(255,245,245,0.8)),  url("../img/bfaf-image-02.png") no-repeat center center; /* 背景画像追加 */
  background-size: cover;   /* 画像をエリア全体にフィット */
  text-align: center;
}

.bfaf-special-text{
    font-size: 23px;
    font-weight: 600;
    padding: 0.2em
25px;
    background-color: #ffffff;
    border-left: 5px solid #B76E79;
    display: inline-block;
    margin-bottom: 40px;
}

.beforeafter-text {
  font-size: 1.05em; /* 通常サイズ */
  line-height: 2; /* 行間を広めに */
  font-weight: 600;
  margin-top: 30px;
}

.beforeafter-highlight {
     font-weight: bold;
    font-size: 1.7em;
    padding: 0 5px;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #B76E79;
    text-underline-offset: 7px;
}

.beforeafter-vip {
  font-size: 2em;
  font-weight: bold;
  color: #B76E79;
}

.beforeafter-title {
  display: flex;
  align-items: flex-end;
  gap: 1em;
    justify-content: center;
        margin-top: 110px;
}

.beforeafter-title-goal {
  font-size: 4em; /* 大きめ */
  font-weight: bold;
  line-height: .7;
   color: rgba(183, 110, 121, 0.5); /* B76E79 50%透過 */
}

.beforeafter-title-text {
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px solid #B76E79; /* 下線カラー */
  padding-bottom: 0.1em;
}

.bfaf-layout-center{
      margin: 20px auto;
      display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    border: 2px solid #B76E79;
}

.bfaf-layout-center-02{
  margin: 20px auto;
      display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
}

.beforeafter-trainer-comment {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 2px solid #B76E79;
  background-color: #F8F6F4;
  max-width: 1200px;
  gap: 2em;
      margin: 0 auto 150px;
}

.beforeafter-trainer-left {
  flex: 2;
      padding: 2.5em 0 2.5em 2.5em;
}

.beforeafter-trainer-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #B76E79;
  margin-bottom: 1.5em;
      text-align: center;
}

.beforeafter-trainer-text {
    font-size: 16px;
  color: #333;
  line-height: 2;
      text-align-last: center;
}

.beforeafter-trainer-right {
  flex: .5;
  text-align: center;
  padding-top: 1.5em;
}

.beforeafter-trainer-name {
  font-weight: bold;
  font-size: 1.2em; /* 名前をやや大きめに */
  color: #333;
}

.beforeafter-trainer-role {
  font-size: 0.8em; /* 「トレーナー」を小さく */
}

.beforeafter-trainer-image {
  max-width: 185px;
  justify-self: center;
  height: auto;
}

.bfaf-catch-margin{
  margin: 100px 0 30px;
}

@media (max-width: 768px) {
  .bfafhead-title{
  
        font-size: 4vw;
        line-height: 2.5;
            margin: 50px 0;
  }

  .bfafBox{
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px 18px;
    background: linear-gradient(rgba(255,245,245,0.3), rgba(255,245,245,0.8)),  url("../img/bfaf-image.png") no-repeat center center; /* SP用背景 */
    background-size: cover;
  }

  .bfaf-special-text{
            font-size: 3.6vw;         /* 23px → 読みやすいサイズに */
    padding: 0.45em 16px;     /* 左右余白を縮小 */
    border-left-width: 4px;   /* 線をやや細く */
    margin-bottom: 20px;
    display: block;           /* 1行ずつ見やすく */
  }

  .beforeafter-text{
    font-size: 1em;     /* ほぼ本文サイズ */
    line-height: 2.5;
    margin-top: 18px;
    text-align: center;
    padding: 0 2px;     /* 端の下線欠け防止 */
  }

  .beforeafter-highlight{
    font-weight: 700;
    font-size: 6vw;        /* 1.7em → 画面幅に最適化 */
    padding: 0 3px;
    text-underline-offset: 4px; /* 下線の位置を調整 */
  }

  .beforeafter-vip{
    font-size: 7vw;  /* 2em → 抑えめに */
    line-height: 1.3;
    display: inline;   /* 自然な折返し */
  }

  .bfaf-layout-center {
    margin: 30px 7px 0;
    display: block;
  }

.beforeafter-title {
  display: flex;
  flex-direction: column;   /* ← 縦並び */
  align-items: center;      /* 中央寄せ */
  text-align: center;       /* テキスト中央 */
  margin-top: 50px;
  gap: 0.5em;               /* GOALとテキストの間隔 */
}

.beforeafter-title-goal {
         font-size: 10vw;
  font-weight: bold;
  line-height: 1;
  color: rgba(183, 110, 121, 0.5); /* B76E79 50%透過 */
}

.beforeafter-title-text {
          font-size: 4vw;
  font-weight: bold;
  border-bottom: 2px solid #B76E79; /* 下線カラー */
  padding-bottom: 0.2em;
}

.beforeafter-trainer-comment {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8em;
   margin: 20px 7px 70px;
    position: relative;
  }


  /* ラッパーをフラット化して子要素を直接並べ替える */
  .beforeafter-trainer-left,
  .beforeafter-trainer-right {
    display: contents;
  }

  /* 並び順：タイトル→写真→名前→コメント */
  .beforeafter-trainer-title {order: 1;
        width: 100%;
        font-size: 4.5vw;
        margin-bottom: 0em;
              padding: 22px 0 5px; }
  .beforeafter-trainer-image { order: 2; max-width: 145px; height: auto; }
  .beforeafter-trainer-name  { order: 3; font-size: 1.1em; }
  .beforeafter-trainer-text  { order: 4;         font-size: 3.2vw; line-height: 1.85; padding: 0 1em 1.2em; }

  /* 下地より手前に出す */
  .beforeafter-trainer-title,
  .beforeafter-trainer-image,
  .beforeafter-trainer-name,
  .beforeafter-trainer-text { position: relative; z-index: 1; }

  .bfaf-catch-margin {
    margin: 50px 0 10px;
}

}



/* -----------------------プライバシーポリシー--------------------------------------------------------------------------------------------- */

.pri-container{
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.privacy-container {
  padding: 20px;
}

.privacy-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.privacy-section {
  margin-bottom: 20px;
}

.privacy-section h2 {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
}

.privacy-section p {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
}

.privacy-contact {
  margin-top: 30px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.privacy-contact p {
  margin-bottom: 10px;
}

.privacy-contact .contact-info {
  font-size: 16px;
}