@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
}

#header {
  transform: translateY(-100%) !important;
  transition: .5s;
}

#header.down-move {
  transform: translateY(0) !important;
}

#Wrap {
  padding-top: 0;
}

#Wrap,
.wrapTop,
.wrapBottom {
  width: 100%;
}

#Contents {
  padding-top: 0;
}

#Header,
#Foot {
  width: 1000px;
  margin: 0 auto;
}

#FooterWrap {
  position: relative;
  z-index: 50;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: .04em;
}

.LP_page {
  position: relative;
  z-index: 1;
  color: #333;
  font-family:  Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", 'Noto Sans JP', Roboto, "Droid Sans", YuGothic, "游ゴシック", Meiryo, "メイリオ", Verdana;
  overflow: hidden;
  opacity: 0;
  animation: mvfade 2s forwards;
}

@keyframes mvfade {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.LP_page::after {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../img/bg_001.jpg) center center / cover no-repeat;
  content: "";
}

.LP_page picture,
.LP_page a {
  display: block;
}

.LP_page a {
  transition: opacity .3s;
}

.LP_page a:hover {
  opacity: .6;
}

.LP_page img {
  width: 100%;
  height: auto;
}

.sec_inner {
  width: 100rem;
  margin: 0 auto;
}

.sec-ttl.txt_en {
  font-weight: normal;
  font-size: 5rem;
  line-height: 1;
  text-align: center;
  color: #7BB4B0;
}

.character {
  position: absolute;
  opacity: 0;
  transform: translateX(-20px);
  transition: 1s;
}

.character.active {
  opacity: 1;
  transform: translateX(0);
}

.character.following {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 12.53rem;
  margin-right: 3.5rem;
  transform: translate(0, -105%);
  transition: 2s;
}

.character.following.down-move {
  transform: translate(0, 0);
}

.character.following img {
  animation: float1 4s ease-in-out infinite alternate;
}

@keyframes float1 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0);
  }
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  position: relative;
  font-family: "fot-matisse-pron", sans-serif;
}

.scrl-arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  margin-bottom: 10rem;
  font-size: 2rem;
  transition: 1s;
  pointer-events: none;
}

.scrl-arrow.arrow-hidden {
  opacity: 0;
}

.scrl-arrow::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, 0);
  width: 1px;
  height: 10rem;
  margin-bottom: 4rem;
  background: #333;
  content: "";
  animation: arrow-anime1 2s ease-in-out infinite;
}

@keyframes arrow-anime1 {
  0% {
    transform: translate(-50%, 0) scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: translate(-50%, 0) scaleY(100%);
    transform-origin: top;
  }

  50.1% {
    transform-origin: bottom;
  }

  100% {
    transform: translate(-50%, -6px) scaleY(0);
    transform-origin: bottom;
  }
}

.scrl-arrow::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0) rotate(45deg);
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  width: 2rem;
  height: 2rem;
  margin-bottom: 4.8rem;
  content: "";
  animation: arrow-anime2 2s ease-in-out infinite;
}

@keyframes arrow-anime2 {
  0% {
    transform: translate(-50%, 0) rotate(45deg);
  }

  50% {
    transform: translate(-50%, 6px) rotate(45deg);
  }

  100% {
    transform: translate(-50%, 0) rotate(45deg);
  }
}

.cloud-anima_wrap {
  position: relative;
  z-index: 10;
  width: 100vw;
}

.cloud_wrap.normal-fade {
  position: absolute;
  top: -10px;
  width: 100vw;
  z-index: 2;
  mix-blend-mode: screen;
}

.cloud_wrap .cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cloud_wrap .cloud img {
  height: 100vh;
}

.cloud_wrap .cloud-top {
  background: url(../img/deco_021.png) center center / cover no-repeat;
}

.cloud_wrap .cloud-left {
  background: url(../img/deco_022.png) center center / cover no-repeat;
}

.cloud_wrap .cloud-right {
  background: url(../img/deco_023.png) center center / cover no-repeat;
}

.cloud_wrap.normal-fade .cloud {
  transition: 1.5s;
}

.cloud_wrap.normal-fade .cloud-top.drain-up {
  transform: translateY(-100%);
  animation: drain 1.5s forwards;
}

.cloud_wrap.normal-fade .cloud-left.drain-left {
  transform: translateX(-100%);
  transition-delay: .3s;
  animation: drain 1.5s .3s forwards;
}

.cloud_wrap.normal-fade .cloud-right.drain-right {
  transform: translateX(100%);
  transition-delay: .6s;
  animation: drain 1.5s .6s forwards;
}

@keyframes drain {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.cloud-overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
}

.cloud-overlap .for-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(../img/bg_001.jpg) center center / cover no-repeat;
}

.mv_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(40 * (100vw / 1400));
  height: 100vh;
}

.mv_wrap .mv {
  position: relative;
  width: calc(750 * (100vw / 1400));
  margin-left: calc(90 * (100vw / 1400));
}

.Copyright {
  width: calc(160 * (100vw / 1400));
}

.logo.Disney {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(120 * (100vw / 1400));
}

.mv_wrap .txt_wrap {
  margin-top: calc(20 * (100vw / 1400));
  padding-right: calc(122 * (100vw / 1400));
}

.logo_wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(35 * (100vw / 1400));
}

.logo.Mitea {
  position: relative;
  z-index: 1;
  width: calc(120 * (100vw / 1400));
}

.logo.Mitea::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(220 * (100vw / 1400));
  height: calc(110 * (100vw / 1400));
  margin: calc(-40 * (100vw / 1400)) 0 0 calc(-40 * (100vw / 1400));
  background: url(../img/deco_007.png) center center / cover no-repeat;
  content: "";
}

.logo.cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(190 * (100vw / 1400));
  height: calc(100 * (100vw / 1400));
  margin: calc(-50 * (100vw / 1400)) 0 0 calc(-50 * (100vw / 1400));;
  mix-blend-mode: screen;
}

.main-ttl {
  margin: 0 auto calc(20 * (100vw / 1400));
  font-weight: normal;
  font-size: calc(32 * (100vw / 1400));
  line-height: 1;
  text-align: center;
  width: max-content;
}

.main-ttl .txt_S {
  display: block;
  font-size: calc(18 * (100vw / 1400));
}

.main-ttl .txt_S.bg_Y {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * (100vw / 1400));
  height: calc(30 * (100vw / 1400));
  margin: 0 auto calc(25 * (100vw / 1400));
  background: #FDF8C8;
}

.main-ttl .txt_M {
  display: block;
  margin-bottom: calc(14 * (100vw / 1400));
  font-size: calc(24 * (100vw / 1400));
}

.main-ttl .txt_L {
  display: block;
  line-height: 1.5;
}

.schedule-list {
  width: calc(400 * (100vw / 1400));
  margin: 0 auto calc(18 * (100vw / 1400));
}

.schedule-list li {
  display: flex;
  align-items: center;
  border-top: dashed 1px #87B2B0;
  height: calc(38 * (100vw / 1400));
  font-size: calc(15 * (100vw / 1400));
}

.schedule-list li:nth-last-of-type(1) {
  border-bottom: dashed 1px #87B2B0;
}

.schedule-list .date {
  width:calc(156 * (100vw / 1400));
}

.mv_area .notes {
  width: calc(400 * (100vw / 1400));
  margin: 0 auto calc(20 * (100vw / 1400));
  font-size: calc(10 * (100vw / 1400));
  line-height: 1.5;
  white-space: nowrap;
}
/*-----------------------------mv*/

/*concept------------------------*/
.main-concept_area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.main-concept {
  font-family: "fot-matisse-pron", sans-serif;
  font-size: 2.2rem;
  line-height: 2.2;
  text-align: center;
}
/*------------------------concept*/

/*new-itms-----------------------*/
/*first-------------*/
.each-new-itms {
  position: relative;
}

.each-new-itms.first {
  padding-bottom: 26rem;
}

.each-new-itms .sec_inner {
  position: relative;
}

.each-new-itms .sec_inner.new-itm_wrap {
  display: flex;
  align-items: center;
}

.each-new-itms.first .sec_inner.new-itm_wrap {
  margin-bottom: 8rem;
}

.flex-box {
  display: flex;
  align-items: center;
}

.each-new-itms.first .flex-box {
  gap: 8.2rem;
}

.each-new-itms.first .new-itm_wrap .itm-img {
  display: flex;
  justify-content: center;
  border-radius: 5rem;
  width: 40rem;
  margin-left: -.5rem;
  padding: 6.5rem 0;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 10px #00000029;
}

.each-new-itms.first .new-itm_wrap .itm-img .inner {
  transform: rotate(10deg);
}

.each-new-itms.first .itm-img img {
  width: 16rem;
  animation: float1 8s ease-in-out infinite alternate;
}

.each-new-itms .txt_wrap {
  position: relative;
  margin-top: -1rem;
}

.each-new-itms .new-itm_wrap .sec-ttl {
  margin-bottom: 5rem;
  font-family: "fot-matisse-pron", sans-serif;
  font-weight: normal;
  font-size: 3.3rem;
  line-height: 1.75;
}

.each-new-itms .itm-name {
  margin-bottom: 3rem;
  font-size: 2.2rem;
  line-height: 1;
}

.txt_en {
  font-family: Optima, 'Marcellus', Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
}

.each-new-itms .itm-name .txt_en {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  color: #F0B536;
}

.each-new-itms .itm-price {
  margin-bottom: 2.5rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.each-new-itms .itm-price .txt_S {
  font-size: 1.2rem;
}

.btn_inner {
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.btn_inner::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 1.478rem;
  height: 1px;
  margin-right: 2rem;
  background: #fff;
  content: "";
  transition: .3s;
}

.btn_inner:hover::before {
  transform: translate(1rem, -50%);
}

.btn_inner::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%) rotate(45deg);
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  width: .8rem;
  height: .8rem;
  margin-right: 2rem;
  content: "";
  transition: .3s;
}

.btn_inner:hover::after {
  transform: translate(1rem, -50%) rotate(45deg);
}

.itm-btn {
  margin-bottom: 1rem;
}

.itm-btn .btn_inner {
  border-radius: 10rem;
  width: 30rem;
  height: 5.5rem;
  background: linear-gradient(to right, #74B5BA, #73B28E);
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
}

.each-new-itms.first .character {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18rem;
  margin: 0 -3.5rem -3.5rem 0;
}

.features_area {
  position: relative;
  height: 46rem;
  overflow: hidden;
}

.features_area.open {
  height: auto;
  overflow: visible;
}

.features_area::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 23rem;
  background: linear-gradient(transparent, #fff);
  content: "";
}

.features_area.open::before {
  display: none;
}


.open-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  margin-bottom: 3rem;
  transition: .3s;
}

.features_area.open .open-btn {
  display: none;
}

.open-btn .btn_inner {
  border: solid 1px #87B2B0;
  border-radius: 10rem;
  width: 30rem;
  height: 5.5rem;
  background: #fff;
  font-size: 1.5rem;
  color: #7BB4B0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
  transition: .3s;
}

.open-btn .btn_inner:hover {
  background: #7BB4B0;
  color: #fff;
  opacity: 1 !important;
}

.open-btn .btn_inner::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 1.6rem;
  margin-right: 2.7rem;
  background: #7BB4B0;
  content: "";
}

.open-btn .btn_inner:hover::before {
  background: #fff;
}

.open-btn .btn_inner::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: none;
  width: 1.6rem;
  height: 1px;
  margin-right: 2rem;
  background: #7BB4B0;
  content: "";
}

.open-btn .btn_inner:hover::after {
  background: #fff;
}

.point-list .point-dtl {
  padding-bottom: 4rem;
  background: #fff;
}

.point-list .point-dtl:nth-of-type(n+2) {
  margin-top: 6rem;
}

.point-list .sec-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  margin-bottom: 2rem;
  background: #FDFADF;
  font-size: 2rem;
}

.point-list .sec-ttl .txt_L {
  font-size: 2.8rem;
}

.point-list .lead {
  position: relative;
  margin-bottom: 2.2rem;
  padding-bottom: 3.5rem;
  font-family: "fot-matisse-pron", sans-serif;
  font-size: 2.2rem;
  line-height: 1.75;
  text-align: center;
  color: #7BB4B0;
}

.point-list .lead sup {
  font-size: 1.1rem;
}

.point-list .lead::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 84rem;
  height: .4rem;
  background: url(../img/deco_011.svg) center center / cover no-repeat;
  content: "";
}

.each-point-dtl {
  padding: 0 0 0 8rem;
}

.each-point-dtl dt {
  width: 84rem;
  margin-bottom: 1.8rem;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.5;
  text-align: center;
}

.each-point-dtl dd {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.essence-img {
  width: 30rem;
}

.component-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  row-gap: 2rem;
  flex: 1;
  padding-bottom: 4.3rem;
}

.component-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.component-list li:nth-last-of-type(1) {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  margin-left: -4.5rem;
  font-family: Optima, 'Marcellus', Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
  font-size: 1.6rem;
  color: #7BB4B0;
}

.component-img {
  border-radius: 20rem;
  width: 11rem;
  height: 11rem;
  overflow: hidden;
}

.component-name {
  width: 15rem;
  font-size: 1.3rem;
  line-height: 1.75;
}

.mechanism-list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 7rem;
  width: 84rem;
  margin-bottom: 2.5rem;
  padding-bottom: 4rem;
}

.mechanism-list::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 84rem;
  height: .4rem;
  background: url(../img/deco_011.svg) center center / cover no-repeat;
  content: "";
}

.mechanism-list li {
  position: relative;
}

.mechanism-list li::before {
  position: absolute;
  top: 0;
  right: 0;
  border-top: solid 1.6rem transparent;
  border-bottom: solid 1.6rem transparent;
  border-left: solid 2rem #B4DAE3;
  margin: 8.4rem -5rem 0 0;
  content: "";
}

.mechanism-list li:nth-last-of-type(1)::before {
  display: none;
}

.mechanism-list li:nth-of-type(1) {
  width: 25.537rem;
}

.mechanism-list li:nth-of-type(2) {
  width: 16.138rem;
}

.mechanism-list li:nth-of-type(3) {
  width: 16.847rem;
}

.washing-img {
  margin-bottom: 1.2rem;
}

.washing-purpose {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rem;
  width: 10rem;
  height: 2.4rem;
  margin: 0 auto .8rem;
  background: #B4DAE3;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: #fff;
}

.mechanism-list li:nth-of-type(1) .washing-purpose {
  margin-left: 10.6rem;
}

.washing-purpose-dtl {
  font-size: 1.3rem;
  line-height: 1.48;
  text-align: center;
}

.washing-purpose-dtl sup {
  font-size: 1rem;
}

.mechanism-list li:nth-of-type(1) .washing-purpose-dtl {
  width: 19.5rem;
  margin: 0 0 0 auto;
}

.mechanism-list li:nth-of-type(2) .washing-purpose-dtl {
  width: 40.4rem;
  margin-right: -24.3rem;
}

.clay-list {
  display: flex;
  justify-content: center;
  gap: 6rem;
  width: 84rem;
}

.clay-list li {
  width: 31rem;
}

.clay-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  margin-bottom: 2rem;
  background: #E9F8E2;
  font-size: 1.4rem;
}

.clay-img_wrap {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.clay-img {
  border-radius: 20rem;
  width: 11rem;
  height: 11rem;
  overflow: hidden;
}

.clay-explanation {
  font-size: 1.3rem;
  line-height: 1.75;
}

.clay-explanation .underline {
  background: #FDF8C8;
  font-weight: 600;
}

.each-new-itms.first .notes {
  padding-top: 2rem;
  font-size: 1rem;
  color: #939393;
}
/*-------------first*/

/*second------------*/
.each-new-itms.second {
  padding-bottom: 10rem;
}

.each-new-itms.second .flex-box {
  gap: 8.2rem;
}

.each-new-itms.second .sec_inner.new-itm_wrap {
  margin-bottom: 10rem;
}

.each-new-itms.second .itm-img_wrap {
  display: flex;
  justify-content: center;
  border-radius: 5rem;
  width: 40rem;
  margin-left: 2.7rem;
  padding: 5.2rem 0;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 10px #00000029;
}

.each-new-itms.second .new-itm_wrap .itm-img {
  width: 14.65rem;
  animation: float1 8s ease-in-out infinite alternate;
}

.each-new-itms.second .new-itm_wrap .itm-img small{
  display: block;
  margin-top: 1rem;
  font-size: 1rem;
  color: #bfbfbf;
}

.each-new-itms.second .new-itm_wrap .itm-img:nth-of-type(1) small{
  transform: translateX(-10%);
}

.each-new-itms.second .new-itm_wrap .itm-img:nth-of-type(2) {
  margin: 9.5rem 0 0 -1.5rem;
  animation: float2 6s ease-in-out infinite alternate;
}

@keyframes float2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.each-new-itms.second .character {
  bottom: 0;
  right: 0;
  width: 10rem;
  margin: 0 1.5rem -.2rem 0;
}

.new-color-dtl_wrap {
  position: relative;
  border-radius: 2rem;
  margin-bottom: 8rem;
  padding: 6rem 6rem 6rem 8rem;
  background: #fff;
}

.new-color-dtl_wrap dt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -1.5rem;
  font-size: 3.6rem;
  line-height: 1;
  color: #678B91;
  opacity: .3;
}

.new-color-list {
  display: flex;
  gap: 7.8rem;
}

.new-color-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.new-color-list li:nth-of-type(2)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: .4rem;
  height: 11.2rem;
  margin-left: -3.3rem;
  background: url(../img/deco_012.svg) center center / cover no-repeat;
  content: "";
}

.new-color-list .color-img {
  width: 17.9rem;
}

.new-color-list .color-img small{
  width: 5rem;
  aspect-ratio: 1/1;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 2;
}

.new-color-list .color-img small.yellow{
  background-color: #f2ebb3;
}

.new-color-list .color-img small.blue{
  background-color: #cde5ea;
}

.new-color-list .color-name {
  margin-bottom: .5rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.new-color-list .color-name .txt_S {
  font-size: 1.3rem;
}

.new-color-list .color-caption {
  font-size: 1.2rem;
  line-height: 1.75;
}

.color-dtl_wrap {
  margin-bottom: 6rem;
  text-align: center;
}

.color-dtl-ttl {
  font-family: "fot-matisse-pron", sans-serif;
  font-size: 2.7rem;
  line-height: 1.8;
  text-align: center;
}

.blue-line {
  display: inline-block;
  background: linear-gradient(to bottom, transparent 60%, #CEEBF2 0%);
  line-height: 1.4;
}

.color-dtl-ttl .txt_L {
  display: block;
  margin-top: .5rem;
  font-size: 4rem;
}

.color-dtl_wrap .lead {
  margin: 4rem 0 7rem;
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
}

.existing-color_wrap dt {
  position: relative;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: 2rem;
  color: #7BB4B0;
  text-align: center;
}

.existing-color_wrap dt::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 42rem;
  height: .3rem;
  background: url(../img/deco_013.svg) center center / cover no-repeat;
  content: "";
}

.existing-color_wrap dt::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 42rem;
  height: .3rem;
  background: url(../img/deco_013.svg) center center / cover no-repeat;
  content: "";
}

.existing-color-list {
  display: flex;
  justify-content: space-between;
  padding: 0 .5rem;
}

.existing-color-list li {
  display: flex;
}

.existing-color-list li .itm-img {
  width: 19rem;
  margin-right: -4rem;
}

.existing-color-list li:nth-of-type(2) .itm-img {
  margin: 0 -6rem 0 .5rem;
}

.existing-color-list li .txt_wrap {
  position: relative;
  z-index: 2;
  margin-top: 12.6rem;
}

.existing-color-list li .itm-name {
  margin-bottom: .2rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.existing-color-list li .itm-name .txt_S {
  display: block;
  font-size: 1.3rem;
}

.existing-color-list li .itm-caption {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.75;
}

.existing-color-list li .itm-btn .btn_inner {
  width: 16rem;
  height: 3.6rem;
  font-weight: 600;
  font-size: 1.3rem;
}

.existing-color-list li .itm-btn .btn_inner::before {
  width: 1.4rem;
  margin-right: 1.2rem;
}

.existing-color-list li .itm-btn .btn_inner:hover::before {
  transform: translate(.5rem, -50%);
}

.existing-color-list li .itm-btn .btn_inner::after {
  margin-right: 1.2rem;
}

.existing-color-list li .itm-btn .btn_inner:hover::after {
  transform: translate(.5rem, -50%) rotate(45deg);
}

.color-chart_wrap {
  position: relative;
  border-radius: 2rem;
  padding: 4rem 0 6rem;
  background: #fff;
}

.color-chart_wrap dt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -1.5rem;
  font-size: 3.6rem;
  line-height: 1;
  color: #678B91;
  opacity: .3;
  white-space: nowrap;
}

.color-chart_wrap dd {
  position: relative;
  z-index: 1;
  width: 58.3rem;
  height: 30.9rem;
  margin: 0 auto;
}

.color-chart_wrap dd::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: 44rem;
  height: 24rem;
  background: url(../img/bg_002.png) center center / cover no-repeat;
  content: "";
}

.color-chart_wrap .matrix-base::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 24rem;
  background: #5F5E5E;
  content: "";
}

.color-chart_wrap .matrix-base::after {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44.461rem;
  height: 1px;
  background: #5F5E5E;
  content: "";
}

.color-chart_wrap .matrix-base p {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #707070;
  width: 6rem;
  height: 2.4rem;
  font-size: 1.3rem;
  letter-spacing: 0;
  color: #5F5E5E;
}

.color-chart_wrap .matrix-base p:nth-of-type(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.color-chart_wrap .matrix-base p:nth-of-type(2) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.color-chart_wrap .matrix-base p:nth-of-type(3) {
  top: 53%;
  left: 0;
  transform: translateY(-50%);
}

.color-chart_wrap .matrix-base p:nth-of-type(4) {
  top: 53%;
  right: 0;
  transform: translateY(-50%);
}

.each-color-list li {
  position: absolute;
  width: 12rem;
}

.each-color-list li:nth-of-type(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.each-color-list li:nth-of-type(2) {
  bottom: 0;
  left: 0;
  margin: 0 0 2.6rem 7.9rem;
}

.each-color-list li:nth-of-type(3) {
  bottom: 0;
  right: 0;
  margin: 0 7.9rem 2.6rem 0;
}

.each-color-list li:nth-of-type(4) {
  top: 0;
  left: 0;
  margin: 2.6rem 0 0 7.9rem;
}

.each-color-list li:nth-of-type(5) {
  top: 0;
  right: 0;
  margin: 2.6rem 7.9rem 0 0;
}

.each-color-list li .color-img {
  position: relative;
  padding-bottom: .5rem;
  background: #fff;
}

.each-color-list li:nth-of-type(2) .color-img,
.each-color-list li:nth-of-type(3) .color-img {
  margin-bottom: 1rem;
}

.each-color-list li .color-name {
  position: absolute;
  bottom: 0;
  left: 0;
}

.each-color-list li:nth-of-type(1) .color-name {
  background: #EE8672;
}

.each-color-list li:nth-of-type(2) .color-name {
  background: #B04B34;
}

.each-color-list li:nth-of-type(3) .color-name {
  background: #8C2435;
}

.each-color-list li:nth-of-type(4) .color-name {
  background: #EF7938;
}

.each-color-list li:nth-of-type(5) .color-name {
  background: #AF525E;
}

.each-color-list .color-type {
  font-size: 1.3rem;
  text-align: center;
}

.each-color-list .new {
  font-size: 1.4rem;
  line-height: 1;
  color: #CC8C00;
}
/*------------second*/
/*-----------------------new-itms*/

/*set itm------------------------*/
.set-itm_area .sec_inner {
  position: relative;
  padding-top: 10.5rem;
}

.set-itm_area .character {
  top: 0;
  left: 0;
  width: 22rem;
  margin: 4.6rem 0 0 -2rem;
}

.set-itm_area .sec-ttl {
  margin-bottom: 1.5rem;
}

.set-itm_area .free-terms {
  margin-bottom: 2.5rem;
  font-size: 2.3rem;
  text-align: center;
  color: #C7DFE0;
}

.set-itm_area .tab-list {
  display: flex;
  justify-content: space-between;
}

.set-itm_area .tab-list .tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2rem 2rem 0 0;
  width: 33rem;
  height: 8rem;
  background: #E8F3F5;
  font-weight: 600;
  font-size: 2rem;
  color: rgba(123, 180, 176, .3);
  transition: .3s;
}

.set-itm_area .tab-list .tab a:hover {
  opacity: 1 !important;
}

.set-itm_area .tab-list .tab a.selected {
  background: #fff;
  color: rgba(123, 180, 176, 1);
}

.set-itm_area .tab-content {
  display: none;
  border-radius: 0 0 2rem 2rem;
  padding: 3.5rem 8rem 4rem;
  background: #fff;
}

.set-itm_area .tab-content.selected {
  display: block;
}

.set-itm_area .tab-content .img_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 5rem;
  padding: 0 7.7rem 0 8rem;
}

.set-itm_area #AllItems .img_wrap {
  margin-bottom: 2rem;
  padding: 0 4.5rem;
}

.set-itm-img.facial-wash {
  position: relative;
  width: 14rem;
  margin-left: 3.5rem;
}

#AllItems .set-itm-img.facial-wash {
  margin-left: 0;
}

.set-itm-img.facial-wash::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 6rem;
  height: 6rem;
  margin-right: -10rem;
  background: url(../img/icon_003.svg) center center / cover no-repeat;
  content: "";
}

.set-itm-img.lip4 {
  position: relative;
}

.set-itm-img.lip4::before {
  position: absolute;
  top: 42%;
  right: 0;
  transform: translateY(-50%);
  width: 6rem;
  height: 6rem;
  margin-right: -10rem;
  background: url(../img/icon_003.svg) center center / cover no-repeat;
  content: "";
}

.set-itm-img_wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.set-itm-img.lip {
  width: 14rem;
}

.set-itm_area .color-img_wrap {
  width: 20rem;
}

.set-itm_area .color-img_wrap .color-caption {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1.75;
  text-align: center;
}

.set-itm_area .color-img_wrap .color-img {
  border-radius: 2rem;
  overflow: hidden;
}

.set-itm_area .txt_wrap {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-bottom: 1.5rem;
}

.set-itm_area #AllItems .txt_wrap {
  gap: 11rem;
  margin-bottom: 2rem;
}

.set-itm-txt {
  position: relative;
  display: flex;
  gap: .7rem;
}

#AllItems .set-itm-txt {
  display: block;
  width: 19rem;
}

.set-itm-txt.facial-wash::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  margin-right: -4rem;
  background: url(../img/icon_003.svg) center center / cover no-repeat;
  content: "";
}

#AllItems .set-itm-txt.facial-wash::before {
  margin-right: -6rem;
}

#AllItems .set-itm-txt.lip4::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  margin-right: -6rem;
  background: url(../img/icon_003.svg) center center / cover no-repeat;
  content: "";
}

.set-itm-txt .itm-name {
  font-size: 1.6rem;
}

#AllItems .set-itm-txt .itm-name {
  text-align: center;
}

.set-itm-txt .itm-name .txt_S {
  font-size: 1.3rem;
}

.set-itm-txt .itm-price {
  font-size: 1.8rem;
}

#AllItems .set-itm-txt .itm-price {
  text-align: center;
}

.set-itm-txt .itm-price .txt_S {
  font-size: 1.4rem;
}

.sumup-price_wrap {
  display: flex;
  justify-content: center;
  gap: 3.5rem;
}

.sumup-price {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #7BB4B0;
  text-align: center;
}

.sumup-price .txt_L {
  font-size: 3.6rem;
  letter-spacing: -.04em;
}

.free-terms_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #F74733;
  border-radius: .6rem;
  width: 9rem;
  height: 4rem;
  font-size: 1.2rem;
  line-height: 1.25;
  text-align: center;
  color: #F74733;
}

.set-itm_area .itm-btn {
  width: fit-content;
  margin: 0 auto 1rem;
}

.set-itm_area .Copyright {
  margin: 0 auto;
}

#AllItems .notes {
  margin-top: .8rem;
  font-size: 1rem;
  color: #F74733;
  text-align: center;
}

/*------------------------set itm*/

/*store--------------------------*/
.store_area .sec_inner {
  position: relative;
  padding: 21rem 0 20rem;
}

.store_area .character {
  top: 0;
  left: 0;
  width: 17rem;
  margin: 10rem 0 0 2.3rem;
}

.store_area .sec-ttl {
  margin-bottom: 4.5rem;
}

.store-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-content: center;
  border-radius: 2rem;
  padding: 6rem 8rem 6rem 5.2rem;
  background: #fff;
}

.brand_list{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.brand_list li{
  width: 27rem;
  text-align: center;
  padding: 2.5rem 0;
}

.brand_list .logo_ck img {
  width: 80%;
}

.brand_list .logo_bp img{
  width: 50%;
}

.mocku-img {
  width: 45rem;
}

.store-logo {
  width: 40rem;
  margin-bottom: 3rem;
}

.store-list .notes {
  margin-bottom: 1.5rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 1.2rem;
  text-align: center;
}

.store-list .Copyright {
  width: 12rem;
  margin: 0 auto;
}
/*--------------------------store*/

/*sumup--------------------------*/
.sumup_area {
  position: relative;
  background: #fff;
}

.sumup_area .sec_inner {
  position: relative;
  padding: 10.3rem 0 10rem;
  width: 130rem;
}

.sumup_area sup {
  font-size: 1rem;
}

.sumup_area .sec-ttl {
  margin-bottom: 4rem;
}

.sumup_area .sec-ttl .txt_S {
  display: block;
  margin-top: 1.5rem;
  font-family: "fot-matisse-pron", sans-serif;
  font-size: 1.6rem;
}

.sumup_area .itm-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 3rem;
  margin-bottom: 2rem;
}

.sumup_area .itm-list::after {
  display: block;
  width: 24rem;
  content: "";
}

.sumup_area .itm-list li {
  border-radius: 2rem;
  width: 24rem;  
  padding: 2rem 0 3rem;
  background: #FFFDF4;
}

.sumup_area .itm-purpose {
  margin-bottom: .8rem;
  font-family: "fot-matisse-pron", sans-serif;
  font-size: 1.8rem;
  text-align: center;
}

.sumup_area .itm-name {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
}

.sumup_area .itm-name .txt_S {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

.sumup_area .itm-name .Quasi-drug {
  display: block;
  border: solid 1px #ACACAC;
  width: fit-content;
  margin: 0 auto;
  padding: .3rem 1rem;
  font-size: 1rem;
  line-height: 1;
}

.itm-img_wrap {
  position: relative;
}

.sumup_area .itm-img {
  margin-bottom: 1.8rem;
}

.sumup_area .itm-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  margin: -1rem 2rem 0 0;
}

.sumup_area .itm-list li:nth-of-type(4) .itm-icon,
.sumup_area .itm-list li:nth-of-type(5) .itm-icon {
  margin-top: -3rem;
}

.sumup_area .itm-price {
  margin-bottom: .8rem;
  font-size: 1.8rem;
  text-align: center;
}

.sumup_area .itm-price .txt_S {
  font-size: 1.4rem;
}

.sumup_area .itm-capacity {
  font-size: 1.4rem;
  text-align: center;
}

.sumup_area .itm-capacity .txt_S {
  font-size: 1.2rem;
}

.sumup_area .notes {
  margin-bottom: 3.5rem;
  font-size: 1rem;
  color: #939393;
}

.sumup_area .itm-btn {
  width:fit-content;
  margin: 0 auto;
}

.sumup_area .itm-btn .btn_inner {
  width: 40rem;
  height: 8rem;
  font-weight: 600;
  font-size: 1.8rem;
}
/*--------------------------sumup*/

/*Smart phone---------------------------------------------*/
@media screen and  (max-width:767px) {
/*all----------------------------*/
.only_pc {
  display: none;
}

#HeaderWrap {
  position: absolute;
}

.LP_page::after {
  background: url(../img/bg_001_sp.jpg) center center / cover no-repeat;
}

.sec_inner {
  width: calc(398 * (100vw / 428));
}

.sec-ttl.txt_en {
  font-size: calc(36 * (100vw / 428));
}

.character.following {
  display: none;
}
/*----------------------------all*/

/*mv-----------------------------*/

.scrl-arrow {
  margin-bottom: calc(80 * (100vw / 428));
  font-size: calc(20 * (100vw / 428));
}

.scrl-arrow::before {
  height: calc(100 * (100vw / 428));
  margin-bottom: calc(35 * (100vw / 428));
}

.scrl-arrow::after {
  width: calc(20 * (100vw / 428));
  height: calc(20 * (100vw / 428));
  margin-bottom: calc(44 * (100vw / 428));
}

.cloud_wrap .cloud-top {
  background: url(../img/deco_021_sp.png) center center / cover no-repeat;
}

.cloud_wrap .cloud-left {
  background: url(../img/deco_022_sp.png) center center / cover no-repeat;
}

.cloud_wrap .cloud-right {
  background: url(../img/deco_023_sp.png) center center / cover no-repeat;
}

.cloud-overlap .for-bg {
  background: url(../img/bg_001_sp.jpg) center center / cover no-repeat;
}

.mv_wrap {
  display: block;
  height: auto;
  padding-top: calc(55 * (100vw / 428));
}

.mv_wrap .mv {
  position: absolute;
  width: 100vw;
  margin: calc(238 * (100vw / 428)) calc(50% - 50vw) 0;
}

.Copyright {
  width: calc(100 * (100vw / 428));
}

.mv_wrap .Copyright {
  margin-left: calc(10 * (100vw / 428));
}

.logo.Disney {
  width: calc(79 * (100vw / 428));
  margin: calc(-15 * (100vw / 428)) 0 0 calc(20 * (100vw / 428));
}

.mv_wrap .txt_wrap {
  margin: 0;
  padding-right: 0;
}

.logo_wrap {
  margin: 0 auto calc(30 * (100vw / 428));
}

.logo.Mitea {
  width: calc(86.22 * (100vw / 428));
}

.logo.Mitea::after {
  width: calc(170 * (100vw / 428));
  height: calc(75 * (100vw / 428));
  margin: calc(-25 * (100vw / 428)) 0 0 calc(-30 * (100vw / 428));
}

.main-ttl {
  margin-bottom: calc(455 * (100vw / 428));
  font-size: calc(24 * (100vw / 428));
}

.main-ttl .txt_S {
  font-size: calc(18 * (100vw / 428));
}

.main-ttl .txt_S.bg_Y {
  width: calc(165 * (100vw / 428));
  height: calc(30 * (100vw / 428));
  margin: 0 auto calc(18 * (100vw / 428));
}

.main-ttl .txt_M {
  margin-bottom: calc(10 * (100vw / 428));
  font-size: calc(18 * (100vw / 428));
}

.schedule-list {
  width: calc(330 * (100vw / 428));
  margin: 0 auto calc(20 * (100vw / 428));
}

.schedule-list li {
  height: calc(38 * (100vw / 428));
  font-size: calc(15 * (100vw / 428));
}

.schedule-list .date {
  width: calc(136 * (100vw / 428));
}

.mv_area .notes {
  width: calc(330 * (100vw / 428));
  margin: 0 auto;
  font-size: calc(10 * (100vw / 428));
  white-space: normal;
}

/*-----------------------------mv*/

/*concept------------------------*/
.main-concept {
  font-size: calc(18 * (100vw / 428));
}
/*------------------------concept*/

/*new-itms-----------------------*/
/*first-------------*/
.each-new-itms.first {
  padding-bottom: calc(193 * (100vw / 428));
}
.each-new-itms.first .sec_inner.new-itm_wrap {
  margin-bottom: 0;
}

.flex-box {
  display: block;
  margin-bottom: calc(60 * (100vw / 428));
}

.each-new-itms .flex-box {
  width: calc(398 * (100vw / 428));
}

.each-new-itms.first .new-itm_wrap .itm-img {
  width: calc(120 * (100vw / 428));
  margin: 0 auto calc(22 * (100vw / 428));
}

.each-new-itms.first .new-itm_wrap .itm-img {
  border-radius: calc(50 * (100vw / 428));
  width: calc(358 * (100vw / 428));
  margin: 0 auto calc(27 * (100vw / 428));
  padding: calc(35 * (100vw / 428)) 0;
}

.each-new-itms.first .itm-img img {
  width: calc(100 * (100vw / 428));
}

.each-new-itms .flex-box .txt_wrap {
  margin-left: calc(15 * (100vw / 428));
}

.each-new-itms .new-itm_wrap .sec-ttl {
  margin-bottom: calc(35 * (100vw / 428));
  font-size: calc(25 * (100vw / 428));
}

.each-new-itms .itm-name {
  margin-bottom: calc(20 * (100vw / 428));
  font-size: calc(18 * (100vw / 428));
}

.each-new-itms .itm-name .txt_en {
  margin-bottom: calc(8 * (100vw / 428));
  font-size: calc(14 * (100vw / 428));
}

.each-new-itms .itm-price {
  margin-bottom: calc(23 * (100vw / 428));
  font-size: calc(16 * (100vw / 428));
}

.each-new-itms .itm-price .txt_S {
  font-size: calc(12 * (100vw / 428));
}

.btn_inner::before {
  width: calc(20 * (100vw / 428));
  margin-right: calc(19 * (100vw / 428));
}

.btn_inner:hover::before {
  transform: translate(calc(10 * (100vw / 428)), -50%);
}

.btn_inner::after {
  width: calc(10 * (100vw / 428));
  height: calc(10 * (100vw / 428));
  margin-right: calc(20 * (100vw / 428));
}

.btn_inner:hover::after {
  transform: translate(calc(10 * (100vw / 428)), -50%) rotate(45deg);
}

.itm-btn {
  margin-bottom: calc(10 * (100vw / 428));
}

.itm-btn .btn_inner {
  border-radius: calc(100 * (100vw / 428));
  width: calc(250 * (100vw / 428));
  height: calc(55 * (100vw / 428));
  font-size: calc(15 * (100vw / 428));
}

.each-new-itms.first .character {
  width: calc(120 * (100vw / 428));
  margin: 0 calc(10 * (100vw / 428)) calc(75 * (100vw / 428)) 0;
}

.features_area {
  height: calc(400 * (100vw / 428));
}

.features_area::before {
  height: calc(200 * (100vw / 428));
}

.open-btn {
  margin-bottom: calc(30 * (100vw / 428));
}

.open-btn .btn_inner {
  border-radius: calc(100 * (100vw / 428));
  width: calc(250 * (100vw / 428));
  height: calc(48 * (100vw / 428));
  font-size: calc(15 * (100vw / 428));
}

.open-btn .btn_inner::before {
  height: calc(16 * (100vw / 428));
  margin-right: calc(27 * (100vw / 428));
}

.open-btn .btn_inner::after {
  width: calc(16 * (100vw / 428));
  margin-right: calc(20 * (100vw / 428));
}

.point-list .point-dtl {
  padding-bottom: calc(40 * (100vw / 428));
}

.point-list .point-dtl:nth-of-type(n+2) {
  margin-top: calc(40 * (100vw / 428));
}

.point-list .sec-ttl {
  height: calc(50 * (100vw / 428));
  margin-bottom: calc(25 * (100vw / 428));
  font-size: calc(20 * (100vw / 428));
}

.point-list .sec-ttl .txt_L {
  font-size: calc(28 * (100vw / 428));
}

.point-list .lead {
  margin-bottom: calc(28 * (100vw / 428));
  padding-bottom: calc(30 * (100vw / 428));
  font-size: calc(20 * (100vw / 428));
}

.point-list .lead sup {
  font-size: calc(11 * (100vw / 428));
}

.point-list .lead::before {
  width: calc(358 * (100vw / 428));
  height: calc(4 * (100vw / 428));
  background: url(../img/deco_011_sp.svg) center center / cover no-repeat;
}

.each-point-dtl {
  padding: 0 calc(20 * (100vw / 428));
}

.each-point-dtl dt {
  width: auto;
  margin-bottom: calc(15 * (100vw / 428));
  font-size: calc(16 * (100vw / 428));
}

.each-point-dtl dd {
  display: block;
}

.essence-img {
  width: calc(250 * (100vw / 428));
  margin: 0 auto calc(20 * (100vw / 428));
}

.component-list {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  row-gap: 0;
  padding-bottom: calc(25 * (100vw / 428));
}

.component-list li {
  display: block;
  width: calc(80 * (100vw / 428));
}

.component-list li:nth-last-of-type(1) {
  margin-left: 0;
  font-size: calc(16 * (100vw / 428));
  white-space: nowrap;
}

.component-img {
  border-radius: calc(100 * (100vw / 428));
  width: calc(80 * (100vw / 428));
  height: calc(80 * (100vw / 428));
  margin-bottom: calc(8 * (100vw / 428));
}

.component-name {
  width: auto;
  font-size: calc(10 * (100vw / 428));
  line-height: 1.5;
  text-align: center;
}

.mechanism-list {
  gap: calc(26 * (100vw / 428));
  width: auto;
  margin-bottom: calc(30 * (100vw / 428));
  padding-bottom: calc(33 * (100vw / 428));
}

.mechanism-list::before {
  width: 100%;
  height: calc(4 * (100vw / 428));
  background: url(../img/deco_011_sp.svg) center center / cover no-repeat;
}

.mechanism-list li::before {
  border-top: solid calc(8 * (100vw / 428)) transparent;
  border-bottom: solid calc(8 * (100vw / 428)) transparent;
  border-left: solid calc(10 * (100vw / 428)) #B4DAE3;
  margin: calc(55 * (100vw / 428)) calc(-20 * (100vw / 428)) 0 0;
}

.mechanism-list li:nth-of-type(1) {
  width: calc(135 * (100vw / 428));
}

.mechanism-list li:nth-of-type(2) {
  width: calc(85.91 * (100vw / 428));
}

.mechanism-list li:nth-of-type(3) {
  width: calc(89.68 * (100vw / 428));
}

.washing-img {
  margin-bottom: calc(8 * (100vw / 428));
}

.washing-purpose {
  border-radius: calc(100 * (100vw / 428));
  width: calc(80 * (100vw / 428));
  height: calc(16 * (100vw / 428));
  margin: 0 auto calc(10 * (100vw / 428));
  font-size: calc(12 * (100vw / 428));
}

.mechanism-list li:nth-of-type(1) .washing-purpose {
  margin-left: calc(43 * (100vw / 428));
}

.washing-purpose-dtl {
  font-size: calc(13 * (100vw / 428));
}

.washing-purpose-dtl sup {
  font-size: calc(10 * (100vw / 428));
}

.mechanism-list li:nth-of-type(1) .washing-purpose-dtl {
  width: calc(135 * (100vw / 428));
  margin: 0 calc(-16 * (100vw / 428)) 0 auto;
  white-space: nowrap;
}

.mechanism-list li:nth-of-type(2) .washing-purpose-dtl {
  width: calc(199 * (100vw / 428));
  margin-right: 0;
}

.clay-list {
  display: block;
  width: auto;
}

.clay-list li {
  width: auto;
}

.clay-list li:nth-of-type(n+2) {
  margin-top: calc(25 * (100vw / 428));;
}

.clay-name {
  height: calc(36 * (100vw / 428));
  margin-bottom: calc(17 * (100vw / 428));
  font-size: calc(15 * (100vw / 428));
}

.clay-img_wrap {
  gap: calc(20 * (100vw / 428));
  margin-bottom: calc(20 * (100vw / 428));
}

.clay-img {
  border-radius: calc(200 * (100vw / 428));
  width: calc(110 * (100vw / 428));
  height: calc(110 * (100vw / 428));
}

.clay-explanation {
  font-size: calc(13 * (100vw / 428));
}

.each-new-itms.first .notes {
  padding-top: calc(20 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}
/*-------------first*/

/*second------------*/
.each-new-itms.second {
  padding-bottom: calc(120 * (100vw / 428));
}

.each-new-itms.second .sec_inner.new-itm_wrap {
  margin-bottom: 0;
}

.each-new-itms.second .itm-img_wrap {
  border-radius: calc(50 * (100vw / 428));
  width: calc(358 * (100vw / 428));
  margin: 0 auto calc(24 * (100vw / 428));
  padding: calc(22 * (100vw / 428)) 0;
}

.each-new-itms.second .new-itm_wrap .itm-img {
  width: calc(99.45 * (100vw / 428));
}

.each-new-itms.second .new-itm_wrap .itm-img small{
  margin-top: calc(10 * (100vw / 428));
  font-size: calc(9 * (100vw / 428));
  word-break: keep-all;
}

.each-new-itms.second .new-itm_wrap .itm-img:nth-of-type(1) small{
  transform: translateX(-25%);
}

.each-new-itms.second .new-itm_wrap .itm-img:nth-of-type(2) {
  margin: calc(65 * (100vw / 428)) 0 0 calc(20 * (100vw / 428));
}

.each-new-itms.second .character {
  width: calc(80 * (100vw / 428));
  margin: 0 calc(25 * (100vw / 428)) calc(15 * (100vw / 428)) 0;
}

.new-color-dtl_wrap {
  border-radius: calc(20 * (100vw / 428));
  margin-bottom: calc(60 * (100vw / 428));
  padding: calc(40 * (100vw / 428)) calc(20 * (100vw / 428)) calc(35 * (100vw / 428));
}

.new-color-dtl_wrap dt {
  margin-top: calc(-12 * (100vw / 428));
  font-size: calc(27 * (100vw / 428));
}

.new-color-list {
  display: block;
}

.new-color-list li {
  align-items: flex-start;
  gap: calc(18 * (100vw / 428));
}

.new-color-list li:nth-of-type(2) {
  margin-top: calc(55 * (100vw / 428));
}

.new-color-list li:nth-of-type(2)::before {
  top: 0;
  width: calc(358 * (100vw / 428));
  height: calc(4 * (100vw / 428));
  margin: calc(-30 * (100vw / 428)) 0 0 0;
  background: url(../img/deco_012_sp.svg) center center / cover no-repeat;
}

.new-color-list .color-img {
  width: calc(160 * (100vw / 428));
}

.new-color-list .color-img small{
  width: calc(50 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
  top: calc(-10 * (100vw / 428));
  left: calc(-10 * (100vw / 428));
}

.new-color-list .color-name {
  margin-bottom: calc(5 * (100vw / 428));
  font-size: calc(16 * (100vw / 428));
  line-height: 1.4;
}

.new-color-list .color-name .txt_S {
  font-size: calc(13 * (100vw / 428));
}

.new-color-list .color-caption {
  font-size: calc(12 * (100vw / 428));
  white-space: nowrap;
}

.color-dtl_wrap {
  margin-bottom: calc(50 * (100vw / 428));
}

.color-dtl-ttl {
  font-size: calc(19 * (100vw / 428));
}

.color-dtl-ttl .txt_L {
  margin-top: calc(10 * (100vw / 428));
  font-size: calc(30 * (100vw / 428));
}

.color-dtl_wrap .lead {
  margin: calc(20 * (100vw / 428)) 0 0;
  font-size: calc(15 * (100vw / 428));
  line-height: 2.1;
}

.existing-color_wrap dt {
  margin-bottom: calc(20 * (100vw / 428));
  font-size: calc(17 * (100vw / 428));
}

.existing-color_wrap dt::before {
  width: calc(140 * (100vw / 428));
  height: calc(4 * (100vw / 428));
  background: url(../img/deco_013_sp.svg) center center / cover no-repeat;
}

.existing-color_wrap dt::after {
  width: calc(140 * (100vw / 428));
  height: calc(4 * (100vw / 428));
  background: url(../img/deco_013_sp.svg) center center / cover no-repeat;
}

.existing-color-list {
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  gap: calc(25 * (100vw / 428));
  row-gap: 0;
}

.existing-color-list li {
  display: block;
}

.existing-color-list li:nth-of-type(2) {
  margin-right: calc(10 * (100vw / 428));
}

.existing-color-list li .itm-img {
  width: calc(140 * (100vw / 428));
  margin: 0 auto;
}

.existing-color-list li:nth-of-type(2) .itm-img {
  margin: 0 auto;
}

.existing-color-list li .txt_wrap {
  margin-top: calc(8 * (100vw / 428));
}

.existing-color-list li .itm-name {
  margin-bottom: calc(5 * (100vw / 428));
  font-size: calc(16 * (100vw / 428));
  line-height: 1.4;
  text-align: center;
}

.existing-color-list li .itm-name .txt_S {
  font-size: calc(13 * (100vw / 428));
}

.existing-color-list li .itm-caption {
  margin: 0 auto calc(15 * (100vw / 428));
  font-size: calc(12 * (100vw / 428));
  text-align: center;
}

.existing-color-list li .itm-btn {
  width: fit-content;
  margin: 0 auto;
}

.existing-color-list li .itm-btn .btn_inner {
  width: calc(160 * (100vw / 428));
  height: calc(36 * (100vw / 428));
  font-size: calc(13 * (100vw / 428));
}

.existing-color-list li .itm-btn .btn_inner::before {
  width: calc(20 * (100vw / 428));
  margin-right: calc(11 * (100vw / 428));
}

.existing-color-list li .itm-btn .btn_inner:hover::before {
  transform: translate(calc(5 * (100vw / 428)), -50%);
}

.existing-color-list li .itm-btn .btn_inner::after {
  margin-right: calc(12 * (100vw / 428));
}

.existing-color-list li .itm-btn .btn_inner:hover::after {
  transform: translate(calc(5 * (100vw / 428)), -50%) rotate(45deg);
}

.color-chart_wrap {
  border-radius: calc(20 * (100vw / 428));
  padding: calc(46 * (100vw / 428)) 0;
}

.color-chart_wrap dt {
  margin-top: calc(-15 * (100vw / 428));
  font-size: calc(27 * (100vw / 428));
}

.color-chart_wrap dd {
  width: calc(346 * (100vw / 428));
  height: calc(255 * (100vw / 428));
}

.color-chart_wrap dd::after {
  width: calc(240 * (100vw / 428));
  height: calc(190 * (100vw / 428));
  background: url(../img/bg_002_sp.png) center center / cover no-repeat;
}

.color-chart_wrap .matrix-base::before {
  top: 50%;
  left: 50%;
  width: 1px;
  height: calc(210 * (100vw / 428));
}

.color-chart_wrap .matrix-base::after {
  top: 50%;
  left: 50%;
  width: calc(260 * (100vw / 428));
}

.color-chart_wrap .matrix-base p {
  width: calc(38 * (100vw / 428));
  height: calc(20 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.color-chart_wrap .matrix-base p:nth-of-type(3) {
  top: 50%;
}

.color-chart_wrap .matrix-base p:nth-of-type(4) {
  top: 50%;
}

.each-color-list li {
  width: calc(78 * (100vw / 428));
}

.each-color-list li:nth-of-type(2) {
  margin: 0 0 calc(25 * (100vw / 428)) calc(70 * (100vw / 428));
}

.each-color-list li:nth-of-type(3) {
  margin: 0 calc(70 * (100vw / 428)) calc(25 * (100vw / 428)) 0;
}

.each-color-list li:nth-of-type(4) {
  margin: calc(25 * (100vw / 428)) 0 0 calc(70 * (100vw / 428));
}

.each-color-list li:nth-of-type(5) {
  margin: calc(25 * (100vw / 428)) calc(70 * (100vw / 428)) 0 0;
}

.each-color-list li .color-img {
  padding-bottom: calc(4 * (100vw / 428));
}

.each-color-list li:nth-of-type(2) .color-img,
.each-color-list li:nth-of-type(3) .color-img {
  margin-bottom: calc(9 * (100vw / 428));
}

.each-color-list .color-type {
  margin-bottom: calc(4 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.each-color-list .new {
  font-size: calc(10 * (100vw / 428));
}
/*------------second*/
/*-----------------------new-itms*/

/*set itm------------------------*/
.set-itm_area .sec_inner {
  padding-top: calc(45 * (100vw / 428));
}

.set-itm_area .character {
  width: calc(150 * (100vw / 428));
  margin: calc(-54 * (100vw / 428)) 0 0 calc(13 * (100vw / 428));
}

.set-itm_area .sec-ttl {
  margin-bottom: 0;
}

.set-itm_area .free-terms {
  margin-bottom: calc(10 * (100vw / 428));
  font-size: calc(12 * (100vw / 428));
}

.set-itm_area .tab-list .tab a {
  border-radius: calc(20 * (100vw / 428)) calc(20 * (100vw / 428)) 0 0;
  width: calc(130 * (100vw / 428));
  height: calc(50 * (100vw / 428));
  font-size: calc(11 * (100vw / 428));
  line-height: 1.4545;
  text-align: center;
}

.set-itm_area .tab-content {
  border-radius: 0 0 calc(20 * (100vw / 428)) calc(20 * (100vw / 428));
  padding: calc(30 * (100vw / 428)) calc(25 * (100vw / 428)) calc(40 * (100vw / 428)) calc(25 * (100vw / 428));
}

.set-itm_area .tab-content .img_wrap {
  margin-bottom: calc(30 * (100vw / 428));
  padding: 0;
}

.set-itm_area #AllItems .img_wrap {
  margin-bottom: calc(26 * (100vw / 428));
  padding: 0 calc(7 * (100vw / 428)) 0 calc(14 * (100vw / 428));
}

.set-itm-img.facial-wash {
  width: calc(77.54 * (100vw / 428));
  margin-left: 0;
}

.set-itm-img.facial-wash::before {
  top: 45%;
  width: calc(36 * (100vw / 428));
  height: calc(36 * (100vw / 428));
  margin-right: calc(-40 * (100vw / 428));
}

.set-itm-img.lip4::before {
  top: 36%;
  width: calc(36 * (100vw / 428));
  height: calc(36 * (100vw / 428));
  margin-right: calc(-40 * (100vw / 428));
}

.set-itm-img_wrap {
  gap: calc(5 * (100vw / 428));
  margin-right: calc(-7 * (100vw / 428));
}

.set-itm-img.lip {
  width: calc(78 * (100vw / 428));
}

.set-itm_area .color-img_wrap {
  width: auto;
}

.set-itm_area .color-img_wrap .color-caption {
  margin-bottom: calc(8 * (100vw / 428));
  font-size: calc(9 * (100vw / 428));
  line-height: 1.5;
}

.set-itm_area .color-img_wrap .color-img {
  border-radius: calc(10 * (100vw / 428));
  width: calc(104.39 * (100vw / 428));
  margin: 0 auto;
}

.set-itm_area .txt_wrap {
  display: block;
  margin-bottom: calc(20 * (100vw / 428));
}

.set-itm_area #AllItems .txt_wrap {
  margin-bottom: calc(30 * (100vw / 428));
}


.set-itm-txt {
  justify-content: center;
  gap: calc(10 * (100vw / 428));
}

#AllItems .set-itm-txt {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}

#AllItems .set-itm-txt:nth-of-type(n+2) {
  margin-top: calc(30 * (100vw / 428));
}

.set-itm-txt.facial-wash {
  margin-bottom: calc(30 * (100vw / 428));
}

.set-itm-txt.facial-wash::before {
  top: auto;
  bottom: 0;
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(20 * (100vw / 428));
  height: calc(20 * (100vw / 428));
  margin: 0 0 calc(-26 * (100vw / 428));
}

#AllItems .set-itm-txt.facial-wash::before {
  margin-right: 0;
}

#AllItems .set-itm-txt.lip4::before {
  top: auto;
  bottom: 0;
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(20 * (100vw / 428));
  height: calc(20 * (100vw / 428));
  margin: 0 0 calc(-26 * (100vw / 428));
}

.set-itm-txt .itm-name {
  font-size: calc(14 * (100vw / 428));
}

.set-itm-txt .itm-name .txt_S {
  font-size: calc(14 * (100vw / 428));
}

.set-itm-txt .itm-price {
  font-size: calc(14 * (100vw / 428));
}

.set-itm-txt .itm-price .txt_S {
  font-size: calc(11 * (100vw / 428));
}

.sumup-price_wrap {
  gap: calc(30 * (100vw / 428));
}

.sumup-price {
  margin-bottom: calc(20 * (100vw / 428));
  font-size: calc(20 * (100vw / 428));
}

.sumup-price .txt_L {
  font-size: calc(32 * (100vw / 428));
}

.free-terms_txt {
  border-radius: calc(6 * (100vw / 428));
  width: calc(90 * (100vw / 428));
  height: calc(40 * (100vw / 428));
  font-size: calc(12 * (100vw / 428));
}

.set-itm_area .itm-btn {
  margin: 0 auto calc(10 * (100vw / 428));
}

#AllItems .notes {
  margin-top: calc(8 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}
/*------------------------set itm*/

/*store--------------------------*/
.store_area .sec_inner {
  position: relative;
  padding: calc(167 * (100vw / 428)) 0 calc(100 * (100vw / 428));
}

.store_area .character {
  width: calc(120 * (100vw / 428));
  margin: calc(70 * (100vw / 428)) 0 0 calc(5 * (100vw / 428));
}

.store_area .sec-ttl {
  margin-bottom: calc(32 * (100vw / 428));
}

.store-list {
  display: block;
  border-radius: calc(20 * (100vw / 428));
  padding: calc(40 * (100vw / 428)) calc(44 * (100vw / 428));
}

.brand_list{
  gap: calc(10 * (100vw / 390));
}

.brand_list li{
  width: calc(140 * (100vw / 390));
}

.mocku-img {
  width: calc(310 * (100vw / 428));
  margin-bottom: calc(25 * (100vw / 428));
}

.store-logo {
  width: calc(265 * (100vw / 428));
  margin: 0 auto calc(23 * (100vw / 428));
}

.store-list .notes {
  margin-bottom: calc(20 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.store-list .Copyright {
  width: calc(100 * (100vw / 428));
}
/*--------------------------store*/

/*sumup--------------------------*/
.sumup_area {
  background: #fff;
}

.sumup_area .sec_inner {
  padding: calc(83 * (100vw / 428)) 0 calc(80 * (100vw / 428));
}

.sumup_area .sec_inner::before {
  width: calc(250 * (100vw / 428));
  height: calc(188.29 * (100vw / 428));
  margin-bottom: calc(40 * (100vw / 428));
}

.sumup_area sup {
  font-size: calc(10 * (100vw / 428));
}

.sumup_area .sec-ttl {
  margin-bottom: calc(30 * (100vw / 428));
}

.sumup_area .sec-ttl .txt_S {
  margin-top: calc(15 * (100vw / 428));
  font-size: calc(14 * (100vw / 428));
}

.sumup_area .itm-list {
  row-gap: calc(10 * (100vw / 428));
  margin-bottom: calc(8 * (100vw / 428));
}

.sumup_area .itm-list::after {
  width: calc(194 * (100vw / 428));
}

.sumup_area .itm-list li {
  border-radius: calc(20 * (100vw / 428));
  width: calc(194 * (100vw / 428));
  padding: calc(20 * (100vw / 428)) 0;
}

.sumup_area .itm-purpose {
  margin-bottom: calc(5 * (100vw / 428));
  font-size: calc(15 * (100vw / 428));
}

.sumup_area .itm-name {
  margin-bottom: calc(18 * (100vw / 428));
  font-size: calc(12 * (100vw / 428));
}

.sumup_area .itm-name .txt_S {
  margin-bottom: calc(6 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.sumup_area .itm-name .Quasi-drug {
  padding: calc(3 * (100vw / 428)) calc(10 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.sumup_area .itm-img {
  margin-bottom: calc(15 * (100vw / 428));
}

.sumup_area .itm-icon {
  width: calc(40.37 * (100vw / 428));
  margin: calc(-5 * (100vw / 428)) calc(17 * (100vw / 428)) 0 0;
}

.sumup_area .itm-list li:nth-of-type(4) .itm-icon,
.sumup_area .itm-list li:nth-of-type(5) .itm-icon {
  margin-top: calc(-30 * (100vw / 428));
}

.sumup_area .itm-price {
  margin-bottom: calc(-1 * (100vw / 428));
  font-size: calc(16 * (100vw / 428));
}

.sumup_area .itm-price .txt_S {
  font-size: calc(11 * (100vw / 428));
}

.sumup_area .itm-capacity {
  font-size: calc(13 * (100vw / 428));
}

.sumup_area .itm-capacity .txt_S {
  font-size: calc(11 * (100vw / 428));
}

.sumup_area .notes {
  margin-bottom: calc(35 * (100vw / 428));
  font-size: calc(10 * (100vw / 428));
}

.sumup_area .itm-btn .btn_inner {
  width: calc(358 * (100vw / 428));
  height: calc(80 * (100vw / 428));
  font-size: calc(18 * (100vw / 428));
}
/*--------------------------sumup*/

}



/*---------------------------------------------Smart phone*/

/*pcのみ--------------------------------------------------*/
@media screen and  (min-width:768px) {
.only_sp {
  display: none;
}
}
/*--------------------------------------------------pcのみ*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/