/* ==========================================================
   NISHIZATO TERAS — Custom Stylesheet
   テーマ固有のカスタムCSS（sticky-header.css）
   最終更新: 2026-06-11

   == 構成（行番号は変更時に追従しないので参考程度）==

   ▶ Part A: 基本セクション（〜L2173）
       1. リセット・非表示
       2. ローディング画面
       3. 固定ヘッダー
       4. ハンバーガー＆ドロワーメニュー
       5. スライダー
       6. セクション共通（見出し・背景色）
       7. About / Experience セクション
       8. Facility セクション
       9. News（Instagram スライダー）
      10. FAQ セクション
      11. Contact セクション
      12. Access セクション
      13. Archives / 記事ページ
      14. Background（#tips）セクション
      15. フッター
      16. 共通ボタン（btn-arrow）
      17. カレンダーモーダル
            17.4 施設図 拡大モーダル
            17.5 ムービーモーダル
      18. SP レスポンシブ（〜750px）— ※ 元の breakpoint。Part C と併用

   ▶ Part B: 後付け追加（L2174〜L2644）
      10b. About 内 情報ボックス（営業時間/定休日 + 月別カレンダー）
      11b. カレンダー画像 拡大表示モーダル（v3）

   ▶ Part C: PC 全画面 流動スケーリング ブロック（L2646〜L4218）
       :root に CSS 変数（--fs-h2, --gap-section 等）を定義し
       全セクションを 1400px 基準で clamp 化したオーバーライド。
       「▼▼▼ 〜 ▲▲▲」マーカーで囲まれ、削除すれば元通り（rollback 可）。

       含まれるサブセクション（番号は実装順、★は SP @media）:
         §1〜§30   …  Part A の各セクションの clamp 化
         §31       …  コンテンツ間隔の流動化
         §32       …  個別問題対応（フッター幅 / Contact 本文 / Archives / Tips）
         §33 ★    …  スマホ専用レイアウト（〜750px）
         §34       …  本文テキストを日本語両端揃え（justify）
         §35       …  ファイナル細部調整（施設名 1.2倍 / mapbox 整列 等）
         §36       …  Background / Tips 全面再調整（v2）
         btn-arrow 罫線改修（共通）+ Archives Read more 下余白
         §33-X ★  …  SP の細部調整（Tips 縦積み / 各ボタン中央 / 罫線等）

   ▶ Part D: A11y / 共通ユーティリティ（L4219〜末尾）
       prefers-reduced-motion 抑制
       .sr-only クラス
       グローバル focus-visible スタイル

   == 編集ガイド ==

   - SP（〜750px）はすべて 750px の breakpoint に統一済み
     （旧 768px / 782px は 2026-06-11 のリファクタで統合）
   - 同じセレクタを複数箇所で宣言する箇所が残っている（cascade 順で最後勝ち）
     大幅編集時は !important の整合性に注意
   - Part C の rollback マーカー（▼▼▼ 〜 ▲▲▲）を消すと Part A の元の見た目に戻る
   ========================================================== */


/* ----------------------------------------------------------
   1. リセット・非表示
   ---------------------------------------------------------- */

/* 元テーマの旧UI要素を非表示 */
#container > .sp_header,
#container > .menubar,
body > .sp_header,
.gnav,
#fade ~ .sp_header,
#leftbar,
.openbtn,
#g-nav,
.blk_cover,
.blur_cover {
  display: none !important;
}

/* WordPress Admin Bar 非表示 */
#wpadminbar {
  display: none !important;
}
html {
  margin-top: 0 !important;
  --wp-admin--admin-bar--height: 0 !important;
}
body.admin-bar {
  margin-top: 0 !important;
}
@media screen and (max-width: 750px) {
  html {
    margin-top: 0 !important;
    --wp-admin--admin-bar--height: 0 !important;
  }
}

/* reCAPTCHA バッジ非表示 */
.grecaptcha-badge {
  visibility: hidden !important;
}


/* ----------------------------------------------------------
   2. ローディング画面
   ---------------------------------------------------------- */
#fade {
  width: 100%;
  height: 100vh;
  display: block;
  background: #D1722A;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
}


/* ----------------------------------------------------------
   3. 固定ヘッダー
   ---------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body #container {
  margin-top: 0;
}

/* トップページのスライダーはヘッダー背後から表示（余白なし） */
.indexpage > .swiper-container:first-of-type {
  margin-top: 0;
}

/* サブページの先頭にはヘッダー高さ分の余白 */
.subpage,
.articlepage {
  margin-top: 48px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
}

.header-logo {
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}

.header-logo img {
  height: 20px;
  width: auto;
  max-width: none;
}

/* PC ナビゲーション */
.header-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 42px;
  align-items: center;
}

.header-nav a {
  color: #333;
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.1em;
  transition: color 0.3s;
  white-space: nowrap;
}

.header-nav a:hover {
  color: #8B7355;
}

/* SNS アイコン（PC） */
.header-sns {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

.header-sns img {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.header-sns img:hover {
  opacity: 1;
}


/* ----------------------------------------------------------
   4. ハンバーガー＆ドロワーメニュー
   ---------------------------------------------------------- */
.hamburger {
  /* 視覚サイズは 30x24 のままだが、タップ領域は padding で 44x44 を確保 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1001;
  padding: 10px 7px;     /* 内側に 30x24 のバー領域を確保 */
  box-sizing: border-box;
  flex-shrink: 0;
  margin-left: 0;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 2px;
  background: #333;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 10px; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 10px; }

.hamburger.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ドロワーパネル */
.drawer-nav {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: calc(320px + (100vw - 1200px) / 2);
  min-width: 320px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  padding: 80px 30px 30px;
  padding-right: calc((100vw - 1200px) / 2 + 10px);
  transition: right 0.3s ease;
  z-index: 999;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.drawer-nav.is-open {
  right: 0;
}

.drawer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-nav li {
  border-bottom: 1px solid #eee;
}

.drawer-nav a {
  display: block;
  padding: 16px 0;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.05em;
}

/* ドロワー: コンタクト・カレンダー（アイコン付きだがサイズはメイン項目と統一） */
.drawer-nav li.drawer-sub {
  border-bottom: 1px solid #eee;
}

.drawer-nav li.drawer-sub a {
  font-size: 16px;
  padding: 16px 0;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
}

.drawer-nav li.drawer-sub .drawer-icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.drawer-sns {
  display: flex;
  gap: 16px;
  margin-top: 30px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.drawer-sns img {
  width: 24px;
  height: 24px;
}

/* ドロワーオーバーレイ */
.drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
}

.drawer-overlay.is-open {
  display: block;
}


/* ----------------------------------------------------------
   5. スライダー
   ---------------------------------------------------------- */
.swiper-pagination-bullet {
  background: #D1722A !important;
  opacity: 0.3 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
}


/* ----------------------------------------------------------
   6. セクション共通（見出し・背景色）
   ---------------------------------------------------------- */
.section-heading {
  text-align: center;
  border-bottom: 1px solid #aaa;
  padding-bottom: 22px;
}

.section-heading .en {
  display: block;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #333;
  margin-bottom: 4px;
}

.section-heading .ja {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #888;
}

/* 背景色（薄グレー / 白 交互） */
#about      { background-color: #F7F7F5; }
#post       { background-color: #fff !important; }
#facility   { background-color: #F7F7F5 !important; }
#experience { background-color: #fff; padding-top: 70px; padding-bottom: 70px; }
#access     { background-color: #F7F7F5; }
#faq        { background-color: #fff; padding-top: 70px; padding-bottom: 70px; }
#reboot     { background-color: #fff; padding-bottom: 0; }
#tips       { background-color: #F7F7F5 !important; }
#contact    { background-color: #F7F7F5; padding-top: 70px; padding-bottom: 70px; }

/* 下層ページ背景色 */
.articlepage,
.subpage {
  background-color: #F7F7F5;
}


/* ----------------------------------------------------------
   7. About / Experience セクション
   ---------------------------------------------------------- */
#about .leadbox,
#experience .leadbox {
  width: 750px;
  margin: 60px auto 0;
  text-align: center;
}

#about .leadbox .about-layout,
#experience .leadbox .about-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

#about .about-img,
#experience .about-img {
  width: 100%;
  flex-shrink: 0;
}

#about .about-img img,
#experience .about-img img {
  width: 100%;
  height: auto;
}

/* About 写真2枚レイアウト */
.about-images {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.about-image-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #eee;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.about-image-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* About テキストブロック：本文幅を絞って読みやすく */
#about .about-text {
  max-width: 540px !important;
  margin: 40px auto 0 !important;
}

/* （旧 #about .about-info の罫線・背景カード化スタイルは削除。
    v3 では .about-info-box 配下のピル型レイアウトを使用するため不要） */

#about .leadbox .about-layout .txtbox,
#experience .leadbox .about-layout .txtbox {
  width: 100% !important;
  display: block !important;
  text-align: left;
  margin-top: 24px;
}

#about .leadbox .about-layout .txtbox p,
#experience .leadbox .about-layout .txtbox p {
  width: 100% !important;
  font-weight: 300;
}

/* Experience: 動画埋め込み */
.experience-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

.experience-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#experience .about-img .ph-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* About テキスト */
.about-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
  margin-bottom: 16px;
}

.about-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: #555;
  margin-bottom: 20px;
}

/* About 営業情報 — v3 では .about-info-box 配下のスタイル（セクション10）を使用 */


/* ----------------------------------------------------------
   8. Facility セクション
   ---------------------------------------------------------- */
.facility-details {
  max-width: 750px;
  margin: 60px auto 0;
  padding: 0 20px;
}

/* 大サイズカード（TOMOS・コワーキング） */
.facility-detail-lg {
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
  align-items: flex-start;
}

.facility-detail-lg:nth-child(even) {
  flex-direction: row-reverse;
}

.facility-detail-img {
  width: 50%;
  flex-shrink: 0;
}

.facility-detail-img img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.facility-detail-body {
  flex: 1;
}

.facility-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.facility-detail-logo {
  height: 2.2em;
  display: block;
  margin-bottom: 4px;
}

.facility-detail-sub {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

.facility-detail-text {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  line-height: 1.8;
}

.facility-detail-spec {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #888;
}

/* 定員などのバッジ表示 */
.facility-badge {
  display: inline-block;
  padding: 3px 10px;
  margin: 4px 0 12px;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* バッジを横並びで複数表示 */
.facility-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 12px;
}
.facility-badges .facility-badge {
  margin: 0;
}

/* コミュニティルーム/キッズルームの改行対策（PC時に1文字落ちないように） */
.facility-title-cw {
  white-space: nowrap;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 480px) {
  .facility-title-cw {
    white-space: normal;
    letter-spacing: normal;
    font-size: 14px;
  }
}

.facility-detail-calendar {
  margin-top: 20px;
}

/* 施設スライダー */
.facility-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.facility-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ナビボタン */
.facility-slider .swiper-button-prev,
.facility-slider .swiper-button-next {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  margin-top: -14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s;
}

.facility-slider .swiper-button-prev::after,
.facility-slider .swiper-button-next::after {
  font-size: 12px;
  font-weight: bold;
  color: #555;
}

.facility-slider .swiper-button-prev { left: 10px; }
.facility-slider .swiper-button-next { right: 10px; }

/* 小サイズ施設のスライダー矢印は小さく＆端寄せ */
.facility-detail-sm-img .facility-slider .swiper-button-prev,
.facility-detail-sm-img .facility-slider .swiper-button-next {
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
}
.facility-detail-sm-img .facility-slider .swiper-button-prev::after,
.facility-detail-sm-img .facility-slider .swiper-button-next::after {
  font-size: 7px;
}
.facility-detail-sm-img .facility-slider .swiper-button-prev { left: 4px; }
.facility-detail-sm-img .facility-slider .swiper-button-next { right: 4px; }

/* ページネーション（ドット） */
.facility-slider .swiper-pagination {
  bottom: 8px !important;
  right: auto !important;
  width: 100% !important;
  text-align: center;
}

.facility-slider .swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.6 !important;
  width: 6px;
  height: 6px;
  margin: 0 3px !important;
}

.facility-slider .swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: #D1722A !important;
}

/* 1枚しか無い場合は通常表示 */
.facility-slider.is-single .swiper-button-prev,
.facility-slider.is-single .swiper-button-next,
.facility-slider.is-single .swiper-pagination {
  display: none;
}

/* TOMOS・コワーキング写真を正方形に */
.facility-detail-lg .facility-detail-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.facility-detail-lg .facility-detail-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* コワーキング写真の表示位置を中央右寄りに調整（左上・左下の欠け対策） */
.facility-detail-lg:nth-child(2) .facility-detail-img > img,
.facility-detail-lg:nth-child(2) .facility-slider .swiper-slide img {
  object-position: 65% center;
}

/* 小サイズグリッド */
.facility-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
  margin-top: 50px;
}

.facility-detail-sm-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.facility-detail-sm-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facility-detail-sm-img .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.facility-detail-sm-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
  margin-bottom: 6px;
}

.facility-detail-sm-text {
  font-size: 13px;
  font-weight: 300;
  color: #555;
  line-height: 1.7;
}

/* Facility Contact ボタン */
.contactbox p {
  margin-bottom: 30px;
}

.mapbox .contactbox a {
  background-color: transparent !important;
}

/* mapbox レイアウト上書き：縦並び（テキスト→図→お問い合わせ） */
.mapbox {
  display: block !important;
  width: 100% !important;
  max-width: 1200px;
  margin: 70px auto 0 !important;
  padding: 0 20px;
  box-sizing: border-box;
}

.mapbox .txtbox {
  width: 100% !important;
  text-align: center;
}

/* 「施設図」見出しと本文：施設セクション (.facility-details) の左端に揃える */
.mapbox-text-inner {
  max-width: 790px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  box-sizing: border-box;
}

/* 「施設図」を囲み文字（バッジ）化 — FAQ の faq-category と同等スタイル */
.mapbox .txtbox .tit {
  display: inline-block;
  margin-top: 0 !important;
  padding: 6px 16px !important;
  border: 1px solid #333;
  border-radius: 20px;
  background: transparent;
  font-size: 15px !important;
  font-weight: 600;
  color: #333;
}

.mapbox .txtbox .txt {
  width: 100% !important;
  max-width: 400px;
  margin: 14px 0 0 !important;
  text-align: left;
}

.mapbox .contactbox {
  margin-top: 40px;
  text-align: center;
}

/* Experience セクション内の Contact CTA（mapbox 内の CTA と同じ見せ方） */
#experience .contactbox {
  margin: 40px auto 0;
  text-align: center;
  max-width: 1200px;
  padding: 0 20px;
}
#experience .contactbox p {
  font-size: 90%;
  font-weight: 300;
  margin-top: 40px;
  margin-bottom: 30px;
  letter-spacing: normal;
}
#experience .contactbox a {
  background-color: #fff;
}

/* 施設図（1F/2F トグル） */
.floorplan {
  width: 100%;
  margin: 30px 0 0;
}

.floorplan-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.floorplan-tab {
  flex: 0 0 auto;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  letter-spacing: 0.05em;
}

.floorplan-tab:hover {
  background: #f5f5f5;
}

.floorplan-tab.is-active {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* 拡大ボタン（タブ群の右寄り） */
.floorplan-zoom-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 11px;
  color: #555;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  letter-spacing: 0.05em;
}
.floorplan-zoom-btn:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #333;
}
.floorplan-zoom-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.floorplan-zoom-icon::before,
.floorplan-zoom-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.floorplan-zoom-icon::before {
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1.5px;
  margin-top: -0.75px;
}
.floorplan-zoom-icon::after {
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1.5px;
  margin-left: -0.75px;
}

/* デフォルト表示：常にビューポートにフィット（縮小して全体を一覧） */
.floorplan-frame {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  background: #fafafa;
  border-radius: 6px;
  overflow: hidden;
}


/* 2画像を重ねるステージ：1Fが基準サイズを決め、2Fは絶対配置で重なる */
.floorplan-stage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.floorplan-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* 1F: 静的配置（ステージサイズを決める） */
.floorplan-img-1f {
  position: relative;
}

/* 2F: 1Fの上に絶対配置で重なる（同寸法・同位置） */
.floorplan-img-2f {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

/* 1F アクティブ時 */
.floorplan-frame[data-active="1f"] .floorplan-img-1f {
  opacity: 1;
  filter: none;
}
.floorplan-frame[data-active="1f"] .floorplan-img-2f {
  opacity: 0;
  visibility: hidden;
}

/* 2F アクティブ時：背景の1Fをグレー＋ごく弱いぼかし＋減光、2Fを上に表示 */
.floorplan-frame[data-active="2f"] .floorplan-img-1f {
  opacity: 0.35;
  filter: grayscale(1) blur(0.8px);
}
.floorplan-frame[data-active="2f"] .floorplan-img-2f {
  opacity: 1;
  visibility: visible;
}

/* スクロールバー控えめ */
.floorplan-frame::-webkit-scrollbar {
  height: 6px;
}
.floorplan-frame::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}



/* ----------------------------------------------------------
   9. News（Instagram スライダー）
   ---------------------------------------------------------- */
.news-slider-wrap {
  max-width: 960px;
  margin: 40px auto 0;
  padding: 0 20px;
  overflow: hidden;
}

.news-swiper {
  overflow: visible;
  position: relative;
}

.news-swiper .swiper-slide {
  width: 280px;
  flex-shrink: 0;
}

.news-card {
  display: block;
  text-decoration: none;
  color: #333;
  transition: opacity 0.3s;
}

.news-card:hover {
  opacity: 0.8;
}

.news-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-img .ph-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* キャプション */
.news-card-caption {
  position: relative;
  padding: 10px 12px 0;
  max-height: 80px;
  overflow: hidden;
}

.news-card-text {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.news-card-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

.news-empty {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 40px 0;
}

/* スライダー矢印 */
.news-swiper-prev,
.news-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.news-swiper-prev:hover,
.news-swiper-next:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.news-swiper-prev { left: -18px; }
.news-swiper-next { right: -18px; }

.news-swiper-prev::after,
.news-swiper-next::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
}

.news-swiper-prev::after {
  transform: rotate(135deg);
  margin-left: 3px;
}

.news-swiper-next::after {
  transform: rotate(-45deg);
  margin-right: 3px;
}

.news-swiper-prev.swiper-button-disabled,
.news-swiper-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}


/* ----------------------------------------------------------
   10. FAQ セクション
   ---------------------------------------------------------- */
.faq-list {
  max-width: 600px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.faq-category {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 50px 0 16px;
  padding: 6px 16px;
  border: 1px solid #333;
  border-radius: 20px;
  display: inline-block;
}

.faq-category:first-child {
  margin-top: 0;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0 18px 0.5em;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::before {
  display: none;
}

.faq-q::after {
  content: '+';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  color: #999;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: all 0.3s ease;
}

details.faq-item[open] .faq-q::after {
  content: '−';
  background: #D1722A;
  border-color: #D1722A;
  color: #fff;
}

.faq-a {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  line-height: 1.8;
  padding: 0 0 18px 2.5em;
  text-indent: -1em;
  animation: faqSlideDown 0.3s ease;
}

@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ----------------------------------------------------------
   11. Contact セクション
   ---------------------------------------------------------- */
/* FAQ下の増設 Contact */
.contact-section {
  background-color: #F7F7F5;
  padding: 60px 0;
}

.contact-section .contact-body {
  margin: 0 auto;
}

/* Contact 共通 */
.contact-body {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.contact-body > p {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  margin-bottom: 0;
}

.contact-body > .btn-arrow {
  margin-top: 80px;
}


/* ----------------------------------------------------------
   12. Access セクション
   ---------------------------------------------------------- */
#access p span.access-highlight {
  border-bottom: 2px solid #D1722A;
  padding-bottom: 1px;
  font-size: inherit;
  font-weight: 600;
}

#access p span.access-notice {
  display: inline-block;
  margin-top: 10px;
  font-weight: 300;
  color: #333;
  font-size: 15px;
}


/* ----------------------------------------------------------
   13. Archives / 記事ページ
   ---------------------------------------------------------- */

/* 記事サムネ: TOMOS/記者名の位置 */
.post_inner .upper {
  position: absolute !important;
  top: 167px !important;
  left: 5%;
  width: 90%;
}

/* タイトル高さ自動 */
.post_inner .txtbox .titl {
  height: auto !important;
  min-height: 0;
}

.archive-grid .itembox .txtbox .titl {
  height: auto !important;
}

#post .inner .headlinetagbox + p,
.articlepage .inner > p {
  font-size: 16px;
}

/* アーカイブ 3列グリッド */
.archive-grid {
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
}

/* ページネーション */
.archive-pagination {
  text-align: center;
  margin: 40px 0 80px;
}

.archive-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.archive-pagination .page-numbers.current {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

.archive-pagination .page-numbers:hover {
  background-color: #eee;
}

.archive-pagination .page-numbers.current:hover {
  background-color: #333;
}

/* 個別記事ページネーション */
.single-pagination {
  margin: 60px 0 40px;
  border-top: 1px solid #ddd;
  padding-top: 30px;
}

.single-pagination-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.single-pag-prev,
.single-pag-next { flex: 1; }

.single-pag-prev { text-align: left; }
.single-pag-next { text-align: right; }
.single-pag-list { flex-shrink: 0; }

.single-pagination a {
  text-decoration: none;
  color: #333;
  font-size: 13px;
  transition: color 0.3s;
}

.single-pagination a:hover {
  color: #8B7355;
}

.single-pag-list a {
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.single-pag-list a:hover {
  background-color: #eee;
}

/* もっと読む 右揃え。
   .news-slider-wrap は max-width:960px + 左右padding 20px = 効果的コンテンツ幅 920px。
   morebox もそれに揃えて 920px とし、「Read more」の右端をスライダーの右端と一致させる */
#reboot .morebox,
#post .news-morebox {
  display: flex !important;
  justify-content: flex-end !important;
  width: 920px !important;
  max-width: 920px !important;
  margin: 20px auto 0 !important;
  padding: 18px 0 10px !important;
  box-sizing: border-box !important;
  background: none !important;
}

/* Archives: タイトル・日付 左揃え */
#reboot .post_inner .txtbox { text-align: left; }
#reboot .post_inner .txtbox .date { text-align: left; }
#reboot .post_inner .upper { text-align: left; }


/* ----------------------------------------------------------
   14. Background（#tips）セクション
   ---------------------------------------------------------- */
#tips .section-heading {
  padding-top: 70px;
}

/* 旧About コンテンツ */
#tips .leadbox {
  width: 750px;
  margin: 60px auto 80px;
  text-align: center;
  position: relative;
  z-index: 1;
}

#tips .leadbox .txtbox {
  width: 750px;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

#tips .leadbox .txtbox img { width: 300px; }
#tips .leadbox .txtbox p   { width: 300px; font-weight: 300; }

/* 回転する三角形装飾 */
#tips .ceilingmark1,
#tips .ceilingmark2 {
  z-index: 0;
  filter: brightness(0) opacity(0.04);
}

#tips .inner {
  position: relative;
  z-index: 1;
}

/* スタッフ */
#tips .staffbox {
  position: relative;
  z-index: 1;
}

#tips .staffbox .subtit {
  margin-bottom: 30px;
}

/* スタッフ・プロジェクト事務局の本文行間 */
#tips .staffbox .personbox .itembox .txt {
  line-height: 1.8;
}


/* ----------------------------------------------------------
   15. フッター
   ---------------------------------------------------------- */
#footer .logobox {
  margin-top: 20px;
}

#footer .inner2 ul {
  vertical-align: top;
}

#footer .inner2 ul li {
  margin-bottom: 1.5em;
}


/* ----------------------------------------------------------
   16. 共通ボタン（btn-arrow）
   ---------------------------------------------------------- */
.btn-arrow {
  display: inline-block;
  text-decoration: none;
  color: #555;
  position: relative;
  background: transparent;
}

.btn-arrow:hover {
  opacity: 0.6;
}

.btn-arrow-inner {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.btn-arrow-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-self: center;
}

/* 再生アイコン（ムービーボタン用） */
.btn-play-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #999;
  position: relative;
  display: inline-block;
}
.btn-play-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #999;
}

.btn-arrow-en {
  font-size: 22px;
  font-weight: 400;
  color: #333;
  letter-spacing: 0.05em;
}

.btn-arrow-ja {
  font-size: 13px;
  font-weight: 300;
  color: #999;
  margin-left: 4px;
}

.btn-arrow-ja::after {
  content: '→';
  margin-left: 2px;
}

/* ボタン下線 + ホバーアニメーション */
.btn-arrow::after {
  content: '';
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
  width: 100%;
  height: 1px;
  background: #bbb;
  transition: margin-top 0.3s, margin-bottom 0.3s;
}

.btn-arrow:hover::after {
  margin-top: 2px;
  margin-bottom: 4px;
}


/* ----------------------------------------------------------
   17. カレンダーモーダル
   ---------------------------------------------------------- */
.cal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.cal-modal-overlay.is-open {
  display: flex;
}

.cal-modal {
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 800px;
  height: 80vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.cal-modal-tabs {
  display: flex;
  gap: 4px;
}

.cal-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  color: #888;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.2s;
}

.cal-tab:hover {
  background: #f0f0f0;
  color: #555;
}

.cal-tab.is-active {
  background: #D1722A;
  color: #fff;
  font-weight: 500;
}

.cal-tab.is-active[data-cal="main"]    { background: #0B8043; }  /* イベント色（緑） */
.cal-tab.is-active[data-cal="kitchen"] { background: #009688; }
.cal-tab.is-active[data-cal="cowork"]  { background: #039be5; }

.cal-modal-close {
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  /* タップ領域 44x44 */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.cal-modal-close:hover {
  color: #333;
  background: rgba(0,0,0,0.05);
}

.cal-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.cal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  transition: opacity 0.25s ease;
}

/* iframe ロード中スピナー（モーダル中央） */
.cal-loading {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  z-index: 1;
  pointer-events: none;
}
.cal-loading.is-visible {
  display: flex;
}
.cal-loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid #e5e7eb;
  border-top-color: #5d6c7e;
  border-radius: 50%;
  animation: cal-spin 0.8s linear infinite;
}
.cal-loading-text {
  font-size: 13px;
  color: #6b7280;
  letter-spacing: 0.05em;
}
@keyframes cal-spin {
  to { transform: rotate(360deg); }
}


/* ----------------------------------------------------------
   17.4 施設図 拡大モーダル
   ---------------------------------------------------------- */
.floorplan-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.75);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.floorplan-modal-overlay.is-open {
  display: flex;
}
.floorplan-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 1660px;
  height: 90vh;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.floorplan-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.floorplan-modal-tabs {
  display: flex;
  gap: 8px;
}
.floorplan-modal-tab {
  padding: 6px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.floorplan-modal-tab:hover {
  background: #f5f5f5;
}
.floorplan-modal-tab.is-active {
  background: #333;
  color: #fff;
  border-color: #333;
}
.floorplan-modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 0;
}
.floorplan-modal-close:hover { color: #000; }

.floorplan-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fafafa;
}
.floorplan-modal-frame {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.floorplan-modal-frame:active { cursor: grabbing; }

.floorplan-modal-stage {
  position: relative;
  width: 1600px;
  height: auto;
}
.floorplan-modal-img {
  width: 1600px;
  height: auto;
  max-width: none;
  display: block;
  transition: opacity 0.25s ease, filter 0.25s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.floorplan-modal-img-1f { position: relative; }
.floorplan-modal-img-2f {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
.floorplan-modal-frame[data-active="1f"] .floorplan-modal-img-1f { opacity: 1; filter: none; }
.floorplan-modal-frame[data-active="1f"] .floorplan-modal-img-2f { opacity: 0; visibility: hidden; }
.floorplan-modal-frame[data-active="2f"] .floorplan-modal-img-1f { opacity: 0.35; filter: grayscale(1) blur(0.8px); }
.floorplan-modal-frame[data-active="2f"] .floorplan-modal-img-2f { opacity: 1; visibility: visible; }

/* SP: 拡大モーダルを全画面化（縦はみ出し対策） */
@media screen and (max-width: 750px) {
  .floorplan-modal-overlay {
    padding: 0;
  }
  .floorplan-modal {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
  .floorplan-modal-header {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .floorplan-modal-tab {
    padding: 5px 16px;
    font-size: 13px;
  }
  .floorplan-modal-body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* SP: ピンチズーム＋ドラッグパンを JS で扱うため、ネイティブスクロールを無効化 */
  .floorplan-modal-frame {
    overflow: hidden;
    touch-action: none;
    cursor: default;
  }
  .floorplan-modal-stage {
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }
}


/* ----------------------------------------------------------
   17.5 ムービーモーダル
   ---------------------------------------------------------- */
.about-movie-cta {
  margin-top: 28px;
  text-align: center;
}

.movie-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.movie-modal-overlay.is-open {
  display: flex;
}

.movie-modal {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
}

.movie-video {
  width: 100%;
  max-height: 90vh;
  display: block;
  background: #000;
  border-radius: 8px;
}

.movie-modal-close {
  position: absolute;
  top: -36px;
  right: -4px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-modal-close:hover {
  background: rgba(255,255,255,0.3);
}

@media screen and (max-width: 750px) {
  .movie-modal-overlay { padding: 16px; }
  .movie-modal-close {
    top: -34px;
    right: -2px;
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
}


/* ----------------------------------------------------------
   18. SP レスポンシブ（〜750px）
   ※ 当初 768px 設定だったが、Part C・Part D と統一するため 750px に統合
   ---------------------------------------------------------- */
@media screen and (max-width: 750px) {

  /* 施設図デフォルト表示: 正方形枠で高さに合わせて拡大し、左右スクロールで全体を確認 */
  .floorplan-frame {
    aspect-ratio: 1 / 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .floorplan-stage {
    position: relative;
    width: max-content;
    height: 100%;
    display: block;
  }
  .floorplan-img {
    width: auto;
    height: 100%;
    object-fit: unset;
    object-position: unset;
    max-width: none;
  }

  /* ヘッダー */
  .header-nav.pc { display: none; }
  .header-sns    { display: none; }
  .header-inner  { padding: 8px 15px; }
  .header-logo img { height: 20px; }
  .indexpage > .swiper-container:first-of-type { margin-top: 0; }
  .subpage,
  .articlepage { margin-top: 40px; }

  /* スライダー（SP）：正方形より少し縦長 */
  .swiper-img {
    height: 110vw !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* ドロワー */
  .drawer-nav {
    right: -100vw;
    width: 100vw;
    min-width: 0;
    max-width: none;
    padding: 60px 20px 30px 30px;
    padding-right: 20px;
    box-sizing: border-box;
    box-shadow: none;
    visibility: hidden;
  }
  .drawer-nav.is-open {
    right: 0;
    visibility: visible;
  }

  /* セクション見出し */
  .section-heading .en { font-size: 22px; }
  .section-heading .ja { font-size: 12px; }

  /* About / Experience */
  #about .leadbox .about-layout,
  #experience .leadbox .about-layout {
    width: 100%;
    flex-direction: column;
  }
  #about .about-img,
  #experience .about-img { width: 100%; }
  #about .leadbox,
  #experience .leadbox { width: 90vw; }
  /* About 写真2枚: SPは縦並び→2列 */
  .about-images { gap: 10px; }
  #about .leadbox .about-layout .txtbox,
  #experience .leadbox .about-layout .txtbox { width: 100% !important; }
  #experience { padding-top: 50px; padding-bottom: 50px; }
  .about-lead { font-size: 15px; }

  /* Facility */
  .facility-detail-lg { flex-direction: column !important; }
  .facility-detail-img { width: 100%; }
  .facility-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  /* Section paddings */
  #post {
    padding-top: 50px;
    padding-bottom: 20px;
  }
  #facility {
    padding-top: 50px;
  }
  #reboot {
    padding-bottom: 0 !important;
  }
  #tips {
    padding-bottom: 30px !important;
  }

  /* 設計図（mapbox）の本文サイズアップ */
  .mapbox .txtbox .txt {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  .mapbox .txtbox .tit {
    font-size: 18px !important;
  }

  /* Contact */
  #contact { padding-top: 50px; padding-bottom: 50px; }
  .contact-body {
    padding: 0 20px;
  }
  .contact-body > p {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }
  .contact-section .contact-body {
    padding: 0 20px;
  }

  /* スタッフ・プロジェクト事務局 2列レイアウト */
  .staffbox .personbox {
    flex-wrap: wrap;
    gap: 20px 4%;
    justify-content: flex-start !important;
  }
  .staffbox .personbox .itembox {
    width: 48% !important;
  }
  .staffbox .personbox .itembox .txt {
    font-size: 13px !important;
  }

  /* テキストサイズの底上げ */
  #about .leadbox .about-layout .txtbox p,
  #experience .leadbox .about-layout .txtbox p {
    font-size: 14px;
    line-height: 1.8;
  }
  .news-card-text {
    font-size: 13px;
  }

  /* Access */
  #access p span.access-notice {
    display: block;
    text-align: center;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Background (#tips) */
  #tips .inner .imgbox .txtbox {
    text-align: left !important;
  }
  #tips .inner .imgbox .txtbox .name {
    margin: 10px 0 0 0 !important;
    padding: 4px 12px !important;
    display: inline-block !important;
  }
  #tips .inner .imgbox .txtbox .txt {
    font-size: 14px !important;
    line-height: 1.8 !important;
    width: auto !important;
    margin-left: 0 !important;
  }
  #tips .inner .imgbox .txtbox .tit {
    font-size: 26px !important;
    margin-left: 0 !important;
  }
  #tips .inner .imgbox .txtbox .sub {
    font-size: 16px !important;
    margin-left: 0 !important;
  }

  #tips .leadbox {
    width: 90vw;
    margin: 2em auto 70px;
  }
  #tips .leadbox .txtbox {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: -50px;
  }
  #tips .leadbox .txtbox img { width: 100%; }
  #tips .leadbox .txtbox p {
    width: 100%;
    margin-top: 2em;
    text-align: left;
  }

  /* ボタン */
  .btn-arrow { width: 70vw; }

  /* フッターメニュー: 列の縦位置揃え */
  #footer .inner2 .clmn1 {
    top: 0 !important;
  }
  #footer .inner2 ul li {
    line-height: 1.5;
  }

  /* カレンダーモーダル */
  .cal-modal {
    width: 95vw;
    height: 85vh;
    border-radius: 8px;
  }
  .cal-modal-tabs { flex-wrap: wrap; gap: 4px; }
  .cal-tab { font-size: 12px; padding: 6px 10px; }
}


/* ----------------------------------------------------------
   10b. About 内 情報ボックス（営業時間/定休日 + 月別カレンダー）
   ※ Part A §10 は FAQ。本セクションは「Part B 後付け追加」。番号が重複しているが
   実体は別物なので、コードを変更せず TOC 側で 10b として区別する運用
   ---------------------------------------------------------- */
/* 営業時間/定休日 を含む .about-info-box は .about-text の 540px 制約内に収める */
.about-info-box {
  margin: 24px 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* 営業時間 / 定休日: ピル型の独立ボックス。外コンテナなし、軽い影で浮き感 */
.about-info-box .about-info {
  display: flex;
  gap: 18px;
  margin: 0 0 44px;
  padding: 0;
  background: transparent;
}

.about-info-box .about-info > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 30px;
  border: none;
  border-radius: 999px;             /* ピル型（高度に丸めた角） */
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.about-info-box .about-info dt {
  margin: 0;
  font-weight: bold;
  font-size: 14px;
  color: #222;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.about-info-box .about-info dd {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

/* 月別カレンダー: .about-text の 540px 制約をブレイクアウトして広く表示 */
.about-calendar {
  margin: 0;
  padding: 0;
  width: calc(100% + 360px);
  max-width: none;
  margin-left: -180px;
  margin-right: -180px;
}

/* タブレット以下では制約緩和 */
@media (max-width: 1024px) {
  .about-calendar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 仕上がりイメージに見出しなし。非表示にする */
.about-calendar-title {
  display: none;
}

/* スライダーラッパー: 余裕のある幅で前後スライドの覗きを十分に確保。
   左右に背景色と同色のグラデーションオーバーレイを擬似要素で配置することで、
   端のスライドが自然に背景に「溶け込んで」見える美しいフェードを実現する。 */
.calendar-slider-wrap {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}

/* 全スライド本体は不透明（矢印への影響を避けるためslide全体にopacityをかけない） */
.calendar-swiper .swiper-slide {
  opacity: 1;
}

/* 非アクティブカード のみ にグラデーションオーバーレイを適用。
   矢印（slideの外、.calendar-swiper-prev/next）には一切影響しない。 */
.calendar-swiper .swiper-slide-prev .calendar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;             /* .calendar-card-img と同じ角丸 */
  background: linear-gradient(to right,
      rgba(247, 247, 245, 0.85) 0%,
      rgba(247, 247, 245, 0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

.calendar-swiper .swiper-slide-next .calendar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(to left,
      rgba(247, 247, 245, 0.85) 0%,
      rgba(247, 247, 245, 0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* prev/next より外側のスライドはより薄く（3枚以上ある場合のため） */
.calendar-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) .calendar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(247, 247, 245, 0.7);
  pointer-events: none;
  z-index: 1;
}

/* 非アクティブスライドの拡大ボタンを非表示、クリックも無効化（アクティブだけ拡大可能） */
.calendar-swiper .swiper-slide:not(.swiper-slide-active) {
  pointer-events: none;
}
.calendar-swiper .swiper-slide:not(.swiper-slide-active) .calendar-card-zoom-btn {
  display: none;
}

/* スライダー自体の見せ方: overflow を隠して両端でカット、中央スライドを強調 */
.calendar-swiper {
  overflow: hidden;
  position: relative;        /* ナビ矢印/ページネーションの絶対配置の参照点 */
  padding-bottom: 40px;
}

/* SP（768px以下）: 営業時間/定休日 を縦並びに */
@media (max-width: 750px) {
  .about-info-box .about-info {
    flex-direction: column;
    gap: 10px;
  }
  .calendar-slider-wrap {
    max-width: 100%;
  }
}

.calendar-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;             /* グラデーションオーバーレイ ::after の参照点 */
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
}

.calendar-card:hover {
  opacity: 0.95;
  transform: translateY(-2px);
}

.calendar-card:focus {
  outline: 2px solid #D1722A;
  outline-offset: 2px;
}

/* カード内の画像コンテナを拡大ボタンの基準点に */
.calendar-card-img {
  position: relative;
}

/* 拡大ボタン（画像右下に重ねて表示） */
.calendar-card-zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  z-index: 2;
}

.calendar-card-zoom-btn:hover {
  background: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* SVG 拡大アイコン: コーナー4点型のフルスクリーン展開マーカー */
.calendar-zoom-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: #333;
}

.calendar-card-img {
  width: 100%;
  /* 縦横比を固定せず、画像本来の比率で表示してトリミング（上下切れ）を回避 */
  overflow: hidden;
  border-radius: 12px;
  background: #fafafa;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.calendar-card-img img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  /* WordPress の inline width 属性や theme の max-width を確実に上書きし、
     画像をカード幅いっぱいに広げる（カード右余白を解消） */
}

.calendar-card-img .ph-img {
  width: 100%;
  aspect-ratio: 4 / 5;  /* プレースホルダのみ最低限の比率を維持 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.calendar-card-caption {
  padding: 12px 16px 0;
  text-align: center;
}

.calendar-card-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.calendar-empty {
  text-align: center;
  color: #999;
  font-size: 14px;
  line-height: 1.8;
  padding: 60px 20px;
  border: 1px dashed #ddd;
  border-radius: 12px;
  background: #fafafa;
}

/* 矢印ナビ */
.calendar-swiper-prev,
.calendar-swiper-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ffffff;             /* 完全不透明（背景グラデーションを透過させない） */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 20;                     /* グラデーションオーバーレイ(5)より確実に前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, background 0.3s;
  opacity: 1;                      /* スライドのopacityを継承しない */
}

.calendar-swiper-prev:hover,
.calendar-swiper-next:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 端のスライドで対応する矢印を非表示（左:過去 / 右:未来 の自然なナビ） */
.calendar-swiper-prev.swiper-button-disabled,
.calendar-swiper-next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.calendar-swiper-prev { left: 8px; }
.calendar-swiper-next { right: 8px; }

.calendar-swiper-prev::after,
.calendar-swiper-next::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
}

.calendar-swiper-prev::after { transform: rotate(135deg); margin-left: 4px; }
.calendar-swiper-next::after { transform: rotate(-45deg); margin-right: 4px; }

.calendar-swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.calendar-swiper-pagination .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
  margin: 0 4px;
}

.calendar-swiper-pagination .swiper-pagination-bullet-active {
  background: #D1722A;
}

@media (max-width: 750px) {
  .about-info-box { padding: 16px; }
  .calendar-swiper-prev,
  .calendar-swiper-next {
    width: 32px;
    height: 32px;
  }
  .calendar-card-zoom-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}


/* ----------------------------------------------------------
   11b. カレンダー画像 拡大表示モーダル（v3、施設図モーダル準拠）
   ※ Part A §11 は Contact。本セクションは「Part B 後付け追加」。番号が重複しているが
   実体は別物なので、コードを変更せず TOC 側で 11b として区別する運用
   ---------------------------------------------------------- */
.calendar-zoom-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.calendar-zoom-modal-overlay.is-open {
  display: flex;
}

.calendar-zoom-modal {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-zoom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e5e5e5;
}

.calendar-zoom-modal-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #444;
}

.calendar-zoom-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.calendar-zoom-modal-close:hover {
  background: #eee;
  color: #000;
}

.calendar-zoom-modal-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #f7f7f7;
}

.calendar-zoom-modal-frame {
  width: 100%;
  max-width: 900px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.calendar-zoom-modal-frame:active {
  cursor: grabbing;
}

.calendar-zoom-modal-stage {
  transform-origin: 0 0;
  display: inline-block;
  transition: transform 0.05s linear;
}

.calendar-zoom-modal-img {
  display: block;
  max-width: 100%;
  height: auto;
  user-drag: none;
  -webkit-user-drag: none;
}

.calendar-zoom-modal-caption {
  margin: 16px 0 0;
  max-width: 900px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  white-space: pre-wrap;
  text-align: center;
}

@media (max-width: 750px) {
  .calendar-zoom-modal {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .calendar-zoom-modal-body {
    padding: 8px;
  }
}

/* ====================================================================
   ▼▼▼ PC 全画面 流動スケーリング ブロック（Option C v4 / 全セクション対応）▼▼▼
   いつでも戻れる：このコメント間（▼▼▼ 〜 ▲▲▲）の CSS を全て削除すれば元通り。

   設計方針:
     - 1400px viewport を「基準（理想）状態」と定義
     - CSS カスタムプロパティで font-size / spacing / width を一元管理
     - 全セクション（About / News / Facility / Tips / Access / FAQ / Footer）対応
     - モバイル（〜750px）の既存メディアクエリは温存（min 値で吸収）

   v4 強化点:
     - :root に流動スケール用の CSS 変数を定義（保守性向上）
     - About 本文・Instagram キャプション・FAQ Q&A・Access テキスト・Tips を網羅
     - すべての段落テキストを統一的にスケール
   ==================================================================== */

/* ---- 流動スケール用 CSS 変数（1400px 基準）---- */
:root {
  /* フォントサイズ階層 */
  --fs-h2:      clamp(22px, 2.4vw, 64px);   /* section-heading EN */
  --fs-h2-sub:  clamp(12px, 1.0vw, 26px);   /* section-heading JA */
  --fs-h3:      clamp(16px, 1.5vw, 36px);   /* facility-detail-title, mapbox tit */
  --fs-h4:      clamp(14px, 1.21vw, 28px);  /* facility-detail-sm-title */
  --fs-lead:    clamp(15px, 1.4vw, 32px);   /* about-lead, FAQ q */
  --fs-body:    clamp(13px, 1.14vw, 24px);  /* 通常本文 */
  --fs-body-sm: clamp(12px, 1.07vw, 22px);  /* 小さめ本文 */
  --fs-small:   clamp(11px, 0.93vw, 20px);  /* badge, micro */
  --fs-btn-lg:  clamp(16px, 1.86vw, 48px);  /* btn-arrow EN */
  --fs-btn-sm:  clamp(12px, 1.0vw, 24px);   /* btn-arrow JA */

  /* スペーシング階層 */
  --gap-section:  clamp(40px, 5.0vw, 140px);  /* セクション縦余白 */
  --gap-content:  clamp(20px, 2.1vw, 60px);   /* 中要素間 */
  --gap-element:  clamp(12px, 1.4vw, 36px);   /* 小要素間 */
  --gap-tight:    clamp(8px, 1.0vw, 24px);    /* タイト */
  --gap-line:     clamp(6px, 0.7vw, 16px);    /* 行間隔的 */

  /* コンテナ幅階層 */
  --w-narrow: clamp(560px, 60vw, 1100px);    /* 行長制限テキスト */
  --w-medium: clamp(720px, 80vw, 2100px);    /* 標準セクション */
  --w-wide:   clamp(800px, 90vw, 2200px);    /* 広い（mapbox） */
}

/* ---- 1. コンテナ幅（全セクション）---- */
#about .leadbox,
#experience .leadbox {
  width: auto !important;
  max-width: clamp(720px, 80vw, 2100px) !important;
  padding-left: clamp(20px, 1.8vw, 48px) !important;
  padding-right: clamp(20px, 1.8vw, 48px) !important;
  box-sizing: border-box;
}

/* About テキスト部分も比例スケール（行長を心地よい範囲で広げる） */
#about .about-text,
#experience .about-text {
  max-width: clamp(560px, 60vw, 1100px) !important;
  margin: clamp(20px, 2.8vw, 60px) auto 0 !important;
}

.news-slider-wrap {
  width: auto !important;
  max-width: clamp(720px, 80vw, 2100px) !important;
  padding-left: clamp(15px, 1.4vw, 32px) !important;
  padding-right: clamp(15px, 1.4vw, 32px) !important;
  box-sizing: border-box;
}

/* Facility セクション全体の包囲箱（元: max-width 750px がボトルネック） */
.facility-details {
  max-width: clamp(720px, 88vw, 2100px) !important;
  padding-left: clamp(20px, 1.4vw, 40px) !important;
  padding-right: clamp(20px, 1.4vw, 40px) !important;
  margin-top: clamp(40px, 4.3vw, 100px) !important;
}

.mapbox {
  max-width: clamp(800px, 90vw, 2200px) !important;
}

/* ---- 2. About 内カレンダースライダー ---- */
/* 元の breakout（+360px / -180px、750px 前提）は無効化、親の中で完結させる */
.about-calendar {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- 3. 見出し（section-heading）---- */
.section-heading {
  padding-bottom: clamp(16px, 1.57vw, 36px) !important;
  margin-bottom: clamp(8px, 1.0vw, 20px);
}
.section-heading .en {
  font-size: clamp(22px, 2.4vw, 64px) !important;
}
.section-heading .ja {
  font-size: clamp(12px, 1.0vw, 26px) !important;
}

/* ---- 4. About リード文 ---- */
.about-lead {
  font-size: clamp(15px, 1.4vw, 32px) !important;
}

/* ---- 5. 施設詳細（大: TOMOS・コワーキング）---- */
.facility-detail-lg {
  gap: clamp(20px, 2.1vw, 60px) !important;
  margin-bottom: clamp(60px, 6.4vw, 160px) !important;  /* TOMOS↔コワーキング 間の余白を増加 */
}
.facility-detail-title {
  font-size: clamp(16px, 1.5vw, 36px) !important;
  margin-bottom: clamp(8px, 0.86vw, 20px) !important;
}
.facility-detail-text {
  font-size: clamp(13px, 1.14vw, 24px) !important;
  line-height: 1.7;
}
/* テキスト幅を写真幅の約 90% に（写真 50% × 0.9 = 45%）。
   余った ~5% は flex の自然挙動で写真と反対側に寄る:
     - 奇数行 TOMOS（row）          : テキスト右側に余白
     - 偶数行 コワーキング（row-reverse）: テキスト左側に余白
   モバイル（〜750px）の column 切替を壊さないため @media で PC 限定 */
@media (min-width: 751px) {
  .facility-detail-lg .facility-detail-body {
    flex: 0 1 45% !important;
    max-width: 45% !important;
    /* テキスト開始位置を写真の上端から 5% の高さ分下げる
       写真は aspect-ratio 1:1 で width 50% → 高さ = 親幅の 50%
       その 5% = 親幅の 2.5%（padding % は親の width 基準）*/
    padding-top: 2.5% !important;
  }
}

/* コワーキングスペース（2 番目の facility-detail-lg）の施設名タイトルを 1.2 倍に */
.facility-detail-lg:nth-child(2) .facility-detail-title {
  font-size: clamp(19px, 1.8vw, 43px) !important;
}

/* ---- 6. 施設詳細（小: 多目的ホール・2F会議室 等）---- */
.facility-detail-grid {
  /* row-gap, column-gap → カード間の左右余白を大きく */
  gap: clamp(36px, 3.6vw, 100px) clamp(30px, 3.0vw, 80px) !important;
  margin-top: clamp(30px, 3.6vw, 80px) !important;
}
.facility-detail-sm-title {
  font-size: clamp(14px, 1.21vw, 28px) !important;
}
.facility-detail-sm-text {
  font-size: clamp(12px, 1.07vw, 22px) !important;
  line-height: 1.7;
}
/* テキスト系要素（タイトル・バッジ・本文）を写真の 90% 幅に絞る
   = 左右に 5% ずつ padding を追加。写真自体は 100% のまま */
.facility-detail-sm-title,
.facility-detail-sm .facility-badges,
.facility-detail-sm-text {
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box;
}

/* ---- 7. 施設バッジ ---- */
.facility-badge {
  font-size: clamp(11px, 0.93vw, 20px) !important;
  padding: clamp(3px, 0.3vw, 8px) clamp(8px, 0.79vw, 20px) !important;
  border-radius: clamp(10px, 1.0vw, 24px) !important;
}

/* ---- 8. ボタン（btn-arrow）---- */
.btn-arrow-en {
  font-size: clamp(16px, 1.86vw, 48px) !important;
}
.btn-arrow-ja {
  font-size: clamp(12px, 1.0vw, 24px) !important;
}
.btn-arrow .btn-arrow-icon {
  width: clamp(20px, 2.0vw, 46px) !important;
  height: auto;
}

/* ---- 9. mapbox（施設図）見出し・本文 ---- */
.mapbox .txtbox .tit {
  font-size: clamp(18px, 1.71vw, 40px) !important;
}
.mapbox .txtbox .txt {
  font-size: clamp(13px, 1.21vw, 26px) !important;
  line-height: 1.8;
}

/* ---- 10. 営業時間・定休日（about-info）---- */
.about-info dt,
.about-info dd {
  font-size: clamp(12px, 1.14vw, 24px) !important;
}

/* ---- 11. CTA メッセージ（contactbox p）---- */
.contactbox p {
  font-size: clamp(13px, 1.21vw, 26px) !important;
}
#experience .contactbox p {
  margin-top: clamp(24px, 2.8vw, 70px) !important;
}

/* ---- 12. 施設図（floorplan）の角丸・背景を解除 ---- */
.floorplan-frame {
  border-radius: 0 !important;
  background: transparent !important;
}

/* ---- 13. セクション縦余白の流動化 ---- */
#about,
#facility,
#experience,
#access,
#faq,
#tips,
#post,
#contact {
  padding-top: clamp(40px, 5.0vw, 140px) !important;
  padding-bottom: clamp(40px, 5.0vw, 140px) !important;
}

/* ---- 14. About 内ボックス間余白 ---- */
.about-info-box {
  gap: var(--gap-element) !important;
  padding: var(--gap-element) !important;
}

/* ---- 15. About 本文（リード以外の段落） ---- */
#about .leadbox .about-layout .txtbox p,
#experience .leadbox .about-layout .txtbox p {
  font-size: var(--fs-body) !important;
  line-height: 1.8 !important;
}

/* ---- 16. News / Instagram キャプション ---- */
.news-card-caption {
  padding: clamp(8px, 0.8vw, 18px) clamp(10px, 1.0vw, 22px) 0 !important;
  max-height: clamp(70px, 6.5vw, 140px) !important;
}
.news-card-text {
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
}

/* ---- 17. FAQ ---- */
.faq-category {
  font-size: var(--fs-h4) !important;
  padding: clamp(5px, 0.5vw, 12px) clamp(12px, 1.14vw, 28px) !important;
  border-radius: clamp(16px, 1.43vw, 32px) !important;
  margin: clamp(30px, 3.6vw, 80px) 0 clamp(10px, 1.14vw, 24px) !important;
}
.faq-q {
  font-size: var(--fs-lead) !important;
  padding: clamp(14px, 1.29vw, 32px) 0 clamp(14px, 1.29vw, 32px) 0.5em !important;
}
.faq-q::after {
  width: clamp(22px, 1.71vw, 40px) !important;
  height: clamp(22px, 1.71vw, 40px) !important;
  font-size: var(--fs-body) !important;
}
.faq-a {
  font-size: var(--fs-body) !important;
  line-height: 1.8 !important;
  padding: 0 0 clamp(14px, 1.29vw, 32px) 2.5em !important;
}

/* ---- 18. Access ---- */
#access p {
  font-size: var(--fs-body) !important;
  line-height: 1.8 !important;
}
#access p span.access-notice {
  font-size: var(--fs-body-sm) !important;
}

/* ---- 19. Tips（背景・宇宙船西里号・スタッフ） ---- */
#tips .leadbox .txtbox p,
#tips .sumbox p,
#tips .itembox p {
  font-size: var(--fs-body) !important;
  line-height: 1.7 !important;
}
#tips .staffbox .subtit {
  font-size: var(--fs-h3) !important;
}
#tips .staffbox .personbox .itembox .name {
  font-size: var(--fs-body) !important;
}
#tips .staffbox .personbox .itembox .txt {
  font-size: var(--fs-body-sm) !important;
  line-height: 1.7 !important;
}

/* ---- 20. 施設図タブ・拡大ボタン ---- */
.floorplan-tab {
  font-size: var(--fs-small) !important;
  padding: clamp(4px, 0.4vw, 10px) clamp(12px, 1.14vw, 28px) !important;
  border-radius: 999px !important;
}
.floorplan-zoom-btn {
  font-size: var(--fs-small) !important;
  padding: clamp(4px, 0.4vw, 10px) clamp(10px, 0.8vw, 22px) !important;
  border-radius: 999px !important;
}

/* ---- 21. 施設図(mapbox) 見出し バッジを両端丸ピル化＋本文幅を流動化 ---- */
.mapbox .txtbox .tit {
  border-radius: 999px !important;
  padding: clamp(5px, 0.5vw, 12px) clamp(14px, 1.14vw, 28px) !important;
}
.mapbox .txtbox .txt {
  max-width: var(--w-narrow) !important;
  margin: clamp(10px, 1.0vw, 24px) 0 0 !important;
}

/* ---- 22. スタッフ・プロジェクト事務局 見出しを両端丸ピル化＋流動化 ---- */
.subtit {
  border-radius: 999px !important;
  padding: clamp(4px, 0.5vw, 12px) clamp(20px, 1.86vw, 44px) !important;
  font-size: var(--fs-h4) !important;
  margin: clamp(20px, 2.8vw, 60px) auto 0 !important;
}

/* ---- 23. Background(#tips .leadbox) のレイアウト流動化 ---- */
#tips .section-heading {
  padding-top: var(--gap-section) !important;
}
#tips .leadbox {
  width: auto !important;
  max-width: var(--w-medium) !important;
  margin: clamp(30px, 3.6vw, 80px) auto clamp(40px, 4.3vw, 100px) !important;
  padding-left: clamp(20px, 1.8vw, 48px) !important;
  padding-right: clamp(20px, 1.8vw, 48px) !important;
  box-sizing: border-box;
}
#tips .leadbox .txtbox {
  width: 100% !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(30px, 3.6vw, 80px);
}
#tips .leadbox .txtbox img {
  width: clamp(180px, 21vw, 560px) !important;
  height: auto;
  flex-shrink: 0;
}
#tips .leadbox .txtbox p {
  width: auto !important;
  flex: 1;
  font-size: var(--fs-body) !important;
  line-height: 1.8;
}

/* Tips ボックス（宇宙船西里号 ほか）も流動化 */
#tips .sumbox {
  max-width: var(--w-medium) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 1.8vw, 48px);
  padding-right: clamp(20px, 1.8vw, 48px);
  box-sizing: border-box;
  gap: clamp(16px, 1.7vw, 40px) !important;
}
/* Tips サブ画像（バックミンスター・フラー等のキャプション付き写真） */
#tips .sumbox .itembox {
  max-width: clamp(140px, 14vw, 320px) !important;
}
#tips .sumbox .itembox img {
  width: 100% !important;
  height: auto !important;
}
#tips .sumbox .itembox p {
  font-size: var(--fs-body-sm) !important;
  margin-top: clamp(6px, 0.7vw, 16px) !important;
}

/* スタッフ写真の流動化 */
#tips .staffbox {
  max-width: var(--w-medium) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 1.8vw, 48px);
  padding-right: clamp(20px, 1.8vw, 48px);
  box-sizing: border-box;
}
#tips .staffbox .personbox {
  gap: clamp(20px, 2.1vw, 60px) !important;
}
#tips .staffbox .personbox .itembox img {
  max-width: clamp(120px, 13vw, 320px) !important;
  width: 100% !important;
  height: auto !important;
}

/* ---- 24. FAQ コンテナを流動化 ---- */
.faq-list {
  max-width: var(--w-narrow) !important;
  margin: clamp(20px, 2.8vw, 60px) auto 0 !important;
  padding-left: clamp(15px, 1.4vw, 32px) !important;
  padding-right: clamp(15px, 1.4vw, 32px) !important;
  box-sizing: border-box;
}

/* ---- 25. Contact 本文＆ボタンの流動化 ---- */
#contact {
  padding-top: var(--gap-section) !important;
  padding-bottom: var(--gap-section) !important;
}
#contact .contact-body,
#contact .contact-body p,
#contact > p {
  font-size: var(--fs-body) !important;
  line-height: 1.8;
}

/* ---- 26. Archives (#post) を流動化 ---- */
#post {
  padding-top: var(--gap-section) !important;
  padding-bottom: var(--gap-section) !important;
}
#post .archive-grid,
.archive-grid {
  max-width: var(--w-medium) !important;
  margin: clamp(20px, 2.8vw, 60px) auto 0 !important;
  padding-left: clamp(15px, 1.4vw, 32px);
  padding-right: clamp(15px, 1.4vw, 32px);
  box-sizing: border-box;
  gap: clamp(16px, 1.7vw, 40px) !important;
}
.archive-grid .itembox {
  font-size: var(--fs-body) !important;
}
.archive-grid .itembox .txtbox .titl,
.post_inner .txtbox .titl {
  font-size: var(--fs-body) !important;
  line-height: 1.5 !important;
}
#reboot .morebox,
#post .news-morebox {
  width: auto !important;
  max-width: var(--w-medium) !important;
}

/* ---- 27. ヘッダー (.site-header) ---- */
.header-inner {
  max-width: clamp(960px, 92vw, 2400px) !important;
  padding: clamp(10px, 0.9vw, 24px) clamp(16px, 1.4vw, 40px) !important;
}
.header-logo img {
  height: clamp(18px, 1.4vw, 36px) !important;
}
.header-nav ul {
  gap: clamp(20px, 3.0vw, 72px) !important;
}
.header-nav a {
  font-size: clamp(14px, 1.21vw, 26px) !important;
}
.header-sns img {
  width: clamp(20px, 1.71vw, 38px) !important;
  height: clamp(20px, 1.71vw, 38px) !important;
}

/* ---- 28. ドロワーメニュー ---- */
.drawer-nav {
  width: clamp(280px, 26vw, 480px) !important;
  min-width: 280px !important;
  padding: clamp(60px, 5.7vw, 120px) clamp(20px, 2.14vw, 50px) clamp(20px, 2.14vw, 50px) !important;
}
.drawer-nav a {
  font-size: clamp(14px, 1.14vw, 22px) !important;
  padding: clamp(12px, 1.14vw, 28px) 0 !important;
}
.drawer-nav li.drawer-sub a {
  font-size: clamp(14px, 1.14vw, 22px) !important;
  padding: clamp(12px, 1.14vw, 28px) 0 !important;
  gap: clamp(6px, 0.6vw, 14px) !important;
}
.drawer-nav li.drawer-sub .drawer-icon {
  width: clamp(16px, 1.29vw, 28px) !important;
  height: clamp(16px, 1.29vw, 28px) !important;
}
.drawer-sns {
  gap: clamp(12px, 1.14vw, 28px) !important;
  margin-top: clamp(20px, 2.14vw, 50px) !important;
}
.drawer-sns img {
  width: clamp(20px, 1.71vw, 38px) !important;
  height: clamp(20px, 1.71vw, 38px) !important;
}

/* ---- 29. フッター ---- */
#footer {
  padding-top: var(--gap-section) !important;
  padding-bottom: clamp(20px, 2.14vw, 50px) !important;
}
#footer .logobox {
  margin-top: clamp(15px, 1.4vw, 36px) !important;
}
#footer .inner2 ul li {
  margin-bottom: clamp(1em, 1.4vw, 1.8em) !important;
  font-size: var(--fs-body-sm) !important;
}

/* ---- 30. ニュース「もっと読む」 と Archives「Read more」も流動化 ---- */
.btn-arrow {
  padding: clamp(8px, 0.79vw, 20px) clamp(14px, 1.4vw, 36px) !important;
}

/* ====================================================================
   31. コンテンツ間隔の流動化（残り固定 px の一括スケール）
   ──────────────────────────────────────────
   セクション間（padding-top/bottom）は #13 で対応済。
   ここでは「セクション内」の固定 px margin/gap/padding を一括流動化。
   ==================================================================== */

/* --- About: 営業時間/定休日 ピル間の隙間と padding --- */
.about-info-box .about-info {
  gap: clamp(10px, 1.3vw, 32px) !important;
  margin: 0 0 clamp(20px, 3.1vw, 80px) !important;
}
.about-info-box .about-info > div {
  gap: clamp(10px, 1.3vw, 32px) !important;
  padding: clamp(10px, 1.14vw, 28px) clamp(18px, 2.14vw, 56px) !important;
}

/* --- News スライダー: 見出しからスライダーまでの margin-top --- */
.news-slider-wrap {
  margin-top: clamp(24px, 2.8vw, 70px) !important;
}

/* --- Experience: CTA 上の margin / 最大幅 / padding --- */
#experience .contactbox {
  margin: clamp(24px, 2.8vw, 70px) auto 0 !important;
  max-width: var(--w-medium) !important;
  padding-left: clamp(15px, 1.4vw, 32px) !important;
  padding-right: clamp(15px, 1.4vw, 32px) !important;
}

/* --- Contact: ボタンと本文の間 --- */
.contact-body > .btn-arrow {
  margin-top: clamp(30px, 5.7vw, 140px) !important;
}

/* --- Access: 注意書きの上余白 --- */
#access p span.access-notice {
  margin-top: clamp(6px, 0.7vw, 16px) !important;
}

/* --- Archives: ページネーション周辺の余白 --- */
.archive-pagination {
  margin: clamp(20px, 2.8vw, 70px) 0 clamp(40px, 5.7vw, 140px) !important;
}
.archive-pagination .page-numbers {
  padding: clamp(6px, 0.6vw, 14px) clamp(10px, 1.0vw, 22px) !important;
  margin: 0 clamp(2px, 0.2vw, 5px) !important;
  font-size: var(--fs-body-sm) !important;
}

/* --- mapbox 内の余白（施設図 周辺）--- */
.mapbox-text-inner {
  margin-bottom: clamp(20px, 2.1vw, 60px) !important;
}
.mapbox .contactbox {
  margin-top: clamp(24px, 2.8vw, 70px) !important;
}
.mapbox-text-inner .tit + .txt,
.mapbox .txtbox .tit {
  /* タイトル→本文の間隔は #21 で margin: clamp 設定済み */
}

/* --- 施設詳細セクションの上下 padding（mapbox を含む親） --- */
#facility .facility-details {
  margin-bottom: clamp(30px, 3.6vw, 80px) !important;
}

/* --- Tips セクション: スタッフ subtit からその下までの間隔 --- */
#tips .staffbox .subtit {
  margin: clamp(30px, 3.6vw, 80px) auto clamp(20px, 2.14vw, 50px) !important;
  text-align: center;
  display: inline-block;
}
#tips .staffbox {
  text-align: center;
}
#tips .staffbox .personbox {
  text-align: left;
  margin-top: clamp(20px, 2.14vw, 50px) !important;
}

/* --- Floor plan: 施設図タブと拡大ボタンの上余白 --- */
.floorplan {
  margin-top: clamp(20px, 2.14vw, 50px) !important;
}
.floorplan-tabs {
  gap: clamp(6px, 0.6vw, 14px) !important;
  margin-bottom: clamp(10px, 1.0vw, 24px) !important;
}

/* --- 施設バッジ群の上下 margin --- */
.facility-badges {
  gap: clamp(5px, 0.5vw, 12px) !important;
  margin: clamp(12px, 1.3vw, 32px) 0 clamp(8px, 0.9vw, 20px) !important;
}

/* --- 各セクション h2 から最初のコンテンツまでの間 --- */
#about .leadbox,
#experience .leadbox,
.news-slider-wrap,
.faq-list,
.archive-grid {
  /* 共通: margin-top をやや広めに */
  margin-top: clamp(30px, 3.6vw, 80px) !important;
}

/* --- スライダー pagination の余白 --- */
.swiper-pagination-bullet {
  margin: 0 clamp(3px, 0.3vw, 8px) !important;
}

/* --- About 2枚写真: 左右 5% padding、写真間 gap を 1.3 倍に流動化 --- */
.about-images {
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box;
  gap: clamp(26px, 1.85vw, 56px) !important;  /* 元 20px → 1.3 倍以上、流動化 */
}

/* ====================================================================
   34. 本文テキストを日本語両端揃え（justify）に統一
   ──────────────────────────────────────────
   段落 p や説明文を text-align: justify に。
   見出し・ボタン・バッジなど中央寄せが効いている要素は除外。
   ==================================================================== */
.about-lead,
#about .leadbox .about-layout .txtbox p,
#experience .leadbox .about-layout .txtbox p,
.facility-detail-text,
.facility-detail-sm-text,
.mapbox .txtbox .txt,
.news-card-text,
.faq-a,
#access p,
.contact-body > p,
.post_inner .txtbox .titl,
.post_inner .txtbox .date,
.archive-grid .itembox .txtbox .titl,
#tips .leadbox .txtbox p,
#tips .inner .imgbox .txtbox .txt,
#tips .sumbox .itembox p,
#tips .staffbox .personbox .itembox .txt {
  text-align: justify !important;
  text-justify: inter-character;
  word-break: break-strict;
  line-break: strict;
}

/* --- News スライダー: 左右余白を 5% にして About と統一 --- */
.news-slider-wrap {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

/* ====================================================================
   32. 個別問題対応（フッター幅 / Contact 本文 / Archives 拡大 / Tips 本文 / スタッフ列幅）
   ==================================================================== */

/* --- 32-1. フッター内側コンテナを流動化（元: width 900px 固定）--- */
#footer .inner {
  width: auto !important;
  max-width: var(--w-medium) !important;
  padding-left: clamp(20px, 4.3vw, 100px) !important;
  padding-right: clamp(20px, 1.4vw, 36px) !important;
  font-size: var(--fs-body-sm) !important;
  box-sizing: border-box;
}
#footer .inner2 {
  margin-top: clamp(15px, 2.14vw, 50px) !important;
}
#footer .inner2 ul {
  margin-right: clamp(20px, 3.6vw, 80px) !important;
}

/* --- 32-2. Contact 本文の流動化（元: max-width 750px、font-size 14px 固定）--- */
.contact-body {
  max-width: var(--w-medium) !important;
  padding-left: clamp(15px, 1.4vw, 32px);
  padding-right: clamp(15px, 1.4vw, 32px);
  box-sizing: border-box;
}
.contact-body > p {
  font-size: var(--fs-body) !important;
  line-height: 1.8 !important;
}

/* --- 32-3. Archives（旧Reboot/post）を 1.2倍に拡大、流動化 --- */
/* 元: .post_inner width 900px、itembox 250px、imgbox 160px */
.post_inner {
  width: auto !important;
  max-width: var(--w-medium) !important;
  margin: clamp(30px, 3.6vw, 80px) auto 0 !important;
  padding-left: clamp(15px, 1.4vw, 32px);
  padding-right: clamp(15px, 1.4vw, 32px);
  box-sizing: border-box;
  left: 0 !important;
  gap: clamp(20px, 2.1vw, 56px) clamp(16px, 1.7vw, 44px) !important;
  justify-content: center;
}
.post_inner .itembox {
  width: clamp(240px, 21vw, 480px) !important;  /* 元 250px → 約1.2倍以上に */
  margin: 0 !important;
}
.post_inner .imgbox {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 3.2 !important;
}
.post_inner .imgbox .paraimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.post_inner .itembox .tagmark {
  height: clamp(70px, 6.4vw, 140px) !important;
}
.post_inner .txtbox {
  margin-top: clamp(20px, 2.3vw, 50px) !important;
}
.post_inner .txtbox .titl {
  font-size: var(--fs-body) !important;
  line-height: 1.5 !important;
}
.post_inner .txtbox .date {
  font-size: var(--fs-body-sm) !important;
}

/* --- 32-4. Tips セクション「宇宙船西里号」周辺の本文を流動化 --- */
/* 元の固定 font-size を全て clamp 化 */
#tips .inner .imgbox .txtbox .tit {
  font-size: var(--fs-h3) !important;
}
#tips .inner .imgbox .txtbox .sub {
  font-size: var(--fs-lead) !important;
  line-height: 1.6 !important;
}
#tips .inner .imgbox .txtbox .name {
  font-size: var(--fs-body) !important;
  margin-top: clamp(12px, 1.3vw, 30px) !important;
}
#tips .inner .imgbox .txtbox .txt {
  font-size: var(--fs-body) !important;
  line-height: 1.9 !important;
  margin-top: clamp(12px, 1.3vw, 30px) !important;
}

/* --- 32-5. スタッフ・プロジェクト事務局の 3 列をもう少し広く --- */
/* 元: 29% → 各列の幅を増やし、画像が大きく、テキスト行数が減るように */
#tips .staffbox .personbox {
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: clamp(16px, 2.1vw, 60px) !important;
}
#tips .staffbox .personbox .itembox {
  width: clamp(160px, 30%, 480px) !important;
  flex: 1 1 0;
  max-width: clamp(200px, 30%, 480px) !important;
}
/* スタッフ画像もそれに比例して大きく */
#tips .staffbox .personbox .itembox img {
  width: 100% !important;
  max-width: clamp(140px, 16vw, 400px) !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}
#tips .staffbox .personbox .itembox .name {
  font-size: var(--fs-body) !important;
  margin-top: clamp(10px, 1.0vw, 24px) !important;
  text-align: center;
}
#tips .staffbox .personbox .itembox .txt {
  font-size: var(--fs-body-sm) !important;
  line-height: 1.7 !important;
  margin-top: clamp(10px, 1.0vw, 24px) !important;
}
#tips .staffbox .personbox .itembox .posstion {
  font-size: var(--fs-small) !important;
}

/* ====================================================================
   35. ファイナル細部調整
   ──────────────────────────────────────────
   - 施設名 1.2倍、写真／囲み文字との余白を均等化
   - 「施設図」見出しを 90% に
   - Access 地図を拡大＋テキストを中央揃え
   - Contact 本文を中央揃え
   - Tips 本文右端をセクション本文右端に合わせる
   - Tips 4枚写真キャプションの流動化
   - スタッフ列のコンテンツ間隔・テキストボックス幅を拡張
   ==================================================================== */

/* --- 35-1. 施設名（facility-detail-sm-title）---
   1.2倍にし、写真からも下のバッジからも均等の余白を確保。
   画像 aspect-ratio 4:3 のため、カード幅の 3/4 = 画像高さ。
   その 5% ≒ カード幅の 3.75% 相当 → margin で確保 */
.facility-detail-sm-title {
  font-size: clamp(17px, 1.45vw, 34px) !important;   /* 元 14/1.21vw/28 の 1.2 倍 */
  margin-top: clamp(9px, 1.0vw, 24px) !important;    /* 元 14/1.5vw/36 の 2/3 */
  margin-bottom: clamp(6px, 0.7vw, 18px) !important;
  line-height: 1.4;
}
/* バッジ上部マージンも均等になるよう微調整（バッジは flex 自体で margin: 18px 0 12px が
   #14 で clamp 化済み。ここで上を 0 にしてタイトル margin-bottom と統合） */
.facility-detail-sm .facility-badges {
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 0.9vw, 20px) !important;
}

/* --- 35-2. 「施設図」見出し（mapbox tit）を 90% サイズに --- */
.mapbox .txtbox .tit {
  font-size: clamp(16px, 1.54vw, 36px) !important;   /* 元 18/1.71vw/40 の 90% */
}

/* --- 35-3. Access 地図のサイズアップと余白縮小 + テキスト中央揃え --- */
#access {
  padding-left: clamp(10px, 1.4vw, 40px) !important;
  padding-right: clamp(10px, 1.4vw, 40px) !important;
  box-sizing: border-box;
}
#access iframe {
  display: block;
  width: 100% !important;
  max-width: clamp(720px, 80vw, 1800px) !important;  /* 元 600px 固定から流動拡大 */
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: 0 auto !important;
  border: 0;
}
#access p {
  max-width: clamp(720px, 80vw, 1800px) !important;
  margin: clamp(16px, 1.8vw, 44px) auto 0 !important;
  text-align: center !important;
}

/* v3: ACCESS 案内テキスト（国道387号線ルート案内） */
#access p.access-info {
  line-height: 1.8;
  font-size: 15px;
  /* 案内文と施設情報の間に十分な余白 */
  margin-bottom: clamp(28px, 3.6vw, 56px) !important;
  /* SP でのはみ出し防止: 幅を親に合わせ、日本語の自然改行を保証 */
  max-width: 100% !important;
  padding: 0 12px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* .access-notice は既存 CSS で display: inline-block になっており、
   SPメディアクエリでは white-space: nowrap まで設定されているため
   .access-info 配下では明示的に上書きして自然に折り返させる */
#access p.access-info span.access-notice,
#access p.access-info span.access-notice * {
  white-space: normal !important;   /* SP メディアクエリの nowrap を上書き */
}
#access p.access-info span.access-notice {
  display: inline !important;
  margin-top: 0 !important;
  padding: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* 施設情報ブロックも SP はみ出し防止 */
#access .access-facility {
  max-width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* v3: ACCESS 施設情報ブロック（ロゴ + 営業時間 + 住所 + TEL） */
#access .access-facility {
  max-width: clamp(720px, 80vw, 1800px);
  margin: 0 auto;
  text-align: center;
}
#access .access-facility-logo {
  display: block;
  margin: 0 auto 14px;
  width: auto;
  height: clamp(38px, 4.4vw, 56px);   /* ロゴサイズ: SP 38px 〜 PC 56px */
}
#access .access-facility-hours,
#access .access-facility-address,
#access .access-facility-tel {
  margin: 4px 0 !important;
  font-weight: normal !important;   /* 太字にしない */
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: center !important;
}
#access .access-facility-tel a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #999;
  padding-bottom: 1px;
}
#access .access-facility-tel a[href^="tel:"]:hover {
  color: #D1722A;
  border-bottom-color: #D1722A;
}

/* --- 35-4. Contact 本文を中央揃え（34 の justify を上書き）--- */
.contact-body > p,
#contact .contact-body p,
#contact-sub .contact-body p {
  text-align: center !important;
  text-justify: auto !important;
}

/* --- 35-5. Tips 本文「宇宙船西里号」テキストの右端をセクション本文右端に合わせる ---
   元 CSS: width: 240px、margin-left: 40px で右余白がガラ空き。
   width: auto、margin-right を margin-left と同等にして両端を流動化 */
#tips .inner .imgbox .txtbox .txt {
  width: auto !important;
  max-width: none !important;
  margin-right: clamp(20px, 2.0vw, 56px) !important;
}
/* 同じ txtbox 内のサブ要素も右側に余裕を持って改行できるよう揃える */
#tips .inner .imgbox .txtbox .tit,
#tips .inner .imgbox .txtbox .sub,
#tips .inner .imgbox .txtbox .name {
  margin-right: clamp(20px, 2.0vw, 56px) !important;
}

/* --- 35-6. Tips 下部の 4 枚写真とキャプションを適切に流動化 ---
   元: 各 itembox max-width 14vw clamp 140-320 → やや小さい */
#tips .sumbox {
  padding-left: clamp(20px, 2.5vw, 70px) !important;
  padding-right: clamp(20px, 2.5vw, 70px) !important;
  gap: clamp(16px, 2.0vw, 56px) !important;
  justify-content: space-between !important;
}
#tips .sumbox .itembox {
  flex: 1 1 0 !important;
  max-width: clamp(160px, 19vw, 460px) !important;   /* 元 14vw / 320 → 拡大 */
}
#tips .sumbox .itembox img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
#tips .sumbox .itembox p {
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
  margin-top: clamp(8px, 0.9vw, 22px) !important;
}
#tips .sumbox .itembox p span {
  font-size: var(--fs-small) !important;
  display: block;
  margin-top: clamp(2px, 0.3vw, 8px);
}

/* --- 35-7. スタッフ・プロジェクト事務局: コンテンツ間隔とテキスト幅をさらに拡張 ---
   元 32-5: gap clamp(16-60)、itembox 30% → さらに広く */
#tips .staffbox .personbox {
  gap: clamp(28px, 3.2vw, 90px) !important;   /* 列間さらに広く */
}
#tips .staffbox .personbox .itembox {
  width: clamp(180px, 33%, 540px) !important;
  max-width: clamp(220px, 33%, 540px) !important;
}
/* 画像は中央配置のまま少し大きく */
#tips .staffbox .personbox .itembox img {
  max-width: clamp(160px, 17vw, 440px) !important;
}
/* 名前・本文・役職はテキストボックス幅いっぱいに */
#tips .staffbox .personbox .itembox .name,
#tips .staffbox .personbox .itembox .txt,
#tips .staffbox .personbox .itembox .posstion {
  width: 100% !important;
  max-width: 100% !important;
}

/* ====================================================================
   36. Background / Tips 全面再調整（v2）
   ──────────────────────────────────────────
   - Background 本文幅 80%
   - Tips 「持続可能性への手掛かり」見出し SVG を流動化
   - Tips 本文サイズを通常本文の 80%、テキストボックス幅 130%
   - Tips 本文＋左画像のグループを左右中央揃え
   - Tips 下部 4 枚画像と文字組の崩れを修正
   - スタッフ画像 1.2倍、左右余白、テキスト縮小／ボックス幅拡張
   ==================================================================== */

/* --- 36-1. Background 本文（リード）の幅を 80% に縮小 --- */
#tips .leadbox {
  max-width: clamp(580px, 64vw, 1680px) !important;   /* 元 var(--w-medium) の 80% */
}

/* --- 36-2. Tips 見出し「持続可能性への手掛かり」SVG を流動化 ---
   元 CSS: position: absolute, height: 45px, top: 70px, left: 40px 固定。
   absolute → 通常フローに変更し、本文と同じ左揃え＋罫線下にマージンを確保 */
#tips .inner .imgbox .txtbox h2 {
  position: static !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  padding-top: clamp(40px, 4.8vw, 110px) !important;
  margin: 0 0 clamp(20px, 2.0vw, 50px) clamp(20px, 1.8vw, 48px) !important;
}
#tips .inner .imgbox .txtbox h2 img {
  height: clamp(31px, 2.86vw, 70px) !important;   /* 元 clamp(28,2.6vw,64) の 110% */
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  /* display は指定しない（base の .pc / .sp の表示切替を生かす） */
}
/* PC 表示時は SP 用画像を明示的に非表示にする（共通の .sp ルールを高詳細度で再宣言） */
@media (min-width: 751px) {
  #tips .inner .imgbox .txtbox h2 img.sp { display: none !important; }
  #tips .inner .imgbox .txtbox h2 img.pc { display: block !important; }
}
@media (max-width: 750px) {
  #tips .inner .imgbox .txtbox h2 img.pc { display: none !important; }
  #tips .inner .imgbox .txtbox h2 img.sp { display: block !important; }
}

/* --- 36-3a. Tips 本文サイズを通常本文の 80% に --- */
#tips .inner .imgbox .txtbox .txt {
  font-size: clamp(11px, 0.91vw, 19px) !important;   /* var(--fs-body) の 80% */
  line-height: 1.9 !important;
}
/* リード文（タイトル "宇宙船西里号" + サブテキスト）は標準本文より大きくする
   ※ h2 を absolute → 通常フローに変更したため、margin-top の絶対オフセットは不要 */
#tips .inner .imgbox .txtbox .tit {
  font-size: var(--fs-h3) !important;     /* clamp(16,1.5vw,36) — 本文より大 */
  margin-top: 0 !important;
  margin-left: clamp(20px, 1.8vw, 48px) !important;
  line-height: 1.5 !important;
}
#tips .inner .imgbox .txtbox .sub {
  font-size: var(--fs-lead) !important;   /* clamp(15,1.4vw,32) — 本文より大 */
  margin-left: clamp(20px, 1.8vw, 48px) !important;
  line-height: 1.6 !important;
}
#tips .inner .imgbox .txtbox .name {
  font-size: clamp(11px, 0.91vw, 19px) !important;
  margin-left: clamp(20px, 1.8vw, 48px) !important;
}
/* 本文 .txt の左マージンも統一 */
#tips .inner .imgbox .txtbox .txt {
  margin-left: clamp(20px, 1.8vw, 48px) !important;
}

/* --- 36-3b. テキストボックス幅を 130% に拡張（40% → 52%、写真側 48%）--- */
#tips .inner .imgbox {
  display: flex !important;
  align-items: stretch !important;
}
#tips .inner .imgbox .imgflame {
  width: 48% !important;
  max-height: none !important;
  min-height: 0 !important;
}
#tips .inner .imgbox .txtbox {
  width: 52% !important;
}
/* 本文右マージンも左と同じくらい確保し、テキストボックスの右端まで使う */
#tips .inner .imgbox .txtbox .tit,
#tips .inner .imgbox .txtbox .sub,
#tips .inner .imgbox .txtbox .name,
#tips .inner .imgbox .txtbox .txt {
  margin-right: clamp(20px, 1.8vw, 48px) !important;
}

/* --- 36-4. Tips 本文＋左画像のグループを左右中央揃え ---
   .inner に左右 padding を入れて、グループの両端に均等な余白を確保 */
#tips .inner {
  max-width: clamp(800px, 88vw, 2000px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 3.0vw, 80px) !important;
  padding-right: clamp(20px, 3.0vw, 80px) !important;
  box-sizing: border-box;
}

/* --- 36-5. Tips 下部 4 枚画像と文字組の崩れを修正 ---
   元の base CSS: .sumbox width: 900px 固定 + .itembox width: 23% で
   itembox 実質 207px → キャプションが極端に細くなる崩れの原因 */
#tips .inner .sumbox {
  width: auto !important;
  max-width: 100% !important;
  margin: clamp(40px, 4.5vw, 120px) auto 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: clamp(16px, 2.0vw, 56px) !important;
}
#tips .inner .sumbox .itembox {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 calc(25% - clamp(16px, 2.0vw, 56px)) !important;
  min-width: 0 !important;
  text-align: center;
}
#tips .inner .sumbox .itembox img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
#tips .inner .sumbox .itembox p {
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
  margin-top: clamp(8px, 0.9vw, 22px) !important;
  text-align: center !important;       /* 34 の justify を上書き */
  text-justify: auto !important;
  word-break: normal !important;
  line-break: auto !important;
}
#tips .inner .sumbox .itembox p span {
  display: block;
  font-size: var(--fs-small) !important;
  margin-top: clamp(2px, 0.3vw, 8px) !important;
  position: static !important;
  line-height: 1.5 !important;
}

/* --- 36-6. スタッフ・プロジェクト事務局: 画像 1.2倍／余白／テキスト調整 --- */
#tips .staffbox {
  padding-left: clamp(30px, 4.0vw, 120px) !important;
  padding-right: clamp(30px, 4.0vw, 120px) !important;
}
/* base CSS の .personbox { width: 570px } 固定を上書き。
   ユーザー指定: 現在表示幅の 150%（570 × 1.5 ≒ 855px）を基準に流動化 */
#tips .staffbox .personbox {
  width: auto !important;
  max-width: clamp(720px, 64vw, 1500px) !important;
  margin: clamp(20px, 2.0vw, 50px) auto 0 !important;
  gap: clamp(28px, 3.2vw, 90px) !important;
}
/* テキストボックス幅をさらに拡張 */
#tips .staffbox .personbox .itembox {
  width: clamp(200px, 33%, 560px) !important;
  max-width: clamp(240px, 33%, 560px) !important;
}
/* 画像は前回の 80% に縮小（20.4vw → 16.3vw 相当）。名称・本文・itembox 幅は据え置き */
#tips .staffbox .personbox .itembox img {
  max-width: clamp(150px, 16.3vw, 416px) !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
/* 名称・本文は適度なサイズに縮小 */
#tips .staffbox .personbox .itembox .name {
  font-size: clamp(13px, 1.07vw, 22px) !important;     /* 元 var(--fs-body) の約 90% */
  margin-top: clamp(10px, 1.0vw, 24px) !important;
  text-align: center;
}
#tips .staffbox .personbox .itembox .txt {
  font-size: clamp(11px, 0.93vw, 19px) !important;     /* 元 var(--fs-body-sm) の約 85% */
  line-height: 1.7 !important;
  margin-top: clamp(10px, 1.0vw, 24px) !important;
}

/* --- 37. ページ最後の Contact セクションを白背景に
   （元: #F7F7F5。#contact-sub は FAQ 下なのでそのまま）--- */
#contact {
  background-color: #fff !important;
}

/* --- 40. TOMOS/コワーキング 全幅 85% + 施設図 左揃え --- */
/* 40-1. TOMOS と コワーキングの facility-detail-lg を親 (.facility-details) の 85% 幅に */
@media (min-width: 751px) {
  .facility-detail-lg {
    max-width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* 40-2. 施設図 (.mapbox) の見出し・本文を サテライトオフィス と同じ左揃え位置に。
   .mapbox を .facility-details と同じ幅にし、テキストブロックを左寄せ。
   サテライトオフィス（小カード 1 列目）のテキストは .facility-details 左端 + 5%（カード幅基準）
   からスタートしているため、それと同じ位置に来るよう padding-left を計算 */
.mapbox {
  max-width: clamp(720px, 88vw, 2100px) !important;
  padding-left: clamp(20px, 1.4vw, 40px) !important;
  padding-right: clamp(20px, 1.4vw, 40px) !important;
  margin: clamp(45px, 5.4vw, 120px) auto 0 !important;   /* 施設図上の余白 1.5倍 */
  box-sizing: border-box;
}
.mapbox .txtbox {
  text-align: left !important;
  width: 100% !important;
}
.mapbox-text-inner {
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(12px, 1.3vw, 30px) !important;   /* サテライトオフィス text-left に合わせる */
  padding-right: 0 !important;
  text-align: left !important;
}
/* お問い合わせボタンは中央のまま */
.mapbox .contactbox {
  text-align: center !important;
}

/* --- 39. 施設 3 列グリッドの等幅強制 ---
   元 CSS: grid-template-columns: repeat(3, 1fr)。
   1fr は内容の min-content がコラム最小幅となるため、コミュニティルーム/キッズルームなど
   長い見出しがある列が広がってしまう。minmax(0, 1fr) で min-width を 0 に固定し、
   コンテンツが何であっても 3 列を常に等幅にする */
.facility-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* SP 時の 2 列レイアウトも同じ理由で等幅化 */
@media (max-width: 750px) {
  .facility-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- 38. Archives サムネの記者名（.upper）位置を流動化 ---
   元 CSS: position: absolute, top: 167px 固定。
   itembox 幅が clamp(240, 21vw, 480) に拡大されたことで画像高も伸び、
   167px だと画像の中ほどに被ってしまうため、画像の真下に来るよう流動化。
   画像 width × (3.2/5) ≒ 画像高 → top をその下＋小ギャップに設定 */
.post_inner .upper {
  top: clamp(165px, 14.0vw, 320px) !important;   /* 画像下〜タイトル上の帯 */
}
/* タイトルが .upper と被らないよう、txtbox の上マージンを十分に確保 */
.post_inner .txtbox {
  margin-top: clamp(45px, 4.3vw, 100px) !important;
}

/* ====================================================================
   33. スマホ専用レイアウト（〜750px）
   ──────────────────────────────────────────
   PC では横並び、スマホでは縦積みに切替が必要なセクションを定義。
   既存モバイル CSS を !important で上書き。
   ==================================================================== */
@media (max-width: 750px) {
  /* --- 33-1. Background: ロゴ上、本文下に縦積み＋本文全幅 --- */
  /* 既存モバイル CSS の margin-bottom:-50px が下の画像と重なる原因のため打ち消し */
  #tips .leadbox {
    margin-bottom: 40px !important;
  }
  #tips .leadbox .txtbox {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    margin-bottom: 0 !important;
  }
  #tips .leadbox .txtbox img {
    width: 200px !important;
    max-width: 60% !important;
  }
  #tips .leadbox .txtbox p {
    width: 100% !important;
    text-align: left;
    margin-bottom: 0 !important;
  }
  /* 下に続く .inner(ドーム画像) との適切な間隔を確保 */
  #tips .inner {
    margin-top: 30px !important;
  }

  /* --- 33-2. スタッフ・プロジェクト事務局: 縦積み・画像 1.1 倍・本文全幅 --- */
  #tips .staffbox .personbox {
    flex-direction: column !important;
    align-items: center !important;
    gap: 50px !important;
  }
  #tips .staffbox .personbox .itembox {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center;
  }
  /* 画像は中央配置で 1.1 倍 */
  #tips .staffbox .personbox .itembox img {
    /* 既存スマホは画像幅が暗黙でほぼ contained。ここで明示的に 1.1 倍化 */
    width: auto !important;
    max-width: clamp(180px, 50vw, 320px) !important;  /* 元の 1.1 倍相当 */
    margin: 0 auto !important;
    display: block !important;
  }
  /* 名前と本文は全幅、左寄せの方が読みやすい */
  #tips .staffbox .personbox .itembox .name,
  #tips .staffbox .personbox .itembox .txt,
  #tips .staffbox .personbox .itembox .posstion {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  #tips .staffbox .personbox .itembox .name {
    margin-top: 16px !important;
    font-size: 16px !important;
  }
  #tips .staffbox .personbox .itembox .txt {
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* --- 33-3. Archives (.post_inner) を 2 列レイアウトに --- */
  /* セクション 32-3 の clamp(240px, ...) min が SP で 1 列化させていたため上書き */
  .post_inner {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .post_inner .itembox {
    width: 47% !important;
    max-width: 47% !important;
    margin: 0 0 24px !important;
  }
  .post_inner .imgbox {
    aspect-ratio: 5 / 3.5 !important;
    border-radius: 10px;
  }
  /* タグマーク（イベント告知などの円バッジ）はカードサイズに合わせて縮小 */
  .post_inner .itembox .tagmark {
    height: clamp(55px, 16vw, 75px) !important;
    top: -10px !important;
    right: -10px !important;
  }
  /* タイトルなどのテキスト位置（.upper の負マージン補正） */
  .post_inner .txtbox {
    margin-top: 16px !important;
    width: 100% !important;
  }
  .post_inner .upper {
    top: 0 !important;
    margin-top: 4px !important;
    width: 100% !important;
  }
  .post_inner .txtbox .titl {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .post_inner .txtbox .date {
    font-size: 12px !important;
  }

  /* --- 33-4. Tips セクション (#tips .inner) を縦積み・全幅化 + 画像縦長 + 文字 1.3 倍 ---
     PC では画像 48% + テキスト 52% の横並び。SP では縦積み + 100% 幅。
     画像は標準左右余白あり + 少し縦長のトリミング (4/5)。
     見出し・リード文は現在の 1.3 倍サイズに拡大、左揃え。 */
  #tips .inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #tips .inner .imgbox {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  #tips .inner .imgbox .imgflame {
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;     /* 少し縦長 */
    border-radius: 4px;
    overflow: hidden;
  }
  #tips .inner .imgbox .txtbox {
    width: 100% !important;
    padding: 0 !important;             /* imgbox 側で左右余白を持つため reset */
    box-sizing: border-box !important;
    text-align: left !important;
  }
  /* h2「Tips 持続可能性への手掛かり」— position absolute を解除して左揃えに */
  #tips .inner .imgbox .txtbox h2 {
    position: static !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding-top: 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
  }
  /* SP 版 SVG (h2_tips_sp.svg) は内部で「Tips」文字が x=99 に配置されており
     右にずれて見えるため、SP でも PC 版 SVG (h2_tips.svg) を使う */
  #tips .inner .imgbox .txtbox h2 img.pc {
    display: block !important;
  }
  #tips .inner .imgbox .txtbox h2 img.sp {
    display: none !important;
  }
  #tips .inner .imgbox .txtbox h2 img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: 40px !important;            /* 元 31px 相当 × 1.3 */
  }
  /* リード文「宇宙船西里号」と「山村の子供たちに...」を全て同じサイズ・同じ行間で左揃えに */
  /* h2 を static にしたので .tit の 160px の clearing margin を解除 */
  #tips .inner .imgbox .txtbox .tit,
  #tips .inner .imgbox .txtbox .sub {
    font-size: 22px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;       /* .tit/.sub 共に同じ weight に */
    margin: 0 !important;              /* 全方向 0 にして line-height で行間統一 */
    text-align: left !important;
  }
  /* .updown の内部 span にも font-size を継承させる（フレックス子要素の確実な反映） */
  #tips .inner .imgbox .txtbox .tit.updown span,
  #tips .inner .imgbox .txtbox .sub.updown span {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
  #tips .inner .imgbox .txtbox .name,
  #tips .inner .imgbox .txtbox .txt {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  /* Tips 本文（木島安史氏…）を背景セクション本文 (~13px) より少し小さく */
  #tips .inner .imgbox .txtbox .txt {
    font-size: 12px !important;
    line-height: 1.85 !important;
  }

  /* --- 33-4b. Tips 下部 4 枚画像を 2 行 2 列に配置 ---
     PC では 4 列横並び。SP では狭くなりすぎてキャプションが破綻するため 2x2 に。
     キャプションは写真に近づけ、長い URL 風文字列が画像幅をはみ出さないよう調整。*/
  #tips .inner .sumbox {
    display: flex !important;
    flex-wrap: wrap !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 24px 4% !important;          /* 行間 24px、列間 4% */
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }
  #tips .inner .sumbox .itembox {
    width: 48% !important;             /* 2列レイアウト（gap 4% 込み） */
    max-width: 48% !important;
    flex: 0 0 48% !important;
    min-width: 0 !important;
  }
  #tips .inner .sumbox .itembox img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 4px;
  }
  #tips .inner .sumbox .itembox p {
    margin-top: 6px !important;        /* 写真にぐっと近づける */
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    /* 長い English 文字列（User:Eberhard_von_Nellenburg 等）が写真幅を超えないように */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto;
  }
  #tips .inner .sumbox .itembox p span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    color: #555;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* --- 33-4c. ドロワーメニュー幅を SP 用に拡張 ---
     旧: clamp(280px, 26vw, 480px) → SP で 280px に固定され、
         「シェアキッチン空き状況カレンダー」「コワーキング空き状況カレンダー」が
         「ダー」だけ改行されてしまっていた。
     新: SP では viewport の 92% 幅（最大 380px）にして長い項目も 1 行で収まるように。*/
  .drawer-nav {
    width: 92vw !important;
    max-width: 380px !important;
    min-width: 320px !important;
    padding-left: 24px !important;
    padding-right: 20px !important;
  }
  /* --- 33-4d. ドロワー項目間の余白を拡張 + 控えめな区切り線 ---
     旧: 上下 12px → 詰まって見える / 誤タップしやすい
     新: 上下 18px + 薄グレー細線で項目を区切り、視認性とタップ精度を向上 */
  .drawer-nav li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .drawer-nav li:last-child {
    border-bottom: none;
  }
  .drawer-nav a,
  .drawer-nav li.drawer-sub a {
    padding: 18px 0 !important;
  }
  .drawer-nav li.drawer-sub .drawer-icon {
    margin-right: 8px;
  }

  /* --- 33-5. スタッフ・プロジェクト事務局: 名称を中央揃え、本文は左揃えのまま --- */
  #tips .staffbox .personbox .itembox .name {
    text-align: center !important;
  }

  /* --- 33-6. Contact セクションの段組崩れ修正 ---
     PC 用 <br> 強制改行 + 中央寄せが SP で変な段組になっていたため、
     SP では <br> を無効化 + 標準左右余白 + ボタン中央寄せに整える。
     ボタン本体は元の inline-block 構造を保つ（inline-flex は崩れの原因） */
  #contact,
  #contact-sub {
    text-align: center !important;
  }
  .contact-body {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .contact-body > p,
  #contact .contact-body p,
  #contact-sub .contact-body p {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  /* SP では <br> 強制改行は不要 */
  .contact-body > p br,
  #contact .contact-body p br,
  #contact-sub .contact-body p br {
    display: none !important;
  }
  /* お問い合わせボタンは元の inline-block + 中央寄せに（inline-flex は崩れる） */
  .contact-body > .btn-arrow {
    display: inline-block !important;
    margin: 24px auto 0 !important;
  }
}

/* ==========================================================
   btn-arrow ボタン下罫線の改修（PC + SP 共通）
   旧: .btn-arrow::after { width: 100% } → ボタン幅 (70vw / padding 込み) 全幅で
      右端まで罫線が延びる
   新: .btn-arrow-inner の border-bottom に切替 + inline-flex でコンテンツ幅に揃える
   ========================================================== */
.btn-arrow-inner {
  /* display: flex (block-level) は親幅いっぱい広がるため、
     inline-flex に変更してコンテンツ実幅に揃える */
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding-right: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bbb;
  transition: padding-bottom 0.3s ease, border-bottom-color 0.3s ease;
}
.btn-arrow:hover .btn-arrow-inner {
  padding-bottom: 2px;
  border-bottom-color: #999;
}
/* 既存の ::after 罫線（全幅版）は無効化 */
.btn-arrow::after,
.btn-arrow:hover::after {
  display: none !important;
}

/* ==========================================================
   Archives 「Read more」ボタン下の余白
   ========================================================== */
#reboot .morebox,
#post .news-morebox {
  padding-bottom: 60px !important;     /* ボタン下にゆとり */
}
@media (max-width: 750px) {
  #reboot .morebox,
  #post .news-morebox {
    padding-bottom: 40px !important;
  }

  /* ----------------------------------------------------------
     SP: 全ての罫線ボタンを中央配置に統一
     旧: .btn-arrow { width: 70vw } + 親コンテナごとに違う配置 → バラバラ
     新: .btn-arrow を content-width に + 親コンテナを text-align: center 統一
     ---------------------------------------------------------- */
  .btn-arrow {
    width: auto !important;
  }
  /* Archives「Read more」(L712: #reboot .morebox) */
  #reboot .morebox,
  #post .news-morebox {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* News スライダー「Read more」(L313: .news-morebox) - 念のため別指定 */
  .news-morebox,
  .morebox {
    text-align: center !important;
  }
  /* 施設詳細「Calendar」ボタン (TOMOS / コワーキング) */
  .facility-detail-calendar {
    text-align: center !important;
  }
  /* 各「Contact」ボタンの親コンテナ */
  .contactbox,
  #experience .contactbox,
  .mapbox .contactbox {
    text-align: center !important;
  }
  /* About「Movie」ボタン */
  #about .about-movie-wrap,
  .about-movie-wrap {
    text-align: center !important;
  }
}

/* ▲▲▲ PC 全画面 流動スケーリング ブロック ここまで ▲▲▲ */

/* ==========================================================
   A11y: モーション抑制（OS設定で「視差効果を減らす」の人へ配慮）
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   A11y: スクリーンリーダー専用テキスト
   視覚的には非表示だが、スクリーンリーダーには読み上げられる
   ========================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   A11y: グローバル focus-visible スタイル
   キーボード Tab で操作するユーザーが現在のフォーカス位置を
   見失わないように、すべての対話要素に共通のフォーカスリングを付与。
   マウスクリックでは表示されない（focus-visible 仕様）。
   ========================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
details summary:focus-visible {
  outline: 2px solid #D1722A;
  outline-offset: 2px;
  border-radius: 2px;
}
/* モーダル系・タブ系はオフセットを少し詰めて違和感を減らす */
.cal-tab:focus-visible,
.floorplan-tab:focus-visible,
.cal-modal-close:focus-visible,
.floorplan-zoom-btn:focus-visible {
  outline-offset: 0;
}
/* リンクが画像のみのとき（SNS アイコン等）はリングをアイコンの周りに */
.drawer-sns a:focus-visible,
.header-sns a:focus-visible {
  outline-offset: 4px;
  border-radius: 50%;
}