@charset "UTF-8";
/* ==========================================================================
   ZEAMI Art モバイルレスポンシブ (Vince 2026-07-06)
   稼働テーマ zeamiart_sp_2021 に追加。方針=PC版ベースで単一URLレスポンシブ化。手法=zeami-responsive-playbook。
   ★2026-07-06更新: SP dual-content(get_template_part page-sp-*)を全13テンプレから撤去済のため、
     旧「body」スコープは廃止し全ページに適用(SP系はもう無い)。
   ========================================================================== */

/* デスクトップではハンバーガー非表示 */
.vince-mnav-btn, .vince-mnav { display: none; }
.vince-mnav-toggle { position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden; }

@media screen and (max-width: 768px) {
  /* --- 汎用の安全策: 本文の画像/表がはみ出さない --- */
  #content img { max-width: 100% !important; height: auto !important; }

  /* ===== TOP等ヘッダー: ZEAMI Sticker と同デザイン(配色=Artのteal/orange) =====
     ①#head_containerの全面背景を外し ②#headerをtealベタ塗り(logo/TEL/メール問合せを収める)
     ③お見積ご注文(.order)以降はベージュ地＋wrapper_back_01.jpg(下部のオレンジのスカラップ)を上端に=Sticker同様の区切り */
  body #head_line { display: none !important; }
  body #head_container { position: static !important; height: auto !important; background: transparent !important; }
  body #header {
    width: auto !important; height: auto !important; position: static !important; margin: 0 !important;
    text-align: center !important; padding: 8px 0 0 !important; background-color: #84cdba !important;
  }
  body #header h1, body #header > div, body #header .header_logo,
  body #header .tel, body #header .info, body #header .contact, body #header .order {
    position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    float: none !important; display: block !important; text-align: center !important; margin: 7px auto !important; width: auto !important;
  }
  body #header h1 a, body #header > div a, body #header .over { position: static !important; display: inline-block !important; }
  body #header h1 img, body #header > div img, body #header .header_title, body #header .header_logo img {
    position: static !important; display: inline-block !important; max-width: 66% !important; height: auto !important;
  }
  body #header .tel { margin: 2px auto 4px !important; }
  body #header .tel img { max-width: 62% !important; height: auto !important; }
  /* 受付時間(.info)はモバイル非表示でスッキリ(Sticker同様) */
  body #header .info { display: none !important; }
  body #header img { max-width: 92% !important; height: auto !important; }
  /* メール問合せ(.contact)はteal内の最後の要素。下に余白 */
  body #header .contact { margin: 8px auto 12px !important; }
  /* お見積ご注文(.order)以降はベージュ地＋上端にスカラップ(オレンジのギザギザ) */
  body #header .order {
    margin: 0 auto !important; padding: 24px 0 6px !important;
    background-color: #e9e3d6 !important;
    background-image: url(../images/wrapper_back_01.jpg) !important;
    background-repeat: repeat-x !important;
    background-position: left -54px !important;
  }
  body #header .order a { display: inline-block !important; }
  body #header .order a img { width: auto !important; max-width: 230px !important; height: auto !important; }
  /* PC画像タブナビはモバイルで隠す(→ハンバーガーに置換) */
  body #navi { display: none !important; }
  /* 右側に固定配置(position:fixed x≈1020-1157)の営業カレンダー・キャラ(TOP戻る)は
     モバイルで画面外に出て右に広大な無駄スペース(実機でズームアウト)を作る→非表示 */
  #side_calendar, #side_information, .char, img.char, #footer .char,
  .pagetop, #pagetop, #page_top, .page_top, .to_top, #to_top { display: none !important; }
  /* ===== 営業カレンダー: ハンバーガーの「営業カレンダー」(/delivery/#side_calendar)で遷移した時のみ :target で表示 =====
     通常は上記で非表示。#side_calendarはfooter.php(全ページ)に在り、アンカー遷移時だけ本文下に静的表示しスクロール誘導 */
  /* --- モダンな白カード: 中央・ソフトシャドウ・スッキリ --- */
  #side_calendar:target {
    display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important;
    width: auto !important; max-width: 328px !important; margin: 28px auto 52px !important; padding: 22px 16px 24px !important;
    background: #ffffff !important; border: none !important; border-radius: 18px !important; box-sizing: border-box !important;
    box-shadow: 0 8px 28px rgba(70, 48, 36, 0.13) !important; scroll-margin-top: 20px !important; text-align: center !important;
    position: relative !important; padding-bottom: 48px !important; /* 凡例を絶対配置で最下部に固定するための土台 */
  }
  /* ★このウィジェットは全階層がPCで position:absolute/float。子孫を一律 static/float:none に強制し DOM順(ボタン→7月→8月→凡例)で自然縦積みに */
  #side_calendar:target .wrap, #side_calendar:target .wrap * { position: static !important; float: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
  #side_calendar:target .wrap { width: auto !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; }
  #side_calendar:target a.check { width: auto !important; }
  /* 凡例(ul.note): 上の一律static化でDOM順どおりカレンダー下に流れる→余白＋中央だけ調整 */
  #side_calendar:target ul.note, #side_calendar:target .note {
    width: auto !important; max-width: 100% !important; margin: 16px auto 0 !important; padding: 0 !important; text-align: center !important; list-style: none !important;
  }
  /* 納期・発送日確認ボタン: 中央・やや小さめ */
  #side_calendar:target a.check { display: inline-block !important; text-align: center !important; margin: 0 auto 20px !important; }
  #side_calendar:target a.check img { max-width: 188px !important; height: auto !important; }
  /* 装飾ベージュ枠(side_back_05.png)を廃止→白カードにスッキリ。★月コンテナは.calendar_01(7月)と.calendar_02(8月)の2つ有る→両方を[class^=calendar_]で全幅・中央に(片方だけだと幅バラつき) */
  #side_calendar:target [class^="calendar_"] { position: static !important; top: auto !important; left: auto !important; background: none !important; background-image: none !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 auto !important; box-sizing: border-box !important; }
  /* 月ヘッダー: 装飾jpg廃止→フラットな濃茶バー・角丸上・表幅いっぱい中央 */
  #side_calendar:target .month {
    background: #463024 !important; background-image: none !important; color: #ffffff !important;
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    font-weight: bold !important; font-size: 14px !important; letter-spacing: 2px !important;
    /* PC由来 height:21px＋border-box＋paddingで文字がはみ出す→height=line-heightで垂直中央 */
    height: 40px !important; line-height: 40px !important; padding: 0 !important; margin: 18px auto 0 !important; border-radius: 10px 10px 0 0 !important; text-align: center !important;
  }
  #side_calendar:target [class^="calendar_"]:first-of-type .month:first-child, #side_calendar:target .month:first-of-type { margin-top: 0 !important; }
  /* 表: セル背景jpg廃止→フラット配色・角丸。表を全幅(=カード幅)＋fixedで7列均等に(月ごとのセル幅差・金/土崩れを一掃) */
  #side_calendar:target table.tb {
    width: 100% !important; max-width: 100% !important; margin: 0 auto 2px !important; table-layout: fixed !important;
    border-collapse: separate !important; border-spacing: 3px !important; background: transparent !important; box-sizing: border-box !important;
  }
  #side_calendar:target table.tb th { font-size: 11px !important; color: #9a8b78 !important; font-weight: bold !important; padding: 8px 0 4px !important; width: auto !important; background: none !important; }
  #side_calendar:target table.tb th.sun { color: #cc6b40 !important; }
  #side_calendar:target table.tb th.sat { color: #5b8bab !important; }
  #side_calendar:target table.tb td {
    background-image: none !important; background-color: #f7f2e9 !important; width: auto !important; height: 32px !important;
    font-size: 12px !important; text-align: center !important; vertical-align: middle !important; color: #5a4a3a !important; border-radius: 7px !important;
  }
  #side_calendar:target table.tb td.holiday { background-color: #ee8b3c !important; color: #ffffff !important; }
  #side_calendar:target table.tb td.campain_day { background-color: #8ecfbd !important; color: #2f5249 !important; }
  #side_calendar:target table.tb td.disabled { background-color: #f2efe8 !important; color: #cabfad !important; }
  #side_calendar:target table.tb td.today { box-shadow: inset 0 0 0 2px #463024 !important; font-weight: bold !important; }
  #side_calendar:target table.tb td a { color: inherit !important; text-decoration: none !important; display: block !important; }
  /* 凡例の中身(li)を横並び中央に(位置は上の絶対配置ルール=カード最下部) */
  #side_calendar:target ul.note li, #side_calendar:target .note li {
    display: inline-block !important; float: none !important; margin: 0 10px !important; padding: 0 !important; font-size: 12px !important; color: #5a4a3a !important; list-style: none !important;
  }
  #side_calendar:target img { max-width: 100% !important; height: auto !important; }
  #side_calendar:target .calendar_btn, #side_calendar:target .himo { display: none !important; } /* PC用の月送りボタン/装飾は隠す */
  #side_calendar:target > a.btn, #side_calendar:target > .btn { display: none !important; } /* PC用「営業カレンダー」開閉リボン(直下A.btn)を隠す */
  /* ===== トップのヒーロー(bxslider): ZEAMI Sticker同方式 =====
     コンテナ(.wrap/viewport)を流動化してbxsliderにモバイル幅を認識させ、スライド幅=画面幅に。
     固定高さ/bxslider標準のmargin-bottom(帯)を除去し、画像はwidth:100%で1枚ずつ綺麗に表示。 */
  #main_image { height: auto !important; padding: 0 !important; overflow: visible !important; }
  #main_image .wrap { width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; }
  #main_image .bx-wrapper, #main_image .bx-viewport { height: auto !important; }
  #main_image .bx-wrapper { margin-bottom: 0 !important; }
  #main_image ul, #main_image ol, #main_image li, #main_image .bxslider, #main_image .bxslider li { height: auto !important; min-height: 0 !important; }
  #main_image li img, #main_image .bxslider img, #main_image .bxslider a img { width: 100% !important; height: auto !important; display: block !important; }

  /* ===== 下層ページのヒーロー見出し(#page_title h2 img): 長いタイトル画像(例お問い合わせ586px)が
     #content外のため#content imgの制約が効かず右にはみ出す→max-width:100%で画面幅に収める ===== */
  /* タイトル画像はh2 float解除で収まるので overflow:hidden の固定140px高は不要。むしろヒーロー内の
     注釈(.note2)を切ってしまう→height可変/overflow可視にして注釈を全表示 */
  #page_title { max-width: 100% !important; height: auto !important; overflow: visible !important; box-sizing: border-box !important; padding-bottom: 14px !important; }
  #page_title .wrap { width: auto !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
  #page_title h1, #page_title h2 { float: none !important; width: auto !important; max-width: 100% !important; display: block !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; }
  #page_title h1 img, #page_title h2 img, #page_title img { max-width: 100% !important; height: auto !important; }
  /* ヒーロー注釈(.note2/.note等 PC=固定570px幅・負マージンで中央→モバイルで左にはみ出し＋140px高でクリップ)を流動化・中央 */
  #page_title .note2, #page_title .note, #page_title .lead, #page_title p {
    position: static !important; float: none !important; width: auto !important; max-width: 100% !important; left: auto !important; right: auto !important;
    margin: 6px auto 0 !important; padding: 0 14px !important; text-align: center !important; line-height: 1.5 !important; box-sizing: border-box !important;
  }
  #page_title .note2 br, #page_title .note br { display: none !important; } /* PC用改行を無効化しモバイル幅で自然折返し */

  /* ===== ハンバーガーメニュー(bodyのみ表示) ===== */
  body .vince-mnav-btn {
    display: block !important; margin: 8px 10px; padding: 12px 14px;
    background: #f08300; color: #fff !important; font-size: 16px; font-weight: bold;
    text-align: center; border-radius: 6px; cursor: pointer; letter-spacing: 1px;
  }
  .vince-mnav-btn::before { content: "\2630"; margin-right: 8px; }
  .vince-mnav-toggle:checked ~ .vince-mnav { display: block !important; }
  body .vince-mnav ul { margin: 0 10px 12px; padding: 0; border: 1px solid #e0d5c3; border-radius: 6px; overflow: hidden; background: #fff; }
  .vince-mnav li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; float: none !important; }
  .vince-mnav li a {
    display: block !important; padding: 14px 16px !important; font-size: 16px !important; color: #463024 !important;
    text-decoration: none !important; border-bottom: 1px solid #eee; background: #fff !important; text-align: left !important;
  }
  .vince-mnav > ul > li:last-child > a { border-bottom: none; }
  /* サブメニュー(缶バッジ・価格 / ご利用ガイド) */
  .vince-mnav .vince-mnav-sub { margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }
  .vince-mnav .vince-mnav-sub li a {
    padding: 12px 16px 12px 34px !important; font-size: 14px !important; color: #666 !important;
    background: #faf6ef !important; border-bottom: 1px solid #efe7d9 !important;
  }
  .vince-mnav .vince-mnav-sub li a::before { content: "\2514\00a0"; color: #f0a860; }

  /* ===== 未対応ページ共通: #content 固定980pxを流動化 ===== */
  body #content { width: auto !important; max-width: 100% !important; padding: 0 10px !important; box-sizing: border-box !important; }
  body #content .title_01,
  body #content h3 { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  body #content p { max-width: 100% !important; }
  /* コラム関連リンク(.content_font_02)がli float:left幅167px(半分)で右に無駄スペース→全幅1列に */
  #content .content_font_02 { width: auto !important; }
  #content .content_font_02 li { float: none !important; width: auto !important; display: list-item !important; margin: 0 0 10px 18px !important; }
  /* 見出しバナー(.title_01/.title_02)=固定height60px+line-height60pxで折返し文字が下へはみ出す→高さ可変・地色でバナー追従。
     ★背景title_back_02.png(オレンジ帯＋右端に装飾キャラ)を100% 100%で伸ばすと2行時にキャラが縦長化する→
       background-size:autoで自然比のまま右寄せ表示、余白は地色(オレンジ/teal)で埋める */
  #content .title_01, #content .title_02 {
    height: auto !important; min-height: 44px !important; line-height: 1.4 !important;
    padding: 12px 14px 12px 16px !important; font-size: 18px !important;
    background-size: auto !important; background-position: right top !important; background-repeat: no-repeat !important;
    background-color: #f08300 !important; box-sizing: border-box !important;
  }
  #content .title_02 { background-color: #7ac9be !important; }
  /* title_01は右端に装飾キャラ(title_back_02.png)があるので右paddingで文字を手前に折返し、キャラと重ねない */
  #content .title_01 { padding-right: 80px !important; }
  #content .title_01 .sub { line-height: 1.4 !important; font-size: 13px !important; display: block !important; }

  /* ===== オーダーフォーム本文 レスポンシブ ===== */
  .order_form, .order_form .wrap, .order_form form, .order_about {
    width: auto !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important;
  }
  .order_form .design_radio_wrapper { width: auto !important; max-width: 100% !important; }
  /* 入力テーブル(table.form)を縦積み */
  .order_form table.form, .order_form table.form tbody, .order_form table.form tr,
  .order_form table.form th, .order_form table.form td {
    display: block !important; width: auto !important; box-sizing: border-box !important;
  }
  /* ★table.formのPC由来 margin-left:30px が入力欄全体を右へずらす(左余白40px/右10pxの非対称)→左右マージン0で対称配置。全フォーム共通 */
  body table.form, .order_form table.form { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .order_form table.form th { text-align: left !important; padding: 8px 0 4px !important; }
  /* ★項目名の揃えガタガタの正体: フィールド注釈(.note=「例:556-0055」「建物名まで」等)がfloat:leftのまま未clearで、
     次の項目名th(ご住所/電話番号/ご用件)の文字が注釈の右へ回り込み中央寄せに見える(textLeft=10+注釈幅)。
     →注釈をfloat解除(自分の行へ)＋thをclear:bothで注釈の下へ落として全て左端x10に揃える */
  .order_form table.form .note, .order_form table.form p.note, body table.form .note, body table.form p.note {
    float: none !important; clear: both !important; width: auto !important; max-width: 100% !important;
  }
  .order_form table.form th, body table.form th { clear: both !important; }
  .order_form table.form td { padding: 0 0 12px !important; }
  /* テキスト入力/textarea/select 全幅(.w551等の固定幅解除) */
  .order_form input.radius, .order_form input[type="text"], .order_form input[class*="w5"], .order_form input[class*="w4"],
  .order_form input[class*="w3"], .order_form textarea, .order_form select {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important;
  }
  .order_form .fl, .order_form .fr { float: none !important; width: auto !important; max-width: 100% !important; }
  /* easySelectBox 全幅(ウィジェットは維持しCSSだけ)。★box-sizing:border-box必須=width:100%(343px)+borderで363pxに膨張し右10px見切れの原因。全フォーム共通で指定 */
  body .easy-select-box, .order_form .easy-select-box { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  body .esb-displayer, .order_form .esb-displayer { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  body .esb-dropdown, .order_form .esb-dropdown { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* 氏名ラベル(姓/名/セイ/メイ=.name_prefix)がtext-align:right→左揃えに。名/メイのml10(10px字下げ)も除去し姓/セイと同じ左端に揃える */
  body .name_prefix { text-align: left !important; }
  body .name_prefix.ml10, body .ml10.name_prefix { margin-left: 0 !important; }
  /* 配送先ラジオ等(list_01/list_05)を縦積み */
  .order_form .list_01, .order_form .list_05 { width: auto !important; max-width: 100% !important; }
  .order_form .list_05 li { width: auto !important; float: none !important; display: block !important; margin: 0 0 8px !important; }
  .order_form .design_radio { display: block !important; width: auto !important; line-height: 1.5 !important; }
  /* 別配送先フォーム(絶対配置950px)を通常フロー全幅に */
  /* ★position は絶対に上書きしない: .other_delivery_form は inline position:absolute;top:-99999px で画面外に隠し、
     「別の配送先を指定する」選択時にJSが position:relative;top:0 で表示する仕組み。static化すると常時表示になる不具合 */
  .order_form .other_delivery_form { width: auto !important; max-width: 100% !important; }
  /* 送信/戻る等ボタン画像を収める */
  .order_form .btn img, .order_form .btn input[type="image"] { max-width: 100% !important; height: auto !important; }

  /* ===== オーダー多段STEP2-4(商品選択/オプション/確認): 固定幅ネストボックス＋float＋jScrollPaneが左右にはみ出す→全幅流動化 ===== */
  /* ①ネスト箱(#order_products/#product_N.box/head_back/foot_back/option_wrap/back_01)を全幅・左右マージン0 */
  .order_form #order_products, .order_form .box, .order_form .box.mb20, .order_form .box.mb30,
  .order_form .head_back, .order_form .foot_back, .order_form .option_wrap, .order_form .back_01 {
    width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box !important;
  }
  /* ②商品選択の.type(float:right)＋dt/dd＋easySelectBox＋数量inputを縦積み全幅 */
  .order_form .type { float: none !important; width: auto !important; max-width: 100% !important; }
  .order_form .type dl, .order_form .type dt, .order_form .type dd,
  .order_form dl.clearfix, .order_form dl.clearfix > dt, .order_form dl.clearfix > dd {
    float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important;
  }
  .order_form input.quantity, .order_form input[class*="quantit"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important; }
  /* ③オプション/製作プランのリスト(ul.list_02 > li.full > label.design_checkbox/radio)をfloat解除・全幅・文字折返し */
  .order_form ul.list_02, .order_form .list_02, .order_form .list, .order_form ul.list { width: auto !important; max-width: 100% !important; }
  .order_form .list_02 li, .order_form .list_02 li.full, .order_form .list li, .order_form ul.list > li {
    float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important;
  }
  .order_form .design_checkbox, .order_form .design_radio { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .order_form .list_02 .guide, .order_form .list_02 .name, .order_form .list .guide, .order_form .list .name {
    width: auto !important; max-width: 100% !important; white-space: normal !important; box-sizing: border-box !important;
  }
  /* ④合計金額(.total_price_last 840px)を全幅・右寄せ */
  .order_form .total_price_last, .order_form .total_price_last .price, .order_form .total_price_last p {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important; text-align: right !important;
  }

  /* ===== フッターのキャンペーン情報(#campain): 980px .wrap/.box＋jScrollPane(.scroll/.jspContainer/.jspPane)を全幅・全表示 ===== */
  #campain .wrap, #campain .box { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; }
  #campain .scroll, #campain .jspContainer, #campain .jspPane { width: auto !important; max-width: 100% !important; height: auto !important; overflow: visible !important; }
  #campain .jspPane { position: static !important; }
  #campain .jspVerticalBar, #campain .jspHorizontalBar, #campain .jspDrag, #campain .jspTrack, #campain .jspArrow { display: none !important; }
  #campain dl, #campain dt, #campain dd { float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important; }
  #campain img { max-width: 100% !important; height: auto !important; }

  /* ===== 価格ページ: 固定幅UL流動化＋価格表(多列)を横スクロール ===== */
  body #content ul.clearfix { width: auto !important; max-width: 100% !important; }
  body #content table { max-width: 100% !important; }
  /* 幅広テーブル(価格表=11列870px 等)は横スクロール化。狭い画面に潰さず全サイズの価格を保持。
     ※価格表は.badge_price_list/.price_data配下でclass無し=それらのコンテナ経由で指定 */
  body #content .price table,
  body #content .price_data table,
  body #content .badge_price_list table,
  body #content ul.clearfix table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ===== 再入稿(resend)等の固定幅ボックス群(840px)を流動化 ===== */
  body .total_price, body .box, body .head_back,
  body .foot_back, body .upload_file, body .zip {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important;
  }
  /* アップロードUI(jQuery File Upload): PC絶対配置→静的縦積み(Sticker同型) */
  body .upload_file .upload_button,
  body .upload_file .progress_bar,
  body .upload_file .note {
    position: static !important; left: auto !important; top: auto !important; float: none !important;
    display: block !important; width: auto !important; max-width: 100% !important; margin: 8px 0 0 !important;
  }
  body .upload_file .upload_button button { width: auto !important; height: auto !important; background: none !important; padding: 0 !important; }
  body .upload_file .upload_button button img { width: auto !important; max-width: 100% !important; height: auto !important; }

  /* #content のPC由来 margin-left:20px を除去(左に無駄スペース) */
  body #content { margin: 0 !important; }

  /* ===== トップの円形リンク(#site_menu 4つ)を中央寄せ・2×2グリッド配置 ===== */
  #site_menu { width: auto !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; text-align: center !important; margin: 0 auto !important; padding: 0 !important; }
  #site_menu li { float: none !important; display: block !important; flex: 0 0 50% !important; max-width: 50% !important; box-sizing: border-box !important; width: auto !important; height: auto !important; margin: 0 0 12px !important; padding: 0 !important; text-align: center !important; position: static !important; }
  #site_menu li a { display: inline-block !important; position: static !important; }
  #site_menu li img { max-width: 76% !important; height: auto !important; margin: 0 auto !important; }
  #site_menu li .balloon { display: none !important; }  /* hover用ツールチップはモバイル非表示 */

  /* ===== 製品ラインナップ(#product_lineup)を全幅・中央、商品カードを中央2列 =====
     #contentの左右10px paddingを負マージンで打ち消し全幅化→固定188px カードが2列並ぶ余白を確保 */
  #product_lineup { width: auto !important; max-width: none !important; margin: 20px -10px 40px !important; padding: 20px 0 40px !important; }
  #product_lineup .wrap, #product_lineup .badge_point, #product_lineup .product_list, #product_lineup .product_option {
    width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; box-sizing: border-box !important;
  }
  #product_lineup .wrap { padding: 0 !important; text-align: center !important; }
  #product_lineup .product_list ul { text-align: center !important; font-size: 0 !important; padding: 0 !important; margin: 0 auto !important; }
  /* カードは固定188×268のまま(内部が絶対配置＋枠画像が崩れるため寸法維持)、中央2列に */
  #product_lineup .product_list .item {
    float: none !important; display: inline-block !important; vertical-align: top !important;
    width: 188px !important; height: 268px !important; margin: 0 2px 10px !important;
  }
  #product_lineup .product_list .item a { width: 188px !important; height: 268px !important; }
  /* 加工/包装オプション(.product_option .fl=加工/.fr=包装)がfloat左右で寄る→float解除・全幅・中央縦積み */
  #product_lineup .product_option .fl, #product_lineup .product_option .fr {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 24px !important; text-align: center !important; box-sizing: border-box !important;
  }
  #product_lineup .product_option .item { width: auto !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; padding-top: 8px !important; }
  /* オレンジタグ(加工/包装オプション)=PCはposition:absolute;left:50%で.item基準に中央化。
     モバイルは.itemが全ブリードで中央計算がズレる→static化して通常フロー＋中央で確実に中央配置 */
  #product_lineup .product_option .item .tit { position: static !important; left: auto !important; top: auto !important; margin: 0 auto 8px !important; text-align: center !important; }
  #product_lineup .product_option .item .tit img { display: inline-block !important; margin: 0 auto !important; max-width: 90% !important; height: auto !important; }
  #product_lineup .product_option .item > img { max-width: 100% !important; height: auto !important; display: block !important; margin: 8px auto !important; }
  #product_lineup .product_option .item .description { width: auto !important; max-width: 100% !important; text-align: left !important; box-sizing: border-box !important; padding: 0 14px !important; }
  #product_lineup .product_option .item .description h5 { text-align: center !important; }

  /* ===== キャンペーン一覧(.campaign_detail): isotope(絶対配置＋484px固定)を無効化しフルワイド縦積み =====
     画像はtimthumbでw=484生成されるが、itemを全幅化すれば#content img{max-width:100%}で収まる */
  .campaign_detail { position: static !important; height: auto !important; width: auto !important; max-width: 100% !important; }
  .campaign_detail .item {
    position: static !important; float: none !important; left: auto !important; top: auto !important;
    width: auto !important; max-width: 100% !important; margin: 0 0 34px !important; box-sizing: border-box !important;
  }
  .campaign_detail .item .image { width: auto !important; max-width: 100% !important; text-align: center !important; }
  .campaign_detail .item .image img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .campaign_detail .item img.label { display: none !important; } /* 装飾リボン(alt空)。見出しに被るため非表示 */
  .campaign_detail .item .period, .campaign_detail .item .desc, .campaign_detail .item .name {
    width: auto !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important;
  }
  .campaign_detail .item .period dt, .campaign_detail .item .period dd { float: none !important; width: auto !important; }

  /* ===== ご利用ガイド デザイン方法(.design_guide): 2カラムfloat(item fl/fr 236px)を1カラム全幅に ===== */
  .design_guide { width: auto !important; max-width: 100% !important; }
  .design_guide .item, .design_guide .item.fl, .design_guide .item.fr {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 24px !important; box-sizing: border-box !important;
    /* PC固定height:390px→内容の少ない項目(その他=詳細ボタン無し)で下部に空白。可変高＋背景枠を高さ追従で伸縮 */
    height: auto !important; background-size: 100% 100% !important;
  }
  .design_guide .item .image { width: auto !important; max-width: 100% !important; height: auto !important; text-align: center !important; }
  .design_guide .item .image img { max-width: 100% !important; height: auto !important; }

  /* ===== 特定商取引法/会社案内(#content.law): dt/dd横並び→縦積み(ラベル→値を全幅で読みやすく)
     ※このページは<dl>ラッパー無し=dt/ddが.law直下。セレクタにdlを含めると不一致になるので注意 ===== */
  #content.law dt, .law dt {
    float: none !important; clear: both !important; display: block !important;
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
    margin: 16px 0 0 !important; padding: 7px 10px !important;
    background: #ece4d4 !important; font-weight: bold !important; text-align: left !important; line-height: 1.4 !important;
  }
  #content.law dd, .law dd {
    float: none !important; display: block !important;
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 8px 10px 6px !important; text-align: left !important; line-height: 1.6 !important;
  }
  #content.law dd ol, #content.law dd ul, .law dd ol, .law dd ul { margin: 6px 0 0 !important; padding-left: 1.4em !important; }
  #content.law dd ol li, .law dd ol li { width: auto !important; float: none !important; }

  /* ===== 缶バッジ製品情報 4つのポイント(.badge_point .point_0X): 480px固定枠＋装飾PNG背景で
     本文が右で切れて読めない→可読性優先でPNG背景を外しクリーム地カード化、全幅・自動高さで縦積み ===== */
  .badge_point .point_01, .badge_point .point_02, .badge_point .point_03, .badge_point .point_04 {
    float: none !important; clear: both !important; width: auto !important; max-width: 100% !important; height: auto !important;
    background-image: none !important; background-color: #fffdf8 !important; border: 1px solid #e2d7c0 !important; border-radius: 10px !important;
    margin: 0 0 18px !important; padding: 18px 0 20px !important; box-sizing: border-box !important;
  }
  .badge_point h4 { padding: 0 14px 8px !important; line-height: 1.4 !important; }
  .badge_point .desc { padding: 0 14px !important; }
  .badge_point .desc p { width: auto !important; max-width: 100% !important; }

  /* ===== 文字デザイン依頼カード(#moji_order .item_02 / #designorder_01): 649px固定float→全幅(背景はタイル地でOK) ===== */
  #moji_order .item_02, #content .item_02 {
    float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 0 20px !important;
  }
  #moji_order .item_02 .name, #content .item_02 .name { width: auto !important; max-width: 100% !important; }

  /* ===== デザインオーダー詳細ページ(/design/ = #moji_order_wrapper/#full_order_wrapper.design): 980px固定＋floatプランカード＋ラフスケッチ2カラムを全幅1カラム化 ===== */
  #moji_order_wrapper, #full_order_wrapper,
  #moji_order_wrapper .wrap, #full_order_wrapper .wrap,
  #moji_order_wrapper [id^="designorder_target"], #full_order_wrapper [id^="designorder_target"] {
    width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important;
  }
  #moji_order_wrapper [id^="designorder_target"], #full_order_wrapper [id^="designorder_target"] { height: auto !important; overflow: visible !important; }
  /* プランカード(#designorder_0X.item 318px float:left mr13)→全幅1カラム */
  [id^="designorder_0"].item {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 20px !important; box-sizing: border-box !important;
  }
  [id^="designorder_0"].item .price, [id^="designorder_0"].item .name, [id^="designorder_0"].item .desc,
  [id^="designorder_0"].item p, [id^="designorder_0"].item .label, [id^="designorder_0"].item .note {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  /* タイトルバナー(.title_01フル/.title_02ラフスケッチ帯)を全幅・可変高・18px */
  #moji_order_wrapper .title_01, #full_order_wrapper .title_01, #moji_order_wrapper .title_02, #full_order_wrapper .title_02 {
    width: auto !important; max-width: 100% !important; height: auto !important; min-height: 44px !important; line-height: 1.35 !important; font-size: 18px !important; box-sizing: border-box !important;
  }
  /* ラフスケッチ等のfloat2カラム(.fl=画像/.fr=説明)を縦積み全幅＋画像fit */
  #moji_order_wrapper .fl, #moji_order_wrapper .fr, #full_order_wrapper .fl, #full_order_wrapper .fr,
  #moji_order_wrapper .item .fl, #moji_order_wrapper .item .fr, #full_order_wrapper .item .fl, #full_order_wrapper .item .fr {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 12px !important; box-sizing: border-box !important;
  }
  #moji_order_wrapper img, #full_order_wrapper img { max-width: 100% !important; height: auto !important; }

  /* ===== デザインオーダー導線(.design_guide .design_order): 980px固定＋画像float+.fr516px→1カラム全幅 ===== */
  .design_guide .design_order {
    float: none !important; width: auto !important; max-width: 100% !important; height: auto !important;
    box-sizing: border-box !important; margin: 30px 0 0 !important;
  }
  /* .imageが内容幅(277px)に縮小ラップし左寄り→block全幅化してtext-align:centerで画像を中央に */
  .design_guide .design_order .image { float: none !important; display: block !important; width: auto !important; max-width: 100% !important; margin: 16px auto 0 !important; text-align: center !important; }
  .design_guide .design_order .image img { display: inline-block !important; max-width: 90% !important; height: auto !important; margin: 0 auto !important; }
  .design_guide .design_order .fr { float: none !important; width: auto !important; max-width: 100% !important; margin: 14px 0 !important; text-align: center !important; }
  .design_guide .design_order .desc { height: auto !important; }
  /* 依頼ボタン(design_order_link_01/02.png=float:leftで斜めにずれる)を縦積み中央に */
  .design_guide .design_order .fr a { display: block !important; text-align: center !important; margin: 10px auto !important; }
  .design_guide .design_order .fr a img, .design_guide .design_order .fr img.link_01, .design_guide .design_order .fr img.link_02 {
    float: none !important; display: inline-block !important; margin: 0 auto !important; max-width: 100% !important; height: auto !important;
  }
  .design_guide .design_order .name { float: none !important; width: auto !important; max-width: 100% !important; text-align: center !important; }

  /* ===== デザイン方法 各アプリ詳細ページ(/guide/illustrator|photoshop|sai|other/ = #content.design): PC固定940/980px本文＋手順画像＋動画iframeを流動化 ===== */
  #content.design .design_txt, .design .design_txt {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }
  .design .design_txt p, .design .design_txt div, .design .design_txt ol, .design .design_txt ul, .design .design_txt h4, .design .design_txt span {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .design .design_txt img, .design img.size-full, .design img.alignnone, .design img.alignleft, .design img.alignright, .design img.aligncenter {
    max-width: 100% !important; height: auto !important; float: none !important; display: block !important; margin: 8px auto !important;
  }
  /* #topics(パンくず/関連リンクnav)のPC固定980px .wrap＋ol、FBいいねiframeを全幅化(全ページ共通) */
  #topics .wrap, #topics .wrap.clearfix { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
  #topics ol, #topics ol.clearfix, #topics ul { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* 動画iframeを画面内に収め中央 */
  .design iframe, #topics iframe { max-width: 100% !important; box-sizing: border-box !important; }
  /* フッター等のSNSシェアボタン(忍者おまとめ=FBいいね105px＋Twitterツイート300px)がfloatで横並びしTwitterがはみ出す→inline-blockで折返し中央 */
  .ninja_onebutton_output { max-width: 100% !important; box-sizing: border-box !important; }
  .ninja_onebutton_output .facebook_like_button_count, .ninja_onebutton_output .twitter_tweet_count_no_m,
  .social .facebook_like_button_count, .social .twitter_tweet_count_no_m {
    float: none !important; display: inline-block !important; vertical-align: top !important; max-width: 100% !important;
  }
  .facebook_like_button_count iframe, .twitter_tweet_count_no_m iframe { max-width: 100% !important; }

  /* ===== オーダーの流れ(/guide/flow/ = .guide_order): 各ステップの説明文.fr(750px float:right)が左へはみ出し見切れ→de-float全幅 ===== */
  .guide_order .step .fr, .guide_order .fr { float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .guide_order .step .image, .guide_order .step .fl { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 10px !important; text-align: center !important; }
  .guide_order .step .fr p, .guide_order .step .fr a, .guide_order .step .fr div { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .guide_order .step img { max-width: 100% !important; height: auto !important; }

  /* ===== お支払い・送料(/guide/payment/ の送料#mailing_cost): 980px .wrap＋fl(料金表418)/fr(478)2カラムが右見切れ→全幅1カラム ===== */
  #mailing_cost .wrap, #mailing_cost .wrap.clearfix { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }
  #mailing_cost .fl, #mailing_cost .fr { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 18px !important; box-sizing: border-box !important; }
  #mailing_cost table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed !important; box-sizing: border-box !important; }
  /* ★列幅の元凶: #mailing_cost .wrap .fl table th{width:209px}(2列=418px)がtable-layout:fixedで表を434pxに膨張→列幅を50%に上書き(!importantで非重要な209pxに勝つ) */
  #mailing_cost table th, #mailing_cost table td { width: 50% !important; word-break: break-all !important; padding: 6px 4px !important; font-size: 13px !important; }
  /* #content外なので配送日数目安マップ画像(478px)等にmax-width保険を明示 */
  #mailing_cost img { max-width: 100% !important; height: auto !important; }

  /* ===== よくある質問(/faq/): 大項目の緑ボタン#faq_menuを中央＋オレンジ見出し.faq_wrap h3(title_back_02.png/26px固定60px高で文字はみ出し)を整形 ===== */
  #faq_menu { text-align: center !important; }
  #faq_menu li { float: none !important; display: inline-block !important; vertical-align: top !important; margin: 0 6px 8px !important; }
  #faq_menu li img { max-width: 100% !important; height: auto !important; }
  #content .faq_wrap h3, .faq_wrap h3 {
    height: auto !important; min-height: 44px !important; line-height: 1.35 !important; font-size: 18px !important; padding: 12px 80px 12px 16px !important;
    background-color: #f08300 !important; background-size: auto !important; background-position: right top !important; background-repeat: no-repeat !important; box-sizing: border-box !important;
  }

  /* ===== 納期ページ 店頭引取(.gmap): width:470px float→全幅(中の案内文が右で切れて欠落するため) ===== */
  #content .gmap { float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 0 24px !important; }
  #content .gmap dl { box-sizing: border-box !important; }

  /* ===== アコーディオン見出しの.fl固定幅(FAQ=820px/オーダーの流れ=820px/お支払い=620px)→
     長い見出しが右で切れる(FAQ質問で実害)。floatレイアウト(テキスト.fl左/矢印.state右)を保ち折り返し可に(矢印分46px確保) ===== */
  .faq_wrap h4 .fl, .guide_order h4 .fl, .guide_payment h4 .fl { width: auto !important; max-width: calc(100% - 46px) !important; }
  .faq_wrap h4 { padding-top: 16px !important; padding-bottom: 16px !important; }

  /* ===== オーダー確認画面(STEP4)の明細表(.order_list): width:840px固定＋margin-left:40pxで
     「金額」列が画面外に切れる(確認画面で金額が見えない=重大)→全幅・左margin除去・font/padding縮小で4列を画面内に ===== */
  .order_form .option_wrap .order_list {
    width: 100% !important; margin: 0 0 24px 0 !important; font-size: 13px !important; box-sizing: border-box !important; table-layout: fixed !important;
  }
  .order_form .option_wrap .order_list th, .order_form .option_wrap .order_list td {
    padding: 6px 3px !important; word-break: break-all !important;
  }
  /* PDF/戻るボタン領域(margin-left:158px;width:605px)→全幅中央 */
  .order_form .option_wrap .return_download_btn { width: auto !important; max-width: 100% !important; margin: 0 auto 16px !important; text-align: center !important; }
  .order_form .option_wrap .return_download_btn img, .order_form .option_wrap .return_download_btn input[type="image"] { max-width: 100% !important; height: auto !important; }

  /* ===== 缶バッジ価格ページ ウィジェット群 ===== */
  /* ①プランタブ(通常製作/特急3割/5割=#price_tab の price_tab画像)を中央・縦積み */
  #content #price_tab { text-align: center !important; width: auto !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto 16px !important; }
  #content #price_tab li { float: none !important; display: block !important; width: auto !important; text-align: center !important; margin: 0 auto 8px !important; }
  #content #price_tab li a { display: inline-block !important; }
  #content #price_tab li img { max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
  /* ②横スクロール価格表(.price_data内)に「横にスクロールできます」注釈を上に付与 */
  #content .price_data { position: relative !important; }
  #content .price_data::before {
    content: "← 横にスクロールできます →" !important; display: block !important; text-align: center !important;
    font-size: 12px !important; font-weight: bold !important; color: #e34d00 !important; margin: 2px 0 6px !important; letter-spacing: 1px !important;
  }
  /* ③簡易お見積り(#simulation)フォーム: 固定幅select＋fl/fr画像ボタンを流動化・縦積み(easySelectBoxはCSSのみ) */
  body #simulation .wrap, body #simulation form, body #simulation .form { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* .wrap のPC由来 margin-left:20px が枠を右へずらし右側の余白ゼロ=見切れ→左右マージン0で対称・全幅化 */
  body #simulation .wrap { margin-left: 0 !important; margin-right: 0 !important; }
  /* ベージュ枠(.form=order_back_01.jpg)はPC幅固定bitmap→自然サイズ左寄せで右の角枠が画面外に=右見切れ→枠画像を枠一杯に伸ばす */
  body #simulation .form { background-size: 100% 100% !important; background-position: left top !important; padding-left: 14px !important; padding-right: 14px !important; }
  body #simulation table, body #simulation table tbody, body #simulation table tr,
  body #simulation table th, body #simulation table td { display: block !important; width: auto !important; box-sizing: border-box !important; text-align: left !important; }
  body #simulation table th { padding: 8px 0 2px !important; font-weight: bold !important; }
  body #simulation table td { padding: 0 0 10px !important; }
  body #simulation .fl, body #simulation .fr { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 8px !important; }
  body #simulation .fl.ml60 { margin-left: 0 !important; }
  body #simulation select, body #simulation input[type="text"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important; }
  body #simulation .easy-select-box, body #simulation .esb-displayer, body #simulation .esb-dropdown { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  body #simulation .btn { text-align: center !important; }
  body #simulation .btn .fl, body #simulation .btn .fr { float: none !important; display: block !important; margin: 6px auto !important; }
  body #simulation .btn img, body #simulation .btn input[type="image"] { max-width: 100% !important; height: auto !important; }
  /* [Sticker設計資産] 実行系(check=青バナー)は幅広プライマリのまま、戻る系(clear=茶クリア.fr img)は小型化して主従を明確化 */
  body #simulation .btn .fr img, body #simulation .btn .fr input[type="image"] { max-width: 110px !important; width: auto !important; height: auto !important; }
  /* ===== [Sticker設計資産] 全フォーム共通: 戻る/クリアが実行ボタンより大きい問題を一掃 ===== */
  /* order(do_next)/sample・inquiry(do_confirm)/#simulation(check) 全て、実行系=横長primary据置／clear_btn(.fr img)・do_backを小型化し中央下に縦積み */
  /* ★#content配下(order/sample/inquiry)は line15 #content img{max-width:100%} がID特異性で勝つため#contentスコープで上書き必須。#simulationは#content外なので別途(上記)対応済 */
  body #content form .btn .fl, body #content form .btn .fr { float: none !important; display: block !important; width: auto !important; margin: 8px auto 0 !important; text-align: center !important; }
  body #content .btn img[src*="clear_btn"], body #content .btn input[type="image"][name="do_back"] { max-width: 110px !important; width: auto !important; height: auto !important; margin: 0 auto !important; }
  /* 見積り結果(.result): PC固定920pxで納期予定日/金額が横並び=金額が画面外・日付30pxも見切れ→枠を画面幅化し縦積み・フォント縮小 */
  body #simulation .result { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; padding: 14px 12px !important; text-align: center !important; }
  body #simulation .result .schedule, body #simulation .result .price { float: none !important; display: block !important; width: auto !important; max-width: 100% !important; margin: 0 auto 10px !important; padding: 0 !important; text-align: center !important; line-height: 1.4 !important; }
  body #simulation .result .schedule strong, body #simulation .result .price .num { font-size: 24px !important; }
  body #simulation .result .schedule, body #simulation .result .price { font-size: 15px !important; }
  /* ④選べる納期プラン表(table.data 4列)を画面内に収める(table-layout:fixed＋文字折返し) */
  /* 親.wrap(PC固定980px)を画面幅へ収縮させないとwidth:100%が980pxに解決してしまう */
  body #choose_plan .wrap, body #choose_plan .wrap.mb10 { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
  body table.data { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; font-size: 12px !important; box-sizing: border-box !important; }
  body table.data th, body table.data td { padding: 6px 2px !important; word-break: break-all !important; line-height: 1.3 !important; }
  body table.data .days { font-size: 10px !important; }

  /* ===== フッターのバナーカルーセル(#slider_bnr): ZEAMI Sticker同方式 =====
     PCは#carousel_wrap(固定)>#carousel_move(絶対配置アニメ)>UL×3クローン。モバイルは
     アニメ停止(static化)＋クローンUL非表示＋矢印非表示＋1セットを中央にflex折返し表示。 */
  /* フッター枠(980px固定)を流動化しないとカルーセルが枠内で画面外へ寄る */
  #footer, #footer .wrap, #footer > .wrap { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  #slider_bnr, #carousel, #carousel_wrap, #carousel_move { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  #slider_bnr { display: block !important; height: auto !important; }
  #slider_bnr .prev, #slider_bnr .next, #carousel_prev, #carousel_next { display: none !important; }
  #slider_bnr #carousel { float: none !important; display: block !important; width: auto !important; max-width: 100% !important; overflow: visible !important; height: auto !important; margin: 0 !important; }
  #carousel_wrap { width: auto !important; max-width: 100% !important; height: auto !important; overflow: visible !important; position: static !important; }
  #carousel_move { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  /* Artの広告バナー(ZEAMI GOODS/FACTO等 205×80)＝2×2グリッド配置(flex-basis50%で2列折返し) */
  #carousel_move ul {
    position: static !important; float: none !important; left: auto !important;
    width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
  }
  #carousel_move ul:not(:first-child) { display: none !important; }
  #carousel_move ul::before, #carousel_move ul::after { display: none !important; content: none !important; }
  #carousel_move li { float: none !important; margin: 0 0 10px !important; padding: 0 !important; flex: 0 0 50% !important; max-width: 50% !important; text-align: center !important; box-sizing: border-box !important; }
  #carousel_move li img { display: inline-block !important; margin: 0 auto !important; max-width: 92% !important; height: auto !important; }
  #slider_bnr, #slider_bnr #carousel, #carousel_wrap, #carousel_move { background: none !important; }
  /* 最下部バナー4つ(bnr_list)も中央2列に。
     ※PCは position:absolute; top:147px。#footer .wrapをstatic化した副作用でオフセット親が
       #wrapperになり、ページ最上部(top:147px)へ飛び出しヒーローカルーセルに重なるため必ずstatic化。 */
  #footer .bnr_list { position: static !important; top: auto !important; left: auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; width: auto !important; }
  #footer .bnr_list::before, #footer .bnr_list::after { display: none !important; content: none !important; }
  #footer .bnr_list li { float: none !important; margin: 0 !important; padding: 0 !important; }
  #footer .bnr_list li img { max-width: 100% !important; height: auto !important; display: block !important; }

  /* ===== 製品サイズ詳細ページ(/product/25mm/等13ページ): #content外の固定980pxショーケース＋isotopeオプション＋カルーセルを流動化 ===== */
  /* ①メインショーケース #product_slide: .box/.stage(980/737float)＋絶対配置.image/.price/.pr/.ipso＋float.desc を全て静的化・縦積み・中央 */
  #product_slide, #product_slide .stage, #product_slide .box_wrap, #product_slide .box,
  #product_slide .stage_header, #product_slide .stage_h1, #product_slide .stage_body {
    float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  /* stage_headerの背景(stage_back_02.png=PC980px用オレンジ帯)がモバイルでは空のオレンジ塊に→除去し高さ詰める(見出し文字は残る) */
  #product_slide .stage_header { background-image: none !important; height: auto !important; padding: 0 0 10px !important; }
  #product_slide .stage_h1 { text-align: center !important; padding: 8px 0 !important; font-size: 20px !important; color: #5a4a3a !important; }
  /* PC由来の固定height(.box760px/.desc min-height238px等)が空白を生む→高さ可変で詰める */
  #product_slide .box, #product_slide .box_wrap, #product_slide .stage, #product_slide .stage_body { height: auto !important; }
  #product_slide .desc, #product_slide .ipso, #product_slide .image, #product_slide .price { min-height: 0 !important; height: auto !important; }
  #product_slide .stage_body { position: static !important; }
  #product_slide .stage_body .image, #product_slide .stage_body .price,
  #product_slide .stage_header .pr, #product_slide .stage_body .ipso, #product_slide .desc {
    position: static !important; float: none !important; left: auto !important; top: auto !important; right: auto !important;
    width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important;
  }
  #product_slide .stage_body .image img { display: inline-block !important; margin: 0 auto !important; }
  #product_slide .desc .catch, #product_slide .desc p { text-align: center !important; }
  /* .stage_body内のリンク画像(img.link=絶対配置343px)も静的化・中央 */
  #product_slide .stage_body a { display: block !important; text-align: center !important; }
  #product_slide .link, #product_slide img.link, #product_slide a .link {
    position: static !important; float: none !important; left: auto !important; right: auto !important; top: auto !important;
    width: auto !important; max-width: 100% !important; height: auto !important; margin: 10px auto !important; display: inline-block !important;
  }
  #product_slide img { max-width: 100% !important; height: auto !important; } /* #content外のため保険 */

  /* ②加工/包装オプション #processing_option/#packing_option: .wrap(980+margin-left20)＋isotope絶対配置.item(236px)を全幅1列中央に */
  #processing_option .wrap, #packing_option .wrap {
    width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 10px !important; box-sizing: border-box !important;
  }
  #processing_container, #packing_container, #processing_container.isotope, #packing_container.isotope {
    height: auto !important; position: static !important; width: auto !important;
  }
  #processing_container .item, #packing_container .item,
  #processing_container .item.isotope-item, #packing_container .item.isotope-item {
    position: static !important; float: none !important; left: auto !important; top: auto !important;
    width: 100% !important; max-width: 320px !important; margin: 0 auto 24px !important; box-sizing: border-box !important;
  }
  #processing_container .item .image, #packing_container .item .image,
  #processing_container .item .price, #packing_container .item .price,
  #processing_container .item .name, #packing_container .item .name {
    width: auto !important; max-width: 100% !important; text-align: center !important;
  }
  #processing_container .item .desc, #packing_container .item .desc { width: auto !important; max-width: 100% !important; text-align: left !important; }
  /* オプション項目内の固定幅.linkブロック(454px茶ボタン link_back_01.png)がはみ出す→全幅化＋背景を枠一杯に伸ばし文字を収める */
  #processing_container .item .link, #packing_container .item .link,
  #processing_container .item .link img, #packing_container .item .link img { width: auto !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; }
  #processing_container .item .link, #packing_container .item .link { height: auto !important; background-size: 100% 100% !important; background-position: center !important; }
  /* aがPC固定454px幅→はみ出す。width:auto＋折返し許可で長い文言(シール・箱用〜ダウンロード)も2行で収める */
  #processing_container .item .link a, #packing_container .item .link a {
    width: auto !important; max-width: 100% !important; white-space: normal !important; font-size: 11px !important; display: block !important;
    padding: 8px 18px !important; line-height: 1.4 !important; box-sizing: border-box !important;
  }
  #processing_option img, #packing_option img { max-width: 100% !important; height: auto !important; }
  /* #content外なのでtitle_01バナー整形(高さ可変/sub改行)も届かせる */
  #processing_option .title_01, #packing_option .title_01, #product_lineup .title_01 {
    height: auto !important; min-height: 44px !important; line-height: 1.35 !important; padding: 12px 80px 12px 16px !important; font-size: 18px !important;
    background-color: #f08300 !important; background-size: auto !important; background-position: right top !important; background-repeat: no-repeat !important; box-sizing: border-box !important;
  }
  #processing_option .title_01 .sub, #packing_option .title_01 .sub, #product_lineup .title_01 .sub { display: block !important; line-height: 1.4 !important; font-size: 13px !important; }

  /* ③#content内の商品スライダー #slider_bnr>#carousel_2(894px固定/絶対配置move)をフッター同方式で折返し全幅化 */
  #carousel_2, #carousel_wrap_2, #carousel_move_2 { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  #carousel_prev_2, #carousel_next_2 { display: none !important; }
  #slider_bnr #carousel_2 { float: none !important; display: block !important; overflow: visible !important; height: auto !important; margin: 0 !important; }
  /* 13枚を縦積み(1170px)にすると冗長→横スクロールの帯に(指スワイプ) */
  #carousel_wrap_2 { height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; position: static !important; -webkit-overflow-scrolling: touch !important; }
  #carousel_move_2 { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  #carousel_move_2 ul { width: auto !important; display: inline-flex !important; flex-wrap: nowrap !important; float: none !important; padding: 0 !important; margin: 0 !important; }
  #carousel_move_2 ul:not(:first-child) { display: none !important; }
  #carousel_move_2 li { float: none !important; flex: 0 0 auto !important; width: 150px !important; margin: 0 6px !important; padding: 0 !important; }
  #carousel_move_2 li img { max-width: 100% !important; height: auto !important; }

  /* ===== フッター本体: ZEAMI Sticker同方式=絶対配置の子を全て静的化して縦積み中央 =====
     (これをしないと#footer .wrap流動化で子が重なりぐちゃぐちゃになる) */
  #footer .wrap { height: auto !important; position: static !important; background: none !important; padding: 22px 12px !important; }
  #footer .wrap > .info,
  #footer .wrap > .link_line_01, #footer .wrap > .link_line_02, #footer .wrap > .link_line_03,
  #footer .wrap > .link_line_04, #footer .wrap > .link_line_05 {
    position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; margin: 0 0 22px 0 !important; float: none !important; display: block !important;
  }
  /* 連絡先(.info): Tel/受付/メール相談/会社名/住所/Google Mapを中央 */
  #footer .wrap .info { text-align: center !important; }
  #footer .wrap .info .contact_info { width: auto !important; }
  #footer .wrap .info p { text-align: center !important; }
  #footer .wrap .info img { display: inline-block !important; }
  #footer .wrap .info .contact_info dl {
    display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important;
    float: none !important; width: auto !important; margin: 4px auto 8px !important;
  }
  #footer .wrap .info .contact_info dl::before, #footer .wrap .info .contact_info dl::after { display: none !important; content: none !important; }
  #footer .wrap .info .contact_info dl dt, #footer .wrap .info .contact_info dl dd {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; text-align: center !important;
  }
  /* フッターナビ各セクション(link_dl): 見出し＋リンクを2列グリッド */
  #footer .link_dl { width: auto !important; }
  #footer .link_dl dt { text-align: left !important; float: none !important; width: auto !important; }
  #footer .link_dl dd { float: none !important; width: auto !important; margin: 0 !important; }
  #footer .link_dl dd ul { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 12px !important; row-gap: 1px !important; margin: 0 0 6px !important; padding: 0 !important; }
  #footer .link_dl dd ul li { width: auto !important; float: none !important; list-style: none !important; background: none !important; margin: 0 !important; }
  #footer .link_dl dd ul li a { display: block !important; padding: 5px 0 !important; }
  #footer .link_dl dd .tit { text-align: left !important; }
  /* キャラ非表示(既に.char非表示済だが念のため) */
  #footer .wrap .char { display: none !important; }
  /* コピーライト帯を中央 */
  #footer #copyright { height: auto !important; }
  #footer #copyright .wrap { width: auto !important; height: auto !important; position: static !important; text-align: center !important; padding: 14px 12px !important; }
  #footer #copyright #taiko { display: none !important; }
  #footer #copyright .social, #footer #copyright .social_link,
  #footer #copyright .txt, #footer #copyright p {
    position: static !important; float: none !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important; margin: 6px auto !important; text-align: center !important;
  }
  #footer #copyright .social_link { display: block !important; }
  #footer #copyright .social_link li { float: none !important; display: inline-block !important; margin: 0 6px !important; }
  #footer #copyright .txt { line-height: 1.5 !important; }
}