/* ==========================================================================
   column/css/common2.css
   コラム記事の追加パーツ（目次・更新日・記事末尾のおすすめ記事ほか）

   common.css を読み込んだ後に読み込むこと。
   このファイルのセレクタはすべて #colmn_page 配下に限定しているため、
   読み込んでいない記事には一切影響しません。

     <link rel="stylesheet" href="https://d2w53g1q050m78.cloudfront.net/drvape/uploads/column/css/common.css">
     <link rel="stylesheet" href="https://d2w53g1q050m78.cloudfront.net/drvape/uploads/column/css/common2.css">

   2026-09-29 作成（column_2307_where の本文内 <style> から切り出し）
   ========================================================================== */

/* 更新日 */
#colmn_page .article_date{ margin:0 0 1.5em; font-size:13px; color:#666; text-align:right; }
#colmn_page .article_date .note{ display:block; margin-top:.3em; font-size:12px; }

/* 目次 */
#colmn_page .toc{ margin:0 0 2em; padding:20px 24px; background:#f7f7f7; border:1px solid #ddd; }
#colmn_page .toc__ttl{ margin:0 0 12px; font-size:18px; font-weight:bold; text-align:center; }
#colmn_page .toc ul{ margin:0; padding:0; list-style:none; }
#colmn_page .toc li{ margin:0; padding:7px 0; border-bottom:1px dotted #ccc; }
#colmn_page .toc li:last-child{ border-bottom:none; }
#colmn_page .toc li::before{ content:none; }
#colmn_page .toc li.lv2{ padding-left:1.5em; font-size:0.92em; }
#colmn_page .toc a{ display:block; color:#162129; text-decoration:none; }
#colmn_page .toc a:hover{ color:#37ae4e; }

/* 目次からの遷移先。見出しの直前に置く高さ0の目印。
   サイト共通の common.js が a[href^='#'] を横取りして「対象要素の真上」へ
   スクロールするため、scroll-margin-top は効かない。この要素を -70px ずらし、
   見出しが固定ヘッダー（PC 54px / SP 48px）の下に収まるようにする。 */
#colmn_page .toc-anchor{
  display:block;
  position:relative;
  top:-70px;
  visibility:hidden;
  height:0;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* 記事末尾のおすすめ記事 */
#colmn_page .recommend{ margin:80px 0 0; }
#colmn_page .recommend__ttl{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin:0 0 8px; padding:0; font-size:28px; font-weight:bold; letter-spacing:0.12em;
}
#colmn_page .recommend__ttl span{ font-size:15px; font-weight:normal; letter-spacing:0.08em; }
#colmn_page .recommend__list{ margin:0; padding:0; list-style:none; border-top:2px solid #d94736; }
#colmn_page .recommend__list li{ margin:0; padding:0; border-bottom:1px solid #ddd; }
#colmn_page .recommend__list li::before{ content:none; }
#colmn_page .recommend__list a{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 0; color:#162129; text-decoration:none; font-size:inherit;
  transition-duration:0.4s;
}
#colmn_page .recommend__list a:hover{ opacity:0.6; }
#colmn_page .recommend__img{ width:28%; flex:none; }
#colmn_page .recommend__img img{ width:100%; height:auto; vertical-align:bottom; }
#colmn_page .recommend__body{ width:68%; }
#colmn_page .recommend__h{ margin:0; font-size:16px; line-height:1.6; letter-spacing:0.05em; }
#colmn_page .recommend__date{ margin:8px 0 0; font-size:14px; color:#888; }
@media screen and (max-width: 600px){
  #colmn_page .recommend{ margin-top:50px; }
  #colmn_page .recommend__ttl{ font-size:22px; gap:10px; }
  #colmn_page .recommend__ttl span{ font-size:13px; }
  #colmn_page .recommend__h{ font-size:14px; }
  #colmn_page .recommend__date{ font-size:12px; }
}

/* スマホ版だと縦表示の為、3列表の最終行にできる空セルが空枠として見えるので隠す */
@media screen and (max-width: 600px){
  #colmn_page article section table.design2 tr td.is-spacer{ display:none; }
  #colmn_page article section table.design2 tr:last-child td.is-spacer-prev{ border-bottom:1px solid #aaa; }
}