@charset "UTF-8";
/* ===============================================
  ### Foundation ###
=============================================== */

/* base style */
#Contents::after {
  content: none;
}

.main-area, .main_inner {
  -webkit-font-feature-settings: normal;
  color: #3e3e3e;
  font-family: "Noto Sans JP", sans-serif;
          font-feature-settings: normal;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  width: 100%;
}

.main-area *, .main_inner * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main-area img, .main_inner img {
  margin: auto;
  width: 100%;
}

.main-area__inner {
  margin: auto;
  max-width: 1200px;
}

/* toggle visibility for responsive object */
.sp-component {
  display: block;
}

.pc-component {
  display: none;
}

/* ===============================================
  ### Object ###
=============================================== */
/* breadcrumb__list */

.cateList {
  color: #000000;
  font-size: calc(10 * (100vw / 375));
  letter-spacing: calc(0.2 * (100vw / 375));
  line-height: calc(20 * (100vw / 375));
  margin: calc(5 * (100vw / 375)) auto;
  padding: calc(16 * (100vw / 375)) 0;
  width: 92%;
}

/* buy__btn */
.buy__btn {
  display: inline-block;
  height: calc(65 * (100vw / 375));
  width: calc(336 * (100vw / 375));
}

/* viewall__btn */
.viewall__btn {
  display: block;
  height: calc(46 * (100vw / 375));
  width: calc(295 * (100vw / 375));
}

/* ===============================================
  ### Layout ###
=============================================== */
/* =====================================
  * Style for SP-view *
===================================== */
#Contents {
  /* background-image: url("../imgs/page_sp.jpg"); */
  background-position-y: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.main_inner, .main-area {
  /* opacity: 0.6; */
}

/**
 * Style of heading
 */
.heading-img__wrapper {
  display: block;
  height: calc(565 * (100vw / 375));
  width: 100%;
}

.heading-title {
  display: block;
  height: calc(40 * (100vw / 375));
  margin: calc(40 * (100vw / 375)) auto 0;
  position: relative;
  width: calc(206 * (100vw / 375));
}

.heading-title::after {
  bottom: calc(-12 * (100vw / 375));
  color: #3e3e3e;
  content: 'スムーズィ';
  display: block;
  font-size: calc(12 * (100vw / 375));
  left: 0;
  letter-spacing: calc(0.24 * (100vw / 375));
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
}

.heading-desc {
  font-size: calc(14 * (100vw / 375));
  letter-spacing: calc(0.28 * (100vw / 375));
  line-height: 2;
  margin-top: calc(31 * (100vw / 375));
  padding: 0 calc(20 * (100vw / 375)) calc(64 * (100vw / 375));
  position: relative;
}

.heading-desc::after {
  background: #3e3e3e;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: calc(247 * (100vw / 375));
}

/**
 * common style
 */
/* text */
.title-txt {
  font-size: calc(20 * (100vw / 375));
  font-weight: 500;
  letter-spacing: calc(0.4 * (100vw / 375));
  line-height: 1.62;
  text-align: center;
}

.item-title-txt {
  font-size: calc(20 * (100vw / 375));
  font-weight: normal;
  letter-spacing: calc(0.4 * (100vw / 375));
  line-height: 1.45;
  text-align: center;
}

.desc-txt {
  font-size: calc(13 * (100vw / 375));
  letter-spacing: calc(0.26 * (100vw / 375));
  line-height: 2;
}

.price {
  display: block;
  font-size: calc(19 * (100vw / 375));
  letter-spacing: calc(0.38 * (100vw / 375));
  line-height: 1;
  margin-top: calc(6 * (100vw / 375));
}

/* structure */
.sec-style {
  display: block;
  margin: auto;
}

.mainimg__wrapper {
  display: block;
  height: calc(464 * (100vw / 375));
  margin: auto;
  width: calc(335 * (100vw / 375));
}

.mainimg__wrapper.pc-component {
  display: none;
}

.item {
  display: block;
  width: calc(317 * (100vw / 375));
}

.item .img__wrapper {
  height: calc(440 * (100vw / 375));
}

.item__list-item {
  margin: auto;
  width: calc(336 * (100vw / 375));
}

.buy__btn {
  margin-top: calc(16 * (100vw / 375));
}

/**
 * Style of sec1
 */
.sec1 {
  margin-top: calc(50 * (100vw / 375));
}

.sec1__container--primary {
  margin: auto;
  width: calc(335 * (100vw / 375));
}

.sec1__container--primary .desc-txt {
  margin-top: calc(10 * (100vw / 375));
}

.sec1__container--primary .mainimg__wrapper--1 {
  margin-top: calc(23 * (100vw / 375));
}

.sec1__container--primary .mainimg__wrapper--2 {
  margin-top: calc(10 * (100vw / 375));
}

.sec1__container--secondary {
  margin: auto;
  margin-top: calc(31 * (100vw / 375));
  width: calc(336 * (100vw / 375));
}

.sec1__container--secondary .desc-txt {
  margin-top: calc(24 * (100vw / 375));
}

.sec1__container--secondary .item {
  margin: auto;
}

.sec1__container--secondary .item-title-txt {
  padding-top: calc(40 * (100vw / 375));
  position: relative;
}

.sec1__container--secondary .item-title-txt::before {
  background-image: url("../imgs/limited.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  height: calc(25 * (100vw / 375));
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(128 * (100vw / 375));
}

.sec1__container--secondary .item__container {
  margin-top: calc(18 * (100vw / 375));
  position: relative;
  right: calc(1 * (100vw / 375));
}

.sec1__container--secondary .item--2 {
  margin-top: calc(50 * (100vw / 375));
}

/**
 * viewall__btn
 */
.viewall__btn {
  margin: calc(100 * (100vw / 375)) auto calc(82 * (100vw / 375));
}
@media only screen and (min-width: 560px) {
  /* =====================================
    * Style of Tablet-view *
  ===================================== */
  #Contents {
    padding-top: calc(60 * (100vw / 1200));
  }
  .sp-component {
    display: none;
  }
  .pc-component {
    display: block;
  }
  #breadcrumb {
    margin: auto;
    max-width: 1200px;
    width: 100%;
  }
  .cateList {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: calc(12 * (100vw / 1200));
    height: calc(50 * (100vw / 1200));
            justify-content: flex-end;
    left: calc(156 * (100vw / 1200));
    letter-spacing: calc(0.26 * (100vw / 1200));
    line-height: normal;
    margin: 0 0 calc(40 * (100vw / 1200)) auto;
    max-height: 50px;
    padding: 0;
    position: relative;
    width: 100%;
  }
  .cateList a {
    -webkit-transition: 0s;
    text-decoration: none;
    transition: 0s;
  }
  .cateList span {
    padding: 0 calc(5 * (100vw / 1200));
  }
  .buy__btn {
    height: calc(70 * (100vw / 1200));
    max-height: 70px;
    max-width: 530px;
    width: calc(530 * (100vw / 1200));
  }
  .viewall__btn {
    height: calc(56 * (100vw / 1200));
    max-height: 56px;
    max-width: 370px;
    width: calc(370 * (100vw / 1200));
  }
  /**
 * Style of heading
 */
  .heading {
    display: block;
    margin: auto;
    max-width: 1200px;
    width: calc(1200 * (100vw / 1200));
  }
  .heading-img__wrapper {
    height: calc(720 * (100vw / 1200));
    max-height: 720px;
  }
  .heading-title {
    height: calc(56 * (100vw / 1200));
    margin-top: calc(52 * (100vw / 1200));
    max-height: 56px;
    max-width: 290px;
    width: calc(290 * (100vw / 1200));
  }
  .heading-title::after {
    bottom: calc(-25 * (100vw / 1200));
    font-size: calc(17 * (100vw / 1200));
    letter-spacing: calc(0.34 * (100vw / 1200));
  }
  .heading-desc {
    font-size: calc(18 * (100vw / 1200));
    letter-spacing: calc(0.36 * (100vw / 1200));
    line-height: 1.78;
    margin-top: calc(43 * (100vw / 1200));
    padding: 0;
    text-align: center;
  }
  .heading-desc::after {
    content: none;
  }
  /**
 * common style
 */
  /* text */
  .title-txt {
    font-size: calc(25 * (100vw / 1200));
    letter-spacing: calc(0.5 * (100vw / 1200));
    line-height: 1.6;
    text-align: left;
  }
  .item-title-txt {
    font-size: calc(24 * (100vw / 1200));
    letter-spacing: calc(0.48 * (100vw / 1200));
    line-height: 1.2;
  }
  .desc-txt {
    font-size: calc(14 * (100vw / 1200));
    letter-spacing: calc(0.28 * (100vw / 1200));
    line-height: 2.14;
  }
  .price {
    font-size: calc(23 * (100vw / 1200));
    letter-spacing: calc(0.46 * (100vw / 1200));
  }
  /* structure */
  .sec-style {
    margin: auto;
  }
  .sec-style__container {
    position: relative;
  }
  .mainimg__wrapper {
    height: calc(735 * (100vw / 1200));
    max-height: 735px;
    max-width: 530px;
    width: calc(530 * (100vw / 1200));
  }
  .item {
    display: block;
    max-width: 500px;
    width: calc(500 * (100vw / 1200));
  }
  .item .img__wrapper {
    height: calc(694 * (100vw / 1200));
    max-height: 694px;
  }
  .item__list-item {
    margin: auto;
    max-width: 530px;
    width: calc(530 * (100vw / 1200));
  }
  .buy__btn {
    margin-top: calc(26 * (100vw / 1200));
  }
  /**
 * Style of sec1
 */
  .sec1 {
    margin-top: calc(156 * (100vw / 1200));
  }
  .sec1__container--primary {
    height: calc(1232 * (100vw / 1200));
    max-height: 1232px;
    max-width: 1110px;
    width: calc(1110 * (100vw / 1200));
  }
  .sec1__container--primary .title-mainimg__container {
    max-width: 530px;
    position: absolute;
    width: calc(530 * (100vw / 1200));
  }
  .sec1__container--primary .title-mainimg__container .desc-txt {
    line-height: 2.2;
    margin-top: calc(18 * (100vw / 1200));
    max-width: 482px;
    width: calc(482 * (100vw / 1200));
  }
  .sec1__container--primary .title-mainimg__container--2 {
    right: 0;
    top: calc(18 * (100vw / 1200));
  }
  .sec1__container--primary .mainimg__wrapper--1 {
    margin-top: 0;
  }
  .sec1__container--primary .mainimg__wrapper--2 {
    margin-top: calc(50 * (100vw / 1200));
  }
  .sec1__container--primary .mainimg__wrapper--3 {
    bottom: 0;
    height: calc(447 * (100vw / 1200));
    left: calc(210 * (100vw / 1200));
    max-height: 447px;
    max-width: 320px;
    position: absolute;
    width: calc(320 * (100vw / 1200));
  }
  .sec1__container--primary .mainimg__wrapper--3.pc-component {
    display: block;
  }
  .sec1__container--secondary {
    margin-top: calc(100 * (100vw / 1200));
    max-width: 1110px;
    width: calc(1110 * (100vw / 1200));
  }
  .sec1__container--secondary .desc-txt {
    margin-top: calc(23 * (100vw / 1200));
    text-align: center;
  }
  .sec1__container--secondary .item-title-txt {
    padding-top: calc(56 * (100vw / 1200));
  }
  .sec1__container--secondary .item-title-txt::before {
    background-image: url("../imgs/limited_pc.svg");
    height: calc(40 * (100vw / 1200));
    max-height: 40px;
    max-width: 200px;
    width: calc(200 * (100vw / 1200));
  }
  .sec1__container--secondary .item-title-txt .price {
    margin-top: calc(11 * (100vw / 1200));
  }
  .sec1__container--secondary .item__container {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            justify-content: space-between;
    margin-top: calc(66 * (100vw / 1200));
    right: 0;
  }
  .sec1__container--secondary .item__list-item {
    margin: 0;
  }
  .sec1__container--secondary .item--2 {
    margin-top: 0;
  }
  /**
 * viewall__btn
 */
  .viewall__btn {
    margin: calc(160 * (100vw / 1200)) auto calc(82 * (100vw / 1200));
  }
}
@media only screen and (min-width: 1200px) {
  /* =====================================
    * Style of PC-view *
  ===================================== */
  #Contents {
    padding-top: 60px;
  }
  .cateList {
    font-size: 12px;
    left: 156px;
    letter-spacing: .26px;
    margin-bottom: 40px;
  }
  .cateList span {
    padding: 0 5px;
  }
  #Contents {
    /* background-image: url("../imgs/page_pc.jpg"); */
    background-position-x: 50%;
    background-repeat: no-repeat;
    background-size: 1920px;
  }
  /**
 * Style of heading
 */
  .heading-title {
    margin-top: 52px;
  }
  .heading-title::after {
    bottom: -25px;
    font-size: 17px;
    letter-spacing: .34px;
  }
  .heading-desc {
    font-size: 18px;
    letter-spacing: .36px;
    margin-top: 43px;
  }
  /**
 * common style
 */
  /* text */
  .title-txt {
    font-size: 25px;
    letter-spacing: .5px;
  }
  .item-title-txt {
    font-size: 24px;
    letter-spacing: .48px;
  }
  .desc-txt {
    font-size: 14px;
    letter-spacing: .28px;
  }
  .price {
    font-size: 23px;
    letter-spacing: .46px;
  }
  /* structure */
  .buy__btn {
    margin-top: 26px;
  }
  /**
 * Style of sec1
 */
  .sec1 {
    margin-top: 156px;
  }
  .sec1__container--primary .title-mainimg__container .desc-txt {
    margin-top: 18px;
  }
  .sec1__container--primary .title-mainimg__container--2 {
    top: 18px;
  }
  .sec1__container--primary .mainimg__wrapper--2 {
    margin-top: 50px;
  }
  .sec1__container--primary .mainimg__wrapper--3 {
    left: 210px;
  }
  .sec1__container--secondary {
    margin-top: 100px;
  }
  .sec1__container--secondary .desc-txt {
    margin-top: 23px;
  }
  .sec1__container--secondary .item-title-txt {
    padding-top: 56px;
  }
  .sec1__container--secondary .item-title-txt .price {
    margin-top: 11px;
  }
  .sec1__container--secondary .item__container {
    margin-top: 66px;
  }
  /**
 * viewall__btn
 */
  .viewall__btn {
    margin: 160px auto 82px;
  }
}