/* ============================================================
   NEWS セクション共通スタイル
   ・TOP（.tkm-news）と各サービスページ（.tkm-news--service）で共有する
   ・色はCSS変数を使わず実値で記述（読み込むページによって変数の定義有無が変わるため）
   ・font-family は出力しない（テーマ書体を継承）
   ・横展開してもこのファイル1本だけを直せば全ページに反映される
   ============================================================ */

/* ---- サービスページ用のレイアウト ----
   TOPは新TOP側（top-new-2607.css の .ntop-wrapper）の定義に乗るため、この修飾子を付けない */
.tkm-news--service{padding:80px 0}
.tkm-news--service .container{width:1100px;margin:0 auto}
.tkm-news--service .split-wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.tkm-news--service .split-side{position:sticky;top:32px}
.tkm-news--service .sec-title{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
.tkm-news--service .sec-title .eyebrow{font-size:20px;font-weight:300;color:#8C8989;letter-spacing:1px;line-height:1}
.tkm-news--service .sec-title h2{font-size:32px;font-weight:600;color:#222229;letter-spacing:1.6px;line-height:1.4}
.tkm-news--service a{color:inherit;text-decoration:none}

/* ---- ここから下はTOP・サービスページ共通 ---- */
.tkm-news .split-main{min-width:0}   /* 長いタイトルでグリッドが広がらないようにする */

/* カテゴリタブ */
.tkm-news .news-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 28px}
.tkm-news .news-tab{
  position:relative;padding:0 2px 12px;
  background:none;border:0;cursor:pointer;
  /* button は font-family / font-feature-settings を継承しないため明示（外すとSPでタブが1行に収まらない） */
  font-family:inherit;font-feature-settings:inherit;text-rendering:inherit;
  font-size:14px;font-weight:500;letter-spacing:.4px;color:#5A6062;
  transition:color .2s ease;
}
.tkm-news .news-tab:hover{color:#008D97}
.tkm-news .news-tab.is-active{color:#008D97;font-weight:700}
.tkm-news .news-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#008D97}

/* 行リスト */
/* 上端の罫線は .news-list に付ける（.news-item:first-child だと絞り込みで先頭行が消えたとき罫線ごと消えるため） */
.tkm-news .news-list{border-top:1px solid #E6ECEC}
/* 表示行数（visibleRows）の指定がある一覧は、その行数分の高さに収めて残りを縦スクロールにする（TOPで使用）。
   タイトルの折り返しで行ごとに高さが違うため、正確な高さは news-section.js が計算する。ここはJS実行前の目安 */
.tkm-news--scroll .news-list{max-height:390px;overflow-y:auto}
@media screen and (max-width: 768px){
  .tkm-news--scroll .news-list{max-height:560px}
}
.tkm-news .news-item{
  /* 日付欄は最小92px。Webフォントが読み込まれる前などで日付が広くなったときだけ、その分広げる */
  display:grid;grid-template-columns:minmax(92px,max-content) 104px 1fr;gap:20px;align-items:center;
  padding:18px 4px;border-bottom:1px solid #E6ECEC;color:#222229;
  transition:color .2s ease;
}
/* grid のため hidden 属性だけでは消えない。タブ絞り込みで使うので消さないこと */
.tkm-news .news-item[hidden]{display:none}
.tkm-news .news-item:hover{color:#008D97}
/* body に word-break:break-all が指定されているため、代替フォントで幅が足りないと数字の途中で折り返す。日付は折り返さない */
.tkm-news .news-item__date{font-size:13px;color:#5A6062;white-space:nowrap}
.tkm-news .news-item__cat{
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#FFFFFF;
  border-radius:4px;padding:5px 0;line-height:1.3;text-align:center;
}
/* カテゴリの色はコーポレートサイト corp.tokium.jp と同色 */
.tkm-news .news-item__cat--pr{background:#45B3BA}
.tkm-news .news-item__cat--media{background:#DDB06D}
.tkm-news .news-item__cat--info{background:#8E99B7}
.tkm-news .news-item__cat--function{background:#5B8ECB}
.tkm-news .news-item__title{font-size:14.5px;line-height:1.6;letter-spacing:.4px}

/* 絞り込み結果が0件のときだけ表示される */
.tkm-news .news-empty{padding:34px 4px;border-bottom:1px solid #E6ECEC;font-size:14px;color:#5A6062;letter-spacing:.4px}
.tkm-news .news-empty a{color:#008D97;text-decoration:underline;text-underline-offset:3px;margin-left:8px}

/* 一覧リンク */
.tkm-news .news-more{margin-top:24px;text-align:right}
.tkm-news .link-text{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:#008D97;letter-spacing:.4px;
  padding:2px 0;transition:opacity .2s ease;
}
.tkm-news .link-text .ico-ext{width:14px;height:14px;flex:none;transition:transform .25s ease}
.tkm-news .link-text:hover{opacity:.72}
.tkm-news .link-text:hover .ico-ext{transform:translate(1px,-1px)}
/* 視覚的には隠し、スクリーンリーダーにだけ読ませるテキスト（別サイトが開く旨の補足） */
.tkm-news .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media screen and (max-width: 768px){
  .tkm-news--service{padding:56px 0}
  .tkm-news--service .container{width:calc(100% - 56px)}   /* 左右28pxマージン */
  .tkm-news--service .split-wrap{grid-template-columns:1fr;gap:24px}
  .tkm-news--service .split-side{position:static;top:auto}
  .tkm-news--service .sec-title{gap:6px}
  .tkm-news--service .sec-title .eyebrow{font-size:15px;letter-spacing:.8px}
  .tkm-news--service .sec-title h2{font-size:23px;letter-spacing:.8px;line-height:1.5}

  /* タブは折り返さず、収まらない分は横スクロール（スクロールバーは隠す） */
  .tkm-news .news-tabs{flex-wrap:nowrap;gap:0 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tkm-news .news-tabs::-webkit-scrollbar{display:none}
  .tkm-news .news-tab{font-size:12px;padding:0 0 10px;letter-spacing:0;white-space:nowrap}
  /* 1段目=日付+カテゴリ、2段目=タイトル(全幅) */
  .tkm-news .news-item{grid-template-columns:minmax(78px,max-content) 1fr;gap:8px 12px;padding:14px 2px}
  .tkm-news .news-item__cat{justify-self:start;width:104px}
  .tkm-news .news-item__title{grid-column:1 / -1;width:100%;font-size:14px;letter-spacing:.2px}
  .tkm-news .news-more{margin-top:20px}
}