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



@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;&display=swap');


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

@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, sup, 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.4s;
	   -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	        transition: all 0.4s;
}
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{
	min-height:100%;
    height: 100%;
}
body{
	color:#FFF;
	font-weight:400;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
    line-height: 1.7;
    background: #BADBDB;
}

body.no-scroll{position:fixed;width:100%;top:0;left:0;height:100%;}

.clear:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}












/* --------------------- LOADING ------------------------ */
#loader-bg{
	display:block;
	position:fixed;
	width:100%;
	height:100vh;
	min-height:100vh;
	top:0px;
	left:0px;
	background:#BADBDB;
	z-index:10000;
	overflow:hidden;

}


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



/* standard */
.fadeIn,
.fadeIn.delighter{
    -webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	opacity:0;
    position: relative;
    top: 50px;
	-webkit-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);	
	   -moz-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* start */
.fadeIn.delighter.started{
    -webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	opacity:1;
    top: 0;
}
/* end */
.fadeIn.delighter.ended{
}


.cover{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 101%;
    background: #BADBDB;
    z-index: 100;
    -webkit-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);	
	   -moz-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition:all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cover.delighter.started{
    left: 100%;
    width: 1%;
}



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




.header{
    width: 100%;
    height: 100%;
    position: relative;
    font-family:'DINPro-Medium';
    line-height: 1.2;
}

.header .title{
    width: 85%;
    max-width: 1400px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}
.header .title .logo{
    width: 17%;
    position: relative;
    top: -15px;
    left: 15px;
    -webkit-transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);	
	   -moz-transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition:all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;
}
.header .title .logo.view{
    top:0px;
    left:0px;
    -webkit-opacity:1;
	   -moz-opacity:1;
	    -ms-opacity:1;
	        opacity:1;
}
.header .title h1{
    font-size:7.5vw;
    line-height: 1.1;
    margin-top: 4%;
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;

}
.header .title h1 span{
    position: relative;
    top: -20px;
    left: 20px;
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;
}

.header .title h2{
    font-size:4.8vw;
    line-height: 1.1;
    margin-top: 4%;
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;
}
.header .title h2 span{
    position: relative;
    top: -15px;
    left: 15px;
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;
}


@media (min-width: 1300px) {
.header .title .logo{width: 185px;}
.header .title h1{font-size:97px;margin-top:45px;}
.header .title h2{font-size:62px; margin-top:45px;}

}



/* youtube */
.youtubeBox{
	width:100%;
    max-width: 1600px;
	margin:10% auto 0;
	position:relative;
    overflow: hidden;
}
.youtubeBox .youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin:0 auto;
}
.youtubeBox .youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}



.lead{
    width: 90%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 200px 0 200px;
}
.lead h2{
    font-family:'DINPro-Medium';
    font-size: 66px;
    text-align: center;
}
.lead h2 br{display: none;}
.lead .copy{}

.lead .copy p{
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.0;
    margin-top: 1.2em;
}


.images{
    width: 90%;
    max-width: 1020px;
    margin: 0 auto;
    font-size: 0;
}
.images div{display: inline-block;position: relative;}
.images .img01{width:37.2%;margin-right:1%;}
.images .img02{width:61.8%;}
.images .img03{width:100%;margin:1% 0 10%;}
.images .img04{width:61.8%;margin-right:1%;}
.images .img05{width:37.2%;}
.images .img06{width:37.2%;margin-right:1%;margin-top:1%;}
.images .img07{width:61.8%;margin-top:1%;}




.campaign{
    width: 90%;
    max-width: 1020px;
    margin: 230px auto 0;
}
.campaign .imagePC{
    display: block;
    width: 48%;
    background: #FFF;
    padding: 0 5%;
    float: left;
}
.campaign .imageSP{display: none;}

.campaign .text{
    width: 48%;
    float: right;
}

.campaign .text h2{
    font-family:'DINPro-Medium';
    font-size: 38px;
    line-height: 1.2;
}
.campaign .text h3{
    font-family:'DINPro-Medium';
    font-size: 24px;
    line-height: 1.2;
}
.campaign .text p{
    font-size: 17px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin-top: 2.0em;
}
.campaign .text p a{
    color:  #FFF;
    text-decoration: underline;
    font-family:'DINPro-Medium';
    letter-spacing: 0;
}
.campaign .text p span{
    font-size: 13px;
    display: block;
}
.campaign .link{
    margin-top: 30px;
    text-align: center;
    width: 100%;
    font-size: 18px;
    background: #FFF;
    color: #87BCBC;
    padding: 5px 0;
}



.campaign .link a{
    display: inline-block;
    color:  #FFF;
    border: 1px solid #FFF;
    line-height: 1;
    padding: 9px 15px 10px;
    font-size: 18px;
}





.itemSet{
    width: 90%;
    max-width: 1020px;
    margin: 230px auto 0;
}
.itemSet .itemHeader{}
.itemSet .itemHeader h2{
    font-family:'DINPro-Medium';
    font-size: 62px;
    line-height: 1.2;
}
.itemSet .itemHeader p{
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.0;
    margin-top: 1.2em;
}

.itemSet .detail{
    margin-top: 100px;
}
.itemSet .detail h3{
    font-family:'DINPro-Medium';
    font-size: 35px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.itemSet .info{
    margin-top: 30px;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.itemSet .info p.dot{
    margin-top: 10px;
    text-indent: -1.3em;
    padding-left: 1.3em;
}

.itemSet .itemImageSet{
    margin-top: 100px;
}
.itemSet .itemImage{
    width: 48.0%;
}


.itemSet .itemImage.left{float:left;}
.itemSet .itemImage.right{float:right;}





.itemSet .itemImage .image{
    width: 100%;
    overflow: hidden;
}


/* standard */
.itemSet .itemImage .image span,
.itemSet .itemImage .image span .delighter{
    -webkit-transform:scale(1.4);
	   -moz-transform:scale(1.4);
	    -ms-transform:scale(1.4);
	        transform:scale(1.4);
    -webkit-opacity:0;
	   -moz-opacity:0;
	    -ms-opacity:0;
	        opacity:0;
    display: block;
	-webkit-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition: all 2.0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* start */
.itemSet .itemImage .image span.delighter.started{
    -webkit-transform:scale(1.0);
	   -moz-transform:scale(1.0);
	    -ms-transform:scale(1.0);
	        transform:scale(1.0);
    -webkit-opacity:1;
	   -moz-opacity:1;
	    -ms-opacity:1;
	        opacity:1;
}












.itemSet .itemImage h2{
    font-family:'DINPro-Medium';
    font-size: 35px;
    line-height: 1.2;
    margin:16px 0 0;
}
.itemSet .itemImage h4{
    font-family:'DINPro-Medium';
    font-size: 17px;
    line-height: 1.2;
    margin:16px 0;
}

.itemSet .itemImage .otherItems{
    font-family:'DINPro-Regular';
    font-size: 13px;
    line-height: 1.2;
}
.itemSet .itemImage .otherItems p{
    margin-top: 8px;
}
.itemSet .itemImage .otherItems p.gender{
    margin-bottom: 12px;
}


.itemSet .itemImage .buy{padding-left: 7px;}
.itemSet .itemImage .buy a{
    font-family:'DINPro-Bold';
    color: #FFF;
    padding-left: 10px;
    position: relative;
}
.itemSet .itemImage .buy a:before{
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:7px solid #FFF;
    -webkit-transition: all 0.4s;
	   -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	        transition: all 0.4s;
}
.itemSet .itemImage .otherItems .buy a{
    padding-left: 9px;
}
.itemSet .itemImage .otherItems .buy a:before{
    top: 4px;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:6px solid #FFF;
}






footer{
    padding: 250px 0 150px;
}

footer .footer_logo{
    width: 85px;
    margin: 0 auto;
}

footer ul{
    margin: 50px 0 70px;
    font-size: 0;
    text-align: center;
}
footer ul li{
    width: 40px;
    margin: 0 15px;
    display: inline-block;
}
footer .copyright{
    font-family:'DINPro-Regular';
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
}






@media (min-width: 769px) {
.campaign .text p a:hover{color:#5D9C9C;}
.campaign .link a:hover{background: #FFF;color:#5D9C9C;}
.itemSet .itemImage .buy a:hover{color:#5D9C9C;}
.itemSet .itemImage .buy a:hover:before{border-left-color:#5D9C9C;}
}



@media (max-width: 980px) {

.lead{padding: 150px 0 150px;}
.lead h2{font-size: 50px;}
.lead .copy p{font-size: 16px;}

.campaign{margin-top: 200px;}
.campaign .imagePC{padding: 3% 5%;}
.campaign .text h2{font-size: 34px;}
.campaign .text h3{font-size: 20px;}
.campaign .text p{font-size: 16px;margin-top: 1.5em;}
.campaign .link{margin-top: 30px;}
.campaign .link a{font-size: 16px;}

.itemSet{margin-top:200px;}
.itemSet .itemHeader h2{font-size:50px}
.itemSet .itemHeader p{font-size: 16px;}
.itemSet .detail{margin-top: 80px;}
.itemSet .detail h3{font-size: 30px;}
.itemSet .info{font-size: 17px;}
.itemSet .itemImage{width: 48.5%;}
.itemSet .itemImage h2{font-size: 32px;}
.itemSet .itemImage h4{font-size: 16px;}
/*
.itemSet .itemImage .otherItems p.cap{text-indent: -2.5em;padding-left: 2.5em;}
.itemSet .itemImage .otherItems p.pants{text-indent: -3.8em;padding-left: 3.8em;}
.itemSet .itemImage .otherItems p.acc{text-indent: -6.0em;padding-left: 6.0em;}
*/
footer{padding: 230px 0 120px;}

}



@media (max-width: 768px) {
.header .title .logo{ width: 20%;}
.header .title h1{font-size:8.0vw;margin-top:7%;}
.header .title h2{font-size:5.2vw;margin-top: 7%;}

.lead{padding: 20% 0 20%;}
.lead h2{text-align: left;line-height: 1.2;margin-bottom: 15%;}
.lead h2 br{display: block;}

.campaign{margin-top: 25%;}
.campaign .imagePC{display: none;}
.campaign .imageSP{width:45%;margin:0;display:block;padding:0% 5%;background:#FFF;}


.campaign .text{width: 100%;float: none; text-align: center;}
.campaign .text .title{width: 100%;position: relative;text-align: left;}
.campaign .text .title .inner{

    position: absolute;
    top: 50%;
    right: 0;
    width: 52%;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}
.campaign .text p{text-align: left;}
.campaign .link{text-align: center;}

.campaign .link{
    width:auto;
    font-size: 18px;
    padding: 6px 20px;
    display: inline-block;
    margin: 20px auto 0;
}



.itemSet{margin-top:25%;width: 80%;}
.itemSet .detail{margin-top: 10%;}
.itemSet .itemImageSet{margin-top: 10%;}

.itemSet .itemImage{width: 100%;}
.itemSet .itemImage.left{float:none;}
.itemSet .itemImage.right{float:none;margin-top: 20%;}
.itemSet .itemImage h2{margin-top:25px;}

footer{padding: 40% 0 12%;}
footer .footer_logo{width: 80px;}
footer ul{margin: 50px 0 70px;}
footer ul li{width: 35px;margin: 0 12px;}
footer .copyright{font-size: 14px;}


}


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

.campaign .text h2{font-size: 30px;line-height: 1.1;}
.campaign .text h3{font-size: 18px;margin-top: 10px;}
.itemSet{width: 90%;}
}




@media (max-width: 580px) {
.header .title{width: 90%;}
.header .title .logo{ width: 25%;}
.header .title h1{font-size:9.0vw;margin-top:10%;}
.header .title h2{font-size:6.0vw;margin-top:10%;}


.lead{padding: 23% 0 23%;}
.lead h2{margin-bottom: 18%;font-size: 40px;}
.lead .copy p{font-size:15px;line-height:1.9;margin-top: 1.5em;}


.campaign{margin-top: 28%;}
.campaign .imageSP{width:48%;}
.campaign .text .title .inner{width:48%;}
.campaign .text p{font-size:15px;margin-top:2.0em;}


.itemSet{margin-top:28%;}
.itemSet .itemHeader h2{font-size:42px}
.itemSet .itemHeader p{font-size: 15px;line-height:1.9;}

.itemSet .detail{margin-top: 15%;}
.itemSet .detail h3{font-size: 26px;margin-bottom:10px;}

.itemSet .info{font-size: 14px;margin-top:10px;}
.itemSet .info p.dot{text-indent:0;padding-left:0;}
.itemSet .info p.dot span{display: block;}


.itemSet .itemImageSet{margin-top: 20%;}
.itemSet .itemImage.right{margin-top: 20%;}
.itemSet .itemImage h2{font-size: 28px;}
.itemSet .itemImage .otherItems p.gender{margin-bottom: 8px;}

footer{padding: 50% 0 15%;}

}


@media (max-width: 440px) {

.header .title .logo{ width: 25%;}
.header .title h1{font-size:9.5vw;margin-top:10%;}
.header .title h2{font-size:6.5vw;margin-top:10%;}

.lead{padding: 25% 0 25%;}
.lead h2{margin-bottom: 20%;font-size: 36px;}
.lead .copy p{font-size:14px;}

.images{width: 94%;}
.images .img03{margin:1% 0 15%;}


.campaign{margin-top: 33%;width: 92%;}
.campaign .text h2{font-size: 25px;}
.campaign .text h3{font-size: 16px;}
.campaign .text p{font-size:14px;}
.campaign .link{font-size:14px;}


.itemSet{margin-top:33%;width: 92%;}
.itemSet .itemHeader h2{font-size:32px}
.itemSet .itemHeader p{font-size:14px;line-height:1.9;}
.itemSet .detail h3{font-size:22px;}
.itemSet .info{font-size: 13px;}

.itemSet .itemImageSet{margin-top: 24%;}
.itemSet .itemImage.right{margin-top: 24%;}

.itemSet .itemImage h2{font-size: 22px;}
.itemSet .itemImage h4{font-size: 14px;}

.itemSet .itemImage .buy{padding-left:3px;}
.itemSet .itemImage .buy a{padding-left:7px;}
.itemSet .itemImage .buy a:before{
    top:5px;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:6px solid #FFF;
}
.itemSet .itemImage .otherItems{font-size: 12px;}

.itemSet .itemImage .otherItems .buy a{padding-left: 7px;}
.itemSet .itemImage .otherItems .buy a:before{
    top: 5px;
    border-top:3px solid transparent;
    border-bottom:3px solid transparent;
    border-left:5px solid #FFF;
}


footer{padding: 60% 0 15%;}
footer .footer_logo{width: 60px;}
footer ul{margin: 40px 0 60px;}
footer ul li{width: 30px;margin: 0 10px;}
footer .copyright{font-size: 12px;}
}



@media (max-width: 360px) {
.lead .copy p{font-size:13px;}
.lead h2{margin-bottom: 20%;font-size: 32px;}

.campaign .text h2{font-size: 22px;}
.campaign .text h3{font-size: 14px;}
.campaign .text p{font-size:13px;}
.campaign .link a{font-size:13px;}

.itemSet .itemHeader h2{font-size:30px}
.itemSet .itemHeader p{font-size:13px;}
.itemSet .detail h3{font-size:20px;}

}







/*IE*/
@media all and (-ms-high-contrast: none) {

}