@charset "UTF-8";
/* ==========================================================================
   guide-top.css
   EC・通販ガイド TOP（ガイド一覧ページ）

   ・ガイド記事（guide.css）と同じベース＋TOP 固有パーツで構成しています
   ・編集は src/guide.css（共通）と src/guidetop.css（TOP 固有）で行ってください
   ・すべて .guide-body 配下にスコープしてあり、CMS 共通CSS
     （/contents/eltexdc/css/...style.css 等）とは干渉しません
   ・読み込み順は必ず「CMS 共通CSS → 本ファイル」にしてください
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
.guide-body,.guide-body *,.guide-body *::before,.guide-body *::after{box-sizing:border-box}
.guide-body{-webkit-text-size-adjust:100%}
.guide-body{margin:0}
.guide-body img{border:0;vertical-align:top;max-width:100%}
.guide-body ul,.guide-body ol,.guide-body dl,.guide-body dd,.guide-body p,.guide-body h1,.guide-body h2,.guide-body h3,.guide-body h4,.guide-body figure{margin:0;padding:0}
.guide-body ul,.guide-body ol{list-style:none}
.guide-body a{color:inherit;text-decoration:none}
.guide-body table{border-collapse:collapse;border-spacing:0}
/* --- CMS共通CSS（style.css の section / h1〜h4 / table th など素のタグ指定）が
       記事本文に効かないようにするための打ち消し ------------------- */
.guide-body h1,.guide-body h2,.guide-body h3,.guide-body h4,.guide-body h5,.guide-body h6,
.guide-body p,.guide-body li,.guide-body dt,.guide-body dd,.guide-body th,.guide-body td{text-align:left}
.guide-body li::before{content:none}
.guide-body section,.guide-body article,.guide-body aside,.guide-body nav,.guide-body main,
.guide-body figure,.guide-body figcaption,.guide-body div,.guide-body ul,.guide-body ol,
.guide-body dl,.guide-body dt,.guide-body dd{margin:0;padding:0}
.guide-body th,.guide-body td{color:inherit;background:none;border:0;font-size:inherit}
.guide-body h1,.guide-body h2,.guide-body h3,.guide-body h4{letter-spacing:normal}
.guide-body dt{font-weight:400}
.guide-body strong{font-weight:700}
/* --- design tokens -------------------------------------------------------- */
:root{/* eltexDC 本体サイト（style.css の body 指定）と同一のフォントスタック */
  --font-ja:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,メイリオ,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体","Yu Gothic",YuGothic,"Noto Sans JP","Noto Sans CJK JP","MS PGothic",Osaka,arial,sans-serif;
  --c-text:#333;
  --c-muted:#666;
  --c-orange:#eb6c00;        /* アクセントオレンジ（ボタン・ラベル・リンクホバー共通） */
  --c-dark:#333;
  --c-bg-gray:#f5f5f5;
  --c-bg-orange:#fdf2e8;   /* ハイライトボックの薄オレンジ背景 */
  --c-border:#ddd;
  /* 本文カラム幅。ここだけ変えれば FV・表・ボックスまで追従します。
     1100px … PDF（通販ECガイド_ピラー）の元デザイン
      742px … PR TIMES プレスリリースと同じ本文幅
      850px … 現行（PR TIMES より少し広め） */
  --w-content:850px;    /* 記事カード幅 */
  --w-inner:calc(var(--w-content) - 40px);   /* ページタイトル／一覧セクションのテキスト幅 */
  --w-text:calc(var(--w-content) - 50px * 2);   /* 記事本文の実テキスト幅（850 - 左右50 = 750px） */

  /* ブロックとブロックの間の帯の余白。
     画面幅に応じて連続的に変わる（ブレイクポイントで跳ばない）。
     390px⇒ 16px ／ 768px⇒ 31px ／ 1250px 以上⇒ 50px（PC は従来どおり） */
  --gap-band:clamp(16px, 4vw, 50px);
  /* カードの内側上部など、もう少し小さめの余白 */
  --gap-band-sm:clamp(20px, 3vw, 36px);}
.guide-body{font-family:var(--font-ja);
  color:var(--c-text);
  background:#fff;
  font-size:16px;
  line-height:1.8;
  font-feature-settings:"palt" 0;}
.guide-body .l-container{width:var(--w-content);margin:0 auto}
.guide-body .l-inner{width:var(--w-inner);margin:0 auto}
/* dev-dc.eltex.co.jp の ol.breadcrumb に準拠
   max-width:calc(1240px + 40px*2) / width:100% / display:flex / padding:5px 40px */
.guide-body .p-breadcrumb{color:var(--c-text)}
.guide-body .p-breadcrumb__inner{width:100%;max-width:calc(1240px + 40px * 2);display:flex;flex-wrap:wrap;
  font-size:13px;line-height:1.6;margin:0 auto;padding:5px 40px}
.guide-body .p-breadcrumb__inner li span{display:inline-block;padding:0 10px}
.guide-body .p-breadcrumb__inner li:not(:last-child)::after{content:"\203A";font-weight:400;line-height:1;color:#666}
/* ==========================================================================
   partial: page-title  （ページタイトル＋リード文）
   ========================================================================== */
.guide-body .p-pagetitle{background:#fff}
.guide-body .p-pagetitle__heading{font-size:36px;font-weight:700;line-height:1.6;text-align:center;margin-bottom:24px}
/* 上の余白 80px は dev-dc.eltex.co.jp/reason/ の .intro（padding:80px 40px / SP 60px）に合わせている */
.guide-body .p-pagetitle .l-inner{width:100%;max-width:var(--w-content);padding:80px 50px 36px}
/* 文字は左寄せのまま、ブロック（最長行の幅）を中央に配置 */
.guide-body .p-pagetitle__lead{font-size:16px;font-weight:400;line-height:1.8;text-align:left;
  width:fit-content;max-width:100%;margin:0 auto}
/* padding-top がそのままコラムタイトル上のグレーの帯になる */
.guide-body .p-article-wrap{background:var(--c-bg-gray);padding:24px 50px var(--gap-band);margin-bottom:var(--gap-band)}
.guide-body .p-article{background:#fff;width:var(--w-content);margin:0 auto;padding:36px 50px var(--gap-band)}
/* --- 記事ヘッダー（白カード内） --- */
.guide-body .p-article__title{font-size:32px;font-weight:700;line-height:46px}
.guide-body .p-article__title .num{font-size:18px;line-height:1;margin-left:12px;vertical-align:baseline}
.guide-body .p-article__fv{margin:24px 0}
.guide-body .p-article__fv img{width:100%;height:auto;display:block}
.guide-body .p-article__date{font-size:14px;line-height:1.4;color:var(--c-muted);margin-top:24px}
/* --- 見出し --- */
.guide-body .c-h2{font-size:24px;font-weight:700;line-height:1.4;margin-top:50px}
.guide-body .c-h3{font-weight:700;margin:50px 0 12px;font-size:20px;line-height:1.5}
/* --- 記事サブタイトル（クラスター記事で使用。ピラーは要素自体がない） --- */
.guide-body .p-article__subtitle{font-size:22px;font-weight:700;line-height:1.4;margin-top:12px}
/* タグキーワード。2026/09/18 の指摘で先頭の「＃」だけを外しました
   （検索結果に飛ぶハッシュタグと誤解されないように。キーワード自体は表示します） */
.guide-body .p-article__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.guide-body .p-article__tags li{background:#ccc;color:#000;font-size:12px;line-height:22.5px;height:22.5px;padding:0 13px}
/* --- 小見出し（h3 の下の区切り） --- */
.guide-body .c-h4{font-size:16px;font-weight:700;line-height:1.5;margin:24px 0 0}
/* --- 本文 --- */
.guide-body .c-text{font-size:16px;line-height:1.8;margin-top:12px}
.guide-body .c-text--lg{font-size:16px;line-height:1.8;margin-top:12px}
.guide-body .c-h3 + .c-text{margin-top:12px}
.guide-body .c-table + .c-text{margin-top:36px}
/* --- ガイド記事リスト --- */
.guide-body .c-guidelist{font-size:16px;line-height:1.8;margin-top:50px}
.guide-body .c-guidelist li.is-current{font-weight:700;color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.guide-body .c-guidelist a:hover,.guide-body .c-guidelist a:focus-visible{color:var(--c-orange);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* --- 本文中の箇条書き（行頭の「・」はテキストとして記述） --- */
.guide-body .c-plainlist{font-size:16px;line-height:1.8;margin:12px 0}
/* 字ぶら下げ：行頭の「・」分（1em）を外に出し、折り返しを本文頭に揃える */
.guide-body .c-plainlist li{padding-left:1em;text-indent:-1em}
/* 字下げ付きのブロックは表組と同じ 36px で本文から離す */
.guide-body .c-deflist{font-size:16px;line-height:1.8;margin:36px 0}
.guide-body .c-deflist dt{padding-left:1em;text-indent:-1em;font-weight:700}
/* 説明文は見出しの本文頭（「・」の右）に字下げ */
.guide-body .c-deflist dd{padding-left:1em}
/* --- ハイライトボックス（白地＋オレンジ枠） --- */
.guide-body .c-box{background:var(--c-bg-orange);width:100%;margin:50px 0 0;padding:50px}
.guide-body .c-box__title{font-size:24px;font-weight:700;line-height:1.4}
.guide-body .c-box__title .sub{font-size:14px;line-height:1;margin:0 9px;position:relative;bottom:2px}
.guide-body .c-box__body{font-size:16px;line-height:1.8;font-weight:700;margin:12px 0 0}
/* --- 番号付き見出し＋説明（統合通販システムを選ぶときの5つのポイント） --- */
.guide-body .c-pointlist{margin:36px 0}
/* 項目どうしの間隔 */
.guide-body .c-point__desc + .c-point__title{margin-top:12px}
/* 字ぶら下げ：番号分（33px）を外に出す */
.guide-body .c-point__title{font-size:16px;font-weight:700;line-height:1.8;padding-left:33px;text-indent:-33px}
/* text-indent は継承されるため、番号の inline-block 内では打ち消す */
.guide-body .c-point__title .num{display:inline-block;width:33px;text-indent:0}
/* 番号にラベルを付ける場合（「誤解 1.」など）はぶら下げ幅を広げる */
.guide-body .c-pointlist--label .c-point__title{padding-left:64px;text-indent:-64px}
.guide-body .c-pointlist--label .c-point__title .num{width:64px}
.guide-body .c-pointlist--label .c-point__desc{padding-left:64px}
/* 説明文は見出しの本文頭（番号の右 33px）に字下げ */
.guide-body .c-point__desc{font-size:16px;line-height:1.8;padding-left:33px}
/* --- 本文中の強調（太字／太字＋下線） --- */
.guide-body .c-text strong,.guide-body .c-box__body strong{font-weight:700}
/* --- 汎用ボタン（CMS 共通の .btn と同じ見た目・振る舞い） --- */
.guide-body .c-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:240px;height:56px;padding:0 24px;
  font-size:16px;font-weight:700;line-height:1.4;color:#fff;text-align:center;
  transition:opacity .2s}
.guide-body .c-btn:hover,.guide-body .c-btn:focus-visible{opacity:.7}
.guide-body .c-btn--orange{background:var(--c-orange)}
.guide-body .c-btn--dark{background:var(--c-dark)}
/* 監修者カードの導線ボタン。本文列の頭（ロゴ幅 196px + 50px）に揃える */
.guide-body .p-supervisor__btns{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 0 246px}
.guide-body .c-underline{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* 将来リンク化する想定の箇所。span のままでも a に差し替えても
   同じホバー表現になるようクラスに対して指定 */
.guide-body .c-underline:hover,.guide-body .c-underline:focus-visible{color:var(--c-orange)}
/* --- 比較テーブル --- */
.guide-body .c-table{width:100%;font-size:15px;line-height:1.5;margin:36px 0;table-layout:fixed}
/* セルの見た目は --compare / --products 共通。
   上下 padding 8px を入れても 1 行セルは height:40px に収まるため、
   複数行セルだけが自然に伸びる */
.guide-body .c-table th,.guide-body .c-table td{border:1px solid var(--c-border);height:40px;padding:8px 14px;text-align:left;
  font-weight:400;vertical-align:middle;color:var(--c-text);background:#fff}
/* 見出し行と左端の見出し列は同じグレー地 */
.guide-body .c-table thead th,.guide-body .c-table tbody th{background:#f0f0f0;color:var(--c-text)}
/* 1行目（見出し行）のみ太字 */
.guide-body .c-table thead th{font-weight:700}
/* 列幅のみテーブルごとに指定 */
.guide-body .c-table--compare col.c1{width:20.7%}
.guide-body .c-table--compare col.c2{width:39.65%}
.guide-body .c-table--compare col.c3{width:39.65%}
.guide-body .c-table--products col.p1{width:28.3%}
.guide-body .c-table--products col.p2{width:19.8%}
.guide-body .c-table--products col.p3{width:51.9%}
/* --- FAQ（Q/A マーカー＋区切り罫） --- */
.guide-body .c-faq{width:100%;margin:12px 0 0}
.guide-body .c-faq + .c-faq{margin-top:50px}
.guide-body .c-faq + .c-box{margin-top:50px}
.guide-body .c-faq__q,.guide-body .c-faq__a{position:relative;padding-left:33px}
/* Q / A マーカーは images 内の SVG（q-solid-full.svg / a-solid-full.svg）を
   data URI で埋め込み。SVG 自体が 2 色（黒地＋白抜き／黒文字＋円枠）なので
   mask ではなく background-image でそのまま描画する */
.guide-body .c-faq__q::before,.guide-body .c-faq__a::before{content:"";position:absolute;left:3px;display:block;
  background-repeat:no-repeat;background-size:contain;background-position:center;}
.guide-body .c-faq__q{font-size:16px;line-height:1.8;padding-bottom:4px;border-bottom:1px solid var(--c-border)}
.guide-body .c-faq__q::before{width:20px;height:20px;top:5px;background-image:url("data:image/svg+xml,%3Csvg id=%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22 data-name=%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22 viewBox=%220 0 700 700%22%3E %3Cdefs%3E %3Cstyle%3E .st0 %7B fill: %23fff%3B %7D %3C/style%3E %3C/defs%3E %3Ccircle cx=%22350%22 cy=%22350%22 r=%22350%22/%3E %3Cg transform=%22translate%28350%2C350%29 scale%280.8%29 translate%28-350%2C-366%29%22%3E %3Cpath class=%22st0%22 d=%22M190%2C350c0%2C88.4%2C71.6%2C160%2C160%2C160%2C28.9%2C0%2C56-7.7%2C79.4-21.1l-72-86.4c-11.3-13.6-9.5-33.8%2C4.1-45.1%2C13.6-11.3%2C33.8-9.5%2C45.1%2C4.1l70.9%2C85.1c20.4-26.8%2C32.5-60.3%2C32.5-96.6%2C0-88.4-71.6-160-160-160s-160%2C71.6-160%2C160ZM470.9%2C538.6c-34.9%2C22.4-76.4%2C35.4-120.9%2C35.4-123.7%2C0-224-100.3-224-224s100.3-224%2C224-224%2C224%2C100.3%2C224%2C224c0%2C56.1-20.6%2C107.4-54.7%2C146.7l47.3%2C56.8c11.3%2C13.6%2C9.5%2C33.8-4.1%2C45.1-13.6%2C11.3-33.8%2C9.5-45.1-4.1l-46.6-55.9h.1Z%22/%3E %3C/g%3E %3C/svg%3E")}
.guide-body .c-faq__a{font-size:16px;line-height:1.8;margin-top:12px}
.guide-body .c-faq__a::before{width:20px;height:20px;top:5px;background-image:url("data:image/svg+xml,%3Csvg id=%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22 data-name=%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22 viewBox=%220 0 703 703%22%3E %3Cdefs%3E %3Cstyle%3E .st0 %7B fill: none%3B stroke: %23000%3B stroke-miterlimit: 10%3B stroke-width: 8px%3B %7D %3C/style%3E %3C/defs%3E %3Cg transform=%22translate%28351.5%2C351.5%29 scale%280.86%29 translate%28-352%2C-324%29%22%3E %3Cpath d=%22M381.05%2C119.21c-4.9-11.9-16.6-19.7-29.5-19.7s-24.6%2C7.8-29.5%2C19.7c-93.3%2C224-146.7%2C352-160%2C384-6.8%2C16.3.9%2C35%2C17.2%2C41.8s35-.9%2C41.8-17.2l31.8-76.3h197.3l31.8%2C76.3c6.8%2C16.3%2C25.5%2C24%2C41.8%2C17.2%2C16.3-6.8%2C24-25.5%2C17.2-41.8-13.3-32-66.7-160-160-384h.1ZM423.55%2C387.51h-144l72-172.8%2C72%2C172.8Z%22/%3E %3C/g%3E %3Ccircle class=%22st0%22 cx=%22351.5%22 cy=%22351.5%22 r=%22346%22/%3E %3C/svg%3E")}
/* ==========================================================================
   partial: supervisor  （監修者紹介＋相談導線／ベージュボックス）
   ========================================================================== */
.guide-body .p-supervisor-wrap{background:#fff;padding-top:var(--gap-band)}
.guide-body .p-supervisor{background:var(--c-bg-gray);width:var(--w-content);margin:0 auto;padding:var(--gap-band-sm) 50px 50px}
/* dev-dc の research_info_author_title に準拠（padding-bottom:15px ＋ 1px の下罫） */
.guide-body .p-supervisor__title{font-size:21px;font-weight:700;line-height:1.4;margin-top:36px;
  padding-bottom:12px;border-bottom:1px solid var(--c-text)}
/* 1つ目の見出しはカードの padding-top:36px と足し算になるため、
   見た目の余白を 36px に揃える目的でマージンを打ち消す */
.guide-body .p-supervisor__title:first-child{margin-top:0}
.guide-body .p-supervisor__body{display:flex;margin-top:50px}
.guide-body .p-supervisor__photo{width:196px;height:196px;flex:none;margin:0}
.guide-body .p-supervisor__photo img{width:196px;height:196px;border-radius:50%;display:block}
.guide-body .p-supervisor__text{font-size:16px;line-height:1.8;margin-left:50px}
.guide-body .p-supervisor__name{font-size:18px;font-weight:700;line-height:1.8;margin-bottom:2px}
.guide-body .p-supervisor__text a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* ロゴの枠を写真と同じ 196px・左端揃えにし、
   本文の開始位置（196 + 50px）も監修者紹介と揃える */
.guide-body .p-supervisor__logo{width:196px;flex:none;margin-left:0;padding-top:50px}
.guide-body .p-supervisor__logo img{width:192px;height:46px;display:block}
/* ==========================================================================
   partial: guide-index  （ガイド一覧）
   ========================================================================== */
.guide-body .p-guideindex{background:var(--c-bg-gray);padding:50px 0}
/* 左右を詰めて文字のかたまりをページ中心寄りにする。
   200px まで詰めると本文幅が 450px になり、記事タイトルが長いガイドで
   PC でも折り返す恐れがあるため、150px（本文幅 550px）にとどめている。 */
.guide-body .p-guideindex .l-inner{width:var(--w-content);max-width:100%;margin:0 auto;padding:0 150px}
/* 見出し下の罫線も .p-supervisor__title と同じ */
.guide-body .p-guideindex__title{font-size:24px;font-weight:700;line-height:1.4;
  padding-bottom:12px;border-bottom:1px solid var(--c-text)}
.guide-body .p-guideindex__list{font-size:16px;line-height:1.8;margin-top:36px}
/* ==========================================================================
   partial: prev-next  （前後の記事へのページ送り）
   ========================================================================== */
.guide-body .p-prevnext{background:#fff;padding:50px 0}
/* 中央の縦棒が画面の真中に来るよう、左右を同じ幅（1fr）にする。
   前の記事は右寄せ、次の記事は左寄せで縦棒に寄り添う。
   全体の幅は記事本文と同じ 750px までに抑え、長い表題は PC でも折り返します。 */
.guide-body .p-prevnext__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 16px;
  width:100%;max-width:calc(var(--w-text) + 40px * 2);margin:0 auto;padding:0 40px;
  font-size:18px;font-weight:700;line-height:1.5}
.guide-body .p-prevnext__link--prev{grid-column:1;justify-self:end;text-align:right}
.guide-body .p-prevnext__sep{grid-column:2;justify-self:center}
.guide-body .p-prevnext__link--next{grid-column:3;justify-self:start;text-align:left}
/* 総論など、次の記事しかないページは中央に置く */
.guide-body .p-prevnext__link:only-child{grid-column:1 / -1;justify-self:center;text-align:center}
.guide-body .p-prevnext__sep{color:var(--c-border)}
/* 「前の記事」「次の記事」のラベルはスマホだけで出す */
.guide-body .p-prevnext__label{display:none}
.guide-body .p-prevnext__link{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::before,.guide-body .p-prevnext__link--next::after{content:"";display:inline-block;width:8px;height:8px;vertical-align:1px;
  border-top:1px solid currentColor;border-right:1px solid currentColor}
.guide-body .p-prevnext__link--prev::before{transform:rotate(-135deg);margin-right:12px}
.guide-body .p-prevnext__link--next::after{transform:rotate(45deg);margin-left:12px}
/* ==========================================================================
   partial: guide-banner  （他ガイドへの遷移バナー）
   参考：https://www.eltex.co.jp/ 下部の 3 枚並びバナー
   ・1 枚 ＝ 1 画像。キャッチ・リード文・「詳しく見る」まで画像の中に入ります
   ・画像は 900 × 500（9 : 5）。いまはグレーの仮置き画像です
   ========================================================================== */
.guide-body .p-guidebanner{background:#fff;padding:50px 0}
.guide-body .p-guidebanner__inner{width:100%;max-width:calc(1240px + 40px * 2);margin:0 auto;padding:0 40px}
/* カード 1 枚の幅は参考ページと同じ 400px が上限。
   並んだ枚数ぶんだけ列を作り、列は必ず等幅（1fr）にする。
   1 枚＝400px ／ 2 枚＝2 列 ／ 3 枚＝3 列。画面が狭いときは全体が縮みます。
   4 枚以上は 3 列のまま折り返します（折り返した行も同じ幅になります）。 */
.guide-body .p-guidebanner__list{display:grid;gap:16px;margin:0 auto;
  grid-template-columns:1fr;max-width:400px}
.guide-body .p-guidebanner__list:has(> :nth-child(2)){grid-template-columns:repeat(2,1fr);max-width:816px}
.guide-body .p-guidebanner__list:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr);max-width:1232px}
.guide-body .p-guidebanner__item{min-width:0}
.guide-body .p-guidebanner__item a{display:block;border:1px solid var(--c-border);transition:opacity .2s}
.guide-body .p-guidebanner__item a:hover,.guide-body .p-guidebanner__item a:focus-visible{opacity:.7}
.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}
/* ==========================================================================
   スマートフォン対応（PC表示は PDF と 1:1、狭い画面でのみ折り返し）
   ========================================================================== */
@media screen and (max-width:1100px){
:root{--w-content:100%;--w-inner:100%}
.guide-body .l-container,.guide-body .l-inner{width:100%;padding-left:16px;padding-right:16px}
.guide-body .p-breadcrumb__inner{padding:5px 20px}
.guide-body .p-pagetitle__heading{font-size:28px}
.guide-body .p-pagetitle .l-inner{padding:60px 16px 36px}
/* スマホでは記事カードが全幅になるため、カード下のグレーの帯は
     意味をなさないので消す（タイトル上の 24px は区切りとして残す） */
.guide-body .p-article-wrap{padding:24px 0 0}
.guide-body .p-article{width:100%;padding:36px 16px var(--gap-band)}
.guide-body .p-article__title{font-size:26px;line-height:38px}
.guide-body .p-article__title .num{font-size:16px;margin-left:8px}
.guide-body .p-article__fv img{width:100%;height:auto}
.guide-body .c-h2,.guide-body .p-guideindex__title{font-size:20px}
.guide-body .p-guideindex .l-inner{width:100%;padding:0 16px}
.guide-body .c-text,.guide-body .c-text--lg,.guide-body .c-plainlist,.guide-body .c-box__body,.guide-body .c-point__title,.guide-body .c-point__desc,.guide-body .c-faq__q{font-size:15px}
/* ページ送り：左右 2 列。上に「← 前の記事」「次の記事 →」、下に記事タイトル。
     真ん中の 1px の縦線が区切り。左右を同じ 1fr にしているので画面中央に来る。 */
.guide-body .p-prevnext__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
    padding:0 16px;gap:0 16px;font-size:14px}
/* 「｜」の文字は隠し、上下いっぱいの細線にする */
.guide-body .p-prevnext__sep{display:block;width:1px;padding:0;overflow:hidden;
    text-indent:-9999px;background:var(--c-border)}
.guide-body .p-prevnext__link{display:block}
.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__label{display:block;font-size:12px;font-weight:400;color:var(--c-muted);margin-bottom:4px}
.guide-body .p-prevnext__title{display:block;font-size:14px;line-height:1.5}
/* PC 用の山形を消し、矢印はラベル側に付ける */
.guide-body .p-prevnext__link--prev::before,.guide-body .p-prevnext__link--next::after{display:none}
.guide-body .p-prevnext__link--prev .p-prevnext__label::before{content:"←";margin-right:6px}
.guide-body .p-prevnext__link--next .p-prevnext__label::after{content:"→";margin-left:6px}
.guide-body .p-article__subtitle{font-size:16px}
.guide-body .p-guidebanner__inner{padding:0 16px}
/* 狭い画面では枚数別の列指定をやめ、入るぶんだけ横に並べて折り返す。
     390px → 1 枚 ／ 768px → 2 枚。枚数が増えてもこのままでよい。
     ※ 1 枚あたり 400px の上限（max-width）は PC の指定をそのまま引き継ぎます */
.guide-body .p-guidebanner__list,.guide-body .p-guidebanner__list:has(> :nth-child(2)),.guide-body .p-guidebanner__list:has(> :nth-child(3)){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* スマホでは上下の余白を詰める（PC は 50px のまま） */
.guide-body .c-box{margin-top:36px;padding:24px 16px}
.guide-body .c-faq + .c-box{margin-top:36px}
/* 囲みボックスの見出しと本文見出し（h3）で差をつける
     PC は 24 / 20px、スマホは 22 / 18px */
.guide-body .c-box__title{font-size:22px}
.guide-body .c-h3{font-size:18px}
.guide-body .c-box__title .sub{font-size:13px;margin:0 6px}
/* table-layout は fixed のまま（auto にすると中身の文字数で列幅が決まってしまい、
     通販システム列と EC システム列の縮み方が揃わなくなります）
     col の比率も PC と同じ。比較する 2 列は常に同じ幅です */
.guide-body .c-table{font-size:13px}
.guide-body .c-table th,.guide-body .c-table td{padding:8px 10px;height:auto;line-height:1.5;word-break:normal;overflow-wrap:anywhere}
/* 製品一覧テーブルは横並びだと窮屈なため、1件=1ブロックに積む */
.guide-body .c-table--products,.guide-body .c-table--products tbody,.guide-body .c-table--products tr,.guide-body .c-table--products th,.guide-body .c-table--products td{display:block;width:auto}
.guide-body .c-table--products thead{display:none}
.guide-body .c-table--products tr{border:1px solid var(--c-border);margin-top:12px}
.guide-body .c-table--products tr:first-child{margin-top:0}
.guide-body .c-table--products th,.guide-body .c-table--products td{border:0;padding:4px 14px;line-height:1.5}
.guide-body .c-table--products tbody th{padding-top:12px;font-size:15px}
.guide-body .c-table--products tbody tr td:last-child{padding-bottom:12px}
.guide-body .c-table--products td::before{content:attr(data-label)"：";font-weight:700}
.guide-body .p-supervisor{width:100%;padding:var(--gap-band-sm) 16px 24px}
.guide-body .p-supervisor__logo{width:auto;max-width:192px}
.guide-body .p-supervisor__logo img{width:100%;height:auto}
.guide-body .p-supervisor__body{flex-wrap:wrap}
.guide-body .p-supervisor__photo{margin:0 auto}
.guide-body .p-supervisor__btns{margin-left:0;justify-content:center}
.guide-body .p-supervisor__text{margin-left:0;margin-top:24px;width:100%}
.guide-body .p-supervisor__logo{margin:0 auto;padding-top:0}
}
/* ==========================================================================
   partial: guide-top  （EC・通販ガイド TOP／シリーズ一覧）
   ワイヤー ec-guide-wip_EC・通販ガイドTOP_20260918.pdf の実測値ベース
   ・カード幅 1054px（1920px デザインで左右 433px 空き）
   ・余白は 12 / 24 / 36 / 50px スケールに寄せています
   ========================================================================== */
:root{--w-topcard:1090px;   /* ガイドカードの幅 */
  --w-topthumb:320px;   /* サムネイルの横幅。比率 4:3（横長）＝ 320x240。
                           高さを左のタイトル＋リード文の天地（約242px）に揃えています */}
.guide-body .p-guidetop{background:var(--c-bg-gray);padding:36px 50px 50px}
.guide-body .p-guidetop__inner{width:var(--w-topcard);max-width:100%;margin:0 auto}
.guide-body .p-guidetop__list{display:flex;flex-direction:column;gap:36px}
/* --- カード本体 ----------------------------------------------------------- */
.guide-body .p-guidetopcard{display:grid;
  grid-template-columns:350px 1fr var(--w-topthumb);
  background:#fff;
  padding:30px;}
/* タイトルの上の小見出し。ワイヤーではサムネイル画像の中にあるキャッチ
   （「体系的にみる」「事業者調査・消費者調査から」）をテキストで出したもの */
.guide-body .p-guidetopcard__label{font-size:16px;line-height:1.5;color:var(--c-text);margin-bottom:4px;border-left:3px solid #EC6C00;padding-left:.5em}
.guide-body .p-guidetopcard__title{font-size:32px;font-weight:700;line-height:1.4}
.guide-body .p-guidetopcard__title a{transition:color .2s}
.guide-body .p-guidetopcard__title a:hover,.guide-body .p-guidetopcard__title a:focus-visible{color:var(--c-orange)}
.guide-body .p-guidetopcard__desc{font-size:16px;font-weight:700;line-height:1.75;margin-top:12px;padding-right:36px}
/* 説明文の末尾に添える「（全21本のガイド）」。本文と区別するため少し小さく、やや淡くします */
.guide-body .p-guidetopcard__descnote{font-size:.9em;color:#666}
.guide-body .p-guidetopcard__count{font-size:16px;line-height:1.75;color:var(--c-text);margin-top:24px}
/* --- 中カラム（縦罫線つき） ------------------------------------------------ */
.guide-body .p-guidetopcard__sub{border-left:2px solid #ccc;
  padding-left:28px;
  margin-right:25px;}
.guide-body .p-guidetopcard__subtitle{font-size:16px;line-height:1.75;color:var(--c-text);border-left:3px solid #EC6C00;padding-left:.5em}
.guide-body .p-guidetopcard__topics{font-size:16px;line-height:1.75;margin-top:4px}
.guide-body .p-guidetopcard__topics li{padding-left:1em;text-indent:-1em}
/* 調査レポート（最新2本） */
.guide-body .p-guidetopcard__reports li + li{margin-top:24px}
.guide-body .p-guidetopcard__rlabel{font-size:16px;line-height:1.75;color:var(--c-text);border-left:3px solid #EC6C00;padding-left:.5em}
.guide-body .p-guidetopcard__rtitle{font-size:16px;line-height:1.75}
.guide-body .p-guidetopcard__rtitle a{transition:color .2s}
.guide-body .p-guidetopcard__rtitle a:hover,.guide-body .p-guidetopcard__rtitle a:focus-visible{color:var(--c-orange);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.guide-body .p-guidetopcard__rdate{font-size:14px;line-height:1.5;color:var(--c-muted);margin-top:4px}
/* --- 右カラム（サムネイル） ------------------------------------------------ */
/* サムネイルはグリッドの3列目（--w-topthumb＝320px）に収まります。
   固定幅をやめて最大320pxにすることで、SPで左右に余白が出ないようにします */
.guide-body .p-guidetopcard__thumb{align-self:center;max-width:320px}
.guide-body .p-guidetopcard__thumb img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;background:#ccc}
/* --- 下段（タグ＋ボタン） -------------------------------------------------- */
.guide-body .p-guidetopcard__foot{grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:15px;}
/* タグはピラー記事（.p-article__tags）と同じ見た目に揃える */
.guide-body .p-guidetopcard__tags{display:flex;flex-wrap:wrap;gap:10px}
.guide-body .p-guidetopcard__tags li{background:#ccc;color:#000;font-size:12px;line-height:22.5px;height:22.5px;padding:0 13px}
.guide-body .p-guidetopcard__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:320px;max-width:100%;height:48px;margin-left:auto;background:#EC6C00;border:2px solid #EC6C00;color:#fff;font-size:16px;font-weight:700;line-height:1.5;transition:opacity .2s}
.guide-body .p-guidetopcard__btn::after{font-family:"FontAwesome";content:"\f105";font-weight:400;line-height:1;position:absolute;top:50%;right:14px;transform:translateY(-50%)}
.guide-body .p-guidetopcard__btn:hover,.guide-body .p-guidetopcard__btn:focus-visible{opacity:.7}
/* ==========================================================================
   スマートフォン／タブレット
   ========================================================================== */
@media screen and (max-width:1100px){
.guide-body .p-guidetop{padding:24px 16px 36px}
.guide-body .p-guidetop__inner{width:100%}
.guide-body .p-guidetop__list{gap:24px}
.guide-body .p-guidetopcard{display:flex;flex-direction:column;padding:24px 16px}
/* SP ではサムネイルをいちばん上に */
.guide-body .p-guidetopcard__thumb{order:-1;margin:0 auto 24px;align-self:auto;max-width:400px}
.guide-body .p-guidetopcard__label{font-size:14px}
.guide-body .p-guidetopcard__title{font-size:24px}
.guide-body .p-guidetopcard__desc{padding-right:0}
.guide-body .p-guidetopcard__sub{border-left:0;border-top:1px solid var(--c-border);
    padding-left:0;padding-top:24px;margin-right:0;margin-top:24px;}
.guide-body .p-guidetopcard__foot{display:block;margin-top:24px}
.guide-body .p-guidetopcard__btn{display:flex;width:100%;height:48px;margin-top:24px}
}

/* --- 画像の上に重ねるボタン（参考：https://www.eltex.co.jp/ の IBM Cloud バナー）
       見本は左寄せですが、こちらは右寄せにしています。
       配色はガイドTOPのボタン（.p-guidetopcard__btn）に合わせています --- */
.guide-body .p-guidebanner__item a{position:relative;transition:opacity .2s}
/* 画像でもボタンでも、どこにホバーしてもバナー全体が同じ見た目になります
   （DCサイト標準のボタン .btn:hover{opacity:.7} と同じ値です） */
.guide-body .p-guidebanner__item a:hover,
.guide-body .p-guidebanner__item a:focus-visible{opacity:.7}
/* サイト共通の style.css にある a img:hover{opacity:.7} がバナー画像にも効いてしまい、
   画像の上をホバーしたときだけ二重に薄くなっていたため打ち消します。
   DCサイトも .research_list / .product_wrap で同じ打ち消しをしています */
.guide-body .p-guidebanner__item a img:hover{opacity:1}
/* サイズは https://www.eltex.co.jp/ の IBM Cloud バナーのボタン（140×34 / 14px）に合わせています。
   幅だけは文言（市場動向一覧を見る）が長いぶん広くなります */
.guide-body .p-guidebanner__btn{position:absolute;right:3.3%;bottom:4%;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 28px 0 16px;box-sizing:border-box;background:#EC6C00;border:2px solid #EC6C00;color:#fff;font-size:14px;font-weight:700;line-height:1.5;text-align:center;white-space:nowrap;transition:opacity .2s}
.guide-body .p-guidebanner__btn::after{font-family:"FontAwesome";content:"\f105";font-weight:400;line-height:1;position:absolute;top:50%;right:12px;transform:translateY(-50%)}
@media screen and (max-width:600px){
  .guide-body .p-guidebanner__btn{font-size:13px;height:32px;padding:0 26px 0 14px;right:6%;bottom:4%}
  .guide-body .p-guidebanner__btn::after{right:11px}
}