@charset "utf-8";
/* ==========================================================================
   column.css (2026-10-28)
   コラム一覧(/column/index.html)・記事(/column/column_*.html)・erp.html の「コラム」ブロック用。
   - 既存CSSは書き換えず、このファイルで追加・上書きする。
   - 読み込み順
       記事  : base.css → news.css → entry.css → column.css(entry.css より後に読み込むこと)
       一覧  : base.css → news.css → column.css
       erp.html : base.css → service.css → column.css(カード部品と .blc_column の追加分のみ使用)
   - 色は既存CSSにある値のみ:
       #002665 / #002765 紺   #0a1978 リンク色   #333 本文   #555 補足文字
       #d5dae3 罫線   #ddd 区切り線   #f2f2f2 薄い面   #fff
   - 書体:本文 Noto Sans JP(base.css)、見出し Noto Serif JP、英字ラベル Josefin Sans。
   - ブレークポイントは既存どおり 768px / 767px(カード一覧のみ 1024px で 2列→3列)。角丸なし。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 共通:カテゴリラベル / 日付
   -------------------------------------------------------------------------- */
.column_meta{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;gap:6px 12px;margin:0 0 10px}
.column_cat{display:inline-block;padding:3px 8px 2px;border:1px solid #002765;background:#fff;color:#002765;font-size:1.2rem;font-weight:500;line-height:1.4;letter-spacing:.05em;white-space:nowrap}
.column_date{color:#555;font-size:1.3rem;line-height:1.4;letter-spacing:.05em}
@media print, screen and (min-width: 768px){
  .column_cat{font-size:1.3rem;padding:4px 10px 3px}
  .column_date{font-size:1.4rem}
}

/* --------------------------------------------------------------------------
   1. 一覧カード  ul.column_list > li.column_card
      スマホ: 1列 / タブレット(768〜1023px): 2列 / PC(1024px〜): 3列
      一覧ページ・erp.html 共通。件数が少ないうちは左詰め。
   -------------------------------------------------------------------------- */
.column_list{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:0;padding:0;list-style:none}
.column_card{list-style:none;margin:0;line-height:1.5}
.column_card__link,.column_card__link:link,.column_card__link:visited{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100%;background:#fff;border:1px solid #d5dae3;color:#333;text-decoration:none;word-break:normal;-webkit-transition:border-color .2s;transition:border-color .2s}
.column_card__img{margin:0;overflow:hidden;background:#002665}
.column_card__img img{display:block;width:100%;height:auto;aspect-ratio:1200 / 630;-o-object-fit:cover;object-fit:cover;-webkit-transition:opacity .2s;transition:opacity .2s}
.column_card__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:1 1 auto;flex:1 1 auto;padding:16px 18px 20px}
.column_card__ttl{margin:0 0 10px;color:#333;font-size:1.7rem;font-weight:700;line-height:1.55;letter-spacing:.03em;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
.column_card__excerpt{margin:0 0 16px;color:#555;font-size:1.4rem;line-height:1.8;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.column_card__more{margin-top:auto;color:#002765;font-size:1.4rem;font-weight:500;line-height:1.2}
.column_card__more:after{content:"";display:inline-block;width:7px;height:7px;margin:-2px 0 0 10px;border-top:1px solid currentColor;border-right:1px solid currentColor;-webkit-transform:rotate(45deg);transform:rotate(45deg);vertical-align:middle}
.column_card__link:hover,.column_card__link:focus-visible{border-color:#002765}
.column_card__link:hover .column_card__img img,.column_card__link:focus-visible .column_card__img img{opacity:.85}
.column_card__link:hover .column_card__ttl,.column_card__link:focus-visible .column_card__ttl{color:#0a1978;text-decoration:underline}
.column_card__link:focus-visible{outline:2px solid #002765;outline-offset:3px}
@media print, screen and (min-width: 768px){
  .column_list{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px}
  .column_card__body{padding:20px 22px 24px}
  .column_card__ttl{font-size:1.8rem}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  .column_list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   2. コラム一覧ページ  .column_index
   -------------------------------------------------------------------------- */
.column_index .column_index__ttl{font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:500;font-size:2rem;line-height:1.5;color:#002665;padding-bottom:16px;margin-bottom:16px;border-bottom:solid 1px #ddd}
.column_index .column_index__lead{margin:0 0 28px;line-height:1.9;max-width:800px}
.column_index .column_index__empty{margin:0;color:#555}
@media print, screen and (min-width: 768px){
  .column_index .column_index__ttl{font-size:2.4rem;padding-bottom:20px;margin-bottom:20px}
  .column_index .column_index__lead{margin-bottom:40px}
}

/* ページ送り(11件目以降ができたら使う。HTML の型は手順書・テンプレートを参照) */
.column_pagination{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin:40px 0 0;padding:0;list-style:none}
.column_pagination li{list-style:none}
.column_pagination a,.column_pagination span{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid #d5dae3;background:#fff;color:#002765;font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.5rem;line-height:1;text-decoration:none}
.column_pagination a:hover,.column_pagination a:focus-visible{border-color:#002765}
.column_pagination [aria-current="page"]{background:#002765;border-color:#002765;color:#fff}
@media print, screen and (min-width: 768px){.column_pagination{margin-top:60px}}

/* --------------------------------------------------------------------------
   3. 記事ページの枠  article.column_article
      本文は読みやすさのため最大 800px で中央寄せ
   -------------------------------------------------------------------------- */
.column_article{max-width:800px;margin:0 auto}

/* 記事の頭(news.css の .post_head / .post_ttl を使い、サブタイトルを追加。.post_ttl は p 要素) */
.column_article .post_head{margin-bottom:24px}
.column_article .post_head .post_ttl{margin:0;line-height:1.5;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
.column_article .column_sub{margin:12px 0 0;color:#002765;font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:500;font-size:1.6rem;line-height:1.6;letter-spacing:.04em;word-break:normal;word-break:auto-phrase}
.column_article .column_eyecatch{margin:0 0 28px}
.column_article .column_eyecatch img{display:block;width:100%;height:auto}
@media print, screen and (min-width: 768px){
  .column_article .post_head{margin-bottom:32px}
  .column_article .column_sub{margin-top:14px;font-size:1.9rem}
  .column_article .column_eyecatch{margin-bottom:40px}
}

/* --------------------------------------------------------------------------
   4. 本文  div.entry-content.column_body
      entry.css の「.entry-content *:first-of-type{margin-top:0}」に負けないよう、
      余白は .column_article .column_body ...(詳細度 0,2,1 以上)で指定する。
   -------------------------------------------------------------------------- */
.column_article .column_body{font-size:1.6rem;line-height:1.9;letter-spacing:.05em}
.column_article .column_body p{margin:0 0 1.4em;line-height:1.9}
.column_article .column_body strong{font-weight:700}

/* リード(見出しなし・冒頭) */
.column_article .column_body .column_lead{padding-bottom:8px;margin-bottom:0}
.column_article .column_body .column_lead p{font-weight:500;color:#333}
.column_article .column_body .column_lead p:last-child{margin-bottom:0}

@media print, screen and (min-width: 768px){
  .column_article .column_body{font-size:1.7rem;line-height:2}
  .column_article .column_body p{line-height:2}
}

/* --------------------------------------------------------------------------
   5. 目次  nav.column_toc > ol.toc_list
      ol に class="toc_list" を付けると entry.css の番号・点が付かない(entry.css 側の除外指定)
   -------------------------------------------------------------------------- */
.column_article .column_toc{margin:32px 0 0;padding:20px 20px 12px;background:#f2f2f2;border-top:3px solid #002765}
.column_article .column_toc .column_toc__ttl{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;gap:12px;margin:0 0 8px;color:#002765;font-size:1.6rem;font-weight:700;line-height:1.4}
.column_article .column_toc .column_toc__ttl .en{font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:.14em}
.column_article .column_toc .toc_list{counter-reset:toc;margin:0;padding:0}
.column_article .column_toc .toc_list>li{counter-increment:toc;display:-webkit-box;display:-webkit-flex;display:flex;gap:10px;margin:0;padding:10px 0;border-top:1px solid #d5dae3;font-size:1.5rem;line-height:1.6}
.column_article .column_toc .toc_list>li:first-child{border-top:0}
.column_article .column_toc .toc_list>li:before{content:counter(toc,decimal-leading-zero);-webkit-flex:0 0 1.8em;flex:0 0 1.8em;padding-top:.2em;color:#002765;font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;letter-spacing:.04em}
.column_article .column_toc .toc_list a{color:#333;text-decoration:none;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
.column_article .column_toc .toc_list a:hover,.column_article .column_toc .toc_list a:focus-visible{color:#0a1978;text-decoration:underline}
@media print, screen and (min-width: 768px){
  .column_article .column_toc{margin-top:40px;padding:28px 36px 18px}
  .column_article .column_toc .toc_list>li{font-size:1.6rem}
}

/* --------------------------------------------------------------------------
   6. 見出し h2 / h3(entry.css の h2・h3 を上書き)
      h2: 上に 48×3 の紺の線+下罫線。章番号は span.sec_num
      h3: 左に 3px の紺の線
      ヘッダーは固定表示ではないため、目次からのスクロールは h2 の上端で問題ない
   -------------------------------------------------------------------------- */
.column_article .column_body h2{position:relative;margin:56px 0 24px;padding:22px 0 14px;border-bottom:1px solid #d5dae3;color:#002765;font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:700;font-size:2.2rem;line-height:1.5;letter-spacing:.04em;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word;scroll-margin-top:24px}
.column_article .column_body h2:before{content:"";position:absolute;left:0;top:0;width:48px;height:3px;background:#002765}
.column_article .column_body h2 .sec_num{display:block;margin-bottom:8px;font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.4rem;line-height:1;letter-spacing:.14em}
.column_article .column_body h3{margin:40px 0 16px;padding:0 0 0 14px;border-bottom:0;border-left:3px solid #002765;color:#002765;font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:700;font-size:1.8rem;line-height:1.5;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word;scroll-margin-top:24px}
.column_article .column_body h2+h3{margin-top:28px}
@media print, screen and (min-width: 768px){
  .column_article .column_body h2{margin:80px 0 28px;padding:26px 0 16px;font-size:2.6rem}
  .column_article .column_body h2 .sec_num{font-size:1.5rem}
  .column_article .column_body h3{margin:56px 0 20px;padding-left:18px;font-size:2rem}
  .column_article .column_body h2+h3{margin-top:36px}
}

/* --------------------------------------------------------------------------
   7. 引用ブロック(強調の一文)  blockquote.column_quote > p > strong
      entry.css の blockquote(灰色地+Material Icons の記号)を打ち消す
   -------------------------------------------------------------------------- */
.column_article .column_body blockquote.column_quote{margin:36px 0;padding:22px 20px 22px 22px;background:#f2f2f2;border-left:4px solid #002765;color:#002765}
.column_article .column_body blockquote.column_quote:before{content:none;display:none}
.column_article .column_body blockquote.column_quote p{margin:0;color:#002765;font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:700;font-size:1.8rem;line-height:1.75;letter-spacing:.04em;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
.column_article .column_body blockquote.column_quote strong{font-weight:inherit}
@media print, screen and (min-width: 768px){
  .column_article .column_body blockquote.column_quote{margin:56px 0;padding:34px 40px}
  .column_article .column_body blockquote.column_quote p{font-size:2.2rem}
}

/* --------------------------------------------------------------------------
   8. 図  figure.column_fig > a(拡大表示)> picture(スマホ版/PC版の切替)+ figcaption
   -------------------------------------------------------------------------- */
.column_article .column_body figure.column_fig{margin:36px 0}
.column_article .column_body figure.column_fig a{display:block}
.column_article .column_body figure.column_fig a:focus-visible{outline:2px solid #002765;outline-offset:3px}
.column_article .column_body figure.column_fig picture{display:block}
.column_article .column_body figure.column_fig img{display:block;width:100%;height:auto;margin:0;border:1px solid #d5dae3}
.column_article .column_body figure.column_fig figcaption{margin-top:10px;color:#555;font-size:1.3rem;line-height:1.6;letter-spacing:.04em}
.column_article .column_body figure.column_fig figcaption .fig_num{margin-right:.8em;color:#002765;font-weight:700}
@media print, screen and (min-width: 768px){
  .column_article .column_body figure.column_fig{margin:56px 0}
  .column_article .column_body figure.column_fig figcaption{margin-top:12px;font-size:1.4rem}
}

/* --------------------------------------------------------------------------
   9. 著者欄  aside.column_author
   -------------------------------------------------------------------------- */
.column_author{margin:56px 0 0;padding:20px 20px 22px;background:#fff;border:1px solid #d5dae3;border-top:3px solid #002765}
.column_author .column_author__label{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #d5dae3;color:#002765;font-size:1.4rem;font-weight:700;line-height:1.4}
.column_author .column_author__label .en{font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:.14em}
.column_author .column_author__inner{display:-webkit-box;display:-webkit-flex;display:flex;gap:16px;-webkit-align-items:flex-start;align-items:flex-start}
.column_author .column_author__img{-webkit-flex:0 0 72px;flex:0 0 72px;margin:0}
.column_author .column_author__img img{display:block;width:72px;height:72px;-o-object-fit:cover;object-fit:cover}
.column_author .column_author__body{-webkit-flex:1 1 auto;flex:1 1 auto;min-width:0}
.column_author .column_author__name{margin:0;color:#333;font-size:1.7rem;font-weight:700;line-height:1.5}
.column_author .column_author__role{margin:2px 0 0;color:#555;font-size:1.3rem;line-height:1.6}
.column_author .column_author__txt{margin:10px 0 0;color:#333;font-size:1.4rem;line-height:1.8}
@media print, screen and (min-width: 768px){
  .column_author{margin-top:80px;padding:24px 32px 28px}
  .column_author .column_author__inner{gap:24px}
  .column_author .column_author__img{-webkit-flex-basis:96px;flex-basis:96px}
  .column_author .column_author__img img{width:96px;height:96px}
  .column_author .column_author__name{font-size:1.8rem}
  .column_author .column_author__role{font-size:1.4rem}
  .column_author .column_author__txt{font-size:1.5rem}
}

/* --------------------------------------------------------------------------
   10. 関連サービスへの誘導  .column_cta
       主ボタン(塗り)= SAP Business Applications / 副ボタン(線)= お問い合わせ
   -------------------------------------------------------------------------- */
.column_cta{margin:40px 0 0;padding:24px 20px;background:#f2f2f2}
.column_cta .column_cta__ttl{margin:0 0 6px;color:#002765;font-family:"Noto Serif JP","BIZ UDPMincho",serif;font-weight:700;font-size:1.8rem;line-height:1.5}
.column_cta .column_cta__txt{margin:0 0 18px;font-size:1.4rem;line-height:1.8}
.column_cta .column_cta__btns{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.column_cta .column_cta__btns li{list-style:none}
.column_btn,.column_btn:link,.column_btn:visited{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:56px;padding:14px 24px 13px;border:1px solid #002765;background:#fff;color:#002765;font-weight:500;font-size:1.6rem;line-height:1.4;text-decoration:none;word-break:normal;overflow-wrap:break-word;-webkit-transition:background .2s,color .2s;transition:background .2s,color .2s}
.column_btn:before{content:"";-webkit-flex:0 0 8px;flex:0 0 8px;height:8px;margin:0 16px 0 0;border-top:1px solid currentColor;border-right:1px solid currentColor;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.column_btn.is-primary,.column_btn.is-primary:link,.column_btn.is-primary:visited{background:#002765;color:#fff}
.column_btn:hover,.column_btn:focus-visible{background:#002765;color:#fff}
.column_btn.is-primary:hover,.column_btn.is-primary:focus-visible{background:#fff;color:#002765}
.column_btn:focus-visible{outline:2px solid #002765;outline-offset:3px}
@media print, screen and (min-width: 768px){
  .column_cta{margin-top:48px;padding:32px 36px 36px}
  .column_cta .column_cta__ttl{font-size:2rem}
  .column_cta .column_cta__txt{font-size:1.5rem;margin-bottom:22px}
  .column_cta .column_cta__btns{-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:16px}
  .column_btn,.column_btn:link,.column_btn:visited{padding:16px 36px 15px}
}

/* --------------------------------------------------------------------------
   11. 前後の記事・一覧へのナビ  nav.column_pager
       スマホ: 前 → 次 → 一覧 の縦積み / PC: 前 | 一覧 | 次 の3列
       前(または次)の記事がないときは、その li に .is-empty を付ける(中身は空)
   -------------------------------------------------------------------------- */
.column_pager{margin:48px 0 0;padding-top:32px;border-top:1px solid #ddd}
.column_pager ul{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none}
.column_pager li{list-style:none;min-width:0}
.column_pager li.is-empty{display:none}
.column_pager a,.column_pager a:link,.column_pager a:visited{display:block;height:100%;padding:14px 18px 15px;border:1px solid #d5dae3;background:#fff;color:#333;text-decoration:none}
.column_pager .column_pager__label{display:block;margin-bottom:4px;color:#002765;font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.2rem;line-height:1.4;letter-spacing:.12em}
.column_pager .column_pager__ttl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:1.4rem;line-height:1.6;word-break:normal;word-break:auto-phrase;overflow-wrap:break-word}
.column_pager .column_pager__next{text-align:right}
.column_pager .column_pager__index{-webkit-box-ordinal-group:4;-webkit-order:3;order:3}
.column_pager .column_pager__index a{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-height:56px;border-color:#002765;color:#002765;font-weight:500;text-align:center}
.column_pager a:hover,.column_pager a:focus-visible{border-color:#002765}
.column_pager a:hover .column_pager__ttl,.column_pager a:focus-visible .column_pager__ttl{color:#0a1978;text-decoration:underline}
.column_pager .column_pager__index a:hover,.column_pager .column_pager__index a:focus-visible{background:#002765;color:#fff}
.column_pager a:focus-visible{outline:2px solid #002765;outline-offset:3px}
@media print, screen and (min-width: 768px){
  .column_pager{margin-top:64px;padding-top:40px}
  .column_pager ul{grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:16px}
  .column_pager li.is-empty{display:block}
  .column_pager .column_pager__prev{-webkit-order:1;order:1}
  .column_pager .column_pager__index{-webkit-order:2;order:2}
  .column_pager .column_pager__next{-webkit-order:3;order:3}
  .column_pager a,.column_pager a:link,.column_pager a:visited{padding:18px 22px 19px}
}

/* --------------------------------------------------------------------------
   12. erp.html「コラム」ブロック  section.blc_column
       外枠の余白と .btn_column は service.css の既存定義を使う(.column_box は使わない)
   -------------------------------------------------------------------------- */
.blc_column .column_head{margin-bottom:20px}
.blc_column .column_head .column_en{margin:0 0 6px;color:#002765;font-family:"Josefin Sans","Noto Sans JP",sans-serif;font-weight:600;font-size:1.4rem;line-height:1;letter-spacing:.14em}
.blc_column .column_head .column_ttl{margin-bottom:0}
.blc_column .column_head .txt{margin-top:12px;line-height:1.9}
.blc_column .column_head .txt p{margin:0}
.blc_column .column_more{margin:28px 0 0;text-align:center}
.blc_column .column_more .btn_column{margin-top:0}
@media print, screen and (min-width: 768px){
  .blc_column .column_head{margin-bottom:32px}
  .blc_column .column_head .column_en{font-size:1.5rem}
  .blc_column .column_head .txt{max-width:860px}
  .blc_column .column_more{margin-top:40px}
}