@charset "utf-8";
@import url("../css/navi.css");

.clearfix:after {
	content				: "" ;
	display				: block ;
	clear				: both ;
}

.clearfix	{
	display				: block ;
}

/* Hides from IE-mac \*/
* html .clearfix { height : 1% ; }
/* End hide from IE-mac */

html	{
	background		: none ;
	position		: relative ;
	width			: 100% ;
	height			: 100% ;
	margin: 0;
	padding: 0;
}

body	{
	width	: 100% ;
	height	: 100% ;
	padding	: 0 ;
	margin	: 0 ;
	font-family: 'Noto Sans JP', sans-serif;
	font-size	: 16px ;
	font-weight	: 400 ;
	line-height	: 1.5;
	color	: #222222;
	-webkit-text-size-adjust: 100%;
	position: relative ;
	overflow-x: hidden;
	background-color: #fff;
}

a img	{
	border			: none ;
}

a:hover img{
}

a	{
	color: #000;
	text-decoration	: none ;
}

a:hover{
	color: #000;
	text-decoration	: none ;
}

form{
	margin			: 0 ;
	padding			: 0 ;
}


.visi_text{
	visibility		: hidden ;
}


/*************************ヘッダー*************************/
.header{
	width: 100%;
	height: 100px;
	z-index: 10;
	border-bottom: solid 1px #0071bc;
	margin: 0 0 9px;
}

.head_box{
	width: 90%;
	height: 100px;
	margin: 0 auto;
}

.head{
	width: 100%;
	height: 100px;
	display: inline-block;
	position: relative;
}

.logo h1{
	width: 300px;
	height: 56px;
	position: absolute;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	z-index: 5;
	background-color: #fff;
}
.logo h1 img{
	width: 100%;
	height: auto;
	margin: 20px;
}

.menu_box{
	width: 860px;
	padding: 30px 0 0;
	height: 50px;
	float: right;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

.menu01{
	font-size: 16px;
	text-align: center;
}
.menu01 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu01 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu01 a:hover::after {
	transform: scale(1, 1);
}

.menu02{
	font-size: 16px;
	text-align: center;
}
.menu02 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu02 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu02 a:hover::after {
	transform: scale(1, 1);
}

.menu03{
	font-size: 16px;
	text-align: center;
}
.menu03 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu03 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu03 a:hover::after {
	transform: scale(1, 1);
}

.menu04{
	font-size: 16px;
	text-align: center;
}
.menu04 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu04 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu04 a:hover::after {
	transform: scale(1, 1);
}

.menu05{
	font-size: 16px;
	text-align: center;
}
.menu05 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu05 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu05 a:hover::after {
	transform: scale(1, 1);
}

.menu06{
	font-size: 16px;
	text-align: center;
}
.menu06 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu06 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu06 a:hover::after {
	transform: scale(1, 1);
}

.menu07{
	font-size: 16px;
	text-align: center;
}
.menu07 a{
	width: 100%;
	font-weight: 500;
	position: relative;
	padding: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: #222;
}
.menu07 a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 20px;
	background-image: linear-gradient(transparent 50%, #ffb000 50%);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	z-index: -10;
}
.menu07 a:hover::after {
	transform: scale(1, 1);
}



/****メインコンテンツ****/
.maincontent{
	width: 720px;
	margin: 0 auto 150px;
	position: relative;
	z-index: 1;
}
.maincontent02{
	width: 100%;
	padding: 100px 0 0;
	position: relative;
	z-index: 1;
}

/* ボタンの共通CSS */
.btn {
	margin-top: 30px;
	text-align: center;
}
.btn a {
	background-color: #fff;
	border: 1px solid #0071bc;
	border-radius: 5px;
	color: #0071bc;
	display: inline-block;
	font-size: 16px;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
	width: 180px;
	font-weight: 700;
}
/* 通常の矢印(hoverで反転) */
.btn a {
	transition: all .5s;
}
.btn a::before {
	border-right: 3px solid #0071bc;
	border-top: 3px solid #0071bc;
	bottom: 0;
	content: "";
	height: 10px;
	margin: auto;
	position: absolute;
	right: 20px;
	top: 0;
	transform: rotate(45deg);
	transition: all .5s; 
	width: 10px;
}
.btn a:hover {
	background-color: #0071bc;
	color: #fff;
	border: 2px solid #0071bc;
}
.btn a:hover::before {
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
}




.btn02 {
	margin: 0 auto 150px;
	text-align: center;
}
.btn02 a {
	background-color: #fff;
	border: 2px solid #0071bc;
	border-radius: 5px;
	color: #0071bc;
	display: inline-block;
	font-size: 16px;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
	width: 180px;
	font-weight: 700;
}
/* 通常の矢印(hoverで反転) */
.btn02 a {
	transition: all .5s;
}
.btn02 a::before {
	border-right: 3px solid #0071bc;
	border-top: 3px solid #0071bc;
	bottom: 0;
	content: "";
	height: 10px;
	margin: auto;
	position: absolute;
	left: 20px;
	top: 0;
	transform: rotate(-135deg);
	transition: all .5s; 
	width: 10px;
}
.btn02 a:hover {
	background-color: #0071bc;
	color: #fff;
	border: 2px solid #0071bc;
}
.btn02 a:hover::before {
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
}





/****パンくず****/
.plist_area{
	width: 100%;
	border-top: solid 1px #0071bc;
	background-color: #d9eaf5;
	padding: 10px;
	margin: 0 0 100px;
}

.plist_box{
	width: 900px;
	margin: 0 auto;
	text-align: right;
}

.plist{
	font-size: 14px;
	color: #222;
}
.plist span{
	color: #abd0e9;
}

/****foot****/
.footer{
	width: 100%;
	padding: 0 0 10px;
}

.foot{
	width: 100%;
	padding: 10px 0;
	margin: 0 0 40px;
	background-color: #0071bc;
}

.foot_area{
	width: 900px;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

.foot_menu{
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}
.foot_menu a{
	color: #fff;
}

.foot_logo{
	width: 300px;
	height: 56px;
	margin: 0 auto 40px;
}
.foot_logo img{
	width: 300px;
	height: 56px;
}

.copy{
	width: 100%;
	padding: 8px 0;
	text-align: center;
	font-size: 10px;
	color: #0071bc;
}

@media screen and (min-width: 1150px) {
/*　画面サイズが1150pxからはここを読み込む　*/

.sp_head{
	display: none !important;
}
.sp_loge{
	display: none;
}
.sp_loge02{
	display: none;
}

.sp_br{
	display: none;
}

.sp_inst{
	display: none;
}

.inst_img_sp{
	display: none;
}

.sougo_bnr_sp{
	display: none;
}

.art_bnr_sp{
	display: none;
}

}

@media screen and (max-width: 1149px) {
/* 1149pxまでの幅の場合に適応される */
/*************************ヘッダー*************************/
.sp_head{
	width: 100%;
	height: 75px;
	z-index: 10;
	border-bottom: solid 1px #0071bc;
	margin: 0 0 9px;
}
.sp_loge{
	width: 225px;
	height: 42px;
	padding: 15px 0 0 20px;
}
.sp_loge img{
	width: 225px;
	height: 42px;
}

.sp_loge02{
	width: 225px;
	height: 42px;
	padding: 15px 0 0 20px;
}
.sp_log02e img{
	width: 225px;
	height: 42px;
}


.header{
	display: none;
}

.head_box{
	display: none;
}

.head{
	display: none;
}

/****メインコンテンツ****/
.maincontent{
	width: 90%;
	margin: 0 auto 80px;
	position: relative;
	z-index: 1;
}
.maincontent02{
	width: 100%;
	padding: 100px 0 0;
	position: relative;
	z-index: 1;
}

/* ボタンの共通CSS */
.btn {
	margin-top: 30px;
	text-align: center;
}
.btn a {
	background-color: #fff;
	border: 2px solid #0071bc;
	border-radius: 5px;
	color: #0071bc;
	display: inline-block;
	font-size: 16px;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
	width: 180px;
	font-weight: 700;
}
/* 通常の矢印(hoverで反転) */
.btn a {
	transition: all .5s;
}
.btn a::before {
	border-right: 3px solid #0071bc;
	border-top: 3px solid #0071bc;
	bottom: 0;
	content: "";
	height: 10px;
	margin: auto;
	position: absolute;
	right: 20px;
	top: 0;
	transform: rotate(45deg);
	transition: all .5s; 
	width: 10px;
}
.btn a:hover {
	background-color: #0071bc;
	color: #fff;
	border: 2px solid #0071bc;
}
.btn a:hover::before {
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
}




.btn02 {
	margin: 0 auto 150px;
	text-align: center;
}
.btn02 a {
	background-color: #fff;
	border: 2px solid #0071bc;
	border-radius: 5px;
	color: #0071bc;
	display: inline-block;
	font-size: 16px;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
	width: 180px;
	font-weight: 700;
}
/* 通常の矢印(hoverで反転) */
.btn02 a {
	transition: all .5s;
}
.btn02 a::before {
	border-right: 3px solid #0071bc;
	border-top: 3px solid #0071bc;
	bottom: 0;
	content: "";
	height: 10px;
	margin: auto;
	position: absolute;
	left: 20px;
	top: 0;
	transform: rotate(-135deg);
	transition: all .5s; 
	width: 10px;
}
.btn02 a:hover {
	background-color: #0071bc;
	color: #fff;
	border: 2px solid #0071bc;
}
.btn02 a:hover::before {
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
}





/****パンくず****/
.plist_area{
	width: calc( 100% - 20px );
	border-top: solid 1px #0071bc;
	background-color: #d9eaf5;
	padding: 10px;
	margin: 0 0 100px;
}

.plist_box{
	width: 100%;
	margin: 0 auto;
	text-align: right;
}

.plist{
	font-size: 14px;
	color: #222;
}
.plist span{
	color: #abd0e9;
}

/****foot****/
.footer{
	width: 100%;
	padding: 0 0 10px;
}

.foot{
	display: none;
}

.foot_area{
	display: none;
}

.foot_menu{
	display: none;
}
.foot_menu a{
	display: none;
}

.foot_logo{
	width: 300px;
	height: 56px;
	margin: 0 auto 40px;
}
.foot_logo img{
	width: 300px;
	height: 56px;
}

.copy{
	width: 100%;
	padding: 8px 0;
	text-align: center;
	font-size: 10px;
	color: #0071bc;
}