/** 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 {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.4rem;
  background-color: var(--color-white);
  color: var(--color-black);
  border: none;
  border-radius: 0;
  padding: 1.2rem;
  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 {
  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 {
  text-decoration: none;
}

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

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

/* ----- PCヘッダー CATEGORYボタンリンク（summary要素、独自クラス） ----- */
.nj-header__category-summary {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.4rem;
  padding: 1.2rem;
  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;
}

.nj-header__search-item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 477px;
}

.nj-header__search,
.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%;
  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) {
  .header {
    min-height: 120px;
  }

  .header__logo-subtext {
    font-size: 14px;
    line-height: 1.4;
    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 に縮小。 */
  .header.page-width {
    padding: 0 15px;
    height: 56px;
    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;
  }

  /* ドロワー上部のアイコン列（サマリー × ボタンと同列に配置）
     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;
  }

  .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);
}