@charset "UTF-8";

/* =========================================================
   HOW PAGE LAYOUT （画像通りの本当の元デザイン完全復元版）
========================================================= */

/* 1. 全体を大きな2カラム（左と右）に分ける親の設定 */
.howFlow {
  display: grid !important;           /* 💡 flexからgrid（格子）レイアウトに変更します */
  grid-template-columns: 32% 65% !important; /* 左側を32%、右側を65%の2列に固定 */
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

/* 🟥 左側：注意事項ボックス（全体の約32%の幅） */
/* 💡 gridの仕組みを使うことで、右側（①〜③）の合計の高さに合わせて、この赤枠が自動で下まで100%伸びるようになります */
.howFlow > .box:nth-child(1) {
  grid-column: 1 !important;          /* 1列目（左側）に配置 */
  grid-row: 1 / span 3 !important;    /* 💡超重要：右側の3つのステップ（3行分）と同じ高さまで縦に貫通させる命令 */
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;            /* 高さを100%にして下まで伸ばす */
}

/* 注意事項の赤枠の中身（.alert）を一番下まで綺麗に伸ばす設定 */
.howFlow > .box:first-child > .alert {
  flex: 1 1 auto !important;
  height: 100% !important;
  box-sizing: border-box;
  background-color: #fdf7f7;
  padding: 15px;
}

/* 🟦 右側：①仮予約、②申請書提出、③使用料納付 の3つの大箱を右側に配置 */
/* 💡 margin-leftのバグを消し去り、2列目（右側）に上から順番にピタッと縦並びで積み重ねます */
.howFlow > .box:nth-child(2),
.howFlow > .box:nth-child(3),
.howFlow > .box:nth-child(4) {
  grid-column: 2 !important;          /* 2列目（右側）に配置 */
  width: 100% !important;
  margin: 0 0 35px 0 !important;      /* ボックス同士の上下の隙間（矢印用） */
  box-sizing: border-box;
}

/* 💡 4つ目の要素（③使用料納付）だけは下に隙間（矢印）を作らない */
.howFlow > .box:nth-child(4) {
  margin-bottom: 0 !important;
}

/* 2. 各手順の箱（.flow-box）が、画像通り「上が濃い水色、下が薄い青」になる設定 */
.howFlow .flow-box {
  display: flex !important;
  flex-direction: column !important;  /* 内部を縦並びにする */
  box-sizing: border-box;
  width: 100% !important;
  position: relative;
}

/* 「①仮予約」「②申請書提出」「③使用料納付」の濃い水色の見出し部分 */
.howFlow .flow-box > div:first-child {
  width: 100% !important;             /* 横幅いっぱいに広げる */
  background-color: #AACED7 !important; /* 元の濃い水色 */
  color: #333333 !important;
  padding: 10px 15px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}

/* 見出しの下にある、具体的な説明文やタブボタンが配置される薄い青のエリア */
.howFlow .flow-box > div:not(:first-child) {
  padding: 20px !important;
  box-sizing: border-box;
  background-color: #D7F1F8 !important; /* 元の薄い青 */
  text-align: left;
}

/* 💡 ボックス同士を繋ぐ、元の「下向きの矢印」を復元 */
.howFlow > .box:not(:nth-child(4)) .flow-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 10;
  border: 15px solid transparent;
  border-top: 15px solid #D7F1F8; /* 薄い青色の矢印 */
}

/* 3. ①仮予約の中の「電話・窓口 ⇔ インターネット」のタブの幅リセット */
.tempRegist {
  width: 100% !important;
  display: block !important;
}

/* =========================================================
   HEADINGS & FLOW COMMON
========================================================= */

.heading {
  background-color: #fd9d9d;
  font-weight: bold;
  padding: 15px;
  text-align: center;
}

.flow-box {
  font-size: 16px;
}

.flow-box p {
  margin: 0;
}

.flow-flexBox p:first-child {
  background-color: #D7F1F8;
  border: 1px solid #D7F1F8;
  padding: 1%;
  text-align: center;
}

/* =========================================================
   ALERT
========================================================= */

.alert {
  background-color: #fdf7f7;
  border: 1px solid #fd9d9d;
  width: 100%;
  box-sizing: border-box;
}

.alert p {
  padding: 15px 15px 5px;
  margin: 0;
}

.alert ol {
  counter-reset: alert-counter;
  list-style: none;
  margin: 0;
  padding: 15px;
  text-align: left;
}

.alert li {
  display: flex;
  margin-bottom: 15px;
  position: relative;
}

.alert li:last-child {
  margin-bottom: 0;
}

/* 💡 ①〜④の丸数字のデザイン崩れを防ぐための調整 */
.alert li::before {
  content: counter(alert-counter);
  counter-increment: alert-counter;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  margin-top: 2px;
  border: 1px solid #000000;
  border-radius: 50%;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.alert li span {
  display: block;
  width: calc(100% - 28px);
}

/* =========================================================
   SERVICE (図書・印刷タブ切替エリア)
========================================================= */

.serviceBox {
  padding: 10px;
}

.serviceFlex {
  display: flex;
  gap: 15px;
  text-align: left;
}

.serviceFlex h4 {
  margin: 0 0 10px 0;
  font-weight: bold;
  font-size: 1.2rem;
}

.serviceFlex div {
  flex: 1;
  padding: 0;
  background: transparent !important;
}

.serviceFlex img {
  height: 268px;
  width: auto;
  object-fit: cover;
}

/* =========================================================
   PRINTER SERVICE & TABLES (オリジナルデザイン・カラー完全復元版)
========================================================= */

/* 📊 1. 利用料金表・減免表専用のオリジナルデザイン（キャプチャ画像の見た目を完全復元） */
.price-table,
.rule-table {
  width: 100%;
  margin: 15px 0;
  table-layout: fixed;              /* 縦列の幅を綺麗に固定 */
  border-collapse: separate;
  background-color: #D7F1F8;
}

/* 💡 画像に写っている「あの深みのある青緑色」の見出しカラーを完全に復元 */
.price-table th,
.rule-table th {
  background: #AACED7 !important;   
  color: #000000 !important;        
  font-weight: bold;
  border: 1px solid #ffffff;
  padding: 12px 10px;
  vertical-align: middle;
  text-align: center;
}

/* 💡 画像に写っている「あのすっきりとした薄グレー（ほぼ白）」のデータ背景を完全に復元 */
.price-table td,
.price-table th[scope="row"],
.rule-table td,
.rule-table th[scope="row"] {
  background-color: #D7F1F8 !important; /* 🎨 キャプチャ画像の薄いグレー／白に近い背景色 */
  color: #333333 !important;        /* 文字は濃いグレー */
  border: 1px solid #ffffff;        /* 白い綺麗な境界線 */
  padding: 12px 10px;
  vertical-align: middle;
  text-align: center;
  font-weight: normal;              /* データの文字は細身に */
}

/* 💡 2. 印刷サービスの表専用の設定（セルの結合崩れと巨大化を完全に防ぐ） */
.printerService table {
  width: 65% !important;             /* 巨大化をストップさせ、右側に綺麗に収める */
  margin: 0 !important;
  table-layout: auto !important;     /* 文字の長さに合わせてセルの幅を自動計算 */
  border-collapse: separate;
  background-color: #D7F1F8;
  box-sizing: border-box;
}

/* 印刷機テーブルのタイトル（caption） */
.price-table caption,
.rule-table caption,
.printerService table caption {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
}

/* 印刷機テーブルの中身（ここは元の明るい水色と薄青のままで綺麗に保持します） */
.printerService th,
.printerService td {
  border: 1px solid #ffffff;
  padding: 6px 8px !important;
  vertical-align: middle;
  text-align: center;
  font-size: 14px !important;
}

.printerService th {
  background-color: #AACED7 !important; /* 元の明るい水色 */
  font-weight: bold;
  color: #333333 !important;
}

.printerService td {
  background-color: #D7F1F8 !important; /* 元の薄い青 */
  color: #333333 !important;
}

.printerService td.text-direction,
.printerService th.text-direction {
  font-weight: bold;
  white-space: nowrap;
}

/* =========================================================
   各テーブルの「縦列の幅（パーセント）」をオリジナル通りに完全固定
========================================================= */

/* 💡 利用料金表の縦列（幅のパーセント） */
.price-table tr th:nth-child(1),
.price-table tr th[scope="row"] { width: 25% !important; text-align: center; }
.price-table tr td:nth-child(2) { width: 15% !important; text-align: center; }
.price-table tr td:nth-child(3) { width: 30% !important; text-align: center; }
.price-table tr td:nth-child(4) { width: 30% !important; text-align: center; }

/* 💡 減免について表の縦列（幅のパーセント） */
.rule-table tr th:first-child,
.rule-table tr th[scope="row"] { width: 12% !important; text-align: center !important; white-space: nowrap; }

/* 2列目（条件）：見出しはHTML側で中央固定、中身の文章（td）だけを「左揃え」に上書き */
.rule-table tr td:nth-child(2) { width: 68% !important; text-align: left !important; }

.rule-table tr th:last-child,
.rule-table tr td:last-child { width: 20% !important; text-align: center; white-space: nowrap; }