@charset "utf-8";

/*******************************
  共通設定
*******************************/

	body {
		color: #000;
		font-family: Futura, 'Century Gothic', "游ゴシック", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
		font-size: 14px;
		line-height: 2.28;
		-webkit-text-size-adjust: 100%;
	}
	
	a {
		color: #000;
		text-decoration: none;
	}
	a.hov,
	input.hov,
	.hov a	{
		-webkit-transition: opacity .5s;
		transition: opacity .5s;
	}
	a.hov:hover,
	input.hov:hover,
	.hov a:hover {
		-ms-filter: "alpha(opacity=80)";
		opacity: .8;
	}
	
	img {
		max-width: 100%;
	}
	
	
	.wrap {
		max-width: 1000px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.normalFont {
		font-family: sans-serif;
	}
	.sp {
		display: none;
	}
	.textShadow {
		text-shadow: 0 0 50px #000;
	}
	.textShadow02 {
		text-shadow:  0 0 50px #000, 0 0 10px #000;
	}
	
	
	#wrap {
		position: relative;
		overflow: hidden;
	}
	
	/* header */
	
	#header {
		height: 87px;
		padding: 28px 0 0;
	}
	#siteTitle {
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
	}
	#header .menu {
		display: none;
	}
	
	#gNav {
		font-size: 16px;
		text-align: center;
		line-height: 1;
	}
	#gNav .close {
		display: none;
	}
	#gNav li {
		display: inline-block;
		margin: 0 0 0 3.5%;
		height: 30px;
	}
	#gNav .sp {
		display: none;
	}
	#gNav .top {
		margin: 0;
	}
	#gNav strong {
		color: #1cbb85;
		font-weight: normal;
	}
	
@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:640px) {
	body {
		line-height: 1.5;
	}
	
	#wrap {
		box-sizing: border-box;
		padding: 50px 0 0;
	}
	
	#header {
		width: 100%;
		height: 50px;
		padding: 0;
		position: fixed;
		z-index: +1;
		top: 0;
		left: 0;
		background: #fff;
	}
	#siteTitle {
		font-size: 24px;
		text-align: left;
		line-height: 50px;
	}
	#header .menu {
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		right: 0;
		background: #000;
	}
	#header .menu:before {
		content: '';
		display: block;
		width: 20px;
		height: 16px;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
		position: absolute;
		top: 15px;
		left: 15px;
	}
	#header .menu:after {
		content: '';
		display: block;
		width: 20px;
		height: 2px;
		position: absolute;
		top: 24px;
		left: 15px;
		background: #fff;
	}
	#gNav {
		display: none;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 50px 0 0;
		position: fixed;
		z-index: 9990;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.9);
		overflow: scroll;
	}
	#gNav.active {
		display: block;
	}
	#gNav .close {
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		right: 0;
	}
	#gNav .close:before,
	#gNav .close:after {
		content: '';
		display: block;
		width: 40px;
		height: 2px;
		background: #fff;
		position: absolute;
		top: 24px;
		left: 5px;
	}
	#gNav .close:before {
		transform: rotate(45deg);
	}
	#gNav .close:after {
		transform: rotate(-45deg);
	}
	#gNav .wrap {
		padding: 0;
	}
	#gNav li {
		display: block;
		height: auto;
		margin: 0;
		border-top: 1px solid #666;
		line-height: 40px;
	}
	#gNav .sp {
		display: block;
	}
	#gNav .sp li {
		margin: 10px;
		border: 1px solid #666;
	}
	#gNav a {
		display: block;
		color: #fff;
	}
	#gNav a span {
		display: block;
		padding: 0 5px 5px;
		font-size: 12px;
		line-height: 1.5;
	}
}
@media only screen and (max-width:480px) {
}
	
	/* contents */
	
	.sNav {
		margin: 0 0 2px;
		padding: 25px 0;
		position: relative;
		background: #000;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
	}
	.sNav li {
		display: inline-block;
		margin: 0 0 0 70px;
	}
	.sNav li:first-child {
		margin: 0;
	}
	.sNav a {
		color: #fff;
	}
	.sNav strong,
	.sNav a.active {
		color: #1cbb85;
		font-weight: normal;
	}
	.sNav02 {
		background: #f2f2f2;
	}
	.sNav02 a {
		color: #010101;
	}
	
@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:900px) {
	.sNav li {
		margin: 0 0 0 20px;
	}
	.sNav li:first-child {
		margin: 0;
	}
}
@media only screen and (max-width:640px) {
	.sNav {
		padding: 0;
		font-size: 12px;
		line-height: 16px;
	}
	.sNav .wrap {
		padding: 0;
	}
	.sNav li {
		box-sizing: border-box;
		width: 50%;
		margin: 0;
	}
	.sNav li:nth-child(odd) {
		border-right: 1px solid #fff;
	}
	.sNav li:nth-child(n+3) {
		border-top: 1px solid #fff;
	}
	.sNav a,
	.sNav strong {
		display: block;
		padding: 16px 0;
	}
	.sNav li:nth-child(n+3) a,
	.sNav li:nth-child(n+3) strong {
		padding: 8px 0;
	}
	.sNav strong,
	.sNav a.active {
		background: #1cbb85;
		color: #fff;
	}
	.sNav br.sp {
		display: inline;
	}
}
@media only screen and (max-width:480px) {
}

	/*subNav*/


	#subNav {
		padding: 17px 19px 18px 23px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 8900;
		background: rgba(255,255,255,.6);
	}
	#subNav .info,
	#subNav .contact {
		margin: 0 0 21px;
		cursor: pointer;
	}

	
@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:640px) {
	#subNav {
		display: none;
	}
}
@media only screen and (max-height:640px) {
	/*#subNav {
		display: none;
	}*/
}
@media only screen and (max-width:480px) {
	#siteTitle {
		top: 20px;
		left: 20px;
		font-size: 24px;
	}

	#subNav .info,
	#subNav .contact,
	#subNav .follow {
		right: 9px;
	}
}
	/* footer */
	
	#footer {
		font-size: 12px;
		line-height: 1;
	}
	#footer .wrap {
		max-width: none;
	}
	#fNav {
		padding: 28px 0 18px;
	}
	#fNav {
		text-align: center;
	}
	#fNav li {
		display: inline-block;
	}
	#fNav li:before {
		content: '│';
		padding: 0 1em;
	}
	#fNav .top:before {
		content: normal;
	}
	#copyright {
		border-top: 5px solid #000;
		padding: 15px 10px 10px;
		position: relative;
		text-align: right;
	}
	#copyright .inner {
		padding: 0 300px 0 0;
		text-align: left;
	}
	#copyright .inner div {
		display: inline-block;
		margin: 0 2em 10px 0;
		vertical-align: top;
	}
	#copyright .lang {
		width: 77px;
		height:  12px;
		position:  relative;
	}
	#copyright .lang ul {
		position: absolute;
		left: 0;
		bottom: -3px;
	}
	#copyright .lang li {
		margin: 10px 0 0;
		background: #fff;
		background: rgba(255,255,255,.8);
	}
	#copyright .lang .alt {
		display: none;
	}
	#copyright .copyright {
		position: absolute;
		top: 15px;
		right: 10px;
	}
	
@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:640px) {
	#fNav {
		display: none;
	}
	#copyright {
		text-align: center;
	}
	#copyright .inner {
		display: none;
	}
	#copyright .copyright {
		position: static;
	}
}
@media only screen and (max-width:480px) {
}

	/* pop */

	div.pop {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #1d2830;
		background: rgba(4,17,26,.9);
		color: #e6e7e7;
		overflow-y: scroll;
	}
	body.mobile div.pop {
		overflow-x: scroll;
	}
	div.pop .close {
		width: 41px;
		height: 41px;
		position: fixed;
		top: 40px;
		right: 40px;
		z-index: 9999;
		background: url(../imgs/bt-close.png) 0 0 no-repeat;
		cursor: pointer;
	}
	div.pop .inner {
		max-width: 500px;
		margin: 50px auto 10px;
		padding: 0 10px;
	}
	div.pop .title {
		margin: 0 0 20px;
		padding: 104px 0 20px;
		position: relative;
		color: #fff;
		font-size: 28px;
		font-weight: normal;
		letter-spacing: .2em;
		line-height: 30px;
		text-align: center;
	}
	div.pop .title:after {
		content: '';
		display: block;
		width: 20px;
		height: 1px;
		margin: 0 0 0 -10px;
		position: absolute;
		left: 50%;
		bottom: 0;
		background: #3b4850;
	}
	
	#contact .title {
		background: url(../imgs/blt-contact.png) 50% 0 no-repeat;
	}
	#contact table {
		width: 100%;
		margin: 30px 0 40px; 
	}
	#contact th,
	#contact td {
		border-bottom: 1px solid #3b4850;
		padding: 28px 0 1px;
		position: relative;
	}
	#contact th div,
	#contact td div {
		position: relative;
	}
	#contact th:before,
	#contact td:before {
		content: '';
		display: block;
		width: 100%;
		position: absolute;
		top: 28px;
		left: 0;
		bottom: 1px;
		background: #2d373f;
		background: rgba(255,255,255,.07);
	}
	#contact th {
		width: 100px;
		padding-left: 5px;
		color: #aec9d8;
		font-weight: normal;
		line-height: 40px;
	}
	#contact td div {
		padding: 7px 0;
	}
	#contact table input,
	#contact table textarea {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: none;
		padding: 5px;
		background: transparent;
		color: #fff;
		font-size: 14px;
		outline: none;
	}
	#contact table input {
		line-height: 1;
	}
	#contact table textarea {
		line-height: 1.5;
	}
	#contact input[type=submit] {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #3b4850;
		padding: 10px;
		background: url(../imgs/bg-bt.png) 50% 0 repeat;
		background: url(../imgs/blt-btContact.png) 175px 50% no-repeat, url(../imgs/bg-bt.png) 50% 0 repeat;
		color: #fff;
		font-size: 13px;
		text-align: center;
	}

@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:640px) {
}
@media only screen and (max-width:480px) {
	div.pop .inner {
		margin: 30px auto 10px;
	}
	div.pop .close {
		top: 20px;
		right: 20px;
	}
	
	#contact table {
		margin: 10px 0 40px; 
	}
	#contact input[type=submit] {
		background: url(../imgs/bg-bt.png) 50% 0 repeat;
	}
}

	/* info */

	#info .title {
		background: url(../imgs/blt-info.png) 50% 0 no-repeat;
	}
	#info p {
		font-size: 12px;
		line-height: 2.2;
		text-align: center;
	}
	#info p img {
		margin: 0 0 0 10px;
		vertical-align: middle;
	}
	#info table {
		width: 100%;
		margin: 15px 0 40px; 
	}
	#info th,
	#info td {
		border-bottom: 1px solid #3b4850;
		padding: 25px 0 5px;
		line-height: 1.5;
	}
	#info th {
		width: 100px;
		padding-left: 5px;
		color: #aec9d8;
		font-weight: normal;
	}
	#info .more {
		display: block;
		border: 1px solid #3b4850;
		padding: 10px;
		background: url(..//imgs/bg-bt.png) 50% 0 repeat;
		color: #fff;
		font-size: 13px;
		text-align: center;
	}
	#info .more:before {
		content: url(..//imgs/blt-more.png);
		margin: 0 15px 0 0;
		position: relative;
		top: 2px;
	}
	#info table a {
		color: #fff;
	}

@media only screen and (max-width:1280px) {
}
@media only screen and (max-width:640px) {
}
@media only screen and (max-width:480px) {
	#info table {
		margin: 20px 0; 
	}
}

.gray_out{
	position: relative;
}
.gray_out::before{
	content: '';
	background: gray;
	opacity: .9;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}