/*
reference
https://css-tricks.com/books/volume-i/scale-typography-screen-size/
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
*/

/*hero section*/

.product-hero-container h2 {
  font-size:21px;
  font-weight:300;
  color:#3b3b3b;
}

.product-hero-container .gallery-thumbnail {
  display: none;
  }

.gallery-thumbnail > ul > li {
  outline:1px solid #666;
}
html[lang=ja] .product-hero-container .JPModels {
  width:90%;
}
/*hero section*/

/*body*/
section#features h4.feature-subheader,
.features-contents h4.feature-subheader {
  font-family:atrament-web,Arial Narrow,sans-serif;
  font-size: calc(28px + (70 - 28) * ((100vw - 300px) / (2560 - 300)));
  line-height: calc(1.1em + (1.4 - 1.2) * ((100vw - 300px)/(2560 - 300)));
  font-weight:700;
  color:#000 !important;
  text-transform:uppercase;
  display: inline;
  position: relative;
  z-index:0;
  margin-top: 1em;
  margin-bottom: 1em;
}

/*reduce size for small country*/
section#features h4.feature-subheader

section#features h4.feature-subheader.txt_white,
.features-contents h4.feature-subheader.txt_white {
  color:#fff !important;
}

section#features h4.feature-subheader:after,
.features-contents h4.feature-subheader:after {
  box-sizing:border-box;
  content:'';
  position: absolute;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  left:-10px;
  top:-10px;
  padding:10px 10px;
  z-index:-1;
}

section#features p,
.features-contents p {
  font-size: calc(16px + (28 - 16) * ((100vw - 300px) / (2560 - 300)));
  /*line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 300px)/(2560 - 300)));*/
  font-weight:300;
  color:#333;
}

section#features .product-info-container-dark p,
.features-contents .product-info-container-dark p {
  color:#fff;
  font-weight:100;
}

section#features p.footnote,
.features-contents p.footnote {
  font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (2560 - 300)));
  /*line-height: calc(1.2em + (1.5 - 1.2) * ((100vw - 300px)/(2560 - 300)));*/
}

.storepage_2 section#features p.footnote {
  font-weight:400;
}

section#features .bg-muvo-play,
.features-contents .bg-muvo-play {
  position: relative;
}
section#features .bg-muvo-play:before,
.features-contents .bg-muvo-play:before {
  content:'';
  left:0;
  top:0;
  width:100vw;
  height:100%;
  position:absolute;
  background:url('./bg-muvo-play.jpg') repeat;
  background-size:100% auto;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
.features-contents .bg-muvo-play:before {
  width:100%;
  margin:0 !important;
  background-position: top;
}
/*body*/

@media screen and (min-width:768px) {
  .product-hero-container {
    background:url('./muvoplay-hero1.jpg') center no-repeat;
    background-size:cover;
    padding-bottom:0;
  }

  
  .gallery-thumbnail > ul {
    justify-content: flex-end;
  }
  html[lang=ja] .product-hero-container .JPModels {
    width:30%;
    text-align: right;
    margin-left: auto;
  }
  section#features h4.feature-subheader,
  .features-contents h4.feature-subheader {
    white-space: nowrap;
    margin-bottom: 1em;
  }
  .features-contents .section_waterproof h4.feature-subheader {
    white-space: normal;
  }
  section#features h4.feature-subheader:after,
  .features-contents h4.feature-subheader:after {
    width:calc(100% + 60px);
    height:calc(100% + 30px);
    left:-30px;
    top:-15px;
    padding:15px 30px;
  }
}