@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --grn: #00BA16;
}

.fs-l-page {
  margin-top: 0;
}
.line400pt {
  font-family: 'Noto Serif JP', serif;
  background: #fff;
  padding-top: 15rem;
  
  * {
    margin: 0;
  }
  .inner {
    max-width: 109.8rem;
    padding: 0;
    margin: 0 auto;
  }
  br.sp {
    display: none;
  }
  
  .mv {
    max-width: 115.7rem;
    margin: 0 auto 15rem;
  }
  
  .line400pt-sec01 {
    margin-bottom: 8rem;
  
    h2 {
      font-size: 3rem;
      font-weight: 700;
      text-align: center;
      color: var(--grn);
      display: table;
      border-bottom: 1px solid var(--grn);
      padding-bottom: 1rem;
      margin: 0 auto 4rem;
      position: relative;
    }
    h2::before {
      content: "";
      display: block;
      background: url(https://lalavie.itembox.design/item/line400pt-text-start.png) center center / contain no-repeat;
      width: 16.2rem;
      height: 9.3rem;
      position: absolute;
      top: -7.5rem;
      left: -7rem;
    }
    h3 {
      background: var(--grn);
      color: #fff;
      font-size: 2rem;
      font-weight: 900;
      text-align: center;
      padding: 1rem 4rem;
      display: table;
      margin: 0 auto 4rem;
    }
    .flex {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 3rem;
      
      .item1 h4 {
        background: url(https://lalavie.itembox.design/item/line400pt-sec01-bg.png) center center / contain no-repeat;
        width: 45.7rem;
        height: 12.7rem;
        padding: 2.5rem 6rem 2.5rem 3rem;
        font-size: 2rem;
        font-weight: 700;
        color: #3E3C38;
      }
      .item1 .image {
        width: 33.2rem;
        margin: 1rem auto 0;
      }
      .item2 {
        border: 1px solid var(--grn);
        background: #FDFFF1;
        padding-bottom: 2rem;
      }
      .item2 h4 {
        background: var(--grn);
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        color: #fff;
        margin: 0 0 2rem;
        padding: 1rem 1.5rem;
      }
      .item2 h5 {
        font-family: 'Noto sans JP', sans;
        font-size: 2.5rem;
        font-weight: 700;
        text-align: center;
        margin: 0 0 1rem;
      }
      .item2 p {
        font-family: 'Noto sans JP', sans;
        font-size: 1.6rem;
        font-weight: 700;
        text-align: center;
      }
      .item2 .image {
        width: 18.8rem;
        margin: 0 auto 1rem;
      }
    }
  }
  
  .line400pt-sec02 {
    background: #F5F3ED;
    padding: 4rem 0;
    margin-bottom: 15rem;
    
    .flex {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 5rem;
    }
    h3 {
      font-size: 2rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 1rem;
    }
    .btn {
      display: block;
      width: 28.3rem;
    }
    p {
      font-family: 'Noto sans JP', sans;
      font-size: 1.6rem;
      font-weight: 500;
      text-align: center;
      margin: 1rem 0 0;
    }
  }
  
  .line400pt-sec03 {
    margin-bottom: 14rem;
  
    h2 {
      font-size: 3rem;
      font-weight: 700;
      text-align: center;
      color: var(--grn);
      display: table;
      padding-bottom: 1rem;
      margin: 0 auto 2rem;
      position: relative;
    }
    h2::before {
      content: "";
      display: block;
      background: url(https://lalavie.itembox.design/item/line400pt-text-merit.png) center center / contain no-repeat;
      width: 17.1rem;
      height: 8.9rem;
      position: absolute;
      top: -8rem;
      left: -7rem;
    }
    .green {
      background: var(--grn);
      padding: 1rem 5rem;
      font-size: 2rem;
      font-weight: 700;
      text-align: center;
      color: #fff;
      display: table;
      margin: 0 auto 4rem;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      
      > div {
        width: 32.5%;
        border: 1px solid var(--grn);
        padding: 1.5rem;
        display: flex;
        flex-flow: column nowrap;
      }
      .item1 .image {
        width: 18.8rem;
        margin: auto auto 0;
      }
      .item2 .image {
        width: 8.5rem;
        margin: auto auto 0;
      }
      .item3 .image {
        width: 10.1rem;
        margin: auto auto 0;
      }
      
      .title {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        
        .icon {
          width: 6.2rem;
        }
        h3 {
          width: calc(100% - 7.2rem);
          font-family: 'Noto sans JP', sans;
          font-size: 2rem;
          font-weight: 700;
          color: var(--grn);
          
          span {
            font-size: 3rem;
          }
        }
      }
      p {
        font-size: 1.6rem;
        margin-bottom: 2rem;
      }
    }
  }
  
  .line400pt-sec04 {
    margin-bottom: 6rem;
  
    h2 {
      font-size: 3rem;
      font-weight: 700;
      text-align: center;
      color: var(--grn);
      display: table;
      padding-bottom: 1rem;
      margin: 0 auto 2rem;
      position: relative;
    }
    h2::before {
      content: "";
      display: block;
      background: url(https://lalavie.itembox.design/item/line400pt-text-flow.png) center center / contain no-repeat;
      width: 13.2rem;
      height: 8.4rem;
      position: absolute;
      top: -7rem;
      left: -7rem;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      
      > div {
        width: 32.5%;
        background: #f9fffd;
        border: 1px solid var(--grn);
        padding: 1.5rem;
        display: flex;
        flex-flow: column nowrap;
        position: relative;
      }
      .item1 .image {
        width: 24.9rem;
        margin: auto auto 0;
      }
      .item2 .image {
        width: 24.9rem;
        margin: auto auto 0;
      }
      .item3 .image {
        width: 24.9rem;
        margin: 6rem auto 0;
        box-shadow: 0 0 .6rem rgba(0,0,0,0.1);
      }
      .item1::after,
      .item2::after {
        content: "";
        display: block;
        background: url(https://lalavie.itembox.design/item/line400pt-arrow-right.png) center center / contain no-repeat;
        width: 3rem;
        height: 7rem;
        position: absolute;
        top: 50%;
        right: -2.5rem;
        transform: translateY(-50%);
        z-index: 1;
      }
      
      .title {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        
        .icon {
          width: 6.2rem;
        }
        h3 {
          width: calc(100% - 7.2rem);
          font-family: 'Noto sans JP', sans;
          font-size: 2rem;
          font-weight: 700;
          color: var(--grn);
          
          span {
            font-size: 3rem;
          }
        }
      }
      p {
        font-size: 1.6rem;
        margin-bottom: 2rem;
      }
    }
  }
  
  .line400pt-sec05 {
    padding-bottom: 10rem;
    
    .bg {
      background: #F5F3ED;
      padding: 6rem 2rem;
    }
    
    .flex {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 4rem;
      
      .item {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        
        .icon {
          width: 4.9rem;
        }
        h3 {
          width: calc(100% - 5.9rem);
          font-size: 1.6rem;
          font-weight: 700;
          line-height: 1.4;
        }
      }
    }
    
    h2 {
      font-size: 2rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.4;
      color: var(--grn);
      margin-top: 4rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .line400pt {
    padding-top: 5rem;
    
    br.sp {
      display: block;
    }
    br.pc {
      display: none;
    }
    .mv {
      width: 100%;
      margin: 0 auto 8rem;
    }
    .line400pt-sec01 {
      padding: 0 1.5rem;
      margin-bottom: 6rem;
    
      h2 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
      }
      h2::before {
        width: 9.7rem;
        height: 5.6rem;
        top: -4.5rem;
        left: -4rem;
      }
      h3 {
        font-size: 1.5rem;
        line-height: 1.6;
        padding: 1rem;
        width: 100%;
        margin: 0 auto 2rem;
      }
      .flex {
        display: block;
        
        .item1 {
          position: relative;
          margin-bottom: 6rem;
        }
        .item1::after {
          content: "";
          display: block;
          background: url(https://lalavie.itembox.design/item/line400pt-arrow-bottom.png) center center / contain no-repeat;
          width: 7rem;
          height: 3rem;
          position: absolute;
          bottom: -4.5rem;
          left: 50%;
          transform: translateX(-50%);
          z-index: 1;
        }
        .item1 h4 {
          background: #FFF8E1;
          width: 100%;
          height: auto;
          padding: 2rem;
          font-size: 1.5rem;
        }
        .item1 .image {
          width: 28rem;
        }
        .item2 h4 {
          font-size: 1.3rem;
          padding: 1rem;
        }
        .item2 h5 {
          font-size: 2rem;
        }
        .item2 p {
          font-size: 1.4rem;
        }
        .item2 .image {
          width: 15rem;
        }
      }
    }
    .line400pt-sec02 {
      margin-bottom: 8rem;
      
      .flex {
        display: block;
        
        .item1 {
          margin-bottom: 3rem;
        }
      }
      h3 {
        font-size: 1.8rem;
      }
      .btn {
        margin: 0 auto;
        width: 24rem;
      }
      p {
        font-size: 1.4rem;
        margin: .5rem 0 0;
      }
    }
    .line400pt-sec03 {
      padding: 0 1.5rem;
      margin-bottom: 8rem;
      
      h2 {
        font-size: 2.2rem;
      }
      h2::before {
        width: 10.2rem;
        height: 5.3rem;
        top: -4.5rem;
        left: -4rem;
      }
      .green {
        font-size: 1.5rem;
        line-height: 1.6;
        padding: 1rem;
        width: 100%;
        margin: 0 auto 2rem;
      }
      .flex {
        display: block;
        margin: 0 auto;
        width: 100%;
        
        > div {
          width: 100%;
          margin-bottom: 2rem;
        }
        .title {
          .icon {
            width: 5.2rem;
          }
          h3 {
            width: calc(100% - 6.2rem);
            font-size: 1.8rem;
            
            span {
              font-size: 2.8rem;
            }
          }
        }
      }
    }
    .line400pt-sec04 {
      padding: 0 1.5rem;
      
      h2 {
        font-size: 2.2rem;
      }
      h2::before {
        width: 7.9rem;
        height: 5rem;
        top: -4.5rem;
        left: -4rem;
      }
      .flex {
        display: block;
        margin: 0 auto;
        width: 100%;
        
        > div {
          width: 100%;
          margin-bottom: 2rem;
        }
        .item1::after,
        .item2::after {
          content: "";
          display: block;
          background: url(https://lalavie.itembox.design/item/line400pt-arrow-bottom.png) center center / contain no-repeat;
          width: 7rem;
          height: 3rem;
          position: absolute;
          top: auto;
          right: auto;
          bottom: -2.5rem;
          left: 50%;
          transform: translateX(-50%);
          z-index: 1;
        }
        .item3 .image {
          margin: 0 auto;
        }
      }
    }
    .line400pt-sec05 {
      margin: 0 auto 6rem;
      width: 100%;
      padding: 3rem 1.5rem;
      
      .flex {
        display: block;
        
        .item:nth-child(1) {
          margin-bottom: 3rem;
        }
      }
      h2 {
        font-size: 1.8rem;
      }
    }
  }
}