@charset "UTF-8";
/*
 * 春夏トップページ (2026) - レイアウト定義
 * (style_top_2026_sm_layout.css)
 * ※位置(position/top/left)とサイズ(width/height)のみ定義
 */

/* -----------------------------------
   Hero (S1) - 足まで全部見せる設定 (縦伸び)
----------------------------------- */
.img_bg_01 {
    position: relative; 
    width: 100%; 
    
    /* ★ 修正: 高さ制限を撤廃し、画像に合わせて伸ばす */
    height: auto !important;
    
    /* 枠からはみ出しても隠さない */
    overflow: hidden !important;
    
    /* 重なり順序の調整 */
    z-index: 1;
}

.story__hero-title {
    position: absolute;
    width: max(150px, 16vw); 
    
    /* ロゴ位置: 高さ基準 (20%) */
    top: 20.5%; 
    
    bottom: auto; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 2;
}

.top_section1 .img_bg_01 > img {
    /* 横幅いっぱいに合わせる */
    width: 100%;
    
    /* ★ 修正: 高さはなりゆき (比率を維持して伸びる) */
    height: auto !important;
    
    /* 念のため隙間消し */
    vertical-align: bottom; 
    
    /* ★ 重要: パララックス(位置ズレ)を強制停止 */
    /* これがないとスクロールした時に画像が逃げて足が切れます */
    
    transform: none !important;
    
		/* ★★★ 追加: 上をトリミングする設定 ★★★ */
    /* マイナス値で画像を上に引き上げる */
    /* -5% なら画像の上の5%が枠外に出て消えます */
    /* 足りなければ -10% とか増やしてください */
    margin-top: -13.5%;
}

@media screen and (max-width: 767px) {
	.story__hero-title {	    
	    /* ロゴ位置: 高さ基準 (20%) */
	    top: 19.5%; 

	}

}

/* ★ スマホだけ「画面いっぱい」にする設定 (現在は無効化中) */
/*
@media screen and (max-width: 767px) {
    .img_bg_01 {
        height: 100vh; 
        height: 100dvh; 
    }
}
*/


/* -----------------------------------
   Common Layout (以下、変更なし)
----------------------------------- */
.top_view img {
    max-width: 200%; 
    width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------------
   S2: SAKURA
----------------------------------- */
.top_section2{
    position: relative;
    margin-top: 8vw;
    height: 86.5vw; 
    z-index: 10;
}
.sakura-left{
    position: absolute;
    left:6%;
    width:57.75%;
    height:100%;
}
.sakura-right{
    position: absolute;
    left:68%;
    width:32%;
    height:100%;
}
.sakura-right-1{
    position: absolute;
    top:7%;
    width: 100%; 
}
.sakura-right-2{
    position: absolute;
    top:34%;
    width: 100%; 
}
.sakura-right-3{
    position: absolute;
    top: 76%;
    width: 93%;
}

/* -----------------------------------
   S3: Blazer
----------------------------------- */
.top_section3{
    position: relative;
    margin-top: 4vw;   
    height: 76.5vw;      
    z-index: 10;
}
.blazer-left{
    position: absolute;
    left: 0%;
    top: 29%;
    width: 44%;
}
.blazer-right{
    position: absolute;
    top: 0%;
    left: 50%;
    width: 51%;
    height: 100%;
}

/* -----------------------------------
   S4: Blazer Men
----------------------------------- */
.top_section4{
    position: relative;
    margin-top: 12.5vw;  
    height: 93.0vw;      
    z-index: 10;
}
.blazer-men{
    position: absolute;
    left:6.1%;
    top:0%;
    width:62%;
    height:100%;
}

/* -----------------------------------
   S5: Mens
----------------------------------- */
.top_section5{
    position: relative;
    margin-top: 5.0vw;   
    height: 64vw;       
    z-index: 10;
}
.mens-left{
    position: absolute;
    left:0%;
    width:57.75%;
    height:100%;
}
.mens-left-1{
    position: absolute;
    bottom: 51%;
    width: 29%;
    left: 48%;
}
.mens-left-2{
    position: absolute;
    bottom: 0%;
    width: 78%;
}
.mens-right{
    position: absolute;
    left: 52%;
    width: 45%;
    height: 100%;
}
.mens-right-1{
    position: absolute;
    top: 0%;
    width: 95%;
}

/* -----------------------------------
   S6: Swiper (Container)
----------------------------------- */
.top_section6{
    position: relative;
    margin-top: 11vw;
    height: 60vw; /* PC */ 
    overflow: hidden; 
    z-index: 10;
}
@media screen and (max-width: 767px) {
    .top_section6 {
        height: 100vw; 
    }
}

/* pt=1, pt=4 (Full) */
body.page-pattern-1 .top_section6 .ssSlider,
body.page-pattern-4 .top_section6 .ssSlider {
    width: 100%;
    height: 100%;
}
body.page-pattern-1 .top_section6 .swiper-slide,
body.page-pattern-4 .top_section6 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
body.page-pattern-1 .top_section6 .swiper-slide img,
body.page-pattern-4 .top_section6 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* pt=2 (Pseudo + Half) */
body.page-pattern-2 .ss-pseudo-full,
body.page-pattern-2 .ssSlider-half {
    position: relative; 
    width: 100%;
    height: 100%;
    background: #fff; 
    display: none; /* JS制御 */
}
body.page-pattern-2 .ss-pseudo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
body.page-pattern-2 .ssSlider-half .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
body.page-pattern-2 .ssSlider-half .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* pt=3 (SlideIn + Half) */
body.page-pattern-3 .ss-pseudo-pt3-wrapper,
body.page-pattern-3 .ssSlider-half {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    display: none; /* JS制御 */
}
body.page-pattern-3 .ss-pseudo-pt3-base {
    position: absolute;
    top: 0;
    width: 50%; 
    height: 100%;
    background-size: cover;
    background-position: center;
}
body.page-pattern-3 .ss-pseudo-pt3-base:nth-child(1) { left: 0%; }
body.page-pattern-3 .ss-pseudo-pt3-base:nth-child(2) { left: 50%; }

body.page-pattern-3 .ssSlider-half .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
body.page-pattern-3 .ssSlider-half .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------
   S7: Knit
----------------------------------- */
.top_section7{
    position: relative;
    margin-top: 8vw;
    height: 127.5vw;
    z-index: 10;
}
.knit-left{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 45%;
    height: 100%;
}
.knit-left-1{
    position: absolute;
    top: 19%;
    width: 97%;
}
.knit-left-2{
    position: absolute;
    right: 2.5%;
    top: 80.5%;
    width: 80%;
}
.knit-right{
    position: absolute;
    left: 46.5%;
    width: 49%;
    height: 100%;
}
.knit-right-1{
    position: absolute;
    top:0%;
    width: 100%; 
}
.knit-right-2{
    position: absolute;
    top: 62.5%;
    width: 70%;
    left: 8.5%;
}

/* -----------------------------------
   S8: Men
----------------------------------- */
.top_section8{
    position: relative;
    margin-top: 3vw;
    height: 66.7vw;
    z-index: 10;
}
.men-1{
    position: absolute;
    top:0%;
    width: 100%;
    left: 0%;
}

/* -----------------------------------
   S9: Mint
----------------------------------- */
.top_section9{
    position: relative;
    margin-top: 10vw;  
    height: 76.5vw;      
    z-index: 10;
}
.mint-left{
    position: absolute;
    left: 22%;
    top: 0%;
    width: 51%;
}
.mint-right{
    position: absolute;
    top: 47%;
    left: 77%;
    width: 15%;
    height: 100%;
}

/* -----------------------------------
   S10: Last
----------------------------------- */
.top_section10{
    position: relative;
    margin-top: 5vw;
    height: 71.0vw;
    z-index: 10;
}
.last-1{
    position: absolute;
    top:0%;
    width: 100%;
    left: 0%;
}

/* ★★★ 追加: Mint発火用ダミーアンテナ ★★★ */
.js-mint-trigger {
    position: absolute;
    top: -300px; 
    left: 0;
    width: 100%;
    height: 1px; 
    pointer-events: none; 
    visibility: hidden; 
}

/* =========================================
   ★ iPhoneで画像が消えるバグ対策 (レイアウト側)
   ========================================= */
.sakura-left, .sakura-right,
.blazer-left, .blazer-right,
.blazer-men,
.mens-left, .mens-right,
.knit-left, .knit-right,
.last-1 {
    /* これがないと、iPhoneで回転した瞬間に消えます */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* =========================================
   ★ iPhoneで画像が消えるバグ対策 (アニメ側)
   ========================================= */
.anim-rotate-y,
.anim-rotate-y-reverse,
.anim-rotate-left,
.anim-flip-up {
    /* これを入れると、描画が安定して消えなくなります */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =========================================
   ★ スマホ専用: 余白を消して全画面にする設定 (揺れ防止版)
   ========================================= */
@media screen and (max-width: 767px) {
    
    /* 1. 枠の高さ: アドレスバーに反応しない「100vh」で固定 */
    .img_bg_01 {
        height: 106.5vh !important;
        /* height: 100dvh !important; ← これが揺れの原因なので削除 */
        min-height: 600px; /* 念のため小さすぎ防止 */
    }

    /* 2. 画像設定 */
    .top_section1 .img_bg_01 > img {
        height: 100% !important;
        object-fit: cover !important;
        
        /* 拡大基準: 下(足元) */
        object-position: center bottom !important; 
        
        /* ★ 重要: アニメーションの軸も「下」に合わせる */
        /* これでズーム中も足元がズレません */
        transform-origin: center bottom !important;
    }
}

/* =========================================
   ★ ハンバーガーメニュー調整 (トップページ限定上書き)
   ========================================= */

/* 1. 本体位置の調整 */
body.page-pattern-1 .c-hamburger-menu {
    /* 元: top: 48px; right: 40px; */
    /* ↓ 少し上に上げて、右端もスマホで見切れにくい位置に調整 */
    /*top: 50px !important;
    right: 50px !important; */
    
		/* ★ サイズ調整 */
    /* 枠の高さを広げると、自動的に線同士の隙間も広がります */
    /*height: 22px !important; /* 元 20px -> 25px に拡大 */
    
    /* もし背景色をつけてボタンっぽく強調するならコメントアウト外す */
    /*
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 6px;
    box-sizing: content-box;
    border-radius: 4px;
    */
}

/* 2. 線の色と太さの調整 */
body.page-pattern-1 .c-hamburger-menu span {
    /* 元: #BDBDB7 (薄グレー) */
    /* ↓ #333 (濃いグレー/黒) にして視認性アップ */
    background-color: #333 !important; 
    
    /* 視認性を上げるため、少し太くしてもいいかも (元: 2px) */
    height: 2.5px !important;
}