@charset "shift_jis";
/*------------------------------------------------
header
-------------------------------------------------*/
@media screen and (max-width:960px) {
	header,.container, footer, #readcrumb ul, footer ul{
	 width:98%;
	}
	
	#wrapper {
		overflow:hidden;
	}
	#wrapper {
		width:100%;
	}
}


@media screen and (max-width:767px) {
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
			font-size: 14px;
	}
	html {
		-webkit-text-size-adjust: 100%;
	}
	#wrapper {
		overflow:hidden;
	}
	#wrapper, .container {
		width:100%;
	}

	header{
	width:100%;
	}
	header #smMenuBtn{
		float:right;
	}
	header #smMenuBtn{
		display:block;
		width:50px;
	}
	
	.smHeader{
		display:block;
	}
	.smHeader{
		cursor:pointer;
	}
	header div.HeaderLogo{
		position:static;
		width:150px;
	}
	header .HeaderLogo img{
		margin: auto;
		width:200px;
	}

	header .fLeft,
	header .fRight{
	float:none;
	}	
	header li{
	text-align:left;
	}
}

@media screen and (max-width:400px) {
	div.HeaderLogo img{
		max-width:100%;
	}

}


/*------------------------------------------------
#page-top
-------------------------------------------------*/
@media screen and (max-width:767px) {
	
	#smPage-top {
		position:relative;
	}
	#smPage-top {
		width: 100%;
		height:2em;
		line-height:2em;
		font-size:1.6em;
		background:#848484;
		cursor:pointer;
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
		color:#ffffff !important;
	}
	#smPage-top:before{
		content:url("../images/common/sm_arrow_u_w.png");
		margin-right:0.3em;
	}
}

/*------------------------------------------------
keyimgBox
-------------------------------------------------*/
@media screen and (max-width:960px) {
	.keyimgBox img{
		width:100%;
	}
}

/*------------------------------------------------
navi
-------------------------------------------------*/
@media screen and (max-width:767px) {
	#navi{
		display:none;
	}
}
/*------------------------------------------------
#サイドバー
-------------------------------------------------*/
@media screen and (max-width:767px) {
	body {
/*	position : relative;
	width : 100%;
*/	overflow-x : hidden;
	}

	/* function */
	#navi{
		display:none;
	}
	.smHeader,
	.side-open #slideMenu,
	.side-close #slideMenu,
	header div.HeaderLogo p{
		display:block;
	}
	.smHeader{
		cursor:pointer;
	}
	.overlay {
		z-index: 90;
		content: ' ';
		visibility: hidden;
		position: fixed;
		top: 62px;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0);
	}
	.overlay::before {
		content: ' ';
		visibility:hidden;
		position: fixed;
		top: -62px;
		right: 0;
		display: block;
		width: 100%;
		height: 62px;
	}
	#slideMenu{
		position: fixed;
		top: 0;
		left: 0;
		width: 80%;/**/
		height: 100%;
		padding-top:62px;
		background: #ffffff;
		z-index: 1;
		display:none;
	}
	#wrapper {
		/*position:absolute;*/
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top:62px;
		z-index: 2;
		background:#ffffff;
	}
	.side-open #slideMenu{
		display:block;
	}

	.side-open{
		position: relative;
		overflow: hidden;
	}
	.side-open #wrapper,
	.side-open .overlay {
	}
	
	.side-open #slideMenu{
		animation-name: slidewidthO 400ms;
		-webkit-animation: slidewidthO 400ms;
		width:80%;
	}
	@keyframes slidewidthO {
		0%{width:0;}
		100%{width:80%;}
	}
	@-webkit-keyframes slidewidthO {
		0%{width:0;}
		100%{width:80%;}
	}
	
	.side-close #slideMenu{
		animation-name: slidewideC 400ms;
		-webkit-animation: slidewidthC 400ms;
		width:0;
	}
	
	@keyframes slidewidthC {
		0%{width:80%;}
		100%{width:0;}
	}
	@-webkit-keyframes slidewidthC {
		0%{width:80%;}
		100%{width:0%;}
	}
	
	.side-close #wrapper,
	.side-close .overlay {
		animation-name: slideout 400ms;
		-webkit-animation: slideout 400ms;
		margin-left:0;
	}
	@keyframes slideout {
		0%{margin-left:80%;}
		100%{margin-left:0;}
	}
	@-webkit-keyframes slideout {
		0%{margin-left:80%;}
		100%{margin-left:0;}
	}

	.side-open #wrapper,
	.side-open .overlay {
		animation-name: slidein 400ms;
		-webkit-animation: slidein 400ms;
		margin-left:80%;
	}
	@keyframes slidein {
		0%{margin-left:0;}
		100%{margin-left:80%;}
	}
	@-webkit-keyframes slidein {
		0%{margin-left:0;}
		100%{margin-left:80%;}
	}
	
	.side-open .overlay {
		visibility: visible;
		cursor: pointer;
		background: rgba(0,0,0,.7);
	}
	.side-open .overlay::before{
		visibility: visible;
		cursor: pointer;
		background: rgba(0,0,0,0);
	}
	/* Header Design */
	header{
		height:62px;
		padding-top:5px;
		position:fixed;
		top:0;
		background:#ffffff;
		z-index:100;
		border-top:1px solid #c8000b;
		box-shadow: 0 0 5px #999;
	}
	header #smMenuBtn{
		float:left;
	}
	header #smMenuBtn{
		display:block;
		width:50px;
	}
	/* drawer slide menu */
	#slideMenu{
	border-top: 1px solid #c8000b;
	overflow: auto;
	}
	ul.navAction,
	ul.navAction li{
		position:static;
		margin:0;
		padding:0;
	}
	#slideMenu li a{
		display:block;
		line-height:1.2em;
		padding: 20px 1em ;
	}
	.navAction a{
		border-top:1px solid #cccccc;
		color:#333333;
	}
	#slideMenu li a:hover{
		text-decoration:none;
	}
	.navAction{
	background:#EEEEEE;
	}
}

/*------------------------------------------------
パンくず sns
-------------------------------------------------*/
@media screen and (max-width:960px) {
	#breadcrumb ul{
		width:98%;
	}
}
@media screen and (max-width:767px) {
	#breadcrumb{
		display:none;
	}
	.fw-button{
	margin-top:2px !important;
	}

}

/*------------------------------------------------
footer
-------------------------------------------------*/
@media screen and (max-width:767px) {
	footer .inner3{
		width:100%;
	}
	
/*------------------------------------------------
layout grit system
-------------------------------------------------*/
@media screen and (max-width:960px) {
	#wrapper {
		width:100%;
	}
	.container{
		width:98%;
	}
}
@media screen and (max-width:940px) {
}
@media screen and (max-width:767px) {
	.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
		float:none;
		margin-left:auto;
		margin-right:auto;
		clear: left;
		margin-bottom:20px;
		width:100%;
		display:table;
	}
	.grid12{
		display:block;
	}
	.row *[class^="grid"]:last-child{
		margin-bottom:0;
	}
	.gridclear, *[class^="grid"]:first-child {
		margin-left:auto;
		margin-top:0;
		clear: left;
	}
	.grid1 img,
	.grid2 img,
	.grid3 img,
	.grid4 img,
	.grid5 img,
	.grid6 img,
	.grid7 img,
	.grid8 img,
	.grid9 img,
	.grid10 img,
	.grid11 img,
	.grid12 img{
		margin-left: auto;
		margin-right: auto;
	}
	.bnrArea a.last{
	margin-right:1.04% !important;
	}	
}
.mgR20-pc{
	margin-right:20px;
}
.mgL20-pc{
	margin-left:20px;
}

	
@media screen and (max-width:767px) {
	.mgR20-pc{
		margin-right:0;
	}
	.mgL20-pc{
		margin-left:0;
	}
	.block-mb{
	 display:block;
	 margin-bottom:20px;
	}
}

/*------------------------------------------------
font size
-------------------------------------------------*/

@media screen and (max-width:767px) {
	h1 {
		font-size: 2em;
	}
	h2{
		font-size: 1.8em;
	}
	h3{
		font-size: 1.6em;
		font-weight:bold;
	}
	h4{
		font-size: 1.4em;
		font-weight:bold;
	}
	.catch{
		font-size: 1.2em;
	}
}


/*------------------------------------------------
youtube responsive
-------------------------------------------------*/
@media screen and (max-width:640px) {
	.youtube {
		position: relative;
		width: 85%;
		padding-top: 56.25%;
		padding-top: 47.8125%;
		
		margin:30px auto 25px;
	}
	.youtube iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
}


@media screen and (max-width:767px) {
	#wrapper {
		overflow:hidden;
	}
	.youtubeL {
		position: relative;
		width: 85%;
		/*padding-top: 56.25%;*/
		padding-top: 47.8125%;
		margin:30px auto 25px;
	}
	.youtubeL iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
	.smNone {
		display:none;
	}
	.pcNone {
	display:block;
	}
}

/*------------------------------------------------
news
-------------------------------------------------*/
@media screen and (max-width:767px) {
	.news dl dt{
	float: none;
	}
}	
/*------------------------------------------------
layout
-------------------------------------------------*/
	
@media screen and (max-width:767px) {
	.link220 a{
		width:30%;
	}
	.dlFloat dt,
	.dlFloat dd{
	float: none;
	width:100% !important;
	}
	
	.scrollBox {
		overflow-x: auto;
	}
	.scrollBox table{
		width:122.5%;
	}
}