/* CSS Document */
html, body, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	line-height:1.4;
	vertical-align: baseline;
	background: transparent;
	list-style-type: none;
	box-sizing:border-box;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

/* IE7でpadding指定 */ 
*:first-child+html body { 
padding-left: 1px; 
} 
 
/* IE6以下でpadding指定 */ 
*html body {padding-left: 1px;}


div, dl, ul{
    zoom: 1;
	box-sizing:border-box;
}
dl:after,
div:after,
.cb:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.l{float:left;}
.r{float:right;text-align:left;}

.ls05{letter-spacing: 0.5rem;}
.ls1{letter-spacing: 1rem;}

.blk{display:block;}

/* float box  */
.boxct{text-align:center;margin:0 auto;}
.fright{float:right;display:block;width:auto;height:auto;}
.fleft{float:left;display:block;width:auto;height:auto;}

a{text-decoration: none;overflow:hidden;}
img{border:0;}
strong{font-weight:normal;}

.disc li{
	list-style-position: outside;
	list-style-type: disc;
	margin-left:1.5em;
}

*{ margin:0; padding:0;}
html{
	height:100%;
	font-size: 62.5%;
	/*font-size: 62.5%; ベースを10pxにしています*/
}
body {
	font-size: 1.4rem; /*10px*/
	-webkit-text-size-adjust: 100%;
	font-style: normal;
	font-weight: normal;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background-color:#fff;
	padding:0;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	text-align:left;
	background-color: #fff;
}
body.eng{font-family: "Hiragino Mincho ProN", serif;}
body.chn{font-family : 'SimSun','sans-serif';}


h1,h2,h3,h4,h5,h6,h7,
p,th,td,dt,dd,li,a,
select,input,div{
	line-height: 1.6;
	font-size: 1.4rem;
	font-weight:normal;
	color: #505050;
	background-image: url(../images/common/1dot.gif);
	background-repeat: no-repeat;
	box-sizing:border-box;
	max-height: 999999px;	
}

/*-------------------- ページベース --------------------*/
.ct{text-align:center;}
.title-ln{width:100%;border-bottom:1px solid #505050;line-height:1.4;padding-bottom:20px;margin:40px auto 35px;text-align:center;font-size:1.5em;}
	.title-ln span{font-size:0.9em;}
.serifBox{width:100%;padding:40px 0;display: table;}
.serifBox2{width:100%;border-radius:10px;display: table;}
.serifBox3{width:100%;border-radius:10px;display: table;border:2px solid #852432;color:#852432;background-color:#fff;}


.red{background-color:#852432;color:#fff !important;}
.brw{background-color:#786966;color:#fff !important;}
.gry{background-color:#f2f2f2;}
.gry2{background-color:#f7f6f7;}
.red-ft{color:#852432 !important;}
.red-ft2{color:#c52620 !important;}
.wht-ft{color:#fff !important;}
.brw-ft{color:#736966 !important;}

.Lsp-1{letter-spacing: -1px;}
.Lsp-2{letter-spacing: -2px;}
.Lsp-3{letter-spacing: -3px;}
.arrowBT,
.arrowBT2{position: relative;}
.arrowBT:after{
	position: absolute;
	width:100%;
	content: "";
	background-image: url(../images/common/arrow_rd_bt.png);
	background-repeat: no-repeat;
	background-position: center top;
	width: 21px;
	height:18px;
	left: 50%;
	bottom: -18px;
	margin-left: -10px;
	visibility:visible;/*divのCSS対応　visibility: hidden;*/
}
.arrowBT2:after{
	position: absolute;
	width:100%;
	content: "";
	background-image: url(../images/common/arrow_rd_bt2.png);
	background-repeat: no-repeat;
	background-position: center top;
	width: 50px;
	height:30px;
	left: 50%;
	bottom: -30px;
	margin-left: -25px;
	visibility:visible;/*divのCSS対応　visibility: hidden;*/
}
.ft080{font-size:0.8em !important;}
.ft090{font-size:0.9em !important;}
.ft110{font-size:1.1em !important;}
.ft125{font-size:1.25em !important;}
.ft130{font-size:1.3em !important;}
.ft140{font-size:1.4em !important;}
.ft160{font-size:1.6em !important;}
.ft180{font-size:1.8em !important;}
.ft200{font-size:2em !important;}
.ft220{font-size:2.2em !important;}
.ft360{font-size:3.6em !important;}
.mb05{padding-bottom:0.5em !important;}
.mb1{padding-bottom:1em !important;}
.pd-tb10{padding:10px !important;}
.pd-tb20{padding:20px !important;}
.cachCom{font-size:1.6em !important;}

section{position:relative;z-index:10;display:table;width:100%;}
.sectionin{width:960px;margin:0 auto;}
.sectionin.min{width:720px;margin:0 auto;}
.scrEvent {display: none;}

.w100{width:100%;}

hr{border-top:1px dotted #505050;width:960px;margin:0 auto;}
@media (max-width: 960px) {
	hr{width:94%;}
}

a,
input{
	transition: 0.5s ;
	-webkit-transition: 0.5s ;
}

.backanime{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-500;
}
.backanime div{
	width:20%;
	height:25%;
	float:left;
 }

.pc,
.pcbr{display:block;}
.sp,
.spbr{display:none;}


/*-------------------- ヘッダー --------------------*/
header{width:100%;margin:0;padding:30px 0 0;display:table;z-index: 500;position:absolute;top:0;}
header #headerin{width:960px;margin:0 auto;}


header #maintitle{float:left;}
	header h1 a:hover{opacity:0.6;}

header nav{float:right;}
header nav ul{display:table;clear:both;}
header nav li{color:#fff;float:left;}
header nav li a,
header nav li span{
	color: #fff;
	line-height: 1.6;
	font-size:1.3rem;
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;
	letter-spacing: 1px;
}
	body.eng header nav li a{font-family: "Meiryo UI" , Meiryo , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;}
	body.chn header nav li a{font-family : 'SimSun','sans-serif';}

header nav #lang{margin-bottom:10px;float:right;}
header nav #lang li{margin-left:14px;}
header nav #lang li a{
	border:1px solid #999999;
	color:#fff;
	line-height:22px;
	width:76px;
	display: block;
	text-align:center;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
header nav #lang li a:hover{
	border:1px solid #999999;
	background-color: #999999;
	color:#fff;
}
header nav #navi li{margin:4px 0 0;position:relative;}
header nav #navi > li:last-child{margin:0;}
header nav #navi li a,
header nav #navi li span{padding:0 14px;text-align: center;display: block;}
	header nav #navi li a:hover,
	header nav #navi li span:hover{opacity:0.6;}
header nav #navi li:before{content:"|";float:left;}
header nav #navi > li:first-child:before{content:"";}
header nav #navi > li:last-child:before{content:"";}
header nav #navi > li:last-child a{
	background-color: #999999;
	color: #fff;
	margin:0;
	padding:0;
	line-height: 26px;
	font-size:1.2rem;
	width: 76px;
	white-space: nowrap;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	letter-spacing: 0;
}
header nav #navi > li:last-child a:hover{
	background-color: #8C1E32;
	opacity:1;
}
	header nav #naviin{display:none;}

@media (min-width: 641px) {
	header nav #navi li:hover ul,
	header nav #navi li ul:hover{
	display: table;
	position: absolute;
	z-index: 100;
	top: 20px;
	left: -250px;
	width: 820px;
	padding: 10px 10px 0;
    animation: NaviAnime 1s ease 0s 1;
    -webkit-animation: Navinime 1s ease 0s 1;
	}
	header nav #navi li ul li:first-child{padding-left:10px;}
	header nav #navi li ul li:last-child{padding-right:10px;}
	header nav #navi li ul li{
		padding: 5px 0;
		display: table-cell;
		width:100px;
	background-image: url(../images/common/menu_bk25.png);
	background-repeat: repeat;
	}
	header nav #navi li li:first-child:before{content:"";}
	header nav #navi li ul li a {white-space: nowrap;text-align: center;width : -webkit-calc(100% - 1em) ;width : calc(100% - 1em) ;}
}
	@keyframes Navinime {
		0% {opacity: 0;padding: 30px 10px 0;}
		100% {opacity: 1;tpadding: 10px 10px 0;}
	}



header #nav-toggle {
    display: none;
    visibility: hidden;
}


footer{margin-top:55px;
	border-bottom:20px solid #000;
}
footer .sectionin{display:table;margin:0 auto;}
footer h2.ft-title{float:left;display:table-cell;}
	footer h2.ft-title a:hover{opacity:0.6;}
footer .add{float:left;display:table-cell;margin:10px 0 0 50px;}
	footer .add h2{font-size:3rem;line-height:1;letter-spacing: 4px;}
	#page.outside.en footer .add h2{font-size:2.6rem;letter-spacing: 2px;}

	footer .add address{font-style:normal;padding-top:10px;font-size:1.7rem;}
	footer .add address span{display:block;padding-top:10px;font-size:2.4rem;}

footer .link{float:right;display:table-cell;width:412px;height:144px;position: relative;}
footer .linkin{position: absolute;bottom:0;width:100%;}
footer .link .fb{
	float:left;
	bottom:0;
	width: 50px;
}
	footer .link .fb a{
		width: 50px;
		height: 50px;
		display: block;
		background-color: #000;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		background-image: url(../images/common/ft_facebook.png);
		background-repeat: no-repeat;
		background-position: center center;
		text-indent:-99999px;
	}
	footer .link .fb  a:hover{
		background-color: #385495;
	}
	footer .link .offical{float:right;bottom:0;width:340px;}
	footer .link .offical a{
		width:100%;
		display:block;
		text-align:center;
		line-height:50px;
		border:2px solid #000;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		font-size:1.5rem;
		font-weight:bold;
	}
	footer .link .offical a:hover{
		color:#fff;
		border:2px solid #000;
		background-color:#000;
	}

footer #copy{
	width:100%;
	display:table;
	font-size:1.3rem;
	padding:20px 0 70px;
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;
}
body.eng header nav li a{font-family: "Meiryo UI" , Meiryo , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;}
body.chn header nav li a{font-family : 'SimSun','sans-serif';}

#main{z-index: 100;position:absolute;top:0;width:100%;}



/*-------------------- タイトル --------------------*/
.title{
	font-size: 3.4rem;
	line-height: 1;
	letter-spacing: 12px;
	color: #fff;
	background-image: url(../images/common/title_border.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding:80px 0 20px;
	margin:0 auto;
	text-align:center;
	display:block;
}
.title.gr{color:#505050;background-image: url(../images/common/title_border_gr.png);}
.title span{font-size:1.3rem;display:block;padding-top:15px;letter-spacing: 2px;}



/*-------------------- お問合せ --------------------*/
#contact .title{color:#505050;background-image: url(../images/common/title_border_gr.png);}

#contact .sectionin{
	margin-top:70px;
	background-color: #fff;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
#contact .sectionin .form{width:720px;padding:40px 0;margin:0 auto;}

#contact .sectionin .form ul.check{width:88%;display:table;margin:0 auto;}
#contact .sectionin .form ul.check li{float:left;padding:5px 20px;color:#8C1E32;font-size:1.2em;font-weight:bold;}
#contact .sectionin .form ul.check li input[type=checkbox]{width:20px;height:20px;}
#contact .sectionin .form ul.check li label{line-height:1;padding-left:7px;margin-top:-5px;positon:relative;z-index:5;}

#contact .sectionin .form .levelbox{width:88%;margin:20px auto 0;display:table;}
#contact .sectionin .form .levelbox dt{display:table-cell;width:7em;text-align:left;vertical-align:middle;}
#contact .sectionin .form .levelbox dt div{
	display: table;
	width: 80px;
	color: #fff;
	font-size: 1.2em;
	position: relative;
	line-height: 36px;
	text-align: center;
	padding-right: 10px;
	background-image: url(../images/common/arrow_gry_rt.png);
	background-repeat: no-repeat;
	background-position: right center;
}
#contact .sectionin .form .levelbox dd{
	display:table-cell;
	width : -webkit-calc(100% - 7em) ;
	width : calc(100% - 7em) ;
}
#contact .sectionin .form .levelbox dd .levelcom{width:100%;display:table;}
	#contact .sectionin .form .levelbox dd .levelcom div{display:table;text-align:center;line-height:40px;}
	#contact .sectionin .form .levelbox dd .levelcom div:nth-child(1){float:left;font-size:1.2em;}
	#contact .sectionin .form .levelbox dd .levelcom div:nth-child(2){float:right;font-size:1.2em;}
#contact .sectionin .form .levelbox dd .levelline{
	width: 96%;
	height:30px;
	display: table;
	margin: 0 auto;
	background-image: url(../images/common/line.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#contact .sectionin .form .levelbox dd .levename{width:100%;display:table;text-align:center;font-weight:bold;padding:10px 0 0;font-size:1.2em;}

#contact .sectionin .form table{
	width:100%;
	margin:40px auto 0;
}
	#contact .sectionin .form table th{min-height:55px;text-align:left;vertical-align:top;padding:17px 0 10px;color:#505050;
	font-weight:normal;
	width:190px;
	}
	#contact .sectionin .form table td{
		min-height:55px;
		text-align:left;
		vertical-align:middle;
		padding:10px 0;
		width : 470px ;
	}

		#contact .sectionin .form table th div{
			float:right;
			background-color:#8C1E32;
			text-align:center;
			padding:4px 10px;
			line-height:1;
			color:#fff;
			font-size:1.2rem;
			display: table-cell;
			border-radius: 2px;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
		}
	#contact .sectionin .form table td{padding-left:20px;}
	#contact .sectionin .form table td .fbox{float:left;}
	#contact .sectionin .form table td label{width:2em;text-align:right;vertical-align:middle;display:inline;float:left;padding:7px 0;}
	#contact .sectionin .form table td span{padding-top:5px;display:inline;float:left;}
	#contact .sectionin .form table td input{
		padding:7px 10px;
		width:100%;
		display:table-cell;
	}
	#contact .sectionin .form table td select{padding:7px 10px;line-height: 1.6;font-size: 1.4rem;}
	#contact .sectionin .form table td textarea{width:100%;height:320px;padding:7px 10px;display:table-cell;}

	#contact .sectionin .form table td input#post1{width:6em;}
	#contact .sectionin .form table td input#post2{width:8em;}
	#contact .sectionin .form table #ePost td div{margin:0 0 10px;}

	#contact .sectionin .form table td select,
	#contact .sectionin .form table td input,
	#contact .sectionin .form table td textarea{margin:0;box-sizing: border-box;}

	#contact .sectionin .form table td .waku.on input,
	#contact .sectionin .form table td .waku.on textarea{background-color:#FFE6E7;}

	#contact .sectionin .form table td #number,
	#contact .sectionin .form table td #age{width:160px;}

	#contact .sectionin .form option{color:#000;}
	#contact .sectionin .form .firstChild{color:#ccc;}

	#contact .sectionin .form .errbox{display:block;width:100%;color:#ba0c2f;font-weight:bold;clear:both;}


	#contact .sectionin .form .button{margin:25px auto 15px;display:table;}
	#contact .sectionin .form .button a{
		background-color: #8C1E32;
		width:210px;
		line-height:44px;
		display:block;
		color:#fff;
		text-align:center;
		font-size:2rem;
		font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;
	}
		body.eng #contact .sectionin .form .button a{font-family: "Meiryo UI" , Meiryo , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;}
		body.chn #contact .sectionin .form .button a{font-family : 'SimSun','sans-serif';}

	#contact .sectionin .form .button a:hover{background-color:#550816;}
#contact .sectionin .form .button a:first-letter{letter-spacing: 20px;}
	#contact .sectionin .form .buttonbox{margin:25px auto 0;display:table;width:80%;}
	#contact .sectionin .form .buttonbox .button.back{float:left;width:48%;text-align:center;}
	#contact .sectionin .form .buttonbox .button.submit{float:right;width:48%;text-align:center;}

#contact .sectionin .form .err select,
#contact .sectionin .form .err input,
#contact .sectionin .form .err textarea{background-color:#FFBCBD;}

#contact .sectionin #pleasecontact .box.gry{border-top:1px dotted #000;}
#contact .sectionin #pleasecontact .box.gry div{border-bottom:1px dotted #000;padding:15px 20px;font-size:1.2em;text-align:center;}



@media (max-width: 640px) {
#body{
	width:640px;
	overflow: hidden;
}
.pc,
.pcbr{display:none;}
.sp,
.spbr{display:block;}
#contact .sectionin .form ul.check{padding-top:20px;}
#contact .sectionin .form ul.check li {
    padding: 10px 20px;
}
input[type=text] {
  font-size: 20px;
  scale(0.8);
}

#contact .sectionin .form .levelbox{width:90%;}
#contact .sectionin .form .levelbox dt{display:table;width:auto;}
#contact .sectionin .form .levelbox dt div{
	display: table;
	width: 100px;
	color: #fff;
	font-size: 1.2em;
	position: relative;
	line-height: 36px;
	text-align: center;
	padding-right: 0;
	padding-bottom: 10px;
	background-image: url(../images/common/arrow_gry_bt.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
	
#contact .sectionin .form .levelbox dd{
	display:table;
	width : 100%;
	width : -webkit-calc(100%) ;
	width : calc(100%) ;
}
#contact .sectionin .form .levelbox dd .rangeslider{
	width: 96%;
	height:30px;
	display: table;
	margin: 0 auto;
}
	
	#contact .sectionin .form table{width:90%;margin:0 auto;}
	#contact .sectionin .form table th,
	#contact .sectionin .form table td{height:auto;display:inline-block;border-bottom:none;padding:5px 0;width:100%;}
	#contact .sectionin .form table td{padding:0;width:100%;}

	#contact .sectionin .form table th{margin-top:15px;padding:15px 0 10px 0;}


	#contact .sectionin .form table td input{padding:7px 10px;width:100%;margin:0 0 10px;}
	#contact .sectionin .form table td textarea{width:100%;height:320px;}

	#contact .sectionin .form table td label{
		padding: 7px 5px;
		margin-left:5px;
		background-color: #f0f0f0;
		width:4em;
		text-align:center;
		white-space: nowrap;
	}

	#contact .sectionin .form table td .fbox{padding:0 0 15px 0;clear:both;}
}


#mapin{height:360px;margin-top:60px;}



#page #main{
	width: 100%;
	height: 580px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
/*-------------------- ページタイトル --------------------*/
#page #main h1#ptitle{
	font-size: 4.4rem;
	line-height: 1;
	letter-spacing: 12px;
	color: #fff;	
	padding:250px 0 20px;
	margin:0 auto;
	text-align:center;
	display:block;
}
#page #main #ptitle span{
	margin:0 auto;
	font-size: 1.8rem;
	display: table;
	padding: 8px 10px 10px;
	letter-spacing: 2px;
	background-repeat: repeat-x;
	background-image: url(../images/common/title_border.png);
	background-position: center bottom;
}
#page #main h2#ptitle {
    font-size: 2.8rem;
	line-height: 1;
	letter-spacing: 12px;
	color: #fff;	
	padding:160px 0 20px;
	margin:0 auto;
	text-align:center;
	display:block;
}
#page #main h1#ptitle2{
    font-size: 4.4rem;
    line-height: 1;
    letter-spacing: 12px;
    color: #fff;
    padding: 60px 0 0;
    margin: 0 auto;
    text-align: center;
    display: block;	
}

#page #main .subtitle{
	width:100%;
	text-align:center;
	position:absolute;
	bottom:0;
	background-image: url(../images/common/subtitle_back.png);
	background-position: center center;
	background-repeat: repeat;
}
#page.service #main .subtitle{background-image: url(../images/common/subtitle_back_service.png);}
#page #main .subtitle h2{
	font-size: 3rem;
	color:#fff;
	line-height: 80px;
}
#page #Toptextbox{background-color:#8C1E32;}
#page #Toptextbox p{color:#fff;padding:40px 0;line-height:2;letter-spacing: 2px;}




@media (max-width: 640px) {
html{font-size:100%}
body{font-size:1.6rem;-webkit-text-size-adjust:100%; overflow-x: hidden; /* 2017.05.18追加 overflow-x: hidden; */}
dd,div,dt,h1,h2,h3,h4,h5,h6,h7,input,textarea,li,option,p,select,td,th{
	margin: 0;
	padding: 0;
	line-height: 1.4;
	font-size: 1.2rem;
	max-height: 999999px;
}

.pcimg{display:none;visibility: hidden;}
.spimg{display:block;visibility: visible;}
.spbr{display:block;}


/*-------------------- ページベース --------------------*/
.title-ln{margin-bottom:30px;font-size:1.3em !important;}
.serifBox{padding:25px 0;}
.ft110{font-size:1.02em !important;}
.ft125{font-size:1.025em !important;}
.ft140{font-size:1.1em !important;}
.ft160{font-size:1.2em !important;}
.ft180{font-size:1.25em !important;}
.ft220{font-size:1.5em !important;}

.cachCom{font-size:1.2em !important;}
	

#main{width:100%;}

/* ***********************************************************
* #global-nav
* *********************************************************** */
header{height:100%;
	height : -webkit-calc(100% - 100px) ;
	height : calc(100% - 100px) ;
	}
header #headerin{width:100%;}
header nav#nv {
    height: 0;
}
.open #global-nav {
	z-index: 1000;
	visibility: visible;
	padding-top:20px;
	overflow: auto;
}
#global-nav {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#global-nav ul {
  display: table;
  vertical-align: middle;
  list-style: none;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li {
  opacity: 0;
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
}
.open #global-nav ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.open #global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg {
  content: "";
  width: 3000px;
  height: 3000px;
  margin-right: -1500px;
  margin-top: -1500px;
  top: 43px;
  right: 50px;
  display: block;
  position: fixed;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(.02);
  transform: scale(.02);

}
.open #nav-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
	background: none;
	background-image: url(../images/common/menu_bk.png);
	
}

/* ***********************************************************
* #nav-toggle
* *********************************************************** */
header #nav-toggle{display: block;visibility:visible;}
#nav-toggle {
  display: block;
  position: fixed;
  right: 36px;
  top: 20px;
  width: 51px;
  height: 54px;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#nav-toggle div {
  position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #fff;
	left: 0;
	zoom: 1;
	-webkit-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	box-shadow:2px 2px 10px -1px #000000;
}
	#nav-toggle p{
		position: absolute;
		color:#fff;
		font-size:12px;
		text-align:center;
		top:48px;
		letter-spacing: 2px;
		text-align:center;
		width:51px;
	}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 18px;
}
#nav-toggle span:nth-child(3) {
  top: 36px;
}
.open #nav-toggle {
  background: transparent;
}
.open #nav-toggle span {
  background: #fff;
}

.open #nav-toggle span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  zoom: 1;
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  zoom: 1;
}


header #maintitle{margin-left:20px;}
header nav {
    float: none;
}
header nav #lang{display:table;padding:0 0;width:300px;margin:0 auto 10px;float:none;}
header nav #lang li{margin-left:0;width:45%;}
header nav #lang li:last-child{float:right;width:45%;}
header nav #lang li a{
	border:1px solid #999999;
	color:#fff;
	line-height:22px;
	width:100%;
	display: block;
	text-align:center;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
header nav #lang li a:hover{
	border:1px solid #999999;
	background-color: #999999;
	color:#fff;
}


	header nav #navi{display:table;padding:0 0;width:420px;margin:0 auto;float:none;}
	header nav #navi li{
		display: block;
		box-sizing:border-box;
		border-right:none;
		width:100%;
	}
	header nav #navi > li:first-child{border-left:none;}
	header nav #navi li a,
	header nav #navi li span{
		display:block;
		padding:0;
		color:#fff;
		font-size:1.6rem;
		line-height:60px;
		color:#fff;
		border-bottom:1px solid #fff;
	}
header nav #navi > li:last-child a {
    line-height: 3em;
    font-size: 1.6rem;
    width: 100%;
    white-space: nowrap;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    letter-spacing: 0;
}
header nav #navi li:before{content:"";}
	header nav #naviin{display:block;}
	header nav #naviin li{
		display: block;
		box-sizing:border-box;
		border-right:none;
		width:48%;
	}
	header nav #naviin li:nth-child(odd){float:left;}
	header nav #naviin li:nth-child(even){float:right;}
	
/* ---------- メニューここまで ---------- */	




header{
	width: 100%;
}

#page header{
	padding: 20px 0 0;
}

	header.fixed{
		background-image: url(../images/common/header_back.png);
		background-position: center top;
		background-repeat: repeat-x;
	}
	#index header h1{
		text-align:center;
		margin:20px auto;
		width:100%;
	}
	#page header #maintitle{
		text-align:left;
		margin:0 0 0 20px;
		width:100%;
	}



/*-------------------- タイトル --------------------*/
.title{
	font-size: 2.6rem;
	letter-spacing: 8px;
	padding:70px 0 15px;
	margin:0 auto;
	text-align:center;
	display:block;
}
.title.gr{}
.title span{font-size:1.2rem;padding-top:14px;letter-spacing: 2px;}



section.section{width:100% !important;}
section.section .sectionin{width:580px !important;margin:0 auto;}



/*-------------------- お問合せ --------------------*/
#contact .sectionin{
	margin-top:50px;
	padding-bottom:30px;
}
#contact .sectionin .form{width:100%;padding:0 0 20px 0;}
#contact .sectionin .form table{
	width:560px;
	margin:40px auto 0;
}

	#contact .sectionin .form .button a{
		background-color: #8C1E32;
		width:300px;
		line-height:50px;
		font-size:1.6rem;
	}



#map{margin-top:0;width:100%;}
#map #mapin{height:400px;margin-top:30px;width:100%;}


footer{margin-top:40px;}
footer .sectionin{display:table;margin:0 10px;width:600px;}
footer h2.ft-title{margin-left:50px;}
footer h2.ft-title img{width:120px;}
footer .add{float:left;display:table-cell;margin:10px 0 0 40px;}
	footer .add h2{font-size:2rem;}
	#page.outside.en footer .add h2{font-size:2rem;}
	footer .add address{font-style:normal;padding-top:10px;font-size:1.4rem;}
	footer .add address span{display:block;padding-top:10px;font-size:2.4rem;}

footer .link{float:none;display:table;width:520px;height:auto;margin:0 auto;padding:25px 0 0;}
footer .linkin{position:relative;bottom:0;width:100%;}
footer .link .fb{
	float:left;
	bottom:0;
	width: 60px;
}
	footer .link .fb a{
		width: 60px;
		height: 60px;
	}
	footer .link .offical{float:right;bottom:0;width:440px;}
	footer .link .offical a{
		width:100%;
		margin:5px 0 0 0;
		font-size:1.2rem;
	}

footer #copy{
	font-size:1.2rem;
	padding:40px 0 20px;
	text-align:center;
}



#page #main {
    width: 100%;
    height: 480px;
}


/*-------------------- ページタイトル --------------------*/
#page #main h1#ptitle{
	font-size: 3.6rem;
	letter-spacing: 10px;
	padding:200px 0 20px;
}
#page #main h2#ptitle{
	width:auto;
	margin:0 auto;
	font-size: 2.6rem;
	letter-spacing: 10px;
	padding:170px 0 20px;
}
#page #main h1#ptitle2 {
    font-size: 3rem;
    letter-spacing: 2px;
    padding: 20px 0 0;
	width:auto;
	margin:0 auto;
}
#page #main #ptitle span{font-size:1.8rem;}

}



/*-------------------- コラム一覧 --------------------*/
#column{background-color: #f9f8f8;}
#column .sectionin{width:900px;}
#column ul{display:table;width:100%;padding-top:55px;}
#column li{
	width:260px;
	height:340px;
	margin:0 20px 40px;
	float:left;
	background-color: #fff;
	position: relative;
}
#column li .photo{width:100%;height:160px;}
#column li .photo a{display:table;width:100%;height:100%;position: relative;overflow: hidden;} 
#column li .photo img{
	position: relative;
	z-index: 5;
	overflow: hidden;

	transition: all 0.2s linear;
}
	#column li .photo a:hover img {
		transform: scale(1.1);
		opacity: 0.8;
	}
#column li .boxin{width:100%;padding:10px 20px 0;}

#column li h3 a{padding:0 0 15px;font-size:1.6rem;font-weight: bold;line-height: 1.4;}
#column li p a{font-size:1.3rem;clear:both;width:100%;}
#column li .member{
	display:block;
	width:80px;
	line-height:1;
	padding:4px 0;
	margin-bottom:5px;
	text-align:center;
	color:#fff;
	background-color:#8C1E32;
	font-size:1.1rem;
	font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;
}
	body.eng #column li .member a{font-family: "Meiryo UI" , Meiryo , "MS PGothic" , sans-serif , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto;}
	body.chn #column li .member a{font-family : 'SimSun','sans-serif';}

#column li .member a:hover{background-color:#550816;}

#column .more{float:right;display:table;margin:40px 0 140px;}
#column .more a{display:block;margin-right:20px;}
#column .more a:after{content:" 》";}
#column .more a:hover{opacity: 0.8;}




@media (max-width: 640px) {

#column .sectionin{width:580px;}
#column ul{display:table;width:100%;padding-top:55px;}
#column li{
	width:280px;
	height:420px;
	margin:0 0 30px;
}
#column li:nth-child(even){
	float:right;
}
#column li .photo{width:100%;height:180px;}
#column li .photo img{
	width:100%;
	height:180px;
}
#column li .boxin{width:100%;padding:15px 15px 0;}
#column li h3 a{font-size:1.4rem;}
#column li p a{font-size:1.2rem;clear:both;line-height:1.2;}
#column li .member{position: absolute;bottom:10px;right:20px;}
#column li .member a{
	display:block;
	width:90px;
	line-height:1;
	padding:4px 0;
	font-size:1rem;
}

#column .more{float:right;display:table;margin:40px 0 50px;}
#column .more a{display:block;margin-right:20px;}
#column .more a:after{content:" >";}
#column .more a:hover{opacity: 0.8;}
}


/*まずはお問合せ*/
#page #pleasecontact .button{
	margin:80px auto 40px;
	width:480px;
}
	#page #pleasecontact .button a{
		background-color: #8C1E32;
		height:60px;
		width:100%;
		font-size: 2.5rem;
		line-height:60px;
		display:block;
		color:#fff;
		text-align:center;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
#page #pleasecontact .button a:before{
	content: "";
	width: 50px;
	height: 60px;
	float: left;
	background-image: url(../images/recruit/bu_arrow_l.png);
	background-position: left center;
	background-repeat: no-repeat;
}
#page #pleasecontact .button a:after{
	content:"";
	width:50px;
	height:60px;
	float:right;
	background-image: url(../images/recruit/bu_arrow_r.png);
	background-position: right center;
	background-repeat: no-repeat;
}
#page #pleasecontact .button a:hover{background-color:#550816;}

#page #pleasecontact address{
	width:720px;
	font-style:normal;
	border-top:1px dotted #505050;
	border-bottom:1px dotted #505050;
	display:table;
	padding:20px 20px;
	margin:0 auto 110px;
}
#page #pleasecontact address h3{width:100%;clear:both;}
#page #pleasecontact address strong{font-size:4rem;display:block;float:left;letter-spacing: 3px;}
#page #pleasecontact address strong span{font-size:2.4rem;}
#page #pleasecontact address p{display:block;float:right;letter-spacing: 4px;text-align:left;line-height:2.4rem;}

@media (max-width: 640px) {

#page #pleasecontact .button{
	margin:40px auto 40px;
}
	#page #pleasecontact .button a{
		background-color: #8C1E32;
		height:60px;
		width:100%;
		font-size: 1.6rem;
		line-height:60px;
		display:block;
		color:#fff;
		text-align:center;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}
	
#page #pleasecontact address{
	width:auto;
	font-style:normal;
	border-top:1px dotted #505050;
	border-bottom:1px dotted #505050;
	display:table;
	padding:20px 20px;
	margin:0 auto 110px;
}
#page #pleasecontact address h3{width:100%;clear:both;}
#page #pleasecontact address strong{font-size:3rem;display:block;float:none;letter-spacing: 3px;}
#page #pleasecontact address strong span{font-size:2.2rem;}
#page #pleasecontact address p{display:block;float:none;width:100%;letter-spacing: 2px;text-align:left;line-height:2rem;}

}



/*-------------------- サービス --------------------*/
#graph{
	background-image: url(../images/top/service_back.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	width: 100%;
	height:1000px;
	background-color: #000;	
}

#graph #graphBox{
	width: 998px;
	height: 783px;
	overflow: hidden;
	position: relative;
	text-align:center;
	margin:0 auto;
}
	#graph #graphBox #graphTXT{
		width:100%;
		height:100%;
		z-index: 10;
	}
	#graph #graphBox #graphTXT div{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
	}
	#graph #graphBox #graphTXT div.on{
		opacity: 0.5;
	}


#graph #graph-CR{
	text-align:center;
	margin:0 auto;
	width: 520px;
	height: 520px;
	margin: 100px auto;
	overflow: hidden;
	position: relative;
	background-image: url(../images/top/circle-title.png);
	background-position: center center;
	background-size: cover;
	z-index: 20;
}
#graph #graphin{
	width:100%;
	height:100%;
	position:relative;
}
#graph #graphin div{
	width:100%;
	height:100%;
	background-image: url(../images/top/circle.png);
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top:0;
	left:0;
	z-index:40;
}
#graph #graphin div.on{z-index:100;}
#graph #graphin div.off{z-index:40;}

#graph #graphin div.on:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-image: url(../images/top/circle-on.png);
}
#graph #graphin div.off:before{
	content:"";
	display:block;
	opacity: 0;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-image: url(../images/top/circle-on.png);
}

#graph #graph-CR span{
	display:block;
	width:100px;
	height:50px;
	position: absolute;
	z-index: 100;
	text-align:center;
	vertical-align:middle;
}
#graph #graph-CR span a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	line-height:1.2;
}

#graph #graph-CR span.GR1T{
	top:12%;
	right:27%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR2T{
	top:32%;
	right:7%;
}
#graph #graph-CR span.GR3T{
	top:60%;
	right:7%;
}
#graph #graph-CR span.GR4T{
	top:78%;
	right:27%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR5T{
	top:78%;
	left:27%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR6T{
	top:60%;
	left:7%;
}
#graph #graph-CR span.GR7T{
	top:32%;
	left:7%;
}
#graph #graph-CR span.GR8T{
	top:12%;
	left:27%;
	padding:20px 0 0;
}

.raise #graph #graphin div.GR1:before,
.order #graph #graphin div.GR2:before,
.outside #graph #graphin div.GR3:before,
.contribution #graph #graphin div.GR4:before,
.create #graph #graphin div.GR5:before,
.support #graph #graphin div.GR6:before,
.experience #graph #graphin div.GR7:before,
.learn #graph #graphin div.GR8:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-image: url(../images/top/circle-on.png);
}




@media (max-width: 640px) {
/*-------------------- サービス --------------------*/
#graph{
	height:auto;
	padding-bottom:40px;
}

#graph #graphBox{
	width: 100%;
	height: 457px;
}
	#graph #graphBox #graphTXT{	}
	#graph #graphBox #graphTXT div{	}
	#graph #graphBox #graphTXT div img{
		width:100%;
	}

#graph #graph-CR{
	width: 333px;
	height: 333px;
	margin: 64px auto;
}
#graph #graphin{}
#graph #graphin div{
	background-size: cover;
}
#graph #graphin div.on{z-index:100;}
#graph #graphin div.off{z-index:40;}

#graph #graphin div.on:before{
	background-size: cover;
}
#graph #graphin div.off:before{
	background-size: cover;
}

#graph #graph-CR span{
	display:block;
	width:100px;
	height:60px;
	line-height:1.2;
	font-size: 1.2rem;
}

#graph #graph-CR span.GR1T{
	top:8%;
	right:22%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR2T{
	top:29%;
	right:2%;
}
#graph #graph-CR span.GR3T{
	top:57%;
	right:2%;
}
#graph #graph-CR span.GR4T{
	top:73%;
	right:20%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR5T{
	top:73%;
	left:21%;
	padding:20px 0 0;
}
#graph #graph-CR span.GR6T{
	top:57%;
	left:3%;
}
#graph #graph-CR span.GR7T{
	top:29%;
	left:2%;
}
#graph #graph-CR span.GR8T{
	top:8%;
	left:20%;
	padding:20px 0 0;
}
	

.raise #graph #graphin div.GR1:before,
.order #graph #graphin div.GR2:before,
.outside #graph #graphin div.GR3:before,
.contribution #graph #graphin div.GR4:before,
.create #graph #graphin div.GR5:before,
.support #graph #graphin div.GR6:before,
.experience #graph #graphin div.GR7:before,
.learn #graph #graphin div.GR8:before{
	background-size: cover;
}
}