@charset "utf-8";

/* ----------------------------------------- */
/* タイヤショップエーワン様サイト用メインCSS */
/* ----------------------------------------- */
/* Modified : 2025/05/18 17:48 */

/* ―――――――― */
/* ■カスタム変数群 */
/* ―――――――― */
:root {
	--text-skyblue:	#349ae2;
	--text-red:		#f3524e;
	--text-blue:	#0c0c9e;
	--back-yellow:	#fcea35;		/* ボタン等の背景 */
	--back-lightyellow:	#fffdb2;	/* VOICEテキスト等の背景 */
	--back-cream:	#fffbcb;		/* ブランドや商品等の背景 */
	--back-blue:	#006bff;
	--back-gray:	#eee;

	--wideStdBtn-backcolor: #fdec06;	/* WIDE STDボタンの背景色 */
	--wideStdBtn-textcolor: black;		/* WIDE STDボタンの文字色 */
	--wideStdBtn-bordercolor: #fdec06;	/* WIDE STDボタンの枠線色 */

	--wideRevBtn-backcolor: unset;	/* WIDE REVボタンの背景色 */
	--wideRevBtn-textcolor: unset;		/* WIDE REVボタンの文字色 */
	--wideRevBtn-bordercolor: unset;	/* WIDE REVボタンの枠線色 */

	--blackBtn-backcolor: black;	/* 黒ボタンの背景色 */
	--blackBtn-textcolor: white;	/* 黒ボタンの文字色 */
	--blackBtn-bordercolor: black;	/* 黒ボタンの枠線色 */

	--whiteblueBtn-backcolor: white;		/* 白地青文字ボタンの背景色 */
	--whiteblueBtn-textcolor: #497CA3;		/* 白地青文字ボタンの文字色 */
	--whiteblueBtn-bordercolor: white;		/* 白地青文字ボタンの枠線色 */

	--drawer-backcolor: #0801a9;		/* ドロワーメニューの背景色 */
	--drawer-linkcolor: #fff;			/* ドロワーメニュー項目の文字色 */
	--hamburger-bar-open-color: #fff;		/* ハンバーガーボタン平時の線色(ドロワーを開くボタンの線色) */
	--hamburger-bar-close-color: #fff;		/* ハンバーガーボタン開時の線色(ドロワーを閉じるボタンの線色) */
	--hamburger-label-textcolor: white;		/* ハンバーガーボタンのラベル文字色 */
	--hamburger-button-color: #2396e7;		/* ハンバーガーボタンのボタン色(背景色) */

	scroll-behavior: smooth;
}

/* ――――――――――― */
/* ■全環境用のベースCSS  */
/* ――――――――――― */
html,
body {
	overflow-x: hidden;	/* タイヤのアニメーションによるオーバーフロー対策として必須(html,body両方に必要) */
}
body {
	margin: 0;
	padding: 0;
	background-color: var( --back-yellow );
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	color: #545454;
	font-size: 16px;
}
body.deepPage {
	color: #000;
}

.pageCover {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	background-color: white;
}
	/* ============ */
	/* ▼汎用装飾群 */
	/* ============ */

	a{
		color: #333;
		text-decoration: none;
	}

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

	/* ▽モバイルだけの改行調整 */
	br.sp-only {
		display: block;
		margin: 0.5em 0;
	}

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

	/* -------- */
	/* ▽見出し */
	/* -------- */
	.midashi {
		font-family: "Zen Kaku Gothic Antique", sans-serif;
		font-style: normal;
		text-align: center;
		font-weight: 600;
		color: black;
	}
		.midashi .en {
			display: block;
			font-size: 2.8rem;
		}
			.midashi .blue { color: var( --text-skyblue ); }
			.midashi .red  { color: var( --text-red ); }
		.midashi .jp {
			display: block;
			font-size: 1.5rem;
		}

	/* ------------ */
	/* ▽ボタン配置 */
	/* ------------ */
	.btn2set {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 1.5rem 3rem;
	}
		.btn2set li {
			padding: 0 20px 20px 0;   
		}

	/* -------------- */
	/* ▽汎用ボタン群 */
	/* -------------- */
	.btn {
		text-decoration: none;
		text-align: center;
		line-height: 1;
		font-family: "Kosugi Maru", sans-serif;
	}

	/* ▼WIDE STD：横長角丸黄背景ボタン */
	.wideStdBtn {
		display: block;
		width: fit-content;
		min-width: 14.5rem;
		max-width: 100%;
		margin: 0 auto;
		padding: 0.9rem 1.5rem;
		border: 2px solid var(--wideStdBtn-bordercolor);
		border-radius: 1.35rem;
		background-color: var(--wideStdBtn-backcolor);
		color: var(--wideStdBtn-textcolor);
	}
	a.wideStdBtn:hover {
		/*
		border-color: var(--wideStdBtn-bordercolor);
		background-color: var(--wideStdBtn-bordercolor);
		color: var(--wideStdBtn-backcolor);
		opacity: 1;
		*/
		opacity: 0.5;
	}

	/* 色バリエーション */
	.wideStdBtn.blackBtn {
		border-color: var(--blackBtn-bordercolor);
		background-color: var(--blackBtn-backcolor);
		color: var(--blackBtn-textcolor);
	}

	.wideStdBtn.whiteblueBtn {
		border-color: var(--whiteblueBtn-bordercolor);
		background-color: var(--whiteblueBtn-backcolor);
		color: var(--whiteblueBtn-textcolor);
	}

	/* ▼ボタンデコレーション */
		/* 右矢印アイコン付き */
		.withArrowBtn {
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Zz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTAsMS41QzIzLjIsMS41LDEuNSwyMy4yLDEuNSw1MFMyMy4yLDk4LjUsNTAsOTguNWMyNi44LDAsNDguNS0yMS43LDQ4LjUtNDguNVM3Ni44LDEuNSw1MCwxLjV6IE00NS41LDc1LjMgbC04LjQtOC40TDU0LjEsNTBMMzcuMSwzM2w4LjQtOC40TDcwLjgsNTBMNDUuNSw3NS4zeiIvPjwvZz48L3N2Zz4=");
			background-size: 1rem;
			background-position: center right 8px;
			background-repeat: no-repeat;
		}
		.withArrowBtn:hover {
		}

		.withArrowBtn.whiteblueBtn {
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LnN0MXtmaWxsOiM0OTdDQTM7fTwvc3R5bGU+PC9kZWZzPjxnPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01MCwxLjVDMjMuMiwxLjUsMS41LDIzLjIsMS41LDUwUzIzLjIsOTguNSw1MCw5OC41YzI2LjgsMCw0OC41LTIxLjcsNDguNS00OC41Uzc2LjgsMS41LDUwLDEuNXogTTQ1LjUsNzUuMyBsLTguNC04LjRMNTQuMSw1MEwzNy4xLDMzbDguNC04LjRMNzAuOCw1MEw0NS41LDc1LjN6Ii8+PC9nPjwvc3ZnPg==");
		}
		.withArrowBtn.blackBtn {
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LnN0MXtmaWxsOndoaXRlO308L3N0eWxlPjwvZGVmcz48Zz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTAsMS41QzIzLjIsMS41LDEuNSwyMy4yLDEuNSw1MFMyMy4yLDk4LjUsNTAsOTguNWMyNi44LDAsNDguNS0yMS43LDQ4LjUtNDguNVM3Ni44LDEuNSw1MCwxLjV6IE00NS41LDc1LjMgbC04LjQtOC40TDU0LjEsNTBMMzcuMSwzM2w4LjQtOC40TDcwLjgsNTBMNDUuNSw3NS4zeiIvPjwvZz48L3N2Zz4=");
		}

		/* 左アイコン付き */
		.withLeftIcon {
			position: relative;
		}
		.withLeftIcon::before {
			content: '';
			position: absolute;
			top: 0.6rem;
			left: 1.5rem;
			width: 1.67rem;
			height: 1.67rem;
			background-size: 1.67rem;
			background-position: center center;
			background-repeat: no-repeat;
		}
			.withIconPin::before {
				background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4OCIgaGVpZ2h0PSIxMDUiIHZpZXdCb3g9IjAgMCAyNi40IDMxLjUiPjxkZWZzPjxzdHlsZT4uaVBpbi1JbnNpZGV7ZmlsbDojRkZGRkZGO308L3N0eWxlPjwvZGVmcz48Zz48cGF0aCBjbGFzcz0iaVBpbi1PdXRzaWRlIiBkPSJNMjEuMywxMi41YzAsNS45LTguMSwxNC43LTguMSwxNC43cy04LjEtOC42LTguMS0xNC43YzAtNC41LDMuNi04LjEsOC4xLTguMUMxNy43LDQuNCwyMS4zLDgsMjEuMywxMi41eiIgLz48cGF0aCBjbGFzcz0iaVBpbi1PdXRzaWRlIiBkPSJNMjEuMywxMi41aC0xLjFjMCwxLjItMC40LDIuNy0xLjIsNC4zYy0xLjEsMi40LTIuNyw0LjgtNC4xLDYuNmMtMC43LDAuOS0xLjMsMS43LTEuOCwyLjIgYy0wLjIsMC4zLTAuNCwwLjUtMC41LDAuNmwtMC4xLDAuMmwwLDAuMWwwLjgsMC43bDAuOC0wLjdsLTAuMS0wLjFjLTAuNC0wLjUtMi40LTIuNy00LjItNS40Yy0wLjktMS40LTEuOC0yLjktMi40LTQuNCBjLTAuNi0xLjUtMS0yLjktMS00LjFjMC0xLjksMC44LTMuNywyLTQuOWMxLjMtMS4zLDMtMiw0LjktMmMxLjksMCwzLjcsMC44LDQuOSwyYzEuMywxLjMsMiwzLDIsNC45SDIxLjNoMS4xIGMwLTUuMS00LjEtOS4yLTkuMi05LjJDOC4xLDMuMyw0LDcuNCw0LDEyLjVjMCwxLjgsMC42LDMuNiwxLjQsNS4zYzEuMiwyLjYsMi45LDUuMSw0LjQsN2MxLjUsMS45LDIuNiwzLjEsMi42LDMuMSBjMC4yLDAuMiwwLjUsMC4zLDAuOCwwLjNzMC42LTAuMSwwLjgtMC40YzAsMCwyLjEtMi4zLDQuMS01LjNjMS0xLjUsMi4xLTMuMiwyLjktNC45YzAuOC0xLjcsMS40LTMuNSwxLjQtNS4ySDIxLjN6Ii8+PC9nPjxwYXRoIGNsYXNzPSJpUGluLUluc2lkZSIgZD0iTTE2LDEyLjJjMCwxLjUtMS4yLDIuOC0yLjgsMi44Yy0xLjUsMC0yLjgtMS4yLTIuOC0yLjhjMC0xLjUsMS4yLTIuOCwyLjgtMi44QzE0LjgsOS41LDE2LDEwLjcsMTYsMTIuMnoiLz48L3N2Zz4=");
			}
			.withIconTel::before {
				background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTM0Ny4xLDI0LjdsLTQwLDk2Yy02LjgsMTYuMy0yLjEsMzUuMSwxMS42LDQ2LjNsNDkuMyw0MC4zYy0zMy4zLDcwLjQtOTAuMywxMjcuNC0xNjAuNywxNjAuN2wtNDAuNC00OS4zIGMtMTEuMS0xMy43LTMwLTE4LjQtNDYuMy0xMS42bC05Niw0MGMtMTguNiw3LjctMjguNSwyOC0yMy4yLDQ3LjRsMjQsODhDMzAuMiw0OTkuOSw0Niw1MTIsNjQsNTEyYzI0Ny40LDAsNDQ4LTIwMC42LDQ0OC00NDggYzAtMTgtMTIuMS0zMy44LTI5LjUtMzguNmwtODgtMjRDMzc1LjEtMy45LDM1NC44LDYsMzQ3LjEsMjQuN0wzNDcuMSwyNC43eiIvPjwvc3ZnPg==");
			}
			.withIconForm::before {
				background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1NTYgNDY0Ij48Zz48cGF0aCBkPSJNNTQzLjM4LDI1MC4wNGMtMC4xLTQuODgtMC4zOS05LjY5LTAuODYtMTQuNGMtMC4wMS0wLjEtMC4wMi0wLjItMC4wMy0wLjI5Yy0yLjMxLTIzLjI4LTguMzctNDQuMTQtMTEuODgtNTcuODkgYy01LjQ1LTIxLjMzLTE1LjE1LTQxLjktMTUuMTUtNDEuOXMtOTEuMTQtMzYuOC0yMTYuODctMjYuNzhjLTc3LjA3LDYuMTUtMTM4Ljk5LDQ5LjEyLTE4OCw3OS40NyBjLTMwLjk0LDE5LjE2LTU5LjM5LDI1LjMtNzQuODMsMzkuMjZjLTM5Ljg4LDM2LjA4LTE2LjI1LDg5LjYxLTE2LjI1LDg5LjYxbDI2LjA3LTAuMDNoNS41NWM2LjE0LDIyLjk1LDI3LjAyLDM5Ljg3LDUxLjksMzkuODcgYzI0Ljg4LDAsNDUuNzUtMTYuOTIsNTEuODktMzkuODdoMjU5LjM5YzYuMTQsMjIuOTUsMjcuMDIsMzkuODcsNTEuOSwzOS44N3M0NS43NS0xNi45Miw1MS44OS0zOS44N2gxMi41bC0wLjAzLTAuNThoMC4wMyBjMCwwLDQuNTYtMi43NSw5Ljc3LTMyLjNjMCwwLDAsMCwwLjAxLDBjMC4wNy0wLjQsMC4xNS0wLjg1LDAuMjEtMS4yN2MwLjEtMC41OCwwLjItMS4xNiwwLjMtMS43NmMwLjMyLTEuODksMC42My0zLjg0LDAuOTYtNS45NSBjMC4zMy0yLjE4LDAuNTktNC4zNSwwLjgxLTYuNTNjMC4wOC0wLjc3LDAuMTQtMS41NSwwLjItMi4zMWMwLjEyLTEuMzksMC4yMi0yLjc3LDAuMy00LjE2YzAuMDUtMC45NCwwLjEtMS44OCwwLjEzLTIuODIgYzAuMDQtMS4xNywwLjA3LTIuMzQsMC4wOS0zLjUxYzAuMDEtMS4wNiwwLjAzLTIuMTEsMC4wMy0zLjE2QzU0My40MywyNTEuODQsNTQzLjQsMjUwLjk1LDU0My4zOCwyNTAuMDR6IE0xMDMuMDMsMzQwLjE0IGMtMjAuNDIsMC0zNi45Ni0xNi41NS0zNi45Ni0zNi45NmMwLTIwLjQxLDE2LjU1LTM2Ljk2LDM2Ljk2LTM2Ljk2YzIwLjQxLDAsMzYuOTYsMTYuNTUsMzYuOTYsMzYuOTYgQzEzOS45OSwzMjMuNTksMTIzLjQ0LDM0MC4xNCwxMDMuMDMsMzQwLjE0eiBNMjA5LjExLDE5MC43NmMtMzUuMjUsMC02Ny45NC0xLjkxLTY3Ljk0LTEuOTFzODEuMjctNTYuOTMsMTQ5LjA5LTYxLjkzIGMzLjksMTcuMDksOSwzNy41NCwxMi4zLDYzLjQ4QzI2MC4yMywxODguNzQsMjIyLjAyLDE5MC43NiwyMDkuMTEsMTkwLjc2eiBNMzkxLjkxLDE4My43MmwwLjM4LDAuNDYgYy0xMy41OCw1Ljk3LTQzLjQxLDcuMzgtNzUuNTgsNi42NmMtMy4yLTI2LjI2LTguMjUtNDYuOTMtMTIuMjYtNjQuNjljMzAuMzMtMS4xNyw2Mi4wMy00LjE2LDg5LjYxLTEuNTkgQzQwMC43OCwxNDYuOTIsNDA0LjU4LDE3My4yLDM5MS45MSwxODMuNzJ6IE00MTMuMjcsMTcxLjA1YzIuMzgtMTQtMC4yMi0zMC40Mi00LjE1LTQ0Ljk0YzM4Ljg3LDQuNDIsNjYuMDksMTAuNzQsNjIuOTYsMTMuODggQzQ2Ny40LDE0NC42Niw0MzcuNTksMTU3LjAzLDQxMy4yNywxNzEuMDV6IE00NjYuMjIsMzQwLjE0Yy0yMC40MSwwLTM2Ljk2LTE2LjU1LTM2Ljk2LTM2Ljk2YzAtMjAuNDEsMTYuNTUtMzYuOTYsMzYuOTYtMzYuOTYgYzIwLjQxLDAsMzYuOTYsMTYuNTUsMzYuOTYsMzYuOTZDNTAzLjE4LDMyMy41OSw0ODYuNjMsMzQwLjE0LDQ2Ni4yMiwzNDAuMTR6Ii8+PC9nPjwvc3ZnPg==");
			}


	/* ============ */
	/* ■ヘッダ領域 */
	/* ============ */
	.pageHeader {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 0 30px 0;
		background-color: var( --back-gray );
		position: relative;

		line-height:1.85;
		letter-spacing: 0.2em;
	}

	.deepPage .pageHeader {
		background-color: white;
	}

		/* …………………… */
		/* ▼ヘッダ情報群側 */
		/* …………………… */
		.headerTextSide {
			position: relative;		/* 小画面で配置を調整するために、marginではなくpositionで配置 */
			z-index:2;
			top: 1.875rem;
			left: 3rem;
			width: calc( 100% - 3rem );
			animation-delay: .5s;
			font-family: "Kosugi Maru", sans-serif;
		}

			/* …………………… */
			/* ▽会社名＋ロゴ枠 */
			/* …………………… */
			.headerTitle {
				margin: 0;
				font-size: 1.75rem;
				color:#666;
				line-height: 1.5;
				margin: 0 0 50px 0;
			}
				.headerTitle img{
					position: relative;
					width: auto;
					height: 75px;
					left: 1.2em;
				}
				.headerTitle span{
					color:#2e98e5;
					display: block;
				}

				/* …………………… */
				/* ▽ヘッダリード枠 */
				/* …………………… */
				.headerLead{
					position: relative;
					font-size: 2vw;
					margin: 0 0 50px 0;
					font-weight: bold;
				}
					.yellowTape {
						background: yellow;
						padding: 5px;
					}

				/* …………………… */
				/* ▽ヘッダ会社住所 */
				/* …………………… */
				.headerAddress{
					font-size: 1.2vw;
					margin: 0 0 20px 0;
				}

		/* ………………………… */
		/* ▼ヘッダスライダー側 */
		/* ………………………… */
		.headerSliderSide {
		}

			/* ………………… */
			/* ▽MVスライダー */
			/* ………………… */
			.slider {
				margin: 0;
				padding: 0;
				list-style-type: none;
				position: absolute;
				top:30px;
				right:30px;
				z-index: 1;	/*z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
				height: 456px;
				width:75%;
				border:7px solid #2e98e5;
				border-radius: 20px;
				overflow: hidden;
			}
				.slider-item {
					width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
					height:456px;/*各スライダー全体の縦幅を（80vh）にする*/
					background-repeat: no-repeat;/*背景画像をリピートしない*/
					background-position: center;/*背景画像の位置を中央に*/
					background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
				}

			/* ……………… */
			/* MV右下タイヤ */
			/* ……………… */
			/* 4-3 くるっ（Z 軸（右へ）） */
			.rotateRightZ{
				animation-name: rotateRightZAnime;
				animation-duration:1s;
				animation-fill-mode:forwards;
			}

			@keyframes rotateRightZAnime{
				from { transform: rotateZ(0); }
				to   { transform: rotateZ(360deg); }
			}

			.pullingTire{
				position: absolute;
				z-index: 2;
				right:30px;
/*				bottom:70px;*/
				top: 400px;
				width:180px;
				height: 180px;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-duration: 3s;
			}

			/* ………………………………………… */
			/* ▼右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………… */
			.shoulderMenuBtnBox {
			}

				.shoulderMenu{
					margin: 0;
					padding: 0;
					list-style-type: none;
					position: absolute;
					z-index: 2;
					top:0;
					right:80px;
					background: #ffec04;
					font-weight: bold;
					display: flex;
					border-radius:0 0 10px 10px;
					font-family: "Kosugi Maru", sans-serif;
				}

				.shoulderMenu li{
					position: relative;
				}

				.shoulderMenu li:first-child::after{
					content: '';
					position: absolute;
					right: 0;
					top: 20px;
					background:#333;
					width:1px;
					height: 30px;
					transform: rotate(23deg);
				}

				.shoulderMenu li a {
					display: block;
					padding: 20px 20px 20px 50px;
					transition: all 0.3s;
				}

				.shoulderMenu li .pcnone{
					display: none;
				}

				.shoulderMenu li a:hover{
					 color: #666;   
				}

				.shoulderMenu li:first-child a{
					background:url("/imgs/ico_car_BK.svg") no-repeat 20px center;
					background-size:20px 20px;
				}

				.shoulderMenu li:last-child a{
					background:url("/imgs/ico_tel.svg") no-repeat 20px center;
					background-size:20px 20px;
				}

			/* ……………………… */
			/* ▼deep：左肩ロゴ枠 */
			/* ……………………… */
			.deepHeadTitle {
				margin: 0;
				padding: 0 0 0 40px;
			}
				.deepHeadLogo {
					max-width: 100%;
					width: auto;
					height: 80px;
				}

			/* ………………………………………………… */
			/* ▼deep：右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………………… */
				.deepPage .shoulderMenu{
					top: 9px;
					right: 80px;
					border-radius:10px;
				}
				.shoulderMenu li a {
					padding-top: 16px;
					padding-bottom: 16px;
				}

			/* …………………… */
			/* ▼パンくずリスト */
			/* …………………… */
			.pankuzuBox {
				margin: 2rem 0;
				padding: 0 0 0 50px;
			}
				.pankuzuList {
					font-size: 0.8rem;
					margin: 0;
					padding: 0;
					list-style-type: none;
					letter-spacing: 0;
				}
					.pankuzuList li {
						display: inline-block;
					}
					.pankuzuList li:not(:first-child)::before {
						content: '>';
						display: inline-block;
						margin: 0 0.5rem;
					}
					.pankuzuList li:empty {
						display: none;
					}


	/* ========== */
	/* ■本文領域 */
	/* ========== */
	main { }

		/* ……………… */
		/* ▼ハロー区画 */
		/* ……………… */
		.helloArea {
			margin: 0;
			padding: 4.5rem 0 1rem;
			font-family: "Kosugi Maru", sans-serif;
		}
			.helloTitle {
			}
				.helloPlace { }
				.helloName { }
					.helloName span { color: var( --text-blue ); }
			.helloContents {
				background-color: white;
				padding: 80px 0;
			}

			.helloImgBox{
				width: 30%;
				margin: 0 auto;
				animation-delay: .4s;
			}
				.helloImgBox img{
					border-radius: 50%; 
				}

				/* ‥‥‥‥‥‥‥ */
				/* ▽ハロー文言群 */
				/* ‥‥‥‥‥‥‥ */
				.helloTexts{
					animation-delay: .5s;
					list-style-type: none;
					margin: 0 0 3rem 0;
					padding: 0;
				}
					.helloTexts li{
						position: absolute;
						font-size: 1.5rem;
					}

					.helloTexts li::after{
						content:'';
						position: absolute;
						width:40px;
						height: 2px;
						bottom: -10px;
						right:10px;
						background: #2e98e5;
					}

					.helloTexts li:nth-child(n+4)::after{
						left:10px;
					}
					.helloTexts li:nth-child(1){ top: 12%; left: 17%;  transform: rotate(15deg);  animation-delay: .1s; }
					.helloTexts li:nth-child(2){ top: 37%; left: 10%;  transform: rotate(10deg);  animation-delay: .3s; }
					.helloTexts li:nth-child(3){ top: 65%; left: 12%;  transform: rotate(-15deg); animation-delay: .5s; }
					.helloTexts li:nth-child(4){ top: 12%; right: 17%; transform: rotate(-15deg); animation-delay: .7s; }
					.helloTexts li:nth-child(5){ top: 34%; right: 10%; transform: rotate(-10deg); animation-delay: 1.1s; }
					.helloTexts li:nth-child(6){ top: 61%; right: 12%; transform: rotate(15deg);  animation-delay: 1.3s; }

		/* ………………… */
		/* ▼お知らせ区画 */
		/* ………………… */
		.newsArea {
			margin: 0;
			padding: 0;
			font-family: "Kosugi Maru", sans-serif;
		}
			.newsTitle {
				margin: 0;
				padding: 7rem 0 1rem;
				background: linear-gradient(-187deg, white, white 50%, var( --back-blue ) 50%, var( --back-blue ));
				color: white;
			}
			.newsBody {
				margin: 0;
				padding: 1.5rem 0 2.5rem;
				background-color: var( --back-blue );
			}
				.newsBox {
					margin: 0 auto;
					padding: 40px;
					background:#fff;
					box-shadow: 7px 7px 0 rgba(0,0,0,0.5);
					max-width: 700px;
					border-radius:10px;
				}

				.deepPage .newsBox {
					box-shadow: none;
				}

					.oshiraseTegalogBox {
						margin: 0;
						padding: 0 0 1.25rem 0;
					}

					.oneNewsBox {
						border-bottom: 1px dashed #ccc;
						margin: 0 0 1.5rem 0;
						padding: 0 0 1rem 0;
					}
						.postDate {
							margin: 0;
							text-align: right;
							color: var( --text-blue );
						}
						.postTitle {
							border-left: 7px solid var( --back-yellow );
							line-height: 1;
							margin: 0;
							padding: 0.5rem 0.75rem;
							font-size: 1.2rem;
						}
						.postMain { }

					/* ページナビ */
					.pagelinks {
						margin: 1rem 0;
						padding: 0;
						width: 100%;
						display: flex;
						align-items:center;
						justify-content:space-around;
					}
						.prevlink {
							flex: 1;
							text-align: left;
						}
						.nextlink {
							flex: 1;
							text-align: right;
						 }
							.arrow {
								display: inline-block;
								margin: 0 0.5rem;
							}

					/* Pagenation Box on Tegalog for Recommends */
					.pagenationNaviBox {
						max-width: 100%;
						width: 700px;
						margin: 3rem auto;
					}

		/* ………………… */
		/* ▼サービス区画 */
		/* ………………… */
		.serviceArea {
			margin: 5rem 0;
			padding: 0.5rem 0 4.5rem;
			background-image: url("/imgs/img_bg.jpg");
		}
			.serviceTitle { }

			.serviceList {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 50px;
				margin: 3rem auto;
				max-width: 900px;
				padding: 0;
			}

				.oneService{
					width: 250px;
					background: #fff;
					margin: 0;
					padding: 0;
					border-radius: 1rem 1rem 0 0;
					list-style-type: none;
					font-family: "Zen Kaku Gothic Antique", sans-serif;
					font-style: normal;
					font-weight: 500;
				}

					.oneServiceLink {
						display: block;
					}
					.oneServiceLink:hover {
						opacity: 0.5;
					}
						.oneServiceTitle {
							background-color: var( --back-blue );
							color: white;
							display: flex;
							align-items:center;
							justify-content:center;
							margin: 0;
							padding: 0 1rem;
							height: 4.5rem;
							line-height: 1.1;
							border-radius: 1rem 1rem 0 0;
						}
						.oneServiceExp {
							margin: 1.25rem 0.85rem;
							padding: 0 0 0 0.15rem;
							text-align: center;
							line-height: 1.1;
							border-left: 8px solid var( --back-yellow );
						}
						.oneServiceImg {
							margin: 1.5rem;
						}

				/* 遅延アニメーション */
				.oneService:nth-child(2){ animation-delay: 0.2s; }
				.oneService:nth-child(3){ animation-delay: 0.4s; }
				.oneService:nth-child(4){ animation-delay: 0.6s; }
				.oneService:nth-child(5){ animation-delay: 0.8s; }

		/* ……………………… */
		/* ▼おすすめ商品区画 */
		/* ……………………… */
		.recommendArea { }
			.recommendTitle { }
			.recommendBtnBox {
				margin: 2rem 0;
			}

			/* Grandhomeでは表示しない */
			.grandhome .recommendBtnBox {
				display: none;
			}

		/* ……………………… */
		/* ▼取扱メーカー区画 */
		/* ……………………… */
		.brandsArea {
			margin: 4.5rem 0 0;
		}
			.makersLinkCover {
				background-color: var( --back-cream );
				margin: 1rem 0 0;
				padding: 1rem;
			}
				.makersLinkList {
					margin: 2rem auto;
					padding: 1rem 0.5rem;
					max-width: 850px;
					display: flex;
					align-items:center;
					justify-content:space-around;
					flex-wrap: wrap;
					gap: 0.25rem 0.5rem;
					background-color: white;
					border-radius: 1rem;
					box-shadow: 5px 5px 5px gray;
				}
					.oneMaker {
						min-height: 65px;
						display: flex;
						align-items:center;
						justify-content:center;
					}
						.oneMaker img {
							display: block;
							width: 244px;
							height: auto;
						}
						.oneMaker a:hover {
							opacity: 0.5;
						}

		/* …………………… */
		/* ▼お客様の声区画 */
		/* …………………… */
		.voiceArea {
			margin: 4.5rem 0;
		}
			.voiceListCover {
				background-color: var( --back-gray );
			}
				.voiceList {
					display: flex;
					max-width: 1000px;
					margin: 0 auto;
					padding: 2rem 0;
					list-style-type: none;
					align-items:center;
					justify-content:space-around;
					flex-wrap: wrap;
					gap: 1rem 0.25rem;
				}
					.oneVoiceBox {
						max-width: 400px;
					}
						.oneVoiceTitle {
							background-color: #fff;
							border-radius: 3px;
						}
							.oneVoiceImg { }
						.oneVoiceBody {
							margin: 2rem 0;
							padding: 1.5rem 1rem;
							line-height: 1.5;
							text-align: justify;
							background-color: var( --back-lightyellow );
							border-radius: 0.5rem;
							min-height: 216px;
							box-sizing: border-box;
						}

		/* …………………………… */
		/* ▼ループギャラリー区画 */
		/* …………………………… */
		.loopGallery {
			background:url("/imgs/border.png") repeat-x top left,url("/imgs/border.png") repeat-x bottom left;
			background-size: 50px 16px;
			padding:50px 0;
			margin: 0 0 100px 0;
		}
			.slider2 {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			.loopGallery img{
				border-radius: 10px;
			}

			.slider2 img {
				width:100%;/*スライダー内の画像を横幅100%に*/
				height:auto;
			}
			.slider2 .slick-slide {
				margin:0 10px;/*スライド左右の余白調整*/
			}

		/* …………………… */
		/* ▼コンタクト区画 */
		/* …………………… */
		.contactArea {
			background-image: url("/imgs/bg_footer.jpg");
			background-size: cover;
			background-position: center bottom;
			background-repeat: no-repeat;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 100px 30px;
		}
			.contactInside { }

				.contactTitle {
					text-align: center;
					font-size: 1.67rem;
					font-weight: 400;
				}
					.contactTitle span {
						display: inline-block;
						margin: 0 0.5rem;
					}
				.contactAddress {
					margin: 1.5rem 0 3rem;
					font-size: 1.75rem;
					text-align: center;
				}
					.contactAddress .zip { margin-bottom: 0.67rem; font-size: 1.5rem; }
					.contactAddress .address { margin-bottom: 1rem; }
					.contactAddress .tel { }
						.contactAddress a { color: white; }

					.contactA1Logo {
						width: 100%;
						height: auto;
						max-width: 270px;
					}

		/* ==================== */
		/* ■DeepPage：本文領域 */
		/* ==================== */
			/* ………………… */
			/* ▼アクセス区画 */
			/* ………………… */
			.accessArea { }
				.accessTitle { }

				.accessTableBox { }
					.accessTable {
						width: fit-content;
						min-width: min(700px,90vw);
						margin: 3rem auto;
						border-collapse: collapse;
					}
					.accessTable th,
					.accessTable td {
						text-align: left;
						font-weight: normal;
						vertical-align: top;
						border-bottom: 1px solid var( --back-gray );
						padding: 1.5rem 2rem;
						line-height: 1.75;
					}
						.daytype {
							display: inline-block;
							min-width: 2.5em;
							margin-right: 0.5rem;
						}

				.mapBtnBox {
					margin: 5rem 0;
				}

				.accessArea iframe {
					width: 100%;
					display: block;
				}

			/* ……………………… */
			/* ▼サービス冒頭区画 */
			/* ……………………… */
			.serviceHeadArea {
				margin: 1rem 0 3rem;
			}
				.serviceHeadTitle { }

				.serviceHeadImage {
					text-align: center;
				}

				.serviceFeatures {
					text-align: center;
				}
					.feature1 {
						display: block;
						font-size: 1.5rem;
					}
					.feature2 {
						display: block;
						color: var( --text-blue );
						font-size: 1.75rem;
					}

				.serviceGuide {
					margin: 1rem auto;
					padding: 1rem;
					width: fit-content;
					max-width: 700px;
					font-size: 1.1rem;
					line-height: 1.5;
				}

			/* ……………………… */
			/* ▼サービス内容区画 */
			/* ……………………… */
			.serviceBodyArea {
				margin: 1rem 0;
				padding: 2rem 1rem;
				background-color: var( --back-gray );
			}
				.serviceBodyTitle { }
					.title1 {
						display: block;
						font-size: 1.5rem;
					}
					.title2 {
						display: block;
						font-size: 1.75rem;
						color: var( --text-red );
					}

				.serviceExpSet {
					display: flex;
					flex-direction: column;
					gap: 1.25rem;
					max-width: 100%;
					width: 900px;
					margin: 2rem auto;
				}

					.serviceDetailExp {
						display: flex;
						flex-direction: row;
						gap: 1.5rem;
						align-items:center;
						justify-content:center;
						background-color: white;
						border-radius: 0.75rem;
						padding: 1.5rem;
					}
						.serviceDetailImage { }
						.serviceDetailTexts { }
							.serviceDetailTitle {
								margin: 0 0 0.5rem 0;
								font-size: 1.2rem;
								border-bottom: 1px solid #ccc;
							}
							.serviceDetailTexts p {
								margin: 0;
							}

				.serviceExpBox {
					background-color: white;
					margin: 1.5rem auto;
					padding: 1.5rem 3rem;
					max-width: 100%;
					width: 1000px;
					box-sizing: border-box;
				}

					.serviceExpBox ol,
					.serviceExpBox ul {
						margin: 1rem 0;
						padding: 0 0 0 2rem;
					}

					.serviceSubTitle {
						margin: 1.5rem 0 1rem 0;
					}
					.serviceSubTitle::before {
						content: '■';
						color: var( --text-skyblue );
						display: inline-block;
						margin-right: 0.125rem;
					}

					.serviceFlowList {
						color: var( --text-skyblue );
					}
						.serviceFlowList span {
							color: black;
							margin-left: 0.125rem;
						}

					.serviceFlowList.divisions {
						margin-top: 2rem;
						padding-left: 1rem;
					}
						.serviceFlowList.divisions li {
							margin-bottom: 1rem;
						}
							.serviceFlowList.divisions li span:first-child {
								font-weight: 700;
							}

			/* …………………………… */
			/* ▼サービスイメージ区画 */
			/* …………………………… */
			.servicePhotoArea {
				margin: 5rem 0 0 0;
			}
				.servicePhotoBox {
					text-align: center;
				}

			/* ……………………… */
			/* ▼お問い合わせ領域 */
			/* ……………………… */
			.contactFormArea {
				margin: 1rem 0;
			}
				.contactBody {
				}
					.contactform {
						max-width: 1000px;
						width: fit-content;
						margin: 3rem auto 0;
						padding: 1rem;
					}

						/* ▼PHP生成領域 */
						#messageform {
							color: var(--base-green);
						}
							/* 入力エラー報告枠 */
							.inputerrors { }

							/* 必須アイコン */
							.required-sign img {
								vertical-align: -3px;
								margin-left: 0.5rem;
								margin-right: 3px;
							}

							/* 入力テーブル */
							.contacttable { }
							.contacttable th {
								font-weight: normal;
								color: #666;
							}
								/* 冒頭ガイド */
								.requireGuide {
									margin: 0 0 3rem 0;
								}

								/* 見出し段・入力段共通 */
								.itemLabel,
								.inputColumn {
									padding: 0 0 1rem 0;
								}

								/* 見出し段 */
								.itemLabel {
									white-space: nowrap;
									text-align: left;
								}
									.itemLabel label {
										display: inline-block;
									}

								/* 見出し段の上端配置 */
								.itemLabel.placeTop {
									vertical-align: top;
								}

								/* 入力段 */
								.inputColumn {
									vertical-align: top;
								}

									/* 入力欄の多段組 */
									.inputSetBox {
										display: flex;
										line-height: 1.125;
										gap: 1rem;
									}
										.inputSetOne {
										}
											.inputSetOne u {
												text-decoration: none;
												font-size: 0.85rem;
												display: inline-block;
												color: #666;
											}

									/* テキスト入力欄共通 */
									#messageform input[type="text"],
									#messageform input[type="tel"],
									#messageform input[type="email"],
									#messageform textarea {
										border: 2px solid #ccc;
										font-size: 16px;
										padding: 0.25em;
										width: 100%;
										color: black;
										box-sizing: border-box;
									}
									#messageform textarea::placeholder {
										color: #ccc;
									}

										.freetext { }
											.freetext.inputName { max-width: 8rem; }
											.freetext.zipnumber	{ max-width: 8rem; }
											.freetext.telnumber { max-width: 16rem; }
											.freetext.mailinput { max-width: 24rem; }
											.inputYMDBox {
												align-items: end;
											}
											.freetext#year  { max-width: 4.5rem; }
											.freetext#month { max-width: 3.5rem; }
											.freetext#date  { max-width: 3.5rem; }
										.freeinputbox {  }

									/* セレクトボックス */
									#messageform select {
										font-size: 16px;
										padding: 0.125em;
									}

									/* ラジオボタン・チェックボックス群枠 */
									.itemSelectArea {
										font-size: 16px;
										width: 100%;
										color: black;
									}
										.selectOptions i {
											margin-left: 0.175rem;
										}

								/* フォームボタン */
								.formbuttons {
									padding: 1.75rem 0;
									text-align: center;
								}
									/* 送信ボタン */
									.confirmbutton {
										border: 1px solid black;
										background-color: black;
										border-radius: 1rem;
										color: white;
										text-align: center;
										padding: 0.75rem;
										font-size: 1.125rem;
										min-width: 270px;
									}
									.confirmbutton:hover {
										background-color: gray;
									}

									/* 戻るボタン */
									.confirmbutton.backbutton {
										background-color: white;
										color: black;
									}
									.confirmbutton.backbutton:hover {
										background-color: #ccc;
									}

									/* 戻るボタンと送信ボタンが並んでいる場合 */
									.backorsend {
										margin: 1rem auto;
										max-width: 540px;
									}
									.backorsend .confirmbutton {
										width: 45%;
										min-width: auto;
									}

							/* 入力内容チェックテーブル */
							.checktable {
								border-collapse: collapse;
								border: 2px solid var(--base-green);
								margin: 1.5rem auto;
							}
								.checktable th,
								.checktable td {
									border: 1px solid var(--base-green);
									padding: 0.25rem;
									line-height: 1.25;
								}
								.checktable thead th {
									background-color: var(--green-list-head-color);
									color: white;
								}
									.checkitem {
										display: block;
									}

	/* ============ */
	/* ■フッタ領域 */
	/* ============ */
	.pageFooter {
		margin: 0;
		padding: 4.375rem 4.375rem 6rem 4.375rem;
		background: var( --text-skyblue );
		color: #fff;
		font-family: "Kosugi Maru", sans-serif;
	}
		.pageFooter a {
			color: #fff;
		}

		.footerInside{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: center;
		}

			/* ……………… */
			/* ▼連絡先区画 */
			/* ……………… */
			.footerContact {
				width: 30%;
			}
				.footerTitle {
					font-size: 1.8rem;
				}
					.footerTitle .tagline {
						display: block;
						font-size: 1rem;
						font-weight: 400;
						letter-spacing: 0.125em;
						margin-bottom: 0.5em;
					}
				.footerAddress {
					letter-spacing: 0.25em;
				}
					.footerAddress .zip { margin-bottom: 1rem; }
					.footerAddress .address { margin-bottom: 1.5rem; }
					.footerAddress .tel { }

				/* コックピットタカハシボタン */
				.footerTakahashi {
					margin: 2rem 0 0 0;
					width: fit-content;
				}

			/* ……………………… */
			/* ▼サイトマップ区画 */
			/* ……………………… */
			.footerSitemap {
				width: 65%;
			}
				.footerSitemapList {
					display: flex;
					gap: 1rem 3rem;
					flex-wrap: wrap;
					margin: 0;
					padding: 0;
					font-size: 0.9rem;
					list-style-type: none;
				}

				.footerSitemapList li {
					padding: 10px 20px;
				}

				.footerSitemapList li a {
					position: relative;
					padding: 0 0.625rem;
					letter-spacing: 0.1rem;
				}

				.footerSitemapList li a:before {
					position: absolute;
					top: 21%;	/* フォントがKosugi Maruの場合は21%、Zen Kaku Gothic Antiqueの場合は32% */
					left: -10px;
					content: '';
					width: 7px;
					height:7px;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform: rotate(45deg);
				}

		/* ……………………… */
		/* ▼上端へ戻るボタン */
		/* ……………………… */
		/*リンクを右下に固定*/
		#page-top {
			position: fixed;
			right: 10px;
			bottom:40px;
			z-index: 2;
			/*はじめは非表示*/
			opacity: 0;
			transform: translateY(150px);
		}

		/*　上に上がる動き　*/
		#page-top.UpMove{
			animation: UpAnime 0.5s forwards;
		}

		@keyframes UpAnime{
		  from {
			opacity: 0;
			transform: translateY(150px);
		  }
		  to {
			opacity: 1;
			transform: translateY(0);
		  }
		}

		/*　下に下がる動き　*/
		#page-top.DownMove{
			animation: DownAnime 0.5s forwards;
		}

		@keyframes DownAnime{
		  from {
		  	opacity: 1;
			transform: translateY(0);
		  }
		  to {
		  	opacity: 1;
			transform: translateY(150px);
		  }
		}

		/*画像の切り替えと動き*/
		#page-top a {
			/*aタグの形状*/
			display: block;
			width: 80px;
			height: 80px;
			color: #333;
			text-align: center;
			text-transform: uppercase; 
			text-decoration: none;
			font-size:0.6rem;
			/*背景画像の指定*/
			background: url("/imgs/car_base.svg") no-repeat center;
			background-size: contain;
		}

		#page-top.floatAnime a{
			width: 80px;
			height: 80px;
			/*背景画像の指定*/
			background: url("/imgs/car.svg") no-repeat center;
			background-size: contain;
			/*アニメーションの指定*/
			animation: floatAnime 2s linear infinite;
			opacity: 0;
		}

		@keyframes floatAnime {
			0% { transform: translateX(0); opacity: 0; }
			25% { transform: translateX(-6px);opacity: 1; }
			50% { transform: translateX(0) }
			100% { transform: translateX(6px);opacity: 1; }
		}

		/*Page Topと書かれたテキストの位置*/
		#page-top span{
			position: absolute;
			bottom: -11px;
			right: 24px;
			color: #333;
			font-weight: bold;
			line-height: 1.3;
			letter-spacing: 0.25em;
		}
		#page-top.floatAnime span{
			bottom: -30px;
		}


	/* =================================== */
	/* ■ドロワーメニュー(PC/モバイル兼用) */
	/* =================================== */
	.hamburgerSet {}
		.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;
		}

			/* ▼ドロワーボタンの表示と動作 */
			.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: 9px;		/* ボタンの配置(上) */
				right: 9px;		/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
				border-radius: 5px;
				background-color: var(--hamburger-button-color);	/* 3本線枠の背景色 */
				padding: 10px 15px 20px 15px;						/* 3本線周囲の余白量：上下と左右で合計サイズを合わせると正円になる */
				box-sizing: content-box;
			}
			/* ▽ドロワーが開いている状態でのドロワーボタン */
			.drawerMenu .drawerBtn.active {
				padding: 10px 10px 20px 20px;		/* クロスする場合の3本線周囲の余白量 */
				background-color: var(--hamburger-button-color);
			}
			.drawerMenu .drawerBtn.active .drawerBar {	width: 23px; 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: 5px 2px;		/* 3本線の「上下間隔」と「横の長さ」 */
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: var(--hamburger-label-textcolor); } /* 3本線下部のラベル文字色 */
			.drawerMenu .drawerBtn .drawerBar { background-color: var(--hamburger-bar-open-color); } 			/* 3本線の色:平時 */
			.drawerMenu .drawerBtn.active .drawerBar { background-color: var(--hamburger-bar-close-color); }	/* 3本線の色:開時 */

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

			/* ▼ドロワーメニュー本体(ラッパー) */
			.drawerMenu .drawerNaviWrapper {
				background-color: var(--drawer-backcolor);		/* 重なるメニューの背景色 */
				background-image: none;							/* 重なるメニューの背景画像 */
				width: 310px;									/* 重なるメニューの横幅(※変更する場合はtransformの値も変える：＋12pxくらいの値に) */
				height: 100%;
				transition: all 0.2s;
				transform: translate(322px, 0);				/* 初期状態では、画面外に移動させておく： (0, -100%) なら上から下へ現れる */
				position: fixed;
				top: 0;
				right: 0;
				z-index: 1000;	/* 最前面表示 */
			}
			.drawerMenu .drawerNaviWrapper.open {
				transform: translate(0);					/* openクラスが付加されたら、元の位置に戻す */
			}

			/* ドロワーメニュー本体のスクロールベース */
			.drawerScrollBase {
				max-height: 100%;
				overflow: auto;
				box-sizing: border-box;
			}

			/* ▼ドロワーメニュー本体 */
			.drawerMenu .drawerNaviList {
				padding: 16px 6px 150px;				/* メニューの動的な表示開始位置を調整する際は、padding-topの値を変更する。スクロールのために下端に余分に空間を確保する。 */
			}
				.subDrawerNaviList {
					padding-left: 20px;
				}

			/* ▼ドロワーメニュー(リンク)項目 */
			.drawerMenu a.drawerLink {
				color: inherit;
				text-decoration: none;
				display: block;
				margin: 1px 0;	/* 項目の上下間隔を少し詰める(元5px) */
				padding: 6px 18px;
				border-radius: 0.5em;
				font-weight: 500;
			}
			.drawerMenu a.drawerLink {
				color: var(--drawer-linkcolor);
				background-color: var(--drawer-backcolor);
			}
			.drawerMenu a.drawerLink:hover {
				background-color: var(--drawer-linkcolor);
				color: var(--drawer-backcolor);
				opacity:1;
			}

			/* ▼ドロワーメニュー項目：アイコンリンク */
			.drawerMenu .iconLinkItems {
				text-align: left;
				margin: 50px 0 0 18px;
			}
				.iconLinkList {
					list-style-type: none;
					margin: 0;
					padding: 0;
					display: flex;
					gap: 20px;
					align-items:center;
					justify-content:start;
					width: fit-content;
				}
					.iconLinkItems img {
						display: block;
						height: 42px;
						width: auto;
					}

			/* ▼ドロワーメニュー項目：長ボタンリンク */
			.wideBtnLinkItems {
				margin: 2.5rem 0;
				padding: 0 1rem;
				text-align: center;
			}
				.wideBtnLinkItems a.btn {
					display: block;
					margin: 0;
					padding: 0.9rem 1.5rem;
					border-radius: 1.35rem;
					box-sizing: border-box;
					text-align: center;
					font-size: 1rem;
					max-width: 100%;
					width: 100%;
					min-width: auto;
					font-family: "Kosugi Maru", sans-serif;
				}
					.wideBtnLinkItems a .iconInBtn {
						margin-right: 0.75em;
					}

			/* ▼ドロワーメニュー内部上端のロゴ */
			.logoOnMenu {
				margin: 0;
				padding: 3px 8px 10px;

				background-color: white;
			}
				.drawerMenu .logoOnMenu a {
					display: flex;
					align-items:center;
					justify-content:flex-start;

					background-color: white;
				}
					.drawerMenu .logoOnMenu a {
						margin: 0;
						padding: 0;
					}
					.drawerMenu .logoOnMenu .drawerUsagi {
						width: auto;
						height: 50px;
					}
					.drawerMenu .logoOnMenu .drawerLogo {
						width: 180px;
						height: auto;
					}
				.drawerMenu .logoOnMenu a:hover {
					/* 反転表示を適用せず、半透明にする */
					opacity: 0.5;
					background-color: transparent;
				}
				.drawerMenu .logoOnMenu img {
					width: 100px;
					height: auto;
				}

			/* 状況に応じた表示の切り替え（ドロワーメニュー専用）※適用優先度の関係で、共通装飾として以外に、ここにも同じ内容を記述しておく必要がある。 */
			.drawerMenu a.top-only { display: none;  }
			.drawerMenu a.not-top  { display: block; }
			.homePage .drawerMenu a.top-only { display: block; }
			.homePage .drawerMenu a.not-top  { display: none;  }


/* ==================================== */
/* ■PC・タブレットサイズ以上用スタイル */
/* ==================================== */
@media screen and (min-width:941px) {

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

}
/* ================================ */
/* ■タブレットサイズのみ用スタイル */
/* ================================ */
@media screen and (max-width:940px) and (min-width:451px) {

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

}

/* ====================================================== */
/* ■タブレットサイズ以下用スタイル（スマホサイズも含む） */
/* ====================================================== */
@media screen and (max-width:940px) {


	/* ============ */
	/* ■ヘッダ領域 */
	/* ============ */
	.pageHeader{
		height: calc( 80vh + 2rem + 55px );	/* ベース高さ80vh＋上端余白量1.5rem＋タイヤサイズ80px */
		padding-bottom: 0;
	}

	.deepPage .pageHeader{
		height: auto;
	}

		/* …………………… */
		/* ▼ヘッダ情報群側 */
		/* …………………… */
		.headerTextSide{
			top:0;
			left:0;
			width: 100%;
		}

			/* …………………… */
			/* ▽会社名＋ロゴ枠 */
			/* …………………… */
			.headerTitle{
				text-align: center;
				width: 13rem;
				background: #f0f0f0;
				border-radius: 0 0 10px 10px;
				padding: 1rem 0 0.75rem 0;
				margin: 0 auto;
				font-size: 1.3rem;
				border-bottom: 7px solid #2e98e5;
			}
				.headerTitle img{
					height: 60px;
					margin: auto;
					left: 0;
					right: 0;
				}

				/* …………………… */
				/* ▽ヘッダリード枠 */
				/* …………………… */
				.headerLead{
					position: absolute;
					top: 62vh;
					left: 7.5vw;
					font-size: 1.5rem;
				}

				/* …………………… */
				/* ▽ヘッダ会社住所 */
				/* …………………… */
				.headerAddress{
					display: none;
				}

		/* ………………………… */
		/* ▼ヘッダスライダー側 */
		/* ………………………… */
		.headerSliderSide {
		}

			/* ………………… */
			/* ▽MVスライダー */
			/* ………………… */
			.slider {
				width: calc( 100% - 2rem );
				top: 2rem;
				right: 1rem;
				height: 80vh;
			}
				.slider-item {
					height: 80vh;
				}

			/* ……………… */
			/* MV右下タイヤ */
			/* ……………… */
			.pullingTire{
				top: unset;
				bottom: 0;
				right: 15px;	/* BOXが画面外に出るほど端に寄せる場合は、htmlとbodyにoverflow-x:hiddenが必須 */
			}

			/* ………………………………………… */
			/* ▼右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………… */
			.shoulderMenuBtnBox {
				display: none;
			}

			/* ………………………………………………… */
			/* ▼deep：右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………………… */
			.deepPage .shoulderMenuBtnBox {
				display: block;
			}

	/* ========== */
	/* ■本文領域 */
	/* ========== */
		/* ……………… */
		/* ▼ハロー区画 */
		/* ……………… */
		.helloContents {
			padding: 40px 0;
		}
			.helloTitle {
			}
				.helloPlace {
					display: block;
					font-size: 1.125rem;
					margin-top: 1.5rem;
				}
				.helloName { }
			.helloImgBox{
				width:50%;
				max-width: 300px;
				margin:0 auto 30px auto;
			}

				/* ‥‥‥‥‥‥‥ */
				/* ▽ハロー文言群 */
				/* ‥‥‥‥‥‥‥ */
				.helloTexts li{
					position: relative;
					font-size: min( 5vw , 1.33rem );
					top:inherit!important;
					left: inherit!important;
					right:inherit!important;
					transform: none!important;
					text-align: center;
					margin: 0 0 1em 0;
				}
				.helloTexts li:after{
					display: none!important;
				}

		/* ………………… */
		/* ▼サービス区画 */
		/* ………………… */
				/* 遅延アニメーション */
				.oneService:nth-child(2){ animation-delay: 0.2s; }
				.oneService:nth-child(3){ animation-delay: 0.1s; }
				.oneService:nth-child(4){ animation-delay: 0.3s; }
				.oneService:nth-child(5){ animation-delay: 0.2s; }

		/* ==================== */
		/* ■DeepPage：本文領域 */
		/* ==================== */

	/* ============ */
	/* ■フッタ領域 */
	/* ============ */
	.pageFooter {
		padding: 3.5rem 1rem 6rem 1rem;
	}
		.footerInside{
			flex-direction: column;
		}

			/* ……………… */
			/* ▼連絡先区画 */
			/* ……………… */
			.footerContact {
				width: 100%;
				border-bottom: 1px solid white;
				text-align: center;
				margin-bottom: 2rem;
				padding-bottom: 3rem;
			}
				.footerTitle {
					font-size: 1.5rem;
				}
				.footerAddress {
					letter-spacing: 0.125em;
				}

				/* コックピットタカハシボタン */
				.footerTakahashi {
					margin: 1.5rem 0 0 0;
					width: 100%;
				}

			/* ……………………… */
			/* ▼サイトマップ区画 */
			/* ……………………… */
			.footerSitemap {
				width: 100%;
			}
				.footerSitemapList {
					max-width: 700px;
					margin: auto;
				}


}

/* ====================================== */
/* ■スマートフォンサイズ用上書きスタイル */
/* ====================================== */
@media screen and (max-width:450px) {

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

	/* ============ */
	/* ■ヘッダ領域 */
	/* ============ */
	.pageHeader{
		height: calc( 425px + 1.5rem + 120px );	/* ベース高さ80vh＋上端余白量1.5rem＋下端タグライン */
		padding-bottom: 0;
	}

		/* …………………… */
		/* ▼ヘッダ情報群側 */
		/* …………………… */
			/* …………………… */
			/* ▽会社名＋ロゴ枠 */
			/* …………………… */
			.headerTitle {
				width: 10rem;
				font-size: 1rem;
			}
				.headerTitle img {
					height: 40px;
				}

				/* …………………… */
				/* ▽ヘッダリード枠 */
				/* …………………… */
				.headerLead{
					top: 465px;
					left: 10vw;
					font-size: 1.125rem;
					line-height: 1.5;
				}
					.yellowTape {
						background: linear-gradient(transparent 70%, yellow 70%);
						padding: 0 2.5px 5px;
					}

		/* ………………………… */
		/* ▼ヘッダスライダー側 */
		/* ………………………… */
		.headerSliderSide {
		}

			/* ………………… */
			/* ▽MVスライダー */
			/* ………………… */
			.slider {
				width: calc( 100% - 2rem );
				top: 2rem;
				right: 1rem;
				height: 425px;
			}
				.slider-item {
					height: 425px;
				}

			/* ……………… */
			/* MV右下タイヤ */
			/* ……………… */
			.pullingTire{
				top: unset;
				bottom: 60px;
				width:120px;
				height: 120px;
				right: 15px;	/* BOXが画面外に出るほど端に寄せる場合は、htmlとbodyにoverflow-x:hiddenが必須 */
			}

			/* ………………………………………… */
			/* ▼右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………… */
			.shoulderMenuBtnBox {
				display: block;
			}
				.shoulderMenu{
					position: fixed;
					z-index: 3;
					top:inherit;
					right:inherit;
					bottom:0;
					width: 100%;
					border-radius: 0;
				}
					/* 1.5画面スクロールするまで非表示にする */
					.mobileNoShow {
						display: none;
					}

				.shoulderMenu li{
					width:50%;
					text-align: center;
				} 
				.shoulderMenu li a{
					padding: 15px 15px 15px 40px;
				}
				.shoulderMenu li:first-child a,
				.shoulderMenu li:last-child a{
					background-position:20px center;
				}

				.shoulderMenu li .spnone{
					display: none;
				}
				.shoulderMenu li .pcnone{
					display: block;
				}

			/* ……………………… */
			/* ▼deep：左肩ロゴ枠 */
			/* ……………………… */
			.deepHeadTitle {
				margin: 0;
				padding: 0;
			}

			/* ………………………………………………… */
			/* ▼deep：右肩(モバイル下端)固定ボタン枠 */
			/* ………………………………………………… */
			.deepPage .shoulderMenuBtnBox {
				display: block;
			}
				.deepPage .shoulderMenu{
					top: inherit;
					right: inherit;
					border-radius: 0;
				}

			/* …………………… */
			/* ▼パンくずリスト */
			/* …………………… */
			.pankuzuBox {
				margin: 0.25rem 0 2.5rem;
				padding: 0 0 0 0.5rem;
			}
				.pankuzuList {
					font-size: 0.7rem;
				}

	/* ========== */
	/* ■本文領域 */
	/* ========== */
		/* ……………… */
		/* ▼ハロー区画 */
		/* ……………… */
		.helloArea {
			padding-top: 1.5rem;
		}

		/* ………………… */
		/* ▼お知らせ区画 */
		/* ………………… */
			.newsBody {
				padding: 2.5rem 0.75rem;
			}
				.newsBox {
					padding: 2rem 1rem;
				}

		/* ………………… */
		/* ▼サービス区画 */
		/* ………………… */
				/* 遅延アニメーション */
				.oneService:nth-child(2){ animation-delay: 0s; }
				.oneService:nth-child(3){ animation-delay: 0s; }
				.oneService:nth-child(4){ animation-delay: 0s; }
				.oneService:nth-child(5){ animation-delay: 0s; }

		/* ……………………… */
		/* ▼取扱メーカー区画 */
		/* ……………………… */
					.oneMaker {
						min-height: 32.5px;
					}
						.oneMaker img {
							width: 122px;
						}

		/* …………………… */
		/* ▼お客様の声区画 */
		/* …………………… */
						.oneVoiceBody {
							margin: 2rem 0.5rem;
						}

		/* …………………… */
		/* ▼コンタクト区画 */
		/* …………………… */
				.contactTitle {
					font-size: 1.25rem;
				}
				.contactAddress {
					font-size: 1.33rem;
				}
					.contactAddress .zip { font-size: 1rem; }

		/* ==================== */
		/* ■DeepPage：本文領域 */
		/* ==================== */
			/* ………………… */
			/* ▼アクセス区画 */
			/* ………………… */
					/* テーブルは崩して表示する */
					.accessTable {
						display: block;
						min-width: auto;
					}
					.accessTable tr,
					.accessTable th,
					.accessTable td {
						display: block;
						border-bottom: 0 none;
						padding: 0;
					}
					.accessTable td {
						border-bottom: 1px solid var( --back-gray );
						padding-bottom: 1rem;
						margin-bottom: 1rem;
					}

			/* ……………………… */
			/* ▼サービス冒頭区画 */
			/* ……………………… */
				.serviceFeatures {
					line-height: 1.2;
				}
					.feature1 {
						margin-bottom: 1.25rem;
					}
					.feature2 {
					}

			/* ……………………… */
			/* ▼サービス内容区画 */
			/* ……………………… */
				.serviceBodyTitle {
					line-height: 1.2;
				}
					.title1 {
						margin-bottom: 1.25rem;
					}
					.title2 {
					}

					.serviceDetailExp {
						gap: 1.25rem;
						padding: 1rem;
					}
						.serviceDetailTexts { }
							.serviceDetailTitle {
								border-bottom: 0 none;
								margin-bottom: 0.3rem;
							}
							.serviceDetailTexts p {
								line-height: 1.33;
								font-size: 1rem;
							}

				.serviceExpBox {
					padding: 1rem 0.75rem;
					text-align: justify;
				}

			/* …………………………… */
			/* ▼サービスイメージ区画 */
			/* …………………………… */
			.servicePhotoArea {
				margin: 2.5rem 0 0 0;
			}

			/* ……………………… */
			/* ▼お問い合わせ領域 */
			/* ……………………… */
							/* 入力テーブル：テーブルは崩す */
							.contacttable { }
								.contacttable tr,
								.contacttable th,
								.contacttable td {
									display: block;
								}

								/* 冒頭ガイド */
								.requireGuide {
									margin-bottom: 1rem;
								}
									.requireGuide i {
										letter-spacing: -1px;
									}

								/* 見出し段 */
								.itemLabel {
									margin-top: 0.25rem;
									padding: 0;
								}

								/* 入力段 */
								.inputColumn {
									margin-top: 0.1rem;
								}

									/* 入力欄の多段組 */
									.inputSetBox {
									}

									/* ラジオボタン・チェックボックス群枠 */
									.itemSelectArea {
										padding-left: 0.25rem;
										line-height: 1.75;
									}

	/* ============ */
	/* ■フッタ領域 */
	/* ============ */

			/* ……………………… */
			/* ▼サイトマップ区画 */
			/* ……………………… */
				.footerSitemapList li a {
					letter-spacing: 0;
				}

		/* ……………………… */
		/* ▼上端へ戻るボタン */
		/* ……………………… */
		#page-top{
			position: relative;
			text-align: center;
			right: inherit;
			bottom: inherit;
			margin: 50px auto 30px auto;
			width: 80px;
			animation: none!important;
			transform:none!important;
			opacity: 1;
		}

}


/* ―――――――――――― */
/* ★ループスライダー用CSS  */
/* ―――――――――――― */
/* ▼loopSlider  */
.loopSliderWrap { top: 0; left: 0; height: 390px; overflow: hidden; position: absolute; text-align: center; box-sizing: border-box; }
/* .loopSliderWrap p { margin:0; padding: 0; } */
.loopSlider { margin: 0 auto; width: 100%; height: 385px; text-align: left; position: relative; overflow: hidden; }
.loopSlider ul { margin:0; padding:0; height: 380px; float: left; overflow: hidden; }	/* 注意：margin/paddingを共に0にするのが必須 */
.loopSlider ul li { padding: 5px 10px;  float: left; display: inline; overflow: hidden; border: none; box-sizing: border-box; }
.loopSliderWrap:after { content: ""; display: none; clear: none; }

	/* 目玉商品ループスライダー用装飾 */
	.loopSlideshowArea .forLinkListBox {
		display: block;
		background-color: var( --back-cream );
		color: #000;
		margin: 0 0 5px 0;
		width: 276px;
		padding: 0 2em 0 2em;
		box-shadow: 5px 5px 5px gray;
		box-sizing: border-box;
	}
		.loopSlideshowArea .forLinkListBox a {
			color: #000;
		}
		.loopSlideshowArea .oneItemOnLinkList {
			color: black;
			display: block;
		}
			/* スライド枠内span共通装飾 */
			.loopSlideshowArea span {
				display: block;
				text-align: center;
				font-weight: 500;
				line-height: 1;
			}

			/* スライド内画像装飾 */
			.loopSlideshowArea .oneLinkImage img {
				display: block;
				max-width: 100%;
				height: auto;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				width: 100%;
				height: auto;
			}

			/* スライド内：価格 */
			.loopSlideshowArea .oneLinkPrice {
				background-color: var( --back-blue );
				color: white;
				margin: 0.75em 0;
				padding: 0.25em 0;
					font-size: 1.3em;
			}
			/* スライド内：商品名 */
			.loopSlideshowArea .oneLinkTitle {
					font-size: 1.1em;
					height: 2.5em;
				overflow: hidden;
			}
			/* スライド内：型番 */
			.loopSlideshowArea .oneLinkCodes {
					font-size: 1.1em;
				min-height: 2em;	/* 型番が2行になっても枠が拡張されないように、最初から広く確保しておく。 */
			}

/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/
/* 4-1 ふわっ（その場で） */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 4-2 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 4-2 パタッ（左上へ） */
.flipLeftTop{
animation-name: flipLeftTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 4-2 パタッ（右上へ） */
.flipRightTop{
animation-name: flipRightTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* 4-4 ボンッ（拡大） */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.zoomInTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}