/* =====================================================================
   TOPページ
   PICKUP（スライダー）/ RECENT / WORLD / JAPAN
   寸法は Figma top-pc / top-sp の実測に合わせている。
   ===================================================================== */

/* JAPAN の下端からフッターまで 120px（セクションの下余白96px＋24px） */
.l-main--top {
  padding-bottom: var(--space-24);
}

/* ---------------------------------------------------------------
   セクションの骨組み
   PC：見出し（左）＋ 番号 or 一覧をみる（右） / 下にカード
   SP：見出し → カード → 一覧をみる（PICKUPだけ 見出し → 番号 → カード）
   --------------------------------------------------------------- */

.p-top-section {
  padding-bottom: var(--space-96);
}

/* 2つ目以降のセクションの上に、左右余白の内側だけ点線を引く */
.p-top-section + .p-top-section::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--space-64);
  background: repeating-linear-gradient(90deg, var(--color-line) 0 3px, transparent 3px 6px);
}

.p-top-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head aside"
    "body body";
  align-items: center;
  column-gap: var(--space-24);
  row-gap: var(--space-24);
}

/* WORLD / JAPAN だけ見出しとカードの間が 32px（Figma準拠） */
.p-top-section--grid .p-top-section__inner {
  row-gap: var(--space-32);
}

.p-top-section__head  { grid-area: head; }
.p-top-section__aside { grid-area: aside; }
.p-top-section__body  { grid-area: body; }

.p-top-section__body--stack {
  display: flex;
  flex-direction: column;
  gap: 28px; /* Figma実測（RECENTのカード間） */
}

.p-top-section__body--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40);
}

/* ---------------------------------------------------------------
   PICKUP スライダー
   番号は Alien Block の 24px。選択中はロゴと同じ薄い青。
   切り替えの動きは top.js（Web Animations API）が担当する。
   全記事を同じ場所に重ねておき、表示中以外は見えなくしている。
   こうすると切り替えの途中で新旧を重ねて動かせるうえ、枠の高さが一番高い記事に
   固定されるので、切り替えのたびに下の段がガクッと動かない。
   --------------------------------------------------------------- */

.p-top-section--pickup .p-top-section__body {
  display: grid;
}

.p-pickup__slide {
  grid-area: 1 / 1;
}

.p-pickup__slide:not(.is-current):not(.is-leaving) {
  visibility: hidden;
}

/* 入ってくる記事を、出ていく記事の上に重ねる */
.p-pickup__slide.is-current {
  z-index: 1;
}

/* 動かす要素をあらかじめ別レイヤーにしておき、動き始めの1コマ目で引っかからないようにする */
.p-pickup__slide {
  will-change: opacity;
}

.p-pickup__slide .c-card__img {
  will-change: scale;
}

.p-pickup__nav {
  display: flex;
  flex-wrap: wrap; /* 幅320pxの端末では8個が1行に入らないので折り返す */
  gap: var(--space-8) var(--space-24);
}

.p-pickup__dot {
  width: 18px;
  color: var(--color-line);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-none);
  transition: color var(--duration) var(--easing);
}

.p-pickup__dot:hover,
.p-pickup__dot.is-current {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------
   タブレット幅：2列のカードは1列にする（1列あたりの幅が狭すぎるため）
   --------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1100px) {
  .p-top-section__body--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------
   SP（Figma top-sp）
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  .l-main--top {
    padding-bottom: var(--space-40);
  }

  .p-top-section {
    padding-bottom: var(--space-48);
  }

  .p-top-section--pickup {
    padding-bottom: var(--space-40);
  }

  .p-top-section + .p-top-section::before {
    margin-bottom: var(--space-40);
  }

  .p-top-section__inner,
  .p-top-section--grid .p-top-section__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "body"
      "aside";
    row-gap: var(--space-32);
  }

  .p-top-section--pickup .p-top-section__inner {
    grid-template-areas:
      "head"
      "aside"
      "body";
    row-gap: var(--space-24);
  }

  .p-top-section__body--stack,
  .p-top-section__body--grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  /* WORLD / JAPAN はSPでは3件まで（Figma準拠） */
  .p-top-section__body--grid > .c-card:nth-child(n + 4) {
    display: none;
  }

  /* SPは画面の端に余白を取りつつ、番号は必ず1行。間隔は幅に合わせて自動で詰まる */
  .p-pickup__nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-8);
    padding-inline: var(--space-16);
  }

  /* 指で押しやすいよう、見た目は変えずに上下の当たり判定を広げる（18×24 → 18×44） */
  .p-pickup__dot {
    margin-block: -10px;
    padding-block: 10px;
  }

  /* 一覧をみる：カードの下に横幅いっぱい（Figma：303×40を中央） */
  .p-top-section__aside:has(.c-button) {
    justify-self: stretch;
    padding-inline: var(--space-16);
  }
}

/* ---------------------------------------------------------------
   オープニング（TOPの初回のみ）
   ロゴが現れる → ゆっくりまばたき → ロゴが拡大して色で満ち、すっと引いて本編へ。
   出すかどうかは header.php のスクリプトが判定し、html に .is-opening を付ける
   --------------------------------------------------------------- */

.p-opening {
  display: none;
}

.is-opening .p-opening {
  position: fixed;
  inset: 0;
  z-index: var(--z-opening);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-bg);
}

/* 演出中は下のページを動かさない */
.is-opening body {
  overflow: hidden;
}

.p-opening__tow {
  position: relative;
  display: grid;
  place-items: center;
  will-change: transform; /* 動かす前に別レイヤーにしておき、動き出しで引っかからないように */
}

.p-opening .c-logo,
.p-opening__plane {
  will-change: transform, opacity;
}

/* オープニング中はFVを伏せておき、終わった瞬間（is-opening が外れたとき）にふわっと出す。
   CSSのトランジションで戻すので、途中で何かあっても「見えたまま」に落ち着く */
.l-ticker,
.l-main--top {
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
}

.is-opening .l-ticker,
.is-opening .l-main--top {
  opacity: 0;
  transform: translateY(10px);
}

.p-opening .c-logo {
  width: min(200px, 50vw); /* PCは200px、狭い画面（400px未満）は画面幅の半分 */
  height: auto;
  /* JSが動き出すまでの1コマだけロゴが見えて「チカッ」とするのを防ぐため、
     最初から消しておく（top.js のアニメーションが opacity 1 にして保持する） */
  opacity: 0;
}

/* 常設のまばたき（6.5秒ごと）はオープニング中だけ止める */
.p-opening .c-eye {
  animation: none;
}

/* ロゴを運ぶヒコーキ。元データは機首が右向きなので、左へ飛ぶときは左右反転する */
.p-opening__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  margin: -12px 0 0 -28px;
  opacity: 0;
}

.p-opening__plane svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: scaleX(-1);
}