/* ===== index only overrides (2025-10-28 unified, fix zoom for DIV/IMG) =====
   目的：
   - ヒーローを 1600x800 / 2:1 比率で固定（比率ボックス）
   - 画像2枚（.a / .b）を確実に交互クロスフェード
   - <div background-image> と <img src> の両方に対応（ドアップ解消）
   - OSの「動きを減らす」を尊重。ただし html.force-motion なら強制再生
====================================================== */

/* --- HERO: 2:1 固定（他の高さ指定に確実に勝つ） --- */
#hero .hero-media.hero-21{
  position: relative !important;
  height: 0 !important;
  padding-top: 50% !important;        /* 2:1 = 高さは幅の50% */
  overflow: hidden !important;
  background: none !important;
  min-height: 0 !important;
  isolation: isolate;
}

/* --- 2枚の画像を全面レイヤー化（DIV/IMG両対応） --- */
#hero .hero-media.hero-21 > .hero-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* ▼ ここがポイント：DIVの background-image に効く指定（ドアップ防止） */
  background-repeat: no-repeat !important;
  background-position: 50% 80% !important; /* 視点を少し下げて落ち着かせる */
  background-size: contain !important;     /* 画像をフルで見せる（2:1なら余白なし） */

  /* ▼ IMGで運用している場合はこちらが効く（両対応） */
  object-fit: contain !important;
  object-position: 50% 40% !important;

  opacity: 0;  /* ← アニメ制御に任せるので !important は付けない */
  will-change: transform, opacity;
}

/* --- アニメ（交互フェードのみ。速度は6s→好みで4s/5s/8sなど） --- */
@keyframes fadeA21   { 0%,35%{opacity:1} 45%,90%{opacity:0} 100%{opacity:1} }
@keyframes fadeB21   { 0%,35%{opacity:0} 45%,90%{opacity:1} 100%{opacity:0} }

/* A面：先に表示開始 */
#hero .hero-media.hero-21 > .hero-img.a{
  animation: fadeA21 12s ease-in-out infinite !important;
  z-index: 1;
}

/* B面：半周期ずらして交互表示（6sなら3s遅延） */
#hero .hero-media.hero-21 > .hero-img.b{
  animation: fadeB21 12s ease-in-out infinite !important;
  animation-delay: 3s;  /* ← これが無いと同相になり“切替なし”に見えることがある */
  z-index: 2;
}

/* --- OSの「動きを減らす」を尊重。ただし html.force-motion が付いていたら動かす --- */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) #hero .hero-media.hero-21 > .hero-img{
    animation: none !important; opacity: 1 !important;
  }
  html:not(.force-motion) #hero .hero-media.hero-21 > .hero-img.b{ opacity: 0 !important; }
}

/* --- ヒーロー下のコピー余白（競合に勝つ） --- */
.hero .content, .hero-copy{
  margin-top: 0 !important;
  padding: 20px 16px 48px !important;
}

/* --- index のプロフィール（profile-mini 構造）中央寄せ --- */
#about .profile-mini{ text-align: center !important; }
#about .profile-mini > h2,
#about .profile-mini > p{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 表本体を内容幅にして中央配置 */
#about .profile-mini > table{
  display: inline-table !important;
  margin: 16px auto 24px !important;
  border-collapse: collapse;
}
#about .profile-mini > table th,
#about .profile-mini > table td{
  text-align: left !important;
  padding: 8px 10px;
}

/* 箱ごと中央・幅を絞る（必要なら数値調整OK） */
#about .container.about > .profile-mini{
  max-width: 760px;
  margin: 0 auto !important;
}
/* === Mobile: ヒーローを少し縦長に === */
@media (max-width: 600px){
  #hero .hero-media.hero-21{
    padding-top: 60% !important;      /* 2:1 → 5:3 で“ちょい縦長” */
    min-height: 0 !important;
  }
  #hero .hero-media.hero-21 > .hero-img{
    background-position: 50% 35% !important;  /* ほんの少し引き気味 */
    object-position: 50% 35% !important;
  }
}

/* さらに小さい端末（iPhone SE 等）向けにもう少しだけ縦長 */
@media (max-width: 400px){
  #hero .hero-media.hero-21{
    padding-top: 66.6667% !important; /* 3:2 */
  }
}
/* === FINAL OVERRIDE: モバイルでヒーローを縦長に（確実に上書き） === */
@media (max-width: 920px){
  :root body #hero .hero-media.hero-21{
    height: 0 !important;
    padding-top: 66.6667% !important;  /* 3:2 に */
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* 画面をもう少し“いっぱい”に見せたいなら cover にする（どちらか1つで） */
  :root body #hero .hero-media.hero-21 > .hero-img{
    /* パターンA：引き気味（黒帯が気にならない前提） */
    background-size: contain !important;
    object-fit: contain !important;
    background-position: 50% 35% !important;
    object-position: 50% 35% !important;
  }
  /* パターンB：黒帯なし優先（トリミング許容ならこっちに切替） */
  /* 
  :root body #hero .hero-media.hero-21 > .hero-img{
    background-size: cover !important;
    object-fit: cover !important;
    background-position: 50% 30% !important;
    object-position: 50% 30% !important;
  }
  */
}

/* 極小端末はさらに少しだけ縦長に（任意） */
@media (max-width: 400px){
  :root body #hero .hero-media.hero-21{
    padding-top: 72% !important;      /* だいぶ縦長に見える */
  }
}