/* ==========================================================================
   SEO・AI検索対策のページだけの CSS（キャンバス案E v51 の SeoE。/seo-aio/）
   --------------------------------------------------------------------------
   このページでだけ読む（inc/assets.php の planart_page_styles() の 'seo-aio'。style.css のあと）。
   色・余白・角丸・影はトークンだけを使う（verify_site.py が見張る）。

   ■ ここにある物
     1. ヒーローの絵（parts/seo-aio-hero.php）：検索する → 検索の結果に出る → AIの答えに出る（白い面に置く色違い）と、その動き
     2. お約束できないこと（左右分けの段。page-seo-aio.php の #promise）
     3. ご依頼のしかた（2枚のカード。page-seo-aio.php の #ways）
     ほかの段（AIOとは・すること・よくある質問・相談の帯）は、共通の部品のまま（style.css 10・12・21・22・23・27章）。

   ■ トークンは style.css の 0章（2026-11-03 まとめで、このファイルの :root から移した。名前はそのまま）。
     値が同じでも役目の違う名前（--fs-promise-lead と --fs-statement-lead など）は、片方を直したときにもう片方が変わらないよう、別のまま。
   ========================================================================== */

/* ==========================================================================
   1. ヒーローの絵（薄い緑の面の中。面と縦の並びは style.css 22章の .c-hero__card--column）
   例の文はトップの検索とAIの段（style.css 14章の .c-aio__*）と同じ。ここは白い面に置くので、
   検索窓と結果が白い面・AI の答えが右寄せ（右下の角が小さい）になる。
   ========================================================================== */
.p-seo-aio-hero__label {
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.p-seo-aio-hero__search {
  align-self: flex-start;
  box-sizing: border-box;
  width: min(100%, 340px);
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding-block: var(--s-11);
  padding-inline: var(--s-14);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  box-shadow: var(--sh-search-pill);
}

.p-seo-aio-hero__search > svg {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-green);
}

.p-seo-aio-hero__stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-8);
}

.p-seo-aio-hero__stage--2 {
  margin-left: var(--sp-seo-step);
}

.p-seo-aio-hero__stage--3 {
  align-self: flex-end;
  width: min(100%, 380px);
}

.p-seo-aio-hero__result {
  box-sizing: border-box;
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-12);
  padding-inline: var(--s-14);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-16);
  background: var(--c-bg);
  color: var(--c-ink);
}

.p-seo-aio-hero__url {
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.4;
}

.p-seo-aio-hero__result-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.p-seo-aio-hero__answer {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--s-12);
  padding-inline: var(--s-14);
  border-radius: var(--r-16) var(--r-16) var(--r-4) var(--r-16);
  background: var(--c-dark);
}

.p-seo-aio-hero__answer-text {
  color: var(--c-on-dark-strong);
  font-size: 14px;
  line-height: 1.7;
}

.p-seo-aio-hero__answer-em {
  color: var(--c-mint);
  font-weight: 700;
}

.p-seo-aio-hero__source {
  align-self: flex-start;
  padding-block: var(--s-2);
  padding-inline: var(--s-10);
  border-radius: var(--r-pill);
  background: var(--c-mint-soft);
  color: var(--c-mint);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- 動き（キャンバスの .pe-step2／.pe-step3。キーフレームは style.css 28章の pa-step2・pa-step3、打ち込みは 28章の .c-type） ----
   「動きを減らす」設定でない人で、<html> に .is-motion があるときだけ。止めるボタンで .is-motion が外れると止まり、3つとも出たままになる。 */
@media (prefers-reduced-motion: no-preference) {
  .is-motion .p-seo-aio-hero__stage--2 {
    animation: pa-step2 9s ease infinite;
  }

  .is-motion .p-seo-aio-hero__stage--3 {
    animation: pa-step3 9s ease infinite;
  }
}

/* ==========================================================================
   2. お約束できないこと（左に見出し、右に一文と説明。1 : 1.5。幅 760px 以下は1列。キャンバスの .pe-split）
   ========================================================================== */
.p-seo-aio-promise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  gap: var(--s-20) var(--sp-promise-cols);
}

@container (max-width: 760px) {
  .p-seo-aio-promise {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-seo-aio-promise__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.p-seo-aio-promise__title {
  color: var(--c-ink);
  font-size: var(--fs-h2-promise);
  line-height: 1.18;
  font-weight: 700;
  font-feature-settings: 'palt';
  text-wrap: balance;
}

.p-seo-aio-promise__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
  padding-top: var(--sp-promise-top);
}

.p-seo-aio-promise__statement {
  color: var(--c-ink);
  font-size: var(--fs-promise);
  line-height: 1.55;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.p-seo-aio-promise__text {
  max-width: 36em;
  color: var(--c-text);
  font-size: var(--fs-promise-lead);
  line-height: 1.9;
}

/* ==========================================================================
   3. ご依頼のしかた（白い2枚のカード。幅 760px 以下は1列＝style.css 2章の .u-grid2）
   ========================================================================== */
.p-seo-aio-ways {
  gap: var(--s-12);
}

.p-seo-aio-ways__card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--sp-ways-card);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

.p-seo-aio-ways__title {
  color: var(--c-ink);
  font-size: var(--fs-ways-title);
  line-height: 1.45;
  font-weight: 700;
}

.p-seo-aio-ways__text {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

/* カードの下のリンク（いちばん下にそろえる。2枚の高さがそろう） */
.p-seo-aio-ways__link {
  align-self: flex-start;
  margin-top: auto;
}