/* カスタマイズ用CSS */

/* ==========================================================
   カテゴリナビ（PC） app/template/default/Block/category_nav_pc.twig
   --bg-catW:   中分類〜小小分類の列の幅（全階層で同じ）
   --bg-catImg: 大分類の背景画像（テンプレートが a の style で渡す）
   ========================================================== */
.bg-catNav {
  --bg-catW: 16em;
  --bg-catLine: 1.4em;
  --bg-catAccent: #1a4f8b;
  font-size: 13px;
  line-height: 1.4;
  color: #2e3233;
  text-align: left;
}
.bg-catNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bg-catNav a {
  color: #2e3233;
  text-decoration: none;
}

/* 各項目 */
.bg-catNav__item {
  position: relative;
}
.bg-catNav__item > a {
  display: flex;
  align-items: center;
  padding: 0 1.8em 0 .8em;
  background-color: #fff;
  background-repeat: no-repeat;
  border-bottom: 1px solid #e8e8e8;
}
.bg-catNav__item > a > span {
  min-width: 0;
  overflow: hidden;
}
.bg-catNav__item:hover > a,
.bg-catNav__item.is-current > a,
.bg-catNav__item.is-hover > a {
  background-color: #eef3f9;
  color: var(--bg-catAccent);
}
.bg-catNav__item.has-child > a::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: .7em;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
}

/* マウスを乗せたときに開く列（幅は一律。縦位置は JS が画面内に収める）。
   is-hover: パンくずにマウスを乗せたとき、同じカテゴリまでの道筋に JS が付ける（マウスを乗せたときと同じ見た目） */
.bg-catNav__sub {
  display: none;
  position: absolute;
  z-index: 100;
  top: -1px;
  left: 100%;
  width: var(--bg-catW);
  min-width: var(--bg-catW);
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}
.bg-catNav__item:hover > .bg-catNav__sub,
.bg-catNav__item.is-hover > .bg-catNav__sub {
  display: block;
}

/* ---------- トップページ: 大分類のタイル（画像は背景） ---------- */
.bg-catNav--top {
  padding-top: 16px;
  padding-bottom: 16px;
}
.bg-catNav--top .bg-catNav__top {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
}
.bg-catNav--top .bg-catNav__major > a {
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: calc(76px + var(--bg-catLine) * 2 + 6px);
  padding: 76px 6px 6px;
  border: 1px solid #ccc;
  text-align: center;
  background-image: var(--bg-catImg);
  background-position: center 10px;
  background-size: auto 60px;
}
.bg-catNav--top .bg-catNav__major > a > span {
  height: calc(var(--bg-catLine) * 2);
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bg-catNav--top .bg-catNav__major:hover > a {
  border-color: var(--bg-catAccent);
}
/* スマホ（767px 以下）: 標準は .ec-categoryNaviRole を隠している（PC 用のナビのため）。トップのタイルは出す。
   幅 375px で 3 列になるよう、タイル・画像を小さくする */
@media only screen and (max-width: 767px) {
  .bg-catNav--top.ec-categoryNaviRole {
    display: block;
    padding: 12px 16px;
  }
  .bg-catNav--top .bg-catNav__top {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .bg-catNav--top .bg-catNav__major > a {
    min-height: calc(58px + var(--bg-catLine) * 2 + 4px);
    padding: 58px 4px 4px;
    font-size: 12px;
    background-position: center 8px;
    background-size: auto 44px;
  }
}
/* タイルの下に中分類から先は出さない（押すと一覧へ移り、移った先のパンくずから開く。Block/category_nav_pc.twig） */

/* トップから移ってきて、マウスがパンくず・開いた列に来るのを待っている間（is-waiting は JS が付ける）:
   左カラムの項目にマウスがあっても、マウスを乗せたときの見た目にせず列も開かない（開いておいた道筋 is-hover はそのまま） */
.bg-catNav.is-waiting .bg-catNav__item:hover:not(.is-hover):not(.is-current) > a {
  background-color: #fff;
  color: #2e3233;
}
.bg-catNav.is-waiting .bg-catNav__item:hover:not(.is-hover) > .bg-catNav__sub {
  display: none;
}

/* ---------- トップ以外: 左カラムに大分類を 1 列で固定表示。長い名前は 2 行 ---------- */
.bg-catNav--side {
  margin-bottom: 24px;
  border: 1px solid #ccc;
  border-bottom: none;
}
.bg-catNav--side .bg-catNav__head {
  padding: 8px .8em;
  background: var(--bg-catAccent);
  color: #fff;
  font-weight: bold;
}
/* 項目の高さ: 大分類も中分類〜小小分類も同じ（--bg-catSideH）。2 行分＋上下の余白で、トップの中分類〜と同じ */
.bg-catNav--side {
  --bg-catSideH: calc(var(--bg-catLine) * 2 + 10px);
}
.bg-catNav--side .bg-catNav__item > a {
  height: var(--bg-catSideH);
}
/* 長い名前は 2 行で出す（3 行目以降は … で省略）。トップの中分類〜小小分類と同じ */
.bg-catNav--side .bg-catNav__item > a > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 大分類: 左端に背景画像（画像の縦横比がまちまちなので、決まった枠の中に収める） */
.bg-catNav--side .bg-catNav__major > a {
  padding-left: 70px;
}
.bg-catNav--side .bg-catNav__major > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 56px;
  height: 32px;
  transform: translateY(-50%);
  background: var(--bg-catImg) no-repeat center / contain;
}

/* ==========================================================
   商品一覧 app/template/default/Product/list.twig
   画像・商品名・販売価格・出荷単位・数量の高さを固定して、全商品で位置を揃える
   --bg-listNameLines: 商品名の行数（4 行まで。はみ出す分は … で省略。2026-10-17 に 5 → 4）
   ========================================================== */
.ec-shelfGrid .ec-shelfGrid__item {
  --bg-listNameLines: 4;
}
/* 画像: 正方形の枠に収める */
.ec-shelfGrid .ec-shelfGrid__item-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ec-shelfGrid .ec-shelfGrid__item-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bg-list__name {
  height: calc(1.5em * var(--bg-listNameLines));
  margin: 0;
  font-size: 13px; /* 14px だと 60 文字の商品名の一部が 6 行になる（2026-10 に長い順 600 件で確認） */
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bg-listNameLines);
}
/* メーカー名・メーカー品番: 商品名の下に 1 行ずつ。長いものは … で省略（高さは常に 1 行分） */
.bg-list__maker {
  height: 1.5em;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-list__name + .bg-list__maker {
  margin-top: 10px;
}
.bg-list__price {
  margin: 0;
  padding: 10px 0;
  font-weight: bold;
  white-space: nowrap;
}
/* 出荷単位: 選択欄（規格あり）も文字（規格なし）も同じ高さの行 */
.bg-list__unit {
  height: 44px;
  margin-bottom: 8px;
}
/* 規格なしの出荷単位の文字: 行の中で上下中央、長いものは 2 行まで（最長 28 文字） */
.bg-list__unitText {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}
.bg-list__unitText > span {
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bg-list__unit .ec-select {
  margin-bottom: 0;
}
.bg-list__unit select {
  width: 100%;
  margin-bottom: 0;
}
/* ヘッダーの商品検索（Block/search_product.twig）: カテゴリの選択欄は出さず、常に全ての商品が対象。
   キーワード欄を 1 本の丸い枠で横幅いっぱいにする（標準は左にカテゴリ 43%・右にキーワード 57%） */
.ec-headerSearch .ec-headerSearch__keyword {
  float: none;
  width: 100%;
  border-radius: 50px;
}
/* 入力文字の大きさ。標準は 768px 以上で 12px に下げるが、小さくて読みにくいので全幅 16px にする（2026-10-14） */
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  font-size: 16px;
}
/* 品切れのボタン: 文言（ただいま品切れ中です）を左右・上下中央に。
   一覧の列は狭いので左右の余白を小さくし、入らない幅（画面幅 1024px 以下など）では
   「ただいま／品切れ中です」の 2 行に折り返す（折り返し位置は list.twig の <wbr>） */
.bg-list__soldout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* ==========================================================
   ロゴ app/template/default/Block/logo.twig（画像 html/user_data/assets/img/common/logo.png）
   ========================================================== */
.ec-headerTitle .ec-headerTitle__title img.bg-logo {
  width: auto;
  max-width: 100%;
  height: 48px;
  vertical-align: middle;
}

/* ==========================================================
   PC のページ幅と 2 列（画面幅 768px 以上。2026-10-14）
   ページ本体 .ec-layoutRole__contents を標準の最大 1150px → 1200px に広げる。
   左カラム（商品カテゴリ）は 285.5px（狭い画面では 25%）、左カラムとメイン列の間に 20px 空ける。
   1200px のとき 285.5 + 20 + 894.5。メイン列の中身は標準どおり左右に 20px の余白がある。
   --bg-W / --bg-colL / --bg-colGap はヘッダーの位置合わせ（下）でも同じ値を使う
   ========================================================== */
@media only screen and (min-width: 768px) {
  .ec-layoutRole {
    --bg-W: min(100%, 1200px);
    --bg-colL: min(285.5px, calc(var(--bg-W) * 0.25));
    --bg-colGap: 20px;
  }
  .ec-layoutRole .ec-layoutRole__contents {
    max-width: 1200px;
  }
  /* 標準で最大 1130px にしている枠も 1200px にする（トップのタイル・バナー、フッター、カート・会員などの画面。
     左カラムのないページでも、ヘッダーのロゴ・会員ナビと左右の端が揃う） */
  .ec-role,
  .ec-categoryNaviRole,
  .ec-sliderRole,
  .ec-headerRole,
  .ec-headerNaviRole,
  .ec-footerRole .ec-footerRole__inner,
  .ec-searchnavRole,
  .ec-searchnavRole .ec-searchnavRole__infos,
  .ec-shelfRole,
  .ec-productRole,
  .ec-cartRole,
  .ec-cartCompleteRole,
  .ec-orderRole,
  .ec-contactRole,
  .ec-contactConfirmRole,
  .ec-contactCompleteRole,
  .ec-customerRole,
  .ec-forgotRole,
  .ec-registerRole,
  .ec-registerCompleteRole,
  .ec-userEditCompleteRole,
  .ec-withdrawRole {
    max-width: 1200px;
  }
  .ec-layoutRole .ec-layoutRole__left {
    flex: none;
    width: var(--bg-colL);
  }
  .ec-layoutRole .ec-layoutRole__left + .ec-layoutRole__mainWithColumn {
    flex: 1;
    width: auto;
    min-width: 0;
    margin-left: var(--bg-colGap);
  }
  /* 商品詳細: 画像と右の商品名・価格などの間を標準の 16px から 20px 広げる */
  .ec-productRole .ec-productRole__profile {
    margin-left: 36px;
  }
  /* ［カートに入れる］などのボタン: 標準は最小 350px で、狭い画面では右にはみ出して横スクロールが出る。列の幅までにする */
  .ec-productRole .ec-productRole__btn {
    min-width: min(350px, 100%);
  }
}

/* ==========================================================
   PC のヘッダー（画面幅 768px 以上。2026-10-14）
   上段: 右に 会員ナビ・カート（小さめ）
   下段: ロゴ（幅 240px）と 検索欄（最大 640px）。下の 2 列（一覧・詳細の 左カラム／メイン列。上の「PC のページ幅」）に揃える
     ロゴ  … 左カラム（商品カテゴリ）の中央
     検索欄 … メイン列（左右の余白 20px を除いた幅）の中央
   列の基準はページ本体 .ec-layoutRole__contents（最大 1200px・中央寄せ）。
   --bg-W: その幅、--bg-L: その左端（--bg-W・--bg-colL・--bg-colGap は .ec-layoutRole で決めたもの）。% はヘッダーの幅に対して計算される（absolute の子で使う）
   ロゴのブロック（.ec-headerRole）は検索・ナビのブロックの後ろにあるので、ヘッダー内に absolute で重ねる。
   ロゴと検索欄の縦の中心は上から 97px で揃える
   ========================================================== */
@media only screen and (min-width: 768px) {
  .ec-layoutRole__header {
    --bg-L: calc((100% - var(--bg-W)) / 2);
    position: relative;
  }
  .ec-headerNaviRole {
    display: block;
    position: static;
    min-height: 168px;
    padding-top: 0;
  }
  /* 会員ナビ・カート: 右端はメイン列の中身（左右の余白 20px を除いた部分）の右端 */
  .ec-headerNaviRole .ec-headerNaviRole__right {
    position: absolute;
    top: 8px;
    right: calc((100% - var(--bg-W)) / 2 + 20px);
    width: auto;
  }
  .ec-headerNaviRole .ec-headerNav__item {
    font-size: 13px;
  }
  /* 検索欄: メイン列の幅の中で中央（狭い画面ではメイン列の幅まで縮む） */
  .ec-headerNaviRole .ec-headerNaviRole__left {
    position: absolute;
    top: 74px;
    left: calc(var(--bg-L) + var(--bg-colL) + var(--bg-colGap) + 20px);
    width: calc(var(--bg-W) - var(--bg-colL) - var(--bg-colGap) - 40px);
    padding: 0;
  }
  /* 標準は inline-block・上余白 10px。中央に置くため block にする */
  .ec-headerNaviRole .ec-headerNaviRole__search {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .ec-headerNaviRole .ec-headerSearch__keyword input[type=search] {
    height: 46px;
  }
  /* ロゴ: 左カラムの中央。左カラムが狭い画面では列の幅 − 16px まで縮める */
  .ec-layoutRole__header > .ec-headerRole {
    --bg-logoW: min(240px, calc(var(--bg-colL) - 16px));
    position: absolute;
    top: 97px;
    left: calc(var(--bg-L) + var(--bg-colL) / 2 - var(--bg-logoW) / 2);
    width: var(--bg-logoW);
    padding: 0;
    transform: translateY(-50%);
  }
  .ec-headerTitle .ec-headerTitle__title a {
    display: block;
    margin: 0;
  }
  .ec-headerTitle .ec-headerTitle__title img.bg-logo {
    width: 100%;
    height: auto;
  }
  .bg-catNav--top {
    margin-top: 4px;
  }
}

/* ==========================================================
   商品詳細のパンくず app/template/default/Product/detail.twig（商品一覧と同じ見た目。下に一覧と同じ区切り線）
   ========================================================== */
.bg-detailTopicpath {
  margin-bottom: 16px;
}
.bg-detailTopicpath .ec-searchnavRole__topicpath:last-child {
  border-bottom: 1px solid #ccc;
}
/* 商品詳細・商品一覧（.bg-listTopicpath）共通: 1 行目の高さを、左カラムの見出し「商品カテゴリ」（高さ 34px、上に枠線 1px）の文字の高さに揃える。
   標準の上余白 30px を (34 - 22.4) / 2 + 1 ≒ 7px に。行が複数あるときは 2 行目以降の上余白は 0 */
.bg-detailTopicpath .ec-topicpath,
.bg-listTopicpath .ec-topicpath {
  padding-top: 7px;
  padding-bottom: 7px;
}
.bg-detailTopicpath .ec-searchnavRole__topicpath + .ec-searchnavRole__topicpath .ec-topicpath {
  padding-top: 0;
}

/* 商品詳細の商品名: 画像と右の列（価格など）の上に横幅いっぱい（detail.twig の bg-detailTitle） */
.bg-detailTitle {
  margin-bottom: 16px;
}

/* 商品詳細説明: 画像・商品情報の下に横幅いっぱい（detail.twig の bg-detailDescription） */
.bg-detailDescription {
  clear: both;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ccc;
}

/* 商品詳細説明の表（2.13 から移した HTML: table.tbl_spec_01 / td.tb_spec_01〜05）
   色は 2.13 の table.min.css と同じ。4 系では幅に余裕があるので、表は横幅いっぱい・項目名の列を広げ・余白を増やした */
.bg-detailDescription table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  text-align: left;
}
.bg-detailDescription table td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  line-height: 1.6;
  vertical-align: top;
}
.bg-detailDescription .tb_spec_01 {   /* 見出し行（商品の特徴・商品仕様） */
  background-color: #ededed;
}
.bg-detailDescription .tb_spec_03 {   /* 項目名の列。2.13 は 80px（約 6 文字）→ 10 文字分。98% の項目名が 1 行に収まる */
  width: calc(10em + 24px); /* 文字 10 文字分＋左右の余白（EC-CUBE は余白込みで幅を数える） */
  background-color: #ededed;
}
.bg-detailDescription .tb_spec_04 {   /* 項目の値 */
  word-break: break-all;
}
.bg-detailDescription .tb_spec_05 {   /* 強調する行（2.13 の定義。今のデータでは使っていない） */
  background-color: #ffd0e0;
}
/* スマホ（767px 以下）: 項目名 3 : 説明 7 くらいにし、余白を控えめにする */
@media only screen and (max-width: 767px) {
  .bg-detailDescription table td {
    padding: 5px 7px;
    line-height: 1.5;
  }
  .bg-detailDescription .tb_spec_03 {
    width: 30%;
  }
}

/* ==========================================================
   スマホのヘッダー（画面幅 767px 以下）
   標準はスマホで検索欄を出さず、メニュー（左上に固定の丸いボタン）の中にだけ置いている。
   ここでは ヘッダーのアイコン → ロゴ → ［カテゴリ］＋検索欄 の順に並べ、検索欄を常に見えるようにする。
   メニューの中の検索欄は重複するので隠す。
   ========================================================== */
@media only screen and (max-width: 767px) {
  .ec-layoutRole__header {
    display: flex;
    flex-direction: column;
  }
  .ec-layoutRole__header > * {
    order: 5;
  }
  /* ヘッダーの行（左: 検索とメニューボタン、右: アイコン）をほどいて、ロゴの前後に並べ替える */
  .ec-layoutRole__header > .ec-headerNaviRole {
    display: contents;
  }
  .ec-headerNaviRole > .ec-headerNaviRole__right {
    order: 1;
    width: 100%;
    padding: 15px 20px 0;
    box-sizing: border-box;
  }
  .ec-layoutRole__header > .ec-headerRole {
    order: 2;
  }
  .ec-headerNaviRole > .ec-headerNaviRole__left {
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
  }
  .ec-headerNaviRole .ec-headerNaviRole__search {
    display: block;
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  /* メニューボタン: 左上の固定の丸から、検索欄の左の［カテゴリ］ボタンにする（押すと標準どおりメニューが開く） */
  .ec-headerNaviRole__left > .ec-headerRole__navSP {
    order: -1;
  }
  .ec-headerNaviRole .ec-headerNavSP {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 38px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
  }
  /* 標準はアイコンを丸の中央に absolute で置いている。ボタンの中に戻す */
  .ec-headerNaviRole .ec-headerNavSP .fa-bars {
    position: static;
    transform: none;
  }
  .ec-headerNaviRole .ec-headerNavSP::after {
    content: "カテゴリ";
    margin-top: 3px;
    font-size: 10px;
  }
  /* 検索欄: キーワード欄を［カテゴリ］ボタンの右に横幅いっぱい */
  .ec-headerNaviRole__search .ec-headerSearch__keyword input[type=search] {
    padding: 0.5em 34px 0.5em 0.6em;
  }
  .ec-headerNaviRole__search .ec-headerSearch__keywordBtn {
    right: 2px;
  }
  .ec-drawerRole > .ec-headerSearch {
    display: none;
  }
}

/* ==========================================================
   カテゴリナビ（スマホのメニュー） app/template/default/Block/category_nav_sp.twig
   カテゴリ名で移動、右の［＋］（JS が付ける .bg-spNav__toggle）で下の分類を開く。
   今いるカテゴリまでの道筋は色付き・開いた状態（is-current is-open）。HTML を軽くするため li / ul にクラスは付けない
   ========================================================== */
.bg-spNav,
.bg-spNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bg-spNav {
  background: #fff;
}
.bg-spNav li {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #e3e3e3;
}
.bg-spNav > li:first-child {
  border-top: 0;
}
.bg-spNav li > a {
  flex: 1;
  min-width: 0;
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #2e3233;
  text-decoration: none;
}
/* 階層ごとに字下げ */
.bg-spNav ul > li > a { padding-left: 22px; }
.bg-spNav ul ul > li > a { padding-left: 34px; }
.bg-spNav ul ul ul > li > a { padding-left: 46px; }
.bg-spNav ul ul ul ul > li > a { padding-left: 58px; }
.bg-spNav__toggle {
  flex: none;
  width: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid #eee;
  background: transparent;
  color: #888;
  cursor: pointer;
}
.bg-spNav__toggle::before {
  content: "+";
  font-size: 20px;
  line-height: 1;
}
.bg-spNav li.is-open > .bg-spNav__toggle::before {
  content: "\2212";
}
.bg-spNav li > ul {
  display: none;
  width: 100%;
  background: #f7f7f7;
}
.bg-spNav li.is-open > ul {
  display: block;
}
/* 今いるカテゴリまでの道筋: PC の左カラムでマウスを乗せたときと同じ色 */
.bg-spNav li.is-current > a {
  background-color: #eef3f9;
  color: #1a4f8b;
  font-weight: bold;
}

/* ==========================================================
   ご利用案内（2026-10-14。2026-10-22 に項目ごとのページに分けた）
   入口 app/template/default/Help/guide.twig（URL /guide）、
   各項目 app/template/user_data/guide_order・guide_delivery・guide_invoice・guide_payment・guide_return.twig（URL /user_data/guide_…）
   上のタブは下の「ご利用案内・会社案内のタブ」
   ========================================================== */
.bg-guide {
  font-size: 14px;
  line-height: 1.8;
}
/* 入口（/guide）の各ページへのリンク。PC は 2 列 */
.bg-guide__menu {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.bg-guide__menu a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-left: 5px solid #1a4f8b;
  border-radius: 4px;
  color: #2e3233;
  text-decoration: none;
}
.bg-guide__menu a:hover {
  background: #eef3f9;
}
.bg-guide__menuName {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #1a4f8b;
}
.bg-guide__menuTopics {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #666;
}
@media only screen and (min-width: 768px) {
  .bg-guide__menu {
    grid-template-columns: 1fr 1fr;
  }
}
/* 各ページの本文（小見出し dt と説明 dd） */
.bg-guide dl {
  margin: 0 0 20px;
}
.bg-guide dt {
  margin-bottom: 4px;
  font-weight: bold;
  color: #1a4f8b;
}
.bg-guide dd {
  margin: 0 0 4px 1em;
}
.bg-guide dt.bg-guide__notice {
  color: #2e3233;
}
.bg-guide__red {
  color: #de5d50;
}
/* 表: 当日配達エリア（guide_delivery）・払込金融機関（guide_payment）。2026-10-22 に 2.13 の色（ベージュ・灰色）から基本色に変えた。
   外枠は角丸の細い線、項目名の列は薄い青地に青文字、行の区切りは細い線。表の見出し（caption）は青地に白 */
.bg-guide__table {
  width: 100%;
  margin: 8px 0 12px;
  border: 1px solid #c5d3e3;
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}
.bg-guide__table caption {
  caption-side: top;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  background: #1a4f8b;
  color: #fff;
  font-weight: bold;
  text-align: left;
}
.bg-guide__table:has(caption) {
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.bg-guide__table th,
.bg-guide__table td {
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
}
.bg-guide__table tr + tr > th,
.bg-guide__table tr + tr > td {
  border-top: 1px solid #e3eaf2;
}
.bg-guide__table th {
  width: 9em;
  border-right: 1px solid #e3eaf2;
  background: #f3f6fa;
  color: #1a4f8b;
  font-weight: bold;
  white-space: nowrap;
}
/* 名義人の行: 右寄せ、少し小さく */
.bg-guide__table td.bg-guide__holder {
  background: #f8fafc;
  font-size: 13px;
  text-align: right;
}
/* 払込金融機関の 2 つの表（銀行・郵便局）: PC は横に並べる */
.bg-guide__tables {
  display: grid;
  gap: 4px 16px;
  align-items: start;
}
@media only screen and (min-width: 768px) {
  .bg-guide__tables {
    grid-template-columns: 1fr 1fr;
  }
}
/* ご返品をお受けできない商品（guide_return）: 赤い × を付けた札を並べる。PC は 2 列 */
.bg-guide__list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.bg-guide__list li {
  position: relative;
  padding: 7px 12px 7px 34px;
  border: 1px solid #e3eaf2;
  border-radius: 6px;
  background: #f8fafc;
  line-height: 1.6;
}
.bg-guide__list li::before {
  content: "\00d7";
  position: absolute;
  left: 12px;
  top: 7px;
  color: #de5d50;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .bg-guide__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================
   ご利用案内・会社案内のタブ app/template/default/Block/guide_company_tabs.twig（2026-10-22）
   ご利用案内・会社案内・お問い合わせの各ページで、本文の上に出す（レイアウト「ご利用案内・会社案内用レイアウト」）。
   「ご利用案内」「会社案内」の 2 行。スマホは 見出し の下にタブ、PC は 見出し（左）の右にタブ。タブは入らなければ折り返す。
   今いるページのタブは青地に白（is-current）
   ========================================================== */
.bg-guideTabs {
  margin: 0 0 8px;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
.bg-guideTabs__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bg-guideTabs__group + .bg-guideTabs__group {
  margin-top: 10px;
}
.bg-guideTabs__head {
  flex: none;
  font-weight: bold;
  color: #1a4f8b;
  text-decoration: none;
}
a.bg-guideTabs__head:hover,
.bg-guideTabs__head.is-current {
  color: #1a4f8b;
  text-decoration: underline;
}
.bg-guideTabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg-guideTabs__tab {
  display: block;
  padding: 5px 12px;
  border: 1px solid #c5d3e3;
  border-radius: 4px;
  background: #fff;
  color: #1a4f8b;
  line-height: 1.5;
  text-decoration: none;
}
.bg-guideTabs__tab:hover {
  background: #eef3f9;
  color: #1a4f8b;
  text-decoration: none;
}
.bg-guideTabs__tab.is-current {
  border-color: #1a4f8b;
  background: #1a4f8b;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .bg-guideTabs__group {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  .bg-guideTabs__head {
    width: 6em;
    padding-top: 6px;
  }
}

/* ==========================================================
   フッター app/template/default/Block/footer.twig（2026-10-14）
   2.13 と同じく「ご利用案内」「会社案内」の 2 つにまとめたリンク。PC は横に 2 列、スマホは縦に並べる
   ========================================================== */
/* 背景: 標準の黒 → 左カラムの「商品カテゴリ」見出し（.bg-catNav__head）と同じ色 */
.ec-footerRole {
  border-top: none;
  background: #1a4f8b;
}
.bg-footNav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 16px 0;
  color: #fff;
  font-size: 14px;
}
.bg-footNav__head {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  font-weight: bold;
}
.bg-footNav a {
  color: inherit;
  text-decoration: none;
}
.bg-footNav a:hover {
  opacity: .8;
  text-decoration: underline;
}
.bg-footNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg-footNav li {
  padding: 4px 0;
}
.bg-footNav li a::before {
  content: "\203A\00a0";
  color: rgba(255, 255, 255, .6);
}
@media only screen and (min-width: 768px) {
  .bg-footNav {
    flex-direction: row;
    gap: 80px;
    padding: 32px 0 0;
  }
  .bg-footNav__group {
    min-width: 220px;
  }
  .bg-footNav__calendar {
    margin-left: auto;
  }
}

/* ==========================================================
   営業日カレンダー app/template/default/Block/calendar.twig（フッターの右。2026-10-14）
   赤 = 休業日（日曜・定休日カレンダーに登録した日）。フッターの青の上に白い枠で置く
   ========================================================== */
.bg-cal {
  max-width: 520px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #fff;
  color: #2e3233;
  font-size: 13px;
}
.bg-cal__head {
  margin: 0 0 8px;
  font-weight: bold;
  color: #1a4f8b;
}
.bg-cal__months {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.bg-cal__month {
  flex: 1 1 200px;
  border-collapse: collapse;
}
.bg-cal__month caption {
  caption-side: top;
  padding: 0 0 4px;
  color: inherit;
  font-weight: bold;
  text-align: left;
}
.bg-cal__month th,
.bg-cal__month td {
  width: 14.28%;
  padding: 3px 0;
  text-align: center;
  line-height: 1.5;
}
.bg-cal__month th {
  background: #f3f6fa;
  font-weight: normal;
}
.bg-cal__month .is-closed,
.bg-cal__red {
  color: #de1f1f;
}
.bg-cal__month td.is-closed {
  background: #fdecec;
}
/* 今日: 数字を丸で囲む */
.bg-cal__month td > span {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
}
.bg-cal__month td.is-today > span {
  font-weight: bold;
  box-shadow: inset 0 0 0 2px #1a4f8b;
}
.bg-cal__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

/* ==========================================================
   当サイトについて（Help/about.twig）・特定商取引法に基づく表記（Help/tradelaw.twig。中身は管理画面の特定商取引法設定）
   標準は 1 行用の行間（スマホ 2.5・PC 3）で、複数行の説明が間延びするので詰める（2026-10-14）
   ========================================================== */
#page_help_about .ec-borderedDefs dl,
#page_help_tradelaw .ec-borderedDefs dl {
  padding: 0;
}
#page_help_about .ec-borderedDefs dt,
#page_help_about .ec-borderedDefs dd,
#page_help_tradelaw .ec-borderedDefs dt,
#page_help_tradelaw .ec-borderedDefs dd {
  padding: 6px 0;
  line-height: 1.8;
}
@media only screen and (min-width: 768px) {
  #page_help_about .ec-borderedDefs dt,
  #page_help_about .ec-borderedDefs dd,
  #page_help_tradelaw .ec-borderedDefs dt,
  #page_help_tradelaw .ec-borderedDefs dd {
    padding: 14px 0;
  }
}

/* ==========================================================
   ご挨拶 app/template/user_data/company_greeting.twig（URL /user_data/company_greeting。2026-10-14。10-22 に greeting から改名）
   ========================================================== */
.bg-greeting {
  line-height: 1.9;
}
.bg-greeting .bg-greeting__lead {
  font-weight: bold;
}
.bg-greeting .bg-greeting__sign {
  margin-top: 24px;
  text-align: right;
}

/* ============================================================
   パスワードの決まり（会員登録・会員情報編集・パスワード再設定）
   入力欄の上に常に出す説明（文言は app/Customize/Resource/locale/messages.ja.yaml の bg.password_note）
   ============================================================ */
.bg-pwNote {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

/* ============================================================
   合計欄（ご注文手続き・ご注文内容確認・購入履歴）
   右の枠が狭いので、金額と「税込」が縦に割れないように 1 かたまりにする（テンプレートの .bg-totalAmount）。
   税率別の行（8%対象 ￥1,221（内消費税 ￥90））は 1 行に収める。文言は messages.ja.yaml の common.tax_rate_target
   ============================================================ */
.ec-totalBox .ec-totalBox__total,
.ec-totalBox .ec-totalBox__paymentTotal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 8px;
}
.ec-totalBox .bg-totalAmount {
  margin-left: auto;
  white-space: nowrap;
}
.ec-totalBox .bg-totalAmount .ec-totalBox__price {
  margin-left: 0;
}
.ec-totalBox .ec-totalBox__taxLabel {
  margin-left: 4px;
}
.ec-totalBox .ec-totalBox__taxRate {
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px; /* 標準はスマホで 10px と小さい */
  white-space: nowrap;
}
.ec-totalBox .ec-totalBox__taxRate dt::before,
.ec-totalBox .ec-totalBox__taxRate dd::after {
  content: none;
}

/* ============================================================
   お支払方法の選択（ご注文手続き）
   標準は丸ボタンと名前が別の行に割れる（名前が長い口座名）。丸ボタンの右に名前を並べ、長い名前は右側で折り返す
   ============================================================ */
.ec-orderPayment .ec-radio > div {
  display: flex !important; /* 標準のテンプレートが style="display: block;" を直書きしている */
  align-items: flex-start;
  margin-bottom: 12px;
}
.ec-orderPayment .ec-radio > div input[type=radio] {
  flex: none;
  margin: 0.35em 10px 0 0;
}
.ec-orderPayment .ec-radio > div label {
  flex: 1;
  margin-right: 0;
  cursor: pointer;
}

/* ============================================================
   ご注文手続きの「お客様情報」の郵便番号
   標準は .ec-zipInput span（入力欄用）の余白が付いて「〒 1580098」と空く。お届け先・確認画面と同じ「〒1580098」にする
   ============================================================ */
.ec-orderAccount__account .ec-zipInput span {
  margin-left: 0;
  padding: 0;
}

/* ============================================================
   ご注文手続きの「お届け日」の下の注意書き
   .bg-deliveryFeeNote: 日付指定は無料・時間指定は有料の案内（灰色）
   .bg-deliveryNote: 入金確認後に出荷する場合があるお断り（本文と同じ色。赤は支払い方法のエラーと紛れるのでやめた）
   ============================================================ */
.bg-deliveryFeeNote {
  margin: 4px 0 8px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}
.bg-deliveryNote {
  margin: 4px 0 16px;
  font-size: 14px;
  line-height: 1.6;
}
.bg-deliveryNote p {
  margin: 0;
}

/* ============================================================
   商品詳細・一覧の数量欄の幅（2026-10-29）
   元の style.css は width: auto（max-width 100px）。Chrome・Safari は数字の欄の幅を max の桁数で決めるので、
   出荷単位の範囲（Product/bg_quantity_range.twig）で max が付くと（「2から4箱」なら 4）欄が 1 桁分に縮む。
   max の無い「5箱以上」と同じ 100px に固定する
   ============================================================ */
.ec-numberInput input[type=number] {
  width: 100px;
}

/* 商品詳細: 値引率（Product/detail.twig） */
.bg-priceOff {
  color: #de5d50;
  font-weight: bold;
}
.bg-priceOff:empty {
  display: none;
}

/* 商品一覧: タグ。行の高さを変えないよう画像に重ねる（Product/list.twig） */
.ec-shelfGrid__item-image {
  position: relative;
}
.bg-list__tags {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.bg-list__tag {
  padding: 1px 4px;
  border: 1px solid #de5d50;
  background: #fff;
  color: #de5d50;
  font-size: 11px;
  line-height: 1.4;
}

/* 商品一覧: 子カテゴリのリンク（Product/list.twig） */
.bg-childCategories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.bg-childCategories a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 4px;
  border: 1px solid #ddd;
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.bg-childCategories img {
  flex: none;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* カート: すべて削除（Cart/index.twig） */
.bg-cartClear {
  margin-bottom: 8px;
  text-align: right;
}

/* ご注文手続き: 領収書の案内（Shopping/index.twig） */
.bg-receiptNote {
  margin-bottom: 8px;
  font-size: 13px;
}
.bg-receiptNote a {
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  /* カートの表（左右に 10% の余白）の右端に揃える */
  .bg-cartClear {
    margin-right: calc(10% + 16px);
  }
}