@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: 60%;
		margin: 5px 0 0 2px;
	}
	header h2, header p{
		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; }

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

	.image_area{
		height: 320px;
		margin: 48px 0 0 0;
	}
	.camera_wrap .camera_pag .camera_pag_ul{
		display: none;
		position: absolute;
		top: 270px;
		left: 65%;
	}
	.camera_wrap .camera_pag .camera_pag_ul li{
		background: #FFF;
	}
	.camera_loader{
		top: 160px;
		left: 45%;
		width: 75px;
		text-align: center;
		background: url(../images/loading.png) no-repeat;
		background-size: 75px auto;
		border: none;
		border-radius: 0;
	}
	.catchcopy_pc{
		display: none;
	}
	.catchcopy_sp{
		position: relative;
		z-index: 10;
		width: 100%;
		margin: -40px 0 0 0;
	}

	article{
		margin: 1em 0 0 0;
	}
	article h2, article p{
		margin: 0;
	}
	.content_gray{
		padding: 0 15px;
		background: url(../images/bg_content_gray.png);
	}

	.purchasebox div{
		margin: 0 0 1em 0;
		padding: 0 0 1em 0;
		border-bottom: #1B4079 dotted 2px;
	}
	.purchasebox div img{
		width: 100%;
	}

	.accidentbox{
		margin: 0;
		padding: 0 0 1em 0;
	}
	.accidentbox .bike_illust{
		width: 40%;
		margin: 0 9% 0 0;
	}
	.accidentbox .bike_illust:first-child{
		margin: 0 0 0 9%;
	}


	.campaignbox{
		margin: 0 0 1em 0;
		padding: 0;
	}
	.campaignbox .img_sp{
		width: 100%;
	}
	.campaignbox .img_pc{
		display: none;
	}


	.price_sample{
		margin: 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 span{
		display: block;
		margin: 0 5% 1em 5%;
		text-align: left;
		font-size: 0.9em;
		color: #666;
	}


	.repair_sample{
		margin: 1em 0 0 0;
		padding: 1em 0;
		text-align: center;
		border-top: #1B4079 dotted 2px;
	}
	.repair_sample h3 img{
		width: 70%;
		margin: 1em 15% 0.5em 15%;
	}
	.repair_sample_img{
		width: 90%;
		margin: 0 0 1em 0;
	}
	.repair_sample span{
		display: block;
		margin: 0 5% 1em 5%;
		text-align: left;
		font-size: 0.9em;
		color: #666;
	}


	.featurebox{
		margin: -35px 0 0 0;
		padding: 1em;
	}
	.featurebox img{
		width: 100%;
	}

	.navibox{
		text-align :center;
	}
	.navibox a{
		display: block;
		margin: 0 1em;
		line-height: 1px;
		border: #9F9F9F solid 1px;
	}
	.navibox img{
		width: 100%;
	}
	.navibox p{
		width: 70%;
		margin: 0.2em 15% 0.5em 15%;
		line-height: 1.4;
	}

	.infobox{
		margin: 1em;
		padding: 1em;
		text-align: center;
		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, header p{
		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; }

	.image_area{
		position: relative;
		top: -30px;
		left: 0;
		width: 100%;
		height: 320px;
		margin: 0 0 -30px 0;
		overflow: hidden;
	}
	.camera_wrap{
		width: 980px;
	}
	.camera_wrap .camera_pag .camera_pag_ul{
		position: absolute;
		top: 275px;
		left: 890px;
	}
	.camera_wrap .camera_pag .camera_pag_ul li{
		background: #FFF;
	}
	.camera_loader{
		top: 130px;
		left: 450px;
		width: 150px;
		text-align: center;
		background: url(../images/loading.png) no-repeat;
		border: none;
		border-radius: 0;
	}
	.catchcopy_pc{
		position: absolute;
		top: 140px;
		left: 570px;
		z-index: 10;
	}
	.catchcopy_sp{
		display: none;
	}

	article{
		margin: 1em 0 0 0;
	}
	article h2, article p{
		margin: 0;
	}
	.content_gray{
		padding: 0 15px;
		background: url(../images/bg_content_gray.png);
		color: #444;
	}

	.purchasebox{
		margin: 20px 0 20px 0;
		padding: 0 0 2em 0;
		border-bottom: #1B4079 dotted 2px;
	}
	.purchasebox div{
		float: right;
		width: 430px;
		border: #7EA4C9 solid 2px;
		border-radius: 10px;
		background: #FBFAF2;
	}
	.purchasebox div:first-child{
		float: left;
	}
	.purchasebox img{
		display: block;
		width: 430px;
		height: 70px;
		margin: -30px 0 0 0;
	}
	.purchasebox div p{
		margin: 0 0 0 5px;
		padding: 0.5em;
	}

	.accidentbox{
		margin: 1em 0 3em 0;
		padding: 0;
	}
	.accidentbox .bike_illust{
		float: right;
		width: 150px;
		height: 90px;
		margin: 0 15px;
	}
	.accidentbox .bike_illust:first-child{
		float: left;
		margin: 0 15px;
	}
	.accidentbox h3{
		float: left;
		width: 540px;
		line-height: 1px;
	}
	.accidentbox h3 img{
		width: 540px;
		height: 90px;
	}


	.campaignbox{
		margin: 0;
		padding: 0 0 2em 0;
		text-align: center;
	}
	.campaignbox .img_sp{
		display: none;
	}
	.campaignbox .img_pc{
		width: 820px;
	}


	.price_sample{

	}
	.price_sample h3{
		width 100%;
		margin: 1em 0 0 0;
		text-align: center;
	}
	.price_sample h3 img{
		width: 240px;
	}
	.price_sample_img{
		width: 257px;
		margin: 1em 20px 0 20px;
	}
	.price_sample span{
		display: block;
		margin: 0 20px 1em 20px;
		font-size: 0.9em;
		color: #666;
	}

	.repair_sample{
		margin: 2em 0 0 0;
		padding: 1em 0;
		border-top: #1B4079 dotted 2px;
	}
	.repair_sample h3{
		width 100%;
		margin: 1em 0 0 0;
		text-align: center;
	}
	.repair_sample h3 img{
		width: 240px;
	}
	.repair_sample_img{
		width: 257px;
		margin: 1em 20px 0 20px;
	}
	.repair_sample span{
		display: block;
		margin: 0 20px 1em 20px;
		font-size: 0.9em;
		color: #666;
	}


	.featurebox{
		padding: 20px 30px 20px 45px;
	}
	.featurebox .graph{
		float: right;
	}
	.featurebox h2, .featurebox p{
		float: left;
		width: 410px;
	}
	.featurebox p{
		margin: 0.5em 0 0 0;
	}

	.navibox{
		float: left;
		width: 32%;
		margin: 0 0 0 2%;
		padding: 0 0 1em 0;
		text-align: center;
		line-height: 1.6;
	}
	.navibox:first-child{
		margin: 0;
	}
	.navibox a{
		display: block;
		border: #9F9F9F solid 1px;
		line-height: 1px;
	}
	.navibox img{
		width: 100%;
	}
	.navibox p{
		width: 80%;
		margin: 0 auto;
	}

	.infobox{
		margin: 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 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;
	}

}