/* pages/ai-search.css
   AI検索支援ページ（ai-search.html）固有（p-ais-）
   骨組みや部品は components.css にあり、ここにはこのページだけの図と調整を書く。
   c- のクラスの中身は上書きしない（同じ要素に p-ais- のクラスを並べて付け足すだけ）。
   色・書体・角丸は base.css のトークンだけを使う。影・枠線は付けない。実画面は、枠（c-screen）の中に、画像が届くまで格子柄のタイル（c-tile）を置く
   （月次レポート。HTML 側に <!-- 差し替え待ち --> を付けてある。10字を超える題名は c-tile__title--long）。
   ヒーローの枠（c-screen）には、制作物の画面が届くまで、作業フォルダの写真（photo/thumbnail-wall.jpg）を仮に置いている（同じく <!-- 差し替え待ち -->）。
   「4つのアプローチ」の4枚と「3つの独自アドバンテージ」の3枚の写真は共通部品の c-feature-card__media（タブレットで3枚目を横並びにする c-feature-card--row-tab も同じ）で、このファイルには書かない。
   METHOD の「ディープインタビュー」の写真は、共通部品の c-photo-frame で、墨の面への置き方だけ、このファイルに書く（p-ais-method__source・__photo・__caption）。
   メディアクエリは従来の書き方だけ（境界は 767.98px / 768px / 1099.98px / 1100px）。アニメーションは使わない。 */


/* H1 は3行（「御社の強みを、AIが」「「唯一の正解」として」「推奨する仕組みを。」）。どの行も u-nowrap で折り返さないので、
   最長の行（「唯一の正解」として）が 320px の端末（H1 の幅 280px）でも収まる大きさにする（画面幅の 8.2%＝320px で約 26px）。
   上限は --fs-h1（clamp(32px, 4vw, 54px)）なので、414px 以上では共通の大きさのまま */
.p-ais-hero__title {
  font-size: clamp(24px, min(var(--fs-h1), 8.2vw), 54px);
}

/* DATA の3つのカード（リスト・リスト・グラフ）は c-feature-card（c-card と組み合わせた説明カード）を使い、中身だけここで作る。
   PC は3列（左2つがリスト、右がグラフ）、SP は1列。タブレットは2列で、グラフのカードは下に全幅
   （一覧に --card-grid-cols-tab: 2、グラフの項目に c-card-grid__item--full-tab を付ける。HTML 側の指定で、このファイルには書かない） */

/* 番号つき・記号つきのリスト。左端の番号・記号は absolute で置き、文言は普通の行として折り返す */
.p-ais-rank {
  counter-reset: p-ais-rank;
}

.p-ais-rank > li,
.p-ais-marks > li {
  position: relative;
  padding: 10px 0 10px 40px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid var(--c-line-soft);
}

.p-ais-rank > li:last-child,
.p-ais-marks > li:last-child {
  border-bottom: 0;
}

.p-ais-rank > li {
  counter-increment: p-ais-rank;
}

/* 順位：丸や塗りは使わず、等幅の数字だけ。1位だけ小さい朱の文字（--c-accent-text） */
.p-ais-rank > li::before {
  content: counter(p-ais-rank);
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-ink-2);
}

.p-ais-rank > li:first-child::before {
  color: var(--c-accent-text);
}

/* 「（首位不動）」などの補足 */
.p-ais-note {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-ink-2);
}

/* ◎ ○ × の記号。小さい朱の文字なので --c-accent-text。×（読まれない）の行は文字も灰色にして、効かない項目だと分かるようにする */
.p-ais-mark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--c-accent-text);
  transform: translateY(-50%);
}

.p-ais-marks > .p-ais-marks__off {
  font-weight: 400;
  color: var(--c-ink-3);
}

.p-ais-marks__off .p-ais-mark {
  font-weight: 400;
  color: var(--c-ink-3);
}

/* カードの下端にそろえる出典（2枚のカードで、出典の行が同じ高さに並ぶ。c-data-list__source と同じ大きさ） */
.p-ais-source {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-ink-3);
}

/* グラフの見出しの「40.8%」。見出し（20px・SP 18px）の中の小さい朱の文字なので --c-accent-text */
.p-ais-em {
  color: var(--c-accent-text);
}

/* 棒グラフ（HTML/CSS）。2本（1,000回未満 40.8% と 1,000回以上 59.2%。合わせて 100%）。棒の長さは --w（許可済みの変数）で、
   100% で枠いっぱい。「1,000回未満」だけ朱、ほかは墨の灰。角丸は 2px、影は付けない */
.p-ais-bars {
  display: grid;
  gap: 28px;
  margin-top: 10px;
  margin-bottom: 0;
}

/* PC は棒が2本だけなので、隣のカードに合わせて伸びたカードの残りの高さの中で上下中央に置く
   （1099px 以下はカードが中身の高さなので、見出しとの間は共通部品と同じ 10px のまま） */
@media (min-width: 1100px) {
  .p-ais-bars {
    margin-top: auto;
    margin-bottom: auto;
  }
}

.p-ais-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
}

.p-ais-bar__label,
.p-ais-bar__value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink-2);
}

.p-ais-bar__track {
  grid-column: 1 / -1;
  display: block;
  height: 12px;
  overflow: hidden;
  background: var(--c-paper);
  border-radius: var(--radius-s);
}

.p-ais-bar__fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--c-ink-3);
  border-radius: var(--radius-s);
}

.p-ais-bar--top .p-ais-bar__label {
  color: var(--c-ink);
}

/* 大きい数字は朱（--c-accent）。24px の太字は大きい文字なので --c-accent でよい */
.p-ais-bar--top .p-ais-bar__value {
  font-family: var(--ff-head);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-accent);
}

.p-ais-bar--top .p-ais-bar__fill {
  background: var(--c-accent);
}

/* SP：出典の表記は 12px → 13px（c-data-list__source と同じ） */
@media (max-width: 767.98px) {
  .p-ais-source {
    font-size: 13px;
  }
}


/* METHOD の図は、左に「SOURCE ディープインタビュー」（写真つき）、矢印、右に 2×2 の出力。
   1099px 以下は縦に並べる（SOURCE → 下向きの矢印 → 出力。出力は 768px 以上で 2×2、767px 以下は1列。
   出力の一覧は c-card-grid--cols-2 なので、この列数は共通部品の決まりのまま）。1100px 以上で横並び。
   SOURCE は、墨の面の中に、写真（共通部品の c-photo-frame c-photo-frame--16x9。端までいっぱい）と、題名の帯（p-ais-method__caption）を重ねる。
   写真の上に文字は載せない（題名は墨の面の上）。PC は写真が上・題名が下、768〜1099px は写真が左・題名が右の横長の帯、SP は写真 → 題名の順 */
.p-ais-method {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.p-ais-method__source {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--c-white);
  text-align: center;
  background: var(--c-ink);
  border-radius: var(--radius-m);
}

.p-ais-method__photo {
  flex: none;
}

.p-ais-method__caption {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .p-ais-method__source {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p-ais-method__label {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--c-accent-on-dark);
}

.p-ais-method__name {
  margin-top: 4px;
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

/* 矢印：横向きの SVG を、縦並びのときは 90度回して下向きにする */
.p-ais-method__arrow {
  align-self: center;
  justify-self: center;
  width: 32px;
  height: 24px;
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

/* 出力：c-card に、左の朱の小さな正方形（c-eyebrow と同じ印）。中身の文言は普通の文章として折り返す */
.p-ais-method__output {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.p-ais-method__output::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--c-accent);
}

.p-ais-method__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 1100px) {
  .p-ais-method {
    grid-template-columns: 280px auto minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .p-ais-method__arrow {
    transform: none;
  }
}


/* KPI の実画面：3つの指標の下に、横いっぱいに置く。枠は共通部品の c-screen（HTML 側で c-screen--full を付ける。
   タブレットは 2:1、PC は 12:5、SP は 16:10）。ここには、指標との間の余白だけを書く */
.p-ais-kpi__screen {
  margin-top: 32px;
}

@media (min-width: 768px) {
  .p-ais-kpi__screen {
    margin-top: 40px;
  }
}


/* Windows のハイコントラスト（強制カラー）では背景色が消えるので、線・正方形・棒として背景色で描いている部分に文字色を指定する */
@media (forced-colors: active) {
  .p-ais-method__output::before {
    background-color: CanvasText;
  }

  .p-ais-bar__fill {
    background-color: Highlight;
  }

  /* 墨の塗りの箱は、背景が消えても形が分かるよう枠を付ける */
  .p-ais-bar__track,
  .p-ais-method__source {
    border: 1px solid CanvasText;
  }
}