@charset "UTF-8";

/* =================================================================================
  default
================================================================================= */

#sp,
#sp.item,
#sp #inner,
#sp .pr,
#sp .content,
#sp .area,
#sp .product,
#sp .info,
.content-sss,
.content2,
.content-week {
  overflow: hidden;
  _zoom: 1;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

/*=================================================================================
  main contents
=================================================================================*/
#container {
  padding-top: 0 !important;
}
#alpha {
  float: none;
  width: 100%;
}

#sp .page-title,
#sp .page-catchphrase,
#sp .page-description,
#sp .top-catchphrase,
#sp .top-title,
#sp .area-catchphrase,
#sp .area-title {
  height: 0;
  overflow: hidden;
  text-indent: -999px;
}

/* 全体 */
#sp {
  background: url(img/background.jpg) center center repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  margin: 0 0 10px;
  width: 100%;
}
#sp a:hover img {
  opacity: 0.85;
}

#sp .pr {
  background: url(img/background_top_content.jpg) center center no-repeat;
  height: 997px;
  width: 100%;
}
#sp .pr .trailer {
  background-color: #000;
  bottom: 150px;
  height: 250px;
  position: absolute;
  right: 62px;
  width: 445px;
}
#sp .pr .trailer .video-wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
#sp .pr .trailer .video-btn {
  bottom: 40px;
  content: "";
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
#sp .pr .trailer video {
  height: 100%;
  width: 100%;
}
#sp .pr .go-to-area {
  position: absolute;
  bottom: 0;
  height: 130px;
  left: 0;
  width: 100%;
}
#sp .pr .go-to-detail {
  display: block;
  top: 50%;
  height: 73px;
  margin-left: -140px;
  margin-top: -36px;
  position: absolute;
  left: 50%;
  width: 279px;
}

#sp .pr .go-to-official {
  bottom: 30px;
  color: #fff;
  display: inline-block;
  padding: 0 0 0 16px;
  position: absolute;
  text-decoration: underline !important;
  right: 75px;
  vertical-align: middle;
  font-size: 15px;
}
#sp .pr .go-to-official::before,
#sp .pr .go-to-official::after{
  bottom: 0;
  content: "";
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  vertical-align: middle;
}
#sp .pr .go-to-official::before{
  border: 4px solid transparent;
  border-left: 4px solid #fff;
  box-sizing: border-box;
  left: 4px;
  height: 4px;
  width: 4px;
}

#sp .area {
  background: url(img/background_area_bottom.jpg) center bottom no-repeat;
  position: relative;
}
#sp .area .product-list {
  overflow: hidden;
  padding: 270px 35px 40px;
}
#sp #area1 .product-list {
  background: url(img/background_area1.jpg) center top no-repeat;
}
#sp #area2 .product-list {
  background: url(img/background_area2.jpg) center top no-repeat;
}
#sp #area3 .product-list {
  background: url(img/background_area3.jpg) center top no-repeat;
  padding-top: 314px;
}
#sp #area4 .product-list {
  background: url(img/background_area4.jpg) center top no-repeat;
  padding-top: 342px;
}
#sp #area5 .product-list {
  background: url(img/background_area5.jpg) center top no-repeat;
  padding-top: 314px;
}
#sp #area6 .product-list {
  background: url(img/background_area6.jpg) center top no-repeat;
  padding-top: 320px;
}
#sp #area7 .product-list {
  background: url(img/background_area7.jpg) center top no-repeat;
  padding-top: 314px;
}
#sp #area8 .product-list {
  background: url(img/background_area8.jpg) center top no-repeat;
  padding-top: 342px;
}
#sp #area9 .product-list {
  background: url(img/background_area9.jpg) center top no-repeat;
  padding-top: 314px;
}

#sp .area .product-list .area-related {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0 30px;
  width: 100%;
}
#sp #area1 .area-related,
#sp #area3 .area-related,
#sp #area5 .area-related,
#sp #area7 .area-related,
#sp #area9 .area-related {
  text-align: left;
}
#sp #area2 .area-related,
#sp #area4 .area-related,
#sp #area6 .area-related,
#sp #area8 .area-related {
  text-align: right;
}

#sp .area .product-list .product {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  padding: 0 30px;
  width: 33.33%;
}
#sp .area .product-list .product .product-catchphrase,
#sp .area .product-list .product .product-title {
  display: inline-block;
  text-align: left;
  width: 100%;
}
#sp .area .product-list .product .product-catchphrase {
  font-size: 16px;
  margin-top: 10px;
}
#sp .area .product-list .product .product-title {
  color: #d8ff00 !important;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline !important;
  margin-top: 5px;
}
#sp .area .product-list .product a.product-title:hover {
  color: #a0bd00 !important;
  text-decoration: none !important;
}
#sp .go-to-list-area {
  padding: 50px 0;
  text-align: center;
}
#sp .go-to-list-area .go-to-list img {
  height: auto;
  max-width: 517px;
  width: 90%;
}

#sp div.footer {
  background-color: #45502e;
  line-height: 1.5;
  padding: 30px;
  text-align: center;
}



@media (max-width: 640px) {
  #sp .main-visual {
    background: url(img/main_visual_mobile.jpg) center 0 no-repeat;
    -webkit-background-size: 100%;
    background-size: 100% auto;
    height: auto;
    width: 100%;
  }

  #sp .page-title {
    height: calc(((712 - 360) / 640) * 100vw);
  }

  #sp .page-description,
  #sp .area-catchphrase {
    font-size: 16px;
    height: auto;
    padding: 10px 15px;
    text-indent: inherit;
  }
  #sp .area .product-list .area-related {
    font-size: 16px;
  }
  #sp .area .product-list .product .product-title {
    font-size: 16px;
  }
  #sp .pr {
    background: url(img/background_top_content_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    height: calc(((1162 + 250) / 640) * 100vw);
  }
  #sp .pr .trailer {
    bottom: auto;
    height: calc((1080 / 1920) * 0.8 * 100vw);
    left: 60%;
    margin-left: calc(-1 * 50vw);
    width: 80%;
    top: calc(((1162 - 390) / 640) * 100vw);
  }
  #sp .pr .go-to-area {
    background: url(img/background_area_bottom_mobile.jpg) center bottom no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    bottom: auto;
    max-height: 150px;
    height: calc(((130 + 130) / 640) * 100vw);
    top: calc(((1162 - 10) / 640) * 100vw);
    text-align: center;
  }
  #sp .pr .go-to-detail {
    top: auto;
    height: auto;
    margin: 20px auto 0;
    position: relative;
    left: auto;
    width: 80%;
  }
  #sp .pr .go-to-detail img {
    height: auto;
    max-width: 279px;
    width: 100%;
  }

  #sp .pr .go-to-official {
    bottom: auto;
    margin: 10px auto;
    position: relative;
    right: auto;
  }

  #sp .area {
    background: url(img/background_area_bottom_mobile.jpg) center bottom no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp .area-catchphrase {
    padding: 0 10px !important;
    margin: 0 0 10px;
    text-align: left !important;
  }
  #sp .area-related {
    padding: 0 10px !important;
    text-align: left !important;
  }

  #sp .area .product-list {
    overflow: hidden;
    padding: calc(((500 - 230) / 640) * 100vw) 20px 20px !important;
  }
  #sp #area1 .product-list {
    background: url(img/background_area1_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area2 .product-list {
    background: url(img/background_area2_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area3 .product-list {
    background: url(img/background_area3_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area4 .product-list {
    background: url(img/background_area4_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area5 .product-list {
    background: url(img/background_area5_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area6 .product-list {
    background: url(img/background_area6_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area7 .product-list {
    background: url(img/background_area7_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area8 .product-list {
    background: url(img/background_area8_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
  #sp #area9 .product-list {
    background: url(img/background_area9_mobile.jpg) center top no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
  }

  #sp .area .product-list .product {
    padding: 0 5px;
  }
  #sp .area .product-list .product .jacket-img {
    height: auto;
    width: 100%;
  }
  #sp .area .product-list .product .product-catchphrase {
    display: none;
  }
}