/* =====================================================
   BEORMA カスタムスタイル
   静的コーディング(beorma-static)からの移植分をここに追加していく。
   EC-CUBE純正の ec-* クラス構造・JS(function.js等)はそのまま利用し、
   見た目だけをBEORMAデザインに上書きする。
   ===================================================== */

/* ページ全体が横に数px はみ出して、ドラッグ時にページごと動いてしまうのを防ぐ。
   bodyにoverflow-x:hiddenを付けると、その内側にあるposition:stickyの要素(商品詳細ページの
   画像固定など)が効かなくなるため、ルート要素であるhtml側にだけ付ける */
html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
}

/* スマホは position:sticky (商品詳細ページの画像固定、768px以上のみ) を使っていないため、
   ここだけbodyにもoverflow-x:hiddenを足して、iOS Safari特有の横スワイプ時の
   ラバーバンド(ページ全体が左右にズレて見える)を確実に防ぐ */
@media (max-width: 767.98px) {
  body {
    overflow-x: hidden;
  }
}

/* ===== ベースフォント(日本語: ヒラギノ角ゴ/游ゴシック、Light) ===== */
body {
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 200;
}

/* ===== ナビ・メニュー用フォント(DIN 2014 Light / Adobe Fonts) ===== */
.beorma-nav-utility a,
.beorma-nav-utility .ec-headerNav__itemLink,
.beorma-nav-category a,
.beorma-mobile-top-link,
.beorma-mobile-menu-nav a,
.beorma-footer-col a,
.beorma-category-heading {
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* ===== ヘッダー(beorma-static/css/custom.cssの該当箇所をそのまま移植) ===== */
.beorma-header-logo {
  padding: 0.4rem 0 0.5rem;
}

.beorma-logo-link {
  text-decoration: none;
  color: #000;
}

/* EC-CUBE純正 .ec-headerRole img { width:100%; max-width:100%; } に詳細度で勝つため2クラス指定にする */
.ec-headerRole .beorma-logo-img {
  width: 100%;
  max-width: 110px;
  height: auto;
}

.beorma-logo-tagline {
  display: block;
  white-space: nowrap;
  margin: 0.25rem auto 0;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #000;
}

.beorma-header-nav-row {
  border-top: 1px solid #eee;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.beorma-nav-utility {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.beorma-nav-utility a {
  color: #000;
  text-decoration: none;
}

/* Featureは未公開のためリンク先は#のまま、下に小さく"coming soon"を添える。
   別のdivで囲むとFeature自体の見た目上のbaselineが他のナビ項目(直接のa要素)と
   微妙にズレてしまうため、Featureのaタグ自体に"coming soon"のspanを入れ子にし、
   position:absoluteで通常のレイアウトから外す(aタグ自体は他の項目と全く同じ形のまま) */
.beorma-nav-feature-item {
  position: relative;
}

.beorma-nav-feature-soon {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.2rem;
  font-size: 0.6rem;
  color: #999;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.beorma-nav-category ul {
  gap: 2.5rem;
}

/* EC-CUBE純正の .ec-itemNav__nav li a { font-size:16px; font-weight:bold; } が
   liとaの2要素セレクタを含み、こちらの1要素セレクタ(.beorma-nav-category a)より
   詳細度が高いため、ここまで実際には効いていなかった。詳細度を上げて確実に上書きする */
.beorma-nav-category .ec-itemNav__nav li a {
  display: inline;
  border-bottom: 0;
  background: none;
  padding: 0;
  height: auto;
  line-height: normal;
  color: #000;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.beorma-header-icons {
  gap: 1.75rem;
}

@media (max-width: 767.98px) {
  .beorma-header-icons {
    gap: 0.75rem;
  }
}

.beorma-icon-link {
  color: #000;
  display: inline-flex;
}

/* login.twig(新規登録/Login)をユーティリティナビに合わせてインライン化。
   Top/Feature側の間隔(.beorma-nav-utilityのgap)と必ず同じ値になるよう、
   ここも個別のmargin-rightではなくgapで揃える */
.beorma-nav-utility .ec-headerNav {
  display: inline-flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: 0;
  vertical-align: middle;
}

.beorma-nav-utility .ec-headerNav__item {
  margin-right: 0;
  /* EC-CUBE純正が font-size:28px を指定しており、inline-blockの行の高さ計算に使われて
     基準線がずれる原因になっていたため、実際の文字サイズに合わせてリセットする */
  font-size: 0.75rem;
  vertical-align: baseline;
}

.beorma-nav-utility .ec-headerNav__item a {
  display: inline;
  color: #000;
  text-decoration: none;
}

/* 実テキストは .ec-headerNav__itemLink(span)に入っており、EC-CUBE純正が font-size:14px を
   直接指定しているため、a への指定では効かない。span自体を上書きする */
.beorma-nav-utility .ec-headerNav__itemLink {
  font-size: 0.75rem;
}

.beorma-nav-utility .ec-headerNav__itemIcon {
  display: none;
}

.beorma-hamburger-btn {
  /* EC-CUBE純正の .ec-headerNavSP が position:fixed(画面左上に固定)を指定しており、
     レイアウトの流れから外れてしまう(display変更だけでは直らない)ため、明示的に解除する */
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
  color: #000;
  display: inline-flex;
  margin-right: 0.75rem;
  cursor: pointer;
}

.beorma-mobile-top-link {
  color: #000;
  text-decoration: none;
  font-size: 1rem;
}

.beorma-header-nav-row-mobile {
  position: relative;
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
  /* .containerの標準パディング(12px)はそのまま活かし、そこにさらに15pxを足す
     (打ち消してから足し直す必要はなかった) */
  .beorma-header-nav-row-mobile {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.beorma-logo-link-mobile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.beorma-header .beorma-logo-img-mobile {
  width: 92px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.beorma-header-tagline-mobile {
  font-size: 0.48rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #000;
  margin-top: -0.5rem;
  padding-bottom: 0.75rem;
}

@media (max-width: 767.98px) {
  /* ヘッダーを固定表示・白背景にする */
  .beorma-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    z-index: 200;
    background: #fff;
  }

  /* ヘッダーが固定になった分の余白は、JS(beorma-custom.js)で実際の高さを測って
     --beorma-header-height に設定している(固定値だとズレるため) */
  .ec-layoutRole__contents {
    padding-top: var(--beorma-header-height, 96px);
  }
}

/* 検索(details/summaryでJS無しトグル) */
.beorma-header-search {
  position: relative;
}

.beorma-header-search summary {
  list-style: none;
  cursor: pointer;
}

.beorma-header-search summary::-webkit-details-marker {
  display: none;
}

.beorma-header-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  width: 260px;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.beorma-header-search-panel-head {
  display: none;
}

/* スマホ:サーチアイコンを押すと右からパネルがスライドして出てくる形式にする
   (ハンバーガーメニュー本体とは独立させるため、ec-drawerRoleは使わずdetails/summaryのopen属性で制御) */
@media (max-width: 767.98px) {
  .beorma-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(0, 0, 0, 0.3);
  }

  .beorma-header-search[open] .beorma-search-overlay {
    display: block;
  }

  .beorma-header-search-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    z-index: 100003;
    width: calc(100vw - 30px);
    max-width: 420px;
    height: 100%;
    padding: 1.5rem;
    border: 0;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .beorma-header-search[open] .beorma-header-search-panel {
    transform: translateX(0);
  }

  .beorma-header-search-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #ddd;
  }

  .beorma-header-search-panel-title {
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 300;
    color: #000;
  }

  .beorma-header-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #000;
    cursor: pointer;
  }

  /* カテゴリ選択は非表示にし、キーワード入力+検索アイコンのみにする */
  .beorma-header-search-panel .ec-headerSearch__category {
    display: none;
  }

  .beorma-header-search-panel .ec-headerSearch .ec-headerSearch__keyword {
    border-radius: 10px;
    background-color: #f6f6f6;
  }

  .beorma-header-search-panel .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    height: 54px;
  }
}

/* カート(EC-CUBE純正のドロップダウン構造は維持、色だけ調整) */
.beorma-header-cart {
  display: inline-flex;
  margin-right: 20px;
  /* EC-CUBE純正の.ec-cartNaviNull/.ec-cartNaviIssetはposition:absolute; width:100%;
     right:0; のみで、位置の基準(position指定のある祖先要素)がここまで無かったため、
     スマホでは画面全体(固定ヘッダー基準)に広がってヘッダーごと覆ってしまい、
     カートボタン自体も隠れて再タップできなくなっていた。ここを基準にする */
  position: relative;
}

.beorma-header-cart .ec-cartNaviNull,
.beorma-header-cart .ec-cartNaviIsset {
  top: 100%;
  right: 0;
  width: 280px;
  max-width: calc(100vw - 40px);
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.beorma-header-cart .ec-cartNaviWrap {
  display: inline-flex;
  padding: 0;
  margin: 0;
}

.beorma-header-cart .ec-cartNavi {
  color: #000;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  min-width: 0;
  width: auto;
  height: auto;
}

.beorma-header-cart .ec-cartNavi__icon {
  display: inline-flex;
  position: relative;
}

.beorma-header-cart .ec-cartNavi__price {
  display: none !important;
}

.beorma-header-cart .ec-cartNavi__badge {
  position: absolute;
  top: -7px;
  right: -9px;
  left: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #333;
  color: #000;
  font-family: "din-2014", sans-serif;
  font-weight: 300;
  font-size: 0.6rem;
  line-height: 1;
}

/* カートアイコンのプレビュー(未使用時)のメッセージ:標準の赤背景・白太字をやめて控えめにする */
.beorma-header-cart .ec-cartNaviNull .ec-cartNaviNull__message {
  background-color: #fff;
  color: #000;
  font-weight: normal;
  font-size: 0.8rem;
}

/* 「カートに追加しました」モーダル・カートプレビュー(未使用時以外)のボタン:
   標準の赤/紺の塗りつぶしをやめ、サイト全体の黒枠×白背景×黒文字のボタンに統一する */
.ec-modal .ec-inlineBtn--action,
.ec-modal .ec-inlineBtn--cancel,
.ec-cartNaviIsset .ec-blockBtn--action,
.ec-cartNaviIsset .ec-blockBtn {
  background-color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 6px !important;
  color: #000 !important;
  font-weight: normal !important;
}

.ec-modal .ec-inlineBtn--action:hover,
.ec-modal .ec-inlineBtn--action:focus,
.ec-modal .ec-inlineBtn--cancel:hover,
.ec-modal .ec-inlineBtn--cancel:focus,
.ec-cartNaviIsset .ec-blockBtn--action:hover,
.ec-cartNaviIsset .ec-blockBtn--action:focus,
.ec-cartNaviIsset .ec-blockBtn:hover,
.ec-cartNaviIsset .ec-blockBtn:focus {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ===== スマホ用スライドメニュー(ec-drawerRole純正機構を利用) ===== */
.ec-drawerRole.beorma-mobile-menu {
  width: calc(100vw - 30px);
  max-width: 420px;
  background: #fff;
  transform: translateX(-100%);
  padding: 0;
}

/* 標準の .ec-drawerRole.is_active { transform: translateX(0); } と詳細度が同じで
   後から読み込まれるこちらが常に勝ってしまうため、開いた状態は詳細度を上げて明示する */
.ec-drawerRole.beorma-mobile-menu.is_active {
  transform: translateX(0);
}

.ec-drawerRoleClose.beorma-mobile-menu-close {
  left: auto;
  right: 16px;
  top: 16px;
  /* 標準の .ec-drawerRole.is_active が z-index:100000 のため、それより高くしないと
     ドロワー本体の下に隠れてしまう */
  z-index: 100001;
}

.beorma-mobile-menu-header {
  padding: 1.25rem 1.5rem 0.5rem;
}

.beorma-mobile-menu-logo {
  width: 90px;
  height: auto;
}

.beorma-mobile-menu-body {
  padding: 0.5rem 1.5rem 1.5rem;
}

/* login_sp.twig(会員リンク) */
.beorma-mobile-menu-body .ec-headerLinkArea {
  background: none;
}

.beorma-mobile-menu-body .ec-headerLinkArea .ec-headerLink__list {
  border-top: 0;
  display: flex;
  flex-direction: column;
}

.beorma-mobile-menu-body .ec-headerLinkArea .ec-headerLink__item {
  display: block;
  border-bottom: 0;
  padding: 0.9rem 0;
  color: #000;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1.2rem !important;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif !important;
  font-weight: 300 !important;
}

.beorma-mobile-menu-body .ec-headerLinkArea .ec-headerLink__icon {
  display: none;
}

/* Featureは未公開のためリンク先は#のまま、下に小さく"coming soon"を添える */
.beorma-mobile-menu-body .ec-headerLinkArea .beorma-mobile-menu-feature {
  padding-bottom: 0.4rem;
}

.beorma-mobile-menu-body .ec-headerLinkArea .beorma-mobile-menu-soon {
  display: block;
  text-transform: none !important;
  letter-spacing: 0.03em;
  font-size: 0.7rem !important;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif !important;
  font-weight: 300 !important;
  color: #999;
  margin-top: 0.15rem;
}

.beorma-mobile-menu-body .ec-headerLinkArea .beorma-mobile-menu-instagram {
  margin-top: 0.5rem;
  letter-spacing: normal;
}

/* category_nav_sp.twig(カテゴリ一覧) */
.beorma-mobile-menu-body .ec-headerCategoryArea {
  margin-top: 0.5rem;
}

/* ul/liの標準余白をリセットし、下のリンク一覧(div構造)と行間を揃える */
.beorma-mobile-menu-body .ec-headerCategoryArea .ec-itemNav__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.beorma-mobile-menu-body .ec-headerCategoryArea .ec-itemNav__nav li {
  margin: 0;
  padding: 0;
}

.beorma-mobile-menu-body .ec-headerCategoryArea .ec-itemNav__nav li a {
  display: block;
  border-bottom: 0 !important;
  background: none !important;
  color: #000 !important;
  padding: 0.9rem 0;
  letter-spacing: 4px;
  text-transform: uppercase;
  /* din-2014は英字のみのフォントで、日本語フォールバックフォントと同じ数値でも
     見た目がかなり小さく見えるため、視覚的な大きさを揃えるために数値を大きくしている */
  font-size: 1.2rem !important;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif !important;
  font-weight: 300 !important;
}

/* search_product.twig(検索): ハンバーガーメニュー内には表示せず、ヘッダーのサーチアイコンから
   開く右スライドパネル(.beorma-header-search-panel)側にのみ表示する
   (block.twigはcontroller型ブロックをrender()で直接出力するだけで、ラップ用の
   .ec-headerSearchAreaは付与されないため、実際のルート要素である.ec-headerSearchを指定する) */
.beorma-mobile-menu-body .ec-headerSearch {
  display: none !important;
}

.beorma-mobile-menu-copyright {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: #000;
  margin: 1rem 0 0;
}

/* ===== フッター ===== */
.beorma-footer {
  border-top: 1px solid #222;
  margin-top: 5rem;
  padding: 2.5rem 0 1.5rem;
  background: #fff;
}

.beorma-footer-nav {
  gap: 5rem;
}

.beorma-footer-col {
  display: flex;
  flex-direction: column;
}

.beorma-footer-col a {
  color: #000;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}

.beorma-footer-copyright {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #000;
}

.beorma-footer-copyright-mobile {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: #000;
  padding: 0.5rem 0;
}

@media (max-width: 767.98px) {
  .beorma-footer {
    margin-top: 3rem;
    padding: 0;
  }

  .beorma-footer-copyright-mobile {
    padding: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== ヒーローセクション(beorma-static/css/custom.cssより移植) ===== */
/* EC-CUBE純正の .ec-layoutRole__contents { max-width:1150px; } はトップページの
   フルブリード(画面幅いっぱい)ヒーロー画像と衝突するため、トップページのみ解除する */
body.front_page .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
  width: 100%;
}

.beorma-hero-item img {
  object-fit: cover;
}

.beorma-hero-item-lg {
  aspect-ratio: 1 / 1;
}

.beorma-hero-item-sm {
  aspect-ratio: 3 / 4;
}

.beorma-hero-item-sm img {
  border-radius: 12px;
}

.beorma-hero-item-lg:first-child img {
  border-radius: 0 12px 12px 0;
}

.beorma-hero-item-lg:last-child img {
  border-radius: 12px 0 0 12px;
}

@media (max-width: 767.98px) {
  .beorma-hero-item-lg:first-child img {
    border-radius: 12px;
  }
}

.beorma-hero-carousel {
  position: relative;
}

.beorma-hero-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.beorma-hero-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.beorma-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 72px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.beorma-carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.15);
}

.beorma-carousel-arrow-prev {
  left: 16px;
}

.beorma-carousel-arrow-next {
  right: 16px;
}

/* ===== ブランド紹介文セクション ===== */
.beorma-brand-intro {
  padding: 5rem 0;
}

.beorma-brand-intro-logo {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto 3rem;
  display: block;
}

.beorma-brand-intro-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 0.85rem;
  line-height: 2;
  color: #000;
}

.beorma-brand-intro-text p {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .beorma-brand-intro-text {
    text-align: left;
  }
}

/* ===== カテゴリセクション(Wallet/Belts/Bags/Others) ===== */
.beorma-category {
  padding-bottom: 5rem;
}

.beorma-category .container {
  max-width: 1200px;
}

.beorma-category-banner {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* 商品同士の間隔(--bs-gutter-x)と揃える */
  margin-bottom: 2.5rem;
  border-radius: 12px;
}

@media (min-width: 992px) {
  .beorma-category-banner {
    margin-bottom: 6rem;
  }
}

.beorma-category-banner img {
  object-fit: cover;
}

.beorma-category-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 1.5rem 5rem;
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.beorma-product-card {
  text-align: center;
}

.beorma-product-image-frame {
  position: relative;
  aspect-ratio: 1200 / 1690;
  border-radius: 12px;
  background: #f6f6f6;
  display: block;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.beorma-product-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 白背景で撮影された商品写真の白い部分を背景色に馴染ませる(商品詳細ページと同じ処理) */
  mix-blend-mode: multiply;
}

/* マウスオーバー/長押しで「_i」画像にフェードイン・フェードアウトで切り替える
   (base/hoverの2枚を重ねてopacityをtransitionさせるクロスフェード) */
.beorma-product-image-frame .beorma-product-image-base,
.beorma-product-image-frame .beorma-product-image-hover {
  position: absolute;
  inset: 0;
}

.beorma-product-image-frame .beorma-product-image-hover {
  opacity: 0;
  transition: opacity 0.4s ease;
  /* ホバー画像は下のbase画像と乗算合成させず、そのまま表示する */
  mix-blend-mode: normal;
}

.beorma-product-image-frame.is-active .beorma-product-image-hover {
  opacity: 1;
}

.beorma-product-image-frame::before,
.beorma-product-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img-base, none);
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}

.beorma-product-image-frame::after {
  background-image: var(--img-hover, none);
  opacity: 0;
}

.beorma-product-image-frame.is-active::before {
  opacity: 0;
}

.beorma-product-image-frame.is-active::after {
  opacity: 1;
}

.beorma-product-code {
  font-size: 0.7rem;
  color: #000;
  margin-bottom: 0.25rem;
}

.beorma-product-name {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.beorma-product-name-row {
  gap: 0.5rem;
}

.beorma-product-name-row .beorma-product-name {
  margin-bottom: 0;
}

.beorma-product-colors {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-top: 0.2rem;
}

.beorma-product-color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.beorma-product-price {
  font-size: 0.85rem;
  color: #000;
  margin-bottom: 0;
}

/* ===== 商品詳細ページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-product-detail {
  padding: 3rem 0 5rem;
}

@media (max-width: 767.98px) {
  /* 固定ヘッダーの直下から始まるように、ページ側の上余白は無くす
     (ヘッダー分の余白は .ec-layoutRole__contents 側のJS計測済みpadding-topで確保済み) */
  .beorma-product-detail {
    padding-top: 0;
  }

  /* メイン画像の左右の余白を、下のタイトル等と揃うように少し広げる。
     列のpaddingだけだと親のネストしたrowのマイナスマージンで相殺されることがあるため、
     画像自体にmarginを付けて確実に効かせる */
  .beorma-product-detail-main-image,
  .beorma-product-detail-thumbs {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

@media (min-width: 768px) {
  .beorma-product-detail-sticky {
    position: sticky;
    top: 24px;
  }

  .beorma-product-detail-image-col {
    padding-right: 40px;
  }

  .beorma-product-detail-info-col {
    padding-left: 40px;
  }
}

.beorma-product-detail-main-image {
  aspect-ratio: 1200 / 1690;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f6f6f6;
}

.beorma-product-detail-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 白背景で撮影された商品写真の白い部分を#f6f6f6に馴染ませる */
  mix-blend-mode: multiply;
}

.beorma-product-detail-thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  gap: 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.beorma-product-detail-thumbs.is-dragging {
  cursor: grabbing;
}

.beorma-product-detail-thumbs::-webkit-scrollbar {
  display: none;
}

.beorma-product-detail-thumbs-color {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #000;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.beorma-product-detail-thumb {
  width: calc((100% - 3.75rem) / 5.5);
  aspect-ratio: 1200 / 1690;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #f6f6f6;
}

.beorma-product-detail-thumb img {
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
  user-select: none;
}

.beorma-product-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.beorma-product-detail-thumb.is-active {
  border-color: #000;
}

.beorma-product-detail-info {
  padding: 0 0.5rem;
}

.beorma-product-detail-brand {
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #000;
  margin-bottom: 0.5rem;
}

.beorma-product-detail-name {
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #000;
  margin-bottom: 1rem;
}

.beorma-product-detail-price {
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #000;
  margin-top: 50px;
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .beorma-product-detail-name {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }

  .beorma-product-detail-brand,
  .beorma-product-detail-price {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}

.beorma-product-detail-option {
  margin-bottom: 1.5rem;
}

.beorma-product-detail-option-label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #000;
  margin-bottom: 0.75rem;
}

.beorma-product-detail-option-error {
  font-size: 0.75rem;
  color: #c0392b;
  margin-top: 0.5rem;
}

/* EC-CUBE純正のselectはJSでピル化するので非表示にする
   (.ec-select select { display:block } がstyle.css側にあり詳細度で負けるため、
   同じ構造(.ec-select > select)で指定して詳細度を揃えている) */
.ec-select select.beorma-classcat-select {
  display: none;
}

.beorma-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.beorma-size-btn {
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 0.85rem;
  cursor: pointer;
}

.beorma-size-btn.is-active {
  border-color: #000;
  color: #000;
  background: #f5f5f5;
}

.beorma-color-selected-name {
  color: #000;
}

.beorma-classcat-color-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.beorma-classcat-color-btn {
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background-clip: content-box;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.beorma-classcat-color-btn.is-active {
  border-color: #000;
}

.beorma-product-detail-purchase {
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: center;
}

.beorma-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 6px;
  overflow: hidden;
}

.beorma-qty-stepper button {
  width: 40px;
  height: 44px;
  border: none;
  background: #fff;
  color: #000;
  font-size: 1rem;
  cursor: pointer;
}

.beorma-qty-real-input {
  width: 48px;
  height: 44px;
  border: none;
  text-align: center;
  font-size: 0.9rem;
  -moz-appearance: textfield;
}

.beorma-qty-real-input::-webkit-outer-spin-button,
.beorma-qty-real-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.beorma-btn-outline {
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  color: #000;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
}

.beorma-add-cart-btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
}

.beorma-leather-care-btn {
  padding: 0.85rem 1rem;
  margin: 1.5rem 0 2rem;
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "Yu Gothic", "Meiryo", sans-serif;
}

/* 二重送信防止のためJSで一瞬disabled属性が付く際、ec-blockBtn--action等の
   標準の赤背景(disabled時の色)が見えてしまうのを防ぐ */
.beorma-btn-outline:disabled,
.beorma-btn-outline.disabled {
  background: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
  opacity: 1 !important;
}

.beorma-btn-outline:hover,
.beorma-btn-outline:focus,
.beorma-btn-outline:active,
.beorma-btn-outline.active {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.beorma-product-detail-description {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #000;
  margin: 1rem 0 1.5rem;
}

.beorma-product-detail-meta {
  font-size: 0.75rem;
  line-height: 1.9;
  color: #000;
  margin: 0 0 0.5rem;
}

.beorma-product-detail-meta-code {
  font-size: 0.75rem;
  line-height: 1.9;
  color: #000;
  margin: 0;
}

.beorma-product-detail-category {
  font-size: 0.75rem;
  line-height: 1.9;
  color: #000;
  margin: 0;
}

.beorma-product-detail-category a {
  color: #000;
}

.beorma-product-detail-inquiry-note {
  font-size: 0.75rem;
  line-height: 1.8;
  color: #000;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.beorma-product-detail-inquiry-link {
  color: #000;
}

.beorma-product-detail-gallery-2 {
  margin-top: 4rem;
}

/* ===== お問い合わせページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-contact {
  padding: 3rem 0 6rem;
}

.beorma-contact-title {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
}

.beorma-contact-warning {
  border: 1px solid #e3b0b0;
  background: #fdf3f3;
  color: #b23b3b;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  font-size: 0.8rem;
  line-height: 1.9;
  text-align: center;
  margin-bottom: 2rem;
}

/* カートが空の時のメッセージのみ、注意喚起色ではなく通常の黒枠/白背景にする */
.beorma-cart-empty-message {
  border-color: #000;
  background: #fff;
  color: #000;
}

.beorma-contact-notice {
  font-size: 0.8rem;
  line-height: 1.9;
  color: #000;
  margin-bottom: 2rem;
}

.beorma-contact-faq-row {
  margin-bottom: 3rem;
}

.beorma-contact-faq-text {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #000;
  margin-bottom: 0;
}

.beorma-contact-faq-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.85rem 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .beorma-contact-faq-btn {
    margin-top: 0;
  }
}

.beorma-contact-field-group {
  margin-bottom: 3.5rem;
}

.beorma-contact-label {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 0.75rem;
}

.beorma-contact-required {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
  vertical-align: middle;
}

.beorma-contact-label-note {
  display: block;
  text-decoration: none;
  font-size: 0.75rem;
  color: #000;
  margin-top: 0.4rem;
}

@media (min-width: 768px) {
  .beorma-contact-label-note {
    display: inline;
    margin-left: 0.75rem;
  }
}

.beorma-contact-input {
  border-radius: 4px;
  border: 2px solid #333;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  width: 100%;
}

.beorma-contact-input.error {
  border-color: #c0392b;
}

.beorma-contact-zip-input {
  width: 140px;
}

.beorma-contact-textarea {
  resize: vertical;
}

.beorma-contact-order-notice {
  font-size: 0.75rem;
  color: #000;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.beorma-contact-zip-row {
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.beorma-contact-zip-label {
  color: #000;
}

.beorma-contact-zip-help {
  font-size: 0.8rem;
  color: #000;
  text-decoration: underline;
}

.beorma-contact-submit-btn {
  display: block;
  width: 220px;
  max-width: 100%;
  padding: 0.9rem 1rem;
  background: #111;
  color: #fff;
  text-align: center;
}

.beorma-contact-submit-btn:hover {
  background: #333;
  color: #fff;
}

/* ===== 確認画面共通(お問い合わせ/会員登録の確認ページで使用) ===== */
.beorma-confirm-list {
  margin-bottom: 2.5rem;
}

.beorma-confirm-row {
  border-bottom: 1px solid #eee;
  padding: 1.25rem 0;
}

.beorma-confirm-label {
  font-size: 0.75rem;
  color: #000;
  margin-bottom: 0.4rem;
}

.beorma-confirm-value {
  font-size: 0.9rem;
  color: #000;
  line-height: 1.8;
  margin-bottom: 0;
}

.beorma-confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.beorma-confirm-back-btn {
  background: none;
  border-color: #000;
  color: #000;
}

.beorma-confirm-back-btn:hover {
  background: #f5f5f5;
  color: #000;
  border-color: #000;
}

/* ===== 完了画面共通(お問い合わせ/会員登録等の完了ページで使用) ===== */
.beorma-complete {
  padding: 5rem 0 6rem;
  text-align: center;
}

.beorma-complete-title {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.beorma-complete-text {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #000;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.beorma-complete-btn {
  display: inline-block;
  text-decoration: none;
  width: 220px;
  max-width: 100%;
}

/* ===== 利用規約ページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-terms {
  padding: 3rem 0 6rem;
}

.beorma-terms-title {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 3.5rem;
}

.beorma-terms-body {
  max-width: 960px;
  margin: 0 auto;
  font-size: 0.8rem;
  line-height: 1.9;
  color: #000;
}

.beorma-terms-body h2 {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

.beorma-terms-body h2:first-child {
  margin-top: 0;
}

.beorma-terms-body p {
  margin-bottom: 1.5rem;
}

/* ===== ログインページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-login {
  padding: 4rem 0 6rem;
}

.beorma-login-title {
  text-align: center;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
}

.beorma-login-form {
  max-width: 640px;
  margin: 0 auto;
}

.beorma-login-input {
  display: block;
  width: 100%;
  border: none;
  border-radius: 4px;
  background: #f2f2f2;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.beorma-login-input::placeholder {
  color: #000;
}

.beorma-login-input:focus {
  outline: 2px solid #111;
}

.beorma-login-remember {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 1.5rem;
}

.beorma-login-message {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 1rem;
}

.beorma-login-error {
  font-size: 0.8rem;
  color: #c0392b;
  margin-bottom: 1rem;
}

.beorma-login-submit-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 4px;
  background: #111;
  color: #fff;
  padding: 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

.beorma-login-submit-btn:hover {
  background: #333;
}

.beorma-login-links {
  text-align: center;
}

.beorma-login-links a {
  display: block;
  color: #000;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 0.75rem;
}

/* ===== パスワード再発行ページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-reissue {
  padding: 4rem 0 6rem;
}

.beorma-reissue-title {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.beorma-reissue-intro {
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.9;
  color: #000;
  margin-bottom: 3rem;
}

.beorma-reissue-form {
  max-width: 640px;
}

.beorma-reissue-input {
  margin-bottom: 2rem;
}

.beorma-reissue-submit-btn {
  display: block;
  width: 320px;
  max-width: 100%;
  border: none;
  border-radius: 4px;
  background: #111;
  color: #fff;
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.beorma-reissue-submit-btn:hover {
  background: #333;
  color: #fff;
}

/* ===== パスワード再発行完了ページ ===== */
.beorma-reissue-complete {
  padding: 4rem 0 6rem;
  text-align: center;
}

.beorma-reissue-complete-eyebrow {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
}

.beorma-reissue-complete-title {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.beorma-reissue-complete-text {
  font-size: 0.85rem;
  line-height: 1.9;
  color: #000;
  margin-bottom: 1.5rem;
}

/* ===== ショッピングガイドページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-guide {
  padding: 3rem 0 6rem;
}

.beorma-guide-title {
  text-align: center;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
}

.beorma-guide-section {
  font-size: 1rem;
  font-weight: 700;
  margin: 3rem 0 1.25rem;
}

.beorma-guide-section:first-of-type {
  margin-top: 0;
}

.beorma-guide-subheading {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 2rem 0 1rem;
}

.beorma-guide p {
  font-size: 0.8rem;
  line-height: 1.9;
  color: #000;
  margin-bottom: 1.5rem;
}

.beorma-guide-warning {
  margin-bottom: 1.5rem;
  text-align: left;
}

/* About/Shopping Guide/Trade Law共通のテーブル外観(Trade Lawページのデザインに統一) */
.beorma-guide-table {
  border: 1px solid #999;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.beorma-guide-table-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #999;
}

.beorma-guide-table-row:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .beorma-guide-table-row {
    flex-direction: row;
  }
}

.beorma-guide-table-th {
  background: #e6e6e6;
  color: #000;
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .beorma-guide-table-th {
    flex: 0 0 200px;
    border-right: 1px solid #999;
  }
}

.beorma-guide-table-td {
  color: #000;
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.8;
  flex: 1;
}

.beorma-guide-subtitle {
  text-align: center;
  font-size: 0.8rem;
  color: #000;
  margin-top: -2.25rem;
  margin-bottom: 3rem;
}

/* ===== FAQページ(app/template/user_data/faq.twig)専用: 冒頭の目次(カテゴリ別ジャンプリンク)
   スマホ2カラム/PC(768px以上)3カラム ===== */
.beorma-faq-toc {
  column-count: 2;
  column-gap: 1.5rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .beorma-faq-toc {
    column-count: 3;
    column-gap: 2.5rem;
  }
}

.beorma-faq-toc-col {
  break-inside: avoid;
  margin-bottom: 2rem;
}

.beorma-faq-toc-heading {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.beorma-faq-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.beorma-faq-toc-list li {
  margin-bottom: 0.75rem;
}

.beorma-faq-toc-list a {
  color: #000;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.7;
}

.beorma-faq-toc-list a:hover {
  text-decoration: underline;
}

.beorma-faq-contact {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.9;
  margin-top: 4rem;
}

.beorma-tradelaw-note {
  font-size: 0.75rem;
  color: #000;
  margin-top: -0.5rem;
}

/* ===== 商品一覧ページ(トップページと同じカードをPC4列/タブレット3列/スマホ2列で表示) ===== */
/* EC-CUBE純正の .ec-layoutRole__contents { max-width:1150px; } を商品一覧ページのみ解除し、
   .beorma-product-list側で改めて幅を指定する(商品詳細ページは自身のcontainerで幅が決まるため影響なし) */
body.product_page .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
  width: 100%;
}

.beorma-product-list {
  max-width: 1700px;
  margin: 0 auto;
  padding: 2rem 20px 4rem;
}

/* Bootstrapのガター上限(g-5=3rem)を超える間隔にするため、--bs-gutter-xを直接指定する */
.beorma-product-list-row {
  --bs-gutter-x: 2.5rem;
}

@media (min-width: 992px) {
  .beorma-product-list-row {
    --bs-gutter-x: 6rem;
  }
}

.beorma-product-list .beorma-product-card,
.beorma-category .beorma-product-card {
  text-align: left;
}

/* 商品一覧ページの絞り込みバー(全て|カテゴリ / 件数・並び替え)を、
   下の商品グリッド(.beorma-product-list、最大幅1700px)と同じ幅・左右余白に揃える */
body.product_page .ec-searchnavRole__topicpath,
body.product_page .ec-searchnavRole__infos {
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* パンくず(全て|カテゴリ名) */
body.product_page .ec-topicpath {
  font-size: 0.8rem;
  color: #000;
}

body.product_page .ec-topicpath .ec-topicpath__item--active {
  font-weight: 400;
}

/* 件数・並び替え行 */
body.product_page .ec-searchnavRole__counter,
body.product_page .ec-searchnavRole__actions {
  font-size: 0.8rem;
  font-weight: 400;
  color: #000;
}

/* 件数・並び替えのセレクトを、他のボタンと同じ黒枠×白背景×角丸×黒文字にする */
body.product_page .disp-number,
body.product_page .order-by {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  color: #000;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.3rem 0.6rem;
}

/* ===== 新規会員登録ページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-entry {
  padding: 3rem 0 6rem;
}

.beorma-entry-title {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.beorma-entry-form {
  max-width: 860px;
  margin: 0 auto;
}

.beorma-entry-field-group {
  margin-bottom: 3.5rem;
}

.beorma-entry-label {
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 0.75rem;
}

.beorma-entry-input-row {
  margin-top: 0.75rem;
}

.beorma-entry-input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #333;
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0.25rem;
  font-size: 0.85rem;
}

.beorma-entry-input.error {
  border-bottom-color: #c0392b;
}

.beorma-entry-input:focus {
  outline: none;
  border-bottom: 2px solid #111;
}

.beorma-entry-zip-inputs {
  max-width: 220px;
}

.beorma-entry-zip-search-label {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 0.5rem;
}

.beorma-entry-zip-help {
  font-size: 0.8rem;
  color: #000;
  text-decoration: underline;
}

.beorma-entry-birth-row {
  gap: 0.5rem;
}

.beorma-entry-birth-row .beorma-entry-input {
  width: auto;
  flex: 1;
}

.beorma-entry-radio-row {
  flex-wrap: wrap;
  gap: 0.5rem 0.4rem;
}

/* Symfony/EC-CUBE標準のchoice_widget_expandedは選択肢ごとに<input>と<label>を
   1つのdivで囲まず個別に並べて出力する。このlabelをdisplay:flexにすると
   (親が横並びのflexコンテナでも)ブロック化して幅いっぱいに広がってしまい、
   結果的にラジオボタンが縦に積み重なって見えてしまうため、横並びのまま
   サイズが内容に収まるinline-flexにする。選択肢同士の間隔はlabel側の
   margin-rightで確保する(親のgapは各inputとその直後のlabelの間にも
   均等にかかってしまうため、選択肢間だけ広くしたい場合はgapではなく
   marginで持たせる必要がある) */
.beorma-entry-radio-row input[type="radio"] {
  margin: 0;
}

.beorma-entry-radio-row label {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  margin: 0 1.5rem 0 0;
  white-space: nowrap;
}

.beorma-entry-agree-note {
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: #000;
  margin-bottom: 1.5rem;
}

.beorma-entry-agree-note.error {
  border-color: #c0392b;
}

.beorma-entry-agree-note a {
  color: #000;
}

.beorma-entry-actions {
  gap: 1rem;
}

.beorma-entry-btn {
  flex: 1;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border: 1px solid #111;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.beorma-entry-btn-agree {
  background: #111;
  color: #fff;
}

.beorma-entry-btn-agree:hover {
  background: #333;
  color: #fff;
}

.beorma-entry-btn-disagree {
  background: #fff;
  color: #000;
}

.beorma-entry-btn-disagree:hover {
  background: #f5f5f5;
  color: #000;
}

/* ===== カートページ(beorma-static/css/custom.cssより移植) ===== */
.beorma-cart {
  padding: 3rem 0 6rem;
}

.beorma-cart-title {
  text-align: center;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  margin-bottom: 3rem;
}

.beorma-cart-steps {
  display: flex;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto 3.5rem;
  padding: 0;
  list-style: none;
}

.beorma-cart-step {
  position: relative;
  flex: 1;
  text-align: center;
}

.beorma-cart-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 19px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: #ccc;
  z-index: 0;
}

.beorma-cart-step-circle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #333;
  border-radius: 50%;
  background: #fff;
  font-family: "din-2014", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 300;
  font-size: 1rem;
}

.beorma-cart-step.is-active .beorma-cart-step-circle {
  background: #111;
  border-color: #000;
  color: #fff;
}

.beorma-cart-step-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #000;
}

.beorma-cart-total-text {
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.beorma-cart-table-head {
  border-bottom: 1px solid #333;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.beorma-cart-col-product {
  flex: 1;
  display: flex;
  gap: 1.5rem;
}

.beorma-cart-col-price,
.beorma-cart-col-qty,
.beorma-cart-col-subtotal {
  flex: 0 0 160px;
  display: flex;
  align-items: center;
}

.beorma-cart-row {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.beorma-cart-row-pc {
  align-items: flex-start;
}

.beorma-cart-product-image {
  flex: 0 0 150px;
  aspect-ratio: 1200 / 1690;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: #f6f6f6;
}

.beorma-cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.beorma-cart-product-name {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.beorma-cart-product-name a {
  color: #000;
  text-decoration: none;
}

.beorma-cart-delete-link {
  font-size: 0.78rem;
  color: #000;
  text-decoration: underline;
}

.beorma-cart-row-mobile {
  gap: 1.25rem;
}

.beorma-cart-row-mobile .beorma-cart-product-image {
  flex: 0 0 42%;
}

.beorma-cart-row-mobile .beorma-cart-product-price {
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem;
}

.beorma-cart-row-mobile .beorma-qty-stepper {
  margin-bottom: 1rem;
}

.beorma-cart-delivery-note {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 1rem;
}

.beorma-cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 0 2rem;
}

.beorma-cart-checkout-btn,
.beorma-cart-gift-btn {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.beorma-cart-checkout-btn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.beorma-cart-checkout-btn:hover {
  background: #333;
  color: #fff;
}

.beorma-cart-gift-btn {
  background: #fff;
  color: #000;
  border: 1px solid #111;
}

.beorma-cart-gift-btn:hover {
  background: #111;
  color: #fff;
}

.beorma-cart-continue-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: #000;
  text-decoration: underline;
}

/* カートの数量+/-は実際にはリンク(a)なので、商品詳細ページのbutton版と合わせて対応する */
.beorma-qty-stepper a,
.beorma-qty-stepper > span[aria-hidden] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}

.beorma-qty-stepper > span[aria-hidden] {
  color: #000;
  cursor: default;
}

/* ===== ページトップボタン ===== */
.ec-blockTopBtn {
  border-radius: 8px;
}

/* ===== 商品詳細下部ギャラリー(Slider Pro) =====
   実際に配信されたHTMLで確認したところ、.slider-proの外側に想定していた
   .beorma-product-detail-gallery-2 の枠が存在しなかったため、それに依存しない
   .slider-pro 単体を起点にスコープしている(このページ内でslider-proはここにしか無い前提)。
   角丸: メイン画像側は実際のクリッピング(overflow:hidden)がプラグイン生成の.sp-maskで
   行われているため、.sp-imageだけでなく.sp-maskにもborder-radiusを指定して確実に効かせる。
   余白: メイン画像とサムネイルの間、サムネイル同士の間を同じ幅(12px)に揃える。
   (サムネイル同士のデフォルト間隔は2px+2pxの計4pxなので6px+6pxに上書きしている) */
.slider-pro .sp-mask {
  border-radius: 12px;
  overflow: hidden;
}

.slider-pro .sp-image {
  border-radius: 12px;
  overflow: hidden;
}

.slider-pro .sp-thumbnails-container {
  margin-top: 24px;
}

.slider-pro .sp-thumbnail-container {
  border-radius: 8px;
  overflow: hidden;
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.slider-pro .sp-thumbnail-container:first-child {
  margin-left: 0 !important;
}

@media (max-width: 767.98px) {
  /* メイン画像⇔サムネイル間、サムネイル同士の隙間を同じ幅(12px)に揃えたまま狭める */
  .slider-pro .sp-thumbnails-container {
    margin-top: 12px;
  }

  .slider-pro .sp-thumbnail-container {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

/* xl(1200px)以上では col-xl-10 offset-xl-1 相当(83.3333%幅・中央寄せ)にする。
   プラグインが幅をインラインstyleで指定してくる(width:100%)ため、上書きにはimportantが必要。 */
@media (min-width: 1200px) {
  .slider-pro {
    width: 83.3333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.slider-pro .sp-thumbnail-container:last-child {
  margin-right: 0 !important;
}

/* Product.freearea内の「Item Details」見出しを非表示にする(テキストはfreearea側で管理) */
.item_details > h3 {
  display: none;
}

.slider-pro {
  margin-top: 150px !important;
}

@media (max-width: 767.98px) {
  .slider-pro {
    margin-top: 100px !important;
  }
}

/* ===== サイズ表(Product.freearea内の.shohin2_detail、admin側で装飾なしの素のtable) ===== */
.shohin2_detail {
  margin-top: 1rem;
}

.shohin2_detail p {
  font-size: 0.75rem;
  color: #000;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.shohin2_detail table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.65rem;
  margin-bottom: 15px;
}

.shohin2_detail td {
  border: 1px solid #000;
  padding: 0.5rem 0.75rem;
  text-align: center;
}

.shohin2_detail tr.text10pxb td {
  background: #fff;
  font-weight: normal;
}

/* =====================================================
   購入手続き(ご注文手続き/ご注文内容確認/ご注文完了)
   Shopping/index.twig・confirm.twig・complete.twig
   EC-CUBE純正の ec-orderRole 等の構造・クラス(JSが参照するものを含む)はそのまま残し、
   .beorma-order でスコープしたCSSだけで見た目をサイトのデザインに合わせている
   ===================================================== */

/* Shopping/alert.twig(エラー・警告バナー) */
.beorma-order .ec-alert-warning {
  background: #fff;
  border: 1px solid #c0392b;
  border-radius: 4px;
}

.beorma-order .ec-alert-warning__text {
  color: #c0392b;
  font-size: 0.85rem;
}

.beorma-order .ec-alert-warning__icon {
  display: none;
}

/* セクション見出し(配送情報/お支払い方法 等) */
.beorma-order .ec-rectHeading h1,
.beorma-order .ec-rectHeading h2,
.beorma-order .ec-rectHeading h3 {
  background: none;
  border-bottom: 1px solid #333;
  color: #000;
  font-size: 0.95rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  padding: 0 0 0.5rem;
  margin: 2.5rem 0 1.25rem;
}

.beorma-order .ec-orderRole__detail > div:first-child .ec-rectHeading h1,
.beorma-order .ec-orderRole__detail > div:first-child .ec-rectHeading h2 {
  margin-top: 0;
}

/* お客様情報(表示/インライン編集) */
.beorma-order .ec-orderAccount__account {
  font-size: 0.85rem;
  color: #000;
  line-height: 1.9;
}

.beorma-order .ec-orderAccount__change {
  text-align: right;
}

.beorma-order .ec-borderedDefs dl {
  border-top: 1px solid #eee;
  padding: 1rem 0;
  margin: 0;
}

.beorma-order .ec-borderedDefs dt {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 0.5rem;
}

.beorma-order .ec-borderedDefs .ec-required {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
}

/* 配送先ごとの商品リスト */
.beorma-order .ec-orderDelivery__title {
  font-size: 0.85rem;
  color: #000;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.beorma-order .ec-borderedList li {
  border-top: 1px solid #eee;
  padding: 1rem 0;
}

.beorma-order .ec-imageGrid__img img {
  border-radius: 8px;
  background: #f6f6f6;
  object-fit: cover;
}

.beorma-order .ec-imageGrid__content p {
  font-size: 0.8rem;
  color: #000;
}

.beorma-order .ec-orderDelivery__address p {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 0.25rem;
}

/* お届け方法・お届け日時・お届け時間 */
.beorma-order .ec-selects {
  border-bottom: none;
  margin-bottom: 0.5rem;
}

.beorma-order .ec-select label {
  font-size: 0.8rem;
  color: #000;
  font-weight: normal;
}

.beorma-order .ec-select select,
.beorma-order .ec-select .form-control {
  border: none;
  border-bottom: 1px solid #333;
  border-radius: 0;
  background: transparent;
  font-size: 0.85rem;
  padding: 0.4rem 0.25rem;
}

/* お支払い方法(ラジオ) */
.beorma-order .ec-radio span,
.beorma-order .ec-blockRadio span {
  font-size: 0.85rem;
  color: #000;
}

/* メッセージ・特商法表記等の本文 */
.beorma-order .ec-orderConfirm .ec-input,
.beorma-order .ec-orderConfirm p {
  font-size: 0.8rem;
  color: #000;
  line-height: 1.9;
}

.beorma-order .ec-orderConfirm textarea.form-control {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.6rem;
  font-size: 0.85rem;
}

/* 右側の合計・決済ボタンボックス */
.beorma-order .ec-totalBox {
  background: #f6f6f6;
  border-radius: 8px;
  padding: 1.25rem;
}

.beorma-order .ec-totalBox__spec dt,
.beorma-order .ec-totalBox__spec dd,
.beorma-order .ec-totalBox__taxRate dt,
.beorma-order .ec-totalBox__taxRate dd {
  color: #000;
}

.beorma-order .ec-totalBox__spec .ec-totalBox__specTotal {
  color: #000 !important;
}

.beorma-order .ec-totalBox__total,
.beorma-order .ec-totalBox__paymentTotal {
  border-top: 1px solid #ccc;
  color: #000;
}

.beorma-order .ec-totalBox__paymentTotal .ec-totalBox__price,
.beorma-order .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
  color: #000 !important;
}

.beorma-order .ec-totalBox__price {
  color: #000;
}

/* 小さいテキストボタン(変更/OK/キャンセル) */
.beorma-order .ec-inlineBtn {
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-weight: normal;
  padding: 4px 10px;
}

.beorma-order .ec-inlineBtn:hover,
.beorma-order .ec-inlineBtn:focus {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* 「ご注文手続きへ」「注文内容を確定する」等のメインボタン、「戻る」ボタン */
.beorma-order .ec-totalBox__btn {
  color: inherit;
}

.beorma-order .ec-totalBox .ec-blockBtn--action {
  display: block;
  width: 100%;
  height: auto;
  line-height: normal;
  background: #111;
  border: 1px solid #111;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: normal;
  padding: 0.9rem 1rem;
}

.beorma-order .ec-totalBox .ec-blockBtn--action:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

.beorma-order .ec-totalBox .ec-blockBtn--cancel {
  display: block;
  width: 100%;
  height: auto;
  line-height: normal;
  background: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  color: #000;
  font-size: 0.85rem;
  font-weight: normal;
  padding: 0.9rem 1rem;
  text-align: center;
}

.beorma-order .ec-totalBox .ec-blockBtn--cancel:hover {
  background: #f5f5f5;
  color: #000;
}

/* ===== ご注文完了ページ ===== */
.beorma-order-complete {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.beorma-order-complete-title {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.beorma-order-complete-desc {
  font-size: 0.85rem;
  color: #000;
  line-height: 2;
  margin-bottom: 2.5rem;
}

.beorma-order-complete-btn {
  display: inline-block;
  min-width: 240px;
}