/* =========================================================
   トップ ヒーローの内容違い2種（index_cast.html / index_banner.html 専用）
   現行トップ(index.html)には非影響。差し替えるのは「大ロゴ＋花」位置の要素のみ。
   ========================================================= */

.hero_grid,
.hero_banner{
  clip-path:inset(100% 0 0);
  animation:heroLogoReveal .7s cubic-bezier(.33,0,.2,1) both;
  animation-delay:1s;
}
@media (prefers-reduced-motion:reduce){
  .hero_grid,
  .hero_banner{clip-path:none;animation:none;}
}

/* ===== 女性ver：セラピスト写真グリッド（5列×2行） ===== */
.hero_grid{
  position:absolute;
  left: 282px;
  top:115px;
  width: 45%;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}
.hero_grid_item{
  position:relative;
  aspect-ratio:253 / 378;
  overflow:hidden;
  background:#111;
}
.hero_grid_item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  animation:heroGridToneA 6s ease-in-out infinite;
}
.hero_grid_item:nth-child(even) img{
  animation-delay:-3s;
}
@keyframes heroGridToneA{
  0%,40%   {filter:grayscale(0);}
  50%,90%  {filter:grayscale(1);}
  100%     {filter:grayscale(0);}
}
@media (prefers-reduced-motion:reduce){
  .hero_grid_item img{animation:none;filter:grayscale(0);}
}

/* ===== 女性ver・3枚（index_cast3.html） =====
   10枚版(.hero_grid)の指定をそのまま継承し、列数を3にするだけ。
   幅45%を3列で分けるので1枚が大きくなり、比率(253:378)と
   レスポンシブ時の幅の追従も10枚版と共通になる。
   位置だけ、1枚が大きくなったぶん下げる（1201以上のみ。それ未満は10枚版と同じ） */
.hero_grid.hero_grid3{
  grid-template-columns:repeat(3,1fr);
}

/* ★デザイナー調整用（1201px以上）★
   3枚版の位置と大きさはこの3つだけで決まる。ここを触れば3枚版だけが変わり、
   10枚版(index_cast.html)には影響しない。
   （left/width は共通の .hero_grid にも同じ値があるが、そちらを触ると10枚版も動くため、
     調整用にこちらへ明示している）
     left  … 左端からの位置
     top   … 上端からの位置
     width … 3枚ぶんの合計幅。ヒーロー幅に対する%。1枚の大きさはこの1/3
   写真の比率(253:378)は .hero_grid_item の aspect-ratio で固定。 */
@media (min-width:1201px){
  .hero_grid.hero_grid3{
    left:259px;
    top:144px;
    width:48%;
  }
}

/* ===== バナーver：自動スライダー（3枚フェード＋ドット） ===== */
.hero_banner{
  position:absolute;
  --banner-left:min(11.510vw, calc(20.42vw - 171px));
  left: 236px;
  top:121px;
  width: 50%;
  z-index:2;
}
.hero_banner_slides{
  position:relative;
  width:100%;
  aspect-ratio:1000 / 500;
}
.hero_banner_slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease;
}
.hero_banner_slide.is_active{opacity:1;}
.hero_banner_dots{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:16px;
}
.hero_banner_dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  padding:0;
  border:0;
  transition:background .3s ease;
}
.hero_banner_dot.is_active{background:#000;}
@media (prefers-reduced-motion:reduce){
  .hero_banner_slide{transition:none;}
}

/* ===== モバイル(≤768)：左右h1ぶんの余白で中央寄せ、svh上限でキャッチとの被り回避 ===== */
@media (max-width:768px){
  .hero_grid{
    left:0;
    right:0;
    margin-inline:auto;
    width:min(674px, 100%, calc(88svh - 190px));
    top:105px;
  }
  .hero_banner{
    left:0;
    right:0;
    margin-inline:auto;
    width:min(674px, 100%, calc(105.6svh - 332px));
    top:112px;
  }
}

/* ===== 769〜1200：左端をh1に揃え、右はナビ手前まで。縦が低い時はvh上限で被り回避 ===== */
@media (min-width:769px) and (max-width:1200px){
  .hero_grid{
    left:6.146%;
    width:min(87.708%, calc(121.07vh - 215px), calc(93.854vw - var(--navw) - 56px));
    top:124px;
  }
  .hero_banner{
    left:6.146%;
    width:min(87.708%, calc(144.7vh - 320px), calc(93.854vw - var(--navw) - 56px));
    top:124px;
  }
}