@charset "utf-8";
/*
 * ======================================
 * 石垣サビチ洞 サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- レイアウト ----
 * .sbc-container(--780/900/1000/1100/1160/1300) - デザイン固有幅＋clamp左右余白のラッパー
 * .sbc-sec(--sm/--lg/--flush)                   - デザイン固有のclampセクション余白
 * .sbc-reveal                                   - スクロールイン（IntersectionObserverで .is-visible）
 *
 * ---- ヘッダー / ナビ ----
 * .sbc-header / .sbc-logo / .sbc-nav / .sbc-header__tel / .sbc-header__cta
 *                                               - 透過→スクロールで白背景のヘッダー
 * .sbc-nav-toggle / .sbc-sp-nav                 - ハンバーガー・ドロワー（白背景・左寄せリスト）
 *
 * ---- 共通パーツ ----
 * .sbc-more(__arrow)                            - 「詳しく見る」＋丸枠矢印（ホバーで矢印が流れる）
 * .sbc-shead(__ja/__en/__sub/--left/--white)     - セクション見出し（和文＋小さな英字/和文サブ）
 * .sbc-lead / .sbc-text / .sbc-note             - 本文テキスト3サイズ
 * .sbc-hero(__bg/__overlay/__inner/__bar/__en/__ja) - 下層ページの写真ヒーロー
 * .sbc-cta(__bg/__overlay/__title/__lead/__btns/__btn) - 写真背景のCTA帯
 * .sbc-btn(--solid/--outline/--white/--dark)    - デザインの角丸なしボタン
 * .sbc-dl(__row/__dt/__dd)                      - ラベル＋値の定義リスト（罫線区切り）
 * .sbc-infobox / .sbc-numlist / .sbc-chip       - 注記ボックス・番号付きリスト・チップ
 * .sbc-footer 一式                              - 3カラムフッター
 *
 * ---- TOP ----
 * .sbc-mv 一式 / #slideshow                     - メインビュー（CMSスライダー差し替え前提）
 * .sbc-news-head / .sbc-topnews                 - お知らせ帯
 * .sbc-feature 一式                             - きのこ岩（16:9写真＋2カラム＋背景帯）
 * .sbc-point 一式                               - 魅力・見どころ3カード
 * .sbc-gallery 一式                             - 横スクロールギャラリー＋ドット
 *
 * ---- 下層 ----
 * .sbc-parallax                                 - 固定背景の帯（ジャングル）
 * .sbc-hl 一式                                  - Highlights（12カラムgrid・偶数行反転）
 * .sbc-tide 一式                                - ワンポイントアドバイス（潮位）
 * .sbc-price / .sbc-group / .sbc-telbox / .sbc-service / .sbc-pay
 *                                               - 料金行 / 団体・貸切 / 電話ボックス / 無料サービス / 決済
 * .sbc-info / .sbc-carnavi / .sbc-time / .sbc-bus / .sbc-check
 *                                               - 施設情報＋地図 / カーナビ案内 / 所要時間カード / バス経路 / チェックポイント
 * .sbc-lang / .sbc-notes / .sbc-phone           - 言語選択ボタン / ご案内リスト / 電話CTAボックス
 * .sbc-blog 一式 / .sbc-side 一式 / .sbc-article - お知らせ一覧・サイドバー・記事詳細
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 * ・値の粒度不足 : clamp() を使った流体タイポ／流体余白が無い（デザインは全面clamp）。
 *                  fz-* は 0.1rem 刻みの固定値のみで 13.5px / 14.5px 等が作れない。
 * ・指定方向不足 : container の左右パディングを可変（clamp）で持たせる手段が無い。
 * ・状態不足     : ヘッダーの「透過⇔白背景」2状態（文字色・高さ・境界線を一括で切替）が無い。
 *                  header-sticky は背景と影のみで、透過時の文字色反転が定義されていない。
 * ・構造不足     : ラベル＋丸枠矢印の「詳しく見る」リンク（btn-circle-arrow は塗り＋影前提で別物）。
 *                  12カラムgridで左右交互に組む Highlights レイアウト。
 *                  scroll-snap の横スクロールギャラリー（gallery-scroll は自動送り専用）。
 * ・装飾パターン不足 : 写真の上に載る「英字ラベル＋縦ライン＋和文タイトル」の下層ヒーロー。
 *                  背景写真＋暗幕のCTA帯（footer-cta はベタ塗り前提）。
 * ======================================
 */

/* ==========================================================================
   1. レイアウト / 共通トーン
   ========================================================================== */
.sbc-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 44px);
  padding-right: clamp(20px, 4vw, 44px);
}
.sbc-container--780  { max-width: 780px; }
.sbc-container--900  { max-width: 900px; }
.sbc-container--1000 { max-width: 1000px; }
.sbc-container--1100 { max-width: 1100px; }
.sbc-container--1160 { max-width: 1160px; }
.sbc-container--1300 { max-width: 1300px; }
.sbc-container--wide { max-width: 1340px; }

/* デザインのセクション余白（clamp） */
.sbc-sec       { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.sbc-sec--lg   { padding-top: clamp(82px, 10vw, 100px); padding-bottom: clamp(82px, 10vw, 100px); }
.sbc-sec--sm   { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.sbc-sec--pt0  { padding-top: 0; }
.sbc-sec--pb0  { padding-bottom: 0; }

.sbc-bg-section  { background: #f5f9f9; }
.sbc-bg-section2 { background: #f7f6f3; }
.sbc-bg-white    { background: #fff; }

/* 本文テキスト */
.sbc-lead { font-size: 14.5px; line-height: 2.5; letter-spacing: .03em; color: #5a5a5a; text-wrap: pretty; }
.sbc-text { font-size: 14px; line-height: 2; letter-spacing: .02em; color: #4a4a4a; text-wrap: pretty; }
.sbc-note { font-size: 14px; line-height: 1.8; color: #8a8a8a; letter-spacing: .03em; }
.sbc-lead--dark { color: #4a4a4a; font-size: 15px; }

/* スクロールイン演出（デザインの animation:sabUp 相当） */
@keyframes sbcUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.sbc-reveal { opacity: 0; }
.sbc-reveal.is-visible { animation: sbcUp 1s cubic-bezier(.22, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .sbc-reveal, .sbc-reveal.is-visible { opacity: 1; animation: none; }
}

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.sbc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: 86px;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
  transition: background .3s, height .3s, color .3s, border-color .3s;
}
.sbc-header .header__inner {
  max-width: 1340px;
  height: 100%;
  padding: 0 clamp(20px, 4vw, 44px);
  gap: 24px;
}
.sbc-header.is-fixed {
  height: 70px;
  color: #333;
  background: rgba(254, 254, 254, .94);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, .09);
  box-shadow: none;
}
.sbc-header.is-fixed .header__inner { padding: 0 clamp(20px, 4vw, 44px); }

/* ロゴ */
.sbc-logo {
  color: inherit;
  flex: none;
  align-items: flex-start;
  gap: 0;
}
.sbc-logo .header-logo__body { line-height: 1; }
.sbc-logo__name {
  color: inherit;
  font-weight: 600;
  font-size: clamp(17px, 2.1vw, 21px);
  letter-spacing: .1em;
  line-height: 1;
}
.sbc-logo__sub {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .34em;
  margin-top: 6px;
  color: rgba(255, 255, 255, .85);
  transition: color .3s;
}
.is-fixed .sbc-logo__sub { color: #007ab6; }
.sbc-logo:hover { opacity: .8; }

/* PCナビ */
.sbc-nav { margin-left: auto; margin-right: 0; gap: clamp(18px, 2.4vw, 34px); }
.sbc-nav .header__nav-item a { padding: 0; color: inherit; line-height: 1; opacity: .9; transition: opacity .2s; }
.sbc-nav .header__nav-item a::after { display: none; }
.sbc-nav .header__nav-item a:hover { opacity: 1; }
.sbc-nav__ja {
  color: inherit;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1;
  margin-top: 0;
  white-space: nowrap;
}
.sbc-nav .header__nav-item--current a { opacity: 1; }
.sbc-nav .header__nav-item--current .sbc-nav__ja { font-weight: 700; }
.is-fixed .sbc-nav .header__nav-item--current .sbc-nav__ja { color: #007ab6; }

/* ヘッダー右（電話・WEB予約） */
.sbc-header__right { gap: 20px; height: auto; margin-left: clamp(18px, 2.4vw, 34px); }
.sbc-header__tel {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .03em;
  color: inherit;
}
.sbc-header__tel::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f095";
  color: inherit;
  margin-right: 8px;
  font-size: .85em;
}
.sbc-header__cta {
  height: auto;
  padding: 12px 20px;
  background: #007ab6;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.sbc-header__cta:hover { background: #00648f; }

/* ハンバーガー（900px以下） */
.sbc-nav-toggle {
  display: none;
  position: fixed;
  top: 0;
  right: clamp(12px, 4vw, 36px);
  width: 44px;
  height: 86px;
  background: none;
  backdrop-filter: none;
  border-radius: 0;
  transition: height .3s;
}
.sbc-nav-toggle .nav-toggle__line { background: #fff; width: 24px; height: 1.5px; }
.sbc-nav-toggle .nav-toggle__line:nth-child(1) { top: 36px; }
.sbc-nav-toggle .nav-toggle__line:nth-child(2) { top: 43px; }
.sbc-nav-toggle .nav-toggle__line:nth-child(3) { top: 50px; }
.sbc-nav-toggle.is-active .nav-toggle__line:nth-child(1),
.sbc-nav-toggle.is-active .nav-toggle__line:nth-child(3) { top: 43px; }
body.is-header-solid .sbc-nav-toggle { height: 70px; }
body.is-header-solid .sbc-nav-toggle .nav-toggle__line { background: #333; }
body.is-header-solid .sbc-nav-toggle .nav-toggle__line:nth-child(1) { top: 28px; }
body.is-header-solid .sbc-nav-toggle .nav-toggle__line:nth-child(2) { top: 35px; }
body.is-header-solid .sbc-nav-toggle .nav-toggle__line:nth-child(3) { top: 42px; }
body.is-header-solid .sbc-nav-toggle.is-active .nav-toggle__line:nth-child(1),
body.is-header-solid .sbc-nav-toggle.is-active .nav-toggle__line:nth-child(3) { top: 35px; }
body.is-nav-open .sbc-nav-toggle .nav-toggle__line { background: #333; }
@media (max-width: 900px) {
  .sbc-nav-toggle { display: block; }
}

/* SPドロワー（白背景・左寄せ） */
.sbc-sp-nav {
  background: #fefefe;
  align-items: stretch;
  justify-content: flex-start;
  padding: 88px clamp(24px, 7vw, 48px) 40px;
}
.sbc-sp-nav .sp-nav__list { max-width: none; text-align: left; }
.sbc-sp-nav .sp-nav__item { border-top: none; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.sbc-sp-nav .sp-nav__item:first-child { border-top: none; }
.sbc-sp-nav .sp-nav__link {
  color: #333;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .06em;
  padding: 17px 2px;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.sbc-sp-nav .sp-nav__link::after { display: none; }
.sbc-sp-nav .sp-nav__link:hover { background: none; color: #007ab6; }
.sbc-sp-nav .sp-nav__en {
  font-size: 14px;
  letter-spacing: .24em;
  color: #007ab6;
  opacity: 1;
  margin-right: 0;
  margin-left: auto;
  padding-left: 0;
}
.sbc-sp-nav__bottom {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  text-align: center;
}
.sbc-sp-nav__cta {
  max-width: none;
  border: none;
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
}
.sbc-sp-nav__tel {
  justify-content: center;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #333;
}
.sbc-sp-nav__tel::before { color: #333; }
body.is-nav-open { overflow: hidden; }

/* 固定ヘッダー分の余白（写真ヒーローが無いページ用） */
.sbc-header-spacer { height: 70px; }

/* ==========================================================================
   3. 共通パーツ
   ========================================================================== */
/* 「詳しく見る」リンク */
.sbc-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: .1em;
  color: #333;
  line-height: normal;
}
.sbc-more--sm { font-size: 14px; }
.sbc-more__arrow {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 999px;
  color: #333;
  overflow: hidden;
  transition: background .35s cubic-bezier(.2, .7, .3, 1), border-color .35s cubic-bezier(.2, .7, .3, 1);
}
.sbc-more__arrow i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.sbc-more__arrow i + i { opacity: 0; }
@keyframes sbcArrowOut { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(210%, -50%); } }
@keyframes sbcArrowIn  { 0% { transform: translate(-310%, -50%); } 100% { transform: translate(-50%, -50%); } }
.sbc-more:hover { color: #333; opacity: 1; }
.sbc-more:hover .sbc-more__arrow { background: #fff; border-color: #fff; }
.sbc-more:hover .sbc-more__arrow i { animation: sbcArrowOut .42s cubic-bezier(.4, 0, .5, 1) forwards; }
.sbc-more:hover .sbc-more__arrow i + i { opacity: 1; animation: sbcArrowIn .42s cubic-bezier(.4, 0, .5, 1) .12s both; }
.sbc-more--white { color: #fff; }
.sbc-more--white .sbc-more__arrow { border-color: rgba(255, 255, 255, .6); color: #fff; }

/* セクション見出し */
.sbc-shead { text-align: center; }
.sbc-shead--left { text-align: left; }
.sbc-shead__ja {
  display: block;
  font-weight: 500;
  font-size: clamp(23px, 2.9vw, 32px);
  letter-spacing: .05em;
  line-height: normal;
  color: #333;
}
.sbc-shead__ja--lg { font-size: clamp(28px, 4vw, 44px); letter-spacing: .04em; }
.sbc-shead__ja--sm { font-size: clamp(20px, 2.6vw, 28px); }
.sbc-shead__sub {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: .2em;
  color: #007ab6;
  line-height: normal;
}
.sbc-shead__en {
  display: block;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .24em;
  color: #007ab6;
  margin-bottom: 14px;
  line-height: normal;
}
.sbc-shead__en--lg { font-size: 14px; letter-spacing: .18em; margin-bottom: 14px; }
.sbc-shead--white .sbc-shead__ja { color: #fff; }

/* 小見出し（記事内・ボックス内） */
.sbc-subhead {
  font-weight: 500;
  font-size: clamp(19px, 2.3vw, 30px);
  line-height: 1.65;
  letter-spacing: .06em;
  color: #333;
}
.sbc-subhead--sm { font-size: 18px; letter-spacing: .04em; line-height: 1.5; }

/* ボタン（角丸なし） */
.sbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: center;
  transition: background .25s, color .25s, transform .2s;
}
.sbc-btn--solid   { background: #007ab6; color: #fff; }
.sbc-btn--solid:hover { background: #00648f; color: #fff; opacity: 1; }
.sbc-btn--outline { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.sbc-btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; opacity: 1; }
.sbc-btn--white   { background: #fefefe; color: #0f5f6b; font-weight: 600; font-size: 15px; padding: 17px 40px; }
.sbc-btn--white:hover { transform: translateY(-2px); opacity: 1; }
.sbc-btn--dark    { background: #20272b; color: #fff; }
.sbc-btn--dark:hover { background: #33403f; color: #fff; opacity: 1; }

/* 定義リスト（ラベル＋値） */
.sbc-dl { border-top: 1px solid rgba(0, 0, 0, .12); }
.sbc-dl__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sbc-dl--wide .sbc-dl__row { grid-template-columns: 88px 1fr; padding: 18px 2px; }
.sbc-dl__dt {
  font-size: 14px;
  letter-spacing: .08em;
  color: #9a9a9a;
  padding-top: 2px;
  line-height: normal;
}
.sbc-dl__dd { margin: 0; font-size: 14.5px; line-height: 1.7; color: #333; }
.sbc-dl__dd .sbc-dl__note { font-size: 14px; color: #9a9a9a; }
.sbc-dl__dd--tel { font-family: "Roboto", "Noto Sans JP", sans-serif; font-size: 17px; letter-spacing: .03em; }
@media (max-width: 480px) {
  .sbc-dl__row,
  .sbc-dl--wide .sbc-dl__row { grid-template-columns: 1fr; gap: 6px; }
}

/* 注記ボックス（! アイコン + テキスト） */
.sbc-infobox { display: flex; gap: 12px; align-items: flex-start; }
.sbc-infobox__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #007ab6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
}
.sbc-infobox__text { margin: 0; font-size: 14.5px; line-height: 1.95; color: #4a4a4a; }

/* 番号付きリスト */
.sbc-numlist { display: flex; flex-direction: column; }
.sbc-numlist__item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sbc-numlist__item:last-child { border-bottom: none; }
.sbc-numlist__num {
  flex: none;
  font-size: 20px;
  color: rgba(0, 122, 182, .4);
  line-height: 1.5;
}
.sbc-numlist__text { margin: 0; font-size: 14px; line-height: 1.95; color: #4a4a4a; }

/* チップ */
.sbc-chip {
  display: inline-block;
  font-size: 14px;
  color: #333;
  background: #eef4f7;
  padding: 10px 18px;
  line-height: 1.6;
}

/* 写真ヒーロー（下層ページ） */
.sbc-hero { position: relative; overflow: hidden; height: clamp(300px, 32vw, 420px); }
.sbc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sbc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, 0));
}
.sbc-hero__overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}
.sbc-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px);
  display: flex;
  align-items: flex-end;
}
.sbc-hero__title {
  padding-bottom: clamp(36px, 5vw, 64px);
  display: flex;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
  color: #fff;
}
.sbc-hero__bar { width: 2px; background: #6fbfe4; flex: none; }
.sbc-hero__en {
  display: block;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .28em;
  opacity: .8;
  margin-bottom: 4px;
  line-height: normal;
}
.sbc-hero__ja {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 34px);
  letter-spacing: .1em;
  line-height: normal;
  color: #fff;
}

/* 写真背景のCTA帯 */
.sbc-cta { position: relative; overflow: hidden; background: #0f5f6b; }
.sbc-cta__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.sbc-cta__bg--low    { background-position: center 70%; }
.sbc-cta__bg--center { background-position: center; }
.sbc-cta__overlay { position: absolute; inset: 0; }
.sbc-cta__overlay--blue  { background: rgba(6, 40, 70, .42); }
.sbc-cta__overlay--teal  { background: rgba(15, 40, 52, .5); }
.sbc-cta__overlay--fee   { background: rgba(10, 45, 55, .5); }
.sbc-cta__overlay--brown { background: rgba(20, 18, 14, .58); }
.sbc-cta__inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(60px, 7vw, 100px) clamp(24px, 5vw, 44px);
  text-align: center;
  color: #fff;
}
.sbc-cta--lg .sbc-cta__inner { padding: clamp(80px, 10vw, 132px) clamp(24px, 5vw, 44px); }
.sbc-cta__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.7;
  letter-spacing: .06em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
}
.sbc-cta__lead { margin: 20px 0 0; font-size: 14px; line-height: 1.9; color: #fff; }
.sbc-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px;
}
.sbc-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  transition: background .25s, transform .2s;
}
.sbc-cta__btn--solid { background: #007ab6; color: #fff; }
.sbc-cta__btn--solid:hover { background: #00648f; color: #fff; opacity: 1; }
.sbc-cta__btn--outline { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.sbc-cta__btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; opacity: 1; }
.sbc-cta__btn--white { background: #fefefe; color: #0f5f6b; font-weight: 600; font-size: 15px; padding: 17px 40px; }
.sbc-cta__btn--white:hover { transform: translateY(-2px); opacity: 1; }
.sbc-cta__btn--stack { border: 1px solid rgba(255, 255, 255, .8); color: #fff; padding: 18px 40px; }
.sbc-cta__btn--stack:hover { background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; }
.sbc-cta__btn-body { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.sbc-cta__btn-label { font-size: 15px; letter-spacing: .06em; }
.sbc-cta__btn-sub {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .16em;
  opacity: .75;
}
.sbc-cta__btn-arrow { font-size: 14px; opacity: .8; }

/* ページトップ */
.sbc-page-top .page-top__link { border-radius: 50%; }

/* ==========================================================================
   4. フッター
   ========================================================================== */
.sbc-footer { background: #fefefe; color: #333; border-top: 1px solid rgba(0, 0, 0, .1); }
.sbc-footer__body { padding: 0; }
.sbc-footer__inner {
  display: grid;
  /* 左：所在地／中：TEL・営業時間／右：地図（地図を広く取る比率） */
  grid-template-columns: 1fr 0.88fr 1.5fr;
  gap: clamp(36px, 4vw, 60px);
  align-items: start;
  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 44px) 0;
}
.sbc-footer__col { display: flex; flex-direction: column; gap: 22px; }
.sbc-footer__logo { line-height: 1; }
.sbc-footer__logo-name { display: block; font-weight: 600; font-size: 24px; letter-spacing: .1em; }
.sbc-footer__logo-en {
  display: block;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .34em;
  margin-top: 9px;
  color: #007ab6;
}
.sbc-footer__label {
  display: block;
  font-size: 14px;
  letter-spacing: .08em;
  color: #8a8a8a;
  margin-bottom: 7px;
  line-height: normal;
}
.sbc-footer__text { margin: 0; font-size: 14px; line-height: 1.8; color: #4a4a4a; }
.sbc-footer__note { color: #8a8a8a; font-size: 14px; }
.sbc-footer__note--block { display: block; margin-top: 5px; }
.sbc-footer__tel {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 20px;
  letter-spacing: .03em;
  color: #333;
  line-height: normal;
}
.sbc-footer__tel:hover { color: #007ab6; }
.sbc-footer__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 0;
}
.sbc-footer__map iframe { position: absolute; inset: 0; }
.sbc-footer__map-note { margin: 0; font-size: 14px; line-height: 1.7; color: #8a8a8a; }
.sbc-footer__bottom {
  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 44px) 30px;
}
.sbc-footer__bottom-inner { border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 22px; text-align: center; }
.sbc-footer .footer-bottom__copyright { font-size: 14px; letter-spacing: .12em; color: #a0a0a0; }
@media (max-width: 639px) {
  .sbc-footer__bottom { padding-bottom: 30px; }
}

/* ==========================================================================
   5. TOP：メインビュー
   ========================================================================== */
.sbc-mv {
  position: relative;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
  background: #20272b;
}
/* #slideshow は本番でCMSスライダー（内部Swiper）に差し替わる外枠 */
#slideshow.sbc-mv__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
}
.sbc-mv__slider .swiper-slide,
.sbc-mv__slider .main_slider__inner { width: 100%; height: 100%; }
.sbc-mv__slider img { width: 100%; height: 100%; object-fit: cover; }
.sbc-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 写真の色（海・空の青）をなるべく残すため、暗幕は最小限にとどめる */
  background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .26));
  pointer-events: none;
}
.sbc-mv__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: 1340px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbc-mv__inner {
  max-width: 820px;
  text-align: center;
  animation: sbcUp 1s .1s both;
}
.sbc-mv__catch {
  margin: 0;
  font-weight: 600;
  font-size: clamp(25px, 4.2vw, 46px);
  line-height: 1.5;
  letter-spacing: .05em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 6px 40px rgba(0, 0, 0, .45);
}
.sbc-mv__en {
  margin: 22px 0 0;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: .06em;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.sbc-mv__lead {
  margin: 30px auto 0;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
@media (max-width: 639px) {
  .sbc-mv__lead { white-space: normal; }
}

/* ==========================================================================
   6. TOP：お知らせ
   ========================================================================== */
.sbc-container--pad-lg { padding-left: clamp(24px, 6vw, 72px); padding-right: clamp(24px, 6vw, 72px); }
.sbc-sec--news { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }

.sbc-topnews__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sbc-topnews__head .sbc-more { margin-top: 24px; }
.sbc-topnews__list { border-top: 1px solid rgba(0, 0, 0, .1); }
.sbc-topnews__list .blog-list__item { border-bottom: 1px solid rgba(0, 0, 0, .09); }
.sbc-topnews__list .blog-list__link {
  gap: 22px;
  padding: 20px 2px;
  transition: opacity .3s;
}
.sbc-topnews__list .blog-list__link:hover { background: none; opacity: .6; }
.sbc-topnews__list .blog-list__date {
  width: 82px;
  font-size: 14px;
  letter-spacing: .06em;
  color: #a0a0a0;
}
.sbc-topnews__list .blog-list__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #3a3a3a;
}
.sbc-topnews__list .blog-list__link:hover .blog-list__title { color: #3a3a3a; }

/* ==========================================================================
   7. TOP：きのこ岩
   ========================================================================== */
.sbc-feature { position: relative; padding-bottom: clamp(64px, 8vw, 100px); }
.sbc-feature__band {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: calc(min(1300px, 100vw) * .26);
  bottom: 0;
  background: #f5f5f5;
  z-index: 0;
}
.sbc-feature__inner { position: relative; z-index: 1; }
.sbc-feature__img {
  aspect-ratio: 16 / 9;
  background: center / cover no-repeat;
  overflow: hidden;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.sbc-feature__body {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.sbc-feature__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(27px, 3.6vw, 42px);
  letter-spacing: .03em;
  line-height: 1.2;
  color: #333;
}
.sbc-feature__sub {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: .16em;
  line-height: normal;
  color: #007ab6;
}
.sbc-feature__text .sbc-lead { margin: 0; }
.sbc-feature__more { margin-top: 28px; }

/* ==========================================================================
   8. TOP：魅力・見どころ
   ========================================================================== */
.sbc-point__head { margin-bottom: clamp(52px, 6vw, 84px); }
.sbc-point__head .sbc-shead__ja { letter-spacing: .06em; }
.sbc-point {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(40px, 4vw, 60px);
}
.sbc-point__item { text-align: center; }
.sbc-point__img {
  aspect-ratio: 4 / 3;
  background: center / cover no-repeat;
  overflow: hidden;
  margin-bottom: 30px;
}
.sbc-point__title {
  margin: 10px 0 0;
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: .04em;
  line-height: 1.65;
  color: #333;
}
.sbc-point__text {
  margin: 18px auto 0;
  max-width: 330px;
  min-height: 140px;
  text-align: left;
  padding-top: 18px;
  border-top: 1px dotted rgba(0, 0, 0, .28);
  font-size: 14px;
  line-height: 2.05;
  color: #6f6f6f;
  text-wrap: pretty;
}
.sbc-point__more { margin-top: 22px; }
@media (max-width: 639px) {
  .sbc-point__text { min-height: 0; }
}

/* ==========================================================================
   9. TOP：ギャラリー
   ========================================================================== */
.sbc-gallery__head { margin-bottom: clamp(44px, 5vw, 68px); padding: 0 clamp(24px, 6vw, 72px); }
.sbc-gallery__head .sbc-shead__ja { font-size: clamp(28px, 4vw, 44px); }
.sbc-gallery__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sbc-gallery__scroll::-webkit-scrollbar { display: none; }
.sbc-gallery__item {
  flex: 0 0 clamp(240px, 42vw, 440px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: center / cover no-repeat;
}
.sbc-gallery__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
/* ギャラリーは自動スクロールのみ（ページャーは置かない）。
   自動で流している間はスナップが引っ張り合うので切る（JS動作時のみ付くクラス） */
/* will-change：毎フレームスクロール位置を書き換えるので、合成レイヤーに載せて描画を軽くする */
.sbc-gallery__scroll.is-autoscroll { scroll-snap-type: none; will-change: scroll-position; }
.sbc-gallery__scroll.is-autoscroll .sbc-gallery__item { scroll-snap-align: none; }

/* ==========================================================================
   10. TOP：アクセス
   ========================================================================== */
.sbc-topaccess {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(44px, 5vw, 80px);
  align-items: center;
}
.sbc-topaccess__head { margin-bottom: 34px; }
.sbc-topaccess__head .sbc-shead__ja { letter-spacing: .04em; }
.sbc-topaccess__more { margin-top: 32px; }
.sbc-topaccess__map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 0;
}
.sbc-topaccess__map iframe { position: absolute; inset: 0; }

/* デザインが line-height を指定していない箇所は normal に揃える */
.sbc-topnews__list .blog-list__date,
.sbc-topnews__list .blog-list__title,
.sbc-shead__ja--lg,
.sbc-shead__ja--sm { line-height: normal; }
.sbc-topnews__list .blog-list__title { line-height: 1.75; }

/* ==========================================================================
   11. 下層：導入 / 区切り帯
   ========================================================================== */
.sbc-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.sbc-intro__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 2.7vw, 30px);
  line-height: 1.9;
  letter-spacing: .03em;
  color: #333;
}
.sbc-intro__text {
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 2.5;
  letter-spacing: .02em;
  color: #4a4a4a;
  text-wrap: pretty;
}
/* 導入の右側：線画イラストから写真に変更したため、枠いっぱいに写真を出す */
.sbc-intro__img { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.sbc-intro__img img { width: 100%; height: 100%; object-fit: cover; }

.sbc-parallax {
  width: 100%;
  height: clamp(300px, 46vw, 560px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 896px) {
  /* iOS等で background-attachment:fixed が効かないため通常スクロールに戻す */
  .sbc-parallax { background-attachment: scroll; }
}

/* ==========================================================================
   12. 下層：Highlights（見どころ）
   ========================================================================== */
.sbc-hl__head { margin-bottom: clamp(44px, 6vw, 80px); }
.sbc-hl { display: flex; flex-direction: column; gap: clamp(88px, 12vw, 160px); }
.sbc-hl__item {
  margin-bottom: 0;
  gap: clamp(36px, 6vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, .16);
  padding-top: clamp(44px, 5vw, 72px);
}
.sbc-hl__item:nth-child(even) { flex-direction: row-reverse; }
.sbc-hl__en {
  margin-bottom: 14px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  color: #007ab6;
}
.sbc-hl__title {
  margin-bottom: 26px;
  font-weight: 500;
  font-size: clamp(19px, 2.3vw, 30px);
  line-height: 1.65;
  letter-spacing: .06em;
  color: #333;
}
.sbc-hl__img { position: relative; border-radius: 0; overflow: visible; }
.sbc-hl__img img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.sbc-hl__sub-img {
  position: absolute;
  right: -14px;
  bottom: -32px;
  width: 44%;
  border: 4px solid #fff;
  line-height: 0;
}
.sbc-hl__sub-img img { aspect-ratio: 4 / 3; }
.sbc-hl__illust {
  margin-top: clamp(28px, 3vw, 40px);
  width: min(62%, 200px);
  aspect-ratio: 1 / 1;
}
.sbc-hl__illust img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 639px) {
  .sbc-hl__item, .sbc-hl__item:nth-child(even) { flex-direction: column; gap: 24px; }
  .sbc-hl__sub-img { right: -8px; bottom: -20px; }
}

/* ご見学時のワンポイントアドバイス */
.sbc-tide {
  margin-top: clamp(48px, 6vw, 72px);
  background: #f5f5f5;
  padding: clamp(44px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.sbc-tide__body { max-width: 340px; }
.sbc-tide__body .sbc-shead__en { margin-bottom: 16px; letter-spacing: .2em; }
.sbc-tide__title {
  margin: 0 0 14px;
  font-weight: 500;
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.6;
  letter-spacing: .04em;
  color: #333;
}
.sbc-tide__note { margin: 0 0 22px; font-size: 14px; line-height: 1.9; color: #7a7a7a; }
.sbc-tide__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #007ab6;
  color: #fff;
  padding: 13px 22px;
  font-size: 14px;
  letter-spacing: .05em;
  transition: background .2s;
}
.sbc-tide__btn:hover { background: #00648f; color: #fff; opacity: 1; }
.sbc-tide__btn-sub {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  opacity: .8;
}
.sbc-cta--sm .sbc-cta__inner { padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 44px); }
.sbc-cta__bg--lower { background-position: center 75%; }

/* デザイン実測に合わせた微調整 */
.sbc-lead { letter-spacing: normal; }
.sbc-feature__text .sbc-lead { letter-spacing: .03em; }
.sbc-cta__title { letter-spacing: .05em; line-height: 1.6; }
.sbc-cta--lg .sbc-cta__title { letter-spacing: .08em; line-height: 1.7; }
.sbc-cta__btn { line-height: normal; gap: 0; }
.sbc-cta__btn--stack { gap: 16px; }

/* ==========================================================================
   13. 料金ページ
   ========================================================================== */
.sbc-sec--fee { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.sbc-price__head { margin-bottom: clamp(36px, 4vw, 52px); }
.sbc-price { border-top: 1px solid rgba(0, 0, 0, .14); }
.sbc-price__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3vw, 30px) clamp(8px, 2vw, 20px);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sbc-price__name {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .08em;
  color: #333;
}
.sbc-price__note { font-size: 15px; color: #8a8a8a; letter-spacing: .02em; font-weight: 400; }
.sbc-price__value {
  margin: 0;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #007ab6;
  line-height: 1;
  white-space: nowrap;
}
.sbc-price__num { font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .02em; }
.sbc-price__yen { font-size: 14px; margin-left: 3px; }
.sbc-price__value--free {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #333;
}
.sbc-price__tax { margin: 16px 0 0; font-size: 14px; color: #8a8a8a; letter-spacing: .03em; text-align: right; }

/* 団体・貸切 */
.sbc-group { position: relative; overflow: hidden; background: #f5f5f5; }
.sbc-group__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  max-width: 560px;
  height: 100%;
  background: center / cover no-repeat;
}
.sbc-group__inner { position: relative; }
.sbc-group__body { max-width: 540px; }
.sbc-group__title { margin: 0 0 20px; text-align: left; }
.sbc-group__text { margin: 0 0 28px; font-size: 14px; line-height: 2.1; color: #4a4a4a; text-wrap: pretty; }
.sbc-telbox {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 22px 32px;
}
.sbc-telbox__icon { color: #007ab6; font-size: 26px; line-height: 1; }
.sbc-telbox__line { width: 1px; height: 38px; background: rgba(0, 0, 0, .12); }
.sbc-telbox__label { display: block; font-size: 14px; letter-spacing: .1em; color: #8a8a8a; margin-bottom: 6px; }
.sbc-telbox__tel {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .04em;
  color: #333;
}
.sbc-telbox__tel:hover { color: #007ab6; }
@media (max-width: 896px) {
  .sbc-group__photo { position: relative; width: 100%; max-width: none; height: 220px; }
  .sbc-group__body { max-width: none; }
}

/* 無料サービス */
.sbc-service__head { margin-bottom: clamp(32px, 4vw, 48px); }
.sbc-service { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sbc-service__item {
  text-align: center;
  padding: clamp(28px, 3vw, 40px) clamp(40px, 4vw, 56px) clamp(28px, 3vw, 40px) 0;
  border-right: 1px solid rgba(0, 0, 0, .14);
}
.sbc-service__item:last-child { padding: clamp(28px, 3vw, 40px) 0 clamp(28px, 3vw, 40px) clamp(40px, 4vw, 56px); border-right: none; }
.sbc-service__icon { display: block; font-size: 30px; color: #007ab6; line-height: 1; }
.sbc-service__title { margin: 18px 0 10px; font-weight: 500; font-size: 22px; color: #333; }
.sbc-service__text { margin: 0; font-size: 14.5px; line-height: 2; color: #5a5a5a; }
@media (max-width: 639px) {
  .sbc-service__item,
  .sbc-service__item:last-child { padding: 28px 0; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .14); }
  .sbc-service__item:last-child { border-bottom: none; }
}

/* お支払い方法 */
.sbc-pay__head { margin-bottom: clamp(28px, 3vw, 40px); }
.sbc-pay { background: #fff; border: 1px solid rgba(0, 0, 0, .09); padding: clamp(30px, 4vw, 48px); }
.sbc-pay__main { display: flex; gap: clamp(20px, 3vw, 32px); align-items: center; }
.sbc-pay__icon {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #eef4f7;
  color: #007ab6;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbc-pay__title { margin: 0 0 10px; font-weight: 500; font-size: 18px; color: #333; }
.sbc-pay__text { margin: 0; font-size: 14px; line-height: 2.05; color: #4a4a4a; }
.sbc-pay__foot {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(0, 0, 0, .09);
}
.sbc-infobox--center { justify-content: center; align-items: center; gap: 12px; }
.sbc-infobox--center .sbc-infobox__mark { margin-top: 0; }

/* ==========================================================================
   14. アクセスページ
   ========================================================================== */
.sbc-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.sbc-info__map {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 280px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 0;
  overflow: hidden;
}
.sbc-info__map iframe { position: absolute; inset: 0; }

.sbc-shead__ja--mid { font-size: clamp(21px, 2.7vw, 30px); }
.sbc-shead__ja--bus { font-size: clamp(19px, 2.4vw, 26px); }

.sbc-carnavi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: #4a4a4a;
  margin: 16px 0 32px;
  line-height: 1.8;
}
.sbc-carnavi__chip {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .16em;
  color: #007ab6;
  border: 1px solid rgba(0, 122, 182, .4);
  padding: 4px 10px;
}
.sbc-carnavi__tel { font-family: "Roboto", "Noto Sans JP", sans-serif; font-weight: 500; }

.sbc-time {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, .09);
  border: 1px solid rgba(0, 0, 0, .09);
}
.sbc-time__item { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: #fff; }
.sbc-time__value {
  flex: none;
  min-width: 96px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #007ab6;
}
.sbc-time__num { font-size: 30px; }
.sbc-time__unit { font-size: 14px; color: #333; margin-left: 3px; }
.sbc-time__name { display: block; font-size: 15px; color: #333; }
.sbc-time__note { display: block; font-size: 14px; color: #8a8a8a; margin-top: 4px; }
@media (max-width: 639px) {
  .sbc-time { grid-template-columns: 1fr; }
}

.sbc-bus { margin-top: clamp(64px, 8vw, 104px); }
.sbc-bus .sbc-shead__ja--bus { margin-bottom: 20px; }
.sbc-bus__box { background: #fff; border: 1px solid rgba(0, 0, 0, .09); padding: clamp(28px, 4vw, 40px); }
.sbc-bus__note { margin: 0 0 20px; font-size: 14px; color: #8a8a8a; }
.sbc-bus__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 10px; }
.sbc-bus__arrow { color: #007ab6; font-size: 14px; }
.sbc-bus__foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .08); }
.sbc-infobox--sm .sbc-infobox__mark { width: 20px; height: 20px; font-size: 14px; }
.sbc-infobox--sm .sbc-infobox__text { font-size: 14px; line-height: 1.8; color: #6a6a6a; }

.sbc-check__head { margin-bottom: 32px; }
.sbc-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.sbc-check__item { display: flex; gap: 20px; background: #f5f5f5; padding: clamp(24px, 3vw, 32px); }
.sbc-check__icon { flex: none; font-size: 28px; color: #007ab6; line-height: 1.2; }
.sbc-check__title { margin: 0 0 10px; font-weight: 500; font-size: 17px; letter-spacing: .04em; color: #333; }
.sbc-check__text { margin: 0; font-size: 14px; line-height: 2; color: #4a4a4a; }

/* ==========================================================================
   15. 予約ページ
   ========================================================================== */
.sbc-lang { position: relative; }
.sbc-lang__deco {
  position: absolute;
  left: calc(100% - 110px);
  bottom: -40px;
  width: min(42vw, 420px);
  aspect-ratio: 5 / 4;
  background: left bottom / contain no-repeat;
  opacity: .5;
  pointer-events: none;
}
.sbc-lang__head { position: relative; margin-bottom: clamp(32px, 4vw, 44px); }
.sbc-lang__title { margin: 0 0 16px; font-size: clamp(21px, 2.8vw, 30px); }
.sbc-lang__text { margin: 0; font-size: 14px; line-height: 1.9; color: #5a5a5a; }
.sbc-lang__btns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
}
.sbc-lang__btn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  color: #fff;
  transition: background .2s;
}
.sbc-lang__btn--ja { background: #007ab6; }
.sbc-lang__btn--ja:hover { background: #00648f; color: #fff; opacity: 1; }
.sbc-lang__btn--en { background: #20272b; }
.sbc-lang__btn--en:hover { background: #33403f; color: #fff; opacity: 1; }
.sbc-lang__btn-en {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .2em;
  opacity: .75;
}
.sbc-lang__btn-label { font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.sbc-lang__btn-label--en { font-family: "Roboto", "Noto Sans JP", sans-serif; letter-spacing: .02em; }
@media (max-width: 896px) {
  .sbc-lang__deco { display: none; }
}

.sbc-notes__head { margin-bottom: clamp(36px, 4vw, 52px); }
.sbc-notes__head .sbc-shead__ja { font-size: clamp(21px, 2.8vw, 30px); }
.sbc-notes { display: flex; flex-direction: column; gap: 14px; }
.sbc-notes__item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .09);
  border-left: 3px solid #007ab6;
  padding: 26px 30px;
}
.sbc-notes__title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .04em;
  color: #333;
}
.sbc-notes__mark { flex: none; width: 6px; height: 6px; background: #007ab6; transform: rotate(45deg); }
.sbc-notes__text { margin: 0; font-size: 14px; line-height: 1.95; color: #5a5a5a; }

/* お電話でのご予約 */
.sbc-phone { position: relative; overflow: hidden; background: #20272b; }
.sbc-phone__bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.sbc-phone__overlay { position: absolute; inset: 0; background: rgba(18, 30, 32, .62); }
.sbc-phone__inner { position: relative; }
.sbc-phone__box {
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(3px);
  padding: clamp(32px, 5vw, 52px);
  text-align: center;
}
.sbc-phone__en { color: #6fbfe4; }
.sbc-phone__title {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: clamp(19px, 2.5vw, 26px);
  letter-spacing: .05em;
  color: #fff;
}
.sbc-phone__sub { margin: 0 0 20px; font-size: 14px; color: #fff; }
.sbc-phone__tel {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: .03em;
  color: #fff;
}
.sbc-phone__tel:hover { color: #fff; opacity: .8; }
.sbc-phone__note { margin: 18px 0 0; font-size: 14.5px; color: #fff; }

/* ==========================================================================
   16. お知らせ（一覧・詳細）
   ========================================================================== */
.sbc-sec--blog { padding-top: clamp(52px, 6vw, 88px); padding-bottom: clamp(52px, 6vw, 88px); }
.sbc-sec--entry { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.sbc-blog { gap: clamp(36px, 5vw, 60px); flex-wrap: wrap; align-items: flex-start; }
.sbc-blog__main { width: auto; flex: 1 1 460px; min-width: 0; }

.sbc-blog__cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.sbc-blog__cat {
  font-size: 14px;
  letter-spacing: .06em;
  padding: 8px 18px;
  border: 1px solid rgba(0, 0, 0, .16);
  color: #555;
  line-height: 1.6;
}
.sbc-blog__cat.is-current { background: #007ab6; border-color: #007ab6; color: #fff; }

.sbc-blog__list { border-top: 1px solid rgba(0, 0, 0, .12); }
.sbc-blog__item {
  display: flex;
  gap: 24px;
  padding: 26px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: inherit;
  transition: opacity .3s;
}
.sbc-blog__item:hover { opacity: .66; color: inherit; }
.sbc-blog__thumb {
  flex: none;
  width: 120px;
  aspect-ratio: 4 / 3;
  background: center / cover no-repeat;
}
.sbc-blog__body { display: block; }
.sbc-blog__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.sbc-blog__date {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  color: #8a8a8a;
}
.sbc-blog__badge {
  font-size: 14px;
  letter-spacing: .08em;
  color: #007ab6;
  border: 1px solid rgba(0, 122, 182, .4);
  padding: 2px 8px;
  line-height: 1.6;
}
.sbc-blog__title {
  display: block;
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  letter-spacing: .03em;
  color: #333;
}
.sbc-blog__excerpt { display: block; margin-top: 8px; font-size: 14px; line-height: 1.7; color: #7a7a7a; }
.sbc-blog__pager { margin: 44px 0 0; }
.sbc-blog__pager .pagination__link { min-width: 42px; height: 42px; font-family: "Roboto", "Noto Sans JP", sans-serif; font-size: 14px; }
@media (max-width: 480px) {
  .sbc-blog__item { flex-direction: column; gap: 14px; }
  .sbc-blog__thumb { width: 100%; }
}

/* サイドバー */
.sbc-side {
  width: auto;
  flex: 1 1 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.sbc-side__title {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .06em;
  color: #333;
  padding-bottom: 12px;
  border-bottom: 2px solid #007ab6;
}
.sbc-side__list { display: flex; flex-direction: column; }
.sbc-side__link {
  display: flex;
  justify-content: space-between;
  color: #4a4a4a;
  font-size: 14.5px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.sbc-side__link:hover { color: #007ab6; opacity: 1; }
.sbc-side__count { color: #a0a0a0; font-family: "Roboto", "Noto Sans JP", sans-serif; font-size: 14px; }
.sbc-side__list--archive .sbc-side__link { font-family: "Roboto", "Noto Sans JP", sans-serif; font-size: 14px; padding: 10px 2px; }
.sbc-side__recent { display: flex; flex-direction: column; gap: 16px; }
.sbc-side__recent-link { display: block; color: #4a4a4a; font-size: 14px; line-height: 1.7; }
.sbc-side__recent-link:hover { color: #007ab6; opacity: 1; }
.sbc-side__recent-date {
  display: block;
  margin-bottom: 4px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: #a0a0a0;
}
@media (max-width: 896px) {
  .sbc-side { max-width: none; margin-top: 40px; }
}

/* 記事詳細 */
.sbc-article { flex: 1 1 480px; }
.sbc-article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sbc-article__date {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  color: #8a8a8a;
}
.sbc-article__title {
  margin: 0 0 32px;
  font-weight: 500;
  font-size: clamp(23px, 3.2vw, 30px);
  line-height: 1.55;
  letter-spacing: .04em;
  color: #333;
}
.sbc-article__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: center / cover no-repeat;
  overflow: hidden;
  margin-bottom: 40px;
}
.sbc-article__body { font-size: 15px; line-height: 2.15; letter-spacing: .02em; color: #3f3f3f; }
.sbc-article__body p { margin: 0 0 28px; text-wrap: pretty; }
.sbc-article__body p:last-child { margin-bottom: 0; }
.sbc-article__body h2 {
  margin: 40px 0 18px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .04em;
  color: #333;
  padding-left: 14px;
  border-left: 3px solid #007ab6;
  line-height: 1.6;
}
.sbc-article__back { display: flex; justify-content: center; margin-top: 52px; }
.sbc-article__back-btn {
  border: 1px solid rgba(0, 0, 0, .2);
  color: #333;
  padding: 14px 40px;
  font-size: 14.5px;
  letter-spacing: .08em;
  transition: background .2s, color .2s;
}
.sbc-article__back-btn:hover { background: #333; color: #fff; opacity: 1; }

/* 装飾のはみ出しで横スクロールが出ないようにする（デザインの overflow-x:hidden ラッパー相当） */
main { overflow-x: clip; }

/* セクション余白のバリエーション（デザイン実測） */
.sbc-sec--sm  { padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); }
.sbc-sec--104 { padding-top: clamp(60px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 104px); }
.sbc-sec--110 { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }

/* --------------------------------------------------------------------------
   追加調整
   -------------------------------------------------------------------------- */
/* フッター：タブレット以下は「所在地＋TEL」の2列＋地図を全幅、SPは1列 */
@media (max-width: 896px) {
  .sbc-footer__inner { grid-template-columns: 1fr 1fr; }
  .sbc-footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .sbc-footer__inner { grid-template-columns: 1fr; }
  .sbc-footer__col:last-child { grid-column: auto; }
}

/* 「詳しく見る」の丸枠：ホバーしても枠線は消さない */
.sbc-more:hover .sbc-more__arrow { background: #fff; border-color: rgba(0, 0, 0, .35); }
.sbc-more--white:hover .sbc-more__arrow { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }

/* 文字サイズの下限を14pxにする方針。
   共通CSSは body を tablet 1.4rem / SP 1.2rem に縮小するため、ここで打ち消す。 */
@media (max-width: 896px) {
  body { font-size: 1.6rem; }
}
@media (max-width: 639px) {
  body { font-size: 1.6rem; }
}

/* 14px化で字間が広がりすぎる英字ラベルは letter-spacing を調整して収める */
.sbc-logo__sub { letter-spacing: .18em; }
.sbc-footer__logo-en { letter-spacing: .18em; }
.sbc-hero__en { letter-spacing: .28em; }
.sbc-cta__btn-sub { letter-spacing: .1em; }
.sbc-lang__btn-en { letter-spacing: .12em; }
.sbc-carnavi__chip { letter-spacing: .1em; }
.sbc-gallery__caption { letter-spacing: .08em; }
.sbc-shead__en { letter-spacing: .18em; }
.sbc-sp-nav .sp-nav__en { letter-spacing: .14em; }

/* 潮位アドバイス：左右の間隔を詰める */
.sbc-tide { gap: clamp(24px, 2.6vw, 44px); }

/* Highlights の各行間隔（指定どおり。min>max のため実質88px固定になる） */
.sbc-hl { gap: clamp(88px, 12vw, 70px); }

/* フッター3カラム比率（共通の .footer-body--3col が 1fr×3 を当てるので詳細度を上げて上書き） */
.sbc-footer .sbc-footer__inner { grid-template-columns: 1fr 0.88fr 1.5fr; }
@media (max-width: 896px) {
  .sbc-footer .sbc-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .sbc-footer .sbc-footer__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Highlights：フルブリード交互レイアウト
   写真をコンテナ外（画面端）まで伸ばし、テキストは内側に置く。
   奇数行＝写真right寄せで右端まで／偶数行＝写真left寄せで左端まで。
   -------------------------------------------------------------------------- */
.sbc-hl__item {
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  border-top: none;
  padding-top: 0;
}
.sbc-hl__item .card-feature__body { flex: 0 1 44%; }
.sbc-hl__img { flex: 1 1 auto; align-self: stretch; }
.sbc-hl__img img { aspect-ratio: 3 / 2; }

/* 画面端まで伸ばす（コンテンツボックス端から画面端までの距離＝50vw - 50%） */
.sbc-hl__item:nth-child(odd)  .sbc-hl__img { margin-right: calc(50% - 50vw); }
.sbc-hl__item:nth-child(even) .sbc-hl__img { margin-left: calc(50% - 50vw); }

/* 重ね写真は内側（テキスト側）に寄せる */
.sbc-hl__item:nth-child(odd)  .sbc-hl__sub-img { left: -14px; right: auto; }
.sbc-hl__item:nth-child(even) .sbc-hl__sub-img { right: -14px; left: auto; }

@media (max-width: 639px) {
  .sbc-hl__item .card-feature__body { flex: 1 1 auto; }
  .sbc-hl__item:nth-child(odd) .sbc-hl__img,
  .sbc-hl__item:nth-child(even) .sbc-hl__img {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .sbc-hl__item:nth-child(odd) .sbc-hl__sub-img,
  .sbc-hl__item:nth-child(even) .sbc-hl__sub-img { left: auto; right: 16px; bottom: -20px; }
}

/* Highlights：テキスト幅を確保し、写真は残り幅いっぱい（basis 0） */
.sbc-hl__item .card-feature__body { flex: 0 0 42%; }
.sbc-hl__item .sbc-hl__img { flex: 1 1 0; min-width: 0; }
@media (max-width: 639px) {
  .sbc-hl__item .card-feature__body { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Highlights：参考レイアウト（画面半分の写真を左右交互に隙間なく連続させ、
   反対側の余白にテキストを縦中央で置く市松構成）
   -------------------------------------------------------------------------- */
.sbc-hl { gap: 0; }
.sbc-hl__item {
  gap: 0;
  align-items: center;
  margin-bottom: 0;
  border-top: none;
  padding-top: 0;
}
/* 写真：コンテナ外の画面端まで伸ばして画面のちょうど半分に */
.sbc-hl__item .sbc-hl__img { flex: 0 0 50%; align-self: stretch; }
.sbc-hl__img img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; }
/* テキスト：残り半分の中で内側に寄せる */
.sbc-hl__item .card-feature__body {
  flex: 0 0 50%;
  padding: clamp(24px, 3vw, 48px) clamp(20px, 3.4vw, 60px);
}
.sbc-hl__title { margin-bottom: 22px; }

@media (max-width: 639px) {
  .sbc-hl__item .sbc-hl__img,
  .sbc-hl__item .card-feature__body { flex: 1 1 auto; }
  .sbc-hl__img img { aspect-ratio: 4 / 3; }
  .sbc-hl__item .card-feature__body { padding: 32px 0 44px; }
}

/* Highlights：写真を画面のちょうど半分に（負マージン分を写真が吸収するよう basis 0 で伸ばす） */
.sbc-hl__item .sbc-hl__img { flex: 1 1 0; }
.sbc-hl__item .card-feature__body { flex: 0 0 50%; }
@media (max-width: 639px) {
  .sbc-hl__item .sbc-hl__img,
  .sbc-hl__item .card-feature__body { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   お知らせ一覧（ブログCMS出力＝共通 blog-list マークアップ）
   -------------------------------------------------------------------------- */
.sbc-newslist { border-top: 1px solid rgba(0, 0, 0, .12); }
.sbc-newslist .blog-list__item { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.sbc-newslist .blog-list__link {
  align-items: baseline;
  gap: 24px;
  padding: 26px 4px;
  transition: opacity .3s;
}
.sbc-newslist .blog-list__link:hover { background: none; opacity: .66; }
.sbc-newslist .blog-list__date {
  width: 100px;
  flex: none;
  font-size: 14px;
  letter-spacing: .06em;
  color: #8a8a8a;
  line-height: normal;
}
.sbc-newslist .blog-list__title {
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  letter-spacing: .03em;
  color: #333;
}
.sbc-newslist .blog-list__link:hover .blog-list__title { color: #333; }
@media (max-width: 480px) {
  .sbc-newslist .blog-list__link { flex-wrap: wrap; gap: 6px 16px; }
  .sbc-newslist .blog-list__date { width: auto; }
}

/* --------------------------------------------------------------------------
   Highlights：写真の面積を抑えてテキストとのバランスを取る
   -------------------------------------------------------------------------- */
.sbc-hl__item .card-feature__body { flex: 0 0 56%; }
.sbc-hl__img img { aspect-ratio: 3 / 2; }
@media (max-width: 639px) {
  .sbc-hl__item .card-feature__body { flex: 1 1 auto; }
  .sbc-hl__img img { aspect-ratio: 4 / 3; }
}

/* Highlights：行間と文字まわりの余白をゆったりさせる */
.sbc-hl { gap: clamp(40px, 5vw, 80px); }
.sbc-hl__item .card-feature__body {
  padding: clamp(24px, 3vw, 48px) clamp(24px, 4.5vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sbc-hl__item .card-feature__body > * { max-width: 460px; }
.sbc-hl__title { margin-bottom: 26px; }
.sbc-hl__item .card-feature__text { margin-bottom: 0; }
@media (max-width: 639px) {
  .sbc-hl__item .card-feature__body { padding: 32px 0 44px; }
  .sbc-hl__item .card-feature__body > * { max-width: none; }
}

/* TOP：きのこ岩の写真をスクロールで貼り付いて見せる（固定背景） */
.sbc-feature__img {
  background-attachment: fixed;
  background-position: center;
}
@media (max-width: 896px) {
  /* iOS等で background-attachment:fixed が効かないため通常スクロールに戻す */
  .sbc-feature__img { background-attachment: scroll; }
}

/* Highlights：写真とテキストの間隔を広めに（外側は控えめ、写真側を大きく） */
.sbc-hl__item:nth-child(odd) .card-feature__body {
  padding-right: clamp(32px, 8vw, 150px);
  padding-left: clamp(0px, 2vw, 40px);
}
.sbc-hl__item:nth-child(even) .card-feature__body {
  padding-left: clamp(32px, 8vw, 150px);
  padding-right: clamp(0px, 2vw, 40px);
}
@media (max-width: 639px) {
  .sbc-hl__item:nth-child(odd) .card-feature__body,
  .sbc-hl__item:nth-child(even) .card-feature__body { padding: 32px 0 44px; }
}

/* Highlights：中央（写真↔テキスト）の余白を微調整 */
.sbc-hl__item:nth-child(odd) .card-feature__body { padding-right: clamp(28px, 6.8vw, 130px); }
.sbc-hl__item:nth-child(even) .card-feature__body { padding-left: clamp(28px, 6.8vw, 130px); }
@media (max-width: 639px) {
  .sbc-hl__item:nth-child(odd) .card-feature__body,
  .sbc-hl__item:nth-child(even) .card-feature__body { padding: 32px 0 44px; }
}

/* フッター：地図の高さを横のカラムの内容量に合わせる */
.sbc-footer .sbc-footer__inner { align-items: stretch; }
.sbc-footer__col:last-child { height: 100%; }
.sbc-footer__map { aspect-ratio: auto; flex: 1 1 auto; min-height: 200px; }
@media (max-width: 896px) {
  .sbc-footer__map { aspect-ratio: 4 / 3; flex: 0 0 auto; }
}

/* セクション間の横罫線区切り */
.sbc-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .16);
  margin: 0;
  height: 0;
}

/* Highlights：写真の画面端までのブリードをやめ、セクション両サイドに余白を残す */
.sbc-hl__item:nth-child(odd) .sbc-hl__img,
.sbc-hl__item:nth-child(even) .sbc-hl__img { margin-left: 0; margin-right: 0; }
@media (max-width: 639px) {
  .sbc-hl__item:nth-child(odd) .sbc-hl__img,
  .sbc-hl__item:nth-child(even) .sbc-hl__img { margin-left: 0; margin-right: 0; }
}

/* フッターの地図キャプションのみ1px小さく */
.sbc-footer__map-note { font-size: 13px; }

/* TOPの大きめ左右余白コンテナ：左右の余白なし（SPのみ端に寄りすぎないよう最小余白を確保） */
.sbc-container--pad-lg { padding-left: 0; padding-right: 0; }
@media (max-width: 896px) {
  .sbc-container--pad-lg { padding-left: 20px; padding-right: 20px; }
}

/* Highlights：写真は行の高さに引き伸ばさず、比率を保って中央に置く */
.sbc-hl__item .sbc-hl__img { align-self: center; }
.sbc-hl__img img { height: auto; }

/* TOPの「詳しく見る」はすべて右揃え */
.sbc-feature__more,
.sbc-point__more,
.sbc-topaccess__more {
  display: flex;
  width: fit-content;
  margin-left: auto;
}

/* 導入セクションの英字見出し（デザインの ISHIGAKI SABICHI CAVE ラベル） */
.sbc-intro__en { margin-bottom: 22px; letter-spacing: .24em; }

/* 看板猫イラスト：見どころ一覧とワンポイントアドバイスの間に中央配置 */
.sbc-hl__illust {
  width: min(62%, 200px);
  margin: clamp(40px, 5vw, 72px) auto 0;
}
.sbc-hl__illust img { object-position: center; }

/* 重ね写真の位置調整 */
.sbc-hl__item:nth-child(odd) .sbc-hl__sub-img { left: -45px; }

/* 団体・貸切：横の写真をもう少し広く */
.sbc-group__photo { width: 46%; max-width: 700px; }
@media (max-width: 896px) {
  .sbc-group__photo { width: 100%; max-width: none; }
}

/* 無料サービス：グレー背景の角丸カードに */
.sbc-service { gap: clamp(20px, 3vw, 32px); }
.sbc-service__item,
.sbc-service__item:last-child {
  background: #f5f5f5;
  border-radius: 12px;
  border-right: none;
  border-bottom: none;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
}

/* 魅力・見どころの「詳しく見る」は中央配置 */
.sbc-point__more { margin-left: auto; margin-right: auto; }

/* ロゴの英字は和文名に対して小さめの比率にする（14px下限の例外） */
.sbc-logo__sub { font-size: 11px; letter-spacing: .3em; }
.sbc-footer__logo-en { font-size: 11px; letter-spacing: .3em; }

/* 無料サービスのカード背景をアクセスページと同じ薄いグレー水色に */
.sbc-service__item,
.sbc-service__item:last-child { background: #f5f9f9; }

/* きのこ岩の写真：about の全幅パララックス帯と同じ扱い（画面幅いっぱい＋固定背景） */
.sbc-feature__img {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: auto;
  height: clamp(300px, 46vw, 560px);
  background-attachment: fixed;
  background-position: center;
}
@media (max-width: 896px) {
  .sbc-feature__img { background-attachment: scroll; height: clamp(240px, 56vw, 400px); }
}

/* きのこ岩の写真：元のデザイン（コンテナ内の16:9）に戻す */
.sbc-feature__img {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media (max-width: 896px) {
  .sbc-feature__img { height: auto; }
}

/* お知らせ一覧：トップページのお知らせと同じ見た目に揃える */
.sbc-newslist { border-top: 1px solid rgba(0, 0, 0, .1); }
.sbc-newslist .blog-list__item { border-bottom: 1px solid rgba(0, 0, 0, .09); }
.sbc-newslist .blog-list__link { gap: 22px; padding: 20px 2px; }
.sbc-newslist .blog-list__date { width: 82px; font-size: 14px; color: #a0a0a0; }
.sbc-newslist .blog-list__title { font-size: 14px; font-weight: 400; line-height: 1.75; color: #3a3a3a; }

/* きのこ岩の写真：スクロールしても画面に張り付いたまま（枠ごとsticky） */
.sbc-feature__inner { position: relative; }
.sbc-feature__img {
  position: sticky;
  top: 86px;
  z-index: 0;
  background-attachment: scroll;
}
@media (max-width: 896px) {
  .sbc-feature__img { position: static; top: auto; }
}
.sbc-feature__body { position: relative; z-index: 1; background: transparent; }

/* ヘッダー：ナビ・電話番号を2px大きく */
.sbc-nav__ja { font-size: 15.5px; }
.sbc-header__tel { font-size: 18px; }

/* 記事詳細：CMS出力（本文・前後記事）の体裁 */
.sbc-article__body img { max-width: 100%; height: auto; }
.sbc-article__pager .pages {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.sbc-article__pager .page_prev { margin-left: auto; text-align: right; }
.sbc-article__pager a { font-size: 14px; letter-spacing: .04em; color: #333; }
.sbc-article__pager a:hover { color: #007ab6; opacity: 1; }
.sbc-article__back { margin-top: 40px; }

/* きのこ岩：sticky をやめて元の位置関係に戻す（テキストが写真に重ならないように）。
   スクロール時の貼り付き演出は固定背景で表現する。 */
.sbc-feature__img {
  position: static;
  top: auto;
  background-attachment: fixed;
}
@media (max-width: 896px) {
  .sbc-feature__img { background-attachment: scroll; }
}

/* 料金表の右下横に猫と人物のイラストを配置 */
.sbc-price-sec { position: relative; }
.sbc-price__illust {
  position: absolute;
  left: calc(100% - 40px);
  bottom: clamp(40px, 6vw, 90px);
  width: min(24vw, 220px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.sbc-price__illust img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
@media (max-width: 1100px) {
  .sbc-price__illust {
    position: static;
    width: min(50%, 180px);
    margin: 24px 0 0 auto;
  }
}

/* 税込注記は左揃え */
.sbc-price__tax { text-align: left; }

/* 料金表のイラスト：もう少し右へ（狭い画面では表の下に回り込ませる） */
.sbc-price__illust { left: calc(100% + 30px); }
@media (max-width: 1300px) {
  .sbc-price__illust {
    position: static;
    left: auto;
    bottom: auto;
    width: min(50%, 180px);
    margin: 24px 0 0 auto;
  }
}

/* SPでは重ね写真が画面外にはみ出さないようにする（後勝ちの left:-45px を打ち消す） */
@media (max-width: 639px) {
  .sbc-hl__item:nth-child(odd) .sbc-hl__sub-img,
  .sbc-hl__item:nth-child(even) .sbc-hl__sub-img {
    left: auto;
    right: 12px;
    bottom: -16px;
    width: 38%;
  }
}

/* タブレット以下：フッター地図が縦に伸びすぎないように比率を調整 */
@media (max-width: 896px) {
  .sbc-footer__map { aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) {
  .sbc-footer__map { aspect-ratio: 4 / 3; }
}

/* 記事詳細：サイドバーなしの1カラム（読みやすい幅で中央寄せ） */
.sbc-article--full { flex: 1 1 100%; max-width: 900px; margin: 0 auto; }

/* ヘッダーナビ：カレントの●あしらいは不要（文字色と太さのみで表現） */

/* アンカー遷移時に固定ヘッダーへ潜り込まないようにする */
#intro, .sbc-hl__item[id] { scroll-margin-top: 110px; }

/* ワンポイントアドバイス：番号リスト側の幅を広めに取る */
.sbc-tide { grid-template-columns: minmax(220px, 0.72fr) 1.28fr; }
@media (max-width: 896px) {
  .sbc-tide { grid-template-columns: 1fr; }
  .sbc-tide__body { max-width: none; }
}

/* Highlights：両サイドにブルーの円形グラデーション。
   attachment は fixed（画面基準）なので、スクロールしても円の位置は動かず
   コンテンツだけが上を流れていく。円は小さめ。 */
.sbc-hl-section {
  background-color: #fff;
  background-image:
    radial-gradient(circle at 0% 30%, rgba(0, 122, 182, .20), rgba(0, 122, 182, 0) 18%),
    radial-gradient(circle at 100% 72%, rgba(111, 191, 228, .26), rgba(111, 191, 228, 0) 20%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 896px) {
  /* iOS等で background-attachment:fixed が効かないため通常スクロールに戻す */
  .sbc-hl-section { background-attachment: scroll; }
}

/* セクション見出し：和文を大きく見せ、英字は下に小さくブロック体で添える */
.sbc-shead__en--under { margin-top: 16px; margin-bottom: 0; }

/* トップのお知らせ：3件を超える分は内部スクロール（ページャーなし） */
.sbc-topnews__list {
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 122, 182, .35) transparent;
}
.sbc-topnews__list::-webkit-scrollbar { width: 6px; }
.sbc-topnews__list::-webkit-scrollbar-thumb { background: rgba(0, 122, 182, .35); border-radius: 3px; }
.sbc-topnews__list::-webkit-scrollbar-track { background: transparent; }

/* お知らせ一覧のページャー（CMS出力 .pages）：記事ページと同じ左右レイアウト */
.sbc-newslist .pages {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: none;
}
.sbc-newslist .page_prev { order: 1; text-align: left; }
.sbc-newslist .page_next { order: 2; margin-left: auto; text-align: right; }
.sbc-newslist .pages a { font-size: 14px; letter-spacing: .04em; color: #333; }
.sbc-newslist .pages a:hover { color: #007ab6; opacity: 1; }


/* SP専用の改行 */
.sbc-br-sp { display: none; }

/* ------------------------------------------------------------------
   スマホ調整
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .sbc-br-sp { display: inline; }

  /* 本文の行間を詰める */
  .sbc-lead { font-size: 14.5px; line-height: 2; }

  /* ワンポイントアドバイスの余白を小さく */
  .sbc-tide { padding: 28px 20px; gap: 22px; margin-top: 40px; }
  .sbc-tide__title { font-size: 19px; }
  .sbc-numlist__item { padding: 14px 0; gap: 14px; }

  /* ページヒーロー */
  .sbc-hero { height: clamp(210px, 52vw, 300px); }
  .sbc-hero__title { padding-bottom: 26px; gap: 0; }
  .sbc-hero__en { font-size: 12px; letter-spacing: .18em; margin-bottom: 6px; }
  .sbc-hero__ja { font-size: 25px; letter-spacing: .06em; }
  .sbc-hero__inner { padding-left: 20px; padding-right: 20px; }
}

/* SPドロワーの文字サイズ調整 */
@media (max-width: 639px) {
  .sbc-sp-nav { padding: 76px 24px 32px; }
  .sbc-sp-nav .sp-nav__link { font-size: 18px; letter-spacing: .05em; padding: 15px 2px; }
  .sbc-sp-nav .sp-nav__en { font-size: 14px; letter-spacing: .12em; }
  .sbc-sp-nav__bottom { padding-top: 24px; gap: 12px; }
  .sbc-sp-nav__cta { font-size: 15px; padding: 15px; }
  .sbc-sp-nav__tel { font-size: 18px; }
}

/* SP：Highlights の英字ラベルを小さめに */
@media (max-width: 639px) {
  .sbc-hl__en { margin-bottom: 14px; font-weight: 500; font-size: 12px; }
}

/* SP：無料サービスカードの文字サイズ */
@media (max-width: 639px) {
  .sbc-service__item { padding: 28px 20px; }
  .sbc-service__icon { font-size: 26px; }
  .sbc-service__title { margin: 14px 0 8px; font-size: 18px; }
  .sbc-service__text { font-size: 14px; line-height: 1.9; }
}

/* 無料サービスの説明文：文節で自然に折り返す */
.sbc-service__text {
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* SP：お支払い方法は1カラム（アイコンを上に） */
@media (max-width: 639px) {
  .sbc-pay { padding: 24px 20px; }
  .sbc-pay__main { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .sbc-pay__icon { width: 64px; height: 64px; font-size: 26px; }
  .sbc-pay__title { font-size: 17px; }
  .sbc-pay__text { text-wrap: balance; word-break: auto-phrase; }
  .sbc-pay__foot { margin-top: 20px; padding-top: 20px; }
  .sbc-infobox--center { align-items: flex-start; text-align: left; }
}

/* SP：主要拠点・周辺観光地からのアクセス／路線バス */
@media (max-width: 639px) {
  .sbc-carnavi { gap: 8px; margin: 14px 0 24px; line-height: 1.7; }
  .sbc-carnavi__chip { padding: 3px 8px; letter-spacing: .08em; }
  .sbc-time__item { padding: 16px 18px; gap: 14px; align-items: flex-start; }
  .sbc-time__value { min-width: 68px; }
  .sbc-time__num { font-size: 20px; }
  .sbc-time__name { font-size: 15px; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
  .sbc-time__note { font-size: 12px; margin-top: 6px; line-height: 1.7; }
  .sbc-bus { margin-top: 44px; }
  .sbc-bus__box { padding: 22px 18px; }
  .sbc-bus__flow { gap: 10px; flex-direction: column; align-items: stretch; }
  .sbc-bus__arrow { text-align: center; transform: rotate(90deg); }
  .sbc-chip { padding: 10px 14px; text-align: center; }
}

/* SP：路線バスブロックの折り返し／予約ページのリード文は左揃え */
@media (max-width: 639px) {
  .sbc-bus__note { line-height: 1.7; }
  .sbc-bus__box .sbc-infobox__text { text-wrap: balance; word-break: auto-phrase; }
  .sbc-lang__text { text-align: left; }
}

/* --------------------------------------------------------------------------
   SP：フッターは1列に落とさず「所在地／TEL・営業時間」の2列を維持する。
   狭い列幅に収めるため、フッター内だけ 14px 下限方針の例外として文字を縮小。
   地図カラムは従来どおり全幅。
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .sbc-footer .sbc-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .sbc-footer__col:last-child { grid-column: 1 / -1; }
  .sbc-footer__col { gap: 18px; }

  .sbc-footer__logo-name { font-size: 18px; letter-spacing: .04em; }
  .sbc-footer__logo-en { font-size: 10px; letter-spacing: .12em; margin-top: 6px; }

  .sbc-footer__label { font-size: 12px; margin-bottom: 5px; }
  .sbc-footer__text { font-size: 13px; line-height: 1.75; }
  .sbc-footer__note { font-size: 11px; }
  /* TEL / FAX の SP サイズは末尾の統一ルールのあとに再指定 */
  .sbc-footer__map-note { font-size: 12px; line-height: 1.7; }

  .sbc-footer .footer-bottom__copyright { font-size: 11px; letter-spacing: .06em; }
}

/* フッター：FAX は TEL と同じ見た目で別ブロックに並べる（リンクではないので色変化なし） */
.sbc-footer__tel--plain { display: block; cursor: default; }
.sbc-footer__tel--plain:hover { color: inherit; opacity: 1; }

/* ギャラリーの英字（見出しの下）：左右に横罫線を添える */
.sbc-gallery__head .sbc-shead__en--under {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
}
.sbc-gallery__head .sbc-shead__en--under::before,
.sbc-gallery__head .sbc-shead__en--under::after {
  content: "";
  flex: none;
  width: clamp(28px, 7vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: .45;
}
@media (max-width: 639px) {
  /* SP：横罫線付きの英字が折り返さないよう罫線を詰める */
  .sbc-gallery__head .sbc-shead__en--under { gap: 10px; }
  .sbc-gallery__head .sbc-shead__en--under::before,
  .sbc-gallery__head .sbc-shead__en--under::after { width: 22px; }
}

/* フッターの TEL / FAX は「営業時間・定休日」など他の項目と同じ文字サイズ・色・太さに揃える */
.sbc-footer__tel {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.8;
  color: #4a4a4a;
}
.sbc-footer__tel:hover { color: #007ab6; }
.sbc-footer__tel--plain:hover { color: #4a4a4a; }

/* SP：ページトップボタンは非表示（コピーライトへの重なりを避ける） */
@media (max-width: 639px) {
  .sbc-page-top { display: none; }
}
@media (max-width: 639px) {
  .sbc-footer__tel { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   SP：画面下部の固定CTA（お電話／WEB予約）
   -------------------------------------------------------------------------- */
.sbc-spbar { display: none; }
@media (max-width: 639px) {
  .sbc-spbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #fefefe;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sbc-spbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: normal;
  }
  .sbc-spbar__btn i { font-size: 15px; }
  .sbc-spbar__btn--tel { background: #fefefe; color: #333; }
  .sbc-spbar__btn--tel i { color: #007ab6; }
  .sbc-spbar__btn--book { background: #007ab6; color: #fff; }
  .sbc-spbar__btn:hover { opacity: 1; }

  /* 固定バーの高さ分、ページ末尾に余白を確保 */
  .sbc-footer__bottom { padding-bottom: 86px; }
}

/* 途中で改行させたくない語句のラッパー（丸括弧の中身など） */
.sbc-nobr { display: inline-block; }

@media (max-width: 639px) {
  /* SP：バスの注記とチップの文字サイズ */
  .sbc-bus__note { font-size: 12px; }
  .sbc-chip { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   TOPのお知らせ：2カラム（左＝見出し／右＝一覧＋詳しく見る）
   -------------------------------------------------------------------------- */
.sbc-topnews__body { display: flex; flex-direction: column; }
.sbc-topnews__more { align-self: flex-end; margin-top: 24px; }
@media (min-width: 640px) {
  .sbc-topnews {
    display: grid;
    grid-template-columns: clamp(180px, 22vw, 260px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  .sbc-topnews__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sbc-topnews__body { grid-column: 2; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   フッター：PC は TEL と FAX を横並び2カラムに
   -------------------------------------------------------------------------- */
.sbc-footer__telfax { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .sbc-footer__telfax { grid-template-columns: 0.5fr 1fr; gap: 0; }
}

/* ヘッダーのWEB予約ボタン：チケットアイコン付き・角丸2px */
.sbc-header__cta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 2px;
}
.sbc-header__cta i { font-size: 13px; }

/* きのこ岩：スクロールインの transform が containing block を作り、
   子要素の background-attachment: fixed を無効化していたため、
   この枠だけフェードのみの演出に差し替える。 */
@keyframes sbcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sbc-feature__inner.sbc-reveal.is-visible { animation-name: sbcFadeIn; }

/* ヘッダーナビ：和文の下に英字を添える */
.sbc-nav__en {
  display: block;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .14em;
  line-height: 1;
  margin-top: 7px;
  color: inherit;
  opacity: .65;
  white-space: nowrap;
}
.sbc-nav .header__nav-item--current .sbc-nav__en { opacity: .85; }
.is-fixed .sbc-nav .header__nav-item--current .sbc-nav__en { color: #007ab6; }

/* Highlights：縦位置を下に寄せる写真（「子宝の洞」のプレートが切れないように） */
.sbc-hl__img img.sbc-hl__img--bottom { object-position: center bottom; }

/* 洞窟を抜けた先のコース（見どころの下・無料サービスと同じ2カラムカード） */
.sbc-course { margin-top: clamp(48px, 6vw, 72px); }
/* 見どころとの区切り（破線）。区切り線の上下に同じ間隔をとる */
.sbc-divider--dash { border-top-style: dashed; border-top-color: rgba(0, 0, 0, .22); }
.sbc-course__divider { margin-top: clamp(48px, 6vw, 72px); }
.sbc-course__head { margin-bottom: 18px; }
.sbc-course__lead {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: #4a4a4a;
}

/* パンフレット（表面・裏面の画像＋PDFダウンロード） */
.sbc-pamph__head { margin-bottom: 18px; }
.sbc-pamph__lead {
  margin: 0 0 clamp(24px, 3vw, 36px);
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: #4a4a4a;
}
/* パンフレットは3つ折りA4横のため、表面・裏面を1枚ずつ大きく縦に並べる */
.sbc-pamph {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 44px);
}
.sbc-pamph__item { margin: 0; }
.sbc-pamph__item img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .09);
}
.sbc-pamph__cap {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .1em;
  color: #5a5a5a;
}
.sbc-pamph__btns { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }

/* セクション背景：白と交互に敷く淡いブルー（サブカラー系・全ページ共通） */
.sbc-bg-section { background: #edf4f8; }