@charset "utf-8";

/* ------------------------------------------------------ *
	header 
 * ------------------------------------------------------ */
#header{	display:block;	width:100%;	min-width: 1200px;	height: 60px;	margin:0 auto;	position: relative;	z-index: +100;}
#header h1 a{	float:left;	display:block;	width:275px;	height:159px;	background:url(../img/logo01.png) no-repeat; background-size:contain;	text-indent:105%;	white-space:nowrap;	overflow:hidden;	position: absolute;	z-index: +10;}
.root #header h1 a{	width:225px;	height:340px;	background-image: url(../img/logo-index.png);}
#header > div{	max-width: 1200px;	margin: 0 auto;}

	@media screen and (max-width:640px){
		#header{	min-width:100%;	margin:0 auto;	padding:0 0;	position:absolute;	left:0;	top:0; z-index:+99;	height:50px;}
		#header.act{	height:100%;	box-sizing:border-box;}
		#header h1 a{	float:left;	display:block;	width:275px;	height:80px;	background:url(../img/logo01.png) no-repeat; background-size:contain;	text-indent:105%;	white-space:nowrap;	overflow:hidden;	position: absolute;}
		.root #header h1 a{	width:113px;	height:170px;	background-image: url(../img/logo-index.png);}


		#nav-switch .inbox div{	margin:30px auto 15px;}
		#nav-switch{	display:block;	float:right;	position: relative;	z-index:+100;	width: 50px;	height: 50px;	overflow: hidden;}
		#nav-switch .inbox{		height:100px;	width:100px;	background:#103A83;	float:right;	text-align:center;	color:#FFF;	font-size:108%;	font-weight:bold;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;	z-index:+100;	-webkit-transform-origin:right top;	transform-origin:right top;	-webkit-transform:scale(.5);	transform:scale(.5);}
			#nav-switch .inbox div{	height:18px;	width:28px;	position:relative;	margin:28px auto 10px;}
			[class^="nav-switch-line"]{	display:block;	height:2px;	width:28px;	background:#FFF;	position:absolute;	left:0;	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;}
			.nav-switch-line01{	top:0px; }
			.nav-switch-line02{	top:8px;}
			.nav-switch-line03{	top:17px;}
			#nav-switch.act .inbox{	background: #FFF;	color: #103A83;}
			.act .nav-switch-line01{	background: #103A83;	-ms-transform: rotate(45deg) translate(5px,7px);	-webkit-transform: rotate(40deg) translate(5px,7px);	transform: rotate(40deg) translate(5px,7px);}
			.act .nav-switch-line02{	opacity:0;}
			.act .nav-switch-line03{	background: #103A83;	-ms-transform: rotate(-45deg) translate(5px,-7px);	-webkit-transform: rotate(-40deg) translate(5px,-7px);	transform: rotate(-40deg) translate(5px,-7px);}
	}
	
/* ------------------------------------------------------ *
	nav
 * ------------------------------------------------------ */
.global-nav{	display:block;	font-weight:bold;	color:#FFF;	float: right;}

@media screen and (min-width:641px){
	.global-nav > div > ul{	margin: 0 auto;	text-align: center;	font-size:118.1%;	letter-spacing: -.4em;}
		.global-nav > div > ul > li{		display:inline-block;	vertical-align: middle;	margin: 0 0 0 10px;	letter-spacing: normal;}
		.global-nav > div > ul > li > a{	display:block;	color: #103A83;	height:36px;	line-height:36px;	padding: 0 10px;	border-radius: 5px;}
		.global-nav .entry{	margin-left: 20px;}
		.global-nav .entry > a{	height: 60px;	line-height: 60px;	padding: 0 40px;	background: #FFD446;	color: #FFFFFF;	border-radius: 0;	font-size: 150%;}
		.global-nav > div > ul > li:hover > a,
		.global-nav > div > ul > li > a:hover{	background: #103A83;	color: #FFFFFF;}

	.below{	position: absolute;	left: 0;	top: 60px;	width: 100%;	transform: scale(1,0);	transition:transform .3s ease-in-out;	transform-origin: center top;}
	.below > div{		background: #103A83;}
	.below  ul{		padding: 30px 0 30px 305px;	width: 895px;	margin:  0 auto ;	text-align: left;}
	.below  ul li{	width: 235px;	font-size: 85%;	margin-right: 30px;}
/*	.below  ul li:nth-child(3n) ~ li{	margin-top: 15px;}*/
	.below  ul li:nth-child(2n) ~ li:nth-child(3n){	margin-bottom: 25px;}
	.below  ul li img{	margin-bottom: .3em;}
	.below  ul li.head{	width:680px;clear:both;}
	li:hover .below,
	a:hover + .below,
	.below:hover{		transform: scale(1,1);}
}

@media screen and (max-width:640px){
.global-nav{	display:block;	padding:60px 10px 60px;	width:100%;	height:auto;	margin:0 auto 0;	background:#103A83;	-webkit-box-sizing:border-box;	box-sizing:border-box;	position:absolute;	top:0;	left:0;	overflow:auto; -webkit-overflow-scrolling: touch;	-webkit-transform-origin:right top;	transform-origin:right top;	-webkit-transform:scaleY(0);	transform:scaleY(0);	-webkit-transition:all ease-in-out 0.2s;	transition:all ease-in-out 0.2s;	text-align: center;}
.global-nav.act{	-ms-transform:scaleY(1);	-webkit-transform:scaleY(1);	transform:scaleY(1);	z-index:+10;}
.global-nav > div{	display:block;	height: inherit;	vertical-align: middle;}
	.global-nav > div > ul > li {	clear:both;	display: block;		width: 100%;	margin-top: 20px;	font-size:138.5%;}
	.global-nav > div > ul > li > a {	display: block;	margin-bottom: 20px;}
	.global-nav .below {font-size:60%;}
	.below  ul li.head{	width:100%!important;}
	.sp-entry-bnr li:nth-child(2){	float:left!important;margin-top: 10px!important;}
	.sp-entry-bnr li:nth-child(3){	float:right!important;clear:none!important;}
}

/* ------------------------------------------------------ *
	contents
 * ------------------------------------------------------ */
#main{ display:block;	margin:0 auto;	position:relative;	overflow:hidden;	min-width: 1280px;}
	#main:after{	content:"";	display:table;	clear:both;}
.inner01{	max-width:1200px;	margin:0 auto;}
.inner02{	max-width:1000px;	margin:0 auto;}
article,
section{	display:block;}
article::after{	content:"";	display:table;	clear:both;}


#totop{		position:relative;	z-index:100;	display:block;	height:100px;	transition:opacity .2s linear;	background:#103A83;	text-indent: 105%;	white-space: nowrap;	overflow: hidden;}
	#totop::after{	content: "";	display:block;	width:0;	height:0;	border:solid 17px #103A83;	border-bottom-color:#FFFFFF;	margin:10px auto;}


	@media screen and (max-width:640px){
		#main{	margin: 0 auto 0;	padding: 0 0;	min-width: 320px;}
		.inner01{	padding: 0 20px;}
		.inner02{	margin:0 20px;}
		#totop{	height:50px;	}
			#totop::after{	margin:-5px auto;	border-width: 10px;}
	}
	@media screen and (max-width:374px){
		.inner01{	padding: 0 10px;}
		.inner02{	margin:0 10px;}
	}
/* ------------------------------------------------------ *
	pager
 * ------------------------------------------------------ */
#breadcrumbs{	width:100%; text-align: center;}
	#breadcrumbs li{	display:inline-block;	list-style:none;	font-size:93%;	letter-spacing:normal;	margin:0;}
	#breadcrumbs li+li:before{	content:">";	margin:0 .1em;}
	@media screen and (max-width:640px){
		#breadcrumbs::after{	content:"";	display:table;	clear:both;}
		#breadcrumbs li{	font-size:85%;	line-height:1.2em;}
	}

/* ------------------------------------------------------ *
	footer
 * ------------------------------------------------------ */
#footer{	display:block;	min-width: 1200px;	clear:both;	padding:20px 0;	background:#EEEEEE;	text-align: right;}
#footer > div{	max-width: 1200px;	margin: 0 auto;}
#footer a{	display: inline-block;	background: url(../img/icon-blank01.png) 0 center no-repeat;	background-size: 14px;	padding-left: 1.5em;	text-decoration: underline;}
#copyright{	display: block;	font-size:93%;	font-weight:bold;	padding-top: .2em;}

	@media screen and (max-width:640px){
		#footer{	padding:30px 0 10px;	margin-top:0;	min-width: 320px;	text-align: center;}
		#footer h1{	margin-bottom: 10px;}
		#copyright{	font-size:85%;	padding: 30px 0 0;}
}