*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sea:#00b4d8;        /* 沖縄の海 */
  --sea-deep:#0077b6;   /* 深い海 */
  --emerald:#17c3a3;    /* エメラルドグリーン */
  --sky:#a6e3ff;        /* 空 */
  --sand:#fff6e8;       /* 砂浜 */
  --coral:#ff5a5f;      /* サンゴ */
  --hibiscus:#e63946;   /* ハイビスカス */
  --sun:#ffc93c;        /* 太陽 */
  --ink:#155e75;        /* 見出しの藍色 */
  --line:#06C755;       /* LINEグリーン */
}
body{font-family:'Zen Maru Gothic',sans-serif;background:var(--sand);color:#3a3a3a;overflow-x:hidden}

/* ===== TICKER ===== */
.ticker{
  background:linear-gradient(90deg,var(--emerald),var(--sea),var(--emerald));
  background-size:200%;
  animation:tickerGrad 6s linear infinite;
  padding:9px 0; overflow:hidden; white-space:nowrap;
  position:relative; z-index:100;
}
@keyframes tickerGrad{from{background-position:0%}to{background-position:200%}}
.ticker-inner{
  display:inline-block;
  animation:tickerMove 20s linear infinite;
  font-weight:700; font-size:0.92rem; color:white;
  text-shadow:0 1px 4px rgba(0,80,100,0.3);
  letter-spacing:0.08em;
}
@keyframes tickerMove{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 18px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  transition:box-shadow 0.3s;
}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,120,160,0.15)}
.header-logo{
  font-weight:900;font-size:clamp(1.05rem,3.5vw,1.35rem);
  color:var(--ink);letter-spacing:0.02em;white-space:nowrap;
}

/* ===== LINE / IG BUTTONS ===== */
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#06C755,#04a344);
  color:white;font-weight:900;text-decoration:none;
  border-radius:50px;
  box-shadow:0 6px 18px rgba(6,199,85,0.35);
  transition:transform 0.25s,box-shadow 0.25s;
  white-space:nowrap;
}
.btn-line:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px rgba(6,199,85,0.45)}
.btn-header{font-size:0.9rem;padding:9px 20px}
.btn-hero{
  font-size:clamp(1.1rem,3.5vw,1.4rem);
  padding:16px 44px;
  animation:ctaPulse 2s ease-in-out infinite;
}
.btn-big{font-size:clamp(1.05rem,3vw,1.3rem);padding:16px 44px}
.btn-bar{font-size:1rem;padding:12px 24px;flex-shrink:0}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 6px 18px rgba(6,199,85,0.35)}
  50%{box-shadow:0 6px 30px rgba(6,199,85,0.65),0 0 0 8px rgba(6,199,85,0.12)}
}
.btn-ig{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#bc1888);
  color:white;padding:12px 28px;border-radius:50px;
  text-decoration:none;font-weight:900;
  box-shadow:0 6px 18px rgba(220,39,67,0.3);
  transition:transform 0.25s,box-shadow 0.25s;
  white-space:nowrap;
}
.btn-ig:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px rgba(220,39,67,0.4)}

/* ===== HERO (実写背景) ===== */
.hero{
  position:relative;overflow:hidden;
  background:url('images/beach-hero.jpg') center 40% / cover no-repeat, #6fc9f0;
  min-height:max(88vh,45vw);
  display:flex;align-items:center;justify-content:center;
  padding:44px 20px 120px;
  text-align:center;
}
/* 可読性のためのごく薄いオーバーレイ(上:空を少し明るく/下:波際を少し締める) */
.hero-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(0,60,90,0) 55%,
    rgba(0,60,90,0.18) 100%);
}
.hero-waves{position:absolute;bottom:-1px;left:0;right:0;line-height:0;z-index:6}
.hero-waves svg{width:100%;height:clamp(28px,5vw,64px);display:block}

/* ===== HERO CONTENT ===== */
.hero-content{
  position:relative;z-index:20;
  max-width:960px;margin:0 auto;
}
.badge-top{
  display:inline-block;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,0.9);
  color:var(--ink);font-size:clamp(0.68rem,2vw,0.92rem);
  font-weight:700;padding:6px 20px;border-radius:30px;
  margin-bottom:12px;letter-spacing:0.06em;
  box-shadow:0 4px 15px rgba(0,120,160,0.15);
  animation:fadeSlide 0.6s ease both;
}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

.hero-brand{
  font-size:clamp(2.6rem,8vw,5.5rem);font-weight:900;
  background:linear-gradient(135deg,#ff8c42 0%,var(--coral) 45%,var(--hibiscus) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,0.9)) drop-shadow(0 8px 20px rgba(230,57,70,0.3));
  line-height:1.15;letter-spacing:0.03em;
  animation:popBounce 0.9s 0.1s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes popBounce{from{opacity:0;transform:scale(0.3) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.hero-product{
  display:inline-block;
  color:white;
  font-size:clamp(1.5rem,4.5vw,3rem);font-weight:900;
  text-shadow:0 2px 8px rgba(0,50,80,0.55),0 0 26px rgba(0,50,80,0.35);
  margin:4px 0 18px;letter-spacing:0.06em;
  animation:popBounce 0.9s 0.25s cubic-bezier(.175,.885,.32,1.275) both;
}

/* package + buy block side by side on wide screens */
.hero-main{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,48px);
}
.hero-pkg{
  position:relative;display:inline-block;
  animation:popBounce 0.9s 0.4s cubic-bezier(.175,.885,.32,1.275) both;
}
.hero-pkg img{
  width:clamp(150px,30vw,250px);
  border-radius:22px;
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.75),
    0 18px 45px rgba(0,90,120,0.35);
  animation:floatPkg 4s ease-in-out infinite;
}
@keyframes floatPkg{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.hero-like{
  position:absolute;top:-14px;right:-14px;
  background:linear-gradient(135deg,var(--coral),#ff8c42);
  color:white;font-weight:900;font-size:clamp(0.7rem,2vw,0.9rem);
  padding:8px 16px;border-radius:20px;
  box-shadow:0 6px 18px rgba(230,57,70,0.45);
  white-space:nowrap;
  animation:likePulse 1.5s ease-in-out infinite;
}
@keyframes likePulse{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.1) rotate(3deg)}}

.hero-buy{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,0.95);
  border-radius:28px;
  padding:22px 30px;
  box-shadow:0 12px 40px rgba(0,110,140,0.2);
  animation:popBounce 0.9s 0.55s cubic-bezier(.175,.885,.32,1.275) both;
}
.hero-price-note{
  font-size:clamp(0.82rem,2.3vw,0.98rem);font-weight:700;color:var(--ink);
}
.hero-price{
  font-size:clamp(2.2rem,6vw,3.2rem);font-weight:900;
  color:var(--hibiscus);line-height:1;
  text-shadow:0 2px 0 rgba(255,255,255,0.8);
}
.hero-price span{font-size:0.42em;font-weight:700;color:#7a7a7a}
.hero-tagline{
  font-size:clamp(0.78rem,2.2vw,0.92rem);font-weight:700;color:var(--sea-deep);
}

/* ===== MINSA DIVIDER (ミンサー織風) ===== */
.minsa{
  height:16px;position:relative;z-index:10;
  background:
    repeating-linear-gradient(90deg,
      var(--ink) 0 12px, transparent 12px 24px,
      var(--hibiscus) 24px 36px, transparent 36px 48px,
      var(--emerald) 48px 60px, transparent 60px 72px);
  background-color:var(--sand);
  opacity:0.85;
}

/* ===== SECTION BASE ===== */
.sec{padding:76px 20px;text-align:center;position:relative;overflow:hidden}
.sec-sand{background:var(--sand)}
/* 青海波(せいがいは)模様 */
.sec-aqua{
  background-color:#e6f9f6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%2300b4d8' stroke-opacity='0.12' stroke-width='1.5'%3E%3Ccircle cx='0' cy='20' r='38'/%3E%3Ccircle cx='0' cy='20' r='30'/%3E%3Ccircle cx='0' cy='20' r='22'/%3E%3Ccircle cx='0' cy='20' r='14'/%3E%3Ccircle cx='80' cy='20' r='38'/%3E%3Ccircle cx='80' cy='20' r='30'/%3E%3Ccircle cx='80' cy='20' r='22'/%3E%3Ccircle cx='80' cy='20' r='14'/%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3C/g%3E%3C/svg%3E");
}
.sec-order{
  background-color:var(--sea);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5'%3E%3Ccircle cx='0' cy='20' r='38'/%3E%3Ccircle cx='0' cy='20' r='30'/%3E%3Ccircle cx='0' cy='20' r='22'/%3E%3Ccircle cx='0' cy='20' r='14'/%3E%3Ccircle cx='80' cy='20' r='38'/%3E%3Ccircle cx='80' cy='20' r='30'/%3E%3Ccircle cx='80' cy='20' r='22'/%3E%3Ccircle cx='80' cy='20' r='14'/%3E%3Ccircle cx='40' cy='40' r='38'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='22'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(170deg,var(--sea) 0%,var(--sea-deep) 100%);
}

/* wave separator */
.wavesep{line-height:0;position:relative;z-index:10}
.wavesep svg{width:100%;height:clamp(30px,5vw,64px);display:block}
.wavesep-sand{background:var(--sand)}
.wavesep-aqua{background:#e6f9f6}

/* section corner palms (シルエット) */
.sec-palm{
  position:absolute;bottom:-6px;
  width:clamp(90px,13vw,165px);aspect-ratio:260/240;height:auto;
  opacity:0.14;pointer-events:none;
  color:#0e7c86;
  --palm-frond-a:currentColor;--palm-frond-b:currentColor;
  --palm-trunk:currentColor;--palm-coco:currentColor;
}
.sp-l{left:-1%}
.sp-r{right:-1%;transform:scaleX(-1)}
.sec-order .sec-palm{color:#ffffff;opacity:0.25}

/* section headers */
.stitle{
  font-size:clamp(1.9rem,5vw,3.4rem);font-weight:900;
  color:var(--ink);
  margin-bottom:6px;position:relative;display:inline-block;
}
.stitle::before,.stitle::after{content:'🌺';position:absolute;top:50%;transform:translateY(-50%);
  font-size:1.3rem;filter:drop-shadow(0 2px 4px rgba(230,57,70,0.3));}
.stitle::before{left:-2.4rem}
.stitle::after{right:-2.4rem}
.stitle-white{color:white;text-shadow:0 2px 12px rgba(0,60,90,0.35)}
.sline{
  width:100px;height:5px;margin:12px auto 40px;border-radius:5px;
  background:linear-gradient(90deg,var(--hibiscus),var(--sun),var(--emerald),var(--sea));
}

/* ===== PRODUCT + PRICE ===== */
.pkg-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;max-width:880px;margin:0 auto;
  align-items:stretch;
}
.pkg-card{
  background:white;
  border-radius:28px;overflow:hidden;
  box-shadow:0 10px 35px rgba(0,110,140,0.15);
  transition:transform 0.4s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.4s;
  position:relative;
}
.pkg-card:hover{
  transform:translateY(-10px) scale(1.02) rotate(-1deg);
  box-shadow:0 25px 55px rgba(0,110,140,0.25);
}
.pkg-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--hibiscus),var(--sun),var(--emerald),var(--sea));
}
.pkg-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pkg-body{padding:16px 20px 22px;text-align:left}
.pkg-title{font-weight:900;color:var(--ink);font-size:1.1rem;margin-bottom:5px}
.pkg-sub{font-size:0.85rem;color:#8a8a8a}
.pkg-ribbon{
  position:absolute;top:16px;left:-5px;z-index:3;
  background:linear-gradient(135deg,var(--hibiscus),#ff8c42);
  color:white;font-weight:900;font-size:0.78rem;
  padding:6px 16px 6px 14px;border-radius:0 14px 14px 0;
  box-shadow:0 4px 14px rgba(230,57,70,0.4);
}

.price-panel{
  background:white;
  border:3px solid rgba(255,201,60,0.6);
  border-radius:28px;
  padding:34px 26px;
  box-shadow:0 10px 35px rgba(255,160,0,0.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.price-icon{font-size:2.2rem}
.price-note{
  font-size:clamp(1rem,2.8vw,1.2rem);font-weight:900;color:var(--ink);line-height:1.6;
}
.price-note strong{color:var(--hibiscus)}
.price-amount{
  font-size:clamp(2.4rem,6vw,3.4rem);font-weight:900;
  color:var(--hibiscus);line-height:1;
}
.price-amount span{font-size:0.4em;font-weight:700;color:#8a8a8a}
.price-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tag{
  font-weight:900;font-size:clamp(0.82rem,2.3vw,0.95rem);
  padding:8px 20px;border-radius:30px;
}
.tag-green{background:rgba(23,195,163,0.12);border:2px solid rgba(23,195,163,0.5);color:#0d9c81}
.tag-blue{background:rgba(0,180,216,0.1);border:2px solid rgba(0,180,216,0.45);color:var(--sea-deep)}

/* ===== BENNY SECTION ===== */
.benny-sub{
  color:var(--sea-deep);font-size:clamp(1rem,3vw,1.3rem);
  font-weight:700;margin-bottom:36px;
}
.benny-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;max-width:920px;margin:0 auto 36px;
}
.bphoto{
  border-radius:24px;overflow:hidden;position:relative;
  background:white;
  border:4px solid white;
  box-shadow:0 10px 30px rgba(0,110,140,0.2);
  transition:transform 0.35s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.35s;
}
.bphoto:hover{
  transform:scale(1.04) rotate(1deg);
  box-shadow:0 20px 50px rgba(0,110,140,0.3);
}
.bphoto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.bphoto.tall img{aspect-ratio:3/4}
.bphoto-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,60,90,0.8));
  color:white;font-weight:700;font-size:0.85rem;
  padding:24px 14px 12px;text-align:left;
}
.benny-msg{
  color:#4a5a63;font-size:clamp(0.9rem,2.5vw,1.1rem);
  line-height:1.9;max-width:620px;margin:0 auto;
}
.benny-msg strong{color:var(--hibiscus)}

/* ===== PHOTO BAND (実写パララックス) ===== */
.photo-band{
  position:relative;overflow:hidden;
  background:url('images/beach-splash.jpg') center 40% / cover no-repeat, #0a9bc4;
  background-attachment:fixed;
  padding:clamp(110px,20vh,190px) 20px;
  text-align:center;
}
.photo-band::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,50,80,0.25),rgba(0,50,80,0.05) 45%,rgba(0,50,80,0.3));
}
.band-inner{position:relative;z-index:1}
.band-copy{
  color:white;font-weight:900;
  font-size:clamp(1.3rem,4vw,2.4rem);
  line-height:1.8;letter-spacing:0.05em;
  text-shadow:0 2px 6px rgba(0,40,70,0.55),0 0 30px rgba(0,40,70,0.35);
}
@media(max-width:768px){
  .photo-band{background-attachment:scroll}
}

/* ===== ORDER ===== */
.order-lead{color:rgba(255,255,255,0.9);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.order-cta{margin-top:32px}
.ig-block{margin-top:64px}
.ig-title{
  font-size:clamp(1.3rem,4vw,2rem);font-weight:900;color:white;
  text-shadow:0 2px 10px rgba(0,60,90,0.3);
  margin-bottom:14px;
}
.ig-lead{
  color:rgba(255,255,255,0.85);font-size:0.95rem;margin-bottom:22px;line-height:1.8;
}

/* ===== FOOTER ===== */
footer{
  background:linear-gradient(170deg,#0a5f80,#083d57);
  color:white;text-align:center;
  position:relative;overflow:hidden;
}
.footer-waves{line-height:0}
.footer-waves svg{width:100%;height:clamp(24px,4vw,50px);display:block}
.footer-inner{padding:44px 20px 40px;position:relative;z-index:1}
.footer-logo{
  font-size:2.2rem;font-weight:900;
  background:linear-gradient(135deg,#ffe066,#ffc93c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;
}
.footer-tag{font-size:0.98rem;color:rgba(255,255,255,0.75);margin-bottom:22px}
.footer-links{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:8px;
}
.footer-links .btn-line{padding:12px 28px;font-size:1rem}
.footer-address{
  display:inline-block;
  font-style:normal;
  font-size:0.88rem;line-height:1.9;
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;
  padding:14px 32px;
  margin-top:20px;
}
.footer-copy{font-size:0.78rem;opacity:0.5;margin-top:24px;line-height:1.8}

/* ===== MOBILE FIXED CTA BAR ===== */
.cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  box-shadow:0 -6px 25px rgba(0,80,110,0.18);
  transform:translateY(110%);
  transition:transform 0.35s ease;
}
.cta-bar.show{transform:translateY(0)}
.cta-bar-price{
  font-size:0.8rem;font-weight:700;color:var(--ink);line-height:1.4;
  display:flex;flex-direction:column;align-items:flex-start;
}
.cta-bar-price strong{font-size:1.25rem;color:var(--hibiscus)}
.cta-bar-price span{font-size:0.68rem;color:#8a8a8a;font-weight:700}
@media(min-width:769px){
  .cta-bar{display:none}
}

/* ===== SCROLL TOP ===== */
.stbtn{
  position:fixed;bottom:24px;right:24px;z-index:999;
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--sea),var(--emerald));
  color:white;font-size:1.3rem;
  box-shadow:0 6px 20px rgba(0,140,180,0.4);
  opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;
  display:flex;align-items:center;justify-content:center;
}
.stbtn.show{opacity:1;pointer-events:all}
.stbtn:hover{transform:scale(1.12) translateY(-3px)}
@media(max-width:768px){
  .stbtn{bottom:84px}
}

/* ===== REVEAL ===== */
.rev{opacity:0;transform:translateY(44px);transition:opacity 0.75s ease,transform 0.75s ease}
.rev.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.1s}.d2{transition-delay:0.2s}.d3{transition-delay:0.3s}.d4{transition-delay:0.4s}