@charset "utf-8";

/*---------------------------------------------------
 * スマートフォン・タブレット対応
 * 既存の 960px 固定レイアウトはそのままに、
 * 画面が狭いときだけ1カラムへ組み替える（1001px 以上は従来どおり）。
 *
 *   1000px 以下 … 固定幅を解除し、本文と右の案内欄を縦に積む
 *    600px 以下 … メニューを「⋯ Menu」ボタンに畳み、段組み・表を1列に
 *
 * メニューの開閉と図解の縮小は common/js/responsive.js が行う。
 *-------------------------------------------------*/

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

/* スマートフォン用メニューのボタンと文字ラベル（狭いときだけ出す） */
.nav-toggle,
.nav-label {
	display: none;
}

/*   [タブレット以下：960px の固定幅を解除]
---------------------------------------*/
@media screen and (max-width: 1000px) {

	body {
		background: #c2d2d0;
	}
	.wrap {
		background-image: none;
	}

	.header,
	.container,
	.footer {
		width: auto !important;
		max-width: 960px;
		box-sizing: border-box;
	}

	/* ヘッダー：絶対配置をやめて上から順に並べる */
	.header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px 16px;
		height: auto;
		padding: 14px 12px 12px;
		background: #ffffff;
	}
	.header .logo,
	.header .utility,
	.header .gnavi,
	.header .contact {
		position: static;
	}
	.header .logo {
		flex: 1 1 auto;
		margin: 0;
	}
	.header .logo img {
		display: block;
		width: 220px;
	}
	.header .contact {
		flex: 0 0 auto;
		margin: 0;
	}
	.header .contact img {
		display: block;
		width: 150px;
	}
	.header .utility {
		order: 3;
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 4px 16px;
	}
	.header .utility li {
		float: none;
		margin-left: 0;
	}

	/* グローバルナビ：画像ボタンを3列に並べる */
	.header .gnavi {
		order: 4;
		flex: 1 1 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
	}
	.header .gnavi li {
		float: none;
		display: block;
	}
	.header .gnavi a {
		display: block;
		background: #f4f8f8;
	}
	/* 画像は元の大きさより拡大しない（ぼやけと巨大化を防ぐ） */
	.header .gnavi img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	/* 本文まわり：960px 前提の背景画像を外し、白い面にする */
	.container {
		margin: 12px auto 0;
		background: #ffffff;
		border: 1px solid #b7cbc9;
		border-radius: 4px;
	}
	.container .inner {
		display: flow-root;
		background: none;
		padding-bottom: 20px;
	}
	.container .topicpath {
		position: static;
		height: auto;
		margin: 0;
		padding: 10px 16px 0;
		line-height: 1.6;
	}
	.contents,
	.sidebar {
		float: none;
		display: block;
		width: auto !important;
		margin: 0;
		box-sizing: border-box;
	}
	.contents {
		padding: 14px 16px 0;
		overflow-wrap: anywhere;
	}
	.sidebar {
		padding: 24px 16px 0;
		max-width: 480px;
	}
	/* 右の案内欄：215px 幅の枠画像をやめ、線の枠にする */
	.sidebar .lnavi,
	.sidebar .lnavi.associated-products {
		padding-bottom: 4px;
		background: #ffffff;
		border: 1px solid #c9dada;
		border-radius: 4px;
	}
	.sidebar .lnavi h2 {
		padding: 0;
		background: #5b9aa0;
		border-radius: 3px 3px 0 0;
	}
	.sidebar .lnavi h2 img {
		display: block;
	}
	.sidebar .lnavi h3,
	.sidebar .lnavi li,
	.sidebar .lnavi li.last {
		background-image: none;
	}
	.sidebar .lnavi h3 {
		background-color: #eef4f4;
	}
	.sidebar .lnavi li a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.sidebar .lnavi .lnavi-bottom {
		display: none;
	}

	/* 見出し：960px / 700px 幅の背景画像を線に置き換える */
	.title1 {
		min-height: 0;
		margin: 0;
		padding: 6px 0 8px 12px;
		background: none !important;
		border-left: 4px solid #168f95;
		border-bottom: 1px solid #c9dada;
		line-height: 1.35;
	}
	.title2 {
		padding: 8px 10px;
		background: #f1f6f6 !important;
		border: 1px solid #d3e2e2;
		border-left: 4px solid #4ba2b5;
	}
	.title3 {
		padding: 6px 0 6px 5px;
		background: none;
		border-bottom: 2px solid #c9dada;
	}

	/* トップページ */
	.container .inner .keyv {
		margin: 0;
		padding: 16px 16px 0;
		background: none;
	}
	.container .inner .keyv .bottom {
		padding: 0;
		background: none;
	}
	.contents .productList {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 10px;
		margin: 15px 0 0;
	}
	.contents .productList li,
	.contents .productList li.lastChild {
		float: none;
		margin: 0;
	}
	.contents .productList img {
		display: block;
		width: 100%;
		max-width: 290px;
		margin: 0 auto;
	}
	/* トップページは css/top.css が 960px 幅の背景を強い指定で敷いているので、同じ強さで外す */
	html body .container .inner {
		background: none;
	}
	.product {
		padding: 0;
		background: none;
	}
	.productbg {
		width: auto;
		height: 12px;
		background: none;
	}

	/* 製品一覧（画像＋説明の2列カード） */
	.index {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 16px 24px;
		padding: 0;
	}
	.index dl,
	.index dl.float-l,
	.index dl.float-r {
		float: none;
		display: block;
		width: auto;
	}
	.index dd {
		display: flow-root;
	}
	.index dd .description {
		float: none;
		width: auto;
		margin-left: 92px;
	}

	/* 段組み */
	.layout-frame {
		display: flow-root;
	}

	/* 表：はみ出す分は表の中で横スクロール */
	.contents table {
		width: auto;
		max-width: 100%;
	}

	/* 拠点の地図（ポップアップ内） */
	.detailBox {
		width: auto;
		max-width: 700px;
		padding: 0 10px;
	}
	.detailBox #map {
		width: 100%;
		height: 60vw;
		max-height: 450px;
	}

	/* フッター */
	.footer {
		margin: 12px auto 0;
		padding: 0 12px 16px;
		background: none;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 20px;
	}
	.footer .fnavi {
		flex: 1 1 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		height: auto;
	}
	.footer .fnavi li {
		float: none;
	}
	.footer .fnavi img {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
	}
	.footer .futility,
	.footer .contact,
	#copy {
		position: static;
	}
	.footer .futility {
		order: 2;
		flex: 1 1 100%;
		margin: 0;
	}
	.footer .futility li {
		display: inline-block;
		margin-bottom: 4px;
	}
	.footer .address {
		order: 3;
		flex: 1 1 260px;
		padding: 0;
	}
	.footer .contact {
		order: 4;
		align-self: center;
		margin: 0;
	}
	#copy {
		order: 5;
		flex: 1 1 100%;
		margin: 0;
	}
}

/*   [スマートフォン：メニューを畳み、1列にする]
---------------------------------------*/
@media screen and (max-width: 600px) {

	body {
		font-size: 15px;
	}

	.header {
		padding: 10px 12px;
		gap: 8px 10px;
	}
	.header .logo img {
		width: 180px;
	}
	.header .contact img {
		width: 120px;
	}
	.header .utility {
		justify-content: flex-start;
		font-size: 13px;
	}

	/* 「⋯ Menu」ボタン */
	.nav-toggle {
		order: 4;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-left: auto;
		padding: 6px 14px;
		border: 1px solid #98afab;
		border-radius: 999px;
		background: #ffffff;
		color: #214145;
		font: bold 14px/1.4 sans-serif;
		cursor: pointer;
	}
	.nav-toggle-mark {
		font-size: 18px;
		line-height: 1;
	}
	.nav-toggle.is-open {
		background: #168f95;
		border-color: #168f95;
		color: #ffffff;
	}
	.nav-toggle:focus-visible {
		outline: 3px solid #1665be;
		outline-offset: 2px;
	}

	/* メニュー本体：画像ではなく文字のリンクを縦に並べる */
	.header .gnavi {
		order: 5;
		display: none;
		grid-template-columns: 1fr;
		gap: 0;
		border-top: 1px solid #d3e2e2;
	}
	.header .gnavi.is-open {
		display: grid;
	}
	.header .gnavi a {
		padding: 12px 6px;
		border-bottom: 1px solid #d3e2e2;
		background: none;
		color: #214145;
		text-decoration: none;
		font: bold 15px/1.4 sans-serif;
	}
	.header .gnavi img {
		display: none;
	}
	.header .gnavi .nav-label {
		display: block;
	}

	.contents {
		padding: 12px 12px 0;
	}
	.contents p,
	.contents ul,
	.contents dl,
	.contents ol,
	.contents table {
		margin-left: 0;
		margin-right: 0;
	}
	.title1 {
		font-size: 130%;
	}

	/* 回り込み画像は中央に単独で置く */
	.img-l,
	.img-r,
	.float-l > img,
	.float-r > img {
		float: none;
		display: block;
		margin: 10px auto;
	}

	/* 段組みは1列 */
	.layout-unit,
	.col-2,
	.col-3,
	.col-4 {
		float: none !important;
		width: auto !important;
		margin-left: 0 !important;
	}

	/* 表は表ごと横スクロール */
	.contents table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.contents table th,
	.contents table td {
		word-break: normal;
	}

	.index {
		grid-template-columns: 1fr;
	}

	.footer .fnavi {
		grid-template-columns: repeat(2, 1fr);
	}

	/* お問い合わせフォーム：表を縦積みにする */
	.contact-form table,
	.contact-form tbody,
	.contact-form tr,
	.contact-form th,
	.contact-form td {
		display: block;
		width: auto !important;
	}
	.contact-form table {
		overflow: visible;
		margin: 15px 0 0 !important;
	}
	.contact-form th {
		padding: 10px 8px 4px;
		border: 0;
	}
	.contact-form td {
		padding: 4px 8px 12px;
	}
	.contact-form .w-mid,
	.contact-form .w-short {
		width: 100%;
	}
	.cf-steps li {
		font-size: 12px;
		padding: 8px 2px;
	}
	.cf-actions button + button {
		margin: 12px 0 0;
	}
	.cf-btn {
		width: 100%;
	}
	.cf-consent,
	.cf-summary,
	.cf-alert,
	.cf-done {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* 製品動画（YouTube の埋め込み）：幅に合わせて 16:9 で縮める */
.video {
	display: inline-block;
	width: 100%;
	max-width: 575px;
}
.video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* 仕様表のポップアップ（he_detail.html）など、表だけを横スクロールさせる枠 */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 600px) {
	body > h1 { font-size: 120%; }
}