/* pages/top.css
   トップページ固有（p-top-）
   骨組みや部品は components.css にあり、ここにはトップだけの調整を書く */

/* 見出しの大きさは --fs-h1（clamp(32px, 4vw, 54px)）を上限にして、
   H1の幅（cqw）に1行目が収まる大きさまで自動で縮める。どの画面幅でも行が折れない。
   2〜3行目（PC・タブレット）は、1行目の84%の大きさ */
.p-top-hero__title {
  --hero-fs: clamp(18px, min(var(--fs-h1), 7.9cqw), 54px);
  /* H1自身の幅を cqw の基準にするための指定。幅が中身で決まる場所（flex の中など）では幅が0になるので、
     共通部品（c-hero__title）には付けず、幅が決まっているトップのヒーローだけに付ける */
  container-type: inline-size;
}

/* cqw（コンテナの幅の単位）に対応していないブラウザ（Safari 15 以前など）では、上の --hero-fs が無効になって文字が小さくなる。
   そこで、H1の幅を画面幅から計算して、同じ大きさに近づける（H1の幅 × 7.9%）。
     SP        H1の幅 = 画面幅 - 40px（左右の余白 20px）          → 7.9vw - 3.2px
     タブレット H1の幅 = 画面幅 - 64px（左右の余白 32px）          → 7.9vw - 5px
     PC        H1の幅 = 紙色の文字の面（幅680px）- 左右の余白 44px×2 = 592px 固定 → 592px × 7.9% = 46.8px（--fs-h1 は 1100px で 44px なので、小さいほうを使う） */
@supports not (width: 1cqw) {
  .p-top-hero__title {
    --hero-fs: clamp(18px, min(var(--fs-h1), calc(7.9vw - 3.2px)), 54px);
  }

  @media (min-width: 768px) {
    .p-top-hero__title {
      --hero-fs: clamp(18px, min(var(--fs-h1), calc(7.9vw - 5px)), 54px);
    }
  }

  @media (min-width: 1100px) {
    .p-top-hero__title {
      --hero-fs: min(var(--fs-h1), 46.8px);
    }
  }
}

.p-top-hero__title-main {
  display: block;
  font-size: var(--hero-fs);
}

.p-top-hero__title-sub {
  display: block;
  margin-top: .3em;
  font-size: calc(var(--hero-fs) * .84);
}

/* 「選ばれる」に朱の下線 */
.p-top-hero__mark {
  text-decoration-line: underline;
  text-decoration-color: var(--c-accent-bright);
  text-decoration-thickness: .14em;
  text-decoration-skip-ink: none;
  text-underline-offset: .12em;
}

/* ヒーロー：今のサイトの制作物（動画のサムネイル）を「壁」にして、横幅いっぱいに大きく使う。
   壁は、サムネイルを5列に並べて、壁ごと斜めに傾けた飾り（p-top-hero__wall）。傾きは --wall-angle の1つだけで変えられる（向きを変えるときは正負を入れ替える）。
   PC（1100px以上）は壁を背景いっぱいに敷き、その左に紙色の文字の面（p-top-hero__panel）を重ねる。
   文字は不透明な紙色の面の上にだけ置くので、壁のどこに重なっても読める（壁を暗くするフィルターは使わない）。
   ヒーローの高さは文字の面で決まり、壁は枠いっぱいに広げて切り抜く（画像の読み込み前後で高さが変わらない）。
   タブレット・SP は、壁の帯（SP は 4:3、タブレットは 2:1 で高さ 440px まで）→ 文字の順に縦に積む。
   共通部品の c-hero は上下の余白を持つので、壁を端まで伸ばすために 0 に戻し、余白は文字の側（p-top-hero__inner）に持たせる */
.p-top-hero {
  padding-block: 0;
}

.p-top-hero__media {
  --wall-angle: -45deg;
  --wall-cell: 36vw;
  --wall-gap: 2vw;
  --wall-flow: 64s;
  --wall-item: calc(var(--wall-cell) * .5625 + var(--wall-gap));
  --wall-width: calc(var(--wall-cell) * 5 + var(--wall-gap) * 4);
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-paper);
}

/* 壁の大きさ：サムネイル1枚の幅（--wall-cell）と隙間（--wall-gap）を画面の幅（vw）で決める（SP 36vw、タブレット 30vw、PC 26vw）。
   1枚ぶんの縦の長さ（--wall-item）は、高さ（幅の 9/16）+ 隙間。
   壁（傾ける前）は、横が5列ぶん（--wall-width）、縦が8枚ぶん（--wall-item の8倍）。45度に傾けた壁がヒーローの四隅まで埋まるには、
   傾ける前の壁の縦と横が、ヒーローの（幅 + 高さ）÷ √2 より大きければよい（PC 1440px では 1,499px に対して、横 1,929px・縦 1,800px。
   SP・タブレットは、さらに余裕がある）。スクロールで拡大するときは、中心から広がるので、足りなくなることはない。
   列は、同じ9枚を2回続けた長さ（18枚）で、半分（9枚ぶん）だけ動くと、つなぎ目なく元に戻る。動いている間、列は壁の縦（8枚ぶん）をいつも覆う
   （列の上のずれ margin-top は 0〜−0.75 枚ぶん。止まったときに列の継ぎ目がそろわないためのずれ）。
   流れの速さは、列の半分の長さを --wall-flow（SP 64秒・タブレット 80秒・PC 96秒。どれも60秒以上）で動く。列ごとに少しずつ変えて（最大 1.2 倍遅く）、
   偶数番目の列は逆向きに流す。傾けたあとの速さは、画面の幅 1440px で毎秒 21px ほど。
   動きを減らす設定では、base.css が animation を止めるので、傾いたまま止まる。JS が動かなくても、傾いた壁は表示される（拡大だけ JS） */
.p-top-hero__wall {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}

.p-top-hero__wall-tilt {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: var(--wall-gap);
  width: var(--wall-width);
  height: calc(var(--wall-item) * 8);
  margin: calc(var(--wall-item) * -4) 0 0 calc(var(--wall-width) / -2);
  transform: rotate(var(--wall-angle));
}

.p-top-hero__wall-col {
  flex: none;
  width: var(--wall-cell);
  animation: p-top-hero-flow var(--wall-flow) linear infinite;
}

.p-top-hero__wall-col:nth-child(even) {
  animation-direction: reverse;
}

.p-top-hero__wall-col:nth-child(2) {
  margin-top: calc(var(--wall-item) * -.5);
  animation-duration: calc(var(--wall-flow) * 1.12);
}

.p-top-hero__wall-col:nth-child(3) {
  margin-top: calc(var(--wall-item) * -.25);
  animation-duration: calc(var(--wall-flow) * 1.06);
}

.p-top-hero__wall-col:nth-child(4) {
  margin-top: calc(var(--wall-item) * -.75);
  animation-duration: calc(var(--wall-flow) * 1.2);
}

.p-top-hero__wall-col:nth-child(5) {
  margin-top: calc(var(--wall-item) * -.4);
  animation-duration: calc(var(--wall-flow) * 1.02);
}

.p-top-hero__wall-col > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--wall-gap);
  object-fit: cover;
  background: var(--c-line-soft);
}

@keyframes p-top-hero-flow {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -50%, 0);
  }
}

/* ヒーローが画面の外にあるあいだは、流れを止める（main.js が is-paused を付ける。CPU・電池の節約） */
.p-top-hero__media.is-paused .p-top-hero__wall-col {
  animation-play-state: paused;
}

/* 添え書き：画像の右下に、不透明な紙色の面つきの小さなラベルとして置く。右端はコンテナの右端にそろえる。
   PC では、文字の面を入れるコンテナ（p-top-hero__inner）が同じ範囲に重なるので、z-index で添え書きを上に出す
   （コンテナの下に隠れると、文字の選択ができず、コントラストの自動検査も背景を判定できない） */
.p-top-hero__caption {
  position: absolute;
  z-index: 1;
  right: max(var(--container-pad), env(safe-area-inset-right, 0px), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  bottom: 12px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  background: var(--c-paper);
  border-radius: var(--radius-s);
}

.p-top-hero__inner {
  padding-block: 32px 64px;
}

@media (min-width: 768px) {
  .p-top-hero__media {
    --wall-cell: 30vw;
    --wall-gap: 1.4vw;
    --wall-flow: 80s;
    aspect-ratio: 2 / 1;
    max-height: 440px;
  }

  .p-top-hero__inner {
    padding-block: 48px 80px;
  }
}

@media (min-width: 1100px) {
  .p-top-hero__media {
    --wall-cell: 26vw;
    --wall-gap: 1vw;
    --wall-flow: 96s;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    aspect-ratio: auto;
    max-height: none;
  }

  .p-top-hero__caption {
    bottom: 20px;
  }

  .p-top-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    padding-block: 48px;
  }

  .p-top-hero__panel {
    flex: none;
    width: 680px;
    padding: 44px;
    background: var(--c-paper);
  }
}

@media (max-width: 767.98px) {
  /* SPでは1行目だけを大きくし、2〜3行目は20pxの一続きの文に見せる */
  .p-top-hero__title-sub {
    margin-top: 14px;
    font-size: 20px;
    line-height: 1.7;
  }

  .p-top-hero__br {
    display: none;
  }

  /* 添え書き：スマホで 12px → 13px */
  .p-top-hero__caption {
    font-size: 13px;
  }
}

.p-top-stats {
  padding-block: 56px;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

@media (max-width: 767.98px) {
  .p-top-stats {
    padding-block: 12px;
  }
}

/* 「ググる」から「AIに訊く」へ：データの一覧に、動画の操作パネルに触れる手の写真（共通部品の c-photo-frame）を添える。
   SP・タブレット（899px以下）は縦に積み、写真を上に置く（16:10。タブレットは 2:1）。900px以上は左に写真、右にデータの一覧の2列で、
   写真の枠は一覧の高さに合わせて伸ばす（上下の端がそろう）。
   2列にすると一覧の幅が狭くなるので、共通部品 c-data-list の c-data-list--source-below で、出典を説明の下に回す */
.p-top-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.p-top-why__photo {
  --photo-ratio: 16 / 10;
  --photo-pos: 46% 50%;
}

@media (min-width: 768px) and (max-width: 899.98px) {
  .p-top-why__photo {
    --photo-ratio: 2 / 1;
  }
}

@media (min-width: 900px) {
  .p-top-why__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  .p-top-why__photo {
    --photo-ratio: auto;
    align-self: stretch;
    min-height: 280px;
  }
}

.p-top-why__steps {
  margin-top: 64px;
}

.p-top-why__callout {
  margin-top: 48px;
}

@media (max-width: 767.98px) {
  .p-top-why__steps {
    margin-top: 40px;
  }

  .p-top-why__callout {
    margin-top: 32px;
  }
}

.p-top-flow__arrow {
  color: var(--c-accent);
}

/* つくる → 計測する → 改善する：カードにせず、3列の文章にする。各列の上に写真（共通部品の c-photo-frame。比率は画面の幅で決め直す）を置き、その下に細い罫線を引いて、
   順番は ol と、本文と同じ書体の小さな数字（CSS カウンタ）で示す。本文は句ごとに折り返さない（u-nowrap）ので、最も長い句（256px）が列に収まる
   900px 以上を3列にし、899.98px 以下は縦に積む（SP は写真を 16:9、タブレットは 2:1、3列のときは 3:2 に切り抜く）。
   数字は CSS の ::before で出すので、HTML の順（写真 → 見出し → 本文）の先頭に来てしまう。写真を order で先頭に戻して、数字を写真の下に置く */
.p-top-flow__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  counter-reset: p-top-flow;
}

.p-top-flow__item {
  display: flex;
  flex-direction: column;
  counter-increment: p-top-flow;
}

.p-top-flow__photo {
  order: -1;
  margin-bottom: 20px;
}

.p-top-flow__item::before {
  content: counter(p-top-flow);
  content: counter(p-top-flow) / "";
  display: block;
  margin-bottom: 8px;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-ink);
}

.p-top-flow__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-ink-2);
}

@media (min-width: 768px) {
  .p-top-flow__photo {
    --photo-ratio: 2 / 1;
  }
}

@media (min-width: 900px) {
  .p-top-flow__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }

  .p-top-flow__photo {
    --photo-ratio: 3 / 2;
  }
}

@media (min-width: 1100px) {
  .p-top-flow__list {
    column-gap: 40px;
  }
}

/* ノウハウ：記事ごとの写真を入れる。900px以上は、1本目の記事（共通部品の c-post-card--lead）を2列ぶん（高さは2行ぶん）の大きな写真にして、
   残り2本を右の列に重ねる（3つ同じ大きさに並べない）。写真は、左の記事の高さが右の2本と同じになるように伸びる（c-post-card--lead の決まり）。
   899px以下は1列で、1本目だけ大きな写真（16:9）、残りは左に写真・右に題名の横並び（共通部品 c-post-card--row-narrow）。
   横並びの写真は、共通部品の 1.91:1 では低すぎて何の写真か分からないので、c-post-card--row-4x3 を並べて付けて 4:3 にする。
   ここには、1本目の項目を2列×2行に広げる置き方だけを書く */
@media (min-width: 900px) {
  .p-top-blog__featured {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
}