@charset "UTF-8";
/* CSS Document */



.mainImage{
	width:100%;
	height:calc(100% - 80px);
	margin-top: 80px;
	position:relative;
	background:url(../../images/mian_f23bk.jpg) center center no-repeat;
	background-size:cover;
	overflow: hidden;
}
.mainImage .titleBox{
	position:absolute;
	top:50%;
	left:28%;
	width: 42.5%;
	z-index: 20;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.mainImage .titleBox .title{
	margin:0 auto;
	position:relative;
	top: 20px;
	width:100%;
	opacity:0;
	-webkit-transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
	transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
}
.mainImage.start .titleBox .title{opacity:1;top:0;}

.mainImage .titleBox02{
	position:absolute;
	top:52%;
	left:73%;
	width: 56%;
	z-index: 4;
	opacity: 0;
	-webkit-transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);	 
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.mainImage.start .titleBox02{opacity: 1;top:50%;left:71%;}

.mainImage .titleBox02 .tape{
	position: absolute;
	z-index: 10;
	width: 22%;
	top:0;
	left: 40%;
}

.mainImage .titleBox03{
	position:absolute;
	bottom:-1px;
	left:0;
	width: 11.5%;
	z-index: 5;
}
.mainImage .titleBox04{
	position:absolute;
	top:50%;
	left:28.5%;
	width: 43.6%;
	z-index: 3;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.mainImage .titleBox05{
	position:absolute;
	top:2.2vw;
	left:1.2vw;
	width: 11%;
	z-index: 5;
}

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


.intro{
	width:90%;
	margin:140px auto 0;
}
.intro h2{
	text-align:center;
	font-size:26px;
	font-weight:500;
	line-height:2.0;
	letter-spacing:0.1em;
	margin-bottom:110px;
	color: #3B2109;
}
.intro h2 br.res{display:none;}

.scroll{
	display:block;
	width:3px;
	height:200px;
	margin:0 auto;
	position:relative;
}

.scroll:before {
	position:absolute;
	content:'';
	width:1px;
	height:200px;
	background:#E3D3C5;
	top:0;
	left:50%;
	z-index:1;
}

.scroll:after {
	position:absolute;
	content:'';
	width:1px;
	height:200px;
	background:#3B2109;
	top:0;
	left:50%;
	z-index:5;
	transform:translateX(-50%);
	transition:cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
	transition-delay:1.5s;
	animation:lineAnimation 2s infinite; 
}
@keyframes lineAnimation {
0% {
	transform: scaleY(1);
	transform-origin: center bottom;
}
49.9% {
	transform: scaleY(0);
	transform-origin: center bottom;
}
50% {
	transform: scaleY(0);
	transform-origin: center top;
}
100% {
	transform: scaleY(1);
	transform-origin: center top;
}
}


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


.lead{
	width: 97%;
	max-width: 1000px;
	margin: 80px auto 0;
	position: relative;
}
.lead .text{
	width: 100%;
	padding: 80px 0 100px;
	color: #3B2109;
}
.lead .text h3,
.lead.delighter .text h3{
	margin: 0 auto;
	font-size: 17px;
	letter-spacing: 0.12em;
	line-height: 2.8;
	text-align: center;
	position: relative;
	top: 50px;
	opacity: 0;
	-webkit-transition:all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);	
	transition:all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lead.delighter.started .text h3{opacity: 1;top: 0;}



.lead .deco{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.lead .deco p img,
.lead.delighter .deco p img{
	position: relative;
	opacity: 0;
	-webkit-transform:scale(0.8);
	transform:scale(0.8);
	-webkit-transition:all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);	
	transition:all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.lead.delighter.started .deco p img{
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}
.lead .deco .de01 img,
.lead.delighter .deco .de01 img{
	-webkit-transition-delay:0.4s;
	transition-delay:0.4s;
}
.lead .deco .de02 img,
.lead.delighter .deco .de02 img{
	-webkit-transition-delay:0.6s;
	transition-delay:0.6s;
}
.lead .deco .de03 img,
.lead.delighter .deco .de03 img{
	-webkit-transition-delay:0.8s;
	transition-delay:0.8s;
}
.lead .deco .de01{
	position: absolute;
	width: 14%;
	right: -1%;
	top: 0;
}
.lead .deco .de02{
	position: absolute;
	width: 18%;
	left: 5%;
	bottom: 0;
}
.lead .deco .de03{
	position: absolute;
	width: 14%;
	right: 12%;
	bottom: 0;
}



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


.topNavi{
	width: 95%;
	max-width: 1500px;
	margin: 220px auto;
	overflow: hidden;
}
.topNavi ul{
	width: 102%;
	margin: 0 auto;
	font-size: 0;
}
.topNavi ul li{
	width: 23%;
	margin-right: 2%;
	font-size: 12px;
	display: inline-block;
	position: relative;
	vertical-align: top;
}
.topNavi ul li a{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}
.topNavi ul li a .n_img{
	display: block;
	-webkit-transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.topNavi ul li a:after{
	content: "";
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	border: 8px solid #3B2109;
	box-sizing: border-box;
	 -webkit-transition: border 0.4s;
	 transition: border 0.4s;
}
.topNavi ul li a span{
	width: 65%;
	position: absolute;
	z-index: 5;
	right: 10px;
	bottom: 10px;
	fill:#3B2109;
	-webkit-transition: fill 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: fill 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media(min-width: 769px) {
.topNavi ul li a:hover .n_img{-webkit-transform:scale(1.08);transform:scale(1.08);	}
.topNavi ul li a:hover:after{border: 12px solid #FC9E5A;}
.topNavi ul li a:hover span{fill:#FC9E5A;}
}


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

.items{
	width:100%;
	padding-bottom: 200px;
	overflow: hidden;
}

.items h2{
	font-size:56px;
	font-family:'DINPro-Light';
	text-align:center;
}
.items .slider{
	width:100%;
	max-width:1300px;
	margin:40px auto 0;
	padding:0 55px 40px;
	overflow:hidden;
}
.items .itemSlide li.item{
	padding:5px;
	vertical-align:top;
	text-align:center;
	line-height:1.3;
}
.items h3{
	font-family:'DINPro-Medium';
	font-size:15px;
	margin-top:15px;
	line-height: 1.2;
}
.items .spec{
	font-family:'DINPro-Regular';
	font-size:14px;
	margin:2px 0 6px;
}
.items .buy{
}
.items .buy a{
	display:inline-block;
	background:#3B2109;
	color:#FFF;
	line-height:1;
	padding:5px 25px;
	font-size: 15px;
	border-radius:20px;
	font-family:'DINPro-Regular';
	-webkit-transition: background 0.3s;
	transition: background 0.3s;
	
}

.items .more{
	text-align:center;
	margin-top:30px;
}
.items .more a{
	display:inline-block;
	border:1px solid #000;
	font-family:'DINPro-Regular';
	font-size:19px;
	line-height:1;
	padding:10px 40px;
	background:#FFF;
	color: #000;
	border-radius:50px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (min-width: 769px) {
.items .buy a:hover{background:#FC9E5A;color: #FFF;}
.items .more a:hover{border:1px solid #3B2109;color:#FFF !important;background:#3B2109;}

}




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



.shopList{
	width: 90%;
	max-width: 1180px;
	margin: 0 auto;
	overflow: hidden;
}
.shopList h2{
	font-family:'DINPro-Medium';
	font-size: 54px;
	text-align: center;
	color: #333;
	line-height: 1.0;
	margin-bottom: 60px;
}
.shopList h2 span{
	display: block;
	font-family:'DINPro-Light';
}

.shopList .listTrigger{
	width: 100%;
	font-size: 16px;
	font-weight: 400;
	border-bottom: 1px solid #CCC;
	padding: 17px 0 17px 10px;
	position: relative;
	cursor: pointer;
	-webkit-transition:all 0.3s;	
	transition:all 0.3s;
}
.shopList .listTrigger:after{
	z-index:5;
	display:block;  
	content:"";  
	position:absolute;  
	top:0;
	bottom:0;
	right:14px;
	width:7px;
	height:7px;
	margin:auto;  
	border-bottom:solid 3px #000;  
	border-right:solid 3px #000;  
	-webkit-transition:all 0.5s;	
	transition:all 0.5s;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.shopList .listTrigger.open:after{ 
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
}
.shopList .listTrigger.farst{border-top: 1px solid #CCC;}

.shopList .list{display: none;}
.shopList table{
	width: 100%;
	font-size: 14px;
	text-align: left;
	line-height: 1.4;
}

.shopList table th{
	text-align: left;
	width: 28em;
	padding: 12px 15px 12px 0;
	box-sizing: border-box;
	border-bottom: 1px solid #CCC;
}
.shopList table td{
	border-bottom: 1px solid #CCC;
	 padding: 12px 0;
}
.shopList table tr td:last-child{
	width: 8em;
	text-align: right;
}

.shopList .listTrigger:hover{background: #F7F7F7;}













/* ========================= Slider =============================== */

.slick-slider{
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
		user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list{
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	outline:none;
}
.slick-list:focus{
	outline:none;
}
.slick-list.dragging{
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track{
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before,
.slick-track:after{
	display: table;
	content: '';
}
.slick-track:after{
	clear: both;
}
.slick-loading .slick-track{
	visibility: hidden;
}
.slick-slide{
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide{
	float: right;
}
.slick-slide img{
	display: block;
}
.slick-slide.slick-loading img{
	display: none;
}
.slick-slide.dragging img{
	pointer-events: none;
}
.slick-initialized .slick-slide{
	display: block;
}
.slick-loading .slick-slide{
	visibility: hidden;
}
.slick-vertical .slick-slide{
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}




/* Prev Next Button */

.slick-prev,
.slick-next {
	cursor:pointer;
	display:block;
	font-size:0;
	line-height:0;
	margin-top:-17px;
	padding:0;
	position:absolute;
	top:50%;
	z-index:50;
	width:35px;
	height:35px;
	background:rgba(0,0,0,0.2);
	border-radius:50%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.items .slick-prev,
.items .slick-next {top:40%;}

.slick-prev::before,
.slick-next::before{
	display:block;  
	content:"";  
	position:absolute;
	z-index:2;
	width:27px;
	height:27px;
	background:rgba(0,0,0,0.2);
	top:0;
	left:0;
	margin-top:4px;
	margin-left:4px;
	border-radius:50%;
}


.slick-prev {left:-45px;}
.slick-next{right:-45px;}

.slick-prev::after{
	z-index:5;
	display:block;  
	content:"";  
	position:absolute;  
	top:0;  
	bottom:0;  
	left:14px;  
	width:10px;  
	height:10px;  
	margin:auto;  
	border-bottom:solid 3px #FFF;  
	border-right:solid 3px #FFF;  
	-webkit-transform:rotate(135deg);
	transform:rotate(135deg);
}
.slick-next::after{
	z-index:5;
	display:block;  
	content:"";  
	position:absolute;  
	top:0;
	bottom:0;
	right:14px;  
	width:10px;  
	height:10px;
	margin:auto;  
	border-bottom:solid 3px #FFF;  
	border-right:solid 3px #FFF;  
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

/* slick-dots */
.slick-dots{
	display:block;
	list-style:outside none none;
	padding:0;
	text-align:center;
	width:100%;
	position:absolute;
	bottom:-40px;
	z-index:10;
}

.slick-dots li{
	cursor: pointer;
	display: inline-block;
	margin: 0 4px;
	padding: 0;
	position: relative;

}
.slick-dots li button {
	cursor:pointer;
	display:block;
	font-size:0;
	height:12px;
	width:12px;
	padding:0px;
	line-height: 0;
	outline:medium none;
	background:#B3B3B3;
	border-radius:8px;
}
.slick-dots li.slick-active button {
	background:#3B2109;
}










@media (max-width: 1080px) {

.mainImage .titleBox{left:32%;width: 50%;}
.mainImage .titleBox02{left:74%;width: 62%;}
.mainImage.start .titleBox02{left:72%;}

.mainImage .titleBox04{left:32%;width: 52%;}
.mainImage .titleBox05{width: 13%;}

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

.intro h2{font-size:24px;margin-bottom:100px;}

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

.lead{width: 97%;margin-top: 50px;}
.lead .text h3,
.lead.delighter .text h3{font-size: 15px;}

.lead .deco .de01{width: 11%;right: 1%;}
.lead .deco .de02{width: 15%;left: 3%;}
.lead .deco .de03{width: 13%;right: 12%;}

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

.topNavi{width: 98%;margin: 20% auto;}
.topNavi ul{ width: 101%;}
.topNavi ul li{ width:24%;margin-right:1%;}

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

.items h3 br{display: none;}
.items .slider{padding:0 30px 30px;}

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

.shopList table{font-size: 13px;}

}




@media (max-width: 850px) {


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

.intro{margin-top:120px;}
.intro h2{font-size:22px;margin-bottom: 80px;}


.scroll{height:150px;}
.scroll:before {height:150px;}
.scroll:after {height:150px;}

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

.lead .text{width: 70%;margin: 0 auto;padding: 6vw 0 10vw;}

.lead .text h3,
.lead.delighter .text h3{text-align: left; line-height: 2.6;}

.lead .text h3 br{display: none;}
.lead .text h3 br.fix{display: block;}

.lead .deco .de01{width: 13%;right: 1%;}
.lead .deco .de02{width: 18%;left: 0%;}
.lead .deco .de03{width: 14%;right: 16%;}

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

.topNavi{margin: 18% auto;}

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

.items{padding-bottom: 19%;}
.items h2{font-size:48px;}
.items .slider{padding:0 55px 50px;}

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

.shopList{width: 95%;}
.shopList h2{font-size: 48px;}
.shopList table{font-size: 13px;}
.shopList table th{width: 20em;}

}




/*==========================================================*/




@media (max-width: 768px) {

.mainImage{
	height:calc(100% - 70px);
	margin-top: 70px;
	background-image:url(../../images/mian_f23bk_sp.jpg);
}

.mainImage .titleBox{
	top:25%;
	left:50%;
	right: 0;
	margin: 0 auto;
	width: 55%;
}

.mainImage .titleBox02{top:57%;left:53%;width: 70%;}
.mainImage.start .titleBox02{top:54%;left:50%;}

.mainImage .titleBox02 .tape{width: 22%;top:auto;bottom: 1%;left: -8%;}

.mainImage .titleBox03{display: none;}
.mainImage .titleBox04{display: none;}
.mainImage .titleBox05{
	top:auto;
	bottom: 7vh;
	left:0;
	right: 0;
	margin: 0 auto;
	width: 18%;
}

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

.intro{width:100%;margin-top:15%;}
.intro h2{margin-bottom:10%;}

.pc_view{display: none;}
.sp_view{display: block;}

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

.lead{width:100%;margin: 0 auto;}

.lead .text{width: 80%;padding: 24% 0 20%;}
.lead .text h3,
.lead.delighter .text h3{font-size: 15px;}

.lead .deco .de01{width: 30%;right: 2%;}
.lead .deco .de02{width: 26%;left: 2%;}
.lead .deco .de03{width: 15%;right: 12%;bottom: 5%;}

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

.topNavi{width: 86%;margin: 20% auto 0;}
.topNavi ul{width: 106%;}
.topNavi ul li{width: 44%;margin-right: 6%;}
.topNavi ul li:nth-child(1){margin-bottom: 6%;}
.topNavi ul li:nth-child(2){margin-bottom: 6%;}
.topNavi ul li a:after{border-width: 10px;}
.topNavi ul li a span{right: 12px;bottom: 12px;}

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

.items{padding: 0; margin-top: 20%;}
.items h2{font-size:48px;}
.items .slider{padding:0 0px 40px;}

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

.shopList{margin-top: 22%;}
.shopList h2{font-size: 48px;margin-bottom: 50px;}

.shopList table{ font-size: 14px;width: 98%;margin: 0 auto;}
.shopList table th{display: block;width: 100%;padding: 13px 0 3px 0; border-bottom:none;font-weight: 500;}
.shopList table td{width: 100%;display: block;border: none;padding: 3px 0;}
.shopList table tr td:last-child{width: 100%;text-align: left;border-bottom: 1px solid #CCC;padding: 0 0 12px 0;}

}




@media(max-width: 650px) {



.mainImage .titleBox{width: 65%;}
.mainImage .titleBox02{width: 80%;}





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


.intro{margin-top:18%;}
.intro h2{font-size:20px;}

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

.lead .text{width: 75%;padding: 28% 0 25%;}
.lead .text h3,
.lead.delighter .text h3{font-size: 14px;line-height: 2.3;}

.lead .deco .de01{width: 38%;right: 2%;}
.lead .deco .de02{width: 32%;left: 2%;}
.lead .deco .de03{width: 20%;right: 12%;bottom: 3%;}

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

.topNavi{width: 90%;}
.topNavi ul{width: 103%;}
.topNavi ul li{width: 47%;margin-right: 3%;}
.topNavi ul li:nth-child(1){margin-bottom: 3%;}
.topNavi ul li:nth-child(2){margin-bottom: 3%;}
.topNavi ul li a:after{border-width:8px;}
.topNavi ul li a span{right: 10px;bottom: 10px;}

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

.items{padding: 0; margin-top: 24%;}
.items h2{font-size:42px;}

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

.shopList{margin-top: 26%;}
.shopList h2{font-size: 42px;margin-bottom: 50px;}
.shopList table td{ font-size: 13px;}


}




@media (max-width: 480px) {


.mainImage .titleBox{width: 67%;}
.mainImage .titleBox .title{top: 15px;}
.mainImage .titleBox02{width: 85%;}
.mainImage .titleBox05{width: 20%;}


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

.intro{margin-top:25%;}
.intro h2{font-size:4.4vw;margin-bottom:14%;}

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

.scroll{height:110px;}
.scroll:before{height:110px;}
.scroll:after{height:110px;}

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

.lead .text{width: 80%;padding: 33% 0 27%;}
.lead .text h3,
.lead.delighter .text h3{font-size: 14px;letter-spacing: 0.1em;line-height: 2.1;}

.lead .deco .de01{width: 43%;right:0%;}
.lead .deco .de02{width: 38%;left: 2%;}
.lead .deco .de03{width: 25%;right: 12%;bottom: 3%;}

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

.topNavi{width: 94%;margin-top: 23%;}
.topNavi ul{width: 102%;}
.topNavi ul li{width: 48%;margin-right: 2%;}
.topNavi ul li:nth-child(1){margin-bottom: 2%;}
.topNavi ul li:nth-child(2){margin-bottom: 2%;}
.topNavi ul li a:after{border-width:5px;}
.topNavi ul li a span{right: 7px;bottom: 7px;width: 70%;}

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


.items{margin-top: 30%;}
.items h2{font-size:38px;}
.items .slider{margin-top:5%;padding-bottom: 50px;}
.items .itemSlide li.item{padding:0 10vw;}
.items h3 br{display: block;}

.items .more a{font-size:17px;}
.slick-dots li button {height:10px;width:10px;}


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

.shopList{width: 95%;margin-top: 30%;}
.shopList h2{font-size: 38px;margin-bottom: 30px;}
.shopList .listTrigger{ font-size: 15px;}

}