/* AI料金比較ナビ /ai-ryokin  2026-09-25
   このファイルと airyokin.js / airyokin-calc.js を消せば、ページは本文だけに戻る。
   色と骨格は /ai-tools（aitools.css）と同じものにそろえている。 */

.ryk{
  --sky:#1AC2F1; --sky-d:#0E9BC4; --ink:#0D1B2A; --ink2:#1C3549;
  --bg:#f7f8fa; --card:#fff; --txt:#12212e; --sub:#61707d; --line:#eaeef2;
  --face:#f2f6f9; --face2:#e8eef4; --acc:#0E9BC4; --warn:#c2554e; --ok:#1f6b49;
  --r:10px; --r2:4px;
  --sh:0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06);
  --font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px;line-height:1.75;
}
/* ★ヘッダーはページ側のフォントを継がない。/ai-tools でロゴが太って枠からはみ出した（2026-09-14） */
body.ai-ryokin-page .ai-hd{font-family:var(--ai-jp,"Hiragino Sans",Meiryo,sans-serif);letter-spacing:0}
.ryk *{box-sizing:border-box}
.ryk .wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.ryk button{cursor:pointer;border:0;background:none;font:inherit;color:inherit;font-family:inherit}
.ryk input{font:inherit;color:inherit}
.ryk h2{font-size:19px;font-weight:800;margin:0 0 10px;letter-spacing:.01em}
.ryk h3{font-size:15.5px;font-weight:800;margin:0 0 4px}
.ryk a{color:var(--sky-d)}

/* ヘッダー */
.ryk-hd{background:var(--card);padding:24px 0 20px}
.ryk-ttl{font-size:25px;font-weight:900;margin:0;letter-spacing:.01em}
.ryk-ttl .lg1{color:var(--sky-d)}
.ryk-sub{margin:6px 0 0;font-size:13.5px;color:var(--sub)}
.ryk-date{display:inline-block;margin-left:12px;color:var(--sub);font-size:12.5px}
.ryk-body{padding:20px 18px 70px}

/* ---------- 入力 ---------- */
.ryk-in{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px 20px}
.ryk-in__row{padding:12px 0;border-top:8px solid var(--bg)}
.ryk-in__row:first-child{padding-top:0;border-top:0}
.ryk-lb{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
.ryk-lbn{font-weight:500;color:var(--sub);margin-left:6px}
.ryk-pplbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ryk-num{width:96px;padding:10px 12px;border:0;background:var(--face);border-radius:var(--r2);
  font-size:20px;font-weight:800;text-align:right;-moz-appearance:textfield}
.ryk-num::-webkit-outer-spin-button,.ryk-num::-webkit-inner-spin-button{opacity:1;height:28px}
.ryk-unit{font-size:14px;font-weight:700;margin-right:6px}
.ryk-range{flex:1;min-width:180px;accent-color:var(--sky-d);height:24px}
.ryk-pplq{display:flex;gap:6px;flex-wrap:wrap}
.ryk-pplq button{background:var(--face);padding:7px 12px;border-radius:var(--r2);font-size:13px;font-weight:700;color:#33475a}
.ryk-pplq button:hover{background:var(--face2)}
.ryk-pplq button.on{background:var(--sky-d);color:#fff}

.ryk-uses{display:flex;gap:8px;flex-wrap:wrap}
.ryk-chip{background:var(--face);padding:9px 14px;border-radius:var(--r2);font-size:13.5px;color:#33475a;font-weight:500;transition:.14s}
.ryk-chip:hover{background:var(--face2)}
.ryk-chip.on{background:var(--sky-d);color:#fff;font-weight:700}

.ryk-in__opt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ryk-in__opt .ryk-lb{margin:0}
.ryk-seg{display:flex;background:var(--face);border-radius:var(--r2);overflow:hidden}
.ryk-seg button{padding:9px 18px;font-size:13.5px;font-weight:700;color:#33475a}
.ryk-seg button.on{background:var(--sky-d);color:#fff}
.ryk-ck{display:flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.ryk-ck input{width:17px;height:17px;accent-color:var(--sky-d)}

/* ---------- 結果 ---------- */
.ryk-res{margin-top:18px;min-height:120px}
.ryk-empty{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:28px 20px;margin:0;
  text-align:center;color:var(--sub);font-size:14px}
.ryk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ryk-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px 16px 14px;
  display:flex;flex-direction:column;text-align:left;transition:.14s;position:relative}
.ryk-card:hover{box-shadow:0 3px 8px rgba(13,27,42,.08),0 16px 36px rgba(13,27,42,.12)}
.ryk-card.on{box-shadow:0 0 0 2px var(--sky-d),var(--sh)}
.ryk-card__t{font-size:13px;font-weight:800;color:var(--sub);margin:0 0 8px}
.ryk-card.on .ryk-card__t{color:var(--sky-d)}
.ryk-card__y{font-size:26px;font-weight:900;line-height:1.25;letter-spacing:-.01em}
.ryk-card__y small{font-size:14px;font-weight:800;margin-left:2px}
.ryk-card__m{font-size:13px;color:var(--sub);margin:3px 0 0}
.ryk-card__n{font-size:12.5px;color:var(--sub);margin:8px 0 0;padding-top:8px;border-top:6px solid var(--bg)}
.ryk-card__bad{color:var(--warn);font-weight:700}
.ryk-card__free .ryk-card__y{color:var(--ok)}

/* 内訳 */
.ryk-det{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-top:12px;padding:18px 20px 20px}
.ryk-det__hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.ryk-det__hd h2{margin:0}
.ryk-det__sum{font-size:13.5px;color:var(--sub)}
.ryk-det__lead{font-size:13.5px;color:var(--sub);margin:0 0 14px}
.ryk-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ryk-tb{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.ryk-tb th,.ryk-tb td{padding:10px 12px;text-align:left;vertical-align:top}
.ryk-tb thead th{background:var(--face);font-size:12.5px;font-weight:800;color:#33475a;white-space:nowrap}
.ryk-tb tbody tr{background:var(--card)}
.ryk-tb tbody tr:nth-child(even){background:#fbfcfd}
.ryk-tb tbody th{font-weight:800}
.ryk-tb .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ryk-tb .ryk-how{color:var(--sub);font-size:12.5px}
.ryk-tb tfoot th,.ryk-tb tfoot td{background:var(--face);font-weight:900;font-size:14.5px}
.ryk-calc{font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.ryk-mk{display:inline-block;background:var(--face2);color:#3c5468;font-size:11px;font-weight:700;
  padding:2px 6px;border-radius:3px;margin-left:5px;white-space:nowrap}
.ryk-mk.w{background:#fbeceb;color:var(--warn)}
.ryk-mk.g{background:#e7f5ec;color:var(--ok)}
.ryk-mk.b{background:#e6f5fb;color:var(--sky-d)}
.ryk-note{font-size:12.5px;color:var(--sub);margin:12px 0 0;line-height:1.7}
.ryk-note b{color:var(--txt)}

/* もっと安くする手・無料 */
.ryk-more{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ryk-box{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.ryk-box h3{margin-bottom:6px}
.ryk-box p{margin:0 0 8px;font-size:13.5px;color:var(--sub)}
.ryk-list{margin:0;padding:0;list-style:none;font-size:13.5px}
.ryk-list li{padding:7px 0;border-top:6px solid var(--bg)}
.ryk-list li:first-child{border-top:0;padding-top:0}
.ryk-list b{font-weight:800}
.ryk-list span{color:var(--sub);font-size:12.5px}

/* 落とす */
.ryk-dl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.ryk-btn{background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--r2);font-size:13.5px;font-weight:700}
.ryk-btn:hover{background:var(--ink2)}
.ryk-btn.done{background:var(--ok)}
.ryk-dlnote{font-size:12.5px;color:var(--sub)}

/* 静的な表・FAQ・出どころ */
.ryk-st,.ryk-faq,.ryk-about{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px 20px 22px;margin-top:22px}
.ryk-stlead,.ryk-stnote{font-size:13px;color:var(--sub);margin:0 0 12px;line-height:1.7}
.ryk-stnote{margin:12px 0 0}
.ryk-qa{padding:12px 0;border-top:8px solid var(--bg)}
.ryk-qa:first-of-type{padding-top:0;border-top:0}
.ryk-qa p{margin:0;font-size:13.5px;color:#3d4d59;line-height:1.72}
.ryk-rules{margin:8px 0 12px;padding-left:1.2em;font-size:13.5px;color:#3d4d59}
.ryk-rules li{margin:4px 0}
.ryk-cite{font-size:12.5px;color:var(--sub);margin:0;line-height:1.7}
.ryk-about p{font-size:13.5px;color:#3d4d59;margin:0 0 10px;line-height:1.72}

/* ---------- スマホ ---------- */
@media (max-width:900px){
  .ryk-cards{grid-template-columns:1fr 1fr}
  .ryk-more{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ryk-hd{padding:18px 0 16px}
  .ryk-ttl{font-size:21px}
  .ryk-date{display:block;margin:2px 0 0}
  .ryk-body{padding:16px 14px 56px}
  .ryk .wrap{padding:0 14px}
  .ryk-in{padding:14px 14px 16px}
  .ryk-cards{grid-template-columns:1fr}
  .ryk-card__y{font-size:23px}
  .ryk-range{min-width:120px}
  .ryk-st,.ryk-faq,.ryk-about,.ryk-det,.ryk-box{padding:16px 14px 18px}
  .ryk-dl{gap:8px}
  .ryk-btn{padding:10px 14px;font-size:13px}
}

/* ---------- 印刷（稟議に貼る用） ---------- */
@media print{
  body.ai-ryokin-page .ai-hd,body.ai-ryokin-page .ai-ft,body.ai-ryokin-page .ai-drawer,
  .ryk-in__row.ryk-in__ppl .ryk-range,.ryk-pplq,.ryk-dl,.ryk-uses .ryk-chip:not(.on),
  .ryk-card:not(.on),.ryk-faq,.ryk-sr,.ai-sr{display:none!important}
  .ryk,.ryk-body{background:#fff}
  .ryk-hd{padding:0 0 8px}
  .ryk-in,.ryk-det,.ryk-box,.ryk-st,.ryk-about{box-shadow:none;border:1px solid #d6dde3;break-inside:avoid;page-break-inside:avoid}
  .ryk-cards{display:block}
  .ryk-card.on{box-shadow:none;border:1px solid #d6dde3}
  .ryk-tb{min-width:0;font-size:11pt}
  .ryk-tw{overflow:visible}
  .ryk-print-only{display:block!important}
  a[href]:after{content:""}
}
.ryk-print-only{display:none}