@charset "UTF-8";
/***Stylesheet TOPページ***/
.page-top .fv { margin-bottom: 6.5rem; overflow: hidden; }
@media only screen and (max-width: 767px) { .page-top .fv { margin-bottom: 4rem; } }
.page-top .fv .kv-scroll { width: 100%; -webkit-border-radius: 3rem; -moz-border-radius: 3rem; border-radius: 3rem; overflow: hidden; }
@media only screen and (max-width: 767px) { .page-top .fv .kv-scroll { -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } }
.page-top .fv .kv-scroll ul { display: -webkit-flex; display: flex; animation: kv-scroll 45s linear infinite both; }
.page-top .fv .kv-scroll ul li { padding: 0 1.5rem; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
@media only screen and (max-width: 767px) { .page-top .fv .kv-scroll ul li { padding: 0 1rem; } }
.page-top .fv .kv-scroll ul li span { width: auto; height: 67.6rem; -webkit-border-radius: 3rem; -moz-border-radius: 3rem; border-radius: 3rem; overflow: hidden; display: block; }
@media only screen and (max-width: 767px) { .page-top .fv .kv-scroll ul li span { height: 30rem; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } }
.page-top .fv .kv-scroll ul li img { width: auto; max-width: none; height: 100%; }
.page-top .fv h1 { position: relative; z-index: 2; }
.page-top .fv h1:after { width: 100vw; margin-left: -50vw; content: ''; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; left: 50%; z-index: -1; }
@media only screen and (min-width: 768px) { .page-top .fv h1 { width: 47.1vw; margin: -6.8vw auto 0 auto; }
  .page-top .fv h1:after { height: 38.1rem; background-image: url("../images/top/fv_title_bg.png"); bottom: 49%; } }
@media only screen and (max-width: 767px) { .page-top .fv h1 { width: 87.3vw; margin: -12vw auto 0 auto; padding-inline: 1.5rem 0.5rem; }
  .page-top .fv h1:after { height: 19rem; background-image: url("../images/top/fv_title_sp_bg.png"); bottom: 67%; } }
.page-top .fv h1 img { width: 100%; }
.page-top .grid_content { margin-bottom: 6.5rem; }
@media only screen and (max-width: 1399px) { .page-top .grid_content { margin-bottom: 4.6vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content { margin-bottom: 3rem; } }
.page-top .grid_content .row { margin-bottom: 3.5rem; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row { margin-bottom: 2.5vw; } }
.page-top .grid_content .row:last-child { margin-bottom: 0; }
@media only screen and (min-width: 1000px) { .page-top .grid_content .row.grid01 { display: grid; grid-template-columns: 645fr 320fr 290fr; grid-template-rows: auto; gap: 3.1rem; }
  .page-top .grid_content .row.grid01 .col:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
  .page-top .grid_content .row.grid01 .col:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 3; }
  .page-top .grid_content .row.grid01 .col:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .page-top .grid_content .row.grid01 .col:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; } }
@media only screen and (max-width: 999px) and (min-width: 768px) { .page-top .grid_content .row.grid01 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 2.2vw; }
  .page-top .grid_content .row.grid01 .col:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
  .page-top .grid_content .row.grid01 .col:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 4; }
  .page-top .grid_content .row.grid01 .col:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
  .page-top .grid_content .row.grid01 .col:nth-child(4) { grid-column: 2 / 3; grid-row: 3 / 4; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid01 .col:nth-child(1) h2 span { width: 13rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid01 .col:nth-child(1) h2 span { width: 9.28vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid01 .col:nth-child(2) h2 span { width: 16rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid01 .col:nth-child(2) h2 span { width: 11.4vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid01 .col:nth-child(3) h2 span { width: 16rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid01 .col:nth-child(3) h2 span { width: 11.4vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid01 .col:nth-child(4) h2 span { width: 16rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid01 .col:nth-child(4) h2 span { width: 11.4vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row.grid01 .col:nth-child(1) h2 span { width: 9rem; }
  .page-top .grid_content .row.grid01 .col:nth-child(2) h2 span { width: 12.5rem; }
  .page-top .grid_content .row.grid01 .col:nth-child(3) h2 span { width: 12.5rem; }
  .page-top .grid_content .row.grid01 .col:nth-child(4) h2 span { width: 12.5rem; } }
@media only screen and (min-width: 1000px) { .page-top .grid_content .row.grid02 { display: grid; grid-template-columns: 290fr 320fr 645fr; grid-template-rows: auto; gap: 3.1rem; }
  .page-top .grid_content .row.grid02 .col:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
  .page-top .grid_content .row.grid02 .col:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
  .page-top .grid_content .row.grid02 .col:nth-child(3) { grid-column: 2 /3; grid-row: 1 / 3; }
  .page-top .grid_content .row.grid02 .col:nth-child(4) { grid-column: 3 / 4; grid-row: 1 / 3; } }
@media only screen and (max-width: 999px) and (min-width: 768px) { .page-top .grid_content .row.grid02 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 2.2vw; }
  .page-top .grid_content .row.grid02 .col:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
  .page-top .grid_content .row.grid02 .col:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
  .page-top .grid_content .row.grid02 .col:nth-child(3) { grid-column: 2 / 3; grid-row: 1 / 3; }
  .page-top .grid_content .row.grid02 .col:nth-child(4) { grid-column: 1 / 3; grid-row: 3 / 4; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid02 .col:nth-child(1) h2 span { width: 16rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid02 .col:nth-child(1) h2 span { width: 11.4vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid02 .col:nth-child(2) h2 span { width: 16rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid02 .col:nth-child(2) h2 span { width: 11.4vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid02 .col:nth-child(3) h2 span { width: 12rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid02 .col:nth-child(3) h2 span { width: 8.57vw; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid02 .col:nth-child(4) h2 span { width: 13rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid02 .col:nth-child(4) h2 span { width: 9.28vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row.grid02 .col:nth-child(1) h2 span { width: 12.5rem; }
  .page-top .grid_content .row.grid02 .col:nth-child(2) h2 span { width: 12.5rem; }
  .page-top .grid_content .row.grid02 .col:nth-child(3) h2 span { width: 12.5rem; }
  .page-top .grid_content .row.grid02 .col:nth-child(4) h2 span { width: 9.5rem; } }
@media only screen and (min-width: 1000px) { .page-top .grid_content .row.grid03 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 3.1rem; } }
@media only screen and (max-width: 999px) and (min-width: 768px) { .page-top .grid_content .row.grid03 { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 3.1rem; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row.grid03 .col a { padding-bottom: 3rem; }
  .page-top .grid_content .row.grid03 .col h2 span { width: 10rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row.grid03 .col h2 span { width: 7.14vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row.grid03 .col h2 span { width: 9.5rem; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col { margin-bottom: 3rem; } }
.page-top .grid_content .row .col a { width: 100%; height: 100%; color: #333333; background: -webkit-linear-gradient(134deg, rgba(0, 77, 160, 0.1), rgba(0, 150, 255, 0.1), rgba(150, 201, 255, 0.1)); background: linear-gradient(134deg, rgba(0, 77, 160, 0.1), rgba(0, 150, 255, 0.1), rgba(150, 201, 255, 0.1)); -webkit-border-radius: 3rem; -moz-border-radius: 3rem; border-radius: 3rem; display: block; position: relative; }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a { padding: 3rem 3rem 3.6rem 3rem; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row .col a { padding: 2.57vw 2.1vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row .col a { padding: 2.5rem 1.5rem 3.5rem 1.5rem; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } }
.page-top .grid_content .row .col a .arrow { width: 3rem; height: 0.6rem; margin-left: -1.5rem; position: absolute; bottom: 2rem; left: 50%; overflow: hidden; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row .col a .arrow { width: 2.14vw; height: 0.42vw; margin-left: -1.07vw; bottom: 1.42vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col a .arrow { width: 2.5rem; height: 0.5rem; margin-left: -1.25rem; bottom: 1.5rem; } }
.page-top .grid_content .row .col a .arrow:before, .page-top .grid_content .row .col a .arrow:after { width: 100%; height: 100%; content: ''; background-image: url("../images/common/icon_arrow02.svg"); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; top: 0; right: 0; animation-fill-mode: forwards; animation-duration: 0.6s; }
.page-top .grid_content .row .col a .arrow:after { transform: translateX(-100%); }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col a .arrow:after { content: none !important; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a:hover { opacity: 0.6; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a:hover .arrow:before { animation-name: transformRightLeft; animation-delay: 0s; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a:hover .arrow:after { animation-name: transformLeftRight; animation-delay: 0.2s; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a:hover .img img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
.page-top .grid_content .row .col a:hover .poster { opacity: 0.6; }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a:hover .poster img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a .img img { -webkit-transition: transform 0.3s; transition: transform 0.3s; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a .poster { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col a .poster img { -webkit-transition: transform 0.3s; transition: transform 0.3s; } }
.page-top .grid_content .row .col h2 { width: 100%; text-align: center; position: absolute; top: 0; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.page-top .grid_content .row .col h2 span { padding: 0.6em 0; font-size: 1.2rem; font-weight: 500; background-color: #ffffff; -webkit-border-radius: 99px; -moz-border-radius: 99px; border-radius: 99px; display: inline-block; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row .col h2 span { font-size: 0.85vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col h2 span { font-size: 1rem; } }
.page-top .grid_content .row .col .img, .page-top .grid_content .row .col .poster { -webkit-border-radius: 3rem; -moz-border-radius: 3rem; border-radius: 3rem; overflow: hidden; }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col .img, .page-top .grid_content .row .col .poster { -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } }
.page-top .grid_content .row .col .poster { width: 100%; height: auto; aspect-ratio: 585/290; background-image: url("../images/top/movie_poster.jpg"); -webkit-background-size: cover; background-size: cover; position: relative; }
.page-top .grid_content .row .col .poster img { width: 8rem; margin: -4rem 0 0 -4rem; position: absolute; top: 50%; left: 50%; transform-origin: center center; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row .col .poster img { width: 5.71vw; margin: -2.855vw 0 0 -2.855vw; } }
@media only screen and (max-width: 999px) { .page-top .grid_content .row .col .poster img { width: 11.42vw; margin: -5.71vw 0 0 -5.71vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col .poster img { width: 4rem; margin: -2rem 0 0 -2rem; } }
.page-top .grid_content .row .col h3 { margin: 1em 0 0.6em 0; font-size: 2.4rem; font-weight: 700; text-align: center; color: #004da0; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row .col h3 { font-size: 1.71vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col h3 { margin: 0.6em 0 0.25em 0; font-size: 2rem; } }
.page-top .grid_content .row .col p { line-height: 1.75; text-align: center; }
@media only screen and (min-width: 768px) { .page-top .grid_content .row .col p { padding-bottom: 1rem; } }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row .col p { font-size: 1.14vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row .col p { font-size: 1.4rem; line-height: 1.5; } }
.page-top .grid_content .row .col.type2 a h3 { font-size: 2.2rem; }
@media only screen and (min-width: 768px) and (max-width: 1399px) { .page-top .grid_content .row .col.type2 a h3 { font-size: 1.57vw; } }

@media only screen and (max-width: 767px) { .page-top .grid_content .row .col.type2 a h3 { font-size: 2rem; } }
.page-top .grid_content .row .col.type3 a h3 { margin: 0.5em 0 0 0; font-size: 1.8rem; }
@media only screen and (max-width: 1399px) { .page-top .grid_content .row .col.type3 a h3 { font-size: 1.28vw; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col.type3 a h3 { margin-bottom: 0.4rem; font-size: 1.8rem; line-height: 1.5; } }
@media only screen and (min-width: 1000px) { .page-top .grid_content .row .col.type3 a h3 { line-height: 3; }
  .page-top .grid_content .row .col.type3 a h3.l2 { line-height: 1.5; } }
@media only screen and (max-width: 767px) { .page-top .grid_content .row .col.type2 a, .page-top .grid_content .row .col.type3 a { padding-bottom: 1.25rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .page-top .grid_content .row .col.type2 a:after, .page-top .grid_content .row .col.type3 a:after { content: none; }
  .page-top .grid_content .row .col.type2 a .arrow, .page-top .grid_content .row .col.type3 a .arrow { display: none; }
  .page-top .grid_content .row .col.type2 a .img, .page-top .grid_content .row .col.type3 a .img { width: 42%; margin-right: 6%; }
  .page-top .grid_content .row .col.type2 a .text, .page-top .grid_content .row .col.type3 a .text { width: 52%; }
  .page-top .grid_content .row .col.type2 a .text:after, .page-top .grid_content .row .col.type3 a .text:after { width: 2.5rem; height: 0.5rem; margin-top: 1.5rem; content: ''; background-image: url("../images/common/icon_arrow02.svg"); -webkit-background-size: 100% 100%; background-size: 100% 100%; display: block; }
  .page-top .grid_content .row .col.type2 a .text h3, .page-top .grid_content .row .col.type3 a .text h3 { margin-top: 0; line-height: 1.25; text-align: left; }
  .page-top .grid_content .row .col.type2 a .text p, .page-top .grid_content .row .col.type3 a .text p { text-align: left; } }
.page-top #movie_modal { width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; z-index: 999; }
.page-top #movie_modal .bg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); position: absolute; top: 0; left: 0; }
.page-top #movie_modal .close { width: 6rem; height: 6rem; position: absolute; top: 2rem; right: 2rem; z-index: 10; }
@media only screen and (max-width: 767px) { .page-top #movie_modal .close { width: 3rem; height: 3rem; } }
.page-top #movie_modal .close span { width: 100%; height: 0.2rem; background-color: #ffffff; position: absolute; top: 50%; left: 0; }
.page-top #movie_modal .close span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.page-top #movie_modal .close span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.page-top #movie_modal .box { width: 80%; max-width: 1000px; height: auto; position: absolute; top: 50%; left: 50%; z-index: 10; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media only screen and (min-width: 768px) { .page-top .entry_btn ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } }
@media only screen and (min-width: 768px) { .page-top .entry_btn ul li { width: 48.5%; } }
@media only screen and (max-width: 767px) { .page-top .entry_btn ul li + li { margin-top: 1rem; } }
.page-top .entry_btn ul li a { padding: 2.7em 0; font-size: 2.2rem; font-weight: 500; text-align: center; color: #ffffff; background-color: #004da0; -webkit-border-radius: 3rem; -moz-border-radius: 3rem; border-radius: 3rem; display: block; position: relative; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
@media only screen and (max-width: 1399px) { .page-top .entry_btn ul li a { font-size: 1.57vw; } }
@media only screen and (max-width: 767px) { .page-top .entry_btn ul li a { padding: 2.5em 0; font-size: 1.8rem; -webkit-border-radius: 1.5rem; -moz-border-radius: 1.5rem; border-radius: 1.5rem; } }
.page-top .entry_btn ul li a .arrow { width: 3rem; height: 0.6rem; margin-left: -1.5rem; position: absolute; bottom: 3rem; left: 50%; overflow: hidden; }
@media only screen and (max-width: 1399px) { .page-top .entry_btn ul li a .arrow { width: 2.14vw; height: 0.42vw; margin-left: -1.07vw; bottom: 2.14vw; } }
@media only screen and (max-width: 767px) { .page-top .entry_btn ul li a .arrow { width: 2.5rem; height: 0.5rem; margin-left: -1.25rem; bottom: 2rem; } }
.page-top .entry_btn ul li a .arrow:before, .page-top .entry_btn ul li a .arrow:after { width: 100%; height: 100%; content: ''; background-image: url("../images/common/icon_arrow03.svg"); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; position: absolute; top: 0; right: 0; animation-fill-mode: forwards; animation-duration: 0.6s; }
.page-top .entry_btn ul li a .arrow:after { transform: translateX(-100%); }
@media only screen and (max-width: 767px) { .page-top .entry_btn ul li a .arrow:after { content: none !important; } }
@media only screen and (min-width: 768px) { .page-top .entry_btn ul li a:hover { background-color: rgba(0, 77, 160, 0.8); } }
@media only screen and (min-width: 768px) { .page-top .entry_btn ul li a:hover .arrow:before { animation-name: transformRightLeft; animation-delay: 0s; } }
@media only screen and (min-width: 768px) { .page-top .entry_btn ul li a:hover .arrow:after { animation-name: transformLeftRight; animation-delay: 0.2s; } }

@keyframes kv-scroll { from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--ul-width) / 2)); } }