@charset "UTF-8";

/* googl字體  */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700;900&display=swap&subset=chinese-traditional');



/* ================================

    #mainContent initialize

================================ */

#mainContent *,

#mainContent *::before,

#mainContent *::after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -o-box-sizing: border-box;

  box-sizing: border-box;

}

#mainContent {

  display: block;

  color: #000; /* unique value */

  font-size: 14px;

  font-family: "Helvetica",

  "Microsoft JhengHei",

  Arial,

  sans-serif;

  /*   jp_only   */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

#mainContent a {

  display: inline-block;

  color: #000;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-box-shadow: none;

  box-shadow: none;

  outline: none;

}

#mainContent a:link,

#mainContent a:visited,

#mainContent a:hover,

#mainContent a:active,

#mainContent a:focus {

  color: #000;

  text-decoration: none;

}

#mainContent h1,

#mainContent h2,

#mainContent h3,

#mainContent h4 {

  line-height: 1.4; /* unique value */

  margin: -.2em 0; /* unique value */

  padding: 0;

  font-family:"Helvetica",

  "Noto Sans TC",

  "Microsoft JhengHei",

  Arial,

  sans-serif;

  /*   jp_only   */

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



#mainContent h5,

#mainContent h6 {

  line-height: 1.4; /* unique value */

  margin: -.2em 0; /* unique value */

  padding: 0;

}

#mainContent p {

  line-height: 1.8; /* unique value */

  margin: -.4em 0; /* unique value */

  padding: 0;

}

#mainContent img {

  width: 100%;

  font-size: .5em;

  vertical-align: bottom;

}

#mainContent dl,

#mainContent dd,

#mainContent dt,

#mainContent ol,

#mainContent ul,

#mainContent li {

  margin: 0;

  padding: 0;

  list-style: none;

}

#mainContent figure,

#mainContent figcaption {

  margin: 0;

  padding: 0;

}

#mainContent del,

#mainContent ins {text-decoration: none;}

#mainContent *.oldprice {

  display: block;

  color: #585858;

  font-size: 12px;

  line-height: 1;

  margin-bottom: .85em;

}

#mainContent *.price {

  display: block;

  color: #000;

  font-size: 11px;

}

#mainContent *.num {

  font-family: "Helvetica", sans-serif;

  font-weight: bold;

}

#mainContent *.price *.num {

  font-size: 16px;

  line-height: 1;

  margin: 0 .2em;

}

#mainContent *.thumb {display: block;}

#mainContent *.name {

  display: block;

  color: #000;

  font-size: 13px;

  line-height: 1.6;

  margin-top: -.3em;

  margin-bottom: calc(14px - .3em);

}

#mainContent *.price *.name {

  display: inline-block;

  line-height: 1;

  margin: 0;

  margin-right: 20px;

}

#mainContent .itemList *.thumb {margin-bottom: 40px;}

/* --------------------------------

    #mainContent initialize sp

-------------------------------- */

@media screen and (max-width: 767px) {

  #mainContent {font-size: 3.733vw;}

  #mainContent *.oldprice {

    font-size: 2.933vw;

    margin-top: .8em;

    margin-bottom: .6em;

  }

  #mainContent *.price {font-size: 2.933vw;}

  #mainContent *.price *.num {

    font-size: 4.267vw;

    margin: 0 .25em;

  }

  #mainContent *.name {

    font-size: 3.2vw;

    margin-bottom: calc(2.666vw - .3em);

  }

  #mainContent *.price *.name {

    display: block;

    margin-right: 0;

    margin-bottom: calc(1.333vw - .3em);

  }

  #mainContent .itemList *.thumb {margin-bottom: 4vw;}

}

/* =====================

  - #mainContent

    > #hero

    > #system

    > #sale

    > #contents

      > #localNav

      > section

    > #stretch

===================== */

/* ================================

    Utility

================================ */

#mainContent *.ut-hide {display: none !important}

#mainContent *.ut-clearfix::after {

  clear: both;

  content: '';

  display: block;

}

#mainContent *.ut-sp {display: none;}

#mainContent *.ut-wrapper {

  max-width: 1100px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 40px;

  padding-right: 40px;

}

/* --------------------------------

    Utility Tablet

-------------------------------- */

@media screen and (max-width: 1024px) and (min-width: 768px) {

  #mainContent *.ut-wrapper {}

}

/* --------------------------------

    Utility sp

-------------------------------- */

@media screen and (max-width: 767px) {

  #mainContent *.ut-pc {display: none !important}

  #mainContent *.ut-sp {display: block !important}

  #mainContent *.ut-wrapper {

    max-width: 100%;

    margin-left: 8vw;

    margin-right: 8vw;

    padding-left: 0;

    padding-right: 0;

  }

}

/* =====================

    common

===================== */

#mainContent {margin-bottom: 180px;}

#mainContent .section__ttl {

  font-size: 40px;

  font-weight: bold;

}

#mainContent .section__stl {

  font-size: 22px;

  font-weight: bold;

}

#mainContent .section__container {}

#mainContent .label__series {

  display: inline-block;

  padding: 0.583em 1em;

  margin-bottom: 1em;

  font-size: 12px;

  line-height: 1;

  text-align: center;

  color: #ffffff;

  background-color: #585858;

  border-radius: 1.083em;

}

#mainContent .itemList .label__series {width: 100%;}

#mainContent .label__good,

#mainContent .label__review {

  display: inline-block;

  width: 122px;

  line-height: 1;

  margin-bottom: 8px;

}

#mainContent .columnArea {

  display: flex;

  justify-content: space-between;

}

#mainContent .columnItem {

  display: flex;

  align-items: center;

  width: 100%;

  border: 1px solid #DDDDDD;

  border-radius: 6px;

  overflow: hidden;

}

#mainContent .columnItem--small {

  width: 47.62%;

}

#mainContent .columnItem__tmb {width: 100%;}

#mainContent .columnItem--small .columnItem__tmb {

  position: relative;

  min-width: 39.6%;

  height: 100%;

}

#mainContent .columnItem--medium .columnItem__tmb {

  min-width: 38.57%;

}

#mainContent .columnItem--large .columnItem__tmb {

  min-width: 46.38%;

}

#mainContent .columnItem--small .columnItem__tmb img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* IE11 Only */

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

  #mainContent .columnItem__tmb img {height: auto;}

}

#mainContent .columnItem__txt {

  padding: 20px;

  width: 100%;

}

#mainContent .columnItem--large .columnItem__txt {padding: 40px;}

#mainContent .columnItem--small .columnItem__ttl {

  font-size: 14px;

  margin-bottom: calc(10px - .2em);

}

#mainContent .columnItem--medium .columnItem__ttl {

  font-size: 16px;

  margin-bottom: calc(15px - .2em);

}

#mainContent .columnItem--large .columnItem__ttl {

  font-size: 22px;

  margin-bottom: calc(20px - .2em);

}

#mainContent .btn__square {

  display: flex;

  justify-content: space-between;

}

#mainContent .btn__square a {

  width: 48.11%;

  padding: 1.464em 0;

  font-size: 14px;

  line-height: 1;

  text-align: center;

  border: 1px solid #999999;

  border-radius: 4px;

}

#mainContent .btn__square a:only-child {width: 100%;}

#mainContent .btn__square a.series {

  color: #ffffff;

  background-color: #585858;

  border: 1px solid #585858;

}

#mainContent .btn__movie {margin-top: 20px;}

#mainContent .btn__movie a {

  width: 168px;

  display: inline-block;

  padding: 1.071em 0;

  font-size: 14px;

  line-height: 1;

  text-align: center;

  border: 1px solid #999999;

  border-radius: 1.572em;

  cursor: pointer;

}

#mainContent .btn__movie a::before {

  display: inline-block;

  content: '';

  width: 10px;

  height: 12px;

  margin-right: .5714em;

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2212px%22%20width%3D%2210px%22%3E%3Cpath%20d%3D%22M0%2C0%20L8%2C6%20L0%2C12%20Z%22%20fill%3D%22rgb(0%2C0%2C0)%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');

  background-repeat: no-repeat;

  background-position: left center;

}

#mainContent .link__arrow {

  margin-top: 20px;

  line-height: 1;

  text-align: right;

}

#mainContent .link__arrow a {

  position: relative;

  display: inline-block;

  padding-left: 18.5px;

  line-height: 1;

  transition: .3s;

}

#mainContent .link__arrow a::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;bottom: 0;

  width: 8.5px;

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2223px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke%3D%22rgb(153%2C%20153%2C%20153)%22%20stroke-width%3D%222px%22%20stroke-linecap%3D%22butt%22%20stroke-linejoin%3D%22miter%22%20fill%3D%22none%22%20d%3D%22M3.135%2C0.986%20L13.999%2C11.000%20L3.135%2C21.010%20%22%2F%3E%3C%2Fsvg%3E');

  background-repeat: no-repeat;

  background-position: left center;

  background-size: 8.5px 12.5px;

}

#mainContent .link__arrow a::after {

  position: absolute;

  content: '';

  left: 0;

  right: 0;

  bottom: -.2em;

  height: 0px;

  background-color: #999;

  transition: all .3s ease;

}

@media screen and (min-width: 768px) {

  #mainContent .link__arrow a:hover::after {height: 1px;}

}

@media screen and (max-width: 1023px) and (min-width: 768px) {

  #mainContent .columnItem--medium .columnItem__tmb,

  #mainContent .columnItem--large .columnItem__tmb {

    position: relative;

    height: 100%;

  }

  #mainContent .columnItem--medium .columnItem__tmb img,

  #mainContent .columnItem--large .columnItem__tmb img {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

}

/* ---------------------

    common SP

--------------------- */

@media screen and (max-width: 767px) {

  #mainContent {margin-bottom: 26.67vw;}

  #mainContent .section__ttl {font-size: 10.67vw;}

  #mainContent .section__stl {font-size: 4.8vw;}

  #mainContent .label__series {

    padding: 0.5em 1.2em;

    margin-bottom: 1em;

    font-size: 2.933vw;

    border-radius: 1em;

  }

  #mainContent .label__good,

  #mainContent .label__review {

    width: 34.67vw;

    margin-bottom: 0;

  }

  #mainContent .columnItem {

    flex-direction: column-reverse;

    flex-wrap: wrap;

  }

  #mainContent .columnItem__tmb {width: 100%;}

  #mainContent .columnItem--medium .columnItem__tmb {min-width: 0;}

  #mainContent .columnItem--large .columnItem__tmb {min-width: 0;}

  #mainContent .columnItem__txt {padding: 4vw;}

  #mainContent .columnItem--large .columnItem__txt {padding: 5.333vw 4vw;}

  #mainContent .columnItem--small .columnItem__ttl {

    font-size: 3.733vw;

    margin-bottom: calc(2.667vw - .2em);

  }

  #mainContent .columnItem--medium .columnItem__ttl {

    font-size: 4.267vw;

    margin-bottom: calc(4vw - .2em);

  }

  #mainContent .columnItem--large .columnItem__ttl {

    font-size: 4.8vw;

    margin-bottom: calc(5.333vw - .2em);

  }

  #mainContent .btn__square {flex-wrap: wrap;}

  #mainContent .btn__square a {

    width: 100%;

    font-size: 3.733vw;

  }

  #mainContent .btn__square a+a {margin-top: 10.67vw;}

  #mainContent .btn__movie {margin-top: 5.333vw;}

  #mainContent .btn__movie a {

    width: 100%;

    font-size: 3.733vw;

  }

  #mainContent .btn__movie a::before {

    width: 2.667vw;

    height: 3.2vw;

  }

  #mainContent .link__arrow {margin-top: 5.333vw;}

  #mainContent .link__arrow a {padding-left: 4.133vw;}

  #mainContent .link__arrow a::before {

    width: 2.133vw;

    background-size: 2.133vw 3.067vw;

  }

}

/* =====================



    #hero



===================== */

#hero {margin-bottom: 90px;}

#hero .mainVisual {

  max-width: 1500px;

  margin: 0 auto;

}

/* ---------------------

    #hero SP

--------------------- */

@media screen and (max-width: 767px) {

  #hero {margin-bottom: 13.33vw;}

}

/* =====================



    #system



===================== */

#system {margin-bottom: 80px;}

#system .section__heading {

  margin-bottom: 80px;

  text-align: center;

}

#system .section__heading p {

  font-size: 16px;

  font-weight: 400;

}

#system .section__ttl {margin-bottom: calc(30px - .2em);}

#system .section__container + .section__container {margin-top: 80px;}

#system .systemTree {

  margin-left: -40px;

  margin-right: -40px;

}

#system .systemContent__tmb {

  position: relative;

  float: left;

  width: 48.04%;

}

#system .systemContent__tmbView .swiper-pagination {display: none;}

#system .systemContent__tmbThumbs {

  position: absolute;

  bottom: 15px;left: 0;right: 15px;

}

#system .systemContent__tmbThumbs ul {justify-content: flex-end;}

#system .systemContent__tmbThumbs ul li {

  width: 10.53%!important;

  border: 1px solid #FFFFFF;

  cursor: pointer;

}

#system .systemContent__tmbThumbs ul li.swiper-slide-thumb-active {border: 2px solid #FFFFFF;}

#system .systemContent__tmbThumbs ul li:last-child {margin-right: 0!important;}

#system .systemContent__desc {

  float: right;

  width: 48.04%;

}

#system .systemContent__label {

  padding: .928em 0;

  font-size: 14px;

  width: 190px;

  border-radius: 1.428em;

}

#system .systemContent__ttl {

  margin-bottom: calc(20px - .2em);

}

#system .systemProduct__block {

  margin-top: 30px;

  padding-top: 30px;

  border-top: 1px solid #dddddd;

}

#system .systemProduct__ttl {

  font-size: 16px;

  font-weight: bold;

  margin-bottom: calc(30px - .2em);

}

#system .systemProduct__item + .systemProduct__item {margin-top: 30px;}

#system .systemProduct__item a {display: block;}

#system .systemProduct__itemTmb {

  display: block;

  font-size: 0;

}

#system .systemProduct__itemDesc {

  display: block;

  font-size: 0;

  margin-top: 20px;

}

#system .systemProduct__itemDesc > * {

  display: inline-block;

  margin: 0;

}

#system .systemProduct__itemDesc .name {margin-right: 20px;}

#system .systemParts {

  float: left;

  width: 48.04%;

  margin-top: 40px;

  display: flex;

  justify-content: space-between;

}

#system .systemParts__tmb {width: 47.96%;}

#system .systemParts__desc {width: 47.96%;}

#system .systemParts__ttl {

  font-size: 16px;

  margin-top: 0;

  margin-bottom: calc(20px - .2em);

}

#system .systemParts__item {margin-top: 20px;}

#system .systemParts__item a {display: block;}

/* ---------------------

    #system SP

--------------------- */

@media screen and (max-width: 767px) {

  #system {margin-bottom: 13.33vw;}

  #system .section__heading {

    margin-bottom: 16vw;

    text-align: left;

  }

  #system .section__heading p {font-size: 4.267vw;}

  #system .section__ttl {

    margin-bottom: calc(8vw - .2em);

    font-size: 6.4vw;

    text-align: center;

  }

  #system .section__container + .section__container {margin-top: 10.67vw;}

  #system .systemTree {margin-left: 0;margin-right: 0;}

  #system .systemContent__tmb {

    position: relative;

    float: none;

    width: 100%;

  }

  #system .systemContent__tmbView {padding-bottom: 5.333vw;}

  #system .systemContent__tmbView .swiper-pagination {

    display: block;

    font-size: 0;

    line-height: 1;

    bottom: 0;

  }

  #system .systemContent__tmbView .swiper-pagination-bullet {

    width: 2.667vw;height: 2.667vw;

    margin: 0 5px;

    background: #999999;

    opacity: .3;

  }

  #system .systemContent__tmbView .swiper-pagination-bullet-active {opacity: 1;}

  #system .systemContent__tmbThumbs {display: none;}

  #system .systemContent__desc {

    float: none;

    width: 100%;

    margin-top: 6.667vw;

  }

  #system .systemContent__label {

    width: 100%;

    padding: 0.863em 0;

    margin-bottom: 5.333vw;

    font-size: 2.933vw;

    border-radius: 1.363em;

  }

  #system .systemContent__ttl {

    font-size: 4vw;

    margin-bottom: calc(5.333vw - .2em);

  }

  #system .systemProduct__block {

    margin-top: 8vw;

    padding-top: 8vw;

  }

  #system .systemProduct__ttl {

    font-size: 4vw;

    margin-bottom: calc(5.333vw - .2em);

  }

  #system .systemProduct__item + .systemProduct__item {margin-top: 5.333vw;}

  #system .systemProduct__itemDesc {margin-top: 5.333vw;}

  #system .systemProduct__itemDesc > * {display: block;}

  #system .systemProduct__itemDesc .name {

    margin-right: 0;

    margin-bottom: calc(2.667vw - .3em);

  }

  #system .systemParts {

    float: none;

    width: 100%;

    margin-top: 16vw;

    flex-wrap: wrap;

  }

  #system .systemParts__tmb {width: 100%;margin-bottom: 6.667vw;}

  #system .systemParts__desc {width: 100%;}

  #system .systemParts__ttl {

    font-size: 4vw;

    margin-top: -.2em;

    margin-bottom: calc(5.333vw - .2em);

  }

  #system .systemParts__item {margin-top: 5.333vw;}

}

/* =====================



    #sale



===================== */

#sale {margin-bottom: 80px;}

#sale .section__inner {

  padding: 60px;

  border: 1px solid #dddddd;

  border-radius: 6px;

}

#sale .section__heading {

  margin-bottom: 60px;

  text-align: center;

}

#sale .section__heading p {font-size: 16px;}

#sale .section__ttl {margin-bottom: 30px;font-size: 0;}

#sale .section__ttl img {width: auto;margin: 0 auto;}

#sale .itemList {

  display: flex;

  justify-content: center;

  text-align: center;

}

#sale .itemList > li {

  width: 25%;

  margin-left: 2.222%;

  margin-right: 2.222%;

}

/* ---------------------

    #sale SP

--------------------- */

@media screen and (max-width: 767px) {

  #sale {margin-bottom: 21.33vw;}

  #sale .section__inner {padding: 10.67vw 8vw;}

  #sale .section__heading {margin-bottom: 10.67vw;}

  #sale .section__heading p {

    font-size: 4.267vw;

    text-align: left;

  }

  #sale .section__ttl {margin-bottom: 5.333vw;}

  #sale .section__ttl img {width: 50.67vw;}

  #sale .itemList {

    flex-wrap: wrap;

    text-align: left;

  }

  #sale .itemList > li {

    width: 100%;

    margin-left: 0;

    margin-right: 0;

  }

  #sale .itemList > li+li {margin-top: 8vw;}

  #sale .itemList > li a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    text-align: left;

  }

  #sale .itemList > li .thumb {width: 25.87vw;margin-bottom: 0;}

  #sale .itemList > li .desc {width: 36.8vw;}

  #sale .itemList > li .label__series {width: auto;}

}

/* =====================



    #localNav



===================== */

#localNav {}

#localNav .localNav__wrap {

  background-color: #fff;

  border-bottom: 1px solid #dddddd;

}

#localNav .localNav__list {

  display: flex;

  justify-content: center;

  text-align: center;

}

#localNav .localNav__list > li {

  position: relative;

  width: 17.65%;

  min-width: 150px;

  margin-left: 0.98%;

  margin-right: 0.98%;

  opacity: .3;

  transition: .3s ease;

}

#localNav .localNav__list > li.js_current {opacity: 1;}

#localNav .localNav__list > li::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;right: 0;

  height: 0px;

  background-color: #808080;

  transition: .3s ease;

}

#localNav .localNav__list > li.js_current::after {height: 3px;}

#localNav .localNav__list > li a {

  display: block;

  padding-top: 24px;

  padding-bottom: 24px;

  font-size: 18px;

  font-weight: bold;

  line-height: 1;

}

@media screen and (min-width: 768px) {

  #localNav .localNav__list > li:hover {opacity: 1;}

  #localNav .localNav__list > li:hover::after {height: 3px;}

}

/* ---------------------

    #localNav SP

--------------------- */

@media screen and (max-width: 767px) {

  #localNav .localNav__list {

    justify-content: space-between;

    margin-left: 2.667vw;

    margin-right: 2.667vw;

  }

  #localNav .localNav__list > li {

    width: 22.67vw;

    min-width: 0;

    margin: 0;

  }

  #localNav .localNav__list > li.js_current::after {height: 3px;}

  #localNav .localNav__list > li a {

    padding-top: 1.333em;

    padding-bottom: 1.333em;

    font-size: 4.8vw;

  }

}

/* =====================



    #contents



===================== */

#contents {margin-bottom: 80px;}

#contents section {

  padding-top: 100px;

  margin-bottom: 80px;

}

#contents section:last-of-type {margin-bottom: 0;}

#contents .section__heading {

  position: relative;

  text-align: center;

  margin-bottom: 60px;

}

#contents .section__heading::after {

  content: "";

  position: absolute;

  top: 50%;

  left: -40px;right: -40px;

  border-top: solid 1px #dddddd;

}

#contents .section__headingInner {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: left;

  padding: 0 30px;

  background-color: #fff;

  z-index: 10;

}

#contents .section__heading .section__ttl {margin-right: 30px;}

#contents .section__heading p {

  width: 420px;

}

#contents .section__container + .section__container {margin-top: 100px;}

#contents .section__blockHeading {

  margin-bottom: 45px;

  text-align: center;

}

#contents .section__stl {

  margin-bottom: calc(20px - .2em);

}

#contents .dustboxSize .section__stl {text-align: center;}

#contents .dustboxSize__img {max-width: 712px;margin: 0 auto;}



#contents .promotionArea {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

#contents .promotion__tmb {

  position: relative;

  width: 48.04%;

}

#contents .promotion__tmbView .swiper-pagination {display: none;}

#contents .promotion__tmbThumbs {

  position: absolute;

  bottom: 15px;left: 0;right: 15px;

}

#contents .promotion__tmbThumbs ul {justify-content: flex-end;}

#contents .promotion__tmbThumbs ul li {

  width: 10.53%!important;

  border: 1px solid #FFFFFF;

  cursor: pointer;

}

#contents .promotion__tmbThumbs ul li.swiper-slide-thumb-active {

  border: 2px solid #FFFFFF;

}

#contents .promotion__tmbThumbs ul li:last-child {margin-right: 0!important;}

#contents .promotion__desc {width: 48.04%;}

#contents .promotion__ttl {margin-bottom: calc(20px - .2em);}

#contents .promotionItem {margin-top: 25px;}

#contents .promotionItem > li {

  display: flex;

  align-items: center;

}

#contents .promotionItem > li+li {margin-top: 30px;}

#contents .promotionItem > li a {display: block;}

#contents .promotionItem > li a+a {margin-top: 10px;}

#contents .promotionItem__tmb {min-width: 45.92%;width: 45.92%;margin-right: 20px;}

#contents .promotionItem__desc {width: 100%;}

@media screen and (min-width: 768px) {

  #contents .promotionItem > li:first-child:nth-last-child(2) .promotionItem__tmb,

  #contents .promotionItem > li:first-child:nth-last-child(2) ~ li .promotionItem__tmb {

    min-width: 34.28%;

    width: 34.28%;

  }

  #contents .promotionItem > li:first-child:nth-last-child(3) .promotionItem__tmb,

  #contents .promotionItem > li:first-child:nth-last-child(3) ~ li .promotionItem__tmb {

    min-width: 24.08%;

    width: 24.08%;

  }

}



#contents .itemList {

  display: flex;

  flex-wrap: wrap;

  margin-left: -1.961%;

  margin-right: -1.961%;

  text-align: center;

}

#contents .itemList--center {

  justify-content: center;

}

#contents .itemList > li {

  width: 21.22%;

  margin-left: 1.886%;

  margin-right: 1.886%;

  font-size: 0;

}

#contents .itemList > li:nth-child(n+5) {margin-top: 40px;}

#contents .itemList > li a {

  display: block;

}

#contents .itemList > li a+a {margin-top: 5px;}

#contents .itemList__wrap:not(:first-child) {margin-top: 60px;}

#contents .itemFeatureList {

  margin-left: -1.471%;

  margin-right: -1.471%;

}

#contents .itemFeatureList > li {

  width: 17.14%;

  margin-left: 1.428%;

  margin-right: 1.428%;

}

#contents .itemFeatureList > li:nth-child(n+5) {margin-top: 0;}

#contents .itemFeatureList > li .thumb {margin-bottom: 20px;}

#contents .itemFeatureList > li .feature {

  padding: 0.571em 0.714em;

  margin-bottom: 1.143em;

  font-size: 14px;

  background-color: #E5E5E5;

}

#contents .itemFeatureList > li .feature dt {

  font-size: 13px;

  font-weight: bold;

  line-height: 1.4;

  margin-bottom: .3846em;

}

#contents .itemFeatureList > li .feature dd {

  font-size: 13px;

  line-height: 1.4;

}

#contents .itemFeatureList__wrap:not(:first-child) {margin-top: 80px;}

#contents .promotionArea:not(:first-child) {margin-top: 80px;}

#contents .columnArea:not(:first-child) {margin-top: 60px;}

#contents .btn__square {margin-left: -40px;margin-right: -40px;}

@media screen and (max-width: 1200px) and (min-width: 768px) {

  #contents .btn__square {margin-left: 0;margin-right: 0;}

}

/* ---------------------

    #contents SP

--------------------- */

@media screen and (max-width: 767px) {

  #contents {margin-bottom: 13.33vw;}

  #contents section {

    padding-top: 26.67vw;

    margin-bottom: 5.33vw;

  }

  #contents section:last-of-type {margin-bottom: 0;}

  #contents .section__heading {margin-bottom: 13.33vw;}

  #contents .section__heading::after {content: none;}

  #contents .section__headingInner {

    display: block;

    padding: 0;

    background-color: none;

  }

  #contents .section__heading .section__ttl {

    margin-right: 0;

    margin-bottom: calc(20px - .2em);

  }

  #contents .section__heading p {width: 100%;}

  #contents .section__container + .section__container {margin-top: 21.33vw;}

  #contents .section__blockHeading {

    margin-bottom: 12vw;

    text-align: left;

  }

  #contents .section__stl {margin-bottom: calc(5.333vw - .2em);}

  #contents .dustboxSize .section__stl {text-align: left;}

  #contents .dustboxSize__img {max-width: 100%;}

  #contents .promotionArea {

    align-items: flex-start;

    flex-wrap: wrap;

  }

  #contents .promotion__tmb {width: 100%;}

  #contents .promotion__tmbView {padding-bottom: 5.333vw;}

  #contents .promotion__tmbView .swiper-pagination {

    display: block;

    font-size: 0;

    line-height: 1;

    bottom: 0;

  }

  #contents .promotion__tmbView .swiper-pagination-bullet {

    width: 2.667vw;height: 2.667vw;

    margin: 0 5px;

    background: #999999;

    opacity: .3;

  }

  #contents .promotion__tmbView .swiper-pagination-bullet-active {opacity: 1;}

  #contents .promotion__tmbThumbs {display: none;}

  #contents .promotion__desc {

    width: 100%;

    margin-top: 6.667vw;

  }

  #contents .promotion__ttl {margin-bottom: calc(5.333vw - .2em);}

  #contents .promotionItem {margin-top: 5.333vw;}

  #contents .promotionItem > li+li {margin-top: 10.67vw;}

  #contents .promotionItem > li a+a {margin-top: 4vw;}

  #contents .promotionItem__tmb {

    min-width: 0;

    width: 41.86vw;

    margin-right: 5.333vw;

  }

  #contents .promotionItem__desc {width: 36.8vw;}

  #contents .itemList__wrap {

    margin-left: -8vw;

    margin-right: -8vw;

  }

  #contents .itemList {

    display: list-item;

    overflow-x: auto;

    overflow-y: hidden;

    white-space: nowrap;

    padding-left: 8vw;

    padding-right: 8vw;

    margin: 0;

    font-size: 0;

  }

  #contents .itemList > li {

    display: inline-table;

    white-space: normal;

    width: 36vw;

    margin-left: 5.333vw;

    margin-right: 0;

    text-align: left;

  }

  #contents .itemList > li:first-child {margin-left: 0;}

  #contents .itemList > li:nth-child(n+5) {margin-top: 0;}

  #contents .itemList > li a {display: block;}

  #contents .itemList > li a+a {margin-top: 4vw;}

  #contents .itemList__wrap:not(:first-child) {margin-top: 12vw;}

  #contents .itemFeatureList {

    margin-left: 0;

    margin-right: 0;

    padding-left: 0;

    padding-right: 0;

    font-size: 3.733vw;

    white-space: normal;

  }

  #contents .itemFeatureList > li {

    display: flex;

    justify-content: space-between;

    width: 100%;

    margin-left: 0;

    margin-right: 0;

  }

  #contents .itemFeatureList > li:not(:first-child) {margin-top: 8vw;}

  #contents .itemFeatureList > li .thumb {

    width: 40vw;

    margin-bottom: 0;

  }

  #contents .itemFeatureList > li .desc {width: 41.33vw;}

  #contents .itemFeatureList > li .feature {font-size: 3.733vw;}

  #contents .itemFeatureList > li .feature dt {

    font-size: 3.2vw;

    margin-bottom: .3846em;

  }

  #contents .itemFeatureList > li .feature dd {font-size: 3.2vw;}

  #contents .itemFeatureList__wrap:not(:first-child) {margin-top: 21.33vw;}

  #contents .promotionArea:not(:first-child) {margin-top: 21.33vw;}

  #contents .columnArea:not(:first-child) {margin-top: 12vw;}

  #contents .contentsLink {margin-top: 16vw !important;}

  #contents .btn__square {margin-left: 0;margin-right: 0;}

}

/* =====================



    #stretch



===================== */

#stretch {padding-top: 100px;}

#stretch .section__heading {

  margin-bottom: 60px;

  text-align: center;

}

#stretch .section__heading p {

  font-size: 16px;

  font-weight: 400;

}

#stretch .section__ttl {

  margin-bottom: calc(30px - .2em);

}

#stretch .stretchMovie {}

#stretch .stretchMovie__list {

  display: flex;

  flex-wrap: wrap;

  margin-left: -1.961%;

  margin-right: -1.961%;

}

#stretch .stretchMovie__list > * {

  width: 21.22%;

  margin-left: 1.886%;

  margin-right: 1.886%;

}

#stretch .stretchMovie__tmb {margin-bottom: 20px;}

#stretch .stretchMovie__tmb a {

  display: block;

  cursor: pointer;

}

#stretch .stretchMovie__desc {}

#stretch .stretchMovie__ttl {

  font-size: 18px;

  margin-bottom: calc(20px - .2em);

}

@media screen and (min-width: 768px) {

  #stretch .stretchMovie__ttl span {display: block!important;}

}

/* ---------------------

    #stretch SP

--------------------- */

@media screen and (max-width: 767px) {

  #stretch {padding-top: 13.333vw;}

  #stretch .section__heading {margin-bottom: 16vw;}

  #stretch .section__heading p {

    font-size: 4.267vw;

    text-align: left;

  }

  #stretch .section__ttl {

    margin-bottom: calc(8vw - .2em);

    font-size: 6.4vw;

  }

  #stretch .stretchMovie {}

  #stretch .stretchMovie__list {

    margin-left: 0;

    margin-right: 0;

  }

  #stretch .stretchMovie__list > * {

    width: 100%;

    margin-left: 0;

    margin-right: 0;

  }

  #stretch .stretchMovie__list > *+*  {margin-top:13.33vw}

  #stretch .stretchMovie__tmb {margin-bottom: 5.333vw;}

  #stretch .stretchMovie__ttl {

    font-size: 4.267vw;

    margin-bottom: calc(5.333vw - .2em);

  }

}

/* =====================



    modal



===================== */

html.remodal-is-locked {touch-action: none;}

.remodal-overlay {

  background: rgba(255, 255, 255, 0.9);

}

.remodal-wrapper {padding: 0;}

.remodal {

  max-width: 1080px;

  margin: auto;

  padding: 60px 40px;

  background: none;

  /*box-shadow: 0px 0px 10px #999;*/

}

.remodal-close {

  left: initial;

  left: auto;

  right: 40px;

  width: 60px;

  height: 60px;

  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218px%22%20height%3D%2218px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M17.987%2C16.428%20L16.438%2C17.980%20L8.999%2C10.541%20L1.561%2C17.980%20L0.012%2C16.428%20L7.449%2C8.991%20L0.012%2C1.553%20L1.561%2C0.003%20L8.999%2C7.441%20L16.438%2C0.003%20L17.987%2C1.553%20L10.550%2C8.991%20L17.987%2C16.428%20Z%22%2F%3E%3C%2Fsvg%3E');

  background-color: rgba(255, 255, 255, 0);

  background-size: 20px;

  background-repeat: no-repeat;

  background-position: center;

}

.remodal-close::before {content: none;}

.remodal .remodalVideo {

  width: 100%;

  margin-left: auto;

  margin-right: auto;

}

.remodal .remodalVideo .remodalVideo__conteainer {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

}

.remodal .remodalVideo .remodalVideo__conteainer iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



/* ---------------------

    modal SP

--------------------- */

@media only screen and (max-width: 767px) {

  .remodal {padding: 12vw 0;}

  .remodal-close {

    right: 2vw;

    width: 12vw;

    height: 12vw;

    background-size: 4vw;

  }

}