@charset "utf-8";
/* ================================================================
 *  akitsubg/css/facility-page.css
 * ----------------------------------------------------------------
 *  この施設だけの差分。共通の facility-common.css の「後ろ」で読みます。
 *  値を変えたいときはこのファイルだけを触ってください。
 *  （4項目・ロゴは横長）
 * ================================================================ */

:root {
  --fh-accent: #4394b4;
  /* ハンバーガーボタン・円形背景の色 */
  --fh-logo-max: 34px;
  /* 880px超でのロゴ最大高さ */

  --fw-reserve-icon: url("/akitsubg/img/reservebtn01.png");
  --fw-reserve-icon-hover: url("/akitsubg/img/reservebtn02.png");
  /* 予約セクションのボタン画像 */
}

/* フッターロゴ：横長ロゴのため黒瀬屋内プールより少し大きく表示
   （黒瀬：PC 20% / スマホ 55%） */
.footerLogo img {
  max-width: 30%;
}

@media screen and (max-width: 550px) {
  .footerLogo img {
    max-width: 75%;
  }
}

/* パンフレットボタン：施設名が長いため枠を少し広げる（共通は min-width: 270px） */
.btntextchange {
  min-width: 330px;
}

@media screen and (max-width: 550px) {
  .btntextchange {
    min-width: 0;
  }
}

/* ================================================================
 *  サイトカラー（安芸津B&G：緑系）
 *  黒瀬屋内プール（青系）と同じ部品の色だけを、ここで上書きしています。
 *  色を変えたいときは下の --ak-* の6色を変えるだけで全体に反映されます。
 * ================================================================ */
:root {
  --ak-light:  #dcf2e3;  /* 淡い緑：アコーディオン・タブ・フォームボタンの地色（黒瀬 rgb(219,234,254)） */
  --ak-pale:   #e6f6eb;  /* さらに淡い緑：利用案内の背景（黒瀬 #daeaff） */
  --ak-line:   #b5e0c3;  /* お知らせ左の帯（黒瀬 #bdd4e8） */
  --ak-soft:   #8fd1a6;  /* 必須バッジ・フォームボタンのホバー（黒瀬 #9ccff3） */
  --ak-main:   #2f8f55;  /* ボタン・見出し帯（黒瀬 #5b83e7 / #4b88eb） */
  --ak-deep:   #23774a;  /* 文字色・ホバー（黒瀬 #1f60e2 / #3d61da） */

  --main: var(--ak-light);
  --sub: var(--ak-main);
  --accordion-q-bg: var(--ak-light);
  --fw-linkbtn-bg: var(--ak-main);
  --fh-accent: #3a9a6a;  /* ハンバーガーボタン・円形背景（上の設定を上書き） */
}

.circle-bg,
.openbtn { background: var(--fh-accent); }

#headerNavPC li a:hover { color: var(--ak-deep); }

.linkButton { background-color: var(--ak-main); }

.news li { border-left-color: var(--ak-line); }

.infoArea { background: var(--ak-pale); }

.accordionTax-q button,
.accordion-q button { background-color: var(--ak-light); }

.taxTableTh { background-color: var(--ak-main); }
.subText { color: var(--ak-deep); }
.mtgroom2 { background-color: var(--ak-deep); }
.pushdown:hover span { background-color: var(--ak-deep); }

.require,
.FormBtn:hover { background: var(--ak-soft); }

/* ================================================================
 *  基本情報エリアのタブ（使用料 / ○月の予定表）とアコーディオン
 *  ・タブ名が1470px前後の画面でも1行に収まるよう、幅と文字サイズを調整
 *  ・使用料アコーディオンの文字を少し小さく（20px → 17px）
 *  ※880px以下（スマホ・タブレット）は従来どおり
 * ================================================================ */
@media print, (min-width: 880.02px) {
  #basicinfo .tab {
    gap: 4%;
  }

  #basicinfo .tab li {
    flex: 1 1 0;
    min-width: 0;
  }

  .tabBtn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: clamp(16px, 1.3vw, 22px);
    white-space: nowrap;
  }

  .tab li a img {
    width: 1.6em;
    height: auto;
  }

  .accordionTax-q-content {
    font-size: 17px;
  }
}

/* ================================================================
 *  予定表タブ：PDFをそのまま縦並びで表示（js/pdf-viewer.js）
 *  枠の大きさ・スクロールは画像のとき（.calendar）と同じです。
 * ================================================================ */
.pdfViewer canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  border: 1px solid #e3e3e3;
}

.pdfViewer canvas:last-child {
  margin-bottom: 0;
}

.pdfViewerLoading {
  padding: 40px 0;
  text-align: center;
  color: #888;
}