@charset "UTF-8";
/* ===================================================================
CSS information

file name  : copy.css
author     : Abilive
style info : コピー
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
.con_int {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .con_int {
    width: calc(1360 / 1440 * 100%);
    max-width: calc(1360px);
  }
}
@media only screen and (min-width: 1441px) {
  .con_int {
    max-width: calc(1360px * ((18 + 0) / 14));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_int {
    width: calc(1360 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_int {
    width: calc(388 / 428 * 100%);
  }
}
.con_int .txt {
  text-align: center;
  margin-top: 1.5em;
}

.wrp_chap {
  width: 100%;
  max-width: 2560px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5.71rem;
  position: relative;
  padding-bottom: 14.28rem;
}
@media only screen and (max-width: 767px) {
  .wrp_chap {
    padding-bottom: 8rem;
  }
}
.wrp_chap::before, .wrp_chap::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 20em;
  background: linear-gradient(0deg, rgba(248, 248, 248, 0), #f8f8f8);
}
.wrp_chap::before {
  height: 25em;
  background: linear-gradient(0deg, rgba(248, 248, 248, 0), #f8f8f8 50%);
}
.wrp_chap::after {
  transform: rotate(180deg);
  top: auto;
  bottom: -1px;
  z-index: -1;
}
.wrp_chap .box_chap_video {
  position: sticky;
  top: 0;
  left: 0;
  z-index: -1;
  height: 0;
  transition-property: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  opacity: 1;
  background-color: #fff;
}
body[data-bg="dark"] .wrp_chap .box_chap_video {
  opacity: 0;
}
.wrp_chap .box_chap_video span {
  height: calc(var(--vh) * 100);
  display: block;
}
.wrp_chap .box_chap_video img, .wrp_chap .box_chap_video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  opacity: .25;
}

.wrp_wakon {
  background-color: var(--color-bg-base);
}

.con_chap {
  width: 100%;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.con_chap + .con_chap {
  margin-top: 8.57rem;
}
.con_chap .st_chap {
  margin-bottom: 2.14rem;
}
.con_chap .box_slider {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_chap .box_slider {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (min-width: 1025px) {
  .con_chap .box_slider {
    width: calc(950 / 1440 * 100%);
    max-width: 950px;
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_chap .box_slider {
    max-width: calc(950px * 18 / 14);
  }
}

@media only screen and (max-width: 767px) {
  .con_chap .box_slider {
    width: calc(368 / 428 * 100%);
  }
}
.con_chap .slider {
  position: relative;
}
.con_chap .slider .swiper-slide img {
  width: calc(900 / 950 * 100%);
  margin-right: auto;
  margin-left: auto;
  display: block;
}
@media only screen and (max-width: 767px) {
  .con_chap .slider .swiper-slide img {
    width: calc(348 / 368 * 100%);
  }
}
.con_chap .box_chap {
  margin-top: 2.85rem;
}
@media only screen and (max-width: 767px) {
  .con_chap .box_chap {
    width: calc(388 / 428 * 100%);
    margin-right: auto;
    margin-left: auto;
  }
}
.con_chap .box_chap .txt {
  text-align: center;
  margin-top: 0.71rem;
}

@media only screen and (min-width: 768px) {
  .box_chap01 {
    margin-top: 5rem;
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap01 {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
  }
}
.box_chap01 .box_txt {
  margin-right: auto;
  margin-left: auto;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 768px) {
  .box_chap01 .box_txt {
    width: calc(570 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap01 .box_txt {
    width: calc(320 / 428 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap01 .box_txt {
    margin-top: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .box_chap01 .box_txt > .inner {
    max-width: calc(350px * 18 / 14);
    width: calc(475 / 570 * 100%);
    margin-right: 0;
    margin-left: auto;
  }
}
@media only screen and (min-width: 768px) {
  .box_chap01 .box_txt p {
    width: calc(270 / 350 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .box_chap01 .img {
    width: calc(870 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap01 .img {
    width: 87%;
    margin-right: 0;
    margin-left: auto;
    order: -1;
  }
}

.box_chap02 {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .box_chap02 {
    width: calc(900 / 1440 * 100%);
    max-width: calc(900px);
  }
}
@media only screen and (min-width: 1441px) {
  .box_chap02 {
    max-width: calc(900px * ((18 + 0) / 14));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_chap02 {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap02 {
    width: calc(388 / 428 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .box_chap02 {
    margin-top: 7.14rem;
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap02 {
    width: calc(295 / 428 * 100%);
    margin-top: 4em;
    display: flex;
    flex-direction: column;
  }
}
.box_chap02 .box_img {
  display: flex;
  align-items: flex-start;
  order: -1;
}
@media only screen and (min-width: 768px) {
  .box_chap02 .box_img {
    width: calc(608 / 900 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap02 .box_img {
    justify-content: center;
    width: calc(348 / 388 * 100%);
    margin-right: auto;
    margin-left: auto;
  }
}
.box_chap02 .box_img .img01 {
  width: calc(415 / 608 * 100%);
  margin-left: calc(35 / 608 * 100%);
}
@media only screen and (max-width: 767px) {
  .box_chap02 .box_img .img01 {
    width: 80%;
    margin-left: 0;
  }
}
.box_chap02 .box_img .img02 {
  margin-left: calc(-15 / 608 * 100%);
  width: calc(170 / 608 * 100%);
  margin-top: 7.14rem;
}
@media only screen and (max-width: 767px) {
  .box_chap02 .box_img .img02 {
    width: 30%;
    margin-left: -10%;
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 768px) {
  .box_chap02 .txt {
    width: calc(255 / 900 * 100%);
    margin-right: 0;
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap02 .txt {
    margin-top: 2rem;
  }
}

.box_chap03 {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .box_chap03 {
    width: calc(1000 / 1440 * 100%);
    max-width: calc(1000px);
  }
}
@media only screen and (min-width: 1441px) {
  .box_chap03 {
    max-width: calc(1000px * ((18 + 0) / 14));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .box_chap03 {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap03 {
    width: calc(388 / 428 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .box_chap03 {
    margin-top: 7.14rem;
    align-items: flex-start;
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap03 {
    margin-top: 4em;
    display: flex;
    flex-direction: column;
  }
}
.box_chap03 .box_img {
  order: -1;
  width: calc(552 / 1000 * 100%);
}
@media only screen and (max-width: 767px) {
  .box_chap03 .box_img {
    width: 70%;
    margin-right: auto;
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) {
  .box_chap03 .box_txt {
    margin-right: 0;
    margin-left: auto;
    width: calc(375 / 1000 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .box_chap03 .box_txt {
    display: flex;
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .box_chap03 .box_txt .txt {
    display: flex;
    align-items: center;
    min-height: 14.28rem;
    padding: 3rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap03 .box_txt .txt {
    width: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .box_chap03 .box_txt .img {
    width: 45%;
    margin-right: 0;
    margin-left: auto;
  }
}

.con_style {
  margin-right: auto;
  margin-left: auto;
  padding-top: 6.78rem;
  padding-bottom: 7.85rem;
  margin-top: 7.14rem;
  background-color: rgba(248, 248, 248, 0.8);
}
@media only screen and (min-width: 1025px) {
  .con_style {
    width: calc(1180 / 1440 * 100%);
    max-width: calc(1180px);
  }
}
@media only screen and (min-width: 1441px) {
  .con_style {
    max-width: calc(1180px * ((18 + 0) / 14));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_style {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_style {
    width: calc(388 / 428 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_style {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
}
.con_style > .inner {
  width: calc(1000 / 1180 * 100%);
  max-width: calc(900px * 18 / 14);
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .con_style > .inner {
    width: calc(308 / 388 * 100%);
  }
}

.st_style {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 768px) {
  .box_style01 {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .box_style01 .box_det {
    width: calc(430 / 900 * 100%);
  }
  .box_style01 .box_det:nth-child(even) {
    margin-right: 0;
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .box_style01 .box_det:not(:first-child) {
    margin-top: 2rem;
  }
}
.box_style01 .box_det .st_det {
  margin-bottom: 1em;
}
.box_style01 .box_det .st {
  padding: 1.2em 0 .75em;
}

.box_style02 {
  display: flex;
  align-items: center;
  margin-top: 5.71rem;
}
@media only screen and (max-width: 767px) {
  .box_style02 {
    margin-top: 4rem;
    flex-direction: column;
  }
}
.box_style02 .box_sp_st {
  order: -2;
  width: 100%;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .box_style02 .st_det {
    margin-right: -3em;
  }
}
@media only screen and (max-width: 767px) {
  .box_style02 .st_det .jp {
    line-height: 1.4;
  }
}
@media only screen and (min-width: 768px) {
  .box_style02 .box_det {
    width: calc(340 / 1000 * 100%);
    margin-right: 0;
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .box_style02 .box_det {
    width: 100%;
    margin-top: 1rem;
  }
}
.box_style02 .box_det .txt {
  margin-top: 1em;
}
@media only screen and (max-width: 767px) {
  .box_style02 .box_det .txt {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .box_style02 .img {
    width: calc(610 / 1000 * 100%);
    order: -1;
  }
}
@media only screen and (max-width: 767px) {
  .box_style02 .img {
    order: -1;
  }
}