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

body {
	width:100%;
}

a:hover {
	text-decoration:none;
}

a:hover img{
	text-decoration:none;
	
}

a:hover img{
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}


.clearer {
	clear:both;
}

.clearer30 {
	clear:both;
	height:30px;
}

.clearer50 {
	clear:both;
	height:50px;
}

.clearfix {width:100%;}

.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
 }
 
 .fr {
	 float:right;
 }
 
 .fl {
	 float:left;
 }
 
/*pagetop*/

#toTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
	z-index:10001;
}
	

 #header .container .icolink{
	position:absolute;
	top:10px;
	rignt:0;
}

#header .container .icolink li{
	float:right;
	margin-left:10px;
}

.link_area p {text-align:center;
line-height:200%;
margin-bottom:30px;
}

.link_area p.link span{
	background:url(../img/link_arrow.png) left center no-repeat;
	padding-left:20px;
	margin-bottom:0;
	line-height:1;
}

.link_area p.link a{
	color:#1a96f9;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:2px;
}

@media screen and (min-width: 1301px){
.wrapper {
	border-top:7px solid #1a96f9;
}
	
#header {
	border-top:7px solid #1a96f9;
	background:url(../img/bg_img01.jpg) top center no-repeat;
	width:1300px;
	margin:0 auto;
}

#header .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;	
}

#header .container .logo{
	position:absolute;
	top:-7px;
	left:0;
}


#contents01 {
	background-color:#dceeff;
	width:1300px;
	margin:0 auto;
}

#contents01 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:75px;	
}

#contents02 {
	background:url(../img/bg_img02.jpg) top center no-repeat;
	width:1300px;
	position:relative;
	margin:0 auto;
}

#contents02 .container {
	width:960px;
	margin:0 auto;
	padding-bottom:95px;	
}

#contents03 {
	background-color:#1a96f9;
	width:1300px;
	margin:0 auto;
}

#contents03 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:90px;	
}

#contents04 {
	background:url(../img/bg_img03.jpg) top center no-repeat;
	width:1300px;
	margin:0 auto;
	position:relative;
}

#contents04 .container {
	width:960px;
	margin:0 auto;
	padding-bottom:110px;	
}

#contents05 {
	background-color:#dceeff;
	width:1300px;
	margin:0 auto;
}

#contents05 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;	
}

#contents06 {
	background-color:#FFFFFF;
	width:1300px;
	margin:0 auto;
}

#contents06 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:70px;	
}

#contents06 h2 .arrow{
	position:absolute;
	bottom:-30px;
	left:614px;
}

#contents07 {
	background-color:#1a96f9;
	width:1300px;
	margin:0 auto;
}

#contents07 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:140px;	
}


#contents08 {
	background:url(../img/bg_img04.jpg) top center no-repeat;
	width:1300px;
	margin:0 auto;
}

#contents08 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:100px;	
}

#contact_form {
	border-top:7px solid #1a96f9;
	width:1300px;
	margin:0 auto;
	background-color:#1a96f9;	
}

#contact_form .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;
}

#contact_form .container .logo{
	position:absolute;
	top:-7px;
	left:0;
}


}


@media screen and (max-width:1300px){
.wrapper {

}
	
#header {
	border-top:7px solid #1a96f9;
	background:url(../img/bg_img01.jpg) top center no-repeat;
}

#header .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;
}

#header .container .logo{
	position:absolute;
	top:-7px;
	left:0;
}

#contents01 {
	background-color:#dceeff;
}

#contents01 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:75px;
}

#contents02 {
	background:url(../img/bg_img02.jpg) top center no-repeat;
	position:relative;
}

#contents02 .container {
	width:960px;
	margin:0 auto;
	padding-bottom:95px;
}

#contents03 {
	background-color:#1a96f9;
}

#contents03 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:90px;
}

#contents04 {
	background:url(../img/bg_img03.jpg) top center no-repeat;
	position:relative;
}

#contents04 .container {
	width:960px;
	margin:0 auto;
	padding-bottom:110px;
}

#contents05 {
	background-color:#dceeff;
}

#contents05 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;
}

#contents06 {
	background-color:#FFFFFF;
}

#contents06 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:70px;
}

#contents06 h2 .arrow{
	position:absolute;
	bottom:-30px;
	left:45%;
}

#contents07 {
	background-color:#1a96f9;
}

#contents07 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:140px;
}


#contents08 {
	background:url(../img/bg_img04.jpg) top center no-repeat;
}

#contents08 .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:100px;
}

#contact_form {
	border-top:7px solid #1a96f9;
	background-color:#1a96f9;	
}

#contact_form .container {
	width:960px;
	margin:0 auto;
	position:relative;
	padding-bottom:45px;
}

#contact_form .container .logo{
	position:absolute;
	top:-7px;
	left:0;
}

}



h1 {
	text-align:center;
	padding:120px 0 30px;
}

#header .container p {
	text-align:center;
}

#header .container #gnav {
	width:888px;
	margin:55px auto 0;
}

#header .container #gnav li{
	float:left;
	padding:0 35px;
}

#contents01 {
	text-align:center;
}

#contents01 h2 {
	text-align:center;
	padding:75px 0 65px;
}

#contents01 ul{
	width:845px;
	margin:0 auto 55px;
}

#contents01 ul li.wf{
	float:left;
	margin-right:205px;
	margin-right:140px;
}

#contents01 ul li.design{
	float:left;
	margin-right:160px;
	margin-right:140px;
}

#contents01 ul li.html{
	float:right;
}

#contents01 .arrow{
	position:absolute;
	bottom:-50px;
	left:0;
	z-index:10000;
	
}

#contents02 {
	text-align:center;
}

#contents02 h2 {
	text-align:center;
	padding:75px 0 45px;
}

#contents02 .arrow{
	position:absolute;
	bottom:0;
	left:0;
	z-index:10000;
}


#contents03 {
	text-align:center;
}

#contents03 h2 {
	text-align:center;
	padding:75px 0 60px;
}

#contents03 .merit01 {
	width:960px;
	margin:0 auto;
}

#contents03 .merit01 li{
	margin:0 25px;
	float:left;
}


#contents03 .merit02 {
	width:640px;
	margin:0 auto;
}

#contents03 .merit02 li{
	margin:0 25px;
	float:left;
}

#contents03 .arrow{
	position:absolute;
	bottom:-50px;
	left:0;
	z-index:10000;
}
	
#contents04 {
	text-align:center;
}

#contents04 h2 {
	text-align:center;
	padding:90px 0 50px;
}

#contents04 p.right {
	margin-top:30px;
	margin-right:20px;
	text-align:right;
}

#contents04 .arrow{
	position:absolute;
	bottom:0;
	left:0;
	z-index:10000;
}

#contents05 {
	
}

#contents05 h2 {
	text-align:center;
	padding:40px 0 65px;
}

#contents05 .results {
	margin-bottom:80px;
	
}

#contents05 .results .site_img{
	width:615px;
	float:left;
	text-align:center;
	
}

#contents05 .results .site_detail{
	width:300px;
	float:right;
	
}

#contents05 .results .site_detail h3{
	color:#1a96f9;
	font-size:21px;
	line-height:150%;
	margin-bottom:25px;
	font-weight:bold;
	
}

#contents05 .results .site_detail h4{
	color:#1a96f9;
	font-size:14px;
	line-height:150%;
	font-weight: normal;
	margin-bottom:5px;
	
}

#contents05 .results .site_detail p{
	color:#000000;
	font-size:16px;
	line-height:150%;
	margin-bottom:20px;
}

#contents05 .results .site_detail p a{
	color:#000000;
}

#contents05 .results .site_detail .skill {
	margin-top:30px;
}

#contents05 .results .site_detail .skill li{
	margin-bottom:5px;
}



#contents06 {
	text-align:center;
}

#contents06 h2 {
	text-align:center;
	padding:25px 0;
	line-height:100%;
	background-color:#1a96f9;
	margin-bottom:100px;
	width:100%;
	position:relative;
}


#contents06 .other_results {
	width:800px;
	margin:0 auto 20px;
}

#contents06 .other_results li{
	float:left;
	width:160px;
	height:230px;
	text-align:center;
}

#contents06 .other_results li p{
	font-size:13px;
	color:#000000;
	line-height:160%;
}

#contents07 {
	text-align:center;
	
}

#contents07 h2 {
	text-align:center;
	padding:50px 0 70px;
}

#contents07 h3 {
	margin-bottom:35px;
}

#contents07 .contact_form {
	width:750px;
	margin:0 auto;
	
}

#contents07 .contact_form table{
	
}


#contents07 .contact_form table th{
	font-size:19px;
	color:#FFFFFF;
	text-align:left;
	width:180px;
	padding-top:12px;
	vertical-align:top;
}

#contents07 .contact_form table th sup{
	font-size:15px;
}

#contents07 .contact_form table td{
	
}

#contents07 .contact_form table td h4{
	font-size:19px;
	color:#FFFFFF;
	text-align:left;
	font-weight:normal;
	margin-bottom:10px;
	
}

#contents07 .contact_form table td input{
	margin-bottom:20px;
	font-size:13px;
	padding:10px;
	width:550px;
	border:none;
}

#contents07 .contact_form table td select{
	margin-bottom:40px;
	font-size:13px;
	height:35px;
	width:570px;
	border:none;
	
}

#contents07 .contact_form table td textarea{
	width:730px;
	height:270px;
	padding:10px;
	border:none;
	font-size:16px;
	color:#535353
	
}

#contents07 .contact_form .send{
	margin:40px 0 0;
	text-align:center;
	
}

#contents07 .contact_box {
	margin:0 auto 90px;
	width:830px;
}

#contents07 .area {
	width:940px;
	margin:0 auto;
}

#contents07 .area li{
	float:left;
}

#contents07 .area li.fukuoka{
	padding-right:50px;
}


#contents07 .area li.tokyo{
	border-left:2px dashed #FFFFFF;
	border-right:2px dashed #FFFFFF;
	padding:0 50px;
}

#contents07 .area li.other{
	padding-left:50px;
}

#contents07 .arrow{
	position:absolute;
	bottom:-50px;
	left:0;
	z-index:10000;
}


#contents08 {
	
}

#contents08 h2 {
	text-align:center;
	padding:90px 0 75px;
}

#contents08 h3 {
	width:720px;
	margin:0 auto 20px;
}

#contents08 .about {
	width:720px;
	margin:0 auto;
	border-top:1px dashed #FFFFFF;
}

#contents08 .about th{
	padding:10px 10px;
	width:200px;
	color:#FFFFFF;
	font-size:14px;
	font-weight:normal;
	text-align:left;
	border-bottom:1px dashed #FFFFFF;
}

#contents08 .about td{
	padding:10px 0;
	color:#FFFFFF;
	font-size:14px;
	border-bottom:1px dashed #FFFFFF;
}

#contents08 .about td a{
	color:#FFFFFF;
}

.complete {
	padding-top:200px;
	text-align:center;
}

.complete p{
	text-align:center;
	font-size:16px;
	line-height:200%;
	color:#FFFFFF;
	margin-bottom:50px
}

.complete p a{
	color:#ffdf00;
}

#contents07 .contact_form {
	padding-bottom:50px;
}

.confirm_table {
	margin-top:80px;
	margin-bottom:30px;
	width:100%;
}

#contents07 .contact_form .confirm_table th{
	border-bottom:1px solid #57B1FF;
	font-size:16px;
	padding:10px 0;
}

#contents07 .contact_form .confirm_table td{
	border-bottom:1px solid #57B1FF;
	font-size:16px;
	color:#333333;
	padding:10px 0;
	text-align:left;
}

#contents07 .contact_form .confirm_table td .ERR{
	color:#ffdf00;
}

p.copy {
	width:100%;
	background-color:#FFFFFF;
	color:#000000;
	padding:2px 0;
	text-align:center;
	font-size:11px;
}