@charset "UTF-8";
/* =====================================================================
 * hankodo_responsive.css ― はんこ堂トップ「今風に作り直し」草案 v13
 *  v2: ①メイン見出しのズレ解消(全幅バー化) ②カテゴリ色分け復活 ③バナー枠線除去
 *  v4: 左メニューの破線除去・商品ラベルの固定幅下線を中身幅化
 *  v5: 左メニュー総整備＝固定height撤廃(2行折返しの重なり解消)・全リンク種別
 *      (l_menu/ll_menu/01/02/03/l_zouge)を統一・見出しmidashi01(塗りバー)/
 *      midashi03(淡色＋左アクセント)を整え文字溢れ解消
 *  v6: ①左メニュー項目を必ず1行に(font .73rem＋padding詰め/最長1項目のみ微縮小、
 *      モバイルは全幅なので1rem快適サイズに復帰) ②ご案内カード(infomenu/infotitle)を
 *      v4の紺塗り(本文・赤字が読めない)→白カード＋淡い見出し帯＋濃い本文に。幅48%で
 *      2列統一・モバイルは1列スタック・赤字注意は読みやすい赤に
 *  v7: スマホのヘッダーナビ行(本日は/お問い合わせ/よくある質問/商品購入方法/かご/
 *      ログイン)が固定800pxで見切れ→@mediaでtable/tr/tdをflex化し折り返し
 *      (日付は上部全幅・ボタン群は中央寄せチップで折返し)。PCは無変更
 *  v8: スマホでナビ折返し後に下要素と重なる問題を解消。根因=元CSS #header
 *      height:160px固定→折返しで溢れ→@mediaでheight:auto。併せて上部PICK UP!部
 *      の絶対配置(高さ非確保)を通常フローに戻し1カラム化、PICK UP!バナー(スタンプ
 *      ラリー)とミニボタンを中央＋全幅、緑ボタン内の小アイコンは巨大化させない
 *      (alt=スタンプラリーのバナーのみwidth:100%)。リンク集まとめ(廃止)は非表示
 *  v9: スマホで上部右カラムのミニバナー(個人/法人/ゴム印 r_menu01-03)を非表示
 *      (冗長＝左メニュー・本文に同カテゴリあり)。PCは従来どおり表示
 *  v10: PC/スマホ共通。セット見出し set01/set02(印鑑 二本/三本/四本セット)が
 *      固定width:150px＋下線でテキスト(実測95px)とズレ→col01等と同じく
 *      inline-block/width:autoで下線をテキスト幅に揃える
 *  v11: 印鑑関連商品の価格「税込」を改行表示に統一(HTML側=build_sandbox.pyで
 *      top_supply価格にbr挿入)。併せて朱肉・スタンプ台行はcase01を商品見出しに
 *      使い同セルに価格があるため、case01(inline width:120px付き)をblock化して
 *      見出しを独立行にし価格を下へ送る
 *  v12: 朱肉・スタンプ台行はスマホ4列だと窮屈で見出しが折返し→スマホで2列化
 *      (td[width:120px]をinline-block48%、=この行限定で一意)。原寸フォントのまま
 *      見出し・税込価格とも1行に収まり、375〜768どの幅でも崩れない。PCは4列維持
 *  v13: SEO見出し階層整理。現状h1が6個(カテゴリ)・h2/h3なし→ロゴ画像をページ唯一の
 *      h1に(build_sandbox.pyでHTML変換)、カテゴリ6本をh1→h2。CSSは h1.midashi00→
 *      .midashi00(タグ非依存)に変更し見た目維持。#header h1で余白除去(ロゴそのまま)
 * ===================================================================== */

:root{
  --navy:#13447e; --red:#c0392b; --green:#2e8b57;
  --ink:#2b2f36; --sub:#5b6470; --line:#e6e8ec; --bg:#eef1f5; --card:#fff;
  --radius:10px;
}

/* ---- 土台 ---- */
body{
  background:var(--bg) !important; color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif !important;
  line-height:1.7; -webkit-text-size-adjust:100%;
}
#container, #container *{ -moz-box-sizing:border-box; box-sizing:border-box; }
#container{ width:auto !important; max-width:1000px; margin:0 auto !important; background:var(--card) !important; padding:0 0 24px; box-shadow:0 1px 14px rgba(0,0,0,.06); }
img{ max-width:100%; height:auto; }
a{ color:var(--navy); }
/* SEO: ロゴ画像をページ唯一のh1に(見た目はロゴのまま=余白/行高を消す) */
#header h1{ margin:0 !important; line-height:0; }

/* ---- 壊れたヘッダ帯の背景画像を除去 ---- */
.infotop, .infomenu, .infomenu01, .infotitle, .s_menu01, .s_menu02, .menu01, .set01, .set02{
  background-image:none !important; text-indent:0 !important;
}

/* =================== ご案内セクション(本文末) =================== */
/* 節見出しバー(infomenu01「お支払方法・手数料」/infotop) */
#main .infomenu01, #main .infotop{
  display:block !important; width:auto !important; height:auto !important;
  background:var(--navy) !important; color:#fff !important; font-weight:700;
  padding:10px 14px !important; margin:0 0 14px !important; border-radius:8px; font-size:1.02rem; line-height:1.4;
}
#main .infomenu01 a, #main .infotop a{ color:#fff !important; text-decoration:none; }

/* カード(infomenu/infotitle): v4で紺塗り→本文/赤字が読めない問題を解消。
   白カード＋淡い見出し帯＋濃い本文に。幅48%で2枚並びを揃える */
#main td.infomenu, #main td.infotitle{
  vertical-align:top !important; width:48% !important;
  background:#fff !important; color:var(--ink) !important;
  border:1px solid var(--line) !important; border-radius:10px !important; overflow:hidden;
  padding:0 0 8px !important;
}
#main td.infomenu > a:first-child, #main td.infotitle > a:first-child{
  display:block; background:#eef2f8 !important; color:var(--navy) !important; font-weight:700;
  font-size:1.02rem; text-decoration:none; padding:10px 14px !important; margin-bottom:8px; border-bottom:1px solid var(--line);
}
#main td.infomenu > a:first-child:hover, #main td.infotitle > a:first-child:hover{ background:#e4ebf6 !important; }
/* セル直下の<p>(本文・「詳しくはこちら」)に左右余白 */
#main td.infomenu > p, #main td.infotitle > p{ padding-left:14px !important; padding-right:14px !important; margin:0 0 6px !important; }
/* 本文テキスト(白地で濃く・読みやすく) */
#main .infos{ color:var(--ink) !important; text-align:left !important; line-height:1.6; font-size:.92rem; }
/* 注意書きの赤字は読みやすい赤に */
#main .infos font[color="red"], #main .infos font[color="#FF0000"], #main .infos font[color="#ff0000"]{ color:var(--red) !important; font-weight:700; }

/* ---- メイン見出し midashi00: インラインのカテゴリ色を活かして全幅モダンバー化 ---- */
/*  (個人=青#139 / 法人=赤#b22 / チタン=灰#667 / カラー=橙#e82 / 関連=緑#9c6 / ゴム印=水#6bf を維持) */
/* 見出しtableを全幅化(クロスブラウザ): 見出しtableは #main 直下、商品tableは .menuback 内なので巻き込まない */
#main > table{ width:100% !important; margin:0 !important; }
.midashi00{
  display:block !important; width:auto !important; height:auto !important;
  color:#fff !important; font-weight:700; font-size:1.18rem; line-height:1.45;
  padding:10px 16px !important; margin:22px 0 12px !important;
  border-radius:var(--radius); text-align:left; box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.midashi00 a{ color:#fff !important; text-decoration:none; }
.midashi00 a:hover{ color:#fff; text-decoration:underline; }
/* .midashi01 / .midashi03 は左メニュー専用 → 下部「左メニュー整備」節で定義 */

/* ---- セクションの色付き箱をカード化(620px固定→流動) ---- */
.menuback, .menuback01, .menuback02, .menuback03, .menuback04, .menuback05{
  width:auto !important; max-width:100% !important; margin:0 0 14px !important;
  padding:14px !important; border-radius:var(--radius); border:1px solid var(--line);
}
.menuback{ background:#fbfcfe !important; }
.menuback01{ background:#f3f8ff !important; }
.menuback02{ background:#fff4f4 !important; }
.menuback03{ background:#fff6ee !important; }
.menuback04{ background:#f0fbf2 !important; }
.menuback05{ background:#eefcfd !important; }

/* ---- ②表札/落款印/開運グッズ バナーのズレた枠線(border #444)を除去・カード枠も外す ---- */
#main td[style*="solid #444"], #main td[style*="solid#444"]{ border:0 !important; }
.menuback[style*="height:80px"]{ background:none !important; border:0 !important; padding:0 !important; height:auto !important; }

/* ============================ 左メニュー整備 ============================
 *  原因: 元CSSが全リンクに固定 height(22px) を、見出し midashi01/03 に
 *        固定 height(1.28em) を指定 → 2行折返しで次項目に重なる/文字が
 *        バーから溢れる。さらに ll_menu02/03・l_zouge が未対応で破線残存。
 *  方針: 固定 height を撤廃(height:auto)し全クラスを同一スタイルに統一。
 * ===================================================================== */
#menu a{ text-decoration:none !important; }
/* <p>ラッパの余白を解除して均等な縦リズムに（説明文pだけ余白を戻す） */
#menu p{ margin:0 !important; }
#menu p[style*="font-size"]{ margin:.5em 0 !important; }

/* 項目リンク: 全種別統一・固定height撤廃で折返し重なり解消・破線下線も統一 */
#menu a.l_menu, #menu a.ll_menu, #menu a.ll_menu01,
#menu a.ll_menu02, #menu a.ll_menu03{
  display:block !important; width:auto !important; height:auto !important; min-height:0 !important;
  margin:0 !important; padding:7px 5px 7px 8px !important;
  font-size:.73rem !important; line-height:1.3 !important;     /* 170px幅で最長項目も1行に収める */
  color:var(--ink) !important; background:#fff !important;
  border:0 !important; border-bottom:1px solid var(--line) !important;
}
#menu a.l_menu:hover, #menu a.ll_menu:hover, #menu a.ll_menu01:hover,
#menu a.ll_menu02:hover, #menu a.ll_menu03:hover{
  background:#f1f5fb !important; color:var(--navy) !important; border-bottom-color:var(--navy) !important;
}
/* 2文字項目の字間(letter-spacing:14px)が広すぎ→控えめに */
#menu .let2{ letter-spacing:.2em !important; }
/* 最長項目(13文字)だけ1行に収まらない→その項目のみ微縮小 */
#menu a.ll_menu[href*="Law_4Delivery"]{ font-size:.68rem !important; letter-spacing:-.01em !important; }

/* 象牙買取・印影プレビュー等(l_zouge)はアウトラインのアクションボタンに */
#menu a.l_zouge{
  display:block !important; width:auto !important; height:auto !important;
  margin:0 0 6px !important; padding:10px 12px !important;
  text-align:center !important; font-size:.95rem !important; font-weight:700;
  color:var(--navy) !important; background:#f3f6fb !important;
  border:1px solid var(--line) !important; border-radius:8px;
}
#menu a.l_zouge:hover{ background:#e9eff8 !important; border-color:var(--navy) !important; }

/* カテゴリ見出し midashi01: 固定height撤廃で文字溢れ解消・塗り色はインライン活用 */
#menu .midashi01{
  display:block !important; width:auto !important; height:auto !important;
  margin:0 0 6px !important; padding:9px 13px !important;
  font-size:1rem !important; line-height:1.3 !important; font-weight:700;
  color:#fff !important; text-align:left !important; border:0 !important; border-radius:8px;
}

/* サービス見出し midashi03: 上下3px枠の中央ボックス→製品バーと揃う
   「淡色＋左アクセント」のセクションヘッダに(色はインラインを活かす) */
#menu .midashi03{
  display:block !important; width:auto !important; height:auto !important;
  margin:16px 0 6px !important; padding:8px 12px !important;
  font-size:.98rem !important; line-height:1.3 !important; font-weight:700;
  text-align:left !important; border:0 !important; border-left:4px solid !important; border-radius:6px;
}

/* ---- 矢印gif箇条書き → CSS化 ---- */
.terms li, .yellow li, .menuterms li{
  background-image:none !important; list-style:none; padding-left:1.1em !important; position:relative;
}
.terms li::before, .yellow li::before, .menuterms li::before{ content:"▸"; color:var(--navy); position:absolute; left:0; }

/* ---- 商品ラベル: 固定幅(120/160px)の下線がテキストとズレ→中身幅に合わせる ---- */
/* 商品ラベル・セット見出し(set01/02)の固定幅下線がテキストとズレ→中身幅に揃える */
.col01, .case01, .name01, .set01, .set02{ display:inline-block !important; width:auto !important; max-width:100% !important; height:auto !important; padding:2px 6px 3px !important; font-weight:700; }
/* ただし朱肉・スタンプ台行(case01を商品見出しに使い同セル内に価格)は見出しを
   独立ブロックにして価格を下の行へ(inline width:120px付き=この行限定) */
#main p.case01[style*="width:120px"]{ display:block !important; }
.k-inkan, .h-inkan{ max-width:100% !important; }
.price, .tprice{ color:var(--red) !important; font-weight:700; }

/* バナースライダー */
#slider{ width:auto !important; max-width:480px; height:auto !important; margin:0 auto; }
#slider img{ width:100%; height:auto; }

/* リンク集まとめ(廃止) → 全ビューで非表示。※本番反映時はEUC原本からも当該行を物理削除 */
#main a[href*="other-links"]{ display:none !important; }

/* =================== レスポンシブ(2カラム→縦積み) =================== */
@media screen and (max-width:880px){
  html, body{ overflow-x:hidden; }
  #container{ max-width:100%; box-shadow:none; }
  #container > div{ width:auto !important; max-width:100% !important; }
  #header{ width:auto !important; max-width:100%; height:auto !important; }  /* 元CSSのheight:160px固定→ナビ折返しで溢れ重なる対策 */
  #footer{ width:auto !important; max-width:100%; }
  #main{ width:auto !important; max-width:100%; float:none !important; }
  #menu{ width:auto !important; max-width:100%; float:none !important; margin-top:18px; }
  #main table, #main div, #main td, #menu div, #footer div, #footer table{ max-width:100% !important; }
  #main [style*="width"], #menu [style*="width"]{ max-width:100% !important; }
  table{ max-width:100% !important; }
  /* 左メニューは全幅＝折返し余地あり→読みやすいサイズ＆タップ域に戻す */
  #menu a.l_menu, #menu a.ll_menu, #menu a.ll_menu01,
  #menu a.ll_menu02, #menu a.ll_menu03{ font-size:1rem !important; padding:11px 14px !important; }
  /* ご案内カードは1列スタック・空のスペーサーセルは隠す */
  #main td.infomenu, #main td.infotitle{ display:block !important; width:auto !important; margin:0 0 12px !important; }
  #main td:empty{ display:none !important; }

  /* ヘッダーナビ行(本日は/お問い合わせ/よくある質問/商品購入方法/かごの中/ログイン)
     固定800pxで見切れ→折り返し: 日付は上に全幅、ボタン群は中央寄せで折り返し */
  #header div[style*="width:800px"]{ width:auto !important; max-width:100% !important; padding:4px 6px 0 !important; }
  #header table{ display:block !important; width:100% !important; margin:0 !important; }
  #header tbody{ display:block !important; width:100%; }
  #header tr{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center; gap:7px; }
  #header td{ display:block !important; width:auto !important; padding:0 !important; }
  #header td:empty{ display:none !important; }                 /* 5pxスペーサー除去 */
  #header td[width="250"]{ flex:0 0 100% !important; width:100% !important; text-align:center !important; padding:7px 0 !important; border-radius:6px; }
  #header td.menu01{ width:auto !important; background:#eef !important; padding:7px 12px !important; border-radius:8px; border:1px solid #cdd9f0; }
  #header td.menu01 a{ font-size:.9rem; white-space:nowrap; }
  #header td[style*="background-color:#222"]{ width:auto !important; padding:7px 14px !important; border-radius:8px; }
  #header td[style*="background-color:#222"] a.log{ color:#fff !important; white-space:nowrap; }

  /* 上部PICK UP!部: 絶対配置(高さ非確保)でヘッダー/下要素と重なる→通常フローに戻す */
  #main div[style*="position:relative"]{ position:static !important; }
  #main div[style*="translateY(-50%)"]{ position:static !important; transform:none !important; }
  /* 上部テーブル(PICK UP! | カテゴリ画像)を1カラム縦積みに */
  #main table[width="630"], #main table[width="630"] tbody,
  #main table[width="630"] tr, #main table[width="630"] td{ display:block !important; width:100% !important; }
  #main table[width="630"] td{ text-align:center !important; }
  /* PICK UP!バナー・ミニボタンを中央＆狭幅で全幅維持(aブロックを中央寄せ) */
  #main div[style*="translateY(-50%)"] > a{ display:block !important; margin:0 auto 8px !important; max-width:500px; }
  /* 全幅にするのはスタンプラリー“バナー”のみ。緑ボタン内の小アイコンは巨大化させない */
  #main div[style*="translateY(-50%)"] img[alt="スタンプラリー"]{ width:100% !important; height:auto !important; }
  /* 右カラムのミニバナー(個人/法人/ゴム印)はスマホでは非表示
     (冗長＝左メニュー・本文に同カテゴリあり) */
  #main table[width="630"] td:last-child{ display:none !important; }

  /* 朱肉・スタンプ台行: スマホは4列だと窮屈→2列化(セル=この行限定で一意)。
     原寸フォントのまま全幅で「朱肉・スタンプ台」が1行に収まる */
  #main td[style*="width:120px"]{ display:inline-block !important; width:48% !important; vertical-align:top; padding:6px 4px !important; box-sizing:border-box; }
  #main p.case01[style*="width:120px"]{ white-space:nowrap; }
}