@charset "utf-8";

/* ================================================================ */
/* 基本                                                             */
/* ================================================================ */
body{
	font-family:Avenir, Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', '游ゴシック' , 'Yu Gothic', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height:1.5;
	width:100%;
	height:100%;
	font-size:14px;
	overflow: visible !important;
	min-width:320px;
	margin:0;
}

img{
	line-height:1;
}

a{
	text-decoration:none;
	color:#0265B6;
}

a:hover{
	color:#FDA038;
}

/* ================================================================ */
/* レイアウト                                                       */
/* ================================================================ */
#wrapper{
	width:100%;
	position: relative;
	height:auto !important;
	height:100%;
	min-height:100vh;
	padding-top:20px;
}

#contents{
	width:980px;
	margin:0 auto;
}

.container{
	width:980px;
	margin:0 auto;
	position: relative;
}


/* ================================================================ */
/* 効果                                                             */
/* ================================================================ */
.zoom{
	-moz-transition: -moz-transform 0.1s linear;
	-webkit-transition: -webkit-transform 0.1s linear;
	-o-transition: -o-transform 0.1s linear;
	-ms-transition: -ms-transform 0.1s linear;
	transition: transform 0.1s linear;
}
.zoom:hover,
.zoom:focus,
.zoom:active{
	-webkit-transform: scale(1.01);
	-moz-transform: scale(1.01);
	-o-transform: scale(1.01);
	-ms-transform: scale(1.01);
	transform: scale(1.01);
}

.tremble:hover {
	animation: tremble 0.6s linear 0s 1;
}
 
@keyframes tremble {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.95, 0.95) translate(0%, 5%); }
	30%  { transform: scale(1.1, 0.9) translate(0%, 7%); }
	50%  { transform: scale(0.9, 1.1) translate(0%, -7%); }
	70%  { transform: scale(1.05, 0.95) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


/* ================================================================ */
/* clearfix                                                         */
/* ================================================================ */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ================================================================ */
/* ヘッダ                                                           */
/* ================================================================ */
#sp-header{
	display:none;
}


/* ================================================================ */
/* サイドバー                                                       */
/* ================================================================ */
#side{
	width:230px;
	float:left;
	z-index:5000;
}
#side .side-box{
	border-radius:5px;
	padding-bottom:10px;
	background:#c7e3f9 url("../img/common/side.png") no-repeat center bottom;
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
}
#side .side-box h1{
	padding:10px 0 0 0;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#c3e2f7');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#c3e2f7')";
	background-image: -moz-linear-gradient(top, #ffffff, #c3e2f7);
	background-image: -ms-linear-gradient(top, #ffffff, #c3e2f7);
	background-image: -o-linear-gradient(top, #ffffff, #c3e2f7);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#c3e2f7));
	background-image: -webkit-linear-gradient(top, #ffffff, #c3e2f7);
	background-image: linear-gradient(top, #ffffff, #c3e2f7);
	border-radius:5px 5px 0 0;
}

#side .side-box h1 .logo{
	border-radius:5px 5px 0 0;
}

#side .side-box h2{
	position: relative;
	right: 10px;
}


/* メインメニュー ---------------------------------------------------- */
#side .side-box .main-menu{
	margin-left:7px;
	margin-top:5px;
	background: #fff;
	border-radius: 5px;
	width:216px;
}
#side .side-box .main-menu li{
	text-align:center;
	border-bottom:1px dotted #ccc;
	line-height:1;
}
#side .side-box .main-menu li:last-child{
	border:none;
}
#side .side-box .main-menu li a{
	padding:4px 0 4px 0;
	display:block;
}

/* バナー --------------------------------------------------------- */
#side .side-box .banner-area{
	margin-top:15px;
}
#side .side-box .banner-area li{
	text-align:center;
	margin-bottom:3px;
}

/* SNS    --------------------------------------------------------- */
.sns-box{
	background: rgba(255,255,255,0.6);
	border-radius:3px;
	margin-top:15px;
	padding:10px 10px;
}
.sns-box .sns-btn-list{

}

.sns-box .sns-btn-list li{
	display:inline-block;
	margin:2px;
	vertical-align:top;
}
.sns-box .sns-btn-list li div,
.sns-box .sns-btn-list li span,
.sns-box .sns-btn-list li iframe{
	margin:0;
}
.sns-box-fixed{
	position: fixed;
	bottom:60px;
	width:230px;
}
#sp-sns{
	padding:0 10px;
}


/* ================================================================ */
/* メイン                                                           */
/* ================================================================ */
#main{
	width:720px;
	float:right;
	display:none;

}


/* ================================================================ */
/* フッタ                                                           */
/* ================================================================ */
#footer{
	background:url("../img/common/footer-img.png") repeat-x;
	height:45px;
	margin-top:100px;

}
#footer #copyright{
	color:#fff;
	text-align:center;
	padding-top:15px;
	font-size:13px;
}


/* ================================================================ */
/* パンくず                                                         */
/* ================================================================ */
.breadcrumb{
	background:#fff;
	border-radius:5px;
	margin-bottom:15px;
}
.breadcrumb > ul{

}
.breadcrumb > ul li{
	float:left;
	font-size:14px;
	line-height:20px;
}

.breadcrumb > ul li a,
.breadcrumb > ul li span{
	padding:5px 10px;
	display:block;
	border-right:solid 1px #eee;
}
.breadcrumb > ul li span.active{
	font-weight:bold;
}
.breadcrumb > ul li.home{
	background:#5BBDF4;
	border-radius:5px 0 0 5px;
}
.breadcrumb > ul li.home:hover{
	background:#007CD6;
}

.breadcrumb > ul li.home a{
	color:#fff;
	font-size:20px;
	line-height:20px;
}




/* ================================================================ */
/* キャラクター                                                     */
/* ================================================================ */
#char-box{
}


#char-box .uzuhimechan{
	width:150px;
	position:fixed;
	bottom:-5px;
	margin-left:-110px;
	z-index:999;

}
#char-box .uzushiokun{
	width:150px;
	position:fixed;
	bottom:-5px;
	margin-left:980px;
	z-index:999;
}
#char-box .pagetop{
	position: fixed;
	margin-left:910px;
	bottom: 50px;
	font-weight:bold;
	font-size:16px;
	z-index:9999;
}
#char-box .pagetop a{
	text-decoration: none;
	transition:0.5s;
}

#footer #footer-char .pagetop a:hover{
	text-decoration: none;
	transition:0.5s;
}




/* ================================================================ */
/* グリッド                                                         */
/* ================================================================ */
.bn-grid-sizer,
.bn-grid-item {
	width: 234px;
	height:235px;
	margin-bottom: 10px;
}
.bn-grid-item--width2 {
	width: 477px;
}
.bn-grid-item--width3 {
	width: 720px;
}

.bn-grid-item img.bn{
	
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	border-radius:3px;

}
.bn-grid-item .content-icon{
	position:relative;
	margin-bottom:-60px;
	right:5px;
	width:60px;
	z-index:999;
}



/* ================================================================ */
/* コンテンツ部                                                     */
/* ================================================================ */
.content-box{
	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.35);
	border-radius:5px;
	background:#fff;
	margin-bottom:2em;
}

.content-box h1 img{
	border-radius:5px 5px 0 0;
}
.content-box h1 img.curve{
	border-radius:5px;
}
.content-box img.curve{
	border-radius:5px;
}
.content-box img.top-curve{
	border-radius:5px 5px 0 0;
}
.content-box img.bottom-curve{
	border-radius: 0 0 5px 5px;
}


/* ================================================================ */
/* 関連リンク                                                       */
/* ================================================================ */
.kanren-box{
	padding:10px;
}
.kanren-box h2{
	background:#057AFB;
	color:#fff;
	border-radius:3px;
	padding:5px 10px;
}

.kanren-box ul{
	margin-left:10px;
	margin-top:10px;
}

.kanren-box ul li{
	color:#057AFB;
	margin-bottom:5px;
}







/* ================================================================================================ */
/* レスポンシブ対応                                                                                 */
/* ================================================================================================ */
@media screen and (max-width: 980px) {
	#sp-header{
		display:block;
		color:#fff;
		position:fixed;
		background:#2897D6;
		background-image: linear-gradient(to bottom, #2998D6, #248DC7 80%);
		top:0;
		left:0;
		width:100%;
		height:60px;
		z-index:9999;
		overflow:hidden;
		box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	}
	#sp-header h1{
		color:#fff;
		vertical-align:middle;
		height:60px;
		padding-top:14px;
		text-align:center;
		font-size:17px;
		line-height:1;
	}
	#sp-header h1 span{
		font-size:13px;
	}

	.container{
		width:100%;
	}
	#contents{
		width:100%;
		padding:0;
	}
	#side{
	/*	display:none; */
		float:none;
		z-index:10000;
		box-shadow: 0px 10px 8px rgba(0,0,0,0.5);
		background:#0366B7;
	}
	#side .side-box{
		border-radius:0;
		box-shadow:none;
	}
	#side .sns-box{


	}


	#main{
		float:none;
		width:720px;
		margin:0 auto;
		padding-top:70px;
	}


	#char-box .uzuhimechan{
			display:none;

	}
	#char-box .uzushiokun{
			display:none;
	}

	#char-box .pagetop{
		right:5px;
		bottom:5px;
	}

	.bn-grid{
		margin: 0 auto;
	}



}

@media screen and (max-width: 720px) {

	#contents{
		padding:10px;
	}

	#main{
		width:100%;
		margin:0 auto;
	}

	#main img{
		width:100%;
	}

	#main img.origin{
		width:auto;
	}
	

	.breadcrumb{
		display:none;
	}

	.bn-grid-item--width3 {
		width: 100%;
		height:auto;
	}

}

@media screen and (max-width: 500px) {

	#contents{
	}
	#side{
	}
	#main{
		width:100%;
		padding-top:50px;
	}

	.bn-grid-sizer,
	.bn-grid-item {
		width: 48%;
		height:auto;
		margin-bottom: 5px;

	}
	.bn-grid-item--width2 {
		width: 100%;
		height:auto;
	}

	.bn-grid-item--width3 {
		width: 100%;
		height:auto;
	}


	.bn-grid-item img.bn{
		width: 100%;
	}


}