@charset "UTF-8";
/* ==========================================================================
   データで見る通販・EC市場動向　専用CSS
   research_column.css

   市場動向の記事（テンプレート：default）で読み込みます。
   このテンプレートは統合ガイドの guide.css を読み込まないため、
   市場動向で使う分だけをこのファイルにまとめています。
   値は guide.css の変数を展開済みです。

   収録しているもの
     1. 前後の記事へのページ送り（.p-prevnext）
     2. 統合ガイドへの遷移バナー（.p-guidebanner）

   読み込み方
     各記事の本文の先頭で、次の1行を書いています。
     <link rel="stylesheet" href="/contents/eltexdc/css/research_column.css">

   2026-10-16 作成
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 前後の記事へのページ送り
   統合ガイド21本と同じ見た目。PC でも「← 前の記事」「次の記事 →」のラベルを出し、
   その下にタイトルを置きます。タイトルは PC2行／SP3行で省略します。
   -------------------------------------------------------------------------- */
.guide-body .p-prevnext{background:#fff;padding:50px 0}
.guide-body .p-prevnext__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:0 16px;width:100%;max-width:830px;margin:0 auto;padding:0 40px;font-weight:700;line-height:1.5}
.guide-body .p-prevnext__sep{grid-column:2;justify-self:center;display:block;width:1px;padding:0;
  overflow:hidden;text-indent:-9999px;background:#ddd}
.guide-body .p-prevnext__link{display:block;overflow:visible;color:#000;transition:opacity .2s}
.guide-body .p-prevnext__link:hover,.guide-body .p-prevnext__link:focus-visible{opacity:.7}
.guide-body .p-prevnext__link--prev{grid-column:1;justify-self:stretch;text-align:left}
.guide-body .p-prevnext__link--next{grid-column:3;justify-self:stretch;text-align:right}
.guide-body .p-prevnext__link:only-child{grid-column:1 / -1;justify-self:center;text-align:center}
.guide-body .p-prevnext__label{display:block;font-size:14px;font-weight:400;color:#666;margin-bottom:6px}
.guide-body .p-prevnext__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:18px;line-height:1.5}
.guide-body .p-prevnext__link--prev .p-prevnext__label::before{content:"\2190";margin-right:6px}
.guide-body .p-prevnext__link--next .p-prevnext__label::after{content:"\2192";margin-left:6px}
@media screen and (max-width:1100px){
  .guide-body .p-prevnext__inner{padding:0 16px}
  .guide-body .p-prevnext__label{font-size:12px;margin-bottom:4px}
  .guide-body .p-prevnext__title{font-size:14px;-webkit-line-clamp:3}
}

/* --------------------------------------------------------------------------
   2. 統合ガイドへの遷移バナー
   統合ガイド21本と同じ見た目。
   1枚だけ置くため、カルーセル用の指定（矢印・ドット・ループ）は含めていません。
   -------------------------------------------------------------------------- */
.guide-body .p-guidebanner{background:#fff;padding:50px 0}
.guide-body .p-guidebanner__inner{width:100%;max-width:1320px;margin:0 auto;padding:0 40px}
.guide-body .p-guidebanner__list{display:flex;gap:16px;justify-content:safe center;list-style:none;
  margin:0;padding:0}
.guide-body .p-guidebanner__item{flex:0 0 399px;max-width:100%}
.guide-body .p-guidebanner__item a{display:block;position:relative;transition:opacity .2s}
.guide-body .p-guidebanner__item a:hover,
.guide-body .p-guidebanner__item a:focus-visible{opacity:.7}
/* サイト共通の a img:hover{opacity:.7} が画像にも効いて二重に薄くなるため打ち消します */
.guide-body .p-guidebanner__item a img:hover{opacity:1}
.guide-body .p-guidebanner__item img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;
  object-fit:cover;background:#ccc;border:1px solid #b6b9a4;box-sizing:border-box}
@media screen and (max-width:1100px){
  .guide-body .p-guidebanner__inner{padding:0 16px}
}
@media screen and (max-width:1023px){
  .guide-body .p-guidebanner__item{flex-basis:85%}
}