@charset "UTF-8";
/* ==========================================================================
   処理状況確認見学会2026 申込フォーム（デモ）
   アースサポート株式会社
   - 外部CSS / Webフォント / CDN に依存しない自己完結スタイル
   - 色は :root のカスタムプロパティで一元管理
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* ブランドカラー */
  --color-primary:        #0E7A4F;  /* エメラルドグリーン */
  --color-primary-dark:   #0A5637;  /* 濃緑 */
  --color-primary-deep:   #073B26;  /* 最も濃い緑（フッター帯など） */
  /* 明るい緑。白背景に対して 2.99:1 のため【装飾・アイコン・罫線専用】。
     小さな文字には使わず、文字には --color-primary（5.36:1）を使うこと。 */
  --color-secondary:      #34A96B;
  --color-accent:         #8CC63F;  /* 葉のライトグリーン */
  --color-sky:            #2E9FD8;  /* 水色 */
  --color-sky-dark:       #1B6FA0;  /* 水色（文字用・コントラスト確保） */
  --color-sky-light:      #EAF6FC;  /* フォーカス時の背景 */

  /* ステップ表示（青系グラデーション） */
  --color-step-from:      #1272BE;
  --color-step-to:        #0B5E9E;

  /* 面・文字 */
  --color-background:     #F2F8F4;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F6FAF7;
  --color-text:           #1D2B26;
  --color-muted:          #556660;
  --color-border:         #D6E3DC;
  --color-border-strong:  #B9CEC4;

  /* 状態色 */
  --color-error:          #C62828;
  --color-error-bg:       #FDF1F1;
  --color-error-border:   #D93B3B;
  --color-success:        #1B7F4B;
  --color-warn-bg:        #FFFBEB;
  --color-warn-border:    #E9D9A2;

  /* フォーカス */
  --color-focus:          #0B5E9E;

  /* タイポグラフィ
     環境をテーマにした「やさしい・かわいい」印象を出すため、丸ゴシック系を優先する。
     Webフォントは使わず、OS標準フォントのみで構成している（自己完結性のため）。
       macOS / iOS … ヒラギノ丸ゴ（丸ゴシック）
       Windows    … BIZ UDPGothic（ユニバーサルデザイン書体。Win10 1809以降に標準搭載）
                     HG丸ｺﾞｼｯｸM-PRO（Office同梱。あれば使用）
       Android    … Noto Sans JP */
  --font-base: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic Pro",
               "BIZ UDPGothic", "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic UI", "Meiryo UI", Meiryo,
               "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 見出し・数字・ボタン用（より丸くやわらかい印象） */
  --font-display: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "HG丸ｺﾞｼｯｸM-PRO",
                  "BIZ UDPGothic", "Yu Gothic UI", Meiryo, "Noto Sans JP",
                  system-ui, "Segoe UI", sans-serif;

  /* レイアウト */
  --page-max: 1120px;
  --gutter: clamp(16px, 4.4vw, 40px);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  /* 影 */
  --shadow-s: 0 1px 3px rgba(16, 46, 34, .07);
  --shadow-m: 0 6px 18px rgba(16, 46, 34, .09);
  --shadow-l: 0 16px 40px rgba(16, 46, 34, .13);

  /* モーション */
  --ease: cubic-bezier(.22, .68, .3, 1);
  --dur-fast: .2s;
  --dur: .28s;
  --dur-slow: .45s;

  /* ヘッダー高さ（JSでは変更しない） */
  --header-h: 60px;
}

/* --------------------------------------------------------------------------
   2. リセット / ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1rem;              /* スマートフォン本文 16px */
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; border: 0; }
address { font-style: normal; }

a { color: var(--color-sky-dark); }
a:hover { color: var(--color-primary); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* フォーカスリングは絶対に消さない（代替表示を必ず用意する） */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. ユーティリティ
   -------------------------------------------------------------------------- */
.visually-hidden {
  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;
}

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--color-primary-dark);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.ext-icon {
  display: inline-flex;
  vertical-align: -1px;
  margin-left: .25em;
  opacity: .75;
}

/* 意味のまとまりを保って改行させたい箇所に使う */
.nb { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--dur) var(--ease);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header {
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
  }
}
.site-header.is-compact { box-shadow: var(--shadow-m); }

.site-header__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: min-height var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-header.is-compact .site-header__inner { min-height: 52px; padding-top: 5px; padding-bottom: 5px; }

.site-header__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.site-header__logo {
  width: auto;
  height: 20px;
  transition: height var(--dur) var(--ease);
}
.site-header.is-compact .site-header__logo { height: 17px; }

.site-header__event {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--color-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__year {
  display: inline-block;
  margin-left: .18em;
  padding: 0 .32em;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-size: .92em;
}

.site-header__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 44px;
  padding: 0 .9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(10, 86, 55, .25);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header__cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 86, 55, .32);
}
.site-header__cta-icon { display: inline-flex; }

/* --------------------------------------------------------------------------
   5. メインビジュアル
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(140, 198, 63, .16), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F0F8F1 55%, #E7F4EA 100%);
  padding-bottom: 46px;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 0;
}

.hero__media {
  position: relative;
  line-height: 0;
}
/* メインビジュアルはインラインSVG。
   img要素だとページ側のCSSで中身を制御できず、再生/停止の切り替えができないため。
   preserveAspectRatio="xMidYMid slice" が object-fit: cover の役割を果たす。 */
.hero__img {
  display: block;
  width: 100%;
  /* パッカー車が走る道路まで見えるだけの高さを確保する
     （低くしすぎるとトラックが下のパネルに隠れてしまう） */
  height: clamp(196px, 56vw, 284px);
}

.hero__panel {
  position: relative;
  margin: -18px max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
  padding: clamp(20px, 5.5vw, 34px) clamp(18px, 5vw, 34px) clamp(22px, 5.5vw, 34px);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}

.hero__eyebrow {
  margin: 0 0 .55em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  color: var(--color-primary);
}

.hero__title { margin: 0 0 .6em; }
.hero__title-main {
  display: block;
  font-size: clamp(1.6rem, 6.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.28;
  color: var(--color-primary-dark);
}
.hero__year {
  font-weight: 800;
  font-style: normal;
  color: var(--color-primary);
}
.hero__title-sub {
  display: block;
  margin-top: .12em;
  font-size: clamp(1.25rem, 5vw, 2.15rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-primary-dark);
}

.hero__date {
  display: flex;
  align-items: center;
  gap: .55em;
  margin: 0 0 .9em;
  padding-top: .85em;
  border-top: 3px solid var(--color-accent);
  font-size: clamp(1.02rem, 4.3vw, 1.5rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-primary-dark);
}
.hero__date-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: #E7F4EA;
  color: var(--color-primary);
  font-size: .74em;
}
.hero__date-text { min-width: 0; }

.hero__catch {
  margin: 0 0 .12em;
  font-size: clamp(1.02rem, 4.2vw, 1.35rem);
  font-weight: 700;
  color: var(--color-primary);
}
.hero__lead {
  margin: 0 0 1.4em;
  font-size: clamp(.82rem, 3.3vw, .98rem);
  letter-spacing: .04em;
  color: var(--color-muted);
}

.hero__cta { width: 100%; }

/* --------------------------------------------------------------------------
   5-2. メインビジュアルのアニメーション
   --------------------------------------------------------------------------
   動きの制御は3段階：
     ① 何も指定なし            … OSの設定に従う（既定）
     ② html.motion-on          … 利用者が「再生」を選択（OSの低減設定より優先）
     ③ html.motion-off         … 利用者が「停止」を選択
   -------------------------------------------------------------------------- */
@keyframes es-drive   { 0% { transform: translateX(-340px); } 100% { transform: translateX(1360px); } }
@keyframes es-roll    { to { transform: rotate(360deg); } }
@keyframes es-cycle   { to { transform: rotate(360deg); } }
@keyframes es-sunray  { to { transform: rotate(360deg); } }
@keyframes es-sunpulse{ 0%, 100% { transform: scale(1); opacity: .30; } 50% { transform: scale(1.12); opacity: .48; } }
@keyframes es-turbine { to { transform: rotate(360deg); } }
@keyframes es-smoke {
  0%   { opacity: 0;   transform: translateY(6px)    scale(.45); }
  15%  { opacity: .85; }
  70%  { opacity: .48; }
  100% { opacity: 0;   transform: translateY(-104px) scale(1.85); }
}
@keyframes es-sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes es-leaf {
  0%, 100% { transform: translate(0, 0)      rotate(0deg); }
  25%      { transform: translate(7px, -9px)  rotate(7deg); }
  50%      { transform: translate(0, -14px)   rotate(-4deg); }
  75%      { transform: translate(-7px, -7px) rotate(6deg); }
}
@keyframes es-shine { 0%, 100% { opacity: .28; } 50% { opacity: .62; } }

/* 回転させる要素は自分の中心を基準にする（指定しないとSVG全体の原点で回ってしまう） */
.es-wheel, .es-cycle, .es-sunray, .es-sunglow, .es-blades, .es-cloud, .es-leaf {
  transform-box: fill-box;
  transform-origin: center;
}
.es-smoke { transform-box: fill-box; transform-origin: center bottom; opacity: 0; }

.es-truck   { animation: es-drive    19s   linear      infinite; }
.es-wheel   { animation: es-roll     1.05s linear      infinite; }
.es-cycle   { animation: es-cycle    18s   linear      infinite; }
.es-sunray  { animation: es-sunray   60s   linear      infinite; }
.es-sunglow { animation: es-sunpulse 6s    ease-in-out infinite; }
.es-blades  { animation: es-turbine  7s    linear      infinite; }
.es-smoke   { animation: es-smoke    7s    ease-out    infinite; }
.es-cloud   { animation: es-sway     26s   ease-in-out infinite; }
.es-leaf    { animation: es-leaf     9s    ease-in-out infinite; }
.es-shine   { animation: es-shine    5s    ease-in-out infinite; }

.es-smoke.d1 { animation-delay: 0s; }
.es-smoke.d2 { animation-delay: 1.4s; }
.es-smoke.d3 { animation-delay: 2.8s; }
.es-smoke.d4 { animation-delay: 4.2s; }
.es-smoke.d5 { animation-delay: 5.6s; }
.es-smoke.s1 { animation-delay: .7s;  animation-duration: 8s; }
.es-smoke.s2 { animation-delay: 3.5s; animation-duration: 8s; }
.es-cloud.c2 { animation-duration: 34s; animation-delay: -8s; }
.es-cloud.c3 { animation-duration: 30s; animation-delay: -16s; }
.es-leaf.l2  { animation-duration: 11s; animation-delay: -3s; }
.es-leaf.l3  { animation-duration: 8s;  animation-delay: -5s; }
.es-leaf.l4  { animation-duration: 12s; animation-delay: -7s; }
.es-shine.h2 { animation-delay: -1.7s; }
.es-shine.h3 { animation-delay: -3.1s; }

/* ② OSが「動きを減らす」設定のとき → 停止
      ただし利用者が「再生」を選んだ場合（.motion-on）は除く */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .es-truck,
  html:not(.motion-on) .es-wheel,
  html:not(.motion-on) .es-cycle,
  html:not(.motion-on) .es-sunray,
  html:not(.motion-on) .es-sunglow,
  html:not(.motion-on) .es-blades,
  html:not(.motion-on) .es-smoke,
  html:not(.motion-on) .es-cloud,
  html:not(.motion-on) .es-leaf,
  html:not(.motion-on) .es-shine { animation: none; }

  /* 停止時もトラックが画面外へ消えないよう、道路の中央に置く */
  html:not(.motion-on) .es-truck   { transform: translateX(430px); }
  html:not(.motion-on) .es-smoke   { opacity: .34; }
  html:not(.motion-on) .es-sunglow { opacity: .34; }
}

/* ③ 利用者が「停止」を選んだとき */
html.motion-off .es-truck,
html.motion-off .es-wheel,
html.motion-off .es-cycle,
html.motion-off .es-sunray,
html.motion-off .es-sunglow,
html.motion-off .es-blades,
html.motion-off .es-smoke,
html.motion-off .es-cloud,
html.motion-off .es-leaf,
html.motion-off .es-shine { animation: none; }
html.motion-off .es-truck   { transform: translateX(430px); }
html.motion-off .es-smoke   { opacity: .34; }
html.motion-off .es-sunglow { opacity: .34; }

/* --------------------------------------------------------------------------
   5-3. アニメーション再生／停止ボタン
   -------------------------------------------------------------------------- */
.motion-toggle-wrap { margin: 1em 0 0; }

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: .35rem .95rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.motion-toggle:hover {
  border-color: var(--color-primary);
  background: #F1F8F3;
}
.motion-toggle__icon { display: inline-flex; color: var(--color-primary); }
.motion-toggle__stop { display: none; }
/* 再生中は停止アイコンに切り替える */
.motion-toggle[aria-pressed="true"] .motion-toggle__play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__stop { display: inline; }

.hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.hero__wave svg { display: block; width: 100%; height: 46px; }

/* --------------------------------------------------------------------------
   6. セクション共通
   -------------------------------------------------------------------------- */
.section { padding: clamp(34px, 8vw, 60px) 0 0; }
.section:last-child { padding-bottom: clamp(34px, 8vw, 60px); }

.section__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 clamp(16px, 3.6vw, 26px);
  padding-left: 14px;
  border-left: 5px solid var(--color-accent);
}
.section__title-ja {
  font-size: clamp(1.28rem, 5.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--color-primary-dark);
}
.section__title-en {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.card {
  padding: clamp(18px, 4.6vw, 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.card p { line-height: 1.95; }
.card--intro p + p { margin-top: 1.1em; }
.card__note {
  margin-top: 1em;
  font-size: .85rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   7. 開催概要
   -------------------------------------------------------------------------- */
.outline {
  display: grid;
  gap: 12px;
}

.outline__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 4.2vw, 22px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.outline__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }

.outline__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(140deg, #E7F4EA, #DDF0F8);
  color: var(--color-primary);
}
.outline__item--deadline .outline__icon { background: linear-gradient(140deg, #FFF4DE, #FDE9E0); color: #B5651D; }

.outline__body { min-width: 0; flex: 1; }
.outline__label {
  margin: 0 0 .2em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-primary);
}
.outline__value {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
}
.outline__value--strong {
  font-size: clamp(1.1rem, 4.4vw, 1.28rem);
  color: var(--color-primary-dark);
}
.outline__day { display: block; }
.outline__no {
  display: inline-block;
  min-width: 1.5em;
  color: var(--color-primary);
  font-weight: 800;
}
.outline__note {
  margin: .3em 0 0;
  font-size: .88rem;
  font-weight: 400;
  color: var(--color-muted);
}

.maplink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  width: 100%;
  margin-top: .7em;
  min-height: 44px;
  padding: .45rem .7rem;
  border: 1.5px solid var(--color-sky);
  border-radius: 999px;
  background: var(--color-sky-light);
  color: var(--color-sky-dark);
  font-size: clamp(.78rem, 3.3vw, .9rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.maplink:hover {
  background: var(--color-sky-dark);
  border-color: var(--color-sky-dark);
  color: #fff;
  transform: translateY(-1px);
}
.maplink__icon { display: inline-flex; flex: none; }

/* --------------------------------------------------------------------------
   7-2. 空き状況カレンダー
   -------------------------------------------------------------------------- */
.card--calendar { padding: clamp(14px, 3.8vw, 28px); }

.cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: clamp(3px, .8vw, 6px);
  table-layout: fixed;
}

.cal__caption {
  caption-side: top;
  margin-bottom: .6em;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  text-align: center;
}

.cal__head {
  padding: .35em 0;
  border-radius: 6px;
  background: #EEF3F5;
  color: var(--color-muted);
  font-size: clamp(.7rem, 2.9vw, .85rem);
  font-weight: 700;
  text-align: center;
}
.cal__head.is-sun { color: #C0392B; }
.cal__head.is-sat { color: #1B6FA0; }

.cal__cell {
  height: clamp(42px, 11.5vw, 66px);
  padding: 2px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: clamp(.78rem, 3.1vw, .95rem);
  text-align: center;
  vertical-align: middle;
}
.cal__cell.is-sun { color: #C0392B; }
.cal__cell.is-sat { color: #1B6FA0; }
.cal__cell--blank { background: transparent; }

.cal__day { display: block; font-weight: 700; line-height: 1.2; }

/* 開催日 */
.cal__cell--event {
  background: linear-gradient(160deg, #E4F4EA, #D6EEDF);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
}
.cal__cell--event .cal__day {
  font-family: var(--font-display);
  font-size: clamp(.95rem, 3.9vw, 1.15rem);
  font-weight: 800;
}
.cal__seats {
  display: block;
  margin-top: 1px;
  font-size: clamp(.62rem, 2.6vw, .78rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
  white-space: nowrap;      /* セル内で折り返させない */
  color: var(--color-primary);
}

/* 凡例 */
.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.1em;
  margin: 1em 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text);
}
.cal__legend-item { display: inline-flex; align-items: center; gap: .4em; }
.cal__legend-swatch {
  width: 15px; height: 15px;
  border-radius: 4px;
  flex: none;
}
.cal__legend-swatch.is-open {
  background: linear-gradient(160deg, #E4F4EA, #D6EEDF);
  border: 2px solid var(--color-primary);
}
.cal__legend-swatch.is-full {
  background: linear-gradient(160deg, #FBECEC, #F6DEDE);
  border: 2px solid var(--color-error-border);
}

/* 満席 */
.cal__cell--full {
  background: linear-gradient(160deg, #FBECEC, #F6DEDE);
  border-color: var(--color-error-border);
  color: var(--color-error);
}
.cal__cell--full .cal__seats { color: var(--color-error); }

.cal__note {
  margin: .7em 0 0;
  font-size: .84rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 両日満席のお知らせ */
.full-notice {
  margin: 0 0 1.4em;
  padding: clamp(14px, 3.6vw, 20px);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error-border);
  border-radius: var(--radius-m);
  color: var(--color-error);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   8. 申込エリア / ステップ表示
   -------------------------------------------------------------------------- */
.section--apply { scroll-margin-top: calc(var(--header-h) + 12px); }

.stepper { margin-bottom: clamp(18px, 4vw, 26px); }
.stepper__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}

.stepper__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .8rem .25rem;
  background: #EEF3F5;
  color: #546169;   /* コントラスト比 5.68:1 を確保 */
  font-size: clamp(.73rem, 3.05vw, .95rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
.stepper__item + .stepper__item { border-left: 1px solid var(--color-border); }

.stepper__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65em; height: 1.65em;
  border-radius: 50%;
  background: rgba(0, 0, 0, .09);
  font-size: .95em;
  font-weight: 800;
}
.stepper__check { display: none; flex: none; }
.stepper__label { min-width: 0; }

.stepper__item.is-current {
  background: linear-gradient(135deg, var(--color-step-from), var(--color-step-to));
  color: #fff;
}
.stepper__item.is-current .stepper__num { background: rgba(255, 255, 255, .28); }

.stepper__item.is-done {
  background: #E4F1E9;
  color: var(--color-primary-dark);
}
.stepper__item.is-done .stepper__num { display: none; }
.stepper__item.is-done .stepper__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65em; height: 1.65em;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: .95em;
}

/* --------------------------------------------------------------------------
   9. パネル（入力 / 確認 / 完了）
   -------------------------------------------------------------------------- */
.panel {
  padding: clamp(18px, 4.8vw, 38px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}
.panel[hidden] { display: none; }
.panel.is-active { animation: panelIn var(--dur-slow) var(--ease) both; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.panel__title {
  margin: 0 0 .5em;
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  color: var(--color-primary-dark);
}
.panel__title:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.panel__lead {
  margin: 0 0 1.4em;
  font-size: .92rem;
  color: var(--color-muted);
}

.panel__actions {
  display: grid;
  gap: 12px;
  margin-top: clamp(22px, 5vw, 32px);
}

/* --------------------------------------------------------------------------
   10. ボタン
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 56px;
  padding: .7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.btn--wide { width: 100%; }
.btn__chev { font-size: .8em; line-height: 1; }
.btn__chev--left { margin-right: .1em; }

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 86, 55, .26);
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(10, 86, 55, .32);
}
.btn--primary:active { transform: translateY(0); }

/* ホバー時に光がすっと流れる（控えめな演出） */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn--primary:hover::after { animation: btnShine .75s var(--ease) 1; }
@keyframes btnShine {
  0%   { left: -60%; opacity: 0; }
  25%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-primary-dark);
}
.btn--ghost:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. フォーム
   -------------------------------------------------------------------------- */
.form { margin: 0; }

.badge {
  display: inline-block;
  margin-left: .4em;
  padding: .12em .5em;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  vertical-align: 2px;
  white-space: nowrap;
}
.badge--req { background: #FBE9E9; color: var(--color-error); border: 1px solid #F0C9C9; }
.badge--opt { background: #EEF2F0; color: var(--color-muted); border: 1px solid #DCE4E0; }

.req-legend { display: inline-flex; align-items: center; flex-wrap: wrap; }

.field { margin-bottom: clamp(20px, 4.6vw, 26px); }

.field__label {
  display: block;
  margin-bottom: .45em;
  font-size: .98rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}
.field:focus-within .field__label { color: var(--color-sky-dark); }

.field__input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: .78rem .9rem;
  font-size: 1rem;              /* iOSの自動ズーム防止のため16px以上 */
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(16, 46, 34, .04);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
/* 記載例（プレースホルダー）
   「薄い灰色」に見えつつ、白背景で 5.26:1・フォーカス時の水色背景でも 4.78:1 を確保している。
   これ以上薄くすると文字が読めない利用者が出るため、色を変えないこと。 */
.field__input::placeholder {
  color: #626F69;
  opacity: 1;              /* Firefox は既定で薄くするため打ち消す */
  font-weight: 400;
}
.field__input:focus::placeholder { color: #6B7873; }

.field__input:hover { border-color: var(--color-secondary); }

/* フォーカス演出：枠線→ブランドブルー、背景→淡い水色、控えめな影 */
.field__input:focus {
  outline: none;
  border-color: var(--color-sky-dark);
  background: var(--color-sky-light);
  box-shadow: 0 0 0 4px rgba(46, 159, 216, .18), 0 2px 10px rgba(11, 94, 158, .10);
}
/* キーボード操作時のフォーカスリングは必ず残す */
.field__input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.field__input--area {
  min-height: 120px;
  resize: vertical;
  line-height: 1.8;
}
.field__input--num { max-width: 180px; }

.field__select-wrap { position: relative; }
.field__select { padding-right: 2.8rem; cursor: pointer; }
.field__select-chev {
  position: absolute;
  top: 50%; right: .9rem;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-primary);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.field:focus-within .field__select-chev { color: var(--color-sky-dark); }

.field__help {
  margin: .45em 0 0;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.field__count {
  margin: .4em 0 0;
  font-size: .82rem;
  color: var(--color-muted);
  text-align: right;
}
.field__count.is-warn { color: #B5651D; font-weight: 700; }

/* エラー表示（色だけに依存せずアイコン＋文言で示す） */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: .4em;
  margin: .5em 0 0;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--color-error);
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "！";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em; height: 1.35em;
  margin-top: .12em;
  border-radius: 50%;
  background: var(--color-error);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
}

.field.is-error .field__label { color: var(--color-error); }
.field.is-error .field__input {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}
.field.is-error .field__input:focus {
  border-color: var(--color-error-border);
  box-shadow: 0 0 0 4px rgba(217, 59, 59, .18);
}

/* エラー要約 */
.error-summary {
  margin-bottom: clamp(18px, 4vw, 26px);
  padding: clamp(14px, 3.6vw, 20px);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error-border);
  border-radius: var(--radius-m);
  animation: panelIn var(--dur) var(--ease) both;
}
.error-summary[hidden] { display: none; }
.error-summary:focus-visible { outline: 3px solid var(--color-error); outline-offset: 3px; }

.error-summary__title {
  display: flex;
  align-items: flex-start;
  gap: .45em;
  margin: 0;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--color-error);
}
.error-summary__icon { flex: none; display: inline-flex; margin-top: .15em; }

.error-summary__list { margin: .7em 0 0; padding-left: 0; }
.error-summary__list:empty { display: none; }
.error-summary__list li { margin-top: .3em; }
.error-summary__list a {
  display: inline-block;
  min-height: 32px;
  padding: .2em 0;
  color: var(--color-error);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.error-summary__list a:hover { color: #8E1B1B; }

/* --------------------------------------------------------------------------
   12. お申し込み前の注意事項
   -------------------------------------------------------------------------- */
.notice {
  margin: clamp(24px, 5vw, 34px) 0 clamp(20px, 4.4vw, 26px);
  padding: clamp(16px, 4.2vw, 24px);
  background: linear-gradient(180deg, var(--color-warn-bg), #FDFCF4);
  border: 1.5px solid var(--color-warn-border);
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-m);
}
.notice__title {
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 0 0 .6em;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.notice__icon { flex: none; display: inline-flex; color: var(--color-primary); }
.notice__list { display: grid; gap: .6em; }
.notice__list li {
  position: relative;
  padding-left: 1.35em;
  font-size: .92rem;
  line-height: 1.8;
}
.notice__list li::before {
  content: "";
  position: absolute;
  top: .68em; left: .1em;
  width: .52em; height: .52em;
  border-radius: 50%;
  background: var(--color-accent);
}
.notice__list b { color: var(--color-primary-dark); }

/* --------------------------------------------------------------------------
   13. 同意チェック
   -------------------------------------------------------------------------- */
.field--agree { margin-bottom: 0; }

.agree {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7em;
  min-height: 48px;
  padding: clamp(13px, 3.4vw, 18px);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.agree:hover { border-color: var(--color-primary); background: #F1F8F3; }

.agree__box {
  position: absolute;
  width: 26px; height: 26px;
  opacity: 0;
  cursor: pointer;
}
.agree__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-top: .12em;
  border: 2px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  color: transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.agree__text { font-size: .95rem; font-weight: 700; line-height: 1.7; }

.agree__box:checked + .agree__mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.agree__box:focus-visible + .agree__mark {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.agree:has(.agree__box:focus-visible) { border-color: var(--color-sky-dark); box-shadow: 0 0 0 4px rgba(46, 159, 216, .16); }

.field--agree.is-error .agree {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}
.field--agree.is-error .agree__mark { border-color: var(--color-error-border); }
.field--agree.is-error .agree__text { color: var(--color-error); }

/* --------------------------------------------------------------------------
   14. 入力確認
   -------------------------------------------------------------------------- */
.confirm {
  border-top: 1px solid var(--color-border);
}
.confirm__row {
  display: grid;
  gap: .25rem;
  padding: 1rem .2rem;
  border-bottom: 1px solid var(--color-border);
}
.confirm__row--highlight {
  background: #F0F8F3;
  border-radius: var(--radius-s);
  padding-inline: .7rem;
}
.confirm__key {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
}
.confirm__val {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-text);
  min-height: 1.8em;
  /* 空白を含まない極端に長い入力でも枠外へはみ出させない */
  overflow-wrap: anywhere;
}
.confirm__val--multiline { white-space: pre-wrap; }
.confirm__val--break { overflow-wrap: anywhere; }
.confirm__val--strong { font-size: 1.1rem; color: var(--color-primary-dark); }
.confirm__val.is-empty { color: var(--color-muted); font-weight: 400; }

.demo-flag {
  margin: 1.1em 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  min-height: 1.2em;
}
.demo-flag:empty { margin: 0; min-height: 0; }
.demo-flag.is-sending { color: var(--color-sky-dark); }
.demo-flag.is-sending::before {
  content: "";
  display: inline-block;
  width: .9em; height: .9em;
  margin-right: .45em;
  vertical-align: -1px;
  border: 2px solid rgba(27, 111, 160, .28);
  border-top-color: var(--color-sky-dark);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   15. 申込完了
   -------------------------------------------------------------------------- */
.complete { text-align: center; }

.complete__icon {
  display: inline-flex;
  color: var(--color-primary);
  margin-bottom: .4em;
}
.complete__circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: drawCircle .6s var(--ease) forwards;
}
.complete__check {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: drawCheck .35s var(--ease) .5s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

.complete__title {
  margin: 0 0 .7em;
  font-size: clamp(1.28rem, 5.2vw, 1.75rem);
  color: var(--color-primary-dark);
}
.complete__title:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.complete__text {
  margin: 0 auto 1em;
  max-width: 40em;
  font-size: .98rem;
  line-height: 1.95;
  text-align: left;
}

.complete__demo {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  max-width: 40em;
  margin: 0 auto 1.2em;
  padding: .9rem 1.1rem;
  background: var(--color-warn-bg);
  border: 1.5px solid var(--color-warn-border);
  border-radius: var(--radius-m);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
  color: #7A5B12;
}
.complete__demo-tag {
  flex: none;
  padding: .1em .55em;
  border-radius: 4px;
  background: #B5651D;
  color: #fff;
  font-size: .72rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   16. 電話リンク
   -------------------------------------------------------------------------- */
/* 電話リンクはタップしやすいチップ状にする（タップ領域を確保する） */
.tel-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .45em;
  border-radius: 8px;
  background: rgba(46, 159, 216, .10);
  color: var(--color-sky-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tel-link:hover { background: var(--color-sky-dark); color: #fff; }

/* --------------------------------------------------------------------------
   17. フッター
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: clamp(30px, 7vw, 56px);
  background: var(--color-primary-dark);
  color: #E8F2EC;
}
.site-footer__wave {
  position: absolute;
  left: 0; right: 0; top: -1px;
  transform: translateY(-100%);
  line-height: 0;
  pointer-events: none;
}
.site-footer__wave svg { display: block; width: 100%; height: 46px; }

.site-footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(28px, 6.5vw, 46px) var(--gutter) calc(clamp(24px, 5.5vw, 40px) + env(safe-area-inset-bottom));
  text-align: center;
}

.sns {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: clamp(20px, 4.6vw, 28px);
}
.sns__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sns__link:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .26); }
.sns__img { width: 34px; height: 34px; }

.site-footer__logo-link {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  transition: transform var(--dur) var(--ease);
}
.site-footer__logo-link:hover { transform: translateY(-2px); }
.site-footer__logo { width: clamp(210px, 62vw, 300px); height: auto; }

.site-footer__address {
  margin: clamp(16px, 3.6vw, 22px) 0 0;
  font-size: .9rem;
  line-height: 2;
  color: #D5E7DC;
}
.site-footer__sep { margin: 0 .35em; opacity: .6; }
.site-footer .tel-link { color: #C7E9B0; }
.site-footer .tel-link:hover { color: #E4F6D8; }

.site-footer__links { margin: clamp(14px, 3.2vw, 20px) 0 0; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .4em;
  color: #C7E9B0;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__link:hover { color: #E4F6D8; }

.site-footer__demo {
  margin: clamp(14px, 3.2vw, 20px) auto 0;
  max-width: 34em;
  padding: .6rem .9rem;
  border: 1px dashed rgba(199, 233, 176, .5);
  border-radius: var(--radius-s);
  font-size: .8rem;
  line-height: 1.75;
  color: #BFDCCB;
}

.site-footer__copy {
  margin: clamp(16px, 3.6vw, 22px) 0 0;
  font-size: .78rem;
  letter-spacing: .06em;
  color: #A8C7B5;
}

/* フッター内（濃緑背景）のフォーカスリングは白 */
.site-footer :focus-visible { outline-color: #FFFFFF; }

/* --------------------------------------------------------------------------
   18. 追従TOPボタン
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  z-index: 90;
  right: max(10px, env(safe-area-inset-right));
  top: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 50px; height: 50px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(10, 86, 55, .34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(.86);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.to-top[hidden] { display: none; }
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}
.to-top.is-dim { opacity: .34; }
.to-top:hover { opacity: 1; }
.to-top__icon { display: inline-flex; margin-top: 2px; }
.to-top__text { font-size: .56rem; font-weight: 800; letter-spacing: .05em; line-height: 1; }

/* --------------------------------------------------------------------------
   18-2. デモ閲覧用ログインゲート
   ※ セキュリティ機能ではなく「目隠し」。詳細は index.html のコメント参照。
   -------------------------------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 82% 10%, rgba(140, 198, 63, .22), transparent 60%),
    linear-gradient(160deg, #0A5637 0%, #0E7A4F 55%, #14887E 100%);
  overflow-y: auto;
  animation: gateIn var(--dur) var(--ease) both;
}
.gate[hidden] { display: none; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }

/* ゲート表示中は背景をスクロールさせない */
body.is-gated { overflow: hidden; }

.gate__panel {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: clamp(24px, 6vw, 36px) clamp(20px, 5.5vw, 34px);
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: 0 24px 60px rgba(4, 40, 25, .38);
  text-align: center;
  animation: gatePanelIn var(--dur-slow) var(--ease) both;
}
@keyframes gatePanelIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.gate__mark { display: inline-flex; margin-bottom: .5em; }

.gate__title {
  margin: 0 0 .4em;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.55;
  color: var(--color-primary-dark);
}
.gate__lead {
  margin: 0 0 1.2em;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-muted);
}

/* 警告メッセージ（赤字＋ふるえるアニメーション） */
.gate__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  margin: 0 0 1.1em;
  padding: .7rem .8rem;
  background: var(--color-error-bg);
  border: 2px solid var(--color-error-border);
  border-radius: var(--radius-m);
  color: var(--color-error);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.5;
}
.gate__error[hidden] { display: none; }
.gate__error-icon { flex: none; display: inline-flex; }

/* 数秒間ふるえる */
@keyframes gateShake {
  0%, 100%                { transform: translateX(0); }
  6%, 18%, 30%, 42%       { transform: translateX(-7px); }
  12%, 24%, 36%, 48%      { transform: translateX(7px); }
  54%, 60%, 66%           { transform: translateX(-4px); }
  57%, 63%, 69%           { transform: translateX(4px); }
  75%                     { transform: translateX(0); }
}
.gate__error.is-shaking { animation: gateShake 2.4s ease-in-out 1; }

.gate__form { text-align: left; }
.gate__field { margin-bottom: 14px; }
.gate__label {
  display: block;
  margin-bottom: .3em;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--color-primary);
}
.gate__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: .7rem .9rem;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 10px;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.gate__input::placeholder { color: #626F69; opacity: 1; }
.gate__input:focus {
  outline: none;
  border-color: var(--color-sky-dark);
  background: var(--color-sky-light);
  box-shadow: 0 0 0 4px rgba(46, 159, 216, .18);
}
.gate__input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.gate.is-error .gate__input {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.gate__btn { margin-top: 6px; }

.gate__note {
  margin: 1.2em 0 0;
  padding-top: 1em;
  border-top: 1px dashed var(--color-border);
  font-size: .78rem;
  line-height: 1.75;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   18-3. 申込期限のウェーブアニメーション
   -------------------------------------------------------------------------- */
.wave-text { display: inline-block; }
.wave-text__char {
  display: inline-block;
  animation: waveChar 2.6s ease-in-out infinite;
  animation-delay: calc(var(--wi, 0) * .075s);
  will-change: transform;
}
@keyframes waveChar {
  0%, 55%, 100% { transform: translateY(0); }
  22%           { transform: translateY(-7px); }
  38%           { transform: translateY(2px); }
}

/* --------------------------------------------------------------------------
   18-4. ヘッダーのスクロール進捗バー
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary), var(--color-sky));
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   19. スクロール表示アニメーション
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. ブレークポイント
   -------------------------------------------------------------------------- */

/* --- 479px 以下（極小画面での余白最適化） --- */
@media (max-width: 479px) {
  .outline__item { gap: 11px; }
  .outline__icon { width: 40px; height: 40px; border-radius: 10px; }
  .outline__icon svg { width: 22px; height: 22px; }
  /* 会場リンクを1行に収めるため、極小画面では外部リンクアイコンを省略し余白を詰める
     （代替テキスト「新しいタブで開きます」は読み上げに残る） */
  .maplink .ext-icon { display: none; }
  .maplink { padding-inline: .45rem; gap: .25em; }
  .maplink__icon svg { width: 16px; height: 16px; }
}

/* --- 480px 以上 --- */
@media (min-width: 480px) {
  .site-header__logo { height: 23px; }
  .site-header__event { font-size: .76rem; }
  .site-header__cta { font-size: .9rem; padding: 0 1.1rem; min-height: 44px; }
  .hero__cta { width: auto; min-width: 260px; }
}

/* --- 768px 以上（タブレット） --- */
@media (min-width: 768px) {
  :root { --header-h: 72px; }

  body { font-size: 1.0625rem; }

  .site-header__logo { height: 28px; }
  .site-header__event { font-size: .9rem; }
  .site-header__cta { font-size: .95rem; min-height: 46px; padding: 0 1.3rem; }

  .hero__img { height: clamp(268px, 36vw, 340px); }
  .hero__panel { margin-inline: auto; max-width: 720px; margin-top: -40px; }

  .outline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .outline__item--venue { grid-column: 1 / -1; }
  .maplink { display: inline-flex; width: auto; padding-inline: .95rem; }

  .stepper__item { padding: 1rem .5rem; gap: .5em; }

  .panel__actions--dual {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 16px;
  }

  .confirm__row {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1.4rem;
    align-items: baseline;
    padding: 1.05rem .6rem;
  }
  .confirm__key { padding-top: .1em; }

  .to-top {
    top: auto;
    bottom: calc(28px + env(safe-area-inset-bottom));
    right: max(28px, env(safe-area-inset-right));
    width: 56px; height: 56px;
    transform: translateY(10px) scale(.9);
  }
  .to-top.is-visible { transform: translateY(0) scale(1); }
}

/* --- 1024px 以上（PC ワイドレイアウト） --- */
@media (min-width: 1024px) {
  .hero { padding-bottom: 58px; }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(30px, 4vw, 56px) var(--gutter) clamp(24px, 3vw, 40px);
  }

  .hero__panel {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .hero__media {
    grid-column: 2;
    grid-row: 1;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow-l);
  }
  .hero__img { height: clamp(360px, 33vw, 440px); }

  .hero__wave svg { height: 58px; }

  .section { padding-top: 64px; }

  .card--intro { padding: 40px; }
  .card--intro p { font-size: 1.02rem; }

  /* 会場カードは横1列のまま維持する。
     3列にすると「会場をGoogleマップで確認」が2行に折り返してしまうため。 */

  .panel { padding: 44px 48px; }

  .panel__actions { justify-content: center; }
  .panel__actions:not(.panel__actions--dual) { max-width: 420px; margin-inline: auto; }
  .panel__actions--dual { max-width: 720px; margin-inline: auto; }

  .field--narrow { max-width: 320px; }
}

/* --- 1280px 以上 --- */
@media (min-width: 1280px) {
  :root { --page-max: 1160px; }
  .hero__img { height: 456px; }
}

/* --------------------------------------------------------------------------
   21. モーション低減
   -------------------------------------------------------------------------- */
/* OSが「動きを減らす」設定のとき。
   ただし利用者が「アニメーションを再生」を選んだ場合（html.motion-on）は適用しない。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) { scroll-behavior: auto; }

  html:not(.motion-on) *,
  html:not(.motion-on) *::before,
  html:not(.motion-on) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html:not(.motion-on) .js .reveal,
  html:not(.motion-on).js .reveal { opacity: 1; transform: none; }

  html:not(.motion-on) .complete__circle,
  html:not(.motion-on) .complete__check { stroke-dashoffset: 0; }

  /* 追加演出も停止する */
  html:not(.motion-on) .wave-text__char { animation: none !important; transform: none !important; }
  html:not(.motion-on) .gate__error.is-shaking { animation: none !important; }
  html:not(.motion-on) .btn--primary:hover::after { animation: none !important; opacity: 0 !important; }
  html:not(.motion-on) .scroll-progress { transition: none !important; }

  html:not(.motion-on) .btn:hover,
  html:not(.motion-on) .outline__item:hover,
  html:not(.motion-on) .sns__link:hover,
  html:not(.motion-on) .site-header__cta:hover,
  html:not(.motion-on) .site-footer__logo-link:hover,
  html:not(.motion-on) .maplink:hover { transform: none; }
}

/* 利用者が「停止」を選んだとき（OSの設定にかかわらず止める） */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.motion-off { scroll-behavior: auto; }
html.motion-off .wave-text__char { animation: none !important; transform: none !important; }
html.motion-off .complete__circle,
html.motion-off .complete__check { stroke-dashoffset: 0; }
html.motion-off .js .reveal,
html.motion-off.js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .to-top, .hero__wave, .site-footer__wave,
  .panel__actions, .site-header__cta { display: none !important; }
  body { background: #fff; }
  .panel, .card, .outline__item { box-shadow: none; border-color: #999; }
}