/* Sapporo reference-site imagery, with Niseko's own copy and conditions. */
.monthly-hero{display:flex;flex-direction:column;background:#fff}
.monthly-hero .hero-photo{height:535px;object-position:center 48%}
.monthly-hero .hero-content{padding-top:32px;padding-bottom:25px;order:0}
.monthly-hero h1{max-width:68%;font-size:clamp(32px,4.2vw,54px);line-height:1.3}
.monthly-hero h1>span{font-size:.62em;letter-spacing:0;margin-bottom:9px;color:var(--dark)}
.monthly-hero h1 strong{font-size:1.12em}
.monthly-hero .hero-lead{max-width:65%;font-size:17px;margin-top:14px}
.monthly-hero .hero-desc{max-width:59%;font-size:13px;line-height:1.85}
.monthly-hero .hero-actions{margin-top:18px;margin-bottom:12px}
.monthly-handover-badge{position:absolute;right:15px;top:28px;width:190px;min-height:190px;border:4px solid var(--green);border-radius:50%;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--green);text-align:center;line-height:1.4;box-shadow:0 5px 18px #174c3220}
.monthly-handover-badge svg{width:35px;height:35px}
.monthly-handover-badge span{font-size:14px;font-weight:800}
.monthly-handover-badge strong{font-size:20px;font-weight:900}
.monthly-hero-features{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:0;margin-bottom:22px}
.monthly-hero-features>div{padding:18px 12px 15px;border:2px solid var(--green);border-radius:8px;text-align:center;background:#fff;min-width:0}
.monthly-hero-features svg{display:block;width:37px;height:37px;color:var(--green);margin:0 auto 10px}
.monthly-hero-features h2{display:inline;font-size:18px;line-height:1.6;color:var(--green);font-weight:900;margin:0;background:linear-gradient(transparent 68%,var(--yellow) 68%);overflow-wrap:anywhere}
.monthly-starting-rates{order:2;background:var(--green);color:#fff}
.monthly-starting-rates>.wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 22px;align-items:center;padding-top:18px;padding-bottom:14px}
.monthly-starting-intro{font-size:17px;font-weight:900;line-height:1.6;margin:0}
.monthly-starting-price p{font-size:12px;line-height:1.6;margin:0 0 3px}
.monthly-starting-price strong{display:block;color:var(--yellow);font-size:clamp(27px,3.2vw,42px);line-height:1.3;font-weight:900;letter-spacing:-.03em}
.monthly-starting-note{grid-column:1/-1;font-size:10px;line-height:1.7;margin:5px 0 0;color:#ecfff1}
.monthly-cta{padding:32px 0;background:#fff}
.monthly-line-banner{display:grid;grid-template-columns:45px 1fr;gap:5px 14px;align-items:center;width:min(700px,100%);margin:auto;padding:19px 32px;border-radius:22px;background:#00c840;color:#fff;text-align:center;text-decoration:none;box-shadow:inset 0 2px 5px #ffffff55;transition:filter .15s}
.monthly-line-banner:hover{filter:brightness(1.05)}
.monthly-line-banner:has(>img){display:block;padding:0;background:transparent;box-shadow:none}
.monthly-line-banner>img{width:100%;height:auto}
.monthly-line-banner>svg{width:42px;height:42px;grid-row:1/3}
.monthly-line-banner>strong{font-size:23px;line-height:1.45}
.monthly-line-banner>span{display:block;border-radius:20px;background:#fff;color:var(--green);font-size:13px;font-weight:800;padding:3px 18px}
.monthly-heading{margin-bottom:30px}
.monthly-heading h2{display:table;font-size:30px;margin:0 auto 12px;background:linear-gradient(transparent 77%,var(--yellow) 77%)}
.monthly-intro{max-width:800px;margin:-8px auto 28px;text-align:center;font-size:14px;line-height:1.9;color:var(--muted)}
.monthly-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.monthly-step{position:relative;border:1px solid var(--border);border-radius:6px;background:#fff;padding:0;text-align:center;min-width:0}
.monthly-step-image{width:100%;height:auto;border-radius:5px 5px 0 0}
.monthly-step-copy{padding:19px 17px 21px}
.monthly-step h3{font-size:16px;color:var(--green);margin:0 0 12px;line-height:1.65}
.monthly-step p{font-size:12px;line-height:1.85;text-align:left;margin:0}
.monthly-step:not(:last-child):after{content:'';position:absolute;right:-16px;top:150px;width:11px;height:11px;transform:rotate(-45deg);border-right:3px solid var(--green);border-bottom:3px solid var(--green)}
.monthly-originals{text-align:center;margin:20px auto 0;max-width:800px}
.monthly-flow{padding-top:40px;padding-bottom:35px}
.monthly-delivery{padding:0 0 55px}
.monthly-delivery-inner{display:grid;grid-template-columns:.8fr 1.5fr;align-items:center;gap:30px;background:#f0faf3;border:1px solid var(--border);border-radius:7px;padding:22px 28px}
.monthly-delivery-inner>div{display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:14px}
.monthly-delivery svg{width:40px;height:40px;grid-row:1/3;color:var(--green)}
.monthly-delivery h2{margin:0;font-size:16px;color:var(--green);line-height:1.6}
.monthly-delivery strong{font-size:20px;color:var(--green);line-height:1.6}
.monthly-delivery p{margin:0;font-size:12px;line-height:1.9;color:var(--muted)}
.monthly-concerns{background:#303a32;padding-top:52px;padding-bottom:45px}
.monthly-concerns .monthly-heading h2{color:#fff;background:transparent}
.monthly-concerns .ribbon{color:var(--yellow);background:transparent;border-color:#bdc9bf}
.monthly-concern-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:0;padding:0}
.monthly-concern-list li{display:flex;flex-direction:column;gap:13px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:4px;padding:23px 17px;font-size:14px;font-weight:800;line-height:1.8;min-width:0;text-align:center}
.monthly-concern-list li>span{flex:none;width:55px;height:55px;display:grid;place-items:center;background:var(--yellow);color:var(--green);border-radius:50%}
.monthly-concern-list svg{width:31px;height:31px}
.monthly-solution{text-align:center;color:var(--yellow);font-size:23px;font-weight:900;margin:30px 0 0;line-height:1.7}
.monthly-points{padding-top:58px}
.monthly-point-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.monthly-point{position:relative;background:white;border:1px solid var(--border);border-radius:7px;padding:0 0 23px;text-align:center;min-width:0;overflow:hidden}
.monthly-point-image{width:100%;max-width:250px;height:auto;aspect-ratio:1;margin:0 auto 18px}
.monthly-point h3{font-size:17px;color:var(--green);margin:0 15px 10px;line-height:1.65}
.monthly-point p{margin:0 17px;text-align:left;font-size:12px;line-height:1.9;color:var(--muted)}
.monthly-bridge{background:#f2fff6;color:var(--ink);padding:38px 0 48px}
.monthly-bridge>.wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;align-items:center}
.monthly-bridge-art{width:100%;max-width:390px;height:auto;margin:auto}
.monthly-bridge-copy{min-width:0}
.monthly-bridge h2{font-size:24px;line-height:1.65;margin:0 0 10px}
.monthly-bridge p{font-size:14px;line-height:1.95;margin:0;color:var(--muted)}
.monthly-bridge .btn{margin-top:20px}
.monthly-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 28px}
.monthly-scene-grid article{padding:25px 18px;border:1px solid var(--border);border-radius:6px;background:#fff;text-align:center;min-width:0}
.monthly-scene-image{width:150px;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0 auto 18px}
.monthly-scene-grid h3{font-size:17px;color:var(--dark);margin:0;line-height:1.65}
.monthly-scenes{background:#fff}
.monthly-scenes .monthly-intro{margin:0 auto 28px}
.monthly-image-note{max-width:900px;margin:0 auto;text-align:center;font-size:10px;line-height:1.8;color:var(--muted)}
.monthly-plan-note{background:#f3faf5;border-left:3px solid var(--green);padding:15px 20px;max-width:990px;margin:0 auto 28px;font-size:12px;line-height:1.9;color:var(--muted)}
.monthly-plan-heading{padding:16px 23px;background:var(--green);color:#fff}
.monthly-plan-heading>span{display:block;font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--yellow)}
.monthly-plan-heading h3{font-size:20px;line-height:1.6;color:#fff;margin:3px 0 0}
.car[data-stay-plan] .car-visual{aspect-ratio:16/9}
.car[data-stay-plan] h4{font-size:24px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.monthly-comparison .table-wrap{max-width:950px;margin:auto}
.monthly-comparison caption{font-size:15px}
.monthly-comparison thead th:first-child{width:28%}
.monthly-comparison tbody th{font-size:13px;padding:18px 20px;color:var(--green);background:#f5faf6}
.monthly-comparison tbody td{font-size:13px;line-height:1.9}
.monthly-company dl{max-width:900px;margin:0 auto;border-top:1px solid var(--border)}
.monthly-company dl>div{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:19px 22px;border-bottom:1px solid var(--border)}
.monthly-company dt{font-size:13px;font-weight:800;color:var(--green)}
.monthly-company dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.monthly-company a{color:var(--green)}
.international .monthly-heading h2{overflow-wrap:anywhere}
.international .monthly-step h3,.international .monthly-point h3{font-size:16px;overflow-wrap:anywhere}
.international .monthly-bridge h2{font-size:23px}
@media(max-width:960px){
 .monthly-steps,.monthly-point-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .monthly-step:nth-child(2):after{display:none}.monthly-step:nth-child(3):after{display:block}
 .monthly-concern-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .monthly-delivery-inner{grid-template-columns:1fr;gap:15px}
 .monthly-bridge>.wrap{gap:28px}
 .monthly-scene-grid{gap:15px}.monthly-scene-grid h3{font-size:15px}
 .international .nav a{font-size:10px}
}
@media(max-width:700px){
 .monthly-hero .hero-content{padding-top:30px;padding-bottom:30px}
 .monthly-hero h1{max-width:100%;font-size:34px;line-height:1.5}.monthly-hero h1>span{font-size:.65em;margin-bottom:6px}
 .monthly-hero h1 strong{font-size:1.09em}.monthly-hero .hero-lead{max-width:100%;font-size:16px;margin-top:16px}
 .monthly-hero .hero-desc{font-size:12px;max-width:100%}
 .monthly-hero .hero-photo{opacity:.3;height:590px}
 .monthly-handover-badge{display:none}
 .monthly-hero-features{order:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;margin-bottom:20px}
 .monthly-hero-features>div{padding:14px 10px 12px}
 .monthly-hero-features svg{width:29px;height:29px;margin-bottom:8px}
 .monthly-hero-features h2{font-size:14px;line-height:1.7}
 .monthly-starting-rates{order:1}
 .monthly-starting-rates>.wrap{grid-template-columns:1fr 1fr;gap:10px 16px;padding-top:17px;padding-bottom:15px}
 .monthly-starting-intro{grid-column:1/-1;text-align:center;font-size:14px}
 .monthly-starting-price{text-align:center}
 .monthly-starting-price p{font-size:10px}
 .monthly-starting-price strong{font-size:25px}
 .monthly-starting-note{font-size:10px;text-align:center;margin:0}
 .monthly-cta{padding:24px 0}
 .monthly-line-banner{padding:16px 18px;grid-template-columns:27px 1fr;gap:6px 8px;border-radius:15px}
 .monthly-line-banner>svg{width:27px;height:27px}
 .monthly-line-banner>strong{font-size:17px}
 .monthly-line-banner>span{font-size:11px;padding:3px 8px}
 .en .monthly-hero h1,.international .monthly-hero h1{font-size:29px;line-height:1.5}
 .en .monthly-hero h1 strong,.international .monthly-hero h1 strong{font-size:1.05em}
 .monthly-heading h2{font-size:24px;line-height:1.65}
 .monthly-intro{font-size:12px;margin-top:-5px;margin-bottom:28px}
 .monthly-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .monthly-step{text-align:center;padding:0;min-height:0}
 .monthly-step-copy{padding:15px 12px 18px}
 .monthly-step h3{font-size:14px;margin-bottom:8px}.monthly-step p{font-size:11px}
 .monthly-step:not(:last-child):after,.monthly-step:nth-child(2):after,.monthly-step:nth-child(3):after{display:none}
 .monthly-flow{padding-bottom:25px}.monthly-delivery{padding-bottom:35px}
 .monthly-delivery-inner{padding:20px;gap:14px}.monthly-delivery h2{font-size:15px}.monthly-delivery strong{font-size:18px}
 .monthly-delivery p{font-size:11px}.monthly-delivery-inner>div{grid-template-columns:35px 1fr;column-gap:12px}.monthly-delivery svg{width:35px;height:35px}
 .monthly-concerns{padding:40px 0 35px}.monthly-concern-list{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .monthly-concern-list li{font-size:12px;padding:17px 12px;line-height:1.8;gap:10px}.monthly-concern-list li>span{width:45px;height:45px}.monthly-concern-list svg{width:25px;height:25px}
 .monthly-solution{font-size:19px;margin-top:23px}.monthly-points{padding-top:42px}
 .monthly-point-grid{grid-template-columns:1fr 1fr;gap:12px}.monthly-point{padding:0 0 18px}
 .monthly-point-image{margin-bottom:13px}.monthly-point h3{font-size:14px;line-height:1.7;margin:0 11px 8px}
 .monthly-point p{margin:0 12px;font-size:11px;line-height:1.85}
 .monthly-bridge{padding:28px 0}.monthly-bridge>.wrap{grid-template-columns:1fr;gap:22px}.monthly-bridge-copy{text-align:center}
 .monthly-bridge-art{max-width:300px}
 .monthly-bridge h2{font-size:20px}.monthly-bridge p{font-size:12px}.monthly-bridge .btn{width:100%}
 .monthly-scene-grid{grid-template-columns:1fr 1fr;gap:12px}.monthly-scene-grid article{padding:20px 12px}.monthly-scene-image{width:130px;margin-bottom:14px}.monthly-scene-grid h3{font-size:14px}
 .monthly-plan-heading{padding:14px 18px}.monthly-plan-heading h3{font-size:17px}
 .monthly-plan-note{padding:12px 15px;font-size:11px}
 .car[data-stay-plan] h4{font-size:21px}
 .monthly-comparison caption{font-size:13px}.monthly-comparison tbody th{font-size:11px;padding:13px 10px}.monthly-comparison tbody td{font-size:11px;padding:13px 10px}
 .monthly-comparison thead th:first-child{width:31%}
 .monthly-company dl>div{grid-template-columns:1fr;gap:5px;padding:16px 12px}.monthly-company dt{font-size:12px}.monthly-company dd{font-size:13px}
 .international .monthly-heading h2{font-size:23px}.international .monthly-point h3{font-size:13px;line-height:1.7}.international .monthly-point p{font-size:11px}
 .international .monthly-step h3{font-size:15px}.international .monthly-bridge h2{font-size:20px}
 .international .monthly-scene-grid h3{font-size:13px;overflow-wrap:anywhere}.international .monthly-concern-list li{font-size:12px}
 .locale-th .monthly-hero h1{font-size:27px;line-height:1.75}.locale-th .monthly-point h3{font-size:13px}
}