@charset "utf-8";
/* CSS Document */

/********************************************************************/

/* デザイントークン */

/********************************************************************/

:root {
  /*----- 紙とインク（地色・面） -----*/

  /* 紙地。ページ全体の背景色。body・ステップ表の区切り線。バナーの生成りの紙に合わせた地色で、サイト全体が一枚の刷り物として見えるための基準色。 */
  --color-paper: #f6ebe0;

  /* 紙地から浮く面。ヘッダー・グローバルナビ・トップページの商品セクションの帯・カード・ポップアップ・モーダル・ドロップダウン・汎用ボタン・ページャー・レビュー枠・入力欄など。紙地よりわずかに明るくすることで「紙の上に置かれたもの」を表す。 */
  --color-surface: #fcf8f2;

  /* 純白。アクセント色や濃色背景の上に置く反転文字と、フッター内の縦区切り線のみ。地色・カード背景には使わないこと（それらは --color-paper / --color-surface）。 */
  --color-white: #ffffff;

  /*----- グレースケール（紙地に合わせた温色。淡い → 濃い） -----*/

  /* 背景グレーの最頻出。thタグ・汎用ボタン(general_btn / standard_btn)・パンくず・メモ欄・レビュー枠・ステップ表・サイド/メインナビ・フリーページナビ。旧 #f9f9f9 / #f8f8f8 / #f5f5f5 の3階調を統合。 */
  --color-gray-50: #ede3d6;

  /* 一段沈んだ背景グレー。汎用ボタンのホバー背景・文字サイズ切替ボタンの背景・ランキングタブ非選択時の下線。旧 #f1f1f1 / #f0f0f0 / #e9e9e9 の3階調を統合。 */
  --color-gray-80: #e6dacb;

  /* 標準の罫線色。表・枠線・区切り線の大半。※罫線以外に「空の星の色」「星画像の背景」「前へ/次へアイコンのホバー背景」「共通ボタンの背景」にも使用するため、変更時は星の見え方も必ず確認すること。 */
  --color-border: #ded3c4;

  /* やや濃いグレー。select・バリエーションボタン・PCサイトボタン・開閉アイコン枠の枠線、ページトップボタンの背景と文字色、＋−開閉ボタン枠のホバー背景。旧 #d1d1d1 / #cccccc を統合。 */
  --color-gray-300: #c7baa8;

  /* フッターナビ各項目の下線のみ。フッターの濃紺(--color-footer-bg)の上に置くため、ここだけ青みグレー。 */
  --color-gray-400: #8a93a6;

  /* 弱い文字色。文字サイズ切替ボタンの文字と在庫なし(SOLD OUT)表示の2役のため中立名。紙地上で 4.8:1 を確保するため、旧 #777777 よりわずかに暗い。 */
  --color-gray-500: #6e6560;

  /* 補助グレー。希望小売価格/税込価格・日付・ステップ文字などの文字色と、共通ボタン・選択済み枠の背景の2役のため中立名。 */
  --color-gray-600: #67605a;

  /* 本文の標準文字色。body・リンク・各ナビ・価格・テーブルなど最頻出。選択中ボタンの枠線にも使うため中立名。 */
  --color-gray-700: #56504a;

  /* 濃い文字色。ページタイトル・商品名・販売価格・各種アイコン・リンクのホバー文字と、横幅840px以下のサイド/メインボックス見出し(h2)。旧 #444444 / #333333 を統合。 */
  --color-gray-900: #332f2b;

  /* 黒。グローバルナビの選択中/ホバー下線と、確認済みフォームタイトル・PCサイトリンクの文字色の2役のため中立名。紙地の上で締める役なので温色化せず純黒のまま。 */
  --color-black: #000000;

  /*----- アクセント（コバルトブルー） -----*/
  /* ※トークン名の teal は旧配色の名残。値はバナーの呉須（コバルト）系。名称を変えると外部テンプレート側の参照を壊すおそれがあるため名前は据え置く。 */

  /* 最も淡いコバルト。金額更新ボタン欄と入力確認済み行の強調背景。 */
  --color-teal-25: #f2f5fb;

  /* 淡いコバルト。ナビのホバー/選択中背景など一時的な操作フィードバックに限って使う（常に見えている帯や見出し背景に使うと暖色の紙地から浮くため、それらは --color-gray-50）。加えて、フッター内リンクのホバー文字色にも使うため中立名（濃紺の上で 9.3:1）。 */
  --color-teal-50: #e4ebf6;

  /* 明るいコバルト。見出し下線・現在ステップ・現スライド・選択中の文字サイズボタン・合計欄下線・レビュー登録日背景と多役のため中立名。彩度を抑えた呉須色で、紙地から浮かないようにしている。白文字 6.3:1。 */
  --color-teal-500: #3a5f9f;

  /* 濃いコバルト＝主アクセント。強調ボタン背景・現在ページャー・ポイント数字・矢印アイコン・ランキング2位バッジと多役のため中立名。彩度を抑えた深い呉須色で、フッターの濃紺と同じ系統にそろえている。白文字 9.3:1、紙地上 7.9:1。 */
  --color-teal-600: #27467c;

  /*----- 情報（アクセントより明るいブルー） -----*/

  /* 淡いブルー。入力チェックOK時の入力エリア背景。--color-teal-25 とは別値。 */
  --color-blue-50: #e8f0f9;

  /* ブルー。OK表示の文字・枠・アイコン、土曜日、ショップオーナーヘッダーの3役を兼ねるため --color-success とせず中立名。白文字 4.8:1。 */
  --color-blue-500: #3f76a8;

  /* 濃いブルー。バリエーション在庫表で選択中の項目の文字色。 */
  --color-blue-600: #2f5f9e;

  /*----- 状態（エラー・注意） -----*/

  /* 淡い赤。定休日セルの背景とエラー時入力エリアの背景の2役のため中立名。装飾のテラコッタ系とは別系統なので注意。 */
  --color-red-50: #fae6e2;

  /* 注意色。エラー枠・エラーアイコン・必須項目・在庫僅か・重要な注意書き・日曜日と多役のため中立名。紙地に合わせて彩度を落とした朱赤。白文字 5.9:1。 */
  --color-red-500: #c0272e;

  /* 濃い赤。赤枠内のエラー本文(.error_status)の文字色。 */
  --color-red-700: #8e1b20;

  /*----- 装飾（テラコッタ／レビュー・バッジ） -----*/
  /* ※トークン名の pink は旧配色の名残。値はバナーの屋根瓦のテラコッタ系。名称を変えると外部テンプレート側の参照を壊すおそれがあるため名前は据え置く。 */

  /* 淡いテラコッタ。レビュー年代グラフのバー背景。 */
  --color-pink-300: #e8d0bc;

  /* テラコッタ。レビュー評価の星（点灯時）の文字色と星画像の背景。装飾用途のため紙地上 3.1:1 で許容。 */
  --color-pink-400: #c8703f;

  /* 濃いテラコッタ＝差し色。ランキング1位バッジと数量表示バッジの背景の2役のため中立名。白文字 5.7:1。※アクセントのコバルトに対する一点の差し色なので、使用面積を広げないこと。 */
  --color-pink-500: #a64b27;

  /*----- その他（ハイライト・ランキング・フッター） -----*/

  /* 検索キーワード一致箇所のマーカー背景。紙地の上で浮かないよう彩度を落とした黄。用途が一意のため意味名。 */
  --color-search-highlight: #f5e6a3;

  /* くすんだ温色グレー。ランキング3位バッジの背景。1位のテラコッタ・2位のコバルトに次ぐ落ち着いた色として、白文字 6.1:1。 */
  --color-olive-500: #6b6055;

  /* 濃紺。フッターエリアとフッターナビの背景専用のため意味名。コバルトを暗く沈めた色で、紙地との対比で刷り物の下端を締める。 */
  --color-footer-bg: #2a3b5c;

  /*----- 書体サイズ（%はネストで乗算されるため絶対サイズではない） -----*/

  /* 最小段階。「最近チェックした商品」見出し内テキスト(.recently h2 .title_text)。スケール外の独自値、統合禁止。 */
  --font-size-4xs: 66%;

  /* 極小。パンくず・価格の注記・日付書式・小さめラベル。 */
  --font-size-3xs: 77%;

  /* 小。キャッチフレーズ・カレンダー曜日・レビュー相談文などの補助テキスト。 */
  --font-size-2xs: 85%;

  /* 在庫あり表示(.stock)専用。93% とは別値、統合禁止。 */
  --font-size-xs: 90%;

  /* 最頻出。汎用ボタン・日付・エラー/OK文言・ページャーなど実質的な小本文サイズ。 */
  --font-size-sm: 93%;

  /* 親要素と等倍。見出し内テキストのサイズリセットと .section_title h6。※%は入れ子で乗算されるため絶対サイズではない。 */
  --font-size-md: 100%;

  /* やや大。#container の基準サイズ、h6、小見出し・フォームタイトルなど。 */
  --font-size-lg: 108%;

  /* 大。h5、フォームタイトル、商品詳細のセクション見出し、XLサイズボタン。 */
  --font-size-xl: 116%;

  /* 2xl(123.1%)のすぐ下にある別値。XXLサイズボタン(.btn_size_xxlarge)専用。123.1% / 123.9% と絶対に統合しないこと。 */
  --font-size-2xl-lo: 123%;

  /* 特大帯の正準値（この帯で最も広く使われる）。h4・販売価格金額・ポップアップ小見出しなど。123% / 123.9% とは別値、統合禁止。 */
  --font-size-2xl: 123.1%;

  /* 2xl(123.1%)のすぐ上にある別値。レビュータイトル(.review_title)と参考質問数字(.user_number)に使用。統合禁止。 */
  --font-size-2xl-hi: 123.9%;

  /* 大見出し。h3・セクションタイトル・商品詳細の商品名。 */
  --font-size-3xl: 131%;

  /* 中サイズ星評価の点数とマイページのポイント数字。 */
  --font-size-4xl: 138.5%;

  /* ページタイトル級。h2・セクションタイトル・商品詳細の商品名。 */
  --font-size-5xl: 146.5%;

  /* 大サイズ星評価の点数と合計金額。 */
  --font-size-6xl: 153.9%;

  /* 最大段階。h1。 */
  --font-size-7xl: 161.6%;

  /*----- 角丸 -----*/

  /* 極小の角丸。見出し下の装飾バー。 */
  --radius-xs: 2px;

  /* 小さめの角丸。現在は未使用（ボタンは --radius-lg に統一したため）。外部テンプレートからの参照に備えて残す。 */
  --radius-sm: 3px;

  /* 標準の角丸（border-*-radius での角指定にも使用）。ボックス・入力欄・ナビ項目・小さなアイコンボタンなど。ボタンは --radius-lg。 */
  --radius-md: 5px;

  /* 大きめの角丸。ボタン全般（フォームボタン・汎用ボタン・もっと見る等）・バナー・ナビのカード・ページトップへ戻るボタン。※ border-radius: 0（解除）と 50%（円形）は寸法ではなく形状指定のためトークン化しない。 */
  --radius-lg: 10px;

  /*----- 余白 -----*/

  /* スマホ・タブレット（840px 未満）の左右の余白。文章・カード・ボタンの端をこの幅にそろえる。 */
  --space-side-sp: 16px;

  /*----- その他 -----*/

  /* ホバー・開閉の標準トランジション時間（文字サイズ切替ボタン、商品詳細の開閉ボックス）。 */
  --transition-base: 0.3s;

  /* リンク一覧ドロップダウンの box-shadow に使う影色。空白を含めCSS表記どおりに保持すること。 */
  --color-shadow: rgba(0, 0, 0, 0.4);
}

/********************************************************************/

/* HTMLタグ要素 */

/********************************************************************/

body {
  padding: 0px;
  margin: 0px;
  background-color: var(--color-paper);
  color: var(--color-gray-700);
}

.responsive body,
.responsive select,
.responsive input,
.responsive button,
.responsive textarea,
.responsive button {
  font-family:
    "Local Roboto", "Roboto", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
}

.responsive body .inner_global_nav .nav_btn,
.responsive body .inner_global_nav .header_nav_item {
  letter-spacing: 0;
}

A,
A:link,
A:visited,
A:hover,
A:active {
  color: var(--color-gray-700);
  text-decoration: none;
  font-weight: bold;
  outline: none;
}

.use_hover A:hover {
  color: var(--color-gray-900);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: 5px;
}

h1 {
  font-size: var(--font-size-7xl);
}

h2 {
  font-size: var(--font-size-5xl);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

/********************************************************************/

/* 大外 */

/********************************************************************/

#container {
  font-size: var(--font-size-lg);
}

.single_layout.responsive .fix_center {
  max-width: 1200px;
}

.responsive .has_min_nav .fix_center {
  max-width: 980px;
}

/********************************************************************/

/* トップページコンテンツ間余白 */

/********************************************************************/

.main_box {
  margin-bottom: 50px;
}

.module_box .main_box {
  margin-top: 1px;
  margin-bottom: 1px;
}

.side_box {
  margin-bottom: 50px;
}

/********************************************************************/

/* キャッチフレーズ欄 */

/********************************************************************/

/* キャッチフレーズ */
.responsive .copy {
  max-width: 100% !important;
  text-align: center;
  min-height: 18px;
  padding: 8px;
  font-size: var(--font-size-2xs);
  background-color: var(--color-gray-50);
}

.copy A {
  text-decoration: underline;
}

/********************************************************************/

/* ヘッダー */

/********************************************************************/

#header_wrapper:not(.folding_header, .min_header) {
  background-color: var(--color-surface);
}

#header {
  position: relative;
  background-color: var(--color-surface);
}

.responsive #inner_header {
  padding: 5px 0px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive #inner_header {
    padding: 10px;
  }
}

/********************************************************************/

/* ショップ名 */

/********************************************************************/

/* ショップ名ロゴ */
.shoplogo {
  padding: 5px 0px;
}

/* レスポンシブ横幅1200px以上指定 */
@media screen and (min-width: 1200px) {
  .shoplogo {
    padding-left: 0px;
  }
}

.shoplogo img,
.folding_header .shoplogo img {
  width: 120px;
  max-width: 120px;
}

/* レスポンシブ横幅600px以上指定 */
@media screen and (min-width: 600px) {
  .shoplogo img,
  .folding_header .shoplogo img {
    width: 180px;
    max-width: 180px;
  }
}

.use_hover .shoplogo A:hover img {
  opacity: 0.8;
}

/* ショップ名テキスト */
.shoptext {
  padding: 5px 0px 5px 5px;
  min-height: 40px;
  margin-right: auto;
}

/* レスポンシブ横幅1200px以上指定 */
@media screen and (min-width: 1200px) {
  .shoptext {
    padding-left: 0px;
  }
}

.shoptext A {
  font-size: var(--font-size-2xl);
  margin: 0px;
}

/********************************************************************/

/* 文字サイズ */

/********************************************************************/

.font_setting {
  padding: 5px 5px 10px;
  text-align: center;
  font-size: 13px;
}

.header_font_setting .set_font_title {
  color: var(--color-gray-700);
}

/* 文字サイズボタン */
.set_font_normal,
.set_font_large {
  width: 40px;
  height: 28px;
  display: inline-block;
  margin-left: 5px;
  background-color: var(--color-gray-80);
  border-radius: var(--radius-md);
  line-height: 28px;
  text-align: center;
  color: var(--color-gray-500);
  transition: var(--transition-base);
}

/* 普通サイズボタン */
.set_font_normal::after {
  content: "普通";
  font-size: 13px;
}

/* 大サイズボタン */
.set_font_large::after {
  content: "大";
  font-size: 17px;
}

/* 文字サイズボタンマウスオーバー、選択中 */
.use_hover .font_setting .set_font_normal:hover,
.use_hover .font_setting .set_font_large:hover,
.font_setting .nav_on {
  background-color: var(--color-teal-500);
}

.use_hover .font_setting .set_font_normal:hover:after,
.use_hover .font_setting .set_font_large:hover:after,
.font_setting .nav_on:after {
  color: var(--color-white);
}

/********************************************************************/

/* ヘッダーナビ */

/********************************************************************/

/* 各ナビゲーション */
.inner_header_nav .nav_btn {
  color: var(--color-gray-700);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .inner_header_nav .nav_btn {
    text-align: left;
  }
}

.inner_header_nav .empty_nav_label .nav_btn {
  text-align: center;
  height: 100%;
}

.header_right .inner_header_nav .nav_btn {
  margin-right: 2px;
}

.use_hover .inner_header_nav .nav_btn:hover {
  background-color: var(--color-teal-50);
}

.responsive .inner_header_nav .nav_text {
  padding: 0px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive .inner_header_nav .nav_text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.responsive .inner_header_nav .nav_text .nav_label {
  display: block;
  padding-top: 3px;
  font-size: 9px;
  letter-spacing: -0.05em;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive .inner_header_nav .nav_text .nav_label {
    font-size: 10px;
    padding-top: 2px;
  }
}

.header_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*************************************************************/

/* 検索 */

/*************************************************************/

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .ocnk020.responsive
    .has_search_bar
    .search_bar:has(.global_btn .searchinput)
    .search {
    max-width: 260px;
    padding: 1px 10px 1px 5px;
  }

  .responsive .has_search_bar .search_bar .search .search_box {
    width: 200px;
  }

  .responsive
    .has_search_bar:has(.h_contact, .h_favorite, .h_help, .h_signout)
    .search_bar.has_header_right_size2,
  .responsive .has_search_bar .search_bar.has_header_right_size2 {
    right: 150px;
  }
}

/*************************************************************/

/* グローバルナビゲーション */

/*************************************************************/

.global_nav {
  background-color: var(--color-surface);
}

#header_wrapper:not(.folding_header) .inner_global_nav {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 各ナビゲーション */
.responsive .inner_global_nav .nav_btn,
.responsive .column6 .inner_global_nav .nav_btn {
  position: relative;
  border-right: none;
  border-bottom: 1px solid var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-gray-700);
  font-weight: 500;
  text-align: left;
}

.responsive .inner_global_nav > .global_nav_item > .nav_btn,
.responsive .column6 .inner_global_nav > .global_nav_item > .nav_btn {
  text-align: center;
}

.responsive .inner_global_nav .inner_popup_nav .nav_btn,
.responsive .column6 .inner_global_nav .inner_popup_nav .nav_btn {
  text-align: left;
}

.responsive .inner_global_nav .global_nav_item > .nav_btn.nav_on,
.responsive
  #header_wrapper:not(.folding_header)
  .inner_global_nav
  .global_nav_item.nav_on
  > .nav_btn {
  border-bottom: 1px solid var(--color-black);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .folding_header .inner_global_nav {
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .responsive .inner_global_nav A.nav_btn,
  .responsive .column6 .inner_global_nav .nav_btn {
    padding: 10px 20px;
    font-size: var(--font-size-lg);
    font-weight: 500;
  }

  .responsive.use_hover .inner_global_nav .nav_btn:hover,
  .responsive
    .folding_header
    .inner_global_nav
    .global_nav_item.nav_on
    > .nav_btn {
    border-bottom: 1px solid var(--color-black);
  }

  .responsive .large_font .inner_global_nav A.nav_btn {
    font-size: var(--font-size-2xl);
  }

  .global_nav_item:first-child .nav_btn {
    border-left: none;
  }

  .responsive #container .global_nav .global_nav_item.wrapped_item {
    width: auto;
  }

  .ocnk028.responsive.wide_layout .inner_global_nav.fix_center,
  .ocnk028.responsive.single_layout #container .inner_global_nav.fix_center {
    max-width: 100%;
    justify-content: center;
  }
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 1200px) {
  #header_wrapper:not(.folding_header) .inner_global_nav {
    padding-top: 0px;
    padding-bottom: 10px;
  }
}

/********************************************************************/

/* 開閉ナビゲーション */

/********************************************************************/

.inner_popup_nav_area,
.inner_popup_menu_area {
  padding: 15px 10px;
  background-color: var(--color-surface);
  color: var(--color-gray-700);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .inner_popup_nav_area,
  .inner_popup_menu_area {
    padding: 20px;
  }
}

.upper_popup_nav,
.lower_popup_nav {
  padding: 0;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .upper_popup_nav,
  .lower_popup_nav {
    padding: 0px 10px;
  }
}

.popup_sub_title {
  padding-bottom: 20px;
  font-size: var(--font-size-2xl);
  font-weight: 700;
}

/* 各ナビゲーション */
.responsive .inner_popup_nav .nav_btn,
.responsive .column6 .inner_popup_nav .nav_btn {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 10px 10px 25px;
  font-weight: 500;
}

.responsive.use_hover .inner_popup_nav .nav_btn:hover {
  background-color: var(--color-teal-50);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive .inner_popup_nav .nav_btn,
  .responsive .column6 .inner_popup_nav .nav_btn {
    margin: 5px 10px;
  }

  .responsive.use_hover .inner_popup_nav .nav_btn:hover {
    border-bottom: 1px solid var(--color-border);
  }
}

.inner_custom_nav_popup.custom_space {
  padding: 15px 10px;
}

/* 開閉ナビゲーション閉じるボタン */
.nav_close_box .nav_close {
  background-color: var(--color-gray-50);
}

.popup_base .close_btn_box {
  top: 25px;
}

.popup_base .popup_nav_area .nav_close_box .nav_close {
  margin-top: 20px;
  padding: 5px;
  line-height: 1;
}

.use_hover .nav_close_box .nav_close:hover {
  background-color: var(--color-gray-50);
}

.nav_close_box .fa-times {
  font-size: 20px;
}

/********************************************************************/

/* メインナビゲーション */

/********************************************************************/

/* 各ナビゲーション */
.inner_side_nav .nav_btn,
.inner_main_nav .nav_btn {
  margin-bottom: 5px;
  padding: 10px 10px 10px 25px;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
}

.use_hover .inner_side_nav .nav_btn:hover,
.use_hover .inner_main_nav .nav_btn:hover {
  background-color: var(--color-teal-50);
  color: var(--color-gray-900);
}

/* フリーページナビゲーション背景 */
.freepage_nav .inner_freepage_nav .nav_btn {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
}

.use_hover .freepage_nav .inner_freepage_nav .nav_btn:hover {
  background-color: var(--color-teal-50);
  color: var(--color-gray-900);
}

/********************************************************************/

/* カテゴリ、特集ナビゲーション */

/********************************************************************/

.itemlist_nav {
  margin-top: 15px;
}

.lower_link_box .itemlist_nav {
  margin: 5px 0px 15px;
}

/* 各ナビゲーション */
.inner_itemlist_nav .nav_btn {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 15px 10px 15px 25px;
  color: var(--color-gray-700);
  font-weight: 500;
}

.side_sub_menu_hover
  .inner_itemlist_nav
  .has_sub_menu
  > .nav_btn:not(.has_image_nav_btn),
.inner_itemlist_nav.toggle_menu_list
  .has_sub_menu
  > .nav_btn:not(.has_image_nav_btn) {
  padding-left: 10px;
  padding-right: 25px;
}

.toggle_menu_list .itemlist_nav_item.has_sub_menu .nav_btn.close_sub_menu_link,
.side_sub_menu_hover
  .side_itemlist_nav
  .itemlist_nav_item.has_sub_menu
  .nav_btn.close_sub_menu_link {
  background-color: var(--color-teal-50);
}

.use_hover .inner_itemlist_nav .nav_btn:hover {
  background-color: var(--color-teal-50);
  color: var(--color-gray-700);
}

/********************************************************************/

/* サイドメニュー */

/********************************************************************/

/* サイドメニュー枠 */
.open_side_col .side_container {
  background-color: var(--color-surface);
}

.side_itemlist_nav .itemlist_nav_item {
  margin: 0px;
}

.side_itemlist_nav .itemlist_nav_item.has_sub_menu {
  margin: 15px 0px;
}

.side_itemlist_nav .toggle_menu_list .itemlist_nav_item.has_sub_menu,
.side_sub_menu_hover .side_itemlist_nav .itemlist_nav_item.has_sub_menu {
  margin: 0px;
}

/* サイドメニュアイコン */
.right_side_nav_icon {
  font-size: 14px;
  margin-top: -8px;
}

.nav_btn .fa-chevron-down.right_side_nav_icon {
  right: 12px;
}

.nav_btn .fa-chevron-right.right_side_nav_icon {
  left: 10px;
  right: auto;
}

.title_toggle_link .right_side_nav_icon {
  right: 12px;
}

/* サイドカテゴリ一覧 */
.side_itemlist_nav {
  padding: 0px 1px;
}

/* サブカテゴリ　第二階層 */
.side_itemlist_nav .sub_menu_link {
  padding: 10px 10px 10px 24px;
}

.side_box:not(:where(.side_sub_menu_hover)) .side_itemlist_nav .sub_menu_link {
  width: calc(100% - 10px);
  background-color: transparent;
  border: none;
  margin-left: 5px;
  margin-right: 5px;
  padding: 8px 10px 8px 25px;
}

.side_box:not(.side_sub_menu_hover) .side_itemlist_nav .sub_menu_link_list {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* サブカテゴリ背景 */
.side_itemlist_nav .sub_menu_link {
  background-color: var(--color-teal-50);
  border-top: none;
  border-bottom: 1px solid var(--color-border);
  font-weight: 400;
}

/* マウスオーバーでサブカテゴリを開く */
/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .side_sub_menu_hover .sub_menu_link_list {
    background-color: var(--color-gray-50);
    padding: 15px;
    top: 0px;
  }
}

.side_sub_menu_hover .sub_menu_link_list .sub_menu_link {
  background-color: var(--color-surface);
}

.use_hover .side_sub_menu_hover .sub_menu_link_list .sub_menu_link:hover {
  background-color: var(--color-teal-50);
}

/* サイドメニューを開くボタン */
.use_side_menu .menu_opener_box,
.use_side_menu .h_side_menu_opener {
  display: flex;
  align-items: center;
}

/********************************************************************/

/* フッターナビゲーション */

/********************************************************************/

.footer_nav {
  background-color: var(--color-footer-bg);
}

.responsive .footer_nav {
  padding-top: 30px;
}

/* 各ナビゲーション */
.footer_nav_item .nav_btn {
  border-bottom: 1px solid var(--color-gray-400);
  padding: 10px 10px 10px 25px;
  color: var(--color-white);
}

.use_hover .footer_area .nav_btn:hover {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-white);
}

/********************************************************************/

/* タイトル */

/********************************************************************/

.page_title h1,
.page_title h2,
.main_box h2 {
  background-color: transparent;
}

.side_box h2::after,
.main_box h2::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-teal-500);
  margin: 15px auto 10px;
  border-radius: var(--radius-xs);
}

.lower_link_box .main_box h2::after {
  display: none;
}

/* レスポンシブ横幅840px以下指定 */
@media screen and (max-width: 840px) {
  .article_side_col .side_box h2::before {
    display: none;
  }
}

.page_title h1 .title_text,
.page_title h2 .title_text,
.main_box h2 .title_text {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.page_title h1.detail_page_title .title_text {
  padding-left: 0px;
  padding-right: 0px;
}

.lower_link_box .main_box .section_title h2 .title_text {
  display: inline;
  background-color: transparent;
  padding: 0px;
}

.side_box h2,
.main_box h2 {
  padding: 10px;
  margin-bottom: 10px;
  color: var(--color-gray-900);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.recently .section_title h2 {
  padding-right: 0px;
}

.lower_link_box .main_box .section_title h2 {
  background-color: var(--color-gray-50);
  padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  font-size: var(--font-size-2xl);
}

.main_desc {
  margin-bottom: 10px;
}

.main_desc li {
  text-align: left;
}

/********************************************************************/

/* 第二階層タイトル */

/********************************************************************/

/* 第二階層各ページタイトル */
.page_box .page_title h1,
.page_box .page_title h2,
.page_box .recently .section_title h2,
.page_box .use_emphasis_title .section_title h2 {
  padding: 10px;
  margin-bottom: 10px;
  color: var(--color-gray-900);
}

.has_min_nav .page_title h2 {
  text-align: center;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .has_min_nav .page_title h2 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* 商品詳細ページタイトル */
.itemdetail .page_title h1 {
  background-color: transparent;
  text-align: left;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .has_left_side_menu:not(:has(.hidden_specified_side_menu))
    .itemdetail
    .page_title
    h1 {
    padding-left: 0px;
  }
}

/* 記事ページタイトル */
.pwhatnew .page_title h1,
.pdiary .page_title h1 {
  margin-bottom: 0px;
}

/********************************************************************/

/* 第二階層サブタイトル */

/********************************************************************/

/* 各ページサブタイトル */
.page_box .section_title h2,
.page_box .section_title h3 {
  border-bottom: 1px solid var(--color-border);
  padding: 10px;
  color: var(--color-gray-900);
}

.page_box .recently .section_title h2 {
  border: none;
}

.page_box .use_emphasis_title .section_title h2 {
  background-color: transparent;
  padding: 10px 0px;
}

.page_box.shoppingcart .section_title h3,
.page_box.mypage .section_title h3,
.page_box.help .section_title h3,
.page_box.recipient_list .section_title h3,
.page_box.mypage_recipient_form .section_title h3 {
  background-color: var(--color-gray-50);
  border: none;
  border-radius: 0;
  padding: 10px;
  margin-bottom: 10px;
}

.page_box.shoppingcart .section_title_right_edge h3,
.page_box.shoppingcart #cart_return h3 {
  background-color: var(--color-gray-50);
}

.page_box .contents_box .page_title_right_edge h3,
.page_box .contents_box .section_title_right_edge h3 {
  padding-right: 100px;
}

.page_box #cart_preview .section_title h3 {
  background-color: var(--color-gray-50);
  border: none;
  border-radius: 0;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .page_box.shoppingcart .section_title h3,
  .page_box.help .section_title h3,
  .page_box #cart_preview .section_title h3,
  .page_box.recipient_list .section_title h3,
  .page_box.mypage_recipient_form .section_title h3 {
    padding: 12px;
  }
}

.page_box .help_contents .section_title h4 {
  margin-top: 10px;
}

.page_box .section_title h4 {
  padding: 10px 5px;
  border-bottom: 1px solid var(--color-border);
}

.page_box .page_contents .search_result_title h3 {
  margin-top: 10px;
}

/********************************************************************/

/* 第二階層小項目タイトル */

/********************************************************************/

.contents_title {
  padding: 10px;
  background-color: var(--color-gray-50);
  font-weight: 500;
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
}

.rules_title {
  font-weight: bold;
}

/********************************************************************/

/* フォームタイトル */

/********************************************************************/

.form_title {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 3px 5px;
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-gray-700);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .shoppingcart_contents #cart_recipient .form_title {
    font-weight: 500;
  }
}

.form_data .form_title.radio_selection_box,
.form_data .form_inner_title.radio_selection_box {
  padding: 10px;
  font-weight: 500;
}

.shoppingcart_contents .form_title {
  font-size: var(--font-size-lg);
}

.shoppingcart_page_body .page_box .form_area .form_title {
  border-bottom: 1px solid var(--color-border);
}

.form_inner_title {
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-gray-700);
}

/********************************************************************/

/* タイトル文字サイズ */

/********************************************************************/

.page_title h1,
.page_title h2,
.section_title h1,
.section_title h2 {
  font-size: var(--font-size-3xl);
  font-weight: bold;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .page_title h1,
  .page_title h2,
  .section_title h1,
  .section_title h2 {
    font-size: var(--font-size-5xl);
  }
}

.page_title h1 .title_text,
.page_title h2 .title_text,
.main_box h2 .title_text {
  font-size: var(--font-size-md);
}

.recently h2 .title_text {
  font-size: var(--font-size-4xs);
}

/* レスポンシブ横幅375px以上指定 */
@media screen and (min-width: 375px) {
  .recently h2 .title_text {
    font-size: var(--font-size-sm);
  }
}

.lower_link_box .main_box .section_title h2 .title_text {
  font-size: var(--font-size-md);
}

.page_title h3,
.section_title h3 {
  margin: 0px;
  font-size: var(--font-size-lg);
  font-weight: 500;
}

.page_box .section_title h2,
.page_box .section_title h3 {
  margin: 0px 2px;
}

.page_title h4,
.page_title h5,
.page_title h6,
.section_title h4,
.section_title h5,
.section_title h6 {
  margin: 0px;
  font-size: var(--font-size-md);
  font-weight: bold;
}

.shoppingcart_page_body .section_title h4 {
  margin: 0px;
  font-size: var(--font-size-lg);
}

/********************************************************************/

/* メインコンテンツ */

/********************************************************************/

/********************************************************************/

/* 一覧
・写真のみ表示
・説明付き表示
・商品一覧ページ(写真のみ、説明付き)
・最新情報、店長日記
・ソート
*/

/********************************************************************/

/*--------------------------------------*/

/* 写真のみ表示  */

/*--------------------------------------*/

/* サムネイル写真 */
.layout_photo .list_item_photo {
  padding: 5px 0px;
  text-align: center;
}

/* 一覧枠 */
.itemlist_box .inner_item_data {
  padding: 15px 10px 5px;
}

.layout_photo .list_item_data {
  padding: 8px 1px 5px;
}

/* もっと見る */
.more_item {
  max-width: 150px;
  min-width: max-content;
  border-top: none;
  margin: 30px auto;
  text-align: center;
}

.layout_column_text .more_item {
  margin-top: 30px;
}

.more_item .general_btn {
  background-color: var(--color-surface);
  padding: 10px;
  font-weight: 500;
  display: block;
  border-radius: var(--radius-lg);
  line-height: 100%;
}

/* 写真のみ文字サイズ */
.layout_photo .item_data_link {
  font-size: var(--font-size-sm);
}

.layout_photo .col2 .item_data_link {
  font-size: var(--font-size-sm);
}

/*--------------------------------------*/

/* 説明付き */

/*--------------------------------------*/

/* リンク */
.layout_column_text .list_item_box,
.layout_text .not_link {
  border-bottom: 1px solid var(--color-border);
  padding: 15px 5px 15px 10px;
}

.itemlist_box.layout_column_text .list_item_box {
  align-items: flex-start;
}

.itemlist_box.layout_column_text
  .list_item_link:not(.flex_column)
  .list_item_data {
  min-height: 100%;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .layout_column_text .list_item_box,
  .layout_text .not_link {
    padding: 15px 0px;
  }
}

.list_item_data p.item_desc {
  color: var(--color-gray-700);
}

/*--------------------------------------*/

/* 商品一覧  */

/*--------------------------------------*/

/* 商品、記事一覧マウスオーバー */
.use_hover .item_list .item_data_link:hover,
.use_hover .item_list .list_item_link:hover {
  opacity: 0.7;
}

/* 商品名 */
.item_name {
  font-weight: 600;
  color: var(--color-gray-900);
}

.list_item_data p.item_name {
  margin-bottom: 3px;
}

/* 販売価格 */
.price {
  padding: 2px 0px;
  color: var(--color-gray-700);
  font-weight: 700;
}

.price .figure {
  color: var(--color-gray-900);
}

.price .selling_price,
.price .regular_price {
  padding: 2px 0px;
}

.selling_price .tax_label {
  font-weight: 400;
  margin-left: 1px;
}

/* 通常販売価格 */
.price .regular_price {
  color: var(--color-gray-700);
  font-weight: normal;
  display: block;
}

.price .regular_price .figure {
  color: var(--color-gray-900);
}

.item_box .text_layout .regular_price {
  display: inline;
}

/* 希望小売価格、税込価格 */
.item_box .retail_price,
.item_box .tax_incl_price {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-weight: normal;
  word-break: normal;
}

.item_box .retail_price {
  margin-top: 5px;
}

.retail_price .price_label:empty {
  display: none;
}

/* 在庫あり */
.stock {
  color: var(--color-gray-700);
  font-size: var(--font-size-xs);
}

/* 在庫僅か */
.lowstock {
  color: var(--color-red-500);
}

/* 在庫なし */
.soldout,
.variation_stock_list .data_table .soldout {
  color: var(--color-gray-500);
}

/* 商品一覧ランキング */
.rankno {
  display: block;
  width: 40px;
  min-width: auto;
  margin: auto;
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
  font-size: 10px;
}

.ocnk002.responsive .ranking_numbers_only .item_data .rankno1,
.ocnk002.responsive .ranking_numbers_only .list_item_photo .rankno1 {
  background-color: var(--color-pink-500);
  color: var(--color-white);
}

.ocnk002.responsive .ranking_numbers_only .item_data .rankno2,
.ocnk002.responsive .ranking_numbers_only .list_item_photo .rankno2 {
  background-color: var(--color-teal-600);
  color: var(--color-white);
}

.ocnk002.responsive .ranking_numbers_only .item_data .rankno3,
.ocnk002.responsive .ranking_numbers_only .list_item_photo .rankno3 {
  background-color: var(--color-olive-500);
  color: var(--color-white);
}

/* ランキングタブ */
.ocnk016.responsive .ranking_navigation.anchor_nav_area .nav_btn {
  padding: 10px 8px;
  border-bottom: 2px solid var(--color-gray-80);
}

.ocnk016.responsive .ranking_navigation.anchor_nav_area .nav_btn.nav_on,
.ocnk016.responsive.use_hover
  .ranking_navigation.anchor_nav_area
  .nav_btn:hover {
  border-bottom: 2px solid var(--color-teal-500);
  color: var(--color-teal-600);
}

/*--------------------------------------*/

/* 記事一覧  */

/*--------------------------------------*/

/* タイトル */
.list_subject {
  padding: 5px 0px;
}

/* 日付 */
.date {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: normal;
}

/*--------------------------------------*/

/* ソート */

/*--------------------------------------*/

.sort_box {
  padding: 5px;
  margin: 3px;
  border-bottom: 1px solid var(--color-border);
}

.sort_item .global_btn {
  padding: 5px;
  text-align: center;
}

/* 件数 */
.item_count {
  padding: 10px 10px 0;
  font-size: var(--font-size-sm);
}

/********************************************************************/

/* 写真 */

/********************************************************************/

/* トップ画像の下端だけに、特集バナーと同じ枠線を引いて下のコンテンツと区切る */
#photo {
  padding: 0px;
  border-bottom: 1px solid var(--color-border);
}

#photo .fix_center {
  max-width: 100%;
}

/* 840px 未満は画像本来の縦横比で表示し、切り抜かない。
   600px 以下ではスマホ用画像（4:5）、601〜839px では PC 用の横長画像が表示されるため、
   高さを固定すると上下や左右（文字の部分）が切れてしまう。840px 以上は下の指定で高さを固定する */
.ocnk007.responsive #photo .item_image_box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .ocnk007.responsive #photo .item_image_box img {
    height: 600px;
  }
}

/* レスポンシブ横幅1000px以上指定 */
@media screen and (min-width: 1000px) {
  .ocnk007.responsive #photo .item_image_box img {
    height: 700px;
  }
}

/********************************************************************/

/* スライド */

/********************************************************************/

/* スライド送りボタン */
.slider_box .swiper-pagination-bullet,
.swipe_list .pointer span {
  border: 1px solid var(--color-border);
}

/* 現スライド */
.slider_box .swiper-pagination-bullet-active,
.swipe_list .pointer span.current {
  background-color: var(--color-teal-500);
  border: 1px solid var(--color-teal-500);
}

#photo .slider_box .swiper-pagination-bullet,
#photo .swipe_list .pointer span,
#photo .slider_box .swiper-pagination-bullet-active,
#photo .swipe_list .pointer span.current {
  border: none;
}

/* 前へ、次へアイコン */
.swipe_list .pointer_box span.pointer_prev,
.swipe_list .pointer_box span.pointer_next,
.swiper-button-prev,
.swiper-button-next {
  width: 25px;
  height: 25px;
  background-color: var(--color-surface);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.use_hover .swiper-button-prev:hover,
.use_hover .swiper-button-next:hover {
  background-color: var(--color-border);
}

.use_hover .slider_box .swiper-button-disabled:hover {
  background-color: var(--color-gray-50);
}

/* 前へアイコン画像 */
.swipe_list .pointer_box span.pointer_prev,
.swiper-button-prev {
  background-image: url(img/icon_prev.png);
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
}

/* 次へアイコン画像 */
.swipe_list .pointer_box span.pointer_next,
.swiper-button-next {
  background-image: url(img/icon_next.png);
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
}

/********************************************************************/

/* 第二階層 */

/********************************************************************/

.page_box {
  color: var(--color-gray-700);
}

.has_min_nav .inner_page_contents,
.legal_page_body .tablayout_navigation,
.help_page_body .inner_page_contents,
.review_page_body .inner_page_contents {
  padding: 0px 8px;
}

/* 共通説明 */
.page_desc {
  padding: 10px;
}

/* 共通ボックス */
.global_info {
  border: 1px solid var(--color-border);
  padding: 10px;
}

/********************************************************************/

/* 商品詳細 */

/********************************************************************/

/* 商品情報　各ブロック */
.detail_section,
.detail_block_stock .detail_section {
  border-bottom: 1px solid var(--color-border);
  padding: 10px;
}

.detail_block_price .detail_section:not(.option_point) {
  padding: 5px;
}

.detail_inner_box.custom_toggle_box,
.custom_toggle_box .detail_inner_box {
  transition: var(--transition-base);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .detail_section,
  .detail_block_stock .detail_section {
    padding: 15px;
  }

  .detail_block_price .detail_section:not(.option_point) {
    padding: 0px;
  }
}

.detail_section.add_cart {
  border-bottom: none;
  text-align: center;
  margin: 10px 0px;
}

/* 商品情報　商品名 */
.detail_item_data h1,
.detail_item_data .item_name {
  font-size: var(--font-size-3xl);
  font-weight: bold;
  padding: 0 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.itemdetail .section_title h2 {
  font-size: var(--font-size-xl);
}

.itemdetail .custom_toggle_box .section_title h2 {
  padding: 15px 25px 15px 10px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .detail_item_data h1,
  .detail_item_data .item_name {
    font-size: var(--font-size-5xl);
    margin-top: 10px;
  }

  .itemdetail .section_title h2 {
    font-size: var(--font-size-3xl);
    padding-left: 5px;
  }

  .itemdetail .custom_toggle_box .section_title h2 {
    padding: 10px 5px;
  }
}

/* 商品詳細　価格エリアdivタグ間余白 */
.detail_item_data .section_box {
  margin-bottom: 10px;
}

/* 商品詳細　価格エリア項目間余白 */
.detail_item_data .section_box p {
  margin-bottom: 5px;
}

/* 商品詳細　販売価格 */
.detail_item_data .selling_price {
  font-size: var(--font-size-2xl);
  word-break: normal;
}

/* 商品詳細　販売価格金額 */
.detail_item_data .selling_price .figure {
  font-weight: bold;
  color: var(--color-gray-900);
}

/* 商品詳細　通常販売価格 */
.detail_item_data .regular_price {
  font-size: var(--font-size-2xs);
}

/* 商品詳細　希望小売価格、税込価格 */
.detail_item_data .retail_price,
.detail_item_data .tax_incl_price {
  color: var(--color-gray-600);
  font-weight: normal;
}

/* 商品詳細　販売価格ラベル */
.detail_item_data .selling_price {
  font-weight: normal;
}

/* 商品詳細　在庫 */
.detail_item_data .stock {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

/* 商品情報　商品説明 */
.item_desc {
  padding: 15px;
  margin: 0px;
}

/* 価格変動注意書き */
.price_desc {
  font-size: var(--font-size-3xs);
}

/* 商品仕様 */
.detail_spec_data {
  padding: 10px;
  margin: 0px;
}

/* 他の写真枠 */
.other_item_data {
  margin: 0px;
}

.other_item_data .global_photo {
  text-align: center;
}

/* 他の写真説明 */
.other_photo_desc {
  margin: 0px;
}

/* バリエーション在庫表 */
.variation_stock_list {
  margin-bottom: 5px;
}

.variation_stock_list .stocklist_label {
  font-size: var(--font-size-sm);
}

.side_box.diary_category_nav_box h2 {
  background-color: transparent;
}

/* バリエーション、オーダーメイド項目間余白 */
.variation_item,
.order_item {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* オーダーメイド項目 */
.order_item {
  border-bottom: 1px solid var(--color-border);
}

.order_label {
  padding: 5px 0px;
}

.ordermade .bottompos {
  border-bottom: none;
}

/* バリエーション在庫選択中背景 */
.variation_stock_list .data_table .selected_item {
  background-color: var(--color-teal-50);
  color: var(--color-blue-600);
}

.variation_stock_list .data_table .selected_data {
  background-color: var(--color-teal-50);
}

/*--------------------------------------*/
/* バリエーション選択のポップアップ */

/* ポップアップ枠 */
.popup_variation,
.popup_area {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.popup_variation_selection,
.popup_section {
  border-bottom: 1px solid var(--color-border);
}

/* バリエーション項目ボタン */
.popup_variation_button,
.item_selection_button {
  background-color: var(--color-gray-50);
  border: 2px solid var(--color-gray-300);
}

/* 選択中 */
.selected_option .popup_variation_button,
.selected_option .item_selection_button {
  background-color: var(--color-teal-50);
  border: 2px solid var(--color-gray-700);
  color: var(--color-gray-700);
}

/* 変更、選択してくださいボタン */
.popup_variation_edit_button,
.popup_variation_select_button,
.item_select_operation_button {
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
}

.popup_variation_value,
.variation_selection_value,
.item_selection_value {
  color: var(--color-gray-700);
  font-weight: bold;
}

/* 選択済み枠 */
.variation_selection_box .validation_selection_selected_all,
.use_hover .variation_selection_box .validation_selection_selected_all:hover {
  max-width: 100%;
  width: 100%;
  background-color: var(--color-teal-50);
  color: var(--color-gray-700);
}

.validation_selection_selected_all .variation_selection_msg_text {
  background-color: var(--color-gray-600);
  color: var(--color-white);
}

.popup_variation_title {
  font-weight: 400;
}

/*--------------------------------------*/
/* バリエーション画像 */

.variation_image {
  margin-right: 8px;
}

/*--------------------------------------*/
/* サムネイル写真 */

.thumbnail {
  margin-top: 5px;
}

/* サムネイル写真 */
.thumbnail .thumbnail_btn {
  border: 1px solid var(--color-surface);
}

/* サムネイル写真枠サイズ */
.thumbnail_listbox {
  width: 60px;
}

/*************************************************************/

/* レビュー */

/*************************************************************/

/* レビュー件数 */
.item_info .review_number {
  color: var(--color-gray-700);
}

.large_rating_icon .star_empty,
.large_rating_icon .star_full,
.large_rating_icon .star_half,
.medium_rating_icon .star_empty,
.medium_rating_icon .star_full,
.medium_rating_icon .star_half,
.small_rating_icon .star_empty,
.small_rating_icon .star_full,
.small_rating_icon .star_half {
  background-image: none;
}

.star_icon {
  display: inline-block;
  margin-top: 4px;
  font: normal normal normal 14px/1 FontAwesome;
}

.star_full::before {
  content: "\f005";
}

.star_half {
  position: relative;
}

.star_half::before,
.star_half::after {
  position: absolute;
}

.star_half::before {
  content: "\f005";
}

.star_half::after {
  content: "\f089";
}

.star_empty::before {
  content: "\f005";
}

/* 星の大きさ */
.large_rating_icon .star_icon::before,
.large_rating_icon .star_icon::after {
  font-size: 22px;
}

.large_rating_icon .star_icon {
  width: 25px;
  height: 25px;
}

.medium_rating_icon .star_icon::before,
.medium_rating_icon .star_icon::after {
  font-size: 18px;
}

.medium_rating_icon .star_icon {
  width: 20px;
  height: 20px;
}

.small_rating_icon .star_icon::before,
.small_rating_icon .star_icon::after {
  font-size: 14px;
}

/* 星の色 */
.star_icon::before,
.star_half::after {
  color: var(--color-pink-400);
}

.review_register_page_body .review_post_stars img[src$="star_full_x2.png"] {
  background-color: var(--color-pink-400);
}

.star_icon.star_empty::before,
.star_half::before {
  color: var(--color-border);
}

.review_register_page_body .review_post_stars img[src$="star_empty_x2.png"] {
  background-color: var(--color-border);
}

/* 文字の色 */
.rating_point {
  color: var(--color-gray-700);
  line-height: 100%;
}

.large_rating_icon .rating_point {
  font-size: var(--font-size-6xl);
}

.medium_rating_icon .rating_point {
  font-size: var(--font-size-4xl);
}

/* 星ポイント */
.rating_point {
  margin-left: 5px;
  color: var(--color-gray-700);
}

/* レビュー数 */
.review_number:not(.no_review) {
  margin-left: 7px;
}

/* グラフ */
.bar_graph {
  background-color: var(--color-pink-300);
}

/* 年代 */
.rating_age {
  font-size: var(--font-size-sm);
}

/* 分析レポート内レビュー数 */
.rating_number A {
  font-size: var(--font-size-sm);
}

/* レビュー一覧 */
.review_data {
  background-color: var(--color-gray-50);
  margin: 20px 0px;
}

.mypagereview_contents .list_item_data .review_data {
  background-color: transparent;
  margin: 5px 0px;
}

.mypagereview_contents .review_data_lower {
  padding: 10px;
  margin: 5px 0px 0px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .review_data {
    margin: 20px 5px 20px;
  }

  .mypagereview_contents .review_data_lower {
    padding: 15px;
  }
}

/* レビュータイトル */
.review_title {
  padding: 8px 0;
  font-size: var(--font-size-2xl-hi);
  font-weight: bold;
}

.product_review_item .page_title {
  margin-bottom: 30px;
}

.product_review_item .page_title .title_note,
.item_box .page_title .title_note {
  display: block;
  margin-top: 5px;
  font-size: var(--font-size-3xs);
}

/* レスポンシブ横幅710px以上指定 */
@media screen and (min-width: 710px) {
  .product_review_item .page_title .title_note,
  .item_box .page_title .title_note {
    font-size: var(--font-size-2xs);
  }
}

.itemdetail .review_data .review_title,
.mypagereview_contents .review_data .review_title {
  font-size: var(--font-size-lg);
}

.mypagereview_contents .review_data .review_title {
  padding-bottom: 15px;
}

/* 登録日 */
.review_postdate {
  background-color: var(--color-teal-500);
  color: var(--color-white);
}

/* レビュワーー */
.reviewer_name {
  padding: 15px 15px 0;
  background-color: var(--color-surface);
  color: var(--color-gray-700);
}

/* メモ */
.review_note {
  padding: 15px;
  background-color: var(--color-surface);
}

.detail_page_body .review_note {
  background-color: var(--color-surface);
}

/* ショップオーナー返信 */
.owner_note {
  border-bottom: 1px solid var(--color-border);
}

/* ショップオーナーヘッダー */
.owner_header {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-blue-500);
}

/* ショップオーナー登録日 */
.owner_postdate {
  display: inline-block;
  margin-left: 5px;
}

/* 参考 */
.review_consult {
  font-size: var(--font-size-2xs);
}

/* 参考質問数字 */
.user_number {
  font-size: var(--font-size-2xl-hi);
  font-weight: bold;
  color: var(--color-gray-700);
}

/* 参考質問ボタン */
.review_vote_btn {
  display: inline-block;
  margin-top: 5px;
  margin-left: 5px;
}

/* 商品一覧レビュー数 */
.item_list .review_number {
  font-size: var(--font-size-2xs);
  margin-left: 5px;
}

/* 商品詳細レビュー数 */
.review_list .review_number {
  font-size: var(--font-size-sm);
}

/* 商品詳細レビュー */
.inner_detail_review_area {
  padding: 10px;
}

/* 商品詳細ヘッダー */
.detail_review_header {
  padding-top: 15px;
  padding-bottom: 5px;
}

.detail_review_header .global_btn {
  text-align: center;
}

/* 全て見る */
.more_item .label_suffix {
  margin-top: 3px;
  font-size: var(--font-size-2xs);
}

.more_item .label_suffix + .fa {
  vertical-align: middle;
}

/* レビュー一覧 */
.review_item_name {
  font-size: var(--font-size-xl);
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .review_item_name {
    font-size: var(--font-size-2xl);
  }
}

.inner_review_item_data,
.inner_review_list_product_box .add_cart {
  padding: 5px 10px;
}

.inner_review_item_data .large_rating_icon {
  padding: 8px 5px;
}

.product_review_info_area .rating_average,
.rating_average {
  margin: 20px 0px;
}

.inner_rating_average {
  margin: 0px 10px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .product_review_info_area .rating_average,
  .rating_average {
    margin: 0px;
  }

  .inner_rating_average {
    margin: 0px;
  }
}

/* マイページレビュー管理 */
.item_data.review_admin .inner_item_data {
  padding: 20px 0;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .item_data.review_admin .inner_item_data {
    padding: 30px 0;
  }
}

/* マイページレビュー管理ボタン */
.review_admin .global_btn {
  text-align: center;
}

.item_data.review_admin .inner_item_data .box_both_ends_space {
  padding: 5px 5px 0px;
}

.review_admin .review_item_name {
  margin: 5px 0;
  font-size: var(--font-size-lg);
}

.review_list .delete_box .delete_btn_box {
  top: 10px;
}

.review_post_product_box .review_item_data {
  padding-left: 15px;
}

/********************************************************************/

/* ログイン */

/********************************************************************/

/* ID、PW枠 */
.signin_box .id_box,
.signin_box .pass_box {
  margin: 0px;
}

/* ID、PWタイトル */
.signin_box .id_title,
.signin_box .pass_title {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xl);
  font-weight: bold;
}

.signin_box .password .global_link {
  font-size: var(--font-size-2xs);
}

/* 新規登録枠 */
#register_form {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/********************************************************************/

/* カート */

/********************************************************************/

#shoppingcart_page_step1 .visitor:not(:has(#cart_step)) .shoppingcart_contents {
  max-width: 680px;
  margin: auto;
}

#shoppingcart_page_step1
  .visitor:not(:has(#cart_step))
  .shoppingcart_contents
  #signin_form,
#shoppingcart_page_step1
  .visitor:not(:has(#cart_step))
  .shoppingcart_contents
  #cartregister_form {
  padding: 0px 5px;
}

/* カートの中身各枠 */
.inner_cart_data {
  padding: 0px;
  margin-bottom: 10px;
  background-color: var(--color-surface);
}

/* 各項目枠 */
.cart_section {
  border-top: 1px solid var(--color-border);
  padding: 10px 0px;
}

/* 区切り線 */
.top_separator {
  border-top: 1px solid var(--color-border);
}

.bottom_separator {
  border-bottom: 1px solid var(--color-border);
}

/* 各項目ラベル */
.cart_label {
  font-weight: normal;
}

/* ボタン中央寄せ */
.cart_inner_btn {
  text-align: center;
}

/* 小計、送料 */
.cart_sub_total_price,
.cart_shipping_charge {
  text-align: right;
}

/* 合計 */
.cart_footer {
  text-align: right;
}

.grand_total {
  display: inline-block;
  border-bottom: 2px solid var(--color-teal-500);
  margin-bottom: 5px;
}

.grandtotal_price {
  font-size: var(--font-size-6xl);
  color: var(--color-gray-900);
}

/* 買い物を続ける */
.continue_shopping {
  text-align: right;
}

/* 送り主、お届け先追加変更ボタン */
.cart_recipient .global_btn {
  text-align: center;
}

/* お届け先名 */
.cart_recipient_title {
  padding: 8px 0px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}

/* ラジオボタン選択の強調表示 */
.cart_payment_row .form_element,
.ocnk009.responsive .shoppingcart_contents .cart_payment_row .form_element {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .cart_payment_row .form_element,
  .ocnk009.responsive .shoppingcart_contents .cart_payment_row .form_element {
    padding: 10px 20px 20px;
  }
}

.checked_row,
.ocnk009.responsive
  .shoppingcart_contents
  .form_area
  .checked_row
  > .form_title,
.ocnk009.responsive
  .shoppingcart_contents
  .form_inner_area
  .checked_row
  > .form_inner_title,
.ocnk009.responsive
  .shoppingcart_contents
  #cart_payment
  .checked_row
  .form_title,
.ocnk009.responsive
  .shoppingcart_contents
  #cart_payment
  .cart_payment_row.checked_row,
.ocnk009.responsive .shoppingcart_contents .cart_shipping_row.checked_row {
  background-color: var(--color-teal-25);
}

.form_area .checked_row > .form_title,
.form_inner_area .checked_row > .form_inner_title {
  color: var(--color-black);
  font-weight: 700;
}

.checked_row .global_info {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 10px;
}

/* リピータ向け決済機能用 */
.inner_global_info {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* クーポン/ポイント枠 */
.toggle_box .cart_point,
.toggle_box .box_padding,
.toggle_box .cart_point_notice {
  margin: 1px;
}

/* クーポン/ポイント変更時の金額を更新ボタン欄、強調表示背景 */
.notice_box .form_btn_spad {
  background-color: var(--color-teal-25);
}

A.edit_entered_card_link:link,
A.edit_entered_card_link:active,
A.edit_entered_card_link:visited {
  text-decoration: underline;
}

A.edit_entered_card_link:hover {
  text-decoration: none;
}

/*************************************************************/

/* ステップ表 */

/*************************************************************/

.step_list {
  width: 100%;
  margin: 10px 0px 15px;
  padding: 0px 2px;
}

/* ステップ表 各枠背景 */
.step_data {
  background-color: var(--color-gray-50);
  border-right: 2px solid var(--color-paper);
  text-align: center;
}

/* ステップ表 左端 */
.step_block:first-child .step_data {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

/* ステップ表 右端 */
.step_block:last-child .step_data {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-right: none;
}

/* ステップ表 各枠　現ページ */
.step_check .step_data {
  background-color: var(--color-teal-500);
}

/* ステップ表 文字 */
.step_data span {
  color: var(--color-gray-600);
}

/* ステップ表 ステップ数 */
.step_data .step_number {
  font-weight: 500;
  font-size: 9px;
}

/* ステップ表 現ページ文字 */
.step_check .step_data span {
  color: var(--color-white);
  font-weight: 700;
}

/********************************************************************/

/* 最新情報、店長日記 */

/********************************************************************/

/* 日付 */
.article_date {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
}

.date,
.article_date {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: normal;
  font-family: "Roboto", sans-serif;
}

.pwhatnew .article_date,
.pdiary .article_date {
  padding-top: 0px;
}

.format {
  font-size: var(--font-size-3xs);
}

/* 記事 */
.ph_article {
  font-size: var(--font-size-lg);
  padding: 15px 10px;
}

/* バックナンバー */
.count_number {
  font-size: var(--font-size-sm);
}

/********************************************************************/

/* ご利用案内 */

/********************************************************************/

/* 上部ページ内リンクのナビゲーション */
.help_navigation.anchor_nav_area {
  padding: 0px 10px;
}

.anchor_nav_area .nav_btn {
  border: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.use_hover .anchor_nav_area .nav_btn:hover {
  background-color: var(--color-teal-50);
  border: 1px solid var(--color-border);
}

/* 各ブロック */
.help_contents .inner_contents_box {
  margin-bottom: 10px;
}

.help_step,
.help_payment {
  padding-bottom: 5px;
}

/* 説明各ブロック */
.help_data {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: var(--font-size-sm);
}

/* 推奨環境 */
#spec_contents dt {
  font-weight: bold;
  padding-bottom: 5px;
}

#spec_contents dd {
  background-color: var(--color-gray-50);
}

/********************************************************************/

/* 特定商取引法 */

/********************************************************************/

/* 各欄枠 */
.contents_desc {
  padding: 10px 5px;
  margin: 5px 0px;
}

.legal_shop_name h1 {
  font-size: var(--font-size-2xl);
}

/********************************************************************/

/* メールマガジン */

/********************************************************************/

/* 登録、解除タイトル */
.mailmagazine_box .mailmagazine_subscribe_title,
.mailmagazine_box .mailmagazine_unsubscribe_title {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
  font-size: var(--font-size-xl);
  font-weight: bold;
}

/********************************************************************/

/* マイページ */

/********************************************************************/

/* ポイント */
.member_contents .point_number {
  font-size: var(--font-size-4xl);
  font-weight: bold;
  color: var(--color-teal-600);
}

.member_contents .point_number .point_suffix {
  color: var(--color-gray-700);
}

/* リンク枠 */
.link_box .global_iconleft {
  display: block;
  margin-bottom: 10px;
}

/* 注意書き */
.mypage_note {
  font-size: var(--font-size-sm);
  line-height: 140%;
}

/* マイページ共通　送り主　お届け先 */
.mypage_recipient {
  padding: 5px 0px;
  font-size: var(--font-size-lg);
}

.mypage_contents .link_box .global_link {
  font-weight: 500;
}

/*************************************************************/

/* 購入履歴 */

/*************************************************************/

/* 商品名 */
.history_data_list .item_name {
  font-weight: 500;
  color: var(--color-gray-700);
}

/*************************************************************/

/* 送り主、お届け先 */

/*************************************************************/

/* 住所 */
.recipient_data_list .user_address {
  font-weight: 500;
  color: var(--color-gray-700);
}

/*************************************************************/

/* お気に入り */

/*************************************************************/

/* 登録日、メモ */
.item_registration_date,
.item_memo {
  font-size: var(--font-size-sm);
}

/* 商品説明 */
.favorite_contents .item_desc {
  padding: 8px 3px;
  margin: 10px 0px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.favorite_contents .price {
  font-size: var(--font-size-sm);
}

/* メモ */
.item_memo_text {
  padding: 10px;
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
}

/*************************************************************/

/* 複数選択 */

/*************************************************************/

/* 複数削除 */
.bulk_btn {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* 複数選択 */
.inner_bulk_check_box {
  background-color: var(--color-gray-50);
}

.layout_column_text .inner_bulk_check_box,
.layout_text .inner_bulk_check_box {
  background-color: var(--color-gray-50);
}

.bulk_mode .layout_column_text .list_item_box,
.bulk_mode .layout_column_text .not_link,
.bulk_mode .layout_text .not_link {
  border-bottom: none;
}

/* 一括削除時の下部ボタン枠 */
.bulk_mode .fixed_bottom {
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
}

/* 数量表示バッジ */
.badge {
  background-color: var(--color-pink-500);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-white);
}

/*************************************************************/

/* 掲示板 */

/*************************************************************/

.page_box #bbs_post .section_title h3 {
  margin: 15px 10px 10px;
  padding: 10px 5px;
}

/* 記事枠 */
.post_box {
  margin-bottom: 5px;
  border: 1px solid var(--color-border);
}

/* 記事枠レス */
.post_box_res {
  padding-left: 20px;
}

/* 記事ヘッダー */
.post_box .data_table .cell_header,
.post_box .data_table .cell_data {
  background-color: var(--color-gray-50);
  font-weight: 500;
  border: none;
}

/* 記事ヘッダー下部余白 */
.post_box .data_table {
  margin-bottom: 5px;
}

/* 記事ヘッダー中央寄せ */
.post_box .res_cell,
.post_box .toggle_cell,
.post_box .replay_cell {
  text-align: center;
}

.post_title,
.post_user,
.post_day,
.post_number {
  padding: 2px 0px;
}

/* 記事タイトル */
.post_title {
  font-weight: bold;
  font-size: 14px;
}

/* 記事ユーザー */
.post_user {
  font-size: 11px;
}

/* 記事投稿日 */
.post_day {
  font-size: 11px;
}

/* 記事No */
.post_number {
  font-size: 13px;
}

/* URL */
.post_url {
  font-size: 13px;
}

/* 記事コメント */
.bbs_comments {
  background-color: var(--color-surface);
}

/* 記事検索 */
.bbs_search.form_data {
  background-color: var(--color-gray-50);
  margin-bottom: 10px;
}

/* 検索文字強調 */
.result_emphasis {
  background-color: var(--color-search-highlight);
}

/* 検索前に戻る */
.bbs_search .global_link {
  margin-left: 10px;
}

/* 記事開閉 */
#bbs_toggle {
}

/* 記事投稿欄 */
.bbs_post_form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

/*************************************************************/

/* 関連ページ */

/*************************************************************/

/* 内容 */
.link_desc_box {
  border-top: 1px solid var(--color-border);
}

/*************************************************************/

/* 私が店長です */

/*************************************************************/

/* スタッフ画像 */
.staff_photo,
.pstaff_photo {
  text-align: center;
  margin-top: 10px;
}

/* プロフィール項目 */
.staff_contents dt,
.pstaff_contents dt {
  border-top: 1px solid var(--color-border);
  font-weight: bold;
}

/* プロフィール内容 */
.staff_contents dd,
.pstaff_contents dd {
  border-top: 1px solid var(--color-border);
}

.staff_profile_desc {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-border);
}

/********************************************************************/

/* カレンダー */

/********************************************************************/

/* カレンダーヘッダー */
.calendar_data {
  padding: 15px 0px;
}

.cal_month {
  padding-bottom: 15px;
  text-align: center;
}

.cal_month .prev_month,
.cal_month .next_month,
.cal_month .this_month {
  padding: 0px 10px;
}

.cal_month span.prev_month,
.cal_month span.next_month {
  padding: 0px 5px;
  font-weight: bold;
  cursor: pointer;
}

/* 今月 */
.this_month {
  font-size: var(--font-size-2xl);
  font-weight: bold;
}

.side_col .this_month {
  font-size: 14px;
  padding: 0px;
}

.side_col .next_month,
.side_col .prev_month {
  font-size: 13px;
  padding: 0px;
}

/* カレンダー枠線 */
.calendar_data .data_table th.cell_header,
.calendar_data .data_table td.cell_data {
  border: 1px solid var(--color-border);
}

/* カレンダー曜日セル */
.calendar_data .cal_day_header {
  font-size: var(--font-size-2xs);
}

/* カレンダー各セル */
.calendar_data .data_table .cal_day_cell {
  width: 14%;
  height: 60px;
  vertical-align: top;
}

/* 日曜日 */
.sun .cal_day {
  color: var(--color-red-500);
}

/* 土曜日 */
.sat .cal_day {
  color: var(--color-blue-500);
}

/* 今日 */
.calendar_data .today {
  font-weight: bold;
}

/* イベント一覧 */
.event_list li {
  border-bottom: 1px solid var(--color-border);
}

/* イベント内容 */
.event_data {
  padding: 10px 0px;
}

/* イベント名 */
.event_name {
  font-weight: bold;
  line-height: normal;
}

/* アイコン画像 */
div.event_icon {
  text-align: center;
}

div.event_icon img {
  margin: 0px 1px;
}

span.event_icon {
  margin-right: 5px;
}

/* 定休日 */
.calendar_data .holiday,
.holiday_icon {
  background-color: var(--color-red-50);
}

.holiday_icon {
  border: 1px solid var(--color-border);
  display: inline-block;
  width: 15px;
  height: 15px;
}

/* イベント説明 */
.event_desc {
  font-size: var(--font-size-sm);
  padding: 5px;
}

/* 左右カラム */
.side_col .cal_day {
  font-size: var(--font-size-2xs);
}

.side_col .data_table th.cell_header,
.side_col .data_table td.cell_data {
  padding: 2px;
}

.side_col .calendar_data .data_table .cal_day_cell {
  height: auto;
}

/********************************************************************/

/* table */

/********************************************************************/

/* thタグ、tdタグ */
.data_table .cell_header,
.data_table_header,
.data_table .cell_data {
  padding: 10px;
  border: 1px solid var(--color-border);
}

/* thタグ */
.data_table .cell_header,
.data_table_header {
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
}

.data_table tbody .cell_header {
  background-color: var(--color-gray-50);
}

/* tdタグ */
.data_table .cell_data {
  background-color: var(--color-surface);
  color: var(--color-gray-700);
}

/********************************************************************/

/* フォーム */

/********************************************************************/

/* フォーム上部説明 */
.list_icon_circle {
  color: var(--color-gray-700);
}

/* フォーム項目 */
.form_element,
.form_inner_element {
  padding: 10px 3px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .shoppingcart_contents #cart_recipient .form_element {
    padding: 10px;
  }
}

select {
  border: var(--color-gray-300) solid 1px;
}

/* 必須項目 */
.require {
  color: var(--color-red-500);
  font-weight: bold;
}

abbr.require {
  border: none;
  cursor: default;
}

/* 注意書き */
span.cell_note {
  font-size: var(--font-size-2xs);
  font-weight: normal;
}

/* メールアドレス欄 */
.confirm_email {
  border: none;
  background-color: var(--color-gray-50);
}

/********************************************************************/

/* 入力エリア */

/********************************************************************/

/* 標準 */
.form_data .defaultsize {
  width: 170px;
}

/* 特小 */
.form_data .xsmallsize {
  width: 60px;
}

/* 小 */
.form_data .smallsize {
  width: 80px;
}

/* 大 */
.form_data .largesize {
  max-width: 500px;
  width: 97%;
}

/********************************************************************/

/* フォームエラー */

/********************************************************************/

/* 個別エラー表示 */
.form_error {
  border: 5px solid var(--color-red-500);
  border-radius: var(--radius-md);
}

/* フォーム上部エラー表示 */
.error_box {
  border: 1px solid var(--color-red-500);
  border-radius: var(--radius-md);
}

/* 商品詳細エラー表示 */
.detail_page_body .error_box {
  margin: 10px;
}

/* エラー表示　※赤枠内文字 */
.error_status {
  color: var(--color-red-700);
  font-size: var(--font-size-sm);
  padding-left: 5px;
}

/* エラー時入力エリア背景色 */
.page_box .edit_form .error_row input,
.page_box .edit_form .error_row select,
.page_box .edit_form .error_row textarea {
  background-color: var(--color-red-50);
}

/* エラーアイコン */
.error_icon .fa {
  background-color: var(--color-red-500);
  box-shadow: 0px 0px 0px 1px var(--color-red-500);
  color: var(--color-white);
}

/* フォーム上部OK表示 */
.ok_box {
  border: 1px solid var(--color-blue-500);
  border-radius: var(--radius-md);
}

/* OK表示 ※緑枠内文字 */
.ok_status {
  color: var(--color-blue-500);
  font-size: var(--font-size-sm);
  padding-left: 5px;
}

/* OK表示アイコン位置調整 */
.ok_status img {
  padding-right: 3px;
}

/* OK時入力エリア背景色 */
.page_box .edit_form .ok_row input,
.page_box .edit_form .ok_row select,
.page_box .edit_form .ok_row textarea,
.page_box .edit_form .error_row .ok_input {
  background-color: var(--color-blue-50);
}

/* OKアイコン */
.ok_icon .fa {
  background-color: var(--color-blue-500);
  box-shadow: 0px 0px 0px 1px var(--color-blue-500);
  color: var(--color-white);
}

/* 重要な注意書き色 */
.note_color {
  color: var(--color-red-500);
}

/********************************************************************/

/* アイコン */

/********************************************************************/

/* ヘッダーナビボタン */
.responsive .inner_header_nav .header_nav_item .fa {
  font-size: 22px;
  color: var(--color-gray-900);
  text-align: center;
  position: static;
  margin-right: 0px;
}
.responsive
  .inner_header_nav
  .header_nav_item.empty_nav_label
  .fa.icon-ocnk-barsla {
  font-size: 25px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive .inner_header_nav .header_nav_item:not(.empty_nav_label) {
    width: 60px;
  }
  .responsive
    .inner_header_nav
    :is(.h_contact, .h_favorite, .h_help, .h_signout).header_nav_item:not(
      .empty_nav_label
    ) {
    width: 70px;
  }
  .responsive
    .inner_header_nav
    :is(.h_contact, .h_favorite, .h_help, .h_signout).header_nav_item:not(
      .empty_nav_label
    )
    .nav_text
    .nav_label {
    font-size: 9px;
  }
  .ocnk038.responsive
    #container:has(.side_col .has_toggle_menu_list)
    .inner_header_nav
    .header_nav_item
    .nav_text
    .fa {
    font-size: 22px;
  }
  .ocnk038.responsive
    #container:has(.side_col .has_toggle_menu_list)
    .inner_header_nav
    .header_nav_item.empty_nav_label
    .nav_text
    .fa.icon-ocnk-barsla {
    font-size: 25px;
  }
}

.responsive .inner_header_nav .empty_nav_label .nav_btn .fa {
  transform: none;
}

/* グローバルナビ */
.inner_global_nav .fa {
  color: var(--color-gray-900);
}

.responsive .inner_global_nav A .fa {
  font-size: 16px;
}

.global_iconleft .fa {
  padding-right: 5px;
}

.itemlist_cartbutton .btn_size_icon .fa,
.itemlist_cartbutton .global_iconleft .fa {
  font-size: 16px;
}

/* レスポンシブ横幅500px以上指定 */
@media screen and (min-width: 500px) {
  .global_iconleft .fa {
    padding-right: 8px;
  }

  .itemlist_cartbutton .btn_size_icon .fa,
  .itemlist_cartbutton .global_iconleft .fa {
    font-size: 18px;
  }
}

.global_iconright .fa {
  padding-left: 5px;
}

/* 検索ボタン */
.fa-search {
  font-family: "ocnkiconf";
}

.fa-search:before {
  content: "\e90f";
  font-weight: 700;
}

.ocnk020.responsive
  .search_bar:has(.global_btn .searchinput)
  .global_btn
  .searchinput:before {
  content: "\e90f";
  width: 1em;
  display: inline-block;
  font-family: "ocnkiconf";
  font-weight: 700;
}

/* 閉じる、削除ボタン */
.close_btn_box .fa,
.delete_btn_box .fa,
.nav_close_btn .fa {
  color: var(--color-gray-900);
}

.close_btn_box .fa {
  font-size: 18px;
  line-height: 18px;
}

/* フッター下部ボタン */
.fixed_corner_button .fa {
  font-size: 40px;
  color: var(--color-gray-700);
}

.use_hover .fixed_corner_button:hover .fa {
  color: var(--color-gray-900);
}

/* +-開閉ボタン */
.open_icon .fa,
.close_icon .fa {
  color: var(--color-gray-900);
}

.side_sub_menu_hover .has_sub_menu .fa {
  font-size: 14px;
  right: 10px;
}

/* 説明付き一覧表示調整 */
.right_side_list_icon {
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -11px;
  font-size: 22px;
}

/* 矢印アイコン */
#container .fa-chevron-right,
#container .fa-chevron-down,
#container .fa-chevron-up {
  color: var(--color-teal-600);
}

#container #footer_container .fa-chevron-right,
#container #footer_container .fa-chevron-down,
#container #footer_container .fa-chevron-up {
  color: var(--color-teal-50);
}

.fa-chevron-right,
.fa-chevron-left,
.fa-chevron-down,
.fa-times {
  font-family: "ocnkiconf";
}

.fa-chevron-right:before {
  content: "\e909";
}

.nav_btn.has_image_nav_btn .fa-chevron-right.right_side_nav_icon::before {
  content: "";
}

.fa-chevron-left:before {
  content: "\e90b";
}

.fa-chevron-down:before,
.side_sub_menu_hover .has_sub_menu .fa.fa-chevron-down::before {
  content: "\e90a";
}

.close_sub_menu_link .fa-chevron-down:before,
.toggle_opened .title_toggle_link .fa-chevron-down:before {
  content: "\e908";
}

.fa-times:before {
  content: "\e92d";
}

/********************************************************************/

/* ボタン */

/********************************************************************/

/* アイコンボタン枠 */
.icon_btn {
  padding: 0px 3px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.icon_btn.close_btn_box,
.icon_btn.search_close,
.site_list_dropdown .icon_btn {
  padding: 0 4px 1px;
}

.use_hover .icon_btn:hover {
  border: 1px solid var(--color-border);
  background-color: var(--color-gray-50);
}

/* +-開閉ボタン枠 */
.open_icon,
.close_icon {
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-surface);
}

.use_hover A:hover .open_icon,
.use_hover A:hover .close_icon,
.use_hover abbr:hover .open_icon,
.use_hover abbr:hover .close_icon {
  background-color: var(--color-gray-300);
}

/* 汎用ボタン */
.general_btn {
  padding: 4px 5px;
  border: solid 1px var(--color-border);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  display: inline-block;
  box-shadow: none;
  font-size: var(--font-size-sm);
  line-height: 100%;
}

.global_btn button.general_btn {
  padding: 4px 5px;
}

.use_hover .general_btn:hover {
  border: 1px solid var(--color-border);
  background-color: var(--color-gray-80);
}

.standard_btn {
  padding: 10px 20px;
  border: solid 1px var(--color-border);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  display: inline-block;
  box-shadow: none;
}

.use_hover .standard_btn:hover {
  border: 1px solid var(--color-border);
  background-color: var(--color-gray-80);
}

/* 右端ボタン */
.page_title_right_edge .general_btn,
.section_title_right_edge .general_btn {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-gray-600);
}

.use_hover .page_title_right_edge .general_btn:hover,
.use_hover .section_title_right_edge .general_btn:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-600);
}

/* 画像リンク */
.use_hover .photo_link:hover {
  opacity: 0.7;
}

/*************************************************************/

/* フォームボタン */

/*************************************************************/

/* フォームボタンマウスオーバー */
.use_hover .global_btn input:hover,
.use_hover button:hover,
.use_hover .global_btn A:hover {
  opacity: 0.7;
}

/* ボタンサイズXXS */
.global_btn .btn_size_xxsmall {
  width: 30px;
  height: 30px;
}

/* ボタンサイズXS */
.global_btn .btn_size_xsmall {
  width: 50px;
  height: 30px;
}

/* ボタンサイズS */
.global_btn .btn_size_small {
  width: 70px;
  height: 30px;
}

/* ボタンサイズM */
.global_btn .btn_size_medium {
  width: 90px;
  height: 30px;
}

.global_btn A.btn_size_xxsmall,
.global_btn A.btn_size_xsmall,
.global_btn A.btn_size_small,
.global_btn A.btn_size_medium,
.global_btn A.btn_size_auto {
  line-height: 30px;
}

/* ボタンサイズL */
.global_btn .btn_size_large {
  width: 130px;
  height: 35px;
}

.global_btn A.btn_size_large {
  line-height: 35px;
}

/* ボタンサイズXL */
.global_btn .btn_size_xlarge {
  width: 180px;
  height: 40px;
  font-size: var(--font-size-xl);
}

.global_btn A.btn_size_xlarge {
  line-height: 40px;
}

/* ボタンサイズXXL */
.global_btn .btn_size_xxlarge {
  width: 281px;
  height: 50px;
  font-size: var(--font-size-2xl-lo);
  font-weight: 600;
}

.global_btn A.btn_size_xxlarge {
  line-height: 50px;
}

/* ボタンサイズ横幅auto */
.global_btn .btn_size_auto {
  height: 30px;
  width: auto;
  padding: 0px 20px;
}

/* ボタンサイズ小文字 */
.font_size_small {
  font-size: var(--font-size-3xs);
}

/* 縦2段積みボタン */
.under_global_btn {
  display: block;
  margin-top: 30px;
}

/* 商品詳細 */
.add_cart_btn_wrapper {
  width: 100%;
}

#contents .detail_item_data .add_cart_btn_wrapper .is_fixed .add_cart_btn {
  margin: 15px auto !important;
  max-width: 300px;
}

.form_data,
.form_inner_data {
  padding: 5px;
  margin: 0px;
}

/* 下部配置ボタン */
.form_btn {
  text-align: center;
  margin: auto;
  padding: 20px 0;
}

/* 下部ボタン上部注意書き */
.global_bottom_info {
  border-bottom: 1px solid var(--color-border);
}

/* ログインページ新規登録余白調整 */
#register_form .form_btn {
  padding: 0px;
}

/* Aタグボタン */
.global_btn A {
  font-weight: normal;
}

/* 外部決済ボタン */
.outside_btn_box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* 楽天決済用 */
.payment_method_desc {
  margin-bottom: 10px;
}

/*--------------------------------------*/

/* ボタン色 */

/*--------------------------------------*/
/* 色通常 */
/* フォームボタン全般 */
.btn_color_common {
  background-color: var(--color-gray-600);
  color: var(--color-white);
}

.btn_color_common,
A.btn_color_common:link,
A.btn_color_common:visited,
A.btn_color_common:hover,
A.btn_color_common:active {
  /* 共通ボタンは枠線型にして紙の上に置いた部品として控えめに。塗りは強調ボタンだけにする */
  background-color: var(--color-surface);
  background-image: none;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-900);
  font-weight: 500;
  box-shadow: none;
}

.use_hover .btn_color_common:hover,
.use_hover A.btn_color_common:hover {
  background-color: var(--color-white);
  border-color: var(--color-teal-500);
  color: var(--color-teal-600);
  opacity: 1;
}

/* 色強調 */
.btn_color_emphasis {
  background-color: var(--color-teal-600);
  color: var(--color-white);
}

.btn_color_emphasis,
A.btn_color_emphasis:link,
A.btn_color_emphasis:visited,
A.btn_color_emphasis:hover,
A.btn_color_emphasis:active,
A.btn_color_common.restockinput:link,
A.btn_color_common.restockinput:visited,
A.btn_color_common.restockinput:hover,
A.btn_color_common.restockinput:active {
  background-color: var(--color-teal-600);
  background-image: none;
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-weight: 500;
}

.use_hover .btn_color_emphasis:hover,
.use_hover A.btn_color_emphasis:hover {
  background-color: var(--color-teal-500);
  color: var(--color-white);
  opacity: 1;
}

/*************************************************************/

/* パンくずリスト */

/*************************************************************/

.responsive .breadcrumb_area,
.ocnk028.responsive.wide_layout #container #contents .breadcrumb_area,
.ocnk028.responsive.single_layout #container #contents .breadcrumb_area {
  max-width: 100%;
}

.responsive .breadcrumb_area {
  background-color: var(--color-gray-50);
  padding: 0;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .responsive .breadcrumb_area {
    margin-bottom: 20px;
  }
}

.has_min_nav .breadcrumb_area {
  margin-bottom: 0px;
}

.breadcrumb_list {
  max-width: 1200px;
  margin: auto;
  padding: 10px;
  font-size: var(--font-size-3xs);
}

.breadcrumb_list A {
  text-decoration: underline;
}

.ocnk028.responsive .breadcrumb_list {
  max-width: 1400px;
}

.ocnk028.responsive .has_min_nav .breadcrumb_list,
.has_min_nav .breadcrumb_list {
  max-width: 980px;
}

/********************************************************************/

/* ポップアップ */

/********************************************************************/

/* ポップアップの背景 */
.overlay_area .modal_skin {
  background-color: var(--color-surface);
}

.overlay_area .page_box {
  padding: 10px;
}

/* レスポンシブ横幅840px以上指定 */
@media screen and (min-width: 840px) {
  .overlay_area .page_box {
    padding: 15px;
  }
}

/********************************************************************/

/* ロード、ページャー */

/********************************************************************/

/* 読み込み中アイコン画像 */
.loading,
.initial_loading {
  background: url(img/load_icon.gif);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
}

.entry_box .loading {
  background-image: url(img/load_entry_icon.gif);
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
}

/* 一覧ページャー */
.pager {
  margin: 0px 0px 15px;
  text-align: center;
}

#pagerbottom {
  margin: 15px 0px;
  background-color: var(--color-gray-50);
}

/* 現ページ */
.pager strong {
  min-width: 20px;
  min-height: 20px;
  padding: 3px;
  margin: 0px 1px;
  border: 1px solid var(--color-teal-600);
  background-color: var(--color-teal-600);
  color: var(--color-white);
  font-size: var(--font-size-sm);
}

/* 各ページ */
.pager .pager_btn {
  min-width: 20px;
  min-height: 20px;
  margin: 0px 1px;
  padding: 3px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.pager .to_next_page,
.pager .to_prev_page {
  min-width: 50px;
}

.use_hover .pager .pager_btn:hover {
  border: 1px solid var(--color-teal-600);
  background-color: var(--color-teal-600);
  color: var(--color-white);
}

/********************************************************************/

/* グローバルサイトリンク */

/********************************************************************/

/* リンク一覧 */
.site_list_dropdown {
  background-color: var(--color-surface);
  box-shadow:
    5px 5px 10px var(--color-shadow),
    -5px 5px 10px var(--color-shadow);
}

/* 各リンク先 */
.layout_dropdown .site_list_data {
  border-bottom: 1px solid var(--color-border);
}

/* 各リンク文字 */
.global_site .site_list_dropdown .nav_btn,
#inner_footer .layout_dropdown .site_list_data .nav_btn {
  color: var(--color-gray-700);
}

.use_hover .global_site .site_list_dropdown .nav_btn:hover,
.use_hover #inner_footer .layout_dropdown .site_list_data .nav_btn:hover {
  color: var(--color-gray-600);
  background-color: var(--color-gray-50);
  border: none;
}

/* リスト表示タイトル */
#inner_footer .layout_dropdown .site_list_title .nav_btn {
  background-image: none;
  background-color: var(--color-surface);
  color: var(--color-gray-700);
  border: none;
}

/********************************************************************/

/* フッター */

/********************************************************************/

/* PCサイトボタン */
.footer_pc_site_box {
  height: 30px;
  padding: 15px 0px 15px 0px;
  position: relative;
  background-color: var(--color-gray-50);
  box-sizing: content-box;
  text-align: center;
}

.pc_site_btn .pc_site_link {
  width: 80px;
  margin: auto;
  padding: 8px 8px 8px 30px;
  display: inline-block;
  background-image: url(img/icon_pc.png);
  -webkit-background-size: 30px 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: 5px center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-sizing: content-box;
  font-size: 12px;
  text-align: center;
  color: var(--color-black);
}

.use_hover .pc_site_btn .pc_site_link:hover {
  color: var(--color-gray-700);
  opacity: 0.8;
}

/* 自由記入欄 */
#inner_contents_bottom,
#inner_footer_free_top {
  padding: 10px;
}

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

.footer_area A {
  color: var(--color-white);
}

.footer_area A:hover {
  color: var(--color-teal-50);
}

#footer {
  text-align: center;
  padding: 20px 10px;
}

.footer_upper_link_box .continued_link_box {
  border-left: 1px solid var(--color-white);
}

/* ページトップへ戻るボタン */
.fixed_corner_button {
  width: 45px;
  height: 45px;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-300);
  text-align: center;
}

.move_to_add_cart .corner_covering_item,
.use_hover .move_to_add_cart:hover .corner_covering_item {
  color: var(--color-gray-300);
}

/* フッター下部バナー */
.footer_banner {
  text-align: center;
}

.footer_banner .banner_box {
  margin: 15px 5px 5px 5px;
}

.use_hover .footer_banner .banner_box A:hover {
  opacity: 0.8;
}

/* トップページ フリースペース：カテゴリーバナー（グリッド） */
.banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 var(--space-side-sp);
}

.banner-grid__item a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.banner-grid__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity var(--transition-base);
}

.use_hover .banner-grid__item a:hover img {
  opacity: 0.8;
}

/* PC：3列2段。横幅を絞って中央寄せし、1枚あたりを商品画像より大きく・大きすぎないサイズに収める */
@media screen and (min-width: 840px) {
  .banner-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    max-width: 1016px;
    margin: 0 auto;
    padding: 0 15px;
  }
}

/* トップページ フリースペース：特集バナー（キャプション付き） */
.custom_space:has(> .banner) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 0 var(--space-side-sp);
}

.custom_space > .banner a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.custom_space > .banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity var(--transition-base);
}

.use_hover .custom_space > .banner a:hover img {
  opacity: 0.8;
}

.custom_space > .banner > div {
  margin-top: 10px;
  text-align: center;
  line-height: 1.6;
}

@media screen and (min-width: 840px) {
  .custom_space:has(> .banner) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
    padding: 0 15px;
  }
}

/* フリースペースに置いたセクション見出し：見出しと中身の間隔を他のセクションにそろえる */
.custom_space > .section_title {
  margin-bottom: 14px;
}

/* 特集バナーはグリッドのため、見出しを1行ぶち抜きにし、行の間隔（28px）のぶんを詰める */
.custom_space:has(> .banner) > .section_title {
  grid-column: 1 / -1;
  margin-bottom: -14px;
}

@media screen and (min-width: 840px) {
  .custom_space > .section_title {
    margin-bottom: 19px;
  }

  /* PCは行の間隔が40pxのため、そのぶんを詰める */
  .custom_space:has(> .banner) > .section_title {
    margin-bottom: -21px;
  }
}

/* トップページ フリースペース：おすすめナビ */
.main_free_box .globalnavi_side {
  padding: 0 10px;
}

/* 既存の .side_box 下余白（#container 指定）を打ち消す。セクション間の余白は .main_free_box 側に任せる */
#container .main_free_box .side_box.globalnavi_side {
  margin-bottom: 0;
}

/* スマホ：1枚のカードを行で区切ったリスト */
.main_free_box .globalnavi_side .navi_list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.main_free_box .globalnavi_side .navi_list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 36px 8px 14px;
  background-color: var(--color-surface);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.main_free_box .globalnavi_side .navi_list li + li {
  border-top: 1px solid var(--color-border);
}

/* アイコン画像はリンクの外にあるため、リンクの当たり判定を項目全体に広げる */
.main_free_box .globalnavi_side .navi_list li a {
  flex: 1;
  color: var(--color-gray-900);
  font-weight: bold;
  line-height: 1.5;
  text-decoration: none;
}

.main_free_box .globalnavi_side .navi_list li a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 右端の矢印 */
.main_free_box .globalnavi_side .navi_list li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--color-teal-500);
  border-right: 2px solid var(--color-teal-500);
  transform: translateY(-50%) rotate(45deg);
  transition: right var(--transition-base);
}

/* 項目の頭は、すべてテラコッタ色の丸印でそろえる。
   アイコン画像（売れ筋ランキングなど）は項目ごとに色や描き方が違い、配色から浮くため表示しない */
.main_free_box .globalnavi_side .navi_list li img {
  display: none;
}

.main_free_box .globalnavi_side .navi_list li.non-img::before,
.main_free_box .globalnavi_side .navi_list li.with-img::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, var(--color-pink-400) 0 3px, transparent 3.5px);
}

.use_hover .main_free_box .globalnavi_side .navi_list li:hover {
  background-color: var(--color-white);
}

.use_hover .main_free_box .globalnavi_side .navi_list li:hover a {
  color: var(--color-teal-600);
}

.use_hover .main_free_box .globalnavi_side .navi_list li:hover::after {
  right: 12px;
}

/* 表示中のページに対応する項目（スクリプトが nav_on を付与） */
.main_free_box .globalnavi_side .navi_list li.nav_on {
  background-color: var(--color-teal-25);
}

/* タブレット以上：1項目ずつ独立したカードを並べる */
@media screen and (min-width: 600px) {
  .main_free_box .globalnavi_side .navi_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .main_free_box .globalnavi_side .navi_list li,
  .main_free_box .globalnavi_side .navi_list li + li {
    min-height: 60px;
    padding: 10px 32px 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .use_hover .main_free_box .globalnavi_side .navi_list li:hover,
  .main_free_box .globalnavi_side .navi_list li.nav_on {
    border-color: var(--color-teal-500);
  }
}

@media screen and (min-width: 840px) {
  .main_free_box .globalnavi_side {
    padding: 0 15px;
  }
}

/* PC：5列2段 */
@media screen and (min-width: 1200px) {
  .main_free_box .globalnavi_side .navi_list {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .main_free_box .globalnavi_side .navi_list li,
  .main_free_box .globalnavi_side .navi_list li + li {
    min-height: 64px;
  }
}

/* トップページ：商品セクションを紙色と生成り色の単色で交互に塗り分け、単調さを和らげる */
.main_recommend_item_box,
.main_ranking_item_box,
.main_group_item_box {
  padding: 40px 0;
}

/* 新着・再入荷は生成り色の帯。コンテンツ幅（最大1400px）の外側まで色を広げる。横スクロールを出さないよう box-shadow と clip-path で描く */
.main_recommend_item_box,
.main_group_item_box {
  background-color: var(--color-surface);
  box-shadow: 0 0 0 100vmax var(--color-surface);
  clip-path: inset(0 -100vmax);
}

/* 帯の中では下余白を帯の padding に任せる */
.main_recommend_item_box .item_box,
.main_ranking_item_box .item_box,
.main_group_item_box .item_box {
  margin-bottom: 0;
}

/* 帯の直後に来るフリースペースとの間隔 */
:is(.main_recommend_item_box, .main_ranking_item_box, .main_group_item_box) + .main_free_box {
  margin-top: 60px;
}

@media screen and (min-width: 840px) {
  .main_recommend_item_box,
  .main_ranking_item_box,
  .main_group_item_box {
    padding: 64px 0;
  }
}

/* システム標準CSSの無彩色（#f5f5f5・#e0dfe3 など）が残っていた部品を、紙地のパレットにそろえる。
   ベースCSS側は .ocnk0xx.responsive 付きの詳細度が高い指定のため、#container を付けて上書きする */

/* 入力欄・セレクト */
#container input[type="text"],
#container input[type="email"],
#container input[type="tel"],
#container input[type="password"],
#container input[type="number"],
#container input[type="search"],
#container select,
#container textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-900);
}

#container input:focus,
#container select:focus,
#container textarea:focus {
  border-color: var(--color-teal-500);
  outline: 2px solid color-mix(in srgb, var(--color-teal-500) 25%, transparent);
  outline-offset: 0;
}

/* ヘッダーの商品検索 */
#container .search.form_data {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

#container .search.form_data input {
  border: 0;
  background-color: transparent;
}

/* 商品一覧の表示順変更バー */
#container .sort {
  background-color: var(--color-gray-50);
}

#container .sort_item {
  background-color: transparent;
}

#container .sort_toggle .toggle_open {
  background-color: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-900);
}

/* 関連商品スライダーの送りボタン。矢印は白いアイコン画像のため背景は暗いまま、純黒ではなくフッターの濃紺を半透明で敷く */
#container .lower_slider_controller .swiper-button-prev,
#container .lower_slider_controller .swiper-button-next {
  background-color: color-mix(in srgb, var(--color-footer-bg) 55%, transparent);
}

/* 商品詳細：カートボタン群を左揃えにする。
   ベースCSSは PC 時に max-width: 600px; margin: auto で中央寄せしているため、#container を付けて上書きする。
   左余白 15px は、上に並ぶ価格・数量・返品特約の各行の内側余白（15px）にそろえるため */
@media screen and (min-width: 840px) {
  #container .detail_item_data .detail_section.add_cart {
    margin-left: 15px;
    margin-right: auto;
  }
}

/********************************************************************/
/* 全ページの統一（見出し・ラベル・価格・在庫・文章内の色） */
/********************************************************************/

/* ----- ページ名の見出し ----- */
/* 商品一覧・ご利用案内・カート・ログイン・会員登録・フリーページなどのページ名を、
   トップページのセクション見出し（.main_box h2）と同じ形にそろえる。
   中央寄せにし、下に呉須色の短い線を付ける。商品詳細の商品名（.detail_page_title）は対象外。
   フリーページの部品（.fp）で組んだページは、.fp の最初の h2 をページ名として扱う */
#container .page_title h1:not(.detail_page_title),
#container .page_title h2,
#container .free_page_box .inner_free_contents > h2:first-of-type,
#container .free_page_box .fp > h2:first-child {
  padding: 10px;
  margin-bottom: 10px;
  color: var(--color-gray-900);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  border: none;
}

#container .page_title h1:not(.detail_page_title)::after,
#container .page_title h2::after,
#container .free_page_box .inner_free_contents > h2:first-of-type::after,
#container .free_page_box .fp > h2:first-child::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 15px auto 10px;
  background-color: var(--color-teal-500);
  border-radius: var(--radius-xs);
}

/* フリーページの 2 つ目以降の h2 は、ページ内の小見出しとして扱う。
   商品詳細の「商品詳細」見出しと同じく、左寄せで下に細い線を引く */
#container .free_page_box .inner_free_contents > h2:not(:first-of-type) {
  margin: 40px 0 16px;
  padding: 10px 0;
  color: var(--color-gray-900);
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

/* PC は本文を 16px にしたため（「本文の文字サイズ（PC）」）、小見出しも 18px に上げて本文より大きく保つ */
@media screen and (min-width: 840px) {
  #container .free_page_box .inner_free_contents > h2:not(:first-of-type) {
    font-size: 18px;
  }
}

/* ----- 商品ラベル（NEW・PICK UP） ----- */
/* システムのラベル画像はピンクと水色の鮮やかな色で、配色から浮く。
   画像を隠し、同じ文字を細い枠の文字ラベルとして表示する。NEW はテラコッタ、PICK UP は呉須色 */
#container .icon_new_box img,
#container .icon_pickup_box img {
  display: none;
}

#container .icon_new_box::before,
#container .icon_pickup_box::before {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.08em;
  background-color: var(--color-white);
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
}

#container .icon_new_box::before {
  content: "NEW";
  color: var(--color-pink-500);
}

#container .icon_pickup_box::before {
  content: "PICK UP";
  color: var(--color-teal-600);
}

/* ----- 価格とポイント ----- */
/* 「640円6ポイント獲得(税込)」と続くと、(税込) がポイントに付いて見える。
   (税込) を価格の直後に置き、ポイントは改行して小さく控えめな色で表示する */
#container .selling_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

#container .selling_price .price_info {
  order: 1;
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--color-gray-600);
  font-size: 12px;
}

#container .selling_price .price_info .pt {
  font-size: inherit;
}

#container .detail_block_price .selling_price .price_info {
  font-size: 13px;
}

/* ----- 在庫数 ----- */
/* 数字だけ（例：3点）では意味が伝わらないため、前に「在庫」を付ける。在庫わずか（.lowstock）は元の文言のまま */
#container .list_item_data .stock:not(.lowstock)::before,
#container .detail_section.stock:not(.lowstock)::before {
  content: "在庫 ";
}

/* ----- 商品詳細の購入欄 ----- */
/* 「LINEで送る」ボタンを購入ボタン群の下へ移す。価格→数量→カートの流れを途切れさせないため。
   商品詳細ページ設定の画像サイズによって外枠のクラス名が変わる（小：.product_info_box、大：.large_product_info_box）ので両方に指定する */
#container .product_info_box,
#container .large_product_info_box {
  display: flex;
  flex-direction: column;
}

#container .product_info_box .detail_block_social,
#container .large_product_info_box .detail_block_social {
  order: 1;
}

/* ----- スマートフォンの商品一覧 ----- */
/* 579px 以下は 2 列にする（ベースは 3 列）。商品名と価格の細かい折り返しを減らすため */
@media screen and (max-width: 579.98px) {
  #container .column3 .tiled_list .list_item_cell {
    width: 50%;
  }

  /* トップページの商品セクション（新着・ランキング・再入荷）は、スマートフォンでは 8 件（4 段）まで表示する。
     PC は 6 列×2 段の 12 件。続きは各セクションの「もっと見る」から */
  .top_page_body #container .ajax_item_box .tiled_list .list_item_cell:nth-child(n+9) {
    display: none;
  }
}

/* ----- スマートフォンのフッター ----- */
/* 599px 以下はリンクを 2 列に並べる（ベースは 1 列で、21 項目が縦に長く続くため） */
@media screen and (max-width: 599.98px) {
  #container .footer_nav .footer_nav_item {
    width: 50%;
  }
}

/* ----- 文章内に直接書かれた色 ----- */
/* ご利用案内などの文章に <font color="red"> や style="color:blue;" が直接書かれている。
   原色の赤は配色の赤に、原色の青は地の文の色に戻す。
   それ以外の色（商品説明などで意図して使う色）は変えない。
   style 属性の指定は CSS より強いため、ここだけ !important を使う */
#container font[color="red" i],
#container font[color="#ff0000" i],
#container font[color="#f00" i] {
  color: var(--color-red-500);
}

#container font[color="blue" i],
#container font[color="#0000ff" i],
#container font[color="#00f" i] {
  color: inherit;
}

/* リンク内の色指定は、リンクだと分かるよう呉須色の下線付きにする。
   このサイトの本文リンクは地の文と同じ色で下線もないため、色を戻すだけではリンクに見えない */
#container a font[color] {
  color: var(--color-teal-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#container a[style*="color:blue"],
#container a[style*="color: blue"] {
  color: var(--color-teal-600) !important;
}

/* ----- お客様の声（フリーページ） ----- */
/* ページ内の <style> にある黄色い地・点線の枠・オレンジの線を、
   他のカードと同じ生成り色の地と細い線に置き換える */
#container .review {
  padding: 14px 18px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#container .review table tr.head td {
  padding-bottom: 8px;
  color: var(--color-gray-900);
  font-weight: bold;
  border-bottom: 1px solid var(--color-border);
}

/* ショップからの返信は、左の線で引用として見せる */
#container .review table tr.body td div {
  margin: 10px 0 10px 4px;
  padding: 4px 12px;
  background-color: transparent;
  border: none;
  border-left: 2px solid var(--color-gray-300);
}

#container .review table tr.body td img {
  border-color: var(--color-border);
}

#container .review table tr.body td img:hover {
  border-color: var(--color-teal-500);
}

/********************************************************************/
/* フリーページの部品（.fp-*） */
/********************************************************************/

/* フリーページの本文を組むための共通部品。HTML ではクラスを付けるだけで、どのページも同じ見た目になる。
   .fp          … ページ全体の枠。文章と写真を 720px の幅にそろえて中央に置く
   .fp-text     … 読ませる文章。行間を広げる
   .fp-note     … 注意書き（小さめ・控えめな色）
   .fp-figure   … 1 枚の写真
   .fp-grid     … 写真を並べる。スマホ・PC とも 2 列。--3 は常に 3 列、--4 は PC で 4 列
   .fp-square   … .fp-grid の写真を正方形に切りそろえる
   .fp-photo    … .fp-grid の写真を 4:3 に切りそろえる
   .fp-card     … 見出し・写真・文章をまとめるカード（お客様のディスプレイ集など）
   .fp-cta      … 商品一覧などへのリンクボタン。.fp-cta--sub は見出し下の控えめな文字リンク
   使用例：クラムシー工房（/page/10）、ネクス工房（/page/9）、お客様のディスプレイ集（/page/12） */
#container .fp {
  max-width: 720px;
  margin: 0 auto;
}

#container .fp-text {
  margin: 32px 0 0;
}

#container .fp-text p {
  margin: 0;
  color: var(--color-gray-700);
  line-height: 2;
}

#container .fp-text p + p {
  margin-top: 1em;
}

#container .fp-text .fp-note {
  color: var(--color-gray-600);
  font-size: 12px;
  line-height: 1.8;
}

#container .fp-figure {
  margin: 32px 0 0;
}

#container .fp-figure + .fp-figure {
  margin-top: 12px;
}

#container .fp-figure img,
#container .fp-grid img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#container .fp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
}

#container .fp-grid > a {
  display: block;
  transition: opacity var(--transition-base);
}

.use_hover #container .fp-grid > a:hover {
  opacity: 0.8;
}

#container .fp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#container .fp-square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#container .fp-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media screen and (min-width: 600px) {
  #container .fp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#container .fp-card {
  margin: 24px 0 0;
  padding: 20px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#container .fp-text + .fp-card {
  margin-top: 40px;
}

#container .fp-card h3 {
  margin: 0 0 16px;
  padding: 0 0 10px;
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: bold;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

#container .fp-card .fp-grid {
  margin-top: 0;
}

#container .fp-card .fp-text {
  margin-top: 14px;
}

/* PC は本文を 16px にしたため（「本文の文字サイズ（PC）」）、カードの見出しと注意書きも 1 段上げる */
@media screen and (min-width: 840px) {
  #container .fp-card h3 {
    font-size: 17px;
  }

  #container .fp-text .fp-note {
    font-size: 13px;
  }
}

/* 商品一覧などへのリンクボタン。共通ボタン（枠線型）と同じ見た目にそろえる */
#container .fp-cta {
  margin: 40px 0 0;
  text-align: center;
}

#container .fp-cta a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 28px;
  color: var(--color-gray-900);
  font-weight: bold;
  text-decoration: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

#container .fp-cta a::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-teal-500);
  border-right: 2px solid var(--color-teal-500);
  transform: rotate(45deg);
}

.use_hover #container .fp-cta a:hover {
  color: var(--color-teal-600);
  background-color: var(--color-white);
  border-color: var(--color-teal-500);
}

/* 見出しのすぐ下に置く控えめな文字リンク */
#container .fp-cta--sub {
  margin: 0;
}

#container .fp-cta--sub a {
  gap: 8px;
  min-height: 0;
  padding: 0;
  color: var(--color-teal-600);
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
}

#container .fp-cta--sub a::after {
  width: 5px;
  height: 5px;
  border-width: 1.5px;
}

.use_hover #container .fp-cta--sub a:hover {
  background: none;
}

/********************************************************************/
/* 空のカート */
/********************************************************************/

/* カートが空のときだけ、カート下部の自由記入欄に置いた案内（.cart-guide）を表示する。
   商品が入っているときは購入手続きの邪魔をしないよう隠したままにする。
   空のときは「商品合計 0円」も意味がないので隠す */
#container .empty_msg_box {
  padding: 32px 16px 8px;
  color: var(--color-gray-700);
  font-size: 15px;
  text-align: center;
}

#container .cart_data:has(.empty_msg_box) .cart_footer {
  display: none;
}

#container .cart-guide {
  display: none;
}

#container:has(.empty_msg_box) .cart-guide {
  display: block;
  max-width: 720px;
  margin: 24px auto 0;
}

#container .cart-guide-title {
  margin: 0 0 12px;
  color: var(--color-gray-700);
  text-align: center;
}

#container .cart-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 600px) {
  #container .cart-guide-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#container .cart-guide-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 8px 14px;
  color: var(--color-gray-900);
  font-weight: bold;
  text-decoration: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

#container .cart-guide-list a::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-teal-500);
  border-right: 2px solid var(--color-teal-500);
  transform: rotate(45deg);
}

.use_hover #container .cart-guide-list a:hover {
  color: var(--color-teal-600);
  background-color: var(--color-white);
  border-color: var(--color-teal-500);
}

/********************************************************************/
/* 本文の文字サイズ（PC） */
/********************************************************************/

/* PC（840px 以上）では、商品詳細の説明文とフリーページの本文を 16px・行間 1.9 にする。
   ベースは約 14px・行間 1.6 で、長い文章を読むには小さい。商品名・価格・見出しの大きさは変えない */
@media screen and (min-width: 840px) {
  #container .detail_desc .item_desc,
  #container .free_page_box .inner_free_contents {
    font-size: 16px;
    line-height: 1.9;
  }

  /* お客様の声（フリーページ）は、ページ内の style で表を 14px に固定しているため、本文の大きさを引き継がせる */
  #container .free_page_box .review table,
  #container .free_page_box .review td {
    font-size: inherit;
  }
}

/********************************************************************/
/* スマホ・タブレットの左右余白 */
/********************************************************************/

/* 840px 未満では、ページの左右の余白を --space-side-sp（16px）にそろえる。
   ベースは 5・8・10・15px の余白が入れ子で重なり、ページごとに文章やボタンの端の位置がずれていた。
   いちばん外側の枠に余白を付け、内側の枠の左右の余白は 0 にする。
   トップ画像・商品画像など画面幅いっぱいの要素と、ヘッダー・パンくず・フッターの背景の帯は対象外 */
@media screen and (max-width: 839.98px) {
  /* 外側の枠：パンくず・ページ名・各ページの本文の枠 */
  #container .breadcrumb_list,
  #container .page_box .page_title h1,
  #container .page_box .page_title h2,
  #container .page_contents:not(.detail_contents, .categorylist_contents, .grouplist_contents, .recently_contents) > .inner_page_contents,
  #container .free_page_box,
  #container .item_sort_form,
  #container .box_both_ends_space,
  #container .box_both_ends_small_space,
  #container .lower_link_box .itemlist_nav,
  #container .detail_item_data .item_name,
  #container .detail_section,
  #container .item_desc,
  #container .side_box.globalnavi_side,
  #container .main_desc,
  #container #inner_contents_bottom,
  #container .inner_popup_nav_area,
  #container .inner_popup_menu_area,
  #container .inner_footer_nav {
    padding-left: var(--space-side-sp);
    padding-right: var(--space-side-sp);
  }

  /* 内側の枠：外側の枠と重なる余白を 0 にする。
     ご利用案内・カート・カテゴリ一覧・特定商取引法・お問い合わせ・ログイン・会員登録などは .inner_page_contents が外側の枠になる。
     商品詳細と商品一覧の .inner_page_contents は余白を持たず、中の各ブロックが余白を持つため除く */
  #container .page_contents:not(.detail_contents, .categorylist_contents, .grouplist_contents, .recently_contents) > .inner_page_contents :is(form#register, .box_both_ends_space, .box_both_ends_small_space, .inner_contents_box, .contents_box, .help_navigation, .help_data, .form_area_wrapper, .form_parts, .form_data, .form_title, .form_element, .cell_note, .contents_info_data, .contents_desc, .step_list, .inner_rules_area, .itemlist_nav, .custom_note, h4),
  #container .detail_section .box_both_ends_space,
  #container .itemlist_box .list_item_data {
    padding-left: 0;
    padding-right: 0;
  }

  #container .page_contents:not(.detail_contents, .categorylist_contents, .grouplist_contents, .recently_contents) > .inner_page_contents :is(h3, .cart_data) {
    margin-left: 0;
    margin-right: 0;
  }

  /* 下線だけの見出し（商品詳細・関連商品・絞り込み）は、下線の端も本文にそろえる */
  #container .detail_desc .section_title h2,
  #container .section_title.related_item h2,
  #container .lower_link_box .section_title h2 {
    margin-left: var(--space-side-sp);
    margin-right: var(--space-side-sp);
    padding-left: 0;
    padding-right: 0;
  }

  /* 商品一覧：各商品の内側に 5px の余白があるため、外側は 16 − 5 = 11px にして写真の端をそろえる */
  #container .itemlist_box.tiled_list_box {
    padding-left: calc(var(--space-side-sp) - 5px);
    padding-right: calc(var(--space-side-sp) - 5px);
  }

  /* 入力欄はベースで幅 97% のため右端がずれる。枠の幅いっぱいに広げる */
  #container .form_data .largesize {
    width: 100%;
  }

  /* フッターのリンク：矢印を余白の位置に置き、文字はその右に続ける */
  #container .inner_footer_nav .footer_nav_item {
    padding-left: 0;
    padding-right: 0;
  }

  #container .footer_nav_item .nav_btn {
    padding-left: 15px;
  }

  #container .footer_nav_item .chevron_right_icon {
    left: 0;
  }
}

/* 640px 以上は、絞り込み・カテゴリ一覧の各項目に左右 2px の余白が付く。その分だけ外へ広げて端をそろえる */
@media screen and (min-width: 640px) and (max-width: 839.98px) {
  #container .itemlist_nav .inner_itemlist_nav {
    margin-left: -2px;
    margin-right: -2px;
  }
}

/********************************************************************/

/* Powered by おちゃのこネット
※上記の文言は共用ドメインコースをご利用の場合に表示されます。
必須項目ですので、下記の編集は許可されていません。
・文言の削除
・文字色を薄くする
・文字サイズを小さくする */

#ochanoko {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

#ochanoko A {
  font-size: 12px;
}

.accessory_color {
  background-color: var(--color-gray-50);
}

/********************************************************************/