@charset "utf-8";
/**----------------------------------------------------------
 *CSS information 
 *
 * file name	: top.css
 * style info	: page styles
 -----------------------------------------------------------*/


/* #header
----------------------------------------------------------- */
#header {
	position:absolute;
	top:0;
	height:180px;
	width:100%;
	height:180px;
	background-color:rgba(255,255,255,0.75);
	z-index:10000000;
}

html body #header_fixed {
	top:0px;
	position:fixed;
	width:100%;
	height:70px;
	background-color:rgba(255,255,255,0.95);
	z-index:10000000;
}

#header_in{
	margin-left:50px;
	clear:both;
	position:absolute;
	bottom:0;
	width:900px;
}

#header:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
* html #header{ 
	display:inline-block;
}
*+ html #header{ 
	display:inline-block;
}


/*	#contents
----------------------------------------------------------- */
#contents {
	font-size:1.2em;
	line-height:2em;
	margin:0 auto;
	width:960px;
}

#contents:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
* html #contents{ 
	display:inline-block;
}
*+ html #contents{ 
	display:inline-block;
}



/*	.content
------------------------------------------------- */
.content{
	padding:0 30px;
	clear:both;
}

.content:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
* html .content{ 
	display:inline-block;
}
*+ html .content{ 
	display:inline-block;
}


/* #logo
----------------------------------------- */
#logo{
	float:left;
	margin-right:20px;
}


/* #global_navi
----------------------------------------- */
#global_navi {
	float:left;
}

#global_navi li {
	float:left;
}

#global_navi li a{
	opacity: 1;
	-webkit-transition: opacity 0.7s;
	   -moz-transition: opacity 0.7s;
	     -o-transition: opacity 0.7s;
	        transition: opacity 0.7s;
}

#global_navi li a:hover{
	opacity: 0.3;
	-webkit-transition: opacity 0s;
	   -moz-transition: opacity 0s;
	     -o-transition: opacity 0s;
	        transition: opacity 0s;
}


/*	#top
--------------------------------------- */
#top {
	padding-top:180px;
	margin-top:210px;
	margin-bottom:550px;
}

#top h1 {
	margin-bottom:40px;
}


/*	#service
--------------------------------------- */

#service {
	margin-bottom:500px;
	color:#cbcbcb;
}

#service p {
	margin-bottom:1em;
}

#service h2 {
	margin-bottom:40px;
}

#service h3 {
	margin-bottom:20px;
}

#service #concept {
	width:420px;
	float:left;
}

#service #planning {
	width:420px;
	float:right;
}

/*	#works
--------------------------------------- */
#works {
	text-align:center;
	margin-bottom:420px;
	color:#cbcbcb;
	color:#fff;
}

.rollover {
	margin:0 auto;
  position: relative;
  width: 220px;
  height: 220px;
  display: block;
}
.front {
  z-index: 2;
  top:0;
  left:0;
  position: absolute;
 
}
.back {
  z-index: 1;
  top:0;
  left:0;
  position: absolute;

}
.rollover:hover .back, 
.rollover:focus .back {
  z-index: 2;
}
.rollover:hover .front, 
.rollover:focus .front {
  z-index: 1;
}

.fade .rollover .front {
  opacity: 1;
  -webkit-transition: 0.7s;
     -moz-transition: 0.7s;
      -ms-transition: 0.7s;
       -o-transition: 0.7s;
          transition: 0.7s;
}
.fade .rollover .back {
  opacity: 0;
  -webkit-transition: 0.7s;
     -moz-transition: 0.7s;
      -ms-transition: 0.7s;
       -o-transition: 0.7s;
          transition: 0.7s;
}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {
  opacity: 0;
}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {
  opacity: 1;
}

.flip .rollover {
  -webkit-perspective: 1600px;
     -moz-perspective: 1600px;
      -ms-perspective: 1600px;
       -o-perspective: 1600px;
          perspective: 1600px;
}
.flip .cube {
	display:block;
  height: 220px;
  width: 220px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
       -o-transform: rotateX(0) rotateY(0) rotateZ(0);
          transform: rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transition: 0.7s;
     -moz-transition: 0.7s;
      -ms-transition: 0.7s;
       -o-transition: 0.7s;
          transition: 0.7s;
}
.flip .front {
  -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

#works p a {
	text-align:center;
	color:#fff;
	text-decoration:underline;
	-webkit-transition: color ease-out 0.25s;
	   -moz-transition: color ease-out 0.25s;
	     -o-transition: color ease-out 0.25s;
	        transition: color ease-out 0.25s;
}

#works p a:hover {
	color:#666;
	text-decoration:underline;
	-webkit-transition: color ease-out 0s;
	   -moz-transition: color ease-out 0s;
	     -o-transition: color ease-out 0s;
	        transition: color ease-out 0s;
}

.box .front {
  -webkit-transform: translate3d(0,0,200px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,200px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,200px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,200px) scale(0.85,0.85);
          transform: translate3d(0,0,200px) scale(0.85,0.85);
}
.box .back {
  -webkit-transform: rotateY(180deg) translate3d(0,0,200px)  scale(0.9,0.9);
     -moz-transform: rotateY(180deg) translate3d(0,0,200px) scale(0.85,0.85);
      -ms-transform: rotateY(180deg) translate3d(0,0,200px)  scale(0.85,0.85);
       -o-transform: rotateY(180deg) translate3d(0,0,200px)  scale(0.85,0.85);
          transform: rotateY(180deg) translate3d(0,0,200px)  scale(0.85,0.85);
}


#works h2 {
	margin-bottom:30px;
}

#works #pass_text {
	font-size:1.2em;
	line-height:1.9em;
}


/*	#dengen_short
--------------------------------------- */
#dengen_short {
	text-align:center;
	margin-left:-30px;
	margin-bottom:450px;
}

#dengen_short h2 {
	margin-bottom:30px;
}


/*	#company
--------------------------------------- */
#company {
	text-align:center;
	margin-bottom:450px;
}

#company h2 {
	margin-bottom:40px;
}

#company table {
	margin:0 auto;
	width:600px;
}

#company table th {
	width:130px;
}

#company table th,
#company table td {
	color:#1a1a1a;
	text-align:left;
	padding:10px;
	font-weight:normal;
}


#company table th span,
#company table td span {
	display:block;
	line-height:1.2em;
	font-weight:normal;
	font-size:0.8em;
	color:#808080;
}


/*	#contact
--------------------------------------- */
#contact {
	position:relative;
	text-align:center;
	z-index:100000;
}

#contact h2 {
	margin-bottom:40px;
}

#contact dl {
	font-family: 'Montserrat', sans-serif;
	letter-spacing:0.1em;
	color:#333;
}


#contact dl dt {
	font-size:1.5em;
	line-height:2.5em;
}

#contact dl dd {
	font-size:2em;
	margin-bottom:1.5em;
}

#contact dl dd a {
	color:#333;
	text-decoration:underline;
	-webkit-transition: color ease-out 0.25s;
	   -moz-transition: color ease-out 0.25s;
	     -o-transition: color ease-out 0.25s;
	        transition: color ease-out 0.25s;
}

#contact dl dd a:hover {
	color:#c0c0c0;
	text-decoration:underline;
	-webkit-transition: color ease-out 0s;
	   -moz-transition: color ease-out 0s;
	     -o-transition: color ease-out 0s;
	        transition: color ease-out 0s;
}


/*	#access
----------------------------------------------------------- */
#access {
	margin-top:130px;
}

#access #map-canvas {
	height: 680px;
	width:100%;
	margin: 0;
	padding: 0;
}


#access #hyde01 img {
	width:100%;
	height:84px;
	margin-bottom:-55px;
	position:relative;
	z-index:10000;
}

#access #hyde02 {
	position:relative;
}

#access #hyde02 #bottom_black {
	margin-top:-183px;
}

#access #hyde02 #bottom_black img {
	height:183px;
	width:100%;
}

#access #hyde02  #copyright{
	position:absolute;
	left:50%;
	top:118px;
	margin-left:-35px;
	z-index:20000;
}

.gm-style-cc + .gmnoprint {
	top:60px !important
}


/* #background_line
----------------------------------------- */

#background_logo {
	position:absolute;
	top:0;
	left:0;
	height:2000px;
	width:100%;
	background:url(../img/modules/img_big_logo.png) no-repeat -122px 0;
	z-index:-1000;
}

#bg_gray_01 {
	position:absolute;
	top:0;
	left:0;
	height:2000px;
	width:100%;
	background:url(../img/modules/bg_gray_01.png) 100% 0 no-repeat;
	z-index:-100;
}

#bg_gray_02 {
	position:absolute;
	top:1700px;
	left:0;
	height:2200px;
	width:100%;
	background:url(../img/modules/bg_gray_02.png) 130% no-repeat;
	z-index:-100;
}

.bl_line {
	position:absolute;
	left:0;
	height:3000px;
	width:100%;
	z-index:-100;
	
}

#bg_black_01 {
	top:700px;
	background:url(../img/modules/bg_black_01.png) 50% no-repeat;
}

#bg_black_02 {
	top:1450px;
	background:url(../img/modules/bg_black_02.png) 50% no-repeat;
	z-index:-50;
}

#bg_black_03 {
	display: none;
	top:1500px;
	background:url(../img/modules/bg_black_03.png) 50% no-repeat;
}


/* under 480px
----------------------------------------- */

@media screen and (max-width: 961px) {
	
#service {
	background:#313131;
	padding:300px 30px;
	margin-bottom:0;
}
#works {
	background:#252525;
	padding:300px 30px;
	margin-bottom:0;
}


#bg_black_01 {display:none;}
#bg_black_02 {display:none;}
#bg_black_03 {display:none;}
}