:root{
    --red:#C1442D;
    --teal:#1F3D3D;
    --indigo:#2C3E50;
    --jade:#7FA99B;
    --cream:#F6EFE3;
    --paper:#FCF8EF;
    --gold:#D4A24E;
    --ink:#2A2622;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Noto Sans JP', sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 1px 1px, rgba(42,38,34,.035) 1px, transparent 1px) 0 0/22px 22px,
      var(--cream);
    line-height:1.85;
  }
  h1,h2,h3,.serif{font-family:'Noto Serif JP', serif;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .illus img, .course-illus img, .article-illus img, .pick-illus img{
    width:100%; height:100%; object-fit:cover;
  }

  /* ===== Header ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(252,248,239,.92);
    backdrop-filter:blur(6px);
    border-bottom:2px solid var(--ink);
  }
  .nav-wrap{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .logo{
    display:flex; align-items:center; gap:12px;
    font-family:'Zen Maru Gothic',serif;
    font-size:1.5rem; font-weight:900; letter-spacing:.04em;
  }
  .logo .seal{
    width:42px;height:42px;border:3px solid var(--red);border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    color:var(--red); font-weight:900; font-size:1.2rem;
    transform:rotate(-6deg);
    font-family:'Noto Serif JP',serif;
    flex-shrink:0;
  }
  nav ul{display:flex; gap:30px; list-style:none;}
  nav a{font-weight:500; font-size:.92rem; position:relative; padding-bottom:4px;}
  nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--red); transition:width .25s ease;
  }
  nav a:hover::after{width:100%;}

  /* ===== Section shared ===== */
  section{max-width:1200px; margin:0 auto; padding:72px 24px;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:44px; flex-wrap:wrap; gap:16px;
    border-bottom:2px solid var(--ink); padding-bottom:18px;
  }
  .section-head .tag{
    font-size:.78rem; letter-spacing:.22em; color:var(--red); font-weight:700;
    text-transform:uppercase; display:block; margin-bottom:8px;
  }
  .section-head h2{font-size:clamp(1.7rem,3.6vw,2.3rem);}
  .section-head .more{font-size:.9rem; font-weight:700; white-space:nowrap;}
  .section-head .more:hover{color:var(--red);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 28px; border-radius:2px; font-weight:700; font-size:.95rem;
    transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; border:none;
  }
  .btn-primary{background:var(--red); color:#fff;}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(193,68,45,.35);}
  .btn-outline{border:2px solid var(--ink); background:transparent;}
  .btn-outline:hover{background:var(--ink); color:#fff;}

  /* ===== HERO with map ===== */
  .hero{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
    padding-top:60px;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.8rem; letter-spacing:.22em; color:var(--teal); font-weight:700;
    margin-bottom:18px; text-transform:uppercase;
  }
  .hero-eyebrow .line{width:36px; height:1px; background:var(--teal);}
  .hero h1{
    font-size:clamp(2.4rem,5vw,3.7rem);
    font-weight:900; line-height:1.35; margin-bottom:22px;
  }
  .hero h1 .accent{color:var(--red);}
  .hero p{font-size:1.05rem; max-width:480px; color:#54493f; margin-bottom:32px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-map{position:relative;}
  .hero-map svg{width:100%; height:auto;}
  .map-pin-label{
    font-family:'Noto Serif JP',serif; font-size:11px; font-weight:700; fill:var(--ink);
  }

  /* ===== Region cards ===== */
  .region-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .region-card{
    background:var(--paper); border:1px solid #e0d6c4; border-radius:10px; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .region-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(42,38,34,.13);}
  .region-card .illus{aspect-ratio:4/3;}
  .region-body{padding:18px 20px;}
  .region-body .region-en{font-size:.72rem; letter-spacing:.18em; color:var(--gold); font-weight:700; text-transform:uppercase;}
  .region-body h3{font-size:1.15rem; margin:4px 0 8px;}
  .region-body p{font-size:.85rem; color:#6b5f52;}

  /* ===== Model courses ===== */
  .course-scroll{
    display:flex; gap:24px; overflow-x:auto; padding-bottom:16px;
    scroll-snap-type:x mandatory;
  }
  .course-scroll::-webkit-scrollbar{height:6px;}
  .course-scroll::-webkit-scrollbar-thumb{background:var(--gold); border-radius:4px;}
  .course-card{
    flex:0 0 320px; scroll-snap-align:start;
    background:var(--paper); border:1px solid #e0d6c4; border-radius:10px;
    overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
  }
  .course-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(42,38,34,.15);}
  .course-illus{height:180px; position:relative;}
  .course-days{
    position:absolute; top:12px; left:12px;
    background:var(--teal); color:#fff; font-size:.75rem; font-weight:700;
    padding:5px 12px; border-radius:2px; letter-spacing:.05em; z-index:2;
  }
  .course-body{padding:20px;}
  .course-body h3{font-size:1.1rem; margin-bottom:8px;}
  .course-body p{font-size:.88rem; color:#6b5f52; margin-bottom:14px;}
  .course-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .course-tags span{
    font-size:.72rem; border:1px solid var(--gold); color:#8a6a2c;
    padding:3px 10px; border-radius:20px;
  }
  .course-itinerary{
    list-style:none; margin-top:14px; padding-top:14px;
    border-top:1px dashed #ddd2bd; display:flex; flex-direction:column; gap:8px;
  }
  .course-itinerary li{font-size:.82rem; color:#54493f; display:flex; gap:8px;}
  .course-itinerary .day-label{
    flex-shrink:0; font-weight:700; color:var(--teal); font-family:'Noto Serif JP',serif;
    font-size:.78rem; white-space:nowrap;
  }

  /* ===== Articles ===== */
  .article-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px;}
  .article-card{display:flex; flex-direction:column; border-bottom:1px solid #ddd2bd; padding-bottom:18px; transition:transform .25s ease, box-shadow .25s ease;}
  .article-card:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(42,38,34,.12);}
  .article-illus{width:100%; aspect-ratio:16/10; border-radius:8px; margin-bottom:14px; overflow:hidden;}
  .article-card .cat{font-size:.72rem; color:var(--red); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px;}
  .article-card h3{font-size:1.05rem; margin-bottom:6px;}
  .article-card p{font-size:.85rem; color:#6b5f52;}
  .article-card:hover h3{color:var(--red);}
  .article-meta{font-size:.78rem; color:#a89a87; margin-top:10px;}

  /* ===== Today-I-Learned Series ===== */
  .series-scroll{
    display:flex; gap:20px; overflow-x:auto; padding-bottom:16px;
    scroll-snap-type:x mandatory;
  }
  .series-scroll::-webkit-scrollbar{height:6px;}
  .series-scroll::-webkit-scrollbar-thumb{background:var(--gold); border-radius:4px;}
  .series-card{
    flex:0 0 260px; scroll-snap-align:start;
    display:flex; flex-direction:column; gap:14px;
    background:var(--paper); border:1px solid #e0d6c4; border-radius:10px;
    padding:24px 20px; transition:transform .25s ease, box-shadow .25s ease;
  }
  .series-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(42,38,34,.13);}
  .series-step{display:flex; align-items:center; gap:10px;}
  .series-step .num{font-family:'Noto Serif JP',serif; font-weight:900; font-size:1.4rem; color:var(--gold);}
  .series-step .label{font-size:.72rem; letter-spacing:.12em; color:var(--red); font-weight:700; text-transform:uppercase;}
  .series-card h3{font-size:1rem; line-height:1.65;}
  .series-card p{font-size:.85rem; color:#6b5f52;}
  .series-card .more-link{font-size:.82rem; font-weight:700; color:var(--teal); margin-top:auto;}
  .series-card:hover .more-link{color:var(--red);}

  /* ===== Testimonials ===== */
  .testimonial-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .testimonial{background:#fff; border:1px solid #e0d6c4; border-radius:10px; padding:28px; position:relative;}
  .testimonial::before{
    content:'"'; font-family:'Noto Serif JP',serif; font-size:3.5rem; color:var(--gold);
    position:absolute; top:6px; left:18px; line-height:1; opacity:.5;
  }
  .testimonial p{font-size:.92rem; margin:24px 0 18px; color:#54493f;}
  .testimonial-author{display:flex; align-items:center; gap:12px;}
  .avatar{
    width:42px; height:42px; border-radius:50%; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Noto Serif JP',serif;
  }
  .testimonial-author .name{font-weight:700; font-size:.9rem;}
  .testimonial-author .trip{font-size:.78rem; color:#a89a87;}
  .stars{color:var(--gold); font-size:.85rem; margin-top:8px;}

  /* ===== Promo ===== */
  .promo{
    background:var(--teal); color:var(--cream); border-radius:12px;
    padding:48px; display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center;
    position:relative; overflow:hidden;
  }
  .promo::after{
    content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
    border:60px solid rgba(212,162,78,.12); border-radius:50%; pointer-events:none;
  }
  .promo .tag{color:#f1cf8d; font-size:.8rem; letter-spacing:.22em; font-weight:700; text-transform:uppercase; margin-bottom:10px; display:block; text-shadow:0 1px 2px rgba(0,0,0,.35);}
  .promo h2{font-size:1.85rem; margin-bottom:14px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.35); position:relative; z-index:1;}
  .promo p{color:#cfe0dc; font-size:.95rem; margin-bottom:24px; max-width:480px; text-shadow:0 1px 3px rgba(0,0,0,.25); position:relative; z-index:1;}
  .promo-stats{display:flex; gap:32px; flex-wrap:wrap; position:relative; z-index:1;}
  .promo-stats div{text-align:center;}
  .promo-stats .num{font-family:'Noto Serif JP',serif; font-size:2.2rem; font-weight:900; color:var(--gold);}
  .promo-stats .label{font-size:.78rem; color:#cfe0dc;}

  /* ===== Picks ===== */
  .pick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .pick-card{background:var(--paper); border:1px solid #e0d6c4; border-radius:10px; overflow:hidden; transition:transform .25s ease;}
  .pick-card:hover{transform:translateY(-4px);}
  .pick-illus{height:120px;}
  .pick-body{padding:16px;}
  .pick-body .pr-label{font-size:.65rem; letter-spacing:.12em; color:#a89a87; text-transform:uppercase; margin-bottom:6px; display:block;}
  .pick-body h4{font-size:.95rem; margin-bottom:8px;}
  .pick-price{display:flex; justify-content:space-between; align-items:center;}
  .pick-price .price{font-weight:900; color:var(--red); font-family:'Noto Serif JP',serif; font-size:1.1rem;}
  .pick-price a{font-size:.8rem; font-weight:700; color:var(--teal);}
  .pick-price a:hover{color:var(--red);}

  /* ===== FAQ ===== */
  .faq-list{display:flex; flex-direction:column; gap:14px; max-width:820px;}
  .faq-item{background:var(--paper); border:1px solid #e0d6c4; border-radius:10px; overflow:hidden;}
  .faq-q{
    width:100%; text-align:left; padding:20px 24px; font-weight:700; font-size:1rem;
    background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    font-family:inherit; color:var(--ink);
  }
  .faq-q::after{content:'+'; font-size:1.4rem; color:var(--red); font-weight:400; transition:transform .25s ease;}
  .faq-item.open .faq-q::after{transform:rotate(45deg);}
  .faq-a{padding:0 24px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; font-size:.92rem; color:#6b5f52;}
  .faq-item.open .faq-a{max-height:200px; padding:0 24px 22px;}

  /* ===== Newsletter ===== */
  .newsletter{background:var(--red); color:#fff; border-radius:12px; padding:48px; text-align:center;}
  .newsletter h2{color:#fff; margin-bottom:10px; font-size:1.85rem;}
  .newsletter p{color:#ffe3d9; margin-bottom:24px;}
  .newsletter form{display:flex; justify-content:center; gap:12px; max-width:440px; margin:0 auto; flex-wrap:wrap;}
  .newsletter input{flex:1; min-width:200px; padding:14px 18px; border:none; border-radius:2px; font-size:.95rem; font-family:inherit;}
  .newsletter .btn-primary{background:var(--ink);}

  /* ===== Footer ===== */
  footer{background:var(--ink); color:#cfc6ba; margin-top:40px;}
  .footer-wrap{max-width:1200px; margin:0 auto; padding:56px 24px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  .footer-wrap h4{color:#fff; font-size:.95rem; margin-bottom:16px; letter-spacing:.05em;}
  .footer-wrap ul{list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.88rem;}
  .footer-wrap ul a:hover{color:var(--gold);}
  .footer-logo{display:flex; align-items:center; gap:10px; font-family:'Zen Maru Gothic',serif; font-size:1.3rem; font-weight:900; color:#fff; margin-bottom:14px;}
  .footer-logo .seal{width:36px;height:36px;border:2px solid var(--gold);border-radius:8px; display:flex;align-items:center;justify-content:center; color:var(--gold); font-weight:900; transform:rotate(-6deg); font-family:'Noto Serif JP',serif;}
  .footer-bottom{border-top:1px solid #43403a; text-align:center; padding:20px 24px; font-size:.78rem; color:#8a8378;}
  .ad-disclosure{font-size:.72rem; color:#a89a87; margin-top:8px; max-width:580px; line-height:1.6;}

  /* ===== Chat Widget ===== */
  .chat-widget{
    position:fixed; right:20px; bottom:20px; z-index:200;
    display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  }
  .chat-toggle{
    display:flex; align-items:center; gap:10px;
    background:var(--red); color:#fff; border:none; border-radius:50px;
    padding:14px 24px; font-weight:700; font-size:.95rem; font-family:inherit; cursor:pointer;
    box-shadow:0 10px 28px rgba(193,68,45,.4);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .chat-toggle:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(193,68,45,.45);}
  .chat-toggle-icon{font-size:1.25rem; line-height:1;}
  .chat-widget.open .chat-toggle{display:none;}
  .chat-window{
    width:340px; max-width:calc(100vw - 40px); height:460px; max-height:70vh;
    background:var(--paper); border:1px solid #e0d6c4; border-radius:14px;
    box-shadow:0 24px 60px rgba(42,38,34,.28);
    display:flex; flex-direction:column; overflow:hidden;
    opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .chat-widget.open .chat-window{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .chat-header{
    background:var(--teal); color:#fff; padding:16px 18px;
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  }
  .chat-header-title{font-weight:700; font-size:.95rem; font-family:'Noto Serif JP',serif;}
  .chat-header-sub{font-size:.72rem; color:#cfe0dc; margin-top:4px;}
  .chat-close{
    background:none; border:none; color:#fff; font-size:1.4rem; line-height:1;
    cursor:pointer; padding:0; flex-shrink:0;
  }
  .chat-messages{
    flex:1; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:10px; font-size:.86rem;
  }
  .chat-msg{max-width:85%; padding:10px 14px; border-radius:14px; line-height:1.65;}
  .chat-msg.bot{background:#fff; border:1px solid #e0d6c4; align-self:flex-start; border-bottom-left-radius:4px;}
  .chat-msg.user{background:var(--red); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
  .chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid #e0d6c4; background:var(--paper);}
  .chat-input-row input{
    flex:1; min-width:0; padding:10px 14px; border:1px solid #ddd2bd; border-radius:20px;
    font-size:.85rem; font-family:inherit; background:#fff;
  }
  .chat-input-row input:focus{outline:2px solid var(--teal); outline-offset:1px;}
  .chat-send{padding:10px 18px; border-radius:20px; font-size:.85rem;}

  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .hero{grid-template-columns:1fr;}
    .article-grid{grid-template-columns:1fr 1fr;}
    .region-grid{grid-template-columns:repeat(2,1fr);}
    .testimonial-grid{grid-template-columns:1fr; gap:18px;}
    .promo{grid-template-columns:1fr; padding:32px;}
    .promo::after{width:140px; height:140px; right:-40px; top:-40px; border-width:40px;}
    .pick-grid{grid-template-columns:repeat(2,1fr);}
    .footer-wrap{grid-template-columns:1fr 1fr; gap:32px;}
  }
  @media (max-width: 640px){
    nav ul{display:none;}
    .article-grid{grid-template-columns:1fr;}
    .pick-grid{grid-template-columns:1fr 1fr;}
    .region-grid{grid-template-columns:1fr;}
    .testimonial-grid{grid-template-columns:1fr;}
    .promo-stats{gap:18px;}
    .promo-stats .num{font-size:1.6rem;}
    .footer-wrap{grid-template-columns:1fr;}
    .chat-widget{right:12px; bottom:12px;}
    .chat-window{width:calc(100vw - 24px); height:65vh;}
    .chat-toggle-label{display:none;}
    .chat-toggle{padding:14px; border-radius:50%;}
  }