@charset "utf-8";


body {
  margin: 0 auto;
  padding-top: 3%;
  width: 100%;
}

@media (max-width:2560px) {

  body {
  max-width: 2560px;
  margin: 0 auto;
  padding-top: 3%;
  width: 100%;
  
}

}
    html,
    body {
      /*position: relative;*/
      height: 100%;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      font-size: 20px;
      background: #3990E3;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


.header-box {
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, .1);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.header_logo {
  padding-top: 15px;
  padding-bottom: 8px;
  padding-left: 170%;
  /*background-color: rgba(57, 144, 227, 0.5);*/
}
.logo {
  width: 100%;
  height: 80px;
  /*text-align: center;*/
  line-height: 80px;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 90px;
  
}

.nav-container{
              display: flex;
              align-items: center;
              flex-direction: row;
              }
nav {
    flex-direction: row;
    width: 100%;
    /*background: #3990E3;*/
    
}

ul {
  width: 90%;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  
}

li {
  width: 33%;
  font-weight: bold;
  font-family: Noto Sans JP;
  font-size: 12pt;
}

li.small {
  font-weight: bold;
  font-size: 12pt;
  font-family: Noto Sans JP;
  list-style-position: inside;
  box-sizing: border-box;
  border-radius: 8px;
  border-color: #D3BC9F;
}

li.small a.web{
  display: block;
  width: 100%;
  line-height: 80px;
  text-align: center;
  color: white; 
}
.web-reserve{
  margin-top:25px;
  padding-top: 0px;
  border-radius: 100px;
  background-color: #D3BC9F;
  color: #FFFFFF;
  font-family: Noto Sans JP;
  width: 150px;
  height: 33px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*.web {
  list-style-position: inside;
  border-radius: 36px;
  border-color: #D3BC9F;
  background-color: #D3BC9F;
  width: 192px;
  display: inline-block; /* 必須：これによりインライン要素に幅やパディングが適用される */



a.reserv {
  display: inline-block;
}

a {
  display: block;
  width: 100%;
  line-height: 80px;
  text-align: center;
  color: white;
  
}
.pc-menu {
  padding: 0;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  }


/* ヘッダー全体の固定設定 */
/* --- 共通設定（追従ヘッダー） --- */
.site-header {
  height: 80px;
  /*position: fixed;*/
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color:rgba(57, 144, 227, 0.5);
  display: flex;
  flex-wrap: wrap;
  gap:10px;

}

/* --- PCサイズでの表示制御 --- */
/* PCではハンバーガー関連の要素をすべて隠す */
.menu-checkbox,
.hamburger-button,
.mobile-menu {
  display: none;
}

@media (max-width:1024px) {

.pc-menu {
    display: none;
  }

/* ハンバーガーボタンを表示 */
  .hamburger-button {
    color: #fff;
    display: block;
    width: 30px;
    height: 22px;
    position: absolute;
    cursor: pointer;
    z-index: 1100; /* メニューより上に配置 */
    top:40%;
    right: 5%;
    transform: translate(-50%, -50%);
  }

  /* 三本線のデザイン */
  .hamburger-button span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色 */
    transition: all 0.3s;
  }
  .hamburger-button span:nth-child(1) { top: 0; }
  .hamburger-button span:nth-child(2) { top: 10px; }
  .hamburger-button span:nth-child(3) { bottom: 0; }

  /* モバイルメニュー本体（右側からスライドイン） */
  .mobile-menu {
    display: flex; /* media query内では表示を許可 */
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は右に隠す */
    width: 70%;    /* メニューの幅 */
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: all 0.4s;
    padding-top: 80px; /* ボタンと被らないように余白 */
    z-index: 1050;
  }
  .mobile-menu ul li {
    flex-direction: column;
    justify-content: center;
  }

  /* チェックボックスがON（クリック）された時の動き */
  .menu-checkbox:checked ~ .mobile-menu {
    right: 10%; /* 画面内に戻る */
  }

  /* ボタンを「×」に変えるアニメーション */
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(2) {
    opacity: 0;
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* モバイルメニュー内のリスト装飾 */
 
  /* メニュー本体：幅をしっかり確保する */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 閉じてる時は右に隠す */
    width: 80%;    /* 画面の80%を占めるように */
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transition: 0.4s;
    overflow-y: auto; /* ★中身が長い場合にスクロールさせる */
    padding-top: 0px; /* ヘッダーの高さ分、上をあける */
  }

  /* リスト全体の余白と中身の並びをリセット */
  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block; /* 縦に並べるためにブロック指定 */
  }

  .mobile-menu ul li {
    width: 100%;
    /*border-bottom: 1px dashed #eee; /* 区切り線 */
  }

  /* メニュー項目（aタグ）：ここが重要 */
  .mobile-menu ul li a {
    color: #333;
    /*  display: block;      /* 1行まるごとクリック可能にする */
  /*  padding: 20px;       /* 押しやすいように余白を多めに */
  /*  text-decoration:
  /*  font-size: 16px;
  /*  text-align: left;    /* 左寄せに（お好みでセンターに） */
  /*  white-space: nowrap; /* ★文字の折り返しを禁止する */
  }

  .web-reserve{
  margin-top:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  background-color: #D3BC9F;
  color: #FFFFFF;
  font-family: Noto Sans JP;
  width: 170px;
  height: 33px;
  margin:auto;
  margin-top: 25px;
}

}

/* --- モバイル・タブレットサイズ (1023px以下) の設定 --- */
@media screen and (max-width: 1023px) {
  
  /* PC用メニューを隠す */
  .pc-menu {
    display: none;
  }

  /* ハンバーガーボタンを表示 */
  .hamburger-button {
    color: #fff;
    display: block;
    width: 30px;
    height: 22px;
    position: absolute;
    cursor: pointer;
    z-index: 1100; /* メニューより上に配置 */
    top:25%;
    right: 0%;
    transform: translate(-50%, -50%);
  }

  /* 三本線のデザイン */
  .hamburger-button span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色 */
    transition: all 0.3s;
  }
  .hamburger-button span:nth-child(1) { top: 0; }
  .hamburger-button span:nth-child(2) { top: 10px; }
  .hamburger-button span:nth-child(3) { bottom: 0; }

  /* モバイルメニュー本体（右側からスライドイン） */
  .mobile-menu {
    display: flex; /* media query内では表示を許可 */
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は右に隠す */
    width: 70%;    /* メニューの幅 */
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: all 0.4s;
    padding-top: 80px; /* ボタンと被らないように余白 */
    z-index: 1050;
  }
  .mobile-menu ul li {
    flex-direction: column;
    justify-content: center;
  }

  /* チェックボックスがON（クリック）された時の動き */
  .menu-checkbox:checked ~ .mobile-menu {
    right: 10%; /* 画面内に戻る */
  }

  /* ボタンを「×」に変えるアニメーション */
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(2) {
    opacity: 0;
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* モバイルメニュー内のリスト装飾 */
 
  /* メニュー本体：幅をしっかり確保する */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 閉じてる時は右に隠す */
    width: 80%;    /* 画面の80%を占めるように */
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transition: 0.4s;
    overflow-y: auto; /* ★中身が長い場合にスクロールさせる */
    padding-top: 0px; /* ヘッダーの高さ分、上をあける */
  }

  /* リスト全体の余白と中身の並びをリセット */
  .mobile-menu ul {
    list-style: none;
    padding: 20;
    margin: 0;
    width: 100%;
    display: flex; /* 縦に並べるためにブロック指定 */
    /*justify-content: center;*/
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
  }

  .mobile-menu ul li {
    width: 25%;
    /*border-bottom: 1px solid #eee; /* 区切り線 */
  }

  /* メニュー項目（aタグ）：ここが重要 */
  .mobile-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;       /* 押しやすいように余白を多めに */
    text-decoration: none;
    color: #333;
    font-size: 16px;
    text-align: center;    /* 左寄せに（お好みでセンターに） */
    white-space: nowrap; /* ★文字の折り返しを禁止する */
  }
  .web-reserve{
  margin-top:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  background-color: #D3BC9F;
  color: #FFFFFF;
  font-family: Noto Sans JP;
  width: 170px;
  height: 33px;
  margin:auto;
  margin-top: 25px;
  
}
}

@media (max-width:768px) {
  /* PC用メニューを隠す */
  .pc-menu {
    display: none;
  }

  /* ハンバーガーボタンを表示 */
  .hamburger-button {
    color: #fff;
    display: block;
    width: 30px;
    height: 22px;
    position: absolute;
    cursor: pointer;
    z-index: 1100; /* メニューより上に配置 */
    right: 5%;
    top:33%;
    transform: translate(-50%, -50%);
  }

  /* 三本線のデザイン */
  .hamburger-button span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色 */
    transition: all 0.3s;
  }
  .hamburger-button span:nth-child(1) { top: 0; }
  .hamburger-button span:nth-child(2) { top: 10px; }
  .hamburger-button span:nth-child(3) { bottom: 0; }

  /* モバイルメニュー本体（右側からスライドイン） */
  .mobile-menu {
    display: flex; /* media query内では表示を許可 */
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は右に隠す */
    width: 70%;    /* メニューの幅 */
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: all 0.4s;
    padding-top: 80px; /* ボタンと被らないように余白 */
    z-index: 1050;
  }
  .mobile-menu ul li {
    flex-direction: column;
    justify-content: center;
  }

  /* チェックボックスがON（クリック）された時の動き */
  .menu-checkbox:checked ~ .mobile-menu {
    right: 10%; /* 画面内に戻る */
  }

  /* ボタンを「×」に変えるアニメーション */
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(2) {
    opacity: 0;
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* モバイルメニュー内のリスト装飾 */
 
  /* メニュー本体：幅をしっかり確保する */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 閉じてる時は右に隠す */
    width: 80%;    /* 画面の80%を占めるように */
    height: 90vh;
    background: #fff;
    z-index: 1050;
    transition: 0.4s;
    overflow-y: auto; /* ★中身が長い場合にスクロールさせる */
    padding-bottom: 100px; /* ヘッダーの高さ分、上をあける */
  }

  /* リスト全体の余白と中身の並びをリセット */
  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block; /* 縦に並べるためにブロック指定 */
  }

  .mobile-menu ul li {
    width: 100%;
    border-bottom: 1px solid #eee; /* 区切り線 */
  }

  /* メニュー項目（aタグ）：ここが重要 */
  .mobile-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px;       /* 押しやすいように余白を多めに */
    text-decoration: none;
    color: #333;
    font-size: 16px;
    text-align: center;    /* 左寄せに（お好みでセンターに） */
    white-space: nowrap; /* ★文字の折り返しを禁止する */
  }

  .web-reserve{
  margin-top:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  background-color: #D3BC9F;
  color: #FFFFFF;
  font-family: Noto Sans JP;
  width: 170px;
  height: 33px;
  text-align: center;
  margin: 0 auto;
  margin-top: 25px;
 }
}


@media (max-width:767px) {
   
    .hamburger-button {
    
    color: #fff;
    display: block;
    width: 30px;
    height: 22px;
    position: relative;
    cursor: pointer;
    z-index: 1100; /* メニューより上に配置 */
    position: absolute;
    right: 7%;
    top:40%;
    transform: translate(-50%, -50%);
  }

  /* 三本線のデザイン */
  .hamburger-button span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色 */
    transition: all 0.3s;
  }
  .hamburger-button span:nth-child(1) { top: 0; }
  .hamburger-button span:nth-child(2) { top: 10px; }
  .hamburger-button span:nth-child(3) { bottom: 0; }

  /* モバイルメニュー本体（右側からスライドイン） */
  .mobile-menu {
    display: flex; /* media query内では表示を許可 */
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は右に隠す */
    width: 70%;    /* メニューの幅 */
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    transition: all 0.4s;
    padding-top: 80px; /* ボタンと被らないように余白 */
    z-index: 1050;
  }
  .mobile-menu ul li {
    flex-direction: column;
    justify-content: center;
  }

  /* チェックボックスがON（クリック）された時の動き */
  .menu-checkbox:checked ~ .mobile-menu {
    right: 10%; /* 画面内に戻る */
  }

  /* ボタンを「×」に変えるアニメーション */
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(2) {
    opacity: 0;
  }
  .menu-checkbox:checked ~ .hamburger-button span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* モバイルメニュー内のリスト装飾 */
 
  /* メニュー本体：幅をしっかり確保する */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 閉じてる時は右に隠す */
    width: 80%;    /* 画面の80%を占めるように */
    height: 100vh;
    background: #fff;
    z-index: 1050;
    transition: 0.4s;
    overflow-y: auto; /* ★中身が長い場合にスクロールさせる */
    padding-top: 0px; /* ヘッダーの高さ分、上をあける */
  }

  /* リスト全体の余白と中身の並びをリセット */
  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block; /* 縦に並べるためにブロック指定 */
  }

  .mobile-menu ul li {
    width: 100%;
    border-bottom: 1px solid #eee; /* 区切り線 */
  }

  /* メニュー項目（aタグ）：ここが重要 */
  .mobile-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px;       /* 押しやすいように余白を多めに */
    text-decoration: none;
    color: #333;
    font-size: 16px;
    text-align: center;    /* 左寄せに（お好みでセンターに） */
    white-space: nowrap; /* ★文字の折り返しを禁止する */
  }

  .web-reserve{
  margin-top:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  background-color: #D3BC9F;
  color: #FFFFFF;
  font-family: Noto Sans JP;
  width: 170px;
  height: 33px;
  text-align: center;
  margin: 0 auto;
  margin-top: 25px;
 }

}

  .mobile-menu .web-reserv {
    width: 80%; /* 予約ボタンのサイズ調整 */
    margin: 10px auto;
    display: block;
  }


.fv-container {
  max-width: 100%;
  display: flex;
  height: auto;
  flex-direction: row;
  justify-content: flex-end;
}
.top {
  width: 1920px;
  height: 615px;
  /*display: flex;*/
  /*flex-direction: row;*/
  top:0%;
  left:0%;
  object-fit: cover;
  width: 70%;  

  
}
.skyblueback {
  /*display: flex;*/
  /*flex-direction: row;*/
  width: 30%;
  height: 615px;
  background-color: #C3E2FF;
  /*top:15%;
  left:18%;*/

}
.fv-logo {
  position: absolute;
  top: 25%;
  left: 18%;
}

.top-back {
  width: 576px;
  height: 600px;
}
.topics{
  
  position: absolute;
  border-radius: 50px;
  border-color: #3990E3;
  transform: translate(-50%, 50%);
}

.topics-container {
  border-radius: 50px;
  border-color: #3990E3;
}

/* セクションの基本設定 */
.first-view {
  /*height: 57vh;*/
  background-color: #f0f0f0;
  position: relative; /* バーの基準点にするために必須 */
}
/* 1. 親要素：矢印の動く範囲（画面いっぱいの高さにする場合） */
.arrow {
  /*position: relative;
 /* width: 100%;
  height: 100vh; /* 画面全体の高さ */
  /*background: #f4f4f4; /* 背景色（確認用） */
}

/* 2. 矢印を包むコンテナ：位置の固定 */
.scroll-arrow {
  position: absolute;
  top: 500px;  /* 画面下から30pxの位置 */
  left: 10%;     /* 中央寄せの起点 */
  /*transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
}

/* 3. 画像（矢印）：アニメーションの実行 */
.scroll {
  display: inline-block;
  width: 50px;   /* 画像のサイズ調整 */
  height: auto;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  animation: scroll-bounce 2s infinite ease-in-out;
}

/* 4. アニメーション（動き）の定義 */
@keyframes scroll-bounce {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}
.about-us {
  height: 500px;
  background-color: #ffffff;
  padding-top: 80px; /* バーが被るので余白を多めに取る */
  font-family: Montserrat;
  padding-top: 10%;

}
.about-container {
  display: flex;
  flex-direction: column;
  margin-left: 15%;
}
.Us {
  color: #3990E3;
  justify-content: center;
  padding-left: 2%;
}
h2 {
  display: flex;
  justify-content:flex-start;
  font-size: 2.5rem;
  font-family: Montserrat;
  color: #666E76;
  text-align: center;
  
}

/* --- バー全体の見た目 --- */
.topics-bar {
  position: absolute;   
  right: 0%;
  top: 93%;
  /*transform: translate(-50%, -50%);*/
  width: 90%;
  max-width: 1500px;
  height: 100px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px 0 0 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;

}

.topics-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  gap: 30%;
}
@media (max-width:1024px) {

  .scroll-arrow {
  position: absolute;
  top: 66%;  /* 画面下から30pxの位置 */
  left: 6%;     /* 中央寄せの起点 */
  transform: translate(-50%, -50%);
  /*transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
}

  .scroll {
  display: inline-block;
  width: 30px;   /* 画像のサイズ調整 */
  height: 50%;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  animation: scroll-bounce 2s infinite ease-in-out;
}

.skyblueback {
  /*display: flex;*/
  /*flex-direction: row;*/
  width: 30%;
  height: 615px;
  background-color: #C3E2FF;
  /*top:15%;
  left:18%;*/

}

.fv-logo {
  position: absolute;
  top: 25%;
  left: 9%;
}

}
@media (max-width:1023px) {

  .fv-container {
  max-width: 100%;
  display: flex;
  height: 515px;
  flex-direction: row;
  justify-content: flex-end;
}

  .top {
  width: 1920px;
  height: 515px;
  /*display: flex;*/
  /*flex-direction: row;*/
  top:0%;
  left:30%;
  object-fit: cover;
  width: 70%;  

  
}

  .fv-logo {
  position: absolute;
  top: 25%;
  left: 9%;
}

.scroll-arrow {
  position: absolute;
  top: 57%;  /* 画面下から30pxの位置 */
  left: 6%;     /* 中央寄せの起点 */
  transform: translate(-50%, -50%);
  /*transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
}

  .scroll {
  display: inline-block;
  width: 30px;   /* 画像のサイズ調整 */
  height: 50%;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  animation: scroll-bounce 2s infinite ease-in-out;
}

  .topics-bar {
  position: absolute; /* absoluteから一旦relativeにして場所を確認してください */
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*margin: 20px auto;   /* 上下に余白を作って中央配置 */
  width: 100%;
  /*max-width: 685px;*/
  height: 100px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;

}

.topics-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
}

.topics-more {
  flex-shrink: 0;
  margin-left: 70px;
  color: #fff;
  text-decoration: none;
  font-size: 2.0rem;
  
}

.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      font-size: 16px;
      background: #3990E3;
      display: flex;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  .skyblueback {
  /*display: flex;*/
  /*flex-direction: row;*/
  width: 30%;
  height: 100%;
  background-color: #C3E2FF;
  /*top:15%;
  left:18%;*/

}

}
@media (max-width:768px) {

   .fv-logo {
  position: absolute;
  top: 25%;
  left: 2%;
}

.scroll-arrow {
  position: absolute;
  top: 58%;  /* 画面下から30pxの位置 */
  left: 6%;     /* 中央寄せの起点 */
  transform: translate(-50%, -50%);
  /*transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
}

  .scroll {
  display: inline-block;
  width: 30px;   /* 画像のサイズ調整 */
  height: 50%;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  animation: scroll-bounce 2s infinite ease-in-out;
}

.swiper-slide {
      font-size: 16px;
      background: #3990E3;
      
    }

}
@media (max-width:767px) {

  .scroll-arrow {
  position: absolute;
  top: 45%;  /* 画面下から30pxの位置 */
  left: 6%;     /* 中央寄せの起点 */
  transform: translate(-50%, -50%);
  /*transform: translateX(-50%); /* 自身の幅の半分戻して完全中央へ */
}
  
}

/* --- 固定テキスト部分 --- */
.topics-static {
  display: flex;
  align-items: center;
  
}

.topics-label {
  font-size: 1.75rem;
  font-weight: bold;
}

.topics-sep {
  margin: 0 15px;
  opacity: 0.7;
}

/* --- 【重要】スライドの窓 --- */
.topics-window {
  flex-grow: 1;
  height: 30px;        /* 1行分の高さ */
  position: relative;
}

.topics-list {
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;     /* これで「青い丸」を消します */
  display: block;       /* 縦に並べる */
  animation: slideTopScroll 12s infinite ease-in-out;
}

.topics-list li {
  height: 30px;        /* 窓の高さと一致 */
  line-height: 30px;   /* 文字を上下中央に */
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  list-style: none;     /* 念押しでリストの点を消す */
}

/* --- moreボタン --- */
.topics-more {
  flex-shrink: 0;
  /*margin-left: 330%;*/
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 200;
  
}
.span-more {
  position: relative;
  color: #3990E3;
  margin-right: 0%;
  width: 5%;
}


@media (max-width:1024px) {
  .topics-more {
  flex-shrink: 0;
  margin-left: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  
}

.topics-bar {
  position: absolute;   
  left: 60%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 100%;
  height: 100px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px 0 0 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;

}

.topics-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  gap: 26%;
}

}
@media (max-width:1023px) {

.topics-bar {
  position: absolute;   
  left: 60%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 100%;
  height: 100px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px 0 0 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;

}

}
@media(max-width:767px){

.topics-bar {
  position: absolute;   
  left: 60%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 79%;
  max-width: 100%;
  height: 100px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px 0 0 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;

}

  .topics-more {
  flex-shrink: 1;
  margin-right: 0%;
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  display: none;
  }

  .topics-label {
  font-size: 0.75rem;
  font-weight: bold;
}


.topics-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  gap: 2%;
}

}

@media (max-width:767px) {
  
   .fv-container {
  max-width: 100%;
  display: flex;
  height: 400px;
  flex-direction: row;
  justify-content: flex-end;
}

  .top {
  width: 1920px;
  height: 400px;
  /*display: flex;*/
  /*flex-direction: row;*/
  top:0%;
  left:30%;
  object-fit: cover;
  width: 100%;  

  
}

  .fv-logo {
  position: absolute;
  top: 30%;
  left: 21%;
  margin: 0 auto;
  width: 55%;
  overflow: hidden;
}

  .topics-bar {
  position: absolute; /* absoluteから一旦relativeにして場所を確認してください */
  top: 100%;
  left: 60%;
  transform: translate(-50%, -50%);
  /*margin: 20px auto;   /* 上下に余白を作って中央配置 */
  width: 80%;
  /*max-width: 685px;*/
  height: 65px;        /* 高さをしっかり固定 */
  background-color: #3990E3;
  border-radius: 100px 0 0 100px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 100;
  overflow: hidden;
}

.topics-container-mobile {
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
}

.topics-label-mobile {
  font-size: 1rem;
  font-weight: bold;
}

.topics-window-mobile {
  flex-grow: 1;
  height: 30px;        /* 1行分の高さ */
  position: relative;
}

.topics-list-mobile {
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;     /* これで「青い丸」を消します */
  display: block;       /* 縦に並べる */
  animation: slideTopScroll 12s infinite ease-in-out;
}

.scroll {
  position: absolute;
  top: 120%;
  left: 10%;
  transform: translate(-50%, -50%);
  width: 16px;   /* 画像のサイズ調整 */
  height: auto;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  animation: scroll-bounce 2s infinite ease-in-out;
}

/*.topics-list li {
  height: 30px;        
  line-height: 30px;   
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  list-style: none;     /* 念押しでリストの点を消す */
/*}*/

/*.scroll {
  display: inline-block;
  width: 25px;   
  height: auto;
  position: absolute;
  left:10%;
  top:500%;
  z-index: 2;
  /* アニメーション指定：名前2秒間 無限に 緩やかに */
  /*animation: scroll-bounce 2s infinite ease-in-out;
}*/
.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      font-size: 10px;
      background: #3990E3;
      display: flex;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.mySwiper-mobile {
    /* 2行分が表示される高さを指定（例: 1行24px × 2 ＝ 48px） */
    height: 48px; 
    overflow: hidden;
  }

  .mySwiper-mobile .swiper-slide {
    /* 1行の高さを明示的に指定（2行表示なので全体の50%） */
    height: 50% !important; 
    display: flex;
    align-items: center; /* 文字の上下中央揃え */
    font-size: 14px;     /* 必要に応じて調整 */
  }
}

/* 768px以上はスライド表示を解除して通常配置にする場合 */
@media screen and (min-width: 768px) {
  .mySwiper-mobile .swiper-wrapper {
    display: block;
  }
}


/* --- アニメーション --- */
@keyframes slideTopScroll {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-30px); }
  50%, 70% { transform: translateY(-60px); }
  75%, 95% { transform: translateY(-90px); }
  100% { transform: translateY(-90px); }
}
.circle1 {
  display: flex;
  flex-direction: row-reverse;
}
/* 1. 親要素：画像を重ねる基準点にする */
.circle1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;

  position: relative;
  width: 285px;  /* 画像のサイズに合わせて調整してください */
  height: 285px;
  margin: 0px auto; /* 中央配置（任意） */
}

/* 2. 画像を包むdiv：すべて同じ位置に重ねる */
.circle-ellipse-big
{
  position: absolute;
  top: 0;
  right: 20%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}
.circle-eliipse-small
{
  position: absolute;
  top: 0;
  right: 24%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}


/* 3. 画像（大きい円）：時計回りに回転 */
.ellipse8 {
  width: 80%; /* 親要素(300px)に合わせる */
  height: auto;
  animation: rotate-right 10s infinite linear; /* 10秒で1周、無限、等速 */
  overflow: hidden;
  margin: 0px;
}

/* 4. 画像（小さい円）：反時計回りに回転 */
.ellipse9 {
  width: 56%;  /* 中に入るように少し小さく調整 */
  height: auto;
  animation: rotate-left 6s infinite linear; /* 6秒で1周、無限、等速 */
  overflow: hidden;
  margin: 0px;
}

/* --- アニメーションの定義 --- */

/* 時計回り */
@keyframes rotate-right {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 反時計回り */
@keyframes rotate-left {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); } /* マイナスにすると逆回転 */
}

/* 横並びにするための設定 */
.contents-wrapper {
  display: flex;
  align-items: center; /* 上下中央揃え（必要に応じて） */
  justify-content: space-between; /* 左右に広げて配置 */
  gap: 40px; /* テキストと円の間の隙間 */
  width: 85%;
}

@media (max-width:1023px) {

  .contents-wrapper {
    display: block;
    width: 85%;
}

}



.text {
  flex: 1; /* テキスト側が伸びるように設定 */
  line-height: 1.0;
  color: #666E76;
  
}
.about-blank {
  padding-bottom: 20px;
}
/* 円のコンテナ */
.circle {
  position: relative;
  width: 300px;  /* 円のサイズ */
  height: 300px;
  flex-shrink: 0; /* 円が潰れないように固定 */
}

/* 重なりと配置の設定 */
.circle-ellipse-big,
.circle-ellipse-small {
  position: absolute;
  top: 40%;
  left: 92%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-ellipse-small {
  position: absolute;
  top: 10%;
  left: 70%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.ellipse2 {
  width: 100%;
  height: auto;
  animation: rotate-right 10s infinite linear;
}

.ellipse3 {
  width: 70%; /* 内側の円は少し小さく */
  height: auto;
  animation: rotate-left 6s infinite linear;
}

/* --- アニメーション --- */
@keyframes rotate-right {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rotate-left {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.more-btn {
  position: relative;    /* 矢印の基準点にする（必須！） */
  overflow: visible;     /* はみ出しを隠さない（必須！） */
  
  border: #3990E3 solid 1px;
  width: 300px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.more {
  position: relative;
  color: #3990E3;
}
.strike {
  position: absolute;
  right: -35px;          /* ボタンの右側に 25px はみ出させる */
  color: #3990E3;
  transition: transform 0.3s;
  z-index: 10;           /* 他の要素より上に表示させる（念のため） */
}

.more-btn:hover .strike {
  transform: translateX(30px); /* ホバーで右に動く */
}

/* お好みで：ホバー時にボタン自体の色を変える場合 */
.more-btn:hover {
  background-color: #3990E3;
}
.more-btn:hover .more,
.more-btn:hover .strike {
  color: #fff;
}
.blank {
  padding-top: 100px;
  background-color: #FFFFFF;
}
/* セクション全体の背景と余白 */
.medical-section {
  position: relative;
  background: #f0f8ff; /* カンプに合わせた薄い水色 */
  padding: 100px 0;
  overflow: hidden;
  width: 100%;
}

/* 上部の白いカーブ（擬似要素） */
.medical-section::before {
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 200px;
  background: white;
  border-radius: 0 0 50% 50%;
}

.medical-container {
  max-width: 1200px; /* 一般的なコンテンツ幅 */
  margin: 0 auto;
  position: relative; /* z-indexなどを考慮 */
}

/* 右上のタイトル部分 */
.medical-header {
  text-align: right;
  margin-bottom: 50px;
  padding-right: 20px;
}

.medical-header h3 {
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  margin: 0;
  line-height: 1;
}

.medical-title {
  color: #3990E3;
  font-weight: bold;
  font-size: 1rem;
}

/* 横並びのレイアウト設定 */
.medical-content {
  display: flex;
  justify-content: center;
  gap: 45px;      /* アイコン同士の間隔（カンプに合わせて調整してください） */
  width: 100%;
}

@media (max-width:1114px) {
  .medical-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 35px;      /* アイコン同士の間隔（カンプに合わせて調整してください） */
  width: 100%;
}
  
}

/* 各アイテム（リンク）のスタイル */
.course-item {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  width: 30%;          /* 各項目の幅 */
}

/* 重ね合わせの土台 */
.icon-group {
  position: relative;
  width: 100%;           /* course-itemの幅いっぱいに使う */
  margin-bottom: 15px;    /* アイコンと文字の間の余白 */
}

/* 白い円の背景画像 */
.items-back {
  width: 100%;
  height: auto;
  display: block;
}

/* 青いアイコン（絶対配置で真ん中に固定） */
.items-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身のサイズの半分戻して真ん中へ */
  width: 50%;  /* アイコンの大きさを調整（カンプを見て増減してください） */
  height: auto;
}

/* テキストのスタイル */
.course-text {
  color: #3990E3;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap; /* 文字を折り返さない */
}

/* ホバー演出（任意） */
.course-item:hover {
  opacity: 0.8;
}
@media (max-width:1114px) {

  .medical-container {
  max-width: 770px; /* 一般的なコンテンツ幅 */
  margin: 0 auto;
  position: relative; /* z-indexなどを考慮 */
}

}
@media (max-width:1024px) {

  .medical-container {
  max-width: 770px; /* 一般的なコンテンツ幅 */
  margin: 0 auto;
  position: relative; /* z-indexなどを考慮 */
}

.course-item {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  width: 30%;          /* 各項目の幅 */
}

}
@media (max-width:1023px) {

  .medical-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 画面が狭い時に折り返す */
  gap: 35px;      /* アイコン同士の間隔（カンプに合わせて調整してください） */
  width: 100%;
}

  .medical-section {
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  background: #f0f8ff; /* 薄い水色の背景 */
  padding: 100px 0;   /* 上下の余白 */
  overflow: hidden;    /* はみ出た楕円を隠す */
  width: 1920px;
  width: 100%;
  margin: 0 auto;
  
}

.course-item {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  width: 30%;          /* 各項目の幅 */
}

/* 上部のくぼみを作るための白い楕円 */
.medical-section::before {
  content: "";
  position: absolute;
  top: -110px;         /* 上に持ち上げて調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* 横幅を広くするとカーブが緩やかになる */
  height: 200px;       /* 高さでカーブの深さを調整 */
  background: white;   /* セクションの外側の色と同じにする */
  border-radius: 0 0 50% 50%; /* 下側だけを丸くする */
}
.content {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 30px;

}

img.items {
  width:50%;
  height: auto;
}

.contents-wrapper{
  width: calc(100% - 30px);
  margin: auto;
  padding-top: 40px;
}

.medical-section{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

h3{
  font-size: 2.5rem;
  text-align: right;
  font-family: Montserrat;
  color: #666E76;
}
.medical {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  color: #3990E3;


}

.more-btn {
  position: relative;    /* 矢印の基準点にする（必須！） */
  overflow: visible;     /* はみ出しを隠さない（必須！） */
  
  border: #3990E3 solid 1px;
  width: 300px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
}
@media (max-width:768px) {

   .medical-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 画面が狭い時に折り返す */
  gap: 35px;      /* アイコン同士の間隔（カンプに合わせて調整してください） */
  width: 100%;
  }

  .course-item {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  width: 30%;          /* 各項目の幅 */
}
  
}
@media (max-width:767px) {

  .text {
  flex: 1; /* テキスト側が伸びるように設定 */
  line-height: 1.0;
  color: #666E76;
  margin-right: 10%;
}

  .medical-title {
  color: #3990E3;
  font-weight: bold;
  font-size: 1rem;
  padding-right: 36px;
  }

   .medical-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 画面が狭い時に折り返す */
  gap: 62px;      /* アイコン同士の間隔（カンプに合わせて調整してください） */
  width: 100%;
  }

  .medical-section {
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  background: #f0f8ff; /* 薄い水色の背景 */
  padding: 100px 0;   /* 上下の余白 */
  overflow: hidden;    /* はみ出た楕円を隠す */
  width: 1920px;
  width: 100%;
  margin: 0 auto;
  
}

/* 上部のくぼみを作るための白い楕円 */
.medical-section::before {
  content: "";
  position: absolute;
  top: -110px;         /* 上に持ち上げて調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* 横幅を広くするとカーブが緩やかになる */
  height: 200px;       /* 高さでカーブの深さを調整 */
  background: white;   /* セクションの外側の色と同じにする */
  border-radius: 0 0 50% 50%; /* 下側だけを丸くする */
}
.content {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 30px;

}

img.items {
  width:50%;
  height: auto;
}

.course-item {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;
  width: 30%;          /* 各項目の幅 */
}

.contents-wrapper{
  width: calc(100% - 30px);
  margin: auto;
  padding-top: 40px;
}

.medical-section{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

h3{
  font-size: 2.5rem;
  text-align: right;
  font-family: Montserrat;
  color: #666E76;
}
.medical {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  color: #3990E3;


}

.more-btn {
  position: relative;    /* 矢印の基準点にする（必須！） */
  overflow: visible;     /* はみ出しを隠さない（必須！） */
  
  border: #3990E3 solid 1px;
  width: 210px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
  
}


.info {
  width: 100%;
  height: 100%;
  z-index: 99;
}
.first-time{
  display: block;
}
.info-back{
  position: absolute;
  width: 100%;
  /*height: 78%;*/
  background-color: #ffffff;
  /*overflow: hidden;*/
}

/* 円のコンテナ */
.circle2 {
  position: relative;
  width: 300px;  /* 円のサイズ */
  height: 300px;
  flex-shrink: 0; /* 円が潰れないように固定 */
}

/* 重なりと配置の設定 */
.circle-ellipse-big1,
.circle-ellipse-small2 {
  position: absolute;
  top: 35%;
  right: -50%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  overflow: hidden;
}

.circle-ellipse-small2 {
  position: absolute;
  top: 60%;
  right: -70%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;


}
@media (max-width:1200px) {

  /* 重なりと配置の設定 */
.circle-ellipse-big1,
.circle-ellipse-small2 {
  position: absolute;
  top: 34%;
  left: 47%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  margin-left: 0px;
  overflow: hidden;
}

.circle-ellipse-small2 {
  position: absolute;
  top: 35%;
  left: 30%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 80%;
  height: 80%;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  z-index: 1;
  overflow: hidden;

}

}
@media (max-width:1024px) {
  
  /* 円のコンテナ */
.circle2 {
  position: relative;
  width: 300px;  /* 円のサイズ */
  height: 300px;
  flex-shrink: 0; /* 円が潰れないように固定 */
}

/* 重なりと配置の設定 */
.circle-ellipse-big,
.circle-ellipse-small {
  position: absolute;
  top: 35%;
  left: 70%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}

.circle-ellipse-small {
  position: absolute;
  top: 60%;
  left: 60%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;


}

}

.ellipse4 {
  width: 40%;
  height: auto;
  animation: rotate-right 10s infinite linear;
  z-index: 3;
}

.ellipse5 {
  width: 70%; /* 内側の円は少し小さく */
  height: auto;
  animation: rotate-left 6s infinite linear;
  z-index: 3;
}
.first-time-sub {
  position: relative;
  width: 100%;
  /*overflow: hidden; /* 画像のはみ出し防止 */
}

.info-img {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  /*height: auto;*/
  display: block;
  z-index: 3;
  margin: 0 auto;
  /* 画像の高さが足りない場合は object-fit: cover; などを検討 */
}

.first-box {
  /* 中央配置の設定 */
  
  position: absolute;
  top: 60%;
  left: 70%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}

@media (max-width:1368px) {
  .first-box {
  /* 中央配置の設定 */
  
  position: absolute;
  top: 60%;
  left: 55%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}
}

@media (max-width:1366px) {
  .first-box {
  /* 中央配置の設定 */
  
  position: absolute;
  top: 60%;
  left: 55%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}
}

@media (max-width:1280px) {
  .first-box {
  /* 中央配置の設定 */
  
  position: absolute;
  top: 60%;
  left: 55%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}
}
@media(max-width:1024px) {

  .first-box {
  /* 中央配置の設定 */
  
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}

}

h4 {
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  margin: 0;
  text-align: left;
}

.first-time-sub {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding-left: 50px;
  font-family: 'Montserrat', sans-serif;
  color: #3990E3; /* 青色（画像に合わせて調整してください） */
  margin-bottom: 20px;
  
}

.first-time-text{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  margin-bottom: 20px;
  color:#666E76;
}
.first-time {

  height: 800px;
  padding-bottom: 140px;
}




/*.more-btn {
  font-family: 'Montserrat', sans-serif;
  color: #3990E3;
  padding: 10px;
  text-align: left;
}*/
.more-btn:hover {
  background-color: #3990E3;
  color:#ffffff;
}
@media (max-width:1024px) {

}
@media (max-width:1023px) {
  
  .first-box {
  /* 中央配置の設定 */
  
  position: relative;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身の幅・高さの半分だけ戻して完全中央へ */
  
  /* ボックスの見栄え */
  width: 90%; /* スマホなどの画面幅に合わせる */
  max-width: 800px; /* 広がりすぎないように制限 */
  padding: 40px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px 2px #666E76;
  
  /* 背景の半透明（ここがポイント！） */
  background-color: rgba(255, 255, 255, 0.8); /* 白の80%不透明度 */
  z-index: 99;
}

.info-back{
  position: absolute;
  width: 99%;
  /*height: 78%;*/
  background-color: #ffffff;
  /*overflow: hidden;*/
}

}

.News {
  background: linear-gradient(#FFFFFF,#F3F9FF);
  width: 100%;
  height: 670px;
  position: relative;
}
.news-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 30px);
  margin: auto;
  padding-top: 40px;
}
h5 {
  display: flex;
  flex-direction: column;
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  margin: 0;
  position: relative;
}

.topics2 {
  display: flex;
  flex-direction: column;
  /*text-align: center;*/
  padding-left: 55px;
  font-family: 'Montserrat', sans-serif;
  color: #3990E3; /* 青色（画像に合わせて調整してください） */
  margin-bottom: 20px;
  /*position: relative;*/
  
}
.News-wrapper {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.dotted-line {
  border: none; /* デフォルトの線を削除 */
  border-top: 2px dotted #666E76; /* 上側に2pxの白い点線を引く */
  height: 1px; /* 線の高さを指定 */
  
  width: 90%;
  padding-left: 400px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.news {
            
            background-color: #3990E3;
            display: flex;
            flex-direction: column;
            color: white;
            padding: 6px 14px;
            font-size: 14px;
            margin-bottom: 15px;
            
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            margin-left: 20px;
}

.news-sub {
  padding-left: 30px;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
}
.label-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}
.label-sub {
  display: flex;
  flex-direction: row;
}
.clinic-info {
  width: 1920px;
  height: 499px;
  width: 100%;
  text-align: center;
}
@media (max-width:1023px) {

  h5 {
  display: flex;
  flex-direction: column;
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  margin: 0;
  position: relative;
  padding-top: 15%;
}

.topics2 {
  display: flex;
  flex-direction: column;
  /*text-align: center;*/
  padding-left: 55px;
  font-family: 'Montserrat', sans-serif;
  color: #3990E3; /* 青色（画像に合わせて調整してください） */
  margin-bottom: 20px;
  /*position: relative;*/
  
}
.News-wrapper {
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.dotted-line {
  border: none; /* デフォルトの線を削除 */
  border-top: 2px dotted #666E76; /* 上側に2pxの白い点線を引く */
  height: 1px; /* 線の高さを指定 */
  
  width: 90%;
  padding-left: 400px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.news {
            
            background-color: #3990E3;
            display: flex;
            flex-direction: column;
            color: white;
            padding: 6px 14px;
            font-size: 14px;
            margin-bottom: 15px;
            
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            margin-left: 20px;
}

.news-sub {
  padding-left: 30px;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
}
.label-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  position: relative;
}
.label-sub {
  display: flex;
  flex-direction: row;
}

}
@media (max-width:768px) {

  .label-sub {
  display: flex;
  flex-direction: row;
}

   .news-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
  /*margin: auto;*/
  padding-top: 40px;
}

  .news {
            
            background-color: #3990E3;
            display: flex;
            flex-direction: row;
            color: white;
            padding: 3px 6px;
            font-size: 0.75rem;
            margin-bottom: 10px;
            
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            margin-left: 1px;
            width: 10%;
            text-align: center;
}

}
@media (max-width:767px) {
 
  /* 重なりと配置の設定 */
.circle-ellipse-big1,
.circle-ellipse-small2 {
  position: absolute;
  top: 28%;
  left: 40%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 70%;
  height: 70%;  
  margin-left: 0px;
  overflow: hidden;
}

.circle-ellipse-small2 {
  position: absolute;
  top: 35%;
  left: 30%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 70%;
  height: 70%;
  z-index: 1;
  overflow: hidden;

}

.ellipse4 {
  width: 40%;
  height: auto;
  animation: rotate-right 10s infinite linear;
  z-index: 3;
}

.ellipse5 {
  width: 70%; /* 内側の円は少し小さく */
  height: auto;
  animation: rotate-left 6s infinite linear;
  z-index: 3;
}

/* 重なりと配置の設定 */
.circle-ellipse-big,
.circle-ellipse-small {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-ellipse-small {
  position: absolute;
  top: 10%;
  left: 70%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

  h5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  margin: 0;
  position: relative;
  padding-top: 15%;
}

  .news-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
  /*margin: auto;*/
  padding-top: 40px;
}

  .news {
            
            background-color: #3990E3;
            display: flex;
            flex-direction: column;
            color: white;
            padding: 3px 5px;
            font-size: 0.75rem;
            margin-bottom: 10px;
            
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            margin-left: 1px;
            width: 17%;
            text-align: center;
}

.dotted-line {
  border: none; /* デフォルトの線を削除 */
  border-top: 2px dotted #666E76; /* 上側に2pxの白い点線を引く */
  height: 1px; /* 線の高さを指定 */
  
  width: 60%;
  padding-left: 95%;
  margin-left: 1px;
  margin-bottom: 10px;
}

.news-sub {
  padding-left: 8%;
  font-family: 'Montserrat', sans-serif;
  color: #666E76;
  font-size: 0.85rem;
}

.News-wrapper {
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.label-sub {
  display: flex;
  flex-direction: column;
}

.ellipse4 {
  width: 40%;
  height: auto;
  animation: rotate-right 10s infinite linear;
  z-index: 3;
  margin: 0px;
}

.ellipse5 {
  width: 60%; /* 内側の円は少し大きく */
  height: auto;
  animation: rotate-left 6s infinite linear;
  z-index: 3;
  margin: 0px;
}

/* 重なりと配置の設定 */
.circle-ellipse-big,
.circle-ellipse-small {
  position: absolute;
  top: 35%;
  left: 60%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  margin: 0px;
}

.circle-ellipse-small {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に重ねる */
  width: 100%;
  height: 100%;
  margin: 0px;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}

}

.clinic-info {
  
  width: 100%;
  text-align: center;
}
 /* 全体背景 */
.simple-linear {
  background: linear-gradient(#F3F9FF, #C3E2FF);
  width: 100%;
  height: auto;
  min-height: 499px;
  position: relative; 
  padding: 60px 0;

}
@media (max-width:1023px) {
  .simple-linear {
    display: flex;
    flex-direction: column;
    background: linear-gradient(#F3F9FF, #C3E2FF);
    width: 100%;
    height: auto;
    min-height: initial;
    position: relative; 
    padding: 60px 20px;
    
}
}
/* 背景の円（絶対配置でレイアウトから切り離す） */
.bg-circles {
  position: absolute;
  top: 0;
  left: 12%;
  width: 45%;
  height: 115%;
  z-index: 1;
  pointer-events: none; /* クリックを邪魔しない */
  
}
.circle-ellipse-big6 {
  position: absolute;
  /* 位置はカンプに合わせて微調整してください */
  top: -18%;
  left: 0%;
  z-index: 3;
  overflow: hidden;
}
.circle-ellipse-small6{
  position: absolute;
  top: 8%;
  left: 10%;
  color: #C3E2FF;
  z-index: 3;
  overflow: hidden;
}

.ellipse6 { animation: rotate-right 10s infinite linear; width: 200px; opacity: 0.5; }
.ellipse7 { animation: rotate-left 6s infinite linear; width: 150px; opacity: 0.5; }

/* タイトル部分 */
.clinic-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}
.clinic-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  color: #666E76;
  margin: 0;
}
.clinic-subtitle {
  font-size: 0.85rem;
  color: #3990E3;
  margin: 5px 0 0;
}

/* メインの横並びコンテナ */
.clinic-flex-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 100px; /* 左右のブロックの間隔 */
  position: relative;
  z-index: 2;
  
}

/* 左カラム：電話・ボタン */
.contact-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 70px;
}
.tel-label {
  color: #666E76;
  font-size: 1.1rem;
}
.tel-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #666E76;
  flex-direction: row;
}
.tel-prefix { font-size: 1.2rem; }
.tel-number {
  font-size: 2rem;
  color: #3990E3;
  font-weight: bold;
}

/* ボタンのスタイル */
.more-btn3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 45px;
  border: #3990E3 solid 1px;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.3s;
  overflow: visible;
}
.more3 { color: #3990E3; font-size: 0.9rem; }
.strike {
  position: absolute;
  right: -30px; /* 枠からはみ出させる */
  width: 50px;
  transition: transform 0.3s;
}
.more-btn3:hover { background-color: #3990E3; }
.more-btn3:hover .more3 { color: #fff; }
.more-btn3:hover .strike { transform: translateX(10px); }

/* 右カラム：テーブル */
.schedule-column {
  color: #666E76;
  padding-left: 70px;
}
.schedule-table {
  border-collapse: collapse;
}
.schedule-table th {
  padding: 10px;
  font-weight: normal;
}
.schedule-table td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.time-label {
  text-align: left !important;
  display: flex;
  flex-direction: column;
}
.time-label .label { color: #3990E3; font-size: 1.4rem; line-height: 1; }
.time-label .time-range { font-size: 0.7rem; }

.circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #3990E3;
  border-radius: 50%;
}
.note { font-size: 0.75rem; text-align: left; margin-top: 10px; }

/* アニメーション用（定義がないと動かないので追加） */
@keyframes rotate-right { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-left { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

@media (max-width:1024px) {

  /* メインの横並びコンテナ */
.clinic-flex-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 50px; /* 左右のブロックの間隔 */
  position: relative;
  z-index: 2;
  
}

}

@media (max-width:1023px) {
  .clinic-info{
    position: relative;
  }
  
  .clinic-header{
    height: 160px;
    position: relative;
  }
  .clinic-flex-container {
  position: relative;
  /*display: flex;*/
  /*justify-content: center;*/
  flex-direction: column;
  /*gap: 100px; /* 左右のブロックの間隔 */
  
  z-index: 1000;
  
}

  /* 左カラム：電話・ボタン */
.contact-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  
}
.tel-label {
  color: #666E76;
  font-size: 1.1rem;
  padding-left: 50px;
}
.tel-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #666E76;
  flex-direction: row;
  justify-content: center;
}
.tel-prefix { font-size: 1.2rem; }
.tel-number {
  font-size: 2rem;
  color: #3990E3;
  font-weight: bold;
}
.btn-wrapper{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* ボタンのスタイル */
.more-btn3 {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 280px;
  height: 45px;
  border: #3990E3 solid 1px;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.3s;
}
.more3 { color: #3990E3; font-size: 0.9rem; }
.strike {
  position: absolute;
  right: -30px; /* 枠からはみ出させる */
  width: 50px;
  transition: transform 0.3s;
}
.more-btn3:hover { background-color: #3990E3; }
.more-btn3:hover .more3 { color: #fff; }
.more-btn3:hover .strike { transform: translateX(10px); }

/* 右カラム：テーブル */
.schedule-column {
  color: #666E76;
  padding-left: 0;
  margin-top: 40px;
}
.schedule-table {
  border-collapse: collapse;
}
.schedule-table th {
  padding: 10px;
  font-weight: normal;
}
.schedule-table td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.time-label {
  text-align: left !important;
  display: flex;
  flex-direction: column;
}
.time-label .label { color: #3990E3; font-size: 1.4rem; line-height: 1; }
.time-label .time-range { font-size: 0.7rem; }

.circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #3990E3;
  border-radius: 50%;
}
.note { font-size: 0.75rem; text-align: left; margin-top: 10px; }

/* アニメーション用（定義がないと動かないので追加） */
@keyframes rotate-right { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-left { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

@media (max-width:1023px) {
  
}

@media (max-width: 1023px) {
  
  /* 1. 親要素の固定高さを解除し、コンテンツに合わせて自動で伸びるようにする */
  .simple-linear {
    /*display: flex;
    flex-direction: column;*/
    background: linear-gradient(#F3F9FF, #C3E2FF);
    width: 100%;
    height: auto;            /* 【重要】固定値を解除 */
    min-height: initial;     /* PC時の制限をリセット */
    padding: 40px 20px 60px; /* 上下の余白を適切に設定 */
    position: relative;
    z-index: 980;
  }

  /* 2. フレックスコンテナ（電話＋テーブルの親） */
  .clinic-flex-container {
    display: flex;           /* コメントアウトを解除して有効化 */
    flex-direction: column;
    align-items: center;     /* 中身を中央に揃える */
    gap: 40px;               /* 電話とテーブルの間の隙間 */
    z-index: 10;             /* マップより確実に上に調整 */
  }

  /* 3. 左カラム（電話・ボタンエリア） */
  .contact-column {
    display: flex;
    flex-direction: column;
    align-items: center;     /* 全体を中央寄せ */
    gap: 20px;
    padding-right: 0;        /* PC用の右パディングをリセット */
    width: 100%;
  }
  
  .tel-label {
    padding-left: 0;         /* 左固定のパディングをリセット */
    text-align: center;
  }

  /* ボタンが画面右にはみ出すのを防ぐため、marginを中央寄せに */
  .more-btn3 {
    margin: 0 auto;
  }

  /* 4. 右カラム（テーブルエリア）のズレを修正 */
  .schedule-column {
    padding-left: 0;         /* PC用の左パディングをリセット */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;     /* テーブルを中央に配置 */
  }

  .schedule-table {
    width: 100%;
    max-width: 500px;        /* スマホ・タブレット幅で潰れすぎないよう制限 */
    margin: 0 auto;
  }

 
}

}

@media (max-width:767px) {

  /* 3. 画像（大きい円）：時計回りに回転 */
.ellipse8 {
  width: 60%; /* 親要素(300px)に合わせる */
  height: auto;
  animation: rotate-right 10s infinite linear; /* 10秒で1周、無限、等速 */
  overflow: hidden;
  margin: 0px;
}

/* 4. 画像（小さい円）：反時計回りに回転 */
.ellipse9 {
  width: 56%;  /* 中に入るように少し小さく調整 */
  height: auto;
  animation: rotate-left 6s infinite linear; /* 6秒で1周、無限、等速 */
  overflow: hidden;
  margin: 0px;
}

  /* 1. 親要素の固定高さを解除し、コンテンツに合わせて自動で伸びるようにする */
  .simple-linear {
    /*display: flex;
    flex-direction: column;*/
    background: linear-gradient(#F3F9FF, #C3E2FF);
    width: 100%;
    height: auto;            /* 【重要】固定値を解除 */
    min-height: initial;     /* PC時の制限をリセット */
    /*padding: 40px 20px 60px; /* 上下の余白を適切に設定 */
    position: relative;
    z-index: 980;
  }

  /* 2. フレックスコンテナ（電話＋テーブルの親） */
  .clinic-flex-container {
    display: flex;           /* コメントアウトを解除して有効化 */
    flex-direction: column;
    align-items: center;     /* 中身を中央に揃える */
    gap: 40px;               /* 電話とテーブルの間の隙間 */
    z-index: 10;             /* マップより確実に上に調整 */
  }

  /* 3. 左カラム（電話・ボタンエリア） */
  .contact-column {
    display: flex;
    flex-direction: column;
    align-items: center;     /* 全体を中央寄せ */
    gap: 20px;
    padding-right: 0;        /* PC用の右パディングをリセット */
    width: 100%;
  }
  
  .tel-label {
    padding-left: 0;         /* 左固定のパディングをリセット */
    text-align: center;
  }

  /* ボタンが画面右にはみ出すのを防ぐため、marginを中央寄せに */
  .more-btn3 {
    margin: 0 auto;
  }

  .clinic-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  color: #666E76;
  margin: 0;
}
.clinic-subtitle {
  font-size: 0.85rem;
  color: #3990E3;
  margin: 5px 0 0;
}

/* 背景の円（絶対配置でレイアウトから切り離す） */
.bg-circles {
  position: absolute;
  top: 0;
  left: 12%;
  width: 45%;
  height: 115%;
  z-index: 1;
  pointer-events: none; /* クリックを邪魔しない */
  
}
.circle-ellipse-big6 {
  position: absolute;
  /* 位置はカンプに合わせて微調整してください */
  top: -18%;
  left: 36%;
  z-index: 3;
  overflow: hidden;
}
.circle-ellipse-small6{
  position: absolute;
  top: -7%;
  left: 63%;
  color: #C3E2FF;
  z-index: 3;
  overflow: hidden;
}

.ellipse6 { animation: rotate-right 10s infinite linear; width: 150px; opacity: 0.5; }
.ellipse7 { animation: rotate-left 6s infinite linear; width: 100px; opacity: 0.5; }


  /* 4. 右カラム（テーブルエリア）のズレを修正 */
  .schedule-column {
    padding-left: 0;         /* PC用の左パディングをリセット */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;     /* テーブルを中央に配置 */
  }
  .schedule-column-container {
    width: 100%;
    /*margin: 0 auto;*/
  }
  .schedule-table {
    width: 80%;
    max-width: 400px;        /* スマホ・タブレット幅で潰れすぎないよう制限 */
    /*margin: 0 auto;*/
  }
.time-label {
  text-align: left !important;
  display: flex;
  flex-direction: column;
}
.time-label .label {
   color: #3990E3; 
   font-size: 1.0rem; 
   line-height: 0.5;
   padding-top: 10px; 
  }
.time-label .time-range { font-size: 0.5rem; }

.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #3990E3;
  border-radius: 50%;
}
.note { font-size: 0.55rem; text-align: left; margin-top: 10px; }

/* アニメーション用（定義がないと動かないので追加） */
@keyframes rotate-right { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-left { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }


.schedule-table th {
  padding: 5px;
  font-weight: normal;
}
.schedule-table td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.more-btn3 {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  height: 45px;
  border: #3990E3 solid 1px;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.3s;
}
.more3 { color: #3990E3; font-size: 0.9rem; }
.strike {
  position: absolute;
  right: -30px; /* 枠からはみ出させる */
  width: 50px;
  transition: transform 0.3s;
}
.more-btn3:hover { background-color: #3990E3; }
.more-btn3:hover .more3 { color: #fff; }
.more-btn3:hover .strike { transform: translateX(10px); }

/* {
  border: 1px solid red !important;
}*/

}
.map {
  
  width:100%;
  text-align: center;
  display: block;
}

.google-map {
  position: relative;
  z-index: 2;
  display: block;
}

@media (max-width:1023px) {
 
  /* 5. Googleマップのz-indexを下げる */
  .google-map {
    position: relative;
    z-index: 1;              /* clinic-flex-container(z-index:10) より低く */
    padding-top: 216px;
  }
}
.address {
  width: 501px;
  height: 410px;
  top: 0%;
  left: 20%;
  background-color: rgba(57, 144, 227, 0.5);
  /*opacity: 50%;*/
  position: absolute;
  display: block;
}
.address-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 30%;
  position: relative;
  top:12%;
  left:0%;
}

.address2{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1.32rem;
  position: relative;
  top:18%;
  justify-content: flex-start;
  padding-left: 40px;
  font-family: Noto Sans JP;
}
.postalcode {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1.32rem;
  position: relative;
}
.train{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1.32rem;
  position: relative;
  padding-top: 24px;
}
.train2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1.32rem;
  position: relative;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3990E3;
  color: #FFFFFF;
  
  height: 80px;
  width:100%;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
@media (max-width:1023px) {

  .address {
  width: 501px;
  height: 410px;
  top: 0%;
  left: 20%;
  background-color: #3990E3;
  opacity: 50%;
  position: relative;
}

.address-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 5%;
  

}

.google-map {
    position: relative;
    z-index: 1;              /* clinic-flex-container(z-index:10) より低く */
    padding-top: 220px;
  }

}

@media (max-width:767px) {

.google-map {
    display: block;
    position: relative;
    z-index: 1;              /* clinic-flex-container(z-index:10) より低く */
    padding-top: 220px;
    
    vertical-align: bottom;
  }

  .footer{
    text-align: center;
  }

  .address {
  width: 100%;
  height: auto;
  /*top: 0%;
  left: 20%;*/
  background-color: #3990E3;
  opacity: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0%;
  left: 0%;
}
  
.address-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.address2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1rem;
  position: relative;
  top:18%;
  justify-content: center;
  padding-left: 20px;
  font-family: Noto Sans JP;
}
.postalcode {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1rem;
  position: relative;
}
.train{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1rem;
  position: relative;
  padding-top: 24px;
}
.train2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  font-size: 1rem;
  position: relative;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3990E3;
  color: #FFFFFF;
  font-size: 1.03rem;
  height: 80px;
  width:100%;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
.copy {
  display: none;
}
}