@charset "UTF-8";

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}


/*-----------------------------------------------------------------------------------------
10001 TYPO
10002 area-hero
10003 area-feat
10004 area-info
10005 area-guide
10006 area-feat second
10007 area-about
10008 area-map

----------------------------------------------------------------------------------------- */







/*-----------------------------------------------------------------------------------------
10001 TYPO
----------------------------------------------------------------------------------------- */
.index h3 {
	color: var(--color-font);
	font-weight: 700;
	line-height: 1.2;
	font-weight: 700;
	font-size: 7.0rem;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0;
	margin: 0 0 9.0rem 0;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {
	.index h3 {
		font-size: calc( 7.0rem * 0.8);
		margin: 0 0 3.0rem 0;

	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10002 area-hero
----------------------------------------------------------------------------------------- */
.area-hero {
	border: 0pt solid red;
	width: 100%;
	height: auto;
	padding: 0;padding:2.5vw;
	margin: 0;
	background: white;
}

.area-hero figure {
	width: auto;
	max-width: 88.0rem;
	max-width:1400px;
	width:80%;

}

.area-hero img {
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {
	.area-hero {
		padding: 3.0rem;
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10003 area-feat
----------------------------------------------------------------------------------------- */
.area-feat {
	border: 0pt solid green;
	width: 100%;
	height: auto;
	padding: 1.5rem 0;
	margin: 0;
	background: var(--color-blue0);
	background-image: url('../img/common/bg-feat.jpg');
	background-repeat: repeat;
	background-position:center center;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10004 area-info
----------------------------------------------------------------------------------------- */
.area-info {
	border: 0pt solid blue;
	background: white;
	padding: 9.0rem 0 6.0rem;
	margin:0;
	width: 100%;
	height: auto;
}

.area-info a {
	display: block;
	width: 100%;
}

.area-info dl {
	width: 100%;
	padding: 0;
	margin: 0 0 1.2rem 0;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #ddd
}

.area-info dl dt,
.area-info dl dd {
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.4;
	padding: 0.7em 1em;
	margin: 0;
	color: var(--color-font);
	letter-spacing: 0.05em;
}

.area-info dl dt {
	background: #d1c0a5;
	color: white;
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
	width: 9em;
}

.area-info dl dd {
	width: calc(100% - 9em);
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {
	.area-info {
		padding: 4.5rem 0 ;
	}
}

@media screen and (max-width: 840px) {
	.area-info .col-08 {
		width:calc( 100% /12 *12);
	}
	.area-info .col-04 {
		width:calc( 100% /12 *12);
	}

	.area-info dl dt,
	.area-info dl dd {
		font-size: calc( 1.6rem * 1.2);
	}

	.area-info dl {
		display:block;
	border-top: 1px solid #ddd;
	border-bottom: none;
	}

	.area-info dl dt,
	.area-info dl dd {
		padding:0.2em 0.5em 0.3em 0.5em;
	}

	.area-info dl dt {
		width: 9em;
	}

	.area-info dl dd {
		width: 100%;
		font-size: calc( 1.6rem * 1.1);
	}
}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10005 area-guide
----------------------------------------------------------------------------------------- */
.area-guide {
	border: 0pt solid darkred;
	background: white;
	padding: 9.0rem 0 6.0rem;
	margin:0;
	width: 100%;
	height: auto;
}


.area-guide ol.def li {
	margin-bottom:2em;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10006 area-feat second
----------------------------------------------------------------------------------------- */
.area-feat.second {
	border:none;
	border-bottom: 5pt solid #F4F9FA;
	padding: 9.0rem 0 12.0rem;
	margin:0;
	width: 100%;
	height: auto;
	background: #F4F9FA;
	background-image: url('../img/common/bg-button.png');
	background-repeat: repeat-x;
	background-position:bottom right;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10007 area-about
----------------------------------------------------------------------------------------- */
.area-about {
	padding: 15.0rem 0;
	margin: 0;
	background-image: url('../img/common/bg-about.jpg');
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	height: auto;
}

.area-about .btn-more {
	margin-top: 6.0rem;
	margin-bottom: 0;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1133px) {
	.area-about {
		padding: 10.0vw 0;
	}

	.area-about .btn-more {
		margin-top: 6.0vw;
	}

	.area-about ul.btn-more.large li a {
		font-size: calc(3.0vw * 1.0);
	}
}

@media screen and (max-width: 840px) {}

@media screen and (max-width: 670px) {
	.area-about ul.btn-more.large li a {
		font-size: calc(3.0vw * 1.1);
	}
}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}





/*-----------------------------------------------------------------------------------------
10008 area-map
----------------------------------------------------------------------------------------- */
.area-map {
	padding: 1.5rem;
	background: white;
}

.area-map dl {
	width: 100%;
	padding: 0;
	margin: 0;
}

.area-map dl dt,
.area-map dl dd {
	width: 50%;
	padding: 0;
	margin: 0;
}

.frame-map {
	position: relative;
	padding-bottom: 50%;
	height: 0;
	overflow: hidden;
	width: 100%;
	border: 1.5rem solid white;
}

.frame-map.square {
	padding-bottom: 100%;
}


.frame-map.googlamap {
	padding-bottom: calc(50% - 1.5rem);
}

.frame-map.gaikan {
	padding-bottom: calc(50% - 1.5rem);
}

.frame-map iframe,
.frame-map img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1320px) {}

@media screen and (max-width: 1133px) {}

@media screen and (max-width: 840px) {
	.area-map {
		padding:.5rem;
	}

	.area-map dl dt,
	.area-map dl dd {
		width: 100%;
	}

	.frame-map {
		border: .5rem solid white;
	}

	.frame-map.googlamap {
		padding-bottom: 100%;
	}
	.frame-map.gaikan {
		padding-bottom: 50%;
	}
}

@media screen and (max-width: 670px) {}

@media screen and (max-width: 500px) {}

@media screen and (max-width: 400px) {}