:root{
  --navy:#0E2237;      /* 深海 */
  --navy2:#132C46;     /* 少し明るい紺（カード等） */
  --cream:#F3ECDC;     /* 生成り */
  --ink:#2B2622;       /* 墨 */
  --red:#E4573F;       /* 朱赤（ヒトデ・CTA） */
  --pink:#F3A0B4;      /* ロゴまわり */
  --teal:#186D62;      /* 青緑 */
  --yellow:#F2C24C;    /* 黄 */
  --blue:#2B5379;      /* INFORMATION ブロブ。中の黄と生成りが読めるよう濃いめ */
  --red-ink:#F0503C;   /* トークンの朱赤（版ズレ用） */
  --f-display:"Mochiy Pop One",sans-serif;    /* 見出しはこの1書体に統一 */
  --f-impact:var(--f-display);                /* FVも同じ書体で */
  --f-kaku:"Zen Kaku Gothic New",sans-serif;  /* 角ゴ本文（FV） */
  --f-body:"Zen Maru Gothic",sans-serif;      /* 丸ゴ本文 */
  --f-num:"DM Mono",monospace;                /* 数字 */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
body{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.9;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:998;
  opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* =============================================================
   共通パーツ
   ============================================================= */
.inner{max-width:1080px;margin:0 auto;padding:0 32px;}

.sec-label{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-num);font-size:15px;letter-spacing:.12em;
  font-weight: 400;
  margin-bottom:10px;
}
.sec-label .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid currentColor;border-radius:50%;
  font-size:12px;
}
.sec-title{
  font-family:var(--f-display);
  font-size:clamp(22px,3vw,30px);
  font-weight:400;letter-spacing:.04em;
  margin-bottom:28px;
}

/* 波の区切り（cream セクションの上下） */
/* セクションの仕切り。大きなうねりの上を、細い帯が並走する2層構造 */
.wave{
  display:block;width:100%;
  height:clamp(150px,19vw,280px);
  background:var(--navy);
  /* 高さが小数になると要素の継ぎ目に細い線が見えることがあるので、
     前後に1pxずつ食い込ませて隙間を潰す */
  margin-top:-1px;
  margin-bottom:-1px;
}
.wave-body{fill:var(--sec-bg,var(--cream));}
/* 帯は青緑。紺の中に一本、色の違う線を走らせる */
.wave-ribbon{fill:var(--teal);}

/* フェードイン */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.rv.on{opacity:1;transform:none;}

/* =============================================================
   LOADING — ヒトデが1匹ずつ増える
   ============================================================= */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .5s ease;
}
.loader.done{opacity:0;pointer-events:none;}
.loader-stars{display:flex;gap:16px;align-items:center;}
/* 消灯：薄く・小さく／点灯：くっきり・原寸（--r は1匹ごとの傾き） */
.loader-stars img{
  width:58px;height:58px;object-fit:contain;
  opacity:.16;
  transform:rotate(var(--r,0deg)) scale(.72);
  transition:opacity .3s ease,
             transform .45s cubic-bezier(.34,1.56,.64,1);
}
.loader-stars img.lit{
  opacity:1;
  transform:rotate(var(--r,0deg)) scale(1);
}
.loader-txt{
  font-family:var(--f-display);font-size:18px;color:var(--ink);letter-spacing:.14em;
}

/* =============================================================
   HEADER
   ============================================================= */
.hd{
  position:absolute;top:0;left:0;width:100%;z-index:55;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
}
.hd-logo{position:relative;display:block;z-index:1;}
/* ロゴの黒い線が紺に沈むので、後ろだけふんわり明るくする */
.hd-logo::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:180%;height:250%;
  /* closest-side にしないと、辺の中央で透明になりきらず四角い箱に見える */
  background:radial-gradient(ellipse closest-side at center,
    rgba(243,236,220,.95) 0%,
    rgba(243,236,220,.80) 34%,
    rgba(243,236,220,.42) 56%,
    rgba(243,236,220,.14) 74%,
    rgba(243,236,220,0)   100%);
}

.hd-logo img{width:190px;height:auto;position:relative;}

/* ハンバーガーボタン：PCでは使わないので隠す */
.hd-burger{
  display:none;
  position:relative;z-index:60; /* 全画面メニュー(z-index:50)より手前に。閉じるボタンも兼ねるため */
  width:44px;height:44px;
  padding:0;border:0;background:none;
  cursor:pointer;
}
.hd-burger span{
  display:block;
  position:absolute;left:10px;right:10px;
  height:2px;background:var(--cream);
  border-radius:2px;
  transition:transform .3s ease,opacity .3s ease,background .3s ease;
}
.hd-burger span:nth-child(1){top:15px;}
.hd-burger span:nth-child(2){top:22px;}
.hd-burger span:nth-child(3){top:29px;}
/* 開いているときは×に変形 */
.hd-burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg);}
.hd-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hd-burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg);}

/* SPの全画面メニュー：PCでは常に隠す・使わない */
.hd-menu{display:none;}

.hd-nav{display:flex;align-items:center;gap:32px;}
.hd-nav a{
  font-size:16px;letter-spacing:.1em;font-weight:500;
  border-bottom:2px solid transparent;
}
.hd-nav a:hover{border-bottom-color:var(--pink);}
.hd-cta{
  background:var(--pink);color:var(--navy);
  font-weight:700;font-size:13px;letter-spacing:.08em;
  padding:8px 16px;border-radius:999px;
  transition:transform .2s ease;
}
.hd-cta:hover{transform:scale(1.05);}

/* SP 下部ナビ */
.bottom-nav{display:none;}

/* =============================================================
   01 HERO
   ============================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* 切り抜きを目立たせるため、写真ではなくフラットな深海色 */
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,
      rgba(32,72,110,.55) 0%,
      rgba(20,48,76,.25) 45%,
      rgba(14,34,55,0) 78%),
    var(--navy);
}
/* 左上から差し込む光（フラット背景では控えめに。切り抜きを埋もれさせない） */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(146deg,
      rgba(243,236,220,.14) 0%,
      rgba(243,236,220,.05) 14%,
      rgba(243,236,220,0)   30%),
    radial-gradient(ellipse 46% 40% at -4% -10%,
      rgba(243,236,220,.42) 0%,
      rgba(243,236,220,.26) 24%,
      rgba(243,236,220,.10) 48%,
      rgba(243,236,220,0)   78%);
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:760px;
  margin:0 auto;
  padding:120px 24px 96px;
  text-align:center;
}
.hero-title{margin-bottom:0;}
/* 見出しはロゴ画像。中心から広がるように現れる */
.ht-logo{
  display:block;
  width:min(100%, 520px);
  height:auto;
  margin:0 auto 26px;
  /* 出るまでは中心に畳まれた状態 */
  opacity:0;
  transform:scale(.18);
  transform-origin:center center;
}
.hero.is-ready .ht-logo{
  animation:logoOpen 1.05s cubic-bezier(.16,.9,.24,1) .15s forwards;
}
@keyframes logoOpen{
  0%  {opacity:0; transform:scale(.18);}
  35% {opacity:1;}
  70% {transform:scale(1.04);}   /* 少し行き過ぎてから */
  100%{opacity:1; transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .ht-logo{opacity:1;transform:none;animation:none;}
}

.hero-lead{
  font-family:var(--f-kaku);
  letter-spacing:.06em;
  margin:0 auto;
  text-shadow:0 1px 10px rgba(8,20,34,.6);
}
.hero-lead span{display:block;}
.hero-lead .hl-row{
  font-size:clamp(13px,1.3vw,18px);line-height:2.3;
}
/* 大／小をそのまま文字サイズで見せる行 */
.hl-scale{
  line-height:1.5;margin-bottom:14px;
  display:flex;align-items:baseline;flex-wrap:wrap;
  justify-content:center;
}
.hl-big{
  font-family:var(--f-impact);font-weight:400;
  font-size:clamp(22px,2.9vw,36px);
  letter-spacing:.02em;
}
.hl-small{
  font-weight:400;
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.1em;opacity:.85;
}
.hl-accent{
  font-style:normal;font-weight:700;
  color:var(--yellow);
}
.hero-cta{
  display:inline-block;
  margin-top:34px;
  padding:16px 40px;
  border-radius:999px;
  background:var(--yellow);color:var(--navy);
  font-weight:700;font-size:14.5px;letter-spacing:.08em;
  transition:transform .2s ease;
}
/* マウスを乗せた瞬間に一度だけぶるっと震えて止まる */
.hero-cta:hover,
.hero-cta:focus-visible{
  animation:ctaShake .5s ease-in-out 1;
}
/* だんだん揺れが小さくなって自然に止まる */
@keyframes ctaShake{
  0%     {transform:translate(0,0)       rotate(0deg);}
  12%    {transform:translate(-3px,1px)  rotate(-1.6deg);}
  26%    {transform:translate(3px,-1px)  rotate(1.4deg);}
  40%    {transform:translate(-2px,-1px) rotate(-1deg);}
  54%    {transform:translate(2px,1px)   rotate(.8deg);}
  68%    {transform:translate(-1px,1px)  rotate(-.5deg);}
  82%    {transform:translate(1px,0)     rotate(.3deg);}
  100%   {transform:translate(0,0)       rotate(0deg);}
}
/* 動きを抑える設定では震わせない */
@media (prefers-reduced-motion:reduce){
  .hero-cta:hover,
  .hero-cta:focus-visible{animation:none;transform:scale(1.04);}
}
.hero-scroll{
  position:absolute;right:26px;bottom:120px;z-index:2;
  font-family:var(--f-num);font-size:14px;letter-spacing:.3em;
  writing-mode:vertical-rl;opacity:.8;
}
.hero-scroll::after{
  content:"";display:block;width:1px;height:46px;background:var(--cream);
  margin:12px auto 0;
}

/* =============================================================
   02 営業時間・チケット（cream）
   ============================================================= */
/* 生成りのセクション。上から下へ、少しずつ海の色に寄せていく */
.sec-cream{
  --sec-bg:var(--cream);
  position:relative;background:var(--sec-bg);color:var(--ink);
}
.sec-cream--ticket{--sec-bg:#FCE8C4;}   /* 日の当たる浅瀬 */
.sec-cream--fun   {--sec-bg:#C4E2D8;}   /* 少し潜ったところ */
.sec-cream .wave-top{margin-top:-1px;transform:translateY(-99%);position:absolute;top:0;left:0;}
.ticket-sec{padding:16px 0 44px;position:relative;}
.ticket-cols{
  display:grid;grid-template-columns:1fr 1.2fr 1fr 138px;gap:40px;align-items:start;
  margin-top:14px;
}
.tk h3{
  font-family:var(--f-num);font-size:16px;letter-spacing:.22em;
  color:var(--teal);margin-bottom:14px;
}
.tk-open{font-family:var(--f-num);font-size:clamp(26px,2.6vw,34px);letter-spacing:.02em;}
.tk-note{font-size:14px;margin-top:6px;opacity:.75;}
.tk table{width:100%;border-collapse:collapse;font-size:16px;}
.tk td{padding:7px 0;vertical-align:top;}
.tk td:last-child{text-align:right;font-family:var(--f-num);white-space:nowrap;}

/* INFORMATION ブロブ */
/* INFORMATION ＝ マンタのふきだし */
.tk-info{
  position:relative;background:var(--blue);color:var(--cream);
  padding:32px 36px 48px;
  /* いびつな手描き感のある輪郭 */
  border-radius:62% 38% 45% 55% / 40% 62% 38% 60%;
  transform:rotate(-1.4deg);
}
/* しっぽ：右のマンタへ向ける */
.tk-info::after{
  content:"";position:absolute;
  right:-15px;top:50%;transform:translateY(-70%);
  width:40px;height:27px;
  background:var(--blue);
  clip-path:polygon(0 4%, 100% 50%, 14% 100%);
}
/* しっぽの先の小さな泡 */
.tk-info::before{
  content:"";position:absolute;
  right:-30px;top:50%;transform:translateY(70%);
  width:11px;height:11px;border-radius:50%;
  background:var(--blue);
}
.tk-info h3{color:var(--yellow);}
.tk-info li{list-style:none;font-size:13px;line-height:2.1;}
.tk-info li::before{content:"・";}
/* カメラを持ったマンタ */
.tk-manta{align-self:center;}
.tk-manta img{width:100%;height:auto;}
/* 中間幅：4列目をやめ、マンタはINFORMATIONの下に回す */
@media (max-width:1080px){
  .ticket-cols{grid-template-columns:1fr 1.2fr 1fr;gap:36px;}
  .tk-manta{grid-column:3;justify-self:end;width:116px;margin-top:18px;}
  .tk-info::after,.tk-info::before{display:none;}
}
/* =============================================================
   03 3つのへんてこ（navy・写真ブロブ）
   ============================================================= */
.henteko{position:relative;padding:16px 0 100px;}
.henteko .sec-title{text-align:center;font-size:clamp(24px,3.4vw,34px);}
.henteko-sub{
  text-align:center;font-family:var(--f-num);font-size:12px;letter-spacing:.2em;
  opacity:.7;margin-bottom:8px;
}
.henteko-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:48px;
}

/* へんてこ海洋館の３つのへんてこ */
.henteko-title-logo {
  display: block;
  width: min(100%, 540px);
  height: auto;
  margin: 0 auto;
}

.hk{position:relative;}
.hk-photo{
  aspect-ratio:3/4;
  background:var(--navy2) center/cover no-repeat;
  border-radius:58% 42% 50% 50% / 45% 55% 45% 55%;
}
.hk:nth-child(2) .hk-photo{border-radius:44% 56% 48% 52% / 56% 44% 56% 44%;}
.hk:nth-child(3) .hk-photo{border-radius:50% 50% 60% 40% / 42% 58% 42% 58%;}
.hk-num{
  font-family:var(--f-num);font-size:13px;letter-spacing:.16em;
  color:var(--pink);margin:22px 0 6px;
}
.hk h3{
  font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.06em;
  margin-bottom:10px;
}
.hk p{font-size:14px;line-height:2.1;opacity:.9;}

/* =========================================================
   へんてこ見出し左右のヒトデ
   PC ONLY
   「ふつうの魚は、いません。」と同じ出現感
   ========================================================= */

.henteko-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 28px;
}


/* 中央のロゴ */
.henteko-title-wrap .sec-title {
  margin: 0;
  flex: 0 1 600px;
}


/* 左右のヒトデ */
.henteko-side-star {
  display: block;
  width: 105px;
  height: auto;
  flex: 0 0 105px;

  opacity: 0;
  transform: scale(.18);
  transform-origin: center center;
}


/* =========================================================
   左ヒトデ
   ========================================================= */

.henteko-title-wrap.on .star-left {
  animation: hentekoStarOpen 1.05s cubic-bezier(.16,.9,.24,1) .05s forwards;
}


/* =========================================================
   右ヒトデ
   少しだけ遅れて登場
   ========================================================= */

.henteko-title-wrap.on .star-right {
  animation: hentekoStarOpen 1.05s cubic-bezier(.16,.9,.24,1) .20s forwards;
}


/* =========================================================
   「ふつうの魚は、いません。」風の出現
   小さく → ふわっと現れる → 少しだけ膨らむ → 着地
   ========================================================= */

@keyframes hentekoStarOpen {

  0% {
    opacity: 0;
    transform: scale(.18);
  }

  35% {
    opacity: 1;
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================================================
   動きを抑える設定
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .henteko-side-star {
    opacity: 1;
    transform: none;
    animation: none;
  }

}
/* =========================================================
   03 ちいさい！ ヤドカリ
   PC ONLY

   ふわっと登場
   ↓
   ゆっくり左右に揺れながら
   ↓
   少しずつ左へ歩く
   ========================================================= */

.hk:nth-child(3) {
  position: relative;
}


/* =========================================================
   ヤドカリ本体
   ========================================================= */

/* =========================================================
   01「ヒトデだらけ」の左下のヒトデ3匹
   ヤドカリと同じく、スクロールでポンと現れる
   ========================================================= */
.hitodethree-illust {
  position: absolute;

  /* 位置（ヤドカリと左右対称になる位置） */
  left: -120px;
  bottom: -95px;

  width: 108px;
  height: auto;

  opacity: 0;
  transform: scale(.18);
  transform-origin: center center;

  pointer-events: none;
}

.hk:nth-child(1).on .hitodethree-illust {
  animation: yadokariOpen 1.8s cubic-bezier(.16,.9,.24,1) .35s forwards;
}

/* 1400px 未満はカードの外に出す余白がないので、内側に寄せる */
@media (max-width: 1399px) {
  .hitodethree-illust { left: -30px; width: 92px; }
}
@media (max-width: 1100px) {
  .hitodethree-illust { left: 0; width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .hitodethree-illust { opacity: 1; transform: none; animation: none; }
}


.yadokari-illust {
  position: absolute;

  /* 位置 */
  right: -120px;
  bottom: -95px;

  /* 前より小さく */
  width: 110px;
  height: auto;

  opacity: 0;

  transform: scale(.18);
  transform-origin: center center;

  pointer-events: none;
}


/* =========================================================
   ① まず「ふわっ」と登場
   ========================================================= */

.hk:nth-child(3).on .yadokari-illust {
  animation:
    yadokariOpen 1.8s cubic-bezier(.16,.9,.24,1) .25s forwards,
    yadokariWalk 8s ease-in-out 2.3s forwards;
}


/* =========================================================
   ふわっと登場
   ========================================================= */

@keyframes yadokariOpen {

  0% {
    opacity: 0;
    transform: scale(.18);
  }

  25% {
    opacity: .35;
    transform: scale(.35);
  }

  50% {
    opacity: .75;
    transform: scale(.70);
  }

  72% {
    opacity: 1;
    transform: scale(1.06);
  }

  86% {
    transform: scale(.97);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================================================
   ② ゆっくり揺れながら左へ歩く
   ========================================================= */

@keyframes yadokariWalk {

  /* スタート */
  0% {
    transform: translateX(0) rotate(0deg);
  }

  /* ちょっと右 */
  12% {
    transform: translateX(-3px) rotate(2deg);
  }

  /* ちょっと左 */
  25% {
    transform: translateX(-7px) rotate(-3deg);
  }

  /* また右 */
  38% {
    transform: translateX(-10px) rotate(2deg);
  }

  /* また左 */
  50% {
    transform: translateX(-14px) rotate(-2deg);
  }

  /* ゆっくり進む */
  63% {
    transform: translateX(-17px) rotate(3deg);
  }

  /* さらに左 */
  75% {
    transform: translateX(-20px) rotate(-2deg);
  }

  /* 最後にちょっと揺れる */
  88% {
    transform: translateX(-23px) rotate(2deg);
  }

  /* ここで停止 */
  100% {
    transform: translateX(-25px) rotate(0deg);
  }

}


/* =========================================================
   モバイルでは表示しない
   ========================================================= */

@media (max-width: 767px) {

  .yadokari-illust {
    display: none;
  }

}
/* =============================================================
   04 PICK UP おやすみ水族館（navy）
   ============================================================= */
.pickup{position:relative;padding:40px 0 110px;}
.pickup-inner{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
}
.pickup .sec-label{color:var(--yellow);}
.pickup h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,3.2vw,34px);letter-spacing:.06em;
  color:var(--yellow);margin-bottom:22px;
}
.pickup-lead{font-size:16px;margin-bottom:24px;}
.pickup-list{list-style:none;margin-bottom:34px;}
.pickup-list li{
  display:flex;align-items:center;gap:12px;
  font-size:15px;padding:7px 0;
}
.pickup-list svg{width:22px;height:22px;flex:none;}
.pickup-star{width:24px;height:24px;flex:none;transform:rotate(var(--rot,0deg));}
/* 泊まれる水族館 */
.pickup-title-logo-wrap {
  margin: 0 0 22px;
}

.pickup-title-logo {
  display: block;
  width: min(100%, 400px);
  height: auto;
}

.btn-y{
  display:inline-block;background:var(--yellow);color:var(--navy);
  font-weight:700;font-size:14px;letter-spacing:.08em;
  padding:15px 34px;border-radius:999px;
  transition:transform .2s ease;
}
.btn-y:hover{transform:scale(1.05);}
.pickup-photo{position:relative;}
.slides{
  position:relative;
  aspect-ratio:16/10;
  background:var(--navy2);
  border-radius:24px 60px 24px 60px;
  overflow:hidden;
}
.slide{
  position:absolute;inset:0;
  background:center/cover no-repeat;
  opacity:0;
  transition:opacity 1.1s ease;
}
.slide.is-current{opacity:1;}

/* 送りのドット */
.slide-dots{
  display:flex;justify-content:center;gap:10px;
  margin-top:16px;
}
.slide-dot{
  width:9px;height:9px;padding:0;
  border:1.5px solid var(--cream);border-radius:50%;
  background:none;cursor:pointer;
  opacity:.55;
  transition:opacity .25s ease,background-color .25s ease;
}
.slide-dot:hover{opacity:.85;}
.slide-dot.is-current{background:var(--cream);opacity:1;}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none;}
}

/* =============================================================
   05 NEWS（navy・こじんまり）
   ============================================================= */
/* 左右の泡がはみ出さないよう、下に余白を持たせる */
.news{padding:0 0 200px;position:relative;}

/* -------------------------------------------------------------
   NEWS 左右の泡。本文に少し重ねるので、文字の後ろで薄く流す。
   スクロールで下からふわっと浮かび上がる
   ------------------------------------------------------------- */
.news-awa{
  position:absolute;
  z-index:0;                 /* 必ず文字の後ろ */
  /* 高さを基準にする。幅で決めると縦長すぎてセクションからはみ出す */
  height:clamp(300px, 34vw, 420px);
  width:auto;
  pointer-events:none;
  opacity:0;
}
.news-awa.rv{transform:translateY(60px) scale(.92);}
.news-awa.rv.on{
  /* 文字に重なっても読めるよう、薄めに出す（重なった箇所で 7.6:1 を確保） */
  opacity:.25;
  transform:translateY(0) scale(1);
  transition:opacity 1.4s ease, transform 1.6s cubic-bezier(.2,.8,.3,1);
}
/* 本文（罫線の端は中央から540px）に 110px ほど重ねる。
   左右で高さをずらして、対称になりすぎないようにする */
/* セクションからはみ出すと、下で切れて不自然になる。
   上下ともセクションの内側に収まる位置にする */
.news-awa--l{right:calc(50% + 430px); top:auto; bottom:43px; transition-delay:.1s;}  /* 左は低め */
.news-awa--r{left: calc(50% + 430px); top:auto; bottom:72px; transition-delay:.45s;} /* 右は高め */
/* 右は左右反転させて、同じ絵の繰り返しに見えないように */
.news-awa--r{scale:-1 1;}

/* 中身は泡より前へ */
.news-head,.news-list{position:relative;z-index:1;}

/* 1280px 未満は泡が画面からはみ出すので省く */
@media (max-width:1279px){
  .news-awa{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .news-awa.rv,.news-awa.rv.on{transform:none;opacity:.85;transition:none;}
}
.news-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border-bottom:1px solid rgba(243,236,220,.28);
  padding-bottom:14px;margin-bottom:6px;
}
.news-head .sec-title{margin-bottom:0;}

.news-more{
  font-family:var(--f-num);font-size:12px;letter-spacing:.12em;
  color:var(--yellow);white-space:nowrap;
}
.news-more:hover{text-decoration:underline;}

.news-list{list-style:none;}
.news-list li + li{border-top:1px solid rgba(243,236,220,.16);}
.news-list a{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;gap:20px;
  padding:16px 4px;
  transition:opacity .2s ease;
}
.news-list a:hover{opacity:.65;}
.news-list time{
  font-family:var(--f-num);font-size:13px;letter-spacing:.06em;
  opacity:.8;
}
.news-tag{
  font-size:11px;letter-spacing:.08em;
  border:1px solid var(--teal);color:var(--cream);
  background:var(--teal);
  padding:3px 12px;border-radius:999px;
  white-space:nowrap;
}
.news-ttl{font-size:14.5px;line-height:1.7;}

/* =============================================================
   05 楽しみ方（cream）
   ============================================================= */
.fun-sec{padding:40px 0 40px;position:relative;}

.fun-sec h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,3.2vw,34px);letter-spacing:.06em;
  color:var(--navy2);margin-bottom:22px;
  text-align: center;
}
.fun-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:44px;
}
.fun-num{
  font-family:var(--f-num);font-size:16px;letter-spacing:.16em;
  /* 背景が明るい水色なので、朱赤をひと段濃くして読めるようにする */
  color:#9C321F;margin-bottom:6px;
}
.fun h3{
  font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.04em;
  line-height:1.7;margin-bottom:10px;color:var(--ink);
}
.fun p{font-size:14px;line-height:2.05;margin-bottom:18px;}
.fun-photo{
  aspect-ratio:4/3;
  background:#d9d2c0 center/cover no-repeat;
  border-radius:52% 60% 65% 48% / 54% 46% 54% 46%;
}
.fun:nth-child(2) .fun-photo{border-radius:61% 68% 44% 56% / 46% 54% 46% 54%;}
.fun:nth-child(3) .fun-photo{border-radius:48% 72% 56% 44% / 52% 48% 52% 48%;}
/* 水族館の楽しみ方 */
.fun-title {
  margin: 0 0 28px;
}

.fun-title-logo {
  display: block;
  width: 480px;
  max-width: 100%;
  height: auto;
  margin: 0;
}
/* =============================================================
   06 ACCESS（navy）
   ============================================================= */
.access{position:relative;padding:0 0 90px;margin-top:-28px;}
.access-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;}
.access address{font-style:normal;font-size:14.5px;line-height:2.2;margin-bottom:22px;}
.access-way{list-style:none;margin-bottom:34px;}
.access-way li{display:flex;gap:10px;align-items:center;font-size:14px;padding:5px 0;}
.access-way svg{width:20px;height:20px;flex:none;}
.access-map{
  aspect-ratio:1/1;max-width:460px;justify-self:center;width:100%;
  background:var(--cream);
  border-radius:46% 54% 50% 50% / 52% 48% 56% 44%;
  position:relative;
  overflow:hidden;   /* 角丸の形に沿って iframe を切り抜く */
}
.access-map iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  /* iframe 自体をひとまわり大きくして、不定形の角丸からグレーの外枠が
     はみ出さないようにする */
  transform:scale(1.15);
}
.btn-line{
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--cream);border-radius:999px;
  font-size:13.5px;letter-spacing:.08em;font-weight:500;
  padding:14px 30px;transition:background .2s ease,color .2s ease;
}
.btn-line:hover{background:var(--cream);color:var(--navy);}

/* =============================================================
   FOOTER
   ============================================================= */
.ft{
  background:var(--teal);
  color:var(--cream);
  padding:72px 32px 28px;
}

.ft-inner{
  max-width:1080px;margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.3fr;
  gap:48px;
}

/* --- ロゴとSNS --- */
.ft-logo{width:190px;height:auto;margin-bottom:16px;}
.ft-tagline{
  font-family:var(--f-display);font-weight:400;
  font-size:15px;letter-spacing:.08em;
  margin-bottom:22px;
}
.ft-sns{display:flex;gap:12px;}
.ft-sns a{
  width:40px;height:40px;
  border:1.5px solid rgba(243,236,220,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease;
}
.ft-sns a:hover{background:rgba(243,236,220,.16);}
.ft-sns svg{width:16px;height:16px;fill:var(--cream);}

/* --- 見出しとリンク --- */
.ft-nav-ttl{
  font-family:var(--f-display);font-weight:400;
  font-size:14px;letter-spacing:.1em;
  margin-bottom:14px;
  color:#F7DA93;   /* 青緑の上で読めるよう、黄をひとつ明るく */
}
.ft-nav ul{list-style:none;}
.ft-nav li{margin-bottom:9px;}
.ft-nav a{
  font-size:13.5px;line-height:1.8;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.ft-nav a:hover{border-bottom-color:rgba(243,236,220,.6);}

/* --- 施設情報 --- */
.ft-info address{
  font-style:normal;font-size:13.5px;line-height:1.95;
  margin-bottom:16px;
}
.ft-info address a{
  font-family:var(--f-num);letter-spacing:.04em;
  border-bottom:1px solid rgba(243,236,220,.4);
}
.ft-hours{font-size:13px;line-height:1.9;}
.ft-hours dt{
  float:left;clear:left;width:3.4em;
  opacity:.85;
}
.ft-hours dd{margin-left:3.4em;}

/* --- 最下段 --- */
.ft-bottom{
  max-width:1080px;margin:56px auto 0;
  border-top:1px solid rgba(243,236,220,.22);
  padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.ft-policy{display:flex;gap:22px;list-style:none;}
.ft-policy a{
  font-size:12.5px;opacity:1;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.ft-policy a:hover{border-bottom-color:rgba(243,236,220,.6);}
.ft small{
  font-family:var(--f-num);font-size:11px;letter-spacing:.14em;opacity:.9;
}

@media (prefers-reduced-motion:reduce){
  .rv{transition:none;opacity:1;transform:none;}
  .loader{display:none;}
}
/* =============================================================
   HERO — 右側を泳ぐ生き物
   外側(.sw)＝登場のシュッ／内側(img)＝ゆらゆら の2段構え
   （transformの取り合いを避けるため入れ子にしている）
   ============================================================= */
.hero-swim{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;
}
/* 上下で流す向きを変えるための入れ子。位置には影響させない */
.swim-school,.swim-top,.swim-bot{position:absolute;inset:0;}
.sw{
  position:absolute;
  top:auto;right:auto;bottom:auto;left:auto;
  opacity:0;
  transform:scale(.72);
  transition:opacity .6s ease,
             transform .7s cubic-bezier(.2,.9,.3,1);
  transition-delay:var(--d,0s);
}
.hero-swim.is-on .sw{opacity:var(--o,.85);transform:scale(1);}

.sw img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 26px rgba(8,20,34,.55));
}
/* 登場後のゆらゆら（内側imgが担当） */
.hero-swim.is-on .sw img{
  animation:swimFloat var(--t,9s) ease-in-out infinite;
  animation-delay:var(--d,0s);
}




/* -------------------------------------------------------------
   配置：中央のコピーを囲むように四方へ散らす。
   --d は登場の順番（奥の大きいものから、手前の小さいものへ）
   ------------------------------------------------------------- */

/* 奥：群れ。うんと薄くして密度だけ出す */
.sw-tigyo  {left:50%;top:52%;width:min(46%,660px);
            margin-left:min(-23%,-330px);margin-top:-9%;
            z-index:0; --d:0s; --o:.22; --t:26s;}

/* -------------------------------------------------------------
   中央のコピーを額縁のように囲む。1440px で左右の列は 410px、
   左右を「（」「）」の弧で受け、中央のコピーの下は空けておく
   ------------------------------------------------------------- */

/* 左の列 — リュウグウノツカイが主役 */
.sw-ryuugu {left:-60px;  top:140px;  width:clamp(220px,23vw,340px); z-index:1; --d:.10s; --o:.9;  --t:15s;}
.sw-ebi    {left:clamp(400px,33vw,520px); top:18px; width:clamp(76px,8vw,118px);  z-index:3; --d:.90s; --o:.85; --t:12s;}
.sw-fugu   {left:200px;  top:130px;  width:clamp(88px,10vw,150px);  z-index:2; --d:.50s; --o:.9;  --t:10s;}
.sw-hitode2{left:234px;   top:auto;bottom:80px;width:clamp(46px,4.6vw,68px); z-index:3; --d:1.00s;--o:.9; --t:9s;}
.sw-manbou {left:clamp(240px,21vw,340px); top:auto;bottom:0;   width:clamp(100px,11vw,195px);z-index:2; --d:.34s; --o:.9; --t:12s;}

/* 右の列 — 左の弧を鏡に映した「）」の形。
   外側にマンタとジンベエ、内側に小さいものを寄せる */
.sw-kurage {right:clamp(400px,27vw,520px); top:118px; width:clamp(59px,4vw,96px); z-index:2; --d:.58s; --o:.85; --t:9s;}
.sw-tatsu  {right:min(300px, calc(50vw - 400px)); top:140px; width:clamp(50px,4vw,74px); z-index:3; --d:.66s; --o:1; --t:10s;}
.sw-manta  {right:0px; top:140px;  width:clamp(200px,21vw,310px);z-index:1; --d:.18s; --o:.92; --t:13s;}
.sw-same   {right:-35px; top:auto;bottom:86px; width:clamp(215px,23vw,340px); z-index:1; --d:.26s; --o:.88; --t:14s;}
.sw-mino   {right:clamp(255px,22vw,350px); top:auto;bottom:0px; width:clamp(110px,10vw,175px); z-index:2; --d:.42s; --o:.9; --t:11s;}

/* 追加のヒトデ2匹。どちらも見出しの右端とマンタの間の帯に置く */
.sw-hitode-top{right:min(312px, calc(50vw - 396px)); top:308px; width:clamp(52px,5vw,74px); z-index:3; --d:1.06s;--o:.9; --t:11s;}
.sw-hitode-mid{right:min(300px, calc(50vw - 400px)); top:410px; width:clamp(48px,4.6vw,68px); z-index:3; --d:1.14s;--o:.85; --t:9s;}

@media (max-width:1340px){
  /* 右の列が細くなるとマンタに当たるので、上のヒトデは省く */
  .sw-hitode-top{display:none;}
}



/* 上の帯 — ロゴとナビの間 */
.sw-umiushi{left:clamp(240px,21vw,340px); top:40px; width:clamp(72px,7.5vw,110px);z-index:3; --d:.82s; --o:.95; --t:12s;}




/* 1260px 以下は左右の列が細くなるので、大きいものをより外へ逃がす */
@media (max-width:1260px){
  .sw-ryuugu {left:-90px;  top:300px;}
  .sw-fugu   {left:180px;  top:150px;}
  .sw-manta  {right:-24px; top:120px;}
  .sw-same   {right:-30px;}
  .sw-umiushi{left:24%;    top:36px;}
}

/* 1000px 以下 */
/* 1150px 以下はナビが左へ伸びて上の帯を食うので、
   弧の頂点にあるエビとタツを下げる */
@media (max-width:1150px){
  /* エビとタツは弧の頂点。ナビの下へ下げ、中央へ寄りすぎないよう左右に振る */
  .sw-ebi   {left:clamp(300px,28vw,400px); top:118px;}
  .sw-tatsu {right:min(220px, calc(50vw - 380px)); top:182px;}
}

@media (max-width:1000px){
  /* 上の帯がロゴとナビで埋まるのでウミウシは省く */
  .sw-umiushi{display:none;}
  .sw-manta  {right:-60px; top:132px; width:clamp(170px,22vw,240px);}
}

/* 900px 以下は右の弧を内側へ寄せる */
@media (max-width:900px){
  .sw-kurage {right:clamp(300px,34vw,465px);}
  .sw-tatsu  {right:clamp(200px,24vw,330px);}
  .sw-mino   {right:clamp(230px,27vw,300px);}
}



/* 780〜830px あたりだけ、ロゴの隣にタツの置き場がない */
@media (min-width:780px) and (max-width:830px){
  .sw-tatsu{top:600px;}
}

@media (prefers-reduced-motion:reduce){
.sw{transition:none;transform:none;opacity:var(--o,.85);}
  .hero-swim.is-on .sw img{animation:none;}
}

/* =========================================================
   06 楽しみ方 — 見出しの左右（マンタ・セイウチ）
   ３つのへんてこのヒトデと同じ「ポン」で出る
   ========================================================= */
.fun-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-bottom: 28px;
}
/* h2 はロゴ画像と同じ幅に。広いとその差が空白になる */
.fun-title-wrap .fun-title { margin: 0; flex: 0 1 auto; min-width: 0; }

.fun-side-illust {
  display: block;
  height: auto;
  opacity: 0;
  transform: scale(.18);
  transform-origin: center center;
}
/* ロゴ画像の左右に余白があるぶん、マイナスの margin で絵どうしを寄せる */
.fun-side-left  { width: 190px; flex: 0 0 190px; margin-right: 18px; }
.fun-side-right { width: 150px; flex: 0 0 150px; margin-left: 18px; }

.fun-title-wrap.on .fun-side-left {
  animation: hentekoStarOpen 1.05s cubic-bezier(.16,.9,.24,1) .05s forwards;
}
.fun-title-wrap.on .fun-side-right {
  animation: hentekoStarOpen 1.05s cubic-bezier(.16,.9,.24,1) .25s forwards;
}


/* =========================================================
   06 楽しみ方 — 下部の左右をふわふわ漂うクラゲ
   左は下から上へ、右は上から下へ
   ========================================================= */
.fun-sec { position: relative; }

.fun-kurage {
  position: absolute;
  z-index: 0;                 /* 文字の後ろ */
  height: auto;
  pointer-events: none;
  opacity: 0;
}
/* 写真がセクション幅いっぱいを占めるので、クラゲはその外側に置く。
   左は低め、右は高めにして左右で差をつける */
.fun-kurage--l {
  right: calc(50% + 556px);
  bottom: 40px;
  width: clamp(56px, 5.5vw, 84px);
}
.fun-kurage--r {
  left: calc(50% + 556px);
  bottom: 150px;
  width: clamp(62px, 6vw, 92px);
}
/* 追加の2匹。最初の2匹より外側・下に、さらに小さく置く */
.fun-kurage--l2 {
  right: calc(50% + 596px);
  bottom: -40px;
  width: clamp(30px, 3vw, 46px);
}
.fun-kurage--r2 {
  left: calc(50% + 606px);
  bottom: 20px;
  width: clamp(32px, 3.2vw, 50px);
}

/* .rv の初期値を打ち消して、クラゲ用の動きにする */
.fun-kurage.rv { transform: translateY(24px) scale(.9); transition: none; }

/* 現れたあと、ゆっくり漂い続ける */
.fun-kurage--l.on {
  animation:
    kurageIn 1.2s ease .2s forwards,
    kurageUp 7s ease-in-out 1.4s infinite;
}
.fun-kurage--r.on {
  animation:
    kurageIn 1.2s ease .2s forwards,
    kurageDown 8.5s ease-in-out 1.7s infinite;
}
.fun-kurage--l2.on {
  animation:
    kurageIn 1.2s ease .2s forwards,
    kurageUp 6s ease-in-out 2s infinite;
}
.fun-kurage--r2.on {
  animation:
    kurageIn 1.2s ease .2s forwards,
    kurageDown 7.4s ease-in-out 2.3s infinite;
}

@keyframes kurageIn {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to   { opacity: .95; transform: translateY(0) scale(1); }
}
/* 左：下から上へふわふわ */
@keyframes kurageUp {
  0%,100% { transform: translateY(0)     rotate(0deg); }
  50%     { transform: translateY(-34px) rotate(3deg); }
}
/* 右：上から下へふわふわ */
@keyframes kurageDown {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  50%     { transform: translateY(30px) rotate(-3deg); }
}

.fun-grid { position: relative; z-index: 1; }

/* 1280px 未満はセクションの外にクラゲを置く余白がないので省く */
@media (max-width: 1279px) {
  .fun-kurage { display: none; }
}
/* 追加の2匹はさらに外側なので、もう少し広い画面から */
@media (max-width: 1379px) {
  .fun-kurage--l2, .fun-kurage--r2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fun-side-illust { opacity: 1; transform: none; animation: none; }
  .fun-kurage      { opacity: .95; transform: none; animation: none; }
}