@charset "utf-8";

body{
	margin: 0px; padding: 0px;
	text-align: center;
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url(../images/bg_sub.jpg);
	background-attachment: fixed;
	font-family: Arial, Helvetica, Verdana, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.background-hack {
	z-index: -1;
	background-color: #000000;
	background-image: url(../images/bg_sub.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 1300px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

a:link {color: #a91502; text-decoration: none;}
a:visited {color: #652a22; text-decoration: none;}
a:hover {color: #d3230c; text-decoration: underline;}

img {margin: 0px; padding:0px; vertical-align:bottom;}

/*テキスト*/
.txtl {font-size: 100%;color: #000000; line-height: 200%; font-weight: bold; vertical-align: top;}
.txt {font-size: 90%;color: #000000; line-height: 200%; font-weight: bold; vertical-align: top;}
.txts {font-size: 80%;color: #000000; line-height: 200%; font-weight: bold; vertical-align: top;}
.txt_link {font-size: 90%;color: #000000; line-height: 150%; font-weight: bold;}

/*キャラクター*/
.chara1 {
	margin: 0px; padding: 275px 30px 0px 265px;
	width: 245px;	height: 240px; vertical-align: top;
	font-size: 90%; color: #000000; line-height: 180%; font-weight: bold;}

.chara2 {
	float:left;
	margin: 20px 0px 0px -30px; padding: 0px 0px 0px 0px;
	width: 102px;	height: 130px; vertical-align: top;}

.chara3 {
	margin: 0px; padding: 275px 30px 0px 290px;
	width: 220px;	height: 240px; vertical-align: top;
	font-size: 90%; color: #000000; line-height: 180%; font-weight: bold;}

.chara4 {
	float:left;
	margin: 20px 0px 0px -50px; padding: 0px 0px 0px 0px;
	width: 102px;	height: 130px; vertical-align: top;}

/*あらすじ*/
.story1 {font-size: 90%;color: #000000;line-height: 200%; font-weight: bold; text-align: left;}

.font01 {
	margin:0px 0px 0px 10px; padding: 0px 0px 0px 0px;
}

/*ルビ*/
ruby {
	display:inline-table; text-align:center;
	position:relative;
	white-space:nowrap; 
	text-indent:0; margin:0;
	vertical-align:text-bottom;
	line-height:1;
}

ruby>rb,ruby>rbc {
	display:table-row-group; line-height:1.0;}

ruby>rt,ruby>rbc+rtc {
	display:table-header-group;
	font-size:60%; line-height:1.0; letter-spacing:0;}

ruby>rbc+rtc+rtc {
	display:table-footer-group;
	font-size:60%; line-height:1.0; letter-spacing:0;}

rbc>rb,rtc>rt {	display:table-cell; letter-spacing:0;}
rp {display:none;}

td.space50 {width: 50px;height: 50px;}
td.space40 {width: 40px;height: 40px;}
td.space30 {width: 30px;height: 30px;}
td.space20 {width: 20px;height: 20px;}
td.space10 {width: 10px;height: 10px;}

/* Basic jQuery Slider essential styles */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

#banner {margin:0;
	width:480px; height:320px;
	position:relative;
	box-shadow:0 0 20px rgba(0,0,0,0.7);
}

 ul.bjqs-controls li a{
	display:block;
	padding:12px 0px 0px 0px;
	position:absolute;
	color:#a91502; font-weight: bold;
	text-decoration:none;
	text-transform:uppercase;
}

a.bjqs-prev{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;
	left:0; font-size: 80%;color: #63d4fe; font-weight: bold;}

a.bjqs-next{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;
	right:0; font-size: 80%;color: #63d4fe; font-weight: bold;}

p.bjqs-caption{
	background:rgba(0,0,0,0.7);
	color:#ffffff; text-align:center;}

ol.bjqs-markers{
	position:absolute; bottom:-25px;}

ol.bjqs-markers li{
	float:left; margin:0 3px;}

ol.bjqs-markers li a{
	display:block;
	height:5px;
	width:25px;
	border:2px solid #8b847a;
	overflow:hidden;
	text-indent:-9999px;
	background:#a6a096;
	border-radius:5px;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
}

ol.bjqs-markers li.active-marker a{
	border:2px solid #ffff89; background:#a91502;
}

.column_1{text-align: left;
	margin:40px 20px 0px 75px; padding:0;
	float:left;}
.column_2{text-align: left;
	margin:40px 0px 0px 0px; padding:0;
	float:left;}
.clear{clear:both;}

.movie-title1 {
	margin:0px 0px 0px 0px; padding:10px 15px 9px 15px;
	background-color: #951502;
	color: #feff9d; font-size: 120%; line-height: 140%; font-weight: bold;}
.movie-title2 {
	margin:0px 0px 0px 0px; padding:9px 15px 8px 15px;
	background-color: #951502;
	color: #feff9d; font-size: 100%; line-height: 140%; font-weight: bold;}
.movie-txt {
	color: #feff9d; font-size: 75%; line-height: 160%; font-weight: bold;}

label {
    text-align: center;
    padding: 0px 0px 20px 0px;
    display: block;
    margin: 0;
}

input[type="checkbox"].on-off{
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    padding: 0px;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 610px;
}

@media screen and (max-device-width: 480px) {
body{
	margin:0; padding:0;
	text-align: center;
	background-color: #000000;
	-webkit-text-size-adjust: 100%;
	}
.story1 {font-size: 110%;color: #000000;line-height: 220%; font-weight: bold; text-align: left;}