/* ====================================================================
   沖繩島旅 ─ Japanese Travel Magazine Style
   Inspired by layout.jpg: editorial asymmetry, organic shapes,
   calligraphy headings, photo mosaics, speech-bubble tips
   ==================================================================== */

/* ── Reset & Foundation ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:18px}
body{
  font-family:'Noto Sans TC',sans-serif;
  background:#faf7f2;
  color:#2c2c2c;
  line-height:1.75;
  overflow-x:hidden;
  /* subtle paper grain */
  background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── Scroll Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ── Typography ── */
.section-label{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.8rem;letter-spacing:.15em;
  color:#7eaa92;
  margin-bottom:4px;
}
.section-heading{
  font-family:'Shippori Mincho','Zen Maru Gothic',serif;
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;
  color:#2a4a3f;
  line-height:1.2;
  margin-bottom:12px;
}
.section-head{text-align:center;margin-bottom:56px}

/* ── Wave Dividers (organic section transitions like layout.jpg) ── */
.wave-divider{
  display:block;width:100%;height:80px;
  position:relative;z-index:2;
  margin-top:-1px;
}
.wave-flip{transform:scaleY(-1);margin-top:0;margin-bottom:-1px}

/* ── Buttons ── */
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  background:#3a7d5c;color:#fff;
  border:none;border-radius:6px;
  font-weight:700;font-size:1rem;
  cursor:pointer;
  transition:background .25s,transform .2s;
}
.btn-cta:hover{background:#2d6349;transform:translateY(-2px)}
.btn-ghost{
  padding:14px 28px;
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:6px;font-weight:600;cursor:pointer;
  transition:background .25s;
}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-line-lg{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  background:#06C755;color:#fff;
  border:none;border-radius:6px;
  font-weight:700;cursor:pointer;
  transition:background .25s;
}
.btn-line-lg:hover{background:#05a848}

/* ====================================================================
   NAVBAR
   ==================================================================== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .3s;
}
.navbar.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.07)}
.nav-inner{
  max-width:1100px;margin:0 auto;
  padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{
  font-family:'Shippori Mincho',serif;
  font-size:1.3rem;font-weight:800;
  color:#2a4a3f;
}
.nav-brand span{color:#7eaa92;font-weight:400}
.nav-links{display:flex;gap:28px}
.nav-links a{
  font-size:.92rem;font-weight:500;
  color:#555;transition:color .2s;
}
.nav-links a:hover{color:#3a7d5c}
.nav-end{display:flex;align-items:center;gap:12px}
.nav-line{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:6px;
  background:#06C755;color:#fff;
  font-size:.88rem;font-weight:600;
  transition:background .25s;
}
.nav-line:hover{background:#05a848}
.nav-line span{display:inline}
.nav-cta{
  padding:8px 20px;border:none;border-radius:6px;
  background:#3a7d5c;color:#fff;
  font-weight:700;font-size:.88rem;cursor:pointer;
  transition:background .25s;
}
.nav-cta:hover{background:#2d6349}
.nav-toggle{
  display:none;width:36px;height:36px;
  background:none;border:none;cursor:pointer;
  position:relative;
}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{
  display:block;width:22px;height:2px;
  background:#2a4a3f;border-radius:2px;
  position:absolute;left:7px;transition:.3s;
}
.nav-toggle span{top:17px}
.nav-toggle::before{content:'';top:10px}
.nav-toggle::after{content:'';top:24px}

@media(max-width:820px){
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:rgba(250,247,242,.98);
    flex-direction:column;
    padding:20px;
    gap:20px;
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }
  .nav-links.active{display:flex}
  .nav-end{display:none}
  .nav-toggle{display:block}
  /* Nav toggle active animation */
  .nav-toggle.active span{opacity:0}
  .nav-toggle.active::before{transform:rotate(45deg);top:17px}
  .nav-toggle.active::after{transform:rotate(-45deg);top:17px}
}

/* ====================================================================
   HERO
   ==================================================================== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-visual{position:absolute;inset:0}
.hero-photo{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(20,45,35,.15) 0%,
    rgba(20,45,35,.5) 60%,
    rgba(20,45,35,.75) 100%
  );
}
.hero .wave-divider {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  margin:0;
}
.hero-body{
  position:relative;z-index:5;
  padding:0 24px;
  max-width:800px;
  width:100%;
  color:#fff;
  text-align:center;
}
.hero-eyebrow{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.85rem;letter-spacing:.2em;
  opacity:.85;margin-bottom:12px;
}
.hero-title{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.hero-title-large{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(3.5rem,10vw,6rem);
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
}
.hero-title-sub{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:clamp(1rem,2.5vw,1.35rem);
  font-weight:500;
  margin-top:8px;
  opacity:.9;
}
.hero-lead{
  font-size:1rem;
  line-height:1.8;
  opacity:.88;
  margin:0 auto 28px auto;
  max-width:520px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

/* Speech bubble floating badge (like layout.jpg 「桜の時季も必見」) */
.hero-bubble{
  position:absolute;
  right:clamp(16px,4vw,60px);
  top:clamp(80px,12vh,140px);
  background:#fff;
  color:#c94a3a;
  padding:14px 20px;
  border-radius:20px;
  font-family:'Zen Maru Gothic',sans-serif;
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  z-index:6;
  max-width:140px;
}
.hero-bubble::after{
  content:'';position:absolute;
  bottom:-12px;left:30px;
  width:0;height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:14px solid #fff;
}
.hero-bubble span{display:block;font-size:.78rem;font-weight:500}
.hero-bubble strong{font-size:1.5rem;font-weight:900;line-height:1.1}

@media(max-width:768px){
  .hero{min-height:80vh;}
  .hero-bubble{right:16px;top:80px;padding:10px 14px;max-width:120px}
  .hero-bubble strong{font-size:1.2rem}
}

/* ====================================================================
   HIGHLIGHTS
   ==================================================================== */
.highlights{
  padding:80px 0 40px;
  background:#faf7f2;
}
.hl-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px 32px;
}
.hl-item{display:flex;gap:20px;align-items:flex-start}
.hl-photo{
  flex:0 0 140px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.hl-photo img{width:140px;height:140px;object-fit:cover}
.hl-text{flex:1}
.hl-stamp{
  display:inline-block;
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.72rem;font-weight:700;
  color:#fff;
  background:#7eaa92;
  padding:2px 10px;border-radius:4px;
  margin-bottom:6px;
}
.hl-text h3{
  font-family:'Shippori Mincho',serif;
  font-size:1.15rem;font-weight:700;
  line-height:1.4;margin-bottom:6px;
  color:#2a4a3f;
}
.hl-text p{font-size:.88rem;color:#666;line-height:1.7}

@media(max-width:680px){
  .hl-grid{grid-template-columns:1fr;gap:32px}
}

/* ====================================================================
   ITINERARY  (magazine-style layout from layout.jpg)
   ==================================================================== */
.itinerary{
  padding:80px 0 40px;
  background:#f0f5f3;
}

/* Each day block: asymmetric layout, alternating left/right */
.day-block{
  display:grid;
  grid-template-columns:180px 1fr;
  grid-template-rows:auto auto;
  gap:16px 28px;
  margin-bottom:72px;
  position:relative;
}
.day-block--right{
  grid-template-areas:
    "stamp photos"
    "stamp info";
}
.day-block--left{
  grid-template-columns:1fr 180px;
  grid-template-areas:
    "photos stamp"
    "info   stamp";
}
.day-block--short{
  grid-template-areas:
    "stamp info";
  grid-template-rows:auto;
}

.day-stamp-wrap{
  grid-area:stamp;
  display:flex;flex-direction:column;
  align-items:center;
  gap:12px;
  padding-top:8px;
}
/* Stamp badge (like 冬旅01 in layout.jpg) */
.day-stamp{
  width:96px;height:96px;
  border-radius:50%;
  border:3px solid #7eaa92;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  position:relative;
}
.day-stamp--coral{border-color:#d4856a}
.day-stamp--gold{border-color:#c9a84c}
.day-stamp-label{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.55rem;font-weight:700;
  letter-spacing:.05em;
  color:#7eaa92;
}
.day-stamp--coral .day-stamp-label{color:#d4856a}
.day-stamp--gold .day-stamp-label{color:#c9a84c}
.day-stamp-num{
  font-family:'Shippori Mincho',serif;
  font-size:2.2rem;font-weight:800;
  line-height:1;color:#2a4a3f;
}

/* Large calligraphy-style catch copy (like 温泉であたたまる) */
.day-catch{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:800;
  line-height:1.25;
  color:#2a4a3f;
  text-align:center;
  writing-mode:horizontal-tb;
}

/* Photo mosaic */
.day-photos{
  grid-area:photos;
  display:flex;gap:12px;
  align-items:flex-start;
}
.day-photo{margin:0}
.day-photo img{
  border-radius:10px;
  box-shadow:0 3px 14px rgba(0,0,0,.1);
  object-fit:cover;
}
.day-photo--main img{width:100%;max-width:320px;height:220px}
.day-photo--sub img{width:160px;height:160px}
.day-photo--sub{align-self:flex-end}
.day-photo figcaption{
  font-size:.75rem;color:#888;
  margin-top:6px;text-align:center;
}

/* Day info */
.day-info{grid-area:info}
.day-meta{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  margin-bottom:12px;
}
.day-meta dl{display:flex;gap:6px;font-size:.9rem}
.day-meta dt{
  font-weight:700;color:#7eaa92;
  min-width:36px;
  white-space:nowrap;
}
.day-meta dd{color:#444}
.day-route{
  font-size:.92rem;
  color:#555;
  padding:10px 16px;
  background:rgba(255,255,255,.7);
  border-left:3px solid #c9a84c;
  border-radius:4px;
  margin-bottom:14px;
}

/* Speech bubble tip (like layout.jpg callout bubbles) */
.day-tip-bubble{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:16px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  font-size:.88rem;color:#555;
  line-height:1.7;
}
.day-tip-bubble::before{
  content:'💡';
  position:absolute;
  top:-14px;left:16px;
  font-size:1.1rem;
  background:#fff;
  border-radius:50%;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.day-tip-bubble p{margin:0}
.day-tip-bubble strong{color:#3a7d5c}

@media(max-width:720px){
  .day-block,.day-block--left{
    grid-template-columns:1fr;
    grid-template-areas:"stamp" "photos" "info";
  }
  .day-stamp-wrap{flex-direction:row;gap:16px;padding:0}
  .day-catch{font-size:1.4rem;text-align:left}
  .day-photos{flex-direction:column}
  .day-photo--main img,.day-photo--sub img{
    width:100%;max-width:100%;height:auto;
  }
}

/* ====================================================================
   PRICING  (ticket / coupon style like layout.jpg bottom)
   ==================================================================== */
.pricing{
  padding:80px 0;
  background:#fff;
}
.ticket{
  max-width:720px;
  margin:0 auto;
  border:2px solid #d6cfc4;
  border-radius:16px;
  overflow:hidden;
  background:#fdfcfa;
  box-shadow:0 6px 28px rgba(0,0,0,.07);
}
.ticket-top{
  display:flex;justify-content:space-between;
  align-items:center;
  padding:28px 32px;
  background:#2a4a3f;
  color:#fff;
}
.ticket-eyebrow{
  font-size:.82rem;opacity:.8;
  letter-spacing:.1em;
  margin-bottom:4px;
}
.ticket-price{
  font-family:'Shippori Mincho',serif;
  font-size:2.4rem;font-weight:800;
}
.ticket-price small{font-size:1rem;font-weight:400;margin-right:4px}
.ticket-price span{font-size:.9rem;font-weight:400;opacity:.8}
.ticket-badge{
  background:#c94a3a;
  padding:6px 16px;border-radius:6px;
  font-weight:700;font-size:.82rem;
  letter-spacing:.08em;
}
/* Tear line (like a real coupon perforation) */
.ticket-tear{
  height:0;
  border-top:2px dashed #d6cfc4;
  position:relative;
}
.ticket-tear::before,.ticket-tear::after{
  content:'';position:absolute;top:-12px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;
}
.ticket-tear::before{left:-12px}
.ticket-tear::after{right:-12px}

.ticket-bottom{padding:28px 32px}

.ticket-flight{margin-bottom:24px}
.ticket-flight h4{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:.95rem;font-weight:700;
  color:#2a4a3f;margin-bottom:12px;
}
.flight-pair{display:flex;gap:16px;flex-wrap:wrap}
.flight-one{
  flex:1;min-width:220px;
  padding:12px 16px;
  border:1px solid #e8e4dd;
  border-radius:8px;
  font-size:.88rem;
}
.flight-dir{
  display:inline-block;
  background:#3a7d5c;color:#fff;
  padding:1px 8px;border-radius:4px;
  font-size:.72rem;font-weight:700;
  margin-right:8px;
}
.flight-dir--ret{background:#d4856a}
.flight-detail{font-weight:600}
.flight-carrier{display:block;font-size:.78rem;color:#999;margin-top:4px}

.ticket-inc-exc{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;margin-bottom:28px;
}
.ticket-inc h5,.ticket-exc h5{
  font-size:.9rem;font-weight:700;margin-bottom:10px;
}
.ticket-inc h5{color:#3a7d5c}
.ticket-exc h5{color:#b54a3a}
.ticket-inc ul li,.ticket-exc ul li{
  font-size:.86rem;color:#555;
  padding:3px 0;
  padding-left:16px;
  position:relative;
}
.ticket-inc ul li::before{
  content:'✓';position:absolute;left:0;color:#3a7d5c;font-weight:700;
}
.ticket-exc ul li::before{
  content:'✕';position:absolute;left:0;color:#b54a3a;font-weight:700;
}
.ticket-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;
}

@media(max-width:600px){
  .ticket-top{flex-direction:column;align-items:flex-start;gap:12px}
  .ticket-inc-exc{grid-template-columns:1fr}
  .ticket-bottom{padding:20px}
}

/* ====================================================================
   FAQ  (native <details> — no JS needed)
   ==================================================================== */
.faq{
  padding:80px 0;
  background:#faf7f2;
}
.faq-list{max-width:680px;margin:0 auto}
.faq-item{
  border-bottom:1px solid #e4dfda;
  padding:0;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 4px;
  font-weight:700;font-size:1rem;
  color:#2a4a3f;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:1.4rem;font-weight:300;
  color:#999;transition:transform .25s;
}
.faq-item[open] summary::after{content:'−'}
.faq-item p{
  padding:0 4px 20px;
  font-size:.92rem;color:#666;line-height:1.8;
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer{
  background:#2a4a3f;color:rgba(255,255,255,.7);
  padding:36px 0 20px;
}
.footer-inner{
  display:flex;justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.footer-brand{
  font-family:'Shippori Mincho',serif;
  font-size:1.2rem;font-weight:800;
  color:#fff;
}
.footer-brand span{color:#7eaa92;font-weight:400}
.footer-nav{display:flex;gap:20px;font-size:.88rem}
.footer-nav a:hover{color:#fff}
.footer-copy{text-align:center;font-size:.78rem;opacity:.5}

/* ====================================================================
   MOBILE STICKY BAR
   ==================================================================== */
.mobile-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:rgba(250,247,242,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(0,0,0,.08);
  padding:8px 16px;
  align-items:center;justify-content:space-between;
}
.mobile-bar-info small{display:block;font-size:.7rem;color:#999}
.mobile-bar-info strong{font-size:1rem;color:#2a4a3f}
.mobile-bar-btn{
  padding:10px 22px;border:none;border-radius:6px;
  background:#3a7d5c;color:#fff;
  font-weight:700;font-size:.9rem;cursor:pointer;
}

@media(max-width:767px){
  .mobile-bar{display:flex}
  body{padding-bottom:64px}
}

/* ====================================================================
   MODAL
   ==================================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(20,30,25,.55);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal-box{
  background:#fff;border-radius:14px;
  width:100%;max-width:480px;
  padding:36px 32px;position:relative;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  transform:translateY(16px);
  transition:transform .3s;
}
.modal-overlay.active .modal-box{transform:translateY(0)}
.modal-x{
  position:absolute;top:14px;right:18px;
  background:none;border:none;font-size:1.6rem;
  color:#999;cursor:pointer;
}
.modal-title{
  font-family:'Shippori Mincho',serif;
  font-size:1.4rem;font-weight:800;
  color:#2a4a3f;margin-bottom:4px;
}
.modal-sub{font-size:.88rem;color:#888;margin-bottom:24px}
.modal-form{display:flex;flex-direction:column;gap:14px}
.modal-form label{
  display:flex;flex-direction:column;gap:4px;
  font-size:.88rem;font-weight:600;color:#444;
}
.modal-form input,.modal-form select,.modal-form textarea{
  padding:10px 12px;
  border:1.5px solid #ddd;border-radius:6px;
  transition:border-color .2s;
}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{
  outline:none;border-color:#3a7d5c;
}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}