@charset "UTF-8";
.index {
  font-family: "Noto Sans JP", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

.index main div,
.index main dl,
.index main dt,
.index main dd,
.index main ul,
.index main ol,
.index main li,
.index main h1,
.index main h2,
.index main h3,
.index main h4,
.index main h5,
.index main h6,
.index main pre,
.index main form,
.index main fieldset,
.index main input,
.index main textarea,
.index main p,
.index main th,
.index main td {
  letter-spacing: 0.1em;
  color: #261f4b; }

.index main .inner {
  max-width: 1380px; }

.index main .video {
  aspect-ratio: 734 / 464;
  position: relative;
  border-radius: 10px;
  border: 4px solid #00b8ee;
  overflow: hidden; }

.index main .video::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/img-index/icon_play.png) left center no-repeat;
  background-size: contain;
  width: 140px;
  height: 150px; }

@media screen and (max-width: 991px) {
  .index main .video::after {
    width: 90px;
    height: 100px; } 
}

.index main .video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; }

.index main .youtube {
  aspect-ratio: 560 / 315;
  position: relative;
  border-radius: 10px;
  /*border: 4px solid #00b8ee;*/
  overflow: hidden; }

@media screen and (min-width: 1601px) {
  .index main .youtube {
    width: 50vw;
    max-width: 860px; } }
.index main .youtube iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0; }

.index main .js_movie {
  cursor: pointer; }

.index main .top-title {
  text-align: left; }

@media screen and (max-width: 991px) {
  .index main .top-title {
    width: 98%;
    margin: auto; } }
.index main .top-title > b {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a276a; }

@media screen and (max-width: 991px) {
  .index main .top-title > b {
    font-size: 1.6rem;
    margin-bottom: 7px; } }
.index main .top-title > div {
  font-size: 6rem;
  font-weight: 500;
  color: #1a276a;
  line-height: 1.4;
  letter-spacing: 0.07em; }

@media screen and (max-width: 991px) {
  .index main .top-title > div {
    font-size: 3.2rem;
    line-height: 1.3; } }
.index main .top-title > div .t1 {
  font-weight: 700;
  font-size: 6.8rem; }

@media screen and (max-width: 991px) {
  .index main .top-title > div .t1 {
    font-size: 3.6rem; } }
.index main .top-title > div .t2 {
  font-weight: 700;
  font-size: 6.8rem;
  color: #e72891; }

@media screen and (max-width: 991px) {
  .index main .top-title > div .t2 {
    font-size: 3.6rem; } }
.index main .top-title > div .t3 {
  font-weight: 700;
  font-size: 6.8rem;
  color: #00b8ee; }

@media screen and (max-width: 991px) {
  .index main .top-title > div .t3 {
    font-size: 3.6rem; } }
.index main .btn-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin: auto;
  max-width: 350px;
  width: 80%;
  height: 70px;
  color: #1a276a;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1a276a;
  text-align: center;
  text-decoration: none;
  cursor: pointer; }

@media screen and (max-width: 991px) {
  .index main .btn-arrow {
    font-size: 1.2rem;
    height: 60px;
    max-width: 320px; } }
.index main .btn-arrow > div {
  padding: 0 25px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; }

.index main .btn-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  margin: auto;
  width: 16px;
  height: 2px;
  background: #1a276a;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .btn-arrow::before {
    right: 15px;
    width: 12px; } }
.index main .btn-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #1a276a;
  border-right: 2px solid #1a276a;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .btn-arrow::after {
    right: 15px;
    width: 8px;
    height: 8px; } }
@media screen and (min-width: 992px) {
  .index main .btn-arrow {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease; }

  .index main .btn-arrow > div {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease; }

  .index main .btn-arrow::before,
  .index main .btn-arrow::after {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease; }

  .index main .btn-arrow:hover {
    background: #1a276a; }

  .index main .btn-arrow:hover > div {
    color: #fff; }

  .index main .btn-arrow:hover::before {
    background: #fff; }

  .index main .btn-arrow:hover::after {
    border-color: #fff; } }
.index main .btn-arrow.--entry {
  border: none;
  background: #e62e92; }

.index main .btn-arrow.--entry > div {
  position: relative; }

.index main .btn-arrow.--entry > div > span {
  position: relative;
  z-index: 1;
  color: #fff; }

.index main .btn-arrow.--entry > div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: #e72891;
  background: linear-gradient(80deg, #e72891 0%, #00b8ee 100%); }

.index main .btn-arrow.--entry::before {
  background: #fff; }

.index main .btn-arrow.--entry::after {
  border-color: #fff; }

@media screen and (min-width: 992px) {
  .index main .btn-arrow.--entry > div::before {
    transition: opacity 0.3s ease; }

  .index main .btn-arrow.--entry:hover > div {
    color: #fff; }

  .index main .btn-arrow.--entry:hover > div::before {
    opacity: 0; } }
.index main .btn-arrow.--service {
  justify-content: center;
  border-color: #fff;
  background: none;
  max-width: 300px; }

@media screen and (max-width: 991px) {
  .index main .btn-arrow.--service {
    max-width: 250px; } }
.index main .btn-arrow.--service > div {
  padding: 0 10px 0 0;
  color: #fff;
  justify-content: center; }

.index main .btn-arrow.--service::before {
  background: #fff; }

.index main .btn-arrow.--service::after {
  border-color: #fff; }

@media screen and (min-width: 992px) {
  .index main .btn-arrow.--service:hover {
    background: #fff; }

  .index main .btn-arrow.--service:hover > div {
    color: #05bbee; }

  .index main .btn-arrow.--service:hover::before {
    background: #05bbee; }

  .index main .btn-arrow.--service:hover::after {
    border-color: #05bbee; } }
.index main .lines {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 2px;
  height: 100%;
  pointer-events: none;
  z-index: 10; }

.index main .lines .slash {
  position: absolute;
  width: 100%;
  height: 100%; }

.index main .lines .slash .in {
  height: 100%; }

.index main .lines .slash .bar {
  width: 3px;
  height: 100%;
  background: #a9bfc6;
  transform: rotate(45deg);
  transform-origin: 100% 0;
  clip-path: inset(0% 0% 100% 0%);
  will-change: clip-path, transform;
  pointer-events: none; }

.index main .lines .slash.show .bar {
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path 0.8s cubic-bezier(0.25, 1, 0.5, 1); }

.index main .lines .slash.hide .bar {
  clip-path: inset(100% 0% 0% 0%);
  transition: clip-path 0.6s cubic-bezier(0.32, 0, 0.67, 0); }

.index main .topMv {
  margin-top: 90px;
  position: relative;
  overflow: hidden;
  padding-bottom: 145px; }

@media screen and (max-width: 991px) {
  .index main .topMv {
    margin-top: 0;
    padding-bottom: 100px; } }
.index main .topMv .lines .slash {
  animation: anim_slash 18s linear infinite; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line01 {
    left: calc(50% + 675px);
    height: 390px;
    bottom: -50px; } }
@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line01 {
    left: 50vw;
    height: 60px;
    bottom: 36px; } }
.index main .topMv .lines .slash.--line01 .bar {
  background: #00b8ee; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line02 {
    left: calc(50% + 720px);
    height: 400px;
    bottom: 125px; } }
@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line02 {
    left: 50vw;
    height: 75px;
    bottom: 166px; } }
.index main .topMv .lines .slash.--line02 .bar {
  background: #00b8ee; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line03 {
    left: calc(50% + 652px);
    height: 400px;
    bottom: 155px; } }
@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line03 {
    left: 50vw;
    height: 138px;
    bottom: 175px; } }
.index main .topMv .lines .slash.--line03 .bar {
  background: #fff; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line04 {
    right: calc(50% + 390px);
    height: 400px;
    bottom: -60px; } }
@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line04 {
    right: calc(50vw - 60px);
    height: 90px;
    bottom: -15px; } }
.index main .topMv .lines .slash.--line04 .bar {
  background: #00b8ee; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line05 {
    right: calc(50% + 318px);
    height: 390px;
    bottom: 158px; } }
@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line05 {
    right: calc(50vw - 90px);
    height: 140px;
    bottom: 130px; } }
.index main .topMv .lines .slash.--line05 .bar {
  background: #fff; }

@media screen and (min-width: 992px) {
  .index main .topMv .lines .slash.--line06 {
    right: calc(50% + 373px);
    height: 390px;
    bottom: 187px; } }

@media screen and (max-width: 991px) {
  .index main .topMv .lines .slash.--line06 {
    right: calc(50vw - 60px);
    height: 90px;
    bottom: 200px; } }
.index main .topMv .lines .slash.--line06 .bar {
  background: #261f4b; }

@media screen and (min-width: 1601px) {
  .index main .topMv-movie {
    width: 100%;
    height: 680px;
    position: relative;
    z-index: 2; } 
}

@media screen and (min-width: 992px) and (max-width: 1600px) {
  .index main .topMv-movie {
    width: 100%;
    height: 600px;
    position: relative;
    z-index: 2; } 
}

@media screen and (max-width: 991px) {
  .index main .topMv-movie {
    height: 460px; } 
}
.index main .topMv-movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; }
sｓ
@media screen and (min-width: 992px) {
  .index main .topMv-catch {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
	}
    .index main .topMv-catch .txt {
      font-size: 2.9rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.16em;
      padding-top: 45px; } }

@media screen and (min-width: 992px) {
  .index main .topMv-catch {
    position: absolute;
    left: 250px;
    margin: auto;
    bottom: 90px;
    z-index: 11; } }


@media screen and (max-width: 1600px) and (min-width: 1281px) {
  .index main .topMv-catch {
    left: 40px;
    /*right: 0;*/
    display: flex;
    bottom: 100px;
    justify-content: center; 

	}
    .index main .topMv-catch img {
    width: 100%;

	} 
}


@media screen and (max-width: 1280px) and (min-width: 992px) {
  .index main .topMv-catch {
    left: -30px;
    /*right: 0;*/
	  
    /*display: flex;*/
    justify-content: center; }
    .index main .topMv-catch img {
      width: 80%;
      bottom: 100px;} 
}


@media screen and (max-width: 991px) {
  .index main .topMv-catch {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
    .index main .topMv-catch .txt {
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      padding-top: 35px;
      letter-spacing: 0.15em;
}

  .index main .topMv-catch img {
    width: 96%;
    margin: 0 auto;
    display: block; } 
}

.index main .topLead {
  position: relative;
  z-index: 99;
  background: #fff; }

@media screen and (max-width: 991px) {
  .index main .topLead {
    padding-bottom: 50px; } }
.index main .topLead-bg {
  position: relative;
  position: sticky;
  top: 180px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 941 / 265;
  margin-top: -475px; }

@media screen and (max-width: 991px) {
  .index main .topLead-bg {
    aspect-ratio: 640 / 223;
    margin-top: -65vw;
    top: 170px; } }
.index main .topLead-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 941px;
  height: 265px;
  background: url(../img/img-index/bg_lead.png) center center/contain no-repeat;
  z-index: -1;
  overflow: hidden; }

@media screen and (max-width: 991px) {
  .index main .topLead-bg::before {
    background-image: url(../img/img-index/bg_lead_sp.png);
    width: 100%;
    height: 100%; } }
.index main .topLead-main {
  text-align: center;
  padding: 150px 30px 250px;
  z-index: 2;
  position: sticky;
  top: 50px;
  overflow: hidden; }

@media screen and (max-width: 991px) {
  .index main .topLead-main {
    padding: 60px 6% 40vw;
    left: 0;
    right: 0;
    top: 50px; } }
.index main .topLead-main .txt {
  position: relative; }

.index main .topLead-main .txt p {
  font-size: 2rem;
  font-weight: 500;
  color: #261f4b;
  line-height: 2.6;
  text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, 1px 0px 0px #fff, -1px -0px 0px #fff, 0px 1px 0px #fff, 0px -1px 0px #fff; }

@media screen and (max-width: 991px) {
  .index main .topLead-main .txt p {
    font-size: 1.3rem; } }
.index main .topLead-btns.started {
  opacity: 1; }

.index main .topLead-btns.started ul li {
  opacity: 1; }

.index main .topLead-btns.started ul li:nth-child(2) {
  transition-delay: 0.6s; }

.index main .topLead-btns ul {
  display: flex;
  justify-content: center; }

@media screen and (max-width: 991px) {
  .index main .topLead-btns ul {
    flex-direction: column;
    width: 60%;
    margin: auto; } }
.index main .topLead-btns ul li {
  width: 260px;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease; }

@media screen and (max-width: 991px) {
  .index main .topLead-btns ul li {
    width: 100%; } }
.index main .topLead-btns ul li + li {
  margin-left: 30px; }

@media screen and (max-width: 991px) {
  .index main .topLead-btns ul li + li {
    margin: 17px 0 0; } }
.index main .topLead-btns ul li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #2c3e50;
  border: 1px solid #2c3e50;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.4;
  padding: 0 25px;
  height: 65px;
  margin: auto;
  width: 100%;
  font-weight: 700;
  text-align: left;
  position: relative;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 991px) {
  .index main .topLead-btns ul li a {
    height: 50px;
    font-size: 1.4rem; } }
.index main .topLead-btns ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  background: url(../img/img-common/icon_arrow_w.png) left center no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px; }

.index main .topLead-btns ul li a > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%; }

@media screen and (min-width: 992px) {
  .index main .topLead-btns ul li a {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease; }

  .index main .topLead-btns ul li a::before {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }

  .index main .topLead-btns ul li a:hover {
    background-color: #fff;
    color: #2c3e50; }

  .index main .topLead-btns ul li a:hover::before {
    background-image: url(../img/img-common/icon_arrow.png); } }
.index main .topLead-images {
  position: relative;
  overflow: hidden;
  width: 100%;
  pointer-events: none; }

@media screen and (min-width: 992px) {
  .index main .topLead-images {
    height: calc(1530px + 100vh);
    height: 1530px;
    margin-top: 100px; }

  .index main .topLead-images li {
    position: absolute; }

  .index main .topLead-images li.img01 {
    left: calc(50% - 392px);
    top: 135px; }

  .index main .topLead-images li.img02 {
    left: calc(50% - 752px);
    top: 306px; }

  .index main .topLead-images li.img03 {
    left: calc(50% - 363px);
    top: 469px; }

  .index main .topLead-images li.img04 {
    left: calc(50% - 682px);
    top: 892px; }

  .index main .topLead-images li.img05 {
    left: calc(50% - 319px);
    top: 1221px; }

  .index main .topLead-images li.img06 {
    right: calc(50% - 403px);
    top: 79px; }

  .index main .topLead-images li.img07 {
    right: calc(50% - 751px);
    top: 306px; }

  .index main .topLead-images li.img08 {
    right: calc(50% - 472px);
    top: 707px; }

  .index main .topLead-images li.img09 {
    right: calc(50% - 712px);
    top: 830px; }

  .index main .topLead-images li.img10 {
    right: calc(50% - 527px);
    top: 1091px; } }
@media screen and (max-width: 991px) {
  .index main .topLead-images {
    margin-top: 50px; }

  .index main .topLead-images ul:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

  .index main .topLead-images li.img01 {
    margin-left: 0;
    margin-top: 70px;
    width: 22%; }

  .index main .topLead-images li.img02 {
    margin-left: 6%;
    margin-top: 30px;
    width: 30%; }

  .index main .topLead-images li.img03 {
    margin-left: 0;
    margin-top: 55px;
    width: 21%; }

  .index main .topLead-images li.img04 {
    margin-left: 5%;
    margin-top: 20px;
    width: 28%; }

  .index main .topLead-images li.img05 {
    display: none; }

  .index main .topLead-images li.img06 {
    margin: 25px 3% 0 auto;
    width: 21%; }

  .index main .topLead-images li.img07 {
    margin: 60px 0 0 auto;
    width: 32%; }

  .index main .topLead-images li.img08 {
    margin: 80px 8% 0 auto;
    width: 18%; }

  .index main .topLead-images li.img09 {
    margin: 25px 0 0 auto;
    width: 30%; }

  .index main .topLead-images li.img10 {
    margin: 25px 31% 0 auto;
    width: 23%; } }
.index main .topService {
  padding: 90px 0 20px;
  position: relative;
  background: #05bbee;
  /*background: linear-gradient(325deg, rgba(255, 255, 255, 0) 0%, #19beee 33%, #05bbee 100%);*/ }

@media screen and (max-width: 991px) {
  .index main .topService {
    padding: 45px 0 20px; } }
.index main .topService .inner {
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topService .inner {
    padding: 0 3%; } }
.index main .topService-ttl {
  margin-bottom: 50px; }

@media screen and (max-width: 991px) {
  .index main .topService-ttl {
    margin-bottom: 25px; } }
.index main .topService-ttl .t1 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #fff; }

@media screen and (max-width: 991px) {
  .index main .topService-ttl .t1 {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 10px; } }
.index main .topService-ttl .t2 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6; }

@media screen and (max-width: 991px) {
  .index main .topService-ttl .t2 {
    text-align: center;
    font-size: 1.7rem; } }
@media screen and (max-width: 991px) {
  .index main .topService-txt {
    width: 92%;
    margin: auto; } }
.index main .topService-txt p {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.6; }

@media screen and (max-width: 991px) {
  .index main .topService-txt p {
    font-size: 1.3rem;
    line-height: 2; } }
.index main .topService-btn {
  display: flex;
  justify-content: center;
  margin-top: 50px; }

.index main .topInternational {
  padding: 140px 0 130px;
  background: #fff;
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 991px) {
  .index main .topInternational {
    padding: 40px 0 60px; } }
.index main .topInternational .lines .slash {
  animation: anim_slash 18s linear infinite; }

@media screen and (min-width: 992px) {
  .index main .topInternational .lines .slash.--line01 {
    right: calc(50% + 70px);
    height: 150px; } }
@media screen and (max-width: 991px) {
  .index main .topInternational .lines .slash.--line01 {
    left: 50vw;
    height: 75px;
    top: 100px; } }
.index main .topInternational .lines .slash.--line01 .bar {
  background: #a9bfc6; }

@media screen and (min-width: 992px) {
  .index main .topInternational .lines .slash.--line02 {
    right: calc(50% + 130px);
    height: 200px; } }
@media screen and (max-width: 991px) {
  .index main .topInternational .lines .slash.--line02 {
    left: 50vw;
    height: 120px;
    top: 40px; } }
.index main .topInternational .lines .slash.--line02 .bar {
  background: #423d64; }

@media screen and (min-width: 992px) {
  .index main .topInternational .lines .slash.--line03 {
    right: calc(50% + 640px);
    top: 50px;
    height: 300px; } }
@media screen and (max-width: 991px) {
  .index main .topInternational .lines .slash.--line03 {
    right: calc(50vw - 50px);
    height: 70px;
    top: 0; } }
.index main .topInternational .lines .slash.--line03 .bar {
  background: #00b8ee;
  width: 2px; }

.index main .topInternational-movie {
  padding-bottom: 60px;
  position: relative;
  z-index: 11; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie {
    padding-bottom: 30px; } }
.index main .topInternational-movie .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2; }

@media screen and (min-width: 992px) {
  .index main .topInternational-movie .flex .item {
    width: calc(100% - 730px); }

  .index main .topInternational-movie .flex .item:nth-child(2) {
    width: 730px; } }
@media screen and (max-width: 1300px) and (min-width: 992px) {
  .index main .topInternational-movie .flex .item {
    width: 45%; }

  .index main .topInternational-movie .flex .item:nth-child(2) {
    width: 55%; } }
@media screen and (max-width: 991px) {
  .index main .topInternational-movie .flex .item {
    width: 100%; }

  .index main .topInternational-movie .flex .item:not(:last-child) {
    margin-bottom: 25px; } }
.index main .topInternational-movie .flex dl {
  padding-left: 30px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie .flex dl {
    padding-left: 0; } }
.index main .topInternational-movie .flex dl dd {
  padding-top: 60px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie .flex dl dd {
    padding-top: 40px; } }
.index main .topInternational-movie .flex dl dd p {
  font-size: 1.8rem;
  text-align: left;
  line-height: 2.5; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie .flex dl dd p {
    font-size: 1.3rem;
    line-height: 2; } }
.index main .topInternational-movie .bgtxt {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-top: -2%; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie .bgtxt {
    position: absolute;
    left: 0;
    top: 25px;
    margin-top: 0; } }
.index main .topInternational-movie .bgtxt img {
  width: 100%;
  max-width: 1890px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-movie .bgtxt img {
    width: 50px; } }
.index main .topInternational-flag {
  position: relative;
  z-index: 11; }

.index main .topInternational-flag .txt {
  margin-bottom: 55px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .txt {
    text-align: center;
    margin-bottom: 35px; } }
.index main .topInternational-flag .txt > b {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  padding-bottom: 10px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .txt > b {
    font-size: 1.3rem; } }
.index main .topInternational-flag .txt > div {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.7; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .txt > div {
    font-size: 1.3rem;
    letter-spacing: 0.03em; } }
.index main .topInternational-flag .txt > div .t1 {
  font-size: 3rem; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .txt > div .t1 {
    font-size: 1.8rem; } }
.index main .topInternational-flag .txt > div .t2 {
  font-size: 1.6rem;
  margin: 0 -0.3em; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .txt > div .t2 {
    font-size: 1rem;
    margin: 0 -0.4em; } }
.index main .topInternational-flag .images {
  overflow: hidden;
  width: 100%;
  height: 100px;
  position: relative; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .images {
    height: 50px; } }
.index main .topInternational-flag .images .marquee_inner {
  display: flex;
  width: max-content;
  display: flex;
  position: absolute;
  top: 0;
  left: 0; }

.index main .topInternational-flag .images .marquee_inner img {
  flex-shrink: 0;
  width: auto; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .images .marquee_inner img {
    height: 50px; } }
.index main .topInternational-flag .images .marquee_inner img + img {
  margin-left: 30px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-flag .images .marquee_inner img + img {
    margin-left: 15px; } }
.index main .topInternational-caution {
  text-align: right;
  font-size: 1.4rem;
  margin-top: 0px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-caution {
    margin-top: 10px;
    font-size: 0.9rem; } }
.index main .topInternational-btn {
  margin-top: 50px; }

.index main .topInternational-btn ul {
  display: flex;
  justify-content: center; }

@media screen and (max-width: 991px) {
  .index main .topInternational-btn ul {
    flex-direction: column;
    align-items: center; } }
.index main .topInternational-btn ul li {
  width: 350px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-btn ul li {
    width: 80%; } }
.index main .topInternational-btn ul li + li {
  margin-left: 60px; }

@media screen and (max-width: 991px) {
  .index main .topInternational-btn ul li + li {
    margin: 20px 0 0 0; } }
.index main .topInternational-btn ul li a {
  width: 100%; }

.index main .topSupport {
  background: #ecf5fa;
  padding: 70px 0 100px;
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 991px) {
  .index main .topSupport {
    padding: 40px 0 0; } }
.index main .topSupport .lines .slash {
  animation: anim_slash 18s linear infinite; }

@media screen and (min-width: 992px) {
  .index main .topSupport .lines .slash.--line01 {
    right: calc(50% + 60px);
    height: 150px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport .lines .slash.--line01 {
    left: 50vw;
    height: 120px;
    top: 50px; } }
.index main .topSupport .lines .slash.--line01 .bar {
  background: #a9bfc6; }

@media screen and (max-width: 991px) {
  .index main .topSupport .lines .slash.--line01 .bar {
    background: #00b8ee; } }
@media screen and (min-width: 992px) {
  .index main .topSupport .lines .slash.--line02 {
    right: calc(50% + 120px);
    height: 200px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport .lines .slash.--line02 {
    left: 50vw;
    height: 100px;
    top: 0; } }
.index main .topSupport .lines .slash.--line02 .bar {
  background: #423d64; }

@media screen and (min-width: 992px) {
  .index main .topSupport .lines .slash.--line03 {
    right: calc(50% + 650px);
    top: 50px;
    height: 300px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport .lines .slash.--line03 {
    right: calc(50vw - 33px);
    height: 50px;
    top: 16px; } }
.index main .topSupport .lines .slash.--line03 .bar {
  background: #00b8ee; }

@media screen and (max-width: 991px) {
  .index main .topSupport .lines .slash.--line04 {
    right: calc(50vw - 33px);
    height: 50px;
    top: 163px; } }
.index main .topSupport .lines .slash.--line04 .bar {
  background: #a9bfc6; }

@media screen and (min-width: 992px) {
  .index main .topSupport-lead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1380px; }

  .index main .topSupport-lead-wrap {
    width: 40%;
    padding-top: 110px;
    padding-left: 30px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-lead-wrap {
    padding: 0 6%; } }
.index main .topSupport-lead .txt {
  padding-top: 80px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-lead .txt {
    padding-top: 40px;
    display: table;
    margin: auto; } }
.index main .topSupport-lead .txt p {
  font-size: 1.8rem;
  text-align: left;
  line-height: 2.5; }

@media screen and (max-width: 991px) {
  .index main .topSupport-lead .txt p {
    font-size: 1.3rem;
    line-height: 2; } }
@media screen and (min-width: 992px) {
  .index main .topSupport-lead .item:nth-child(1) {
    padding-left: 30px;
    padding-top: 30px; } }
.index main .topSupport-lead .flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2; }

@media screen and (min-width: 992px) {
  .index main .topSupport-lead .flex .item {
    width: 40%; }

  .index main .topSupport-lead .flex .item:nth-child(2) {
    width: 60%; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-lead .flex .item {
    width: 100%; }

  .index main .topSupport-lead .flex .item:not(:last-child) {
    margin-bottom: 25px; } }
.index main .topSupport .bgtxt {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-top: -40px; }

@media screen and (min-width: 992px) {
  .index main .topSupport .bgtxt .flowimages {
    overflow: hidden;
    width: 100%;
    height: 124px;
    position: relative; } }
@media screen and (min-width: 992px) and (max-width: 991px) {
  .index main .topSupport .bgtxt .flowimages {
    height: 50px; } }
@media screen and (min-width: 992px) {
  .index main .topSupport .bgtxt .flowimages .marquee_inner {
    display: flex;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0; }

  .index main .topSupport .bgtxt .flowimages .marquee_inner img {
    flex-shrink: 0;
    width: auto; }

  .index main .topSupport .bgtxt .flowimages .marquee_inner img + img {
    margin-left: 30px; } }
@media screen and (min-width: 992px) and (max-width: 991px) {
  .index main .topSupport .bgtxt .flowimages .marquee_inner img + img {
    margin-left: 15px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport .bgtxt {
    position: absolute;
    right: 0;
    top: 70px;
    margin-top: 0; } }
.index main .topSupport .bgtxt img {
  width: 100%;
  max-width: 1895px; }

@media screen and (max-width: 991px) {
  .index main .topSupport .bgtxt img {
    width: 50px; } }
@media screen and (min-width: 992px) {
  .index main .topSupport-list .wbox {
    width: 60%;
    margin-left: auto;
    margin-right: 0; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-list {
    position: absolute;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    padding: 65px 6% 0; }

  .index main .topSupport-list .inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start; } }
.index main .topSupport-list .wbox {
  background: #fff;
  border: 1px solid #cbd9e1;
  position: relative;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    will-change: transform;
    pointer-events: none; } }
@media screen and (min-width: 992px) {
  .index main .topSupport-list .wbox + .wbox {
    margin-top: 25px; } }
.index main .topSupport-list .wbox dl {
  width: 100%;
  padding: 25px 0 40px;
  min-height: 278px;
  text-align: left;
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl {
    width: 100%;
    padding: 25px 30px 30px 0; } }
.index main .topSupport-list .wbox dl dt {
  display: flex;
  align-items: center; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt {
    flex-direction: column;
    align-items: flex-start; } }
.index main .topSupport-list .wbox dl dt .no {
  width: 150px;
  font-size: 7.5rem;
  font-weight: 500;
  color: #00b8ee;
  line-height: 1;
  position: relative;
  padding-left: 25px;
  letter-spacing: 0.01em;
  font-family: "Playfair Display", serif; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .no {
    font-size: 4.7rem;
    width: auto;
    padding-right: 30px; } }
.index main .topSupport-list .wbox dl dt .no::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  margin: auto;
  width: 7px;
  height: 45px;
  background: #00b8ee; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .no::before {
    height: 40px;
    width: 5px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .no::after {
    content: "";
    position: absolute;
    bottom: -0.2em;
    right: 0;
    margin: auto;
    background: url(../img/img-index/txt_support.png) left center no-repeat;
    background-size: contain;
    width: 10px;
    height: 100%; } }
.index main .topSupport-list .wbox dl dt .txt {
  width: calc(100% - 150px);
  padding-top: 20px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .txt {
    width: 100%;
    padding: 20px 0 0 30px; } }
.index main .topSupport-list .wbox dl dt .txt .t1 {
  color: #00b8ee;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: "Playfair Display", serif;
  line-height: 1;
  padding-bottom: 3px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .txt .t1 {
    position: absolute;
    padding-bottom: 0;
    left: 100px;
    top: 0;
    font-size: 1rem;
    display: none; } }
.index main .topSupport-list .wbox dl dt .txt .t2 {
  font-size: 2.8rem;
  font-weight: 700; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dt .txt .t2 {
    font-size: 2.2rem;
    margin-top: 0; } }
.index main .topSupport-list .wbox dl dd {
  padding: 35px 0 0 60px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dd {
    padding: 15px 0 0 30px; } }
.index main .topSupport-list .wbox dl dd p {
  font-size: 1.6rem;
  line-height: 2.2; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dd p {
    font-size: 1.3rem;
    line-height: 1.8; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox dl dd img {
    margin-top: 20px; } }
.index main .topSupport-list .wbox .image {
  position: absolute;
  right: 40px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  pointer-events: none; }

@media screen and (max-width: 991px) {
  .index main .topSupport-list .wbox .image {
    width: 120px;
    height: 120px;
    bottom: inherit;
    top: 20px;
    right: 25px; } }
@media screen and (max-width: 991px) {
  .index main .topSupport-scmagic {
    position: relative; } }
.index main .topSupport-movie {
  max-width: 800px;
  margin: 40px auto 0; }

@media screen and (max-width: 991px) {
  .index main .topSupport-movie {
    margin-top: 0;
    background: #ecf5fa;
    position: relative;
    z-index: 99;
    padding: 50px 0 60px; } }
.index main .topSupport-movie dl dt {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 30px; }

@media screen and (max-width: 991px) {
  .index main .topSupport-movie dl dt {
    font-size: 1.3rem;
    text-align: center; } }
.index main .topOccupation {
  padding: 0 0 100px;
  position: relative;
  background: #fff;
  overflow: hidden; }

@media screen and (max-width: 991px) {
  .index main .topOccupation {
    padding: 0 0 60px; } }
.index main .topOccupation .lines .slash {
  animation: anim_slash 18s linear infinite; }

@media screen and (min-width: 992px) {
  .index main .topOccupation .lines .slash.--line01 {
    left: calc(50% + 640px);
    height: 210px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation .lines .slash.--line01 {
    left: 50vw;
    height: 75px;
    top: 126px; } }
.index main .topOccupation .lines .slash.--line01 .bar {
  background: #a9bfc6; }

@media screen and (min-width: 992px) {
  .index main .topOccupation .lines .slash.--line02 {
    left: calc(50% + 570px);
    height: 230px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation .lines .slash.--line02 {
    left: 50vw;
    height: 175px;
    top: 72px; } }
.index main .topOccupation .lines .slash.--line02 .bar {
  background: #423d64; }

@media screen and (min-width: 992px) {
  .index main .topOccupation .lines .slash.--line03 {
    left: calc(50% + 470px);
    height: 110px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation .lines .slash.--line03 {
    left: 50vw;
    height: 70px;
    top: 19px; } }
.index main .topOccupation .lines .slash.--line03 .bar {
  background: #00b8ee; }

@media screen and (min-width: 992px) {
  .index main .topOccupation .lines .slash.--line04 {
    right: calc(50% + 390px);
    height: 270px;
    top: 40px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation .lines .slash.--line04 {
    right: calc(50vw - 50px);
    height: 70px;
    top: 0; } }
.index main .topOccupation .lines .slash.--line04 .bar {
  background: #00b8ee; }

@media screen and (min-width: 992px) {
  .index main .topOccupation .lines .slash.--line05 {
    right: calc(50% + 460px);
    height: 190px; } }
.index main .topOccupation .lines .slash.--line05 .bar {
  background: #261f4b; }

.index main .topOccupation .top-title {
  text-align: center;
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topOccupation .top-title {
    text-align: left; } }
.index main .topOccupation-staff {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  margin-top: 70px;
  position: relative;
  height: 485px;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-staff {
    height: 385px;
    margin-top: 35px; } }
.index main .topOccupation-staff .flex {
  display: flex;
  align-items: flex-end;
  width: max-content;
  position: absolute;
  top: 0;
  left: 0; }

.index main .topOccupation-staff .flex .item {
  flex-shrink: 0;
  width: auto;
  margin-right: 50px; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-staff .flex .item {
    margin-right: 10px; } }
.index main .topOccupation-staff .flex .item .txt {
  background: url(../img/img-index/bg_speech_bubble.png) left center no-repeat;
  background-size: contain;
  width: 173px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 auto 10px; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-staff .flex .item .txt {
    font-size: 13px;
    height: 80px;
    width: 138.4px;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 5px; } }
@media screen and (min-width: 992px) {
  .index main .topOccupation-staff .flex .item img {
    height: 375px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation-staff .flex .item img {
    height: 300px; } }
.index main .topOccupation-bottom {
  margin-top: 50px; }

.index main .topOccupation-bottom p {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.4;
  margin-bottom: 50px;
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom p {
    text-align: left;
    font-size: 1.3rem;
    width: 90%;
    margin: 0 auto 0px;
    line-height: 1.8; } }
.index main .topOccupation-bottom ul {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom ul {
    flex-direction: column;
    align-items: center; } }
.index main .topOccupation-bottom ul li {
  width: 350px; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom ul li {
    width: 80%; } }
.index main .topOccupation-bottom ul li + li {
  margin-left: 60px; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom ul li + li {
    margin: 20px 0 0 0; } }
.index main .topOccupation-bottom ul li a {
  width: 100%; }

.index main .topOccupation-bottom .bgtxt {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-top: -8%; }

@media screen and (min-width: 992px) {
  .index main .topOccupation-bottom .bgtxt .flowimages {
    overflow: hidden;
    width: 100%;
    height: 124px;
    position: relative; } }
@media screen and (min-width: 992px) and (max-width: 991px) {
  .index main .topOccupation-bottom .bgtxt .flowimages {
    height: 50px; } }
@media screen and (min-width: 992px) {
  .index main .topOccupation-bottom .bgtxt .flowimages .marquee_inner {
    display: flex;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0; }

  .index main .topOccupation-bottom .bgtxt .flowimages .marquee_inner img {
    flex-shrink: 0;
    width: auto; }

  .index main .topOccupation-bottom .bgtxt .flowimages .marquee_inner img + img {
    margin-left: 30px; } }
@media screen and (min-width: 992px) and (max-width: 991px) {
  .index main .topOccupation-bottom .bgtxt .flowimages .marquee_inner img + img {
    margin-left: 15px; } }
@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom .bgtxt {
    position: absolute;
    right: 0;
    top: 30px;
    margin-top: 0; } }
.index main .topOccupation-bottom .bgtxt img {
  width: 100%;
  max-width: 1895px; }

@media screen and (max-width: 991px) {
  .index main .topOccupation-bottom .bgtxt img {
    width: 50px; } }
.index main .topMessage {
  position: relative;
  overflow: hidden; }

.index main .topMessage::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: calc(100% - 0px);
  background: #05bbee;
  background: linear-gradient(325deg, rgba(255, 255, 255, 0) 0%, #19beee 33%, #05bbee 100%); }

@media screen and (max-width: 991px) {
  .index main .topMessage::before {
    height: calc(100% - 0vw); } }
.index main .topMessage .inner {
  position: relative;
  z-index: 2; }

@media screen and (max-width: 991px) {
  .index main .topMessage .inner {
    padding: 0; } }
.index main .topMessage-image {
  display: flex;
  justify-content: center; }

.index main .topMessage-image .image {
  position: relative;
  padding-bottom: 30px; }

.index main .topMessage-image .txt {
  position: absolute;
  right: 110px;
  bottom: 0;
  max-width: 353px; }

@media screen and (max-width: 991px) {
  .index main .topMessage-image .txt {
    width: 250px;
    right: inherit;
    left: 8%; } }
.index main .topMessage-txt {
  padding: 50px 0 0; }

@media screen and (max-width: 991px) {
  .index main .topMessage-txt {
    padding: 30px 6% 60px; } }
.index main .topMessage-txt p {
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.4;
  letter-spacing: 0.08em; }

@media screen and (max-width: 991px) {
  .index main .topMessage-txt p {
    font-size: 1.3rem; } }
.index main .topMessage-txt p + p {
  margin-top: 30px; }

.index main .topMessage-txt .bgtxt {
  padding-top: 10px;
  display: flex;
  justify-content: center; }

@media screen and (max-width: 991px) {
  .index main .topMessage-txt .bgtxt {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: 0; }

  .index main .topMessage-txt .bgtxt img {
    width: 50px; } }
.index header,
.index .topMv-movie,
.index .topMv-catch,
.index .lines {
  opacity: 0; }

.index.is_loading .topMv-movie {
  animation: Shrink 1s ease forwards; }

.index.is_loading header {
  animation: fadeIn 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; }

.index.is_loading .lines {
  animation: fadeIn 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  animation-delay: 0.6s; }

.index.is_loading .topMv-catch {
  animation: Shrink 1s ease forwards;
  animation-delay: 0.6s; }

.index .fadeleft,
.index .fadeup {
  animation-delay: 0.2s !important; }

#modal-overlay-movie {
  z-index: 9999999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); }

#modal-overlay-movie.--short .modal-content {
  width: 100%;
  max-width: 365px; }

@media screen and (max-width: 991px) {
  #modal-overlay-movie.--short .modal-content {
    width: 70%; } }
#modal-overlay-movie.--short .modal-movie {
  aspect-ratio: 9 / 16; }

#modal-overlay-movie .modal-wrap {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; }

@media screen and (max-width: 991px) {
  #modal-overlay-movie .modal-wrap {
    padding-top: 50px; } }
#modal-overlay-movie .modal-content {
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative; }

@media screen and (max-width: 991px) {
  #modal-overlay-movie .modal-content {
    width: 90%; } }
#modal-overlay-movie .modal-movie {
  aspect-ratio: 16/9; }

#modal-overlay-movie .modal-movie iframe {
  display: block;
  width: 100%;
  height: 100%; }

#modal-overlay-movie .modal_close {
  background: #999999;
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  top: -45px;
  right: 0;
  border-radius: 50%;
  z-index: 99999999;
  cursor: pointer; }

#modal-overlay-movie .modal_close > span::before,
#modal-overlay-movie .modal_close > span::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  margin: auto;
  bottom: 0;
  width: 2px;
  height: 18px;
  background: #fff; }

#modal-overlay-movie .modal_close > span::before {
  transform: rotate(-45deg); }

#modal-overlay-movie .modal_close > span::after {
  transform: rotate(45deg); }

@keyframes anim_slash {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-200px, 200px); } }
@keyframes diagonalExpandSlideOut {
  0% {
    width: 0;
    transform: rotate(-45deg) translate(0, 0);
    opacity: 1; }
  40% {
    width: 200px;
    transform: rotate(-45deg) translate(0, 0);
    opacity: 1; }
  80% {
    width: 50px;
    transform: rotate(-45deg) translate(-50px, 100px);
    opacity: 1; }
  100% {
    width: 0;
    transform: rotate(-45deg) translate(-50px, 100px);
    opacity: 0; } }
@keyframes marquee {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(calc(-50%)); } }
@media screen and (max-width: 991px) {
  .sp_mt30 {
    margin-top: 30px; }

  .sp_mt10 {
    margin-top: 10px; } }
@media screen and (max-width: 991px) {
  .sp_mb80 {
    margin-bottom: 80px; } }
.pc_mb80 {
  margin-bottom: 80px; }