/* ===================================================================
CSS
 file name  :  style.css
=================================================================== */
/* =====================================
各ページタイトル画像
======================================== */
.fs_main{
	background-image:url(../images/for-sale/title.jpg);
}
.idle_main{
	background-image:url(../images/idle/title.jpg);
}
.used_main{
	background-image:url(../images/used/title.jpg);
}
.company_main{
	background-image:url(../images/common/title.jpg);
}

@media screen and (min-width: 641px) {
/* PC用のスタイル記述 */
/* =====================================
TOP
======================================== */
	#top_main{
		width:100%;
		height:450px;
		margin:0;
		position:relative;
		background-image:url(../images/top/main.png);
		background-position: center;
		background-size: cover;
		text-align:center;
		padding-top:30px;
		box-sizing:border-box;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#top_main{
			background-image:url(../images/top/main@2x.png);
		}
	}
	.top_container{
		width:1080px;
		margin:50px auto auto;
		padding:0 40px;
		box-sizing: border-box;
	}
	#seravice_list ul{
		display: flex;
		justify-content: space-between;
	}
	#seravice_list li{
		width: 306px;
		background: #E8F2EF;
	}
	#seravice_list li .img{
		width: 306px;
		height: 230px;
		overflow: hidden;
		position: relative;
	}
	#seravice_list li .img img{
		display: block;
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}
	#seravice_list li .img:hover img{
		transform: scale(1.1);	/*画像の拡大率*/
		transition-duration: 0.3s;	/*変化に掛かる時間*/
	}
	#seravice_list li h2{
		background: rgba(0,0,0,0.50);
		padding: 12px 20px 0 20px;
		color: #FFFFFF;
		width: 100%;
		height: 80px;
		position: absolute;
		left:0;
		bottom: 0;
		box-sizing: border-box;
		font-weight: bold;
	}
	#seravice_list li h2 span{
		font-weight: normal;
		display: block;
	}
	#seravice_list li .img:hover h2{
		background: rgba(0,0,0,0.70);
	}
	#seravice_list li p{
		padding: 25px;
		font-size: 14px;
		height:230px;
		box-sizing: border-box;
	}
	#seravice_list li .button{
		margin: 15px 25px 25px 25px;
		font-size: 16px;
	}
/* =====================================
FOR-SALE
======================================== */
	#fs_point li{
		background: #F0F0F0;
		box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
		padding: 30px 40px;
		display: flex;
		margin-top: 30px
	}
	#fs_point li div{
		margin-right: 40px;
	}
	#fs_point li div h4{
		color: #268300;
		font-size: 20px;
	}
	#fs_example {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#fs_example li{
		width: 300px;
		margin-top: 30px;
	}
	#fs_example li p{
		margin-top: 0;
	}
/* =====================================
IDLE
======================================== */
	#reason_img{
		margin-top: 30px;
		text-align: center;
	}
	.sub_lead{
		font-size: 20px;
		font-weight: bold;
	}
/* =====================================
USED
======================================== */
	#ud_merit li{
		margin-top: 30px;
	}
	#ud_merit li h4{
		color: #268300;
		font-size: 24px;
	}
	#ud_merit li h4:before{
		content: "\f14a";
		font-family: "Font Awesome 5 Free";
		font-weight : 400;
		padding-right:20px;
	}
	#ud_merit li p{
		margin-top: 10px;
	}
	#renovation li{
		margin-top: 20px;
		border: 1px solid #CCC;
		padding: 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
/* =====================================
COMPANY
======================================== */
	.sign {
		text-align: right;
	}
	.sign p{
		display: inline-block;
		text-align: left;
	}
	.company_table{
		border-left:1px solid #BBBBBB;
		border-top:1px solid #BBBBBB;
		margin-top: 30px;
	}
	.company_table th{
		width:25%;
		text-align:left;
		padding:15px;
		border-bottom:1px solid #BBBBBB;
		border-right:1px solid #BBBBBB;
		background:#F6F6F8;
	}
	.company_table td{
		padding:15px;
		border-bottom:1px solid #BBBBBB;
		border-right:1px solid #BBBBBB;
		background:#FFF;
	}
	.google_map{
		margin-top: 40px;
	}
/* =====================================
SELLFORM
======================================== */
	#form_img{
		margin-top: 30px;
		text-align: center;
	}
	.form_table input[type="radio"]{
		width:20px;
	}
	.form_table input[type="checkbox"]{
		width:20px;
	}
	.form_table textarea{
		width:100%;
		box-sizing:border-box;
		padding: 5px;
		border: 1px solid #CCC;
	}
	.form_table{
		margin-top: 10px;
		border-left:1px solid #BBBBBB;
		border-top:1px solid #BBBBBB;
	}
	.form_table th{
		padding:15px 20px;
		border-bottom:1px solid #BBBBBB;
		border-right:1px solid #BBBBBB;
		box-sizing: border-box;
		width:30%;
		text-align:left;
		background:#F6F6F8;
	}
	.form_table td{
		padding:15px 20px;
		border-bottom:1px solid #BBB;
		border-right:1px solid #BBB;
		box-sizing: border-box;
	}
	.form_table .icon_required{
		color:#D90000;
		margin-left: 10px;
	}
	.form_table p{
		margin-top: 5px;
	}
	.form_table textarea{
		width:100%;
		box-sizing:border-box;
	}
	.form_table .form_list li{
		margin-bottom: 5px;
	}
	.form_table .name_width{
		width:200px;
	}
	.form_table .zip1_width{
		width:60px;
	}
	.form_table .zip2_width{
		width:80px;
	}
	.form_table .num_width{
		width:100px;
	}
	.form_table .input_width{
		width:50%;
	}
	.btn_confirm{
		width:400px;
		margin:30px auto auto;
	}
	.btn_area{
		margin:30px auto 0 auto;
		display: flex;
		width: 600px;
	}
	.btn_back{
		display: block;
		box-sizing:border-box;
		padding: 10px 0;
		background: #CCC;
		border: none;
		color:#666;
		cursor: pointer;
		outline: none;
		width: 200px;
		margin-right: 20px;
		margin-bottom: 0;
	}
	.btn_send{
		display: block;
		width:100%;
		box-sizing:border-box;
		padding: 10px 0;
		background: #268300;
		border: none;
		color:#FFFFFF;
		cursor: pointer;
		outline: none;
	}
	.btn_send:hover {
		filter: alpha(opacity=80);
		-ms-filter: "alpha( opacity=80 )";
		-moz-opacity:0.8;
		opacity: 0.8;
	}
	#thanks{
		border:1px solid #268300;
		margin-top: 30px;
		padding:50px 30px;
		text-align:center;
	}
/* =====================================
SITEMAP
======================================== */
	.sitemap{
		background: #FFF;
		border: 1px solid #268300;
		padding: 70px;
		box-sizing: border-box;
		margin-top: 30px;
	}
	.sitemap li a{
		display: block;
		padding: 10px 20px;
		text-decoration: none;
		border-bottom: 1px dotted #CCC;
		text-align: center;
	}
	.sitemap li a span{
		color: #80907A;
		margin-left: 10px;
	}
	.sitemap li:first-child{
		border-top: 1px dotted #CCC;
	}
	.sitemap li a:hover{
		background: #E8F2EF;
	}
/* =====================================
PRIVACY
======================================== */
	.privacy dt{
		margin-top: 30px;
		font-weight: bold;
		color: #268300;
	}
}
@media screen and (max-width: 640px) {
/* スマートフォン用のスタイル記述 */
/* =====================================
TOP
======================================== */
	#top_main{
		width:100%;
		height:200px;
		margin:0;
		background-image:url(../images/top/main_sp.png);
		background-position: center bottom;
		background-size: cover;
		padding:20px 10px;
		box-sizing:border-box;
		text-align: center;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#top_main{
			background-image:url(../images/top/main_sp@2x.png);
		}
	}
	.top_container{
		width: 100%;
		padding:20px;
		box-sizing: border-box;
	}
	#seravice_list li{
		background: #E8F2EF;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	#seravice_list li .img{
		width: 100%;
		height: 180px;
		position: relative;
		overflow: hidden;
	}
	#seravice_list li .img img {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		height: auto;
	}
	#seravice_list li h2{
		background: rgba(0,0,0,0.50);
		padding: 10px 20px 0 20px;
		color: #FFFFFF;
		width: 100%;
		height: 70px;
		position: absolute;
		left: 0;
		bottom:0;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 120%;
	}
	#seravice_list li h2 span{
		font-weight: normal;
		display: block;
	}
	#seravice_list li p{
		padding: 20px;
		box-sizing: border-box;
	}
	#seravice_list li .button{
		margin: auto 20px;
		font-size: 120%;
	}
/* =====================================
FOR-SALE
======================================== */
	#fs_point li{
		background: #F0F0F0;
		box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
		padding: 20px;
		margin-top: 10px
	}
	#fs_point li div{
		margin-bottom: 10px;
	}
	#fs_point li div h4{
		color: #268300;
		font-size: 120%;
	}
	#fs_example li{
		margin-top: 20px;
	}
	#fs_example li img{
		width: 100%;
		height: auto;
	}
	#fs_example li p{
		margin-top: 0;
	}
/* =====================================
IDLE
======================================== */
	#reason_img{
		margin-top: 10px;
		text-align: center;
	}
	.sub_lead{
		font-weight: bold;
	}
/* =====================================
USED
======================================== */
	#ud_merit li{
		margin-top: 15px;
	}
	#ud_merit li h4{
		color: #268300;
		font-weight: bold;
	}
	#ud_merit li h4:before{
		content: "\f14a";
		font-family: "Font Awesome 5 Free";
		font-weight : 400;
		padding-right:7px;
	}
	#ud_merit li p{
		margin-top: 10px;
	}
	#renovation li{
		margin-top: 20px;
		border: 1px solid #CCC;
		padding: 20px;
		text-align: center;
	}
	#renovation li picture{
		display: block;
		margin: 3px 0;
	}
/* =====================================
COMPANY
======================================== */
	.sign {
		text-align: right;
	}
	.sign p{
		display: inline-block;
		text-align: left;
	}
	.company_table{
		border-top:1px solid #BBBBBB;
		border-left:1px solid #BBBBBB;
		border-right:1px solid #BBBBBB;
		margin-top: 20px;
	}
	.company_table th{
		display:block;
		text-align:left;
		padding:10px 20px;
		border-bottom:1px solid #BBBBBB;
		background:#F6F6F8;
	}
	.company_table td{
		display:block;
		padding:10px 20px;
		border-bottom:1px solid #BBBBBB;
		background:#FFF;
	}
	.google_map{
		margin-top: 10px;
		position:relative;
		width:100%;
		height:0;
		padding-top:75%;
	}
	.google_map iframe{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
/* =====================================
SELLFORM
======================================== */
	#form_img{
		margin-top: 10px;
		text-align: center;
	}
	#form_img p{
		text-align: left;
	}
	.form_table input,textarea{
		width:100%;
		font-size:120%;
		box-sizing:border-box;
	}
	.form_table input[type="radio"]{
		width:20px;
	}
	.form_table input[type="checkbox"]{
		width:20px;
	}
	.form_table select{
		height: 33px;
	}
	.form_table{
		border-top:1px solid #BBB;
		border-left:1px solid #BBB;
		margin-top: 5px;
	}
	.form_table th{
		display:block;
		text-align:left;
		padding:10px 15px;
		border-bottom:1px solid #BBB;
		border-right:1px solid #BBB;
		background:#F6F6F8;
		vertical-align:top;
		box-sizing: border-box;
	}
	.form_table td{
		display:block;
		padding:10px 15px;
		border-bottom:1px solid #BBB;
		border-right:1px solid #BBB;
		box-sizing: border-box;
	}
	.form_table .icon_required{
		color:#D90000;
		margin-left: 10px;
	}
	.form_table .form_list li{
		margin-bottom: 5px;
	}
	.form_table .name_width{
		width:70%;
	}
	.form_table .zip1_width{
		width:60px;
	}
	.form_table .zip2_width{
		width:80px;
	}
	.form_table .num_width{
		width:50%;
	}
	.btn_confirm,
	.btn_area{
		margin-top: 10px;
	}
	.btn_back{
		display: block;
		width:100%;
		box-sizing:border-box;
		padding: 10px 0;
		background: #CCC;
		border: none;
		color:#666;
		font-size: 120%;
		cursor: pointer;
		outline: none;
		border-radius: 0;
		margin-bottom: 10px;
	}
	.btn_send{
		display: block;
		width:100%;
		box-sizing:border-box;
		padding: 10px 0;
		background: #268300;
		font-size: 120%;
		border: none;
		color:#FFFFFF;
		outline: none;
		border-radius: 0;
	}
/* =====================================
SITEMAP
======================================== */
	.sitemap{
		background: #FFF;
		border: 1px solid #268300;
		padding: 20px;
		box-sizing: border-box;
		margin-top: 20px;
	}
	.sitemap li a{
		display: block;
		padding: 10px 20px;
		text-decoration: none;
		border-bottom: 1px dotted #CCC;
		text-align: center;
	}
	.sitemap li a span{
		color: #80907A;
		margin-left: 10px;
	}
	.sitemap li:first-child{
		border-top: 1px dotted #CCC;
	}
	.sitemap li a:hover{
		background: #E8F2EF;
	}
/* =====================================
PRIVACY
======================================== */
	.privacy dt{
		margin-top: 20px;
		font-weight: bold;
		color: #268300;
	}
}