@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");}

/* ------------------------------------------------------------------
   おでかけの色（2026-09-28・「今日どこいく？」への意匠刷新）
   ------------------------------------------------------------------
   いままでは手本（ainformation.jp）の水色 #1AC2F1 をそのまま写していた。
   藤井さんの指示「転職ボイスのような、カラフルな感じに。ただ転職ボイスは
   濃い色なので、より明るく楽しくワクワクするような色使いに」で全部入れ替えた。
   選んだのは見本の「色2＝7色を塗りで使う」。水色は飛行機の色としても残さない。

   ★決まり（恒久）：ロゴの実測値をそのまま主役に置かない。
     いまの色と白との明るさの差を測り、同じ差になるまで明度だけ動かした値を置く。
     実測（tools/color.py）
       いまの --ai-accent     #1AC2F1  白との差 2.09（白い文字が乗ると読めない）
       いまの --ai-accent-ink #0A7FA8  白との差 4.55
       いまの薄い面 #EDF9FD 1.07 ／ #DCEBFF 1.21
     7色の生の値は白との差が 1.79〜4.23 とばらばらなので、役ごとに1つの差へそろえた。
       面（-p 無し）  … 見本のまま。上に乗せる文字は墨（#101820）。白い文字は乗せない
       文字（-i）     … 白との差 4.55 へそろえた（＝いまの --ai-accent-ink と同じ差）
       薄い面（-p）   … 白との差 1.09 へそろえた（＝いまの #EDF9FD と同じ差）
       少し濃い面(-p2)… 白との差 1.25 へそろえた（＝いまの #DCEBFF と同じ差）
   ------------------------------------------------------------------ */
body.k-ain{
  /* 墨。ロゴの文字（#101820）に合わせた。前は紺（#0D1B2A）だった */
  --ai-ink:#101820;
  --ai-ink2:#1B2732;

  /* おでかけの7色。割り当ては kami/cats.php の kai_cat_color() */
  --c-red:#FF3B30; --c-red-i:#EC0D00; --c-red-p:#FFF3F2; --c-red-p2:#FFDEDD;
  --c-org:#FF8A00; --c-org-i:#B26100; --c-org-p:#FFF3E6; --c-org-p2:#FFE1BF;
  --c-ylw:#F5B800; --c-ylw-i:#967000; --c-ylw-p:#FFF4D5; --c-ylw-p2:#FFE495;
  --c-grn:#16B866; --c-grn-i:#10874B; --c-grn-p:#E2FBEE; --c-grn-p2:#AEF5D2;
  --c-blu:#2E9BFF; --c-blu-i:#0075E0; --c-blu-p:#EDF6FF; --c-blu-p2:#D0E9FF;
  --c-pur:#8B5CF6; --c-pur-i:#8655F6; --c-pur-p:#F7F3FE; --c-pur-p2:#EBE2FD;
  --c-pnk:#FF4778; --c-pnk-i:#EC003F; --c-pnk-p:#FFF1F5; --c-pnk-p2:#FFDEE6;

  /* 主役（ボタン・押せるもの・開いている印）。ロゴの「？」と同じ赤の系統だが、
     生の #FF3B30（白との差 3.55）だと白い文字が読めないので、いまの
     --ai-accent-ink と同じ差 4.55 になるまで明度だけ落とした値を置いている */
  --ai-accent:#EC0D00;
  --ai-accent-ink:#C20A00;
  --ai-accent-pale:#FFF3F2;
  --ai-accent-p2:#FFDEDD;

  /* 本文の文字リンクは青＋下線のまま（恒久ルール。手本の AInformation と同じ）。
     主役の赤はUIの部品に使い、読む文章の中のリンクには使わない */
  --ai-link:#0075E0;

  /* 親テーマ（JSTORK19）の管理画面で決まっている色。水色のまま記事の見出しと
     本文の色つき文字に出ていたので、ここでおでかけの色へ上書きする（2026-09-28）。
     --c は <body> に付く（kami/cats.php の kai_body_vars）。無いページは青が出る */
  --main-link-color:var(--c-blu-i);
  --main-link-color-hover:var(--ai-accent-ink);
  --main-ttl-bg:var(--c,var(--c-blu));
  --main-ttl-bg-rgba:var(--cp,var(--c-blu-p));
  --main-ttl-color:#101820;
  --stk-editor-color1:var(--c-blu-i);
  --stk-editor-color1-rgba:var(--c-blu-p);

  --ai-alert:#EC003F;
  --ai-paper:#ffffff;
  --ai-surface:#F6F7F8;
  --ai-line:#E2E5E8;
  --ai-text:#16232D;
  --ai-muted:#5C7080;
  --ai-chip:#EDEFF1;
  --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:900;letter-spacing:.01em;white-space:nowrap;line-height:1;color:#101820;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}

/* ロゴの「？」（2026-09-28・おでかけへの意匠刷新）。
   明るい赤 #FF3B30 で、ゆりかごのように左右へ揺れ続ける。
   ★inline-block にして回すので、幅も行の高さも変わらない（並びは1pxも動かない）。
   全角の？は字形の左に余白があるので -.16em 詰める。 */
.k-ain .ai-logo .qm{quotes:none;display:inline-block;margin-left:-.16em;color:#FF3B30;
  transform-origin:50% 88%;animation:kai-sway 2.6s ease-in-out infinite;}
@keyframes kai-sway{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}

/* 動きを減らす設定の人には揺らさない。色はそのまま出る */
@media (prefers-reduced-motion: reduce){
  .k-ain .ai-logo .qm{animation:none;transform:none;}
}

.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:#A50900;}
.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(--c,var(--ai-accent));color:#101820;}
/* 触ると下から3pxの線が左端から伸びる */
.k-ain .ai-cb__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c,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:var(--ai-accent-pale);}
.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:#2C3A45;}
.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:var(--ai-ink2);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:#FFC9C6;}
.k-ain .ai-strip__txt b{font-family:var(--ai-num);color:#FF8A80;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;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.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);}
/* 新着記事の小さいサムネ。16/10 だとアイキャッチ（16:9）の上下が切れるので合わせた（2026-09-11） */
.k-ain .ai-mini__img{flex:0 0 106px;aspect-ratio:16/9;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;}
/* カテゴリのバッジ（2026-09-28）。7色を面で出し、上に乗る文字は墨にする。
   白い文字は乗せない。黄や橙は白との差が 1.79〜2.36 しかなく読めないため */
.k-ain .ai-badge{background:var(--c,var(--c-blu));color:#101820;font-size:11.5px;font-weight:800;padding:3px 9px;line-height:1.5;white-space:nowrap;}
.k-ain .ai-badge:hover{filter:brightness(.93);color:#101820;}
.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-ink);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;}
/* サイドバーのカテゴリの札。細い枠線をやめて、そのカテゴリの薄い面で出す（2026-09-28） */
.k-ain .ai-tag{border:0;background:var(--cp,var(--ai-surface));color:var(--ci,var(--ai-text));font-size:12px;font-weight:700;padding:6px 11px;}
.k-ain .ai-tag:hover{background:var(--c,var(--ai-accent));color:#101820;}

/* 早見表への入口 */
.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:#FF8A80;}
.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;}
/* カテゴリから探す（2026-09-28）。記事が1本以上ある全カテゴリを、その場に色つきで並べる。
   一部だけ出して「すべて見る」で逃がさない。細い枠線はやめて色の面で区切る */
.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(--c,var(--c-blu));border:0;padding:18px 8px 15px;text-align:center;transition:transform .15s,filter .15s;}
.k-ain .k-cats a:hover{filter:brightness(.94);transform:translateY(-2px);}
/* 白い面に置く線画なので、差し色そのままだと薄くて読めない。1段濃い方を当てる（2026-09-10） */
.k-ain .k-cats a svg{width:26px;height:26px;color:#101820;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.k-ain .k-cats a b{font-size:14px;font-weight:800;color:#101820;}
.k-ain .k-cats a span{font-family:var(--ai-num);font-size:11.5px;font-weight:700;color:#101820;background:rgba(255,255,255,.62);padding:1px 8px;}

/* 横に並べて比べる（2026-09-28）。早見表・比較表を全部その場に出す。
   アイコンの面だけ色にして、下は白のまま。カテゴリの面と重ならないようにしている */
.k-ain .k-cmp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.k-ain .k-cmp__a{display:flex;flex-direction:column;gap:9px;padding:15px 14px 14px;background:var(--cp);transition:transform .15s,background .15s;}
.k-ain .k-cmp__a:hover{background:var(--c);transform:translateY(-2px);}
.k-ain .k-cmp__ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--c);}
.k-ain .k-cmp__sv{width:20px;height:20px;fill:none;stroke:#101820;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.k-ain .k-cmp__t{font-size:13.5px;font-weight:800;line-height:1.5;color:#101820;}
.k-ain .k-cmp__n{margin-top:auto;font-size:11.5px;font-weight:600;color:var(--ai-muted);}
.k-ain .k-cmp__n b{display:block;font-family:var(--ai-num);font-size:21px;font-weight:700;line-height:1.1;color:var(--ci);}
.k-ain .k-cmp__a:hover .k-cmp__n,.k-ain .k-cmp__a:hover .k-cmp__n b{color:#101820;}
.k-ain .k-cmp__a:hover .k-cmp__ic{background:rgba(255,255,255,.6);}

/* ---------- 早見表（既存の 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:#FF8A80;}
.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:#FF8A80;}
.k-ain .ai-ft__logo{font-size:21px;font-weight:900;margin-bottom:9px;font-family:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;}
/* フッターは濃い面の上なので、ロゴの「？」は明るい赤にする（#FF3B30 だと沈む）。
   ヘッダーと同じように揺らす */
.k-ain .ai-ft__logo .qm{quotes:none;display:inline-block;margin-left:-.16em;color:#FF6B61;
  transform-origin:50% 88%;animation:kai-sway 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .k-ain .ai-ft__logo .qm{animation:none;transform:none;}
}
.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);}
/* スマホのメニューのカテゴリ。文字の左にそのカテゴリの色の四角を置く（2026-09-28） */
.k-ain .ai-drawer__nav a[style*="--c"]{display:flex;align-items:center;gap:9px;}
.k-ain .ai-drawer__nav a[style*="--c"]::before{content:"";flex:none;width:11px;height:11px;background:var(--c);}

/* ---------- 画面の幅で変える ---------- */
@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);}
  .k-ain .k-cmp{grid-template-columns:repeat(3,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-lead__ex{-webkit-line-clamp:3;}
  .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-cmp{grid-template-columns:repeat(2,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;}
}

/* --- 本文の文字リンクを手本（ainews.css の .ai-single .post_content a）と同じ青＋下線に（2026-09-17 週次改修） --- */
.k-ain .ai-body a:where(:not([class*="easyLink"]):not(.related_article__link)){color:var(--ai-link);text-decoration:underline;text-underline-offset:3px;}
.k-ain .ai-body a:where(:not([class*="easyLink"]):not(.related_article__link)):hover{text-decoration-thickness:2px;}
.k-ain .ai-body div[style*="background:#eef3f8"] a.k-al{color:inherit;text-decoration:none;}

/* --- カエレバの商品の箱は本文リンクの青＋下線から外し、お店のボタンの文字はカエレバ本来の白に（2026-09-17 本文リンクの見た目） --- */
.k-ain .ai-body .kaerebalink-box a{color:inherit;text-decoration:none;}
.k-ain .ai-body .kaerebalink-link1 div a{color:#fff;}