@charset "utf-8";
/* ------------------
ヘッダー
------------------ */
.hd_logo {
  @media screen and (max-width: 767px) {
      width: auto;
      flex-direction: column;
      padding: 10px 15px;
      gap: 5px;
  }
}
/* ------------------
メイン
------------------ */
/* MV */
.top_mv {
  width: 100%;
}
.top_mv picture,
.top_mv img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .top_mv picture {
    max-height: 320px;
    & > * {
      max-height: inherit;
      object-fit: cover;
      object-position: top;
    }
  }
}
.rec_mv_txt,
.rec_catchcopy--first {
  font-size: var(--font-48);
  font-weight: 900;
  margin-bottom: var(--space-30);
}
.rec_mv_txt {
  margin-top: 144px;
  letter-spacing: var(--letter-96);
  @media screen and (max-width: 767px) {
    margin-block: 1em;
  }
}
/* 背景色用outer */
.rec_gradiation--outer {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(0deg, #fff 0%, #98D6F6 35.1%, #469AD5 65%, #014EA2 100%);
    width: 100%;
    height: 800px;
    z-index: -1;
  }
  &::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(0deg, #98D6F6 0%, #DAEFFC 35.1%, #DAEFFC 65%, #fff 100%);
    width: 100%;
    height: 800px;
    inset: auto 0 0 0;
    margin: auto;
    z-index: -1;
  }
  @media screen and (max-width: 767px) {
    &::before {height: 200px;}
    &::after {height: 400px;}
  }
}
/* キャッチコピー */
.rec_catchcopy {
  padding-bottom: 0;
}
.rec_catchcopy_top {
  margin-bottom: var(--space-45);
}
.rec_catchcopy--first {
  color: var(--main-color);
  letter-spacing: var(--letter-96);
}
.rec_catchcopy--abs {
  position: relative;
  z-index: 1;
  @media screen and (max-width: 767px) {
    img {
      width: 100%;
    }
  }
  @media print {
    & > picture img {
      width: 1200px;
      height: 400px;
      aspect-ratio: 1200 / 400;
      display: block;
    }
  }
}
.rec_catchcopy--absTxt {
  position: absolute;
  inset: auto 0 54px;
  width: 100%;
  margin-inline: auto;
  p:nth-child(1) {
    color: #fff;
    font-size: var(--font-42);
    font-weight: 700;
    margin-bottom: var(--space-20);
  }
  p:nth-child(2) {
    color: var(--sub-color);
    font-size: var(--font-24);
    font-weight: 900;
    letter-spacing: var(--letter-48);
  }
  @media screen and (max-width: 767px) {
    bottom: 30px;
  }
}
/* 各項目 */
.rec_all {
  position: relative;
  padding-bottom: 200px;
  &::before {
    content: '';
    position: absolute;
    inset: -30px 0 auto 0;
    z-index: 0;
    background: url(../img/bg_all.webp) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 1510px;
    aspect-ratio: 1200 / 1510;
    margin: auto;
  }
  .cmn_container {
    position: relative;
    z-index: 1;
    height: 1494px;
    padding: 74px 0 var(--space-65);
    @media screen and (max-width: 767px) {
      height: 1515px;
    }
  }
  @media screen and (max-width: 767px) {
    padding-bottom: 100px;
    &::before {
      background: url(../img/bg_all_sp.webp) center no-repeat;
      inset: -18px 0 auto 0;
    }
    .cmn_container {
      padding: 20px 0 var(--space-65);
    }
  }
}
/* .rec_all {
  position: relative;
}
.rec_all_img {
  position: absolute;
  left: 0;
  right: 0;
  top: -46px;
  width: var(--contents-w);
  height: 1494px;
  margin: 0 auto;
} */
.rec_box {
  position: relative;
  width: 100%;
  min-height: 175px;
  margin-bottom: 191px;
  &:nth-child(even) .rec_blue {
    margin-inline: auto 0;
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 100px;
    min-height: 326px;
    &:nth-child(even) .rec_blue {
      margin-inline: auto;
    }
  }
}
.rec_blue {
  max-width: 487px;
  background: var(--light-blue);
  border-radius: 20px;
  padding: var(--space-20) var(--space-30);
  position: relative;
  @media screen and (max-width: 767px) {
    max-width: 286px;
    margin-inline: auto;
    top: 120px;
  }
}
.rec_abs_moreBtn {
  border-radius: 100px;
  background: #FFDF64;
  position: absolute;
  top: 15px;
  right: var(--space-30);
  a {
    color: var(--main-color);
    padding: 10px var(--space-20);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (max-width: 767px) {
    position: static;
    margin: 24px auto 0;
    max-width: 135px;
    a {
      display: flex;
      justify-content: center;
    }
  }
}
.rec_title {
  color: var(--main-color);
  font-size: var(--font-24);
  letter-spacing: 1.2px;
  margin-bottom: var(--space-20);
  @media screen and (max-width: 767px) {
    text-align: center;
  }
}
.rec_txt {
  line-height: 200%;
  letter-spacing: var(--letter-08)
}
.rec_icon {
  width: 100%;
  height: 175px;
  max-width: 175px;
  border-radius: 100px;
  border: 4px solid var(--sub-color);
  background: var(--light-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  margin: auto;
  @media screen and (max-width: 767px) {
    height: 109px;
    max-width: 109px;
    margin: 0 auto;
    img {
      width: 65%;
    }
  }
}
.rec_moreBtn {
  position: absolute;
  inset: auto 0 -130px 0;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-24);
  letter-spacing: var(--letter-10);
  @media screen and (max-width: 767px) {
    inset: auto 0 -60px 0;
  }
  a {
    background: var(--sub-color);
    color: var(--main-color);
    padding: var(--space-20) var(--space-30);
    border-radius: 100px;
  }
}
/* フッター固有 */
.ft_txt {
  margin-top: 10px;
}