@charset "utf-8";
/* CSS Document */
/* ==========================
下層ページ共通
============================= */
main p {
  line-height: 28px;
}

.contents-box {
  overflow: hidden;
  margin-bottom: 50px;
}
.intro_block .contents-box {
  display: flex;
  align-items: center;
  gap: 56px;
  figure {margin: 0;}
  a {
    text-decoration: underline;
    &:hover {text-decoration: none;}
  }
}

.merit_sec .contents-box p {font-size: 13.6px;}

/*=========================================
plan_sec
=========================================*/
.plan_sec {margin-bottom: 64px;}
.plan_sec .h4 {
  & + p {
    margin-bottom: 56px;
  }
}

.indent {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.sec3_block {
  position: relative;
  margin-top: 40px;
}
.sec3_anchor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  li img {width: 100%;}
}
.sec3_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.sec3_list--child {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  font-weight: bold;
  &:nth-child(1) {
    h4 {
      background: #A0C452;
    }
    div figure {
      min-width: 296px;
      text-align: center;
    }
    div figure img {
      max-width: 160px;
    }
  }
  &:nth-child(2) {
    h4 {
      background: #5ECAD6;
    }
  }
  &:nth-child(3) {
    h4 {
      background: #E68967;
    }
  }
  h4 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #fff;
    height: 64px;
    display: flex;
    align-items: center;
    padding-left: 1em;
  }
  div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    figure {
    max-width: 296px;
    margin: 0;
      img {width: 100%;}
    }
  }
}
.sec3_list--child div p {
  background: #fff;
  padding: 0;
  font-weight: normal;
  & > span {
    font-size: 17px;
    font-weight: bold;
    display: block;
    margin-bottom: 24px;
  }
}

/*what_block*/
.what_block {margin-bottom: 64px;}

/*=========================================
case_sec
=========================================*/
.case_ttl {
  font-weight: bold;
  span {color: #872200;}
  & + p {
    margin-bottom: 16px;
    a {
      display: block;
      padding-left: 1em;
      text-indent: -1em;
      text-decoration: underline;
      &::hover {
        text-decoration: none;
      }
    }
  }
}
.case_flex--outer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px;
  margin-top: 16px;
  & > a {
    width: 100%;
    max-width: 257px;
    p {
      margin-bottom: 8px;
    }
    img {
      width: 100%;
      height: auto;
    }
  }
}
.case_flex {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    min-width: 165px;
    & > p {line-height: 1.6;}
  }
  figure {margin: 0;}
}
.case_sec--block {
  margin-bottom: 64px;
  background: #F2EFE1;
  padding: 32px 5%;
}
.case_sec--block:last-child {margin-bottom: 96px;}

.case_sec__first {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 1.5em;
  figure {
    margin: 0;
    width: 100%;
    max-width: 266px;
    img {
      width: 100%;
      height: auto;
    }
  }
}

.case_sec--block:last-child .case_flex {
  li {
    min-height: 189px;
  }
}

/* スマートフォン
---------------------------------------- */
@media screen and ( max-width: 767px ){
  .intro_block .contents-box {
    flex-direction: column-reverse;
    gap: 24px;
    margin-bottom: 56px;
  }
  .contents-box {
    margin-bottom: 32px;
  }

  .plan_sec {
    margin-top: 56px;
    margin-bottom: 64px;
  }
  .plan_sec .h4 {
    & + p {
      font-size: 16px;
      margin-bottom: 24px;
    }
  }
  

  .case_flex--outer {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    & a > p {text-align: center;}
  }
  .case_flex {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    li {
      min-width: inherit;
      align-items: center;
      gap: 4px;
      & > p {text-align: center;}
    }
  }
  .case_sec--block {
    margin-bottom: 40px;
    &:last-child {margin-bottom: 72px;}
  }
  .case_sec--block:last-child .case_flex {
    li {min-height: inherit;}
  }

  .sec3_list--child {
    padding: 0;
    h4 {
      height: auto;
      padding: 8px 11px;
      font-size: 17px;
      margin-bottom: 20px;
    }
  }
  .sec3_list--child div {
    flex-direction: column-reverse;
    gap: 24px;
    p > span {
      margin-bottom: 16px;
    }
  }
  .sec3_list--child div figure {
    margin: 0 auto;
  }
  .sec3_list--child:first-child div figure {min-width: inherit;}
  
  .sec3_list {
    gap: 60px;
  }
  .case_sec__first {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 1em;
  }
}