@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{--ink:#193b3c;--muted:#667b78;--green:#246b5d;--green-dark:#174d44;--mint:#e8f3ed;--cream:#f7f6f0;--line:#dce5df;--orange:#e8a45d;--white:#fff;--shadow:0 16px 42px rgba(24,61,55,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans JP",sans-serif;line-height:1.7}a{color:inherit}.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;padding:0 24px;margin:auto}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:var(--green);color:#fff;border-radius:13px;font-size:22px;font-weight:800}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:.02em}.brand small{font-size:9px;letter-spacing:.16em;color:var(--muted)}.header-note{font-size:12px;color:var(--muted)}main{max-width:1180px;margin:auto;padding:0 24px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:390px;background:var(--cream);border-radius:26px;overflow:hidden}.hero-copy{padding:54px 48px;align-self:center}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--green);margin:0 0 12px}.hero h1{font-size:clamp(30px,4vw,47px);line-height:1.42;letter-spacing:.02em;margin:0 0 17px}.hero-lead{font-size:14px;color:#506966;line-height:2}.hero-link{display:inline-flex;gap:24px;align-items:center;margin-top:12px;padding:12px 18px;border-radius:999px;background:var(--green);color:#fff;text-decoration:none;font-size:13px;font-weight:700}.hero-art{position:relative;min-height:330px;overflow:hidden;background:linear-gradient(160deg,#dcefe9 0%,#f5e8cb 100%)}.sun{position:absolute;width:78px;height:78px;background:#f1bc72;border-radius:50%;right:20%;top:16%}.mountain{position:absolute;bottom:29%;width:0;height:0;border-left:210px solid transparent;border-right:210px solid transparent;border-bottom:260px solid #7eaaa0}.mountain-back{right:7%;border-bottom-color:#a4c4b7;transform:scale(1.15)}.mountain-front{left:-15%;border-left-width:240px;border-right-width:240px;border-bottom-width:220px;border-bottom-color:#4c8579}.lake{position:absolute;bottom:0;left:0;right:0;height:34%;background:linear-gradient(180deg,#8abcb4,#4e8f8b);clip-path:polygon(0 14%,20% 0,47% 22%,68% 3%,100% 19%,100% 100%,0 100%)}.hero-stamp{position:absolute;bottom:24px;right:25px;display:grid;place-items:center;width:85px;height:85px;background:#fffdf3e8;border-radius:50%;font-weight:800;text-align:center;line-height:1.5;font-size:15px;transform:rotate(8deg)}.weather-strip{margin:22px 0 66px;padding:20px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--mint);border-radius:17px}.weather-strip-title{display:flex;align-items:center;gap:15px}.weather-symbol{display:grid;place-items:center;width:48px;height:48px;background:#fff;border-radius:15px;font-size:25px}.weather-strip strong,.weather-strip small{display:block}.weather-strip strong{font-size:15px}.weather-strip small{font-size:12px;color:var(--muted)}.weather-metrics{display:flex;gap:18px;align-items:center;font-size:13px;font-weight:700}.weather-metrics span:first-child{font-size:22px}.planner-section{scroll-margin-top:25px}.section-heading{text-align:center;margin-bottom:28px}.section-heading h2,.results-heading h2{font-size:clamp(23px,3vw,31px);line-height:1.5;margin:0 0 8px}.section-heading>p:last-child{font-size:13px;color:var(--muted);margin:0}.planner-card{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);padding:30px;border-radius:22px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700}.form-grid select,.form-grid input{width:100%;height:48px;padding:0 13px;border:1px solid #d4dfd8;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px}.form-grid select:focus,.form-grid input:focus{outline:2px solid #9bc6b5;outline-offset:1px}.field-note{font-size:10px;font-weight:400;color:var(--muted)}.form-actions{display:flex;gap:12px;align-items:center;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:11px 18px;border-radius:999px;font:inherit;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--green);color:#fff}.button-primary:hover{background:var(--green-dark)}.button-secondary{background:#fff;color:var(--green);border-color:#cbdad1}.form-footnote{font-size:10px;color:var(--muted);margin:18px 0 0}.results-section{margin:70px 0 20px;padding:30px;background:var(--cream);border-radius:22px}.results-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.results-heading p:not(.eyebrow){font-size:13px;color:var(--muted);margin:5px 0 0}.notice{padding:13px 16px;background:#e5f0e9;border-radius:12px;font-size:12px;margin-bottom:20px}.itinerary{display:grid;gap:13px}.itinerary-item{display:grid;grid-template-columns:95px 1fr;gap:18px;background:#fff;border:1px solid var(--line);padding:18px;border-radius:15px}.time-pill{align-self:start;display:inline-flex;justify-content:center;padding:7px 9px;background:var(--mint);border-radius:8px;color:var(--green);font-weight:800;font-size:12px}.item-main h3{margin:0;font-size:16px}.item-main p{margin:6px 0;font-size:12px;color:var(--muted)}.item-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.tag{font-size:10px;padding:4px 8px;background:#f1f4f0;border-radius:999px;color:#536b61}.item-link{font-size:11px;color:var(--green);font-weight:700}.results-actions{display:flex;gap:10px;margin-top:22px}.disclaimer{font-size:10px;color:var(--muted);margin:18px 0 0}.how-section{padding:76px 0}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.how-grid article{position:relative;padding:25px;background:var(--cream);border-radius:17px}.step-number{position:absolute;top:16px;right:18px;font-size:12px;letter-spacing:.1em;color:#9aafa5;font-weight:800}.how-icon{font-size:28px;margin:10px 0 14px}.how-grid h3{font-size:16px;margin:0 0 8px}.how-grid p{font-size:12px;color:var(--muted);margin:0}.site-footer{background:#edf3ef;padding:30px max(24px,calc((100vw - 1132px)/2));font-size:10px;color:var(--muted)}.brand-footer{margin-bottom:14px}.brand-footer .brand-mark{width:35px;height:35px;font-size:17px}.brand-footer strong{font-size:13px}.brand-footer small{font-size:9px}.site-footer p{margin:5px 0}
@media(max-width:760px){.site-header{height:68px;padding:0 17px}.header-note{display:none}main{padding:0 15px}.hero{grid-template-columns:1fr}.hero-copy{padding:35px 25px 25px}.hero-art{min-height:230px}.mountain{transform:scale(.75);transform-origin:bottom}.mountain-back{right:-8%}.mountain-front{left:-25%}.weather-strip{align-items:flex-start;padding:16px;margin-bottom:48px}.weather-strip-title{gap:10px}.weather-strip strong{font-size:12px}.weather-strip small{font-size:10px}.weather-metrics{flex-direction:column;align-items:flex-end;gap:0;font-size:10px}.weather-metrics span:first-child{font-size:19px}.planner-card{padding:20px 16px}.form-grid{grid-template-columns:1fr;gap:16px}.form-actions{flex-direction:column;align-items:stretch}.button{width:100%}.results-section{padding:20px 14px;margin-top:50px}.results-heading{display:block}.results-heading .button{margin-top:15px}.itinerary-item{grid-template-columns:1fr;gap:10px;padding:14px}.time-pill{justify-self:start}.results-actions{flex-direction:column}.how-section{padding:54px 0}.how-grid{grid-template-columns:1fr}.how-grid article{padding:20px}.hero h1{font-size:33px}}


/* Mobile-first usability refinements */
:root { scroll-padding-top: 16px; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
button, .button, .form-grid select, .form-grid input { touch-action: manipulation; }
.form-grid select, .form-grid input { min-height: 48px; font-size: 16px; }
.button { min-height: 48px; }
.mobile-bottom-nav { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 70px; }
  .site-header { position: relative; }
  .hero { border-radius: 20px; }
  .hero-copy { padding: 29px 21px 22px; }
  .hero-lead { font-size: 13px; }
  .hero-link { min-height: 46px; }
  .weather-strip { border-radius: 14px; }
  .section-heading { margin-bottom: 22px; }
  .section-heading h2 { font-size: 24px; }
  .planner-card { border-radius: 18px; }
  .form-grid label { gap: 7px; }
  .form-actions { position: sticky; bottom: 72px; z-index: 5; padding: 9px 0; background: linear-gradient(180deg,rgba(255,255,255,0),#fff 22%); }
  .form-actions .button-primary { box-shadow: 0 7px 18px rgba(36,107,93,.25); }
  .form-footnote { line-height: 1.7; }
  .results-heading h2 { font-size: 24px; }
  .results-heading .button { min-height: 44px; }
  .item-main h3 { font-size: 15px; line-height: 1.6; }
  .item-main p { font-size: 13px; line-height: 1.8; }
  .tag { font-size: 10px; }
  .mobile-bottom-nav {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 7px 12px max(7px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
    box-shadow: 0 -5px 20px rgba(25,59,60,.07); backdrop-filter: blur(10px);
  }
  .mobile-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:48px; color:var(--green); text-decoration:none; border-radius:10px; }
  .mobile-bottom-nav a:active { background:var(--mint); }
  .mobile-bottom-nav a span { font-size:20px; line-height:1.2; }
  .mobile-bottom-nav a small { font-size:10px; font-weight:700; }
  .site-footer { padding-bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* 時間帯別天気・移動時間表示 */
.travel-estimate {
  margin: 12px 0 7px !important;
  padding: 9px 11px;
  border-left: 3px solid #82b7a7;
  background: #f3f8f5;
  border-radius: 0 8px 8px 0;
  color: #355e53 !important;
  font-weight: 700;
  line-height: 1.65;
}
.hourly-weather {
  margin: 7px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff5df;
  color: #725221;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
}
@media (max-width: 760px) {
  .travel-estimate, .hourly-weather { font-size: 12px; }
}