@charset "utf-8";

/* ==========================================================
   MUSASHI JAPAN POP-UP STORE at TOKYO TOWER
   #store-intro 左右画像（MUSASHI_left_02 / MUSASHI_right_02）
   ・縦横比（1013:1197）を維持
   ・どの画面幅でも画像が画面外に押し出されて消えないよう調整
   ※ style.css の .img-fixed / .section-three-column の指定を
     このセクション内だけ上書きします（他ページへの影響なし）
   ========================================================== */

/* 共通：位置ずらし・強制サイズ指定を解除 */
#store-intro .img-fixed,
#store-intro .img-fixed-right {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: auto;
  transform: none;
}

#store-intro .img-fixed img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;            /* HTMLのheight属性で縦に伸びるのを防ぐ */
  min-width: 0;            /* style.css の min-width: 992px を解除 */
  min-height: 0;           /* style.css の min-height: 810px（縦横比崩れの原因）を解除 */
  aspect-ratio: 1013 / 1197;
  object-fit: contain;
  transform: none;         /* translateX(-45%) 等で画面外に出るのを防ぐ */
}


/* ----------------------------------------------------------
   1400px以上：左・中・右の3カラム
   左右の画像はカラム幅いっぱい（＝できるだけ大きく）表示
   ---------------------------------------------------------- */
@media (min-width: 1400px) {
  #store-intro {
    display: flex;
    align-items: center;
  }
  #store-intro > .block-center {
    flex: 0 0 auto;
    width: 100%;
    max-width: 770px;
  }
  #store-intro .block-left,
  #store-intro .block-right {
    position: relative;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ----------------------------------------------------------
   1399px以下：縦並び
   上：MUSASHI_left_02 ／ 中：テキスト ／ 下：MUSASHI_right_02
   ---------------------------------------------------------- */
@media (max-width: 1399px) {
  #store-intro {
    display: block;          /* style.css（1200px以上のflex）を解除 */
  }
  #store-intro > .block-center,
  #store-intro .block-left,
  #store-intro .block-right {
    position: static;
    width: 100%;
    max-width: none;
  }
  #store-intro .block-left,
  #store-intro .block-right {
    padding-left: 15px;
    padding-right: 15px;
  }
  #store-intro .block-left  { padding-top: 60px; }
  #store-intro .block-right { padding-bottom: 60px; }

  /* 縦長画像のため、大きくなりすぎないよう最大幅を指定して中央配置 */
  #store-intro .img-fixed {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  #store-intro .block-left  { padding-top: 36px; }
  #store-intro .block-right { padding-bottom: 36px; }
}