@charset "utf-8";

/*----------------------------------------------------
	Common
----------------------------------------------------*/

body{
	margin:0 auto;
	padding:0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	color:#000;
	text-align:center;
	line-height:1.4;
	font-size:100%;
}

#wrap {
	width: 900px;
	margin: 0 auto 0;
}

a:link    { color: #000; }
a:visited { color: #000; }
a:hover   { color: #000; }
a:active  { color: #000; }



/*----------------------------------------------------
	Header
----------------------------------------------------*/

#header{
	margin:0 auto 0;
	padding:0 0 20px;
	text-align:center;
	background:#FFF;
}

#header h1{
	padding:5px 0;
	font-size:75%;
	background:#ccc;
}



/*----------------------------------------------------
	Globalmenu ※カレント制御あり
----------------------------------------------------*/

#g_wrap{
	width:100%;
	height:72px;
	margin:0 auto 0;
	text-align:center;
	background:#FFF;
}


#nav {
	width: 820px;
	text-align:center;
	margin: 0 auto 0;
}

#nav li {
	width:120px;
	margin-top:15px;
	height:47px;
	background:#fff;
	float:left;
	text-align: center;
	font-size:90%;
}

#nav li a {
	padding: 10px 0;
	width:120px;
	display: inline-block;
	text-align: center;
	outline: none;
	/**/
	background-color: #fff;
	color: #333333 !important;
	text-decoration: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */  
}

#nav li a:hover,
#nav li a:active {
	background: #333333;
	color: #fff !important;
}

#nav li a::before,
#nav li a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

#nav li a,
#nav li a::before,
#nav li a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#nav li.on {
	background: url(../img/nav_current.gif) no-repeat bottom;
}



/*----------------------------------------------------
	Footer
----------------------------------------------------*/

#footer{
	position:relative;
	z-index:501;
}

/*  back top
----------------------------------------------------*/

#back_top_side {
	position: fixed;
	z-index:401;
	bottom: 50px;
	right: 50px;
	cursor:pointer;
}


#back_top a{
	background: #ff8000;
	color: white;
	font-size: 40px;
	display: block;
	font-weight: normal;
	letter-spacing: 0.05em;
	transition: all 0.2s;
}

#back_top a p {
	width: 900px;
	margin: 0 auto;
	text-align:center;
	line-height: 80px;
	transition: all 0.2s;
	position:relative;
	top:30px;
}

#back_top a:hover p {
	position:relative;
	top:20px;
}

/*  copyright
----------------------------------------------------*/

#copyright {
	color:#FFFFFF;
	padding:20px 0 20px;
	background: #000;
	text-align: center;
}

#copyright p{
	font-size:80%;
}



/*----------------------------------------------------
	index.html(TopPage)
----------------------------------------------------*/

#top .box {
	background: #fff;
}

#top h2{
	margin:0 0 40px;
}


/* news --------------------------------------------*/
#section02 {
	height:4500px;
	position:relative;
}

#news_conts{
	width: 900px;
	margin-top:100px;
	text-align:left;
	position:absolute;
	z-index:20;
}

#news_conts dl{
	text-align:left;
	width:700px;
	margin-bottom:20px;
}

#news_conts dt{
	float:left;
	margin-right:20px;
}

#news_conts dd{
	float:left;
}

#news_bg {
	width: 900px;
	margin-top:100px;
	text-align:right;
	position:absolute;
	z-index:19;
}

.mr58{margin-right:58px!important;}
.mr312{margin-right:312px!important;}
.mr213{margin-right:213px!important;}
.mr266{margin-right:266px!important;}
.mr327{margin-right:327px!important;}


/* about --------------------------------------------*/
#section03 {
	height:3000px;
	position:relative;
}

#about_conts{
	width: 900px;
	margin-top:100px;
	text-align:left;
	position:absolute;
	z-index:30;
}

#about_bg {
	width: 900px;
	margin-top:100px;
	text-align:right;
	position:absolute;
	z-index:29;
}

.mr85{margin-right:85px!important;}
.mr48{margin-right:48px!important;}
.mr19{margin-right:19px!important;}
.mr133{margin-right:133px!important;}
.mr108{margin-right:108px!important;}


/* works --------------------------------------------*/
#section04 {
	height:3000px;
	position:relative;
}

#works_conts{
	width: 900px;
	margin-top:100px;
	text-align:left;
	position:absolute;
	z-index:40;
}

#works_conts ul {
    width:900px;
    margin:0 auto 20px;
}

#works_conts ul li{
    width: 170px;
    margin: 5px;
    overflow: hidden;
	float: left;
	background:#eee;
}

#works_conts h3{
	/*border:#ccc solid 1px;*/
	margin:10px;
	text-align:center;
}

#works_conts h4{
	width:150px;
	padding:0 10px 5px 10px;
	text-align:left;
	font-weight:bold;
}

#works_conts h5{
	width:150px;
	padding:0 10px 5px 10px;
	text-align:right;
	font-size:80%;
}


#works_conts ul,
#works_conts ul li{ display: block; }

#works_conts .btn {
	font-size:90%;
	color: #333333 !important;
}

#works_conts .btn a {
	padding:5px 10px;
	display: inline-block;
	outline: none;
	/**/
	border:solid 2px #333333;
	background: #333333;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */  
}

#works_conts .btn a:hover,
#works_conts .btn a:active {
	border:solid 2px #333333;
	background-color: #fff;
	color: #333333 !important;
}

#works_conts .btn a::before,
#works_conts .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

#works_conts .btn a,
#works_conts .btn a::before,
#works_conts .btn a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#works_bg {
	width: 900px;
	margin-top:100px;
	text-align:right;
	position:absolute;
	z-index:39;
}

.mr153{margin-right:153px!important;}
.mr240{margin-right:240px!important;}


/* contact --------------------------------------------*/
#section05 {
	height:700px;
	position:relative;
}

#contact_conts{
	width: 900px;
	margin-top:100px;
	text-align:center;
	position:absolute;
	z-index:50;
}

#contact_bg {
	width: 900px;
	margin-top:175px;
	text-align:left;
	position:absolute;
	z-index:49;
}

.btn_contact a {
	text-align:center;
	margin:0 auto;
	display: block;
	width: 188px;
	height: 117px;
}

.btn_contact a { background: url(../img/btn_contact.gif) 0 0 no-repeat;}
.btn_contact a:hover { background: url(../img/btn_contact_on.gif) 0 0 no-repeat;}


.btn_contact a::before,
.btn_contact a::after {
	display: block;
	content: '';
}

.btn_contact a,
.btn_contact a::before,
.btn_contact a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*  sns
----------------------------------------------------*/
#section06{
	position:relative;
	z-index:60;
}

#sns_wrap{
	text-align:center;
	margin:0 auto 0;
	border-top:#808080 solid 5px;
	height:600px;
	position:relative;
	z-index:59;
	background: url(../img/bg_sns01.gif) 50% bottom no-repeat;
}

ul.snsbtn  {
	width: 520px;
	margin:0 auto;
	padding:100px 0;
}

ul.snsbtn li {
	text-align:center;
	float: left;
	overflow: hidden;
	list-style: none;
}

ul.snsbtn li a {
	display: block;
	width: 120px;
	height: 120px;
	
}

li.btn_b a { background: url(../img/btn_sns.gif) 0 0 no-repeat;}
li.btn_t a { background: url(../img/btn_sns.gif) -120px 0 no-repeat;}
li.btn_p a { background: url(../img/btn_sns.gif) -240px 0 no-repeat;}

li.btn_b a:hover { background: url(../img/btn_sns_on.gif) 0 0 no-repeat;}
li.btn_t a:hover { background: url(../img/btn_sns_on.gif) -120px 0 no-repeat;}
li.btn_p a:hover { background: url(../img/btn_sns_on.gif) -240px 0 no-repeat;}

li.btn_b a::before,
li.btn_t a::before,
li.btn_p a::before,
li.btn_b a::after,
li.btn_t a::after,
li.btn_p a::after {
	display: block;
	content: '';
}

li.btn_b a,
li.btn_t a,
li.btn_p a,
li.btn_b a::before,
li.btn_t a::before,
li.btn_p a::before,
li.btn_b a::after,
li.btn_t a::after,
li.btn_p a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}



/*----------------------------------------------------
	works.html
----------------------------------------------------*/
#works #pankuzu_wrap{
	width:100%;
	border-bottom: solid 2px #cdcdcd;
	border-top: solid 2px #cdcdcd;
}

#works .pankuzu{
	width:910px;
	margin:0 auto;
	text-align:left;
	padding:10px 0;
	font-size:75%;
}

.box_c { background: #FFFFFF url(../img/bg_box_c.gif) 0 0 no-repeat;}
.box_d { background: #FFFFFF url(../img/bg_box_d.gif) 0 0 no-repeat;}
.box_w { background: #FFFFFF url(../img/bg_box_w.gif) 0 0 no-repeat;}

.t_1L{ height:225px !important;}
.t_2L{ height:245px !important;}
.t_3L{ height:265px !important;}
.t_4L{ height:285px !important;}

#works h2{
	/*border:#ccc solid 1px;*/
	margin:10px;
	text-align:center;
}

#works h3{
	width:150px;
	padding:0 10px 5px 10px;
	text-align:left;
	font-weight:bold;
}

#works h4{
	width:150px;
	padding:0 10px 5px 10px;
	text-align:right;
	font-size:80%;
}

#filters_wrap {
	width:910px;
	text-align:center;
	margin:0 auto;
    overflow: auto;
}

#filters_wrap ul {
    text-align:left;
}

#filters_wrap li {
    float: left;
    margin: 20px 15px 20px 0;
}

#filters_wrap li.arrow {
    float: left;
	padding-left:15px;
    margin: 20px 15px 20px 5px;
	background: url(../img/arrow_3.gif) no-repeat 0 5px;
}

#wall {
    width:900px;
	padding:5px;
    margin:0 auto 30px;;
    background:#eee;
	position: relative;
}

.bricks {
    width: 170px;
    margin: 5px;
    overflow: hidden;
	position: absolute;
	float: left;
}

#wall, .bricks{ display: block; }



/*----------------------------------------------------
	works/iframe/xxxx.html
----------------------------------------------------*/
#works_iframe{}

#works_iframe #wrap {
	width: 600px;
	height:450px;
	margin: 0 auto 0;
	text-align:center;
}

#works_iframe .inner{
	padding:50px;
	text-align:left;
	overflow:hidden;
	background:#fff;
}

#works_iframe .cover{
	text-align:left;
	float:left;
	border:#ccc solid 1px;
}

#works_iframe .data{
	width:220px;
	height:350px;
	text-align:left;
	float:right;
	position:relative;
}

#works_iframe h1{ font-size:120%;}

#works_iframe h2,
#works_iframe h3,
#works_iframe h4,
#works_iframe h5{ font-size:90%;}

#works_iframe p{ color:#999999; font-size:80%;}

#works_iframe .btn {
	font-size:90%;
	color: #333333 !important;
	position:absolute;
	z-index:5;
	bottom:0;
	right:0;
}

#works_iframe .btn a {
	padding:5px 10px;
	display: inline-block;
	outline: none;
	/**/
	border:solid 2px #333333;
	background: #333333;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */  
}

#works_iframe .btn a:hover,
#works_iframe .btn a:active {
	border:solid 2px #333333;
	background-color: #fff;
	color: #333333 !important;
}

#works_iframe .btn a::before,
#works_iframe .btn a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

#works_iframe .btn a,
#works_iframe .btn a::before,
#works_iframe .btn a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}



/*----------------------------------------------------
	Table
----------------------------------------------------*/

table{
	border-collapse:collapse;
	border-spacing:0;
}


/*----------------------------------------------------
	txt
----------------------------------------------------*/
.txtL{ text-align:left !important;}
.txtR{ text-align:right !important;}
.txtC{ text-align:center !important;}

.floatL{ float:left !important;}
.floatR{ float:right !important;}

/*----------------------------------
	Margin and Padding
----------------------------------*/
.mt5{margin-top:5px!important;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}
.mt25{margin-top:25px!important;}
.mt30{margin-top:30px!important;}
.mt35{margin-top:35px!important;}
.mt40{margin-top:40px!important;}
.mt45{margin-top:45px!important;}
.mt50{margin-top:50px!important;}

.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}
.mb25{margin-bottom:25px!important;}
.mb30{margin-bottom:30px!important;}
.mb35{margin-bottom:35px!important;}
.mb40{margin-bottom:40px!important;}
.mb45{margin-bottom:45px!important;}
.mb50{margin-bottom:50px!important;}

.mr5{margin-right:5px!important;}
.mr10{margin-right:10px!important;}
.mr15{margin-right:15px!important;}
.mr20{margin-right:20px!important;}
.mr25{margin-right:25px!important;}

.ml5{margin-left:5px!important;}
.ml10{margin-left:10px!important;}
.ml15{margin-left:15px!important;}
.ml20{margin-left:20px!important;}
.ml25{margin-left:25px!important;}

.mr80{margin-right:80px!important;}

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



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

#section01{width:900px;}
#section02 #news_conts {width:850px; padding:0 25px 0;}
#section03 #about_conts {width:850px; padding:0 25px 0;}
#section06 {width:900px;}
#copyright {width:900px;}
#back_top a {width:900px;}

#works,
#works #header,
#works #pankuzu_wrap {width:900px;}

}