@charset "UTF-8";
:root {
  --main-color: #52d194;
  --base-color: #424242;
  --border-color: #52d194;
  --font-sans: "小塚ゴシック Pr6N R", "Futura", Verdana, sans-serif;
  --font-plus: "小塚ゴシック Pr6N R", "Futura", sans-serif;
  --font-roboto: "Roboto", sans-serif;
}

*,
::before,
::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Font */
@font-face {
  font-family: "小塚ゴシック Pr6N R";
  src: url("assets/fonts/KozGoPr6N-Regular.woff2") format("woff2"),  /* 最新ブラウザ向けのフォーマット */
       url("assets/fonts/KozGoPr6N-Regular.woff") format("woff"),    /* 互換性のあるフォーマット */
       url("assets/fonts/KozGoPr6N-Regular.otf") format("opentype"); /* フォールバック用のopentype */
  font-weight: normal;
}

@font-face {
  font-family: "Futura";
  src: url("assets/fonts/Futura.ttc") format("truetype");
  font-weight: normal;
}
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*--- ヘッダーのスタイル ---*/
header.header {
  background-color: #ffffff;
  padding: 0;
}

header.header .header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 1% 1%;
  box-sizing: border-box;
}

/* ロゴとタイトルのスタイル */
header.header .header_logo_title {
  display: flex;
  align-items: center;
  max-width: 50%;
  flex-shrink: 0;
}

header.header .header_logo img,
header.header .header_title img {
  display: block;
  max-width: 100%;
  height: auto;
  gap: 1vw;
}

header.header .header_logo img {
  width: auto;
  margin-right: 1vw;
}

header.header .header_title img {
  width: auto;
  margin-left: 1vw;
}

/* ボタンのスタイル */
header.header .header_buttons {
  display: flex;
  align-items: center;
  gap: 1vw;
}

header.header .header_buttons .image-container {
  position: relative;
}

header.header .header_buttons a {
  display: block;
  position: relative;
}

header.header .header_buttons a img {
  display: block;
  height: 6vh; /* 画面高さの8% */
  width: auto;
}

header.header .overlay-text {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -55%);
  font-size: 2vh; /* 画面高さに応じたフォントサイズ */
  color: white;
  font-weight: bold;
  white-space: nowrap;
}

/* モバイル用のレスポンシブデザイン */
@media (max-width: 768px) {
  header.header .header_container {
    flex-direction: column;
    align-items: center;
    padding: 2% 2%;
  }

  header.header .header_logo_title {
    max-width: 100%; /* モバイル時は全幅使用 */
    padding-bottom: 1%;
  }

  header.header .header_buttons {
    gap: 2vw;
  }

  header.header .header_buttons a img {
    height: 5.5vh;
  }

  header.header .overlay-text {
    font-size: 1.8vh;
    left: 55%;
  }

  header.header {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
  }

  /* 非表示時のスタイル */
  header.header.hide {
    transform: translateY(100%);
  }

  /* フローティングヘッダー専用のLINEボタンに振動エフェクトを追加 */
  .floating-line-button-ripple {
    position: relative;
    overflow: hidden;
    animation: floating-header-btn-animation 2s infinite; /* ボタンの振動エフェクト */
  }

  /* 振動エフェクトのアニメーションキー */
  @keyframes floating-header-btn-animation {
      0% {
          transform: translate(4px, 0px);
      }
      5% {
          transform: translate(-4px, 0px);
      }
      10% {
          transform: translate(4px, 0px);
      }
      15% {
          transform: translate(-4px, 0px);
      }
      20% {
          transform: translate(4px, 0px);
      }
      25% {
          transform: translate(-4px, 0px);
      }
      30% {
          transform: translate(0px, 0px);
      }
  }

}

/*--- MVのスタイル ---*/
section.mv .content-mv img {
  width: 100%;
  height: auto;
  display: block;
}

section.whatis .content-whatis img{
  width: 100%;
  height: auto;
  display: block;
}

/* 動画コンテナ */
section.video .content-video{
  position: relative;
}
section.video .content-video  img{
  width: 100%;
  height: auto;
  display: block;
}

section.video .video-container {
  position: absolute;
  top: 65%;
  left: 50%;
  width: 603px;
  height: 340px;
  transform: translate(-50%, -50%);
}

section.video .video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media screen and (max-width: 768px) {
  header.header{
    background-color: #BBE4D0;
  }
  section.video .content-video {
    width: 100%; 
    max-width: none;
    margin: 0 auto; 
  }

  section.video .video-container {
    width: 90%;
    height: auto;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  section.video .video-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


.slider-container {
  position: relative;
  width: 70%;
  max-width: 800px; /* 必要に応じて調整 */
  max-height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
}

.slider {
  width: 100%; /* 変更: 100%に設定 */
  display: flex;
  transition: transform 0.5s ease;
}

.slider img {
  object-fit: cover;
  width: 50%; /* 変更: 100%に設定 */
  max-width: 100px;
  max-height: 500px;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1000; /* 追加: 他の要素より前面に表示 */
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

@media (max-width: 768px) {
  /* スライダー全体の幅を100%に設定 */
  .reason .slider {
    width: 100%;
    display: flex;
    transition: transform 0.5s ease;
  }

  /* スライダーコンテナとラッパーの幅を100%に設定 */
  .reason .slider-container,
  .reason .slider-wrapper {
    width: 100%;
    max-width: 300px; /* 必要に応じて調整 */
    margin: 0 auto;  /* 中央揃えにする */
  }

  /* スライダー内の画像を1枚表示に設定 */
  .reason .slider img {
    width: 100%; /* 1枚表示に変更 */
    max-width: 100%; /* 最大幅を100%に設定 */
    max-height: 500px;
    height: auto;
    margin: 0; /* 余計なスペースをなくす */
  }

  /* ナビゲーションボタンのサイズを調整（必要に応じて） */
  .reason .prev, .reason .next {
    padding: 8px;        /* ボタンのパディングを調整 */
    width: 35px;         /* ボタンの幅を調整 */
    height: 35px;        /* ボタンの高さを調整 */
    font-size: 16px;     /* 矢印のサイズを調整 */
  }
}




/* LINE購入ボタン */
section.line-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* コンテナの設定 */
section.line-section .line-container {
  width: 100%;
  position: relative;
}

/* 背景画像のスタイル */
section.line-section .line-background {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタンを背景画像の上に配置 */
section.line-section .line-button-overlay {
  position: absolute;
  top: 80%; /* デスクトップ時のボタンの縦位置 */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ボタンのスタイル */
section.line-section .line-button-overlay .image-container {
  position: relative;
  width: 40%;
}

section.line-section .line_button_green,
section.line-section .line_button_pink {
  display: block;
  position: relative;
  width: 100%;
}

/* ボタン画像のスタイル */
section.line-section .line_button_green img,
section.line-section .line_button_pink img {
  display: block;
  width: 100%;
  height: auto;
}

/* オーバーレイテキストのスタイル */
section.line-section .line_button_green .overlay-text,
section.line-section .line_button_pink .overlay-text {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  font-size: 20px; /* フォールバックのサイズ */
  font-size: calc(1vw + 1vh);
  color: white;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none; /* テキストがクリックを妨げないようにする */
}

/* ヘッダー以外のLINEボタン専用のエフェクト */
.line-button-effect {
  position: relative;
  overflow: hidden;
}

/* エフェクトのスタイル */
.line-button-effect::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明の白色 */
  animation: line-btn-animation 2.5s ease-in-out infinite;
}

/* エフェクトのアニメーションキー */
@keyframes line-btn-animation {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


/* モバイル用レスポンシブデザイン */
@media (max-width: 768px) {
  section.line-section .line-button-overlay {
    flex-direction: column; /* ボタンを縦に並べる */
    top: 77%; /* ボタンの縦位置を調整 */
    left: 50%;
    width: 75%; /* ボタンコンテナの幅を調整 */
    align-items: center; /* 子要素を中央揃え */
    gap: 10px; /* ボタン間のスペースを調整 */
  }

  section.line-section .line-button-overlay .image-container {
    width: 100%; /* 各ボタンをコンテナ幅に合わせる */
    margin: 0;
  }

  section.line-section .line_button_green img,
  section.line-section .line_button_pink img {
    width: 100%; /* ボタン画像の幅を親要素に合わせる */
    height: auto;
    margin: 1% 0;
  }

  section.line-section .line_button_green .overlay-text,
  section.line-section .line_button_pink .overlay-text {
    font-size: 24px; /* フォールバックのサイズ */
    font-size: calc(2vw + 2vh);
  }
}

section.worries .content-worries img{
  width: 100%;
  height: auto;
  display: block;
}

section.basis {
  background: linear-gradient(to right, #48B2C7, #52D194);
  /* 必要に応じて以下を追加 */
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
section.basis .content-basis img{
  width: 100%;
  height: auto;
  display: block;
}
section.flora .content-flora img{
  width: 100%;
  height: auto;
  display: block;
}


/* reasonセクションの背景画像を設定 */
section.reason {
  background-image: url('../images/reasonbackglound.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
section.reason .reason_detail{
  padding-top: 1%;
}
section.reason .reason-content-reason2
section.reason .reason-content-reason3{
  padding-top: 5%;
}

section.reason .reason-container img {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* 中央揃え */
}



/* 各セクションのコンテンツスタイル */
.reason {
  display: flex;
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin: 0 auto;
  width: 100%;
}

.reason img {
  max-width: 100%;
  height: auto;
}

.reason-content-reason1, .reason-content-reason2, .reason-content-reason3 {
  text-align: center; /* コンテンツを中央揃え */
}

/* モバイル用レスポンシブデザイン */
@media (max-width: 768px) {
  section.reason .reason-container img {
    width: 100%;      /* モバイルでは横幅いっぱいに表示 */
  }

  /* 必要に応じてセクション全体のパディングも調整 */
  .reason {
    padding: 0 15px;      /* 左右に適度なパディングを追加 */
  }
  /* 上部の reason-content-reason2 のみ横幅を小さくする */
  .reason2 > .reason-content-reason2:first-of-type {
    width: 80%;         /* 横幅を小さく設定 */
    margin: 0 auto;     /* 中央揃え */
  }
}

section.doctor .content-doctor img{
  width: 100%;
  height: auto;
  display: block;
}

section.takahata .content-takahata img{
  width: 100%;
  height: auto;
  display: block;
}

section.tanaka .content-tanaka img{
  width: 100%;
  height: auto;
  display: block;
}

section.minakushi .content-minakushi img{
  width: 100%;
  height: auto;
  display: block;
}

.flow .content-flow img {
  max-width: 100%;
  width: auto;
}
/* ご利用の流れ */
.flow{
  background: linear-gradient(to right, #48B2C7, #52D194);
}
section.flow .content-flow{
  padding: 5%;
}
section.flow .content-flow img {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* 中央揃え */
}

/* モバイルデバイスでの調整 */
@media screen and (max-width: 768px) {
  section.flow .content-flow img {
    width: 90%;
  }
}

/* よくある質問セクション */
.qanda {
  background: linear-gradient(to right, #FFFFFF, #FFFFFF, #BAE8DC);
  padding: 40px 20px;
  width: auto;
}

.qanda .title {
  text-align: center;
  margin-bottom: 30px;
}
.qanda .title img {
  width: 30%; /* 親要素の幅に合わせる */
  height: auto; 
  display: block;
  margin: 0 auto;
}


.element-qanda dl {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 1%;
}

.element-qanda dl dt, .element-qanda dl dd {
  width: 100%;
  box-sizing: border-box;
}

.element-qanda dl dt {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: white;
  cursor: pointer;
  position: relative;
}

.element-qanda dl dt img {
  width: 100%;
  height: auto;
}

.element-qanda dl dt .toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: white;
  cursor: pointer;
}

.element-qanda dl dd {
  display: none;
  background-color: #ffffff;
  line-height: 1.6;
  width: 100%;
}

.element-qanda dl dd img {
  width: 100%;  
  height: auto; 
  display: block;
  margin: 0 auto;
}

.element-qanda dl dt .toggle-btn::after {
  content: "＋";
  font-size: 24px;
  background: linear-gradient(to right, #48B2C7, #52D194);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  color: transparent; 
}
.element-qanda dl.active dt .toggle-btn::after {
  content: "ー"; 
  font-size: 24px;
  background: linear-gradient(to right, #48B2C7, #52D194);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  color: transparent;
}


/* フッター設定 */
footer .footer-logo {
  padding: 18px 0 13px;
}
footer .footer-logo .logo {
  text-align: center;
}
footer .footer-logo .logo img {
  max-width: 131px;
  object-fit: contain;
}
footer .site-info {
  background: #1DA563;
  padding: 15px 0;
  text-align: center;
  letter-spacing: 0.4px;
}
.footer-logo .container {
  text-align: center;
}

.footer-logo .footer-links p {
  display: inline-block;
  margin: 0 10px;
}
footer .site-info p {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.48;
}
@media (max-width: 374px) {
  footer .site-info p {
    font-size: 11px;
  }
}

/*------ モバイル対応 ------*/
@media (min-width: 768px) {
  .hide-pc {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hide-sp {
    display: none !important;
  }
}