@charset "utf-8";
/* ==========================================================================
   サンセットビーチインかわな
   design: 「水平線」 — 全9室が同じ水平線を向いている、という事実を構造にする
   ========================================================================== */

:root{
  --ink:      #0F212D;   /* 藍鼠 — 本文・地の色 */
  --ink-70:   #43555F;
  --ink-45:   #7C8A92;
  --sea:      #1A4A66;   /* 岩井の海 */
  --sea-dk:   #123449;
  --mist:     #E7ECED;   /* 潮霧 — 面の色 */
  --paper:    #F6F8F8;
  --sand:     #DCD5C8;   /* 砂 — 差し色として少量だけ */
  --sun:      #DE6B2F;   /* 夕日 — CTAと価格 */
  --sun-dk:   #B9511C;
  --gold:     #BE9138;
  --line:     rgba(15,33,45,.15);
  --line-lt:  rgba(255,255,255,.24);

  /* 夕景グラデーション（サイトの主役） */
  --dusk-1: #23283F;   /* 藍 — 空の上部 */
  --dusk-2: #6E3A54;   /* 紫がかった残照 */
  --dusk-3: #C85A3C;   /* 夕日のオレンジ */
  --dusk-4: #F0A44B;   /* 水平線ぎわの金 */
  --grad-dusk: linear-gradient(160deg, var(--dusk-1) 0%, var(--dusk-2) 42%, var(--dusk-3) 74%, var(--dusk-4) 100%);
  --grad-dusk-soft: linear-gradient(160deg, #2A2F46 0%, #7A4460 55%, #D06A44 100%);
  --grad-sun: linear-gradient(90deg, var(--dusk-3), var(--dusk-4));

  --display: "Shippori Mincho B1", "Yu Mincho", "游明朝", serif;
  --body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 48px);
  --header-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.95;
  font-feature-settings:"palt" 1;
  padding-bottom:env(safe-area-inset-bottom);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--sea); text-decoration-thickness:1px; text-underline-offset:.25em; }
a:hover{ color:var(--sun-dk); }
:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.5; margin:0; letter-spacing:.02em; }
p{ margin:0 0 1.4em; }
ul{ margin:0 0 1.4em; padding-left:1.3em; }
li{ margin-bottom:.4em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:800px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 見出し：水平線と太陽 ------------------------------------------ */
/* 水平線＝この宿の全客室が向いている一本の線。装飾ではなく、主題そのもの。 */
.horizon{ position:relative; padding-bottom:22px; margin-bottom:34px; }
.horizon::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--line);
}
.horizon::before{
  content:""; position:absolute; left:0; bottom:-4px; width:9px; height:9px;
  border-radius:50%; background:var(--sun); z-index:1;
}
.horizon .eyebrow{
  display:block; font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; color:var(--sea); margin-bottom:.7em; text-transform:uppercase;
}
.horizon h2{ font-size:clamp(1.5rem, 3.6vw, 2.1rem); }
.horizon h1{ font-size:clamp(1.7rem, 4.4vw, 2.5rem); }
.horizon.on-dark::after{ background:var(--line-lt); }
.horizon.on-dark .eyebrow{ color:#9FC3D6; }

/* ---------- ヘッダー ------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(13,26,36,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .3s, box-shadow .3s;
}
.site-header.scrolled{ background:rgba(13,26,36,.94); box-shadow:0 4px 24px rgba(0,0,0,.28); }
.site-header .bar{
  display:flex; align-items:center; gap:20px; height:var(--header-h);
  max-width:1200px; margin-inline:auto; padding-inline:var(--gut);
}
.site-header .logo{ display:flex; align-items:center; flex:0 0 auto; }
.site-header .logo img{ height:36px; width:auto; }
.nav{ margin-left:auto; }
.nav>ul{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); list-style:none; margin:0; padding:0; }
.nav>ul>li{ position:relative; }
.nav>ul>li>a{
  display:inline-flex; align-items:center; gap:.35em; color:#EAF1F4; text-decoration:none;
  font-size:.9rem; font-weight:500; letter-spacing:.04em; padding:24px 0; position:relative;
}
.nav>ul>li>a::after{
  content:""; position:absolute; left:0; right:0; bottom:18px; height:2px;
  background:var(--grad-sun); transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.nav>ul>li>a:hover::after,.nav>ul>li>a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .caret{ width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6; opacity:.7; transition:transform .25s; }
.nav .has-sub:hover .caret{ transform:rotate(180deg); }

/* ドロップダウン */
.submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:250px; background:rgba(16,30,41,.97); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:8px;
  opacity:0; visibility:hidden; transition:opacity .22s, transform .22s;
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.submenu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */
.has-sub:hover .submenu,.has-sub:focus-within .submenu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.submenu ul{ list-style:none; margin:0; padding:0; }
.submenu a{
  display:block; color:#D6E2E8; text-decoration:none; font-size:.86rem; padding:.7em .9em;
  border-radius:4px; letter-spacing:.02em; transition:background .18s, color .18s;
}
.submenu a:hover,.submenu a[aria-current="page"]{ background:rgba(240,164,75,.14); color:#fff; }
.nav-reserve{ display:none; }

.header-cta{
  display:inline-flex; align-items:center; gap:.5em; color:#fff; text-decoration:none;
  font-size:.86rem; font-weight:700; padding:.6em 1.3em; border-radius:3px;
  background:var(--grad-sun); box-shadow:0 4px 14px rgba(200,90,60,.4);
}
.header-cta:hover{ color:#fff; filter:brightness(1.08); }
.nav-toggle{ display:none; }

@media (max-width:940px){
  :root{ --header-h:62px; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto;
    width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0;
  }
  .nav-toggle span{ display:block; height:2px; width:24px; margin-inline:auto; background:#fff; border-radius:2px;
    transition:transform .28s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .site-header .header-cta{ display:none; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; background:var(--grad-dusk);
    max-height:0; overflow:hidden; transition:max-height .34s ease; margin:0;
  }
  .nav[data-open="true"]{ max-height:calc(100vh - var(--header-h)); overflow-y:auto; }
  .nav>ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gut) 40px; }
  .nav>ul>li>a{ padding:1.05em 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.14); }
  .nav>ul>li>a::after{ display:none; }
  .nav .has-sub>a .caret{ margin-left:auto; }
  .submenu{
    position:static; transform:none; min-width:0; opacity:1; visibility:visible;
    background:none; border:0; box-shadow:none; padding:0 0 .6em 1em; backdrop-filter:none;
    max-height:0; overflow:hidden; transition:max-height .28s;
  }
  .has-sub.open .submenu{ max-height:400px; }
  .has-sub.open .caret{ transform:rotate(180deg); }
  .submenu a{ padding:.75em .6em; font-size:.92rem; }
  .nav-reserve{ display:block; margin-top:1.2em; }
  .nav-reserve a{
    background:var(--grad-sun); color:#fff!important; text-align:center; border-radius:4px;
    font-weight:700; border-bottom:0!important; padding:1em!important;
  }
}

/* ---------- ヒーロー（動画） ---------------------------------------------- */
.hero{ position:relative; background:var(--dusk-1); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,22,38,.42) 0%, rgba(20,22,38,.05) 38%, rgba(20,22,38,.78) 100%),
    linear-gradient(90deg, rgba(35,40,63,.5) 0%, rgba(35,40,63,0) 55%);
}
.hero-inner{
  position:relative; z-index:2; max-width:1200px; margin-inline:auto;
  padding:clamp(96px,18vh,170px) var(--gut) clamp(56px,10vh,100px);
  min-height:min(92vh,780px); display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
}
.hero .kicker{
  display:inline-flex; align-items:center; gap:.7em; font-size:.74rem; font-weight:700;
  letter-spacing:.24em; color:#F4CDA0; margin-bottom:1.4em; text-transform:uppercase;
}
.hero .kicker::before{ content:""; width:34px; height:1px; background:var(--dusk-4); }
.hero h1{
  font-size:clamp(2rem, 6.6vw, 3.9rem); line-height:1.4; color:#fff; font-weight:600;
  text-shadow:0 2px 30px rgba(0,0,0,.4); margin-bottom:.55em;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line>span{ display:inline-block; will-change:transform; }
.hero .lede{
  font-size:clamp(.96rem,2.2vw,1.12rem); max-width:32em; color:#EEF3F6; line-height:2;
  text-shadow:0 1px 14px rgba(0,0,0,.5); margin-bottom:2em;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
/* スクロール誘導 */
.hero-scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  color:rgba(255,255,255,.7); font-size:.66rem; letter-spacing:.2em; text-align:center;
}
.hero-scroll .mouse{
  width:24px; height:38px; border:1.5px solid rgba(255,255,255,.6); border-radius:12px;
  margin:0 auto 8px; position:relative;
}
.hero-scroll .mouse::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; margin-left:-1.5px;
  background:#fff; border-radius:2px; animation:scrolldot 1.8s infinite;
}
@keyframes scrolldot{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 80%{opacity:0;transform:translateY(10px)} }

/* 下層ページのヒーロー */
.page-hero{ position:relative; background:var(--dusk-1); overflow:hidden; }
.page-hero .hero-media::after{
  background:linear-gradient(180deg, rgba(20,22,38,.55), rgba(20,22,38,.68)),
    linear-gradient(90deg, rgba(112,58,84,.4), rgba(112,58,84,0) 60%);
}
.page-hero .inner{
  position:relative; z-index:2; max-width:1200px; margin-inline:auto;
  padding:clamp(64px,11vw,110px) var(--gut) clamp(48px,8vw,76px); color:#fff;
}
.page-hero .kicker{
  display:inline-flex; align-items:center; gap:.6em; font-size:.7rem; font-weight:700;
  letter-spacing:.22em; color:#F4CDA0; margin-bottom:1em; text-transform:uppercase;
}
.page-hero .kicker::before{ content:""; width:28px; height:1px; background:var(--dusk-4); }
.page-hero h1{ font-size:clamp(1.7rem,4.8vw,2.7rem); color:#fff; margin-bottom:.4em; }
.page-hero p{ margin:0; color:#E4EAEE; font-size:.98rem; max-width:36em; }

/* パンくず */
.crumbs{ background:var(--mist); border-bottom:1px solid var(--line); }
.crumbs ol{
  display:flex; flex-wrap:wrap; gap:.5em; list-style:none; margin:0;
  max-width:var(--wrap); margin-inline:auto; padding:.7em var(--gut);
  font-size:.78rem; color:var(--ink-45);
}
.crumbs li+li::before{ content:"／"; margin-right:.5em; color:var(--ink-45); }
.crumbs a{ color:var(--ink-70); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- ボタン -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--body); font-weight:700; font-size:.95rem; letter-spacing:.04em;
  padding:.95em 1.7em; border-radius:2px; text-decoration:none; border:1px solid transparent;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{ background:var(--sun); color:#fff; }
.btn-primary:hover{ background:var(--sun-dk); color:#fff; }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-line{ background:transparent; color:var(--sea); border-color:var(--sea); }
.btn-line:hover{ background:var(--sea); color:#fff; }
.btn-tel{ font-family:var(--display); font-size:1.15rem; letter-spacing:.03em; }

/* ---------- セクション ---------------------------------------------------- */
.section{ padding:clamp(56px,9vw,96px) 0; }
.section-mist{ background:var(--mist); }
.section-ink{ background:var(--ink); color:#DCE6EA; }
.section-ink h2,.section-ink h3{ color:#fff; }
.section-ink a{ color:#9FC3D6; }

/* ---------- グリッド ------------------------------------------------------ */
.grid{ display:grid; gap:clamp(20px,3vw,34px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.figure{ margin:0; }
.figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:2px; }
.figure figcaption{ font-size:.85rem; color:var(--ink-70); margin-top:.6em; line-height:1.7; }
.figure h3{ font-size:1.06rem; margin:.7em 0 .3em; }

/* 交互配置の2カラム */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.split+.split{ margin-top:clamp(40px,6vw,72px); }
.split img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
.split h3{ font-size:clamp(1.15rem,2.4vw,1.4rem); margin-bottom:.6em; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } .split.rev>*:first-child{ order:2; } }

/* ---------- カード -------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.card img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.card .body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:1.12rem; margin-bottom:.45em; }
.card p{ font-size:.9rem; color:var(--ink-70); margin-bottom:1em; }
.card .price{ margin-top:auto; }
.price{
  font-family:var(--display); font-size:1.32rem; color:var(--sun-dk); font-weight:600;
  display:block; line-height:1.4;
}
.price small{ font-family:var(--body); font-size:.72rem; color:var(--ink-70); font-weight:400; display:block; }
.card a.more{ margin-top:.9em; font-size:.86rem; font-weight:700; text-decoration:none; }
.card a.more::after{ content:" →"; }

/* ---------- 料金表 -------------------------------------------------------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:1.6em; }
table{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; min-width:560px; }
caption{ text-align:left; font-size:.85rem; color:var(--ink-70); padding-bottom:.7em; }
th,td{ padding:.9em 1em; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
thead th{ background:var(--ink); color:#fff; font-family:var(--body); font-weight:700; font-size:.85rem; letter-spacing:.05em; white-space:nowrap; }
tbody th{ font-family:var(--body); font-weight:700; width:32%; background:var(--mist); }
td .yen{ font-family:var(--display); font-size:1.06rem; color:var(--sun-dk); font-weight:600; white-space:nowrap; }
.note{ font-size:.82rem; color:var(--ink-70); line-height:1.85; }

/* 施設概要のような縦型テーブル（スマホでも崩れない） */
.spec{ min-width:0; }
.spec th{ width:34%; }
@media (max-width:560px){
  .spec, .spec tbody, .spec tr, .spec th, .spec td{ display:block; width:100%; }
  .spec th{ border-bottom:none; padding-bottom:.3em; }
  .spec td{ padding-top:0; }
}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); background:#fff; }
.faq summary{
  cursor:pointer; padding:1.15em 3em 1.15em 1.2em; position:relative;
  font-weight:700; list-style:none; line-height:1.7;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q "; color:var(--sun); font-family:var(--display); }
.faq summary::after{
  content:""; position:absolute; right:1.3em; top:1.55em; width:9px; height:9px;
  border-right:1.5px solid var(--sea); border-bottom:1.5px solid var(--sea);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .answer{ padding:0 1.2em 1.4em 2.4em; color:var(--ink-70); font-size:.94rem; }

/* ---------- お知らせ帯（地引網など期間限定） ------------------------------ */
.notice{
  background:var(--sea); color:#fff; border-radius:2px;
  padding:clamp(22px,4vw,34px) clamp(20px,4vw,36px);
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
}
.notice h3{ color:#fff; font-size:clamp(1.1rem,2.6vw,1.35rem); margin-bottom:.4em; }
.notice p{ margin:0; font-size:.9rem; color:#D6E5ED; }
.notice .tag{
  display:inline-block; background:var(--sun); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; padding:.35em .8em; border-radius:2px; margin-bottom:.9em;
}
@media (max-width:700px){ .notice{ grid-template-columns:1fr; } }

/* ---------- 予約フォーム -------------------------------------------------- */
.form{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:clamp(22px,4vw,40px); }
.field{ margin-bottom:1.5em; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.5em; }
.req{ color:#fff; background:var(--sun); font-size:.68rem; padding:.15em .55em; border-radius:2px; margin-left:.6em; vertical-align:.15em; }
.opt{ color:var(--ink-45); font-size:.72rem; margin-left:.6em; font-weight:400; }
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%; font-family:var(--body); font-size:1rem; padding:.8em .9em;
  border:1px solid #B9C4C9; border-radius:2px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{ border-color:var(--sea); outline:2px solid rgba(26,74,102,.25); outline-offset:0; }
textarea{ min-height:7em; resize:vertical; line-height:1.8; }
.row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:560px){ .row3{ grid-template-columns:1fr; } }
.consent{ display:flex; gap:.7em; align-items:flex-start; font-size:.92rem; }
.consent input{ margin-top:.45em; width:18px; height:18px; flex:0 0 auto; }
.hp{ position:absolute!important; left:-9999px!important; }
.form-alert{
  background:#FFF3EC; border-left:3px solid var(--sun); padding:1em 1.2em;
  font-size:.9rem; line-height:1.85; margin-bottom:1.8em;
}

/* ---------- 地図 ---------------------------------------------------------- */
.map-embed{
  position:relative; aspect-ratio:16/9; background:var(--mist); border-radius:2px; overflow:hidden;
  border:1px solid var(--line);
}
.map-embed img{ width:100%; height:100%; object-fit:cover; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-embed button{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background:rgba(15,33,45,.42); color:#fff; font-family:var(--body); font-weight:700;
  font-size:1rem; letter-spacing:.06em; display:flex; align-items:center; justify-content:center;
}
.map-embed button:hover{ background:rgba(15,33,45,.55); }

/* ---------- CTA帯 --------------------------------------------------------- */
.cta-band{ position:relative; background:var(--grad-dusk); color:#fff; text-align:center; padding:clamp(48px,8vw,80px) 0; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, rgba(255,210,150,.35), transparent 55%); pointer-events:none; }
.cta-band>*{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; font-size:clamp(1.35rem,3.4vw,1.9rem); margin-bottom:.6em; }
.cta-band p{ color:#B7C8D1; font-size:.92rem; max-width:40em; margin-inline:auto; }
.cta-band .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.6em; }
.cta-band .tel-big{
  display:block; font-family:var(--display); font-size:clamp(1.6rem,5vw,2.4rem);
  color:#fff; text-decoration:none; letter-spacing:.04em; margin-bottom:.15em;
}
.cta-band .tel-note{ font-size:.8rem; color:#8FA6B2; }

/* ---------- フッター ------------------------------------------------------ */
.site-footer{ background:var(--dusk-1); color:#B7CBD6; font-size:.88rem; padding:clamp(44px,7vw,72px) 0 0; }
.site-footer a{ color:#CFE0E8; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.site-footer img.flogo{ height:38px; width:auto; margin-bottom:1.2em; }
.site-footer h4{ font-family:var(--body); font-size:.78rem; letter-spacing:.16em; color:#7FA0B0; margin-bottom:1em; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.6em; }
.copyright{
  margin-top:clamp(36px,6vw,56px); border-top:1px solid rgba(255,255,255,.12);
  padding:1.4em 0 calc(1.4em + env(safe-area-inset-bottom)); font-size:.78rem; color:#7FA0B0;
}
@media (max-width:940px){ .copyright{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- スマホ固定CTA ------------------------------------------------- */
.sticky-cta{ display:none; }
@media (max-width:940px){
  .sticky-cta{
    display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--ink); border-top:1px solid rgba(255,255,255,.14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sticky-cta a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:.7em 4px; color:#DCE6EA; text-decoration:none; font-size:.72rem; letter-spacing:.04em;
    border-left:1px solid rgba(255,255,255,.12);
  }
  .sticky-cta a:first-child{ border-left:0; }
  .sticky-cta a.book{ background:var(--sun); color:#fff; }
  .sticky-cta svg{ width:19px; height:19px; fill:currentColor; }
}

/* ---------- 汎用 ---------------------------------------------------------- */
.lead{ font-size:clamp(1rem,2.2vw,1.12rem); line-height:2.05; }
.center{ text-align:center; }
.mb0{ margin-bottom:0; }
.mt2{ margin-top:2em; }
.tag-sm{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--sea); border:1px solid var(--sea); padding:.25em .7em; border-radius:2px; margin-bottom:.9em;
}
.summary-box{
  background:var(--mist); border-left:3px solid var(--sea); padding:1.2em 1.4em;
  font-size:.95rem; line-height:2; margin-bottom:2.4em;
}
.linklist{ list-style:none; padding:0; }
.linklist li{ border-bottom:1px solid var(--line); }
.linklist a{ display:block; padding:1em .2em; text-decoration:none; font-weight:700; }
.linklist a::after{ content:" →"; color:var(--sun); }

/* ---------- Instagram フィード --------------------------------------------- */
.ig-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:1.6em; }
.ig-account{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:700;
  font-size:.95rem; color:var(--ink); text-decoration:none; }
.ig-account:hover{ color:var(--sun-dk); }
.ig-account svg{ width:22px; height:22px; }
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
@media (max-width:860px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .ig-grid{ grid-template-columns:repeat(2,1fr); gap:6px; } }
.ig-tile{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px; background:var(--mist); }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ig-tile:hover img{ transform:scale(1.06); }
.ig-tile::after{ content:""; position:absolute; inset:0; background:rgba(15,33,45,0); transition:background .25s; }
.ig-tile:hover::after{ background:rgba(15,33,45,.14); }
.ig-tile .vid{ position:absolute; top:8px; right:8px; width:18px; height:18px; fill:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ig-follow{ text-align:center; margin-top:1.8em; }

/* ---------- スクロール演出 ------------------------------------------------ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="left"].in,[data-reveal="right"].in{ transform:none; }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].in{ transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.3s; }
[data-reveal-delay="4"]{ transition-delay:.4s; }

/* 画像のパララックス風ズーム */
.zoom-wrap{ overflow:hidden; }
.zoom-wrap img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.zoom-wrap.in img{ transform:scale(1); }
.zoom-wrap img{ transform:scale(1.12); }

/* ---------- 夕景グラデーションのセクション -------------------------------- */
.section-dusk{ position:relative; background:var(--grad-dusk); color:#fff; overflow:hidden; }
.section-dusk h2,.section-dusk h3{ color:#fff; }
.section-dusk .eyebrow{ color:#F6D6AE!important; }
.section-dusk::before{  /* うっすら光の粒 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 78% 12%, rgba(255,220,170,.5), transparent 40%);
}
.section-dusk>*{ position:relative; z-index:1; }

/* 数字のカウントアップ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px); text-align:center; }
@media (max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); gap:28px 16px; } }
.stat .num{ font-family:var(--display); font-size:clamp(2.2rem,6vw,3.4rem); line-height:1; font-weight:600;
  background:linear-gradient(180deg,#fff,#F4CDA0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .num small{ font-size:.42em; margin-left:.15em; -webkit-text-fill-color:#F4CDA0; }
.stat .lbl{ display:block; margin-top:.7em; font-size:.82rem; letter-spacing:.06em; color:rgba(255,255,255,.82); }

/* ---------- 波の区切り ---------------------------------------------------- */
.wave-divider{ display:block; width:100%; height:clamp(40px,6vw,80px); }
.wave-divider path{ fill:currentColor; }
.wave-top{ margin-bottom:-1px; }
.wave-bottom{ margin-top:-1px; transform:rotate(180deg); }

/* フルブリードの帯 */
.fullbleed{ position:relative; min-height:min(70vh,560px); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--dusk-1); }
.fullbleed .bg{ position:absolute; inset:0; z-index:0; }
.fullbleed .bg img{ width:100%; height:100%; object-fit:cover; }
.fullbleed::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,22,38,.1), rgba(20,22,38,.72)); }
.fullbleed .cap{ position:relative; z-index:2; max-width:1200px; margin-inline:auto; width:100%;
  padding:clamp(40px,7vw,80px) var(--gut); color:#fff; }
.fullbleed h2{ color:#fff; font-size:clamp(1.5rem,4vw,2.4rem); margin-bottom:.4em; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.fullbleed p{ max-width:32em; color:#EEF3F6; text-shadow:0 1px 10px rgba(0,0,0,.5); margin:0; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],.zoom-wrap img{ opacity:1!important; transform:none!important; }
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}