@charset "UTF-8";

/* --- キービジュアルとh1 --- */
.tokutenKV{
    width:100%;
    height:255px;
    background: #000 url("../_images/_common/bg_h1_PC.jpg") no-repeat center top; 
    background-size:1366px auto;
}
.tokutenKV .ttl01{
    color:#fff;
    text-align:center;
    font-size:50px;
    font-weight:bold;
    line-height:1;
    padding:65px 0 24px;
}
.tokutenKV .sen {
    border:none;
    width:91px;
    margin:0 auto;
    border-bottom:5px solid #E60012;
}
.tokutenKV .en {
    text-align:center;
    padding-top:24px;
}
.tokutenKV .en img{
    width:330px;
}

/* --- 各ブロック --- */
.spCenter{
    text-align:left;
}
.benefitType{
    width:100%;
    padding:120px 0;
    background-color:#eee;
}
.eachWrapper{
    width:1100px;
    margin:0 auto 40px;
    color:#111;
}
.eachBox {
    width:1060px;
    margin:0 0 0 40px;
    padding:33px 64px;
    background-color:#fff;
    box-shadow: 0px 3px 6px #00000029;
    position:relative;
    font-size:17px;
    line-height:1.6;
}
.eachBox .icon{
    position:absolute;
    top:33px;
    left:-40px;
    width:80px;
}
.eachBox .ttl02{
    font-size:21px;
    color:#111;
    font-weight:bold;
}
.eachBox .ttl02 em{
    font-size:41px;
    color:#E60012;
    font-weight:bold;
    display:block;
}
.eachBox .tx01{
    font-size:17px;
    color:#111;
    font-weight:500;
    padding:1em 0 0 0;
}
.eachBox .tx01 b{
    color:#E60012;
    font-weight:bold;
    display:inline;
}
.eachBox .tx01a{
    font-size:17px;
    color:#111;
    font-weight:500;
    padding:1em 0 0 0;
}
.eachBox .tx01a b{
    color:#E60012;
    font-weight:bold;
    display:inline;
}
.eachBox .moreBtn{
    font-size:20px;
    color:#1E77C9;
    cursor:pointer;
    margin-top:1em;
}

/* --- テキストリンク色 --- */
.eachBox a:link, .cardCo a:link,
.eachBox a:visited, .cardCo a:visited, 
.eachBox a:active, .cardCo a:active{
    color: #1e77c9;
    text-decoration: underline;
    opacity:1;
}
.eachBox a:hover, .cardCo a:hover{
    opacity:0.6;
    transition: 0.2s ease-in-out;
}
/* --- もっと見る --- */
.moreInfo{
    display:none;
    margin-top:20px;
}

.moreInfo .ttl03{
    font-size:17px;
    color:#666;
    font-weight:bold;
    border-bottom:1px solid #666;
    margin-bottom:1em;
}
.moreInfo .ls01{
     list-style: none;
     margin:0;
     padding:0 0 0.5em 0;
}
.moreInfo .ls01 li{
    font-size:17px;
	text-indent: -1.1em;
	margin:0 0 0.1em 1.1em;
	padding:0;
    color:#666;
    font-weight:500;
}
.moreInfo .tx03{
    font-size:17px;
    color:#666;
    padding-left:1em;
}

.eachBox .ls02{
    display:flex;
    font-size:17px;
    font-weight:bold;
    color:#111;
    box-sizing: border-box;
    margin:40px 0 0 0;
}
.eachBox .ls02 li {
    margin:0 40px 0 0;
    font-weight:bold;
    text-align:center;
}
.eachBox .ls02 li img{
    height:51px;
    width:auto;
    margin-bottom:3px;
}
.eachBox .ls02 li.oil img{
    height:46px;
    margin-top:5px;
}
.eachBox .ls02 li.wiper img{
    height:41px;
    margin-top:5px;
    margin-bottom:8px;
}


.moreInfo .ttl03b{
    margin-bottom:1em;
}
.moreInfo .ttl03b b{
    display:inline-block;
    line-height:1.4;
    font-size:17px;
    color:#E60012;
    font-weight:bold;
    border-bottom:4px solid #E60012;
}

/* --- Tポイント ランク--- */
.spUnderRed{
    display:none;
}
.pointTB{
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.pointTB .tx04 {
    width:100%;
}
.pointTB .tx04 s{
    display:inline-block;
    width: 416px;
    opacity:0;
}
.pointTB .tx04 em{
    display:inline-block;
    text-align:center;
    line-height:1.16;
    width:376px;
    background-color:#CF2C2B;
    color:#fff;
    font-size:14px;
    padding:6px;
}
.pointTB .tx05 {
    width: 228px;
    height:170px;
    text-align:center;
    display:block;
}
.pointTB .tx05 s{
    display:block;
    height:73px;
    opacity:0;
}
.pointTB .tx05 em{
    display:block;
    height:96px;
    background-color:#EEEEEE;
    font-size:15px;
    color:#111;
    padding-top:10px;
    border-top:1px solid #CDCDCD;
    border-left:1px solid #CDCDCD;
    border-bottom:1px solid #CDCDCD;
}
.pointTB .tx05 b{
    font-size:17px;
    font-weight:bold;
    display:block;
}
.pointTB dl {
    width:188px;
    height:169px;
    text-align:center;
    display:block;
    border-top:1px solid #CDCDCD;
    border-left:1px solid #CDCDCD;
    border-bottom:1px solid #CDCDCD;
}
.pointTB dt {
    height:73px;
    font-size:16px;
    font-weight:bold;
    border-bottom:1px solid #CDCDCD;
    text-align:left;
    line-height:73px;
 }
.pointTB .bronze dt{
    background-color:#F4DED5;
    color:#CC6132;
}
.pointTB .sapphir dt{
    background-color:#DBE9F3;
    color:#529CC7;
}
.pointTB .diamond dt{
    background-color:#FBF2D5;
    color:#E0A43B;
}
.pointTB .diamond {
    border-right:1px solid #CDCDCD;
}
.pointTB dt img{
    vertical-align:top;
    margin-right:0.5em;
    margin-left:10px;
}
.pointTB .bronze img{
    width:50px;
    margin-top:10px;
}
.pointTB .sapphir img{
    width:45px;
    margin-top:8px;
}
.pointTB .diamond img{
    width:55px;
    margin-top:7px;
}
.pointTB  dd{
    font-size:15px;
    line-height:93px;
}
.pointTB  dd b{
    font-size:21px;
    font-weight:bold;
}
.pointTB .bronze dd{
    color:#111;
}
.pointTB .sapphir dd{
    color:#E60012;
}
.pointTB .diamond dd{
    color:#E60012;
}
.moreInfo .tx06a{
    font-size:15px;
    margin:0.5em 0 1em;
}
.moreInfo .tx06{
    font-size:17px;
    margin:1em 0 2em;
}
.moreInfo .tx07{
    font-size:17px;
    margin-bottom:0.7em;
}

/* --- ETC --- */
.moreInfo .etcTB{
    width:640px;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
}
.moreInfo .etcTB .cpt{
    width:130px;
}
.moreInfo .etcTB .cpt s{
    display:block;
    height:73px;
}
.moreInfo .etcTB .cpt b{
    display:block;
    height:95px;
    text-align:center;
    line-height:96px;
    background-color:#EEEEEE;
    font-weight:bold;
    font-size:17px;
    border-top:1px solid #CDCDCD;
    border-bottom:1px solid #CDCDCD;
    border-left:1px solid #CDCDCD;
}

.moreInfo .etcTB table{
    width:512px;
    height:168px;
    border-top:1px solid #CDCDCD;
    border-right:1px solid #CDCDCD;
}
.moreInfo .etcTB th{
    font-size:15px;
    text-align:center;
    vertical-align:middle;
    height:36px;
    background-color:#EEEEEE;
    border-bottom:1px solid #CDCDCD;
    border-left:1px solid #CDCDCD;
}
.moreInfo .etcTB td{
    font-size:15px;
    text-align:center;
    vertical-align:middle;
    color:#E60012;
    font-weight:bold;
    border-bottom:1px solid #CDCDCD;
    border-left:1px solid #CDCDCD;
}
.moreInfo .etcTB td b{
    display:none;
}
.moreInfo .ttl03c{
    margin:1em 0;
}
.moreInfo .ttl03c b{
    display:inline-block;
    line-height:1.4;
    font-size:17px;
    color:#E60012;
    font-weight:bold;
    border-bottom:4px solid #E60012;
}
.moreInfo .kome{
    font-size:17px;
	text-indent: -1.1em;
	margin:1em 0 0.1em 1.1em;
	padding:0;
    color:#666;
    font-weight:500;
}
.moreInfo .tx08{
    font-size:17px;
    color:#111;
    font-weight:500;
    margin:0 0 1.5em 0;
}

/* --- さらに2倍 --- */
.moreInfo .tx09{
    color:#666;
    padding-bottom:0.5em;
    font-size:17px;
}
.moreInfo .tx10{
    color:#111;
    margin-top:1em;
    font-size:17px;
}
.moreInfo .tx10 em{
    font-weight:bold;
}
.moreInfo .tx10 b{
    font-weight:bold;
    color:#E60012;
}
.moreInfo .kome2{
    font-size:17px;
	text-indent: -1.1em;
	margin:0 0 0.1em 1.1em;
	padding:0;
    color:#666;
    font-weight:500;
}

/* --- ロードサービス --- */
.moreInfo .whichOne{
    width:100%;
    display:flex;
    justify-content: space-between; 
}
.moreInfo .whichOne a{
    display:block;
    width:48%;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:1.4;
    border: 1px solid #CDCDCD;
    box-shadow: 4px 4px 4px #00000029;
    border-radius: 8px;
    padding:6px 0;
}
.moreInfo .whichOne a:link,
.moreInfo .whichOne a:visited,
.moreInfo .whichOne a:active{
    text-decoration: none;
    color:#111;
}

/* --- 選べるカード会社 --- */
.cardCo{
    width:1100px;
    margin:0 auto;
    padding-top:120px;
}
.cardCo .ttl02{
    font-size:33px;
    font-weight:bold;
    text-align:center;
    margin-bottom:40px;
}
.cardCo .tx01{
    font-size:17px;
    text-align:center;
    margin-bottom:30px;
}
.cardCo .tx01 b{
    color:#E60012;
    font-weight:bold;
}
.cardCo .eachCardInfo{
    width:800px;
    margin:0 auto;
    box-sizing: border-box;
    background-image: linear-gradient(
        90deg,
        #FDF2F3 0%, #FDF2F3 50%,
        #FDECE5 50%, #FDECE5 100%
    );
    display:flex;
    flex-wrap: wrap;
    padding-bottom:40px;
}   
.cardCo .nicosCd,
.cardCo .oricoCd{
    width:50%;
    box-sizing: border-box;
    text-align:center;
    font-size:17px;
}
.cardCo .nicosCd img{
    width:136px;
    margin:40px 0 5px;
}
.cardCo .oricoCd img{
    width:170px;
    margin:45px 0 12px;
}
.cardCo .ttl03{
    width:100%;
    margin:40px 0 24px;
    box-sizing: border-box;
    text-align:center;
}
.cardCo .ttl03 b{
    width:462px;
    margin:0 auto;
    font-size:17px;
    font-weight:bold;
    color:#666;
    text-align:center;
    display:block;
    background-color:#fff;
    border-radius: 26px;
    padding:5px 0;
}

.cardCo .tx02{
    width:50%;
    font-size:17px;
    box-sizing: border-box;
    text-align:center;
    line-height:1.6;
}
.cardCo .tx02 b{
    font-weight:bold;
    font-size:17px;
}
.cardCo .tx03{
    width:50%;
    font-size:17px;
    box-sizing: border-box;
    text-align:center;
    line-height:1.6;
}
.cardCo .tx03 b{
    font-weight:bold;
    font-size:17px;
}

.cardCo .tx03 .uper{
    margin-bottom:0.7em;
}
.cardCo .tx04{
    font-size:17px;
    text-align:center;
    line-height:1.6;
    margin-top:2em;
}
/* ---------------------------- スマホ --------------------------- */
@media screen and (max-width:767px){
    .tokutenKV{
        width:100vw;
        height:42vw;
        background: #000 url("../_images/_common/bg_h1_SP.jpg") no-repeat center top; 
        background-size:100% auto;
    }
    .tokutenKV .ttl01{
        font-size:7vw;
        padding:1.45em 0 5vw;
    }
    .tokutenKV .sen {
        width:14vw;
    }
    .tokutenKV .en {
        padding-top:4.3vw;
    }
    .tokutenKV .en img{
        width:53vw;
    }

/* --- 各ブロック --- */
    .spCenter{
        text-align:center;
    }
    .benefitType{
        width:100vw;
        padding:27vw 0 8vw 0;
        overflow:hidden;
    }
    .eachWrapper{
        width:100%;
        margin:0 auto 14vw;
    }
    .eachBox {
        width:100%;
        margin:0;
        padding:10vw 4.2vw 7vw;
        box-shadow: none;
        position:relative;
        font-size:4vw;
        line-height:1.6;
    }
    .eachBox .icon{
        position:absolute;
        top:-7.2vw;
        left:42.8vw;
        width:14.4vw;
    }
    .eachBox .ttl02{
        text-align:center;
        font-size:4vw;
        line-height:1.4;
    }
    .eachBox .ttl02 em{
        font-size:7vw;
        display:block;
    }
    .eachBox .tx01{
        font-size:4vw;
        padding:1em 0;
    }
    .eachBox .tx01a{
        font-size:4.5vw;
        padding:1em 0;
    }
    .eachBox .moreBtn{
        font-size:4.5vw;
        cursor:auto;
        text-align:center;
    }
/* --- テキストリンク色 --- */
    .eachBox a:link, .cardCo a:link,
    .eachBox a:visited, .cardCo a:visited, 
    .eachBox a:active, .cardCo a:active,
    .eachBox a:hover, .cardCo a:hover{
        color: #1e77c9;
        text-decoration: underline;
        opacity:1;
    }

/* --- もっと見る --- */
    .moreInfo{
        display:none;
        margin-top:4.5vw;
    }
    .moreInfo .ttl03{
        font-size:4vw;
        margin-bottom:1em;
    }
    .moreInfo .ls01{
        padding:0 0 0.5em 0;
    }
    .moreInfo .ls01 li{
        font-size:4vw;
    }
    .moreInfo .tx03{
        font-size:4vw;
    }
    .eachBox .ls02{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between; 
        font-size:4vw;
        margin:10vw 0 7vw 0;
    }
    .eachBox .ls02 li {
        width:45.5vw;
        margin:0 0 4.5vw 0;
    }
    .eachBox .ls02 li img{
        height:13vw;
        width:auto;
        margin-bottom:3px;
    }
    .eachBox .ls02 li.oil img{
        height:11.7vw;
        margin-top:1.3vw;
    }
    .eachBox .ls02 li.wiper img{
        height:10.4vw;
        margin-top:1.3vw;
        margin-top:1.3vw;
    }
    .moreInfo .ttl03b{
        margin-bottom:0;
        text-align:center;
    }
    .moreInfo .ttl03b b{
        display:inline-block;
        line-height:1.6;
        font-size:4.5vw;
        border:none;
    }
    
/* --- Tポイント ランク--- */
    .spUnderRed{
        display:block;
        border:none;
        border-top:4px solid #E60012;
        width:49vw;
        margin:0.5em auto 1.5em auto;
    }
    .pointTB{
        position:relative;
        width:100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    .pointTB .tx04 {
        width:100%;
    }
    .pointTB .tx04 s{
        display:inline-block;
        width:33%;
        opacity:0;
    }
    .pointTB .tx04 em{
        display:inline-block;
        text-align:center;
        line-height:1.3;
        width:67%;
        color:#fff;
        font-size:3.7vw;
        padding:0.4em;
    }
    .pointTB dl {
        height:auto;
        text-align:center;
        display:block;
    }
    .pointTB .bronze{
        width:33%;
    }
    .pointTB .sapphir{
        width:33%;
    }
    .pointTB .diamond{
        width:34%;
    }

    .pointTB dt {
        height:73px;
        font-size:3.7vw;
        font-weight:bold;
        border-bottom:1px solid #CDCDCD;
        text-align:center;
        line-height:1.5;
    }
    .pointTB dt img{
        margin-right:0;
        margin-left:0;
        margin-bottom:0;
    }
    .pointTB .bronze img{
        width:36px;
        margin-top:7px;
    }
    .pointTB .sapphir img{
        width:34px;
        margin-top:6px;
    }
    .pointTB .diamond img{
        width:40px;
        margin-top:5px;
    }
    .pointTB  dd{
        font-size:4vw;
        line-height:1.6;
        padding:60px 0 14px 0
    }
    .pointTB  dd b{
        font-size:5.5vw;
    }
    .pointTB .tx05{
        position:absolute;
        width:84vw;
        /* height:1.8em; */
        height: auto;
        /* line-height:1.8em; */
        line-height: 1.4;
        border-radius: 1.8em;
        text-align:center;
        display:block;
        background-color:#EEEEEE;
        top:133px;
        left:4vw;
    }
    .pointTB .tx05 s{
        display:none;
    }
    .pointTB .tx05 em{
        display:inline;
        height:1.8em;
        font-size:4vw;
        padding-top:0;
        border:none;
    }
    .pointTB .tx05 b{
        font-size:4vw;
        /* font-weight:bold; */
        font-weight: bold;
        display:inline;
    }
    .moreInfo .tx06a{
        font-size:4vw;
    }
    .moreInfo .tx06{
        font-size:4.1vw;
        margin:1em 0 2em;
    }
    .moreInfo .tx07{
        font-size:4.5vw;
        margin-bottom:0.7em;
    }

/* --- ETC --- */
    .moreInfo .ttl03c{
        margin-bottom:0;
        text-align:center;
    }
    .moreInfo .ttl03c b{
        display:inline-block;
        line-height:1.5;
        font-size:4.5vw;
        border:none;
    }
    .moreInfo .etcTB{
        width:100%;
        display: flex;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }
    .moreInfo .etcTB .cpt{
        display:none;
    }
    .moreInfo .etcTB table{
        width:100%;
        height:157px;
    }
    .moreInfo .etcTB th{
        font-size:4vw;
        text-align:center;
        vertical-align:middle;
        height:36px;
    }
    .moreInfo .etcTB th.narrow{
        font-size:3.9vw;
        letter-spacing:-0.8px;
    }
    .moreInfo .etcTB td{
        font-size:4.5vw;
        text-align:center;
        vertical-align:middle;
        color:#E60012;
        font-weight:bold;
        width:33%;
    }
    .moreInfo .etcTB td b{
        display:block;
        font-size:4vw;
        text-align:center;
        color:#111;
        line-height:1.2;
    }
    .moreInfo .kome{
        font-size:4vw;
    }
    .moreInfo .tx08{
        font-size:4.5vw;
        color:#111;
        font-weight:500;
        margin:0 0 1.5em 0;
    }

/* --- さらに2倍 --- */
    .moreInfo .tx09{
        color:#666;
        padding-bottom:0.5em;
        font-size:4vw;
        text-align:center;
    }
    .moreInfo .tx10{
        color:#111;
        margin-top:1em;
        font-size:4.5vw;
    }
    .moreInfo .kome2{
        font-size:4vw;
        text-indent: -1.1em;
        margin:0.5em 0 0.1em 1.1em;
        padding:0;
        color:#666;
        font-weight:500;
    }

/* --- ロードサービス --- */
    .moreInfo .whichOne{
        width:100%;
        display:block;
    }
    .moreInfo .whichOne a{
        display:block;
        width:83vw;
        margin:0 auto 5vw auto;
        text-align:center;
        font-size:4vw;
        font-weight:bold;
        line-height:1.7;
        border: 1px solid #CDCDCD;
        box-shadow: 4px 4px 4px #00000029;
        border-radius: 8px;
        padding:6px 0;
    }
    .moreInfo .whichOne a b{
        font-size:5.3vw;
        font-weight:bold;
    }

/* --- 選べるカード会社 --- */
    .cardCo{
        width:100%;
        margin:0;
        padding-top:20vw;
    }
    .cardCo .ttl02{
        font-size:6.7vw;
        font-weight:bold;
        text-align:center;
        margin-bottom:10vw;
    }
    .cardCo .tx01{
        font-size:4.5vw;
        text-align:left;
        margin-bottom:10vw;
        padding:0 4.2vw;
    }
    .cardCo .eachCardInfo{
        width:100%;
        margin:0;
        padding-bottom:10vw;
        overflow:hidden;
    }   
    .cardCo .nicosCd,
    .cardCo .oricoCd{
        width:50%;
        box-sizing: border-box;
        text-align:center;
        font-size:3.5vw;
        letter-spacing:-0.4px;
    }
    .cardCo .nicosCd img{
        width:19vw;
        margin:10vw 0 0.7em;
    }
    .cardCo .oricoCd img{
        width:24vw;
        margin:10vw 0 0.3em;
    }
    .cardCo .ttl03{
        width:100%;
        margin:8.5vw 0 4vw;
        box-sizing: border-box;
        text-align:center;
    }
    .cardCo .ttl03 b{
        width:50vw;
        margin:0 auto;
        font-size:4vw;
        font-weight:bold;
        color:#666;
        text-align:center;
        display:block;
        background-color:#fff;
        border-radius: 2em;
        padding:0.4em 0;
    }
    .cardCo .tx02{
        width:50%;
        font-size:3.8vw;
        box-sizing: border-box;
        text-align:center;
        line-height:1.5;
        padding:0 2.5vw;
        letter-spacing:-0.3px;
    }
    .cardCo .tx02 b{
        font-weight:bold;
        font-size:4vw;
    }
    .cardCo .tx03{
        width:50%;
        font-size:3.7vw;
        box-sizing: border-box;
        text-align:left;
        line-height:1.5;
        padding:0 2.5vw;
        letter-spacing:-0.3px;
    }
    .cardCo .tx03 b{
        font-weight:bold;
        font-size:4vw;
    }
    .cardCo .tx03 .uper{
        margin-bottom:0.7em
    }
    .cardCo .tx03 i{
        font-size:3.46vw;
    }
    .cardCo .tx03 .uper.spex{
        text-align:center;
    }
    .cardCo .tx02.spex2{
        text-align:left;
    }
    .cardCo .tx02.spex3{
        padding-top:0.5em;
    }
    .cardCo .tx03 .uper.spex{
        letter-spacing:-0.5px;
    }
    .cardCo .tx03 .uper.spex5{
        padding-top:1.5em;
    }
    .cardCo .tx03 .spex6{
        text-align:center;
    }
    .cardCo .tx04{
        font-size:4.5vw;
        text-align:left;
        line-height:1.6;
        margin-top:2em;
        padding:0 3vw;
    }
    .cardCo .tx04 .spex7{
        display:block;
        margin-top:0.5em;
        font-size:4.5vw;
        letter-spacing:0;
    }


}/* スマホ */