.container-extension {margin-top: 3rem; max-width: 1200px;}
.container-extension p {font-size: 1rem;}
.block-20 {background: #E9E9E9; border-radius: 10px;display: table;}
.block-20 .block-left{display: table-cell; width: 260px;vertical-align: middle;padding: 0.3rem 0.1rem 0.3rem 0.8rem;min-width: 90px}
.block-20 .block-title {position: relative;margin: 0; font-size: 1.1rem; color: #DD2860; font-weight: bold; line-height: 1.8rem;padding-left: 20px;}
.block-20 .block-title:before {
    position: absolute;
    left: 0;
    top: 50%;
    content: " ";
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #dd2861;
}
.block-20 .block-right{display: table-cell; padding: 0.5rem 1rem;}
.rank-class {margin-left: 1rem; max-width: 860px;}
.rank-class li {position: relative;line-height: 40px;font-size: 1.05rem;font-weight: bold;padding-left: 52px;margin-bottom: 0.5rem;}
.rank-class li[class^="rank-class-"]:before {left: 0px;position: absolute;content: " ";display: inline-block;width: 40px;height: 40px; margin-right: 12px;background: url(../../images/page/extension/class_a.png); background-size: 100% 100%;}
.rank-class li.rank-class-b:before {background-image: url(../../images/page/extension/class_b.png);}
.rank-class li.rank-class-c:before {background-image: url(../../images/page/extension/class_c.png);}
.rank-class li.rank-class-d:before {background-image: url(../../images/page/extension/class_d.png);}

.row-reason {margin: 1rem 0.5rem;}
.block-21 {border: 3px solid #DD2860; border-radius: 10px;padding: 0.2rem 0.8rem 0.8rem;margin: 1rem 1rem;}
.block-21 .block-21-head {position: relative;margin: 0.5rem auto 0.8rem; text-align: center; color: #DD2860; font-size: 1.2rem;line-height: 3.5rem;border-bottom: 1px solid #DD2860;}
.block-21 .block-21-head:before{content: " ";top: 10px; left: -10px;position: relative;display: inline-block;width: 40px; height: 37px; background: url(../../images/page/extension/warning-mark.png); background-size: 100% 100%; }

.row-result {position: relative;}
.arrow-01 {background-size: 100% 100%;position :absolute; content: ""; width:32px;height: 72px; background-image: url(../../images/page/extension/arrow_01.png);top:50%;left:50%;transform: translateX(-50%) translateY(-115%)}

.block-22 {margin: 1.5rem auto;max-width: 360px;border: 2px solid #111;}
.block-22 .block-22-head {background: #111; text-align: center;}
.block-22 .block-22-head h6 {font-size: 1.08rem; line-height: 2.5rem;color: #fff; position: relative;margin: 0 auto;}
.block-22 .block-22-head h6:before {top:2px;display: inline-block; content: " "; width: 16px; height: 16px; position: relative; margin-right: 5px; background: url(../../images/page/extension/icon_01.png);}
.block-22.after .block-22-head h6:before {background-image: url(../../images/page/extension/icon_02.png);}

.block-22 .block-22-content { text-align: left; padding: 0.5rem 0.9rem;font-size: 0.95rem;min-height:6rem;}
.row-flow {overflow: visible; margin: 1.5rem 0 1.5rem -30px;}
.row-flow .flow-step {display: inline-block; width: 20%;float:left;position: relative;}
.row-flow .flow-step > div {padding: 0 0 0 30px;}
.row-flow .flow-step > div:after {top:0; left: 30px; position: absolute; content: "1"; width: 40px; height: 40px; background: #00ACD4; color: #fff; font-size: 20px; line-height: 40px; text-align: center;}
.row-flow .flow-step > div > a {display: block;position: relative;}
.row-flow .flow-step > div > a:after {content: " ";position: absolute; top:50%;left:-18px;width:8px;height: 32px; background: url(../../images/page/extension/arrow_02.png); transform: translateY(-50%)}
.row-flow .flow-step > div > p {display: block; font-size: 0.85rem; line-height: 1.4rem;min-height: 5rem;margin-top: 0.8rem;}
.row-flow .flow-step:first-child > div > a:after {display: none}
.row-flow .flow-step > div > a:before {width:100%;padding-bottom:100%;content: " ";display: block;}
.row-flow .flow-step > div > a img {position: absolute;height:100%;top:50%;left:50%;transform: translateX(-50%) translateY(-50%)}
.row-flow .flow-step:nth-child(1) > div:after {content: "1";}
.row-flow .flow-step:nth-child(2) > div:after {content: "2";}
.row-flow .flow-step:nth-child(3) > div:after {content: "3";}
.row-flow .flow-step:nth-child(4) > div:after {content: "4";}
.row-flow .flow-step:nth-child(5) > div:after {content: "5";}

.intro-video {
    margin: 2rem 0;
    text-align: center;
}
.intro-video > div {
    max-width: 720px;
    position: relative;
    margin: auto auto;
}
.intro-video > div:before {
    display: block;
    content : " ";
    width: 100%;
    padding-bottom: 56.25%;
}
.intro-video > div iframe {width: 100%; height: 100%;position:absolute;top:0;left:50%; transform: translateX(-50%)}

table.table-theme-01 {
    background: #fff;
}
.pc {display: block !important;}
.sp {display: none !important;}
@media (max-width: 1199px) {
    .row-reason {margin: auto 0;}
    .block-21 {margin: 1rem 0;}
}
@media (max-width: 991px) {
    .arrow-01 {width: 20px;height: 49px;transform: translateX(-50%) translateY(-205%)}
    .block-22 .block-22-content { min-height:7.8rem;}
}
@media (max-width: 767px) {
    .block-20 .block-left{width: 160px;}
    .block-22 .block-22-content { min-height:6rem; font-size: 0.85rem;}
    .row-result div[class^="col"]:last-child {margin-top: 2rem;}
    .row-flow .flow-step > div > p {font-size: 0.75rem; line-height: 1.2rem;}
    .row-flow .flow-step {display: block; width: 50%;}
    .row-reason {margin: auto -1rem;}
    .block-21 {margin: 1rem 0;}
    .arrow-01 {transform: translateX(-80%) translateY(-50%);width: 72px; height: 32px; background-image: url(../../images/page/extension/arrow_01_v.png)}
    table.table-theme-01 {
        font-size: 10px;
    }
    table.table-theme-01 th,table.table-theme-01 td {padding: 0.5rem 0.2rem;}
    table.table-theme-01 th:nth-child(2) { width: 55px;}
    .t-01{font-size: 12.3px;}
    .pc {display: none !important;}
    .sp {display: block !important;}
}

@media (max-width: 556px) {
    .block-20 .block-left{display: block;width: unset;padding: 0.8rem 1rem}
    .block-20 .block-right{display: block;width: unset}
    .block-20 .block-title {font-size:1rem;}
}
.mobile-app-banner {background: #fff; border-radius: 20px; border: 2px solid #222; padding: 1rem;}
.mobile-app-banner h4 {font-size: 1.1rem; font-weight: bold; text-align: center; border-bottom: 1px solid #111;}
.mobile-app-banner .col-6 {padding-left: 5px; padding-right: 5px;}
@media (max-width: 556px) {
    .mobile-app-banner img {height: 40px;}
    .mobile-app-banner h4{font-size: 0.95rem;}
}