@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.mv {
  position: relative;
  width: 100%;
  height: 109.3rem;
  overflow: hidden;
  background: url(../images/top/mv_bg01_sp.jpg) no-repeat center/100% 100%;
}
@media screen and (min-width: 768px) {
  .mv {
    height: 110rem;
    background-image: url(../images/top/mv_bg01_pc.jpg);
  }
}
.mv::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 110.6666666667vw;
  height: 45.3333333333vw;
  background: url(../images/top/mv_bg02.png) no-repeat bottom center/contain;
  z-index: 4;
}
@media screen and (min-width: 768px) {
  .mv::before {
    width: 73.2291666667vw;
    height: 22.8645833333vw;
  }
}
.mv .inner {
  max-width: 1720px;
}
.mv_column {
  position: relative;
  width: 100%;
}
.mv_ttl {
  position: relative;
  width: 100%;
  padding-top: 68rem;
  text-align: left;
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: 1s ease;
  z-index: 5;
}
.mv_ttl.is-appear {
  opacity: 1;
  transform: translate(0);
}
@media screen and (min-width: 768px) {
  .mv_ttl {
    padding-top: 36rem;
  }
}
.mv_ttl > span {
  display: block;
  font-size: 5rem;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .mv_ttl > span {
    font-size: 8.6rem;
  }
}
.mv_ttl > span em {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 2rem;
}
.mv_ttl > span .color_red {
  position: relative;
  display: inline-block;
  margin: 0 0.12em;
  padding: 0 0.4em;
  line-height: 1;
}
.mv_ttl > span .color_red::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 0.3em;
  aspect-ratio: 1/1;
  background-image: url(../images/common/common_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(1, 1);
}
.mv_ttl > span .color_red::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 0.3em;
  aspect-ratio: 1/1;
  background-image: url(../images/common/common_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(-1, -1);
}
.mv_slider {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  font-size: 36rem;
  touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: pan-y;
  tap-highlight-color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.mv_slider.is-appear {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .mv_slider {
    font-size: 100rem;
  }
}
.mv_slider .slick-slide {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  margin: 0.35em 0 -0.7em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  .mv_slider .slick-slide {
    margin: -0.42em 0 -0.55em;
  }
}
.mv_slider .slick-slide.slick-current, .mv_slider .slick-slide.is-active-next {
  opacity: 1;
}
.mv_slider .slick-list {
  height: 100% !important;
}
.mv_slider_item {
  transform-origin: center right;
  width: 1em !important;
  transition: transform 1s ease;
  border-radius: 11.66em 0 0 11.66em;
  overflow: hidden;
}
.mv_slider .slick-center .mv_slider_item {
  transform: scale(1.95);
}
@media screen and (min-width: 768px) {
  .mv_slider .slick-center .mv_slider_item {
    transform: scale(1.3);
  }
}

/* ========================================================
    data
======================================================== */
.data {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .data {
    padding: 12rem 0;
  }
}
.data {
  /*&::before {
      content: '';
      position: absolute;
      left: 2.7rem;
      top: 50%;
      display: block;
      width: 2.6rem;
      aspect-ratio: 21 / 219;
      background-image: url(../images/top/data_bg01.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      transform: translateY(-50%);
      z-index: -1;

      @include mq-tab {
          left: 2.1rem;
          width: 1.8rem;
      }
  }*/
}
.data_line01 {
  position: absolute;
  left: 8rem;
  top: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #e0e9f3;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .data_line01 {
    left: 6rem;
  }
}
.data_line02 {
  position: absolute;
  left: 0;
  top: 8rem;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e0e9f3;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .data_line02 {
    top: 6rem;
  }
}
.data_line03 {
  position: absolute;
  left: 0;
  bottom: 8rem;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e0e9f3;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .data_line03 {
    bottom: 6rem;
  }
}
.data .inner {
  max-width: 100%;
  padding: 0 4rem;
}
@media screen and (min-width: 768px) {
  .data .inner {
    max-width: 1920px;
    padding: 0 4rem;
  }
}
.data_column {
  position: relative;
  width: 94.0298507463%;
  margin: 0 0 0 auto;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .data_column {
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 4rem;
  }
}
.data_ttlwrap {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .data_ttlwrap {
    width: 100%;
  }
}
.data_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.data_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .data_ttl > span {
    font-size: 2.2rem;
  }
}
.data_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.data_wrap {
  position: relative;
  width: 100%;
  margin-top: 7rem;
}
@media screen and (min-width: 768px) {
  .data_wrap {
    width: calc(100% - 45rem);
    margin-top: 0;
    margin: 4rem auto 0;
  }
}
.data_listwrap {
  /*position: relative;*/
  width: 100%;
  margin: 0;
  overflow-x: visible;
}
@media screen and (min-width: 768px) {
  .data_listwrap {
    width: 100%;
    margin: 0;
    overflow-x: visible;
  }
}
.data_list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 4rem;
}
@media screen and (min-width: 768px) {
  .data_list {
    width: 88%;
    margin: 0 auto;
    padding: 0;
  }
}
.data_list > li {
  width: calc(47% - 1rem);
  margin-left: 2rem;
}
@media screen and (min-width: 768px) {
  .data_list > li {
    width: 20%;
    margin-left: 4.7619047619%;
  }
}
.data_list > li:first-child {
  margin-left: 2rem;
}
.data_btn {
  position: relative;
  width: 30rem;
  aspect-ratio: 300/80;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .data_btn {
    width: 24rem;
    aspect-ratio: 240/60;
    margin-top: 4.5rem;
  }
}
.data_btn.forSP {
  display: block;
}
@media screen and (min-width: 768px) {
  .data_btn.forSP {
    display: none;
  }
}
.data_btn.forPC {
  display: none;
}
@media screen and (min-width: 768px) {
  .data_btn.forPC {
    display: block;
  }
}
.data_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 1px solid #306cc7;
  border-radius: 4rem;
  background-color: #306cc7;
}
@media screen and (min-width: 768px) {
  .data_btn > a {
    border-radius: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .data_btn > a:hover {
    background-color: transparent;
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .data_btn > a:hover::before {
    background-color: #306cc7;
    transform: translateY(-50%) scale(1.8);
  }
}
@media screen and (min-width: 768px) {
  .data_btn > a:hover > span {
    color: #306cc7;
  }
}
.data_btn > a::before {
  content: "";
  position: absolute;
  right: 3rem;
  top: 50%;
  display: block;
  width: 1.2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .data_btn > a::before {
    width: 0.6rem;
  }
}
.data_btn > a > span {
  display: block;
  color: #ffffff;
  font-family: "Lexend Exa", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-0.05em);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .data_btn > a > span {
    font-size: 1.8rem;
  }
}

/* ========================================================
    interview
======================================================== */
.interview {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .interview {
    padding: 12rem 0;
  }
}
.interview::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #dde3f4;
  z-index: -2;
}
.interview .inner {
  max-width: 1920px;
}
.interview_column {
  position: relative;
  width: 100%;
}
.interview_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.interview_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .interview_ttl > span {
    font-size: 2.2rem;
  }
}
.interview_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.interview_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .interview_wrap {
    margin-top: 6rem;
  }
}
.interview_listwrap {
  position: relative;
  width: 100%;
}
.interview_list {
  position: relative;
  width: 100%;
  padding-bottom: 0;
  opacity: 0;
}
.interview_list.slick-initialized.slick-slider {
  padding-bottom: 10.8rem;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider {
    padding-bottom: 8rem;
  }
}
.interview_list.slick-initialized.slick-slider .slick-list {
  padding: 0 !important;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-track {
    left: -28.6rem;
  }
}
.interview_list.slick-initialized.slick-slider .slick-slide {
  position: relative;
  width: 65rem;
  margin: 0 1.2rem;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-slide {
    width: 56rem;
    margin: 0 0.6rem;
  }
}
.interview_list.slick-initialized.slick-slider .slick-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-slide a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-slide a:hover .interview_item_img > figure > img {
    transform: scale(1.05);
  }
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-slide a:hover .interview_item_btn > span::before {
    right: -0.5rem;
  }
}
.interview_list.slick-initialized.slick-slider .prev {
  position: absolute;
  right: calc(50% + 12.6rem);
  bottom: 0;
  display: block;
  width: 6.8rem;
  aspect-ratio: 1/1;
  background-image: url(../images/common/arrow_bg07.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(-1, 1);
  transition: 0.3s ease;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .prev {
    right: calc(50% + 7.4rem);
    width: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .prev:hover {
    transform: translateX(-0.5rem) scale(-1, 1);
  }
}
.interview_list.slick-initialized.slick-slider .next {
  position: absolute;
  left: calc(50% + 12.6rem);
  bottom: 0;
  display: block;
  width: 6.8rem;
  aspect-ratio: 1/1;
  background-image: url(../images/common/arrow_bg07.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(1, 1);
  transition: 0.3s ease;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .next {
    left: calc(50% + 7.4rem);
    width: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .next:hover {
    transform: translateX(0.5rem) scale(1, 1);
  }
}
.interview_list.slick-initialized.slick-slider .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-dots {
    bottom: 2.1rem;
  }
}
.interview_list.slick-initialized.slick-slider .slick-dots li {
  width: 1.2rem;
  aspect-ratio: 1/1;
  margin: 0 1rem;
}
@media screen and (min-width: 768px) {
  .interview_list.slick-initialized.slick-slider .slick-dots li {
    width: 0.8rem;
    margin: 0 0.5rem;
  }
}
.interview_list.slick-initialized.slick-slider .slick-dots li.slick-active button {
  background-color: #306cc7;
  transform: scale(1.5);
}
.interview_list.slick-initialized.slick-slider .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  border-radius: 50%;
  background-color: #94aaae;
}
.interview_item {
  position: relative;
  width: 100%;
  padding: 4rem;
  background: linear-gradient(225deg, #e7edf8 0%, #dbf0f0 100%);
  border-radius: 2rem;
}
@media screen and (min-width: 768px) {
  .interview_item {
    padding: 3rem;
  }
}
.interview_item_img {
  position: relative;
  width: 100%;
}
.interview_item_img > figure {
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
}
.interview_item_img > figure > img {
  transition: 0.3s ease;
}
.interview_item_ttl {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .interview_item_ttl {
    margin-top: 2rem;
  }
}
.interview_item_ttl > span {
  display: inline-block;
  /*padding: 0.2em 0.5em 0.3em 0.5em;*/
  color: #306cc7;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 0.4rem;
  /*background-color: $color-white;*/
}
@media screen and (min-width: 768px) {
  .interview_item_ttl > span {
    font-size: 1.8rem;
  }
}
.interview_item_ttl > em {
  display: block;
  margin-top: 0.2em;
  color: #306cc7;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .interview_item_ttl > em {
    font-size: 3.6rem;
  }
}
.interview_item_btn {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .interview_item_btn {
    margin-top: 1.5rem;
  }
}
.interview_item_btn > span {
  position: relative;
  display: inline-block;
  padding-right: 4em;
  color: #e31d1a;
  font-family: "Lexend Exa", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .interview_item_btn > span {
    font-size: 2rem;
  }
}
.interview_item_btn > span::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  height: 2em;
  aspect-ratio: 60/40;
  background-image: url(../images/common/arrow_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
.interview_btn {
  position: relative;
  width: 54rem;
  aspect-ratio: 540/110;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .interview_btn {
    width: 57rem;
    aspect-ratio: 580/80;
    margin: 6rem auto 0 auto;
  }
}
.interview_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 1px solid #306cc7;
  border-radius: 5.5rem;
  background-color: #306cc7;
}
@media screen and (min-width: 768px) {
  .interview_btn > a {
    border-radius: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .interview_btn > a:hover {
    background-color: transparent;
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .interview_btn > a:hover::before {
    background-color: #306cc7;
    transform: translateY(-50%) scale(1.8);
  }
}
@media screen and (min-width: 768px) {
  .interview_btn > a:hover > span {
    color: #306cc7;
  }
}
.interview_btn > a::before {
  content: "";
  position: absolute;
  right: 3rem;
  top: 50%;
  display: block;
  width: 1.2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .interview_btn > a::before {
    width: 0.6rem;
  }
}
.interview_btn > a > span {
  display: block;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.4;
  transform: translateY(-0.1em);
  transition: 0.3s ease;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .interview_btn > a > span {
    font-size: 2.6rem;
  }
}

/* ========================================================
    story
======================================================== */
.story {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .story {
    padding: 12rem 0;
  }
}
.story::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, #e7edf8 0%, #dbf0f0 100%);
  z-index: -2;
}
.story::after {
  content: "";
  position: absolute;
  right: -18.7rem;
  top: -12.2rem;
  display: block;
  width: 64.6rem;
  aspect-ratio: 703/576;
  background-image: url(../images/top/story_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .story::after {
    right: calc(50% + 46.7rem);
    top: 84%;
    width: 48.3rem;
    transform: translateY(-50%);
    z-index: 0;
  }
}
.story .inner {
  max-width: 1920px;
}
.story_column {
  position: relative;
  width: 100%;
  margin: 0;
  background-color: #fff;
  padding: 12rem 5rem;
  border-radius: 6rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .story_column {
    width: 100%;
    padding: 8rem 18rem;
  }
}
.story_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.story_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .story_ttl > span {
    font-size: 2.2rem;
  }
}
.story_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.story_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .story_wrap {
    margin-top: 6rem;
  }
}
.story_list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.story_list > li {
  width: 100%;
  margin: 3.2rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .story_list > li {
    width: 30.5555555556%;
    margin: 0 0 0 4.1666666667%;
  }
}
.story_list > li:first-child {
  margin: 0;
}
.story_list > li > a {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .story_list > li > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .story_list > li > a:hover .story_item_img > figure > img {
    transform: scale(1.05);
  }
}
@media screen and (min-width: 768px) {
  .story_list > li > a:hover .story_item_btn > span::before {
    right: -0.5rem;
  }
}
.story_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.story_item_img {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .story_item_img {
    width: 100%;
  }
}
.story_item_img > figure {
  width: 100%;
  border-radius: 0 3rem 3rem 0;
  overflow: hidden;
}
.story_item_img > figure > img {
  transition: 0.3s ease;
}
.story_item_detail {
  position: relative;
  width: 100%;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .story_item_detail {
    width: 100%;
    margin-top: 0;
  }
}
.story_item_text {
  position: relative;
  width: 100%;
}
.story_item_text > dd {
  width: 100%;
}
.story_item_text > dd > span {
  display: block;
  color: #306cc7;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .story_item_text > dd > span {
    font-size: 3rem;
    min-height: 16rem;
    padding: 2rem 0;
  }
}
.story_item_text > dt {
  width: 100%;
  margin: 2rem 0;
}
@media screen and (min-width: 768px) {
  .story_item_text > dt {
    margin: 1.5rem 0 0 0;
  }
}
.story_item_text > dt > span {
  display: block;
}
.story_item_btn {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .story_item_btn {
    margin-top: 1.5rem;
  }
}
.story_item_btn > span {
  position: relative;
  display: inline-block;
  padding-right: 4em;
  color: #e31d1a;
  font-family: "Lexend Exa", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .story_item_btn > span {
    font-size: 2rem;
  }
}
.story_item_btn > span::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  height: 2em;
  aspect-ratio: 60/40;
  background-image: url(../images/common/arrow_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
.story_btn {
  position: relative;
  width: 54rem;
  aspect-ratio: 540/110;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .story_btn {
    width: 52rem;
    aspect-ratio: 520/80;
    margin: 6rem auto 0 auto;
  }
}
.story_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 1px solid #306cc7;
  border-radius: 5.5rem;
  background-color: transparent;
}
@media screen and (min-width: 768px) {
  .story_btn > a {
    border-radius: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .story_btn > a:hover {
    background-color: #306cc7;
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .story_btn > a:hover::before {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.8);
  }
}
@media screen and (min-width: 768px) {
  .story_btn > a:hover > span {
    color: #ffffff;
  }
}
.story_btn > a::before {
  content: "";
  position: absolute;
  right: 3rem;
  top: 50%;
  display: block;
  width: 1.2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #306cc7;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .story_btn > a::before {
    width: 0.6rem;
  }
}
.story_btn > a > span {
  display: block;
  color: #306cc7;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.4;
  transform: translateY(-0.1em);
  transition: 0.3s ease;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .story_btn > a > span {
    font-size: 2.6rem;
  }
}

/* ========================================================
    people
======================================================== */
.people {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .people {
    padding: 12rem 0;
  }
}
.people .inner {
  max-width: 1920px;
}
.people_column {
  position: relative;
  width: 100%;
  padding: 12rem 0;
  border-radius: 6rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .people_column {
    padding: 9rem 0;
  }
}
.people_column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: -2;
}
.people_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.people_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .people_ttl > span {
    font-size: 2.2rem;
  }
}
.people_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.people_wrap {
  position: relative;
  width: 88.0597014925%;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .people_wrap {
    width: 78.2608695652%;
    margin: 6rem auto 0 auto;
  }
}
.people_list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.people_list > li {
  width: 100%;
  margin: 3.2rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .people_list > li {
    width: 30.5555555556%;
    margin: 0 0 0 4.1666666667%;
  }
}
.people_list > li:first-child {
  margin: 0;
}
.people_list > li > a {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .people_list > li > a:hover {
    transform: translateY(-0.5rem);
    opacity: 1;
  }
}
.people_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  text-align: center;
}
.people_item > dt {
  position: relative;
  display: inline-block;
  width: 32rem;
  margin-bottom: -1em;
  border-radius: 2em;
  border: solid #e31d1a 1px;
  background-image: url(../images/common/common_bg08.jpg);
  background-repeat: repeat;
  background-position: center center;
  background-size: auto auto;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .people_item > dt {
    width: 24rem;
  }
}
.people_item > dt > span {
  display: block;
  color: #e31d1a;
  font-size: 3rem;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .people_item > dt > span {
    font-size: 2.2rem;
  }
}
.people_item > dd {
  display: block;
  height: 100%;
  padding: 8rem 4rem 4rem 4rem;
  border-radius: 2rem;
  background-color: #e0e9f3;
}
@media screen and (min-width: 768px) {
  .people_item > dd {
    padding: 6rem 3rem 3rem 3rem;
  }
}
.people_item > dd > figure {
  display: block;
  width: 41.1764705882%;
  margin: 0 auto;
  padding: 1rem 0;
}
@media screen and (min-width: 768px) {
  .people_item > dd > figure {
    width: 55.2631578947%;
  }
}
.people_item > dd > span {
  display: block;
  text-align: left;
}
.people_btn {
  position: relative;
  width: 54rem;
  aspect-ratio: 540/110;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .people_btn {
    width: 52rem;
    aspect-ratio: 520/80;
    margin: 2rem auto 0 auto;
  }
}
.people_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 1px solid #e31d1a;
  border-radius: 5.5rem;
  background-color: #e31d1a;
}
@media screen and (min-width: 768px) {
  .people_btn > a {
    border-radius: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .people_btn > a:hover {
    background-color: transparent;
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .people_btn > a:hover::before {
    background-color: #e31d1a;
    transform: translateY(-50%) scale(1.8);
  }
}
@media screen and (min-width: 768px) {
  .people_btn > a:hover > span {
    color: #e31d1a;
  }
}
.people_btn > a::before {
  content: "";
  position: absolute;
  right: 3rem;
  top: 50%;
  display: block;
  width: 1.2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .people_btn > a::before {
    width: 0.6rem;
  }
}
.people_btn > a > span {
  display: block;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-0.1em);
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .people_btn > a > span {
    font-size: 2.6rem;
  }
}

/* ========================================================
    support
======================================================== */
.support {
  position: relative;
  width: 100%;
  padding: 16rem 0;
  background-color: #dde3f4;
}
@media screen and (min-width: 768px) {
  .support {
    padding: 12rem 0;
  }
}
.support .inner {
  max-width: 1920px;
}
.support_column {
  position: relative;
  width: 100%;
  padding: 12rem 0;
  border-radius: 6rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .support_column {
    padding: 9rem 0;
  }
}
.support_column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.support_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.support_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .support_ttl > span {
    font-size: 2.2rem;
  }
}
.support_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.support_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .support_wrap {
    margin-top: 6rem;
  }
}
.support_list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.support_list > li {
  width: 100%;
  margin: 1.6rem 0 0 0;
  background: linear-gradient(225deg, #e7edf8 0%, #dbf0f0 100%);
}
@media screen and (min-width: 768px) {
  .support_list > li {
    width: 38.9130434783%;
    margin: 0 0 0 2.1739130435%;
    border-radius: 2rem;
  }
}
.support_list > li:first-child {
  margin: 0;
}
.support_list > li > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4rem;
}
@media screen and (min-width: 768px) {
  .support_list > li > a {
    padding: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .support_list > li > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .support_list > li > a:hover .support_item_img > picture > img {
    transform: scale(1.05);
  }
}
@media screen and (min-width: 768px) {
  .support_list > li > a:hover .support_item_btn > span::before {
    right: -0.5rem;
  }
}
.support_item {
  position: relative;
  width: 100%;
}
.support_item_img {
  position: relative;
  width: 100%;
}
.support_item_img > picture {
  display: block;
  width: 100%;
  border-radius: 2rem;
  overflow: hidden;
}
.support_item_img > picture > img {
  transition: 0.3s ease;
}
.support_item_detail {
  position: relative;
  width: 100%;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .support_item_detail {
    margin-top: 2rem;
  }
}
.support_item_text {
  position: relative;
  width: 100%;
}
.support_item_text > dt {
  width: 100%;
}
.support_item_text > dt > span {
  display: block;
  color: #306cc7;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .support_item_text > dt > span {
    font-size: 3.6rem;
  }
}
.support_item_text > dd {
  width: 100%;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .support_item_text > dd {
    margin-top: 1.5rem;
  }
}
.support_item_text > dd > span {
  display: block;
}
.support_item_btn {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .support_item_btn {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
  }
}
.support_item_btn > span {
  position: relative;
  display: inline-block;
  padding-right: 4em;
  color: #e31d1a;
  font-family: "Lexend Exa", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .support_item_btn > span {
    font-size: 2rem;
  }
}
.support_item_btn > span::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  height: 2em;
  aspect-ratio: 60/40;
  background-image: url(../images/common/arrow_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  transition: 0.3s ease;
}

/* ========================================================
    entry
======================================================== */
.entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, #e7edf8 0%, #dbf0f0 100%);
  z-index: -2;
}

.entry::after {
  content: "";
  position: absolute;
  right: -15.7rem;
  top: 80.8rem;
  display: block;
  width: 64.6rem;
  aspect-ratio: 703/576;
  background-image: url(../images/top/entry_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: none;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .entry::after {
    left: calc(50% + 39.7rem);
    top: 57%;
    width: 48.3rem;
    transform: translateY(-50%);
    z-index: 0;
  }
}
.entry {
  position: relative;
  width: 100%;
  padding: 16rem 0 48rem 0;
}
@media screen and (min-width: 768px) {
  .entry {
    padding: 12rem 0 40rem 0;
  }
}
.entry .inner {
  max-width: 1920px;
}
.entry_bg01 {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  z-index: -2;
}
.entry_bg01 > figure {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 40rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .entry_bg01 > figure {
    height: 56rem;
  }
}
.entry_bg01 > figure > img {
  display: inline-block;
  width: auto;
  height: 100%;
}
.entry_bg01 > figure > img:nth-child(1) {
  animation: entryBgAnime01 60s -30s linear infinite;
}
.entry_bg01 > figure > img:nth-child(2) {
  animation: entryBgAnime02 60s 0s linear infinite;
}
.entry {
  /*&::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 40rem;
      background-image: url(../images/top/entry_bg01_sp.png);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100% 100%;
      z-index: -2;

      @include mq-tab {
          height: 70rem;
          background-image: url(../images/top/entry_bg01_pc.png);
          background-size: auto 80%;
      }

      @include mq-max {
          background-size: 100% 100%;
      }
  }*/
  /*&::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -8rem;
      display: block;
      width: 56.1rem;
      aspect-ratio: 561 / 312;
      background-image: url(../images/top/entry_bg02.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      transform: translateX(-50%);
      z-index: -1;

      @include mq-tab {
          bottom: -6rem;
          width: 50.0rem;
      }
  }*/
}
.entry_column {
  position: relative;
  width: 100%;
}
.entry_ttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.entry_ttl > span {
  position: relative;
  display: inline-block;
  padding: 0 1.2em;
  color: #e31d1a;
  font-family: "Aleo", serif;
  font-size: 2.6rem;
  font-weight: 700;
  transform: scale(0.9, 1);
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .entry_ttl > span {
    font-size: 2.2rem;
  }
}
.entry_ttl > em {
  display: block;
  margin-top: 0.25em;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.entry_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .entry_wrap {
    margin-top: 4rem;
  }
}
.entry_lead {
  position: relative;
  width: 100%;
  text-align: center;
}
.entry_lead > span {
  display: inline-block;
  width: auto;
  padding: 0.22em 0.44em;
  color: #306cc7;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.4;
  background-color: #ffffff;
}
.entry_text {
  position: relative;
  width: 100%;
  margin-top: 4rem;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .entry_text {
    margin-top: 1rem;
    line-height: 1.6;
  }
}
.entry_btn {
  position: relative;
  width: 57rem;
  aspect-ratio: 570/140;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .entry_btn {
    margin: 6rem auto 0 auto;
  }
}
.entry_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  padding: 0 14.0350877193% 0 7.0175438596%;
  border: 2px solid #e31d1a;
  border-radius: 7rem;
  background-color: #e31d1a;
}
@media screen and (min-width: 768px) {
  .entry_btn > a:hover {
    background-color: #ffffff;
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .entry_btn > a:hover::before {
    right: 6.1403508772%;
    background-image: url(../images/common/arrow_bg04.png);
  }
}
@media screen and (min-width: 768px) {
  .entry_btn > a:hover > span {
    color: #e31d1a;
  }
}
.entry_btn > a::before {
  content: "";
  position: absolute;
  right: 7.0175438596%;
  top: 50%;
  display: block;
  width: 7.0175438596%;
  aspect-ratio: 1/1;
  background-image: url(../images/common/arrow_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
.entry_btn > a > span {
  display: block;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-0.1em);
  transition: 0.3s ease;
}

@keyframes entryBgAnime01 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes entryBgAnime02 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-200%);
  }
}/*# sourceMappingURL=top.css.map */