@charset "UTF-8";


/* --------------------------------
    Foundation
-------------------------------- */
a:link, a:visited {
  color: #000000;
}

a:hover, a:active {
  opacity: 0.8;
}

img {
  width: 100%;
}

.active a {
  text-decoration: underline;
}

body {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  position: relative;
  max-width: 100%;

  color: #ffffff;
  margin: auto;
/*   background-color: rgba(0,0,0,0.5); */
  background: url("../../assets/images/img_bg_chara.jpg") no-repeat;
  background-attachment: fixed; 
  background-size: cover;
  
  z-index: 1;
}

.bg{
  width: 100%;
  //height: 1080px;
  //height: 1371px;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
}
.logo{
  text-align: center;
}
.logo img{
  width: 150px;
}
.title{
  margin: 0 15%;
}

.movie{
  text-align: center;
  margin:0 15%;
}
.movie_screen{
  display: inline-block;
  border: 4px solid #ffffff;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie_screen iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.movie_txt{
  font-size: 1.8em;
  font-weight: bold;
}
.container{
  margin: 0 5%;
}
.menu{
  text-align: center;
  margin:40px 0;
}
.menu li{
  display: inline-block;
  float: left;
  width: 25%;
  background: #ffffff;
  box-sizing:border-box;
  border: 1px solid #750701;
  padding:4px;
  font-weight:bold;
}
.menu li a:link, .menu li a:visited {
  color: #000000;
}
.menu_title{
  color: #000000;
  background: #ffffff;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #750701;
  padding: 0.5em;
  font-weight: bold;
}
.menu_cast{
  font-size: 0.9em;
}

#artist{
  
}
#artist .artist_image{
  display: inline-block;
  width: 50%;
  float: left;
  margin:10px auto;
  
}
#artist .artist_sns{
  display: inline-block;
  width: 50%;
  float: left;
  margin:10px auto;
  
}
#artist .artist_sns_logo{
  text-align: center;
}
#artist .artist_sns_logo img{
  width: 250px;
}
  
#artist .artist_sns_link{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  height:auto;
  justify-content:center;
}
#artist .artist_sns_link li{
  //float: left;
  //width: 100px;
  margin:0 10px;
}
#artist .artist_sns_link li img{
  width: 80px;
}
#artist .artist_introduction{
  //float:left;
  //text-align: left;
  display:inline-block;
}

#artist .member_introduction ul{
/*   overflow: hidden;
  display: inline-block;
  font-size:0; */
  display: flex;
  justify-content:space-between;
  width: 100%;
  margin: 20px 0;
}

#artist .member_introduction li{
  width: 25%;
 
}
#artist .member_introduction li img{
  width: 100%; 
}
#artist .member_introduction .part{
  
}
#artist .member_introduction .name{
  text-align: center;
  font-size: 2.0em;
  font-weight: bold;
  margin:10px 0;
}
#artist .member_introduction .member_sns{
  display: flex;
  justify-content:center;
}
#artist .member_introduction .member_sns li{
  margin: auto 10px;
}
#artist .member_introduction .member_sns li img{
  width: 50px;
}
#artist .member_banner ul{
  display: flex;
  justify-content:space-between;
  width: 100%;
  height: auto;
  margin: 20px auto;
}
#artist .member_banner ul li{
  width: 48%;
}
#collarmalice{
  margin-top:50px;
}
#collarmalice .collarmalice_image{
  width: 100%;
  margin: 20px auto;
}
#cast{
  margin-top:50px; 
}
#cast .cast_list ul{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 100%;
  height: auto;
}
#cast .cast_list ul:after{
  content: "";
  display: block;
  width: 30%;
}
#cast .cast_list ul li{
  width: 30%;
  margin: 20px 0 0 0;
}
#comment{
  margin-top:50px; 
}

#information{
  margin-top:50px; 
}

#information .information_image ul{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 100%;
  height: auto;
}
#information .information_image ul li{
  width: 48%;
  margin: 20px 0 0 0;
}
#footer{
  margin:40px 0 20px 0;
  text-align: center;
}
#pager {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  opacity: 0.7;
}

@media only screen and (max-width: 750px) {
  body{
    background-size: 100%;
    background-repeat:repeat;
  }
  .menu{
    display: block;
    text-align: center;
    margin:40px 0;
    height: auto;
  }
  .menu li{
    display: inline-block;
    float:left;
    width: 50%;
    vertical-align: middle;
    background: #ffffff;
    box-sizing:border-box;
    border: 1px solid #750701;
    padding:4px;
    font-weight:bold;
  }
  .movie{
    margin: 0 5%;
  }
  #artist{
    display: block;
  }
  #artist .artist_image{
    display: block;
    width: 100%;
    float: left;
    margin:20px auto;
  }
  #artist .artist_sns{
  display: block;
  width: 100%;
  float: left;
  margin:10px auto;
  
  }
  #artist .artist_sns_logo{
    text-align: center;
  }
  #artist .artist_sns_logo img{
    width: 50%;
  }
  #artist .artist_sns_link{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    height:auto;
    justify-content:space-between;
  }
  #artist .artist_sns_link li{
    width: 18%;
  }
  #artist .artist_sns_link li img{
    width: 100%;
  }
  #artist .artist_introduction{
    display:inline-block;
  }
  #artist .member_introduction ul{
    overflow: hidden;
    flex-wrap: wrap;
    width: 100%;
  }
  #artist .member_introduction li{
    width: 50%;
    margin: 0 0px;
  }

  #artist .member_introduction .part{
  }
  #artist .member_introduction .name{
    font-size: 1.2em
  }
  #artist .member_introduction .member_sns ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    justify-content:space-between;
  }
  #artist .member_introduction .member_sns li{
    width: 25%;
    //margin: auto 10px;
  }
  #artist .member_introduction .member_sns li img{
    //width: 100%;
  }
  #cast .cast_list ul li{
    width: 50%;
    margin: 20px 0 0 0;
  }
}