@charset "utf-8";
/* ================================================================ */
/*  フォントサイズ																									*/
/* ================================================================ */
/*
	Copyright (c) 2010, Yahoo! Inc. All rights reserved.
	Code licensed under the BSD License:
	http://developer.yahoo.com/yui/license.html
	version: 2.8.1
*/

/*  body  */
body{
/*	font:62.5%/1.231 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif ;*/
	font: 14px/1.6 Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.4rem;
	color: #202020 ;
	margin:0;
	overflow:visible;
	padding:0;
}

/*  フォーム関連  */
select,
input,
button,
textarea,
button{
	font:99% arial,helvetica,clean,sans-serif;
}

/*  テーブル  */
table{
	font-size:inherit;
	font:100%;
}

pre,
code,
kbd,
samp,
tt{
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

/* ================================================ */
/*  Base																						*/
/* ================================================ */

/*++++++++++++++++++++++++++
	Link : Text
++++++++++++++++++++++++++*/
a{ 				text-decoration:none ; }
a:link{ 	text-decoration:none ; }
a:visited{text-decoration:none ; }
a:hover{ 	text-decoration:none ; }
a:active {text-decoration:none ; }


/*++++++++++++++++++++++++++
	Link : Img
++++++++++++++++++++++++++*/
/*  PC  */
@media screen and (min-width: 641px){
	a:hover img {
		filter: alpha(opacity=75);
		-moz-opacity:0.75;
		opacity:0.75;
	}
	a:hover{
		filter: alpha(opacity=75);
		-moz-opacity:0.75;
		opacity:0.75;
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#199cdc', endColorstr='#0175c1', GradientType=0)";
	}

	/* hover */
	.hoverA,
	a.hoverA{
		text-decoration:none ;
		-webkit-transition: background-color 0.4s linear;
		-moz-transition: background-color 0.4s linear;
		-o-transition: background-color 0.4s linear;
		transition: background-color 0.4s linear;
	
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	}
}



/*++++++++++++++++++++++++++
	SP : Only
++++++++++++++++++++++++++*/
/*  PC  */
.sp{ display:none ; }

/*  SP  */
@media screen and (max-width: 64px){
	.sp{ display:block ; }
}



/*++++++++++++++++++++++++++
	Text Align
++++++++++++++++++++++++++*/
.alignL { text-align: left ; }
.alignC { text-align: center ; }
.alignR { text-align: right ; }



/*++++++++++++++++++++++++++
	Font
++++++++++++++++++++++++++*/
.small{ font-size: 0.9em; }
.big	{ font-size: 1.16em; }
.bold	{ font-weight: bold; }



/*++++++++++++++++++++++++++
	Color
++++++++++++++++++++++++++*/
/*  フォント色  */
.red	{ color:#FF0000 ;}
.gray	{ color:gray ;}
.green{ color:#4daf38 ;}


/*++++++++++++++++++++++++++
	Float
++++++++++++++++++++++++++*/
.floatL { float: left; }
.floatR { float: right; }



/* ================================================ */
/*  レイアウト																			*/
/* ================================================ */

/*	Body
------------------------------------------------------*/
body{
	width:100% ;
	-webkit-text-size-adjust: 100%;
	padding: 0 25px ;
	box-sizing: border-box ;
}

@media screen and (max-width:767px ){
}


/*	Header
------------------------------------------------------*/
header{
	position: relative ;
	width:100% ;
	max-width: 1000px ;
	margin: 0 auto ;
	min-height: 80px ;
	max-height: 90px ;
	background-image: url(../images/header_bgs.jpg) ;
	background-position: right bottom ;
	background-repeat: no-repeat ;
	background-size: cover ;
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff', GradientType=1)";
}

	header:before {
		position: absolute;
		display: block;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.90, #ffffff) ,color-stop(0.80, rgba(255, 255, 255, 0.9)) ,color-stop(0.55, rgba(255, 255, 255, 0.5)) ,color-stop(0.25, rgba(255, 255, 255, 0)));
		background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 55%,rgba(255, 255, 255, 0.9) 80%,#ffffff 95%, #ffffff 100%);
		background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 55%,rgba(255, 255, 255, 0.9) 80%,#ffffff 95%,#ffffff 100%);
		background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 25%,rgba(255, 255, 255, 0.5) 55%,rgba(255, 255, 255, 0.9) 80%,#ffffff 95%,#ffffff 100%);
		background: -ms-linear-gradient(right, rgba(255, 255, 255, 0) 25%,rgba(255, 255, 255, 0.5) 55%,rgba(255, 255, 255, 0.9) 80%, #ffffff 95%,#ffffff 100%);
		background: linear-gradient(right ,rgba(255, 255, 255, 0) 25%,rgba(255, 255, 255, 0.5) 55%,rgba(255, 255, 255, 0.9) 80%,#ffffff 95%, #ffffff 100%);
	}

	header section{
		position: relative ;
		max-width: 1000px ;
		margin: 0 auto ;
		padding: 15px 0 ;
		box-sizing:border-box ;
		z-index: 100 ;
	}

		header section h1{
			width: 100% ;
			text-align: left ;
			margin: 0 0 5px 0 ;
		}

		header section h1 img{
			max-width: 105px ;
			max-height: 38px ;
		}

		header section h2{
			width: 100% ;
			text-align: left ;
			font-size: 1.5rem ;
			font-weight: bold ;
			line-height: 1.2 ;
		}

@media screen and (max-width:767px ){
	header{
		min-height: 80px ;
		max-height: 90px ;
	}

		header:before {
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.85, #ffffff) ,color-stop(0.75, rgba(255, 255, 255, 0.9)) ,color-stop(0.50, rgba(255, 255, 255, 0.5)) ,color-stop(0.30, rgba(255, 255, 255, 0)));
			background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.9) 75%,#ffffff 85%, #ffffff 100%);
			background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.9) 75%,#ffffff 85%,#ffffff 100%);
			background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 30%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.9) 75%,#ffffff 85%,#ffffff 100%);
			background: -ms-linear-gradient(right, rgba(255, 255, 255, 0) 30%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.9) 75%, #ffffff 85%,#ffffff 100%);
			background: linear-gradient(right ,rgba(255, 255, 255, 0) 30%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0.9) 75%,#ffffff 85%, #ffffff 100%);
		}

		header section{

			max-width: 100% ;
		}
}

/*	Main
------------------------------------------------------*/
main{
	max-width: 1000px ;
	margin: 0 auto ;
	padding: 45px 0 ;
	box-sizing: border-box ;
	overflow: hidden ;
}

	main #tab{
		display: none ;
		width: 100% ;
		margin: 0 auto 25px auto ;
	}

		main #tab ul{
			width: 100% ;
			display: table ;
			border-top: 1px solid #ccc ;
			border-bottom: 1px solid #ccc ;
		}

			main #tab ul li{
				display: table-cell ;
				vertical-align: middle ;
				width: 50% ;
				text-align:center ;
				font-size:1rem ;
			}

				main #tab ul li a{
					display: block ;
					padding: 7px 0 ;
					color: #333333 ;
					box-sizing: border-box ;
					border-left: 1px solid #ccc ;
				}
				main #tab ul li a.active,
				main #tab ul li a:hover{
					background:#0C5598 ;
					color: #ffffff ;
				}

				main #tab ul li:last-child a{
					border-right: 1px solid #ccc ;
				}

	main nav{
		display: block ;
		width: 100%;
	}

	#ja main nav,
	#JA main nav{
		display: block ;
		width: 54%;
		float: left ;
	}

		main nav ul{	}
		main nav ul li{
			list-style: none ;
			margin:0 auto 15px auto ;
		}

			main nav ul li p{
				margin: 0 auto 5px auto ;
				font-size: 1rem ;
			}

			main nav ul li a{
				width: 100% ;
				display: block ;
				padding: 15px 0 ;
				text-align: center ;
				font-weight: bold ;
				font-size: 1rem ;
				color: #ffffff ;
				border-radius:3px ;
				word-break: break-all ;
				background: #199cdc;
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0.99, #236e58), color-stop(0.00, #45c39e));
				background: -webkit-linear-gradient(top, #45c39e 0%, #236e58 99%);
				background: -moz-linear-gradient(top, #45c39e 0%, #236e58 99%);
				background: -o-linear-gradient(top, #45c39e 0%, #236e58 99%);
				background: -ms-linear-gradient(top, #45c39e 0%, #236e58 99%);
				background: linear-gradient(to bottom, #45c39e 0%, #236e58 99%);
				-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#45c39e', endColorstr='#236e58', GradientType=0)";
			}

			main nav ul li.orig a{
				background: #199cdc;
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0.99, #c07806), color-stop(0.00, #f8ac34));
				background: -webkit-linear-gradient(top, #f8ac34 0%, #c07806 99%);
				background: -moz-linear-gradient(top, #f8ac34 0%, #c07806 99%);
				background: -o-linear-gradient(top, #f8ac34 0%, #c07806 99%);
				background: -ms-linear-gradient(top, #f8ac34 0%, #c07806 99%);
				background: linear-gradient(to bottom, #f8ac34 0%, #c07806 99%);
				-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ac34', endColorstr='#c07806', GradientType=0)";
			}

	main #howto{
		display: block ;
		width: 43% ;
		float: right ;
	}

		main #howto h3{
			margin: 0 auto 0 auto ;
			font-size: 1rem ;
			font-weight: bold ;
			padding: 12px 0 11px 13px ;
			border: 1px solid #ccc ;
			border-bottom: none ;
			background:#F0F0F0 ;
			box-sizing: border-box ;
		}

		main #howto ul{
			width: 100% ;
			height: 286px;
			padding: 15px 20px 0 10px ;
			box-sizing: border-box ;
			overflow-y: scroll ;
			border: 1px solid #ccc ;
		}

			main #howto ul li{
				width: 100% ;
				display: table ;
				list-style: none ;
				margin: 0 auto 15px auto ;
				border-bottom: 1px dotted #ccc ;
				padding-bottom: 10px ;
				overflow: hidden ;
			}

			main #howto ul li:last-child{
				border-bottom: none ;
			}

				main #howto ul li span{
					display:table-cell;
					width: 110px ;
					font-size: 1rem ;
					text-align:left ;
					text-indent: 5px ;
				}

				main #howto ul li p{
					display:table-cell;
					font-size: 1rem ;
					word-break: break-all ;
				}


@media screen and (max-width:767px ){
	main{
		max-width: 100% ;
		padding: 25px 0 ;
	}

	#ja main,
	#JA main{
		padding: 0 0 25px ;
	}

		main #tab{
			display: block ;
		}

		main nav,
		#ja main nav,
		#JA main nav{
			width: 100% ;
			float: none ;
			margin: 0 auto ;
		}

		main #howto{
			display: none ;
			width: 100% ;
			float: none ;
			margin: 0 auto ;
		}

			main #howto ul{
				height:100% ;
				padding: 10px 10px ;
				overflow-y:auto;
			}

				main #howto ul li span{
					text-align: left ;
				}

				main #howto ul li p{
				}

}



/*	Footer
------------------------------------------------------*/
footer{
	clear: both ;
	width: 100% ;
	max-width: 1000px ;
	margin: 0 auto ;
	padding: 10px 0 ;
	box-sizing: border-box ;
	text-align:center ;
	border-top:1px solid #333 ;
	font-size: 0.6rem
}