@charset "UTF-8";
/* =========================================================
   かめたろうやー LP
   指示書（かめたろうやーLPデザイン SP01/SP02/PC/navi）に準拠
   モバイルファースト。PC は @media (min-width:900px) 以降。
   ========================================================= */

/* ---------- トークン ---------- */
:root{
  --blue:        #005EC2;   /* 見出し・タイムライン・リンク */
  --blue-deep:   #0A5EC1;   /* 施設紹介セクションの地色 */
  --blue-dark:   #124D91;
  --blue-pale:   #CFE0F5;   /* ドロワーの帯 */
  --yellow:      #FDBC22;   /* タイムライン・フレーム */
  --coral:       #FF5A60;   /* CTA */
  --cyan-bg:     #E4F8F9;   /* お客様の声 / BLOG の地色 */
  --green:       #126435;   /* ロゴ・バッジ */
  --ink:         #333;
  --ink-soft:    #555;
  --white:       #fff;

  --wrap:        1120px;
  --pad:         20px;

  --font-round:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-body:   "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  font-size:15px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;   /* 古いブラウザ向けフォールバック */
}
/* 閉じているドロワー（画面外へ transform している）が横スクロールを
   生まないようにクリップする。overflow-x:clip はスクロールコンテナを
   作らないので、ヘッダーの position:sticky を壊さない。 */
@supports (overflow-x: clip){
  html, body{ overflow-x:clip; }
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
iframe{ display:block; border:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sp-only{ display:inline; }
.br-sp{ display:inline; }
.br-pc{ display:none; }

/* =========================================================
   ヘッダー
   ========================================================= */
.header{
  position:sticky; top:0; z-index:40;
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
/* 指示書実測：高さ56／ロゴ x21–276(255)／地球 x301–334(33)／メニュー x346–374(28) */
.header__inner{
  display:flex; align-items:center; gap:0;
  height:56px; padding:0 18px 0 24px;
}
.header__logo img{ width:252px; position:relative; top:3px; }
.gnav{ display:none; }
.header__cta{ display:none; }
.header__lang{ margin-left:auto; display:grid; place-items:center; }
.header__lang img{ width:33px; }

.hamburger{
  width:28px; height:23px; position:relative; flex:0 0 auto; margin-left:12px;
}
.hamburger span{
  position:absolute; left:0; width:100%; height:3px; border-radius:1.5px;
  background:var(--blue); transition:transform .25s, opacity .2s, top .25s;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }
.hamburger.is-active span:nth-child(1){ top:10px; transform:rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ---------- ドロワー ---------- */
.drawer-overlay{
  position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.drawer-overlay.is-open{ opacity:1; visibility:visible; }

/* 閉じているドロワーが画面外にはみ出して横スクロールを生まないよう、
   ビューポートと同サイズの overflow:hidden のラッパーで包んでクリップする */
.drawer-wrap{
  position:fixed; inset:0; z-index:45;
  overflow:hidden; pointer-events:none;
}
.drawer{
  position:absolute; top:0; right:0;
  width:min(100%,420px); height:100%;
  background:var(--white);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .28s ease;
  overflow-y:auto; pointer-events:auto;
}
.drawer.is-open{ transform:none; }
.drawer__head{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-bottom:1px solid #e5e5e5;
}
.drawer__logo{ width:190px; }
.drawer__globe{ width:26px; margin-left:auto; }
.drawer__close{ width:30px; height:30px; position:relative; }
.drawer__close::before,.drawer__close::after{
  content:""; position:absolute; left:2px; top:14px; width:26px; height:2px;
  background:var(--blue);
}
.drawer__close::before{ transform:rotate(45deg); }
.drawer__close::after{ transform:rotate(-45deg); }

.drawer__list{ padding:14px 16px; flex:1 1 auto; }
.drawer__list a{
  display:block; text-align:center; padding:12px 0;
  font-family:var(--font-round); font-weight:500; font-size:19px;
  color:var(--blue);
}
.drawer__list li:nth-child(odd) a{ background:var(--blue-pale); }
.drawer__sns{ display:grid; place-items:center; padding:14px 0 20px; }
.drawer__sns img{ width:34px; filter:grayscale(1); opacity:.55; }
.drawer__cta{ display:block; }
.drawer__cta img{ width:100%; }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ background:var(--white); }
.hero__title img{ width:100%; }
.hero__panel{ padding:10px var(--pad) 4px; text-align:center; }
/* 指示書実測：ink x61–328(幅268)・y385。素材の透明余白を補正 */
.hero__lead img{ width:274px; margin:0 auto 0 38px; }

/* 指示書実測：円の直径89px・円と円の間隔27px・3列合計320px */
.badges{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 27px; margin:10px auto 0; max-width:320px;
}
.badges li{ text-align:center; }
.badges img{ width:min(100%,89px); margin-inline:auto; }
.badges span{
  display:block; margin-top:8px; white-space:nowrap;
  font-size:12px; line-height:1.5; color:var(--ink);
}

.btn-airbnb{ display:block; }
.btn-airbnb img{ margin-inline:auto; }
/* 指示書実測：コーラル部が x52–340・y603–675。素材は周囲に影の余白を持つため
   表示幅307・左48（＝margin-left 28）でコーラル部が指示書と一致する */
.btn-airbnb--detail{ margin-top:18px; }
.btn-airbnb--detail img{ width:307px; margin:0 auto 0 28px; }

/* =========================================================
   コンセプト（海背景）
   ========================================================= */
.concept{
  position:relative; z-index:2;
  color:var(--white);
  /* 指示書：浅瀬の海（下端に白い波が入った画像）。上に暗い膜は掛けない */
  background:url("../images/bg-sea-shallow.jpg") center bottom/cover no-repeat;
  padding:29px 0 0;
}
.concept__vtext{
  position:absolute; left:0; top:5px; z-index:0;
  width:57px; opacity:.45; pointer-events:none;
}
.concept__inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
}
.concept__title{
  font-family:var(--font-round); font-weight:700;
  font-size:26px; text-align:center; letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(0,40,90,.45);
}
/* 指示書実測：本文ブロック x81–345（幅265px） */
/* 指示書実測：行送り30.5px・段落間31px・本文1行目 ink y798 */
.concept__body{
  margin:15px auto 0 61px; max-width:265px; text-align:left;
}
.concept__body p{
  margin-bottom:35px; font-weight:500; font-size:14.5px; line-height:2.07;
  text-shadow:0 1px 5px rgba(0,40,90,.45);
}
/* 指示書実測のコラージュ（コンテナ左端x=20・上端y=1385 を基準） */
.concept__photos{ position:relative; height:327px; margin-top:-6px; }
.concept__photo{ position:absolute; border-radius:8px; object-fit:cover; }
.concept__photo--sign{     left:-20px; top:0;     width:195px; height:305px; border-radius:0; }
.concept__photo--hibiscus{ left:236px; top:19px;  width:106px; height:141px; }
.concept__photo--family{   left:186px; top:198px; width:141px; height:93px; margin:0; }

.deco{ position:absolute; z-index:2; pointer-events:none; display:block; }
picture.deco img,
picture.concept__vtext img,
picture.footer__name img{ width:100%; height:auto; }
picture.concept__vtext{ display:block; }
picture.footer__name{ display:block; }
/* 指示書実測：コンセプト先頭からの相対位置 */
.concept .deco{ z-index:6; }
.deco--puffer{ width:97px; left:148px; top:700px; }
.deco--shell{  width:47px; left:33px;  top:995px; }
.deco--shrimp{ width:90px; left:285px; top:990px; }

/* =========================================================
   過ごし方（タイムライン）
   ========================================================= */
.stay{
  position:relative; z-index:1;
  background:var(--white);
  padding:33px 0 10px;
}
.stay__title img{ width:270px; margin:0 auto 0 58px; }

/* 指示書実測（.stay 先頭からの相対位置）
   deco-turtle-sp は「魚＋カメ」が1枚になった素材 */
.deco--turtle{width:117px; left:253px; top:  87px; }
.deco--fishA{ width:110px; left:240px; top: 537px; }
.deco--fishC{ width: 60px; left:285px; top: 739px; }
.deco--manta{ width:155px; left:236px; top:1000px; }
.deco--fishB{ width:150px; left:230px; top:1367px; }
.deco--whale{ width:165px; left:226px; top:1709px; }
.deco--worms{ width: 74px; left: 10px; top:2010px; }

/* --- 縦タイムライン（SP） ---
   指示書実測：レール x70・太さ9／黄円 直径94（左端85）／写真 幅271・高さ197（左端80）
   1項目のピッチ 370px                                                     */
.timeline{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto; padding:9px 0 0 80px;
}
.timeline::before{
  content:""; position:absolute; left:70px; top:8px; bottom:26px;
  width:9px; border-radius:5px; background:var(--blue);
}
.timeline__item{ position:relative; padding-bottom:39px; }
/* レール上の白ノード */
.timeline__item:not(.timeline__item--start):not(.timeline__item--end)::before{
  content:""; position:absolute; left:-15px; top:84px; z-index:2;
  width:19px; height:19px; border-radius:50%;
  background:var(--white); border:5px solid var(--blue);
}

.timeline__time{
  position:relative; display:grid; place-items:center;
  width:94px; height:94px; margin-left:5px;
  border-radius:50%; background:var(--yellow);
  color:var(--white); font-family:var(--font-round); font-weight:700; font-size:19px;
}
/* 吹き出しの尻尾（左下へ） */
.timeline__time::after{
  content:""; position:absolute; left:2px; bottom:-8px;
  width:28px; height:28px; background:var(--yellow);
  clip-path:polygon(100% 0, 0 100%, 100% 72%);
  transform:rotate(10deg);
}
/* 太陽の光条（右上） */
.timeline__time::before{
  content:""; position:absolute; right:-14px; top:-16px;
  width:46px; height:36px;
  background:
    linear-gradient(var(--yellow),var(--yellow)) 4px 14px/5px 19px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) 21px 2px/5px 22px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) 37px 12px/5px 19px no-repeat;
  transform:rotate(24deg);
}
/* 起床・就寝はレール中央に乗る白丸 */
.timeline__time--plain{
  background:var(--white); color:var(--blue);
  border:6px solid var(--blue); width:82px; height:82px;
  margin-left:-41px; font-size:19px;
}
.timeline__time--plain::before,
.timeline__time--plain::after{ display:none; }

/* 指示書実測のピッチ：353 / 457 / 373 / 370 */
.timeline__item--start{ padding-bottom:0; margin-bottom:-19px; }
.timeline__item:nth-child(2){ padding-bottom: 20px; }
.timeline__item:nth-child(3){ padding-bottom:123px; }
.timeline__item:nth-child(4){ padding-bottom: 39px; }
.timeline__item:nth-child(5){ padding-bottom: 36px; }
.timeline__item:nth-child(6){ padding-bottom:  0; }
.timeline__item--end{ padding-bottom:0; }

.timeline__fig{ margin-top:6px; }
.timeline__fig img{
  width:271px; height:197px; object-fit:cover;
  border:9px solid var(--yellow);
  border-radius:78px 78px 78px 78px / 60px 60px 60px 60px;
}
.timeline__fig figcaption{
  width:271px; margin-top:8px; text-align:center;
  font-size:15px; font-weight:500;
}

/* --- オーナー紹介 ---
   指示書実測：カード x29–361（幅333）・y3918–4711・本文の行送り23px */
.owner{
  position:relative; z-index:1;
  max-width:333px; margin:48px auto 0;
  padding:17px 16px; border:3px solid var(--blue); border-radius:14px;
  background:var(--white);
}
.owner__head{ display:flex; gap:14px; align-items:center; }
.owner__photo{ width:148px; flex:0 0 148px; border-radius:4px; }
.owner__name{ font-size:13px; line-height:1.69; padding-top:0; }
.owner__name span{ display:block; }
.owner__nameline{ display:block; margin-top:6px; white-space:nowrap; }
.owner__name strong{
  font-family:var(--font-round); font-weight:700; font-size:21px;
}
.owner__body{ margin-top:20px; }
.owner__body p{ margin-bottom:22px; font-size:13.5px; line-height:1.7; }
.owner__body p:last-child{ margin-bottom:0; }

/* --- CTA セット --- */
/* 指示書実測の位置に合わせる（セクションごとに上余白を個別指定） */
.ctaset{ padding:38px var(--pad) 8px; text-align:center; }
.stay .ctaset{ padding-top:61px; }
.checkin .ctaset{ padding-top:89px; }
.ctaset__lead{ width:224px; margin:0 auto 15px 64px; }
.ctaset__lead--text{
  position:relative; display:inline-block; margin-bottom:14px;
  font-family:var(--font-round); font-weight:700; font-size:17px; color:var(--coral);
  padding:0 32px; white-space:nowrap;
}
.ctaset__lead--text::before,
.ctaset__lead--text::after{
  content:""; position:absolute; top:2px; width:3px; height:34px;
  background:var(--coral); border-radius:2px;
}
.ctaset__lead--text::before{ left:8px;  transform:rotate(-22deg); }
.ctaset__lead--text::after { right:8px; transform:rotate(22deg); }
.ctaset .btn-airbnb img{ width:min(100%,289px); }

.ctaset--pair{ padding-bottom:74px; }
.ctaset--pair .ctaset__pair{
  display:grid; grid-template-columns:165px 166px; gap:12px;
  justify-content:center;
}
.ctaset--pair .ctaset__pair img{ width:100%; border-radius:10px; }

/* =========================================================
   動画
   指示書実測：全幅・高さ376px・CTAとの間隔119px
   ========================================================= */
.movie{ padding:20px 0 0; }
.movie__frame{
  display:grid; place-items:center; height:260px;
  background:#cdcdcd; color:#222;
  font-family:var(--font-round); font-weight:700; font-size:28px;
}

/* =========================================================
   3つの魅力（横スクロール）
   ========================================================= */
/* 指示書実測：外観写真 x30–362(332×275)／カード幅318・間隔30
   SPでは見出しは表示されない（PCのみ） */
.charm{ padding:13px 0 0; }
.charm__title{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.charm__hero{
  width:332px; height:275px; object-fit:cover;
  margin:0 auto 20px; border-radius:6px;
}

/* 汎用スクローラー */
.scroller{ position:relative; min-width:0; }
.scroller__track{
  display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 30px 6px; scrollbar-width:none;
}
.scroller__track::-webkit-scrollbar{ display:none; }
.scroller__track > *{ scroll-snap-align:start; }
.scroller__bar{
  height:3px; background:#e3e3e3; border-radius:2px;
  margin:30px 30px 0;
}
.scroller__bar span{
  display:block; height:100%; border-radius:2px; background:var(--blue);
  width:33%; transition:transform .15s linear;
  transform-origin:left center;
}

.charm__card{ flex:0 0 318px; }
.charm__pics{ position:relative; height:235px; }
.charm__seal{ position:absolute; left:10px;  top:0;     width:95px; opacity:.85; }
.charm__pic{ position:absolute; border-radius:4px; object-fit:cover; }
.charm__pic--a{ left:130px; top:10px;  width:175px; height:140px; }
.charm__pic--b{ left:35px;  top:155px; width:125px; height:80px; }
.charm__card p{ margin-top:0; font-size:14px; line-height:1.85; }

/* =========================================================
   チェックインの流れ
   ========================================================= */
.checkin{ padding:37px 0 8px; }
.checkin__title img{ width:254px; margin:0 auto 0 67px; }
/* 指示書実測：写真147×147（x36）／本文列 x203–357／手順ラベル幅107 */
.steps{ max-width:none; margin:26px auto 0; padding:0 35px; }
.step{
  position:relative; display:grid;
  grid-template-columns:147px 1fr; gap:20px; align-items:start;
  padding-bottom:45px;
}
.step:last-child{ padding-bottom:8px; }
/* 下向き矢印（指示書の素材を使用・写真列の中央） */
.step:not(:last-child)::after{
  content:""; position:absolute; left:58px; bottom:12px;
  width:32px; height:19px;
  background:url("../images/arrow-down.png") center/contain no-repeat;
}
.step__photo{ width:147px; height:147px; object-fit:cover; border-radius:10px; }
.step__label{ width:107px; }
.step__body p{
  margin-top:8px; padding-top:10px; border-top:2px solid var(--blue);
  font-size:13.5px; line-height:1.85;
}

/* =========================================================
   施設紹介
   ========================================================= */
/* 指示書実測：見出し幅94／本文幅322・13.5px／間取り図幅310 */
.facility{
  background:var(--blue-deep); color:var(--white);
  padding:53px 0 0;
}
.facility__title img{ width:94px; margin-inline:auto; }
.facility__lead{
  max-width:322px; margin:22px auto 0; padding:0;
  font-weight:500; font-size:13.5px; line-height:1.733;
}
.facility__plan{ margin-top:22px; padding:0; }
.facility__plan img{ width:310px; margin-inline:auto; }

.facility__gallery{ margin-top:26px; }
.facility__strip{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.facility__strip::-webkit-scrollbar{ display:none; }
/* 指示書実測：1枚 130×125 */
.facility__strip li{ flex:0 0 130px; scroll-snap-align:start; }
.facility__strip img{ width:130px; height:125px; object-fit:cover; }

.dots{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  padding:22px var(--pad) 26px;
}
.dots button{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--white); background:transparent;
}
.dots button.is-active{ background:var(--white); }

/* =========================================================
   オプションプラン
   ========================================================= */
/* 指示書実測：縦長ストリップをセクション高さに合わせて表示 */
.option{
  background:url("../images/bg-sea-tall.jpg") center/100% 100% no-repeat #2f6fb8;
  color:var(--white); padding:30px 0 0;
}
.option__inner{ max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad); }
.option__title{
  font-family:var(--font-round); font-weight:700; font-size:22px; text-align:center;
  text-shadow:0 2px 8px rgba(0,40,90,.4);
}
.option__lead{
  margin-top:12px; text-align:center; font-weight:500;
  font-size:13.5px; line-height:1.78;
}
/* 指示書実測：写真幅215・キャプション14px・項目間隔62 */
.option__list{ margin-top:26px; display:grid; gap:13px; }
.option__list img{ width:215px; height:145px; object-fit:cover; margin-inline:auto; border-radius:10px; }
.option__list h3{
  margin-top:25px; text-align:center;
  font-family:var(--font-round); font-weight:700; font-size:14px;
}
.ctaset--on-photo{ padding:0 var(--pad) 0; }

/* =========================================================
   周辺アクティビティ
   ========================================================= */
/* 指示書実測：見出し幅250／マップ幅365／所要時間はマップ右下に重ねる／写真290×145 */
.activity{ padding:40px 0 0; }
.activity__title img{ width:278px; margin:0 auto 0 41px; }
.activity__head{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
  display:flex; flex-direction:column;
}
.activity__title{ order:1; }
.activity__map  { order:2; }
/* 指示書実測：行送り22・項目ピッチ48 */
.activity__times{
  order:3; display:grid; gap:4px;
  width:190px; margin:-48px 8px 0 auto;
}
.activity__times li{
  position:relative; padding-left:18px;
  font-size:13.5px; line-height:1.63;
}
.activity__times li::before{
  content:""; position:absolute; left:4px; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--ink);
}
.activity__times span{ display:inline-block; }
.activity__map{ width:365px; margin:16px auto 0; }
.spots{
  max-width:var(--wrap); margin:26px auto 0; padding:0;
  display:grid; gap:25px;
}
.spots img{ width:290px; height:145px; object-fit:cover; margin-inline:auto; border-radius:10px; }
.spots h3{
  margin-top:22px; text-align:center;
  font-family:var(--font-round); font-weight:700; font-size:16px;
}

.insta-banner{ display:block; margin-top:0; padding:0 var(--pad); }
.insta-banner img{ width:100%; border-radius:6px; }

/* =========================================================
   お客様の声
   ========================================================= */
.voice{ background:var(--cyan-bg); padding:36px 0 0; margin-top:7px; }
.voice__title img{ width:132px; margin-inline:auto; }
.voice__carousel{ margin-top:22px; }
.voice__track{
  display:flex; align-items:flex-start; gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 72px 6px; scrollbar-width:none;
}
.voice__track::-webkit-scrollbar{ display:none; }
.voice-card{
  flex:0 0 248px; scroll-snap-align:center;
  background:var(--white); border:3px solid var(--blue); border-radius:14px;
  padding:22px 15px; text-align:center;
}
.voice-card__avatar{ width:74px; border-radius:50%; margin-inline:auto; }
.voice-card__name{ margin-top:12px; font-size:13px; }
.voice-card__name strong{
  font-family:var(--font-round); font-weight:700; font-size:18px;
}
.voice-card__meta{ font-size:13px; }
.voice-card__stars{ width:98px; margin:5px auto 0; }
.voice-card__text{ margin-top:12px; text-align:left; font-size:13.5px; line-height:1.704; }
.voice .dots{ padding-bottom:125px; }
.voice .dots{ gap:12px; }
.voice .dots button{ width:13px; height:13px; border-color:#A8C6DF; }
.voice .dots button.is-active{ background:var(--blue); border-color:var(--blue); }

/* =========================================================
   よくある質問
   ========================================================= */
.faq{ padding:36px 0 0; }
.faq__title img{ width:140px; margin-inline:auto; }
.faq__list{ max-width:none; margin:24px auto 0; padding:0 33px; }
.faq__item{ border-bottom:0; }
.faq__mark{
  flex:0 0 auto; display:grid; place-items:center;
  width:22px; height:22px; margin-right:13px;
  background:var(--blue); color:var(--white);
  font-family:var(--font-round); font-weight:700; font-size:13px;
}
.faq__mark--a{
  background:var(--white); color:#3AC0B0; border:1.5px solid #3AC0B0;
}
.faq__q{
  position:relative; display:flex; align-items:flex-start;
  padding:13px 36px 13px 0; cursor:pointer;
  font-weight:700; font-size:15px; line-height:1.8;
}
.faq__q::after{
  content:""; position:absolute; right:0; top:16px;
  width:20px; height:20px; border-radius:50%; border:1.3px solid #bbb;
  background:
    linear-gradient(#bbb,#bbb) center/9px 1.3px no-repeat,
    linear-gradient(#bbb,#bbb) center/1.3px 9px no-repeat;
}
.faq__item.is-open .faq__q::after{
  background:linear-gradient(#bbb,#bbb) center/9px 1.3px no-repeat;
}
.faq__a{
  display:none; align-items:flex-start;
  padding:0 0 14px; font-size:13.5px; line-height:1.704;
}
.faq__item.is-open .faq__a{ display:flex; }

/* =========================================================
   BLOG
   ========================================================= */
.blog{ background:var(--cyan-bg); padding:34px 0 60px; margin-top:30px; }
.blog__title{
  text-align:center; font-family:var(--font-round); font-weight:700;
  font-size:28px; color:var(--blue); letter-spacing:.06em;
}
.blog__title .wave{ width:150px; margin:4px auto 0; }
.blog__list{
  max-width:none; margin:26px auto 0; padding:0 54px;
  display:grid; gap:12px;
}
.blog__thumb{
  display:block; width:285px; height:185px; border-radius:12px;
  background:#cfcfcf center/cover no-repeat;
}
.blog__card p{ margin-top:30px; font-size:15px; line-height:1.867; }
.blog__card time{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.blog__more{
  display:inline-block; margin-top:15px; padding:4px 14px;
  background:var(--blue); color:var(--white); font-size:13px;
}
.blog__empty{ text-align:center; }
/* 指示書のSPは記事5枚（PCは3列×2段で6枚） */
.blog__card:nth-child(6){ display:none; }
.blog__all{ text-align:center; margin-top:26px; }
.blog__all a{
  display:inline-block; padding:10px 34px;
  background:var(--white); border:1px solid var(--blue); color:var(--blue);
  font-size:15px;
}

/* =========================================================
   アクセス
   ========================================================= */
/* 指示書実測：SP 321px／PC 522px */
.access iframe{ width:100%; height:321px; }

/* =========================================================
   フッター
   ========================================================= */
/* 指示書実測：ナビ2列（区切り線なし・行間隔47）／ロゴ円152／社名255 */
.footer{ padding:40px 0 70px; }
.footer__nav{
  max-width:none; margin-inline:auto; padding:0 33px;
  display:grid; grid-template-columns:175px 1fr; gap:0 25px;
}
/* 指示書実測：項目ピッチ43.5 */
.footer__nav a{
  display:block; padding:7.5px 0 7.5px 14px; position:relative;
  border-bottom:1px solid #ddd; font-size:15px;
}
.footer__nav a::before{
  content:""; position:absolute; left:0; top:21px;
  width:6px; height:6px; background:var(--ink);
}
.footer__brand{ text-align:center; margin-top:30px; }
.footer__mark{ width:152px; margin-inline:auto; }
.footer__name{ width:257px; margin:20px auto 0 62px; }
.footer__brand address{
  margin-top:22px; font-style:normal; font-size:13px; line-height:1.8;
}
.footer__foot{
  position:relative;
  max-width:none; margin:26px auto 0; padding:0 33px;
  display:flex; align-items:center; gap:14px;
}
.footer__copy{ font-size:12px; color:var(--ink-soft); }
.footer__insta{ margin-left:auto; }
.footer__insta img{ width:33px; }
.footer__totop img{ width:37px; }

/* =========================================================
   追従CTA
   ========================================================= */
.fixed-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:38;
  transition:transform .28s ease;
}
.fixed-cta img{ width:100%; }
.fixed-cta.is-hidden{ transform:translateY(110%); }

/* =========================================================
   PC
   ========================================================= */
@media (min-width:900px){
  body{ font-size:15.5px; }
  .sp-only{ display:none; }
  .br-sp{ display:none; }
  .br-pc{ display:inline; }
  html{ scroll-padding-top:78px; }

  /* --- ヘッダー ---
     指示書PC実測(1501px基準)：高さ67／ロゴ幅331／ナビ x524–1240／CTA x1327–1501 */
  .header__inner{
    height:67px; padding:0 0 0 29px; gap:0;
    max-width:none;
  }
  .header__logo img{ width:331px; }
  .gnav{ display:block; margin-left:auto; }
  .gnav ul{ display:flex; gap:2.3vw; align-items:center; }
  .gnav a{
    font-size:15px; font-weight:500; white-space:nowrap;
    padding-bottom:2px;
  }
  .gnav a.is-current{ color:var(--blue); border-bottom:1px solid var(--blue); }
  .gnav a:hover{ color:var(--blue); }
  .header__lang{ margin:0 0 0 2.3vw; }
  .header__lang img{ width:40px; }
  .header__cta{ display:block; height:67px; margin-left:1.0vw; }
  .header__cta img{ height:100%; width:auto; }
  .hamburger{ display:none; }

  /* --- ヒーロー ---
     指示書PC実測：写真 高さ768（1501:768）／パネル x113 幅434 下55／CTA x567 幅340 下58 */
  .hero{ position:relative; }
  .hero__title img{ width:100%; aspect-ratio:1501/778; object-fit:cover; }
  .hero__panel{
    position:absolute; left:0; right:0; bottom:0; top:0; padding:0;
    pointer-events:none;
  }
  .hero__panel > *{ pointer-events:auto; }
  .hero__lead,
  .hero .badges{ display:none; }
  .hero__panel::before{
    content:""; position:absolute; left:7.53%; bottom:7.2%;
    width:28.9%; aspect-ratio:1657/777;
    background:url("../images/hero-badges-pc.webp") center/contain no-repeat;
  }
  .btn-airbnb--detail{
    position:absolute; left:37.8%; bottom:7.6%; margin:0;
  }
  .btn-airbnb--detail img{ width:22.6vw; max-width:340px; }

  /* --- コンセプト ---
     指示書PC実測(1501px基準)：見出しy917／本文 幅593・中央／
     のぼり x200 y1090 240×260／ハイビスカス x1207 y883 146／家族 x1093 y1103 240
     ふぐ x160 y1403 113／えび x1153 y1303 127／セクション 845–1400 */
  .concept{
    background-image:url("../images/bg-sea-shallow.jpg");
    background-size:cover; padding:72px 0 0; min-height:555px;
  }
  .concept__vtext{ width:147px; left:20px; top:0; opacity:.4; }
  .concept__title{ font-size:32px; }
  .concept__body{
    max-width:593px; margin:26px auto 0; text-align:center;
  }
  .concept__body p{ margin-bottom:30px; font-size:15px; line-height:2.0; }

  /* 写真・装飾はセクション全幅を基準に配置する */
  .concept__inner{ position:static; }
  .concept__photos{
    position:absolute; inset:0; height:auto; margin:0; pointer-events:none;
  }
  .concept__photo{ position:absolute; border-radius:10px; }
  .concept__photo--sign{     left:13.3%; top:245px; width:16.0%;  height:260px; }
  .concept__photo--hibiscus{ left:80.4%; top: 38px; width: 9.7%;  height:167px; }
  .concept__photo--family{   left:72.8%; top:258px; width:16.0%;  height:154px; margin:0; }
  .deco--puffer{ width:7.5%; left:10.7%; top:558px; }
  .deco--shell{ display:none; }
  .deco--shrimp{ width:8.5%; left:76.8%; top:458px; }

  /* --- 過ごし方：横S字タイムライン --- */
  .stay{ padding:56px 0 20px; }
  .stay__title img{ width:min(58%,620px); }
  /* 指示書PC実測（.stay 先頭からの相対位置・1501px基準の%） */
  .deco--turtle{ width:12.8%; left:68.0%; top: 150px; }
  .deco--fishA{  width: 7.0%; left: 1.5%; top: 560px; }
  .deco--fishB{  width: 9.0%; left:38.0%; top: 990px; }
  .deco--fishC{  width: 5.0%; left:41.0%; top: 190px; }
  .deco--manta{  width:10.7%; left:-1.3%; top: 937px; }
  .deco--whale{  width:26.9%; left:70.9%; top:1404px; }
  .deco--worms{  width: 9.2%; left:17.7%; top:1159px; }

  /* S字レール。指示書PC実測：写真幅318・写真間隔60・円 直径117・レール太さ20 */
  .timeline{
    --tl-pad:  24px;
    --tl-rail1: 82px;
    --tl-turn: 500px;
    --tl-rail2: 620px;
    --tl-row1: 420px;

    position:relative; max-width:1501px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1fr) repeat(3, 318px);
    grid-template-rows:var(--tl-row1) 120px auto;
    gap:0 40px; padding:24px var(--tl-pad) 0;
  }
  /* 1段目レール → 右エルボー → 折り返し線 */
  .timeline::before{
    content:""; position:absolute; z-index:0;
    left:15.3%; right:9.4%;
    top:var(--tl-rail1); height:calc(var(--tl-turn) - var(--tl-rail1));
    background:none;
    border:20px solid var(--blue); border-left:0;
    border-radius:0 150px 150px 0;
    bottom:auto; width:auto;
  }
  /* 左エルボー → 2段目レール */
  .timeline::after{
    content:""; position:absolute; z-index:0;
    left:15.3%; right:9.4%;
    top:var(--tl-turn); height:calc(var(--tl-rail2) - var(--tl-turn));
    background:none;
    border:20px solid var(--blue); border-top:0; border-right:0;
    border-radius:0 0 0 100px;
  }
  .timeline__item{ position:relative; z-index:1; padding-bottom:0; }
  .timeline__item:nth-child(1){ grid-column:1; grid-row:1; }
  .timeline__item:nth-child(2){ grid-column:2; grid-row:1; }
  .timeline__item:nth-child(3){ grid-column:3; grid-row:1; }
  .timeline__item:nth-child(4){ grid-column:1; grid-row:3; }
  .timeline__item:nth-child(5){ grid-column:2; grid-row:3; }
  .timeline__item:nth-child(6){ grid-column:3; grid-row:3; }
  .timeline__item:nth-child(7){ grid-column:4; grid-row:3; }

  .timeline__item::before{ display:none; }
  .timeline__time{ margin:0 auto; width:117px; height:117px; font-size:22px; }
  .timeline__time--plain{ width:100px; height:100px; font-size:20px; margin:10px auto 0; border-width:7px; }
  .timeline__item--start .timeline__time--plain{ margin-left:-25px; }
  .timeline__item--end   .timeline__time--plain{ margin-right:-25px; margin-left:auto; }
  .timeline__fig{ margin-top:22px; }
  .timeline__fig img{
    width:318px; height:auto; aspect-ratio:318/232; border-width:11px;
    border-radius:90px 90px 90px 90px / 70px 70px 70px 70px;
  }
  .timeline__fig figcaption{ width:318px; font-size:15px; min-height:3.2em; }

  /* 指示書PC実測：カード x234–776（幅542・左寄せ） */
  .owner{ max-width:542px; margin:120px auto 0 15.6%; padding:26px 28px; }
  .owner__photo{ width:170px; }
  .owner__name{ font-size:13.5px; }
  .owner__body{ margin-top:20px; }
  .owner__body p{ margin-bottom:16px; }

  /* 指示書PC実測：リード幅208とボタン幅341を横並び（間隔67） */
  .ctaset{ padding:46px var(--pad) 10px; }
  .ctaset:not(.ctaset--pair):not(.ctaset--stack){
    display:flex; align-items:center; justify-content:center; gap:67px;
  }
  .ctaset:not(.ctaset--pair):not(.ctaset--stack) .ctaset__lead{ width:208px; margin:0; }
  .ctaset .btn-airbnb img{ width:341px; }
  .ctaset--pair .ctaset__pair{ grid-template-columns:230px 230px; gap:20px; }

  .stay .ctaset{ padding-top:20px; }
  /* --- 動画（指示書PC実測：幅808・高さ553） --- */
  .movie{ padding:20px 0 0; margin-top:-128px; }
  .movie__frame{
    max-width:808px; height:553px; margin-inline:auto; font-size:34px;
  }

  /* --- 3つの魅力（指示書PC実測：見出しx222／外観458×367／カード320・間隔25） --- */
  .charm{ padding:80px 0 110px; }
  .charm__title{
    position:static!important; width:auto; height:auto; margin:0 auto 26px;
    clip:auto; overflow:visible; white-space:normal;
    max-width:none; margin-left:15.0%; padding:0 var(--pad) 0 12px; font-size:20px;
    font-family:var(--font-round); font-weight:700; color:var(--blue); line-height:1.6;
    border-left:5px solid var(--blue);
  }
  .charm__row{
    max-width:none; margin:0; padding:0 0 0 15.0%;
    display:grid; grid-template-columns:30.5% 1fr; gap:37px; align-items:start;
  }
  .charm__hero{ width:100%; height:367px; object-fit:cover; margin:0; }
  .scroller__track{ padding:0 0 6px; gap:25px; }
  .scroller__bar{ margin:22px 0 0; }
  .charm__card{ flex:0 0 320px; }
  .charm__pics{ height:250px; }
  .charm__seal{ left:5px; top:0; width:125px; }
  .charm__pic--a{ left:113px; top:16px;  width:234px; height:167px; }
  .charm__pic--b{ left:22px;  top:141px; width:150px; height:100px; }
  .charm__card p{ font-size:14px; line-height:1.8; }

  /* --- チェックイン（指示書PC実測：見出し258／写真186×203・間隔52／ラベル120） --- */
  .checkin{ padding:0 0 10px; }
  .checkin .ctaset{ padding:0 var(--pad) 0; }
  .checkin__title img{ width:258px; }
  .steps{
    display:grid; grid-template-columns:repeat(4,186px); gap:52px;
    justify-content:center; padding:0; margin-top:8px;
  }
  .step{ display:block; padding-bottom:0; }
  .step:not(:last-child)::after{ display:none; }
  .step__photo{ width:186px; height:203px; border-radius:8px; }
  .step__body{ margin-top:22px; }
  .step__label{ width:120px; }
  .step__body p{ font-size:13px; line-height:1.85; }

  /* --- 施設紹介（指示書PC実測：見出し133／本文幅700／間取り図幅1117） --- */
  .facility{ padding:1px 0 0; margin-top:80px; }
  .facility__title img{ width:133px; }
  .facility__lead{ text-align:center; max-width:700px; font-size:15px; line-height:2.0; }
  .facility__plan img{ width:1117px; max-width:100%; margin-inline:auto; }
  /* 指示書PC実測：1枚 283×292 */
  .facility .dots{ padding-bottom:233px; }
  .facility__strip li{ flex:0 0 283px; }
  .facility__strip img{ width:283px; height:292px; }

  /* --- オプション（指示書PC実測：写真308×225・3列・間隔25） --- */
  .option{ padding:70px 0 22px; }
  .option__title{ font-size:24px; }
  .option__lead{ font-size:14px; margin-top:16px; }
  .option__list{
    grid-template-columns:repeat(3,308px); gap:25px;
    justify-content:center; margin-top:30px;
  }
  .option__list img{ width:308px; height:225px; object-fit:cover; }
  .option__list h3{ margin-top:25px; font-size:15px; }

  /* --- アクティビティ --- */
  .activity{ padding:32px 0 0; position:relative; }
  .activity__head{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    grid-template-rows:auto 1fr; gap:0 30px; align-items:start;
  }
  .activity__title{ grid-column:1; grid-row:1; }
  .activity__title img{ width:317px; margin:0; }
  .activity__times{ grid-column:1; grid-row:2; margin-top:26px; align-self:start; }
  .activity__times li{ font-size:16px; }
  /* 指示書PC実測：マップ幅534 */
  .activity__map{
    grid-column:2; grid-row:1 / span 2;
    width:534px; max-width:100%; margin:0 auto 0 0;
  }
  /* 指示書PC実測：JUNGLIAのみ 400×272 をマップ左下に配置、残り6枚は275×183の3列2段 */
  .spots{
    grid-template-columns:repeat(3,275px); gap:35px 25px;
    justify-content:center; margin-top:36px; padding:0;
  }
  .spots img{ width:275px; height:183px; }
  .spots h3{ margin-top:14px; font-size:15px; }
  .spots li:first-child{
    position:absolute; left:20.5%; top:558px; width:400px; margin:0;
  }
  .spots li:first-child img{ width:400px; height:272px; }
  .spots li:first-child h3{ margin-top:16px; }
  .insta-banner{ margin-top:0; }
  .insta-banner img{ max-width:467px; margin-inline:auto; }

  /* --- お客様の声（指示書PC実測：見出し150／カード400・間隔25） --- */
  .voice{ padding:54px 0 0; margin-top:96px; }
  .voice__title img{ width:150px; }
  .voice__track{ padding:0 calc(50% - 200px) 6px; gap:25px; }
  .voice-card{ flex:0 0 400px; align-self:start; padding:24px 22px; }

  /* --- FAQ（指示書PC実測：見出し153／リスト幅670） --- */
  .faq{ padding:52px 0 0; }
  .faq__title img{ width:153px; }
  .faq__q{ font-size:15px; padding-right:60px; }
  .faq__list{ max-width:670px; padding:0; }

  /* --- BLOG（指示書PC実測：Photo 300×195・3列・横間隔69・縦間隔34） --- */
  .blog{ padding:66px 0 175px; margin-top:46px; }
  .blog__title .wave{ width:122px; }
  .blog__list{
    grid-template-columns:repeat(3,300px); gap:34px 69px;
    justify-content:center; padding:0;
  }
  .blog__thumb{ width:300px; height:195px; }
  .blog__card:nth-child(6){ display:block; }
  .blog__card p{ margin-top:33px; font-size:14px; line-height:1.6; }
  .blog__more{ margin-top:29px; }
  .blog__all a{ padding:8px 40px; }

  /* --- アクセス --- */
  .access iframe{ height:628px; }

  /* --- フッター --- */
  .footer{ padding:44px 0 60px; }
  /* 指示書PC実測：ナビ2列 x882–1011 / 1082–1211 */
  .footer__nav{
    grid-template-columns:repeat(2,129px);
    justify-content:end; gap:0 71px;
    max-width:none; padding:0 290px 0 0;
  }
  .footer__nav a{ border-bottom:0; padding:9px 0 9px 12px; font-size:13px; }
  .footer__nav a::before{ top:16px; width:5px; height:5px; }
  .footer{ position:relative; }
  .footer__brand{
    position:absolute; left:11.5%; top:44px;
    text-align:left; margin:0; display:flex; align-items:center; gap:20px;
    flex-wrap:wrap; max-width:560px;
  }
  .footer__mark{ width:145px; }
  .footer__name{ width:278px; margin:0; }
  .footer__brand address{ flex-basis:100%; margin-top:6px; font-size:13px; }
  /* 指示書PC実測：Instagram x244（ロゴ下）／TOP x1322／Copyright 右寄せ */
  .footer__foot{ display:block; position:static; margin-top:0; padding:0; }
  .footer__insta{ position:absolute; left:16.3%; top:250px; margin:0; }
  .footer__insta img{ width:45px; }
  .footer__totop{ position:absolute; left:88.1%; top:222px; }
  .footer__totop img{ width:56px; }
  .footer__copy{ text-align:right; padding:210px 5.3% 0 0; font-size:12px; }

  /* --- 追従CTA --- */
  .fixed-cta{ left:0; right:auto; bottom:0; width:456px; }
}

/* 大きなPC：ヒーローのバッジ位置を中央寄せに戻す */


@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}