@charset "UTF-8";

/* =========================================================
   OSHIRASE HEADER
========================================================= */

.oshirase-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: blue;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  border: 2px dotted #0000ff;
  width: 100%;
  box-sizing: border-box;
  
  /* ★追加：枠線ごと内側に寄せるための左右の余白（外側の隙間） */
  margin: 0 auto 15px;      /* 左右に余白を作り、下方向にも少し隙間を確保 */
  max-width: calc(100% - 30px); /* 左右15pxずつ、計30px縮めて画面端から離す */
}

.oshirase-header img {
  flex-shrink: 0;
  max-height: 40px;
  width: auto;
}

.oshirase-header .oshirase-title {
  font-size: 1.5rem;
}

.oshirase-header .oshirase-date {
  margin-left: auto;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: -2px;
}

.oshirase-header-sm {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: blue;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px dotted #0000ff;
  width: 100%;
  box-sizing: border-box;
  
  /* ★追加：小さいヘッダー用にも同様に左右の余白を設定 */
  margin: 0 auto 15px;
  max-width: calc(100% - 30px);
}

.oshirase-header-sm img {
  flex-shrink: 0;
  max-height: 28px;
  width: auto;
}

.oshirase-header-sm .oshirase-title {
  font-size: 1.15rem;
}

.oshirase-header-sm .oshirase-date {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.85rem;
  align-self: flex-end;
  margin-bottom: -2px;
}

/* ---------------------------------------------------------
   お知らせ本文・詳細エリアの余白調整（左余白をさらに拡大）
--------------------------------------------------------- */
.oshirase-header ~ p,
.oshirase-header ~ .flex-tayori {
  padding-left: 30px;  /* ★ 15px から 30px に広げて左端の詰まり感を解消 */
  padding-right: 15px; /* 右側は15pxのままバランスをキープ */
  box-sizing: border-box;
}

/* =========================================================
   OSHIRASE MAIN TITLE（更新情報タイトルのデザイン：角丸なし版）
========================================================= */
.oshirase-main-title {
  /* ① トップページの共通デザイン（.content-title）を完全再現 */
  border-left: 8px solid #00a1e9; /* 左側の青い縦線 */
  margin: 8px 0 8px 0;        /* 外側の余白 */
  padding: 4px 16px;           /* 囲みの中の上下・左右の余白 */
  
  /* ② フォント設定をトップページのh2と完全に一致させる設定 */
  font-size: 1.5rem;            /* ブラウザ標準のh2と同じ大きさに固定 */
  font-weight: bold;            /* 太字 */
  color: #333333;               /* 文字の色 */

  /* ③ 背景白デザイン（★角丸を削除して直線的なデザインにしました） */
  background-color: #ffffff;    /* 背景を白にする */
  display: block;               /* 背景を横いっぱいに広げる */

  /* ④ 先頭に戻ったときに、文字の上が画面の端にピタッと綺麗に収まる隙間 */
  scroll-margin-top: 15px;      
}

/* ★「先頭に戻る」リンクをすべて右揃え・矢印付きにする */
.return-link {
  display: flex;            /* 矢印と文字を綺麗に並べる */
  justify-content: flex-end; /* ★ここを修正：確実に右揃えにする */
  align-items: center;      /* 矢印と文字の上下中央を揃える */
  gap: 4px;                 /* 矢印と文字の間の隙間 */
  margin-top: 20px;         /* 上の要素との隙間 */
  
  /* 横並び（flex）の計算から外して、100%幅で一番下の右端に配置する設定 */
  flex: 0 0 100%;           
  width: 100%;              
  
  color: #0056b3;           /* リンクの色 */
  font-size: 14px;          /* 文字サイズ */
  text-decoration: none;    /* 下線を消す */
}

/* マウスを乗せたときの動き */
.return-link:hover {
  color: #003d82;
  text-decoration: underline;
}

/* 矢印（▲）アイコンの追加 */
.return-link::before {
  content: "▲";
  font-size: 10px;
}

/* =========================================================
   OSHIRASE INDEX (お知らせインデックス・点線なし版)
========================================================= */

/* インデックス全体の左右の余白（event-koza-indexと統一） */
.oshirase-index {
  padding-left: 30px;          /* 画面左端からの隙間 */
  padding-right: 15px;         /* 右側も同様にバランスをとる */
  box-sizing: border-box;      /* 余白を含めた横幅の計算を安定させる */
  margin-bottom:30px;         /* 下のコンテンツとの隙間 */
}

/* 2列レイアウト */
.oshirase-index dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 30px;
  margin: 0;
  padding: 0;
  align-items: start; 
}

/* dt（PC用：上下の余白を4pxにギュッと詰めます） */
.oshirase-index dt {
  margin: 0;
  padding: 4px 0;    /* ★ 10pxから4pxに狭くします */
  font-weight: bold;
}

/* dd（PC用：上下の余白を4pxにギュッと詰めます） */
.oshirase-index dd {
  margin: 0;
  padding: 4px 0;    /* ★ 10pxから4pxに狭くします */
}

/* リンク自体の行間も詰める */
.oshirase-index dd a {
  display: block;
  line-height: 1.4;  /* ★ 文字の上下の余白をさらに引き締めます */
}

html {
  scroll-behavior: smooth; /* ページ内スクロールを滑らかにする（超重要） */
}

/* =========================================================
   TAYORI PAGE
========================================================= */

.tayori-content {
  width: 100%;
}

.tayori-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.flex-tayori .item-text {
  text-align: center;
  width: 100%;
  display: block;
}

.flex-tayori {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-tayori > .item {
  width: calc((100% - 28px) / 2);
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* oshirase だけに効かせる */
.oshirase-page .flex-tayori > .item a {
  line-height: 0;
}

/* oshirase だけに効かせる */
.oshirase-page .flex-tayori > .item a {
  line-height: 0;
}

.oshirase-page .flex-tayori > .item img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* =========================================================
   FACILITIES PAGE
========================================================= */

.sliderWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  margin-top: 10px;
}

.sliderWrap .button-link {
  width: calc((100% - 30px) / 3);
  box-sizing: border-box;
  height: 256px;
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border: 1px solid #808080;
  z-index: 0;
  color: #ffffff;
  text-decoration: none;
}

.sliderWrap .button-link img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: -1;
  object-fit: initial;
  transition: transform 0.3s ease;
}

.sliderWrap .button-link:hover img,
.sliderWrap .button-link:focus img {
  transform: scale(0.96);
}

.sliderWrap .button-link h3 {
  background-color: #000000;
  bottom: -1px;
  display: block;
  left: 0;
  margin: 0;
  opacity: 0.75;
  padding: 12px 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2;
  color: #ffffff;
}

.sliderWrap .button-link h3,
.sliderWrap .button-link h3 span,
.sliderWrap .button-link h3 p {
  color: #ffffff !important;
}

.sliderWrap .button-link:hover,
.sliderWrap .button-link:focus {
  box-shadow: 0 0 0 3px #00a1e9 inset;
  border-color: transparent;
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {
  .sliderWrap .button-link {
    width: calc((100% - 10px) / 2);
  }

  .flex-tayori {
    display: block;
  }

  .flex-tayori > .item {
    width: 100%;
  }
}