/*=============================================
*
* 
*
=============================================*/
body {
	background: #000;
	color: #231f20;
}
body img {
	width: auto;
}
p {
	text-align:left;
}
a {
	color: #fff;
}
span {
	display: inline;
} 
/*=============================================
*
* wrapper
*
=============================================*/
#wrapper {
	overflow:hidden;
	position:relative;
}
/*=============================================
*
*  header
*
=============================================*/
#header {
	background: #000;
	border-bottom: 1px #333 solid;
	height:auto;
	position: fixed;
	top: -67px;
	width: 100%;
	
	opacity: 0;
	-webkit-opacity: 0;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	
	z-index: 500;
}
#header.comp {
	opacity: 1;
	-webkit-opacity: 1;
	top: 0;
}
/* Inner */
#headerInner {
	background: url(../images/common/headerBack-01.jpg) no-repeat center top;
	height: 66px;
	margin:0 auto;
	overflow: hidden;
	position:relative;
	width: 100%;
	z-index: 1500;
	
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	/*
	opacity: 0;
	-webkit-opacity: 0;
	*/
}
#headerInner.on {
	opacity: 1;
	-webkit-opacity: 1;
}
@media screen and (max-width:800px){
	#headerInner {

	}
}
@media screen and (max-width:640px){
	#headerInner  {

	}
}
/*=============================================
*
* wrapper
*
=============================================*/
/*---------------------------------------------
ロゴ
---------------------------------------------*/
#header #headerLogoArea {
	left: 20px;
	position: absolute;
	top: 27px;
	width: auto;
	
	z-index: 500;
	/*
	opacity: 0;
	-webkit-opacity: 0;
	*/
}
@media screen and (max-width:1000px){
	#header #headerLogoArea {

	}
}
@media screen and (max-width:640px){
	#header #headerLogoArea {
		
	}
}
#header #headerInner h1.logo {
	height: 100%;
	width: 100%;
}
#header #headerInner h1.logo a {
	display: block;
}
@media screen and (max-width:1000px){
	#header #headerInner h1.logo a {

	}
}
@media screen and (max-width:500px){
}
/*=============================================
*
*  headerNavArea
*
=============================================*/
#headerNavArea {
	height: 100%;
	left: 100%;
	margin-top: 0;
	position: fixed;
	top: 66px;
	width: auto;
	z-index: 1000;		
}
#headerNavArea #headerNav {
	height: 100%;
	margin-left: 0;
	padding: 60px 0 30px 0px;
	position: relative;

	transition: all 1s;
	-webkit-transition: all 1s;
	transition-timing-function: cubic-bezier(.71,.08,.14,.88);
	-webkit-transition-timing-function: cubic-bezier(.71,.08,.14,.88);
	
	mix-blend-mode: screen;
}
#headerNavArea.on #headerNav {

}
/* ============================================
#headerNavArea #headerNav01 
============================================ */
/*---------------------------------------------
#headerNav01
---------------------------------------------*/
#headerNavArea #headerNav01 {
	padding-left: 5px;
	position: relative;
	width: auto;
}
/*---------------------------------------------
#headerNavArea #headerNav01 li
---------------------------------------------*/
#headerNavArea #headerNav01 li {
	height: 10px;
	margin: 0 0 25px 27px;
	overflow: hidden;
	position: relative;
	list-style: none;
	width: 220px;
	
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
@media screen and (max-width:1100px){

}
/* a | ボタン　*/
#headerNavArea #headerNav01 li a {
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	
	transition: all 0.2s;
	-webkit-transition: all 0.2s;

	overflow: hidden;
	text-indent: 100%;
	white-space:nowrap;
	text-indent: -9999em;
}
#headerNavArea #headerNav01 li.nav01 a {
	background: url(../images/common/gNav-01.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav01.current a {
	background: url(../images/common/gNav-01.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav02 a {
	background: url(../images/common/gNav-02.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav02.current a {
	background: url(../images/common/gNav-02.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav03 a {
	background: url(../images/common/gNav-03.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav03.current a {
	background: url(../images/common/gNav-03.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav04 a {
	background: url(../images/common/gNav-04.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav04.current a {
	background: url(../images/common/gNav-04.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav05 a {
	background: url(../images/common/gNav-05.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav05.current a {
	background: url(../images/common/gNav-05.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav06 a {
	background: url(../images/common/gNav-06.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav06.current a {
	background: url(../images/common/gNav-06.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav07 a {
	background: url(../images/common/gNav-07.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav07.current a {
	background: url(../images/common/gNav-07.png) no-repeat left -10px;
}
#headerNavArea #headerNav01 li.nav08 a {
	background: url(../images/common/gNav-08.png) no-repeat left 0;
}
#headerNavArea #headerNav01 li.nav08.current a {
	background: url(../images/common/gNav-08.png) no-repeat left -10px;
}
/* ナビホバー */
#headerNavArea #headerNav01 li:hover a {
	top: -10px;
}
#headerNavArea #headerNav01 li.current:hover a {
	top: 0;
}
/*---------------------------------------------
sns
---------------------------------------------*/
#headerNavArea .snsBtn {
	margin-left: 5px;
	padding: 0 15px;
	position: relative;
	text-align: left;
}
#headerNavArea .snsBtn li {
	display: inline-block;
	margin: 0 2px;
}
@media screen and (max-width:800px){
	#headerNavArea .snsBtn li {
		margin: 0 0px;
	}
}
/*---------------------------------------------
WAVE / back
---------------------------------------------*/
#headerNavArea .grBack {
	background: #68ffda;
	display: block;
	height: 100%;
	left: 23px;
	position: absolute;
	top: 0;
	width: 100%;
}
#headerNavArea .waveVertiGr {
	background: url(../images/common/wave_vertiGreen.svg) repeat-y left 0;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 23px;
	
	/* IE8 */
	background: url(../images/common/wave_vertiGreen.png) repeat-y left 0\9;
}
@media all and (-ms-high-contrast: none){
	#headerNavArea .waveVertiGr {
    	background: url(../images/common/wave_vertiGreen.png) repeat-y left 0;
  	}
}
/*=============================================
*
* drawerBtn | ドロワー
*
=============================================*/
#drawerBtn {
	cursor: pointer;
	height: 50px;
	margin-right: 0;
	overflow: hidden;
	position: absolute;
	right: 20px;
	top: 8px;
	width: 50px;
	z-index: 3000;
	
    transform: scale(1);
    -webkit-transform: scale(1);
	transform-origin: center center;
	-webkit-transform-origin: center center;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
@media screen and (max-width:640px){
	#drawerBtn {
		right: 10px;
	}
}
@media screen and (max-width:480px){
	#drawerBtn {
		top: 8px;
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
	}
}
#drawerBtn.void {
	opacity: 0.7;
	-webkit-opacity: 0.7;
    transform: scale(0.4);
    -webkit-transform: scale(0.4);	
}
#drawerBtn-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 2px;
	margin: -1px 0 0 -20px;
	background: url(../images/common/drawerBtnLine-01.png) no-repeat 0 0;
	
	transition: .3s;
}
#drawerBtn-icon:before, 
#drawerBtn-icon:after {
	background: url(../images/common/drawerBtnLine-01.png) no-repeat 0 0;;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 2px;
	margin-left: -20px;
	
	transition: 0.3s;
}
#drawerBtn-icon:after {
	background: url(../images/common/drawerBtnLine-01.png) no-repeat 0 0;
}
#drawerBtn-icon:before {
	margin-top: -12px;
}
#drawerBtn-icon:after {
	margin-top: 10px;
}

#drawerBtn .close {
	background: transparent;
}
#drawerBtn .close:before ,
#drawerBtn .close:after {
	margin-top: -1px;
}
#drawerBtn .close:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#drawerBtn .close:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

/*panel { display: none; width: 100%; margin: 0; padding: 120px 0; background: #E3F2FD; text-align: center; }*/
/*=============================================
*
* main
*
=============================================*/
#main {

}
@media screen and (max-width:800px){
	#main {

	}
}
.inner {
	position: relative;
}
/*=============================================
*
* sec / contents
*
=============================================*/
.sec {
	background: #000;
	display: none;
	padding: 0;
	height: auto;
	left: 0;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 100;
	
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
	transition-timing-function: cubic-bezier(.71,.08,.14,.88);
	-webkit-transition-timing-function: cubic-bezier(.71,.08,.14,.88);
}
.sec.on {
	display: block;
	position: relative;
}
.contents {
	padding: 0;
	position: relative;
}
/*=============================================
*
* fade
*
=============================================*/
/* 画面外にいる状態 */
/* 下から*/
.fadein {
    opacity : 0;
    transform : translate(0, 80px);
	-webkit-transition: all 1s;
	transition: all 1s;
}
.fadeTopIn {
    opacity : 0;
    transform : translate(0, -80px);
	-webkit-transition: all 1s;
	transition: all 1s;
}
/* 右から */
.fadeRightIn {
    opacity : 0;
    transform : translate(80px, 0);
	-webkit-transition: all 1s;
	transition: all 1s;	
}
/* 右から */
.fadeLeftIn {
    opacity : 0;
    transform : translate(-80px, 0);
	-webkit-transition: all 1s;
	transition: all 1s;	
}
/* 画面内に入った状態共通 */
.fadein.scrollin ,
.fadeTopIn.scrollTopin ,
.fadeRightIn.scrollRightin ,
.fadeLeftIn.scrollLeftin {
    opacity : 1;
    transform : translate(0, 0);
}
/*=============================================
*
* 見出し共通
*
=============================================*/
.hArea {
	background: #000;
	padding: 50px 0 0 0;
	position: relative;
	z-index: 500;
}
.hArea h1.heading ,
.hArea02 h1.heading ,
.hArea03 h1.heading {
	margin-bottom: 30px;
}
h1.heading {

}
h2.heading  {
	color: #121f74;
	display:block;
	font-size: 25px;
	letter-spacing:0.05em;
	line-height: 1.5;
	word-wrap: break-word;
}
/*=============================================
*
* 共通ボタン
*
=============================================*/
/*=============================================
*
* テキスト共通
*
=============================================*/
.txtArea {
	padding: 0
}
@media screen and (max-width:1000px){
	.txtArea {
		padding: 0 15px;
	}
}
/*---------------------------------------------
txt01
---------------------------------------------*/
.txt01 {
	color: #000;
	display:block;
	font-size: 16px;
	letter-spacing:0.1em;
	line-height: 1.8;
	margin-bottom: 30px;
	word-wrap: break-word;
}
@media screen and (max-width:768px){
	.txt01 {
		font-size: 14px;
	}
}
.note01 {
	color: #999;
	display:block;
	font-size: 14px;
	letter-spacing:0.1em;
	line-height: 1.5;
	word-wrap: break-word;
}
@media screen and (max-width:1300px){
	.note01 {
		font-size: 14px;
	}
}
@media screen and (max-width:1000px){
	.note01 {
		text-align: center;
	}
}
@media screen and (max-width:640px){
	.br01 {
		display: none;
	}
}
/* 改行 */
.br02 {
	display: none;
}
@media screen and (max-width:1000px){
	.br02 {
		display: block;
	}
}
/*=============================================
*
* ボタン共通
*
=============================================*/
.btnArea a:hover ,
input[type="submit"]:hover ,
input[type="button"]:hover {
	opacity: 0.85;
	-webkit-opacity: 0.85;
}
/*=============================================
*
* wave 波
*
=============================================*/
.waveBl {
	background: url(../images/common/wave_horiBl.svg) repeat-x 0 0;
	display: block;
	height: 17px;
	width: 100%;
}
.waveBl.bottom {
	bottom: 0;
	left: 0;
	position: absolute;
}
.wavePu {
	background: url(../images/common/wave_horiPu.svg) repeat-x 0 0;
	display: block;
	height: 17px;
	width: 100%;
}
.waveGr {
	background: url(../images/common/wave_horiGr.svg) repeat-x 0 0;
	display: block;
	height: 17px;
	width: 100%;
}
.waveBlu {
	background: url(../images/common/wave_horiBlu.svg) repeat-x 0 0;
	display: block;
	height: 17px;
	width: 100%;
}
.wavePi {
	background: url(../images/common/wave_horiPi.svg) repeat-x 0 0;
	display: block;
	height: 17px;
	width: 100%;
}
/*=============================================
*
* スクリーン
*
=============================================*/
#screen {
	background: #000;
	height: 100%;
	left: 0;
	position: fixed;
	top: -100%;
	width: 100%;
	z-index: 1000;
	
	transition: all 1s;
	transition-timing-function: cubic-bezier(.71,.08,.14,.88);
	-webkit-transition: all 1s;
	-webkit-transition-timing-function: cubic-bezier(.71,.08,.14,.88);
}
/*=============================================
*
*  footer
*
=============================================*/
#footer {
	background: #000000;
	display: block;
	height: auto;
	margin: 0 auto;
	opacity: 0;
	padding: 20px 0;
	width: 100%;
	
	transition: all 0.5s;
	-webkit-transition: all 1.5s;
}
#footer.off {
	display: none;
}
#footer.opacity {
	opacity: 0;
	-webkit-opacity: 0;
}
#footer .inner {
	margin: 0 auto;
	max-width: 1100px;
	position: relative;
	width: 100%;
}
/* ============================================
#footerNav01 , #footerNav02, #footerNav03
============================================ */
#footer #footerNav01 {
	margin-bottom: 15px;
	text-align: center;
	width: auto;
}

@media screen and (max-width:850px){
	#footer #footerNav01 {
		
	}
}
#footer #footerNav01 li  {
	display: inline-block;
	margin-bottom: 20px;
	padding: 0 10px;
}
/* a | ボタン　*/
#footer #footerNav01 li a {
	display: block;
	height: 20px;
	width: 100%;
	
	transition: all 0.2s;
	-webkit-transition: all 0.2s;

	overflow: hidden;
	text-indent: 100%;
	white-space:nowrap;
	text-indent: -9999em;
}
#footer #footerNav01 li.nav01 a {
	background: url(../images/common/footerNav-01.png) no-repeat left 0;
	width: 25px;
}
#footer #footerNav01 li.nav02 a {
	background: url(../images/common/footerNav-02.png) no-repeat left 0;
	width: 36px;
}
#footer #footerNav01 li.nav03 a {
	background: url(../images/common/footerNav-03.png) no-repeat left 0;
	width: 27px;
}
#footer #footerNav01 li.nav04 a {
	background: url(../images/common/footerNav-04.png) no-repeat left 0;
	width: 54px;
}
#footer #footerNav01 li.nav05 a {
	background: url(../images/common/footerNav-05.png) no-repeat left 0;
	width: 107px;
}
#footer #footerNav01 li.nav06 a {
	background: url(../images/common/footerNav-06.png) no-repeat left 0;
	width: 43px;
}
#footer #footerNav01 li.nav07 a {
	background: url(../images/common/footerNav-07.png) no-repeat left 0;
	width: 52px;
}
#footer #footerNav01 li.nav08 a {
	background: url(../images/common/footerNav-08.png) no-repeat left 0;
	width: 67px;
}
/* ナビホバー */
#headerNavArea #headerNav01 li:hover a {
	top: -10px;
}

#footer #footerNav01 li a:hover  {
	opacity: 0.85;
	-webkit-opacity: 0.85;
}
/* ============================================
sns
============================================ */
#footer .snsArea {
	padding: 10px;
}
#footer .snsArea ul li {
	display: inline-block;
	vertical-align: top;
}
/* ============================================
sns
============================================ */
#footer .snsBtn {
	padding: 10px;
	text-align: center;
}
#footer .snsBtn li {
	display: inline-block;
	vertical-align: top;
}
/* ============================================
pageTop | ぺージトップ
============================================ */
#footer #pageTop {
	bottom: 10px;
	width:50px;
	height:50px;
	position: absolute;
	right: 0px;
}
#footer #pageTop:hover {
	opacity: 0.9;
	-webkit-opacity: 0.9;
}
@media screen and (max-width:700px){
	#footer #pageTop {
		bottom: -65px;
		right: 0;
	}
}
#footer #pageTop a {
	display: block;
}
/* ============================================
#copyright | コピーライト
============================================ */
#copyright {
	margin: 0 auto;
	text-align: center;
}
#copyright small {
	color: #666;
	display: block;
	margin: 0 auto;
	width: auto;
}
/*=============================================
*
* table | テーブル
*
=============================================*/
/* テーブル */
table {
	border: none;
	font-size: 16px;
	margin: 0 auto;
	max-width: 700px;
	padding: 15px;
	width: auto;
}
@media screen and (max-width:768px){
	table {
		width:100%;
	}
}
table th {
	color: #000;
	font-size: 14px;
	letter-spacing:0.2em;
	text-align:left;
	width: 35%;
	padding: 10px 0 10px 0;
	vertical-align: top;

}
@media screen and (max-width:480px){
	table th {
		display: block;
		border: none;
		padding: 10px;
		text-align: left;
		width: 100%;
	}
}
table td {
	color: #000;
	font-size: 14px;
	text-align: left;
	padding: 10px 0 10px 10px;
	vertical-align: top;
	word-wrap: break-word;
}
@media screen and (max-width:480px){
	table td {
		border:none;
		display:block;
		padding: 10px 2%;
	}
}

/*=============================================
*
* ローダー
*
=============================================*/
.cssload-loader {
	position: absolute;
	left: calc(50% - 30px);
	width: 60px;
	height: 60px;
}
/*=============================================
*
* comingSoon
*
=============================================*/
.comingSoon {
	text-align: center;
}