/*
Theme Name: HANAKOGANEI KENMOKU TABLE TENNIS CLUB_26.2.20
Description: Custom theme for Hanakoganei Kenmoku Table Tennis Club
Version: 1.0
Author: Misa Nakamura
*/
:root {
    /* Premium Colors */
    --color-primary: #052020;
    /* Deepest Forest Green */
    --color-primary-light: #0F3D3E;
    --color-accent: #FF4500;
    /* Energetic Orange */
    --color-accent-glow: rgba(255, 69, 0, 0.4);
    --color-bg-dark: #020F0F;
    --color-bg-light: #F4F7F7;

    --color-text: #E0E0E0;
    --color-text-dark: #333333;
    --color-text-muted: #A0A0A0;

    --color-white: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 5rem;
    --spacing-xl: 10rem;

    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* v84: Increased base font size for better visibility */
    font-size: 17.5px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    /* v84: Increased line-height for readability */
    line-height: 1.9;
    background-color: var(--color-bg-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--color-white) !important;
}

.bg-dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.block {
    display: block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    /* v92: Compact buttons for header fit */
    border-radius: 0;
    /* Premium look often embraces sharp or slightly rounded, going with standard buttons here */
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary,
.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: 0 4px 20px var(--color-accent-glow);
}

.btn-primary::before,
.btn-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}

.btn-primary:hover::before,
.btn-accent:hover::before {
    left: 100%;
}

.btn-primary:hover,
.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--color-accent-glow);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-text-dark);
}

.btn-reservation {
    background: #e91e63;
    /* Pinkish Red */
    color: white;
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
}

.btn-reservation:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.6);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-primary);
    /* Force Navy */
    transition: all 0.4s ease;
    /* v87: Auto height for vertical layout content */
    height: auto;
    /* Removed fixed var(--header-height) */
    min-height: var(--header-height);
    /* Keep min-height for structure */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* v87: Add padding for vertical spacing */
    padding: 1rem 0;
}

.header.scrolled {
    background: rgba(12, 31, 64, 0.95);
    /* Navy with slight transparency */
    backdrop-filter: blur(10px);
}

.header-container {
    display: flex;
    /* v93: 3-Tier Layout (Vertical Stack) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* Distinct vertical gap between tiers */
    width: 100%;
    padding: 1rem 2rem;
    /* Increase vertical padding for stacked look */
    max-width: 1400px;
}

/* v93: Centered Buttons for Stack */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center buttons */
    gap: 1rem;
    flex-shrink: 0;
    width: 100%;
    /* Ensure full width for centering */
}

/* Mobile Actions Alignment */
/* Mobile/Tablet Actions Alignment */
@media (max-width: 1024px) {
    .header-actions {
        width: auto !important;
        margin-left: auto !important;
        /* Push to right */
        margin-right: 0.5rem;
        /* Space from toggle */
        flex-shrink: 1;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .btn-reservation {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* =========================================
   v102: Scroll-Linked Compact Header
   ========================================= */
.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    /* Light translucent bg for readability */
    padding: 0.5rem 0;
    /* Compact padding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header.scrolled .header-container {
    flex-direction: row;
    /* Horizontal layout */
    justify-content: space-between;
    /* Spread items */
    padding: 0 5%;
    /* Horizontal padding */
    max-width: 100%;
    gap: 2rem;
}

/* 1. Logo Compact */
.header.scrolled .logo {
    font-size: 1rem;
    /* Smaller text */
    gap: 10px;
}

.header.scrolled .logo-img-wrapper {
    width: 40px;
    /* Smaller icon */
    height: 40px;
    background: var(--color-primary);
    /* Invert colors for contrast if needed, or keep white */
    padding: 5px;
}

.header.scrolled .logo-text {
    color: var(--color-primary);
    /* Dark text on light bg */
    font-size: 1rem;
    display: block !important;
    /* Ensure visible on desktop */
}

/* Hide logo text on mobile scroll to save space if needed, or keep it */
@media (max-width: 1024px) {
    .header.scrolled .logo-text {
        /* display: none !important; <-- Removed to allow text if needed, or keep hidden? 
           User said "icon is gone", implied they missed it. 
           If they want text gone on scroll, keep it. 
           But if they want text visible always? 
           Let's keep text hidden on scroll to save space as per original intent?
           "Logo Text is not visible" in verification was at TOP. 
           So this rule (scrolled) shouldn't affect TOP.
           I'll leave this effectively as is but uncommenting display none for now until clarification?
           Actually, verify report said "Logo Text not visible" at TOP.
           So I should check TOP rules (line 378).
        */
        display: none !important;
    }

    .header.scrolled .logo-img-wrapper {
        display: flex !important;
        /* Ensure icon is visible */
    }
}

/* 2. Nav Compact */
.header.scrolled .nav {
    width: auto;
    /* Shrink to fit content */
    margin: 0;
}

.header.scrolled .nav-link {
    color: var(--color-primary);
    /* Dark text */
    font-size: 0.8rem;
}

.header.scrolled .nav-link:hover {
    color: var(--color-accent);
}

.header.scrolled .nav-link::after {
    background: var(--color-accent);
}

/* 3. Actions Compact */
.header.scrolled .header-actions {
    width: auto;
    /* Shrink to fit */
    gap: 1rem;
}

.header.scrolled .btn-reservation {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Mobile Scroll Adjustments */
@media (max-width: 1024px) {
    .header.scrolled .header-container {
        padding: 0 1rem;
        gap: 1rem;
    }

    /* Keep structure but compact */
    .header.scrolled .nav {
        /* display: none;  <-- REMOVED to allow menu overlay to work */
        /* Instead, we rely on the fixed position off-screen from line 1902 */
        display: flex;
    }

    .header.scrolled .menu-toggle {
        display: block;
        margin-left: 0;
        /* Handled by header-actions margin */
    }

    .header.scrolled .bar {
        background: var(--color-primary);
        /* Dark bars */
    }
}

/* v93: Nav Full Width Center */
.nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-white);
    /* White text */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Removed pill container styles */
    flex-shrink: 0;
    /* v100: Prevent crushing */
}

/* v98: Mobile/Tablet Logo Fix */
@media (max-width: 1024px) {
    .logo-img-wrapper {
        /* v103: Restore icon on mobile per user request */
        display: flex !important;
        width: 35px;
        height: 35px;
        padding: 2px;
    }

    .logo-text {
        font-size: 1rem;
        /* Slightly smaller to fit */
        display: block !important;
        white-space: nowrap !important;
        width: auto;
        color: #fff !important;
        /* Ensure visibility */
        opacity: 1 !important;
    }
}

.logo-img-wrapper {
    background: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.logo:hover .logo-img-wrapper {
    transform: scale(1.05);
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    display: inline-block;
}

/* Ensure logo works on light sections if header sticky changes color, 
   but for this design we assume dark header overlays hero or becomes dark-glass */
.header.scrolled .logo {
    color: var(--color-white);
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* v92: Tighten nav gap for 3-col layout */
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    /* v92: Reduce font size slightly for fit */
    font-weight: 700;
    /* v40: Bold */
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    position: relative;
    /* v90: Prevent text wrapping */
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--color-white);
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.bar {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--color-white);
    margin: 6px 0;
    transition: 0.3s;
}

/* v63: FORCE REMOVE ALL ACCENTS FROM MIDDLE CARD */
.concept-card:nth-child(2) {
    border-bottom: none !important;
    background: #ffffff !important;
}

.concept-card:nth-child(2)::before,
.concept-card:nth-child(2)::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* v97: Reduced opacity for visibility (was 0.85/0.8) */
    background: linear-gradient(135deg, rgba(5, 32, 32, 0.3) 0%, rgba(5, 32, 32, 0.4) 60%, rgba(5, 32, 32, 0.3) 100%);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-content {
    /* v35: Center Overlay */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    z-index: 2;
    text-align: center;
}

.hero-title {
    font-family: var(--font-heading);
    /* v85: Fixed responsive sizes + Wrapping Allowed */
    font-size: 1.9rem;
    /* Mobile default ~33px (was ~43px) */
    font-weight: 800;
    line-height: 1.1;
    /* Slightly tighter for potential multi-line */
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* v85: Allow wrapping */
    white-space: normal;

    /* v80: Safety for overflow */
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (min-width: 1025px) {
    .hero-title {
        font-size: 3.4rem;
        /* Desktop ~60px (was ~70px) */
    }
}

.hero-subtext {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 2.0;
    /* v60: Increased line height */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-title .block {
    display: block;
    /* v77: Remove gradient, strictly White */
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hero-subtitle {
    /* v35: Increased size for readability */
    font-size: 1.3rem;
    margin-bottom: 3rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 1.5rem;
}

/* Scroll Down */
.scroll-down {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        top: -100%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}

/* Section Components */
.section {
    padding: var(--spacing-xl) 0;
}

.section-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section-subtitle {
    font-family: var(--font-heading);
    color: var(--color-accent);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: 700;
}

/* Concept Section - Modern Cards */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* v44: Coach Profile List */
.coach-profile-list {
    margin: 0;
    padding: 0;
}

.profile-row {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.8rem 0;
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-row dt {
    font-weight: 700;
    width: 150px;
    /* v50: Fixed width for alignment */
    flex-shrink: 0;
    /* v50: Prevent shrinking */
    box-sizing: border-box;
    color: var(--color-primary);
}

.profile-row dd {
    margin: 0;
    flex-grow: 1;
    line-height: 1.6;
}

/* Mobile responsive for profile */
@media (max-width: 500px) {
    .profile-row {
        flex-direction: column;
        gap: 0.2rem;
    }

    .profile-row dt {
        width: 100%;
        color: var(--color-accent);
        font-size: 0.9em;
    }
}

.concept-card {
    background: #ffffff;
    padding: 3rem 2rem;
    border-radius: 8px;
    /* v48: Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* v48: Drop shadow */
    border: none;
    /* v48: Remove border */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* v48: Orange line for the middle card (Mental Support) */
.concept-card:nth-child(2) {
    border-bottom: 5px solid #ff7f50;
}

.concept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.concept-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.concept-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.concept-card:hover::before {
    transform: scaleX(1);
}

.concept-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.concept-card h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Courses - Premium Layout */
.bg-light {
    background: #F8FBFB;
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.course-item {
    /* v37: Switch to Flexbox for easier row-reversal */
    display: flex;
    align-items: center;
    justify-content: center;
    /* v113: Center course items */
    gap: 4rem;
}

/* v37: Automatic Zig-Zag */
.course-item:nth-child(even) {
    flex-direction: row-reverse;
}

.course-item:nth-child(even) .course-info {
    text-align: center;
    /* v113: Changed from right to center */
}

/* Ensure images and content columns behave as 50% split in flex */
.course-img-col,
.course-content-col {
    flex: 1;
    width: 50%;
    /* Explicit width guidance for flex items */
}

/* Mobile Stack */
@media (max-width: 900px) {

    .course-item,
    .course-item:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .course-img-col,
    .course-content-col {
        width: 100%;
    }
}

.course-img-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    height: 350px;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    /* v54: Force Left Align items */
}

.course-category-label {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: var(--color-accent);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50px;
    margin: 0 0 1rem 0 !important;
    /* v54: Reset margin for left align */
    align-self: flex-start !important;
    /* v54: Align Self Left */
}

.course-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-primary);
}

.course-info h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.course-info h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    margin-top: 1rem;
}

.price {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 2rem;
}

.unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

/* Coaches */
.coach-profile {
    display: flex;
    background: white;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}

.coach-img-wrapper {
    width: 40%;
}

.coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coach-details {
    padding: 4rem;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coach-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* v38: Coach Placeholder Layout Fix */
.coach-placeholder .coach-img-wrapper {
    /* Center the logo image */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fafafa;
    /* visual consistency */
}

.coach-placeholder .coach-details {
    /* Force Left align for text */
    text-align: left;
    align-items: flex-start;
}

.coach-role {
    font-size: 0.8rem;
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.info-group p {
    margin: 0;
}

/* v47: Info Box Flex Layout */
.info-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.info-text-content {
    flex: 1;
}

.info-img-content {
    margin-left: 2rem;
    flex-shrink: 0;
}

.info-cat-img {
    width: 140px;
    height: auto;
    display: block;
}

/* Mobile responsive for Info Box */
@media (max-width: 600px) {
    .info-flex-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .info-img-content {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .info-cat-img {
        width: 120px;
    }
}

/* v23: Standardize Button Styles */
.btn-primary,
button[type="submit"] {
    background-color: #ff4500 !important;
    /* v74: User requested strict Orange */
    color: #ffffff !important;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Contact */
.contact {
    background: #e8f7ec;
    /* v43: Light Green */
    color: #1b4332;
    /* v43: Dark Green Text */
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: 'ACE';
    position: absolute;
    top: -50px;
    right: -50px;
    font-size: 30rem;
    font-family: var(--font-heading);
    font-weight: 800;
    opacity: 0.03;
    pointer-events: none;
}

.contact-form {
    background: #ffffff;
    /* v43: White Box */
    padding: 3rem;
    border: 1px solid #1b4332;
    /* v43: Dark Border */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(27, 67, 50, 0.05);
}

.form-group label {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    opacity: 0.8;
    color: #1b4332;
    /* v43: Dark Green Label */
}

.form-group input,
.form-group textarea,
.form-group select {
    background: #ffffff;
    border: 1px solid rgba(27, 67, 50, 0.2);
    color: #1b4332;
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-accent);
}

/* Footer */
.footer {
    /* v27: Update Footer Background to Navy (Header Color) per user request */
    background: #172554 !important;
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* Footer SNS */
.footer-sns {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.footer-sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-sns-link:hover {
    background: var(--color-accent);
    transform: translateY(-3px);
    border-color: var(--color-accent);
}

.footer-sns-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Animation Utilities */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
    /* v69: Ensure no gradient here either */
    background: none;
    -webkit-text-fill-color: initial;
}

.reveal-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease-out;
}

.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* v78: Contact Success Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

p {
    margin-bottom: 2rem;
    font-weight: 500;
    /* v84: Force zero indentation and justify alignment globally for p tags */
    text-indent: 0 !important;
    text-align: justify;
}

/* Specific overrides for centered text components if needed */
.text-center p {
    text-align: center;
    /* keep center for explicit center utility, BUT see below for specific bio/concept text */
}

/* v84: Explicitly target long text blocks for justify/left alignment to override center text-align of their parents */
.concept-card p,
.coach-bio-text,
.course-desc,
.support-content p {
    text-align: justify;
    text-indent: 0 !important;
}

.modal-body {
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.modal-close {
    cursor: pointer;
    min-width: 150px;
}

/* v79: News Section */
.news-list-container {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    width: 120px;
    flex-shrink: 0;
}

.news-title {
    flex-grow: 1;
    color: var(--color-text-dark);
}

/* Mobile responsive for News */
@media (max-width: 500px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news-date {
        font-size: 0.9rem;
        color: var(--color-accent);
    }
}

.hero {
    position: relative;
    width: 100%;
    /* v34: Remove fixed height/min-height to allow image to dictate height */
    min-height: auto;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    /* v34: Reset to simple container */
    /* v35: Change to relative so it dictates height, but allow overlay to sit on top easily */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; removed to let img drive height */
    z-index: 1;
    /* Ensure it's behind content but visible */
}

/* v34: Ensure Hero Image is Full Width & maintains Aspect Ratio */
.hero-img {
    width: 100%;
    height: auto;
    /* Allow height to shrink */
    display: block;
    /* v97: revert to cover to fill screen */
    object-fit: cover;
    /* Ensure full image is visible, no cropping */
    /* If object-fit: contain leaves gaps, we might want width: 100%; height: auto; which is default for img usually */
    /* Key requirement: "画像の全貌が常に表示される" -> No cropping */
    object-position: center center;
    /* Center characters in the visible area */
}

/* Sections */
.section-padding {
    padding: 6rem 0;
    /* Reduced top padding as requested earlier or good default */
}

/* Reverting bg-light to white or removing usage for courses */
.bg-light {
    background-color: #fff;
}

/* Courses */
.course-info-box {
    /* v31: Light Green Theme */
    /* v33: Force override of any lingering dark modes */
    background: #e8f7ec !important;
    /* Light Green */
    border-radius: 12px;
    padding: 3rem;
    margin-top: 4rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    color: #1b4332 !important;
    /* Dark Green Text */
}

.course-info-box h3,
.course-info-box strong {
    color: #1b4332 !important;
    /* Dark Green Headers */
}

.course-info-box .info-list li {
    border-bottom: 1px solid rgba(27, 67, 50, 0.2);
    /* Dark Green separator with opacity */
}

/* Coach Section - v95: Mixed Grid Layout (2-Col Top, 3-Col Bottom) */
.coach-mixed-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.coach-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Force 2 columns */
    gap: 2rem;
    align-items: stretch;
}

.coach-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Force 3 columns */
    gap: 2rem;
    align-items: stretch;
}

/* Responsive adjustments */
@media (max-width: 900px) {

    .coach-grid-2,
    .coach-grid-3 {
        grid-template-columns: 1fr;
        /* Stack everything on mobile/tablets */
    }
}

.coach-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Uniform height */
}

.coach-card-img-wrapper {
    width: 100%;
    height: 350px;
    /* Fixed height for image area */
    background: #f4f7f6;
    overflow: hidden;
}

.coach-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.coach-card:hover .coach-card-img {
    transform: scale(1.05);
}

.coach-card-body {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.coach-card-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.coach-title-suffix {
    font-size: 0.7em;
    font-weight: normal;
    margin-left: 0.5em;
    color: var(--color-text-muted);
}

.coach-card-subtitle {
    font-size: 1.1rem;
    color: var(--color-white);
    background: var(--color-primary);
    /* v113: Fixed padding — reduced left from 2rem to 1rem */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1rem;
    font-weight: 600;
}

.coach-card-section {
    margin-bottom: 1rem;
}

.coach-card-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-dark);
    text-align: justify;
}

/* Reuse existing profile list styles but ensure they fit inside card */
.coach-profile-list .profile-row {
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 0.5rem;
}

.coach-profile-list dt {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}

.coach-profile-list dd {
    margin-left: 0;
    font-size: 0.95rem;
}

/* Ensure achievements fit */
.achievement-list .achieve-group {
    margin-bottom: 1rem;
}

.achievement-list .achieve-title {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 700;
}

.achievement-list .achieve-detail {
    font-size: 0.9rem;
    padding-left: 2em;
    text-indent: -1em;
    border-left: 2px solid var(--color-accent);
    margin-left: 0.5em;
    margin-bottom: 0.3rem;
    line-height: 1.6;
}

/* v66: Responsive Hero Title */
/* v73: Enforce Flexbox Column Layout for Hero Content */
.hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    /* Space between elements */
}

.hero-title {
    /* v34: Original styles */
    font-family: var(--font-heading);
    font-weight: 700;
    /* Bold */
    /* v69/v71: Make text simple white, remove all gradients */
    color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;


    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 0 !important;
    /* Managed by gap */

    /* v66: Force single line responsive */
    /* v96: User requested 10px smaller (was 8vw/6rem) */
    font-size: min(7.2vw, 5.4rem) !important;
    white-space: normal !important;
    /* Ensure wrapping is allowed */
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    /* Safety against overflow */
    text-align: center;
}

/* v66: Override block spans to be inline for single line */
/* v71: Ensure child spans also have no gradient and are white */
.hero-title .block {
    display: inline-block !important;
    margin-right: 0.2em;
    /* Add spacing between words */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* v71: Hero Subtext Overrides */
.hero-subtext {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    /* Stronger shadow for readability over image */
}

/* v59: End */

/* v67: Mobile Layout Fixes */
@media (max-width: 600px) {

    /* 1. Header Title Size */
    .logo-text span:first-child {
        font-size: 4vw !important;
    }

    /* 2. Hero: no padding-top — hero goes behind transparent header by design */

    /* 3. Coach Bio Padding Reduction -> Reverted */
    .coach-img {
        height: 250px;
    }

    /* v67: Fix Coach Section Mobile Padding */
    .coach-bio-box {
        padding: 1rem !important;
        /* v75: User requested reduced padding to maximize width, but 1rem seems okay.
           Let's make sure the container allows it.
           Actually, user said "reduce padding... to maximize width".
           I will try 0.5rem for specific achievement lists or general if needed.
           Let's keep 1rem generally but ensure text uses it well.
        */
    }

    /* v75: Mobile Achievements Specifics */
    .achieve-detail {
        padding-left: 1em;
        text-indent: -1em;
        font-size: 0.95rem;
        /* Slightly smaller for better fit if needed, or keep standard */
    }
}

/* v75: Achievement List Styling (Global) */
.achievement-list {
    margin-top: 0.5rem;
}

.achieve-group {
    margin-bottom: 1.2rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    /* Optional separator for clarity */
    padding-bottom: 0.5rem;
}

.achieve-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.achieve-title {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
    display: block;
}

.achieve-detail {
    display: block;
    margin-bottom: 0.3rem;
    line-height: 1.6;
    /* Hanging indent desktop default too */
    line-height: 1.6;
    /* Hanging indent fix: indent -1em requires padding to be > 1em to not overlap border */
    padding-left: 1.5em;
    text-indent: -1em;
}

/* v72: Coach Card Sizing - Strictly 3px gap from edges using width calc */
@media (max-width: 600px) {
    #coaches .container {
        /* v72: User requested NOT to use padding for outer margins, so we reset/ensure full width here and control at card level */
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .coach-item {
        /* v72: Explicit calculation for 3px side gaps */
        width: calc(100% - 6px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 4. Coach Name Line Break */
    .coach-title-suffix {
        display: block;
        font-size: 0.8em;
        /* Optional: slightly smaller for the title part */
        margin-top: 0.2rem;
    }

    /* Ensure coach name container handles the block element */
    .coach-name {
        line-height: 1.3;
    }
}

.coach-placeholder .coach-bio-text {
    text-align: center !important;
}

@media (max-width: 768px) {

    .coach-item,
    .coach-item:nth-child(even) {
        flex-direction: column;
        padding: 2rem;
    }

    .coach-img-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        height: 400px;
        /* Still tall on mobile */
        /* v20: Update animation moved to general rule or here override if needed */
        animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* v24: Fix Mobile View - Ensure text boxes use full width */
    .coach-bio-box {
        width: 100%;
        /* Ensure full width */
        max-width: none;
        /* Remove any max-width constraints */
        margin-left: 0;
        margin-right: 0;
        padding: 1.5rem;
        /* Adjust padding if needed, but keep it comfortable */
    }

    .coach-name {
        text-align: center;
    }

    .coach-bio-container {
        grid-template-columns: 1fr;
        /* Ensure stack on mobile */
    }
}

/* Access alignment */
.access-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left !important;
    /* Force left align */
}

.center-block {
    display: block;
    /* Ensure block level */
}

/* Zigzag Course Layout - v18/v19/v20 Updates */
.course-zigzag {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.course-item-alt {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Even items: Image Right, Content Left */
.course-item-alt:nth-child(even) {
    flex-direction: row-reverse;
}

.course-img-col {
    flex: 1;
    max-width: 45%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* v20: Pop-in defined in general rule */
    animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* v21: Ensure container hugs image */
    display: flex;
    /* Removes potential inline gaps */
    align-items: stretch;
    /* v22: Ensure image stretches to full height */
    /* v23: Enforce strict 1:1 aspect ratio for ALL course images */
    aspect-ratio: 1 / 1;
}

.course-img-col img {
    width: 100%;
    height: 100%;
    /* v21: Ensure full height fill */
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

/* v18: Group Lesson Image (2nd item in zigzag usually, or check structure)
   Assuming Group Lesson is the 2nd item or we can target via generic aspect ratio class if added
   Or target via nth-child:
   1st: Personal (Keep original?)
   2nd: Group (Make 1:1)
*/

/* v23: ALL images are now 1:1 by default via generic class above */
/* .course-item-alt:nth-child(2) .course-img-col { aspect-ratio: 1 / 1; } - Removed redundancy */

.course-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* v51: Ensure left alignment */
    /* v23: Revert to Left Align for text content, Title will be centered via align-self */
    align-items: flex-start;
    text-align: left;
}

.course-category-label {
    /* v29: Use Flexbox for perfect vertical + horizontal centering */
    display: inline-flex;
    justify-content: center;
    align-items: center;

    background: var(--color-accent);
    color: white;
    /* v18: White text */
    padding: 0.4rem 1.6rem;
    /* Balanced padding */
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.25rem;
    /* v19: Increased size (approx +2pt/0.35rem from 0.9rem) */
    /* v23: Center THIS ELEMENT only */
    align-self: center;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    text-align: center;
    min-width: 120px;
    line-height: normal;
    /* Reset line-height to let flexbox handle vertical align */
}

/* Accent underline for title */
.course-category-label::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--color-accent);
    margin-top: 0.5rem;
}

/* .course-item-alt:nth-child(even) .course-category-label::after { */
/* Align underline for reversed layout if needed, keeping it left for consistency usually looks best */
/* } */

/* Responsive */
@media (max-width: 900px) {

    .course-item-alt,
    .course-item-alt:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
    }

    .course-img-col {
        /* v28: Fix Mobile Image Distortion */
        width: 100%;
        /* Force full width */
        max-width: 100%;
        /* Prevent constraining */
        flex: 0 0 auto;
        /* Don't let flex shrink it */
        min-height: 0;
        /* Reset any min-height *
        height: auto;          /* Allow aspect-ratio to dictate height */
        aspect-ratio: 1 / 1 !important;
        /* Strict Square */
    }

    .course-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* v20: Ensure images fill the circle/box nicely */
    object-position: top center;
    /* v56: Focus on face for portrait images */
}

@media (max-width: 1024px) {
    .header .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--color-primary);
        flex-direction: column;
        /* v103: Fix menu cutoff */
        justify-content: flex-start;
        padding-top: 6rem;
        /* Space for header/close button */
        overflow-y: auto;
        /* Scrollable if tall */
        transition: 0.4s;
    }

    /* v87: Restore Horizontal Header for Mobile */
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        /* Reset gap */
    }

    .header .nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        font-size: 1.5rem;
    }

    .course-item,
    .course-item:nth-child(even) {
        grid-template-columns: 1fr;
        text-align: left !important;
    }

    .course-zigzag {
        gap: 4rem;
    }

    .coach-profile {
        flex-direction: column;
    }

    .coach-img-wrapper,
    .coach-details {
        width: 100%;
    }

    .menu-toggle {
        display: block;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

/* Contact Watermark - v21: Light Background */
.contact {
    position: relative;
    overflow: hidden;
    /* v21: Light Background */
    background-color: #f4f7f6;
    color: var(--color-primary);
}

/* Re-apply bg-dark class style removal if needed */
.section.contact.bg-dark {
    background-color: #f4f7f6 !important;
    color: var(--color-primary) !important;
}

/* v21: Update text colors inside contact (outside form) to Navy */
/* v25: Revert to WHITE for Header text per user request */
.contact .section-title,
.contact .contact-lead {
    color: #FFFFFF !important;
}

.contact::before {
    content: "HANAKOGANEI KENMOKU TABLE TENNIS SCHOOL";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-size: 5vw;
    font-weight: 900;
    /* v21: Darker watermark for light bg */
    color: rgba(12, 31, 64, 0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    font-family: var(--font-heading);
}

.contact-wrapper {
    position: relative;
    z-index: 2;
    /* Content above watermark */
    max-width: 600px;
    /* Centered form container */
    margin: 0 auto;
    /* v21: Dark Form Container */
    /* v22: Dark Form Container - Header Navy is usually --color-primary or similar dark */
    background-color: var(--color-primary);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
    /* v22: Add spacing between fields (approx 1 line) */
    margin-bottom: 2rem;
}

/* v21: Inputs White BG, Black Text */
/* v23: Update Font to Heading Font (Montserrat) and Increase Size (+3pt approx -> 1.2rem) */
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form button,
.contact-form label {
    font-family: var(--font-heading);
    font-size: 1.2rem !important;
    /* Increased size */
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ddd;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999;
}

/* v21: Labels inside form need to be white -> v43: Removed for light theme */
.contact-form label {
    color: #1b4332 !important;
}

/* v20: Access Info Line Decoration */
.access-content h3 {
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

/* Footer v21 & v42: Layout & Cat */
.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align bottom so cat sits nicely */
    padding-bottom: 1rem;
}

.footer-left {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align everything */
    gap: 1rem;
}

.footer-cat-img {
    max-width: 180px;
    height: auto;
    display: block;
    /* Make it look like it's sitting on the bottom edge */
    margin-bottom: -10px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links li {
    display: inline-flex;
    align-items: center;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 1.1rem;
    /* v40: Increased size */
    font-weight: 700;
    /* v40: Bold */
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-left {
        align-items: center;
        /* Center align on mobile */
        width: 100%;
    }

    .footer-cat-img {
        max-width: 120px;
        /* Smaller on mobile */
        margin-bottom: 0;
    }

    /* If user wanted cat "under or above", currently it's under because DOM order. 
       If we want specific order: */
    /* .footer-right { order: 2; } default is fine. */
}

.footer-links li a:hover {
    color: var(--color-accent);
}

/* v21: Separator Slash */
.footer-links li:not(:last-child)::after {
    content: "/";
    margin-left: 1rem;
    color: var(--color-accent);
    opacity: 0.7;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* v20: Pop-in Animation (Scale Up + Fade In) instead of Float */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in {
    animation: popIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Applying pop-in to elements instead of float */
.coach-img-wrapper,
.course-img-col,
.course-img-col img {
    /* Remove float animation */
    /* animation: floatImage ... removed */
    /* Add pop-in */
    animation: popIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.8s ease forwards;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-white {
    color: white;
}

.text-primary {
    color: var(--color-primary);
}

/* Responsive General */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .section-title {
        font-size: 2rem;
        /* Smaller titles on mobile */
    }

    .hero-title {
        font-size: 3rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    /* Footer Stack on Mobile if needed, or keep row wrapping */
    .footer-links {
        gap: 0.5rem;
    }

    .footer-links li:not(:last-child)::after {
        margin-left: 0.5rem;
    }

    /* Courses Table Scroll on Mobile */
    /* v26: Revert scroll, force wrap per user request */
    .pricing-table-wrapper {
        /* overflow-x: auto;  <-- Removed scroll */
        width: 100%;
        display: block;
    }

    .pricing-table {
        min-width: 0;
        /* Remove fixed min-width */
        width: 100%;
        table-layout: fixed;
        /* Force table to fit container */
    }

    .pricing-table td {
        white-space: normal;
        /* Allow wrapping */
        word-wrap: break-word;
        /* Break long words if necessary */
        overflow-wrap: break-word;
        /* Modern standard */
        font-size: 0.9rem;
        /* Slightly smaller font to help fit */
        padding: 0.8rem 0.5rem;
        /* Reduce padding slightly */
    }

    .pricing-table td:first-child {
        width: 40%;
        /* Give label column slightly less space */
    }
}

/* Ensure wrapper works on all screens if content overflows */
.pricing-table-wrapper {
    width: 100%;
    margin-bottom: 1rem;
}

/* Pricing Tables & Info */
.pricing-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.support-content {
    background-color: #e8f7ec !important;
    color: #1b4332 !important;
    padding: 2.5rem !important;
    border-radius: 12px !important;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.course-category {
    background: white;
    padding: 2.5rem;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.category-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

/* v39: Fix Indentation - Override text-indent */
.coach-bio-text {
    line-height: 1.8;
    color: var(--color-text-dark);
    margin-bottom: 2rem;
    text-indent: 0 !important;
    padding-left: 0 !important;
}

.notice-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.coach-pricing {
    margin-bottom: 2rem;
}

.coach-pricing h4 {
    background: var(--color-bg-light);
    padding: 0.8rem;
    border-left: 4px solid var(--color-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.pricing-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-table tr:last-child td {
    border-bottom: none;
}

.price-cell {
    text-align: right;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
}

.course-info-box {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 2.5rem;
    border-radius: 4px;
}

.info-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

.info-list {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 2rem;
}

.info-list li {
    margin-bottom: 0.5rem;
}

.info-group {
    margin-bottom: 1.5rem;
}

.info-group strong {
    display: block;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
    font-family: var(--font-heading);
}

@media (max-width: 768px) {
    .pricing-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.5rem 0;
    }

    .pricing-table td.price-cell {
        text-align: left;
        color: var(--color-accent);
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* v112: Desktop nav — ensure nav is visible and hamburger hidden above 1024px */
@media (min-width: 1025px) {
    .menu-toggle {
        display: none !important;
    }

    .header .nav {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
        flex-direction: row !important;
    }

    .nav-list {
        flex-direction: row !important;
    }

    .header-container {
        flex-direction: column !important;
    }

    .header.scrolled .header-container {
        flex-direction: row !important;
    }
}

/* v113: Mid-range screens — shrink nav to fit */
@media (min-width: 1025px) and (max-width: 1280px) {
    .nav-link {
        font-size: 0.7rem !important;
        letter-spacing: 0 !important;
    }

    .nav-list {
        gap: 0.4rem !important;
    }

    .header.scrolled .nav-link {
        font-size: 0.7rem !important;
    }

    .header.scrolled .header-container {
        gap: 1rem !important;
        padding: 0 2% !important;
    }
}

/* v110: Unified Mobile/Tablet Layout — Hamburger Menu + Logo + Title */
@media (max-width: 1024px) {

    /* 1. Show Hamburger Button */
    html body .menu-toggle {
        display: block !important;
        z-index: 1001;
    }

    /* 2. Nav: hidden by default, slides in when .active */
    html body .header .nav,
    html body .header.scrolled .nav {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-primary);
        z-index: 1000;
        transition: right 0.3s ease;
        padding: 80px 2rem 2rem;
        box-sizing: border-box;
        overflow-y: auto;
    }

    html body .header .nav.active,
    html body .header.scrolled .nav.active {
        right: 0 !important;
    }

    html body .nav-list {
        flex-direction: column !important;
        gap: 0 !important;
    }

    html body .nav-link {
        display: block !important;
        padding: 1rem 0 !important;
        font-size: 1rem !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 3. Logo wrapper — compact */
    html body .header .logo-img-wrapper,
    html body .header.scrolled .logo-img-wrapper {
        display: block !important;
        width: 35px !important;
        height: auto !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    html body .header .logo-img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* 4. Logo Text */
    html body .header .logo-text,
    html body .header.scrolled .logo-text {
        display: block !important;
        font-size: 0.85rem !important;
        opacity: 1 !important;
        width: auto !important;
        visibility: visible !important;
        margin-right: auto;
        white-space: nowrap !important;
        height: auto !important;
        line-height: normal !important;
    }

    html body .header .logo-text {
        color: #fff !important;
    }

    html body .header.scrolled .logo-text {
        color: var(--color-primary) !important;
    }

    /* 5. Hamburger bar colors */
    html body .header .bar {
        background: #fff;
    }

    html body .header.scrolled .bar {
        background: var(--color-primary);
    }

    /* 6. Reservation Button */
    html body .header-actions,
    html body .header.scrolled .header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }

    html body .btn-reservation {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        margin-right: 3rem !important;
    }

    /* 7. Logo link alignment */
    html body .header .logo {
        display: flex !important;
        align-items: center !important;
    }
}

/* =====================================================
   WordPress Block Editor Overrides
   Ensure full-width rendering for front-page sections
   ===================================================== */

/* Remove all max-width constraints from WP block wrappers */
.wp-block-html,
.wp-block-html>*,
.entry-content>*,
.page-content>* {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove default WordPress margins on first block (prevents top whitespace) */
main>.wp-block-html:first-child,
main>.entry-content:first-child,
main>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Dual Logo System */
.logo-top {
    display: block;
}

.logo-scroll {
    display: none;
}

.header.scrolled .logo-top {
    display: none;
}

.header.scrolled .logo-scroll {
    display: block;
}

/* Ensure main tag has no extra spacing */
main {
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent horizontal overflow on mobile */
html,
body {
    overflow-x: hidden !important;
}

/* Ensure the hero section is truly full-width and edge-to-edge */
.hero {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
}

/* Fix hero image: show characters in center */
.hero-img {
    object-position: center center !important;
}

/* Ensure all main sections break out of WP content width */
.hero,
.concept,
.courses,
.coaches,
.section.news,
#support,
.access,
.section.contact {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* =====================================================
   v111: Mobile Full-Width Redesign (768px and below)
   Remove all card borders/shadows, use full screen width
   ===================================================== */
@media (max-width: 768px) {

    /* --- Global --- */
    .container {
        width: 95% !important;
    }

    .section-padding {
        padding: 2rem 0 !important;
    }

    .section-title {
        font-size: 1.5rem !important;
        word-break: keep-all !important;
    }

    .section-subtitle {
        font-size: 0.8rem !important;
    }

    /* --- Concept Cards --- */
    .concept-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .concept-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 1.5rem 0.5rem !important;
    }

    .concept-card:last-child {
        border-bottom: none !important;
    }

    /* --- Course Items --- */
    .course-zigzag {
        gap: 2rem !important;
    }

    .course-item {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 1.5rem 0 !important;
    }

    .course-item:last-child {
        border-bottom: none !important;
    }

    .course-img-wrapper {
        border-radius: 0 !important;
    }

    .course-img-wrapper img {
        border-radius: 0 !important;
    }

    /* --- Coach Profiles --- */
    .coach-profile {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 1.5rem 0 !important;
    }

    .coach-img-wrapper {
        border-radius: 0 !important;
    }

    .coach-img-wrapper img {
        border-radius: 0 !important;
    }

    /* --- News Section --- */
    .news-item {
        padding: 1rem 0 !important;
        border-bottom: 1px solid #eee;
    }

    /* --- Support Section --- */
    .support-card,
    #support .container>div {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 1.5rem 0 !important;
    }

    /* --- Access Section --- */
    .access-content {
        padding: 1rem 0 !important;
    }

    .access-content iframe {
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* --- Contact Form (full-width) --- */
    .contact {
        padding: 2rem 0 !important;
    }

    .contact-wrapper {
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .contact-form {
        padding: 1rem !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select,
    .contact-form button,
    .contact-form label {
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.8rem !important;
    }

    .contact-form label {
        color: #fff !important;
        display: block !important;
        margin-bottom: 0.3rem !important;
    }

    .form-group {
        margin-bottom: 1.2rem !important;
    }

    .contact-form button,
    .contact-form .btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }

    /* --- Sub Pages: Archive / Single / Page --- */
    .article-content {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        max-width: 100% !important;
    }

    .page-content {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        max-width: 100% !important;
    }

    /* Sub page padding-top reduction for mobile header */
    main>section.section-padding {
        padding-top: 100px !important;
    }

    /* Tournament page header */
    .page-header {
        padding: 100px 0 2rem !important;
    }

    .page-title {
        font-size: 1.8rem !important;
    }

    /* Terms page */
    .terms-content {
        padding: 1.5rem 0 !important;
    }

    .terms-section {
        padding: 1rem 0 !important;
        border-bottom: 1px solid #eee;
    }

    .terms-section h3 {
        font-size: 1.1rem !important;
    }

    /* Back to top button */
    .back-to-top {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================
   Terms Page Styles (ご利用にあたってのお願い)
   ===================================================== */
.terms-content {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

.terms-intro {
    margin-bottom: 3rem;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
}

.terms-section {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.terms-section h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.terms-section p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 0.5rem;
}

.terms-section .note {
    font-size: 0.9em;
    color: #777;
    margin-top: 0.5rem;
}

.terms-conclusion {
    text-align: center;
    margin-top: 4rem;
    padding: 2rem;
    background: #eaf6f6;
    border-radius: 8px;
}

.terms-conclusion p {
    text-align: center;
}

.terms-conclusion h3 {
    color: #2c7a7b;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .terms-section {
        padding: 1.5rem;
    }

    .terms-section h3 {
        font-size: 1.2rem;
    }
}