/*
Theme Name: SAWAYAKA dental clinic
Theme URI: http://sawayaka-dental-clinic.local
Description: ケーススタディ
Version: 1.0.0
Author: Aoki Mai
Author URI: https://aozoram2.com
*/


body {
  font-family: 'Zen Maru Gothic', sans-serif;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  box-sizing: border-box;
}

/* デスクトップヘッダー */


.site-header {
  width: 100%;
  position: relative;
}

/* トップ画像 */
.slideshow {
  position: relative;
  width: 100%;
  height: 700px; /* 高さはデザインに合わせて調整 */
  overflow: hidden;



  box-sizing: border-box;



}

.slide {
  position: absolute; /* 親要素に対して絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 1s ease-in-out; /* 1秒かけて透明度を変化させるアニメーション */
  object-fit: cover; /* 画像を画面に合わせてトリミング */
}

.slide.active {
  opacity: 1; /* activeクラスが付いた画像は不透明にする */
  object-fit: cover; /* 画像を画面に合わせてトリミング */
}
  

/* ロゴのコンテナ */
.logo-container {
  position: absolute; /* 親要素（.header）を基準に配置 */
  bottom: 70px; /* 下部からの距離 */
  left: 50%; /* 左端から50%の位置 */
  transform: translateX(-50%); /* 中央に移動 */
  z-index: 10; /* 画像の上に表示されるようにする */
}

/* ロゴ画像 */
.header-logo {
  max-width: 500px; /* ロゴの最大幅 */
  height: auto;
}



/* 横長ナビゲーション */
.main-nav {
  width: 100%;

  background-color: #ECF8FF;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

.main-nav ul {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 中央揃え */
  list-style: none;
  padding: 20px;
  margin: 0;
  gap: 40px; /* メニュー間の間隔 */
}

.main-nav a {
  display: flex;
  align-items: center; /* テキストを垂直方向に中央揃え */
  justify-content: center; /* 中央揃え */
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  
}

.main-nav a:hover {
  color: #007bff; /* ホバー色 */
}



.header-buttons {
    position: absolute;
    top: 20px;
    left: 50px;
    display: flex;
    flex-direction: column; /* 要素を縦方向に並べる */
    gap: 15px; /* ボタン間の間隔 */
}


 /* 両ボタンのフォント */
.button-style {
   color: #FFFFFF; /* 文字色 */
    border: none; /* デフォルトの枠線を消す */
    padding: 15px 20px; /* 上下15px、左右20pxの余白 */
    border-radius: 40px;
    filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.25));
    cursor: pointer; /* マウスカーソルをポインターにする */
    transition: background-color 0.3s ease; 
    
    display: inline-flex;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 150px;


    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 子要素を水平方向の中央に配置 */
  
}

.button-style::before,
.button-style::after {
  content:'';
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}

.button-reserve {
    background: #1C63AE;
    color:#FFFFFF
}
.button-reserve::before{
    /*   アイコン   */
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.71231 32.25C6.28731 32.675 5.79381 32.8875 5.23181 32.8875C4.66981 32.8875 4.17581 32.675 3.74981 32.25C3.32381 31.825 3.11131 31.3375 3.11231 30.7875C3.11331 30.2375 3.32581 29.75 3.74981 29.325L8.69981 24.375L5.28731 23.25C4.93731 23.125 4.76881 22.8875 4.78181 22.5375C4.79481 22.1875 4.97581 21.95 5.32481 21.825L16.6873 18.4125C16.9623 18.3125 17.2123 18.375 17.4373 18.6C17.6623 18.825 17.7248 19.075 17.6248 19.35L14.2123 30.7125C14.0873 31.0625 13.8498 31.2435 13.4998 31.2555C13.1498 31.2675 12.9123 31.099 12.7873 30.75L11.6623 27.3375L6.71231 32.25ZM27.0373 18C27.0373 19.875 26.5123 21.5815 25.4623 23.1195C24.4123 24.6575 23.0248 25.751 21.2998 26.4C20.8998 26.55 20.5123 26.55 20.1373 26.4C19.7623 26.25 19.4998 25.975 19.3498 25.575C19.1998 25.175 19.2063 24.7875 19.3693 24.4125C19.5323 24.0375 19.8133 23.775 20.2123 23.625C21.3373 23.2 22.2563 22.475 22.9693 21.45C23.6823 20.425 24.0383 19.275 24.0373 18C24.0373 16.35 23.4498 14.9375 22.2748 13.7625C21.0998 12.5875 19.6873 12 18.0373 12C16.7623 12 15.6123 12.3565 14.5873 13.0695C13.5623 13.7825 12.8373 14.701 12.4123 15.825C12.2623 16.225 12.0058 16.5065 11.6428 16.6695C11.2798 16.8325 10.8988 16.8385 10.4998 16.6875C10.1008 16.5365 9.81981 16.274 9.65681 15.9C9.49381 15.526 9.48731 15.1385 9.63731 14.7375C10.2873 13.0375 11.3688 11.6565 12.8818 10.5945C14.3948 9.5325 16.1133 9.001 18.0373 9C20.5373 9 22.6623 9.875 24.4123 11.625C26.1623 13.375 27.0373 15.5 27.0373 18Z' fill='white'/%3E%3C/svg%3E");
    margin: 0 1em 0 1em;
  }
.button-reserve::after{
    /*　　矢印　　　 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E");
    margin: 0 1em 0 1em;
}
   .button-reserve:hover {
    background-color: #5FABFB; /* ホバー色 */
    }


.button-contact {
    background-color: #FF9500;
    color: #FFFFFF;
}

.button-contact::before{
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 27.5C4.74375 27.5 4.09658 27.231 3.5585 26.6929C3.02042 26.1548 2.75092 25.5072 2.75 24.75V8.25C2.75 7.49375 3.0195 6.84658 3.5585 6.3085C4.0975 5.77042 4.74467 5.50092 5.5 5.5H27.5C28.2563 5.5 28.9039 5.7695 29.4429 6.3085C29.9819 6.8475 30.2509 7.49467 30.25 8.25V24.75C30.25 25.5063 29.981 26.1539 29.4429 26.6929C28.9048 27.2319 28.2572 27.5009 27.5 27.5H5.5ZM16.5 17.875L5.5 11V24.75H27.5V11L16.5 17.875ZM16.5 15.125L27.5 8.25H5.5L16.5 15.125ZM5.5 11V8.25V24.75V11Z' fill='white'/%3E%3C/svg%3E");
    margin: 0 1em 0 1em;
}

.button-contact::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E");
    margin: 0 1em 0 1em;
  }
   .button-contact:hover {
    background-color: #FFC067; /* ホバー色 */
   }












   /* モバイルヘッダーの初期設定 */
.mobile-header {
  display: none; /* デフォルトでは非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ECF8FF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateY(-100%); /* 画面上部から見えない位置に移動 */
  transition: transform 0.3s ease-in-out; /* スクロール時のアニメーション */
  margin: 0;
  padding: 0;
}

/* スクロール時に表示されるクラス */
.mobile-header.is-visible {
  transform: translateY(0); /* 画面上部に表示 */
}

/* ヘッダーバーのレイアウト */
.mobile-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  width: 100%;
  width: calc(100%-40px);
}

.header-left-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-logo-mobile {
  height: 40px;
}

.phone-number-mobile {
  font-size: 18px;
  color: #1C63AE;
  text-decoration: none;
  margin-top: 3px;
}

/* ハンバーガーメニューアイコン */
.hamburger-menu {
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex; 
  justify-content: center; /* アイコンを水平方向中央に */
  align-items: center; /* これを追加 */
  z-index: 1001;
  
}


.hamburger-icon {
  width: 25px;
  height: 20px;
  position: relative;
  
}

.bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #1C63AE;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.bar-top { top: 0; }
.bar-middle { top: 8px; }
.bar-bottom { top: 16px; }

/* ハンバーガーメニューが開いた時のアイコンの変化 */
.hamburger-menu.is-active .bar-top {
  transform: rotate(45deg);
  top: 8px;
}

.hamburger-menu.is-active .bar-middle {
  opacity: 0;
}

.hamburger-menu.is-active .bar-bottom {
  transform: rotate(-45deg);
  top: 8px;
}

/* ハンバーガーメニューの中身 */
.mobile-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh; /* 画面全体を覆う */
  background-color: #ECF8FF;
  padding-top: 100px; /* ヘッダー分を避ける */
  transform: translateX(-100%); /* 画面左側から見えない位置に移動 */
  transition: transform 0.3s ease-in-out;
  overflow-y: auto; /* メニュー項目が多い場合にスクロール可能に */
}

.mobile-nav-menu.is-open {
  transform: translateX(0); /* 画面全体に表示 */
}

.mobile-nav-menu ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.mobile-nav-menu li {
  margin-bottom: 30px;
}

.mobile-nav-menu a {
  font-size: 20px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}






/* --- モバイルトップページ（メインセクション）のスタイル --- */
.hero-section-mobile {
  display: flex;
  display: none; /* デフォルトでは非表示 */
  position: relative; /* 子要素のロゴを重ねるための基準 */
  height: 500px; /* スライドショーの高さ */
  overflow: hidden; /* スライド画像のはみ出しを隠す */
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

.slideshow-mobile {
  position: relative;
  width: 100%;
  height: 100%; /* 親要素の高さを継承 */
  margin: 0;
  padding: 0;
}

.slide-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  object-fit: cover;
}

.slide-mobile.active-mobile {
  opacity: 1;
}

/* ロゴのコンテナ */
.hero-logo-container-mobile {
  position: absolute;
  bottom: 4em; /* スライドショー下部からの距離 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* スライド画像の上に表示 */
}

.hero-logo-mobile {
  max-width: 15em;
  
}

/* --- ボタンセクションのスタイル --- */
.mobile-buttons-section {
  display: flex;
  display: none;
  background-color: white;
  justify-content: center;
  align-items: center;
}

.mobile-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center; /* ボタンを中央に配置 */
}


/* メディアクエリでモバイル版ヘッダーを表示 */
@media (max-width: 768px) {
  .site-header {
    display: none;
  }
  .mobile-header,
  .hero-section-mobile {
    display: flex;
  }
  .mobile-buttons-section {
    display: flex;
  }
}















/*   お知らせ   */

/* お知らせセクション全体のスタイル */
.news-section {
  display: flex;
  flex-direction: column;
  padding: 100px 300px;
  background-color: #fff;
  color: #57331E;
}

/* セクションの見出しスタイル */
.news-section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.4rem; /* 1.2倍のサイズ */
  
}

/* 投稿リストのコンテナ */
.news-list {
  display: flex;
  flex-direction: column;
  
}

/* 個別の投稿スタイル */
.news-post {
  border-bottom: 1px solid #57331E; /* 下のボーダー */
  padding: 0px 8px;
  display: flex;        /* Flexboxを有効にする */
  flex-direction: row;
  align-items: center;  /* 垂直方向の中央揃え */
  gap: 4rem;            /* 投稿日とタイトルの間隔を設定 */
}


.news-post time {
  font-size: 1rem;
  display: block; /* 日付を独立したブロックにする */
  text-align: center;
}

.news-post h3 a {
  display: block;
  text-decoration: none;
  color: #57331E;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 1em 0;
}

.news-post h3 {
  margin: 0;
  width:calc(100% - 5em)


}

.news-post time {
  width: 5em;
}

.news-post-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*   固定ページ　　*/
.news-page {
  margin-bottom: 5vw;
}
.news-post-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
  width: auto; /* コンテナの幅 */
  height: auto; /* コンテナの高さ */
  /* 縦横比を保ったままコンテナに収める */
  overflow: hidden;
}

.news-post-image img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: contain; /* 画像がコンテナに収まるようにアスペクト比を維持して拡大縮小 */
}

.return-to-news-list {
  text-align: center;
}
.return-to-news-list-button {
  color: #57331E;
  text-decoration: none; /* 下線を削除 */
  font-size: 16px; /* フォントサイズ */
  transition: color 0.3s; /* ホバー時のアニメーション */
  cursor: pointer;
}

/* ホバー時のスタイル */
.return-to-news-list-button:hover {
  color: #CAB7AB;
}


@media (max-width: 768px) {
  
  .news-section {
    /* 左右のパディングを減らして画面いっぱいに表示 */
    padding: 40px 15px;
  }

  .news-section-title {
    /* フォントサイズを小さく */
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .news-post {
    /* 投稿日とタイトルの間隔を狭める */
    gap: 1rem;
    /* 垂直方向の中央揃えを維持 */
    align-items: center; 
    padding: 5px 0; /* 上下のパディングを少し追加 */
  }

  .news-post time {
    /* フォントサイズをさらに小さく */
    font-size: 0.85rem;
    width: 6em; /* 2025.09.17が入るように少し調整 */
  }

  .news-post h3 {
    width: calc(100% - 6em);
  }

  .news-post h3 a {
    font-size: 1rem;
    /* 上下のパディングを減らして行の高さを調整 */
    padding: 0.8em 0;
  }
}







/*     豆知識      */



/* 豆知識セクション全体のスタイル */
.trivia-section {
  display: flex;
  flex-direction: column;
  padding: auto;
  margin: 0 auto;
  background-color: #fff;
}

.trivia-section-title {
  padding: 2rem;
  align-items: center;
  text-align: center;
}

.trivia-posts {
  display: flex;
  flex-direction: row;
  margin: 20px;
  margin-bottom: 100px;
  gap: 20px;
}

/* 個別の投稿スタイル */
.trivia-post {
  flex: 1; /* 各投稿を均等な幅にする */
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  margin: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 投稿画像のスタイル */
.trivia-image {
  width: 100%; /* 親要素の幅いっぱいに表示 */
  height: auto; /* 高さを自動調整 */
  border-radius: 4px;
  margin-bottom: 10px; /* 画像とタイトルの間に間隔 */
}

/* 投稿タイトルのスタイル */
.trivia-post .post-title {
  text-decoration: none;
  color: #000;
  font-size: 1.1rem;
  font-weight: bold;
}




/* もっと見るボタン */
.more-info-button-container {
  text-align: center; /* ボタンを中央に寄せる */
  padding: 60px 0; /* 上下の余白を追加（調整可能） */
}

.more-info-button {
  /* デザインの指定 */
  display: inline-block; /* ボタンとして機能させる */
  padding: 10px 40px; /* 内側の余白（ボタンの大きさ） */
  background-color: #ffffff; /* 白塗り */
  color: #000000; /* 文字色：黒 */
  border: 1.5px solid #000000;
  border-radius: 30px; /* 角を丸く（調整可能） */
  text-decoration: none; /* リンクの下線を消す */
  font-weight: bold; /* 文字を太く（任意） */
  cursor: pointer; /* マウスカーソルをポインターにする */

  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);

  /* ホバー時 */
  transition: all 0.3s ease; /* 変化を滑らかにする */
}

/* マウスオーバー時のスタイル（任意） */
.more-info-button:hover {
  background-color: #f0f0f0; /* 少しグレーにしてクリック感を出す */
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 影を小さく濃くして押されているように見せる */
}


@media (max-width: 768px) {
  .trivia-section {
    padding: 0;
    margin: 0 auto;
  
}
  .trivia-posts{
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
  }

  .trivia-post {
    margin: 20px;
    padding: 20px;
    justify-content: center;
  }
  .more-info-button {
    padding: 10px;
    margin: 0 auto;
    text-align: center;
    width: 60%;
  }

}






/*     豆知識　固定ページ　     */

.trivia-page {
  margin: 10px 20vw;
  padding: 0;
  padding-bottom: 50px;
}
.trivia-page-title {
  text-align: center;
}

.trivia-page-image {
  margin: 0 auto;
  max-width: 600px;
}
.trivia-page-image img {
  width: 100%;
}





.trivia-post-body h4 {
  /* 既存のスタイルを維持 */
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  color:#57331E;
  margin: 30px 0; /* 上下の余白を追加 */
  text-align: center; /* テキストが中央に来るように */
}

.trivia-post-body h4::before,
.trivia-post-body h4::after {
  content: "";
  height: 1px;
  background-color: #57331E;
  flex-grow: 1;
  /* 線とテキストの間隔を確保 */
  margin: 0 10px; 
}


.trivia-post-body h5 {
    position: relative;
    /* 「■」の分、左側に余白を開ける */
    padding-left: 25px;
    font-size: 1.1em;
}

.trivia-post-body h5::before {
    content: "■";
    position: absolute;
    /* 親要素の左端に配置 */
    left: 0;
    color: #1C63AE;
    font-size: 1.2em;
}




.return-to-trivia-list {
  text-align: center;
  padding: 70px;
  cursor: pointer;
  color: #57331E;
  
}
.return-to-trivia-list:hover {
  color: #CAB7AB;
  
}

@media (max-width: 768px) {
  .trivia-page {
    margin: 10px 5px;
  }
  .trivia-page-image {
    max-width: 300px;
  }

}










/*     当院について     */
.concept-section {
  margin-top: 160px;
  background-image: url("images/Concept-top.png");
  background-size: cover; /* 画像をセクション全体に広げる */
  background-repeat: no-repeat; 
  background-position: center; 
  height: 900px;
  display: flex;
  justify-content: flex-end; /* コンテンツを右端に配置 */
  align-items: center; /* 縦方向の中央寄せ（任意） */
  width: 100%; /* セクションの幅を設定 */
  position: relative;
  
}




/* テキストコンテンツを縦に並べるためのコンテナ */
.right-content {
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center; /* 中央寄せにする */
  padding: 20px;
  max-width: 400px; /* コンテンツの最大幅 */
  box-sizing: border-box;
  margin-right: 15vw; /* 画面幅の5%を余白に設定 */
}


/* タイトルに背景画像を設定 */
.title {
  font-size: 2rem; /* （16px基準の場合） */
  background-image: url('images/concept-title.png'); /* ここに画像のURLを設定 */
  background-size: cover; /* 画像が要素全体を覆うように調整 */
  background-position: center; /* 画像を中央に配置 */
  color: #1C63AE; /* テキストの色を白に（背景画像が見やすいように） */
  padding: 50px 50px 100px 50px;
  margin-bottom: 30px;
  text-align: center;
  width: 100%;
}

/* テキスト部分 */
.text {
  margin-bottom: 40px;
  line-height: 2;
}

/* リンクボタン */
.link {
  display: inline-block;
  padding: 10px 50px;
  background-color: #FF9500;
  color: white;
  text-decoration: none; /* 下線をなくす */
  border-radius: 30px; /* 角を丸くする */
  filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.25));
  cursor: pointer; /* マウスカーソルをポインターにする */
  transition: background-color 0.3s ease;
}

.link:hover {
  background-color: #FFC067;
}


/* 白帯テキスト専用の新しいコンテナ */
.left-content {
  position: absolute; /* 親要素の左下隅に固定 */
  bottom: 1vw;
  left: 0;
  /* Flexboxで縦に並べる */
  display: flex;
  flex-direction: column;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

/* 共通のテキストブロックのスタイル */
.text-block {
  background-color: white;
  font-size: 2rem;
  padding: 1vw 4vw ;
  max-width: 1000px;
  box-sizing: border-box;
}

/* 1つ目のテキストブロックの配置 */
.text-block-1 {
  transform: translateY(0);
}

/* 2つ目のテキストブロックの配置 */
.text-block-2 {
  transform: translateY(0.5vw) translateX(15vw);
}
.ansin{
  color:#FF9696;
}
.kazoku{
  color:#FF9500;
}



/* 既存のCSSのどこかに追加 */
.concept-section-mobile {
    display: flex;
    flex-direction: column;
    display: none; /* PC版では非表示 */
    width: 100%;
    text-align: center; /* 画像を中央寄せにするため */
}

.consept-mobile-image {
    max-width: 100%; /* 親要素からはみ出さないように */
    height: auto;
    display: block;
    display: none; /* PC版では非表示 */
}



@media (max-width: 768px) {

  .concept-section {
    display: none; /* mobile版では非表示 */
  }
  .concept-section-mobile{
    background-color: #ffffff; /* 必要に応じて背景色を白に戻す */
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content:center;
   
  }
  .title-mobile {
    font-size: 1.4rem;
    display: block; /* 非表示を解除し、表示させる */
    width: 80%; 
    align-items: center;
    padding: 50px 20px 70px 20px;
    background-image: url('images/concept-title.png'); /* ここに画像のURLを設定 */
    background-size: cover; /* 画像が要素全体を覆うように調整 */
    background-position: center; 
    color: #1C63AE;
  }


  .concept-mobile-image-container {
      display: block; /* 画像を表示 */
      width: 100%;
  }
  

  .text-mobile {
      text-align: center;
      padding: 0px 20px;
      line-height: 2.5em;
      
  }
  
  /* リンクボタン */
  .link-mobile {
    align-self: center; 
    margin: 30px 0px;
    display: inline-block;
    padding: 10px 50px;
    background-color: #FF9500;
    color: white;
    text-decoration: none; /* 下線をなくす */
    border-radius: 30px; /* 角を丸くする */
    filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.25));
    cursor: pointer; /* マウスカーソルをポインターにする */
    transition: background-color 0.3s ease;
  }
  .link:hover {
    background-color: #FFC067;
  }
}
  






/* 　院長の挨拶　　*/
.hello-section {
  display: flex;
  flex-direction: column;
  background-color: #ECF8FF;
  padding: 160px;
  margin: 50px 0 50px 0;
}

.hello-header {
  align-self: flex-start; /* 左寄せ */
  margin-left: 50px; /* 左側に余白 */
}

.hello-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.hello-text-content {
  flex: 1;
  max-width: 70%; /* テキストの最大幅を設定 */
  margin-right: 50px;
  font-size: 1.2rem;
  line-height: 2.5rem;
}

.matsumoto-image {
  flex: 1;
  max-width: 30%;
  text-align: center; /* 画像を右寄せ */
}

.hello-title {
  font-size: 2rem;
  font-weight: bold;
  color:#57331E;
}

.hello-line {
  width: 100px;
  height: 1px;
  background-color: #57331E;
  margin-top: 15px;
}






@media (max-width: 768px) {
  .hello-section {
    padding: 100px 5px;
    align-items: center; /* コンテンツ全体を中央寄せ */
    line-height: 2.5rem;
  }

  .hello-header {
    align-self: center; /* ヘッダーを中央寄せ */
    margin-left: 0;
    text-align: center;
  }

  .hello-body {
    flex-direction: column; /* 縦並び */
    padding:5px;
    align-items: center; /* 縦並びのアイテムを中央寄せ */
  }

  .hello-text-content {
    max-width: 100%;
    margin-right: 0;
    text-align: center;
    order: 2; /* 画像の後に表示 */
  }

  .matsumoto-image {
    max-width: 100%;
    order: 1; /* テキストより先に表示 */
    text-align: center;
  }
  .matsumoto-text{
    font-size: 0.8em;
    margin: 2px;
  }

  .hello-line {
    margin: 10px auto; /* 中央揃え */
  }
}










/*   Menu    */

.menu-section {
  margin-top: 100px;
  margin-bottom: 160px;
  padding: 5vw;
  text-align: center;
  max-width: 65%;
  margin-left: auto;
  margin-right: auto;
}

.menu-title {
  color: #1C63AE;
  font-size: 2rem;
  margin-bottom: 5vw;
}

.menu-block {
  display: flex;
  flex-wrap: wrap; /* アイテムを折り返して複数行に */
  justify-content: space-between; /* アイテムを均等に配置 */
  gap: 20px;
}

.menu-item {
  width: calc(50% - 10px); /* 2列にするための幅調整。間隔分を引く */
}

.menu-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* モバイル版のスタイル（768px以下） */
 @media (max-width: 768px) {
   .menu-block {
    flex-direction: column; /* 要素を縦一列に並べる */
    gap: 15px; /* モバイル版でのアイテム間の隙間 */
  }
  
   .menu-item {
    width: 100%; /* 親要素の全幅を使用 */
  }
}




/* FAQセクション全体 */
.faq-section {
  position: relative;
  width: 90%;
  padding:20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 160px;
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 背景画像のオーバーレイ */
.faq-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.faq-container {
  position: relative;
  z-index: 1;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.faq-title {
  color: #1C63AE;
  font-size: 2rem;
  margin-bottom: 50px;
  text-align: center;
}

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

/* 質問タブ */
.faq-item summary {
  background-color: #ECF8FF;
  padding: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  text-align: left;
  list-style: none;
}

/* ホバー時の色変更 */
.faq-item summary:hover {
  background-color: #CEE6F0;
}

/* 回答部分の初期状態 */
.faq-item p {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 0;
  line-height: 1.6;
  text-align: left;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
}

/* detailsが開いている時の回答 */
.faq-item details[open] p {
  padding: 20px;
  margin-top: 10px;
  max-height: 500px; /* 回答のテキスト量に応じて調整してください */
}

/* 矢印アイコン */
.faq-item summary::after {
  content: '▼';
  float: right;
  transition: transform 0.3s ease;
}

/* 矢印の回転アニメーション */
.faq-item details[open] summary::after {
  transform: rotate(180deg);
}
.fqa{
  padding-left: 1.5em; /* 左側に余白を追加 */
  padding-right: 1.5em; /* 右側に余白を追加 */

}





/*    guide     */


.guide-section {
  position: relative; /* 子要素の配置基準にする */
  padding: 160px 20px; /* 上下に広い余白、左右は適度な余白 */
  background-image: url("images/faq.jpg");
  background-size: cover;
  background-position: center;
}


.guide-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* 半透明の白を重ねる */
}

.guide-title {
  position: relative; /* 重ねた色の上に表示するため */
  text-align: center;
  margin: 0;
  color: #1C63AE; /* タイトルの色を調整 */
}

.image-container {
  position: relative; /* 重ねた色の上に表示するため */
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直方向の中央寄せ（もし必要なら） */
  margin-top: 20px; /* タイトルと画像の間に余白 */
}

.image-container img {
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto;
}

@media (max-width: 768px) {
  .guide-section {
    padding: 50px 10px; /* スマホ版ではパディングを減らす */
  }
  .image-container {
    margin: 10px 0; /* 画像周りの余白を調整 */
  }
}



/*    　　マップ　　     */

/* セクション全体の設定 */
.access-section {
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center; /* 左右中央に配置 */
  padding: 30px;
  margin: 50px;
}

/* マップコンテナの設定 */
.map-container {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 800px; /* マップの最大幅を設定（PC表示用） */
  margin-bottom: 20px; /* マップとテキストの間に余白を入れる */
}

.map-container iframe {
  width: 100%; /* コンテナの幅に合わせる */
  height: 400px; /* マップの高さを固定（必要に応じて調整） */
  border: none; /* デフォルトの枠線を消す */
}

/* テキストコンテナの設定 */
.address-text {
  text-align: left; /* テキストを中央寄せにする */
  font-size: 16px;
  color: #57331E;
  line-height: 1.6;
}

/* スマホ版での調整 */
@media (max-width: 768px) {
  .access-section {
    padding: 30px 3px;
  }
  .map-container iframe {
    height: 300px; /* スマホでは高さを低くする */
  }

  .address-text {
    font-size: 14px; /* スマホでは文字サイズを少し小さくする */
  }
}








/* フッター全体のスタイル */
.site-footer {
  display: flex;
  flex-direction: column;
  position: relative; /* 背景の配置基準 */
  background-image: url('images/footer.png');
  background-size: cover;
  background-position: center;
  padding: 0px 20px; /* 上下左右の余白 */
  text-align: center; /* コンテンツの中央揃え */
  margin: 0 auto;
  
}


/* フッターコンテンツを中央に配置 */
.footer-content {
  display: flex;
  flex-direction: column;
  padding: 5px;
}

/* --- 上部ナビゲーションメニュー --- */
.footer-nav ul {
  list-style: none;
  gap: 20px; /* 項目間の余白 */
  display: flex; /* ナビゲーション項目を横に並べる */
  justify-content: center; /* 中央に配置 */
  flex-wrap: wrap; /* スマホで折り返すように */
  margin-bottom: 40px;
  padding: 0;
}

.footer-nav a {
  color: #000;
  margin: 0 auto;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: #c0c0c0; /* ホバー時の色 */
}

/* --- 下部コンテンツのレイアウト --- */
.footer-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* スマホで折り返すように */
  justify-content: space-between; /* 子要素を両端に配置し、間に均等なスペースを設ける */
  align-items: flex-start; /* 子要素の上端を揃える */
  
}

/* 左側のボタン */
.footer-bottom-left {
    display: flex;
    flex-direction: column; /* 要素を縦方向に並べる */
    margin: 0 auto;
    gap: 15px; /* ボタン間の間隔 */
}


/* 中央のロゴと電話番号 */
.footer-bottom-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  color: #1C63AE;
}

.footer-logo {
  max-width: 300px; /* ロゴ画像の最大幅 */
  height: auto;
  margin-bottom: 10px;
}

.phone-number {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
 
  

/* 右側の住所 */
.footer-bottom-right {
  color: #1C63AE;
  text-align: left; /* テキストを左揃えに */
  margin: 0 auto;
  
}


/* --- スマホ向けレイアウト調整 --- */
@media (max-width: 768px) {

  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin: 0 auto;
  }

  .footer-nav ul {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    text-align: center; 
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
    order: 1;
  }

  .button-style {
    font-size: 1em;
  }
  .footer-nav{
    order: 2; 
  }
  .footer-bottom-center{
    order: 1;
  }
  .footer-bottom-left{
    order: 3;
  }
  .footer-bottom-right{
    order: 2;
  }
}



/* コピーライトコンテナのスタイル */
.footer-copyright {
  text-align: center; /* テキストを中央揃えに */
  margin-top: 20px; /* 上部に余白を追加 */
  padding-bottom: 20px;
  padding-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.5); /* 上部に区切り線を追加 */
}

/* コピーライトテキストのスタイル */
.footer-copyright p {
  font-size: 0.9rem; /* フォントサイズを小さく */
  color: #ccc; /* 控えめな色にする */
  margin: 0; /* マージンをリセット */
}







/* ページトップへ戻るボタンの基本スタイル */
#page-top {
  position: fixed; /* 画面に固定 */
  right: 20px; /* 右からの位置 */
  bottom: 20px; /* 下からの位置 */
  width: 50px; /* 幅 */
  height: 50px; /* 高さ */
  background-color: #FF9500; /* オレンジ色 */
  border-radius: 4px; /* 角を少し丸く */
  display: block;
  opacity: 0; /* 初期状態は透明（非表示） */
  visibility: hidden; /* 初期状態は非表示 */
  transition: opacity 0.3s, visibility 0.3s; /* フェードイン・アウトのためのアニメーション */
  z-index: 9999; /* 他の要素より手前に表示 */
  text-align: center; /* 矢印を中央に配置 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 少し影をつける */
}

/* ホバー時の色変更 */
#page-top:hover {
  background-color: #FED076;
}
/* スクロール時に表示されるクラス */
#page-top.is-show {
  opacity: 1; /* 不透明にして表示 */
  visibility: visible; /* 表示 */
}

/* 上矢印のデザイン */
#page-top span {
  display: block;
  position: absolute;
  top: 50%; /* 中央に配置 */
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃えを微調整 */
  width: 10px; /* 矢印の幅 */
  height: 10px; /* 矢印の高さ */
  border-top: 2px solid #ffffff; /* 白い上枠線 */
  border-right: 2px solid #ffffff; /* 白い右枠線 */
  /* 矢印を45度回転させて上向きにする */
  transform: translate(-50%, -20%) rotate(-45deg); 
}

/* --- スマホ対応 (メディアクエリ) --- */
@media (max-width: 768px) {
  #page-top {
    right: 10px; /* スマホでは右からの位置を少し狭く */
    bottom: 10px; /* スマホでは下からの位置を少し狭く */
    width: 40px; /* スマホでは少し小さく */
    height: 40px; /* スマホでは少し小さく */
  }

  #page-top span {
    width: 12px;
    height: 12px;
    transform: translate(-50%, -20%) rotate(-45deg); 
  }
}








/* =========================================================================
// 第２共通ヘッダー設定
========================================================================= */

#header-2 {
    width: 100%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    /* ページの最上部に固定したい場合は position: sticky; か fixed; を使用 */
    background-image: url('images/header-2.png'); 
    background-size: cover;
    background-position: center;
}


.header-2-top {
    display: flex;
    padding: 3px 0; /* ロゴとボタンの上下の余白 */
}


.header-2-inner {
    margin: 0 auto;
    padding: 0 0px;
    display: flex;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: center;
    width: 100%;
    
}



.header-2-logo-contner {
    text-align: center;
    flex-grow: 1; /* ロゴが中央の残りのスペースを使うように設定 */
    width: auto;
}

.header-2-logo {
    width: 15vw;
    height: auto;
}

/* スマホ用ハンバーガーボタンはPCでは非表示 */
.menu-toggle {
    display: none;
}


.header-2-nav {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* ナビ全体を中央揃えにする */
    padding: 20px;

}

.header-2-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* 項目を横並びにする */
    justify-content: center; /* 中央揃えを適用 */
    flex-wrap: wrap; /* 画面が狭くなった場合に折り返す */
}

.header-2-nav-list li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    white-space: nowrap;
    transition: color 0.3s;
}

.header-2-nav-list li a:hover {
    color: #007bff; /* ホバー時の色 */
}

/* モバイル用の電話番号はPCでは非表示 */
.mobile-contact-info {
    display: none; 
}





@media (max-width: 768px) {
  #header-2 {
    position: fixed; /* 画面に固定 */
    top: 0; /* 画面上部に配置 */
    left: 0;
    width: 100%;
    height: 60px; /*  ヘッダーの高さ */
    z-index: 1000; /* 他の要素より手前に表示 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* トランジションで動きを滑らかに */
    transition: top 0.3s ease-in-out;
}

/* 非表示にするためのクラス */
.header-hidden {
    /* ヘッダーの高さの分、上へ移動させて画面外に隠す */
    top: -60px; /* #main-headerのheightと同じ値を負の値で設定 */
}

/* ヘッダーの高さと同じ分だけbodyのpadding-topを設定する */
body {
    padding-top: 60px; /* #main-headerのheightと同じ値 */
}



  .header-2-inner {
    padding: 0 15px;

  }

    /* 2. PC用ボタンを非表示 */
    .header-2-buttons {
       position: static;
       display: flex;
       width: 30vw;
       height: 100%;
       align-items: flex-start;
    }

    .header-buttons a.button-style {
        display: none;
        
    }

    

    /* 3. モバイル用の電話番号を表示 */
    .mobile-contact-info {
        display: block; /* 電話番号を表示 */
        text-align: left;
    }
    
    .mobile-phone-link {
        font-size: 13px;
        font-weight: bold;
        color: #1C63AE; /* 目立つ色に */
        text-decoration: none;
        white-space: nowrap;
    }
    
    

    /* ロゴの調整 */
    
    .header-2-logo {
        max-width: 120px; /* 小さく */
        width: 30vw;
    }
    
    /* 左右の要素の幅を揃える (例: 200px) */
      .header-2-top-right-area {
        display: flex; 
        justify-content: flex-end; /* 子要素（ハンバーガーボタン）を右端に寄せる */
        align-items: center; /* 垂直方向の中央揃え */
        width: 30vw;
        height: auto;

      }


    
    /* ハンバーガーボタンを表示・スタイル設定 */
      .menu-toggle {
        display: block; /* モバイルで表示 */
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        position: static;
        z-index: 1000; /* ロゴなどより前に表示 */
    }
    
    /* ハンバーガーアイコンの線のスタイル */
    .menu-toggle span {
        display: block;
        height: 3px;
        background-color: #1C63AE; /* 見やすい色に設定 */
        margin-bottom: 5px;
        transition: transform 0.3s, opacity 0.3s;
    }


    /* (オプション) 開いたときのアイコンアニメーション */
    .menu-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }



    #header-2-bottom {
        display: none; 
        
        /* メニューが開いたときの設定 */
        position: fixed;
        top: 0; 
        right: 0;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        background-color: #fff; /* オーバーレイの背景色 */
        z-index: 99;
        /* transitionなどを設定してスムーズに開閉できるようにする */
    }
    
    /* JavaScriptで開閉制御 (JSで .is-open クラスを #header-2-bottom に付与する想定) */
    #header-2-bottom.is-open { 
        display: block; 
    }

    .header-2-nav {
        padding-top: 80px; /* 上部ヘッダーの高さ分を避ける */
        text-align: center;
    }

    .header-2-nav-list {
        display: block; 
    }

    .header-2-nav-list li a {
        padding: 15px 20px;
        color: #000; /* メニュー内の文字色 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 18px;
    }

}







/* ============================== */
/*  当院についてぺージ  */
/* ============================== */



.aboutpage-section {
  padding: 0;
  margin: 0 auto;
}

.aboutpage-section-fv {
  width: 100%;
  height: 30vw;
  background-image: url('images/Concept-top.png');
  background-size: cover;
  background-position: center;
  display: flex;
  /* コンテンツを水平方向に中央揃えにする */
  justify-content: center;

}

.aboutpage-section-title-container {
    margin-top: 13vw;
    width: 900px; 
    max-width: 100%; 
    text-align: right;
    font-size: 24px;
    line-height: 50px;
    color:#1C63AE;
}

@media (max-width: 768px) {
  .aboutpage-section-title-container {
    margin-top: 2vw;
    padding-right: 10px;
  }
}







.about-section-menu {
  display: flex;
  flex-direction: column;
  padding: 15vw;
}

.about-section-menu-container {
  display: flex;
  flex-direction: row;
  padding-bottom: 10vw;

  display: grid;
    /* デスクトップ版: 左右にカラムを定義 */
    grid-template-columns: 2fr 1fr; 
    /* エリアの配置: left-wrapperが左、right-contentが右 */
    grid-template-areas: 
        "left-area right-area";
    gap: 20px; /* 要素間の隙間 */
}


.about-section-menu-left {
  display: flex;
  flex-direction: column;
  padding:0 5vw;
  grid-area: left-area;
}

.about-section-menu-title {
    display: flex;
}

.about-section-menu-title-1::before {
  content: ""; 
    
    background-image: url('images/about-icon-1.png'); 
    background-size: contain; /* サイズに合わせて画像を収める */
    background-repeat: no-repeat; /* 画像の繰り返しをオフ */
    background-position: center;
  
    width: 70px; 
    height: 70px; 
    margin-right: 10px; 
}

.about-section-menu-title-2::before {
  content: ""; 
    
    background-image: url('images/about-icon-2.png'); 
    background-size: contain; /* サイズに合わせて画像を収める */
    background-repeat: no-repeat; /* 画像の繰り返しをオフ */
    background-position: center;
  
    width: 70px; 
    height: 70px; 
    margin-right: 10px; 
}

.about-section-menu-title-3::before {
  content: ""; 
    
    background-image: url('images/about-icon-3.png'); 
    background-size: contain; /* サイズに合わせて画像を収める */
    background-repeat: no-repeat; /* 画像の繰り返しをオフ */
    background-position: center;
  
    width: 70px; 
    height: 70px; 
    margin-right: 10px; 


}
.about-section-menu-title h2 {
   color:#57331E;

}

.yello-highlight {
    border-bottom: 5px solid yellow;
}

.about-section-menu-right {
   padding: 0 5vw;
   grid-area: right-area;
}



@media (max-width: 768px) {
  .aboutpage-section-title-container{
    font-size: 1em;
    margin-right: 1.5em;
    margin-top: 2.5em;
  }
  .about-section-menu {
    padding: 5vw;
    margin: 10vw 0;
  }
  .about-section-menu-container {
    margin-bottom: 20vw;
    flex-direction: column;

    /* モバイル版: 単一のカラム（縦並び）に変更 */
        grid-template-columns: 1fr;
    /* 🌟 ここが重要：エリアの並び順をモバイル用に再定義 🌟 */
       grid-template-areas: 
       "top-area"    
       "right-area" 
       "bottom-area"; 

  }
  .about-section-menu-left {
    display: contents;
  }

  .about-section-menu-title h2 {
      grid-area: top-area;
      font-size: 1.2em;
   }
  .about-section-menu-right {
      grid-area: right-area;
  }

  .about-section-menu-right p{
       grid-area: bottom-area;
  }
}






/* ============================== */
/* 院内のご紹介 */
/* ============================== */

.introduction {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 3vw 0;
    background-color: #ECF8FF;
}

.introduction h1 {
    text-align: center;
    font-size: 2.5em;
    color: #1C63AE;
}


.introduction-title {
    padding: 10px 30px; 
    background-color: white; 
    border-radius: 50px;
    text-align: center; 
    
    margin: 0; 
    font-size: 1.5em;
    text-align: center;
    position: relative; 
    z-index: 2; /* 点線 (z-index: 1) より前面に表示 */
}

.introduction-title-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    padding: 30px 0; /* 上下に余白を設定 (この高さの真ん中に点線が来る) */
    position: relative; /* 擬似要素（点線）の基準点とする */
}

.introduction-title-container::before {
    content: '';
    position: absolute; /* .title-containerを基準に配置 */
    top: 50%; /* 親要素の高さの半分（垂直方向の中心）に移動 */
    left: 0;
    right: 0;    
    border-top: 4px dotted #1C63AE; 
    
    /* 要素の高さを打ち消して、線が親要素の垂直中央に来るように微調整 */
    transform: translateY(-50%); 
    
    z-index: 1; 
}

.introduction-container p {
   font-size: 1.5em;
   padding: 3vw 20vw;
   text-align: center;
   
}


@media (max-width: 768px) {

  .introduction-container p {
   font-size: 1em;
   padding: 1vw;
   text-align: center;
   
}
  .introduction-title {
    font-size: 1em;
    padding: 6px 10px;
}

}






/* --- 画像スライダー --- */



.introduction-slider {
    overflow: hidden; 
}

.introduction-slider-wrapper {
    width: 100%;
    margin: 20px 0;
    padding-bottom: 10vw;
    overflow: hidden; 
    white-space: nowrap; 
    position: relative;
    /* スクロールバーの非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.introduction-slider-wrapper::-webkit-scrollbar {
    display: none;
}

.image-track {
    display: inline-block;
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
}

.image-track img {
    width: 350px; 
    height: 350px;
    margin: 0 30px; 
    object-fit: cover;
    border-radius: 50%; /* 丸い画像 */
    flex-shrink: 0;
    display: inline-block;
}

/* 右から左へ流れるアニメーション設定 */
.introduction-slider-wrapper.right-to-left .image-track {
    animation-name: scroll-right-to-left;
    animation-duration: 50s; 
}

/* 左から右へ流れるアニメーション設定 */
.introduction-slider-wrapper.left-to-right .image-track {
    animation-name: scroll-left-to-right;
    animation-duration: 50s; 
}

/* ==================================== */
/* アニメーションのキーフレーム */
/* ==================================== */

@keyframes scroll-right-to-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* 全幅の半分移動 */
}

@keyframes scroll-left-to-right {
    from { transform: translateX(-50%); } /* 全幅の半分からスタート */
    to { transform: translateX(0); }
}

/* ==================================== */
/* 📱 スマートフォン向け レスポンシブ調整 */
/* ==================================== */

@media (max-width: 768px) {

    /* 画像のサイズを小さく */
    .image-track img {
        width: 100px; 
        height: 100px;
        margin: 0 10px;
    }

    /* アニメーション速度を速く */
    .introduction-slider-wrapper.right-to-left .image-track,
    .introduction-slider-wrapper.left-to-right .image-track {
        animation-duration: 20s; 
    }
}




/* ============================== */
/* 　　　　　 医師紹介　　　　　   */
/* ============================== */


/* PC版 Gridレイアウト */

.doctor-page {
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
  color: #1C63AE;
}

.doctor-page-container {
  display: grid;
  /* 2列定義: 1列目(画像)を300px固定、2列目(テキスト)を残り(1fr) */
  grid-template-columns: 300px 1fr;
  /* 4つの要素を縦に並べるための行 (Gridの行) */
  grid-template-rows: auto auto auto auto;
  /* 列間・行間の余白（gap） */
  gap: 0 50px; 
  
  width: 90%;
  max-width: 900px;
  margin: 150px auto;
  text-align: left;
  color: #000;
}

/* 画像: 1列目の全ての行を結合して使用 */
.doctor-page-image {
  grid-area: 1 / 1 / 5 / 2; 
}

/* テキスト要素: 全て2列目に配置 */
.doctor-page-h2 {
  grid-area: 1 / 2 / 2 / 3; /* 1行目、2列目 */
  color: #57331E;
}
.doctor-page-p {
  grid-area: 2 / 2 / 3 / 3; /* 2行目、2列目 */
}
.doctor-page-h4 {
  grid-area: 3 / 2 / 4 / 3; /* 3行目、2列目 */
}

/* 画像の潰れ防止 */
.doctor-page-image img {
  width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 768px) {
  .doctor-page-container {
    /* 縦一列のGridテンプレートに切り替え */
    grid-template-columns: 1fr; 
    /* 必要な行を全てautoで定義 */
    grid-template-rows: auto auto auto auto auto; 
    
    
    max-width: none;
    width: 100%;
    gap: 10px; /* 縦並びの隙間を調整 */
    text-align: center; /* h2などを中央寄せ */
  }

  
  /* 1. h2 (1行目) */
  .doctor-page-h2 {
    grid-area: 1 / 1 / 2 / 2;
  }

  /* 2. 画像 (2行目) */
  .doctor-page-image {
    grid-area: 2 / 1 / 3 / 2; 
    width: 100%;
    max-width: 300px; /* 中央寄せのために最大幅を制限 */
    justify-self: center; /* 要素を列の中央に配置 */
    margin: 10px 0;
  }
  
  /* 3. p (3行目) */
  .doctor-page-p {
    grid-area: 3 / 1 / 4 / 2; 
    text-align: left; /* 本文は左寄せに戻す */
    margin: 0 10px;
  }
  
  /* 4. h4 (4行目) */
  .doctor-page-h4 {
    grid-area: 4 / 1 / 5 / 2; 
    text-align: left;
    margin: 0 10px;
  }
}







/* ============================== */
/* 　　　　お問い合わせ　　　　*/
/* ============================== */


.contact-page {
    font-family: sans-serif;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* 各フォーム項目の間隔 */
.form-group {
    margin-bottom: 20px;
}

/* ラベルのスタイル */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* 必須項目のラベルに赤い星マークを追加 */
.required::after {
    content: " *";
    color: red;
    font-size: 0.8em;
    margin-left: 3px;
}

/* 入力欄（テキスト、メール、電話、プルダウン、テキストエリア）の共通スタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* paddingを含めて幅を100%にする */
}

/* テキストエリアの高さ */
textarea {
    resize: vertical;
    height: 150px;
}

/* チェックボックスグループのスタイル */
.checkbox-group {
    margin-top: 30px;
}

/* チェックボックス横のラベルのスタイル調整 */
.checkbox-group label {
    font-weight: normal;
    display: inline-block;
    margin-left: 5px;
}

/* プライバシーポリシーのリンク色（青色） */
.privacy-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/* 送信ボタンのスタイル */
.submit-button {
    display: block;
    width: 200px;
    padding: 10px;
    margin-top: 30px;
    background-color: #007bff; /* 青色 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    text-align: center;
}

/* 送信ボタンにマウスが乗ったときのスタイル */
.submit-button:hover {
    background-color: #0056b3;
}









/* ============================== */
/* 　　　　　　オンライン予約　　　　　 */
/* ============================== */

.reservation  {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

.wrapper {
    max-width: 375px; /* スマホ版の幅に固定 */
    margin: 0 auto; 
    background-color: #ffffff; 
    padding: 20px 15px; /* 左右に少し余白 */
    box-sizing: border-box; 
    min-height: 100vh; 
}

.reservation-title { color: #1C63AE; text-align: center; font-size: 1.9em;}
.reservation-title-2 { font-size: 1.3em; margin-top: 25px; color: #333; }
.description { font-size: 0.9em; color: #666; }

/* 必須マークのスタイル */
.required-label::after {
    content: " *";
    color: red;
    font-size: 0.8em;
    margin-left: 3px;
}

/* フォーム共通スタイル */
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="tel"], input[type="number"], select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    appearance: none; /* selectのデフォルトスタイルをリセット */
    -webkit-appearance: none;
}
select { 
    background-color: white; 
    padding-right: 30px; /* 矢印スペース */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4L146.2%20207.9%205.4%2069.4c-1.4-1.4-2.2-3.3-2.2-5.2%200-1.9.8-3.8%202.2-5.2l4.1-4.1c1.4-1.4%203.3-2.2%205.2-2.2%201.9%200%203.8.8%205.2%202.2L146.2%20171.7l130.6-128.7c1.4-1.4%203.3-2.2%205.2-2.2%201.9%200%203.8.8%205.2%202.2l4.1%204.1c1.4%201.4%202.2%203.3%202.2%205.2-.1%201.9-.9%203.8-2.3%205.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px;
}

.radio-group label { font-weight: normal; display: inline-block; margin-right: 15px; }
.note { font-size: 0.8em; color: #e74c3c; margin-top: 5px; }
.separator { border: 0; border-top: 1px dashed #ccc; margin: 25px 0; }

/* プライバシーポリシーリンク */
.privacy-link { color: #1C63AE; text-decoration: underline; }

/* 送信ボタン */
.submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 30px;
    background-color: #1C63AE; /* メインカラー */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
}
.submit-button:hover { background-color: #154b7c; }

/* ============================== */
/* 完了画面スタイル */
/* ============================== */
.completion-box {
    text-align: center;
    padding: 40px 20px;
    margin: 30px 0;
    border: 2px solid #4CAF50; /* 緑の枠線 */
    border-radius: 10px;
    background-color: #e8f5e9; /* 薄い緑の背景 */
}
.completion-box h2 {
    color: #4CAF50;
    font-size: 1.5em;
    margin-top: 0;
}
.completion-box i {
    font-size: 2em;
    margin-right: 10px;
}
.completion-box p {
   font-size: 1.2em;
}
.back-to-top-button {
    display: block;
    text-align: center;
    padding: 12px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 5px;
}

.not-found-text {
  color: #0056b3;
  text-align: left;
  
}
.not-found-top:hover {
  color: #c1dfff;
  text-align: left;
}