@charset "utf-8";

/* -----------------------------------------
	common
----------------------------------------- */
.bgYel{background-color: #fefef5;}
.bgBlue{background-color: #59bdee;}
.fontOrange{color: #ff6600;}
.mr5p{margin-right: 5%;}
.font30{font-size: 3.0rem!important;}
.font36{font-size: 3.6rem!important;}
.w50{width: 50px;}
.w100{width: 100px;}
.w110{width: 110px;}
.wCalc50{width: calc(100% - (50px + 15px));}
.wCalc100{width: calc(100% - (100px + 10px));}
.wCalc110{width: calc(100% - (110px + 10px));}
.breakAll{word-break: break-all;}

@media screen and (max-width: 750px){
    .sp_pd0{padding: 0!important;}
    .sp_mb4p{margin-bottom: 4%!important;}
    .sp_mb6p{margin-bottom: 6%!important;}
    .sp_font14{font-size: 1.4rem!important;}
    .sp_font22{font-size: 2.2rem!important;}
    .sp_ta-c{text-align: center;}
    .sp_maxW80{max-width: 80px;}
    .sp_colReverse{flex-direction: column-reverse;}
}


/* -----------------------------------------
	main visual
----------------------------------------- */
.mainVisual{
    position: relative;
    padding: 40px 150px;
    background: url("../img/bg_line.png") repeat-y center top/100% auto;
    text-align: center;
}
.mainVisual:before, .mainVisual:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.mainVisual:before{
    width: 63px;
    height: 69px;
    left: 60px;
    background: url("../img/img_car01.png") no-repeat left top/contain;
}
.mainVisual:after{
    width: 80px;
    height: 75px;
    right: 60px;
    background: url("../img/img_torenta.png") no-repeat left top/contain;
}

@media screen and (max-width: 750px){
    .mainVisual{padding: 6% 23%; font-size: 1.3rem;}
    .mainVisual:before{width: 53px; height: 48px; left: 6%;}
    .mainVisual:after{width: 63px; height: 60px; right:4%;}
}


/* -----------------------------------------
	heading
----------------------------------------- */
[class*='icon_car']{position: relative; padding-left: 125px;}

[class*='icon_car']:before{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;    
}
.icon_car01:before{background: url("../img/ico_h01.png") no-repeat left top/contain;}
.icon_car02:before{background: url("../img/ico_h02.png") no-repeat left top/contain;}
.icon_car03:before{background: url("../img/ico_h03.png") no-repeat left top/contain;}
.icon_car04:before{background: url("../img/ico_h04.png") no-repeat left top/contain;}
.icon_car05:before{background: url("../img/ico_h05.png") no-repeat left top/contain;}

.heading_linkOrange a{
    display: block;
    position: relative;    
    padding: 7px 30px;
    color: #fff;
    background-color: #ff6600;
}
.heading_linkOrange a:after{
    content: "";
    display: block;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 20px;
}
.heading_linkOrange a:hover{
    text-decoration: none;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.5);
    transition-duration: .2s;
}

@media screen and (max-width: 750px){
    .heading02.fontOrange{font-size: 2.2rem;}
    
    [class*='icon_car']{padding-left: 75px;}
    
    [class*='icon_car']:before{
        width: 65px;
        height: 65px;
    }
}


/* -----------------------------------------
	btn
----------------------------------------- */
.btn.ib{text-align: center;}
.btn.ib a{display: inline-block; padding: 15px 30px;}
.btn.blank a{padding: 15px 40px;}


/* -----------------------------------------
	icon
----------------------------------------- */
.icon_orange{
    width: 80px;
    padding: 3px 6px;
    margin-right: 10px;
    background-color: #ff6600;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}
.icon_orange + *{
    width: calc(100% - (80px + 10px));
}
.dbArrow{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 4px;
    margin: 0 12px;
    background-color: #ff6600;
    vertical-align: 4px;
}
.dbArrow:before, .dbArrow:after{
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    bottom: 0;
    margin: auto;
}
.dbArrow:before{
    left: -8px;
    border-right: 8px solid #ff6600;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;    
}
.dbArrow:after{
    right: -8px;
    border-left: 8px solid #ff6600;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;    
}
.icon_point{position: relative; padding-left: 45px;}
.icon_point:before{
    content: "";
    display: block;
    width: 35px;
    height: 55px;
    background: url("../img/icon_denkyu.png") no-repeat left top;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
[class*='icon_step']{position: relative; padding-left: 125px;}

.icon_step01:before{content: "step\A 1";}
.icon_step02:before{content: "step\A 2";}
.icon_step03:before{content: "step\A 3";}
.icon_step04:before{content: "step\A 4";}

[class*='icon_step']:before{
    display: block;
    width: 100px;
    height: 80px;
    padding-top: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 50px;
    background-color: #ff6600;
    color: #fff;
    font-size: 2.7rem;
    text-align: center;
    line-height: 1.2;
    white-space: pre;
}
@media screen and (max-width: 750px){
    .icon_orange{font-size: 1.4rem;}
    .icon_orange + dd{width: calc(100% - (65px + 10px));}
    
    [class*='icon_step']{padding-left: 70px;}
    [class*='icon_step']:before{
        width: 60px;
        height: 50px;
        padding-top: 10px;
        border-radius: 30px;
        font-size: 1.8rem;
    }
}


/* -----------------------------------------
	panel
----------------------------------------- */
#top .panelList .cardsBox_link > a{padding: 10px 10px 25px;}

#top .panelList h2{
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fffdca;
    color: #ff6600;
    font-size: 1.6rem;
    text-align: center;
}
.cardsBox_link.blank{position: relative;}
.cardsBox_link.blank:after{
    content: "";
    display: inline-block;
    background: url(/material/img/ico_blank.svg) no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.carModelList .cardsBox{padding: 0;}
.carModelList .cardsWrap{padding: 12px;}

.carModelList .cards_heading{
    padding: 5px 10px;
    color: #fff;
    text-align: center;
}
.carModelList .sk .cards_heading{background-color: #f768a1;}
.carModelList .ss .cards_heading{background-color: #008837;}
.carModelList .sd .cards_heading{background-color: #f90033;}
.carModelList .sb .cards_heading{background-color: #0868ac;}
.carModelList .sm .cards_heading{background-color: #ff7f00;}
.carModelList .sw .cards_heading{background-color: #0e3192;}
.carModelList .sh1 .cards_heading{background-color: #68582b;}
.carModelList .sh2 .cards_heading{background-color: #707070;}
.carModelList .sh3 .cards_heading{background-color: #304678;}

@media screen and (max-width: 750px){
    #top .panelList > *{margin-bottom: 8%;}
}


/* -----------------------------------------
	content box
----------------------------------------- */
.yellowBox{
    padding: 30px;
    background-color: #fffdca;
}
.balloonArea{
    position: relative;
    border-radius: 15px;
    margin-right: 40px;
}
.balloonArea:after{
    content: "";
    display: block;
    position: absolute;
    right: -30px;
    bottom: 30px;
    border-left: 30px solid #fffdca;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;    
}

@media screen and (max-width: 750px){
    .yellowBox{padding: 5%;}
    .balloonArea{
        margin-right: 0;
        margin-bottom: 40px;
    }
    .balloonArea:after{
        right: calc(50% - 20px);
        bottom: -40px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 30px solid #fffdca;
    }
}


/* -----------------------------------------
	table
----------------------------------------- */
.usageFee > table tr > *:first-of-type{background-color: #fffdca;}
.usageFee > table th{background-color: #fff; border-bottom: 1px solid #ddd;}
.usageFee > table td+td{border-left: none;}

@media screen and (min-width: 751px), print{
    .table_pd10 > table th, .table_pd10 > table td{padding: 10px;}
    .usageFee > table th{font-size: 1.6rem;}
}


/* -----------------------------------------
	navl list
----------------------------------------- */
[class*='navList_col']{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
}
[class*='navList_col'] li{
    width: calc(100% / 3);
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.navList_col2 li{width: 50%;}
.navList_col3 li{width: calc(100% / 3);}

.navList_col2 li:nth-of-type(2n),
.navList_col3 li:nth-of-type(3n){border-right: 0;}

.navList_col2 li:nth-child(2n+1):nth-last-child(-n+2),
.navList_col2 li:nth-child(2n+1):nth-last-child(-n+2) ~ li,
.navList_col3 li:nth-child(3n+1):nth-last-child(-n+3),
.navList_col3 li:nth-child(3n+1):nth-last-child(-n+3) ~ li{border-bottom: 0;}

[class*='navList_col'] li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 10px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
}
[class*='navList_col'] .current a,
[class*='navList_col'] li a:hover{background-color:#e2f3e2;}

[class*='navList_col'] .blank{position: relative;}
[class*='navList_col'] .blank:after{
    content: "";
    display: block;
    background: url("/material/img/ico_blank.svg") no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
}
[class*='navList_col'] .blank a{padding-right: 30px;}

@media screen and (max-width: 750px){
    [class*='navList_col'] li{
        width: 100%;
        border-right: 0;
    }
    .navList_col2 li:nth-child(2n+1):nth-last-child(-n+2),
    .navList_col2 li:nth-child(2n+1):nth-last-child(-n+2) ~ li,
    .navList_col3 li:nth-child(3n+1):nth-last-child(-n+3),
    .navList_col3 li:nth-child(3n+1):nth-last-child(-n+3) ~ li{border-bottom: 1px solid #ddd;}
    
    [class*='navList_col'] li:last-of-type{border-bottom: 0!important;}
}