@charset "UTF-8";
/* リニューアルの共通デザイン（2026-10-23 案）
   既存の main.css はそのまま使い、このファイルで「決まり」を定義して上書きする。
   1rem = 20px（html の font-size。既存のまま）。区切り幅も既存に合わせて 959px / 520px。 */

:root {
  /* ---- 色 ---- */
  --c-navy: #003867;      /* 基本色：見出し・ボタン */
  --c-sky: #43bfef;       /* 強調色：アクセント・リンク */
  --c-text: #1e1e1e;      /* 本文 */
  --c-text-sub: #5b6b7a;  /* 補足 */
  --c-bg: #ffffff;        /* 背景 */
  --c-bg-tint: #f2f7fb;   /* 淡い背景（区切り） */
  --c-line: #d6e1ea;      /* 罫線 */
  --c-alert: #dc3232;     /* 注意・必須 */

  /* ---- 余白（4の倍数・7段階） ---- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 128px;

  /* ---- 文字の大きさ ---- */
  --f-page: 2.2rem;   /* ページ見出し 44px */
  --f-h2: 1.6rem;     /* 大見出し 32px */
  --f-h3: 1.2rem;     /* 中見出し 24px */
  --f-h4: 0.95rem;    /* 小見出し 19px */
  --f-body: 0.9rem;   /* 本文 18px */
  --f-note: 0.75rem;  /* 補足 15px */

  /* ---- 動き ---- */
  --motion-distance: 16px;
  --motion-duration: 0.4s;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 959px) {
  :root {
    --s-5: 48px;
    --s-6: 64px;
    --s-7: 80px;
    --f-page: 1.6rem;   /* 32px */
    --f-h2: 1.3rem;     /* 26px */
    --f-h3: 1.05rem;    /* 21px */
    --f-h4: 0.9rem;     /* 18px */
    --f-body: 0.8rem;   /* 16px */
    --f-note: 0.7rem;   /* 14px */
  }
}

/* ======== 下地 ======== */
.r-page {
  color: var(--c-text);
  font-size: var(--f-body);
  line-height: 1.9;
}
.r-page p { margin-bottom: var(--s-2); }
.r-page p:last-child { margin-bottom: 0; }

/* セクション：縦の余白はここだけで決める（ページごとにばらつかせない） */
.r-section { padding: var(--s-6) 0; }
.r-section--tint { background: var(--c-bg-tint); }
.r-section--navy { background: var(--c-navy); color: #fff; }
.r-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 var(--s-4);
}
@media screen and (max-width: 959px) {
  .r-container { padding: 0 var(--s-2); }
}
/* まとまりの間 */
.r-stack > * + * { margin-top: var(--s-4); }
.r-stack--tight > * + * { margin-top: var(--s-2); }

/* ======== 見出し（★アイコンは使わない） ======== */
.r-h2 {
  color: var(--c-navy);
  font-size: var(--f-h2);
  font-weight: 700;
  line-height: 1.35;
  padding-top: var(--s-3);
  position: relative;
}
/* 上の細い水色のバーが、新しい見出しの目印 */
.r-h2::before {
  background: var(--c-sky);
  border-radius: 2px;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}
.r-h2__en {
  color: var(--c-sky);
  display: block;
  font-size: var(--f-note);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: var(--s-1);
}
.r-section--navy .r-h2 { color: #fff; }

.r-h3 {
  border-left: 4px solid var(--c-sky);
  color: var(--c-navy);
  font-size: var(--f-h3);
  font-weight: 700;
  line-height: 1.4;
  padding-left: var(--s-2);
}
.r-h4 {
  color: var(--c-navy);
  font-size: var(--f-h4);
  font-weight: 700;
  line-height: 1.5;
}
.r-note {
  color: var(--c-text-sub);
  font-size: var(--f-note);
  line-height: 1.7;
}

/* ======== ボタン ======== */
.r-btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--f-h4);
  font-weight: 700;
  gap: var(--s-1);
  justify-content: center;
  line-height: 1.2;
  min-height: 56px;
  min-width: 200px;
  padding: 0 var(--s-4);
  position: relative;
  text-align: center;
  transition: background-color 0.2s var(--motion-ease), color 0.2s var(--motion-ease);
}
.r-btn--main { background: var(--c-navy); border: 2px solid var(--c-navy); color: #fff; }
.r-btn--main:hover { background: #fff; color: var(--c-navy); }
.r-btn--sub { background: #fff; border: 2px solid var(--c-navy); color: var(--c-navy); }
.r-btn--sub:hover { background: var(--c-navy); color: #fff; }
.r-btn__arrow { font-size: 0.8em; }
@media screen and (max-width: 959px) {
  .r-btn { min-height: 48px; min-width: 160px; padding: 0 var(--s-3); width: 100%; }
}
/* 本文の中のリンク（既存の c-link と同じ見た目） */
.r-link {
  color: var(--c-sky);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ======== 動き（要所だけ・1回だけ） ======== */
/* JavaScript が動くときだけ隠す。動かないときは、最初から表示されたままにする */
.js-motion .r-reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.js-motion .r-reveal.is-shown { opacity: 1; transform: none; }
/* 最初の画面（ファーストビュー）には動きを付けない＝表示を遅らせない */
.r-reveal--instant { opacity: 1; transform: none; }
/* 続けて出るときだけ、わずかにずらす */
.r-reveal:nth-child(2) { transition-delay: 0.08s; }
.r-reveal:nth-child(3) { transition-delay: 0.16s; }
.r-reveal:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .r-reveal { opacity: 1; transform: none; transition: none; }
  .r-page * { animation: none !important; scroll-behavior: auto !important; }
}

/* ======== 見本ページ用（デザインの決まりのページだけで使う） ======== */
.r-spec { border: 1px solid var(--c-line); border-radius: 12px; padding: var(--s-3); }
.r-spec__label {
  color: var(--c-text-sub);
  font-size: var(--f-note);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}
.r-grid { display: grid; gap: var(--s-3); }
.r-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media screen and (max-width: 959px) {
  .r-grid--2, .r-grid--3, .r-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
.r-swatch { border-radius: 12px; height: 88px; border: 1px solid var(--c-line); }
.r-table { border-collapse: collapse; width: 100%; }
.r-table th, .r-table td {
  border-bottom: 1px solid var(--c-line);
  font-size: var(--f-note);
  padding: var(--s-2) var(--s-1);
  text-align: left;
  vertical-align: top;
}
.r-table th { color: var(--c-navy); white-space: nowrap; }
.r-scroll { overflow-x: auto; }

/* ======== トップページ案の部品 ======== */
/* ファーストビューのすぐ下に置く案内（営業時間と主な導線） */
.r-hero-bar {
  background: var(--c-navy);
  color: #fff;
}
.r-hero-bar__inner {
  align-items: center;
  display: flex;
  gap: var(--s-4);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
  padding: var(--s-3) var(--s-4);
}
.r-hero-bar__hours { font-size: var(--f-h4); font-weight: 700; line-height: 1.5; }
.r-hero-bar__hours span { display: block; font-size: var(--f-note); font-weight: 500; opacity: 0.85; }
.r-hero-bar__actions { display: flex; gap: var(--s-2); }
.r-hero-bar .r-btn--main { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-navy); }
.r-hero-bar .r-btn--main:hover { background: #fff; border-color: #fff; }
.r-hero-bar .r-btn--sub { background: transparent; border-color: #fff; color: #fff; }
.r-hero-bar .r-btn--sub:hover { background: #fff; color: var(--c-navy); }
@media screen and (max-width: 959px) {
  .r-hero-bar__inner { display: block; padding: var(--s-3) var(--s-2); }
  .r-hero-bar__hours { text-align: center; }
  .r-hero-bar__actions { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
}

/* 体験の紹介（大きな写真カード） */
.r-zone { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-zone__item { position: relative; }
.r-zone__link {
  border-radius: 20px;
  display: block;
  overflow: hidden;
  position: relative;
}
.r-zone__image {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto; /* HTMLの height 属性より CSS を優先させる */
  object-fit: cover;
  transition: transform 0.4s var(--motion-ease);
  width: 100%;
}
.r-zone__link:hover .r-zone__image { transform: scale(1.03); }
.r-zone__caption {
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0, 56, 103, 0.82) 0%, rgba(0, 56, 103, 0) 60%);
  bottom: 0;
  color: #fff;
  display: flex;
  font-size: var(--f-h3);
  font-weight: 700;
  left: 0;
  line-height: 1.4;
  padding: var(--s-4) var(--s-3) var(--s-3);
  position: absolute;
  right: 0;
  top: 0;
}
/* 1枚目だけ大きく見せて、ブロックの繰り返しに見えないようにする */
.r-zone__item--wide { grid-column: 1 / -1; }
.r-zone__item--wide .r-zone__image { aspect-ratio: 21 / 9; }
@media screen and (max-width: 959px) {
  .r-zone { grid-template-columns: minmax(0, 1fr); }
  .r-zone__item--wide .r-zone__image { aspect-ratio: 16 / 10; }
}

/* 代表コンテンツ（ホワイトパズル）を目立たせる帯 */
.r-feature { align-items: center; display: grid; gap: var(--s-5); grid-template-columns: 1.1fr 1fr; }
.r-feature__image { border-radius: 20px; display: block; height: auto; width: 100%; }
@media screen and (max-width: 959px) {
  .r-feature { gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
}

/* イベントと新着情報の2段組 */
.r-two { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
@media screen and (max-width: 959px) {
  .r-two { gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
}
.r-topics { display: grid; gap: 0; }
.r-topics__item { border-bottom: 1px solid var(--c-line); }
.r-topics__link {
  align-items: center;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: auto auto 1fr;
  padding: var(--s-2) 0;
}
.r-topics__date { color: var(--c-text-sub); font-size: var(--f-note); }
.r-topics__cat { border-radius: 999px; color: #fff; font-size: 0.6rem; padding: 2px 12px; white-space: nowrap; }
.r-topics__title { font-size: var(--f-body); font-weight: 500; line-height: 1.5; }
@media screen and (max-width: 959px) {
  .r-topics__link { grid-template-columns: auto 1fr; }
  .r-topics__title { grid-column: 1 / -1; }
}

/* 施設の案内（アクセス） */
.r-info { display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: auto 1fr; }
.r-info dt { color: var(--c-sky); font-size: var(--f-note); font-weight: 700; }
.r-info dd { font-size: var(--f-body); }

/* 読み込み中・読み込み失敗の表示は、必要なときだけ出す（今のトップと同じ挙動） */
.r-page .js-event-list-loading,
.r-page .js-calendar-loading { display: none; }
.r-page .js-event-list-error,
.r-page .js-calendar-error { display: none; }
.r-page .js-event-list-error.js-active,
.r-page .js-calendar-error.js-active { display: block; }