@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ================================
   メインビジュアル上・テキストスタイル
   ================================ */
.white-glow {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.white-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  z-index: -1;
}
/* サブタイトル用（h2の下のテキスト） */
.sub-white-glow {
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.7),
    0 0 10px rgba(255, 255, 255, 0.4),
    0 0 18px rgba(255, 255, 255, 0.2);
}

/* ================================
   Pick Up セクション見出し
   ================================ */
.p-postSlider__inner{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}
.p-postSlider__inner .p-postSlider__title{
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.15;
  margin: 0 0 clamp(24px, 2.5vw, 40px);
  text-shadow: 0 0 2px rgba(0,0,0,.08);
}
.p-postSlider__inner .p-postSlider__title::after{
  content: "Pick Up";
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  background: linear-gradient(90deg, #ffffff 0%, #fff44f 30%, #ffd54f 60%, #ff9800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 0 2px rgba(255,255,255,.35);
}

/* ================================
   タイルナビゲーション（PC・タブレット表示のみ）
   ================================ */
/* 初期は非表示（SP含む全端末） */
.catnav { display: none; }
/* 768px以上（タブレット/PC）で表示 */
@media (min-width: 768px) {
  .catnav {
    display: block;
    /* カラーパレット（ここだけ変えれば調整可） */
    --bg:#0081c6; --bg-item:#0081c6; --bg-hover:#0659b7; --bg-active:#0659b7;
    --text:#fff; --divider:rgba(255,255,255,.35);
    --icon-tab:56px; --icon-pc:64px; --tile-tab:96px; --tile-pc:112px;
    background:var(--bg);
    color:var(--text);
  }
  /* レイアウト：デフォルトはPC 8列 */
  .catnav__list{
    margin:0; padding:0; list-style:none;
    display:grid; grid-template-columns:repeat(8, 1fr);
  }
  .catnav__item{ position:relative; }
  .catnav__item::after{
    content:""; position:absolute; top:20%; bottom:20%; right:0; width:1px; background:var(--divider);
  }
  .catnav__item:last-child::after{ display:none; }
  .catnav__link{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; min-height:var(--tile-pc);
    padding:16px 10px; text-decoration:none;
    background:var(--bg-item); color:var(--text);
    transition:background-color .2s ease, transform .06s ease;
  }
  .catnav__link:hover,
  .catnav__link:focus-visible{ background:var(--bg-hover); }
  .catnav__link.is-active,
  .catnav__link[aria-current="page"]{ background:var(--bg-active); }
  .catnav__link:active{ transform:translateY(1px); }
  /* アイコンサイズ統一（SVG/IMGどちらでも） */
  .catnav__icon{ width:var(--icon-pc); height:var(--icon-pc); flex:0 0 auto; display:block; }
  .catnav__link > svg,
  .catnav__link > img[src$=".svg"],
  .catnav__link .wp-block-image img[src$=".svg"]{
    width:var(--icon-pc) !important; height:var(--icon-pc) !important;
    object-fit:contain; display:block; flex:0 0 auto;
  }
  .catnav__link > img:not([src$=".svg"]),
  .catnav__link .wp-block-image img:not([src$=".svg"]){
    width:var(--icon-pc); height:var(--icon-pc); object-fit:contain; display:block;
  }
  /* inline SVGの色をリンク色に合わせる */
  .catnav__link svg [fill]:not([fill="none"]){ fill:currentColor !important; }
  .catnav__link svg [stroke]{ stroke:currentColor !important; }
  .catnav__label{
    font-size:clamp(11px,0.95vw,14px);
    line-height:1.35; text-align:center; color:var(--text);
    white-space:nowrap; overflow:hidden;
  }
  /* タブレット最適化（768～1023px） */
  @media (max-width: 1023.98px) {
    .catnav__list{ grid-template-columns:repeat(4, 1fr); }
    .catnav__link{ min-height:var(--tile-tab); }
    .catnav__icon{ width:var(--icon-tab); height:var(--icon-tab); }
    .catnav__link > svg,
    .catnav__link > img[src$=".svg"],
    .catnav__link .wp-block-image img[src$=".svg"]{
      width:var(--icon-tab) !important; height:var(--icon-tab) !important;
    }
    .catnav__link > img:not([src$=".svg"]),
    .catnav__link .wp-block-image img:not([src$=".svg"]){
      width:var(--icon-tab); height:var(--icon-tab);
    }
  }
}
/* 767.98px以下（SP）は完全に非表示 */
@media (max-width: 767.98px) { .catnav { display: none !important; } }

/* ================================
   お知らせ枠の見た目（ベース）
   ================================ */
.info-section.has-border.-border01{
  border: 1.5px solid #003366;     /* ← border を1行で確実に表示 */
  border-radius:12px;
  padding:18px 16px;
  overflow: hidden;                /* 任意：角丸に要素を馴染ませる */
}

/* お知らせ枠内リンク */
.info-section a{
  color:#003366;
  text-decoration:none;
}
.info-section a:hover{
  color:#FFA400;
  text-decoration:underline;
}

/* タイトル横のアイコン */
.info-section .custom-info-icon{
  vertical-align:middle;
  margin-right:6px;
  position:relative;
  top:-5px;
}
@media (max-width:480px){
  .info-section .custom-info-icon{
    width:22px;
    height:22px;
    top:-4px;
  }
}

/* もっと見るボタン */
.info-section .is-style-more_btn{
  display:flex;
  justify-content:flex-end;
  margin-top:1em;
}
.info-section .is-style-more_btn a{
  position:relative;
  display:inline-block;
  width:fit-content;
  min-width:unset;
  background:transparent !important;
  color:#003366;
  border:1px solid rgba(0,51,102,.55) !important;
  border-radius:999px;
  padding:.55em 3.2em .55em 1.2em;
  line-height:1.1;
  white-space:nowrap;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none;
}
.info-section .is-style-more_btn a::after{
  right:1.1em;
}
.info-section .is-style-more_btn a:hover{
  background:#003366;
  color:#fff;
  border-color:#003366;
  text-decoration:none !important;
  box-shadow:none !important;
}
@media (max-width:480px){
  .info-section .is-style-more_btn{
    margin-top:.75em;
  }
}


/* =========================================
   イルカプログラム セクション（中央寄せ）
   ========================================= */
:root{ --card-min: 280px; --card-ideal: 340px; --wrap-max: 1200px; }
.dolphin-programs{ padding:clamp(32px,4vw,56px) 0; }
/* グリッド */
.dolphin-programs .dp-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
  margin-inline:auto; max-width:var(--wrap-max); padding:0 12px;
}
@media (min-width:700px){
  .dolphin-programs .dp-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:18px; padding:0;
  }
}
@media (min-width:1024px){
  .dolphin-programs .dp-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:22px;
  }
}
/* 4列固定オプション */
@media (min-width:1024px){
  .dp-fourcols > .dp-grid{
    display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px; justify-content:center;
  }
  .dp-fourcols .dp-card{ max-width:none !important; }
}
/* カード */
.dolphin-programs .dp-card{
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  outline:none; contain:content;
}
.dolphin-programs .dp-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
.dolphin-programs .dp-link{ display:block; color:inherit; text-decoration:none; }
.dolphin-programs .dp-media{ margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; }
.dolphin-programs .dp-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0);
}
/* バッジ */
.dolphin-programs .dp-badges{
  position:absolute; left:12px; bottom:12px;
  display:flex; gap:8px; flex-wrap:wrap; max-width:calc(100% - 24px);
}
.dolphin-programs .dp-badge{
  font-size:12px; line-height:1.15; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(2px);
  box-shadow:0 2px 8px rgba(0,0,0,.08); font-weight:700; white-space:nowrap;
}
.dolphin-programs .dp-badge.age{ background:#f3f9fc; color:#144a75; }
.dolphin-programs .dp-badge.suit.yes{ background:#e8fff4; color:#007a45; }
.dolphin-programs .dp-badge.suit.no{ background:#fff2f0; color:#b03a2e; }
.dolphin-programs .dp-badge.suit.maybe{ background:#fffbe6; color:#946200; }
.dolphin-programs .dp-badge.perk{ background:#fff4d6; color:#8a5200; }
/* 価格まわり */
.dolphin-programs .dp-pricewrap{
  display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.dolphin-programs .dp-price{ white-space:nowrap; }
.dolphin-programs .dp-price-note{
  font-size:12px; color:#617186; letter-spacing:.01em; white-space:nowrap;
}
@media (max-width:360px){ .dolphin-programs .dp-pricewrap{ max-width:calc(100% - 60px); } }
/* テキスト */
.dolphin-programs .dp-body{ background:#fff; color:#3f5366; padding:16px 16px 18px; }
.dolphin-programs .dp-title{
  margin:0 0 6px; font-size:clamp(16px, 2vw, 19px); line-height:1.4;
  font-weight:800; color:#08365a; letter-spacing:.02em;
}
.dolphin-programs .dp-desc{ margin:0 0 14px; font-size:14px; color:#3f5366; line-height:1.7; }
.dolphin-programs .dp-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* 価格の見た目 */
.dolphin-programs .dp-price{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(20px, 2.4vw, 24px);
  font-weight:700; color:#0096c7; letter-spacing:0.01em;
}
/* カード高さを揃える（PC/タブレット） */
@media (min-width:700px){
  .dolphin-programs .dp-card{ display:flex; }
  .dolphin-programs .dp-link{ display:flex; flex-direction:column; flex:1 1 auto; }
  .dolphin-programs .dp-media{ flex:0 0 auto; }
  .dolphin-programs .dp-body{ flex:1 1 auto; display:flex; flex-direction:column; }
  .dolphin-programs .dp-bottom{ margin-top:auto; }
}
/* カード円ボタン（完全版：共通アイコン） ← 統合版 */
.dolphin-programs .dp-cta{
  position: relative;
  width:44px; height:auto; aspect-ratio:1/1;
  padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, #00a7c4, #22d1ee);
  box-shadow:0 4px 12px rgba(34,209,238,.35);
  transition:transform .15s, box-shadow .15s, filter .15s;
  color:#fff; white-space:nowrap; font-size:0;
  flex:0 0 44px;
}
.dolphin-programs .dp-card:hover .dp-cta{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(34,209,238,.45);
}
.dolphin-programs .dp-cta:active{ transform:translateY(0); filter:brightness(.96); }
.dolphin-programs .dp-cta::before{
  content:""; display:block; width:20px; height:20px;
  background:url("https://sealifeparkhawaii.jp/wp-content/uploads/2025/10/arrow-badge.svg") no-repeat center / contain;
  pointer-events:none;
}
@media (max-width:360px){
  .dolphin-programs .dp-cta::before{ width:18px; height:18px; }
}
/* フォーカス可視化 */
.dolphin-programs .dp-link:focus-visible{
  outline:3px solid #22d1ee; outline-offset:3px; border-radius:20px;
}
/* 動きを抑えるユーザー配慮 */
@media (prefers-reduced-motion:reduce){
  .dolphin-programs .dp-card,
  .dolphin-programs .dp-card:hover,
  .dolphin-programs .dp-cta{ transition:none !important; }
}
/* 空バッジ保険 */
.dolphin-programs .dp-badge:empty{ display:none; }
.dolphin-programs .dp-badges:not(:has(.dp-badge:not(:empty))){ display:none; }
/* カード入場アニメ（PC幅のみ） */
@media (min-width:700px){
  .dolphin-programs .dp-card{
    opacity: 0; transform: translateX(-18px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease;
    will-change: opacity, transform;
  }
  .dolphin-programs .dp-card.is-visible{ opacity:1; transform:none; }
}
/* CTAと価格の縦位置/行高 */
.dolphin-programs .dp-bottom{ align-items:flex-end; }
.dolphin-programs .dp-price{ line-height:1; }

/* =============== TOPの見出し設定（1回のみ） =============== */
/* イルカと遊ぶ */
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-dolphin{
  font-size:28px !important; font-weight:800; letter-spacing:1px;
  text-align:center; position:relative; border-bottom:none;
}
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-dolphin::after{
  content:""; display:block; margin:8px auto 0;
  width:60px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #00a7c4, #22d1ee);
}
@media (max-width:768px){
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-dolphin{ font-size:20px !important; }
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-dolphin::after{ width:40px; height:2px; margin-top:6px; }
}
/* 見出しサブ */
.heading-dolphin__sub{
  text-align:center; max-width:52rem; margin:0.6em auto 0;
  font-size:clamp(13px, 1.6vw, 16px); line-height:1.8; color:#4a647f;
}
@media (max-width:768px){
  .heading-dolphin__sub{ margin-top:0.5em; max-width:38rem; line-height:1.7; }
}
/* ショー＆アニマル体験 */
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-showanimal{
  font-size:28px !important; font-weight:800; letter-spacing:1px;
  text-align:center; position:relative; color:#6B3F1F; border-bottom:none;
}
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-showanimal::after{
  content:""; display:block; margin:8px auto 0;
  width:60px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #FFA84C 0%, #FF7A00 100%);
}
@media (max-width:768px){
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-showanimal{ font-size:20px !important; }
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-showanimal::after{ width:40px; height:2px; margin-top:6px; }
}
.heading-showanimal__sub{
  text-align:center; max-width:52rem; margin:0.6em auto 0;
  font-size:clamp(13px, 1.6vw, 16px); line-height:1.8; color:#7a5a41;
}
@media (max-width:768px){
  .heading-showanimal__sub{ margin-top:0.5em; max-width:38rem; line-height:1.7; }
}
/* シーライフのおともだち図鑑 */
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-friends {
  font-size: 28px !important; font-weight: 800; letter-spacing: 1px;
  text-align: center; position: relative; border-bottom: none; color: #fff;
}
.swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-friends::after {
  content: ""; display: block; margin: 8px auto 0;
  width: 60px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #ffffff, #22d1ee);
}
@media (max-width: 768px) {
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-friends { font-size: 20px !important; }
  .swell-block-fullWide .wp-block-heading.is-style-section_ttl.heading-friends::after { width: 40px; height: 2px; margin-top: 6px; }
}

/* ===============================
   バナースクロール地図用
   =============================== */
@media (min-width:700px){
  .walkthrough-banner{
    opacity:0; transform: translateX(-40px) translateY(0);
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
  }
  .walkthrough-banner.is-visible{ opacity:1; transform:none; }
  .walkthrough-banner:hover .c-bannerLink{
    transform: translateY(-6px);
    box-shadow:0 14px 28px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.08);
    transition: transform 0.45s ease-out, box-shadow 0.45s ease-out;
  }
}
@media (prefers-reduced-motion: reduce){
  .walkthrough-banner{ transition: none !important; transform: none !important; opacity: 1 !important; }
}
.walkthrough-banner { position: relative; }
.walkthrough-banner::after {
  content: "➜"; position: absolute; bottom: 16px; right: 20px;
  font-size: 22px; color: #fff; background: rgba(0,0,0,0.55);
  border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.3);
  animation: bounce 1.2s infinite, glow 2s infinite; pointer-events: none;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 16px rgba(255,255,255,1),   0 0 28px rgba(255,255,255,0.9); }
}

/* ===== シーライフの生きものたち（決定版） ===== */
.slp-animals{ --gap:14px; --size:clamp(160px, 14vw + 40px, 220px); padding:20px 0; }
.slp-animals__grid { list-style:none; margin:0; padding:0; }
.slp-animals__photo { width:var(--size); aspect-ratio:1 / 1; object-fit:cover; display:block; }
/* SP */
@media (max-width: 768px) {
  .slp-animals__grid { display:block; text-align:center; font-size:0; }
  .slp-animals__item {
    display:inline-block; vertical-align:top;
    width: calc((100% - var(--gap)) / 2); box-sizing:border-box; padding-bottom: var(--gap);
  }
  .slp-animals__item:nth-child(odd) { margin-right: var(--gap); }
  .slp-animals__item:nth-child(even){ margin-right: 0; }
  .slp-animals__card { display:block; }
  .slp-animals__photo { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; display:block; }
  .slp-animals__item:last-child { margin-right:0; padding-bottom:0; }
}
/* PC 4+5 固定 */
@media (min-width: 769px) {
  .slp-animals__grid { display:grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap:var(--gap); justify-items:center; }
  .slp-animals__item { grid-column: span 2; }
  .slp-animals__item:nth-child(1) { grid-column: 2 / span 2; }
  .slp-animals__item:nth-child(2) { grid-column: 4 / span 2; }
  .slp-animals__item:nth-child(3) { grid-column: 6 / span 2; }
  .slp-animals__item:nth-child(4) { grid-column: 8 / span 2; }
  .slp-animals__photo { border-radius:50%; }
}
/* グロー */
@media (min-width: 769px) {
  .slp-animals__photo {
    filter: drop-shadow(0 0 14px rgba(255,255,255,.32))
            drop-shadow(0 0 28px rgba(255,255,255,.22))
            drop-shadow(0 0 40px rgba(255,255,255,.15));
  }
}
@media (max-width: 768px) { .slp-animals__photo { filter: drop-shadow(0 0 10px rgba(255,255,255,.18)); } }
/* ホバー */
.slp-animals__card:hover .slp-animals__photo {
  animation: wobble 0.6s ease forwards;
  box-shadow: 0 16px 32px rgba(0,0,0,.25);
}
@keyframes wobble{
  0%{ transform: scale(1) rotate(0deg) translateY(0); }
  30%{ transform: scale(1.2) rotate(6deg) translateY(-8px); }
  60%{ transform: scale(1.15) rotate(-4deg) translateY(-6px); }
  100%{ transform: scale(1.2) rotate(6deg) translateY(-8px); }
}
/* PCだけ：左からスライド＆フェード */
@media (min-width: 769px) {
  .slp-animals__item {
    opacity:0; transform: translateX(-22px);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--delay, 0s); will-change: transform, opacity;
  }
  .slp-animals__item.is-in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .slp-animals__item { transition:none !important; transform:none !important; opacity:1 !important; }
}

/* ================================
   イルカと遊ぶ 背景画像（左上）
   ================================ */
.bg-edges{
  position: relative; isolation:isolate; overflow: visible; z-index: 2;
  --edge-size-l: clamp(320px, 50vw, 650px);
  --edge-left-left: -80px; --edge-left-top: -100px; --edge-opacity-l: .1;
}
.bg-edges::before{
  content:""; position:absolute; top:0; left:0;
  width: var(--edge-size-l); aspect-ratio: 1 / 1;
  background: no-repeat center / contain url('https://sealifeparkhawaii.jp/wp-content/uploads/2025/10/slp-dolphin-ilust.svg');
  margin-left: var(--edge-left-left); margin-top: var(--edge-left-top);
  opacity: var(--edge-opacity-l); z-index: 0; pointer-events: none;
}
.bg-edges > *{ position: relative; z-index: 1; }

/* ================================
   ショー＆アニマル体験 背景画像（右上）
   ================================ */
.bg-edge-tr{
  position: relative; isolation: isolate; overflow: visible; z-index: 3;
  --tr-size: clamp(260px, 50vw, 560px);
  --tr-right: -42px; --tr-top: -60px; --tr-opacity:.12;
}
.bg-edge-tr::after{
  content:""; position:absolute; top:0; right:0; width: var(--tr-size); aspect-ratio: 1 / 1;
  background: no-repeat center / contain url('https://sealifeparkhawaii.jp/wp-content/uploads/2025/10/slp-penguin-ilust.svg');
  margin-right: var(--tr-right); margin-top: var(--tr-top);
  opacity: var(--tr-opacity); z-index: 0; pointer-events: none;
}
.bg-edge-tr > *{ position: relative; z-index: 1; }

/* ================================
   パークの歩き方 背景画像（左下）
   ================================ */
.bg-edge-walk{
  position: relative; isolation: isolate; overflow: visible; z-index: 2;
  --walk-size: clamp(280px, 70vw, 600px); --walk-opacity:.12;
}
.bg-edge-walk::before{
  content:""; position:absolute; bottom:0; left:0; width: var(--walk-size); aspect-ratio: 1 / 1;
  background: no-repeat left bottom / contain url('https://sealifeparkhawaii.jp/wp-content/uploads/2025/10/slp-ei.svg');
  opacity: var(--walk-opacity); z-index: 0; pointer-events: none;
}
.bg-edge-walk > *{ position: relative; z-index: 1; }

/* レスポンシブ調整 */
@media (min-width: 1400px){
  .bg-edge-walk{ --walk-size: 600px; }
  .bg-edges{     --edge-size-l: 650px; }
  .bg-edge-tr{   --tr-size: 560px; }
}
@media (max-width: 1399px) and (min-width: 1025px){
  .bg-edge-walk{ --walk-size: clamp(280px, 38vh, 480px); }
  .bg-edge-walk::before{ left: 12px; bottom: 12px; }
  .bg-edges{ --edge-size-l: clamp(320px, 40vh, 520px); --edge-left-left: -40px; --edge-left-top: -40px; }
  .bg-edge-tr{ --tr-size: clamp(260px, 38vh, 460px); --tr-right: -28px; --tr-top: -40px; }
}
@media (max-width: 1024px) and (min-width: 769px){
  .bg-edge-walk{ --walk-size: clamp(200px, 34vh, 360px); }
  .bg-edge-walk::before{ left:16px; bottom:40px; }
  .bg-edges{ --edge-size-l: clamp(220px, 34vh, 400px); --edge-left-left: -24px; --edge-left-top: -24px; }
  .bg-edge-tr{ --tr-size: clamp(200px, 34vh, 360px); --tr-right: -20px; --tr-top: -28px; }
}
@media (max-width: 768px){
  .bg-edges::before{ content: none !important; }
  .bg-edge-tr::after{ content: none !important; }
  .bg-edge-walk::before{ content: none !important; }
}

/* =========================
   自作ナビ（PCのみ表示・透過追従）
   ========================= */
:root { --admin-offset: 0px; }
.jh-utility { display: none !important; }

@media (min-width:960px){
  .jh-utility{
    position: fixed;
    top: var(--admin-offset);
    right: 0;
    z-index: 1100;
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    background: #0659b7 !important;
    border-radius: 1px 0 0 14px;
    /* 左側にだけ青い余白を少し増やす（必要に応じて数値調整） */
    padding: 8px 12px 8px 16px;
    width: max-content;
  }
  .jh-utility.is-stuck{
    position: fixed;
    top: var(--admin-offset);
    right: 0;
    z-index: 1100;
    background: #0081c6 !important;
    border-radius: 1px 0 0 14px;
  }
}

.jh-utility.is-hidden { display: none !important; }

/* タイル・ボタン共通 */
.jh-tile{
  display:flex; align-items:center; justify-content:center;
  height:56px; padding:0 18px; border-radius:10px; background:transparent;
  color:#fff !important; border:none; font-weight:800; font-size:15px; text-decoration:none; cursor:pointer;
  transition:filter .2s ease, transform .02s ease; box-sizing: border-box;
}
.jh-tile:hover{ filter:brightness(1.08); }
.jh-tile:active{ transform:translateY(1px); }

/* お問い合わせ（pill）: 順番に依存せず href で指定 */
@media (min-width:960px){
  .jh-utility a[href="/contact"]{
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 999px;
    background: transparent;
    height: 46px;
    padding: 0 18px;
    min-width: auto;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    /* さらに左側だけ空けたいときは数値を増やす */
    margin-left: 0;
  }
  .jh-utility a[href="/contact"]:hover{
    background: rgba(255,255,255,0.10);
  }
}

/* SNS */
.jh-tile.jh-sns{
  min-width:56px !important; width:56px !important; height:56px !important; 
  padding:0 !important; font-size:0; line-height:0; border-radius:10px; background:transparent;
}
.jh-ico-img{ display:block; width:24px; height:24px; object-fit:contain; }

/* 三本線トグル */
.jh-toggle{
  position:relative; min-width:56px !important; width:56px !important; height:56px !important;
  padding:0 !important; border-radius:10px !important;
  display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.12);
  transition: filter .2s ease, background-color .2s ease;
}
.jh-toggle:hover{ filter: brightness(1.05); background: rgba(0,0,0,0.18); }
.jh-burger, .jh-burger::before, .jh-burger::after{
  content:""; position: relative; display:block; width:24px; height:2px; background:#fff; border-radius:2px;
}
.jh-burger::before, .jh-burger::after{ position:absolute; left:0; }
.jh-burger::before{ top:-8px; } .jh-burger::after { top: 8px; }

/* ドロワー（色は青テーマ） */
.jh-drawer{
  position:fixed; inset:0 0 0 auto; width:min(88vw,360px);
  background: var(--drawer-surface, #006FAB); color: var(--drawer-text, #fff);
  transform:translateX(100%); opacity:0;
  transition:transform .25s ease, opacity .25s ease; box-shadow:-12px 0 30px rgba(0,0,0,.18);
  padding:0 14px 20px; z-index:1001;
  height: 100dvh; min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding-bottom: calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.jh-drawer.is-open{ transform:none; opacity:1; }
.jh-close{ position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:26px; cursor:pointer; }

.jh-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1000; }
.jh-backdrop.is-visible{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .jh-drawer, .jh-backdrop, .jh-toggle, .jh-tile{ transition:none !important; }
}

/* メニューなど（そのまま踏襲） */
.jh-menu{ list-style:none; margin:0; padding:0; }
.jh-menu li+li{ border-top:1px dotted rgba(255,255,255,.25); }
.jh-menu a{
  display:flex; align-items:center; gap:12px; padding:14px 6px; font-weight:700; text-decoration:none; color:#fff;
  border-radius:10px; transition: background-color .18s ease, color .18s ease, transform .02s ease;
}
.jh-li-ico{ width:26px; height:26px; }
.jh-sep{ height:1px; margin:14px 0; background:rgba(255,255,255,.25); }
.jh-text-links{ list-style:none; margin:0 0 16px; padding:0; }
.jh-text-links li a{ display:block; padding:8px 0; text-decoration:none; color:#fff; font-weight:700; }

:root{ --drawer-divider: rgba(255,255,255,.25); --drawer-hover: rgba(255,255,255,.12); --drawer-active: rgba(255,255,255,.18); --menu-y: 9px; --menu-ico: 20px; }
@media (hover:hover){ .jh-menu a:hover{ background: var(--drawer-hover); } }
.jh-menu a:focus-visible{ background: var(--drawer-hover); outline: none; }
.jh-menu a:active{ background: var(--drawer-active); transform: translateY(1px); }
.jh-menu a{ padding: var(--menu-y) 6px; line-height: 1.25; }
.jh-li-ico{ width: var(--menu-ico); height: var(--menu-ico); }
.jh-menu li+li{ border-top-color: rgba(255,255,255,.18); }
.jh-drawer > *{ flex-shrink: 0; }
.jh-menu li:last-child a{ padding-bottom: calc(var(--menu-y, 14px) + 6px); }
.jh-menu + .jh-sep{ margin-top: 20px; }

/* ヒーロー・チップ・バナー等（必要なら使用） */
.jh-drawer__hero{ position:relative; height:200px; border-radius:10px; margin:12px 0; background:center/cover no-repeat; }
.jh-drawer__hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.5)); }
.jh-drawer__hero .hero-caption{ position:absolute; left:16px; bottom:12px; font-size:18px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.jh-drawer__hero.is-bleed{ margin:0 -14px 14px; border-radius:0; overflow:hidden; }
.jh-drawer__hero.is-bleed::after{ border-radius:0; }

.jh-chips{ display:flex; gap:10px; margin:12px 0; justify-content:center; flex-wrap:nowrap; width:100%; }
.jh-chips.is-bleed{ margin-left:-14px; margin-right:-14px; padding:0 14px; }
.jh-chip{
  flex:0 0 calc(50% - 5px); box-sizing:border-box; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:0;
  padding:10px 14px; border-radius:999px; background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.30); color:#fff; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.jh-cta-img{ display:block; margin: 10px 4px 18px; padding: 6px 8px 10px; border-radius:12px; overflow:hidden; text-align:center; }
.jh-cta-img img{ display:block; width:100%; height:auto; }
.jh-banner img{ display:block; width:100%; border-radius:8px; }


/* =========================
   セクション波形（PC+SP）完全版
   ========================= */
/* 共通 */
.wave-wrap { position: relative; line-height: 0; }

/* タブレット（任意で調整） */
@media (min-width:768px) and (max-width:1023.98px){
  .wave-wrap { height: 96px; }
  .wave-wrap svg:first-of-type{ height:96px; opacity:.6; }
  .wave-wrap svg:last-of-type{ height:72px; }
}

/* PC */
@media (min-width:1024px){
  .pickup-animals-onwave{
    position:absolute; right: clamp(8px, 2.5vw, 36px); bottom: 30px;
    height: clamp(120px, 9vw, 170px); opacity:.28; z-index:10; pointer-events:none;
  }
  .pickup-section::after{ display:none !important; }
}

/* SP */
@media (max-width:767.98px){
  .wave-wrap{ height:84px !important; }
  .wave-wrap svg:first-of-type{ height:84px !important; opacity:.55; }
  .wave-wrap svg:last-of-type { height:62px !important; }
  .pickup-animals-onwave{
    position:absolute; left:50%; transform:translateX(-50%); bottom:14px;
    height: clamp(74px, 22vw, 108px); filter:brightness(0) invert(1);
    opacity:.95; z-index:10; pointer-events:none;
  }
}


/* =========================
   ナビ案内SP（eight-navi）
   ========================= */
@media (max-width: 767.98px) {
  .swell-block-box-menu.eight-navi .swell-block-box-menu__item .swell-block-box-menu__link > .swell-block-box-menu__text {
    font-size: clamp(11px, 3vw, 13px) !important; line-height: 1.35 !important; white-space: nowrap; display: block; font-weight: 600; word-break: normal; overflow-wrap: normal; text-align: center;
  }
  .swell-block-box-menu.eight-navi .swell-block-box-menu__item .swell-block-box-menu__link > .swell-block-box-menu__text br {
    display: block; margin: 0.1em 0;
  }
  .swell-block-box-menu.eight-navi .swell-block-box-menu__item .swell-block-box-menu__link > .swell-block-box-menu__text strong,
  .swell-block-box-menu.eight-navi .swell-block-box-menu__item .swell-block-box-menu__link > .swell-block-box-menu__text b {
    font-weight: 700; color: #111;
  }
  .swell-block-box-menu.eight-navi .swell-block-box-menu__item .swell-block-box-menu__figure { margin-bottom: 0.3em; }
}

/* =========================
   プログラムセクション・カード横長（SP用も含む）
   ========================= */
.dp-horizontal { display:flex; gap:12px; align-items:stretch; }
.dp-horizontal .dp-media { flex:0 0 32%; aspect-ratio:4/3; }
.dp-horizontal .dp-body { flex:1; display:flex; flex-direction:column; }

/* SP横長カード */
.sp_only .dp-card{
  border-radius:18px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.08); margin-block:12px;
}
.sp_only .dp-horizontal{ display:flex; gap:12px; align-items:stretch; padding:12px; }
.sp_only .dp-horizontal .dp-media{ flex:0 0 32%; aspect-ratio:4/3; border-radius:14px; overflow:hidden; }
.sp_only .dp-horizontal .dp-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp_only .dp-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:0; }
.sp_only .dp-title{ margin:0; font-size:17px; line-height:1.35; }
.sp_only .dp-desc{ margin:0; font-size:14px; line-height:1.7; display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset; overflow:visible; }
/* バッジ */
.sp_only .dp-badges{ position:static; display:flex; gap:8px; flex-wrap:wrap; max-width:none; }
.sp_only .dp-badge{ font-size:11px; padding:5px 8px; line-height:1.2; }
/* 価格＆CTA */
.sp_only .dp-bottom{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sp_only .dp-price{ font-size:20px; }
.sp_only .dp-price-note{ font-size:11px; white-space:nowrap; color:#617186; }
.sp_only .dp-cta{ flex:0 0 44px; height:auto; aspect-ratio:1/1; border-radius:50%; }
@media (max-width:360px){
  .sp_only .dp-horizontal{ gap:10px; padding:10px; }
  .sp_only .dp-horizontal .dp-media{ flex-basis:36%; }
  .sp_only .dp-title{ font-size:16px; }
  .sp_only .dp-price{ font-size:18px; }
}
/* 小さめオプション */
.sp_only .dp-pricewrap{ gap:4px; }
.sp_only .dp-price{ font-size:18px; line-height:1.1; letter-spacing:.01em; }
.sp_only .dp-cta{ flex-basis:36px; }
.sp_only .dp-cta::before{ width:16px; height:16px; }
/* さらに小さくする場合（コメントアウトのまま）
.sp_only .dp-cta { flex-basis: 32px; }
.sp_only .dp-cta::before { width: 14px; height: 14px; }
.sp_only .dp-price { font-size: 17px; }
*/

/* =========================
   フッター・ライン全幅スタイル
   ========================= */
.tribal-divider-repeat{
  --h: 28px; --tile: 22px;
  height: var(--h); display: block;
  background: url("https://sealifeparkhawaii.jp/wp-content/uploads/2025/10/foot_line_tile_28x22.webp")
              left center / var(--tile) var(--h) repeat-x;
  width: 100vw; width: 100dvw; position: relative; left: 50%;
  margin-left: -50vw; margin-right: -50vw; margin-top: 5px; margin-bottom: 20px;
}

/* =========================
   アニマルズページ・画像注釈
  ========================= */
.p-articleThumb__caption {
  font-size: 14px;       /* 文字サイズをやや大きめに */
  color: #555;           /* 濃いめグレーで読みやすく */
  font-weight: 500;      /* 少し強調 */
  margin-top: 0.6em;     /* 写真との間隔を少し広げる */
}

/* =========================
   TOP・FAQスタイル
  ========================= */

.faq-blue .faq_q,
.faq-blue .faq_a {
  color: #fff;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  ④ 編集者向けメモ（非表示）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.editor-note {
  display: none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  ⑤ 料金表の軽い装飾強化（影・太字）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media (max-width: 767px) {
  .price-table tbody td:nth-child(2) { /* 料金 */
    white-space: nowrap;
    font-weight: 700;
  }
  .price-table tbody tr {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  }
  .price-table tbody td:first-child { /* 区分 */
    font-weight: 600;
  }
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  ① 画像＋テキスト横並び（早期予約割引アイコン）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.img-text-wrapper {
  display: flex;
  justify-content: center; /* 全体を中央寄せ */
}
.img-text {
  display: flex;
  align-items: center; /* 画像と文字の上下中央揃え */
  gap: 0.5em;          /* 画像と文字の間隔 */
}
.img-text img {
  width: 70px;         /* 画像サイズ */
  height: auto;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  ② スマホ用：料金表カード化
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media (max-width: 767px) {
  .price-table table {
    border: 0;
    width: 100%;
  }
  .price-table thead {
    display: none;
  }
  .price-table tbody tr {
    display: block;
    margin: 0 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  .price-table tbody td {
    display: block;
    padding: .8em 1em;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.6;
    word-break: break-word;
  }
  .price-table tbody td:last-child {
    border-bottom: 0;
  }
  .price-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    opacity: .7;
    margin-bottom: .2em;
  }
  .price-table tbody td:nth-child(2) {
    font-size: 1.05rem;
    font-weight: 600;
  }
  .price-table tbody td:first-child {
    background: #f9fafb;
  }
}

@media (max-width: 767px) {
  .price-table.strong-all td {
    font-weight: 600;
    font-size: 1.05rem;
  }
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  記事下のタグを非表示
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.c-categoryList,
.c-tagList {
  display: none !important;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  予約確認
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.ha-check-button {
  width: 100%;
  max-width: none;
  margin: 2em auto 0;
  padding: 2.5em 3em;
  background: #f8fbfd;
  border: 1px solid #e1ecf4;
  border-radius: 12px;
  text-align: center;
}

/* 内側の枠：背景は外枠と同色、枠線だけ黒に */
.ha-check-button fieldset {
  background: #f8fbfd;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 1.5em 2em;
  margin-bottom: 1em;
  box-shadow: none;
  outline: 0;
}

/* legend は白帯に見えないよう背景を揃える */
.ha-check-button legend {
  background: #f8fbfd;
  color: #004aad;
  font-weight: 600;
  font-size: 1.1em;
  padding: 0 .4em;
}

/* テキスト・チェック・ボタン（必要最低限のみ） */
.ha-check-button label { font-size: .95em; color: #333; }
.ha-check-button input[type="checkbox"] { transform: scale(1.2); margin-right: .4em; accent-color: #004aad; }
.ha-mini-text { font-size: .8em; color: #666; margin: .4em 0; }

.ha-buy-button {
  background: #004aad; color: #fff; font-size: 1rem; font-weight: 600;
  padding: .9em 2em; border: none; border-radius: 50px; cursor: pointer;
  transition: background-color .3s, transform .2s;
  width: 100%; max-width: 340px; margin-top: .6em;
}
.ha-buy-button:hover { background: #0066cc; transform: translateY(-2px); }
.ha-buy-button:disabled { background: #ccc; cursor: not-allowed; transform: none; }

/* 初売りキャンペーン告知 */
.program-campaign-notice {
  display: flex;
  align-items: center;
  background: #fff7e6;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 10px;
}

.program-campaign-icon {
  width: 42px;
  height: auto;
  margin-right: 10px;
}

.program-campaign-notice p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
}