@charset "utf-8";

/*----------------------------------------------------------*/
/* ロゴ表示 */

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}

.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	/*width: 100%;*/
}

/* ウィンドウ幅が0～479pxの場合に適用するCSS */
@media screen and ( max-width:479px ){

.start p {
	width: 80%;
}

}/* ウィンドウ幅が0～479pxの場合に適用するCSS */


/*----------------------------------------------------------*/
/* メインイメージ */



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

.bg-slider {
	width: 100%;
	/*height: 100vh;*/
	background-position: left center;
	background-size: cover;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ウィンドウ幅が0～479pxの場合に適用するCSS */
@media screen and ( max-width:479px ){

.bg-slider {
	padding-top: 6vw;
}

}/* ウィンドウ幅が0～479pxの場合に適用するCSS */


/* IEハック */
@media all and (-ms-high-contrast:none) {

.bg-slider {
	justify-content: flex-start;
}

}/* IEハック */


/*----------------------------------------------------------*/
/* 特集から探す */

.feature_section {
		overflow: hidden;
} 
 
.feature_title{
	font-size: 30px;
	text-align: center;
	font-family: heisei-maru-gothic-std, sans-serif;
	color: #fff;
	font-weight: normal;
	padding-top: 35px;
	line-height: 30px;
}

.feature_title span{
	font-size: 15px;
}

.feature_image{
	width: 100%;
	background-image: url("../img/top/feature_bg.jpg");
	background-size: cover;
	/*height: 700px;*/
}

.feature_list{
	flex-wrap: wrap;
}

.feature_list li{
	width : -webkit-calc(100% / 3.1) ;
	width : calc(100% / 3.1) ;
}

.feature_list li a{
	background: #ccc;
	border-radius: 1000px;
	min-width: 250px;
	min-height: 250px;
	max-width: 250px;
	text-align: center;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	/*flex-direction: column;*/
	margin: 0 auto 5%;
}

.feature_list li a div img{
	width: 50%;
	margin-bottom: 10px;
}

.feature_list li:nth-child(1) a{ background: #d561b6;}
.feature_list li:nth-child(2) a{ background: #d6b337;}
.feature_list li:nth-child(3) a{ background: #87c134;}
.feature_list li:nth-child(4) a{ background: #3199cf;}
.feature_list li:nth-child(5) a{ background: #33c981;}
.feature_list li:nth-child(6) a{ background: #d36433;}
.feature_list li:nth-child(7) a{ background: #3199cf;}
.feature_list li:nth-child(8) a{ background: #33c981;}
.feature_list li:nth-child(9) a{ background: #d36433;}

.feature_list li a div{
	text-align: center;
}

.feature_list li a p{
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	line-height: 25px;
}

.feature_list li a p span{
	font-size: 15px;
}


/*----------------------------------------------------------*/
/* おすすめ施設 */

.recommended_section{
	width: 86%;
}

.recommended_list{

}

.recommended_list li{
	text-align: center;
	margin: 0 10px;
}

.recommended_list li .image{
	background: #aaa;
	margin-bottom: 10px;
}

.recommended_list li .image img{
	width: 100%;
}

.recommended_list li h4{
	background: #3199cf;
	text-align: center;
	color: #fff;
	font-size: 18px;
	padding: 10px;
}

.recommended_list li .data{
	background: #fffce6;
	padding: 10px;
	position: relative;
}


.recommended_list li .data::before {
	content: "";
	bottom: 0;
	right: 0;
	border-top: 3em solid transparent;
	border-right: 3em solid #3199cf; /* ラベルの色はここで変更 */
	position: absolute;
	z-index: 100;
}


.recommended_list li .data h5{
	background: #fffce6;
	text-align: left;
	color: #404040;
	font-size: 18px;
	padding: 10px;
}

.recommended_list li .data p{
	text-align: left;
	color: #404040;
	font-size: 15px;
	padding: 10px;
}


/*----------------------------------------------------------*/
/* サービスのご案内 */

.service_box{
	width: 100%;
	background-image: url("../img/top/service_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
}

.service_list{
	width: 100%;
}

.service_list li{
	width: 100%;
	padding: 40px 0;
}

.service_list li:nth-child(even){
	background: rgba(255, 255, 255, 0.4);
}

.service_list li .inner{
	max-width: 1100px;
	width: 98%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.service_list li:nth-child(odd) .inner .data h4{
	font-size: 30px;
	color: #89c121;
	line-height: 30px;
}

.service_list li:nth-child(odd) .inner .data h4 span{
	font-size: 13px;
	color: #424242;
}

.service_list li .inner .data{
	width: 50%;
}

.service_list li .inner .data p{
	line-height: 30px;
}

.service_list li:nth-child(even) .inner .data h4{
	font-size: 30px;
	color: #f39600;
	line-height: 30px;
}

.service_list li:nth-child(even) .inner .data h4 span{
	font-size: 13px;
	color: #424242;
}


/*----------------------------------------------------------*/
/* お役立ちガイド */

.guide_list{
	overflow: hidden;
}

.guide_list li{
	width: 48%;
	margin-bottom: 40px;
	height: 275px;
}

.guide_list li a{
	color: #fff;
	background: #aaa;
	padding: 30px 35px;
	display: flex;
	height: 100%;
	justify-content: space-between;
	position: relative;
}

.guide_list li:nth-child(1) a{ background-image: url("../img/top/guide_bg01.jpg"); background-size: cover; }
.guide_list li:nth-child(2) a{ background-image: url("../img/top/guide_bg02.jpg"); background-size: cover; }
.guide_list li:nth-child(3) a{ background-image: url("../img/top/guide_bg03.jpg"); background-size: cover; }
.guide_list li:nth-child(4) a{ background-image: url("../img/top/guide_bg04.jpg"); background-size: cover; }
.guide_list li:nth-child(5) a{ background-image: url("../img/top/guide_bg05.jpg"); background-size: cover; }
.guide_list li:nth-child(6) a{ background-image: url("../img/top/guide_bg06.jpg"); background-size: cover; }
.guide_list li:nth-child(7) a{ background-image: url("../img/top/guide_bg07.jpg"); background-size: cover; }
.guide_list li:nth-child(8) a{ background-image: url("../img/top/guide_bg08.jpg"); background-size: cover; }


.guide_list li a::before {
	content: "";
	bottom: 3px;
	right: 3px;
	border-top: 2em solid transparent;
	border-right: 2em solid #fff; /* ラベルの色はここで変更 */
	position: absolute;
	z-index: 100;
}


.guide_list li a .data{
	width: 75%;
}

.guide_list li a .data h4{
	font-size: 20px;
}

.guide_list li a .data p{
	width: 80%;
}

.guide_list li a .image{
	align-self: center;
}


/*----------------------------------------------------------*/
/* お知らせ */

.news_list{
}

.news_list li{
	width: 100%;
	display: flex;
	justify-content: center;
}

.news_list li .schedule{
	margin-right: 20px;
	border-bottom: 1px solid #89c121;
	padding: 20px;
	width: 15%;
	font-weight: bold;
	font-size: 18px;
}

.news_list li .contents{
	border-bottom: 1px solid #f1f1f1;
	padding: 20px;
	line-height: initial;
	width: 85%;
}


/*----------------------------------------------------------*/
/* 人気の施設 */

.popularity_box{
	background: #fffbe5;
	padding: 40px 50px;
}

.popularity_box h4{
	font-size: 20px;
}

.popularity_box h4 i{
	color: #ffc000;
}

.popularity_box ul{
}

.popularity_box ul li{
	margin-right: 35px;
	line-height: 2.5;
}

.popularity_box ul li a{
	color: #e49b0d;
	text-decoration: underline;
}


/*----------------------------------------------------------*/
/* 下部お問い合わせバナー */

.contact_bottom{
	background: #f4ffdb;
	position: relative;
}

.contact_bottom ul{
	align-items: center;
}

.contact_bottom ul li:nth-child(1) { width: 25%; margin-right: 5%; }
.contact_bottom ul li:nth-child(1) img{ width: 100%; }
.contact_bottom ul li:nth-child(2) img{ width: 80%; }
.contact_bottom ul li:nth-child(3) img{ width: 80%; }


/*----------------------------------------------------------*/
/* 最近見た施設　追従 */

.recently_box{
	position: fixed;
	top: 15%;
	right: 0;
	width: 32px;
	/*border-top: 1px solid #89c121;*/
	/*border-left: 1px solid #89c121;*/
	/*border-bottom: 1px solid #89c121;*/
	z-index: 100;
}

.recently_box h4{
	background: #89c121;
	color: #fff;
	text-align: center;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.recently_box ul{
	background: rgba(255, 255, 255, 0.8);
	color: #fff;
	font-size: 14px;
	/*padding-top: 10px;*/
	line-height: normal;
}

/* IEハック */
@media all and (-ms-high-contrast:none) {

.recently_box ul{
	background: none;
}


}/* IEハック */


.recently_box ul li{
	display: flex;
	/*border-bottom: 1px dotted #89c121;*/
	/*padding: 0 5px 10px;*/
	/*margin-bottom: 10px;*/
}

.recently_box ul li:last-child{
	margin-bottom: 0;
	flex-direction: column;
	border-bottom: none;
}

.recently_box ul li div:first-child{
	margin-right: 5px;
	width: 100%;
}

.recently_box ul li a{
	color: #404040;
	text-decoration: underline;
}

.recently_box ul li:last-child .see_bt{
	background: rgb(2,151,255);
	background: linear-gradient(0deg, rgba(2,151,255,1) 0%, rgba(39,176,255,1) 100%);
	text-align: center;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 5px;
	text-decoration: none;
	color: #fff;
}

.recently_box ul li:last-child .document_bt{
	background: rgb(255,115,1);
	background: linear-gradient(0deg, rgba(255,115,1,1) 0%, rgba(255,166,12,1) 100%);
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	text-decoration: none;
	color: #fff;
}

/**/

.top_catch{
	text-align: center;
	font-size: 25px;
	line-height: 50px;
	margin-bottom: 100px;
	font-weight: bold;
}

.top_catch p{
	font-size: 25px;
	text-align: center;
	margin: 3% 0;
	color: #055797;
}

.top_catch strong{
	font-size: 25px;
	color: #055797;
}

.about_image_box{
	width: 530px;
}

.solenas_description{
	background: #eee;
	border-radius: 15px;
}

.solenas_description ul{
	padding: 4%;
	line-height: 30px;
}

.solenas_description ul li strong{
	font-size: 25px;
	color: #155797;
}

.solenas_description ul li{
	
}

/**/

.top_service_bt{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5%;
	font-size: 22px;
	font-weight: bold;
}

.top_service_bt a{
	border: 2px solid #055797;
	width: 500px;
	display: block;
	border-radius: 100px;
	text-align: center;
	padding: 2%;
	color: #055797;
}


/* ウィンドウ幅が0～768pxの場合に適用するCSS */
@media screen and ( max-width:768px ){

.main_image .catch_main {
	font-size: 40px;
}

.main_image .catch_sub {
	font-size: 18px;
}

.main_image .catch_list li {
	font-size: 16px;
}

.feature_list li a {
	min-width: 220px;
	min-height: 220px;
	max-width: 220px;
}

.service_list li .inner {
	width: 94%;
}
.service_list li .inner .data {
	width: 60%;
}

.service_list li .inner .image {
	width: 35%;
}

.guide_list li a .image {
	display: none;
}

.guide_list li a .data {
	width: 100%;
}

.guide_list li a .data p {
	width: 100%;
}

.about_image_box {
	width: 100%;
}

.about_image_box.ciesf {
	width: 60%;
	margin: auto;
}

}/* ウィンドウ幅が0～768pxの場合に適用するCSS */


/* ウィンドウ幅が0～700pxの場合に適用するCSS */
@media screen and ( max-width:700px ){

.recently_box {
	display: none;
}

h2.title_line {
	margin-bottom: 20px;
}

.main_image_contents {
	flex-wrap: nowrap !important;
	flex-direction: column;
	justify-content: space-around !important;
}

.main_image .catch_box {
	width: 90%;
}

.main_image .image_box {
	width: 90%;
}

.main_image .image_box .slide_bt{
	width: 100%;
}

.main_image .image_box .slide_bt li{
	width: 33%;
}

.feature_image {
	background-image: url(../img/top/feature_bg_smp.jpg);
}

.feature_list li {
	width: calc(100% / 2);
}

.feature_list li a {
	min-width: 150px;
	min-height: 150px;
	max-width: 150px;
}

.feature_list li a p {
	font-size: 18px;
}

.feature_list li a p span {
	display: none;
}

.recommended_section {
	width: 76%;
}

.service_list li .inner {
	flex-wrap: wrap;
	justify-content: center;
}

.service_list li .inner .image {
	width: 80%;
	margin-bottom: 10%;
}

.service_list li .inner .data {
	width: 80%;
	margin-bottom: 10%;
}

.service_list li:nth-child(odd) .inner .data h4 {
	font-size: 22px;
}

.service_list li:nth-child(even) .inner .data h4 {
	font-size: 22px;
}

.guide_list{
	flex-wrap: nowrap !important;
	flex-direction: column;
}

.guide_list li{
	width: 100%;
	margin-bottom: 20px;
}

.news_list li {
	flex-direction: column;
}

.news_list li .schedule {
	width: 100%;
}

.news_list li .contents {
	width: 100%;
}

.contact_bottom ul {
	padding: 10% 0;
}

.contact_bottom ul li:nth-child(1) {
	display: none;
}

.contact_bottom ul li:nth-child(2) {
	width: 100%;
	text-align: center;
}

.contact_bottom ul li:nth-child(3) {
	width: 100%;
	text-align: center;
}

.popularity_box {
	padding: 30px 30px;
}

.contact_bottom ul li:nth-child(2) { margin-bottom: 20px; }
.contact_bottom ul li:nth-child(2) img{ width: 90%; }
.contact_bottom ul li:nth-child(3) img{ width: 90%; }

/**/

.top_catch{
	font-size: 15px;
	line-height: 30px;
	margin: 8% 6%;
}

.top_catch p{
	text-align: center;
	margin: 3% 0;
	font-size: 18px;
}

.top_catch .pc{
	display: none;
}

.top_catch strong {
	font-size: 18px;
}

/**/

.top_service_bt{
	margin-top: 10%;
	font-size: 18px;
}

.top_service_bt a {
	width: 80%;
	display: block;
	padding: 5%;
}

/**/

.about_image_box.ciesf {
	width: 85%;
	margin: 5% auto 0;
}


}/* ウィンドウ幅が0～700pxの場合に適用するCSS */

/* ウィンドウ幅が0～320pxの場合に適用するCSS */
@media screen and ( max-width:320px ){

.main_image_contents {
	justify-content: space-around !important;
}

.main_image .catch_main {
	font-size: 37px;
}

.main_image .catch_sub {
	font-size: 16px;
}

.main_image .catch_sub strong {
	font-size: 20px;
}

.feature_list li a {
	min-width: 120px;
	min-height: 120px;
	max-width: 120px;
}

.feature_list li a p {
	font-size: 16px;
}

.guide_list li a {
	padding: 20px 25px;
}

.guide_list li a .data h4 {
	margin-bottom: 10px;
}

.recommended_section {
	width: 70%;
}


}/* ウィンドウ幅が0～320pxの場合に適用するCSS */