/* ==========================================================
   スマホ対応サンプル用の追加CSS
   既存の styles.css は一切変更せず、上乗せするだけの構成
   ========================================================== */

.sp-notice{
	display:none;
	background:#fff3cd;
	color:#7a5b00;
	font-size:13px;
	padding:8px 12px;
	text-align:center;
	border-bottom:1px solid #e0c46b;
}

#main_contents img{ max-width:100%; height:auto; }
/* mailformpro が自動生成する「入力画面／確認画面／完了画面」の
   ステップ表示。押せそうに見えて実際は押せないため非表示にする */
#mfp_phase_stat{ display:none !important; }
/* iOS Safariが送信ボタン(type=submit)にだけ標準の見た目を強制し、
   文字が白っぽく読めなくなるのを防ぐ */
.mfp_element_submit{
	-webkit-appearance:none;
	appearance:none;
	color:#333 !important;
}
.hatsu, .sengen, .funa, .kantan{ background-image:none !important; height:auto !important; }
.kantancon{ margin-top:0 !important; width:auto !important; max-width:100%; box-sizing:border-box; }
.sp-headline{ display:block !important; }

/* ①②③（お約束・お約束の理由など）の帯：サイトの他の見出しと統一感を
   出すためネイビー帯＋白カードのカードデザインに統一し、
   前後の文章との間隔を確保する */
.taiou{
	background-image:none !important;
	background:#0b3d5c !important; color:#fff !important;
	height:auto !important; width:auto !important; max-width:100%;
	box-sizing:border-box; font-size:17px !important; font-weight:bold;
	padding:10px 16px !important; margin:22px 0 0 !important;
	border-radius:6px 6px 0 0;
}
.taiou-body{
	background:#f5f7fa; padding:14px 16px; margin:0 0 4px;
	border-radius:0 0 6px 6px; line-height:1.8; box-sizing:border-box;
}
/* .motoin/.eranaka は元々 .hatsu/.sengen の背景画像をよけるための
   余白（padding-top:239px 等）を持っていたが、その背景画像を実画像に
   差し替えたことで不要になったため、PC幅でも常に小さい余白に戻す */
.motoin{ padding:10px !important; width:auto !important; height:auto !important; }
.eranaka{ padding-top:10px !important; width:auto !important; }

.sp-menu-btn{ display:none; }
.sp-overlay{ display:none; }
.sp-drawer{ display:none; }
.sp-headline{ display:none; }
.sp-illust{ display:none; }
.sp-banner{ display:none; }
img.koe-icon{ display:none; }
.wake1 img, .wake2 img, .wake3 img{ display:none; }

/* ==========================================================
   PC幅でも常に適用：元々は短い画像ラベル用に決め打ちされていた
   固定の高さ（height）に、実際の長い本文を入れたことで
   テキストがはみ出しサイドバー・フッターと重なってしまう問題の修正。
   画面幅に関係なく効かせる必要があるため @media の外に置く。
   ========================================================== */
.dendou, .lego, .lego2, .coleman, .babycar, .riyou, .wake, .kaitorin,
.yoku, .qedt, .hatsu, .koe2, .koe, .twake, .takun, .tenun, .tenii,
.car, .temap, .yq, .ya, .taiou, .qinfo, .mitsuwake, .motoin, .teian,
.funa, .sengen, .step1, .step2, .step3, .step12, .step22, .step23,
.stein, .memopi, .kmemo, .uwsu, .iken, .yqa, .dendousa,
.wake1, .wake2, .wake3, .nagawaku{
	height:auto !important;
}

/* ==========================================================
   トップページ（index.html）の「安心ポイント」「梱包キットも
   お届け可能」の枠：元々PC幅では固定サイズの画像（toppoint.gif等）
   がそのまま残っていて、幅が中途半端に狭く見えていた問題の修正。
   ========================================================== */
.toppoint, .konpo{
	width:auto !important; max-width:none !important; height:auto !important;
	background:#f0f4f8 !important; box-sizing:border-box; clear:both;
	margin:14px 0 0 !important; padding:14px !important; border-radius:6px;
	background-image:none !important;
}
.toppoint h3, .konti{
	width:auto !important; height:auto !important; display:block;
	padding:10px 14px !important; margin:-14px -14px 10px !important;
	background:#0b3d5c !important; color:#fff !important;
	border-radius:6px 6px 0 0; background-image:none !important;
}

@media (max-width: 800px){

	.sp-notice{ display:block; }

	/* ---- 基本のリキッド化 ---- */
	#basebody, #contents, #topback, #toplogo, #top-h, #banner, .bannerin,
	#under-contents, #footer, #unlogo, .usatei, #main_contents, #sidecontents {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	#contents{ display:flex; flex-direction:column; }
	#main_contents{ float:none !important; margin:12px auto !important; min-height:0 !important; padding:0 12px; }
	#sidecontents{ float:none !important; margin:0 auto !important; width:100% !important; padding:0 12px; }

	/* ---- ヘッダー：ロゴ＋ハンバーガー ---- */
	#topback{ background:#F9F9F9; border-bottom:1px solid #e2e6ea; height:auto !important; }
	#top-h{ width:auto !important; height:auto !important; padding:6px 10px; }
	h1{ font-size:11px; text-align:center; color:#0b3d5c !important; }

	#toplogo{
		width:auto !important; min-width:0 !important; height:auto !important;
		background-image:none !important;
		display:flex; align-items:center; justify-content:space-between;
		padding:10px 12px;
	}
	.logo{ float:none; padding:0; }
	.logo img{ height:36px; width:auto; }
	.topsatei{
		float:none; display:block; margin-top:0;
		background:none !important; padding:0; width:auto; height:auto;
	}
	.topsatei a, .topsatei a:visited{
		background:#e8590c !important; overflow:visible; display:inline-block;
		width:auto; height:auto; padding:8px 14px !important;
		color:#fff; font-size:13px; font-weight:bold; border-radius:20px;
	}

	.sp-menu-btn{
		display:flex; flex-direction:column; justify-content:center; align-items:center;
		gap:5px; width:40px; height:40px; border:none; background:transparent;
		cursor:pointer; padding:0; flex-shrink:0;
	}
	.sp-menu-btn span{ display:block; width:26px; height:3px; background:#0b3d5c; border-radius:2px; }

	/* ---- 上部・下部のフルナビは非表示（ハンバーガーに集約） ---- */
	.menuwaku, #under-contents .unwaku{ display:none !important; }
	#banner{ height:auto !important; background:#fff !important; padding-top:0 !important; }
	.bannerin{ padding-top:0 !important; }
	.bannerin img, #banner img{ max-width:100%; width:100%; height:auto; display:block; }

	/* ---- ドロワーメニュー ---- */
	.sp-overlay{
		display:block; position:fixed; inset:0; background:rgba(0,0,0,.5);
		opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:998;
	}
	.sp-overlay.is-open{ opacity:1; pointer-events:auto; }

	.sp-drawer{
		display:block; position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px;
		background:#fff; z-index:999; transform:translateX(100%);
		transition:transform .25s ease; overflow-y:auto; box-shadow:-2px 0 12px rgba(0,0,0,.2);
	}
	.sp-drawer.is-open{ transform:translateX(0); }

	.sp-drawer-head{
		display:flex; align-items:center; justify-content:space-between;
		background:#0b3d5c; color:#fff; padding:14px 16px; font-weight:bold; font-size:15px;
	}
	.sp-close{ background:none; border:none; color:#fff; font-size:24px; line-height:1; cursor:pointer; }

	.sp-tel{
		display:block; text-align:center; background:#f5f5f5; color:#0b3d5c;
		font-size:20px; font-weight:bold; padding:14px; text-decoration:none;
	}
	.sp-cta{
		display:block; text-align:center; background:#e8590c; color:#fff;
		font-size:16px; font-weight:bold; padding:14px; margin:12px 16px; border-radius:6px;
		text-decoration:none;
	}
	.sp-drawer-sub{
		margin:14px 0 0; padding:6px 16px; font-size:12px; color:#888;
		background:#f7f7f7; border-top:1px solid #eee; border-bottom:1px solid #eee;
	}
	.sp-drawer-list{ list-style:none; margin:0; padding:0; }
	.sp-drawer-list li{ border-bottom:1px solid #eee; }
	.sp-drawer-list a{
		display:block; padding:13px 16px; color:#222; text-decoration:none; font-size:15px;
	}
	.sp-drawer-list a:active{ background:#f5f5f5; }
	body.sp-noscroll{ overflow:hidden; }

	/* ==========================================================
	   見出し・バッジは実テキスト＋CSSで再現し、写真/イラストだけを
	   等倍の画像として横に添える（画像への重ね書きは一切しない）
	   ========================================================== */
	.sp-headline, .sp-illust{ display:block; }
	.sp-banner{ display:block; max-width:100%; height:auto; margin:0 auto 10px; border-radius:6px; }

	.kantan, .kakaku, .okuru, .omona{
		width:100% !important; max-width:700px; height:auto !important;
		background:#fff !important; box-sizing:border-box;
		margin:0 auto 14px !important; padding:14px !important;
		border:1px solid #e5e5e5; border-radius:8px;
	}
	.kantan h2, .okuru h4, .kakaku h4{
		width:auto !important; height:auto !important; margin:0 0 10px !important;
		padding:10px 12px !important; font-size:clamp(14px,4vw,19px) !important;
		line-height:1.3; background:#0b3d5c !important; color:#fff !important;
		border-radius:6px;
	}

	.sp-headline{
		margin:0 0 10px; font-size:clamp(16px,5vw,22px); font-weight:bold;
		line-height:1.3; color:#222;
	}
	.sp-headline .hi{ color:#e8590c; }
	.badge-bubble{
		display:inline-block; margin-left:8px; padding:5px 10px; background:#f0f4f8;
		border:1px solid #0b3d5c; border-radius:14px; font-size:12px; font-weight:bold;
		color:#0b3d5c; vertical-align:middle;
	}
	.badge-bubble b{ color:#e8590c; font-size:15px; }

	.sp-illust{
		display:block !important; float:none !important; width:100% !important; max-width:130px !important; height:auto !important;
		margin:0 auto 12px !important; border-radius:8px;
	}

	.kantancon, .okucon{
		width:auto !important; max-width:none !important; margin:0 !important;
		padding:0 !important; font-size:clamp(13px,3.6vw,15px); line-height:1.6;
	}
	.kakakucon{
		width:auto !important; max-width:none !important; margin:0 !important;
		padding:0 !important; font-size:clamp(13px,3.6vw,15px); line-height:1.6;
	}
	.kakaku h5{
		padding:0 !important; margin:0 0 6px !important;
		font-size:clamp(13px,3.8vw,16px);
	}
	.shitase{ font-size:clamp(12px,3.4vw,14px); display:block; margin-top:8px; }

	.toppoint{
		width:auto !important; max-width:none !important; height:auto !important;
		background:#f0f4f8 !important; box-sizing:border-box; clear:both;
		margin:14px 0 0 !important; padding:14px !important; border-radius:6px;
	}
	.toppoint h3{
		width:auto !important; height:auto !important; display:block;
		padding:10px 14px !important; margin:-14px -14px 10px !important;
		font-size:clamp(13px,3.6vw,16px); background:#0b3d5c !important; color:#fff !important;
		border-radius:6px 6px 0 0;
	}

	.konpo{
		width:auto !important; max-width:none !important; height:auto !important;
		background:#f5f5f5 !important; box-sizing:border-box; clear:both;
		margin:14px 0 0 !important; padding:14px !important; border-radius:6px;
		font-size:clamp(12px,3.4vw,14px);
	}
	.konti{
		width:auto !important; height:auto !important; display:block;
		padding:10px 14px !important; margin:-14px -14px 10px !important;
		font-size:clamp(13px,3.6vw,16px); background:#0b3d5c !important; color:#fff !important;
		border-radius:6px 6px 0 0;
	}

	.omona h5{
		padding:10px 12px !important; margin:0 0 10px !important;
		font-size:clamp(14px,4vw,17px); background:#0b3d5c !important; color:#fff !important;
		border-radius:6px;
	}
	.kaitoriitem{
		width:auto !important; max-width:none !important; height:auto !important;
		margin:0; padding:0 !important; font-size:clamp(12px,3.3vw,13px); line-height:1.7;
	}

	.page-top{ position:fixed; bottom:10px; right:10px; }

	/* ---- サイド：ナビは省略（ハンバーガーと重複するため） ---- */
	.sidemenu{ display:none !important; }

	.kantansatei, .daihyou{
		width:100% !important; max-width:340px; margin:10px auto !important; height:auto !important;
		padding:0 !important; background:none !important;
	}
	.kantansatei a, .daihyou a{
		display:block !important; width:100% !important; height:auto !important;
		padding:0 !important; margin:0 !important; overflow:visible !important;
		font-size:0 !important; line-height:0 !important; color:transparent !important;
		background-size:100% 100% !important; background-position:center !important;
		background-repeat:no-repeat !important;
	}
	/* サムネイル画像自体の縦横比に合わせる（違う画像を同じ比率で伸ばさない） */
	.kantansatei a{ aspect-ratio:240/100; }
	.daihyou a{ aspect-ratio:240/167; }

	.oshirase{
		width:100% !important; height:auto !important; margin:10px auto !important;
		background:none !important; border:1px solid #ccc; border-radius:6px; overflow:hidden;
		padding:0 !important;
	}
	.oshirase h6{
		background:#4a4a4a !important; padding:12px 16px !important; margin:0 !important;
		font-size:15px;
	}
	.newdepo{ padding:12px 16px !important; margin:0 !important; font-size:13px; }

	.qedinfo{
		width:100% !important; height:auto !important; margin:15px auto !important;
		background:#fff !important; border:1px solid #ccc; border-radius:6px; box-sizing:border-box;
	}
	.qedinfo h6{ background:#4a4a4a !important; margin:0 -8px 10px !important; padding:12px 16px !important; }
	.qedinfo iframe{ width:100%; height:200px; }
	.qedinfo .qinfo{
		background-image:none !important;
		display:block; width:auto !important; height:auto !important;
		padding:0 0 4px !important; margin:14px 0 3px !important;
		font-size:13px; font-weight:bold; color:#0b3d5c;
		border-bottom:2px solid #e2e6ea;
	}

	#unlogo{ height:auto !important; padding:15px 12px; }
	.usatei{ background:none !important; height:auto !important; padding:0 !important; }
	.uninfo{ float:none; width:auto; text-align:center; padding:0 0 12px; }
	.umail{
		float:none; display:block; width:200px; margin:0 auto !important; padding:0 !important;
	}

	#footer{ height:auto; padding:10px 0; font-size:11px; }

	/* ==========================================================
	   内部ページ（初めての方・買取方法・高い理由・各商品ページ 等）共通調整
	   PC版は見出しや区切りを「背景画像」で表現しているため、そのままだと
	   固定幅・固定高さで崩れる。ここでは背景画像を外して色帯・カード表示に
	   置き換え、幅/高さをすべて可変にする。
	   ========================================================== */
	#sienavi{ padding:8px 12px; font-size:13px; }
	#sienavi .list{ width:auto !important; }
	#banner2{ height:auto !important; background:#fff !important; padding:8px 0 !important; }

	#main_contents img{
		max-width:100%; height:auto; display:block; margin:0 auto 10px; border-radius:6px;
	}
	#main_contents iframe{ width:100% !important; height:auto !important; aspect-ratio:16/9; }
	.douga{ margin-left:0 !important; }
	.qedinfo iframe, .tenpomap iframe{ aspect-ratio:auto; }

	/* 大枠セクション：背景画像＋固定幅700pxのカード → 白カードに統一 */
	.dendou, .lego, .lego2, .coleman, .babycar, .riyou, .wake, .kaitorin, .yoku, .qedt, .hatsu,
	.koe2, .koe{
		background-image:none !important;
		width:100% !important; max-width:700px; height:auto !important;
		background:#fff !important; box-sizing:border-box;
		margin:0 auto 14px !important; padding:14px !important;
		border:1px solid #e5e5e5; border-radius:8px;
	}
	.dendou h2, .lego h2, .lego2 h2, .coleman h2, .babycar h2, .riyou h3,
	.wake h2, .kaitorin h2, .yoku h2, .qedt h2, .hatsu h2,
	.koe2 h3, .koe h3, .koe h4{
		width:auto !important; height:auto !important; margin:0 0 10px !important;
		padding:10px 12px !important; font-size:clamp(14px,4vw,19px) !important;
		line-height:1.3; background:#0b3d5c !important; color:#fff !important;
		border-radius:6px; background-image:none !important;
	}
	.koeii{
		background:#fff4e8 !important; border:1px solid #f0c48a; color:#a5490a;
		width:auto !important; height:auto !important; box-sizing:border-box;
		padding:10px 12px !important; margin:0 0 12px !important;
		border-radius:6px; font-weight:bold; font-size:clamp(13px,3.6vw,15px);
	}
	img.koe-icon{
		display:block !important; float:right !important; width:56px !important; height:auto !important; margin:0 0 6px 10px !important; border-radius:8px;
	}
	.wake1 img, .wake2 img, .wake3 img{
		display:block !important; float:left !important; width:52px !important; height:auto !important; margin:2px 12px 6px 0 !important; border-radius:6px;
	}

	/* 色帯ラベル（元は白文字＋背景画像）→ ネイビーの帯に統一 */
	.twake, .takun, .tenun, .tenii, .denko, .eraba, .car, .temap, .yq, .ya{
		background-image:none !important; background:#0b3d5c !important; color:#fff !important;
		width:auto !important; height:auto !important; box-sizing:border-box;
		padding:10px 14px !important; margin:16px 0 8px !important;
		border-radius:6px; font-size:clamp(13px,3.8vw,16px) !important;
	}
	.point{
		background-image:none !important; height:auto !important;
		padding:8px 0 !important; margin-top:14px !important;
		font-size:clamp(14px,4vw,18px) !important; color:#e8590c !important;
	}

	/* 余白調整だけの装飾用クラス：背景画像を消して余白をリセット */
	.qinfo, .ckuus, .mitsuwake, .motoin, .eranaka, .teian, .tatein,
	.motoee, .noho, .kawa, .honji, .funaji, .tenpomap, .qedee, .dendousa,
	.wake1, .wake2, .wake3, .nagawaku, .memopi,
	.dendouhit, .dendoukawasaki, .funa, .sengen, .map5{
		background-image:none !important;
		width:auto !important; max-width:100% !important; height:auto !important;
		padding:10px !important; margin:10px 0 !important; box-sizing:border-box;
	}
	.uwsu, .kmemo, .iken, .yqa{
		width:auto !important; max-width:100% !important; height:auto !important;
		padding:12px !important; margin:10px 0 !important; box-sizing:border-box;
		border-radius:6px;
	}

	/* 買取ステップ（1→2→3）は横並びをやめて縦積みに */
	.step1, .step2, .step3, .step12, .step22, .step23{
		background-image:none !important; float:none !important;
		width:100% !important; height:auto !important;
		padding:14px !important; margin:0 0 10px !important;
		background:#f5f7fa !important; border-radius:8px; box-sizing:border-box;
	}
	.stein{ height:auto !important; margin:0 0 6px !important; }

	/* レゴページのバラレゴ誘導バナー：装飾用の背景画像リンクなのでモバイルでは非表示 */
	.barapo{ display:none !important; }
}