@charset "UTF-8";

.section {
    margin-top: 100px;
    margin-bottom: 100px;
}
.section-padding {
    padding-bottom: 100px;
}

.sns-fixed {
  display: none;
}

/* ---------------
   Typography
--------------- */
.huge {
  font-size: 5rem;
  letter-spacing: .1em; }

/* ==========================================================================
   MV
========================================================================== */
.hero .hero_inner {
  -ms-flex-pack: center;
  justify-content: center;
}
.hero .txtBox {
  padding: 50px 15px 60px;
}
#mv h1 {
  font-size: 3rem;
}
#mv .h4 {
  font-size: 1rem;
}
#mv .mspc-logo {
  width: 180px;
}
@media only screen and (min-width: 576px) {
  #mv h1 {
    font-size: 4rem;
  }
  #mv .h4 {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 768px) {
  #mv h1 {
    font-size: 5rem;
  }
  #mv .h4 {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   Intro
========================================================================== */
#intro .txtBox {
  margin-top: 30px;
}
#intro .txtBox p {
  font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
  #intro em {
    margin-top: .75em;
  }
  #intro .txtBox {
    margin-top: 0;
  }
}


/* ==========================================================================
   Look
========================================================================== */
@media only screen and (max-width: 767px) {
  #look > .container {
    max-width: 100vw;
    padding: 0;
  }

  #look .row1 {
    margin-bottom: 16.6%;
  }
  #look .row2 {
    margin-top: 16.6%;
  }

  #look .img2 {
    margin-top: 16.6%;
  }
  #look .img4 {
    margin-top: 8.3%;
  }
  #look .img5 img {
    height: 140vw;
  }
  #look .img7 {
    margin-top: 12%;
  }
  #look .img8 {
    margin-top: -28vw;
    z-index: -1;
  }
  #look .img9 {
    margin-top: 12%;
    margin-right: auto;
    margin-left: auto;
  }
  #look .img11 {
    margin-top: 12%;
    margin-right: auto;
    margin-left: auto;
  }
  #look .img12 img {
    height: 106vw;
  }
}

@media only screen and (min-width: 768px) {
  #look .content {
    margin-top: 8.333333vw;
    margin-bottom: 8.333333vw;
  }

  #look .img5 img {
    height: 44vw;
    object-position: top center;
  }

  #look .img7 {
    margin-bottom: -10.5vw;
  }

  #look .img9 {
    padding-left: 8.333333vw;
  }

  #look .img12 {
    width: calc(100% + ((100vw - 100%)/2));
    margin-left: calc(((100vw - 100%)/2)*-1);
  }
  #look .img12 img {
    height: 44vw;
    object-position: bottom center;
  }
}

/* ==========================================================================
   Product
========================================================================== */
#with .section__header {
  text-align: center;
  right: 0;
  margin: 0 auto;
}
#with .imgBox {
  margin: 30px 0;
}

/* ==========================================================================
   Onsen
========================================================================== */
#onsen .mainimg img {
  width: 100%;
  height: 140vw;
  object-fit: cover;
}

.onsen-slider .box {
  padding: 15px 0 40px;
}
@media only screen and (min-width: 768px){
  #onsen .mainimg img {
    height: 44vw;
  }
  .onsen-slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .onsen-slider .box {
    flex: 0 0 50%; 
    padding: 15px;
  }
  #onsen .slider-controls-wrap {
    display: none;
  }
}


/* ---------------
   EC
--------------- */
#ec .slide figure {
  margin-bottom: 15px;
}
#ec .slide .size {
  font-size: .9rem;
}
#ec .slide .price {
  font-size: 1rem;
}

@media only screen and (max-width: 767px) {
  #ec::before {
    top: 300px;
  }
  #ec .slider {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  #ec .slide {
    display: block;
    float: none;
    flex: 0 0 50%;
    padding: 0 10px 25px;
  }
  #ec .slide:nth-last-of-type(-n+2) {
    padding-bottom: 0;
  }
  #ec .slide.slick-clone {
    display: none;
  }
  #ec .slider-controls-wrap {
    display: none;
  }
  #ec .more {
    margin-top: 50px;
  }
}

@media only screen and (min-width: 768px) {
  #ec::before {
    top: 300px;
  }
  #ec .ec-slider {
    overflow: hidden;
    margin-right: auto;
    margin-left: calc((100vw - 660px)/2);
  }
  #ec .slider {
    width: 660px;
  }
  #ec .slick-list{
    overflow: visible;
  }
  #ec .slide {
    padding-right: 30px;
  }
}