@charset "UTF-8";

html { font-size: 62.5%; }

body{
	min-width:960px;
}

.area{
	padding: 30px 0 0;
	min-width: 960px;
}

.area h2{
	display: none;
}

.incontainer {
    margin: 0 auto;
    max-width: 960px;
    min-width: 960px;
}

header{
/*	min-width:320px !important;
	position: fixed;
	bottom: 80px;
	left: 50px;*/
	padding: 0;
	/*z-index: 100;*/
	position: fixed;
	bottom: 80px;
	left: 50px;
	z-index: 300;
	height: 265px;
	color: #000;
	width: 360px;
	margin: 0 auto;
	/*padding-top:100px;*/
	-webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

hgroup.sitetitle{
	position: absolute;
	top:217px;
/*	bottom: 80px;
	left: 50px;
	z-index: 100;
*/	width: 360px;
}

hgroup.sitetitle h1{
	font-size: 42px;
	font-size: 4.2rem;
	float: left;
	margin: 0;
	letter-spacing: 3px;
}

hgroup.sitetitle h2{
	line-height: 40px;
	float: left;
	margin-left: 10px;
}

hgroup.sitetitle h3{
	clear: both;
	text-align: left;
	margin-top: 50px;
	margin-left: 2px;
}

header nav{
	display: block;
	position: absolute;
	top: 30px;
	left: 2px;
	width: 80px;
	/*min-width: 900px;*/
	background-color: transparent;
}

.main-nav{
	text-align: left;
	padding-right: 0;
}

header nav ul{
	margin: 0;
	padding: 0;
	text-align: left;
	/*position: fixed;
	bottom: 190px;
	left: 52px;
	z-index: 100;*/
}

header nav .curmenubox{
	position: absolute;
	height: 20px;
	margin-top: 6px;
	width: 5px;
	background-color: #000;
	left: -15px;
	top: 0;
}

.works-incontainer{
    margin: 0 auto;
    width: 100%;
}


.cnt{
	display: inline-block;
	height: 18px;
	width: 18px;
	line-height: 18px;
	margin-left: 10px;
	font-size: 11px;
	font-size: 1.1rem;
	border-radius: 18px;
	background-color: #333;
	color: #fff;
	text-align: center;
}

.main-nav > li{
	list-style-type: none;
	line-height: 30px;
	font-size: 16px;
	font-size: 1.6rem;
	width: auto;
	display: block;
}

.main-nav > li a{
	text-decoration: none;
	color: #000;
	padding: 0;
	display: inline-block;
}

.main-nav > li > a:hover{
	color: #999 !important;
}

.main-nav > li > a span.icon-arrow-right{
	vertical-align: -2px;
}

.works-list{
	display: none;
	margin: 0;
	padding: 0 0 0 40px;
	/*z-index: 300;*/
	position: absolute;
	top: -14px;
	left: 40px;
	min-width: 700px;
}

.works-list li{
	padding: 5px;
	display: block;
	float: left;
	/*position: absolute;*/
	vertical-align: middle;
	line-height: 0;
}

.works-list li div{
	height: 50px;
	width: 50px;
	border-radius: 50px;
	border: 2px solid #fff;
	box-shadow:0px 0px 5px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	line-height: normal;
	position: relative;
}

.playbtn{
	position: absolute;
	top:0;
	left: 0;
	z-index: 2;
	display: none;
}

.works-list li a img {
	border-style:none;
	width: 50px;
	height: auto;
}

.works-list li{
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
/*  -webkit-transform: scale(0.8, 0.8);
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  -o-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);*/
}

.works-list li:hover,
.works-list li.active{
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}

.works-list .works-list-on{
	height: 50px;
	width: 50px;
	border-radius: 40px;
}

#clock_canvas {
	position:absolute;
/*	width: 50px;
	height: 50px;*/
	z-index:2;
	display: none;
}

#clock_canvas:hover {
	cursor: pointer;
}

.bg-black{
	color: #fff;
	z-index: 200;
	position: absolute;
}

.bg-black li a{
	text-decoration: none;
	color: #fff;
}


.works_pc{
	display: block;
}

.works_mob{
	display: none;
}


#works div.item{
	overflow: hidden;
	position: absolute;
	width: 100%;
}

#works div.item.next{
	display: none;
}

#works div.item img{
	margin-left: -8%;
	max-width: 2200px;
	min-width: 1200px;
	width: 120%;
	vertical-align: bottom;
}

.works-title{
	bottom: 50px;
	right: 30px;
}

#ssbtn{
	position: absolute;
	top:10px;
	right: 10px;
	font-size: 9px;
	font-size: 0.9rem;
	display: block;
	padding: 5px;
	z-index: 2;
	text-decoration: none;
	color: #333;
}

#ssbtn.bkback{
	color: #ddd;
}

#ssbtn span{
	margin: 0 5px;
}

#ssbtn span.nonactive{
	color: #999;
}

#ssbtn.bkback span.nonactive{
	color: #999;
}

.news-incontainer{
	overflow: hidden;
	position: relative;
}

#news .news-wrap{
	width: 1800px;
	height: 600px;
	padding-left: 460px;
	position: relative;
	left: 0;
}

#news .bg-box{
	width: 385px;
	height: 650px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.95);
	top:0;
	left: 0;
	z-index: 50;
	position: absolute;
	display: block;
}

.kiji_btn{
	display: block;
	width: 57px;
	height: 60px;
	line-height: 60px;
	border-radius: 40px;
	background-color: #fff;
	border: solid 1px #ccc;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: absolute;
	z-index: 400;
	top:280px;
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	font-size: 2.0rem;
	color: #333;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.kiji_btn:hover{
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
}

.kiji_btn.prev_news,
.kiji_btn.prev_blog{
	left: 390px;
	display: none;
	padding-right: 3px;
}


.kiji_btn.next_news,
.kiji_btn.next_blog{
	right: 10px;
	padding-left: 3px;
}

.kiji_wrap{
 	-webkit-perspective: 100px; 
 	-moz-perspective: 100px; 
 	-o-perspective: 100px; 
	perspective: 100px; 
	/*display: inline-block;*/
}

#news .kiji{
	width: 300px;
	height: 360px;
	margin-top: 30px;
	margin-right: 10px;
	padding: 70px 40px;
	-webkit-transition-duration: 0.2s;
 	-moz-transition-duration: 0.2s;
 	-o-transition-duration: 0.2s;
 	transition-duration: 0.2s;
}

#news .kiji:hover{
	-webkit-transform:scale(1.02);
	-moz-transform:scale(1.02);
	-o-transform:scale(1.02);
	transform:scale(1.02);
/*	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);*/
	box-shadow: 0 0 30px rgba(0,0,0,0.2)
}

#profile.area{
	background-color: #fff;
	/*z-index: 200;*/
	color: #000;
	position: relative;
	overflow: hidden;
	padding: 0;
/*	font-size: 12px;
	font-size: 1.2rem;
*/	line-height: 1.6em;
}


#profile-wrap {
	/*width: 475px;*/
	margin-left: 465px;
	background-color: #fff;
	padding: 0 80px 0 0;
}

#profile h2#contact-title-pc{
	display: block;
	text-align: left;
	margin-bottom:5px; 
}

#profile h2#contact-title-mob{
	display: none;
}

#profile.area dl{
	margin-top: 5px;
}

#profile ul,
#profile dl,
#profile p{
	letter-spacing: 1px;
}

#contact{
	padding-bottom: 80px;
}

#contact input{
	min-width: 460px;
	/*margin-top: 0;*/
	width: 98%;
	padding: 10px 1%;
	/*border:none; */
}

#contact textarea {
	height: 300px;
	min-width: 460px;
	/*margin-top: 0;*/
	width: 98%;
	padding: 10px 1%;
	/*border:none; */
	max-width: none;
}



#contact input[type="submit"] {
    min-width: 160px;
    cursor: pointer;
}


address{
	text-align: left;
}

.blog-incontainer{
	overflow: hidden;
	position: relative;
}

#blog .blog-wrap{
	width: 1800px;
	height: 550px;
	padding-left: 460px;
	position: relative;
	left: 0;

}

#blog .bg-box{
	width: 385px;
	height: 650px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.95);
	top:0;
	left: 0;
	z-index: 50;
	position: absolute;
	display: block;
}

#blog .blog-kiji{
	width: 300px;
	height: 360px;
	margin-top: 30px;
	margin-right: 10px;
	padding: 70px 40px;
	-webkit-transition-duration: 0.2s;
 	-moz-transition-duration: 0.2s;
 	-o-transition-duration: 0.2s;
 	transition-duration: 0.2s;
}

#blog .blog-kiji:hover{
	-webkit-transform:scale(1.02);
	-moz-transform:scale(1.02);
	-o-transform:scale(1.02);
	transform:scale(1.02);
/*	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);*/
	box-shadow: 0 0 30px rgba(0,0,0,0.2)
}

.migi-icon{
	height: 66px;
	width: 66px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	border: 2px solid #999;
	box-shadow:0px 0px 5px rgba(0, 0, 0, 0.4);
	z-index: 70;
	position: absolute;
	background-color: #fff;
	bottom: 300px;
	right: 30px;
	color: #000;
	line-height: 66px;
	font-size: 30px;
	text-align: center;
}

#kako-blog{
	color: #000;
	text-align: right;
	margin-top: 10px;
	padding-right: 30px;
}

#footer {
	text-align: right;
}

#footer small {
	padding: 20px 30px 20px 0px;
	font-size: 11px;
	font-size: 1.1rem;
	letter-spacing: 1px;
}


.insta_icon{
	position: absolute;
	left: 315px;
	bottom: 2px;
	top:auto;
	color: #fff;
	opacity: .8;
	transition: .3s;
}
.insta_icon:hover{
	transform: scale(1.1);
}