@charset "utf-8";

/*--------------------------------------------------------------
  body
--------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
  font-family: 'Noto Sans JP', sans-serif;
  min-width: 320px;
}

/*--------------------------------------------------------------
  boxsiging
--------------------------------------------------------------*/
*{box-sizing:border-box;}


/*--------------------------------------------------------------
  clear
--------------------------------------------------------------*/
.clear_b{clear: both;}
.clear_r{clear: right;}
.clear_l{clear: left;}

/*--------------------------------------------------------------
  clearfix
--------------------------------------------------------------*/
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

/*--------------------------------------------------------------
  image
--------------------------------------------------------------*/
img{max-width: 100%;}
.img250{
  width: 250px;
  height: auto;
}

a img:hover {
  opacity: .8 ;
  transition: .3s ;
}

/*--------------------------------------------------------------
  button
--------------------------------------------------------------*/
.btn{
    padding: 0.75em 3em;
    text-decoration: none;
    transition: .3s;
    display: inline-block;
    text-align: center;
    margin: auto;
}
.btn:hover{
  text-decoration: none;
}

br.sp_br{
  display: none;
}
br.pc_br{
  display: block;
}
@media screen and (max-width: 980px) {
  br.sp_br{
    display: block;
  }
  br.pc_br{
    display: none;
  }
}

/*--------------------------------------------------------------
  margin
--------------------------------------------------------------*/
.mb0{margin-bottom: 0px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}
.mb110{margin-bottom: 110px !important;}
.mb120{margin-bottom: 120px !important;}
.mb130{margin-bottom: 130px !important;}
.mb140{margin-bottom: 140px !important;}
.mb150{margin-bottom: 150px !important;}
.mb160{margin-bottom: 160px !important;}
.mb170{margin-bottom: 170px !important;}
.mb180{margin-bottom: 180px !important;}
.mb190{margin-bottom: 190px !important;}
.mb200{margin-bottom: 200px !important;}

/*--------------------------------------------------------------
  float
--------------------------------------------------------------*/
.float_r{float: right;}
.float_l{float: left;}

.img_r{
  float: right;
  margin-left: 30px;
  margin-bottom :30px;
}
.img_l{
  float: left;
  margin-right: 30px;
  margin-bottom :30px;
}

/*--------------------------------------------------------------
  text
--------------------------------------------------------------*/
.text_center{text-align: center;}
.text_left{text-align: left;}
.text_right{text-align: right;}
.text_bold{font-weight: bold;}
.text_red{color: red;}


/*--------------------------------------------------------------
  color
--------------------------------------------------------------*/
.batch{
  padding: 4px;
  width: 100px;
  display: inline-block;
  text-align:center;
  font-weight: bold;
  color:#fff;
}
.bcol_01{background-color:#0f3775;}
.bcol_02{background-color:#d07045;}

/*--------------------------------------------------------------
  movie
--------------------------------------------------------------*/
.movie{
//  color: #fff;
  padding: 60px 0 80px;
}
.movie h2{
  text-align: center;
  font-size: 1.8em;
  //font-style: italic;
  letter-spacing: 0.2em;
//  border-bottom: 2px solid #5e5e5e;
//  padding-bottom:10px;
//  margin-bottom: 60px;
  z-index: 10;
}
.movie_left,
.movie_right{
  width:460px;
  height: auto;
  text-align: center;
  position:relative;
  box-shadow: 0px 0px 6px 3px #ccc;
  z-index:1;
}
.movie_left:after,
.movie_right:after{
  content:"";
  display: block;
  position: absolute;
//  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  width:100%;
  height:auto;
  z-index:-1;
}
.movie_left{
  float: left;
//  background-color: #EA5F00;
  padding:40px 10px;
}
.movie_right{
  float: right;
//  background-color: #EA5F00;
  padding:40px 10px;
}
.movie_you{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.movie_you iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}