@charset "UTF-8";
/* CSS Document */

/*common*/
html, body { font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; font-size:12px; line-height:2; }
h2 {font-family: 'Crimson Text', serif; font-size:40px; text-align:center; }
h3 {font-family: 'Crimson Text', serif; font-size:32px; text-align:center; }

.inr { width:1200px; margin:0 auto;}

.sec { padding:30px 0;}
.half_sec { width:600px; margin:0 auto;}

/*blur*/
.blur { text-shadow: 0 0 5px rgba(0,0,0,0.5);}
.opacity50 { opacity:0.1;}

/*header*/
header { position:fixed; z-index:100; width:100%; margin:20px 0;}
header h1 { position:absolute; left:30px;}

/*loader*/
#wrapper { display:none;}

#logo { position:fixed; top:40%; left:0; right:0; z-index:9999; width:100px; height:auto; margin:0 auto; }
#logo .logo_path {
stroke:#b50029;
stroke-linejoin:miter;
fill :#fff;
stroke-dasharray: 100;
stroke-dashoffset: 0;
stroke-width: .5;
animation: anime2 2s linear 3.5s forwards;
}

#logo .logo_path polygon {stroke-dashoffset: 100;}
#logo .logo_path1 { animation: anime1 2s ease 0s forwards; }
#logo .logo_path2 { animation: anime1 2s ease 0.7s forwards; }
#logo .logo_path3 { animation: anime1 2s ease 1.4s forwards; }
#logo .logo_path4 { animation: anime1 2s ease 2.1s forwards; }
#logo .logo_path5 { animation: anime1 2s ease 2.8s forwards; }

/*sound_btn*/
#sound_btn { position:fixed; bottom:30px; left:10px; z-index:1000;}
#sound_btn img { width:18px; cursor:pointer;}

@keyframes anime1 {
   0% {
		stroke-dashoffset: 100;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes anime2 {
    0% {
		fill :#fff;
	}
	100% {
		fill:#b50029;
	}
}



.main_nav { position:fixed; width:800px; z-index:100; right:0; margin-top:20px;}
.main_nav nav { }
.main_nav nav li { display:inline-block; width:14%;}
.main_nav nav li a { font-family: 'Crimson Text', serif; display:inline-block; width:100%; font-size:18px; color:#000; text-decoration:none; cursor:pointer;}
.navToggle { display:none;}

.main_nav nav li a  {
  position: relative;
  display: inline;
  text-decoration: none;
}
.main_nav nav li a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.main_nav nav li a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

#webGL_container { position:fixed;  height:100%; margin:0; padding:0; line-height:0; }

/*contents*/
#contents { position:relative; z-index:2; top:100px; padding-bottom:500px; }

	  
/*message*/
.message p { text-align:center; margin-bottom:0.8em;}

/*topic*/
.topic dl { display:table; margin-bottom:10px;}
.topic dt,.topic dd { display:table-cell;}
.topic dt { width:10em; text-align:right; padding-right:2em;}
.topic dd a { text-decoration:underline; cursor:pointer;}
.topic .modal { padding:30px!important;}

/*.iziModal*/
.iziModal { background: rgba(255,255,255,0.8)!important;}
.iziModal h4 { font-weight:bold; font-size:110%;}

#contact_frame { height:100%; top:0; -webkit-overflow-scrolling: touch;}
#contact_frame .close_btn,.modal .close_btn {
		position:absolute;
		display:inline-block;
		top:10px;
		right:30px;
		width:32px;
		height:32px;
		border:0;
		border-radius:32px;
		margin:0;
		padding:0;
		transform:scale(0.5);
		cursor:pointer;
	}

.modal .close_btn { top:5px; right:10px; }
	
#contact_frame .close_btn:before,.modal .close_btn:before{
		content:"";
		position:absolute;
		display:inline-block;
		top:4px;
		left:13px;
		width:6px;
		height:40px;
		border:0;
		margin:0;
		padding:0;
		background-color:black;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
#contact_frame .close_btn:after,.modal .close_btn:after{
		content:"";
		position:absolute;
		display:inline-block;
		top:4px;
		left:13px;
		width:6px;
		height:40px;
		border:0;
		margin:0;
		padding:0;
		background-color:black;
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	

/*title_sec*/
.title_sec { text-align:center;}
.title_sec h2 { margin-bottom:0; padding:0; line-height:1.4; font-weight:bold;}

/*work_sec*/
.work_sec { text-align:center;}
.work_sec h3:not(:first-child ) { margin-top:40px;}
.work_sec .work_box { display:inline-block; width:30%; vertical-align:top; font-size:0; margin:2% 1%; padding:0; box-sizing:border-box;}
.work_sec .work_box h4 { background: rgba(0,0,0,0.8); font-size:12px; color:#ccc; padding:0; line-height:1.7; margin-bottom:15px;}
.work_sec .work_box p { font-size:12px;}
.work_sec .work_box a { display:inline-block; margin:0 auto; margin-top:10px; width:70%; border:1px #000000 solid; font-size:10px; border-radius:20px; text-decoration:none; color:#000; position: relative; overflow:hidden; }
.work_sec .work_box a:hover { color:#ccc;}
.work_sec .work_box a::after { left:-100%; top:0; width:100%; height:100%;  background: rgba(0,0,0,0.8); position:absolute; z-index: -1; display:block; content: ''; -webkit-transition: all .3s;
  transition: all .3s; }
.work_sec .work_box a:hover::after { left:0;}


/*topic_sec*/

.topic_sec dl { margin-bottom:30px; text-align:center; border-bottom:1px #000 dashed; padding-bottom:30px;}
.topic_sec dl dd { font-weight:bold; font-size:13px;}

/*comapny_sec*/
.comapny_sec dl { width:auto; display:table; margin-bottom:20px; width:100%;}
.comapny_sec dt,.comapny_sec dd { display:table-cell;}
.comapny_sec dt { width:30%; box-sizing:border-box; text-align:right; padding-right:2em;}
.comapny_sec dd { width:70%;}

/*contact_sec*/
.contact_sec input[type=text],.contact_sec input[type=email],.contact_sec input[type=tel],.contact_sec textarea { border:1px rgba(255,255,255,0) solid;  width:100%; background: rgba(255,255,255,0.7); font-size:12px; padding:5px; box-sizing:border-box; }
.contact_sec dl { margin-bottom:20px;}

.int { font-family: inherit;}
.int:focus { border:1px rgba(0,0,0,0.8) solid!important; outline: 0; }

.contact_sec input[type=submit] { display:block; margin:0 auto; margin-top:10px; width:300px; font-size:12px; border-radius:20px; text-decoration:none; color:#000; position: relative;font-family: inherit; padding:5px 0; background: rgba(255,255,255,0.7);}
.contact_sec input[type=submit]:hover { color:#fff;  -webkit-transition: all .8s; transition: all .8s; background:rgba(0,0,0,0.7);}
.contact_sec input[type=submit]:focus { border:1px rgba(0,0,0,0.8) solid; outline: 0;}
.validation_time dl { border-bottom:1px #000000 dashed;}
.validation_time dt { color:#999;}

/*footer*/
footer { position:fixed; z-index:10; bottom:0px; text-align:center; width:100%; background: rgba(000,0,0,0.3); height:30px;}
footer p { color:#FFF; font-size:9px; padding:5px 0;}




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


body { font-size:11px; -webkit-overflow-scrolling: touch;　}
#logo { width:80px;}

.inr { width:100%; padding:0 2%; box-sizing:border-box;}
.half_sec { width:100%; }

/*header*/
header {  margin:10px 0;}
header h1 { position:absolute; left:15px;}

/*nav*/
.main_nav nav { position: fixed; z-index: 2; top: 0; left: 0; background: rgba(000,0,0,0.8); color: #000; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 100%;}

.main_nav nav ul { margin: 0 auto; padding: 0; width: 100%;}
.main_nav nav ul li { width: 100%; }
.main_nav nav ul li a { display: block; color: #fff; padding:20px 0; font-size:13px;}
.main_nav nav.active { transform: translateY(0%); }

/*message*/
.message p br { display:none;}

/*topic*/
.topic dl { margin-bottom:10px;}
.topic dt,.topic dd { display:table-cell;}
.topic dt { width:8em; text-align:left; padding-right:1em;}

/*work_sec*/
.work_sec .work_box { width:48%; margin:1%; margin-bottom:30px;}
.work_sec .work_box h4 { font-size:11px;}
.work_sec .work_box:nth-child(2n) { margin-right:0;}
.work_sec .work_box p { font-size:11px; text-align:left;}

/*.contact_sec*/
#contact {}
.contact_sec { padding:0 5%; box-sizing:border-box;}
.contact_sec.sec { padding-bottom:10px;}

#sound_btn { bottom:2px; left:10px; z-index:1000;}

}


@media screen and ( max-width:480px ){
	
	.work_sec .work_box { width:100%; margin:0;}
	.work_sec .work_box h4 { margin-top:30px;}
	.work_sec .work_box p { font-size:10px; }
	
}