@charset "UTF-8";
/* =====================================================================
 * hyousatsuya_responsive.css ― 表札屋ドットコム トップ レスポンシブ対応
 * ---------------------------------------------------------------------
 *  ・css.css の「後」に読み込む追加シート。PC(>=881px)は一切変更しない。
 *  ・880px以下:
 *      - 740pxレイアウト表を縦積み、ヘッダー帯は左右2枚を全幅に縮小
 *      - 本文行は「商品コンテンツ(主)を上・メニュー(左)を下」に並べ替え
 *      - メニュー見出し画像(101/102/103)はテキストの全幅バーに置換、
 *        リンクは2段組で幅を活用
 *      - 商品グリッドは1カラム化（中途半端な幅でのfloat段ズレ崩れを解消）
 *  ・HTML本文/本体css.css/SSIは無改変（本ファイル＋viewport metaのみ）。
 * ===================================================================== */

@media screen and (max-width: 880px) {

  html, body { overflow-x: hidden; }
  .bl-back, .bl-back * { -moz-box-sizing: border-box; box-sizing: border-box; }

  /* コンテナ流動化 */
  .bl-back { width: auto !important; max-width: 740px; margin: 0 auto; }
  .bl-back > table { width: 100% !important; }

  /* レイアウト表を縦積み */
  .bl-back table, .bl-back tbody, .bl-back tr, .bl-back td { display: block; width: auto !important; }
  .bl-back img { max-width: 100%; height: auto; }

  /* ── ヘッダー帯(1行目): 左(表札屋)＋右(ドットコム)を横並びのまま全幅に縮小 ── */
  .bl-back > table > tbody > tr:nth-child(1) { overflow: hidden; }   /* float clearfix */
  .bl-back > table > tbody > tr:nth-child(1) > td {
    float: left !important; height: 0 !important; padding: 0 0 8.108% 0 !important;
    background-size: 100% 100% !important; background-repeat: no-repeat !important; overflow: hidden;
  }
  .bl-back > table > tbody > tr:nth-child(1) > td:first-child { width: 24.324% !important; } /* 180/740 */
  .bl-back > table > tbody > tr:nth-child(1) > td:last-child  { width: 75.676% !important; } /* 560/740 */
  .bl-back > table > tbody > tr:nth-child(2) { display: none; }                       /* 細い飾り行 */
  .bl-back > table > tbody > tr:nth-child(3) > td:first-child { display: none; }      /* 空の左飾り */

  /* ── 本文行(4行目): 商品(主)を上・メニュー(左)を下に並べ替え ── */
  .bl-back > table > tbody > tr:nth-child(4) { display: flex; flex-direction: column; }
  .bl-back > table > tbody > tr:nth-child(4) > td {
    background-image: none !important; width: auto !important; padding: 0 8px;
  }
  .bl-back > table > tbody > tr:nth-child(4) > td:last-child  { order: 1; }                 /* 商品コンテンツ */
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child { order: 2; text-align: left !important; } /* メニュー */

  /* 内側530pxテーブルを流動化／仕切り・下飾りの背景を外す */
  .bl-back table table { width: 100% !important; }
  .bl-back td[style*="goods_middle530"], .bl-back td[style*="goods_under530"] { background-image: none !important; }

  /* ── 商品グリッド: 横並び折り返し（inline-block・段ズレなし）。元の<BR clear>が行区切りとして機能 ── */
  .bl-back td[style*="goods_middle530"] { font-size: 0; text-align: center; } /* inline-block間の余白を消す＋2列を中央寄せ(HTML align=right を打ち消す) */
  .bl-back div.goods, .bl-back span.goods {
    display: inline-block !important; vertical-align: top; float: none !important;
    width: 46% !important; max-width: 190px;                /* 箱幅をPC同等(約180px)に抑える＝中身に対し広すぎ(左寄り見え)を解消／スマホは46%で2列維持 */
    font-size: 13px; box-sizing: border-box; margin: 6px 1.5%; padding: 6px;
  }
  .bl-back div.goods { text-align: left; }                  /* カテゴリ:中身は左揃え／箱は親のtext-align:centerで中央寄せ */
  .bl-back span.goods { text-align: center; }               /* シヤチ/サンビー */
  /* 印影プレビュー等メニュー側のバナーは左揃いに統一 */
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child a img { vertical-align: top; }

  /* ── 印影プレビューの「生まれた年を選択」鑑定フォーム ──
   *  メニュー列内の入れ子テーブルは縦積みルール(display:block)から除外し、
   *  PC版どおりテーブル組みのまま表示（アイコン｜年▼｜年｜鑑定 を1行に）。
   *  ※フォームは商品グリッドと違いテーブルで横一列を保つ必要があるため復帰させる。 */
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child table  { display: table !important; width: auto !important; }
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child thead,
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child tbody  { display: table-row-group !important; }
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child tr     { display: table-row !important; }
  .bl-back > table > tbody > tr:nth-child(4) > td:first-child td     { display: table-cell !important; width: auto !important; vertical-align: bottom; }

  /* ── メニュー: 全幅・見出し画像→テキストバー・リンク2段組 ── */
  .bl-back div[style*="width:170px"] { width: auto !important; }
  .bl-back dl.img { margin: 0 0 16px; }
  .bl-back dl.img dt img { display: none !important; }                 /* 見出しgifを隠す */
  .bl-back dl.img dt {
    width: auto !important; height: auto !important;
    background: #828c99; background: linear-gradient(#aab2bd, #828c99);
    color: #fff; font-weight: bold; letter-spacing: 1px;
    padding: 6px 12px !important; margin: 0 0 8px !important; border-radius: 3px;
  }
  .bl-back dl.img:nth-of-type(1) dt::after { content: "はじめてのお客様へ"; }
  .bl-back dl.img:nth-of-type(2) dt::after { content: "お役立ち情報"; }
  .bl-back dl.img:nth-of-type(3) dt::after { content: "サポートコーナー"; }
  .bl-back dl.img dd { margin: 0 !important; }
  .bl-back dl.img dd ul { -moz-columns: 2; columns: 2; column-gap: 24px; }
  .bl-back dl.img dd ul li { -moz-column-break-inside: avoid; break-inside: avoid; line-height: 2; }

  /* 営業日カレンダー iframe（本番で表示）＋まわりの余分な余白を詰める */
  .bl-back iframe[name="calendar"] { display: block; width: 100% !important; max-width: 540px; margin: 0 auto 10px; }
  .bl-back td[style*="goods_under530"] { display: none !important; }        /* 商品箱下の飾り(レスポンシブでは空の10px)を除去 */
  .bl-back iframe[name="calendar"] + br,
  .bl-back iframe[name="calendar"] + br + br { display: none !important; }  /* カレンダー直後の余分な改行を詰める */
  .bl-back address { width: auto !important; }
  .bl-back .goods li { line-height: 1.9; }
}

/* ── スマホ縦(狭幅): メニューリンクは1段に ── */
@media screen and (max-width: 480px) {
  .bl-back dl.img dd ul { -moz-columns: 1; columns: 1; }
}