/* WAKURIRE だけの、サイト全体に効く CSS。
   ★正本はここ（_src/wakurire/assets/site.css）です。site.json の "css" で読みます。
   ★型（_kit/base.css）は 4 サイト共通なので、ここには **WAKURIRE だけの直し**を書きます。 */

/* ══ ヘッダーのメニュー（2026-10-08）══════════════════════════════════════
   「いつものAI連携」が増えてメニューが 7 つになりました。
   ★980px で実測 … ロゴ 193px ＋ すき間 24px ＋ メニュー 700px ＝ 917px に対して、
     置ける幅は 916px。**1px 足りずに 2 行へ折れ、ロゴと重なっていました。**
   ★スマホの形（ハンバーガー）に切り替わるのは 960px なので、
     960〜1120px のあいだだけ、字の左右と字の大きさを少し詰めます。
     詰めたあとのメニューは 569px。ロゴと合わせて 786px で収まります。 */
@media (min-width:960.01px) and (max-width:1120px){
 .gnav{gap:2px}
 .gnav a{padding:8px 9px;font-size:13.5px}
 .gnav .btn{margin-left:6px;padding:0 15px;font-size:13.5px}
}

/* ══ いつものAI連携で使う部品（2026-10-09）══════════════════════════════════
   ★★正本はここだけです。「いつものAI連携」のページ（/ai）と、
     トップの「いつものAI連携」の段が、同じものを読んで同じ見た目になります。
     写しは作りません。
   ★★コメントの中に、星印とスラッシュを続けて書かないこと。そこでコメントが閉じます。
     2026-10-09 に、強調の星印 2 つのすぐ後ろにページの住所を書いてしまい、
     この下の .ia-soon が丸ごと効かなくなりました（札の地色と丸みが出ませんでした）。
   ★ここに書くのは「見た目」だけです。どこに何 px 置くかは、使う側のページで決めます。
   ★ChatGPT・Claude・Gemini は **名前を字で書くだけ**です。
     ロゴ・各社の色・画面の見た目は使っていません（製品側の「使い方の整理」のとおり）。 */

/* ── 小さな札（「対応」＝もうつなげる／「準備中」＝これから）────────────
   ★ChatGPT と Claude は「対応」、Gemini は「準備中」です（2026-10-09）。 */
.ia-soon,.ia-on{display:inline-block;padding:1px 9px;border-radius:999px;
 font-size:11.5px;font-weight:700;white-space:nowrap;vertical-align:middle}
.ia-soon{background:var(--c-soft);color:var(--c-main)}
.ia-on{background:#E3F3EA;color:#0B7F5C}

/* ── 記録のカード（名刺・録音・約束・日報・次の一手）───────────────────── */
.ia-ccard{border-radius:14px;background:#fff;border:1px solid var(--c-line);
 box-shadow:0 10px 26px rgba(20,40,90,.10);
 padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;overflow:hidden}
.ia-ccard b{font-size:12px;font-weight:700;color:var(--c-main);letter-spacing:.06em}
.ia-ccard span{font-size:12.5px;color:var(--c-text2);line-height:1.45}
.ia-ccard i{display:block;height:5px;border-radius:3px;background:var(--c-line2)}
.ia-ccard .ia-wave{display:flex;align-items:flex-end;gap:3px;height:16px}
.ia-ccard .ia-wave u{display:block;width:3px;border-radius:2px;background:var(--c-main2);opacity:.75}
.ia-ccard .ia-chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c-ink);font-weight:700}
.ia-ccard .ia-chk i{width:13px;height:13px;flex:none;border-radius:4px;border:2px solid var(--c-main);background:none}

/* ── AI の名前の札 ─────────────────────────────────────────────────────── */
.ia-chip{background:#fff;border:1px solid var(--c-line);border-radius:14px;
 padding:11px 16px;text-align:center;box-shadow:0 10px 24px rgba(20,40,90,.07)}
.ia-chip b{display:block;font-family:var(--f-head);font-weight:900;font-size:15px;color:var(--c-ink);letter-spacing:.02em}
.ia-chip .ia-soon,.ia-chip .ia-on{margin-top:6px;font-size:10.5px;padding:1px 8px}

/* ── AI のチャットの画面（左の細い帯・真ん中に会話・下に入力欄）──────────
   ★特定の製品の画面には似せていません。色・形・字は WAKURIRE の物です。 */
.ia-app{width:min(860px,100%);margin:0 auto;border-radius:18px;overflow:hidden;
 background:#fff;border:1px solid var(--c-line);
 box-shadow:0 30px 70px rgba(20,40,90,.16);display:flex}
.ia-app-rail{flex:0 0 52px;background:var(--c-pale);border-right:1px solid var(--c-line);
 padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.ia-app-rail i{display:block;width:18px;height:18px;border-radius:5px;background:var(--c-line);opacity:.9}
.ia-app-rail i.on{background:var(--c-main2)}
.ia-app-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* ★窓の高さは、使う側のページで決めます（.ia-app-view） */
.ia-app-view{overflow:visible;height:auto;padding:16px}
.ia-app-roll{display:flex;flex-direction:column;gap:16px}
.ia-ex{display:flex;flex-direction:column;gap:9px}
/* 聞いたこと（右） */
.ia-ask{align-self:flex-end;max-width:84%;background:var(--c-main);color:#fff;
 border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;line-height:1.6;font-weight:700}
/* 返事（左） */
.ia-rep{align-self:flex-start;width:100%;font-size:13.5px;line-height:1.75;color:var(--c-text2)}
.ia-src{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:12px;font-weight:700;color:var(--c-main)}
.ia-src img{width:76px;height:auto;display:block}
.ia-src span{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--c-soft)}
/* 読み取った内容の表（2 列）
   ★<table> は使いません。**Chromium は <tr> の opacity を見ないので、
     1 行ずつ出す動きができません**（2026-10-09 に実測：線だけ残りました）。 */
.ia-tbl{font-size:13.5px}
.ia-tr{display:grid;grid-template-columns:34% minmax(0,1fr);gap:10px;
 padding:6px 0;border-bottom:1px solid var(--c-line2)}
.ia-tr b{font-weight:700;color:var(--c-muted)}
.ia-tr span{color:var(--c-ink)}
/* 3 つの見出しの返事 */
.ia-grp{margin:0}
.ia-grp+.ia-grp{margin-top:10px}
.ia-grp b{display:block;font-size:13px;color:var(--c-main);margin-bottom:3px}
.ia-grp span{display:block;position:relative;padding-left:14px}
.ia-grp span::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--c-main2);opacity:.6}
/* 保存しました */
.ia-saved{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13.5px;font-weight:700;color:#0B7F5C}
.ia-saved svg{flex:none}
.ia-kv{margin:0;padding:0;list-style:none;font-size:13px}
.ia-kv li{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--c-line2)}
.ia-kv b{flex:0 0 36%;color:var(--c-muted);font-weight:700}
/* 下の入力欄 */
.ia-app-bar{flex:0 0 auto;border-top:1px solid var(--c-line);padding:10px 14px;
 display:flex;align-items:center;gap:9px;background:#fff}
.ia-app-bar .plus{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--c-line);
 display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--c-muted);line-height:1}
/* WAKURIRE のロゴの小さな札（つないである印） */
.ia-bar-tag{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
 border-radius:999px;background:var(--c-soft);border:1px solid var(--c-line)}
.ia-bar-tag img{width:62px;height:auto;display:block}
.ia-bar-tx{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--c-muted);white-space:nowrap;overflow:hidden}
.ia-bar-tx.typed{color:var(--c-ink);font-weight:700}
.ia-bar-tx .ia-cur{display:inline-block;width:2px;height:1em;background:var(--c-ink);vertical-align:-2px;margin-left:1px}

/* 行を割らない（名前の並びや、言い切りの言葉を途中で切らない） */
.ia-nb{white-space:nowrap}
/* ★見出しの行は、手で決めます（2026-10-09）。
     ブラウザに任せると「ChatGPT・Claude・Gemini」が 1 行に入ったあと
     「が、」だけが次の行に落ちて、変な形になりました。
     1 行ずつこの箱に入れ、**折らない**ことにします。
     ★折れない代わりに、はみ出すことがあります。**字の大きさは、
       いちばん長い行（ChatGPT・Claude・Gemini が、）が入る所まで**にすること。 */
.ia-ln{display:block;white-space:nowrap}

@media (max-width:960px){
 .ia-ccard{padding:8px 11px}
 .ia-ccard span{font-size:11.5px}
 /* スマホは、チャットの画面の左の細い帯を出しません */
 .ia-app-rail{display:none}
 .ia-app-view{padding:12px}
 .ia-ask{font-size:13px;padding:9px 12px}
 .ia-rep{font-size:13px}
 .ia-tbl{font-size:13px}
 .ia-tr{grid-template-columns:38% minmax(0,1fr);gap:8px}
 .ia-grp span,.ia-kv{font-size:12.5px}
 .ia-bar-tx{font-size:12.5px}
 .ia-bar-tag img{width:54px}
}