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




@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Medium 500
*/



@font-face {
	font-family:'DINPro-Regular';
	src:url('../../fonts/DINPro-Regular.eot');
	src:url('../../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Regular.woff2') format('woff2'),
	url('../../fonts/DINPro-Regular.woff') format('woff'),
	url('../../fonts/DINPro-Regular.ttf') format('truetype'),
	url('../../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}

@font-face {
	font-family:'DINPro-Medium';
	src:url('../../fonts/DINPro-Medium.eot');
	src:url('../../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Medium.woff2') format('woff2'),
	url('../../fonts/DINPro-Medium.woff') format('woff'),
	url('../../fonts/DINPro-Medium.ttf') format('truetype'),
	url('../../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}

@font-face {
	font-family:'DINPro-Bold';
	src:url('../../fonts/DINPro-Bold.eot');
	src:url('../../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Bold.woff2') format('woff2'),
	url('../../fonts/DINPro-Bold.woff') format('woff'),
	url('../../fonts/DINPro-Bold.ttf') format('truetype'),
	url('../../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}


/* ---------- RESET ---------- */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
a.nohover:hover {
  opacity: 1.0;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

html,body{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
	color:#000;
	font-weight:400;
	font-family: 'Zen Kaku Gothic New','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
    line-height: 1.7;
	background: #FFF;
}

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}





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







/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 50px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);	
	             transition:all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

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



#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100vh;
    top:0px;
    right:0px;
    background:#FFF;
    z-index:1000;
    overflow:hidden;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader-bg.close{
	width: 0;
}




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


header{
	width: 100%;
	height: 100%;
	position: relative;
	background: #B5B5B6;
	overflow:hidden;
}

header .headerIn{
	width: 100%;
	background: #B5B5B6;
	position: absolute;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

header .mainImage{
	width: 75%;
	overflow: hidden;
}
header .mainImage img{
	display: block;
	opacity: 0;
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	-webkit-transition: all 1.4s;
	transition: all 1.4s;
}
header.start .mainImage img{
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}

header .title{
	position: absolute;
	width: 25%;
	right: 0;
	top: 0;
	bottom: 0;
}

header .title h1{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 70%;
	background: #000;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

header .title h1 span{
	position: absolute;
	display: block;
	top: 20px;
	left: 0;
	opacity: 0;
	width: 100%;
	z-index: 10;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
	transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.2s;
}
header.start .title h1 span{top: 0;opacity: 1;}

header .title h1 span.t01{
	-webkit-transition-delay:0.8s;
	transition-delay:0.8s;
}
header .title h1 span.t02{
	-webkit-transition-delay:1.2s;
	transition-delay:1.2s;
}
header .title h1 span.t03{
	-webkit-transition-delay:1.6s;
	transition-delay:1.6s;
}
header .title h1 span.t04{
	-webkit-transition-delay:2.0s;
	transition-delay:2.0s;
}
header .title h1 .sp{display: none;}


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




.lead{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: url("../images/lead_bk.jpg") center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.lead .leadInner,
.lead .leadInner.delighter{
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
	width: 80%;
	max-width: 800px;
	z-index: 10;
	margin: 0 auto;
	color: #FFF;
	opacity: 0;
	text-align: center;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition:all 2.4s cubic-bezier(0.215, 0.61, 0.355, 1);	
transition:all 2.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lead .leadInner.delighter.started{opacity:1;top: 50%;}




.lead .cover{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: #B5B5B6;
	display: none;
}

.lead h2{
	font-weight: 500;
	font-size: 28px;
	letter-spacing: 0.08em;
}
.lead p{
	font-size: 17px;
	letter-spacing: 0.08em;
	line-height: 2.2;
	margin-top: 1.5em;
}


.movBox{
	width: 100%;
	margin-top: -10vw;
	position: relative;
	z-index: 5;
}
.movBox video{
	width: 100%;
}


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

article{
	width: 100%;
	position: relative;
}

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

.category{
	width: 100%;
	position: relative;
	z-index: 5;
	background: #FFF;
	padding-bottom: 1%;
}

.category .header{
	width: 85%;
	max-width: 980px;
	margin: 0 auto;
	padding: 200px 0 120px;
}
.category .header .categoryTitle{
	width: 100%;
	position: relative;
}
.category .header .categoryTitle .illust,
.category .header.delighter .categoryTitle .illust{
	width: 48%;
	margin-left: 52%;
	position: relative;
}

.category .header .categoryTitle .subTitle{
	position: absolute;
	left: 0;
	top: 50%;
	width: 40%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}


.category .subTitle .cover01,
.category .subTitle.delighter .cover01{
	position: absolute;
	top: 0;
	bottom: 50%;
	z-index: 10;
	background:#FFF;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.category .subTitle .cover02,
.category .subTitle.delighter .cover02{
	position: absolute;
	top: 50%;
	bottom: 0;
	z-index: 10;
	background:#FFF;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.3s;
	transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.3s;
}


.category.sup .subTitle .cover01,
.category.sup .subTitle.delighter .cover01{right: 25%;width: 75%;}
.category.sup .subTitle .cover02,
.category.sup .subTitle.delighter .cover02{right: 52%;width: 48%;}

.category.bonfire .subTitle .cover01,
.category.bonfire .subTitle.delighter .cover01{right: 25%;width: 75%;}
.category.bonfire .subTitle .cover02,
.category.bonfire .subTitle.delighter .cover02{right: 32%;width: 68%;}

.category.coffee .subTitle .cover01,
.category.coffee .subTitle.delighter .cover01{right: 25%;width: 75%;}
.category.coffee .subTitle .cover02,
.category.coffee .subTitle.delighter .cover02{right: 0%;width: 100%;}


.category .subTitle.delighter.started .cover01,
.category .subTitle.delighter.started .cover02{width: 0;}



.category .header .categoyLead,
.category .header.delighter .categoyLead{
	width: 100%;
	font-size: 17px;
	letter-spacing: 0.05em;
	line-height: 2.1;
	margin: 50px auto 0;
	position: relative;
}



.category .itemList{
	width: 95%;
	max-width: 1800px;
	margin: 0 auto;
}
.category .itemList ul{
	width: 102%;
	font-size: 0;
	text-align: left;
}
.category .itemList ul li,
.category .itemList ul li.delighter{
	width: 31.33333%;
	margin-right: 2%;
	margin-bottom: 2%;
	display: inline-block;
	position: relative;
	opacity: 0;
	top: 30px;
	-webkit-transition:top 1.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.5s;
	             transition:top 1.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.5s;
}
.category .itemList ul li.delighter.started{top: 0;opacity: 1;}


.category .itemList ul li:before,
.category .itemList ul li.delighter:before{
	content: '';
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: #ececec;
	-webkit-transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0.8s;
	transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0.8s;
}
.category .itemList ul li.delighter.started:before{width: 0;}



.category .itemList .listIn{
	display: block;
	width: 100%;
	position: relative;
	background: #CCC;
}



.category .itemList .listIn .spec{
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.category .itemList .listIn .spec .bk{
	position: absolute;
	z-index: 10;
	background: rgba(0,0,0,0.5);
	top: 60%;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	-webkit-transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.category .itemList .listIn:hover .spec .bk{top: 0%;opacity: 1;}


.category .itemList .listIn .spec .specIn{
	position: absolute;
	left: 5%;
	bottom: 9%;
	width: 90%;
	z-index: 15;
	opacity: 0;
	-webkit-transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.category .itemList .listIn:hover .spec .specIn{opacity: 1;bottom: 5%;}




.category .itemList .listIn .spec .specIn p{
	font-family:'DINPro-Regular';
	font-size: 14px;
	color: #FFF;
	line-height: 1.2;
	margin-top: 0.7em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}
.category .itemList .listIn .spec .specIn p:last-child{border: none;padding-bottom: 0em;}
.category .itemList .listIn .spec .specIn p a{color: #FFF;display: inline-block;}
.category .itemList .listIn .spec .specIn p .type{display: block;}

.category .itemList .listIn .spec .specIn p .buy{
	display: inline-block;
	margin-left: 0.5em;
	font-family:'DINPro-Medium';
	background: #FFF;
	color: #333;
	padding: 0 0.3em;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.category .itemList .listIn .spec .specIn p a:hover .buy{background: #000;color: #FFF;}


.category .itemList .listIn .spec .specIn p .soon{
	display: inline-block;
	margin-left: 0.5em;
	font-family:'DINPro-Regular';
	color: #FFF;
	font-size: 12px;
	border: 1px solid #FFF;
	padding: 0 0.3em;
}


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


.full_image{
	width: 100%;
	height: 50vw;
	background-position:  center center;
	background-size: cover;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.full_image .cover,
.full_image.delighter .cover{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #FFF;
	z-index: 2;
	-webkit-transition: top 1.8s cubic-bezier(0.76, 0, 0.24, 1);
	transition: top 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.full_image.delighter.started .cover{top: 100%;}

.full_image.img01{z-index: 1;background-image: url("../images/fullimage01_pc.jpg");}
.full_image.img02{z-index: 2;background-image: url("../images/fullimage02_pc.jpg");}
.full_image.img03{z-index: 3;background-image: url("../images/fullimage03_pc.jpg");}



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


footer{
	width: 100%;
	text-align: center;
	padding: 160px 0 120px;
}
footer h3{
	width: 140px;
	margin: 0 auto;
}
footer p{
	font-family:'DINPro-Regular';
	font-size: 13px;
	margin-top: 20px;
	color: #A6A7A7;
}










@media(max-width:1180px) {

.lead h2{font-size: 27px;}
.lead p{font-size: 16px;}


.category .header .categoyLead,
.category .header.delighter .categoyLead{font-size: 16px;}

.category .itemList .listIn .spec .specIn p{font-size: 12px;}
.category .itemList .listIn .spec .specIn p .soon{font-size: 11px;}


}







@media(max-width: 980px) {


.lead h2{font-size: 25px;}
.lead p{font-size: 15px;}


.category .header{padding: 150px 0 100px;}

.category .header .categoyLead,
.category .header.delighter .categoyLead{font-size: 15px;}

.category .itemList .listIn .spec .specIn p{
	margin-top: 0.5em;
	padding-bottom: 0.5em;
}
.category .itemList .listIn .spec .specIn p .buy{
	margin-left: 0;
	margin-top: 2px;
	display: block;
	width: 3em;
	text-align: center;
	padding: 1px 0 0 0;
}
.category .itemList .listIn .spec .specIn p .soon{
	margin-left: 0;
	margin-top: 2px;
	font-size: 11px;
	padding: 0;
	display: block;
	text-align: center;
	width: 7em;
}


footer{padding: 140px 0 100px;}
footer h3{width: 130px;}

}



@media(max-width: 768px) {
.wide{display: none;}


header .headerIn{
	width: 100%;
	height: 100%;
	position:relative;
	top: 0%;
	-webkit-transform:none;
	transform:none;
}
header .mainImage{
	width: 100%;
	height: 70%;
	background: url("../images/mainimage_pc.jpg") center center no-repeat;
	background-size: cover;
}
header .mainImage img{display: none;}



header .title h1 .pc{display: none;}
header .title h1 .sp{display: block;}

header .title{
	position: absolute;
	width: 100%;
	right: 0;
	left: 0;
	top: 70%;
	bottom: 0;
}
header .title h1{
	position: absolute;
	top: 50%;
	width: 28%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}


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


.lead{background-image: url("../images/lead_bk_sp.jpg");height: 80%;}


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

.category .header{width: 85%;padding: 15% 0 10%;}

.category .header .categoryTitle .illust,
.category .header.delighter .categoryTitle .illust{
	width: 52%;
	margin: 0 auto;
}
.category .header .categoryTitle .subTitle{
	position:relative;
	top: 0;
	width: 47%;
	margin: 8% auto 0;
	-webkit-transform:none;
	transform:none;
}



.category.sup .subTitle .cover01,
.category.sup .subTitle.delighter .cover01{right: 12%;width: 75%;}
.category.sup .subTitle .cover02,
.category.sup .subTitle.delighter .cover02{right: 26%;width: 48%;}

.category.bonfire .subTitle .cover01,
.category.bonfire .subTitle.delighter .cover01{right: 12%;width: 75%;}
.category.bonfire .subTitle .cover02,
.category.bonfire .subTitle.delighter .cover02{right: 16%;width: 68%;}

.category.coffee .subTitle .cover01,
.category.coffee .subTitle.delighter .cover01{right: 12%;width: 75%;}
.category.coffee .subTitle .cover02,
.category.coffee .subTitle.delighter .cover02{right: 0%;width: 100%;}

.category .subTitle.delighter.started .cover01,
.category .subTitle.delighter.started .cover02{width:0;}


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

.category .itemList{width: 90%;}
.category .itemList ul{width: 105%;}
.category .itemList ul li,
.category .itemList ul li.delighter{width: 45%;margin-right: 5%;margin-bottom: 5%;}

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

.full_image{width: 100%;height: 90vw;}
.full_image.img01{background-image: url("../images/fullimage01_sp.jpg");}
.full_image.img02{background-image: url("../images/fullimage02_sp.jpg");}
.full_image.img03{background-image: url("../images/fullimage03_sp.jpg");}



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

footer{padding: 18% 0 15%;}
footer h3{width: 120px;}
footer p{font-size: 12px;}

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


.slick-prev,
.slick-next {margin-top:-3vw;width: 6vw;height: 6vw;}
.slick-prev{left:1.5vw;}
.slick-next{right:1.5vw;}



}


@media(max-width: 600px) {

.wide02{display: none;}

header .mainImage{background-image: url("../images/mainimage_sp.jpg");height: 75%;}
header .title{top: 75%;}
header .title h1{width: 20vh;}

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

.lead h2{font-size: 23px;}
.lead p{font-size: 15px;text-align: left;line-height: 2.4;}
.lead p br{display: none;}
.lead p br.fix{display: block;}

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

.category .header{padding: 20% 0 10%;}

.category .header .categoryTitle .illust,
.category .header.delighter .categoryTitle .illust{width: 65%;}
.category .header .categoryTitle .subTitle{width: 60%;margin-top: 8%;}

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

.category .itemList{width: 80%;}
.category .itemList ul{width: 100%;}
.category .itemList ul li,
.category .itemList ul li.delighter{width: 100%;margin-right: 0%;margin-bottom: 8%;}

}







@media(max-width: 470px) {

header .title h1{width: 21vh;}


.lead{background-image: url("../images/lead_bk_sp02.jpg");}

.lead{height: 75%;}
.lead h2{font-size: 22px;}
.lead p{font-size: 14px;line-height: 2.2;}

.category .header .categoryTitle .illust,
.category .header.delighter .categoryTitle .illust{width: 75%;}
.category .header .categoryTitle .subTitle{width: 73%;margin-top: 8%;}

.category .header .categoyLead,
.category .header.delighter .categoyLead{font-size: 14px;}

.full_image{height: 120vw;}


footer{padding: 20% 0 18%;}
footer h3{width: 105px;}

}




@media(max-width: 391px) {

.lead{height: 160vw;}
.lead h2{font-size: 21px;}
.lead p{font-size: 14px;line-height: 2.2;}

.category .header{;padding: 25% 0 10%;}
.category .header .categoryTitle .illust,
.category .header.delighter .categoryTitle .illust{width: 80%;}
.category .header .categoryTitle .subTitle{width: 76%;margin-top: 10%;}

.full_image{height: 125vw;}

footer{padding: 24% 0 22%;}
footer h3{width: 100px;}
}




@media(max-width: 350px) {

.lead h2{font-size: 19px;}
.lead p{font-size: 13px;line-height: 2.1;}


.category .header .categoyLead,
.category .header.delighter .categoyLead{font-size: 13px;}
}