@charset "utf-8";

/* ------------------------------------------- */
/* 木村グリーンメンテナンス様サイト用メインCSS */
/* ------------------------------------------- */
/* Modified : 2025/02/20 22:03 */

/* ――――――――――― */
/* ■全環境用のベースCSS  */
/* ――――――――――― */

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-family: 'M PLUS 1p',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
		margin: 0;
		padding: 0;
		color: #373d3f;
		background-color: #fff;
		line-height: 1.4;
		-webkit-text-size-adjust: 100%;
	}

		/* ▽消極的な改行制御区間 */
		i {
			font-style: normal;
			display: inline-block;
		}

		/* ▽画面幅に応じて自動縮小する画像 */
		.autoResize {
			max-width: 100%;
		}

		/* ▽リンク配色 */
		a {
			text-decoration: none;
			color: #666666;
		}
		a:visited {
			color: #838d91;
		}
		a:hover {
			opacity: 0.5;
		}

		/* …………… */
		/* ▼汎用装飾 */
		/* …………… */

		/* 横長リンクボタン */
		a.oblongButton {
			display: block;
			width: 220px;
			background-repeat: no-repeat;
			background-size: contain;
			margin: 0 auto;
			box-sizing: border-box;
			line-height: 1;
			font-size: 1.15em;
			color: white;
		}

			/* 暗青色ボタン */
			.oblongButton.blueButton {
				background-color: #006680;
				border-radius: 14px;
				text-align: center;
				padding: 0.67em;
			}

				.contactButtonGreenLink {
					background-image: url("/imgs/btn_otoiawaseGR.png");
					padding: 35px 0 0 56px;
					height: 64px;
				}


	/* ================================== */
	/* ▼トップページ上部専用レイアウト枠 */
	/* ================================== */
	.topHeaderGroup {
		max-width: 900px;
		margin: auto;
		padding: 0;
		position: relative;
	}

	/* ============================= */
	/* ▼TOPのみ：スライドショー領域 */
	/* ============================= */
	.topSlideshowArea {
		height: 100vw;	/* PCと同じ縦横比なら calc( 100vw / 1.494 )  */
		margin: auto;
		overflow: hidden;
	}
	.main_imgM {
		opacity: 0;
		width:100%;
		height:auto !important;
	}

	/* ========================= */
	/* ▼TOPのみ：上部ガイド区画 */
	/* ========================= */
	.topGuideArea {
		margin: 0;
		padding: 0;
		background-image: url("/imgs/img_leaf01.png");
		background-repeat: no-repeat;
		background-size: cover;
		height: calc( 100vh - 100vw );		/* 変数が使えないブラウザのためのフォールバック */
		height: calc( calc(var(--vh, 1vh) * 100) - 100vw );		/* 注意：このCSS変数「--vh」はJavaScript側で計算して代入される */
		position: relative;
	}
		.topGuideInside {
			margin: 0;
			padding: 1em;
			background: linear-gradient(0deg, transparent, transparent 50%, white);		/* 半分から上を「透明から白」へグラデーション */
			height: 100%;
		}
		.topGuideInside .bothGuides > p {
			margin: 0;
			font-weight: bold;
			font-size: 1.18em;
			line-height: 1.75;
			/* text-shadow: 1px 1px 1px white; */
		}
			.topGuideInside .topTransparentLeafBox {
				display: none;
			}
			.bothGuides {
				margin: 0;
				padding: 0;
				position: relative;
				z-index: 110;
				/* bottom: calc( -1 * 100vh + 670px ); */
				/* 画面が低くなるほど、topをマイナスにしたい。Viewport heightが636pxのとき -52px で、画面が低くなるほど、低くなったピクセル分だけマイナス値にする。 */
				top: calc( -50px + ( var(--vh, 1vh) * 100 - 636px ));
			}
				.bothGuides p.firstGuide {
					padding: 0.75em 0.25em;
					background-color: rgba( 255,255,255,0.6 );
					font-size: 1em;
					line-height: 1.5;
				}
				.bothGuides p.secondGuide {
					padding: 10px 0;
					text-align: center;
				}

			/* 冒頭リンクボタン */
			.topGuideInside > .linkBox {
				position: absolute;
				margin: 0;
				padding: 0;
				bottom: 2em;
				right: 0;
			}
				.contactButtonLink {
					background-image: url("/imgs/btn_otoiawaseYE.png");
					padding: 35px 0 0 56px;
					height: 64px;
				}

	/* ========================= */
	/* ▼ページ全体：contactPage */
	/* ========================= */
	body.contactPage {
		background-color: #fffee6;
	}

		/* お問い合わせページではヘッダロゴを非表示にする */
		body.contactPage h1 {
			display: none;
		}
		body.contactPage .headbox {
			min-height: 0;
		}

		/* 電話領域 */
				.telContactArea .contactTelBox a {
					color: #008066;
				}

	/* ====================== */
	/* ▼ヘッダ区画：deepPage */
	/* ====================== */
	.deepPage .headbox {
		min-height: 120px;
		box-sizing: border-box;
	}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */

		/* -------------- */
		/* ▼上端ロゴ領域 */
		/* -------------- */
		h1 {
			margin: 0;
			width: 100px;
			height: 100px;
			position: absolute;
			top: 7px;
			left: 7px;
			z-index: 100;
			background-color: rgba(255,255,255,0.55);
			border-radius: 50%;
			padding: 10px;
		}
			h1 a {
				display: block;
				padding: 0;
			}
			h1 img {
				width: 100%;
				height: auto;
				display: block;
			}

		/* ----------------------------------- */
		/* ▼ドロワーメニュー(PC/モバイル兼用) */
		/* ----------------------------------- */
		.drawerMenu * {
			margin: 0;
			padding: 0;
			outline: none;
			border: none;
			font: inherit;
			font-family: inherit;
			font-size: 100%;
			font-style: inherit;
			font-weight: inherit;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-align: left;
			text-decoration: none;
			list-style: none;
		}

			/* 表示ページによる場合分け */
			.top-only { display: none;  }
			.not-top  { display: block; }
			.homePage .top-only { display: block; }
			.homePage .not-top  { display: none;  }

			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBg {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 999;
				background-color: rgba(255, 255, 255, 0.5);
				display: none;
				top: 0;
				left: 0;
			}
			.drawerMenu .drawerBtn {
				display: block;
				background: none;
				border: none;
				width: 31px;
				height: 31px;
				letter-spacing: 0.1em;
				cursor: pointer;
				position: fixed;
				top: 18px;		/* ボタンの配置(上) */
				right: 4px;		/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
				border-radius: 50%;
				background-color: rgba(205, 205, 205, 0.85);		/* 3本線枠の背景色 */
				padding: 6px;					/* 3本線周囲の余白量 */
				box-sizing: content-box;
			}
			.drawerMenu .drawerBtn.active { padding: 6px 3px 6px 9px; }	/* クロスする場合の3本線周囲の余白量 */
			.drawerMenu .drawerBtn.active .drawerBar {	width: 20px; transform-origin: left center; }	/* 3本線がクロスする場合の長さ */
			.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(45deg); }
			.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
			.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-45deg); }
			.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
			.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
			.drawerMenu .drawerBar {
				display: block;
				height: 3px;			/* 3本線の太さ */
				margin: 4px 6px;		/* 3本線の「上下間隔」と「横の長さ」 */
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: #276490; } /* 文字色 */
			.drawerMenu .drawerBtn .drawerBar { background-color: #000; } /* バーの色(元:#276490) */

			.drawerMenu .drawerBtn.active .drawerBar { background-color: white; }

			/* ▼ドロワーボタン下のラベル */
			.drawerMenu .drawerText {
				text-align: center;
				font-size: 10px;
			}
			.drawerMenu .drawerLabelClose {
				letter-spacing: 0.08em;
				display: none;
			}
			.drawerMenu .drawerLabelMenu {
				display: block;
			}

			/* ▼ドロワーメニュー本体(ラッパー) */
			.drawerMenu .drawerNaviWrapper {
				background-color: rgba(56,51,64,0.9);	/* 重なるメニューの背景色 */
				width: 300px;								/* 重なるメニューの横幅 */
				height: 100%;
				transition: all 0.2s;
				transform: translate(312px, 0);				/* 初期状態では、画面外に移動させておく： (0, -100%) なら上から下へ現れる */
				position: fixed;
				top: 0;
				right: 0;
				z-index: 1000;	/* 最前面表示 */
			}
			.drawerMenu .drawerNaviWrapper.open {
				transform: translate(0);					/* openクラスが付加されたら、元の位置に戻す */
			}

			/* ▼ドロワーメニュー本体 */
			.drawerMenu .drawerNaviList {
				padding: 0px 6px 3px;				/* メニューの動的な表示開始位置を調整する際は、padding-topの値を変更する。 */
			}

			/* ▼ドロワーメニュー項目 */
			.drawerMenu a {
				color: inherit;
				text-decoration: none;
				display: block;
				margin: 3px 0;
				padding: 6px 18px;
				border-radius: 0.5em;
				/* border-bottom: 1px dashed #ccc; */
			}
			.drawerMenu a,
			.drawerMenu a.visited {
				color: white;
			}
			.drawerMenu a:hover {
				background-color: snow;
				color: #383d40;
				opacity: 0.9;
			}
				/* ▼字下げ項目 */
				.level2nd {
					text-indent: 1em;
				}
				/* ▼センタリング項目 */
				.indipendentItem {
					text-align: center;
				}

			/* ▼ドロワーメニュー内部上端のロゴ */
			.logoOnMenu {
				margin: 0;
			}
				.drawerMenu .logoOnMenu a {
					display: inline-block;
				}
				.drawerMenu .logoOnMenu a:hover {
					background-color: inherit;
					opacity: 0.75;
				}

			/* ▼アイコンor短リンク */
			.drawerMenu .iconLinkItems {
				text-align: center;
				margin-top: 0.5em;
			}
			.drawerMenu .iconLinkItems a {
				display: inline-block;
				padding: 0.25em 0.5em;
					vertical-align: middle;
			}
			.drawerMenu .iconLinkItems a:hover {
				background-color: black;
				color: white;
			}
				.iconLinkItems img {
					display: block;
					height: 1.3em;
					width: auto;
				}

	/* ==================== */
	/* ▼パンくずリスト区画 */
	/* ==================== */
	.breadcrumbsBox {
		margin: 9px auto 1em;
		font-size: 0.67em;
		max-width: 90%;
		position: relative;
	}
		.breadcrumbs {
			display: inline-block;
			background-color: #239238;
			color: white;
			padding: 0.25em 0.75em;
			position: relative;
			z-index: 10;
		}
			.breadcrumbs a {
				color: white;
			}
		.breadcrumbsBar {
			border: 2px solid gray;
			height: 4px;
			box-sizing: border-box;
			position: absolute;
			top: 0.3em;
			width: 100%;
			z-index: 5;
		}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
	main {
		margin: 0;
		padding: 0;
	}

		/* ▼メインコンテンツ汎用ボックス */
		.mainBox {
			margin: 0 auto;
			padding: 1px 0;
			max-width: 900px;
			background-color: white;
		}

		/* ……………… */
		/* ▼汎用見出し */
		/* ……………… */
		h2 {
			font-weight: normal;
			font-size: 1.75em;
			text-align: center;
			margin: 0 auto;
			padding: 2em 0 1em;
			line-height: 1.3;
		}

			/* 見出し上部のアイコン */
			.headerIcon {
				display: block;
				margin: 0 auto 0.25em;
				height: 24px;
				width: auto;
			}

		/* …………………… */
		/* ▼サービス枠領域 */
		/* …………………… */
		.servicesArea {
		}

			/* －－－－－－－－ */
			/* ▼サービス１項目 */
			/* －－－－－－－－ */
			.oneKgmService {
				margin: 0;
				padding: 1em 0 3.5em;
			}

				/* 見出し・料金 */
				.oneKgmHead,
				.oneKgmPrice {
					text-align: center;
					font-size: 1.18em;
					margin: 0;
				}
					.oneKgmHead img {
						width: 130px;
						height: auto;
						padding-bottom: 7px;
						margin-bottom: 7px;
					}
					.oneKgmHead strong {
						display: block;
					}

				.oneKgmPrice {
					margin: 0.25em 0;
					font-weight: bold;
				}

				/* 概要文章 */
				.oneKgmGuide {
					max-width: 500px;
					margin: 2em auto 1em;
					padding: 0 1em;
					line-height: 1.4;
					text-align: justify;
				}

				/* もっと見るリンク */
				.moreReadLinkBox {
					margin: 2em 0 1em;
					text-align: center;
				}
					.moreButton {
						display: inline-block;
						padding: 0 0.5em 0.5em;
						min-width: 15.5em;
						box-sizing: border-box;
						border: 3px solid #373d3f;
						border-radius: 10px;
						background-color: white;
						font-weight: bold;
						font-size: 0.9em;
					}
						.plusMark {
							color: #c95514;
						}

						.subTinyText {
							font-size: 0.8em;
							display: block;
							margin: 0.67em 0 0 0;
							line-height: 1.2;
						}

		/* ………………………… */
		/* ▼７つのお約束枠領域 */
		/* ………………………… */
		.promisesArea {
		}
			.primisesCover {
			}

				/* －－－－－－－－ */
				/* ▽お約束ボックス */
				/* －－－－－－－－ */
				.onePromiseBox {
					display: flex;
					margin: 0 0 50px 0;
				}
				.onePromiseBox:nth-of-type(2n+1) { flex-direction: row-reverse; }	/* 奇数番目 */
				.onePromiseBox:nth-of-type(2n)   { flex-direction: row; }			/* 偶数番目 */

					/* 見出し＋文章枠(段) */
					.onePromiseHead {
						flex: 1;
					}
						.onePromiseHead h3 {
							box-sizing: border-box;
							margin: 0;
							padding: 42px calc( ( 100% - 4.3em ) / 2 + 4px ) 0 calc( ( 100% - 4.3em ) / 2 - 4px );
							height: 134px;
							text-align: center;
							font-size: 1.05em;
							line-height: 1.15;
							color: #008066;
							background-image: url('/imgs/img_kirikabu.png');
							background-repeat: no-repeat;
							background-size: contain;
							background-position: top center;
						}

						/* 本文 */
						.onePromiseHead p {
							text-align: justify;
							padding-right: 0.5em;
						}

						.onePromiseBox:nth-of-type(2n+1) .onePromiseHead p { padding-right: 0.5em; }	/* 奇数番目 */
						.onePromiseBox:nth-of-type(2n)   .onePromiseHead p { padding-left:  0.5em; }	/* 偶数番目 */

					/* 写真枠(段) */
					.onePromisePhoto {
						flex: 1;
						position: relative;
						background-image: url('/imgs/line_GRn.png');
						background-repeat: no-repeat;
						background-size: auto 216px;
						background-position: left top;
						text-align: center;
					}

						/* 写真BOX */
						.promiseImg {
							margin: 0;
							box-sizing: border-box;
							padding-top: 40px;
						}
							.promiseImg img {
								width: 125px;
								height: auto;
							}

						/* 数字BOX */
						.promiseNum {
							margin: 0;
							box-sizing: border-box;
							position: absolute;
							top: -10px;
							right: 0;
						}
							.promiseNum img {
								display: block;
								height: 100px;
								width: auto;
							}

					/* 偶数番目の画像調整(左右反転) */
					.onePromiseBox:nth-of-type(2n) .onePromisePhoto {
						transform: scale(-1, 1);
					}
					.onePromiseBox:nth-of-type(2n) .promiseImg {
						transform: scale(-1, 1);
					}
					.onePromiseBox:nth-of-type(2n) .promiseNum {
						transform: scale(-1, 1);
					}

		/* ………………………… */
		/* ▼安心の低価格枠領域 */
		/* ………………………… */
		.priceArea {
			position: relative;
		}

			.priceArea h2 {
				padding-top: 0;
			}

			.bigTree {
				margin: auto;
				padding: 0;
				max-width: 570px;
			}

			.priceGuide,
			.priceBox {
				width: 300px;
				box-sizing: border-box;
				margin: auto;
				padding: 1em;
			}

			.priceBox {
				font-weight: bold;
				text-align: center;
				font-size: 1.1em;
			}

		/* ……………………… */
		/* ▼作業の流れ枠領域 */
		/* ……………………… */
		.flowArea {
			position: relative;
		}

			.flowCover {
				background-color: #fffee6;
				padding: 0 0 0 1em;
			}

			/* 流れリスト */
			.flowList {
				margin: 0;
				padding: 0 0 0 60px;
				list-style-type: none;
				background-image: url("/imgs/line_Gray.png");
				background-repeat: no-repeat;
				background-size: 6px;
				background-position: top 55px left 28px;
			}

				/* 流れ１項目 */
				.oneFlowBox {
					margin: 0 0 1.5em 0;
					padding: 0;
					position: relative;
				}

				/* 流れ見出し */
				.oneFlowBox h3 {
					margin: 0;
					padding: 0.6em 0 0.3em 0.6em;
					color: #c18040;
					font-size: 1.15em;
					line-height: 1.1;
				}

				/* 流れ番号(※マークアップは見出しの内側) */
				.oneFlowBox h3 .flowNum {
					display: block;
					position: absolute;
					top: 0;
					left: -60px;
					box-sizing: border-box;
					width: 60px;
					height: 60px;
					background-image: url('/imgs/img_maru.png');
					background-repeat: no-repeat;
					background-size: contain;
					background-position: top center;
					color: white;
					font-weight: bold;
					font-size: 30px;
					text-align: center;
					line-height: 54px;
				}

					/* 流れ本文 */
					.flowGuide {
						background-color: white;
						margin: 0;
						padding: 0.2em 2em 0.2em 0.75em;
						font-size: 0.9em;
					}

					/* 流れ本文内リスト */
					.flowGuide > ul {
						margin: 0.5em 0;
						padding: 0 0 0 1.5em;
						list-style-type: disc;
					}

				/* 流れ最終枠 */
				.oneFlowBox.lastBox {
					margin: 0 1em 0 -60px; 	/* 0 -10px 0 -70px; */
					padding: 1em 0;
					background-image: url('/imgs/bg_GR.jpg');
					color: white;
				}
				.oneFlowBox.lastBox h3 {
					color: white;
					margin: 0;
					padding: 0.5em 0;
					text-align: center;
				}
					.oneFlowBox.lastBox p {
						margin: 1em 2.5em;
					}

		/* ……………………… */
		/* ▼ごあいさつ枠領域 */
		/* ……………………… */
		.greetingArea {
		}

			.greetingCover {
				margin: 0;
				padding: 70px 0 0 0;
				background-image: url('/imgs/bg_BL.jpg');
				position: relative;
			}
				.greetingInside {
					background-color: #239238;
					color: white;
					padding: 0 15% 1.5em;
				}
					/* 社長写真枠 */
					.ceoPhotoBox {
						position: absolute;
						top: 0;
						right: 0;
						margin: 0;
						padding: 0;
						width: 188px;
						height: auto;
					}

					/* 社長名前 */
					.ceoName {
						padding: 2em 1em;
						font-size: 1.1em;
					}

					/* あいさつ本文 */
					.ceoGreeting {
						line-height: 1.6;
						text-align: justify;
					}

					/* 本文下部マーク群 */
					.circleArrowSigns {
					}
						.circleArrowSigns span {
							display: block;
							width: 2em;
							font-size: 1.3em;
							text-align: center;
							margin: auto;
						}
						.circleArrowSigns span.arrow {
							font-size: 1.5em;
						}

		/* …………………… */
		/* ▼対応地域枠領域 */
		/* …………………… */
		.regionArea {
		}

			/* 見出し（地図画像など） */
			.regionArea h3.regionMap {
				margin: 0 auto;
				padding: 0;
				max-width: 570px;
			}

			/* 本文 */
			.regionGuide {
				margin: 1em 1.5em 1em 2.5em;
				padding: 0 0 1em 0;
			}

		/* ……………… */
		/* ▼NEWS枠領域 */
		/* ……………… */
		.newsArea {
			background-color: white;
			padding: 1px;
		}

			.newsCover {
				background-image: url('/imgs/bg_BL.jpg');
				margin: 4em 10%;
				padding: 1px;
				border-radius: 0.65em;
			}

			/* メガホン付き */
			h2.withMegaphone {
				background-image: url("/imgs/ico_news.png");
				background-repeat: no-repeat;
				background-position: bottom 0px left 45px;
				background-size: 50px;
				padding: 10px 0 0 0;
				font-size: 1.4em;
				font-weight: bold;
				max-width: 275px;
			}

			/* てがろぐ合成部分 */
			.tegalogEmbedArea {
				margin: 0.75em;
				padding: 1px 1px 1em 1px;
				background-color: white;
				border-radius: 0.65em;
			}
				/* 投稿日付 */
				.postDate {
					margin: 0.5em 0;
					text-align: right;
					font-weight: bold;
				}
				/* 投稿本文 */
				.postMain {
					margin: 0;
					padding: 0 0.5em;
					word-break: break-all;
				}

				/* 下部てがろぐリンクボタン部分 */
				.moreNewsButtonBox {
					position: relative;
					top: 58px;
				}

		/* ……………………… */
		/* ▼ループ写真枠領域 */
		/* ……………………… */
		.loopSlideshowArea {
		}

		/* …………………… */
		/* ▼無料見積枠領域 */
		/* …………………… */
		.freeEstimateArea {
			background-color: white;
			padding: 1em;
		}
			.freeEstimateCover {
				background-image: url('/imgs/bg_BL.jpg');
				margin: 0;
				padding: 3px 0;
			}

			.freeEstimateArea h2 {
				margin: 0;
				padding: 1em 0;
				color: #008066;
			}

				.freeEstimateBox {
					margin: 1.5em;
					padding: 1em;
					background-color: rgba(255,255,255,0.67);
					border-radius: 7px;
				}

					.freeEstimateGuide {
						margin: 0 1em 2em 1em;
						font-size: 0.9em;
					}

		/* …………………… */
		/* ▼YouTube枠領域 */
		/* …………………… */
		.youtubeArea {
			text-align: center;
		}

			.movieDeviceImage img {
				height: 172px;
				width: auto;
			}

		/* ……………………… */
		/* ▼Instagram枠領域 */
		/* ……………………… */
		.instagramArea {
		}

			.instagramPhotoBox {
				background-image: url('/imgs/bg_insta.jpg');
				background-size: contain;
				background-repeat: no-repeat;
			}

				.instagramPhotoList {
					list-style-type: none;
					margin: 0;
					padding: calc( 100vw * 0.0587 ) 14%;	/* 画面幅375pxのとき、上余白22px */
					box-sizing: border-box;
					text-align: center;
					height: calc( 100vw * 0.385 );	/* 縦横比 1：0.385 */
				}
					.instagramPhotoList li {
						display: inline-block;
						width: 18%;
					}
						.instagramPhotoList img {
							display: block;
							width: 100%;
							height: auto;
						}

	/* ====================== */
	/* ▼メイン区画：deepPage */
	/* ====================== */
	.deepPage main {
	}

		/* ……………… */
		/* ▼NEWS枠領域 */
		/* ……………… */
		.deepPage .newsCover {
			margin-top: 1em;
		}

		/* …………………… */
		/* ▼サービス枠領域 */
		/* …………………… */
		.deepPage .servicesArea {
		}

			/* －－－－－－－－ */
			/* ▼サービス１項目 */
			/* －－－－－－－－ */
			.deepPage .oneKgmService {
			}

				/* 料金説明 */
				.onePriceExp {
					text-align: center;
				}

				/* 概要文章 */
				.oneKgmExplain {
					max-width: 500px;
					margin: 2em auto 1em;
					padding: 0 1em;
				}

					/* サブ見出し */
					.oneKgmExplain h3 {
						background-image: url('/imgs/ico_tree.png');
						background-position: top center;
						background-repeat: no-repeat;
						background-size: auto 38px;
						line-height: 1;
						margin: 3em 0 2em;
						padding: 48px 0 0 0;	/* 38pxのアイコンから10px余白を設ける */
						text-align: center;
						font-weight: normal;
						font-size: 1em;
					}

					.oneKgmExplain h4 {
						margin: 2em 0 1em 0;
						text-align: center;
						font-size: 1em;
					}

					/* 本文 */
					.oneKgmExplain p {
						line-height: 1.4;
						text-align: justify;
					}

					/* 単独写真枠 */
					.serviceImageBox {
						margin-top: 2em;
					}
					.serviceImageBox.placeLeft {
						margin-left: -1em;
						text-align: left;
					}
					.serviceImageBox.placeRight {
						margin-right: -1em;
						text-align: right;
					}
						.serviceImageBox img {
							max-width: 85%;
							height: auto;
						}

		/* …………………… */
		/* ▼ご依頼の例領域 */
		/* …………………… */
		.caseExsamples {
		}

			.casePhotoBox {
				max-width: 800px;
				margin: 0 auto;
				text-align: center;
			}

				.casePhotoList {
					margin: 0;
					padding: 0;
					list-style-type: none;
				}
				.casePhotoList li {
					display: inline-block;
				}

					/* 写真サイズ */
					.casePhotoList li img {
						width: calc( ( 100vw / 2 ) - 3em );
						max-width: 240px;
						height: auto;
						display: block;
						padding: 3px;
					}


		/* …………………… */
		/* ▼対応地域枠領域 */
		/* …………………… */
		.deepPage .regionArea {
		}
			.deepPage .regionCover {
				background-color: #f2f2f2;
				margin: 0 0 3em 0;
				padding: 1em 0 3em 0;
				max-width: 900px;
			}

	/* ========================= */
	/* ▼メイン区画：contactPage */
	/* ========================= */
	.contactPage main {
	}

		/* …………… */
		/* ▼電話領域 */
		/* …………… */
		.telContactArea {
			margin: 0 auto;
			padding: 1em 0;
			background-color: #fffee6;
		}

			.telContactArea h2 {
				color: #c18040;
				margin: 0 0 1em 0;
				padding: 0;
			}
			.companyHeadName {
				text-align: center;
				font-weight: bold;
				margin: 1em 0 0 0;
			}

		/* …………………………… */
		/* ▼お申し込みの流れ領域 */
		/* …………………………… */
		.reservationFlowArea {
			background-color: white;
			margin: 1em;
			padding: 1em;
		}

			/* 見出し */
			.reservationFlowArea h2 {
				margin: 1px 0;
				padding: 0.5em 0;
			}
			.reservationFlowArea h2 .sub {
				font-size: 0.6em;
				display: block;
			}

			/* 流れ本文 */
			.reservationFlowCover {
				margin: 1em;
			}

				/* 番号付きリスト */
				.reservationFlowList {
					margin: 0;
					padding: 0;
					list-style-type: none;
				}

					.onereservationFlowBox {
						margin: 0 0 2em 0;
					}
						.reservationFlowGuide {
							margin: 0;
						}
						.reservationFlowNum {
							display: block;
							margin: 0 auto;
							background-color: #239238;
							border-radius: 50%;
							width: 2em;
							height: 2em;
							line-height: 2;
							color: white;
							text-align: center;
						}

			/* 末尾の画像 */
			.reservationFlowImage {
				margin: 1em auto;
				padding: 0;
				max-width: 67%;
			}

		/* ………………………… */
		/* ▼安心の低価格枠領域 */
		/* ………………………… */
		.contactPage .priceArea {
			position: relative;
			padding: 2em 0;
			background-color: white;
		}

		/* ……………………… */
		/* ▼お問い合わせ領域 */
		/* ……………………… */
		.contactFormArea {
			margin: 3em 0 1em 0;
		}

			.formHeadGuide {
				margin: 1em auto;
				max-width: 75%;
				font-weight: bold;
				font-size: 0.8em;
			}

			/* 見出し */
			.contactFormArea h2 {
				font-size: 1.2em;
				color: #006680;
				font-weight: bold;
			}

			/* iframe */
			.contactFormArea iframe {
				margin: 1em auto;
				display: block;
			}

			/* ▼お問い合わせフォーム内の装飾 */
			#messageform {
				text-align: left;
				padding: 0 0.5em;
			}
				/* 項目ラベル */
				.itemLabel {
					margin: 0.75em 0 0.25em;
					padding: 0;
					font-size: 0.9em;
				}

				/* 項目枠 */
				.itemForm {
					margin: 0;
					padding: 0;
				}
					/* 自由テキスト欄 */
					/* セレクトボックス */
					/* テキストエリア */
					.freetext,
					.itemselect,
					.freeinputbox {
						font-family: 'M PLUS 1p',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
						font-size: 16px;
						width: 100%;
						box-sizing: border-box;
						border-radius: 7px;
						border: 1px solid black;
						padding: 3px 6px;
					}

			/* ▼フォーム内ボタンの装飾 */
			.formbuttons { padding-top: 0.5em !important; text-align: center !important; }
			.formbuttons input { font-size: 1.25em; margin-right: 1em; padding: 0.25em 0.75em; min-width: 10em; border: 1px solid #bbb; border-radius: 0.6em; }
			.formbuttons input.confirmbutton { background-color: #239238; color: white; border: none; padding: 0.4em 0.75em; cursor: pointer; }
			.formbuttons input.confirmbutton:hover { background-color: #66ab80; }
			.formbuttons input.clearbutton   { background-color: #fff; }
			.formbuttons input.sendbutton { background-color: #0066ab; color: white; border-color: #0066ab; }
			.formbuttons input.sendbutton:hover  { background-color: #689cc8; }
			.formbuttons input.backbutton { background-color: #fff; }
			.formbuttons input:hover { background-color: #e5f1fb; border-color: #0078d7; }
			.formbuttons input:active { background-color: #cce4f7; border-color: #005499; }

			/* iOS独自装飾の拒否 */
			input[type="submit"] {
				-webkit-appearance: none;
			}



	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	footer {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.innerFooterCover {
		max-width: 900px;
		margin: 0 auto;
	}

		/* ▼フッタ上部領域 */
		.upperFooter {
			margin: 0;
			padding: 4em 0;
			background-color: white;
		}

		/* ▼中央フッタ領域(※フローティング関連はid側で装飾) */
		.middleFooter {
			margin: 0;
			padding: 0;
		}

		/* ▼フッタ下部領域 */
		.bottomFooter {
			margin: 0;
			padding: 0;
			background-color: #c7d6b1;
			background-image: url('/imgs/bg_foot.jpg');
			background-size: cover;
			background-position: top left;
		}

			.companyLogo {
				width: 110px;
				height: auto;
				margin: auto;
			}

		/* ……………… */
		/* ▼アドレス枠 */
		/* ……………… */
		.addressBox {
			max-width: 900px;
			margin: 1em auto 0;
			padding: 1.5em 1em;
			background-color: #239238;
			color: white;
		}
			.companyName {
				width: 224px;
				height: auto;
				margin: auto;
				font-size: 1.05em;
			}

			.address {
				margin: 1.5em 0;
				line-height: 1.67;
			}

			/* TEL見出し */
			.contactTelBox {
				text-align: center;
				font-size: 1.4em;
				font-weight: bold;
				margin: 0;
			}
				.contactTelBox a {
					display: inline-block;
					color: white;
				}
				.contactTelBox img {
					margin: 7px auto;
					padding: 0 5px 16px 5px;
					display: block;
					height: 50px;
				}

			/* Mapリンク */
			.mapLink a {
				color: white;
			}

		/* ………………… */
		/* ▼同社リンク枠 */
		/* ………………… */
		.companyLinkBox {
			max-width: 900px;
			margin: 0;
			padding: 1em;
			position: relative;
			top: -0.71em;
			text-align: center;
			background-color: transparent;
			background-image: url('/imgs/img_leaf02.png');
			background-size: contain;
			background-position: top center;
			background-repeat: no-repeat;
			padding-top: calc( 100vw * 0.5333 );
		}
		.companyLinkBox img {
			max-width: 100%;
		}

			.companyLinkBoxInside {
				background-color: white;
				margin: 0;
				padding: 100px 0 0 0;
			}

				/* Huge会社ロゴ */
				.headquarters {
					margin: 0 0 4em 0;
					font-size: 0.8em;
					font-weight: bold;
				}
				.headquarters img {
					width: 120px;
					margin: 5px auto 0;
				}

				/* ブランド群 */
				.brands {
					maxwidth: 350px;
					margin: 2em auto 0;
					padding: 0;
					list-style-type: none;
					display: flex;
					flex-wrap: wrap;
					gap: min(50px,13vw);
					align-items:center;
					justify-content:center;
				}
					.brands li {
						flex: 1;
						padding: 0 0.5em;
						max-width: 110px;
					}
						.brands li img {
							width: auto;
							height: auto;
							max-width: 110px;
						}

		/* …………………………… */
		/* ▼コーナーメニュー群枠 */
		/* …………………………… */
		.cornersLinkBox {
			margin: 3em auto;
			padding: 0 6px;
			max-width: 400px;
		}

		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			max-width: 700px;
			margin: 0 auto;
			padding: 1.2em 1.2em 4.5em 1.2em;	/* リンクが下端すぎるとモバイル版ブラウザのUIとバッティングして操作できなくなるので、下端は多めに余白を確保しておく。 */
			text-align: left;
			line-height: 2.5;
		}

		/* サイトマップ内リンク共通装飾 */
		.sitemapBox a {
			text-shadow: 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white;
		}

			/* ▽コーナー連結ボタン */
			.connectedButtons {
				margin: 0;
				padding: 0.5em 0 0 0;
				list-style-type: none;
			}
			.connectedButtons::after {
				content: "";
				clear: both;
				display: block;
			}
				.connectedButtons li {
					display: block;
					width: 32%;
					float: left;
					border-width: 1px 0 1px 1px;
					border-style: solid;
					border-color: #838d91;
					text-align: center;
				}
				.connectedButtons li:last-child {
					border-width: 1px;
				}
				.connectedButtons li a {
					display: block;
					color: #373d3f;
				}

			/* ▽サイトマップリスト */
			.sitemapList {
				margin: 1em 0;
				padding: 0;
				list-style-type: none;
			}
				/* リスト内1項目 */
				.sitemapList li {
					display: block;
					margin: 1.5em 0 1em;
					line-height: 1.1;
				}
				.sitemapList li::before {
					content: '｜';
					display: inline-block;
					margin-right: 0.5em;
				}

				/* リスト内リンク */
				.sitemapList a {
					color: #373d3f;
				}

			/* ▽最下部のコンタクトリンク */
			.bottomContact {
				margin: 2.5em 0 0 0;
				padding: 0 0 1.2em 0;
				text-align: center;
			}
				.bottomContact a {
					color: #373d3f;
				}

		/* …………………………………………………… */
		/* ▼中央フッタ領域(兼フローティングフッタ) */
		/* …………………………………………………… */
		#FloatingFooter {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

			.floatingButtonBox {
				display: block;
				width: 40px;
				height: 40px;
				position: absolute;
				bottom: 20px;
				font-weight: bold;
				/* text-shadow: 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white; */
			}
				.telephoneBox { left: 10px; }	/* 電話:左 */
				.scrollTopBox { right: 10px; }	/* ＵＰ:右 */

				/* 電話アイコン */
				.telephoneBox img { max-width: 27px; max-height: 27px; display: inline-block; vertical-align: text-top; }

				.circleButton {
					display: block;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-color: #c95514;
					color: white;
					font-size: 1.4em;
					line-height: 40px;
					/* box-shadow: 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white; */
					/* text-shadow: 0px 0px 0px white; */
				}

			.floatingButtonBox a {
				color: #c95514;
			}



/* ======================================================== */
/* ■総合モバイル端末（横幅899px以下）共通の追加・上書きCSS */
/* ======================================================== */
@media all and (max-width:699px) {

	.pc-only { display: none !important; }

}


/* ====================================================== */
/* ■スマートフォン（横幅599px以下）専用の追加・上書きCSS */
/* ====================================================== */
@media all and (max-width:599px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.95rem;
	}

}

/* ======================================================== */
/* ■やや小型なスマホ（横幅375px以下）専用の追加・上書きCSS */
/* ======================================================== */
@media all and (max-width:375px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.95rem;
	}

}

/* ========================================================== */
/* ■小型スマートフォン（横幅360px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:360px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.9rem;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
	main {
		width: 100%;
		overflow: hidden;
	}

}

/* ======================== */
/* ■TOP 1画面目の調整用CSS */
/* ======================== */
/* -------------------- */
/* 画面の高さによる調整 */		/* 高さが 637以上ある場合は、半透明枠の座標ではなく、その下の段落の余白で空間を調整する */
/* -------------------- */
@media all and (min-height:637px) {

	/* ========================= */
	/* ▼TOPのみ：上部ガイド区画 */
	/* ========================= */
			.bothGuides {
				top: -50px;		/* 半透明枠の座標は固定する */
			}
				.bothGuides p.secondGuide {
					padding: calc( 8px + (( var(--vh, 1vh) * 100 - 636px ) / 2 )) 0;
				}
}

/* -------------------- */
/* 画面の横幅による調整 */		/* 高さが 320pxの場合は、スライドショーの正方形が占める高さも低いので、余白や座標を再調整する */
/* -------------------- */
@media all and (max-width:320px) {

	/* ========================= */
	/* ▼TOPのみ：上部ガイド区画 */
	/* ========================= */
			.bothGuides {
				top: calc( 30px + ( var(--vh, 1vh) * 100 - 636px ));
			}
				.bothGuides p.firstGuide {
					font-size: 0.95em;
					line-height: 1.34;
				}
				.bothGuides p.secondGuide {
					padding: 4px 0;
					font-size: 0.95em;
				}

}

/* ======================================================================== */
/* ■PC(大型タブレット含む)サイズ画面（横幅900px以上）専用の追加・上書きCSS */
/* ======================================================================== */
@media screen and (min-width:700px) {

	.mobile-only { display: none !important; }

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 1rem;
		background-image: url('/imgs/img_leaf03.jpg');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	/* ※Windows環境で日本語Webフォントのシャギーを防ぐ */
	h2,h3,p,a,span
	{
		transform: rotate(0.03deg);
	}

	/* ============================= */
	/* ▼TOPのみ：スライドショー領域 */
	/* ============================= */
	.topSlideshowArea {
		height: 602px;	/* 横幅900pxに対して、÷1.494 */
	}

	/* ========================= */
	/* ▼TOPのみ：上部ガイド区画 */
	/* ========================= */
	.topGuideArea {
		background-image: url("/imgs/img_leaf01_PC_bottom.png");
		background-position: center center;
		height: 130px;
		position: static;
	}
		.topGuideInside {
			padding: 0;
			background: none;
			height: 100%;
		}
			.topGuideInside .topTransparentLeafBox {
				display: block;
				position: absolute;
				bottom: 130px;
				background-image: url('/imgs/img_leaf01_PC_top.png');
				height: 170px;	/* 画像の原寸高さに一致させる */
				width: 100%;
				z-index: 90;
			}
			.bothGuides {
				position: static;	/* モバイル用の移動装飾を無効化する */
			}
				.bothGuides p.firstGuide {
					position: absolute;
					bottom: 130px;	/* Design 144px */
					z-index: 100;
					line-height: 1.6;
					padding: 0.25em 1em;
					margin: 0 4em;
					font-size: 1.1em;
				}
				.bothGuides p.secondGuide {
					padding: 31px 1em 0 1em;
				}

			/* 冒頭リンクボタン */
			.topGuideInside > .linkBox {
				bottom: 223px;
				right: 30px;
				z-index: 200;
			}
				.contactButtonLink {
					background-image: url("/imgs/btn_otoiawaseYE.png");
					padding: 51px 0 0 84px;
				}
				.topGuideInside a.oblongButton {
					height: 93px;
					width: 300px;
					font-size: 1.5em;
				}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */
	header {
	}

		/* ----------------------------------- */
		/* ▼ドロワーメニュー(PC/モバイル兼用) */
		/* ----------------------------------- */
			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBtn {
				right: 24px;			/* ボタンの配置(右) */
				/* right: calc( ( 100% - 900px ) / 2 + 4px );	*/ /* ボタンを900pxコンテンツ枠の内側に配置したい場合 */
			}

		/* -------------- */
		/* ▼上端ロゴ領域 */
		/* -------------- */
		h1 {
			width: 150px;
			height: 150px;
			top: 10px;
			left: 20px;
		}

	/* =================================== */
	/* ▼ヘッダ区画：deepPage/ tegalogPage */
	/* =================================== */
	.deepPage .headbox {
		min-height: 0;
	}

		/* 上端ロゴの位置調整 */
		.tegalogPage .headbox h1 {
			left: calc( (( 100vw - 570px ) / 2 ) - 20px );
		}

	/* ==================== */
	/* ▼パンくずリスト区画 */
	/* ==================== */
	.breadcrumbsCover {
		margin: 0 auto;
		padding: 1px 0;
		max-width: 900px;
		background-color: white;
	}
	.breadcrumbsBox {
		margin: 180px auto 1em;
		font-size: 0.85em;
		max-width: 570px;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */

		/* ………………………… */
		/* ▼７つのお約束枠領域 */
		/* ………………………… */
		.promisesArea {
		}

			.primisesCover {
				max-width: 570px;
				margin: auto;
			}

				/* －－－－－－－－ */
				/* ▽お約束ボックス */
				/* －－－－－－－－ */

					/* 写真枠(段) */
					.onePromisePhoto {
						background-size: auto 270px;
					}

						/* 写真BOX */
							.promiseImg img {
								width: 175px;
							}

		/* ………………………… */
		/* ▼安心の低価格枠領域 */
		/* ………………………… */
		.priceArea {
		}

			.priceGuide {
				max-width: 570px;
			}

		/* ……………………… */
		/* ▼施工の流れ枠領域 */
		/* ……………………… */
		.flowArea {
		}

			.flowList {
				max-width: 570px;
				margin: auto;
			}

		/* ……………………… */
		/* ▼ごあいさつ枠領域 */
		/* ……………………… */
		.greetingArea {
		}

			.greetingCover {
				/*	max-width: 700px; */
				margin: auto;
				padding: 120px 0 0 0;
			}
					/* 社長写真枠 */
					.ceoPhotoBox {
						width: 285px;
					}

					/* 社長名前 */
					.ceoName {
						padding: 2em 1em 2.7em;
					}

					/* あいさつ本文 */
					.ceoGreeting {
						padding-right: 3em;
					}

		/* …………………… */
		/* ▼対応地域枠領域 */
		/* …………………… */
		.regionArea {
		}

			/* 本文 */
			.regionGuide {
				max-width: 570px;
				margin: 1em auto;
			}

		/* ……………… */
		/* ▼NEWS枠領域 */
		/* ……………… */
		.newsArea {
		}

			.newsCover {
				max-width: 570px;
				margin: 4em auto;
			}

			/* てがろぐ合成部分 */
			.tegalogEmbedArea {
			}

				/* 投稿日付 */
				.postDate {
					margin: 0.5em;
				}
				/* 投稿本文 */
				.postMain {
					padding: 0 1em;
				}

		/* ……………………… */
		/* ▼ループ写真枠領域 */
		/* ……………………… */
		.loopSlideshowArea {
			background: white;
			padding: 1px 0;
			max-width: 900px;
			margin: auto;
		}

		/* …………………… */
		/* ▼無料見積枠領域 */
		/* …………………… */
		.freeEstimateArea {
		}
			.freeEstimateCover {
				max-width: 400px;
				margin: auto;
			}

		/* …………………… */
		/* ▼YouTube枠領域 */
		/* …………………… */
		.youtubeArea {
		}

		/* ……………………… */
		/* ▼Instagram枠領域 */
		/* ……………………… */
		.instagramArea {
		}

			.instagramPhotoBox {
				max-width: 570px;
				margin: auto;
			}

				.instagramPhotoList {
					padding: 24px 9%; 	/* 33px 14%; ＝calc( 570px * 0.0587 ) 14%; */
					height: 219px		/* ＝calc( 570px * 0.385 ); */
				}


	/* ====================== */
	/* ▼メイン区画：deepPage */
	/* ====================== */
	.deepPage main {
	}

		/* ……………… */
		/* ▼NEWS枠領域 */
		/* ……………… */
		.deepPage .newsArea {
			margin-top: 0;
			padding-top: 140px;
		}
			.deepPage .newsCover {
				margin-top: 3em;
			}

		/* …………………… */
		/* ▼ご依頼の例領域 */
		/* …………………… */
		.caseExsamples {
		}
					/* 写真サイズ */
					.casePhotoList li img {
						width: 240px;
					}

	/* ============================== */
	/* ▼メイン区画：(PC) contactPage */
	/* ============================== */
	.contactPage {
	}

		/* …………………………… */
		/* ▼お申し込みの流れ領域 */
		/* …………………………… */
		.reservationFlowArea {
			background-color: #fffee6;
			margin: 0 auto;
			padding: 1em 0 3em 0;
			width: 900px;
		}
			.reservationFlowCover {
				width: 570px;
				background-color: white;
				margin: 0 auto;
				padding: 1em 0;
			}

				/* 番号付きリスト */
				.reservationFlowList {
					margin: 0 auto;
					width: 450px;
				}


		/* ………………………… */
		/* ▼安心の低価格枠領域 */
		/* ………………………… */
		.contactPage .priceArea {
		}

		/* ……………………… */
		/* ▼お問い合わせ領域 */
		/* ……………………… */
		.contactFormArea {
			background-color: #fffee6;
			margin: 0 auto;
			padding: 1em 0 3em 0;
			width: 900px;
			text-align: center;
		}

			/* iframe */
			.contactFormArea iframe {
				width: 570px;
			}



	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	footer {
	}

		/* ▼フッタ下部領域 */
		.bottomFooter {
			background-image: url('/imgs/bg_foot_PC.jpg');
			background-size: cover;
			background-position: top left;
		}

		/* ………………… */
		/* ▼同社リンク枠 */
		/* ………………… */
		.companyLinkBox {
			top: -19px;				/* 緑色背景を透過する空間の高さ */
			background-image: url('/imgs/img_leaf02_PC.png');
			padding-top: 300px;
		}

			/* Huge会社ロゴ */
			.headquarters {
				font-size: 1em;
			}
			.headquarters img {
				width: 150px;
			}

			/* ブランド群 */
			.brands {
				width: 400px;
			}
				.brands li {
					padding: 0 1em;
				}

		/* …………………………………………………… */
		/* ▼中央フッタ領域(兼フローティングフッタ) */
		/* …………………………………………………… */
				.telephoneBox { display: none; }	/* 電話:非表示 */
				.scrollTopBox { right: calc( ( 100% - 900px ) / 2 - 50px ); }	/* ＵＰボタン：少しだけコンテンツ領域の外に出す（ボタン幅40px） */

		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			font-size: 1.1em;
		}


}

/* ====== */
/* 微調整 */
/* ====== */
@media screen and (min-width:900px) and (max-width:1020px) {

				.scrollTopBox { right: calc( ( 100% - 900px ) / 2 + 10px ); }	/* ＵＰボタン：狭い空間ではコンテンツ領域の外に出すとスクロールバーが出てしまうので、内側に表示させる */

}
@media screen and (min-width:700px) and (max-width:899px) {

				.scrollTopBox { right: calc( ( 100% - 768px ) / 2 + 10px ); }

}

/* =================================================== */
/* ■大型PC画面（横幅1500px以上）専用の追加・上書きCSS */
/* =================================================== */
@media screen and (min-width:1500px) {

	body {
		padding-right: 300px;		/* ドロワー常時表示の分を空ける */
		background-size: calc( 100% - 300px ) auto;	/* ドロワー表示300px分だけ縮める */
		background-position: center left;
	}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */

		/* ----------------------------------- */
		/* ▼ドロワーメニュー(PC/モバイル兼用) */
		/* ----------------------------------- */
			/* ▼ドロワーボタンは非表示 */
			.drawerMenu .drawerBtn {
				display: none;
			}

			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBg {
				/* ドロワーOPENの際にページ全体にかぶせられる白色ベール（ここでは常に非表示にする） */
				display: none !important;
			}

			/* ▼ドロワーメニュー本体(ラッパー) ：常時表示 */
			.drawerMenu .drawerNaviWrapper {
				transform: translate(0);
				/*background-color: rgba(104,156,200,1);	/* 重なるメニューの背景色(常時表示なので不透明にする) */
			}

	/* ====================== */
	/* ▼ヘッダ区画：deepPage */
	/* ====================== */
		/* 上端ロゴの位置調整 */
		.deepPage .headbox h1 {
			left: calc( (( 100vw - 570px - 300px ) / 2 ) - 20px );
		}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	footer {
		margin-right: -300px;
	}
	.innerFooterCover {
		padding-right: 300px;
	}

		/* ▼フッタ上部領域 */
		.upperFooter {
		}

		/* ▼フッタ下部領域 */
		.bottomFooter {
		}

		/* …………………………………………………… */
		/* ▼中央フッタ領域(兼フローティングフッタ) */
		/* …………………………………………………… */
				.scrollTopBox { left: 1100px; }	/* ＵＰ:左(※ドロワー常時表示の都合で左端からの距離を指定する) */

}


/* ======================= */
/* ■埋め込みツール等用CSS */
/* ======================= */
/* ――――――――――――――――― */
/* ★ズームアップスライドショー用CSS  */
/* ――――――――――――――――― */
.main_imgBox {
	height: 680px;
	overflow: hidden;
	position: relative;
}
picture .main_imgM {
	opacity: 0;
	width:100%;
	height:100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 36s 0s infinite;
	animation: anime 36s 0s infinite;
}
picture:nth-of-type(2) .main_imgM { -webkit-animation-delay: 6s; animation-delay: 6s; }
picture:nth-of-type(3) .main_imgM { -webkit-animation-delay: 12s; animation-delay: 12s; }
picture:nth-of-type(4) .main_imgM { -webkit-animation-delay: 18s; animation-delay: 18s; }
picture:nth-of-type(5) .main_imgM { -webkit-animation-delay: 24s; animation-delay: 24s; }
picture:nth-of-type(6) .main_imgM { -webkit-animation-delay: 30s; animation-delay: 30s; }

@keyframes anime {
	0% { opacity: 0; }
	1% { opacity: 1; }
	17% { opacity: 1; }
	25% { opacity: 0; transform: scale(1.2); z-index:9; }
	100% { opacity: 0; }
}
@-webkit-keyframes anime {
	0% { opacity: 0; }
	1% { opacity: 1; }
	17% { opacity: 1; }
	25% { opacity: 0; -webkit-transform: scale(1.2); z-index:9; }
	100% { opacity: 0; }
}

/* ―――――――――――― */
/* ★ループスライダー用CSS  */
/* ―――――――――――― */
/* ▼loopSlider  */
.loopSliderWrap { top: 0; left: 0; height: 230px; overflow: hidden; position: absolute; text-align: center; }
.loopSliderWrap p { margin:0; padding: 0; }
.loopSlider { margin: 3em auto; width: 100%; height: 225px; text-align: left; position: relative; overflow: hidden; }
.loopSlider ul { height: 220px; float: left; overflow: hidden; }
.loopSlider ul li { padding: 15px; float: left; display: inline; overflow: hidden; border: 1px solid #eeeeee; box-sizing: border-box; }
.loopSlider ul li img { display: block; }
.loopSlider * { margin: 0; padding: 0; }
.loopSliderWrap:after { content: ""; display: none; clear: none; }

.loopBoxTitle { font-size: 1em;  color: #d8abac; }
.loopBoxGuide { font-size: 0.9em; color: #d8abac; }