@charset "utf-8";

/* common
----------------------------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	font-size: 87.5%;
	font-family: Verdana,Arial,"メイリオ",Meiryo,"Osaka","ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1.8;
	color: #646464;
	vertical-align: top;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

a:link   {color: #2646a9;text-decoration: underline;}
a:visited{color: #2646a9;text-decoration: underline;}
a:hover  {color: #ff6400;text-decoration: none;}
a:active {color: #2646a9;text-decoration: underline;}

.fa-caret-right{
	margin-right: 5px;
}
.link{
	position: relative;
	padding-left: 10px;
}
.link:before{
	position: absolute;
	left: 0;
	top: -1px;
	content: "\f0da";
	font-family: fontAwesome;
}
.btn{
	display: inline-block;
	padding: 15px 30px;
	color: #2646a9!important;
	text-align: center;
	border: 1px solid #2646a9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background: url(../img/bg-btn.gif) 0 0 repeat;
}
.btn:hover{
	color: #fff!important;
	border: 1px solid #ff6400;
	background: url(../img/bg-btn-hvr.gif) 0 0 repeat;
}
.btn .fa{
	margin-right: 5px;
}


/* structure
----------------------------------------------------------------------------------*/
.inner{
	position: relative;
	width: 960px;
	margin: 0 auto;
}
@media only screen and (max-width: 640px){
	.inner{
		width: auto;
		padding: 0 10px;
	}
}




/* header
----------------------------------------------------------------------------------*/
#header{
	padding: 20px 0;
	overflow: hidden;
}
#header .h-logo,
#header .h-description{
	display: inline-block;
	vertical-align: middle;
}
#header .h-logo{
	margin: 0 20px 0 0;
}
#header .h-navi{
	float: right;
	margin: 10px 0 0;
}
#header .h-navi li{
	margin-left: 15px;
}
#header .h-navi li:first-child{
	margin-left: 0;
}
#header .h-navi li.fb{
	font-weight: normal !important;
}
#header .h-navi li.fb .fa{
	margin-right: 5px;
	color: #365590;
	font-size: 18px;
}
#header .h-navi li.fb a:hover .fa{
	color: #ff6400;
}
@media only screen and (max-width: 640px){
	#header{
		padding: 20px 10px; 
	}
	#header .h-description,
	#header .h-navi{
		display: none;
	}
	#header .btn-menu{
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 40px;
		line-height: 1;
		color: #2646a9;
		cursor: pointer;
	}
	#header .btn-menu .menu{
		display: block;
		margin: -3px 0 0;
		font-size: 12px;
		text-align: center;
		line-height: 1;
	}
}



/* globalnavi
----------------------------------------------------------------------------------*/
#gnavi{
	min-width: 960px;
	margin: 0 auto;
	border-top: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
}
#gnavi ul{
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}
#gnavi ul li{
	width: 20%;
	border-right: 1px solid #c8c8c8;
}
#gnavi ul li:first-child{
	border-left: 1px solid #c8c8c8;
}
#gnavi ul li a{
	display: block;
	padding: 10px;
	text-align: center;
}
#gnavi ul li a:hover{
	color: #fff;
	background: #2646a9;
}
@media only screen and (max-width: 640px){
	#gnavi{
		display: none;
		min-width: inherit;
		text-align: left;
	}
	#gnavi ul li{
		display: block;
		width: 100%;
		padding: 0;
		border: none;
	}
	#gnavi ul li:first-child{
		border: none;
	}
	#gnavi ul li img{
		display: none;
	}
	#gnavi ul li span{
		display: block;
	}
	#gnavi ul li a{
		color: #fff;
		text-decoration: none;
		background: #2646a9;
	}
	#gnavi ul li a,
	#gnavi ul li ul li a{
		position: relative;
		display: block;
		padding: 15px 10px;
		text-decoration: none;
		border-bottom: 1px solid #fff;
	}
	#gnavi ul li a:hover,
	#gnavi ul li ul li a:hover{
		text-decoration: none;
		background: #2646a9;
	}
	#gnavi ul li a:before {
		position: absolute;
		right: 10px;
		top: 16px;
		color: #fff;
		font-family: 'FontAwesome';
		content:"\f054";
	}
	#gnavi ul li a.parent:before {
		position: absolute;
		right: 10px;
		top: 16px;
		color: #fff;
		font-family: 'fontAwesome';
		content:"\f078";
	}
	#gnavi ul li ul{
		position: static;
		width: 100%;
		margin-left: 0;
		padding: 0;
	}
	#gnavi ul li ul:after {
		display: none;
	}
	#gnavi ul li ul{
		position: static;
		width: 100%;
	}
	#gnavi ul li ul li{
		padding: 0;
	}
	#gnavi ul li ul li a{
		padding: 10px;
		color: #64461e;
		background: #fff;
	}
	#gnavi ul li ul li a:hover{
		text-decoration: none;
		background: #fff;
	}
	#gnavi ul li ul li a:before{color: #64461e;}
}
@media only screen and (min-width: 641px){
	#gnavi{display: block!important;}
}




/* category title
----------------------------------------------------------------------------------*/
#cttl{
	height: 220px;
	-webkit-background-size: cover!important;
	background-size: cover!important;
}
#cttl h1{
	padding: 95px 0 0;
}
#cttl.bg01{background: url(../img/cttl/bg01.jpg) center center no-repeat;}
#cttl.bg02{background: url(../img/cttl/bg02.jpg) center center no-repeat;}
#cttl.bg03{background: url(../img/cttl/bg03.jpg) center center no-repeat;}
#cttl.bg04{background: url(../img/cttl/bg04.jpg) center center no-repeat;}
#cttl.bg05{background: url(../img/cttl/bg05.jpg) center center no-repeat;}
@media only screen and (max-width: 640px){
	#cttl{
		height: 110px;
	}
	#cttl h1{
		padding: 45px 0 0;
	}
	#cttl .logo{display: none;}
	
#cttl.bg01{background: url(../img/cttl/bg01_640.jpg) center center no-repeat;}
#cttl.bg02{background: url(../img/cttl/bg02_640.jpg) center center no-repeat;}
#cttl.bg03{background: url(../img/cttl/bg03_640.jpg) center center no-repeat;}
#cttl.bg04{background: url(../img/cttl/bg04_640.jpg) center center no-repeat;}
#cttl.bg05{background: url(../img/cttl/bg05_640.jpg) center center no-repeat;}
}


/* page title
----------------------------------------------------------------------------------*/
#pttl{
	padding: 25px 10px;
	background: #00afff;
}
#pttl h2{
	padding: 5px 0 5px 55px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.2;
	background: url(../img/icon-pttl.png) 0 3px no-repeat;
}



/* topicpath
----------------------------------------------------------------------------------*/
#topicpath{
	padding: 5px 10px;
}
#topicpath .fa{
	margin-right: 5px;
}
#topicpath .fa-chevron-circle-right{
	margin-left: 10px;
}
@media only screen and (max-width: 640px){
	#topicpath{
		display: none;
	}
}



/* article
----------------------------------------------------------------------------------*/
#article{
	padding: 40px 0 0;
}
#article h3{
	margin: 40px 0 15px;
	padding: 20px 10px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	background: url(../img/bg-ttl.gif) repeat;
}
#article h4{
	margin: 40px 0 15px;
	padding: 10px 0 10px 20px;
	color: #00afff;
	font-size: 18px;
	line-height: 1.4;
	font-weight: bold;
	border-left: 5px solid #00afff;
	border-bottom: 1px solid #c8c8c8;
}
#article h5{
	margin: 30px 0 10px;
	padding: 3px 0 3px 10px;
	color: #00afff;
	font-size: 16px;
	font-weight: bold;
	border-left: 5px solid #00afff;
}
/*#article h5{
	margin: 0 0 10px;
	padding: 0 0 0 5px;
	color: #64461e;
	font-weight: bold;
	border-left: 5px solid #64461e;
}*/
#article p{margin: 0;}
#article strong{
	font-weight: bold;
}
#article table{
	width: 100%;
	border-top: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
 }
#article table th,
#article table td{
	padding: 5px 10px;
	border-bottom: 1px dotted #c8c8c8;
}
#article table tr:last-child th,
#article table tr:last-child td{
	border: none;
}
#article table th{
	background: #fffaf0;
}
#article table.auto{
	width: auto;
}
@media only screen and (max-width: 640px){
	#article{
		padding: 40px 10px 0;
	}
	#article table.auto{
		width: 100%;
	}
	#article table th,
	#article table td{
		width: auto!important;
	}
	#article table th{
		width: 30%!important;
	}
}

/* footer
----------------------------------------------------------------------------------*/
#footer-top{
	margin: 100px auto 0;
}
#footer-top .f-bnr{
	margin: 0 0 50px;
	text-align: center;
}
#footer-top .f-bnr li figcaption{
	display: block;
	margin: 5px 0 0;
}
#footer-top .f-bnr li figcaption .fa{
	margin-right: 3px;
}
#footer-top .group li h2{
	margin: 0 0 5px;
	padding: 0 0 5px;
	font-size: 18px;
	border-bottom: 1px solid #c8c8c8;
}

#footer-bg{
	padding: 315px 0 0;
	background: url(../img/bg-footer.png) center top repeat-x;
}

#footer{
	position: relative;
	padding: 100px 10px 30px;
	background: #b8d467;
}
#footer .pagetop{
	position: fixed;
	bottom: 10px;
	right: 30px;
	text-align: center;
}
#footer .pagetop span{
	display: block;
	font-size: 12px;
}
#footer .f-logo{
	margin: 0 0 10px;
	text-align: center;
}
#footer .f-description{
	text-align: center;
}
#footer .f-navi{
	margin: 20px 0;
	text-align: center;
}
#footer .f-navi li{
	padding: 0 7px;
}
#footer .f-navi li .fa{
	margin-right: 3px;
}
#sns-btn{
	margin: 0 0 20px;
    text-align: center;
}
#sns-btn span {
    display: inline-block;
    *display:inline;
    overflow: hidden;
    line-height: 1;
    vertical-align:top;
    zoom:1;
}
#sns-btn span img{
    max-width:100%;
    height:auto;
    vertical-align: text-top;
}
#sns-btn span#btn_facebook {
    width: 150px;
}
#sns-btn span#btn_google {
    width: 58px;
}
#sns-btn span#btn_twitter {
    width: 68px;
}
#sns-btn span#btn_line {
    width: 82px;
}
#sns-btn span#btn_line a{
    display: block;
    margin: -2px 0 0;
}
#footer .copyright{
	text-align: center;
}
@media only screen and (max-width: 640px){
	#footer-top .group li{
		display: block;
		width: 100%;
		margin: 0 0 20px;
	}
	#footer-bg{
		padding: 155px 0 0;
		-webkit-background-size: 640px auto;
		background-size: 640px auto;
	}
}