/* 前半 */
/* ==================================================
 * customize.css（B2B / SAIKAI風）
 * 目的：章立て整理・重複統合（見た目は変えない）
 * ================================================== */


/**************************************************
 * 0. ベース / 全体
 **************************************************/
body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  color: #333;
}


dd, dt, h1, h2, h3, h4, h5, h6, li, p, td, th {
  letter-spacing: 0.5px;
}

/**************************************************
 * 1. コンテンツ全体の横幅・余白
 **************************************************/

/* 左カラム・メイン・右カラムのベース */
.ec-layoutRole__left,
.ec-layoutRole__main,
.ec-layoutRole__right {
  min-height: 1px;
}


/**************************************************
 * 2. PC時の2カラムレイアウト（右サイドバー）
 **************************************************/
@media (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__contents {
    /* display: grid; */
    grid-template-columns: 1fr 320px;
    gap: 24px;
    /* align-items: start; */
    max-width: 1006px;
    padding: 0;
    margin-bottom: 8px;
  }

  /* 左カラムは使わない想定 */
  .ec-layoutRole__left {
    display: none;
  }

  .ec-layoutRole__main,
  .ec-layoutRole__right {
    width: auto;
  }
}


/**************************************************
 * 3. 右サイドバー（Bカート風）
 **************************************************/
.b2b-sidebar-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 16px;
}

.b2b-sidebar-section__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 4px solid #0b4aa2;
}

/* ← ここが落ちると「・」が復活する */
.b2b-sidebar-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.b2b-sidebar-section__item a {
  display: block;
  padding: 6px 0;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.b2b-sidebar-section__item a:hover {
  opacity: .7;
}


/**************************************************
 * 4. フッター（共通）
 **************************************************/
.ec-footerRole {
  margin-top: 40px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
}


/* ==================================================
 * B2B Design Tokens（ここだけ触れば全体が変わる）
 * ================================================== */
:root{
  /* Layout */
  --b2b-container: 1006px;
  --b2b-logo-col: 320px;

  /* Borders / lines */
  --b2b-line: #e5e5e5;
  --b2b-line-soft: #eee;
  --b2b-border-strong: #222;

  /* Text */
  --b2b-text: #222;
  --b2b-text-sub: #222;

  /* Surfaces */
  --b2b-bg: #fff;
  --b2b-overlay: rgba(0,0,0,.35);

  /* Spacing */
  --b2b-pad-logo-y: 18px;
  --b2b-pad-logo-x: 16px;
  --b2b-pad-box-x: 16px;
  --b2b-pad-search-y: 6px;
  --b2b-pad-search-x: 16px;

  --b2b-drawer-head-pad-y: 14px;
  --b2b-drawer-head-pad-x: 14px;
  --b2b-drawer-body-pad-y: 12px;
  --b2b-drawer-body-pad-x: 14px;

  /* Sizes */
  --b2b-logo-img: 220px;
  --b2b-logo-img-sp: 140px;
  --b2b-box-minh: 78px;

  --b2b-iconbtn: 40px;
  --b2b-badge-minw: 18px;
  --b2b-badge-h: 18px;
  --b2b-badge-r: 9px;

  /* Typography */
  --b2b-font-sm: 12px;
  --b2b-font-xs: 13px;
  --b2b-cart-icon: 16px;

  /* Effects */
  --b2b-hover-opacity: .75;

  /* Drawer */
  --b2b-drawer-z: 9999;
  --b2b-drawer-trans: .2s;
  --b2b-drawer-w-vw: 86vw;
  --b2b-drawer-w-max: 360px;
  --b2b-drawer-shift: 12px;

  /* Gaps */
  --b2b-gap-8: 8px;
  --b2b-gap-10: 10px;
}

/**************************************************
 * 5. B2Bヘッダー（SAIKAI風）: header_b2b.twig 用
 **************************************************/
.b2b-header2 { background: var(--b2b-bg); }

/* 共通：幅 */
.b2b-header2__inner{
  max-width: var(--b2b-container);
  margin: 0 auto;
}

.b2b-header2__top{
  border-bottom: 1px solid var(--b2b-line);
}

/* 左ロゴ列 + 右2段 */
.b2b-header2__top .b2b-header2__inner{
  display: grid;
  grid-template-columns: var(--b2b-logo-col) 1fr;
  align-items: stretch;
}

/* ロゴ列 */
.b2b-header2__logo{
  border-right: 1px solid var(--b2b-line);
  padding: var(--b2b-pad-logo-y) var(--b2b-pad-logo-x);
}

.b2b-header2__logoLink{
  display: block;
  text-decoration: none;   /* ← これが無いと青リンクっぽくなる */
  color: inherit;
}

.b2b-header2__logoImg{
  display: block;
  width: var(--b2b-logo-img);
  height: auto;
}

.b2b-header2__logoSub{
  display: block;
  margin-top: 8px;
  color: var(--b2b-text-sub);
  font-size: var(--b2b-font-sm);
  letter-spacing: .02em;
}

/* 右側：2段 */
.b2b-header2__right{
  display: grid;
  grid-template-rows: auto auto; /* 上：3枠 / 下：検索 */
}

/* 上：3枠 */
.b2b-header2__pcBoxes{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.b2b-header2__box{
  border-right: 1px solid var(--b2b-line);
  border-bottom: 1px solid var(--b2b-line);
  display: flex;
  align-items: center;
  /* padding: 0 var(--b2b-pad-box-x); */
  padding: 0;
  min-height: var(--b2b-box-minh);
}

.b2b-header2__box:last-child{ border-right: none; }

.b2b-header2__boxLink{
  display: flex;
  align-items: center;
  gap: var(--b2b-gap-10);
  color: var(--b2b-text);
  text-decoration: none;
  font-size: var(--b2b-font-sm);
}
.b2b-header2__boxLink:hover{ opacity: var(--b2b-hover-opacity); }

.b2b-header2__boxLink i {
  font-size: 21px;
}

/* カート：ログイン前（リンクだけ） */
.b2b-header2__cartLinkLike{
  width: 100%;
  justify-content: flex-start;
}

/* ログイン前のリンク版カートは padding:0 事故が起きるので明示 */
@media (min-width: 768px){
  .b2b-header2__box--cartNative > a.b2b-header2__boxLink{
    padding: 0 var(--b2b-pad-box-x);
    width: 100%;
  }
}

/* カート：ログイン後（ec-cartNavi版） */
.b2b-header2__box--cartNative{
  padding: 0;
}
.b2b-header2__box--cartNative .ec-headerRole__cart{ width: 100%; }
.b2b-header2__box--cartNative .ec-cartNaviWrap{ width: 100%; }
.b2b-header2__box--cartNative .ec-cartNavi{
  padding: 0 var(--b2b-pad-box-x);
  min-height: var(--b2b-box-minh);
  display: flex;
  align-items: center;
}

/* PCカート：丸み・グレー背景・枠を消す（ヘッダー内だけ） */
.b2b-header2__box--cartNative .ec-cartNavi{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.b2b-header2__box--cartNative .ec-cartNavi__label,
.b2b-header2__box--cartNative .ec-cartNavi__price{
  background: transparent;
}
.b2b-header2__box--cartNative .ec-cartNavi__icon{
  font-size: var(--b2b-cart-icon);
  line-height: 1;
}

/* 下：検索 */
.b2b-header2__pcSearch{
  /* padding: var(--b2b-pad-search-y) var(--b2b-pad-search-x); */
  padding: 0;
}
.b2b-header2__pcSearch .ec-headerSearch{
  margin: 0;
  padding: 0;
}

/* 検索を右カラムいっぱいに */
.b2b-header2__pcSearch .ec-headerSearch,
.b2b-header2__pcSearch .ec-headerSearch__keyword{
  width: 100%;
}
.b2b-header2__pcSearch .ec-headerSearch__keyword,
.b2b-header2__pcSearch form{
  width: 100%;
  max-width: none;
}
.b2b-header2__pcSearch .ec-headerSearch input[type="search"],
.b2b-header2__pcSearch .ec-headerSearch input[type="text"]{
  width: 100%;
}

/* ==========================================
 * 検索アイコンを Font Awesome に差し替え
 * （PCヘッダー / SPドロワー 共通）
 * ========================================== */

.b2b-header2__pcSearch .ec-headerSearch__keywordBtn .ec-icon img,
.b2b-drawer .ec-headerSearch__keywordBtn .ec-icon img{
  display: none;
}

/* Font Awesome アイコンを表示 */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn::before,
.b2b-drawer .ec-headerSearch__keywordBtn::before{
  content: "\f002";                 /* fa-magnifying-glass */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 21px;
  color: #222;
  display: inline-block;
  line-height: 1;
}

/* ==========================================
 * 検索アイコン（FA）を縦中央に固定
 * 画像を消しても残る .ec-icon の箱を潰す
 * ========================================== */

/* button自体を中央寄せ（縦ズレ防止の本体） */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn,
.b2b-drawer .ec-headerSearch__keywordBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;          /* 余計な行高で上に寄るのを防ぐ */
}

/* 画像の“箱”を無効化（これが残ってるとズレる） */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn .ec-icon,
.b2b-drawer .ec-headerSearch__keywordBtn .ec-icon{
  display: contents;       /* 箱を消して中身だけにする（対応OK） */
}

/* 画像は完全に無効化 */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn .ec-icon img,
.b2b-drawer .ec-headerSearch__keywordBtn .ec-icon img{
  display: none !important;
}

/* FAアイコン（疑似要素） */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn::before,
.b2b-drawer .ec-headerSearch__keywordBtn::before{
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  display: inline-block;
}

/* ==================================================
 * 8. SAIKAI TTP 全体トークン（確定版）
 * - 既存ルールは削除しない（上書きで寄せる）
 * - 紫：#323185（インディゴ）
 * - 欄外背景：#F3F3F3
 * ================================================== */
:root{
  /* SAIKAI Base */
  --saikai-accent: #323185;
  --saikai-accent-hover: #2A296F;

  --saikai-text: #323232;

  --saikai-bg-main: #ffffff;
  --saikai-bg-outer: #f3f3f3;

  --saikai-line: rgb(230,230,230); /* #E6E6E6 */
  --saikai-line-w: 2px;

  /* Typography (remはEC-CUBE側のhtml基準に依存) */
  --saikai-body-pc: 14px;
  --saikai-body-sp: 12px;
  --saikai-lh: 1.7;

  --saikai-h-block: 1.4rem;
  --saikai-h-block-fw: 600;

  --saikai-h-page-pc: 20px;
  --saikai-h-page-sp: 18px;
  --saikai-h-page-fw: 700;
}

/* 欄外背景（body） */
body{
  background-color: var(--saikai-bg-outer);
  color: var(--saikai-text);
}

/* 本文（メイン面） */
.ec-layoutRole__main{
  background: var(--saikai-bg-main);
  color: var(--saikai-text);
  font-size: var(--saikai-body-pc);
  line-height: var(--saikai-lh);
}
@media (max-width: 767.98px){
  .ec-layoutRole__main{
    font-size: var(--saikai-body-sp);
  }
}

/* ページ見出し（代表） */
.ec-pageHeader h1{
  font-size: var(--saikai-h-page-pc);
  font-weight: var(--saikai-h-page-fw);
  color: var(--saikai-text);
  padding-top: 30px;
  padding-bottom: 30px;
}
.ec-reportHeading h2{
  font-size: var(--saikai-h-page-pc);
}
@media (max-width: 767.98px){
  .ec-pageHeader h1{
    font-size: var(--saikai-h-page-sp);
  }

  .ec-reportHeading h2{
    font-size: var(--saikai-h-page-sp);
  }
}

/* ブロック見出し（汎用：必要なら個別で上書き） */
.ec-role h2,
.ec-role h3{
  font-size: var(--saikai-h-block);
  font-weight: var(--saikai-h-block-fw);
  color: var(--saikai-text);
}

/* ----------------------------------------------
 * リンク運用（確定）
 * - 本文：常時インディゴ
 * - 例外：ヘッダー / フッター / サイドバーは通常色、hoverで紫＋下線
 * ---------------------------------------------- */
.ec-layoutRole__main a{
  color: var(--saikai-accent);
  text-decoration: none;
}
/* .ec-layoutRole__main a:hover{
  color: var(--saikai-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
} */

/* 例外：通常は本文色 */
.b2b-header2 a,
.b2b-footer a,
.b2b-sidebar-section a{
  color: var(--saikai-text);
  text-decoration: none;
}
.b2b-header2 a:hover,
.b2b-footer a:hover,
.b2b-sidebar-section a:hover{
  color: var(--saikai-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----------------------------------------------
 * 罫線（2px / #E6E6E6）…必要箇所だけ
 * ---------------------------------------------- */

/* ヘッダーの主要線を2pxに寄せる */
.b2b-header2__top{
  border-bottom: var(--saikai-line-w) solid var(--saikai-line);
}
@media (min-width: 768px){
  .b2b-header2__logo{
    border-right: var(--saikai-line-w) solid var(--saikai-line);
  }
  .b2b-header2__box{
    border-right: var(--saikai-line-w) solid var(--saikai-line);
    border-bottom: var(--saikai-line-w) solid var(--saikai-line);
  }
}

/* 右サイドバー：箱の線は2px（中は余白で区切る） */
.b2b-sidebar-section{
  padding: var(--s-16, 16px);
  background: #fff;
}
.b2b-sidebar-section__title{
  font-size: var(--saikai-h-block);
  font-weight: var(--saikai-h-block-fw);
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--saikai-accent); /* 西海の見出しラインTTP */
}
.b2b-sidebar-section__item a{
  font-size: var(--saikai-body-pc);
  padding: 10px 0; /* 西海っぽい行高 */
}
@media (max-width: 767.98px){
  .b2b-sidebar-section__item a{
    font-size: var(--saikai-body-sp);
  }
}

/* ----------------------------------------------
 * CTA（EC-CUBE標準ボタンを紫へ）
 * - 対象をメイン領域に限定
 * ---------------------------------------------- */
.ec-layoutRole__main .ec-blockBtn--action,
.ec-layoutRole__main .ec-inlineBtn--action{
  background: var(--saikai-accent);
  border-color: var(--saikai-accent);
  color: #fff;
  border-radius: 0;
}
.ec-layoutRole__main .ec-blockBtn--action:hover,
.ec-layoutRole__main .ec-inlineBtn--action:hover{
  background: var(--saikai-accent-hover);
  border-color: var(--saikai-accent-hover);
  color: #fff;
}
.ec-layoutRole__main .ec-blockBtn--action:disabled,
.ec-layoutRole__main .ec-inlineBtn--action:disabled,
.ec-layoutRole__main .ec-blockBtn--action.is-disabled,
.ec-layoutRole__main .ec-inlineBtn--action.is-disabled{
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #8a8a8a;
  cursor: not-allowed;
}


.ec-productRole__btn .ec-blockBtn--action,
.ec-role .ec-inlineBtn--action,
.ec-cartNaviIsset__action .ec-blockBtn--action{
  background: var(--saikai-accent);
  border-color: var(--saikai-accent);
  color: #fff;
}

.ec-productRole__btn .ec-blockBtn--action:hover,
.ec-role .ec-inlineBtn--action:hover,
.ec-cartNaviIsset__action .ec-blockBtn--action:hover{
  background: var(--saikai-accent-hover);
  border-color: var(--saikai-accent-hover);
  color: #fff;
}


/* 後半 */

/* PC検索：枠・グレー背景を消す */
.b2b-header2__pcSearch .ec-headerSearch,
.b2b-header2__pcSearch .ec-headerSearch__keyword,
.b2b-header2__pcSearch .ec-headerSearch__keyword input[type="search"],
.b2b-header2__pcSearch .ec-headerSearch__keyword input[type="text"]{
  border: none;
  background: transparent;
  box-shadow: none;
}
.b2b-header2__pcSearch .ec-headerSearch__keyword input[type="search"],
.b2b-header2__pcSearch .ec-headerSearch__keyword input[type="text"]{
  background: var(--b2b-bg);
  outline: none;
}

/* SP用アイコン列（PCでは必ず非表示） */
.b2b-header2__spIcons{ display: none; }


/**************************************************
 * B2Bヘッダー：PCの高さを西海同等（98px）に合わせる
 * - PCのみ適用（SPは既存のまま）
 * - 既存ルールは削除しない（上書きで調整）
 **************************************************/

:root{
  /* Header height (PC) */
  --b2b-header-h-pc: 98px;
  --b2b-header-row-h-pc: calc(var(--b2b-header-h-pc) / 2);

  /* Header paddings (PC) */
  --b2b-header-logo-pad-y-pc: 8px;
  --b2b-header-logo-pad-x-pc: 16px;
  --b2b-header-search-pad-y-pc: 6px;
  --b2b-header-search-pad-x-pc: 16px;

  /* Logo image (PC) */
  --b2b-header-logo-img-h-pc: 40px;

  /* Box padding (PC) */
  --b2b-header-box-pad-x-pc: 16px;
}

@media (min-width: 768px){

  /* ヘッダー全体の基準高さ */
  .b2b-header2__top{
    height: var(--b2b-header-h-pc);
  }

  /* 右側（上：3枠 / 下：検索）を98px内で2分割 */
  .b2b-header2__right{
    grid-template-rows: var(--b2b-header-row-h-pc) var(--b2b-header-row-h-pc);
  }

  /* 上段：3枠を 49px に収める（min-heightの影響を消す） */
  .b2b-header2__box{
    min-height: auto;
    height: var(--b2b-header-row-h-pc);
    padding: 0 var(--b2b-header-box-pad-x-pc);
  }

  /* 下段：検索の縦paddingを詰めて 49px内に */
  .b2b-header2__pcSearch{
    /* padding: var(--b2b-header-search-pad-y-pc) var(--b2b-header-search-pad-x-pc); */
    padding: 0;
  }

  /* ロゴ画像は高さ基準で制御（元画像114px対策） */
  .b2b-header2__logoImg{
    height: var(--b2b-header-logo-img-h-pc);
    width: auto;
    max-width: 100%;
  }

  /* ロゴ列：上下paddingを詰めて 98px内に収める */
  .b2b-header2__logo{
    padding: var(--b2b-header-logo-pad-y-pc) var(--b2b-header-logo-pad-x-pc);
  }
}

/**************************************************
 * 6. ドロワー（SP）
 **************************************************/
.b2b-drawer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--b2b-drawer-trans) ease;
  z-index: var(--b2b-drawer-z);
}
.b2b-drawer.is-open{
  opacity: 1;
  pointer-events: auto;
}
.b2b-drawer__overlay{
  position: absolute;
  inset: 0;
  background: var(--b2b-overlay);
}
.b2b-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(var(--b2b-drawer-w-vw), var(--b2b-drawer-w-max));
  height: 100%;
  background: var(--b2b-bg);
  transform: translateX(var(--b2b-drawer-shift));
  transition: transform var(--b2b-drawer-trans) ease;
  display: flex;
  flex-direction: column;
}
.b2b-drawer.is-open .b2b-drawer__panel{
  transform: translateX(0);
}

.b2b-drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--b2b-drawer-head-pad-y) var(--b2b-drawer-head-pad-x);
  border-bottom: 1px solid var(--b2b-line);
}
.b2b-drawer__title{ font-size: var(--b2b-font-sm); font-weight: 700; }
.b2b-drawer__close{
  width: var(--b2b-iconbtn);
  height: var(--b2b-iconbtn);
  border: 1px solid var(--b2b-border-strong);
  background: transparent;
  cursor: pointer;
}
.b2b-drawer__body{
  padding: var(--b2b-drawer-body-pad-y) var(--b2b-drawer-body-pad-x);
  overflow: auto;
}

.b2b-drawer__section{ padding: 10px 0; border-bottom: 1px solid var(--b2b-line-soft); }
.b2b-drawer__sectionTitle{ font-size: var(--b2b-font-xs); font-weight: 700; margin-bottom: 8px; }

.b2b-drawer__link{
  display: block;
  padding: 10px 0;
  color: var(--b2b-text);
  text-decoration: none;
}
.b2b-drawer__link--big{ font-weight: 700; }

.b2b-drawer__toggle{
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b2b-drawer__toggleIcon{ font-weight: 700; }
.b2b-drawer__acc{ padding: 6px 0 10px; }

/* ドロワー開いてる時に背景スクロール抑止 */
html.b2b-drawer-open,
html.b2b-drawer-open body{
  overflow: hidden;
}

/* ドロワー内：検索バーの枠・グレー背景を消す */
.b2b-drawer .ec-headerSearch,
.b2b-drawer .ec-headerSearch__keyword,
.b2b-drawer .ec-headerSearch__keyword input[type="search"],
.b2b-drawer .ec-headerSearch__keyword input[type="text"]{
  border: none;
  background: transparent;
  box-shadow: none;
}
.b2b-drawer .ec-headerSearch,
.b2b-drawer .ec-headerSearch__keyword,
.b2b-drawer .ec-headerSearch form{
  width: 100%;
  max-width: none;
}
.b2b-drawer .ec-headerSearch input[type="search"],
.b2b-drawer .ec-headerSearch input[type="text"]{
  width: 100%;
  outline: none;
}

/* 検索：虫眼鏡を左へ（※b2b範囲だけに効かせる） */
.b2b-header2__pcSearch .ec-headerSearch .ec-input,
.b2b-drawer .ec-headerSearch .ec-input{
  display: flex;
  align-items: center;
  gap: var(--b2b-gap-10);
}

/* 右固定解除 */
.b2b-header2__pcSearch .ec-headerSearch__keywordBtn,
.b2b-drawer .ec-headerSearch__keywordBtn{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* 虫眼鏡を先頭へ */
.b2b-header2__pcSearch .ec-headerSearch .ec-input .ec-headerSearch__keywordBtn,
.b2b-drawer .ec-headerSearch .ec-input .ec-headerSearch__keywordBtn{
  order: -1;
}

/* 入力を伸ばす */
.b2b-header2__pcSearch .ec-headerSearch .ec-input input[type="search"],
.b2b-header2__pcSearch .ec-headerSearch .ec-input input[type="text"],
.b2b-drawer .ec-headerSearch .ec-input input[type="search"],
.b2b-drawer .ec-headerSearch .ec-input input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
}


/**************************************************
 * 7. レスポンシブ（SP）
 **************************************************/
@media (max-width: 767.98px){

  .b2b-header2__inner{ max-width: 100%; }

  /* 上段：ロゴ + 右アイコン */
  .b2b-header2__top .b2b-header2__inner{
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .b2b-header2__logo{
    border-right: none;
    padding: 10px 10px;
  }
  .b2b-header2__logoImg{ width: var(--b2b-logo-img-sp); }
  .b2b-header2__logoSub{ display: none; }

  /* PC用は隠す */
  .b2b-header2__pcBoxes,
  .b2b-header2__pcSearch{
    display: none !important;
  }

  /* SPアイコンは表示 */
  .b2b-header2__spIcons{
    display: flex !important;
    align-items: center;
    gap: var(--b2b-gap-8);
    padding-right: 10px;
  }

  .b2b-header2__iconBtn{
    position: relative;
    width: var(--b2b-iconbtn);
    height: var(--b2b-iconbtn);
    border: 1px solid var(--b2b-border-strong);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--b2b-text);
    text-decoration: none;
    padding: 0;
  }

  .b2b-header2__badge{
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: var(--b2b-badge-minw);
    height: var(--b2b-badge-h);
    border-radius: var(--b2b-badge-r);
    background: var(--b2b-border-strong);
    color: #fff;
    font-size: 12px;
    line-height: var(--b2b-badge-h);
    text-align: center;
    padding: 0 4px;
  }
}

/**************************************************
 * TOP スライダー調整
 * - PC：右に次スライドを1/4だけチラ見せ
 * - SP：通常の1枚表示
 **************************************************/

/* 画像は常に横幅にフィット（写真のみ前提） */
.ec-sliderRole img {
    width: 100%;
    height: auto;
    display: block;
}

/* PCのみ：右側に余白を作って次を見せる */
@media (min-width: 768px) {

    /* slickはoverflow:hiddenなので、paddingで「中の余白」を作る */
    .ec-sliderRole .slick-list {
        padding-right: 25%;
        padding-left: 0;
        box-sizing: border-box;
    }

    /* スライド間の最低限の余白（好みで） */
    .ec-sliderRole .slick-slide {
        padding-right: 8px;
        box-sizing: border-box;
    }
}

/**************************************************
 * B2B Sidebar（西海TTP）
 **************************************************/

/* サイドバー全体 */
.b2b-sidebar-section{
  background: #fff;
  padding: 16px;
}

/* セクション間の余白（線では区切らない） */
.b2b-sidebar-section + .b2b-sidebar-section{
  margin-top: 24px;
}

/* 見出し */
.b2b-sidebar-section__title{
  font-size: 14px;
  font-weight: 600;
  color: #323232;
  padding-left: 12px;
  border-left: 4px solid #323185; /* 西海の縦ラインを紫でTTP */
  margin: 0 0 16px 0;
}

/* リスト */
.b2b-sidebar-section__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 項目 */
.b2b-sidebar-section__item{
  margin: 0;
}

/* リンク */
.b2b-sidebar-section__item a{
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #323232;
  text-decoration: none;
}

/* ホバー時（西海と同じ挙動） */
.b2b-sidebar-section__item a:hover{
  color: #323185;
  text-decoration: underline;
  text-underline-offset: 2px;
}

























/**************************************************
 * B2B overrides (refactored from appended chunks)
 * 対象：Aパターン（TOP/一覧/詳細）
 * body id:
 * - #page_homepage
 * - #page_product_list
 * - #page_product_detail
 **************************************************/

/* ==================================================
 * 0) Tokens
 * ================================================== */
:root{
  --b2b-container: 1006px;
  --b2b-bg-outer: #f3f3f3;  /* 欄外 / 目地 */
  --b2b-bg-main:  #ffffff;  /* 面（白） */
  --b2b-text:     #323232;

  --b2b-side-w: 244px;      /* 右サイドバー幅 */
  --b2b-gap: 24px;          /* 本文の隙間（西海の雰囲気） */

  --b2b-header-h: 98px;     /* 48 + 2 + 48 */
  --b2b-tile-h: 48px;
  --b2b-tile-gap: 2px;      /* ヘッダーの目地 */
  --b2b-logo-w: 250px;      /* ←ロゴタイル幅（要望） */
}

/* ==================================================
 * 1) Aパターン：本文レイアウト（外側contentsだけ）
 *    ※ TOPだけにある「内側 .ec-layoutRole__contents」を触らないため
 *       .ec-layoutRole > .ec-layoutRole__contents だけ狙う
 * ================================================== */

/* 欄外色（Aパターン対象ページだけ） */
body#page_homepage,
body#page_product_list,
body#page_product_detail{
  background: var(--b2b-bg-outer);
  color: var(--b2b-text);
}

/* EC-CUBEが .ec-layoutRole に白背景を付けても欄外が勝つように */
/* body#page_homepage .ec-layoutRole,
body#page_product_list .ec-layoutRole,
body#page_product_detail .ec-layoutRole{
  background: transparent;
} */
.ec-layoutRole{
  background: transparent;
}

/* 本文幅制限（Aパターン対象ページだけ） */
.ec-layoutRole > .ec-layoutRole__contents{
  max-width: var(--b2b-container);
  margin: 8px auto 8px;
  box-sizing: border-box;
}

/* PC：2カラム（標準SCSSの width:75% などを殺す） */
@media (min-width: 768px){
  body#page_homepage .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_list .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_detail .ec-layoutRole > .ec-layoutRole__contents{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--b2b-side-w);
    gap: var(--b2b-gap);
    align-items: start;
    padding: 0;
  }

  body#page_homepage .ec-layoutRole__mainWithColumn,
  body#page_product_list .ec-layoutRole__mainWithColumn,
  body#page_product_detail .ec-layoutRole__mainWithColumn{
    width: auto !important;
    min-width: 0;
  }

  body#page_homepage .ec-layoutRole__right,
  body#page_product_list .ec-layoutRole__right,
  body#page_product_detail .ec-layoutRole__right{
    width: auto !important;
    min-width: 0;
    display: block;
  }
}

/* SP：1カラム（左右余白だけ） */
@media (max-width: 767.98px){
  body#page_homepage .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_list .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_detail .ec-layoutRole > .ec-layoutRole__contents{
    display: block;
    padding: 0 8px;
  }
}

/* 白い面（main/aside）＋ padding 8px（指定どおり） */
body#page_homepage .ec-layoutRole__mainWithColumn,
body#page_product_detail .ec-layoutRole__mainWithColumn{
  background: var(--b2b-bg-main);
  border: 0;
  box-shadow: none;
  padding: 8px !important;
}

/* トップのカルーセルが縮む対策（「幅制限」を受けないよう保険） */
body#page_homepage .ec-sliderRole{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px;
}
body#page_homepage .ec-sliderRole img{
  width: 100%;
  height: auto;
  display: block;
}

/* footerは欄外色を見せる（必要なら） */
body#page_homepage .ec-layoutRole__footer,
body#page_product_list .ec-layoutRole__footer,
body#page_product_detail .ec-layoutRole__footer{
  background: transparent;
}

/* ==================================================
 * 2) ヘッダーナビ：タイル調（最終形だけ残す）
 *    - 外（帯）: 欄外グレー
 *    - 内（1006）: 白
 *    - 目地（2px）: 欄外グレーが見える
 * ================================================== */

/* ヘッダー帯（欄外） */
.ec-layoutRole__header,
.b2b-header2,
.b2b-header2__top{
  background: var(--b2b-bg-outer) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 1006pxの白い器 */
.b2b-header2__inner{
  max-width: var(--b2b-container);
  margin: 0 auto;
  background: var(--b2b-bg-main) !important;
  box-sizing: border-box;
}

/* PC：タイルグリッド */
@media (min-width: 768px){

  /* 上段の高さを決める（ここがブレると全部崩れる） */
  .b2b-header2__top{
    height: var(--b2b-header-h) !important;
  }

  /* ロゴタイル(左) + 右タイル群(右) / 目地2px */
  .b2b-header2__inner{
    display: grid !important;
    grid-template-columns: var(--b2b-logo-w) 1fr !important; /* ←要望の250px */
    column-gap: var(--b2b-tile-gap) !important;
    height: var(--b2b-header-h) !important;

    /* 目地色が見えるよう「内側の背景」を欄外色に寄せる */
    background: var(--b2b-bg-outer) !important;
    padding: 0 !important;
  }

  /* ---------------------------
   * ロゴタイル（白 + 24px）
   * --------------------------- */
  .b2b-header2__logo{
    background: var(--b2b-bg-main) !important;
    height: var(--b2b-header-h) !important;
    padding: 24px !important; /* 西海の24px */
    box-sizing: border-box !important;
    border: 0 !important;
    overflow: hidden; /* 念のため */
  }

  /* ロゴ：画像→サブを縦積み */
  .b2b-header2__logoLink{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .b2b-header2__logoImg{
    display: block;
    height: 40px !important; /* 38〜42で微調整可 */
    width: auto !important;
    max-width: 100% !important;
  }

  .b2b-header2__logoSub{
    display: block !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* ---------------------------
   * 右側（上：3タイル / 下：検索）
   * --------------------------- */
  .b2b-header2__right{
    background: var(--b2b-bg-outer) !important; /* 目地の色 */
    height: var(--b2b-header-h) !important;
    padding: 0 !important;
    border: 0 !important;

    display: grid !important;
    grid-template-rows: var(--b2b-tile-h) var(--b2b-tile-h) !important;
    row-gap: var(--b2b-tile-gap) !important; /* ←上下目地はこれだけで作る */
    box-sizing: border-box !important;
  }

  /* 上段：3タイル + 目地2px */
  .b2b-header2__pcBoxes{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--b2b-tile-gap) !important;
    height: var(--b2b-tile-h) !important;
    background: var(--b2b-bg-outer) !important; /* 目地色 */
  }

  /* タイル本体（border不要） */
  .b2b-header2__box{
    height: var(--b2b-tile-h) !important;
    background: var(--b2b-bg-main) !important;
    border: 0 !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
  }

  /* タイル内（マイページ/クイックは左16px揃え） */
  .b2b-header2__boxLink{
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    border: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  /* アイコン列幅を揃える（文字の開始位置が揃う） */
  .b2b-header2__box--auth .b2b-header2__boxLink i,
  .b2b-header2__box--quick .b2b-header2__boxLink i{
    width: 18px;
    text-align: center;
  }

  /* 下段：検索タイル（border/padding不要） */
  .b2b-header2__pcSearch{
    height: var(--b2b-tile-h) !important;
    background: var(--b2b-bg-main) !important;

    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* 検索：虫眼鏡を左16px位置へ */
  .b2b-header2__pcSearch .ec-headerSearch__keyword{
    padding-left: 16px;
    padding-right: 16px;
  }
  .b2b-header2__pcSearch .ec-headerSearch__keywordBtn{
    left: 16px;
  }
  .b2b-header2__pcSearch input[type="search"]{
    padding-left: 40px; /* アイコン分 */
  }

  /* ミニカート（EC-CUBEネイティブ）が崩さない保険 */
  .b2b-header2__box--cartNative .ec-headerRole__cart,
  .b2b-header2__box--cartNative .ec-cartNaviWrap{
    width: 100%;
  }
}

/* 余計な線を最後に確実に殺す（border-bottom-color が出てた件） */
.b2b-header2__top,
.b2b-header2__inner,
.b2b-header2__logo,
.b2b-header2__logoLink,
.b2b-header2__right,
.b2b-header2__pcSearch,
.b2b-header2__box,
.b2b-header2__boxLink{
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}


/**************************************************
 * TOP カルーセル：ドットを画像上に重ねる（SAIKAI風）
 **************************************************/

/* dots を absolute で置くための基準 */
.ec-sliderRole .main_visual,
.ec-sliderRole .slick-slider {
  position: relative;
  margin-bottom: 0px;
}

/* slick が付ける ul.slick-dots を画像上へ */
.ec-sliderRole .main_visual .slick-dots,
.ec-sliderRole .slick-slider .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;              /* ←画像下からの距離（好みで） */
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  z-index: 5;
  display: flex !important;
  gap: 10px;
}

/* 各ドット */
.ec-sliderRole .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 !important;
}

/* ボタンを“丸”にする（Slick標準の文字は消す） */
.ec-sliderRole .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  font-size: 0;              /* ←1,2,3…を消す */
  line-height: 0;
}

/* アクティブ時（西海は濃いめ） */
.ec-sliderRole .slick-dots li.slick-active button {
  background: rgba(0,0,0,.55);
}

/* Slick 標準の疑似要素（●表示）を無効化 */
.ec-sliderRole .slick-dots li button:before {
  content: none !important;
}
























/* ==================================================
 * B2B Sidebar (SAIKAI) - refactored single source of truth
 * - 幅/高さ：244px / 48px
 * - 目地：2px（背景グレーで見せる）
 * - ボーダー：一切使わない
 * ================================================== */

/* セクション（外枠）＝目地グレーを敷く「土台」 */
.b2b-sidebar-section{
  border: 0 !important;
  box-shadow: none !important;

  background: var(--b2b-bg-outer); /* 目地色（グレー） */
  padding: 2px;                    /* 上下左右も必ず2px目地 */
  box-sizing: border-box;
}

/* 見出し（48pxタイル + 左2pxアクセント） */
.b2b-sidebar-section__title{
  height: 48px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  margin: 0;                       /* marginは使わない（目地は背景で出す） */
  padding: 0 12px 0 14px;          /* 左はアクセント分だけ広め */
  background: var(--b2b-bg-main);  /* 白タイル */
  border: 0 !important;

  font-size: 14px;
  font-weight: 600;
  color: var(--b2b-text);

  position: relative;
}

/* 左アクセント（2px / メイン色） */
.b2b-sidebar-section__title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--saikai-accent);
}

/* UL（タイトルと最初の項目の間も、2px目地を出す） */
.b2b-sidebar-section__list{
  list-style: none;
  margin: 2px 0 0;                 /* タイトル下に2px目地（=土台のグレーが見える） */
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 2px;                        /* 項目間2px目地 */
}

/* LIは“殻”にして余計な背景/余白を持たせない */
.b2b-sidebar-section__item{
  margin: 0;
  padding: 0;
}

/* 各リンク（48px白タイル） */
.b2b-sidebar-section__item a{
  height: 48px;
  display: flex;
  align-items: center;

  padding: 0 12px;
  box-sizing: border-box;

  background: var(--b2b-bg-main);  /* 白タイル */
  color: var(--b2b-text);
  text-decoration: none;
}

/* hover（線を使わず色だけ） */
.b2b-sidebar-section__item a:hover{
  color: var(--saikai-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==================================================
 * B2B Sidebar tiles (gap only / no frame)
 * - 2pxは「要素間の空き」だけにする（縁取りにしない）
 * ================================================== */

/* セクション：グレーは“隙間用の下地”として敷くが、外周は出さない */
.b2b-sidebar-section{
  background: var(--b2b-bg-outer); /* 隙間に見える色 */
  padding: 0 !important;           /* ← 縁取りの原因なので消す */
  border: 0 !important;
  box-shadow: none !important;

  display: flex;
  flex-direction: column;
  gap: 2px;                        /* ← 見出しとリストの間も2px空く */
  box-sizing: border-box;
}

/* 見出し：白タイル（48px） + 左2pxアクセント */
.b2b-sidebar-section__title{
  height: 48px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  margin: 0 !important;            /* marginで隙間を作らない */
  padding: 0 12px 0 14px;          /* 左はアクセント分だけ */
  background: var(--b2b-bg-main);
  border: 0 !important;
  box-shadow: none !important;

  position: relative;
}

.b2b-sidebar-section__title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--saikai-accent);
}

/* リスト：中も gap で2px空ける（線を出さない） */
.b2b-sidebar-section__list{
  list-style: none;
  margin: 0 !important;            /* ← ここで余計な“途中から”が出がち */
  padding: 0 !important;

  display: flex;
  flex-direction: column;
  gap: 2px;                        /* ← 項目間2px */
}

/* liは殻 */
.b2b-sidebar-section__item{
  margin: 0 !important;
  padding: 0 !important;
}

/* 各リンク：白タイル（48px）、線/影はゼロ */
.b2b-sidebar-section__item a{
  height: 48px;
  display: flex;
  align-items: center;

  padding: 0 12px;
  box-sizing: border-box;

  background: var(--b2b-bg-main);
  border: 0 !important;            /* ← 薄い線が残る場合の保険 */
  box-shadow: none !important;
  outline: 0;

  color: var(--b2b-text);
  text-decoration: none;
}

/* hover */
.b2b-sidebar-section__item a:hover{
  color: var(--saikai-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}















/* ==================================================
 * TOP 本文レイアウト：main 754px + gap 8px + sidebar 244px
 * 対象：TOP / 一覧 / 詳細（Aパターン）
 * ================================================== */

@media (min-width: 768px){
  body#page_homepage .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_list .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_detail .ec-layoutRole > .ec-layoutRole__contents{
    display: grid;
    grid-template-columns: 754px 244px; /* ← main / sidebar */
    column-gap: 8px;                    /* ← main〜sidebar 間隔 */
    max-width: 1006px;                  /* 念のため明示 */
    padding: 0;
    align-items: start;
  }

  /* 幅指定をSCSSから完全に切り離す */
  body#page_homepage .ec-layoutRole__mainWithColumn,
  body#page_product_list .ec-layoutRole__mainWithColumn,
  body#page_product_detail .ec-layoutRole__mainWithColumn,
  body#page_homepage .ec-layoutRole__right,
  body#page_product_list .ec-layoutRole__right,
  body#page_product_detail .ec-layoutRole__right{
    width: auto !important;
    min-width: 0;
  }
}

























/* ==================================================
 * TOP main：SAIKAI風 タイル区切り
 * - タイル間：8px（グレー＝欄外色）
 * - タイトル：48px
 * - タイトル下：2px（目地）
 * - 左アクセント：サイドバー同等（紫）
 * ================================================== */

:root{
  --b2b-main-section-gap: 8px;  /* タイル間（上下） */
  --b2b-title-gap: 2px;         /* タイトルと本文の間 */
  --b2b-title-h: 48px;          /* タイトル高さ */
}

/* TOPのmainを「目地（グレー）」にして、タイルで埋める */
@media (min-width: 768px){
  body#page_homepage .ec-layoutRole__mainWithColumn{
    background: var(--b2b-bg-outer) !important; /* グレー */
    padding: 0 !important;                      /* 8pxを殺す（目地はタイル間で出す） */
  }
}

/* 各ブロックを“タイル”として扱う（上下8pxで区切る） */
body#page_homepage .ec-sliderRole,
body#page_homepage .ec-newsRole,
body#page_homepage .ec-newItemRole{
  background: var(--b2b-bg-main);
  margin: 0 0 var(--b2b-main-section-gap) 0;
}

/* 最後だけ余白いらない */
body#page_homepage .ec-newItemRole:last-child,
body#page_homepage .ec-newsRole:last-child,
body#page_homepage .ec-sliderRole:last-child{
  margin-bottom: 0;
}

/* -------------------------------
 * タイトル（右サイドバー風）
 * 既存：ec-secHeading--tandem を再利用
 * - 英語は非表示
 * - 48px固定
 * - 左アクセント
 * - タイトル下に2px目地（グレー）
 * ------------------------------- */

body#page_homepage .ec-secHeading__en,
body#page_homepage .ec-secHeading__line{
  display: none !important; /* 英語/線は消す */
}

/* タイトル行そのもの */
body#page_homepage .ec-secHeading--tandem{
  height: var(--b2b-title-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 0 0 var(--b2b-title-gap) 0; /* ← タイトル下に2px目地 */
  padding: 0 12px 0 14px;

  background: var(--b2b-bg-main); /* 白タイル */
  position: relative;
  box-sizing: border-box;
}

/* 左アクセント（サイドバー同等） */
body#page_homepage .ec-secHeading--tandem::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px; /* サイドバーと同じ太さに合わせる */
  height: 100%;
  background: var(--saikai-accent);
}

/* 日本語タイトル（英語なしでこれだけ見せる） */
body#page_homepage .ec-secHeading__ja{
  font-size: 14px;
  font-weight: 600;
  color: var(--b2b-text);
  margin: 0;
}

/* “more”は右寄せで維持（必要なければdisplay:noneでもOK） */
body#page_homepage .ec-inlineBtn--top{
  margin-left: auto;
}

/* タイトル下の2px目地を確実に「グレー」で見せるため、親側をグレーに */
body#page_homepage .ec-newItemRole__list,
body#page_homepage .ec-newsRole{
  background: var(--b2b-bg-outer);
}

/* new/popular：見出し（=最初のlistItem）と商品カードの間を2px目地で区切る */
body#page_homepage .ec-newItemRole__list{
  padding: 0;
}
body#page_homepage .ec-newItemRole__listItem{
  background: var(--b2b-bg-main);
}

/* 商品カードの並びも“目地”で区切りたい場合（好みで） */
body#page_homepage .ec-newItemRole__list{
  gap: 2px;
}


/* ==================================================
 * B2B TOP：タイル商品ブロック（新着・人気）
 * ================================================== */

/* ブロック全体（上下8px目地） */
.b2b-tileSection{
  background: var(--b2b-bg-outer); /* 目地色 */
}

.b2b-tileSection--newItem{
  margin-bottom: 8px;
}

/* =========================
 * タイトル行（48px）
 * ========================= */
.b2b-tileSection__title{
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--b2b-bg-main);
  padding: 0 12px 0 14px;
  position: relative;
  box-sizing: border-box;
}

/* 左アクセント（サイドバー同等） */
.b2b-tileSection__title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--saikai-accent);
}

.ec-role .b2b-tileSection__titleText{
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.b2b-tileSection__more{
  font-size: 13px;
  color: var(--b2b-text);
  text-decoration: none;
}
.b2b-tileSection__more:hover{
  text-decoration: underline;
}

/* タイトルとカード島の間：2px */
.b2b-tileSection__body{
  margin-top: 2px;
}

/* 新着（=tileSection）配下のカルーセルは常に横いっぱい */
.b2b-tileSection__body .b2b-tileCarousel{
  display: block;
  width: 100%;
  max-width: 100%;
}

/* slickの表示領域も横いっぱい */
.b2b-tileSection__body .b2b-tileCarousel .slick-list{
  width: 100%;
}

/* もし親がflexの子なら「縮み」を止める定番セット */
.b2b-tileSection__body{
  min-width: 0;           /* ← 親がflexコンテナの場合の事故防止 */
}
.b2b-tileSection__body .b2b-tileCarousel{
  flex: 1 1 auto;         /* ← b2b-tileCarouselがflex itemなら効く */
  min-width: 0;
}
.b2b-tileSection__body .b2b-tileCarousel .slick-track{
  margin-left: 0 !important;  /* trackが中央寄せされてるケース潰し */
  margin-right: 0 !important;
}

/* =========================
 * カード島（3枚・2px目地）
 * ========================= */
.b2b-tileCarousel{
  display: flex;
  gap: 2px;
  background: var(--b2b-bg-outer);
}

/* 1カード */
.b2b-tileCard{
  width: 250px;
  background: var(--b2b-bg-main);
  padding: 8px;
  box-sizing: border-box;
}

/* 既存EC-CUBEカードの影・線を殺す */
.b2b-tileCard .ec-productRole__item{
  border: 0;
  box-shadow: none;
}

/* ==================================================
 * 新着/人気：カード目地（2pxグレー）slick対応 + フォント
 * ================================================== */

/* 見出し（新着商品/人気商品） */
.ec-role h2 .b2b-tileSection__titleText{
  font-size: 14px;
}

/* カード内（商品名・金額など） */
.b2b-tileCard__title,
.b2b-tileCard__price{
  font-size: 12px;
  line-height: 1.4;
}

/* 目地色（2pxのグレーが見える“床”） */
.b2b-tileCarousel{
  background: var(--b2b-bg-outer);
  margin-bottom: 0;
}

/* slick化すると gap が効かないので、slide同士を margin で2px空ける */
.b2b-tileCarousel.slick-initialized .slick-track{
  display: flex;        /* 高さ揃え用 */
}
.b2b-tileCarousel.slick-initialized .slick-slide{
  height: auto;         /* つぶれ防止 */
  margin-right: 2px;    /* ← これが縦の2px目地になる */
}
.b2b-tileCarousel.slick-initialized .slick-slide:last-child{
  margin-right: 0;
}

/* slide内のカードは白タイル */
.b2b-tileCarousel.slick-initialized .slick-slide > div{
  height: 100%;
}


/* ==================================================
 * TOP(main)だけ：.ec-role の左右20pxを殺して 754px を成立させる
 * ================================================== */

@media (min-width: 768px){
  body#page_homepage .ec-layoutRole__mainWithColumn .ec-role{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;  /* 1130px制限も外す（中身はグリッドで管理） */
  }
}


/* ==================================================
 * 新着/人気：カード内テキストを通常色に戻す
 * ================================================== */

/* カード全体リンクの色・下線を無効化 */
.b2b-tileCard__link{
  color: var(--b2b-text);     /* #525263 相当 */
  text-decoration: none;
}

/* 念のため個別にも指定 */
.b2b-tileCard__title,
.b2b-tileCard__price{
  color: var(--b2b-text);
  white-space: nowrap;     /* 1行に固定 */
  overflow: hidden;        /* はみ出しを隠す */
  text-overflow: ellipsis; /* … を出す */  
}

/* hoverしても青くしない */
.b2b-tileCard__link:hover{
  color: var(--b2b-text);
  text-decoration: none;
}

/* 写真の下に16px余白 */
.b2b-tileCard__thumb{
  margin-bottom: 16px;
}

.b2b-tileCard__price{
  margin-bottom: 8px;
  margin-top: 32px;
}










.b2b-tileCarousel{
  opacity: 0;
  visibility: hidden;
}
.b2b-tileCarousel.slick-initialized{
  opacity: 1;
  visibility: visible;
}












/* 左矢印は使わない（西海仕様） */
.main_visual .slick-prev,
.b2b-tileCarousel .slick-prev{
  display: none !important;
}

/* ==================================================
 * 西海風 カルーセル矢印（右のみ）
 * ================================================== */

.main_visual .slick-next, 
.b2b-tileCarousel .slick-next{
  display: flex !important;
  align-items: center;      /* ← 垂直中央 */
  justify-content: center;  /* ← 水平中央 */

  width: 48px;
  height: 48px;

  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);

  background: rgba(255,255,255,.9);
  z-index: 5;

  padding: 0;               /* ← 重要：slick既定paddingを殺す */
  line-height: 1;           /* ← 重要：文字ズレ防止 */
  border: none;
}

/* slick 標準の before を消す */
.main_visual .slick-next::before,
.b2b-tileCarousel .slick-next::before{
  content: none !important;
}

/* Font Awesome のアイコンを表示（chevron-right） */
.main_visual .slick-next::after,
.b2b-tileCarousel .slick-next::after{
  /* FA6 Free (Solid) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  /* もしFA5なら上が効かないので、次の2行に差し替え:
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
  */

  content: "\f054"; /* chevron-right */
  font-size: 22px;
  line-height: 1;
  color: #22222240;

  display: block; /* flex不要。箱は親がflexで中央寄せ */
  position: relative;
  top: -1px;   /* ← これで完全一致（西海もほぼ同じ） */
}

/* hover */
.main_visual .slick-next:hover,
.b2b-tileCarousel .slick-next:hover{
  opacity: .45;              /* ← 西海寄せの薄さ */
  background: rgba(255,255,255,.8);
}

.main_visual,
.b2b-tileCarousel{
  position: relative;
}

.main_visual .slick-next{
  right: -8px;
}























/* ==================================================
 * 新着商品：NEW バッジ（西海寄せ・指定版）
 * ================================================== */

.b2b-tileSection--newItem .b2b-tileCard__thumb{
  position: relative; /* 念のため */
}

.b2b-tileSection--newItem .b2b-tileCard__thumb::before{
  content: "New";

  position: absolute;
  top: 0;
  left: 0;

  padding: 0 10px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0;

  color: #fff;
  background: var(--saikai-accent); /* メインカラーの紫 */

  height: 12px;          /* line-heightと合わせて高さ固定 */
  display: flex;
  align-items: center;

  z-index: 2;
  height: 24px;
}



/* ==================================================
 * NEWS（新着情報）仕上げ
 *  - 背景白
 *  - 日付12px
 *  - 見出しは b2b-tileSection__title に統一（Twig側で済み）
 * ================================================== */
body#page_homepage .ec-newsRole{
  background: var(--b2b-bg-main);
}

/* 日付を12px */
body#page_homepage .ec-newsRole__newsDate{
  font-size: 12px;
  line-height: 1.4;
  color: var(--b2b-text);
}

/* NEWS本体は白タイル、行の間は2px目地（任意：西海寄せ） */
body#page_homepage .ec-newsRole__news{
  /* background: var(--b2b-bg-outer); */
  border: 0px;
  margin-bottom: 8px;
}
body#page_homepage .ec-newsRole__newsItem{
  /* background: var(--b2b-bg-main); */
  margin-bottom: 2px;
}
body#page_homepage .ec-newsRole__newsItem:last-child{
  margin-bottom: 0;
}

body#page_homepage .b2b-tileSection--news {
  padding-top:0;
}









/* ==================================================
 * SAIKAI風 Footer：250px × 4列 + 2px目地 = 1006px
 * ================================================== */

:root{
  --b2b-footer-col-w: 250px;
  --b2b-footer-gap: 2px;

  --b2b-meji-bg: var(--b2b-bg-main, #f3f3f3);
  --b2b-tile-bg: #fff;
  --b2b-accent: var(--b2b-main, #6a3bd1);
  --b2b-text: #111;
  --b2b-muted: #666;
}

/* 1006px 固定 */
.b2b-footer__inner{
  width: calc(
    (var(--b2b-footer-col-w) * 4) +
    (var(--b2b-footer-gap) * 3)
  );
  margin: 0 auto;
}

/* 4列グリッド */
.b2b-footer__grid{
  display: grid;
  grid-template-columns: repeat(4, var(--b2b-footer-col-w));
  gap: var(--b2b-footer-gap);
}

/* 各列タイル */
.b2b-footer__col{
  min-height: 100%;
  background: var(--b2b-meji-bg);
}

/* 見出し：48px + 左アクセント */
.b2b-footer__title{
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin: 0;

  font-size: 12px;
  color: var(--b2b-text);

  background: var(--b2b-tile-bg);

  border-bottom: 2px solid #F3F3F3;
  box-sizing: content-box;  
}

/* リンクリスト（タイトル下に2px目地） */
.b2b-footer__list{
  list-style: none;
  margin: var(--b2b-footer-gap) 0 0;
  padding: 24px;
}

/* 行もタイル化 */
.b2b-footer__list > li{
  background: var(--b2b-tile-bg);
  margin-top: var(--b2b-footer-gap);
}

.b2b-footer__list > li:first-child{
  margin-top: 0;
}

.b2b-footer__list a{
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--b2b-text);
  text-decoration: none;
}

/* ===== 下部バー ===== */
.b2b-footer__bottom{
  background: var(--b2b-tile-bg);
  margin-top: 2px;
}

.b2b-footer__bottomInner{
  width: 1006px;
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--saikai-bg-main);
  height: 48px;  
}

.b2b-footer__copyright{
  font-size: 12px;
  color: var(--b2b-muted);
}

/* ===== SP：1列に畳む ===== */
@media (max-width: 767px){
  .b2b-footer__inner,
  .b2b-footer__bottomInner{
    width: auto;
    margin: 0 8px;
  }

  .b2b-footer__grid{
    grid-template-columns: 1fr;
  }
}



/**************************************************
 * 9. フッター（SAIKAI風 3列 + 欄外バー）
 **************************************************/

.b2b-footer__bottom{
  background: var(--saikai-bg-outer);
}
.b2b-footer__bottomInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
}
.b2b-footer__bottomLogo{
  height: 22px;
  width: auto;
  display: block;
}
.b2b-footer__copyright{
  color: var(--saikai-text);
  font-size: 10px;
}

@media (max-width: 767.98px){
  .b2b-footer__layout{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .b2b-footer__main{
    border-left: 0;
    border-right: 0;
  }
  .b2b-footer__grid{
    grid-template-columns: 1fr;
  }
  .b2b-footer__col + .b2b-footer__col{
    border-left: 0;
    border-top: var(--saikai-line-w) solid var(--saikai-line);
  }
  .b2b-footer__col{
    padding: 16px;
  }

  body#page_homepage .ec-newsRole__newsItem{
    padding: 0 12px;
  }
}
























/* ==================================================
 * SP: outer padding 8px (SAIKAI)
 * ================================================== */
@media (max-width: 767.98px){

  /* 欄外→中身までの余白を統一 */
  body#page_homepage .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_list .ec-layoutRole > .ec-layoutRole__contents,
  body#page_product_detail .ec-layoutRole > .ec-layoutRole__contents{
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 8px !important;
  }

  /* main/aside を白面にしても“内側余白”は作らない（余白は外側で8px管理） */
  body#page_homepage .ec-layoutRole__mainWithColumn,
  body#page_product_list .ec-layoutRole__mainWithColumn,
  body#page_product_detail .ec-layoutRole__mainWithColumn{
    padding: 0 !important;
    background: transparent !important; /* タイルが白を持つ想定 */
  }

  /* 右サイドバー（SPでは下に回る前提）：上に8pxだけ空ける */
  body#page_homepage .ec-layoutRole__right,
  body#page_product_list .ec-layoutRole__right,
  body#page_product_detail .ec-layoutRole__right{
    margin-top: 8px;
  }

  body#page_homepage .ec-role {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#page_homepage .ec-layoutRole__mainWithColumn .ec-layoutRole__contents {
    margin-bottom: 8px;
  }

}



/* ==================================================
 * Footer: SP accordion (+/-), PC keeps grid
 * ================================================== */
.b2b-footer__acc{ display:none; }

@media (max-width: 767.98px){
  .b2b-footer__grid{ display:none !important; }
  .b2b-footer__acc{ display:block; }

  .b2b-footerAcc{ background: var(--b2b-bg-outer); margin: 0 0 8px 0; }

  .b2b-footerAcc__head{
    height: 48px;
    display:flex;
    align-items:center;
    list-style:none;
    background:#fff;
    padding: 0 12px 0 14px;
    position:relative;
    cursor:pointer;
  }

  .b2b-footerAcc__head::after{
    content:"+";
    margin-left:auto;
    font-weight:700;
    font-size:18px;
    line-height:1;
    color:#666;
  }
  .b2b-footerAcc[open] > .b2b-footerAcc__head::after{
    content:"-";
  }

  .b2b-footerAcc__head::-webkit-details-marker{ display:none; }

  .b2b-footerAcc__body{
    margin-top:2px; /* 目地 */
    background: var(--b2b-bg-outer);
  }

  .b2b-footerAcc__list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:0px; /* 行目地 */
  }

  .b2b-footerAcc__list a{
    display:flex;
    align-items:center;
    height:48px;
    background:#fff;
    padding:0 12px;
    color:#323232;
    text-decoration:none;
  }
}


/* ==================================================
 * Footer Accordion (SP): 1 block (like PC footer column)
 * - 見出し＋リンク群を「ひとまとまりの白タイル」にする
 * ================================================== */
@media (max-width: 767.98px){

  /* details全体を「白い塊」に */
  .b2b-footerAcc{
    background: #fff;
    margin: 0 0 2px 0;   /* ブロック間の余白だけ8px */
  }

  /* 見出し：白い塊の上部（左アクセント＋右に＋/−） */
  .b2b-footerAcc__head{
    background: #fff;
    border: 0;
  }

  /* 見出しと本文の境界を“目地2px”で表現（borderを使わない） */
  .b2b-footerAcc__body{
    margin-top: 0; /* いったんリセット */
    padding-top: 2px;
    background:
      linear-gradient(var(--b2b-bg-outer), var(--b2b-bg-outer)) top/100% 2px no-repeat,
      #fff;
  }

  /* リンク群を「1つの白い塊の中で、行だけ区切る」 */
  .b2b-footerAcc__list{
    display: block;   /* grid解除 */
    gap: 0;           /* gap解除 */
    margin: 0;
    padding: 0;
  }

  .b2b-footerAcc__list li{
    list-style: none;
    margin: 0;
    padding: 0;

    background:none;
  }

  /* 先頭行は見出し直下なので区切り不要 */
  .b2b-footerAcc__list li:first-child{
    background: none;
  }

  .b2b-footerAcc__list a{
    background: transparent; /* 1行ごとの白タイル感を消す（塊の中の行に） */
    height: 48px;
    padding: 0 12px;
    display: flex;
    align-items: center;
  }
}







/**************************************************
 * product_list：SAIKAI風 タイル（250px×3 + 目地2px）
 * ※ 末尾追記で上書き運用
 **************************************************/

body#page_product_list .ec-layoutRole__contents{
  /* 目地（床）の色：TOPと同じトークンがあればそっち優先 */
  --b2b-meji-bg: var(--b2b-bg-outer, #f3f3f3);
}

body#page_product_list .ec-pagerRole{
  background: #fff;
  margin-top: 2px;
}

/* 一覧の左右paddingが754思想を壊しがち → 0に寄せる */
body#page_product_list .ec-role{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3列固定：250px×3 + 目地2px（＝754にピッタリ） */
body#page_product_list ul.ec-shelfGrid{
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 2px;                         /* 目地 */
  background: var(--b2b-meji-bg);   /* 目地の床 */
  padding: 0;
  margin: 0;
  list-style: none;

  /* 念のため：左寄せ固定（万一親がflex等でも崩れにくく） */
  justify-content: start;
}

/* カード＝白タイル、線/影は捨てる（目地はgapで表現） */
body#page_product_list li.ec-shelfGrid__item{
  background: #fff;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0;
}

/* カード内の文字は12pxに統一 */
body#page_product_list li.ec-shelfGrid__item,
body#page_product_list li.ec-shelfGrid__item p,
body#page_product_list li.ec-shelfGrid__item small{
  font-size: 12px !important;
  line-height: 1.4;
}

body#page_product_list li.ec-shelfGrid__item p{
  white-space: nowrap;     /* 1行に固定 */
  overflow: hidden;        /* はみ出しを隠す */
  text-overflow: ellipsis; /* … を出す */  
}

body#page_product_list li.ec-shelfGrid__item .price02-default{
  margin-top: 36px;
}

body#page_product_list li.ec-shelfGrid__item{
  padding: 8px;
}

body#page_product_list li.ec-shelfGrid__item{
  width: 100% !important;     /* ←ここが効いたやつ */
  max-width: none !important;
  min-width: 0 !important;
}

/* 画像：NEWを載せる土台 */
body#page_product_list .ec-shelfGrid__item-image{
  position: relative;
}

/* NEW（タグID=1 → liに b2b-is-new が付く） */
body#page_product_list li.ec-shelfGrid__item.b2b-is-new .ec-shelfGrid__item-image::before{
  content: "New";
  position: absolute;
  top: 0;
  left: 0;

  padding: 0 10px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0;

  color: #fff;
  background: var(--saikai-accent, #323185);
  height: 24px;

  display: flex;
  align-items: center;
  z-index: 2;
}

/* 数量やボタンは“そのまま”を尊重（崩れ防止の最低限だけ） */
body#page_product_list .ec-numberInput input.quantity{
  max-width: 100%;
}

/* SPは一旦2列（あとで“外側8px”等は要望確定後に調整） */
@media (max-width: 767.98px){
  body#page_product_list ul.ec-shelfGrid{
    grid-template-columns: repeat(2, 1fr);
  }

  body#page_product_list .ec-searchnavRole .ec-searchnavRole__infos{
    margin-bottom: 0;
  }
}


body#page_product_list .ec-shelfRole{
    padding-left: 0px;
    padding-right: 0px;  
}


body#page_product_list .ec-searchnavRole{
    background-color: #fff;
    margin-bottom: 2px;
}

/**************************************************
 * product_list：数量は幅100%のまま「高さ・余白」だけ整える
 **************************************************/

/* 数量ブロックは縦積みのままでOK（幅いっぱい運用） */
body#page_product_list .ec-numberInput{
  display: block;          /* 横並びをやめる */
}

/* 「数量」ラベルを小さく＆詰める */
body#page_product_list .ec-numberInput > span{
  display: block;
  font-size: 12px;
  line-height: 1;
  margin: 0 0 4px;
  white-space: nowrap;
}







/**************************************************
 * product_detail：SAIKAI風 仕様テーブル
 **************************************************/
body#page_product_detail .b2b-specTableWrap{
  margin: 16px 0 0;
}

body#page_product_detail .b2b-specTable{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
}

body#page_product_detail .b2b-specTable th,
body#page_product_detail .b2b-specTable td{
  padding: 10px 12px;
  border: 1px solid var(--saikai-line, #e6e6e6);
  vertical-align: top;
}

body#page_product_detail .b2b-specTable th{
  width: 120px;
  font-weight: 300;
  background: #f3f3f3;
  white-space: nowrap;
  color: #8c8c8c;
}

body#page_product_detail .b2b-specTable td{
  color: var(--b2b-text, #323232);
}

body#page_product_detail .ec-productRole__profile,
body#page_product_detail .ec-productRole .ec-productRole__tag{
  font-size: 12px;
}

body#page_product_detail .ec-productRole__description{
  font-size: 14px;
}

body#page_product_detail .ec-productRole .ec-productRole__title .ec-headingTitle{
  font-size: 20px;
}

body#page_product_detail .ec-productRole__btn{
  font-size: 16px;
}

@media (max-width: 767.98px){
  body#page_product_detail .ec-productRole{
    background-color: #fff;
    padding-top: 8px;
    margin-bottom: 8px;    
  }
}


/**************************************************
 * page_mypage_login：SAIKAI風 仕様テーブル
 **************************************************/

body#page_mypage_login .ec-login,
body#page_shopping_login .ec-login
{
  margin-bottom: 20px;
  font-size: 14px;
}

body#page_mypage_login .ec-login__actions,
body#page_shopping_login .ec-login__actions
{
  font-size: 16px;
}


.ec-off1Grid,
.ec-off3Grid {
  font-size: 14px
}

.ec-reportDescription,
body#page_forgot .ec-forgotRole__intro {
  font-size: 14px;
}

@media (max-width: 767.98px){
  .ec-off1Grid,
  .ec-off3Grid {
    font-size: 12px;
  }

  .ec-reportDescription,
  body#page_forgot .ec-forgotRole__intro {
    font-size: 12px;
  }

  .ec-forgetCompleteRole {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.ec-label{
  font-size: 12px;
  font-weight: 400;
  color: #8c8c8c;
}

.ec-required {
  vertical-align: 0;
}

.ec-blockBtn--action,
.ec-blockBtn--cancel {
  font-size: 16px;
}

a.ec-blockBtn--cancel {
  color: #fff;
  text-decoration: none;
}

body#page_contact .ec-contactRole,
body#page_contact .ec-contactConfirmRole,
body#page_contact_complete .ec-contactCompleteRole,
body#page_entry .ec-registerRole,
body#page_entry_complete .ec-registerCompleteRole,
body#page_forgot .ec-forgotRole,
body#page_forgot_reset .ec-registerRole,
body#page_cart .ec-cartRole,
body#page_shopping_shipping .ec-registerRole,
body#page_shopping_shipping_edit .ec-registerRole,
body#page_shopping_complete .ec-cartCompleteRole,
body#page_shopping .ec-orderRole,
body#page_shopping_confirm .ec-orderRole,
body#page_mypage .ec-mypageRole .ec-pagerRole,
body#page_mypage_history .ec-orderRole,
body#page_mypage_change .ec-mypageRole .ec-editRole,
body#page_mypage_change_complete .ec-registerCompleteRole,
body#page_mypage_favorite .ec-mypageRole .ec-favoriteRole,
body#page_mypage_delivery .ec-mypageRole .ec-addressList,
body#page_mypage_delivery_new .ec-mypageRole .ec-editRole,
body#page_mypage_delivery_edit .ec-mypageRole .ec-editRole,
body#page_shopping_error .ec-role + .ec-role
{
  padding-bottom: 32px;
}

body#page_help_agreement .ec-role,
body#page_help_about .ec-role,
body#page_help_tradelaw .ec-role,
body#page_help_privacy .ec-role
 {
  padding-bottom: 64px;
}

body#page_forgot_reset .ec-blockBtn--action{
  margin-bottom: 0;
}

body#page_cart .ec-cartHeader .ec-cartHeader__label{
    font-size: 12px;
    font-weight: 400;
    color: #8C8C8C;
    background-color: #f3f3f3;
}

body#page_cart .ec-cartRole__totalText{
    font-size: 14px;
}

body#page_cart .ec-cartRole{
    font-size: 14px;
}

body#page_cart .ec-cartRow .ec-cartRow__summary{
  font-weight: 400;
}

body#page_cart .ec-cartRow .ec-cartRow__summary .ec-cartRow__name{
  font-weight: 700;
}

body#page_cart .ec-cartRole .ec-cartRole__total,
body#page_shopping .ec-orderRole .ec-totalBox__total,
body#page_shopping .ec-orderRole .ec-totalBox__paymentTotal,
body#page_shopping_confirm .ec-orderRole .ec-totalBox__total,
body#page_shopping_confirm .ec-orderRole .ec-totalBox__paymentTotal,
body#page_mypage_history .ec-orderRole .ec-totalBox__total,
body#page_mypage_history .ec-orderRole .ec-totalBox__paymentTotal
{
  font-size: 14px;
  font-weight: 400;
}

body#page_cart .ec-cartRole .ec-cartRole__total .ec-cartRole__totalAmount {
  font-weight: 700;
}

body#page_shopping .ec-orderRole,
body#page_shopping_confirm .ec-orderRole,
body#page_mypage_history .ec-orderRole
{
  font-size: 14px;
}

body#page_shopping .ec-orderDelivery__change{
  font-size: 16px;
}

body#page_mypage .ec-navlistRole,
body#page_mypage_history .ec-navlistRole,
body#page_mypage_favorite .ec-navlistRole,
body#page_mypage_change .ec-navlistRole,
body#page_mypage_delivery .ec-navlistRole,
body#page_mypage_delivery_new .ec-navlistRole,
body#page_mypage_delivery_edit .ec-navlistRole,
body#page_mypage_change_complete .ec-navlistRole{
  font-size: 12px;
}

body#page_mypage .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_history .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_favorite .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_change .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_delivery .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_delivery_new .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_delivery_edit .ec-navlistRole .ec-navlistRole__item a,
body#page_mypage_change_complete .ec-navlistRole .ec-navlistRole__item a{
  padding-top: 6px;
  padding-bottom: 6px;
}

body#page_mypage .ec-navlistRole .active a,
body#page_mypage_history .ec-navlistRole .active a,
body#page_mypage_favorite .ec-navlistRole .active a,
body#page_mypage_change .ec-navlistRole .active a,
body#page_mypage_delivery .ec-navlistRole .active a,
body#page_mypage_delivery_new .ec-navlistRole .active a,
body#page_mypage_delivery_edit .ec-navlistRole .active a,
body#page_mypage_change_complete .ec-navlistRole .active a{
  color:#fff;
  background-color:var(--saikai-accent);
}

body#page_mypage .ec-para-normal,
body#page_mypage_favorite .ec-favoriteRole__header,
body#page_mypage_delivery .ec-para-normal{
  font-size: 14px;
}

body#page_mypage .ec-historyListHeader .ec-historyListHeader__date,
body#page_mypage .ec-historyRole__detailTitle,
body#page_mypage .ec-historyRole__detailPrice,
body#page_mypage .ec-definitions,
body#page_mypage .ec-definitions dt,
body#page_mypage_favorite .ec-favoriteRole__itemTitle,
body#page_mypage_favorite .ec-favoriteRole__itemPrice{
  font-size: 14px;
  font-weight: 400;
}


body#page_mypage_history .ec-totalBox .ec-blockBtn--cancel {
    margin-top: 8px;
}


/* ==================================================
 * MyPage: 西海風 ユーザー表示バー（会社名 + 担当者名）
 * ================================================== */
.b2b-mypageUserBar{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 18px;
  margin: 0 0 16px;

  background: #fff;
  border-bottom: 1px solid #e5e5e5;

  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.b2b-mypageUserBar__company{
  font-weight: 700;
}

.b2b-mypageUserBar__person{
  font-weight: 700;
}

.b2b-mypageUserBar__honorific{
  color: #666;
}





.ec-mypageRole .ec-pageHeader h1, .ec-mypageRole .ec-pageHeader .h1{
    margin-bottom: 0;
}