@charset "utf-8";

/*--------------------------------------------------
	 SERVICE
--------------------------------------------------*/

	
@media screen and (max-width: 1024px) {

#mainimage {
	width: 100%;
	position: relative;
}

#footer .f_box{
	width:100%;
}

#footerinfo {
	width:40%;
	margin-bottom:20px;
}

#footerinfo img#gaikan {
	width:80%;
	max-width:140px;
	margin:0 0 0 10px;
	float:left;
}


#footerinfo #fi_right{
	width:220px;
	float:right;
	margin:0 auto;
}

#bannerarea ul li{
	width:30%;
	background-color:#e2e2e2;
}
#bannerarea ul li img{
	width:auto;
	height:auto;
}


#content #news h2{
	margin-left:15px;
}

}



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

#menu-container {display:none;}
.sp {display:none;}
.pc {display:block;}
#sidebox {display:block;}
#content {width:880px;}
}

@media screen and (max-width: 1010px) {

#sns{
	position:fixed;
	top:20px;
	right:60px;
	margin:0;
	padding:0;
	/*z-index:999999999;*/
	height:32px;
}

#menu-container {display:block;}
.sp {display:none;}
.pc {display:none;}
#sidebox {display:none;}
#content {width:100%; max-width:none; padding:0 10px}
	
	
#access {
	position: absolute;
	top:100px;
	left:2%;
	width:96%;
	height:28px;
}

#access .menu-header{
	display: block;
	width:100%;
}
#access .menu-header li{
	width:20%;
}

#access .menu-header li a{
	display: block;
	width:100%;
	height:26px;
	overflow:hidden;
	text-align:center;
	line-height:26px;
}
/*
#access .menu-header li ul{
	width:90%;
	margin:0 0 0 5%;
}
*/
	#news ul{
		margin: 0 10px;
		padding:0;
		list-style: none;
	}
	

.grid {width:470px;}
}

@media screen and (max-width: 990px) {



#footer .f_box{
	width:100%;
}

#footerinfo {
	width:30%;
	margin-bottom:20px;
}

#footerinfo img#gaikan {
	width:80%;
	max-width:none;
	margin:0 auto 10px;
	float:none;
}

#footerinfo #fi_right{
	width:220px;
	float:none;
	clear:both;
	margin:0 auto;
}


/**/

#content ul.service_harf {
	width:90%;
	margin:0px auto 40px;
	position:relative;
}


#content ul.service_harf li {
	display: block;
	width:100%;
	max-width:none;
	padding-top:40px !important;
	padding-left:290px !important;
	padding-right:10% !important;
	height:auto;
}

#content ul.service_harf li.in_border {
	
	width:280px;
	height:280px;
	border-radius:20px;
	overflow:hidden;
	position:absolute;
	left:-30px;
	top:-20px;
	margin:0 0 0 0px;
	padding:0 !important;

}

#content ul.service_harf li img {
	width:90%;
	margin-top:5%;

	
}

.grid {width:440px;}

}

@media screen and (max-width: 920px) {
.grid {width:420px;}

}

@media screen and (max-width: 900px) {
.grid {width:400px;}

}


	
@media screen and (max-width: 850px) {
	
#maincopy_t{
	line-height:2em;
	font-size:16px;
	padding:5px 5% 0;
}

#mainimage {min-width:100%; margin-top:78px;}
/*
#maincopy_t{display:none;}
#head nav {display:none !important;}
*/

#main,
.home #content,
.one_column #content{
	float: none;
	width: 100%;
}

.bnr_selection{
	width:100%;
	text-align:center;
	font-size:12px;
	line-height:150%;
	padding-bottom:20px;
}


#news .go_news{
	margin-right:15px;
}

#news .title{
	display:inline-block;
	width:100%;
	padding-left:0;
	margin-top:2em;
}


#footerinfo {
	width:100%;
	margin:0 auto 20px;
	padding:0 20px 20px;
	float:none;
	border-bottom:1px solid #e2e2e2;
	clear:both;
}

#footerinfo img#gaikan {
	width:30%;
	max-width:none;
	margin:0 0 0 5%;
	float:left;
}

#footerinfo #fi_right{
	width:55%;
	margin-right:5%;
	float:right;
	clear:none;
}

#footermenu {
	border:none;
	width:90%;
	clear:both;
	margin:0 auto;
	float:none;
}

#footermenu li{
	width:33%;
}

#footermenu li li{
	width:100%;
}

.grid {width:380px;}
}

@media screen and (max-width: 800px) {
.grid {width:360px;}

}


@media screen and (max-width: 760px) {
	.grid {width:340px;}
}

@media screen and (max-width: 720px) {
	.grid {width:310px;}
}



@media screen and (max-width: 670px) {
	.grid {width:600px;}
}

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


#mainimage {min-width:100%;}


#footer .f_box{
	width:100%;
}



#footerinfo img#gaikan {
	width:40%;
	max-width:450px;
	margin:0 auto 15px;
}

#footerinfo #fi_right{
	width:60%;
	margin:0 auto;
}

#footermenu {
	width:90%;
	clear:both;
	margin:0 auto;
}

#footer .f_box ul li{
	width:100%;
	clear:both;
	margin-bottom:25px;
	clear:both;
}

#footer .f_box ul li ul{
	margin:0;
	padding:0;
}
#footer .f_box ul li ul li{
	margin:0;
	box-sizing:border-box;
}

#bannerarea ul li{
	width:86% !important;
	background-color:#e2e2e2;
	
	box-sizing:border-box;
}
#bannerarea ul li img{
	width:auto !important;
	height:auto !important;
}

	#utilitymenu ul{
		width:90%;
		margin:0 auto 10px;
	}
	

/**/

#content ul.service_harf {
	margin:150px auto 40px;
	position:relative;
	left:auto;
}


#content ul.service_harf li {
	display: block;
	width:100%;
	padding-top:200px !important;
	padding-left:5% !important;
	padding-right:5% !important;
	height:auto;
}

#content ul.service_harf li.in_border {
	
	width:280px;
	height:280px;
	border-radius:20px;
	overflow:hidden;
	position:absolute;
	left:50%;
	top:-100px;
	margin:0 0 0 -140px;
	padding:0 !important;

}

#content ul.service_harf li img {
	width:90%;
	margin-top:5%;

	
}


.img-bg_pospic {
	padding-bottom:100px;
}

.grid {width:500px;}

}


@media screen and (max-width: 541px) {
	
#company th, #company td {
	display:block;
	clear:both;
	width:100%;
}

#footermenu > li{
	width:100%;
	margin-bottom:2em;
}
#footermenu .fm li{
	width:100%;
	margin-bottom:0.6em;
	font-size:130%;
}

#maincopy_t{
	line-height:1.5em;
	font-size:12px;
	padding:5px 5% 0;
}

#copyright{
	font-size:11px;
	text-align:center;
	padding:0;
	float:none;
}

.pospic ul.plan li {
	margin-bottom:30px;
}


.grid {width:450px;}

}

@media screen and (max-width: 480px) {
	/*.sp {display:block;}
	.pc {display:none;}
	.sp {display:none;}*/


#sns{
	position:absolute;
	top:auto;
	bottom:-15px;
	right:10px;
	margin:0;
	padding:0;
	/*z-index:999999999;*/
	height:32px;
}


#site-title { width:70%;}

#footerinfo img#gaikan {
	width:80% !important;
	max-width:none;
	margin:0 auto 1em;
	float:none;
}

#footerinfo #fi_right{
	width:100%;
	margin-right:0;
	float:none;
	clear:both;
}


#content ul.service_harf li {
	padding-top:150px !important;
}

#content ul.service_harf li.in_border {
	
	width:200px;
	height:200px;
	border-radius:20px;
	overflow:hidden;
	position:absolute;
	left:50%;
	top:-80px;
	margin:0 0 0 -100px;
	padding:0 !important;

}

.grid {width:400px;}

}


@media screen and (max-width: 400px) {
.grid {width:320px;}
}
@media screen and (max-width: 320px) {
.grid {width:270px;}
}