@charset "utf-8";

/* スマートフォン表示（common.php の sp_enabled() が有効なときだけ読み込む） */

/* PC では非表示の部品 */
.sp_only {
	display: none;
}

@media (max-width: 767px) {

	html {
		-webkit-text-size-adjust: 100%;
	}

	/* 画面幅より外へ横スクロールさせない（左右のぶれ防止） */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
		overflow-x: clip;
	}

	body {
		font-size: 15px;
		line-height: 1.7;
		overflow-wrap: anywhere;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* 1080px 固定幅を画面幅に */
	h1,
	#container,
	#head_wrap,
	footer p,
	footer dl,
	#footmenu,
	nav,
	#headmenu,
	#slide,
	#recommend,
	#recommend ul,
	#item_list,
	#item_list ul,
	.contents,
	#sidemenu {
		min-width: 0;
		width: auto;
	}

	#container {
		padding: 0 12px 40px;
	}

	nav {
		margin: 12px 12px 10px;
		font-size: 13px;
	}

	h2 {
		font-size: 17px;
	}

	/* ヘッダー */
	header {
		background-color: #fff;
		height: auto;
		position: relative;
	}

	header h1 {
		padding: 10px 64px 8px 12px;
	}

	header h1 img {
		width: 200px;
	}

	#contact_banner {
		position: static;
		padding: 0 12px 10px;
		text-align: center;
	}

	#contact_banner .tel_box {
		width: auto;
		max-width: 340px;
		height: auto;
		min-height: 74px;
		margin: 0 auto;
		padding: 8px 14px;
		text-align: left;
	}

	header .submenu {
		display: none;
	}

	.sp_only {
		display: block;
	}

	/* メニューボタン（≡） */
	#sp_menu_btn {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: solid #1d2088 1px;
		border-radius: 6px;
		background: #fff;
		cursor: pointer;
	}

	#sp_menu_btn span,
	#sp_menu_btn span:before,
	#sp_menu_btn span:after {
		position: absolute;
		left: 11px;
		width: 20px;
		height: 2px;
		background: #1d2088;
		content: "";
		transition: transform .2s, top .2s;
	}

	#sp_menu_btn span {
		top: 20px;
	}

	#sp_menu_btn span:before {
		left: 0;
		top: -7px;
	}

	#sp_menu_btn span:after {
		left: 0;
		top: 7px;
	}

	header.menu_open #sp_menu_btn span {
		background: transparent;
	}

	header.menu_open #sp_menu_btn span:before {
		top: 0;
		transform: rotate(45deg);
	}

	header.menu_open #sp_menu_btn span:after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* グローバルメニュー：ボタンで開閉 */
	#headmenu {
		display: none;
		padding: 0;
		background: #fff;
		border-top: solid #1d2088 2px;
	}

	header.menu_open #headmenu {
		display: block;
	}

	#headmenu li {
		float: none;
		width: auto;
		margin: 0;
		border: none;
		border-bottom: solid #eee 1px;
		background-position: right 14px center;
	}

	#headmenu li.sp_only {
		display: block;
	}

	#headmenu li a {
		padding: 12px 16px;
	}

	#headmenu li span {
		border-top: none;
		font-size: 15px;
		padding-top: 0;
	}

	/* 2 カラム（本文＋サイドメニュー）を縦並びに */
	.contents,
	#sidemenu {
		float: none;
	}

	#sidemenu {
		margin-top: 30px;
	}

	/* トップページ */
	#slide {
		margin-bottom: 15px;
	}

	/* スライダーの「＜」「＞」は画面の外に出るので消す（スワイプと下の丸ボタンで操作できる） */
	#slide .slick-prev,
	#slide .slick-next {
		display: none !important;
	}

	#recommend ul {
		margin: 15px 0 30px;
	}

	#recommend li {
		float: none;
		width: auto;
		height: auto;
		margin: 0 0 12px;
		background: none;
	}

	#recommend li img {
		width: 100%;
	}

	#information ul {
		height: auto;
		max-height: 360px;
	}

	/* トップページの並び順：商品一覧・サポート → 新着・お知らせ → おすすめのコンテンツ */
	#container:has(#recommend),
	#container:has(#recommend) .contents {
		display: flex;
		flex-direction: column;
	}

	#container:has(#recommend) #sidemenu {
		order: 1;
		margin: 0 0 10px;
	}

	#container:has(#recommend) .contents {
		order: 2;
	}

	#container:has(#recommend) #information {
		order: 1;
		margin-bottom: 30px;
	}

	#container:has(#recommend) #recommend {
		order: 2;
	}

	/* 製品情報（大カテゴリ一覧） */
	.category_blc,
	.category_blc:nth-child(3n) {
		float: none;
		width: auto;
		margin: 0 0 20px;
	}

	.category_blc dd {
		min-height: 0;
	}

	/* 商品一覧 */
	#item_list li,
	#item_list li:nth-child(2n) {
		float: none;
		width: auto;
		max-height: none;
		margin: 0 0 12px;
		font-size: 14px;
	}

	#item_list .thum {
		max-width: 40%;
	}

	/* 商品ページ */
	#item img,
	.item_img img,
	.detail_img li img {
		max-width: 100%;
	}

	#item iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.description {
		overflow-wrap: anywhere;
	}

	.description table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* 会社概要・料金表の表：見出しと内容を縦に並べる */
	table.tbl,
	table.tbl tbody,
	table.tbl tr,
	table.tbl th,
	table.tbl td {
		display: block;
		width: auto;
	}

	table.tbl {
		border-right: 1px solid #ccc;
	}

	table.tbl th {
		border-right: none;
		padding: 6px 10px;
	}

	table.tbl td {
		border-right: none;
	}

	/* 各種工事・料金表（new.css はページ本文で後から読まれるので詳細度を上げる） */
	body .securityH4 {
		width: auto;
		font-size: 21px;
		margin: 20px auto;
	}

	body .securityP {
		width: auto;
	}

	body .security dt {
		font-size: 40px;
	}

	body .security dd h4,
	body .security dd p {
		margin-left: 55px;
	}

	/* お問合せフォーム */
	.contact dt {
		margin-top: 12px;
		font-weight: bold;
	}

	.contact input[type="text"],
	.contact textarea {
		width: 100%;
		box-sizing: border-box;
		padding: 8px;
		border: solid #ccc 1px;
		font-size: 16px;
	}

	.contact dd.short input[type="text"] {
		width: 28%;
	}

	.contact textarea {
		height: 10em;
	}

	/* フッター */
	footer {
		padding: 20px 12px 0;
	}

	footer dt {
		float: none;
		width: auto;
		margin-bottom: 8px;
		text-align: center;
	}

	footer dd {
		padding-left: 0;
		text-align: center;
	}

	#footmenu ul {
		border-left: none;
		text-align: center;
	}

	#footmenu li {
		display: inline-block;
		float: none;
		border-right: none;
		padding: 4px 8px;
	}

	.totop a {
		right: 12px;
	}
}