/* AI検索チェック（/ai-check）。2026-10-07 から。
 * 試作（aio-prototype の public/style.css）のクラス名はそのまま使い、見た目はサイトに合わせて書き直した。
 * サイト共通の .steps（PROCESS）などとぶつからないよう、すべて .aio の中に閉じる。色・書体はサイトの変数を使う。
 * 画面の中身は assets/js/ai-check.js が入れ替える。 */

.aio{padding:clamp(3rem,7vw,5rem) 0 var(--sec)}
.aio .wrap{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:960px){ .aio .wrap{grid-template-columns:minmax(0,1fr)} }

/* ---- 左：見出しと流れ ---- */
.aio-side{position:sticky;top:calc(var(--hdr) + 1.5rem)}
@media (max-width:960px){ .aio-side{position:static} }
.aio-side .eyebrow,.aio-side .eyebrow .deg{color:var(--acc)}
/* サービス名は英語の「AI SEARCH CHECK」を主に、日本語の「AI検索診断」と「無料版」のラベルを添える（2026-10-07、本人が決めた）。
   PRO（結果の下）も同じ組み（.pro-title）。英語は欧文の書体（Garamond） */
.aio-title{margin:0;font-weight:500;line-height:1.2}
.aio-title .en,.aio .pro-title .en{display:block;font-family:var(--garamond);font-weight:500;letter-spacing:.06em;color:var(--ink)}
.aio-title .en{font-size:clamp(1.4rem,2vw,1.7rem);white-space:nowrap}  /* 左の欄（19rem）に1行で収める */
.aio-title .ja,.aio .pro-title .ja{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--ink-soft)}
.aio-free{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.08em;line-height:1;padding:.4em .7em;background:var(--acc);color:#FFF}
.aio-catch{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.6rem);line-height:1.6;margin:1.6rem 0 0;letter-spacing:.02em;color:var(--ink);max-width:none}
.aio-intro{margin:1.2rem 0 0;font-size:.92rem;line-height:1.95;color:var(--ink-soft)}
.aio-steps{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--rule-soft)}
.aio-steps li{display:flex;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-faint);font-size:.9rem;line-height:1.6}
.aio-steps li span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding-top:.15rem}
.aio-steps li small{display:block;font-size:.76rem;color:var(--ink-faint)}
.aio-steps li[aria-current="step"]{color:var(--ink)}
.aio-steps li[aria-current="step"] span{color:var(--acc)}
.aio-scope{margin-top:1.8rem;padding:1rem 1.1rem;background:var(--panel);font-size:.8rem;line-height:1.8;color:var(--ink-soft)}
.aio-scope span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--ink-faint)}
.aio-scope strong{display:block;font-family:var(--serif);font-weight:500;font-size:.95rem;color:var(--ink);margin:.2rem 0}

/* ---- 右：入れ替わる枠 ---- */
/* 結果の枠（.report-group）と問い合わせ（.inquiry）は <section>。サイト共通の section{padding:var(--sec) 0; border-top}
   が効いて上下に約140px空いていたので、診断の画面の中では消す。それぞれの余白は下で指定し直す */
.aio .aio-panel section{padding:0;border-top:0}
.aio-panel{background:#FFF;border:1px solid var(--rule-soft);padding:clamp(1.4rem,4vw,2.6rem)}
.aio .section-heading .eyebrow{color:var(--acc)}
.aio .section-heading h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.6;margin:.7rem 0 0}
.aio .section-heading h2:focus{outline:none}
.aio .section-heading p{margin:.6rem 0 0;font-size:.9rem;color:var(--ink-soft);max-width:none}
.aio h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.6;margin:0}

/* 入力 */
.aio label{display:block;margin:1.4rem 0 .45rem;font-size:.86rem;font-weight:500;color:var(--ink)}
.aio label b{font-weight:500;font-size:.68rem;color:#FFF;background:var(--acc);padding:.1em .45em;margin-left:.4em;vertical-align:.1em}
.aio .optional{font-size:.72rem;color:var(--ink-faint);margin-left:.4em}
.aio input,.aio textarea,.aio select{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;line-height:1.7;
  padding:.7rem .85rem;border:1px solid var(--rule);background:#FFF;color:var(--ink);border-radius:0}
.aio input:focus,.aio textarea:focus,.aio select:focus{outline:2px solid var(--ink);outline-offset:-1px}
.aio textarea{resize:vertical}
.aio .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){ .aio .form-row{grid-template-columns:1fr} }
.aio .hint{display:block;margin-top:.4rem;font-size:.78rem;line-height:1.7;color:var(--ink-faint)}
.aio .notice{font-size:.8rem;line-height:1.85;color:var(--ink-faint);max-width:none;margin:1rem 0 0}
.aio .privacy{margin:1.4rem 0 0;padding:.9rem 1rem;background:var(--panel);font-size:.8rem;line-height:1.85;color:var(--ink-soft);max-width:none}

/* ボタン：サイトのヘッダーの「無料で相談する」と同じ黒地に白抜き */
.aio .primary,.aio .secondary,.aio .text-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:inherit;font-size:.9rem;
  letter-spacing:.06em;text-decoration:none;cursor:pointer;border-radius:0;transition:background .2s ease,color .2s ease}
.aio .primary{background:var(--ink);color:#FFF;border:1px solid var(--ink);padding:.95rem 1.8rem}
.aio .primary:hover,.aio .primary:focus-visible{background:var(--acc);border-color:var(--acc)}
.aio .primary[disabled]{background:var(--rule);border-color:var(--rule);cursor:not-allowed}
.aio .primary span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;opacity:.75}
.aio .secondary{background:#FFF;color:var(--ink);border:1px solid var(--ink);padding:.75rem 1.4rem}
.aio .secondary:hover,.aio .secondary:focus-visible{background:var(--ink);color:#FFF}
.aio .text-btn{background:none;border:0;padding:.75rem 0;color:var(--ink-soft);text-decoration:underline;text-underline-offset:.25em}
.aio .full{width:100%;margin-top:1.6rem}
.aio .actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem}
.aio .actions.center{justify-content:center}

/* 帯・注意 */
.aio .target{display:flex;gap:.8rem;align-items:baseline;margin-top:1.4rem;padding:.7rem 1rem;background:var(--panel);font-size:.85rem}
.aio .target span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--ink-faint)}
.aio .mode-note{margin-top:1rem;font-size:.8rem;color:var(--ink-soft);border-left:2px solid var(--acc);padding:.2rem 0 .2rem .8rem}
.aio .error-note{margin-top:1rem;padding:.8rem 1rem;border:1px solid #E3B7A0;background:#FBF1EC;color:#8A3B15;font-size:.86rem;line-height:1.8}
.aio .result-note{margin-top:1rem;padding:.8rem 1rem;background:var(--panel);font-size:.86rem}

/* 読み取り中 */
.aio .reading-indicator{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft)}
.aio .spinner{width:1.1rem;height:1.1rem;border:2px solid var(--rule);border-top-color:var(--acc);border-radius:50%;animation:aio-spin .9s linear infinite}
@keyframes aio-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .aio .spinner{animation:none} }

/* 事業の理解と質問 */
.aio .context-box{margin-top:1.4rem;padding:.2rem 1.2rem 1.3rem;border:1px solid var(--rule-soft)}
.aio .profile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:1.2rem}
.aio .profile-actions .hint{margin:0}
.aio details{margin-top:1rem;border:1px solid var(--rule-soft);background:#FFF}
.aio summary{cursor:pointer;padding:.8rem 1rem;font-size:.86rem;list-style:none;display:flex;align-items:center;gap:.6rem}
.aio summary::-webkit-details-marker{display:none}
/* 見出しと件数は左に寄せて並べ、＋／－だけ右端へ */
.aio summary::after{content:"＋";font-family:var(--mono);margin-left:auto}
.aio details[open] > summary::after{content:"－"}
.aio .answer{padding:0 1rem 1rem;font-size:.86rem;line-height:1.85;color:var(--ink-soft)}
.aio .answer p{max-width:none;margin:.4rem 0 0}
.aio .badge{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;padding:.15em .6em;border:1px solid var(--rule);color:var(--ink-soft);background:#FFF}
.aio .badge.yes{border-color:var(--acc);color:var(--acc)}
.aio .questions{margin-top:1.6rem;border-top:1px solid var(--rule-soft)}
.aio .q-row{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.8rem;padding:1.2rem 0;border-bottom:1px solid var(--rule-soft)}
.aio .q-no{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--acc);padding-top:.15rem}
.aio .question-group{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--ink-faint)}
.aio .question-angle{display:block;font-size:.86rem;font-weight:500;color:var(--ink);margin:.2rem 0 .5rem}
.aio .q-content textarea{min-height:5.2rem;field-sizing:content}  /* 中身の長さに合わせて伸ばす（対応ブラウザのみ。非対応でもスクロールで読める） */

/* 調査中 */
.aio .progress-top{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;font-size:.86rem}
.aio .progress-top span{color:var(--ink-faint)}
.aio .progress-track{height:3px;background:var(--rule-soft);margin-top:.6rem}
.aio .progress-fill{height:100%;width:0;background:var(--acc);transition:width .3s ease}
.aio .progress-list{list-style:none;margin:1.2rem 0 0;padding:0}
.aio .progress-list li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--rule-soft);font-size:.86rem;line-height:1.7}
.aio .status-icon{position:relative;display:grid;place-items:center;width:1.6rem;height:1.6rem;border:1px solid var(--rule);border-radius:50%;font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)}
.aio .progress-list li.running .status-icon{border-color:var(--acc);color:var(--acc)}
.aio .progress-list li.done .status-icon{background:var(--ink);border-color:var(--ink);color:#FFF}
.aio .progress-list li.failed .status-icon{border-color:#C0582A;color:#C0582A}
/* 回答を待っているあいだ、止まって見えないように動かす（2026-10-07）。
   ・回答待ちの問いは、番号のまわりを輪が回る ・バーの中を光が流れる ・「Web検索中」の頭にも小さな輪 */
.aio .progress-list li.running .status-icon{border-color:transparent}
.aio .progress-list li.running .status-icon::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--rule-soft);border-top-color:var(--acc);animation:aio-spin .9s linear infinite}
.aio .progress-track{position:relative;overflow:hidden}
.aio .progress-track::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;opacity:.5;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:aio-slide 1.6s ease-in-out infinite}
@keyframes aio-slide{to{left:100%}}
.aio #phase-text::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.5em;vertical-align:-.1em;
  border:2px solid var(--rule);border-top-color:var(--acc);border-radius:50%;animation:aio-spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){
  .aio .progress-list li.running .status-icon::after,.aio .progress-track::after,.aio #phase-text::before{animation:none}
}

/* 結果 */
.aio .aio-panel .report-group{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.aio .report-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1rem}
.aio .report-heading span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--ink-faint)}
.aio .report-metric{margin-top:.6rem;font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.aio .results{display:grid;gap:1rem;margin-top:1rem}
.aio .result-item{border:1px solid var(--rule-soft);padding:1.1rem 1.2rem}
.aio .result-question{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem;font-size:.9rem;line-height:1.75;margin-bottom:.8rem}
.aio .result-question strong{font-weight:500}
.aio .review-summary{margin:.7rem 0 0;font-size:.88rem;line-height:1.85;color:var(--ink-soft);max-width:none}
.aio .evidence{margin:.8rem 0 0;padding:.5rem .9rem;border-left:2px solid var(--acc);background:var(--panel);font-size:.84rem;line-height:1.8;color:var(--ink-soft)}
.aio .answer-body{padding-top:.4rem;color:var(--ink)}
/* 回答の Markdown を表示用にしたもの（ai-check.js の formatAnswer） */
.aio .answer-body > span{display:block}
.aio .answer-body .ans-gap{height:.6em}
.aio .answer-body .ans-h{font-weight:500;margin-top:.6em}
.aio .answer-body .ans-li{position:relative;padding-left:1.1em}
.aio .answer-body .ans-li::before{content:"・";position:absolute;left:0}
.aio .answer-body .ans-li.d1{margin-left:1.1em}
.aio .answer-body .ans-li.d2{margin-left:2.2em}
.aio .answer-body strong{font-weight:600;color:var(--ink)}
.aio .citation{font-family:var(--mono);font-size:.72rem;color:var(--acc);text-decoration:none;margin:0 .1em}
.aio .source-links{display:flex;flex-direction:column;gap:.3rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--rule-soft)}
.aio .source-links a{font-size:.8rem;color:var(--ink-soft);overflow-wrap:anywhere}
.aio .save-report{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.2rem;margin-top:2.2rem;padding:1.1rem 1.2rem;background:var(--panel)}
.aio .save-report .notice{margin:.3rem 0 0}

/* 次の一歩：AI検索・競合比較診断の案内とフォーム（2026-10-07）。フォームを入れるので、暗い帯から明るい枠に変えた */
.aio .aio-panel .inquiry{margin-top:2.4rem;padding:clamp(1.4rem,4vw,2.2rem);background:var(--panel);border-top:2px solid var(--ink)}
.aio .inquiry .eyebrow{color:var(--acc)}
.aio .inquiry h3.pro-title{margin:0}
.aio .pro-title .en{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.aio .inquiry .pro-catch{font-family:var(--serif);font-weight:500;font-size:1.1rem;line-height:1.7;color:var(--ink);margin:1.2rem 0 0}
.aio .compare thead small{display:block;font-weight:400;font-size:.72rem;opacity:.85;margin-top:.15rem}
.aio .inquiry > p{font-size:.9rem;line-height:1.9;color:var(--ink-soft);max-width:none;margin:.8rem 0 0}
/* PRO の15問の3つの観点（2026-10-07、本人の案） */
.aio .pro-axes{margin:1rem 0 0;display:grid;gap:.5rem}
.aio .pro-axes > div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.8rem;align-items:baseline;padding:.7rem .9rem;background:#FFF;border-left:2px solid var(--acc)}
.aio .pro-axes dt{font-family:var(--serif);font-weight:500;font-size:.95rem;color:var(--ink)}
.aio .pro-axes dd{margin:0;font-size:.86rem;line-height:1.8;color:var(--ink-soft)}
@media (max-width:640px){ .aio .pro-axes > div{grid-template-columns:1fr;gap:.2rem} }
.aio .consultation-benefits{margin:1rem 0 0;padding-left:1.2rem;font-size:.88rem;line-height:1.9;color:var(--ink-soft)}
.aio .consultation-benefits li + li{margin-top:.3rem}
.aio .compare{width:100%;margin-top:1.4rem;border-collapse:collapse;font-size:.84rem;line-height:1.7;background:#FFF}
.aio .compare th,.aio .compare td{padding:.6rem .8rem;border:1px solid var(--rule-soft);text-align:left;vertical-align:top}
/* 見出しの行：無料版は黒、PRO はオレンジ。左の空欄は黒にしない（同じ黒だと無料版の欄が横に伸びて見え、主に見えてしまう。2026-10-07） */
.aio .compare thead th{font-weight:500;background:var(--ink);color:#FFF;border-color:var(--ink)}
.aio .compare thead th:first-child{background:#E2E2DB;border-color:var(--rule-soft)}
.aio .compare thead th:last-child{background:var(--acc);border-color:var(--acc);color:#FFF}
.aio .compare tbody th{font-weight:500;white-space:nowrap;color:var(--ink-soft)}
.aio .compare tbody td:last-child{color:var(--ink)}
.aio .inquiry .price{margin-top:1.2rem;font-size:.9rem;color:var(--ink)}
.aio .inquiry .price strong{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin-right:.3em}
.aio .inquiry .price span{display:block;margin-top:.2rem;font-size:.84rem;color:var(--acc)}
.aio .inquiry-form{margin-top:1.8rem;padding:clamp(1.2rem,3vw,1.8rem);background:#FFF;border:1px solid var(--rule-soft)}
.aio .inquiry-form h4{margin:0;font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.7}
.aio .inquiry-form .form-lead{margin:.2rem 0 0;font-size:.84rem;color:var(--acc)}
.aio .inquiry-form .form-row input{margin-top:0}
.aio .inquiry-form .form-row + .form-row{margin-top:.6rem}
@media (max-width:640px){ .aio .inquiry-form .form-row input + input{margin-top:.6rem} }
/* スマホ：結果の枠・PRO の灰色の枠・フォームの白い枠が入れ子で、比較表とフォームの幅が 260px ほどまで細っていた（2026-10-08）。
   枠の内側の余白を詰め、PRO の枠は結果の枠の左右いっぱいまで広げる */
@media (max-width:640px){
  .aio .aio-panel{padding:1.3rem 1rem}
  .aio .aio-panel .inquiry{margin-left:-1rem;margin-right:-1rem;padding:1.6rem 1rem}
  .aio .inquiry-form{padding:1.2rem 1rem}
  .aio .compare{font-size:.78rem;line-height:1.6}
  .aio .compare th,.aio .compare td{padding:.5rem .5rem}
  .aio .compare thead small{font-size:.66rem}
}
/* 同意のチェック。お問い合わせのフォーム（contact.css の .consent）と同じ見た目 */
.aio .inquiry-form .consent{margin-top:1.4rem}
.aio .inquiry-form .consent label{display:flex;align-items:flex-start;gap:.8em;margin:0;font-size:.9rem;font-weight:400;line-height:1.85;cursor:pointer}
.aio .inquiry-form .consent input[type="checkbox"]{flex:none;width:1.15rem;height:1.15rem;margin:.3rem 0 0;padding:0;accent-color:var(--ink)}
.aio .inquiry-form .consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.aio .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.aio .inquiry-done{margin:0;font-size:.9rem;line-height:1.9;color:var(--ink-soft)}
.aio .inquiry-done strong{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink);margin-bottom:.3rem}
.aio .inquiry-done:focus{outline:none}

/* PDF で保存（印刷）：結果だけを出す。JS が body に .printing-report を付ける */
@media print{
  @page{size:A4;margin:16mm}
  body.printing-report header,body.printing-report footer,body.printing-report .aio-side,body.printing-report .no-print{display:none!important}
  body.printing-report main{background:none}
  body.printing-report .aio{padding:0}
  body.printing-report .aio .wrap{display:block;padding:0}
  body.printing-report .aio-panel{border:0;padding:0}
  body.printing-report .aio .result-item,body.printing-report .aio details{break-inside:auto}
  body.printing-report .aio .report-heading,body.printing-report .aio .result-question{break-after:avoid}
  body.printing-report .aio .source-links a::after{content:' (' attr(href) ')';overflow-wrap:anywhere}
}

/* 社名なしの問いで AI が挙げた会社（2026-10-07） */
.aio .companies{list-style:none;margin:.2rem 0 0;padding:0;counter-reset:aio-co}
.aio .companies li{display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;gap:.1rem .6rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:.88rem;line-height:1.7}
.aio .companies li::before{counter-increment:aio-co;content:counter(aio-co,decimal-leading-zero);font-family:var(--mono);font-size:.7rem;color:var(--ink-faint)}
.aio .companies strong{font-weight:500;color:var(--ink)}
.aio .companies li > span:not(.badge){grid-column:2 / -1;font-size:.8rem;color:var(--ink-soft)}
.aio .companies .badge{grid-column:3;grid-row:1}
.aio .companies li.self strong{color:var(--acc)}

/* 保存した結果の URL（2026-10-07） */
.aio .share-report{margin-top:2.2rem;padding:1.1rem 1.2rem;border:1px solid var(--rule-soft)}
.aio .share-report .notice{margin:.3rem 0 0}
.aio .share-row{display:flex;gap:.6rem;margin-top:.8rem}
.aio .share-row input{flex:1;min-width:0;font-family:var(--mono);font-size:.8rem;background:var(--panel)}
.aio .share-row .secondary{flex:none;padding:.6rem 1.1rem}