/*==========================================
  COMMON
========================================== */
.natura-top *,
.natura-top *:visited,
.el-d-section--colored *,
.el-d-section--colored *:visited {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #4D4D4D;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.natura-top a:hover img,
.natura-top a:hover,
.el-d-section--colored a:hover img,
.el-d-section--colored a:hover {
  text-decoration: none;
  opacity: 1;
}

.el-page__content .natura-fade {
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.el-page__content .natura-fade.active {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/*==========================================
  MV (SP)
========================================== */
.el-d-section.el-d-section--fullWidth:has(.el-d-topCarousell) {
  background: url("/_var/natura/top/update202509/img/mv_bg_sp.png") center center/contain repeat-y;
  background-size: 100% 100%;
  margin: 0;
  position: relative;
}
.el-d-section .el-carousell{
  padding: 4.8vw 0 0;
  margin: 0;
  position: relative;
}
.el-d-topCarousell-container  {
  margin: 0;
  padding: 0 !important;
}
.el-d-section.el-d-section--fullWidth:has(.el-d-topCarousell)::after {
  content: "";
  background: url("/_var/natura/top/update202509/img/bg_img01.png") center center/contain no-repeat;
  width: 100%;
  padding-top: 5.3333333333%;
  position: absolute;
  bottom: -1px;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  display: block;
  z-index: 2;
}
.el-d-topCarousell {
  position: relative;
}
.el-d-section .el-carousell {
  position: relative;
}
.el-d-section .el-carousell::before {
  content: "";
  background: url("/_var/natura/top/update202509/img/mv_icon.png") center center/contain no-repeat;
  width: 19.4666666667vw;
  height: 28.8vw;
  position: absolute;
  bottom: -4.2666666667vw;
  right: 3.7333333333vw;
  z-index: 3;
}
.el-d-topCarousell-slide {
  max-width: 100%;
  margin: auto;
}

/*==========================================
  LEAD (SP)
========================================== */
.natura-top.lead {
  position: relative;
}
.natura-top.lead .lead-wrap {
  background: #fbe1e7;
  padding: 6.6666666667vw 0 6.4vw;
}
.natura-top.lead::after {
  content: "";
  background: url("/_var/natura/top/update202509/img/bg_img.png") center center/cover no-repeat;
  width: 100%;
  padding-top: 5.3333333333%;
  display: block;
  position: relative;
  top: -1px;
}

.natura-top.lead p {
  font-size: 2.9333333333vw;
  line-height: 2.23;
  text-align: center;
}

.natura-top.lead p + p {
  margin-top: 5.4377vw;
}
.natura-top.lead p.mg-top {
  margin-top: 8.3333vw;
}

.natura-top.lead p.strong {
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 4.2918454936vw;
}

/*==========================================
  FEATURE (SP)
========================================== */
.natura-top.feature {
  padding: 5.0666666667vw 0 2.6666666667vw;
}

.natura-top.feature ul + .txt-large {
  margin: 5.0071530758vw 0 6.4377682403vw;
}

.natura-top.feature .txt-large {
  font-size: 4.8vw;
  line-height: 1.25;
  color: #E95D7B;
  text-align: center;
}

.natura-top.feature ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10.0143061516vw;
}

.natura-top.feature .feature-point {
  font-size: 3.4666666667vw;
  line-height: 1.28;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 29.0666666667vw;
  height: 29.0666666667vw;
  position: relative;
  margin: 0 0.7153075823vw;
}

.natura-top.feature .feature-point:nth-of-type(1) {
  background: url("/_var/natura/top/update202509/img/nav01_bg.png") center center/cover no-repeat;
}

.natura-top.feature .feature-point:nth-of-type(2) {
  background: url("/_var/natura/top/update202509/img/nav02_bg.png") center center/cover no-repeat;
}

.natura-top.feature .feature-point:nth-of-type(3) {
  background: url("/_var/natura/top/update202509/img/nav03_bg.png") center center/cover no-repeat;
}

.natura-top.feature .feature-point::before {
  content: "";
  width: 9.3333333333vw;
  height: 8.8vw;
  position: absolute;
  top: -4.8vw;
  left: 51%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.natura-top.feature .feature-point:nth-of-type(1)::before {
  background: url("/_var/natura/top/update202509/img/nav01_icon.png") center center/cover no-repeat;
}

.natura-top.feature .feature-point:nth-of-type(2)::before {
  background: url("/_var/natura/top/update202509/img/nav02_icon.png") center center/cover no-repeat;
}

.natura-top.feature .feature-point:nth-of-type(3)::before {
  background: url("/_var/natura/top/update202509/img/nav03_icon.png") center center/cover no-repeat;
}

.natura-top.feature .introduce {
  background: url("/_var/natura/top/update202509/img/introduce_bg_sp.png") center center/cover no-repeat;
  text-align: center;
  width: 94.6666666667vw;
  margin: 6.4377682403vw auto 0;
  padding: 3.4666666667vw 0 2.6666666667vw;
  display: block;
}

.natura-top.feature .introduce h3 {
  font-size: 6.6666666667vw;
  color: #fff;
  text-align: center;
}

.natura-top.feature .introduce p {
  font-size: 3.4666666667vw;
  color: #fff;
  text-align: center;
}

.natura-top.feature .introduce .start-txt {
  background: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W4", "ヒラギノ角ゴ Pro W4", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 2.4vw;
  color: #E95D7B;
  text-align: center;
  letter-spacing: 0;
  min-width: 32.2666666667vw;
  display: inline-block;
  padding: 1.45vw 5.3333333333vw 1.2vw;
  border-radius: 4vw;
  margin-top: 0.8vw;
  position: relative;
}

.natura-top.feature .introduce .start-txt .arrow {
  border: solid 1px #e95d7b;
  border-radius: 50%;
  width: 3.2vw;
  height: 3.2vw;
  display: block;
  position: absolute;
  top: 50%;
  right: 1.3333333333vw;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.natura-top.feature .introduce .start-txt .arrow::before,
.natura-top.feature .introduce .start-txt .arrow::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 0.8vw;
  width: 1.0666666667vw;
  height: 1px;
  border-radius: 9999px;
  background-color: #e95d7b;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

.natura-top.feature .introduce .start-txt .arrow::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.natura-top.feature .introduce .start-txt .arrow::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.natura-top.feature .introduce-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.natura-top.feature .introduce-product {
  margin-top: 1.0666666667vw;
}

.natura-top.feature .introduce-product li {
  margin: 0;
}

.natura-top.feature .introduce-product li:nth-of-type(1) {
  width: 10.6666666667vw;
}

.natura-top.feature .introduce-product li:nth-of-type(2) {
  width: 13.8666666667vw;
}

.natura-top.feature .introduce-product li:nth-of-type(3) {
  width: 12.8vw;
}

.natura-top.feature .introduce-product li:nth-of-type(4) {
  width: 17.3333333333vw;
}

.natura-top.feature .introduce-product li:nth-of-type(5) {
  width: 14.4vw;
}

.natura-top.feature .introduce-product li img {
  pointer-events: none;
}

/*==========================================
  LIMITED / PRODUCT (SP)
========================================== */
.el-d-section--colored .el-d-heading {
  font-size: 5.3333333333vw;
  letter-spacing: 0;
  margin-bottom: 3.2vw;
}
.el-d-section--colored .el-d-headingSymbol {
  background-image: url('/_var/natura/top/update202509/img/product_ttl.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 29.867vw;
  height: 6.667vw;
  margin-bottom: 2.1333333333vw;
}
.el-d-section--colored2 .el-d-headingSymbol {
  background-image: url('/_var/natura/top/update202509/img/limited_ttl.png');
  width: 32.533vw;
  height: 6.667vw;
}
.el-d-brandListA__image, .el-d-brandListB__image {
  margin: 0;
}

.el-d-section--colored .el-d-brandListA__items {
  max-width: 94.6666666667vw;
  margin: 3.2vw auto 0;
}

.el-d-section--colored  .el-d-brandListA__item + .el-d-brandListA__item {
  margin-top: 6.6666666667vw;
}
.el-d-brandListA .el-d-brandListAHeadingGroup {
  display: block;
}
.el-d-brandListA .el-d-brandListAHeadingGroup__label {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W4", "ヒラギノ角ゴ Pro W4", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 2.4vw;
  text-align: center;
  letter-spacing: 0;
  margin-top: 1.6vw;
}
.natura .el-d-section--colored {
  background: #f4adb8 url("/_var/natura/top/update202509/img/product_bg_sp.png") top center/cover no-repeat;
  margin-top: 3.7333333333vw;
  text-align: center;
  padding: 7.4666666667vw 0;
}
.natura .el-d-section--colored.el-d-section--colored2 {
  background: #f4adb8 url("/_var/natura/top/update202509/img/limited_bg_sp.png") top center/cover no-repeat;
  padding: 7.2vw 0;
  margin: 0 auto;
}
.natura .el-d-section--colored + .el-d-section--colored {
  margin-top: 3.7333333333vw;
}

/*==========================================
  FOLLOW BUTTON (SP)
========================================== */
.el-page__content .follow_btn_wrap {
  max-width: 100%;
  margin: auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 9;
}
.el-page__content .follow_btn {
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 2px rgba(35, 24, 21, .5);
          box-shadow: 2px 2px 2px rgba(35, 24, 21, .5);
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color="#231815");
  position: absolute;
  bottom: 2.6666666667vw;
  right: 2.6666666667vw;
  width: 23.088888888vw;
  cursor: pointer;
  overflow: hidden;
  z-index: 10;
}
.el-page__content .follow_btn a {
  height: 100%;
  width: 100%;
}
.el-page__content .follow_btn.fadeIn {
  -webkit-animation: FadeIn 0.5s forwards;
  animation: FadeIn 0.5s forwards;
}

@-webkit-keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.el-page__content .follow_btn.fadeOut {
  -webkit-animation: Fadeout 0.5s forwards;
  animation: Fadeout 0.5s forwards;
}

@-webkit-keyframes Fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes Fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media screen and (min-width: 700px), print {
  /*==========================================
    COMMON (PC)
  ========================================== */
  .natura-top a,
  .el-d-section--colored a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .natura-top a:hover,
  .el-d-section--colored a:hover {
    opacity: 0.6;
  }
  /*==========================================
    MV (PC)
  ========================================== */
  .el-d-section.el-d-section--fullWidth:has(.el-d-topCarousell) {
    background: url("/_var/natura/top/update202509/img/mv_bg.png") center center/contain repeat-y;
    background-size: 100% 100%;
  }
  .el-d-section .el-carousell{
    max-width: 1134px;
    padding: 37px 0 0;
    margin: auto;
  }
  .el-d-section .el-carousell::before {
    width: 195px;
    height: 289px;
    bottom: -32px;
    right: 0;
  }
  .el-d-topCarousell-slide {
    max-width: 1000px;
  }
  /*==========================================
    LEAD (PC)
  ========================================== */
  .natura-top.lead .lead-wrap {
    padding: 0 0 82px;
  }
  .natura-top.lead p {
    font-size: 22px;
    line-height: 2;
  }
  .natura-top.lead p + p {
    margin-top: 40px;
  }
  .natura-top.lead p.mg-top {
    margin-top: 70px;
  }
  .natura-top.lead p.strong {
    font-size: 45px;
    margin-top: 46px;
  }
  /*==========================================
    FEATURE (PC)
  ========================================== */
  .natura-top.feature {
    padding: 80px 0 57px;
  }
  .natura-top.feature ul + .txt-large {
    margin: 64px 0 80px;
  }
  .natura-top.feature .txt-large {
    font-size: 32px;
  }
  .natura-top.feature ul {
    margin-top: 105px;
  }
  .natura-top.feature .feature-point {
    font-size: 28px;
    width: 248px;
    height: 247px;
    margin: 0 20px;
  }
  .natura-top.feature .feature-point::before {
    width: 78px;
    height: 76px;
    top: -30px;
    left: 48%;
  }
  .natura-top.feature .introduce {
    background: url("/_var/natura/top/update202509/img/introduce_bg.png") center center/cover no-repeat;
    max-width: 1000px;
    width: 100%;
    margin: 140px auto 0;
    padding: 18px 26px 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    position: relative;
  }
  .natura-top.feature .introduce-heading {
    margin-left: 30px;
  }
  .natura-top.feature .introduce h3 {
    font-size: 45px;
    text-align: left;
  }
  .natura-top.feature .introduce p {
    font-size: 25px;
    text-align: left;
    margin-bottom: 8px;
  }
  .natura-top.feature .introduce .start-txt {
    font-size: 22px;
    min-width: 207px;
    padding: 4px 20px 6px;
    border-radius: 20px;
    margin: 0;
    position: absolute;
    bottom: 10px;
    right: 17px;
  }
  .natura-top.feature .introduce .start-txt .arrow {
    width: 24px;
    height: 24px;
    right: 8px;
  }
  .natura-top.feature .introduce .start-txt .arrow::before,
  .natura-top.feature .introduce .start-txt .arrow::after {
    top: 48%;
    right: 7px;
    width: 9px;
    height: 2px;
    -webkit-transform-origin: 95% 50%;
            transform-origin: 95% 50%;
  }
  .natura-top.feature .introduce-product {
    margin-top: 4px;
  }
  .natura-top.feature .introduce-product li {
    margin: 0;
  }
  .natura-top.feature .introduce-product li:nth-of-type(1) {
    width: 68px;
  }
  .natura-top.feature .introduce-product li:nth-of-type(2) {
    width: 88px;
  }
  .natura-top.feature .introduce-product li:nth-of-type(3) {
    width: 83px;
  }
  .natura-top.feature .introduce-product li:nth-of-type(4) {
    width: 108px;
  }
  .natura-top.feature .introduce-product li:nth-of-type(5) {
    width: 90px;
  }
  /*==========================================
    LIMITED / PRODUCT (PC)
  ========================================== */
  .natura .el-d-section--colored {
    background: #f4adb8 url("/_var/natura/top/update202509/img/product_bg.png") top center/cover no-repeat;
    padding: 38px 0;
  }
  .natura .el-d-section--colored.el-d-section--colored2 {
    background: #f4adb8 url("/_var/natura/top/update202509/img/limited_bg.png") top center/cover no-repeat;
    padding: 40px 0 30px;
  }
  .natura .el-d-section--colored + .el-d-section--colored {
    margin-top: 55px;
  }
  .el-d-section--colored .el-d-heading {
    font-size: 25px;
    margin-bottom: 27px;
  }
  .el-d-section--colored .el-d-headingSymbol {
    width: 143px;
    height: 32px;
    margin-bottom: 7px;
  }
  .el-d-section--colored2 .el-d-headingSymbol {
    width: 136px;
    height: 28px;
    margin-bottom: 11px;
  }
  .el-d-section--colored  .el-d-brandListA__item {
    margin: 0;
  }
  .el-d-brandListA__image, .el-d-brandListB__image {
    margin: 0;
  }
  .el-d-section--colored .el-d-brandListA__items {
    max-width: 928px;
    margin: 27px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .el-d-brandListA__item, .el-d-brandListB__item {
    flex-basis: calc(50% - 17px);
  }
  .el-d-section--colored .el-d-brandListA__item + .el-d-brandListA__itemi:nth-of-type(1),
  .el-d-section--colored .el-d-brandListA__item + .el-d-brandListA__item:nth-of-type(2) {
    margin: 0;
  }
  .el-d-section--colored .el-d-brandListA__item + .el-d-brandListA__item{
    margin-top: 42px;
  }
  .el-d-brandListA .el-d-brandListAHeadingGroup__label {
    font-size: 16px;
    margin-top: 10px;
  }
  /*==========================================
    FOLLOW BUTTON (PC)
  ========================================== */
  .el-page__content .follow_btn {
    border-radius: 50%;
    -webkit-box-shadow: 5px 5px 5px rgba(35, 24, 21, .5);
            box-shadow: 5px 5px 5px rgba(35, 24, 21, .5);
    bottom: 20px;
    right: 20px;
    width: 150px;
}
}
