@charset "UTF-8";

/*
TAB版 - 768px 以上 1199px 以下
---------- ---------- ---------- */
@media screen and (min-width: 768px) and (max-width: 1199px) {


/* ---------- ---------- ----------
SP版 - 設定 / 出し分け
---------- ---------- ---------- */
    .tab-only {
        display: block !important;
    }
    .pc-only {
        display: block !important; /* 文字は出す */
    }
    .not-sp {
        display: block !important;
    }
    .sp-only {
        display: none !important;
    }
    .fixed-bg-layer img.pc-only,
    .fixed-bg-layer img.sp-only {
        display: none !important; /* BG / IMG を消す */
    }


/* ---------- ---------- ----------
レイアウト
---------- ---------- ---------- */
    .white-wall-container {
        position: relative;
        z-index: 100;
        background-color: #ffffff;
        display: block !important;
        width: 100%;
        clear: both;
    }

    .container {
        max-width: 100%;
        padding: 0 8vw;
        margin: 0 auto;
    }


/* ---------- ---------- ----------
HERO
---------- ---------- ---------- */
    .hero-text-area {
        height: 100vh; /* ここの数字を小さくするほど白地の背景が早く上がってくる */
    }

    .hero-inner {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* 中心に配置 */
    }

    .hero-copy {
        font-size: 1.125rem;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
        line-height: 2.5;
    }

    .hero-logo {
        font-size: 4.5rem;
        letter-spacing: 0.4em;
    }


/* ---------- ---------- ----------
INTRODUCTION COPY
---------- ---------- ---------- */
    /* 左側の画像を内側に寄せる */
    .intro-side-img.left {
        left: 10%; /* 2%から10%前後（お好みで調整）へ変更 */
    }
    
    /* 右側の画像を内側に寄せる */
    .intro-side-img.right {
        right: 10%; /* 2%から10%前後（お好みで調整）へ変更 */
    }
    
    /* もし画像が大きすぎると感じたら、ここでサイズも微調整できます */
    .intro-side-img {
        width: 15vw; /* PCの12vwより少し大きくするとバランスが取れる場合があります */
    }

/* ---------- ---------- ----------
BRAND STORY - 動画固定 ＋ 中央配置
---------- ---------- ---------- */
    /* セクション全体の余白調整 */
    .brand-story-area {
        background-color: #fff;
        padding: 0 !important; /* 動画を上端に密着させるため */
    }

    /* スティッキーの親コンテナ */
    .sticky-container {
        display: block !important;
        position: relative;
    }

    /* ----- 左側：動画エリア / 最後まで上部に固定 ----- */
    .story-video-side {
        width: 100% !important;
        aspect-ratio: 16 / 9; /* 動画の比率を維持 */
        height: auto !important;
        
        /* 見出しの終わりまで画面上部に固定 */
        position: sticky !important;
        top: 0;
        z-index: 1; 
        overflow: hidden;
        background: #000;
    }
    .story-video-side video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ----- 右側：コンテンツエリア ----- */
    .story-scroll-content {
        width: 100% !important;
        position: relative;
        z-index: 10; /* 動画より前面に配置 */
        background: transparent; 
        
        /* 文頭の余韻を調整 */
        padding-top: 20vh; 
        padding-bottom: 0rem;
    }
    
    /* コンテンツを包む白い背景部分 */
    .story-inner {
        width: 100%;
        /* ここで初めて白背景を敷き、スクロール後半で動画を覆うようにする */
        background: #fff;
        padding: 4rem 1.5rem !important;
        margin: 0 auto;
    }
    
    /* 見出し：中央配置の徹底 */
    .brand-story-area .section-header-center {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
    }
    .brand-story-area .section-title-en {
        font-size: 1.95rem !important;
        text-align: center !important;
        display: block;
    }
    
    /* 縦線：上下の余白を縮小 */
    .brand-story-area .vertical-line {
        margin: 1.5rem auto 3rem !important;
        height: 6rem !important;
    }
    
    /* 本文テキスト：PCの設定をリセットして中央へ */
    .brand-story-area .story-text {
        font-size: var(--size-base) !important;
        line-height: 1.8 !important;
        letter-spacing: 0.1em !important;
        text-align: center !important; /* 強制中央 */
        text-indent: 0 !important; /* PCの字下げを削除 */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 改行を維持 */
    .brand-story-area .line {
        display: block !important;
        white-space: normal !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* ブロック同士の余白 */
    .story-block {
        width: 100% !important;
        margin-bottom: 5rem !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 本文01：PCの横並び設定をリセット */
    .row-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 5rem !important;
        margin-top: 0;
    }
    
    .row-layout .text-side,
    .row-layout .img-side {
        width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }
    
    /* 本文03/04：PCの重ね設定（absolute）を解除 */
    .overlay-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3.5rem !important;
    }
    
    .overlay-layout .img-content {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }
    
    /* テキストボックス：装飾を解除して本文を中央配置 */
    .text-card {
        position: static !important; /* 浮かせない */
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: block !important;
    }
    .text-card .story-text {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 画像サイズを画面幅に最適化 */
    .story-img {
        width: 60% !important;
        max-width: 100% !important;
        height: auto;
        margin: 0 auto;
    }
    
    /* 文末の余韻調整：VIEW MORE - 後の余白 */
    /* .story-block:last-child {
        margin-bottom: 0 !important;
    } */
    
    /* VIEW MOREボタン：中央配置 */
    .btn-wrap {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }

} /* @media - 終 */