@charset "utf-8";


#kv { position: relative;}
#kv .inner-kv { position: relative;}
#kv .ctn { position: absolute; left: 0; top: 0; z-index: 10; width: 100%;}
#kv .ctn .txt{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 150px 20px 90px;}
#kv .ctn p {}
#kv .ctn p img { width: 80%; max-width: 660px;}
#kv .bg { position: relative; z-index: 1;}
#kv .bg .slick-slide { height: 640px;}
#kv .bg .kv-1 { background: url('../img/top/kv-1.jpg') no-repeat 50% 50% / cover;}
#kv .bg .kv-2 { background: url('../img/top/kv-2.jpg') no-repeat 50% 50% / cover;}
#kv .bg .kv-3 { background: url('../img/top/kv-3.jpg') no-repeat 50% 50% / cover;}
#kv .wave { position: absolute; left: 0; bottom: -1px; width: 100%; z-index: 5;}
@media (max-width: 801px) {
	#kv .ctn .txt{ padding: 100px 20px 0px;}
	#kv .bg .slick-slide { height: 520px;}
}
@media (max-width: 481px) {
	#kv .ctn .txt{ padding: 80px 20px 0px;}
	#kv .bg .slick-slide { height: 320px;}
}


#about { background: #f2f0e9;}
#about .inner-sct { padding: 60px 0;}
#about .read { position: relative; width: 94%; max-width: 1100px; margin: 0 auto 60px;}
#about .read:before { content: ''; display: block; width: 100px; height: 130px;
 position: absolute; left: 0px; top: -60px;
 background: url('../img/illust/1.png') no-repeat 50% 50% / 100% auto;
}
#about .read h2 { margin-bottom: 40px; text-align: center;}
#about .read h2 img { width: 80%; max-width: 640px;}
#about .read p { font-size: 20px; font-weight: 600; line-height: 1.85; letter-spacing: 0.05rem; text-align: center;}
#about ul.point { width: 92%; max-width: 1080px; margin: 0 auto 90px; font-size: 0; }
#about ul.point li { display: inline-block; width: 33%; vertical-align: top;}
#about ul.point li dl { position: relative; padding: 0 20px;}
#about ul.point li dl:after { content: ''; display: block; width: 60px; height: 60px; position: absolute; right: 8%; bottom: 0;}
#about ul.point li:nth-child(1) dl:after { background: url('../img/illust/2.png') no-repeat 50% 50% / 100% auto;}
#about ul.point li:nth-child(2) dl:after { background: url('../img/illust/3.png') no-repeat 50% 50% / 100% auto;}
#about ul.point li:nth-child(3) dl:after { background: url('../img/illust/4.png') no-repeat 50% 50% / 100% auto;}
#about ul.point li dl dt { position: relative; margin-bottom: 18px; padding-top: 30px;}
#about ul.point li dl dt img.badge { width: 20%; max-width: 108px; position: absolute; left: 0; top: 0;}
#about ul.point li dl dt span { display: block; width: 100%; border-radius: 80px; overflow: hidden;}
#about ul.point li dl dt span img { width: 100%;}
#about ul.point li dl dd { padding-left: 18px; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem;}

#about .box { position: relative; width: 92%; max-width: 1000px; margin: 0 auto; padding: 50px 40px 80px; background: #fff;
 border-top-left-radius: 50px; border-top-right-radius: 50px;
}
#about .box:before,
#about .box:after { content: ''; display: block; position: absolute;}
#about .box:before{ width: 80px; height: 100px; left: 20px; top: -20px; background: url('../img/illust/5.png') no-repeat 50% 50% / 100% auto;}
#about .box:after { width: 160px; height: 60px; right: -80px; bottom: 72px; background: url('../img/illust/6.png') no-repeat 50% 50% / 100% auto;}
#about .box h3 { margin-bottom: 40px; text-align: center;}
#about .box h3 img { width: 80%; max-width: 640px;}
#about .box p { margin-bottom: 50px; font-size: 18px; font-weight: 600; letter-spacing: 0.1rem; text-align: center;}
#about .box p span { display: block;}
#about .box p em { color: #bd4401;}
#about .box .btn { width: 80%; max-width: 480px; margin: 0 auto;}

#about .gallery { position: relative;}
#about .gallery:before { content: ''; display: block; width: 92%; max-width: 1000px; height: 120px; background: #fff;
 border-bottom-left-radius: 50px; border-bottom-right-radius: 50px;
 position: relative; margin: 0 auto -120px;
}
#about .gallery .slick-slider { padding-bottom: 50px;}
#about .gallery .slick-slide figure img { width: 92%; margin: 0 auto; border-radius: 50px;}
@media (max-width: 1281px) {
	#about ul.point li dl dd { padding-left: 12px; font-size: 18px;}
	#about .box:after { right: -20px;}
}
@media (max-width: 801px) {
	#about .read:before { width: 80px; height: 100px; left: -12px;}
	#about .read h2 { margin-bottom: 40px; }
	#about ul.point li { display: block; width: 100%; padding: 10px;}
	#about ul.point li dl { display: table; width: 100%; max-width: 500px; margin: 0 auto; padding: 0px;}
	#about ul.point li dl dt,
	#about ul.point li dl dd { display: table-cell; vertical-align: middle;}
	#about ul.point li dl dt { width: 45%; padding-top: 0px;}
	#about ul.point li dl dt img.badge { width: 36%; left: -40px; top: -10px;}
	#about ul.point li dl dt span { border-radius: 40px;}
	#about ul.point li dl dd { width: 55%; padding-left: 20px;}
	
	#about .box { padding: 40px 30px 50px;}
	#about .box:before{ width: 60px; height: 80px;}
	#about .box:after { width: 120px; height: 40px; right: -20px; bottom: 40px;}
	#about .box p { font-size: 16px;}
}
@media (max-width: 641px) {
	#about .read { margin-bottom: 40px;}
	#about .read h2 { margin-bottom: 20px;}
	#about .read p span { display: block; }
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 40px 0;}
	#about .read { margin-bottom: 20px;}
	#about .read:before { width: 50px; height: 64px; top: 0px;}
	#about .read p { font-size: 14px;}
	#about ul.point { margin-bottom: 40px;}
	#about ul.point li dl:after { right: 0px; width: 40px; height: 40px;}
	#about ul.point li dl dt img.badge { left: -10px; top: -8px;}
	#about ul.point li dl dt span { border-radius: 20px;}
	#about ul.point li dl dd { padding-left: 12px; font-size: 13px;}

	#about .box { padding: 50px 20px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
	#about .box:before{ width: 40px; height: 55px; left: 10px;}
	#about .box:after { width: 80px; height: 30px; right: -10px; bottom: 20px;}
	#about .box h3 { margin-bottom: 20px;}
	#about .box h3 img { width: 100%;}
	#about .box p { margin-bottom: 20px; font-size: 12px; text-align: left;}
	#about .box p span { display: inline;}

	#about .gallery:before { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
	#about .gallery .slick-slider { padding-bottom: 20px;}
	#about .gallery .slick-slide figure img { border-radius: 20px;}
}



#plan { background: #fff;}
#plan .inner-sct {}
#plan .ctn { position: relative; width: 100%; max-width: 1048px; margin: 0 auto; padding: 60px 0;}
#plan .ctn:before { content: ''; display: block; width: 150px; height: 120px; position: absolute; left: -80px; top: -10px;
 background: url('../img/illust/7.png') no-repeat 50% 50% / 100% auto;
}
#plan .ctn h2 { margin-bottom: 50px; text-align: center;}
#plan .ctn h2 img { width: 80%; max-width: 710px;}
#plan .ctn h2 img.sp { display: none;}
#plan .ctn ul { margin-bottom: 70px; font-size: 0; text-align: center;}
#plan .ctn ul li { display: inline-block; width: 33%; padding: 0 20px; vertical-align: top;}
#plan .ctn ul li dl { padding: 10px; background: #ebebeb; border-radius: 50px;}
#plan .ctn ul li dl dt { position: relative; line-height: 1;}
#plan .ctn ul li dl dt span { display: block; width: 72px; height: 72px; padding-top: 16px; background: #fff; border-radius: 50%; font-size: 11px;}
#plan .ctn ul li dl dt span em { display: block; font-size: 32px; font-weight: 700;}
#plan .ctn ul li dl dt img { width: 92%;}
#plan .ctn ul li dl dd { min-height: 210px; padding: 20px; font-size: 16px; text-align: justify;}
#plan .ctn ul li dl dd span { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 700; text-align: center;}
#plan .ctn .btn { width: 72%; max-width: 480px; margin: 0 auto;}
@media (max-width: 801px) {
	#plan .ctn {}
	#plan .ctn:before { left: 20px; top: -60px;}
	#plan .ctn h2 { margin-bottom: 30px;}
	#plan .ctn h2 img.pc { display: none;}
	#plan .ctn h2 img.sp { display: block; max-width: 400px; margin: 0 auto;}
	#plan .ctn ul { width: 90%; margin: 0 auto 40px;}
	#plan .ctn ul li { display: block; width: 100%; padding: 12px 0;}
	#plan .ctn ul li dl { display: table; width: 100%;}
	#plan .ctn ul li dl dt,
	#plan .ctn ul li dl dd { display: table-cell; vertical-align: middle;}
	#plan .ctn ul li dl dt { width: 40%;}
	#plan .ctn ul li dl dd { width: 60%; padding-top: 80px;}
	#plan .ctn ul li dl dt span { position: absolute; right: -80px; top: 0;}
	#plan .ctn ul li dl dd span { text-align: left;}
}
@media (max-width: 481px) {
	#plan .inner-sct { padding: 0px;}
	#plan .ctn { padding: 50px 0 40px;}
	#plan .ctn:before { width: 80px; height: 60px; top: -20px;}
	#plan .ctn h2 { margin-bottom: 12px;}
	#plan .ctn ul { margin-bottom: 12px;}
	#plan .ctn ul li { padding: 10px 0;}
	#plan .ctn ul li dl { display: block; width: 100%; border-radius: 20px;}
	#plan .ctn ul li dl dt,
	#plan .ctn ul li dl dd { display: block;}
	#plan .ctn ul li dl dt { width: 100%;}
	#plan .ctn ul li dl dd { width: 100%; padding-top: 20px;}
	#plan .ctn ul li dl dt span { position: relative; right: auto; top: auto;}
	#plan .ctn ul li dl dt span { width: 50px; height: 50px; padding-top: 9px; font-size: 10px;}
	#plan .ctn ul li dl dt span em { font-size: 24px;}
	#plan .ctn ul li dl dd { min-height: auto; padding: 10px 18px; font-size: 13px;}
	#plan .ctn ul li dl dd span { font-size: 18px; text-align: center;}
}


#access { background: #f2f0e9;}
#access .inner-sct { padding: 60px 0;}
#access h2 { margin-bottom: 40px; text-align: center;}
#access h2 img { width: 100%; max-width: 640px;}
#access .ctn { display: flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 0 auto;}
#access .ctn .txt { position: relative; width: 46%; padding-top: 40px;}
#access .ctn .map { width: 48%;}
#access .ctn .txt:before,
#access .ctn .txt:after { content: ''; display: block; position: absolute;}
#access .ctn .txt:before { width: 115px; height: 62px;left: -40px; top: -30px;
 background: url('../img/illust/8.png') no-repeat 50% 50% / 100% auto;
}
#access .ctn .txt:after { width: 115px; height: 90px; right: -20px; bottom: 20px; transform: scaleX(-100%);
 background: url('../img/illust/4.png') no-repeat 50% 50% / 100% auto;
}
#access .ctn .txt h3 { margin-bottom: 30px; padding-right: 60px; font-size: 24px; font-weight: 700; letter-spacing: 0.05rem;}
#access .ctn .txt p { font-size: 14px;}
#access .ctn .txt p span { color: #bd4401;}
#access .ctn .map .view { width: 100%; height: 350px; border-radius: 50px; overflow: hidden; }
#access .ctn .map .view iframe { width: 100%; height: 100%; border: none;}
@media (max-width: 801px) {
	#access h2 { margin-bottom: 20px;}
	#access .ctn { display: block;}
	#access .ctn .txt { width: 100%; padding: 40px 0;}
	#access .ctn .map { width: 100%;}
	#access .ctn .txt:before { width: 60px; left: auto; right: 20px; top: 20px;}
	#access .ctn .txt:after { width: 80px;}
}
@media (max-width: 641px) {
	#access .ctn .txt:before{ content: none;}
	#access .ctn .txt:after { top: -20px; right: 0px;}
}
@media (max-width: 481px) {
	#access h2 { margin-bottom: 12px;}
	#access .ctn .txt:after { width: 50px; top: -30px;}
	#access .ctn .txt { padding: 20px 0;}
	#access .ctn .txt h3 { margin-bottom: 12px; font-size: 16px;}
	#access .ctn .txt p { font-size: 12px;}
	#access .ctn .map .view { height: 250px; border-radius: 20px;}
}



#souvenir .inner-sct { padding: 60px 0;}
#souvenir .read { position: relative; width: 92%; max-width: 1024px; margin: 0 auto; }
#souvenir .read:before { content: ''; display: block; width: 90px; height: 90px; position: absolute; left: -50px; top: 12px;
 background: url('../img/illust/9.png') no-repeat 50% 50% / 100% auto;
}
#souvenir .read h2 { margin-bottom: 40px; text-align: center;}
#souvenir .read h2 img { width: 90%; max-width: 640px;}
#souvenir .read h2 img.sp { display: none;}
#souvenir .read p { line-height: 1.8; letter-spacing: 0.05rem; text-align: center;}
#souvenir ul.souvenir { width: 92%; max-width: 1024px; margin: 0 auto; padding-top: 40px; font-size: 0; text-align: center;}
#souvenir ul.souvenir li { display: inline-block; width: 25%; vertical-align: top;}
#souvenir ul.souvenir li:nth-child(even) { padding-top: 60px;}
#souvenir ul.souvenir li dl dt { margin: 0 auto 20px;}
#souvenir ul.souvenir li dl dt img { width: 80%; max-width: 220px; border-radius: 50%;}
#souvenir ul.souvenir li dl dd { font-size: 20px; font-weight: 700;}
@media (max-width: 801px) {
	#souvenir .read:before { width: 80px; height: 80px; left: 0; top: -40px;}
	#souvenir .read h2 { margin-bottom: 20px;}
	#souvenir .read h2 img.pc { display: none;}
	#souvenir .read h2 img.sp { display: block; width: 80%; margin: 0 auto;}
	#souvenir ul.souvenir li { width: 50%;}
	#souvenir ul.souvenir li:nth-child(even) { padding-top: 40px;}
	#souvenir ul.souvenir li dl dt { margin-bottom: 12px;}
	#souvenir ul.souvenir li dl dd { font-size: 18px;}
}
@media (max-width: 481px) {
	#souvenir .inner-sct { padding: 40px 0;}
	#souvenir .read:before { width: 50px; height: 50px; left: 0; top: -30px;}
	#souvenir .read p { font-size: 12px; text-align: left;}
	#souvenir ul.souvenir { padding-top: 20px;}
	#souvenir ul.souvenir li dl dd { font-size: 12px;}
}

#reserve .inner-sct { padding: 60px 0px 80px;}
@media (max-width: 481px) {
	#reserve .inner-sct { padding: 30px 0px 40px;}
}