/* =====================================================================
   KINAN DAYS — カルチャーメディア版の上書き
   参考：FASHIONSNAP（白地×黒文字・ラベル・ランキング・ハッシュタグ）
        droptokyo（人物を縦長カードで並べる・英字名＋肩書き）
   オレンジ／ブルーはラベルと差し色に使う
   ===================================================================== */
:root{
  --paper:#FFFFFF;
  --paper-2:#F3F5F7;
  --card:#FFFFFF;
  --ink:#111418;
  --ink-2:#5E656D;
  --line:#E4E7EB;
  --accent:#E0530B;
  --orange:#F26B1D;
  --blue:#1D5FA8;
  --band:#1D5FA8;
  --night:#0F2F55;
  --on-night:#F2F6FA;
  --on-night-2:#A9BCD2;
  --night-line:#264B78;
  --f-voice:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --sec:clamp(64px,8vw,112px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1013;--paper-2:#171A1F;--card:#15181C;--ink:#EEF0F2;--ink-2:#9AA2AB;--line:#262A30;
  --accent:#FF8A47;--orange:#FF7A2E;--blue:#6FA8E6;--band:#1B4E86;--night:#0B2440;--on-night:#EEF0F2;--on-night-2:#9FB6CE;--night-line:#1F3E62}}
:root[data-theme="dark"]{
  --paper:#0E1013;--paper-2:#171A1F;--card:#15181C;--ink:#EEF0F2;--ink-2:#9AA2AB;--line:#262A30;
  --accent:#FF8A47;--orange:#FF7A2E;--blue:#6FA8E6;--band:#1B4E86;--night:#0B2440;--on-night:#EEF0F2;--on-night-2:#9FB6CE;--night-line:#1F3E62}

body{font-size:15px;line-height:1.8}

/* ---------- ヘッダー：日付バー＋ロゴ＋横スクロールのタブ ---------- */
.topbar{border-bottom:1px solid var(--line);font-size:11px;color:var(--ink-2)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:32px}
.topbar .mono{font-size:11px;color:var(--ink)}
.topbar a{display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{color:var(--accent)}
.topbar svg{width:14px;height:14px}
.topbar-catch{display:none}
@media (min-width:760px){.topbar-catch{display:inline}}

.hd{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent)}
.hd.is-scrolled{border-bottom-color:var(--ink)}
.hd-in{height:60px}
.logo{font-size:22px;letter-spacing:-.02em}
.tabs{border-bottom:1px solid var(--line);background:var(--paper)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:none;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;padding:12px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:first-child{padding-left:0}
.tabs a small{font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--ink-2);margin-left:6px}
.tabs a:hover,.tabs a[aria-current="page"]{border-bottom-color:var(--orange)}
@media (min-width:900px){.tabs{display:none}}

/* ---------- 小さなラベル（カテゴリ・新着・日付） ---------- */
.lbl{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.12em;line-height:1;padding:5px 7px;border-radius:2px;background:var(--ink);color:var(--paper);text-transform:uppercase;width:fit-content}
.lbl--orange{background:var(--orange);color:#fff}
.lbl--blue{background:var(--blue);color:#fff}
.lbl--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.date{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tagrow{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--blue);font-weight:500}
.tagrow a:hover{text-decoration:underline}

/* ---------- 見出し ---------- */
.mh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:28px}
.mh h2,.mh h1{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4.4vw,48px);line-height:.95;letter-spacing:-.03em;margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mh h2 small,.mh h1 small{font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.mh .more{font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.mh .more:hover{color:var(--accent)}
.msec{padding-block:var(--sec)}
.chapnote{font-family:var(--f-mono);font-size:11px;color:var(--accent);letter-spacing:.1em;margin-bottom:8px}

/* ---------- TODAY 帯 ---------- */
.today{background:var(--ink);color:var(--paper)}
.today .wrap{display:flex;align-items:center;gap:18px;overflow-x:auto;scrollbar-width:none;padding-block:10px;white-space:nowrap}
.today .wrap::-webkit-scrollbar{display:none}
.today b{font-family:var(--f-display);font-weight:800;letter-spacing:.08em;color:var(--orange);font-size:13px}
.today a{font-size:12.5px;display:inline-flex;gap:8px;align-items:center}
.today a::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.today a:hover{color:var(--orange)}

/* ---------- 導入（必須コピー） ---------- */
.intro{padding-block:clamp(28px,4vw,48px) clamp(20px,3vw,32px);display:grid;gap:18px}
.intro-title{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,12vw,132px);line-height:.85;letter-spacing:-.045em;margin:0}
.intro-row{display:grid;gap:18px}
.intro-catch{font-weight:700;font-size:clamp(20px,2.6vw,28px);line-height:1.5}
.intro-catch em{font-style:normal;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--orange) 34%,transparent) 0)}
.intro-body{font-size:13.5px;color:var(--ink-2);line-height:2}
@media (min-width:960px){.intro-row{grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;align-items:end;column-gap:40px}}

/* ---------- NEW FACES（リード記事＋新着リスト） ---------- */
.lead{display:grid;gap:28px}
.lead-main{position:relative;display:block;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--paper-2)}
.lead-main .ph{transition:transform 1.1s var(--ease)}
.lead-main:hover .ph{transform:scale(1.03)}
.lead-cap{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:80px 20px 20px;color:#fff;background:linear-gradient(to top,rgba(8,10,12,.78),transparent);display:grid;gap:10px}
.lead-cap .q{font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.45;word-break:auto-phrase;text-wrap:balance}
.lead-cap .who{font-size:12px;letter-spacing:.04em;opacity:.9}
.lead-cap .who b{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;margin-right:8px}
.latest{display:grid;align-content:start}
.latest-h{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.14em;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.row .thumb{aspect-ratio:1;overflow:hidden;display:block}
.row .thumb .ph-tag{display:none}
.row-body{display:grid;gap:6px;min-width:0}
.row-q{font-weight:700;font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row:hover .row-q{color:var(--accent)}
.row-meta{font-size:11.5px;color:var(--ink-2)}
@media (min-width:960px){.lead{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:40px}.lead-main{aspect-ratio:5/4}}

/* ---------- PEOPLE カード（droptokyo風の縦長グリッド） ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}}
@media (min-width:1100px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px}}
.card{display:grid;gap:10px;align-content:start;min-width:0}
.card-media{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;background:var(--paper-2)}
.card-media .ph{transition:transform .9s var(--ease)}
.card:hover .card-media .ph{transform:scale(1.05)}
.card-media .ph-tag{display:none}
.card-media .lbl{position:absolute;z-index:4;top:8px;left:8px}
.card-q{font-weight:700;font-size:clamp(14px,1.4vw,16px);line-height:1.55;word-break:auto-phrase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .card-q{color:var(--accent)}
.card-name{display:grid;gap:2px;line-height:1.4}
.card-name b{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.card-name span{font-size:12px;color:var(--ink-2)}
.card-foot{display:flex;justify-content:space-between;gap:8px;align-items:center}
@media (min-width:1100px){.pgrid--lead .card:first-child{grid-column:span 2;grid-row:span 2}.pgrid--lead .card:first-child .card-q{font-size:22px;-webkit-line-clamp:4}}

/* ---------- ハッシュタグ ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--paper-2);transition:background .2s,color .2s}
.tags a:hover,.tags a[aria-current="true"]{background:var(--blue);color:#fff}
.tags a span{font-family:var(--f-mono);font-size:11px;opacity:.6;margin-left:6px}

/* ---------- ランキング ---------- */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:r}
.rank li{counter-increment:r}
.rank a{display:grid;grid-template-columns:44px 72px minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.rank a::before{content:counter(r);font-family:var(--f-display);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.rank li:first-child a::before{color:var(--orange)}
.rank .thumb{aspect-ratio:1;overflow:hidden}
.rank .thumb .ph-tag{display:none}
.rank a:hover .row-q{color:var(--accent)}
.side2{display:grid;gap:56px}
@media (min-width:960px){.side2{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:48px}.rank{grid-template-columns:1fr}}

/* ---------- TALK（青い帯） ---------- */
.talk2{background:var(--night);color:var(--on-night)}
.talk2 .mh{border-bottom-color:var(--on-night)}
.talk2 .mh small{color:var(--on-night-2)}
.talk2 .chapnote{color:var(--orange)}
.tk{display:grid;gap:28px}
.tk-photo{aspect-ratio:16/10;max-width:100%;overflow:hidden}
.tk-body{display:grid;gap:16px;align-content:start}
.tk-title{font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1.35;word-break:auto-phrase;text-wrap:balance}
.tk-when{display:flex;flex-wrap:wrap;gap:10px 32px;border-block:1px solid var(--night-line);padding-block:16px}
.tk-when div{display:grid;gap:2px}
.tk-when dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--on-night-2)}
.tk-when dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.2vw,26px);font-variant-numeric:tabular-nums}
.faces{display:flex;flex-wrap:wrap;gap:16px}
.faces a{display:grid;grid-template-columns:48px auto;gap:10px;align-items:center;font-size:12px}
.faces .av{width:48px;height:48px;border-radius:50%;overflow:hidden}
.faces .av .ph-tag{display:none}
.faces b{display:block;font-size:13px}
.faces small{color:var(--on-night-2)}
.talk2 .lbl{background:var(--orange);color:#fff}
@media (min-width:960px){.tk{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:48px}}

/* ---------- EXPERIENCE（横に並ぶカード） ---------- */
.xgrid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,82%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.xgrid > *{scroll-snap-align:start}
@media (min-width:860px){.xgrid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}
.xc{display:grid;gap:12px;align-content:start;padding:20px;background:var(--paper-2);border-radius:4px;transition:background .3s}
.xc:hover{background:color-mix(in srgb,var(--orange) 12%,var(--paper-2))}
.xc-dur{font-family:var(--f-display);font-weight:800;font-size:48px;line-height:.9;letter-spacing:-.04em}
.xc-dur small{font-size:.34em;letter-spacing:0;margin-left:.15em}
.xc-tag{font-size:12px;color:var(--ink-2)}
.xc-title{font-weight:700;font-size:17px;line-height:1.5}
.xc-host{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.xc-host .av{width:40px;height:40px;border-radius:50%;overflow:hidden}
.xc-host .av .ph-tag{display:none}
.xmsg{font-weight:700;font-size:clamp(18px,2vw,22px);margin-bottom:6px}
.xnote{font-size:13px;color:var(--ink-2);margin-bottom:24px;max-width:36em}

/* ---------- JOB（ニュース風の行） ---------- */
.jlist{border-top:2px solid var(--ink)}
.jrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.jrow .thumb{aspect-ratio:3/4;overflow:hidden}
.jrow .thumb .ph-tag{display:none}
.jrow-body{display:grid;gap:8px;min-width:0}
.jrow h3{font-size:17px;font-weight:700;line-height:1.5;margin:0}
.jrow:hover h3{color:var(--accent)}
.jrow .labels{display:flex;flex-wrap:wrap;gap:4px}
.jrow .who{font-size:12px;color:var(--ink-2)}
@media (min-width:760px){.jrow{grid-template-columns:120px minmax(0,1fr) auto;column-gap:24px;align-items:center}.jrow .go{font-size:12px;font-weight:700}}
.jnote{font-size:13px;color:var(--ink-2);margin:-12px 0 20px}

/* ---------- ABOUT（短く） ---------- */
.about2{background:var(--paper-2)}
.about2-in{display:grid;gap:24px}
.about2 p{font-weight:500;font-size:clamp(16px,1.8vw,19px);line-height:2}
.about2 .steps{font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.3}
.about2 .steps a:hover{color:var(--accent)}
@media (min-width:960px){.about2-in{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px}}

/* ---------- 既存ページのトーン合わせ ---------- */
.dt-quote,.tl-title,.ev-title,.pc-quote,.hero-voice p,.qa-body p,.exp-tag,.about-text,.sec-sub,.ft-catch{font-family:var(--f-body)}
.qa-body p{font-size:16px;line-height:2}
.sec-title{font-size:clamp(48px,10vw,120px)}
.ft{border-top:2px solid var(--ink)}
.empty-box{padding:32px 0}
.jrow .go{display:none}
@media (min-width:760px){.jrow .go{display:inline}}
.filter-note{font-size:13px;color:var(--ink-2);margin:-12px 0 24px}
.filter-note a{color:var(--blue);text-decoration:underline}

/* ---------- 気持ちから探す（mdpr travel 風） ---------- */
.moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:860px){.moods{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.mood{position:relative;display:grid;gap:8px;align-content:start;padding:18px 16px 16px;border-radius:6px;min-height:170px;overflow:hidden;transition:transform .35s var(--ease)}
.mood:hover{transform:translateY(-3px)}
.mood--orange{background:color-mix(in srgb,var(--orange) 14%,var(--paper))}
.mood--blue{background:color-mix(in srgb,var(--blue) 12%,var(--paper))}
.mood-n{font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.1em}
.mood--orange .mood-n{color:var(--accent)}
.mood--blue .mood-n{color:var(--blue)}
.mood-t{font-weight:700;font-size:clamp(15px,2vw,22px);line-height:1.4;word-break:auto-phrase}
.mood-d{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.mood-f{display:flex;align-items:center;margin-top:auto;padding-top:8px}
.mood-f .av{width:30px;height:30px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--paper);margin-right:-8px}
.mood-f .av .ph-tag{display:none}
.mood-c{margin-left:auto;font-size:12px;font-weight:700}