/* IntRo 共通スタイル（デザイントークン: README準拠） */
:root {
  --bg: #FFF8F1;
  --bg-card-light: #FDFBF7;
  --ink: #16120F;
  --ink-head: #1E1A17;
  --ink-body: #2A241F;
  --ink-body2: #3A332D;
  --orange: #FF7A1A;
  --orange-link: #E85D04;
  --orange-premium: #FF9A4D;
  --border-light: #FFD9B8;
  --border-lighter: #FFE7D2;
  --bg-orange-thin: #FFF1E6;
  --bg-orange-thin2: #FFF3E8;
  --gray-1: #6E5D50;
  --gray-2: #8A7263;
  --toggle-on: #2FB97E;
  --toggle-off: #D8CBBA;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--ink-body2);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
i-chan { display: inline-block; line-height: 0; }

.zenmaru { font-family: 'Zen Maru Gothic', sans-serif; }
.rounded { font-family: 'M PLUS Rounded 1c', sans-serif; }

/* クリック可能要素の共通挙動 */
.clickable { cursor: pointer; }

/* トグルスイッチ（ON=#2FB97E / OFF=#D8CBBA） */
.toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--toggle-off); cursor: pointer; transition: background .15s; flex: none; border: none; padding: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.toggle.on { background: var(--toggle-on); }
.toggle.on::after { left: 21px; }

/* マスコットのゆらゆら（design正本 introSway） */
@keyframes introSway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.sway { animation: introSway 3s ease-in-out infinite; transform-origin: 50% 90%; }

/* 読者向け共通ヘッダーのPC/スマホ出し分け（インラインstyleに勝つため!important） */
.hdr-m { display: none !important; }
@media (max-width: 720px) {
  .hdr-pc { display: none !important; }
  .hdr-m { display: flex !important; }
}

/* ヘッダーの検索窓（入力欄） */
.hdr-search-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 11px; color: #16120F; font-family: inherit; }
.hdr-search-input::placeholder { color: #A97B4F; }

/* 読者ヘッダーの固定。stickyは中身でなく入れ物（#hdr/#header-container）に効かせる
   （中身に付けても入れ物の高さぶんしか動けず固定にならない） */
#hdr, #header-container { position: sticky; top: 0; z-index: 100; }

/* ---- カーソル反応（プロダクト共通） ----
   カード型（記事カード等）＝まわりが淡く光る／行リスト＝行がハイライト。
   カードの影はインラインstyleに勝たせるため!important */
.art-card, .res-card, .saved-card, .art-row, #tokushu-card { transition: box-shadow .18s ease; }
.art-card:hover, .res-card:hover, .saved-card:hover, .art-row:hover, #tokushu-card:hover {
  box-shadow: 0 0 0 2px rgba(255,154,77,.55), 0 8px 26px rgba(232,93,4,.22) !important;
}
/* 行リスト（人気の記事・参考になった記事・検索のカテゴリ・通知パネルなど）。
   行ハイライトは「行クリックで何か起きる行」だけに付ける（企業をフォローの行は
   ボタンだけが押せるので対象外＝ボタン側は共通の .hov-dim が効く）。
   選択状態などインラインで背景を持つ行は、そちらが優先されるよう!importantは付けない */
.views-item, .hearts-item, .cat-row, .notif-row { transition: background-color .12s ease; border-radius: 8px; }
.views-item:hover, .hearts-item:hover, .cat-row:hover, .notif-row:hover { background: #FFF3E7; }
/* 行リストはテキスト位置を変えずにハイライトへ左右10pxの地を持たせる
   （インラインのpadding指定に勝つため左右のみ!important） */
.views-item, .hearts-item, .cat-row, .notif-row { margin-left: -10px; margin-right: -10px; padding-left: 10px !important; padding-right: 10px !important; }
/* 押せるもの（cursor:pointer）は必ずホバーで色が変わる:
   app.js がマウスオーバーで .hov-dim を付与する（個別実装漏れの根絶） */
.hov-dim { filter: brightness(.94); transition: filter .12s ease; }
/* カード類は発光ホバーが別にあるため暗転させない */
.art-card.hov-dim, .res-card.hov-dim, .saved-card.hov-dim, .art-row.hov-dim, #tokushu-card.hov-dim { filter: none; }
/* 一覧の行の中は暗転させない: 行の中のマス・チップだけが濃くなるのを防ぐ（D-47）。
   行自身に付く .hov-dim（行の暗転）と、行の外のカード・ボタン・ナビには効かせない */
tr .hov-dim, .frow .hov-dim, .lg-row .hov-dim, .rd-row .hov-dim,
.q-row .hov-dim, .pick-row .hov-dim, .co-row .hov-dim, .co-cand-row .hov-dim { filter: none; }

/* カスタムプルダウン（Shared.fancySelects が全selectに適用） */
.dd-pop { position:absolute; top:calc(100% + 6px); left:0; min-width:100%; box-sizing:border-box; background:#fff; border:1px solid #FFE7D2; border-radius:12px; box-shadow:0 12px 32px rgba(232,93,4,.18); padding:6px; z-index:300; max-height:280px; overflow:auto; display:none; }
.dd-pop.open { display:block; }
.dd-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; font-size:11.5px; color:#16120F; cursor:pointer; white-space:nowrap; }
.dd-item:hover { background:#FFF1E6; }
.dd-item.on { color:#E85D04; font-weight:700; }
.dd-item .dd-check { flex:none; visibility:hidden; }
.dd-item.on .dd-check { visibility:visible; }

/* 企業側サイドバーがスマホで横バー化したとき、ブランド下の余白は不要 */
@media (max-width:1000px) {
  .biz-side .biz-brand-block { padding-bottom:0 !important; }
}

/* 運営画面の中身の枠。見出し・タブ・中身をまとめて包み、9画面で同じ幅にそろえる（D-27） */
.ad-inner { max-width:1440px; min-width:0; }

/* 日本語は文節の切れ目で折る。熟語や数値が1文字ずつ割れて2行目が1文字だけになるのを防ぐ（D-16）。
   例: 「自社株買いが上限の1割まで進/捗」→「自社株買いが上限の1割まで/進捗」。
   未対応のブラウザでは今までどおりの折り返しになるだけで、害はない */
body { word-break: auto-phrase; }