@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* common */
#main-content {
  width: 100%;
  min-width: 1000px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.pc {
  display: block;
}

br.pc, span.pc {
  display: inline;
}

.sp, .sp-img {
  display: none !important;
}

.note {
  font-size: min(2.3vw, 11px);
}

sup {
  position: relative;
  top: -0.25em;
  vertical-align: super;
  font-size: max(40%, 8px);
  margin-right: 0.5em;
  white-space: nowrap;
}

@media only screen and (max-width: 640px) {
  #main-content {
    min-width: auto;
    font-size: 3.125vw;
    margin-bottom: 12.5vw;
  }

  .sp {
    display: block !important;
  }

  br.sp, span.sp {
    display: inline !important;
  }

  .pc, br.pc, span.pc {
    display: none;
  }
}
/* ttl-plus
------------------------------*/
.ttl-plus {
  position: relative;
  color: #046ac0;
  font-size: 16px;
  font-weight: 700;
  padding-left: 50px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.ttl-plus i {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  transform: translate(0, 0);
  width: 38px;
  height: 28px;
}
.ttl-plus i::before, .ttl-plus i::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-130%, -50%) rotate(45deg);
  background-color: #046ac0;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.ttl-plus i::before {
  width: 15px;
  height: 2px;
}
.active .ttl-plus i::before {
  transform: translate(-130%, -50%) rotate(135deg);
}
.ttl-plus i::after {
  width: 2px;
  height: 15px;
}
.active .ttl-plus i::after {
  transform: translate(-130%, -50%) rotate(-45deg);
}

.ttl-plus:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 640px) {
  .ttl-plus {
    font-size: 3.4375vw;
    padding-left: 9.375vw;
  }
  .ttl-plus i {
    width: 5.9375vw;
    height: 4.375vw;
  }
  .ttl-plus i::before {
    width: 2.34375vw;
  }
  .ttl-plus i::after {
    height: 2.34375vw;
  }
}
.ttl-plus2 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  margin: 80px auto 0;
  width: 100%;
  max-width: 640px;
  height: 100px;
  color: #046ac0;
  font-size: min(24px, 3.6vw);
  font-weight: 500;
  background: #fff;
  border: solid 2px #046ac0;
  border-radius: 100px;
  transition: all 0.5s;
}
@media only screen and (max-width: 640px) {
  .ttl-plus2 {
    height: 80px;
  }
}
.ttl-plus2 i {
  position: relative;
  content: "";
  margin-left: 0.2em;
  width: 28px;
  height: 28px;
}
.ttl-plus2 i::before, .ttl-plus2 i::after {
  position: absolute;
  content: "";
  top: 30%;
  left: 50%;
  transform: translate(-60%, 30%) rotate(45deg);
  background-color: #046ac0;
  -webkit-transition: transform 0.3s;
  transition: all 0.5s;
}
.ttl-plus2 i::before {
  width: 12px;
  height: 2px;
}
.active .ttl-plus2 i::before {
  transform: translate(-130%, -50%) rotate(135deg);
}
.ttl-plus2 i::after {
  width: 2px;
  height: 12px;
}
.active .ttl-plus2 i::after {
  transform: translate(-130%, -50%) rotate(-45deg);
}

.ttl-plus2:hover {
  background: #046ac0;
  color: #fff;
}
.ttl-plus2:hover i::before,
.ttl-plus2:hover i::after {
  background-color: #fff;
}

/* hero
------------------------------*/
#hero {
  position: relative;
  width: 100%;
  background-color: #fff;
}
#hero .hero-bg {
  width: 100%;
}
#hero .hero-bg img {
  width: 100%;
}
#hero .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
#hero .inner .text-01 {
  position: absolute;
  top: 73%;
  left: 9%;
  width: 60%;
}
@media only screen and (max-width: 640px) {
  #hero .inner .text-01 {
    top: 7.5%;
    left: 5.8%;
    width: 80%;
  }
}
#hero .inner img {
  width: 100%;
}
#hero .inner .info {
  display: inline-block;
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 1em 1.5em;
  z-index: 1;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
@media only screen and (max-width: 640px) {
  #hero .inner .info {
    bottom: 20px;
    right: 2.5%;
    width: 95%;
    padding: 1em 1.4em;
  }
}
#hero .inner .info p {
  color: #003a6b;
  font-size: min(2.5vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.1em;
}

/* concept
------------------------------*/
#concept {
  position: relative;
  padding-bottom: 140px;
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  #concept {
    padding-bottom: 0;
  }
}
#concept .inner {
  position: relative;
  padding: 100px 0;
  z-index: 2;
  width: 100%;
  background: url(../img/about_bg.jpg) no-repeat bottom center;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
  #concept .inner {
    padding-top: 60px;
  }
}
#concept .inner .message p {
  text-align: center;
  line-height: 2.7;
  font-size: min(16px, 3.2vw);
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 640px) {
  #concept .inner .message p {
    margin: 0 auto;
    width: 90%;
    line-height: 2;
  }
}
#concept .inner .message p.note {
  margin-top: 2em;
  color: #333;
  font-size: min(2.3vw, 11px);
  letter-spacing: 0.1em;
}

.features {
  margin: 120px auto 0;
  width: 90%;
  max-width: 1000px;
}
@media only screen and (max-width: 640px) {
  .features {
    margin: 60px auto 0;
  }
}
.features .features-nav {
  width: 100%;
  filter: drop-shadow(15px 15px 30px rgba(9, 69, 103, 0.3));
}
.features ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media only screen and (max-width: 640px) {
  .features ul {
    margin: 0 auto;
    width: 100%;
  }
}
.features li {
  width: 24%;
  filter: alpha(opacity=0);
  opacity: 0;
  transform: scale(1) translate(0, 60px);
  transition: opacity 1s, filter 1s, transform 1s;
  -webkit-transition: opacity 1s, filter 1s, transform 1s;
}
@media only screen and (max-width: 640px) {
  .features li {
    margin-top: 10px;
    width: 49%;
  }
}
.features.in-view li {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: scale(1) translate(0, 0);
}

/* cool-comfort
------------------------------*/
#cool-comfort {
  position: relative;
  overflow: hidden;
}
#cool-comfort .item {
  position: relative;
  padding-top: 240px;
}
#cool-comfort .item-title {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 700px;
  padding-top: 75px;
  padding-left: 85px;
  padding-right: 85px;
}
#cool-comfort .item-title .name {
  position: relative;
  z-index: 2;
}
#cool-comfort .item-title .poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
}
#cool-comfort .item-title .poster img {
  width: 100%;
  max-width: none;
}
#cool-comfort .item-bg {
  position: absolute;
  top: 100px;
  width: 1300px;
  height: 980px;
  background: url(../img/item_bg.jpg) no-repeat 50% 50%;
  background-size: 2000px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}
#cool-comfort .item-bg img {
  width: 100%;
  max-width: none;
}
#cool-comfort .item-image {
  position: absolute;
  z-index: 3;
}
#cool-comfort .item-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 4;
}
#cool-comfort .item-inner-txt {
  max-width: 460px;
}
#cool-comfort .item-inner-txt h3 {
  line-height: 1.6;
  font-size: 26px;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  color: #046ac0;
}
#cool-comfort .item-inner-txt p {
  line-height: 2;
  letter-spacing: 0.07em;
}
#cool-comfort .item-inner-txt p.note {
  margin-top: 3em;
  line-height: 1.6;
}
#cool-comfort .item-inner-list {
  margin-top: 100px;
}
#cool-comfort .item-inner-list ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#cool-comfort .item-inner-list ul li {
  width: calc(100% / 3);
  padding: 0 20px;
}
#cool-comfort .item-inner-list ul li:nth-child(-n+3) {
  margin-bottom: 50px;
}
#cool-comfort .item-inner-list ul li dl dd {
  margin-top: 20px;
}
#cool-comfort .item-inner-list ul li dl dd p {
  line-height: 1.8;
  letter-spacing: 0.07em;
}
#cool-comfort .item-inner-list ul li dl dd .figure {
  margin-top: 20px;
}
#cool-comfort .item-inner-list ul li dl dd .figure img {
  max-width: 100%;
}
#cool-comfort .item-color,
#cool-comfort .item-texture {
  position: relative;
  margin: 130px auto 0;
  width: 95%;
  max-width: 1000px;
  z-index: 5;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color,
#cool-comfort .item-texture {
    margin-top: 70px;
  }
}
#cool-comfort .item-color .inner,
#cool-comfort .item-texture .inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color .inner,
#cool-comfort .item-texture .inner {
    display: block;
    text-align: center;
  }
}
#cool-comfort .item-color h3,
#cool-comfort .item-texture h3 {
  display: inline-block;
  font-family: "Metropolis", YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background-color: #fff;
  background: #046ac0;
  border-radius: 5em;
  padding: 0.5em 1.2em;
  white-space: nowrap;
}
#cool-comfort .item-color h4,
#cool-comfort .item-texture h4 {
  font-family: "Metropolis", YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: 15px;
}
#cool-comfort .item-color p,
#cool-comfort .item-texture p {
  margin-top: 0.5em;
  font-size: min(2.8vw, 12px);
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
#cool-comfort .item-color ul,
#cool-comfort .item-texture ul {
  display: -ms-flexbox;
  display: flex;
  margin-left: 7%;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color ul,
#cool-comfort .item-texture ul {
    margin-top: 20px;
    margin-left: 0;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
#cool-comfort .item-color li,
#cool-comfort .item-texture li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color li,
#cool-comfort .item-texture li {
    -ms-flex-pack: center;
    justify-content: center;
  }
}
#cool-comfort .item-color li + li,
#cool-comfort .item-texture li + li {
  margin-left: 5%;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color li + li,
#cool-comfort .item-texture li + li {
    margin-top: 30px;
    margin-left: 0;
  }
}
#cool-comfort .item-color .color-ball,
#cool-comfort .item-texture .color-ball {
  flex-shrink: 0;
  width: 90px;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color .color-ball,
#cool-comfort .item-texture .color-ball {
    width: 22%;
  }
}
#cool-comfort .item-color .color-ball img,
#cool-comfort .item-texture .color-ball img {
  width: 100%;
}
#cool-comfort .item-color .texture-img,
#cool-comfort .item-texture .texture-img {
  margin-right: -20px;
  width: 210px;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-color .texture-img,
#cool-comfort .item-texture .texture-img {
    width: 40%;
  }
}
#cool-comfort .item-color .color-name,
#cool-comfort .item-color .texture-tx,
#cool-comfort .item-texture .color-name,
#cool-comfort .item-texture .texture-tx {
  margin-left: 1.5em;
}
#cool-comfort .item-color .color-name p,
#cool-comfort .item-color .texture-tx p,
#cool-comfort .item-texture .color-name p,
#cool-comfort .item-texture .texture-tx p {
  max-width: 400px;
  line-height: 1.4;
}
#cool-comfort .item-color .color-name p sup,
#cool-comfort .item-color .texture-tx p sup,
#cool-comfort .item-texture .color-name p sup,
#cool-comfort .item-texture .texture-tx p sup {
  white-space: nowrap;
}
#cool-comfort .item-color .color-name p .note,
#cool-comfort .item-color .texture-tx p .note,
#cool-comfort .item-texture .color-name p .note,
#cool-comfort .item-texture .texture-tx p .note {
  font-size: min(2.3vw, 11px);
}
#cool-comfort .item-information {
  position: relative;
  padding: 60px 0 100px;
  z-index: 10;
  text-align: center;
}
#cool-comfort .item-information .limited {
  display: inline-block;
  padding: 0.4em 0.6em 0.3em;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #046ac0;
  border: 1px solid #046ac0;
}
#cool-comfort .item-information .product-name {
  margin-top: 0.5em;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}
#cool-comfort .item-information .product-detail {
  text-align: center;
  margin-bottom: 1em;
}
#cool-comfort .item-information .product-tag {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#cool-comfort .item-information .product-tag ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}
#cool-comfort .item-information .product-tag li {
  color: #046ac0;
  background-color: #fff;
  border: 1px solid #046ac0;
  border-radius: 2em;
  padding: 0.3em 1.5em 0.2em;
}
#cool-comfort .item-information .product-tag li:not(:last-of-type) {
  margin-right: 5px;
}
#cool-comfort .item-information .product-tag li span {
  font-size: 70%;
}
#cool-comfort .item-information .product-tag ul + ul {
  margin-top: 6px;
}
@media only screen and (max-width: 640px) {
  #cool-comfort .item-information .product-tag ul + ul {
    margin-top: 5px;
  }
}
#cool-comfort .item-information .product-links {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: flex-end;
  align-items: end;
  margin-top: 35px;
  margin-bottom: 20px;
}
#cool-comfort .item-information .product-links li:not(:last-of-type) {
  margin-right: 15px;
}
#cool-comfort .item-information .product-links .btn-link a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  width: 222px;
  height: 60px;
  border-width: 1px;
  border-style: solid;
  letter-spacing: 0.05em;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#cool-comfort .item-information .product-links .btn-link.buy a {
  color: #fff;
  border-color: #60caf1;
  background: linear-gradient(to right, #00c2e3 0%, #0057ac 40%, #60caf1 100%);
}
#cool-comfort .item-information .product-links .btn-link.buy a:hover {
  color: #fff;
  background: #046ac0;
  border-color: #046ac0;
}
#cool-comfort .item-information .product-links .btn-link.buy-soldout {
  pointer-events: none;
}
#cool-comfort .item-information .product-links .btn-link.detail a, #cool-comfort .item-information .product-links .btn-link.shop a {
  color: #046ac0;
  border-color: #046ac0;
  background-color: #fff;
}
#cool-comfort .item-information .product-links .btn-link.detail a:hover, #cool-comfort .item-information .product-links .btn-link.shop a:hover {
  color: #fff;
  background-color: #046ac0;
}
#cool-comfort .item-information .product-links .comingsoon a {
  opacity: 0.5;
  pointer-events: none;
}
#cool-comfort .item-information .product-links li p {
  text-align: center;
  color: #046ac0;
  letter-spacing: 0.05em;
  padding: 0 0 0.5em;
}
#cool-comfort .item-information .product-note {
  line-height: 2em;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
}

#cream .item-title,
#bbcream .item-title {
  left: calc(50% - 40px);
}
#cream .item-bg,
#bbcream .item-bg {
  right: calc(50% - 600px);
}
#cream .item-inner-txt,
#bbcream .item-inner-txt {
  padding: 0 20px;
}

#powder .item-title,
#gel .item-title {
  right: calc(50% - 40px);
}
#powder .item-title .name,
#gel .item-title .name {
  text-align: right;
}
#powder .item-bg,
#gel .item-bg {
  left: calc(50% - 600px);
}
#powder .item-inner-txt,
#gel .item-inner-txt {
  padding: 0 25px;
  margin-left: auto;
  margin-right: 0;
}

@media only screen and (max-width: 640px) {
  #cool-comfort .item {
    padding-top: 0;
  }
  #cool-comfort .item-title {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 95vw;
    height: 100vw;
    padding-top: 9.375vw;
    padding-left: 8.59375vw;
    padding-right: 5.15625vw;
  }
  #cool-comfort .item-title .poster {
    width: 100%;
    height: 100%;
  }
  #cool-comfort .item-bg {
    top: calc(100vw + 10px);
    height: 300vw;
    border-radius: 0;
    background-position: -100% 0%;
    background-size: 70%;
  }
  #cool-comfort .item-inner {
    width: 85%;
    max-width: none;
  }
  #cool-comfort .item-inner-txt {
    margin-bottom: 15vw;
  }
  #cool-comfort .item-inner-txt h3 {
    font-size: 3.8vw;
    line-height: 1.6;
  }
  #cool-comfort .item-inner-txt h3.tight {
    letter-spacing: 0em;
  }
  #cool-comfort .item-inner-txt p {
    line-height: 2em;
    font-size: 3vw;
  }
  #cool-comfort .item-inner-txt p.note {
    font-size: 2.3vw;
  }
  #cool-comfort .item-inner-list {
    margin-top: 50px;
  }
  #cool-comfort .item-inner-list ul {
    display: block;
    width: 81.25vw;
    margin: 0 auto;
  }
  #cool-comfort .item-inner-list ul li {
    width: 100%;
    padding: 0;
  }
  #cool-comfort .item-inner-list ul li:nth-child(-n+3), #cool-comfort .item-inner-list ul li:not(:last-of-type) {
    margin-bottom: 6.25vw;
  }
  #cool-comfort .item-inner-list ul li dl dd {
    margin-top: 3.125vw;
  }
  #cool-comfort .item-inner-list ul li dl dd p {
    font-size: 3vw;
  }
  #cool-comfort .item-inner-list ul li dl dd .figure {
    margin-top: 3.125vw;
  }
  #cool-comfort .item-inner-list ul li dl dd .figure img {
    width: 100%;
  }
  #cool-comfort .item-inner-list .ttl-plus {
    padding-left: 9.375vw;
  }
  #cool-comfort .item-information {
    padding: 15vw 0 20vw;
    padding: 15vw 0 5vw;
  }
  #cool-comfort .item-information .product-name {
    font-size: 4.0625vw;
    margin-bottom: 1.5625vw;
  }
  #cool-comfort .item-information .product-detail {
    font-size: 3vw;
    margin-bottom: 3.125vw;
  }
  #cool-comfort .item-information .product-tag li {
    font-size: 2.4vw;
    padding: 0.2em 1em 0.35em;
  }
  #cool-comfort .item-information .product-tag li sup {
    font-size: 5.6px;
  }
  #cool-comfort .item-information .product-tag li:not(:last-of-type) {
    margin-right: 0.78125vw;
  }
  #cool-comfort .item-information .product-links {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 7.8125vw;
    margin-bottom: 6.25vw;
  }
  #cool-comfort .item-information .product-links li:not(:last-of-type) {
    margin-right: 0;
  }
  #cool-comfort .item-information .product-links .btn-link a {
    margin: 1vw;
    width: 46vw;
    font-size: 3.125vw;
    padding: 0.85em 0;
  }
  #cool-comfort .item-information .product-links .buy a {
    width: 94vw;
  }
  #cool-comfort .item-information .product-links li p {
    font-size: 2.8125vw;
  }
  #cool-comfort .item-information .product-note {
    width: 81.25vw;
    line-height: 1.7em;
    text-align: left;
    font-size: 2.1875vw;
    margin: 0 auto;
  }

  #cream .item-title,
#bbcream .item-title {
    left: 0;
    margin-bottom: 10vw;
  }
  #cream .item-bg,
#bbcream .item-bg {
    right: auto;
    left: 0;
  }
  #cream .item-inner-txt,
#bbcream .item-inner-txt {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  #powder .item-title,
#gel .item-title {
    right: auto;
    left: 0;
    margin-bottom: 10vw;
  }
  #powder .item-bg,
#gel .item-bg {
    right: auto;
    left: 0;
    top: 100vw;
  }
  #powder .item-inner-txt,
#gel .item-inner-txt {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}
/* toggle-button
------------------------------*/
.toggle-button {
  cursor: pointer;
}

.toggle-content {
  display: none;
}

/* popup
------------------------------*/
.overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background: rgba(209, 230, 237, 0.797);
  opacity: 0;
  transition: opacity 0.5s;
}
.overlay.active {
  visibility: visible;
  opacity: 1;
}

.popup {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 95%;
  max-width: 1100px;
  background: #fff;
  z-index: 100;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s 0.5s ease-out;
}
.popup.active {
  visibility: visible;
  opacity: 1;
}
.popup .inner {
  position: relative;
  padding: 100px 150px;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.popup .title {
  line-height: 1.5em;
  color: #046ac0;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}
.popup .explanation p {
  line-height: 2.28em;
  letter-spacing: 0.07em;
}
.popup .explanation p:not(:last-of-type) {
  margin-bottom: 1.5em;
}
.popup .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 86px;
}
.popup .btn-close a {
  transition: opacity 0.3s;
}
.popup .btn-close a:hover {
  opacity: 0.5;
}

@media only screen and (max-width: 640px) {
  .popup {
    top: 80px;
    left: 50%;
    height: calc(100vh - 120px);
    overflow: hidden;
    transform: translate(-50%, 0);
  }
  .popup .inner {
    padding: 9vw 10.9375vw;
  }
  .popup .title {
    line-height: 1.6em;
    font-size: 4.6875vw;
  }
  .popup .explanation p {
    line-height: 1.8em;
    font-size: 2.8125vw;
    letter-spacing: 0.06em;
  }
}
@media only screen and (max-width: 640px) {
  .popup .btn-close {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
  }
}
/* Effect
------------------------------*/
.fadein-up {
  filter: alpha(opacity=0);
  opacity: 0;
  transform: scale(1) translate(0, 60px);
  transition: opacity 1s, filter 1s, transform 1s;
  -webkit-transition: opacity 1s, filter 1s, transform 1s;
}

.in-view .fadein-up {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: scale(1) translate(0, 0);
}

.fadein {
  filter: alpha(opacity=0);
  opacity: 0;
  transition: opacity 1s, filter 1s;
  -webkit-transition: opacity 1s, filter 1s;
}

.in-view .fadein {
  filter: alpha(opacity=100);
  opacity: 1;
}

/* scale-in */
.scale-in {
  opacity: 0;
  transform: scale(1) translate(0, 0);
  transition: 1s;
  -webkit-transition: 1s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  filter: blur(10px);
}

.in-view .scale-in {
  opacity: 1;
  transform: scale(1) translate(0, 0);
  -webkit-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  animation: bright 3s 0s cubic-bezier(0.19, 1, 0.22, 1);
}

/* fx-bright */
.fx-bright {
  opacity: 0;
  transform: translateY(20%) perspective(400px) rotateY(20deg);
  transition: opacity, transform;
  transition-delay: 1.5s;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.in-view .fx-bright {
  opacity: 1;
  transform: translateY(0) perspective(400px) rotateY(0deg) skewX(0);
  animation: bright 1.5s 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes bright {
  0% {
    filter: brightness(200%) blur(50px);
  }
  100% {
    filter: brightness(100%) blur(0);
  }
}
/* delay */
.delay-none {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

.delay01s {
  transition-delay: 0.1s !important;
  animation-delay: 0.1s !important;
}

.delay02s {
  transition-delay: 0.2s !important;
  animation-delay: 0.2s !important;
}

.delay03s {
  transition-delay: 0.3s !important;
  animation-delay: 0.3s !important;
}

.delay04s {
  transition-delay: 0.4s !important;
  animation-delay: 0.4s !important;
}

.delay05s {
  transition-delay: 0.5s !important;
  animation-delay: 0.5s !important;
}

.delay06s {
  transition-delay: 0.6s !important;
  animation-delay: 0.6s !important;
}

.delay07s {
  transition-delay: 0.7s !important;
  animation-delay: 0.7s !important;
}

.delay08s {
  transition-delay: 0.8s !important;
  animation-delay: 0.8s !important;
}

.delay09s {
  transition-delay: 0.9s !important;
  animation-delay: 0.9s !important;
}

.delay10s {
  transition-delay: 1s !important;
  animation-delay: 1s !important;
}

.delay12s {
  transition-delay: 1.2s !important;
  animation-delay: 1.2s !important;
}

.delay14s {
  transition-delay: 1.4s !important;
  animation-delay: 1.4s !important;
}

.delay16s {
  transition-delay: 1.6s !important;
  animation-delay: 1.6s !important;
}

.delay18s {
  transition-delay: 1.8s !important;
  animation-delay: 1.8s !important;
}

.sns {
  margin-top: 100px;
}

/* banner
----------------------------------------------------*/
.banners {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 50px;
}
@media only screen and (max-width: 640px) {
  .banners {
    margin-top: 0;
  }
}

.banner {
  position: relative;
  margin: 0 20px;
  width: 90%;
  max-width: 600px;
}
@media only screen and (max-width: 640px) {
  .banner {
    margin: 20px auto 0;
  }
}
.banner a {
  transition: opacity 0.15s ease;
}
.banner a:hover {
  opacity: 0.7;
}

.banner.comingsoon a {
  pointer-events: none;
}
.banner.comingsoon::after {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  content: "COMING SOON";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "Metropolis", YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: min(5.5vw, 30px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(180, 180, 180, 0.6);
}

.banner.soldout a {
  pointer-events: none;
}
.banner.soldout::after {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  content: "SOLD OUT";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: min(6vw, 36px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(180, 180, 180, 0.6);
}

/*# sourceMappingURL=style.css.map */