@charset "UTF-8";
.tabs {
  display: none !important;
}

.add2503 {
  position: relative;
  margin-top: 90px;
  padding: 40px 0;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS PMincho", serif;
  
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    background: #fff;
    width: 100vw;
    height: 100%;
  }
  
  p {
    margin: 0;
  }
  
  .anchor {
    margin-top: -8rem;
    padding-top: 8rem;
  }
  
  .add2503-nav {
    margin-bottom: 7rem;
  
    a {
      width: 22%;
      border: 1px solid #707070;
      border-radius: 3px;
      font-size: 1.8rem;
      text-align: center;
      padding: 1.2rem;
      position: relative;
      
      &::after {
        content: "";
        display: block;
        background: url(https://lalavie.itembox.design/item/add2503-arrow-bottom.png) center center / contain no-repeat;
        position: absolute;
        top: calc(50% - .3rem);
        right: 1rem;
        width: .8rem;
        height: .6rem;
      }
      
      &:hover {
        text-decoration: none;
        background: #f2eeea;
      }
    }
  }
  
  .title {
    margin-bottom: 6rem;
    text-align: center;
    
    .en {
      font-size: 2.5rem;
      font-weight: 500;
      color: #e1ddd8;
      display: block;
    }
    .ja {
      font-size: 3.3rem;
      font-weight: 600;
    }
  }
  
  .add2503-features {
    .add2503-point {
      margin-bottom: 8rem;
      
      .image {
        width: 53%;
      }
      .text {
        width: 45%;
        font-size: 2.2rem;
        
        h3 {
          font-size: 3.5rem;
          margin-bottom: 1rem;
        }
        .kome {
          margin-top: 1.5rem;
          font-size: 1.2rem;
          text-indent: -.75em;
          padding-left: .75em;
        }
      }
      &.reverse .text {
        padding-left: 2rem;
      }
    }
    .add2503-point-image {
      margin-bottom: 8rem;
    }
    .add2503-point-lotion {
      margin-bottom: 8rem;
    }
    .botanical {
      border: 1px solid #707070;
      padding: 3rem 5rem;
      text-align: center;
      margin-bottom: 12rem;
      
      &.botanical4 .item {
        width: 20%;
      }
      &.botanical5 .item {
        width: 16%;
      }
      h3 {
        font-size: 2.8rem;
        margin-bottom: 4rem;
        
        &::before {
          content: "";
          display: block;
          background: url(https://lalavie.itembox.design/item/add2503-botanical-icon.png) center center / contain no-repeat;
          width: 3.6rem;
          height: 1.7rem;
          margin: 0 auto .5rem;
        }
      }
      .item {
        line-height: 1.2;
        
        .image {
          margin-bottom: 1rem;
        }
        
        h4 {
          font-size: 2rem;
        }
        p {
          font-size: 1.4rem;
          margin-top: .5rem;
        }
      }
    }
    .refill {
      background: linear-gradient(-225deg, #F4F0E8 10%, #fff 30%, #F4F0E8 60%);
      padding: 1.5rem;
      margin-bottom: 12rem;
      
      .box {
        border: 1px solid #DBCEB4;
        padding: 4rem 3rem 2rem;
        
        h3 {
          font-size: 2.8rem;
          display: table;
          border-bottom: 1px solid #DBCEB4;
          padding-bottom: .5rem;
          margin: 0 auto 2rem;
          position: relative;
          
          &::before {
            content: "";
            display: block;
            background: url(https://lalavie.itembox.design/item/add2503-refill-text.png) center center / contain no-repeat;
            width: 40.4rem;
            height: 32.3rem;
            position: absolute;
            top: -17rem;
            left: -30rem;
          }
        }
        .image {
          width: 19.1rem;
          margin-right: 3rem;
        }
        .text {
          h4 {
            font-size: 3rem;
          }
          .contents {
            font-family: 'Noto Sans JP', "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
            font-size: 2rem;
          }
          .price {
            font-size: 3rem;
            
            span {
              font-size: 4rem;
            }
          }
        }
      }
    }
    .skincare {
      margin-bottom: 12rem;
      
      h3 {
        font-size: 3.3rem;
        text-align: center;
        margin-bottom: 4rem;
      }
      .items-3 {
        gap: 75px;
      }
      .item {
        width: 20%;
        position: relative;
        
        &:not(:last-child)::after {
          content: "";
          display: block;
          background: url(https://lalavie.itembox.design/item/add2503-skincare-right.png) center center / contain no-repeat;
          width: 2rem;
          height: 3rem;
          position: absolute;
          top: 16rem;
          right: -5rem;
        }
        
        h4 {
          font-size: 2.4rem;
          text-align: center;
          margin-bottom: 2rem;
        }
        .image {
          margin-bottom: 1rem;
        }
        p {
          font-size: 1.8rem;
          text-align: center;
          height: 3.6em;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .btn {
          display: block;
          border: 1px solid #DAD1BA;
          border-radius: 100rem;
          text-align: center;
          padding: .6rem;
          margin: 1rem auto 0;
          
          &.btn1 {
            background: #fff;
          }
          &.btn2 {
            background: linear-gradient(-225deg, #F4F0E8 10%, #fff 30%, #F4F0E8 60%);
          }
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
  .add2503-method {
    margin-bottom: 10rem;
    
    .method-items {
      gap: 3rem;
      
      .item {
        width: calc((100% - 3rem * 2) / 3);
        border: 2px solid #E0DED2;
        background: #fff;
        border-radius: 1rem;
        padding: 3rem;
        position: relative;
        
        &:not(:nth-child(3n+1))::before {
          content: "";
          display: block;
          border-top: 2px solid #E0DED2;
          width: 3.2rem;
          height: 2px;
          position: absolute;
          top: 50%;
          left: -3.2rem;
        }
        
        .step {
          width: 9.5rem;
          margin: 0 auto 1rem;
        }
        h3 {
          font-size: 2.5rem;
          text-align: center;
          margin-bottom: 1rem;
          height: 2.8em;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .image {
          width: 20rem;
          margin: 0 auto 1rem;
        }
        .kome {
          margin-top: 1rem;
          font-size: 1.2rem;
        }
      }
    }
  }
  .add2503-ingredient {
    margin-bottom: 10rem;
    
    .menu-btn {
      padding: 1rem;
      border: 2px solid #E0DED2;
      border-radius: .5rem;
      text-align: center;
      font-size: 2.2rem;
      position: relative;
      cursor: pointer;
      
      &::after {
        content: "";
        display: block;
        background: url(https://lalavie.itembox.design/item/add2503-menu-down.png) center center / contain no-repeat;
        position: absolute;
        top: calc(50% - .4rem);
        right: 2rem;
        width: 1.4rem;
        height: .8rem;
      }
      &.active::after {
        background: url(https://lalavie.itembox.design/item/add2503-menu-up.png) center center / contain no-repeat;
      }
    }
    .menu-contents {
      display: none;
      
      h3 {
        font-size: 2.2rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid #E0DED2;
        margin: 3rem 0 1rem;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .add2503 {   
    .add2503-nav {
      gap: 1rem 0;
      
      a {
        width: 48.5%;
      }
    }
    .title {
      margin-bottom: 4rem;
      
      .en {
        font-size: 2rem;
      }
      .ja {
        font-size: 2.6rem;
      }
    }
    .add2503-features {
      .add2503-point {
        margin-bottom: 5rem;
        
        .image {
          width: 100%;
        }
        .text {
          width: 100%;
          font-size: 1.8rem;
          
          h3 {
            font-size: 3rem;
          }
          .kome {
            font-size: 1rem;
          }
        }
        &.reverse .text {
          padding-left: 0;
        }
      }
      .botanical {
        padding: 3rem 2rem;
        margin-bottom: 6rem;
        
        h3 {
          font-size: 2.3rem;
          margin-bottom: 2rem;
        }
        
        &.botanical4 .item {
          width: 47%;
          margin: 1rem 0;
        }
        &.botanical5 .item {
          width: 47%;
          margin: 1rem 0;
        }
        .item {
          h4 {
            font-size: 1.6rem;
          }
        }
      }
      .refill {
        padding: 1rem;
        margin-bottom: 6rem;
        
        .box {
          border: 1px solid #DBCEB4;
          padding: 6rem 2rem 2rem;
          
          h3 {
            font-size: 2.3rem;
            text-align: center;
            margin: 0 auto 1rem;
            
            &::before {
              width: 28.2rem;
              height: 22.6rem;
              top: -17rem;
              left: -12rem;
            }
          }
          .image {
            width: 15rem;
            margin: 0 auto 1rem;
          }
          .text {
            text-align: center;
            
            h4 {
              font-size: 2rem;
            }
            .contents {
              font-size: 1.3rem;
            }
            .price {
              font-size: 2rem;
              
              span {
                font-size: 2.8rem;
              }
            }
          }
        }
      }
      .skincare {
        margin-bottom: 6rem;
        
        .items-3 {
          gap: 0 3rem;
        }
        .skincare-wrapper {
          width: calc(100% + 40px);
          margin: 0 -20px;
          padding: 0 2rem 2rem;
          overflow: auto;
          white-space: nowrap;
          
          .flex {
            width: 81rem;
            gap: 0 3rem;
            
            .item {
              width: 18rem;
              
              &:not(:last-child)::after {
                width: 1.4rem;
                height: 2.2rem;
                top: 13rem;
                right: -2.3rem;
              }
              h4 {
                font-size: 2rem;
              }
              p {
                font-size: 1.6rem;
                text-align: center;
                height: 3.2em;
              }
            }
          }
        }
      }
    }
    .add2503-method {
      margin-bottom: 6rem;
      
      .method-items {
        gap: 2rem 0;
        
        .item {
          width: 100%;
          padding: 2rem;
          display: flex;
          flex-wrap: wrap;
          
          &:not(:nth-child(3n+1))::before {
            content: none;
          }
          .head {
            width: 65%;
            margin-bottom: 1rem;
            
            .step {
              width: 8rem;
              margin: 0 0 .5rem;
            }
            h3 {
              font-size: 2rem;
              text-align: left;
              margin-bottom: 1rem;
              height: auto;
              display: block;
            }
          }
          .image {
            width: 35%;
            margin: 0;
          }
          p {
            width: 100%;
          }
        }
      }
    }
    .add2503-ingredient {
      margin-bottom: 6rem;
      
      .menu-btn {
        font-size: 1.8rem;
      }
      .menu-contents {
        h3 {
          font-size: 1.8rem;
        }
      }
    }
  }
} /*@*/