/* --------------------------------------------------
            For smartphone
-------------------------------------------------- */

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

	.pcOnly{display: none;}
	.spOnly{display: block;}
	
	img{
		width: 100%;
		max-width: 100%;
	}
	

html,body{
	width:100%;
	height:100%;
	font-size: 14px;
	line-height: 1.4;
}
#wrapp{
	width:auto;
	height:100%;
	margin:0 auto;
}
html>body #wrapp{
	height:auto;
	min-height:100%;
}

	#contents{
		max-width: 100%;
	}
	#header h1{
		padding: 18px 0;
		margin: 0 auto;
		border-bottom: 0;
	}
	#header h1 img{
		height: 43px;
		width: auto;
		text-align: center;
		display: block;
		margin: 0 auto;
	}
	
	
	/*Menu*/
	#header{
		border-bottom: none;
		margin-bottom: 40px;
	}
	
	#header #menuarea ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #ccc;
	}
	#header #menuarea ul li{
		width: 50%;
		display: inline-block;
		float: none;
		border-bottom: 1px solid #ccc;
	}
	#header #menuarea ul li img{
		height: 18px;
		width: auto;
		padding: 3% 12%;
	}
	#header #menuarea ul li.li1,
	#header #menuarea ul li.li2,
	#header #menuarea ul li.li3,
	#header #menuarea ul li.li4{
		width: 49%;
		display: inline-block;
		margin: 0;
		padding: 10px 0;
	}
	
	#header #menuarea ul li:nth-child(odd){
		border-right: 1px solid #ccc;
	}

	
	#footer{
		padding: 18px 0;
		font-size: 12px;
	}
	
	.innerWraper{
		padding: 40px 6% 0;
	}
	
	/*----------------------------------------------------------------
	TOP
	----------------------------------------------------------------
	*/
	
	.index--mvWrap{
	background: url("../img/top_mainimg_sp.jpg") no-repeat center center;
	position: relative;
	height: 440px;
	margin-bottom: 0;
}

	
	.mvCopy{
	width: 90%;
	}
	
	
	#top_wrapp{
		width: auto;
	}
	#top_wrapp #leftbox {
    width: auto;
    float: none;
}
	#top_wrapp #leftbox h2{
		padding: 0 6%;
		margin-bottom: 40px;
	}
	#top_wrapp #leftbox h2 img{
		height: 26px;
		width: auto;
	}
	
	#top_wrapp #leftbox #topboxarea .topcell_line{
		width: 100%;
		display: inline-block;
		margin: 0;
	}
	#top_wrapp #leftbox #topboxarea .topcell{
		width: auto;
		float: none;
	}
	
	#top_wrapp #leftbox #topboxarea{
		width: auto;
		margin: 0 3%;
	}
	#top_wrapp #leftbox #topboxarea .cellbg1 li{
		margin: 0 0 3% 0!important;
		font-size: 14px;
		line-height: 1.4;
}
	#top_wrapp #leftbox #topboxarea .topcell .left{
		width: 34%;
	}
	#top_wrapp #leftbox #topboxarea .topcell .right{
		width: 62%;
	}
	#top_wrapp #leftbox #topboxarea .topcell .right .p1{
		margin: 0 0 10px;
	}
	#top_wrapp #leftbox #topboxarea .topcell .right p.p1 img{
		height: 18px;
		width: auto;
	}
	
	
	/*----------------------------------------------------------------
	outline
	----------------------------------------------------------------
	*/
	
	#outlinebox{
		width: 100%;
	}
	#outlinebox h2{
		width: auto;
		padding-bottom: 20px;
	}

	#outlinebox h2 img{
		height: 58px;
		width: auto;
		padding: 0 6%;
}
	
	#outlinebox table{
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		word-break: break-all;
		word-wrap: break-all;
	}
	
#outlinebox table th,td {
		display: block;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}
	
	/*#outlinebox table tr{
		width: 100%;
		display: block;
	}*/
	#outlinebox table th{
		width: 100%;
		padding: 15px 6%;
		background-image: none;
	}
	#outlinebox table td{
		width: 100%;
		padding: 15px 6%;
		margin-bottom: 1rem;
	}
	#outlinebox table td p{
		margin-bottom: 0;
	}
	
	
	#outlinebox table small{
		margin-top: 2rem;
	}
	
p.maplink{
	padding: 3% 6%;
		margin: 2rem auto;
		border: 1px solid #0954AC;
		display: block;
		text-align: center;
		width: 60%;
}
p.maplink a{
		text-decoration: none;
		color: #0954AC!important;
	}
	

	
	
	/*----------------------------------------------------------------
	service
	----------------------------------------------------------------
	*/
	
	#servicebox{
		width: 100%;
	}
		#servicebox h2 img{
		height: 58px;
		width: auto;
		padding: 0 6%;
}

	
	.service_cell{
		width: auto;
	}
	.service_cell .right, .service_cell .left{
		float: none;
		width: auto;
	}
	.service_cell .left img{
		width: 120px;
		display: block;
		margin: 0 auto 30px;
		border-radius: 10px;
	}
	.service_cell .right .p1{
		text-align: center;
		margin-bottom: 2rem;
	}
	
	.service_cell .right p.p1 img{
		width: auto;
		height: 21px;
	}
	
	.service_cell .right .p2 br{
		margin-bottom: 2rem;
	}
	
	.service_cell .right .p2{
	color:#4B76AD;
	line-height:170%;
	margin-bottom: 1rem;
}
	.service_cell .right .p2.listItem{
		padding-left: 6%;
		margin-top: 2rem;
		border-left: 1px solid #4B76AD;
	}
	.service_cell .right .p2.listItem dt,
	.service_cell .right .p2.listItem dd{
		margin-bottom: 1rem;
		line-height: 140%;
	}
		
	
	
	
	#service_w_wrapp{
		width: auto;
		background: none;
		border: 1px solid #ccc;
		border-radius: 15px;
		position: relative;
	}
	#service_w_wrapp #service_w_wrapp_in{
		width: auto;
	}
	#service_w_wrapp #service_w_wrapp_in #service_w{
		width: 82%;
		background:none;
		margin: 0 auto;
		padding: 6% 0;
	}
	#service_w .left, #service_w .right{
		float: none;
		width: 86%;
		margin: 20px auto;
	}
	
	#service_w .left .left_l{
		float: none;
	}
	#service_w .left .left_r{
			float: none;
			width: 100%;
	}
	
	#service_w .left .left_r .p1{
		/*width: 90%;*/
	}
	
/*for Googlemap*/

	.gmapBox{
		/*height: 360px;*/
		padding: 0 6%;
	}
	.gmapBox #gmap{
		height: 160px;
	}
	
	#gmap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率をお好みで*/
	overflow: hidden;
}
#gmap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    @media (max-width: 960px) {
    	#gmap .inner {
    		padding-top: 75%;
    	}
    }
    @media (max-width: 600px) {
    	#gmap .inner {
    		padding-top: 100%;
    	}
    }
	
	
	
	
	/*----------------------------------------------------------------
	contact
	----------------------------------------------------------------
	*/
	
	#contactbox{
		width: 100%;
	}
	#contactbox .caution{
		margin-top: 40px;
		text-align: left;
		padding-left: 6%;
	}
	
	
	#contactbox h2 img{
	height: 58px;
	width: auto;
	padding: 0 6%;
}
	
	#contactbox table{
		width: 88%;
		border: none;
	}
	
	#contactbox table th{
		display: block;
		width: auto;
		border: none;
		padding: 0;
	}
	#contactbox table td{
		width: auto;
		display: block;
		border: none;
		margin-bottom: 1rem;
		padding: 12px 0;
		/*border-bottom: 1px solid #ccc;*/
	}
	
	#contactbox .confirmation{
		padding-top: 20px;
	}
	#contactbox .confirmation p{
		font-size: 14px;
		margin-top: 40px;
	}
	#contactbox .confirmation p span{
		display: block;
		color: #000;
	}
	#contactbox .confirmation  p span.confirmation--footTel::after{
	content: '';
}
	#contactbox .confirmation p span.confirmation--footTel{
		font-size: 21px;
		padding: 10px 0;
	}

	#contactbox .confirmation p span.confirmation--footTel a{
		color: #0954AC;
	}
	
	
	
	#contactbox .confirmation input{
		height: 44px;
		width: auto;
	}
	
	
	input,select{
		padding: 8px;
		width: auto;
		border: 1px solid #ccc;
	}
	textarea{
		width: 100%;
		min-height: 10rem;
		border: 1px solid #ccc;
		box-sizing: border-box;
		padding: 1rem;
		font-size: 14px;
	}
	
}