@charset "UTF-8";
:root{
	--body : #221815;
	--link : #221815;
	--title : #221815;
	--main : #221815;
	--base : #221815;
	--mainBold : #221815;
	--sub : #221815;
	--white : #221815;
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
@media(max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}
@media(min-width: 769px){
	.wrap{
		padding-left : 10px;
		padding-right : 10px;
		width : 1080px;
	}
}
@media(max-width: 768px){
	main{
		padding-top : calc( 140 * 100vw / 768 );
	}
}
@media(min-width: 769px) and (max-width:1079px){
	main{
		width : 1080px;
		margin-left : auto;
		margin-right : auto;
	}
}
@media(min-width: 769px){
	main{
		padding-top : 104px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
body.is-open{
	overflow : hidden;
}
@media(max-width: 768px){
	body.is-open #header #navs{
		max-height : 100vh;
	}
}
body.is-open #header #btnMenu span:nth-of-type(1){
	-webkit-transform : translateY( calc( 20 * 100vw / 768 ) ) scale(0);
	        transform : translateY( calc( 20 * 100vw / 768 ) ) scale(0);
}
body.is-open #header #btnMenu span:nth-of-type(2){
	-webkit-transform : rotate(-45deg);
	        transform : rotate(-45deg);
}
body.is-open #header #btnMenu span:nth-of-type(3){
	-webkit-transform : rotate(45deg);
	        transform : rotate(45deg);
}
body.is-open #header #btnMenu span:nth-of-type(4){
	-webkit-transform : translateY( calc( -20 * 100vw / 768 ) ) scale(0);
	        transform : translateY( calc( -20 * 100vw / 768 ) ) scale(0);
}
#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
	background-color : #fff;
}
#header h1 a{
	display : block;
}
#header nav ul li:nth-child( 6 ) a{
	background-color : #f93;
	color : #fff;
}
@media(max-width: 768px){
	#header .wrap{
		height : calc( 140 * 100vw / 768 );
		position : relative;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header #btnMenu{
		position : absolute;
		top : 50%;
		-webkit-transform : translateY( -50% );
		        transform : translateY( -50% );
		right : calc( 24 * 100% / 768 );
		width : calc( 80 * 100% / 768 );
		height : calc( 48 * 100vw / 768 );
	}
	#header #btnMenu > div{
		width : 100%;
		height : 100%;
		position : relative;
	}
	#header #btnMenu span{
		width : 100%;
		height : calc( 8 * 100vw / 768 );
		background-color : #0097e0;
		display : block;
		position : absolute;
		left : 0;
		-webkit-transition : all .4s;
		        transition : all .4s;
	}
	#header #btnMenu span:nth-of-type(1){
		top : 0;
	}
	#header #btnMenu span:nth-of-type(2){
		top : calc( 20 * 100vw / 768 );
	}
	#header #btnMenu span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
	#header #btnMenu span:nth-of-type(4){
		bottom : 0;
	}
	#header h1{
		width : calc( 400 * 100% / 720 );
	}
	#header #navs{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		-webkit-transition : max-height .5s ease-in;
		        transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 140 * 100vw / 768 );
		background-color : rgba( 0 , 129 , 204 , .95 );
		height : calc( 100% - calc( 140 * 100vw / 768 ) );
	}
	#header .nav-wrap{
		padding : calc( 24 * 100vw / 768 ) calc( 24 * 100% / 768 ) calc( 56 * 100vw / 768 );
	}
	#header nav{
		border : solid calc( 2 * 100vw / 768 ) #fff;
		padding : calc( 21 * 100vw / 768 ) calc( 38 * 100% / 720 ) calc( 46 * 100vw / 768 );
	}
	#header nav a{
		font-size : calc( 30 * 100vw / 768 );
		color : white;
		letter-spacing : .1em;
	}
	#header nav span{
		font-size : calc( 30 * 100vw / 768 );
		color : white;
		letter-spacing : .1em;
	}
	#header nav > ul > li:nth-child( -n + 4){
		border-bottom : calc( 2 * 100vw / 768 ) solid #fff;
	}
	#header nav > ul > li:nth-child( -n + 5 ) > a{
		padding-left : calc( 13 * 100% / 640 );
		height : calc( 122 * 100vw / 768 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header nav > ul > li:nth-child( -n + 5 ) > span{
		padding-left : calc( 13 * 100% / 640 );
		height : calc( 122 * 100vw / 768 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header nav ul ul{
		margin-bottom : calc( 40.5 * 100vw / 768 );
	}
	#header nav ul ul a{
		padding-left : calc( 120 * 100% / 640 );
		padding-top : calc( 32.5 * 100vw / 768 );
		padding-bottom : calc( 32.5 * 100vw / 768 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header nav > ul > li:nth-child( n + 6  ) a{
		width : 100%;
		height : calc( 128 * 100vw / 768 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
	}
	#header nav > ul > li:nth-child( 6){
		margin-top : calc( 14 * 100vw / 768 );
	}
	#header nav > ul > li:nth-child( 7){
		border : solid calc( 3 * 100vw / 768 ) #fff;
		margin-top : calc( 16 * 100vw / 768 );
	}
	#header #btnClose{
		width : calc( 103 * 100% / 720 );
		display : block;
		margin : calc( 60 * 100vw / 768 ) auto 0;
	}
}
@media(min-width: 769px) and (max-width:1079px){
	#header nav > ul > li{
		-ms-flex-negative : 0;
		flex-shrink : 0;
	}
}
@media(min-width: 769px){
	#header .wrap{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		height : 104px;
	}
	#header h1{
		width : 216px;
		-ms-flex-negative : 0;
		flex-shrink : 0;
	}
	#header #navs{
		margin-left : 37px;
	}
	#header .nav-wrap{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header nav > ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	#header nav ul a{
		font-size : 14px;
	}
	#header nav > ul > li:nth-child( -n + 5 ) > a{
		padding : 9px 18px 7px;
		border-bottom : solid 2px transparent;
		display : block;
	}
	#header nav > ul > li:nth-child( -n + 5 ) > a.is-current , #header nav > ul > li:nth-child( -n + 5 ) > a:hover{
		border-bottom-color : #0081cc;
	}
	#header nav > ul > li > span{
		padding : 9px 18px 7px;
		border-bottom : solid 2px transparent;
		display : block;
		font-size : 14px;
		cursor : pointer;
	}
	#header nav > ul > li > span.is-current , #header nav > ul > li > span:hover{
		border-bottom-color : #0081cc;
	}
	#header nav ul li:nth-child( n + 6 ) a{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
		width : 139px;
		height : 42px;
	}
	#header nav ul li:nth-child( n + 6 ) a:hover{
		opacity : .8;
		-webkit-transition : opacity .3s ease-in;
		        transition : opacity .3s ease-in;
	}
	#header nav ul li:nth-child( 6){
		margin-left : 11px;
	}
	#header nav ul li:nth-child( 7){
		margin-left : 11px;
	}
	#header nav ul li:nth-child( 7 ) a{
		border : solid 1px #999;
		color : #0d0c0c;
	}
	#header ul ul{
		max-height : 0;
		overflow : hidden;
		-webkit-transition : max-height , .3s ease-in;
		        transition : max-height , .3s ease-in;
	}
	#header .tapHover{
		position : relative;
	}
	#header .tapHover > ul{
		position : absolute;
		top : calc( 100% + 1px );
		background-color : #333;
		padding : 0 10px;
		width : 240px;
		left : 0;
	}
	#header .tapHover > ul > li:first-of-type{
		margin-top : 5px;
	}
	#header .tapHover > ul > li:last-of-type{
		margin-bottom : 5px;
	}
	#header .tapHover > ul > li:not(:first-child){
		border-top : solid 1px #fff;
		margin-top : 4px;
	}
	#header .tapHover > ul > li:not(:first-child) a{
		margin-top : 4px;
	}
	#header .tapHover > ul a{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		font-size : 14px;
		color : white;
		height : 40px;
		padding-left : 4px;
	}
	#header .tapHover > ul a:hover{
		background-color : #555;
	}
	#header .tapHover .is-dropdown + ul{
		max-height : 109px;
	}
}
@media(min-width: 769px){
	.pc #header .tapHover:hover ul{
		max-height : 109px;
	}
}
/*--------------------------------------------
SUB
---------------------------------------------*/
#sub p{
	color : #2a2a2a;
	letter-spacing : .1em;
}
@media(max-width: 768px){
	#sub .wrap{
		padding-top : calc( ( 68 - 4 ) * 100vw / 768 );
		padding-bottom : calc( ( 21 - 4 ) * 100vw / 768 );
	}
	#sub p{
		font-size : calc( 24 * 100vw / 768 );
		line-height : calc( 32 * 100vw / 768 );
		padding-left : calc( 3 * 100% / 720 );
	}
}
@media(min-width: 769px) and (max-width:1079px){
	#sub{
		width : 1080px;
	}
}
@media(min-width: 769px){
	#sub .wrap{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
		height : 109px;
	}
	#sub p{
		font-size : 16px;
		text-align : center;
	}
}
/*--------------------------------------------
SIDEBAR
---------------------------------------------*/
#sidebar h4 , #sidebar a , #sidebar time , #sidebar p{
	letter-spacing : .1em;
}
#sidebar h4{
	color : #333;
}
#sidebar ol a{
	display : block;
}
#sidebar ol time{
	color : #008cd6;
	display : block;
}
#sidebar .latest h5{
	color : #333;
}
@media(max-width: 768px){
	#sidebar{
		padding-bottom : calc( ( 65 - 7.5 ) * 100vw / 768 );
	}
	#sidebar h4{
		text-align : center;
		font-size : calc( 40 * 100vw / 768 );
		margin-bottom : calc( ( 42 - 24 ) * 100vw / 768 );
	}
	#sidebar h4:after{
		content : "";
		display : block;
		margin-left : auto;
		margin-right : auto;
		width : calc( 500 * 100vw / 768 );
		height : calc( 6 * 100vw / 768 );
		margin-top : calc( 19 * 100vw / 768 );
		background-color : #0097e0;
	}
	#sidebar ol:not(:last-of-type){
		margin-bottom : calc( ( 90 - 7.5 ) * 100vw / 768 );
	}
	#sidebar ol li{
		position : relative;
		margin-left : calc( 24 * 100% / 768 );
		margin-right : calc( 24 * 100% / 768 );
	}
	#sidebar ol li a{
		padding-top : calc( ( 24 - 7.5 ) * 100vw / 768 );
		padding-bottom : calc( ( 24 - 7.5 ) * 100vw / 768 );
	}
	#sidebar ol li:not(:first-child):after{
		content : "";
		display : block;
		position : absolute;
		left : 0;
		top : 0;
		background-image : -webkit-gradient( linear , right top, left top , from(#ccc) , color-stop(50%, #ccc) , color-stop(50%, transparent) , to(transparent) );
		background-image : linear-gradient( to left , #ccc , #ccc 50% , transparent 50% , transparent 100% );
		width : 100%;
		background-size : calc( 12 * 100vw / 768 ) calc( 2 * 100vw / 768 );
		height : calc( 2 * 100vw / 768 );
	}
	#sidebar time{
		font-size : calc( 30 * 100vw / 768 );
		line-height : 1.5;
	}
	#sidebar h5{
		font-size : calc( 30 * 100vw / 768 );
		line-height : 1.5;
	}
	#sidebar .archive a , #sidebar .category a{
		font-size : calc( 30 * 100vw / 768 );
		line-height : 1.5;
	}
}
@media(min-width: 769px){
	#sidebar {
		padding-top: 6px;
	}
	#sidebar h4{
		font-size : 20px;
		padding-bottom : 13px;
		padding-left : 6px;
		border-bottom : solid 4px #008cd6;
		margin-bottom : 27px;
	}
	#sidebar ol{
		margin-bottom : 43px;
	}
	#sidebar ol li{
		border-bottom : dotted 1px rgba( 0 , 0 , 0 , .7 );
	}
	#sidebar ol li:not(:first-child) a{
		padding-top : calc( 16px - 1.6px );
	}
	#sidebar ol a{
		padding-bottom : calc( 16px - 1.6px );
		padding-left : 6px;
		padding-right : 6px;
		font-size : 16px;
		line-height : 1.2;
	}
	#sidebar .search{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	#sidebar .search input[type="text"]{
		padding-left : 1em;
		width : 270px;
		height : 51px;
		background-color : #e6e6e6;
		border : 0;
	}
	#sidebar .search input[type="submit"]{
		width : 65px;
		height : 51px;
		border : 0;
		background: url(../images/search.svg) no-repeat center / 40% ;
		background-color: #666;
		cursor:  pointer;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	color : #fff;
}
#footer a{
	color : #fff;
	display : block;
}
#footer p{
	text-align : center;
	letter-spacing : .1em;
}
@media(max-width: 768px){
	#footer{
		position : relative;
	}
	#footer .toTop{
		width : calc( 97 * 100vw / 768 );
		height : calc( 97 * 100vw / 768 );
		background-color : #0097e0;
		position : absolute;
		right : 0;
		bottom : 100%;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
	}
	#footer .toTop span{
		width : 0;
		height : 0;
		border-style : solid;
		border-width : 0 calc( 12 * 100vw / 768 ) calc( 20 * 100vw / 768 ) calc( 12 * 100vw / 768 );
		border-color : transparent transparent #fff transparent;
	}
	#footer .wrap{
		background-color : #0097e0;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
		height : calc( 148 * 100vw / 768 );
	}
	#footer p{
		font-size : calc( 24 * 100vw / 768 );
	}
}
@media(min-width: 769px) and (max-width:1079px){
	#footer{
		width : 1080px;
	}
}
@media(min-width: 769px){
	#footer{
		background-color : #0081cc;
	}
	#footer .wrap{
		padding-top : 21px;
		padding-bottom : 80px;
	}
	#footer .box{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		height : 165px;
	}
	#footer .box:before{
		content : "";
		display : block;
		height : 100%;
		width : 1px;
		background-color : white;
		-webkit-box-ordinal-group : 3;
		-ms-flex-order : 2;
		order : 2;
	}
	#footer .box h2{
		-webkit-box-ordinal-group : 2;
		-ms-flex-order : 1;
		order : 1;
		margin-left : 38px;
		margin-right : 61px;
		margin-top : 53px;
	}
	#footer .box > ul{
		-webkit-box-ordinal-group : 4;
		-ms-flex-order : 3;
		order : 3;
		margin-left : 97px;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : start;
		-ms-flex-align : start;
		align-items : flex-start;
		margin-top : 42px;
	}
	#footer .box > ul a{
		font-size : 14px;
		letter-spacing : .1em;
	}
	#footer .box > ul > li:nth-child(2){
		margin-left : 74px;
	}
	#footer .box > ul > li:nth-child(3){
		margin-left : 95px;
	}
	#footer .box > ul > li > ul > li:not(:first-child) a{
		margin-top : 18px;
	}
	#footer .box > ul ul ul a{
		margin-top : 18px;
		padding-left : 1.25em;
	}
	#footer .box > ul ul ul a:before{
		content : "+";
	}
	#footer p{
		font-size : 13px;
		margin-top : 74px;
	}
}