@charset "UTF-8";
/* CSS Document */
body {
	background-color: rgba(235,235,235,0.30);
}

#toTop {
	position:fixed;
	bottom:1em;
	right:1em;
}
#Contents{
	background-color:white;
}
#Copyright {
	padding:1em 0 8em;
	color:darkgray;
	font-weight:inherit;
	font-size:0.8em;
}

.shelf ul li { /* Commonのマージンを無効 */
	margin: 0.4em 0 1em;
	padding:0;
}
.shelf img {
	width:100%;
}
.nav-collapse ul {
	background:rgba(255,175,175,1.00);
	font-weight:bold;
}
#responsiveNav {
	display: none;
}

.button {
	width:50%;
	margin:2em auto;
	padding:1em 2em;
	font-weight:bold;
}
.buttonTop {
	width:5em;
	height:5em;
	margin:0;
	padding:0.8em 0.3em 0.3em;
	font-size:0.7em;
	font-weight:bold;
}
.button a,.buttonTop a {
	display:block;
	text-decoration:none;
	color:white;
}
.button a:hover, .buttonTop a:hover {
	color:red;
}
.buttonForme {
	background: rgba(255,175,175,0.86); /* ThemeColor */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow:rgba(113, 135, 164, 0.3) 0px 0px 2px 2px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.3) 0px 0px 2px 2px;
	-moz-box-shadow:rgba(113, 135, 164, 0.3) 0px 0px 2px 2px;
}
#top_content img{
	width:100%;
	display:inline-block;
	background-size:cover;
}

.gaiyou_tb {
	font-size:1em;
	width: 100%;
	margin: 1em 0;
	background-color: rgba(0,0,0,0.10);
}
.gaiyou_th {
	font-weight:bold;
	width:auto;
	font-size:0.6em;
	background:rgba(255,255,255,1.00);
	margin: 12em;
	text-align:center;
}
.gaiyou_td {
	text-align: center;
	width:auto;
	background: rgba(0,0,0,0.4);
	vertical-align: central;
	margin: 1em;
	color:white;
	font-size: 0.6em;
	padding:2em;
}

a.hide_desktop{
	display:inline-block;
	margin:0 0 5%;
	}

#htp_content{
	width:100%;
	background-color:#FFF;
	margin:0;
	padding:0;
	
	}
.title{
	width:100%;
	margin:0;
	
	}
.title img{
	display: none;
    width: 100%;
	 margin: 0 auto;
    padding: 0;
	background-size:contain;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	box-shadow:rgb(163, 163, 163) 0px 1px 5px 2px;
	-webkit-box-shadow:rgb(163, 163, 163) 0px 1px 5px 2px;
	-moz-box-shadow:rgb(163, 163, 163) 0px 1px 5px 2px;
}
.contents {
	width:100%;
	display:block;
	background-color:#FFF;
}
.contents_inner{
	padding:1em 2%;
 	margin: 0 auto 2em;
	width:96%;
	background-color:#FFF;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	box-shadow:rgb(163, 163, 163) 0px 4px 5px 2px;
	-webkit-box-shadow:rgb(163, 163, 163) 0px 4px 5px 2px;
	-moz-box-shadow:rgb(163, 163, 163) 0px 4px 5px 2px;
	display:inline-block;
}

/* CharacterContents*/
ul.lightGallery{
	display:block;
	margin:0.4em auto;
    /*padding: 2% 0 3% 4%;*/
    width: 90%;
}	
ul.lightGallery li {
	/*list-style:none;
	width:16%;
	float:left;*/
	margin:0 0 0.4em ;
	padding:0;
	width:28.333%;
}

.gs_title{
	width:100%;
	margin:4% 0 0;
	}	
.gs_title img{
	background-size:cover;
	margin: 0 0 0 3%;
    width: 80%;
	
	}
	
#chara_box1,#chara_box2,#chara_box3{
	
	display:inline-block;
	width:100%;
	}
#chara_box1 img{

	background-size:cover;
	margin:5%;
	width:60%;
	}
#chara_box1_text{
	text-align:left;
	width:70%;

	display:inline-block;
 	margin: 4% 0;
	}
.chara_box_caution{
	color:#ff8000;
	font-size:12px;

	}
#chara_box2 img{

	background-size:cover;
	margin: 5%;
	width:60%;
	
	}
#chara_box2_text{
	
	display:inline-block;
	
	text-align:left;
 	margin: 5% 0;
	width:70%;
	}
#chara_box3 img{
	
	background-size:cover;
	margin: 5%;
	width:60%;
	
	}
#chara_box3_text{
	display:inline-block;
	text-align:left;
 	margin: 5% 0;
	width:70%
	}	
	
#movie_content	{
	width:100%;
	display:block;
	background-color:#FFF;
	
	}
	
#movie_inner img{
	background-size:cover;
	padding:0.4em;
	margin:1em auto;
	width:90%;
	display:inline-block;

	}	
#enquete_content{
	width:100%;
	display:block;
	background-color:#FFF;
	
	}
/*#enquete_content img{
	background-size:contain;
	margin:10% auto 0;
	width:100%;
	
	}*/
	
#enquete_inner img{
	background-size:cover;
	margin:5% auto;
	width:90%;
	display:inline-block;

	}		


/* Tab/Accordion */
h2.resp-tab-active {
	background-color:#ffafac !important;
	-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.resp-tabs-container{
	background-color:#ffafac !important;
	-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
	}
.resp-arrow {
    width: 0 !important;
    height: 0 !important;
    float: right !important;
    margin-top: 3px !important;
    border-left: 6px solid transparent!important;
    border-right: 6px solid transparent !important;
    border-top: 12px solid #fff !important;
}
h2.resp-tab-active span.resp-arrow {
    border: none !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-bottom: 12px solid #fff !important;
}



/* Tablet */
@media only screen and (min-width: 481px) {

.halfTablet {
	width:50%;
	float:left;
}
.gaiyou_th {
	font-size:0.8em;
}
.gaiyou_td {
	font-size:0.9em;
}
	
ul.lightGallery {
    width: 100%;
}	
ul.lightGallery li {
	padding:0;
	margin:0;
	width:15%;
}

#chara_box1_img{
	width:30%;
	display:block;
	margin:0;
	}	
	

#chara_box1 img{
    background-size: contain;
    clear: both;
    display: block;
    float: left;
    margin: 5% 5% 0 45%;
	width:80%;
	}

#chara_box1_text{
	display:inline-block;
    margin: 5% 5% 0;
    text-align: left;
    width: 49%;
	}

#chara_box2_img{
	display: block;
    margin: 0;
    width: 47%;
	}	

#chara_box2 img{
    background-size: contain;
    clear: both;
    display: block;
    float: left;
    margin: 8% 5% 0 15%;
    width: 80%;
}
#chara_box2_text{
   display:inline-block;
    margin: 5% 0 0;
    text-align: left;
    width: 47%;
	}
#chara_box3_img{
    display: block;
    margin: 0;
    width: 50%;
}
#chara_box3 img{
    background-size: contain;
    clear: both;
    display: block;
    float: left;
    margin: 10% 5% 0 9%;
    width: 90%;
}
#chara_box3_text{
    display:inline-block;
    margin: 5% 0;
    text-align: left;
    width: 42%;
	}	
/* Desktop */
@media only screen and (min-width: 769px) {

.contents_inner {
	padding:1em 2% 2em;
 	margin: 0 auto;
	width:76%;
}

#responsiveNav {
	display:block;
}
#responsiveNav li a{
	color:black;
	text-decoration:none;
}

.htp a {
	background:url(/ibj/img/menu_htp.png) no-repeat bottom right;
	background-size:contain;
}
.htp a:hover {
	background:url(/ibj/img/menu_htp_hl.png) no-repeat bottom right;
	background-size:contain;
}
.chara  a {
	background:url(/ibj/img/menu_chara.png) no-repeat bottom right;
	background-size:contain;
}
.chara  a:hover {
	background:url(/ibj/img/menu_chara_hl.png) no-repeat bottom right;
	background-size:contain;
}
.system a {
	background:url(/ibj/img/menu_system.png) no-repeat bottom right;
	background-size:contain;
}
.system a:hover {
	background:url(/ibj/img/menu_system_hl.png) no-repeat bottom right;
	background-size:contain;
}
.movie a{
	background:url(/ibj/img/menu_movie.png) no-repeat bottom right;
	background-size:contain;
}
.movie a:hover {
	background:url(/ibj/img/menu_movie_hl.png) no-repeat bottom right;
	background-size:contain;
}
.enquete a {
	background:url(/ibj/img/menu_enquete.png) no-repeat bottom right;
	background-size:contain;
}
.enquete a:hover {
	background:url(/ibj/img/menu_enquete_hl.png) no-repeat bottom right;
	background-size:contain;
}

#top_content img{
	width:100%;
	display:inline-block;
	background-size:cover;
}
a.hide_desktop {
    display: none;
   
}
.nav-collapse {
	display:block;
	z-index:1;
	position: relative;
	margin: 0 auto;
}
.nav-collapse  ul {
	display:block;
	background:white;
}
.nav-collapse ul li {
	list-style-type:none;
	float:left;
	width:20%;
	color:black;
}
.nav-collapse ul li a {
	text-decoration:none;
	text-indent:-20000em;
	height:52px;
	display:block;
}
.title{
	width:100%;
	margin: 0;
	
	}
.title img{
	display: block;
    width: 80%;
	 margin: 0 auto;
    padding: 0;
	background-size:contain;
}

.responsive_title{
	overflow:hidden;
	text-indent:-9999px;
}
	

ul.lightGallery li img {
	opacity:0.4;
}

ul.lightGallery li img:hover {
	opacity:1;
}

#movie_inner img{
	background-size:cover;
	margin:5% auto;
	display:inline-block;

	}	
#enquete_inner img {
	background-size:cover;
	margin:5% auto;
	width:90%;
	display:inline-block;
	
	}
}

/*-----【3DSロゴ】-----*/
.logo	{
	position: absolute;
	top: 6%;
	left: 6%;
}