@charset "UTF-8";
:root {
  /* 色 */
  --dark-color: #1673C2;
  --normal-color: #359DE3;
  --light-color: #DEF9FD;
  --orange-color: #EB5C02;
  /* 余白 */
  --space-80: 80px;
  --space-65: 65px;
  --space-45: 45px;
  --space-30: 30px;
  /* 文字サイズ */
  --font-70: 7rem;
  --font-60: 6rem;
  --font-48: 4.8rem;
  --font-40: 4rem;
  --font-36: 3.6rem;
  --font-32: 3.2rem;
  --font-24: 2.4rem;
  --font-18: 1.8rem;
  /* 文字種類 */
  --unique-font: 'M PLUS 1p';
  @media screen and (max-width: 767px) {
    --space-80: 60px;
    --space-65: 40px;
    --space-45: 30px;
    --space-30: 20px;
    /* 文字サイズ */
    --font-70: 5rem;
    --font-60: 4.4rem;
    --font-48: 3.6rem;
    --font-40: 2.8rem;
    --font-36: 2.6rem;
    --font-32: 2.4rem;
    --font-24: 1.8rem;
    --font-18: 1.6rem;
  }
}
.font-70 {font-size: var(--font-70);font-weight: 800!important;}
.font-60 {font-size: var(--font-60);font-weight: 800!important;}
.font-48 {font-size: var(--font-48);font-weight: 800!important;}
.font-40 {font-size: var(--font-40);font-weight: 800!important;}
.font-36 {font-size: var(--font-36);font-weight: 800!important;}
.font-24 {font-size: var(--font-24);font-weight: 800!important;}
.font-18 {font-size: var(--font-18);font-weight: 800!important;}
.center_txt {text-align: center;}
.right_txt {text-align: right;}

.dark-color {color: var(--dark-color);}
.sentence:not(:last-child) {margin-bottom: var(--space-30);}


main {overflow: hidden;}
.under_mv {background: url("../../img/mv.png") no-repeat center / cover;}
.rec_menu {margin-top: 0;}
.ft_cont::before{
  background: url("../../img/ft_bg_t.png") no-repeat center;
  background-size: 100% 100%;
}

/* 固有CSS */
.five_outer {
  padding-block: var(--space-45) var(--space-80);
}
.five_inner {
  width: 90%;
  max-width: 1024px;
  margin-inline: auto;
  p {font-weight: 500;}
}
.five_intro {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  &::before,
  &::after {
    content: '';
    display: block;
  }
  &::before {
    background: url(../img/intro_icon1.svg)no-repeat bottom / contain;
    width: 126px;
    height: 118px;
    aspect-ratio: 126 / 109;
  }
  &::after {
    background: url(../img/intro_icon2.svg)no-repeat center / contain;
    width: 151px;
    height: 118px;
    aspect-ratio: 151 / 118;
    transform: translateY(2px);
  }
  @media screen and (max-width: 767px) {
    align-items: flex-end;
    gap: 2px;
    &::before {
      width: auto;
      height: 40px;
    }
    &::after {
      width: auto;
      height: 40px;
    }
  }
}
.five_intro--ttl {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--font-36);
  font-weight: 700!important;
  @media screen and (max-width: 767px) {
    font-size: min(2rem, 4.2vw);
    gap: 4px;
    text-align: center;
    & > img {
      width: 30px;
      aspect-ratio: 1 / 1;
    }
  }
}

.five_cont {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-30);
  margin-bottom: var(--space-80);
}
.five_item {
  position: relative;
  width: 100%;
  border: 8px solid var(--normal-color);
  border-radius: 35px;
  &.w-half {
    width: calc(50% - 15px);
  }
  @media screen and (max-width: 767px) {
    &.w-half {width: 100%;}
  }
}
.five_ttl {
  padding: var(--space-30);
  background: var(--light-color);
  color: var(--normal-color);
  text-align: center;
  font-weight: 800;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  &.bg-none {background: none;padding-bottom: 0;}
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
.five_contents {
  padding-block: var(--space-30);
}
.five_indent--list {
  &:has(+ *) {margin-bottom: var(--space-30);}
  li {
    position: relative;
    padding-left: 1.5em;
    text-indent: -1.5em;
    &:not(:last-child) {margin-bottom: 0.5em;}
    &::before {
      content: '●';
      color: var(--dark-color);
      font-size: var(--font-18);
      padding-right: 5px;
    }
  }
  &.wrap-50 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    li {width: calc(50% - 0.5em);margin-bottom: 0;}
  }
  &.wrap-25 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    li {width: calc(25% - 3em/4);margin-bottom: 0;}
  }
  @media screen and (max-width: 767px) {
    li {text-indent: -1.3em;}
    &.wrap-50 {
      gap: 0.5em;
      li {width: 100%;}
    }
    &.wrap-25 {
      gap: 0.5em;
      li {width: calc(50% - 0.25em);}
    }
  }
}

/* c1 */
#c1 {
  &::before {
    content: '';
    position: absolute;
    background: url(../img/c1_bg.webp)no-repeat bottom / contain;
    width: 100%;
    height: 535px;
    inset: auto 0 -10px 0;
    z-index: -1;
  }
  .five_contents {
    padding-inline: var(--space-30);
    padding-bottom: 0;
  }
  img[src="img/c1_img.webp"] {
    position: relative;
    z-index: -1;
    transform: translateY(2px);
  }
  @media screen and (max-width: 767px) {
    &::before {bottom: 0;}
    .font-60 {font-size: min(2.8rem, 8vw);}
    img[src="img/c1_img.webp"] {
      height: 300px;
      object-fit: contain;
      object-position: bottom;
    }
  }
}
.c1_flex {
  position: relative;
  @media screen and (max-width: 767px) {
    padding-top: 280px;
  }
}
.c1_flex--left {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  p:nth-child(2) {color: var(--orange-color);}
  p:nth-child(3) {
    transform: translateY(-20px);
    span {
      font-size: 12rem;
      font-family: var(--unique-font);
    }
  }
  @media screen and (max-width: 767px) {
    right: 0;
    p:nth-child(3) span {
      position: relative;
      top: 2px;
      font-size: min(10rem, 20vw);
    }
  }
}
.c1_flex--right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 10px;
  p {
    writing-mode: vertical-rl;
    text-orientation: upright;
    & + p {margin-top: var(--space-30);}
  }
  @media screen and (max-width: 767px) {
    top: 190px;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    p {
      writing-mode: initial;
      text-orientation: initial;
      & + p {margin-top: 0;}
    }
  }
}
.c1_orange {
  background: var(--orange-color);
  color: #fff;
  padding: 0.5em 0.2em;
  margin-bottom: 0.2em;
  border-radius: 30px;
  @media screen and (max-width: 767px) {
    font-size: min(2.6rem, 7vw);
    padding: 0.25em 0.75em;
    margin-bottom: 0;
    margin-right: 0.25em;
  }
}

/* c2 */
#c2 .five_ttl {
  background: url(../img/c2_abs.webp)no-repeat bottom / cover;
  background-position: 0 -5px;
  min-height: 320px;
  @media screen and (max-width: 767px) {
    min-height: 250px;
  }
}
#c2 .five_contents {padding-bottom: 0;}
.c2_flex {
  width: 90%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  & > * {
    width: 50%;
  }
  @media screen and (max-width: 767px) {
    & > div p {font-size: min(1.6rem, 3.6vw);}
  }
}

/* c3 */
#c3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &::before {
    content: '';
    position: absolute;
    background: url(../img/c3_abs.webp)no-repeat top / cover;
    width: 100%;
    height: 259px;
    inset: auto 0 0 0;
    margin: auto;
    z-index: -1;
  }
  .five_ttl {
    padding-top: 60px;
  }
  img[src="img/c3_img.webp"] {
    position: relative;
    z-index: -1;
    transform: translateY(5px);
  }
  @media screen and (max-width: 767px) {
    .five_ttl {padding-top: var(--space-30);}
    img[src="img/c3_img.webp"] {
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
  }
}
#c3 .five_contents {
  position: relative;
  padding-bottom: 0;
}
.c3_des {
  position: absolute;
  inset: 30px 30px auto auto;
  text-align: center;
  font-size: var(--font-24);
  @media screen and (max-width: 767px) {
    inset: 30px 0 auto 0;
  }
}
.c3_orange {
  background: var(--orange-color);
  border-radius: 24.5px;
  color: #fff;
  font-size: var(--font-24);
  padding: 0.1em 1em;
  display: inline-block;
  font-weight: 800;
  margin-bottom: 0.4em;
  margin-right: 0.2em;
}

/* c4 */
#c4 {
  &::before {
    content: '';
    position: absolute;
    background: url(../img/c4_img1.svg)no-repeat center / contain;
    width: 133px;
    height: 322px;
    inset: auto auto 0 0;
  }
  &::after {
    content: '';
    position: absolute;
    background: url(../img/c4_img2.svg)no-repeat center / contain;
    width: 141px;
    height: 304px;
    inset: auto 0 0 auto;
  }
  .five_contents {padding-top: var(--space-65);}
  .five_ttl {
    position: relative;
    background: url(../img/c4_ttl_bg.webp)no-repeat bottom / cover;
    padding-top: 0;
    min-height: 190px;
    & > span.font-36 {
      margin-right: 75px;
      position: relative;
      left: -35px;
    }
  }
  .five_ttl img {
    position: absolute;
    inset: 0 0 auto 0;
    margin: auto;
    /* transform: translateY(-7px); */
  }
  @media screen and (max-width: 767px) {
    padding-bottom: 250px;
    &::before,
    &::after {height: 240px;}
    .five_contents {padding-top: 65px;}
    .five_ttl {
      background: var(--light-color);
      font-size: min(3.6rem, 6.8vw);
      padding-top: 15px;
      min-height: initial;
      margin-bottom: 50px;
      line-height: 1.3;
      & > span.font-36 {
        margin-right: 0;
        left: auto;
      }
    }
    .five_ttl img {
      position: relative;
      width: auto;
      height: 56px;
      aspect-ratio: 1 / 1;
      margin-inline: auto;
      margin-top: 10px;
      transform: initial;
    }
  }
}
.c4_list {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 20px;
  width: 90%;
  max-width: 800px;
  margin-inline: auto;
  @media screen and (max-width: 767px) {
    gap: 48px 10px;
  }
}
.c4_list--item {
  position: relative;
  width: calc(25% - 15px);
  & > p {
    position: relative;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 185px;
    aspect-ratio: 1 / 1;
    background: var(--light-color);
    border-radius: 50%;
    text-align: center;
  }
  .c4_list--cont {
    position: absolute;
    width: 100%;
    /* inset: -150px 0 auto 0; */
    margin: auto;
    padding: 1em;
    visibility: hidden;
    z-index: -1;
    top: -170px;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 28px;
    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 12px solid transparent;
      border-left: 12px solid transparent;
      border-bottom: 21px solid #45a7e6;
      border-top: 0;
      inset: auto 0 -20px 0;
      margin: auto;
      transform: rotate(180deg);
    }
    p {
      position: relative;
      color: #fff;
      font-weight: bold;
      font-size: 1.5rem;
      line-height: 1.7;
      z-index: 1;
      a {
        display: inline-block;
        color: #fff;
        text-decoration: underline;
        &:hover {text-decoration: none;}
      }
    }
    & > * {width: 100%;}
    figure img {
      width: 100%;
      border-radius: 28px;
    }
  }
  &:hover .c4_list--cont {
    min-width: 400px;
    min-height: 120px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1em;
    background: transparent linear-gradient(120deg, #1673c2 0%, #5fc4f9 100%) 0% 0% no-repeat padding-box;
    /* border: 1px solid #000; */
    visibility: visible;
    opacity: 1;
    z-index: 1;
    /* &::before {bottom: -21px;} */
  }
  @media screen and (max-width: 767px) {
    width: calc(50% - 5px);
    & > p {
      min-height: initial;
    }
    .c4_list--cont {
      /* top: -180px; */
      p {font-size: min(1.3rem, 3.1vw);}
      figure img {
        border-radius: 18px;
      }
    }
    &:nth-child(8) .c4_list--cont p {font-size: min(1.3rem, 3.1vw);}
    &:hover .c4_list--cont {
      min-width: initial;
      min-height: 120px;
      padding-inline: 0.5em;
    }
  }
}
.c4_list--num {
  position: absolute;
  inset: -50px 0 auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-family: var(--unique-font);
  color: var(--dark-color);
}
/* c5 */
#c5 {
  &::before {
    content: '';
    position: absolute;
    background: url(../img/c5_abs1.svg)no-repeat bottom / contain;
    width: 45%;
    max-width: 406px;
    height: 210px;
    inset: auto auto 0 -5px;
    z-index: -1;
  }
  &::after {
    content: '';
    position: absolute;
    background: url(../img/c5_abs2.svg)no-repeat bottom / contain;
    width: 45%;
    max-width: 406px;
    height: 210px;
    inset: auto -5px 0 auto;
    z-index: -2;
  }
  .five_contents {padding-block: var(--space-45) var(--space-30);}
  .five_contents > img {
    position: absolute;
    z-index: 0;
    &[src="img/c5_icon1.svg"] {
      inset: auto auto -2px 40px;
      z-index: -1;
    }
    &[src="img/c5_icon2.svg"] {
      inset: auto 80px -2px auto;
      z-index: -1;
    }
  }
  @media screen and (max-width: 767px) {
    &::before,
    &::after {
      height: 104px;
      aspect-ratio: 406 / 210;
    }
    .five_contents {padding-bottom: 120px;}
    .five_contents > img {
      width: auto;
      height: 104px;
      &[src="img/c5_icon1.svg"] {left: 5%;}
      &[src="img/c5_icon2.svg"] {right: 5%;}
    }
    p:has(img[src="img/c5_img.webp"]) {width: 90%;margin-inline: auto;}
  }
}

/* c6 */
#c6 {
  .five_contents {padding-bottom: 0;}
  img[src="img/c6_img.svg"] {
    position: relative;
    z-index: -1;
    transform: translateY(7px);
  }
}
.c6_list {
  width: 90%;
  max-width: 900px;
  margin: 0 auto var(--space-30);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  & + p.font-18 {margin-bottom: 1em;line-height: 1.7;}
  @media screen and (max-width: 767px) {
    justify-content: center;
    & + p {width: 90%;margin-inline: auto;}
  }
}
.c6_list--item {
  position: relative;
  width: calc(100%/4 - 60px/4);
  background: var(--light-color);
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-30) 10px;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
  }
  &:nth-child(1)::before {
    background: url(../img/c6_bg1.webp)no-repeat center / contain;
    width: 100%;
    max-width: 177px;
    height: 130px;
  }
  &:nth-child(2) {
    gap: 15px;
    &::before {
      background: url(../img/c6_bg2.webp)no-repeat center / contain;
      width: 100%;
      max-width: 125px;
      height: 148px;
    }
    .c6_list--num:nth-child(2) {margin-inline: -0.25em;}
  }
  &:nth-child(3)::before {
    background: url(../img/c6_bg3.webp)no-repeat center / contain;
    width: 100%;
    max-width: 162px;
    height: 97px;
  }
  &:nth-child(4) {
    gap: 15px;
    &::before {
      background: url(../img/c6_bg2.webp)no-repeat center / contain;
      width: 100%;
      max-width: 125px;
      height: 148px;
    }
  }
  & > p {
    position: relative;
    z-index: 1;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
    max-width: 400px;
    padding-inline: 5%;
    &:nth-child(2),
    &:nth-child(4) {
      gap: 0;
      .font-48 {font-size: var(--font-48);}
    }
    &:nth-child(1)::before,
    &:nth-child(2)::before,
    &:nth-child(3)::before,
    &:nth-child(4)::before {height: 80%;}
  }
}
.c6_list--ttl {
  font-weight: 800;
  & + p {
    font-size: var(--font-18);
    font-weight: 800;
  }
}
.c6_list--num {
  font-weight: 800;
  font-family: var(--unique-font);
  color: var(--dark-color);
}
.c6_ttl--note {
  color: #000;
  font-size: 1.6rem;
  display: inline-block;
  width: 100%;
  text-align: right;
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
    text-align: center;
  }
}
.five_ttl:has(.c6_ttl--note) {
  line-height: 0.8;
  padding-block: 50px 40px;
  @media screen and (max-width: 767px) {
    line-height: initial;
    padding-block: var(--space-30);
  }
}

/* c7 */
.c7_average {
  font-family: var(--unique-font);
  font-size: var(--font-32);
  text-align: center;
  margin-bottom: 0.5em;
  & .font-60 {
    color: var(--dark-color);
    font-weight: 800;
  }
}
.c7_list {
  width: 90%;
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-30);
  @media screen and (max-width: 767px) {
    justify-content: center;
  }
}
.c7_list--item {
  width: calc(100%/3 - 20px);
  background: var(--light-color);
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-30) 10px;
  @media screen and (max-width: 767px) {
    width: 100%;
    max-width: 320px;
    padding-inline: 5%;
  }
}
.c7_list--ttl {
  font-weight: 800;
  & + p {
    font-size: var(--font-18);
    font-weight: 800;
  }
}
.c7_list--num {
  font-weight: 800;
  font-family: var(--unique-font);
  color: var(--dark-color);
}

/* c8 */
#c8 {
  .five_contents {
    padding-inline: var(--space-30);
    padding-block: var(--space-45);
  }
  .five_indent--list span {font-weight: 800;}
}
.c8_sec {
  &:not(:last-child) {
    margin-bottom: var(--space-45);
  }
}
.c8_ttl {
  font-size: var(--font-32);
  font-weight: 800;
  padding: 0.25em;
  border: 3px solid var(--dark-color);
  border-radius: 35px;
  color: var(--dark-color);
  text-align: center;
  margin-bottom: 0.75em;
}
.c8_table {
  width: 100%;
  margin-bottom: 0.5em;
  tr {
    border-bottom: 1px solid var(--dark-color);
  }
  tr:first-child {
    border-top: 1px solid var(--dark-color);
  }
  th, td {
    font-weight: 500;
    text-align: center;
    padding: 0.5em;
  }
  thead th:first-child,
  tbody td:first-child {
    border-right: 1px solid var(--dark-color);
  }
  th {
    background: #ECECEC;
    font-size: var(--font-24);
  }
  & + p {line-height: 1.8;}
}
.c8_secSub:not(:last-child) {margin-bottom: var(--space-30);}
.c8_ttlSub {
  width: 100%;
  font-size: var(--font-24);
  font-weight: 800!important;
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
  padding-bottom: 0.75em;
  
}

/* c9 */
#c9 .five_contents {
  padding: var(--space-30);
  padding-bottom: 0;
  @media screen and (max-width: 767px) {
    
  }
}
.c9_flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  & > * {width: 50%;}
  & > figure {text-align: right;}
  .c9_flex--txt {
    text-align: center;
    line-height: 2;
    background: url(../img/c9_abs.webp)no-repeat center / contain;
    background-position: 40px;
    min-height: 155px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (max-width: 767px) {
    flex-direction: column-reverse;
    & > * {width: 100%;}
    .c9_flex--txt {
      background: none;
      border: 1px solid #ccc;
      border-radius: 100px;
      padding: 20px;
      min-height: initial;
    }
  }
}

/* c10 */
#c10 {
  .five_contents {
    padding: var(--space-30);
  }
  .five_indent--list {margin-bottom: 0;}
}
.c10_flex {
  display: flex;
  justify-content: space-between;
  gap: var(--space-30);
  margin-bottom: var(--space-30);
  &:not(:has(.five_indent--list)) {
    justify-content: flex-end;
  }
  & > figure {
    width: 100%;
    max-width: 347px;
  }
  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}


/* five_bnr */
.five_bnr {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 30px;
  }
}
.five_bnr--item {
  width: calc(50% - 20px);
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.five_bnr--ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: var(--font-24);
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.75em;
  &::before {
    content: '';
    display: block;
    background: url(../img/bnr_abs1.svg)no-repeat center / contain;
    width: 36px;
    height: 36px;
  }
  &::after {
    content: '';
    display: block;
    background: url(../img/bnr_abs2.svg)no-repeat center / contain;
    width: 36px;
    height: 36px;
  }
}
.five_bnr--txt {
  color: var(--orange-color);
  font-weight: 700;
  font-size: var(--font-18);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  &::after {
    content: '';
    display: block;
    background: url(../img/arrow.svg)no-repeat center / contain;
    width: 17px;
    height: 17px;
  }
}