/* CSS Document */

.list.blue li:before { background-color: #0086E0; }
.content .img img { width: auto; max-width: 100%;}
.content .text { font-size: 1.6rem;}
.heading01.red { color: #fff;}

/*------------------------------------------------------

	row

------------------------------------------------------*/
.colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; }

.col2-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }
.col3-1 { width: 33.3%; width: -webkit-calc(99.9% / 3 - 10px); width: calc(99.9% / 3 - 10px); }
.col3-2 { width: -webkit-calc( (99.9% / 3) * 2 - 10px ); width: calc( (99.9% / 3) * 2 - 10px ); }
.col4-1 { width: 25%; width: -webkit-calc(25% - 10px); width: calc(25% - 10px); }

.flex-right { justify-content: flex-end; -webkit-justify-content: flex-end; }

@media (max-width: 768px) {
	.col2-1 { width: 100%; }
	:not(li).col2-1:first-child { margin-bottom: 15px;}
	.col3-1 ,
	.col4-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }
	.colWrap .img { text-align: center;}
}


/*------------------------------------------------------

	mainVisual	

------------------------------------------------------*/
#mainVisual { margin-bottom: 30px;}

@media (max-width: 480px) {
	#mainVisual { position: relative; }
}

[id^='cont'] { margin-bottom: 50px;}
.content ul.list { font-size: 1.6rem;}
.content ul.list li::before { padding: 0 4px 0 6px; }



/*------------------------------------------------------

	osusume button

------------------------------------------------------*/
.osusumeBtn { width: 100%; max-width: 500px; margin: auto; position: relative; margin-bottom: 70px;}
.osusumeBtn::after { content: ''; background: url(images/kagiIcon.png) no-repeat left center; position: absolute; width: 100px; height: 101px; top: -16px; left: -26px; }
.osusumeBtn a { background-color: #0086E0; color: #fff; display: block; font-size: 1.8rem; text-decoration: none; line-height: 1.2; padding: 12px 0 10px 90px; border-radius: 38px; -webkit-border-radius: 38px; -moz-border-radius: 38px; }
.osusumeBtn a span { font-size: 2.8rem;}

@media (max-width: 480px) {
	.osusumeBtn { width: 82%; }
	.osusumeBtn a span { font-size: 2.6rem; display: block;}
}


/*------------------------------------------------------

	note

------------------------------------------------------*/
.note { background-color: #FCFBD2; padding: 14px 20px; margin-bottom: 40px;}
.note .title { font-weight: bold; color: #E10916; margin-bottom: 10px;}
.note .text { color: #1D4A8C; padding-left: 3em; text-indent: -3em;}
.note .text::before { content: "\e909"; color: #fff; font-family: 'kagiQfont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #F82811; font-size: 2rem; margin-right: 0.875em; }



/*------------------------------------------------------

	ol.type1

------------------------------------------------------*/
ol.type1 { list-style: none; counter-reset: number 0; }
ol.type1 li { color: #F82811; border: 4px solid #F82811; font-size: 2.2rem; padding: 7px 0; border-radius: 5px; }
ol.type1 li::before { color: #fff; counter-increment: number 1; content: counter(number) " "; font-size: 3rem; text-align: center; }
ol.type1 li:not(:last-child) { margin-bottom: 10px; }

@media (min-width: 768px){
	ol.type1 li { position: relative; padding-left: 60px; }
	ol.type1 li::before { position: absolute; top: 50%; left: 12px; margin-top: -22px; z-index: 1; }
	ol.type1 li::after { position: absolute; top: 0; left: 0; content: ""; display: block; background: #46A30A; width: 50px; height: 47px; }
}

@media (max-width: 767px){
	ol.type1 li { padding-top: 0; font-size: 1.8rem; text-align: center; }
	ol.type1 li::before { display: block; background: #46A30A; font-size: 2.2rem; margin-bottom: 5px; }
}



/*以下追加分*/


/*------------------------------------------------------
	車の合鍵
------------------------------------------------------*/
#aikagiCont02 .col3R2, .col3L2 {
    width: -webkit-calc( (99.9% / 3) * 2 - 10px );
    width: calc( (99.9% / 3) * 2 - 5px );
}


.flow { position: relative;}
.flow::after {border: 15px solid transparent; border-top-color: #0086E0; border-bottom-width: 0; bottom: -30px; content:""; display:block; left: 47%; position: absolute; width: 0;}
/*.flow:last-child:after {border: none;}
*/
.flow p.title {color: #1d4a8c;}

.flow p.title::before {font-family:ヒラギノ角ゴ Pro; font-weight: 600; color: #1d4a8c; counter-increment: number 1; content: counter(number)" "; font-size: 2rem; text-align: center;}
.body{counter-reset:number;}

.flow p.title::after {box-sizing: border-box;}

.flow .title:not(:last-child){margin-bottom: 10px;}

.flow_wrap .bg.yellow {background-color: #ffe934;}

.flow_wrap .bg.yellow p {color: #1D4A8C; font-size: 2rem; text-align: center; font-weight: 600;}
/*------------------------------------------------------
	車の合鍵 レスポンシブ
------------------------------------------------------*/
@media (min-width: 768px) { 
	.flow p.title {position: relative; padding-left: 40px;}
	.flow p.title::before {position: absolute; top:72%; left: 9px; margin-top: -16px; z-index: 1;}
	.flow p.title::after {position: absolute; top: 0; left: 0; content:""; display: block; background-color: #ffe934; width: 30px; height: 30px; border-radius: 5px;}
}

@media (max-width: 768px) {
	.col3L1, .col3L2 { width: calc( (99.9% / 3) * 2 - 5px );}
	.col3R1, .col3R2 { width: calc( (99.9% / 3)  - 10px);}

}



@media (max-width: 480px) {	

#aikagiCont02 .col3L2, #aikagiCont02 .col3R1 {width: 100%; float: none;}
.sagyounaiyou .col3L2, .sagyounaiyou .col3R1 {width: 100%; float: none;}
}