@charset "UTF-8";
/* ============================================================
   骨組み：ヘッダー・メニュー・ページ見出し・パンくず・本文とサイドメニュー・フッター
   - 値は旧 layout.css（PC）と sp.css（スマホ）と同じ。スマホを基準に書き、768px 以上で PC にする
   - 段階1は HTML を変えないので、今の ID をそのまま :where() で包んで使う（優先度は 0）
     段階2で HTML を作り直すときに、l-header などのクラス名に置き換える
   - 画像の場所は、旧 CSS の ../img/ と同じものをサイト直下からの /img/ で書いている
   - スマホのメニューの開閉は /js/sp_common.js が #mainMenu や .on を切り替えている（と推定）。
     その仕組みはそのまま使う
   ============================================================ */
@layer layout {

	/* ---------- ヘッダー ---------- */
	:where(.leadBox) { position: relative; }

	:where(#headerWrap) {
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 0 10px;
		background-color: var(--c-white);
		position: fixed;
		z-index: var(--z-header);
	}
	:where(#headerWrap)::after { content: ""; display: block; clear: both; }
	:where(#header) { width: auto; }

	:where(#headerLogo) { width: 130px; height: 40px; float: left; }

	:where(#tagline) { width: 135px; margin: 8px 0 0 5px; padding: 0; float: left; text-align: left; }
	:where(#tagline) h1,
	:where(#tagline) p {
		display: block;
		margin: 0;
		padding: 0;
		color: #000;
		font-size: 10px;
		line-height: 1.4;
		text-align: left;
	}
	:where(#tagline) p { letter-spacing: 0; }

	:where(#headerLogo2) { width: 33px; height: 40px; float: right; }
	:where(#menu) { width: 40px; float: right; }
	:where(#headerRight) { display: none; }

	/* ---------- グローバルメニュー（スマホは全画面のメニュー、PC は横並び＋プルダウン） ---------- */
	:where(#mainMenu) {
		display: none;              /* スマホでは JS で開く */
		width: 100%;
		height: auto;
		margin: 0 auto;
		position: fixed;
		top: 40px;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		background: var(--c-green-dark);
		z-index: var(--z-menu);
	}
	:where(#mainMenu) ul { width: auto; }
	:where(#mainMenu) ul li { float: none; }

	:where(#dropmenu) { width: auto; margin: 0 auto; padding: 0; }
	:where(#dropmenu) li { position: relative; z-index: 7777; text-align: center; }
	:where(#dropmenu) li a,
	:where(#dropmenu) li .inn {
		display: block;
		padding: 15px 5px;
		border-bottom: 1px solid var(--c-white);
		color: var(--c-white);
		font-size: 16px;
	}
	:where(#dropmenu) li .inn {
		background: url(/img/common/sp_open.png) no-repeat right 16px center / 16px auto;
		cursor: default;
	}
	:where(#dropmenu) li .inn.on { background-image: url(/img/common/sp_close.png); }
	:where(#dropmenu) li .ttl { position: relative; }
	:where(#dropmenu) li .ttl .ico {
		display: block;
		width: 35px;
		height: 35px;
		position: absolute;
		top: 4px;
		right: 7px;
		background: url(/img/common/sp_open.png) no-repeat center center / 16px auto;
	}
	:where(#dropmenu) li .ttl.on .ico { background-image: url(/img/common/sp_close.png); }

	/* 子メニュー */
	:where(#dropmenu) li ul {
		display: none;              /* スマホでは JS で開く */
		width: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		position: static;
		background-color: var(--c-white);
		box-shadow: var(--shadow-drop);
	}
	:where(#dropmenu) li ul li { float: none; overflow: visible; height: auto; }
	:where(#dropmenu) li ul li a {
		display: block;
		margin: 0 20px;
		padding: 18px 25px;
		border-bottom: 1px solid var(--c-line);
		background: url(/img/common/sp_icon01.png) no-repeat 10px 48% / 5px auto var(--c-white);
		color: var(--c-text);
		font-size: 16px;
		line-height: 1;
		text-align: left;
	}
	:where(#dropmenu) li ul li:last-child a { border: none; }

	/* ---------- ページ見出し（トップは #vis、ほかは #vis02） ---------- */
	:where(#vis) {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding-top: 40px;
		border-bottom: solid 1px var(--c-border-vis);
	}
	:where(#vis02) {
		width: 100%;
		max-width: 100%;
		height: 140px;
		margin: 0 auto;
		padding-top: 40px;
	}
	:where(#vis02_inner) { width: 100%; margin: 0 auto; }
	:where(#vis02_inner) h1 {
		padding: 55px 0 0 5px;
		color: var(--c-white);
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
		letter-spacing: 1px;
	}

	/* ---------- パンくず ---------- */
	:where(#breadback) { width: 100%; box-sizing: border-box; background-color: var(--c-bg-bread); }
	:where(#bread) {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 10px 0 10px 15px;
		font-size: 11px;
		text-align: left;
	}
	:where(#bread) a { color: var(--c-link); }

	/* ---------- 本文とサイドメニュー ---------- */
	:where(#contents_wrapper),
	:where(#b_contents_wrapper) {
		width: 100%;
		box-sizing: border-box;
		padding: 0;
		background: url(/img/common/contents_wrap_bg.jpg) no-repeat bottom center / contain var(--c-white);
	}
	:where(#contentsWrap),
	:where(#b_contentsWrap) { width: auto; margin: 0; }
	:where(#contents) {
		width: auto;
		height: auto;
		margin: 0;
		padding: 0 10px;
		float: none;
		line-height: 1.6;
		text-align: left;
	}
	:where(#contents_wrapper)::after,
	:where(#b_contents_wrapper)::after,
	:where(#contentsWrap)::after,
	:where(#b_contentsWrap)::after,
	:where(#contents)::after { content: ""; display: block; clear: both; }

	/* サイドメニュー */
	:where(#sideMenu) {
		width: auto;
		margin-top: -3px;
		padding: 0 10px 75px;
		float: none;
		background: var(--c-white) url(/img/common/sp_contents_wrap_bg.jpg) repeat-x center bottom / 100% auto;
	}
	:where(#sideMenu)::after { content: ""; display: block; clear: both; }
	:where(#sideMenu) ul { width: auto; margin: 0 auto 30px; padding: 0; }

	:where(#sideMenu) .ttl {
		padding: 13px 8px;
		background-color: var(--c-green-dark);
		color: var(--c-white);
		font-size: 16px;
		line-height: 1.05;
	}

	:where(#sideMenu) ul.sideBnr {
		width: auto;
		margin: 0 -10px 30px;
		padding: 1px 10px 20px;
		background-color: var(--c-bg-side-sp);
		overflow: hidden;
	}

	:where(#sideMenu) ul.sideBack01 {
		position: relative;
		border-right: solid 1px var(--c-green-dark);
		border-left: solid 1px var(--c-green-dark);
		overflow: hidden;
	}
	:where(#sideMenu) ul.sideBack01::before {
		content: "";
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		background-color: var(--c-green-dark);
	}
	:where(#sideMenu) ul.sideBack01 li {
		width: 50%;
		float: left;
		text-align: left;
		border-bottom: solid 1px var(--c-green-dark);
	}
	:where(#sideMenu) ul.sideBack01 li a {
		display: table;
		table-layout: fixed;
		width: 100%;
		height: 70px;
		box-sizing: border-box;
		padding: 3px 5px 2px;
		background: url(/img/common/sp_icon01.png) no-repeat right 6px center / 4px auto;
		color: var(--c-green-dark);
		font-size: 15px;
		line-height: 1.5;
		vertical-align: middle;
	}
	:where(#sideMenu) ul.sideBack01 li a .inn { display: table-cell; vertical-align: middle; }
	:where(#sideMenu) ul.sideBack01 li:hover { background-color: var(--c-white); }

	:where(#sideMenu) ul.sideBack02 { width: auto; margin: 11px 0 18px; padding: 0; overflow: hidden; }
	/* バナー画像は幅に関係なく block（旧 layout.css と同じ） */
	:where(#sideMenu) ul.sideBnr img,
	:where(#sideMenu) ul.sideBack02 li img,
	:where(#sideMenu) ul.sideBack03 li img { display: block; }
	:where(#sideMenu) ul.sideBack03 { display: none; }

	/* ---------- フッター ---------- */
	:where(#footerWrap) {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 11px 10px 20px;
		background: #000;
	}
	:where(#footer) { width: auto; margin: 0 auto; }
	:where(#footerWrap)::after,
	:where(#footer)::after { content: ""; display: block; clear: both; }
	:where(#footerLogo) { width: auto; height: auto; margin: 0 0 3px; float: none; }
	:where(#footerLogo) a { display: block; width: 174px; margin: 0 auto; }
	:where(#footerLogo) img { margin: 0 auto; }
	:where(#footer) address {
		display: block;
		width: auto;
		margin: 0;
		float: none;
		color: var(--c-white);
		font-size: 9px;
		font-style: normal;
		letter-spacing: 0.3px;
		text-align: center;
	}
	:where(#footerMenu) { display: none; }

	/* ページの先頭へ */
	:where(#pagetop) {
		width: 40px;
		height: 40px;
		position: fixed;
		right: 20px;
		bottom: 30px;
		z-index: var(--z-pagetop);
	}

	/* ============================================================
	   768px 以上（旧 CSS の PC 表示。幅は固定で、画面が狭いと横にスクロールする）
	   ============================================================ */
	@media (min-width: 768px) {

		/* ヘッダー */
		:where(#headerWrap) {
			min-width: var(--w-site);
			box-sizing: content-box;
			padding: 15px 0;
			position: static;
		}
		:where(#header) { width: var(--w-site); margin: 0 auto; }
		:where(#headerLogo) { width: 184px; height: 51px; }
		:where(#headerRight) { display: block; width: 430px; float: right; }
		:where(#headerLogo2) { width: auto; height: auto; float: none; }   /* 旧 CSS では PC で大きさを持たない */
		:where(#headerMenu) { width: auto; margin: 20px 0 0; padding: 0; }
		:where(#headerMenu) li a {
			margin: 0 0 0 30px;
			padding: 2px 0 0 20px;
			float: left;
			background: url(/img/common/icon_arrow01.gif) no-repeat 0 48%;
			font-size: 13px;
		}

		/* グローバルメニュー */
		:where(#mainMenu) {
			display: block !important;   /* スマホで開閉したときに JS が付けた display を打ち消す */
			min-width: var(--w-site);
			height: 70px;
			position: relative;
			top: auto;
			right: auto;
			bottom: auto;
			left: auto;
			overflow: visible;
			background: none;
		}
		:where(#mainMenu) ul { width: var(--w-site); margin: 0 auto; }
		:where(#mainMenu) ul li { float: left; }
		:where(#dropmenu) { width: var(--w-site); }
		:where(#dropmenu)::before,
		:where(#dropmenu)::after { content: ""; display: table; }
		:where(#dropmenu)::after { clear: both; }
		:where(#dropmenu) li { text-align: left; }
		:where(#dropmenu) li a,
		:where(#dropmenu) li .inn {
			display: inline;
			padding: 0;
			border-bottom: none;
			color: var(--c-text);
			font-size: inherit;
		}
		:where(#dropmenu) li .inn { background: none; cursor: auto; }
		:where(#dropmenu) li .ttl .ico { display: none; }

		:where(#dropmenu) li ul {
			display: block !important;   /* 同上 */
			width: 300px;
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 9999;
		}
		:where(#dropmenu) li ul li { overflow: hidden; height: 0; transition: 0.2s; }
		:where(#dropmenu) li:hover ul li { overflow: visible; height: 52px; }
		:where(#dropmenu) li ul li a {
			display: block;
			padding: 18px 25px 18px 30px;
			border-bottom: 1px solid var(--c-line);
			background: url(/img/common/icon_arrow01.gif) no-repeat 10px 48% var(--c-white);
			color: var(--c-text);
			font-size: 14px;
		}
		:where(#dropmenu) li ul li:last-child a { border: none; }

		/* ページ見出し */
		:where(#vis) { min-width: var(--w-wrap); height: 325px; padding-top: 0; }
		:where(#vis02) { min-width: var(--w-site); max-width: none; padding-top: 0; }
		:where(#vis02_inner) { width: var(--w-site); }
		:where(#vis02_inner) h1 { font-size: 30px; }

		/* パンくず */
		:where(#breadback) { min-width: var(--w-site); box-sizing: content-box; }
		:where(#bread) { width: var(--w-site); box-sizing: content-box; }

		/* 本文とサイドメニュー */
		:where(#contents_wrapper) { min-width: var(--w-wrap); box-sizing: content-box; padding: 0 0 110px; }
		:where(#b_contents_wrapper) { min-width: var(--w-site); box-sizing: content-box; padding: 0 0 110px; }
		:where(#contentsWrap) { width: var(--w-wrap); margin: 30px auto 0; }
		:where(#b_contentsWrap) { width: var(--w-site); margin: 30px auto 0; }
		:where(#contents) {
			width: var(--w-main);
			margin: 0 0 auto 0;
			padding: 0;
			float: right;
			line-height: inherit;
		}

		:where(#sideMenu) {
			width: var(--w-side);
			margin-top: 0;
			padding: 0;
			float: left;
			background: none;
		}
		:where(#sideMenu) ul { width: 240px; }
		:where(#sideMenu) ul.sideBnr {
			width: var(--w-side);
			margin: 0 0 40px;
			padding: 4px 0 0;
			background: none;
			overflow: visible;
		}
		:where(#sideMenu) ul.sideBnr img {
			margin: 0 auto 20px;
			box-shadow: var(--shadow-bnr);
		}

		:where(#sideMenu) ul.sideBack01 { position: static; border: none; overflow: visible; }
		:where(#sideMenu) ul.sideBack01::before { content: none; }
		:where(#sideMenu) ul.sideBack01 li { width: auto; float: none; border-bottom: solid 1px var(--c-line-side); }
		:where(#sideMenu) ul.sideBack01 li:last-child { border-bottom: none; }
		:where(#sideMenu) ul.sideBack01 li a {
			display: block;
			width: 200px;
			height: auto;
			box-sizing: content-box;
			padding: 15px 10px 15px 15px;
			background: url(/img/common/icon_arrow02.gif) no-repeat right 50%;
			font-size: inherit;
			line-height: inherit;
		}
		:where(#sideMenu) ul.sideBack01 li a .inn { display: inline; vertical-align: baseline; }
		:where(#sideMenu) ul.sideBack01 li:hover { background-color: var(--c-bg-side-hover); }

		:where(#sideMenu) ul.sideBack02,
		:where(#sideMenu) ul.sideBack03 {
			display: block;
			width: var(--w-side);
			margin: 0 0 38px;
			padding: 4px 0 0;
			overflow: visible;
		}
		:where(#sideMenu) ul.sideBack02 li img { margin: 0 auto 12px; }
		:where(#sideMenu) ul.sideBack02 li a img { box-shadow: var(--shadow-bnr); }
		:where(#sideMenu) ul.sideBack03 li img { margin: 0 auto 8px; }
		:where(#sideMenu) ul.sideBack03 li a img { margin: 0 auto; }

		/* フッター */
		:where(#footerWrap) {
			min-width: var(--w-site);
			box-sizing: content-box;
			padding: 0;
			background: url(/img/common/footer_bg.gif) repeat-x 0 0;
		}
		:where(#footer) { width: var(--w-site); }
		:where(#footerLogo) { width: 135px; height: 44px; margin: 13px 15px 13px 0; float: left; }
		:where(#footerLogo) a { display: inline; width: auto; margin: 0; }
		:where(#footerLogo) img { margin: 0; }
		:where(#footer) address {
			display: inline;
			width: 350px;
			margin: 30px 0 0;
			float: left;
			color: var(--c-footer-text);
			font-size: 11px;
			letter-spacing: inherit;
			text-align: left;
		}
		:where(#footerMenu) { display: block; width: 426px; margin: 28px 0; float: right; }
		:where(#footerMenu) ul li a {
			margin: 0 0 0 30px;
			padding: 0 0 0 19px;
			float: left;
			background: url(/img/common/icon_arrow03.gif) no-repeat 0 48%;
			color: var(--c-white);
			font-size: 13px;
		}
		:where(#footerMenu) ul li a:hover { color: var(--c-footer-text); }

		:where(#pagetop) { width: 59px; height: 59px; right: 48px; bottom: 100px; }
	}

	/* ============================================================
	   767px 以下だけ（PC では何も指定しない。画像の width / height 属性をそのまま使うため）
	   ============================================================ */
	@media (max-width: 767.98px) {
		:where(#headerLogo) img { width: 100%; }

		:where(#sideMenu) ul.sideBnr li { width: 48.83%; margin-top: 22px; float: left; }
		:where(#sideMenu) ul.sideBnr li:nth-child(2n) { float: right; }
		:where(#sideMenu) ul.sideBnr img { width: 100%; height: auto; margin: 0; box-shadow: none; }

		:where(#sideMenu) ul.sideBack02 li { width: 48.8%; margin: 10px 0 0; float: left; }
		:where(#sideMenu) ul.sideBack02 li:nth-child(2n+1) { float: right; }
		:where(#sideMenu) ul.sideBack02 li img { width: 100%; height: auto; margin: 0; }

		:where(#pagetop) img { width: 100%; height: auto; }
	}
}