/* ボタン風のアニメーションを持つ画像 */
.clicking-animation {
  display: block;
  width: 100%; /* 親要素の幅にフィット */
  height: auto;
  position: relative;
  animation: double_click_effect 1.2s infinite; /* アニメーションの持続時間を短縮 */
}

/* ダブルクリックを表現するアニメーション */
@keyframes double_click_effect {
  0%, 20% {
      transform: translateY(0); /* 初期位置（押されていない状態） */
  }
  25%, 30% {
      transform: translateY(5px); /* 1回目の押し込み */
  }
  35%, 40% {
      transform: translateY(0); /* 1回目から戻る */
  }
  45%, 50% {
      transform: translateY(5px); /* 2回目の押し込み */
  }
  55%, 60% {
      transform: translateY(0); /* 2回目から戻る */
  }
  100% {
      transform: translateY(0); /* 押されていない状態に戻る */
  }
}



/*PC用*/
@media print, screen and (min-width: 641px){


  /*TOP 本日来院する*/

  .mainvisual{
      position:relative
  }

  .today-reserve-btn{
      position:absolute;
      top:380px;
      left:70%;
  }


  /* 待ち時間10分短縮 */
  .image-container {
    position: relative;
    width: 525px; /* 必要に応じて画像の幅を設定 */
    height: auto; /* 高さを画像比率に従う */
    overflow: hidden; /* 必要に応じて画像が範囲外に出ないように */
    display: inline-block; /* インライン要素のように動作 */
    margin-top: 1rem;
    cursor: pointer;
  }




/*New予約ボタン*/

.pickup .pickup__text a {
  width: auto;
  margin: 5px 20px;
  padding: 15px;
  font-size: 22px;
  font-weight: bold;
}

.reserve_web {
  max-width: 350px;
  height: auto;
  display: block;
  margin: -20px;
  /* margin-top: 5px; */
}

.reserve_line {
  max-width: 350px;
  height: auto;
  display: block;
  margin: -30px;
  margin-top: 5px;
}

.reserve_tel{
  max-width: 350px;
  height: auto;
  display: block;
  margin: -20px;
}


.reserve_questionnaire {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 5px;
  width: 350px;
  margin-bottom:1.5rem;
}




/* 託児・子どもとママバナー */
.takuji_banner img{
  width: 100%;
  margin: auto;
}

.takuji_banner{
flex:1;
}

.kodomama_banner img{
  width: 100%;
  margin: auto;
}

.kodomama_banner{
flex:1;
}

.child-banner{
  display: flex;
  gap: 20px; /* 画像間の隙間を指定（必要な値に調整） */
}




/* 空き枠カレンダー */

/* #dentry_calender_current_month{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 20px;
  font-weight: bold; 
  width: 100%;
  max-width: 800px; 
  margin: 0 auto; 
  text-align: center !important; 
}

#dentry_calender_date_navi{
  justify-content: space-between; 
  align-items: center; 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 10px 0; 
}

#dentry_calender_body {
  display: flex;
  justify-content: center; 
  align-items: center; 
  width: 100%;
  text-align: center !important; 
  max-width: 800px;
  margin: 0 auto; 
  max-height: 400px;
  overflow-y: hidden; 
  border: 1px solid #ccc;
  position: relative; 
}

#dentry_calender_main tbody {
  display: block;
  max-height: 300px; 
  overflow-y: auto; 
  width: 100%; 
}

#dentry_calender_main thead, 
#dentry_calender_main tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#dentry_calender_main {
  width: 100%;
  max-width: 800px; 
  margin: 0 auto; 
  
}

#dentry_calender_main thead {
  position: sticky;
  top: -1px; 
  z-index: 9;
} */




#dentry_calender_main th, #dentry_calender_main td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ccc;
}

#dentry_calender_body {
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

#dentry_calender_main {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#dentry_calender_main thead,
#dentry_calender_main tbody {
  display: table;
  width: 100%;
}

#dentry_calender_main tbody {
  display: table;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

#dentry_calender_main thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

#dentry_calender_main td:first-child,
#dentry_calender_main th:first-child {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  text-align: left;
  padding-left: 10px;
  white-space: nowrap;
}

#dentry_calender_main tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 列の幅を均等にする */
}

.modalWrapper {
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  padding-bottom: 10px; /* モーダル全体の下に余白を作る */
}



/* ジャンプボタン */
.button-container {
  display: flex; 
  justify-content: center;
  gap: 20px;
  padding: 20px 0 !important;
}

.button-container a img {
  width: 240px;
  height: auto;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}



.container-button{
  display: flex; /* 横並びにする */
  justify-content: center; /* 中央揃え */
  gap: 15px; /* ボタン間の余白 */
}

.container-button a img{
  width: auto; /* 画像のサイズをそのまま維持 */
  max-width: 100%; /* 親要素内で最大幅を維持 */
  height: auto;
}




/* リスト全体のスタイル調整 */
main .list01 {
  width: 98%;
  max-width: 1000px;
  margin: 10px auto;
  padding-left: 0; /* 左側の余白を削除 */
  list-style: none;
}

/* すべてのリストに統一のスタイルを適用 */
main .list01 li {
  display: flex; /* アイコン・ピンク丸とテキストを横並び */
  align-items: center; /* アイコンとテキストの高さを揃える */
  gap: 8px; /* アイコン（または●）とテキストの間隔 */
  padding-left: 0; /* 左の余白を削除 */
  margin-bottom: 12px;
  font-size: 18px;
}

/* 画像アイコンのリスト項目からピンクの丸を消す */
main .list01 .custom-icon::before {
  content: none; /* デフォルトの `●` を削除 */
}

/* 画像アイコンの調整 */
main .list01 .custom-icon .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px; /* ピンクの丸と同じサイズ */
  margin-right: 7px;
}

main .list01 .custom-icon .icon img {
  width: 25px; /* アイコンサイズをピンクの丸と同じに */
  height: auto;
}



}






/*SP用*/
@media screen and (max-width:640px) {


  /*TOP 本日来院する*/

  .mainvisual{
      position:relative
  }

  .today-reserve-btn{
      position:absolute;
      top:76%;
      left:20px;
      width:35%
  }



  /*New予約ボタン*/

  .reserve_web {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin-bottom:-25px;
    margin-top:-35px;
}

.reserve_line {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin-bottom:-60px;
}

.reserve_tel{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin-bottom:-40px;
}


.reserve_questionnaire {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    width: 90%;
    margin-bottom:15px;
}

 /* 待ち時間10分短縮 */
 .image-container {
  position: relative;
  width: 370px; /* 必要に応じて画像の幅を設定 */
  height: auto; /* 高さを画像比率に従う */
  overflow: hidden; /* 必要に応じて画像が範囲外に出ないように */
  display: inline-block; /* インライン要素のように動作 */
}


/* 託児・子どもとママバナー */

.takuji_banner img{
  width: 100%;
  margin: auto;
}

.kodomama_banner img{
  width: 100%;
  margin: auto;
}



/*Newフッターボタン*/

.footer-fixed-bg1{
  position: fixed;
  width: 100%;
  bottom: -10px;
  z-index: 9998;
}

.footer-fixed-line {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 100px;
  text-align: center;
  padding-right: 0px;
  padding-left: 0px;
}

.footer-fixed-line:nth-child(2){
  padding-right: 0px;
  padding-left: 0px;
  margin-top:-33px;
}


.footer_line{
  width: 100%;
  padding-top:5px;
  margin-right: -1px;
}

.footer_web-questionnaire {
  width: 100%;
  padding-top:5px;
}

.footer_tel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-right: -3px;
}

.footer_web {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  /* margin-right: -1px; */
}



/* 空き枠カレンダー */

/* === カレンダー全体のレイアウト === */
/* #dentry_calender_current_month {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center !important;
}

#dentry_calender_date_navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 0;
} */

/* === カレンダーの枠 & スクロール設定 === */
/* #dentry_calender_body {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative;
} */

/* === カレンダーのテーブル設定 === */
/* #dentry_calender_main {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#dentry_calender_main thead {
  position: sticky;
  top: 0;
  z-index: 4;
  display: table;
  width: 100%;
  table-layout: fixed;
}

#dentry_calender_main tbody {
  display: block;
  max-height: 250px;
  overflow-y: auto;
  width: 100%;
} */

/* === 行と列の幅を固定 === */
/* #dentry_calender_main thead tr, 
#dentry_calender_main tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
} */

/* === ヘッダー（日付部分）のスタイル === */
/* #dentry_calender_main th {
  text-align: center;
  font-size: 14px;
  padding: 8px;
  border: 1px solid #ccc;
} */

/* === 各セルのスタイル === */
/* #dentry_calender_main td {
  text-align: center;
  border: 1px solid #ccc;
}

#dentry_calender_main td, 
#dentry_calender_main th {
  font-size: 12px;
  padding: 4px;
} */

/* === 時間の列（左端）を固定幅に設定 === */
/* #dentry_calender_main td:first-child, 
#dentry_calender_main th:first-child {
  min-width: 60px;
  white-space: nowrap;
  text-align: left;
  padding-left: 5px;
} */



.modalWrapper {
  width: 95%;
}

#dentry_calender_body {
  max-height: 400px;
  overflow-y: auto;
  padding-bottom: 0;
}

#dentry_calender_main tbody {
  max-height: 250px;
}

#dentry_calender_main td, 
#dentry_calender_main th {
  text-align: center;
  font-size: 12px;
  padding: 6px;
  border: 1px solid #ccc;
}

#dentry_calender_main {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#dentry_calender_main thead,
#dentry_calender_main tbody {
  display: table;
  width: 100%;
}

#dentry_calender_main tbody {
  max-height: 350px;
  overflow-y: auto;
}

#dentry_calender_main thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

#dentry_calender_main td:first-child,
#dentry_calender_main th:first-child {
  width: 80px; /* スマホ用に少し狭める */
  min-width: 80px;
  max-width: 80px;
  padding-left: 5px;
}

#dentry_calender_main tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.modalWrapper {
  width: 95%; /* スマホでは少し広めに */
  max-height: 90vh;
  overflow: auto;
  padding-bottom: 5px; /* 下の余白を調整 */
}



/* ジャンプボタン */
.button-container {
  display: flex; 
  justify-content: center;
  gap: 5px;
  padding: 0 10px 35px !important;
}

.button-container a img {
  width: 200px;
  height: auto;
  cursor: pointer;
}



/* リスト全体のスタイル調整 */
main .list01 {
  width: 96%;
  max-width: 1000px;
  margin: 10px auto;
  padding-left: 1.5em; /* スマホの元々の設定を維持 */
  list-style: none;
}

/* すべてのリスト項目*/
main .list01 li {
  display: flex; /* アイコン・ピンク丸とテキストを横並び */
  align-items: center; /* アイコンとテキストの高さを揃える */
  gap: 6px; /* アイコン（または●）とテキストの間隔 */
  padding-left: 0; /* 左の余白を削除 */
  margin-bottom: 10px;
  font-size: 16px;
}

/* 画像アイコンのリスト項目からピンクの丸を消す */
main .list01 .custom-icon::before {
  content: none; /* デフォルトの `●` を削除 */
}

/* 画像アイコンの調整 */
main .list01 .custom-icon .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  margin-right: 7px;
}

main .list01 .custom-icon .icon img {
  width: 22px;
  height: auto;
}

/* ピンクの丸のスタイル*/
main .list01 li:not(.custom-icon)::before {
  content: "●";
  color: #ff717b; /* ピンク色 */
  font-size: 16px; /* スマホ用と同じフォントサイズ */
  text-indent: 2em; /* スマホ用の間隔を維持 */
  margin-left: -2em;
  padding: 0 1em 0 0;
  vertical-align: middle;
}

}