@charset "utf-8";
/* スマホ・タブレット（縦）表示用の調整
   PC表示（960px以上）には影響しない。各ページのCSSの後に読み込む */

/* メニュー開閉ボタン（PCでは非表示） */
#sp-menu-btn {
	display: none;
}

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

	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		overflow-x: hidden;
	}

	/* 横幅の固定を解除して画面幅に合わせる */
	div#wrapper,
	div#contents,
	div#right,
	div#main {
		width: auto !important;
		float: none !important;
		border-left: none;
		border-right: none;
	}
	div#main {
		margin: 0 5px !important;
	}
	div#main * {
		max-width: 100%;
		box-sizing: border-box;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	iframe {
		max-width: 100%;
	}

	/* ===== ヘッダー ===== */
	div#logo {
		position: relative;
		margin: 0;
		padding: 5px 60px 5px 5px;
	}
	div#logo h1 {
		float: none;
		margin: 0;
	}
	div#logo h1 img {
		width: 120px;
	}
	div#logo2 {
		float: none;
		margin-top: 5px;
		text-align: center;
	}
	div#logo2 h2#free {
		padding-left: 0;
	}
	div#logo2 h2 img {
		max-width: 80%;
	}

	/* ≡ボタン */
	#sp-menu-btn {
		display: block;
		position: absolute;
		top: 10px;
		right: 8px;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid #CCC;
		border-radius: 4px;
		background: #2221AB;
		cursor: pointer;
	}
	#sp-menu-btn span {
		display: block;
		width: 24px;
		height: 3px;
		margin: 5px auto;
		background: #FFF;
		transition: transform .2s, opacity .2s;
	}
	body.sp-menu-open #sp-menu-btn span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	body.sp-menu-open #sp-menu-btn span:nth-child(2) {
		opacity: 0;
	}
	body.sp-menu-open #sp-menu-btn span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* ===== メニュー（≡ボタンで開閉） ===== */
	nav#primary,
	div#side {
		display: none;
	}
	body.sp-menu-open nav#primary,
	body.sp-menu-open div#side {
		display: block;
	}
	/* 上部メニューは2列の格子状に並べる */
	nav#primary ul {
		width: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	nav#primary ul li,
	nav#primary #last {
		float: none;
		border: none;
		border-bottom: 1px solid #CCC;
		text-align: center;
	}
	nav#primary ul li:nth-child(odd) {
		border-right: 1px solid #CCC;
	}
	nav#primary ul li img {
		display: block;
		margin: 0 auto;
	}
	nav#secondary h2#midashi {
		background-size: 100% 100%;
	}
	div#side {
		float: none;
		width: auto;
		margin: 0 5px 10px;
	}
	div#dairi img {
		display: block;
		margin: 0 auto;
	}
	div#banner ul li {
		text-align: center;
	}

	/* ===== 本文 ===== */
	/* PC用に幅・高さ・横並びを固定した枠を、1列・高さ自動にする */
	div#main section,
	div#main div,
	div#main article {
		width: auto !important;
		height: auto !important;
		float: none !important;
	}
	/* 余白付きで幅を固定した見出し・段落は、余白を残したまま画面幅に収める */
	div#main h2,
	div#main h3,
	div#main h4,
	div#main p,
	div#main ul,
	div#main dl {
		width: auto !important;
	}
	div#main p,
	div#main li,
	div#main dd,
	div#main dt,
	div#main td,
	div#main th {
		word-break: break-all;
	}
	/* 見出しが2行になっても下の文章と重ならないよう、高さの固定を解除 */
	div#main h2,
	div#main h3,
	div#main li {
		height: auto !important;
	}
	div#main h2,
	div#main h3 {
		min-height: 23px;
	}
	div#main table {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* 写真の横に文章を回り込ませている箇所は、写真を上に置く（お客様の声・ラインナップ） */
	div.box2 img,
	img#pop {
		float: none !important;
		display: block;
		margin: 10px auto !important;
	}
	/* ラインナップの仕様欄：左右の余白で右端が切れないようにする */
	div#flyer ul {
		margin-right: 0 !important;
	}
	div#flyer ul img {
		margin-left: 0 !important;
	}
	/* 都道府県の地図（表で作られている）は画面幅に強制せず、文字を小さくして収める */
	div#main table:has(td.area01, td.area02, td.area08) {
		width: auto !important;
		margin: 0 auto !important;
	}
	div#main td[class^="area"] {
		padding: 3px 1px !important;
		font-size: 11px;
	}
	span#explanation1,
	span#explanation2 {
		padding: 0 20px !important;
	}
	/* 製品情報の製品名ボタンを途中で改行させない */
	span#type ul li {
		display: inline-block !important;
		width: auto !important;
		margin: 3px !important;
		white-space: nowrap;
	}
	/* 動画は画面幅いっぱい・16:9で表示 */
	div#main iframe {
		display: block;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		margin: 10px 0 !important;
	}

	/* ===== トップページ ===== */
	/* メイン画像：背景を画面幅に合わせ、キャッチコピーを画像の下部に重ねる */
	section#main2 {
		display: flex !important;
		align-items: flex-end;
		min-height: 46vw;
		background-size: cover;
		background-position: 20% center;
	}
	section#main2 h2 {
		float: none;
		margin: 10px;
		font-size: 13px;
	}
	/* スライド表示の特長リストは「製品について」と同じ内容のため非表示 */
	section#main2 ul {
		display: none;
	}
	/* 「詳細はこちら」ボタンを途中で改行させない */
	section#info span {
		width: auto !important;
		white-space: nowrap;
	}

	/* ===== フォーム ===== */
	div#main form table th,
	div#main form table td {
		display: block;
		width: auto !important;
		text-align: left;
	}
	div#main form input[type="text"],
	div#main form select,
	div#main form textarea {
		width: 100%;
		font-size: 16px; /* iPhoneで入力時に拡大されないよう16px以上にする */
		padding: 6px;
	}
	form input#kakunin {
		display: block;
		margin: 20px auto !important;
		width: 60% !important;
		height: 44px !important;
	}

	/* ===== フッター ===== */
	footer {
		height: auto;
		padding: 20px 0;
	}
}