@charset "UTF-8";

/* ============================================================
   Country Niseko — Page Stylesheet
   File: style/country-niseko.css

   Sections:
     0. Wave Utilities
     1. Interview Section  (#cn__interview)
     2. Interview — Wave Divider
     3. Interview — Section Heading
     4. Interview — Cards Grid
     5. Interview — Individual Card
     6. Interview — Card Media (Polaroid + Pin)
     7. Interview — Card Body Content
     8. Interview — Responsive
   ============================================================ */

/* ============================================================
   0. Wave Utilities (migrated from niseko.css)
   ============================================================ */

.niseko-wave__top {
    line-height: 0;
    font-size: 0;
}

.niseko-wave__top img {
    display: block;
    width: 100%;
    height: auto;
}

.niseko-wave__top--white {
    background: #ffffff;
}

.niseko-wave__top--e0efe4 {
    background: #E0EFE4;
}

.niseko-wave__top--f8f6f1 {
    background: #F8F6F1;
}

/* Google Fonts: M PLUS 1 (Bold 700 · SemiBold 600) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@600;700&display=swap');


/* ============================================================
   1. Interview Section — Base
   ============================================================ */

#cn__interview {
    background-color: #e0efe4;
    overflow: visible; /* allow polaroid photos to spill above section edge */
}


/* ============================================================
   2. Interview — Wave Dividers
   Figma node 1:1339 · viewBox 0 0 1280 140 · fill #e0efe4

   The SVG path fills the BOTTOM of its container with green (#e0efe4);
   the area ABOVE the wave curve is transparent.

   Top wave:    background #fff → transparent shows white (prev section)
                → green SVG fill → section green bg (seamless)
   Bottom wave: section green bg → green SVG fill (top of flipped shape)
                → transparent shows white (background) = next section
   ============================================================ */

.cn-interview__wave {
    line-height: 0;
    font-size: 0;
}

/* Top wave: sits between white (above) and green section
   bg must be white so the transparent SVG area shows white */
.cn-interview__wave--top {
    background-color: #ffffff;
}

/* Bottom wave: sits between green section and white (below)
   bg must be green so the transparent SVG area shows green */
.cn-interview__wave--bottom {
    background-color: #e0efe4;
}

.cn-interview__wave img,
.cn-interview__wave picture {
    display: block;
    width: 100%;
}

.cn-interview__wave img {
    height: 140px; /* desktop: fixed so wave amplitude stays consistent (preserveAspectRatio="none") */
}


/* ============================================================
   3. Interview — Section Heading
   Figma: title at top:60px · deco gap 16px · cards at top:176px
   ============================================================ */

.cn-interview__body {
    padding: 60px 24px 80px;
}

.cn-interview__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;          /* Figma gap between title and swirl deco */
    margin-bottom: 64px; /* 176px (cards top) - 60px (section pad) - ~52px (heading h) */
}

/* "参加者インタビュー"
   Figma: M_PLUS_1 Bold 32px · #333 · letter-spacing 1.28px */
.cn-interview__title {
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #333333;
    letter-spacing: 0.04em; /* 1.28px ÷ 32px */
    text-align: center;
    white-space: nowrap;
}

/* Decorative swirl underline
   Figma: 88px × 17.926px */
.cn-interview__title-deco {
    width: 88px;
    height: 17.926px;
    flex-shrink: 0;
}

.cn-interview__title-deco img {
    display: block;
    width: 100%;
    height: 100%;
}


/* ============================================================
   4. Interview — Cards Grid
   Figma: 2 columns · 468px each · 40px gap · 976px total
          centered inside 1280px canvas (152px side padding)
   ============================================================ */

.cn-interview__grid {
    display: grid;
    grid-template-columns: repeat(2, 468px);
    gap: 40px;
    justify-content: center;
}


/* ============================================================
   5. Interview — Individual Card
   Figma card total height: 173px (photo zone) + 232px (body) = 405px
   ============================================================ */

.cn-interview__card {
    position: relative;
    width: 468px;
}


/* ============================================================
   6. Interview — Card Media (Polaroid photo + pushpin)
   Figma:
     Photo column: left offset 88.86px → centered in 468px card
     Photo outer:  290px wide
     Photo inner:  275.459px × 178.869px (with 7px border each side)
     Mask group starts at mt-12.56px inside photo column
     Pin: 19.8px × 31.07px · centered at top of photo column (mt-0)
   ============================================================ */

.cn-interview__card-media {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 290px;       /* Figma photo column width */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    pointer-events: none; /* let events pass through to card body below */
}

/* Pushpin icon — Figma: sits at top (absolute for overlap) */
.cn-interview__card-pin {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 19.8px;
    height: 31.07px;
    flex-shrink: 0;
    object-fit: contain;
    z-index: 3;
}

/* Polaroid frame
   Figma: mt-12.56px inside photo column (pin overlaps top edge) */
.cn-interview__card-polaroid {
    margin-top: 5.5px;
    border: 7px solid #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    background: #d9d9d9;
    line-height: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* Photo inside polaroid frame
   Figma mask inner: 275.459px × 178.869px · object-fit: cover */
.cn-interview__card-polaroid img {
    display: block;
    width: 275.459px;
    height: 178.869px;
    object-fit: cover;
}

/* Clockwise tilt — cards 1 & 3 (Figma: rotate(5deg)) */
.cn-interview__card-polaroid--cw {
    transform: rotate(5deg);
    transform-origin: center center;
}

/* Counter-clockwise tilt — cards 2 & 4 (Figma: rotate(-5deg)) */
.cn-interview__card-polaroid--ccw {
    transform: rotate(-5deg);
    transform-origin: center center;
}


/* ============================================================
   7. Interview — Card Body Content
   Figma: bg #f9fafb · 468px × 232px · border-radius 8px
          starts at mt-173.02px from card top
   Internal absolute positions (all relative to card body top = 0):
     badge:    top 44px  · left 20px
     name:     top 77px  · left 20px   · 18px Bold
     period:   top 82px  · left 89px   · 14px Medium · #777
     quote:    top 114px · left 20px   · width 428px  · 14px Regular
     CTA link: top 196px · left 339px  · 16px SemiBold · #1e6131
   ============================================================ */

.cn-interview__card-body {
    margin-top: 173px;  /* Figma: card body offset from card grid top */
    position: relative;
    background: #f9fafb;
    border-radius: 8px;
    min-height: 232px;
    padding: 44px 20px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Category badge
   Figma: bg #1e6131 · white · 14px Bold · py-4px px-12px · radius 30px */
.cn-interview__card-badge {
    display: inline-flex;
    align-self: flex-start;
    background-color: #1e6131;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.06em; /* 0.84px ÷ 14px */
    padding: 4px 12px;
    border-radius: 30px;
    white-space: nowrap;
}

/* Name + Period row
   Figma: name at mt-77px · period at mt-82px from card body top
          → period sits 5px lower than name (baseline alignment difference) */
.cn-interview__card-identity {
    display: flex;
    align-items: flex-start;
    margin-top: 9px; /* badge (22px) + margin → total ~77px from card body top */
}

/* "N.Oさん"
   Figma: Noto Sans JP Bold 18px · #333 · lh 1.6 */
.cn-interview__card-name {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    white-space: nowrap;
}

/* "（6週間）"
   Figma: Noto Sans JP Medium 14px · #777 · lh 1.6 · mt-82px (5px below name) */
.cn-interview__card-period {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #777777;
    white-space: nowrap;
    padding-top: 5px; /* Figma mt offset: 82px − 77px = 5px */
}

/* Quote text
   Figma: Noto Sans JP Regular 14px · #333 · lh 1.6 · tracking 0.84px
          top 114px from card body → after identity block (~106px) + gap */
.cn-interview__card-quote {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    letter-spacing: 0.06em;
    margin-top: 14px;
    flex: 1;
}

/* "詳しく読む" CTA
   Figma: M PLUS 1 SemiBold 16px · #1e6131 · tracking 0.64px
          positioned bottom-right: top 196px · left 339px in 468px card */
.cn-interview__card-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none;
    color: #1e6131;
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.04em; /* 0.64px ÷ 16px */
    margin-top: 12px;
    align-self: flex-end;
}

.cn-interview__card-cta:hover {
    opacity: 0.75;
}

/* Arrow icon — Figma: bxs:down-arrow rotated -90deg = pointing right */
.cn-interview__card-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(-90deg);
}


/* ============================================================
   8. Interview — Responsive
   ============================================================ */

/* ── Tablet: 1100px and below ── */
@media (max-width: 1100px) {
    .cn-interview__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        max-width: 976px;
        margin-left: auto;
        margin-right: auto;
    }

    .cn-interview__card {
        width: 100%;
    }

    /* Scale photo proportionally to card width (290/468 ≈ 62%) */
    .cn-interview__card-media {
        width: 62%;
    }

    .cn-interview__card-polaroid img {
        width: 100%;
        height: auto;
        aspect-ratio: 275.459 / 178.869;
    }

    .cn-interview__wave img {
        height: 110px; /* smoother transition between desktop (140px) and mobile (80px) */
    }
}

/* ── Between tablet and mobile: 768px ── */
@media (max-width: 768px) {
    /* Source switches to mobile SVG (375×80) at this breakpoint */
    .cn-interview__wave img {
        height: 80px;
    }
}

/* ── Mobile: 640px and below ── */
@media (max-width: 640px) {
    /* Mobile wave SVGs: viewBox 375×80 — fix height to match */
    .cn-interview__wave img {
        height: 80px;
    }

    /* Figma 1:3613: heading at top:20px, cards at top:105.82px */
    .cn-interview__body {
        padding: 20px 16px 60px;
    }

    /* Figma 1:3613: gap 14px between title and deco · margin to cards ~25px */
    .cn-interview__heading {
        gap: 14px;
        margin-bottom: 25px;
    }

    /* Figma 1:3613: M PLUS 1 Bold 24px · lh 1.4 · tracking 0.96px · nowrap */
    .cn-interview__title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Figma 1:3613: deco 63.635×12.899px */
    .cn-interview__title-deco {
        width: 63.635px;
        height: 12.899px;
    }

    /* Figma 1:3613: single column · gap 30px */
    .cn-interview__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Figma 1:3613: card 343px wide */
    .cn-interview__card {
        width: 100%;
        max-width: 343px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Figma 1:3613: photo column 273.725px in 343px card ≈ 80% */
    .cn-interview__card-media {
        width: 80%;
    }

    /* Figma 1:3613: polaroid photo 260×168.831px */
    .cn-interview__card-polaroid img {
        width: 100%;
        height: auto;
        aspect-ratio: 260 / 168.831;
    }

    /* Figma 1:3613: pin 18.689×28.051px */
    .cn-interview__card-pin {
        width: 18.689px;
        height: 28.051px;
    }

    /* Figma 1:3613: card body mt-167.18px · padding 44px 16px 28px */
    .cn-interview__card-body {
        margin-top: 167px;
        padding: 44px 16px 28px;
    }
}


/* ============================================================
   FAQ Section  (#cn__faq)
   Figma node 1:9
   ============================================================ */

/* ── FAQ Section Base ── */

#cn__faq {
    background-color: #ffffff;
    padding: 80px 24px;
}


/* ── FAQ Heading ──
   Figma: top:80px · title M PLUS 1 Bold 32px · gap-16px · deco 88×17.926px */

.cn-faq__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 80px; /* top:196px − top:80px − ~36px (heading h) = ~80px */
}

.cn-faq__title {
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #333333;
    letter-spacing: 0.04em; /* 1.28px ÷ 32px */
    text-align: center;
    width: 265px;           /* Figma explicit width */
}

.cn-faq__title-deco {
    width: 88px;
    height: 17.926px;
    flex-shrink: 0;
}

.cn-faq__title-deco img {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── FAQ List ──
   Figma: max-width 960px · centered · gap-40px between items */

.cn-faq__list {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}


/* ── FAQ Item (details element) ── */

.cn-faq__item {
    /* Remove default details marker */
    list-style: none;
}

.cn-faq__item::-webkit-details-marker {
    display: none;
}


/* ── Question row (summary element) ──
   Figma: bg #f8f6f1 · rounded 4px · py-12px pl-16px pr-20px · gap-12px · items-center */

.cn-faq__question {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f6f1;
    border-radius: 4px;
    padding: 12px 20px 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.15s ease;
}

.cn-faq__question::-webkit-details-marker {
    display: none;
}

.cn-faq__question::marker {
    content: none;
}

.cn-faq__question:hover {
    background-color: #f0ede5;
}


/* ── Q/A Badge ──
   Figma: 30×30px circle · fill #1e6131 · letter "Q"/"A" in #f8f6f1
   SVG is the circle bg; letter is overlaid via CSS */

.cn-faq__badge {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cn-faq__badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Letter overlay: TT Commons Pro not available; Montserrat Bold is closest geometric sans-serif */
.cn-faq__badge span {
    position: relative;
    z-index: 1;
    color: #f8f6f1;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    font-style: normal;
    line-height: 18px;
    letter-spacing: 0;
    pointer-events: none;
}


/* ── Question text ──
   Figma: Noto Sans JP Bold 14px · #333 · flex-1 */

.cn-faq__question-text {
    flex: 1 0 0;
    min-width: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #333333;
    margin: 0;
}


/* ── Chevron ──
   Figma: 16×16px · rotate(180deg) in open state (pointing up)
   Default (closed): points down — matches bxs:down-arrow svg */

.cn-faq__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.cn-faq__chevron img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Rotate chevron when item is open */
details[open] > .cn-faq__question .cn-faq__chevron {
    transform: rotate(180deg);
}


/* ── Answer row ──
   Figma: pl-16px · gap-10px · items-start · mt-20px from question row */

.cn-faq__answer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0 0 16px;
}


/* ── Answer text ──
   Figma: Noto Sans JP Regular 14px · #333 · lh 1.6 · flex-1 */

.cn-faq__answer-text {
    flex: 1 0 0;
    min-width: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

.cn-faq__answer-text a {
    color: #1e6131;
    text-decoration: underline;
}


/* ── CTA Button ──
   Figma: border 1px #1e6131 · 56px h · rounded-40px · 319px w
          M PLUS 1 SemiBold 16px · #1e6131 · tracking 0.64px
          pl-30px pr-16px py-8px · arrow rotated -90deg (pointing right) */

.cn-faq__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

.cn-faq__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 319px;
    height: 56px;
    padding: 8px 16px 8px 30px;
    border: 1px solid #1e6131;
    border-radius: 40px;
    text-decoration: none;
    color: #1e6131;
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.04em; /* 0.64px ÷ 16px */
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cn-faq__cta:hover {
    background-color: #1e6131;
    color: #ffffff;
}

.cn-faq__cta:hover .cn-faq__cta-arrow img {
    filter: brightness(0) invert(1);
}

/* Arrow — same chevron SVG rotated -90deg = pointing right */
.cn-faq__cta-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-faq__cta-arrow img {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── FAQ Responsive ── */

@media (max-width: 1024px) {
    .cn-faq__list {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    #cn__faq {
        padding: 60px 20px;
    }

    .cn-faq__heading {
        margin-bottom: 48px;
    }

    .cn-faq__title {
        font-size: 26px;
        width: auto;
    }

    .cn-faq__list {
        gap: 32px;
    }
}

@media (max-width: 480px) {
    #cn__faq {
        padding: 48px 16px;
    }

    .cn-faq__title {
        font-size: 22px;
    }

    .cn-faq__cta {
        width: 100%;
        max-width: 319px;
    }
}


/* ============================================================
   Consultation Section  (#cn__consultation)
   Figma node 1:200
   ============================================================ */

/* ── Base ── */

#cn__consultation {
    background-color: #1e6131;
    padding: 80px 24px;
    text-align: center;
}


/* ── Decorative accent ( \|/ sparks ) ──
   Figma: 54.97px wide · top ~15% of section */

.cn-consultation__deco {
    width: 54.97px;
    margin: 0 auto 24px;
}

.cn-consultation__deco img {
    display: block;
    width: 100%;
    height: 16px;
}


/* ── Title ──
   Figma: M PLUS 1 Bold 32px · white · letter-spacing 1.28px · lh 1.3 */

.cn-consultation__title {
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: 0.04em;
    margin: 0 0 28px;
    white-space: nowrap;
}


/* ── Body copy ──
   Figma: Noto Sans JP Regular 14px · white · lh 1.6 · centered */

.cn-consultation__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 48px;
}

.cn-consultation__body p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
}


/* ── CTA wrap ──
   Flex column, centered; badge sits above button with 12px overlap */

.cn-consultation__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}


/* ── Badge pill above button ──
   Figma: white bg · #1e6131 border 1.6px · 180×24px · rounded 28px
   Overlaps button top by 12px via negative margin-bottom */

.cn-consultation__badge-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 24px;
    background-color: #ffffff;
    border: 1.6px solid #1e6131;
    border-radius: 28px;
    position: relative;
    z-index: 1;
    margin-bottom: -12px;
}

.cn-consultation__badge-img {
    display: block;
    width: 154.47px;
    height: 9.441px;
}


/* ── Yellow button ──
   Figma: #ffc012 · 315×56px · rounded 40px · shadow 0 4px 0 #d6ccba
   Overlay SVG carries top-highlight ellipse + right-pointing arrow */

.cn-consultation__btn {
    position: relative;
    display: block;
    width: 315px;
    height: 56px;
    background-color: #ffc012;
    border-radius: 40px;
    box-shadow: 0 4px 0 0 #d6ccba;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.cn-consultation__btn:hover {
    opacity: 0.88;
}

/* Button text — M PLUS 1 Bold 18px · #1e6131 · left-aligned in pill */
.cn-consultation__btn-text {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #1e6131;
    white-space: nowrap;
    z-index: 1;
}

/* Mask overlay: highlight ellipse + right-pointing arrow */
.cn-consultation__btn-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}


/* ── Consultation Responsive ── */

@media (max-width: 640px) {
    #cn__consultation {
        padding: 60px 20px;
    }

    .cn-consultation__title {
        font-size: 24px;
        white-space: normal;
    }

    .cn-consultation__body {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    #cn__consultation {
        padding: 40px 20px 60px;
    }

    /* Figma 1:3987: title 20px · tracking 0.8px · nowrap */
    .cn-consultation__title {
        font-size: 20px;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Figma 1:3987: deco 40.266px wide (was 54.97px) */
    .cn-consultation__deco {
        width: 40px;
    }

    /* Figma 1:3987: body text is left-aligned on mobile (no text-center on wrapper) */
    .cn-consultation__body {
        text-align: left;
        margin-bottom: 40px;
    }

    /* Button stays 315px, centered via flex parent */
    .cn-consultation__btn {
        width: 315px;
        max-width: 100%;
    }
}


/* ============================================================
   Flow Section  (#cn__flow)
   Figma node 1:234
   ============================================================ */

/* ── Base ── */

#cn__flow {
    background-color: #ffffff;
    padding: 60px 24px 80px;
}


/* ── Heading ──
   Figma: M PLUS 1 Bold 32px · #333 · tracking 1.28px · gap 16px to deco */

.cn-flow__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.cn-flow__title {
    font-family: 'M PLUS 1', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #333333;
    letter-spacing: 0.04em;
    text-align: center;
    width: 265px;
    margin: 0;
}

.cn-flow__title-deco {
    width: 88px;
    height: 17.926px;
    flex-shrink: 0;
}

.cn-flow__title-deco img {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── Steps list ──
   Figma: max-width 648px · centered · gap 24px between cards */

.cn-flow__list {
    max-width: 648px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* ── Card ──
   Figma: white bg · border 2px #e0efe4 · border-radius 16px */

.cn-flow__card {
    background-color: #ffffff;
    border: 2px solid #e0efe4;
    border-radius: 16px;
    overflow: hidden;
}


/* ── Card inner row ──
   Figma: padding 20px 26px · flex · gap 32px · items-center */

.cn-flow__card-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 26px;
}


/* ── STEP number ──
   Figma: Montserrat Bold · #1e6131 · "STEP" 14px · number 35px · stacked */

.cn-flow__step-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    color: #1e6131;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    min-width: 44px;
}

.cn-flow__step-label {
    font-size: 14px;
    line-height: 1;
    display: block;
    font-weight: bold;
}

.cn-flow__step-num {
    font-size: 35px;
    line-height: 1;
    display: block;
    margin-top: 4px;
    font-weight: bold;
}


/* ── Vertical divider ──
   Figma: 1px wide · stretches to full card inner height
   SVG stroke #F1EDE4, preserveAspectRatio="none" so it scales correctly */

.cn-flow__divider {
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    overflow: hidden;
}

.cn-flow__divider img {
    display: block;
    width: 1px;
    height: 100%;
    min-height: 60px;
}


/* ── Step icon ──
   Fixed 64×64 container; explicit width/height on each img ensures
   SVGs with width="100%" height="100%" render at the correct aspect ratio */

.cn-flow__icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-flow__icon img {
    display: block;
    width: 64px;
    height: auto;
    max-height: 64px;
}


/* ── Step content ──
   Figma: flex-col · gap 8px */

.cn-flow__content {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cn-flow__step-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #222222;
    margin: 0;
}

.cn-flow__step-body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
    margin: 0;
}

.cn-flow__link {
    color: #1e6131;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cn-flow__link:hover {
    opacity: 0.75;
}


/* ── Departure footer ──
   Figma: arrow 24×23.75px centered · "ご出発" Noto Sans JP Bold 24px #1e6131 tracking 0.96px
          "現地でお待ちしております！" Noto Sans JP Regular 14px #222 tracking 0.56px */

.cn-flow__departure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    text-align: center;
}

.cn-flow__departure-arrow {
    width: 24px;
    height: 23.75px;
}

.cn-flow__departure-arrow img {
    display: block;
    width: 100%;
    height: 100%;
}

.cn-flow__departure-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #1e6131;
    letter-spacing: 0.04em;
    margin: 0;
}

.cn-flow__departure-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
    letter-spacing: 0.04em;
    margin: 0;
}


/* ── Flow Responsive ── */

@media (max-width: 768px) {
    #cn__flow {
        padding: 48px 16px 64px;
    }

    .cn-flow__title {
        font-size: 26px;
        width: auto;
    }

    .cn-flow__list {
        max-width: 100%;
    }

    .cn-flow__card-inner {
        gap: 20px;
        padding: 16px 20px;
    }

    .cn-flow__step-num {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    /* Figma 1:3902: tighter padding */
    #cn__flow {
        padding: 40px 16px 60px;
    }

    /* Figma 1:3902: title 24px · lh 1.4 · tracking 0.96px */
    .cn-flow__title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.04em;
        width: auto;
    }

    /* Figma 1:3902: deco 63.635×12.899px */
    .cn-flow__title-deco {
        width: 64px;
        height: 13px;
    }

    .cn-flow__heading {
        gap: 14px;
        margin-bottom: 32px;
    }

    /* Figma 1:3902: 16px gap between cards */
    .cn-flow__list {
        gap: 16px;
    }

    /* Figma 1:3902: gap 20px · padding 16px */
    .cn-flow__card-inner {
        gap: 20px;
        padding: 16px;
    }

    /* Figma 1:3902: STEP label 10px · number 30px */
    .cn-flow__step-label {
        font-size: 10px;
    }

    .cn-flow__step-num {
        font-size: 30px;
    }

    /* Figma 1:3902: divider IS visible on mobile — keep it, already stretches via base CSS */
    .cn-flow__divider {
        display: block;
    }

    .cn-flow__icon {
        display: none;
    }

    /* Figma 1:3902: step title 16px · lh 1.4 */
    .cn-flow__step-title {
        font-size: 16px;
        line-height: 1.4;
    }

    /* Figma 1:3902: step body 12px · lh 1.6 */
    .cn-flow__step-body {
        font-size: 12px;
        line-height: 1.6;
    }

    /* Figma 1:3902: departure title 20px · tracking 0.8px · lh 1.2 · bold */
    .cn-flow__departure-title {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.04em;
    }

    .cn-flow__departure-sub {
        font-size: 12px;
    }
}


/* ==============================================================
   Sections moved from niseko.css
   (Hero, Overview, Comparison, Features, Age-Specific Programs)
   ============================================================== */

/* ============================================================
   niseko-programs
   ============================================================ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-programs (年齢別！注目のプログラム)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-programs {
    background: #E0EFE4;
    padding: 60px 0 80px;
    position: relative;
    padding-bottom: clamp(118px, 10vw, 170px);
}

.niseko-programs__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

/* ── Title block ── */
.niseko-programs__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.niseko-programs__title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.28px;
    color: #333;
    text-align: center;
}

.niseko-programs__squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}

/* ── Cards row ── */
.niseko-programs__cards {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.niseko-programs__wave {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    z-index: 0;
}

.niseko-programs__wave img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Single card ── */
.niseko-programs__card {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 0px 0px #E4DCCD;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* ── Badge ── */
.niseko-programs__card-badge {
    position: absolute;
    top: 0;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1E6131;
    color: #fff;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    padding: 2px 10px 4px;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
    z-index: 2;
}

/* ── Card body ── */
.niseko-programs__card-body {
    padding: 38px 48px 24px 16px;
    position: relative;
    z-index: 1;
}

.niseko-programs__card-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #333;
    text-align: center;
    margin-bottom: 14px;
}

.niseko-programs__card-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #222;
}

/* ── Arrow ── */
.niseko-programs__card-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.niseko-programs__card-arrow img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ── Mobile ── */
@media only screen and (max-width: 768px) {
    .niseko-programs {
        padding: 48px 0 64px;
        padding-bottom: clamp(94px, 16vw, 126px);
    }

    .niseko-programs__inner {
        padding: 0 16px 0;
    }

    .niseko-programs__title-wrap {
        gap: 14px;
        margin-bottom: 33px;
    }

    .niseko-programs__title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.96px;
    }

    .niseko-programs__squiggle {
        width: 63.6px;
        height: 12.9px;
    }

    .niseko-programs__cards {
        flex-direction: column;
        gap: 16px;
    }

    .niseko-programs__card {
        width: 100%;
    }

    .niseko-programs__card-body {
        padding: 38px 52px 24px 16px;
    }

    .niseko-programs__card-arrow {
        top: auto;
        bottom: 50%;
        transform: translateY(50%) rotate(-90deg);
    }
}



/* ============================================================
   niseko-point
   ============================================================ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	n__point
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#n__point {
    background: #f8f6f1;
    padding: 80px 24px calc(80px + clamp(40px, 6vw, 88px));
    position: relative;
    overflow: hidden;
}

.niseko-point__wave-bottom {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    line-height: 0;
    pointer-events: none;
}

.niseko-point__wave-bottom img {
    display: block;
    width: 100%;
    height: auto;
}

.niseko-point__link {
    color: #1e6131;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.niseko-point__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.niseko-point__main-title {
    color: #333;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 1.28px;
}

.niseko-point__title-squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}

@media only screen and (max-width: 768px) {
    #n__point {
        padding: 60px 0 calc(60px + clamp(32px, 10vw, 64px));
    }

    .niseko-point__title-wrap {
        gap: 14px;
        margin-bottom: 33px;
    }

    .niseko-point__main-title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.96px;
    }

    .niseko-point__title-squiggle {
        width: 63.6px;
        height: 12.9px;
        display: block;
    }
}

.niseko-point__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 16px;
    max-width: 1140px;
    margin: 0 auto;
}

.niseko-point__card {
    width: calc((100% - 32px) / 3);
    position: relative;
    display: flex;
    flex-direction: column;
}

.niseko-point__card-header {
    position: relative;
    margin-bottom: 24px;
}

.niseko-point__card-img {
    border-radius: 6.53px;
    overflow: hidden;
}

.niseko-point__card-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 186;
    object-fit: cover;
    display: block;
}

.niseko-point__badge {
    position: absolute;
    left: 12px;
    bottom: -19px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.niseko-point__badge-circle {
    width: 54px;
    height: 54px;
    background: #1E6131;
    border-radius: 50%;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 29px;
    letter-spacing: 0.87px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    z-index: 2;
}

.niseko-point__badge-line {
    width: 1.5px;
    height: 23px;
    background: #1E6131;
    margin-top: -13px;
    position: relative;
    z-index: 1;
}

.niseko-point__titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
}

.niseko-point__title-box {
    background: #fff;
    border-radius: 4px;
    padding: 8px 10px;
    color: #1E6131;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    white-space: nowrap;
}

.niseko-point__title-box--multiline {
    white-space: normal;
}

.niseko-point__desc {
    margin-left: 12px;
}

.niseko-point__desc p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

@media only screen and (max-width: 1024px) {
    .niseko-point__card {
        width: calc((100% - 16px) / 2);
    }
}

@media only screen and (max-width: 768px) {
    .niseko-point__cards {
        flex-direction: column;
        gap: 40px;
        padding: 0 16px;
    }

    .niseko-point__card {
        width: 100%;
    }

    .niseko-point__card-header {
        margin-bottom: 28px;
    }

    .niseko-point__badge {
        left: 0;
        bottom: -8px;
    }

    .niseko-point__titles,
    .niseko-point__desc {
        margin-left: 0;
    }
}



/* ============================================================
   niseko-hero
   ============================================================ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    niseko hero
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-hero {
    margin-top: 144.18px;
}

.niseko-hero__stage {
    position: relative;
    isolation: isolate;
    margin: 0 auto;
    overflow: hidden;
    background: linear-gradient(to bottom, #f6f1ea 90%, #1e6131 92%);
}

.niseko-hero__shape {
    position: absolute;
    top: 6px;
    right: 72px;
    width: min(38.75%, 468px);
    z-index: 0;
    pointer-events: none;
}

.niseko-hero__shape img {
    width: 100%;
    height: auto;
    filter: grayscale(1) brightness(1.4) contrast(0.9);
}

.niseko-hero__header {
    position: relative;
    z-index: 4;
    padding: 44px 0 0 112px;
}

.niseko-hero__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 127px;
    padding: 8px 12px 7px;
    border-radius: 4px;
    background: #105022;
    color: #fff;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.niseko-hero__title-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.niseko-hero__title-visual {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 10px;
    width: max-content;
    margin-top: 16px;
    margin-bottom: -90px;
}

.niseko-hero__title-visual span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 0 rgba(216, 208, 197, 0.95);
    font-size: 74px;
    font-weight: 700;
    line-height: 1;

}

.niseko-hero__title-visual span.orange {
    color: #ffc012;
}

.niseko-hero__title-visual span.green {
    color: #1e6131;
}

.niseko-hero__title-visual span:nth-child(3) {
    transform: rotate(-1deg);
}

@keyframes niseko-hero-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.niseko-hero__media {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-top: 0;
    height: 393px;
}

.niseko-hero__track {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    width: max-content;
    animation: niseko-hero-slide 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .niseko-hero__track {
        animation: none;
    }
}

.niseko-hero__media-item {
    width: 233px;
    flex-shrink: 0;
    margin-top: 0;
}

.niseko-hero__media-item--lower {
    margin-top: 36px;
}

.niseko-hero__media-item img {
    width: 100%;
    height: 357px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.niseko-hero__bottom {
    position: relative;
    margin-top: -54px;
    padding: 0 104px 24px 104px;
}

.niseko-hero__layers {
    position: absolute;
    inset: 56px 0 auto;
    height: 126px;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.niseko-hero__layer {
    position: absolute;
    display: block;
    height: auto;
}

.niseko-hero__layer--base {
    left: 0;
    top: 0;
    width: 100%;
}

.niseko-hero__layer--accent {
    right: 0;
    top: 0px;
    bottom: 39px;
    z-index: -2;
    width: min(49.453125%, 633px);
}


.niseko-hero__info {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 40px;
}

.niseko-hero__notes {
    position: relative;
    z-index: 5;
}

.niseko-hero__highlights {
    flex: 1 1 auto;
    max-width: 530px;
}

.niseko-hero__highlights p {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 39px;
    padding: 6px 14px 6px 10px;
    background: #fff;
    border-radius: 3px;
    color: #105022;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 8px 18px rgba(34, 34, 34, 0.08);
    white-space: nowrap;
    width: fit-content;
}

.niseko-hero__highlights p+p {
    margin-top: 6px;
}

.niseko-hero__highlights .check {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
}

.niseko-hero__highlights .check img {
    width: 100%;
    height: auto;
}

.niseko-hero__highlights .accent {
    font-weight: 700;
}

.niseko-hero__highlights .accent--orange {
    color: #c90000;
}

.niseko-hero__highlights .accent--red {
    color: #c90000;
}

.niseko-hero__badges {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.niseko-hero__badges img {
    width: 138px;
    height: auto;
}

.niseko-hero__notes {
    color: rgba(255, 255, 255, 0.96);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    line-height: 1.3;
    padding-top: 8px;
}

.niseko-hero__notes p+p {
    margin-top: 4px;
}

@media only screen and (max-width: 1024px) {
    .niseko-hero {
        margin-top: 124px;
    }

    .niseko-hero__header {
        padding: 36px 0 0 32px;
    }

    .niseko-hero__brand {
        min-width: 114px;
        font-size: 24px;
    }

    .niseko-hero__title-visual span {
        width: 76px;
        height: 76px;
        font-size: 62px;
    }

    .niseko-hero__shape {
        right: 28px;
        width: min(41%, 420px);
    }

    .niseko-hero__title-visual {
        margin-bottom: -76px;
    }

    .niseko-hero__bottom {
        padding: 0 32px 18px;
    }

    .niseko-hero__layers {
        inset: 56px 0 auto;
        height: 126px;
    }

    .niseko-hero__layer--accent {
        top: 0px;
        width: min(53%, 520px);
    }

    .niseko-hero__info {
        align-items: flex-end;
        justify-content: space-between;
    }

    .niseko-hero__highlights p {
        font-size: 14px;
    }

    .niseko-hero__badges {
        margin-right: 0;
    }

    .niseko-hero__badges img {
        width: 116px;
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    .niseko-hero {
        margin-top: 110px;
    }

    .niseko-hero__stage {
        border-radius: 0;
        background: linear-gradient(to bottom, #f6f1ea 72%, #1e6131 72%);
    }

    .niseko-hero__shape {
        right: -22px;
        width: 72%;
    }

    .niseko-hero__header {
        padding: 35px 20px 0;
    }

    .niseko-hero__brand {
        min-width: 100px;
        font-size: 22px;
        padding: 7px 10px 6px;
    }

    .niseko-hero__title-visual {
        gap: 6px;
        margin-top: 6px;
        margin-bottom: 0;
    }

    .niseko-hero__title-visual span {
        width: calc((100vw - 64px) / 5);
        max-width: 64px;
        height: calc((100vw - 64px) / 5);
        max-height: 64px;
        font-size: clamp(44px, 13vw, 52px);
        border-radius: 6px;
    }

    .niseko-hero__media {
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        height: 314px;
    }

    .niseko-hero__track {
        gap: 10px;
        animation-duration: 25s;
    }

    .niseko-hero__media-item {
        width: clamp(130px, 38vw, 175px);
        flex: none;
    }

    .niseko-hero__media-item--lower {
        margin-top: 36px;
    }

    .niseko-hero__media-item img {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        border-radius: 6px;
    }

    .niseko-hero__bottom {
        padding: 0 12px 18px;
    }

    .niseko-hero__layer--base {
        width: 124%;
        left: 50%;
        transform: translateX(-50%);
    }

    .niseko-hero__layer--accent {
        top: 0px;
        right: -8%;
        width: 60%;
    }

    .niseko-hero__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        transform: translateY(-8px);
        margin-bottom: 0;
        padding-left:0px;
        padding-top: 17px;
    }

    .niseko-hero__highlights {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: -27px;
    }

    .niseko-hero__highlights p {
        gap: 7px;
        min-height: 0;
        padding: 8px 10px;
        font-size: 14px;
        line-height: 1.45;
        white-space: normal;
        text-align: left;
        width: fit-content;
        max-width: 100%;
    }

    .niseko-hero__highlights .check {
        width: 16px;
        height: 16px;
    }

    .niseko-hero__badges {
        width: 100%;
        justify-content: center;
        gap: 6px;
        margin: 0;
    }

    .niseko-hero__badges img {
        width: min(calc((100vw - 24px) / 3), 104px);
        max-width: 104px;
        height: auto;
    }

    .niseko-hero__notes {
        font-size: 10px;
        line-height: 1.45;
        padding: 8px 0 0;
    }
}



/* ============================================================
   niseko-overview
   ============================================================ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    niseko overview
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-overview {
    padding: 0 24px 96px;
}

.niseko-overview__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #1e6131;
}

.niseko-overview__shape {
    position: absolute;
    top: 52px;
    right: 74px;
    width: min(32%, 350px);
    z-index: 0;
    pointer-events: none;
}

.niseko-overview__shape img {
    width: 100%;
    height: auto;
    filter: grayscale(1) brightness(2.15) contrast(0.82);
}

.niseko-overview__inner {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    padding: 84px 24px 72px;
}

.niseko-overview__intro {
    text-align: center;
    color: #fff;
}

.niseko-overview__intro h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.niseko-overview__wave {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.niseko-overview__wave img {
    width: 60px;
    height: auto;
}

.niseko-overview__intro p {
    max-width: 640px;
    margin: 28px auto 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    text-align: left;
}

.niseko-overview__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.niseko-overview__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 132px;
    padding: 18px 16px 14px;
    border-radius: 8px;
    background: #fffdfa;
    box-shadow: 0 4px 0 rgba(216, 208, 197, 0.95);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.niseko-overview__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.niseko-overview__card-icon img {
    width: auto;
    height: 24px;
}

.niseko-overview__card-title {
    margin-top: 14px;
    color: #2b2b2b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

.niseko-overview__card-title small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.niseko-overview__card-arrow {
    margin-top: auto;
    padding-top: 12px;
}

.niseko-overview__card-arrow img {
    width: 16px;
    height: auto;
}

.niseko-overview__cta {
    position: relative;
    max-width: 100%;
    margin: 32px auto 0;
    padding: 40px 24px 32px;
    border-radius: 8px;
    background: #F8F6F1;
    text-align: center;
}

.niseko-overview__cta-pin {
    position: absolute;
    top: 0;
    left: 50%;
    width: 38px;
    height: auto;
    transform: translate(-50%, -50%);
}

.niseko-overview__cta-pin img {
    width: 22px;
    height: 33px;
}

.niseko-overview__cta-title {
    color: #ffb612;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.niseko-overview__cta-title .accent {
    color: #ffb612;
}

.niseko-overview__cta-subtitle {
    margin-top: 12px;
    color: #1e6131;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

/* Accordion Logic */
.niseko-overview__cta-toggle-input {
    display: none;
}

.niseko-overview__cta-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #1e6131;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.niseko-overview__cta-toggle-label .arrow {
    width: 12px;
    height: auto;
    transition: transform 0.3s ease;
}

.niseko-overview__cta-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, margin-top 0.3s ease;
}

.niseko-overview__cta-toggle-input:checked~.niseko-overview__cta-content {
    max-height: 2000px;
}

.niseko-overview__cta-toggle-input:checked~.niseko-overview__cta-toggle-label .arrow {
    transform: rotate(180deg);
}

.niseko-overview__cta-desc {
    font-size: 14px;
    color: #2b2b2b;
    line-height: 1.6;
    margin-bottom: 24px;
    margin-top: 24px;
}

.niseko-overview__cta-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    text-align: left;
}

.niseko-overview__cta-list dt {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 0;
}

.niseko-overview__cta-list dd {
    font-size: 14px;
    color: #2b2b2b;
    line-height: 1.6;
    margin-bottom: 16px;
    margin-left: 0;
}

.niseko-overview__cta-list dd a {
    color: #1e6131;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.niseko-overview__cta-list dd a:hover {
    opacity: 0.7;
}

.niseko-overview__cta-list .niseko-overview__cta-item:last-child dd {
    margin-bottom: 0;
}

.niseko-overview__cta-note {
    margin-top: 16px;
    font-size: 11px;
    color: #666;
    text-align: left;
}

@media only screen and (max-width: 1024px) {
    .niseko-overview {
        padding: 0 20px 80px;
    }

    .niseko-overview__shape {
        right: 32px;
        width: min(34%, 300px);
    }

    .niseko-overview__inner {
        padding: 72px 20px 64px;
    }

    .niseko-overview__intro h2 {
        font-size: 36px;
    }

    .niseko-overview__cards {
        gap: 10px;
    }

    .niseko-overview__card {
        padding: 18px 12px 14px;
    }

    .niseko-overview__card-title {
        font-size: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .niseko-overview {
        padding: 0 0 56px;
    }

    .niseko-overview__shape {
        top: 96px;
        right: -28px;
        width: 58%;
    }

    .niseko-overview__inner {
        padding: 56px 16px 48px;
    }

    .niseko-overview__intro h2 {
        font-size: 24px;
    }

    .niseko-overview__scribble {
        margin-top: 8px;
    }

    .niseko-overview__wave img {
        width: 48px;
    }

    .niseko-overview__intro p {
        margin-top: 22px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        line-height: 1.6;
    }

    .niseko-overview__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
        margin-top: 24px;
    }

    .niseko-overview__card {
        min-height: 120px;
        padding: 16px 10px 12px;
    }

    .niseko-overview__card-icon img {
        height: 22px;
    }

    .niseko-overview__card-title {
        margin-top: 12px;
        font-size: 16px;
    }

    .niseko-overview__card-title small {
        font-size: 12px;
    }

    .niseko-overview__cta {
        margin-top: 60px;
        padding: 40px 16px 18px;
    }

    .niseko-overview__cta-pin {
        width: 32px;
    }

    .niseko-overview__cta-title {
        font-size: 21px;
    }

    .niseko-overview__cta-subtitle {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.6;
    }

    .niseko-overview__cta-toggle-label {
        margin-top: 16px;
        font-size: 14px;
    }

    .niseko-overview__cta-note {
        font-size: 10px;
        margin-top: 16px;
    }

    .niseko-overview__cta-desc {
        text-align: left;
    }
}



/* ============================================================
   niseko-difference
   ============================================================ */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    niseko difference
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-difference {
    position: relative;
    background: #F8F6F2;
    z-index: 1;
}

.niseko-difference__images {
    position: relative;
    display: flex;
    justify-content: center;
    height: 333px;
    overflow: hidden;
}

.niseko-difference__images img {
    height: 333px;
    object-fit: cover;
}

.niseko-difference__images img:nth-child(2) {
    transform: translateY(-20px);
}

.niseko-difference__content {
    position: relative;
    background: #ffffff;
    margin-top: -176px;
    padding: 75px 24px 80px;
    border-radius: 50% 50% 0 0 / 80px 80px 0 0;
    z-index: 2;
    text-align: center;
}

.niseko-difference__header h2 {
    font-family: "M PLUS 1", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    line-height: 1.4;
    letter-spacing: 1.28px;
}

.niseko-difference__squiggle {
    margin-top: 14px;
}

.niseko-difference__squiggle img {
    width: 63.6px;
    height: 12.9px;
    display: block;
    margin: 0 auto;
}

.niseko-difference__lead {
    margin-top: 40px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
}

.niseko-difference__points-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.niseko-difference__points-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFC012;
}

.niseko-difference__points-title h3 {
    font-family: "M PLUS 1", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.8px;
}

.niseko-difference__table-wrap {
    max-width: 647px;
    margin: 70px auto 0;
    background: #ffffff;
    border: 2px solid #E1DFD9;
    border-radius: 8px;
    position: relative;
}

.niseko-difference__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.niseko-difference__table thead th {
    height: 0;
    padding: 0;
    border: none;
}

.niseko-difference__table th,
.niseko-difference__table td {
    padding: 24px 20px;
    text-align: left;
    vertical-align: middle;
}

.niseko-difference__table th,
.niseko-difference__table td {
    position: relative;
}

.niseko-difference__table tbody tr:not(:last-child) th::after,
.niseko-difference__table tbody tr:not(:last-child) td::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #E1DFD9;
}

.niseko-difference__table tbody tr:not(:last-child) th.row-label::after {
    left: 8px;
    right: 10px;
}

.niseko-difference__table tbody tr:not(:last-child) td.cell-ugaku::after {
    left: 20px;
    right: 20px;
}

.niseko-difference__table tbody tr:not(:last-child) td.cell-other::after {
    left: 20px;
    right: 15px;
}

.niseko-difference__table th.col-head {
    width: 10%;
    border-bottom: 1px solid #E1DFD9;
}

.niseko-difference__table th.col-ugaku {
    width: 49%;
    position: relative;
    overflow: visible;
}

.niseko-difference__table th.col-ugaku::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: #0085FF;
    border: 2px solid #0085FF;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    z-index: 1;
    box-sizing: border-box;
}

.niseko-difference__table th.col-ugaku .ugaku-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #ffffff;
}

.niseko-difference__table th.col-other {
    width: 41%;
    position: relative;
    overflow: visible;
}

.niseko-difference__table th.col-other::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: -2px;
    /* Overlap the wrap's right border */
    height: 42px;
    background: #E1DFD9;
    border: 2px solid #E1DFD9;
    border-bottom: none;
    border-radius: 0 8px 0 0;
    z-index: 1;
    box-sizing: border-box;
}

.niseko-difference__table th.col-other .other-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #333333;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    line-height: 1.3;
}

.niseko-difference__table td.cell-ugaku {
    background: #EFF6FF;
    border-left: 2px solid #0085FF;
    border-right: 2px solid #0085FF;
}

.niseko-difference__table tbody tr:last-child td.cell-ugaku {
    border-bottom: 2px solid #0085FF;
    border-radius: 0 0 8px 8px;
}

.niseko-difference__table .row-label {
    text-align: center;
    font-family: "M PLUS 1", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding: 24px 10px;
}

.niseko-difference__table .cell-other {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #333333;
}

.niseko-difference__table .cell-ugaku p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
}

.niseko-difference__table .cell-ugaku .highlight {
    color: #0085FF;
    font-weight: 700;
}

.niseko-difference__table .cell-ugaku .mt-small {
    margin-top: 16px;
}

.ugaku-sparkle {
    display: block;
    margin-bottom: 2px;
}

.ugaku-sparkle img {
    width: 31px;
    height: 12px;
    margin: 0 auto;
}

.ugaku-text {
    font-family: "M PLUS 1", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.niseko-difference__conclusion {
    margin-top: 64px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: 1.6;
}

.niseko-difference__btn-wrap {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

/* CTA wrap: badge above button with 12px overlap — matches consultation section */
.niseko-difference__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.niseko-difference__badge-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 24px;
    background-color: #ffffff;
    border: 1.6px solid #1e6131;
    border-radius: 28px;
    position: relative;
    z-index: 1;
    margin-bottom: -12px;
}

.niseko-difference__badge-img {
    display: block;
    width: 154.47px;
    height: 9.441px;
}

.niseko-difference__btn {
    position: relative;
    display: block;
    width: 315px;
    height: 56px;
    background: #FFC012;
    border-radius: 40px;
    box-shadow: 0 4px 0 0 #D6CCBA;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.niseko-difference__btn:hover {
    opacity: 0.88;
}

.niseko-difference__btn-text {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #1e6131;
    white-space: nowrap;
    z-index: 1;
}

.niseko-difference__btn-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

@media only screen and (max-width: 768px) {

    .niseko-difference__images img {
        height: 277px;
        object-fit: cover;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .niseko-difference__content {
        margin-top: -137px;
        padding: 50px 16px 50px;
        border-radius: 50% 50% 0 0 / 50px 50px 0 0;
    }

    .niseko-difference__header h2 {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.96px;
    }

    .niseko-difference__squiggle img {
        width: 63.6px;
        height: 12.9px;
    }

    .niseko-difference__lead {
        margin-top: 24px;
        font-size: 14px;
        text-align: left;
    }

    .niseko-difference__points-title {
        margin-top: 48px;
    }

    .niseko-difference__points-title h3 {
        font-size: 18px;
        letter-spacing: 0.72px;
    }

    .niseko-difference__table-wrap {
        margin: 64px auto 0;
    }

    .niseko-difference__table th,
    .niseko-difference__table td {
        padding: 14px 12px;
    }

    .niseko-difference__table th.col-head {
        width: 8%;
    }

    .niseko-difference__table th.col-ugaku {
        width: 52%;
    }

    .niseko-difference__table th.col-ugaku .ugaku-content-wrap {
        height: 52px;
    }

    .ugaku-text {
        font-size: 16px;
    }

    .niseko-difference__table th.col-other {
        width: 40%;
    }

    .niseko-difference__table th.col-other .other-content-wrap {
        height: 42px;
        font-size: 12px;
    }

    .niseko-difference__table tbody tr:not(:last-child) th.row-label::after {
        left: 6px;
        right: 6px;
    }

    .niseko-difference__table tbody tr:not(:last-child) td.cell-ugaku::after {
        left: 8px;
        right: 8px;
    }

    .niseko-difference__table tbody tr:not(:last-child) td.cell-other::after {
        left: 8px;
        right: 8px;
    }

    .niseko-difference__table .row-label {
        font-size: 14px;
        padding: 14px 6px;
        line-height: 1.2;
    }

    .niseko-difference__table .cell-other {
        font-size: 14px;
    }

    .niseko-difference__table .cell-ugaku p {
        font-size: 14px;
    }

    .niseko-difference__conclusion {
        margin-top: 40px;
        text-align: left;
    }

    .niseko-difference__btn-wrap {
        margin-top: 24px;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-schedule (1日のスケジュール)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-schedule {
    padding: 0 0 80px;
    background: #fff;
}
.niseko-schedule__inner {
    max-width: 1048px;
    margin: 0 auto;
    padding: 60px 24px 0;
}
.niseko-schedule__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}
.niseko-schedule__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.28px;
    color: #333;
    text-align: center;
}
.niseko-schedule__title-squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}
.niseko-schedule__tab-bar {
    width: 100%;
    background: #1E6131;
    border-radius: 8px;
    padding: 5px 0 6px;
    margin: 32px 0 24px;
    text-align: center;
}
.niseko-schedule__tab-bar:first-of-type {
    margin-top: 0;
}
.niseko-schedule__tab-bar h3 {
    color: #fff;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 28px;
    margin: 0;
    line-height: 1.35;
}
.niseko-schedule__scroll-hint {
    display: none;
}
.niseko-schedule__cards-wrap {
    position: relative;
}
.niseko-schedule__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 16px;
    justify-content: flex-start;
}
.niseko-schedule__card {
    width: calc((100% - 48px) / 4);
    max-width: calc((100% - 48px) / 4);
    flex: 0 0 calc((100% - 48px) / 4);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.niseko-schedule__card-img {
    width: 100%;
    aspect-ratio: 230 / 153;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.niseko-schedule__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.niseko-schedule__card-time {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1E6131;
    margin-bottom: 8px;
    line-height: 1.4;
}
.niseko-schedule__card-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

@media only screen and (max-width: 1024px) {
    .niseko-schedule__card {
        width: calc((100% - 32px) / 3);
    }
    .niseko-schedule__scroll-nav {
        display: none;
    }
}
@media only screen and (max-width: 768px) {
    .niseko-schedule {
        padding: 0 0 48px;
    }
    .niseko-schedule__inner {
        padding: 48px 16px 0;
    }
    .niseko-schedule__title-wrap {
        gap: 12px;
        margin-bottom: 24px;
    }
    .niseko-schedule__main-title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.96px;
    }
    .niseko-schedule__title-squiggle {
        width: 63.6px;
        height: 12.9px;
    }
    .niseko-schedule__tab-bar {
        width: 100%;
        border-radius: 8px;
        padding: 9px 0 10px;
        margin: 0 0 24px;
    }
    .niseko-schedule__tab-bar:not(:first-of-type) {
        margin-top: 40px;
    }
    .niseko-schedule__tab-bar h3 {
        font-size: 18px;
        line-height: 1;
    }
    .niseko-schedule__cards-wrap {
        overflow: hidden;
        margin: 0 -16px;
        padding: 0 16px;
    }
    .niseko-schedule__cards {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        padding-right: 16px;
    }
    .niseko-schedule__cards::-webkit-scrollbar {
        display: none;
    }
    .niseko-schedule__card {
        flex: 0 0 230px;
        width: 230px;
        min-width: 230px;
        max-width: 230px;
        flex-direction: column;
        gap: 0;
        scroll-snap-align: start;
        box-sizing: border-box;
    }
    .niseko-schedule__card-img {
        width: 230px;
        height: 154px;
        aspect-ratio: 230 / 154;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 17px;
        flex-shrink: 0;
    }
    .niseko-schedule__card-time {
        font-size: 14px;
        font-weight: 700;
        color: #1E6131;
        margin-bottom: 8px;
        line-height: 1.4;
    }
    .niseko-schedule__card-desc {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        line-height: 1.6;
    }
    .niseko-schedule__scroll-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        min-height: 28px;
    }
    .niseko-schedule__scroll-btn {
        display: flex;
        align-items: center;
        gap: 14px;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #1E6131;
        line-height: 1;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }
    .niseko-schedule__scroll-btn img {
        width: 16px;
        height: 16px;
        display: block;
        flex-shrink: 0;
    }
    .niseko-schedule__scroll-btn--right {
        margin-left: auto;
    }
    .niseko-schedule__scroll-btn--right img {
        transform: rotate(-90deg);
    }
    .niseko-schedule__scroll-btn--left img {
        transform: rotate(90deg);
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-charm (ニセコ留学の魅力)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-charm {
    padding: 0 0 90px;
    background: #F8F6F1;
    overflow: hidden;
}
.niseko-charm__inner {
    max-width: 1048px;
    margin: 0 auto;
    padding: 80px 24px 0;
}

/* ---- Title Badge ---- */
.niseko-charm__title-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 64px;
}
.niseko-charm__badge-card {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.niseko-charm__badge-img {
    display: block;
    width: 416px;
    height: auto;
}
.niseko-charm__badge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%) rotate(-5deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.niseko-charm__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 1.28px;
    color: #333;
    text-align: center;
    margin: 0;
}
.niseko-charm__title-squiggle {
    display: block;
    width: 83px;
    height: auto;
}
/* sparkle/sparkle classes kept but unused — safe to leave */
.niseko-charm__sparkle { display: none; }

/* ---- 3 Staggered Photos ---- */
.niseko-charm__photos {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 64px;
    position: relative;
}
/* scatter deco sparkles */
.niseko-charm__deco {
    position: absolute;
    pointer-events: none;
    line-height: 0;
}
.niseko-charm__deco img {
    display: block;
    width: 100%;
    height: auto;
}
.niseko-charm__deco--1 { width: 22px; left:  4%;  top: 40px;  }
.niseko-charm__deco--2 { width: 17px; left:  9%;  top: 90px;  }
.niseko-charm__deco--3 { width: 19px; left:  15%; top: 15px;  }
.niseko-charm__deco--4 { width: 22px; right: 4%;  top: 36px;  }
.niseko-charm__deco--5 { width: 17px; right: 9%;  top: 88px;  }
.niseko-charm__deco--6 { width: 19px; right: 15%; top: 12px;  }

.niseko-charm__photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.niseko-charm__photo--left {
    transform: rotate(6.37deg);
    margin-right: -16px;
    z-index: 1;
    margin-bottom: 90px;
}

.niseko-charm__photo--left img {
    left: -45%;
    top: 16px
}

.niseko-charm__photo--center img {
    top: 16px;
}
.niseko-charm__photo--center {
    transform: rotate(0deg);
    z-index: 2;
    margin-bottom: 0;
}
.niseko-charm__photo--right img {
    right: -45%;
    top: 16px
}
.niseko-charm__photo--right {
    transform: rotate(-6.37deg);
    margin-left: -16px;
    z-index: 1;
    margin-bottom: 90px;
}
.niseko-charm__pin {
    display: block;
    width: 21px;
    height: auto;
    margin: 0 auto 4px;
    position: relative;
    z-index: 3;
    transform: rotate(-15deg);
}
.niseko-charm__pin--flipped {
    transform: rotate(15deg) scaleX(-1);
}
.niseko-charm__photo-frame {
    background: #fff;
    border: 7px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.niseko-charm__photo--left  .niseko-charm__photo-frame,
.niseko-charm__photo--center .niseko-charm__photo-frame,
.niseko-charm__photo--right .niseko-charm__photo-frame {
    width: 268px;
}
.niseko-charm__photo-frame img {
    width: 100%;
    height: 174px;
    object-fit: cover;
    display: block;
}

/* ---- Body content ---- */
.niseko-charm__content {
    max-width: 648px;
    margin: 0 auto;
}
/* Section label: ● heading ● */
.niseko-charm__section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.niseko-charm__label-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FFC012;
    border-radius: 50%;
    flex-shrink: 0;
}
.niseko-charm__label-text {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0.8px;
    color: #333;
    margin: 0;
    white-space: nowrap;
}
/* Body text paragraphs */
.niseko-charm__body-text {
    margin-bottom: 48px;
}
.niseko-charm__body-text p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.5em;
}
.niseko-charm__body-text p:last-child {
    margin-bottom: 0;
}
.niseko-charm__body-text strong {
    font-weight: 700;
    color: #333;
}
/* Citation box */
.niseko-charm__citation {
    background: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    margin-top: 32px;
}

/* ---- Responsive: 768px ---- */
@media only screen and (max-width: 768px) {
    .niseko-charm {
        padding: 0 0 64px;
    }
    .niseko-charm__inner {
        padding: 56px 16px 0;
    }
    .niseko-charm__title-wrap {
        margin-bottom: 40px;
    }
    .niseko-charm__badge-img {
        width: 294px;
    }
    .niseko-charm__main-title {
        font-size: 24px;
        letter-spacing: 0.96px;
    }
    .niseko-charm__title-squiggle {
        width: 63px;
        height: auto;
    }
    .niseko-charm__photos {
        margin-bottom: 40px;
    }
    .niseko-charm__deco--1 { width: 14px; left:  2%;  top: 28px; }
    .niseko-charm__deco--2 { width: 11px; left:  6%;  top: 58px; }
    .niseko-charm__deco--3 { width: 12px; left:  11%; top: 10px; }
    .niseko-charm__deco--4 { width: 14px; right: 2%;  top: 26px; }
    .niseko-charm__deco--5 { width: 11px; right: 6%;  top: 56px; }
    .niseko-charm__deco--6 { width: 12px; right: 11%; top: 8px;  }
    .niseko-charm__photo--left  .niseko-charm__photo-frame,
    .niseko-charm__photo--center .niseko-charm__photo-frame,
    .niseko-charm__photo--right .niseko-charm__photo-frame {
        width: 154px;
        border-width: 4px;
    }
    .niseko-charm__photo-frame img {
        height: 100px;
    }
    .niseko-charm__photo--left  { margin-right: -74px; margin-bottom: 78px; }
    .niseko-charm__photo--right { margin-left: -74px;  margin-bottom: 105px; }
    .niseko-charm__pin {
        width: 12px;
        margin-bottom: 4px;
    }
    .niseko-charm__section-label {
        margin-bottom: 16px;
    }
    .niseko-charm__label-text {
        font-size: 18px;
        letter-spacing: 0.72px;
    }
    .niseko-charm__body-text {
        margin-bottom: 36px;
    }
    .niseko-charm__body-text p {
        margin-bottom: 1.25em;
    }
    .niseko-charm__citation {
        margin-top: 24px;
        font-size: 11px;
        padding: 10px 12px;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-class (授業内容)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-class {
    padding: 0;
    background: #FFFFFF;
}
.niseko-class__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 80px 24px 100px;
}
.niseko-class__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}
.niseko-class__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #333333;
    text-align: center;
}
.niseko-class__title-squiggle {
    width: 88px;
    height: 18px;
    display: block;
}
.niseko-class__intro {
    text-align: center;
    margin-bottom: 100px;
}
.niseko-class__intro h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #1E6131;
    margin-bottom: 24px;
    line-height: 1.5;
}
.niseko-class__intro p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    line-height: 1.8;
}

.niseko-class__cards {
    display: flex;
    gap: 40px;
    margin-bottom: 80px;
    justify-content: center;
    align-items: stretch;
}
.niseko-class__card {
    position: relative;
    width: 468px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.niseko-class__card-label {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 72px;
    color: transparent;
    -webkit-text-stroke: 1px #E5E5E5;
    letter-spacing: 0.05em;
    z-index: 0;
    line-height: 1;
    white-space: nowrap;
}
.niseko-class__card-content {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 3px solid #E7DFD4;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.niseko-class__card-header {
    background: #1E6131;
    color: #fff;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    padding: 12px 0;
}
.niseko-class__card-img {
    width: 100%;
    padding: 24px 24px 0;
    box-sizing: border-box;
}
.niseko-class__card-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.niseko-class__card-list {
    list-style: none;
    padding: 24px;
    margin: 0;
    flex-grow: 1;
    box-sizing: border-box;
}
.niseko-class__card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #1E6131;
    line-height: 1.6;
    margin-bottom: 16px;
}
.niseko-class__card-list li:last-child {
    margin-bottom: 0;
}
.niseko-class__card-list .icon-tick {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}
.niseko-class__btn-wrap {
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    .niseko-class {
        padding: 0 0 80px;
    }
    .niseko-class__inner {
        padding: 64px 24px 0;
    }
    .niseko-class__title-wrap {
        gap: 12px;
        margin-bottom: 40px;
    }
    .niseko-class__main-title {
        font-size: 24px;
        letter-spacing: 0.04em;
    }
    .niseko-class__title-squiggle {
        width: 63px;
        height: 13px;
    }
    .niseko-class__intro {
        margin-bottom: 80px;
    }
    .niseko-class__intro h3 {
        font-size: 20px;
        margin-bottom: 16px;
        line-height: 1.4;
    }
    .niseko-class__intro p {
        font-size: 14px;
        text-align: left;
        line-height: 1.8;
    }
    .niseko-class__cards {
        flex-direction: column;
        gap: 100px;
        margin-bottom: 64px;
        align-items: center;
    }
    .niseko-class__card-label {
        font-size: 80px;
        top: -50px;
    }
    .niseko-class__card-header {
        font-size: 18px;
        padding: 12px 0;
    }
    .niseko-class__card-img {
        padding: 16px 16px 0;
    }
    .niseko-class__card-list {
        padding: 16px 16px 24px;
    }
    .niseko-class__card-list li {
        font-size: 14px;
        gap: 8px;
        margin-bottom: 12px;
    }
    .niseko-class__card-list .icon-tick {
        width: 18px;
        height: 18px;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-area (実施エリア)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-area {
    padding: 80px 0 100px;
    background: #F8F6F1;
    overflow-x: hidden;
    overflow-y: visible;
}
.niseko-area__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}
.niseko-area__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
}
.niseko-area__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #333;
    text-align: center;
}
.niseko-area__title-squiggle {
    width: 88px;
    height: 17.9px;
    display: block;
    filter: brightness(0) saturate(100%) invert(29%) sepia(41%) saturate(541%) hue-rotate(81deg) brightness(97%) contrast(90%);
}

/* Top Content: Text + Map */
.niseko-area__top-content {
    position: relative;
    width: 710px;
    margin: 0 auto;
    height: 262px;
    left: -49px; 
}
.niseko-area__text {
    position: absolute;
    left: 0;
    top: 60px;
    width: 440px;
}
.niseko-area__text p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
    margin-bottom: 0;
}
.niseko-area__text p + p {
    margin-top: 0;
}
.niseko-area__text p strong {
    font-weight: 700;
}
.niseko-area__map-wrap {
    position: absolute;
    left: 432px;
    top: -5px;
    width: 278px;
    height: 262px;
}
.niseko-area__map-img {
    width: 100%;
    height: 100%;
    display: block;
}


/* 5 Staggered Photos */
.niseko-area__photos {
    position: relative;
    width: 975px;
    height: 230px;
    margin: -30px auto 0;
}
.niseko-area__photo {
    position: absolute;
}
.niseko-area__photo--1,
.niseko-area__photo--2,
.niseko-area__photo--5 {
    width: 196.57px;
}
.niseko-area__photo--3,
.niseko-area__photo--4 {
    width: 184.42px;
}
.niseko-area__photo--1 { left: 0; top: 24.5px; transform: rotate(6.37deg); z-index: 1; }
.niseko-area__photo--2 { left: 779px; top: 24.5px; transform: rotate(6.37deg); z-index: 2; }
.niseko-area__photo--3 { left: 205.5px; top: 85.3px; transform: rotate(0deg); z-index: 3; }
.niseko-area__photo--4 { left: 605px; top: 85.3px; transform: rotate(0deg); z-index: 4; }
.niseko-area__photo--5 { left: 399.4px; top: 15.5px; transform: rotate(-6.37deg); z-index: 5; }

.niseko-area__pin-img {
    position: absolute;
    display: block;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
}
.niseko-area__photo--1 .niseko-area__pin-img,
.niseko-area__photo--2 .niseko-area__pin-img,
.niseko-area__photo--5 .niseko-area__pin-img {
    width: 16px;
}
.niseko-area__photo--3 .niseko-area__pin-img,
.niseko-area__photo--4 .niseko-area__pin-img {
    width: 14px;
}
/* Specific Pin Offsets (Ensuring Overlap) */
.niseko-area__photo--1 .niseko-area__pin-img { left: -2px; top: -5px; }
.niseko-area__photo--2 .niseko-area__pin-img { left: -2px; top: -5px; }
.niseko-area__photo--3 .niseko-area__pin-img { left: 86px; top: -10px; }
.niseko-area__photo--4 .niseko-area__pin-img { left: 86px; top: -10px; }
.niseko-area__photo--5 .niseko-area__pin-img { left: 179px; top: -10px; }

.niseko-area__photo-frame {
    background: #d9d9d9;
    border: 4.8px solid #fff;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.niseko-area__photo--1 .niseko-area__photo-frame,
.niseko-area__photo--2 .niseko-area__photo-frame,
.niseko-area__photo--5 .niseko-area__photo-frame {
    aspect-ratio: 196.568 / 139.475;
}
.niseko-area__photo--3 .niseko-area__photo-frame,
.niseko-area__photo--4 .niseko-area__photo-frame {
    aspect-ratio: 184.419 / 119.753;
}
.niseko-area__photo-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media only screen and (max-width: 768px) {
    .niseko-area {
        padding: 0 0 60px;
    }
    .niseko-area__inner {
        height: 699px;
        padding: 60px 0 0;
        position: relative;
        width: 100%;
        max-width: 375px;
        margin: 0 auto;
    }
    .niseko-area__title-wrap {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .niseko-area__main-title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0.96px;
        text-align: center;
        margin-bottom: 8px;
    }
    .niseko-area__title-squiggle {
        width: 63.6px;
        margin: 0 auto;
        display: block;
    }
    .niseko-area__top-content {
        position: static;
    }
    .niseko-area__text {
        position: absolute;
        left: 16px;
        top: 145px;
        width: 184px;
        z-index: 5;
    }
    .niseko-area__text p {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400;
        color: #333;
        margin: 0;
    }
    .niseko-area__map-wrap {
        position: absolute;
        left: 216px;
        top: 67px;
        width: 221px;
        height: 207px;
        z-index: 1;
    }
    .niseko-area__map-pin {
        display: none;
    }
    
    .niseko-area__photos {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        left: auto;
        transform: none;
    }
    .niseko-area__photo {
        width: auto;
    }
    .niseko-area__photo--1 { left: 20px; top: 338px; width: 164px; transform: rotate(-5deg); z-index: 2; }
    .niseko-area__photo--2 { left: 189px; top: 311px; width: 164px; transform: rotate(5deg); z-index: 1; }
    .niseko-area__photo--3 { left: 109px; top: 419px; width: 154px; transform: rotate(0deg); z-index: 3; }
    .niseko-area__photo--4 { left: 179px; top: 499px; width: 175px; transform: rotate(3deg); z-index: 2; }
    .niseko-area__photo--5 { left: 20px; top: 507px; width: 164px; transform: rotate(-3deg); z-index: 1; }

    .niseko-area__pin-img {
        display: none;
    }
    .niseko-area__photo-frame {
        border-width: 4px;
    }
    .niseko-area__photo--1 .niseko-area__photo-frame,
    .niseko-area__photo--2 .niseko-area__photo-frame,
    .niseko-area__photo--5 .niseko-area__photo-frame {
        aspect-ratio: 164.144 / 116.469;
    }
    .niseko-area__photo--3 .niseko-area__photo-frame {
        aspect-ratio: 154 / 100;
    }
    .niseko-area__photo--4 .niseko-area__photo-frame {
        aspect-ratio: 175.955 / 139.382;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-supervisor (プログラム監修者)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-supervisor {
    padding: 80px 0 80px;
    background: #DBF2F6;
    position: relative;
}
.niseko-supervisor__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.niseko-supervisor__title-wrap {
    display: flex;
    align-items: center;
    gap: 29px;
    width: fit-content;
    margin: 0 auto 40px;
}
.niseko-supervisor__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #333;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}
.niseko-supervisor__title-squiggle {
    width: 88px;
    height: 17.9px;
    display: block;
    filter: brightness(0) saturate(100%) invert(29%) sepia(41%) saturate(541%) hue-rotate(81deg) brightness(97%) contrast(90%);
}
.niseko-supervisor__pencil {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.niseko-supervisor__content {
    display: flex;
    width: 740px;
    max-width: 100%;
    margin: 0 auto;
    gap: 40px;
    align-items: flex-start;
}
.niseko-supervisor__photo-wrap {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
}
.niseko-supervisor__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.niseko-supervisor__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 420px;
    padding-top: 8px;
}
.niseko-supervisor__name-wrap {
    display: flex;
    flex-direction: column;
}
.niseko-supervisor__name-ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.niseko-supervisor__name-en {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.niseko-supervisor__bio {
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.niseko-supervisor__bio p {
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .niseko-supervisor {
        padding: 60px 0;
    }
    .niseko-supervisor__inner {
        max-width: 375px;
        padding: 0 16px;
    }
    .niseko-supervisor__title-wrap {
        gap: 18px;
        margin-bottom: 24px;
        justify-content: center;
    }
    .niseko-supervisor__main-title {
        font-size: 24px;
        letter-spacing: 0.04em;
    }
    .niseko-supervisor__title-squiggle {
        width: 63.6px;
        height: 12.9px;
    }
    .niseko-supervisor__pencil {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    .niseko-supervisor__content {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        align-items: flex-start;
    }
    .niseko-supervisor__photo-wrap {
        width: 100%;
        height: 311px;
        border-radius: 20px;
        margin: 0 auto;
        overflow: hidden;
        -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix for clipping */
    }
    .niseko-supervisor__info {
        width: 343px;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 0;
        gap: 16px;
    }
    .niseko-supervisor__name-ja {
        font-size: 20px;
    }
    .niseko-supervisor__name-en {
        font-size: 16px;
    }
    .niseko-supervisor__bio {
        font-size: 14px;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	niseko-support (運営・サポート体制)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.niseko-support {
    padding: 0;
    background: #DBF2F6;
}
.niseko-support__content {
    position: relative;
    background: #ffffff;
    margin-top: -176px;
    padding-bottom: 80px;
    border-radius: 50% 50% 0 0 / 80px 80px 0 0;
    z-index: 2;
}
.niseko-support__hero-images {
    position: relative;
    display: flex;
    justify-content: center;
    height: 333px;
    overflow: hidden;
}
.niseko-support__hero-images img {
    height: 333px;
    object-fit: cover;
}
.niseko-support__hero-images img:nth-child(2) {
    transform: translateY(-20px);
    position: relative;
    z-index: 1;
}
.niseko-support__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 75px 24px 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.niseko-support__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}
.niseko-support__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #333333;
    text-align: center;
}
.niseko-support__title-squiggle {
    width: 88px;
    height: 18px;
    display: block;
}
.niseko-support__intro {
    text-align: center;
    margin-bottom: 40px;
}
.niseko-support__intro p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* Phase headers */
.niseko-support__phase {
    width: 100%;
    margin-bottom: 60px;
}
.niseko-support__phase-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.niseko-support__phase-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    letter-spacing: 0.04em;
}
.niseko-support__phase-dot {
    width: 10px;
    height: 10px;
    background: #FFC012;
    border-radius: 50%;
    display: block;
}

/* Cards (Grid) */
.niseko-support__cards {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: stretch; /* Allow stretching for open cards */
}
.niseko-support__card {
    background: #fff;
    border: 2px solid #E4DCCD;
    border-radius: 8px;
    width: 310px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    align-self: flex-start; /* Don't stretch when closed */
}

.niseko-support__card[open] {
    align-self: stretch; /* Stretch to match tallest open card in row */
}

.niseko-support__card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    position: relative;
    cursor: default;
    list-style: none;
    margin-bottom: 0;
    min-height: 100px; /* Increased to accommodate 2-line titles and keep heights uniform */
    box-sizing: border-box;
}
summary.niseko-support__card-header {
    cursor: pointer;
    list-style: none;
}
.niseko-support__card-header::-webkit-details-marker {
    display: none;
}
.niseko-support__card-header::marker {
    content: none;
}
.niseko-support__card[open] .niseko-support__card-header {
    margin-bottom: 0;
}

.niseko-support__card-chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10.6667L3.33333 5.33333H12.6667L8 10.6667Z" fill="%231E6131"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    transform: translateY(-50%) rotate(0deg);
}

.niseko-support__card[open] .niseko-support__card-chevron {
    transform: translateY(-50%) rotate(180deg);
}
.niseko-support__card-icon {
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #E0EFE4;
}
.niseko-support__card-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.niseko-support__card-icon--gray {
    background: #576359;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.niseko-support__card-icon--gray img {
    width: 24px;
    height: 24px;
}
/* Full 48×48 self-contained circle icon (no extra background needed) */
.niseko-support__card-icon--standalone {
    background: none;
    border-radius: 0;
    padding: 0;
}
.niseko-support__card-icon--standalone img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.niseko-support__card-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
.niseko-support__card-content {
    padding: 10px 16px 24px;
}
.niseko-support__card-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.niseko-support__link {
    text-decoration: underline;
    color: #333;
}

/* 4 Features Grid */
.niseko-support__features {
    display: grid;
    grid-template-columns: repeat(2, 343px);
    gap: 24px;
    margin-top: 20px;
    margin-bottom: 80px;
}
.niseko-support__feature {
    background: #F8F6F1;
    border-radius: 8px;
    padding: 40px 16px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.niseko-support__feature-pin {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 33px;
    display: block;
}

.niseko-support__feature-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1E6131;
    text-align: center;
    margin-bottom: 24px;
}
.niseko-support__feature-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* Button */
.niseko-support__btn-wrap {
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    .niseko-support {
        padding: 60px 0 0px;
    }
    .niseko-support__title-wrap {
        gap: 12px;
        margin-bottom: 24px;
    }
    .niseko-support__main-title {
        font-size: 24px;
    }
    .niseko-support__title-squiggle {
        width: 63px;
        height: 13px;
    }
    .niseko-support__intro {
        margin-bottom: 40px;
    }
    .niseko-support__phase {
        margin-bottom: 40px;
    }
    .niseko-support__intro p {
        text-align: left;
    }
    .niseko-support__content {
        margin-top: -150px;
        padding-bottom: 60px;
        border-radius: 50% 50% 0 0 / 40px 40px 0 0;
    }
    .niseko-support__hero-images {
        height: 277px;
        margin: 0;
    }
    .niseko-support__hero-images img {
        width: 100%;
        height: 277px;
        object-fit: cover;
        margin: 0;
    }
    .niseko-support__inner {
        padding: 56px 16px 0;
    }
    .niseko-support__cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }
    .niseko-support__card {
        width: 100%;
        max-width: 343px;
        align-self: center;
        margin: 0 auto;
    }
    .niseko-support__features {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }
    .niseko-support__feature {
        max-width: 343px;
        margin: 0 auto;
    }
}

/* =================================================
   niseko-benefit (海外留学との違い / node 1:418)
   ================================================= */
.niseko-benefit {
    padding: 80px 0;
    background: #fff;
}

.niseko-benefit__inner {
    max-width: 976px;
    margin: 0 auto;
    padding: 0 24px;
}

.niseko-benefit__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.niseko-benefit__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.28px;
    color: #333;
    text-align: center;
}

.niseko-benefit__title-squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}

.niseko-benefit__lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    text-align: center;
    margin-bottom: 48px;
}

.niseko-benefit__lead strong {
    font-weight: 700;
    color: #0085ff;
}

.niseko-benefit__cards {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.niseko-benefit__card {
    width: 315px;
    min-height: 220px;
    border: 2px solid #E0EFE4;
    border-radius: 8px;
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
}

.niseko-benefit__card-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.niseko-benefit__card-icon img {
    width: 36px;
    height: 36px;
    display: block;
}

.niseko-benefit__card-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1E6131;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.niseko-benefit__card-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .niseko-benefit {
        padding: 60px 0;
    }

    .niseko-benefit__inner {
        padding: 0 16px;
    }

    .niseko-benefit__title-wrap {
        gap: 12px;
        margin-bottom: 24px;
    }

    .niseko-benefit__main-title {
        font-size: 24px;
        letter-spacing: 0.96px;
    }

    .niseko-benefit__title-squiggle {
        width: 63.6px;
        height: 12.9px;
    }

    .niseko-benefit__lead {
        text-align: left;
        margin-bottom: 32px;
    }

    .niseko-benefit__cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .niseko-benefit__card {
        width: 100%;
        max-width: 343px;
        padding: 16px;
        min-height: auto;
    }
}

/* =================================================
   niseko-price (料金 / node 1:360)
   ================================================= */
.niseko-price {
    padding: 80px 0 100px;
    background: #1E6131;
}

.niseko-price__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.niseko-price__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.niseko-price__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.28px;
    color: #fff;
    text-align: center;
}

.niseko-price__title-squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}

/* Price table */
.niseko-price__table-wrap {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    width: 648px;
    max-width: 100%;
    margin-bottom: 24px;
}

.niseko-price__table-img {
    width: 100%;
    height: auto;
    display: block;
}

.niseko-price__table {
    width: 100%;
    border-collapse: collapse;
}

.niseko-price__table tr {
    border-bottom: 1px solid #E0EFE4;
}

.niseko-price__table tr:last-child {
    border-bottom: none;
}

.niseko-price__table td {
    padding: 20px 24px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #333;
}

.niseko-price__table td:first-child {
    font-weight: 400;
}

.niseko-price__table td:last-child {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* Cost notes */
.niseko-price__notes {
    width: 648px;
    max-width: 100%;
    margin-bottom: 40px;
}

.niseko-price__note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 11px;
}

.niseko-price__note-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #fff;
    flex-shrink: 0;
}

/* Outline link button */
.niseko-price__cta-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.niseko-price__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 418px;
    max-width: 100%;
    height: 56px;
    border: 1px solid #fff;
    border-radius: 40px;
    padding: 8px 16px 8px 30px;
    color: #fff;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.64px;
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.niseko-price__cta:hover {
    background-color: #fff;
    color: #1E6131;
}

.niseko-price__cta:hover .niseko-price__cta-arrow img {
    filter: none;
}

.niseko-price__cta-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.niseko-price__cta-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

/* Refund section */
.niseko-price__refund {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 648px;
    max-width: 100%;
    margin-bottom: 80px;
}

.niseko-price__phase-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.niseko-price__phase-dot {
    width: 10px;
    height: 10px;
    background: #FFC012;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.niseko-price__phase-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.04em;
}

.niseko-price__refund-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.niseko-price__refund-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    text-align: center;
}

.niseko-price__refund-text p {
    margin: 0;
}

.niseko-price__refund-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.64px;
    text-decoration: underline;
}

.niseko-price__refund-link-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    filter: brightness(0) invert(1);
}

@media only screen and (max-width: 768px) {
    .niseko-price {
        padding: 60px 0 80px;
    }

    .niseko-price__inner {
        padding: 0 16px;
    }

    .niseko-price__title-wrap {
        gap: 12px;
        margin-bottom: 32px;
    }

    .niseko-price__main-title {
        font-size: 24px;
    }

    .niseko-price__title-squiggle {
        width: 63.6px;
        height: 12.9px;
    }

    .niseko-price__table-wrap {
        width: 100%;
    }

    .niseko-price__table td {
        padding: 16px;
        font-size: 14px;
    }

    .niseko-price__notes {
        width: 100%;
    }

    .niseko-price__note {
        font-size: 13px;
        flex-wrap: wrap;
    }

    .niseko-price__note > span:last-child {
        flex: 1;
        min-width: 0;
    }

    .niseko-price__cta-wrap {
        margin-bottom: 48px;
    }

    .niseko-price__cta {
        width: 100%;
        font-size: 14px;
        padding: 8px 12px 8px 20px;
        white-space: normal;
    }

    .niseko-price__refund {
        width: 100%;
        margin-bottom: 48px;
    }

    .niseko-price__refund-text {
        font-size: 14px;
        text-align: left;
    }
}

/* =================================================
   niseko-access (アクセス / node 1:331)
   ================================================= */
.niseko-access {
    padding: 80px 0 100px;
    background: #F8F6F1;
}

.niseko-access__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.niseko-access__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.niseko-access__main-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1.28px;
    color: #333;
    text-align: center;
}

.niseko-access__title-squiggle {
    width: 88px;
    height: 17.93px;
    display: block;
}

.niseko-access__phase-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.niseko-access__phase-dot {
    width: 10px;
    height: 10px;
    background: #FFC012;
    border-radius: 50%;
    display: block;
}

.niseko-access__phase-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    letter-spacing: 0.04em;
}

.niseko-access__address-box {
    background: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    width: 398px;
    max-width: 100%;
    margin-bottom: 24px;
}

.niseko-access__address-box p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.niseko-access__map {
    width: 647px;
    max-width: 100%;
    height: 341px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 40px;
}

.niseko-access__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.niseko-access__info {
    width: 647px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

.niseko-access__info-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.niseko-access__info-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.64px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

.niseko-access__info-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.niseko-access__links {
    width: 647px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 40px;
}

.niseko-access__sub-link {
    color: #1E6131;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.64px;
    line-height: 1.6;
    text-decoration: underline;
    display: block;
}

.niseko-access__sub-link:hover {
    opacity: 0.75;
}

.niseko-access__cta-wrap {
    display: flex;
    justify-content: center;
}

.niseko-access__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 440px;
    max-width: 100%;
    height: 56px;
    border: 1px solid #1E6131;
    border-radius: 40px;
    padding: 8px 16px 8px 30px;
    color: #1E6131;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.64px;
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.niseko-access__cta:hover {
    background-color: #1E6131;
    color: #fff;
}

.niseko-access__cta:hover .niseko-access__cta-arrow img {
    filter: brightness(0) invert(1);
}

.niseko-access__cta-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.niseko-access__cta-arrow img {
    display: block;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .niseko-access {
        padding: 60px 0 80px;
    }

    .niseko-access__inner {
        padding: 0 16px;
    }

    .niseko-access__title-wrap {
        gap: 12px;
        margin-bottom: 32px;
    }

    .niseko-access__main-title {
        font-size: 24px;
        letter-spacing: 0.96px;
    }

    .niseko-access__title-squiggle {
        width: 63.6px;
        height: 12.9px;
    }

    .niseko-access__address-box {
        width: 100%;
    }

    .niseko-access__map {
        width: 100%;
        max-width: 100%;
        height: 220px;
    }

    .niseko-access__info {
        width: 100%;
        gap: 24px;
    }

    .niseko-access__links {
        width: 100%;
    }

    .niseko-access__cta-wrap {
        width: 100%;
    }

    .niseko-access__cta {
        font-size: 14px;
        padding: 8px 12px 8px 20px;
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }
}