/*----------------------------------------
全体共通CSS
----------------------------------------*/

#io,#io td,#io th,input,select{font-size:15px; color:#333; line-height:30px; font-family:Century Gothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo, Osaka,ＭＳ Ｐゴシック,MS PGothic, sans-serif;}

#io a:link,#io a:visited{color:#444; text-decoration:none;}

a:hover img,a:hover{filter: alpha(opacity=80);	-moz-opacity:0.80;	opacity:0.80; -webkit-transition:0.6s ease-in-out; -moz-transition:0.6s ease-in-out; -o-transition:0.6s ease-in-out; transition:0.6s ease-in-out;}

img{border:0px;
box-sizing: border-box;
    max-width: 100%;
    height: auto;
    display: block;
	margin: auto;
}

p{margin: 0; padding:0;}
ul{list-style-type:none; font-size:0; margin:0; padding:0;}
h1,h2,ul,li,div,p{box-sizing:border-box;}



h1,h2{font-size: 20px; line-height: 140%; margin: 0 auto; padding: 0; text-align:center;}

@media only screen and (min-width: 414px) {
h1,h2{font-size: 28px;}
}

@media only screen and (min-width:768px) {
h1,h2{font-size:45px; line-height: 140%; margin: 0 auto; padding: 0; text-align:center;}
}
@media only screen and (min-width:1000px) {
h1,h2{font-size:46px;}
}



section{width:100%; margin: 0 auto;}
section{margin:15% 0;}
section:first-child{margin:0;}
@media only screen and (min-width:768px) {
section{margin:10% 0;}
}
@media only screen and (min-width:1000px) {
section{margin: 5% 0;}
}



/*----------------------------------------
デバイスごとの表示固定用CSS
----------------------------------------*/

/*スマホのみ表示*/
@media only screen and (min-width: 737px) {
	.sp_only {display: none !important;}
}

/*スマホ・タブレットの両表示*/
@media only screen and (min-width: 1000px) {
	.padsp_only {display: none !important;}
}

/*タブレットのみ表示*/
@media only screen and (max-width: 736px) and (min-width:1000px){
	.pad_only {display: none !important;}
}

/*PC・タブレットの両表示*/
@media only screen and (max-width: 736px) {
	.padpc_only {display: none !important;}
}

/*PCのみ表示*/
@media only screen and (max-width:767px) {
	.pc_only {display: none !important;}
}



/*----------------------------------------
全ブロック共通使用CSS
----------------------------------------*/

.main_h1 span{font-size:25px; color: #f24444;}
@media only screen and (min-width:768px) {
.main_h1 span{font-size:85px;}
}
@media only screen and (min-width:1000px) {
.main_h1 span{font-size:50px; color:}
}



.width_content{width:100%; margin: 0 auto;}
.width_content small{font-size: 12px; margin-top: 20px; display: block;}


@media only screen and (min-width: 1100px) {
.width_content{width:1100px; margin: 0 auto;}
.width_content small{font-size: 30px; margin-top: 25px; display: block;}

}




/*----------------------------------------
ファーストビュー
----------------------------------------*/

.shopname {
    padding: 10px 0;
    text-align: center;
    position: relative;
    height:66px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #fff;
}
.shopname::before {
    content: "";
    width: 100%;
    opacity: 1;
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    background:#ffc900
}


.shopname h1{
    margin: 0;
    padding: 0;
    width: 20%;
    z-index: 9999;
    position: absolute;
    left: 3%;
    text-align: left;
}

.shopname h1 img {
display: -webkit-flex;
    display: flex;
	margin-right: auto;
    max-width: 3000px;
    width: 250px;
}

.shopname p{
position: absolute;
right: 1%;
text-align: right;
width: 54%;
}

.shopname a {
    display:none;
    /*background: #e60000;
    color: #fff !important;
    z-index: 999999;
    border-radius: 5px;
    padding: 3px 2% 3px 2.5%;
    letter-spacing: 0.8px;
    font-size: 14px;
    margin-left: 5px;
    border: 1px solid #fff;
    vertical-align: middle;*/
}

.shopname a::after{
content: "";
box-sizing: border-box;
width: 5px;
height: 5px;
border: 5px solid transparent;
border-left: 7px solid #ffffff;
display: inline-block;
margin-left: 6px;
}

.shopname .mousikomi::after{
content: "";
display:none;
}

.shopname .mousikomi{
display:block;
background: transparent;
color: transparent;
font-size: 0px;
border: none;
margin: 0;
padding-right:0px;
vertical-align: middle;
width: 100%;
}

.shopname .mousikomi img {
    display: -webkit-flex;
    display: flex;
    padding: 0;
max-width: 256px;
    width: 100%;
}




.mainpoint_and_img{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;}

.mangasmt_img{
    max-width: 100%; 
    height:auto;
    display: -wfebkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;}

.mangapc_img{
    max-width: 100%; 
    height:auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;}

#firstview{
	background:url(../images/bg_first.gif);
}


#firstview .width_content{
	padding:5%;
	width:100%;
	text-align:center;
}

@media only screen and (max-width: 414px) {
#firstview .width_content {
    padding: 3%;
}

.shopname {
    height: 50px;
}

}


#firstview .main_h1 {
	position:relative;
	display:inline-block;
	padding:5% 0;
	width:100%;
	color:#555;
	background:#fff;
	text-align:center;
	letter-spacing: -0.4px;
}

#firstview .main_h1 small{
    font-size: 18px;
}

#firstview .main_h1:before {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-15px;
	border:15px solid transparent;
	border-top:15px solid #fff;
}

#firstview .main_img img{
	display:block; width:100%; margin:0 auto;
}


#firstview ul {
	width:100%;
	display:table;
	border-collapse:separate;
	border-spacing:10px;
}

#firstview ul li {
	width:100%;
	display:block;
	font-size:21px;
	vertical-align:top;
	text-align:center;
	background:#ffffff;
	border:7px solid #ffc900;
	border-radius:5px;
	padding:2% 5%;
	margin-bottom: 3%;
}


@media only screen and (max-width: 414px) {
#firstview ul li {
    font-size:18px;
    text-align: center;
}
#firstview ul li b{
    line-height: 100%;
}
}

#firstview ul li img {
    display: inline-block;
    vertical-align: middle;
    width: 30%;
}


#firstview ul li div {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
}

#firstview ul li b{
    line-height: 120%;
}


#firstview ul li p {
	font-weight:bold;
	color:#fff;
	background:#e60000;
	border-radius:20px;
	padding:0;
	width:70%;
	margin:0 auto;
	margin-bottom:2%;	
	font-size: 20px;
}



.car_logo {
	width:95%;
	margin:0 auto;
	text-align:center;
	border:5px solid #32cd32;
	background:#ffffff;
	border-radius:5px;
	padding:5% 2%;
}

.car_logo b{
	font-size:27px;
	color:#32cd32;
	display:block;
	margin-bottom:1%;
}

.car_logo img{
	width:100%; max-width:1000px;
}



/*タブレット用CSS*/

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

#firstview .main_h1 {
    font-size: 35px !important;
}

.main_h1 span {
    font-size: 60px;
}

#firstview .width_content {
    padding: 5% 2%;
    width: 100%;
    text-align: center;
}

.shopname p {
    position: absolute;
    right: 1% !important;
    width: 64% !important;
    text-align: right;
}

.shopname img {
    max-width: 3000px;
    left: 2% !important;
}

.manga_img{
	display:block; 
	width:64%; margin:0 auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}
.mangasmt_img{
	display:block; 
	width:64%; margin:0 auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

#firstview ul {
    width: 42% !important;
}

#firstview ul li {
    width: 100% !important;
padding: 2% 2% !important;
}
#firstview ul li b {
    font-size: 50% !important;
}

}



/*タブレット・PC用CSS*/
@media only screen and (min-width:768px) {
.shopname img {
max-width: 245px;
left: 5%;
}

.shopname p{
position: absolute;
right: 1%;
width: 60%;
text-align: right;
display: table;
border-collapse: separate;
border-spacing: 5px;
}

.shopname a {
    display:table-cell;
background: #e60000;
color: #fff !important;
    z-index: 999999;
    border-radius: 5px;
    padding: 3px 2% 3px 2.5%;
    letter-spacing: 0.8px;
    font-size: 14px;
    margin-left: 5px;
    border: 1px solid #fff;
    vertical-align: middle;
    text-align: center;
width: 152px;
}

.shopname a::after{
content: "";
box-sizing: border-box;
width: 5px;
height: 5px;
border: 5px solid transparent;
border-left: 7px solid #ffffff;
display: inline-block;
margin-left: 6px;
}

.shopname .mousikomi::after{
content: "";
display:none;
}

.shopname .mousikomi{
display: inline-block;
background: transparent;
color: transparent;
font-size: 16px;
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
width: 256px;
margin-right: 5px;
}

.shopname .mousikomi img{
    position: relative;
    padding: 0;
    left: 0;
    width: 256px;
}




.mainpoint_and_img {
	overflow: auto;
	margin-bottom:2%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-direction: row;
	flex-direction: row;
}


.main_titleimg{
width: 68%;
display:block;
vertical-align: bottom;
position: relative;
}

.manga_img{
	display:block; 
	width:64%; margin:0 auto;
}


#firstview .main_h1 {
	/*position: absolute;
	left:35;
	top: 0;*/
	width: 85%;
	font-size: 41px;
}

#firstview .manga_img img{
	display:block; width:68%; margin:0 auto;
}

#firstview ul {
    width: 35%;
    display:block;
    border-collapse: separate;
    border-spacing: 10px;
    vertical-align: bottom;
}

#firstview ul li {
	width:95%;
	display: block;
	font-size:25px;
	margin-bottom:1%;
	font-size: 41px;
}

#firstview ul li img {
	margin-right:1px;
	display: inline-block;
	vertical-align: middle;
	width: 40%;
}


#firstview ul li div{
display: inline-block;
vertical-align: middle;
width: 55%;
}

#firstview ul li p {
display: inline-block;
vertical-align: middle;
padding:2px 0 3px 0;
width: 100%;
margin-bottom: 7%;
}

#firstview ul li b {
display:block;
font-size:60%;
}

.car_logo {
	width:100%;
	padding:2% 1%;
}

}


@media only screen and (max-width:861px){
.shopname a {
    display:none !important;
}

.shopname .mousikomi{
display: inline-block !important;
}
}


/*車種別 PC用CSS*/
@media only screen and (min-width: 1000px) {
#firstview .main_h1 {
		padding: 2% 0;
}
}









/*----------------------------------------
申し込み+車種選択
----------------------------------------*/

#application{}

#application h1{
	text-align:center;
	margin-bottom:3%;
}

/*申し込みの流れ*/
#application .step{
	list-style-type: none;
	display:table;
	width:100%;
	padding:0;
	margin:0;
	overflow:hidden;
	margin-bottom: 1%;
}

#application .step li{
	display:block;
	position:relative;
	background: #808080;
	padding: 1em 0.5em 1em 2em;
	color: #fff;
	font-size: 22px;
	width:100%;
	margin-bottom: 5%;
}

#application .step li:last-child{
	padding-right: 1em;
	background:#ea2e2e;
}

#application .step li:after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	bottom: -15px;
	border-style: solid;
	border-color: #808080 transparent transparent transparent;
	border-width: 26px 40px 0 40px;
	z-index: 1;
	margin: 0 auto;
	right: 0;
	left: 0;
}

#application .step li:last-child:before,
#application .step li:last-child:after{
	display:none;
}



#application .step li p{
	border-bottom: 1px solid #fff;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

/*申し込みの流れ タブレット・PC用CSS*/
@media only screen and (min-width:736px) {

#application .step li{
	display:table-cell;
	margin-bottom:0;
	width:33%;
}

#application .step li:before,
#application .step li:after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin: auto;
}

#application .step li:before{
	top:-10px;
	right:-1em;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	border-width: 70px 0 70px 1em;
	z-index: 10;
}

#application .step li:after{
	top:-10px;
	right:-0.8em;
	border-style: solid;
	border-color: transparent transparent transparent #808080;
	border-width: 70px 0 70px 1em;
	z-index: 10;
	bottom: inherit;
	left: inherit;
}


}


/*申し込みの流れ PC用CSS*/
@media only screen and (min-width: 1000px) {
}





/*車種別 スマホ・タブレット・PC用*/
#application .cartype li {
	width: 98%;
	padding:1%;
	margin:1%;
	display:inline-block;
	font-size:15px;
	vertical-align:top;
	border:1px solid #dcdcdc;
	text-align:center;
}

#application .cartype li h2 {
	display:inline-block;
	font-size:28px;
	letter-spacing:0.5px;
	position:relative;
	margin:3% 0 5% auto;
}

#application .cartype li h2::after {
	content:"";
	position:absolute;
	background:#ffc8c8;
	height:60%;
	width:106%;
	display:block;
	z-index:-10;
	bottom:0px;
	margin:0 auto;
	left:-3%;
	right:0;
}

#application .cartype li img{
	width:90%;
	display:block;
	margin: 0 auto;
	margin-bottom:10px;
}

#application .cartype li p{
	width:100%;
	font-size:0;
}

#application .cartype li .pricetxt{
	display:inline-block;
	vertical-align:middle;
	width:39%;
	font-size:20px;
}

#application .cartype li .pricetxt b{
	display:block;
}

#application .cartype li .pricetxt span{
	display:block;
	font-size:13px;
	line-height:14px;
}

#application .cartype li .price{
	color:#ea2e2e;
	display:inline-block;
	vertical-align:middle;
	width:60%;
	text-align:left;
	font-size:35px;
}

#application .cartype li .price small{
	font-size:15px;
}

#application .cartype li a {
	width:100%;
	display:block;
	background:#ffb400;
	color:#fff;
	border-radius:5px;
	padding:4% 0;
	margin-top:3%;
	font-size:17px;
}

#application .cartype li a:hover {
	background:#ffa359;
}


/*車種別 タブレット用*/

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

#application .cartype li {
	width:48%;
}

} 



/*車種別 タブレット・PC用CSS*/
@media only screen and (min-width:768px) {
#application .cartype{
	width:96%;
	margin:0 auto;
}

#application .cartype li h2 {
	font-size:22px;
}

#application .cartype li {
	width:31.3%;
}

#application .cartype li img{
	width:100%;
}

#application .cartype li .pricetxt{
	font-size:17px;
}

#application .cartype li .pricetxt span{
	font-size:10px;
}

#application .cartype li .price{
	font-size:26px;
}

#application .cartype li .price small{
	font-size:12px;
}

#application .cartype li a {
	font-size:15px;
}

}


/*車種別 PC用CSS*/
@media only screen and (min-width: 1000px) {
#application .cartype{
	width:102.2%;
	margin-left:-1%;
	text-align: center;
}

#application .cartype li {
	width:31%;
}

}











/*----------------------------------------
インフォメーション
----------------------------------------*/

#inforamatin{}


#inforamatin .carmerit_img{
	width:100%;
	max-width:1000px;
	display:block;
	margin:0 auto;
}


/*タブレット・PC用CSS*/
@media only screen and (min-width:768px) {

}

@media only screen and (max-width: 414px) {
#inforamatin .main_h1 span{
	line-height: 100%;
}
#inforamatin .main_h1{
	line-height: 130%;
}

}

@media only screen and (max-width: 320px) {
#inforamatin .main_h1 span{
	font-size: 200%;
}

}

/*PC用CSS*/
@media only screen and (min-width:1000px) {
}

#inforamatin .carmerit_img{
	width:100%;
	max-width:1000px;
	display:block;
	margin:0 auto;
}


.merit .main_h1{
        margin-bottom:3%;
}


.merit{
	border: 1px solid #dcdcdc;
	width: 100%;
	padding:5%;
	background: #ededed;
	text-align: center;
	margin:8% 0 0%;
}

.merit ul{
	text-align:left;
}

.merit ul li{
	width: 48%;
	margin:0 4% 6% 0;
        padding:5% 5% 2%;
	display: inline-block;
	font-size: 18px;
	vertical-align: top;
	background: #fff;
	border: 3px solid #c60a0a;
	text-align: left;
        color:#333;
        line-height:130%;
}

.merit ul li:nth-child(2n){
	margin-right:0 !important;
}
.merit ul li:nth-child(3){
	margin-bottom:0;
}
.merit ul li:nth-child(4){
	margin-bottom:0;
}

.merit ul li img{
	width: 100%;
	border-bottom: 1px dotted #333;
}

.merit ul li p{
	font-size:100%;
        padding:5% 2%;
        font-weight: bold;
}


@media only screen and (max-width: 414px) {
.merit .main_h1{
	font-size:140%;
        margin-bottom:3%;
}

.merit{
	margin:5% 0 0%;
}

.merit ul li{
	width: 100%;
        margin-bottom:3%;
}

.merit ul li:nth-child(3){
	margin-bottom:6%;
}

}


/*----------------------------------------
お客様の声
----------------------------------------*/

#customer_voice{
	background:url(../images/bg_voice.png);
	padding:5% 0;
}

#customer_voice ul{
	margin-top: 2%;
}

#customer_voice ul li {
    width: 90%;
    margin: 5% auto;
    display: block;
    font-size: 25px;
    background: #fff;
    border-radius: 5px;
    padding: 6% 6% 6% 6%;
}

#customer_voice ul li p{
	font-weight:bold;
	display:inline-block;
	vertical-align:middle;
}

#customer_voice ul li p b{
	color:#f24444;
}

#customer_voice ul li span{
	font-size:18px;
	display:block;
	text-align: right;
}

#customer_voice ul li img{
	width:100%;
	max-width:145px;
	display:block;
	margin:0 auto;
	vertical-align:middle;
	margin-bottom:10px;
}



/*タブレット・PC用CSS*/
@media only screen and (min-width:768px) {

#customer_voice{
	padding:3% 0;
}

#customer_voice ul li {
	width: 98%;
	margin:1%;
	padding: 1% 2% 1% 3%;
}

#customer_voice ul li img{
	width:100%;
	max-width:145px;
	display:inline-block;
	margin-bottom:10px;
	margin-right:2%;
	vertical-align:middle;
}

#customer_voice ul li span{
	text-align:left;
}


}

/*PC用CSS*/
@media only screen and (min-width:1000px) {
}









/*----------------------------------------
審査申し込みボタン
----------------------------------------*/
.sinsa_btn{display:block; margin:0 auto; text-align: center;}
.sinsa_btn img{width:100%;}

.sinsa_btn-bottom{display:block; margin: auto; text-align: center;}
.sinsa_btn-bottom img{width:100%; max-width:1100px;}

/*PAD・スマホ用*/
@media only screen and (min-width:768px) {
.sinsa_btn img{width:100%; margin: 0 auto;}

.sinsa_btn {
    text-align: center;
    width:75%;
    margin: 0 auto;
    display: inline-block;

}
}


/*----------------------------------------
フッター
----------------------------------------*/
.footer {
	background:#fff;
	padding: 2% 2% 7px 2%;
	line-height: 15px;
	font-size: 10px;
	box-sizing: border-box;
	margin-bottom:0 !important;
}

.footer div{margin-bottom:0%;}


.footer .tokutei b,.footer .privacy b{
    display: block;
    border-bottom: 1px solid #333;
}

.footer .privacy br{line-height:10px;}


.copyright {
    background: #e60000;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 11px;
}



.pagelink{
    text-align: center;
    border-top: 1px solid #fff;
    margin-top: 1.5%;
    padding-top: 8px;
}

.pagelink a{
	display:inline-block;
	padding:0 1%;
	color: 333333;
}


.otherinfo{
	padding: 3%;
	margin:0;
	line-height: 18px;
	font-size: 10px;
	box-sizing: border-box;
	margin-bottom:0 !important;
}


.otherinfo .tokutei b,.otherinfo .privacy b{
padding-top: 1%;
display: block;
border-bottom: 1px solid #333;
font-size: 17px;
margin-bottom: 5px;
padding-bottom: 6px;
}