@charset "UTF-8";


* {
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-width: 0px;
}
html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	color: #105d71;
	background: url(/img/common/bg.png) no-repeat top center;
	-moz-background-size:100% auto;
	background-size:100% auto;
	background-color:#f7f6f3;
}
h2{
	margin: 0;
	padding:10px 0px;
	display:none;
	font-weight:bold;
	text-align:center;
	font-size:12px;
	font-family:"Helvetica Neue", Helvetica, Arial,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
}
h3.none{
	display:none;
}
.line {
	width:100%;
	border-bottom: 1px solid #68919b;
}


/* --------------------------------------------------
	loading
-------------------------------------------------- */
#loading{
	position:absolute;
	top:200px;
	left:50%;
	margin-left:-50px;
}
.loading{
	position:absolute;
	top:90px;
	left:50%;
	margin-top:-20px;
	margin-left:-20px;
}

/* --------------------------------------------------
	link
-------------------------------------------------- */
a {
	color: #105d71;
	text-decoration:underline;
}

a:link {
	color: #105d71;
	text-decoration:underline;
}

a:visited {
	color: #105d71;
	text-decoration:underline;
}

a:hover {
	color: #105d71;
	text-decoration:none;
}

a:active {
	color: #105d71;
	text-decoration:underline;
}

/* --------------------------------------------------
	font
-------------------------------------------------- */
body {
	/*
	font:14px/1.5 'HelveticaNeueW01-45Ligh', 'AxisStd-Light', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-family: mplus-2p-regular;
	*/
	
	
	font:14px/1.5 "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
	/*font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-family: 'HelveticaNeueW01-45Ligh', 'AxisStd-Light', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
	/*font-family: webfont;*/
}
.xl-txt{
	font-size:16px;
}
.l-txt{
	font-size:14px;
}
.m-txt{
	font-size:12px;
}
.s-txt{
	font-size:11px;
}

/*
@media only screen and (max-device-width:480px){
body {
	font-family: 'HelveticaNeueW01-45Ligh', 'AxisStd-Light', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
}
	
*/


/* --------------------------------------------------
	header
-------------------------------------------------- */
header {
	position:absolute;
	left:50%;
	top:0px;
	margin-left:-490px;
	text-indent:-99999px;
	overflow: hidden;
	width:190px;
	z-index:2;
	display:none;
}
header h1{
	margin-top:330px;
	display:block;
	width:0px;
	height:44px;
	background: url(/img/common/logo-hd.png) no-repeat 0px 0px;
	background-size: 192px 44px;
}
#iwork{
	margin-top:16px;
	display:block;
	width:0px;
	height:118px;
	background: url(/img/common/iwork.png) no-repeat 0px 0px;
	-moz-background-size:129px auto;
	background-size:129px auto;
}
#hd-contact{
	margin-top:30px;
	width:0px;
	height:36px;
}
#hd-contact a{
	display:block;
	width:110px;
	height:34px;
	background: url(/img/common/contact-hd.png) no-repeat -110px 0px;
	background-size:220px auto;
	border: 1px solid #194a62;
}
header #moon-hide{
	position:absolute;
	left:-3px;
	top:-3px;
	width:147px;
	height:147px;
	background: url(/img/home/moon-hide.png) no-repeat 0px 0px;
	display:none;
}
header #moon{
	position:absolute;
	left:0px;
	top:50px;
	width:140px;
	height:140px;
	background: url(/img/home/moon.png) no-repeat 0px 0px;
	background-size:140px auto;
	display:none;
}
#moon-rabbit{
	position:absolute;
	left:45px;
	top:50%;
	margin-top:-40px;
	opacity: 0;
}

/* --------------------------------------------------
	block
-------------------------------------------------- */
.block {
	position: relative;
	margin: 0 auto;
	width: 980px;
}

/* --------------------------------------------------
	mainvisual
-------------------------------------------------- */
#mainvisual {
	position: absolute;
	top:85px;
	
	background: url(/img/home/mainvisual.png) no-repeat center top;
	width:100%;
	height:1000px;
	opacity: 0;
	
	z-index:0;
}
#mv-smoke {
	position: absolute;
	top:14px;
	left:50%;
	margin-left:-8px;
	display:none;
}
#mv-face {
	position: absolute;
	top:350px;
	left:50%;
	margin-left:144px;
	display:none;
}


/* --------------------------------------------------
	news
-------------------------------------------------- */
#news {
	position:relative;
	padding-top:920px;
	z-index:1;
	display:block;
	opacity: 0;
}
.news {
	margin:0px;
	padding:0px;
	padding-bottom:24px;
	position:relative;
	width:300px;
}
#news .n-thum {
	position:absolute;
}
#news .n-thum img{
	width: 50px;
	height:auto;
}
#news .n-info {
	width:100%;
	padding-left:68px;
}
#news .n-date{
	padding:0;
	padding-top:4px;
	color:#1b8793;
}
#news .n-txt{
	padding:0;
	line-height: 1.4;
}

/* --------------------------------------------------
	works
-------------------------------------------------- */
#works {
	width: 1000px;
	padding-top:40px;
	z-index:2;
}
#works .img{
	display: block;
	margin: auto;
}
.work{
	width:180px;
	height:280px;
	float: left;
	padding-left:10px;
	padding-right:10px;
	position: relative;
}
.w-thumb{
	position: relative;
	width:180px;
	height:180px;
	display:block;
	opacity: 0;
}
.w-thumb .img{
	width:180px;
	height:180px;
}
.w-now{
	position:absolute;
	top:0px;
	left:100px;
}
.w-over{
	width:180px;
	height:180px;
	position:absolute;
	background:url(/img/common/works-over.png) no-repeat;
	top:0px;
	left:0px;
	background-position:115px 115px;
}
.w-name{
	margin:0;
	padding-top:8px;
	padding-bottom:5px;
	line-height: 1.2;
	font-family:"Helvetica Neue", Helvetica, Arial,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
	opacity: 0;
}
.w-part{
	opacity: 0;
}
.w-des{
	color:#2f67e9;
}
.w-ill{
	color:#009a75;
}
.w-ios{
	color:#f16c03;
}
.w-ad{
	color:#9c33a0;
}
.w-fla{
	color:#fa5057;
}
.w-html{
	color:#a78201;
}
.w-closed{
	color:#14668f;
}
#w-more{
	clear: left;
	margin:0 auto;
	padding-top:10px;
	width:140px;
	height:34px;
	text-indent:-99999px;
	overflow: hidden;
	
}
#w-more a{
	display:block;
	width:140px;
	height:34px;
	background: url(/img/home/works-more.png) no-repeat 0px 0px;
	background-size: 140px 34px;
}

/* --------------------------------------------------
	about
-------------------------------------------------- */
#about {
	position: relative;
	width: 100%;
	background-color:#fff;
	display:none;
}
#philosophy{
	padding-top:60px;
}
#profile{
	clear:left;
	padding-top:30px;
}
#occupation{
	padding-top:30px;
}

/* --------------------------------------------------
	sns
-------------------------------------------------- */
#about .sns {
	padding-top:30px;
}
#contact .sns {
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: -22px;
	margin-left: -490px;
}

.sns li img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:44px;
	height:44px;
}
#about .sns li img{
	background-color:#194a62;
}
#contact .sns li img{
	background-color:#fff;
}

.sns li {
	float:left;
	width:8%;
}
.sns .line {
	width:34%;
}
.sns-fb {
	margin-left:4%;
}
.sns-ig {
	margin-right:4%;
}

#contact .sns li {
	width:54px;
}
#contact .sns-fb {
	margin-left:0px;
}
#contact .sns-ig {
	margin-right:0px;
}

/* --------------------------------------------------
	service
-------------------------------------------------- */
#service {
	padding-top:50px;
}
#service .service {
	margin-bottom:150px;
	float:left;
	width:33%;
}
#service .service img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:100%;
	max-width:272px;
	height:auto;
}

/* --------------------------------------------------
	asobi
-------------------------------------------------- */
#asobi{
	padding-top:30px;
	height:488px;
	width:100%;
	display:none;
	background: url(/img/home/asobi.png) no-repeat center bottom;
	position: relative;
}
#asobi a{
	position:absolute;
	left:50%;
	display:block;
	background: url(/img/home/asobi_enter-off.png) no-repeat center bottom;
	top:388px;
	margin-left:-100px;
	width:200px;
	height:130px;
}
#asobi a:hover{
	background-image:url(/img/home/asobi_enter-over.png);
}
#asobi.notenter{
	background: url(/img/home/asobi-noenter.png) no-repeat center bottom;
}


/* --------------------------------------------------
	contact
-------------------------------------------------- */
#contact {
	position: relative;
	background-color:#78cbd3;
	height:205px;
	z-index:3;
	display:none;
}
#c-icon {
	position: absolute;
	left: 50%;
	top: -34px;
	margin-left: -34px;
	width: 68px;
	height: 100px;
}
#c-icon img{
	width: 68px;
	height: 100px;
}
#c-txt {
	position: relative;
	text-align:center;
	padding-top:40px;
	padding-bottom:24px;
}
#ft-contact {
	position: absolute;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	height: 60px;
	text-indent:-99999px;
	overflow: hidden;
}
#ft-contact a{
	display:block;
	width: 300px;
	height: 60px;
	background: url(/img/common/contact-ft.png) no-repeat 0px 0px;
	background-size:300px auto;
}
#ft-contactbg {
	position: absolute;
	left: 50%;
	margin-left: -150px;
	display:block;
	width: 300px;
	height: 60px;
	background-color:#194a62;
}
#ft-contactbg img{
	width: 300px;
	height: 60px;
}
#pagetop {
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: -50px;
	margin-left: 437px;
	text-indent:-99999px;
	overflow: hidden;
}
#pagetop a{
	display:block;
	width: 53px;
	height: 50px;
	background: url(/img/common/pagetop.png) no-repeat 0px 10px;
}


/* --------------------------------------------------
	footer
-------------------------------------------------- */
footer {
	position: relative;
	background-color:#FFF;
	min-height:160px;
	z-index:2;
	opacity: 0;
}

footer #share{
	padding-top:40px;
	position: relative;
	margin: 0 auto;
	width:500px;
	padding-left:40px;
}
#share li{
	float:left;
}
#share_fb{
	width:130px;
}
#share_tw{
	width:130px;
}
#share_google{
	width:100px;
}
#share_hatena{
	width:80px;
}
footer h3 {
	clear:left;
	text-indent:-99999px;
	overflow: hidden;
	margin:0 auto;
	display:block;
	width:150px;
	height:34px;
	background: url(/img/common/logo-ft.png) no-repeat 0px 0px;
	background-size: 150px 34px;
	
	margin-top:60px;
}
footer #copyright {
	text-align:center;
	padding-top:5px;
	color:#78cbd3;
	padding-top:6px;
	padding-bottom:30px;
}



/* --------------------------------------------------
	pc
-------------------------------------------------- */
@media screen and (min-width: 800px) and  (max-width: 999px){
	
.block {
	width: 780px;
}
#works {
	width: 800px;
}

/* ------ header ------ */
header {
	margin-left:-390px;
}
#global header h1{
	margin-top:280px;
}
header #moon{
	top:50px;
}

/* ------ news ------ */
#news {
	padding-top:820px;
}

/* ------ sns ------ */
.sns li {
	width:10%;
}
.sns .line {
	width:31%;
}

/* ------ service ------ */
#service .service img {
	width:90%;
	height:auto;
}

/* ------ mainivisual ------ */
#mainvisual {
	/*background-size:95% auto;
	top:8%;*/
	background-size:760px auto;
	top:120px;
}
#mv-smoke {
	top:8px;
	margin-left:-6px;
	width:86px;
	height:auto;
}
#mv-face {
	top:260px;
	margin-left:106px;
	width:45px;
	height:auto;
}

/* ------ footer ------ */
#contact .sns {
	left: 0%;
	margin-left: 20px;
}
#pagetop {
	left: 100%;
	margin-left: -72px;
}
}

/* --------------------------------------------------
	tablet
-------------------------------------------------- */
@media screen and (min-width: 600px) and  (max-width: 799px){
body {
	-moz-background-size:150% auto;
	background-size:150% auto;
}
.block {
	width: 580px;
}
#works {
	width: 600px;
}
/* ------ header ------ */
header {
	margin-left:-45%;
}
#global h1{
	margin-top:180px;
	background-size: 172px auto;
}
header #moon{
	top:40px;
	width:110px;
	height:110px;
	background-size:110px auto;
}

/* ------ news ------ */
#news {
	padding-top:730px;
}

/* ------ about ------ */
#about {
	padding-top:30px;
}
#about h2{
	display:block;
}
#philosophy{
	padding-top:30px;
}

/* ------ sns ------ */
.sns li {
	width:12%;
}
.sns .line {
	width:28%;
}


/* ------ service ------ */
#service .service img {
	width:90%;
	height:auto;
}

/* ------ mainvisual ------ */
#mainvisual {
	/*background-size:85% auto;
	top:150px;*/
	background-size:650px auto;
	top:140px;
}
#mv-smoke {
	top:0px;
	margin-left:-6px;
	width:86px;
	height:auto;
}
#mv-face {
	top:223px;
	margin-left:91px;
	width:38px;
	height:auto;
}

/* ------ asobi ------ */
#asobi,#asobi.notenter{
	padding-top:20px;
	background-size:600px auto;
	height:366px;
}
#asobi a{
	top:288px;
	margin-left:-75px;
	width:150px;
	height:98px;
	background-size:150px auto;
}

/* ------ footer ------ */
#contact .sns {
	left: 0%;
	margin-left: 20px;
}
#pagetop {
	left: 100%;
	margin-left: -72px;
}
/* ------ loading ------ */
#loading{
	top:80px;
	margin-left:-40px;
}
#loading img{
	width:80px;
	height:auto;
}

}

/* --------------------------------------------------
	smartphone
-------------------------------------------------- */
@media screen and (max-width: 599px){
	
body {
	font:11px;
	-moz-background-size:200% auto;
	background-size:200% auto;
}
#global h2{
	display:block;
}
	
.block {
	width: 90%;
}


/* ------ font ------ */
.xl-txt{
	font-size:13px;
}
.l-txt{
	font-size:12px;
}
.m-txt{
	font-size:10px;
}
.s-txt{
	font-size:10px;
}


/* ------ header ------ */
header {
	width: 100%;
	left:0px;
	margin-left:0px;
	z-index:1;
	height:500px
}
header h1{
	width: 384px;
	height:88px;
	position:absolute;
	left:50%;
	margin-left:-86px;
	margin-top:30px;
	background-size: 172px auto;
}
#iwork{
	display:none;
}
#global #hd-contact{
	width:0px;
	margin-top:340px;
	margin-left:10px;
}
#hd-contact a{
	display:none;
	border:none;
}
header #moon-hide{
	left:-3px;
	top:-3px;
	background-size:60% 60%;
	display:none;
}
header #moon{
	left:50%;
	top:29%;
	width:260px;
	height:260px;
	margin-left:-130px;
	background-size:260px auto;
}
header #moon-hide{
	opacity: 0;
}

/* ------ mainvisual ------ */
#mainvisual {
	/*background-size:120% auto;
	top:75px;
	z-index:2;*/
	background-size:400px auto;
	top:75px;
	z-index:2;
}
#mv-smoke {
	top:8px;
	margin-left:-3px;
	width:40px;
	height:auto;
}
#mv-face {
	top:137px;
	margin-left:56px;
	width:24px;
	height:auto;
}

/* ------ news ------ */
#news {
	padding-top:140%;
	padding-left:0px;
}

.news {
	width:220px;
}

/* ------ works ------ */
#works {
	width: 300px;
	padding-top:10px;
	z-index:3;
}
.work{
	width:140px;
	height:220px;
	float: left;
	padding-left:5px;
	padding-right:5px;
}
.w-thumb{
	width:140px;
	height:140px;
}
.w-thumb img,.w-thumb .img{
	width:140px;
	height:140px;
}
.w-now{
	left:80px;
}
.w-now img{
	width:60px;
	height:60px;
}
.w-name{
	font-weight:bold;
}
#global .w-over{
	display:none;
}
.loading{
	top:70px;
}

/* ------ about ------ */
#about {
	padding-top:30px;
}
#philosophy{
	padding-top:20px;
}
#profile{
	padding-top:20px;
}
#occupation{
	padding-top:20px;
}

/* ------ sns ------ */
.sns li {
	width:16%;
}
.sns .line {
	width:22%;
}
.sns li img{
	width:36px;
	height:auto;
}
#contact .sns {
	display:none;
}

/* ------ service ------ */
#service {
	padding-top:20px;
}
#service .service {
	margin-bottom:100px;
}
#service .service img {
	width:80%;
	height:auto;
}

/* ------ asobi ------ */
#asobi,#asobi.notenter{
	padding-top:20px;
	background-size:400px auto;
	height:244px;
}
#asobi a{
	top:198px;
	margin-left:-50px;
	width:100px;
	height:65px;
	background-size:100px auto;
}

/* ------ contact ------ */
#contact {
	height:190px;
}
#contact h2{
	display:none;
}
#c-txt {
	font-weight:bold;
}
#ft-contact {
	margin-left: -100px;
	width: 200px;
	height: 40px;
}
#ft-contact a{
	display:block;
	width: 200px;
	height: 40px;
	background: url(/img/common/contact-ft.png) no-repeat 0px 0px;
	background-size:200px auto;
}
#ft-contactbg {
	position: absolute;
	left: 50%;
	margin-left: -100px;
	display:block;
	width: 200px;
	height: 40px;
	background-color:#194a62;
}
#ft-contactbg img{
	width:200px;
	height:auto;
}
#pagetop {
	left: 50%;
	margin-left: -20px;
	margin-top: -30px;
}
#pagetop a{
	width: 40px;
	background: url(/img/common/pagetop.png) no-repeat 0px 10px;
	background-size:40px auto;
}

/* ------ footer ------ */
footer {
	min-height:200px;
}

footer #share{
	width:80%;
	padding-left:0px;
}
#share li{
	height:30px;
	text-align:center;
}
#share_fb{
	width:50%;
}
#share_tw{
	width:50%;
}
#share_google{
	width:50%;
}
#share_hatena{
	width:50%;
}
footer h3 {
	margin-top:90px;
}

/* ------ loading ------ */
#loading{
	top:120px;
	margin-left:-25px;
}
#loading img{
	width:50px;
	height:auto;
}

}


/* ---------------------------------

	WEB font
	
--------------------------------- */
/*IE*/
@font-face {
font-family: webfont;
src: url("/font/mplus-2p-regular.eot");
}
/* Firefox, Opera, Safari */
@font-face {
font-family:webfont;
src:url("/font/mplus-2p-regular.ttf") format("truetype")
}



/* ---------------------------------

	CSS HACK
	
--------------------------------- */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	line-height: 0;
}

*:first-child+html .clearfix {
	display: inline-block;
	display: inline;
	zoom: 1;
} 

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* End hide from IE-mac */