/**
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
}
@media screen and (min-width: 1280px) and (max-width: 1519px) {
}
@media screen and (min-width: 1520px) and (max-width: 1759px){
}
@media screen and (min-width: 1760px) {
}
 */

 /*  .p-title-1
 --------------------------------------------- */
.p-title-1 {

}


/*  p-list-1
--------------------------------------------- */
.p-list-1 {
  list-style: none;
  padding: 0;

  li{
    &:not(:last-of-type){
      margin-bottom: 5px;
    }
  }
}


/* p-title-slash
--------------------------------------------- */
.p-title-slash {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.1em;

  @media screen and (max-width: 1023px) {
    column-gap: 10px;
  }

  @media screen and (max-width: 767px) {
    zoom: 0.8;
  }


  svg {
    position: relative;
    top: .2em;
  }
}

.p-title-slash--lg {
  font-size: 20px;
  letter-spacing: 0;
}

/* p-text-area
--------------------------------------------- */
.p-text-area{
  font-weight: 500;
  line-height: 1.8;
}
.p-text-area--md{
  font-size: 18px;
  line-height: 2.4;
  font-weight: 700;

  @media screen and (max-width: 767px) {
    line-height: 1.8;
  }
}
.p-text-area--center{
  p {
    text-align: center;

    @media screen and (max-width: 767px) {
      text-align: left;
    }
  }
}

/*  p-list-item
--------------------------------------------- */

/*  p-details
--------------------------------------------- */
.p-details-wrapper{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  row-gap: 60px;
  column-gap: 60px;
  margin-top: 65px;

  @media screen and (max-width: 1023px) {
    row-gap: 20px;
    column-gap: 20px;
  }

  @media screen and (max-width: 767px) {
    margin-top: 30px;
  }
}

.p-details {
  width: calc(50% - calc(60px / 2));
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--color-tertiary);
  padding: 30px 60px;

  @media screen and (max-width: 1023px) {
    width: calc(50% - calc(20px / 2));
    padding: 20px 20px;
  }

  @media screen and (max-width: 767px) {
    width: 100%;
  }


  .p-details__summary {
    position: relative;
    display: block;
    cursor: pointer;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: 9999px;
    padding: 16px 55px 16px 35px;
    font-weight: 700;
    font-size: clamp(18px ,calc( 18 / 375 * 100vw) , 20px);
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;

    &::-webkit-details-marker {
      display: none;
    }

    .p-details__summary-i{
      position: absolute;
      top: 50%;
      right: 12px;
      width: 40px;
      height: 40px;
      transform: rotate(0) translate(0, -50%);
      background-color: var(--color-white);
      color: var(--color-secondary);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease-in-out;
      transform-origin: center 0;
    }
  }

  .p-details__content{

    .p-details__content-list{
      list-style: none;
      padding: 23px 0 23px 0;

      li{
        position: relative;
        padding-left: 25px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;

        &:not(:last-of-type){
          margin-bottom: 12px;
        }

        &::before{
          content: '';
          position: absolute;
          top: 10px;
          left: 10px;
          width: 4px;
          height: 4px;
          background-color: var(--color-text);
          border-radius: 9999px;
          transform: translate(0, 0);
        }
      }
    }
  }
}

.p-details[open] > summary .p-details__summary-i {
  transform: rotate(-180deg) translate(0, -50%);
}

/*  p-intro
--------------------------------------------- */
.p-intro{
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.p-intro__ttl {
  display: grid;
  place-items: center;
  text-align: center;
}

.p-intro__ttl-label {
  font-size: 30px;
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: 0.2em;

  @media screen and (max-width: 767px) {
    font-size: 26px;
    letter-spacing: 0.1em;
  }
}

.p-intro__ttl-wrapper{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: 53px;

  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
  }
}

.p-intro__ttl{
  order: 2;
  padding-bottom: calc(60 / 1200 * 100%);

  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

.p-intro__ttl-img01{
  order: 1;
  width: calc(91 / 1200 * 100%);
  height: auto;

  @media screen and (max-width: 767px) {
    order: 2;
    width: calc(60 / 375 * 100%);
  }
}

.p-intro__ttl-img02{
  order: 3;
  width: calc(88 / 1200 * 100%);
  height: auto;
  margin-top: 10px;

  @media screen and (max-width: 767px) {
    order: 3;
    width: calc(55 / 375 * 100%);
    margin-top: 0;
  }
}

.p-intro-content {
  position: relative;
  z-index: 1;
}

.p-intro-content__content{
}

.p-intro-content__picture{
  width: 100%;

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

.p-intro-content__bg{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  p-point-list
--------------------------------------------- */
.p-point-list{
  display: flex;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 80px;
  column-gap: 60px;

  @media screen and (max-width: 1023px) {
    row-gap: 30px;
    column-gap: 20px;
  }

  > li{
    position: relative;
    z-index: 0;
    width: calc(calc(100% / 2) - calc(calc( 60px * 1) / 2));
    display: flex;
    flex-direction: column;

    @media screen and (max-width: 1023px) {
      width: calc(calc(100% / 2) - calc(calc( 20px * 1) / 2));
    }

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  .p-point-list__head {
    position: relative;
  }

  .p-point-list__inner {
    width: min(360px, calc(360 / 460 * 100vw));
    /* height: min(180px, calc(180 / 460 * 100vw)); */
    height: auto;
    aspect-ratio: 360 / 180;
    max-width: calc(100% - calc( 70 / 360 * 100%));
    margin: 0 auto -1px;
    position: relative;
    background: var(--color-tertiary);
    border-radius: 50% / 100% 100% 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 3px;
  }
  .p-point-list__inner::before,
  .p-point-list__inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: clamp( 40px ,calc( 50 / 360 * 100%), 50px);
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--color-tertiary);
  }
  .p-point-list__inner::before {
    left: calc(clamp( 40px ,calc( 45 / 360 * 100%), 45px) * -1);
    clip-path: path('M0 0V50H50C22.4 50 0 27.6 0 0Z');
    transform: scale(-1, 1);
    @media (max-width: 1024px) {
      left: calc(clamp( 35px ,calc( 40 / 360 * 100%), 40px) * -1);
    }
  }
  .p-point-list__inner::after {
    right: calc(clamp( 40px ,calc( 45 / 360 * 100%), 45px) * -1);
    clip-path: path('M0 0V50H50C22.4 50 0 27.6 0 0Z');
    @media (max-width: 1024px) {
      right: calc(clamp( 35px ,calc( 40 / 360 * 100%), 40px) * -1);
    }
  }

  .p-point-list__i{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: auto;
  }

  .p-point-list__lead{
    font-size: min(calc(14 / 768 * 100vw), 18px);
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-family: var(--ff-barlow);
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      font-size: min(calc(14 / 375 * 100vw), 20px);
    }
  }

  .p-point-list__text {
    font-size: min(calc(16 / 768 * 100vw), 20px);
    text-align: center;
    line-height: 1.8;
    font-weight: 700;
    color: var(--color-secondary);
    font-family: var(--ff-zen);
    margin-top: min(calc( 15 / 570 * 100%) , 15px);

    @media screen and (max-width: 767px) {
      font-size: min(calc(16 / 375 * 100vw), 22px);
    }
  }

  .p-point-list__content{
    position: relative;
    z-index: 0;
    flex: 1 1 auto;
    border-radius: 20px;
    background-color: var(--color-tertiary);
    padding: 53px 20px 43px;

    @media screen and (max-width: 1023px) {
      padding: 20px 20px 30px;
    }
  }

  .p-point-list__img{
    max-width: 100%;
    margin-inline: auto;
    height: auto;
    display: block;
  }

  .p-point-list__textarea{
    margin-top: 30px;
    width: 440px;
    max-width: 100%;
    margin-inline: auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;

    @media screen and (max-width: 1023px) {
      margin-top: 20px;
    }
  }

  .p-point-list__borderBlock{
    border: solid 1px var(--color-gray-2);
    border-radius: 20px;
    padding: 47px 20px 50px 20px;

    @media screen and (max-width: 767px) {
      padding: 25px 20px 30px 20px;
    }

    .p-point-list__borderBlock-i{
      position: absolute;
      z-index: -1;
      top: 130px;
      right: min(calc( 106 / 1400 * 100vw), 106px);
      width: 80px;
      height: auto;

      @media screen and (max-width: 1023px) {
        top: 110px;
        right: 10px;
      }

      @media screen and (max-width: 767px) {
        display: none;
        width: min(calc( 50 / 375 * 100vw), 80px);
      }
    }
  }

  .p-point-list__checkList{
    list-style: none;
    padding: 0;
    margin-top: 43px;
    width: 430px;
    max-width: 100%;
    margin-inline: auto;

    @media screen and (max-width: 1023px) {
      margin-top: 20px;
    }

    > li{
      width: 100%;
      font-size: 12px;
      line-height: 1.6;
      font-weight: 500;

      &:not(:last-of-type){
        margin-bottom: 17px;
      }

      ul{
        > li{
          position: relative;
          width: 100%;
          padding-left: 15px;

          &::before{
            content: '';
            position: absolute;
            top: 9px;
            left: 5px;
            width: 3px;
            height: 3px;
            background-color: var(--color-text);
            border-radius: 9999px;
          }
        }
      }
    }

    .p-point-list__checkList__label{
      display: flex;
      align-items: flex-start;
      column-gap: 9px;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 700;
      color: var(--color-primary);
    }
  }

  .p-point-list__item--01{
    .p-point-list__i{
      top: 17px;
      left: min(calc( 123 / 570 * 100%) , 123px);
      width: min(calc( 108 / 570 * 100%) , 108px);
    }
  }

  .p-point-list__item--02{
    .p-point-list__i{
      top: 10px;
      left: min(calc( 133 / 570 * 100%) , 133px);
      width: min(calc( 67 / 570 * 100%) , 67px);
    }
  }

  .p-point-list__item--03{
    .p-point-list__i{
      top: 35px;
      left: min(calc( 153 / 570 * 100%) , 153px);
      width: min(calc( 60 / 570 * 100%) , 60px);

      @media screen and (max-width: 767px) {
        top: 15px;
      }
    }
  }

  .p-point-list__item--04{
    width: calc(calc(100% / 2) - calc( 30px + 40px ));
    display: flex;
    flex-direction: column;

    @media screen and (max-width: 1023px) {
      width: calc(calc(100% / 2) - calc(calc( 20px * 1) / 2));
    }

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}

/*  p-step
--------------------------------------------- */
.p-step-list{
  margin-top: 67px;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  row-gap: 20px;

  @media screen and (max-width: 1023px) {
    margin-top: 30px;
  }

  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    width: fit-content;
    margin-inline: auto;
    row-gap: min(calc( 20 / 375 * 100vw) , 60px);
    column-gap: min(calc( 20 / 375 * 100vw) , 60px);
  }

  li{
    position: relative;
    z-index: 0;
    width: calc(calc(100% / 5) - calc(calc(min(calc( 12 / 1400 * 100vw) , 12px) * 4) / 5));

    @media screen and (max-width: 767px) {
      width: calc(calc(100% / 2) - calc(calc(min(calc( 20 / 375 * 100vw) , 60px) * 1) / 2));
    }
  }

  .p-step-list__content{
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 9999px;
    color: var(--color-white);
    background-color: var(--color-secondary);
    column-gap: 30px;
    row-gap: min(calc( 15 / 1400 * 100vw) , 15px);
    padding: min(calc( 25 / 1400 * 100vw) , 25px) 10px min(calc( 25 / 1400 * 100vw) , 25px);

    @media screen and (max-width: 767px) {
      justify-content: center;
      row-gap: min(calc( 10 / 375 * 100vw) , 30px);
      padding: min(calc( 15 / 375 * 100vw) , 50px) 10px min(calc( 15 / 375 * 100vw) , 50px);
    }
  }

  .p-step-list__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: min(calc( 15 / 1400 * 100vw) , 15px);
    color: var(--color-white);

    @media screen and (max-width: 767px) {
      row-gap: min(calc( 5 / 375 * 100vw) , 30px);
    }
  }

  .p-step-list__num{
    font-family: var(--ff-barlow);
    color: var(--color-primary);
    font-size: min(calc( 14 / 768 * 100vw) , 20px);
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;

    @media screen and (max-width: 767px) {
      font-size: min(calc( 15 / 375 * 100vw) , 20px);
    }
  }

  .p-step-list__i{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(calc( 60 / 1400 * 100vw) , 60px);

    @media screen and (max-width: 767px) {
      min-height: min(calc( 45 / 375 * 100vw) , 60px);
    }

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

  .p-step-list__label{
    font-size: min(calc( 15 / 768 * 100vw) , 22px);
    text-align: center;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: 0.04em;

     @media screen and (max-width: 767px) {
      font-size: min(calc( 17 / 375 * 100vw) , 22px);
    }
  }

  .p-step-list__arrow{
    color: var(--color-primary);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: min(calc( 45 / 767 * 100vw) , 60px);
    height: auto;

    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  .p-step-list__content--01{
    .p-step-list__i{
      width: min(calc( 36 / 1400 * 100vw) , 36px);
      @media screen and (max-width: 767px) {
        width: min(calc( 26 / 375 * 100vw) , 36px);
      }
    }
  }
  .p-step-list__content--02{
    .p-step-list__i{
      width: min(calc( 80 / 1400 * 100vw) , 80px);
      @media screen and (max-width: 767px) {
        width: min(calc( 60 / 375 * 100vw) , 80px);
      }
    }
  }
  .p-step-list__content--03{
    .p-step-list__i{
      width: min(calc( 53 / 1400 * 100vw) , 53px);
      @media screen and (max-width: 767px) {
        width: min(calc( 40 / 375 * 100vw) , 53px);
      }
    }
  }
  .p-step-list__content--04{
    .p-step-list__i{
      width: min(calc( 59 / 1400 * 100vw) , 59px);
      @media screen and (max-width: 767px) {
        width: min(calc( 42 / 375 * 100vw) , 59px);
      }
    }
  }
  .p-step-list__content--05{
    .p-step-list__i{
      width: min(calc( 53 / 1400 * 100vw) , 53px);
      @media screen and (max-width: 767px) {
        width: min(calc( 40 / 375 * 100vw) , 53px);
      }
    }
  }
}


/*  p-recommendation
--------------------------------------------- */
.p-recommendation-block-wrapper{
  position: relative;
  z-index: 0;
}

.p-recommendation-block__bg{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-recommendation-heading{
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  max-height: 400px;
  aspect-ratio: 1400 / 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(40 / 1400 * 100vw);
  padding-bottom: 0;

  @media screen and (max-width: 767px) {
    padding-top: calc(50 / 375 * 100vw);
    padding-bottom: 20px;
  }

  .p-recommendation-heading__inner{
    max-width: calc(100% - 40px);
    margin-inline: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    column-gap: min(calc( 40 / 1400 * 100vw) , 40px);
    padding-bottom: min(calc( 4 / 1400 * 100vw) , 4px);

    @media screen and (max-width: 767px) {
      flex-wrap: wrap;
      column-gap: min(calc( 30 / 375 * 100vw) , 40px);
    }
  }

  .p-recommendation-heading__label{
    order: 2;
    width: auto;
    color: var(--color-primary);
    font-size: min(calc( 24 / 768 * 100vw) , 30px);
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.2em;
    margin-bottom: min(calc( 25 / 768 * 100vw) , 42px);

    @media screen and (max-width:1023px) {
      letter-spacing: 0.1em;
    }

    @media screen and (max-width:767px) {
      order: 1;
      width: 100%;
      font-size: min(calc( 20 / 375 * 100vw) , 24px);
    }
  }

  .p-recommendation-heading__bg{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

.p-recommendation-block{
  .p-recommendation-block__content{
    position: relative;
    z-index: 0;
    font-weight: 500;
    line-height: 2.8;

    @media screen and (max-width: 767px) {
      line-height: 2;
    }

    p{

      &:not(:last-of-type){
        margin-bottom: 50px;

        @media screen and (max-width: 1023px) {
          margin-bottom: 30px;
        }

        @media screen and (max-width: 767px) {
          margin-bottom: 20px;
        }
      }
    }
  }

  .p-recommendation-block__images{
    display: flex;
    justify-content: center;
    column-gap: 20px;

    @media screen and (max-width: 1023px) {
      margin-top: 40px;
    }

    @media screen and (max-width: 767px) {
      margin-top: 20px;
    }
  }
}