ではなくdivのfloatレイアウトのため専用対応が必要）
============================================================ */
/* ★最重要: 各セクションの内側ラッパー .sticker_guide(#card_NN) が width:980px 固定。
これを流動化しないと中の .cost_sec/.table_box が980pxのまま→中央寄せの文字が画面外へ。 */
.sticker_guide, [id^="card_"], .sticker_guide.clearfix {
width: auto !important; max-width: 100% !important; box-sizing: border-box;
margin-left: 0 !important; margin-right: 0 !important;
}
/* --- 商品ページ(カードサイズ等)個別要素 --- */
/* 桃バナー「カードサイズステッカー」(h3.title_01): 980px画像で上付き＆右見切れ→実バー色でベタ塗り＋上下中央 */
.title_01 {
background-image: none !important; background-color: #f2488d !important;
height: auto !important; min-height: 46px !important; line-height: 1.3 !important;
padding: 12px 16px !important; display: flex !important; align-items: center !important;
flex-wrap: wrap !important;
font-size: 21px !important; border-radius: 3px;
}
/* .sub「-特急製作はありません-」は本文タイトルの下の行へ(flex-basis:100%で改行) */
.title_01 .sub {
flex-basis: 100% !important; width: 100% !important; display: block !important;
line-height: 1.3 !important; font-size: 15px !important; font-weight: normal !important;
margin: 3px 0 0 !important;
}
/* ICカード写真: .card_box固定990px＋img float→見切れ→流動化して全体表示・中央寄せ */
.card_box { width: auto !important; max-width: 100% !important; margin: 0 !important; }
.card_box img { float: none !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto 10px !important; display: block !important; }
/* 章内リンクの画像タブ(#half_link 5個・width991px overflow:hiddenで2個しか見えない)→全て折返し表示 */
#half_link {
width: auto !important; max-width: 100% !important; overflow: visible !important;
padding: 15px 0 0 !important; margin: 0 0 15px !important;
display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important;
}
#half_link li { float: none !important; margin: 0 !important; width: 47% !important; }
#half_link li img { display: block !important; width: 100% !important; height: auto !important; }
/* そのままテンプレート/裏面印刷の枠(.half_sec02): ul990px＋li318px floatで左寄せ→
全幅に伸ばすと中の画像＋150pxテキストが離れて崩れる→元のカード幅を保ったまま枠ごと中央寄せ */
/* ★ベージュ枠の実体は .half_sec02 の背景画像 half_bg06.png(318px幅, no-repeat left bottom)＝左寄せの原因。
中央下に配置し、カード(li)も同じ318px幅に合わせて中央寄せ→枠と中身が一致 */
.sticker_bcard_half .half_sec02 { background-position: center bottom !important; }
/* 枠の上フチ画像(.dis内 half_bg05.png 318x10 / half_bg01.png 980x10)も左寄せ→中央に揃える */
.sticker_bcard_half .dis { text-align: center !important; }
.sticker_bcard_half .dis img { display: inline-block !important; max-width: 100% !important; height: auto !important; }
.sticker_bcard_half .half_sec02 ul { width: auto !important; overflow: visible !important; margin: 0 !important; text-align: center !important; }
.sticker_bcard_half .half_sec02 ul li { width: auto !important; max-width: 100% !important; float: none !important; margin: 0 auto !important; box-sizing: border-box; display: block !important; }
.sticker_bcard_half .half_sec02 ul li img { max-width: 100% !important; height: auto !important; }
/* 中身(画像+説明)を横並びfloatにすると端末幅で右にはみ出す→縦積み中央で確実に枠内に収める */
.sticker_bcard_half .half_sec02 ul li dl dd { text-align: center !important; overflow: visible !important; }
.sticker_bcard_half .half_sec02 ul li dl dd img { float: none !important; display: block !important; margin: 0 auto 10px !important; }
/* 画像は(float左)に入っている→枠を解除して上部中央に */
.sticker_bcard_half .half_sec02 ul li dl dd .fl { float: none !important; display: block !important; margin: 0 auto 10px !important; text-align: center !important; }
.sticker_bcard_half .half_sec02 ul li dl dd .txt02 { float: none !important; width: auto !important; text-align: left !important; }
/* 説明末尾の【 詳細 】リンクは中央寄せ */
.sticker_bcard_half .half_sec02 ul li dl dd .txt02 a { display: block !important; text-align: center !important; }
/* ★各セクションの枠(背景half_bgNN.png)はPC用の固定幅画像(製作費=half_bg02/カット等=half_bg04が980px、
テンプレ=half_bg06が318px)で、モバイル幅では左右端が合わず崩れる→全ての枠を同色のCSS枠
(クリーム地#fdfcef＋淡い枠線＋角丸)に統一置換し、全幅に追従＆全セクションで統一 */
.sticker_bcard_half .cost_sec,
.sticker_bcard_half .half_sec01,
.sticker_bcard_half .half_sec02 {
background-image: none !important; background-color: #fdfcef !important;
border: 1px solid #e5dcc6 !important; border-radius: 8px !important;
padding: 6px 13px 16px !important; box-sizing: border-box !important;
}
/* 枠の上フチcap(.dis内の half_bg01/03/05 = トップキャップ画像)は、CSS枠に置換したので全て除去 */
.sticker_bcard_half .dis:has(> img[src*="half_bg01"]),
.sticker_bcard_half .dis:has(> img[src*="half_bg03"]),
.sticker_bcard_half .dis:has(> img[src*="half_bg05"]) { display: none !important; }
.sticker_bcard_half .dis img[src*="half_bg01"],
.sticker_bcard_half .dis img[src*="half_bg03"],
.sticker_bcard_half .dis img[src*="half_bg05"] { display: none !important; }
.sticker_bcard_half .half_sec01 ul { width: auto !important; overflow: visible !important; margin: 0 !important; text-align: center !important; }
.sticker_bcard_half .half_sec01 ul li {
width: auto !important; max-width: 100% !important; float: none !important;
margin: 0 auto 14px !important; box-sizing: border-box; display: block !important;
}
.sticker_bcard_half .half_sec01 ul li dl dd { text-align: center !important; overflow: visible !important; }
.sticker_bcard_half .half_sec01 ul li dl dd img { float: none !important; display: block !important; margin: 0 auto 8px !important; max-width: 100% !important; height: auto !important; }
.sticker_bcard_half .half_sec01 ul li dl dd .fl { float: none !important; display: block !important; margin: 0 auto 8px !important; text-align: center !important; }
.sticker_bcard_half .half_sec01 ul li dl dd .txt02 { float: none !important; width: auto !important; text-align: center !important; }
/* テンプレートのDLカード(.half_box: img_box float + btn_box) を縦積み中央 */
.sticker_bcard_half .half_box { text-align: center !important; }
.sticker_bcard_half .half_box .img_box { float: none !important; margin: 0 auto 8px !important; display: block !important; }
.sticker_bcard_half .half_box .btn_box { display: block !important; text-align: center !important; }
.sticker_bcard_half .half_box img { max-width: 100% !important; height: auto !important; }
.sticker_bcard_half .txt03, .sticker_bcard_half .txt04 { text-align: center !important; }
/* --- 納期表(.half_table): セルが過密で日付が細切れ改行→フォント/余白を圧縮し読みやすく --- */
/* wid02/03=230px固定・wid04=autoで4列目だけ極端に狭い→固定レイアウトで日付3列を等幅に */
.sticker_bcard_half .half_table table { display: table !important; width: 100% !important; table-layout: fixed !important; overflow: visible !important; }
.sticker_bcard_half .half_table table thead .wid01 { width: 46px !important; }
.sticker_bcard_half .half_table table thead .wid02,
.sticker_bcard_half .half_table table thead .wid03,
.sticker_bcard_half .half_table table thead .wid04 { width: 105px !important; }
.sticker_bcard_half .half_table table th,
.sticker_bcard_half .half_table table td { padding: 4px 5px !important; font-size: 12px !important; }
.sticker_bcard_half .half_table table thead th { font-size: 11px !important; line-height: 1.3 !important; }
.sticker_bcard_half .half_table table thead .wid01 { width: 50px !important; }
.sticker_bcard_half .half_table table tbody th { padding: 6px 3px 6px 5px !important; font-size: 12px !important; line-height: 1.3 !important; }
/* 日付セル: 2桁月(10〜12月)の「12月30日(水)」でも収まるよう左右余白を詰めて内容幅を確保 */
.sticker_bcard_half .half_table table tbody td .date { padding: 8px 2px !important; font-size: 12px !important; line-height: 1.4 !important; }
.sticker_bcard_half .half_table table tbody td span { padding: 4px 4px !important; font-size: 11px !important; }
/* 日付の改行位置指定: 「2026年」で改行し「7月13日(月)」は割らない(CEO指定)。
日付は2026年7月13日(月)に分割済(theme-shortcode.php)。
PCではinlineで1行、モバイルのみblock化して2行に */
.sticker_bcard_half .half_table table tbody td .date .d-y,
.sticker_bcard_half .half_table table tbody td .date .d-md,
.nouki_table table tbody td .date .d-y, .nouki_table table tbody td .date .d-md { display: block !important; }
.sticker_bcard_half .half_table table tbody td .date .d-md,
.nouki_table table tbody td .date .d-md { white-space: nowrap !important; }
/* 発送予定日ページ(/wp/delivery/)の納期表(.nouki_table)も同じ4列固定幅→同処方
(このページは#content配下でない＆テーマがtable width:430px指定→#wrapper起点の強セレクタで上書き) */
#content .nouki_table table, .nouki_guide .nouki_table table,
#wrapper .nouki_guide table, body div[class*="nouki_table"] table {
display: table !important; width: 100% !important; max-width: 100% !important;
table-layout: fixed !important; margin: 0 !important; overflow-x: visible !important;
}
.nouki_guide table th, .nouki_guide table td { box-sizing: border-box !important; }
.nouki_guide, .nouki_table { width: auto !important; max-width: 100% !important; }
.nouki_table table th, .nouki_table table td { padding: 4px 5px !important; font-size: 12px !important; }
.nouki_table table thead th { font-size: 11px !important; line-height: 1.3 !important; }
.nouki_table table thead .wid01 { width: 46px !important; }
.nouki_table table thead .wid02, .nouki_table table thead .wid03, .nouki_table table thead .wid04 { width: 105px !important; }
.nouki_table table tbody th { padding: 6px 3px 6px 5px !important; font-size: 12px !important; line-height: 1.3 !important; }
.nouki_table table tbody td .date { padding: 8px 2px !important; font-size: 12px !important; line-height: 1.4 !important; }
.nouki_table table tbody td span { padding: 4px 6px !important; font-size: 11px !important; }
/* 発送予定日ページの納期指定案内(.nouki_shitei 980px固定)内のh5/pが折返さず右へ数十px見切れ→流動化して折返し */
#content .nouki_shitei, #content .nouki_shitei h5, #content .nouki_shitei p {
width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
}
#content .nouki_shitei p { word-break: break-word !important; }
/* 店頭引取の地図＋支払案内(.gmap 470px: Google Map iframe＋支払テキストpが画面幅超)→流動化 */
#content .gmap { width: auto !important; max-width: 100% !important; }
#content .gmap iframe { width: 100% !important; max-width: 100% !important; }
#content .gmap p { width: auto !important; max-width: 100% !important; word-break: break-word !important; }
/* --- 包装オプション(#packing_option): item 484px×float2で1つしか見えない→縦積み流動化で両方表示 --- */
#packing_option .wrap, #packing_option .wrap #packing_container { width: auto !important; max-width: 100% !important; }
#packing_option .wrap .item {
width: auto !important; float: none !important; display: block !important; margin: 0 0 16px 0 !important;
}
#packing_option .wrap .item .image img { width: 100% !important; height: auto !important; max-width: 100% !important; border-radius: 10px 10px 0 0; }
#packing_option .wrap .item .sub_price { width: 100% !important; }
/* --- 紙の種類ページ(/sticker/ .stickertype) --- */
/* 紙種バナー(.title 980px固定): h3(紙名 660px float)の後に価格が流れ、価格「￥32〜（税込）」が画面右外に隠れる
→バナー流動化＆h3のfloat解除で価格を紙名の下に表示(バナーは背景をcoverで引き伸ばし・右にマスコット分の余白) */
.sticker_guide .stickertype .title {
width: auto !important; height: auto !important; min-height: 0 !important;
padding: 12px 74px 12px 16px !important; background-size: cover !important; box-sizing: border-box !important;
}
.sticker_guide .stickertype .title h3 { float: none !important; width: auto !important; margin: 0 !important; }
.sticker_guide .stickertype .title .price { padding: 2px 0 0 !important; font-size: 28px !important; }
/* 仕様ブロック.commentがPC用幅432px右float→箱(345px)から左にはみ出し見切れ→float解除・全幅 */
.stickertype .box .comment, .stickertype .comment {
float: none !important; width: auto !important; max-width: 100% !important; margin: 10px 0 0 !important;
}
.stickertype .box { padding: 14px !important; }
/* 図解画像(float:left)の右の狭い隙間に見出しが縦落ちする→float解除で縦積み */
.stickertype .box p img { float: none !important; display: block !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
.stickertype .box h4 { clear: both !important; }
/* 紙種バナーのマスコット(.image1〜.image5 絶対配置left:35Npx固定で幅7〜18pxに圧縮)→バナー右端に適正サイズで配置 */
.stickertype div[class^="image"] {
left: auto !important; right: 6px !important; top: -14px !important; width: auto !important;
}
.stickertype div[class^="image"] img { width: 76px !important; height: auto !important; max-width: none !important; }
/* 紙種メニュー6バナー(ul#sticker_menu li float)→2列中央(clearfix疑似要素はflexズレ防止で無効化) */
#sticker_menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; width: auto !important; margin: 0 0 15px !important; padding: 0 !important; }
#sticker_menu::before, #sticker_menu::after { display: none !important; content: none !important; }
#sticker_menu li { float: none !important; margin: 0 !important; width: auto !important; }
#sticker_menu li img { display: block !important; }
/* 星評価表(.comment table): #content table{width:100%}で右に白余白→内容幅で中央 */
#content .stickertype .comment table, .stickertype .comment table {
display: table !important; width: auto !important; max-width: 100% !important;
margin: 0 auto !important; table-layout: auto !important; overflow-x: visible !important;
}
/* 紫バナー: 固定高さ60px＋padding-top28pxで上寄り → 縦中央寄せ */
.half_title_01 {
height: auto !important; min-height: 40px !important; line-height: 1.4 !important;
padding: 12px 16px !important; margin: 0 0 16px !important;
display: flex !important; align-items: center !important;
/* 980px画像をcoverで拡大すると色/デザインが崩れる→実バー色でベタ塗り(画像は使わない) */
background-image: none !important; background-color: #75487c !important; background-size: auto !important;
font-size: 16px !important; border-radius: 3px;
}
/* 左右2カラム(627px/343px float)を解除して縦積み */
.cost_sec .inner_l, .cost_sec .inner_r {
width: auto !important; float: none !important; box-sizing: border-box;
}
.cost_sec .inner_r { margin-top: 16px !important; }
.cost_sec .inner_l .cost_box { margin: 0 !important; }
/* セットアップ費(220px)＋(280px)の横並びを縦積みに、＋アイコンは中央 */
.cost_sec .inner_l .box01, .cost_sec .inner_l .box03 {
float: none !important; width: auto !important; display: block !important;
margin: 0 0 4px !important; box-sizing: border-box;
}
.cost_sec .box02 {
float: none !important; padding: 6px 0 !important; text-align: center !important;
}
.cost_sec .box02 img { margin: 0 auto !important; display: inline-block !important; }
/* はみ出し防止に金額フォントを微縮小 */
.cost_sec .inner_l .box01 dl dd { font-size: 30px !important; }
.cost_sec .inner_l .box03 dl dd { font-size: 20px !important; }
.cost_sec .inner_r .txtUl li { width: 48% !important; }
/* 保険: 万一の横溢れは製作費セクション内で吸収 */
.cost_sec, .cost_box { max-width: 100% !important; overflow-x: hidden !important; }
/* ============================================================
ご利用ガイド(/wp/guide/)デザイン方法ページ CEO指摘3点
============================================================ */
/* ①「もちろん〜行っております！」(#page_title .note2)がタイトル帯からはみ出す。
帯(#page_title)は固定140pxの横帯背景画像で、height:auto化すると本文が帯の外(下)へこぼれて見える
→背景を縦横タイルにして自動高さ全体を均一に埋める＋PC用の強制改行
を無効化して自然に折返す */
#page_title { background-repeat: repeat !important; }
#page_title .wrap .note2 br { display: none !important; }
/* ② Illustrator/Photoshop… のカード(.design_guide .item)が幅236px×float固定で右に見切れ＆
.desc height:93px固定で文字がDLバナーに重なる→全幅縦積み＋高さ自動 */
.design_guide { width: auto !important; max-width: 100% !important; padding: 0 0 20px !important; }
.design_guide .item, .design_guide .item.fl, .design_guide .item.fr {
width: auto !important; height: auto !important; float: none !important; display: block !important;
margin: 0 auto 16px !important; padding: 20px 15px !important; box-sizing: border-box !important;
}
.design_guide .item .image { height: auto !important; padding: 0 0 12px !important; }
.design_guide .item .image img { max-width: 100% !important; height: auto !important; }
.design_guide .item .name { margin: 0 0 10px !important; }
.design_guide .item .desc { height: auto !important; margin: 0 0 12px !important; }
.design_guide .item .txt_center img { max-width: 100% !important; height: auto !important; }
/* ③「おまかせください！」の画像(.design_order .image 356px float)＋右516px floatが見切れ→縦積み中央 */
.design_guide .design_order {
width: auto !important; max-width: 100% !important; height: auto !important; float: none !important;
margin: 24px auto 0 !important; padding: 20px 15px !important; box-sizing: border-box !important; overflow: visible !important;
/* カード背景(option_back_02.jpg=薄クリーム)は大きなパンダ画像でほぼ隠れ、角だけ覗いてゴミの様に見える
→背景と角丸を消して内容を地に直置き(上のIllustrator等のカードは意図通りクリームのまま残す) */
background: none !important; border-radius: 0 !important;
}
.design_guide .design_order .image { float: none !important; margin: 0 auto 16px !important; text-align: center !important; }
.design_guide .design_order .image img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; }
.design_guide .design_order .fr { float: none !important; width: auto !important; margin: 0 !important; }
.design_guide .design_order .desc { height: auto !important; }
.design_guide .design_order .link_01, .design_guide .design_order .link_02 {
float: none !important; display: block !important; margin: 0 auto 10px !important; text-align: center !important;
}
.design_guide .design_order .link_01 img, .design_guide .design_order .link_02 img { max-width: 100% !important; height: auto !important; }
/* ガイド各アプリ解説ページ(illustrator/photoshop/sai/other): 本文枠.design_txt(940px固定)＋
解説画像(width=940のalignnone)が右へ見切れ→枠を流動化＋本文画像を全て100%に収める */
.design_txt { width: auto !important; max-width: 100% !important; padding: 0 !important; }
/* #content内の本文画像の共通上限(低詳細度・既存の!important固定幅指定には勝たない安全策) */
#content img { max-width: 100%; height: auto; }
#content .design_txt img, #content.design img.size-full, #content .alignnone { max-width: 100% !important; height: auto !important; }
/* アプリ切替タブ(#design_menu li float)→中央寄せ折返し(sticker_menuと同処方) */
#design_menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; padding: 0 0 13px !important; }
#design_menu::before, #design_menu::after { display: none !important; content: none !important; }
#design_menu li { float: none !important; padding: 0 !important; margin: 0 !important; }
#design_menu li img { max-width: 100% !important; height: auto !important; }
/* 見出しバー.title_02(固定50px+背景バー画像): 文字が長いとはみ出す→高さ自動・折返し可 */
.title_02 { height: auto !important; min-height: 50px !important; line-height: 1.4 !important; padding: 13px 15px !important; background-size: cover !important; }
/* そのままテンプレートページ(/wp/guide/template/): .temp_guide(980px)＋.item(236px float)が見切れ→全幅縦積み */
.temp_guide { width: auto !important; max-width: 100% !important; padding: 0 0 20px !important; }
.temp_guide .item, .temp_guide .item.fl, .temp_guide .item.fr {
width: auto !important; float: none !important; display: block !important;
margin: 0 auto 16px !important; padding: 15px !important; box-sizing: border-box !important;
}
.temp_guide h4 { height: auto !important; min-height: 60px !important; line-height: 1.4 !important; padding: 16px 15px !important; background-size: cover !important; }
.temp_guide .item .image { padding: 0 0 10px !important; }
.temp_guide .item .image img { max-width: 100% !important; height: auto !important; }
.temp_guide .item .name { margin: 0 0 10px !important; }
.temp_guide .item .download { margin: 0 !important; }
.temp_guide .item .download li { margin: 0 0 6px !important; }
.temp_guide .item .download li img { max-width: 100% !important; height: auto !important; }
/* ============================================================
全ページ最終点検で判明した「画面幅超のはみ出し(右見切れ)」の追加修正
※docWは393で横スクロールは無いが、body overflow-x:hiddenで右側が切れて隠れていた箇所
============================================================ */
/* ① デザインオーダー(/design/): デザイン依頼プラン枠が固定幅(649/318px float)で本文が右切れ→全幅縦積み */
#content #moji_order .wrap .item_02, #content #full_order .wrap .item {
width: auto !important; float: none !important; box-sizing: border-box !important;
}
#content #moji_order .wrap .item_02 p, #content #full_order .wrap .item p { word-break: break-word; }
/* ② よくある質問(/wp/faq/): 質問文 .faq_wrap h4 .fl が width:820px固定で折返さず右切れ→自動幅で折返し */
#content .faq_wrap h4 .fl { width: auto !important; float: none !important; }
#content .faq_wrap h4 { padding-right: 45px !important; }
/* 最上部のカテゴリバナー4つ(#faq_menu li 237px img)が左寄り→中央に縦積み */
#content #faq_menu { display: flex !important; flex-direction: column !important; align-items: center !important; }
#content #faq_menu::before, #content #faq_menu::after { display: none !important; content: none !important; }
#content #faq_menu li { float: none !important; margin: 0 0 8px !important; }
#content #faq_menu li img { display: block !important; max-width: 100% !important; height: auto !important; }
/* キャンペーン一覧ページ(/wp/campaign/): .campaign_detail(1010px)＞.item(484px float)＞画像484pxが右見切れ→全幅縦積み */
#content .campaign_detail { width: auto !important; max-width: 100% !important; padding-top: 30px !important; }
#content .campaign_detail .item { width: auto !important; float: none !important; margin: 24px 0 26px !important; box-sizing: border-box !important; }
#content .campaign_detail .item .image, #content .campaign_detail .item .image img { max-width: 100% !important; height: auto !important; }
#content .campaign_detail .item .period, #content .campaign_detail .item p.name { width: auto !important; max-width: 100% !important; }
#content .campaign_detail .item .period dt { float: none !important; display: inline-block !important; }
/* ③ オーダーフォーム上部のキャンペーン枠(#campain>.wrap>.box>.scroll[jScrollPane]>dl 固定幅980/972/760px)が右切れ→全幅流動化。
★jScrollPaneは.jspPaneをposition:absoluteにするため、height:autoだけだと親が高さ0=中身消滅→pane静的化＋スクロールバー非表示で全表示 */
#campain .box, #campain .scroll { width: auto !important; max-width: 100% !important; height: auto !important; overflow: visible !important; }
#campain .jspContainer { width: auto !important; max-width: 100% !important; height: auto !important; overflow: visible !important; }
#campain .jspPane { position: static !important; width: auto !important; max-width: 100% !important; height: auto !important; top: auto !important; left: auto !important; }
#campain .jspVerticalBar, #campain .jspHorizontalBar { display: none !important; }
#campain dl, #campain dt, #campain dd { width: auto !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important; }
#campain dd { word-break: break-word; }
/* キャンペーン文字が枠(点線ボーダー)の右端に触れて/はみ出す→右に余白を確保して枠内に収める */
#campain .box, #campain .scroll, #campain .jspPane { padding-right: 18px !important; box-sizing: border-box !important; }
#campain dt, #campain dd { padding-right: 6px !important; word-break: break-word !important; }
/* 枠の地＋点線ボーダー＋ギフト透かしはcampain_back_03.png(固定サイズ一枚絵)。背景伸縮はギフトが縦長に歪む(CEO NG)ため不可。
→モバイルはこの背景画像を捨て、地色＋CSS点線ボーダーで枠を再現(無歪みで内容に追従して伸縮)。
さらにdlのmargin-left:183px(元はギフト用の余白)が文字幅を152pxまで圧迫し過剰改行→ギフトを消したので左余白を詰め文字を全幅に */
#campain .box { background-image: none !important; background-color: #faf8ee !important; border: 3px dotted #c3b491 !important; border-radius: 4px !important; box-sizing: border-box !important; padding: 10px 16px 16px !important; }
#campain dl { margin-left: 0 !important; }
/* 特定商取引法(/wp/law/ #content.law): dt=float:left;width:20em＋dd=margin-left:20emで、モバイルは値列が幅約85pxに潰れ1文字改行＆長い英単語(Entertainment)が右へ見切れ。
→ラベル(dt)と値(dd)を全幅で縦積み(dtを見出し風に・行区切り線はdt側のborder-topのみ残しdd側は消す)・長語は折返し */
#content.law dt, #content.law dd { float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important; word-break: break-word !important; }
#content.law dt { padding: 16px 0 4px !important; font-weight: bold !important; border-top: 1px solid #c2b8ab !important; }
#content.law dd { padding: 0 0 18px !important; padding-right: 4px !important; border-top: 0 !important; }
#content.law ol { padding-left: 18px !important; }
#content.law ol li { margin-left: 4px !important; word-break: break-word !important; }
/* ご利用ガイド「オーダーの流れ(.guide_order)」「お支払い・送料(.guide_payment)」: 中身が.fl(float:left 820px)+.fr(float:right 750px)の2カラム固定幅。
モバイル(親365px)では.frが画面左外(left:-371px)へ回り込み文字が左にはみ出す→float解除で全幅縦積み */
#content .guide_order .fl, #content .guide_order .fr,
#content .guide_payment .fl, #content .guide_payment .fr {
float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
}
#content .guide_order .fr, #content .guide_payment .fr { margin-top: 4px !important; }
#content .guide_order img, #content .guide_payment img { max-width: 100% !important; height: auto !important; }
/* お支払い・送料の「送料/配送日数目安」セクション(#mailing_cost・#content外)も.fl(送料表)+.fr(配送日数の地図area_map.png 478px)の2カラム固定幅。
モバイルは地図(.fr 478px)が親393pxを超えfloat:rightで右が見切れ→float解除で全幅縦積み＋地図画像をwidth:auto/max-width:100%で画面内に収める */
#mailing_cost .fl, #mailing_cost .fr { float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
#mailing_cost .fr { margin-top: 8px !important; }
#mailing_cost img { max-width: 100% !important; width: auto !important; height: auto !important; }
}