@charset "UTF-8";

/* ============================================================
   Technophere AI Lab（page-ai-lab.php）専用の差分CSS
   ------------------------------------------------------------
   読み込み順は functions.php の $page_styles で
     … → page-shell → web-production → ai-lab
   となる。料金カード（.pricing-*）とFAQ（.faq-*）の見た目は
   web-production.css から借りているので、ここでは足りない分と
   和文で崩れる箇所の手当てだけを書く。

   このページはセクションごとに構造を変える。カード（.tp-tile）を反復するのは
   §プラン（.pricing-*）と §実績（.tp-tile--media）の2箇所だけで、
   残りはチェックリスト・ダーク帯・定義リスト・人物レイアウト・出荷ログに分ける。
   全部を同じカードで並べると、内容の重さの差がスクロール上で消えるため。

   このファイルで扱うもの:
     .ai-proof              … ヒーローのタイトル下に置く証拠ライン（mono）
     .ai-statement          … リード1文だけの大きなステートメント（700、strongは900）
     .ai-checklist          … §こんな人に向いています（罫線のチェックリスト）
     .ai-versus             … §AI講座と何が違うのか（ページ中盤のダーク帯・全幅）
     .ai-gains              … §伴走で得られる4つのもの（定義リスト）
     .ai-mentors            … §伴走するメンター（縦長2:3の写真＋本文、左右交互）
     .tp-tile--media 上書き  … §実績カードの画像を低く・本文を2行クランプに詰める
     .cta-button-inline 上書き … 中間CTAを角丸グロー影から四分円カット＋影なしへ
     .pricing-card 上書き    … 左上のL字罫を消し、.tp-tile と同じ四分円カットへ
     .faq-item 上書き        … FAQをアコーディオンから常時展開の罫線リストへ
     .ai-shiplog            … ★シグネチャ。§相談から公開まで（縦罫のログ）
     .pricing-price         … 和文「要相談」対応のフォント差し替え
     .ai-note               … 学生向け特別枠の注記（mono pill＋上のhairline、箱なし）
     .ai-consult            … §無料相談する（ページ終盤2つ目のダーク帯・全幅）
     .ai-cta-split          … 学生／法人で主従を分けた2カラムCTA（暗面に浮かせた白カード）
     .ai-notes              … 末尾の免責（.ai-consult内、暗面の細字）

   ブレークポイントは 1080px / 768px の2つだけ（tokens.css の規約）。
   色は必ず var(--c-*) を経由する（#fff のみ例外）。
   ============================================================ */

/* ============================================================
   ヒーローの証拠ライン
   ------------------------------------------------------------
   タイトルとサブタイトルの下に、このページの主張の根拠を1行で置く。
   「未経験の学生が8日・0円で公開し、いまも動いている」という事実が
   §メンター・§実績・§進め方の全部を裏で支えているので、先に見せる。
   Space Mono は欧文専用なので、和文は --f-body に落とす。
   ============================================================ */

.ai-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 20px 0 0;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--c-on-dark);
}

.ai-proof-item {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.ai-proof-item b {
    font-family: var(--f-disp);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

/* 和文だけは Space Mono のフォールバックで崩れるので本文書体に戻す */
.ai-proof-item--jp {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.ai-proof-item--live {
    color: var(--c-periwinkle);
    border: 1px solid var(--c-periwinkle);
    padding: 4px 7px;
}

.ai-proof-sep {
    flex: none;
    width: 18px;
    height: 1px;
    background-color: var(--c-line-dark);
}

/* ============================================================
   リードのステートメント
   ------------------------------------------------------------
   h1 を除けば、このサイズを使うのはページ内でここ1箇所だけ。
   主張のヤマを1つに絞るための投資先。
   .page-content > .section-header:first-child > * が margin-top:0 を
   当ててくるので、クラス3つ（0-3-0）で上書きする。
   ============================================================ */

.ai-lab-article .section-header .ai-statement {
    width: 100%;
    max-width: 15.5em;
    margin: 8px 0 30px;
    font-family: var(--f-disp);
    font-size: clamp(22px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--c-ink);
}

/* 強調は色ではなくウェイトの1段上げで付ける。下罫やマーカーは折り返しで途切れて
   壊れて見え、コバルトの文字はこのサイトの語彙ではリンクに読めてしまう。
   Zen Kaku Gothic New は 900 まで読み込み済みなので、地の700に対して
   きっぱり黒い900を重ねるだけで、色を足さずに強いコントラストが付く。
   ※ 900は和文グリフのみ実体を持つ書体（Google Fonts側の収録次第）なので、
   このstrong内に英数字を混ぜない（擬似ボールドで滲む可能性があるため）。 */
.ai-lab-article .section-header .ai-statement strong {
    font-weight: 900;
}

/* ============================================================
   §こんな人に向いています — チェックリスト
   ------------------------------------------------------------
   「当てはまるか」を読者が自分に照らす節なので、箱に入れず
   上下の罫だけで区切る。行頭は角のチェック（丸は使わない）。
   ============================================================ */

.ai-checklist {
    list-style: none;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    border-top: 1px solid var(--c-line);
}

.ai-check {
    position: relative;
    padding: 22px 0 22px 42px;
    border-bottom: 1px solid var(--c-line);
}

.ai-check::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 5px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--c-cobalt);
    border-bottom: 2px solid var(--c-cobalt);
    transform: rotate(-45deg);
}

.ai-check-title {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--c-ink);
    margin: 0 0 6px;
}

.ai-check-text {
    max-width: 62em;
    font-size: 14.5px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ============================================================
   §「AI講座」と、何が違うのか — ページ唯一のダーク帯
   ------------------------------------------------------------
   このページで唯一「対立」を描く節。白いカード2枚の横並びでは
   差が出ないので面ごと反転させ、スクロール上のヤマを1つ作る。
   マークアップ側で .page-content を一度閉じ、.page-article の
   直接の子として置いてある（page-message.php の .msg-vision と同じ手）。
   .page-article は flex-direction:column / align-items:center なので、
   width:100% だけで全幅に伸びる。100vw は使わない（横スクロールを生む）。
   ============================================================ */

.ai-versus {
    width: 100%;
    margin: 96px 0 88px;
    padding: 84px 0 88px;
    background-color: var(--c-ink-deep);
}

.ai-versus-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    box-sizing: border-box;
}

/* 見出しの装置（上罫＋56×3pxのコバルトの短線）は .section-title-h2 と同じ。
   面が反転するぶん、罫だけダーク面用のトークンに差し替える */
.ai-versus-h2 {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--f-body);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: #fff;
    margin: 0 0 24px;
    padding-top: 22px;
    border-top: 1px solid var(--c-line-dark);
}

.ai-versus-h2::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 56px;
    height: 3px;
    background-color: var(--c-cobalt);
}

.ai-versus-lead {
    max-width: 820px;
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.02em;
    color: var(--c-on-dark);
    margin: 0 0 44px;
}

.ai-versus-lead strong {
    color: #fff;
    font-weight: 700;
}

.ai-versus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-versus-col {
    padding: 0 40px;
}

.ai-versus-col--them {
    padding-left: 0;
    border-right: 1px solid var(--c-line-dark);
}

.ai-versus-col--us {
    padding-right: 0;
}

.ai-versus-tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.18em;
    color: var(--c-on-dark-faint);
    border: 1px solid var(--c-line-dark);
    border-radius: 0;
    padding: 6px 10px;
    margin: 0 0 16px;
}

.ai-versus-tag--us {
    color: var(--c-periwinkle);
    border-color: var(--c-periwinkle);
}

.ai-versus-name {
    font-family: var(--f-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--c-on-dark-faint);
    margin: 0 0 16px;
}

.ai-versus-col--us .ai-versus-name {
    color: #fff;
}

.ai-versus-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-versus-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--c-on-dark-faint);
}

.ai-versus-list li:last-child {
    margin-bottom: 0;
}

/* 一般講座側は短い横罫（打ち消しの気配）、AI Lab 側はコバルトの正方形。
   正方形は .tp-tile-list の行頭と同じ語彙 */
.ai-versus-list li::before {
    content: "";
    position: absolute;
    top: 0.86em;
    left: 0;
    width: 8px;
    height: 1px;
    background-color: var(--c-on-dark-faint);
}

.ai-versus-list--us li {
    color: var(--c-on-dark);
}

.ai-versus-list--us li::before {
    top: 0.7em;
    width: 5px;
    height: 5px;
    background-color: var(--c-cobalt);
}

/* ============================================================
   §伴走で得られる4つのもの — 定義リスト
   ------------------------------------------------------------
   「何が得られるか（名詞）」と「どういうことか（説明）」を
   左右に分ける。§こんな人に（チェックリスト）と混ざらないよう、
   行頭マーカーを持たない形にしている。
   ============================================================ */

.ai-gains {
    width: 100%;
    margin: 6px 0 0;
    border-top: 1px solid var(--c-line);
}

.ai-gain {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 8px 40px;
    padding: 24px 0;
    border-bottom: 1px solid var(--c-line);
}

.ai-gain-term {
    font-family: var(--f-body);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--c-ink);
    margin: 0;
}

.ai-gain-desc {
    font-size: 14.5px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ============================================================
   §伴走するメンター — 人物レイアウト
   ------------------------------------------------------------
   カードに入れると2人が「選択肢」に見えてしまうので、
   写真を大きく取った紹介記事の組みにする。2人目は左右反転。

   写真は2枚とも縦長ポートレート（774×1376 / 880×1164、ほぼ2:3〜9:16）。
   これを横長16:9で切ると、縦900pxの画像のうち見えるのは4割程度しかなく、
   candidな雰囲気を作っていた背景（リゾートの建物とヤシ、カフェの石壁）も
   ほぼ消えてしまっていた。2:3のまま縦長で見せれば、どちらの写真も
   全体の8割前後がそのまま入る（元がすでに縦長なので、無理に横長へ
   押し込めない＝素材の形をそのまま活かす）。
   未提供のメンターは写真ブロックごと出さず、本文だけの1カラムに落ちる
   （.ai-mentor--nophoto）。
   ============================================================ */

.ai-mentors {
    width: 100%;
    margin: 8px 0 0;
}

.ai-mentor {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
}

.ai-mentor--reverse {
    flex-direction: row-reverse;
}

.ai-mentor--nophoto {
    display: block;
}

.ai-mentor--nophoto .ai-mentor-body {
    max-width: 820px;
}

.ai-mentor + .ai-mentor {
    margin-top: 52px;
    padding-top: 52px;
    border-top: 1px solid var(--c-line);
}

.ai-mentor-photo {
    flex: 0 0 30%;
    max-width: 30%;
}

.ai-mentor-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    /* 既定値。写真ごとに顔の位置が違うので、この値は「だいたい合う」初期値でしかない。
       新しい写真に差し替えたら、実際の表示で顔と首元が両方収まっているか必ず確認する */
    object-position: center 22%;
    /* カード右下の四分円カット（Corner Sphere）と同じ形。
       構造が変わってもサイトの一族に見えるようにするための係留点 */
    border-radius: var(--radius-md) var(--radius-md) var(--radius-corner) var(--radius-md);
}

/* 宮久保の写真は顔の重心が糸長の写真よりわずかに低いので、この1枚だけ下げる */
.ai-mentor--reverse .ai-mentor-photo img {
    object-position: center 30%;
}

.ai-mentor-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}

.ai-mentor-tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.18em;
    color: var(--c-cobalt);
    border: 1px solid var(--c-sky);
    border-radius: 0;
    padding: 6px 10px;
    margin: 0 0 14px;
}

.ai-mentor-name {
    font-family: var(--f-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: var(--c-ink);
    margin: 0;
}

.ai-mentor-text {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    margin: 0 0 16px;
}

.ai-mentor-text strong {
    color: var(--c-ink);
    font-weight: 700;
}

.ai-mentor-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-mentor-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
}

.ai-mentor-list li:last-child {
    margin-bottom: 0;
}

.ai-mentor-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: var(--c-cobalt);
}

/* メンターの実績が3行の単一箇条書き（.ai-mentor-list単体）に収まらないとき、
   カテゴリ分けした複数リストに分ける構造（糸長=「開発」／「事業・メディア運営」、
   宮久保=「AI活用」／「営業」）。トラックラベルは英字のカテゴリタグ（.ai-mentor-tag）
   と紛れないよう和文の小見出しとして立てる。和文なので --f-mono には乗せず、
   --f-body の700・字間を締めてコバルトに寄せることで、mono系ラベルと似た
   「小さく・強く・詰まった」印象だけを和文でも再現する。 */
.ai-mentor-tracks {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 16px;
}

.ai-mentor-track-label {
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-cobalt);
    margin: 0 0 8px;
}

.ai-mentor-track .ai-mentor-list {
    margin: 0;
}

/* ============================================================
   §相談から公開まで — 出荷ログ（このページのシグネチャ）
   ------------------------------------------------------------
   このページが他と違うと言っているのは時間軸そのもの
   （「約8日で完成」「1〜2ヶ月で公開されたものを1つ残す」）なので、
   進め方を4枚のカードではなく1本の時間軸として描く。
   連番を振ってよいのは、ここが「順序が情報である一覧」だから。
   ノードは正方形（このサイトのシグネチャは角であって丸ではない）。
   縦罫はリビールに乗せて上から下へ伸ばす。
   ============================================================ */

.ai-shiplog {
    position: relative;
    list-style: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 0 0 0 30px;
}

.ai-shiplog-item {
    position: relative;
    padding-bottom: 38px;
}

.ai-shiplog-item:last-child {
    padding-bottom: 0;
}

.ai-shiplog-item::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -30px;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 1px solid var(--c-cobalt);
    background-color: var(--c-paper);
}

/* 最後の1つだけ塗る。「ここまで来たら公開されている」の合図 */
.ai-shiplog-item--ship::before {
    background-color: var(--c-cobalt);
}

/* 縦罫は各ステップが「自分のノードから次のノードまで」を描く。
   リスト全体に1本引くと最後のノードを突き抜けてログが終わって見えない。
   top:15px = ノードの下端（top4 + 高さ11）、bottom:-4px = 次のノードの上端。
   リビールの --d に乗せてあるので、スクロールに合わせて1区間ずつ伸びる */
.ai-shiplog-item::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: -4px;
    left: -25px;
    width: 1px;
    background-color: var(--c-cobalt);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.7s var(--ease-out) var(--d, 0s);
}

.ai-shiplog-item.visible::after {
    transform: scaleY(1);
}

.ai-shiplog-item:last-child::after {
    content: none;
}

.ai-shiplog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 8px;
}

.ai-shiplog-step {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--c-cobalt);
}

.ai-shiplog-when {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    line-height: 1;
    color: var(--c-ink-mute);
}

.ai-shiplog-badge {
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    color: #fff;
    background-color: var(--c-cobalt);
    padding: 5px 8px;
}

.ai-shiplog-title {
    font-family: var(--f-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.015em;
    color: var(--c-ink);
    margin: 0 0 8px;
}

.ai-shiplog-text {
    max-width: 62em;
    font-size: 14.5px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ============================================================
   料金カードの意匠上書き
   ------------------------------------------------------------
   web-production.css の既定は「左上にコバルトのL字罫（::before/::after）を
   置いて角を示す」という、.tp-tile 側が Corner Sphere（右下だけの四分円カット）
   に刷新される前の旧方式のまま残っている（4ページ共有のため web-production.css
   自体は変更しない）。ここではこのページの中だけ、L字罫を消して .tp-tile と
   同じ角の語彙（四分円カット）に揃える。
   RECOMMENDED カードの合図は「上辺の罫」から「バッジの塗り」に付け替える。
   面の色（--c-paper-tint）はそのまま活かす。 */

.ai-lab-article .pricing-card::before,
.ai-lab-article .pricing-card::after {
    content: none;
}

.ai-lab-article .pricing-card {
    border-radius: var(--radius-md) var(--radius-md) var(--radius-corner) var(--radius-md);
}

.ai-lab-article .pricing-yearly .pricing-badge {
    color: #fff;
    background-color: var(--c-cobalt);
    border-color: var(--c-cobalt);
}

/* ============================================================
   料金カードの和文対応
   ------------------------------------------------------------
   web-production.css の .pricing-price は --f-mono（Space Mono＝欧文専用）
   で 30px。数字を並べる前提の指定なので、「要相談」「無料相談から」のような
   和文を入れるとフォールバックして字面が崩れ、幅もはみ出す。
   このページは金額を出さない方針なので、表示用書体に差し替えて縮める。
   ============================================================ */

.ai-lab-article .pricing-price {
    font-family: var(--f-disp);
    font-size: 22px;
    letter-spacing: 0.02em;
}

/* ============================================================
   中間CTA（.cta-button-inline）の上書き
   ------------------------------------------------------------
   page-shell.css の既定は「コバルト地の丸ボタン＋ソフトなグロー影＋
   ホバーで矢印がスライドするFont Awesomeの矢印アイコン」。これ自体は
   サイト全体の標準ボタンだが、この組み合わせ（丸角・グロー影・矢印スライド）
   はAI系SaaSのLPならどこにでもある型でもあり、ここまでのAI Lab側の刷新
   （影を使わない・角を切る・自前のアイコンを使う）とは毛色が違って浮く。

   ここでは .ai-lab-article にスコープしたときだけ、このページの語彙
   （四分円カット・影なし・ベスポークのシェブロンSVG）に寄せる。
   .cta-button-inline 自体は他ページでも使われる共通クラスなので、
   ここでの上書きはこのページの中だけに閉じる。 */

.ai-lab-article .cta-button-inline {
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-sm);
    box-shadow: none;
    letter-spacing: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
    .ai-lab-article .cta-button-inline:hover {
        box-shadow: none;
    }
}

/* アイコンを Font Awesome の矢印から、§メンターの「制作物を見る」リンクと
   同じベスポークのシェブロンSVGに差し替え（page-ai-lab.php側で <i class="fas
   fa-arrow-right"> を <svg> に変更済み）。既存の transform: translateX(4px)
   のホバー挙動はクラス名を変えていないのでそのまま効く。 */
.ai-lab-article .cta-button-inline-icon {
    width: 13px;
    height: 13px;
}

/* 末尾のLINE / フォーム誘導ボタン（.ai-cta-btn）も同じ理由で角と影だけ揃える。
   色（LINEグリーン／コバルト／ゴースト）は変えない */
.ai-lab-article .ai-cta-btn {
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-sm);
    box-shadow: none;
}

.ai-lab-article .ai-cta-btn:hover {
    box-shadow: none;
}

/* 説明文の行数クランプ（-webkit-line-clamp:3）の解除はここには要らない。
   このページに残る .tp-tile はリンクになっている実績カードだけで、
   そちらは一覧カードとしてクランプしたままが正しい。
   説明が中身そのものになるセクションは .tp-tile を使わない構造に移した。 */

/* ============================================================
   §実際につくって、運営しているもの — 画像をコンパクトに
   ------------------------------------------------------------
   ここの画像はAI生成のプレースホルダーで、内容の主役ではない。
   components.css の既定（画像184px＋本文26px×26pxパディング＋3行クランプ）は
   一覧カードとしては標準的だが、この節の画像に縦の場所を割きすぎるため、
   .tp-tile--news と同じ「コンパクト」の考え方（画像を低く、本文の余白・
   行数を詰める）を、このページの実績カードにも当てる。
   components.css 自体は編集しない（.tp-tile--media は他ページでも使う）。 */
.ai-lab-article .tp-tile--media .tp-tile-media img {
    height: 118px;
}

.ai-lab-article .tp-tile--media .tp-tile-body {
    padding: 18px 20px;
}

.ai-lab-article .tp-tile--media .tp-tile-tag {
    margin-bottom: 10px;
}

.ai-lab-article .tp-tile--media .tp-tile-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 8px;
}

.ai-lab-article .tp-tile--media .tp-tile-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0;
}

/* ============================================================
   メンター紹介（氏名まわりの共通部品）
   ============================================================ */

/* 氏名の右（狭いときは下）に小さく肩書を添える。
   肩書を <h3> の中に入れると見出しテキストに混ざり、文書アウトラインと
   読み上げが「糸長 優矢テクノフィア代表」になってしまうため、
   h3 の外に出したうえでラッパーで横並びにしている */
.tp-mentor-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 12px;
}

/* 中身が和文（「テクノフィア代表」「現役大学生・文系」）なので --f-mono には乗せない */
.tp-mentor-role {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--c-ink-mute);
}

.tp-mentor-links {
    margin: 16px 0 0;
}

/* ============================================================
   学生向け特別枠の注記
   ------------------------------------------------------------
   旧実装（.ai-note-box）は「薄い塗り＋枠線＋角丸＋左のコバルト太罫」で、
   このページが§プランや§FAQで避けてきた「AI生成のLPによくある
   callout box」そのものに見えていた（2026-08、ユーザー指摘で刷新）。
   箱を増やさず、このページで既に使っている2つの語彙だけで組み直す:
   ラベルは .pricing-badge と同じアウトラインのmonoピル、
   区切りは §こんな人に向いています（.ai-checklist）と同じ上のhairline。
   ============================================================ */

.ai-note {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
}

/* 中身が和文（「学生の方へ・学生応援特別枠」）なので --f-mono には乗せない
   （Space Mono は欧文専用。和文グリフはフォールバックしOS依存で崩れる）。
   .ai-mentor-track-label と同じ考え方で --f-body の700・字間を締めて
   コバルトに寄せ、mono系ラベルと似た印象だけ和文で再現する */
.ai-note-tag {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
    color: var(--c-cobalt);
    background-color: transparent;
    border: 1px solid var(--c-sky);
    padding: 6px 10px;
    margin: 0 0 14px;
}

.ai-note-text {
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--c-ink-soft);
    margin: 0;
}

.ai-note-text strong {
    color: var(--c-ink);
    font-weight: 700;
}

/* ============================================================
   FAQ（.faq-*）の上書き — アコーディオンをやめ、罫線の読み物リストへ
   ------------------------------------------------------------
   web-production.css の既定は <details>/<summary> の開閉式で、
   「薄い塗り＋枠線＋角丸の箱」＋「開くと+が×に回る合図」という
   よくあるSaaSのFAQアコーディオンそのものに見える。加えて、開いた状態の
   合図を左のコバルト罫（border-left + padding-left）で付けていたところ、
   開閉のたびに本文全体が右にずれて見える副作用があった。

   このページのFAQは判断材料ではなく読み物なので、そもそも開閉させず
   最初からQ/Aを両方出す。マークアップも <details>/<summary> をやめて
   ただの <div>/<p> にしている（page-ai-lab.php側）。これで開閉の
   ずれ問題自体が構造からなくなり、§こんな人に向いています
   （.ai-checklist）と同じ「罫線で区切るだけの読み物リスト」に揃う。
   web-production.css 側の summary 用ルール（marker非表示・+×アイコン・
   [open]時の枠線）は tag/属性セレクタなので <p>/<div> には最初から
   当たらず、無害な死んだルールとして残る（web-production.css自体は
   4ページ共有のため編集しない）。ホバーで枠線が濃くなる合図だけは
   クラスセレクタで当たってしまうため、非インタラクティブな行に
   クリックできそうな気配を残さないよう明示的に打ち消す。 */

.ai-lab-article .faq-list {
    border-top: 1px solid var(--c-line);
}

.ai-lab-article .faq-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
    .ai-lab-article .faq-item:hover {
        border-color: var(--c-line);
    }
}

.ai-lab-article .faq-q {
    padding: 20px 4px 8px;
    margin: 0;
}

.ai-lab-article .faq-a {
    padding: 0 4px 20px;
}

/* ============================================================
   §無料相談する — ページ2つ目のダーク帯
   ------------------------------------------------------------
   §AI講座と何が違うのか（.ai-versus）と対になる終盤の帯。
   ヒーロー・フッターがすでにダークなので、中盤に .ai-versus、終盤に
   .ai-consult を置くと「暗→明→暗→明→暗」でページが閉じる。
   .ai-versus が「対立を左右に並べて見せる」節なのに対し、こちらは
   閉じの号令なので中央寄せの一撃（eyebrow → 見出し → リード）にして、
   同じ手を2回使った印象にならないようにしている。見出しは .ai-statement
   と並ぶページ内最大級のサイズにし、開幕の主張とページを開閉させる。

   中の2枚（.ai-cta-col）は暗い面に浮かせた白いカードのままにする。
   ボタン・サブリンクは元々 --c-card 面（明面）向けの配色で、
   カードごと明面のまま浮かせれば暗面向けのコントラスト調整が一切要らない
   （tp-btn--ghost や tp-text-link を暗面用に配色し直す必要がない）。
   マークアップ側で .page-content を一度閉じ、.page-article の直接の子
   として置いてある（.ai-versus と同じ手。100vw は使わない）。
   ============================================================ */

.ai-consult {
    width: 100%;
    /* この節はマークアップ上 .page-article の最後の子で、
       page-shell.css の .page-article { padding-bottom: 104px } の分だけ
       ダーク面のあとに --c-paper の余白が挟まり、フッター（暗面）との間に
       明るい帯がサンドイッチされてしまう。負のmargin-bottomでその余白ぶんを
       引き上げ、同じだけpadding-bottomに足して面積をダークで埋め直すことで、
       ページ全体の高さやフッター位置は変えずに「暗→明→暗」の接続だけ閉じる。
       （page-shell.css 側は4ページ共有のため編集しない） */
    margin: 88px 0 -104px;
    padding: 96px 0 188px;
    background-color: var(--c-ink-deep);
}

.ai-consult-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    box-sizing: border-box;
}

.ai-consult-eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--c-periwinkle);
    text-align: center;
    margin: 0 0 18px;
}

.ai-consult-h2 {
    font-family: var(--f-disp);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    text-align: center;
    margin: 0 0 18px;
}

.ai-consult-lead {
    max-width: 30em;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--c-on-dark);
    text-align: center;
    margin: 0 auto;
}

/* 直リンク（/ai-lab/#consult）でヘッダーの下に潜らないようにする。
   クリック経由のスクロールは corporate.js がヘッダー高を差し引いている */
#consult {
    scroll-margin-top: 120px;
}

.ai-cta-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 48px 0 0;
    width: 100%;
}

.ai-cta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    background-color: var(--c-card);
    border: 1px solid var(--c-line);
    /* 暗面に浮かせる箱なので、.tp-tile / .pricing-card と同じ四分円カットで
       サイトの角の語彙に揃える */
    border-radius: var(--radius-md) var(--radius-md) var(--radius-corner) var(--radius-md);
}

/* 左（学生）を主にする。上辺のコバルト太罫で1枚だけ立てる
   （`.pricing-yearly` はこの後2026-08にバッジの塗りへ合図を差し替えたため、
   現在は同じ手ではない）。 */
.ai-cta-col:first-child {
    border-top-width: 2px;
    border-top-color: var(--c-cobalt);
    background-color: var(--c-paper-tint);
}

/* 中身が和文（「学生・個人の方（おすすめ）」「法人・団体の方」）なので
   .ai-note-tag / .ai-mentor-track-label と同じ理由で --f-mono には乗せない */
.ai-cta-label {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
    color: var(--c-cobalt);
    margin: 0 0 12px;
}

.ai-cta-lead {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.9;
    color: var(--c-ink-soft);
    margin: 0 0 20px;
}

.ai-cta-btn {
    margin: 0;
}

.ai-cta-btn--line {
    background-color: #06C755;
    border-color: #06C755;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-cta-btn--line:hover {
    background-color: #05b04c;
    border-color: #05b04c;
    color: #ffffff;
}

.ai-cta-btn--line .fa-line {
    font-size: 1.2em;
}

.ai-cta-note {
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-ink-mute);
    margin: 12px 0 0;
}

.ai-cta-sub {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

/* リンクが1本も無いときは PHP 側で <ul> ごと出力しない。
   CSS の :empty は空白テキストノードがあると当たらないため当てにしないこと */

.ai-cta-sub li + li {
    margin-top: 10px;
}

/* ============================================================
   免責
   ------------------------------------------------------------
   .ai-consult（ダーク帯）の中の最後の要素なので、箱で切り出さず
   暗面の小さな注記としてそのまま馴染ませる。フッターも暗面なので、
   ここを明るい箱のまま残すと「暗→明→暗」の閉じ際に明るい帯が
   一瞬だけ挟まって落ち着かない。 */

.ai-notes {
    margin: 56px 0 0;
    padding: 28px 0 0;
    background-color: transparent;
    border: none;
    border-top: 1px solid var(--c-line-dark);
    border-radius: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 中身が和文（「ご利用にあたって」）なので --f-mono には乗せない */
.ai-notes-title {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
    color: var(--c-on-dark-faint);
    margin: 0 0 14px;
}

.ai-notes ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-notes li {
    position: relative;
    padding-left: 18px;
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.9;
    color: var(--c-on-dark-faint);
}

.ai-notes li + li {
    margin-top: 8px;
}

.ai-notes li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 2px;
    width: 6px;
    height: 1px;
    background-color: var(--c-on-dark-faint);
}

/* ============================================================
   タブレット
   ============================================================ */

@media screen and (max-width: 1080px) {
    /* ダーク帯の左右余白は .page-content と同じ段（--gutter-md）に揃える */
    .ai-versus {
        margin: 72px 0 68px;
        padding: 64px 0 68px;
    }

    .ai-versus-inner {
        padding: 0 var(--gutter-md);
    }

    .ai-versus-col {
        padding: 0 28px;
    }

    .ai-mentor {
        gap: 28px;
    }

    .ai-mentor-photo {
        flex-basis: 32%;
        max-width: 32%;
    }

    .ai-gain {
        gap: 8px 28px;
    }

    .ai-consult {
        /* .page-article の padding-bottom も 88px に変わる（page-shell.css 側） */
        margin: 64px 0 -88px;
        padding: 72px 0 152px;
    }

    .ai-cta-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ============================================================
   スマートフォン
   ============================================================ */

@media screen and (max-width: 768px) {
    /* components.css は768px以下で .tp-tile-media img を200pxに拡大するが
       （通常の一覧カード向け）、この節の画像はAI生成のプレースホルダーで
       主役ではないため、ここだけ縮小方向で打ち消す */
    .ai-lab-article .tp-tile--media .tp-tile-media img {
        height: 100px;
    }

    .ai-proof {
        gap: 8px 10px;
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .ai-proof-item b {
        font-size: 16px;
    }

    .ai-proof-sep {
        width: 12px;
    }

    .ai-check {
        padding: 18px 0 18px 34px;
    }

    .ai-check::before {
        top: 23px;
        left: 3px;
    }

    .ai-lab-article .faq-q {
        padding: 17px 4px 6px;
    }

    .ai-lab-article .faq-a {
        padding: 0 4px 17px;
    }

    .ai-versus {
        margin: 56px 0 52px;
        padding: 52px 0 56px;
    }

    .ai-versus-inner {
        padding: 0 var(--gutter-sm);
    }

    .ai-versus-lead {
        margin-bottom: 32px;
    }

    /* 縦積みでは仕切りが縦罫から横罫に変わる */
    .ai-versus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-versus-col {
        padding: 0;
    }

    .ai-versus-col--them {
        padding-bottom: 28px;
        margin-bottom: 28px;
        border-right: 0;
        border-bottom: 1px solid var(--c-line-dark);
    }

    .ai-gain {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 20px 0;
    }

    .ai-mentor,
    .ai-mentor--reverse {
        flex-direction: column;
        gap: 20px;
    }

    .ai-mentor-photo {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    /* 全幅になる縦積みで 2:3 のままだと、幅706px前後×高さ1000px超という
       縦にとても長い1枚になり過ぎるので、モバイルだけ比率を少し詰める */
    .ai-mentor-photo img {
        aspect-ratio: 4 / 5;
    }

    .ai-mentor + .ai-mentor {
        margin-top: 36px;
        padding-top: 36px;
    }

    .ai-shiplog {
        padding-left: 26px;
    }

    .ai-shiplog-item {
        padding-bottom: 30px;
    }

    .ai-shiplog-item::before {
        left: -26px;
    }

    .ai-shiplog-item::after {
        left: -21px;
    }

    .ai-lab-article .pricing-price {
        font-size: 20px;
    }

    .ai-cta-col {
        padding: 22px 18px;
    }

    .ai-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .ai-consult {
        /* .page-article の padding-bottom も 64px に変わる（page-shell.css 側） */
        margin: 48px 0 -64px;
        padding: 56px 0 116px;
    }

    .ai-notes {
        margin-top: 40px;
        padding-top: 22px;
    }
}

/* ============================================================
   モーション低減
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    /* 罫を伸ばす演出をやめ、最初から全長で描く */
    .ai-shiplog-item::after {
        transform: scaleY(1);
        transition: none;
    }
}