.plnNote {
    font-size: 12px;
    padding: 40px 0 30px;
}
.plnNote li, .plnNote2 li {
    margin-bottom: 10px;
    line-height: 1.6;
    position: relative;
    padding-left: 2.5em;
}

.balloon {
    position:relative;
    width: calc(100% - 40px);
    background:#FFFFFF;
    padding:15px;
    border:3px solid #818181;
    /* font-size:1.5vw; */
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    margin: auto 20px;
}
.balloon::before {
    content:'';
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 3px;
    border-color: #818181 #fff #fff #818181;
    border-style: solid;
    transform: rotate(225deg);
    position: absolute;
    left: calc(50% - 10px);
}

/* Header用balloon */
.balloonHeader {
    position:relative;
    width:calc(100% - 0px);
    background:#FFFFFF;
    text-align:center;
    border:4px solid #eb5406;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: auto 0 20px;
    padding: 15px;
}
.balloonHeader::before {
    content:'';
    bottom: -10px;
    width: 20px;
    height: 20px;
    background: #FFF;
    border-width: 4px;
    border-color: #eb5406 #fff #fff #eb5406;
    border-style: solid;
    -webkit-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
            transform: rotate(225deg);
    position: absolute;
    left: calc(50% - 10px);
}
.balloonHeader img {
    max-height: 56px;
}
.balloonHeader > div {
    margin: 0 auto;
}

.tglWrapHeader {
    /* font-size: 4vw; */
    text-align: center;
    position: relative;
    background-image: url(/content/dam/au-com/mobile/charge/images/mb_charge_tglWrapHeader_bg.png);
    color: #fff;
    padding: 20px;
}
.tglWrapHeader h3 {
    font-size: 24px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}
.tglWrapBottom {
    background-color: #fdf0ec;
    padding: 0 20px;
}
.tglWrapBottom .iconArea {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eb5505;
    font-size: 18px;
}
.tglWrapBottom .iconArea span {
    font-size: 140%;
}
.tglWrapBottom .iconArea .headIcon {
    height: 1.75rem;
}

/*ツールチップ設定 */
.toolTip-ctr .qIcon {
    width: 18px;
    margin-left: 5px;
}
.tglWrapBottom .iconArea .toolTip-section .toolTip-ctr,
.discountArea .iconArea .toolTip-section .toolTip-ctr {
    display: flex;
    justify-content: center;
    align-items: center;
}
.serviceArea .iconArea .toolTip-section .toolTip-ctr {
    position: relative;
    left: calc(100% - 16px);
}

.tglWrapBottom .toolTip-section .toolTip-ctr.toolTip-top:after,
.discountArea .toolTip-section .toolTip-ctr.toolTip-top:after {
    left: calc(50% + 18px);
    top: -24px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 1px;
    border-color: #333 #fff #fff #333;
    transform: rotate(225deg);
}
/* ↓↓.discountAreaのツールチップ↓↓ */
.discountArea .toolTip-section .toolTip-ctr .toolTip .toolTip-cont {
    position: relative;
    padding: 18px 18px 100px;
    background: #fff;
    color: #333;
    border: 1px solid #333;
    border-radius: 10px;
    margin-top: 11px;
}
.discountArea .toolTip-section .toolTip-ctr.toolTip-bottom:after {
    left: calc(50% + 18px);
    top: 30px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 1px;
    border-color: #333 #fff #fff #333;
    transform: rotate(45deg);
}
/* ↑↑.discountAreaのツールチップ↑↑ */
/* ↓↓.serviceAreaのツールチップ↓↓ */
.serviceArea .toolTip-section .toolTip-ctr.toolTip-top:after {
    left: 50%;
    top: -20px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 1px;
    border-color: #333 #fff #fff #333;
    transform: rotate(225deg);
}
.serviceArea .toolTip-section .toolTip-ctr .toolTip .toolTip-cont {
    position: relative;
    padding: 18px 18px 100px;
    background: #fff;
    color: #333;
    /* font-size: 1.4vw; */
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 5px;
}
.serviceArea .toolTip-section .toolTip-ctr.toolTip-bottom:after {
    left: 50%;
    bottom: -20px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 1px;
    border-color: #333 #fff #fff #333;
    transform: rotate(45deg);
}
.serviceArea .toolTip-section .toolTip-ctr.toolTip-top .toolTip {
    width: 340px;
    right: -80px !important;
}
.serviceArea .toolTip-section .toolTip-ctr.toolTip-bottom .toolTip {
    margin-top: 10px;
}
/* ↑↑.serviceAreaのツールチップ↑↑ */

.tglWrapBottom .toolTip-section .toolTip-ctr.toolTip-bottom .toolTip,
.discountArea .toolTip-section .toolTip-ctr.toolTip-bottom .toolTip,
.serviceArea .toolTip-section .toolTip-ctr.toolTip-bottom .toolTip {
    width: 340px;
    right: -80px !important;
}
.tglWrapBottom .toolTip-section .toolTip-ctr.toolTip-top .toolTip,
.discountArea .toolTip-section .toolTip-ctr.toolTip-top .toolTip {
    margin-bottom: 15px;
    width: 340px;
    right: -80px !important;
}

.tglWrapBottom .toolTip-section .toolTip-ctr .toolTip .toolTip-cont img {
    width: 100%;
}
.tglWrapBottom .toolTip-section .toolTip-ctr .toolTip .toolTip-cont {
    position: relative;
    padding: 18px 18px 100px;
    background: #fff;
    color: #333;
    /* font-size: 1.4vw; */
    border: 1px solid #333;
    margin-top: 5px;
    border-radius: 10px;
}
.tglWrapBottom .toolTip-section .toolTip-ctr.toolTip-bottom:after {
    left: calc(50% + 18px);
    bottom: -20px;
    width: 18px;
    height: 18px;
    background: #FFF;
    border-width: 1px;
    border-color: #333 #fff #fff #333;
    transform: rotate(45deg);
}

.toolTip-section .toolTip-ctr .toolTip .toolTip-cont .toolTip-closer {
    bottom: 20px;
    right: calc(50% - 30px);
    top: inherit;
    background-image: url(/content/dam/au-com/mobile/charge/images/mb_charge_tooltip-close.png);
    width: 60px;
    height: 60px;
    background-size: inherit;
    background-position: inherit;
    transform: scale(0.5);
}
.toolTip-section .toolTip-ctr .toolTip .toolTip-cont a {
        color: #06a;
}
/* ツールチップ設定 */

.tglWrapBody {
    margin: 0 6.94%;
}

.tglClose {
    border-top: 1px solid #D8D8D8;
}

.serviceArea,
.serviceArea .serviceArea-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}
.serviceArea  > div {
    width: 50%;
    padding-top: 20px;
    padding-bottom: 15px;
}
.serviceArea .toolTip-cont img {
    max-width: 100%;
}
.serviceArea .toolTip-caller img {
    max-width: 80%;
    margin-bottom: 5px;
}
.serviceArea .toolTip-caller .full img {
    max-width: 44%;
    margin-bottom: 5px;
}
.serviceArea.center-col1 {
    justify-content: center;
}

.planselect_flex2col {
    display: flex;
}
.planselect_flex2col > div {
    display: -ms-inline-grid;
    display: inline-grid;
    width: 50%;
}
.planselect_flex2col img {
    width: 100%;
}
.planselect_flex2col .cardtype {
    border: 1px solid #e5e5e5
}
.planselect_flex2col .cardtype a:hover {
    opacity: .6;
}

/* カード型リンクwith Amazonプライム */
/* .cardlink {
    border: 1px solid;
    position: relative;
    padding: 3px 16px 3px 5px;
} */
.cardlink a {
    display: flex;
    align-items: center;
    color: #333;
    justify-content: center;
    line-height: 1.4;;
}
/* .cardlink::after {
    content: '>';
    transform: rotate(0deg) scale(1,1.5);
    position: absolute;
    top: calc(50% + 1em);
    right: 10px;
    height: 100%;
} */
/* カード型リンクwith Amazonプライム */

.serviceBdr {
    border: 2px solid #eee;
}

.tgl img {
    width: 100%;
}
.tgl .discountArea .iconArea {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}
.tgl .discountArea .icon {
    max-width: 60%;
    margin: 0 auto;

}
.tgl .w600 {
    max-width: 600px;
    margin: 0 auto;
}

/* アコーディオン用 */
.accOpning-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    background: #fff;
}
/* アコーディオン用 */


img.pc-view {
    display: none;
}
img.sp-view {
    display: block;
}
.br-sp {
    display: block;
}
#chargeMv {
    background: url(/content/dam/au-com/mobile/charge/images/mb_charge_mv_bg-sp.png) no-repeat;
    background-size: cover;
    background-position: center top;
}

#chargeMv .MvHeader {
    background: #fe7126;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    position:relative;
    margin-bottom: 40px;
}

#chargeMv .MvHeader::before {
    content:'';
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: #fe7126;
    transform: rotate(225deg);
    position: absolute;
    left: calc(50% - 10px);
}
#chargeMv .MvHeader .white-down-arrow {
    color: #fff;
    text-decoration: underline;
}
#chargeMv .MvHeader .white-down-arrow::after {
    content: '>';
    transform: rotate(90deg) scale(1, 1.5);
    font-weight: 700;
    margin-left: 5px;
    position: absolute;
}

#chargeMv .MvHeader .MvHeader-inner {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#chargeMv .MvHeader .MvHeader-inner .b-btn:hover {
    opacity: .6;
}

#chargeMv .chargeMv-inner {
    flex-direction: column;
}


.tgl .discountAreaWrap {
    display: inherit;
}

@media screen and (min-width: 767px) and (max-width: 802px) {
    .discountArea .toolTip-section .toolTip-ctr.toolTip-bottom:after {
        top: 51px;
    }
}
@media screen and (min-width: 767px) {
    img.pc-view {
        display: block;
    }
    img.sp-view {
        display: none;
    }
    .br-sp {
        display: none;
    }
    .tgl .charge {
        width: 640px;
        margin: 0 auto;
    }
    #chargeMv {
        background: url(/content/dam/au-com/mobile/charge/images/mb_charge_mv_bg-pc.png) no-repeat;
        background-size: cover;
        background-position: center;
    }
    #chargeMv .MvHeader {
        padding: 10px 0px;
    }

    #chargeMv .chargeMv-inner {
        display: flex;
        justify-content: center;
    }
    .tgl .discountAreaWrap {
        display: flex;
        justify-content: center;
    }
    .tglWrapHeader h3 {
        font-size: 32px;
    }
    .serviceArea .toolTip-caller img {
        max-width: 40%;
    }
    .serviceArea .toolTip-caller .full img {
        max-width: 22%;
    }
}