@charset "UTF-8";
/*
Theme Name: はら笑楽交
Theme URI: https://xn--v9j9b179jq0x3ms.fukushima.jp/
Author: はら笑楽交プロジェクト実行委員会
Description: 廃校になった会津若松市立原小学校を活用した地域交流施設「はら笑楽交」のオフィシャルサイト用テーマ。ページはスラッグではなくページテンプレートの選択で表示されます。配色・文字サイズ・角丸・余白はすべてCSS変数（[1] デザイントークン）で管理しているため、そのブロックを書き換えるだけでデザインを差し替えられます。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harasyo
Tags: two-columns, custom-logo, translation-ready, accessibility-ready
*/
/* ==========================================================================
   はら笑楽交 オフィシャルサイト
   style.css

   デザイントークンはすべて :root の CSS 変数で定義しています。
   別デザインに変更する場合は、原則 [1] デザイントークン のブロックだけを
   書き換えれば、サイト全体の配色・角丸・余白・文字サイズが切り替わります。
   ========================================================================== */


/* ==========================================================================
   [1] デザイントークン（ここだけ書き換えればデザインが変わります）
   ========================================================================== */

:root {

  /* --- 1-1. ブランドカラー ------------------------------------------------
     primary はサイト唯一のアクセント色。主要ボタンに使用します。 */
  --color-primary:          #9fe870;   /* ブランドアクセント（ライムグリーン） */
  --color-on-primary:       #0e0f0c;   /* primary の上に載せる文字色 */
  --color-primary-active:   #cdffad;   /* ホバー・アクティブ時 */
  --color-primary-neutral:  #c5edab;   /* 中間トーン */
  --color-primary-pale:     #e2f6d5;   /* 最も淡いグリーン面 */

  /* --- 1-2. 文字色 ------------------------------------------------------- */
  --color-ink:              #0e0f0c;   /* 見出し・既定の文字色 */
  --color-ink-deep:         #163300;   /* 深い森の緑（強調テキスト） */
  --color-body:             #454745;   /* 本文 */
  --color-mute:             #868685;   /* 注記・キャプション */

  /* --- 1-3. 面（サーフェス） --------------------------------------------- */
  --color-canvas:           #ffffff;   /* カード内部の白 */
  --color-canvas-soft:      #e8ebe6;   /* セージ系の背景。帯の基調色 */
  --color-line:             #d5d9d2;   /* 罫線 */

  /* --- 1-4. セマンティックカラー ----------------------------------------- */
  --color-positive:         #2ead4b;
  --color-positive-deep:    #054d28;
  --color-warning:          #ffd11a;
  --color-warning-deep:     #b86700;
  --color-warning-content:  #4a3b1c;
  --color-negative:         #d03238;
  --color-negative-deep:    #a72027;

  /* --- 1-5. フォント -----------------------------------------------------
     和文は端末搭載フォントを使用します（外部フォント読み込みなし＝表示が速い）。 */
  --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                  "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo",
                  Inter, system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-display);

  --weight-display: 800;   /* 大見出し（h1・h2）のウエイト */
  --weight-heading: 700;   /* 小見出し（h3・h4）のウエイト */
  --weight-strong:  700;
  --weight-normal:  400;

  /* --- 1-6. 文字サイズ ---------------------------------------------------
     本文は仕様書のとおり 16px／行間 1.8 を基準にしています。
     見出しは本文とのジャンプ率を抑え、圧迫感が出ないようにしています。 */
  --fs-hero:      clamp(1.65rem, 3.2vw, 2.375rem);   /* 26 〜 38px */
  --fs-display:   clamp(1.375rem, 2.4vw, 1.75rem);   /* 22 〜 28px */
  --fs-section:   clamp(1.25rem, 2vw, 1.5rem);       /* 20 〜 24px */
  --fs-heading:   clamp(1.0625rem, 1.4vw, 1.1875rem);/* 17 〜 19px */
  --fs-sub:       1.0625rem;                          /* 17px */
  --fs-lead:      1.0625rem;                          /* 17px */
  --fs-body:      1rem;                               /* 16px */
  --fs-small:     0.875rem;                           /* 14px */
  --fs-caption:   0.75rem;                            /* 12px */

  --lh-tight:  1.4;
  --lh-snug:   1.6;
  --lh-body:   1.8;   /* 和文の可読性を優先した行間 */

  /* --- 1-7. 角丸 ---------------------------------------------------------
     24px がこのデザインの基本半径です。 */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* --- 1-8. 余白（4px 基準） --------------------------------------------- */
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  48px;
  --space-4xl:  72px;
  --space-5xl:  96px;

  /* --- 1-9. レイアウト ---------------------------------------------------- */
  --container:      1200px;
  --container-text: 820px;   /* 長文ページの読みやすい幅 */
  --band-padding:   clamp(2.5rem, 6vw, 5rem);

  /* --- 1-10. その他 ------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(14, 15, 12, .04), 0 8px 24px rgba(14, 15, 12, .06);
  --shadow-nav:   0 1px 0 rgba(14, 15, 12, .08);
  --transition:   .2s ease;
  --focus-ring:   3px solid var(--color-ink-deep);
}


/* ==========================================================================
   [2] ベース
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* 横スクロールを発生させない */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-normal);
  color: var(--color-body);
  background: var(--color-canvas);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-lg);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  font-weight: var(--weight-display);
}

h1 { font-size: var(--fs-hero); letter-spacing: -.01em; }
h2 { font-size: var(--fs-display); letter-spacing: -.01em; }
h3 { font-size: var(--fs-heading); line-height: var(--lh-snug); font-weight: var(--weight-heading); }
h4 { font-size: var(--fs-sub);     line-height: var(--lh-snug); font-weight: var(--weight-heading); }

p  { margin: 0 0 var(--space-lg); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-ink-deep);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0 0 var(--space-lg); padding-left: 1.4em; }
li { margin-bottom: var(--space-xs); }

strong { font-weight: var(--weight-strong); color: var(--color-ink); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* キーボード操作用のスキップリンク */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-ink);
  color: var(--color-primary);
  border-radius: 0 0 var(--radius-lg) 0;
}
.skip-link:focus { left: 0; }


/* ==========================================================================
   [3] レイアウト部品
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

/* 長文セクション。左端はサイト共通のグリッドに揃えたまま、
   1行の文字数だけを読みやすい幅に制限します。 */
.container--text > * { max-width: var(--container-text); }
.container--text > h2:not(:first-child) { margin-top: var(--space-3xl); }
.container--text > h3:not(:first-child) { margin-top: var(--space-2xl); }
/* 英字ラベル（eyebrow）直後の見出しは、ラベルと一体で見せる */
.container--text > .eyebrow + h2,
.container--text > .eyebrow + h3 { margin-top: 0; }

.band { padding-block: var(--band-padding); }
.band--soft  { background: var(--color-canvas-soft); }
.band--white { background: var(--color-canvas); }
.band--pale  { background: var(--color-primary-pale); }
.band--ink   { background: var(--color-ink); color: var(--color-canvas-soft); }
.band--ink h2,
.band--ink h3 { color: var(--color-canvas); }

.band--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }

/* セクション見出し */
.eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-ink-deep);
}
.band--ink .eyebrow { color: var(--color-primary); }

.section-head { margin-bottom: var(--space-2xl); }
.section-head p { max-width: 68ch; }

.lead {
  font-size: var(--fs-lead);
  color: var(--color-body);
}

.note {
  font-size: var(--fs-small);
  color: var(--color-mute);
}

.stack > * + * { margin-top: var(--space-xl); }


/* ==========================================================================
   [4] ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;                       /* タップしやすい高さ */
  padding: var(--space-md) var(--space-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--weight-strong);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover { background: var(--color-primary-active); }

.btn--secondary {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
}
.btn--secondary:hover { background: var(--color-primary-neutral); }

.btn--tertiary {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--tertiary:hover { background: var(--color-canvas-soft); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}


/* ==========================================================================
   [5] カード
   ========================================================================== */

.card {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}
.card p { color: var(--color-body); }
.card h3 { margin-bottom: var(--space-md); }

.card--sage  { background: var(--color-canvas-soft); box-shadow: none; }
.card--green { background: var(--color-primary-pale); box-shadow: none; }
.card--dark  { background: var(--color-ink); box-shadow: none; }
.card--dark h2,
.card--dark h3 { color: var(--color-primary); }
.card--dark p  { color: var(--color-canvas-soft); }
.card--dark a  { color: var(--color-primary); }

/* 濃い背景（ink）の上に置く要素の文字色 */
.card--dark .eyebrow { color: var(--color-primary); }

.band--ink .spec-list dt,
.card--dark .spec-list dt { color: var(--color-primary); }

.band--ink strong,
.card--dark strong { color: var(--color-canvas); }

.band--ink .note,
.card--dark .note { color: var(--color-canvas-soft); }

.band--ink li,
.card--dark li { color: var(--color-canvas-soft); }

.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: var(--space-xl); }

.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.grid {
  display: grid;
  gap: var(--space-xl);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ==========================================================================
   [6] ヘッダー・ナビゲーション
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-canvas);
  box-shadow: var(--shadow-nav);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 72px;
  padding-block: var(--space-sm);
}

.site-logo { flex: 0 0 auto; line-height: 0; }
.site-logo img { width: 260px; max-width: 52vw; }

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-canvas-soft);
  border: 0;
  border-radius: var(--radius-xl);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  cursor: pointer;
}
.nav-toggle__bars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.global-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav__list li { margin: 0; }

.global-nav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  text-decoration: none;
}
.global-nav__link:hover { background: var(--color-canvas-soft); }

.global-nav__link[aria-current="page"] {
  background: var(--color-primary-pale);
  color: var(--color-ink-deep);
}

.global-nav__link small {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--weight-normal);
  color: var(--color-mute);
}

.header-cta { margin-left: var(--space-md); }


/* ==========================================================================
   [7] ヒーロー
   ========================================================================== */

.hero {
  background: var(--color-canvas-soft);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.hero__title {
  margin-bottom: var(--space-lg);
  font-size: var(--fs-hero);
  letter-spacing: -.01em;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-body);
  max-width: 40ch;
}

.hero__badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  max-width: 100%;
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-canvas);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  color: var(--color-ink-deep);
}

/* 下層ページ用の細いヒーロー */
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-hero__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);   /* 24 〜 32px。本文中の見出しより一段大きく */
  margin-bottom: var(--space-md);
}
.page-hero p { max-width: 62ch; }

/* スライドショー */
.slideshow {
  position: relative;
  background: var(--color-canvas);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}
.slideshow__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.slideshow__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.slideshow__frame img.is-active { opacity: 1; }
.slideshow__caption {
  margin: var(--space-md) var(--space-sm) var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-mute);
}


/* ==========================================================================
   [8] お知らせ
   ========================================================================== */

.news { border-top: 1px solid var(--color-line); }

.news__list { margin: 0; }

.news__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}

.news__date {
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  color: var(--color-mute);
  white-space: nowrap;
}

.news__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.badge-new {
  display: inline-block;
  padding: 0 var(--space-sm);
  background: var(--color-primary-pale);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--weight-strong);
  color: var(--color-positive-deep);
  letter-spacing: .06em;
}

/* スマホで開閉するアコーディオン見出し */
.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  margin: 0 0 var(--space-lg);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--fs-display);
  font-weight: var(--weight-display);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-align: left;
  cursor: default;
}
.accordion-head__icon { display: none; }


/* ==========================================================================
   [9] 情報ボックス
   ========================================================================== */

.callout {
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.callout--green  { background: var(--color-primary-pale); }
.callout--sage   { background: var(--color-canvas-soft); }
.callout--notice {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
}
.callout h2, .callout h3 { margin-bottom: var(--space-md); }

/* 営業時間などの定義リスト */
.spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
}
.spec-list dt {
  font-weight: var(--weight-strong);
  color: var(--color-ink);
}
.spec-list dd { margin: 0; }

/* 表 */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.table th,
.table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  background: var(--color-canvas-soft);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--color-ink);
  white-space: nowrap;
}
.table th[scope="row"] {
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  white-space: nowrap;
}

/* 年表 */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  margin: 0;
}
.timeline li:last-child { border-bottom: 0; }
.timeline time {
  font-weight: var(--weight-strong);
  color: var(--color-ink-deep);
  font-size: var(--fs-small);
}

/* 埋め込み（カレンダー・地図・PDF） */
.embed {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-canvas);
}
.embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
.embed--calendar iframe { height: 420px; }
.embed--map iframe      { height: 380px; }
.embed--doc iframe      { height: 640px; }

/* 図版 */
.figure { margin: 0; }
.figure img { border-radius: var(--radius-lg); width: 100%; }
.figure figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-mute);
}

/* 改修前後の比較 */
.compare {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.compare__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.compare__item { margin: 0; }
.compare__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-xxs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--weight-strong);
}
.compare__label--before {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
}
.compare__label--after {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.compare__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.compare__item figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-body);
}

/* 2カラム（文章＋画像） */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.split__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 外部リンクの注記 */
.ext-note {
  font-size: var(--fs-caption);
  color: var(--color-mute);
  white-space: nowrap;
}

/* SNS */
.sns-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns-list li { margin: 0; }
.sns-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-canvas);
  border-radius: var(--radius-xl);
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  text-decoration: none;
}
.sns-list a:hover { background: var(--color-primary-pale); }
.sns-list img { height: 20px; width: auto; }


/* ==========================================================================
   [10] フッター
   ========================================================================== */

.site-footer {
  background: var(--color-ink);
  color: var(--color-canvas-soft);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer a { color: var(--color-primary); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(232, 235, 230, .18);
}

.site-footer h2 {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sub);
  color: var(--color-canvas);
}

.site-footer__logo {
  width: 220px;
  margin-bottom: var(--space-lg);
  background: var(--color-canvas);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.footer-nav { margin: 0; padding: 0; list-style: none; }
.footer-nav li { margin-bottom: var(--space-sm); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-size: var(--fs-caption);
}

.pagetop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid rgba(232, 235, 230, .4);
  border-radius: var(--radius-xl);
  font-size: var(--fs-small);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.pagetop:hover { background: rgba(232, 235, 230, .1); }


/* ==========================================================================
   [11] レスポンシブ
   ========================================================================== */

/* --- タブレット（1023px 以下） --- */
@media (max-width: 1023px) {

  .site-header__inner { flex-wrap: wrap; }

  .nav-toggle { display: inline-flex; }

  .global-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding-bottom: var(--space-lg);
  }
  .global-nav.is-open { display: flex; }

  .global-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xxs);
  }
  .global-nav__link {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
  }

  .header-cta {
    margin: var(--space-md) 0 0;
    width: 100%;
  }

  .hero__inner { grid-template-columns: 1fr; }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- スマートフォン（767px 以下） --- */
@media (max-width: 767px) {

  .container { padding-inline: var(--space-lg); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; }

  .compare__pair { grid-template-columns: 1fr; }

  .news__item { grid-template-columns: 1fr; gap: var(--space-xxs); }

  .timeline li { grid-template-columns: 1fr; gap: var(--space-xxs); }

  .spec-list { grid-template-columns: 1fr; gap: var(--space-xxs); }
  .spec-list dd { margin-bottom: var(--space-sm); }

  .site-footer__grid { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }

  /* 表は折り返して1画面に収める（横スクロールを避ける） */
  .table thead th,
  .table th[scope="row"] { white-space: normal; }
  .table th,
  .table td { padding: var(--space-sm) var(--space-md); }

  .embed--calendar iframe { height: 360px; }
  .embed--doc iframe      { height: 480px; }

  /* お知らせは見出しタップで開閉 */
  .accordion-head { cursor: pointer; }
  .accordion-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: var(--color-canvas-soft);
    border-radius: var(--radius-pill);
    font-size: 1rem;
  }
  .accordion-body[hidden] { display: none; }
}

/* --- 印刷 --- */
@media print {
  .site-header, .site-footer, .btn-row, .nav-toggle, .pagetop { display: none; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 0; }
}

/* --- アニメーションを減らす設定に配慮 --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .slideshow__frame img { transition: none; }
}


/* ==========================================================================
   [12] WordPress用の追加スタイル
   ------------------------------------------------------------------------
   投稿エディター（ブロックエディター）が出力するクラスへの対応です。
   ========================================================================== */

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* エディターで入力した本文 */
.entry-content > * + * { margin-top: var(--space-lg); }
.entry-content h2 { margin-top: var(--space-3xl); }
.entry-content h3 { margin-top: var(--space-2xl); }
.entry-content img { border-radius: var(--radius-lg); }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

.entry-content blockquote {
	margin: 0;
	padding: var(--space-lg) var(--space-xl);
	background: var(--color-canvas-soft);
	border-radius: var(--radius-lg);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}
.entry-content th,
.entry-content td {
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}

/* 画像の配置 */
.alignleft {
	float: left;
	margin: 0 var(--space-xl) var(--space-lg) 0;
}
.alignright {
	float: right;
	margin: 0 0 var(--space-lg) var(--space-xl);
}
.aligncenter {
	display: block;
	margin-inline: auto;
}
.alignwide,
.alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	margin-top: var(--space-sm);
	font-size: var(--fs-small);
	color: var(--color-mute);
}

.sticky .news__title::before { content: "★ "; }

/* ページ送り */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-2xl);
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-md);
	background: var(--color-canvas-soft);
	border-radius: var(--radius-md);
	font-size: var(--fs-small);
	font-weight: var(--weight-strong);
	color: var(--color-ink);
	text-decoration: none;
}
.page-numbers.current {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* 管理バーが出ているときに固定ヘッダーが隠れないようにする */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 767px) {
	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 var(--space-lg);
	}
}