/* =========================================================
   そなえ館ページ専用 CSS  (css/sonaekan.css)
   ※ guide.css / facility.css の作法に合わせています
   ========================================================= */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== VARIABLES ===== */
:root {
  --green:       #4a8a3c;
  --green-mid:   #5a9a6a;
  --green-dark:  #467846;
  --green-line:  #558c4b;
  --teal:        #3a8888;
  --orange:      #e89a4a;
  --orange-deep: #de8a33;
  --orange-pale: #fbe7d2;
  --cream:       #fdf5ec;
  --purple:      #7864b4;
  --beige:       #aa9682;
  --gray-100:    #f7f7f7;
  --gray-200:    #e0e0e0;
  --gray-300:    #d6d6d6;
  --gray-400:    #aaa;
  --gray-600:    #777;
  --gray-700:    #555;
  --text:        #222;
  --font:        'Noto Sans JP', sans-serif;
  --radius:      6px;
  --max-w:       1060px;
}

/* スムーズスクロール & 固定ヘッダー分のオフセット */
html { scroll-behavior: smooth; }
#facility,
#activity,
#flow {
  scroll-margin-top: 100px;
}

/* ===== BASE ===== */
body {
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  background: #fff4e3;
}
.pc-only { display: inline; }
.sp-only { display: none; }

/* =========================================================
   HERO（写真 + ロゴ + パンくず）
   ========================================================= */
.sona-hero {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  background: #2a2a2a;
}
.sona-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sona-hero::after {
  /* 文字を読みやすくする薄い暗幕 */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}
.sona-hero__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sona-hero__logo img {
  width: 100%;
  max-width: 430px;
  height: auto;
}

/* ヒーロー上に重ねるパンくず */
.breadcrumb--hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 12px 20px;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.breadcrumb--hero a { color: #fff; text-decoration: none; }
.breadcrumb--hero a:hover { text-decoration: underline; }
.breadcrumb--hero span { margin: 0 4px; }
.sonaekan{
  max-width: 1080px;
      margin: auto;
}
/* =========================================================
   イントロ（緑ラベル + ロゴ + 説明文）
   ========================================================= */
.sona-intro {
  margin: 0 auto;
  padding: 48px 20px 16px;
  text-align: center;
}
.sona-intro__label {
  display: inline-block;
  background: linear-gradient(90deg, #be5028 0%, #e08a35 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 18px;
  margin-bottom: 33px;
}
.sona-intro__logo {
  margin-bottom: 25px;
}
.sona-intro__logo img {
  width: 300px;
  max-width: 70%;
  height: auto;
}
.sona-intro__text {
  text-align: center;
  max-width: 673px;
  margin: auto;
}

/* =========================================================
   TAB NAV（3カラム）
   ========================================================= */
.tab-nav {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin: 28px 0 56px;
}
.tab-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tab-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-right: 1px solid var(--gray-200);
  text-align: center;
  cursor: pointer;
  transition: background .15s;
}
.tab-nav__item:first-child { border-left: 1px solid var(--gray-200); }
.tab-nav__item:hover,
.tab-nav__item.is-active { opacity: 0.7;}
.tab-nav__arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transform-origin: center;
  margin-top: -4px;
}

/* =========================================================
   共通：コンテナ / セクション見出し
   ========================================================= */
.sona-container {
  max-width: var(--max-w);
  margin: 0 40px;
}
.sona-section { margin-bottom: 130px; }

.sona-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.sona-section__en {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #d06431;
  line-height: 1;
}
.sona-section__title {
  display: inline-block;
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--green);
}
.sona-section__title--plain {
  border-bottom: none;
}
.sona-section__note {
  display: block;
  font-size: 17px;
}

/* =========================================================
   施設紹介（部屋カード 2カラム）
   ========================================================= */
.sona-room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px 56px;
}
.sona-room {
  display: flex;
  flex-direction: column;
}
.sona-room__head {
  background: #fff;
  padding: 10px 16px;
  margin-bottom: 0;
}
.sona-room__name {
  font-size: 20px;
  font-weight: 700;
  color: #d06431;
}

.sona-room__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}
.sona-room__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sona-room__desc {
}
.sona-room__time-label {
  font-weight: 700;
  color: var(--text);
}

/* 施設紹介セクション右下の背景イラスト */
#facility {
  position: relative;
}
#facility::after {
  content: '';
  position: absolute;
  right: -211px;
  bottom: -101px;
  width: 328px;
  height: 191px;
  max-width: 48%;
  background: url('../img/sonaekan/shisetsuback.png') no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
}

/* =========================================================
   団体向けプログラム
   ========================================================= */

/* --- 館内見学（オレンジ帯：全幅） --- */
.sona-tour {
  position: relative;
  background: #f8cca4;
  padding: 60px 20px 64px;
  margin-bottom: 0;
}
.sona-tour__head {
  text-align: center;
  margin-bottom: 32px;
}
.sona-tour__title {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 12px;
  border-bottom: 2px solid #fff;
}
.sona-tour__lead {

}
.sona-tour__card {
  max-width: 695px;
  margin: 0 auto;
  background: #fff;
  padding: 25px 35px 25px 87px;
}
.sona-tour__card-title {
  font-size: 22px;
  font-weight: 700;
  color: #d06431;
  text-align: left;
  margin-bottom: 20px;
}
.sona-tour__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
}

/* --- 体験プログラム（グレー帯・全幅） --- */
.taiken {
  position: relative;
  z-index: 0;
  background: #f0f0f0;
  padding: 64px 0 72px;
}
/* オレンジ帯からグレー帯へまたがる背景イラスト */
.taiken::before {
  content: '';
  position: absolute;
  left: 0;
  top: -40px;           /* カード下端より下に表示（-40pxでカードの下に出る） */
  width: 420px;
  height: 320px;
  max-width: 48%;
  background: url('../img/sonaekan/shisetsuback.png') no-repeat left top;
  background-size: contain;
  pointer-events: none;
  z-index: -1;          /* グレー背景より上・コンテンツより下 */
}
.sona-prog {
  /* sona-container 内に置く */
}
.sona-prog__sub {
  text-align: center;
  margin-bottom: 36px;
}
.sona-prog__sub-title {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  border-bottom: 3px solid var(--orange);
  margin-bottom: 12px;
}
.sona-prog__lead {
  display: block;
}
.sona-course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 17px;
}
.sona-course {
  background: #fff;
  padding: 22px 45px 24px;
}
.sona-course__title {
  font-size: 18px;
  font-weight: 700;
  color: #d06431;
  margin-bottom: 16px;
}
.sona-course__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

/* 定義リスト共通（館内見学カード＆コースカード） */
.sona-def__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.sona-def__label::before {
  content: '-';
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.sona-def__value {
    padding-left: 1em;
}

/* 注釈 */
.sona-prog__notes {
  margin-top: 1em;
  font-size: 13px;
}
.sona-prog__notes p { margin: 0; }
.sona-prog__note-em {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
}
/* =========================================================
   学校向け出前授業（demae・黄色帯・全幅）
   ========================================================= */
.demae {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #f7df72;        /* 黄色背景 */
  padding: 60px 20px 64px;
}
/* 右下の背景イラスト */
.demae::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: 0;
  width: 360px;
  height: 300px;
  max-width: 42%;
  background: url('../img/sonaekan/shisetsuback.png') no-repeat right bottom;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;               /* 黄色背景より上・コンテンツより下 */
}
/* カード内：左右独立の2カラム */
.demae-cols {
  display: flex;
  gap: 36px;
}
.demae-col {
  flex: 1;
}
.demae-col .sona-def {
  margin-bottom: 22px;
}
.demae-col .sona-def:last-child {
  margin-bottom: 0;
}

/* 注釈 */
.sona-prog__notes {

}
.sona-prog__notes p { margin: 0; }
.sona-prog__note-em {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
}

/* =========================================================
   施設空満状況（プラグイン枠）
   ========================================================= */
.sona-plugin {
  max-width: var(--max-w);
  margin: 90px auto 90px;
}
.sona-plugin__box {
  /* イベント一覧をそのまま表示（仮置きのグレー背景・中央寄せは解除） */
  width: 100%;
}

.kuiman_txt {
    margin: 0 10% 10% 10%;
}
.kuiman_txt ul{
  margin: 4% 0 4% 0;
}
/* ===== イベントカレンダー（[events-calendar-templates] 出力）の調整 ===== */
/* 日付ブロックの背景画像・背景色・枠線をすべて消す */
.kuushitsu .ect-list-img,
.kuushitsu .ect-list-img-link:hover .ect-list-img,
.kuushitsu .ect-list-post:hover .ect-list-img {
  background-image: none !important;
  background-color: transparent !important;
}
/* 日付まわりの枠線・角丸・影をすべて除去（複数要素に保険を掛ける） */
.kuushitsu .ect-list-date,
.kuushitsu .ect-list-img,
.kuushitsu .ect-list-img-link,
.kuushitsu .ect-list-date .ect-date-area,
.kuushitsu .ect-date-area {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* カード（.ect-list-post）の角丸だけ消す（枠線は残す） */
.kuushitsu .ect-list-post {
  border-radius: 0 !important;
}
/* =========================================================
   ホバー対策（クリーン版・最小限）
   ・日付列を固定幅にして width アニメで縮まないように
   ・幅アニメ／移動を停止
   ・日付文字は常に黒・表示・折り返さない
   ※疑似要素の無効化など副作用の出ていた指定は削除しました。
   ※「中身が空になる」根本原因は JS 側で対応します（本文参照）。
   ========================================================= */
.kuushitsu {
  --sona-date-w: 240px; /* 日付列の固定幅。お好みで調整 */
}

/* 左カラム：固定幅で潰れない・幅アニメ停止 */
.kuushitsu .ect-list-post-left {
  flex: 0 0 var(--sona-date-w) !important;
  width: var(--sona-date-w) !important;
  max-width: var(--sona-date-w) !important;
  min-width: var(--sona-date-w) !important;
  transition: none !important;
}

/* 日付バッジ・画像枠：固定幅いっぱい・アニメ／移動を停止 */
.kuushitsu .ect-list-img,
.kuushitsu .ect-list-img-link,
.kuushitsu .ect-list-date {
  width: 100% !important;
  transition: none !important;
  transform: none !important;
}

/* 日付テキスト：常に黒・表示・折り返さない（ホバー時も） */
.kuushitsu .ect-date-area,
.kuushitsu .ect-date-area span,
.kuushitsu .ect-date-area .ev-line,
.kuushitsu *:hover .ect-date-area,
.kuushitsu *:hover .ect-date-area span,
.kuushitsu *:hover .ect-date-area .ev-line {
  color: #222 !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

/* ★本命★ ホバーで親要素が opacity:0 にフェードして日付ごと消えるのを防ぐ。
   opacity は子で打ち消せないため、親チェーン全体を opacity:1 で固定する。 */
.kuushitsu .ect-list-post-left,
.kuushitsu .ect-list-img-link,
.kuushitsu .ect-list-img,
.kuushitsu .ect-list-date,
.kuushitsu .ect-list-post:hover .ect-list-post-left,
.kuushitsu .ect-list-post:hover .ect-list-img-link,
.kuushitsu .ect-list-post:hover .ect-list-img,
.kuushitsu .ect-list-post:hover .ect-list-date,
.kuushitsu *:hover .ect-list-post-left,
.kuushitsu *:hover .ect-list-img-link,
.kuushitsu *:hover .ect-list-img,
.kuushitsu *:hover .ect-list-date {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}
.kuushitsu .ect-date-area .ev-line {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ★クリップ対策★ 狭い枠＋はみ出しの切り取りで日付が見えなくなるのを防ぐ。
   ・各層を overflow:visible にして、はみ出しても切らない
   ・プラグインの width:calc(100%-50px) / min-height を打ち消して枠を十分な幅に */
.kuushitsu .ect-list-post-left,
.kuushitsu .ect-list-img-link,
.kuushitsu .ect-list-img,
.kuushitsu .ect-list-date,
.kuushitsu .ect-date-area {
  overflow: visible !important;
}
.kuushitsu .ect-list-date .ect-date-area,
.kuushitsu .ect-date-area {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 4px !important;
}

/* ★★真因★★ ホバー時にプラグインが .ect-date-area を display:none にして
   日付を消している（コンソール計測で確定）。display を上書きして常に表示。
   プラグインの hover ルールに勝てるよう高詳細度でも指定する。 */
.kuushitsu .ect-date-area,
.kuushitsu .ect-date-area.default-schedule,
.kuushitsu *:hover .ect-date-area,
.kuushitsu *:hover .ect-date-area.default-schedule,
.kuushitsu .ect-list-post:hover .ect-list-post-left .ect-list-date .ect-date-area,
.kuushitsu .ect-list-post:hover .ect-list-post-left .ect-list-date .ect-date-area.default-schedule {
  display: flex !important;
}
.kuushitsu .ect-date-area .ev-line,
.kuushitsu *:hover .ect-date-area .ev-line {
  display: block !important;
}
/* =========================================================
   予約の流れ（全幅・クリーム背景）
   ========================================================= */
.sona-flow {
  position: relative;
  z-index: 0;
  background: #fff4e3;
  padding: 90px 20px 72px;
  margin-bottom: 0;
}
/* 上部中央の背景イラスト（薄く） */
.sona-flow::before {
  content: '';
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  max-width: 90%;
  height: 250px;
  background: url(../img/sonaekan/shisetsuback.png) no-repeat center top;
  background-size: 100% auto;
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}
.sona-flow__inner {
  max-width: 880px;
  margin: 0 auto;
}
.sona-flow__step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 4px;
}
.sona-flow__label {
  flex-shrink: 0;
  width: auto;
  font-size: 22px;
  font-weight: 700;
  border-bottom: 3px solid var(--orange);
  }
.sona-flow__num {
  color: var(--text);
  margin-right: 4px;
}
.sona-flow__body {
  flex: 1;
  padding-top: 4px;
}
.sona-flow__downloads {
  list-style: none;
  margin: 24px 0 4px;
  background: #ececec;
  padding: 20px 28px;
}
.sona-flow__downloads li {
  font-size: 13px;
  line-height: 1.7;
  padding: 8px 0;
  padding-left: 1.2em;
  text-indent: -1.2em;
  color: var(--text);
}
.sona-flow__downloads li::before {
  content: '- ';
  font-weight: 700;
}
.sona-flow__downloads a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sona-flow__downloads a:hover { opacity: .7; }

/* ステップ間の下向き矢印（三角を2段） */
.sona-flow__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 22px 0 6px;
}
.sona-flow__arrow span {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 18px solid #e89a4a96;
}

/* ステップ3：予約完了 */
.sona-flow__done {
  text-align: center;
  padding-top: 14px;
}
.sona-flow__done-label {
  font-size: 26px;
  font-weight: 700;
}
.sona-flow__done-label .sona-flow__num { color: var(--text); }
.sona-flow__done-illust {
  margin-top: 18px;
}
.sona-flow__done-illust img {
  width: 300px;
  max-width: 60%;
  height: auto;
}


/* =========================================================
   お申し込み連絡先
   ========================================================= */
.info_sonota{
  margin: 0 10% 0 auto;
  width: 705px;
}
.sona-contact {
  max-width: var(--max-w);
  margin: 80px auto 100px;
  padding: 0 20px;
}
.sona-contact__head {
  background: linear-gradient(90deg, #be5028 0%, #e08a35 60%, rgba(224, 138, 53, 0) 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 14px 24px;
  letter-spacing: 0.04em;
}
.sona-contact__logo {
  text-align: center;
  margin: 50px 0 35px;
}
.sona-contact__logo img {
  width: 300px;
  max-width: 70%;
  height: auto;
}
.sona-contact__cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 35px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
/* 左：TEL / FAX */
.sona-contact__tel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: -4px;
}
.sona-contact__tel-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.sona-contact__tel-num {
  font-size: 33px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}
a.sona-contact__tel-num:hover { text-decoration: underline; }
/* 右：開館時間 / 休館日 */
.sona-contact__hours-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 17px;
}
.sona-contact__hours dt {
  width: 70px;
  flex-shrink: 0;
  font-weight: 700;
}
.sona-contact__hours dd {
  line-height: 1.7;
}
.sona-flow__body a strong{
  text-decoration: underline;
}

/* =========================================================
   レスポンシブ（SP）
   ========================================================= */
/* 連絡先ブロック(705px)が収まらない幅では流動幅にして横はみ出しを防ぐ */
@media (max-width: 840px) {
  .info_sonota {
    width: auto;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }

  #facility, #activity, #flow { 
    scroll-margin-top: 60px; 
  }

  /* HERO */
  .sona-hero { height: 240px; }
  .sona-hero__logo img { max-width: 260px; }
  .breadcrumb--hero { padding: 8px 14px; font-size: 11px; }

  /* イントロ */
  .sona-intro { padding: 32px 16px 8px; }
  .sona-intro__label { 
    display: inline;                       /* 箱(inline-block) → インライン */
    -webkit-box-decoration-break: clone;   /* 行ごとに背景・余白を複製 */
    box-decoration-break: clone;
    padding: 2px 14px; 
    line-height: 2.1;               /* 2つの帯の隙間を作る */
    font-size: 18px;                   
    }
  .sona-intro__logo { margin-top: 22px; }  /* インライン化でmargin-bottomが効かない分を補填 */
  .sona-intro__logo img { 
   max-width: 60%;
    }
  .sona-intro__text { font-size: 14px; line-height: 1.85; text-align: left; }

  /* タブナビ（2列×2行） */
  .tab-nav { margin: 28px 0 66px; }
  .tab-nav__inner { grid-template-columns: repeat(2, 1fr); }
  .tab-nav__item {
    font-size: 13px;
    padding: 14px 8px;
    line-height: 1.4;
    border: 1px solid var(--gray-200);
    min-height: 52px;
  }
  .tab-nav__arrow { 
    width: 7px; 
    height: 7px; 
    border-right-width: 1.5px; 
    border-bottom-width: 1.5px; 
    margin-top: -3px; }

  /* セクション */
  .sona-container{
    padding: 0 16px 40px;
  }
  .sona-section { margin-bottom: 56px; }
  .sona-section__title { 

  }
  .sona-section__en { 
  font-size: 12px;
  letter-spacing: 0.1em;
   }
  .sona-section__head { margin-bottom: 24px; }

  /* 施設紹介：1カラム */
  .sona-room-grid { grid-template-columns: 1fr; gap: 58px; }
  .sona-room__name { 
  }
  #facility { overflow: hidden; }
  #facility::after { width: 200px; height: 170px; right: -20px; bottom: -8px; }

  /* 館内見学 */
  .sona-tour {
    padding: 40px 16px 64px;
  }
  .sona-tour__title { font-size: 29px; }
  .sona-tour__card { padding: 24px 29px 40px; }
  .sona-tour__rows { grid-template-columns: 1fr; gap: 14px; }

  /* 体験プログラム：1カラム */
  .taiken { padding: 44px 0 52px; }
  .taiken::before { width: 220px; height: 170px; top: -30px; }
  .sona-prog__sub-title { font-size: 29px; }
  .sona-course-grid { grid-template-columns: 1fr; gap: 20px; }
  .sona-course { padding: 25px 23px 30px; }
  .sona-course__title { font-size: 20px; }
  .sona-course__rows { gap: 14px 18px; }
  .sona-prog__notes { font-size: 12px; }
  .sona-container {
    margin: 0 auto;
  }


  /* 学校向け出前授業：1カラム */
  .demae { padding: 50px 16px 74px; }
  .demae::after { width: 200px; height: 165px; right: -20px; }
  .demae-cols { flex-direction: column; gap: 0; }
  .demae-col .sona-def { margin-bottom: 20px; }

  /* プラグイン枠 */
  .sona-plugin { margin-bottom: 116px; }

  /* 予約の流れ */
  .sona-flow { padding: 60px 16px 52px; }
  .sona-flow::before { 
    width: 92%; height: 160px; top: -20px; 
  }
  .sona-flow__step {
    flex-direction: column;
    gap: 14px;
    padding: 22px 2px;
  }
  .sona-flow__inner {
  text-align: center;
   padding-top: 30px;

  }
  .sona-flow__label { 
    width: fit-content;
    margin: 0 auto;
  }
  .sona-flow__body { padding-top: 0; }
  .sona-flow__downloads { padding: 16px 18px; }
  .sona-flow__downloads li { font-size: 12px; }
  .sona-flow__arrow span { border-left-width: 12px; border-right-width: 12px; border-top-width: 14px; }
  .sona-flow__done-label { 
  }
  .sona-flow__done-illust img { width: 230px; }

  /* 連絡先 */
  .sona-contact { margin: 66px auto 72px; }
  .sona-contact__head { 
    padding: 7px 18px; 
  }
  .sona-contact__logo { margin: 40px 0 30px; }
  .sona-contact__logo img { width: 260px; }
  .sona-contact__cols { flex-direction: column; align-items: flex-start; gap: 32px; padding-left: 6px; }
  .sona-contact__col {
    margin: auto;
  }
  .sona-contact__tel {
    margin-bottom: 4px; 
    line-height: 1.3;
}
  .sona-contact__tel-num { font-size: 28px; }
  .sona-contact__hours-row { font-size: 14px; }
  .sona-contact__hours dt { width: 64px; }
}

@media (max-width: 375px) {
  .tab-nav__item { font-size: 12px; padding: 12px 4px; }
  .sona-section__title { font-size: 20px; }
}

/* =========================================================
   施設空満状況（プラグイン枠）：スマホ時の余白調整
   ・日付ボックスが高さを持って上下に空白を作るのを解消
   ・日付／本文の間隔を詰める
   ※数値はお好みで調整してください
   ========================================================= */
@media (max-width: 768px) {
  /* 日付列：スマホでは横幅いっぱい・固定高さを解除して余白をなくす */
  .kuushitsu .ect-list-post-left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-bottom: 6px !important;   /* 日付と本文の間隔 */
  }

  /* 画像枠・日付バッジ：高さを内容に合わせて空白をなくす
     （height:auto だけでは消えない aspect-ratio / padding-bottom も解除） */
  .kuushitsu .ect-list-post-left,
  .kuushitsu .ect-list-img,
  .kuushitsu .ect-list-img-link,
  .kuushitsu .ect-list-date {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;     /* 画像比率による高さを解除 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;      /* padding-bottom 比率ハックを解除 */
  }

  /* 日付エリア：上下パディングを縮める（空白の主因） */
  .kuushitsu .ect-list-date {
    padding: 0 !important;
  }
  .kuushitsu .ect-list-date .ect-date-area,
  .kuushitsu .ect-date-area {
    min-height: 0 !important;
    padding: 6px 4px !important;     /* ← 上下の余白。詰めたいなら小さく */
    gap: 2px !important;
  }

  /* カード内の左右パディング（広すぎる場合に調整） */
  .kuushitsu .ect-list-post {
    padding: 16px !important;        /* ← カード内側の余白 */
  }

  /* 本文（タイトル・時間・リンク）の行間・間隔を詰めたい場合 */
  .kuushitsu .ect-list-post-right > * {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

/* =========================================================
   施設空満状況（.kuseki）：お知らせ一覧風レイアウトへ刷新
   参考2枚目に合わせ、カード枠を廃止し
   「日付（小・グレー）｜ タイトル＋内容 ｜ ＞」の横罫線リストに。
   ※日付列の大きな空枠は .ect-list-img の背景プレースホルダ画像が原因
   ========================================================= */

/* 行：枠をやめて細い横罫線だけ・横並び中央寄せ */
.kuseki .ect-list-post {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 16px 42px 16px 6px !important;   /* 右端に矢印スペース */
  border: 0 !important;
  border-top: 1px solid #e4e0d6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  width: auto !important;
}
.kuseki .ect-list-post:last-child { border-bottom: 1px solid #e4e0d6 !important; }

/* 左：日付列を内容幅まで縮小し、空のサムネ枠（背景画像）を解除 */
.kuseki .ect-list-post-left {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kuseki .ect-list-img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;     /* プレースホルダ画像を消す */
}
.kuseki .ect-list-img > a {
  display: block !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* 日付ボックス：絶対配置/枠/高さを解除して普通のテキスト化 */
.kuseki .ect-list-date {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.kuseki .ect-date-area,
.kuseki .ect-date-area.default-schedule {
  position: static !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* 日付の文字：小さめグレー（年→月→日の順に整える）。
   ※既存 .kuushitsu .ect-date-area .ev-line(18px) に勝つよう .ect-date-area を挟む */
.kuseki .ect-date-area .ev-yr,
.kuseki .ect-date-area .ev-mo,
.kuseki .ect-date-area .ev-day,
.kuseki .ect-date-area .ev-line {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8a8a8a !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
}
.kuseki .ect-date-area .ev-yr  { order: 1 !important; }
.kuseki .ect-date-area .ev-mo  { order: 2 !important; }
.kuseki .ect-date-area .ev-day { order: 3 !important; }
.kuseki .ect-date-area .ev-yr::after  { content: '年' !important; }
.kuseki .ect-date-area .ev-day::after { content: '日' !important; }

/* ホバーで日付が消えないよう保険（高詳細度で表示固定） */
.kuseki .ect-list-post:hover .ect-list-post-left .ect-list-date .ect-date-area,
.kuseki .ect-list-post:hover .ect-list-post-left .ect-list-date .ect-date-area.default-schedule {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 右：本文ラッパ（table風レイアウトを通常フローに） */
.kuseki .ect-list-post-right {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kuseki .ect-list-post-right-table { display: block !important; width: 100% !important; }
.kuseki .ect-list-description      { display: block !important; width: 100% !important; }

/* タイトル（主役・太字） */
.kuseki .ect-list-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.kuseki .ect-list-title a,
.kuseki .ect-event-url {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 700 !important;   /* ← リンク自体に太字（テーマの a 指定に勝つ）*/
  font-size: 16px !important;
}
.kuseki .ect-list-title a:hover,
.kuseki .ect-event-url:hover { opacity: .7 !important; }

/* 内容（予約不可/空席 等）：タイトル下の小さなグレー補足。空なら非表示 */
.kuseki .ect-event-content {
  margin: 3px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: #777 !important;
  line-height: 1.5 !important;
}
.kuseki .ect-event-content p { margin: 0 !important; }
.kuseki .ect-event-content:empty { display: none !important; }

/* 「詳しくはこちら」リンクは非表示にする */
.kuseki .ect-events-read-more { display: none !important; }

/* 矢印は行（.ect-list-post）自体の右端に出す（構造に左右されず確実に表示）*/
.kuseki .ect-list-post::after {
  content: '' !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #b0a99c !important;
  border-top: 2px solid #b0a99c !important;
  transform: translateY(-50%) rotate(45deg) !important;
  pointer-events: none !important;
}

/* 行全体をクリック可能に（実際の遷移は sonaekan.php のJSで行う）*/
.kuseki .ect-list-post { cursor: pointer; }
/* 日付リンクは重なって二重リンクになるので無効化（同じ詳細ページに飛ぶため不要）*/
.kuseki .ect-list-img > a { pointer-events: none !important; }
  div#ect-events-list-content {
        width: 80% !important;
}
.kuseki .ect-list-post-left { display: none !important; }
/* スマホ */
@media (max-width: 768px) {
  /* スマホでも1行・左揃えを維持（旧 .kuushitsu スマホ指定の縦積み/中央寄せを打ち消す）*/
  .kuseki .ect-list-post {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;                    /* ← 日付とタイトルの間隔。日付列の min-width(80px)で間隔を確保 */
    padding: 5px 30px 5px 4px !important;
  }
  div#ect-events-list-content {
        width: 90% !important;
}
.kuiman_txt {
    margin: 0 5% 10% 5%;
}
  .kuseki .ect-list-post-left {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  /* 右カラムを伸ばさず内容幅に → タイトルが日付のすぐ右に来る */
  .kuseki .ect-list-post-right {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .kuseki .ect-list-post-right-table,
  .kuseki .ect-list-description {
    width: auto !important;
    min-width: 0 !important;
    display: inline-block !important;
    text-align: left !important;
  }
  .kuseki .ect-list-title { text-align: left !important; white-space: nowrap !important; }
  .kuseki .ect-date-area { justify-content: flex-start !important; }
  /* プラグインの min-width:100px を上書きして日付列を更に詰める（詰めるなら更に小さく）*/
  .kuseki .ect-list-post-left .ect-list-date { min-width: 80px !important; }

  /* 年を隠して「6月25日（木）」に（JSで年を <span class="ev-y"> で包む）。
     JS未実行時の生spanフォールバックでは .ev-yr を隠す */
  .kuseki .ev-y,
  .kuseki .ect-date-area .ev-yr { display: none !important; }

  .kuseki .ect-date-area .ev-mo,
  .kuseki .ect-date-area .ev-day,
  .kuseki .ect-date-area .ev-line { font-size: 12px !important; }
  .kuseki .ect-list-title,
  .kuseki .ect-list-title a,
  .kuseki .ect-event-url { font-size: 15px !important; }
  .kuseki .ect-event-content { font-size: 12px !important; }
}

/* =========================================================
   ★JS対策★ プラグインJSが読み込み後に左カラム等へ高さを
   インライン設定して行が縦に伸びるのを、高さ系を強制解除して防ぐ。
   （日付・矢印・罫線は効いているが高さだけ戻る現象への対処）
   ========================================================= */
.kuseki .ect-list-post,
.kuseki .ect-list-post-left,
.kuseki .ect-list-img,
.kuseki .ect-list-img > a,
.kuseki .ect-list-date,
.kuseki .ect-list-post-right,
.kuseki .ect-list-post-right-table,
.kuseki .ect-list-description {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

/* 本文（内容欄）は非表示：日付・タイトル・矢印の3要素だけにする */
.kuseki .ect-event-content { display: none !important; }

/* =========================================================
   チラつき対策（イベント基準）
   読み込み中は隠しておき、JSが「整形・調整を終えたら」.is-ready を
   付けて表示する。時間任せ(0.5s)ではなく window.load 完了後に表示する
   ため、遅れて動くプラグインJSの乱れも隠せる。
   ※対応するJSは sonaekan.php の strip スクリプトに統合
   ========================================================= */
.kuseki { opacity: 0; }
.kuseki.is-ready {
  opacity: 1;
  transition: opacity 0.25s ease;
}
/* フェイルセーフ：万一JSが動かなくても3秒後には必ず表示する（隠れっぱなし防止）*/
@keyframes kuseki-failsafe { to { opacity: 1; } }
.kuseki { animation: kuseki-failsafe 0.01s linear 3s forwards; }