@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
}

html {
	font-size: 16px;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
body領域ここから
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.outerWrapper {
	width: min(95%, 1200px);
	height: auto;
	margin: 0 auto;
	position: relative;
}

h1 {
	display: inline-box;
	font-family: "Impact", sans-serif;
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	color: #555;
}

h2 {
	width: 18rem;
	font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	border-left: solid 5px red;
	border-bottom: solid 1px red;
	padding-left: 0.5rem;
	margin-top: 1rem;
	margin-left: 1rem;
	margin-bottom: 1rem;
	color: #555;
}

caption {
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	font-weight: bold;
	color: #555;
}

p {
	font-family: "Noto Sans JP", "Impact", Arial, Helvetica, sans-serif,;
	font-size: clamp(0.8rem, 1.333vw, 1rem);
	color: #555;
}

time {
		display: block;
		width: 8rem;
		color: #555;
		border-bottom: solid 1px red;
		margin-bottom: 0.5rem;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: bold;
}
	
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ヘッダー領域＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.headerContainer {
	width: min(100%, 1200px);
	height: 70px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer {
	width: min(50%, 600px);
	height: 70px;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(40px, 4.166vw, 50px);
	height: clamp(40px, 4.166vw, 50px);
	border-radius: 50%;
	font-family: "Impact",Arial, Helvetica, sans-serif, "Noto Sans JP";
	font-size: clamp(1.125rem, 0.974rem + 0.701vw, 1.5rem);
	background-color:red;
	color: #fff;
	margin: 0 10px;
	text-decoration: none;
}

.logo:hover {
	box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	background-color: #fff;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.4);
	 text-decoration: none;
}

.companyName h1 {
	width: min(100%, 300px);
	line-height: 70px;
	color: #fff;
	font-family: "Impact",Arial, Helvetica, sans-serif;
	font-size: clamp(2rem, 1.799rem + 0.935vw, 2.5rem);
	letter-spacing: 0.1rem;	
	text-decoration: none;
}

.companyName h1:hover {
	/* box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 background-color: #fff;
	 color: red; */
	 color: red;
	 text-shadow: 6px 6px 6px rgba(255, 255, 255, 0.5);
	 border-radius:25%;
	 text-decoration: none;
}

/* .companyName h1 span {
	color: red;
} */

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊
ナビゲーション領域＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（PC）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/
@media (min-width: 769px) {
	.globalNav {
		width: min(50%, 600px);
		height: 70px;
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
	}

	.globalNav ul {
		width: 100%;
		height: 70px;
		display: flex;
		justify-content: end;
		align-items: center;
		background-color: dimgray;
	}

	.globalNav ul li {
		display: inline-block;
		width: 30%;
		height: 40px;
		margin-right: 1.67%;
	}

	.globalNav ul li a {
		background-color: darkgray;
		display: inline-block;
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-family: "Impact", Arial, Helvetica, sans-serif;
		font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
		letter-spacing: 0.03rem;
		color: #fff;
		border: solid 1px gray;
	}

	.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border: transparent;
  }
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここから↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

.nav-btn {
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	cursor: pointer;
	color: #aaa;
	font-size: 25px;
	position: absolute;
	right: 30px;
	line-height: 70px;
}

.open .nav-btn {
	z-index: 110;
}

.nav-btn .fa-bars {
	display: revert;
}

.open .nav-btn .fa-bars {
	display: none;
}

.nav-btn .batu {
	display: none;
}

.open .nav-btn .batu {
	display: revert;
}

.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border-radius: 10%;
	 border: transparent;
  }

@media (min-width: 769px) {
	.nav-btn {
		display: none;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここまで↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（スマートフォン）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

@media (max-width: 768px) {
	.globalNav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: dimgray;
		color: #fff;
		transition: transform 0.3s;
	}

	.open .globalNav {
		transform: translate(-100%, 0);
	}

	.globalNav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
	}

	.globalNav ul li a {
		color: #fff;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊
ナビゲーション領域ここまで
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 ここから ↓
.mainWrapper 
.accessMapContainer > .accessContainer, .mapContainer
.inquiryformContainer > .inquiryContainer, .formContainer
/.mainWrapper
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

.mainWrapper {
	width: min(100%, 1200px);
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 アクセス情報／地図 
レスポンシブ対応 width: 961px以上タブレット PCここから ↓ */

@media(min-width: 961px) {
	.accessMapContainer {
		width: min(100%, 1200px);
		height: auto;
		/* margin-topは32px~24pxの間で縮小拡大; */
		margin-top: clamp(1.5rem, -0.510rem + 3.347vw, 2rem);
		/* margin-bottomは32px~24pxの間で縮小拡大; */
		margin-bottom: clamp(1.5rem, -0.510rem + 3.347vw, 2rem);
		margin-inline: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.accessContainer {
		/* width: min(37.5%, 450px); */
		width: min(39.167%, 470px);
		margin-right: 24px;
		height: auto;
		font-size: 1rem;
		/* background-color: lightgray; */
	}

	/* .accessContainer h2 {
		padding: 1rem 0 1rem 1rem;
		font-size: 1.5rem;
	} */

	.accessContainer ul {
		width: min(100%, 470px);
		height: auto;
		padding: 0 16px 16px 16px;
		color: #555;
	}

	ul .even {
		display: inline-block;
		width: min(100%, 80px);
		text-align: justify;
		text-align-last: justify;
	}

	.accessContainer figure {
		display: block;
		width: min(100%, 470px);
		height: min(100%,313.3px);
		padding: 0 16px 16px 16px;
		font-size: 16px;
		position: relative;
	}

	.img {
		display: block;
	  width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		background-color: dimgray;
	}

	.dummy {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2vw;
		font-weight: bold;
		color: #fff;
		 background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
		 
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		margin-inline: auto;
		background-color: dimgray;
	}

	figcaption {
		display: block;
		color: #555;
	}

	.mapContainer {
		width: min(60%, 700px);
		height: auto;
		font-size: 1rem;
		/* background-color: lightgray; */
	}

	.mapContainer p {
		font-size: 16px;
		padding:0 0 16px 16px;
	}

	.mapContainer iframe {
		width: min(100%, 700px);
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* アクセス情報／地図 ここまで ↑ 
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
 よくあるお問い合わせ／フォームテーブル ここから ↓
 .inquiryFormContainer > .inquriyContainer, .formContainer */

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
「よくあるお問い合わせ」inquiryContainer ／「フォーム」formContainer　横並び 961px ~ 1200px ここから ↓*/

@media(min-width: 961px) {
	.inquiryformContainer {
		width: min(100%, 1200px);
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* margin-bottomは30px~24pxの間で縮小拡大; */
		margin-bottom: clamp(1.5rem, -0.008rem + 2.51vw, 1.875rem);
	}

	.inquiryContainer {
		width: min(39.167%, 470px);
		height: auto;
		margin-right: 24px;
		/* background-color: lightgray; */
	}

	/* .inquiryContainer h2 {
		padding: 1rem;
		font-size: 24px;
	} */

	.inquiryContainer p {
		font-size: 16px;
		}

	.question {
		text-indent: -1.375rem;
		padding: 0 16px 8px 2.5rem;
	}

	.ans {
		text-indent: -1.375rem;
		padding: 0 16px 16px 2.5rem;
		font-size: 16px;
	}

	.ans a {
		text-decoration:underline;
	}

	.formContainer {
		width: min(60%, 700px);
		height: auto;
		/* background-color: lightgray; */
	}

	/* .formContainer h2 {
		font-size: 24px;
		padding: 1rem;
	} */

	form {
		/* formのwidthはformContainerの内側左右に1remの隙間をつくるため700px-2rem(32px)=668pxとした */
		width: min(95.43%, 668px);
		/* width: min(100%,  clamp(35rem, 0.000rem + 58.333vw, 43.75rem)); */
		height: auto;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, fr);
		grid-template-rows: repeat(6, fr);
		grid-row-gap: 5px;
		grid-column-gap: 5px;
	}

	.box1 {
		grid-row: 1;
		grid-column: 1;
	}

	.box2 {
		grid-row: 1;
		grid-column: 2 / 4;
	}

	.box3 {
		grid-row: 2;
		grid-column: 1;
	}

	.box4 {
		grid-row: 2; 
		grid-column: 2 / 4;
	}

	.box5 {
		grid-row: 3;
		grid-column: 1;
	}

	.box6 {
		grid-row: 3;
		grid-column: 2 / 4;
	}

	.box7 {
		grid-row: 4;
		grid-column: 1;
	}

	.box8 {
		grid-row: 4;
		grid-column: 2 / 4;
	}

	.box9 {
		grid-row: 5;
		grid-column: 1
	}

	.box10 {
		grid-row: 5;
		grid-column: 2 / 4;
	}

	.box11 {
		grid-row: 6;
		grid-column: 2 / 3;
	}

	.box1, .box3, .box5, .box7, .box9 {
		width: min(100%, 250px);
		/* height: 50px ~ 40pxの範囲で縮小拡大 */
		height: clamp(1.875rem, 0.621rem + 3.339vw, 3.125rem);
		line-height: clamp(1.875rem, 0.621rem + 3.339vw, 3.125rem);
		font-size: 1rem;		
		text-align: center;
		border: solid 1px darkgray;
		background-color: darkgray;
		color: #fff;
	}

	.box2, .box4, .box6, .box8 {
		width: min(100%, 450px);
		/* height 50px~40pxへ*/
		height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		line-height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		font-size: 16px;
		text-align: left;
		text-indent: 1rem;
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}

	 .box10 {
		width: min(100%, 450px);
		/* height 150px120pxへ*/
		height: clamp(7.5rem, 0.000rem + 12.5vw, 9.375rem);
		text-align: left;
		padding: 0 16px 0 16px;
		font-size: 16px;
		line-height: 1.6;
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}
 
	 .box11  {
		/* widthは125px ~ 100pxの間で縮小拡大 */
		width: clamp(6.25rem, 0.000rem + 10.417vw, 7.813rem);
		/* height 50px~40pxの間で縮小拡大*/
		height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		line-height:clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);	
		text-align: center;
		border: solid 1px darkgray;
		background-color: darkgray;
		color: #fff;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 アクセス情報／地図 
レスポンシブ対応 width:960px以下 タブレット／スマホ対応ここから↓ */

@media(max-width: 960px) {

	.accessMapContainer {
		width: min(100%, 960px);
		height: auto;
		/* margin-topは32px ~ 24pxの範囲で拡大縮小 */
		margin-top: clamp(1.5rem, 0.663rem + 2.228vw, 2rem);
		margin-right: auto;
		/* margin-bottomは32px ~ 24pxの範囲で拡大縮小 */
		margin-bottom: clamp(1.5rem, 0.663rem + 2.228vw, 2rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.accessContainer {
		width: min(100%, 960px);
		height: auto;
		/* background-color: lightgray; */
		display: grid;
		grid-template-columns: repeat(3, fr);
		grid-template-rows: 2fr;
	}

	/* .accessContainer h2 {
		padding: 16px;
		text-align: center;
		font-size: 24px;
		grid-row: 1;
		grid-column: 1 / 4;
	} */

	.accessContainer ul {
		grid-row: 2;
		grid-column: 1;		
		width: min(100%, 500px);
		height: auto;
		padding: 0 8px 16px 16px;
		font-size: 16px;
		color: #555;
	}

	.accessList {
		display: block;
		margin-right: 16px;
		width: 100%;
		height: auto;
	}
	ul .even {
		display: inline-block;
		width: min(100%, 80px);
		width: 80px;
		text-align: justify;
		text-align-last: justify;
	}

	figure {
		grid-row: 2;
		grid-column: 3 / 4;
		width:100%;
		height: auto;	
		padding: 0 16px 16px 8px;
		position: relative;
		text-align: center;
	}

	.dummy {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2.5vw;
		font-weight: bold;
		color: #fff;
		background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
		backdrop-filter: blur(2px);
	}

	.img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		text-align: center;
	}

	img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;		
	}

	figcaption {
		display: block;
		width: 340px;
		height: auto;
		margin-inline: auto;
		text-align: left;
		font-size: 16px;
		color: #555;
	}

	.mapContainer {
		width: min(100%, 960px);
		height: auto;
		background-color: light-gray;
			/* margin-topは32px ~ 24pxの範囲で拡大縮小 */
		margin-top: clamp(1.5rem, 0.663rem + 2.228vw, 2rem);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		/* 
		background-color: lightgray; */
	}

	.mapContainer h2 {
		width: min(100%,18rem);
		font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
		font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
		border-left: solid 5px red;
		border-bottom: solid 1px red;
		padding-left: 0.5rem;
		margin-top: 1rem;
		margin-left: 1rem;
		margin-bottom: 1rem;
		text-align: left;
		color: #555;
	}

	.mapContainer iframe {
		display: block;
		width: min(100%, 960px);
		height: auto;
		aspect-ratio: 3 / 2;
		text-align: center;
	}

	/* .mapContainer h2 {
		text-align: center;
		padding: 16px;
		font-size: 24px;
	} */

	.mapContainer p {
		text-align: left;
		text-indent:-60px;
		padding: 0 16px 16px 80px;
		font-size: 16px;
	}
}
   /* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
 メイン領域 よくあるお問い合わせ／フォームテーブル
 レスポンシブ対応 960px以下タブレットスマホ対応 ここから ↓*/

@media(max-width: 960px) {

	.inquiryFormContainer {
		width: min(100%, 960px);
		height: auto;
		display: flex;
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
	}

	.inquiryContainer {
		width: min(100%, 960px);
		height: auto;
		margin-inline: auto;
	/* margin-bottomは32px~24pxの間で縮小拡大; */
		margin-bottom: clamp(1.5rem, -0.510rem + 3.347vw, 2rem);
		padding-top: 8px;
		/* background-color: lightgray; */
	}

	.inquiryContainer h2 {
		width: min(100%,18rem);
		font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
		font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
		border-left: solid 5px red;
		border-bottom: solid 1px red;
		padding-left: 0.5rem;
		/* margin-top: 1rem; */
		margin-left: 1rem;
		margin-bottom: 1rem;
		color: #555;
	}

	.question {
		padding: 0 16px 8px  16px;
		font-size: 16px;
	}

	.ans {
		text-indent: -22px;
		padding: 0 16px 16px 40px;
		font-size: 16px;
	} 

	.ans a {
		text-decoration:underline;
	}

	.formContainer {
		width: min(100%, 960px);
		margin-left: auto;
		margin-right: auto;
	/* margin-bottomは32px~24pxの間で縮小拡大; */
		margin-bottom: clamp(1.5rem, -0.510rem + 3.347vw, 2rem);
	}

 /*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
 お問い合わせフォーム　レスポンシブ対応 
 601px以上 ~  960px以下　TB対応 ここから ↓ */
	.formContainer {
		width: min(100%, 960px);
		height: auto;
		padding-top: 8px;
		/* background-color: lightgray; */
	}

	.formContainer h2 {
		width: min(100%,18rem);
		font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
		font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
		border-left: solid 5px red;
		border-bottom: solid 1px red;
		padding-left: 0.5rem;
		/* margin-top: 1rem; */
		margin-left: 1rem;
		margin-bottom: 1rem;
		color: #555;
	}

	form {
		/* formのwidthはformContainerの内側左右に1remの隙間をつくるため960px-2rem(32px)=928pxとした */
		width: min(96.7%, 928px);
		height: auto;
		margin-inline: auto;
		padding-bottom: 16px;
		display: grid;
		grid-template-columns: repeat(3, fr);
		grid-template-rows: repeat(6, fr);
		grid-row-gap: 5px;
		grid-column-gap: 5px;
	}

	.box1 {
		grid-row: 1;
		grid-column: 1;
	}

	.box2 {
		grid-row: 1;
		grid-column: 2 / 4;
	}

	.box3 {
		grid-row: 2;
		grid-column: 1;
	}

	.box4 {
		grid-row: 2; 
		grid-column: 2 / 4;
	}

	.box5 {
		grid-row: 3;
		grid-column: 1;
	}

	.box6 {
		grid-row: 3;
		grid-column: 2 / 4;
	}

	.box7 {
		grid-row: 4;
		grid-column: 1;
	}

	.box8 {
		grid-row: 4;
		grid-column: 2 / 4;
	}

	.box9 {
		grid-row: 5;
		grid-column: 1
	}

	.box10 {
		grid-row: 5;
		grid-column: 2 / 4;
	}

	.box11 {
		grid-row: 6;
		grid-column: 2 / 3;
	}

	.box1, .box3, .box5, .box7, .box9 {
		width: min(100%, 295px);
		/* height: 50px ~ 40pxの範囲で縮小拡大 */
		height: clamp(1.875rem, 0.621rem + 3.339vw, 3.125rem);
		line-height: clamp(1.875rem, 0.621rem + 3.339vw, 3.125rem);
		font-size: 1rem;		
		text-align: center;
		background-color: darkgray;
		color: #fff;
	}

	.box2, .box4, .box6, .box8 {
		width: min(100%, 580px);
		/* height 50px~40pxへ*/
		height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		line-height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		font-size: 1rem;
		text-align: left;
		text-indent: 1rem;
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}

	 .box10 {
		width: min(100%, 580px);
		/* height 150px120pxへ*/
		height: clamp(7.5rem, 0.000rem + 12.5vw, 9.375rem);
		text-align: left;
		/* text-indent: -16px; */
		/* padding-left: 16px; */
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}
 
	 .box11  {
		/* widthは125px ~ 100pxの間で縮小拡大 */
		width: clamp(6.25rem, 0.000rem + 10.417vw, 7.813rem);
		/* height 50px~40pxの間で縮小拡大*/
		height: clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);
		line-height:clamp(2.5rem, 0.000rem + 4.167vw, 3.125rem);	
		text-align: center;
		font-size: 16px;
		border: solid 1px darkgray;
		background-color: darkgray;
		color: #fff;
	}
}
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
アクセス情報、お問い合わせフォーム レスポンシブ対応 width:600px以下 スマホ対応ここから 横並びから縦並びへレイアウト変更↓ */

@media(max-width:600px) {

	.accessContainer {
		width: min(100%, 600px);
		height: auto;
		/* background-color: lightgray; */
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 3fr;
	}

	.accessContainer h2 {
		grid-row: 1;
		grid-column: 1;
		width: min(100%, 18rem);
	font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	border-left: solid 5px red;
	border-bottom: solid 1px red;
	padding-left: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: #555;
	}

	.accessContainer ul {
		grid-row: 2;
		grid-column: 1;		
		width: min(100%, 600px);
		height: auto;
		padding: 0 8px 16px 16px;
		font-size: 16px;
		color: #555;
	}

	figure {
		grid-row: 3;
		grid-column: 1;
		width: min(100%, 600px);
		height: auto;	
		place-self: center;
		padding: 0 16px 16px 16px;
	}

	.dummy {
		position: absolute;
		top: 33%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 5.3vw;
		font-weight: bold;
		color: #fff;
		background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
		backdrop-filter: blur(2px);
	}

	img {
		width: 100%;
		height: auto;		
		aspect-ratio: 3 / 2;
		text-align: center;
	}

	figcaption {
		width: min(100%, 600px);
		font-size: 16px;
		color: #555;
	}

	.mapContainer h2 {
	text-align: left;
	}

	.inquiryContainer h2 {
	width: min(100%,18rem);
	font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	border-left: solid 5px red;
	border-bottom: solid 1px red;
	padding-left: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: #555;
	}

	.inquiryContainer .question {
		text-indent: -1.375rem;
		padding-left: 2.5rem;
	}

	.inquiryContainer .ans {
		text-indent: -22px;
		padding-left: 40px;
	}

	.formContainer {
		width: min(100%, 600px);
		height: auto;
		/* background-color: lightgray; */
	}

	.formContainer h2 {
		width: min(100%,18rem);
	font-family: "Noto Sans JP", "Inpact", Arial, Helvetica, sans-serif;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	border-left: solid 5px red;
	border-bottom: solid 1px red;
	padding-left: 0.5rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: #555;
	}

	form {
		/* formのwidthはformContainerの内側左右に1remの隙間をつくるため960px-2rem(32px)=928pxとした */
		width: min(96.7%, 928px);
		height: auto;
		margin-inline: auto;
		padding-bottom: 16px;
		display: grid;
		grid-template-columns: repeat(1, fr);
		grid-template-rows: repeat(11, fr);
		grid-row-gap: 5px;
		grid-column-gap: 5px;
	}

	.box1 {
		grid-row: 1;
		grid-column: 1;
	}

	.box2 {
		grid-row: 2;
		grid-column: 1
	}

	.box3 {
		grid-row: 3;
		grid-column: 1;
	}

	.box4 {
		grid-row: 4; 
		grid-column: 1;
	}

	.box5 {
		grid-row: 5;
		grid-column: 1;
	}

	.box6 {
		grid-row: 6;
		grid-column: 1;
	}

	.box7 {
		grid-row: 7;
		grid-column: 1;
	}

	.box8 {
		grid-row: 8;
		grid-column: 1;
	}

	.box9 {
		grid-row: 9;
		grid-column: 1
	}

	.box10 {
		grid-row: 10;
		grid-column: 1;
	}

	.box11 {
		grid-row: 11;
		grid-column: 1
	}

	.box1, .box3, .box5, .box7, .box9 {
		/* widthの値の計算600px-32px/3*2≒378.7px */
		width: min(100%, 378.7px);
		/*formContainer 600px ~ 344pxの間で heightは 40px ~ 30pxの範囲で縮小拡大 */
		height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);
		line-height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);
		/*formContainer 600px ~ 344pxの間で font-sizeは 16px ~ 14pxの範囲で縮小拡大 */
		margin-inline: auto;
		font-size: clamp(0.875rem, 0.707rem + 0.781vw, 1rem);		
		text-align: center;
		background-color: darkgray;
		color: #fff;
	}

	.box2, .box4, .box6, .box8 {
		/* widthの値の計算600px-32px/3*2≒378.7px */
		width: min(100%, 378.7px);
		/*formContainer 600px ~ 344pxの間で heightは 40px ~ 30pxの範囲で縮小拡大 */
		height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);
		line-height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);
		margin-inline: auto;
		/*formContainer 600px ~ 344pxの間で font-sizeは 16px ~ 14pxの範囲で縮小拡大 */
		font-size: clamp(0.875rem, 0.707rem + 0.781vw, 1rem);		
		text-align: left;
		text-indent: 16px;
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}

	.box8 {
		color: #555;
	}

	.box10 {
		/* widthの値の計算600px-32px/3*2≒378.7px */
		width: min(100%, 378.7px);
		/* height 120pxから80pxへ*/
		height: clamp(5rem, 1.641rem + 15.625vw, 7.5rem);
		margin-inline: auto;
		text-align: left;
		text-indent: 16px;
		background-color: rgb(250 240 230);
		border: solid 1px silver;
		color: #555;
	}
 
	 .box11  {
		/* widthはコンテナ600px ~ 344pxの間　125px ~ 100pxの間で縮小拡大 */
		width: clamp(6.25rem, 4.570rem + 7.813vw, 7.5rem);
		/* width: min(100%, 568px); */
		/* height 50px~40pxの間で縮小拡大*/
		/*formContainer 600px ~ 344pxの間で heightは 40px ~ 30pxの範囲で縮小拡大 */
		height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);
		line-height: clamp(1.875rem, 1.035rem + 3.906vw, 2.5rem);	
		margin-inline: auto;
		text-align: center;
		background-color: darkgray;
		color: #fff;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域 ここまで
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター領域レスポンシブ共通　ここから　↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.footerContainer {
	display: block;
	margin: 0 auto;
	width: min(100%, 1200px);
	/* height: 300px; */
	height: auto;
	background-color: dimgray;
	border: solid 1px #fff;
	padding-bottom: 50px;
}

.navTermsOuter {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッターナビゲーション　ここから　↓ */
.footerNav {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-between;
	flex-direction: flex-start;
	align-items: center;
}

.footerNav ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.footerNav ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:last-child {
	margin-right: none;
} */

.footerNav ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: "Impact", Arial, Helvetica, sans-serif;
	font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
	letter-spacing: 0.03rem;
	color: white;
	border: solid 1px gray;
}

.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:first-child {
	margin-left: 10px;
} */

/* ＊＊＊フッターナビゲーション　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター部各種条項・コピーライト　ここから↓ */

.termsConditions {
	width: min(100%, 600px);
	height: 70px;
	display: block;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
各種条項　ここから　↓　 */
.termsConditions ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-end;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.termsConditions ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

.termsConditions ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: clamp(14px, 1.33vw, 16px);	
	color: #fff;
	border: solid 1px gray;
}

.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* 各種条項　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* ＊＊＊問い合わせ先＊＊＊ */

.footerContactCopy {
	width: 100%;
	height: auto;
	text-align: center;
	display: block;
	margin-top: 20px;
	font-family: "Noto sans JP", sans-serif;
	color: #fff;
}

.address,
.contact {
	margin: 0 auto;
	text-align: center;
}

.address p,
.contact p {
	font-size: clamp(14px, 1.33vw, 16px);
	color: #fff;
}

/* ＊＊＊コピーライト＊＊＊ */

.copyRight {
	display: block;
	text-align: center;
	font-size: clamp(14px, 1.33vw, 16px);
}

/* ****************************************
タブレットサイズ ブレークポイント 975px以下
******************************************/
/*＊＊＊フッターナビゲーションと各種条項を縦並び中央寄せ＊＊＊ */

@media(max-width: 975px) {

	.navTermsOuter {
		width: min(100%, 600px);
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		justify-content: flex-start;
	}

	.navTermsOuter ul {
		justify-content: center;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	/* .footerNav ul li:first-child {
		margin-left: 0;
	} */

	.footerContractCopy p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}
}
/* ****************************************
スマホサイズ ブレークポイント 600px以下
******************************************/

@media(max-width: 600px) {

	/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
		 ヘッダー領域 社名に幅を与えて中央寄せに配置を変更する */

	.logoNameContainer {
		width: min(100%, 300px);
		margin: 0 auto;
	}

	/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	フッター領域 
	フッターナブ、各条項、コピーライトを縦並び1列表示にする*/

	.navTermsOuter {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-top: 10px;
	}

	.footerContainer {
		width: min(100%, 600px);
		height: auto;
		display: block;
	}

	.footerNav {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-inline: auto;
		margin-top: 20px;
	}

	.footerNav ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}

	.footerNav ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.termsConditions ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin-inline: auto;
	}

	.termsConditions ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin: 0 auto 10px;
	}

	.termsConditions ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.footerContactCopy {
		display: block;
		width: min(100%, 600px);
		height: auto;
		margin-top: 80px;
	}

	.address p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}
}