@charset "UTF-8";
/* ============================================================
   Bitter Cats - customize CSS
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Lato:wght@300;400&family=Great+Vibes&display=swap');

/* ------------------------------------------------------------
   0. CSS変数
   ------------------------------------------------------------ */
:root {
  --bc-primary:      #3a7bd5;
  --bc-primary-dark: #2c5fa8;
  --bc-text:         #1a1a1a;
  --bc-bg:           #fafaf8;
  --bc-border:       #e0e0d7;
  --bc-neutral:      #f5f4f0;
  --bc-footer-bg:    #fff;
  --bc-footer-text:  #444;
  --font-main:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-accent: "Lato", sans-serif;
}

/* ------------------------------------------------------------
   1. ベース
   ------------------------------------------------------------ */
html, body {
  overflow-x: hidden;
}
body {
  font-family: var(--font-main);
  background-color: var(--bc-bg);
  color: var(--bc-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.03em;
}
a { color: var(--bc-text); transition: opacity 0.2s ease; }
a:hover { opacity: 0.65; text-decoration: none; }

/* ------------------------------------------------------------
   2. ヘッダー - デモサイト風 2行レイアウト
      行1: アナウンスバー（全幅・罫線、absolute）
      行2: [ロゴ左] ─ [ナビ右] [アイコン右]
   ------------------------------------------------------------ */

/* レイアウトルートを position:relative に（absoluteヘッダーの基準） */
.ec-layoutRole { position: relative; }

/* header 全体: 1行flex + padding-top でアナウンスバー分を確保 */
header.ec-layoutRole__header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: auto;
  min-height: 114px;
  padding-top: 54px;
  padding-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  z-index: 500;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* アナウンスバー: 絶対配置で最上部に（左右はロゴと同じ余白） */
header.ec-layoutRole__header::before {
  content: '送料：クリックポストが選択可能な商品なら全国一律185円（税込）';
  position: absolute;
  top: 0;
  left: 56px;
  right: 56px;
  height: auto;
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid #fff;
}

/* トップページ以外: 最初から固定ヘッダー（コンテンツに被らない） */
body:not(.front_page) header.ec-layoutRole__header {
  position: fixed;
  background: rgba(252, 252, 250, 0.97);
  border-bottom: 1px solid rgba(224, 224, 215, 0.5);
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  padding-top: 0;
  min-height: 64px;
  align-items: center;
}
body:not(.front_page) header.ec-layoutRole__header::before {
  display: none;
}
/* テキスト・アイコン色: トップページ以外は暗色 */
body:not(.front_page) header.ec-layoutRole__header .ec-headerTitle a,
body:not(.front_page) header.ec-layoutRole__header h1 a,
body:not(.front_page) header.ec-layoutRole__header .ec-itemNav__nav > li > a,
body:not(.front_page) header.ec-layoutRole__header .ec-headerNav__item a,
body:not(.front_page) header.ec-layoutRole__header .ec-headerNav__itemIcon,
body:not(.front_page) header.ec-layoutRole__header .ec-cartNavi,
body:not(.front_page) header.ec-layoutRole__header .ec-cartNavi__icon {
  color: #525263 !important;
}
body:not(.front_page) header.ec-layoutRole__header .ec-headerNaviRole__right {
  border-color: var(--bc-border) !important;
}
/* トップページ以外: コンテンツ上部にヘッダー分の余白 */
body:not(.front_page) .ec-layoutRole__contents {
  padding-top: 64px;
}

/* スクロール後: 半透明固定ヘッダー */
header.ec-layoutRole__header.is-fixed {
  position: fixed;
  background: rgba(252, 252, 250, 0.93);
  border-bottom: 1px solid rgba(224, 224, 215, 0.5);
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
header.ec-layoutRole__header.is-fixed::before {
  display: none;
}
header.ec-layoutRole__header.is-fixed {
  padding-top: 0;
  min-height: 64px;
  align-items: center;
}

/* テキスト・アイコン色: 通常（白文字） */
header.ec-layoutRole__header .ec-headerTitle a,
header.ec-layoutRole__header h1 a,
header.ec-layoutRole__header .ec-itemNav__nav > li > a,
header.ec-layoutRole__header .ec-headerNav__item a,
header.ec-layoutRole__header .ec-headerNav__itemIcon,
header.ec-layoutRole__header .ec-cartNavi,
header.ec-layoutRole__header .ec-cartNavi__icon {
  color: #fff !important;
}
/* アイコン枠線: 透明ヘッダー時は白線 */
header.ec-layoutRole__header .ec-headerNaviRole__right {
  border-color: rgba(255,255,255,0.7) !important;
}
/* スクロール後（暗文字） */
header.ec-layoutRole__header.is-fixed .ec-headerTitle a,
header.ec-layoutRole__header.is-fixed h1 a,
header.ec-layoutRole__header.is-fixed .ec-itemNav__nav > li > a,
header.ec-layoutRole__header.is-fixed .ec-headerNav__item a,
header.ec-layoutRole__header.is-fixed .ec-headerNav__itemIcon,
header.ec-layoutRole__header.is-fixed .ec-cartNavi,
header.ec-layoutRole__header.is-fixed .ec-cartNavi__icon {
  color: #525263 !important;
}
/* スクロール後: 枠線を通常色に */
header.ec-layoutRole__header.is-fixed .ec-headerNaviRole__right {
  border-color: var(--bc-border) !important;
}

/* --- ロゴ: 左端、margin-right:auto で右側を押し出す --- */
.ec-headerRole {
  order: 1;
  flex: 0 0 auto;
  width: auto;
  padding: 0 28px 0 56px !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.ec-headerRole__title,
.ec-headerTitle,
.ec-headerTitle__title {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.ec-headerTitle__title h1,
.ec-headerTitle__title h1 a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: block !important;
}
.ec-headerTitle__logo a {
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

/* --- カテゴリナビ: アイコンの左（order:2、幅auto） --- */
.ec-categoryNaviRole {
  order: 2;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent !important;
}
/* モバイルナビ（PC表示では非表示） */
@media (min-width: 768px) {
  .ec-headerNavSP { display: none !important; }
}

.ec-itemNav { height: 100%; }
.ec-itemNav__nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  gap: 0;
  background: transparent !important;
}
.ec-itemNav__nav > li {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.ec-itemNav__nav > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bc-text);
  background: transparent !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.ec-itemNav__nav > li > a:hover { color: var(--bc-primary); opacity: 1; }

/* サブメニュー: ホバーで表示 */
.ec-itemNav__nav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  min-width: 160px;
  z-index: 200;
  padding: 8px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  list-style: none;
}
.ec-itemNav__nav > li:hover > ul { display: block; }
.ec-itemNav__nav ul li a {
  display: block;
  padding: 9px 16px;
  font-size: 12px;
  color: var(--bc-text);
  white-space: nowrap;
  transition: background 0.15s;
}
.ec-itemNav__nav ul li a:hover {
  background: var(--bc-neutral);
  color: var(--bc-primary);
  opacity: 1;
}

/* --- 検索＋ユーザーナビ＋カート: 右端 (order:3) --- */
.ec-headerNaviRole {
  order: 3;
  flex: 0 0 auto;
  width: auto;
  padding: 0 30px 0 0;
  background: transparent;
  display: flex;
  align-items: center;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 検索: アイコンボタンのみ表示（テキスト入力欄は非表示） */
.ec-headerNaviRole__left {
  display: flex !important;
  align-items: center;
  order: 3;
}
.ec-headerNaviRole__left .ec-headerSearch { display: none !important; }
.ec-headerNaviRole__left .ec-headerSearch__category { display: none !important; }
/* 検索ボタン（虫眼鏡）のみ表示 */
.ec-headerNaviRole__left form > * { display: none !important; }
.ec-headerNaviRole__left form button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--bc-text);
  font-size: 17px;
}

.ec-headerNaviRole__right {
  display: flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  flex: 0 0 auto;
  order: 4;
}

/* ユーザーナビ: アイコンのみ表示 */
.ec-headerNav {
  display: flex;
  align-items: center;
}
.ec-headerNav__item a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--bc-text);
}
/* ログイン(錠前)アイコンを非表示 */
.ec-headerNav__item a[href*="mypage/login"] { display: none !important; }
.ec-headerNav__itemLink { display: none !important; }
/* アイコンを輪郭スタイル(regular)に */
.ec-headerNav__itemIcon {
  font-size: 17px;
  color: var(--bc-text);
  font-weight: 400 !important;
}

/* カート */
.ec-cartNavi {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  background: transparent !important;
}
.ec-cartNavi__icon {
  font-size: 20px;
  color: var(--bc-text);
  position: relative;
  font-weight: 900 !important;
}
.ec-cartNavi__label { display: none; }

/* カートナビWrap: ポップアップの基準 */
.ec-cartNaviWrap {
  position: relative;
}
/* カートポップアップ: z-index補強 + shadow */
.ec-cartNaviNull,
.ec-cartNaviIsset {
  z-index: 600 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: 4px !important;
}

.ec-cartNavi__badge {
  background: #3d8b6e;
  color: #fff;
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  line-height: 17px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
}

/* ------------------------------------------------------------
   3. メインビジュアル（フェード＋ズームアニメーション）
   ------------------------------------------------------------ */

/* フルワイド breakout */
.bc-mainVisual {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  height: 100vh;
  overflow: hidden;
}

/* slick全要素を100vh高さに */
.mainVisualSlide,
.mainVisualSlide .slick-list,
.mainVisualSlide .slick-track,
.mainVisualSlide .slick-slide,
.mainVisualSlide .slick-slide > div {
  height: 100%;
}

/* スライド内ラッパー */
.slideInner {
  overflow: hidden;
  height: 100%;
}

.slideInner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ズームアウトアニメーション（Ken Burns効果） */
@keyframes zoomDown {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.mainVisualSlide .add-animation {
  animation: zoomDown 10s linear 0s normal both;
}

/* ドット */
.bc-mainVisual .slick-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
.bc-mainVisual .slick-dots li button:before { color: #fff; opacity: 0.6; font-size: 10px; }
.bc-mainVisual .slick-dots li.slick-active button:before { opacity: 1; color: #fff; }

/* Scroll down テキスト（右下縦書き） */
.bc-scrollDown {
  position: absolute;
  right: 80px !important;
  bottom: 68px !important;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 0.2em;
  font-family: var(--font-accent);
  font-weight: 500 !important;
  z-index: 10;
  margin: 0;
  pointer-events: none;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bc-scrollDown::after {
  display: none !important;
}

/* ヒーロー左下ニュースバー */
.bc-heroNews {
  position: absolute;
  bottom: 0;
  left: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  z-index: 10;
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.bc-heroNews__badge {
  background: #fff;
  color: #1a1a1a;
  border: none;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.bc-heroNews__date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  white-space: nowrap;
}
.bc-heroNews__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}

/* ------------------------------------------------------------
   3-2. トピックティッカー（左流れカルーセル）
   ------------------------------------------------------------ */
.bc-topicWrap {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.topicSlide .slick-list {
  padding: 0 50px !important;
}

.topicSlide .slick-track {
  display: flex;
  align-items: stretch;
}

.topicSlide img {
  height: 268px;
  width: auto;
  display: block;
  object-fit: cover;
}

/* ------------------------------------------------------------
   4. 共通ラッパー
   ------------------------------------------------------------ */
.ec-role {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   5. セクション見出し
   ------------------------------------------------------------ */
.ec-secHeading {
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bc-border);
}
.ec-secHeading__en {
  display: block !important;
  font-family: var(--font-accent);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  color: var(--bc-primary) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.ec-secHeading__line { display: none !important; }
.ec-secHeading__ja {
  display: block !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--bc-text) !important;
  line-height: 1.3 !important;
}

/* tandem（見出し＋ボタン横並び） */
.ec-secHeading--tandem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bc-border);
}
.ec-secHeading--tandem .ec-secHeading__en { margin-bottom: 0; flex-basis: 100%; order: 1; }
.ec-secHeading--tandem .ec-secHeading__ja { order: 2; }
.ec-secHeading--tandem .ec-inlineBtn--top { order: 3; }

/* ------------------------------------------------------------
   6. ボタン（TOPページ）
   ------------------------------------------------------------ */
.ec-blockBtn--top,
.ec-inlineBtn--top {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  background: var(--bc-primary);
  color: #fff !important;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid var(--bc-primary);
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.ec-blockBtn--top:hover,
.ec-inlineBtn--top:hover {
  background: #fff;
  color: var(--bc-primary) !important;
  opacity: 1;
}

/* ------------------------------------------------------------
   7. アイキャッチ（紹介セクション）
   ------------------------------------------------------------ */
.ec-eyecatchRole {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 64px 0;
}
.ec-eyecatchRole__image { flex: 1; overflow: hidden; }
.ec-eyecatchRole__image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.ec-eyecatchRole__intro { flex: 1; }
.ec-eyecatchRole__introEnTitle {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ec-eyecatchRole__introTitle {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.65;
  margin-bottom: 20px;
  color: var(--bc-text);
}
.ec-eyecatchRole__introDescription {
  font-size: 13px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

/* ------------------------------------------------------------
   8. トピック（2カラム）
   ------------------------------------------------------------ */
.ec-topicRole { padding: 64px 0; background: var(--bc-neutral); }
.ec-topicRole__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ec-topicRole__listItem { overflow: hidden; }
.ec-topicRole__listItem a { display: block; }
.ec-topicRole__listItem img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ec-topicRole__listItem a:hover img { transform: scale(1.04); opacity: 1; }
.ec-topicRole__listItemTitle { font-size: 13px; padding: 12px 0 0; line-height: 1.7; }

/* ------------------------------------------------------------
   9. 新着商品（見出し全幅 ＋ 商品グリッド）
   ------------------------------------------------------------ */
.ec-newItemRole { padding: 64px 0; }

.ec-newItemRole__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* 1つ目のアイテム（見出し）を全幅に */
.ec-newItemRole__listItem:first-child { width: 100%; }

/* 2つ目以降（商品カード）を均等幅に */
.ec-newItemRole__listItem:not(:first-child) {
  flex: 1 1 calc(33% - 20px);
  max-width: calc(33% - 20px);
}
.ec-newItemRole__listItem a {
  display: block;
  text-decoration: none;
  color: var(--bc-text);
}
.ec-newItemRole__listItem img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--bc-neutral);
  margin-bottom: 10px;
  transition: transform 0.35s ease;
}
.ec-newItemRole__listItem a:hover img { transform: scale(1.04); opacity: 1; }
.ec-newItemRole__listItemTitle { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.ec-newItemRole__listItemPrice {
  font-family: var(--font-accent);
  font-size: 12px;
  color: #666;
  text-align: right;
}

/* ------------------------------------------------------------
   10. カテゴリ（スライダー）
   ------------------------------------------------------------ */
.ec-categoryRole { padding: 64px 0; background: #fff !important; }

/* カテゴリスライダー: 余白・スライド設定は index.twig で管理。
   ここでは基本スタイルのみ保持し、index.twig の !important と競合しない */
.ec-categoryRole__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 90%;
  margin: 0 auto;
}

.ec-categoryRole__listItem { overflow: hidden; }
.ec-categoryRole__listItem a { display: block; }
.ec-categoryRole__listItem img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ec-categoryRole__listItem a:hover img { transform: scale(1.04); opacity: 1; }

/* カテゴリ画像オーバーレイ（デモサイト .listItem__inner 相当） */
.listItem__inner {
  position: relative;
  overflow: hidden;
  display: block;
}
.listItem__inner img {
  display: block;
  width: 480px;
  height: 268px;
  object-fit: cover;
  transition: transform 0.35s ease;
}
@media (max-width: 767px) {
  .listItem__inner img { width: 240px; height: 180px; }
}
.listItem__inner:hover img { transform: scale(1.04); }
.listItem__innerTitle {
  display: none !important;
}
.listItem__innerTitle .name {
  color: #fff;
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: center;
  display: block;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ------------------------------------------------------------
   11. ニュース
   ------------------------------------------------------------ */
.ec-newsRole { padding: 64px 0; }
.ec-newsRole__news {
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  overflow: hidden;
}
.ec-newsRole__newsItem {
  border-bottom: 1px solid var(--bc-border);
  transition: background 0.2s;
}
.ec-newsRole__newsItem:last-child { border-bottom: none; }
.ec-newsRole__newsItem:hover { background: var(--bc-neutral); }
.ec-newsRole__newsDate { font-family: var(--font-accent); font-size: 12px; color: #888; }
.ec-newsRole__newsHeading { font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------
   12. 商品一覧ページ
   ------------------------------------------------------------ */
.ec-pageHeader {
  background: var(--bc-neutral);
  padding: 40px 24px;
  border-bottom: 1px solid var(--bc-border);
}
.ec-pageHeader h1 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
}
.ec-topicPath { background: #fff; border-bottom: 1px solid var(--bc-border); padding: 10px 24px; }
.ec-topicPath__item, .ec-topicPath__divider { font-size: 12px; color: #888; }
.ec-topicPath__item a { color: #888; }

/* 商品グリッド画像を正方形に */
.ec-shelfGrid__item .ec-shelfGrid__item-image { aspect-ratio: 1; overflow: hidden; background: var(--bc-neutral); }
.ec-shelfGrid__item .ec-shelfGrid__item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ec-shelfGrid__item a:hover .ec-shelfGrid__item-image img { transform: scale(1.04); }
.ec-shelfGrid__item .ec-shelfGrid__item-title { font-size: 13px; font-weight: 500; }
.ec-shelfGrid__item .ec-price { font-family: var(--font-accent); font-size: 13px; color: #555; text-align: right; }

/* ------------------------------------------------------------
   13. ボタン（共通）
   ------------------------------------------------------------ */
.ec-blockBtn--action, .ec-inlineBtn--action {
  border-radius: 50px;
  background: var(--bc-primary);
  border: 1px solid var(--bc-primary);
  color: #fff;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  line-height: 1 !important;
  padding: 0 32px !important;
  transition: all 0.2s ease;
}
.ec-blockBtn--action:hover { background: var(--bc-primary-dark); border-color: var(--bc-primary-dark); opacity: 1; }
.ec-blockBtn--cancel {
  border-radius: 50px;
  background: #f0efeb !important;
  border: 1px solid #c8c8be !important;
  color: #1a1a1a !important;
  font-family: var(--font-main);
  font-size: 13px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  line-height: 1 !important;
  padding: 0 32px !important;
  transition: all 0.2s ease;
}
.ec-blockBtn--cancel:hover { background: #e8e7e3 !important; opacity: 1; }
button.ec-inlineBtn--cancel,
a.ec-inlineBtn--cancel,
.ec-modal .ec-inlineBtn--cancel,
.ec-modal-btnRole .ec-inlineBtn--cancel,
span.ec-inlineBtn--cancel {
  border-radius: 50px !important;
  background: #f0efeb !important;
  border: 1px solid #c8c8be !important;
  color: #1a1a1a !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  line-height: 1 !important;
  padding: 0 32px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-bottom: 12px !important;
}
button.ec-inlineBtn--cancel:hover,
a.ec-inlineBtn--cancel:hover,
span.ec-inlineBtn--cancel:hover { background: #e8e7e3 !important; opacity: 1; }

/* フォームページ下部ボタンとフッターの間隔 */
.ec-RegisterRole__actions,
.ec-contactRole .ec-RegisterRole__actions {
  margin-bottom: 56px !important;
}

/* ------------------------------------------------------------
   14. フォーム
   ------------------------------------------------------------ */
.ec-input input, .ec-input textarea, .ec-select select,
.ec-halfInput input, .ec-zipInput input, .ec-telInput input, .ec-numberInput input {
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-main);
  font-size: 13px;
  background: #fff;
  color: var(--bc-text);
  transition: border-color 0.2s;
}
.ec-input input:focus, .ec-input textarea:focus, .ec-select select:focus {
  border-color: var(--bc-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(58,123,213,0.12);
}
.ec-label { font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------
   15. フッター
   ------------------------------------------------------------ */
footer.ec-layoutRole__footer, .ec-footerRole {
  background: var(--bc-footer-bg) !important;
  font-family: var(--font-main) !important;
}
.ec-footerRole__inner { padding: 48px 24px 32px; max-width: 1000px; margin: 0 auto; }
.ec-footerNavi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: center;
  padding: 0;
  margin-bottom: 24px;
  list-style: none;
}
.ec-footerNavi__link a { color: var(--bc-text) !important; font-size: 12px; letter-spacing: 0.04em; transition: color 0.2s; }
.ec-footerNavi__link a:hover { color: var(--bc-primary) !important; opacity: 1; }
.ec-footerTitle { text-align: center; border-top: 1px solid var(--bc-border); padding-top: 24px; }
.ec-footerTitle__logo a { font-family: var(--font-main) !important; font-size: 18px; font-weight: 400; letter-spacing: 0.06em; color: #1a1a1a !important; text-decoration: none; }
.ec-footerTitle__copyright { font-size: 11px; color: #555 !important; margin-top: 8px; }
.bc-footerAiNote { font-size: 10px; color: #666; margin-top: 6px; letter-spacing: 0.03em; }

/* ------------------------------------------------------------
   16. バリデーション
   ------------------------------------------------------------ */
.is-invalid { border-color: #b22222 !important; }
.bc-select-error { color: #b22222; font-size: 12px; margin-top: 4px; }
.bc-form-error { color: #b22222; font-size: 13px; margin-bottom: 6px; }

/* ------------------------------------------------------------
   17. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* --- 17-1. ヘッダー --- */

  /* ── アナウンスバー: ダーク背景・全幅・小文字 ── */
  header.ec-layoutRole__header::before {
    display: flex !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #333 !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    padding: 8px 16px !important;
    border-bottom: none !important;
    text-align: center !important;
    justify-content: center !important;
    letter-spacing: 0.02em !important;
  }

  /* ── ヘッダー全体: 縦並び（アナウンスバー→ナビ行） ── */
  header.ec-layoutRole__header {
    flex-wrap: wrap !important;
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
  }

  /* ── ナビ行: ロゴ左 + アイコン右 + ハンバーガー右端 ── */
  /* ロゴ: 左寄せ */
  .ec-headerRole {
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    order: 2;
    width: auto !important;
    max-width: none !important;
    height: 50px !important;
    align-items: center !important;
  }
  .ec-headerTitle__logo a {
    font-size: 16px;
    white-space: nowrap;
  }

  /* PCテキストナビ非表示 */
  .ec-categoryNaviRole { display: none !important; }

  /* アイコン群（検索・会員・お気に入り・カート）: ロゴの右 */
  .ec-headerNaviRole {
    position: relative !important;
    transform: none !important;
    padding: 0 !important;
    order: 3;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* 検索フォームは非表示、ハンバーガーのみ表示 */
  .ec-headerNaviRole__left {
    display: block !important;
    position: absolute !important;
    right: 10px !important;
    top: 0 !important;
    height: 50px !important;
    width: 38px !important;
    z-index: 520 !important;
  }
  .ec-headerNaviRole__left .ec-headerNaviRole__search,
  .ec-headerNaviRole__left .ec-headerSearch,
  .ec-headerNaviRole__left form {
    display: none !important;
  }
  .ec-headerNaviRole__left .ec-headerRole__navSP {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  .ec-headerNaviRole__right {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin-right: 52px !important;
  }
  .ec-headerNav__item a { padding: 0 10px !important; }
  .ec-cartNavi { padding: 0 20px 0 10px !important; }
  .ec-headerNav__itemIcon { font-size: 18px; }
  .ec-cartNavi__icon { font-size: 18px; }
  /* ログインアイコン: 非表示のまま（壊れたアイコン回避） */

  /* ハンバーガーメニュー: 右端 */
  .ec-headerNavSP {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 4 !important;
    position: static !important;
    transform: none !important;
    height: 50px !important;
    width: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 20px !important;
  }
  /* スクロール後・下層ページ: 暗色 */
  header.ec-layoutRole__header.is-fixed .ec-headerNavSP,
  body:not(.front_page) header.ec-layoutRole__header .ec-headerNavSP {
    color: #525263 !important;
  }
  header.ec-layoutRole__header.is-fixed .ec-headerNav__item a,
  header.ec-layoutRole__header.is-fixed .ec-cartNavi,
  header.ec-layoutRole__header.is-fixed .ec-cartNavi__icon,
  header.ec-layoutRole__header.is-fixed .ec-headerNav__itemIcon {
    color: #525263 !important;
  }

  /* スクロール後: アナウンスバー非表示 */
  header.ec-layoutRole__header.is-fixed::before {
    display: none !important;
  }
  header.ec-layoutRole__header.is-fixed {
    min-height: 50px !important;
  }

  /* 下層ページ: ヘッダー調整 */
  body:not(.front_page) header.ec-layoutRole__header {
    min-height: auto !important;
    padding-top: 0 !important;
  }
  body:not(.front_page) header.ec-layoutRole__header::before {
    display: none !important;
  }
  body:not(.front_page) .ec-layoutRole__contents {
    padding-top: 50px !important;
  }

  /* ドロワーメニュー */
  .ec-drawerRole {
    z-index: 1000 !important;
  }
  .ec-drawerRoleClose {
    z-index: 999 !important;
  }

  /* レイアウト: 全体のオーバーフロー制御 */
  .ec-layoutRole {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .ec-layoutRole__contents {
    overflow-x: hidden !important;
  }

  /* フォーム要素: ビューポート内に収める */
  .ec-numberInput input,
  input.quantity {
    max-width: 80px !important;
    width: 80px !important;
  }
  select, .ec-select select {
    max-width: 100% !important;
  }

  /* --- 17-2. メインビジュアル --- */
  .bc-mainVisual { height: 70vh; min-height: 320px; }
  .mainVisualSlide,
  .mainVisualSlide .slick-list,
  .mainVisualSlide .slick-track,
  .mainVisualSlide .slick-slide,
  .mainVisualSlide .slick-slide > div { height: 100%; }

  /* Scroll down: 小さく */
  .bc-scrollDown {
    right: 16px !important;
    bottom: 40px !important;
    font-size: 10px;
  }
  .bc-scrollDown::after { display: none !important; }

  /* ヒーローニュースバー */
  .bc-heroNews {
    font-size: 12px;
    padding: 10px 16px;
    gap: 10px;
  }
  .bc-heroNews__badge { font-size: 10px; padding: 2px 6px; }
  .bc-heroNews__date { font-size: 11px; }
  .bc-heroNews__title { max-width: 45vw; font-size: 12px; }

  /* --- 17-3. トピックティッカー --- */
  .topicSlide img { height: 180px; }
  .bc-topicWrap { margin: 0; }
  .topicSlide .slick-list { padding: 0 20px !important; }

  /* --- 17-4. セクション共通 --- */
  .ec-role { padding: 0 16px; }
  .ec-secHeading { margin-bottom: 20px; padding-bottom: 10px; }
  .ec-secHeading__en { font-size: 10px !important; letter-spacing: 0.15em !important; }
  .ec-secHeading__ja { font-size: 17px !important; }

  /* --- 17-5. アイキャッチ --- */
  .ec-eyecatchRole { flex-direction: column; gap: 24px; padding: 40px 16px; }
  .ec-eyecatchRole__introTitle { font-size: 18px; }
  .ec-eyecatchRole__introDescription { font-size: 12px; }

  /* --- 17-6. 新着商品 --- */
  .ec-newItemRole { padding: 40px 0; }
  .ec-newItemRole__list { gap: 16px; }
  .ec-newItemRole__listItem:not(:first-child) {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
  .ec-newItemRole__listItemTitle { font-size: 12px; }
  .ec-newItemRole__listItemPrice { font-size: 11px; }

  /* --- 17-7. カテゴリスライダー --- */
  .ec-categoryRole { padding: 40px 0; }
  .ec-categoryRole__list { grid-template-columns: 1fr; gap: 10px; width: 90%; }
  .ec-categoryRole__list.slick-initialized { width: 90%; }

  /* --- 17-8. トピック --- */
  .ec-topicRole { padding: 40px 0; }
  .ec-topicRole__list { grid-template-columns: 1fr; gap: 16px; }

  /* --- 17-9. パララックスバナー --- */
  .bc-parallaxSection {
    min-height: 200px !important;
    padding: 48px 20px !important;
  }
  .bc-parallaxSection__body { font-size: 12px !important; line-height: 2 !important; }

  /* --- 17-10. 定番商品 --- */
  .bc-stdProduct { padding: 40px 0; }
  .bc-stdProduct__list { padding: 0 16px; }
  .bc-stdProduct__link,
  .bc-stdProduct__item:nth-child(even) .bc-stdProduct__link {
    flex-direction: column;
    gap: 20px;
  }
  .bc-stdProduct__photo { flex: none; width: 100%; }
  .bc-stdProduct__item { margin: 36px 0; }
  .bc-stdProduct__name { font-size: 1rem; }
  .bc-stdProduct__desc { font-size: 0.78rem; }

  /* --- 17-11. 商品一覧ページ --- */
  .ec-pageHeader { padding: 28px 16px; }
  .ec-pageHeader h1 { font-size: 20px; }

  /* 商品グリッド: 2カラム */
  .ec-shelfRole {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ec-shelfGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .ec-shelfGrid__item {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  .ec-shelfGrid__item .ec-shelfGrid__item-image img {
    width: 100% !important;
    height: auto !important;
  }
  /* 商品一覧: アイテム内要素を収める */
  .ec-shelfGrid__item * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .ec-shelfGrid__item .ec-shelfGrid__item-title {
    font-size: 12px !important;
    word-break: break-all;
    overflow-wrap: break-word;
  }
  .ec-shelfGrid__item .ec-price {
    font-size: 11px !important;
  }
  .ec-shelfGrid__item select {
    width: 100% !important;
    font-size: 12px !important;
  }
  .ec-shelfGrid__item .ec-blockBtn--action,
  .ec-shelfGrid__item button {
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 40px !important;
  }

  /* 商品一覧: 規格選択・カートボタン */
  .ec-productRole__actions {
    padding: 0 16px;
  }

  /* 商品一覧: 検索結果・ソート */
  .ec-searchnavRole {
    padding: 0 12px !important;
    word-break: break-word !important;
  }
  .ec-searchnavRole__infos {
    flex-wrap: wrap !important;
  }
  .ec-searchnavRole__counter {
    font-size: 13px !important;
  }
  .ec-searchnavRole__topicpath {
    padding: 8px 12px !important;
  }
  .ec-topicPath {
    padding: 8px 12px !important;
  }

  /* --- 17-12. 商品詳細ページ --- */
  .ec-productRole__freearea {
    padding: 0 16px;
    margin-top: 32px;
  }
  .ec-productRole__freearea .product_detail_section {
    margin-bottom: 40px;
  }
  .ec-productRole__freearea .product_detail_section_title {
    font-size: 1.1rem;
  }
  .ec-productRole__cartSection {
    margin: 32px auto 48px;
    padding: 0 16px;
  }

  /* --- 17-13. フッター --- */
  .ec-footerRole__inner { padding: 36px 16px 24px; }
  .ec-footerNavi { flex-direction: column; align-items: center; gap: 10px; }

  /* --- 17-14. ニュース --- */
  .ec-newsRole { padding: 40px 16px; }

  /* --- 17-15. フォーム・その他ページ --- */
  .ec-RegisterRole,
  .ec-contactRole {
    padding: 0 16px;
  }
}

/* ------------------------------------------------------------
   定番商品ブロック (.bc-stdProduct)
   ------------------------------------------------------------ */
.bc-stdProduct {
  padding: 40px 0 80px;
  background: #fff;
}
.bc-stdProduct__list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.bc-stdProduct__item {
  margin: 70px 0;
}
.bc-stdProduct__item:first-child {
  margin-top: 0;
}
.bc-stdProduct__link {
  display: flex;
  align-items: center;
  gap: 48px;
  text-decoration: none;
  color: inherit;
}
/* 偶数番目は画像を右に */
.bc-stdProduct__item:nth-child(even) .bc-stdProduct__link {
  flex-direction: row-reverse;
}
.bc-stdProduct__photo {
  flex: 0 0 72%;
}
.bc-stdProduct__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.bc-stdProduct__body {
  flex: 1;
  text-align: center;
}
.bc-stdProduct__name {
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  color: #000;
}
.bc-stdProduct__desc {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.8;
  margin: 0 0 24px;
}
.bc-stdProduct__more {
  display: inline-block;
  font-size: 0.78rem;
  color: #888;
  padding: 0.7em 1.4em;
  border: 1px solid #525263;
  letter-spacing: 0.08em;
  transition: background 0.2s, color 0.2s;
}
.bc-stdProduct__link:hover .bc-stdProduct__more {
  background: #525263;
  color: #fff;
}

/* 定番商品のモバイル対応はセクション17に統合済み */

/* ------------------------------------------------------------
   商品詳細ページ：フリーエリア（説明）→ カートボタンの順
   ------------------------------------------------------------ */
.ec-productRole__freearea {
  max-width: 960px;
  margin: 48px auto 0;
  padding: 0 16px;
}

.ec-productRole__cartSection {
  max-width: 480px;
  margin: 48px auto 64px;
  padding: 0 16px;
}

/* 商品詳細：フリーエリア内セクション */
.ec-productRole__freearea .product_detail_section {
  margin-bottom: 64px;
}
.ec-productRole__freearea .product_detail_section_title {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--bc-border);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.ec-productRole__freearea .product_detail_section img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
.ec-productRole__freearea .product_detail_comment {
  font-size: 0.9rem;
  line-height: 2;
  color: #444;
  margin-bottom: 12px;
}
.ec-productRole__freearea .more_link {
  display: inline-block;
  font-size: 0.85rem;
  color: #525263;
  border-bottom: 1px solid #525263;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.ec-productRole__freearea .more_link:hover {
  opacity: 0.7;
}

/* 特定商取引法ページ: SVG画像を左寄せ・本来のサイズで表示 */
#page_help_tradelaw .ec-borderedDefs dd img {
  width: auto !important;
  max-width: 100%;
  vertical-align: middle;
}
/* 特定商取引法ページ: テキスト改行を反映 */
#page_help_tradelaw .ec-borderedDefs dd {
  white-space: pre-line;
  line-height: 1.6;
}

/* 当サイトについてページ: 電話番号SVG画像を左寄せ・本来のサイズで表示 */
#help_about_box__phone_number dd img {
  width: auto !important;
  max-width: 100%;
  vertical-align: middle;
}
#help_about_box__phone_number dd {
  text-align: left;
}

/* フッター: AI画像利用の注記 */
.ec-footerTitle__aiNotice {
  font-size: 0.75rem;
  color: #888;
  margin: 16px 0 8px;
  text-align: center;
}
.ec-footerTitle__copyright {
  font-size: 0.7rem;
  color: #aaa;
  text-align: center;
}