@charset "UTF-8";

:root {
    /* =========================================
       1. Primitives (Raw Hex Codes)
       ========================================= */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-brand-red: #F40009;
    /* Coca-Cola Red */
    --color-brand-orange: #D97900;
    /* Makiwota Orange */
    --color-brand-green: #006241;
    /* Makiwota Green */

    /* Grayscale (Dark to Light) */
    --color-gray-900: #333333;
    /* Charcoal */
    --color-gray-700: #555555;
    --color-gray-600: #666666;
    --color-gray-400: #888888;
    --color-gray-300: #cccccc;
    --color-gray-200: #d9d9d9;
    --color-gray-100: #eeeeee;
    --color-gray-50: #f9f9f9;
    --color-gray-light: #f5f5f5;
    --color-warm-gray: #f2f0eb;

    /* =========================================
       2. Semantics (Usage Definitions)
       ========================================= */

    /* Brand Colors */
    --color-primary: var(--color-brand-red);
    --color-sub: var(--color-brand-orange);
    --color-accent: var(--color-gray-900);

    /* Text Colors */
    --color-text-main: var(--color-gray-900);
    --color-text-medium: var(--color-gray-700);
    --color-text-light: var(--color-gray-600);
    --color-text-lighter: var(--color-gray-400);
    --color-text-inverted: var(--color-white);

    /* Background Colors */
    --color-bg-body: var(--color-white);
    --color-bg-light: var(--color-gray-light);
    --color-bg-lighter: var(--color-gray-50);
    --color-bg-gray: var(--color-warm-gray);
    --color-bg-dark: var(--color-gray-900);

    /* Border Colors */
    --color-border-light: var(--color-gray-100);
    --color-border-medium: var(--color-gray-200);
    --color-border-dark: var(--color-gray-300);

    /* Legacy/Compat (to be removed or mapped) */
    --color-text: var(--color-text-main);
    --color-bg: var(--color-bg-body);
    --font-family: "游ゴシック", "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
    --header-height: 96px;
    --product-badge-normal-bg: #6b7280;
    --product-badge-normal-text: #ffffff;
    --product-badge-recommend-bg: #4f7942;
    --product-badge-recommend-text: #ffffff;
    --product-badge-new-bg: #d4af37;
    --product-badge-new-text: #ffffff;

    /* z-index management */
    --z-index-hero-content: 1;
    --z-index-badge: 2;
    --z-index-swiper-arrow: 10;
    --z-index-filter: 90;
    --z-index-mobile-overlay: 800;
    --z-index-search-panel: 900;
    --z-index-mega-menu: 999;
    --z-index-mobile-nav: 1001;
    --z-index-hamburger: 1002;
    --z-index-dropdown: 1100;
    --z-index-header: 9999;

    /* Font Size Management (1rem = 10px) */
    --font-size-xs: 1.2rem;
    /* 12px */
    --font-size-sm: 1.4rem;
    /* 14px */
    --font-size-base: 1.6rem;
    /* 16px */
    --font-size-md: 1.8rem;
    /* 18px */
    --font-size-lg: 2.0rem;
    /* 20px */
    --font-size-xl: 2.4rem;
    /* 24px */
    --font-size-2xl: 3.2rem;
    /* 32px */
    --font-size-3xl: 4.0rem;
    /* 40px */
}

@media (max-width: 768px) {
    :root {
        --font-size-xs: 1rem;
        /* ~10px */
        --font-size-sm: 1.2rem;
        /* ~12px */
        --font-size-base: 1.4rem;
        /* ~14px */
        --font-size-md: 1.6rem;
        /* ~16px */
        --font-size-lg: 1.8rem;
        /* 18px */
        --font-size-xl: 2.1rem;
        /* ~21px */
        --font-size-2xl: 2.7rem;
        /* ~27px */
        --font-size-3xl: 3.2rem;
        /* 32px */
    }
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
    font-size: 62.5%;
    /* 1rem = 10px */
    scrollbar-gutter: stable;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    /* 1.6rem = 16px */
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

html.is-locked {
    position: fixed;
    top: var(--top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

html.is-locked body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    padding-top: var(--header-height, 0px);
}

html.is-locked .l_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: var(--z-index-header);
}

@media (min-width: 769px) {
    html.is-locked body {
        width: 100%;
        padding-right: var(--scroll-gap, 0px);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}



.bg-pale-red {
    background-color: #f400090a;
}

/* ==========================================================================
   Layout (l_)
   ========================================================================== */

/* Header */
.l_header {
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: var(--z-index-header);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.l_header__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .l_header__inner {
        flex-direction: row-reverse;
    }
}

/* Logo */
.l_header__logo {
    display: flex;
    align-items: center;
    z-index: var(--z-index-hamburger);
    height: 100%;
}

.l_header__logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* Navigation (Desktop) */
.l_header__nav {
    display: flex;
    gap: 25px;
    align-items: center;
}

.l_header__nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
    padding: 10px 0;
    cursor: pointer;
    background-image: linear-gradient(var(--color-primary), var(--color-primary));

    /* 2. 配置：左右中央、下端 */
    background-position: center bottom;

    /* 3. 繰り返し防止 */
    background-repeat: no-repeat;

    /* 4. 初期サイズ：幅0%、高さ2px（borderの太さに合わせる） */
    background-size: 0% 2px;

    /* 5. アニメーション設定（colorとbackground-sizeを動かす） */
    transition: color 0.2s, background-size 0.3s ease;
}

.l_header__nav-item:hover {
    color: var(--color-primary);
    background-size: 100% 2px;
}

.l_header__nav-link {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* Actions (Right side icons) */
.l_header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
}

/* Mobile Nav Overlay */
.l_mobile-overlay {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-mobile-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

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

/* Mobile Nav Drawer */
.l_mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80vw;
    height: 100dvh;
    max-width: 320px;
    background-color: var(--color-white);
    z-index: var(--z-index-mobile-nav);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding-top: 80px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

.l_mobile-nav.is-active {
    transform: translateX(0);
}

.l_mobile-nav__list {
    display: flex;
    flex-direction: column;
}

.l_mobile-nav__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text-main);
    cursor: pointer;
}

.l_mobile-nav__item:hover {
    background-color: var(--color-bg-lighter);
}

/* =========================================
   スマホアコーディオン（Gridアニメーション修正版）
   ========================================= */

.l_mobile-nav__submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.4s ease,
        visibility 0.4s ease;
    opacity: 0;
    visibility: hidden;
}

.l_mobile-nav__inner {
    overflow: hidden;
    min-height: 0;
}

.l_mobile-nav__submenu.is-active {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

/* Mobile nav title with decorative lines */
.l_mobile-nav__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 16px 20px 0px 16px;
    margin: 0;
    background-color: var(--color-bg-light);
}


.l_mobile-nav__select {
    background-color: var(--color-bg-light);
    padding-left: 20px;
    margin: 0;
    list-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.l_mobile-nav__select li a {
    display: flex;
    align-items: center;
    padding: 8px 8px;
    font-size: var(--font-size-base);
    color: var(--color-text-medium);
    border-bottom: 1px solid var(--color-border-medium);
    text-decoration: none;
}

.l_mobile-nav__select li a:hover {
    color: var(--color-primary);
}

.l_mobile-nav__select li a .m_nav-img_sm {
    margin-right: 10px;
}

.l_mobile-nav__select li a p {
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0 16px;
    flex: 1;
}

/* Accordion Icon (global) */
.m_accordion-icon {
    transition: transform 0.4s ease;
}

.m_accordion-icon.is-active {
    transform: rotate(180deg);
}

/* Footer */
.l_footer {
    background-color: var(--color-white);
    padding: 60px 20px;
    border-top: 1px solid var(--color-border-light);

}

.l_footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
}

.l_footer__section h3 {
    font-size: var(--font-size-md);
    margin-bottom: 25px;
    color: var(--color-text-main);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l_footer__links {
    list-style: none;
}

.l_footer__links li {
    margin-bottom: 15px;
}

.l_footer__links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    transition: color 0.2s;
    text-decoration: none;
}

/* Footer Mobile Accordion */
@media (max-width: 768px) {
    .l_footer {
        padding: 40px 20px;
    }

    .l_footer__inner {
        gap: 0;
    }

    .l_footer__section {
        border-bottom: 1px solid var(--color-border-light);
    }

    .l_footer__section:last-child {
        border-bottom: none;
    }

    .l_footer__section h3 {
        margin-bottom: 0;
        padding: 20px 0;
        cursor: pointer;
    }

    .l_footer__links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        opacity: 0;
    }

    .l_footer__links.is-active {
        opacity: 1;
        /* max-height will be set by JS */
    }

    /* Accordion Icon (mobile font-size override) */
    .m_accordion-icon {
        font-size: var(--font-size-xs);
    }
}

@media (min-width: 769px) {
    .l_footer__section h3 .m_accordion-icon {
        display: none;
    }

    .l_footer__links {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

.l_footer__links a:hover {
    color: var(--color-primary);
}

/* Footer Icons (Starbucks Style) */
.l_footer__icons {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    /* Added top margin for separation */
}

.l_footer__icon {
    margin: 0 8px 16px;
}

.l_footer__icon-link {
    display: block;
    /* Ensures anchor wraps image properly */
}

.l_footer__icon-link img {
    width: 32px;
    height: 32px;
    transition: opacity 0.3s ease;
    display: block;
}

.l_footer__icon-link:hover img {
    opacity: 0.7;
}

.l_footer__copyright {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
}

/* Mobile Header Actions (Icons next to Hamburger) */
.l_header__mobile-actions {
    display: none;
    align-items: center;
    gap: 12px;
    z-index: var(--z-index-hamburger);
}

.l_header__mobile-actions .m_icon-btn {
    padding: 8px;
}

.l_header__mobile-actions .m_icon-btn svg {
    width: 22px;
    height: 22px;
}

/* Responsive Layout Adjustments */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    .l_header__nav,
    .l_header__actions,
    .l_header__inner>nav {
        display: none;
    }

    .l_header__mobile-actions {
        display: flex;
    }
}

/* ==========================================================================
   Modules (m_)
   ========================================================================== */

/* Button */
.m_section-container {
    padding: 40px 0;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .m_section-container {
        padding: 40px 8px;
    }
}

.m_btn {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid var(--color-white);
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: var(--font-size-base);
    background: transparent;
    color: var(--color-white);
}

.m_btn:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.m_btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.m_btn--primary:hover {
    background-color: #c00000;
    border-color: #c00000;
    color: var(--color-white);
}

/* Icon Button */
.m_icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.m_icon-btn:hover {
    transform: scale(1.1);
}

.m_icon-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--color-text-main);
    transition: fill 0.2s;
}

.m_icon-btn:hover svg {
    fill: var(--color-primary);
}

/* Section Title */
.m_section-title {
    text-align: center;
    font-size: var(--font-size-xl);
    margin: 0 0 40px;
    color: var(--color-primary);
    font-weight: bold;
    letter-spacing: 1px;
}

/* Card */
.m_card {
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}

.m_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.m_card__image {
    width: 100%;
    height: 220px;
    background-color: var(--color-border-light);
    object-fit: cover;
}

.m_card__content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.m_card__title {
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--color-accent);
    text-align: center;
}

.m_card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center;
}

.m_card__btn {
    align-self: flex-start;
    padding: 8px 20px;
    border: 1px solid var(--color-sub);
    color: var(--color-sub);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: bold;
    transition: all 0.3s;
    margin: auto;
}

.m_card__btn:hover {
    background-color: var(--color-sub);
    color: var(--color-white);
}

/* FAQ */
.m_faq {
    background-color: var(--color-white);
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.m_faq__container {
    margin-top: 20px;
}

.m_faq__item {
    border-bottom: 1px solid var(--color-border-light);
}

.m_faq__item:last-child {
    border-bottom: none;
}

.m_faq__question {
    font-size: var(--font-size-base);
    font-weight: bold;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-main);
}

.m_faq__question::-webkit-details-marker {
    display: none;
}

.m_faq__icon {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

details[open] .m_faq__icon {
    transform: rotate(45deg);
}

.m_faq__answer {
    height: 0;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    padding: 0;
    color: var(--color-text-light);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

details[open] .m_faq__answer {
    height: auto;
    opacity: 1;
    padding: 0 0 20px;
}

.m_faq__more {
    margin-top: 20px;
    text-align: center;
}

/* --- Card Title Common Styles --- */
.m_faq-card__title,
.m_news-card__title,
.m_access-card__title,
.m_calendar-card__title,
.m_contact-card__title {
    color: var(--color-primary);
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: bold;
}

/* FAQ Card (Top page) */
.m_faq-card__title {
    margin-bottom: 10px;
}

/* NEWS Card */
.m_news-card {
    padding: 30px;
}

.m_news-card__title {
    margin-bottom: 10px;
}

.m_whatsnew {
    margin: 10px 0;
}

.m_whatsnew hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0;
}

.m_whatsnew dl {
    margin: 0;
}

.m_whatsnew dl a {
    display: flex;
    align-items: baseline;
    padding: 12px 4px;
    color: #666;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.m_whatsnew dl a:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.m_whatsnew dt {
    flex-shrink: 0;
    width: 130px;
    font-size: var(--font-size-sm);
    color: #808080;
}

.m_whatsnew dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: #666;
    line-height: 1.6;
}

.m_newmark {
    display: inline-block;
    background-color: #FF4500;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .m_whatsnew dl a {
        flex-direction: column;
        gap: 4px;
    }

    .m_whatsnew dt {
        width: auto;
        font-size: var(--font-size-xs);
    }
}

/* Access Card */
.m_access-card {
    padding: 30px;
}

.m_access-card__title {
    margin-bottom: 20px;
}

.m_access-card__map {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.m_access-card__map iframe {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.m_access-card__info {
    text-align: center;
    margin-bottom: 20px;
}

.m_access-card__address {
    font-size: var(--font-size-sm);
    color: #666;
    margin-bottom: 6px;
}

.m_access-card__hours {
    font-size: var(--font-size-sm);
    color: #808080;
    margin: 0;
}

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

/* Calendar Card (営業日) */
.m_calendar-card {
    padding: 30px;
}

.m_calendar-card__title {
    margin-bottom: 16px;
}

.m_calendar-card__nav {
    text-align: center;
    margin-bottom: 16px;
}

.m_calendar-card__month {
    font-size: var(--font-size-base);
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.m_calendar-card__controls {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.m_calendar-card__btn {
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
}

.m_calendar-card__btn:hover {
    background: #f0f0f0;
}

.m_calendar-card__btn--today {
    font-size: var(--font-size-xs);
}

.m_calendar-card__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.m_calendar-card__table thead th {
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: #555;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.m_calendar-card__sat {
    color: #2563eb !important;
}

.m_calendar-card__sun {
    color: var(--color-primary) !important;
}

.m_calendar-card__table tbody td {
    font-size: var(--font-size-sm);
    color: #333;
    padding: 6px 2px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: top;
    height: 60px;
}

.m_calendar-card__table tbody td.is-other-month {
    color: #ccc;
}

.m_calendar-card__table tbody td.is-today .m_calendar-card__day {
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
}

.m_calendar-card__event {
    display: block;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
    padding: 2px 1px;
    border-radius: 2px;
    margin-top: 2px;
}

.m_calendar-card__event--closed {
    background: var(--color-primary);
}

@media (max-width: 768px) {
    .m_calendar-card {
        padding: 20px 12px;
    }

    .m_calendar-card__table tbody td {
        height: 50px;
        font-size: var(--font-size-xs);
    }

    .m_calendar-card__event {
        font-size: 8px;
        padding: 1px;
    }
}

/* Contact Card (TEL & LINE) — 2-column layout */
.m_contact-card {
    padding: 30px;
}

.m_contact-card__title {
    margin-bottom: 24px;
}

/* 2-column layout */
.m_contact-card__layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.m_contact-card__main {
    flex: 1;
    min-width: 0;
}

/* Right navigation list */
.m_contact-card__nav {
    flex-shrink: 0;
    width: 100px;
    position: sticky;
    top: 80px;
}

.m_contact-card__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m_contact-card__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #f8f8f8;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}

.m_contact-card__nav-item:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.m_contact-card__nav-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.m_contact-card__nav-icon--tel {
    background: rgba(192, 57, 43, 0.1);
}

.m_contact-card__nav-icon--line {
    background: rgba(6, 199, 85, 0.1);
}

.m_contact-card__nav-icon--form {
    background: rgba(220, 160, 50, 0.1);
}

.m_contact-card__nav-text {
    font-size: 11px;
    font-weight: bold;
    color: #555;
    text-align: center;
    line-height: 1.3;
}

/* Section label with number */
.m_contact-card__section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.m_contact-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Content sections */
.m_contact-card__tel {
    text-align: center;
}

.m_contact-card__notice {
    font-size: var(--font-size-sm);
    color: #555;
    line-height: 1.8;
    margin-bottom: 12px;
}

.m_contact-card__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 8px;
    transition: opacity 0.2s;
}

.m_contact-card__phone:hover {
    opacity: 0.7;
}

.m_contact-card__phone-icon {
    font-size: 1.4rem;
}

.m_contact-card__hours {
    font-size: var(--font-size-sm);
    color: #808080;
    margin: 0;
}

.m_contact-card__divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}

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

.m_contact-card__line-label {
    font-size: var(--font-size-base);
    font-weight: bold;
    color: #333;
    line-height: 1.6;
    margin-bottom: 14px;
}

.m_contact-card__line-btn {
    display: inline-block;
    background-color: #06C755;
    color: white;
    font-size: var(--font-size-base);
    font-weight: bold;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 6px;
    transition: background-color 0.2s, transform 0.2s;
}

.m_contact-card__line-btn:hover {
    background-color: #05b04c;
    transform: translateY(-1px);
}

.m_contact-card__form-link {
    text-align: center;
}

/* Mobile: nav on top, stacked */
@media (max-width: 768px) {
    .m_contact-card__layout {
        flex-direction: column-reverse;
    }

    .m_contact-card__nav {
        width: 100%;
        position: static;
    }

    .m_contact-card__nav-list {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

    .m_contact-card__nav-item {
        flex: 1;
        max-width: 120px;
        padding: 10px 6px;
    }

    .m_contact-card__nav-icon {
        font-size: 1.3rem;
        width: 38px;
        height: 38px;
    }
}

/* Cart Badge */
.m_cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-primary);
    color: white;
    font-size: var(--font-size-3xl);
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-3px);
    }
}

.m_cart-badge.is-bounce {
    animation: bounce 0.5s;
}

/* Dropdown (Mega Menu / Nav Dropdown) */
.m_dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--color-white);
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: var(--z-index-dropdown);
}

.l_header__nav-item:hover .m_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.m_dropdown li a {
    display: block;
    padding: 10px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.m_dropdown li a:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
}

/* Mega Menu (High Fidelity) */


.m_mega-menu {
    /* ▼ display: none ではなく grid にする */
    display: grid;
    grid-template-rows: 0fr;

    /* ▼ 配置と見た目 */
    position: fixed;
    /* または absolute (親にrelativeがある場合) */
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: var(--z-index-mega-menu);
    border-top: 1px solid var(--color-border-medium);

    /* ▼ アニメーション設定 (高さ、透明度、可視性) */
    opacity: 0;
    visibility: hidden;
    /* 閉じている時は見えなくし、触れなくする */
    transition:
        grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.4s ease,
        visibility 0.4s ease;
}

/* ▼ is-active クラスがついた時の状態 */
.m_mega-menu.is-active {
    grid-template-rows: 1fr;
    /* 中身の高さ分だけ開く */
    opacity: 1;
    visibility: visible;
}


.m_mega-menu__inner {
    min-height: 0;
    max-width: 1280px;
    margin: 0 auto;

}

/* Mega menu title with decorative lines */
.m_mega-menu__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 500;
    color: #555;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 24px 40px 8px;
}

.m_mega-menu__title::before,
.m_mega-menu__title::after {
    content: '';
    flex: 1;
    width: 1280px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.m_mega-menu__title::before {
    background: linear-gradient(90deg, transparent, var(--color-primary));
}

.m_mega-menu__title::after {
    background: linear-gradient(90deg, var(--color-primary), transparent);
}

.m_mega-menu__sidebar {
    width: 1280px;
    padding: 24px;
    display: flex;
    justify-content: space-around;
}

.m_mega-menu__sidebar ul {
    list-style: none;
}

.m_mega-menu__sidebar li {
    margin-bottom: 20px;
}



/* 1. リンク全体の外枠（横並びとホバー設定） */
.m_mega-menu__link {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    /* 画像とテキストの間隔 */
    padding: 12px 16px;
    /* 全体の余白 */
    border-radius: 8px;
    /* 角を少し丸く */
    text-decoration: none;
    color: var(--color-text-main);
    /* 通常時の文字色 */
    /* 背景色と文字色が滑らかに変わるように指定 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ホバー時のスタイル */
.m_mega-menu__link:hover {

    background-color: var(--color-bg-lighter);

    color: var(--color-brand-green);
}


.m_mega-menu__link:hover p {
    color: var(--color-brand-green);
}


/* 2. 画像のスタイル調整 */

.m_mega-menu__link .m_nav-img_sm {
    border-radius: 9999px;
    width: 130px;
    height: 130px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .m_mega-menu__link .m_nav-img_sm {
        width: 50px;
        height: 50px;
    }
}


/* 3. テキストのスタイル調整 */
.m_mega-menu__link p {
    font-weight: bold;
    /* 太字 */
    font-size: var(--font-size-base);
    /* 少し大きめに */
    line-height: 1.4;
    margin: 0;
    /* 余計な余白を削除 */
}

.m_mega-menu__icon {
    font-size: var(--font-size-lg);
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.m_mega-menu__main {
    flex: 1;
    padding: 0 50px;
    background-color: var(--color-white);
}

.m_mega-menu__section {
    margin-bottom: 40px;
}

.m_mega-menu__section h3 {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 25px;
    font-weight: bold;
    letter-spacing: 1px;
}

.m_mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.m_mega-menu__item {
    display: block;
    text-align: center;
}

.m_mega-menu__img-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-border-light);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.m_mega-menu__item:hover .m_mega-menu__img-wrap {
    transform: scale(1.05);
}

.m_mega-menu__item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    font-weight: bold;
}

.m_mega-menu__info-list {
    list-style: none;
}

.m_mega-menu__info-list li {
    margin-bottom: 15px;
}

.m_mega-menu__info-list a {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    transition: color 0.2s;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.m_mega-menu__info-list a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.m_mega-menu__footer {
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-lighter);
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.m_mega-menu__footer a {
    font-size: 13px;
    color: var(--color-text-light);
    font-weight: bold;
}

.m_mega-menu__footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .m_mega-menu {
        display: none !important;
    }
}

/* Search Panel */
.m_search-panel {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px 0;
    z-index: var(--z-index-search-panel);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-top: 1px solid var(--color-border-light);
}

.m_search-panel.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.m_search-panel__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.m_search-panel__input-container {
    position: relative;
    margin-bottom: 30px;
}

.m_search-panel__input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    font-size: var(--font-size-md);
    border: 1px solid var(--color-border-dark);
    border-radius: 30px;
    background-color: var(--color-bg-light);
    transition: border-color 0.3s;
}

.m_search-panel__input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
}

.m_search-panel__submit {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.m_search-panel__submit svg {
    fill: var(--color-text-light);
    transition: fill 0.3s;
}

.m_search-panel__submit:hover svg {
    fill: var(--color-primary);
}

.m_search-panel__trending {
    margin-top: 20px;
}

.m_search-panel__heading {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 15px;
    font-weight: bold;
}

.m_search-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.m_nav-img_sm {
    object-fit: cover;
    border-radius: 9999px;
    height: auto;
    width: 64px;
}

.m_tag {
    padding: 8px 16px;
    background-color: var(--color-bg-light);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    transition: 0.2s;
}

.m_tag:hover {
    background-color: var(--color-border-medium);
    color: var(--color-primary);
}

/* ==========================================================================
   Pages (e.g. top_, about_)
   ========================================================================== */

/* --- Hero Common Styles --- */
.m_hero {
    position: relative;
    margin-top: 0;
    width: 100%;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.m_hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Hero sub-elements (shared via multi-selector) */
.blog_hero__content,
.access_hero__content,
.faq_hero__content,
.products_hero__content {
    position: relative;
    z-index: var(--z-index-hero-content);
    padding: 20px;
}

.blog_hero__title,
.access_hero__title,
.faq_hero__title,
.products_hero__title {
    font-size: var(--font-size-3xl);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 
   TOP PAGE (top_)
*/

/* Hero */
.top_hero {
    width: 100%;
    background-color: var(--color-bg-lighter);
    display: grid;
    grid-template-columns: calc(50vw - 4px) calc(50vw - 4px);
    grid-template-rows: repeat(2, calc(25vw - 6px));
    gap: 8px;
    overflow: hidden;
}

.top_hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.top_hero picture {
    width: 100%;
    height: 100%;
    display: block;
}

.top_hero__visual {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    grid-row: 1 / -1;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.top_hero__line {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    line-height: 0;
    display: block;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.top_hero__maki {
    display: block;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}


.top_hero__line img,
.top_hero__maki img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiper Section */
.top_products-swiper {
    width: 100%;
    padding: 40px 16px 60px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.top_products-swiper .swiper-slide {
    padding: 8px;
    transition: transform 0.3s;
}

.top_products-swiper .swiper-slide:hover {
    transform: translateY(-5px);
}

/* --- Shared Swiper Buttons (top & access page) --- */
.top_products-swiper .swiper-button-next,
.top_products-swiper .swiper-button-prev,
.access_swiper .swiper-button-next,
.access_swiper .swiper-button-prev {
    color: var(--color-brand-green) !important;
    background: rgba(255, 255, 255, 0.9);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.top_products-swiper .swiper-button-next:after,
.top_products-swiper .swiper-button-prev:after,
.access_swiper .swiper-button-next:after,
.access_swiper .swiper-button-prev:after {
    font-size: var(--font-size-md) !important;
    font-weight: bold;
}



/* Shared Swiper Arrow Wrappers (m_swiper-arrow-wrap) */
.m_swiper-arrow-wrap {
    position: absolute;
    top: 50%;
    z-index: var(--z-index-swiper-arrow);
    transform: translateY(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.m_swiper-arrow-wrap--prev {
    left: 10px;
}

.m_swiper-arrow-wrap--next {
    right: 10px;
}

.m_swiper-arrow-wrap .swiper-button-prev,
.m_swiper-arrow-wrap .swiper-button-next {
    position: static !important;
    margin: 0 !important;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.m_swiper-arrow-wrap.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.m_swiper-arrow-wrap .swiper-button-prev::after,
.m_swiper-arrow-wrap .swiper-button-next::after {
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--color-primary);
}

/* Original top_products-swiper specific overrides can be removed or kept as aliases if needed. 
   For cleanliness, assuming migration to shared classes. */

/* Swiper Card adjustments */
.top_products-swiper .m_card {
    border: 1px solid var(--color-border-light);
}

.top_products-swiper .m_card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* YouTube Video Section */


.top_youtube-section .m_section-title {
    color: var(--color-white);
    margin-bottom: 32px;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    letter-spacing: 2px;
}

.top_youtube-section__container {
    background-color: var(--color-primary);
    border-radius: 40px;
    padding: 40px 20px;
}


.top_youtube-section__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.top_youtube-section__video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.top_youtube-section__video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.top_youtube-section__caption {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-top: 20px;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* Main Content Grid */
.top_content {
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .top_contact-section {
        grid-template-columns: minmax(0, 720px);
        justify-content: center;
    }

    .top_contact-section .m_contact-card {
        justify-self: center;
        width: 100%;
    }
}

/* Responsive Top */
@media (max-width: 768px) {
    .top_hero {
        grid-template-rows: auto auto;
        gap: 0.2rem;
        padding-bottom: 4px;
        grid-template-columns: 1fr 1fr;
    }
　　.top_youtube-section .m_section-title {
        font-size: 1rem;
	}
    .top_hero__visual {
        grid-column: 1 / -1;
        grid-row: unset;
    }

    .top_hero__line,
    .top_hero__maki {
        height: 100%;
        aspect-ratio: 1 / 1;
    }

    .top_hero__line img,
    .top_hero__maki img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .top_content {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0 auto 0;
    }

    .top_products-swiper {
        padding: 20px 0 40px;
    }


}

/* 
   ABOUT PAGE (about_)
*/
.about_hero {
    position: relative;
    background-image: url('../img/wood_1.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
/* NOTE: about_hero does not use m_hero class in HTML, so keeps full definition */

.about_hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.about_hero__content {
    position: relative;
    z-index: var(--z-index-hero-content);
    padding: 20px;
    max-width: 700px;
}

.about_hero__title {
    font-size: var(--font-size-3xl);
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.about_hero__text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    font-family: var(--font-family);
}

/* About Story */
.about_story {
    padding: 80px 20px;
    background-color: var(--color-white);
    text-align: center;
}

.about_story__inner {
    max-width: 800px;
    margin: 0 auto;
}

.about_story__text {
    font-size: var(--font-size-md);
    line-height: 2.2;
    color: #444;
    font-family: var(--font-family);
}

/* About Quality */
.about_quality {
    padding: 80px 20px;
    background-color: var(--color-bg-lighter);
}

.about_quality__chart {
    max-width: 900px;
    margin: 40px auto 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.about_quality__row,
.about_quality__header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    padding: 20px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
}

.about_quality__header {
    background-color: var(--color-text-main);
    color: white;
    font-weight: bold;
    font-size: var(--font-size-md);
    border-bottom: none;
}

.about_quality__row:last-child {
    border-bottom: none;
}

.about_quality__col--label {
    font-weight: bold;
    color: var(--color-text-main);
}

.about_quality__col--makiwota {
    color: var(--color-brand-green);
    font-weight: bold;
    font-size: var(--font-size-md);
}

.about_quality__col--highlight {
    color: #d4af37;
}

.about_quality__col--other {
    color: var(--color-text-lighter);
}

/* About Safety */
.about_safety {
    padding: 80px 20px;
    background-color: var(--color-white);
}

.about_safety__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.about_safety__card {
    text-align: center;
    padding: 30px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.about_safety__card:hover {
    border-color: var(--color-brand-green);
    background-color: #fcfcfc;
}

.about_safety__icon {
    font-size: var(--font-size-3xl);
    margin-bottom: 20px;
}

.about_safety__title {
    font-size: var(--font-size-xl);
    margin-bottom: 15px;
    color: var(--color-text-main);
}

.about_safety__text {
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Company Page (Utilizing page_ convention for structure) */
.company_container {
    padding: 60px 20px;
    background-color: var(--color-bg-lighter);
    min-height: 80vh;
}

.company_inner {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-white);
    padding: 60px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.company_title {
    font-size: var(--font-size-2xl);
    margin-bottom: 40px;
    text-align: center;
    color: var(--color-accent);
    position: relative;
    padding-bottom: 15px;
}

.company_title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
}

.company_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    font-size: var(--font-size-base);
}

.company_table th,
.company_table td {
    padding: 20px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

.company_table th {
    width: 30%;
    background-color: var(--color-white);
    font-weight: bold;
    color: var(--color-primary);
    vertical-align: top;
}

.company_table td {
    color: var(--color-text-medium);
    line-height: 1.6;
}

.company_note {
    font-size: 0.9em;
    color: var(--color-text-lighter);
    display: block;
    margin-top: 5px;
}

@media (max-width: 768px) {

    .about_quality__row,
    .about_quality__header {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    .about_quality__col--label {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    .about_quality__header {
        display: none;
    }

    .about_quality__row {
        padding: 30px 20px;
        border-bottom: 4px solid #f0f0f0;
    }

    .company_inner {
        padding: 30px 20px;
    }

    .company_table th,
    .company_table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .company_table th {
        padding-bottom: 5px;
    }

    .company_table td {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-border-light);
    }
}

/* 
   BUSINESS PAGE (business_)
*/
/* business_hero: inherits from .m_hero; only differences listed here */
.business_hero {
    background-image: url('../img/wood_2.jpg');
}

.business_hero::before {
    background: rgba(0, 0, 0, 0.6);
}

.business_hero__content {
    position: relative;
    z-index: var(--z-index-hero-content);
    padding: 20px;
    max-width: 800px;
}

.business_hero__title {
    font-size: var(--font-size-3xl);
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.business_hero__text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Benefits */
.business_benefits {

    background-color: var(--color-white);
    display: none;
}

.business_benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.business_benefits__card {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--color-bg-lighter);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.business_benefits__card:hover {
    transform: translateY(-5px);
}

.business_benefits__icon {
    font-size: var(--font-size-3xl);
    margin-bottom: 20px;
}

.business_benefits__title {
    font-size: var(--font-size-xl);
    margin-bottom: 15px;
    color: var(--color-text-main);
}

.business_benefits__text {
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Use Cases */
.business_use-case{
	display:none;
}

.business_use-cases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.business_use-cases-swiper .swiper-slide {
    padding: 8px;
}

.business_use-cases__card {
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
}

.business_use-cases__img {
    height: 250px;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
}

.business_use-cases__content {
    padding: 30px;
}

.business_use-cases__title {
    font-size: var(--font-size-xl);
    margin-bottom: 15px;
    color: var(--color-text-main);
    border-bottom: 2px solid var(--color-brand-green);
    padding-bottom: 5px;
    text-align: center;
}

.business_use-cases__text {
    font-style: italic;
    color: var(--color-text-medium);
    line-height: 1.8;
    min-height: 7.2em;
    /* 1.8 * 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Contact */
.business_contact {
    background-color: var(--color-white);
}

.business_contact__desc {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
    color: var(--color-text-light);
}

.business_contact__notice {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    text-align: center;
    background: var(--color-bg-lighter);
    border: 1px solid var(--color-border-medium);
}

.business_contact__notice--success {
    color: var(--color-brand-green);
    border-color: var(--color-brand-green);
}

.business_contact__notice--error {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.business_contact__form {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--color-bg-lighter);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.business_contact__group {
    margin-bottom: 20px;
}

.business_contact__group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-text-main);
}

.business_contact__group input,
.business_contact__group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-medium);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.business_contact__group input:focus,
.business_contact__group textarea:focus {
    border-color: var(--color-brand-green);
    outline: none;
}

.business_contact__submit {
    width: 100%;
    max-width: 400px;
    padding: 15px;
    font-size: var(--font-size-md);
    margin-top: 10px;
    display: block;
    margin-inline: auto;
}

.business_contact .wpcf7 {
    max-width: 1280px;
    margin: 0 auto;
}

.business_contact .wpcf7 form {
    margin: 0;
}

.business_contact__group p,
.business_contact__submit-wrap p {
    margin: 0;
}

.business_contact__group br {
    display: none;
}

.business_contact__group .wpcf7-form-control-wrap {
    display: block;
}

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

.business_contact .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.business_contact .wpcf7 form .wpcf7-response-output {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 14px 18px;
    border: 1px solid var(--color-border-medium);
    border-radius: 8px;
    background: var(--color-bg-lighter);
    font-size: var(--font-size-sm);
    text-align: center;
}

.business_contact .wpcf7 form.sent .wpcf7-response-output {
    color: var(--color-brand-green);
    border-color: var(--color-brand-green);
}

.business_contact .wpcf7 form.invalid .wpcf7-response-output,
.business_contact .wpcf7 form.failed .wpcf7-response-output,
.business_contact .wpcf7 form.spam .wpcf7-response-output {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.business_contact .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

@media (max-width: 768px) {
    .business_hero__title {
        font-size: var(--font-size-2xl);
    }

    .business_use-cases__grid {
        grid-template-columns: 1fr;
    }

    .business_contact__form {
        padding: 20px;
    }
}

/* 
   BLOG PAGE (blog_)
*/
/* blog_hero: inherits from .m_hero; only differences listed here */
.blog_hero {
    background-image: url('../img/wood_1.jpg');
}

/* blog_hero__content: inherits from multi-selector above */

.blog_hero__title {
    font-family: var(--font-family);
}

.blog_hero__text {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.blog_container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
}

.blog_main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
    /* Prevent Swiper overflow in Grid */
}

/* Blog News Section */
.blog_news {
    background: var(--color-bg-lighter);
    padding: 24px;
    margin-bottom: 20px;
}

.blog_news__title {
    font-size: var(--font-size-xl);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-brand-green);
    padding-bottom: 10px;
    display: inline-block;
}

.blog_news__list {
    list-style: none;
    padding: 0;
}

.blog_news__item {
    padding-bottom: 8px;
    border-bottom: 2px dotted var(--color-brand-green);
}

.blog_news__item:nth-child(n+2) {
    margin-top: 16px;
}

.blog_news__item:last-child {
    border-bottom: none;
}

.blog_news__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-family: var(--font-family);
}

.blog_news__tag {
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: bold;
    margin-left: 16px;
}

.blog_news__link {
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.blog_news__text {
    margin-top: 8px;
}


/* Blog Grid */
.blog_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.blog_card {
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}

.blog_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.blog_card__img-wrapper {
    height: 200px;
    overflow: hidden;
}

.blog_card__img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.blog_card:hover .blog_card__img {
    transform: scale(1.05);
}



.blog_card__content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog_card__category {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.blog_card__title {
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
    line-height: 1.4;
    -webkit-animation: 2;
    min-height: 2.8em;
}


.blog_card__title a:hover {
    color: var(--color-brand-green);
}

.blog_card__excerpt {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.4;
    margin-bottom: 20px;
    flex-grow: 1;
    -webkit-line-clamp: 5;
    min-height: 7em;
}

.blog_card__read-more {
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog_card__read-more:hover {
    text-decoration: underline;
}

/* Sidebar */
.blog_sidebar {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 8px;
}

.blog_sidebar__widget h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border-light);
    position: relative;
}

.blog_sidebar__widget h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--color-brand-green);
}

.blog_sidebar__list {
    list-style: none;
    padding: 0;
}

.blog_sidebar__list li {
    margin-bottom: 10px;
}

.blog_sidebar__list a {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-medium);
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s;
    border-bottom: 1px dashed var(--color-border-light);
}

.blog_sidebar__list a:hover {
    color: var(--color-brand-green);
}

.blog_sidebar__count {
    background: var(--color-border-light);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-sm);
    color: #777;
}

@media (max-width: 900px) {
    .blog_container {
        grid-template-columns: 1fr;
    }

}

/* Blog Article Detail */
.blog_article {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.blog_article__header {
    text-align: center;
    margin-bottom: 40px;
}

.blog_article__meta {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-bottom: 15px;
}

.blog_article__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.blog_article__featured-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog_article__content {
    font-size: var(--font-size-md);
    line-height: 1.8;
    color: var(--color-text-main);
}

.blog_article__content h2 {
    font-size: 1.8rem;
    margin: 40px 0 20px;
    color: var(--color-brand-green);
    border-left: 5px solid var(--color-brand-green);
    padding-left: 15px;
}

.blog_article__content p {
    margin-bottom: 20px;
}

.blog_article__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.blog_article__footer {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border-light);
    text-align: center;
}

.blog_article__back-btn {
    display: inline-block;
    padding: 10px 30px;
    background: var(--color-text-main);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: background 0.3s;
}

.blog_article__back-btn:hover {
    background: var(--color-brand-green);
}

/* Blog Article Additional Styles */
.blog_article__category {
    display: inline-block;
    background: var(--color-brand-green);
    color: white;
    font-size: var(--font-size-xs);
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 10px;
}

.blog_article__date {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.blog_article__tags {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.blog_article__tag {
    display: inline-block;
    color: var(--color-brand-green);
    font-size: var(--font-size-sm);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--color-brand-green);
    border-radius: 20px;
    transition: all 0.3s;
}

.blog_article__tag:hover {
    background: var(--color-brand-green);
    color: white;
}

.blog_article__img-wrapper {
    margin-top: 30px;
}

.blog_article__content h3 {
    font-size: 1.4rem;
    margin: 30px 0 15px;
    color: var(--color-text-main);
}

.blog_article__content blockquote {
    background: var(--color-bg-light);
    border-left: 4px solid var(--color-brand-green);
    padding: 20px 25px;
    margin: 30px 0;
    font-style: italic;
}

.blog_article__content blockquote p {
    margin-bottom: 0;
    color: var(--color-text-light);
}

.blog_article__content .caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-align: center;
    margin-top: -10px;
}

/* -----------------------------------------------------------
   PC Vertical Swiper Styles (min-width: 769px) 
   User Request: Vertical Swiper + Horizontal Card on PC
----------------------------------------------------------- */
@media (min-width: 769px) {

    /* Fixed height for vertical swiper container */
    .blog-swiper {
        height: 600px;
        /* Adjust based on preference */
        padding: 0 30px 0 0 !important;
        /* Reset padding for vertical look */
    }

    .blog-swiper .swiper-wrapper {
        flex-direction: column;
        /* Likely handled by JS direction:'vertical', but good to ensure */
    }

    .blog-swiper .swiper-slide {
        height: auto !important;
        /* Let content dictate height, or fixed? */
        margin-bottom: 20px;
    }

    /* Horizontal Card Layout */
    .blog-swiper .blog_card .blog_card__link {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 100%;
    }

    .blog-swiper .blog_card__img-wrapper {
        width: 40%;
        height: auto;
        /* Full height of card */
        flex-shrink: 0;
    }

    .blog-swiper .blog_card__content {
        width: 60%;
        padding: 30px;
        justify-content: center;
    }

    /* Hide arrows on PC if doing vertical scroll (mousewheel usually) 
       or position them at top/bottom? 
       Standard vertical swipers often don't use side arrows. 
       Let's hide them for now unless requested. 
    */
    .blog-swiper .m_swiper-arrow-wrap {
        display: none;
    }

    /* Show pagination on the side? Or hide? 
       Swiper vertical pagination is usually on the right. 
    */
    .blog-swiper .swiper-pagination {
        display: block !important;
        right: 15px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .blog-swiper .swiper-scrollbar {
        display: block !important;
        width: 4px;
        height: 90%;
        top: 5%;
        right: 4px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    .blog-swiper .swiper-scrollbar-drag {
        background: var(--color-brand-green);
        border-radius: 4px;
    }
}

/* 
   PRODUCTS PAGE (products_)
*/
/* products_hero: inherits from .m_hero; only differences listed here */
.products_hero {
    background-image: url('../img/wood_1.jpg');
    display: none;
}

.products_hero::before {
    background: rgba(0, 0, 0, 0.4);
}

/* products_hero__content, __title: inherits from multi-selector above */

.products_hero__text {
    font-size: var(--font-size-md);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Filter (Could be m_filter? User asked for page specific prefixes for unique styles. Filter seems unique to products page currently.) */
.products_filter {
    background-color: var(--color-bg-lighter);
    padding: 20px 0;
    position: sticky;
    z-index: var(--z-index-filter);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.products_filter__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.products_filter__btn {
    background: white;
    border: 1px solid rgb(190, 115, 80);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(190, 115, 80);
}

.products_filter__btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

.products_filter__btn.is-active {
    background-color: rgb(190, 115, 80);
    color: white;
    border-color: rgb(190, 115, 80);
}

.products_filter__icon {
    font-size: var(--font-size-lg);
}

/* Product Grid */
.products_main {
    margin: 0 auto;
    padding: 40px 0px;
    min-height: calc(100dvh - 170px);
}

/* Products Swiper (Same style as top page) */
.products-swiper,
.blog-swiper {
    padding-bottom: 30px;
    width: 100%;
    /* Ensure it takes parent width */
    max-width: 100%;
    /* Prevent overflow */
}

.products-swiper {
    padding-right: 20px;
    padding-left: 20px;
}

@media (max-width: 768px) {
    .blog-swiper {
        padding-right: 20px;
        padding-left: 20px;
    }
}

.products-swiper .swiper-slide,
.blog-swiper .swiper-slide {
    padding: 8px;
}


/* (Duplicate m_swiper-arrow-wrap removed — see L1880 for canonical definition) */

/* Hide grid default */
.products_grid {
    /* Kept for fallback or removed if replaced in HTML */
    display: none;
}

/* Product Item (Card on Products Page) - Using products_item__ to differentiate? Or stick to previous pattern?
   Implementation plan said: .product-card -> .products_item
*/

/* Product Card Link Wrapper */
.products_item__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.products_item__link:hover {
    text-decoration: none;
}

.products_item {
    background: white;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
}

.products_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.products_item__img-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.products_item__img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.products_item:hover .products_item__img {
    transform: scale(1.05);
}

.products_item__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: bold;
    color: var(--product-badge-normal-text);
    z-index: var(--z-index-badge);
}

.products_item__badge--normal {
    background-color: var(--product-badge-normal-bg);
    color: var(--product-badge-normal-text);
}

.products_item__badge--new {
    background-color: var(--product-badge-new-bg);
    color: var(--product-badge-new-text);
}

.products_item__badge--recommend {
    background-color: var(--product-badge-recommend-bg);
    color: var(--product-badge-recommend-text);
}

.products_item__info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.products_item__title {
    font-size: var(--font-size-md);
    margin-bottom: 8px;
    color: var(--color-text-main);
    font-weight: 600;
}

.products_item__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
    height: 48px;
}

.products_item__meta {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--color-border-light);
}

.products_item__price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-main);
}

.products_item__unit {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-lighter);
}

.products_item__cart-btn {
    background-color: white;
    color: rgb(190, 115, 80);
    border: 1px solid rgb(190, 115, 80);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.products_item__cart-btn:hover {
    background-color: #f0f0f0;
    border-color: rgb(190, 115, 80);
    color: rgb(190, 115, 80);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .products_hero {
        height: 30vh;
    }

    .products_hero__title {
        font-size: 1.8rem;
    }

    .products_filter__container {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .products_filter__container::-webkit-scrollbar {
        display: none;
    }


    .products_filter__btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Missing Modules (Added)
   ========================================================================== */

/* Hamburger (m_hamburger) */
.m_hamburger {
    display: none;
    cursor: pointer;
    z-index: var(--z-index-hamburger);
    width: 30px;
    height: 24px;
    position: relative;
}

.m_hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--color-text-main);
    border-radius: 2px;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.m_hamburger span:nth-child(1) {
    top: 0;
}

.m_hamburger span:nth-child(2) {
    top: 11px;
}

.m_hamburger span:nth-child(3) {
    bottom: 0;
}

.m_hamburger.is-active span:nth-child(1) {
    top: 11px;
    transform: rotate(315deg);
}

.m_hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.m_hamburger.is-active span:nth-child(3) {
    bottom: 11px;
    transform: rotate(-315deg);
}

@media (max-width: 768px) {
    .m_hamburger {
        display: block;
    }
}

/* (Duplicate .m_accordion-icon removed — see footer media query block for canonical definition) */

/* utility */

.u_sm_hidden {
    display: none;
}

.makiwota-responsive-text--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .u_pc_hidden {
        display: none;
    }

    .u_sm_hidden {
        display: block;
    }

    .makiwota-responsive-text--pc {
        display: none;
    }

    .makiwota-responsive-text--sp {
        display: inline;
    }

}

/* 
   ACCESS PAGE (access_)
*/
/* access_hero: inherits from .m_hero; only differences listed here */
.access_hero {
    background-image: url('../img/wood_1.jpg');
}

/* access_hero::before, __content, __title: inherits from .m_hero and multi-selectors */

.access_hero__text {
    font-size: var(--font-size-lg);
}

.access_container {
    max-width: 1280px;
    margin: 60px auto 0;
}

.access_section {
    margin-bottom: 60px;
}

.access_section__title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.4;
    font-weight: 700;
}

.access_info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    background-color: var(--color-bg-lighter);
    padding: 40px;
    border-radius: 12px;
}

.access_info__heading {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-text-main);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 5px;
}

.access_info__item p {
    line-height: 1.8;
}

.access_map {
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.access_address {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}

.access_address p {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .access_hero__title {
        font-size: var(--font-size-2xl);
    }

    .access_section__title {
        font-size: var(--font-size-2xl);
    }

    .access_info {
        padding: 20px;
        grid-template-columns: 1fr;
    }
}

/* Access Gallery */
.access_gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.access_gallery__img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.access_gallery__img:hover {
    transform: translateY(-5px);
}

/* Access Swiper (Designed to match Top Page Swiper) */
.access_swiper {
    width: 100%;
    padding: 0 50px 60px;
    /* Match top_products-swiper padding */
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    /* margin-bottom to separate from map */
    margin-bottom: 60px;
}

.access_swiper .swiper-slide {
    width: 280px;
    /* Match top page card width or adapting? */
    height: auto;
    transition: transform 0.3s;
}

.access_swiper .swiper-slide:hover {
    transform: translateY(-5px);
}

/* Card image for access - override height if needed */
.access_swiper .m_card {
    box-shadow: none;
    border: 1px solid var(--color-border-light);
    height: 100%;
    overflow: hidden;
}

.access_swiper .swiper-slide {
    padding: 8px;
}

/* (Duplicate access_swiper buttons removed — see shared selector above with top_products-swiper) */

.access_swiper__prev-wrap {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: var(--z-index-swiper-arrow);
    transform: translateY(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.access_swiper__next-wrap {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: var(--z-index-swiper-arrow);
    transform: translateY(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.access_swiper__prev-wrap .swiper-button-prev,
.access_swiper__next-wrap .swiper-button-next {
    position: static !important;
    margin: 0 !important;
}

.access_swiper .is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .access_swiper {
        padding: 0 20px 40px;
    }

}

/* Swiper bottom */
.swiper-pagination {
    display: none;
}

/* 
   FAQ PAGE (faq_)
*/
/* faq_hero: inherits from .m_hero; only differences listed here */
.faq_hero {
    background-image: url('../img/wood_1.jpg');
}

/* faq_hero::before, __content: inherits from .m_hero and multi-selectors */

.faq_hero__title {
    font-family: var(--font-family);
}

.faq_hero__text {
    font-size: var(--font-size-lg);
}

.faq_container {
    max-width: 800px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.faq_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq_item {
    background: white;
    border-bottom: 1px solid var(--color-border-light);
}

.faq_item:last-child {
    border-bottom: none;
}

.faq_item.is-active {
    border-color: var(--color-brand-green);
}

.faq_question {
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: background-color 0.3s;
    user-select: none;
}

.faq_question:hover {
    opacity: 0.8;
}

.faq_icon {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: 1.2rem;
    
    background-color:var(--color-white);
    border: 2px solid var(--color-primary);
    color:var(--color-primary); 
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    border-radius: 0;
}

.faq_icon--a {
    color: white;
    background-color: var(--color-primary);
    margin-top: 0;
}

.faq_question h3 {
    flex-grow: 1;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    padding-top: 5px;
    color: #333;
}

.faq_toggle {
    font-size: 1.5rem;
    color: #cc0000;
    margin-left: 15px;
    transition: transform 0.3s;
    font-weight: bold;
}

.faq_item.is-active .faq_toggle {
    transform: rotate(45deg);
}

.faq_answer {
    height: 0;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    background-color: transparent;
}

.faq_item.is-active .faq_answer {
    opacity: 1;
    /* height is set dynamically by JavaScript */
}

.faq_answer__inner {
    padding: 20px 0 10px;
    display: flex;
    align-items: flex-start;
}

.faq_answer__text {
    flex-grow: 1;
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-main);
    padding-top: 5px;
}

/* Utilities for FAQ */
.u_bg-pink {
    background-color: #ffeef0;
    padding: 2px 4px;
}

.faq_answer__text mark {
    background-color: #ffeef0;
    padding: 2px 4px;
}

.m_btn-red {
    display: inline-block;
    background-color: var(--color-brand-red);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s;
    margin-top: 10px;
    font-size: 0.9rem;
}


/* 
   TAB MENU (Speech Bubble Style)
*/
.m_tab-menu {
    margin-top: 40px;
}

.m_tab-menu__list {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Space between tabs */
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    /* Space for the "triangle" */
}

.m_tab-menu__item {
    position: relative;
    background-color: var(--color-bg-lighter);

    /* Inactive bg */
    padding: 15px 30px;
    border-radius: 30px;
    /* Bubble shape */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--color-brand-green);
    border: 2px solid var(--color-brand-green);
}

.m_tab-menu__item:hover {
    background-color: #e0e0e0;
}

/* Active State */
.m_tab-menu__item.is-active {
    background-color: var(--color-brand-green);
    /* Brand color */
    color: white;
}

/* Triangle Indicator (Speech Bubble Tail) */
.m_tab-menu__item.is-active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* Position below the tab */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    /* Triangle pointing down */
    border-color: var(--color-brand-green) transparent transparent transparent;
}

.m_tab-menu__icon {
    font-size: 1.2rem;
}

.m_tab-menu__content {
    background: white;
    padding: 32px 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    min-height: 200px;
    position: relative;
    border-top: 5px solid var(--color-brand-green);
    max-width: 1280px;
    margin: 0 auto;
    /* Visual connection color */
}

.m_tab-menu__panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

.m_tab-menu__panel.is-active {
    display: block;
}

.m_tab-menu__panel-inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Reuse existing Business Benefits styles inside the panel */
.m_tab-menu__panel .business_benefits__title {
    font-size: var(--font-size-2xl);
    margin-bottom: 20px;
    color: var(--color-brand-green);
}

.m_tab-menu__panel .business_benefits__text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

.m_tab-menu__img {
    flex-shrink: 0;
    width: 300px;
    height: 200px;
    border-radius: 8px;
    background-color: #eee;
    /* Placeholder */
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@media (max-width: 768px) {
    .m_tab-menu__list {
        gap: 10px;
    }

    .m_tab-menu__item {
        width: 100%;
        justify-content: center;
        /* Rectangular on mobile */
    }

    .m_tab-menu__panel-inner {
        flex-direction: column;
        text-align: center;
    }

    .m_tab-menu__img {
        width: 100%;
        height: 180px;
    }
}

/* Contact Section (Added for About Page) */
.company-contact {
    margin-top: 60px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.company-contact__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.company-contact__message {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.company-contact__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .company-contact__body {
        flex-direction: row;
        gap: 40px;
    }
}

.company-contact__tel-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-contact__tel {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--color-primary);
    ;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.company-contact__tel-icon {
    font-size: 1.2em;
}

.company-contact__hours {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: 5px;
}

.company-contact__action {
    display: flex;
    justify-content: center;
}

.company-contact__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    /* Using orange for prominent CTA */
    color: white;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    min-width: 240px;
}

.company-contact__btn:hover {
    background-color: #e08e20;
    transform: translateY(-2px);
}

.company-contact__btn::after {
    content: "✉️";
    /* Simple icon for button */
    font-size: 1.2em;
    margin-left: 10px;
}

/* Product Detail Page */
.p-detail {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.p-detail__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Image Area */
.p-detail__image-area {
    width: 100%;
}

.p-detail__main-img {
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* Info Area */
.p-detail__info-area {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.p-detail__title {
    font-size: var(--font-size-2xl);
    margin-bottom: 24px;
    line-height: 1.3;
}

.p-detail__price {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.p-detail__tax-note {
    font-size: var(--font-size-sm);
    font-weight: normal;
}

.p-detail__actions {
    margin-bottom: 30px;
}

.p-detail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
    font-size: var(--font-size-base);
}

.p-detail__btn--primary {
    background-color: rgba(244, 0, 9, 0.04);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.p-detail__btn--primary:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 98, 65, 0.2);
    color: var(--color-white);
}

.p-detail__description {
    margin-bottom: 30px;
}

.p-detail__section-title {
    font-size: var(--font-size-lg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.p-detail__text {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-medium);
}

/* Accordion */
.p-detail__specs {
    border-top: 1px solid var(--color-border);
}

.p-detail__accordion {
    border-bottom: 1px solid var(--color-border);
}

.p-detail__accordion-header {
    padding: 20px 0;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-base);
}

.p-detail__accordion-header::-webkit-details-marker {
    display: none;
}

.p-detail__accordion-icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s;
    margin-right: 10px;
}

.p-detail__accordion[open] .p-detail__accordion-icon {
    transform: rotate(-135deg);
}

.p-detail__accordion-content {
    padding-bottom: 20px;
    animation: fadeInDown 0.3s ease-out;
}

.p-detail__spec-list dt {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-text-main);
}

.p-detail__spec-list dd {
    margin-bottom: 15px;
    margin-left: 0;
    color: var(--color-text-medium);
}

.p-detail__spec-list dd:last-child {
    margin-bottom: 0;
}

/* Desktop Responsiveness */
@media (min-width: 900px) {
    .p-detail__container {
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
    }

    .p-detail__image-area {
        width: 50%;
        position: sticky;
        top: 100px;
    }

    .p-detail__info-area {
        width: 50%;
    }

    .p-detail__title {
        font-size: 3.2rem;
    }
}

/* ==========================================================================
   Commitment Page (commitment_)
   ========================================================================== */

/* Container */
.commitment_container {
    width: 100%;
}

/* Hero Section - Wave Style */
.commitment_hero {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url(../gif/IMG_9686.GIF);
    background-size: cover;
    background-position: center;
}

.commitment_hero--wave {
    min-height: 80vh;
}

.commitment_hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}

.commitment_hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

/* === CSS Flame Animation === */
.commitment_hero--flames {
    background: linear-gradient(180deg, #1a0a00 0%, #2d1810 50%, #1a0a00 100%);
}

.commitment_hero__gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center bottom,
            rgba(255, 100, 0, 0.3) 0%,
            rgba(200, 50, 0, 0.2) 30%,
            rgba(0, 0, 0, 0) 70%);
    z-index: 0;
}

.commitment_hero__overlay--flame {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.4) 100%);
    z-index: 3;
}

/* Flames Container */
.commitment_hero__flames {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 300px;
    z-index: 1;
}

.flame {
    position: absolute;
    bottom: 0;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(3px);
    animation: flicker 0.3s ease-in-out infinite alternate;
}

.flame--1 {
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 180px;
    background: linear-gradient(0deg,
            #ff4500 0%,
            #ff6b00 30%,
            #ffa500 60%,
            #ffcc00 80%,
            #fff5cc 100%);
    animation: flame1 0.8s ease-in-out infinite alternate;
    z-index: 3;
}

.flame--2 {
    left: 35%;
    width: 60px;
    height: 140px;
    background: linear-gradient(0deg,
            #ff3300 0%,
            #ff5500 40%,
            #ff8800 70%,
            #ffbb00 100%);
    animation: flame2 0.6s ease-in-out infinite alternate;
    z-index: 2;
}

.flame--3 {
    left: 55%;
    width: 55px;
    height: 130px;
    background: linear-gradient(0deg,
            #ff2200 0%,
            #ff4400 40%,
            #ff7700 70%,
            #ffaa00 100%);
    animation: flame3 0.7s ease-in-out infinite alternate;
    z-index: 2;
}

.flame--4 {
    left: 25%;
    width: 45px;
    height: 100px;
    background: linear-gradient(0deg,
            #cc2200 0%,
            #ff4400 50%,
            #ff6600 100%);
    animation: flame4 0.5s ease-in-out infinite alternate;
    z-index: 1;
}

.flame--5 {
    left: 65%;
    width: 40px;
    height: 90px;
    background: linear-gradient(0deg,
            #cc2200 0%,
            #ff3300 50%,
            #ff5500 100%);
    animation: flame5 0.55s ease-in-out infinite alternate;
    z-index: 1;
}

/* Flame Keyframes */
@keyframes flame1 {
    0% {
        height: 180px;
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
    }

    50% {
        height: 200px;
        transform: translateX(-50%) scaleX(1.05) skewX(2deg);
    }

    100% {
        height: 170px;
        transform: translateX(-50%) scaleX(0.95) skewX(-2deg);
        opacity: 0.9;
    }
}

@keyframes flame2 {
    0% {
        height: 140px;
        transform: scaleX(1) skewX(-3deg);
    }

    100% {
        height: 120px;
        transform: scaleX(1.1) skewX(3deg);
    }
}

@keyframes flame3 {
    0% {
        height: 130px;
        transform: scaleX(1) skewX(2deg);
    }

    100% {
        height: 145px;
        transform: scaleX(0.9) skewX(-3deg);
    }
}

@keyframes flame4 {
    0% {
        height: 100px;
        opacity: 0.8;
    }

    100% {
        height: 85px;
        opacity: 1;
    }
}

@keyframes flame5 {
    0% {
        height: 90px;
        opacity: 0.85;
    }

    100% {
        height: 100px;
        opacity: 0.95;
    }
}

@keyframes flicker {

    0%,
    100% {
        filter: blur(3px) brightness(1);
    }

    50% {
        filter: blur(4px) brightness(1.1);
    }
}

/* Wood Logs */
.commitment_hero__logs {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 60px;
    z-index: 2;
}

.log {
    position: absolute;
    background: linear-gradient(90deg, #3d2817 0%, #5a3d2b 50%, #3d2817 100%);
    border-radius: 12px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3);
}

.log::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 200, 100, 0.2) 0%, transparent 100%);
    border-radius: 12px 12px 0 0;
}

.log--1 {
    bottom: 0;
    left: 10%;
    width: 150px;
    height: 30px;
    transform: rotate(-8deg);
}

.log--2 {
    bottom: 0;
    right: 10%;
    width: 140px;
    height: 28px;
    transform: rotate(10deg);
}

.log--3 {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 26px;
}

/* Ember Particles */
.commitment_hero__embers {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 400px;
    z-index: 2;
    pointer-events: none;
}

.ember {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffcc00 0%, #ff6600 50%, transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: ember-float 3s ease-out infinite;
}

.ember--1 {
    left: 45%;
    animation-delay: 0s;
}

.ember--2 {
    left: 55%;
    animation-delay: 0.5s;
}

.ember--3 {
    left: 40%;
    animation-delay: 1s;
}

.ember--4 {
    left: 60%;
    animation-delay: 1.5s;
}

.ember--5 {
    left: 50%;
    animation-delay: 2s;
}

.ember--6 {
    left: 52%;
    animation-delay: 2.5s;
}

@keyframes ember-float {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    50% {
        opacity: 0.8;
    }

    100% {
        bottom: 350px;
        opacity: 0;
        transform: translateX(calc(-50px + 100px * var(--random, 0.5))) scale(0.3);
    }
}

.ember--1 {
    --random: 0.2;
}

.ember--2 {
    --random: 0.8;
}

.ember--3 {
    --random: 0.1;
}

.ember--4 {
    --random: 0.9;
}

.ember--5 {
    --random: 0.5;
}

.ember--6 {
    --random: 0.7;
}

/* Glow effect behind flames */
.commitment_hero__flames::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: radial-gradient(ellipse,
            rgba(255, 100, 0, 0.5) 0%,
            rgba(255, 50, 0, 0.3) 40%,
            transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

/* === Desktop Flame Size Enhancement === */
@media (min-width: 1024px) {
    .commitment_hero__flames {
        width: 550px;
        height: 400px;
        bottom: 80px;
    }

    .flame--1 {
        width: 110px;
        height: 250px;
    }

    .flame--2 {
        width: 85px;
        height: 200px;
    }

    .flame--3 {
        width: 75px;
        height: 180px;
    }

    .flame--4 {
        width: 60px;
        height: 140px;
    }

    .flame--5 {
        width: 55px;
        height: 120px;
    }

    .commitment_hero__logs {
        width: 350px;
        height: 80px;
        bottom: 30px;
    }

    .log--1 {
        width: 160px;
        height: 50px;
    }

    .log--2 {
        width: 130px;
        height: 45px;
    }

    .log--3 {
        width: 140px;
        height: 40px;
    }

    /* Larger glow effect */
    .commitment_hero__flames::before {
        width: 450px;
        height: 350px;
        left: 50px;
        bottom: -40px;
    }
}

/* Extra large screens */
@media (min-width: 1440px) {
    .commitment_hero__flames {
        width: 650px;
        height: 480px;
        bottom: 100px;
    }

    .flame--1 {
        width: 130px;
        height: 300px;
    }

    .flame--2 {
        width: 100px;
        height: 240px;
    }

    .flame--3 {
        width: 90px;
        height: 220px;
    }

    .flame--4 {
        width: 70px;
        height: 170px;
    }

    .flame--5 {
        width: 65px;
        height: 150px;
    }

    .commitment_hero__logs {
        width: 420px;
        height: 100px;
        bottom: 40px;
    }

    .commitment_hero__flames::before {
        width: 550px;
        height: 420px;
    }
}

/* === End CSS Flame Animation === */

.commitment_hero__content {
    position: relative;
    z-index: var(--z-index-hero-content);
    text-align: center;
    color: var(--color-white);
    padding: 0 20px;
}

.commitment_hero__label {
    font-size: var(--font-size-sm);
    letter-spacing: 0.3em;
    opacity: 0.9;
    margin-bottom: 16px;
    font-weight: 500;
}

.commitment_hero__title {
    font-size: clamp(3.2rem, 9vw, 6.4rem);
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

.commitment_hero__subtitle {
    font-size: var(--font-size-lg);
    letter-spacing: 0.15em;
    opacity: 0.95;
    font-weight: 500;
    margin-bottom: 40px;
}

/* === Pillars Inside Hero === */
.commitment_pillars--hero {
    margin-top: 30px;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.commitment_pillars__heading--hero {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    color: white;
    margin-bottom: 24px;
    line-height: 1.5;
    font-weight: bold;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.commitment_pillars__nav--hero {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.commitment_pillar--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    min-width: 140px;
}

.commitment_pillar--hero:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.commitment_pillar--hero .commitment_pillar__number {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.8;
    letter-spacing: 0.1em;
}

.commitment_pillar--hero .commitment_pillar__label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin: 8px 0 4px;
}

.commitment_pillar--hero .commitment_pillar__title {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Mobile adjustments for pillars in hero */
@media (max-width: 768px) {
    .commitment_pillars--hero {
        padding: 20px 15px;
        margin-top: 20px;
    }

    .commitment_pillars__nav--hero {
        gap: 10px;
    }

    .commitment_pillar--hero {
        padding: 15px 18px;
        min-width: 100px;
    }

    .commitment_pillar--hero .commitment_pillar__label {
        font-size: 0.75rem;
    }

    .commitment_pillar--hero .commitment_pillar__title {
        font-size: 1rem;
    }
}

/* === End Pillars Inside Hero === */

/* === Starbucks-Style Background Text === */
.commitment_hero__bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(6rem, 20vw, 18rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.1em;
    white-space: nowrap;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

/* Stylish Wave */
.commitment_hero__wave--styled {
    height: 100px;
}

.commitment_hero__wave--styled svg path {
    filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.1));
}

/* === Navigation Cards Section === */
.commitment_nav-cards {
    background: var(--color-white);
    padding: 80px 20px;
    text-align: center;
}

.commitment_nav-cards__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.commitment_nav-cards__heading-en {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: #666;
    letter-spacing: 0.15em;
    line-height: 1;
}

.commitment_nav-cards__heading-ja {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--color-gray-900);
    margin-top: 12px;
    letter-spacing: 0.1em;
}

.commitment_nav-cards__grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.commitment_nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 220px;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary);
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.commitment_nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.commitment_nav-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    background: rgba(174, 17, 0, 0.95);
}

.commitment_nav-card__number {
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
}

.commitment_nav-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.commitment_nav-card__en {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    display: block;
}

.commitment_nav-card__ja {
    font-size: 2.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

.commitment_nav-card__arrow {
    width: 10px;
    height: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
    margin-top: 4px;
}

.commitment_nav-card:hover .commitment_nav-card__arrow {
    transform: rotate(45deg) translateX(3px) translateY(3px);
    border-color: var(--color-white);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .commitment_hero__bg-text {
        font-size: clamp(3rem, 15vw, 8rem);
    }

    .commitment_nav-cards {
        padding: 50px 15px;
    }

    .commitment_nav-cards__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 340px;
        justify-items: center;
    }

    .commitment_nav-card {
        width: 160px;
    }

    .commitment_nav-card:first-child {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .commitment_nav-card__number {
        font-size: 1.5rem;
    }

    .commitment_nav-card__en {
        font-size: 1.4rem;
    }

    .commitment_nav-card__ja {
        font-size: 1.8rem;
    }
}

/* === End Navigation Cards Section === */

/* Wave Decoration */
.commitment_hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
}

.commitment_hero__wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 3 Pillar Navigation */
.commitment_pillars {
    background-color: var(--color-white);
    padding: 80px 20px;
    text-align: center;
}

.commitment_pillars__inner {
    max-width: 900px;
    margin: 0 auto;
}

.commitment_pillars__heading {
    font-size: var(--font-size-2xl);
    color: var(--color-text-main);
    margin-bottom: 48px;
    line-height: 1.5;
    font-weight: bold;
}

.commitment_pillars__nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.commitment_pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-main);
    padding: 24px 32px;
    border-radius: 16px;
    transition: all 0.3s ease;
    min-width: 160px;
}

.commitment_pillar:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    background-color: rgba(244, 0, 9, 0.03);
}

.commitment_pillar__number {
    font-size: clamp(48px, 8vw, 72px);
    font-weight: bold;
    color: rgba(230, 55, 55, 0.15);
    line-height: 1;
    margin-bottom: 8px;
}

.commitment_pillar__label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.15em;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.commitment_pillar__title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--color-text-main);
}

/* === Brand Message Area (Section 3 Title) === */
.commitment_brand-message {
    position: relative;
    width: 100%;
    padding: 22vw 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
    z-index: 0; /* z-index-context for pseudo-elements */
}

/* 全ブランドメッセージ共通の背景レイヤー */
.commitment_brand-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/IMG.png'); /* デフォルトは IMG.png */
    background-color: #f400090a;
    background-size: cover;
    background-position: center;
    z-index: -1; 
}

/* 01 価格: 背景画像と180度回転 */
.commitment_brand-message#price::before {
    /* background-image: url('../img/WebP/Commitment_1.webp'); */
    transform: rotate(180deg);
}

/* 02 品質 */
.commitment_brand-message#quality::before {
    /* background-image: url('../img/WebP/Commitment_2.webp'); */
}

/* 03 手軽さ (サポート) */
.commitment_brand-message#delivery::before{
    transform: rotate(180deg);
    /* 必要に応じて背景画像を変更 */
    /* background-image: url('../img/WebP/Commitment_3.webp'); */
}

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

.commitment_brand-message__title {
    position: relative;
    z-index: 2;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.commitment_brand-message__number {
    display: inline-block;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-family: var(--font-family);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    font-weight: 300;
    letter-spacing: 0.15em;
}
.commitment_section__image{
    width: 100%;
    height: auto;
    border-radius: 25px;
}
@media (max-width: 768px) {
    .commitment_section__image{
        display: none;
    }
}

/* Section Base */
.commitment_section {
    padding: 100px 20px;
}

.commitment_section:nth-child(odd of .commitment_section) {
   /* background-color: var(--color-bg-body);*/
    background-color: rgb(244, 0, 9,0.04);
}


.commitment_section:nth-child(even of .commitment_section) {
    /*background: linear-gradient(to bottom,
            rgba(236, 147, 144, 0) 0%,
            rgba(236, 147, 144, 1) 100%);*/
    background-color: var(--color-bg-body);
}
.commitment_section.commitment_section--price{
    /*background-color: rgb(236, 147, 144);*/
}
.commitment_section--price .commitment_section__text{
    color: #3d3935;
    letter-spacing: 0.2rem
}


.commitment_section__inner {
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 769px) {
    .commitment_section__inner {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .commitment_section__inner--reverse {
        flex-direction: row-reverse;
    }

    .commitment_section__content {
        flex: 0 0 45%;
        padding: 60px 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .commitment_section__image {
        flex: 0 0 55%;
        min-height: 500px;
    }

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

/* Section Number */
.commitment_section__number {
    font-size: clamp(56px, 10vw, 96px);
    font-weight: 700;
    color: rgba(230, 55, 55, 0.08);
    line-height: 1;
    margin-bottom: 8px;
}

/* Section Content */
.commitment_section__label {
    display: inline-block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 16px;
    display: none;
}

.commitment_section__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 28px;
    line-height: 1.4;
}

.commitment_section__text {
    font-size: var(--font-size-base);
    color: var(--color-text-medium);
    line-height: 2;
    margin-bottom: 20px;
}



/* Section Image */
.commitment_section__image {
    overflow: hidden;
    position: relative;
}

.commitment_section__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    min-height: 350px;
}

/* Mobile padding for content */
@media (max-width: 767px) {

    /* === Text Over Image Layout for Mobile === */
    .commitment_section {
        padding: 0;
    }

    .commitment_section__inner {
        position: relative;
    }

    /* Image takes full section with darkening filter */
    .commitment_section__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .commitment_section__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(45%);
    }

    /* Content overlaid on image */
    .commitment_section__content {
        position: relative;
        z-index: 2;
        padding: 60px 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: left;
    }

    /* Section number - subtle on mobile */
    .commitment_section__number {
        font-size: 64px;
        margin-bottom: 12px;
    }

    /* === BiNDup Style Line Decoration === */
    .commitment_section__label {
        position: relative;
        color: #fff;
        font-size: 0.75rem;
        letter-spacing: 0.3em;
        padding: 20px 0;
        margin-bottom: 20px;
    }

    /* Top line - above label */
    .commitment_section__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.8) 20%,
                rgba(255, 255, 255, 0.8) 80%,
                transparent 100%);
    }

    /* Bottom line - below label */
    .commitment_section__label::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.8) 20%,
                rgba(255, 255, 255, 0.8) 80%,
                transparent 100%);
    }

    /* Title styling for mobile */
    .commitment_section__title {

        font-size: clamp(1.5rem, 5vw, 2rem);
        line-height: 1.5;
        margin-bottom: 20px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    /* Hide br for mobile centered layout */
    .commitment_section__title .u_sm-only {
        display: none;
    }

    /* Text styling for mobile */
    .commitment_section__text {
        font-size: 1.3rem;
        line-height: 1.9;
        margin-bottom: 16px;
    }

 

    /* Hide feature badges on mobile overlay */
    .commitment_section__features {
        display: none;
    }
}

/* Feature Badges */
.commitment_section__features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.commitment_feature {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 50px;
    padding: 12px 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-main);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.commitment_feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.commitment_feature__icon {
    font-size: 1.4em;
}

/* Highlight Box */
.commitment_section__highlight {
    background: linear-gradient(135deg, var(--color-primary), #ff4444);
    color: var(--color-white);
    padding: 28px 36px;
    border-radius: 16px;
    margin-top: 32px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(230, 55, 55, 0.25);
}

.commitment_highlight__label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.commitment_highlight__value {
    font-size: var(--font-size-lg);
    font-weight: bold;
}

.commitment_highlight__value span {
    font-size: var(--font-size-2xl);
    margin: 0 6px;
}

/* Other Contents Section */
.commitment_other {
    background-color: var(--color-bg-lighter);
    padding: 100px 20px;
}

.commitment_other__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.commitment_other__heading {
    text-align: center;
    margin-bottom: 60px;
}

.commitment_other__heading-en {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.25em;
    color: var(--color-text-light);
    margin-bottom: 12px;
    font-weight: 500;
}

.commitment_other__heading-ja {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--color-text-main);
}

.commitment_other__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.commitment_other-card {
    background-color: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.commitment_other-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.commitment_other-card__image {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.commitment_other-card__content {
    padding: 24px;
}

.commitment_other-card__label {
    display: inline-block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.15em;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 10px;
}

.commitment_other-card__title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.commitment_other-card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-medium);
    line-height: 1.7;
}

/* CTA Section */
.commitment_cta {
    background: linear-gradient(135deg, var(--color-gray-900), #1a1a1a);
    padding: 100px 20px;
    text-align: center;
}

.commitment_cta__inner {
    max-width: 700px;
    margin: 0 auto;
}

.commitment_cta__title {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin-bottom: 20px;
    font-weight: bold;
}

.commitment_cta__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    margin-bottom: 40px;
}

.commitment_cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
}

@media (min-width: 480px) {
    .commitment_cta__buttons {
        flex-direction: row;
    }
}

.commitment_cta__buttons .m_btn {
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.commitment_cta__buttons .m_btn--secondary {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.commitment_cta__buttons .m_btn--secondary:hover {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

.commitment_cta__contact {
    display: inline-block;
    margin-top: 16px;
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
    transition: color 0.3s;
}

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

/* Scroll Fade-in Animation */
.js_fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js_fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays for features */
.commitment_feature.js_fade-in:nth-child(1) {
    transition-delay: 0s;
}

.commitment_feature.js_fade-in:nth-child(2) {
    transition-delay: 0.1s;
}

.commitment_feature.js_fade-in:nth-child(3) {
    transition-delay: 0.2s;
}

/* Staggered animation for pillars */
.commitment_pillar.js_fade-in:nth-child(1) {
    transition-delay: 0s;
}

.commitment_pillar.js_fade-in:nth-child(2) {
    transition-delay: 0.15s;
}

.commitment_pillar.js_fade-in:nth-child(3) {
    transition-delay: 0.3s;
}

/* Staggered animation for Other Content cards */
.commitment_other-card.js_fade-in:nth-child(1) {
    transition-delay: 0s;
}

.commitment_other-card.js_fade-in:nth-child(2) {
    transition-delay: 0.1s;
}

.commitment_other-card.js_fade-in:nth-child(3) {
    transition-delay: 0.2s;
}

/* Utility: Show on mobile only */
.u_sm-only {
    display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .u_sm-only {
        display: inline;
    }

    .commitment_hero--wave {
        min-height: 60vh;
    }

    .commitment_hero__wave {
        height: 50px;
    }

    .commitment_pillars {
        padding: 60px 20px;
    }

    .commitment_pillars__nav {
        gap: 20px;
    }

    .commitment_pillar {
        padding: 16px 24px;
        min-width: 120px;
    }


    .commitment_section__title {
        font-size: var(--font-size-xl);
    }

    .commitment_other {
        padding: 70px 20px;
    }

    .commitment_cta {
        padding: 70px 20px;
    }
}