/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 24 COLUMN RESPONSIVE GS */
@import url("responsive.gs.24col.css");


/* -----------------------------------------------
		Common Style
 -------------------------------------------------*/
body {
	background-color: #FFFFFF;
	margin-top: 10px;
}

img{
	border: 0px;
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

p {
	margin: 0;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}

strong {
	font-weight: bold;
}

/* ---------------------------
		Page Header Sub Menu
 ----------------------------*/
#headerMenu {
	float: right;
	width: 430px;
	padding-right: 30px;
/*	height: 50px; */
	display:inline-block;
	text-align: right;
}

#headerMenu a {
	color: green;
	font-size: 11pt;
	font-weight: bold;
	text-decoration: none;
}

#headerMenu a:hover {
	text-decoration: underline;
}

#topline {
	background-color: #A50123;
	height: 3px;
}

#topPic {
	width: 100%;
	padding: 1% 0 1% 0;
}


/* ---------------------------
		Navigation Menu
 ----------------------------*/
#nav
{
	width: 990px;
	font-size: 14pt;
	font-weight: bold;
}
	#nav ul
	{
		list-style-type: none;
	}
	#nav li
	{
		position: relative;
		font-size: 14pt;
		font-weight: bold;
		list-style-type: none;
	}
		#nav li a
		{
			color: #fff;
			font-size: 14pt;
			font-weight: bold;
			text-decoration: none;
			display: block;
		}
		#nav li a:active
		{
			background-color: #7C9C5B !important;
		}

	#nav span:after
	{
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-bottom: none;
		border-top-color: #efa585;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		right: 5px;
	}

	/* first level */
	#nav > ul
	{
			height: 32px;
			background-color: #7C9C5B;
	}
		#nav > ul > li
		{
			width: 20%;
			height: 100%;
			float: left;

		font-size: 14pt !important;
		font-weight: bold !important;

			border-left:2px solid #FFFFFF;
			color: #B3B3B3;
			background-color: #598701;
			text-align: center;
			padding-top: 4px;

		}
			#nav > ul > li > a
			{
				height: 100%;
				text-align: center;

		font-size: 14pt !important;
		font-weight: bold !important;

				color: #B3B3B3;
				background-color: #598701;
			}

				#nav > ul > li:not( :last-child ) > a
				{
					border-right: 1px solid #598701;
				}
				#nav > ul > li:hover > a,
				#nav > ul:not( :hover ) > li.active > a
				{
					color: #FFF;
				}

		/* second level */
		#nav li ul
		{
			background-color: #598701;
			display: none;
			position: absolute;
			top: 100%;
		}
			#nav li:hover ul
			{
				display: block;
				left: 0;
				right: 0;
			}
				#nav li:not( :first-child ):hover ul
				{
					left: -1px;
				}
				#nav li ul a
				{
					/*font-size: 1.25em;*/
					border-top: 1px solid #7C9C5B;
					padding: 5px 15px;

				}
					#nav li ul li a:hover,
					#nav li ul:not( :hover ) li.active a
					{
						background-color: #7C9C5B;
					}

/* ---------------------------
		Footer
 ----------------------------*/
#foot {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	margin: auto;
	padding: 0;
	text-align: center;
	font-size: 9pt;
	clear: both;
	border-top: 15px #598701 solid
}

#hiviki {
	font-weight: bold;
	font-size: 12pt;
}


/* -----------------------------------------------
		Style for Content Left / Menu Right Page

			index.html、legal.html、disclaimer.html
 -------------------------------------------------*/

/* ---------------------------
		Left Content
 ----------------------------*/
#leftContents {
	border: 0px;
	padding: 10px 10px 10px 0;
	border-top: 1px #A50123 solid;
	border-right: 1px #A50123 solid;
}

#leftmain {
	background-color: #F3EACB;
	padding: 5px 5px 5px 0;
}

#leftmain>h1 {
	color: #D7BB6C;
	font-weight: bold;
	font-size: 16pt;
	margin-top:25px;
	margin-bottom:15px;
	margin-left: 15%;
	margin-right: 15%;
}

#leftmain>p {
	color: #4E4E4E;
	font-weight: bold;
	font-size: 12pt;
	margin-top:25px;
	margin-bottom:15px;
	margin-left: 15%;
	margin-right: 15%;
}

/* ---------------------------
		Right Menu
 ----------------------------*/
#rightMenu {
	float: right;
	border: 0px;
	padding: 10px 0 10px 10px;
	border-top: 1px #A50123 solid;
	margin-bottom:15px;
}

#sideRightBox {
	background-color: #D5D3B5;
	padding: 5px;
	width: 98%;
	margin: auto;
}

#sideRightBox>li {
	color: #AF060F;
	font-size: 12pt;
	font-weight: bold;
	padding: 5px;
	list-style-type: none;
}

#sideRightBox>li>ul {
	padding: 0px;
	margin: 0px;
	width: 96%;
}

#sideRightBox>li>ul>li {
	list-style: none;
	color: #4E4E62;
	font-size: 12pt;
	padding: 5px 0px;
	margin: 0px;
	text-decoration: none;
	width: 96%;
}

/* ---------------------------
		Donate Icon (Footer)
 ----------------------------*/
#donateBot {
	float: right;
	width: 450px;
	text-align: right;
	margin-bottom: 15px;
}

/* -----------------------------------------------
		Style for Menu Left / Content Right Page

		Except(index.html,legal.html,disclaimer.html)
 -------------------------------------------------*/

/* ---------------------------
		Left Menu
 ----------------------------*/
#leftMenu {
	border: 0px;
	padding: 10px 6px 6px 0;
	border-top: 1px #BB1F40 solid;
	float: left;
	font-size: 11pt;
	font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------
		Boxes on Left Menu
 ----------------------------*/
ul.linkBlack {
	border: 2px solid #4E4E4E;
	color: #4E4E4E;
	list-style-type: none;
	padding: 10px;
	margin: 2px 5px 1px 0;
}

ul.linkBlack li a {
	text-decoration: underline;
	color: #4E4E4E;
}

ul.linkBlack li a:hover {
	text-decoration: none;
}

ul.meritBox {
	border: 2px #009AD9 solid;
	list-style-type: none;
	padding: 10px;
	margin: 5px 5px 1px 0;
}

ul.meritBox li a {
	text-decoration: underline;
	color: #009AD9;
}

ul.meritBox li a:hover {
	text-decoration: none;
}

ul.sponsor {
	color: #5F9C00;
	border: 2px solid #5F9C00;
	list-style-type: none;
	padding: 10px;
	margin: 5px 5px 1px 0;
}

ul.sponsor li a {
	text-decoration: underline;
	color: #5F9C00;
}

ul.sponsor li a:hover {
	text-decoration: none;
	color: #5F9C00;
}

ul.boxContact {
	color: #BB1F40;
	border: 2px solid #5F9C00;
	list-style-type: none;
	padding: 10px;
	margin: 5px 5px 2px 0;
}

ul.boxContact li a {
	text-decoration: underline;
	color: #BB1F40;
}

ul.boxContact li a:hover {
	text-decoration: none;
	color: #BB1F40;
}

/* for SmartPhone Type Display */
#bottomMenu {
	border: 0px;
	padding: 4px 0 4px 0;
	border-top: 1px #BB1F40 solid;
	font-size: 11pt;
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}


/* ---------------------------
		Right Content
 ----------------------------*/
#rightContents {
	width: 100%;
	height: 100%;
	float: right;
	padding: 10px 5px;
	border-top: 1px #BB1F40 solid;
	border-left: 1px #BB1F40 solid;
	margin-bottom:15px;
}

.main {
	padding: 10px 0 10px 10px;
	margin: 0;
	color: #4E4E4E;
}

.main>h1 {
	font-size: 14pt;
	font-weight: bold;
	color: #AF0632;
	background-color: #D5D3B5;
	padding: 10px 0 10px 20px;
	margin: 15px 0px;
}

.main>h2 {
	font-size: 14pt;
	font-weight: bold;
	padding: 10px 0 0 20px;
	color: #AF060F;
	margin: 3px 0 0 0;
}

.main>h3 {
	font-size: 12pt;
	font-weight: bold;
	padding: 10px 0 0 20px;
	color: #AF060F;
	margin: 3px 0 0 0;
}

.main>h4 {
	font-size: 10pt;
	font-weight: bold;
	padding: 10px 0 0 20px;
	color: #008000;
	margin: 3px 0 0 0;
}

.main>p {
	font-size: 10pt;
	font-weight: normal;
	padding: 10px 0 0 20px;
}

.main>table td {
	font-size: 10pt;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: top;
}

.main>table a {
	text-decoration: underline;
	font-weight: normal;
	color: #4E4E4E;
}

.main>table a:hover {
	text-decoration: none;
}

.main>table.feeTable {
	width: 85%;
	margin: 0;
	padding: 10px 0 0 20px;
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
}
.main>table.feeTable td{
	padding-top: 6px;
}
.main>table.feeTable td.col1{
	width: 20px;
}
.main>table.feeTable td.col3{
	width: 80px;
}

.main>table.imnTable {
	width: 95%;
	margin: 10px 0 0 25px;

	border: 1px solid olive;
	border-collapse: collapse;
}

.main>table.imnTable th {
	font-size: 10pt;
	font-weight: bold;
	color: #513D05;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid olive;
}

.main>table.imnTable td {
	font-size: 10pt;
	font-weight: normal;
	color: #513D05;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid olive;
}

.main>table.imnTable a {
	color: #513D05;
	text-decoration: none;
	font-weight: bold;
}

.main>table.imnTable a:hover {
	text-decoration: underline;
}

ul.regList {
		margin-top: 10px;
}

ul.regList li {
	list-style-position: inside;
	list-style-type: disc;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px 0 3px 30px;
}

ul.blueList {
		margin-top: 2px;
}
ul.blueList li {
	list-style-position: inside;
	list-style-type: disc;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px 0 3px 0;
	color: #0070C0;
}

.main>ul.imnWater {
		margin-top: 10px;
}
.main>ul.imnWater li {
	list-style-position: inside;
	list-style-type: disc;
	font-size: 10pt;
	color: #556E24;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px 0 3px 30px;
}

.main>ol {
		margin-top: 10px;
}
.main>ol li {
	list-style-position: inside;
	list-style-type: decimal;
	padding: 3px 0 3px 20px;
}

.main>ul.example li {
	font-size: 12pt;
	font-weight: normal;
	color: #446504;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px 0;
}

.mainList {
	border: #D5D3B5 1px solid;
	padding: 5px;
	width: 80%;
	margin: 5px auto 0px auto;
}
.mainList>li {
	color: #0B89F3;
	font-size: 11pt;
	padding: 5px;
	list-style-type: none;
}
.mainList>li>ul {
	padding: 0px;
}
.mainList>li>ul>li {
	list-style: none;
	color: #0B89F3;
	font-size: 11pt;
	padding: 5px 0;
	text-decoration: underline;
}

table#company {
	width: 80%;
	margin: auto;
	padding: 10px 0 0 0;
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
}

/* FAQ */
.main>div.faq>h3 {
	font-size: 11pt;
	font-weight: bold;
	color: #513D05;
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 0 0 20px;
	margin: 3px 0 0 0;
}

.main>div.faq>p {
	font-size: 10pt;
	font-weight: normal;
	color: #0070C0;
	padding: 10px 0 0 20px;
}

.main>div.faq>ul {
	padding: 10px 0 0 0;
}
.main>div.faq>ul>li {
	font-size: 10pt;
	font-weight: normal;
	color: #0070C0;
	list-style-type: disc;
	margin: 0 0 0 50px;
}

.main>dl.imnNews {
	margin: 10px 0 10px 20px;
	width: 80%;
}
.main>dl.imnNews dd {
	float: left;
	padding: 3px;
	margin: 0;
	font-size: 10pt;
	color: #513D05;
	font-family: Arial, Helvetica, sans-serif;
}
.main>dl.imnNews dt {
	padding: 3px 0px 3px 130px;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
}
.main>dl.imnNews dt a {
	color: blue;
	text-decoration: underline;
}
.main>dl.imnNews dt a:hover {
	text-decoration: underline;
}

#companySide {
	width: 80%;
	border: 2px #336649 solid;
	margin: 10px auto 10px auto;
	padding: 5px;
}
#companySide li {
	font-size: 11pt;
	list-style-position: inside;
	list-style-type: disc;
	padding: 3px 0 3px 30px;
}
#centerSide {
	width: 80%;
	border: 2px #336649 solid;
	background-color: #A8A94F;
	color: #FFF;
	margin: 10px auto 10px auto;
	padding: 5px;
}
#centerSide li {
	font-size: 11pt;
	list-style-position: inside;
	list-style-type: disc;
	padding: 3px 0 3px 30px;
}
#studentSide {
	width: 80%;
	border: 2px #CAA535 solid;
	background-color: #E1E2A2;
	margin: 10px auto 10px auto;
	padding: 5px;
}
#studentSide li {
	font-size: 11pt;
	list-style-position: inside;
	list-style-type: disc;
	padding: 3px 0 3px 30px;
}
h6.sTitleCenter {
	font-size: 11pt;
	font-weight: bold;
	color: navy;
	padding: 4px 0 0 0;
	margin: 0px;
	text-decoration: underline;
	text-align: center;
}

table.process_LC {
	width: 95%;
	padding: 0px;
	margin: auto;
}
table.process_LC td {
	border: 1px green solid;
}
table.process_LC td.procBox {
	padding: 5px 0 0 5px;
}
table.process_LC td.allowInBox {
	vertical-align: middle;
	color: blue;
	font-size: 12pt;
	font-weight: bold;
	border: 0;
	padding: 0 2px 0 5px;
}
h6.sTitle {
	font-size: 9pt;
	font-weight: bold;
	color: navy;
	padding: 0;
	margin: 0;
	text-decoration: underline;
}

.main>.ErrMsg {
	font-size: 13pt;
	font-weight: bold;
	color: #DD3B39;
	padding: 5px 0 10px 20px;
}

.main>form h2 {
	font-size: 13pt;
	font-weight: bold;
	color: #AF060F;
	background-color: #EDEDCB;
	padding: 5px 0 5px 20px;
	margin: 5px 0 5px 20px;
}

.main>form h3 {
	font-size: 13pt;
	font-weight: bold;
	padding: 10px 0 0 30px;
	color: #AF060F;
	margin: 3px 0 0 0;
}

.main>form p {
	font-size: 12pt;
	font-weight: normal;
	padding: 10px 0 0 40px;
}

textarea.inquiry {
	font-size: 12pt;
	font-weight: normal;
	border: 1px solid;
	border-color: grey;
}

#thanks {
	font-size: 12pt;
	font-weight: bold;
	line-height: 150%;
}

.red {
	color: red;
}


/* -----------------------------------------------

	Setting for the Display Change by Screen Width

 -------------------------------------------------*/

/* ---------------------------------------
	More than Default Screen Width
 ----------------------------------------*/
@media only screen and ( min-width: 991px )
{


}

/* ---------------------------------------
	Change to Default Screen
			for PC
 ----------------------------------------*/
@media only screen and ( max-width: 990px )
{
	#nav
	{
		width: 100%;
		position: static;
		margin: 0;
	}

	#headerMenu {
		width: 420px;
		padding-right: 10px;
	}

	#leftMenu {
		width: 100%;
	}

	#bottomMenu {
		display: none;
	}

}

/* ---------------------------------------
	Change to Single Column
			for Single Column Display
 ----------------------------------------*/
@media only screen and ( max-width: 768px )
{

/* for Content Left / Menu Right Page */
	#leftContents {
		padding: 10px 0 10px 0;
		border-right: 0;
	}
	#leftmain {
		padding: 5px 0 5px 0;
	}
	#leftmain>h1 {
		margin-left: 20px;
		margin-right: 20px;
	}
	#leftmain>p {
		margin-left: 20px;
		margin-right: 20px;
	}

	#rightMenu {
		padding: 10px 0 10px 0;
		margin-bottom:0;
	}
	#sideRightBox {
		padding: 5px 0 5px 0;
		width: 100%;
	}
	#sideRightBox>li {
		padding: 5px 0 5px 0;
		margin-left: 20px;
		margin-right: 20px;
	}
	#sideRightBox>li>ul {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	#sideRightBox>li>ul>li {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}


/* for Menu Left / Content Right Page */
	#leftMenu {
		padding: 10px 0 6px 0;
	}
	ul.linkBlack {
		margin: 2px 0 1px 0;
	}
	ul.meritBox {
		margin: 5px 0 1px 0;
	}
	ul.sponsor {
		margin: 5px 0 1px 0;
	}
	ul.boxContact {
		margin: 5px 0 2px 0;
	}

	#rightContents {
		padding: 10px 0 10px 0;
		border-left: 0;
		margin-bottom:0;
	}
	.main {
		padding: 0 0 10px 0;
	}
	.main>h1 {
		padding: 10px 10px 10px 20px;
	}
	.main>h1.maintop {
		margin: 0 0 15px 0;
	}
	.main>h2 {
		padding: 10px 10px 0 20px;
	}
	.main>h3 {
		padding: 10px 10px 0 20px;
	}
	.main>h4 {
		padding: 10px 10px 0 20px;
	}
	.main>p {
		padding: 10px 10px 0 20px;
	}
	.main>p.spacer {
		display: none;
	}
	.main>ul.imnWater li {
		padding: 3px 10px 3px 30px;
	}
	.main>ol li {
		list-style-position: inside;
		list-style-type: decimal;
		padding: 3px 10px 3px 20px;
	}
	.main>div.faq>h3 {
		padding: 10px 10px 0 20px;
	}
	.main>div.faq>p {
		padding: 10px 10px 0 20px;
	}

	.main>table {
		width: 80%;
		padding: 10px 0 0 20px;
	}

	.main>ul.example li {
		padding: 3px 0;
	}

	.mainList {
		padding: 5px;
		width: 80%;
		margin: 5px auto 0px auto;
	}
	.mainList>li {
		padding: 5px;
	}
	.mainList>li>ul {
		padding: 0px;
	}
	.mainList>li>ul>li {
		padding: 5px 0;
	}

	#companySide {
		width: 90%;
	}
	#centerSide {
		width: 90%;
	}
	#studentSide {
		width: 90%;
	}

	table.process_LC {
		width: 98%;
	}

	#bottomMenu {
		display: none;
	}

	#foot {
		margin: 0;
	}
}

/* ---------------------------------------
	Change to SmartPhone Menu
			for SmartPhone Type Display
 ----------------------------------------*/
@media only screen and ( max-width: 640px )
{
	#topPic {
		display: none;
	}

	#nav
	{
/*		position: relative; */
		position: static;
		top: auto;
		left: auto;
	}


	/* first level */
	#nav > ul
	{
		height: auto;
/*		display: none; */
			display: block;

/*
	メニューが下のコンテンツに被さるから
	メニューサイズ分下のコンテンツが下に
	づれるように relative に変更
*/
/*		position: absolute; */
		position: relative;

		left: 0;
		right: 0;
	}
		#nav:target > ul
		{
			display: block;
		}
		#nav > ul > li
		{
			width: 100%;
			text-align: left;
			border-left:2px solid #598701;

		font-size: 14pt !important;
		font-weight: bold !important;

			padding: 10px 20px;

					border-bottom: 1px solid #7C9C5B;

			float: none;
		}
			#nav > ul > li > a
			{
				height: auto;
				text-align: left;
				font-size: 14pt !important;
				font-weight: bold !important;
			}
				#nav > ul > li:not( :last-child ) > a
				{
					border-right: none;
					font-size: 14pt !important;
					font-weight: bold !important;
				}


		/* second level */
		#nav li ul
		{
			position: static;
			padding: 20px 0 20px 20px;
			padding-top: 0;
		}
		#nav li ul a
		{
			padding: 5px 0 5px 15px;
		}


	#headerMenu {
		max-width: 100%;
		padding-top: 4px;
		padding-right: 2px;
	}

	#leftMenu {
		width: 100%;
	}

	ul#sponsor1 {
		display: none;
	}

	ul#sponsor2 {
		display: none;
	}

	#companySide {
		width: 98%;
	}
	#centerSide {
		width: 98%;
	}
	#studentSide {
		width: 98%;
	}

	input {
	    width: 98%;
			border: 2px solid;
	    box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
	   -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	}

	textarea.inquiry {
	    width: 98%;
			border: 2px solid;
	    box-sizing: border-box;
	   -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	}

	/* チェックボックスを大きくする */
	input[type="checkbox"] {
	    -webkit-appearance: none;
	    position: relative;
	    margin-right: 5px;
	    border-radius: 8px;
	    border: 2px solid #4c4c4c;
	    -webkit-box-sizing: border-box;
	    width: 20px;
	    height: 20px;
	    background: #ffffff;
	}

	/* チェック時は背景色を変更 */
	input[type="checkbox"]:checked {
	    background: #9FB9D3;
	}


	/* Move meritBox & boxContact to Bottom */
	#meritBox {
		display: none;
	}
	#boxContact {
		display: none;
	}
	#bottomMenu {
		display: block;
	}

	#donateBot {
		display: none;
	}

}