@charset "UTF-8";
/* =====================================================================
 * 印材館 modern overlay  /  v1  /  2026-06-01
 * responsive_style.css の直後に読み込み、見やすさを底上げする上掛けCSS。
 * 既存の絶対配置レイアウト(footer/menu_page)はそのまま温存し、
 * 幅・タイポグラフィ・配色・主要コンポーネントのみ刷新する。
 * 印材館らしさ = オレンジ #ec7e00 / accent #ffc62a を踏襲。
 * ===================================================================== */

:root{
  --rsd-orange:   #ec7e00;
  --rsd-orange-d: #cf6e00;
  --rsd-accent:   #ffc62a;
  --rsd-price:    #bf2312;
  --rsd-ink:      #4a4a4a;
  --rsd-sub:      #6f6f6f;
  --rsd-line:     #e8ded0;
  --rsd-bg:       #faf6f0;
}

/* ====================================================================
 * 1. 幅・基本タイポグラフィ
 * ==================================================================== */
.container{ max-width:1040px !important; }
header,
.inzai_head,
.rmenu1 ul{ max-width:1040px !important; }

body{
  font-size:1.6rem !important;
  line-height:1.8 !important;
  color:var(--rsd-ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium",
              "Yu Gothic",Meiryo,system-ui,sans-serif;
  background:#fff;
}
p{ font-size:1.6rem !important; line-height:1.8; }

/* 先頭のSEO見出し(オレンジ帯の上)を意図的な細ストリップに */
.container > h1:first-child{
  margin:0; padding:.45rem 1rem;
  font-size:1.25rem; font-weight:500; color:#9a8a6c;
  background:var(--rsd-bg); border-bottom:1px solid var(--rsd-line);
}

/* ====================================================================
 * 2. ヘッダー(オレンジ帯)
 * ==================================================================== */
.inzai_head{
  height:84px !important;
  background:linear-gradient(180deg,#f4912a 0%, var(--rsd-orange) 60%, var(--rsd-orange-d) 100%) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.inzai_logo{
  width:200px !important; height:auto !important;
  background:transparent !important; padding:0 !important;
  box-shadow:none !important; border-radius:0 !important;
}
.inzai_logo img{ width:100% !important; }

/* 価格改定等の控えめな通知バー(旧・大きな游明朝センター文を置換) */
.rsd-info-bar{
  display:flex; align-items:flex-start; gap:.55rem;
  max-width:1040px; margin:.4rem auto; padding:.5rem .9rem;
  background:#fff8ef; border:1px solid #f0dcc0; border-radius:6px;
}
.rsd-info-bar:last-of-type{ margin-bottom:1rem; }
.rsd-info-bar > i{ color:var(--rsd-orange); margin-top:.25rem; flex-shrink:0; font-size:1.4rem; }
.rsd-info-bar p{
  margin:0 !important; font-size:1.2rem !important; line-height:1.65 !important;
  color:#7a6a52 !important; font-family:inherit !important; font-weight:500 !important;
  text-align:left !important;
}
.rsd-info-bar a{ color:var(--rsd-orange-d) !important; }

/* ====================================================================
 * 3. 上部ナビ(rmenu1)― グレーグラデ → 白地+オレンジ下線タブ
 * ==================================================================== */
.rmenu1 ul{ margin:0 auto !important; display:flex; }
.rmenu1 ul li{ width:20% !important; float:none !important; }
.rmenu1 ul li a{
  background:#fff !important; background-image:none !important;
  color:var(--rsd-orange-d) !important;
  font-size:1.5rem; font-weight:700;
  padding:1rem .3rem !important;
  border:1px solid var(--rsd-line) !important;
  border-bottom:3px solid var(--rsd-orange) !important;
  text-shadow:none !important;
  transition:background .15s,color .15s;
}
.rmenu1 ul li a:hover{
  background:var(--rsd-orange) !important; background-image:none !important;
  color:#fff !important;
  border-bottom-color:var(--rsd-orange-d) !important;
}

/* ====================================================================
 * 4. 本文カラム
 * ==================================================================== */
.main_page{
  padding-left:0 !important;       /* 2カラムは grid 側で確保(下部参照) */
  min-height:auto !important;      /* 旧 148rem ハードコードを解除 */
  color:var(--rsd-ink) !important;
}

/* 決済手数料バナー(旧・黄色ベタ → 落ち着いた warm カード) */
.rsd-notice{
  background:var(--rsd-bg);
  border:1px solid var(--rsd-line);
  border-left:5px solid var(--rsd-orange);
  border-radius:8px;
  padding:1rem 1.4rem;
  margin:1rem 0 1.8rem;
}
.rsd-notice__lead{
  margin:0 0 .4rem; font-size:1.7rem !important; font-weight:700;
  color:var(--rsd-orange-d);
}
.rsd-notice__lead i{ color:var(--rsd-orange); }
.rsd-notice__sub{
  margin:0; font-size:1.25rem !important; line-height:1.7; color:var(--rsd-sub);
}
.rsd-notice__sub a{ color:var(--rsd-orange-d); }

/* セクション見出し */
.rsd-sec-title{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.9rem; font-weight:700; color:#3a3a3a;
  margin:0 0 1.2rem; padding:.2rem 0 .6rem;
  border-bottom:2px solid var(--rsd-line);
}
.rsd-sec-title i{ color:var(--rsd-orange); }

/* ====================================================================
 * 5. カテゴリカード(旧・黒帯+枠インライン → モダンカード)
 * ==================================================================== */
.cat-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.cat-card{
  display:block; text-decoration:none; color:inherit;
  background:#fff;
  border:1px solid var(--rsd-line);
  border-radius:10px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(207,110,0,.18);
  border-color:var(--rsd-orange);
}
.cat-card__head{
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(135deg,#f4912a,var(--rsd-orange-d));
  color:#fff; font-size:1.7rem; font-weight:700;
  padding:.8rem 1.2rem;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.cat-card__head i{ font-size:1.6rem; opacity:.95; }
.cat-card__body{ padding:1.2rem 1.4rem 1.4rem; }
.cat-card__img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:170px;
  border-radius:6px; margin:0 auto .8rem;
}
.cat-card__desc{ margin:0; font-size:1.5rem !important; line-height:1.75; color:var(--rsd-sub); }

/* ====================================================================
 * 6. 左メニュー(mb6_r ボタン / m_r1 情報ブロック / グループバナー)
 * ==================================================================== */
.menu_page{ width:178px !important; font-size:1.3rem !important; }

/* 左メニュー: 全ブロックを列幅に統一(RSDグループサイトの幅不揃いを解消) */
.menu_page > p,
.menu_page > div{ width:auto !important; box-sizing:border-box !important; max-width:100% !important; }
.menu_page .mn2_r{ padding:8px !important; }
.menu_page .mn2_r img{ width:100% !important; height:auto !important; }

.mb6_r{
  width:100% !important; height:auto !important; line-height:1.4 !important;
  background:#fff !important;
  border:1px solid var(--rsd-line) !important; border-radius:7px !important;
  padding:.75rem .5rem !important; margin:5px 0 !important;
  box-sizing:border-box;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .15s, border-color .15s;
}
.mb6_r:hover{ background:var(--rsd-bg) !important; border-color:var(--rsd-orange) !important; }
.mb6_r a{ color:var(--rsd-orange-d) !important; font-weight:700; }
.mb6_r a:hover{ color:var(--rsd-orange) !important; }
.mb6_r i{ color:var(--rsd-orange) !important; font-size:1.4em !important; }

.m_r1{
  width:100% !important; box-sizing:border-box;
  background:#f3f8fb !important; border:1px solid #dce8ef !important;
  border-radius:6px !important;
}
.m_txt1{ font-size:1.2rem !important; line-height:1.6 !important; }

.mn2_r{ width:100% !important; box-sizing:border-box; border-radius:0 0 6px 6px; }

/* ====================================================================
 * 7. フッター(位置・高さは温存。配色とオレンジ帯のみ)
 * ==================================================================== */
footer{
  position:static !important;      /* 絶対配置をやめ通常フローへ */
  height:auto !important;
  padding:1.8rem 1rem 2.2rem !important;
  border-top:4px solid var(--rsd-orange);
  background:#202020 !important;
}
.f_rsd p{ color:#fff !important; letter-spacing:.04em; }
.f_add p{ color:#cfcfcf !important; }
.f_add a{ color:var(--rsd-accent) !important; }

/* ====================================================================
 * 8. 目次(TOC)コンポーネント ― 長文ページ用(index未使用・横展開用に定義)
 * ==================================================================== */
.rsd-toc{
  background:var(--rsd-bg); border:1px solid var(--rsd-line);
  border-radius:8px; padding:1rem 1.4rem; margin:1.4rem 0;
}
.rsd-toc__ttl{ font-weight:700; color:var(--rsd-orange-d); margin:0 0 .6rem; font-size:1.5rem; }
.rsd-toc ul{ margin:0; padding-left:1.4rem; }
.rsd-toc li{ font-size:1.45rem; line-height:1.9; }
.rsd-toc a{ color:#36617a; text-decoration:none; }
.rsd-toc a:hover{ color:var(--rsd-orange); text-decoration:underline; }

/* ====================================================================
 * 9. レスポンシブ調整(スマホ : ~768px)
 * ==================================================================== */
@media (max-width:768px){
  body{ line-height:1.75 !important; }
  .main_page{ padding-left:0 !important; padding:0 !important; margin:.6rem !important; }
  .rmenu1 ul li a{ font-size:1.2rem; padding:.7rem .2rem !important; }
  .cat-list{ grid-template-columns:1fr; }
  .cat-card__head{ font-size:1.5rem; }
  .rsd-sec-title{ font-size:1.6rem; }
  .inzai_head{ height:auto !important; }
}

/* ====================================================================
 * 10. PC 2カラムレイアウト(≥801px)― 絶対配置をやめ grid 化
 *     ヘッダ/左メニューの重なり と 下部の余白を同時に解消する。
 *     HTML構造は不変(.container 直下の要素を grid-area で配置)。
 * ==================================================================== */
.container{ padding-bottom:0 !important; }
/* 旧・重なり防止スペーサ(<div style="height:70px">)はgrid化で不要 */
.container > div[style*="height:70px"]{ display:none !important; }

@media (min-width:801px){
  .container{
    display:grid !important;
    grid-template-columns:190px 1fr;
    grid-template-areas:
      "seo    seo"
      "header header"
      "menu   main"
      "footer footer";
    column-gap:24px;
    align-content:start;
    align-items:start;
    min-height:100vh;
  }
  .container > h1:first-child{ grid-area:seo; }
  .container > header{ grid-area:header; margin:0 !important; max-width:none !important; }
  .container > .main_page{ grid-area:main; }
  .container > .menu_page{
    grid-area:menu;
    position:static !important; top:auto !important; left:auto !important;
    margin:0 !important; width:auto !important;
  }
  .container > footer{ grid-area:footer; }
  .menu-ham{ display:none !important; }
}

/* ====================================================================
 * 11. 本文コンポーネント(カテゴリ/商品ページ p1〜p4 等)
 *     既存クラスを上書きしオレンジ基調・カード調に統一。HTMLは不変。
 * ==================================================================== */
/* セクション見出し h2(旧・濃灰ベタ → warm + オレンジ左帯) */
.main_page h2{
  background:#fff8ef !important; color:#3a3a3a !important;
  border:1px solid var(--rsd-line) !important;
  border-left:5px solid var(--rsd-orange) !important;
  border-radius:6px !important;
  font-size:1.75rem !important; font-weight:700 !important; line-height:1.5 !important;
  padding:.7rem 1rem !important; margin:1.8rem 0 1rem !important;
}
.main_page h2 i{ color:var(--rsd-orange) !important; margin-right:.4rem; font-size:1.2rem; }

/* コンテンツ枠 inzai_waku(旧・灰枠 → 白カード) */
.inzai_waku{
  border:1px solid var(--rsd-line) !important; border-radius:10px !important;
  background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
  padding:1.2rem !important; margin:0 0 1.4rem !important;
}
.inzai_waku img{ max-width:100% !important; height:auto !important; }

/* CTAボタン lnk_btn2(旧・青 → オレンジ塗り) / 補助 lnk_btn1(オレンジ枠) */
.lnk_btn2{
  color:#fff !important; background:var(--rsd-orange) !important; border:none !important;
  border-radius:6px !important; padding:.55em 1.4em !important; font-weight:700 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.15) !important; transition:background .15s !important;
}
.lnk_btn2:hover{ background:var(--rsd-orange-d) !important; color:#fff !important; }
.lnk_btn1{ border-radius:6px !important; padding:.55em 1.4em !important; }

/* 本文・注記 */
.txt_01{ font-size:1.55rem !important; line-height:1.85 !important; color:var(--rsd-ink) !important; }
.txt_01 a{ color:var(--rsd-orange-d) !important; }
.txt_01 a:hover{ color:var(--rsd-orange) !important; }
.kome{ font-size:1.45rem !important; line-height:1.8 !important; color:#7a6a52 !important; }
.kome::before{ color:var(--rsd-orange) !important; }

/* 商品名見出し i_head01 / 商品説明 i_body01(p2・p3) */
.i_head01{
  color:var(--rsd-orange-d) !important; font-weight:700 !important; font-size:1.55rem !important;
  border-bottom:2px solid var(--rsd-line) !important; padding-bottom:.3rem !important; margin:0 0 .6rem !important;
}
.i_body01{ font-size:1.45rem !important; line-height:1.8 !important; color:var(--rsd-ink) !important; }

/* 商品枠 g_waku(p2) / 商品行 i_01(p3) → カード調 */
.g_waku, .i_01{
  border:1px solid var(--rsd-line) !important; border-radius:10px !important;
  background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
  padding:1.2rem !important; margin:0 0 1.2rem !important;
}
/* g_waku の中に i_01 が入る場合は枠を二重にしない(内側はプレーン) */
.g_waku .i_01{
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; padding:0 !important; margin:0 !important;
}
/* z_02 が i_01 を直に内包する場合(p3等のlanding)は外枠を消し、内側 i_01 を単一カードに */
.z_02:has(> .i_01){
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; padding:0 !important;
}

/* サムネイルグリッド z_tp_icon(p4) ― ホバーをオレンジに */
.z_tp_icon a:hover figcaption{ color:var(--rsd-orange-d) !important; }
.z_tp_icon a:hover img{ border-color:var(--rsd-orange) !important; }
.z_tp_icon figcaption{ font-size:1.25rem !important; }

/* 商品ページ(netsuke等): カートボタン/商品見出し/商品枠/価格 */
.submit_btn{
  background:var(--rsd-orange) !important; color:#fff !important; border:none !important;
  border-radius:6px !important; padding:.55rem 1.4rem !important; font-weight:700 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.15) !important;
}
.submit_btn:hover{ background:var(--rsd-orange-d) !important; color:#fff !important; }
.z_02{ box-shadow:0 1px 4px rgba(0,0,0,.10) !important; border:1px solid var(--rsd-line) !important; }
.z_02_p1{ font-weight:700 !important; }
.z_02_p1::before{ color:var(--rsd-orange) !important; }     /* 商品名の四角アイコン */
.z_02_p1::after{ background-color:var(--rsd-accent) !important; }  /* 下線をオレンジ系に */
.z_01{ border-left:4px solid var(--rsd-price) !important; }  /* ご注意ボックスに赤の左帯 */

/* サムネイル一覧 z_03(バングル/アクセサリー等): 商品写真だけ統一サイズに揃える。
   完売御礼スタンプ(soldout.png/透明背景・重ね表示)は除外して元のまま残す。 */
.z_03 li img:not([src*="soldout"]){
  width:100% !important; height:240px !important; object-fit:contain !important;
  background:#000 !important; border-radius:8px !important;
  min-width:0 !important; min-height:0 !important;   /* インライン min-height:200px を打消 */
}
.z_03 li a{ color:#3a3a3a !important; }
/* 完売御礼スタンプ: min-width:275px の伸びを打消し本来の100px固定に。
   透明枠の中央寄せで右にずれていたのを左上の正位置へ戻す(≒100px左に移動)。 */
.z_03 li img[src*="soldout"]{ min-width:0 !important; }
/* ページ送り pagene: 現在ページ・hover をオレンジ系に */
.pagene .this, .pagene_bngl .this{ background-color:var(--rsd-orange) !important; }
.pagene li a:hover, .pagene_bngl li a:hover{ background-color:var(--rsd-accent) !important; color:#3a3a3a !important; }
/* バングル等の詳細: サイズ表記をオレンジに */
.v_size{ color:var(--rsd-orange-d) !important; }
/* 商品リンクボタン pagene_bngl: 長い名称でも折返さず1行・可変幅に(レイアウト崩れ防止) */
.pagene_bngl li{
  width:auto !important; min-width:9rem;
  height:auto !important; min-height:3rem; line-height:3rem !important;
  white-space:nowrap !important; padding:0 !important;
  vertical-align:top; box-sizing:border-box; font-size:1.35rem;
}
.pagene_bngl li a{ padding:0 .9rem !important; white-space:nowrap !important; }

/* 完売商品(.main_page に soldout クラス付与): 注文フォームを隠し、ヒーロー画像に
   完売御礼スタンプを重ねる。商品情報(画像/仕様/価格)はそのまま表示。 */
.soldout .v_02-2{ display:none !important; }       /* 数量select＋カートへボタンを非表示 */
.soldout .v_01{ position:relative !important; }
.soldout .v_01::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; pointer-events:none; z-index:5;
  background:url(images/sale/case/soldout.png) center/contain no-repeat;
}

/* p2 上部メニュー gm_m01: 最大3列で折り返し(ボタン寸法 180×85 は現状維持) */
.gm_m01{
  display:grid !important;
  grid-template-columns:repeat(3, 180px);
  justify-content:center;
  gap:1rem;
}
.gm_m01 .gm_m11{ margin:0 !important; }
/* gm_m01 内の「セット商品」ラベル/ボタン群はグリッドに載せず全幅(タイルの下に従来並び) */
.gm_m01 > .txt_03, .gm_m01 > .menu_02{ grid-column:1 / -1; }

/* 付属品グリッド ctg: セル幅を内容に合わせ、商品名(i_head01)を1行固定
   (「両面のり付スポンジ」等の長い名称が2行折返しするのを防ぐ) */
.ctg_01{ width:auto !important; min-width:185px; max-width:240px; box-sizing:border-box; }
.ctg .i_head01{ white-space:nowrap !important; }