/* =========================================================
   englishTOP only CSS (HERO + PICKUP)
========================================================= */

.is-english-top .swiper-wrapper > a.swiper-slide{
  display:block;
}

/* -------------------------
   HERO（CSS marquee：途切れない版）
   ※ JSでスライドを1回複製して「2セット」にします
------------------------- */

/* 重要：HEROでは切らない（右端が欠ける原因になる） */
.is-english-top .js-en-hero{
  overflow: visible;
}

/* 表示枠は carousel 側で隠す（ここで見せる範囲を決める） */
.is-english-top .carousel__img{
  overflow: hidden;
}

/* a.swiper-slide をブロック化（崩れ防止） */
.is-english-top .js-en-hero .swiper-wrapper > a.swiper-slide{
  display: block;
}

/* 横一列に並べる */
.is-english-top .js-en-hero .swiper-wrapper{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: enHeroMarquee 80s linear infinite; /* 速度は好みで */
}

/* それぞれのカード幅は中身に任せる */
.is-english-top .js-en-hero .swiper-slide{
  flex: 0 0 auto;
}

/* ホバーで止める（必要なら） */
.is-english-top .js-en-hero:hover .swiper-wrapper{
  animation-play-state: paused;
}

/* 2セット分ある前提で -50% */
@keyframes enHeroMarquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

@media screen and (max-width: 768px){
  .is-english-top .js-en-hero .slide{
    width: 24rem;   /* ← 好みで調整（14〜18remくらいが使いやすい） */
  }
}

/* =========================================================
   PICKUP（日本語TOPと同サイズ）
========================================================= */

/* フルブリード（左の背面で動かす） */
.is-english-top #pick-up-contents{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden; /* 背面部分はここで切る */
}

/* 見出し位置（日本語TOPと同じ） */
.is-english-top #pick-up-contents h2{
  margin:0 0 2.2vw 5.56vw;
}

/* 中身は枠内（日本語TOPの開始位置） */
.is-english-top #pick-up-contents .pick-up-contents__list{
  padding-left:5.56vw;
  padding-right:5.56vw; /* 右の見切れ余白 */
  overflow:visible;
}

/* Swiper本体は影・見切れを出す */
.is-english-top #pick-up-contents .js-en-pickup{
  overflow:visible;
}

.is-english-top #pick-up-contents .js-en-pickup .swiper-wrapper{
  display:flex;
  flex-wrap:nowrap;
  width:max-content !important;
  transition-timing-function:linear !important;
}

.is-english-top #pick-up-contents .swiper-wrapper .swiper-slide{
  width:auto !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:block !important;
}


.is-english-top #pick-up-contents .js-en-pickup .swiper-slide{
  flex:0 0 auto !important;
  width:18vw !important;
  max-width:36rem;
}

.is-english-top #pick-up-contents .js-en-pickup .slide-title{
    font-size:1rem !important;
}

@media (max-width:768px){
  .is-english-top #pick-up-contents .js-en-pickup .swiper-slide{
    width:12rem !important;
    max-width:none;
  }
}

/* 画像（高さ0対策） */
.is-english-top #pick-up-contents .img-cover{
  position:relative;
  width:100%;
  height:17.57vw;
  overflow:hidden;
}
@media (max-width:768px){
  .is-english-top #pick-up-contents .img-cover{
    height:38.46vw;
  }
}
.is-english-top #pick-up-contents .img-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 英語TOPだけ：前面化してるレイヤーを無効化＆bodyの層に戻す */
body.is-english-top #top,
body.is-english-top #firstView,
body.is-english-top #pick-up-contents{
  position: relative;
  z-index: 0;
}

/* Swiper系が transform 等で前面化してる時の保険 */
body.is-english-top .js-en-hero,
body.is-english-top .js-en-pickup,
body.is-english-top .swiper,
body.is-english-top .swiper-wrapper,
body.is-english-top .swiper-slide{
  z-index: 0;
}

/* bodyの左10pxライン領域に入らないように、英語TOPだけ“クリップ” */
body.is-english-top #top{
  overflow-x: clip; /* 古い環境なら hidden でもOK */
}