/*==============================================
 for SP
================================================*/
#root {
  clear: both;
  width: 100%;
  padding-top: 50px;
}

#root img {
  width: 100%;
}

#root #main_visual {
  margin-bottom: 20%;
  padding-top: 2.4%;
}

#root #main_visual .main_visual_container {
  position: relative;
}

#root #main_visual .main_visual_container .main_visual_img {
  opacity: 0;
}

#root #main_visual .main_visual_container .bt_movie {
  position: absolute;
  top: 65.1%;
  left: 3.8%;
  width: 25.8%;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 0;
}

#root #main_visual .main_visual_container .copy_1 {
  position: absolute;
  top: 5.3%;
  right: 6.8%;
  width: 9.2%;
  opacity: 0;
}

#root #main_visual .main_visual_container .copy_2 {
  position: absolute;
  top: 85.8%;
  right: 6%;
  width: 59%;
  opacity: 0;
}

#root h2 {
  margin: 0 auto;
}

#root h3 {
  margin: 0 auto;
}

#root #full_movie {
  position: relative;
  width: 86%;
  margin: 0 auto 10% auto;
}

#root #full_movie h2 {
  width: 38.1%;
  margin-bottom: 20px;
}

#root #full_movie .full_movie_container {
  font-size: 0;
  position: relative;
  overflow: hidden;
  height: 0;
  margin: 0 auto;
  padding: 0 0 56.25%;
}

#root #full_movie .full_movie_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#root #characters h2 {
  width: 49%;
}

#root #characters h2.profile {
  margin-bottom: 10%;
}

#root #characters .character_correlation {
  position: relative;
  margin-bottom: 20%;
}

#root #characters .character_correlation .p1 {
  position: absolute;
  top: 0;
  left: 34.9%;
  width: 53.3%;
  opacity: 0;
}

#root #characters .character_correlation .p2 {
  position: absolute;
  top: 32%;
  left: 0;
  width: 31.2%;
  opacity: 0;
}

#root #characters .character_correlation .p3 {
  position: absolute;
  top: 35%;
  right: 0;
  width: 35%;
  opacity: 0;
}

#root #characters .character_correlation .p4 {
  position: absolute;
  bottom: 0;
  left: 18.9%;
  width: 47.3%;
  opacity: 0;
}

#root #characters .character_correlation .correlation {
  opacity: 0;
}

#root #characters .character_profile .profile_pict {
  margin-bottom: 5%;
}

#root #characters .character_profile .txt {
  font-size: 1.3rem;
  line-height: 1.8;
  width: 86.6%;
  margin: 0 auto 8% auto;
  letter-spacing: 0;
  color: #6a3906;
}

#root #characters .character_profile .pr1 {
  opacity: 0;
}

#root #characters .character_profile .pr2 {
  opacity: 0;
}

#root #characters .character_profile .pr2 .txt {
  margin: 0 auto 9% auto;
}

#root #characters .character_profile .pr3 {
  opacity: 0;
}

#root #characters .character_profile .pr4 {
  opacity: 0;
}

#root #characters .character_profile .pr4 .txt {
  margin: 0 auto 15% auto;
}

#root #gallery {
  overflow: hidden;
  width: 100%;
  margin-bottom: 20%;
}

#root #gallery h2 {
  width: 50.6%;
  margin-bottom: 10%;
}

#root #gallery h3 {
  width: 29.2%;
}

#root #gallery .gallery_scene {
  width: 86.6%;
  margin: 0 auto;
}

#root #gallery .gallery_scene li {
  list-style: none;
}

#root #gallery .gallery_scene li .scene_pict {
  font-size: 0;
  margin-bottom: 3%;
  -webkit-box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}

#root #gallery .gallery_scene li .sns {
  width: 100%;
  margin: 0 auto 10% auto;
  text-align: center;
}

#root #gallery .gallery_scene li .sns li {
  display: inline-block;
  width: 35%;
  margin-right: 3%;
}

#root #gallery .gallery_scene li .sns li:last-child {
  margin-right: 0;
}

#root #gallery .slickslider_container h3 {
  margin-bottom: 5%;
}

#root #gallery .slickslider_container .slickslider {
  opacity: 0;
}

#root #gallery .slickslider_container .slickslider li {
  overflow: hidden;
  margin: 0 .15% .1% .15%;
  -webkit-box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}

#root #gallery .slickslider_container .slickslider li img {
  width: 100%;
}

#root #gallery .slickslider_container .slickslider .slick-prev:before,
#root #gallery .slickslider_container .slickslider .slick-next:before {
  content: '';
}

#root #gallery .slickslider_container .slickslider .slick-prev {
  z-index: 11;
  left: 10px;
  width: 40px;
  height: 40px;
  background: url("../img/btn_slider_prev.png") no-repeat top center;
  background-size: 100% auto;
}

#root #gallery .slickslider_container .slickslider .slick-next {
  z-index: 10;
  right: 10px;
  width: 40px;
  height: 40px;
  background: url("../img/btn_slider_next.png") no-repeat top center;
  background-size: 100% auto;
}

#root #all_movies {
  padding: 0 0 5%;
}

#root #all_movies h2 {
  width: 47.7%;
  margin-bottom: 5%;
}

#root #all_movies .all_movies_container {
  width: 100%;
}

#root #all_movies .all_movies_container ul {
  font-size: 0;
  margin: 0 auto;
}

#root #all_movies .all_movies_container ul li {
  width: 86%;
  margin: 0 auto 7% auto;
  list-style: none;
}

#root #all_movies .all_movies_container ul li:last-child {
  margin-bottom: 4%;
}

#root #all_movies .all_movies_container ul li img {
  width: 100%;
  -webkit-box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.1);
}

#root #all_movies .all_movies_container ul li p {
  font-size: 1.5rem;
  padding-top: 3%;
  text-align: center;
  color: #6a3906;
}

#root #all_movies .music {
  font-size: 1.2rem;
  margin: 0 0 10% 0;
  padding-right: 7%;
  text-align: right;
  color: #6a3906;
}

#root #all_movies .all_sns_container {
  width: 100%;
  text-align: center;
}

#root #all_movies .all_sns_container ul {
  width: 200px;
  margin: 0 auto;
}

#root #all_movies .all_sns_container ul li {
  margin-bottom: 5%;
  list-style: none;
}

#root #all_movies .all_sns_container ul li:last-child {
  margin-bottom: 0;
}

#root #cast {
  width: 86%;
  margin: 20% auto 20% auto;
}

#root #cast h2 {
  width: 60%;
  margin-bottom: 15%;
}

#root #cast .cast_container .cast_wrapper {
  margin-bottom: 10%;
}

#root #cast .cast_container .cast_wrapper:before, #root #cast .cast_container .cast_wrapper:after {
  display: table;
  content: '';
}

#root #cast .cast_container .cast_wrapper:after {
  clear: both;
}

#root #cast .cast_container .cast_wrapper .name {
  margin-bottom: 5%;
  padding-bottom: 2%;
  border-bottom: 5px solid #f6c02c;
}

#root #cast .cast_container .cast_wrapper .contents {
  position: relative;
}

#root #cast .cast_container .cast_wrapper .contents .product {
  float: left;
  width: 40%;
}

#root #cast .cast_container .cast_wrapper .contents .contents_wrapper {
  float: right;
  width: 59%;
}

#root #cast .cast_container .cast_wrapper .contents .contents_wrapper .txt {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 3%;
  color: #6a3906;
}

#root #cast .cast_container .cast_wrapper .contents .contents_wrapper .pict {
  float: right;
}

#root #cast .cast_container .cast_wrapper .contents .bt {
  float: right;
  clear: both;
  padding-top: 4%;
  text-align: right;
}

#root #cast .cast_container .cast_wrapper .contents .bt img {
  width: 60%;
}

#root #cast .cast_container .cast1 .contents .pict {
  width: 100%;
}

#root #cast .cast_container .cast1 .contents .bt {
  padding-top: 14%;
}

#root #cast .cast_container .cast2 .pict {
  width: 50%;
}

#root #cast .cast_container .cast3 .contents .pict {
  width: 50%;
}

#root #cast .cast_container .cast3 .contents .bt {
  padding-top: 10%;
}

#root #banner ul {
  width: 86.6%;
  margin: 0 auto 60px auto;
}

#root #banner ul li {
  margin-bottom: 15px;
  list-style: none;
}

#root #banner ul img {
  -webkit-box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.12);
}

.mfp-bg {
  -webkit-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
  opacity: 0;
}

.mfp-bg.mfp-ready {
  opacity: .8;
}

.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-wrap .mfp-content {
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: 0;
}

.mfp-wrap .mfp-arrow {
  -webkit-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
  opacity: 0;
}

.mfp-wrap .gallery-arrow {
  line-height: 33px;
  position: absolute;
  z-index: 1046;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -15px;
  cursor: pointer;
  -webkit-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
  opacity: 0;
}

.mfp-wrap .gallery-arrow-left {
  left: 10px;
  background: url("../img/common/gallery_arrow_left.png");
  background-size: 100% 100%;
}

.mfp-wrap .gallery-arrow-left:before {
  content: '';
}

.mfp-wrap .gallery-arrow-right {
  right: 10px;
  background: url("../img/common/gallery_arrow_right.png");
  background-size: 100% 100%;
}

.mfp-wrap .gallery-arrow-right:before {
  content: '';
}

.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-ready .mfp-arrow {
  opacity: 1;
}

.mfp-ready .gallery-arrow {
  opacity: 1;
}

.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-removing .mfp-arrow {
  opacity: 0;
}

.mfp-removing .gallery-arrow {
  opacity: 0;
}