@charset "utf-8";

/*---------------------------------------------------
 * スマートフォン・タブレット対応
 * 既存の 960px 固定レイアウトはそのままに、
 * 画面が狭いときだけ1カラムへ組み替える。
 *-------------------------------------------------*/

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

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

/* 地図などの埋め込みも画面幅に収める */
iframe {
	max-width: 100%;
	box-sizing: border-box;
}

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

	body {
		background-image: none;
		background-color: #dbe6e4;
	}

	.header,
	.wrap,
	.container,
	.topic-path,
	.footer .inner,
	#multiHero,
	#multiHeroContents,
	.product_nav {
		width: auto !important;
		max-width: 960px;
		box-sizing: border-box;
	}

	/* ヘッダー：絶対配置をやめて上から順に並べる */
	.header {
		height: auto;
		background: #ffffff;
		padding: 14px 16px 0;
	}
	.header .logo,
	.header .lead,
	.header .utility,
	.header .global-nav {
		position: static;
	}
	.header .logo {
		margin-bottom: 8px;
	}
	.header .lead {
		margin-bottom: 12px;
		line-height: 1.6;
	}
	.header .utility {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-bottom: 10px;
	}
	.header .utility li,
	.footer .utility li {
		float: none;
	}

	/* グローバルナビ：画像ボタンを等幅に並べる */
	.header .global-nav {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px 4px;
		justify-items: center;
		margin: 0 -16px;
		padding: 0 16px 14px;
	}
	.header .global-nav li,
	.footer-nav li {
		float: none;
		display: block;
	}
	.header .global-nav a,
	.footer-nav a {
		display: block;
	}
	/* 画像は元の大きさより拡大しない（ぼやけと巨大化を防ぐ） */
	.header .global-nav img,
	.footer-nav img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	/* 本文まわりの背景画像（960px 前提）を外す */
	.wrap,
	.container,
	.contents {
		background-image: none;
	}
	.wrap {
		background-color: #ffffff;
		margin-top: 0;
	}
	.container {
		padding-bottom: 24px;
	}
	.topic-path {
		padding: 10px 16px 0;
	}

	/* 本文と左右のナビを縦に積む */
	.contents .inner {
		float: none;
		width: auto;
		margin: 16px;
	}
	#local-nav {
		float: none;
		width: auto;
		margin: 0 16px 24px;
	}
	#local-nav .sub {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 8px;
		align-items: start;
	}
	#local-nav .sub li {
		margin-top: 0;
	}

	/* トップページのスライド */
	#multiHero {
		padding: 12px 0;
		background-image: none;
	}
	#multiHeroContents {
		height: auto !important;
		aspect-ratio: 900 / 200;
	}
	#multiHeroContents li,
	#multiHeroContents img {
		width: 100%;
	}

	/* トップページの各ブロック */
	.box-02 .float-l,
	.box-02 .float-r,
	.box-03 .float-l,
	.box-03 .float-r {
		float: none;
		width: auto;
	}
	.box-inner02,
	.box-inner03 {
		display: grid;
		gap: 16px;
	}
	.product_nav {
		height: auto;
	}
	.product_nav ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.product_nav li {
		float: none;
	}

	/* 段組み（.layout-frame / .layout-unit / .grid-*）は入る幅まで縮める */
	.layout-frame,
	.layout-2col,
	.layout-3col {
		margin-left: 0;
	}
	.layout-unit {
		max-width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}
	.layout-frame > .layout-unit + .layout-unit {
		margin-left: 16px;
	}
	.cat01,
	.cat02 {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}


	/* 960px 幅の装飾画像（枠・見出しバー）は狭い画面では外す */
	.box-01,
	.box-02,
	.box-03,
	.box-inner01,
	.box-inner02,
	.box-inner03,
	.cat01,
	.cat02,
	.news {
		background-image: none;
	}
	.box-inner01,
	.box-inner02,
	.box-inner03 {
		padding: 0 16px;
	}
	.cat01,
	.cat02 {
		padding-bottom: 8px;
	}
	.contents h1,
	.contents .title1 {
		background-image: none;
		padding: 6px 0 6px 12px;
		border-left: 5px solid #4b9c94;
	}
	.title2,
	.title2-half {
		background-image: none;
		padding: 4px 0;
		border-bottom: 2px solid #cfdedb;
		line-height: 1.5;
	}
	.contents h3 {
		background-image: none;
		padding: 6px 0 4px;
		border-bottom: 1px solid #dde5e3;
	}

	/* トップのスライド切替ボタン */
	#multiHeroControls {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin: 8px 0 0;
	}
	#multiHeroControls li {
		float: none;
	}
	#multiHeroControls li a {
		width: 46px;
		margin-right: 0;
		background-size: 46px 11px;
	}

	/* 本文中の表と画像 */
	.contents table {
		max-width: 100%;
	}

	/* フッター */
	.footer .inner {
		height: auto;
		padding: 0 16px 20px;
	}
	.footer-nav ul {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px 4px;
		justify-items: center;
	}
	.footer address,
	.footer .utility,
	#copy {
		position: static;
	}
	.footer address {
		margin-top: 14px;
	}
	.footer address p {
		float: none;
		padding-right: 0;
	}
	.footer .utility {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	#copy {
		margin-top: 8px;
		text-align: left;
	}
}

/*   [スマートフォン]
---------------------------------------*/
@media screen and (max-width: 600px) {

	.header {
		padding: 12px 12px 0;
	}
	.header .lead {
		font-size: 11px;
	}
	.footer-nav ul,
	.product_nav ul {
		grid-template-columns: repeat(2, 1fr);
	}

	/* メニューは「⋯」ボタンに畳む */
	.nav-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 0 0 12px;
		padding: 11px 14px;
		border: 1px solid #b9ccc8;
		border-radius: 4px;
		background: #eef5f3;
		color: #17403b;
		font-family: inherit;
		font-size: 15px;
		line-height: 1.2;
		cursor: pointer;
	}
	.nav-toggle-mark {
		font-size: 20px;
		line-height: 1;
		letter-spacing: 1px;
	}
	.nav-toggle.is-open {
		background: #dceae7;
	}

	.header .global-nav {
		display: none;
	}
	.header .global-nav.is-open {
		display: block;
		margin: 0 0 12px;
		padding: 0;
		border: 1px solid #cfdedb;
		border-radius: 4px;
		overflow: hidden;
	}
	.header .global-nav.is-open li + li {
		border-top: 1px solid #e2eceA;
	}
	.header .global-nav.is-open a {
		display: block;
		padding: 13px 14px;
		text-align: left;
		background: #ffffff;
		color: #17403b;
		font-size: 15px;
		text-decoration: none;
	}
	.header .global-nav img {
		display: none;
	}
	.header .global-nav .nav-label {
		display: inline;
	}

	.product_nav img {
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.contents .inner,
	#local-nav {
		margin-left: 12px;
		margin-right: 12px;
	}
	.box-inner01,
	.box-inner02,
	.box-inner03 {
		padding: 0 12px;
	}
	.topic-path {
		padding: 10px 12px 0;
	}
	.footer .inner {
		padding: 0 12px 20px;
	}

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

	/* 表は項目ごとに縦へ積む（横スクロールを出さない） */
	.contents table,
	.contents table tbody,
	.contents table tr,
	.contents table th,
	.contents table td {
		display: block;
		width: auto !important;
		box-sizing: border-box;
	}
	.contents table th {
		text-align: left;
	}
	.contact-form th {
		padding-bottom: 2px;
	}
	.contact-form td {
		padding-top: 0;
	}
	.img-l,
	.img-r {
		float: none;
		width: auto !important;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.contact-form .w-mid,
	.contact-form .w-short {
		width: 100%;
	}
}