@charset "utf-8";
/* CSS Document */


body	{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1,h2,p,ul,li,img {
	border:0;
	margin:0;
	padding:0;
}

#body1090 {
	width:1090px;
	margin:0 auto;
	position:relative;
}

#navi {
	height:24px;
	padding-left:490px;
	margin:100px 0;
	background-image: url(../image/title.gif);
	background-repeat: no-repeat;
	background-position:left middle;
}

#navi-sub {
	height:24px;
	padding-left:490px;
	margin:100px 0 95px;
}

#navi ul ,#navi-sub ul {
	width:600px;
}

#navi ul li ,#navi-sub ul li {
	float:left;
	width:120px;
	list-style-type:none;
}


/**トップページ**/

#img_top {
	clear:both;	
	margin-bottom:100px;
}


/**WORKS一覧**/
#works-navi01 {
	float:left;
	width:147px;
	height:204px;
}

#works-navi02 {
	float:left;
	width:147px;
	height:204px;
}

#works-result {
	float:left;
	width:943px;
	height:535px;
}

#works-result ul{
}

#works-result ul li{
	width:285px;
	height:276px;
	margin:0 44px 0px 0;
	list-style-type:none;
	float:left;
}
#works-result ul li a{
	display:block;
	width:285px;
	height:204px;
}

#works-result ul li:nth-child(3n) {
	margin-right:0;
}

#works-result ul li:nth-child(n+4) {
	margin-bottom:55px;
}

.menu {
	width:147px;
	height:204px;
  	margin: 0px auto 72px;
  	padding: 0px;
  	background: #fff;
}

#menu-2nd li{
	height:23px;
}

label {
 	color: #666;
  	font-size:14px;
  	padding: 0px;
  	display: block;
  	margin: 0;
	background-image: url(../image/tab01_header.gif);
	background-repeat: no-repeat;
	background-position:0px 2px;
}

label:hover {
	background-image: url(../image/tab01_header.gif);
	background-repeat: no-repeat;
	background-position:0px 2px;
}

#menu-2nd label {
	background-position:14px 2px;
}

input[type="checkbox"].on-off{
 	display: none;
}

#works-navi01 ul ,#works-navi02 ul {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
}

#works-navi01 li {
  padding: 0px;
}

#works-navi02 li {
  padding: 0px;
}

input[type="checkbox"].on-off + ul{
  height: 0;
  overflow: hidden;
  overflow: visible\9;
}

input[type="checkbox"].on-off:checked + ul{
  height: 200px;
}

#pager {
	width:100%;
	clear:both;	
	text-align:right;
	font-size:14px;
	margin-top:-17px;
	position:absolute;
	top:670px;
	right:0;
	margin-bottom:100px;
}

#pager a{
	color:#999;
	padding-left:10px;
}

#pager span{
	color:#999;
	padding-left:10px;
}

#pager .nowpage{
	color:#333;
}

#pager:after {
  content: ""; 
  display: block; 
  clear: both;
}



/**ABOUT US**/

h1 , h2 {
	text-align:center;
	color:#000;
	font-size:14px;
	margin-bottom:30px;
	font-weight:normal;
}

#aboutus p {
	text-align:center;
	font-size:12px;
	line-height:21px;
	margin-bottom:60px;
}

#aboutus ul{
	width:1090px;
	height:2890px;
	margin-top:55px;
	margin-bottom:200px;
	padding-top:55px;
}

#aboutus ul li{
	width:314px;
	margin:0 74px 74px 0;
	list-style-type:none;
	float:left;
}

#aboutus ul li:nth-child(3n) {
	margin:0 0 74px 0px;
}

/**FLOW**/

#flow {
	text-align:center;
	font-size:12px;
	line-height:21px;
	margin-bottom:200px;
}

#flow ul{
	width:1090px;
	margin-top:0px;
	margin-bottom:0px;
}

#flow ul li{
	width:1090px;
	height:177px;
	margin:0;
	list-style-type:none;
	line-height:24px;
}

#flow ul li:nth-child(2n+1){
	padding:0 0 0 215px;
	text-align:left;
	background-repeat: no-repeat;
	background-position:0px 2px;
}

#flow ul li:nth-child(2n){
	padding:0 215px 0 0px;
	width:875px\9;
	text-align:right;
	background-repeat: no-repeat;
	background-position:0px 2px;
}

#flow ul li:nth-child(1){
	padding:40px 0 0 215px;
	background-image: url(../image/bg_flow01.gif);
}

#flow ul li:nth-child(2){
	padding:20px 215px 0 0px;
	background-image: url(../image/bg_flow02.gif);
}

#flow ul li:nth-child(3){
	padding:20px 0 0 215px;
	background-image: url(../image/bg_flow03.gif);
}

#flow ul li:nth-child(4){
	padding:20px 215px 0 0px;
	background-image: url(../image/bg_flow04.gif);
}

#flow ul li:nth-child(5){
	padding:20px 0 0 215px;
	background-image: url(../image/bg_flow05.gif);
}

#flow ul li:nth-child(6){
	padding:40px 215px 0 0px;
	background-image: url(../image/bg_flow06.gif);
}

#flow ul li:nth-child(7){
	padding:20px 0 0 215px;
	background-image: url(../image/bg_flow07.gif);
}

#flow ul li:nth-child(8){
	padding:60px 215px 0 0px;
	background-image: url(../image/bg_flow08.gif);
}

#flow ul li:nth-child(9){
	background-image: url(../image/bg_flow09.gif);
}

#flow ul li b{
	font-size:17px;
	margin:0 0 10px 0;
	font-weight:normal;
	line-height:39px;
}

#flow ul li p img{
	margin:0 5px;
}

#flow ul li h2:nth-child(2n){
}


/*WORKS DETAIL*/

#detail {
	margin-bottom:0px;
}

#detail:after {
  content: ""; 
  display: block; 
  clear: both;
}
#detail .bx-wrapper {
        min-height: 40VW;
}
.bxslider li {
  display: none;
}
.bx-viewport .bxslider li {
  display: block !important;
}
#detail #detail-text1 {
	position: relative;
	width:100%;
	height:74px;
	margin:50px 0 25px;
	float:left;
	background: #efefef;
}

#detail #detail-text2 {
	width:100%;
	margin:0px 0 0px;
}

#detail #detail-text1 .spec , #detail #detail-text2 .spec {
	position: absolute;
	right:20px;
	top:30px;
	font-size:16px;
	line-height:1em;
}

#detail #detail-text1 .num {
	position: absolute;
	left:10px;
	top:10px;
	width:60px;
	font-size:30px;
	line-height:1em;
	background-image: url("../../image/works_no.png");
	background-repeat: no-repeat;
	background-position:center top;
	padding-top:24px;
	text-align: center;
}

#detail #detail-text1 .text {
	position: absolute;
 	bottom: 0;
	font-size:13px;
	line-height:22px;
}
#detail #detail-text2 .text {
	font-size:13px;
	line-height:22px;
}

#detail #detail-designer1 {
	width:184px;
	margin:0px 0 100px;
	float:right;
	text-align:right;
}

#detail #detail-designer2 {
	width:400px;
	margin:0px 0 100px;
	float:right;
	text-align:right;
}

#detail #detail-designer1 img , #detail #detail-designer2 img{
	margin:0 0 6px 0;
}

#detail #detail-credit {
	font-size:11px;
	text-align:right;
	height:32px;
	padding-top:4px;
}
#detail .bxslider .detail-credit-slider {
	display:none;
    margin:0 auto;
	font-size:11px;
	text-align:right;
	height:32px;
	padding-top:4px;
}



#detail2 {
	margin-bottom:100px;
	width:1090px;
}

#detail2-left {
	float:left;
	width:576px;
	height:432px;
	margin:-20px;
}

#detail2-right {
	position: relative;
	float:right;
	width:467px;
	height:432px;
}

#detail2 #detail-text{
	width:304px;
	height:218px;
	margin:0px 0 0px;
	float:left;
}

#detail2 #detail-text .spec{
	font-size:14px;
	line-height:24px;
}

#detail2 .text{
	position: absolute;
 	bottom: 0;
	width:467px;
	font-size:13px;
	line-height:22px;
}

#detail2 #detail-designer{
	width:161px;
	margin:0px 0px 0px 0;
	float:right;
	text-align:right;
}

#detail2 #detail-designer img{
	height:218px;
	width:auto;
}

#detail2 #detail-credit {
	width:576px;
	font-size:11px;
	text-align:right;
	padding-top:4px;
}

#detail h1 , #detail2 h1 {
	position: absolute;
	left:135px;
	top:30px;
	font-size:18px;
	line-height:1em;
	text-align:left;
	font-weight:bold;
}

.new {
	position: absolute;
	left:86px;
	top:32px;
	display:inline-block;
	background-color:#F00;
	color:#FFF;
	font-size:10px;
	margin:0px 0 ;
	padding:1px 3px;
	line-height:1.25em;
}

.return {
	width:560px;
	height:60px;
	margin:110px auto 0;
}
.return a{
	display: block;
	width:100%;
	height:60px;
	line-height:60px;
	background-color: #3b6897;
	color:#FFF;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック", "YuGothic","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;     
}
.return a:hover{
	background-color: #48729f;   
}
/* スマホ */
@media screen and (max-width: 750px) {
    #body1090 {
        width:100%;
		padding-bottom: 0px;
    }
    #detail .bx-wrapper {
        min-height: 40VW;
    }
	.bx-wrapper .bx-next {
        right: 2%;
    }
	.bx-wrapper .bx-prev {
        left: 2%;
    }
	.bx-wrapper .bx-controls-direction a {
        margin-top: -16px;
        width: 23px;
        height: 45px;
    }
	.bx-wrapper .bx-next {
    	background: url(../../image/next.png) no-repeat;
		background-size: 100%;
	}
	.bx-wrapper .bx-prev {
    	background: url(../../image/prev.png) no-repeat;
		background-size: 100%;
	}
	#detail h1, #detail2 h1 {
        font-size: 16px;
        left:28%;
    }
    #detail #detail-text1 .spec , #detail #detail-text2 .spec {
        top:auto;
		right: 2%;
		bottom:5px;
        font-size:12px;
    }
	
    #detail #detail-text1 .num {
        left:2%;
        top:4VW;
        width:44px;
        font-size:22px;
    }
	
    .new {
        left:17%;
        /*top:8px;*/
    }
	#detail #detail-text2 .text {
        padding: 0 2%;
    }
	
    .return {
        width:90%;
        height:60px;
        margin:60px auto 0;
    }
    .return a{
        display: block;
        width:100%;
        height:60px;
        line-height:60px;
        font-size: 16px;    
    }
}
@media screen and (min-width:751px) and ( max-width:1079px) {
    #body1090 {
        width:100%;
		padding-bottom: 0px;
    }
	#detail .bx-wrapper {
        min-height: 40VW;
    }
	
	.bx-wrapper .bx-next {
        right: 2%;
    }
	.bx-wrapper .bx-prev {
        left: 2%;
    }
}

	#header .mail_btn {
        padding-top: 0px!important;
    }
@-moz-document url-prefix() {/*FF用CSSハック*/
}

.mb40 {
	margin-bottom:40px;	
}

.mb100 {
	margin-bottom:100px;	
}

.ml13 {
	margin-left:13px;	
}

.mr13 {
	margin-right:13px;	
}