@charset "UTF-8";
/* =========================================================
   LuluSun カヌーLP
   - 基本背景：fixed（動画/画像）
   - コンテンツ：幅600pxの中央カラム（スマホ版をPCでも中央表示）
   - PC：両サイドにメニュー(左)・予約ボタン(右)
   - SP：サイドを消し、画面下に予約ボタン／ヘッダーはバーガー
   ========================================================= */

/* ---------- 変数 ---------- */
:root{
  --content-w: 550px;
  --header-h: 60px;

  --orange:   #f39800;
  --sky:      #29abe2;
  --sky-2:    #6fc7ec;
  --page-bg:  #a9dff4;   /* コンテンツ列の下地（水色） */
  --divider:  #7ecef4;   /* ブロック間の2px水色ボーダー */
  --text:     #333;
  --em:       #e60027;

  /* ツアーカラー */
  --red:       #e50012;
  --tour-org:  #ef8200;
  --teal:      #2fb3a3;
  --green:     #8cc220;
  --lightblue: #5cc2ee;
  --pink:      #f2939e;
}

/* ---------- リセット ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:70px; }
body{
  margin:0;
  font-family:"Zen Maru Gothic", sans-serif;
  font-weight:500;
  color:var(--text);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  word-break:break-word;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- 固定背景（動画/画像） ---------- */
.bg-fixed{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:#0a6f9c;
}
.bg-fixed img,
.bg-fixed video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.bg-fixed__mask{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,60,100,.15), rgba(0,60,100,.35));
}

/* ---------- ヘッダー ---------- */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:var(--orange);
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.header__inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:14px;
  padding:0 16px;
  max-width:1280px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.brand__logo{ height:38px; width:auto; display:block; }
.brand__mark{ display:flex; }
.brand__text{ display:flex; flex-direction:column; line-height:1; color:#fff; }
.brand__name{ font-family:"Pacifico",cursive; font-size:22px; font-style:normal; }
.brand__sub{ font-size:9px; letter-spacing:.28em; font-style:normal; margin-top:2px; }

.gnav{
  margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end;
  align-items:center; gap:2px 12px;
}
.gnav a{
  color:#fff; font-size:12.5px; font-weight:700; white-space:nowrap;
  padding:4px 2px; transition:opacity .2s;
}
.gnav a:hover{ opacity:.7; }
.gnav__en{
  background:#3cb878; color:#fff; padding:4px 12px; border-radius:4px;
}

/* バーガー */
.burger{
  margin-left:auto; width:40px; height:34px; border:0; background:transparent;
  display:none; flex-direction:column; justify-content:center; gap:6px; padding:6px;
}
.burger span{ display:block; height:3px; border-radius:3px; background:#fff; transition:.3s; }
.burger.is-active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ---------- スマホ ドロワー ---------- */
.drawer{
  position:fixed; top:14px; right:14px; z-index:120;
  width:88%; max-width:400px; max-height:calc(100% - 28px);
  background:var(--orange); color:#fff; border-radius:12px;
  transform:translateX(calc(100% + 24px)); transition:transform .34s ease;
  overflow-y:auto; box-shadow:0 10px 34px rgba(0,0,0,.32);
}
.drawer.is-open{ transform:translateX(0); }
.drawer__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:22px 20px 18px;
}
.drawer__logo{ height:48px; width:auto; }
.drawer__close{
  width:48px; height:48px; flex:0 0 auto; border:2px solid #fff; border-radius:2px;
  background:none; display:flex; align-items:center; justify-content:center; padding:5px;
}
.drawer__close svg{ width:100%; height:100%; display:block; }
.drawer__nav{ display:flex; flex-direction:column; padding:0 20px 26px; }
.drawer__nav a{
  padding:14px 6px; font-weight:700; font-size:16px; color:#fff;
  border-bottom:1.5px solid rgba(255,255,255,.9);
}
.drawer__nav a.is-accent{ color:#a3301a; }   /* ご予約：赤字で強調 */
.drawer__nav a:active{ opacity:.65; }
.drawer-overlay{
  position:fixed; inset:0; z-index:110; background:rgba(70,70,70,.55);
  opacity:0; visibility:hidden; transition:.3s;
}
.drawer-overlay.is-open{ opacity:1; visibility:visible; }

/* ---------- PC サイドレール ---------- */
.rail{
  position:fixed; top:52%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column;
}
/* 左メニュー：半透明の青パネルに「白丸アイコン＋白文字＋白下線」 */
.rail--left{
  left:5vw; gap:15px;
  padding:22px 20px 20px; border-radius:7px;
  background:rgba(40,155,216,.5);
}
.rail--right{ left:80vw; top:82%; }

.rail__btn{ display:flex; align-items:center; gap:0; }
.rail__btn:hover .rail__label{ opacity:.7; }
.rail__ic{
  width:44px; height:44px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.rail__ic svg{ width:26px; height:26px; display:block; }
.rail__label{
  flex:1; color:#fff; font-weight:700; font-size:15px; white-space:nowrap;
  /* 下線をアイコンの白丸につなげる：丸側へ潜り込ませ、文字位置は左paddingで維持 */
  margin-left:-14px; padding:0 6px 9px 33px;
  border-bottom:2px solid rgba(255,255,255,.85);
  transition:opacity .2s;
}

.reserve-round{
  display:block; width:124px; transition:transform .2s;
}
.reserve-round:hover{ transform:scale(1.05); }
.reserve-round img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.3));
}

/* ---------- ヒーロー ---------- */
main{ position:relative; z-index:1; padding-top:var(--header-h); }
.hero{
  min-height:calc(90vh - var(--header-h)); max-height:760px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:40px 20px 70px; position:relative;
}
/* FV中央のコンテンツ幅に青い水色のオーバーレイを敷く（写真の上・ロゴ文字の下） */
.hero::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%); width:var(--content-w); max-width:100%;
  background:rgba(37,150,212,.46); z-index:-1;
}
.hero__logo{ display:flex; flex-direction:column; align-items:center; text-shadow:0 2px 12px rgba(0,40,70,.45); }
.hero__logo img{ width:min(240px,60vw); height:auto; filter:drop-shadow(0 4px 16px rgba(0,40,70,.4)); }
.hero__script{ font-family:"Pacifico",cursive; font-size:clamp(16px,4vw,26px); }
.hero__script--dark{ color:#6f5b3e; text-shadow:none; }
.hero__brand{ font-family:"Pacifico",cursive; font-size:clamp(52px,14vw,96px); line-height:1; margin:-4px 0; }
.hero__place{ font-size:clamp(13px,3vw,18px); letter-spacing:.35em; }
.hero__lead{
  margin-top:34px; font-weight:700; font-size:clamp(14px,3.6vw,16px);
  text-shadow:0 2px 10px rgba(0,40,70,.55); line-height:2;
}

/* ---------- コンテンツ列（600px中央 / ブロック間2px水色） ---------- */
.content{
  width:100%; max-width:var(--content-w); margin:0 auto;
  background:var(--page-bg);
  box-shadow:0 0 40px rgba(0,0,0,.18);
}
.block{
  background:#fff; padding:34px 26px;
}
.block + .block{ border-top:4px solid var(--divider); }

/* 見出し帯：ツアーバナーと同じデザイン（色地＋上下ストライプ＋各色3pxボーダー） */
.banner{
  position:relative; box-sizing:border-box; text-align:center; color:#fff;
  border:3px solid transparent; border-radius:6px;
  padding:30px 40px; margin:0 0 22px; overflow:hidden;
  background-repeat:no-repeat;
  background-position:center top,center bottom,center top,center bottom;
  background-size:100% 16px,100% 16px,100% 16px,100% 16px;
  background-image:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3));
}
.banner b{ display:block; font-size:22px; font-weight:900; line-height:1.3; }
.banner small{ display:block; font-size:13px; font-weight:700; margin-top:2px; }
.banner--blue{ background-color:#2f5fb3;    border-color:#2f5fb3; }
.banner--teal{ background-color:var(--teal); border-color:var(--teal); }
.banner--pink{ background-color:var(--pink); border-color:var(--pink); }
.banner--sky{ background-color:var(--sky-2); border-color:var(--sky-2); }
/* ピル型は元デザインに戻す（ボーダー無し・ストライプ無し・角丸ピル） */
.banner--pill{ border:0; border-radius:999px; padding:11px 40px; margin-bottom:26px; background-image:none; }
.banner--pill b{ font-size:19px; }
.banner--sm{ padding:8px 30px; }
.banner--sm b{ font-size:16px; }

/* ---------- ツアー（アコーディオン） ---------- */
/* flow・写真をコンテンツ幅いっぱいにするため、ツアーブロックは左右パディングを外す */
#tours.block{ padding-left:0; padding-right:0; }
.tours{ display:flex; flex-direction:column; gap:0; }
/* ツアーごとの区切り＝水色ボーダー。閉じている間は非表示（幅は維持）／開いたツアーの上下にだけ表示 */
.tour + .tour{ border-top:4px solid transparent; }
.tour.is-open + .tour{ border-top-color:var(--divider); }   /* 開いたツアーの下側だけに表示（上には出さない） */
/* アコーディオン開閉 */
.acc__body{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
/* flow・thumbs以外の中身は左右22pxインセット。flow/thumbsは負マージンで全幅に */
.tour__body{ padding:20px 22px 0; }

/* ツアーバナー＝アコーディオンのトリガー（常時表示）：色地＋上下ストライプ。全ツアー同一幅（コンテンツ幅）に固定 */
.tour__banner{
  display:block; box-sizing:border-box; width:calc(100% - 44px); margin:8px auto;
  border:3px solid transparent; cursor:pointer; font-family:inherit;
  text-align:center; color:#fff; border-radius:6px; padding:30px 24px;
  position:relative; overflow:hidden;
  background-repeat:no-repeat;
  background-position:center top,center bottom,center top,center bottom;
  background-size:100% 20px,100% 20px,100% 20px,100% 20px;
  background-image:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3));
}
.tour__banner b{ display:block; font-size:22px; font-weight:900; line-height:1.3; }
.tour__banner small{ font-size:15px; font-weight:500; }
/* アコーディオンのボタンだと分かる＋/−（右・開くと−に変化）＋ホバーで軽く明るく */
.tour__banner::after{
  content:"＋"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; line-height:1; color:#fff; pointer-events:none;
}
.tour.is-open .tour__banner::after{ content:"−"; }
.tour__banner:hover{ filter:brightness(1.06); }
.tour[data-color="red"]       .tour__banner{ background-color:var(--red);       border-color:var(--red); }
.tour[data-color="orange"]    .tour__banner{ background-color:var(--tour-org);  border-color:var(--tour-org); }
.tour[data-color="teal"]      .tour__banner{ background-color:var(--teal);      border-color:var(--teal); }
.tour[data-color="green"]     .tour__banner{ background-color:var(--green);     border-color:var(--green); }
.tour[data-color="lightblue"] .tour__banner{ background-color:var(--lightblue); border-color:var(--lightblue); }

.tour__desc{ font-weight:700; margin:0 0 16px; }
.tour__table{ width:100%; border-collapse:collapse; font-size:18px; }
.tour__table th,.tour__table td{ border:2px solid; padding:7px 10px; text-align:center; font-weight:700; }
.tour__table th{ width:38%; }
.tour[data-color="red"]       .tour__table th,.tour[data-color="red"]       .tour__table td{ border-color:var(--red); }
.tour[data-color="orange"]    .tour__table th,.tour[data-color="orange"]    .tour__table td{ border-color:var(--tour-org); }
.tour[data-color="teal"]      .tour__table th,.tour[data-color="teal"]      .tour__table td{ border-color:var(--teal); }
.tour[data-color="green"]     .tour__table th,.tour[data-color="green"]     .tour__table td{ border-color:var(--green); }
.tour[data-color="lightblue"] .tour__table th,.tour[data-color="lightblue"] .tour__table td{ border-color:var(--lightblue); }
.tour__note{ text-align:right; font-size:12px; margin:6px 0 0; }
#reserve .tour__note{ text-align:center; margin-bottom:20px; }
#reserve .btn-apply{ margin-top:55px; }   /* ボタン上の矢印の上に隙間を確保 */

/* お申し込みボタン：色地＋内側の白フレーム。上に矢印分の余白を確保 */
.btn-apply{
  position:relative; display:block; width:min(280px,80%); margin:46px auto 4px; text-align:center;
  color:#fff; font-size:20px; font-weight:700; padding:14px 12px; border-radius:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.18); letter-spacing:.2em;
}
.btn-apply::before{
  content:""; position:absolute; inset:5px; border:2px solid #fff; border-radius:3px;
  pointer-events:none;
}
/* ボタン上の下向き矢印（三角形2枚重ね）。色はボタンごとに background-color で指定 */
.btn-apply::after{
  content:""; position:absolute; left:50%; top:-42px; transform:translateX(-50%);
  width:48px; height:40px; pointer-events:none; background-color:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23000' fill-opacity='0.5' d='M2 1L46 1L24 23Z'/%3E%3Cpath fill='%23000' d='M2 15L46 15L24 37Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath fill='%23000' fill-opacity='0.5' d='M2 1L46 1L24 23Z'/%3E%3Cpath fill='%23000' d='M2 15L46 15L24 37Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tour[data-color="red"]       .btn-apply{ background:var(--red); }
.tour[data-color="orange"]    .btn-apply{ background:var(--tour-org); }
.tour[data-color="teal"]      .btn-apply{ background:var(--teal); }
.tour[data-color="green"]     .btn-apply{ background:var(--green); }
.tour[data-color="lightblue"] .btn-apply{ background:var(--lightblue); }
.btn-apply--blue{ background:#2f5fb3; }
/* 矢印の色（ボタン色に合わせる。redはベース既定） */
.tour[data-color="orange"]    .btn-apply::after{ background-color:var(--tour-org); }
.tour[data-color="teal"]      .btn-apply::after{ background-color:var(--teal); }
.tour[data-color="green"]     .btn-apply::after{ background-color:var(--green); }
.tour[data-color="lightblue"] .btn-apply::after{ background-color:var(--lightblue); }
.btn-apply--blue::after{ background-color:#2f5fb3; }

/* 当日の流れ（背景色はコンテンツ幅いっぱい。負マージンでカード端まで伸ばす） */
.flow{
  position:relative; z-index:1; margin:40px -22px 0; padding:36px 0 6px;
  background:#fdf3f4; overflow:visible;
}
.tour[data-color="orange"]    .flow{ background:#fff5ea; }
.tour[data-color="teal"]      .flow{ background:#eef8f6; }
.tour[data-color="green"]     .flow{ background:#f3f9e8; }
.tour[data-color="lightblue"] .flow{ background:#eef8fd; }
.flow__title{
  width:max-content; margin:0 auto 30px; padding:5px 44px; text-align:center;
  font-weight:700; background:#fff; border:2px solid var(--red); border-radius:999px; color:var(--red);
}
.tour[data-color="orange"]    .flow__title{ border-color:var(--tour-org); color:var(--tour-org); }
.tour[data-color="teal"]      .flow__title{ border-color:var(--teal); color:var(--teal); }
.tour[data-color="green"]     .flow__title{ border-color:var(--green); color:var(--green); }
.tour[data-color="lightblue"] .flow__title{ border-color:var(--lightblue); color:var(--lightblue); }
.flow__steps{ text-align:center; max-width:80%; margin:0 auto; }
.flow__steps p{ position:relative; margin:0 0 34px; font-size:13.5px; font-weight:700; }
.flow__steps p:not(:last-child)::after{
  content:"▼"; position:absolute; left:50%; bottom:-26px; transform:translateX(-50%);
  color:var(--red); font-size:16px;
}
.tour[data-color="orange"]    .flow__steps p::after{ color:var(--tour-org); }
.tour[data-color="teal"]      .flow__steps p::after{ color:var(--teal); }
.tour[data-color="green"]     .flow__steps p::after{ color:var(--green); }
.tour[data-color="lightblue"] .flow__steps p::after{ color:var(--lightblue); }
.flow__steps .em{ color:var(--em); }
.flow__end{ color:var(--em); }
/* ガイド写真（背景透過の切り抜き。額縁なしで見本どおりに配置） */
.flow__guide{ position:absolute; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.flow__guide--a{ right:8px; top:-32px; height:116px; width:auto; }  /* 顔：上・右（高さ揃え） */
.flow__guide--a.flow__guide--left{ left:8px; right:auto; top:-28px; } /* 顔：上・左 */
.flow__guide--b{ right:-6px; bottom:-56px; width:132px; }      /* 全身：下・右（下端を写真で断ち切り） */

/* サムネイル列（ツアー内）＝横幅いっぱい・隙間なし・背景色はflowと同じ・写真がガイド下端を断ち切る */
.tour__body .thumbs{
  grid-template-columns:repeat(4,1fr); gap:0; margin:0 -22px;
  position:relative; z-index:2; padding-bottom:40px; background:#fdf3f4;
}
.tour[data-color="orange"]    .flow,.tour[data-color="orange"]    .tour__body .thumbs{ background:#fff5ea; }
.tour[data-color="teal"]      .flow,.tour[data-color="teal"]      .tour__body .thumbs{ background:#eef8f6; }
.tour[data-color="green"]     .flow,.tour[data-color="green"]     .tour__body .thumbs{ background:#f3f9e8; }
.tour[data-color="lightblue"] .flow,.tour[data-color="lightblue"] .tour__body .thumbs{ background:#eef8fd; }
.tour__body .thumbs img{ border-radius:0; }

/* サムネイル列（汎用） */
.thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:20px; }
.thumbs--3{ grid-template-columns:repeat(3,1fr); }
.thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; cursor:pointer; }

/* ---------- 汎用テキスト ---------- */
.txt{ font-weight:500; margin:0 0 16px; }
.txt.small{ font-size:12.5px; color:#555; }
.txt.center{ text-align:center; }
.lead-strong{ font-weight:700; margin:0 0 20px; }
.sub-ttl{ text-align:center; font-weight:700; color:var(--sky); margin:26px 0 12px; }
.contact-tel{ text-align:center; font-weight:900; font-size:20px; line-height:1.7; margin:20px 0; }

/* 持ち物・アイテム */
.item{ margin-bottom:16px; }
.pill{
  display:block; width:60%; margin:0 auto 8px; text-align:center; color:#fff;
  font-weight:700; border-radius:999px; padding:5px 12px; font-size:17px;
}
.pill--teal{ background:#6fc7c0; }
.item p{ margin:0; font-size:13.5px; }

/* FAQ */
.faq .acc__head{
  width:100%; text-align:left; border:0; background:#fbe0e3; color:#c9303f;
  font-weight:700; font-size:14px; padding:10px 34px 10px 30px; margin-bottom:5px;
  border-radius:3px; position:relative;
}
.faq .acc__head::before{ content:"＋"; position:absolute; left:12px; }
.faq .acc.is-open .acc__head::before{ content:"−"; }
.faq .acc__body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq .acc__body p{ margin:0; padding:12px 16px 16px; font-size:13.5px; }
.faq-cards{ display:inline-block; margin-top:6px; font-size:12px; font-weight:700; color:#555; letter-spacing:.03em; }

/* Joe について */
#joe{ padding-bottom:0; }
.joe{ position:relative; padding-bottom:0; }
.joe p{ margin:0 0 14px; font-size:13.5px; }
.joe__sign{ font-weight:700; }
.joe__photo{
  display:block; width:auto; max-width:200px; height:auto;
  margin:14px auto 0;
}

/* 記事（ブログ・お客様の声） */
.post{ margin-bottom:26px; }
.post__ttl{ font-size:16px; font-weight:700; margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--sky-2); }
.post__txt{ font-size:13.5px; margin:0 0 14px; }
.post__img{ width:100%; aspect-ratio:16/10; object-fit:cover; cursor:pointer; border-radius:2px; }
.more{ display:block; text-align:center; font-weight:700; color:#555; margin-top:6px; }
button.more{ width:100%; background:none; border:0; cursor:pointer; font:inherit; }
.more--gallery{ margin-top:14px; font-size:16px; letter-spacing:.08em; }
.more--gallery:hover{ color:#222; }

/* フォーム */
.cform{ margin:14px 0 44px; }
.cform__row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:12.5px; }
.cform__row label{ flex:0 0 92px; font-weight:700; padding-top:8px; }
/* 各項目の英語表記（日本語ラベルの下に小さく） */
.cform__en{ display:block; font-weight:400; font-size:11px; color:#777; letter-spacing:0; }
/* フォーム冒頭の英文リード */
.lead-en{ font-size:12.5px; color:#666; }
.cform__row input,.cform__row textarea{
  flex:1; border:1px solid #bcbcbc; border-radius:3px; padding:7px 8px; font-family:inherit; font-size:14px;
}
.cform__tel{ flex:1; display:flex; align-items:center; gap:6px; }
.cform__tel input{ width:100%; }
.cform__submit{
  display:block; margin:6px auto 0; background:#8a8a8a; color:#fff; border:0;
  padding:8px 30px; border-radius:4px; font-weight:700;
}

/* アクセス */
.access{ text-align:center; }
.access p{ margin:4px 0; font-size:13px; }
.access__name b{ font-family:"Pacifico",cursive; font-size:20px; color:var(--sky); }
.access__ttl{ color:var(--sky); font-weight:700; margin:18px 0 6px !important; }
.access__map{ display:block; width:100%; aspect-ratio:3/2; height:auto; margin-top:14px; border:0; border-radius:2px; }

/* LuluSun について ロゴ */
.about-logo{ text-align:center; margin-bottom:16px; display:flex; flex-direction:column; align-items:center; }
.about-logo img{ width:min(230px,74%); height:auto; }
.about-logo__brand{ font-family:"Pacifico",cursive; font-size:44px; color:#6f5b3e; line-height:1; }
.about-logo__place{ font-size:11px; letter-spacing:.3em; color:#6f5b3e; }
.about-table{ width:100%; border-collapse:collapse; font-size:13px; margin:0 auto; }
.about-table th{ text-align:left; white-space:nowrap; font-weight:700; padding:9px 4px; vertical-align:top; border-bottom:1px solid #ddd; }
.about-table td{ padding:9px 4px; border-bottom:1px solid #ddd; }
.license{ list-style:none; padding:0; margin:0 0 18px; font-size:13.5px; }
.license li{ position:relative; padding-left:16px; margin-bottom:4px; }
.license li::before{ content:"・"; position:absolute; left:0; }

/* 募集 */
.recruit p{ font-size:13.5px; margin:0 0 14px; }

/* ギャラリー */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; cursor:pointer; border-radius:2px; transition:transform .2s, box-shadow .2s; }
.gallery img:hover{ transform:scale(1.02); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.gallery img.is-hidden{ display:none; }

/* English */
.en{ font-weight:700; color:#555; }
.enrow{ margin-bottom:6px; }
.enrow__head{ color:#fff; font-weight:700; font-size:13px; padding:6px 12px; }
.enrow__head--red{ background:var(--red); }
.enrow__txt{ font-size:13px; margin:6px 0 12px; }
.en-note{ color:var(--em); font-weight:700; }
/* English 末尾の booking ボタン（#contact のフォームへアンカー） */
.btn-booking{
  position:relative; display:block; width:min(320px,86%); margin:26px auto 4px;
  background:#102d9b; color:#fff; text-align:center;
  font-size:24px; font-weight:700; letter-spacing:.22em; padding:14px 12px 14px 20px;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.btn-booking::before{
  content:""; position:absolute; inset:5px; border:2px solid #fff; pointer-events:none;
}
.btn-booking:hover{ background:#0b2382; }

/* ---------- フッター ---------- */
.footer{
  position:relative; z-index:1; background:var(--orange); color:#fff; text-align:center;
  padding:22px 16px; font-size:12.5px; line-height:1.9;
}
.footer p{ margin:0 0 6px; font-weight:700; }
.footer small{ font-size:11px; opacity:.9; }

/* ---------- SP用 予約バー ---------- */
.sp-reserve{
  position:fixed; left:0; bottom:0; width:100%; z-index:80; display:none;
  background:var(--orange); color:#fff; text-align:center; font-weight:900; font-size:17px;
  padding:15px; box-shadow:0 -2px 10px rgba(0,0,0,.2); letter-spacing:.1em;
}

/* ---------- ライトボックス ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:90vw; max-height:82vh; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.6); }
.lightbox__close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:20px;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:30px; border-radius:50%; line-height:1;
}
.lightbox__prev{ left:16px; } .lightbox__next{ right:16px; }
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.3); }

/* =========================================================
   レスポンシブ
   ========================================================= */

/* サイドレールを隠す幅（550列 + 両側レール分が確保できない） */
@media (max-width:1099px){
  .rail{ display:none; }
  .sp-reserve{ display:block; }
  .hero{ padding-bottom:90px; }
}

/* タブレット以下：ヘッダーをバーガーに */
@media (max-width:1024px){
  .gnav{ display:none; }
  .burger{ display:flex; }
}

/* スマホ */
@media (max-width:600px){
  :root{ --header-h:56px; }
  .content{ box-shadow:none; }
  .block{ padding:26px 16px; }
  .banner{ padding:18px 30px; }
  .banner b{ font-size:19px; }
  .tour__banner{ padding:26px 20px; width:calc(100% - 28px); }
  .tour__banner b{ font-size:19px; }
  .tour__body{ padding:18px 14px 0; }
  .flow{ margin:32px -14px 0; padding:30px 0 6px; }
  .flow__steps{ max-width:80%; }
  .flow__guide--a{ height:92px; width:auto; top:-24px; right:6px; }
  .flow__guide--a.flow__guide--left{ left:6px; right:auto; }
  .flow__guide--b{ width:106px; bottom:-46px; right:-4px; }
  .tour__body .thumbs{ margin:0 -14px; }
  .cform__row{ flex-direction:column; gap:4px; }
  .cform__row label{ flex:none; padding-top:0; }
  body{ padding-bottom:56px; } /* SP予約バー分 */
}