@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&family=Zen+Old+Mincho:wght@400;600&display=swap");
/* ------------------------------
    mixin
------------------------------ */
/* font fam */
/* ----------------------------------------------------------------------------------------------------
*  基本情報
* --------------------------------------------------------------------------------------------------*/
html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
}
@media screen and (max-width: 800px) {
  html {
    font-size: 2.5641025641vw;
  }
}

body, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, img, form, input, figure, picture {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 100%;
  list-style-type: none;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 500;
  text-align: left;
  color: #000;
}

a {
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a:hover {
  opacity: 0.7;
}

div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, form, input, textarea, button, table, tr, th, td, article, aside, footer, header, hgroup, nav, section, a, span, img {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
}

h1, h2, h3, h4, h5, p, figcaption {
  text-align: justify;
  text-justify: distribute;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

input, button, textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}

picture {
  display: block;
}

figure {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}

.aligncenter {
  display: block;
  margin: 0 auto;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flexwrap_wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.flexdirection_column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.justifycontent_flexend {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.justifycontent_center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justifycontent_spacebetween {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justifycontent_spacearound {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.aligncontent_spacebetween {
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}

.alignitems_center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.alignitems_flexend {
  -webkit-align-items: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.alignitems_flexstart {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.load-fadeup {
  opacity: 0;
}
.load-fadeup.is-done {
  -webkit-animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
          animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.fadeup {
  opacity: 0;
  -webkit-transform: rotate(0.0001deg);
          transform: rotate(0.0001deg);
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.fadeup.is-done {
  -webkit-animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
          animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@-webkit-keyframes fadeup {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeup {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* ------------------------------
    clearfix
------------------------------ */
.cf {
  display: inline-block;
}
.cf:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/* Hides from IE Mac */
* html .cf {
  height: 1%;
}

.cf {
  display: block;
}

/* End Hack */
main {
  position: relative;
}

/* ---------------------------------------
  contents_wrap
-----------------------------------------*/
.contents_wrap {
  position: relative;
  width: 100%;
}

.contents {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #000032;
}

section {
  position: relative;
}

.wrap {
  width: 79.4%;
  margin: auto;
}

.btn.btn_detail {
  margin-top: 2.7rem;
}
@media screen and (min-width: 801px) {
  .btn.btn_detail {
    margin-top: 4rem;
  }
}
.btn.btn_apply {
  margin-top: 3.2rem;
}
@media screen and (min-width: 801px) {
  .btn.btn_apply {
    margin-top: 4.4rem;
  }
}

.cnt_r_pc,
.sec_btn_pc {
  display: none;
}

.sec_btn_sp {
  position: fixed;
  left: 0;
  bottom: -1px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sec_btn_sp.is-show {
  opacity: 1;
  visibility: visible;
}
.sec_btn_sp a {
  display: block;
  width: 100%;
  height: 8rem;
  aspect-ratio: 390/80;
}
@media screen and (min-width: 801px) {
  .sec_btn_sp {
    display: none;
  }
}

#sec_fv {
  height: 100svh;
  padding-top: 8rem;
  min-height: 75rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#sec_fv .fv_frame {
  position: fixed;
  width: 100%;
  max-width: 35.5rem;
  height: calc(100vh - 8rem);
  background: url("../img/frame_fv_sp.png") no-repeat center top/100% 100%;
  z-index: 3;
  top: 3rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
}
#sec_fv .fv_ttl {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 29.2rem;
  height: 100%;
  margin: 0 auto;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
}
#sec_fv .fv_scroll {
  position: absolute;
  top: 60.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
}
#sec_fv .fv_scroll img {
  width: 3.1rem;
}
#sec_fv .fv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#sec_fv .fv_img {
  height: 100%;
  opacity: 0;
}
#sec_fv .fv_img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100svh;
  min-height: 75rem;
}
@media screen and (min-width: 801px) {
  #sec_fv {
    height: 100%;
    min-height: 92rem;
    padding-top: 10.5rem;
  }
  #sec_fv .fv_frame {
    position: absolute;
    max-width: 47.3rem;
    height: 100%;
    background: url("../img/frame_fv_pc.png") no-repeat center top/100% auto;
    top: 4rem;
  }
  #sec_fv .fv_ttl {
    max-width: 36.4rem;
  }
  #sec_fv .fv_scroll {
    top: 81rem;
  }
  #sec_fv .fv_scroll img {
    width: 4.1rem;
  }
  #sec_fv .fv_img img {
    height: 100%;
    min-height: 92rem;
  }
}

#sec01 {
  padding: 3.5rem 0 0;
}
#sec01 .img {
  margin: -4rem auto 0;
  max-width: 34.5rem;
}
@media screen and (min-width: 801px) {
  #sec01 {
    padding: 2.5rem 0 0;
  }
  #sec01 .img {
    margin: -6rem auto 0;
    max-width: 46rem;
  }
}

#sec02 {
  margin-top: -6.4rem;
}
#sec02 .ttl {
  margin-bottom: 4rem;
}
#sec02 .deco {
  margin: 3.8rem auto 0;
  width: 24.8rem;
}
@media screen and (min-width: 801px) {
  #sec02 {
    margin-top: -8rem;
  }
  #sec02 .ttl {
    margin-bottom: 5rem;
  }
  #sec02 .deco {
    margin: 5rem auto 0;
    width: 32rem;
  }
}

.bg_letter {
  position: relative;
  background: #000032 url("../img/bg_letter.png") no-repeat center top/cover;
  padding: 6rem 0 2.5rem;
  margin-top: -3rem;
  z-index: 2;
}
@media screen and (min-width: 801px) {
  .bg_letter {
    padding: 9rem 0 3.5rem;
    margin-top: -3.5rem;
  }
}

#sec03 {
  position: relative;
}
#sec03 .ttl {
  margin-bottom: 3.2rem;
}
@media screen and (min-width: 801px) {
  #sec03 .ttl {
    margin-bottom: 4rem;
  }
}
#sec03 .story_slider_wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#sec03 .story_slider_wrap::before {
  position: absolute;
  content: "";
  background: url("../img/frame_slider.png") no-repeat center top/contain;
  width: 100%;
  height: 100%;
  aspect-ratio: 62/46;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
#sec03 .story_slider {
  position: relative;
  display: none;
}
#sec03 .story_slider .item {
  position: relative;
}
#sec03 .story_slider .txt {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.6153846154;
  letter-spacing: 0.049em;
  margin-top: 7rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
#sec03 .story_slider .txt.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
@media screen and (min-width: 801px) {
  #sec03 .story_slider .txt {
    font-size: 1.7rem;
    line-height: 2.1176470588;
    letter-spacing: 0.02em;
  }
}
#sec03 .story_slider .img {
  overflow: hidden;
}
#sec03 .story_slider .img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#sec03 .story_slider.slick-initialized {
  display: block;
}
#sec03 .story_slider .slider {
  display: none;
}
#sec03 .story_slider .slider.slick-initialized {
  display: block;
}
#sec03 .story_slider .slick-track {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
#sec03 .story_slider .slick-slide {
  width: 31rem;
  height: auto !important;
}
@media screen and (min-width: 801px) {
  #sec03 .story_slider .slick-slide {
    width: 42rem;
  }
}
#sec03 .story_slider button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#sec03 .story_slider .slick-dots {
  text-align: center;
  position: absolute;
  top: 21rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#sec03 .story_slider .slick-dots li {
  display: inline-block;
  margin: 0 0.5rem;
}
#sec03 .story_slider .slick-dots li button {
  position: relative;
  text-indent: -9999px;
}
#sec03 .story_slider .slick-dots li button:before {
  content: "";
  background: #fff;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
#sec03 .story_slider .slick-dots li.slick-active button::before {
  content: "";
  background: #ffca00;
  border: 1px solid #fff;
}
@media screen and (min-width: 801px) {
  #sec03 .story_slider .slick-dots {
    top: 28rem;
  }
  #sec03 .story_slider .slick-dots li {
    margin: 0 0.6rem;
  }
  #sec03 .story_slider .slick-dots li button::before {
    width: 0.6rem;
    height: 0.6rem;
  }
}
#sec03 .bar_operation {
  position: absolute;
  z-index: 3;
  top: 24rem;
  right: 1em;
  width: 8.6rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 0.5rem;
}
#sec03 .bar_operation .slick-arrow {
  font-size: 0;
  width: 4rem;
  height: 4rem;
  background: url("../img/arr_slider.svg") no-repeat center center/contain;
  cursor: pointer;
}
#sec03 .bar_operation .slick-arrow.slick-next {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media screen and (min-width: 801px) {
  #sec03 .bar_operation {
    top: 31.5rem;
    width: 11.5rem;
  }
  #sec03 .bar_operation .slick-arrow {
    width: 5.5rem;
    height: 5.5rem;
  }
}

#sec04 {
  padding-top: 11.5rem;
}
#sec04 .ttl {
  margin-bottom: 3rem;
}
#sec04 .img {
  margin-right: auto;
  margin-left: auto;
}
#sec04 .img figcaption {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.75;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding-top: 1.6rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
#sec04 .img + .img {
  margin-top: 1.4rem;
}
#sec04 .btn_wrap {
  width: 20rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 1.4rem auto 0;
}
#sec04 .btn_wrap .btn {
  width: 9rem;
}
@media screen and (min-width: 801px) {
  #sec04 {
    padding-top: 16rem;
  }
  #sec04 .ttl {
    margin-bottom: 4rem;
  }
  #sec04 .img figcaption {
    font-size: 1.6rem;
    line-height: 1.75;
  }
  #sec04 .btn_wrap {
    width: 27rem;
    margin: 2rem auto 0;
  }
  #sec04 .btn_wrap .btn {
    width: 12rem;
  }
}

#sec05 {
  padding: 5.2rem 0 4rem;
}
#sec05 .ttl {
  position: relative;
  margin-bottom: 4rem;
  z-index: 2;
}
#sec05 .img {
  position: relative;
  max-width: 28.3rem;
  margin: -6rem auto 0;
}
#sec05 .date {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  padding-top: 1.6rem;
  font-weight: 500;
}
@media screen and (min-width: 801px) {
  #sec05 {
    padding: 6.5rem 0 5rem;
  }
  #sec05 .img {
    max-width: 37.7rem;
    margin: -9rem auto 0;
  }
  #sec05 .date {
    font-size: 2rem;
    padding-top: 2.8rem;
  }
}

.benefits .img {
  max-width: 31.3rem;
  margin: 0 auto;
}
@media screen and (min-width: 801px) {
  .benefits .img {
    max-width: 41.6rem;
  }
}

#sec06 {
  padding: 5.2rem 0 3.6rem;
}
#sec06 .ttl {
  margin-bottom: 2rem;
}
#sec06 .btn_chapter {
  margin: 0 auto;
}
@media screen and (min-width: 801px) {
  #sec06 {
    padding: 6rem 0 2.5rem;
  }
  #sec06 .ttl {
    margin-bottom: 2.5rem;
  }
}

#footer {
  padding: 2rem 0 13rem;
}
#footer .policy {
  text-align: center;
  padding: 0.3rem 0;
}
#footer .policy a {
  color: #fff;
  font-size: 1.2rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}
#footer .copy {
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  margin-top: 3.2rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 801px) {
  #footer {
    background: #000032;
    padding-bottom: 1rem;
  }
}

@media screen and (min-width: 801px) {
  .wrap {
    max-width: 52rem;
  }
  .bg_main {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
  }
  .bg_main {
    background: url(../img/bg_pc.jpg) no-repeat center top;
    background-size: cover;
  }
  .contents {
    max-width: 52rem;
    padding-top: 6rem;
    background-color: transparent;
  }
  .contents .wrap_pc {
    background: #000032;
  }
  .cnt_r_pc {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: calc((100% - 52rem) / 2);
    height: 100vh;
    padding: 0 0 8rem;
    position: absolute;
    top: 0;
    right: 0;
  }
  .cnt_r_pc .sec_btn_pc {
    display: block;
  }
  .cnt_r_pc .sec_btn_pc a {
    display: block;
    width: clamp(14rem, 1.6rem + 15.3vw, 31.2rem);
  }
}
/*# sourceMappingURL=style.css.map */