@charset "UTF-8";
/* CSS Document */

@media (min-width: 0px) and (max-width:  414px) {
ul#gyoushulist li{
	    margin: 0 0 5px 0;
	    text-align: center;
	    background: #FFF;
	    border: solid 6px #FFF;
	    -webkit-box-shadow:0px 2px 3px rgba(80, 80, 80, 0.7);
		-moz-box-shadow:0px 2px 3px rgba(80, 80, 80, 0.7);
		box-shadow: 0px 2px 3px rgba(80, 80, 80, 0.7);
		position: relative;
		overflow: hidden
	}
	ul#gyoushulist li h3{
		text-align: left;
		font-size: 1.4em;
		letter-spacing: .1em;
		margin: .4em 0 .3em;
		font-family: 'ゴシックMB101 M',Gothic MB101 Medium
	}
	
	ul#gyoushulist li h3 a{
		text-decoration: none;
		color: #1a8dff;
	}
	
	ul#gyoushulist li span{
		display: block;
		font-size: .9em;
		text-align: left;
		letter-spacing: .1em;
		margin: 0 0 .2em;
	}

	ul#gyoushulist li img{
		float: left;
		margin-right: 1em;
		width:28%;
		height: auto}
	
	.kyoka_list,
	.hoyu_list{
		margin: 0 5% 30px;
	}	
}



@media (min-width: 415px) {
	#gyoushu{}
	
	
	ul#gyoushulist{-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 -2% 0 0;
		zoom: 1;
	}
	
	
	ul#gyoushulist li{
			float: left;
		    margin: 0 1% 10px 0;
		    width: 24%;
		    text-align: center;
		    display: inline;
		    background: #FFF;
		    border: solid 6px #FFF;
		    -webkit-box-shadow:0px 2px 3px rgba(80, 80, 80, 0.7);
			-moz-box-shadow:0px 2px 3px rgba(80, 80, 80, 0.7);
			box-shadow: 0px 2px 3px rgba(80, 80, 80, 0.7);
			position: relative;
			overflow: hidden
		}
	ul#gyoushulist li h3{
			text-align: center;
			font-size: 1.25em;
			letter-spacing: .1em;
			margin: .8em .5em .5em;
			font-family: 'ゴシックMB101 M',Gothic MB101 Medium
		}
		
	ul#gyoushulist li h3 a{
			text-decoration: none;
			color: #1a8dff;
		}
		
	ul#gyoushulist li span{
			display: block;
			font-size: .9em;
			text-align: left;
			letter-spacing: .1em;
			margin: .8em .5em .2em;
		}
	
	ul#gyoushulist li img{
		width: auto !important;
		height:230px}
	
	#kyoka{}
	.kyoka_list,
	.hoyu_list{
		margin: 0 10% 30px;
	}	
}
	
	
	
	
.naiyo{
		padding: 1em;
		text-align: center;
		margin-bottom: 2em
	}
	
.naiyo h3{
		font-size: 1.5em;
		color: #152D90;
		margin-bottom: .5em;
		text-align: center
	}
		
	
	.kyoka_list{
		overflow : hidden;
		padding: .4em;
		background: url(../images/bgami_bk.png);
	}
	
	
	.kyoka_list h3{
	text-align: center;
	font-size: 1.3em;
	padding: .4em 1em .5em;
	letter-spacing: .1em;
	}
	
	.kyoka_tb{
	border-collapse: collapse;
	border-spacing: 0;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	background: #FFF;
	height:100%;
	width: 100%;
	}
	
	.kyoka_tb th,
	.kyoka_tb td{color:#000000;
	vertical-align:middle;
	padding: .5em .8em .5em;
	border-bottom:1px dotted #999;
	border-left:1px solid #ccc;}
	
	.kyoka_tb tr:last-child th,
	.kyoka_tb tr:last-child td{border-bottom:1px solid #ccc;}
	
	.kyoka_tb th{
		text-align:center;
		width: 50%;
		font-size: 1.1em;
		}
	
	.kyoka_tb td{
		font-size: 1.1em;
	border-width:0px 1px 1px 0px;
	text-align:left;}
	
	
	
	
	
	.hoyu_list{
		overflow : hidden;
		padding: .4em;
		background: url(../images/bgami_bk.png);
	}
	
	
	.hoyu_list h3{
	text-align: center;
	font-size: 1.4em;
	padding: .4em 1em .5em;
	background: #4DA6FF;
	color: #fff;
	letter-spacing: .1em;
	}
	
	.hoyu_tb{
	border-collapse: collapse;
	border-spacing: 0;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	background: #FFF;
	height:100%;
	width: 100%;
	}
	
	.hoyu_tb tr:nth-child(n + 2) .total {
	display:none}
	
	
	.hoyu_list h4{
		padding: 1.2em;
		font-size: 1.4em;
		display: block;
		text-align: center;
		margin: 0 auto
	}
	
	.hoyu_tb td{color:#000000;
	vertical-align:middle;
	padding: .5em .8em .5em;
	border-bottom:1px dotted #999;
	border-left:1px solid #ccc;}
	
	.hoyu_tb tr:last-child td{border-bottom:1px solid #ccc;}
	
	.hoyu_tb th{
		border-left:1px solid #ccc;
		padding: .6em 1em .6em;
		border-bottom:2px solid #ccc;
		text-align:center;
		font-size: 1.2em
		}
	
	.hoyu_tb td{
		font-size: 1.1em;
	text-align:left;}


#gallerylist{
	margin-bottom: 20px
}

#gallerylist h4{
	text-align: center;
	font-size: 1.7em;
	letter-spacing: .2em;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #fff), color-stop(0.00, #E8EDF8));
	background: -webkit-linear-gradient(top, #E8EDF8 0%, #fff 88%);
	background: -moz-linear-gradient(top, #E8EDF8 0%, #fff 88%);
	background: -o-linear-gradient(top, #E8EDF8 0%, #fff 88%);
	background: -ms-linear-gradient(top, #E8EDF8 0%, #fff 88%);
	background: linear-gradient(to bottom, #E8EDF8 0%, #fff 88%);
	padding: .8em 1em
}


ul.gallerybox{-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 -2% 30px 0;
	overflow: hidden;
	zoom: 1;}
    
 @media (min-width: 0px)and(max-width: 414px){
	ul.gallerybox li{margin: 0 2% 5px 0;}
	ul.gallerybox li img{margin-bottom:5px;padding:.3em;}
	}    
@media (min-width: 415px){
	ul.gallerybox li{margin: 0 2% 10px 0;}
	ul.gallerybox li img{margin-bottom:8px;padding:.5em;}
	
	}   
ul.gallerybox li{
	 float: left;
    width: 31.3%;
    text-align: center;
    display: inline;}

ul.gallerybox li img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border:#CCC solid 1px;
	background:url(../images/material/back_natural/mermaid.jpg);
	width:100%;
	height: auto}
ul.gallerybox li .cap{
	display:block;
	padding-left:3px;}

ul.gallerybox li {
	position:relative}	
span.overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../images/gallery/book_bg_hover.png) no-repeat 50% 50%;
	top:0;
	left:0;
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
	filter: alpha(opacity=0);
}
span.overlay:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
a:hover img {
	opacity: .8;
	filter: alpha(opacity=80);
}