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

.opaque{
opacity:1;
filter:alpha(opacity=100)}

.opaque:hover{
opacity:1;
filter:alpha(opacity=100)}

.background-contain{
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain}

.background-cover{
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
background-size:cover}

#contentheader{
display:none}

.rld-loader{
position:fixed;
left:0;
top:0;
display:none;
width:100%;
height:100%;
padding-bottom:70px;
background-color:#000;
z-index:10001}

.rld-loadstart .rld-loader{
display:block}

.rld-loadcomplete .rld-loader{
opacity:0;
filter:alpha(opacity=0);
transition-duration:1.5s;
-webkit-transition-duration:1.5s;
-moz-transition-duration:1.5s;
transition-delay:.8s;
-webkit-transition-delay:.8s;
-moz-transition-delay:.8s}

.rld-progressbar{
width:0%;
height:5px;
background-color:#ff5a00;
transition-duration:.3s;
-webkit-transition-duration:.3s;
-moz-transition-duration:.3s}

.js:not(.android42) [data-show="on-scroll"]{
opacity:0;
filter:alpha(opacity=0);
-webkit-transform:translateY(70px);
-moz-transform:translateY(70px);
-ms-transform:translateY(70px);
transform:translateY(70px);
transition-timing-function:ease-out;
-moz-transition-timing-function:ease-out;
-webkit-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
-ms-transition-timing-function:ease-out}

.js:not(.android42) [data-show="on-scroll"].in-view{
transition-duration:.7s;
-webkit-transition-duration:.7s;
-moz-transition-duration:.7s;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
opacity:1;
filter:alpha(opacity=100);
}

.rc-icon{
text-decoration:none;
position:relative;
margin:0 auto ;
display:inline-block;
width:38px;
height:38px;
vertical-align:middle;
overflow:hidden}

.rc-icon:before{
content:"";
position:absolute;
left:0;
top:0;
display:block;
width:100%;
height:200%;
background-repeat:no-repeat;
background-position:center top;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
-ms-background-size:contain;
background-size:contain}

.rc-icon:hover:before{
top:auto;
bottom:0}

.rc-icon-arrow-right:before{
background-image:url(https://static.roland.com/global/images/icon_arrow_right.svg)}


/* main-content */

#content-container{
background-color:#000}

.masthead{
position:relative;
height:0;
padding-top:45.0%}

@media screen and (max-width:1440px){
.masthead{
padding-top:640px}
}

@media screen and (max-width:767px){
.masthead{
height:auto;
padding-top:190px}
}

.masthead-copy{
text-align:center;
position:absolute;
top:195px;
left:0;
right:0;
margin:0 auto;
width:720px;
max-width:600px;
z-index:1}

@media screen and (max-width:767px){
.masthead-copy{
position:relative;
top:0;
margin-top:0;
width:auto;
padding-left:30px;
padding-right:30px;
max-width:590px}
}

.brand-of-vmoda .masthead-copy{
max-width:590px}

.masthead-headline{
font-weight:400;
font-size:53px;
font-size:2.65rem;
line-height:1;
letter-spacing:.05em;
text-transform:uppercase;
color:#fff;
margin:0 0 .8490566em;
-webkit-font-smoothing:antialiased}

@media screen and (max-width:767px){
.masthead-headline{
font-size:32px;
font-size:1.6rem;
font-weight:300}
}

.masthead-headline img{
width:100%;
max-width: 300px;
margin: 0 auto;
}


.masthead-text{
font-weight:300;
font-size:13px;
font-size:.65rem;
line-height:2.53846154;
letter-spacing:0;
color:#fff;
margin:-0.76923077em 0 0;
transition-delay:.2s;
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s}

.masthead-text:after{
margin:2.92307692em auto 0}

@media screen and (max-width:767px){
.masthead-text{
font-size:15px;
font-size:.75rem;
line-height:1.76923077}
}

.safari .masthead-text{
font-weight:400;
-webkit-font-smoothing:antialiased}


.masthead-hero{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
}

.masthead-hero img, .masthead-hero video {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: .85;
	filter: alpha(opacity=85)
}

@media screen and (max-width:1440px){
.masthead-hero{
left:50%;
margin-left:-720px;
width:1440px}
}

@media screen and (max-width:767px){
.masthead-hero{
left:0;
margin-left:0;
width:100%}

.masthead-hero img{
width:140.625%;
margin-left:-20%}

}

.masthead-hero video {
	display: none
}
@media screen and (max-width: 767px) {
	.masthead-hero img, .masthead-hero video {
    width: 100%;
    margin: 0 auto;
	}
}
.video .masthead-hero[data-play="on-scroll"] img {
	display: none !important
}
.video .masthead-hero[data-play="on-scroll"] video {
	display: block
}

/* section */


.section-video{
text-align:center;
margin:0 auto;
width:100%;
max-width:1240px;
padding:150px 50px 150px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box}

@media screen and (max-width:767px){
.section-video{
padding-left:30px;
padding-right:30px;
padding-bottom:80px}

}

.intoroduction{
padding-bottom:148px}

.intoroduction .section-player{
transition-delay:.5s;
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s}

@media screen and (max-width:767px){
.intoroduction{
padding-bottom:80px}

}

.section-player{
position:relative;
padding-top:56.14035088%}

.section-player img,.section-player video{
position:absolute;
left:0;
top:0;
width:100%}

.section-player video{
display:none;
opacity:.9;
filter:alpha(opacity=90)}

.video .section-player[data-play="on-scroll"] img{
display:none}

.video .section-player[data-play="on-scroll"] video{
display:block}

.player-copy{
margin:0 auto;
width:750px;
padding-top:75px}

@media screen and (max-width:767px){
.player-copy{
width:auto;
padding-top:50px}

}

.player-headline{
font-weight:500;
font-size:34px;
font-size:1.6rem;
line-height:1;
letter-spacing:.1em;
text-transform:none;
color:#fff;
margin:0 0 1.67647059em}

@media screen and (max-width:767px){
.player-headline{
font-size:26px;
font-size:1.3rem}

}

.safari .player-headline{
font-weight:400;
-webkit-font-smoothing:antialiased}

.player-title{
font-weight:100;
font-size:24px;
font-size:1.2rem;
line-height:1;
letter-spacing:.075em;
text-transform:none;
color:#fff;
position:absolute;
left:0;
top:50%;
margin-top:-0.5em;
width:100%;
z-index:1}

@media screen and (max-width:767px){
.player-title{
font-size:14px;
font-size:.7rem}

}

.safari .player-title{
font-weight:500;
-webkit-font-smoothing:antialiased}

.section{
position:relative;
padding-top:62.5%}

.stylish-section{
position:relative;
padding-top:70%}

.section-copy{
position:absolute;
left:0;
right:0;
top:50%;
margin:auto;
width:100%;
max-width:1280px;
padding:0 50px;
z-index:1;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%)}

@media screen and (max-width:767px){
.section-copy{
position:relative;
top:auto;
padding: 135px 30px 75px;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
transform:none}

}

.section-copy-left .section-copy-inner{
margin-left:0;
margin-right:auto}

.section-copy-inner{
margin-left:auto;
margin-right:0;
width:500px}

.section-copy-inner2{ /*PC-iPad*/
position: relative;
margin-left:0;
margin-right:0;
height: 60vh;
width:500px}

.main-copy-inner{
position: absolute;
bottom: -3em;
width:100%}

@media screen and (max-width:767px){
.section-copy-inner{
width:auto}

.section-copy-inner2{ /*SP*/
position: relative;
    width: 95%;
    margin-top: -85%;
    margin-left: 0;
    margin-right: 0;
    height: 120vh;
    }
    
.main-copy-inner{ /*SP*/
position: absolute;
margin-left:2%;
margin-right:1%;
top: 15%;
width:auto}
}

.main-headline{
font-weight:100;
font-size:28px;
font-size:1.4rem;
line-height:1.78571429;
letter-spacing:.05em;
text-transform:none;
color:#fff;
max-width:480px;
}

.section-headline{
font-weight:100;
font-size:28px;
font-size:1.4rem;
line-height:1.78571429;
letter-spacing:.05em;
text-transform:none;
color:#fff;
margin:-0.42857143em 0 1.32142857em;
max-width:480px}

@media screen and (max-width:767px){
.section-headline{
font-size:22px;
font-size:1.1rem;
line-height:1.33333333}

.main-headline{
font-size:22px;
font-size:1.1rem;
line-height:1.33333333;
margin:-0.42857143em 0 1.32142857em;
max-width:480px}
}

.safari .section-headline{
font-weight:400;
-webkit-font-smoothing:antialiased}

@media screen and (max-width:767px){
.safari .section-headline{
font-weight:400;
-webkit-font-smoothing:subpixel-antialiased}

}

.main-text{
font-weight:100;
font-size:14px;
font-size:.7rem;
line-height:2em;
letter-spacing:.05em;
color:#fff;
margin-left:-0.64285714em;
max-width:95%}

.section-text,.section-text:last-child{
font-weight:100;
font-size:14px;
font-size:.7rem;
line-height:2.35714286;
letter-spacing:.05em;
color:#fff;
margin-left:-0.64285714em;
max-width:800px}

@media screen and (max-width:767px){
.section-text,.section-text,main-text:last-child{
line-height:2}
}


.safari .section-text,.safari .section-text:last-child{
font-weight:400;
-webkit-font-smoothing:antialiased}

.section-image{
position:absolute;
left:0;
top:0;
width:100%;
height:100%}

.section-image img,.section-image video{
width:100%;
vertical-align:top}

.section-image video{
display:none}

@media screen and (max-width:767px){
.section-image img{
width:140%;
margin-left: 10%;}

}

@media screen and (max-width:767px){
.isoration .section-image img,.mil .section-image img{
margin-left: -80px;}
.awards .section-image img{
margin-left: -178px;}
	
}

.video .section-image[data-play="on-scroll"] img{
display:none}

.video .section-image[data-play="on-scroll"] video{
display:block}

.section-caption{
margin:0 auto;
max-width:650px;
padding-top:50px}

@media screen and (max-width:767px){
.section-caption{
padding-top:30px}

}

.caption-headline{
font-weight:300;
font-size:40px;
font-size:2rem;
line-height:1;
letter-spacing:0;
color:#fff;
margin:-0.1em 0 .8em;
-webkit-font-smoothing:antialiased}

@media screen and (max-width:767px){
.caption-headline{
font-size:26px;
font-size:1.3rem}

}

.caption-text,.caption-text:last-child{
font-weight:300;
font-size:14px;
font-size:.7rem;
line-height:1.57142857;
letter-spacing:0;
color:#999;
margin-top:-0.21428571em;
margin-bottom:-0.42857143em}

.safari .caption-text,.safari .caption-text:last-child{
font-weight:600;
-webkit-font-smoothing:antialiased}

.section-items{
text-align:center;
padding:145px 0 0}

.section-items .section-caption{
padding-top:100px;
max-width:750px}

@media screen and (max-width:767px){
.section-items{
padding:80px 30px 80px}

.section-items .section-caption{
padding-top:50px}

}

.items.section-items .section-caption{
max-width:650px}

.td-20-kx.section-items .section-caption{
max-width:580px}

.history-headline{
font-weight:300;
font-size:100px;
font-size:5rem;
line-height:1;
letter-spacing:0;
color:#fff;
margin:-0.11em 0 1.26em;
-webkit-font-smoothing:antialiased}

@media screen and (max-width:767px){
.history-headline{
font-size:50px;
font-size:2.5rem}

}

.history-image img{
vertical-align:top}

@media screen and (max-width:767px){
.history-image img{
width:100%}

}

#guide{
top:70px}

.product-tile {
background-color: white;
margin-bottom: 100px;
}

/* banner
----------------------------------------------------*/
.link-banner{
	width: 1010px;
	margin: 60px auto 145px;
	text-align: center;
	font-size: 0;
}
@media only screen and (max-width: 750px) {
.link-banner{
	width: 100%;
	margin: 30px auto 0;
}
}
@media only screen and (min-width: 751px) {
.link-banner .item{
	width: 475px;
	display: inline-block;
	margin-left: 15px;
	margin-right: 15px;
}
}
@media only screen and (max-width: 750px) {
.link-banner .item{
	width: 85%;
    margin:5px auto;
	display: inline-block;
}
}
.link-banner .item:nth-child(n+3){
	margin-top: 30px;
}
.link-banner .item img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
@media only screen and (min-width: 751px) {
.hv-op{
	transition: .3s;
	opacity: .6;
}
.hv-op:hover{
	opacity: 1.0;
}
}

@media screen and (min-width: 481px){
  #vzone {
    background: url(https://static.roland.com/jp/promos/v-moda_stories/images/main.jpg) no-repeat center center;
    background-size: cover;
  }
   #vzone h2 {
    height: 400px;
    padding-top: 160px;
    text-align: center;
    line-height: 1.2;
    font-size: 35px;
    font-weight: 100;
    font-family: "proxima-nova",sans-serif;
    color: #666;
    margin: 0;
    }
   .rc-cta {
    font-size: 14px;
    font-size: .8rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    display: inline-block;
    cursor: pointer;
    transition-duration: .1s;
    -webkit-transition-duration: .1s;
    -moz-transition-duration: .1s;
  }
  .rc-cta > .rc-icon {
    margin-right: .64285714em;
  }
  .rc-icon-arrow-right:before {
    background-image: url(https://static.roland.com/global/images/icon_arrow_right.svg);
  }
}
@media screen and (max-width: 480px){
  #vzone {
    background: url(https://static.roland.com/jp/promos/v-moda_stories/images/main.jpg) no-repeat center center;
    background-size: cover;
  }
  #vzone h2 {
    padding: 100px 0;
    text-align: center;
    line-height: 2;
    font-size: 24px;
    font-weight: 100;
    font-family: "proxima-nova",sans-serif;
    color: #666;
    margin: 0;
  }
  }
#vzone *, #vzone *:before, #vzone *:after {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
		
/*-----------reset-----------*/
.video .masthead-hero[data-play="on-scroll"] video {
    display: block;
    width: 108%;
}
/*.masthead-hero img{
 display: none;
}*/
.intro_wrap{
 margin: 0 auto;
 position: relative;
}
.intro_wrap .name_box{
 margin: 0 auto;
 max-width: 1280px;
 position: absolute;
 left: 0;
 right: 0;
 top: 45%;
}.intro_wrap .name_box .name{
 padding-left: 50px;
 padding-right: 50px;
 margin-left: 0;
 width: 588px;
}
.intro_wrap .image{
 margin: 0 auto;
}
.sound .hi-res_logo {
    width: 30%;
    margin-left: 7px;
    max-width: 150px;
    margin-top: 35px;
}
.section-text .attention{
 font-size: 12px;
}
.btn_link{
	margin:0 auto;
	width:100%;
	margin-top: 40px;
}
.btn_link a{
	display:block;
	padding:20px;
	border: 2px solid;
	text-align:center;
	font-size: 15px;
	text-decoration: none;
	transition:0.5s;
	position: relative;
}
.btn_link a:hover{
	color:#fff;
}
.btn_link a:before{
	content: "";
	width: 18px;
	height: 25px;
	position: absolute;
	background-image: url("../img/navi_link.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 8px;
	right: 10px;
	transition:0.5s;
}
.btn_link a:hover:before{
	background-image: url("../img/navi_link_on.png");
}
section.stylish_sound.section {
    padding-top: 72.5%;
}
.stylish_sound .section-image img{
 width: 100%;
}

@media screen and (max-width: 767px){
/*.masthead-hero img{
 display: inherit;
}*/
.masthead {
    height: 380px;
    padding-top: 0px;
    margin-bottom: 20px;
}
.masthead-hero {
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 480px;
    position: relative;
}
.masthead .sp-hero {
	margin:0 auto;
}
.masthead .sp-hero .logo {
	margin:0 auto;
	width: 70%;
	padding-top: 146px;
}
.masthead .sp-hero img {
    width: 100%;
    height: auto;
    margin: auto;
}
.masthead-copy {
    position: absolute;
    top: 0;
    margin-top: 0;
    width: auto;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 590px;
}
.masthead-headline img {
    max-width: 300px;
    margin: 0 auto;
    width: 50%;
    padding-top: 95px;
    margin-bottom: 20px;
}
.masthead-hero img {
    width: 100%;
    margin: 0 auto;
    height: auto;
    position: absolute;
    top: 350px;
}
.intoroduction {
    margin: 0 auto;
    padding: 30px;
    padding-top: 0;
    padding-bottom: 75px;
}
.stylish_sound .section-copy {
    padding-bottom: 60px;
    padding-top: 25px;
}
.intoroduction-copy{
 padding-top: 0;
}
.section-image {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    width: 90%;
    height: 100%;
    overflow: hidden;
}
.section-image img {
    width: 155%;
    margin-left: 0;
}
.stylish_sound .section-image img {
    margin-left: 0%;
}
.sound .section-image img {
    margin-left: 0;
}
.carefully .section-image img {
    margin-left: -48%;
}
.as_tough .section-image img {
    margin-left: -36%;
}
.crafted .section-image img {
    margin-left: -36%;
}
.top_djs .section-image img {
    margin-left: 0;
}
.endorse_yourself .section-copy {
    padding-top: 80px;
}
}