@charset "utf-8";

/*
============================================================
基本レイアウト設定
------------------------------------------------------------

■ デフォルトリセット
■ floatクリア
■ スクロール
■ テキストリンク
■ 汎用パーツ
■ レイアウトベース
■ ヘッダー
■ フッター
■ コンテンツ


============================================================
*/
.sp{display: none;}
.pc{display: block;}
/* ---------------------------------------------------------
■ デフォルトリセット
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1.6;
	border: none;
	list-style-type: none;
}

/* ---------------------------------------------------------
■ floatクリア
--------------------------------------------------------- */
span.clear {
	height: 1px;
	margin: 0;
	padding: 0;
	font-size: 1px;
	line-height: 1px;
	display: block;
	clear: both;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
/* ---------------------------------------------------------
■ スクロール
--------------------------------------------------------- */
body {
	scrollbar-arrow-color:#ffffff;
	scrollbar-face-color:#ffffff;
	scrollbar-3dlight-color:#ffffff;
	scrollbar-darkshadow-color:#ffffff;
	scrollbar-highlight-color:#ffffff;
	scrollbar-shadow-color:#ffffff;
	scrollbar-track-color:#4f9aff;
}

/*スクロールバーの横幅指定*/
body::-webkit-scrollbar {
    width: 15px;
}
/*スクロールバーの背景色・角丸指定*/
body::-webkit-scrollbar-track {
	background: #4f9aff;
}
/*スクロールバーの色・角丸指定*/
body::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background:#ffffff;
}

/* ---------------------------------------------------------
■ リンク
--------------------------------------------------------- */
a:link    { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover   { color: #0066CC; text-decoration: none; }
a:active  { color: #0066CC; text-decoration: none; }

a:hover img{
	opacity: 0.8;
}

/* ---------------------------------------------------------
■ 汎用パーツ
--------------------------------------------------------- */
.red{color: red;}
.white{color: #fff;}
.bg_red{background: red;}
.bg_bule{background: #000066;}

.small {font-size: 70%;}
.small_90 {font-size: 90%;}
.big {font-size: 120%}

.bold {font-weight: bold;}

.tx_center{text-align: center;}
.tx_right{text-align: right;}

.sen {text-decoration: line-through;}

.mgb_10{margin-bottom: 10px;}
.mgb_20{margin-bottom: 20px;}
.mgb_30{margin-bottom: 30px;}

.pdg_25{padding: 25px;}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

/* ---------------------------------------------------------
■ レイアウトベース
--------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	text-align: center; /* 中央レイアウト */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;
	font-size: 14px;
}

div#content_base {
	width: 100%;
	margin: 0 auto; /* 中央レイアウト */
	text-align: center;
	overflow: hidden;
}

div.contents{
	width: 900px;
	height: auto;
	margin: 0 auto; /* 中央レイアウト */
	text-align: left;
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------
■ ヘッダー
--------------------------------------------------------- */
header {
	width: 100%;
	height: auto;
	background: url(../images/head_bg.png) no-repeat top center;	
	margin: 0 auto;
	text-align: center;
}

header img{
	float: left;
}

header #logo {
	width: 1100px;
	margin: auto;
	height: auto;
}

/* ---------------------------------------------------------
■ ナビ
--------------------------------------------------------- */

#nav-drawer {
	position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 40px;
	height: 32px;
	vertical-align: middle;
	position: fixed;
	top: 20px;
	right: 20px;
	background: rgba(0,40,123,0.50);
	z-index: 200;
	padding: 7px 0 0 5px;
	border-radius: 3px;
	cursor: pointer;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 4px;/*線の太さ*/
	width: 35px;/*長さ*/
	border-radius: 3px;
	background: #FFF;
	display: block;
	content: '';
}
#nav-open span:before {
	bottom: -10px;
}
#nav-open span:after {
	bottom: -20px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 200;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 70px;
	right: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 300px;/*最大幅（調整してください）*/
	height: auto;
	background: rgba(255,255,255,0.80);/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(105%);
	transform: translateX(105%);/*右に隠しておく*/
	border-radius: 10px 0 0 10px;
	text-align: left;
	padding: 10px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*中身*/
#nav-content ul li {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 2px;
}

#nav-content ul li.mgb_10 {
	margin-bottom: 10px;
}

#nav-content ul li a{
	background: #cddbfd;
	display: block;
	padding: 2px 10px;
	border-radius: 5px;
}

#nav-content ul li a:hover{
	background: #9ab2ec;
	color: #fff;
}

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	width: 100%;
	margin: 50px 0 0; 
	background: url(../images/bg_wave_down.png) repeat-x #8cbdff top;
	height: 300px;
	text-align: center;
}

footer .foot_bg{
	width: 100%;
	background: url(../images/foot_bg.png) no-repeat 50% bottom;
	height: 100%;

}

footer div#footlogo {
    width: 100%;
	max-width: 900px;
	height: 100%;
	text-align: center;
	margin: 0 auto ; /* 中央レイアウト */
	position: relative;
}

footer div#footlogo img{
	position: absolute;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

/* ---------------------------------------------------------
■ フェードイン
--------------------------------------------------------- */
.fadein {
	visibility: hidden;
}

.fadeInDown {
	visibility: visible !important;
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;

}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */

#page-top {
    position: fixed;
    bottom: 20px;
    right: 5px;
	z-index: 100;
	animation: gotop 3s linear infinite;
	width: 80px;
	height: 350px;
	transition: 0.2s;
}

#page-top img{
	float: right;
}

#page-top a:hover img{
	opacity: 1;
}

@keyframes gotop {
  0% { transform: translateY(0) }
  50% { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}