/*┌──────────────────────────────────────
/*│  共通スタイルシート v0.0.1 (2017/01/05)
/*│  common.css
/*└─────────────────────────────────────*/

/*============================================================================*/
/*                              [ 基本設定関係 ]                              */
/*============================================================================*/

/*-- [ 文字コード ] ----------------------------------------------------------*/
@charset 'UTF-8';

/*-- [ 共通 ] ----------------------------------------------------------------*/
*{
	padding:0;
	margin:0;
	word-break: break-all;/* IEのみ言語に関係なく表示範囲に合わせて改行されます。 */
}

/* ボックスサイズ算出方法指定 */
/* border-box：paddingとborderの幅を要素の幅と高さに含める */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}
body , html {height: 100%;}/* フッター最下部用 */

li{list-style-type: none;}
img{
	border:none;
	max-width: 100%;
}
p {margin-bottom:10px;}
table {empty-cells: show;}
a{text-decoration: none;}
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/*-- [ 文字 ] ----------------------------------------------------------------*/
html {font-size: 62.5%;} /* rem単位ベース10px指定 */

/* 文字サイズを固定にする。 */
body {
	-webkit-text-size-adjust:100%;/* 文字の大きさを固定する指定 */
	font-size: 16px; font-size: 1.6rem;
	color:#000;
}

html, body, table {
	font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

h1, h2, h3 {line-height: 125%;}
h1, h2, main>article>p, #About li>a>p {
	font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
h1 {font-size: 32px; font-size: 3.2rem;}
h2 {font-size: 24px; font-size: 2.4rem;}
h3 {font-size: 12px; font-size: 1.2rem;}

main>article>p {
	font-size: 18px; font-size: 1.8rem;
	line-height : 150%;
	margin-bottom: 18px; margin-bottom: 1.8rem;
}

main>article>section {
	font-size: 16px; font-size: 1.6rem;
	line-height : 125%;
}


article, section, aside {padding:10px;}
a {color:#3A519D;}

/*-- [ 画像 ] ----------------------------------------------------------------*/
figcaption {
	font-size: 12px; font-size: 1.2rem;
	line-height : 125%;
	margin-bottom:10px;
}
article>figure figcaption {
	font-size: 14px; font-size: 1.4rem;
}

a>figcaption:before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f030"; /* カメラマーク */
	margin-right: 0.5rem;
}
figure img {
	overflow: hidden;
	        border-radius: 8px;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
}

/*-- [ フォームオブジェクト ] ------------------------------------------------*/
select, input[type="text"], input[type="email"], input[type="date"], textarea {
	padding: 8px; padding: 0.8rem;
	outline: none;
	border: 1px solid #DDD;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, textarea:focus {
	box-shadow: 0 0 7px #3498db;
	border: 1px solid #3498db;
}

form {
	margin        : 0px;
	padding       : 0px;
	font-family: "Osaka－等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace;
}

input, select, textarea {
	margin        : 0px;
	letter-spacing: 1px;
	font-family: "Osaka－等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace;
}
@media screen and (max-width: 767px){
	input, select, textarea {width:100%;}
}

.LgFrm { /* 大きいサイズのフォームオブジェクト */
	margin        : 0px;
	letter-spacing: 1px;
	font-size     : 18px; font-size: 1.8rem;
	font-family: "Osaka－等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace;
}



/*-- [ その他 ] --------------------------------------------------------------*/
.FltL {float  : left; } /* 左回り */
.FltR {float  : right;} /* 右回り */
.Hdn  {display: none; } /* 非表示 */
.ClrB {clear  : both; } /* 回解除 */
.AlgL {text-align: left;  } /* 左寄せ   */
.AlgC {text-align: center;} /* 中央寄せ */
.AlgR {text-align: right; } /* 右寄せ   */

.AftC:after { /* 回解除 */
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;/* 見えない存在 */
}

.AftA:after { /* 改行 */
	content: "\A";
	white-space: pre;
}

/*-- [ 見出し ] --------------------------------------------------------------*/
.Chapter {
	clear: both;
	margin-top:30px;
	margin-bottom:30px;

/*
	border-bottom: 1px solid gray;
	border-left  : 1px solid gray;
	        border-radius: 0 0 0 8px/ 0 0 0 8px;
	-webkit-border-radius: 0 0 0 8px/ 0 0 0 8px;
	   -moz-border-radius: 0 0 0 8px/ 0 0 0 8px;
*/
}

.Chapter h1,
.Chapter h2 {
/*

	        border-radius: 0 0 0 8px/ 0 0 0 8px;
	-webkit-border-radius: 0 0 0 8px/ 0 0 0 8px;
	   -moz-border-radius: 0 0 0 8px/ 0 0 0 8px;
*/
}

.Chapter>h2 {
	display:inline;
	background : #FFF url( '../images/bar_bg.gif' ) bottom left repeat-x;
	padding-left: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: 32px; font-size: 3.2rem;
	color: #000;
	font-weight: normal;
}
.Chapter>h2::before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f004"; /* ハートマーク */
	margin-right:10px;
	color: #F00;
}
@media screen and (max-width: 767px){
	.Chapter>h2 {
		font-size: 24px; font-size: 2.4rem;
	}
}


/*-- [ タイムスタンプ ] ------------------------------------------------------*/
.Timestamp {
	margin-top:   -20px;
	margin-bottom: 10px;
	font-size: 14px; font-size: 1.4rem;
	text-align: right;
}
.Timestamp:before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f073"; /* カレンダーマーク */
	margin-right: 0.5rem;
}

/*-- [ パンくず ] ------------------------------------------------------------*/
.Breadcrumbs ul li {
	display: inline;
	font-weight: bold;
	font-size: 16px; font-size: 1.6rem;
}
.Breadcrumbs ul li:before {content: " > ";}
.Breadcrumbs ul li:first-child:before {content: "";}
.Breadcrumbs ul li:first-child a:before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f015";
	margin-right: 0.4rem;
}

/*-- [ ページトップ ] --------------------------------------------------------*/
#PageTop>a {display: none;}
@media screen and (max-width: 767px){
	#PageTop>a {
		display: block;
		text-align: center;
		padding: 3px 20px;
		background-color : #3A519D;
		        border-radius: 8px 8px 0 0/ 8px 8px 0 0;
		-webkit-border-radius: 8px 8px 0 0/ 8px 8px 0 0;
		   -moz-border-radius: 8px 8px 0 0/ 8px 8px 0 0;
		position: fixed;
		bottom: 0px;
		right: 10px;
		z-index: 99;
	}
	#PageTop>a:after { /* 改行 */
		content: "\A";
		white-space: pre;
	}
	#PageTop>a:before {
		font-family: FontAwesome; /* アイコンフォント */
		content: "\f077"; /* 上マーク */
		font-size: 16px; font-size: 1.6rem;
		color:#FFF;
	}
}

/*============================================================================*/
/*                             [ レイアウト関係 ]                             */
/*============================================================================*/

#Wrapper {

	position: relative;/* リキッドレイアウト親 */
	width: 100%;
	min-width: 1200px;

	/* フッター最下部用 */
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

section {
	width: 1140px;
	margin:0 auto;
}
@media screen and (max-width: 767px){
	#Wrapper {
		width: auto;
		min-width: auto;
	}

	section {

		max-width: 100%;
	}
}

/*-- [ ヘッダー ] ------------------------------------------------------------*/
header {
	position: fixed;
	display: block;
	height: 77px;
	background: #FFF;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
}
header>div:first-child {
	/*width: 650px;*/
	float: left;
	z-index:10;
	position: relative;
}


header>div:first-child>a {
	display: block;
	margin-top: 6px;
	margin-left: 16px;
	float: left;
	font-size: 14px; font-size: 1.4rem;
	color:#000;
}
header>div:first-child>a>p {
	margin: 0;
}
header>div:first-child>a>img {
	width: 154px;
}
header>div:first-child>h1 {
	float: left;
	margin-left: 40px;
	height:77px;
	line-height:77px;
	font-size: 20px; font-size: 2.0rem;
	color:#000;
	font-weight: normal;
}
header>div:first-child>p {
	float: left;
	text-align: left;
	margin-left: 1em;
	height:77px;
	line-height:77px;
	color: #009dff;
	font-size: 1.2vw;
}
header>div:first-child>p>br {display: none;}


header {
	   -moz-box-shadow: 0 0 10px 0 #666;
	-webkit-box-shadow: 0 0 10px 0 #666;
	       -box-shadow: 0 0 10px 0 #666;
}
@media screen and (max-width: 767px){
	header>div:first-child {
		width: 330px;
	}
	header>div:first-child>a {
		margin-top: 15px;
		clear: both;
	}
	header>div:first-child>a>p {
		display: none;
	}
	header>div:first-child>a>img {
		width: 100px;
	}
	header>div:first-child>h1 {
		clear: both;
		line-height:25px; line-height:2.5rem;
		font-size: 15px; font-size: 1.5rem;
		margin-left: 15px;
		height:auto;
	}

	header>div:first-child>p {
		margin-top: -30px;
		text-align: center;
		line-height:25px; line-height:2.5rem;
		font-size: 10px; font-size: 1.0rem;
		height:auto;
	}
	header>div:first-child>p>br {display: inline;}

}

/*------------------------------------*/
/* メニュー */
#Menu {
	z-index: 99;
	clear: both;
	background-color: #666;
	position: fixed;
	width: 270px;
	top: 77px;
	bottom: 0;
	right: -270px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;/* スクロールバー */
}

body.MenuOpen #Wrapper{padding-top:77px;}

#DrawrBtn {
	margin-top:9px;
	margin-right:9px;
	float: right;
	display: block;
	text-align: center;
	width: 60px;
	height: 60px;
	cursor: pointer;
	background-color: #970004;
	overflow: hidden;
	        border-radius: 8px;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
}

#DrawrBtn::before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f0c9"; /* 三マーク */
	font-size: 36px; font-size: 3.6rem;
	color: #FFF;
	line-height: 60px;
}
body.MenuOpen #DrawrBtn::before {content: "\f00d";/* ×マーク */}

#ContactBtn {
	margin-top:9px;
	margin-right:9px;
	float: right;
	padding-top:20px;
	padding-left:5px;
	padding-right:5px;
	width: auto;
	height: 60px;
	overflow: hidden;
	cursor: pointer;
	font-size: 20px; font-size: 2.0rem;
	background-color: #970004;
	overflow: hidden;
	        border-radius: 8px;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
}
#ContactBtn>a {color: #FFF;}

@media screen and (max-width: 767px){
	#ContactBtn {
		padding-top:10px;
		padding-left:5px;
		padding-right:0;
		width: 60px;
		font-size: 16px; font-size: 1.6rem;
	}
}
/* リストの最後にfloat解除を入れる */
#Menu>ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;/* 見えない存在 */
}

#Menu>ul>li {
	position: relative;
	float: none;
	width: auto;
}
#Menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	background: #B00000;
	padding: 10px;
	position: relative;
}
#Menu a::after {
	position: absolute;/* 絶対 */
	top: 50%;
	margin-top: -10px;
	right: 15px;
	font-family: FontAwesome;
	content: "\f054";/* ＞マーク */
}
#Menu>ul>li>a {
	text-align: left;
	border-right: none;
	border-bottom: 1px solid #900000;
}
#Menu>ul>li>a:hover {
	background: #E00000;
}

/* サブメニュー */
#Menu .Sub {
	position: static;
	display: block!important;
	left: 0;
	right: 0;
	z-index: 99;
}
#Menu .Sub>li a {
	background: #900000;
	border-bottom: 1px solid #600000;
	padding: 10px 10px 10px 20px;
}
#Menu .Sub>li a:hover {background: #F00000;}
#Menu .Sub>li:last-child a {border: none;}

#JhomuinSupport {font-size: 12px; font-size: 1.2rem;}
#JhomuinSupport>span {font-size: 10px; font-size: 1.0rem;}

/* フェードレイヤー */
#MenuOverlay {
	display: none;
	background-color: rgba(0,0,0,0.49);
	position: fixed;
	z-index: 98;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
main {margin-top: 77px;}
body.MenuOpen main{margin-top: 0;}
/*-- [ ページ ] --------------------------------------------------------------*/









/*-- [ サブ ] ----------------------------------------------------------------*/
#Sub {
	position: absolute;/* リキッドレイアウト子 */
	display: block;
	width: 300px;
	top:624px;
	right:0;
}

aside>ul>li {clear: both;}
aside>ul li:nth-of-type(1) section {border-top : 1px dotted #666666;}
aside>ul li section {
	margin: 0;
	padding: 5px 0;
	height:58px;
	border-bottom : 1px dotted #666666;
}
aside>ul>li>section>a>figure {
	float: left;
	margin-right: 10px;
}
@media screen and (max-width: 767px){
	#Sub>aside {padding-left:27px;}
	#Sub {
		position: relative;
		width: auto;
		top:auto;
		right:auto;
	}
}

/*-- [ フッター ] ------------------------------------------------------------*/
footer {
	position: absolute;
	bottom: 0;
	width:100%;
	background-color : #D0E9FF;
	height: 60px;
}
#FooterMenu {
	float: right;
	padding:5px 10px;
}
#FooterMenu a {
	font-size: 14px; font-size: 1.4rem;
	line-height: 14px;
}
#FooterMenu li {
	float: left;
	margin-right:20px;
}
#FooterMenu li::before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f101"; /* >>マーク */
	margin-right:5px;
}
#Copyright::before {
	font-family: FontAwesome; /* アイコンフォント */
	content: "\f1f9"; /* (C)マーク */
	margin-right:5px;
}
#Copyright {
	text-align: center;
	font-size: 12px; font-size: 1.2rem;
}
@media screen and (max-width: 767px){
	#FooterMenu a {
		font-size: 12px; font-size: 1.2rem;
		line-height: 12px;
	}
	#Copyright span {display:none;}
	#Copyright {
		font-size: 8px; font-size: 0.8rem;
	}
}

/*-- [ 印刷用 ] --------------------------------------------------------------*/
@page {size: 20cm 28.5cm; margin: 0.5cm;}/* A4:210mm x 297mm */
@media print{
	#Wrapper {
		min-width: auto;
	}
	#Menu, #Side, #Sub {display:none;}
	#Support, #FooterMenu {display:none;}
	main {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
}
/*----------------------------------------------------------------------------*/