@charset 'utf-8';

.title { margin-bottom:50px; }
.dl_merit { width:120%; display:flex; justify-content: space-between; flex-wrap:wrap; margin:0 -10%; }
.dl_merit dt.balloon-right {width:80%; margin:0 10%; position: relative;display: inline-block;background-color: #fff;border: solid 2px #525252;padding: 16px; text-align: center;border-radius:7px; }
.dl_merit dt.balloon-right:before{content: ""; position: absolute;top: 100%; left:50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
.dl_merit dt.balloon-right:after{content: ""; position: absolute;top: 100%; left:50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
.dl_merit dt.balloon-right:before {border: solid 12px transparent;border-top: solid 12px #525252;}
.dl_merit dt.balloon-right:after {border: solid 14px transparent;border-top: solid 14px #fff; margin-top: -5px;}
.dl_merit dt.balloon-right img { display:none; }
.dl_merit dd { width:80%;  padding:30px 0; margin:0 10%;}
.dl_merit dd div { width:100%; }
.dl_merit dd div img { width:100%; }
@media screen and (min-width:740px) {
    .dl_merit dd div img { width:60%; margin:30px 20% 0 20%; }
}
.st_merit { width:100%; color:#F78824; font-size:24px; display:inline-block; }
.st_merit small { font-size:14px; }
.st_demerit { color:#24C6F7;}
.border { display:none;}

.gray { background:#F6F6F6; padding:30px 0 0 0; margin-bottom:30px; }

@media screen and (min-width:840px) {
    .border { margin:10px 0; display:block; }
    .dl_merit { width:100%; display:flex; justify-content: space-between; flex-wrap:nowrap; margin:0; }
    .dl_merit dt.balloon-right { width:100%; padding:20px; text-align:center; margin:0 20% 0 0; position: relative;display: inline-block; max-width: 100%;color: #000;font-size: 16px;background: #FFF;border: solid 0px #000;box-sizing: border-box;border-radius:0px; }
    .dl_merit dt.balloon-right:before {content:none;position: absolute;top: 50%;right: -36px; left:initial; margin-top: -12px;border: 12px solid transparent;border-left: 12px solid #FFF;z-index: 2;}
    .dl_merit dt.balloon-right:after {content:none;position: absolute;top: 50%;right: -44px; left:initial;margin-top: -14px;border: 14px solid transparent;border-left: 14px solid #000;z-index: 1;}
    .dl_merit dt.balloon-right strong { width:100%; display:inline-block; margin-bottom:20px; }
    .dl_merit dt.balloon-right span { width:100%; display:inline-block; }
    .dl_merit dt.balloon-right img { width:100px; display:inline-block;  }
    .dl_merit dt.balloon-right { width:28%; padding:30px 20px 40px 0; text-align:center; margin-right:20px; position: relative;display: inline-block; max-width: 100%;color: #000;font-size: 16px;background: #FFF;
    background:url(../img/fukidashi_right.svg)no-repeat; }
    .dl_merit dt.balloon-right.demerit{ width:28%; padding:30px 0 40px 0; text-align:center; margin-right:20px; position: relative;display: inline-block; max-width: 100%;color: #000;font-size: 16px;background: #FFF;
        background:url(../img/fukidashi_s.svg)no-repeat; }
    
    .dl_merit dd { width:73%;  padding:30px 0 0 0; display:flex; justify-content: space-between; margin:0; }
    .dl_merit dd div { width:48%; }
    .dl_merit dd div img { width:80%; }
    .gray { background:none; margin:0; padding:0; }
}