@charset "UTF-8";
/* ==========================================================================
   guide.css
   通販システム・EC統合完全ガイド （ピラー／クラスター共通）
   記事本文（CMS の bodyHtml に相当する範囲）専用スタイル

   ・ピラー記事とクラスター記事の両方がこの 1 ファイルを使います
   ・編集は src/guide.css（スコープなしの共通ソース）で行ってください
   ・すべて .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}
/* 「・」の箇条書きと同じ字ぶら下げで、行頭に 1. 2. 3. を出す */
.guide-body .c-numlist{font-size:16px;line-height:1.8;margin:12px 0;counter-reset:c-num}
/* 「1. 本文」のように数字のうしろは半角スペース 1 個 */
.guide-body .c-numlist>li{counter-increment:c-num;padding-left:1.4em;text-indent:-1.4em}
.guide-body .c-numlist>li::before{content:counter(c-num) ".\00a0";text-indent:0}
/* 字下げ付きのブロックは表組と同じ 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}
/* dd の中の入れ子の箇条書き（原稿で「 - 」で並んでいた小項目） */
.guide-body .c-deflist dd>.c-plainlist{margin:0}
/* --- ハイライトボックス（白地＋オレンジ枠） --- */
.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}
/* 見出しは「1. 本文」「STEP1. 本文」。数字のうしろは半角スペース 1 個（HTML 側に入れている） */
.guide-body .c-point__title{font-size:16px;font-weight:700;line-height:1.8;padding-left:0;text-indent:0}
.guide-body .c-point__title .num{text-indent:0}
/* 説明文の字下げは全角スペース 1 個ぶんで統一 */
.guide-body .c-point__desc{font-size:16px;line-height:1.8;padding-left:1em}
/* 上の a{color:inherit;text-decoration:none} を本文だけ打ち消す。
   （監修者欄 .p-supervisor__text a と同じ見た目） */
.guide-body .c-text a,.guide-body .c-box__body a,.guide-body .c-point__desc a,.guide-body .c-deflist dd a,.guide-body .c-plainlist a,.guide-body .c-numlist a,.guide-body .c-faq__a a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  transition:color .2s}
.guide-body .c-text a:hover,.guide-body .c-box__body a:hover,.guide-body .c-point__desc a:hover,.guide-body .c-deflist dd a:hover,.guide-body .c-plainlist a:hover,.guide-body .c-numlist a:hover,.guide-body .c-faq__a a:hover,.guide-body .c-text a:focus-visible,.guide-body .c-box__body a:focus-visible,.guide-body .c-point__desc a:focus-visible,.guide-body .c-deflist dd a:focus-visible,.guide-body .c-plainlist a:focus-visible,.guide-body .c-numlist a:focus-visible,.guide-body .c-faq__a a:focus-visible{color:var(--c-orange)}
/* 全角スペース 1 個ぶん */
.guide-body .c-indent{padding-left:1em}
/* --- 本文中の強調（太字／太字＋下線） --- */
.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:auto;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}
/* 枚数が増えても縦に積まず、横スライド（カルーセル）で見せる。
   カード幅は「見せたい枚数 ＋ 0.5」で割って出しているので、
   次のカードが半分だけ覗く＝スライドできることが見た目で分かります。
   PC は 3.5 枚ぶん（3 枚見えて 4 枚目が半分）。
   枚数が少なくて収まりきるときは中央に寄ります（safe center）。 */
.guide-body .p-guidebanner__list{display:flex;gap:16px;justify-content:safe center;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;}
/* スクロールバーは出しません。位置は下の「・・・」で示します */
.guide-body .p-guidebanner__list::-webkit-scrollbar{display:none}
/* カード 1 枚の大きさは参考ページ（https://www.eltex.co.jp/ 下部のバナー）と同じ。
   PC は 399 × 222px 固定、1023px 以下は内側の幅の 85%（参考ページと同じ比率）。
   画像は 900 × 500 なので、幅が決まれば高さは 9 : 5 で自動的に決まります。 */
.guide-body .p-guidebanner__item{flex:0 0 399px;max-width:100%;scroll-snap-align:center}
/* ぐるっと回すための複製。回す必要がないとき（全部収まるとき）は出しません */
.guide-body .p-guidebanner__item--clone{display:none}
.guide-body .p-guidebanner__list.is-loop .p-guidebanner__item--clone{display:block}
/* JS で滑らかに動かしている間は、スナップが引っぱり合わないように切る */
.guide-body .p-guidebanner__list.is-animating{scroll-snap-type:none}
/* PC でもマウスでつかんで左右に引っぱれるようにする */
.guide-body .p-guidebanner__list.is-loop{cursor:grab}
.guide-body .p-guidebanner__list.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
/* 引っぱったときに画像そのものがドラッグされないように */
.guide-body .p-guidebanner__item img{-webkit-user-drag:none;user-select:none}
/* ◀▶ の矢印。guide.js が自動で作り、カードの段に重ねて置きます */
.guide-body .p-guidebanner__viewport{position:relative}
.guide-body .p-guidebanner__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  border:1px solid var(--c-border);border-radius:50%;background:#fff;
  color:var(--c-text);font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .2s,border-color .2s}
.guide-body .p-guidebanner__arrow::before{content:"";display:block;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor}
.guide-body .p-guidebanner__arrow--prev{left:-20px}
.guide-body .p-guidebanner__arrow--prev::before{transform:rotate(-135deg);margin-left:4px}
.guide-body .p-guidebanner__arrow--next{right:-20px}
.guide-body .p-guidebanner__arrow--next::before{transform:rotate(45deg);margin-right:4px}
.guide-body .p-guidebanner__arrow:hover,.guide-body .p-guidebanner__arrow:focus-visible{background:var(--c-orange);border-color:var(--c-orange);color:#fff}
/* display:flex を指定しているので、hidden を明示的に効かせる */
.guide-body .p-guidebanner__arrow[hidden]{display:none}
/* カードの枚数ぶん並ぶ「・・・」。guide.js が自動で作ります（HTML には書きません）。
   コーポレートサイトのファーストビューと同じ見た目・同じ 30px の当たり判定です */
.guide-body .p-guidebanner__dots{display:flex;justify-content:center;margin-top:8px}
.guide-body .p-guidebanner__dots[hidden]{display:none}
.guide-body .p-guidebanner__dots button{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;margin:0;border:0;border-radius:0;background:none;
  color:inherit;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.guide-body .p-guidebanner__dots button::before{content:"";display:block;width:8px;height:8px;
  border-radius:50%;background:#ccc;transition:background-color .2s}
.guide-body .p-guidebanner__dots .is-current button::before{background:var(--c-orange)}
.guide-body .p-guidebanner__dots button:hover::before{background:#aaa}
.guide-body .p-guidebanner__dots .is-current button:hover::before{background:var(--c-orange)}
/* 参考ページと同じく枠線なし（バナー画像そのものが枠を持ちます） */
.guide-body .p-guidebanner__item a{display:block;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-numlist,.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}
/* 矢印は画面からはみ出さないよう内側に寄せる */
.guide-body .p-guidebanner__arrow--prev{left:-8px}
.guide-body .p-guidebanner__arrow--next{right:-8px}
/* スマホでは上下の余白を詰める（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}
}
/* ==========================================================================
   スマートフォン（600px 以下）
   ========================================================================== */
@media screen and (max-width:1023px){
/* 参考ページはこの幅から 1 枚見せに切り替わります。幅は内側の 85% */
.guide-body .p-guidebanner__item{flex-basis:85%}
}
/* 前後ページ・一覧からのアンカー遷移時に見出しが上端に密着しないように */
.guide-body .p-article__title{scroll-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）に合わせています。
   幅だけは文言（市場動向一覧を見る）が長いぶん広くなります */
@media screen and (max-width:600px){
}


/* ==========================================================================
   partial: prev-next  PCでもSPと同じ見せ方にする
   「← 前の記事」「次の記事 →」のラベルを出し、その下にタイトルを置きます。
   調査・コラムはタイトルが長いため、タイトルはPC2行／SP3行で打ち切ります
   （あふれた分は…になります）。左右のブロックの高さも揃います。
   ========================================================================== */
.guide-body .p-prevnext__inner{align-items:stretch}
.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;overflow:visible}
.guide-body .p-prevnext__link--prev{justify-self:stretch;text-align:left}
.guide-body .p-prevnext__link--next{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:var(--c-muted);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::before,
.guide-body .p-prevnext__link--next::after{display:none}
.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__label{font-size:12px;margin-bottom:4px}
  .guide-body .p-prevnext__title{font-size:14px;-webkit-line-clamp:3}
}