@charset "utf-8";

/* 共通 --------------------------*/
/* ページ全体に関わるCSSの設定 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100;400;700&display=swap');

html *,
::before,
::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* フォント */
html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

body {
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	color: #676363;
	/* Noto Sans JPのレギュラーウェイトを指定 */
}

/* おもな太字タグのフォントウェイト設定 */
h1,
h2,
h3,
h4,
h5,
h6,
th,
strong {
	font-weight: 400;
	margin: 0;
	padding: 0;
}

p,
ul,
li {
	margin: 0;
	padding: 0;
}


/* ベースのリンクカラー */
a {
	
	text-decoration: none;
}

/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	/* 画像下のスペースを消す */
}

/* /ページ全体に関わるCSSの設定 */

/* /共通 --------------------------*/



/* モバイルメニュー ここから ---------------------------- */
@media (max-width: 767px) {

	/* sp */
	.navbtn {
		display: block;
		width: 60px;
		height: 60px;
		background-image: url(../images/nav-mobile-open.svg);
		background-repeat: no-repeat;
		background-size: 60px 60px;
		background-position: center center;
		position: fixed;
		top: 0px;
		/*left: 0px;ボタンの位置-左*/
		right: 0px;
		/*ボタンの位置-右*/
		z-index: 1;
	}

	.navbtn.close {
		background-image: url(../images/nav-mobile-close.svg);
	}

	.header-container {
		height: 70px;
	}

	.header-container .navbtn.close {
		background-color: hsla(0, 100%, 0%, 0.5);
		/*追加*/
		background-image: url(../images/nav-mobile-close.svg);
		background-size: 60px 60px;
		/*background-position: top left;ボタンの位置-左*/
		/*追加*/
		background-position: top right;
		/*ボタンの位置-右*/
		/*追加*/
		width: 100vw;
		height: 100vh;
	}

	.header-nav {
		position: fixed;
		top: 60px;
		width: 100vw;
		z-index: 2;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.header-nav.collapse {
		display: none;
	}

	.header-nav li a {
		display: block;
		padding: 20px 30px;
		border-top: 1px solid #d8d8d8;
		background: #efefef;
		color: #000;
		text-decoration: none;
	}

	.header-nav li a:hover {
		background: #b8e5ea;
	}
}

@media (min-width: 768px) {

	/* pc */
	.navbtn {
		display: none;
	}

	.header-nav {
		display: flex !important;
		flex-direction: row;
		justify-content: center;
		list-style-type: none;
		margin-bottom: 15px;
		gap: 25px;
		font-size: 18px;
	}

	.header-nav li a {
		margin: 6px 10px 2px 10px;
		padding: 0px 0px 0px 0px;
		border-top: none;
		border-bottom: 4px solid transparent;
		background: none;
		text-decoration: none;
		font-family: 'Noto Sans JP', sans-serif;
		color: #804f21;
	}

	.header-nav li a:hover {
		border-bottom: 4px solid #804f21;
		background: none;
	}
}

/* /モバイルメニュー ここまで ---------------------------- */
h1 {
	max-width: 200px;
	margin: 10px 5% 20px;
}

.sp-main {
	text-align: center;
}

.pc-main {
	display: none;
}


.i-container {
	padding: 0 5%;
}

.i-p {
	max-width: 280px;
	margin: 50px auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.i-n {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 20px;
	margin: 10px 0 30px;
	font-size: 20px;
}

h3 {
	font-size: 20px;
	font-weight: bold;
	margin: 30px 0 10px;
}

.i-intyoulead {
	font-size: 15px;
	line-height: 36px;
}

.i-aisatu {
	margin: 60px 0;
}


@media (min-width: 768px) {

	h1 {
		max-width: 500px;
		margin: 85px auto 104px;
	}

	.sp-main {
		display: none;
	}

	.pc-main {
		display: block;
		text-align: center;
	}


	.i-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 140px 0 220px;
		gap: 32px 32px
	}

	.i-p {
		max-width: 500px;
		text-align: center;
		padding: 0 0 0 10%;
	}

	.i-n {
		font-size: 36px;
		justify-content: center;
		margin: 20px 0 0 30px;
	}


	h3 {
		font-size: 36px;
		text-align: left;
		margin: 0 0 32px;
		padding: 10% 5% 0 0;
	}

	.i-intyoulead {
		font-size: 20px;
		text-align: left;
		padding: 0 15% 0 0;
	}

}

.s-container {
	padding: 0 5%;

}

h2 {
	text-align: center;
	margin: 120px 0 50px;
	padding: 10px;
	font-size: 35px;
	font-weight: bold;
	position: relative;
	text-align: center;

}


h2:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	border-bottom: solid 3px #2ea7e0;
	transform: translateX(-50%);
	animation: border_anim 2s linear forwards;
}

@keyframes border_anim {
	0% {
		width: 100%;
	}

	100% {
		width: 180px;
	}
}


.s-icon {
	max-width: 200px;
	margin: 45px auto 0;
}

.s-name {
	font-size: 21px;
	text-align: center;
	margin: 5px 0;
	font-weight: bold;
}


@media (min-width: 768px) {

	h2 {
		font-size: 48px;
		margin-bottom: 100px;

	}

	.s-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin: 67px 0 220px;
	}

	.s-icon {
		margin: auto;
	}

	.s-name {
		text-align: center;
	}

	.s-icon {
		max-width: 250px;
	}

}


.innai-container {
	text-align: center;
	padding: 0 5%;
}

.innai-name {
	font-size: 18px;
	margin: 5px 0 10px;
}

.innai-lead {
	margin-bottom: 60px;
	line-height: 24px;
	text-align: left
}


@media (min-width: 768px) {
	.innai-container {
		margin: 67px 0 220px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px 100px;
	}

	.innai-picture {
		text-align: center;
	}

	.innai-name {
		font-size: 24px;
	}

	.innai-lead {
		padding: 20px 0;
		line-height: 28px
	}


}

.a-container {
	padding: 0 5%;
}

.map {
	text-align: center;
}

.a-name {
	list-style-type: square;
	font-size: 16px;
	margin-bottom: 5px;

}

.a-lead {
	list-style: none;
	font-size: 14px;
}

.a-train {
	margin: 4px 0 11px;
	padding: 0 0 0 30px;
}

.a-car {
	margin-bottom: 11px;
	padding: 0 0 0 30px;
}

.address {
	margin: 33px 0;
}



.address-lead {
	margin: 10px 0 0 0;
	line-height: 24px;
}




.a-tell {
	margin-bottom: 25px;
	display: flex;
	gap: 30px;

}

a {
	color: #676363;
}


table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	border: 1px solid black;
	padding: 10px;
	text-align: center;
}

th {
	background-color: #f2f2f2;
}

.a-notice {
	padding: 10px 0 0 30px;
	list-style-type: square;
	margin-bottom: 100px;
}


@media (min-width: 768px) {

	.a-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 53px;
		margin: 54px 0 180px 0;
	}

	.map {
		text-align: left;
	}

	.address-name {
		display: none;
	}

	.address {
		text-align: left;
		padding: 0 0 33px;
	}

	.address-lead {
		font-size: 21px;
		line-height: 36px;
	}

	.address-lead-namber {
		min-width: 1187px;
	}

	.a-tell {
		text-align: left;
		padding: 0 0 33px;
	}

	.a-yoyaku {
		font-size: 21px;
	}

	.a-bangou {
		font-size: 21px;
	}

	th,
	td {
		border: 1px solid black;
		padding: 10px 0;
		text-align: center;
	}





}

footer {
	background-color: #2ea7e0;
	padding: 40px 0 20px;
	text-align: center;
	color: #ffffff;
}

.f-nav {
	color: #ffffff;
	display: grid;
	gap: 33px;
	margin: 27px 0 46px;

}




@media (min-width: 768px) {
	.f-logo {
		margin: 0 0 50px;
	}

	.f-nav {
		
		display: flex;
		justify-content: center;
		list-style: none;
	}
}

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	max-width: 80px;
}

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition: all 1s;
}