@charset "utf-8";
/* ===================================================================
CSS information

 File Name  : module.css
 Style Info : 共通要素の基本設定

11px = 85%		12px = 93%		13px = 100%		14px = 108%
15px = 116%		16px = 123.1%	        17px = 131%		18px = 138.5%
19px = 146.5%	        20px = 153.9%	        21px = 161.6%	        22px = 167%
23px = 174%		24px = 182%		25px = 189%		26px = 197%
=================================================================== */

/*----------------------------------------------------------------
	共通
----------------------------------------------------------------*/
html {
	overflow-y: scroll;
}

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	color: #22222;
	font-size : 13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p {
	margin: 10px 5px 10px 5px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
}

p.red {
	color: #FF0000;
}

p.huge {
	font-size: 24px;
}

p.large {
	font-size: 18px;
}

p.small {
	font-size: 13px;
}

p.bold {
	font-weight: bold;
	text-shadow:2px 2px 4px #808080;
}

p.right {
	text-align: right;
}

p.center {
	text-align: center;
}


p.tab1 {
	margin-left: 2em;
}

p.tab2 {
	margin-left: 4em;
}

p.tab3 {
	margin-left: 6em;
}

p.tab4 {
	margin-left: 8em;
}

p.tab5 {
	margin-left: 10em;
}

p.indent{
	padding-left:1em;
	text-indent:-1em;
}
p.before{
	padding-left:1em;
	position:relative;
}
p.before:before{
	content:"■";
	position:absolute;
	left:0;
	top:0;
}

h2 {
	margin: 0px 0px 0px 0px;
	padding: 1px 1px 1px 5px;
	font-size: 22px;
	border-top: double 5px #808080;
	border-bottom: double 5px #808080;
	text-shadow:2px 2px 4px #808080;
}

h3 {
	margin: 0px 0px 0px 0px;
	padding: 1px 1px 1px 5px;
	font-size: 20px;
	border-top: double 4px #808080;
	border-bottom: double 4px #808080;
	text-shadow:1px 1px 2px #808080;
}

h4 {
	margin: 0px 0px 0px 0px;
	padding: 1px 1px 1px 5px;
	font-size: 18px;
	border-top: double 3px #808080;
	border-bottom: double 3px #808080;
	text-shadow:1px 1px 2px #808080;
}

h5 {
	margin: 0px 0px 0px 0px;
	padding: 1px 1px 1px 5px;
	font-size: 16px;
	border-top: double 2px #808080;
	border-bottom: double 2px #808080;
	text-shadow:1px 1px 2px #808080;
}

img.full {
	width: 100%;
}

input[type=text], input[type=submit], input[type=reset], textarea {
	width: 97%;
	margin: 0px 0px 10px 0px;
	padding: 10px 5px;
	border: 2px solid #dddddd;
	border-radius: 0.5em;
}

input.short {
	width: 20%;
}

div.center {
	text-align : center;
}

span.h1_narrow {
	font-size: 20px;
	letter-spacing: -6px;
}

span.p_narrow {
	font-size: 16px;
	letter-spacing: -5px;
}

span.p_ruby {
	font-size: 15px;
	letter-spacing: -1px;
/*	margin: 0px 0px -10px 0px;	*/
}

li.huge {
	font-size: 24px;
}

li.large {
	font-size: 18px;
}

li.normal {
	font-size: 15px;
}

li.small {
	font-size: 13px;
}

li.bold {
	font-weight: bold;
	text-shadow:2px 2px 4px #808080;
}

/* loading要素
----------------------------------------------------------- */
#fade {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	background: #ffffff;
	top: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 1;
}

#loading {
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30px;
	margin-bottom: -50px;
	z-index: 1000;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#loading {
		position: absolute;
		left: 50%;
		top: 25%;
		margin-left: -30px;
		margin-bottom: -50px;
		z-index: 1000;
	}
}

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#loading {
		position: absolute;
		left: 50%;
		top: 30%;
		margin-left: -45px;
		margin-bottom: -20px;
		z-index: 1000;
	}
}

/* header要素
----------------------------------------------------------- */
.header {
	width: 100%;
	max-width: 960px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;	/* 30px 0px 0px 0px; */
}

h1 {
	margin: 0px;
	padding: 0px 0px 10px 0px;
	font-size: 24px;
	text-shadow:3px 3px 5px #808080;
}

h1 a {
	color: #111111;
	text-decoration: none;
}

/* gNavi要素
----------------------------------------------------------- */
#gNavi-box {
	width: 100%;
	max-width: 986px;
	margin: 0px auto;
}

#gNavi {
	width: 100%;
	max-width: 986px;
	margin: 0px auto;
	padding: 0px;
}

#gNavi li {
	display: block;
	float: left;
	width: 12.5%;	/* 横8個 */
	margin: 0px;
	padding: 0px;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#gNavi li {
		width: 25%;	/* 横4個2段 */
		border-bottom: 1px solid #6a8cc7;
	}
}
/* end */ 

#gNavi li a {
	display: block;
	padding: 12px 0px 10px 0px;
	background: #3261ab;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
}

#gNavi li a:hover {
	background: #4b75b9;
}

#change {
	background: #4b75b9;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	display: none;
	z-index: 9999;
}

#change li {
	display: block;
	float: left;
	width: 12.5%;
	margin: 0px auto;
	padding: 0px;
}

#change li a {
	display: block;
	padding: 12px 0px 10px 0px;
	background: #333333;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
}

#change li a:hover {
	background: #444444;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#change li {
		display: none;
	}
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#change li {
		display: none;
	}
}
/* end */ 

#toggle {
	display: none;
}

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#gNavi {
		display: none;
	}

	#gNavi li {
		width: 100%;
	}

	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #3261ab;
	}

	#toggle a {
		display: block;
		position: relative;
		padding: 12px 0px 10px 0px;
		border-bottom: 1px solid #6a8cc7;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
	}

	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: #ffffff;
	}

	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 20px;
		height: 4px;
		background: #3261ab;
	}

	#toggle a:before {
		margin-top: -6px;
	}

	#toggle a:after {
		margin-top: 2px;
	}
}
/* end */ 

/* mainVisual要素
----------------------------------------------------------- */
#mainVisual {
	width: 100%;
	max-width: 986px;
	margin: 0px auto 0px auto;
	clear: both;
}

#mainVisual img {
	width: 100%;
	max-height: 300px;
	margin: 0px;
	padding: 0px;
}

#mainVisual li {
	list-style: none;
	margin-left: 0px;
}

/* lowerVisual要素
----------------------------------------------------------- */
#lowerVisual {
	width: 100%;
	max-width: 986px;
	margin: 0px auto 5px auto;
	padding: 15px 0px 15px 0px;	/* 初期値 20px 0px 20px 0px */
	max-height: 150px;
	background: #CCCCFF;
	color: #111111;
	font-size: 200%;	/* 初期値 131% */
	font-weight: bold;
	text-align: center;
	clear: both;
	text-shadow:3px 3px 5px #808080;
}

/* pickup要素
----------------------------------------------------------- */
.pickup {
	width: 100%;
	max-width: 986px;
	margin: 0px auto 5px auto;
	zoom: 1;
}

.pickup:after {
	content: '';
	display: block;
	clear: both;
}
.pickup > div {
	float: left;
	width: 23.8%;	/* 3要素の場合31.66666%; 4要素の場合23.8%(margin-leftを1%で設定); */
}

.pickup > div + div {
	margin-left: 1%;	/* 3要素の場合のオリジナル値 2.5% */
}

.pickup .col01 {
	background: #ffffff;
/*	border: dashed 1px;	*/	/* 領域明記の為、点線表示(点線分だけ領域が必要) */
}

.pickup .col02 {
	background: #ffffff;
/*	border: dashed 1px;	*/	/* 領域明記の為、点線表示(点線分だけ領域が必要) */
}

.pickup .col03 {
	background: #ffffff;
/*	border: dashed 1px;	*/	/* 領域明記の為、点線表示(点線分だけ領域が必要) */
}

.pickup .col04 {
	background: #ffffff;
/*	border: dashed 1px;	*/	/* 領域明記の為、点線表示(点線分だけ領域が必要) */
}

.pickup a {
	color: #111111;
	display: block;
	padding: 15px 15px 15px 15px;
	text-decoration: none;
	*zoom: 1;
}

.pickup .col01:hover {
	opacity: 0.5;
}

.pickup .col02:hover {
	opacity: 0.5;
}

.pickup .col03:hover {
	opacity: 0.5;
}

.pickup .col04:hover {
	opacity: 0.5;
}

.pickup a:after {
	content: '';
	display: block;
	clear: both;
}

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	.pickup > div {
		float: none;
		width: 100%;
	}

	.pickup > div + div {
		margin-left: 0;
		margin-top: 3px;
	}

	.pickup a {
		padding: 13px 16px 16px;
	}
}

/* container要素
----------------------------------------------------------- */
#container {
	width: 986px;
	overflow: hidden;
	margin: 0px auto;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#container {
		width: 100%;
		overflow: hidden;
		margin: 0px auto;
	}
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#container {
		width: 100%;
		overflow: hidden;
	margin: 0px auto;
	}
}
/* end */ 

/* main要素
----------------------------------------------------------- */
#main {
	float: left;
	width: 600px;
	background: #ffffff;
/*	border: dashed 1px;	*/
	padding: 15px 15px 15px 15px;
}

	/* iframe研究 */
#main .ifWrap {
	width:100%;
	height:200px;
	margin: 10px auto 0;
	overflow:auto; /* scrollからautoに変更 */
	/* -webkit-overflow-scrolling:touch; */
	border:1px solid #c9c9c9; /* ついでに枠線も整形 */
	margin: 10px 0px 10px 0px;
}
#main .ifWrap iframe {
	width:100%;
	height:100%;
	border:none; /* 追加で指定 */
	display:block; /* 追加で指定 */
}
	/* iframe研究 */

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#main {
		clear: both;
		width: 95%;
		background: #ffffff;
/*		border: dashed 1px;	*/
		margin: 0px 0px 0px 0px;
	}
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#main {
		clear: both;
		width: 92%;
		background: #ffffff;
/*		border: dashed 1px;	*/
		margin: 0px 0px 0px 0px;
	}
}
/* end */ 

#main img {
	width: 90%;
	display: block;
	padding: 10px 0px 10px 0px;
	margin: auto;
}

/* side要素
----------------------------------------------------------- */
#side {
	float: right;
	width: 306px;
	background: #ffffff;
/*	border: dashed 1px;	*/
	padding: 15px 15px 15px 15px;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#side {
		float: none;
		clear: both;
		width: 95%;
		background: #ffffff;
/*		border: dashed 1px;	*/
		margin: 0px 0px 0px 0px;
	}
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
	#side {
		float: none;
		clear: both;
		width: 92%;
		background: #ffffff;
/*		border: dashed 1px;	*/
		margin: 0px 0px 0px 0px;
	}
}
/* end */ 

/* pageTop要素
----------------------------------------------------------- */
#pageTop {
	width: 100%;
	max-width: 986px;
	height: 30px;
	margin: 0px auto;
	padding: 10px 0px 10px 0px;
	*zoom: 1;
}

#pageTop:after {
	content: '';
	display: block;
	clear: both;
}

#pageTop p {
	float: right;
	font-size: 85.7%;
	line-height: 1.0;
}

#pageTop a {
	display: block;
	padding: 10px 10px;
	background: #ffffff;
	color: #111111;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(204,204,204,0.75);
	behavior: url(PIE.htc);
}

#pageTop a:hover {
	text-decoration: none;
}

#pageTop a img {
	display: block;
	width: 19px;
	height: auto;
	margin: 0px auto 10px;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#pageTop {
		width: 96%;
		padding: 10px 0px 30px 0px;
		background-size: 310px auto;
		background-position: center bottom;
	}

	#pageTop p {
		float: none;
		text-align: center;
	}

	#pageTop a {
		padding: 8px 0px 0px 0px;
	}
}
/* end */ 

/* footer要素
----------------------------------------------------------- */
#footer {
	width: 100%;
	height: 100px;
}

#footer .inner {
	width: 100%;
	max-width: 986px;
	margin: 0px auto;
}

#footer .nav {
	padding: 20px 0px 20px 0px;
	text-align: center;
}

#footer .nav li {
	display: inline-block;
	padding: 0px 16px 0px 16px;
	line-height: 1.2;
	font-size: 85%;
	margin-left: 0px;
}

#footer .nav a {
	color: #111111;
}

#footer .nav a:hover {
	text-decoration: none;
}

#footer .copyright {
	width: 100%;
	max-width: 986px;
	margin: 0px auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 85%;
}

#footer .copyright a {
	color: #111111;
	text-decoration: none;
}

#footer .copyright a:hover {
	text-decoration: underline;
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
	#footer {
		width: 100%;
		height: 100%;
	}

	#footer .inner {
		width: 100%;
		margin: 0px auto;
		background: #6a8cc7;
	}

	#footer .nav {
		padding: 0px;
		text-align: center;
	}

	#footer .nav li {
		width: 100%;
		display: block;
		padding: 0px;
		border-bottom: 1px solid #6a8cc7;
		border-left: 0px;
		line-height: 1.2;
		font-size: 85%;
	}

	#footer .nav li a {
		display: block;
		padding: 12px 0px 10px;
		background: #3261ab;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
	}

	#footer .nav li a:hover {
		background: #4b75b9;
	}

	#footer .copyright {
		width: 100%;
		margin: 0px auto;
		text-align: center;
		font-size: 85%;
	}
}
/* end */ 

/* clear要素
----------------------------------------------------------- */
.clearfix {
	width: 100%;
}

.clearfix:after {
	height: 0px;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

.clear {
	clear: both;
}

/* line要素
----------------------------------------------------------- */
#line th {
	border: 1px;
	border-style: solid;
	border-color: #808080;
}
#line td {
	border: 1px;
	border-style: solid;
	border-color: #808080;
}

/* tab要素
----------------------------------------------------------- */
#tab1 li {
	margin-left: 2em;
}

#tab2 li {
	margin-left: 4em;
}

#tab3 li {
	margin-left: 6em;
}

#tab4 li {
	margin-left: 8em;
}

#tab5 li {
	margin-left: 10em;
}

#tab1 table {
	margin-left: 2em;
}

#tab2 table {
	margin-left: 4em;
}

#tab3 table {
	margin-left: 6em;
}

#tab4 table {
	margin-left: 8em;
}

#tab5 table {
	margin-left: 10em;
}

/* thin要素
----------------------------------------------------------- */

#thin th {
	padding: 0px 10px 0px 0px;
}

#thin td {
	padding: 0px 10px 0px 0px;
}

/* nomalsize要素
----------------------------------------------------------- */

#normalsize li {
	font-size: 15px;
}