*{
	margin:0;
	padding:0;
}

ul, li{
	list-style:none;
}

body {
	background: #FAFAFA;
	color: #333333;
	overflow-y: hidden;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}





#top_sub_grand_menu{
	width:100px;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background:#fff;
	z-index: 9999;
}

.sub_grand_menu{
	position:absolute;
	top: 50%;
	margin-top:-20px;
	left: 20px;
	z-index:9999;
	width:54px;
	opacity:1;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	transition: 1s cubic-bezier(0.78, .18, .34, .98);
}

#top_sub_grand_menu .sub_grand_menu{
	opacity:0;
	margin-top:-20px;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


#top_sub_grand_menu .sub_grand_menu{
	opacity:1;
	margin-top:-30px;
	-webkit-transition: .5s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-moz-transition: .5s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-ms-transition: .5s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-o-transition: .5s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	transition: .5s cubic-bezier(0.78, .18, .34, .98) 1.8s;
}



.sub_grand_menu.sub_grand_menu_ani{
	position:fixed;
	top:0px;
	z-index: 9999;
	-webkit-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: 1s cubic-bezier(0.78, .18, .34, .98);
	transition: 1s cubic-bezier(0.78, .18, .34, .98);
}


.sub_grand_menu .button-navi-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 60%;
	width: 0px;
	height: 1px;
	margin: 0px 0 0 -15px;
	background: transparent;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 22px;
	height: 1px;
	background: #000;
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}




.sub_grand_menu .button-navi-icon:before {
	margin-top: -5px;
}

.sub_grand_menu .button-navi-icon:after {
	margin-top: 4px;
}





.sub_grand_menu_top{
	padding: 24px 0px;
	overflow:hidden;
}



.sub_grand_menu_top .sub_menu ul li{
	display: inline-block;
	padding:0 20px;
}




.sub_grand_menu .button-navi-icon.close:before, .sub_grand_menu .button-navi-icon.close:after {
	margin-top: 0;
}

.sub_grand_menu .button-navi-icon.close:after {
	margin-left: 0px;
}


.button-navi-icon.close:after {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.button-navi-icon.close:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.button-navi-icon.close {
	background: transparent;
}



.button-close{
	position:absolute;
	padding: 24px 0px;
	width: 54px;
	top: 0;
	z-index:-9999;
}



#menu_index{
	position:fixed;
	top: 0px;
	left:0px;
	height:100%;
	background:#fff;
	z-index: 9998;
	width: 0%;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98);
	transition:  0.8s cubic-bezier(0.78, .18, .34, .98) .2s;
}




#menu_index.active{
	width: 40%;
	-webkit-transition: 0.8s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.8s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.8s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.8s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.8s cubic-bezier(0.78, .18, .34, .98);
}



.menus_index{
	margin-left:100px;
	padding:0 40px;
}


.menu_logo{
	width:60%;
	margin-top:150px;
	opacity:0;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}


.active  .menu_logo{
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
}


.menu_logo:after{
	content:"";
	display:block;
	background:#ccc;
	width:10%;
	height:1px;
	margin-top:40px;
}


.menu_logo img{
	width:100%;
	height:auto;
}

.menus{
	margin-top:60px;
	z-index: -9999;
	position: relative;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) .8s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	
}

.active .menus{
	z-index: 999;
}




.menus ul li{
	display:block;
	margin-bottom:20px;
	opacity:0;
}

.menus ul li a{
	text-decoration:none;
	font-size:14pt;
	letter-spacing: 2px;
	font-family: Helvetica;
	color: #666;
	font-weight:100;
}



.active .menus ul li:nth-child(1){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1s;
}

.active .menus ul li:nth-child(2){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.2s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.2s;
}

.active .menus ul li:nth-child(3){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.4s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.4s;
}

.active .menus ul li:nth-child(4){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.6s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.6s;
}

.active .menus ul li:nth-child(5){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 1.8s;
}

.active .menus ul li:nth-child(6){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2s;
}

.active .menus ul li:nth-child(7){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2.2s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.2s;
}

.active .menus ul li:nth-child(8){
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.4s;
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.4s;
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2.4s;
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98) 2.4s;
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98) 2.4s;
}






#menu_back{
	position:fixed;
	top: 0;
	right:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.8);
	z-index: 999;
}






.scrol_line {
	height:2px;
	width:60px;
	top: 0px;
	overflow:hidden;
	z-index: 999;
	position: relative;
	display: inline-block;
}


.scrol_line:before {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0px;
	width: 100%;
	height: 1px;
	background: #000;
	background-size: 100%;
	-webkit-animation: lineAnime 2s ease-in-out infinite;
	animation: lineAnime 2s ease-in-out infinite;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


@keyframes lineAnime {
	0% {
transform: translateX(-100%); }
100% {
transform: translateX(100%); } 
}





.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 999999;
	opacity: 1;
	background: #fff;
}



.loading_copy{
	opacity:0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-animation: loading_copyAnime 2s cubic-bezier(0.78, .18, .34, .98) .3s;
	animation: loading_copyAnime 2s cubic-bezier(0.78, .18, .34, .98) .3s;
}



@keyframes loading_copyAnime {
	0% {
	opacity:0;
}
50% {
	opacity:1; 
}
100% {
	opacity:0;
} 
}


.loading_copy p{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: yu-mincho-pr6, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size:20pt;
	font-weight:600;
	letter-spacing:3px;
	color:#666;
}

.loader
{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	position: absolute;
	display: inline-block;
	top:50%;
	left:50%;
	margin-left:-17px;
	margin-top:-30px;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	border: 2px solid #e3c3da;
	border-right-color: transparent;
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50%  { -webkit-transform: rotate(180deg); opacity: 1; }
100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50%  { -moz-transform: rotate(180deg); opacity: 1; }
100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}







#contents {
	height: 100%;
	width: 6900px!important;
	-webkit-overflow-scrolling: touch;
}







.section {
	height: 100%;
	float: left;
	min-width: 500px;
}


.inner{
	padding:0 80px;
}


#nav {
	list-style: none;
	margin-bottom: 10px;
	position: fixed;
	left: 60px;
	top: 60px;
}

#nav li {
	display: inline;
	margin-right: 0.5em;
}
#nav li a {
	color: #fff;
}


.full_img{
	width:100%;
	height:auto;
}









#s01{
	margin-left:100px;
}


.top_info{
	padding: 0 80px;
}


.top_info .logo{
	width:60%;
	margin-top:150px;
}


.top_info .logo :after{
	content:"";
	display:block;
	background:#ccc;
	width:10%;
	height:1px;
	margin-top:40px;
}


.top_info .logo img{
	width:100%;
	height:auto;
}

.top_info_bottom {
position:absolute;
	bottom:80px;
}


.top_info_bottom .detail p{
	font-size:9pt;
	line-height:180%;
	color:#333;
	font-family: Helvetica;
}

.top_info_bottom .mail{
	margin-top:30px;
}

.top_info_bottom .mail a{
	text-decoration:none;
	color:#333;
	font-size:10pt;
	padding:4px;
	background:#E3C3DA;
	font-family: Helvetica;
	
}

.top_info_bottom .scroll{
	margin-top:20px;
}

.top_info_bottom .scroll a{
	text-decoration:none;
	color:#333;
	font-size:10pt;
	font-style: italic;
	font-family: Helvetica;
}







#top_mail{
	position:fixed;
	top:0;
	right:0;
	background:#fff;
	z-index:99;
}


#top_mail a span{
	font-size:11pt;
	text-decoration:underline;
	margin-left:10px;
}


#top_mail a{
	display:block;
	padding:15px;
	font-size:8pt;
	text-decoration:none;
	color:#333;
}






.st_sec{
	padding:0 80px;
	
}





.concept_text{
	margin-top:60%;
}


.concept_text .sub_title p{
	font-size:16pt;
	text-align:center;
	font-family: Helvetica;
	font-weight:100;
}

.concept_text .sub_title p:after{
	content:"";
	width:30px;
	height:1px;
	background:#000;
	display:block;
	margin:30px auto;
}

.concept_text .sub_text{
	margin-top:30px;
	text-align: center;
}

.concept_text .sub_text p{
	font-size:16pt;
	letter-spacing:4px;
	display:inline-block;
	font-weight:100;
	line-height: 160%;
	font-weight:bold;
}

.concept_text .sub_text p:after{
content:"";
	width:100%;
	height:10px;
	display:block;
	background:#E3C3DA;
	margin-top:-15px;
}






.main_title{
	margin-top:80px;
}


.main_title p{
	font-size:16pt;
	font-family: Helvetica;
	font-weight:100;
}

.main_title p:after{
content:"";
	display:block;
	width:30px;
	height:1px;
	background:#000;
	display:block;
	margin-top:30px;
}









.company_index{
	margin-top:30px;
}



table{
	margin-bottom:15px;

}

th{
vertical-align: top;
	font-weight:normal;
	font-size:10pt;
	letter-spacing:1px;
	line-height:200%;
}

td{
	vertical-align: top;
	font-weight:normal;
	font-size:10pt;
	letter-spacing:1px;
	line-height:200%;
}



.company_index td a{
	color:#333;
}




.map_p{
	width:100%;
	margin-top:30px;
	width: 700px;
}

.map_p img{
	width:100%;
	height:auto;
}

.map_button{
	margin-top:20px;
}

.map_button a{
	font-size:16pt;
	font-family: Helvetica;
	font-weight:100;
	text-decoration:none;
	color:#333;
}


.map_button a:before{
content:"";
	display:inline-block;
	width:60px;
	height:1px;
	background:#333;
	margin-right:10px;
}



.works_index{
	max-width:550px;
	margin-top:30px;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	
}


.works_box{
	display:inline-block;
	padding:8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

}

.works_box img{
	width:100%;
	height:auto;
}


.works_inner{
	border: solid 10px;
	border-image:url("images/line.png") 10 repeat;
	-webkit-border-image:url("images/line.png") 10 repeat;	
}

.w70{
	width:66%;
}

.w50{
	width:50%;
}


.w30{
	width:33.333333333%;
}


.service_index{
	margin-top:30px;
}

.service_box{
	margin-bottom:20px;
}


.service_box:last-child{
	margin-bottom:0px;
}

.service_box p{
	font-size:13pt;
	letter-spacing:1px;
	display:inline-block;
	font-weight:bold;
}

.service_box p:after {
	content: "";
	width: 100%;
	height: 10px;
	display: block;
	background: #E3C3DA;
	margin-top: -10px;
}


.ie .service_box p:after {
	margin-top: -14px;
}



.team_index{
	margin-top:30px;
}

.team_box {
	margin-bottom:20px;
}

.team_box:last-child {
	margin-bottom:0px;
}

.team_box .title p:before{
	content:"";
	background:#E3C3DA;
	width:15px;
	height:15px;
	vertical-align: middle;
	display:inline-block;
	margin-right:10px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.team_box .title p{
	font-size: 12pt;
	letter-spacing: 1px;
	font-weight:bold;
}

.team_box .note {
	margin-top:10px;
}

.team_box .note p{
	font-weight: normal;
	font-size: 10pt;
	letter-spacing: 1px;
	line-height:200%;
}

#the_zone {
	position: fixed;
	top: 0;
	left: 0;
}


@media screen and (max-width: 570px) {
	

	
#top_sub_grand_menu {
	width: 52px;
	height: 52px;
}	

#top_sub_grand_menu .sub_grand_menu{
	margin-top:-25px;
	left: -3px;
}

#menu_index.active {
	width: 100%;
}
	
.menus_index {
	margin-left: 0px;
	padding: 0 40px;
}


.st_sec {
	padding: 0 20px;
}

.inner {
	padding: 0 0px;
}

#s01 {
	margin-left: 0px;
}

.loading_copy p {
	font-size: 16pt;
}

.works_index {
	max-width: 380px;
}


.map_p {
	max-width: 440px;
}


.team_box .title p {
	font-size: 9pt;
	font-weight: 100;
}

.team_box .note p {
	font-size: 5.5pt;
	font-weight: 100;
}




.menu_logo{
	width:200px;
	margin-top: 120px;
}




}