@charset "utf-8";

/* 作品ページ：スマートフォン */

.pc {
	display: none;
}


/* 基本レイアウト---------------- */
#wrapper {
	width: 100%;
	text-align: center;
}
#container {
	width: 100%;
}
.main {
  width: 90%;
  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, .child_main_logo_en {
  position: absolute;
  top: calc(80vh - 105px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  z-index: 10;
}
.h1_logo1 img {
  width: 100%;
  height: auto;
}
.child_main_txt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 20px;
}
#child_sub {
  position: relative;
  width: 100%;
  height: 20vh;
  background-color: black;
}

#child_cta {
  padding: 120px 0 46px;
}
.h2_1 {
  margin-bottom: 20px;
  font-size: 36px;
  color: #4B87CD;
}
.logo_steam {
  width: 90%;
  max-width: 272px;
  margin: 0 auto;
}
.logo_steam a {
  display: block;
  width: 100%;
  height: 84px;
  margin: 0 auto;
  padding: 17px;
  text-align: center;
  background: #fff;
  border: 2px solid #242424;
  border-radius: 10px;
}
.logo_steam img {
  width: 168px;
  height: 50px;
}

#child_slider1 {
  padding: 46px 0;
  background: #EDF3FA;
}
#child_slider1_list .slick-slide {
  height: 160px;
  max-width: 272px;
  margin: 0 10px;
}
li.slick-slide {
  position: relative;
}
li.slick-slide:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 153px;
  background: rgba(51,51,51,.4);
  border-radius: 10px;
  z-index: 2;
}
li.slick-slide.slick-active:before {
  display: none;
}
.youtube {
  width: 272px;
  height: 153px;
  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: 272px;
  height: 153px;
}
.slide_video1 {
  width: 272px;
  height: 153px;
  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;
}
#child_slider1_list .slick-dots {
  bottom: -40px;
}
.slick-dots li {
  margin: 0 4px; 
  width: 30px;
  height: 5px;
}
#child_slider1_list .slick-dots li button:before {
  content: "";
  width: 30px;
  height: 4px;
  background: #BBBFC4;
  border-radius: 3px;
  opacity: 1;
}
#child_slider1_list .slick-dots li.slick-active button:before{
  background: #242424;
}

#child_about {
  min-height: 640px;
  padding: 46px 0;
  background: url("../../images/works_child/bg_about_na_sp.png") no-repeat;
  background-size: cover;
  background-position: center top;
}
.content1 {
  width: 90%;
  max-width: 272px;
  margin: 0 auto;
}
.h2_2 {
  margin-bottom: 20px;
  font-size: 36px;
  color: #4B87CD;
}
.p1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}
.p2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

#child_slider2 {
  padding: 46px 0 20px;
  color: #fff;
  background: #343D4C;
}
#child_slider2_list .slick-slide {
  margin: 0 10px;
}
#child_slider2_list .slick-dots {
  bottom: auto;
  top: 170px;
}
#child_slider2_list .slick-dots li button:before {
  content: "";
  width: 30px;
  height: 5px;
  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: 272px;
  margin-top: 40px;
  transition: .3s;
}
.h3_1 {
  margin-bottom: 10px;
  font-size: 36px;
}

#child_spec {
  padding: 46px 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: 20px;
  font-size: 36px;
}
.p3 {
  margin-bottom: 20px;
}
/* No.6 固有の表示調整---------------- */
.works-child--no6 #child_slider1 {
  padding: 46px 0;
  background: #000000;
}
.works-child--no6 #child_slider1_list .slick-slide {
  height: 160px;
  max-width: 272px;
  margin: 0 10px;
}
.works-child--no6 #child_slider1_list .slick-dots {
  bottom: -40px;
}
.works-child--no6 #child_slider1_list .slick-dots li button:before {
  content: "";
  width: 30px;
  height: 4px;
  background: #5B5B5B;
  border-radius: 3px;
  opacity: 1;
}
.works-child--no6 #child_slider1_list .slick-dots li.slick-active button:before{
  background: #FFFFFF;
}
.works-child--no6 #child_spec {
  padding: 46px 0;
  color: #fff;
  background: url("../../images/works_child/bg_spec_n6.png") no-repeat;
  background-size: cover;
  background-position: center top;
}