/* CSS Document */
@import url("reset.css");
@import url("common.css");


/* Text
---------------------------------------------------------- */
h2{
	margin: 20px 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 2.0rem;
	font-weight: normal;
	line-height: 1.0;
}

h2 span{
	margin: 0 0 0 2rem;
	font-family: 'Noto Sans JP','游ゴシック', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
	font-size: 1.0rem;
}

h2.te_center{	text-align: center;}
h2.te_center span{ margin: 0;}

@media screen and (max-width: 690px){
	
	h2{
		margin: 0;
		padding: 15px 0;
		font-size: 1.5rem;
		text-align: center;
	}
	h2 span,h2.te_center span{
		display: block;
		margin: 10px 0 0 0;
	}	
	h2.te_center br{ display: none;}
	
}


/* Section
---------------------------------------------------------- */
#section_top{ position: relative;}

#section_top::after{
	content: '';
	position: absolute;
	top: 5%;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 50% 100%, hsla(144,59%,89%,1) 0px, transparent 50%),
	radial-gradient(at 92% 13%, hsla(31,84%,90%,1) 0px, transparent 50%),
	radial-gradient(at 51% 53%, hsla(29,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 12% 87%, hsla(180,35%,84%,1) 0px, transparent 50%),
	radial-gradient(at 86% 85%, hsla(344,83%,92%,1) 0px, transparent 50%),
	radial-gradient(at 11% 14%, hsla(180,35%,84%,1) 0px, transparent 50%);
	background-attachment: fixed;
	background-size: 150% 150%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;	
}

@keyframes bggradient{
	0% { background-position: 0% 50%;}
	50% { background-position: 100% 50%;}
	100% { background-position: 0% 50%;}
}


/* top_mv
---------------------------------------------------------- */
#top_mv{
	position: relative;
	margin: 0 0 50px 0;
}

.slide_mv{
	position: relative;
	width: 80%;
}

.slide-img{ overflow: hidden;}

.slide-img img{
	width: 100%;
	height: calc(100vh - 100px);
	object-fit: cover;
}

.swiper-slide-active .slide-img img,
.swiper-slide-duplicate-active .slide-img img,
.swiper-slide-prev .slide-img img{
	animation: zoomUp 10s linear 0s 1 normal both;  
}

@keyframes zoomUp {
	0% {
    	transform: scale(1.15);
	}
	100% {
    	transform: scale(1);
	}
}

.mv_copy{
	position: absolute;
	top: 35%;
	right: calc(3% + 60px);
	z-index: 10;
	width: 30%;
	max-width: 400px;
	min-width: 200px;
}

.circle_mainvis{
	position: absolute;
	right: 5%;
	bottom: -50px;
	z-index: 10;
	background-color: rgba(255,255,255,0.80);
	border: 1px solid #565698;
	border-radius: 61% 39% 45% 55% / 56% 46% 54% 44%;
	width: 20vw;
	height: 20vw;
	justify-content: center;
}

.circle_mainvis::before,
.circle_mainvis::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
}

.circle_mainvis::before{
	border: 1px solid #565698;
	border-radius: 61% 39% 45% 55% / 56% 46% 54% 44%;
	animation: r1 30s linear infinite;
	width: 20vw;
	height: 20vw;
}

.circle_mainvis::after{
	border: 1px solid #EC6DAA;
	border-radius: 61% 39% 45% 55% / 56% 46% 54% 44%;
	animation: r1 10s linear infinite;
	width: 20vw;
	height: 20vw;
}
@keyframes r1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.circle_mainvis img{ width: 65%;}


@media screen and (max-width: 690px){
	#top_mv{
		margin: 0;
		padding: 0 0 50px 0;
		background-color: #FFFFFF;
	}
	.slide_mv{
		width: 100%;
		padding: 0 0 15vh 0;
	}
	.slide_mv img{
		width: 100%;
		height: 50vh;
		object-fit: cover;
	}
	.slide-img{ height: 45vh;}
	.mv_copy{
		right: inherit;
		left: 20px;
		top: inherit;
		bottom: 30px;
		width: 50%;
		min-width: inherit;
	}
	.circle_mainvis,.circle_mainvis::before,.circle_mainvis::after{
		width: 30vw;
		height: 30vw;		
	}
	.circle_mainvis{ bottom: 60px;}	
}



/* Pick up
---------------------------------------------------------- */
#pickup{
	padding: 60px 0;
	background-color: rgba(255,255,255,0.20);
}

.inner_pickup h2{
	text-align: center;
}

.inner_pickup .slick-slide{
	position: relative;
	margin: 0 20px;
	text-align: center;
	opacity: 1;
}
.inner_pickup .slick-slide::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.30);
	border-radius: 10px;
}
.inner_pickup .slick-center::before{ display: none;}

.slide_bn img{
	width: 100%;
	border-radius: 10px;
}

.slide_bn .slick-prev, .slide_bn .slick-next{
	top: 50%;
	z-index: 10;
}

.slide_bn .slick-prev{ left: calc(30% - 25px);}
.slide_bn .slick-next{ right: calc(30% - 25px);}

.slide_bn .slick-prev, .slide_bn .slick-next{
	width: 50px;
	height: 50px;
}
.slide_bn .slick-prev:before{	content: url("../img/common/arrow_prev.svg");}
.slide_bn .slick-next:before{	content: url("../img/common/arrow_next.svg");}


@media screen and (max-width: 1100px){	
	.slide_bn .slick-prev{ left: 205px;}
	.slide_bn .slick-next{ right: 205px;}	
	.slide_bn .slick-prev, .slide_bn .slick-next{
		width: 30px;
		height: 30px;
	}	
}

@media screen and (max-width: 690px){	
	#pickup{ padding: 30px 0;}	
	/* slide_bn */	
	.slide_bn .slick-prev{ left: 15px;}
	.slide_bn .slick-next{ right: 15px;}	
}



/* more
---------------------------------------------------------- */
.more_top{
	position: absolute;
	top: 5%;
	padding: 10px 0;
	font-size: 1rem;
}
.more_top::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: -10px;
	width: 50px;
	height: 5px;
	border: none;
	border-right: 2px solid var(--mainColor);
	border-bottom: 1px solid var(--mainColor);
	transform: skew(45deg);
	transition: .3s;
}
.more_top:hover::after{
	right: -20px;
	width: 60px;
}

.more_top a{ text-decoration: none;}


/* News
---------------------------------------------------------- */
#news{
	position: relative;
	-webkit-box-align: stretch;
		-ms-flex-align: stretch;
			align-items: stretch;
}
#news::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 90%;
	height: 100%;
	background-color: #FAF8F2;
}

/* News */
.news_hanger{
	position: relative;
	width: 65%;
	padding: 30px 5% 40px;
}

.tab_news{
	margin: 15px 0;
	padding: 0;
	justify-content: flex-start;
}

.tab_news li{
	position: relative;
	margin: 5px;
	padding: 10px 3rem 10px 2rem;
	border-radius: 3rem;
	list-style: none;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all .2s;
}

.tab_news li.tab_new{
	border: 1px solid var(--mainColor);
	color: var(--mainColor);
}
.tab_news li.tab_info{
	border: 1px solid #5A87B7;
	color: #5A87B7;
}
.tab_news li.tab_event{
	border: 1px solid #C86392;
	color: #C86392;
}
.tab_news li.tab_kokushi{
	border: 1px solid #6BA474;
	color: #6BA474;
}

.tab_news li.cur,
.tab_news li:hover{	color: #fff;}
.tab_news li.tab_new.cur,
.tab_news li.tab_new:hover{background-color: var(--mainColor);}
.tab_news li.tab_info.cur,
.tab_news li.tab_info:hover{background-color: #5A87B7;}
.tab_news li.tab_event.cur,
.tab_news li.tab_event:hover{background-color: #C86392;}
.tab_news li.tab_kokushi.cur,
.tab_news li.tab_kokushi:hover{background-color: #6BA474;}

.tab_news li::after{
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 15px;
	width: 4px;
	height: 4px;
	border-top: 1px solid;
	border-right: 1px solid;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.tab_news li.tab_info::after{ border-color: #5A87B7;}
.tab_news li.tab_event::after{ border-color: #C86392;}
.tab_news li.tab_kokushi::after{ border-color: #6BA474;}

.tab_news li.cur::after,
.tab_news li:hover::after{
	border-color: #fff;
}

.tab_news li:first-child{ margin-right: 0;}

.news_list{ display: none;}

.news_hanger .more_top{ right: 5%;}

/* Blog */
.blog_hanger{
	position: relative;
	width: 35%;
	margin-bottom: 100px;
	padding: 30px 30px 60px 30px;
	background: linear-gradient(#f8e2ed 0%, #f4e1ed 59.38%, #c3d7ef 100%);
	border-radius: 0 0 0 30px;
}

.inner_blog{ max-width: 400px;}

.blog_item a{
	display: block;
	background-color: #fff;
	border-radius: 10px;
}
.blog_item a img{
	width: 100%;
	height: 80%;
	object-fit: cover;
	border-radius: 10px 10px 0 0 ;
}

.blog_item dl{ padding: 20px;}

.blog_item dl dt{
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: center;
}
.blog_item dl dd{
	margin: 0;
	padding: 0;
	text-align: center;
}

.blog_hanger .more_top{ right: calc(5% + 60px);}

/* bn_insta */
.bn_insta{
	margin: 60px auto;
	text-align: center;
}
.bn_insta img{ max-width: 400px;}

@media screen and (max-width: 690px){
	/* news */
	#news::after{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}	
	.news_hanger{ width: 100%;}
	.tab_news li{
		padding: 5px 1.5rem 5px 1rem;
		font-size: 0.75rem;
	}
	.tab_news li::after{
		top: calc(50% - 3px);
		right: 0.5rem;
	}	
	.news_hanger .more_top{ right: 30px;}	
	/* blog */
	.blog_hanger{
		width: 100%;
		margin: 0;
		padding: 20px 15px 30px;
		border-radius: 0;
	}
	.blog_item{ margin: 15px 0;}
	.blog_item a{
		display: -webkit-box;
		display: flex;
		-webkit-box-align: center;
				align-items: center;
		-webkit-box-pack: justify;
					justify-content: flex-start;
		flex-wrap: wrap;	
	}
	.blog_item a img{
		width: 40%;
		height: 120px;
		object-fit: cover;
		border-radius: 10px 0 0 10px;
	}
	.blog_item dl{
		width: 60%;
		padding: 10px;
	}
	.blog_item dl dt,
	.blog_item dl dd{
		line-height: 1.4;
		text-align: left;
	}
	.blog_item dl dt{ margin: 0 0 5px 0;}
	.blog_hanger .more_top{ right: 30px;}
	.bn_insta{ margin: 20px auto;}
}


/* features
---------------------------------------------------------- */
#features{
	width: 100%;
	padding: 60px 0;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 50% 100%, hsla(144,59%,89%,1) 0px, transparent 50%),
	radial-gradient(at 92% 13%, hsla(31,84%,90%,1) 0px, transparent 50%),
	radial-gradient(at 51% 53%, hsla(29,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 12% 87%, hsla(180,35%,84%,1) 0px, transparent 50%),
	radial-gradient(at 86% 85%, hsla(344,83%,92%,1) 0px, transparent 50%),
	radial-gradient(at 11% 14%, hsla(180,35%,84%,1) 0px, transparent 50%);
  background-attachment: fixed;	
}

.features_list{
	margin: 0;
	padding: 0;
	justify-content: center;
	flex-wrap: wrap;
}

.features_list li{
	width: calc(100%/3);
	max-width: 320px;
	margin: 0;
	padding: 15px;
	list-style: none;
}

.features_list li a{
	position: relative;
	text-decoration: none;
	justify-content: center;
}

.features_list li span{
	position: absolute;
	top: calc(50% - 100px);
	right: 0;
	z-index: 1;
	width: 240px;
	height: 240px;
	background-image: radial-gradient(closest-side, #F0EDAD, transparent);
	opacity: 0.6;
}

.features_list li a:hover{ transform: translate(0,-5px);}

.features_list li a:hover span{ 
	transform: scale(1.5);
	transition: 1s ease-in-out;
	opacity: 1;
}

.features_list li svg{
	position: relative;
	z-index: 2;
	width: 80px;
	margin-right: 10px;
	color: var(--mainColor);
}

.features_list li p{
	position: relative;
	z-index: 2;
	color: var(--mainColor);
	font-size: 2.0rem;
	font-weight: 500;
	white-space: nowrap;
	transition: 0.2s ease-out;
}

.features_list li p small{
	display: block;
	color: #000;
	font-size: 1rem;
	font-weight: 300;
}
.features_list li a:hover p{ color: var(--subColor);}

.anno{
	font-size: 0.8rem;
	text-align: right;
}


@media screen and (max-width: 690px){
	
	#features{ padding: 20px;}
	
	/* features_list */
	.features_list ul{
		-webkit-box-align: flex-start;
					align-items: flex-start;
	}
	.features_list li{
		width: 50%;
		margin: 5px 0;
		padding: 5px;
	}
	.features_list li a{
		display: block;
		text-align: center;
	}
	.features_list li img{ margin: 0;}
	.features_list li svg{
		width: 80%;
		margin: auto;
	}
	.features_list li p{
		padding: 0;
		font-size: 1.2rem;
		white-space: inherit;
	}
	.features_list li p small{ font-size: 0.8rem;}
	.features_list li span{ left: inherit;}

}


/* recommend
---------------------------------------------------------- */
#recommend{
	position: relative;
	padding: 60px 0;
	background: url("../img/top/bg_reco01.jpg") no-repeat center;
	background-size: cover;
}
#recommend::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(184,203,228,0.50);
}

#recommend .inner{
	position: relative;
	max-width: 960px;
	z-index: 1;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#recommend h2{ width: 100%;}

.item_reco{
	width: 30%;
	margin: 20px 0;
	background-color: #fff;
	border-radius: 30px;
}

.item_reco a{
	display: block;
	height: 100%;
	text-decoration: none;
	line-height: 0;
}

.item_reco p{
	min-height: 100px;
	margin: 0;
	padding: 0 15px;
	line-height: 1.4;
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image_reco{
	position: relative;
	overflow: hidden;
	border-radius: 30px 30px 0 0;
	z-index: 1;
	line-height: 1;
}
.image_reco img{
	width: 100%;
	transition: 1s all;
}
.item_reco:hover .image_reco img{	transform:scale(1.1,1.1);}



@media screen and (max-width: 690px){
	#recommend{ padding: 20px;}
	.item_reco{
		width: 100%;
		margin: 5px 0;
		border-radius: 10px;
	}	
	.item_reco a{
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
					justify-content: flex-start;
		flex-wrap: wrap;
	}	
	.image_reco{
		width: 30%;
		height: 100%;
		object-fit: cover;
		border-radius: 10px 0 0 10px;
	}
	.item_reco p{ min-height: inherit;}

}