@charset "UTF-8";
/* home */
.home-fv {
    padding-top: 120px;
    .box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1024px; 
      margin: 0 auto;
    }
      .box .text {
        position: relative;
        z-index: 2;
        flex: 1; 
      }
      .box .text h1 {
        font-size: 42px;
        letter-spacing: 2px;
        line-height: 1.4;
      }
      .box .text p {
        font-size: 18px;
        margin-top: 8px;
      }
      .box .image {
        width: 580px;
        position: relative;
        z-index: 1;
        margin-left: -60px;
        flex-shrink: 0;
      }
        .box .image img {
          width: 100%;
          height: auto;
          display: block;
        }
    .box:nth-child(2){
      gap: 16px;
    }
      .box .btn-standard a{
        display: flex;
      }
      .box .btn.btn-standard a{
        height: 64px;
        width: 100%;
        margin: 0px;
        border-radius: 32px;
        font-size: 24px;
      }
      .box .btn.btn-standard a span{
        font-size: 28px;
        margin-right: 0px;
      }
      .box .medal {
        max-width: 600px;
      }
      .attention {
        font-size: 12px;
        margin-top: 4px;
        text-align: right;
      }
}
@media screen and (max-width:1080px) {
  .home-fv{
    .box .text h1{
      font-size: 38px;
    }
      .box .image {
        width: 62%;
  }
      .box .medal {
        max-width: 480px;
      }
    }
}
@media screen and (max-width:980px) {
  .home-fv{
    .box .text h1{
      font-size: 32px;
    }
    .box .text p{
      font-size: 16px;
    }
      .box .medal {
        max-width: 58%;
      }
      .box .btn.btn-standard a{
        font-size: 22px;
      }
      .box .btn.btn-standard a span{
        font-size: 26px;
      }
  }
}
@media screen and (max-width:768px) {
    .home-fv{
        padding-top: 96px;
    .box {
      flex-direction: column;
      max-width: 100%;
    }
      .box .text {
        text-align: center;
      }
      .box .text h1 {
        font-size: 42px;
      }
      .box .text p {
        font-size: 20px;
        margin-top: 8px;
      }
      .box .image {
        width: 100%;
        margin-left: 0px;
      }
        .box .image img {
        }
    .box:nth-child(2){
      margin-top: 16px;
    }
      .box .btn-standard a{
      }
      .box .btn.btn-standard a{
        height: 72px;
        border-radius: 36px;
      }
      .box .btn.btn-standard a span{
        font-size: 28px;
        margin-right: 0px;
      }
      .box .medal {
        max-width: 100%;
        margin-top: 8px;
      }
      .attention {
        text-align: left;
      }
    }
}
@media screen and (max-width:600px) {
    .home-fv{
      .box .text h1 {
        font-size: 30px;
        margin-top: 16px;
      }
      .box .text p {
        font-size: 16px;
        margin-top: 8px;
      }
      .box .image {
        width: 100%;
        margin-top: 8px;
      }
    .box:nth-child(2){
      margin-top: 16px;
    }
      .box .btn-standard a{
        margin-top: 16px;
      }
      .box .btn.btn-standard a{
        height: 72px;
        border-radius: 36px;
      }
      .box .btn.btn-standard a span{
        font-size: 28px;
        margin-right: 0px;
      }
    }
}
.func-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  a{
    display: block;
    position: relative;
  }
  a img{
    border: 1px solid #E7E7E7;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
    border-radius: 24px;
    position: relative;
  }
  a .box{
    position: absolute;
    right: 8px;
    top:50%;
    transform: translateY(-50%);
  }
  a .box span{
    color: #c3c3c3
  }
}
@media screen and (max-width:768px) {
  .func-banner{
    flex-direction: column;
  }
}

.function-list{
  margin-top: 72px;
    h2{
      text-align: center;
      font-size: 24px;
    }
    p.lead{
      font-size: 16px;
      text-align: center;
    }
  .function-list-basic{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 2%;
      row-gap: 16px;
      margin-top: 16px;
  }
    .function-list-basic a{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 32%;
      border: 1px solid #E7E7E7;
      height: 80px;
      border-radius: 16px;
      padding: 16px;
      gap: 16px;
      background-color: #FFF;
      filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
    }
    .function-list-basic a > .box{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
    }
    .function-list-basic a > .box .image {
      width: 64px;
      height: auto;
    }
    .function-list-basic a > .box .text {
      font-size: 16px;
      font-weight: 900;
      text-align: left;
      line-height: 1.2;
    }
      .function-list-basic a .box:nth-child(2){
        position: absolute;
        right: 6px;
      }
    .function-list-basic a > .box span {
      font-size: 16px;
      color: #c3c3c3;
    }
  .function-list-sp{
      display: flex;
      justify-content: flex-start;
      margin-top: 16px;
      flex-wrap: wrap;
      gap: 1%;
      row-gap: 16px;
  }
    .function-list-sp a{
      width: 24%;
    }
    .function-list-sp a .image img{
      filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
    }
    .function-list-sp a .text{
      text-align: center;
      color: #5186EC;
      font-size: 12px;
      margin-top: 6px;
      text-decoration: underline;
    }
  }
@media screen and (max-width:980px) {
  .function-list{
    .function-list-basic{
        gap: 2%;
        row-gap: 8px;
    }
      .function-list-basic a{
        width: 49%;
      }
  .function-list-sp{
    gap: 2%;
    row-gap: 16px;
  }
    .function-list-sp a{
      width: 32%;
    }
  }
}
@media screen and (max-width:768px) {
  .function-list{
    h2{
      font-size: 20px;
    }
    .function-list-basic{
    }
      .function-list-basic a{
        border-radius: 16px;
        gap: 8px;
        background-color: #FFF;
        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
        height: auto;
        justify-content: center;
      }
      .function-list-basic a > .box{
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center
      }
      .function-list-basic a > .box .image {
      }
      .function-list-basic a > .box .text {
          font-size: 14px;
          text-align: center;
        }
    .function-list-sp{
      gap: 2%;
      row-gap: 16px;
    }
      .function-list-sp a{
        width: 49%;
      }
    }
  }
.support-sections{
  margin-top: 72px;
  h2{
    font-size: 24px;
    text-align: center;
  }
  p{
    text-align: center;
    font-size: 16px;
  }
  .inner{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .box{
    width: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .box img{
    width: 50%;
  }
  .box p{
    font-size: 12px;
    background-color: #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 12px;
    font-weight: 700;
    width: 80%;
    margin-top: 8px;
  }
}
@media screen and (max-width:980px) {
  .support-sections{
    .inner{
      padding-left: 0px;
      padding-right: 0px;
    }
    .box{
      width: 14%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .box img{
      width: 50%;
    }
    .box p{
      width: 88%;
    }
  }
}
@media screen and (max-width:768px) {
  .support-sections {
    .inner {
      flex-wrap: wrap; 
      justify-content: center;
    }
    .box {
      width: 25%; 
      margin-bottom: 20px; 
    }
    .box img {
      width: 62%; 
    }
    .box p {
      width: 92%;
      font-size: 12px;
    }
  }
}
@media screen and (max-width:600px) {
  .support-sections {
    .box p {
      font-size: 10px;
    }
  }
}
.reason {
  background-color: #EDEFF3;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-top: 48px;
  .reason-inner{
  }
    .head {
      position: relative;
      text-align: center;
    }
    .head h2 {
      display: inline-block;
      font-size: 24px;
      color: #2c445d;
      font-weight: 700;
      position: relative;
      z-index: 2;
      padding-bottom: 24px;
    }
        .head::before,
        .head::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 200px;
          height: 150px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: bottom;
        }
        .head::before {
          background-image: url("../images/home/reason/reason-ill-l.svg");
          left: 10%;
        }
        .head::after {
          background-image: url("../images/home/reason/reason-ill-r.svg");
          right: 10%;
        }
  .content{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
  }
  .content .box{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 24px; 
    padding: 16px 16px 0px 16px;
    text-align: center;
    position: relative;
  }
  .content .box .icon{
    width: 48px;
    position: relative;
    top: -24px;
  }
  .content .box h3 {
    font-size: 20px;
    color: #17B4CC;
    line-height: 1.4;
    position: relative;
    top: -24px;
  }
  .content .box h3 span{
    color: #2c445d;
  }
  .content .box a {
    width: 100%;
    display: flex;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    border: 1px solid #29486D;
    border-radius: 50px;
    padding: 12px 20px;
    color: #29486D;
    text-decoration: none;
    font-size: 14px;
    position: relative;
    top: -24px;
    gap: 8px;
    margin-top: 4px;
    background-color: #FFF;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
  }
  .content .box a span{
    font-size: 12px;
  }
}
@media screen and (max-width:1020px) {
  .reason {
    .head::before {
      left: 6%;
    }
    .head::after {
      right: 6%;
    }
  }
}
@media screen and (max-width:840px) {
  .reason {
    .head::before {
      left: 3%;
    }
    .head::after {
      right: 3%;
    }
  }
}
@media screen and (max-width:768px) {
  .reason{
    padding-top: 16px;
    .content{
      flex-direction: column;
    }
      .head h2 {
        font-size: 24px;
        padding-bottom: 48px;
      }
          .head::before,
          .head::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 160px;
          }
      .head::before {
        left: 0%;
      }
      .head::after {
        right:0%;
      }
    .content .box{
      width: 100%;
    }
    .content .box a{
    }
  }
}
@media screen and (max-width:600px) {
  .reason {
      .head h2 {
        padding-bottom: 56px;
      }
          .head::before,
          .head::after {
            height: 160px;
          }
        }
    }
  .interview-list{
    margin-top: 64px;
    h2{
      text-align: center;
    }
    .box{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border: 1px solid #e7e7e7;
      padding: 24px;
      gap: 24px;
      margin-top: 16px;
      border-radius: 24px;
      background-color: #FFF;
    }
    .box .content{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 32px;
    }
    .box .image{
      width: 260px;
      flex-shrink: 0;
    }
    .box .image img{
      border-radius: 16px;
    }
    .box .text{
      flex: 1;
    }
    .box .text h3{
      font-size: 24px;
      line-height: 140%;
      font-weight: 400;
    }
    .box .text .salon-name{
      color: #8c8c8c;
      margin-top: 16px;
    }
    .box .text .cate-wrapper{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 16px;
      row-gap: 4px;
      margin-top: 8px;
    }
    .box .text .cate{
      font-size: 14px;
      line-height: 100%;
      color: #4c4c4c;
      font-weight: 700;
    }
    .box .text .cate span{
      color: #17B4CC;
      font-size: 16px;
    }
  .box .icon span{
    color: #c3c3c3;
    font-size: 32px;
  }
}

@media screen and (max-width:768px) {
  .interview-list{
    .box{
      padding: 12px;
      gap: 8px;
      border-radius: 16px;
    }
    .box .content{
      gap: 8px;
    }
    .box .image{
      width: 32%;
    }
    .box .image img{
      border-radius: 12px;
    }
    .box .text{
      flex: 1;
    }
    .box .text h3{
      font-size: 18px;
    }
    .box .text .salon-name{
      margin-top: 4px;
      font-size: 12px;
    }
    .box .text .cate-wrapper{
      gap: 16px;
      row-gap: 4px;
      margin-top: 8px;
    }
    .box .text .cate{
      font-size: 10px;
    }
    .box .text .cate span{
      font-size: 12px;
    }
  .box .icon span{
    font-size: 20px;
  }
  }
}

.magazine-list{
    margin-top: 64px;
    h2{
      text-align: center;
    }
    p.lead{
      font-size: 16px;
      text-align: center;
    }
    .magazine-list-m {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 16px;
    }
    .magazine-list-m a.box {
      border:1px solid #e7e7e7;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      flex: 0 0 calc(50% - 8px);
      min-width: 0;
    }
    .magazine-list-m a.box .image{
      width: 182px;
      flex-shrink: 0;
    }
    .magazine-list-m a.box .image img{
      border-radius: 4px;
    }
    .magazine-list-m a.box .text{
    }
      .magazine-list-m a.box .text h3{
        font-size: 16px;
        font-weight: 400;
      }
    .magazine-list-m a.box .text .cate{
      display: flex;
      gap: 4px;
      margin-top: 8px;
    }
    .magazine-list-m a.box .text .cate span{
      border-radius: 20px;
      background-color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5e7691;
      border: 1px solid #5e7691;
      font-size: 10px;
      padding: 4px 8px;
      font-weight: bold
    } 
}

@media screen and (max-width:980px) {
.magazine-list{
    .magazine-list-m a.box .image{
      width: 140px;
      flex-shrink: 0;
    }
    .magazine-list-m a.box .text h3{
      font-size: 15px;
    }
    .magazine-list-m a.box .text .cate span{
      font-size: 9px;
    }
  }
}
@media screen and (max-width:768px) {
.magazine-list{
    .magazine-list-m {
      gap: 8px;
    }
    .magazine-list-m a.box .text h3{
      font-size: 14px;
    }
    .magazine-list-m a.box {
      flex: 0 0 100%;
    }
  }
}