@charset "utf-8";
/* ================================================================
 *  facility-common.css   ―  施設サイト9ページ共通
 * ----------------------------------------------------------------
 *  1. ハンバーガーメニューの切替を 880px に統一する
 *       880.02px 以上 … PCメニュー（#headerNavPC）を表示
 *       880px 以下 … ハンバーガー（.openbtn / #g-nav）を表示
 *  2. 880.02px〜1220px でロゴとメニュー文字が重ならないようにする
 *  3. 本文（main）の幅を 80vw に統一する
 *  4. ヘッダー（ロゴ・並び方）の見え方を kurosepool に統一する
 *
 *  ※ イベント欄まわり（.linkButton / .visually-hidden）は
 *    css/common-facility/event-section.css に分けました。
 *    akitsubg / akitsusgc でも使うためです。
 *
 *  既存CSSは書き換えず、このファイルを bundle.css の「後ろ」で
 *  読み込んで上書きする方式です。
 *  施設ごとの違い（色・ロゴサイズ）は下の変数を
 *  <施設>/css/facility-page.css で上書きしてください。
 * ================================================================ */

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


/* ============================================================
   880.02px 以上 … PCメニューを出し、ハンバーガーを完全に隠す
   （kurose-c-ground / kurose-m-ground は元が1220px切替だったため、
     この指定で 880〜1220px がPCメニュー表示に戻ります）
   ============================================================ */
@media screen and (min-width: 880.02px) {

  #headerNavPC {
    display: block;
  }

  .openbtn {
    display: none !important;
  }

  #g-nav {
    display: none !important;
  }

  .circle-bg {
    display: none !important;
  }
}


/* ============================================================
   881px 〜 1220px … ロゴとメニュー文字の干渉対策
   ------------------------------------------------------------
   ・ロゴは width:150% をやめ、高さ基準で可変にする
   ・メニューは縮まない（flex:0 0 auto）、ロゴ側が先に縮む
   　ので、狭くなっても文字が重なりません
   ============================================================ */
@media screen and (min-width: 880.02px) and (max-width: 1220px) {

  #header {
    width: 92%;
    padding: 0 24px;
    gap: 16px;
  }

  /* ロゴ側：足りなくなったらこちらが縮む */
  #header h1 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
  }

  #header h1 img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(24px, 3.2vw, var(--fh-logo-max));
  }

  /* メニュー側：縮まず、折り返さない */
  #headerNavPC {
    flex: 0 0 auto;
  }

  #headerNavPC ul {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  #headerNavPC ul li {
    font-size: clamp(12px, 1.15vw, 16px);
    letter-spacing: 0;
    padding-bottom: 0;
  }

  #headerNavPC ul li a {
    padding: 0 clamp(6px, 1.4vw, 20px);
    white-space: nowrap;
  }

  .headerNavList {
    font-size: 70%;
  }
}


/* ============================================================
   880px 以下 … ハンバーガーメニュー
   ------------------------------------------------------------
   元は 768px（kurose-c/m-ground のみ 1220px）で切り替えていた
   指定を、880px の範囲に引き直したものです。
   値は元CSSと同じで、色だけ変数化しています。
   ============================================================ */
@media screen and (max-width: 880px) {

  #headerNavPC {
    display: none;
  }

  /* ボタン外側 */
  .openbtn {
    display: block;
    position: fixed;
    top: 32px;
    right: 30px;
    z-index: 999;
    cursor: pointer;
    width: 70px;
    height: 70px;
    background: var(--fh-accent);
    border-radius: 50%;
  }

  .openbtn span:nth-of-type(3)::after {
    content: "Menu";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.2em;
    text-transform: uppercase;
  }

  .openbtn.active span:nth-of-type(3)::after {
    content: "Close";
  }

  /* ナビ本体 */
  #g-nav {
    display: none;
  }

  #g-nav.panelactive {
    display: block;
    position: fixed;
    z-index: 99;
    top: 0;
    width: 100%;
    height: 100vh;
  }

  #g-nav ul li a::after {
    content: "";
    padding: 0;
  }

  #g-nav ul li a:hover {
    color: #fff;
  }

  #g-nav ul {
    opacity: 0;
    width: 90%;
    margin: 0 auto 60px auto;
  }

  #g-nav ul ul {
    margin: 0;
  }

  #g-nav.panelactive ul {
    opacity: 1;
  }

  /* 円形背景の拡大 */
  .circle-bg {
    position: fixed;
    z-index: 5;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--fh-accent);
    transform: scale(0);
    right: 30px;
    top: 30px;
    transition: all .6s;
  }

  .circle-bg.circleactive {
    transform: scale(50);
  }

  /* ナビの縦スクロール */
  #g-nav-list {
    opacity: 0;
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100vh;
    margin-top: 200px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #g-nav.panelactive #g-nav-list {
    opacity: 1;
  }
}


/* ============================================================
   本文（main）の幅の統一
   ------------------------------------------------------------
   これまで
     #basicinfo     … 70%（親要素が基準）→ 768px:80% → 550px:100%
     #NewsContainer … 75vw（画面幅が基準）→ 768px:80vw → 550px:95vw
   と「基準そのもの」が違っていたため、左右のラインが揃っていませんでした。
   両方を 80vw に統一します。

   幅を変えたいときは、下の変数だけを直してください。
   他のセクション（#event / #faq / #contact / .tabArea など）にも
   同じ幅を持たせたい場合は、セレクタをこの2つの後ろに足すだけです。
   ============================================================ */

:root {
  --fw-main: 80vw;
  /* 551px以上での本文幅 */
  --fw-main-sp: 95vw;
  /* 550px以下での本文幅。80vw のままにしたいときは 80vw に変更 */
}

#basicinfo,
#NewsContainer {
  width: var(--fw-main);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 550px) {

  #basicinfo,
  #NewsContainer {
    width: var(--fw-main-sp);
  }
}


/* ============================================================
   ヘッダーの見え方の統一（kurosepool を基準）
   ------------------------------------------------------------
   これまで施設ごとに次の差がありました。

     #header の display   … 1220px以下で block になる施設が3つ
                            （kurosebg / kurosebg-base / kurosepool）
                            base は flex なので、この3施設だけ
                            ロゴとメニューが横並びにならず縦積みになります。
     #header h1 img の幅  … 150%（7施設）と 100%（2施設）
     同上（1220px以下）   … 70%（7施設）と 30%（2施設）

   このファイルは bundle.css の後ろで読むため、ここでの指定が勝ちます。
   9施設すべて kurosepool と同じ見え方に揃えます。
   ============================================================ */

#header {
  display: flex;
  align-items: center;
}

#header h1 {
  display: flex;
  align-items: center;
  margin: 0;
}

#header h1 img {
  width: 100%;
  height: auto;
}