@charset "utf-8";

/*
	common
-------------------------------------------------------------------- */

#contents section {
	margin: 0;
}


/*
	main image
-------------------------------------------------------------------- */

#pc_main {
	display: block;
	clear: both;
}

#sp_main {
	display: none;
}

#main_image {
	display: none;
	margin-top: -12px;
}

#main_image {
	max-width: 100%;
	margin: 0 0%;
}



.red{
	color: red;
	text-align: center;
	font-size: 18px;
margin: 10px;
}


/*
	cont01
-------------------------------------------------------------------- */

#cont01 {
	background: #222;
}

#cont02 {
	background: #444;
}

#cont01 ul,
#cont02 ul {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width: 100%;
}

#cont01 .left,
#cont02 .right_pc {
	display: block;
	border: 60px solid #CCC;
	
	width: 50%;
	float: left;
}

#cont02 .right_sp {
	display: none;
}

#cont01 .right,
#cont02 .left {
	display: block;
	background: #000;
	color: #FFF;
	text-align: center;
	
	width: 50%;
	float: right;
	padding: 90px 0 0;
}

#cont01 h2,
#cont02 h2 {
	width: 270px;
	margin: 0 auto 50px;
}

#cont01 .txt01,
#cont02 .txt01 {
	display: block;
	
	font-size: 18px;
	padding-bottom: 30px;
}

#cont01 .txt02,
#cont02 .txt02 {
	font-size: 13px;
}

#cont01 .right a,
#cont02 .left a {
	display: block;

	width: 130px;
	padding: 5px;
	margin: 60px auto;
}





/*
	news
-------------------------------------------------------------------- */

#news {
	background: #000;
}

#news h2 {
	background: #d11222;
	width: 50%;
	height: 300px;
	float: left;
	display: table;
}

#news h2 span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#news h2 span img {
	width: 50%;
}

#news .news_inr {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,f4f4f4+100 */
	background: #fcfcfc; /* Old browsers */
	background: -moz-linear-gradient(top,  #fcfcfc 0%, #f4f4f4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fcfcfc 0%,#f4f4f4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #fcfcfc 0%,#f4f4f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
	
	height: 300px;
	width: 50%;
	float:right;
	padding: 50px 100px;
}

#news dl {
	height: 200px;
	overflow-y: scroll;
}

#news dt,
#news dd {
	margin-bottom: 10px;
}

#news dt {
	width: 20%;
	float: left;
	clear: left;
}

#news dd {
	width: 78%;
	float: right;
}





/*
	works
-------------------------------------------------------------------- */

#works {
	background: url(../img/work_bg.jpg);
	background-attachment:fixed;
	-moz-background-size:100% auto;
	background-size:100% auto;
}

#works h2 {
	width: 100%;
	background: #FFF;
	text-align: center;
	padding: 40px 0;
}

#works h2 img {
	width: 150px;
}

#works ul {
	max-width: 1400px;
	padding: 80px 0;
	margin: 0 auto;
}

#works li {
	text-align: center;
	width: 30.3%;
	float: left;
	margin: 0 1.5%;
}

#works li span {
	display: block;
	color: #FFF;
}

#works .txt01 {
	margin: 10px 0;
}

#works .txt02 {
	font-size: 22px;
	font-weight: bold;
}





/*
	company
-------------------------------------------------------------------- */

#company {
	background: #232222;
	color: #FFF;
	padding: 15px 0;
}

#company a {
	color: #FFF;
}

#company .outer {
	border-bottom: 10px solid #FFF;
	padding: 90px 0;
}

#company .inr {
	max-width: 1200px;
}

#company .left {
	width: 55%;
	float: left;
}

#company .right {
	width: 45%;
	float: right;
}

#company h2 {
	width: 230px;
}

#company h3 {
	border-left: 5px solid #FFF;
	font-size: 18px;
	padding-left: 10px;
	margin: 30px 0;
}

#company dt,
#company dd {
	margin-bottom: 10px;
}

#company dt {
	width: 20%;
	float: left;
	clear: left;
}

#company dd {
	width: 78%;
	float: left;
}







/* tablet */
@media screen and (max-width: 768px){
/*
	common
-------------------------------------------------------------------- */

#contents section {
	margin: 0;
}


/*
	main image
-------------------------------------------------------------------- */

#pc_main {
	display: block;
	clear: both;
}

#sp_main {
	display: none;
}

#main_image {
	display: none;
	margin-top: -12px;
}

#main_image {
	max-width: 100%;
	margin: 0;
}






/*
	cont01
-------------------------------------------------------------------- */

#cont01 ul,
#cont02 ul {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	width: 100%;
}

#cont01 .left,
#cont02 .right_pc {
	border: 30px solid #CCC;
	width: 50%;
	float: left;
}

#cont02 .right_sp {
	display: none;
}

#cont01 .right,
#cont02 .left {	
	width: 50%;
	float: right;
	padding: 30px 0 0;
}

#cont01 h2,
#cont02 h2 {
	width: 150px;
	margin: 0 auto 20px;
}

#cont01 .txt01,
#cont02 .txt01 {
	font-size: 13px;
	padding-bottom: 15px;
}

#cont01 .txt02,
#cont02 .txt02 {
	font-size: 10px;
}

#cont01 .right a,
#cont02 .left a {
	width: 80px;
	padding: 3px;
	margin: 15px auto 0;
}





/*
	news
-------------------------------------------------------------------- */

#news h2 {
	width: 50%;
	height: 300px;
	float: left;
	display: table;
}

#news h2 span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#news h2 span img {
	width: 60%;
}

#news .news_inr {	
	height: 300px;
	width: 50%;
	float:right;
	padding: 40px 30px;
}

#news dl {
	height: 200px;
	overflow-y: scroll;
}

#news dt,
#news dd {
	margin-bottom: 10px;
}

#news dt {
	width: 25%;
	float: left;
	clear: left;
}

#news dd {
	width: 70%;
	float: right;
}





/*
	works
-------------------------------------------------------------------- */

#works {
	background: url(../img/work_bg.jpg);
	background-attachment:fixed;
	-moz-background-size:100% auto;
	background-size:100% auto;
}

#works h2 {
	width: 100%;
	padding: 40px 0;
}

#works h2 img {
	width: 150px;
}

#works ul {
	padding: 80px 0;
	margin: 0 auto;
}

#works li {
	width: 46%;
	float: left;
	margin: 0 2%;
}

#works .txt01 {
	margin: 10px 0;
}

#works .txt02 {
	font-size: 22px;
}





/*
	company
-------------------------------------------------------------------- */

#company {
	padding: 15px 0;
}

#company .outer {
	border-bottom: 10px solid #FFF;
	padding: 40px 3%;
}

#company .left {
	width: 55%;
	float: left;
}

#company .right {
	width: 45%;
	float: right;
}

#company h2 {
	width: 180px;
}

#company h3 {
	border-left: 5px solid #FFF;
	font-size: 15px;
	padding-left: 10px;
	margin: 10px 0;
}

#company dt,
#company dd {
	font-size: 11px;
	margin-bottom: 0px;
}

#company dt {
	width: 23%;
	float: left;
	clear: left;
}

#company dd {
	width: 75%;
	float: left;
}

}





/* SP */
@media screen and (max-width:640px){

/*
	common
-------------------------------------------------------------------- */

#contents section {
	margin: 0;
}


/*
	main image
-------------------------------------------------------------------- */

#pc_main {
	display: none;
}

#sp_main {
	display: block;
	clear: both;
}

#main_image {
	display: none;
	margin-top: -12px;
}

#main_image {
	max-width: 100%;
	margin: 0;
}






/*
	cont01
-------------------------------------------------------------------- */

#cont01 {
	margin-top: 0px;
}

#cont01 ul {
	width: 100%;
}

#cont01 .left,
#cont02 .right_sp {
	display: block;
	width: 100%;
	float: none;
	border: 25px solid #222;
}

#cont02 .right_pc {
	display: none;
}

#cont01 .right,
#cont02 .left {
	width: 100%;
	float: none;
	padding: 15px 0 0;
}

#cont01 h2,
#cont02 h2 {
	width: 40%;
	margin: 20px auto 20px;
}

#cont01 .txt01,
#cont02 .txt01 {
	font-size: 15px;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

#cont01 .txt02,
#cont02 .txt02 {
	display: block;
	font-size: 10px;
}

#cont01 .right a,
#cont02 .left a {
	width: 100px;
	margin: 10px auto 25px;
}





/*
	news
-------------------------------------------------------------------- */

#news h2 {
	width: 100%;
	height: 100px;
	float: none;
	display: table;
}

#news h2 span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#news h2 span img {
	width: 60%;
}

#news .news_inr {	
	height: 240px;
	width: 100%;
	float: none;
	padding: 20px 0;
}

#news dl {
	padding: 0 5%;
	height: 200px;
	overflow-y: scroll;
}

#news dt,
#news dd {
	margin-bottom: 10px;
}

#news dt {
	width: 25%;
	float: left;
	clear: left;
}

#news dd {
	width: 70%;
	float: right;
}





/*
	works
-------------------------------------------------------------------- */

#works {
	background: url(../img/work_bg.jpg);
	background-attachment: fixed;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
}

#works h2 {
	width: 100%;
	padding: 40px 0;
}

#works h2 img {
	width: 100px;
}

#works ul {
	padding: 60px 0 30px;
	margin: 0 auto;
}

#works li {
	width: 90%;
	float: none;
	margin: 0 5% 30px;
}

#works .txt01 {
	margin: 5px 0;
}

#works .txt02 {
	font-size: 18px;
}





/*
	company
-------------------------------------------------------------------- */

#company {
	padding: 15px 0;
}

#company .outer {
	border-bottom: 5px solid #FFF;
	padding: 20px 5%;
}

#company .left {
	width: 100%;
	float: none;
}

#company .right {
	width: 80%;
	float: none;
	margin: 20px 10%;
}

#company h2 {
	width: 100%;
	text-align: center;
}

#company h2 img {
	width: 150px;
}

#company h3 {
	border-left: none;
	font-size: 12px;
	padding-left: 0;
	margin: 0 0 10px;
	text-align: center;
}

#company dt,
#company dd {
	font-size: 10px;
	margin-bottom: 0px;
}

#company dt {
	width: 28%;
	float: left;
	clear: left;
}

#company dd {
	width: 70%;
	float: left;
}

}