@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(160px, 18vw);
	  top: 46%;
	  bottom: auto;
	  left: 22%;
	  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% とか増やしてください */

}

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

	}

}

/* ★ スマホだけ「画面いっぱい」にする設定 (現在は無効化中) */
/*
@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: 87vw;
  z-index: 10;
}

.sec2-img1{
position: absolute;
  left: 58%;
  width: 42%;
}

.sec2-img2{
position: absolute;
  left: 0%;
  width: 41.5%;
  top: 46vw;
}

.sec2-img3{
	position: absolute;
	  top: 69.8vw;
	  width: 29%;
	  left: 50%;
}

/* -----------------------------------
   S3: Blazer
----------------------------------- */
.top_section3{
    position: relative;
    margin-top: 4vw;   
    height: 90.0vw;      
    z-index: 10;
}
.sec3-img1{
		position: absolute;
		left: 5%;
	  width: 59%;
	  height: 100%;
	  top: 2%;
}

/* -----------------------------------
   S4: Blazer Men
----------------------------------- */
.top_section4{
    position: relative;
    height: 67.0vw;      
    z-index: 10;
    margin-top: 11.5vw;
}
.sec4-img1{
		position: absolute;
		left: 0%;
	  width: 100%;
	  height: 100%;
}

/* -----------------------------------
   S5: Mens
----------------------------------- */
.top_section5{
    position: relative;
    margin-top: 12vw;
    height: 134vw;
    z-index: 10;
}
.sec5-img1{
		position: absolute;
		left: 5%;
	  width: 90%;
	  height: 100%;
}

/* -----------------------------------
   S6: Swiper (Container)
----------------------------------- */

.top_section6{
    position: relative;
    margin-top: 9.5vw;
    height: 64.5vw;
    z-index: 10;
}
.sec6-img1{
position: absolute;
  left: 14%;
  width: 43.4%;
  height: 100%;
}

/* -----------------------------------
   S7: Knit
----------------------------------- */
.top_section7{
    position: relative;
    margin-top: 7vw;
    height: 66.2vw;
    z-index: 10;
}

/* -----------------------------------
   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%;
}

/* =========================================
   ★ 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: 2px !important;
}

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

    /* ★ 追加: 白のドロップシャドウで背景写真と同化するのを防ぐ */
    box-shadow: 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 0.8) !important;
}

/* =========================================
   ★ ハンバーガーメニュー追加修正 (縁取り＆FV強制表示)
   ========================================= */

/* 1. 線の色と太さ、くっきり縁取り（明るめグレー仕様） */
body.page-pattern-1 .c-hamburger-menu span {
    background-color: #333 !important; 
    height: 2px !important;
    /* ぼかし0で上下左右に1pxの明るいグレー(#eee)の影をつけて縁取り化 */
    box-shadow: 
        -1px -1px 0 #eee,
         1px -1px 0 #eee,
        -1px  1px 0 #eee,
         1px  1px 0 #eee !important;
}

/* 2. SP版の初期非表示（FVで見えない）対策 */
@media (max-width: 1024px) {
    /* スクロール連動の非表示を無効化し、FV時点から強制表示＆最前面へ */
    body.page-pattern-1 .c-hamburger-menu {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 9999 !important;
    }
}
@media (max-width: 768px) {
    /* 14pxに潰れるのを阻止し、PC・タブレット時と同じ高さをキープ */
    body.page-pattern-1 .c-hamburger-menu {
        height: 20px !important; /* ※元々24pxなどに広げていた場合はその数値に合わせてください */
    }
}