@charset "UTF-8";
*{box-sizing:border-box;  margin:0; padding:0;}

body{
  background-color:#fff;
  font-family:'游明朝', 'Yu Mincho',"Meiryo", "メイリオ","Hiragino Kaku Gothic ProN", sans-serif;
  color:#253B4C;
  width:100%;
  overflow-x:hidden;
  font-size:16px;
  line-height:1.8em;
  letter-spacing:0.2em;
  }
a{
  text-decoration:none;
  color:#0069AB;
  }
a:hover{
  text-decoration:underline;
  }
h1{
  width:350px;
  height:350px;
  position:relative;
  top:30px;
  left:50%;
  transform:translate(-50%);
  -webkit-transform:translate(-50%);
  }
h3{
  font-size:2em;
  font-weight:bold;
  margin-bottom:1em;
  position:relative;
  text-shadow:1px 1px 0 #fff;
  }
.h3_ball{
  width:150px;
  height:auto;
  position:absolute;
  z-index:-5;
  top:-70px;
  left:-30px;
  }

hr{border:0;border-bottom:2px dotted #253B4C;margin:1em;}

@media screen and (min-width:1000px){
  h1{width:50%;height:auto;}
  h1 img{width:100%;height:auto;}
	}

.article img{
  border:#fff solid 5px;
  border-radius:3px;
  box-shadow:3px 3px 3px #555;
  }
#loading{
  position:absolute;
  top:50%; left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  }
#loader-bg {
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background:#fff;
  z-index:1;
  }
.clearfix:before,.clearfix:after {
  content:" ";
  display:table;
  }
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
.fixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  }
.overlay {
  position:fixed;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
  background:#666666;
  opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter:"alpha(opacity=70)";
  z-index:999;
  }
header{
  position:fixed;
  top:-10px;
  left:0;
  width:100%;
  /*height:80px;*/
  background-color:rgba(255,255,255,0.8);
  z-index:9999;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  }
header .inner {
  position:relative;
  margin:15px auto 0;
  max-width:1200px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:flex;
  flex-flow:row;
  justify-content:space-between;
	}
header h1 {
  width:0%;
  position:relative;
  /*top:50%;*/
  -webkit-transform:translateY(-50%); /* Safari用 */
  transform:translateY(-50%);
  font-size:30px;
  font-weight:bold;
  }
header h1 img{width:4em; height:auto;}
header nav {width:100%;}
header.navOpen nav {
  opacity:1;
  right:0;
  }
header nav ul {
  width:100%;
  /*padding:0.5em 0px;*/
  display:flex;
  flex-flow:row;
  justify-content:center;
	font-size:1.15em; 
  }
header nav ul li {
  margin:0;
  padding:1em 2em;
  list-style-type:none;
  width:500px;
  border-right:1px solid #0069AB;
	}
header nav ul li:last-child{border-right:none;}
header nav ul li:nth-child(1):hover{
  background:url(../images/nav_1.png) no-repeat center center;
	background-size:16% auto;
	}
header nav ul li:nth-child(2):hover{
  background:url(../images/nav_2.png) no-repeat center center;
	background-size:16% auto;
	}
header nav ul li:nth-child(3):hover{
  background:url(../images/nav_3.png) no-repeat center center;
	background-size:16% auto;
	}
header nav ul li:nth-child(4):hover{
  background:url(../images/nav_4.png) no-repeat center center;
	background-size:16% auto;
	}
header nav ul li:nth-child(5):hover{
  background:url(../images/nav_5.png) no-repeat center center;
	background-size:16% auto;
	}
header nav ul li {
  position:relative;
  display:block;
  font-weight:bold;
  text-align:center;
  }
header nav ul li a {
  color:#0069AB;
  text-decoration:none;
	}
header .button {
  display:none;
  width:30px;
  position:absolute;
  top:20px;
  right:15px;
  cursor:pointer;
  }
header .button span {
  display:block;
  height:4px;
  width:100%;
  background:#000000;
  border-radius:2px;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
  }
header .button span:nth-of-type(2),header .button span:nth-of-type(3) {
  margin-top:5px;
  }
header.navOpen .button span:nth-of-type(1) {
  -webkit-transform:translateY(9px) translateX(0) rotate(45deg);
  -ms-transform:translateY(9px) translateX(0) rotate(45deg);
  transform:translateY(9px) translateX(0) rotate(45deg);
  }
header.navOpen .button span:nth-of-type(2) {
  margin-top:5px;
  opacity:0;
  -webkit-transform:translateY(9px);
  -ms-transform:translateY(9px);
  transform:translateY(9px);
  }
header.navOpen .button span:nth-of-type(3) {
  -webkit-transform:translateY(-9px) translateX(0) rotate(-45deg);
  -ms-transform:translateY(-9px) translateX(0) rotate(-45deg);
  transform:translateY(-9px) translateX(0) rotate(-45deg);
  }
#title{display:none;}

@media screen and (max-width:780px){
  header{position:fixed; top:-10px;}
  header nav ul li{width:20%; height:100px; border-right:none; padding:0.5em;}
  header nav ul li a {
    -webkit-writing-mode:vertical-rl;
    -ms-writing-mode:tb-rl;
    writing-mode:vertical-rl;
    font-size:0.8em;
    }
	header nav ul li:nth-child(1):hover,
	header nav ul li:nth-child(2):hover,
	header nav ul li:nth-child(3):hover,
	header nav ul li:nth-child(4):hover,
	header nav ul li:nth-child(5):hover{
    background-size:50% auto;
		}
	}

.flex {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
	}
ul.flex{flex-wrap:wrap;}
ul.flex li{width:48%;}

#contents {
  width:100%;
  margin-top:150px;
	}
section {
  width:1200px;
  margin:8% auto 0;
	}
@media screen and (max-width:767px){
  .flex {flex-direction:column;}
  ul.flex li{width:100%;}
  #dvd .item img{margin:1em auto!important; display:block;}
  section{width:100%;}
  }

footer .copyright {
  text-align:center;
  padding:20px;
  font-size:0.8em;
	}

/* ============================================================================== */

#news, #onair, #cast, #dvd {
  margin:2em 0;
  padding:1em;
  }
#event {
  margin-top:100px;
  padding:1em;
  }
#news{width:40%;}
#onair{width:60%;}
.new #news, .new #onair{width:100%;}
.top_flex {
  display:flex;
  justify-content:space-between;
  flex-direction:row;
  }
	
/* トップビジュアル
------------------------------------------*/
.main_img{width:50%;}
#keyvisual{
  background:url("../images/more-joetsu/keyvisual-sp.jpg") no-repeat center top;
  background-size:cover;
	}
.bg_pattern{
  background:url("../images/more-joetsu/bg_orange.jpg") repeat center top;
  background-size: 104px;
  }
img.japan {
  position:absolute;
  left:20%;
  -webkit-transform:translate(-20%);
  transform:translate(-20%);
  width:400px;
  top:10%;
	}
.new img.japan{left:40%; width:680px;}
.new h1{left:0%; top:50px;}


@media screen and (max-width:767px){
  .top_flex{flex-direction:column;}
  .new .top_flex{flex-direction:column-reverse;}
  #logo, .main_img{width:100%;}
  .main_img:last-child{height:350px;}
  .new .main_img{height:50vh;}

  img.japan, .new img.japan {
  top:15%;
  left:50%;
  -webkit-transform:translate(-50%);
  transform:translate(-50%);
  width:60%;}

  .new h1{left:73%; top:30px; width:100%; height:auto;}
  .new h1 img{width:50%;}

  .new .main_img:nth-child(1){height:50vh;}
  .new .main_img:nth-child(2){height:100%;}
  }

p#leadArea {
  font-size:1.2em;
  line-height:2em;
  padding:2em;
  font-weight:bold;
  position:relative;
  z-index:100;
  transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
	}
p#leadArea .lead{background: linear-gradient(transparent 0%, #fff 0%);}

@media screen and (max-width:767px){
  p#leadArea{font-size:1em;}
	}

.news_txt{margin-bottom:0.5em; border-left:5px solid #0069AB; padding-left:1em;}
.no_inner{height:350px; overflow:auto; background:rgba(255,255,255,0.5);}
.new .no_inner{height:250px;}

#event h3, #event tbody{width:1200px; margin:0 auto 1em; display:block;}
#event table {
    position:relative;
    z-index:1;
    width:100%;
}
#event td{padding:0.5em; border-bottom:1px dotted #e0e0E0;}
#event td:nth-child(1){width:15%;}
.marker{background:linear-gradient(transparent 0%, #e0e0E0 0%);}

td.flex p{padding-right:1em;}

.end {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  z-index:5;
  color:#fff;
  font-weight:bold;
  width:100%;
  height:100%;
  background:#666666;
  opacity:0.5;
  filter:alpha(opacity=50);
  -ms-filter:"alpha(opacity=50)";
  }
.end p {
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  position:absolute;
  z-index:100;
  }
#dvd .item{margin-top:1em;}
#dvd .item img{width:200px; height:280px; margin-right:1em;}
#dvd .item p{width:80%;}
#dvd p{ margin-bottom:1em;}
#link{text-align:center;}
#link a{margin-right:1em;}

@media screen and (max-width:767px){
  #news, #onair, #event{width:100%;margin:0 auto;}
  #event h3, #event tbody{display:initial;}
  #dvd .item img{width:50%; height:auto;}
  #dvd .item p{width:100%;}
  .no_inner{height:200px; overflow:auto;}
	}

.small{
  font-size:0.8em;
  letter-spacing:0.1em;
  line-height:0.5em;
  }

/* table style
------------------------------------------*/
.tbl table{
  border-collapse:collapse;
  border-spacing:0;
  border-top:1px dotted #5f3700;
  margin-bottom:1em;
	font-size:0.9em;
	}
.tbl table th{
  text-align:left;
  padding-right:1em;
	}
.tbl table th,.tbl table td{
  border-bottom:1px dotted #5f3700;
  padding:.3em 1em;
	text-align: left;
	}
@media screen and (max-width:767px){
	.tbl table{font-size:1em;border-left:1px dotted #5f3700;border-right:1px dotted #5f3700;} 
  .tbl table th,.tbl table td{
    display:block;
    width:100%;
    padding:.5em;
    }
  .tbl table th{
    background:#feefd9;
    border:none;
    color: #5f3700;
    text-align: center;
    }
  .tbl table td{
    border-top:1px dotted #5f3700;
    text-align: center;
    }
  }
	 
/* 出演者プロフィール
------------------------------------------*/
.cast_prof{
  width:44%;
  margin:3%;
	}
.cast_prof p{margin:1em 0;}
.cast_img{margin-bottom:1em;}
.cast_img img{
  padding: 16px;
	margin: 1em auto 3em;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0px 0px 8px #D1D1D1;
	transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
	}
.cast_prof span, .item p span{
  width:100%;
  font-size:1.5em;
  margin-bottom:0.5em;
  border-left:8px solid #0069AB;
  padding-left:0.5em;
	}

@media screen and (max-width:767px){
  .cast_prof{width:100%;margin:0 auto;}
	.cast_prof p{margin:0 0 1em;}
	.cast_img img{margin:3em auto 2em;}
  }

/* 過去作品バナー
------------------------------------------*/
.bnrBox ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
  margin: 0 auto;
  }
.bnr{
  width: 240px;
	height: auto;
  margin: 0 8px 8px;
  cursor: pointer;
  transition-duration: 0.3s;
  }
 .bnr:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
  }
@media screen and (max-width:768px) {
  .bnrBox ul li{width:44%;margin:0.25em 0.5em;}
	.bnr{max-width:100%;text-align:center;margin:0 }
	}



/* Universal use
--------------------------------------------------------- */
/* テキスト - SPのみ
------------------------*/
@media screen and (max-width:767px){
  .brSP:before{content:"\A";display:block}
  .hiddenSP,.forPC,.forTB{display:none}
}
/* テキスト - TBのみ
------------------------*/
@media screen and (min-width:768px) and (max-device-width:991px){
  .brTB:before{content:"\A";display:block}
  .hiddenTB,.forPC,.forSP{display:none}
}
/* テキスト - PC
------------------------*/
@media screen and (min-width:992px){
  .brPC:before{content:"\A";display:block}
  .hiddenPC,.forTB,.forSP{display:none}
	}

.txtL{text-align:left}
.txtR{text-align:right}
.txtC{text-align:center}

.fontSS{font-size:0.5em!important;}
.fontS{font-size:0.8em!important;}
.fontM{font-size:1.2em!important;}
.fontMM{font-size:1.3em!important; line-height:1.6em!important;}
.fontL{font-size:1.5em!important;line-height:1.8!important;}
.fontLL{font-size:2em}

.mb10{margin-bottom:10px !important}
.mb1em{margin-bottom:1em !important}
.mb2em{margin-bottom:2em !important}
.mb3em{margin-bottom:3em !important}