@import url("//fonts.googleapis.com/earlyaccess/notosansjp.css");
.animate .fadein {
  opacity: 0;
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 2000ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

.animate.show .fadein {
  opacity: 1
}

.animate .slidein_left {
  opacity: 0;
  transform: translateX(-100px);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

.animate .slidein_right {
  opacity: 0;
  transform: translateX(100px);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

.animate.show .slidein_left, .animate.show .slidein_right {
  opacity: 1;
  transform: translateX(0)
}

.animate .slidein_top {
  opacity: 0;
  transform: translateY(-100px);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

.animate .slidein_bottom {
  opacity: 0;
  transform: translateY(100px);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

.animate.show .slidein_top, .animate.show .slidein_bottom {
  opacity: 1;
  transform: translateY(0)
}

.animate .zoomin {
  opacity: 0;
  transform: scale(1.5, 1.5);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 500ms;
  transition-delay: 0ms
}

.animate .zoomout {
  opacity: 0;
  transform: scale(.5, .5);
  transform-style: preserve-3d;
  transition-property: all;
  transition-duration: 500ms;
  transition-delay: 0ms
}

.animate.show .zoomin, .animate.show .zoomout {
  opacity: 1;
  transform: scale(1, 1)
}

.animate .d1 {
  transition-delay: 100ms
}

.animate .d2 {
  transition-delay: 200ms
}

.animate .d3 {
  transition-delay: 300ms
}

.animate .d4 {
  transition-delay: 400ms
}

.animate .d5 {
  transition-delay: 500ms
}

.animate .d6 {
  transition-delay: 600ms
}

.animate .d7 {
  transition-delay: 700ms
}

.animate .d8 {
  transition-delay: 800ms
}

.animate .d9 {
  transition-delay: 900ms
}

.animate .d10 {
  transition-delay: 1000ms
}

.animate .d11 {
  transition-delay: 1100ms
}

.animate .d12 {
  transition-delay: 1200ms
}

.animate .d13 {
  transition-delay: 1300ms
}

.animate .d14 {
  transition-delay: 1400ms
}

.animate .d15 {
  transition-delay: 1500ms
}

.animate .d16 {
  transition-delay: 1600ms
}

.animate .d17 {
  transition-delay: 1700ms
}

.animate .d18 {
  transition-delay: 1800ms
}

.animate .d19 {
  transition-delay: 1900ms
}

.animate .d20 {
  transition-delay: 2000ms
}

@font-face {
  font-family: 'Matter-Regular';
  src: url("../font/matter_regular.eot");
  src: url("../font/matter_regular.eot?#iefix") format("embedded-opentype"), url("../font/matter_regular.woff") format("woff"), url("../font/matter_regular.woff2") format("woff2")
}

@font-face {
  font-family: 'Matter-Bold';
  src: url("../font/matter_bold.eot");
  src: url("../font/matter_bold.eot?#iefix") format("embedded-opentype"), url("../font/matter_bold.woff") format("woff"), url("../font/matter_bold.woff2") format("woff2")
}

.qor-actionbar {
  position: relative;
  z-index: 1
}

#footer {
  position: relative;
  z-index: 100
}

html.not_full_support body article#main .logo .base {
  display: none
}

html.not_full_support body article#main .logo .main {
  mix-blend-mode: normal
}

html.not_full_support body article#main section.share {
  background-attachment: inherit
}

body article#main {
  width: 100%;
  overflow: hidden;
  font-family: 'Matter-Regular', 'Noto Sans JP', sans-serif
}

body article#main .scroll_icon {
  width: 7.5%;
  height: 128px;
  position: fixed;
  right: 0;
  bottom: 30px;
  z-index: 10
}

body article#main .scroll_icon>div {
  width: 100%;
  height: 100%
}

body article#main section {
  position: relative;
  z-index: 1
}

body article#main section.hero {
  height: calc(100vh - 107px)
}

body article#main section.ss2020 .bg, body article#main section.delegation_ex .bg, body article#main section.products .bg {
  padding: 0 20px;
  overflow: hidden;
  background: #ffffff
}

body article#main section.ss2020 .movie_frame, body article#main section.delegation_ex .movie_frame, body article#main section.products .movie_frame {
  height: 60vw;
  position: relative
}

body article#main section.ss2020 .movie_frame:before, body article#main section.ss2020 .movie_frame:after, body article#main section.delegation_ex .movie_frame:before, body article#main section.delegation_ex .movie_frame:after, body article#main section.products .movie_frame:before, body article#main section.products .movie_frame:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border-style: solid
}

body article#main section.ss2020 .movie_frame:before, body article#main section.delegation_ex .movie_frame:before, body article#main section.products .movie_frame:before {
  top: -1px;
  left: 0;
  border-width: 10vw 110vw 0 0;
  border-color: #ffffff transparent transparent transparent
}

body article#main section.ss2020 .movie_frame:after, body article#main section.delegation_ex .movie_frame:after, body article#main section.products .movie_frame:after {
  right: 0;
  bottom: -1px;
  border-width: 0 0 10vw 110vw;
  border-color: transparent transparent #ffffff transparent
}

body article#main section.ss2020 p.kv {
  margin-top: 20px;
  margin-bottom: 60px;
  text-align: center
}

body article#main section.ss2020 p.kv img {
  width: 100%;
  height: auto
}

body article#main section.ss2020 .colors {
  margin: 68px auto 180px auto;
  overflow: hidden
}

body article#main section.ss2020 .colors.show div:after {
  width: 0
}

body article#main section.ss2020 .colors div {
  margin: 0 0.1%;
  width: 33.1%;
  float: left;
  position: relative
}

body article#main section.ss2020 .colors div:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  transform-style: preserve-3d;
  transition-property: width;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms
}

body article#main section.ss2020 .colors div span {
  padding-top: 178.00454%;
  width: 100%;
  height: 0;
  display: block;
  background: no-repeat center center / cover
}

body article#main section.ss2020 .colors div.color1 span {
  background-image: url("../img/img_color1.jpg")
}

body article#main section.ss2020 .colors div.color2:after {
  transition-delay: 200ms
}

body article#main section.ss2020 .colors div.color2 span {
  background-image: url("../img/img_color2.jpg")
}

body article#main section.ss2020 .colors div.color3:after {
  transition-delay: 400ms
}

body article#main section.ss2020 .colors div.color3 span {
  background-image: url("../img/img_color3.jpg")
}

body article#main section.delegation_ex h2 {
  margin-bottom: 94px;
  text-align: center
}

body article#main section.delegation_ex h2 img {
  width: 100%;
  max-width: 731px;
  height: auto
}

body article#main section.delegation_ex p.text {
  margin: 0 auto 124px auto;
  padding: 0 40px;
  max-width: 1060px;
  box-sizing: border-box;
  text-align: center; /* us-en only */
  line-height: 40px;
  font-size: 22px
}

body article#main section.products ul.list {
  margin: 124px auto 218px auto;
  padding: 0 60px;
  box-sizing: border-box;
  max-width: 1320px;
  overflow: visible;
  text-align: center;
  line-height: 0;
  font-size: 0
}

body article#main section.products ul.list:after {
  content: '';
  display: block;
  float: none;
  clear: both
}

body article#main section.products ul.list li {
  padding: 0 40px;
  width: 33.3%;
  display: inline-block;
  box-sizing: border-box
}

body article#main section.products ul.list li img {
  width: 100%;
  height: auto
}

body article#main section.products ul.list li span.name {
  margin: 25px 0;
  display: block;
  text-align: center;
  font-family: 'Matter-Bold';
  font-size: 18px
}

body article#main section.products ul.list li a {
  margin: 0 auto;
  width: 153px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #000000;
  background: #000;
  font-family: 'Matter-Bold';
  font-size: 16px;
  color: #fff;
  transition: all 0.3s
}

body article#main section.products ul.list li a:hover {
  color: #000000;
  background: #ffffff
}

body article#main section.share {
  background: #f1f1eb;
  height: 306px;
  overflow: visible
}

body article#main section.share:after {
  content: '';
  display: block;
  float: none;
  clear: both
}

body article#main section.share:before {
  content: '';
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 106px 0 0 100vw;
  border-color: transparent transparent transparent #f1f1eb;
  position: absolute;
  top: -106px;
  left: 0;
  z-index: 1
}

body article#main section.share .sns_btn {
  padding: 84px 60px;
  margin: 0 auto;
  max-width: 1000px;
  overflow: hidden
}

body article#main section.share .sns_btn dl {
  width: 100%;
  position: relative
}

body article#main section.share .sns_btn dl dt {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Matter-Bold';
  font-size: 70px;
  font-weight: bold
}

body article#main section.share .sns_btn dl dd {
  margin: 0 auto;
  text-align: center;
  line-height: 0;
  font-size: 0
}

body article#main section.share .sns_btn dl dd a {
  margin: 0 10px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid #000000;
  background: #000000;
  line-height: 92px;
  text-align: center
}

body article#main section.share .sns_btn dl dd a img {
  width: auto;
  height: 24px
}

@media screen and (max-width: 1024px) {
  [capillary] .dylan-page.transform, [sfcc] .dylan-page.transform, .dylan-page.transform {
    will-change: initial;
    -webkit-transform: initial;
    transform: initial
  }
  [capillary] .dylan-page.transform.dylan-slideout, [sfcc] .dylan-page.transform.dylan-slideout, .dylan-page.transform.dylan-slideout {
    will-change: transform;
    -webkit-transform: translate3d(84%, 0, 0);
    transform: translate3d(84%, 0, 0)
  }
  [sfcc] .en-us .dylan-page.dylan-slideout {
    -webkit-transform: translate3d(calc(100% - 45px), 0, 0);
    transform: translate3d(calc(100% - 45px), 0, 0)
  }
  body article#main {
    margin-bottom: -50px;
    min-width: 320px
  }
  body article#main .scroll_icon {
    width: 14.4px;
    height: 77.6px;
    right: 12px;
    bottom: 12px
  }
  body article#main .shopBtn-container {
    width: 18.75vw;
    height: 18.75vw;
    position: absolute;
    top: 5.56vw;
    right: 3.47vw;
    z-index: 100
  }
  body article#main .shopBtn-container.fixed {
    position: fixed
  }
  body article#main .shopBtn-container a.shopBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    background: #000000;
    border: 2px solid #000000;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    z-index: 102;
    text-align: center;
    font-family: 'Matter-Bold'
  }
  body article#main .shopBtn-container a.shopBtn span {
    font-size: 4.17vw;
    padding-top: 1.39vw
  }
  body article#main .shopBtn-container a.shopBtn span br {
    display: inline
  }
  body article#main .shopBtn-container a.shopBtn:hover {
    color: #000000;
    background: #ffffff
  }
  body article#main section.hero {
    height: auto
  }
  body article#main section.hero .movie {
    padding-top: 56.25%;
    position: relative;
    width: 100%
  }
  body article#main section.hero .movie video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
  }
  body article#main section.ss2020 .bg, body article#main section.delegation_ex .bg, body article#main section.products .bg {
    padding: 0
  }
  body article#main section.ss2020 .movie_frame, body article#main section.delegation_ex .movie_frame, body article#main section.products .movie_frame {
    height: auto
  }
  body article#main section.ss2020 .movie_frame .movie, body article#main section.delegation_ex .movie_frame .movie, body article#main section.products .movie_frame .movie {
    padding-top: 56.25%;
    position: relative;
    width: 100%
  }
  body article#main section.ss2020 .movie_frame .movie video, body article#main section.delegation_ex .movie_frame .movie video, body article#main section.products .movie_frame .movie video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
  }
  body article#main section.ss2020 p.kv {
    margin-top: 2vw;
    margin-bottom: 5vw
  }
  body article#main section.ss2020 .colors {
    margin: 10vw auto 20vw auto
  }
  body article#main section.delegation_ex h2 {
    padding: 0 10vw;
    margin-bottom: 5vh
  }
  body article#main section.delegation_ex p.text {
    margin-bottom: 20vw;
    padding: 0 10vw;
    line-height: 180%;
    font-size: 4vw
  }
  body article#main section.products ul.list {
    margin: 20vw auto 30vw auto
  }
  body article#main section.products ul.list li {
    margin-bottom: 20vw;
    padding: 0;
    width: 100%;
    display: block
  }
  body article#main section.products ul.list li span.name {
    margin: 3vw 0 8vw 0;
    font-size: 5vw
  }
  body article#main section.products ul.list li a {
    width: 40vw;
    height: 12vw;
    font-size: 5vw
  }
  body article#main section.share {
    height: auto
  }
  body article#main section.share:before {
    border-width: 40px 0 0 100vw;
    top: -40px
  }
  body article#main section.share .sns_btn {
    padding: 8vw
  }
  body article#main section.share .sns_btn dl {
    margin-bottom: 10vw
  }
  body article#main section.share .sns_btn dl dt {
    margin-bottom: 3vw;
    position: static;
    text-align: center;
    font-size: 14vw
  }
  body article#main section.share .sns_btn dl dd a {
    margin: 0 2vw;
    width: 16vw;
    height: 16vw;
    line-height: 16vw
  }
  body article#main section.share .sns_btn dl dd a img {
    height: 6vw
  }
  .for_pc {
    display: none !important
  }
}

@media screen and (min-width: 1025px) {
  body article#main {
    margin-bottom: -50px;
    min-width: 320px
  }
  body article#main .shopBtn-container {
    width: 92px;
    height: 92px;
    position: fixed;
    top: 130px;
    right: 110px;
    z-index: 100
  }
  body article#main .shopBtn-container a.shopBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    background: #000000;
    border: 2px solid #000000;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    z-index: 102;
    text-align: center;
    font-family: 'Matter-Bold'
  }
  body article#main .shopBtn-container a.shopBtn span {
    font-size: 21px
  }
  body article#main .shopBtn-container a.shopBtn:hover {
    color: #000000;
    background: #ffffff
  }
  body article#main .movies .movie:not(.pc_none) {
    margin: auto;
    width: 50%;
    position: absolute;
    display: none
  }
  body article#main .movies .movie:not(.pc_none).show {
    display: block
  }
  body article#main .movies .movie:not(.pc_none) video {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%)
  }
  .for_sp {
    display: none !important
  }
}