@charset "UTF-8";
/* ******************************************************************

    --fuelcost.css--

    1. Layout setting

****************************************************************** */
/*==================================================================
    1. Layout setting
===================================================================*/
#contents {
    padding-top:40px
}
#main {
    float:none;
    width:980px;
    padding:60px 36px 80px;
    background:#FFF;
}
.fuelcostBlock h3 {
    margin-bottom:6px;
    color:#071223;
    font-weight:bold;
    font-size:138.5%;
}
.fuelcostBlock .text {
    margin:20px auto 40px auto;
    padding:15px;
    font-size:108%;
    background:#F4F4F4;
    color:#071223;
}
.fuelcostBlock .text p {
    margin-bottom:20px;
}
.linkFuelcost li {
    margin-bottom:20px;
    width: 100%;
    display:inline-block;
    vertical-align: middle;
    align-items: center;
    vertical-align: middle;
    align-items: center;
}
.linkFuelcost span.leftBox {
    align-items: ;
    width: 22.8%;
    border:solid 1px #071223;
    margin:0 auto;
    padding:30px 0;
    font-size:108%;
    white-space:nowrap;
    text-align: center;
}
.headline5 {
    width : 16.66666%; /* 未対応ブラウザ用フォールバック */
    width : -webkit-calc(70% / 6);
    width : calc(70% / 6);
    float:left;
    margin-left:1.2%;
    margin-bottom: 10px;
    padding:8px 20px;
    background:#F4F4F4;
    border-radius:100px;
}
.headline5.long {
    width : 50%; /* 未対応ブラウザ用フォールバック */
    width : -webkit-calc(70% / 2);
    width : calc(70% / 2);
}
.headline5 a {
    background: url(/img/common/icon_pdf.gif) 100% 55% no-repeat;
    color:#071223;
    font-size: 108%;
    text-decoration:none;
    display: block;
}
@media screen and (max-width:1000px) {
.linkFuelcost span.leftBox {
    text-align:center;
    width:11vw;
}
.headline5 {
    width:13%;
    margin-left:10px;
    padding:8px 20px;
    background:#F4F4F4;
    border-radius:20px;
}
.headline5 a {
    padding-right:20px;
    font-size:1.3vw;
    white-space:nowrap;
}
.headline5.long {
    width : 100%; /* 未対応ブラウザ用フォールバック */
    width : -webkit-calc(70% / 1);
    width : calc(70% / 1);
}
}

.headline5 a:hover {
    color:#071223;
    text-decoration:underline;
}
p.rightText {
    margin-bottom:10px;
    text-align:right;
}

@media screen and (max-width:736px) {
    #main {
        padding:30px 10px;
    }
    .fuelcostBlock h3 {
        font-size:100%;
    }
    .headline5 {
        width : 16.66666%; /* 未対応ブラウザ用フォールバック */
        width : -webkit-calc(94% / 6);
        width : calc(94% / 6);
        min-width:90px;
        margin-top:10px;
    }
    .headline5 a {
        font-size:100%;
    }
    p.rightText {
        font-size:93%;
    }
    .text p {
        font-size:85%;
    }
    .linkFuelcost ul {
        display: block;
    }
    .linkFuelcost li {
        margin:0 0 12px;
    }
    .linkFuelcost span.leftBox {
        width:100%;
        margin-bottom:5px;
        padding:10px;
        text-align:center;
    }
}
@media screen and (max-width:430px) {
    .headline5.long {
    width : 100%; /* 未対応ブラウザ用フォールバック */
    width : -webkit-calc(100% / 1);
    width : calc(97% / 1);
    }
}