@charset "utf-8";

/* ------------------
pagevisual
------------------ */
.pv_h1 {
  background: url("../../../common/img/pv_h1.webp")no-repeat center;
  background-size: cover;
}

/* ------------------
intro_block
------------------ */
.intro_block {
  padding: 56px 0;
  background: #E4E4E4;
  & > div {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 72px;
  }
  & p {
    width: 100%;
    max-width: 460px;
  }
}

/*appeal_flow*/
.appeal_flow {
  width: 90%;
  max-width: 880px;
  margin: 44px auto 80px;
}
.appeal_ttl {
  width: 100%;
  padding: 4px 44px;
  background: var(--theme-color);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 4px;
  margin-bottom: 24px;
}
.appeal_cando {margin-bottom: 64px;}
.appeal_cando--flex {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  li {
    width: 100%;
    max-width: 428px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    p:first-child {
      position: relative;
      width: 100%;
      height: 96px;
      background: #F5F2E5;
      color: var(--theme-color);
      font-size: 1.8rem;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      &::before {
        content: '';
        position: absolute;
        background: url("../img/cando_before.svg")no-repeat center;
        background-size: contain;
        width: 31px;
        height: 44px;
        top: 0;
        left: 2.5em;
        bottom: 0;
        margin: auto;
      }
    }
  }
}

.appeal_problem--flex {
  position: relative;
  padding-left: calc(114px + 28px);
  width: 100%;
  max-width: 480px;
  margin: 40px auto 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  &::before {
    content: '';
    position: absolute;
    background: url("../img/problem_icon.svg")no-repeat center;
    background-size: contain;
    width: 114px;
    height: 135px;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 1em;
  }
  li {
    display: flex;
    gap: 10px;
    img {
      transform: rotate(-90deg);
    }
    p {
      font-size: 2rem;
      color: var(--theme-color);
    }
  }
}
.appeal_problem + figure {text-align: center;margin-bottom: 2em;}

.appeal_article {
  h2 {
    background: var(--theme-color);
    color: #D4C68C;
    padding: 20px 5%;
    letter-spacing: 4.8px;
    text-align: center;
  }
}
.appeal_article--flex {
  background: #F5F2E5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 40px;
  p {
    width: 100%;
    max-width: 395px;
  }
}

/*point_outer*/
.point_outer {
  background: #F2F2F2;
  padding: 56px 0;
}
.point_inner {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  h2 {
    background: var(--theme-color);
    color: #fff;
    padding: 16px 44px;
    font-size: 2rem;
    letter-spacing: 4px;
    span {color: var(--main-color);}
    & + p {
      width: 100%;
      max-width: 900px;
      margin: 20px auto;
      margin-right: 0;
    }
  }
}
.point_outer--flex {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.point_outer--parent {
  position: relative;
  width: 100%;
  max-width: 526px;
}
.point_outer--child {
  position: relative;
  background: #fff;
  padding: 40px 20px 24px;
  margin-bottom: 20px;
  h3 {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--main-color);
    color: var(--theme-color);
    padding: 0 20px;
    width: 100%;
    font-size: 2.2rem;
  }
  p {
    margin: 20px 0;
  }
}
.point_outer--child:nth-child(2) {margin-bottom: 24px;}


/*merit_outer*/
.merit_outer {
  padding: 40px 0 64px;
}
.merit_flow {
  width: 90%;
  max-width: 880px;
  margin: 0 auto;
  & > h2 {
    width: 100%;
    margin-bottom: 32px;
    padding-bottom: 10px;
    border-bottom: 4px solid var(--theme-color);
    color: var(--theme-color);
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 2px;
  }
}
.merit_flow--list {
  position: relative;
  margin-bottom: 80px;
  li {
    margin-bottom: 32px;
    h3 {
      width: 100%;
      height: 40px;
      padding: 0 10px;
      background: var(--theme-color);
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      gap: 10px;
      mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: var(--main-color);
        color: var(--theme-color);
        border-radius: 50%;
        letter-spacing: 0;
        padding-bottom: 1px;
      }
    }
  }
  li:last-child {margin-bottom: 0;}
}
.flex_start {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  p {
    width: 100%;
  }
}
.merit_flow--list .flex_start {
  p {max-width: 466px;}
}


.merit_plan {
  position: relative;
}
.merit_plan--anchor {
  width: 100%;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.merit_plan--sec {margin-bottom: 40px;}
.merit_plan--sec:last-child {margin-bottom: 0;}

#anchor01, #anchor02, #anchor03 {
  position: relative;
  top: -80px;
}

.plan_ttl {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 4px;
  padding: 4px 44px;
  margin-bottom: 32px;
}
#anchor01 + .plan_ttl {background: var(--theme-color);}
#anchor02 + .plan_ttl {background: var(--main-color);}
#anchor03 + .plan_ttl {background: #CC0000;}

.merit_plan--sec .flex_start {
  gap: 48px;
  li:last-child {
    width: 100%;
    max-width: 387px;
  }
}
.merit_plan--sec .bold {
  font-weight: bold;
  margin-bottom: 32px;
}

/*case_outer*/
.case_outer {
  background: #F2F2F2;
  padding: 56px 0 96px;
  margin-bottom: 40px;
  h2 {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    background: var(--theme-color);
    color: #fff;
    padding: 16px 44px;
    font-size: 2rem;
    letter-spacing: 4px;
    span {
      color: var(--main-color);
    }
  }
}
.case_outer .flex_start {
  width: 90%;
  max-width: 865px;
  margin: 40px auto 28px;
  p {max-width: 471px;}
}

.case_engage {
  width: 90%;
  max-width: 865px;
  margin: 0 auto;
  & > p {
    background: var(--theme-color);
    color: #fff;
    text-align: center;
    padding: 8px;
  }
}
.case_engage--list {
  position: relative;
  background: #fff;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  li {
    width: 100%;
    max-width: 241px;
    p {margin-bottom: 16px;}
    p:last-child {margin-bottom: 0;}
  }
}
.name_ttl {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  padding: 4px;
  text-align: center;
}

/* iPad縦 */
@media screen and (orientation: portrait) and (min-width: 768px){
  
}

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

  /*intro_block*/
  .intro_block {
    & > div {
      flex-direction: column;
      gap: 28px;
      padding: 40px 5%;
    }
  }

  /*appeal_flow*/
  .appeal_flow {margin-bottom: 64px;}
  .appeal_ttl {
    padding: 4px 5%;
    letter-spacing: 2px;
    line-height: 1.6;
  }
  .appeal_cando {margin-bottom: 48px;}
  .appeal_cando--flex {
    flex-direction: column;
    gap: 16px;
    li {
      gap: 8px;
      p:first-child {
        height: auto;
        padding: 16px 5% 16px 4.5em;
        justify-content: flex-start;
        &::before {
          left: 1.5em;
        }
      }
    }
  }
  .appeal_problem--flex {
    padding-left: calc(72px + 28px);
    margin: 24px auto;
    &::before {
      width: 72px;
      height: 85px;
    }
    & li {
      p {font-size: 1.6rem;}
    }
  }
  
  .appeal_article {
    h2 {
      padding: 8px 5%;
      font-size: 2rem;
      letter-spacing: 2.4px;
      text-align: left;
      line-height: 1.6;
    }
  }
  .appeal_article--flex {
    flex-direction: column;
    gap: 32px;
    padding: 28px 5%;
  }

  /*point_outer*/
  .point_inner {
    h2 {
      padding: 8px 5%;
      font-size: 1.8rem;
      letter-spacing: 2px;
      line-height: 1.6;
    }
  }
  .point_outer--flex {
    justify-content: center;
  }

  /*merit_outer*/
  .merit_flow {
    & > h2 {
      font-size: 2rem;
      letter-spacing: 1.28px;
      padding-bottom: 6px;
      margin-bottom: 28px;
    }
  }
  .merit_flow--list {
    margin-bottom: 56px;
    li h3 {
      height: auto;
      padding: 8px 5%;
      margin-bottom: 20px;
      align-items: flex-start;
      line-height: 1.6;
      font-size: 1.8rem;
      mark {
        min-width: 24px;
        max-height: 24px;
        margin-top: 2px;
        padding-bottom: 0;
      }
    }
  }
  .merit_flow--list .flex_start {gap: 16px;}

  .flex_start {flex-direction: column-reverse;}

  .merit_plan--anchor {
    gap: 16px;
  }
  #anchor01, #anchor02, #anchor03 {
    top: auto;
    display: block;
    padding-top: 80px;
    margin-top: -80px;
    z-index: -1;
  }
  .plan_ttl {
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 4px 5%;
    margin-bottom: 20px;
    line-height: 1.6;
  }
  .merit_plan--sec .flex_start {
    gap: 24px;
  }
  .sp_figure {margin-left: 2em;}
  .merit_plan--sec .bold {margin-bottom: 20px;}

  /*case_outer*/
  .case_outer {
    padding-bottom: 64px;
    h2 {
      font-size: 1.8rem;
      letter-spacing: 2px;
      line-height: 1.6;
      padding: 8px 5%;
    }
  }
  .case_outer .flex_start {
    margin: 28px auto 32px;
    flex-direction: column;
  }
  .case_engage--list {
    padding: 32px 5%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    li {
      max-width: 100%;
      p:first-child {display: none}
      p:last-child {
        position: relative;
        padding-bottom: 336px;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto;
          width: 241px;
          height: 316px;
        }
      }
    }
  }
  .case_engage--list li:first-child p:last-child::after {
    background: url("../img/engage01.webp")no-repeat center;
    background-size: contain;
  }
  .case_engage--list li:nth-child(2) p:last-child::after {
    background: url("../img/engage02.webp")no-repeat center;
    background-size: contain;
  }
  .case_engage--list li:last-child p:last-child::after {
    background: url("../img/engage03.webp")no-repeat center;
    background-size: contain;
  }
}