@charset "utf-8";

.clearfix:before, .clearfix:after{ content: " "; display: table; }
.clearfix:after{ clear: both; }
.clearfix{ zoom: 1; }

ul, ol{ list-style: none; }
img{ vertical-lign: middle; }
h3, h4, h5, h6{ margin: 0; }
body{
	width: 100%;
	background: #FFF;
	color: #444;
	line-height: 1.8;
	font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a:link, a:active, a:visited{
	color: #FE890C; font-weight: bold; text-decoration: none;
}
a:hover{
	color: #F9C50F;
}

.check_mediaqueries{ display: none; }

/*-- breakpoint 0 / 450  --*/



/*---------- SmartPhone -------------------------------*/
@media screen and (max-width:450px){

	header h1{
		position: absolute;
		top: 48px;
		left: 0;
		z-index: 10;
		width: 100%;
		margin: 0;
		background: url(../images/bg_header_sp.png) top repeat-x;
		background-size: auto 32px;
	}
	header h1 img{
		width: 45%;
		margin: 5px 0 0 2px;
	}
	header h2{
		position: absolute;
		top: -48px;
		left: 0;
		z-index: 10;
		height: 48px;
		margin: 0;
		overflow: hidden;
	}

	.menu_btn{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 40;
		width: 100%;
		height: 48px;
		text-align: center;
		line-height: 48px;
		background: #FFF;
		border-bottom: #BBB solid 2px;
	}
	.menu_btn img{
		width: 75px;
	}
	nav ul{
		position: absolute;
		top: -240px;
		z-index: 30;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		background: #FFF;
		border-bottom: #BBB solid 2px;
	}
	nav ul li{
		height: 47px;
		border-bottom: #EEE solid 1px;
	}
	nav ul li a{
		display: block;
		width: 100%;
		height: 0px;
		padding: 47px 0 0 0;
		line-height: 47px;
		overflow: hidden;
		background: url(../images/menu_sp.png) top no-repeat;
		background-size: 320px auto;
	}
	.btn_home{ background-position: 0 0; }
	.btn_about{ background-position: 0 -48px; }
	.btn_price{ background-position: 0 -96px; }
	.btn_contact{ background-position: 0 -144px; }
	.btn_company{ background-position: 0 -192px; }
	.btn_tel{ background-position: 0 -480px; }

	.btn_home_active{ background-position: 0 -240px; }
	.btn_about_active{ background-position: 0 -288px; }
	.btn_price_active{ background-position: 0 -336px; }
	.btn_contact_active{ background-position: 0 -384px; }
	.btn_company_active{ background-position: 0 -432px; }

	.menu_backscreen{
		position: absolute;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: -10;
	}

	.page_image_about{ background: url(../images/image_about_sp.jpg) no-repeat; }
	.page_image_price{ background: url(../images/image_price_sp.jpg) no-repeat; }
	.page_image_contact{ background: url(../images/image_contact_sp.jpg) no-repeat; }
	.page_image_company{ background: url(../images/image_company_sp.jpg) no-repeat; }

	.page_image{
		height: 180px;
		overflow: hidden;
		background-size: auto 100%;
		background-position: center;
	}

	.content_gray{
		margin: 1em 0 0 0;
		padding: 0 15px 1em 15px;
		background: url(../images/bg_content_gray.png);
	}
	.content_white{
		padding: 0 15px;
		background: url(../images/bg_content_white.png);
		color: #444;
	}
	article h2{
		margin: 0.5em 0;
		padding: 0 0 0.2em 0;
		line-height: 1px;
		border-bottom: #1B4079 solid 2px;
	}
	.heading_img{
		width: 80%;
	}
	.note{
		display: block;
		margin: 0.5em 0 0 0;
		font-size: 0.8em;
		color: #666;
	}

	.stepbox{
		margin: 0 0 0.5em 0;
		padding: 0.5em;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.stepbox h3{
		padding: 0 0 0.2em 0;
		border-bottom: #1B4079 dotted 2px;
	}
	.stepbox h3 strong{
		display: inline-block;
		width: 1.6em;
		height: 1.6em;
		margin: -0.2em 0.5em 0 0;
		text-align: center;
		line-height: 1.6;
		border-radius: 50% 50%;
		background: #AAB9B5;
		text-shadow: none;
		color: #FFF;
		font-size: 0.9em;
	}
	.step_image{
		width: 60%;
		margin: 0 20%;
	}
	.stepbox p{
		margin: 0;
	}
	.step_arrow{
		width: 10%;
		margin: 0 0 0 45%;
	}

	.area_image{
		width: 90%;
		margin: 1em 5% 0 5%;
	}

	.purchasebox{
		margin: 0 0 1em 0;
		padding: 0 0 1em 0;
		border-bottom: #1B4079 dotted 2px;
	}
	.purchasebox p{
		margin: 0;
	}
	.purchasebox img{
		width: 100%;
	}
	.purchase_comment h3{
		margin: 1em 0 0 0;
	}
	.purchase_comment h3:first-child{
		margin: 0;
	}
	.purchase_comment h3 img{
		width: 70%;
		margin: 0 15%;
	}
	.purchase_comment img{
		width: 60%;
		margin: 0 20%;
	}
	.purchase_comment p{
		margin: 0;
	}
	.price_sample{
		padding: 1em 0 0 0;
		text-align: center;
	}
	.price_sample h3 img{
		width: 70%;
		margin: 1em 15% 0.5em 15%;
	}
	.price_sample_img{
		width: 90%;
		margin: 0 0 1em 0;
	}
	.price_sample p{
		width: 90%;
		margin: 0 5%;
		text-align: left;
	}

	.qanda dt{
		position: relative;
		padding: 0.3em 0.5em 0.3em 2.5em;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
		font-weight: bold;
	}
	.qanda .question{
		position: absolute;
		top: 0.3em;
		left: 0.5em;
		width: 1.5em;
		height: 1.5em;
	}
	.qanda dd{
		margin: 0.5em 0 2em 1.5em;
	}

	.googlemap{
		width: 100%;
		height: 260px;
		border-style: none;
	}
	.access_info dt, .company_info dt{
		padding: 0.5em 0 0 1em;
		border-top: #999 dotted 2px;
		font-weight: bold;
	}
	.access_info dt:first-child, .company_info dt:first-child{
		border-style: none;
	}

	.formlist{
		margin: 0;
	}
	.bike_info, .user_info{
		margin: 2em 0 0 0;
	}
	.bike_info h3 img, .user_info h3 img, .user_info_wide h3 img{
		width: 60%;
		margin: 0 20%;
	}
	.formlist dt{
		padding: 0.5em 0 0 0;
		border-top: #999 dotted 2px;
		font-weight: bold;
	}
	.formlist dt:first-child{
		border-style: none;
	}
	.formlist dd{
		padding: 0 0 1em 0;
	}
	.formlist input, .formlist textarea{
		width: 90%;
	}
	.smalltext{
		padding: 0 0 0 0.5em;
		color: #999;
		font-size: 0.8em;
	}
	.formbtn_box{
		margin: 2em 0 1em 0;
		text-align: center;
	}
	.submit_btn, .reset_btn{
		margin: 0 0 0 5%;
		padding: 0.5em 1em;
		border: #F9C50F solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.submit_btn:hover, .reset_btn:hover{
		border: #F9C50F solid 2px;
		border-radius: 10px;
		background: #F9C50F;
		color: #FFF;
	}
	.submit_btn{
		margin: 0;
	}

	.infobox{
		margin: 1em;
		padding: 1em 1em 0 1em;
		text-align: center;
		line-height: 1.7;
		border: #AAB9B5 solid 2px;
		border-radius: 10px;
		background: url(../images/bg_infobox.png);
	}
	.infobox_p{
		margin: 0 0 0.5em 0;
		color: #FE890C;
		font-size: 1.2em;
		font-weight: bold;
		letter-spacing: 0.2em;
	}
	.infobox_p a{
		color: #FE890C;
	}
	.infobox_p a:hover{
		color: #F9C50F;
	}
	.infobox_p span{
		display: block;
		width: 70%;
		margin: 0 auto;
		background: #F9C50F;
		color: #FFF;
		font-size: 0.7em;
		font-weight: bold;
	}
	.infobox_form{
		margin: 0 0 0.5em 0;
		padding: 0 0 0.5em 0;
		border-bottom: #AAB9B5 solid 2px;
	}
	.infobox_form span{
		display: block;
	}
	.infobox_date span{
		display: block;
	}

	.infobox-note {
		display: block;
		margin: 0.5em 0;
		font-size: 0.9em;
	}

	footer{
		margin: 20px 0 0 0;
		padding: 40px 15px 1em 15px;
		text-align: center;
		background: url(../images/bg_footer.png) top repeat-x;
	}
	.footer-left {
		margin: 0 0 1em 0;
	}
	.footer-right {
		margin: 1em 0 0 0;
	}
	.footer-info, .footer-copyright {
		font-size: 0.8em;
	}

}





/*---------- PC ----------------------------------------*/
@media screen and (min-width:451px){

	body{
		min-width: 980px;
		margin: 0 auto;
		padding: 0;
	}

	header, .contents{
		width: 980px;
		margin: 0 auto;
		text-align: left;
	}

	header{
		height: 140px;
		padding: 0;
		border-top: #1B4079 solid 10px;
		background: url(../images/bg_header_pc.png) top repeat-x;
	}
	header h1{
		position: absolute;
		z-index: 10;
		margin: 0 0 0 5px;
	}
	header h2{
		float: right;
		margin: 0;
		padding: 10px 5px 0 0;
		text-align: right;
		font-size: 0.8em;
		font-weight: normal;
	}
	nav{
		float: right;
		width: 700px;
		margin: 30px 0 0 0;
		padding: 0;
	}
	nav .menu_btn, .spTelBtn, nav .menu_backscreen{
		display: none;
	}
	nav ul{
		margin: 0;
		padding: 0;
	}
	nav ul li{
		display: block;
		float: left;
		margin: 0 0 0 20px;
	}
	nav ul li:first-child{
		margin: 0;
	}
	nav ul li a{
		display: block;
		height: 0;
		padding: 30px 0 0 0;
		line-height: 30px;
		overflow: hidden;
		background: url(../images/menu_pc.png) top left no-repeat;
	}
	.btn_home{ width: 80px; background-position: 0 0; }
	.btn_about{ width: 164px; background-position: -100px 0; }
	.btn_price{ width: 162px; background-position: -284px 0; }
	.btn_contact{ width: 119px; background-position: -466px 0; }
	.btn_company{ width: 95px; background-position: -605px 0; }

	.btn_home:hover{ width: 80px; background-position: 0 -30px; }
	.btn_about:hover{ width: 164px; background-position: -100px -30px; }
	.btn_price:hover{ width: 162px; background-position: -284px -30px; }
	.btn_contact:hover{ width: 119px; background-position: -466px -30px; }
	.btn_company:hover{ width: 95px; background-position: -605px -30px; }

	.btn_home_active{ width: 80px; background-position: 0 -60px; }
	.btn_about_active{ width: 164px; background-position: -100px -60px; }
	.btn_price_active{ width: 162px; background-position: -284px -60px; }
	.btn_contact_active{ width: 119px; background-position: -466px -60px; }
	.btn_company_active{ width: 95px; background-position: -605px -60px; }

	.page_image_about{ background: url(../images/image_about_pc.jpg) no-repeat; }
	.page_image_price{ background: url(../images/image_price_pc.jpg) no-repeat; }
	.page_image_contact{ background: url(../images/image_contact_pc.jpg) no-repeat; }
	.page_image_company{ background: url(../images/image_company_pc.jpg) no-repeat; }

	.page_image{
		position: relative;
		top: -20px;
		left: 0;
		height: 150px;
		margin: 0 0 -20px 0;
		overflow: hidden;
	}

	article{
		margin: 1em 0 0 0;
		padding: 20px;
	}
	.content_gray{
		background: url(../images/bg_content_gray.png);
	}
	article h2{
		height: 35px;
		margin: 0 0 1em 0;
		padding: 0;
		line-height: 1px;
		border-bottom: #1B4079 solid 2px;
	}
	.heading_img{
		margin: 0 0 0.5em 0;
	}
	article p{
		width: 800px;
		margin: 0 0 1em 70px;
	}
	.note{
		display: block;
		width: 800px;
		margin: 0.5em 0 0 70px;
		font-size: 0.8em;
		color: #666;
	}

	.stepbox{
		width: 770px;
		margin: 0 0 20px 70px;
		padding: 5px 15px;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.stepbox h3{
		border-bottom: #DDD dotted 2px;
		letter-spacing: 0.5em;
	}
	.stepbox h3 strong{
		display: inline-block;
		width: 1.6em;
		height: 1.6em;
		margin: 0 0.5em 0 0;
		text-align: center;
		line-height: 1.5;
		border-radius: 50% 50%;
		background: #AAB9B5;
		text-shadow: none;
		letter-spacing: 0;
		color: #FFF;
		font-size: 0.9em;
	}
	.stepbox p{
		float: right;
		width: 540px;
		margin: 0.5em 0 0 0;
	}
	.step_image{
		float: left;
		width: 180px;
		height: 120px;
		margin: 0 0 0 2em;
	}
	.step_arrow{
		display: none;
		width: 30px;
		margin: 10px 0 0 450px;
	}
	.stepbox .note{
		width: 540px;
		margin: 0.5em 0 0 0;
	}

	.area_image{
		float: left;
		width: 300px;
		margin: 0 0 0 70px;
	}
	.area_text{
		float: right;
		width: 480px;
		margin: 0 60px 0 0;
	}
	.area_text p{
		width: 480px;
		margin: 1em 0 0 0;
	}
	.area_text p:first-child{
		margin: 0;
	}

	.purchasebox{
		width: 800px;
		margin: 50px 0 20px 70px;
		padding: 0;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.purchasebox img{
		display: block;
		width: 380px;
		margin: -30px auto 0 auto;
	}
	.purchasebox p{
		width: 750px;
		margin: 0;
		padding: 10px 2em;
	}
	.purchase_comment{
		margin: 0 0 0 70px;
	}
	.purchase_comment h3{
		clear: both;
		margin: 0;
	}
	.purchase_comment h3 img{
		width: 240px;
	}
	.purchase_comment .bike_illust{
		float: left;
		width: 200px;
		height: 120px;
		margin: 0 0 20px 20px;
	}
	.purchase_comment p{
		float: right;
		width: 560px;
		margin: 0 70px 0 0;
	}
	.price_sample{
		margin: 0 0 0 70px;
	}
	.price_sample h3 img{
		width: 240px;
	}
	.price_sample_img{
		width: 360px;
		margin: 1em 20px 0 20px;
	}
	.price_sample p{
		margin: 0.5em 0 0 20px;
	}

	.qanda{
		width: 800px;
		margin: 0 0 0 70px;
	}
	.qanda dt{
		position: relative;
		padding: 5px 20px 5px 45px;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
		font-weight: bold;
	}
	.qanda .question{
		position: absolute;
		top: 3px;
		left: 10px;
		width: 30px;
		height: 30px;
	}
	.qanda dd{
		margin: 10px 0 40px 45px;
	}

	.googlemap{
		width: 800px;
		height: 480px;
		margin: 0 0 0 70px;
		border-style: none;
	}

	.access_info, .company_info{
		width: 800px;
		margin: 0 0 0 70px;
	}
	.access_info dt, .company_info dt{
		float: left;
		width: 200px;
		padding: 10px 0;
		border-bottom: #999 dotted 2px;
		font-weight: bold;
	}
	.access_info dd, .company_info dd{
		float: right;
		width: 599px;
		margin: 0;
		padding: 10px 0;
		border-bottom: #999 dotted 2px;
	}
	.access_info .no_border, .company_info .no_border{
		border-style: none;
	}

	form{
		width: 800px;
		margin: 0 0 0 70px;
	}
	.bike_info{
		float: left;
		width: 360px;
		margin: 20px 0 0 0;
	}
	.user_info{
		float: right;
		width: 360px;
		margin: 20px 0 0 0;
	}
	.user_info_wide {
		width: 60%;
		padding: 0 20%;
	}
	.user_info_wide h3 {
		text-align: center;
	}
	.bike_info h3 img, .user_info h3 img, .user_info_wide h3 img{
		width: 240px;
	}
	.formlist{
		margin: 0;
		padding: 0;
	}
	.formlist dt{
		padding: 0.5em 0 0 0;
		border-top: #999 dotted 2px;
		font-weight: bold;
	}
	.formlist dt:first-child{
		border-style: none;
	}
	.formlist dd{
		padding: 0 0 1em 0;
	}
	.formlist input, .formlist textarea{
		width: 100%;
	}
	.smalltext{
		padding: 0 0 0 0.5em;
		color: #999;
		font-size: 0.8em;
	}
	.formbtn_box{
		clear: both;
		padding: 2em 0 1em 0;
		text-align: center;
	}
	.submit_btn, .reset_btn{
		margin: 0 0 0 5%;
		padding: 0.5em 1em;
		border: #F9C50F solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.submit_btn:hover, .reset_btn:hover{
		border: #F9C50F solid 2px;
		border-radius: 10px;
		background: #F9C50F;
		color: #FFF;
	}
	.submit_btn{
		margin: 0;
	}

	.infobox{
		margin: 1em 15px 0 15px;
		padding: 0.5em;
		text-align: center;
		border: #AAB9B5 solid 2px;
		border-radius: 10px;
		background: url(../images/bg_infobox.png);
	}
	.infobox_p{
		float: right;
		width: 35%;
		margin: 0 15% 0.5em 0;
		color: #FE890C;
		font-size: 1.4em;
		font-weight: bold;
		letter-spacing: 0.2em;
	}
	.infobox_p:first-child{
		float: left;
		margin: 0 0 0.5em 15%;
	}
	.infobox_p a{
		color: #FE890C;
	}
	.infobox_p a:hover{
		color: #F9C50F;
	}
	.infobox_p span{
		display: block;
		width: 70%;
		margin: 0.5em auto;
		background: #F9C50F;
		color: #FFF;
		font-size: 0.6em;
		font-weight: bold;
	}
	.infobox_form{
		clear: both;
		width: 90%;
		margin: 0 auto 0.5em auto;
		padding: 0 0 0.5em 0;
		border-bottom: #AAB9B5 solid 2px;
	}
	.infobox_date{
		width: 100%;
		margin: 0;
	}
	.infobox_date span{
		display: inline-block;
		margin: 0 0 0 1em;
	}

	.infobox-note {
		display: block;
		margin: 0.5em 0;
		font-size: 0.9em;
	}

	footer{
		width: 950px;
		margin: 20px auto 0 auto;
		padding: 40px 15px 1em 15px;
		background: url(../images/bg_footer.png) top repeat-x;
	}
	.footer-left {
		float: left;
	}
	.footer-right {
		float: right;
	}
	.footer-info, .footer-copyright {
		font-size: 0.8em;
	}
	.footer-copyright {
		clear: both;
		padding: 1em 0 0 0;
		text-align: center;
	}

}