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

/*
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
/*
font-family: 'Zen Old Mincho', serif;
Regular 400
*/

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



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




/* ---------- 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;
}


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:#FFF;
	font-family: 'Roboto' , '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;
	font-weight: 400;
    line-height: 1.7;
	background: #0F0F0F;
}


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



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


/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 40px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition:top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	             transition:top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

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


#loader-bg{
    display:block;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:1000;
	background: #0F0F0F;
}


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


/* マスクで現れる */
.imageMask{
	width:100%;
	box-sizing:border-box;
	z-index:5;
	position: relative;
}
header .imageMask{position: absolute;top: 0;bottom: 0;left: 0;}

.thisImage{}
.thisImage .thisImage-motion{
	width:100%;
	height:110%;
	position:absolute;
	z-index:100;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
	             transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
}
header .thisImage .thisImage-motion{background-color:#182545;}
.gear .thisImage .thisImage-motion{background-color:#D2D2D2;}
.areaBottom .thisImage .thisImage-motion{background-color:#182545;}


.thisImage .imageBox {
	/*visibility: hidden;*/
	opacity: 0;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.thisImage.mask-image .thisImage-motion { width: 0;left: 0;}
.thisImage.mask-image .imageBox { /*visibility: hidden;*/opacity: 0; }
.thisImage.show-image .thisImage-motion {
	width: 0;
	right: -1px;
	left:inherit;
	/*opacity:1;*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.thisImage.show-image .imageBox {/*visibility:visible;*/
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}


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



.bkStripe{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100vh;
	top: 0;
	background: url("../images/bk_stripe.png") top center repeat;
	background-size: 493px;
}


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



header{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 10;
}
.headerIn{
	position: absolute;
	z-index: 20;
	top:2.5vw;
	bottom: 2.5vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 92%;
	/*background: rgba(255,255,255,0.1);*/
}

.headerIn h1{
	position: absolute;
	top: 0;
	left: 0;
	width: 26.5%;
}
.headerIn h2{
	position: absolute;
	top: 50%;
	left: 0;
	width: 26.5%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.headerIn h3{
	position: absolute;
	top: 0;
	right: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.05em;
	transform-origin: right top;
	-webkit-transform:translateY(10em) rotate(90deg);
	transform:translateY(10em) rotate(90deg);
}
.headerIn h4{
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.05em;
	transform-origin: right top;
	-webkit-transform:translateY(1em) rotate(90deg);
	transform:translateY(1em) rotate(90deg);
}
.headerIn .logo{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 8.5%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}


header .mainImage{
	position: absolute;
	z-index: 10;
	top: 4.8vw;
	bottom: 4.8vw;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 80%;
	overflow: hidden;
}
header .mainImage .imageBox{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url("../images/main_pc.jpg") center center no-repeat;
	background-size: cover;
}


.scrolldown{
	position:absolute;
	left: 4%;
	bottom: 0;
	height: 100px;
	width: 2px;
	overflow: hidden;
	z-index: 10;
	display: none;
}
/*
.scrolldown::before{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 100px;
	z-index: 1;
	background: rgba(255,255,255,0.2);
}
*/
.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 60px;
	background: #FFF;
	z-index: 2;
	animation: pathmove 2.0s ease-in-out infinite;
	opacity:0;
}
@keyframes pathmove{
	0%{height:0;top:0;opacity: 0;}
	30%{height:70px;opacity: 1;}
	100%{height:0;top:110px;opacity: 0;}
}


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





.areaTop{
	position: relative;
	z-index: 10;
	text-align: center;
	width: 100%;
	padding: 13vw 0;
}

.lead{
	margin: 0 auto;
	position: relative;
	z-index: 15;
	text-align: left;
	display: inline-block;
}
.lead h2{
	width: 420px;
	position: relative;
}




.lead h2 span,
.lead.delighter h2 span{
	width: 100%;
	opacity:0;
	-webkit-transition:opacity 2.0s;	
	transition:opacity 2.0s;
}
.lead.delighter.started h2 span{
	opacity:1;
}
.lead h2 span:nth-child(2){
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.lead h2 span:nth-child(3){
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}




.lead .copy,
.lead.delighter .copy{
	letter-spacing: 0.05em;
	font-size: 18px;
	line-height: 2.2;
	margin-top: 70px;
	opacity:0;
	-webkit-transition:opacity 2.0s 1.0s;
	transition:opacity 2.0s 1.0s;
}
.lead.delighter.started .copy{
	opacity:1;
}
.lead .copy p:first-child{margin-bottom: 2.5em;}



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

.movie{
	width: 100%;
	position: relative;
	z-index: 40;
}

.videoBox{
    width:100%;
    overflow:hidden;
    position:relative;
	line-height: 1;
	font-size: 0;
}
.videoBox video{
	width: 100%;
}



.movieImage{
	width: 100%;
	position: relative;
	z-index: 40;
}
.movieImage span{
	width: 100%;
	padding-top: 50%;
	display: block;
	background: url("../images/movie_image_pc.jpg") center center no-repeat;
	background-size: cover;
}



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


.areaMiddle{
	position: relative;
	width: 100%;
	background: #6F6F6F;
}

.changeColor{
	position:absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 15;
	mix-blend-mode:screen;
}
.changeColor .bkGray{
	position:absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 20;
	background: #CDCDCD;
}

.gear{
	position: relative;
	z-index: 50;
	background: rgba(230,230,230,0.7);
	color: #182545;
	padding: 10% 0 14%;
}

.gear .inner{
	width: 80%;
	/*max-width: 940px;*/ /*x1.2*/
	max-width: 1120px;
	margin: 0 auto;
}
.gear h2{
	width: 370px;
	margin: 0 auto;
}
.gear h3{
	width:105px;
	margin: 7vw auto;
}


.gear .gearImage{
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-top: 7.5vw;
}
.gear .gearImage .imageBox{
	width: 100%;
	padding-top: 57%;
	background: url("../images/gear_img01.jpg") center center no-repeat;
	background-size: cover;
}


.gear .itemSet{
	width: 100%;
}

.gear .itemSet .item{width: 47%;position: relative;}
.gear .itemSet .item.t01{float: left;}
.gear .itemSet .item.t02{float: right;}

.gear .itemSet .itemImage{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.gear .itemSet .t01 .imageBox{
	width: 100%;
	padding-top: 135%;
	background: url("../images/item_jacket.jpg") center center no-repeat;
	background-size: cover;
}
.gear .itemSet .t02 .imageBox{
	width: 100%;
	padding-top: 135%;
	background: url("../images/item_trousers.jpg") center center no-repeat;
	background-size: cover;
}



.gear .itemInfo{
	margin-top: 30px;
	padding-bottom: 5%;
	border-bottom: 1px solid #182545;
}

.gear .itemInfo .name{
	width: 100%;
	position: relative;
}
.gear .itemInfo .name h4{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 22px;
	letter-spacing: 0.025em;
	line-height: 1.3;
	padding-bottom: 15px;
}
.gear .itemInfo .name h4 br{display: none;}

.gear .itemInfo .name .online{
	position: absolute;
	top: 0;
	right: 0;
	width: 160px;
}
.gear .itemInfo .name .online a{
	font-family: 'Roboto', sans-serif;
	background: #182545;
	color: #FFF;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.025em;
	line-height: 1;
	width: 100%;
	padding: 13px 0;
	display: block;
	text-align: center;
	-webkit-transition:background 0.4s;	
	transition:background 0.4s;
}
@media(min-width:769px) {
.gear .itemInfo .name .online a:hover{background: #7C8698;}
}





.gear .itemInfo .spec{
	width: 100%;
	line-height: 1.2;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
}

.gear .itemInfo .spec dl{
	width: 100%;
}
.gear .itemInfo .spec dt{
	width: 3.5em;
	display: inline-block;
	vertical-align: top;
	padding: 2px 0;
}
.gear .itemInfo .spec dd{
	width: calc(100% - 4em);
	display: inline-block;
	font-weight: 500;
	vertical-align: top;
	padding: 2px 0;
}
.gear .itemInfo .spec dd span{
	font-weight: 400;
	font-size: 10px;
}





.gear .itemInfo .variation{
	width: 100%;
	margin-top: 30px;
	font-size: 0;
}
.gear .itemInfo .variation ul{
	width: 102%;
}
.gear .itemInfo .variation ul li{
	width: 14.6666%;
	margin-right: 2%;
	margin-bottom: 2%;
	display: inline-block;
}
.gear .itemInfo .variation ul li a{
	background: #FFF;
	display: block;
}
.gear .itemInfo .variation ul li a img{
	-webkit-transition:opacity 0.4s;	
	transition:opacity 0.4s;
}


@media(min-width:769px) {
.gear .itemInfo .variation ul li a:hover img{opacity: 0.5;}
}




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




.areaBottom{
	position: relative;
	width: 100%;
	z-index: 100;
}



.column01{
	width: 85%;
	/*max-width: 1120px;*//*x1.2*/
	max-width: 1320px;
	margin: 0 auto;
	padding: 10vw 0;
}


.column01 .cLeft{
	width: 36%;
	float: left;
}
.column01 .cLeft h2{
	width: 260px;
}

.column01 .cLeft .copy{
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 2.1;
	margin-top: 17vw;
}
.column01 .cLeft .copy p{
	margin-top: 2.2em;
}

.column01 .cLeft .copy.spOnly{display: none;}

.column01 .cLeft .imageSub{
	width: 100%;
	margin-top: 95px;
	position: relative;
	overflow: hidden;
}
.column01 .cLeft .imageSub .imageBox{
	width: 100%;
	padding-top: 65%;
	background: url("../images/column01_sub.jpg") center center no-repeat;
	background-size: cover;
}

.column01 .cLeft .spMainImage{display: none;}



.column01 .cRight{
	width: 55.5%;
	float: right;
}
.column01 .cRight .imageMain{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.column01 .cRight .imageMain .imageBox{
	width: 100%;
	padding-top: 145%;
	background: url("../images/column01_main.jpg") center center no-repeat;
	background-size: cover;
}






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

.paraImage{
	width: 100%;
	height: 58vw;
	overflow: hidden;
	position: relative;
}

.paraImage .paraBox{
	width: 100%;
	height: 58vw;
	overflow: hidden;
	position: relative;
	top: -8vw;
}
.paraImage .paraBox .thumbnail {
	width: 100%;
}
/*----------------------------*/


.column02{
	width: 85%;
	/*max-width: 1120px;*//*x1.2*/
	max-width: 1320px;
	margin: 0 auto;
	padding: 2vw 0 10vw;
}
.column02 .cLeft{
	width: 55.5%;
	float: left;
}
.column02 .cLeft .imageMain{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.column02 .cLeft .imageMain .imageBox{
	width: 100%;
	padding-top: 66%;
	background: url("../images/column02_main.jpg") center center no-repeat;
	background-size: cover;
}



.column02 .cRight{
	width: 36%;
	float: right;
}
.column02 .cRight .copy{
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 2.1;
	margin-top: 14vw;
}
.column02 .cRight .copy p{
	margin-top: 2.2em;
}




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

.youtubeArea{
	width: 85%;
	/*max-width: 1120px;*//*x1.2*/
	max-width: 1320px;
	margin: 0 auto;
	position: relative;
}
.youtubeArea .videoBox{
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-size: 0;
}
.youtubeArea .youtube{
	position:relative;
	z-index: 10;
	width:100%;
	padding-top:56.25%;
}
.youtubeArea .player{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.youtubeArea .youtube iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}
.youtubeArea .thumb{
	position:absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index:5;
    cursor: pointer;
	display: block;
	overflow: hidden;
}		
.youtubeArea .thumb .playBT{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
	bottom: 0;
    z-index: 10;
    line-height: 1;
    text-align: center;
}
.youtubeArea .thumb .playBT .play{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
    width: 84px;
    margin: -42px auto 0;
}



.endText{
	width: 100%;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	margin: 14vw 0 60px;
}
.endText span{
	padding: 0 1.5em;
}




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


footer{
	width: 100%;
	height: 100%;
	z-index: 300;
	position: relative;
	background: url("../images/footer_pc.jpg") center center repeat;
	background-size: cover;
}

footer .logo{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 120px;
	z-index: 10;
}



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







@media(max-width:1250px) {


.areaTop{padding: 15vw 0;}
.lead h2{width: 390px;}
.lead .copy,
.lead.delighter .copy{font-size: 16px;margin-top: 60px;}

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

.gear{padding: 12% 0 16%;}
.gear h2{width: 350px;}
.gear h3{margin: 8vw auto;}

.gear .gearImage{margin-top: 9vw;}
.gear .itemInfo .name h4{font-size: 21px;}
.gear .itemInfo .name .online{width: 150px;}

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

.column01{padding: 13vw 0;}
.column01 .cLeft{width: 38%;}
.column01 .cLeft h2{width: 250px;}
.column01 .cLeft .copy{font-size: 16px;margin-top: 17vw;}
.column01 .cLeft .copy p{margin-top: 2.0em;}
.column01 .cLeft .imageSub{margin-top: 80px;}

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

.column02{padding: 5vw 0 13vw;}
.column02 .cRight{width: 38%;}
.column02 .cRight .copy{font-size: 16px;}
.column02 .cRight .copy p{margin-top: 2.0em;}

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

.endText{margin: 16vw 0 60px;}

}



@media(max-width:980px) {

.headerIn{width: 94%;}
.headerIn h3{font-size: 9px;}
.headerIn h4{font-size: 9px;}
.headerIn .logo{width: 9%;}
header .mainImage{width: 82%;}
.scrolldown{height: 70px;}


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

.areaTop{padding: 17vw 0;}
.lead h2{width: 360px;}
.lead .copy,
.lead.delighter .copy{font-size: 15px;margin-top: 50px;}

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

.gear{padding: 14% 0 17%;}
.gear h2{width: 330px;}
.gear h3{width:95px;margin: 10vw auto;}

.gear .gearImage{margin-top: 11vw;}

.gear .itemInfo{padding-bottom: 8%;}
.gear .itemInfo .name h4{line-height: 1.2;}
.gear .itemInfo .name h4 br{display: block;}
.gear .itemInfo .name .online a{font-size: 13px;}

.gear .itemInfo .variation{margin-top: 25px;}
.gear .itemInfo .variation ul li{width: 18%;}

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

.column01{padding: 14vw 0;width: 90%;}
.column01 .cLeft{width: 40%;}
.column01 .cLeft h2{width: 220px;}
.column01 .cLeft .copy{font-size: 15px;margin-top: 16vw;}
.column01 .cLeft .imageSub{margin-top: 70px;}

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

.column02{padding: 6vw 0 14vw;width: 90%;}
.column02 .cRight{width: 40%;}
.column02 .cRight .copy{font-size: 15px;}

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

.youtubeArea{width: 90%;}
.youtubeArea .thumb .playBT .play{width: 76px;margin-top: -38px;}

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

.endText{margin: 18vw 0 60px;font-size: 11px;}

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

footer .logo{width: 105px;}


}
















@media(max-width:768px) {


.wide{display: none;}

.headerIn{
	top:5vw;
	bottom: 5vw;
	width: 90%;
}
.headerIn h1{width: 50%;}
.headerIn h2{
	top: auto;
	bottom: 11vw;
	width: 50%;
	-webkit-transform:none;
	transform:none;
}

.headerIn h3{
	font-size: 10px;
	-webkit-transform:translateY(10em) rotate(90deg);
	transform:translateY(10em) rotate(90deg);
}
.headerIn h4{
	font-size: 10px;
	-webkit-transform:translateY(1em) rotate(90deg);
	transform:translateY(1em) rotate(90deg);
}
.headerIn .logo{width: 20%;}


header .mainImage{
	top: 10vw;
	bottom: 10vw;
	width: 76%;
}
header .mainImage .imageBox{background-image: url("../images/main_sp.jpg");}

.scrolldown{left: 5%;height: 10vw;}
.scrolldown::after{height: 60vw;}
@keyframes pathmove{
	0%{height:0;top:0;opacity: 0;}
	30%{height:7vw;opacity: 1;}
	100%{height:0;top:11vw;opacity: 0;}
}





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

.areaTop{padding: 30vw 0;}

.lead{width: 75%;display: block;}
.lead h2{width: 280px;}
.lead .copy,
.lead.delighter .copy{
	font-size: 18px;
	line-height: 2.2;
	margin-top: 80px;
}
.lead .copy p:first-child{margin-bottom: 2.5em;}

.lead .copy p br.res{display: none;}

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

.movieImage span{padding-top: 90%;}

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

.gear{padding: 25% 0 23vw;}
.gear .inner{width: 75%;}
.gear h2{width: 310px;margin: 0 auto;}
.gear h3{width:150px;margin: 16vw auto;}

.gear .gearImage{margin-top: 16vw;}
.gear .gearImage .imageBox{
	padding-top: 78%;
	background-image: url("../images/gear_img01sp.jpg");
}

.gear .itemSet .item{width: 100%;}
.gear .itemSet .item.t01{float: none;}
.gear .itemSet .item.t02{float: none;margin-top: 17vw;}


.gear .itemInfo{padding-bottom: 30px;}
.gear .itemInfo .name h4{font-size: 24px;padding-bottom: 20px;}
.gear .itemInfo .name h4 br{display: none;}

.gear .itemInfo .name .online{width: 160px;}
.gear .itemInfo .name .online a{font-size: 14px;}

.gear .itemInfo .variation{margin-top: 30px;}
.gear .itemInfo .variation ul li{width: 14.6666%;}
.gear .itemInfo .variation ul li.res{display: none;}


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

.column01{width: 75%;padding: 23vw 0 2vw;}

.column01 .cLeft{width: 100%;float: none;}
.column01 .cLeft h2{width: 320px;}
.column01 .cLeft .copy{
	font-size: 18px;
	line-height: 2.0;
	margin: 15vw 0;
}
.column01 .cLeft .copy p{margin-top: 2.0em;}
.column01 .cLeft .copy p.res{display: none;}

.column01 .cLeft .copy.spOnly{display: block;}

.column01 .cLeft .spMainImage{
	width: 100%;
	position: relative;
	overflow: hidden;
	display: block;
	margin-top: 23vw;
}
.column01 .cLeft .spMainImage .imageBox{
	width: 100%;
	padding-top: 145%;
	background: url("../images/column01_main.jpg") center center no-repeat;
	background-size: cover;
}

.column01 .cRight{display: none;}

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

.paraImage{height: 100vw;}
.paraImage .paraBox{height: 100vw;top: 0;}

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

.column02{width: 75%;padding: 12vw 0 16vw;}
.column02 .cLeft{display: none;}

.column02 .cRight{width: 100%;float: none;}
.column02 .cRight .copy{
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 2.0;
	margin-top: 0;
}
.column02 .cRight .copy p{margin-top: 2.0em;}

.column02 .cRight .spMainImage{
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 15vw 0 13vw;
}
.column02 .cRight .spMainImage .imageBox{
	width: 100%;
	padding-top: 66%;
	background: url("../images/column02_main.jpg") center center no-repeat;
	background-size: cover;
}

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

.youtubeArea{width: 100%;}
.youtubeArea .thumb .playBT .play{width: 14vw;margin-top: -7vw;}

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

.endText{font-size: 12px;margin: 26vw 0 50px;line-height: 2.2;}
.endText i{display: block;}
.endText span{padding: 0 1.5em 0 0;}

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

footer{	background-image: url("../images/footer_sp.jpg");}
footer .logo{width: 120px;}


}






@media(max-width:620px) {


.headerIn h1{width: 58.5%;}
.headerIn h2{bottom: 12vw;width: 58.5%;}
.headerIn .logo{width: 24%;}

header .mainImage{width: 75%;}

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

.areaTop{padding: 35vw 0;}
.lead{width: 78%;}
.lead h2{width: 230px;}
.lead .copy,
.lead.delighter .copy{font-size: 17px;margin-top: 70px;}

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

.gear{padding: 28vw 0 28vw;}
.gear .inner{width: 78%;}

.gear h2{width: 270px;}
.gear h3{width:140px;margin: 20vw auto;}

.gear .gearImage{margin-top: 19vw;}

.gear .itemSet .item.t02{margin-top: 20vw;}

.gear .itemInfo{padding-bottom: 25px;}
.gear .itemInfo .name h4{font-size: 22px;padding-bottom: 20px;}

.gear .itemInfo .variation{margin-top: 25px;}
.gear .itemInfo .variation ul li{width: 18%;}

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

.movieImage span{padding-top: 95vh;background-image: url("../images/movie_image_sp.jpg");}



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


.column01{width: 78%;padding: 28vw 0 2vw;}
.column01 .cLeft h2{width: 280px;}
.column01 .cLeft .copy{font-size: 17px;margin: 20vw 0;}
.column01 .cLeft .spMainImage{margin-top: 28vw;}
.column01 .cLeft .imageSub{margin-top: 0;}

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

.column02{width: 78%;padding: 20vw 0 20vw;}
.column02 .cRight .copy.fade{top: 0;opacity: 1;}
.column02 .cRight .copy{font-size: 17px;}
.column02 .cRight .copy p{margin-top: 0em;}
.column02 .cRight .copy p:nth-child(2){margin-top: 2em;}
.column02 .cRight .spMainImage{margin: 20vw 0;}

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

.youtubeArea .thumb .playBT .play{width: 18vw;margin-top: -9vw;}

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

.endText{margin: 35vw 0 50px;}
footer .logo{width: 100px;}


}






@media(max-width:500px) {

.areaTop{padding: 38vw 0;}
.lead h2{width: 210px;}

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

.gear h2{width: 50vw;}
.gear h3{width:24vw;}

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

.gear .itemInfo .name h4{font-size: 22px;padding-bottom: 15px;}
.gear .itemInfo .name h4{top: -5px;position: relative;}
.gear .itemInfo .name h4 br{display: block;}
.gear .itemInfo .name .online{width: 140px;}
.gear .itemInfo .variation ul li{width: 23%;}

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

.column01 .cLeft h2{width: 52vw;}

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

.youtubeArea .thumb .playBT .play{width: 21vw;margin-top: -10.5vw;}

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

footer .logo{width: 24vw;}

}





@media(max-width:440px) {

.headerIn h1{width: 60%;}
.headerIn h2{width: 60%;}
.headerIn .logo{width: 26%;}
.headerIn h3{font-size: 9px;}
.headerIn h4{font-size: 9px;}

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

.lead h2{width: 190px;}
.lead .copy,
.lead.delighter .copy{margin-top: 65px;}

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

.gear{padding: 30vw 0 30vw;}
.gear .gearImage{margin-top: 20vw;}

.gear .itemInfo{margin-top: 35px;}
.gear .itemInfo .name h4{padding-bottom: 10px;}

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


.column01{padding: 30vw 0 2vw;}
.column01 .cLeft .spMainImage{margin-top: 36vw;}


.endText{margin: 38vw 0 40px;font-size: 11px;}

}