@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
@font-face {
  font-family: 'sns_ico';
  src:
    url('../fonts/sns_ico.ttf?z7sza2') format('truetype'),
    url('../fonts/sns_ico.woff?z7sza2') format('woff'),
    url('../fonts/sns_ico.svg?z7sza2#sns_ico') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Arthemys';
  src: url('../fonts/ArthemysDisplay-Light.otf?z7sza2') format('opentype');
  font-weight: normal;
  font-style: normal;
}

i.snsIcon {
  font-family: 'sns_ico' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
	color: #fff;
}

.icon-search:before { content: "\e908";}
.icon-arrow1_left:before { content: "\e90c";}
.icon-arrow1_bottom:before { content: "\e90d";}
.icon-arrow1_right:before { content: "\e90e";}
.icon-arrow1_top:before { content: "\e90f";}
.icon-arrow2_left:before { content: "\e910";}
.icon-arrow2_bottom:before { content: "\e911";}
.icon-arrow2_right:before { content: "\e912";}
.icon-arrow2_top:before { content: "\e913";}
.icon-link:before { content: "\e914";}
.icon-note:before { content: "\e915";}
.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}
.icon-wb:before { content: "\e90b";}
.icon-arrow3_top:before { content: "\ea3a";}
.icon-arrow3_right:before { content: "\ea3c";}
.icon-arrow3_bottom:before { content: "\ea3e";}
.icon-arrow3_left:before { content: "\ea40";}


html {
	scroll-behavior: smooth;
}
body {
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 12px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
  background-color: #000;
  color: #fff;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none;}
	
}

#op {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 1000;
}
#op .opMovie {
  width: 100%;
  aspect-ratio: 100/56.25;
}
#op iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#op .close {
  width: min(14vw, 70px);
  aspect-ratio: 1/1;
  background-color: #101135;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9000;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
#op .close::before, 
#op .close::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
}
#op .close::before {
  transform: translate(-50%, -50%) rotate(45deg);
} 
#op .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#op .close:hover {
  transform: scale(1.1);
}

@media (min-aspect-ratio: 16 / 9) {
  
  #op .opMovie {
    width: auto;
    height: 100%;
  }
  
}


main {
  background: url("../images/main_bg.jpg") no-repeat center bottom / cover;
  padding: min(14vw, 100px) min(6vw, 60px) min(12vw, 60px);
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
  width: 100%;
  height: min(18vw, 340px);
  z-index: 1;
}

h1 {
  width: min(54vw, 400px);
  margin: 0 auto min(12vw, 60px);
  line-height: 0;
  position: relative;
  z-index: 2;
}

.movie {
  max-width: 780px;
  margin: 0 auto min(8vw, 40px);
  aspect-ratio: 16/9;
  line-height: 0;
}
.movie iframe {
  width: 100%;
  height: 100%;
}


.releaseDate {
  width: min(60vw, 300px);
  margin: 0 auto min(6vw, 30px);
}
.sns {
  display: flex;
  justify-content: center;
  gap: min(6vw, 30px);
}
.sns li a {
  color: #fff;
  text-decoration: none;
}
.sns li a i {
  font-size: min(5.8vw, 28px);
}



footer {
  display: flex;
  font-family: 'Arthemys';
  justify-content: space-between;
  align-items: flex-end;
  background-color: #000;
  padding: min(10vw, 40px) min(6vw, 60px);
}
footer .ftrLinks li + li {
  margin-top: min(1vw, 5px);
}
footer .ftrLinks li a {
  color: #fff;
  text-decoration: none;
  font-size: min(3.2vw, 14px);
}
footer .copyright {
  font-size: min(2.8vw, 10px);
}


@media screen and (max-width: 820px) {
  #op .close {
    right: 15px;
  }
  
  footer {
    flex-direction: column;
    align-items: center;
    gap: min(8vw, 60px);
    text-align: center;
  }
}