@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- 土台の調整 ----
 * .section の左右24pxガター / .container 系の幅固定（デザインは狭幅でも余白は24px固定）
 * .ukn-w-880/900/1000/1100/1300 - セクションのコンテンツ幅（TOPは1300、下層はデザインどおり）
 * .ukn-grid             - auto-fit grid（--200/--260/--280/--290/--300/--320 で最小幅、--gap-* で間隔）
 * .ukn-reveal           - スクロールで下からふわっと表示（JSで is-visible 付与）
 *
 * ---- 共通パーツ ----
 * .ukn-label            - Jost の英字ラベル（ABOUT / MAP / RULES 等）--light:濃色地 --sm:小 --hero:ヒーロー用
 * .ukn-h2               - セクション見出し clamp(19,2.4vw,27)
 *   --white --lg(ABOUT) --jost(HOW TO ENJOY) --sm(BBQコース紹介 clamp(19,2.2vw,25))
 * .ukn-h2-sub           - 大見出し下の日本語サブ
 * .ukn-h3-line          - 下線付き小見出し（15px・1px罫）
 * .ukn-sechead          - 中央寄せの見出しブロック
 * .ukn-lead / .ukn-note - 本文リード（14px/lh2.3）・注記（12〜12.5px。--sm でさらに小）
 * .ukn-subnote          - 本文に添える補足（13px/lh2。セット内容など）
 * .ukn-btn              - 黒枠の角型ボタン（--sm:アンカー用）__icon / __label
 * .ukn-btn-ghost        - 白枠の角型ボタン（濃色地の上）
 * .ukn-btn-line         - 枠線1pxの横長ボタン（予約はこちらから）
 * .ukn-rules            - 施設利用上の注意事項バナー（濃紺・全ページ共通）__title / __text
 * .ukn-wave             - セクション境界の波型ディバイダー __svg / --cream
 * .ukn-wavesec          - 上下が波型に切り抜かれた淡いブルーのセクション __top / __bottom
 * .ukn-hours            - ご利用に関して（濃紺の項目名＋白の内容）__row / __k / __v
 * .ukn-rows / .ukn-row  - 料金の行リスト（左ラベル＋右価格）__k / __v  --sm --split(2列)
 * .ukn-def              - 定義リスト（--boxed:白枠付き --3col:食材メニュー）__row / __k / __v / __d
 * .ukn-list             - ● の箇条書き（禁止事項・注意事項）
 * .ukn-telbox           - 濃紺の電話CTAボックス __title / __tel / __note
 *
 * ---- ヘッダー / フッター ----
 * .ukn-header           - 写真の上に重なる透過ヘッダー（absolute）__inner / __logo / __tagline
 *   __right / __tel / __tel-num / __tel-note / __sns / __cta
 * .ukn-nav              - PCナビ（白文字・現在地とホバーでドット）__item / __ja
 * .ukn-nav-toggle / .ukn-spnav - SPナビの配色調整 __bottom / __tel / __note
 * .ukn-footer           - 濃紺の中央寄せフッター __inner / __tagline / __logo / __nav /
 *                         __nav-item / __sns / __info / __sep / __note / __bottom
 * .ukn-pagetop / .ukn-spbar - ページトップ・SP固定バーの配色と重なり調整
 *
 * ---- TOP ----
 * .ukn-mv               - メインビュー（100vh・CMSスライダー差し替え前提）__body / __logo / __catch
 * .ukn-sec--about       - ABOUT の縦余白 clamp(64,8vw,110) / clamp(56,7vw,96)
 * .ukn-about            - ABOUT の2カラム __body / __media / __img1 / __img2 / __wave
 * .ukn-sec--enjoy       - HOW TO ENJOY の縦余白（上40・下110）
 * .ukn-enjoy            - 楽しみ方カード __item / __thumb / __img / __hover / __circle /
 *                         __circle-ja / __circle-en / __en / __ja / __text
 * .ukn-map              - 遊泳区域案内図 __img / __note
 *   __scroll / __hint   - 767px以下で案内図を原寸幅(720px)のまま横スクロールさせる枠と案内文
 * .ukn-res              - ご予約・受付カード __item / __head / __icon / __title / __text /
 *                         __foot / __tel / __note
 * .ukn-access           - アクセス・駐車場（地図＋テキスト）__map / __body / __address / __tel
 *
 * ---- 下層 ----
 * .ukn-sec--80          - 下層ページのセクション縦余白80px（SP56px。--pt0/--pb0 が優先）
 * .ukn-sec--rules       - 注意事項バナー行の上余白56px（下層のみ）
 * .ukn-photo            - 4:3の写真ブロック（--62 で切り取り位置を下げる）
 * .ukn-hero             - 下層ページのヒーロー（写真＋暗幕＋英日タイトル）__title
 * .ukn-obj-55/60/62     - ヒーロー写真の object-position 微調整
 * .ukn-anchorbar        - BBQページのページ内リンク帯 __inner
 * .ukn-contact-cards    - お問い合わせの TEL / INSTAGRAM カード __item / __label / __tel /
 *                         __note / __text / __link
 * .ukn-form             - お問い合わせフォーム __row / __label / __req / __submit / __privacy
 * .ukn-faq              - よくある質問（開閉）__item / __q / __q-mark / __q-text / __mark /
 *                         __a / __a-inner / __a-mark
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ・値の粒度不足
 *   - コンテンツ幅が 1200/1500/900 の3段階しかなく、デザインの 880〜1240 の
 *     細かい幅に当たらない → .ukn-w-* を追加
 *   - grid-2/3/4 は列数固定。デザインは auto-fit + minmax（折り返し幅で列数が決まる）
 *     → .ukn-grid--* を追加
 * ・構造不足
 *   - 「濃色の項目名セル＋白の内容セル」が横並び／SPで縦積みになる表（.ukn-hours）が無い
 *   - 写真の上にホバーで円形ラベルが出るカード（.ukn-enjoy）は card-bnr--center-circle に
 *     近いが、円が白地＋枠線＋2段テキストで拡大する構造は再現できず
 *   - ヘッダーがロゴ上に小見出し（タグライン）を持つ2段構成
 * ・装飾パターン不足
 *   - wave-divider はあるが、セクションの上下に同じ波を重ねて切り抜く使い方
 *     （.ukn-wavesec）の型が無い
 * ・状態不足
 *   - ナビの現在地表示が下線のみ。デザインはドット（.ukn-nav__item の ::after）
 *
 */

/* ==========================================================================
   1. 土台の調整
   ========================================================================== */

/* デザインはセクションの左右ガターが常に24px。共通の .section は縦余白のみのため補う */
.section {
  padding-left: 24px;
  padding-right: 24px;
}

/* 共通 .container は 1320px 以下で 95% に縮むが、デザインは幅を保ったまま
   セクション側の24pxガターだけで詰める。ここで幅を固定に戻す */
.container {
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
}
.container-wide {
  max-width: 1240px;
  padding-left: 0;
  padding-right: 0;
}
.container-narrow {
  max-width: 900px;
}

/* 本文は常に14px（共通CSSはtablet/SPで縮むが、デザインは縮まない） */
body {
  font-size: 1.5rem;
}

/* デザインにリンクの一律フェードは無い。個別のホバーだけを効かせる */
a:hover {
  opacity: 1;
}

/* -- コンテンツ幅（TOPは1300px、下層はデザインどおりの幅） -- */
.ukn-w-880  { max-width: 880px;  margin-left: auto; margin-right: auto; }
.ukn-w-900  { max-width: 900px;  margin-left: auto; margin-right: auto; }
.ukn-w-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.ukn-w-1100 { max-width: 1100px; margin-left: auto; margin-right: auto; }
.ukn-w-1300 { max-width: 1300px; margin-left: auto; margin-right: auto; }

/* -- auto-fit グリッド（列数は折り返し幅で決まる） -- */
.ukn-grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px; }
.ukn-grid--200   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ukn-grid--260   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ukn-grid--290   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.ukn-grid--300   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ukn-grid--320   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ukn-grid--gap-20 { gap: clamp(20px, 2.6vw, 28px); }
.ukn-grid--gap-40 { gap: 40px; }
.ukn-grid--gap-44 { gap: clamp(28px, 4vw, 44px); }
.ukn-grid--gap-48 { gap: clamp(24px, 4vw, 48px); }
.ukn-grid--gap-56 { gap: clamp(28px, 4vw, 56px); }
.ukn-grid--top   { align-items: start; }
.ukn-grid--center { align-items: center; }

/* -- スクロール表示 -- */
.ukn-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ukn-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* 横並びのカードは少しずつ時間差で出して、単調に見えないようにする */
.ukn-reveal--d1 { transition-delay: 0.1s; }
.ukn-reveal--d2 { transition-delay: 0.2s; }
.ukn-reveal--d3 { transition-delay: 0.3s; }
.ukn-enjoy__item.ukn-reveal:nth-child(2),
.ukn-res__item.ukn-reveal:nth-child(2) { transition-delay: 0.12s; }
.ukn-enjoy__item.ukn-reveal:nth-child(3),
.ukn-res__item.ukn-reveal:nth-child(3) { transition-delay: 0.24s; }
.ukn-enjoy__item.ukn-reveal:nth-child(4),
.ukn-res__item.ukn-reveal:nth-child(4) { transition-delay: 0.36s; }
/* 動きを減らす設定の端末ではアニメーションさせない */
@media (prefers-reduced-motion: reduce) {
  .ukn-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   2. 見出し・テキスト・ボタンなどの共通パーツ
   ========================================================================== */

.ukn-label {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.3em;
  color: #5FB8DC;
}
.ukn-label--light { color: #9FDCF2; }
.ukn-label--sm    { font-size: 1.2rem; letter-spacing: 0.28em; }
.ukn-label--hero  { font-weight: 400; font-size: 1.5rem; letter-spacing: 0.32em; color: #fff; opacity: 0.95; }

.ukn-h2 {
  margin: 12px 0 0;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #12303F;
}
.ukn-h2--white { color: #fff; }
.ukn-h2--lg {
  font-size: clamp(23px, 3vw, 35px);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.ukn-h2--jost {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: clamp(47px, 7vw, 93px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #0B4F7A;
}
.ukn-h2-sub {
  margin-top: 22px;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.08em;
  color: rgba(18, 48, 63, 0.7);
}
.ukn-h3-line {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18, 48, 63, 0.15);
  font-size: 1.6rem;
  font-weight: 700;
}
.ukn-sechead { text-align: center; }

.ukn-lead {
  font-size: 1.5rem;
  line-height: 2.3;
  color: rgba(18, 48, 63, 0.82);
  text-wrap: pretty;
}
.ukn-lead + .ukn-lead { margin-top: 18px; }
.ukn-note {
  font-size: 1.35rem;
  color: rgba(18, 48, 63, 0.6);
}
.ukn-note--sm { font-size: 1.3rem; color: rgba(18, 48, 63, 0.55); }

/* -- 黒枠の角型ボタン -- */
.ukn-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 22px 34px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.ukn-btn__icon  { font-size: 2.1rem; line-height: 1; }
.ukn-btn__label { font-size: 1.7rem; font-weight: 500; letter-spacing: 0.14em; }
.ukn-btn:hover  { background: #000; color: #fff; }

.ukn-btn--sm {
  gap: 12px;
  justify-content: center;
  min-width: 200px;
  padding: 18px 26px;
}
.ukn-btn--sm .ukn-btn__icon  { font-size: 1.5rem; }
.ukn-btn--sm .ukn-btn__label { font-size: 1.6rem; letter-spacing: 0.08em; }

/* -- 白枠の角型ボタン（濃色地の上） -- */
.ukn-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.ukn-btn-ghost__icon  { font-size: 1.9rem; line-height: 1; }
.ukn-btn-ghost__label { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.12em; }

/* -- 枠線1pxの横長ボタン -- */
.ukn-btn-line {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid rgba(18, 48, 63, 0.4);
  border-radius: 5px;
  color: #12303F;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ukn-btn-line:hover {
  background: #0B4F7A;
  border-color: #0B4F7A;
  color: #fff;
}

/* -- 施設利用上の注意事項バナー（全ページ共通） -- */
.ukn-rules {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 36px) clamp(24px, 4vw, 40px);
  background: #0B4F7A;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.3s ease;
}
.ukn-rules:hover { background: #0E5F92; }
.ukn-rules__title {
  margin-top: 10px;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ukn-rules__text {
  margin-top: 8px;
  font-size: 1.4rem;
  line-height: 1.9;
  opacity: 0.88;
}
.ukn-rules:hover .ukn-btn-ghost { background: #fff; color: #12303F; }

/* -- 波型ディバイダー -- */
.ukn-wave {
  position: relative;
  z-index: 1;
  line-height: 0;
}
.ukn-wave--cream { background: #FBF8F2; }
.ukn-wave__svg {
  display: block;
  width: 100%;
  height: clamp(40px, 5vw, 80px);
  fill: #fff;
}

/* -- 上下が波型に切り抜かれた淡いブルーのセクション -- */
.ukn-wavesec {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #EEF5F9;
}
.ukn-wavesec__top,
.ukn-wavesec__bottom {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.ukn-wavesec__top    { top: 0; }
.ukn-wavesec__bottom { bottom: 0; transform: rotate(180deg); }
.ukn-wavesec__top .ukn-wave__svg,
.ukn-wavesec__bottom .ukn-wave__svg { height: clamp(34px, 4vw, 64px); }

/* -- ご利用に関して -- */
.ukn-hours {
  display: grid;
  gap: 6px;
}
.ukn-hours__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items: center;
  background: #fff;
}
.ukn-hours__k {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 18px 22px;
  background: #0B4F7A;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ukn-hours__v {
  grid-column: span 2;
  padding: 18px 24px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: rgba(18, 48, 63, 0.88);
}

/* -- 料金の行リスト -- */
.ukn-rows { border-top: 1px solid rgba(18, 48, 63, 0.15); }
.ukn-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 8px;
  border-bottom: 1px solid rgba(18, 48, 63, 0.1);
  font-size: 1.6rem;
}
.ukn-row__k { font-weight: 500; }
.ukn-row__v {
  flex-shrink: 0;
  font-family: "Jost", sans-serif;
  color: #0B4F7A;
}
.ukn-rows--sm .ukn-row   { padding: 18px 8px; font-size: 1.55rem; }
.ukn-rows--sm .ukn-row__k { font-weight: 400; }
/* 単品メニュー：2列に折り返し、罫線は行ごと */
.ukn-rows--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 48px;
  border-top: none;
}
.ukn-rows--split .ukn-row   { padding: 16px 4px; font-size: 1.5rem; }
.ukn-rows--split .ukn-row__k { font-weight: 400; }

/* -- 定義リスト -- */
.ukn-def__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(18, 48, 63, 0.08);
  font-size: 1.5rem;
  line-height: 1.9;
}
.ukn-def__k { font-weight: 500; }
.ukn-def__v { color: rgba(18, 48, 63, 0.85); }
.ukn-def__d { font-size: 1.4rem; color: rgba(18, 48, 63, 0.8); }

.ukn-def--boxed {
  background: #fff;
  border: 1px solid rgba(18, 48, 63, 0.1);
}
.ukn-def--3col .ukn-def__row {
  grid-template-columns: minmax(120px, 180px) minmax(80px, 110px) 1fr;
}
.ukn-def--3col .ukn-def__v { font-family: "Jost", sans-serif; color: #0B4F7A; }

/* 共有施設：枠線なし・項目名太字 */
.ukn-def--plain { border-top: 1px solid rgba(18, 48, 63, 0.15); }
.ukn-def--plain .ukn-def__row {
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid rgba(18, 48, 63, 0.1);
}
.ukn-def--plain .ukn-def__k { font-size: 1.6rem; font-weight: 700; }
.ukn-def--plain .ukn-def__v { line-height: 2.1; }

/* -- ● の箇条書き -- */
.ukn-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  font-size: 1.45rem;
  line-height: 1.9;
  color: rgba(18, 48, 63, 0.85);
}
.ukn-list li { list-style: inherit; }

/* -- 濃紺の電話CTAボックス -- */
.ukn-telbox {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  background: #0B4F7A;
  color: #fff;
  text-align: center;
}
.ukn-telbox__title {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ukn-telbox__tel {
  display: inline-block;
  margin-top: 20px;
  font-family: "Jost", sans-serif;
  font-size: clamp(29px, 4vw, 41px);
  color: #fff;
  text-decoration: none;
}
.ukn-telbox__note { font-size: 1.4rem; opacity: 0.85; }

/* 背景写真つきの電話CTA。写真の上に濃紺の幕を重ねて文字を読ませる */
.ukn-telbox--photo {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ukn-telbox--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 79, 122, 0.78);
}
.ukn-telbox--photo > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */

.ukn-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}

/* TOPのみ：スクロール前（写真の上）はロゴを出さず、ナビを画面中央に置く。
   スクロールして固定バーになったらロゴを出す。下層ページは常にロゴを出す */
.ukn-header--top:not(.is-fixed) .ukn-header__logo { display: none; }
.ukn-header--top:not(.is-fixed) .ukn-header__inner { position: relative; }
.ukn-header--top:not(.is-fixed) .ukn-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.ukn-header--top:not(.is-fixed) .ukn-header__right { margin-left: auto; }

/* 下層ページ：ヒーローに重なっている間も、追従時と同じ並び（背景だけ透明） */
.ukn-header:not(.ukn-header--top):not(.is-fixed) .ukn-header__inner { padding: 16px 24px; }
.ukn-header:not(.ukn-header--top):not(.is-fixed) .ukn-header__logo img { width: 150px; }
/* ロゴが小さくなる分、タグラインも合わせて縮める（非表示にはしない） */
.ukn-header:not(.ukn-header--top):not(.is-fixed) .ukn-header__tagline {
  margin-bottom: 4px;
  font-size: 1.1rem;
}

/* スクロール追従（JSで .is-fixed を付与）。
   ロゴもナビも白抜きなので、共通CSSの白背景ではなくフッターと同じ濃紺で固定する */
.ukn-header.is-fixed {
  position: fixed;
  background: rgba(11, 50, 71, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(6, 32, 48, 0.22);
}
.ukn-header.is-fixed .ukn-header__inner {
  padding: 16px 24px;
}
.ukn-header.is-fixed .ukn-header__logo img { width: 150px; }
/* 追従時もタグラインは残す（ロゴに合わせて小さく） */
.ukn-header.is-fixed .ukn-header__tagline {
  margin-bottom: 4px;
  font-size: 1.1rem;
}
/* 固定時は濃紺地。英字は淡いブルーにして日本語と差をつける */
.ukn-header.is-fixed .ukn-nav__en { color: #9FDCF2; }
/* 濃紺の上では影は不要 */
.ukn-header.is-fixed .ukn-header__logo img,
.ukn-header.is-fixed .ukn-nav__ja,
.ukn-header.is-fixed .ukn-nav__en,
.ukn-header.is-fixed .ukn-header__tel-num,
.ukn-header.is-fixed .ukn-header__tel-note { text-shadow: none; filter: none; }
/* ロゴは画面左端、ナビ・電話・CTAは右端に寄せるため幅の上限を外す */
.ukn-header__inner {
  max-width: 100%;
  height: auto;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 24px;
}
.ukn-header__logo {
  display: block;
  line-height: 1.05;
}
.ukn-header__tagline {
  display: block;
  margin-bottom: 7px;
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 32, 48, 0.85), 0 0 14px rgba(6, 32, 48, 0.7);
}
.ukn-header__logo img {
  display: block;
  width: 190px;
  height: auto;
  filter: drop-shadow(0 1px 6px rgba(6, 32, 48, 0.55));
}

/* -- PCナビ -- */
.ukn-nav {
  margin-left: auto;
  margin-right: 0;
  gap: 24px;
  flex-wrap: wrap;
}
.ukn-nav__item a {
  padding: 0 0 10px;
  gap: 3px;
}
/* 英字は日本語の上に小さく。写真の上に載るので淡いブルー＋影で読ませる */
.ukn-nav__en {
  font-family: "Jost", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(6, 32, 48, 0.55);
}
.ukn-nav__ja {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 6px rgba(6, 32, 48, 0.55);
}
/* 現在地・ホバーはドットで示す（共通の下線アニメは使わない） */
.ukn-nav__item a::after {
  left: 50%;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9FDCF2;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}
.ukn-nav__item a:hover::after { width: 5px; left: 50%; opacity: 1; }
.ukn-nav__item.header__nav-item--current a::after {
  width: 5px;
  left: 50%;
  opacity: 1;
}

/* -- 右側（電話・Instagram・CTA） -- */
.ukn-header__right {
  gap: 14px;
  height: auto;
}
.ukn-header__tel {
  text-align: right;
  line-height: 1.2;
}
.ukn-header__tel-num {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(6, 32, 48, 0.5);
}
.ukn-header__tel-note {
  display: block;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 32, 48, 0.85), 0 0 14px rgba(6, 32, 48, 0.7);
}
.ukn-header__sns {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.ukn-header__sns:hover { background: #fff; color: #0B4F7A; }
.ukn-header__cta {
  padding: 11px 20px;
  border-radius: 2px;
  background: #0B4F7A;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
}
.ukn-header__cta:hover { background: #E8873B; }

/* -- SPナビ・ハンバーガー -- */
.ukn-nav-toggle { background: rgba(255, 255, 255, 0.85); }
/* SPナビは写真が透けないよう不透明に（メインブルー→フッター濃紺） */
.ukn-spnav { background: linear-gradient(135deg, #0B4F7A, #0B3247); }
/* 英字を読める大きさにし、日本語と矢印の間に余白を取る */
.ukn-spnav .sp-nav__link { gap: 15px; }
.ukn-spnav .sp-nav__en { font-size: 1.2rem; opacity: 0.75; }

.ukn-spnav__bottom { padding-top: 20px; }
.ukn-spnav__tel {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: 2.5rem;
  color: #fff;
  text-decoration: none;
}
.ukn-spnav__note {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   4. フッター
   ========================================================================== */

.ukn-footer {
  position: relative;
  z-index: 1;
  padding: 72px 24px 0;
  background: #0B3247;
  color: #fff;
}
.ukn-footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.ukn-footer__tagline {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.ukn-footer__logo {
  display: block;
  width: 240px;
  height: auto;
  margin: 10px auto 0;
}
.ukn-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin-top: 44px;
  font-size: 1.45rem;
  font-weight: 500;
}
.ukn-footer__nav-item {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.ukn-footer__nav-item:hover { color: #9FDCF2; }
.ukn-footer__sns {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
}
.ukn-footer__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 1.45rem;
  line-height: 2;
}
.ukn-footer__sep { opacity: 0.4; }
.ukn-footer__note {
  margin-top: 10px;
  font-size: 1.3rem;
  opacity: 0.75;
}
/* SPは社名が長く中途半端な位置で折り返すため、「／」を改行に置き換える */
.ukn-br-sp { display: none; }
@media (max-width: 639px) {
  .ukn-br-sp { display: inline; }
  .ukn-footer__note-sep { display: none; }
}
.ukn-footer__bottom {
  margin-top: 52px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Jost", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  opacity: 0.6;
}

/* ページトップ・SP固定バー
   共通CSSの文字が7.5pxと小さく役割も分かりにくいため、
   ボタンらしい見た目（電話＝白地に濃紺枠／お問い合わせ＝濃紺ベタ）に作り替える。
   角丸なし・影なしはサイトのトンマナどおり。 */
.ukn-spbar { gap: 8px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.ukn-spbar .sp-fixed-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 6px;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: background 0.3s ease, color 0.3s ease;
}
.ukn-spbar .sp-fixed-bar__link i { display: inline-block; margin: 0; font-size: 1.7rem; }
.ukn-spbar__link--tel {
  border: 2px solid #0B4F7A;
  background: #fff;
  color: #0B4F7A;
}
.ukn-spbar__link--tel i { color: #0B4F7A; }
.ukn-spbar__link--contact {
  border: 2px solid #0B4F7A;
  background: #0B4F7A;
  color: #fff;
}
.ukn-spbar__link--contact i { color: #fff; }
.ukn-spbar .sp-fixed-bar__link:hover { opacity: 1; }
.ukn-spbar__link--tel:hover { background: #0B4F7A; color: #fff; }
.ukn-spbar__link--tel:hover i { color: #fff; }

/* ==========================================================================
   5. TOP：メインビュー
   ========================================================================== */

.ukn-mv {
  position: relative;
  z-index: 0;
  height: 100vh;
  min-height: 520px;
  background: #0B4F7A;
}
/* CMSスライダーは高さ100%で外枠に追従する。外枠側で高さを明示する */
#slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
}
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 中の塊がロゴ幅に縮むと、キャッチコピーが狭い画面で枠からはみ出すため全幅にする */
.ukn-mv__body > div { width: 100%; }
.ukn-mv__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
/* ロゴの上に載せる小見出し（ヘッダーと同じ扱い） */
.ukn-mv__tagline {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(13px, 2.45vw, 34px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 32, 48, 0.85), 0 0 14px rgba(6, 32, 48, 0.7);
}

.ukn-mv__logo {
  display: block;
  width: min(500px, 36vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 14px rgba(6, 32, 48, 0.5));
}
/* ロゴの下に敷く波線のあしらい。写真の上に載るので白抜きにする */
.ukn-mv__wave {
  display: block;
  width: min(120px, 11vw);
  height: auto;
  margin: 22px auto 0;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(6, 32, 48, 0.45));
}

.ukn-mv__catch {
  margin-top: 28px;
  line-height: 1.9;
  font-size: clamp(16px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(6, 32, 48, 0.6), 0 0 30px rgba(6, 32, 48, 0.45);
}

/* ==========================================================================
   6. TOP：ABOUT
   ========================================================================== */

.ukn-sec--about {
  padding-top: clamp(64px, 8vw, 110px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.ukn-about__body {
  padding-top: clamp(0px, 1vw, 16px);
  max-width: 470px;
}
.ukn-about__media {
  position: relative;
  min-height: clamp(360px, 44vw, 600px);
  width: 100%;
  max-width: 560px;
  justify-self: end;
}
.ukn-about__img1 {
  aspect-ratio: 1.25 / 1;
  background-position: center 62%;
  background-size: cover;
  background-repeat: no-repeat;
}
.ukn-about__img2 {
  position: relative;
  width: 74%;
  aspect-ratio: 8 / 5;
  margin: -14% 0 0 -34%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ukn-about__wave {
  position: absolute;
  bottom: 2%;
  left: 94%;
  z-index: 2;
  width: 58%;
  height: auto;
}

/* ==========================================================================
   7. TOP：HOW TO ENJOY
   ========================================================================== */

.ukn-sec--enjoy {
  padding-top: 40px;
  padding-bottom: 110px;
  background: #FBF8F2;
}
.ukn-enjoy { margin-top: clamp(44px, 6vw, 72px); }
.ukn-enjoy__item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ukn-enjoy__item:hover { color: inherit; }
.ukn-enjoy__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.ukn-enjoy__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ukn-enjoy__hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 32, 48, 0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ukn-enjoy__circle {
  display: grid;
  place-items: center;
  width: clamp(120px, 42%, 170px);
  aspect-ratio: 1 / 1;
  border: 2px solid #12303F;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  transform: scale(0.88);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ukn-enjoy__item:hover .ukn-enjoy__img    { transform: scale(1.08); }
.ukn-enjoy__item:hover .ukn-enjoy__hover  { opacity: 1; }
.ukn-enjoy__item:hover .ukn-enjoy__circle { transform: scale(1); }
.ukn-enjoy__circle-ja {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #12303F;
}
.ukn-enjoy__circle-en {
  display: block;
  margin-top: 7px;
  font-family: "Jost", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: #0B4F7A;
}
.ukn-enjoy__en {
  margin: 24px 0 0;
  font-family: "Jost", sans-serif;
  font-size: clamp(25px, 2.8vw, 33px);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #0B4F7A;
}
.ukn-enjoy__ja {
  margin-top: 12px;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ukn-enjoy__text {
  margin-top: 16px;
  font-size: 1.45rem;
  line-height: 2;
  color: rgba(18, 48, 63, 0.78);
  text-wrap: pretty;
}

/* ==========================================================================
   8. TOP：MAP / ご予約 / アクセス
   ========================================================================== */

.ukn-map__note {
  margin-top: 16px;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
}
.ukn-map__note--dark { color: rgba(18, 48, 63, 0.7); }

/* 案内図の濃紺の地色はデザインどおりセクション全幅（画面端まで）に敷く */
.ukn-mapbox { background: #0B4F7A; }

/* 案内図はセクション幅いっぱいだと大きすぎるので1000pxに抑えて中央寄せ */
/* SPでも横スクロールはさせず、画面幅に収めて全体を見せる */
.ukn-map__scroll,
.ukn-map__note { max-width: 1000px; margin-left: auto; margin-right: auto; }
.ukn-map__scroll { margin-top: 40px; }
.ukn-map__img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .ukn-map__scroll { margin-top: 28px; }
}

.ukn-res { margin-top: 48px; }
.ukn-res__item {
  padding: 36px 30px 34px;
  border: 1px solid rgba(18, 48, 63, 0.14);
  background: #fff;
}
.ukn-res__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ukn-res__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #EEF5F9;
  color: #0B4F7A;
  font-size: 2.3rem;
}
.ukn-res__title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ukn-res__text {
  margin-top: 18px;
  font-size: 1.45rem;
  line-height: 2;
  color: rgba(18, 48, 63, 0.8);
}
.ukn-res__foot {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed rgba(18, 48, 63, 0.2);
}
.ukn-res__tel {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 2.7rem;
  line-height: 1.2;
  color: #0B4F7A;
  text-decoration: none;
}
.ukn-res__note {
  font-size: 1.3rem;
  color: rgba(18, 48, 63, 0.6);
}

.ukn-access__map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}
.ukn-access__body {
  font-size: 1.5rem;
  line-height: 2.2;
}
.ukn-access__address { font-weight: 700; }
.ukn-access__tel { margin-top: 6px; }
.ukn-access__body .ukn-h3-line { margin: 28px 0 10px; }

/* ==========================================================================
   9. 下層ページ
   ========================================================================== */

.ukn-hero {
  display: grid;
  place-items: center;
  height: min(46vh, 380px);
  min-height: 220px;
  padding: 150px 24px 44px;
  text-align: center;
  color: #fff;
}
.ukn-hero .page-hero__overlay { background: rgba(6, 32, 48, 0.42); }
.ukn-hero .page-hero__content {
  height: auto;
  text-shadow: 0 2px 10px rgba(6, 32, 48, 0.6), 0 0 28px rgba(6, 32, 48, 0.5);
}
.ukn-hero__title {
  margin: 12px 0 0;
  font-size: clamp(23px, 3.4vw, 37px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.ukn-obj-55 { object-position: center 55%; }
.ukn-obj-60 { object-position: center 60%; }
.ukn-obj-62 { object-position: center 62%; }

/* -- BBQ：ページ内リンク帯 -- */
.ukn-anchorbar {
  background: #F7F3EC;
  border-bottom: 1px solid rgba(18, 48, 63, 0.1);
}
.ukn-anchorbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* -- 画像ブロック（コース紹介・マリン・アスレチック） -- */
.ukn-photo {
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ukn-photo--62 { background-position: center 62%; }

/* -- お問い合わせ -- */
.ukn-contact-cards { margin: 0; }
/* カードが1枚だけのとき（Instagram非表示中）は横いっぱいに伸ばさず、2枚時の1枚分の幅で中央寄せ */
.ukn-contact-cards__item:only-child {
  width: 100%;
  max-width: 430px;
  justify-self: center;
}
/* 上辺に水色のアクセント罫＋丸アイコンを足して、素っ気ない枠から一歩前へ。
   角丸なし・影なしはサイトのトンマナどおり。 */
.ukn-contact-cards__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 32px;
  border: 1px solid rgba(95, 184, 220, 0.35);
  border-radius: 12px;
  background: #F4FAFD;
  text-align: center;
}
.ukn-contact-cards__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #0B4F7A;
  color: #fff;
  font-size: 2.1rem;
}
.ukn-contact-cards__label {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  color: #5FB8DC;
}
.ukn-contact-cards__tel {
  display: block;
  margin-top: 10px;
  font-family: "Jost", sans-serif;
  font-size: 3.1rem;
  color: #0B4F7A;
  text-decoration: none;
}
.ukn-contact-cards__note {
  font-size: 1.35rem;
  color: rgba(18, 48, 63, 0.65);
}
.ukn-contact-cards__text {
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 2;
}
/* Instagramへの導線は下線リンクではなく枠付きボタンにして押せると分かるように */
.ukn-contact-cards__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 11px 26px;
  border: 1px solid #0B4F7A;
  font-family: "Jost", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #0B4F7A;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.ukn-contact-cards__link:hover { background: #0B4F7A; color: #fff; opacity: 1; }
.ukn-contact-cards__text + .ukn-contact-cards__link { margin-top: 16px; }

/* CMSフォーム（cms_ajax 出力）の外枠 */
.ukn-form-cms__head { margin-top: 64px; }
.ukn-form-cms { margin-top: 32px; }

/* -- CMSフォームの必須タグ・送信ボタンをサイトの配色に合わせる --
   CMSは実行時に mail-form.css を body へ差し込むため site.css より後ろになる。
   クラスだけでは負けるので #cms-contact-1-1-area（ID）で詳細度を上げる。 */
#cms-contact-1-1-area dt span.required::before {
  border-radius: 999px;
  background: #0B4F7A;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}
#cms-contact-1-1-area .submit-btn {
  border: 2px solid #0B4F7A;
  border-radius: 999px;
  background: #0B4F7A;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: background 0.3s ease, color 0.3s ease;
}
#cms-contact-1-1-area .submit-btn::before { display: none; }
#cms-contact-1-1-area .submit-btn:hover { background: #fff; color: #0B4F7A; }

.ukn-form {
  display: grid;
  gap: 22px;
  margin-top: 48px;
}
.ukn-form__row { display: grid; gap: 8px; }
.ukn-form__label { font-size: 1.4rem; font-weight: 500; }
.ukn-form__req {
  margin-left: 8px;
  font-size: 1.2rem;
  color: #5FB8DC;
}
.ukn-form .form-input,
.ukn-form .form-select {
  padding: 13px 14px;
  border: 1px solid rgba(18, 48, 63, 0.2);
  border-radius: 0;
  background: #fff;
  font-size: 1.5rem;
}
.ukn-form .form-input:focus { border-color: #0B4F7A; }
.ukn-form__submit {
  max-width: none;
  width: auto;
  padding: 16px 56px;
  border: 0;
  border-radius: 0;
  background: #0B4F7A;
  color: #fff;
  font-size: 1.6rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease;
}
.ukn-form__submit:hover { background: #0E5F92; }

/* -- よくある質問 -- */
.ukn-faq {
  display: grid;
  gap: 10px;
}
.ukn-faq__item {
  background: #fff;
  border: 1px solid rgba(18, 48, 63, 0.1);
}
.ukn-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: #12303F;
  font-family: inherit;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
  cursor: pointer;
}
.ukn-faq__q-mark {
  flex: none;
  font-family: "Jost", sans-serif;
  color: #5FB8DC;
}
.ukn-faq__q-text { flex: 1; }
/* 開閉の合図は「開く／閉じる」の文字ではなく矢印アイコン（開いたら上向き） */
.ukn-faq__mark {
  flex: none;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #5FB8DC;
  transition: transform 0.3s ease;
}
.ukn-faq__item.is-open .ukn-faq__mark { transform: rotate(180deg); }
.ukn-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.ukn-faq__a-inner {
  display: flex;
  gap: 14px;
  padding: 0 22px 22px;
  font-size: 1.45rem;
  line-height: 2.1;
  color: rgba(18, 48, 63, 0.85);
}
.ukn-faq__a-mark {
  flex: none;
  font-family: "Jost", sans-serif;
  color: #0B4F7A;
}
.ukn-faq__a-text { flex: 1; }

/* ==========================================================================
   10. レスポンシブ
   ========================================================================== */

/* ナビが収まらなくなる幅ではロゴを小さくして詰める */
@media (max-width: 1279px) {
  .ukn-header__logo img { width: 160px; }
  .ukn-nav { gap: 18px; }
  .ukn-header__right { gap: 10px; }
}

/* 日本語18pxでPCナビが横に伸び、1240px未満では電話・CTAと収まらなくなる。
   ナビはハンバーガーに送り、電話とCTAはヘッダーに残す */
@media (max-width: 1239px) {
  .ukn-nav { display: none; }
  .ukn-nav-toggle { display: block; }
}

/* 897〜1239px はPCナビが消えるがSP固定バーもまだ出ない帯。
   電話とCTAが画面から無くなってしまうのでヘッダーに残す */
@media (min-width: 897px) and (max-width: 1239px) {
  .ukn-header__right { display: flex; margin-left: auto; }
}

/* ハンバーガー（右上固定）に重ならないよう右側に余白を取る */
@media (max-width: 1239px) {
  .ukn-header__inner { padding: 14px 60px 14px 24px; }
  .ukn-header.is-fixed .ukn-header__inner { padding: 16px 60px 16px 24px; }
  .ukn-header:not(.ukn-header--top):not(.is-fixed) .ukn-header__inner { padding: 16px 60px 16px 24px; }
  .ukn-header__logo img { width: 170px; }
}

@media (max-width: 896px) {
  .ukn-section-gutter { padding-left: 24px; padding-right: 24px; }
  .ukn-about__media { min-height: 0; }
  /* 大きい方の写真はSPだと横いっぱいで迫りすぎるので90%に抑えて中央寄せ */
  .ukn-about__img1 { width: 90%; margin-left: auto; margin-right: auto; }
  /* 幅が狭いと写真が左へはみ出して波線が画面外に消えるため、
     写真を左寄せ・幅64%にして、右へ出した波線が枠内に収まるようにする */
  .ukn-about__img2 { width: 64%; margin: -14% 0 0 0; }
  .ukn-sec--enjoy { padding-bottom: 72px; }
  .ukn-hero { padding-top: 130px; }
  /* SPはヒーローを30px低くする */
  .ukn-hero { height: calc(min(46vh, 380px) - 30px); }
  .ukn-access__map iframe { height: 300px; }
  /* SP固定バー（896px以下で表示）の分だけ下に逃がす。
     入れないとフッターのコピーライトとページトップがバーの裏に隠れる */
  /* 住所行が折り返すと区切りの | が行末に取り残されるので消す */
  .ukn-footer__sep { display: none; }
  .ukn-footer { padding-bottom: 56px; }
  .ukn-pagetop { bottom: 70px; }
}

@media (max-width: 639px) {
  .ukn-mv, #slideshow { height: 88vh; min-height: 440px; }
  .ukn-header__tagline { font-size: 1.2rem; }
  /* メインビューの文字組み。PCの「ロゴ : タグライン : 波線 : キャッチ」＝
     36 : 2.45 : 11 : 2.2（vw）の比率をそのまま保ったまま、全体を一回り大きくする。
     PC側は最小値で頭打ちになり文字だけ相対的に大きくなっていたため、ここで比率をそろえる。 */
  .ukn-mv__logo    { width: min(300px, 72vw); }
  .ukn-mv__tagline { font-size: min(20px, 4.9vw); }
  .ukn-mv__wave    { width: min(92px, 22vw); }
  .ukn-mv__catch   { font-size: min(18px, 4.4vw); }
  /* 縦長(3:4)のままだとカード1枚が画面いっぱいになるのでSPは横長にする */
  .ukn-enjoy__thumb { aspect-ratio: 16 / 9; }
  /* SPはホバーが無いので「詳しく見る」の円を常に出す。
     写真を隠さないよう暗幕は外し、右下に小さく置く */
  .ukn-enjoy__hover {
    opacity: 1;
    background: transparent;
    place-items: end end;
    padding: 12px;
  }
  .ukn-enjoy__circle {
    width: 88px;
    transform: none;
    border-width: 1px;
    box-shadow: 0 2px 10px rgba(6, 32, 48, 0.25);
  }
  .ukn-enjoy__circle-ja { font-size: 1.15rem; letter-spacing: 0.04em; }
  .ukn-enjoy__circle-en { margin-top: 4px; font-size: 0.85rem; letter-spacing: 0.12em; }
  .ukn-btn { padding: 18px 24px; gap: 14px; }
  .ukn-btn__label { font-size: 1.5rem; }
  .ukn-btn--sm { width: 100%; min-width: 0; }
  .ukn-hours__k { padding: 14px 18px; }
  .ukn-hours__v { padding: 14px 18px; }
  .ukn-def__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .ukn-def--3col .ukn-def__row { grid-template-columns: 1fr; }
  .ukn-def--plain .ukn-def__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 4px; }
  .ukn-res__item { padding: 28px 22px; }
  .ukn-footer { padding-top: 56px; }
  .ukn-footer__logo { width: 200px; }
  .ukn-footer__nav { gap: 12px 22px; margin-top: 32px; }
  .ukn-footer__info { gap: 4px 18px; margin-top: 28px; padding-top: 24px; }
  .ukn-footer__bottom { margin-top: 36px; }
  .ukn-anchorbar__inner { padding: 20px 24px; gap: 10px; }
  .ukn-rules { padding: 26px 24px; gap: 20px; }
  /* 幅が余って左に寄って見えるので全幅・中央揃えにする */
  .ukn-btn-ghost { width: 100%; justify-content: center; padding: 16px 20px; }
  .ukn-btn-ghost__label { font-size: 1.4rem; }
  .ukn-faq__q { padding: 16px 16px; gap: 10px; }
  .ukn-faq__a-inner { padding: 0 16px 18px; gap: 10px; }
}

/* 下層ページのバナー行（上56px・下88px）— TOPだけ上下88px */
.ukn-sec--rules { padding-top: 56px; }

/* 下層ページのセクション縦余白（デザインは80px） */
.ukn-sec--80 { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 896px) {
  .ukn-sec--80 { padding-top: 56px; padding-bottom: 56px; }
}

/* 小さめのセクション見出し（BBQコース紹介など） */
.ukn-h2--sm {
  margin-top: 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: normal;
}

/* 本文に添える補足（セット内容など） */
.ukn-subnote {
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 2;
  color: rgba(18, 48, 63, 0.7);
}

/* 前のセクションと余白をつなげたいときは --pt0 / --pb0 が勝つようにする */
.ukn-sec--80.section--pt0 { padding-top: 0; }
.ukn-sec--80.section--pb0 { padding-bottom: 0; }

/* 上端の波線が上余白を食ってしまうため、波の高さぶんを足して
   見た目の上下バランスを揃える（BBQ利用案内など、波線の直下に来るセクション） */
.ukn-sec--under-wave { padding-top: calc(80px + clamp(34px, 4vw, 64px)); }
@media (max-width: 896px) {
  .ukn-sec--under-wave { padding-top: calc(56px + clamp(34px, 4vw, 64px)); }
}