@charset "utf-8";
/* ==========================================================================
   商品価格比べページ（PC）
   ・寸法は XD／Figma のアートボード（コンテンツ幅 1200px）に準拠
   ・SP は別途対応予定。ここでは PC レイアウトのみ定義する
   ========================================================================== */

.cmp {
  --cmp-brown: #6C3E2A;
  --cmp-navy: #003665;
  --cmp-yellow: #F6DB3C;
  --cmp-gold: #D8AB70;
  --cmp-text: #333333;
  --cmp-bg: #FDFAEF;
  --cmp-bg-table: #FDF7E5;
  --cmp-line: #707070;
  --cmp-w: 1200px;

  width: var(--cmp-w);
  margin: 0 auto;
  color: var(--cmp-text);
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  line-height: 1.5;
}
.cmp *, .cmp *::before, .cmp *::after { box-sizing: border-box; }
.cmp img { max-width: 100%; height: auto; vertical-align: top; }

/* --------------------------------------------------------------------------
   メインビジュアル／リード文／バナー
   -------------------------------------------------------------------------- */
.cmp-mv { margin-bottom: 51px; }
.cmp-mv img { width: 100%; }

.cmp-lead { margin-bottom: 90px; }
.cmp-lead__ttl {
  margin: 0 0 30px;
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  color: var(--cmp-brown);
  text-align: center;
}
.cmp-lead__txt {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.cmp-bnr { margin-bottom: 30px; }
.cmp-bnr img { width: 100%; }

/* --------------------------------------------------------------------------
   豆 / 粉 切り替え
   -------------------------------------------------------------------------- */
.cmp-type {
  display: flex;
  justify-content: center;
  gap: 99px;              /* XD: 1230.5 → 1330 */
  margin: 0 0 79px;
  padding: 0;
  list-style: none;
}
.cmp-type__item { width: 338px; }
.cmp-type__item a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cmp-line);
  color: var(--cmp-brown);
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  text-decoration: none;
}
.cmp-type__item.is-active a { border-bottom-color: #6D3F2B; }
.cmp-type__ico { flex: none; display: flex; align-items: center; }
.cmp-type__txt { flex: 1 1 auto; white-space: nowrap; }
.cmp-type__arw { flex: none; }
.cmp-type__item a:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   かんたん3ステップ
   -------------------------------------------------------------------------- */
.cmp-guide { margin-bottom: 54px; }
.cmp-guide__ttl {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--cmp-line);
  color: var(--cmp-navy);
  font-weight: 700;
  line-height: 1;
}
.cmp-guide__ttl::before {          /* 黄色のマーカー（XD: 長方形40） */
  content: "";
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 264px;
  height: 10px;
  border-radius: 1px;
  background: var(--cmp-yellow);
  z-index: 0;
}
.cmp-guide__ttl span,
.cmp-guide__ttl em {
  position: relative;
  z-index: 1;
  font-style: normal;
  vertical-align: baseline;
}
.cmp-guide__ttl span { font-size: 28px; font-weight: bold; }
.cmp-guide__ttl em { font-size: 42px; padding: 0 2px; font-weight: bold; }

.cmp-guide__list {
  display: flex;
  gap: 75px;
  margin: 43px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.cmp-guide__item {
  position: relative;
  width: 350px;
  box-sizing: border-box;
  min-height: 150px;
  padding: 26px 20px 11px;
  border-radius: 8px;
  background: var(--cmp-navy);
  color: #fff;
  margin: 0;
}
.cmp-guide__item + .cmp-guide__item::before {   /* カード間の三角（XD: 多角形2） */
  content: "";
  position: absolute;
  top: 63px;
  left: -46px;
  width: 20px;
  height: 28px;
  background: url("/business-shop/img/event/compare/ico_step_arrow.png") no-repeat center / contain;
}
.cmp-guide__num {
  position: absolute;
  top: -17px;
  left: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 3px solid var(--cmp-navy);
  border-radius: 50%;
  background: #fff;
  color: var(--cmp-navy);
  font-weight: 700;
}
.cmp-guide__num small { font-size: 12px; line-height: 12px; }
.cmp-guide__num b { font-size: 25px; line-height: 25px; }
.cmp-guide__head {
  margin: 0 0 13px;
  text-align: center;
  white-space: nowrap;
  color: var(--cmp-yellow);
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
}
.cmp-guide__txt {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   STEP 共通（STEP1 から STEP3 を包む背景は JS で .cmp-body として挿入）
   -------------------------------------------------------------------------- */
.cmp-body {
  position: relative;
  padding: 40px 0 73px;
}
.cmp-body::before {          /* 画面幅いっぱいのベージュ背景（XD: 長方形44） */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  border-radius: 8px;
  background: var(--cmp-bg);
  z-index: 0;
}
.cmp-sec {
  position: relative;
  z-index: 1;
}
.cmp-sec + .cmp-sec { margin-top: 100px; }

.cmp-sec__head {
  position: relative;
  display: flex;
  align-items: baseline;
  min-height: 39px;
  padding-left: 102px;
  border-bottom: 1px solid var(--cmp-navy);
}
.cmp-sec__step {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 89px;
  height: 39px;
  border-radius: 2px 2px 0 0;
  background: var(--cmp-navy);
  color: #fff;
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.cmp-sec__ttl {
  margin: 0;
  color: var(--cmp-navy);
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
}
.cmp-sec__note {
  margin: 0 0 0 13px;
  color: var(--cmp-navy);
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   STEP1 ブランドタブ
   -------------------------------------------------------------------------- */
.cmp-brand {
  padding-top: 40px;
  background-color: #FFF;
}
.cmp-brand__lead {
  margin: 0 0 20px 31px;
  color: var(--cmp-brown);
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
}
.cmp-brand__lead::before { content: "\2460"; }   /* ① */
.cmp-brand__tab {
  max-width: 1138px;
  display: flex;
  gap: 16.3px;
  margin: 0 0 0 31px;
  padding: 0;
  list-style: none;
}
.cmp-brand__tab li {
  width: 176.33px;
  height: 45px;
}
.cmp-brand__tab button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--cmp-brown);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #fff;
  color: var(--cmp-brown);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.cmp-brand__tab button:hover { background: #F4EDE9; }
/* 名前が長いブランドは2行に落として収める（JSで is-long を付与） */
.cmp-brand__tab li.is-long button {
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;   /* 単語の途中で折らず、スペース位置で改行（業務用コーヒー／ナンバーブレンド） */
}
.cmp-brand__tab li.is-active button {
  border-color: var(--cmp-brown);
  background: var(--cmp-brown);
  color: #fff;
  font-weight: 700;
}

.cmp-brand__panel {
  position: relative;
  max-width: 1138px;
  min-height: 331px;
  margin: 0 31px;
  padding: 40px 30px 44.5px 465px;
  border: 1px solid var(--cmp-brown);
  background: #fff;
}
/* 子イベント（comp-b*）から移動してくる紹介欄 */
.cmp-src { display: none; }
.cmp-src.is-active {
  display: block;
  width: 600px;
}
.cmp-src__img {
  position: absolute;
  top: 43px;
  left: 10px;
  width: 380px;
  height: auto;
}
.cmp-src__img img { width: 100%; height: 100%; object-fit: contain; }
.cmp-src__name {
  position: relative;
  margin: 0 0 6px;
  padding-left: 31px;
  color: var(--cmp-brown);
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
}
.cmp-src__name::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 20px;
  height: 25px;
  background: url("/business-shop/img/event/compare/ico_bean.png") no-repeat center / contain;
}
.cmp-src__origin {
  position: relative;
  margin: 0 0 15px;
  padding-left: 57px;
  color: var(--cmp-gold);
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
}
.cmp-src__origin::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 33px;
  width: 17.5px;
  height: 2px;
  background: var(--cmp-gold);
}
.cmp-src__desc {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 27px;
}
/* ブランドの補足（原稿の備考欄） */
.cmp-src__note {
  margin: 0 0 14px;
  color: var(--cmp-brown);
  font-size: 15px;
  line-height: 24px;
}
.cmp-src__chart { margin: 0; }
.cmp-src__chart a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 284px;
  height: 51px;
  border: 1px solid var(--cmp-line);
  border-radius: 26px;
  background: var(--cmp-brown);
  color: #fff;
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
}
.cmp-src__chart a::before {
  content: "";
  width: 27px;
  height: 30px;
  background: url("/business-shop/img/event/compare/ico_cup_white.png") no-repeat center / contain;
}
.cmp-src__chart a:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   STEP1 商品スライダー
   -------------------------------------------------------------------------- */
.cmp-pick {
  padding-top: 59px;
  padding-bottom: 12px;
  background-color: #FFF;
}
.cmp-pick__lead {
  margin: 0 0 25px 28px;
  color: var(--cmp-brown);
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
}
.cmp-pick__lead::before { content: "\2461"; }    /* ② */
.cmp-pick__body,
.cmp-picked__body {
  position: relative;
  width: 1172px;
  margin: 0 auto;
}
.cmp-pick__body .g_price_ {
  display: none !important;
}
.cmp-pick__swiper,
.cmp-picked__swiper { overflow: hidden; }
.cmp-pick .goods_cart_ {
  display: none !important;
}
/* 「比較表に商品を追加する」では温度帯アイコンを出さない（PC: .icon_ / SP: .goods_detail_ 内の img.icon1_ 等） */
.cmp-pick .icon_,
.cmp-pick .goods_detail_ > img[class^="icon"] {
  display: none !important;
}
/* 左右ナビ */
.cmp-nav {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.cmp-nav::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-top: 2px solid var(--cmp-brown);
  border-right: 2px solid var(--cmp-brown);
}
.cmp-nav--prev { left: -46px; }
.cmp-nav--prev::before { transform: rotate(-135deg); }
.cmp-nav--next { right: -46px; }
.cmp-nav--next::before { transform: rotate(45deg); }
.cmp-nav.swiper-button-disabled { opacity: .25; cursor: default; }

.cmp-pick__empty,
.cmp-picked__empty {
  margin: 20px 0 0;
  padding: 40px 0;
  border: 1px dashed #CBBDB4;
  border-radius: 4px;
  color: #8a7a70;
  font-size: 16px;
  text-align: center;
}

/* 「比較する」チェック */
.cmp-check {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 23px;
  cursor: pointer;
  user-select: none;
}
.cmp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-check__box {
  flex: none;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid var(--cmp-brown);
  border-radius: 3px;
  background: #fff;
}
.cmp-check input:focus-visible + .cmp-check__box { outline: 2px solid var(--cmp-navy); outline-offset: 2px; }
.cmp-check input:checked + .cmp-check__box::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  width: 8px;
  height: 16px;
  border-right: 3px solid var(--cmp-brown);
  border-bottom: 3px solid var(--cmp-brown);
  transform: rotate(45deg);
}
.cmp-check__txt {
  color: var(--cmp-brown);
  font-size: 22px;
  line-height: 33px;
}

/* スライド内に入るサイト標準の商品ブロック */
.cmp .swiper-slide .StyleP_Item_ {
  width: 100%;
  margin: 0;
}
.cmp .swiper-slide { width: 207.2px; height: auto; }

/* --------------------------------------------------------------------------
   STEP2 比較表
   ・table をやめて div で組む（商品が1件でも崩れないように）
   ・行の高さは XD 実測値を左右の列で共通に使う
   ・見出し列は固定、商品列だけ横スクロールする
   -------------------------------------------------------------------------- */
.cmp-table {
  /* 行の高さ（XD 実測／合計 1288px） */
  --cmp-h-goods: 251px;
  --cmp-h-brand: 93px;
  --cmp-h-name: 93px;
  --cmp-h-origin: 93px;
  --cmp-h-chart: 285px;
  --cmp-h-brewing: 95px;
  --cmp-h-usage: 91px;
  /* 列幅 */
  --cmp-label-w: 266px;
  --cmp-col-w: 295px;

  background-color: #FFF;
  padding: 55.7px 0 63px 67px;
}

.cmp-table__body {
  display: flex;
  align-items: flex-start;
  border: 1px solid #E6E1DB;
  background: var(--cmp-bg-table);
}

/* ---- 見出し列（固定） ---- */
.cmp-table__labels {
  flex: 0 0 136.5px;
  width: 136.5px;
  background: #F4F0E8;
}
.cmp-table__label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #E5E1DB;
  color: #6C3E2A;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
}
.cmp-table__label:last-child { border-bottom: 0; }


/* ---- 商品列（横スクロール） ---- */
.cmp-table__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFCF4;
  scrollbar-width: none;
}
.cmp-table__scroll::-webkit-scrollbar { display: none; }
/* 掴んで左右に動かせることを示す */
.cmp-table__scroll.is-scrollable { cursor: grab; }
.cmp-table__scroll.is-grabbing {
  cursor: grabbing;
  user-select: none;
}
.cmp-table__scroll.is-grabbing img,
.cmp-table__scroll.is-grabbing a { pointer-events: none; }
/* 画像・リンクの標準ドラッグを無効にする（掴んでの移動を優先） */
.cmp-table__scroll img,
.cmp-table__scroll a {
  -webkit-user-drag: none;
  user-drag: none;
}

.cmp-table__cols { display: flex; align-items: flex-start; width: max-content; }
.cmp-table__col {
  flex: 0 0 var(--cmp-col-w);
  width: var(--cmp-col-w);
  border-right: 1px solid #E5E1DB;
}
.cmp-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 20px;
  border-bottom: 1px solid #E5E1DB;
  color: var(--cmp-brown);
  font-size: 20px;
  line-height: 30px;
  word-break: break-all;
}
.cmp-table__cell:last-child { border-bottom: 0; }

/* ---- 行の高さ（左右共通） ---- */
.cmp-table [data-cmp-row="goods"]   { height: var(--cmp-h-goods); }
.cmp-table [data-cmp-row="brand"]   { height: var(--cmp-h-brand); }
.cmp-table [data-cmp-row="name"]    { height: var(--cmp-h-name); }
.cmp-table [data-cmp-row="origin"]  { height: var(--cmp-h-origin); }
.cmp-table [data-cmp-row="chart"]   { height: var(--cmp-h-chart); }
.cmp-table [data-cmp-row="brewing"] { height: var(--cmp-h-brewing); }
.cmp-table [data-cmp-row="usage"]   { height: var(--cmp-h-usage); }

/* ---- 商品セル（画像＋削除ボタン） ---- */
.cmp-table__cell[data-cmp-row="goods"] {
  position: relative;
  align-items: flex-start;
  justify-content: center;
  padding: 21px 0 0;
  background: #fff;
}
/* .cmp img の height:auto に負けないよう詳細度を上げる */
.cmp .cmp-table__thumbimg {
  width: 204px;
  height: 204px;
  object-fit: contain;
}
.cmp-table__cell[data-cmp-row="chart"] { justify-content: center; padding: 10px; }
.cmp .cmp-table__cell[data-cmp-row="chart"] img {
  width: auto;
  max-width: 256px;
  max-height: 100%;
  object-fit: contain;
}

/* 列の削除ボタン（×） */
.cmp-table__del {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 1;
}
.cmp-table__del::before,
.cmp-table__del::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 19px;
  height: 3px;
  background: var(--cmp-line);
}
.cmp-table__del::before { transform: rotate(45deg); }
.cmp-table__del::after { transform: rotate(-45deg); }
.cmp-table__del:hover { opacity: .7; }

/* ---- 横スクロールバー（XD: 長方形39 / パス692436） ---- */
.cmp-table__bar {
  position: relative;
  width: 1073px;
  height: 10px;
  margin-top: 31px;
  background: #E2E8ED;
  cursor: pointer;
}
.cmp-table__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 384px;
  height: 10px;
  background: #858B90;
}
.cmp-table__empty {
  margin: 0;
  padding: 60px 0;
  color: #8a7a70;
  font-size: 18px;
  text-align: center;
}
.cmp-table.is-empty .cmp-table__body,
.cmp-table.is-empty .cmp-table__bar { display: none; }
.cmp-table:not(.is-empty) .cmp-table__empty { display: none; }

/* --------------------------------------------------------------------------
   STEP3 選択した商品一覧
   -------------------------------------------------------------------------- */
.cmp-picked {
  padding: 60px 0 58px;
  border-radius: 0 0 8px 8px;
  background: #fff;
}
.cmp-picked.is-empty .cmp-picked__body { display: none; }
.cmp-picked:not(.is-empty) .cmp-picked__empty { display: none; }
.cmp-picked__empty { border: 0; }

/* --------------------------------------------------------------------------
   コーヒーの選び方
   -------------------------------------------------------------------------- */
.cmp-choose { margin-top: 100px; text-align: center; }
.cmp-choose__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 0 21px;
  color: var(--cmp-brown);
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
}
.cmp-choose__bnr { display: block; }

/* --------------------------------------------------------------------------
   味わいチャート モーダル
   -------------------------------------------------------------------------- */
.cmp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-modal[hidden] { display: none; }
.cmp-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.cmp-modal__inner {
  position: relative;
  max-width: 900px;
  /* 閉じるボタンを枠の外（上）に出すので、ここでは切り取らない。
     スクロールが要るときは中身側（__body）で受ける */
  margin-top: 46px;             /* 閉じるボタンが画面外に出ないように */
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}
.cmp-modal__body {
  max-height: calc(90vh - 46px);
  overflow: auto;
}
.cmp-modal__body img { display: block; width: 100%; }
/* 閉じる（白い丸に茶色の×）／枠の右上・外側に置く */
.cmp-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.cmp-modal__close:hover { opacity: .8; }
.cmp-modal__close::before,
.cmp-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  /* モーダルは .cmp の外にあるのでカスタムプロパティが届かない。色は直接指定する */
  background: #6C3E2A;
}
.cmp-modal__close::before { transform: rotate(45deg); }
.cmp-modal__close::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   子イベントの素データ（画面には出さない）
   -------------------------------------------------------------------------- */
.cmp-data,
.cmp-src-end { display: none !important; }

/* ==========================================================================
   SP（〜768px）
   --------------------------------------------------------------------------
   ・寸法は XD「コーヒー比較ページ_sp」（アートボード幅 393px）に準拠
   ・PC 用の記述は一切変更せず、ここから下の上書きだけで対応する
   ・ブレークポイントはサイト共通（common.css の min-width:769px）に合わせる
   ・数値は px 固定ではなく --cmp-u（アートボードの 1px 相当）に掛けて可変にする。
     XD の実測値をそのまま係数として書けるので、デザインとの照合もしやすい。
     例）XD で 24px の文字 → font-size: calc(24 * var(--cmp-u))
   ========================================================================== */
@media screen and (max-width: 768px) {
  :root {
    /* 画面幅に比例。430px（大型スマホ）より広い端末では大きくなりすぎないよう頭打ち */
    --cmp-u: calc(min(100vw, 430px) / 393);
  }

  .pc_only {
    display: none !important;
  }
  .wrapper_ {
    padding: 0;
  }
  /* サイト共通の本文枠が 1200px 固定のため、このページだけ横幅を開放する
     （compare.css はこのイベントでしか読み込まれないので他ページに影響しない） */
  .mainframe_ {
    width: 100%;
    /* flex アイテムなので min-width:auto のままだと中身の実寸（1200px）まで広がる */
    min-width: 0;
    padding-top: calc(20 * var(--cmp-u));
  }
  .cmp img { max-width: 100%; }

  .cmp {
    --cmp-w: auto;
    width: auto;
    padding: 0 calc(12 * var(--cmp-u));
  }

  /* ---- メインビジュアル / リード文 / バナー ---- */
  .cmp-mv {
    margin: 0 calc(-12 * var(--cmp-u)) calc(22 * var(--cmp-u));   /* 画面幅いっぱい */
  }
  .cmp-lead { margin-bottom: calc(34 * var(--cmp-u)); }
  .cmp-lead__ttl {
    margin-bottom: calc(18 * var(--cmp-u));
    font-size: calc(24 * var(--cmp-u));
    line-height: calc(36 * var(--cmp-u));
  }
  .cmp-lead__txt {
    color: #707070;
    font-size: calc(16 * var(--cmp-u));
    line-height: calc(24 * var(--cmp-u));
  }
  .cmp-bnr { margin-bottom: calc(26 * var(--cmp-u)); }

  /* ---- 豆 / 粉 切り替え ---- */
  .cmp-type {
    gap: calc(16 * var(--cmp-u));
    margin: 0 calc(11 * var(--cmp-u))  calc(49 * var(--cmp-u));
  }
  .cmp-type__item {
    flex: 1 1 0;
    width: calc(165.5 * var(--cmp-u));
  }
  .cmp-type__item a {
    gap: calc(4 * var(--cmp-u));
    padding-bottom: calc(6 * var(--cmp-u));
    font-size: calc(14 * var(--cmp-u));
    line-height: calc(21 * var(--cmp-u));
    display: flex;
    align-items: center;
  }
  .cmp-type__ico img {
    width: calc(15 * var(--cmp-u));
    height: auto;
  }
  .cmp-type__item .cmp-type__txt {
    flex: unset;
    font-size: calc(20 * var(--cmp-u));
    margin-right: calc(9.8 * var(--cmp-u));
  }
  .cmp-type__arw {
     width: calc(35 * var(--cmp-u));
     height: calc(13.28 * var(--cmp-u));
  }
  .cmp-type__arw img { width: 100%; }

  /* ---- かんたん3ステップ ---- */
  .cmp-guide { margin-bottom: calc(36 * var(--cmp-u)); }
  .cmp-guide__ttl {
    margin-bottom: 0;
    padding-bottom: calc(6 * var(--cmp-u));
  }
  .cmp-guide__ttl::before {
    left: 0;
    bottom: calc(3 * var(--cmp-u));
    width: calc(220 * var(--cmp-u));
    height: calc(10 * var(--cmp-u));
  }
  .cmp-guide__ttl span { font-size: calc(24 * var(--cmp-u)); }
  .cmp-guide__ttl em { font-size: calc(32 * var(--cmp-u)); }

  .cmp-guide__list {
    display: block;            /* 縦積み */
    margin-top: calc(32 * var(--cmp-u));
  }
  .cmp-guide__item {
    width: auto;
    min-height: calc(131 * var(--cmp-u));
    margin-left: 0;
    padding: calc(20 * var(--cmp-u)) calc(28 * var(--cmp-u));
    border-radius: calc(5 * var(--cmp-u));
  }
  .cmp-guide__item + .cmp-guide__item { margin-top: calc(21 * var(--cmp-u)); }
  .cmp-guide__item + .cmp-guide__item::before { content: none; }  /* 矢印は出さない */
  .cmp-guide__num {
    top: calc(-11 * var(--cmp-u));
    left: calc(-9 * var(--cmp-u));
    width: calc(60 * var(--cmp-u));
    height: calc(60 * var(--cmp-u));
  }
  .cmp-guide__head {
    margin-bottom: calc(7.5 * var(--cmp-u));
    padding: 0;
    font-size: calc(20 * var(--cmp-u));
    line-height: calc(30 * var(--cmp-u));
    text-align: center;
    white-space: normal;
  }
  .cmp-guide__txt {
    font-size: calc(16 * var(--cmp-u));
    line-height: calc(24 * var(--cmp-u));
  }

  /* ---- STEP 見出し ---- */
  .cmp-body { padding: calc(26 * var(--cmp-u)) 0 calc(40 * var(--cmp-u)); }
  .cmp-sec + .cmp-sec { margin-top: calc(56 * var(--cmp-u)); }

  .cmp-sec__head {
    display: block;
    min-height: calc(55 * var(--cmp-u));
    padding-left: calc(87 * var(--cmp-u));
  }
  .cmp-sec__step {
    top: 0;
    bottom: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--cmp-u));
    width: calc(77 * var(--cmp-u));
    height: calc(55 * var(--cmp-u));
    font-size: calc(16 * var(--cmp-u));
    line-height: 1;
  }
  .cmp-sec__step span {
    font-size: calc(24 * var(--cmp-u));
    margin-top: calc(-5 * var(--cmp-u));
    margin-left: calc(-5 * var(--cmp-u));
  }
  .cmp-sec__ttl {
    font-size: calc(22 * var(--cmp-u));
    line-height: calc(33 * var(--cmp-u));
  }
  .cmp-sec__note {
    display: block;
    margin: 0;
    /* XD の実測幅 281.1px に対して枠が 282px しかなく、
       そのままだと末尾の「ー」だけ折り返すので詰める */
    letter-spacing: -0.02em;
    font-size: calc(12 * var(--cmp-u));
    line-height: calc(18 * var(--cmp-u));
  }

  /* ---- STEP1 ブランド ---- */
  .cmp-brand {
    margin-top: calc(10 * var(--cmp-u));
    padding-top: 0;
    background: unset;
  }
  .cmp-brand__lead {
    margin: 0 0 calc(5 * var(--cmp-u));
    font-size: calc(20 * var(--cmp-u));
    line-height: calc(30 * var(--cmp-u));
  }

  .cmp-brand__tab {
    flex-wrap: wrap;
    gap: calc(10 * var(--cmp-u));
    margin: 0;
  }
  .cmp-brand__tab li {
    width: calc((100% - 20 * var(--cmp-u)) / 3);
    height: calc(38 * var(--cmp-u));
    font-size: calc(12 * var(--cmp-u));
  }
  .cmp-brand__tab button {
    border-radius: calc(5 * var(--cmp-u));
    font-size: calc(12 * var(--cmp-u));
    line-height: 1.2;
    white-space: normal;
    border: 1px solid var(--cmp-brown);
  }
  .cmp-brand__tab li.is-long button { font-size: calc(11 * var(--cmp-u)); }

  .cmp-src.is-active { width: auto; }
  .cmp-brand__panel {
    min-height: 0;
    margin: calc(15.7 * var(--cmp-u)) 0 0;
    padding: calc(30 * var(--cmp-u)) calc(22 * var(--cmp-u)) calc(26 * var(--cmp-u));
    border-radius: calc(5 * var(--cmp-u));
  }
  .cmp-src__img {
    position: static;
    width: auto;
    height: auto;
    margin: 0 calc(-12 * var(--cmp-u)) calc(22 * var(--cmp-u));   /* パネル内で少し広く */
  }
  .cmp-src__img img { width: 100%; height: auto; object-fit: contain; }
  .cmp-src__name {
    padding-left: calc(30 * var(--cmp-u));
    font-size: calc(24 * var(--cmp-u));
    line-height: calc(36 * var(--cmp-u));
  }
  .cmp-src__name::before { top: calc(6 * var(--cmp-u)); }
  .cmp-src__origin { padding-left: calc(30 * var(--cmp-u)); }
  .cmp-src__origin::before { left: calc(6 * var(--cmp-u)); }
  .cmp-src__desc {
    font-size: calc(18 * var(--cmp-u));
    line-height: calc(27 * var(--cmp-u));
  }
  .cmp-src__chart { text-align: center; }
  .cmp-src__chart a {
    width: 100%;
    max-width: calc(325 * var(--cmp-u));
    height: calc(51 * var(--cmp-u));
  }

  /* ---- STEP1 商品スライダー ---- */
  .cmp-pick {
    margin-top: calc(30 * var(--cmp-u));
    background: unset;
  }
  .cmp-pick__lead {
    margin: 0 0 calc(14 * var(--cmp-u));
    font-size: calc(22 * var(--cmp-u));
    line-height: calc(33 * var(--cmp-u));
  }

  .cmp-pick__body,
  .cmp-picked__body {
    width: auto;
  }
  .cmp-pick__body .comment_,
  .cmp-picked__body .comment_,
  .cmp-pick__body .g_price_,
  .cmp-picked__body .g_price_,
  .cmp-pick__body .microcopy_,
  .cmp-picked__body .microcopy_ {
    display: none !important;
  }
  /* 左右の矢印は画面内に収める */
  .cmp-nav--prev { left: calc(-4 * var(--cmp-u)); }
  .cmp-nav--next { right: calc(-4 * var(--cmp-u)); }
  .cmp-nav {
    width: calc(28 * var(--cmp-u));
    height: calc(28 * var(--cmp-u));
    margin-top: calc(-14 * var(--cmp-u));
    background: rgba(255, 255, 255, .75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cmp-nav::before {
    width: calc(11 * var(--cmp-u));
    height: calc(11 * var(--cmp-u));
  }
  .cmp-nav.cmp-nav--prev::before {
    margin-left: calc(13 * var(--cmp-u));
  }
  .cmp-nav.cmp-nav--next::before {
    margin-right: calc(13 * var(--cmp-u));
  }

  /* チェックボックス（30px角・14pxアキ・22px）は XD の PC/SP で共通なので、
     アートボード基準に置き換えるだけ */
  .cmp-check {
    gap: calc(14 * var(--cmp-u));
    margin-bottom: calc(17 * var(--cmp-u));
  }
  .cmp-check__box {
    width: calc(30 * var(--cmp-u));
    height: calc(30 * var(--cmp-u));
  }
  .cmp-check__txt {
    font-size: calc(22 * var(--cmp-u));
    line-height: calc(33 * var(--cmp-u));
  }
  .cmp .swiper-slide { width: auto; }
  /* SPテンプレートの商品ブロック */
  .cmp .swiper-slide .goods_p_item_ { width: 100%; margin: 0; }

  /* ---- STEP2 比較表（SPは見出し列が淡色・文字が茶色） ---- */
  .cmp-table {
    --cmp-h-goods:   calc(179 * var(--cmp-u));
    --cmp-h-brand:   calc(93 * var(--cmp-u));
    --cmp-h-name:    calc(93 * var(--cmp-u));
    --cmp-h-origin:  calc(93 * var(--cmp-u));
    --cmp-h-chart:   calc(189 * var(--cmp-u));
    --cmp-h-brewing: calc(114 * var(--cmp-u));
    --cmp-h-usage:   calc(114 * var(--cmp-u));
    --cmp-label-w:   calc(101 * var(--cmp-u));
    --cmp-col-w:     calc(202 * var(--cmp-u));

    /* XD: 白パネルは左 12.5px から画面右端へ抜ける（右の余白を食い切る） */
    margin: 0 calc(-12 * var(--cmp-u)) 0 0;
    padding: calc(12 * var(--cmp-u)) 0 0 calc(9 * var(--cmp-u));
  }
  .cmp-table__body {
    border: 0;
    background: #FFFCF4;
    border: 1px solid #E6E1DB;
  }
  .cmp-table__labels {
    flex-basis: var(--cmp-label-w);
    background: #F4EFE9;
  }
  .cmp-table__label {
    padding: 0 calc(6 * var(--cmp-u));
    border-bottom-color: #E5E1DB;   /* 罫線の色は PC と共通 */
    color: var(--cmp-brown);
    font-size: calc(16 * var(--cmp-u));
    line-height: calc(24 * var(--cmp-u));
  }
  .cmp-table__label[data-cmp-row="goods"] {
    justify-content: center;
    padding-left: calc(6 * var(--cmp-u));
  }
  .cmp-table__scroll { background: #FFFCF4; }
  .cmp-table__cell {
    padding: calc(8 * var(--cmp-u)) calc(10 * var(--cmp-u));
    font-size: calc(16 * var(--cmp-u));
    line-height: calc(24 * var(--cmp-u));
  }
  .cmp-table__cell[data-cmp-row="goods"] { padding: calc(12 * var(--cmp-u)) 0 0; }
  .cmp .cmp-table__thumbimg {
    width: calc(140 * var(--cmp-u));
    height: calc(140 * var(--cmp-u));
  }
  .cmp .cmp-table__cell[data-cmp-row="chart"] img { max-width: calc(152 * var(--cmp-u)); }
  .cmp-table__del {
    top: calc(6 * var(--cmp-u));
    right: calc(6 * var(--cmp-u));
    width: calc(18 * var(--cmp-u));
    height: calc(18 * var(--cmp-u));
  }
  .cmp-table__del::before,
  .cmp-table__del::after {
    left: calc(2 * var(--cmp-u));
    width: calc(14 * var(--cmp-u));
    height: calc(2 * var(--cmp-u));
  }
  .cmp-table__bar {
    width: calc(100% - 4 * var(--cmp-u));   /* XD: 368px */
    margin: calc(19 * var(--cmp-u)) 0 0 calc(-8 * var(--cmp-u));
  }
  .cmp-table__empty {
    padding: calc(36 * var(--cmp-u)) 0;
    font-size: calc(15 * var(--cmp-u));
  }

  /* ---- STEP3 ---- */
  .cmp-picked {
    padding: calc(18 * var(--cmp-u)) calc(12 * var(--cmp-u)) calc(20 * var(--cmp-u));
    border-radius: 0 0 calc(8 * var(--cmp-u)) calc(8 * var(--cmp-u));
  }
  .cmp-picked__empty {
    padding: calc(30 * var(--cmp-u)) 0;
    font-size: calc(15 * var(--cmp-u));
  }
  .cmp-picked__body .goods_cart_ {
    width: 100%;
    margin: 30px 0 0;
  }
  .cmp-picked__body .goods_qty_ {
    display: flex;
    align-items: center;
    margin: 0 0 15px;
  }
  .cmp-picked__body .goods_qty_ dt {
    font-size: 13px;
    margin: 0 10px 0 0;
  }
  .cmp-picked__body .goods_qty_ dd {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .cmp-picked__body .goods_qty_ .btn_qty_ {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #736D6D;
    border: 0;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
  }
  .cmp-picked__body .goods_qty_ .btn_qty_.plus_:before,
  .cmp-picked__body .goods_qty_ .btn_qty_.plus_:after,
  .cmp-picked__body .goods_qty_ .btn_qty_.minus_:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #FFF;
    transform: translate(-50%, -50%);
  }
  .cmp-picked__body .goods_qty_ .btn_qty_.plus_:after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .cmp-picked__body .qty_input_ {
    width: 50px;
    font-size: 13px;
    text-align: center;
  }

  /* ---- コーヒーの選び方 ---- */
  .cmp-choose { margin-top: calc(60 * var(--cmp-u)); }
  .cmp-choose__lead {
    display: block;
    margin-bottom: calc(14 * var(--cmp-u));
    font-size: calc(20 * var(--cmp-u));
    line-height: calc(30 * var(--cmp-u));
  }
  .cmp-choose__lead img {
    display: block;
    width: calc(34 * var(--cmp-u));
    height: auto;
    margin: 0 auto calc(6 * var(--cmp-u));
  }

  /* ---- モーダル ---- */
  .cmp-modal__inner {
    width: calc(100% - 24 * var(--cmp-u));
    /* 閉じるボタンの分だけ上に余白を空ける */
    margin-top: 46px;
  }
  .cmp-modal__body { max-height: calc(80vh - 46px); }
}