@charset "UTF-8";

#charge {
    font-size: 0.8rem;
}
#charge-cal form {
    padding: 0.5%;
}
#charge-cal h2 {
    position: relative;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
    padding: 0.5em 0.5em 0rem 2.0rem;
    border-bottom: 2px solid #B92A2C;
    background: #fff;
    color: #000;
}
#charge-cal h2:before {
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #ff6b6e;
    top: -0.8em;
    left: 0.3em;
    height: 12px;
    width: 12px;
}
#charge-cal h2:after {
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #B92A2C;
    top: -0.5em;
    left: 0;
    height: 12px;
    width: 12px;
}
#charge-cal h2 a {
    color: #000;
}
#charge-cal h3 a {
    color: black;
}
#charge-cal p {
    margin-left: 5%;
}

.usemethod {
    padding:2% 0 2% 0;
}

.pop a {
    color: #000;
}
.pop a:hover {
     /*マウスが乗ったら*/
    position: relative;
    top: 0px;
    left: 0px;
}

.fukidasipop {
    /*吹き出し本体*/
    position: absolute;
    top:17px;
    left:20px;
    display: none; /*何も表示しない*/
    padding: 5px; /*内側の余白*/
    width: 200px; /*ブロックの幅
    font-weight: bold; /*文字の太さ*/
    text-decoration: none; /*文字飾り*/
    color: #ffffff; /*文字色*/
    background-color: #b22222; /*背景色*/
    font-size: 0.8em;
    border-top: white solid 10px;
    border-left: #b22222 solid 10px;

    filter: alpha(opacity=85); /* IE */
    moz-opacity: 0.85; /*Firefox・Netscape */
    opacity: 0.85; /* Opera・Safari */
}

.input_parts {
    margin: 5% 5% 20% 5%;
    padding: 2%;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 15px;
}

a:hover .fukidasipop {
    display: block; /*ブロック要素で表示*/
}

#total-disp {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2%;
    border-radius: 15px;
    background: #f8b188;
}

/* ########### 480px以上 ########### */
@media screen and (min-width:480px) {
    #charge {
        font-size: 1rem;
    }

    #charge-cal form {
        padding: 5%;
    }

    #total-disp {
        width: 300px;
    }
}