/* Mobile reading layout. Desktop styles remain in style.css. */
@media (max-width: 768px) {
    html { font-size: 100%; }
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
        font-size: 17px;
        line-height: 1.75;
    }

    /* A concise opening, with Japanese phrases kept together. */
    .hero-journey { height: auto; min-height: 0; padding: 24px 20px 34px; gap: 0; }
    .hero-journey-inner { padding: 0; gap: 16px; }
    .hero-journey-copy .journey-project-mark {
        width: auto; padding-left: 0; margin-bottom: 8px;
        font-size: 12px; letter-spacing: 0.04em;
    }
    .hero-journey-copy .journey-eyebrow { margin-bottom: 16px; padding: 8px 12px; }
    .journey-badge-inner { font-size: 12px; line-height: 1.5; }
    .journey-eyebrow-main { font-size: 17px; line-height: 1.5; letter-spacing: 0.04em; }
    .hero-journey-copy h1 {
        font-size: clamp(22px, 6.25vw, 32px); line-height: 1.45;
        letter-spacing: 0.015em; margin: 0; width: 100%;
    }
    .hero-title-line, .hero-title-phrase, .hero-title-place { display: block; }
    .hero-title-line, .hero-title-phrase { white-space: nowrap; }
    .hero-journey-copy h1 > br { display: none; }
    .hero-title-place { margin-top: 2px; color: #7d824f; }
    .hero-journey-copy .journey-divider { width: 100%; margin: 16px 0; }
    .journey-info-card { margin: 0; padding: 12px 14px; }
    .hero-journey-copy .journey-info-card .journey-lead {
        font-family: inherit; font-size: 16px; line-height: 1.7;
        letter-spacing: 0; text-align: left; margin-bottom: 10px;
    }
    .hero-journey-copy .journey-info-card .journey-note {
        font-size: 14px; line-height: 1.6; letter-spacing: 0;
        padding: 7px 10px; margin: 0; text-align: left;
    }
    .hero-collage { width: 100%; max-width: 420px; aspect-ratio: 360 / 220; margin: 6px auto 0; }
    .hero-collage .photo-card-large { width: 65%; left: 6%; }
    .hero-collage .photo-card-wide { width: 51%; right: 1%; bottom: 1%; }
    .hero-collage .photo-card-small { width: 26%; left: 3%; bottom: 0; }
    .hero-collage .journey-stamp { width: 54px; right: 2%; top: 0; }

    /* Date is full-width; the remaining facts are paired. */
    .journey-summary-ribbon { margin-top: -10px; padding: 0 16px 24px; }
    .journey-summary-ribbon .container { width: 100%; padding: 0; border-radius: 12px; }
    .journey-summary-ribbon .ribbon-inner {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px; min-height: 0; margin: 8px; padding: 6px 12px 12px; border-radius: 9px;
    }
    .journey-summary-ribbon .ribbon-item {
        width: auto; min-width: 0; min-height: 64px; margin: 0; padding: 9px 0;
        display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px;
        border-right: 0; border-bottom: 1px dotted #dbd3bd;
    }
    .journey-summary-ribbon .ribbon-item:nth-child(2) { grid-column: 1 / -1; order: -1; }
    .journey-summary-ribbon .ribbon-item:nth-child(5) { grid-column: auto; border-bottom: 1px dotted #dbd3bd; }
    .journey-summary-ribbon .ribbon-item i { width: 29px; height: 29px; font-size: 15px; grid-row: 1 / 3; }
    .journey-summary-ribbon .r-label { font-size: 12px; margin: 0 0 2px; letter-spacing: 0; }
    .journey-summary-ribbon .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(2) .r-value,
    .journey-summary-ribbon .ribbon-item:nth-child(n+3) .r-value {
        font-size: 17px; line-height: 1.45; letter-spacing: 0;
    }
    .journey-summary-ribbon .ribbon-cta { grid-column: 1 / -1; min-height: 0; width: 100%; padding: 12px 0 0; }
    .journey-summary-ribbon .r-btn { width: 100%; min-height: 50px; font-size: 16px; padding: 10px; letter-spacing: 0.02em; }

    /* One consistent rhythm instead of nested, oversized frames. */
    .message-section, .chairman-section, .map-section, .facilities-section,
    .kaedehama-section, .itinerary-section { padding: 40px 0 !important; }
    .container, .facilities-container, .itinerary-container,
    .map-container-wide, .tour-features-container, .album-link-container { padding-left: 20px; padding-right: 20px; }
    .map-label, .m-eyebrow-wrap {
        min-width: 0; max-width: 100%; width: 100%; justify-content: center;
        flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-bottom: 10px;
        font-size: 13px; letter-spacing: 0.07em; line-height: 1.6;
    }
    .map-label span, .m-eyebrow, .m-sub { font-size: 13px !important; }
    .map-intro h2, .f-title-block h2, .op-title-block h2,
    .it-title-block h2, .message-header h2 {
        font-size: 24px !important; line-height: 1.45; letter-spacing: 0.02em;
    }
    .f-header, .op-header, .it-header { margin-bottom: 26px; }
    .op-title-block, .it-title-block { margin-bottom: 16px; }
    .journey-lead, .m-card-item p, .cp-desc-intro, .ct-desc, .tf-desc,
    .map-lead, .f-desc, .kh-story-text, .kh-birthday-text, .kh-highlight-msg,
    .cta-lead, .tl-desc {
        font-family: inherit; font-size: 17px; line-height: 1.75;
        letter-spacing: 0; text-align: left;
    }

    /* Message: keep the scenic background, remove the empty image-only band. */
    .message-top-wrap { width: 100%; min-height: 0; padding-top: 0; margin-bottom: 0; }
    .message-bg-image { height: 250px; opacity: 0.14; }
    .message-content { width: 100%; max-width: 100%; }
    .message-header { margin-bottom: 18px; }
    .message-header .m-eyebrow-wrap { width: 100%; }
    .message-card { margin: 18px 0 0; padding: 18px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(70,75,45,0.05); }
    .m-card-item { flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; padding: 16px 0; }
    .m-icon { width: 38px; height: 38px; }
    .m-card-item p { flex: 1; min-width: 0; }
    .m-card-item p br { display: none; }

    /* Profile: a shorter portrait and compact, readable biography. */
    .chairman-container-wide { padding: 0 20px !important; }
    .chairman-row { flex-direction: column; gap: 0; }
    .cp-col-image { width: min(100%, 210px); margin: 8px auto 18px; }
    .cp-img { height: 270px; object-fit: cover; object-position: center 20%; }
    .cp-image-tape { width: 75px; top: -23px; left: -23px; }
    .cp-image-bamboo { width: 130px; left: -80px; bottom: 24px; opacity: 0.18; }
    .cp-col-bio { width: 100%; margin: 0; padding: 20px; }
    .cp-eyebrow-wrap { margin-bottom: 14px; }
    .cp-eyebrow { font-size: 12px; }
    .cp-name-wrap { margin-bottom: 18px; }
    .cp-name-label { font-size: 14px; margin: 0 0 8px; }
    .cp-name { font-size: 28px; line-height: 1.4; }
    .cp-name-kana { font-size: 14px; }
    .cp-desc { margin-top: 0; }
    .cp-desc-intro { margin-bottom: 16px; padding-left: 12px; text-align: left; }
    .cp-history-list { gap: 14px; margin-top: 12px; }
    .cp-history-list li { flex-direction: column; gap: 3px; align-items: flex-start; }
    .cp-history-year { width: auto; min-width: 0; font-size: 14px; }
    .cp-history-event { font-size: 16px; line-height: 1.65; }
    .cp-col-theme { width: 100%; margin: 28px 0 0 !important; padding: 0; }
    .ct-header { margin-bottom: 18px; }
    .ct-eyebrow { font-size: 12px; margin-bottom: 8px; }
    .ct-title { font-size: 23px; line-height: 1.5; }
    .ct-desc { margin-top: 12px; }
    .ct-list-area { padding: 0; }
    .ct-list { gap: 8px; }
    .ct-list li { padding: 12px 14px; gap: 10px; min-height: 0; }
    .ct-text { font-size: 16px; line-height: 1.6; }
    .ct-icon { width: 38px; height: 38px; }

    .tour-features-container { width: 100%; margin: 0; }
    .tf-section-title { font-size: 24px; margin-bottom: 24px; }
    .tf-big-num { font-size: 32px; }
    .tour-features-grid { gap: 14px; }
    .tf-card { padding: 18px 16px; gap: 10px; box-shadow: 0 4px 16px rgba(70,75,45,0.04); }
    .tf-card-header { gap: 10px; }
    .tf-icon-wrap { width: 36px; height: 36px; }
    .tf-card-header h3 { font-size: 18px; line-height: 1.5; }
    .tf-desc { font-size: 16px; }
    .tf-num-watermark { font-size: 64px; opacity: 0.05; }
    .message-banner-container { width: 100%; max-width: none; margin: 20px auto 0; }
    .message-banner {
        min-height: 0; padding: 18px 16px; gap: 10px;
        box-shadow: 0 6px 20px rgba(80, 85, 60, 0.07);
    }
    .message-banner .mb-icon {
        position: static; top: auto; left: auto; transform: none;
        width: 46px; height: 46px; object-fit: contain;
    }
    .message-banner p { font-size: 16px; line-height: 1.7; letter-spacing: 0; }

    /* Album and map retain their images without redundant padding. */
    .album-link-section { padding: 28px 0; margin: 0; }
    .album-link-container { width: 100%; max-width: 560px; }
    .album-link-card { border-radius: 8px; grid-template-columns: 1fr; }
    .album-cover { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
    .album-cover img { width: 100%; height: 100%; object-fit: cover; }
    .album-link-copy { padding: 20px; }
    .album-link-copy h2 { font-size: 23px; line-height: 1.45; }
    .album-link-copy p { font-family: inherit; font-size: 16px; line-height: 1.7; margin-top: 10px; text-align: left; }
    .album-eyebrow { font-size: 12px; gap: 6px; }
    .album-link-action { font-size: 16px; margin-top: 14px; }
    .map-intro { margin-bottom: 24px; }
    .map-subtitle { font-size: 18px; line-height: 1.6; margin-bottom: 14px; }
    .map-lead br { display: none; }
    .map-frame { padding: 4px; border-radius: 8px; }
    .map-disclaimer { font-size: 13px; margin-top: 10px; }
    .map-mountain-deco, .map-bamboo-top, .map-bamboo-side { opacity: 0.16; }

    /* Destinations and a compact, touch-friendly photo grid. */
    .f-grid { gap: 24px; margin-bottom: 28px; }
    .f-card { padding: 20px 14px; box-shadow: 0 6px 20px rgba(75,65,40,0.06); }
    .f-img-wrap { margin-bottom: 20px; }
    .f-img { border-width: 6px; }
    .f-visit-badge { width: 58px; top: -13px; left: -4px; }
    .f-card-tape { width: 64px; right: -5px; }
    .f-name { font-size: 20px; line-height: 1.5; }
    .f-name img { height: 26px; }
    .f-en { font-size: 12px; letter-spacing: 0.08em; line-height: 1.6; }
    .f-desc { font-size: 17px; line-height: 1.75 !important; margin: 14px 0 0 !important; text-align: left; }
    .f-deco-bamboo, .f-deco-paw { opacity: 0.13; }
    .moodboard {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
        grid-auto-rows: auto; gap: 10px; margin-top: 28px !important;
    }
    .moodboard .mood-item { grid-column: auto; grid-row: auto; height: auto; min-height: 0; aspect-ratio: 1 / 1; }
    .moodboard .item-1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
    .mood-caption {
        opacity: 1; transform: none; bottom: 6px; left: 6px; max-width: calc(100% - 12px);
        padding: 4px 6px; font-size: 12px; line-height: 1.45; letter-spacing: 0;
        background: rgba(20,30,16,0.65); border-radius: 2px;
    }
    .f-note-wrap { margin-top: 24px !important; }
    .f-note-inner { padding: 14px; gap: 10px; }
    .f-note { font-family: inherit; font-size: 15px; line-height: 1.65; letter-spacing: 0; }
    .yaan-topic-copy { padding: 22px 20px 16px; }
    .yaan-topic-copy h3 { font-size: 22px; }
    .yaan-topic-copy > p { font-family: inherit; font-size: 16px; line-height: 1.75; }
    .yaan-topic-signature { font-size: 16px; }

    /* Birthday story: fewer nested frames and natural paragraph alignment. */
    .kaedehama-container { width: calc(100% - 40px); margin: 0 20px; padding: 0; background: transparent; }
    .op-subtitle { font-family: inherit; font-size: 16px; line-height: 1.7; letter-spacing: 0; }
    .kh-story-card { padding: 16px; gap: 20px; margin-bottom: 24px; }
    .kh-frame-outer { padding: 4px; }
    .kh-frame-inner img { max-height: 280px; object-fit: cover; object-position: center; }
    .kh-story-tag { font-size: 14px; line-height: 1.6; }
    .kh-story-heading { font-size: 22px; line-height: 1.5; margin-bottom: 14px; }
    .kh-story-heading br { display: none; }
    .kh-story-text { margin-bottom: 14px; }
    .kh-story-badges { gap: 8px; margin-top: 14px; }
    .kh-badge-pill { font-size: 13px; padding: 6px 9px; }
    .kh-birthday-left-badge {
        min-height: 186px; padding: 34px 16px 40px;
        background-size: 184px 184px;
    }
    .kh-badge-content { gap: 6px; padding-left: 0; }
    .kh-date-num { font-size: 30px; line-height: 1.2; }
    .kh-date-label { font-size: 15px; line-height: 1.5; margin-top: 0; }
    .kh-birthday-right-content { padding: 20px 18px; }
    .kh-paw-icon { display: none; }
    .kh-birthday-title { font-size: 21px; line-height: 1.5; margin-bottom: 12px; }
    .kh-highlight-msg { font-size: 16px; }
    .kh-birthday-text br { display: none; }
    .kh-decor-bamboo { opacity: 0.12; }

    /* Every itinerary stays visible; only redundant space is removed. */
    .it-lead { font-family: inherit; font-size: 16px; line-height: 1.7; letter-spacing: 0; text-align: left; }
    .tl-day { margin-bottom: 24px; }
    .tl-meta {
        display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
        gap: 10px 12px; padding: 16px; margin: 0; border-radius: 8px 8px 0 0;
        background-size: auto 80%, auto; background-position: right 5px bottom -5px, center;
        mask-image: none; -webkit-mask-image: none;
    }
    .tl-meta::before, .tl-meta::after { display: none; }
    .tl-day-num { font-size: 14px; padding: 5px 10px; }
    .tl-date { font-size: 26px; line-height: 1.4; }
    .tl-date span { font-size: 15px; margin-left: 5px; }
    .tl-split-line { display: none; }
    .tl-watermark { font-size: 72px; }
    .tl-title, .tl-title-group, .tl-title-tag { max-width: 100%; min-width: 0; white-space: normal; flex-shrink: 1; }
    .tl-title, .tl-title-group { width: 100%; margin: 0; }
    .tl-title { font-size: 16px; line-height: 1.5; }
    .tl-title-group { flex-wrap: wrap; gap: 6px; }
    .tl-title-tag { font-size: 14px; padding: 5px 8px; }
    .tl-title-tag .tag-text { min-width: 0; }
    .tl-route {
        width: 100%; min-width: 0; max-width: 100%; margin: 0;
        flex-wrap: wrap; flex-shrink: 1; justify-content: flex-start; gap: 6px;
        white-space: normal;
    }
    .r-node { font-size: 13px; line-height: 1.4; padding: 5px 7px; }
    .r-icon { font-size: 12px; }
    .tl-content { padding: 22px 16px; border-radius: 0 0 8px 8px; }
    .tl-events::before { left: 5px; top: 9px; bottom: 12px; width: 1px; }
    .tl-events li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 24px; margin-bottom: 22px; }
    .tl-events li::before {
        position: absolute; top: 8px; left: 0; grid-row: auto;
        width: 11px; height: 11px; border-width: 2px; transform: none;
    }
    .tl-time, .tl-desc { grid-column: 1; }
    .tl-time { font-size: 16px; line-height: 1.5; }
    .tl-time:empty { display: none; }
    .tl-desc { font-size: 17px; line-height: 1.75; }
    .desc-small, .desc-transport { font-size: 15px; line-height: 1.7; margin-top: 4px; }
    .desc-small { display: inline; }
    .tl-badges { margin-top: 22px; padding-top: 16px; gap: 7px; }
    .tl-badge { font-size: 13px; letter-spacing: 0; line-height: 1.5; padding: 5px 9px; }
    .itinerary-disclaimer { margin-top: 24px; padding: 14px; }
    .itinerary-disclaimer p { font-size: 15px; line-height: 1.7; }
    .it-notes { margin-top: 28px; padding: 22px 16px !important; }
    .it-notes-header { margin-bottom: 20px; padding-bottom: 12px; }
    .it-notes-eyebrow { font-size: 12px; }
    .it-notes-title { font-size: 23px; line-height: 1.5; }
    .it-notes-grid { grid-template-columns: 1fr; gap: 24px; }
    .it-notes-col-hotels { border-left: 0; padding-left: 0; margin-top: 0; }
    .it-notes-col-specs, .it-notes-col-hotels { min-width: 0; }
    .spec-val, .spec-item-warning .spec-val { font-family: inherit; font-size: 16px; line-height: 1.75; }
    .hotel-item { padding-left: 12px; gap: 8px !important; }
    .hotel-details { min-width: 0; width: 100%; }
    .hotel-name { font-size: 16px; line-height: 1.65; }
    .hotel-name span { display: block; font-size: 14px; margin: 4px 0 0; }

    /* Booking: the price and button are easy to find and read. */
    .footer-cta { padding: 44px 0 60px; min-height: 0; }
    .cta-container { padding: 0 20px; }
    .cta-message { font-size: 23px; line-height: 1.6; letter-spacing: 0.015em; margin-bottom: 20px; }
    .cta-message .cta-phrase { display: block; }
    .cta-message br { display: none; }
    .cta-lead { margin-bottom: 24px; font-size: 17px; }
    .cta-lead br { display: none; }
    .cta-summary-card { flex-direction: column; margin: 0 0 24px; mask-image: none; -webkit-mask-image: none; }
    .cta-summary-card::before, .cta-summary-card::after { display: none; }
    .cta-summary-hero { flex: 0 0 auto; width: 100%; padding: 18px 16px; border-right: 0; border-bottom: 1px dashed #d5c9ad; }
    .summary-hero-stamp { display: none; }
    .summary-hero-eyebrow { font-size: 12px; margin-bottom: 4px; }
    .summary-hero-title { font-size: 23px; }
    .cta-summary-body { padding: 16px; min-width: 0; }
    .cta-summary-row { flex-direction: column; gap: 6px; padding: 16px 0; }
    .row-label { flex: 0 0 auto; font-size: 14px; }
    .row-value { min-width: 0; font-size: 17px; }
    .row-value strong { font-size: 18px; line-height: 1.6; }
    .summary-date-part { display: inline-block; white-space: nowrap; }
    .row-value-sub { font-size: 14px; line-height: 1.65; }
    .price-list { gap: 14px; }
    .price-item-clean { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
    .price-label-badge { font-size: 13px; padding: 3px 6px; }
    .price-value-text { white-space: nowrap; font-size: 16px; }
    .price-num { font-size: 28px; }
    .price-unit-text { grid-column: 1 / -1; font-size: 14px; }
    .cta-actions { margin-top: 24px; }
    .btn-primary-large { min-height: 56px; width: 100%; font-size: 17px; padding: 12px; letter-spacing: 0.02em; }
    .footer-bamboo { opacity: 0.18; }
    .footer-panda { width: 100px; opacity: 0.25; }
    .footer-mountain { opacity: 0.2; }
}

@media (max-width: 360px) {
    .hero-journey { padding-left: 16px; padding-right: 16px; }
    .hero-journey-copy h1 { font-size: 21px; }
    .container, .facilities-container, .itinerary-container, .map-container-wide { padding-left: 16px; padding-right: 16px; }
    .chairman-container-wide { padding: 0 16px !important; }
    .kaedehama-container { width: calc(100% - 32px); margin: 0 16px; padding: 0; }
    .cta-container { padding-left: 16px; padding-right: 16px; }
    .tl-content { padding-left: 14px; padding-right: 14px; }
    .tl-events li { padding-left: 20px; }
    .price-num { font-size: 25px; }
    .price-item-clean { gap: 4px 6px; }
    .f-name { font-size: 18px; }
}