#header-container{
    width:96%;
    margin:0 auto;
    padding:5px 0px 10px;
}


#main-container{
    width:100%;
    margin:0 auto;
}

.article-box{
    background:#FFF;
    padding:5px 0px;
}

.article-box article{
    border-radius:10px;
}

.article-box h1{
    text-align:center;
}

.section-box{
    background:url(../img/common/bg_area.png) #d4f2ff repeat center top;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    padding:20px 5px 10px;
    margin:-16px 0px 0px
}


@media screen and (max-width: 1200px){
    img {max-width:100%;}
    h1.title img{
        width:160px;
    }
}

#top_character{
	position: absolute;
	top:2%;
	right:6%;
	z-index: 0;
	width:50%;
	text-align:left;
}

#top_character img{
	margin-left:-10%;
} 


/* message */
#message{
    background:url(../img/common/bg_area.png) #ffcde3 repeat center top;
    position:relative;
    z-index: 1;
}

#message article{
    background:url(../img/top/bg_message-top.png) no-repeat left top,
    url(../img/top/bg_message-bottom.png) no-repeat right bottom;
    background-color:#FFF;
    margin:0px 5px;
    padding:5px 10px;
    background-size: 7%;
}

#message .photo{
    text-align:center;
}


/* news */
#news h1{
    background:url(../img/top/bg_news-line.gif) repeat-x 0% 68%;
    text-align:center;
}

#news dt{
    font-weight:bold;
}

#news dl{
    border-bottom:1px solid #CCC;
    margin:15px 5px 10px;
    padding-bottom:10px;
}

/* works */
#works .works-box{
    background:#FFF;
    padding:10px;
    border-radius:4px;
    margin:5px 0px 15px;
}


/* concept */
#concept section{
    background:#FFF;
    padding:10px;
    border-radius:4px;
}

#concept em{
    color:#00a0e9;
}    

#concept h2{
    text-align:center;
}

#concept ol {
    margin:10px 0px 5px 0px;
    line-height:1.2;
}

#concept ol li{
    font-size:139%;
    font-weight:bold;
    margin:5px 0px;
    padding-bottom:10px;
    border-bottom:1px solid #ccc;
    list-style-position:inside;
}

#concept ol li span{
    font-size:80%;
}



/* service */

#service .service-box{
    margin-bottom:15px;
}

#service .service-box h2{
    background:#FFF;
    text-align:center;
    border-radius:8px 8px 0px 0px;
    border-bottom:1px dotted #CCC;
}

#service .service-box .service-txt{
    background:#FFF;
    border-radius:0px 0px 8px 8px;
    padding:10px;
}

#service .service-box .service-txt h3{
    background:url(../img/top/bg_service.gif) no-repeat;
    text-indent:1.5em;
}

#service .service-box .service-txt .btn-detail{
    text-align:center;
    margin-top:10px;
}

footer{
	text-align:center;
	padding:15px 0px;
}


@media screen and (min-width: 768px){

	#header-container{
	    width:100%;
	}

	#header-container header{
		display:table;
		width:100%;
	}

	#header-container header h1 ,#header-container header nav{
		display:table-cell;
		vertical-align:middle;
	}

	#header-container header nav{
		padding:34px 0px 0px 30px;
	}

	#header-container #navi li{
		display:inline-block;
		padding:8px 20px 12px;
		border-left:1px dotted #6dc7f2;
	}

	#top_character{
		top:6%;
		right:0%;
		z-index:2;
		text-align:right;
		width:36%;
	}

	.article-box {
		padding:20px 15px;
	}

	#message{
		background: url(../img/common/bg_area.png)  #ffcde3;
	}

	#message article{
		width:70%;
		box-shadow: 1px 1px 7px #e93487;
	}


	#message-box{
		display:table;
	}

	#message-txt ,#message-box .photo{
		display:table-cell;
		vertical-align:top;
		padding:5px 10px 5px 5px;
	}

	#news h1{
		text-align: left;
	}

	#news dl{
		display:table;
		width:100%;
	}

	#news dl dt{
		width:8%;
	}

	#news dl dt ,#news dl dd{
		display: table-cell;
	}

	#news dl dd{
		padding-left:5px;
	}

	#works .section-box{
		text-align:center;
	}

	#works .works-box{
		padding:6px;
		margin:5px;
		display:inline-block;
	}

	#concept h2{
		font-size:123.1%;
	}

	#concept em{
		font-weight:bold;
	}

	#concept #point{
		display: table;
		width:98%;
		margin: 0 auto;
	}

	#concept #point h2 ,#concept #point ol{
		display: table-cell;
	}

	#concept #point h2{
		vertical-align:middle;
	}

	#concept #point ol li{
		font-style: italic;
		font-size:182%;
	}

	#concept #point ol li span{
		font-style:normal;
		font-size:58%;
	}

	#concept .section-box section{
		margin:5px 15px;
		background:url(../img/top/bg_concept.png) no-repeat #FFF right top;
	}

	#service .service-box{
		margin:15px;
	}

	#service .service-box h2{
		width:157px;
		border-radius: 8px;
	}

	#service .service-box .service-txt {
		margin:-157px 0px 0px 164px; 
		border-radius: 8px;
		min-height:137px;
	}

	#service .service-box .service-txt .btn-detail{
		text-align: right;
	}
}

@media screen and (min-width: 1020px){
	#wrapper{
		width:1020px;
		margin:0 auto;
		position:relative;
	}

	#header-container{
		margin-bottom:15px;
	}

	#top_character{
		width:312px;
		top:10px;
		left:680px;
	}

	#message article{
		width:640px;
	}

	#message article h1{
		text-align:center;
		padding-top:10px;
	}

	

}