/* Critical iPhone Layout Fixes - 2026-03-29 - ROOT CAUSE FIXED */

/* Fix the root cause: Remove excessive word-break restrictions */
* {
    max-width: 100%;
    box-sizing: border-box !important;
    /* Remove global keep-all that prevents natural Japanese word wrapping */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* Allow natural text wrapping on mobile */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* iPhone specific fixes - Modern iPhone Compatible */
@media only screen and (max-width: 480px) {
    /* Header with navigation - iPhone optimized */
    .header .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .logo {
        flex: 1 !important;
        font-size: clamp(16px, 4vw, 20px) !important;
        margin-right: 8px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    
    .header-nav {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .header-reservation-btn {
        font-size: 10px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .header-reservation-btn::before {
        font-size: 9px !important;
        margin-right: 4px !important;
    }
    
    .hamburger-menu {
        width: 22px !important;
        height: 22px !important;
        gap: 2px !important;
        padding: 3px !important;
        border-radius: 4px !important;
    }
    
    .hamburger-line {
        width: 14px !important;
        height: 1.5px !important;
    }
    
    /* Navigation Menu - Mobile optimized - Right dropdown */
    .nav-menu {
        top: 60px !important;
        right: 10px !important;
        width: 220px !important;
        max-height: 350px !important;
    }
    
    .nav-menu-content {
        padding: 10px 0 !important;
    }
    
    .nav-link {
        font-size: 13px !important;
        padding: 10px 15px !important;
    }
    
    .nav-link-cta {
        margin: 10px 10px 6px 10px !important;
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    .nav-link-cta::before {
        font-size: 12px !important;
        margin-right: 6px !important;
    }
    
    /* Unified container width control for other sections */
    main .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Plan cards - critical overflow fix */
    .plans-grid {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .plan-card {
        margin: 0 0 20px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .plan-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 25px rgba(0, 150, 255, 0.2) !important;
    }
    
    .plan-card:active {
        transform: scale(0.98) !important;
    }
    
    .plan-image {
        height: 150px !important;
    }
    
    .plan-content {
        padding: 15px 10px !important;
    }
    
    .plan-name {
        font-size: 16px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        margin-bottom: 8px !important;
    }
    
    .plan-description {
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    /* FAQ accordion fixes - Enhanced */
    .faq-list {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .faq-item {
        margin: 0 2px 15px 2px !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .faq-question {
        padding: 15px 8px !important;
        font-size: 14px !important;
        min-height: 50px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .faq-question span:first-child {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
    
    .faq-icon {
        font-size: 12px !important;
        min-width: 16px !important;
    }
    
    .faq-answer {
        padding: 0 8px 15px !important;
        font-size: 14px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Notice section fixes - Enhanced */
    .notices-list {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .notice-item {
        margin: 0 2px 15px 2px !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .notice-question {
        padding: 15px 8px !important;
        font-size: 14px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .notice-question span:first-child {
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
    
    .notice-answer {
        padding: 0 8px 15px !important;
        font-size: 14px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Items section fixes - 完全に読みやすく修正 */
    .items-categories {
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .items-category {
        margin: 0 !important;
        padding: 15px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .category-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }
    
    .items-list {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .items-list li {
        padding: 8px 0 8px 20px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    
    .items-list li::before {
        font-size: 14px !important;
        top: 8px !important;
    }
    
    .item-note {
        font-size: 12px !important;
        margin-top: 3px !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    
    /* 開催場所セクション iPhone対応 - Vertical Layout */
    .locations-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .location-card {
        margin: 0 0 20px 0 !important;
        padding: 20px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Force vertical stacking for all location details */
    .location-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .location-address,
    .location-access,
    .location-parking,
    .location-facilities {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
    }
    
    .location-map-embed {
        margin-top: 15px !important;
    }
    
    .location-map-embed iframe {
        height: 180px !important;
        border-radius: 8px !important;
    }
    
    .location-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .location-name {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    .location-type {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
    
    .location-description {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    .info-label {
        min-width: unset !important;
        width: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0099FF !important;
        margin-bottom: 3px !important;
        flex-shrink: 0 !important;
    }
    
    .info-value {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        width: 100% !important;
    }
    
    /* 予約アイコン 1列表示 - iPhone幅では縦並び */
    .reservation-methods {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .reservation-method {
        padding: 20px 15px !important;
        margin: 0 !important;
        text-align: center !important;
        min-height: 120px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Allow natural text wrapping */
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }
    
    .reservation-icon {
        margin-bottom: 8px !important;
    }
    
    .reservation-label {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        /* Remove keep-all to allow natural wrapping */
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-weight: 600 !important;
    }
    
    .reservation-instruction {
        font-size: 12px !important;
        line-height: 1.4 !important;
        /* Remove keep-all to allow natural wrapping */
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        flex: 1 !important;
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 5px !important;
        text-align: center !important;
    }
    
    /* Instructor section fixes - Unified mobile layout */
    .instructors-grid {
        display: block !important;
        width: 100% !important;
    }
    
    .single-instructor-card {
        margin: 0 0 20px 0 !important;
        padding: 20px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .instructor-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .instructor-image,
    .instructor-placeholder {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        min-width: 100px !important;
        border-width: 3px !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }
    
    .instructor-info {
        width: 100% !important;
        text-align: center !important;
    }
    
    .instructor-name {
        font-size: 18px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
    }
    
    .instructor-role,
    .instructor-title,
    .instructor-certification,
    .instructor-qualification {
        font-size: 14px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }
    
    .instructor-profile,
    .instructor-message,
    .instructor-message p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
        margin-top: 15px !important;
    }
    
    /* インストラクターのリストマーカー修正 */
    .safety-items {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .safety-items li {
        position: relative !important;
        padding: 5px 0 5px 20px !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .safety-items li::before {
        content: '•' !important;
        position: absolute !important;
        left: 0 !important;
        top: 5px !important;
        color: #00CCFF !important;
        font-weight: bold !important;
        font-size: 16px !important;
    }
    
    .safety-items li::marker {
        display: none !important;
        content: none !important;
    }
    
    /* Hero section fixes */
    .hero-title {
        font-size: clamp(18px, 5vw, 24px) !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    .hero-subtitle {
        font-size: clamp(12px, 3.5vw, 16px) !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Section titles */
    .section-title {
        font-size: 18px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    /* Hero CTA Buttons - iPhone optimized */
    .hero-cta {
        margin-top: 25px !important;
        gap: 15px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .hero-reservation-btn {
        font-size: 16px !important;
        padding: 12px 25px !important;
        min-width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    .hero-reservation-btn::before {
        font-size: 14px !important;
        margin-right: 6px !important;
    }
    
    .btn-secondary {
        font-size: 14px !important;
        padding: 10px 20px !important;
        min-width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* News section fixes - Enhanced */
    .news-list {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .news-item {
        padding: 15px 10px !important;
        margin: 0 2px 15px 2px !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .news-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .news-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
    }
    
    .news-content {
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    .news-date {
        font-size: 12px !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
    
    .news-category {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* iPhone SE and smaller - Modern iPhone Compatible */
@media only screen and (max-width: 375px) {
    .header .container {
        padding: 0 12px !important;
    }
    
    main .container {
        padding: 0 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
    
    .logo {
        font-size: clamp(14px, 4vw, 18px) !important;
    }
    
    .header-reservation-btn {
        font-size: 9px !important;
        padding: 4px 6px !important;
    }
    
    .header-reservation-btn::before {
        font-size: 8px !important;
        margin-right: 3px !important;
    }
    
    .hamburger-menu {
        width: 24px !important;
        height: 24px !important;
    }
    
    .hamburger-line {
        width: 16px !important;
    }
    
    .nav-link {
        font-size: 15px !important;
        padding: 10px 12px !important;
    }
    
    .nav-link-cta {
        font-size: 13px !important;
        padding: 10px 12px !important;
        margin: 8px 8px 4px 8px !important;
    }
    
    .nav-link-cta::before {
        font-size: 11px !important;
        margin-right: 5px !important;
    }
    
    /* Hero CTA Buttons - iPhone SE */
    .hero-cta {
        margin-top: 20px !important;
        gap: 12px !important;
    }
    
    .hero-reservation-btn {
        font-size: 15px !important;
        padding: 10px 20px !important;
        max-width: 250px !important;
    }
    
    .hero-reservation-btn::before {
        font-size: 13px !important;
        margin-right: 5px !important;
    }
    
    .btn-secondary {
        font-size: 13px !important;
        padding: 8px 16px !important;
        max-width: 250px !important;
    }
    
    .plan-card, .items-category, .single-instructor-card {
        margin: 0 1px 15px 1px !important;
        width: calc(100% - 2px) !important;
        max-width: calc(100% - 2px) !important;
    }
    
    .plan-content {
        padding: 12px 8px !important;
    }
    
    .items-category {
        padding: 15px 8px !important;
    }
    
    .single-instructor-card {
        padding: 12px 6px !important;
    }
    
    .plan-name {
        font-size: 15px !important;
    }
    
    .faq-question, .notice-question {
        padding: 12px 6px !important;
        font-size: 13px !important;
    }
    
    /* 予約アイコン iPhone SE対応 */
    .reservation-methods {
        gap: 8px !important;
    }
    
    .reservation-method {
        padding: 10px 6px !important;
        min-height: 160px !important;
    }
    
    .reservation-label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }
    
    .reservation-instruction {
        font-size: 8px !important;
        line-height: 1.0 !important;
        padding: 0 1px !important;
    }
    
    .reservation-icon {
        margin-bottom: 6px !important;
        height: 32px !important;
    }
    
    .reservation-icon-img,
    .reservation-icon-emoji {
        max-width: 32px !important;
        max-height: 32px !important;
        font-size: 32px !important;
    }
    
    /* 開催場所マップ調整 */
    .location-map-embed iframe {
        height: 200px !important;
    }
}