@charset "utf-8";
/**************/
/* header.css */
/**************/


#header {
	width: 100%;
}

/*-- ヘッダ タイトルバー --*/

.topbar {
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 12px;
	background: #fdfdfd;
	border-top: solid 1px #f0f0f0;
	border-bottom: solid 1px #f0f0f0;
	box-shadow: 0 0 3.8px 0.1px rgba(0, 0, 0, 0.2);
}
.topbar-title {
	text-align: left;
	color: #999;
}

.top-p {
	text-align: center;
	padding: 1% 0 5px;
}

.main-p {
	margin-bottom: 5px;
	text-align: center;
}


@media only screen and (min-width: 769px) {

	/*-- ヘッダ ロゴ・ログインボタン --*/

	.toplogin {
		display: table;
		width: 100%;
		/*margin: 20px 0;*/
		background: url(../img/mainVisual.jpg) no-repeat 95%;
    	position: relative;
    	height: 304px;
	}
	/*.toplogo,
	.topbtn {
		display: table-cell;
		width: 50%;
		vertical-align: top;
	}*/
	.topsub {
		font-size: 16px;
    	line-height: 1.5;
    	position: absolute;
    	top: 27px;
    	left: 267px;
	}
	.topsub img {
		padding-left: 4%;
	}
	.toplogo {
		position: absolute;
    	top: 26px;
    	left: 55px;
		color: #fff;
    	font-size: 19px;
	}
	.toplogo img {
		padding-top: 6px;
	}
	.topbtn {
		display: none;
		/*position: absolute;
    	top: 19px;
    	right: 19px;*/
	}


	/*-- ヘッダ グローバルナビ --*/
	
	.topnavi {
		width: 100%;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.13);
	}
	.topnavi ul {
		display: table;
		table-layout: fixed;
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
		vertical-align: middle;
	}
	.topnavi ul li {
		display: table-cell;
		font-size: 14px;
		text-align: center;
		vertical-align: middle;
	}
	.topnavi ul li > a {
		display: block;
		width: 100%;
		color: #4f4e4e;
		text-decoration: none;
		padding-top: 8px;
	}
	.topnavi ul li.active > a,
	.topnavi ul li > a:hover {
		border-bottom: solid #da391d 3px;
	}

}


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

	/*-- ヘッダ タイトルバー --*/

	.topbar-title {
		text-align: center;
	}

	/*-- ヘッダ ロゴ・ログインボタン --*/

	.toplogin {
		display: block;
		width: 100%;
		margin: 0 0 20px;
	}
	.toplogo,
	.topbtn {
		display: block;
		width: 100%;
	}
	.toplogo {
		position: absolute;
		top: 29%;
		left: 4%;
	}
	.topsub {
		text-align: center;
		padding-top: 3%;
	}
	.toplogo img {
		height: 37px;
	}
	.topbtn {
		display: none;
		/*float: right;
		padding-right: 5%;
		width: auto;*/
	}
	.main {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 25%;
	}
	.main p img {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
	}
	.topsub {
		position: absolute;
		top: 3%;
		left: 4%;
		font-size: 10px;
    	color: #fff;
	}
	.topsub p {
		font-size: 86%;
    	text-align: left;
	}
	.btn-mananavi {
		font-size: 12px;
	}


	/*-- ヘッダ グローバルナビ --*/

	.topnavi {
		width: 100%;
		height: auto;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.13);
	}
	.topnavi ul {
		margin: 0;
		padding: 0;
		letter-spacing: -1em;
	}
	.topnavi ul li {
		display: inline-block;
		width: 20%;
		font-size: 11px;
		text-align: center;
		border: 1px solid #f1f1f1;
		letter-spacing: normal;
	}
	.topnavi ul li > a {
		display: block;
		padding: 6px 4px;
		color: #687074;
		text-decoration: none;
	}
	.topnavi ul li.active > a,
	.topnavi ul li > a:hover {
		background: #FBD2D3;
	}

}


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

	/*-- ヘッダ タイトルバー --*/

	.topbar {
		font-size: 10px;
	}
	.topbar-title {
		text-align: center;
	}

	/*-- ヘッダ ロゴ・ログインボタン --*/

	.toplogin {
		display: block;
		width: 100%;
		margin: 0 0 15px;
	}
	/*.toplogo,
	.topbtn {
		display: block;
		width: 100%;
	}*/
	.toplogo {
		left: 3%;
    	top: 34%;
	}
	/*.toplogo img {
		width: 40%;
	}*/
	.topbtn {
		/*margin-bottom: 10px;
		text-align: right;*/
		float: right;
		padding-right: 5%;
		width: auto;
	}
	.btn-mananavi {
		font-size: 10px;
	}
	.topsub {
		font-size: 11px;
	}


	/*-- ヘッダ グローバルナビ --*/

	.topnavi {
		width: 100%;
		height: auto;
		border-top: 1px solid #f1f1f1;
		border-bottom: 1px solid #f1f1f1;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.13);
	}
	.topnavi ul {
		margin: 0;
		padding: 0;
		letter-spacing: -1em;
	}
	.topnavi ul li {
		display: inline-block;
		width: 20%;
		font-size: 9px;
		text-align: center;
		border: 1px solid #f1f1f1;
		letter-spacing: normal;
	}
	.topnavi ul li > a {
		display: block;
		padding: 6px 4px;
		color: #687074;
		text-decoration: none;
	}
	.topnavi ul li.active > a,
	.topnavi ul li > a:hover {
		background: #FBD2D3;
	}
	.topnavi ul li > a img {
		width: 80%;
	}
	.top-p {
		font-size: 11px;
	}
	.main-p {
		font-size: 11px;
	}

}