@charset "UTF-8";

/* =========================================================
top
========================================================= */
#top #wrapper{
	position:relative;
	padding-top:54.8%;
}

#top #wrapper header{
	width: 80%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 25px 0 20px 0;
}

#top #wrapper header nav{
	padding-top:66px;
}

#top #wrapper header nav li{
	width:14%;
	float:left;
}

#top #slide{ 
    position: absolute;  
    top: 0;
    left: 0;
	width:100%;
	z-index:1;
}

#top #slide #crossfade{
    position: relative;
    z-index: 1;
    overflow: visible;
}

#top #slide img{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
	width:100%;
}

#top #wrapper h2{
	margin-bottom:30px;
}

#top #wrapper section#sec01{
	width:100%;
	background:url(../images/i_bg01_2.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	padding-bottom:30px;
	padding-top:50px;
	text-align:center;
}

#top #wrapper section#sec01 p{
	margin-bottom:50px;
	color:#ffffff;
	font-size:16px;
}

#top #wrapper section#sec01 .btn01 a{
	border:#ffffff solid 1px;
	color:#ffffff;
}

#top #wrapper section#sec02{
	width:100%;
	background:url(../images/i_bg01.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	padding:80px 0;
}

#top #wrapper section#sec02 ul{
	padding-bottom:35px;
	width:550px;
	margin:0 auto;
	text-align:left;
}

#top #wrapper section#sec02 ul li{
	padding-bottom:10px;
}

#top #wrapper section#sec03{
	width:100%;
	background-image:url(../images/i_bg02.png),url(../images/i_bg03.png);
	background-repeat: no-repeat,no-repeat;
	background-position: top right,bottom left;
	padding:80px 0;
}

#top #wrapper section#sec03 ul{
	padding-bottom:35px;
	width:550px;
	margin:0 auto;
	text-align:left;
}

#top #wrapper section#sec03 ul li{
	padding-bottom:10px;
}

#wrapper section#sec03 #sns{
	width:1040px;
	padding-top:45px;
	margin:0 auto;
}

#top #wrapper section#sec03 .fb-page{
	width:500px;
	float:left;
}

#top #wrapper section#sec03 #insta{
	width:500px;
	float:right;
}

#top #wrapper section#sec03 #insta a:hover{
	opacity:0.6;
}

/* =========================================================
news
========================================================= */
#news #wrapper #headline1{
	width:100%;
	background:url(../images/news_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
	margin-bottom:80px;
}

#news #wrapper section{
	background:url(../images/c_line.gif) repeat-x bottom left;
	padding-bottom:15px;
	width:880px;
	text-align:left;
	margin:0 auto 50px auto;
}

#news #wrapper section span{
	font-weight:normal;
}

#news #wrapper section h2{
	margin-bottom:35px;
}

#news #wrapper section p{
	margin-bottom:35px;
}

#news #wrapper section figure{
	float:right;
	padding:0 0 35px 30px;
}

/* =========================================================
works
========================================================= */
#works #wrapper #headline1{
	width:100%;
	background:url(../images/works_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
	margin-bottom:80px;
}

#works #wrapper section h2{
	margin-bottom:35px;
}

#works #wrapper ul{
	min-height:400px;
}

#works #wrapper li{
	margin-bottom:70px;
}

#works #wrapper li a:hover{
	opacity:0.6;
}

/* =========================================================
works_detail
========================================================= */
#works_detail #wrapper #headline1{
	width:100%;
	background:url(../images/works_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
	margin-bottom:80px;
}

#works_detail #wrapper .btn02{
	margin-top:40px;
}	
	
#works_detail #wrapper .btn02 a{
	border:#000000 solid 1px;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
	padding:5px 20px;
	font-size:14px;
	letter-spacing:2px;
	text-decoration:none;
}

#works_detail #wrapper .btn02 a:hover{
	opacity:0.5;
}

#works_detail #wrapper .btn02 a span{
	background: url(../images/c_arrow01.png) no-repeat left center;
	padding-left:22px;
}

#works_detail #wrapper div{
	width:1080px;
	margin:0 auto;
}

#works_detail #wrapper #works_l{
	width:530px;
	float:left;
	text-align:left;
	margin:0;
}

#works_detail #wrapper #works_l h2{
	font-size:20px;
	margin-bottom:40px;
}

#works_detail #wrapper #works_l h2 span{
	font-size:12px;
	background:#3f1b33;
	padding:1px 5px;
	color:#fff;
	font-weight:normal;
}

#works_detail #wrapper #works_r{
	width:507px;
	float:right;
	margin:0;
}

#works_detail #wrapper #works_r li img{
	width:101px;
	float:left;
	padding:1px 0 0 1px;
}

#works_detail #wrapper #works_r .over img{
	filter:alpha(opacity=50);
	opacity:0.50;
}

#works_detail #wrapper #works_r a:hover{
	filter:alpha(opacity=50);
	opacity:0.50;
}


/* =========================================================
about
========================================================= */
#about #wrapper #headline1{
	width:100%;
	background:url(../images/about_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
	margin-bottom:80px;
}

#about #wrapper section h2{
	margin-bottom:35px;
}

#about #wrapper #sec01{
	padding-bottom:80px;
	width:740px;
	margin:0 auto;
}

#about #wrapper #sec01 div div{
	width:430px;
	float:left;
	text-align:left;
}

#about #wrapper #sec01 h3{
	font-weight:normal;
	margin-bottom:20px;
}

#about #wrapper #sec01 dl{
	margin-bottom:20px;
}

#about #wrapper #sec01 figure{
	width:300px;
	float:right;
}

#about #wrapper #sec02{
	padding-bottom:60px;
}

#about #wrapper #sec02 ul{
	margin-top:30px;
}

#about #wrapper #sec02 ul li{
	margin-bottom:20px;
}

#about #wrapper #sec03{
	padding-bottom:30px;
}

#about #wrapper #sec03 p{
	padding-bottom:30px;
	width:800px;
	margin:0 auto;
	text-align:left;
}

#about #wrapper #contact{
	width:100%;
	background-color:rgba(0,0,0,0.1);
	padding:20px;
	margin-top:80px;
}

#about #wrapper #contact p a{
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
	padding:10px 100px;
	font-size:14px;
	text-decoration:none;
	background-color:#515d45;
	color:#fff;
}

#about #wrapper #contact p a span{
	background:url(../images/c_contic.png) no-repeat left center;
	padding-left:33px;
}

#about #wrapper #contact p a:hover{
	opacity:0.6;
}

/* =========================================================
concept
========================================================= */
#concept #wrapper #headline1{
	width:100%;
	background:url(../images/concept_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
}

#concept #wrapper #sec01{
	width:100%;
	padding:80px 0 0 0;
	background:url(../images/concept_bg1.png) top right no-repeat;
}

#concept #wrapper #sec01 p{
	width:1080px;
	margin:0 auto;
	text-align:left;
	margin-bottom:40px;
}

#concept #wrapper #sec02{
	width:100%;
	padding:40px 0 20px 0;
	background:url(../images/concept_bg2.png) bottom left no-repeat;
}

#concept #wrapper #sec02 p{
	width:1080px;
	margin:0 auto;
	text-align:right;
	margin-bottom:40px;
}

/* =========================================================
contact
========================================================= */
#contact #wrapper #headline1{
	width:100%;
	background:url(../images/contact_titbg.jpg) top left no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	height:390px;
	padding-top:262px;
	margin-bottom:80px;
}

#contact #wrapper .red{
	color:#990000;
}

#contact #wrapper .table{
	width:1080px;
	margin:40px auto 0 auto;
}

#contact #wrapper .table tr{
	background:url(../images/c_line.gif) top left repeat-x;
}

#contact #wrapper .table th{
	width:20%;
	text-align:left;
	vertical-align:top;
	padding: 20px 0;
}

#contact #wrapper .table td{
	width:80%;
	text-align:left;
	vertical-align:top;
	padding: 20px 0;
}

#contact #wrapper .table input{
	height:35px;
}

#contact #wrapper .formshort{
	width:150px;
}
	
#contact #wrapper .formmiddle{
	width:350px;
}

#contact #wrapper .formlong{
	width:700px;
}
	
#contact #wrapper textarea{
	width:100%;
}

#contact #wrapper fieldset{
	border:0;
	padding:0;
}

#contact #wrapper #submit{
	text-align: center;
	margin:40px 0;
}

#contact #wrapper .button1{
	margin:0 auto;
	cursor:pointer;
	width:20%;
	border:#000000 solid 1px;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
	padding:5px 20px;
	font-size:14px;
	letter-spacing:2px;
	text-decoration:none;
	background:none;
}

#contact #wrapper .button1:hover{
	opacity: 0.6;
}

#contact #wrapper .add{
	margin-bottom:0.5em;
}

#contact #wrapper #privacy{
	font-size:12px;
}

/* =========================================================
privacy
========================================================= */
#privacy #wrapper section{
	width:1080px;
	margin:0 auto;
	text-align:left;
}

#privacy #wrapper section h1,#privacy #wrapper section h2,#privacy #wrapper section h3{
	padding-top:50px;
}