/* =========================================================
   ★ここを編集：色・文字・余白★
   色を変えたいときは、この一覧の色コードを変えるだけでOKです。
   ========================================================= */
:root {
  --sea-deep: #155a97;    /* 濃い海の青（見出し・フッター） */
  --sea-main: #2a7cc2;    /* 海の青（ボタンなど） */
  --sky: #d8f0fb;         /* うすい空色（背景） */
  --sand: #fdf6ec;        /* 砂浜色（背景） */
  --paper: #ffffff;       /* 白 */
  --ink: #2b3a45;         /* 文字色（濃い紺グレー） */
  --accent: #d6404f;      /* 赤（お休み・アクセント） */
  --line: rgba(43, 58, 69, 0.15);

  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; /* 見出し用の丸い字 */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* 文字は大きめ（読みやすさ優先） */
  font-size: 18px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 999;
  top: 8px; left: 8px;
  padding: 10px 16px;
  background: var(--sea-deep);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* =========================================================
   ヘッダー（白い丸型バー・参考サイト風）
   ========================================================= */
.site-header {
  position: fixed;
  z-index: 200;
  top: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* left/right/margin auto で中央寄せ（transformを使うと、スマホの全画面メニューが
     画面全体ではなくヘッダーの中に閉じ込められてしまうため、あえて使っていません） */
  width: min(1160px, calc(100% - 24px));
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px 8px 22px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(21, 90, 151, 0.18);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 26px;
  color: var(--sea-main);
}
.brand-name {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--sea-deep);
}
.brand-sub {
  font-size: 12px;
  color: #6b7a85;
  letter-spacing: 0.04em;
}
.site-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 110px 24px 60px;
  background: var(--sea-deep);
  overflow-y: auto;
}
.site-nav.is-open { display: flex; }
.site-nav a {
  width: 100%;
  max-width: 320px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding: 16px 18px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* 画面幅に関係なく、ナビゲーションはメニューボタンに畳む */
.menu-toggle {
  display: inline-flex;
  position: relative;
  z-index: 210;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--sea-deep);
  background: #fff;
  color: var(--sea-deep);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
/* メニューが開いている間は、後ろのページがスクロールしない */
body.menu-is-open { overflow: hidden; }
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle-bars i {
  width: 20px; height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   メインビジュアル（海のイラスト）
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 雲がゆっくり右へ流れる */
.cloud { animation: cloud-drift 60s linear infinite; }
.cloud-2 { animation-duration: 80s; animation-delay: -30s; }
.cloud-3 { animation-duration: 95s; animation-delay: -55s; }
@keyframes cloud-drift {
  from { transform: translateX(-320px); }
  to   { transform: translateX(1760px); }
}

/* カモメがふわふわ */
.gull { animation: gull-float 5s ease-in-out infinite; }
.gull-2 { animation-delay: -1.6s; }
.gull-3 { animation-delay: -3.2s; }
@keyframes gull-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(10px, -8px); }
}

/* 波のきらめきがゆらゆら */
.ripple { animation: ripple-fade 4s ease-in-out infinite; }
.ripple:nth-child(2n) { animation-delay: -2s; }
.ripple:nth-child(3n) { animation-delay: -1s; }
@keyframes ripple-fade {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 0.95; transform: translateX(8px); }
}

/* 船・流氷・カニの板がゆっくり上下にゆれる */
.boat { animation: bob 6s ease-in-out infinite; transform-origin: 470px 650px; }
.ice-big { animation: bob 8s ease-in-out infinite; }
.floe { animation: bob 7s ease-in-out infinite; }
.floe-4 { animation-delay: -1.2s; }
.floe-5 { animation-delay: -3.6s; }
.hero-crab-raft { animation: bob 5s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.sun { animation: sun-glow 5s ease-in-out infinite; transform-origin: 1180px 150px; }
@keyframes sun-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}

/* クジラがゆったり泳ぎ、潮がプシューッと吹き出す */
.hero-whale { animation: whale-bob 7s ease-in-out infinite; }
@keyframes whale-bob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -5px); }
}
.whale-spout {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: spout-puff 4.2s ease-in-out infinite;
}
@keyframes spout-puff {
  0%, 10%   { opacity: 0; transform: translateY(10px) scale(0.45); }
  20%       { opacity: 1; transform: translateY(0) scale(1); }
  42%       { opacity: 1; transform: translateY(-3px) scale(1.08); }
  64%       { opacity: 0.68; transform: translateY(-10px) scale(1.12); }
  84%, 100% { opacity: 0; transform: translateY(-20px) scale(1.18); }
}

/* カニのハサミがチョキチョキ動く */
.crab-claw {
  transform-box: fill-box;
}
.crab-claw-left {
  transform-origin: 100% 40%;
  animation: claw-snip-left 1.1s ease-in-out infinite;
}
.crab-claw-right {
  transform-origin: 0% 40%;
  animation: claw-snip-right 1.1s ease-in-out infinite;
  animation-delay: -0.15s;
}
@keyframes claw-snip-left {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-18deg); }
}
@keyframes claw-snip-right {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(18deg); }
}

.hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 20px 80px;
}
.hero-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--sea-deep);
  background: rgba(255, 255, 255, 0.82);
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
}
.hero-title {
  margin: 10px 0;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(40px, 10vw, 96px);
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: #fff;
  text-shadow:
    0 4px 0 rgba(21, 90, 151, 0.35),
    0 10px 30px rgba(21, 90, 151, 0.45);
}
.hero-lead {
  margin: 0 auto;
  max-width: 34em;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 22px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(21, 90, 151, 0.6);
}
.hero-buttons {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ボタン（大きめ・押しやすく） */
.btn {
  display: inline-block;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: #fff;
  color: var(--sea-deep);
  box-shadow: 0 6px 20px rgba(21, 90, 151, 0.35);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(21, 90, 151, 0.6);
}
.scroll-cue-arrow { animation: cue 1.6s ease-in-out infinite; font-size: 20px; }
@keyframes cue {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =========================================================
   セクション共通
   ========================================================= */
.section { padding: clamp(64px, 10vw, 110px) 20px; scroll-margin-top: calc(var(--header-h) + 20px); }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-title {
  margin: 0 0 10px;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 42px);
  letter-spacing: 0.06em;
  color: var(--sea-deep);
  text-align: center;
}
/* 見出しの下の波線かざり */
.section-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 12px;
  margin: 10px auto 0;
  background:
    radial-gradient(circle at 6px -2px, transparent 8px, var(--sea-main) 8.5px, var(--sea-main) 10px, transparent 10.5px)
    repeat-x;
  background-size: 24px 12px;
  opacity: 0.7;
}
.section-lead {
  margin: 0 0 40px;
  text-align: center;
  font-size: clamp(16px, 2vw, 19px);
}

/* 出現アニメーション（script.jsが .visible を付けます） */
.reveal-target {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-target.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-target { opacity: 1; transform: none; transition: none; }
  .hero-sea { transform: none; will-change: auto; }
  .cloud, .gull, .ripple, .boat, .ice-big, .sun, .scroll-cue-arrow,
  .hero-whale, .whale-spout, .crab-claw-left, .crab-claw-right,
  .hero-crab-raft, .floe { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   営業カレンダー
   ========================================================= */
.section-calendar { background: var(--sky); }
.calendar-box {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  padding: clamp(18px, 4vw, 36px);
  box-shadow: 0 12px 36px rgba(21, 90, 151, 0.14);
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.calendar-month {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--sea-deep);
}
.calendar-nav {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  color: var(--sea-deep);
  background: var(--sky);
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.calendar-nav:hover:not(:disabled) { background: #bfe4f5; }
.calendar-nav:disabled { opacity: 0.35; cursor: default; }

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar-table th {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 15px;
  padding: 8px 0;
  color: #5b6b76;
}
.calendar-table th.is-sun { color: var(--accent); }
.calendar-table th.is-sat { color: var(--sea-main); }
.calendar-table td {
  height: 64px;
  border: 1px solid var(--line);
  vertical-align: top;
  padding: 6px;
  font-size: 17px;
  font-weight: 500;
}
.calendar-table td.is-empty { border: none; }
.calendar-table td.is-sun .cal-date { color: var(--accent); }
.calendar-table td.is-sat .cal-date { color: var(--sea-main); }
.cal-date { display: block; line-height: 1.2; }
.cal-closed-label {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  padding: 4px 7px;
}
.calendar-table td.is-closed { background: #fdecee; }
.calendar-table td.is-today { outline: 3px solid var(--sea-main); outline-offset: -3px; border-radius: 4px; }

.calendar-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 18px 0 0;
  padding: 0;
  font-size: 15px;
}
.calendar-legend li { display: flex; align-items: center; gap: 8px; }
.legend-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13px;
}
.legend-open { background: #fff; border: 1px solid var(--line); }
.legend-closed { background: #fdecee; color: var(--accent); border: 1px solid #f5c6cc; }
.legend-today { background: #fff; outline: 3px solid var(--sea-main); outline-offset: -3px; }
.calendar-note {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--sea-deep);
}

/* =========================================================
   波の区切り（セクションのつなぎ目）
   背景色 = 上のセクションの色 / 波の色 = 下のセクションの色
   ========================================================= */
.wave-sep {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: -1px;
}
.sep-sea { background: #155a97; }   /* 上がヒーローの海 */
.sep-white { background: #ffffff; } /* 上が白のセクション */
.sep-sky { background: var(--sky); }  /* 上が空色のセクション */
.sep-sand { background: var(--sand); } /* 上が砂色のセクション */

/* =========================================================
   お品書き
   ========================================================= */
.section-menu { background: var(--sand); }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.menu-card {
  background: #fff;
  border-radius: 26px;
  padding: 26px 28px 30px;
  box-shadow: 0 8px 24px rgba(43, 58, 69, 0.1);
}
.menu-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 3px dotted rgba(42, 124, 194, 0.35);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 21px;
  color: var(--sea-deep);
}
.menu-icon { width: 26px; height: 26px; color: var(--sea-main); flex-shrink: 0; }
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  font-size: 17px;
}
.menu-list li i {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-4px);
}
.menu-list li b {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--sea-deep);
  white-space: nowrap;
}
.menu-note {
  margin: 26px 0 0;
  text-align: center;
  font-size: 14px;
  color: #6b7a85;
}

/* =========================================================
   お知らせ（横にめくれるカードスライダー）
   ========================================================= */
.section-news { padding-bottom: clamp(40px, 7vw, 70px); }
.news-slider {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(8px, 6vw, 60px);
}
.news-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-track::-webkit-scrollbar { display: none; }
.news-card {
  scroll-snap-align: start;
  flex: 0 0 min(360px, 82vw);
  background: #fff;
  border-radius: 26px;
  padding: 26px 26px 24px;
  box-shadow: 0 8px 24px rgba(21, 90, 151, 0.12);
}
.news-date {
  margin: 0 0 8px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  color: var(--sea-main);
}
.news-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 19px;
  color: var(--sea-deep);
}
.news-card p:last-child { margin: 0; font-size: 15.5px; line-height: 1.8; }
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(21, 90, 151, 0.22);
  font-size: 24px;
  line-height: 1;
  color: var(--sea-deep);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, transform 0.2s;
}
.slider-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.slider-arrow:disabled { opacity: 0.3; cursor: default; }
.slider-arrow-prev { left: 0; }
.slider-arrow-next { right: 0; }
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.slider-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
.slider-dot.is-active { width: 26px; background: var(--sea-main); }

/* =========================================================
   お店の様子（タイプライター文＋横に流れる写真）
   ========================================================= */
.shop-typewriter {
  margin: 0 0 36px;
  min-height: 2.2em;
  text-align: center;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--sea-deep);
}
.type-cursor {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: var(--sea-main);
  vertical-align: text-bottom;
  animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.shop-marquee {
  overflow: hidden;
  /* 左右のはしをふわっと消す */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.shop-track {
  display: flex;
  width: max-content;
  animation: marquee-flow 55s linear infinite;
}
/* カーソルを乗せる（指で触れる）と止まります */
.shop-marquee:hover .shop-track,
.shop-marquee:focus-within .shop-track {
  animation-play-state: paused;
}
@keyframes marquee-flow {
  to { transform: translateX(-50%); }
}
/* 逆向きに流したいときは shop-track にこのclassを足す */
.marquee-reverse { animation-direction: reverse; }
.shop-card {
  margin: 0 12px;
  width: min(380px, 76vw);
  flex-shrink: 0;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(21, 90, 151, 0.14);
}
.shop-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.shop-card figcaption {
  padding: 14px 18px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  color: var(--sea-deep);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .shop-track { animation: none; }
  .type-cursor { animation: none; }
  .shop-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* =========================================================
   フェイクスイーツ
   ========================================================= */
.section-sweets { background: var(--sand); }
.sweets-insta-wrap { margin-top: clamp(32px, 6vw, 52px); }
.blog-banner-icon-insta {
  background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd7e37 22%, #d62976 55%, #962fbf 78%, #4f5bd5 100%);
}
.blog-banner-icon-youtube { background: var(--accent); }
.sns-banners-sweets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.sweets-sns-note {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
  color: #6b7a85;
}

/* =========================================================
   YouTube動画
   ========================================================= */
.movie-frame {
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(21, 90, 151, 0.2);
  background: #0e1c28;
}
.movie-frame iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.movie-more { margin: 28px 0 0; text-align: center; }
.btn-sea {
  background: var(--sea-main);
  color: #fff;
  box-shadow: 0 6px 20px rgba(21, 90, 151, 0.3);
}

/* =========================================================
   ブログ・SNS
   ========================================================= */
.section-blog { background: var(--sky); }
.sns-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.blog-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 26px;
  padding: 24px 28px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(21, 90, 151, 0.16);
  transition: transform 0.25s, box-shadow 0.25s;
}
.blog-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(21, 90, 151, 0.24);
}
.blog-banner-icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sea-main);
  color: #fff;
  font-size: 26px;
}
.blog-banner-icon-x { background: var(--ink); }
.blog-banner-text { display: flex; flex-direction: column; }
.blog-banner-text strong {
  font-family: var(--font-round);
  font-size: 21px;
  color: var(--sea-deep);
}
.blog-banner-text small { color: #6b7a85; font-size: 14px; }
.blog-banner-arrow {
  margin-left: auto;
  font-size: 26px;
  color: var(--sea-main);
}

/* =========================================================
   アクセス
   ========================================================= */
.access-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
.access-map {
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(43, 58, 69, 0.14);
}
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.access-info dl { margin: 0; }
.access-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.access-row dt {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--sea-deep);
}
.access-row dd { margin: 0; }
.tel-link {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 22px;
  color: var(--sea-deep);
  text-decoration: none;
}
.tel-link:hover { text-decoration: underline; }

/* =========================================================
   フッター（海の中）
   ========================================================= */
.site-footer { margin-top: 40px; }
.footer-wave { display: block; width: 100%; height: 60px; }
.footer-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#155a97, #0b3054 78%, #092947);
  color: #eaf5fc;
  text-align: center;
}
.undersea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.footer-text {
  position: relative;
  z-index: 2;
  padding: 44px 20px 300px;
}
.footer-brand {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.1em;
}
.footer-copy { margin: 6px 0 14px; font-size: 15px; }
.footer-dive {
  margin: 0 0 14px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 14px;
  color: #9cc8e8;
}
.footer-note { margin: 0; font-size: 13px; opacity: 0.7; }

/* 海の中の生きものたちの動き */
.sea-whale { animation: whale-swim 9s ease-in-out infinite; }
@keyframes whale-swim {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(24px, -12px); }
}
.sea-fish { animation: fish-swim 14s ease-in-out infinite; }
.fish-b { animation-duration: 11s; animation-delay: -4s; }
.fish-c { animation-duration: 17s; animation-delay: -8s; }
@keyframes fish-swim {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-90px); }
}
.sea-jelly { animation: jelly-bob 6s ease-in-out infinite; }
@keyframes jelly-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
.sea-kelp { transform-origin: bottom center; animation: kelp-sway 5s ease-in-out infinite; transform-box: fill-box; }
.kelp-2 { animation-delay: -1.6s; }
.kelp-3 { animation-delay: -3.2s; }
@keyframes kelp-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.bubble { animation: bubble-rise 7s linear infinite; }
.bubble-2 { animation-delay: -2s; }
.bubble-3 { animation-delay: -4.5s; }
.bubble-4 { animation-delay: -3s; }
@keyframes bubble-rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-300px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-whale, .sea-fish, .sea-jelly, .sea-kelp, .bubble { animation: none; }
}

/* 上へ戻るボタン */
.to-top {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--sea-deep);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 20px rgba(21, 90, 151, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(10px);
}
.to-top span { font-size: 11px; }
.to-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }

/* いつでも押せる「営業日を見る」ボタン（左下に固定表示） */
.cta-float {
  position: fixed;
  z-index: 95;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 14px 16px;
  border-radius: 999px;
  background: var(--sea-deep);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 22px rgba(21, 90, 151, 0.38);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-float:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(21, 90, 151, 0.44); }
.cta-float-icon { width: 22px; height: 22px; flex-shrink: 0; color: #fff; }

/* =========================================================
   スマホ・タブレット対応
   ========================================================= */
@media (max-width: 1279px) {
  .brand-sub { display: none; }
}
@media (max-width: 900px) {
  .access-grid { grid-template-columns: 1fr; }
  .sns-banners { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 820px) {
  .brand-sub { display: none; }
  .calendar-table td { height: 56px; font-size: 15px; padding: 4px; }
  .cal-closed-label { font-size: 11px; padding: 3px 5px; }
}

/* とても狭い画面（小さめのスマホなど）ではロゴを少し小さく */
@media (max-width: 480px) {
  .site-header { padding: 8px 10px 8px 16px; gap: 8px; }
  .brand { gap: 6px; }
  .brand-mark, .brand-name { font-size: 19px; }
  .menu-toggle { padding: 8px 12px; font-size: 14px; }
}