@charset "UTF-8";

/* =========================================
           基本設定 (Reset & Base)
           ========================================= */
html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
    background-color: #fff;
    line-height: 1.6;
}
.nomobile {
    display: block;
}
.nopc {
    display:none;
}
a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.voice-card-num2 {
    display: none;
    float: right;
}

/* bodyのスクロールロック (メニュー展開時用) */
body.no-scroll {
    overflow: hidden;
}

/* =========================================
           スクロールアニメーション用の共通クラス（フェードアップ）
           ========================================= */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

    .scroll-fade.is-active {
        opacity: 1;
        transform: translateY(0);
    }

/* =========================================
           ヘッダー (Header Navigation)
           ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #EFECE3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 1002; /* メニュー(1001)より上に設定 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-top: solid 30px #000;
    transition: background-color 0.4s ease, border-top-color 0.4s ease, box-shadow 0.4s ease;
}
    /* メニュー展開時は背景などを透過して邪魔しないようにする */
    .site-header.is-active {
        background-color: transparent;
        border-top-color: transparent;
        box-shadow: none;
        pointer-events: none; /* メニュー以外のヘッダー領域のクリックを無効化 */
    }

    .site-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; /* 0から100%へアニメーション */
        height: 1px;
        background-color: #000;
        z-index: 10;
        animation: lineLeftToRight 1s ease-in-out forwards;
        transition: opacity 0.4s ease;
    }

    /* メニュー展開時（is-active）は線を非表示にして邪魔にならないようにする */
    .site-header.is-active::after {
        opacity: 0;
    }

.menu-trigger {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    pointer-events: auto; /* ハンバーガーだけは常にクリック可能 */
}

    .menu-trigger span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #333;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* ハンバーガーアイコンのアニメーション (「×」に変化) */
    .menu-trigger.is-active span:nth-of-type(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .menu-trigger.is-active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.is-active span:nth-of-type(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

.header-logo {
    flex-grow: 1;
    text-align: center;
    transition: opacity 0.3s ease;
}

    .header-logo img {
        width: 160px;
    }

.header-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: opacity 0.3s ease;
}

.icon-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #666;
    cursor: pointer;
}

    .icon-item img {
        border-right: solid 1px #000;
        padding-right: 9px;
        height: 25px;
    }

/* メニュー展開時は元のロゴと右アイコンを非表示 */
.site-header.is-active .header-logo,
.site-header.is-active .header-icons {
    opacity: 0;
}

/* =========================================
           オーバーレイ（メニュー背景の暗転）
           ========================================= */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

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

/* =========================================
           グローバルメニュー (BAUM風スライドドロワー)
           ========================================= */
.global-menu {
    position: fixed;
    top: 0;
    left: -550px; /* 初期位置は画面外 */
    width: 550px;
    max-width: 100%; /* スマホ対応 */
    height: 100vh;
    background-color: #EFECE3;
    z-index: 1001; /* ヘッダーの下、オーバーレイの上 */
    overflow-y: auto;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 61px 40px 60px; /* 上部はハンバーガー用に余白 */
    box-sizing: border-box;
    /* スクロールバーを非表示にする設定 */
    -ms-overflow-style: none; /* IE, Edge 対応 */
    scrollbar-width: none; /* Firefox 対応 */
}

    /* Chrome, Safari 用のスクロールバー非表示設定 */
    .global-menu::-webkit-scrollbar {
        display: none;
    }

    .global-menu.is-active {
        transform: translateX(550px); /* 左からスライドイン */
    }

@media (max-width: 768px) {
    .global-menu {
        left: -100%;
        width: 100%;
        padding: 100px 20px 60px;
    }

        .global-menu.is-active {
            transform: translateX(100%);
        }
}

/* メニュー内のロゴ */
.global-menu-logo {
    display: block;
    margin-bottom: 40px;
}

    .global-menu-logo img {
        width: 120px;
    }

/* アコーディオン & カードスタイル */
.global-menu-card-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
}

.global-menu-card {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    padding: 20px 0;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    font-family: 'Noto Sans JP', serif;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    text-decoration: none;
}

    .global-menu-card span {
        display: inline-block;
    }

.global-menu-card-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    margin-left: 15px;
    color: #666;
}

/* アコーディオンの中身 */
.global-menu-card-inner {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    display: flex;
    flex-direction: column;
    background-color: #EFECE3;
}

    .global-menu-card-inner a {
        display: flex;
        align-items: baseline;
        padding: 15px 20px;
        font-family: 'Noto Sans JP', serif;
        font-size: 14px;
        color: #000;
        text-decoration: none;
        transition: background-color 0.3s;
    }

        .global-menu-card-inner a:hover {
            background-color: #fff;
        }

        .global-menu-card-inner a:last-child {
            border-bottom: none;
        }

/* メニュー内の商品グリッド */
.menu-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 15px 0; /* paddingをこちらに移動し、閉じた時のはみ出しを防止 */
}

.menu-category-item {
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

    .menu-category-item:hover {
        opacity: 0.7;
    }

    .menu-category-item .img-box {
        border: 1px solid #000;
        margin-bottom: 8px;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #fff;
    }

    .menu-category-item h3 {
        font-size: 11px;
        margin: 0;
        font-weight: normal;
        color: #000;
        line-height: 1.3;
    }

    .menu-category-item p {
        font-size: 9px;
        margin: 3px 0 0;
        color: #666;
        line-height: 1.2;
    }

/* メニュー内のボタン群 */
.global-menu-buttons {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .global-menu-buttons a {
        display: block;
        padding: 15px;
        border: 1px solid #000;
        text-align: center;
        font-size: 12px;
        color: #000;
        background-color: #fff;
        text-decoration: none;
        transition: all 0.3s;
        letter-spacing: 0.1em;
    }

        .global-menu-buttons a:hover {
            background-color: #000;
            color: #fff;
        }
        /* 新規メンバー登録ボタン用 (黒ベース) */
        .global-menu-buttons a.btn-black {
            background-color: #000;
            color: #fff;
        }

            .global-menu-buttons a.btn-black:hover {
                background-color: #fff;
                color: #000;
            }

/* メニュー内のリンク群 (SNS, FAQなど) */
.global-menu-aside {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
}

    .global-menu-aside a {
        font-size: 12px;
        color: #666;
        text-decoration: none;
        transition: color 0.3s;
    }

        .global-menu-aside a:hover {
            color: #000;
        }

    /* --- 時間差フェードインのアニメーション --- */
    .global-menu-card-wrapper > .global-menu-card,
    .global-menu-card-wrapper > .accordion-target,
    .global-menu-buttons > a,
    .global-menu-aside > a,
    .global-menu-logo {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

.global-menu.is-active .global-menu-logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    text-align: center;
}

.global-menu.is-active .global-menu-card-wrapper > .global-menu-card:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.global-menu.is-active .global-menu-card-wrapper > .global-menu-card:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.global-menu.is-active .global-menu-card-wrapper > .global-menu-card:nth-of-type(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.global-menu.is-active .global-menu-card-wrapper > .global-menu-card:nth-of-type(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.global-menu.is-active .global-menu-card-wrapper > .global-menu-card:nth-of-type(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.global-menu.is-active .global-menu-card-wrapper > .accordion-target {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.global-menu.is-active .global-menu-buttons > a:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.global-menu.is-active .global-menu-buttons > a:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

.global-menu.is-active .global-menu-buttons > a:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}

.global-menu.is-active .global-menu-aside > a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.0s;
}

/* =========================================
           メインビジュアル (線のアニメーション付き)
           ========================================= */
.main-visual {
    position: relative;
    width: 100%;
    height: 580px;
    margin-top: 120px;
    overflow: hidden;
    background-color: #fff;
}

/*    .main-visual::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: #000;
        z-index: 10;
        animation: lineLeftToRight 1s ease-in-out forwards;
    }*/

    .main-visual::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 1px;
        background-color: #000;
        z-index: 10;
        animation: lineRightToLeft 1s ease-in-out forwards;
    }

.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: contentFadeIn 0.8s ease-in-out 0.8s forwards;
}

@keyframes lineLeftToRight {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes lineRightToLeft {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    background-position: center;
    /* 画像が2枚になったので8秒ループに変更 */
    animation: slideFade 8s infinite;
}

    .slide-item img {
        width: 400px;
        position: absolute;
        bottom: 120px;
        left: calc(50% - 520px);
    }

    .slide-item:nth-child(1) {
        background-image: url('../../img/bellefare2026/f_top/head1.jpg');
        animation-delay: 0s;
    }

    /* カウンセリングサービス準備中のため一時的に非表示（画像差し替え検討中）
            .slide-item:nth-child(2) {
                background-image: url('img/head2.jpg');
                animation-delay: 4s;
            }
            */

    .slide-item:nth-child(2) {
        background-image: url('../../img/bellefare2026/f_top/head3.jpg');
        animation-delay: 4s;
    }

@keyframes slideFade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.main-content {
    padding: 50px 20px 0px 20px;
    text-align: center;
}

    .main-content .subtitle {
        font-size: 1rem;
        color: #888;
        margin-bottom: 80px;
        margin-top: 50px;
    }

/* =========================================
           商品カテゴリーセクション
           ========================================= */
.product-categories {
    max-width: 1000px;
    margin: 0 auto 100px;
    padding: 0 0px;
}

.category-grid {
    display: flex;
    justify-content: space-between;
    gap: 47px;
}

.category-item {
    flex: 1;
    text-align: left;
}

    .category-item .img-box {
        border: 1px solid #000;
        margin-bottom: 15px;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .category-item h3 {
        font-size: 14px;
        margin: 0;
        font-weight: normal;
    }

    .category-item p {
        font-size: 11px;
        margin: 5px 0 0;
    }

/* =========================================
           枠線アニメーション共通設定 (ABOUT, KAKUSHIN, LINEUP)
           ========================================= */
.animated-box {
    overflow: hidden;
}

    /* 各線を border で描画するよう変更（太さのばらつき対策） */
    .animated-box .line {
        position: absolute;
        z-index: 10;
    }

.line-top {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 1px solid #000;
}

.line-right {
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 1px solid #000;
}

.line-bottom {
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 1px solid #000;
}

.line-left {
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 1px solid #000;
}

.animated-box .inner-text {
    opacity: 0;
    position: relative;
    z-index: 2;
}

.animated-box.is-active .line-top {
    animation: drawTop 0.5s linear forwards;
}

.animated-box.is-active .line-right {
    animation: drawRight 0.5s linear forwards 0.5s;
}

.animated-box.is-active .line-bottom {
    animation: drawBottom 0.5s linear forwards 1s;
}

.animated-box.is-active .line-left {
    animation: drawLeft 0.5s linear forwards 1.5s;
}

.animated-box.is-active .inner-text {
    animation: contentFadeIn 0.8s ease forwards 2s;
}

@keyframes drawTop {
    to {
        width: 100%;
    }
}

@keyframes drawRight {
    to {
        height: 100%;
    }
}

@keyframes drawBottom {
    to {
        width: 100%;
    }
}

@keyframes drawLeft {
    to {
        height: 100%;
    }
}

/* =========================================
           ボタン共通スタイル (左側に線がアニメーションする)
           ========================================= */
.button-23 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .button-23 a {
        font-family: 'Noto Sans JP', serif;
        font-size: 14px;
        letter-spacing: 0.1em;
        color: #000;
        font-weight: 400;
        /* box-shadow: 0 0 0 1px #000 inset; */
        display: block;
        position: relative;
        box-sizing: border-box;
        text-align: center;
        padding: 16px 64px;
        text-decoration: none;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s;
        border: solid 1px #000;
    }

        .button-23 a::after {
            content: "";
            position: absolute;
            top: 50%;
            left: -30px;
            width: 60px;
            height: 0px;
            background: #000;
            transition: all 0.3s ease;
            border-top: solid 1px #000;
        }

        .button-23 a:hover::after {
            animation: OutIn-Line-Left 700ms;
            transition: all 0.3s;
        }

@keyframes OutIn-Line-Left {
    0% {
        transform: scale3d(1,1,1);
        transform-origin: 0 0;
    }

    50% {
        transform: scale3d(0,1,1);
        transform-origin: 0 0;
    }

    50.1% {
        transform: scale3d(0,1,1);
        transform-origin: 100% 0;
    }

    100% {
        transform: scale3d(1,1,1);
        transform-origin: 100% 0;
    }
}

/* =========================================
           ABOUTセクション
           ========================================= */
.about-section {
    padding: 0px 0;
    position: relative;
    height: 664px;
    margin-bottom: 76px;
}

.about-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.about-image {
    width: 60%;
    z-index: 1;
}

    .about-image img {
        display: block;
        position: absolute;
        top: 0px;
        border: 1px solid #000;
    }

.about-content {
    background-color: #fff;
    padding: 70px 10px 70px 170px;
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 0;
    width: 390px;
}

.about-title {
    font-size: 18px;
    margin: 0 0 30px;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.about-text {
    font-size: 12px;
    line-height: 1.9;
    color: #000;
    margin-bottom: 40px;
}
.about-text2 {
    padding: 0px 0px 0px 15px;
    border-left: 1px solid #000;
}
    .about-text p {
        margin-bottom: 20px;
    }
.about-text2_title {
    background-color: #EFECE3;
    font-size: 10px;
    padding: 5px 10px;
    margin-top: 20px;
}
.about-text2_tit {
    font-size: 14px;
    margin-bottom: 5px;
}
/* =========================================
           核心セクション
           ========================================= */
.kakushin-section {
    padding: 70px 0 0px;
    background-color: #fff;
    position: relative;
}

.kakushin-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.kakushin-content {
    background-color: #fff;
    padding: 80px 100px 80px 80px;
    z-index: 0;
    position: relative;
    width: 360px;
}

.kakushin-title {
    font-size: 18px;
    margin: 0 0 30px;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.kakushin-sub {
    font-size: 12px;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.kakushin-features {
    margin-bottom: 30px;
}

.feature-title {
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 5px;
    color: #000;
}

.feature-desc {
    font-size: 11px;
    line-height: 1.6;
    margin: 0 0 15px;
    color: #555;
}

.kakushin-image {
    position: absolute;
    right: 0px;
    top: -70px;
    z-index: 1;
    height: 560px;
}

    .kakushin-image img {
        width: 100%;
        display: block;
        border: 1px solid #000;
    }

.btn-area {
    text-align: right;
}

/* =========================================
           LINEUPセクション
           ========================================= */
.lineup-section {
    padding: 76px 0 40px;
    background-color: #fff;
    position: relative;
    min-height: 430px;
}

.lineup-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}

.lineup-image {
    height: 560px;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
}

    .lineup-image img {
        width: 100%;
        display: block;
        border: 1px solid #000;
        margin-top: 40px;
    }

.lineup-content {
    width: 322px;
    background-color: #fff;
    padding: 130px 80px 130px 150px;
    margin-left: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.lineup-title {
    line-height: 1.6;
    font-size: 18px;
    margin: 0 0 30px;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.lineup-sub {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.lineup-desc {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #000;
}

/* =========================================
           NEWS & TOPICS セクション
           ========================================= */
.news-section {
    padding: 60px 0 100px;
    background-color: #fff;
}

.news-section-title {
    text-align: center;
    font-size: 30px;
    margin: 0 0 60px;
    font-weight: 300;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', serif;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.news-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.news-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 順番にフェードインさせるための設定 */
.news-section.is-active .news-section-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.news-section.is-active .news-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.news-section.is-active .news-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.2s;
}

.news-section.is-active .news-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.8s;
}

.news-section.is-active .news-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.4s;
}

.news-thumb {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

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

.news-content {
    flex-grow: 1;
    padding-top: 5px;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    margin-top: 13px;
}

.news-label {
    background-color: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.news-date {
    font-size: 14px;
    color: #000;
    font-family: Arial, sans-serif;
    letter-spacing: 0.05em;
}

.news-title {
    font-size: 16px;
    margin: 0 0 15px;
    font-weight: normal;
}

.news-desc {
    font-size: 11px;
    line-height: 1.8;
    color: #000;
    margin: 0;
}

/* =========================================
           フッターセクション
           ========================================= */
.site-footer {
    background-color: #000;
    color: #fff;
    padding: 60px 0 30px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
    padding: 0 20px;
}

.footer-logo img {
    width: 125px;
    filter: invert(1);
}

.footer-nav-wrapper {
    flex-grow: 1;
}

.footer-nav ul {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.footer-nav a {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #fff;
    transition: opacity 0.3s;
}

    .footer-nav a:hover {
        opacity: 0.7;
    }

.footer-buttons {
    display: flex;
    gap: 40px;
    padding-left: 20px;
}

.footer-btn {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 40px;
    font-size: 11px;
    text-decoration: none;
    min-width: 160px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    box-sizing: border-box;
    letter-spacing: 0.1em;
    z-index: 10;
}

    .footer-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -20px;
        width: 40px;
        height: 1px;
        background: #fff;
        transition: all 0.3s ease;
    }

    .footer-btn:hover::after {
        animation: OutIn-Line-Left 700ms;
        transition: all 0.3s;
    }

    .footer-btn:hover {
        opacity: 0.8;
    }

.footer-copyright {
    max-width: 1000px;
    margin: 40px auto 0;
    padding: 0 20px;
    font-size: 10px;
    color: #666;
    text-align: left;
}

/* レスポンシブ対応 (スマホ用) */
@media (max-width: 768px) {
    .category-grid {
        flex-wrap: wrap;
    }

    .menu-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-item {
        flex: 0 0 47%;
        margin-bottom: 30px;
    }

    .about-container {
        flex-direction: column;
    }

/*    .about-image, .about-content, .kakushin-content, .lineup-content {
        width: 100%;
        position: static;
        padding: 20px;
    }
    .about-image {
        padding: 1px 20px 20px 20px;
    }*/
    .kakushin-image, .lineup-image {
        width: 100%;
        position: static;
        margin-top: 20px;
    }

    .news-item {
        gap: 15px;
    }

    .news-thumb {
        width: 150px;
        height: 150px;
    }

    .news-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .news-desc {
        font-size: 10px;
    }

    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .footer-nav ul {
        gap: 15px;
    }

    .footer-buttons {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .footer-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================
   タブレット向け最適化 (画面幅 1024px 以下)
   ========================================================== */
@media screen and (max-width: 1024px) {
    /* セクションの高さ制限を解除し、はみ出しを防ぐ */
    .about-section, .kakushin-section, .lineup-section {
        height: auto;
        min-height: 500px;
        overflow: hidden;
    }
    .about-section {
        margin-top: 100px;
        height: 700px;
    }
    /* PC版の重ね合わせを維持しつつ、画像とテキストボックスの幅を割合（vw）に変更 */
    .about-image img {
        width: 55vw;
    }

    .kakushin-image {
        width: 50vw;
    }

    .lineup-image {
        width: 55vw;
    }

    .about-content {
        width: 50vw;
        padding: 40px 20px 40px 60px;
    }

    .kakushin-content {
        width: 50vw;
        padding: 40px 60px 40px 40px;
    }

    .lineup-content {
        width: 50vw;
        padding: 40px 40px 40px 60px;
    }

    /* メインビジュアルのテキスト画像の位置を画面内に収める */
    .slide-item img {
        left: 5%;
        max-width: 70%;
    }
}


/* ==========================================================
   スマートフォン向け最適化 (画面幅 768px 以下)
   ========================================================== */
@media screen and (max-width: 768px) {

    /* 1. ヘッダーとメインビジュアル */
    .site-header {
        height: 80px;
        border-top-width: 15px;
        padding: 0 15px;
    }

    .header-logo img {
        width: 120px;
    }

    .main-visual {
        margin-top: 80px;
        height: 500px;
    }
    /* メインビジュアルの画像を中央寄せに強制上書き */
    .slide-item img {
        width: 80% !important;
        max-width: 320px;
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 80px !important;
    }

    .main-content .subtitle img {
        width: 90% !important;
        max-width: 300px;
    }

    /* 2. 商品カテゴリー（4つの商品） */
    /* インラインのmargin-topを打ち消して、綺麗な2列のグリッドにする */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px; /* スマホ時のサイド余白 */
    }

    .category-item {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* 3. ABOUT, 核心, LINEUPセクション */
    /* PC版の重ね合わせを解除し、完全に縦に積み重ねるレイアウトに変更 */
    .about-section, .kakushin-section, .lineup-section {
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 50px !important;
        padding: 0 15px !important;
    }
    .about-section {
        padding-bottom: 100px !important;
    }
    .about-container, .kakushin-container, .lineup-container {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .about-image, .kakushin-image, .lineup-image {
        width: 100% !important;
        position: static !important;
        height: auto !important;
    }

        .about-image img, .kakushin-image img, .lineup-image img {
            width: calc(100% - 2px) !important;
            position: static !important;
        }

    /* -------------------------------------
       スマホ版：ABOUTセクションの重なりレイアウト
       ------------------------------------- */
    .about-section {
        padding-top: 20px !important; /* スマホ用に上部余白を調整 */
    }

    .about-container {
        padding: 0 15px !important; /* 画面端からの余白 */
        height: 1020px;
    }

    /* 左上に配置する商品画像 */
    .about-image {
        width: 90% !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 2 !important;
        border: 0px solid #000 !important;
        background-color: #f7f7f7 !important;
        box-sizing: border-box;
        margin-left: -220px !important;
        margin-bottom: -120px !important;
        max-width: 571px;
    }
    .about-image img {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border: none !important; /* 画像自体のボーダーは消す */
        left: 0 !important; /* インラインスタイルをリセット */
    }

    /* 右下に重なる詳細テキスト */
    .about-content {
        width: 100% !important;
        position: relative !important;
        margin-top: -15% !important;
        margin-left: auto !important;
        margin-right: -40px !important;
        padding: 140px 40px 30px 40px !important;
        z-index: 0 !important;
        background-color: #fff !important;
        box-sizing: border-box;
        right: 0 !important;
    }

    /* -------------------------------------
       その他のセクションは全幅表示をキープ
       ------------------------------------- */
    .kakushin-content, .lineup-content {
        width: 100% !important;
        position: static !important;
        padding: 30px 15px !important;
        box-sizing: border-box;
    }

/*    .about-content, .kakushin-content, .lineup-content {
        width: 100% !important;
        position: static !important;
        padding: 30px 15px !important;
        box-sizing: border-box;
    }*/

    /* インラインで指定されているボタンのマージンやフロートを打ち消し、中央寄せにする */
    .btn-area {
        float: none !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    .button-23 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: inline-block !important;
    }

    /* 4. NEWS & TOPICS */
    .news-section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    /* ニュースのサムネイルを画面いっぱいにし、テキストを下に配置 */
    .news-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px !important;
    }

    .news-thumb {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .news-meta {
        justify-content: center;
        margin-top: 5px !important;
    }

    /* 5. ドロワーメニュー (ハンバーガーメニュー内) */
    .global-menu {
        padding: 80px 20px 40px !important;
    }

    .menu-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 6. フッター */
    .footer-container {
        align-items: center !important; /* 中央寄せに強制 */
        gap: 30px !important;
    }

    .footer-logo {
        text-align: center;
        width: 100%;
    }

    .footer-nav-wrapper {
        width: 100%;
    }
    /* リンクを2列表示にする */
    .footer-nav ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px 10px !important;
        text-align: center;
    }
    /* ボタンを同じ大きさで縦に並べ、文字を折り返さない */
    .footer-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        gap: 20px !important;
        margin-top: 20px;
    }

    .footer-btn {
        width: 100% !important;
        max-width: 280px !important;
        white-space: nowrap !important; /* 改行防止 */
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   さらに小さいスマホ向け最適化 (画面幅 480px 以下)
   ========================================================== */
@media screen and (max-width: 480px) {
    /* メインビジュアルの高さをさらに縮小 */
    .main-visual {
        height: 400px;
    }

    .slide-item img {
        width: 90% !important;
    }
    /* 見出しの文字サイズを調整 */
    .news-section-title {
        font-size: 20px;
    }

    .about-title h2, .kakushin-title, .lineup-title {
        font-size: 16px;
    }
    .about-image {
        width: 100% !important;
        margin-left: -100px !important;
        margin-bottom: -150px !important;
    }
    .about-section {
        padding-bottom: 0px !important;
    }
}
@media screen and (max-width: 330px) {
    .about-container {
        height: 1080px;
    }
}
    /* ==========================================================
   Sub Secttion
   ========================================================== */
    .core-features-section {
        width: 1000px;
        margin: auto;
    }

    .core-features-title {
        text-align: center;
        font-size: 25px;
        margin-bottom: 20px;
    }

    .core-features {
        text-align: center;
    }
    /* =========================================
   VOICES セクション
   ========================================= */
    .voice-section {
        position: relative;
        /* 背景画像へのパスは実際のファイル名に合わせて変更してください */
        background-image: url(../../img/bellefare2026/f_itm/BF1000/tap-aroma.jpg);
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* 少しパララックス効果を持たせると高級感が出ます */
        padding: 80px 20px 100px;
        margin: 80px 0px 50px 0px;
    }

        /* 背景を少し暗くして文字を読みやすくするオーバーレイ */
        .voice-section::before {
            position: relative;
            background-image: url(../../img/bellefare2026/f_itm/BF1000/tap-aroma.jpg);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 30px 20px 30px;
        }

    .voice-container {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
    }

    .voice-title {
        text-align: center;
        font-size: 28px;
        color: #fff;
        font-weight: 300;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
    }

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

    .voice-card {
        display: flex;
        justify-content: space-between;
        align-items: initial;
        border: 1px solid rgba(255, 255, 255, 0.6); /* 白色の半透明ボーダー */
        padding: 30px 20px 30px 40px;
        background-color: transparent;
        color: #fff;
        transition: background-color 0.3s;
    }

        .voice-card:hover {
            background-color: rgba(255, 255, 255, 0.1); /* ホバー時に少し白く光る */
        }

    .voice-card-content {
        flex-grow: 1;
        padding-right: 30px;
    }

    .voice-card-title {
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 15px;
        letter-spacing: 0.05em;
    }

    .voice-card-text {
        font-size: 11px;
        line-height: 1.8;
        margin: 0;
        opacity: 0.9;
    }

    .voice-card-num {
        font-size: 40px;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5); /* 番号を少し透過 */
        flex-shrink: 0;
        position: relative;
    }

        .voice-card-num img {
            width: 50px;
            margin-top: -50px;
        }
    /* スマホ用レスポンシブ (既存の @media (max-width: 768px) 内に追加してもOKです) */
    @media screen and (max-width: 768px) {
        .voice-section {
            padding: 60px 15px 80px;
            background-attachment: scroll; /* スマホでは固定を解除 */
        }

        .voice-card {
            flex-direction: column-reverse; /* 番号を上に、テキストを下に配置 */
            align-items: flex-end;
            padding: 20px;
            gap: 10px;
        }

        .voice-card-content {
            padding-right: 0;
            width: 100%;
            text-align: left;
        }

        .voice-card-num {
            font-size: 32px;
            line-height: 1;
        }
    }
    /* =========================================
   MAIN INGREDIENTS セクション
   ========================================= */
    .ingredients-section {
        max-width: 960px;
        margin: 0 auto 40px;
        padding: 0 20px;
    }

    .ingredients-title-area {
        text-align: center;
        margin-bottom: 60px;
    }

    .ingredients-title {
        font-size: 28px;
        letter-spacing: 0.1em;
        font-weight: 300;
        margin: 0 0 5px;
    }

    .ingredients-subtitle {
        font-size: 12px;
        letter-spacing: 0.05em;
        margin: 0;
    }

    .ingredients-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .ingredient-card {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .ingredient-img {
        flex-shrink: 0;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        box-sizing: border-box;
    }

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

    .ingredient-info {
        flex-grow: 1;
    }

    .ingrecolor {
        background-color: #EFECE3;
        display: inline-block;
        padding: 2px 10px;
        margin-top: 5px;
        font-weight: normal;
    }

    .ingredient-name {
        font-size: 14px;
        margin: 0 0 10px;
        font-weight: bold;
        padding-bottom: 5px;
    }

    .ingredient-desc {
        font-size: 10px;
        line-height: 1.8;
        color: #000;
        margin: 0;
    }

    /* =========================================
   FRAGRANCE セクション
   ========================================= */
    .fragrance-section {
        max-width: 960px;
        margin: 0 auto 50px;
        padding: 0 20px;
    }

    .fragrance-box {
        border: 1px solid #000;
        padding: 50px 60px;
    }

    .fragrance-title {
        text-align: center;
        font-size: 28px;
        letter-spacing: 0.1em;
        font-weight: 300;
        margin: 0 0 30px;
    }

    .fragrance-content {
        display: flex;
        gap: 60px;
        align-items: center;
    }

    .fragrance-left {
        flex: 1;
    }

    .fragrance-catch {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 20px;
        letter-spacing: 0.05em;
        color: #000;
    }

    .fragrance-text {
        font-size: 11px;
        line-height: 1.9;
        margin: 0 0 20px;
    }

    .fragrance-pyramid-area {
        display: flex;
        align-items: normal;
        gap: 20px;
    }

    .fragrance-pyramid-text {
        font-size: 12px;
        font-weight: normal;
        line-height: 1.6;
        letter-spacing: 0.05em;
        padding-top: 20px;
    }

    .fragrance-pyramid-img {
        width: 220px;
    }

    .fragrance-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .fragrance-item {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .fragrance-img {
        flex-shrink: 0;
        width: 85px;
        border: 1px solid #000;
        box-sizing: border-box;
    }

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

    .fragrance-item-name {
        font-size: 13px;
        font-weight: bold;
        margin: 0 0 8px;
    }

    .fragrance-item-desc {
        font-size: 10px;
        line-height: 1.8;
        margin: 0;
    }

    /* =========================================
   全成分 セクション
   ========================================= */
    .full-ingredients-section {
        max-width: 930px;
        margin: 0 auto 70px;
        padding: 0 0px 0 40px;
        border-left: 1px solid #000;
        padding-left: 30px;
    }

    .full-ingredients-title {
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 15px;
    }

    .full-ingredients-text {
        font-size: 10px;
        line-height: 2;
        margin: 0;
        text-align: justify;
    }

    /* -----------------------------------------
   スマホ向けレスポンシブ追加
   (既存の @media screen and (max-width: 768px) 内に追記、またはそのまま下部に配置)
   ----------------------------------------- */
    @media screen and (max-width: 768px) {
        .ingredients-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .voice-card-num img {
            width: 50px;
            margin-top: -0px;
        }

        .fragrance-box {
            padding: 30px 20px;
        }

        .fragrance-content {
            flex-direction: column;
            gap: 40px;
        }

        .fragrance-pyramid-area {
            justify-content: center;
        }

        .core-features-section {
            width: auto;
            margin: auto;
        }

        .nomobile {
            display: none;
        }

        .nopc {
            display: block;
        }

        .core-features img {
            width: 80% !important;
            margin: auto;
            max-width: 400px;
            margin-top: 20px;
        }

        .full-ingredients-section {
            width: calc(100% - 71px);
        }

        .voice-card-num {
            display: none;
        }

        .voice-card-num2 {
            display: block;
            float: right;
            margin-left: 10px;
            width: 40px;
            margin-top: 3px;
        }
        /*    .about-image img {
        max-width: 571px;
        margin: auto;
    }*/
    }