@charset "utf-8";

/* ==================================

　(c) Glitter Style 

===================================== */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, dl, dt, dd, ol, ul, li, label {
	margin:0;
	padding:0;
	border:0; 
	outline:0;
	vertical-align:baseline;
	background-color:transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {
  display: block;
}

ul{list-style:none;}


/*　============================

　(1) font & link

============================= */

body{
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','ＭＳゴシック','Helvetica','Arial',sans-serif;
font-size:12px;
font-weight:normal;
letter-spacing:1px;
line-height:1.5;
color:#111;
}

.serif{font-family: 'Times New Roman';}
.minchyo{font-family:"ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";}

a{color: #888;text-decoration:none;}
a:hover{color: #23c1e0;}


/* ============================

 (2)Layout

============================= */
body{
position:relative;
background:#fff/*#fff url(images/bg_b.jpg) no-repeat 50% 98%*/;
z-index:0;
}

#nav{
width:120px;
height:300px;
position:fixed;
right:35px;
top:30%;
z-index:60;
}

.fixed{position:fixed;top:0;}

.static{
position:absolute;
left:0;
bottom:1480px;
}
.hidden{
overflow:hidden;
white-space:nowrap;
text-indent:-110%;
text-align:left;
}
.last{margin-right:0!important;}

#header canvas{
width:100%!important;
position:absolute;
top:0;
left:0;
}


#ascrail2000,#ascrail2000-hr{
z-index:9!important;
}

.indicator {
width:156px;
margin: 0;
padding:10px;
position: fixed;
left: 0px;
bottom: 20px;
background:rgba(255,255,255,.8);
z-index:90;
}

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient: horizontal;}
.flex-reverse{-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
.between{-webkit-justify-content:space-between;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.around{-webkit-justify-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.flex-wrap{-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap}

.before:before,
.after:after,
.count:before,.count:after{
  display:block;
  position:absolute;
  content:'';
}

.block,
.overall:before,
.overall:after{width:100%;height:100%}

.top,
.refer:before,
.refer:after{top: 0;left: 0}

.lay-w:after {
  background: rgba(255,255,255,.6);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}
  .lay-w:hover:after{opacity: 1}
/* ============================

 (3)Contents Ditail

============================= */

#header		{ z-index:4; }
#about		{ z-index:3; }
#secondary  { z-index:4; /* margin: 0 auto 0 200px; */}
#works		{ z-index:3; }

header{
width:100%;
position:fixed;
background:#fff /*url(images/bg_b.jpg) no-repeat 100% 100%*/;
overflow:hidden;
z-index:100;
text-align:center;
}
article{overflow:hidden;}

section{
/*width: calc(90% - 180px);*/
width: 960px;
height:1000px;
padding:40px 0;
margin:0 auto;
overflow:hidden;
position:relative;
}

/* Welcom ----------------------------*/
h1{
font-size:1px;
width:100%;
margin-top:250px;
z-index:5;
height:215px;
}
h1 img{max-height:100%;width:auto;}
.enter{
width:150px;
padding:5px;
margin:8px auto;
border:2px solid #333;*/
cursor:pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.enter:hover{
background:#111;
color:#fff;
}

#in{margin:35px auto 0;}


#news{
	width: 400px;
	max-width: 80%;
	position: absolute;
	left: 2%;
	top: 5%;
	z-index: 1;
	padding: 1em;
	background: rgba(0,0,0,.8);
	box-shadow: 2px 3px 12px rgba(0,0,0,.2);
	border-radius: 2px;
}
#news dl {color: #fff;text-align: left}
#news dt{font-size:1.2em;margin-bottom: 1em;font-weight: bold}
#news .check{font-size:1.2em;margin-bottom: .5em}
#news .check span{color: #d60000}
#news dl a{
	display: inline-block;
	color: #f39a9a;
}

/* navigation
-----------------------------*/
#navi{
width:100%;
font-size:14px;
height:25px;
background:#111;
}
#navi ul{
width:960px;
margin:0 auto;
}

.navi{
width:20%;
float:left;
}

.navi a{
display:block;
padding:2px 0;
color:#fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.navi a:hover{
background:#222;
color:#cccccc;
}

/*EnterOut
--------------------------------------------*/
#header{width:672px;overflow:visible;}
#logo{
width:265px;
height:323px;
position:absolute;
top:45px;
left:0;
z-index:5;
background:url(images/title.png) no-repeat 0 0;
border:none;
text-indent:-999px;
}
#copy{
width:627px;
height:100%;
position:absolute;
top:0;
left:0;
z-index:4;
background:#fff;
-webkit-transform-origin:100% 50%;
-moz-transform-origin:100% 50%;
-o-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
}
.reverse{position:relative;}

#bar{
width:1px;
position:absolute;
background:#aaa;
top:0;
right:0;
}
.border{border-right:1px solid #aaa;}

#copy h3{
margin:300px 0 55px 265px;
height:25px;
background:url(images/copy.png) no-repeat 0 0;
}
#copy p{
width:280px;
margin-left:265px;
}

.section{
width:960px;
height:1000px;
padding:40px 0;
margin:0 auto;
overflow:hidden;
position:relative;
}
.copyend{
width:29%;
position:absolute;
right:25px;
top:530px;
color:#aaa;
display:none;
}
#scp{display:block;margin-top:15px;}


h2{
width:185px;
padding-top:25px;
float:left;
font-size:1.4em;
margin:10px 0 20px;
line-height:1;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
border-top:1px solid #aaa;
}
h3{
text-transform:uppercase;
margin-bottom:23px;
}
.contents{
width:760px;
padding:50px 0 0;
}



/* About
-------------------------------------------- */
#about{
width:100%;
background:url(images/waterback.jpg) no-repeat 50% 100%;
background-size: cover;
-wabkit-background-size:contain;
}
#about h2{color:#fff;}
#about .contents{
width:960px;
height:100%;
padding:0;
margin:0 auto;
position:relative;
}

#sec_copy{
width:350px;
font-size:5em;
font-family:"Times New Roman", Times, serif;
/*font-weight:bold;text-transform:uppercase;font-family:'Helvetica','Arial',sans-serif;letter-spacing:-1px;
color:#ddd;*/
line-height:1;
margin:0;
position:fixed;
z-index:10;
opacity:0;
}

#poricy{
width:350px;
position:absolute;
right:50px;
top:50%;
color:#fff;
font-size:1.2em;
text-shadow:0 0 8px rgba(0,0,0,.8); 
}


/* About-Secondary
-------------------------------------------- */
#secondary .contents{
width:960px;
margin:0 auto;
padding:0;
}

#concept{
width:280px;
position:absolute;
top:20%;
}
#credo{
width:245px;
position:absolute;
top:50%;
}


/* Works
-------------------------------------------- */
#works{position:relative;}
#works h2{
height:160px;
margin:10px 0 0;
float:none;
}

#entry{
width:600px;
position:absolute;
top:0;
right:0;
}


/*.works li{
width:280px;
overflow:hidden;
float:left;
margin:0 40px 60px 0;
position:relative;
padding-top:190px;
}*/
.works .view{
	width: 46%;
	margin:0 0 60px;
	position: relative;
}
.works h4{margin:5px 0 10px;}

/* Modal Img */
/*.view{
width:278px;
height:185px;
position:absolute;
top:0;
overflow:hidden;
border:1px solid #aaa;
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
}*/
.over{
display:block;
width:80%;
height:80%;
text-align:center;
background:rgba(255,255,255,.7);
position:absolute;
top:20px;
left:30px;
line-height: 146px;
color: #666;
font-weight: bold;
display:none;
}
.view img{
width:100%;
height:auto;
}

.itemize{
font-size:10px;
margin-bottom:3px;
color:#888;
/*margin:10px 0 5px;*/
}
/*DetailContents*/
.child{
position:relative;
/*overflow-y:auto;*/
}
.detail{
width:38%;
float:right;
color:#eee;
font-size:10px;
}
h5{color:#fff;margin-bottom:15px;}
.detail p{color:#eee;font-size:10px;margin-bottom:10px;}
.list{margin-bottom:15px;}

.img_area{
width:60%;
height:100%;
padding-right:20px;
float:left;
}
.img_area img{
width:100%;
height:auto;
}


/*ModalWindow*/
#modal {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
background-color:#000;/*背景色*/
filter: alpha(opacity=80);
opacity: 0.8;
z-index:99;
cursor:pointer;
}

#overlay{
width:850px;
padding:10px 0 10px 10px;
position:fixed;
top:50px;
z-index:100;
overflow-y:auto;
background:#666;
/*display:none;*/
}
#overlay .detail{
width:280px;
position:fixed;
top:75px;
left:57%;
}




.more{
display:block;
width:240px;
padding:7px 15px;
margin:25px auto;
background:#000;
color:#fff;
text-align:center;
}

.skill{
width:185px;
padding:60px 0 0;
}
.skill h3{
margin-bottom:25px;
}

.skill ul{
width:105px;
float:left;
}
.rightList{
width:80px!important;
}

/* Index
-------------------------------------------- */
#index{
height:auto;
position:relative;
/*z-index:5;*/
}
#index .contents{
clear:both;
margin-left:200px;
}

#index dl{
width:240px;
float:left;
margin-right:20px;
}
#index .cl{
padding-top:35px;
text-align:center;
}




/* ============================

 (4)Footer

============================= */
footer{
border-top:1px solid #aaa;
width:100%;
line-height: 1.8;
overflow:hidden;
position:relative;
z-index:3;
}

#footer h2{
width:auto;
color:#888;
font-size:1.6em;
float:none;
border:none;
text-shadow:-1px -1px 2px rgba(50,50,50,.3);
}
.footcontent{
width:960px;
float:none;
padding:0;
margin:0 auto;
background:#fff;
}

#copyright{
clear:both;
padding:10px 0 0px;
text-align:right;
}

#footer dl{
width:210px;
float:left;
margin-right:15px;
}
#footer dt{
font-size:1.2em;
font-weight:bold;
border-bottom:1px solid #aaa;
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:35px 0 0 5px;
}

.index li{
width:205px;
float:left;
list-style:disc;
}

.index a,dd a{
display:block;
padding:3px 5px 2px 3px;
outline:none;
text-decoration:none;
}
.index a:hover,dd a:hover {
background-color:#666;
text-decoration:none;
}

.office{
width:310px;
float:right;
text-align:right;
margin:0;
}

.cout{
color:#aaa;
font-size:0.8em;
line-height:1.5;
}

.number{
width:160px;
display:block;
float:right;
border:1px solid #cccccc;
padding:5px 20px;
font-size:1.8em;
}


/* Contact
----------------------- */

#contact{
width:300px!important;
border-left:none!important;
}

fieldset{
/*width:300px;*/
padding:10px 10px 5px;
margin:0;
background:#666;
border:none;
}


input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea {
	margin: 0;
	margin-bottom: 8px;
	padding: 6px 4px;
	max-width: 100%;
	width: 270px;
	outline: none;
	border: 1px solid #ddd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background: #111;
	color: #fafafa;
	vertical-align: bottom;
	font-size: 13px;
}


textarea {
	overflow: auto;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
	border: 1px solid #23c1e0;
	background: #111;
	-webkit-box-shadow: 0 0 3px rgba(35,193,224,0.8);
	box-shadow:  0 0 3px rgba(35,193,224,0.8);
 	color: #fafafa;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	background: #aaa;
	color:#111;
	text-decoration: none;
	text-shadow: 0 1px rgba(255, 255, 255, .75);
	font-weight: bold;
	font-size: 12px;
	line-height: normal;
	cursor: pointer;
	/* Old browsers */
}

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
	  	border: 1px solid #ddd;
		background: #ccc;
		color:#23c1e0;
	  	text-shadow: 0 -1px rgba(0, 0, 0, .4);

	}

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		position: relative;
		top:1px;
	}


ol{
margin:10px;
}

/**/

#nonscript{
position:fixed;
top:0;
left:0;
width:100%;
background:#FF9933;
overflow:hidden;
z-index:20;
}
#nonscript p{
margin:5px 0 20px 15px;
}

/* Social links */

#shares{
padding: 12px 12px 3px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2) inset;
border: 1px solid #ddd;
border-radius:1px;
-webkit-border-radius:1px;
overflow:hidden;
}
#shares li{ width:100px;height: 30px;}

.fb_iframe_widget{display:block!important;margin-bottom: 4px;}


/*--clearfix--*/

.cl{clear:both;}
.clear {min-height: 1px;}
section:after,.clear:after{
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}


* html .clear {
  height: 1px;
  /*?*//*/
  height: auto;
  overflow: hidden;
  /**/
}