
/**
@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: 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-block-col
--------------------------------------------- */

.p-block-col{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  row-gap: 20px;

  @media screen and (max-width: 1023px) {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
  }

  .p-block-col__head{
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 100%;
    margin-left: min(calc( 80 / 1400 * 100vw) , 80px);

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

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

    .p-block-col__head-inner{
      position: relative;
      z-index: 0;
      width: min(calc( 280 / 375 * 100vw) , 300px);
      max-width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background-color: var(--color-secondary);
    }

    .p-block-col__head-label{
      display: block;
      font-size: min(calc( 22 / 375 * 100vw) , 24px);
      text-align: center;
      font-weight: 700;
      line-height: 1.8;
      letter-spacing: 0.1em;
      color: var(--color-white);
      padding-bottom: min(calc( 49 / 375 * 100vw) , 49px);
    }

    .p-block-col__head-icon{
      position: absolute;
      width: min(calc( 90 / 375 * 100vw) , 100px);
      height: auto;
      top: min(calc( 10 / 375 * 100vw) , 10px);
      left: calc(min(calc( 20 / 375 * 100vw) , 30px) * -1);
      z-index: 1;
    }

    .p-block-col__head-img{
      position: relative;
      z-index: 1;
      display: block;
      height: auto;
      margin-inline: auto;
      margin-top: calc(min(calc( 100 / 375 * 100vw) , 100px) * -1);
    }

    .p-block-col__head-i{
      position: absolute;
      color: var(--color-white);
    }

    .p-block-col__head-i--01{
      top: min(calc( 50 / 375 * 100vw) , 57px);
      right: min(calc( 51 / 375 * 100vw) , 58px);
    }

    .p-block-col__head-i--02{
      top: min(calc( 138 / 375 * 100vw) , 142px);
      left: min(calc( 22 / 375 * 100vw) , 26px);
    }
  }

  .p-block-col__textarea{
    margin-top: 10px;
    margin-left: min(calc( 90 / 1400 * 100vw) , 90px);

    @media screen and (max-width: 1023px) {
      width: 100%;
      margin-top: 0;
      margin-left: 0;
      order: 3;
    }

    .p-block-col__textarea-inner{
      position: relative;
      z-index: 0;
      background-color: #fff;
      background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                        linear-gradient(180deg, var(--color-secondary) 1px, transparent 1px);
      background-size: 8px 100%,
                       100% 2.1em;
      line-height: 2.1em;
      padding-bottom: 1px;

      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: var(--color-white);
      }

      @media screen and (max-width: 1023px) {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
      }

      > p{
        position: relative;
        z-index: 1;
        line-height: 2.1;
        padding: 0 5px 0 10px;
        /* text-decoration: dashed underline;
        text-decoration-color: var(--color-secondary);
        text-decoration-thickness: 1px;
        text-underline-offset: 6px; */

        /* &::before{
          content: '';
          position: absolute;
          bottom: 3px;
          left: 0;
          width: 100%;
          height: 1px;
          border-bottom: dashed 1px var(--color-secondary);
          z-index: -1;
        } */
      }
    }
  }

  .p-block-col__img{
    margin-top: auto;
    margin-bottom: 60px;
    margin-left: min(calc( 38 / 1400 * 100vw) , 38px);

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

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

.p-block-col--first{
  .p-block-col__head{
    .p-block-col__head-img{
      width: min(calc( 120 / 375 * 100vw) , 160px);
    }
  }
}
.p-block-col--young{
  .p-block-col__head{
    .p-block-col__head-img{
      margin-top: calc(min(calc( 105 / 375 * 100vw) , 105px) * -1);
      margin-bottom: -5px;
      width: min(calc( 125 / 375 * 100vw) , 166px);
    }

    .p-block-col__head-i--01{
      top: min(calc(  70 / 375 * 100vw) , 80px);
      right: min(calc( 40 / 375 * 100vw) , 45px);
    }

    .p-block-col__head-i--02{
      top: min(calc( 128 / 375 * 100vw) , 134px);
      left: min(calc( 22 / 375 * 100vw) , 27px);
    }
  }

  .p-block-col__textarea{
    margin-top: 40px;

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

  .p-block-col__img{
    margin-bottom: 70px;
  }
}
.p-block-col--middle{
  .p-block-col__head{
    .p-block-col__head-label{
      padding-bottom: min(calc( 80 / 375 * 100vw) , 80px);
    }

    .p-block-col__head-img{
      margin-bottom: -5px;
      margin-top: calc(min(calc( 120 / 375 * 100vw) , 120px) * -1);
      width: min(calc( 150 / 375 * 100vw) , 230px);
    }

    .p-block-col__head-i--01{
      top: min(calc(  110 / 375 * 100vw) , 130px);
      right: min(calc( 40 / 375 * 100vw) , 45px);
    }

    .p-block-col__head-i--02{
      top: min(calc( 78 / 375 * 100vw) , 85px);
      left: min(calc( 56 / 375 * 100vw) , 65px);
    }
  }

  .p-block-col__textarea{
    margin-top: 40px;

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

  .p-block-col__img{
    margin-bottom: 85px;
  }
}

.p-block-col--second{
  .p-block-col__head{
    .p-block-col__head-label{
      padding-bottom: min(calc( 17 / 375 * 100vw) , 17px);
    }

    .p-block-col__head-img{
      margin-bottom: -5px;
      margin-top: calc(min(calc( 90 / 375 * 100vw) , 90px) * -1);
      width: min(calc( 140 / 375 * 100vw) , 190px);
    }

    .p-block-col__head-i--01{
      top: min(calc( 40 / 375 * 100vw) , 45px);
      right: min(calc( 80 / 375 * 100vw) , 85px);
    }
    .p-block-col__head-i--02{
      top: min(calc( 145 / 375 * 100vw) , 160px);
      left: min(calc( 46 / 375 * 100vw) , 50px);
    }
  }

  .p-block-col__textarea{
    margin-top: 40px;

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

/*  p-list-item
--------------------------------------------- */
.p-list-item{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 60px;
  row-gap: 70px;

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

  > li{
    display: flex;
    flex-direction: column;
    width: calc(50% - calc(60px / 2));

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

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

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

  .p-list-item__head{
    width: 450px;
    max-width: calc(100% - 40px);
    margin-inline: auto;

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

    .c-list-item__head-img{
      width: 100%;
      height: auto;
    }
  }

  .p-list-item__body{
    flex: 1 1 auto;
    width: 100%;
    border-radius: 20px;
    margin-top: -2px;
    padding-top: 50px;
    padding-bottom: 55px;
    background-color: var(--color-white);
    box-shadow: 4px 4px 3px rgba(0, 148, 120, 0.1);


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

    .p-list-item__body-inner{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      row-gap: 10px;

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

    .p-list-item__body-textarea{
      max-width: calc(100% - 130px);
      margin-inline: auto;
      margin-top: 30px;

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

      > p{
        font-weight: 500;
        line-height: 1.8;
      }
    }
  }

  .p-list-item__name{
    min-width: 200px;
    max-width: 100%;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 999px 999px 0;
    padding: 10px 30px 10px 42px;
    font-size: min(calc( 22 / 375 * 100vw) , 24px);
    line-height: 1.2;
    color: var(--color-white);
    background-color: var(--color-secondary);

    @media screen and (max-width: 1023px) {
      max-width: calc(100% - 40px);
      min-height: auto;
      margin-inline: auto;
      border-radius: 999px;
    }

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

  .p-list-item__lead{
    list-style: none;
    padding-left: 0;
    line-height: 1.7;
    letter-spacing: 0.03em;
    font-weight: 500;
    color: var(--color-primary);
    margin-left: min(calc( 50 / 1400 * 100vw), 57px);

    @media screen and (max-width: 1023px) {
      max-width: calc(100% - 40px);
      margin-inline: auto;
    }
  }
}



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

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

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

  @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(55 / 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;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: calc(min(calc( 80 / 1200 * 100vw) , 80px) * -1);
  column-gap: 40px;

  @media screen and (max-width: 767px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 30px;
  }
}

.p-intro-content__content{
  order: 2;
  margin-bottom: min(calc( 30 / 1200 * 100vw) , 30px);

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

.p-intro-content__img01{
  order: 1;
  margin-top: 5px;
  width: calc(160 / 1200 * 100%);
  height: auto;

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

.p-intro-content__img02{
  order: 3;
  margin-top: 30px;
  margin-left: calc(35 / 1200 * 100%);
  width: calc(125 / 1200 * 100%);
  height: auto;

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


/*  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: auto;
  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__img01{
    order: 1;
    width: min(calc( 129 / 1400 * 100vw) , 129px);
    height: auto;

    @media screen and (max-width: 767px) {
      order: 2;
      width: min(calc( 64.5 / 375 * 100vw) , 129px);
    }
  }

  .p-recommendation-heading__img02{
    order: 3;
    width: min(calc( 114 / 1400 * 100vw) , 114px);
    height: auto;

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

  .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;

    p{

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

        @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;
    }
  }

  .p-recommendation-block__img01{
    width: min(calc( 340 / 1400 * 100vw) , 340px);
    height: auto;

    @media screen and (min-width: 1024px) {
      position: absolute;
      left: -50px;
      bottom: 65px;
    }

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

  .p-recommendation-block__img02{
    width: min(calc( 305 / 1400 * 100vw) , 305px);
    height: auto;

    @media screen and (min-width: 1024px) {
      position: absolute;
      right: 10px;
      bottom: 40px;
    }


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