@charset "utf-8";
/* ============================================================
   飛行機の神様 AInformation型デザイン
   jstork19_custom/assets/kami-ain.css   2026-09-10
   ------------------------------------------------------------
   ainformation.jp の ainews.css を写して、差し色だけ飛行機の神様の
   青（#0B63CE）に置き換えたもの。JSTORK19 と子テーマ style.css の
   あとに読み込む。器（ヘッダー・一覧・サイドバー・フッター）は
   ここで全部組み直し、記事本文は既存 style.css の見た目を残す。
   ============================================================ */

@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:optional;
  src:url("fonts/barlow-500.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:optional;
  src:url("fonts/barlow-600.woff2") format("woff2");}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:optional;
  src:url("fonts/barlow-700.woff2") format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:optional;
  src:url("fonts/barlow-condensed-500.woff2") format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:optional;
  src:url("fonts/barlow-condensed-600.woff2") format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:optional;
  src:url("fonts/barlow-condensed-700.woff2") format("woff2");}

/* 色は手本（ainformation.jp）の :root をそのまま写している。
   2026-09-10に藤井さんから「アニメーションを入れて全く同じに」と指示があり、
   それまで差し色だけ青（#0B63CE）に置き換えていたのをやめて全部そろえた。 */
body.k-ain{
  --ai-ink:#0D1B2A;
  --ai-ink2:#16293D;
  --ai-accent:#1AC2F1;
  --ai-accent-ink:#0A7FA8;
  --ai-alert:#E02B4A;
  --ai-paper:#ffffff;
  --ai-surface:#F2F6F8;
  --ai-line:#DCE4E9;
  --ai-text:#16232D;
  --ai-muted:#5C7080;
  --ai-chip:#E8EFF3;
  --ai-jp:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Noto Sans JP","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --ai-cond:"Barlow Condensed",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif;
  --ai-num:"Barlow",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif;
  --ai-wrap:1200px;

  font-family:var(--ai-jp);
  font-size:15px;
  line-height:1.8;
  color:var(--ai-text);
  background:var(--ai-paper);
  -webkit-font-smoothing:antialiased;
}

/* 親テーマ（JSTORK19）の器を無効にする。新デザインは自前のHTMLで組む -------- */
body.k-ain #container,
body.k-ain #content,
body.k-ain #main,
body.k-ain .main,
body.k-ain #inner-content,
body.k-ain .inner-content{max-width:none;width:auto;padding:0;margin:0;float:none;background:none;box-shadow:none;}
body.k-ain #header,
body.k-ain .header,
body.k-ain #footer,
body.k-ain .footer,
body.k-ain #sidebar1,
body.k-ain .breadcrumb,
body.k-ain #page-top,
body.k-ain #page_top,
body.k-ain .pagetop{display:none!important;}
body.k-ain a{color:inherit;text-decoration:none;}
body.k-ain img{max-width:100%;height:auto;}
body.k-ain a:focus-visible,
body.k-ain button:focus-visible,
body.k-ain input:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px;}

/* 画像を入れる箱。
   手本（AInformation）のCSSは height:100% で箱を埋めているが、これは
   アイキャッチが16:9で作られていることが前提。親の高さが aspect-ratio で決まると
   子の height:100% は auto に戻るため、16:7 の絵だと下にグレーの隙間が出る。
   飛行機の神様のアイキャッチは 728x322（16:7）なので、絶対配置で確実に埋める。 */
.k-ain .ai-lead__media,
.k-ain .ai-card__media,
.k-ain .ai-row__media,
.k-ain .ai-mini__img{position:relative;display:grid;grid-template:1fr/1fr;overflow:hidden;}
.k-ain .ai-lead__media img,
.k-ain .ai-card__media img,
.k-ain .ai-row__media img,
.k-ain .ai-mini__img img{grid-area:1/1;width:100%;height:100%;min-height:100%;object-fit:cover;margin:0;align-self:stretch;}

.k-ain .ai-wrap{max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;}
.k-ain .ai-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.k-ain .ai-logo-h1{display:contents;}

/* ---------- ヘッダー ---------- */
.k-ain .ai-hd{position:sticky;top:0;z-index:900;background:var(--ai-paper);border-bottom:1px solid var(--ai-line);}
.k-ain .ai-hd__in{display:flex;align-items:center;gap:24px;height:64px;max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;}
/* ロゴ。手本は英字なので字間を -.02em まで詰めているが、日本語で同じだけ詰めると
   画数の多い漢字が潰れて重く見える。太さを1段落として字間をわずかに開ける（2026-09-10） */
.k-ain .ai-logo{font-size:23px;font-weight:800;letter-spacing:.01em;white-space:nowrap;line-height:1;color:var(--ai-text);}
.k-ain .ai-logo b{color:var(--ai-accent);position:relative;display:inline-block;}
/* 手本と同じで、ロゴが脈打って輪が広がる。輪の大きさだけ「神様」2文字の幅に合わせた
   （手本の「AI」は30px。ここは38px。scale(1.6)まで広がってもヘッダー64pxに収まる） */
.k-ain .ai-logo b::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border:2px solid var(--ai-accent);border-radius:50%;opacity:0;pointer-events:none;}
.k-ain .ai-logo.is-play b{animation:ai-logo-beat 1.1s ease both;}
.k-ain .ai-logo.is-play b::before{animation:ai-logo-ring 1.1s ease-out both;}
@keyframes ai-logo-beat{
  0%,100%{transform:scale(1);filter:none;}
  22%{transform:scale(1.16);filter:drop-shadow(0 0 10px rgba(26,194,241,.85));}
  44%{transform:scale(1);}
  62%{transform:scale(1.1);filter:drop-shadow(0 0 7px rgba(26,194,241,.6));}
}
@keyframes ai-logo-ring{
  0%{transform:scale(.5);opacity:.95;}
  70%{opacity:.3;}
  100%{transform:scale(1.6);opacity:0;}
}
.k-ain .ai-gnav{display:flex;gap:22px;font-size:14px;font-weight:700;}
.k-ain .ai-gnav ul,
.k-ain .ai-gnav__ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;}
.k-ain .ai-gnav li{white-space:nowrap;margin:0;}
.k-ain .ai-gnav li::before{display:none;}
.k-ain .ai-gnav a{position:relative;color:var(--ai-text);transition:color .18s;}
.k-ain .ai-gnav a:hover{color:var(--ai-accent-ink);}
/* 触ると項目の下に2pxの線が左から伸びる（手本と同じ） */
.k-ain .ai-gnav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--ai-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s;}
.k-ain .ai-gnav a:hover::after{transform:scaleX(1);}
.k-ain .ai-hd__r{margin-left:auto;display:flex;align-items:center;gap:10px;}
/* 検索窓は手本と同じ大きさにする（幅360・高さ44・白地・入力16px）。
   トップにあった大きい検索バーを外したので、入口はここ1本にまとめた（2026-09-10） */
.k-ain .ai-search{display:flex;align-items:stretch;gap:0;padding:0;background:var(--ai-paper);border:1px solid #C6D2DA;border-radius:0;width:min(360px,34vw);transition:border-color .18s;}
.k-ain .ai-search:hover{border-color:#A9BAC6;}
.k-ain .ai-search:focus-within{border-color:var(--ai-accent);}
.k-ain .ai-search input{flex:1 1 auto;border:0;border-radius:0;background:none;font:inherit;font-size:16px;line-height:1.5;color:var(--ai-text);width:100%;outline:none;padding:9px 13px;min-width:0;}
.k-ain .ai-search input::placeholder{color:#8A99A5;opacity:1;}
.k-ain .ai-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
/* 検索ボタンは手本と同じ濃紺。差し色にすると帯やロゴと色がぶつかる（2026-09-10） */
.k-ain .ai-search__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin:0;border:0;border-radius:0;background:var(--ai-ink);color:#fff;font:inherit;font-size:13px;font-weight:700;line-height:1;padding:0 15px;cursor:pointer;white-space:nowrap;transition:background .18s;}
.k-ain .ai-search__go:hover{background:var(--ai-accent-ink);}
.k-ain .ai-search__go:active{background:#095E7C;}
.k-ain .ai-search-open{display:none;width:40px;height:40px;border:0;background:none;padding:0;cursor:pointer;align-items:center;justify-content:center;color:var(--ai-text);transition:color .18s;}
.k-ain .ai-search-open:hover{color:var(--ai-accent-ink);}
.k-ain .ai-burger{display:none;width:40px;height:40px;border:0;background:none;padding:0;cursor:pointer;align-items:center;justify-content:center;}
.k-ain .ai-burger span{display:block;width:20px;height:2px;background:var(--ai-text);position:relative;}
.k-ain .ai-burger span::before,
.k-ain .ai-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ai-text);}
.k-ain .ai-burger span::before{top:-6px;}
.k-ain .ai-burger span::after{top:6px;}
.k-ain .ai-spsearch{display:none;border-top:1px solid var(--ai-line);background:var(--ai-surface);padding:10px 20px;}
.k-ain .ai-spsearch.is-open{display:block;}
.k-ain .ai-spsearch__form{display:flex;gap:0;}
.k-ain .ai-spsearch__form input{flex:1;border:1px solid var(--ai-line);background:#fff;font:inherit;font-size:16px;padding:9px 12px;min-width:0;}
.k-ain .ai-spsearch__form button{border:0;background:var(--ai-accent);color:#fff;font:inherit;font-size:14px;font-weight:700;padding:0 16px;cursor:pointer;}

/* ---------- カテゴリ帯 ---------- */
.k-ain .ai-cb{background:var(--ai-ink);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.k-ain .ai-cb::-webkit-scrollbar{display:none;}
.k-ain .ai-cb__in{display:flex;max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;min-width:max-content;}
.k-ain .ai-cb__item{position:relative;flex:1 0 auto;min-width:118px;padding:11px 16px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.13);transition:background .15s;}
.k-ain .ai-cb__item:first-child{border-left:1px solid rgba(255,255,255,.13);}
.k-ain .ai-cb__item:hover{background:var(--ai-ink2);color:#fff;}
.k-ain .ai-cb__item:active{background:var(--ai-ink2);}
/* いま見ているカテゴリは差し色の面に濃紺の文字。手本と同じ当て方（2026-09-10） */
.k-ain .ai-cb__item.is-on{background:var(--ai-accent);color:var(--ai-ink);}
/* 触ると下から3pxの線が左端から伸びる */
.k-ain .ai-cb__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ai-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s;}
.k-ain .ai-cb__item:hover::after{transform:scaleX(1);}
.k-ain .ai-cb__item.is-on::after{content:none;}
.k-ain .ai-cb__ja{display:block;font-size:14px;font-weight:700;line-height:1.4;}
.k-ain .ai-cb__en{display:block;font-family:var(--ai-cond);font-size:11px;font-weight:600;letter-spacing:.09em;opacity:.72;line-height:1.4;}

/* ---------- ヘッダー下の導線バー ----------
   2026-09-10に藤井さんから「アニメーションを入れて全く同じに」と指示があり、
   手本と同じ横へ流れる帯にした。24秒で1周。同じ3項目を4セット並べて -25% ずらすので
   切れ目なくつながる。触っている間は止まる。動きを減らす設定の人には流さない。 */
.k-ain .ai-nmq{border-top:1px solid var(--ai-line);background:#EDF9FD;}
.k-ain .ai-nmq__in{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);}
.k-ain .ai-nmq__tr{display:flex;width:max-content;animation:ai-nmq-run 24s linear infinite;}
.k-ain .ai-nmq__set{display:flex;flex:0 0 auto;}
.k-ain .ai-nmq__i{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 150px 0 0;font-size:12px;line-height:27px;white-space:nowrap;color:#12384A;}
.k-ain .ai-nmq__i i{font-style:normal;font-weight:700;color:var(--ai-accent-ink);}
.k-ain .ai-nmq__i::after{content:"→";color:var(--ai-accent-ink);font-weight:700;transition:margin-left .15s;}
.k-ain .ai-nmq__i:hover{color:var(--ai-accent-ink);}
.k-ain .ai-nmq__i:hover::after{margin-left:3px;}
@keyframes ai-nmq-run{0%{transform:translateX(0);}100%{transform:translateX(-25%);}}
.k-ain .ai-nmq__in:hover .ai-nmq__tr,
.k-ain .ai-nmq__tr:focus-within{animation-play-state:paused;}

/* ---------- 速報の1行 ----------
   手本と同じで、最新3本が5秒ごとに下から上へ入れ替わる。
   読んでいる最中に変わらないよう、触っている間と別のタブを見ている間は止まる。 */
.k-ain .ai-strip{background:#1C3549;color:#fff;padding:19px 0 14px;}
.k-ain .ai-strip__in{display:flex;align-items:center;gap:18px;max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;}
.k-ain .ai-strip__lb{background:var(--ai-alert);font-family:var(--ai-cond);font-size:13px;font-weight:700;letter-spacing:.1em;padding:4px 12px;white-space:nowrap;}
.k-ain .ai-strip__slide{position:relative;flex:1 1 auto;min-width:0;font-size:13.5px;height:1.8em;}
.k-ain .ai-strip__slide .ai-strip__txt{position:absolute;left:0;right:0;top:0;display:block;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .4s .13s,transform .4s .13s,color .18s;}
.k-ain .ai-strip__slide .ai-strip__txt.is-on{opacity:1;visibility:visible;transform:none;}
.k-ain .ai-strip__slide .ai-strip__txt.is-out{opacity:0;visibility:visible;transform:translateY(-7px);transition:opacity .26s,transform .26s;}
.k-ain .ai-strip__txt{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;transition:color .18s;}
.k-ain .ai-strip__txt:hover{color:var(--ai-accent);}
.k-ain .ai-strip__txt b{font-family:var(--ai-num);color:var(--ai-accent);margin-right:9px;font-weight:600;}

/* トップの大きい検索バー（.ai-qs）は 2026-09-10 に外した。
   手本のトップには無いため。戻すときはこのブロックと front.php の form を書き戻す。 */

/* ---------- TOP STORY ---------- */
.k-ain .ai-hero{background:var(--ai-surface);border-bottom:1px solid var(--ai-line);padding:26px 0 30px;}
.k-ain .ai-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:26px;}
.k-ain .ai-lead__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ai-chip);}
.k-ain .ai-lead__flag{position:absolute;top:0;left:0;background:var(--ai-alert);color:#fff;font-family:var(--ai-cond);font-size:13px;font-weight:700;letter-spacing:.1em;padding:5px 13px;z-index:2;}
.k-ain .ai-lead__title{font-size:29px;font-weight:900;line-height:1.42;margin:14px 0 8px;letter-spacing:-.01em;}
.k-ain .ai-lead__media img{transition:transform .35s;}
.k-ain .ai-lead__media:hover img{transform:scale(1.03);}
.k-ain .ai-lead__title a:hover{color:var(--ai-accent-ink);}
.k-ain .ai-lead__ex{color:var(--ai-muted);font-size:14px;margin:0;max-width:62ch;}
.k-ain .ai-side__head{display:flex;align-items:baseline;gap:9px;padding-bottom:9px;border-bottom:2px solid var(--ai-ink);margin-bottom:2px;}
.k-ain .ai-side__ja{font-size:15px;font-weight:900;}
.k-ain .ai-side__en{font-family:var(--ai-cond);font-size:12px;font-weight:600;letter-spacing:.11em;color:var(--ai-muted);}

/* ---------- 小リスト ---------- */
.k-ain .ai-mini{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--ai-line);align-items:flex-start;}
.k-ain .ai-mini:hover .ai-mini__title{color:var(--ai-accent-ink);}
.k-ain .ai-mini__img{flex:0 0 106px;aspect-ratio:16/10;overflow:hidden;background:var(--ai-chip);}
.k-ain .ai-mini__txt{flex:1;min-width:0;}
.k-ain .ai-mini__title{display:-webkit-box;font-size:14px;font-weight:700;line-height:1.6;margin-top:3px;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- メタ・札 ---------- */
.k-ain .ai-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.k-ain .ai-meta--s{gap:7px;}
.k-ain .ai-badge{background:var(--ai-ink);color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;line-height:1.5;white-space:nowrap;}
.k-ain .ai-badge:hover{background:var(--ai-accent-ink);color:#fff;}
.k-ain .ai-badge--s{font-size:10.5px;padding:2px 7px;}
.k-ain .ai-date{font-family:var(--ai-num);font-size:12.5px;font-weight:600;color:var(--ai-muted);font-variant-numeric:tabular-nums;}
.k-ain .ai-wd{font-family:var(--ai-cond);letter-spacing:.05em;}

/* ---------- 本体レイアウト ---------- */
.k-ain .ai-main{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:40px;padding:34px 0 10px;align-items:start;}
.k-ain .ai-main--full{grid-template-columns:minmax(0,1fr);}
.k-ain .ai-sec{margin-bottom:38px;}
.k-ain .ai-sec__head{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:2px solid var(--ai-ink);padding-bottom:9px;margin-bottom:18px;}
.k-ain .ai-sec__title{font-size:19px;font-weight:900;margin:0;padding:0;display:flex;align-items:baseline;gap:10px;background:none;border:0;color:var(--ai-text);}
.k-ain .ai-sec__title::before,
.k-ain .ai-sec__title::after{display:none;}
.k-ain .ai-sec__en{font-family:var(--ai-cond);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ai-muted);}
.k-ain .ai-more{font-size:13px;font-weight:700;color:var(--ai-accent-ink);white-space:nowrap;}
.k-ain .ai-more::after{content:" \203A";}

/* ---------- 記事カード ---------- */
.k-ain .ai-grid{display:grid;gap:22px 20px;}
.k-ain .ai-grid--2{grid-template-columns:repeat(2,1fr);}
.k-ain .ai-grid--3{grid-template-columns:repeat(3,1fr);}
.k-ain .ai-grid--4{grid-template-columns:repeat(4,1fr);}
.k-ain .ai-card{margin:0;}
.k-ain .ai-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ai-chip);}
.k-ain .ai-card__media img{transition:transform .35s;}
.k-ain .ai-card:hover .ai-card__media img{transform:scale(1.055);}
.k-ain .ai-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ai-chip) 0%,var(--ai-surface) 100%);position:relative;}
.k-ain .ai-noimg::after{content:"飛行機の神様";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ai-muted);opacity:.5;}
.k-ain .ai-card__body{padding-top:10px;}
.k-ain .ai-card__title{font-size:15px;font-weight:700;line-height:1.6;margin:6px 0 0;padding:0;background:none;border:0;color:var(--ai-text);}
.k-ain .ai-card__title::before,
.k-ain .ai-card__title::after{display:none;}
.k-ain .ai-card--s .ai-card__title{font-size:13.5px;}
.k-ain .ai-card:hover .ai-card__title{color:var(--ai-accent-ink);}

/* 横長リスト（一覧ページ） */
.k-ain .ai-row{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--ai-line);align-items:start;margin:0;}
.k-ain .ai-row:first-child{padding-top:0;}
.k-ain .ai-row__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ai-chip);}
.k-ain .ai-row__media img{transition:transform .35s;}
.k-ain .ai-row:hover .ai-row__media img{transform:scale(1.045);}
.k-ain .ai-row__title{font-size:18px;font-weight:700;line-height:1.55;margin:7px 0 6px;padding:0;background:none;border:0;color:var(--ai-text);}
.k-ain .ai-row__title::before,
.k-ain .ai-row__title::after{display:none;}
.k-ain .ai-row:hover .ai-row__title{color:var(--ai-accent-ink);}
.k-ain .ai-row__ex{font-size:13.5px;color:var(--ai-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- サイドバー ---------- */
.k-ain .ai-aside{min-width:0;}
.k-ain .ai-box{border:1px solid var(--ai-line);margin-bottom:24px;background:#fff;}
.k-ain .ai-box__head{background:var(--ai-ink);color:#fff;padding:10px 14px;display:flex;align-items:baseline;gap:9px;}
.k-ain .ai-box__ja{font-size:14px;font-weight:900;}
.k-ain .ai-box__en{font-family:var(--ai-cond);font-size:11px;font-weight:600;letter-spacing:.11em;opacity:.7;}
.k-ain .ai-box__body{padding:14px;}
.k-ain .ai-box__body img{margin:0 auto;}
.k-ain .ai-rank{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--ai-line);align-items:flex-start;}
.k-ain .ai-rank:last-child{border-bottom:0;}
.k-ain .ai-rank:hover .ai-rank__title{color:var(--ai-accent-ink);}
/* 箱の1つ目は見出しなので、1位は nth-child(2) になる（金・銀・銅の順） */
.k-ain .ai-rank__no{flex:0 0 26px;font-family:var(--ai-num);font-size:25px;font-weight:700;line-height:1;color:var(--ai-accent);font-variant-numeric:tabular-nums;}
.k-ain .ai-rank:nth-child(2) .ai-rank__no{color:#B8892B;}
.k-ain .ai-rank:nth-child(3) .ai-rank__no{color:#8A93A0;}
.k-ain .ai-rank:nth-child(4) .ai-rank__no{color:#A6714A;}
.k-ain .ai-rank:nth-child(n+5) .ai-rank__no{color:var(--ai-muted);font-size:21px;}
.k-ain .ai-rank__title{display:-webkit-box;font-size:13px;font-weight:700;line-height:1.6;margin-top:4px;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.k-ain .ai-box__minis{padding:2px 14px 8px;}
.k-ain .ai-box__minis .ai-mini:last-child{border-bottom:0;}
.k-ain .ai-fl{margin-top:44px;padding-top:8px;border-top:1px solid var(--ai-line);}
.k-ain .ai-tagwrap{display:flex;flex-wrap:wrap;gap:7px;padding:14px;}
.k-ain .ai-tag{border:1px solid var(--ai-line);background:var(--ai-surface);font-size:12px;font-weight:500;padding:5px 11px;}
.k-ain .ai-tag:hover{border-color:var(--ai-accent);color:var(--ai-accent-ink);}

/* 早見表への入口 */
.k-ain .ai-mochi{display:block;background:var(--ai-ink);color:#fff;padding:20px 16px 18px;margin-bottom:24px;}
.k-ain .ai-mochi__en{display:block;font-family:var(--ai-cond);font-size:11px;font-weight:600;letter-spacing:.14em;color:#7FC0FF;}
.k-ain .ai-mochi__t{display:block;font-size:19px;font-weight:900;line-height:1.5;margin:7px 0 9px;}
.k-ain .ai-mochi__d{display:block;font-size:12px;line-height:1.75;opacity:.72;margin-bottom:14px;}
.k-ain .ai-mochi__b{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ai-accent);color:#fff;font-size:13.5px;font-weight:900;padding:11px;}
.k-ain .ai-mochi:hover .ai-mochi__b{background:#fff;color:var(--ai-ink);}

/* ---------- 一覧ページの見出し ---------- */
.k-ain .ai-phead{background:var(--ai-surface);border-bottom:1px solid var(--ai-line);padding:26px 0;}
.k-ain .ai-phead__in{max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;}
.k-ain .ai-phead__en{font-family:var(--ai-cond);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ai-accent-ink);}
.k-ain .ai-phead__t{font-size:27px;font-weight:900;margin:4px 0 0;padding:0;line-height:1.4;background:none;border:0;color:var(--ai-text);}
.k-ain .ai-phead__t::before,
.k-ain .ai-phead__t::after{display:none;}
.k-ain .ai-phead__d{font-size:13.5px;color:var(--ai-muted);margin:8px 0 0;max-width:70ch;}
.k-ain .ai-phead__meta{display:flex;align-items:center;gap:14px;margin-top:10px;font-family:var(--ai-num);font-size:12.5px;color:var(--ai-muted);font-variant-numeric:tabular-nums;}
.k-ain .ai-phead__count b{color:var(--ai-text);font-size:15px;font-weight:700;}
.k-ain .ai-subcats{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.k-ain .ai-subcats a{border:1px solid var(--ai-line);background:var(--ai-paper);font-size:12.5px;font-weight:600;padding:6px 13px;}
.k-ain .ai-subcats a span{opacity:.55;}
.k-ain .ai-subcats a:hover{border-color:var(--ai-accent);color:var(--ai-accent-ink);}
.k-ain .ai-crumb{font-size:12px;color:var(--ai-muted);padding:11px 0;display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.k-ain .ai-crumb a:hover{color:var(--ai-accent-ink);text-decoration:underline;}
.k-ain .ai-crumb span{opacity:.5;}
.k-ain .ai-crumb__now{opacity:1;color:var(--ai-text);}

/* ---------- ページ送り ---------- */
.k-ain .ai-pager{display:flex;gap:6px;justify-content:center;margin:34px 0 10px;flex-wrap:wrap;font-family:var(--ai-num);}
.k-ain .ai-pager .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--ai-line);font-size:14px;font-weight:600;background:var(--ai-paper);color:var(--ai-text);border-radius:0;}
.k-ain .ai-pager .page-numbers:hover{border-color:var(--ai-accent);color:var(--ai-accent-ink);background:var(--ai-paper);}
.k-ain .ai-pager .page-numbers.current{background:var(--ai-ink);border-color:var(--ai-ink);color:#fff;}
.k-ain .ai-pager .dots{border:0;background:none;}

/* ---------- 記事ページ ---------- */
.k-ain .ai-single{padding:0 0 10px;min-width:0;}
.k-ain .ai-single__head{padding:4px 0 20px;border-bottom:1px solid var(--ai-line);margin-bottom:24px;}
.k-ain .ai-single__title{font-size:31px;font-weight:900;line-height:1.45;margin:12px 0 12px;padding:0;letter-spacing:-.01em;background:none;border:0;color:var(--ai-text);}
.k-ain .ai-single__title::before,
.k-ain .ai-single__title::after{display:none;}
.k-ain .ai-single__info{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-family:var(--ai-num);font-size:12.5px;color:var(--ai-muted);font-variant-numeric:tabular-nums;}
.k-ain .ai-single__info span{display:inline-flex;align-items:center;gap:5px;}
.k-ain .ai-single__info b{font-weight:700;color:var(--ai-text);font-size:11.5px;background:var(--ai-chip);padding:2px 6px;}
.k-ain .ai-single__info svg{opacity:.55;}
.k-ain .ai-single__eye{margin:0 0 28px;background:var(--ai-chip);display:block;line-height:0;}
.k-ain .ai-single__eye img{width:100%;max-width:100%;height:auto;display:block;}

/* 本文。既存 style.css の見た目を残したいので幅と行間だけ整える */
.k-ain .ai-body{font-size:16px;line-height:1.95;}
.k-ain .ai-body h2,
.k-ain .ai-body h3{scroll-margin-top:78px;}

.k-ain .ai-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0;}
.k-ain .ai-tags a{border:1px solid var(--ai-line);background:var(--ai-surface);font-size:12px;font-weight:600;padding:5px 12px;color:var(--ai-muted);}
.k-ain .ai-tags a::before{content:"#";opacity:.5;margin-right:2px;}
.k-ain .ai-tags a:hover{border-color:var(--ai-accent);color:var(--ai-accent-ink);}

.k-ain .ai-share{display:flex;gap:8px;align-items:center;margin:0 0 24px;flex-wrap:wrap;}
.k-ain .ai-share__lb{font-family:var(--ai-cond);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ai-muted);}
.k-ain .ai-share a{border:1px solid var(--ai-line);background:var(--ai-paper);color:var(--ai-muted);font-size:12px;font-weight:700;padding:6px 14px;transition:.15s;}
.k-ain .ai-share a:hover{background:var(--ai-ink);border-color:var(--ai-ink);color:#fff;}

.k-ain .ai-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ai-line);border:1px solid var(--ai-line);margin:38px 0 0;}
.k-ain .ai-nav a{background:var(--ai-paper);padding:16px 18px;display:block;min-height:96px;}
.k-ain .ai-nav a:hover{background:var(--ai-surface);}
.k-ain .ai-nav__lb{font-family:var(--ai-cond);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ai-muted);display:block;margin-bottom:6px;}
.k-ain .ai-nav__t{font-size:13.5px;font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.k-ain .ai-nav a:hover .ai-nav__t{color:var(--ai-accent-ink);}
.k-ain .ai-nav .is-next{text-align:right;}
.k-ain .ai-rel{margin-top:44px;}

/* ---------- カテゴリ一覧（既存の k-cats を新デザインへなじませる） ---------- */
.k-ain .ai-catsec{padding:30px 0 6px;}
.k-ain .ai-catsec .k-cats{opacity:1;transform:none;}
.k-ain .k-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.k-ain .k-cats a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--ai-surface);border:1px solid var(--ai-line);padding:18px 8px 15px;text-align:center;transition:.15s;}
.k-ain .k-cats a:hover{border-color:var(--ai-accent);background:#fff;}
/* 白い面に置く線画なので、差し色そのままだと薄くて読めない。1段濃い方を当てる（2026-09-10） */
.k-ain .k-cats a svg{width:22px;height:22px;color:var(--ai-accent-ink);}
.k-ain .k-cats a b{font-size:14px;font-weight:700;color:var(--ai-text);}
.k-ain .k-cats a span{font-family:var(--ai-num);font-size:11.5px;font-weight:600;color:var(--ai-muted);background:var(--ai-chip);padding:1px 8px;}

/* ---------- 早見表（既存の k-qt をそのまま出す） ---------- */
.k-ain .k-qt{opacity:1;transform:none;}
.k-ain .k-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.k-ain .k-more{flex:1;min-width:220px;display:block;text-align:center;background:var(--ai-accent);color:#fff;font-weight:700;font-size:14px;padding:13px;}
.k-ain .k-more:hover{background:var(--ai-accent-ink);color:#fff;}
.k-ain .k-more--sub{background:#fff;color:var(--ai-text);border:1px solid var(--ai-line);}
.k-ain .k-more--sub:hover{background:var(--ai-surface);color:var(--ai-text);border-color:var(--ai-accent);}

/* ---------- フッター ---------- */
.k-ain .ai-ft{background:var(--ai-ink);color:#fff;margin-top:44px;padding:38px 0 26px;}
.k-ain .ai-ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;max-width:var(--ai-wrap);margin:0 auto;padding:0 20px;}
.k-ain .ai-ft h4{font-size:13px;font-weight:900;margin:0 0 12px;padding:0;background:none;border:0;color:#7FC0FF;}
.k-ain .ai-ft h4::before,
.k-ain .ai-ft h4::after{display:none;}
.k-ain .ai-ft ul{list-style:none;margin:0;padding:0;font-size:13px;}
.k-ain .ai-ft li{margin-bottom:8px;opacity:.85;padding:0;}
.k-ain .ai-ft li::before{display:none;}
.k-ain .ai-ft li a:hover{opacity:1;color:#7FC0FF;}
.k-ain .ai-ft__logo{font-size:21px;font-weight:900;margin-bottom:9px;}
.k-ain .ai-ft__logo b{color:#7FC0FF;}
.k-ain .ai-ft__d{font-size:12.5px;opacity:.62;line-height:1.85;max-width:34ch;}
.k-ain .ai-ft__b{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;text-align:center;font-size:11.5px;opacity:.5;font-family:var(--ai-num);}

.k-ain .ai-empty{border:1px solid var(--ai-line);background:var(--ai-surface);padding:40px 24px;text-align:center;color:var(--ai-muted);font-size:14px;}

/* ---------- スマホのメニュー ---------- */
.k-ain .ai-drawer{position:fixed;inset:0;z-index:1000;overflow:hidden;background:rgba(18,33,46,.55);opacity:0;visibility:hidden;transition:opacity .2s;}
.k-ain .ai-drawer.is-open{opacity:1;visibility:visible;}
.k-ain .ai-drawer__panel{position:absolute;top:0;right:0;width:min(320px,86vw);height:100%;background:var(--ai-paper);padding:20px;overflow-y:auto;transform:translateX(100%);transition:transform .25s;}
.k-ain .ai-drawer.is-open .ai-drawer__panel{transform:none;}
.k-ain .ai-drawer__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ai-text);}
.k-ain .ai-drawer__nav{list-style:none;margin:44px 0 0;padding:0;}
.k-ain .ai-drawer__nav li{border-bottom:1px solid var(--ai-line);padding:0;}
.k-ain .ai-drawer__nav li::before{display:none;}
.k-ain .ai-drawer__nav a{display:block;padding:13px 4px;font-size:15px;font-weight:700;}
.k-ain .ai-drawer__nav a:hover{color:var(--ai-accent-ink);}

/* ---------- 画面の幅で変える ---------- */
@media (max-width:1000px){
  .k-ain .ai-hero__grid{grid-template-columns:minmax(0,1fr);}
  .k-ain .ai-main{grid-template-columns:minmax(0,1fr);gap:30px;}
  .k-ain .ai-grid--4{grid-template-columns:repeat(2,1fr);}
  .k-ain .ai-gnav{display:none;}
  .k-ain .ai-burger{display:flex;}
  .k-ain .k-cats{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:680px){
  .k-ain .ai-search{display:none;}
  .k-ain .ai-search-open{display:flex;}
  .k-ain .ai-grid--3,
  .k-ain .ai-grid--4,
  .k-ain .ai-grid--2{grid-template-columns:1fr;}
  .k-ain .ai-lead__title{font-size:22px;}
  .k-ain .ai-single__title{font-size:23px;}
  .k-ain .ai-hd__in{height:56px;gap:12px;}
  .k-ain .ai-logo{font-size:19px;}
  .k-ain .ai-row{grid-template-columns:118px 1fr;gap:14px;}
  .k-ain .ai-row__title{font-size:15px;line-height:1.55;}
  .k-ain .ai-row__ex{display:none;}
  .k-ain .ai-ft__grid{grid-template-columns:1fr 1fr;gap:22px;}
  .k-ain .ai-phead__t{font-size:21px;}
  .k-ain .k-cats{grid-template-columns:repeat(3,1fr);gap:8px;}
  .k-ain .k-cats a{padding:14px 5px 12px;}
  .k-ain .k-cats a b{font-size:12.5px;}
  .k-ain .ai-nmq__i{height:24px;line-height:24px;font-size:11px;padding-right:120px;}
  .k-ain .ai-nmq__tr{animation-duration:21s;}
  .k-ain .ai-nmq__in{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
  .k-ain .ai-nav{grid-template-columns:1fr;}
  .k-ain .ai-nav .is-next{text-align:left;}
  .k-ain .ai-body{font-size:16px;}
}
/* 動きを減らす設定にしている人には、流れる帯も脈打つロゴも出さない。
   帯は止めたぶん指で横へ動かせるようにして、複製した2セット目以降は隠す（手本と同じ） */
@media (prefers-reduced-motion:reduce){
  .k-ain *{transition:none!important;animation:none!important;}
  .k-ain .ai-nmq__in{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .k-ain .ai-nmq__set + .ai-nmq__set{display:none;}
  .k-ain .ai-nmq__i{padding-right:40px;}
  .k-ain .ai-strip__slide{height:auto;}
  .k-ain .ai-strip__slide .ai-strip__txt{position:static;opacity:1;visibility:visible;transform:none;}
  .k-ain .ai-strip__slide .ai-strip__txt + .ai-strip__txt{display:none;}
}