/* ==========================================================
   夕陽ヶ丘ホテル — main stylesheet
   Figmaから取得した正確な数値で実装。
   - 1920px(>1680): 01_index_A をピクセル単位で再現
   - 1024-1680: 01_index_1440px ベース(画像と要素間余白のみ縮小)
   - <=1023: SP独立レイアウト
   ========================================================== */

/* ----------------------------------------------------------
   0. Design tokens — Figma取得値
   ---------------------------------------------------------- */
:root {
  /* Color — Figmaから直接取得 */
  --c-primary: #ec7d5f;             /* 97:1781 phone, 97:3197 price, etc. */
  --c-primary-light: #ffb09b;       /* gradient end — 97:1813 */
  --c-text: #222;                   /* 97:1785 main text */
  --c-text-sub: #333;               /* 97:3437 description */
  --c-text-muted: #888;             /* 97:3201 fine print */
  --c-cream: #f0ebde;               /* 97:4082 hero text */
  --c-bg-cream: #fef7e7;            /* I97:3652 access bg */
  --c-bg-soft: #f6f6f6;             /* 97:3189 plan filter bg */
  --c-blue: #339dc1;                /* port labels */
  --c-blue-soft: #81cddc;           /* 瀬戸内海 label */
  --c-gray-line: #ddd;              /* button border 97:3250 */
  --c-gray-line-2: #aaa;            /* footer border */
  --c-gray-line-3: #707070;         /* card border */
  --c-gray-line-4: #bbb;            /* language separator */
  --c-white: #ffffff;
  --c-black: #111;

  /* Typography (XD→Figma 取り込み崩れの修正版)
     - 基本ゴシック: 游ゴシック Medium
     - 見出し明朝: Shippori Mincho B1 Medium
     - 装飾英数字: Cormorant Infant Medium */
  --font-jp-mincho: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-jp-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-jp-sans: "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en-serif: "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  --font-script: "Allura", "Cormorant Infant", cursive;

  /* Layout */
  --inner-max: 1680px;
  --inner-pad: 60px;
  --frame-w: 1920px;
}

/* ----------------------------------------------------------
   1. Global / Inner container
   ---------------------------------------------------------- */
.l-inner {
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  box-sizing: border-box;
}

.u-sp { display: none; }
.u-pc { display: block; }

/* ----------------------------------------------------------
   2. Header (Figma: 97:3865 「コンポーネント 184 – 1」 1680×100)
   ---------------------------------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.l-header__inner {
  position: relative;
  width: 1680px;
  height: 100px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

/* Logo: inset 10px from header left, vertically centered (97:1780) */
.l-header__logo {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 325px;
  height: 83px;
  display: block;
}
.l-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Nav (97:2084) — top 40px, items spaced with 36px gap, font 16px */
.l-header__nav {
  position: absolute;
  top: 40px;
  left: 433px;
}
.l-header__nav-list {
  display: flex;
  gap: 36px;
  align-items: center;
}
.l-header__nav-list li a {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-block;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.l-header__nav-list li a:hover { color: var(--c-primary); }

/* CTA (宿泊予約) — 97:2083, 130×40, gradient, top 31px / left 1097px (right 453) */
.l-header__cta {
  position: absolute;
  top: 31px;
  left: 1097px;
  width: 130px;
  height: 40px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  color: var(--c-white);
  letter-spacing: 1.36px;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.l-header__cta:hover { filter: brightness(1.05); }

/* Burger button (97:2082) — 40×40, top 31px / left 1251px (right 389) */
.l-header__burger {
  position: absolute;
  top: 31px;
  left: 1251px;
  width: 40px;
  height: 40px;
  background: var(--c-text);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.l-header__burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-white);
}

/* Language block (97:2080) — 39.24~67/40.76 — top ~39px, container ends right 238px */
.l-header__lang {
  position: absolute;
  top: 39.24px;
  left: 1323px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-header__lang-icon {
  width: 27px;
  height: 27px;
}
.l-header__lang-text {
  font-family: var(--font-en-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  color: var(--c-text);
  white-space: nowrap;
}
.l-header__lang::after {
  content: "";
  position: absolute;
  right: -23px;
  top: 27.76px;
  width: 0;
  height: 35px;
  border-left: 1px solid var(--c-gray-line-4);
}

/* Tel block (97:2077) — top 19px / right 39.54px / left 1474.46px */
.l-header__tel {
  position: absolute;
  top: 19px;
  left: 1474.46px;
  width: 166px;
  text-align: center;
}
.l-header__tel-num {
  display: block;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 36px;
  color: var(--c-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.l-header__tel-hours {
  display: block;
  margin-top: 2px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   3. Hero (Figma frame 0~1000, text frame 97:4082)
   ---------------------------------------------------------- */
.p-hero {
  position: relative;
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  overflow: hidden;
  background: #2a2624;
  /* clip-path で position:fixed の子を .p-hero の境界内に閉じ込める
     → 背景は viewport 固定 / 上のテキストはスクロール → reveal型パララックス */
  clip-path: inset(0);
}

.p-hero__slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  will-change: transform;
}
.p-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  z-index: 1;
}
.p-hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}
.p-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  will-change: transform;
  /* transition なし — 解除時の逆方向アニメーションを完全に禁止 */
}
/* Ken Burns: アクティブ時のみ前進ズーム。解除時はJSで現在transformをinline凍結 */
.p-hero__slide.is-active img {
  animation: kenburns 12s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__slide img,
  .p-hero__slide.is-active img {
    transform: scale(1.05);
    animation: none;
  }
}

/* Hero copy: positioned at frame x=200 / y=422 (97:4082) */
.p-hero__copy {
  position: absolute;
  left: 200px;
  top: 422px;
  width: 571px;
  color: var(--c-cream);
  z-index: 3; /* fixed slider(z:0) より上 */
}
.p-hero__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.7;
  letter-spacing: 12.6px;
  white-space: nowrap;
}
.p-hero__title span { display: block; }
.p-hero__title-en {
  margin-top: 16px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.p-hero__lead {
  margin-top: 28px;
  width: 394px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0.04em;
}

/* Right side fixed menu (Figma 97:3847) — body直下配置 / 全画面の最前面に固定 */
.l-sidemenu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: auto;
}
.l-sidemenu__btn {
  width: 80px;
  height: 80px;
  border-radius: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: filter .2s ease, transform .2s ease;
}
.l-sidemenu__btn:hover { filter: brightness(1.06); transform: translateX(-2px); }
.l-sidemenu__btn--plan   { background: linear-gradient(to bottom, #3b69ac, #5486d1); }
.l-sidemenu__btn--search { background: linear-gradient(to bottom, #2a88b2, #48a0c8); }
.l-sidemenu__btn--faq    { background: linear-gradient(to bottom, #40ab67, #63c286); }
.l-sidemenu__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  /* Figma書き出しがどの色でも白に強制 */
  filter: brightness(0) invert(1);
}
.l-sidemenu__label {
  font-family: var(--font-jp-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.05em;
}
.l-sidemenu__label > span { display: block; }

/* Hero slider counter (97:4076) — at (255.31, 932) 275×77 */
.p-hero__counter {
  position: absolute;
  left: 255px;
  bottom: 0;
  width: 276px;
  height: 77px;
  display: flex;
  align-items: center;
  gap: 28px;
  z-index: 5;
}
.p-hero__counter-num {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.75px;
  color: var(--c-cream);
}
.p-hero__counter-arrows {
  display: flex;
  gap: 24px;
}
.p-hero__counter-arrows button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cream);
}

/* ----------------------------------------------------------
   4. Notice banner (Figma: 97:4038 — 1052×60 at (748, 940))
   ---------------------------------------------------------- */
.p-notice {
  position: relative;
  width: 100%;
  margin-top: -60px;
  z-index: 6;
}
.p-notice__inner {
  position: relative;
  width: 1052px;
  height: 60px;
  margin: 0 0 0 auto;
  margin-right: calc((100% - 1800px) / 2);
  background: var(--c-white);
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  padding: 0 60px 0 30.07px;
  box-sizing: border-box;
}
.p-notice__icon {
  width: 28.87px;
  height: 29.33px;
  background: var(--c-primary);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: relative;
  margin-right: 6px;
}
.p-notice__icon::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--c-white);
}
.p-notice__label {
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--c-primary);
  letter-spacing: 0.05em;
  margin-right: 28px;
  white-space: nowrap;
}
.p-notice__date {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--c-text);
  margin-right: 20px;
  white-space: nowrap;
}
.p-notice__text {
  font-family: var(--font-jp-sans);
  font-size: 16px;
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}
.p-notice__arrow {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 5px;
  color: var(--c-text);
}

/* Workaround: align notice 144px from the right edge of the 1920 frame */
@media (min-width: 1681px) {
  .p-notice__inner { margin-right: 144px; }
}

/* ----------------------------------------------------------
   5. Sunset Service Info + Topics (Figma 97:3575 — 1800×368 at (120, 1120))
   ---------------------------------------------------------- */
.p-topics {
  position: relative;
  width: 100%;
  padding: 120px 0 0;
}
.p-topics__inner {
  position: relative;
  width: 1800px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  height: 368px;
}
@media (min-width: 1921px) {
  .p-topics__inner { max-width: 1800px; }
}

/* Sunset Service card — left part of the row */
.p-sunset {
  position: absolute;
  top: 12px;
  left: 0;
  width: 532px;
  height: 356px;
  background: var(--c-white);
  border-radius: 6px;
  box-shadow: 0 3px 24px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.p-sunset__head {
  height: 100px;
  padding: 21px 40px 0 40px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  color: var(--c-white);
  box-sizing: border-box;
}
.p-sunset__head-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 23px;
  line-height: 50px;
  letter-spacing: 1.15px;
}
.p-sunset__head-en {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 36px;
}
.p-sunset__body {
  position: relative;
  padding: 22px 40px 0 40px;
}
.p-sunset__time-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-top: 22px;
}
.p-sunset__time-label {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 24px;
  line-height: 50px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.p-sunset__time-label .is-mark { color: var(--c-primary); }
.p-sunset__time {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--c-text);
}
.p-sunset__lead {
  margin-top: 22px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.02em;
}

/* Topics title + slider buttons */
.p-topics__head {
  position: absolute;
  top: 33px;
  left: 552px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  z-index: 2;
}
.p-topics__title-en {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 2px;
}
.p-topics__title-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 18px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}

/* Topics slider arrows — right side at left 1599.72 (relative to frame, so within 1800 inner ≈ right 200) */
.p-topics__nav {
  position: absolute;
  top: 33px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  z-index: 5;
}
.p-topics__nav button {
  width: 14px;
  height: 18px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-topics__nav button.is-prev svg { transform: rotate(180deg); }
.p-topics__counter {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: var(--c-text);
  letter-spacing: 0.75px;
}

/* Topics cards row — starts at 552px (628-120 offset to inner) , 4 cards × (340 + 32 gap) */
.p-topics__rail {
  position: absolute;
  top: 88px;
  left: 552px;
  display: flex;
  gap: 32px;
  width: calc(100% - 552px);
  overflow: hidden;
}

/* ===== Topics Banner Slider (replaces topics cards rail) =====
   - 自動ステップ右→左 / 1-2-3-1-2-3 無限ループ
   - はみ出し領域は viewport overflow:hidden で見えなくなる */
.p-topicsBnr {
  position: absolute;
  top: 88px;
  left: 552px;
  right: 0;
  height: 280px;
  z-index: 1;
}
.p-topicsBnr__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-topicsBnr__track {
  display: flex;
  gap: 24px;
  height: 100%;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.p-topicsBnr__slide {
  flex: 0 0 340px;
  height: 280px;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: opacity .25s ease;
}
.p-topicsBnr__slide:hover {
  opacity: 0.8;
}
.p-topicsBnr__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .p-topicsBnr__track { transition: none; }
}

.p-topics__card {
  position: relative;
  flex: 0 0 340px;
  width: 340px;
  height: 280px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-topics__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-topics__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Card variation: Star watching */
.p-topics__card--star .p-topics__card-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: 4.5px;
  line-height: 40px;
}
.p-topics__card--star .p-topics__card-jp .lg { font-size: 30px; }
.p-topics__card--star .p-topics__card-jp .sm { font-size: 22px; letter-spacing: 3.3px; }
.p-topics__card--star .p-topics__card-en {
  margin-top: 50px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--c-white);
}

/* Card variation: Raku-Raku island trip */
.p-topics__card--raku { background: linear-gradient(134.5deg, #ffd2d2 2.6%, #f4f8bd 46.5%, #75e5fc 95.5%); }
.p-topics__card--raku .p-topics__card-overlay { padding-top: 90px; }
.p-topics__card--raku-sub {
  font-family: var(--font-jp-sans);
  font-size: 19px;
  color: #333;
  margin-bottom: 16px;
}
.p-topics__card--raku-main {
  font-family: var(--font-jp-sans);
  font-size: 36px;
  letter-spacing: 2.88px;
  font-weight: 700;
}
.p-topics__card--raku-main span:nth-child(odd) { color: #99e886; }
.p-topics__card--raku-main span:nth-child(even) { color: #f4ff60; }
.p-topics__card--raku-en {
  margin-top: 16px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: #333;
}

/* Card variation: Bar Lounge */
.p-topics__card--bar .p-topics__card-overlay {
  align-items: flex-start;
  padding: 19px 0 0 17px;
  text-align: left;
}
.p-topics__card--bar-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 9px;
  color: var(--c-white);
}
.p-topics__card--bar-en {
  margin-top: 36px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--c-white);
}
.p-topics__card--bar-en span { display: block; }

/* ----------------------------------------------------------
   6. Three Ways title (Figma: 97:4039 at (120, 1674))
   ---------------------------------------------------------- */
.p-ways {
  position: relative;
  padding: 110px 0 80px;
}
.p-ways__head {
  width: 1085px;
  height: 108px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 120px;
  box-sizing: border-box;
}
.p-ways__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 64px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-ways__title em {
  font-style: normal;
  color: var(--c-primary);
  font-size: 36px;
}
.p-ways__sub {
  margin-top: 13px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
}

/* Cards (97:4073) — 3 columns at left 120, 700, 1280; each 520 wide */
.p-ways__row {
  position: relative;
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 520px 520px 520px;
  gap: 60px;
  justify-content: space-between;
}
.p-ways__col { position: relative; }
.p-ways__num {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 2px;
}
.p-ways__heading {
  display: inline-block;
  margin-left: 24px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 1.2px;
  vertical-align: 6px;
}
.p-ways__main {
  position: relative;
  margin-top: 24px;
  width: 520px;
  height: 520px;
  border-radius: 6px;
  overflow: hidden;
}
.p-ways__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-ways__script {
  position: absolute;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  color: var(--c-cream);
  letter-spacing: 1.6px;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.p-ways__col--1 .p-ways__script { top: 156px; left: 51px; color: var(--c-text); text-shadow: none; }
.p-ways__col--2 .p-ways__script { top: 105px; left: 290px; color: var(--c-text); text-shadow: none; }
.p-ways__col--3 .p-ways__script { top: 198px; left: 84px; color: var(--c-white); }

.p-ways__lead {
  margin-top: 34px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-ways__col--3 .p-ways__lead { color: var(--c-text-sub); }

.p-ways__sub-imgs {
  display: grid;
  grid-template-columns: 250px 250px;
  gap: 20px;
  margin-top: 37px;
}
.p-ways__sub-img {
  width: 250px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
}
.p-ways__sub-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   7. Instagram strip (97:3783 at (0, 2916.5))
   ---------------------------------------------------------- */
.p-insta {
  position: relative;
  padding: 80px 0 0;
}
.p-insta__head {
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 120px;
  box-sizing: border-box;
}
.p-insta__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 36px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-insta__title svg {
  width: 32px;
  height: 32px;
}
.p-insta__handle {
  margin-left: 12px;
  font-family: var(--font-jp-sans);
  font-size: 14px;
  color: var(--c-text-muted);
  letter-spacing: 0.05em;
}
/* "あなただけの島時間" + 装飾(Figma パス 23294) */
.p-insta__sub-wrap {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}
.p-insta__sub {
  font-family: var(--font-jp-serif);  /* Noto Serif JP */
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 15.4px;
  white-space: nowrap;
}
.p-insta__deco {
  width: 175px;
  height: 84px;
  flex-shrink: 0;
  display: block;
  /* 装飾は section top に揃える(text bottom より約34px上に伸びる) */
  margin-bottom: -32px;
  user-select: none;
  pointer-events: none;
}
/* ===== Instagram Marquee (full-bleed, slow right→left infinite scroll) =====
   - 5枚 originals + 5 clones = 10タイル
   - nth-child(odd)=DOWN(下) / nth-child(even)=UP(上) で Figma の交互配置を再現
   - 各タイル右下に + アイコン(白丸+黒い十字グリフ)*/
.p-insta__marquee {
  width: 100%;
  margin-top: 36px;
  overflow: hidden;
  --tile-w: 280px;
  --tile-gap: 80px;
  --tile-count: 5;          /* originals (clones in HTML are duplicate of these) */
  --marquee-duration: 60s;  /* slow */
  --tile-stagger: 80px;     /* Figma: 297.5 - 217.5 = 80 上下差 */
}
.p-insta__track {
  display: flex;
  gap: var(--tile-gap);
  width: max-content;
  height: calc(var(--tile-w) + var(--tile-stagger));
  animation: insta-marquee var(--marquee-duration) linear infinite;
  align-items: stretch;
}
.p-insta__track:hover { animation-play-state: paused; }
@keyframes insta-marquee {
  to { transform: translateX(calc(-1 * (var(--tile-w) + var(--tile-gap)) * var(--tile-count))); }
}
.p-insta__tile {
  position: relative;
  flex: 0 0 var(--tile-w);
  width: var(--tile-w);
  height: var(--tile-w);
  border-radius: 6px;
  overflow: visible; /* + アイコン を tile外に少しはみ出してOKにする */
  display: block;
  transition: opacity .25s ease;
}
.p-insta__tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
.p-insta__tile:hover { opacity: 0.92; }
/* スタガー: 奇数=下 / 偶数=上 (Figma reproduction) */
.p-insta__tile:nth-child(odd)  { align-self: flex-end; }
.p-insta__tile:nth-child(even) { align-self: flex-start; }

/* + アイコン: 半透明の白丸ボタン + 黒い十字 */
.p-insta__plus {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: block;
  backdrop-filter: blur(2px);
}
.p-insta__plus::before,
.p-insta__plus::after {
  content: '';
  position: absolute;
  background: #222;
  top: 50%;
  left: 50%;
}
.p-insta__plus::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.p-insta__plus::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .p-insta__track { animation: none; }
}

/* ----------------------------------------------------------
   8. Cuisine (97:4059 at (0, 3654)) — left text + right images
   ---------------------------------------------------------- */
.p-cuisine {
  position: relative;
  margin-top: 110px;
  background: transparent;
  padding: 76px 0;
}
/* 灰色bg は擬似要素で描画。Figma 1920: x=0 to x=1860 (left flush, right gutter 60) */
.p-cuisine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 60px;
  bottom: 0;
  background: #f6f6f6;
  z-index: 0;
  pointer-events: none;
}
.p-cuisine__inner {
  position: relative;
  width: 1860px;
  max-width: 100%;
  margin: 0 auto;
  height: 540px;
  z-index: 1;
}
.p-cuisine__vertical {
  position: absolute;
  top: 124px;
  left: 126px;
  width: 27px;
  height: 240px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.p-cuisine__copy {
  position: absolute;
  top: 135px;
  left: 240px;
  width: 540px;
}
.p-cuisine__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-cuisine__lead {
  margin-top: 36px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.p-cuisine__img-main {
  position: absolute;
  top: 50px;
  left: 960px;
  width: 840px;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
}
.p-cuisine__img-main img { width: 100%; height: 100%; object-fit: cover; }

/* Sub-images cluster (97:4058) */
.p-cuisine__cluster {
  position: absolute;
  left: 615px;
  top: 75px;
  width: 309px;
  height: 322px;
  pointer-events: none;
}
.p-cuisine__cluster img { position: absolute; border-radius: 50%; object-fit: cover; }
.p-cuisine__cluster-1 { width: 111px; height: 110px; left: 0;   top: 0;   }
.p-cuisine__cluster-2 { width: 129px; height: 127px; left: 53px; top: 124px; }
.p-cuisine__cluster-3 { width: 152px; height: 171px; left: 209px; top: 151px; }
.p-cuisine__cluster-4 { width: 122px; height: 95px;  left: 156px; top: 368px; }

.p-cuisine__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 245px;
  height: 46px;
  border: 1px solid var(--c-text);
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-text);
  background: var(--c-white);
  transition: all 0.25s ease;
}
.p-cuisine__btn::after {
  content: "→";
  margin-left: 16px;
  font-family: var(--font-en-serif);
}
.p-cuisine__btn:hover { background: var(--c-text); color: var(--c-white); }

/* ----------------------------------------------------------
   9. Landscape (97:4056 at (60, 4386))
   ---------------------------------------------------------- */
.p-landscape {
  position: relative;
  width: 100%;
  padding: 76px 0;
  background: transparent;
}
/* Figma 1920: x=60 to x=1920 (left gutter 60, right flush) */
.p-landscape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  bottom: 0;
  background: #f6f6f6;
  z-index: 0;
  pointer-events: none;
}
.p-landscape__inner {
  position: relative;
  width: 1860px;
  max-width: 100%;
  margin: 0 auto;
  height: 540px;
  z-index: 1;
}
.p-landscape__img {
  position: absolute;
  top: 56px;
  left: 60px;
  width: 840px;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
}
.p-landscape__img img { width: 100%; height: 100%; object-fit: cover; }
.p-landscape__copy {
  position: absolute;
  top: 122px;
  left: 1020px;
  width: 540px;
}
.p-landscape__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.p-landscape__title em {
  font-style: normal;
  font-size: 36px;
  letter-spacing: 0.04em;
}
.p-landscape__lead {
  margin-top: 32px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.p-landscape__btn { /* same as cuisine btn */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 245px;
  height: 46px;
  border: 1px solid var(--c-text);
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-text);
  background: var(--c-white);
}
.p-landscape__btn::after { content: "→"; margin-left: 16px; }
.p-landscape__btn:hover { background: var(--c-text); color: var(--c-white); }
.p-landscape__map {
  position: absolute;
  top: 192px;
  left: 1412px;
  width: 210px;
  height: 160px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
.p-landscape__map img { width: 100%; height: 100%; object-fit: cover; }
.p-landscape__map::after {
  content: "園内マップ";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 17px;
  color: var(--c-white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  background: rgba(0,0,0,0.15);
}
.p-landscape__vertical {
  position: absolute;
  top: 100px;
  right: 60px;
  width: 27px;
  height: 293px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  color: var(--c-text);
}

/* ----------------------------------------------------------
   10. Rooms & Onsen (97:4053 at (60, 5118), card 1800×652)
   ---------------------------------------------------------- */
.p-rooms {
  position: relative;
  padding: 80px 0;
  background: transparent;
}
/* Figma 1920: x=60 to x=1860 (centered with 60 gutters) */
.p-rooms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  right: 60px;
  bottom: 0;
  background: #f6f6f6;
  z-index: 0;
  pointer-events: none;
}
.p-rooms__inner {
  position: relative;
  width: 1800px;
  max-width: calc(100vw - 60px);
  margin: 0 auto;
  height: 652px;
  z-index: 1;
}
.p-rooms__img-l {
  position: absolute;
  top: 56px;
  left: 60px;
  width: 560px;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
}
.p-rooms__img-r {
  position: absolute;
  top: 56px;
  right: 0;
  width: 560px;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
}
.p-rooms__img-l img,
.p-rooms__img-r img { width: 100%; height: 100%; object-fit: cover; }
.p-rooms__copy {
  position: absolute;
  top: 144px;
  left: 645px;
  width: 352px;
  text-align: left;
}
.p-rooms__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.1em;
  text-align: center;
}
.p-rooms__lead {
  margin-top: 28px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.p-rooms__btns {
  margin-top: 48px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.p-rooms__btn {
  width: 164px;
  height: 46px;
  border: 1px solid var(--c-text);
  border-radius: 5px;
  background: var(--c-white);
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  transition: all 0.25s ease;
}
.p-rooms__btn::after { content: "→"; margin-left: 12px; }
.p-rooms__btn:hover { background: var(--c-text); color: var(--c-white); }
.p-rooms__vertical {
  position: absolute;
  top: 131px;
  left: 1031px;
  width: 27px;
  height: 202px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  color: var(--c-text);
}

/* ----------------------------------------------------------
   11. Plan section (97:4033 at (120, 5930))
   ---------------------------------------------------------- */
.p-plan {
  position: relative;
  padding: 120px 0 0;
}
.p-plan__inner {
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  position: relative;
}
.p-plan__head {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.p-plan__title-en {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.p-plan__title-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 24px;
  line-height: 50px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-plan__title-jp em { font-style: normal; color: var(--c-primary); }
.p-plan__nav {
  position: absolute;
  top: 65.5px;
  right: 0;
  width: 140px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-plan__nav button {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.p-plan__nav-counter {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.75px;
  color: var(--c-text);
}

.p-plan__grid {
  margin-top: 145px;
  display: grid;
  grid-template-columns: repeat(4, 380px);
  gap: 53px 53px;
  /* (1680 - 4*380) / 3 = 53.3 — gap between 4 cards in 1680 px row */
}
.p-plan__card { width: 380px; }
.p-plan__card-img {
  width: 380px;
  height: 380px;
  border-radius: 6px;
  overflow: hidden;
}
.p-plan__card-img img { width: 100%; height: 100%; object-fit: cover; }
.p-plan__card-title {
  margin-top: 21px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  color: var(--c-text);
  letter-spacing: 0.05em;
}
.p-plan__card-price-row {
  margin-top: 11px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  position: relative;
}
.p-plan__card-price {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--c-primary);
  letter-spacing: 0.02em;
}
.p-plan__card-cap {
  font-family: var(--font-jp-sans);
  font-size: 13px;
  line-height: 32px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.p-plan__card-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--c-text);
}
.p-plan__card-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-text);
  border-right: 1px solid var(--c-text);
  transform: rotate(45deg);
}

/* Filter row (97:4032 at top 6733, full width 1043) */
.p-plan__filter {
  margin-top: 80px;
  width: 1679px;
  max-width: calc(100vw - 120px);
  margin-left: auto;
  margin-right: auto;
  height: 112px;
  background: rgba(246, 246, 246, 0.98);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 120px;
  box-sizing: border-box;
}
.p-plan__filter-label {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: var(--c-text);
  letter-spacing: 0.05em;
  margin-right: auto;
  padding-left: 195px;
}
.p-plan__filter-btn {
  width: 260px;
  height: 56px;
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.85px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.2s ease;
}
.p-plan__filter-btn::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 10px;
  height: 5px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}
.p-plan__filter-btn--primary {
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  color: var(--c-white);
}
.p-plan__filter-btn--primary:hover { filter: brightness(1.05); }
.p-plan__filter-btn--ghost {
  background: var(--c-white);
  border: 1px solid var(--c-gray-line);
  color: var(--c-text);
}
.p-plan__filter-btn--ghost:hover { background: #fafafa; }

/* ----------------------------------------------------------
   12. Access section (97:3652 at (0, 6937), 1920×804) — bg #fef7e7
   ---------------------------------------------------------- */
.p-access {
  position: relative;
  width: 100%;
  height: 804px;
  background: var(--c-bg-cream);
  margin-top: 80px;
  overflow: hidden;
}
.p-access__inner {
  position: relative;
  width: 1920px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}
.p-access__title-en {
  position: absolute;
  top: 224px;
  left: 120px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.p-access__title-jp {
  position: absolute;
  top: 283px;
  left: 120px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 24px;
  line-height: 50px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-access__title-jp em { font-style: normal; color: var(--c-primary); }
.p-access__lead {
  position: absolute;
  top: 360px;
  left: 120px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-access__btn {
  position: absolute;
  top: 584px;
  left: 120px;
  width: 400px;
  height: 57px;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.85px;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: filter 0.2s ease;
}
.p-access__btn::after {
  content: "→";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.p-access__btn:hover { filter: brightness(1.05); }

.p-access__circle {
  position: absolute;
  width: 182px;
  height: 182px;
  border-radius: 6px;
  overflow: hidden;
}
.p-access__circle img { width: 100%; height: 100%; object-fit: cover; }
.p-access__circle--1 { top: 177px; left: 501px; }
.p-access__circle--2 { top: 177px; left: 703px; }

.p-access__map {
  position: absolute;
  top: 168px;
  left: 673.55px;
  width: 1085.44px;
  height: 472.98px;
}
.p-access__map > img { width: 100%; height: 100%; object-fit: contain; }

.p-access__map-label {
  position: absolute;
  font-family: var(--font-jp-mincho);
  font-weight: 400;
  white-space: nowrap;
}
.p-access__map-label--sea {
  top: 220px; left: 964.6px;
  font-size: 32px; color: var(--c-blue-soft); letter-spacing: 1.6px;
}
.p-access__map-label--shodoshima {
  top: 355px; left: 1459.2px;
  font-size: 32px; color: var(--c-white); letter-spacing: 4.8px;
}
.p-access__map-label--shodoshima::before {
  content: "しょうどしま";
  display: block;
  font-size: 13px; letter-spacing: 5.2px;
  margin-bottom: 4px;
}
.p-access__map-label--teshima {
  top: 426px; left: 977px;
  font-size: 22px; color: var(--c-white); letter-spacing: 1.1px;
}
.p-access__map-label--naoshima {
  top: 501px; left: 748.5px;
  font-size: 20px; color: var(--c-white); letter-spacing: 1px;
}

.p-access__port {
  position: absolute;
  font-family: var(--font-jp-sans);
  font-size: 16px; line-height: 20px;
  color: var(--c-blue);
  white-space: nowrap;
}
.p-access__port--fukuda { top: 229px; left: 1731.83px; }
.p-access__port--tonosho { top: 391px; left: 1289.83px; }
.p-access__port--ikeda { top: 432px; left: 1412.83px; }
.p-access__port--sakate { top: 496px; left: 1622.83px; }

/* Hotel marker pin */
.p-access__pin {
  position: absolute;
  top: 309px; left: 1378px;
  font-size: 28px; color: var(--c-primary);
}

/* SP-only wrapper — on PC it must not affect layout; children are absolute */
.p-access__circles-row { display: contents; }
.l-footer__subnav { display: none; }

/* ----------------------------------------------------------
   13. News strip (97:3542 at (120, 7861) — 1680×436)
   ---------------------------------------------------------- */
.p-news {
  padding: 80px 0;
}
.p-news__inner {
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 60px;
}
.p-news__list-head {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 20px;
  color: var(--c-text);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-news__list-head::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--c-primary);
  border-radius: 2px;
}
.p-news__list { border-top: 1px solid #ddd; }
.p-news__item {
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: start;
}
.p-news__date {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.p-news__title {
  font-family: var(--font-jp-sans);
  font-size: 14px;
  line-height: 22px;
  color: var(--c-text);
}
.p-news__more {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 42px;
  border: 1px solid var(--c-text);
  border-radius: 4px;
  font-family: var(--font-jp-mincho);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-white);
  transition: all 0.2s ease;
}
.p-news__more::after { content: "→"; margin-left: 10px; }
.p-news__more:hover { background: var(--c-text); color: var(--c-white); }
.p-news__banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-news__banner {
  position: relative;
  aspect-ratio: 280 / 168;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}
.p-news__banner img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------
   14. Footer hero (97:4017 at (0, 8417), 1920×654)
   ---------------------------------------------------------- */
.p-footerHero {
  position: relative;
  width: 100%;
  height: 654px;
  overflow: hidden;
  /* clip-path で fixed子要素を境界内に閉じ込める */
  clip-path: inset(0);
}
/* 背景画像はviewportに固定 — テキストはその上をスクロール */
.p-footerHero img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}
.p-footerHero__copy {
  position: absolute;
  top: 262px;
  right: calc((100% - 1860px) / 2 + 160px);
  width: 508px;
  color: var(--c-cream);
  z-index: 2; /* fixed bg(z:0) より上 */
}
.p-footerHero__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 32px;
  line-height: 46px;
  letter-spacing: 0.3em;
  color: var(--c-cream);
}
.p-footerHero__title span { display: block; }
.p-footerHero__title-en {
  margin-top: 18px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------
   15. Footer (97:3734 at (0, 9071), 1920×657)
   ---------------------------------------------------------- */
.l-footer {
  position: relative;
  background: var(--c-white);
  padding: 72px 0 0;
  height: 657px;
  box-sizing: border-box;
}
.l-footer__inner {
  position: relative;
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  height: 505px;
}
.l-footer__lede {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__logo {
  margin-top: 24px;
  width: 443px;
  height: 113px;
}
.l-footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.l-footer__name {
  margin-top: 32px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__addr {
  margin-top: 8px;
  font-family: var(--font-jp-sans);
  font-size: 16px;
  line-height: 28px;
  color: var(--c-text);
}
.l-footer__addr p { line-height: 1.7; }

.l-footer__kasai {
  position: absolute;
  left: 0;
  top: 293px;
  width: 220px;
  text-align: center;
  border: 1px solid var(--c-gray-line-3);
  padding: 26px 0;
  background: var(--c-white);
}
.l-footer__kasai img { display: inline-block; margin: 0 auto; height: 55px; }
.l-footer__kasai-text {
  margin-top: 20px;
  font-family: var(--font-jp-sans);
  font-size: 14px;
  color: var(--c-black);
  line-height: 30px;
}
.l-footer__sns {
  position: absolute;
  top: 8px;
  left: 614px;
  display: flex;
  gap: 24px;
}
.l-footer__sns img { width: 32px; height: 32px; }
.l-footer__nav {
  position: absolute;
  top: 94px;
  left: 614px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.05em;
  color: var(--c-text);
  white-space: nowrap;
}
.l-footer__cta-title {
  position: absolute;
  top: 163px;
  left: 614px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__cta-row {
  position: absolute;
  top: 214px;
  left: 614px;
  display: flex;
  gap: 24px;
}
.l-footer__cta-btn {
  width: 220px;
  height: 56px;
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.85px;
  color: var(--c-white);
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.2s ease;
}
.l-footer__cta-btn::after {
  content: "→";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.l-footer__cta-btn--ghost {
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-gray-line-2);
}
.l-footer__cta-btn:hover { filter: brightness(1.05); }
.l-footer__sublinks {
  position: absolute;
  top: 299px;
  left: 614px;
  display: flex;
  gap: 24px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.75px;
  color: var(--c-text);
}
.l-footer__sublinks a { text-decoration: underline; }
.l-footer__copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  color: var(--c-white);
  letter-spacing: 0.05em;
}

/* ==========================================================
   B. Tablet 1024–1680 — based on Figma node 97:4086 (01_index_1440px)
   フレーム1440×9728。値はすべてFigmaから直接取得。
   ガター90px(content 1260)、ヘッダー1440幅
   ========================================================== */
@media (max-width: 1680px) and (min-width: 1024px) {
  :root {
    --inner-pad: 90px;        /* 1440設計のガター */
    --inner-max: 1260px;      /* content area = 1440 - 2*90 */
    --frame-w: 1440px;
  }

  /* CUISINE / EXPLORE / ROOMS: 1440設計では全て full bleed (Figma 97:5006/97:5002/97:4998) */
  .p-cuisine::before,
  .p-landscape::before,
  .p-rooms::before {
    left: 0 !important;
    right: 0 !important;
  }

  .l-inner {
    max-width: 1260px;
    padding: 0 0;
    width: calc(100vw - 180px);
  }

  /* --- Header (97:4940) - 1440×100 --- */
  .l-header__inner {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
  }
  .l-header__logo { left: 0; width: 325px; height: 83px; }
  .l-header__nav { left: 385px; top: 41px; }
  .l-header__nav-list { gap: 24px; }
  .l-header__nav-list li a { font-size: 16px; }

  .l-header__cta {
    left: 977px; top: 32px;
    width: 110px; height: 40px;
    font-size: 17px; letter-spacing: 1.36px;
  }
  .l-header__burger {
    left: 1111px; top: 32px;
    width: 40px; height: 40px;
  }
  .l-header__lang {
    left: 1175px; top: 33.375px;
    gap: 6px;
  }
  .l-header__lang-icon { width: 20px; height: 20px; }
  .l-header__lang-text { font-size: 16px; line-height: 16px; }
  .l-header__lang::after {
    right: -3px; top: 27px;
    height: 35px;
  }
  .l-header__tel {
    left: 1242.45px; top: 20px;
    width: 166px; text-align: center;
  }
  .l-header__tel-num { font-size: 32px; line-height: 36px; }
  .l-header__tel-hours { font-size: 14px; }

  /* --- Hero (97:4925) - text at (130, 412) --- */
  .p-hero { height: 1000px; }
  .p-hero__copy {
    left: 130px; top: 412px;
    width: 571px;
  }
  .p-hero__title {
    font-size: 36px; letter-spacing: 12.6px;
  }
  .p-hero__title-en {
    font-size: 28px; letter-spacing: 1.4px;
  }
  .p-hero__lead { width: 394px; }

  /* Counter (97:4953) at (185.31, 932) - "1/3" since 3 visible at 1440 */
  .p-hero__counter { left: 185px; bottom: 0; }

  /* --- Notice (97:4924) - 840×60 at (600, 940) --- */
  .p-notice__inner {
    width: 840px;
    margin-right: calc((100vw - 1440px) / 2);
  }
  /* For viewport between 1024 and 1440, fallback */
  @media (max-width: 1440px) {
    .p-notice__inner { margin-right: 0; }
  }

  /* --- Sunset Service + Topics (97:4624 'コンポーネント 185 – 3') 1800×368 at (90,1120) --- */
  .p-topics__inner {
    width: 1800px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: max(90px, calc((100vw - 1800px) / 2 + 90px));
    box-sizing: border-box;
  }

  /* --- Three Ways title (97:4926) at (90, 1676) --- */
  .p-ways__head {
    width: 1085px;
    padding: 0 0 0 90px;
    height: 108px;
  }
  .p-ways__title {
    font-size: 32px; line-height: 64px;
  }
  .p-ways__sub { font-size: 24px; }

  /* --- 3 Ways content - 3 cols at (90/520/950) each 400 wide --- */
  .p-ways__row {
    width: 1260px;
    max-width: calc(100vw - 180px);
    margin: 60px auto 0;
    padding: 0;
    grid-template-columns: 400px 400px 400px;
    gap: 30px;
    justify-content: space-between;
  }
  .p-ways__num { font-size: 40px; }     /* same as 1920 */
  .p-ways__heading { font-size: 24px; margin-left: 19px; }
  .p-ways__main {
    width: 400px;
    height: 520px;
  }
  .p-ways__sub-imgs {
    grid-template-columns: 190px 190px;
    gap: 20px;
    margin-top: 37px;
  }
  .p-ways__sub-img { width: 190px; height: 150px; }

  .p-ways__col--1 .p-ways__script { top: 156px; left: 30px; }
  .p-ways__col--2 .p-ways__script { top: 105px; left: 200px; }
  .p-ways__col--3 .p-ways__script { top: 198px; left: 60px; }

  .p-ways__lead { font-size: 16px; line-height: 30px; }

  /* --- Instagram (97:4995) - 2960 wide overflow scroll, cards 280×280 alternate --- */
  .p-insta__head {
    width: 1260px;
    max-width: calc(100vw - 180px);
    padding: 0 0 0 90px;
  }
  .p-insta__tiles {
    width: 100%;
    max-width: none;
    padding: 0 0 0 90px;
    height: 360px;
  }
  .p-insta__tile { width: 280px; height: 280px; }
  /* Alternating top positions: even cards at top 0, odd at top 80 (or vice versa) */
  .p-insta__tile:nth-child(1) { left: 0;     top: 80px; }
  .p-insta__tile:nth-child(2) { left: 360px; top: 0;    }
  .p-insta__tile:nth-child(3) { left: 720px; top: 80px; }
  .p-insta__tile:nth-child(4) { left: 1080px; top: 0;    }
  .p-insta__tile:nth-child(5) { left: 1440px; top: 80px; }

  /* --- Cuisine (97:5006) - 1440 full bleed - image 680×540 at (760, 3704) --- */
  .p-cuisine__inner {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    height: 652px;
  }
  .p-cuisine__vertical { left: 50px; top: 124px; }
  .p-cuisine__copy { left: 120px; top: 135px; width: 540px; }
  .p-cuisine__title { font-size: 32px; line-height: 46px; }
  .p-cuisine__lead { font-size: 16px; line-height: 30px; }
  .p-cuisine__cluster {
    left: 451.73px; top: 82px;
    width: 281px; height: 292px;
  }
  .p-cuisine__cluster-1 { width: 102px; height: 100px; left: 0; top: 0; }
  .p-cuisine__cluster-2 { width: 118px; height: 116px; left: 49px; top: 113px; }
  .p-cuisine__cluster-3 { width: 138px; height: 155px; left: 191px; top: 137px; }
  .p-cuisine__cluster-4 { width: 120px; height: 84px; left: 134px; top: 432px; }
  .p-cuisine__img-main {
    left: 760px; top: 50px;
    width: 680px; height: 540px;
  }

  /* --- Landscape (97:5002) - 1860 wide overflow - image 680×540 at (0, 4442) --- */
  .p-landscape__inner {
    width: 100%;
    max-width: 1860px;
    margin: 0 auto;
    height: 652px;
  }
  .p-landscape__img {
    left: 0; top: 56px;
    width: 680px; height: 540px;
  }
  .p-landscape__copy {
    left: 760px; top: 121px;
    width: 540px;
  }
  .p-landscape__title { font-size: 32px; line-height: 46px; }
  .p-landscape__title em { font-size: 36px; }
  .p-landscape__lead { font-size: 16px; line-height: 30px; }
  .p-landscape__map {
    left: 1638.15px; top: 159.95px;
    width: 200px; height: 142px;
  }
  .p-landscape__map::after { font-size: 17px; }
  .p-landscape__vertical {
    right: auto; left: 1356px; top: 100px;
    height: 293px;
  }

  /* --- Rooms & Onsen (97:4998) - 1440 full bleed - 470×540 + 470×540 --- */
  .p-rooms__inner {
    width: 1440px;
    max-width: 100%;
    height: 652px;
  }
  .p-rooms__img-l {
    left: 0; top: 56px;
    width: 470px; height: 540px;
  }
  .p-rooms__img-r {
    right: auto; left: 970px; top: 56px;
    width: 470px; height: 540px;
  }
  .p-rooms__copy {
    left: 534px; top: 144px;
    width: 352px;
  }
  .p-rooms__title { font-size: 32px; line-height: 46px; }
  .p-rooms__lead { font-size: 16px; line-height: 30px; }
  .p-rooms__btns { gap: 12px; }
  .p-rooms__btn { width: 164px; height: 46px; }
  .p-rooms__vertical {
    left: 902px; top: 131px;
    height: 202px;
  }

  /* --- Plan (97:5017) - 1261 wide at (90, 5930), 4 cards but only 3 visible --- */
  .p-plan__inner {
    width: 1260px;
    max-width: calc(100vw - 180px);
  }
  .p-plan__title-en { font-size: 80px; }
  .p-plan__title-jp { font-size: 24px; line-height: 50px; }
  .p-plan__nav { right: 0; top: 65.5px; }

  .p-plan__grid {
    margin-top: 145px;
    grid-template-columns: 380px 380px 380px;
    gap: 53px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  /* Allow 4th card to overflow horizontally */
  .p-plan__grid > .p-plan__card:nth-child(4) {
    grid-column: 4;
  }
  .p-plan__grid { grid-template-columns: repeat(4, 380px); }

  .p-plan__card,
  .p-plan__card-img {
    width: 380px;
  }
  .p-plan__card-img { height: 380px; }

  .p-plan__filter {
    width: 1260px;
    max-width: calc(100vw - 180px);
    height: 112px;
    padding: 0 109px;
  }
  .p-plan__filter-label { padding-left: 0; font-size: 20px; }
  .p-plan__filter-btn { width: 260px; height: 56px; font-size: 17px; }

  /* --- Access (97:4453+97:5036) - bg 1440×804 at (0,6937), content at (90, 7161) --- */
  .p-access {
    width: 100%;
    height: 804px;
  }
  .p-access__inner {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .p-access__title-en {
    left: 90px; top: 224px;
    font-size: 80px;
  }
  .p-access__title-jp {
    left: 90px; top: 283px;
    font-size: 24px; line-height: 50px;
  }
  .p-access__lead {
    left: 90px; top: 360px;
    font-size: 16px; line-height: 30px;
  }
  .p-access__btn {
    left: 90px; top: 584px;
    width: 400px; height: 57px;
  }

  /* Circles 143×143 at (432/591, 7062 = 125 from access top) */
  .p-access__circle { width: 143px; height: 143px; }
  .p-access__circle--1 { left: 432px; top: 125px; }
  .p-access__circle--2 { left: 591px; top: 125px; }

  /* Map 1085×473 at (264.55, 7105 = 168 from access top) */
  .p-access__map {
    left: 264.55px; top: 168px;
    width: 1085.44px; height: 472.98px;
  }

  /* Map labels reposition for 1440 */
  .p-access__map-label--sea { top: 125px; left: 728.05px; font-size: 32px; }
  .p-access__map-label--shodoshima { top: 328px; left: 786px; font-size: 32px; }
  .p-access__map-label--teshima { top: 426px; left: 300.5px; font-size: 22px; }
  .p-access__map-label--naoshima { top: 504px; left: 77.5px; font-size: 20px; }
  .p-access__port--fukuda { top: 225px; left: 1054.83px; }
  .p-access__port--tonosho { top: 387px; left: 612.83px; }
  .p-access__port--ikeda { top: 428px; left: 735.83px; }
  .p-access__port--sakate { top: 491px; left: 945.83px; }
  .p-access__pin { top: 305px; left: 745px; }

  /* --- News (97:4775) - 1260 at (90, 7861) --- */
  .p-news__inner {
    width: 1260px;
    max-width: calc(100vw - 180px);
    grid-template-columns: 380px 1fr;
    gap: 40px;
  }

  /* --- Footer hero (97:4087) 1440×654 --- */
  .p-footerHero__copy {
    right: calc((100vw - 1440px) / 2 + 156px);
    width: 508px;
  }
  @media (max-width: 1440px) {
    .p-footerHero__copy { right: 156px; }
  }

  /* --- Footer (97:4845) コンポーネント 188 – 3 - 1440×657 --- */
  .l-footer__inner {
    width: 1260px;
    max-width: calc(100vw - 180px);
  }
}

/* ==========================================================
   C. SP — based on Figma node 97:5045 (sp_index)
   フレーム390×9384。値はすべてFigmaから直接取得。
   ========================================================== */
@media (max-width: 1023px) {
  :root {
    --inner-pad: 25px;
    --inner-max: 100vw;
  }

  /* CUISINE / EXPLORE / ROOMS: SP も full bleed */
  .p-cuisine::before,
  .p-landscape::before,
  .p-rooms::before {
    left: 0 !important;
    right: 0 !important;
  }

  .u-pc { display: none !important; }
  .u-sp { display: block; }

  body {
    /* Push body down to clear bottom CTA bar */
    padding-bottom: 56px;
  }

  /* --- Header (97:5045 top) - 56×390, logo 220×56, MENU 56×56 --- */
  .l-header { position: fixed; top: 0; }
  .l-header__inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 56px;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: var(--c-white);
  }
  .l-header__logo {
    left: 0; top: 0;
    transform: none;
    width: 220px; height: 56px;
  }
  .l-header__logo img {
    object-fit: contain;
    object-position: 12px center;
    padding: 4px 0;
  }
  .l-header__nav { display: none; }
  .l-header__cta { display: none; }
  .l-header__tel { display: none; }

  /* LANG block at (290.37, 10.375), text only */
  .l-header__lang {
    left: 290px; top: 10px;
    flex-direction: column;
    gap: 2px;
    align-items: center;
  }
  .l-header__lang-icon { width: 20px; height: 20px; }
  .l-header__lang-text { font-size: 11px; line-height: 1; }
  .l-header__lang::after { display: none; }

  /* Burger/MENU at (334, 0), 56×56 */
  .l-header__burger {
    left: 334px; top: 0;
    width: 56px; height: 56px;
    background: var(--c-bg-soft);
    border-radius: 0;
    flex-direction: column;
    gap: 0;
    padding-bottom: 6px;
  }
  .l-header__burger span {
    background: var(--c-text);
    width: 22px;
    margin-bottom: 4px;
  }
  .l-header__burger::after {
    content: "MENU";
    font-family: var(--font-jp-sans);
    font-size: 10px;
    color: var(--c-text);
    margin-top: 8px;
    letter-spacing: 0.05em;
  }

  /* --- Hero (97:5046) - 390×700, text at (37, 374) --- */
  .p-hero { height: 700px; padding-top: 56px; box-sizing: border-box; }
  .p-hero__slider, .p-hero__slide { height: 700px; }

  /* Hero text (97:5842) - 3 lines at 26px ls 9.1px */
  .p-hero__copy {
    left: 37px; top: 374px;
    width: 316px;
  }
  .p-hero__title {
    font-size: 26px;
    letter-spacing: 9.1px;
    line-height: 1.7;
    white-space: normal;
  }
  /* SP title needs 3 lines: 小豆島・/夕陽の特等席で、/心が満ちる島時間。 */
  .p-hero__title span:first-child {
    /* split first line "小豆島・" */
    display: inline-block;
  }
  .p-hero__title-en {
    margin-top: 22px;
    font-size: 16px;
    letter-spacing: 0.8px;
    white-space: normal;
  }
  .p-hero__lead {
    margin-top: 22px;
    width: 315px;
    font-size: 15px;
    line-height: 25px;
  }

  /* Side menu hidden on SP (bottom CTA bar takes over) */
  .l-sidemenu { display: none; }

  /* Counter (97:5849) at (92.74, 617) "1/3" */
  .p-hero__counter {
    left: 92px; bottom: auto; top: 617px;
    width: 276px; height: 77px;
  }
  .p-hero__counter-num { color: var(--c-cream); }

  /* --- Bottom CTA bar (97:5997) - fixed 390×56 - お電話/日程/プラン --- */
  .p-spcta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    display: flex;
    z-index: 99;
  }
  .p-spcta__btn {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: var(--c-white);
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.75px;
  }
  .p-spcta__btn--tel {
    flex: 0 0 80px;
    width: 80px;
    background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
    font-family: var(--font-jp-sans);
    font-size: 11px;
    letter-spacing: 0.55px;
    line-height: 22px;
  }
  .p-spcta__btn--tel svg { width: 20px; height: 27px; }
  .p-spcta__btn--date {
    flex: 1;
    background: linear-gradient(to bottom, #2a88b2, #48a0c8);
  }
  .p-spcta__btn--plan {
    flex: 1;
    background: linear-gradient(to bottom, #3b69ac, #5486d1);
  }

  /* --- Notice (97:5846) - 358×127 at (16, 685) - 2 line layout --- */
  .p-notice { margin-top: -15px; }
  .p-notice__inner {
    width: calc(100% - 32px);
    margin: 0 16px;
    height: 127px;
    padding: 22px 22px 22px 36px;
    flex-wrap: wrap;
    border-radius: 12px 12px 0 0;
    align-content: flex-start;
  }
  .p-notice__icon {
    position: absolute; left: 22px; top: 18px;
    width: 28.87px; height: 29.33px;
  }
  .p-notice__label {
    margin-left: 36px; margin-right: 0;
    font-size: 16px; flex-basis: calc(100% - 50px);
  }
  .p-notice__date {
    margin-top: 18px; margin-right: 12px;
    font-size: 18px; flex-basis: 80px;
  }
  .p-notice__text {
    margin-top: 0;
    font-size: 16px;
    flex-basis: calc(100% - 100px);
    white-space: normal;
  }
  .p-notice__arrow { right: 12px; bottom: 16px; top: auto; transform: none; }

  /* --- Sunset Service card (97:5853) - 358×272 at (16, 844) --- */
  .p-topics { padding-top: 0; }
  .p-topics__inner {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .p-sunset {
    position: relative; top: auto; left: auto;
    width: calc(100% - 32px);
    height: auto;
    margin: 0 16px;
    border-radius: 6px;
  }
  .p-sunset__head {
    height: 76px;
    padding: 14px 25.75px;
  }
  .p-sunset__head-jp { font-size: 18px; line-height: 24px; }
  .p-sunset__head-en { font-size: 12px; line-height: 24px; margin-top: 4px; }
  .p-sunset__body { padding: 24px 24px; }
  .p-sunset__time-row {
    gap: 16px;
    margin-top: 0;
    align-items: center;
  }
  .p-sunset__time-label {
    font-size: 16px; line-height: 20px;
    width: 100px;
  }
  .p-sunset__time { font-size: 56px; line-height: 1; letter-spacing: 2.8px; }
  .p-sunset__lead {
    margin-top: 18px;
    font-size: 13px; line-height: 22px;
  }

  /* --- Topics (97:5990) - 798 wide at (25,1161), cards 250×206 --- */
  .p-topics__head {
    position: relative;
    top: auto; left: auto;
    margin: 50px 0 0;
    padding: 0 25px;
    align-items: baseline;
    gap: 12px;
  }
  .p-topics__title-en { font-size: 36px; line-height: 1; }
  .p-topics__title-jp { font-size: 18px; }
  .p-topics__nav {
    position: relative;
    top: auto; right: auto;
    margin: 30px auto 0;
    padding: 0 25px;
    justify-content: center;
  }
  .p-topics__rail {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    margin: 16px 0 0;
    padding: 0 25px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 24px;
    scrollbar-width: none;
  }
  .p-topics__rail::-webkit-scrollbar { display: none; }
  .p-topics__card { flex: 0 0 250px; width: 250px; height: 206px; }
  .p-topics__card--star .p-topics__card-jp .lg { font-size: 22px; }
  .p-topics__card--star .p-topics__card-jp .sm { font-size: 16px; }
  .p-topics__card--raku-main { font-size: 28px; }
  .p-topics__card--bar-en { font-size: 56px; }

  /* --- Three Ways title (97:5968) - 305×132 at (25, 1533) - 3 lines --- */
  .p-ways { padding: 60px 0 40px; }
  .p-ways__head {
    width: 100%;
    padding: 0 25px;
    height: auto;
  }
  .p-ways__title {
    font-size: 24px; line-height: 36px;
    letter-spacing: 0.05em;
  }
  .p-ways__title em { font-size: 28px; }
  .p-ways__sub {
    margin-top: 28px;
    font-size: 16px;
  }

  /* --- 3 Ways content (97:5978) - HORIZONTAL SCROLL, 3 cards 340 each --- */
  .p-ways__row {
    display: flex;
    width: 100%;
    margin: 32px 0 0;
    padding: 0 25px;
    grid-template-columns: none;
    gap: 60px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p-ways__row::-webkit-scrollbar { display: none; }
  .p-ways__col {
    flex: 0 0 340px;
    width: 340px;
  }
  .p-ways__num { font-size: 32px; }
  .p-ways__heading { font-size: 20px; margin-left: 18px; }
  .p-ways__main {
    width: 340px; height: 260px;
    margin-top: 16px;
  }
  .p-ways__lead {
    margin-top: 24px;
    width: 100%;
    font-size: 14px; line-height: 26px;
  }
  .p-ways__col--3 .p-ways__lead { color: var(--c-text-sub); }
  .p-ways__col--1 .p-ways__lead { width: 321px; }

  .p-ways__sub-imgs {
    grid-template-columns: 165px 165px;
    gap: 10px;
    margin-top: 23px;
  }
  .p-ways__sub-img { width: 165px; height: 100px; }

  .p-ways__col--1 .p-ways__script { top: 40px; left: 35px; font-size: 24px; color: var(--c-cream); text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .p-ways__col--2 .p-ways__script { top: 65px; left: 184px; font-size: 24px; color: var(--c-cream); text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .p-ways__col--3 .p-ways__script { top: 116px; left: 42px; font-size: 24px; color: var(--c-white); }

  /* --- Instagram (97:5967) - title at (25, 2322), 1776 wide overflow scroll --- */
  .p-insta { padding: 60px 0 0; }
  .p-insta__head {
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    padding: 0 25px;
    gap: 12px;
  }
  .p-insta__title { font-size: 28px; }
  .p-insta__title svg { width: 20px; height: 20px; }
  .p-insta__handle { font-size: 11px; margin-left: 4px; }
  .p-insta__sub {
    flex-basis: 100%;
    margin-top: 23px;
    font-size: 16px;
    letter-spacing: 0.2em;
  }

  .p-insta__tiles {
    width: 100%;
    height: 200px;
    margin-top: 24px;
    padding: 0 25px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p-insta__tiles::-webkit-scrollbar { display: none; }
  .p-insta__tile {
    position: relative;
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    left: auto !important;
    top: auto !important;
    aspect-ratio: 1;
  }

  /* --- Cuisine (97:5948) - 390×668 full bleed at (-22, 2787) --- */
  .p-cuisine { padding: 0; margin-top: 60px; }
  .p-cuisine__inner {
    width: 100%;
    height: auto;
    padding: 0;
    background: var(--c-white);
  }
  .p-cuisine__vertical {
    position: absolute;
    top: 270px; left: 0;
    width: 22px; height: 197px;
    font-size: 14px;
  }
  /* Image at (0, 2787 = 0 from top) */
  .p-cuisine__img-main {
    position: relative;
    top: auto; left: auto;
    width: 100%; height: 251px;
    margin: 0;
    border-radius: 0;
  }
  .p-cuisine__copy {
    position: relative;
    top: auto; left: auto;
    width: calc(100% - 90px);
    margin: 30px 0 0 45px;
  }
  .p-cuisine__title { font-size: 22px; line-height: 32px; }
  .p-cuisine__lead {
    margin-top: 32px;
    font-size: 13px; line-height: 26px;
  }
  .p-cuisine__btn {
    width: 199px; height: 46px;
    margin-top: 32px;
  }
  .p-cuisine__cluster {
    position: absolute;
    left: auto; right: 25px;
    top: 220px;
    width: 95px; height: 71px;
  }
  .p-cuisine__cluster img { border-radius: 4px; }
  .p-cuisine__cluster-1 { width: 72px; height: 71px; left: 0; top: 0; }
  .p-cuisine__cluster-2,
  .p-cuisine__cluster-3 { display: none; }
  .p-cuisine__cluster-4 {
    width: 94px; height: 65px;
    left: -200px; top: 350px;
    border-radius: 4px;
  }

  /* --- Landscape (97:5944) - 390×760 at (-22, 3479) --- */
  .p-landscape { padding: 0; }
  .p-landscape__inner {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .p-landscape__img {
    position: relative;
    top: auto; left: auto;
    width: 100%; height: 251px;
    border-radius: 0;
  }
  .p-landscape__copy {
    position: relative;
    top: auto; left: auto;
    width: calc(100% - 90px);
    margin: 24px 0 0 45px;
  }
  .p-landscape__title { font-size: 22px; line-height: 32px; }
  .p-landscape__title em { font-size: 24px; }
  .p-landscape__lead {
    margin-top: 32px;
    font-size: 13px; line-height: 26px;
  }
  .p-landscape__btn {
    width: 220px; height: 46px;
    margin-top: 32px;
  }
  .p-landscape__map {
    position: absolute;
    top: 580px; right: -200px; left: auto;
    width: 104px; height: 74px;
  }
  .p-landscape__vertical {
    right: auto; left: 0;
    top: 270px;
    width: 22px; height: 239px;
    font-size: 14px;
  }

  /* --- Rooms & Onsen (97:5940) - 390×630 at (-22, 4263) --- */
  .p-rooms { padding: 0; }
  .p-rooms__inner {
    width: 100%;
    height: auto;
    padding: 0 0 32px;
    background: #f3f3f1;
    border-radius: 0;
  }
  .p-rooms__img-l {
    position: relative;
    top: auto; left: auto;
    width: 100%; height: 251px;
    border-radius: 0;
  }
  .p-rooms__copy {
    position: relative;
    top: auto; left: auto;
    width: calc(100% - 100px);
    margin: 32px auto 0;
    text-align: left;
  }
  .p-rooms__title {
    font-size: 22px; line-height: 32px;
    text-align: left;
  }
  .p-rooms__lead {
    margin-top: 16px;
    font-size: 13px; line-height: 26px;
  }
  .p-rooms__btns {
    margin-top: 24px;
    gap: 12px;
    justify-content: flex-start;
  }
  .p-rooms__btn { width: 140px; height: 46px; font-size: 13px; }
  .p-rooms__vertical {
    left: 0; top: 270px;
    width: 22px; height: 165px;
    font-size: 14px;
  }
  .p-rooms__img-r {
    position: relative;
    right: auto; top: auto; left: auto;
    width: 100%; height: 251px;
    margin-top: 32px;
    border-radius: 0;
  }

  /* --- Plan (97:5937) - HORIZONTAL SCROLL, 4 cards 260×470 each at (25, 5313) --- */
  .p-plan { padding: 60px 0 0; }
  .p-plan__inner {
    width: 100%;
    padding: 0 25px;
  }
  .p-plan__head {
    flex-direction: column;
    gap: 8px;
  }
  .p-plan__title-en { font-size: 56px; }
  .p-plan__title-jp { font-size: 18px; line-height: 36px; }
  .p-plan__nav {
    position: relative;
    top: auto; right: auto;
    margin: 16px auto 0;
    width: 140px;
  }

  .p-plan__grid {
    display: flex;
    margin-top: 32px;
    grid-template-columns: none;
    gap: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 25px;
  }
  .p-plan__grid::-webkit-scrollbar { display: none; }
  .p-plan__card {
    flex: 0 0 260px;
    width: 260px;
  }
  .p-plan__card-img {
    width: 260px; height: 260px;
  }
  .p-plan__card-title {
    margin-top: 16px;
    font-size: 14px; line-height: 24px;
  }
  .p-plan__card-price {
    font-size: 20px;
  }
  .p-plan__card-cap {
    font-size: 11px;
  }
  .p-plan__card-price-row {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* Filter (97:5936) - 340×282 vertical stacked buttons */
  .p-plan__filter {
    width: calc(100% - 50px);
    height: auto;
    margin: 32px auto 0;
    padding: 21px 30px 30px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .p-plan__filter-label {
    padding-left: 0; margin: 0 0 8px;
    font-size: 17px;
    text-align: left;
  }
  .p-plan__filter-btn {
    width: 100%; height: 56px;
  }

  /* --- Access (97:5922) - 390×821 at (0, 6196) --- */
  .p-access {
    height: auto;
    margin-top: 0;
    padding: 0;
    background: var(--c-bg-cream);
  }
  .p-access__inner {
    width: 100%;
    height: auto;
    padding: 0;
  }

  /* Two circles 88×88 above bg, at (179/277, 6196) = top -44 from bg start */
  .p-access__circles-row {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 2;
    margin: 60px 0 0 179px;
  }
  .p-access__circle {
    position: relative;
    top: auto; left: auto;
    width: 88px; height: 88px;
  }

  .p-access__title-en, .p-access__title-jp,
  .p-access__lead, .p-access__btn {
    position: relative;
    top: auto; left: auto;
  }
  .p-access__title-en {
    margin: 60px 0 0 25px;
    font-size: 56px;
  }
  .p-access__title-jp {
    margin: 8px 0 0 25px;
    font-size: 20px; line-height: 36px;
  }
  .p-access__lead {
    margin: 28px 25px 0;
    font-size: 13px; line-height: 26px;
  }
  .p-access__btn {
    margin: 32px auto 0;
    display: flex;
    width: calc(100% - 50px);
    max-width: 340px;
    height: 57px;
  }

  .p-access__map {
    position: relative;
    top: auto; left: auto;
    width: 100%; height: 239px;
    margin-top: 32px;
    overflow: hidden;
  }
  .p-access__map > img {
    position: absolute;
    left: -200px; top: 0;
    width: 600px;
    height: auto;
  }
  /* Map labels and ports — show only major ones on SP */
  .p-access__map-label--sea { top: 50px; left: 30px; font-size: 13px; }
  .p-access__map-label--shodoshima { top: 100px; left: 220px; font-size: 16px; }
  .p-access__map-label--shodoshima::before { font-size: 8px; }
  .p-access__map-label--teshima { top: 145px; left: 0; font-size: 12px; }
  .p-access__map-label--naoshima { display: none; }
  .p-access__port { font-size: 8px; }
  .p-access__port--fukuda { top: 75px; left: 320px; }
  .p-access__port--tonosho { top: 145px; left: 145px; }
  .p-access__port--ikeda { top: 175px; left: 200px; }
  .p-access__port--sakate { top: 195px; left: 300px; }
  .p-access__pin { display: none; }

  /* --- News (97:5892) - 340×411 at (25, 7051) --- */
  .p-news { padding: 60px 0 0; }
  .p-news__inner {
    width: 100%;
    padding: 0 25px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-news__list-head {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .p-news__item {
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .p-news__date { font-size: 13px; }
  .p-news__title { font-size: 13px; line-height: 26px; }
  .p-news__more { width: 199px; height: 46px; font-size: 14px; margin-top: 24px; }

  /* Banner strip (97:5884) - 4 banners 160×73 horizontal scroll */
  .p-news__banners {
    grid-template-columns: none;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .p-news__banners::-webkit-scrollbar { display: none; }
  .p-news__banner {
    flex: 0 0 160px;
    width: 160px;
    aspect-ratio: 160 / 73;
    border-radius: 4px;
  }

  /* --- Footer hero (97:5879) - 390×440 at (0, 7745) --- */
  .p-footerHero { height: 440px; }
  .p-footerHero__copy {
    top: 177px; right: auto; left: 45px;
    width: 321px;
  }
  .p-footerHero__title {
    font-size: 22px; line-height: 32px;
    letter-spacing: 0.3em;
  }
  .p-footerHero__title-en {
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  /* --- Footer (97:5876) - 390×1199 --- */
  .l-footer { padding: 38px 0 0; height: auto; }
  .l-footer__inner {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .l-footer__lede {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px; line-height: 28px;
    letter-spacing: 0.08em;
  }
  .l-footer__logo {
    margin: 28px auto 0;
    width: 340px; height: 87px;
    text-align: center;
  }
  .l-footer__logo img {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .l-footer__name {
    margin: 32px 42px 0;
    font-size: 16px; line-height: 32px;
  }
  .l-footer__addr {
    margin: 8px 42px 0;
    font-size: 13px; line-height: 23px;
  }

  /* SNS (97:5871) at (141, 8513) */
  .l-footer__sns {
    position: relative;
    top: auto; left: auto;
    margin: 56px auto 0;
    justify-content: center;
    gap: 40px;
  }
  .l-footer__sns img { width: 40px; height: 40px; }

  /* Nav (97:5867) at (40.5, 8579) */
  .l-footer__nav {
    position: relative;
    top: auto; left: auto;
    margin: 36px 0 0;
    text-align: center;
    font-size: 14px; line-height: 28px;
    white-space: normal;
    padding: 0 25px;
  }
  .l-footer__cta-title {
    position: relative;
    top: auto; left: auto;
    margin: 32px auto 0;
    text-align: center;
    font-size: 18px;
  }

  /* CTA row (97:5865) at (55, 8716) - 280×56 stacked */
  .l-footer__cta-row {
    position: relative;
    top: auto; left: auto;
    margin: 16px auto 0;
    flex-direction: column;
    gap: 12px;
    width: 280px;
  }
  .l-footer__cta-btn { width: 280px; height: 56px; }

  /* Sublinks (97:5861) at (93, 8945) */
  .l-footer__sublinks {
    position: relative;
    top: auto; left: auto;
    margin: 36px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  /* Sub-nav buttons (97:5860) at (30, 9038) */
  .l-footer__subnav {
    margin: 36px 30px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .l-footer__subnav a {
    height: 48px;
    background: var(--c-bg-soft);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-jp-mincho);
    font-size: 13px;
    color: var(--c-text);
  }

  /* Kasai card (97:5856) at (88, 9176), 212×104 */
  .l-footer__kasai {
    position: relative;
    top: auto; left: auto;
    width: 212px;
    margin: 28px auto 0;
    padding: 14px 0;
    border-radius: 4px;
  }
  .l-footer__kasai img { height: 51px; width: 153px; }
  .l-footer__kasai-text { font-size: 11px; margin-top: 12px; }

  /* Copyright bar (97:5854) - 370×66 at (0, 9318) - 2 lines */
  .l-footer__copy {
    position: relative;
    bottom: auto; left: auto;
    width: 100%;
    height: 66px;
    margin-top: 38px;
    font-size: 13px; line-height: 20px;
    text-align: center;
    padding: 0 16px;
  }
}