/** Shopify CDN: Minification failed

Line 104:19 Unexpected "*"

**/
/* =============================================================
   NJ SHOP カスタムCSS
   デザイントークン: docs/design-tokens.md 参照
   ブレイクポイント: 768px（タブレットはSPレイアウト）
   ============================================================= */

/* ----- カスタム変数 ----- */
:root {
  --custom-page-width: 132rem; /* 1320px */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-gray-1: #838383;
  --color-gray-2: #D9D9D9;
  --color-gray-3: #F5F5F5;
  --color-border: #D9D9D9;
  --color-required: #FF0303;
  --font-custom-family: 'Zen Kaku Gothic New', sans-serif;
  --section-spacing: 120px;
  --footer-spacing: 200px;
  --form-field-spacing: 40px;
  --card-grid-gap: 8px;
  --bp-sp: 768px;
}

/* SP変数 */
@media screen and (max-width: 768px) {
  :root {
    --section-spacing: 60px;
    --footer-spacing: 100px;
    --form-field-spacing: 24px;
    --card-grid-gap: 8px;
  }
}

/* ----- フォント上書き ----- */
body,
body * {
  font-family: var(--font-custom-family);
}

/* ----- line-height: 全テキスト200%（ガイドライン確定） ----- */
body {
  line-height: 200%;
}

/* ----- 本文サイズ（ガイドライン: Regular 16px）----- */
body {
  font-size: 1.6rem;
}

/* ----- ページ幅上書き ----- */
.page-width {
  max-width: var(--custom-page-width);
}

/* ----- テキストカラー (Dawn既定 #121212 → #000000) ----- */
body {
  color: var(--color-black);
}

/* ----- PC フォントスケール（ガイドライン準拠） ----- */
.h1, h1 { font-size: 32px; font-weight: 700; } /* headline-A と同等 */
.h2, h2 { font-size: 24px; font-weight: 700; } /* headline-B と同等 */

/* ----- ガイドライン準拠 headline-A〜L ユーティリティクラス ----- */
.headline-A { font-size: 32px; font-weight: 700; }
.headline-B { font-size: 24px; font-weight: 700; }
.headline-C { font-size: 20px; font-weight: 700; }
.headline-D { font-size: 18px; font-weight: 700; }
.headline-E { font-size: 16px; font-weight: 700; }
.headline-F { font-size: 16px; font-weight: 500; }
.headline-G { font-size: 16px; font-weight: 400; }
.headline-H { font-size: 14px; font-weight: 700; }
.headline-I { font-size: 14px; font-weight: 500; }
.headline-J { font-size: 14px; font-weight: 400; }
.headline-K { font-size: 12px; font-weight: 700; }
.headline-L { font-size: 10px; font-weight: 500; }

/* ----- SP フォントスケール（SP/0_GUIDELINE.jpg 準拠） ----- */
@media screen and (max-width: 768px) {
  .h1, h1 { font-size: 18px; font-weight: 700; } /* headline-A 準拠 */
  .h2, h2 { font-size: 16px; font-weight: 700; } /* headline-B 準拠 */
  body { font-size: 14px; }

  /* SP 用 headline-A〜J（ガイドライン）。K, L は SP 未定義のため PC 値を継承 */
  .headline-A { font-size: 18px; font-weight: 700; }
  .headline-B { font-size: 16px; font-weight: 700; }
  .headline-C { font-size: 16px; font-weight: 500; }
  .headline-D { font-size: 16px; font-weight: 400; }
  .headline-E { font-size: 14px; font-weight: 700; }
  .headline-F { font-size: 14px; font-weight: 500; }
  .headline-G { font-size: 14px; font-weight: 400; }
  .headline-H { font-size: 12px; font-weight: 700; }
  .headline-I { font-size: 12px; font-weight: 500; }
  .headline-J { font-size: 10px; font-weight: 500; }
}

/* ----- セクション間余白 ----- */
.section-template--*,
main.content-for-layout > .shopify-section + .shopify-section {
  margin-top: var(--section-spacing);
}

/* ----- フッター前余白 ----- */
main.content-for-layout {
  margin-bottom: var(--footer-spacing);
}

/* ----- カテゴリ名の両端縦線装飾（｜CATEGORY｜形式） ----- */
.category-title {
  display: inline-block;
  border-left: 3px solid var(--color-black);
  border-right: 3px solid var(--color-black);
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 700;
  font-size: 18px;
}

/* ----- コレクション見出し 両端縦線装飾（｜コレクション名 タグ名｜形式） ----- */
.collection-hero__title {
  display: inline-block;
  border-left: 3px solid var(--color-black);
  border-right: 3px solid var(--color-black);
  padding-left: 8px;
  padding-right: 8px;
}

/* ----- セクション見出し左縦線装飾 ----- */
.section-heading {
  border-left: 3px solid var(--color-black);
  padding-left: 8px;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.1em;
}

/* ----- ホームページ CATEGORYカード：画像 + タイトル（左縦線） + タグ一覧 ----- */
.nj-category-card-item {
  /* box-sizing: padding/border を width に含めないとグリッド計算が崩れて縦積みになる */
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.nj-category-card {
  display: flex;
  flex-direction: column;
}

/* 全カードで見出し位置を統一するため、画像表示領域を固定アスペクト比 4:5 に。
   padding-top: 125% = 5/4 × 100% で常に高さ = 幅 × 1.25 を確保。
   <img> は絶対配置 + object-fit: contain で歪み・トリミングなしに枠内中央へフィット。 */
.nj-category-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 125%;
  height: 0;
  overflow: hidden;
}

/* 画像未設定コレクションのプレースホルダー: 薄いグレーで 4:5 の空枠を可視化し、
   見出し位置を他カードと統一する。
   <a> 要素を組み合わせた selector (a.X) で specificity を `a:empty` と同等の
   (0,1,1) に揃え、source order が後ろ (custom.css は base.css の後) で勝たせる。
   これがないと Dawn の `a:empty { display: none }` (base.css:468) で空の <a> が
   非表示になり padding-top も解決されないため、4:5 の空枠が出ない。 */
a.nj-category-card__media--empty {
  display: block;
  background-color: #f5f5f5;
}

.nj-category-card__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.nj-category-card__media:hover img {
  transform: scale(1.2);
}

.nj-category-card__content {
  padding: 12px 0 0;
}

.nj-category-card__title {
  margin: 0 0 12px;
  padding: 0 0 12px 8px;
  border-left: 3px solid var(--color-black);
  border-bottom: 1px solid var(--color-border);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .nj-category-card__title {
    font-size: 16px;
  }
}

.nj-category-card__title a {
  color: var(--color-black);
  text-decoration: none;
}

.nj-category-card__title a:hover {
  color: var(--color-gray-1);
}

.nj-category-card__tags {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nj-category-card__tag-item {
  margin: 0;
}

.nj-category-card__tag-item a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 0;
  color: var(--color-black);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}

.nj-category-card__tag-item a:hover {
  color: var(--color-gray-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nj-category-card__tag-arrow {
  display: inline-block;
  font-weight: 700;
}

/* ----- CATEGORYカード VIEW MORE（アコーディオン） -----
   閉時: 右下に「VIEW MORE ▽」を表示
   開時: 追加タグを表示し、ラベル非表示、矢印(▲)をリスト末尾の右下に配置 */
.nj-category-card__more {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.nj-category-card__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  list-style: none;
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.05em;
  order: 1;
}

.nj-category-card__more-toggle::-webkit-details-marker {
  display: none;
}

.nj-category-card__more-toggle:hover {
  color: var(--color-gray-1);
}

.nj-category-card__more-icon {
  display: inline-flex;
  align-items: center;
}

/* Dawn base.css の summary .icon-caret (position:absolute) を打ち消し */
.nj-category-card__more-toggle .icon-caret {
  position: static;
  right: auto;
  top: auto;
  width: 10px;
  height: auto;
  transition: transform 0.2s ease;
}

.nj-category-card__tags--extra {
  text-align: left;
  order: 2;
}

/* 展開時: ラベル非表示・矢印反転・summary をリスト末尾へ */
.nj-category-card__more[open] {
  /* 最初のリストと追加リストが直接つながるよう、詳細全体の上余白を消す */
  margin-top: 0;
}

.nj-category-card__more[open] .nj-category-card__more-label {
  display: none;
}

.nj-category-card__more[open] .nj-category-card__more-icon .icon-caret {
  transform: rotate(180deg);
}

.nj-category-card__more[open] .nj-category-card__more-toggle {
  order: 3;
  /* 追加リストと矢印の間の余白は維持 */
  margin-top: 4px;
}

/* ----- ホームページ BRAND カード ----- */
/* 枠線はロゴ画像のラッパー (<a class="nj-brand-card__media">) にのみ付与し、
   li 要素全体やタイトル部分は囲まない */
.nj-brand-card__media {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
}

/* ----- ホームページ CATEGORY/BRAND 見出し：両端縦線装飾（｜TITLE｜形式） ----- */
.collection-list-title,
.multicolumn__title .title {
  display: inline-block;
  border-left: 3px solid var(--color-black);
  border-right: 3px solid var(--color-black);
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 700;
}

/* ----- multicolumn カード画像リンク: 画像全体をクリック可能に -----
   block.settings.link が設定されている場合のみ multicolumn.liquid 側で
   <a class="multicolumn-card__image-link"> でラップされる */
.multicolumn-card__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ----- ボタン ----- */
.button--primary,
.shopify-challenge__button,
button[name="commit"] {
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 0;
}

.button--secondary {
  background-color: var(--color-gray-1);
  color: var(--color-white);
  border: none;
  border-radius: 0;
}

/* ----- フォーム ----- */
.field__input,
.form__input,
textarea {
  border-color: var(--color-border);
  border-radius: 0;
}

.required-mark {
  color: var(--color-required);
}

/* ----- カードグリッド ----- */
.collection-list,
.grid--3-col-desktop {
  gap: var(--card-grid-gap);
}

/* gap: 8px (--card-grid-gap) に合わせてアイテム幅を計算し直す
   Dawn 標準は 4px ギャップ想定で calc(50% - 2px) のため、8pxギャップでは1行に収まらず1カラムになる */
.collection-list.grid--2-col-tablet-down > .grid__item {
  width: calc(50% - var(--card-grid-gap) / 2);
  max-width: calc(50% - var(--card-grid-gap) / 2);
}

.collection-list.grid--3-col-tablet-down > .grid__item {
  width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
  max-width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
}

/* BRAND セクションなど、SP のみ grid--2-col を使う構成向けの補正。
   タブレット以上は grid--4-col-tablet / grid--4-col-desktop に任せたいので
   max-width: 749px でスコープする（これをしないと詳細度で PC の 4カラム指定まで上書きしてしまう） */
@media screen and (max-width: 749px) {
  .collection-list.grid--2-col > .grid__item {
    width: calc(50% - var(--card-grid-gap) / 2);
    max-width: calc(50% - var(--card-grid-gap) / 2);
  }
}

@media screen and (min-width: 990px) {
  .collection-list.grid--3-col-desktop > .grid__item {
    width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
    max-width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
  }
}

/* ホームページ BRAND セクション (multicolumn): SP では3カラム表示にする
   Dawn schema は columns_mobile "1"/"2" のみのため CSS で強制 */
@media screen and (max-width: 768px) {
  .multicolumn .multicolumn-list {
    gap: var(--card-grid-gap);
  }

  .multicolumn .multicolumn-list > .multicolumn-list__item {
    width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
    max-width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
    flex: 0 0 calc(33.333% - var(--card-grid-gap) * 2 / 3);
  }
}

/* ホームページ BRAND カード: ホバー時に枠内を60%不透明に
   multicolumn.liquid の hover_dim 設定が ON のセクションにのみ適用 */
.multicolumn--hover-dim .multicolumn-card {
  transition: opacity 0.2s ease;
}

.multicolumn--hover-dim .multicolumn-card:hover {
  opacity: 0.6;
}

/* 769〜989px 中間幅: ホームページ CATEGORY/BRAND を PC と同じカラム数に揃える */
@media screen and (min-width: 769px) and (max-width: 989px) {
  /* CATEGORY: PC と同じ 3カラム */
  .collection-list.grid--3-col-desktop > .grid__item {
    width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
    max-width: calc(33.333% - var(--card-grid-gap) * 2 / 3);
  }

  /* BRAND: PC と同じ 4カラム */
  .multicolumn .multicolumn-list {
    gap: var(--card-grid-gap);
  }

  .multicolumn .multicolumn-list.grid--4-col-desktop > .multicolumn-list__item {
    width: calc(25% - var(--card-grid-gap) * 3 / 4);
    max-width: calc(25% - var(--card-grid-gap) * 3 / 4);
    flex: 0 0 calc(25% - var(--card-grid-gap) * 3 / 4);
  }
}

/* ----- カードホバー ----- */
.card__media img {
  transition: transform 0.3s ease;
}

.card:hover .card__media img {
  transform: scale(1.2);
}

.card__content {
  transition: color 0.3s ease;
}

.card:hover .card__content {
  color: var(--color-gray-1);
}

/* ----- ヘッダーナビ ホバー ----- */
.header__menu-item:hover {
  color: var(--color-gray-2);
}

.header__icon:hover {
  color: var(--color-gray-2);
}

/* ----- PCヘッダー CONTACTボタンリンク（アイコン+テキスト一体型） ----- */
.nj-header__contact-link.nj-header__contact-link,
.nj-header__catalog-link.nj-header__catalog-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.3rem;
  background-color: var(--color-white);
  color: var(--color-black);
  border: none;
  border-radius: 0;
  padding: 1.2rem 0.4rem;
  text-decoration: none;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  white-space: nowrap;
  font-weight: 700;
}

.nj-header__contact-link.nj-header__contact-link:hover,
.nj-header__catalog-link.nj-header__catalog-link:hover {
  color: var(--color-gray-2);
  text-decoration: none;
}

.nj-header__contact-link.nj-header__contact-link span,
.nj-header__contact-link.nj-header__contact-link:hover span,
.nj-header__catalog-link.nj-header__catalog-link span,
.nj-header__catalog-link.nj-header__catalog-link:hover span {
  text-decoration: none;
}

/* WEBカタログも同じサイズにする。これが無いと SVG 固有の 20px のままで、
   他のアイコン（1.3em = 24px）より小さく見える。 */
.nj-header__contact-icon,
.nj-header__catalog-icon {
  display: inline-flex;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

.nj-header__contact-icon svg,
.nj-header__catalog-icon svg {
  width: 100%;
  height: 100%;
}

/* ----- PCヘッダー CATEGORYボタンリンク（summary要素、独自クラス） ----- */
.nj-header__category-summary {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.3rem;
  padding: 1.2rem 0.4rem;
  background-color: var(--color-white);
  color: var(--color-black);
  border: none;
  border-radius: 0;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  font-size: 1.4rem;
  font-family: inherit;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.nj-header__category-summary::-webkit-details-marker {
  display: none;
}

.nj-header__category-summary:hover {
  color: var(--color-gray-2);
}

.nj-header__category-icon {
  display: inline-flex;
  align-items: center;
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

.nj-header__category-icon svg {
  width: 100%;
  height: 100%;
}

/* ----- CATEGORYメガメニューコンテンツ（3カラム） ----- */
.nj-header__category-mega-content {
  padding: 32px 40px;
}

.nj-header__category-mega-heading {
  margin-bottom: 24px;
}

.nj-header__category-mega-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nj-header__category-mega-link {
  display: inline-block;
  color: var(--color-black);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nj-header__category-mega-link:hover,
.nj-header__category-mega-link--active {
  color: var(--color-gray-2);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* メガメニューsummaryのクリック無効化（PCはホバーのみ） */
@media screen and (min-width: 769px) {
  .mega-menu > summary {
    cursor: default;
  }
  .mega-menu > summary::-webkit-details-marker {
    display: none;
  }
}

/* CATEGORYメガメニュー：PCではJS側（details-disclosure.js）でhoverトグル。CSSはカーソルのみ調整 */
@media (hover: hover) and (min-width: 990px) {
  .nj-header__category-summary {
    cursor: default;
  }
}

/* CATEGORYメガメニュー：右端固定幅で表示（Dawn既定のfull-widthを上書き） */
@media screen and (min-width: 990px) {
  .nj-header__category-details > .nj-header__category-mega-content {
    left: auto;
    right: 0;
    min-width: 720px;
    max-width: calc(100vw - 4rem);
  }
}

/* ----- ヒーロースライダー：矢印をスライド上に左右配置、カウンター/ドットは非表示 ----- */
/* 注：Dawn の component-slideshow.css より詳細度を上げて確実に上書きする */
slideshow-component {
  position: relative;
}

.slideshow__controls.slider-buttons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.slideshow__controls.slider-buttons .slider-counter,
.slideshow__controls.slider-buttons .slideshow__autoplay {
  display: none;
}

.slideshow__controls.slider-buttons .slider-button {
  pointer-events: auto;
  position: static;
  width: 44px;
  height: 44px;
  margin: 0 24px;
  padding: 0;
  background-color: transparent;
  border: none;
  color: var(--color-black);
  cursor: pointer;
}

.slideshow__controls.slider-buttons .slider-button:hover {
  color: var(--color-gray-1);
}

.slideshow__controls.slider-buttons .slider-button .icon {
  width: 16px;
  height: auto;
}

/* ----- フッター CATEGORYブロック：ヘッダーのメガメニューと同じ見た目 ----- */
.footer-block--nj-category {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.footer-block--nj-category .category-title {
  display: inline-block;
  border-left-color: var(--color-white);
  border-right-color: var(--color-white);
  color: var(--color-white);
  margin: 0 0 20px;
}

.nj-footer__category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nj-footer__category-link {
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nj-footer__category-link:hover {
  color: var(--color-gray-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width: 749px) {
  .nj-footer__category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* ----- フッター 規約・ポリシーブロック ----- */
.footer-block--nj-policy {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.nj-footer__policy-heading {
  display: inline-block;
  border-left: 3px solid var(--color-white);
  padding-left: 8px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.nj-footer__policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nj-footer__policy-list li {
  margin: 0;
}

.nj-footer__policy-link {
  display: inline-block;
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nj-footer__policy-link:hover {
  color: var(--color-gray-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- フッター NJ SHOP SNS ブロック ----- */
.footer-block--nj-sns {
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
}

.nj-footer__sns-heading {
  display: inline-block;
  border-left: 3px solid var(--color-white);
  padding-left: 8px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.nj-footer__sns-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nj-footer__sns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nj-footer__sns-icon:hover {
  opacity: 0.8;
}

.nj-footer__sns-icon img {
  width: 40px;
  height: 40px;
  display: block;
}

/* フッター上部: ブロック群 + 縦区切り線 + ユーティリティアイコン の横並び */
.nj-footer__top-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}

.nj-footer__top-row .footer__blocks-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

/* PC: 5カラムグリッドに変更（ロゴ 1 / CATEGORY 2 / ポリシー 1 / SNS 1） */
@media screen and (min-width: 750px) {
  .nj-footer__top-row .footer__blocks-wrapper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }

  /* Dawn の grid--4-col-tablet .grid__item { width: 25% } を無効化 */
  .nj-footer__top-row .footer__blocks-wrapper > .footer-block {
    width: auto;
    max-width: 100%;
  }

  /* ロゴブロック: 水平・垂直中央配置
     section-footer.css の `.footer-block { display: block }` を上書きするため
     複合セレクタ (.footer-block.footer-block--brand) で詳細度を上げる */
  .footer-block.footer-block--brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* 内部 brand-info は内容高さに固定 */
  .footer-block.footer-block--brand .footer-block__brand-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 0 0 auto;
  }

  .footer-block.footer-block--brand .footer-block__image-wrapper {
    margin-left: auto;
    margin-right: auto;
  }

  /* CATEGORY ブロック: 2カラム分の幅 */
  .footer-block--nj-category {
    grid-column: span 2;
  }
}

.nj-footer__sns-divider {
  display: block;
  width: 1px;
  background-color: var(--color-white);
  align-self: stretch;
  min-height: 72px;
  flex-shrink: 0;
}

.nj-footer__utility-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nj-footer__utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  border-radius: 50%;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nj-footer__utility-icon:hover {
  opacity: 0.8;
}

.nj-footer__utility-icon .nj-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.nj-footer__utility-icon .nj-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-black);
}

/* Dawnのgridレイアウトを上書き: ロゴ左、残り右寄せ */
@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: auto 1fr auto;
  }

  .header--middle-left .header__inline-menu {
    justify-self: end;
  }

  .header--middle-left .header__icons {
    justify-self: end;
  }
}

/* ----- ヘッダー検索フォーム（インライン常時表示） ----- */
.header__inline-menu > ul {
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
}

.header__inline-menu > ul > li:not(.nj-header__search-item) {
  flex-shrink: 0;
}

/* 検索ボックス。
   変更前は枠が 71px しかなく、入力欄 143px がそこからはみ出して文字が読めなかった。
   他のナビ項目が flex-shrink: 0（縮まない）で場所を譲らず、
   伸び縮みする検索だけが潰されていたため。

   当初は min-width: 230px で常時広げようとしたが、横幅が足りず破綻した。
   実測（画面1440px）: ヘッダー内側 1310px に対し
     ロゴ 241 ＋ ナビ 867（検索230含む）＋ アイコン 231 ＝ 1339px
   で 29px はみ出し、アイコンが画面外へ出て横スクロールが発生した。
   ナビ項目だけで 637px あるため、検索を常時広げる余地が無い。

   フォーカス中だけ他のナビ項目を隠して広げる案も一度入れたが、
   選択するたびに項目が消えて位置が動く挙動が受け入れられず撤去した。
   幅は常時のまま変えない。

   代わりに内側（predictive-search / 入力欄）の幅の持ち方を直した。
   これだけで枠が 71px → 147px になり、文字の切れは解消する。 */
.nj-header__search-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 477px;
}

/* li と form の間にある predictive-search は幅を持たない（display: block の
   フレックス項目で basis auto）ため、ここで幅いっぱいに広げておく。
   これが無いと枠が内容幅のまま 71px に潰れ、入力欄がはみ出す。 */
.nj-header__search,
.nj-header__search-item > predictive-search {
  width: 100%;
  min-width: 0;
}

.nj-header__search-form {
  width: 100%;
}

.nj-header__search-form .field {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
}

.nj-header__search-form .search__input {
  width: 100%;
  /* input は既定で 143px 前後の固有幅を持つ。min-width: 0 を付けないと
     枠より小さくならず、枠からはみ出して文字が切れる。 */
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 40px 10px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.nj-header__search-form .search__input:focus {
  outline: none;
}

.nj-header__search-form .search__input::placeholder {
  color: var(--color-gray-1);
  opacity: 1;
}

.nj-header__search-form .search__button,
.nj-header__search-form .reset__button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nj-header__search-form .search__button .svg-wrapper,
.nj-header__search-form .reset__button .svg-wrapper {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.nj-header__search-form .search__button svg,
.nj-header__search-form .reset__button svg {
  width: 100%;
  height: 100%;
}

.nj-header__search-form .reset__button {
  right: 40px;
}

.nj-header__search-form .reset__button.hidden {
  display: none;
}

@media screen and (max-width: 768px) {
  .nj-header__search-item {
    max-width: 208px;
  }

  .nj-header__search-form .search__input {
    font-size: 13px;
    padding: 8px 36px 8px 12px;
  }
}

.header__heading-logo-wrapper {
  background-color: var(--color-black);
  padding: 8px;
}

/* ロゴ右側の補助テキスト
   <span class="header__logo-block"> でロゴ <a> と補助テキストをラップ。
   テキストは <a> の外に配置されるためリンク化されない（ホーム遷移はロゴのみ）。
   非index時は logo-block 自体が .header (display:grid) のグリッドアイテムになるため、
   Dawn が .header__heading-link に与えていた grid-area / justify-self を継承させる */
.header__logo-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.header > .header__logo-block {
  grid-area: heading;
  justify-self: center;
  line-height: 0;
}

@media screen and (max-width: 989px) {
  .header--mobile-left > .header__logo-block {
    justify-self: start;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left > .header__logo-block,
  .header--top-left > .header__logo-block {
    justify-self: start;
    margin-left: -0.75rem;
  }

  .header--middle-center > .header__logo-block,
  .header--top-center > .header__logo-block {
    justify-self: center;
  }
}

.header__logo-subtext {
  font-weight: 500;
  color: var(--color-foreground);
  text-align: left;
  /* リンクではないことを視覚的に示す */
  cursor: default;
  /* 折り返し表示なし、超過分は ... で省略
     2行入力時（改行=<br>）でも各行が個別にトリミングされる */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* font-size / line-height / max-width は
     ヘッダー固定高さに合わせて下記メディアクエリで自動調整 */
}

/* ===== ヘッダー固定高さ + ロゴ/補助テキストの自動フィット =====
   PC (≥990px): 120px / SP・中間サイズ (<990px): 最低 56px（中身が高ければ伸びる）
   ロゴ画像と補助テキストの font-size をヘッダー高さに収まるよう自動調整。 */

@media screen and (min-width: 990px) {
  /* ----- ヘッダーの高さを追従カテゴリバー（84px）に合わせる -----
     変更前は 145px あった。実測した内訳は次のとおり。

       上下の余白 ........ 32px（16 × 2・セクション設定）
       ロゴ画像 .......... 78px
       ロゴ周りの余白 .... 35px（リンク 9.75 × 2 ＋ 枠 8 × 2）
       補助テキスト ...... 88px（76 ＋ 上余白 12）※ロゴと横並びで高い方が採用される

     ロゴ画像 78px に余白が 35px 積み上がって 113px になっていた。
     余白を外し、補助テキストを詰めて 84px に収める。

       上下の余白 4 × 2 ＋ ロゴ 76 ＝ 84px
       補助テキストは 15px × 行間 1.3 × 3行 ＋ 上余白 4 ＝ 62.5px（ロゴより低い） */

  /* セクション設定の padding は header.liquid がインライン <style> で
     `.header { padding-top: … }`（0-1-0）として出す。
     `.header.page-width`（0-2-0）で上回る。設定値自体は触らない。 */
  .header.page-width {
    padding-top: 4px;
    padding-bottom: 4px;
    /* 追従カテゴリバーと同じ 84px に揃える。
       中身（ロゴ76 / 補助テキスト63）はこれより低いので、高さはここで決まる。 */
    min-height: 84px;
  }

  /* Dawn がロゴの周りに持っている余白を外す。ここが 35px を占めていた */
  .header__heading-link {
    padding: 0;
    margin-left: 0;
  }

  .header__heading-logo-wrapper {
    padding: 0;
  }

  /* ロゴの上限だけ決める。高さの確保は .header.page-width の min-height が行う。

     height で固定してはいけない。ロゴ画像は 130×130 の正方形だが、
     横幅は親から max-width: 100% で 57px に絞られている
     （顧客CSS の .header__logo-subtext { width: 100% } が
     グリッドの heading 列を食うため）。
     この状態で height だけ 76px にすると 57×76 に潰れる。実際に一度潰した。 */
  .header__heading-logo {
    max-height: 76px;
    width: auto;
    height: auto;
  }

  /* 補助テキスト。
     font-size と margin-top は顧客がテーマエディタのカスタムCSSで
     `#shopify-section-… .header__logo-subtext`（詳細度 1-0-1）として
     指定しているため、ID に勝てるのは !important しかない。

     本来は顧客側のカスタムCSS を書き換えてもらうのが筋。
       font-size: 1.4rem  →  15px
       margin-top: 12px   →  4px
     書き換えが済んだら、下の2つの !important は外せる。
     マニュアル（docs/catbar-setup-guide）に記載済み。

     480px 以下は顧客CSS が 9.2px を当てており問題が無いので触らない。
     481〜989px も現状維持（ヘッダーは min-height で伸びる作り）。 */
  .header__logo-subtext {
    font-size: 15px !important;
    line-height: 1.3;
    margin-top: 4px !important;
    max-width: 360px;
  }
}

@media screen and (max-width: 989px) {
  /* ヘッダー高さの下限を 56px にする。Dawn の .header { align-items: center } により
     グリッドアイテム（ロゴ・アイコン群）は自動的に上下中央配置される。
     align-self / max-height は重ねず Dawn の挙動に任せる。
     header.liquid:81 のインライン style が
       .header { padding: <padding_top * 0.5>px 3rem <padding_bottom * 0.5>px 3rem }
     を当てているため、box-sizing: border-box (theme.liquid:236) と相まって
     56px 内の有効領域が縮む（縦 padding 分だけ）。
     `.header.page-width` (specificity 0,2,0) でインライン <style> の `.header` (0,1,0)
     を上回り、SP では縦 padding を 0 化、横 padding を 15px に縮小。

     height: 56px の固定はやめ、min-height だけにしてある。
     固定にしていた当時、幅 481〜989px で補助テキストがヘッダーからはみ出していた。
     原因はこちらの指定ではなく顧客側の設定にあり、しかも両方が絡んでいた。

       1. テーマエディタのカスタムCSS（ヘッダーセクション）が
          `.header__logo-subtext { font-size: 1.4rem; margin-top: 12px }` を指定。
          これは #shopify-section-… が自動で付くので特異度 1-0-1 になり、
          下の `.header__logo-subtext { font-size: 9px }`（0-0-1）は必ず負ける。
          顧客CSSには縮小用の @media が max-width: 480px しか無く、
          481〜989px には何の上書きも無い。
       2. 本文フォントサイズ（settings_data.json の body_scale）が 100 → 130 に
          変更されている。ルート font-size は
          `calc(var(--font-body-scale) * 62.5%)`（theme.liquid:237）なので
          1rem = 10px → 13px になり、上記 1.4rem が 14px → 18.2px へ拡大した。
          顧客CSSの 480px 以下のルールだけは px 指定なので影響を受けず、
          結果として中間幅だけが壊れた。

     補助テキストは3行（設定値に改行が2つ）あるため
     18.2px × line-height 1.2 × 3行 + margin-top 12px ＝ 約77px となり、
     56px の枠を約22px 超える。

     特異度で殴り返す（!important）のは、顧客が設定を変えるたびに再発するので採らない。
     高さの固定をやめれば、顧客が文字サイズ・行数・カスタムCSS のどれを変えても
     ヘッダーが中身に合わせて伸びるだけで破綻しない。
     --header-height は header.liquid:359 が offsetHeight の実測値を入れているので、
     追従カテゴリバーの位置（nj-category-bar.js）も自動で追従する。 */
  .header.page-width {
    padding: 0 15px;
    min-height: 56px;
  }

  /* ロゴ画像が 56px に収まるよう padding と max-height を調整 */
  .header__heading-link {
    padding: 4px;
    line-height: 0;
  }

  .header__heading-logo-wrapper {
    padding: 4px;
    line-height: 0;
    box-sizing: border-box;
  }

  /* ロゴ画像高さ上限: 56 - 4*2(link) - 4*2(wrapper) = 40px
     display: block で inline 要素のベースライン下白スペース（約5px）を除去 */
  .header__heading-logo {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
  }

  /* ハンバーガー summary は Dawn の .header__icon:not(.header__icon--summary)
     セレクタから除外されているため flex centering が当たらない。明示的に追加し、
     SVG を 44px ボタン内で上下中央配置 → 56px ヘッダー内でも中央に揃う */
  summary.header__icon--menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 補助テキスト: 全文表示優先で max-width 撤去。
     親 .header__logo-block (inline-flex) が grid セル幅まで自然に広がるため
     通常の SP 幅では全文表示される。万一はみ出した場合のみ ellipsis（base ルール側）。
     min-width: 0 を付けると flex 縮小時にエリプシスが効く */
  .header__logo-subtext {
    font-size: 9px;
    line-height: 1.2;
    min-width: 0;
  }
}

/* ヘッダーアイコンエリア 縦線区切り */
.header__icons {
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 1px solid var(--color-border);
  padding-left: 16px;
}

/* ----- フッター ----- */
.footer {
  background-color: var(--color-black);
  color: var(--color-white);
}

.footer a,
.footer .link {
  color: var(--color-white);
}

.footer a:hover,
.footer .link:hover {
  color: var(--color-gray-1);
}

/* フッター見出しの左縦線 */
.footer-block__heading {
  border-left: 3px solid var(--color-white);
  padding-left: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* フッターコピーライト */
.footer__copyright {
  text-align: center;
  font-size: 10px;
}

/* Powered by Shopify を非表示 */
.copyright__content a[href*="shopify.com"] {
  display: none;
}

/* フッター ユーティリティアイコン（丸背景） */
.footer__utility-icons .icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
}

/* フッター SNSアイコン */
.footer__list-social .list-social__link {
  color: var(--color-white);
}

/* ----- TOPページ セクション見出し ----- */
.collection-list-wrapper .title,
.multicolumn .title,
.rich-text .rich-text__text {
  letter-spacing: 0.1em;
}

/* CATEGORY / BRAND 見出しに左縦線 */
.collection-list-wrapper .title-wrapper-with-link .title,
.multicolumn .title-wrapper-with-link .title {
  display: inline-block;
  border-left: 3px solid var(--color-black);
  padding-left: 12px;
}

/* ----- スライドショー ----- */
.slideshow {
  max-width: 100%;
}

/* スライド矢印を白に */
.slider-button {
  color: var(--color-white);
  background: transparent;
  border: none;
}

/* ----- CONTACTボタン（アウトライン） ----- */
.rich-text .button--primary {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  min-width: 280px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.rich-text .button--primary:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ----- カテゴリカード オーバーフロー制御 ----- */
.collection-card__image-wrapper {
  overflow: hidden;
}

.collection-card__image-wrapper img {
  transition: transform 0.3s ease;
}

.collection-list__item:hover .collection-card__image-wrapper img {
  transform: scale(1.2);
}

/* =============================================================
   商品詳細ページ
   ============================================================= */

/* サムネイルギャラリー */
.product__media-list {
  gap: 8px;
}

/* お気に入りボタン（プロトタイプ：アウトラインスタイル） */
.product__wishlist-button {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  text-align: center;
  font-weight: 700;
  cursor: pointer;
}

/* カートに入れるボタン */
.product-form__submit {
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  width: 100%;
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
}

/* 型番・JANコード */
.product__sku,
.product__barcode {
  font-size: 14px;
  color: var(--color-gray-1);
}

/* 「最近チェックした商品」見出し */
.related-products .title {
  font-weight: 700;
  font-size: 18px;
}

/* =============================================================
   カートページ
   ============================================================= */

/* カートタイトル */
.cart__title {
  font-weight: 700;
  font-size: 32px;
}

/* 備考欄 */
.cart__note {
  width: 100%;
}

.cart__note label {
  font-weight: 700;
  font-size: 16px;
}

.cart__note .text-area {
  min-height: 160px;
  border: 1px solid var(--color-border);
  border-radius: 0;
}

/* カートフッター 2カラムレイアウト */
@media screen and (min-width: 750px) {
  .cart__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* お問い合わせボタン（セカンダリ） */
.cart__contact-button {
  display: block;
  width: 100%;
  padding: 20px;
  background-color: var(--color-gray-1);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 0;
  margin-top: 12px;
}

/* 買い物を続けるリンク */
.cart__continue-shopping {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: var(--color-black);
  font-weight: 700;
}

/* 見積もり合計 */
.totals__total {
  font-weight: 700;
  font-size: 18px;
}

.totals__total-value {
  font-weight: 700;
  font-size: 18px;
}

/* =============================================================
   SP レスポンシブ対応（768px以下）
   ============================================================= */

/* ヘッダー・ドロワーは 989px 以下（SP+中間幅）で同じSPレイアウトを適用 */
@media screen and (max-width: 989px) {

  /* ----- SP ヘッダー ----- */
  /* レイアウト: [logo] [cart] [hamburger] の順で右寄せ */
  .header--mobile-left {
    grid-template-areas: 'heading icons left-icons';
    grid-template-columns: 1fr auto auto;
  }

  /* ハンバーガーを右端に配置（Dawn標準は左配置）
     カートとの間に 32px 確保、中央（16px位置）に縦区切り線 */
  .header--mobile-left header-drawer {
    justify-self: end;
    margin-left: 32px;
    margin-right: -1.2rem;
    position: relative;
  }

  .header--mobile-left header-drawer::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: var(--color-border);
  }

  /* ナビテキストを非表示（検索バーも内部的に非表示の前提） */
  .header__inline-menu > ul > li:not(.nj-header__search-item) {
    display: none;
  }

  /* ヘッダー内のユーティリティアイコンは全て非表示（ドロワー内に別途配置） */
  .header__icons .header__icon--account,
  .header__icons .header__icon--logout,
  .header__icons .header__icon--register,
  .header__icons .header__icon--login {
    display: none;
  }

  .header__icons {
    border-left: none;
    padding-left: 0;
    gap: 8px;
  }

  /* ----- SP メニュードロワー（全画面オーバーレイ） -----
     component-menu-drawer.css が custom.css より後に読み込まれるため、
     IDセレクタで specificity を 1-0-0 に引き上げて上書き */
  #menu-drawer.menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    z-index: 4;
    background: var(--color-black);
    color: var(--color-white);
  }

  #menu-drawer.menu-drawer a,
  #menu-drawer.menu-drawer .link {
    color: var(--color-white);
  }

  /* サマリー（ハンバーガー／× 閉じるボタン）をドロワーより前面に配置 */
  header-drawer summary.header__icon--menu {
    position: relative;
    z-index: 5;
  }

  /* ドロワー展開中は × アイコンを白で表示（icon-close.svg の fill="currentColor" を利用） */
  header-drawer details[open] > summary.header__icon--menu {
    color: var(--color-white);
  }

  /* Dawn標準のドロワーbackdrop擬似要素を無効化
     （全画面ドロワーが不透明黒で覆うため不要。残すと半透明黒オーバーレイが重なって色ズレが発生） */
  .header__icon--menu[aria-expanded='true']::before {
    display: none;
  }

  /* ----- ドロワー全体の縦組み -----
     Dawn 標準では .menu-drawer__navigation-container が height:100% を持つため、
     その上に積まれる上部アイコン列（60px）と検索バーの分だけ内容が親からはみ出す。
     ナビの項目が少ないうちは目立たないが、項目が増えるとはみ出し量が効いてきて、
     上部アイコンが画面外へ押し出され、検索バーが close ボタンと重なって見える。

     内側コンテナを縦フレックスにして、上部アイコン列と検索バーは固定、
     ナビゲーションだけが残りの高さを取ってスクロールするようにする。
     min-height:0 は、フレックス項目が内容より小さく縮めるようにするために必須
     （これが無いと overflow-y:auto が効かず、はみ出しが再発する）。 */
  .menu-drawer__inner-container {
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__top-icons,
  .menu-drawer__search {
    flex: 0 0 auto;
  }

  .menu-drawer__navigation-container {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* ドロワー上部のアイコン列（サマリー × ボタンと同列に配置）
     StickyHeader.js が --header-height を設定。未設定時は 60px フォールバック */
  .menu-drawer__top-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 60px 0 16px; /* 右は close ボタン分のスペース確保 */
    justify-content: flex-end;
    height: var(--header-height, 60px);
    box-sizing: border-box;
  }

  .menu-drawer__top-icons .header__icon {
    width: 32px;
    height: 32px;
    position: relative;
  }

  /* カートと × ボタンの間隔を 32px 確保し、中央（16px位置）に縦区切り線 */
  .menu-drawer__top-icons .header__icon--cart {
    margin-right: 32px;
  }

  .menu-drawer__top-icons .header__icon--cart::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.3);
  }

  /* SVG 内部の path に fill="black" が直書きされているため、path に直接上書き */
  .menu-drawer__top-icons .header__icon .nj-icon svg,
  .menu-drawer__top-icons .header__icon .nj-icon svg path {
    fill: var(--color-white);
  }

  .menu-drawer__top-icons .header__icon:hover .nj-icon svg,
  .menu-drawer__top-icons .header__icon:hover .nj-icon svg path {
    fill: var(--color-gray-2);
  }

  /* ----- SP メニュードロワー内の検索バー ----- */
  .menu-drawer__search {
    padding: 16px;
  }

  .menu-drawer__search .nj-header__search-form .field {
    background-color: var(--color-white);
  }

  .menu-drawer__search .nj-header__search-form .search__input {
    color: var(--color-black);
  }

  .menu-drawer__search .nj-header__search-form .search__input::placeholder {
    color: var(--color-gray-1);
    opacity: 1;
  }

  /* ----- ドロワー内ナビゲーション（CATEGORY アコーディオン + CONTACT） ----- */
  .menu-drawer__navigation {
    padding: 0;
  }

  .menu-drawer__navigation .menu-drawer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

 .menu-drawer__navigation .menu-drawer__menu > li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
  /* CATEGORY サマリー */
  .nj-drawer__category-details > summary.nj-drawer__category-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: var(--color-white);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }

  .nj-drawer__category-details > summary.nj-drawer__category-summary::-webkit-details-marker {
    display: none;
  }

  .nj-drawer__category-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
  }

  .nj-drawer__category-icon svg,
  .nj-drawer__category-icon svg path {
    fill: var(--color-white);
    width: 100%;
    height: 100%;
  }

  .nj-drawer__menu-label {
    flex: 1 1 auto;
    letter-spacing: 0.05em;
  }

  .nj-drawer__category-caret {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  /* Dawn 標準の summary .icon-caret { position: absolute } を static に戻し、
     ラッパー内でサイズ・位置を固定（transform:rotate のコンテナブロック問題を回避） */
  .nj-drawer__category-caret svg {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
  }

  .nj-drawer__category-caret svg,
  .nj-drawer__category-caret svg path {
    fill: var(--color-white);
  }

  .nj-drawer__category-details[open] > summary .nj-drawer__category-caret {
    transform: rotate(180deg);
  }

  /* CATEGORY 一覧 */
  .nj-drawer__category-list {
    padding: 0 20px 16px 52px; /* 左は icon + gap 分インデント */
    margin: 0;
  }

  .nj-drawer__category-list li {
    padding: 6px 0;
  }

  .nj-drawer__category-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8;
    display: inline-block;
  }

  .nj-drawer__category-link.is-active {
    font-weight: 700;
  }

  /* CONTACT リンク */
  .nj-drawer__contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  /* ----- ドロワーのラベル色を白で固定（公開中テーマから引き継ぎ・整理済み） -----
     顧客がテーマ設定（settings_data.json の platform_customizations.custom_css）に
       a[href*="カタログ-1"] * { color: #000000 !important; opacity: 1 !important; }
     を登録しているため、WEBカタログのリンクの子要素が黒で塗られる。
     ドロワーの背景は #menu-drawer.menu-drawer で黒にしているので、
     打ち消さないと黒背景に黒文字でラベルが消える。

     公開中テーマには color 以外に display / visibility / opacity / font-size /
     width / height / clip / overflow の計9個の !important が並んでいたが、
     実際に効いているのは color だけ（ラベルは隠されておらず、色だけが問題）。
     残り8個は削除した。

     本来は顧客側のセレクタから ` *` を外してもらうのが筋。連絡事項に記載済み。 */
  .nj-drawer__contact-link .nj-drawer__menu-label,
  li .nj-drawer__contact-link span.nj-drawer__menu-label {
    color: var(--color-white) !important;
  }


  .nj-drawer__contact-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
  }

  .nj-drawer__contact-icon svg,
  .nj-drawer__contact-icon svg path {
    fill: var(--color-white);
    width: 100%;
    height: 100%;
  }

  /* Dawn標準のドロワー下部ユーティリティ（SNS/アカウント/ローカライズ）を非表示 */
  .menu-drawer__utility-links {
    display: none;
  }
}

/* ヘッダー以外のSP用スタイル（768px以下のみ） */
@media screen and (max-width: 768px) {
  /* ----- SP フッター ----- */
  /* ユーティリティアイコン（丸背景）をSPでは非表示 */
  .footer__utility-icons,
  .nj-footer__sns-divider,
  .nj-footer__utility-icons {
    display: none;
  }

  /* SPでは横並びを解除してブロック群のみ表示 */
  .nj-footer__top-row {
    display: block;
  }

  /* フッターカテゴリを2カラムに */
  .footer-block__details-content.list-unstyled {
    columns: 2;
  }

  /* ----- SP カートページ ----- */
  .cart__footer {
    display: block;
  }

  .cart__note {
    margin-bottom: 24px;
  }

  .cart__contact-button {
    font-size: 14px;
    padding: 16px;
  }

  /* ----- SP 商品詳細 ----- */
  .product-form__submit {
    font-size: 14px;
    padding: 16px;
  }

  .product__wishlist-button {
    padding: 12px;
    font-size: 14px;
  }

  /* ----- SP セクション見出し ----- */
  .section-heading {
    font-size: 16px;
  }

  .category-title {
    font-size: 14px;
  }

  /* ----- SP CONTACTボタン ----- */
  .rich-text .button--primary {
    min-width: 200px;
    font-size: 14px;
  }

  /* ----- SP マイページ サイドバー下部移動 ----- */
  .mypage-sidebar {
    order: 2;
    width: 100%;
  }

  .mypage-content {
    order: 1;
    width: 100%;
  }
}

/* =============================================================
   ログインページ
   ============================================================= */

/* ログインフォームコンテナ */
.customer.login {
  max-width: 680px;
  border: 1px solid var(--color-border);
  padding: 64px 114px;
  margin: 40px auto;
  text-align: left;
}

.customer.login h1 {
  font-size: 32px;
  font-weight: 700;
}

/* ログインボタン */
.customer.login button {
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
}

/* 新規会員登録リンクをボタンスタイルに */
.customer.login a[href*="register"] {
  display: block;
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  text-align: center;
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
  margin-top: 16px;
}

/* パスワード忘れリンク */
.customer.login a[href="#recover"] {
  font-size: 14px;
  color: var(--color-black);
}

/* Shop Loginボタンを非表示（デザインにないため） */
.customer.login section[name="sign-in-with-shop-provider"] {
  display: none;
}

@media screen and (max-width: 768px) {
  .customer.login {
    padding: 24px 16px;
    margin: 16px;
    border: 1px solid var(--color-border);
  }

  .customer.login h1 {
    font-size: 16px;
  }

  .customer.login button,
  .customer.login a[href*="register"] {
    font-size: 14px;
    padding: 16px;
  }
}

/* =============================================================
   会員登録ページ
   ============================================================= */

.customer.register {
  max-width: 680px;
  margin: 40px auto;
  text-align: left;
}

.customer.register h1 {
  font-size: 32px;
  font-weight: 700;
}

.customer.register .field {
  margin-top: var(--form-field-spacing);
}

.customer.register button {
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  padding: 20px;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .customer.register {
    margin: 16px;
  }

  .customer.register h1 {
    font-size: 16px;
  }
}

/* =============================================================
   お問い合わせページ
   ============================================================= */

.nj-contact {
  max-width: 960px;
}

.nj-contact__breadcrumb {
  margin: 0 0 24px;
  padding: 0;
}

.nj-contact__title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
}

.nj-contact__lead {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 2;
}

.nj-contact__lead p {
  margin: 0;
}

.nj-contact__required-mark {
  color: var(--color-required);
  font-weight: 700;
}

.nj-contact__fields {
  border: 1px solid var(--color-border);
  padding: 40px;
}

.nj-contact__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.nj-contact__row:first-child {
  padding-top: 0;
}

.nj-contact__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.nj-contact__label {
  font-weight: 700;
  line-height: 1.6;
  padding-top: 8px;
}

.nj-contact__control {
  min-width: 0;
}

.nj-contact__input {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-black);
}

.nj-contact__textarea {
  max-width: 640px;
  min-height: 200px;
  resize: vertical;
}

.nj-contact__input:focus {
  outline: 2px solid var(--color-black);
  outline-offset: -1px;
}

.nj-contact__row.is-invalid .nj-contact__input {
  border-color: var(--color-required);
}

.nj-contact__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-gray-1);
}

.nj-contact__errors {
  margin-top: 8px;
}

.nj-contact__error-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-required);
  line-height: 1.6;
}

.nj-contact__error-text + .nj-contact__error-text {
  margin-top: 4px;
}

.nj-contact__preview {
  font-size: 14px;
  line-height: 2;
  white-space: pre-wrap;
  word-break: break-word;
  padding-top: 8px;
}

.nj-contact__actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.nj-contact__actions-confirm:not([hidden]) {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.nj-contact__button {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border: none;
  border-radius: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nj-contact__button:hover {
  background-color: var(--color-gray-1);
}

.nj-contact__actions-confirm .nj-contact__button {
  flex: 1 1 0;
  max-width: 280px;
}

.nj-contact__button--back {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.nj-contact__button--back:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ----- 送信完了 ----- */
.nj-contact__complete {
  text-align: center;
  padding: 40px 0;
}

.nj-contact__complete-title {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 700;
}

.nj-contact__complete-body {
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 2;
}

.nj-contact__complete-body p {
  margin: 0 0 24px;
}

.nj-contact__complete-body p:last-child {
  margin-bottom: 0;
}

.nj-contact__complete-button {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: var(--color-gray-1);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

.nj-contact__complete-button:hover {
  opacity: 0.85;
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .nj-contact__fields {
    padding: 24px 16px;
  }

  .nj-contact__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }

  .nj-contact__label {
    padding-top: 0;
  }

  .nj-contact__input,
  .nj-contact__textarea {
    max-width: 100%;
  }

  .nj-contact__button,
  .nj-contact__complete-button {
    font-size: 14px;
    padding: 16px;
  }
}

/* =============================================================
   マイページ（アカウント）
   ============================================================= */

.customer.account {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.customer.account .account-sidebar {
  width: 280px;
  background-color: #333333;
  color: var(--color-white);
  padding: 40px 24px;
}

.customer.account .account-sidebar a {
  color: var(--color-white);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.customer.account .account-content {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  .customer.account {
    flex-direction: column;
  }

  .customer.account .account-sidebar {
    width: 100%;
    order: 2;
  }

  .customer.account .account-content {
    order: 1;
    width: 100%;
  }
}

/* =============================================================
   固定ページ（特商法・プライバシーポリシー等）
   ============================================================= */

.main-page .page-width {
  max-width: 900px;
}

.main-page h1,
.main-page h2.page__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
}

.main-page .rte h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
}

.main-page .rte h3 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 8px;
}

.main-page .rte p {
  margin-bottom: 16px;
}

.main-page .rte ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

.main-page .rte ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

@media screen and (max-width: 768px) {
  .main-page h1,
  .main-page h2.page__title {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .main-page .rte h2 {
    font-size: 16px;
    margin-top: 32px;
  }

  .main-page .rte h3 {
    font-size: 14px;
    margin-top: 24px;
  }
}

/* =============================================================
   カスタムアイコン共通
   ============================================================= */

.nj-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media screen and (max-width: 768px) {
  .nj-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* =============================================================
   パンくずリスト
   ============================================================= */

/* body が display: grid のため、page-width の margin: 0 auto によりグリッドアイテムが
   content 幅まで縮小されて中央配置されてしまう。width: 100% で明示的にストレッチ。 */
.breadcrumb {
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  line-height: 200%;
  text-align: left;
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: 0;
  margin: 0;
  gap: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: ">";
  margin: 0 8px;
  color: var(--color-gray-1);
}

.breadcrumb__item a {
  color: var(--color-black);
  text-decoration: none;
}

.breadcrumb__item a:hover {
  text-decoration: underline;
}

.breadcrumb__item--current span {
  font-weight: 700;
  color: var(--color-black);
}

/* =============================================================
   スクロールトップボタン
   ============================================================= */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
  padding: 0;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.back-to-top:hover svg {
  fill: var(--color-white);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 768px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

/* =============================================================
   ヘッダー カスタムアイコン
   ============================================================= */

/* ヘッダーアイコン ホバー */
/* SVG 内部の path に fill="black" が直書きされているため、path にも直接上書き */
.header__icon .nj-icon svg,
.header__icon .nj-icon svg path {
  fill: var(--color-black);
}

.header__icon:hover .nj-icon svg,
.header__icon:hover .nj-icon svg path {
  fill: var(--color-gray-2);
}

/* CATEGORY summary 内アイコン ホバー */
.nj-header__category-summary .nj-icon svg,
.nj-header__category-summary .nj-icon svg path {
  fill: var(--color-black);
}

.nj-header__category-summary:hover .nj-icon svg,
.nj-header__category-summary:hover .nj-icon svg path {
  fill: var(--color-gray-2);
}

/* CONTACT リンク内アイコン ホバー */
.nj-header__contact-link .nj-icon svg,
.nj-header__contact-link .nj-icon svg path {
  fill: var(--color-black);
}

.nj-header__contact-link:hover .nj-icon svg,
.nj-header__contact-link:hover .nj-icon svg path {
  fill: var(--color-gray-2);
}

/* WEBカタログのアイコンだけは塗りではなく線画。
   icon-nj-catalog.svg は fill="none" ＋ stroke="currentColor" で描いている
   （他のアイコンは fill="black" の塗り）。

   ここに fill を当てると、本来 透明だった内部が塗りつぶされるだけで、
   見えている線（stroke）の色は変わらない。
   「ホバー時の色変更がアイコン内部にしか反映されない」のはこれが原因だった。

   stroke は currentColor なので、リンクの color（通常 黒／ホバー時 gray-2）に
   自動で追従する。fill は none に戻しておく。 */
.nj-header__catalog-link .nj-icon svg,
.nj-header__catalog-link .nj-icon svg path {
  fill: none;
  stroke: currentColor;
}

/* ----- ドロワーのメニュー項目の余白（公開中テーマから引き継ぎ） -----
   公開中テーマで追記されていたルール。出自は、メニューの WEBカタログ 項目が
   header-drawer.liquid で空の <li> として出力されていた不具合への対処と思われる。
   その不具合はこちらで解消済み（固定描画に移行し is_catalog_link を撤去）なので、
   この2ルールは本来不要の可能性が高い。実機で確認できた時点で削る。 */
.menu-drawer__menu .list-menu > li:last-child {
  border-bottom: none;
}

.menu-drawer__menu > li {
  margin-bottom: 0 !important;
}

/* =============================================================
   重なり順（z-index）の整理
   -------------------------------------------------------------
   追従カテゴリバー（sections/nj-category-bar.liquid）を本文より
   確実に前面へ出すための調整。

   Dawn の既定では
     ヘッダー ................ 3
     本文のあちこち .......... 2〜5
   となっていて、同値になった場合は DOM 順で後ろ（＝本文）が勝つ。
   バーはヘッダーグループにあり本文より前にあるため、既定のままでは
   本文側に必ず負ける。実際、商品ページの .product__column-sticky
   （画像ギャラリーと商品情報。section-main-product.css）が z-index: 2 で
   position: sticky, top: 3rem のため、スクロールすると必ずバーを覆っていた。

   同じ理由で前面に出うるものは他にもある（画像バナーの .banner__content、
   商品カードの .full-width-link、絞り込みのチェックボックス等）ので、
   個別に下げるのではなくバーとヘッダーをまとめて引き上げる。

   確定した並び:
     本文 ............ 〜5（Dawn 既定のまま）
     カテゴリバー .... 10（nj-category-bar.liquid の style ブロック）
     ヘッダー ........ 11（下記）
     オーバーレイ .... 100〜（モーダル・ドロワー・絞り込み等。変更しない）

   10 と 11 を一組で扱うこと。バーだけ上げると、スクロールアップで
   ヘッダーが降りてくる 0.15 秒のアニメーション中にバーがヘッダーを覆う。
   ============================================================= */

/* base.css:2313 と同じ詳細度（0-2-0）。custom.css は base.css より後に
   読み込まれる（layout/theme.liquid）ので、後勝ちで上書きされる。 */
.section-header.shopify-section-group-header-group {
  z-index: 11;
}

/* 店舗受取ドロワーは全高 position: fixed で、ヘッダーより前面である必要がある。
   ヘッダーを 11 に上げた分だけこちらも上げる。

   詳細度を body で 0-0-2 に上げているのは、component-pickup-availability.css が
   snippets/buy-buttons.liquid の中で custom.css より後に読み込まれるため。
   同じ 0-0-1 で書くと後勝ちで z-index: 4 に戻されて効かない。 */
body pickup-availability-drawer {
  z-index: 102;
}

/* =============================================================
   [NJ-TMP-VIEWPORT-OFFSET]　暫定・撤去前提
   -------------------------------------------------------------
   商品詳細ページで商品画像の下側が画面に収まらない件の対処。
   恒久対応が決まるまでの暫定措置なので、決まったら撤去する。

   ■ 撤去手順（2箇所。`NJ-TMP-VIEWPORT-OFFSET` で grep すれば全部出る）
     1. このブロックを丸ごと削除する
     2. assets/nj-category-bar.js の publishHeight() と、
        connectedCallback / disconnectedCallback 内の onResize 3行を削除する

   ■ Dawn の高さ決定式（section-main-product.css:1300 付近）
     --constrained-height = max(--constrained-min-height, 100vh - --viewport-offset)
     既定値（750px 以上）は --viewport-offset: 170px / --constrained-min-height: 500px

   商品画像は 2000x2000 の正方形なので、画像の高さ ＝ 画像列の幅 になる。
   列の幅は --constrained-height から逆算される（media-fit-contain のとき
   --contained-width: calc(--constrained-height * --aspect-ratio)）。
   つまり --constrained-height がそのまま画像の一辺になる。

   ■ ここで2つとも上書きしている理由
   1. --viewport-offset（170px）
      Dawn 側のコメントに「arbitrary offset value based on average theme
      spacing and header height」とあるとおり決め打ち。NJ SHOP では
      ヘッダー・追従バー・パンくず・セクション上余白で実測 350px 前後あり、
      170px では画像が 180px ほど画面からあふれる。

   2. --constrained-min-height（500px）  ← これが本丸
      下限値。--viewport-offset をいくら増やしても、計算結果が 500px を
      下回ると 500px に引き戻される。
      実際、--viewport-offset を +74px した検証で画像サイズがほぼ変わらず
      「改善なし」となったのはこれが原因。画像に使える実寸は 470px 前後しか
      ないので、500px の下限がある限り必ずあふれる。
      300px（Dawn の 750px 未満での値）まで下げる。

   ■ 調整方法
   --nj-tmp-media-extra だけを動かす。
     まだ下が切れる .......... 値を上げる（画像は小さくなる）
     画像が小さすぎる ........ 値を下げる
   この値はヘッダーと追従バー以外の占有分（パンくず、セクション上余白、
   画像上の余白）をまとめたもの。サムネイルはメイン画像の右に移したので
   （[NJ-THUMB-SIDE]）縦方向には効かず、含めない。

   ■ 84px の根拠（2026-10-15 実測）
   ギャラリーの上端は商品によらず 252px で安定していた
   （SALE の有無・サムネイルの枚数を変えても同じ）。
     ヘッダー84 ＋ 追従バー84 ＋ 84 ＝ 252
   当初 100px にしていたが、これは上端を 291px と測ったときの値。
   291px は [NJ-THUMB-SIDE] の position: relative が Dawn の top: 3rem を
   拾って 39px ずれていたもので、そちらを top: 0 で直したため 252px に戻る。
   100px のままだと上限が 16px 甘く、縦に短い画面でメイン画像の下が切れる。
   ============================================================= */

:root {
  /* パンくず＋セクション上余白の合計。
     ギャラリー上端 252px − ヘッダー84 − 追従バー84 の実測値 */
  --nj-tmp-media-extra: 84px;
}

@media screen and (min-width: 750px) {
  .product .product-media-container.constrain-height {
    /* .product を足して 0-3-0 にしている。section-main-product.css は
       custom.css より後に読まれるため、同じ 0-2-0 では後勝ちで負ける */
    --viewport-offset: calc(
      var(--header-height, 120px) + var(--nj-catbar-height, 0px) + var(--nj-tmp-media-extra, 100px)
    );
    --constrained-min-height: 300px;
  }
}

/* =============================================================
   商品詳細ページ：画像列と情報列の幅
   -------------------------------------------------------------
   セクション設定「メディアのサイズ」は 小=45% が下限。
   それより画像を小さく（情報側を広く）したいのでCSSで上書きする。

   ■ 調整方法
   下の --nj-product-media-width の数値だけを変える。画像列の割合で、
   情報列は自動で残り全部になる（100% から引いた値）。

     40%  … 画像 357px ／ 情報 536px
     35%  … 画像 313px ／ 情報 581px   ← 現在
     30%  … 画像 268px ／ 情報 626px

   ※px は画面幅 1024px での実測値。画面が広ければ比例して大きくなる。

   小さくしすぎると商品の素材感・サイズ感が分からなくなる。
   サムネイル列も一緒に小さくなる点にも注意。

   ■ なぜ .product を頭に付けているか
   section-main-product.css は sections/main-product.liquid の中で読まれ、
   custom.css より後に来る。Dawn 側の
   `.product--small:not(.product--no-media) .product__media-wrapper`（0-3-0）と
   同じ詳細度では後勝ちで負けるので、`.product` を足して 0-4-0 にしている。
   ============================================================= */

:root {
  --nj-product-media-width: 35%;
}

@media screen and (min-width: 990px) {
  .product.product--small:not(.product--no-media) .product__media-wrapper {
    max-width: var(--nj-product-media-width);
    width: calc(var(--nj-product-media-width) - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .product.product--small:not(.product--no-media) .product__info-wrapper {
    max-width: calc(100% - var(--nj-product-media-width));
    width: calc(100% - var(--nj-product-media-width) - var(--grid-desktop-horizontal-spacing) / 2);
  }
}


/* =============================================================
   ヘッダーが横に収まらない幅では、ナビの文字を隠してアイコンだけにする
   -------------------------------------------------------------
   ヘッダーに必要な幅は（画面1024pxでの実測）

     ロゴ 241 ＋ ナビ 700 ＋ アイコン群 231 ＝ 1172px

   に対してヘッダーの内側は 894px しかなく、278px あふれて横スクロールが
   出ていた。余白を詰めて 84px 稼いだが、それでも 1302px 未満では収まらない。

   文字を隠すとナビが 700 → 283px になり、必要幅は 755px まで下がって
   990px の画面でも収まる。

   display: none ではなく画面外へ飛ばす形にしているのは、読み上げソフトや
   検索エンジンには文字を残すため。幅は 1px になるのでレイアウト上は消える。

   1302px 以上では従来どおり文字が出る。
   ============================================================= */

@media screen and (min-width: 990px) and (max-width: 1301px) {
  .nj-header__category-summary > span:not(.svg-wrapper),
  .nj-header__catalog-link > span:not(.svg-wrapper),
  .nj-header__contact-link > span:not(.svg-wrapper) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* -------------------------------------------------------------
   WEBカタログのホバー色を、顧客のテーマ全体カスタムCSSから取り返す
   -------------------------------------------------------------
   settings_data.json の platform_customizations.custom_css に
   顧客が次を登録している（管理画面 → テーマをカスタマイズ → 設定 → カスタムCSS）。

     a[href*="カタログ-1"]   { color: #000000 !important; font-weight: 700 !important; }
     a[href*="カタログ-1"] * { color: #000000 !important; opacity: 1 !important; }

   WEBカタログのリンク先は /pages/カタログ-1 なのでこれに当たり、
   リンク本体と「すべての子要素」の color が黒で固定される。その結果

     ・文字が黒のまま
     ・アイコンの線は stroke: currentColor なので、黒に固定された color を見て黒のまま
     ・こちらが直接指定していた fill だけが変わる

   という動きになっていた。先に「内部だけ色が変わる」ように見えたのもこれが理由。

   !important 同士では詳細度が高い方が勝つ。
     顧客側 a[href*="…"]                     0-1-1
     こちら .nj-header__catalog-link×2:hover  0-3-0  ← 勝つ
   子要素にも当てないと stroke が追従しないため、`*` まで含めている。

   本来は顧客側のセレクタから末尾の ` *` を外してもらうのが筋で、
   そうすればこの打ち消しは不要になる。マニュアルに記載済み。
   ------------------------------------------------------------- */

.nj-header__catalog-link.nj-header__catalog-link:hover,
.nj-header__catalog-link.nj-header__catalog-link:hover * {
  color: var(--color-gray-2) !important;
}

/* =============================================================
   [NJ-THUMB-SIDE]　商品ページ：サムネイルをメイン画像の右に縦並びにする
   -------------------------------------------------------------
   撤去する場合はこのブロックを丸ごと削除する（`NJ-THUMB-SIDE` で grep）。
   コミットを分けてあるので `git revert` でも戻せる。

   ■ なぜ必要か
   Dawn はサムネイルをメイン画像の「下」に置くため、縦に積み上がって
   画面に収まらない。実測（画面1440x900・商品 32688_秋冬 防風ストレッチピステ）:

     メイン画像 459 ＋ サムネイル 223（表示8枚が4列×2段）＝ 707px
     ギャラリーの開始位置 252px → 下端 959px > 画面 900px

   画面が広いほど差が開く（画像列が本文領域の35%で、本文領域は1716pxで頭打ち）。
     1920x900 … メイン 555 ＋ サムネ 271 → 下端 1104px（204px あふれる）
   メイン画像単体は --constrained-height の上限が別に効くので収まっていた。
   あふれていたのはサムネイルのほう。

   スクロールする前の時点でサムネイルが画面の外にある。

   ■ 変更後
   メイン画像の右に幅 72px の縦列を置く。縦方向はメイン画像の高さに収まり、
   入りきらない分はその列の中だけでスクロールする。

     画像列 459 = メイン 375 ＋ 隙間 12 ＋ サムネ列 72
     メイン画像は正方形なので 375x375 まで小さくなる
     → ギャラリー全体が 375px に収まり、サムネイルも同時に見える

   並びは左から メイン画像 → サムネイル → 商品名・価格（情報列）。
   DOM の順番がそのままなので order は使っていない。

   ■ 注意
   メイン画像は 459 → 375px に小さくなる。サムネイル列のぶんを
   横から取っているため。これ以上メインを大きくしたい場合は
   --nj-product-media-width（画像列の割合）を広げる。
   ============================================================= */

@media screen and (min-width: 990px) {
  /* サムネイル列は絶対配置にする。
     flex で横に並べると、サムネイルの枚数しだいで列のほうが背が高くなり
     （実測: サムネ列 568px に対しメイン画像 401px）メイン画像の下に
     空きが出てギャラリー全体も高くなる。
     絶対配置なら高さはメイン画像だけで決まり、サムネイルはその高さに
     合わせて中でスクロールする。 */
  .product .product__media-wrapper media-gallery {
    position: relative;
    display: block;
    /* top: 0 を明示する理由（2026-10-15）
       media-gallery には Dawn の .product__column-sticky が付いており、
       section-main-product.css:23 で position: sticky / top: 3rem が当たっている。
       ここで position を relative に変えると sticky は無効になるが top は残り、
       相対配置のオフセットとして効いてギャラリーが 3rem（＝39px）下にずれる。
       本文フォントサイズ 130% で 1rem = 13px なので 3rem = 39px。
       ずれた分だけ画面の縦を無駄に使い、画像も小さくなるので 0 に戻す。 */
    top: 0;
  }

  /* メイン画像側。右にサムネイル列のぶんだけ空ける（72 + 隙間12） */
  .product .product__media-wrapper media-gallery > slider-component:not(.thumbnail-slider) {
    display: block;
    margin-left: 0;
    margin-right: 84px;
  }

  /* サムネイル列。メイン画像の右端に、同じ高さで重ねる */
  .product .product__media-wrapper .thumbnail-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 72px;
    margin: 0;
    overflow: hidden;
  }

  .product .product__media-wrapper .thumbnail-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .product .product__media-wrapper .thumbnail-list__item {
    flex: 0 0 auto;
    width: 64px;
    max-width: 64px;
  }

  /* 横スクロール用の矢印は縦並びでは意味がないので隠す */
  .product .product__media-wrapper .thumbnail-slider .slider-button {
    display: none;
  }
}

/* =============================================================
   [NJ-WIDE-INFO]　広い画面では情報列を固定幅にして、画像列に残りを回す
   -------------------------------------------------------------
   撤去する場合はこのブロックを丸ごと削除する（`NJ-WIDE-INFO` で grep）。

   ■ なぜ必要か
   Dawn は商品情報の中身に上限幅を掛けている（section-main-product.css:292）。

     .product__info-container { max-width: 60rem; }

   本文フォントサイズが 130% なので 1rem = 13px、つまり 60rem = 780px。
   情報列は割合（65%）で伸びるのに中身は 780px で止まるため、
   画面が広いほど右に空白が増える。

   実測（画面1800px）:
     情報列の枠   662 → 1693（幅1031）
     情報列の中身 727 → 1507（幅 780・全要素が同一）
     → 右に 186px の空白

   ■ 変更後
   情報列を「中身の上限 60rem ＋ 左の余白 5rem ＝ 65rem」の固定幅にし、
   余った幅は画像列が取る。空白が消えて画像も大きくなる。

     画面1800 … 情報列 845 ／ 画像列 741（メイン657 ＋ サムネ84）
     画面1500 … 情報列 845 ／ 画像列 525（メイン441 ＋ サムネ84）

   px ではなく rem で書いているのは、本文フォントサイズを変えられても
   Dawn の 60rem と一緒にずれるようにするため。

   ■ 1430px という境目の根拠
   「固定幅にしたほうが画像列が広くなるか」が切り替わる点を計算で出している。

     従来（割合35%）  画像列 = 本文領域 × 0.35
     今回（情報列固定） 画像列 = 本文領域 − 65rem(845px)
     一致するのは 0.35g = g − 845 → g = 1300 → 画面幅 1430px
     （本文領域 g = min(画面幅, 1716) − 130）

   これより狭いと固定幅のほうが画像列が狭くなるので当てない。
   境目では両者が一致するため、リサイズしても段差が出ない。
   当初 1500px にしていたが、1430〜1499 の間だけ本来より画像が小さくなり、
   切り替わりで 459 → 525 の段差が出ていた。
   ============================================================= */

@media screen and (min-width: 1430px) {
  .product.product--small:not(.product--no-media) .product__info-wrapper {
    max-width: var(--nj-product-info-width, 65rem);
    width: var(--nj-product-info-width, 65rem);
  }

  .product.product--small:not(.product--no-media) .product__media-wrapper {
    max-width: calc(100% - var(--nj-product-info-width, 65rem));
    width: calc(100% - var(--nj-product-info-width, 65rem) - var(--grid-desktop-horizontal-spacing) / 2);
  }
}