@charset "UTF-8";
/*
 * ======================================
 * さわふじみらいホール（西原町 町民交流センター）site.css
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .swf-util*        - ヘッダー上部ユーティリティバー（営業時間・SNS）
 * .swf-header*      - stickyヘッダー（半透明白・blur・ロゴ・ナビ・電話CTA）
 * .swf-nav*         - PC横並びナビ（現在ページ=緑pill）＋赤グラデ電話ボタン
 * .swf-spnav-tel    - SPナビ下部の電話ボタン
 * .swf-footer*      - 緑背景フッター（3カラム＋コピーライト）
 * .swf-hero*        - TOPメインビュー（クロスフェード＋ドット）
 * .swf-eyebrow      - 英語ラベル（Lexend・緑・字間広め）
 * .swf-h2 / .swf-lead - セクション見出し・リード文
 * .swf-wrap*        - 幅制限＋左右clampパディングのラッパー
 * .swf-pad*         - 上下clampパディング
 * .swf-btn*         - ボタン（緑グラデ / 赤グラデ / 白 / ゴースト）
 * .swf-barhead*     - 左に緑の縦バーが付く小見出し
 * .swf-news*        - TOPお知らせ（左見出し＋右リスト）
 * .swf-fac-card*    - 施設概要カード（画像＋緑キャプション）
 * .swf-ctacard*     - 2大CTAカード（アイコン＋角丸矢印）
 * .swf-info*        - 総合インフォメーション（定義リスト）
 * .swf-map*         - 地図プレースホルダ
 * .swf-pagehead*    - 下層ページヒーロー帯
 * .swf-faclist*     - 施設紹介の各施設ブロック
 * .swf-flow*        - ご利用の流れ ステップ
 * .swf-form*, .fld  - 申請・お問い合わせフォーム
 * .fee-table, .scroll-hint - 施設使用料テーブル
 * .swf-note*        - 注記ボックス
 * .swf-dl*          - 申請書ダウンロードカード
 * .swf-submit*      - 提出方法カード
 * .swf-contact*     - お問い合わせ電話/FAXボックス
 * .swf-cmsform      - CMSフォーム(cms_ajax)埋め込みカード枠
 * .swf-blog*        - お知らせ一覧（2カラム：記事リスト＋サイドバー）
 * .swf-blogcard*    - お知らせ一覧の記事カード
 * .swf-cat*         - カテゴリバッジ
 * .swf-side*        - サイドバー（カテゴリ・月別アーカイブ）
 * .swf-article*     - お知らせ詳細（記事本文）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 * ・装飾パターン不足：上部ユーティリティバー、半透明blurヘッダー、
 *   現在ページを緑pillで示すシングルラインナビは共通ヘッダー（EN+JA2段）と
 *   構造が異なるためサイト固有で実装。
 * ・構造不足：TOPお知らせの「左見出し＋右カードリスト」複合レイアウト。
 * ・値の粒度不足：clamp()ベースの流体パディング／フォントサイズ（デザイン準拠）。
 */

:root {
  --swf-g: #7fab17;        /* ブランドグリーン */
  --swf-g-bright: #90bf1a; /* 明るいグリーン（ラベル・グラデ上端） */
  --swf-g-dark: #6f9714;   /* 濃いグリーン（リンク・見出し） */
  --swf-g-deep: #5f8a2c;   /* グラデ下端 */
  --swf-red: #ed5960;
  --swf-red-dark: #d13f56;
  --swf-txt: #2b2f24;
  --swf-ink: #3a3f30;
  --swf-muted: #5c6552;
  --swf-light: #8b937f;
  --swf-line: #e7eadd;
  --swf-line2: #ececec;
  --swf-sec: #f6f8ef;
  --swf-sec2: #f4f7ea;
  --swf-pale: #fafcf3;
  --swf-chip: #eef5da;
}

/* ---------- base ---------- */
body {
  color: var(--swf-txt);
  background: #fff;
  line-height: 1.85;
  letter-spacing: .02em;
}
::selection { background: #d7ea9a; color: var(--swf-txt); }
main { display: block; }
img { max-width: 100%; }

/* ==========================================================================
   ラッパー / 余白ユーティリティ（clamp）
   ========================================================================== */
.swf-wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(16px,4vw,32px); padding-right: clamp(16px,4vw,32px); }
.swf-wrap--1100 { max-width: 1100px; }
.swf-wrap--1000 { max-width: 1000px; }
.swf-wrap--900 { max-width: 900px; }
.swf-wrap--760 { max-width: 760px; }
.swf-wrap--640 { max-width: 640px; }

.swf-pad { padding-top: clamp(48px,7vw,84px); padding-bottom: clamp(48px,7vw,84px); }
.swf-pad--lg { padding-top: clamp(52px,7vw,90px); padding-bottom: clamp(52px,7vw,90px); }
.swf-pad--sm { padding-top: clamp(44px,6vw,64px); padding-bottom: clamp(44px,6vw,64px); }
.swf-pad-t { padding-top: clamp(44px,6vw,64px); }

/* ==========================================================================
   共通：英語ラベル・見出し・リード
   ========================================================================== */
.swf-eyebrow {
  margin: 0;
  font-family: "Lexend", sans-serif;
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--swf-g-bright);
  font-weight: 700;
}
.swf-eyebrow--light { color: #b9d861; }
.swf-eyebrow--pale { color: #d5ec8f; }

.swf-h2 {
  margin: 8px 0 14px;
  font-size: clamp(24px,3.4vw,34px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}
.swf-h2--sm { font-size: clamp(22px,3vw,30px); }
.swf-h2--white { color: #fff; }

.swf-lead {
  margin: 0;
  font-size: 15px;
  color: var(--swf-muted);
  line-height: 1.95;
}
.swf-lead--sm { font-size: 14.5px; }

.swf-center { text-align: center; }
.swf-sechead { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 46px; }
.swf-sechead--sm { margin-bottom: 36px; }
.swf-sechead .swf-lead { margin-top: 0; }
.swf-h2--flush { margin-bottom: 0; }
.swf-h2--mb24 { margin-bottom: 24px; }

/* リード文・レイアウト微調整ヘルパー */
.swf-lead--center { max-width: 720px; margin-left: auto; margin-right: auto; }
.swf-intro { max-width: none; }
.swf-intro--mb-lg { margin-bottom: clamp(40px,6vw,68px); }
.swf-intro--mb-md { margin-bottom: clamp(36px,5vw,52px); }
.swf-intro--mb-sm { margin-bottom: clamp(32px,4vw,44px); }
.swf-mt-cards { margin-top: 38px; }
.swf-mt-btn { margin-top: 28px; }
.swf-mb-14 { margin-bottom: 14px; }
.swf-pad--56 { padding-top: clamp(40px,5vw,56px); padding-bottom: clamp(40px,5vw,56px); }
.swf-btn--xs { padding: 11px 18px; font-size: 13.5px; }

/* 左緑バー付き小見出し */
.swf-barhead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.swf-barhead__mark { flex: none; width: 5px; height: 22px; background: var(--swf-g-bright); border-radius: 2px; display: inline-block; }
.swf-barhead__title { margin: 0; font-size: clamp(19px,2.4vw,24px); font-weight: 700; letter-spacing: .04em; }

/* ==========================================================================
   ボタン
   ========================================================================== */
.swf-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.swf-btn i { font-size: 15px; line-height: 1; }
.swf-btn:hover { transform: translateY(-2px); }
.swf-btn--green { background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-dark)); color: #fff; box-shadow: 0 6px 18px rgba(144,191,26,.28); }
.swf-btn--red { background: linear-gradient(135deg,var(--swf-red),var(--swf-red-dark)); color: #fff; box-shadow: 0 6px 18px rgba(237,89,96,.28); }
.swf-btn--white { background: #fff; color: var(--swf-g-dark); }
.swf-btn--ghost { background: #fff; border: 1.5px solid #dfe4d2; color: var(--swf-ink); }
.swf-btn--lg { padding: 15px 30px; font-size: 15px; }

.swf-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--swf-g-dark); text-decoration: none; font-weight: 600; font-size: 13.5px;
  transition: opacity .2s ease;
}
.swf-textlink i { font-size: 13px; }
.swf-textlink:hover { opacity: .7; }
/* 角丸枠線付きテキストリンク（「一覧を見る」等） */
.swf-textlink--framed { padding: 10px 22px; border: 1px solid #dfe4d2; border-radius: 8px; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.swf-textlink--framed:hover { opacity: 1; background: var(--swf-sec2); border-color: var(--swf-g-bright); }

/* ==========================================================================
   ユーティリティバー
   ========================================================================== */
.swf-util { display: none; background: var(--swf-sec2); border-bottom: 1px solid #e7e9de; }
.swf-util__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 7px clamp(16px,4vw,32px);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--swf-muted);
}
.swf-util__info { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.swf-util__hours { display: inline-flex; align-items: center; gap: 6px; }
.swf-util__hours i { color: #7ba22a; font-size: 13px; }
.swf-util__links { display: flex; gap: 16px; align-items: center; }
.swf-util__access { display: inline-flex; align-items: center; gap: 5px; color: var(--swf-muted); text-decoration: none; }
.swf-util__access i { font-size: 12px; }
.swf-util__access:hover { color: var(--swf-g-dark); }
.swf-util__sns { display: flex; gap: 11px; align-items: center; }
.swf-util__sns a { color: var(--swf-light); text-decoration: none; display: inline-flex; transition: color .2s ease; }
.swf-util__sns i { font-size: 15px; }
.swf-util__sns a:hover { color: var(--swf-g-dark); }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.swf-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #eceee4;
  box-shadow: 0 4px 20px rgba(40,55,15,.06);
}
.swf-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 12px clamp(16px,4vw,32px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px;
}
.swf-header__logo {
  font-weight: 700; font-size: 21px; letter-spacing: .04em;
  color: var(--swf-txt); text-decoration: none; flex-shrink: 0;
}
.swf-nav { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.swf-nav__link {
  padding: 9px 13px; border-radius: 4px; text-decoration: none;
  font-size: 14px; color: var(--swf-ink); font-weight: 500;
  transition: all .2s ease;
}
.swf-nav__link:hover { background: var(--swf-sec2); color: var(--swf-g-dark); }
.swf-nav__link.is-current { color: var(--swf-g-dark); background: var(--swf-sec2); font-weight: 700; }
.swf-nav__tel {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 4px;
  background: linear-gradient(135deg,var(--swf-red),var(--swf-red-dark));
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px;
  box-shadow: 0 4px 12px rgba(237,89,96,.3);
  transition: transform .2s ease;
}
.swf-nav__tel i { font-size: 13px; }
.swf-nav__tel:hover { transform: translateY(-1px); }

/* PC1100px以下：横並びナビ・電話を隠しハンバーガー（.nav-toggle）に切替 */
@media (max-width: 1100px) {
  .swf-nav { display: none; }
  /* ハンバーガー表示時は画面右下のページトップ矢印を非表示 */
  .page-top { display: none; }
}

/* SPナビ下部の電話ボタン */
.swf-spnav-tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 1.8rem; font-weight: 700; text-decoration: none;
}
body.is-nav-open { overflow: hidden; }

/* ==========================================================================
   フッター
   ========================================================================== */
.swf-footer { background: var(--swf-g); color: #fff; }
.swf-footer__inner { max-width: 1200px; margin: 0 auto; padding: clamp(44px,6vw,64px) clamp(16px,4vw,32px); }
.swf-footer__cols { display: flex; flex-wrap: wrap; gap: 36px 48px; justify-content: space-between; }
.swf-footer__brand { flex: 1 1 300px; max-width: 400px; }
.swf-footer__name { margin: 0 0 16px; font-weight: 700; font-size: 15.5px; color: #fff; }
.swf-footer__addr { margin: 0 0 18px; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.85); }
.swf-footer__sns { display: flex; gap: 10px; }
.swf-footer__sns a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; background: rgba(255,255,255,.18); color: #fff; text-decoration: none; transition: background .2s ease; }
.swf-footer__sns i { font-size: 16px; }
.swf-footer__sns a:hover { background: rgba(255,255,255,.3); }
.swf-footer__group { flex: 1 1 180px; }
.swf-footer__label { margin: 0 0 14px; font-family: "Lexend", sans-serif; font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.8); font-weight: 700; }
.swf-footer__links { display: flex; flex-direction: column; gap: 11px; }
.swf-footer__links a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 13.5px; transition: opacity .2s ease; }
.swf-footer__links a:hover { opacity: .7; }
.swf-footer__hours { margin: 0; font-size: 13.5px; line-height: 1.95; color: rgba(255,255,255,.85); }
.swf-footer__cta {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 4px; background: #fff; color: var(--swf-g-dark);
  text-decoration: none; font-weight: 700; font-size: 13.5px; transition: transform .2s ease;
}
.swf-footer__cta i { font-size: 12px; }
.swf-footer__cta:hover { transform: translateY(-2px); }
.swf-footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28); text-align: center; font-size: 12px; color: rgba(255,255,255,.8); }
.swf-footer__bottom span { font-family: "Lexend", sans-serif; letter-spacing: .05em; }

/* ==========================================================================
   ページトップボタン（common .page-top を微調整）
   ========================================================================== */
.page-top { opacity: 0; visibility: hidden; transition: opacity .3s ease; }
.page-top.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   TOP：メインビュー
   ========================================================================== */
.swf-hero { position: relative; width: 100%; height: 100vh; min-height: 520px; display: flex; align-items: flex-end; isolation: isolate; }
.swf-hero__stack { position: absolute; inset: 0; overflow: hidden; background: #5f7a2c; }
/* §10.1 メインビュー：静止画（.swiper-slide）／CMS差し替え後（#cms-slider-1-1-area）とも同じ高さで敷く */
#slideshow .swiper-slide,
#slideshow .main_slider__inner,
#cms-slider-1-1-area,
#cms-slider-1-1-area .swiper,
#cms-slider-1-1-area .swiper-wrapper,
#cms-slider-1-1-area .swiper-slide { width: 100%; height: 100%; }
#slideshow .main_slider__inner img,
#cms-slider-1-1-area img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swf-hero__scrim { z-index: 1; }
.swf-hero__slide {
  position: absolute; inset: 0;
  background-color: #5f7a2c; background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transform: scale(1);
  transition: opacity 1.4s ease, transform 7s ease;
}
.swf-hero__slide.is-active { opacity: 1; transform: scale(1.05); }
.swf-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(15,24,6,.22) 0%,rgba(15,24,6,.10) 40%,rgba(15,24,6,0) 75%), linear-gradient(180deg,rgba(15,24,6,.04) 0%,rgba(15,24,6,0) 45%,rgba(15,24,6,.18) 100%); }
.swf-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px) clamp(104px,17vh,184px); text-align: left; }
/* キャッチ背景：ベースカラー（半透明）を行ごとに敷く（改行位置で背景も分割） */
.swf-hero__panel { display: inline-block; max-width: 100%; }
.swf-hero__en {
  display: table; max-width: 100%;
  background: rgba(237,89,96,.8); border-radius: 3px; padding: .35em .7em;
}
.swf-hero__title { line-height: 1.35; max-width: 100%; }
/* タイトルは行ごとに独立した背景（要素を分けて確実に重ならないようにする） */
.swf-hero__titleline {
  display: table; max-width: 100%;
  background: rgba(127,171,23,1); border-radius: 3px; padding: .1em .42em;
}
.swf-hero__titleline + .swf-hero__titleline { margin-top: .3em; }
/* キャッチのアニメーション（フェードイン＋スライドアップ・段階表示） */
@keyframes swfCatchIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.swf-hero__en { animation: swfCatchIn .7s cubic-bezier(.2,.7,.2,1) .15s both; }
.swf-hero__titleline { animation: swfCatchIn .75s cubic-bezier(.2,.7,.2,1) both; }
.swf-hero__titleline:nth-child(1) { animation-delay: .35s; }
.swf-hero__titleline:nth-child(2) { animation-delay: .52s; }
@media (prefers-reduced-motion: reduce) {
  .swf-hero__en, .swf-hero__titleline { animation: none; }
}
/* CMSスライダーをヒーロー高さぴったりに（下に緑背景の帯が出ないように） */
body #main_slider.slider_wrapper { --swiper-wrapper-height: 100%; height: 100%; }
.swf-hero__en { margin: 0 0 14px; color: #eaf3cf; font-family: "Lexend", sans-serif; font-size: 12.5px; letter-spacing: .32em; font-weight: 600; text-transform: uppercase; }
.swf-hero__title { margin: 0; color: #fff; font-weight: 700; font-size: clamp(20px,5vw,52px); line-height: 1.4; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(10,18,4,.55), 0 1px 30px rgba(10,18,4,.4); }
.swf-hero__dots { position: absolute; z-index: 2; right: clamp(16px,4vw,32px); bottom: clamp(48px,8vh,80px); display: flex; gap: 8px; }
.swf-hero__dot { height: 4px; width: 12px; border-radius: 2px; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,.5); transition: all .4s ease; }
.swf-hero__dot.is-current { width: 30px; background: #fff; }

/* ==========================================================================
   TOP：お知らせ
   ========================================================================== */
.swf-news { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; }
.swf-news__head { flex: 0 0 auto; min-width: 180px; max-width: 220px; }
.swf-news__head .swf-eyebrow { font-size: 13px; letter-spacing: .28em; }
.swf-news__head h2 { margin: 6px 0 0; font-size: clamp(22px,3vw,28px); font-weight: 700; letter-spacing: .06em; }
.swf-news__desc { margin: 10px 0 0; font-size: 13px; color: var(--swf-light); }
.swf-news__list { flex: 1 1 460px; }
.swf-news__item { display: flex; gap: 20px; padding: 20px 6px; border-top: 1px solid var(--swf-line2); text-decoration: none; color: inherit; transition: background .2s ease; }
.swf-news__list .swf-news__item:last-child { border-bottom: 1px solid var(--swf-line2); }
.swf-news__item:hover { background: var(--swf-pale); }
.swf-news__thumb { flex: 0 0 auto; width: 148px; height: 96px; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-deep)); }
.swf-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swf-news__thumb--g1 { background: linear-gradient(135deg,#90BF1A,#5f8a2c); }
.swf-news__thumb--g2 { background: linear-gradient(135deg,#a9cc4a,#6f9714); }
.swf-news__thumb--g3 { background: linear-gradient(135deg,#c2d86b,#7ba22a); }
@media (max-width: 560px) { .swf-news__thumb { width: 96px; height: 72px; } }
.swf-news__body { flex: 1 1 auto; min-width: 0; }
.swf-news__date { display: block; font-family: "Lexend", sans-serif; font-size: 12.5px; color: var(--swf-light); letter-spacing: .05em; }
.swf-news__title { display: block; margin: 5px 0 7px; font-size: 15.5px; font-weight: 700; line-height: 1.55; }
.swf-news__excerpt { display: block; font-size: 13px; color: #6b7264; line-height: 1.75; }

/* ==========================================================================
   TOP：施設概要カード
   ========================================================================== */
.swf-section--sec { background: var(--swf-sec); border-top: 1px solid #eef1e3; border-bottom: 1px solid #eef1e3; }
.swf-section--white { background: #fff; border-top: 1px solid #eef1e3; border-bottom: 1px solid #eef1e3; }
.swf-faccards { display: flex; flex-wrap: wrap; gap: 18px; }
.swf-fac-card { flex: 1 1 260px; background: #fff; border: 1px solid #ebeee0; border-radius: 5px; overflow: hidden; }
.swf-fac-card__img { height: 150px; background-color: #5f7a2c; background-position: center; background-size: cover; background-repeat: no-repeat; }
.swf-fac-card__cap { padding: 13px 18px; background: var(--swf-g-dark); }
.swf-fac-card__cap h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }

/* ==========================================================================
   TOP：施設料金（左画像・右テキストの2カラム）
   ========================================================================== */
.swf-feesplit { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px,4vw,56px); }
.swf-feesplit__media { flex: 1 1 380px; min-width: 0; }
.swf-feesplit__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 12px 30px rgba(40,55,15,.12); }
.swf-feesplit__body { flex: 1 1 420px; min-width: 0; }
.swf-feesplit__body .swf-lead { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   TOP：2大CTA
   ========================================================================== */
.swf-ctaband { background-color: #3f5f1a; background-position: center; background-size: cover; background-repeat: no-repeat; }
.swf-ctaband--guide { background-image: linear-gradient(180deg,rgba(28,42,10,.42),rgba(28,42,10,.58)), url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28333/guide-bg.jpg"); background-position: center 78%; }
.swf-ctaband--dark { background-color: #232f10; }
.swf-ctaband--fee { background-image: linear-gradient(180deg,rgba(28,42,10,.55),rgba(28,42,10,.66)), url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28333/bg-fee.jpg"); }
.swf-cta-sub { color: rgba(255,255,255,.72); }
.swf-ctacards { display: flex; flex-wrap: wrap; gap: 22px; }
.swf-ctacard {
  flex: 1 1 340px; position: relative; display: block; text-decoration: none;
  border-radius: 5px; overflow: hidden; padding: 38px 34px; min-height: 210px; color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.28); transition: transform .25s ease;
}
.swf-ctacard:hover { transform: translateY(-4px); }
.swf-ctacard--green { background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-deep)); }
.swf-ctacard--red { background: linear-gradient(135deg,var(--swf-red),var(--swf-red-dark)); }
.swf-ctacard--white { background: #fff; color: var(--swf-txt); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.swf-ctacard--sm { min-height: 150px; padding: 34px 32px; }
.swf-ctacard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.swf-ctacard__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 5px; background: rgba(255,255,255,.2); }
.swf-ctacard__ico i { font-size: 25px; color: #fff; }
.swf-ctacard__label { font-family: "Lexend", sans-serif; font-size: 12px; letter-spacing: .2em; font-weight: 600; opacity: .85; }
.swf-ctacard h3 { margin: 0 0 8px; font-size: clamp(21px,2.6vw,26px); font-weight: 700; letter-spacing: .04em; }
.swf-ctacard--sm h3 { font-size: 22px; }
.swf-ctacard p { margin: 0; font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.9); max-width: 340px; }
.swf-ctacard--sm p { font-size: 13.5px; line-height: 1.8; }
.swf-ctacard--white h3 { color: var(--swf-ink); }
.swf-ctacard--white p { color: #6b7264; }
.swf-ctacard__go { position: absolute; right: 30px; bottom: 30px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 3px; background: #fff; }
.swf-ctacard--sm .swf-ctacard__go { right: 26px; bottom: 26px; width: 42px; height: 42px; }
.swf-ctacard__go i { font-size: 18px; }
.swf-ctacard--green .swf-ctacard__go { color: var(--swf-g-deep); }
.swf-ctacard--red .swf-ctacard__go { color: var(--swf-red-dark); }
.swf-ctacard--white .swf-ctacard__go { background: var(--swf-g-bright); color: #fff; }

/* ==========================================================================
   TOP：総合インフォメーション＋地図
   ========================================================================== */
.swf-info { display: flex; flex-wrap: wrap; gap: 36px; }
.swf-info__col { flex: 1 1 340px; min-width: 0; }
.swf-info__dl { margin: 0; display: flex; flex-direction: column; }
.swf-info__row { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid var(--swf-line2); }
.swf-info__row:last-child { border-bottom: 1px solid var(--swf-line2); }
.swf-info__dt { flex: 0 0 96px; font-size: 13px; font-weight: 700; color: var(--swf-light); }
.swf-info__dd { margin: 0; font-size: 14.5px; }
.swf-info__dd--en { font-family: "Lexend", sans-serif; }
.swf-info__btns { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.swf-map { flex: 1 1 340px; min-height: 320px; border-radius: 5px; overflow: hidden; border: 1px solid #ebeee0; position: relative; background: linear-gradient(135deg,#eef2e2,#dfe8c8); }
.swf-map--sm { min-height: 220px; }
.swf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.swf-map__grid { position: absolute; inset: 0; background-image: linear-gradient(#cdd8b0 1px,transparent 1px),linear-gradient(90deg,#cdd8b0 1px,transparent 1px); background-size: 44px 44px; opacity: .55; }
.swf-map__center { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); text-align: center; }
.swf-map__center i { font-size: 42px; color: var(--swf-g-dark); animation: swfFloatY 3s ease-in-out infinite; }
.swf-map__center p { margin: 10px 0 0; font-size: 13px; color: #6b7264; font-weight: 600; }
.swf-map__center p.sub { margin: 2px 0 0; font-size: 11.5px; color: #96a081; font-weight: 400; }
.swf-map__more { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 4px; background: #fff; color: var(--swf-ink); text-decoration: none; font-weight: 600; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.swf-map__more i { font-size: 12px; }
@keyframes swfFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ==========================================================================
   下層ページヒーロー帯
   ========================================================================== */
.swf-pagehead {
  background-image: linear-gradient(180deg,rgba(28,42,10,.30),rgba(28,42,10,.55)), url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28333/page_hero.jpg");
  background-color: #5f7a2c; background-position: center bottom; background-size: cover; background-repeat: no-repeat;
  border-bottom: 3px solid var(--swf-g-bright);
}
.swf-pagehead__inner { max-width: 1200px; margin: 0 auto; padding: clamp(52px,8vw,92px) clamp(16px,4vw,32px); }
.swf-pagehead .swf-eyebrow { color: #d5ec8f; }
.swf-pagehead__title { margin: 6px 0 0; font-size: clamp(26px,4vw,40px); font-weight: 700; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 16px rgba(20,30,10,.4); }

/* ==========================================================================
   施設紹介：各施設ブロック
   ========================================================================== */
.swf-faclist { display: flex; flex-direction: column; gap: clamp(40px,6vw,68px); }
.swf-faclist__row { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); align-items: stretch; }
.swf-faclist__row + .swf-faclist__row { border-top: 1px dashed #cfd8bb; padding-top: clamp(40px,6vw,68px); }
.swf-faclist__media { flex: 1 1 42%; min-width: 300px; max-width: 520px; border-radius: 6px; overflow: hidden; background-color: #6f8a3a; background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 260px; align-self: stretch; }
.swf-faclist__media--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg,#eef3e0,#eef3e0 14px,#e8efd4 14px,#e8efd4 28px); }
.swf-faclist__nophoto { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8ba24e; font-size: 12px; letter-spacing: .06em; font-weight: 600; }
.swf-faclist__nophoto i { font-size: 32px; color: #a9c15e; }
.swf-faclist__body { flex: 1 1 46%; min-width: 300px; }
.swf-faclist__name { margin: 0 0 12px; font-size: clamp(20px,2.6vw,26px); font-weight: 700; letter-spacing: .04em; }
.swf-faclist__desc { margin: 0 0 16px; font-size: 14.5px; color: var(--swf-muted); line-height: 1.95; }
.swf-faclist__spec { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid #eef1e3; border-bottom: 1px solid #eef1e3; margin-bottom: 16px; }
.swf-faclist__spec-label { flex: none; font-size: 12px; font-weight: 700; color: var(--swf-g-dark); background: var(--swf-chip); padding: 4px 10px; border-radius: 3px; }
.swf-faclist__spec-val { font-size: 14px; color: var(--swf-ink); font-weight: 500; }
.swf-faclist__uses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swf-faclist__uses-label { font-size: 12.5px; font-weight: 700; color: var(--swf-light); }
.swf-faclist__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.swf-tag { font-size: 12.5px; color: var(--swf-muted); background: var(--swf-sec2); border: 1px solid #e3ead1; padding: 5px 12px; border-radius: 3px; }
.swf-related { margin-top: 18px; padding: 16px 18px; background: var(--swf-sec); border-radius: 4px; }
.swf-related__label { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--swf-g-dark); }
.swf-related__list { display: flex; flex-direction: column; gap: 9px; }
.swf-related__item { display: flex; gap: 8px; font-size: 13px; color: var(--swf-muted); line-height: 1.75; }
.swf-related__item > i { flex: none; color: var(--swf-g-bright); font-weight: 700; font-style: normal; margin-top: 6px; font-size: 8px; }
.swf-related__item b { font-weight: 700; color: var(--swf-ink); }

/* ==========================================================================
   ご利用の流れ：ステップ
   ========================================================================== */
.swf-flow { display: flex; flex-direction: column; }
.swf-flow__step { display: flex; gap: clamp(16px,3vw,28px); align-items: stretch; }
.swf-flow__rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.swf-flow__num { display: grid; place-items: center; width: clamp(52px,7vw,64px); height: clamp(52px,7vw,64px); border-radius: 5px; background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-dark)); color: #fff; box-shadow: 0 6px 16px rgba(144,191,26,.28); }
.swf-flow__num small { font-family: "Lexend", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .12em; opacity: .85; line-height: 1; }
.swf-flow__num b { font-family: "Lexend", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; }
.swf-flow__line { flex: 1 1 auto; width: 2px; background: #e0e6d1; margin: 6px 0; }
.swf-flow__card-wrap { flex: 1 1 auto; min-width: 0; padding-bottom: clamp(28px,4vw,44px); }
.swf-flow__card { background: #fff; border: 1px solid var(--swf-line); border-radius: 5px; box-shadow: 0 4px 16px rgba(80,100,30,.05); padding: clamp(18px,2.5vw,26px); }
.swf-flow__title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f1e9; font-size: clamp(18px,2.3vw,22px); font-weight: 700; letter-spacing: .03em; color: var(--swf-ink); }
.swf-flow__body { margin: 0; font-size: 14px; color: var(--swf-muted); line-height: 1.9; }
.swf-flow__points { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.swf-flow__point { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.8; color: var(--swf-muted); }
.swf-flow__point b { font-weight: 700; color: var(--swf-ink); }
.swf-flow__point > i { flex: none; }
.swf-flow__bullet { font-size: 7px; color: var(--swf-g-bright); margin-top: 8px; }
.swf-flow__point--warn { background: #fdeaeb; border: 1px solid #f7cfd2; border-radius: 4px; padding: 10px 13px; font-size: 13px; line-height: 1.7; color: #c0424a; align-items: flex-start; }
.swf-flow__point--warn > i { margin-top: 2px; font-size: 14px; }
.swf-flow__point--warn b { color: #c0424a; }

/* ==========================================================================
   フォーム
   ========================================================================== */
.swf-formsec { background: var(--swf-sec); border-top: 1px solid #eef1e3; }
.swf-form { margin-top: 32px; background: #fff; border: 1px solid var(--swf-line); border-radius: 5px; padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 20px; }
.swf-form--gap18 { gap: 18px; }
.swf-form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.swf-form__cell { flex: 1 1 240px; }
.swf-form__cell--sm { flex: 1 1 200px; }
.swf-form__label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.swf-req { color: var(--swf-red); font-size: 12px; }
.swf-any { color: var(--swf-light); font-weight: 500; font-size: 12px; }
.fld {
  width: 100%; background: #fff; border: 1.5px solid var(--swf-line); border-radius: 4px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--swf-txt);
  transition: border-color .2s ease;
}
.fld:focus { outline: none; border-color: var(--swf-g-bright); }
textarea.fld { resize: vertical; }
select.fld { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237ba22a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.swf-file { border: 1.5px dashed #cdd6b6; border-radius: 4px; padding: 22px; text-align: center; background: var(--swf-pale); color: var(--swf-light); }
.swf-file i { display: block; font-size: 26px; color: var(--swf-g-bright); margin-bottom: 10px; }
.swf-file p { margin: 0; font-size: 13.5px; }
.swf-file input { margin-top: 12px; font-size: 13px; }
.swf-form__submit { align-self: center; margin-top: 6px; }
.swf-form__submit--left { align-self: flex-start; }
.swf-form__note { margin: 0; text-align: center; font-size: 12px; color: var(--swf-light); }
.swf-form__alert { padding: 16px 18px; border-radius: 4px; background: var(--swf-chip); border: 1px solid #cfe09a; color: #4d6b0f; font-size: 14px; font-weight: 500; }

/* ==========================================================================
   施設使用料テーブル
   ========================================================================== */
.swf-tablewrap { overflow-x: auto; border-radius: 5px; border: 1px solid var(--swf-line); }
.fee-table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* 品名など長文列を含む一覧表：狭い画面では最小幅を確保し、過度な改行より横スクロールで見せる */
.fee-table--items { min-width: 520px; }
.fee-table th, .fee-table td { border: 1px solid var(--swf-line); padding: 12px 16px; text-align: left; }
.fee-table th { background: #f6f8ef; color: var(--swf-muted); font-weight: 700; font-size: 13px; white-space: nowrap; }
.fee-table td.num { font-family: "Lexend", sans-serif; color: var(--swf-ink); font-weight: 600; text-align: right; white-space: nowrap; }
.scroll-hint i { font-size: 12px; }
.fee-table td.rowh { font-weight: 700; background: var(--swf-pale); vertical-align: middle; white-space: nowrap; }
.fee-table td.mid { vertical-align: middle; }
.fee-table td.nw { white-space: nowrap; }
.scroll-hint { display: none; margin: 0 0 10px; font-size: 12.5px; color: var(--swf-light); }
.scroll-hint svg { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .scroll-hint { display: flex; align-items: center; gap: 6px; }
}
.swf-feeblock { margin-bottom: clamp(40px,5vw,56px); }
.swf-feenote { margin: 0 0 12px; font-size: 13px; color: var(--swf-light); line-height: 1.8; }
.swf-feenote--right { text-align: right; }
.swf-feesource { margin: 12px 0 0; font-size: 12.5px; color: var(--swf-light); line-height: 1.8; }

/* 注記ボックス */
.swf-note { margin-bottom: clamp(40px,5vw,56px); padding: clamp(22px,3vw,30px); background: var(--swf-sec); border-radius: 5px; border: 1px solid #eef1e3; }
.swf-note h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.swf-note ol { margin: 0; padding-left: 22px; list-style: decimal; font-size: 13.5px; color: var(--swf-muted); line-height: 1.85; }
.swf-note > ol > li { margin-bottom: 10px; }
.swf-note ol ol { margin: 8px 0 4px; padding-left: 22px; }
.swf-note ol ol li { margin-bottom: 4px; }
.swf-note ol ol li:last-child { margin-bottom: 0; }

/* ==========================================================================
   申請書ダウンロード
   ========================================================================== */
.swf-dlgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(360px,1fr)); gap: 14px; }
@media (max-width: 480px) { .swf-dlgrid { grid-template-columns: 1fr; } }
.swf-dlcard { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--swf-line); border-radius: 5px; text-decoration: none; color: inherit; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.swf-dlcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(80,100,30,.08); }
.swf-dlcard__badge { flex: none; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 3px; font-family: "Lexend", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.swf-dlcard__badge--g { background: var(--swf-chip); color: var(--swf-g-dark); }
.swf-dlcard__badge--r { background: #fdeaeb; color: var(--swf-red-dark); }
.swf-dlcard__name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.55; }
.swf-dlcard__ico { flex: none; font-size: 16px; color: #7ba22a; }

.swf-submit { display: flex; flex-wrap: wrap; gap: 18px; }
.swf-submit__card { flex: 1 1 280px; background: #fff; border: 1px solid var(--swf-line); border-radius: 5px; padding: 26px 24px; position: relative; }
.swf-submit__card--rec { border: 2px solid var(--swf-red); }
.swf-submit__badge { position: absolute; right: 16px; top: 16px; font-size: 11px; font-weight: 700; color: #fff; background: var(--swf-red); padding: 4px 10px; border-radius: 3px; }
.swf-submit__card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.swf-submit__card p { margin: 0; font-size: 13.5px; color: var(--swf-muted); line-height: 1.85; }
.swf-submit__card p.mb { margin-bottom: 16px; }

/* ==========================================================================
   お問い合わせ：電話/FAXボックス
   ========================================================================== */
.swf-contact { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,52px); align-items: flex-start; }
.swf-contact__col { flex: 1 1 300px; min-width: 0; }
.swf-contact__col--info { flex: 0 1 320px; }
.swf-contact__col--form { flex: 1 1 520px; }
.swf-contact h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.swf-contact h2.mt { margin-top: 32px; margin-bottom: 16px; }
.swf-tel-box { border: 1px solid var(--swf-line); border-radius: 5px; overflow: hidden; }
.swf-tel-box__row { padding: 20px; border-bottom: 1px solid #f0f1e9; display: flex; align-items: center; gap: 14px; }
.swf-tel-box__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; }
.swf-tel-box__ico i { font-size: 18px; }
.swf-tel-box__ico--g { background: var(--swf-chip); color: var(--swf-g-dark); }
.swf-tel-box__ico--r { background: #fdeaeb; color: var(--swf-red-dark); }
.swf-tel-box__cap { font-size: 12px; color: var(--swf-light); }
.swf-tel-box__num { font-family: "Lexend", sans-serif; font-size: 20px; font-weight: 700; color: var(--swf-ink); text-decoration: none; }
.swf-tel-box__foot { padding: 20px; background: var(--swf-pale); font-size: 13.5px; color: var(--swf-muted); line-height: 1.9; }
.swf-contact__addr { margin: 0 0 14px; font-size: 13.5px; color: var(--swf-muted); line-height: 1.9; }

/* CMSフォーム埋め込みラッパー。中身は cms_ajax が mail-form.css で出力するため、
   .swf-cmsform 配下にスコープして詳細度を上げ、サイトのトンマナに合わせて上書きする（!important不使用） */
.swf-cmsform { background: #fff; border: 1px solid var(--swf-line); border-radius: 5px; padding: clamp(22px,3vw,32px); }
/* mail-form.css は cms_ajax が実行時に site.css より後で読み込むため、
   同詳細度では負ける。.form-contents を挟んで詳細度を一段上げて確実に上書きする（!important不使用）。 */
.swf-cmsform.swf-cmsform .form-contents { padding: 0; font-size: 14px; color: var(--swf-txt); }
/* 項目：ラベル上・入力下の縦積み全幅 */
.swf-cmsform.swf-cmsform .form-contents dl { display: block; margin: 0; }
.swf-cmsform.swf-cmsform .form-contents dt { display: block; float: none; width: 100%; margin: 0 0 7px; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--swf-txt); background: none; border: none; text-align: left; }
.swf-cmsform.swf-cmsform .form-contents dd { display: block; float: none; width: 100%; margin: 0 0 18px; padding: 0; }
.swf-cmsform.swf-cmsform .form-contents .required { display: inline-flex; align-items: center; gap: 8px; }
/* 入力欄 */
.swf-cmsform.swf-cmsform .form-contents .textarea,
.swf-cmsform.swf-cmsform .form-contents .textarea-serect {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--swf-line); border-radius: 4px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--swf-txt); background: #fff;
}
/* select は mail-form.css が height:40px を指定しており、box-sizing:border-box＋上下padding だと
   中身が縮んで文字が切れる。height:auto にして padding 分だけ高さを確保する（項目内の余白は維持） */
.swf-cmsform.swf-cmsform .form-contents .textarea-serect { height: auto; min-height: 46px; line-height: 1.5; }
.swf-cmsform.swf-cmsform .form-contents .textarea:focus,
.swf-cmsform.swf-cmsform .form-contents .textarea-serect:focus { outline: none; border-color: var(--swf-g-bright); }
.swf-cmsform.swf-cmsform .form-contents textarea.textarea { resize: vertical; min-height: 140px; }
/* 送信ボタン */
.swf-cmsform.swf-cmsform .form-contents .submit-btn {
  display: block; width: auto; margin: 26px auto 0; min-width: 240px; padding: 15px 40px;
  border: none; border-radius: 4px; cursor: pointer; text-align: center;
  background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-dark));
  color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .04em;
  box-shadow: 0 8px 22px rgba(144,191,26,.32); transition: transform .2s ease;
}
.swf-cmsform.swf-cmsform .form-contents .submit-btn:hover { transform: translateY(-2px); }
/* 完了・エラーメッセージ */
.swf-cmsform.swf-cmsform .form-contents .form-thanks-msg { padding: 16px 18px; border-radius: 4px; background: var(--swf-chip); border: 1px solid #cfe09a; color: #4d6b0f; font-size: 14px; line-height: 1.9; }
.swf-cmsform.swf-cmsform .form-contents .form-err-msg { padding: 12px 16px; border-radius: 4px; background: #fdeaeb; border: 1px solid #f7cfd2; color: #c0424a; font-size: 13.5px; margin-bottom: 16px; }
.swf-cmsform.swf-cmsform .form-contents .back-home-btn { margin-top: 14px; }
.swf-cmsform.swf-cmsform .form-contents .back-home-btn a { color: var(--swf-g-dark); font-weight: 700; }

/* ==========================================================================
   お知らせ（ブログ）一覧・詳細
   ========================================================================== */
.swf-blog { display: flex; flex-wrap: wrap; gap: clamp(28px,4vw,52px); align-items: flex-start; }
.swf-blog__main { flex: 1 1 auto; min-width: 0; width: 66%; }
.swf-blog__side { flex: 0 0 auto; width: 27%; min-width: 240px; position: sticky; top: 90px; }
@media (max-width: 900px) {
  .swf-blog__main { width: 100%; }
  .swf-blog__side { width: 100%; position: static; }
}

/* カテゴリフィルター */
.swf-blogfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.swf-blogfilter a { font-size: 13px; font-weight: 600; color: var(--swf-muted); background: #fff; border: 1px solid var(--swf-line); padding: 7px 16px; border-radius: 999px; text-decoration: none; transition: all .2s ease; }
.swf-blogfilter a:hover { border-color: var(--swf-g-bright); color: var(--swf-g-dark); }
.swf-blogfilter a.is-active { background: var(--swf-g-dark); border-color: var(--swf-g-dark); color: #fff; }

/* 記事カード（横並び） */
.swf-bloglist { display: flex; flex-direction: column; }
.swf-blogcard { display: flex; gap: 20px; padding: 22px 4px; border-top: 1px solid var(--swf-line2); text-decoration: none; color: inherit; transition: background .2s ease; }
.swf-bloglist .swf-blogcard:last-child { border-bottom: 1px solid var(--swf-line2); }
.swf-blogcard:hover { background: var(--swf-pale); }
.swf-blogcard__thumb { flex: 0 0 auto; width: 180px; height: 118px; border-radius: 5px; overflow: hidden; background: linear-gradient(135deg,var(--swf-g-bright),var(--swf-g-deep)); }
.swf-blogcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swf-blogcard__thumb--g1 { background: linear-gradient(135deg,#90BF1A,#5f8a2c); }
.swf-blogcard__thumb--g2 { background: linear-gradient(135deg,#a9cc4a,#6f9714); }
.swf-blogcard__thumb--g3 { background: linear-gradient(135deg,#c2d86b,#7ba22a); }
.swf-blogcard__thumb--g4 { background: linear-gradient(135deg,#f4a5a9,#d13f56); }
.swf-blogcard__thumb--g5 { background: linear-gradient(135deg,#b5cf5a,#557411); }
.swf-blogcard__body { flex: 1 1 auto; min-width: 0; }
.swf-blogcard__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.swf-blogcard__date { font-family: "Lexend", sans-serif; font-size: 12.5px; color: var(--swf-light); letter-spacing: .05em; }
.swf-blogcard__title { display: block; margin: 0 0 6px; font-size: 16.5px; font-weight: 700; line-height: 1.55; }
.swf-blogcard__excerpt { display: block; margin: 0; font-size: 13px; color: #6b7264; line-height: 1.75; }
@media (max-width: 560px) {
  .swf-blogcard { gap: 14px; }
  .swf-blogcard__thumb { width: 104px; height: 78px; }
  .swf-blogcard__title { font-size: 15px; }
  .swf-blogcard__excerpt { display: none; }
}

/* カテゴリバッジ */
.swf-cat { flex: none; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--swf-g-dark); padding: 3px 11px; border-radius: 3px; letter-spacing: .04em; }
.swf-cat--event { background: var(--swf-red); }
.swf-cat--closed { background: #8b937f; }
.swf-cat--vacancy { background: #4f9dbf; }

/* サイドバー */
.swf-side { display: flex; flex-direction: column; gap: 22px; }
.swf-side-box { background: #fff; border: 1px solid var(--swf-line); border-radius: 6px; padding: 22px 20px; }
.swf-side-box__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: 9px; }
.swf-side-box__title i { color: var(--swf-g-bright); font-size: 15px; }
.swf-side-list { list-style: none; margin: 0; padding: 0; }
.swf-side-list li { border-bottom: 1px dotted var(--swf-line); }
.swf-side-list li:last-child { border-bottom: none; }
.swf-side-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 2px; font-size: 13.5px; color: var(--swf-muted); text-decoration: none; transition: color .2s ease; }
.swf-side-list a:hover { color: var(--swf-g-dark); }
.swf-side-list__count { font-family: "Lexend", sans-serif; font-size: 12px; color: var(--swf-light); }
/* 月別アーカイブ CMS出力（ul/li/a を想定）をサイドバー調に */
.swf-side-archive ul { list-style: none; margin: 0; padding: 0; }
.swf-side-archive li { border-bottom: 1px dotted var(--swf-line); }
.swf-side-archive li:last-child { border-bottom: none; }
.swf-side-archive a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 2px; font-size: 13.5px; color: var(--swf-muted); text-decoration: none; transition: color .2s ease; }
.swf-side-archive a:hover { color: var(--swf-g-dark); }

/* ページネーション（共通 .pagination を利用。中央寄せ余白のみ） */
.swf-pagination-wrap { margin-top: 40px; display: flex; justify-content: center; }

/* 記事詳細 */
.swf-article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.swf-article__date { font-family: "Lexend", sans-serif; font-size: 13px; color: var(--swf-light); letter-spacing: .05em; }
.swf-article__title { margin: 0 0 26px; padding-bottom: 24px; border-bottom: 2px solid var(--swf-sec); font-size: clamp(22px,3vw,30px); font-weight: 700; line-height: 1.5; letter-spacing: .03em; }
/* 記事サムネイル：画像がある場合のみ JS で is-shown を付与して表示 */
.swf-article__thumb { display: none; width: 100%; border-radius: 6px; margin-bottom: 30px; overflow: hidden; }
.swf-article__thumb.is-shown { display: block; }
.swf-article__thumb img { width: 100%; height: auto; display: block; border-radius: 6px; }
.swf-article__body { font-size: 15px; color: var(--swf-txt); line-height: 1.95; }
.swf-article__body p { margin: 0 0 22px; }
.swf-article__body h2 { margin: 34px 0 14px; padding-left: 14px; border-left: 4px solid var(--swf-g-bright); font-size: 19px; font-weight: 700; line-height: 1.5; }
.swf-article__body ul { margin: 0 0 22px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.swf-article__body ul li { display: flex; gap: 10px; }
.swf-article__body ul li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--swf-g-bright); font-size: 14px; margin-top: 3px; }
.swf-article__signature { margin-top: 28px; padding: 16px 18px; background: var(--swf-sec); border-radius: 5px; font-size: 13.5px; color: var(--swf-muted); }
/* ページャ（CMS page_link 出力） */
.swf-article__pager { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--swf-line); display: flex; justify-content: center; align-items: center; gap: 10px 20px; flex-wrap: wrap; font-size: 14px; }
.swf-article__pager:empty { display: none; }
.swf-article__pager a { display: inline-flex; align-items: center; gap: 6px; color: var(--swf-g-dark); text-decoration: none; font-weight: 600; padding: 8px 14px; border: 1px solid var(--swf-line); border-radius: 6px; transition: background .2s ease, border-color .2s ease; }
.swf-article__pager a:hover { background: var(--swf-sec2); border-color: var(--swf-g-bright); }
/* CMSページャ（.pages > .page_prev / .page_next）を横並びに */
.pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.pages .page_prev, .pages .page_next { margin: 0; }
.pages a { display: inline-flex; align-items: center; gap: 6px; color: var(--swf-g-dark); text-decoration: none; font-weight: 600; padding: 8px 16px; border: 1px solid var(--swf-line); border-radius: 6px; transition: background .2s ease, border-color .2s ease; }
.pages a:hover { background: var(--swf-sec2); border-color: var(--swf-g-bright); }
/* お知らせ一覧ページのページャは上部に区切り線 */
.swf-bloglist .pages { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--swf-line); }
/* TOPページのお知らせ一覧はページャ非表示 */
.swf-news__list .pages { display: none; }
.swf-article__back { margin-top: 36px; text-align: center; }

/* ==========================================================================
   レスポンシブ微調整（文字サイズ・配置バランス）
   ========================================================================== */
/* タブレット */
@media (max-width: 1024px) {
  /* CTAカードの矢印：カード幅が狭くなる帯で本文と重ならないよう下余白を確保＋矢印を縮小 */
  .swf-ctacard { padding-bottom: 82px; }
  .swf-ctacard--sm { padding-bottom: 74px; }
  .swf-ctacard p { max-width: none; }
  .swf-ctacard__go { right: 22px; bottom: 22px; width: 42px; height: 42px; }
  .swf-ctacard--sm .swf-ctacard__go { right: 20px; bottom: 20px; width: 40px; height: 40px; }
}
@media (max-width: 875px) {
  /* 提出方法カード（3枚）：3列が収まらない帯で「2+1」の不揃いになるため全幅スタック */
  .swf-submit__card { flex-basis: 100%; }
}
@media (max-width: 769px) {
  /* 施設料金2カラム：積み重ね時に画像が縦に伸びすぎないよう調整 */
  .swf-feesplit__media img { max-height: 300px; }
  /* 施設紹介：769px以下はスマホと同じレイアウト（画像・本文を全幅スタック） */
  .swf-faclist__media, .swf-faclist__body { flex-basis: 100%; min-width: 0; }
  .swf-faclist__media { max-width: none; min-height: 200px; }
  /* 施設紹介「主な用途」：ラベルとタグを2カラム（タグがラベル下に詰まらないように） */
  .swf-faclist__uses { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .swf-faclist__uses-label { flex: 0 0 auto; padding-top: 4px; }
  .swf-faclist__tags { flex: 1 1 auto; min-width: 0; }
}
/* スマートフォン（〜767px：CMSスライダーのブレークポイントに合わせる） */
@media (max-width: 767px) {
  /* メインビュー：高さを65vhに（CMSスライダーの高さ変数 --swiper-wrapper-height も上書き） */
  .swf-hero { height: 65vh; min-height: 360px; }
  body #main_slider.slider_wrapper { --swiper-wrapper-height: 65vh; }
  .swf-hero__content { padding-bottom: clamp(60px,12vh,104px); }
  .swf-hero__en { margin-bottom: 10px; font-size: 10px; letter-spacing: .24em; }
  .swf-hero__title { line-height: 1.4; }
  .swf-hero__dots { bottom: clamp(24px,5vh,40px); }
  /* 施設料金2カラム：画像の高さをさらに抑える */
  .swf-feesplit__media img { max-height: 220px; }
  /* お問い合わせ：情報列と入力列を全幅に */
  .swf-contact__col--info, .swf-contact__col--form { flex-basis: 100%; }
  /* フッターのグローバルナビ（PAGES）はスマホ幅で非表示（PC・タブレットは表示） */
  .swf-footer__group--nav { display: none; }
  /* フッター：スマホでは余白を詰めてバランス調整 */
  .swf-footer__inner { padding-top: 40px; padding-bottom: 26px; }
  .swf-footer__cols { gap: 24px; }
  .swf-footer__bottom { margin-top: 26px; padding-top: 18px; }
  /* TOPお知らせ見出し：スマホでは最大幅を撤去して全幅に */
  .swf-news__head { max-width: none; }
  /* 総合インフォメーションのボタン：スマホでは中央揃え */
  .swf-info__btns { justify-content: center; }
  /* 総合インフォメーションのラベル：スマホでは内容幅＋折り返しなし（無駄な余白を詰める） */
  .swf-info__row { gap: 14px; }
  .swf-info__dt { flex: 0 0 auto; white-space: nowrap; }
  /* リード文：本文リードは左揃え、中央サブ（CTA等）は中央＋バランス折返し */
  .swf-lead--sm { text-align: center; text-wrap: balance; word-break: keep-all; }
  .swf-lead--sm.swf-lead { text-align: left; text-wrap: initial; word-break: normal; }
  /* CTAカードの矢印：サイズを縮小し、本文と重ならないよう下余白を確保 */
  .swf-ctacard { padding-bottom: 74px; }
  .swf-ctacard--sm { padding-bottom: 70px; }
  .swf-ctacard p { max-width: none; }
  .swf-ctacard__go, .swf-ctacard--sm .swf-ctacard__go { right: 16px; bottom: 16px; width: 38px; height: 38px; }
  .swf-ctacard__go i { font-size: 15px; }
  /* 料金テーブル：文字・余白を詰めて可読性を上げる（横スクロールと併用） */
  .fee-table { font-size: 12.5px; }
  .fee-table th { font-size: 12px; }
  .fee-table th, .fee-table td { padding: 8px 10px; }
}

/* ==========================================================================
   西原町キャラクター（装飾マスコット）
   ========================================================================== */
/* TOPお知らせ：記事リストの横（右側）に配置。align-items:flex-start の親内で下寄せ */
.swf-news-mascot { flex: 0 0 auto; align-self: flex-end; pointer-events: none; }
.swf-news-mascot img { width: clamp(96px,11vw,130px); height: auto; display: block; }
@media (max-width: 900px) {
  .swf-news-mascot { align-self: center; margin: 0 auto; }
  .swf-news-mascot img { width: 120px; }
}
@media (max-width: 767px) {
  /* スマホ：お知らせの見出し文章の横に小さめで配置（記事リストは下段） */
  .swf-news {
    display: grid;
    grid-template-columns: minmax(0,1fr) 84px;
    grid-template-areas: "head mascot" "list list";
    column-gap: 14px;
    align-items: start;
  }
  .swf-news__head { grid-area: head; max-width: none; min-width: 0; }
  .swf-news-mascot { grid-area: mascot; align-self: center; margin: 0; }
  .swf-news-mascot img { width: 84px; }
  .swf-news__list { grid-area: list; }
}

/* 冒頭リード文の横にキャラクターを並べるバランス配置（申請書DL・お問い合わせ 共用） */
.swf-intro-mascot { display: flex; align-items: center; gap: clamp(20px,4vw,44px); margin-bottom: clamp(32px,4vw,44px); }
.swf-intro-mascot .swf-intro { flex: 1 1 auto; margin-bottom: 0; }
.swf-intro-mascot__fig { flex: 0 0 auto; }
.swf-intro-mascot__fig img { width: clamp(120px,15vw,176px); height: auto; display: block; }
@media (max-width: 767px) {
  .swf-intro-mascot { flex-direction: column; align-items: center; gap: 18px; }
  .swf-intro-mascot__fig img { width: 132px; }
}

/* お問い合わせ：フォーム見出し右側の余白にキャラクターを配置 */
.swf-contact__col--form { position: relative; }
.swf-contact-mascot { position: absolute; right: 6px; top: -71px; pointer-events: none; z-index: 2; }
.swf-contact-mascot img { width: clamp(120px,13vw,164px); height: auto; display: block; }
@media (max-width: 767px) {
  /* スマホ：マスコットを「フォームでのお問い合わせ」見出しの上へ */
  .swf-contact__col--form { display: flex; flex-direction: column; }
  .swf-contact-mascot { position: static; order: -1; display: flex; justify-content: flex-end; margin-bottom: 14px; }
  .swf-contact-mascot img { width: 128px; }
}
/* タブレット（768〜959px）：フォームが下段に回り込む帯。情報列を全幅にし、
   お電話・FAX と アクセスを横並びにして右側の空白を解消する */
@media (min-width: 768px) and (max-width: 959px) {
  .swf-contact__col--info, .swf-contact__col--form { flex-basis: 100%; }
  .swf-contact__col--info { display: flex; gap: clamp(24px,3.5vw,44px); align-items: flex-start; }
  .swf-contact__sub { flex: 1 1 0; min-width: 0; }
  .swf-contact__sub--access h2.mt { margin-top: 0; }
}