@charset "utf-8";
/* ========================================================
	top.css => トップページ用CSS
======================================================== */
/*背景*/
body {
      background: #9ce2f7;
}
.pc_bg {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -0%);
      z-index: -1;
      width: 100%;
}
.pc_bg img {
      width: 100%;
      aspect-ratio: 1920/1080;
      object-fit: cover;
      object-position: center;
}
@media screen and (max-width: 1920px) {
/*      .pc_bg {
            width: 1920px;
            margin: auto;
      }*/
      .pc_bg img {
            aspect-ratio: auto;
            object-fit: contain;
      }
}
@media screen and (max-width: 1360px) {
	      .pc_bg {
		      width: 100%;
            max-width: 100%;
      }
}
/*mian_contents
-----------------------------------------------------*/
.mian_contents {
      background: #fff;
      width: 520px;
      margin: auto;
      overflow: hidden;
}
.mian_contents .cont img {
      width: 100%;
}
@media screen and (max-width:520px) {
      .mian_contents {
            width: 100%;
      }
}
/*main_v*/
.main_v {
      padding-bottom: 3em;
}
.main_v img {
      width: 100%;
      filter: drop-shadow(0em 1em 0.75rem #b4c8ca);
}
/*main_text*/
.main_text {
      max-width: 90%;
      margin: auto auto 2em auto;
}
/*cont_01*/
.cont_01 {}
/*cont_03*/
.cont_03 {
      position: relative;
}
.cont_03 .movie {
      position: absolute;
      bottom: 90px;
      left: 50%;
      transform: translate(-50%, -0%);
      width: 70%;
}
.cont_03 .movie iframe {
      width: 100%;
      aspect-ratio: 16/9;
      height: 100%;
}
@media screen and (max-width:520px) {
      .cont_03 .movie {
            bottom: 5em;
      }
}
/*cv_area
-----------------------------------------------------*/
@media screen and (min-width: 961px), print {
      .cv_area {
            position: fixed;
            top: 40%;
            transform: translate(50%, -50%);
            left: calc(50% + 100px);
            z-index: 2;
            width: 458px;
      }
      .cv_list li + li {
            margin-top: 2em;
      }
      .cv_list img {
            aspect-ratio: 455/150;
            width: 100%;
            transition: all 0.15s ease;
            filter: drop-shadow(-0px -0px 0.75rem #21848e);
      }
      .cv_list a:hover img {
            filter: drop-shadow(-0px -0px 0.75rem transparent);
      }
}
@media screen and (max-width: 1610px) {
      .cv_area {
            left: calc(50% + 200px);
            width: 20%;
      }
}
@media screen and (max-width: 1024px) {
      .cv_area {
            display: none;
      }
}
/*cv_ボタン
-----------------------------------------------------*/
.cv_btn_area {
      text-align: center;
      padding: 3em 0;
      max-width: 75%;
      margin: auto;
}
.cv_btn_title {
      margin-bottom: 0.5em;
      font-size: 2.2rem;
      line-height: 1;
      font-weight: bold;
      letter-spacing: 1px;
}
.cv_btn_title span {
      display: inline-block;
      padding: 0 0.5em;
      position: relative;
}
.cv_btn_title span:before, .cv_btn_title span:after {
      content: "";
      height: 100%;
      width: 2px;
      background: #000;
      position: absolute;
      top: 50%;
}
.cv_btn_title span:before {
      left: 0;
      transform: translate(-0%, -50%) rotate(-30deg);
}
.cv_btn_title span:after {
      right: 0;
      transform: translate(-0%, -50%) rotate(30deg);
}
.cv_btn_list li + li {
      margin-top: 2em;
}
@media screen and (max-width: 680px) {
      .cv_btn_title {
            font-size: 1.6rem;
      }
}
/*cv_btn*/
.cv_btn > * {
      color: #fff;
      font-weight: bold;
      display: block;
      padding: 0.7em 0.5em;
      position: relative;
      background: #ff2e3d;
      border-radius: 0.4em;
      font-size: 2.8rem;
      box-shadow: 6px 6px 0px 0px #4e050e;
      letter-spacing: 1px;
      transition: all 0.15s ease;
}
.cv_btn > *:before {
      content: "";
      background: url("../images/top/btn_arrow.svg") no-repeat;
      background-size: contain;
      filter: brightness(0) invert(1) !important;
      aspect-ratio: 21/36;
      width: 0.5em;
      position: absolute;
      top: 50%;
      right: 0.5em;
      transform: translate(-0%, -50%);
}
.cv_btn > * span {
      font-size: 0.9em;
}
.cv_btn.btn_blue > * {
      background: #00338b;
      box-shadow: 6px 6px 0px 0px #090577;
}
@media screen and (min-width: 961px), print {
      .cv_btn > *:hover {
            transform: translate(6px, 6px);
            box-shadow: 0px 0px 0px 0px #4e050e;
      }
      .cv_btn.btn_blue > *:hover {
            box-shadow: 0px 0px 0px 0px #090577;
      }
}
@media screen and (max-width: 680px) {
      .cv_btn > * {
            font-size: 1.8rem;
      }
}