@charset 'utf-8';

/* BODY
--------------------------------------------------	*/
body{
	margin:0;
	padding:0;
	text-align:center;
	background-color:#555555;
	font-size:16px;
}

/* HEADER
--------------------------------------------------	*/
#header{
	height:20px;
	margin:0px;
	padding:6px;
	background:#000000;
	font-weight:bold;
	text-align:right;
	font-size:12px;
}
#header img{ border-style:none; vertical-align:bottom; margin:0px 0px 0px 10px; }
#header a{ text-decoration:none; color:#ffffff; }
#header a:hover{ color:#9cceff; }

/* FOOTER
--------------------------------------------------	*/
#footer{
	padding:10px 0;
	text-align:center;
	color:#ffffff;
	background-color:#2b2b2b;
}
#footer a:link{ color:#ffffff; text-decoration:none; }
#footer a:visited{ color:#ffffff; }
#footer a:hover{ color:#87cefa; text-decoration:none; }

#footer li {
	display:inline;
}

/* A
--------------------------------------------------	*/
a{ text-decoration:none; }
a:hover{ color:crimson; }

/* IMG
--------------------------------------------------	*/
img{ border-style:none; vertical-align:middle; }

/* FORM
--------------------------------------------------	*/
form{ margin:0px; padding:0px; }
.require{ float:right; padding:2px 4px; background-color:#cc0000; border-radius:3px; font-size:11px; color:#ffffff; }

/* BUTTON
--------------------------------------------------	*/
.cur			{ display:inline-block; margin:2px; text-decoration:none; padding:12px 18px; font-weight:bold; color:#ffffff; background:#222222; border:0; border-radius:5px; }
.blk			{ display:inline-block; margin:2px; text-decoration:none; }
.blk a			{ display:inline-block; text-decoration:none; padding:12px 18px; color:#000000; font-weight:bold; background:#bbbbbb; border-radius:5px; }
.blk a:hover	{ text-decoration:none; background:#3f3f3f; color:#ffffff; }
.blk a:active	{ text-decoration:none; background:#3f3f3f; }

.blk2			{ display:inline-block; margin:2px; text-decoration:none; }
.blk2 a			{ display:inline-block; text-decoration:none; padding:12px 18px; color:#ffffff; font-weight:bold; background:#ffa800; border-radius:5px; }
.blk2 a:hover	{ text-decoration:none; background:#ff9000; color:#ffffff; }
.blk2 a:active	{ text-decoration:none; background:#ffbc3c; }

/* BUTTON
--------------------------------------------------	*/
.button{
	cursor:pointer;
	margin:0;
	padding:10px 20px;
	background:linear-gradient(to bottom, #555555,#222222);
	border:0px solid #222222;
	border-radius:5px;
	font-size:14px;
	color:#ffffff;
}

.button:hover{
	background:linear-gradient(to bottom, #666666,#333333);
}

/* h2
--------------------------------------------------	*/
h2{
	padding-left:15px;
	font-size:22px;
	font-weight:normal;
	background:url("../image/image_list.gif") no-repeat 0 4px;
}

/* MAIN-MANU
--------------------------------------------------	*/
.main-menu{
	margin-bottom:10px;
	padding:8px;
	background-color:#333333;
	border-radius:6px;
	font-size:20px;
	font-weight:bold;
	color:#ffffff;
}

/* MYTABLE
--------------------------------------------------	*/
#myTable th{
	background-color:#d3dce3;
	text-align:center;
	cursor:pointer;
}

/* CONTENTS-BANNER
--------------------------------------------------	*/
#contents-banner{
	padding:10px 0;
	background-color:#ffffff;
}

/* BANNER-SELECT3
--------------------------------------------------	*/
.banner-select{
	float:left;
	margin:10px;
}

/* CLEAR
--------------------------------------------------	*/
.clear { clear:both; }

/* STICKY
--------------------------------------------------	*/
#sticky { padding:10px 0; }

/* FLOATBOX
--------------------------------------------------	*/
#floatbox{
	overflow:hidden;
	margin:0 auto;
	padding:0;
}
#floatbox a:link{ color:#ffffff; text-decoration:none; }
#floatbox a:visited{ color:#ffffff; }
#floatbox a:hover{ color:#87cefa; text-decoration:none; }

/* LOADER
--------------------------------------------------	*/
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 1;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #fff;
	z-index: 2;
}

.series-title a{
	display:block;
	width:90%;
	margin:10px auto;
	margin-right:20px;
	padding:10px 15px;
	font-size:0.9em;
	color:#0000ff;
	background-color:#eeeeee;
	border-radius:20px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}
.series-title a:hover {
	background-color:#f8ce24;
	border-radius:20px;
}

.zoom{
	position:absolute;
	bottom:3px;
	right:2px;
	border:none;
	font-size:1.6em;
	color:#333;
	background-color:#fff;
	opacity:0.6;
	padding-top:4px;
	padding-left:4px;
	border-radius:8px;
}

/* NARROW
--------------------------------------------------	*/
.narrow {
	display:inline-block;
	width:49%;
	text-align:center;
}
.narrow a {
	display:block;
	color:#333;
	padding:1%;
	background-color:#eee;
	border-radius:20px;
}
.narrow a:hover {
	background-color:#f8ce24;
	border-radius:20px;
}

/* レスポンシブPC&タブレット
--------------------------------------------------	*/
@media screen and (min-width:1010px){
	#wrapper{
		width:990px;
		margin-left:auto;
		margin-right:auto;
		overflow: hidden;
	}

	#contents{
		width:990px;
		margin-left:auto;
		margin-right:auto;
		background-color:#ffffff;
		text-align:left;
	}

	#contents-slider{
		padding:10px 0;
		text-align:center;
		background-color:#ffffff;
	}

	#contents-top{
		width:990px;
		margin:auto;
		text-align:center;
	}
	#contents-left{
		float:left;
		width:650px;
		padding:10px;
		text-align:left;
		background-color:#ffffff;
	}
	#contents-right{
		float:left;
		width:300px;
		padding:10px;
		text-align:center;
		background-color:#ffffff;
	}

	#top-menu{
		width:990px;
		padding:0;
		margin:0;
		list-style-type: none;
	}
	#top-menu li{
		width:25%;
		float:left;
		padding:0;
		margin:0;
		text-align:center;
		border-right:0px solid #333333;
	}
	#top-menu li a{
		width:auto;
		color:#fff;
		font-weight:bold;
		padding:8px;
		text-decoration:none;
		font-size:18px;
		display:block;
		background:#333;
		background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
		border-top:3px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
	}
	#top-menu li a:hover{
		background:#333;
		background-image: -moz-linear-gradient(top, #555 0%, #666 50%, #666 50%, #666 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #666), color-stop(0.50, #666), color-stop(1, #666));
		border-top:3px solid #aa0000;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
	}

	.container1{
		float:left;
		width:212px;
		height:200px;
		margin-right:0px;
		margin-bottom:7px;
		padding:0px;
		text-align:center;
	}
	.container2{
		float:left;
		width:212px;
		height:200px;
		margin-right:7px;
		margin-bottom:7px;
		padding:0px;
		text-align:center;
	}
	.container-top{
		height:28px;
		padding-top:2px;
		background-color:#333333;
		color:#ffffff;
		text-align:center;
		line-height:160%;
		white-space: nowrap;
		overflow:hidden;
		border-radius:10px 10px 0 0;
	}
	.container-middle{
		position:relative;
		height:120px;
		background-color:#cccccc;
		padding:10px 0;
		text-align:center;
	}
	.container-bottom{
		height:28px;
		padding-top:2px;
		background-color:#888888;
		color:#ffffff;
		text-align:center;
		line-height:160%;
		overflow:hidden;
		border-radius:0 0 10px 10px;
	}

	.detail-container-left{
		float:left;
		width:200px;
		margin-bottom:20px;
		padding:0 10px;
		font-size:12px;
		text-align:center;
	}
	.detail-container-center{
		float:left;
		width:230px;
		margin-bottom:20px;
		padding:0 10px;
		line-height:140%;
	}
	.detail-container-right{
		float:left;
		width:180px;
		margin-bottom:20px;
	}

	#floatbox li{
		float:left;
		width:30.7%;
		margin:0.6%;
		padding:0.7%;
		background:#ffffff;
		list-style:none;
		text-align:center;
		box-shadow:5px 5px 5px rgba(0,0,0,0.3);
	}
	#floatbox p{
		position:absolute;
		bottom:5px;
		max-width:90%;
		margin:0;
		padding:4px;
		background-color:rgba(0,0,0,0.6);
		border-radius:0 8px 8px 0;
		text-align:left;
		white-space:nowrap;
		overflow:hidden;
	}
	.floatboximg{ width:100%; height:200px; object-fit:cover; }

	.side-search{
		width:258px;
		margin:auto;
		background-color:#333333;
		border-radius:8px 8px 0 0;
		padding:10px 10px 10px 32px;
		text-align:left;
		font-weight:bold;
		color:#ffffff;
		background-image:url(../image/icon_circle.png);
		background-repeat:no-repeat;
		background-position:8px 8px;
	}
	.side-search-body{
		width:288px;
		margin:auto;
		background-color:#ffffff;
		border-top:none;
		border-left:#333333 1px solid;
		border-right:#333333 1px solid;
		border-bottom:#333333 1px solid;
		margin-bottom:10px;
		padding:5px;
		text-align:left;
		overflow:auto;
	}

	.side-menu{
		background-color:#333333;
		border-radius:8px 8px 0 0;
		padding:10px 10px 10px 32px;
		text-align:left;
		font-weight:bold;
		color:#ffffff;
		background-image:url(../image/icon_circle.png);
		background-repeat:no-repeat;
		background-position:8px 12px;
	}
	.side-menu-body{
		background-color:#ffffff;
		border-top:none;
		border-left:#333333 1px solid;
		border-right:#333333 1px solid;
		border-bottom:#333333 1px solid;
		margin-bottom:10px;
		padding:5px;
		text-align:left;
		overflow:auto;
	}
	.side-menu-body ul{
		margin-left:2px;
		margin:0px;
		padding:0px;
		line-height:180%;
	}
	.side-menu-body li{
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		list-style:none;
	}
	#footer li{
		padding-left:10px;
		padding-right:5px;
		border-left:2px solid #888888;
	}
	#footer li.first {
		border-left:none;
	}

	.contacttable{ width:100%; margin:auto; }
	.contacttable th { padding:10px; text-align:left; background-color:#f1f1f1; border:2px solid #808080; }
	.contacttable td { padding:10px; text-align:left; background-color:#ffffff; border:2px solid #808080; }
	#banner-sp{ display:none; }

	.pc-view { position:relative; }
	.sp-view { display: none; }

	.paging			{ display:inline-block; margin-top:30px; margin-bottom:20px; }
}

/* レスポンシブSP
--------------------------------------------------	*/
@media screen and (max-width:1009px){
	#wrapper{
		margin-left:auto;
		margin-right:auto;
	}

	#contents{
		margin-left:auto;
		margin-right:auto;
		background-color:#eeeeee;
		text-align:left;
	}

	#contents-slider{
		display:none;
	}

	#contents-top{
		margin:auto;
		text-align:center;
	}
	#contents-left{
		padding:10px;
		text-align:center;
		background-color:#ffffff;
	}
	#contents-right{
		padding:10px;
		text-align:center;
		background-color:#ffffff;
	}

	#top-menu{
		padding:0;
		margin:0;
		list-style-type: none;
		display:none;
	}
	#top-menu li{
		padding:0;
		margin:0;
		text-align:center;
		border-right:0px solid #333333;
	}
	#top-menu li a{
		color:#fff;
		font-weight:bold;
		padding:8px;
		text-decoration:none;
		font-size:18px;
		display:block;
		background:#333;
		background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #333 50%, #444 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
		border-top:3px solid #333333;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
	}
	#top-menu li a:hover{
		background:#333;
		background-image: -moz-linear-gradient(top, #555 0%, #666 50%, #666 50%, #666 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #666), color-stop(0.50, #666), color-stop(1, #666));
		border-top:3px solid #aa0000;
		border-left:1px solid #333333;
		border-right:1px solid #333333;
	}

	.container1{
		float:left;
		width:33%;
		text-align:center;
	}
	.container2{
		float:left;
		width:33%;
		text-align:center;
	}
	.container-top{
		display:none;
	}
	.container-middle{
		position:relative;
		height:120px;
		background-color:#f1f1f1;
		padding:10px;
		text-align:center;
	}
	.container-bottom{
		display:none;
	}

	.detail-container-left{
		margin-bottom:20px;
		padding:0 10px;
		font-size:12px;
		text-align:center;
	}
	.detail-container-center{
		margin-bottom:20px;
		padding:0 10px;
		line-height:140%;
	}
	.detail-container-right{
		margin-bottom:20px;
	}

	#floatbox li{
		float:left;
		width:30.7%;
		margin:0.6%;
		padding:0.7%;
		background:#ffffff;
		list-style:none;
		text-align:center;
		box-shadow:5px 5px 5px rgba(0,0,0,0.3);
	}
	#floatbox p{
		position:absolute;
		bottom:3px;
		max-width:85%;
		margin:0;
		padding:4px;
		background-color:rgba(0,0,0,0.6);
		border-radius:0 8px 8px 0;
		text-align:left;
		white-space:nowrap;
		overflow:hidden;
		font-size:0.9em;
	}
	.floatboximg{ width:100%; height:100px; object-fit:cover; }

	.side-search{
		display:none;
	}
	.side-search-body{
		display:none;
	}

	.side-menu{
		display:none;
	}
	.side-menu-body{
		display:none;
	}
	.side-menu-body ul{
		display:none;
	}
	.side-menu-body li{
		display:none;
	}
	#footer ul { padding-left:2%; margin:auto; line-height:250%; }
	#footer li {
		display:inline-block;
		float:left;
		width:48%;
		margin:1px;
		background:#333333;
		border:1px solid #ffffff;
	}
	#footer li a {
		display:block;
		width:100%;
	}
	#footer li a:hover {
		background-color:#555555;
	}

	.contacttable{ width:100%; margin:auto; }
	.contacttable th {
		display: block;
		padding:10px;
		text-align:left;
		background-color:#f1f1f1;
		border:2px solid #808080;
		border-bottom:none;
	}

	.contacttable td {
		display: block;
		margin-bottom:10px;
		padding:10px;
		text-align:left;
		background-color:#ffffff;
		border:2px solid #808080;
	}
	#banner-pc{ display:none; }
	.pc-view { display: none; }
	.sp-view { position:relative; font-size:0.9em; }

	.paging { display:inline-block; margin-top:20px; margin-bottom:0; }
}