/*	poster
============================== */
#top header{
  position: relative;
  width: 100%;
  background: rgb(200,199,199);
  background: linear-gradient(90deg, rgba(200,199,199,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 50%, rgba(255,253,253,1) 90%, rgba(200,199,199,1) 100%);
}
#top h1 span{
  display: block;
  background-size: cover;
  width: 100%;
  height:0;
  padding-top:71.2962962962963%;
}
#top h1 img{
  position: absolute;
  top:0;
}

.fade{
  animation: fadeIn 5s ease 1s 1 normal;
 }
 @keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
 }

@media all and (min-width: 768px) {
#top h1{
  width: 1080px;
  margin:0 auto;
}

}
@media all and (max-width: 767px) {
#top h1{
width: 100%;
}
}

/*	t_story & t_topics box
============================== */
.box{
  margin:0 auto;
}

.innerbox{
    background:rgba(255,255,255,0.8);
    padding-bottom: 1em;
}


.box h2 {
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0.8) 100%);
    display: flex;
    align-items: center;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0 -1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
  }

#t_story h2{
    justify-content:flex-start;
    -webkit-box-pack:flex-start;
    -ms-flex-pack:flex-start;
    color:#071656;
}

#t_topics h2 {
    justify-content: flex-end;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    color:#6b0202;
}
#t_story p a,
#t_topics p a{
  display: block;
  transition: 0.5s ;
}

#t_story p a:hover,
#t_topics p a:hover{
  opacity: 0.8;
}

@media all and (min-width: 768px) {
.box{
    width:1020px;
    margin:50px auto;
}
.inn{
    width:980px;
    margin: auto;
}
.box h2 {
  width:1020px;
  line-height:100%;
  font-size:400%;
  }

.box h2 small{
  font-size:40%;
}

}

@media all and (max-width: 767px) {
  .box{
    width:96%;
    margin:2em auto;
  }
  .innerbox{
    padding:0 1em 1em;
    margin: auto;
  }
  .box h2 {
    width:100%;
    line-height:100%;
    font-size:200%;
    }

  .box h2 small{
    font-size:40%;
  }
}

/*	top story
============================== */
#t_story .movieBox{
  box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#t_story .movieBox span{
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: top;
  margin: 0 0 0 0;
  position: relative;
}



#t_story .btn a span {
    display: inline-block;
    background-color:#071656;
    color: #fff;
}
#t_story h3{
  text-align:center;
}
#t_story h3,#t_story strong{
    color:#071656;
}

@media all and (min-width: 768px) {
#t_story .innerbox{
padding:30px 0 50px;
}
#t_story h3{
  font-size: 290%;
  white-space: nowrap;
  margin-top:20px;
}
#t_story h3 small{
  font-size: 50%;
}
#t_story ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:space-between;
}
#t_story ul li{
    width: 44.5%;
}
#t_story ul li:first-child{
    width: 53%;
}

#t_story .movieBox{
  width: 100%;
}
#t_story ul li .txt{
  font-size: 100%;
  line-height: 140%;
  padding:10px 0;
}
#t_story .btn{
    text-align: right;
}
#t_story .btn a span {
      padding: 5px 15px;
}
}
@media all and (max-width: 767px) {
  #t_story h3{
  font-size:180%;
    margin:1em 0 .5em;
  }
  #t_story h3 small{
    font-size: 50%;
  }

#t_story ul{
  padding-top:1em;
}
  #t_story .movieBox{
    width: 98% !important;
    margin:0 auto;
  }
  #t_story ul li .txt{
    font-size: 90%;
    line-height: 140%;
    padding:.5em 0;
  }
  #t_story .btn{
      text-align: center;
      font-size: 110%;
  }
#t_story .btn a span {
      padding: 10px 40px;
}
}

/*	top movie
============================== */
#t_movie .movieBox{
  box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#t_movie .innerbox{
  background-color: rgb(1,37,77, 0.5);
    background-position: top;
    padding-bottom: 1em;

}



#t_movie .box h2{
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgb(1,37,77, 0.5) 60%, rgb(1,37,77, 0.5) 100%) ;
    display: flex;
    align-items: center;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0 -1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
  }

#t_movie h2 {
    justify-content: center;
    color:#7c8a9f;
}

#t_movie .innerbox .inn{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content:space-around;
      }
#t_movie .innerbox .inn a .btn {
background-size:60%;
  }

@media all and (min-width: 768px) {
#t_movie .innerbox{
    padding-top:20px ;
      }

#t_movie .movieBox{
    width: 23%;
    margin: 0 auto 20px;
  }
}
@media all and (max-width: 767px) {
  #t_movie .innerbox{
      padding-top:.5em;
        }
#t_movie  .movieBox{
    width: 43% !important;
    margin:0 auto 1em;
  }
  #t_movie  .movieBox:nth-child(n+3){
      margin-bottom:0;
    }
}
/*	top news
============================== */
#t_news .movieBox{
  box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#t_news .innerbox{
  background-color: rgb(1,37,77, 0.5);
    background-position: top;
    padding-bottom: 1em;
}

#t_news .box h2{
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgb(1,37,77, 0.5) 60%, rgb(1,37,77, 0.5) 100%) ;
    display: flex;
    align-items: center;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
                -1px 1px 0 #FFF, 1px -1px 0 #FFF,
                0px 1px 0 #FFF,  0 -1px 0 #FFF,
                -1px 0 0 #FFF, 1px 0 0 #FFF;
  }

#t_news h2 {
    justify-content: center;
    color:#7c8a9f;
}
#t_news span.lazy{
width:100%;
height:0;
padding-top:68.75%;
background-size: cover;
}

#t_news li a{
  display: flex;
  flex-wrap: nowrap;
  align-items:center;
  justify-content: space-between;
  border: solid 1px #fff;
  box-sizing: border-box;
}
#t_news li div:first-child{
  width:40%;
  color: #fff;
}
#t_news li div:last-child{
  width:60%;
  color: #fff;
}
@media all and (min-width: 768px) {
#t_news .innerbox{
  padding:20px 0 40px;
  }
#t_news ul{
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: space-around;
}
#t_news li a{
  width:450px;
}
#t_news li a:hover{
  opacity: 0.6;
}
#t_news li div p{
margin:5px 20px;
line-height: 140%;
}

}
@media all and (max-width: 767px) {
#t_news li {
  padding-top: 1em;
}
  #t_news li a{
    width:100%;
    margin:0 auto;
}
#t_news li div p{
margin:.2em 1em;
margin-left:.5em;
font-size: 80%;
line-height: 120%;
}
}

/*	banner area
============================== */
  .bn_area{
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;
  }
  .bn_area a{
    display:block;
  }
  .bn_area li a:hover{
    transition: 1.0s ;
    opacity: 0.6;
  }
  .bn_area .item span{
  width:100%;
  height:0;
  padding-top:28%;
  background-size: cover;
  }

  .bn_area .tbsfree span,
  .bn_area .tver span,
  .bn_area .paravi span{
  width:100%;
  height:0;
  padding-top:41.2698412698413%;
    background-size: cover;
  }
.eiga_999 span{
  width:100%;
  height:0;
  padding-top:15.3164556962025%;
  background-size: cover;
  }
.bn_area .s2_999 span,
.bn_area .s1_999 span{
width:100%;
height:0;
padding-top:26.3157894736842%;
background-size: cover;
}

.bn_area p{
text-align: center !important;
color: #fff;
margin:.5em auto 1em;
}

/*	eiga banner */
.C_block{
  width: 100%;
  background: rgb(200,199,199);
  background: linear-gradient(90deg, rgba(200,199,199,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 50%, rgba(255,253,253,1) 90%, rgba(200,199,199,1) 100%);
}
.C_block li{
  margin:0 auto;
}
.C_block li p{
    margin:.5em auto 0;
    text-align: center !important;
    color:#333;
    animation-name: fadeIn;
  }
.C_block .eiga_999 span:hover{
    transition: 1.0s ;
    opacity: 0.6;
}

@media all and (min-width: 768px) {
.bn_area{
  padding-top: 50px;
  padding-bottom:20px;
}

.A_block{
  width:1040px;
  justify-content:space-around;
}
.bn_area.A_block:first-child{
  padding-bottom:0 !important;
}
.bn_area.A_block:nth-child(2){
  padding-top:0;
}
.B_block{
  padding-bottom: 50px;
  width: 790px;
  justify-content:space-between;
}

.C_block {
  padding-top: 20px;
  padding-bottom: 20px;
}
.C_block li{
    width: 790px;
}
.C_block li p{
  font-size:90%;
}


.bn_area li.item{
  width:500px;
  margin-bottom:20px;
}
.bn_area li.item:nth-child(n+3){
 margin-bottom:0;
}
.bn_area li.item:nth-child(5){
  margin-top:20px;
}

.bn_area li.tbsfree,
.bn_area li.tver,
.bn_area li.paravi{
  width:300px;
  margin-bottom: 30px;
}
.bn_area li.eiga_999{
  width:790px;
}
.bn_area li.s2_999,
.bn_area li.s1_999{
  width:380px;
}
.bn_area p{
  font-size:90%;
}
}

@media all and (max-width: 767px) {

.bn_area{
    width: 90%;
    padding-top: 2em;
    padding-bottom:2em;
  }

  .bn_area.A_block:first-child{
    padding-bottom:0 !important;
  }
  .bn_area.A_block:nth-child(2){
    padding-top:0;
    justify-content:space-around;
  }
  .bn_area.B_block{
    justify-content:space-between;

  }

  .C_block {
    padding: 1em 0;
  }
  .C_block li{
      width:90%;
  }
  .C_block li p{
    font-size:70%;
  }


  .bn_area li.tbsfree,
  .bn_area li.tver,
  .bn_area li.paravi{
    width:48%;
  }
  .bn_area li.item{
    width:100%;
    margin-bottom:.5em;
  }
  .bn_area li.item:last-child{
    margin-bottom:0;
  }
  .bn_area li.tbsfree,
  .bn_area li.tver{
    width:48%;
    margin-bottom:.5em;
  }
  .bn_area li.paravi{
    width:48%;
  }

  .bn_area li.eiga_999 {
    width:100%;
  }
  .bn_area li.s2_999,
  .bn_area li.s1_999{
    width:48%;
  }
  .bn_area p{
    font-size:70%;
  }
}


/*	t_sns
============================== */
#t_sns{
  overflow: hidden;
  margin:auto;
}

#twitter{
  background: rgb(6,18,66);
}
#twitter .tw-inner {
  background-color: #fff;
}
#twitter h2 a{
  display: block;
  width: 100%;
  height:0;
  padding-top: 11.6666666666667%;
  background-image: url(../img/top_banner/twitter.png?new);
  background-size: contain;
  background-position: center;
}
#t_sns h4{
  color:#000;
}
#instagram a {
  display: block;
}
#instagram a span{
width:100%;
height:0;
padding-top:37.6044568245125%;
background-size: cover;
}
#snsBt p{
  display: block;
  text-align: center !important;
}

#twitter h2 a:hover,
#instagram a:hover{
  transition: 1.0s ;
  opacity: 0.6;
}

@media all and (min-width: 768px) {
#t_sns{
  margin:50px auto;
  width:1020px;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
#twitter{
  width:600px;
  padding:0 20px 20px;
    }
#twitter .tw-inner {
      height: 340px;
    }

#snsBt{
  width:360px;
}
#instagram a {
  width:360px;
  margin:0 auto 20px;
}
#snsBt p{
  font-size:90%;
}
}

@media all and (max-width: 767px) {
#t_sns{
    width:96%;
    margin-top:1em;
  }
  #twitter{
    width:90%;
    padding:0 .5em .5em;
        margin:1em auto;
      }
  #instagram a {
    width:90%;
    margin:1em auto;
  }
  #snsBt p{
    font-size:70%;
  }
}


/*	candy img1
============================== */
#t_story .box{position: relative;}
#t_story .box::after {
  position: absolute;top:0;right:0;
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  background-image: url(../img/img_candy1.png);
  background-repeat: no-repeat;
  background-size: contain;

}

@media all and (min-width: 768px) {
  #t_story .box::after {
    width: 300px;
    height:140px;

  }
}

@media all and (max-width: 767px) {
  #t_story .box::after {
    width: 100px;
    height:47px;
  }
}

/*	candy img2
============================== */
#snsBt{position: relative;
}
#snsBt::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom:0;
  content: '';
  display: inline-block;
  background-image: url(../img/img_candy2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}

@media all and (min-width: 768px) {
  #snsBt{padding-bottom:130px;}
  #snsBt::after {
    width: 360px;
    height:100px;

  }
}
@media all and (max-width: 767px) {
  #snsBt{padding-bottom:100px;
  margin-bottom: 2em;}
  #snsBt::after {
    width: 100%;
    height:100px;
  }
}