/* ========================================
   LP Responsive CSS - Mobile First Approach
   ======================================== */

/* Mobile First - Base styles are for mobile */

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }
    
    
    .offer-main {
        font-size: 20px;
        letter-spacing: 3px;
    }
    
    .achievement-title {
        font-size: 16px;
        letter-spacing: 2.4px;
    }
    
    .achievement-description {
        font-size: 14px;
        letter-spacing: 2.1px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }
    
    .header-inner {
        padding: 0 20px;
        justify-content: space-between;
    }
    
    .hero-section {
        height: 500px;
    }
    
    .sp-only {
        display: block;
    }
    
    .pc-only {
        display: none;
    }
    
    .pc-right-column {
        display: none;
    }
    
    .special-offer-section,
    .achievement-section {
        padding: 40px 20px;
        display: block;
    }
    
    .offer-main {
        font-size: 24px;
        letter-spacing: 3.6px;
    }
    
    .achievement-title {
        font-size: 20px;
        letter-spacing: 3px;
    }
    
    .achievement-description {
        font-size: 16px;
        max-width: 600px;
        margin: 0 auto;
        letter-spacing: 2.4px;
    }
    
    .cta-content h2 {
        font-size: 28px;
    }
    
    .cta-content p {
        font-size: 18px;
    }
    
    .contact-title {
        font-size: 28px;
    }
}

/* Large Devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    /* Anchor offset is handled by JavaScript, not CSS scroll-margin-top
       to avoid double offset calculation */
    /* section[id],
    div[id],
    h2[id],
    h3[id] {
        scroll-margin-top: 70px;
    } */
    .container {
        max-width: 1280px;
    }
    
    .header-inner {
        max-width: 1280px;
        padding: 0 20px;
        justify-content: space-between;
    }
    
    .site-header {
        height: 55px;
        width: 100%;
    }
    
    .header-right {
        gap: 16px;
    }
    
    /* Hamburger menu visible on PC - show only on right side */
    .hamburger-menu {
        top: 55px;
        left: auto !important;
        width: 400px !important;
        right: 0 !important;
    }
    
    .fv-section {
        display: flex;
        gap: 0;
        min-height: 527px;
    }
    
    .hero-section {
        width: 747px;
        height: 527px;
        flex-shrink: 0;
    }
    
    .sp-image {
        display: none;
    }
    
    .pc-image {
        display: block;
    }
    
    .pc-right-column {
        width: 532px;
        height: 527px;
        display: flex;
        flex-direction: column;
        background: #fff;
        flex-shrink: 0;
    }
    
    .sp-only {
        display: none;
    }
    
    .pc-only {
        display: block;
    }
    
    .pc-right-column {
        display: flex;
    }
    
    .pc-right-column .special-offer-section,
    .pc-right-column .achievement-section {
        padding: 0 21px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
    }
    
    .pc-right-column .achievement-section {
        padding-top: 24px;
        padding-bottom: 0;
        height: 403px;
    }
    
    .pc-right-column .special-offer-section {
        padding-top: 24px;
        padding-bottom: 24px;
        height: 124px;
        background: #f5f5f5;
    }
    
    .cta-section,
    .contact-section {
        width: 100%;
    }
    
    .pc-right-column .offer-main {
        font-size: 24px;
        letter-spacing: 3.6px;
    }
    
    .pc-right-column .offer-note {
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-top: 8px;
    }
    
    .pc-right-column .achievement-title {
        font-size: 20px;
        text-align: left;
        letter-spacing: 3px;
    }
    
    .pc-right-column .achievement-description {
        font-size: 14px;
        max-width: 468px;
        text-align: left;
        letter-spacing: 2.1px;
        margin-top: 20px;
    }
    
    .pc-right-column .badge-grid {
        gap: 20px;
        justify-content: flex-start;
        margin-top: 20px;
    }
    
    .badge-item.badge-2021 {
        width: 131.899px;
        height: 133.136px;
    }
    
    .badge-item.badge-2023 {
        width: 123.270px;
        height: 123.274px;
    }
    
    .badge-item.badge-2024 {
        width: 124.503px;
        height: 123.274px;
    }
    
    .cta-content h2 {
        font-size: 32px;
    }
    
    .cta-content p {
        font-size: 20px;
    }
    
    .contact-title {
        font-size: 32px;
    }
    
    .contact-form {
        padding: 40px;
    }
}

@media screen and (min-width: 600px) {
    .site-header {
        width: 100%;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
    
    
    .offer-main {
        font-size: 32px;
    }
    
    .achievement-title {
        font-size: 28px;
    }
    
    .achievement-description {
        font-size: 20px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        height: 100vh;
        min-height: 300px;
    }
    
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image img,
    .badge-item img,
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .cta-button:hover,
    .submit-button:hover {
        transform: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1a1a;
        --text-color: #e0e0e0;
        --light-gray: #2a2a2a;
    }
    
    .site-header {
        background: #2a2a2a;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .contact-form {
        background: #2a2a2a;
        color: #e0e0e0;
    }
    
    .form-group input,
    .form-group textarea {
        background: #3a3a3a;
        border-color: #555;
        color: #e0e0e0;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: var(--primary-color);
    }
}

/* Print Styles */
@media print {
    .site-header,
    .menu-toggle,
    .cta-section,
    .contact-section {
        display: none;
    }
    
    .hero-section {
        background: none;
        color: var(--text-color);
        padding: 20px 0;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: var(--text-color);
    }
    
    .cta-button {
        border: 1px solid var(--text-color);
        background: none;
        color: var(--text-color);
    }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
    .cta-button.primary {
        background: #000;
        border-color: #000;
    }
    
    .cta-button.secondary {
        border-color: #000;
        color: #000;
    }
    
    .achievement-title {
        color: #000;
    }
}

/* New Service Section Responsive */
/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .service-header {
        padding: 30px 20px;
        min-height: 250px;
    }
    
    .service-title {
        font-size: 20px;
        line-height: 1.2;
    }
    
    .service-subtitle {
        font-size: 16px;
    }
    
    .service-cta-box {
        width: 400px;
        padding: 16px 50px;
    }
    
    .cta-note {
        font-size: 14px;
    }
    
    .cta-main {
        font-size: 22px;
        letter-spacing: 2.2px;
    }
    
    .content-title {
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 2.2px;
        line-height: 1.6;
    }
    
    .decorative-frame {
        height: 90px;
    }
    
    .main-text {
        font-size: 18px;
        letter-spacing: 3.0px;
        line-height: 1.8;
    }
    
    .sub-text {
        font-size: 16px;
        letter-spacing: 2.8px;
        line-height: 1.8;
        margin-top: 16px;
    }
    
    .long-text {
        font-size: 14px;
        max-width: 600px;
        margin: 0 auto;
        letter-spacing: 2.2px;
        line-height: 1.8;
    }
}

/* Large Devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .new-service-section {
        display: flex;
        flex-direction: column;
    }
    
    .service-header {
        padding: 40px 20px;
        min-height: 143px;
    }
    
    .service-header-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 1280px;
        margin: 0 auto;
        gap: 40px;
    }
    
    .service-text-section {
        flex: 0 0 500px;
        text-align: center;
    }
    
    .service-cta-section {
        flex: 0 0 458px;
        justify-content: flex-end;
    }
    
    .service-title {
        font-size: 24px;
        font-weight: normal;
        line-height: 1.2;
    }
    
    .service-subtitle {
        font-size: 18px;
        font-weight: normal;
        text-align: left;
    }
    
    .decorative-line {
        width: 480px;
        justify-content: flex-start;
        margin: 8px 0;
    }
    
    .service-cta-box {
        width: 458px;
        padding: 20px 42px;
        text-align: center;
    }
    
    .cta-link {
        text-decoration: none;
        color: inherit;
        display: block;
        width: 100%;
    }
    
    .cta-note {
        font-size: 16px;
    }
    
    .cta-main {
        font-size: 24px;
        letter-spacing: 2.4px;
    }
    
    .content-box-1 {
        padding: 80px 0;
        max-width: 1280px;
        margin: 0 auto;
        background: #fff;
        padding: 80px 20px;
        border-radius: 8px;
        display: block;
        gap: 0;
    }
    
    .content-box-2 {
        padding: 80px 0;
        max-width: 1280px;
        margin: 0 auto;
    }
    
    .content-box-1-inner {
        display: flex;
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
    }
    
    .content-left {
        flex: 0 0 546px;
    }
    
    .content-right {
        flex: 1;
    }
    
    /* Hide SP-only elements on PC */
    .wecan-image-sp,
    .content-box-1-sp,
    .content-box-2-sp,
    .wecan-image-block {
        display: none;
    }
    
    .pc-image-section {
        height: 567px;
    }
    
    .content-title {
        font-size: 24px;
    }
    
    .main-text {
        font-size: 20px;
    }
    
    .sub-text {
        font-size: 18px;
    }
    
    .long-text {
        font-size: 16px;
        max-width: 700px;
        margin: 0 auto;
        letter-spacing: 2.4px;
        line-height: 1.8;
    }
    
    .main-image-1 {
        max-width: 100%;
        margin: 0 auto;
        aspect-ratio: 1280/386;
    }
    
    .main-image-1 .sp-image {
        display: none;
    }
    
    .main-image-1 .pc-image {
        display: block;
    }
    
    .main-image-2 {
        max-width: 600px;
        margin: 0 auto;
        height: 300px;
    }

    /* Image Gallery (PC: 3 columns) */
    .image-gallery-section {
        padding: 80px 0;
    }
    .gallery-title {
        font-size: 32px; /* match .reasons-title on PC */
        font-weight: normal;
    }
    .image-track {
        display: grid;
        grid-template-columns: repeat(3, 320px);
        justify-content: center;
        gap: 28px;
        margin-top: 24px;
        overflow: visible;
    }
    .gallery-item {
        width: 100%;
        height: auto;
        max-width: 320px;
        border-radius: 8px;
    }

    /* Voice (PC) */
    .voice-section { padding: 64px 0; }
    .voice-title { font-size: 32px; font-weight: normal; }
    .voice-inner { margin: 0 32px; }
    .voice-track { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; overflow:visible; margin-top: 16px; }
    .voice-card { width: 100%; }
    .voice-avatar { margin: 0 24px; }

    /* Price (PC) */
    .price-section { padding: 80px 0; }
    .course-label { font-size: 24px; }
    .new-followup-inner { max-width: 1280px; margin: 0 auto; }
    .price-title { font-size: 32px; }
    /* PC: course label center */
    .course-label { text-align: center; font-weight: normal; }
    .price-courses { display:grid; grid-template-columns: 1fr 1fr; gap:28px; overflow:visible; margin-top:24px; }
    /* PC first column width for table */
    .price-row { grid-template-columns: 150px 1fr 1fr; }
    .price-course { width:100%; }
    .price-table-wrap { margin:24px 0 28px; }
    .price-cell { font-size: 16px; }
    .price-cell small { font-size: 13px; }
    .price-notes { font-size: 20px; text-align: center; }
    .price-notes strong { font-size: 28px; }
    .price-banner { margin: 40px 0; }
    .price-banner--after-service-table { padding: 0; }
    .price-banner .pc-image { max-width: 720px; margin: 0 auto; display:block; }
    .price-banner .sp-image { display:none; }
    .price-banner .pc-image { display:block; }

    /* Monthly Course (PC) */
    .monthly-course { padding: 0 0 24px; background: #FAFAFA; }
    .monthly-course__inner { max-width: 1280px; margin: 0 auto; gap: 24px; }
    .monthly-course__hero-bg { min-height: 130px; background-image: url('../images/monthly-course-pc/whycourse.png'); }
    .monthly-course__hero-title { width: 1249px; top: 41px; letter-spacing: 2.56px; }
    .monthly-course__body { margin: 0 auto; text-align: center; gap: 10px; }

    /* Monthly Course Details (PC) */
    .monthly-course-details { padding: 80px 0; }
    .monthly-course-details__title { font-size: 24px; }
    .monthly-course-details__desc { font-size: 16px; }
    .monthly-course-details__note { font-size: 14px; }
    .monthly-course-details__table { margin: 24px 0 28px; }
    .monthly-course-details__table .mcd-cell { font-size: 16px; }
    .mcd-row { grid-template-columns: 150px 1fr 1fr 1fr; min-width: 680px; }

    /* Free Services (PC) */
    .free-services { padding:80px 0; }
    .free-services__lead { font-size:16px; text-align:center; }
    /* 表全体は横幅100%、列幅は 30% / 等分 / 等分 */
    .fs-row { grid-template-columns: 30% 1fr 1fr; min-width: 0; }
    .free-services__table { width: 100%; }
    /* セルpaddingはPCで16pxに統一 */
    .fs-cell { font-size:16px; padding: 16px; }
    /* 1行目（ヘッダー）のセルpaddingは上下32px */
    .fs-row.fs-head .fs-cell { padding: 32px 16px; }
    .fs-col-title strong { font-size:16px; }
    /* 合計価格行のフォントサイズ */
    .free-services__table[aria-label="無料サービス分の合計価格"] .fs-cell { font-size: 18px; }

    /* Present card width on PC */
    .present-card { width: 520px; }

    /* Free services note - enlarge on PC and keep phrase on one line */
    .free-services__note strong { font-size: 26px; font-weight: 400; white-space: nowrap; }
    .free-services__sum strong { font-size: 28px; font-weight: 400; }

    /* Service Quick Reference (PC) */
    .service-table-section { padding: 80px 0; }
    .service-table-title { font-size: 32px; }
    .service-table-subtitle { font-size: 16px; margin-top: 16px; }
    .prefecture-buttons { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; padding: 16px 0; }
    .prefecture-btn { height: 60px; font-size: 18px; }
    .modal-content { max-width: 1000px; }

    /* Header (PC) */
    .header-right {
        gap: 24px;
    }

    /* Trainers Section (PC) */
    .trainers-section { padding: 80px 0; }
    .trainers__title { font-size:32px; }
    .trainers__lead { font-size:18px; }

    /* Section titles - match trainers__title style (PC) */
    .shop_section .h2_type01,
    .faq_section .h2_type01,
    .trial_section .h2_type01,
    .contact_section .h2_type01 {
        font-size: 32px;
    }
    .shop_section .h2_type01 .text_l,
    .faq_section .h2_type01 .text_l,
    .trial_section .h2_type01 .text_l,
    .contact_section .h2_type01 .text_l {
        font-size: 32px;
    }

    /* Shop and FAQ Sections (PC) */
    .shop_section { padding: 80px 0; }
    .shop_section .accordion_list_item_child { padding: 20px; }
    .shop_section .accordion_child_list_wrap { padding: 20px; }
    .shop_section .accordion_child_list { padding: 20px; }
    .shop_section .accordion_child_list_access { padding: 0 20px 20px; }
    .faq_section { padding: 80px 0; }

    /* Contact Section (PC) */
    .contact_section {
        padding: 80px 0;
    }
    .contact_section .text_bold {
        max-width: 730px;
        margin: auto;
    }
    .contact_form {
        max-width: 730px;
        margin: auto;
        border-radius: 8px;
        background: #ffffff;
        padding: 32px;
    }
    .trainers__grid { max-width: 1040px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; overflow: visible; justify-content: center; }
    .trainer-card { padding:24px; gap:16px; width: auto; flex: initial; scroll-snap-align: unset; }
    .trainer-card__avatar { width:180px; height:180px; }
    .trainer-card__name { font-size:18px; }
    .trainer-card__meta { font-size:15px; }
}

/* Trial Flow (PC: 4 columns, no scroll) */
@media (min-width: 1024px) {
    .trial_section { padding: 80px 0; }
    .trial-track { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; overflow:visible; }
    .trial-step { flex: initial; scroll-snap-align: unset; box-shadow: none; }
    .trial_h3_area img { width: auto; height: 70px; padding: 0; }
    .trial_h3_area h3 { height: 80px; }
}

/* Mobile adjustments to mirror campaign04 */
@media (max-width: 768px) {
    .modal-content { max-width: 98%; max-height: 98%; padding: 8px; }
    .modal-image-container { max-height: 80vh; }
    
    /* Header adjustments for SP */
    .header-right {
        gap: 16px;
    }
    
    /* Menu toggle animation adjustment for SP */
    .menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 4px);
    }
}

/* Very small devices: stack 1 column */
@media (max-width: 360px) {
    .prefecture-buttons { grid-template-columns: 1fr; }
}

/* Focus Management for Keyboard Navigation */
.cta-button:focus,
.submit-button:focus,
.form-group input:focus,
.form-group textarea:focus,
.menu-toggle:focus {
    outline: none;
}

/* Skip Link Focus */
.skip-link:focus {
    top: 6px;
    outline: none;
}

/* Three Reasons Section Responsive */
@media (min-width: 1024px) {
    .three-reasons-section {
        padding: 40px;
        max-width: 1280px;
        margin: 0 auto;
    }
    
    .reasons-title {
        font-size: 32px;
    }
    
    .reason-section {
        padding: 32px;
        display: flex;
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        background: #fff;
        border-radius: 8px;
    }
    
    .reason-content {
        flex: 1;
        display: flex;
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
    }
    
    .reason-text-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .reason-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        text-align: left;
    }
    
    .reason-number {
        font-size: 18px;
        text-align: left;
    }
    
    .reason-subtitle {
        font-size: 24px;
        font-weight: normal;
        text-align: left;
    }
    
    /* PC版の改行位置を制御 */
    .reason-section:nth-child(2) .reason-subtitle br:nth-of-type(2) {
        display: block;
    }
    
    /* PC版の改行位置を制御 - classベース */
    .reason-subtitle .br-pc-hide {
        display: none !important;
    }
    
    .reason-subtitle .br-pc-show {
        display: block !important;
    }
    
    .reason-description {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .reason-description-text {
        /* flex: 0 0 589px; */
    }
    
    .reason-description-text p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .reason-cards {
        flex: 0 0 589px;
        display: grid;
        gap: 20px;
    }
    
    /* Reason 1: 2x2 grid */
    .reason-section:nth-child(2) .reason-cards {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    /* Reason 2: 1x2 grid */
    .reason-section:nth-child(3) .reason-cards {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    
    /* Reason 3: 2x2 grid */
    .reason-section:nth-child(4) .reason-cards {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .service-card {
        width: 100%;
        height: 165px;
    }
    
    /* Reason 1: 2x2 grid - 290.5px cards */
    .reason-section:nth-child(2) .service-card {
        width: 290.5px;
        height: 165.33px;
    }
    
    /* Reason 2: 1x2 grid - 286.5px cards */
    .reason-section:nth-child(3) .service-card {
        width: 286.5px;
        height: 163.06px;
    }
    
    /* Reason 3: 2x2 grid - 286.5px cards */
    .reason-section:nth-child(4) .service-card {
        width: 286.5px;
        height: 163.06px;
    }
}