@charset "UTF-8";

/* -----------------------------------------------------------
   1. モーダル外枠（オーバーレイ：全体フェード）
----------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* 下のコンテンツが見えるよう調整（少し濃いめ） */
  z-index: 999999 !important;
  /* 他の固定要素（ナビ等）より前面へ */
  justify-content: center;
  align-items: center;

  /* 初期状態：透明 */
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  cursor: pointer;
  z-index: 999999;
}

/* アクティブ時（JSで .is-active が付与された際） */
.modal-overlay.is-active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------
   2. モーダル本体（白い箱：フェード ＋ スライド）
----------------------------------------------------------- */
.modal-body {
  position: relative;
  background: #ffffff;
  /* PCでの可変幅：ウィンドウサイズに応じて最大900pxまで広がる */
  width: 84%;
  max-width: 900px;
  max-height: 84vh;
  /* 画面高さの90%を上限 */
  padding: 50px 30px 40px;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  cursor: default;
  text-align: left;
  overflow-y: auto;
  /* 縦長時に内部スクロール */
  -webkit-overflow-scrolling: touch;

  /* アニメーション初期状態：透明 ＋ 50px下に配置 */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  transition-delay: 0.1s;
  /* 背景が少し出てから中身が動く演出 */
}

/* 表示時のアニメーション完了状態 */
.modal-overlay.is-active .modal-body {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------
   3. 閉じるボタン（×）
----------------------------------------------------------- */
.modal-close-icon {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 32px;
  color: #aaa;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease;
}

.modal-close-icon:hover {
  color: #333;
}

/* -----------------------------------------------------------
   4. 内部コンテンツ整形（テーマ style.css のフォント・色に準拠）
----------------------------------------------------------- */
.modal-content-inner {
  font-family: var(--font-shopporimin), serif;
  /* テーマの明朝体 */
  color: #333;
}

.modal-ttl {
  color: #13316A;
  /* テーマの紺色 */
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 2px solid #13316A;
  padding-bottom: 12px;
  margin-bottom: 25px;
  text-align: center;
}

.modal-intro {
  margin-bottom: 25px;
  line-height: 1.8;
  font-size: 1rem;
}

.modal-intro strong {
  color: #13316A;
}

/* 警告・メッセージボックス */
.caution-box {
  margin-top: 40px;
  background-color: rgb(244 67 54 / 6%);
  /* 非常に薄い赤背景 */
  border: 1px solid #f44336;
  /* テーマの赤色 */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.caution-title {
  color: #f44336;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

/* リスト形式（ぶら下げインデント：●の位置を縦に揃える） */
.modal-list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.modal-list>li {
  position: relative;
  padding-left: 1.5em;
  /* 全体の余白 */
  margin-bottom: 20px;
  line-height: 1.7;
}

/* 文頭の「●」を上端に固定 */
.modal-list>li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #13316A;
  line-height: 1.7;
  /* 親の1行目と高さを合わせる */
}

/* 補足・注釈テキスト */
.sub-note {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-top: 6px;
  line-height: 1.5;
}

/* 託児時間などの枠囲み装飾 */
.time-table {
  display: inline-block;
  background: #f4f4f4;
  padding: 6px 14px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 0.95rem;
  border-left: 4px solid #13316A;
}

.time-table .label {
  font-weight: bold;
  margin-right: 10px;
  color: #13316A;
}

/* 予約ガイドエリア全体の共通設定 */
.reserve-guide-area {
  /* モーダルで使っていたフォントをここで強制適用 */
  font-family: var(--font-shopporimin), serif;
  color: #333;
  max-width: 900px;
  margin: 40px auto;
  /* カレンダーとの余白 */
  padding: 0 20px;
}

/* 注意事項ボックス */
.reserve-caution-box {
  background-color: #fdf2f0;
  border: 1px solid #d54e21;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.reserve-caution-box .caution-title {
  color: #d54e21;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* 選択エリア */
.reserve-selection-area {
  text-align: center;
  margin-bottom: 30px;
}

.reserve-sub-ttl {
  font-weight: bold;
  color: #13316A;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

/* ボタンデザイン */
.reserve-choice-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.btn-reserve-choice {
  flex: 1;
  background: #fff;
  border: 2px solid #13316A;
  color: #13316A;
  padding: 15px 10px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: inherit;
  /* 親の明朝体を継承 */
}

.btn-reserve-choice span {
  font-size: 0.75rem;
  font-weight: normal;
  margin-top: 5px;
  color: #666;
}

.btn-reserve-choice:hover,
.btn-reserve-choice.is-selected {
  background: #13316A;
  color: #fff;
}

.btn-reserve-choice.is-selected span {
  color: #fff;
}

/* 補足テキスト */
.reserve-footer-notes .sub-note {
  font-size: 0.85rem;
  color: #666;
  text-align: center;
}

/* -----------------------------------------------------------
   5. モバイル対応（SP）
----------------------------------------------------------- */
@media screen and (max-width: 800px) {
  .modal-body {
    width: 88%;
    padding: 45px 15px 30px;
    max-height: 85vh;
    /* スマホ画面内に収めてスクロール可能に */
  }

  .modal-ttl {
    font-size: 1.2rem;
  }

  .modal-intro {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .modal-list>li {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .caution-box {
    padding: 15px;
    font-size: 0.85rem;
  }

  .reserve-choice-buttons {
    flex-direction: column;
  }

  .btn-reserve-choice {
    width: 100%;
    font-size: 1rem;
  }
}


/* -----------------------------------------------------------
   ex. モーダル内ボタン（予防管理）
----------------------------------------------------------- */
.modal-selection-area {
  margin-top: 30px;
  text-align: center;
}

.modal-sub-ttl {
  font-weight: bold;
  color: #13316A;
  margin-bottom: 20px;
}

.modal-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.btn-choice {
  background: #fff;
  border: 2px solid #13316A;
  color: #13316A;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-choice span {
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
  color: #666;
}

.btn-choice:hover {
  background: #f0f4f8;
}

/* 選択された瞬間の演出用 */
.btn-choice.is-selected {
  background: #13316A;
  color: #fff;
}

.btn-choice.is-selected span {
  color: #eee;
}

@media screen and (max-width: 800px) {
  .btn-choice {
    font-size: 16px;
    padding: 15px;
  }
}


/* --- 既存カレンダー専用スタイル（移行分） --- */
.sp {
  display: none;
}

#top-apo {
  padding: 0 0 0 11vw;
  margin-top: 100px;
  margin-bottom: -100px;
  position: relative;
}

#top-apo .inner {
  max-width: 90%;
}

#top-apo .t-ttl01 {
  left: -85px;
  top: 4vw;
}

.top-apo-desc {
  text-align: center;
  margin-bottom: 30px;
}

.top-apo-contents {
  padding: 50px;
  max-width: 90%;
  position: relative;
}

.apo-frame-nav {
  margin-bottom: 30px;
}

.apo-frame-nav__list {
  display: flex;
  justify-content: space-between;
}

.apo-frame-nav__list>li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  cursor: pointer;
  border-radius: 5px;
  border: solid 2px;
  text-align: center;
  padding: 10px;
  color: #ccc;
  transition: 0.3s;
}

.apo-frame-nav__list>li.active {
  color: #fff;
  background: #222;
}

.apo-frame-tab__list {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.apo-frame-tab__list>li {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19.5%;
  line-height: 1.6;
  color: #305496;
  background: #fff;
  text-align: center;
  cursor: pointer;
  border: solid 1px #305496;
  border-radius: 5px;
  padding: 10px 5px;
  transition: 0.2s;
}

.apo-frame-tab__list>li.active {
  color: #fff;
  background: #305496;
}

.apo-frame-data {
  margin-top: 20px;
}

.apo-frame-data-box {
  display: none;
  border: solid 3px #305496;
  border-radius: 5px;
  overflow: hidden;
}

.apo-frame-data-box iframe {
  display: block;
  width: 100%;
  background: #fff;
}

/* --- モーダル・ガイドスタイル --- */
.reserve-guide-area, .modal-content-inner {
  font-family: var(--font-shopporimin), serif;
  color: #333;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.8s;
  align-items: center;
  justify-content: center;
}

.modal-overlay.is-active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-body {
  background: #fff;
  width: 84%;
  max-width: 900px;
  max-height: 84vh;
  padding: 50px 30px;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  transform: translateY(50px);
  transition: 0.8s;
}

.modal-overlay.is-active .modal-body {
  transform: translateY(0);
}

.modal-ttl {
  color: #13316A;
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 2px solid #13316A;
  padding-bottom: 12px;
  margin-bottom: 25px;
  text-align: center;
}

.reserve-caution-box {
  background-color: #fdf2f0;
  border: 1px solid #d54e21;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
}

.reserve-choice-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
}

.btn-reserve-choice {
  flex: 1;
  background: #fff;
  border: 2px solid #13316A;
  color: #13316A;
  padding: 15px 10px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-reserve-choice span {
  font-size: 0.75rem;
  font-weight: normal;
  margin-top: 5px;
  color: #666;
}

.btn-reserve-choice.is-selected {
  background: #13316A;
  color: #fff;
}

.btn-reserve-choice.is-selected span {
  color: #fff;
}

@media screen and (max-width: 800px) {
  .sp {
    display: block;
  }

  #top-apo {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .top-apo-contents {
    padding: 50px 5vw;
    max-width: 100%;
  }

  .apo-frame-nav__list>li {
    font-size: 13px;
  }

  .apo-frame-tab__list>li {
    width: 33.3%;
    font-size: 14px;
    margin-bottom: 2px;
  }

  .reserve-choice-buttons {
    flex-direction: column;
  }

  .modal-body {
    width: 92%;
    padding: 40px 15px;
  }
}