@charset "UTF-8";
/* CSS Document */
.top_slide{ width: 100vw; position: relative;}
.top_slide>.background_img{ z-index: 1;}
.top_slide>.slide_text{ z-index: 2; display: table; height: 100%;}
.top_slide>.slide_text>div{ display: table-cell; vertical-align: middle;}
.slide_text h2,
.slide_text p,
.slide_text a{ position: relative;}
.slide_text a{ text-align: center; display: block; background-color: rgba(101,196,0,0.80); background-image: url("../common/images/arrow_w_r.svg"); background-repeat: no-repeat; background-position: right 15px center; color: white;}
.slide_text a:hover{ background-color: #65c400; text-decoration: none;}
.owl-dots { margin-top: 10px;}
#top_slide .owl-dots {text-align: center; -webkit-tap-highlight-color: transparent; }
#top_slide .owl-dots .owl-dot { display: inline-block; zoom: 1;}
#top_slide .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #cee7cc; display: block; transition: opacity 200ms ease; border-radius: 50%;}
#top_slide .owl-dots .owl-dot.active span,
#top_slide .owl-dots .owl-dot:hover span { background: #65c400; }
@media (min-width: 768px) {
.top_slide{ min-width: 1054px; height: 580px;}
.top_slide>.background_img{ width: 100%; height: 580px; position: absolute; background-position: center; background-size: cover;}
.top_slide>.slide_text{ width: 1054px; position: relative; padding: 0 15px; margin: 0 auto;}
.slide_text>div>div{ width: 490px;}
.slide_text h2{ padding: 0 20px; z-index: 3; font-size: 30px; margin-bottom: -0.5em;}
.c_white{ color: #fff;}
.slide_text h2.main_top{ padding: 0 20px; z-index: 3; font-size: 55px; color: #fff; margin-bottom: -0.5em; text-shadow:2px 2px 4px #000; position: relative; top: -170px; left: -50px;}		
.slide_text p{ background-color: rgba(255,255,255,0.50); padding: 30px 20px 30px; margin: 0 0 40px; z-index: 2; font-size: 14px;}
.slide_text p b{ font-size: 16px;}
.slide_text a{ width: 360px; margin: 0 auto; line-height: 70px;}
.slide_text.right_text>div>div{ margin: 0 0 0 auto;}
.slide_text.center_text>div>div{ margin: 0 auto;}
}
@media (max-width: 767.98px) {
.top_slide{ height: calc(100vh - 80px);}
.top_slide>.background_img{ position: relative; height: 45%; background-position: center; background-size: cover;}
.top_slide>.slide_text{ position: relative; height: 55%; width: 100%; background-color: #65c400; padding: 10px;}
.slide_text h2,
.slide_text p{ color: white;}
.slide_text h2{ font-size: 21px; margin: 0 0 0.5em;}
.slide_text h2.main_top{ font-size: 40px; }	
.slide_text p{ font-size: 13px; margin-bottom: 1em;}
.slide_text p b{ font-size: 14px;}
.slide_text a{ font-size: 12px; border: 1px solid white; line-height: 50px;}
}


#top_content{ position: relative;}
#top_content .text{ z-index: 3;}
#top_content .background_img{ z-index:2;}
#top_content>div>div:last-child{ z-index:1;}
#top_content .text,
#top_content .background_img,
#top_content>div>div:last-child{ position: relative;}
#top_content .text h2{ font-weight: normal; text-align: center; line-height: 1em;}
#top_content .text h2 small{ display: block; line-height: 1em;}
#top_content .text h2::after{ display: block; content: ""; background-color: black; margin: 0 auto;}
#top_content .text p{}
#top_content .text img{ display: block;}
#top_content .text a{ color: black; display: inline-block;}
#top_content .background_img{ background-position: center; background-size: cover;}
@media (min-width: 768px) {
#top_content>div{ margin-top: 100px;}
#top_content>div:nth-child(even) .text{ margin-left: 0; margin-right: auto; box-shadow: 6px 6px 10px rgba(0,0,0,0.10);}
#top_content>div:nth-child(odd) .text{ margin-left: auto; margin-right: 0; box-shadow: -6px 6px 10px rgba(0,0,0,0.10);}
#top_content .text{ width: 450px; background-color: white; margin-bottom: -250px; padding: 50px 20px 30px; }
#top_content .text h2{ font-size: 26px; margin: 0;}
#top_content .text h2 small{ font-size: 15px; margin: 10px 0 15px;}
#top_content .text h2::after{ height: 2px; width: 100px;}
#top_content .text img{ margin: 36px auto 26px;}
#top_content .text p{ font-size: 16px; margin: 0 0 1em;}
#top_content .text a{ font-weight: bold;}
#top_content .text .background_img{ display: none;}
#top_content .background_img{ height: 360px; margin-bottom: -180px; width: calc(calc(100% - 1054px) / 2 + 784px);}
#top_content>div:nth-child(even) .background_img{ margin-left: auto; margin-right: 0;}
#top_content>div:nth-child(odd) .background_img{ margin-left: 0; margin-right: auto;}
#top_content>div>div:last-child{ height: 290px;}
#top_content>div:nth-child(odd)>div:last-child{ background-color: #65c400;}
#top_content>div:nth-child(even)>div:last-child{ background-color: #cee7cc;}
}
@media (max-width: 767.98px) {
#top_content>div{ margin-top: 30px;}
#top_content .text{}
#top_content .text h2{ font-size: 15px; margin: 0; padding-top: 20px;}
#top_content .text h2 small{ font-size: 9px; margin: 6px 0 8px;}
#top_content .text h2::after{ height: 1px; width: 50px;}
#top_content .text img{ margin: 15px auto 25px; width: 50px;}
#top_content .background_img{ padding: 48.4% 0 0 0; margin: 0 -10px;}
#top_content>div>.background_img{ display: none;}
#top_content .text>div:last-child{ background-color: #65c400; margin: 0 -10px; padding: 10px; color: white;}
#top_content .text p{ font-size: 13px; margin: 0 0 5px;}
#top_content .text a{ font-size: 12px; color: white;}
}



#news_img{ display: flex; flex-wrap: wrap; padding: 0; list-style: none;}
#news_img>li{}
#news_img>li>a{ color: black; display: block;}
#news_img>li>a:hover{ text-decoration: none; opacity: 0.7;}
#news_img h3{ font-weight: bold;}
#news_img p{}
#news_img p::after{ content: "詳細はこちら >"; color: #65c400; display: block;}
#news_img time{ display: block;}
#news_img time::after{ content: " update";}
#news_text{ padding: 0; margin: 0; list-style: none; border-top: #c9c9c9 1px solid;}
#news_text>li{ border-bottom: #c9c9c9 1px solid;}
#news_text>li>a{ color: black;}
#news_text>li>a:hover{}
#news_text time{}
#news_text p{}
@media (min-width: 768px) {
footer{margin-top: 0;}
#top_news{ background-color: #f8f8f8; min-width: 1054px; padding: 50px 0;}
#top_news>div>div{ background-color: white; padding: 20px;}
#news_img{ margin: 0 -12px;}
#news_img>li{ margin: 0 12px 30px; width: calc(25% - 24px);}
#news_img h3{ font-size: 16px; margin: 8px 0 ; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#news_img p{ font-size: 15px; margin: 0 0 0.5em;}
#news_img p::after{ font-size: 14px;}
#news_img time{ font-size: 12px;}
#news_img div{ width: 100%; height: 160px; position: relative;}
#news_img div img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; width: auto;  max-height: 100%; max-width: 100%; margin: auto;}
#news_text>li{ display: table; table-layout: fixed; width: 100%;}
#news_text>li>a{ display: table-row;}
#news_text>li>a:hover{}
#news_text time,
#news_text p{ display: table-cell; line-height: 1em; height: 60px; vertical-align: middle;}
#news_text time{ width: 90px; text-align: center; font-size: 14px;}
#news_text p{ font-size: 15px; width: 854px; padding: 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#news_text span{
	width: 40px;
	display: inline-block;
	position: relative;
	top: 15px;
}
#news_text span img{
	width: 20px;
	height: 20px;
}
}
@media (max-width: 767.98px) {
#news_img{ margin: 0 -7.5px;}
#news_img>li{ margin: 0 7.5px 15px; width: calc(50% - 15px);}
#news_img h3{ font-size: 10px; margin: 5px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#news_img p{ font-size: 9px; margin: 0;}
#news_img p::after{ font-size: 7px; margin: 0 0 0.5em;}
#news_img time{ font-size: 6px;}
#news_img div{ width: 100%; padding-top: 75%; position: relative;}
#news_img div img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; width: auto;  max-height: 100%; max-width: 100%; margin: auto;}
#news_text{ margin-top: 30px;}
#news_text>li{}
#news_text>li>a{ padding: 0; display: block;}
#news_text>li>a:hover{}
#news_text time,
#news_text p{}
#news_text time{font-size: 8px; display: block; line-height: 1em; padding-top: 10px}
#news_text p{ display: inline-block; font-size: 9px; margin: 5px 0 0 ; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 6px;}
#news_text span{
	width: 40px;
	display: inline;
	position: relative;
	bottom: 10px;
	right: -10px;
}
#news_text span img{
	width: 16px;
	height: 16px;
}
}

.news_block .news_btn {text-align: center;}
.news_block .news_btn a{text-align: center; display: block; background-color: #65c400; background-image: url("../common/images/arrow_w_r.svg"); background-repeat: no-repeat; background-position: right 15px center; color: white!important;}
@media (min-width: 768px) {
	.news_block .news_btn a{width: 360px; margin: 40px auto 0; line-height: 70px; font-size: 16px;}
	.news_block .news_btn a:hover{text-decoration: none;}
}
@media (max-width: 767.98px) {
	.news_block .news_btn a{margin: 40px auto 0; font-size: 12px; line-height: 50px;}
	.news_block .news_btn a:hover{text-decoration: none;}
}

@media (min-width: 768px) {
	.modalicon2 { color: #56ac57!important;}
	.modalicon2:hover { color: #56ac57!important; opacity: 0.7;}
	.reservation_memo {text-align: right; font-size: 18px;}
	.question{ position: relative; bottom: 2px;}
	.modal-body2 {text-align: center;}
	.modal-dialog2 { max-width: 800px;}
}
@media (max-width: 767.98px) {
	.modalicon2 { color: #56ac57!important;}
	.modalicon2:hover { color: #56ac57!important; opacity: 0.7;}
	.reservation_memo {text-align: right; font-size: 14px;}
	.question{ position: relative; bottom: 2px;}
}

.text404{ padding: 150px;}
.text404 a{ color: #56ac57;}
.text404 a:hover{ color: #56ac57; opacity: 0.7;}
@media (max-width: 767.98px) {
	.text404{ padding: 80px;}
}