/* CSS Document */
/*----- last up date 20180227 -----*/

.fs-l-pageMain article {
	background: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_01.jpg) bottom center repeat-x;
	width: 100%;
	padding: 0 0 500px;
}

article > img{text-align:center; margin:0 auto 60px; display:block;}

section{width:1100px; margin:0 auto 40px; text-align:center; position:relative;}
section.topSlider{width:100%;}
section.topSlider.wrap{
	width:1039px;
	height:97px;
	padding:20px 30px;
	background:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_bg.jpg) repeat-x center center;
	}

.sliderWrap01.slick-initialized .slick-track{background-color:#000;}
.sliderWrap01.slick-initialized .slick-slide{opacity:0.3;}
.sliderWrap01.slick-initialized .slick-slide a:hover img,
.sliderWrap01.slick-initialized .slick-slide a:hover,
.sliderWrap01.slick-initialized .slick-slide.slick-active{opacity:1;}
.sliderWrap01.slick-initialized .slick-slide.slick-active a:hover{opacity:0.8;}
#sliderWrap02.slick-initialized .slick-slide{margin:0 15px;}
#sliderWrap02.slick-initialized .slick-list{width:966px; margin:0 auto;}

.sliderWrap01.slick-initialized .slick-dots{
	width:1100px;
	margin:5px auto;
	display:flex;
	justify-content: space-around;
	cursor:pointer;
	}

.sliderWrap01.slick-initialized .slick-dots li{width:calc(96% / 5); opacity:0.3;}
.sliderWrap01.slick-initialized .slick-dots li.slick-active{opacity:1;}
.sliderWrap01.slick-initialized .slick-dots li img{width:100%; height:auto;}

.sliderWrap01.slick-initialized  .slick-prev,
.sliderWrap01.slick-initialized  .slick-next {
	width: 60px;
	height: 60px;
	position: absolute;
	background: center center no-repeat;
	z-index: 991;
	border: none;
	top:0;
	bottom:130px;
	left:0;
	right:0;
	margin:auto;
	text-indent: -9999px;
	cursor:pointer;
    opacity:0;
    transition: .3s;
	}

#sliderWrap02.slick-initialized  .slick-prev,
#sliderWrap02.slick-initialized  .slick-next {
	width: 30px;
	height: 97px;
	position: absolute;
	background: center center no-repeat;
	z-index: 991;
	border: none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	text-indent: -9999px;
	cursor:pointer;
	}

.sliderWrap01.slick-initialized .slick-prev{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_priv.png); left:-1300px;}
.sliderWrap01.slick-initialized .slick-next{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_next.png); right:-1300px;}
.sliderWrap01.slick-initialized:hover .slick-prev{left:-1100px; opacity:1;}
.sliderWrap01.slick-initialized:hover .slick-next{right:-1100px; opacity:1;}
#sliderWrap02.slick-initialized .slick-prev{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_priv_02.jpg); left:calc(-100% - 30px); bottom:0;}
#sliderWrap02.slick-initialized .slick-next{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_next_02.jpg); right:calc(-100% - 30px); bottom:0;}

article section.newsWrap h2 {
	width: 90%;
	padding: 10px 35px;
	position: relative;
	margin: 0 auto;
	text-align: left;
	font-size: 30px;
	font-weight: 500;
}
article section.newsWrap h2::before {
	content: "";
	width: 20px;
	height: 20px;
	border: solid #c386b8 3px;
	border-radius: 3px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
article section.newsWrap div.news {
	overflow-y: auto;
	width: 90%;
	padding: 20px;
	margin: 0 auto;
	border: 1px #280e01 solid;
	border-radius: 7px;
	max-height: 200px;
}
article section.newsWrap div.news ul.news {
	display: flex;
	flex-wrap: wrap;
	/*--
	flex-direction: column-reverse;
	--*/
}

article section.newsWrap ul.news li,
article section.newsWrap ul.news li a {
	display: flex;
	color: #391c00;
}

article section.newsWrap ul.news li{
	width: 100%;
	text-align: left;
	font-size: 22px;
	border-bottom: dashed 1px #9c5599;
	padding: 13px 20px;
	transition:.7s;
	transform: translate(-1000px,0);
}


article section.newsWrap ul.news.active li{transform: translate(0,0);}

article section.newsWrap ul.news li:after{
	content:'';
	display:block;
	height:100%;
	width:0%;
	background:#b182af;
	margin:0 auto;
	transition:0.4s;
	transition-duration: 0.4s;
	transition-property:width;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	}
	
article section.newsWrap ul.news li:hover,
article section.newsWrap ul.news li a:hover{color:#fff; opacity:1;}
article section.newsWrap ul.news li:hover:after{width:100%;}



article section.newsWrap ul.news li p{width:85%;}
article section.newsWrap ul.news li span{
	display: block;
	width: 15%;
	font-size: 18px;
	line-height: 36px;
}
article section.mainText.mainText01,
article section.mainText.mainText03{padding-top:250px; position:relative;}

article section.mainText.mainText03{top:-50px;}

article section.mainText.mainText01 h1,
article section.mainText.mainText03 h1{
	width:1160px;
	height:250px;
	background:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-title_02.png) center center no-repeat;
	position:absolute;
	top:0;
	left:-35px;
	font-size:40px;
	padding-top:30px;
	}

article section.mainText.mainText01 p{
	font-size:22px;
	margin:30px auto;
	}
	
article section.mainText.mainText01:before,
article section.mainText.mainText01:after{
	content:"";
	position:absolute;
	background:center center no-repeat;
	}
	
article section.mainText.mainText01:before {
	background-image: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_img_01.png);
	width: 400px;
	height: 400px;
	top: 210px;
	left: -100px;
	z-index: 5;
	}
	
article section.mainText.mainText01:after{
	background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_img_02.png);
	width:330px;
	height:250px;
	top:335px;
	right:-20px;
	}

article section.mainText.mainText02{
	width:1100px;
	height:330px;
	background:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_mugyu.png?=999) no-repeat center center;
	text-align:left;
	padding:190px 0 0 310px;
	font-size:20px;
	}

article section.mainText.mainText03 h1{padding-top:110px;}
article section.mainText.mainText03 ul li{width:50%; text-align:left;}
article section.mainText.mainText03 ul li.text{padding:20px 10px; font-size:17.5px;}
article section.mainText.mainText03 ul li h2{font-size:37px; margin-bottom:20px;}

article section.item{
    background:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_img_03.png) center top no-repeat;
    width: 100%;
    min-height:1000px;
    padding: 180px 0 145px;
    margin-bottom: 0;
	}

article section.item h2{
	width:1160px;
	height:250px;
	background:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-title_01.png) top center no-repeat;
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	font-size:25px;
	padding-top:30px;
	}

article section.item h2 strong{font-size:68px;}

article section.item > ul{
	width:1100px;
	margin:30px auto;
	}

article section.item ul.fe li{width:49%; margin-bottom:1%; margin-right:1%;}
article section.item ul.fe li img{width:100%; height:auto;}

article section.item02 ul.fe {
	width: 100%;
	justify-content: flex-start;
}
article section.item02 ul.fe li {width: calc(94% / 3); margin:1%;}
article section.item02 ul.fe li a {
	color: #391c00;
	height: 350px;
	overflow: hidden;
	display: flex;
	align-items: center;
	border: 1px #eee solid;
	padding: 2px;
}
article section.item02 ul.fe li img{width:100%; height:auto;}
article section.item02 ul.fe li + li + li + li {margin-top: 30px;}



article section.bnrs.bnrs02 ul li{width:calc(100% / 5);}



article section.bnrs{font-size:30px;}
article section.bnrs a{color:#260505;}

article section.bnrs.rank h2,
article section.bnrs.rank ul{
	margin-bottom:150px;
	}

article section.bnrs.rank ul li{position:relative;}

article section.bnrs.rank ul li:before,
article section.bnrs.rank ul li a:after{
	content:"";
	position:absolute;
	background:no-repeat center center;
	}

article section.bnrs.rank ul li:before{
	width:130px;
	height:100px;
	top:-80px;
	left:-30px;
	z-index:999;
	}
	
article section.bnrs.rank ul li:nth-child(1):before{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-icon_no1.png);}
article section.bnrs.rank ul li:nth-child(2):before{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-icon_no2.png);}
article section.bnrs.rank ul li:nth-child(3):before{background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-icon_no3.png);}

article section.bnrs.rank ul li a:after{
	width:408px;
	height:320px;
	top:10px;
	left:10px;
	background-image:url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-link-frame.png);
	}

article section.news ul{margin-bottom:50px;}

article section.news ul li{
	width:100%;
	border-bottom:#e2dede 1px solid;
	padding:10px;
	text-align:left;
	}

article section.news ul li:first-child{
	border-top:#e2dede 1px solid;
	}

article section.news ul li span{
	display:inline-block;
	margin-right:70px;
	}




section.insta{
	width:100%;
	overflow:hidden;
	margin:0;
	}





/*======== top 2021年追加分css　==========*/


.fs-l-pageMain > section.mainText.mainText02 {
	width: 100%;
	height: 874px;
	background: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_05.jpg) no-repeat center center;
	text-align: left;
	padding: 0;
	margin-bottom:20px;
}
	
.fs-l-pageMain > section.mainText.mainText02 h2{
	width:1100px; 
	margin:0 auto;
	padding:60px 60px 10px;
	color:#fff;
	font-size:47px;
	text-shadow: 
    black 2px 0px 5px, black -2px 0px 5px,
    black 0px -2px 5px, black -2px 0px 5px,
    black 2px 2px 5px, black -2px 2px 5px,
    black 2px -2px 5px, black -2px -2px 5px,
    black 1px 2px 5px, black -1px 2px 5px,
    black 1px -2px 5px, black -1px -2px 5px,
    black 2px 1px 5px, black -2px 1px 5px,
    black 2px -1px 5px, black -2px -1px 5px,
    black 1px 1px 5px, black -1px 1px 5px,
    black 1px -1px 5px, black -1px -1px 5px;
	}
.fs-l-pageMain > section.mainText.mainText03 > h2{
	width:1100px; 
	margin:0 auto;
	padding:60px 60px 10px;
	color:#fff;
	font-size:55px;
	text-shadow: 
    black 2px 0px 5px, black -2px 0px 5px,
    black 0px -2px 5px, black -2px 0px 5px;
	}

.fs-l-pageMain > section.mainText.mainText03 > h2 {
	font-size: 75px;
	letter-spacing: 5px;
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	margin: auto;
}

.fs-l-pageMain > section.mainText.mainText02 h2 + h2{padding:20px 60px 10px;}

.fs-l-pageMain > section.mainText.mainText02 h2:after{
	content:"";
	font-size:23px;
	font-weight:lighter;
	display:block;
	}
.fs-l-pageMain > section.mainText.mainText03 > h2::after {
	content: "";
	font-size: 33px;
	font-weight: lighter;
	display: block;
	position: absolute;
	top: 10px;
}

.fs-l-pageMain > section.mainText.mainText02 h2:nth-of-type(1):after{
	content:"The town where the great man was born.";
	}

.fs-l-pageMain > section.mainText.mainText03 > h2:nth-of-type(1):after{
	content:"ZENTSUJI CITY";
	}

.fs-l-pageMain > section.mainText.mainText02 h2:nth-of-type(2):after{
	content:"Mild climate.";
	}

.fs-l-pageMain > section.mainText.mainText02 h2:nth-of-type(3):after{
	content:"Hospitality city.";
	}

.fs-l-pageMain > section.mainText.mainText02 p{
	width:1100px; 
	margin:0 auto;
	padding:30px 40px 30px;
	color:#fff;
	font-size:20px;
	line-height:2;
	text-shadow: 
    black 2px 0px 5px, black -2px 0px 5px,
    black 0px -2px 5px, black -2px 0px 5px,
    black 2px 2px 5px, black -2px 2px 5px,
    black 2px -2px 5px, black -2px -2px 5px,
    black 1px 2px 5px, black -1px 2px 5px,
    black 1px -2px 5px, black -1px -2px 5px,
    black 2px 1px 5px, black -2px 1px 5px,
    black 2px -1px 5px, black -2px -1px 5px,
    black 1px 1px 5px, black -1px 1px 5px,
    black 1px -1px 5px, black -1px -1px 5px;
    }

.fs-l-pageMain > section.mainText.mainText03 {
	width: 100%;
	background-image: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_05_.jpg) , url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-bg_06.png);
	text-align: left;
	padding: 600px 0 50px;
	background-repeat: no-repeat , repeat;
	background-position: top center , center center;
	background-size: auto 600px , auto auto;
}

.fs-l-pageMain > section.mainText.mainText02 nav ul {
	width: 200px;
	position: absolute;
	left: 0;
	margin: auto;
	top: 120px;
}


@media only screen and (max-width:1500px){
.fs-l-pageMain > section.mainText.mainText02 nav ul {
	width: 160px;
	position: absolute;
	left: calc(93% - 160px);
	margin: auto;
	top: 120px;
}

}



.fs-l-pageMain > section.mainText.mainText03 nav ul{
	width:1100px;
	position:absolute;
	right:0;
	left:0;
	margin:auto;
	top:280px;
	}

.fs-l-pageMain > section.mainText.mainText02 nav ul li{
	width:100%;
	transform: translate(00%, 30%);
	opacity:0;
	}

.fs-l-pageMain > section.mainText.mainText02 nav ul li img{
	width:100%;
	height:auto;
	}

.fs-l-pageMain > section.mainText.mainText03 nav ul li{
	width:33%;
	transform: translate(00%, 30%);
	opacity:0;
	}
	
.fs-l-pageMain > section.mainText.mainText02 nav ul li:nth-of-type(1),
.fs-l-pageMain > section.mainText.mainText03 nav ul li:nth-of-type(1){
	-webkit-transition: .5s ease all;
	-moz-transition: .5s ease all;
	-o-transition: .5s ease all;
	transition: .5s ease all;
	transition-duration: 0.5s;
	}
	
.fs-l-pageMain > section.mainText.mainText02 nav ul li:nth-of-type(2),
.fs-l-pageMain > section.mainText.mainText03 nav ul li:nth-of-type(2){
	-webkit-transition:1.5s ease all;
	-moz-transition:1.5s ease all;
	-o-transition:1.5s ease all;
	transition:1.5s ease all;
	transition-duration: 1.5s;
	}
	
.fs-l-pageMain > section.mainText.mainText02 nav ul li:nth-of-type(3),
.fs-l-pageMain > section.mainText.mainText03 nav ul li:nth-of-type(3){
	-webkit-transition: .9s ease all;
	-moz-transition: .9s ease all;
	-o-transition: .9s ease all;
	transition: .9s ease all;
	transition-duration: 0.9s;
	}

.fs-l-pageMain > section.mainText.mainText02 nav ul li.active,
.fs-l-pageMain > section.mainText.mainText03 nav ul li.active{
	transform: translate(0%, 0%);
	opacity:1;
	}
	
.fs-l-pageMain > section.mainText.mainText02 nav ul li:hover{transform: translate(0%, -10%);}
.fs-l-pageMain > section.mainText.mainText03 nav ul li:hover{transform: translate(0%, -30%);}

.fs-l-pageMain > section.mainText.mainText02 nav ul li a:hover,
.fs-l-pageMain > section.mainText.mainText02 nav ul li a:hover img,
.fs-l-pageMain > section.mainText.mainText03 nav ul li a:hover,
.fs-l-pageMain > section.mainText.mainText03 nav ul li a:hover img{opacity:1;}


@media only screen and (max-width:1000px){


/*---==============================---*/
/*---========  top 構成　=======---*/
/*---==============================---*/
	.fs-l-main.active{
		padding-top:40vw;
		}
	
	.fs-l-pageMain > article{
		background-size:100% auto;
		padding-bottom:20vw;
		}
	
	section{width:100vw; padding:0; margin-bottom:5vw;}

	section.topSlider{padding:0;}

	.sliderWrap01.slick-initialized .slick-slide,
	section.topSlider.wrap{width:100vw; height:auto; padding:0;}
	.sliderWrap01.slick-initialized .slick-dots{width:100%;}
	#sliderWrap02.slick-initialized{width:100vw; overflow:hidden;}
	#sliderWrap02.slick-initialized .slick-slide{width:100vw;}
	#sliderWrap02.slick-initialized .slick-slide{margin:0;}
	
	.sliderWrap01.slick-initialized .slick-prev {
	background-image: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_priv.png);
	left: -85vw;
	opacity: 1;
	top: 12vw;
	width: 7vw;
	height: 7vw;
	background-size: 100%;
}
	
	.sliderWrap01.slick-initialized .slick-next {
	background-image: url(https://zentsuji-mandegan.jp/site/wp-content/themes/twentytwentyone-mandegan/assets/images/top/onlineshop/t-slider_arrow_next.png);
	right: -85vw;
	opacity: 1;
	top: 12vw;
	width: 7vw;
	height: 7vw;
	background-size: 100%;
}
	
	.fs-l-pageMain > article section.mainText.mainText01,
	.fs-l-pageMain > article section.mainText.mainText03{padding-top:25vw; top:0;}
	.fs-l-pageMain > article section.mainText.mainText01:before,
	.fs-l-pageMain > article section.mainText.mainText01:after{display:none;}

	.fs-l-pageMain > article section.mainText.mainText01 h1,
	.fs-l-pageMain > article section.mainText.mainText03 h1,
	.fs-l-pageMain > article section.item h2{
		width:100vw;
		left:0;
		font-size:4vw;
		height:37vw;
		background-size:100% auto;
		}
		
	.fs-l-pageMain > article section.mainText.mainText01 h1{
		letter-spacing:-1px;
		}
		
	.fs-l-pageMain > article section.mainText.mainText03 h1{
		padding-top:5vw;
		font-size:5vw;
		height:25vw;
		}

	.fs-l-pageMain > article section.mainText.mainText01 p {
		font-size: 3vw;
		margin: 5vw auto;
		}

	.fs-l-pageMain > article section.mainText.mainText02{
		width:100vw;
		left:0;
		font-size:2vw;
		height:30vw;
		padding:17vw 5vw 0 28vw;
		background-size:100% auto;
		}
	
	.fs-l-pageMain > article section.item h2 strong{font-size:7vw;}
	.fs-l-pageMain > article section.item h2 {
		font-size: 4vw;
		height: 24vw;
		padding-top: 2vw;
		}
	
	.fs-l-pageMain > article section.item{
		padding:15vw 0 20vw;
		min-height:auto;
		background-position:center bottom;
		}
		
	.fs-l-pageMain > article section.item > ul{width:100%;}
	.fs-l-pageMain > article section.item > ul.fe li{width:96%;}
	.fs-l-pageMain > article section.item > ul.fe li > ul > li {width: 49%; margin-bottom: 2%; margin-right: 0;}
	.fs-l-pageMain > article section.item > ul.fe li > ul > li:nth-child(2n+1){margin-right:2%;}
	.fs-l-pageMain > article section.mainText.mainText03 ul li{width:100%;}
	.fs-l-pageMain > article section.mainText.mainText03 ul li h2{font-size:5vw; margin-bottom:3vw;}
	.fs-l-pageMain > article section.mainText.mainText03 ul li.text{font-size:3vw;}
	
	article section.item02 ul.fe {width: 100%;}
	article section.item02 ul.fe li {width: calc(96% / 2); text-align: left;}
	article section.item02 ul.fe li a {height: auto;}
	article section.item02 ul.fe li img {width: 100%; height: auto;}
	article section.item02 ul.fe li + li + li,
	article section.item02 ul.fe li + li + li + li {margin-top:5vw;}



}