/* CSS Document */
@charset "utf-8";
@import "minireset.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

/*----------clearfix短縮型cfで指定する-------*/
.cf:before,.cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}

/*----------clearfix短縮型cfで指定する-------*/
body {
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size:12px;
    margin: 0;
    padding: 0;
    height: 100%;
}
#topbg{
    background: url('../img/bg.jpg');
    background-position: top center;
    background-attachment: fixed;
}

@media screen and (min-width: 650px) {
body {font-size:14px; min-width:1000px;}
.header{ width:1000px; margin:0 auto; position:relative;}
.header .bslogo{ position: absolute; z-index:4; right:0;}
}
@media screen and (max-width: 649px) {
.header .bslogo{ text-align:right;}
.header .bslogo img{ width:100px;}
}
/*--main------------*/
#topbg .oa{ font-size:130%; padding:20px 0; margin:0 auto; font-weight:bold; text-shadow: 0 0 10px #999; color:#fff600;}
.oa span{ font-size:140%;}
.news{ background:rgba(0,0,0,0.5); color:#fff; padding: 20px 10px; border-radius:0px; width:96%; border:1px solid #000; letter-spacing:0.19em;}
.news h1{ font-family: 'Merriweather', seriff; font-size:100%; color:#fff600; border-bottom:1px solid #D5A90C; margin:0 0 5px;}
#pubInfo{ font-size:120%;} 
#pubMarkBox{ background:#133a53; color:#fff; padding:7px; font-size:110%; border-radius:6px; font-weight:bold;}
.sns p{ margin:0 5px 0 0;}

@media screen and (max-width: 649px) {
.main{width:100%; margin:0 auto;}
.main .logo img{ width:100%; }
#topbg .oa{ padding: 30px 10px; background-color: rgba(26,26,26,0.8); vertical-align: middle; line-height: 0;}
.oaarea{ font:none; vertical-align: middle; line-height: 0; margin-bottom:10px; }
#pubMarkBox{ float:right;}
.banner{ margin:5px 0 0;} 
.nav ul li a{ width:48%; text-align:center; }
.top { vertical-align: middle; line-height: 0;}
.main .kimbnner{ text-align:center; }

}
 
@media screen and (min-width: 650px) {
.header{ position:relative; width:220px; margin:0 auto; height:100px;}
.main{ width:1200px;  margin:0 auto; height:854px; position:relative;}
.main .intr{ position:absolute; top:30px; left:570px; z-index: 10; }
.main .oastart{ position:absolute; bottom:100px; right:30px; z-index: 8;}
.main .logo{ position:absolute; bottom:0px; left:180px; z-index:8;}
.main .sns{ position:absolute; left:50px; top:10px; width:380px;}
.main .kimbnner{ position:absolute; right:10px; top:10px; }
.oaarea{ margin:0px auto; position:absolute; left:50px; top:35px; color:#fff600; }
#topbg .oa{ width:535px;}
.main .news{ /*position:;*/ right:30px; bottom:50px; width:380px;}
.main .pre{ /*position:;*/ right:30px; bottom:150px; width:300px;}
.main footer { position:absolute; bottom:10px; width:100%; padding: 30px 0; color:#ffffff; margin:0 auto; clear:both; min-height:100px;}
.simg{ width:45%; margin:0 auto;}
.mimg{ width:90%; margin:20px auto;}
}
/*--nav-------------*/
.topnav{ font-family:'Merriweather', serif; background:#5A0709; width:100%; z-index:50;}
.topnav ul li a{ color:#fff; font-size:150%;  text-decoration:none; display:block; z-index:50;}
.topnav ul li a:hover{ color:#E3CD0C;}

 
.nav{ width:100%; font-family:'Merriweather', serif; z-index:5; margin:0; text-align:center; }
.nav ul li a{ margin: 10px 0;  box-shadow: 0 0 0px #1a1a1a; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.nav ul li.active a{ /*background-color: rgba(26,26,26,0.6);*/ color:#fff600; }
.nav ul li a{ float:left; color:#fff; text-decoration:none; font-size:12px; display:block; letter-spacing:0.05em;}
.nav ul li a:hover,.nav ul li .on{ color:#fff600; display:block;}

@media screen and (min-width: 650px) {
.topnav ul{ width:1200px; margin:0 auto;}
.topnav ul li a{ float:left;  padding: 20px 60px; }
.topnav ul li a:hover{ color:#E3CD0C;}

.nav{ width:100%; }
.nav ul{ width:100%; margin:0 auto; margin-top:200px; }
.nav ul li a{ float:left; /*PRESENT無⇒*/padding:15px 0;/*PRESENT有⇒padding:0 21px;*/ margin:5px 0; text-decoration:none; line-height: 18px; letter-spacing:0.18em;  width:220px; font-size:120%;}
.brnone{ border:none;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.nav ul li a { /*PRESENT無⇒*/padding:5px;/*PRESENT有⇒ padding:5px 21px;*/}/*Chrome用NAV*/
}

@media screen and (max-width: 649px) {
.topnav ul li a{  float:left; width:49.5%; padding:30px 0 15px; text-align:center;}
.topnav ul li:nth-child(1n) a{ border-right:1px solid #360F10;}
.topnav ul li:first-child a{ width:100%;border-bottom:1px solid #360F10; }
.topnav ul li a{ margin: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

.nav ul li a{ border-bottom:1px solid #360F10; width:49.5%; padding:30px 0 15px; background:#5A0709;}
.nav ul li:nth-child(1n) a{ border-right:1px solid #360F10;}
.nav ul li:first-child a{ width:100%; }
.nav ul li a{ margin: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
}
.nav ul li ruby rb{ font-size:18px; line-height: 22px; letter-spacing:0.1em;}
.nav ul li ruby rt{ font-size:10px; line-height: 18px;}
/*--Wrap-------------*/
.Wrap{
  width:100%;
  background-color: rgba(0,0,0,0.6);
  padding:0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
@media screen and (min-width: 650px) {
.Wrap{ width:720px; margin:100px 0 50px 30px; padding: 50px 35px; box-shadow: 0 0 3px #1a1a1a;}
#ver2 .logo img{ width:220px; position:absolute; top:10px;}
}
@media screen and (max-width: 649px) {
.Wrap{ margin:0; padding: 0; border-radius: 0px; font-size:120%;}
article{padding:10px;}
}
/*--introduction-------------*/
#ver2{ color:#fff;
    background: url('../img/bg.jpg') ;
    background-position: top center;
    background-attachment: fixed;
}
#ver2 .header{ margin:0 auto;}
#ver2 .oa{ font-size:120%; color:#fff600; text-shadow: 0 0 5px #666; font-weight:bold; border:0px solid #fff600; padding:10px;}
.sum2{ padding:20px 0; line-height:1.8em; text-shadow:0 0 3px #000; letter-spacing:0.1em; font-size:14px;}
#pubSummary{ padding:0 0 40px 0; line-height:1.8em; letter-spacing:0.1em; font-size:14px;}
.intro{ padding:20px 0 20px 0; font-size: 16px; line-height:24px; }
.mar{ margin:0 10px 10px;}
.introduction h1{ font-family:'Merriweather', serif; font-size:24px; letter-spacing:0.1em; color:#EBDD81; padding-bottom: 30px;}
.introduction p.titlecatch{ padding: 20px 0 0 0; color: #EBDD81; font-size: 18px; font-weight:bold; }
.introduction p.story{padding: 20px 0 0 0; color: #EBDD81; font-size: 20px; border-top: #EBDD81 double 7px;  font-weight:bold;}
@media screen and (min-width: 650px) {
#content { width:1120px; height:100%; margin:0 auto; top: 0; overflow: hidden;}
.content_left { position: absolute; background: #8d7955; float:left; width:250px; height:100%;}
.content_right {float:right; width:850px; height:100%; padding:0px; background: #5A0709; position:relative;}

#ver2 .header{ position:relative; width:220px; margin:0 auto; height:0px; }
#ver2 .logo{ position:absolute; top:15px; left:0px;}
#ver2 .oa{ position:absolute; top:50px; left:35px;letter-spacing:0.1em;  }
#ver2 .sns{ position:absolute; top:20px; left:35px;}
.mar30{ margin:30px 0 0;}
}
@media screen and (max-width: 649px) {
#ver2 .logo{ margin:0 auto;}
#ver2 .sns{ margin:0; padding:10px; }
#ver2 .oa{ text-align:center; letter-spacing:0.05em; }
.big{ font-size:130%;}
.intr01{ font-size:160%; color:#fff600; text-shadow:0 0 4px #000; line-height:1.3em;}
} 
/*--cast＆staff-------------*/
.cast{ font-size:115%; line-height:1.5em; letter-spacing:0.02em;}
.cast h3 { font-family: 'Merriweather', serif; font-size:30px; letter-spacing:0.1em; color:#EBDD81;}
.c_list{ text-align:left;}
.c_txt h4{ color:#EBDD81; font-size:140%; font-weight:bold; padding:0 0 10px 0; margin:0 0 10px; border-bottom:#EBDD81 dotted 4px;}
.c_txt small{ color:#fff; font-size:90%; padding:0 0 10px 0; margin:10px 0;}
.c_txt h5.cbox{ color:#EBDD81; font-size:100%; margin:15px 0;}
.c_txt h5 span{ padding:5px; border:#EBDD81 solid 1px;}
@media screen and (min-width: 650px) {
.cast h3{ margin:0 0 30px;}
.cast .c_txt { width:480px; float:left; padding: 0 20px;}
.c_list{margin:50px 0;}
.cast p.fle{float:left;}
}
@media screen and (max-width: 649px) {
.cast h3{font-size:25px;}
.c_list{margin:10px 0 50px;}
.cast img{ text-align:center; display: block; margin: 0 auto;}
.staff{ line-height:1.6em; margin:15px 0;}
.cast p.fle { float: none;}
.cast p.flr{float:none;}
.cast .c_txt { padding:10px 0 0; }
}
/*--chart-------------*/
.chart h3 { font-family: 'Merriweather', serif; font-size:30px; letter-spacing:0.1em; color:#EBDD81; padding-bottom: 20px;}
.charttxt{ font-family: 'Merriweather', serif; font-size:20px; color:#EBDD81;}
img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: auto;
    }
/*--story-------------*/
.story{letter-spacing:0.08em;}
.sl{ margin:10px 0 0;}
.sr{ margin:30px; border:#444 solid 1px; padding:10px 10px; background:rgba(0,0,0,0.8);}
.story h1{ font-family: 'Merriweather', serif;  margin:10px 0 20px 0; font-size:180%; color:#EBDD81;}
.date{ font-size:130%; color:#EBDD81;}
.txt{ line-height:1.5em; font-size:120%;}
.bn{ height:80px;}
.bn li{ font-family: 'Merriweather', serif; font-size:150%; display:block; margin:10px; float:left; width:33px;}
.bn .on a{ color:#fff600; text-decoration:none; display:block; letter-spacing:0.05em; text-shadow:0 0 7px #fff;}
.bn .on a:hover{ color:#F1EAA9;}
 .off{ color:#999; display:block; letter-spacing:0.05em; text-shadow:0 0 7px #666;}
@media screen and (max-width: 649px) {
.bn{ height:150px; overflow-y:scroll;}
}
@media screen and (min-width: 650px) {
.date{ width:470px; margin:30px auto;}
}/*--footer-------------*/
footer { width:100%; padding: 30px 0; color:#ffffff; margin:0 auto; clear:both; position:relative; min-height:300px;}
footer a{text-decoration:none; color:#ffffff;}
/*--pageTop-------------*/
#page-top { position: fixed; bottom: 20px; right: 20px;}
#page-top a { background:#5A0709; padding: 15px; display: block; border-radius: 25px;}
/*--common------------*/
.btn { background:#000; color:#fff; padding:15px 0; text-decoration:none; letter-spacing:0.1em;}
.btn:hover{ color:#F5D83E;}
/*リンクボタン　START*/
.maru{display:block; border-radius: 6px;}
/*リンクボタン　END*/
small{ font-size:70%;}
.fle{float:left;}
.flr{float:right;}
.cr{clear:both;}
.alc{text-align:center;}
.ale{text-align:left;}
.alr{text-align:right;}
#fade{display:none;}
.bar{ margin:20px 0;}
.bslogo{display:none;}

@media screen and (min-width: 650px) {
.pc_none{display:none;}
.bar img{ width:400px;}
.pfle{float:left;}
.fbig{ font-size:150%;}
}
@media screen and (max-width: 649px) {
.sp_none{display:none;}
.simg,.simg02{ width:100%; margin:0 auto;}
.mimg{ width:100%; margin:0 auto;}
.fimg{ width:100%; margin:0 auto;}
.fbig{ font-size:125%;}
}