@charset "utf-8";

/* top_mainvisual
---------------------------------------------------------- */
#top_mainvisual{position: relative;}
#top_mainvisual::after{content: ""; position: absolute; z-index: 1; bottom: 4.4vw; left: 0;
	display: block; width: 46vw; height: 23.7vw; background: #d9e9e1;}
.top_mainvisual_box1{position: relative; z-index: 2; display: flex; justify-content: space-between; flex-wrap: wrap;}
#top_mainvisual .top_mv_left{width: 40%; padding-top: 120px;}
#top_mainvisual .top_mv_right{width: 60%;}
.MV_copy{padding-left: 15%;padding-right: 1%; text-align: center;}
.MV_copy .HeadTitle{max-width: 60%; margin: 0 auto 30px;}
.MV_copy .HeadMiddleTitle{font-size: 18px;line-height: 1.8;letter-spacing: 1px;margin-bottom: 10px; color: #006e38;}
.MV_copy p{font-size: 13px; line-height: 2; letter-spacing: -0.04em;}

.top_mainvisual_box2{position: relative;  z-index: 2;}
.MV_photo2{
  position: absolute; top: -40px; left: 40%; transform: translate(-50%,0);
  max-width: 32vw; width: 100%; z-index: 2;
}
.top_mainvisual_box2::after{content: ""; display: block;
	margin: 0 auto 0 46%; width: 28vw; height: 22vw; background: #d9e9e1;
}

.top_square{position: absolute;  z-index: 3; bottom: 0; left: 0; right: 0;}
.top_square_box{position: absolute; bottom: 0; left: 0;}

.top_mainvisual_scroll{position: absolute; z-index: 4; bottom: 28.1vw; left: 2.2vw; transform: translateY(72%);}
.top_mainvisual_scroll a{display: block; transition: 0.3s ease;
	background: url(../../../img/pages/top/scroll_white.svg) no-repeat center bottom;
	background-size: 100%;}
.top_mainvisual_scroll span{display: block; clip-path: inset(0 0 72% 0); transition: 0.3s ease;}
.top_mainvisual_scroll a:hover{transform: translateY(10%);}
.top_mainvisual_scroll a:hover span{clip-path: inset(0 0 82% 0);}

/* 動作 */
.MV_photo1 figure{opacity: 0; filter: blur(5px); transition: 0.8s ease-in;}
.MV_photo2 figure{opacity: 0; filter: blur(5px); /*transition: 0.8s ease-in 0.8s;*/transition: 0.8s ease-in 0.9s;}
#top_mainvisual::after{transform: translateX(-80px); opacity: 0; transition: 0.5s ease-in 2s;}
.top_mainvisual_box2::after{transform: translateX(80px); opacity: 0; transition: 0.5s ease-in 2s;}
.top_square_01{opacity: 0; transition: 1s ease-in 2.2s;}
.top_square_02{opacity: 0; transition: 1s ease-in 2.6s;}
.top_square_03{opacity: 0; transition: 1s ease-in 3s;}
.top_square_04{opacity: 0; transition: 1s ease-in 3.4s;}
.MV_copy{/*transform: translateY(-40px);*/ opacity: 0; /*transition: 0.5s ease-in 3.6s;*/transition: 0.8s ease-in 0.6s;}
.top_mainvisual_scroll{opacity: 0; transition: 0.5s ease-in 4.3s;}

#top_mainvisual.mv_show .MV_photo1 figure{opacity: 1; filter: blur(0);}
#top_mainvisual.mv_show .MV_photo2 figure{opacity: 1; filter: blur(0);}
#top_mainvisual.mv_show:after{transform: translateX(0); opacity: 1;}
#top_mainvisual.mv_show .top_mainvisual_box2::after{transform: translateX(0); opacity: 1;}
#top_mainvisual.mv_show .MV_copy{/*transform: translateY(0);*/ opacity: 1;}
#top_mainvisual.mv_show .top_square_01{opacity: 1;}
#top_mainvisual.mv_show .top_square_02{opacity: 1;}
#top_mainvisual.mv_show .top_square_03{opacity: 1;}
#top_mainvisual.mv_show .top_square_04{opacity: 1;}
#top_mainvisual.mv_show .top_mainvisual_scroll{opacity: 1;}

@media screen and (max-width:960px){
	#top_mainvisual::after{bottom: 3vw; height: 30vw;}
	#top_mainvisual .top_mv_left{width: 55%; padding-top: 5vw;}
	#top_mainvisual .top_mv_right{width: 45%;}
	.MV_copy{padding-left: 12%; padding-right: 5%;}
	.MV_copy .HeadTitle{width: 70%; margin: 0 auto; margin-bottom: 2vw;}
	.MV_copy .HeadMiddleTitle{font-size: 15px;}
	.MV_copy p{font-size: 14px;}

	.top_mainvisual_box2{margin-top: 70px;}
	.top_mainvisual_box2::after{width: 36vw;}
	.MV_photo2{left: 43%; transform: translate(0,0);}

	.top_square_left{padding: 0 20% 0 10%;}

	.top_mainvisual_scroll{bottom: 33vw; transform: translateY(60%);}
	.top_mainvisual_scroll span{clip-path: inset(0 0 60% 0);}
	.top_mainvisual_scroll a:hover span{clip-path: inset(0 0 70% 0);}
}
@media screen and (max-width:640px){
	#top_mainvisual::after{bottom: auto; top: 60px; height: 50vw;}
	.top_mainvisual_box1{flex-direction: column-reverse;}
	#top_mainvisual .top_mv_left{width: 100%; padding: 0;}
	#top_mainvisual .top_mv_right{width: 100%; padding-left: 20%;}
	.MV_copy{padding: 20px;}
	.MV_copy .HeadTitle{width: 60%; margin-bottom: 20px;}
	.MV_copy .HeadMiddleTitle{font-size: 14px; margin-bottom: 10px;}
	.MV_copy p{font-size: 10px;}

	.top_mainvisual_box2{padding: 0; margin-top: 0; z-index: 1;}
	.MV_photo2{left: auto; right: 0; top: 0; position: relative; text-align: right; width: 100%; max-width: 100%; padding-left: 30%;}
	.top_mainvisual_box2::after{margin: 0; position: absolute; top: -40px; right: 0;}

	.top_mainvisual_scroll{width: 20px; bottom: 10vw; transform: translateY(0%);}
	.top_mainvisual_scroll span{clip-path: inset(0);}

	.top_square{top: 0;}
	.top_square_01{top: 0;}
	.top_square_02{bottom: 20px;}
	.top_square_04{display: none;}
}


/* site_title
---------------------------------------------------------- */
#site_title{padding: 80px 0 0;}
.site_title_image{max-width: 405px; width: 100%; margin: 0 auto;}

@media screen and (max-width:960px){
	.site_title_image{max-width: 360px;}
}
@media screen and (max-width:640px){
	#site_title{padding: 50px 0 0;}
	.site_title_image{max-width: 60%;}
}

/* top_information
---------------------------------------------------------- */
#top_information{padding: 100px 0 0;}
#top_information .inner{max-width: 770px;}

#top_information h3{margin-bottom: 20px;}
#top_information h3 span{font-size: 26px; font-weight: 500; letter-spacing: 0; line-height: 1.5; display: block; border-bottom: 1px solid #000;}
#top_information h3 small{font-size: 12px;}

.top_infor_wrap{max-width: 360px; width: 100%; margin: 0 auto;}
.top_infor_wrap li{position: relative; padding-left: 82px; line-height: 2.2;}
.top_infor_wrap li .infor_day{position: absolute; top: 0; left: 0;}
.top_infor_wrap li .infor_day::after{content: "／"; padding: 0 3px;}
.top_infor_wrap li a{color: #00c765; text-decoration: underline;}

@media screen and (max-width:960px){
	#top_information{padding: 80px 0 0;}
	.top_infor_wrap{max-width: 500px;}
}
@media screen and (max-width:640px){
	#top_information{padding: 50px 0 0;}
	#top_information h3 span{font-size: 22px;}

	.top_infor_wrap li{padding: 0; line-height: 1.8;}
	.top_infor_wrap li + li{margin-top: 15px;}
	.top_infor_wrap li .infor_day{position: static; display: block;}
	.top_infor_wrap li .infor_day::after{display: none;}
}

/* top_pickUP
---------------------------------------------------------- */
#top_pickUP{padding: 90px 0 0;}
#top_pickUP .alphabet_title{margin-bottom: 30px;}

.top_pickup_wrap{background: #006e38; padding: 20px 0 60px; position: relative;}
.top_pickup_wrap::before{content: "";
	width: 4vw; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;
	background: linear-gradient(to right,  rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 100%);}
.top_pickup_wrap::after{content: "";
	width: 4vw; height: 100%; position: absolute; top: 0; right: 0; z-index: 2;
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.6) 100%);}
.pickup_slide_box{padding: 0 20px;padding-top: 30px;}
.pickup_slide_box a{display: flex; flex-direction: column; flex-wrap: wrap; background: #fff; height: 100%;}
.pickup_slide_box a:hover{opacity: 1;}
.pickup_slide_box a figure{overflow: hidden;}
.pickup_slide_box a figure img{transition: 1s ease;}
.pickup_slide_box a:hover figure img{transform: scale(1.2);}
.pickup_slide_box.is-new{
	position: relative;
	z-index: 0;
}
.pickup_slide_box.is-new:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 67px;
	height: 67px;
	background: url("../../../img/pages/common/icon_new.svg")no-repeat center center;
	background-size: cover;
	z-index: 2;
}
.pickup_text{padding: 18px 20px 20px;}
.pickup_text h4{font-size: 16px; line-height: 1.5; color: #006e38; margin-bottom: 20px;}
.pickup_text h4.mini{font-size: 14px;}
.pickup_text h4 small{font-size: 11px;}
.pickup_more{text-align: right; margin-top: auto; padding: 0 20px 20px;}
.pickup_more span{font-size: 16px; color: #fff; background: #006e38; padding: 0px 3px; line-height: 1.2;}


.top_pickup_slide .slick-prev,
.top_pickup_slide .slick-next{z-index: 10;}

.top_pickup_slide .slick-prev::before {content: ""; transform: rotate(45deg); display: block; width: 18px; height: 18px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; opacity: 1;}
.top_pickup_slide .slick-prev{left: 0; right: auto; top: auto; bottom: -40px; margin: 0 auto; transform: translateX(20px);}

.top_pickup_slide .slick-next::before {content: ""; transform: rotate(45deg); display: block; width: 18px; height: 18px; border-top: 2px solid #fff; border-right: 2px solid #fff; opacity: 1;}
.top_pickup_slide .slick-next{left: auto; right: 0; top: auto; bottom: -40px; margin: 0 auto; transform: translateX(-20px);}

/*
.top_pickup_slide .slick-prev,
.top_pickup_slide .slick-next{z-index: 10; width: 36px; height: 36px;}
.top_pickup_slide .slick-prev::before,
.top_pickup_slide .slick-next::before{display: none;}
.top_pickup_slide .slick-prev{left: 9%; transform: rotate(45deg) translateY(-50%);
	border-bottom: 1px solid #000; border-left: 1px solid #000;}
.top_pickup_slide .slick-next{right: 9%; transform: rotate(-45deg) translateY(-50%);
	border-bottom: 1px solid #000; border-right: 1px solid #000;}
*/

.dots-wrap {
    display: flex;
    justify-content: center;
	margin-top: 30px;
	margin-bottom: -30px;
	max-width: 600px;
	width: 100%;
	margin: 40px auto -40px;
}

.dots-wrap li {
    width: calc(100% / 10);
    height: 6px;
    margin: 0 5px;
    background: #fff;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: coral;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}


@media screen and (max-width:960px){
	#top_pickUP{padding: 70px 0 0;}
	.pickup_slide_box{padding: 0 10px;padding-top: 30px;}

}
@media screen and (max-width:640px){
	#top_pickUP{padding: 50px 0 0;}

	.top_pickup_wrap{padding: 20px 0 40px;}
	.pickup_text h4.sp_mini{font-size: 14px;}

	/*
	.top_pickup_slide .slick-prev,
	.top_pickup_slide .slick-next{width: 20px; height: 20px; border-width: 2px;}
	.top_pickup_slide .slick-prev{left: 5%;}
	.top_pickup_slide .slick-next{right: 5%;}
	*/
	
	.dots-wrap {margin: 30px 0 -30px; max-width: 100%; padding: 0 30px;}

	.top_pickup_slide .slick-prev {left: 13px; right: auto; bottom: -30px; transform: translateX(0);}
	.top_pickup_slide .slick-next {left: auto; right: 13px; bottom: -30px; transform: translateX(0);}
	

}

/* top_contents
---------------------------------------------------------- */
#top_contents{padding: 110px 0 100px;}
#top_contents .alphabet_title{margin-bottom: 30px;}
#top_contents .title_sentence{margin-bottom: 70px; text-align: center; letter-spacing: 0; line-height: 1.5;}

.top_contents_wrap{/*max-width: 725px;*/max-width: 825px;width: 100%; margin: 0 auto;}
.top_contents_wrap::after{width: calc(100% + 100vw - 742px); height: 550px;
	top: 50%; left: 0;
	transform: translateY(-50%) translateX(-50vw) translateX(370px);}
.top_contents_box{position: relative;}
.top_contents_box + .top_contents_box{margin-top: 40px;}
.top_contents_box a{justify-content: space-between; border: 1px solid #006e38;}
.top_contents_box a picture{overflow: hidden; display: inline-block; vertical-align: bottom;}
.top_contents_box a picture img{transition: 1s ease;}
.top_contents_box a:hover{opacity: 1;}
.top_contents_box a:hover img{transform: scale(1.2);}
.top_contents_text{width: 30%; background: #fff; padding: 20px 15px;}
.top_contents_text h4{color: #006e38; font-size: 11px; margin-bottom: 20px;}
.top_contents_text h4 b{display: block; font-size: 26px; font-weight: 500;}
.top_contents_text p{}
.top_contents_img{width: 70%; position: relative;}
.top_contents_img picture .cap{left: 0; right: inherit;}
.top_contents_img::after{content: ""; display: block;
	position: absolute; bottom: 0; right: 0;
	border-bottom: 68px solid #006e38; border-left: 44px solid transparent; border-right: 0 solid transparent;}

.top_contents_box.is-new:before{
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 67px;
	height: 67px;
	background: url("../../../img/pages/common/icon_new.svg")no-repeat center center;
	background-size: cover;
	z-index: 2;
}

@media screen and (max-width:960px){
	#top_contents{padding: 80px 0 50px;}
	#top_contents .alphabet_title{margin-bottom: 20px;}
	#top_contents .title_sentence{margin-bottom: 30px;}
	.top_contents_box + .top_contents_box{margin-top: 40px;}
	.top_contents_text h4{font-size: 14px;}
}
@media screen and (max-width:640px){
	#top_contents{padding: 50px 0 50px;}
	.top_contents_wrap::after{width: calc(100% + 30px); transform: translateY(-50%); margin-left: -15px; margin-right: -15px;}
	.top_contents_box + .top_contents_box{margin-top: 20px;}
	.top_contents_text{width: 100%; padding: 15px;}
	.top_contents_text h4{font-size: 14px; margin-bottom: 10px;}
	.top_contents_text h4 b{font-size: 20px; display: inline-block; padding-right: 10px;}
	.top_contents_img{width: 100%;}
	.top_contents_img::after{border-bottom: 50px solid #006e38; border-left: 30px solid transparent;}
	.top_contents_img picture .cap{margin-bottom: -2px;}
}