@charset "utf-8";
/* 作品ページ：PC */

.sp {
  display: none;
}


/* 基本レイアウト---------------- */
#wrapper {
  position: relative;
  width: 100%;
  text-align: center;
}
#container {
  width: 100%;
}
.main {
  width: 90%;
  max-width: 1168px;
  margin: 0 auto;
}
/* 作品コンテンツ---------------- */
#child_main {
  position: relative;
  width: 100%;
  height: 80vh;
}
.child_movie {
  position: absolute;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
.video1 {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
}
.child_main_logo {
  position: absolute;
  top: calc(80vh - 230px);
  left: 0;
  right: 0;
  width: 98%;
  max-width: 775px;
  margin: 0 auto;
  z-index: 10;
}
.child_main_logo_en {
  position: absolute;
  top: calc(80vh - 220px);
  left: 0;
  right: 0;
  width: 98%;
  max-width: 775px;
  margin: 0 auto;
  z-index: 10;
}
.h1_logo1 img {
  width: 100%;
  height: auto;
}
.child_main_txt {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 24px;
}
#child_sub {
  position: relative;
  width: 100%;
  height: 20vh;
  background-color: black;
}

#child_cta {
  padding: 225px 0 115px;
}
.h2_1 {
  margin-bottom: 40px;
  font-size: 72px;
  color: #4B87CD;
}
.logo_steam {
  width: 98%;
  max-width: 500px;
  margin: 0 auto;
}
.logo_steam a {
  display: block;
  width: 100%;
  height: 130px;
  margin: 0 auto;
  padding: 23px;
  text-align: center;
  background: #fff;
  border: 2px solid #242424;
  border-radius: 10px;
  transition: .3s;
}
.logo_steam img {
  max-width: 100%;
  height: auto;
}
.logo_steam a:hover {
  filter: drop-shadow(0px 5px 5px rgba(36,36,36,.3));
	transform: translateY(-0.1em);
}

#child_slider1 {
  padding: 60px 0 70px;
  background: #EDF3FA;
}
#child_slider1_list {
  position: relative;
}
#child_slider1_list .slick-slide {
  height: 300px;
  margin: 0 20px;
}
li.slick-slide {
  position: relative;
}
li.slick-slide:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 290px;
  background: rgba(51,51,51,.4);
  border-radius: 10px;
  z-index: 2;
}
li.slick-slide.slick-active:before {
  display: none;
}
.youtube {
  width: 515px;
  height: 290px;
  border-radius: 10px;
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
}
.slick-slide .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide_video1 {
  width: 515px;
  height: 290px;
  border-radius: 10px;
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
}
.slide_img1 {
  border-radius: 10px;
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
  overflow: hidden;
}
/* 矢印の見た目は改修TOPと共通の .carousel-arrow を使用する。 */
.slick-arrow {
	z-index: 10;
}
#child_slider1_list .slick-dots {
  bottom: -40px;
}
.slick-dots li {
  margin: 0 4px; 
  width: 50px;
  height: 10px;
}
#child_slider1_list .slick-dots li button:before {
  content: "";
  width: 50px;
  height: 4px;
  background: #BBBFC4;
  border-radius: 5px;
  opacity: 1;
}
#child_slider1_list .slick-dots li.slick-active button:before{
  background: #242424;
}

#child_about {
  min-height: 1024px;
  padding: 175px 0 85px;
  background: url("../../images/works_child/bg_about_na.png") no-repeat;
  background-size: cover;
  background-position: center top;
}
.content1 {
  width: 98%;
  margin: 0 auto;
}
.h2_2 {
  margin-bottom: 60px;
  font-size: 46px;
  color: #4B87CD;
}
.p1 {
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: 700;
}
.p2 {
  margin-bottom: 60px;
  font-size: 36px;
  font-weight: 700;
}

#child_slider2 {
  padding: 115px 0 85px;
  color: #fff;
  background: #343D4C;
}
#child_slider2_list {
  position: relative;
}
#child_slider2_list .slick-slide {
  margin: 0 20px;
}
#child_slider2_list .slick-dots {
  bottom: auto;
  top: 310px;
}
#child_slider2_list .slick-dots li button:before {
  content: "";
  width: 50px;
  height: 4px;
  background: #717781;
  border-radius: 5px;
  opacity: 1;
}
#child_slider2_list .slick-dots li.slick-active button:before{
  background: #fff;
}
#child_slider2_list .slick-active .slider2_txt {
  opacity: 1;
  transition: .3s;
}
.slider2_txt {
  opacity: 0;
  width: 100%;
  max-width: 515px;
  margin-top: 70px;
  transition: .3s;
}
.h3_1 {
  margin-bottom: 10px;
  font-size: 36px;
}

#child_spec {
  padding: 115px 0;
  color: #fff;
  background: url("../../images/works_child/bg_spec_na.png") no-repeat;
  background-size: cover;
  background-position: center top;
}
.h2_3 {
  margin-bottom: 40px;
  font-size: 36px;
}
.p3 {
  margin-bottom: 40px;
}
/* No.6 固有の表示調整---------------- */
.works-child--no6 #child_slider1 {
  padding: 60px 0 70px;
  background: #000000;
}
.works-child--no6 #child_slider1_list {
  position: relative;
}
.works-child--no6 #child_slider1_list .slick-slide {
  height: 300px;
  margin: 0 20px;
}
.works-child--no6 #child_slider1_list .slick-dots {
  bottom: -40px;
}
.works-child--no6 #child_slider1_list .slick-dots li button:before {
  content: "";
  width: 50px;
  height: 4px;
  background: #5B5B5B;
  border-radius: 5px;
  opacity: 1;
}
.works-child--no6 #child_slider1_list .slick-dots li.slick-active button:before{
  background: #FFFFFF;
}
.works-child--no6 #child_spec {
  padding: 115px 0;
  color: #fff;
  background: url("../../images/works_child/bg_spec_n6.png") no-repeat;
  background-size: cover;
  background-position: center top;
}