@charset "utf-8";
/* ================================================================
 *  event-section.css  ―  イベント欄の共通スタイル
 * ----------------------------------------------------------------
 *  イベント欄（inc/facility-events.php が出力する <section id="event">）
 *  の見た目を、施設ページ全体で揃えるためのファイルです。
 *  facility-common.css から切り出しました。
 *  akitsubg / akitsusgc は facility-common.css を読み込まないので、
 *  イベント欄に必要な分だけをここに分けています。
 * ================================================================ */
/* ============================================================
   イベント欄の「イベント一覧はこちら」ボタン
   ------------------------------------------------------------
   .linkButtonArea と .linkButton は kurosepool だけが持っていました。
   イベント欄を9施設共通の出力にしたことで、他8施設では
   ボタンが素のリンク（青文字のテキスト）のまま表示されてしまうため、
   kurosepool の指定をここに移して全施設に効かせます。

   色を施設ごとに変えたい場合は
   <施設>/css/facility-page.css で --fw-linkbtn-bg を上書きしてください。
   ============================================================ */

:root {
  --fw-linkbtn-bg: #5b83e7;
  /* ボタンの背景色 */
}

.linkButtonArea {
  text-align: center;
  margin: 50px 0 80px 0;
}

.linkButton {
  display: inline-block;
  background-color: var(--fw-linkbtn-bg);
  margin: 0 auto;
  min-width: 180px;
  line-height: 48px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  padding: 20px 50px;
}

.linkButton:hover {
  opacity: .7;
}

@media screen and (max-width: 880px) {
  .linkButton {
    font-size: 18px;
    padding: 14px 32px;
    line-height: 36px;
  }
}


/* ============================================================
   読み上げ用テキストを画面から隠す
   ------------------------------------------------------------
   .visually-hidden は kurosepool / kurosesgc / toyosakasgc の
   3施設しか持っていませんでした。

   イベント欄の見出しは9施設共通で
       <h2><span class="bgappearTrigger">event</span>
           <span class="visually-hidden">イベント情報｜◯◯</span></h2>
   を出力しています。この指定が無い6施設では、本来は読み上げ用・SEO用の
   「イベント情報｜◯◯」が **見出しの横にそのまま表示** されてしまいます。

   画面には出さず、スクリーンリーダーと検索エンジンには読ませるための指定です。
   （display:none にすると読み上げ対象からも外れるので使いません）
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}