html,body{
  font-size:16px;
}
.clrfix{
  clear: both;
}
/*iframe使う場合はboxの親要素に*/
*{
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  /*font-size:12px;*/
  /*font-family: 'Philosopher', sans-serif;*/
  /*font-family: 'Archivo Black', s
  nans-serif;*/
}
body{
  background-color: #2cd1ff;
}
.innerWhite{
  background-color: white;
  padding-top:60px;
}

.bold{
  font-weight: bold;
}


/*Nav*/
nav.verticalNav{
  width: 100%;
  height: 60px;
  padding-top:22px;
  font-size:0.8rem;
}

nav ul, nav ul li{
  display: inline-block;
  vertical-align: top;
}

nav ul li{
  margin-left:30px;
  padding-top:5px;
}

nav a{
  font-weight: bold;
  color:#111;
  text-decoration: none;
  display: inline-block;
}

nav .inner{
  display: block;
  position: relative;
  width:960px;
  margin:0 auto;
  padding-left: 25px;
  /*margin-left:25px;*/
}

nav .sns{
  display: none;
  margin-right:160px;
  margin-top:-2px;
  float: right;
}

nav .sns a{
  margin-right:2px;
}


/*コンテキストの大きさ*/
.mw960{
  position: relative;
  display: block;
  width: 960px;
  /*max-width: 960px;*/
  /*min-width: 480px;*/
  margin: 0 auto;
  height: auto;
}
/*サブタイトルメイン画像*/
.sub-title{
  display: block;
  width: 65%;
  margin:0 auto;
}

hr{
  display: block !important;
  width: 100% !important;
  max-width: 1024px;
  border-top: 1px solid #ccc;
  height: 1px;
  margin: 0 auto;
  margin-top:30px;
  margin-bottom:30px;
}


.thumbs{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row;
  margin-top:60px;
  /*justify-content: space-between;*/
}

.movie_thnmb a{
  text-decoration: none;
}

.thumbs article{
  display: flex;
  position: relative;
  width: 230px;
  margin-right:10px;
  cursor: pointer;
}

.h{
  display: none;
}
/*記事ホバー*/
article:hover .h{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
}

/*再生ボタン*/
.play_btn{
  position: absolute;
  top:0;
  width:100%;
}
/*再生ボタンイメージ*/
.play_btn img{
  display: block;
  width:30%;
  margin:0 auto;
  top: 50%;
  -webkit-transform: translateY(50%); /* Safari用 */
  transform: translateY(50%);
}


.articleBody{
  padding:0 0.2rem;
}
article img{
  width: 100%;
}



/*タグ ラベル*/
.label_new{
  position: absolute;
  top:-0.8rem;
  background-color: #f20000;
  color:white;
  font-weight:bold;
  padding:0.4rem 1rem;
  letter-spacing: 0.15rem;
  font-size:0.5rem;
}


/*各動画タイトル*/
.thumbs article h1{
  padding-top:1rem;
  padding-bottom:1rem;
  font-weight: bold;
  font-size:0.9rem;
  letter-spacing: 0.1rem;
  line-height: 1.2rem;
  color:#333;
}

/*タグカテゴリ*/
.tag_category{
  display: inline-block;
  padding:0.3rem 0.6rem;
  letter-spacing: 0.10rem;
  font-size:0.5rem;
  border: solid 2px #ccc;
  color:#555;
  font-weight: bold;
}
/*タグ属性*/
.tag_attr{
  display: inline-block;
  padding:0.3rem 0.6rem;
  letter-spacing: 0.10rem;
  font-size:0.5rem;
  background-color: #ccc;
  border: solid 2px #ccc;
  color:#000;
  font-weight: bold;
}
/*日付*/
.date{
  padding-top:0.5rem;
  letter-spacing: 0.10rem;
  font-size:0.5rem;
  color:#333;
  font-weight: bold;
}

/*Topへ戻る*/
.toTop{
  display: block;
  position: relative;
  width:80px;
  padding:17px;
  margin: 0 auto;
  margin-top:25px;
  cursor: pointer;
}
.toTop img{
  width: 100%;
}

footer{
    width: 100%;
    height: 200px;
    margin-top:25px;
    background-color: #2cd1ff;
    font-size:0.8rem;
    color:white;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

footer p{
  display: block;
  text-align: center;
}


/*movie 詳細テンプレート*/
#detailMovie  .articleBody{
  width: 76%;
  margin:0 auto;
}
/*各動画タイトル*/
#detailMovie  .articleBody h1{
  padding-top:1rem;
  padding-bottom:1rem;
  font-weight: bold;
  font-size:1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1.2rem;
  color:#333;
  border:solid 2px #111;
  text-align: center;
  margin-bottom:1rem;
}

#detailMovie  .tag_attr{
  margin-left:0.5rem;
}
#detailMovie  .tag_category{
  margin-left:0.5rem;
}

#detailMovie  .date{
  margin-left:0.5rem;
}

#detailMovie .movie_thnmb{
  margin:0 auto;
  margin-top:30px;
}

/*メイン動画サムネイル*/
#detailMovie .thumbMovie{
  display: block;
  position: relative;
  cursor: pointer;
}
/*再生ボタン*/
#detailMovie .play_btn{
  position: absolute;
  top:50%;
  width:100%;

}
/*再生ボタンイメージ*/
#detailMovie .play_btn img{
  display: block;
  width:10%;
  margin:0 auto;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}

#detailMovie .contentInfo{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  width:86%;
  margin:0 auto;
  margin-top:50px;
}

/*放送*/
#detailMovie .left{
  display: inline-block;
  width:49%;
  margin-right:5px;
}
div.content{
  margin:3rem 0;
  padding: 0 1rem;
  letter-spacing: 0.15rem;
  line-height: 1.5rem;
}


/*番組内容*/
#detailMovie .right{
  display: inline-block;
  width:49%;
}
#detailMovie h4{
  width: 100%;
  border-top:solid 1px #ccc;
  border-bottom:solid 1px #ccc;
  text-align: center;
  font-weight: bold;
  padding:0.4rem 0;
  letter-spacing: 0.15rem;
}

/*記事ホバー*/
.thumbMovie:hover .h{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
}

.label_black{
  display: inline-block;
  padding:0 0.3rem;
  background-color: #040404;
  color:white;
  margin-left:-0.5rem;
  margin-bottom:0.3rem;
  font-size: 0.8rem;
}


.youtube {
  position: relative;
  display: block;
  height: 496px;
  /*padding-top: 56.25%;*/
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.label_phrase{
  color:#777;
}


/*記事詳細*/
.detailTxt{
  margin-top:60px;
}
.detailTxt img{
  display: block;
  width: 90%;
  margin:0 auto;
}
.detailTxt .photo{
  position: relative;
  width:90%;
  margin:0 auto;
}
.detailTxt .photo img{
  width: 100%;
}

.detailTxt .photo p.copyright{
  position: absolute;
  bottom:0;
  width:100%;
  background-color:rgba(255,255,255,0.3);
  color:#000;
  text-align: right;
  font-size:8px;
  margin:0;
  padding-right:1rem;
}
.detailTxt p{
  line-height: 1.8rem;
  width:80%;
  margin:0 auto;
  margin-top:2rem;
  margin-bottom:2rem;
}