@charset "utf-8";

/* PC用 */
@media screen and (min-width: 561px) {
.modal-content {
    display: block;
    margin: 2% auto;
    max-width: 580px;
    padding: 2% 4%;
    box-sizing: content-box;
}
.modal-content * {
    box-sizing: border-box;
}
.modal-content section {
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1.4;
}
.section-titile {
    background-color: #f9f7f7;
    border-left: 4px solid #f7660d;
    color: #333;
    font-size: 1.4em;
    letter-spacing: 2px;
    line-height: 1;
    padding: .6em 0 .6em 1.2em;
    margin-bottom: 20px;
}
.box-contents {
    display: table;
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.table-list {
    border: 1px #c0c0c0;
    border-style: none solid solid none;
    /*    border-collapse: collapse;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}
.table-list .list-item {
    display: inline-block;
    border-left: 1px solid #c0c0c0;
}
.table-list.item-col2 .list-item {
    width: 50%;
}
.table-list.item-col3 .list-item {
    width: 33.3333%;
}

.box-contents .head,
.table-list .head {
    border: 1px #c0c0c0;
    border-style: solid none solid none;
    display: block;
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
}

.box-contents .head {
    background-color: #2d63a3;
    color: #fff;
    font-size: 1.2em;
    padding: .6em 0;
}
.table-list .head {
    background-color: #f1f1f1;
    color: #333;
    font-size: 1em;
    padding: .5em 0;
}

.box-contents .inner-box,
.table-list .inner-box {
    padding: 4%;
}
.inner-box img,
.img-box img {
    align-self: center;
    display: block;
    max-width: 100%;
    margin: auto;
}
.table-list .inner-box img {
    margin: 0 auto 8px; 
}

.table-list .item-text,
.item-flex .text-box {
    padding-bottom: 0;
    font-size: 14px;
}
.inner-box > .item-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.inner-box > .item-flex:not(.flex-column) {
    margin-bottom: 20px;
}
.item-flex.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.item-flex:not(.flex-column) .img-box {
    border: 2px solid #e8e8e8;
}
.item-flex:not(.flex-column) .img-box {
    width: 50%;
}
.item-flex:not(.flex-column) .text-box {
    width: 48%;
}
.comparison-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 6em;
}
.bg-merit,
.bg-demerit {
    min-height: 6em;
    text-align: center;
    position: relative;
    width: 5%;
}
.bg-merit .titile,
.bg-demerit .titile {
    color: #fff;
    font-size: 14px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.bg-merit {
    background-color: #ed6b1d;
}
.bg-demerit {
    background-color: #9f9f9f;
}
.box-merit,
.box-demerit {
    padding: 3%;
    width: 95%;
}
.box-merit {
    background-color: #faf0df;
}
.box-demerit {
    background-color: #f0f0f0;
}
.comparison-box li {
    font-size: .95em;
    letter-spacing: .5px;
    line-height: 1.6;
    list-style: inside;
}
.comparison-box .small-font {
    padding-bottom: 0;
}

.list-emphasis strong,
.list-emphasis.style-number li::before {
    color: #d10002;
    font-size: 1.1em;
    font-weight: bold;
}
.style-number li {
    counter-increment: number;
}
.style-number li::before {
    content: counter(number)".";
}
}


/* スマホ用 */
@media screen and (max-width: 560px) {

.modal-content {
display: block;
margin: 2% auto;
padding: 2% 4%;
box-sizing: content-box;
}
.modal-content * {
box-sizing: border-box;
}
.modal-content section {
font-size: 12px;
letter-spacing: .5px;
line-height: 1.4;
}
.section-titile {
    background-color: #f9f7f7;
    border-left: 4px solid #f7660d;
    color: #333;
    font-size: 1.1em;
    letter-spacing: 1px;
    line-height: 1;
    padding: .8em 0 .8em .7em;
    margin-bottom: 10px;
    }
.box-contents {
display: table;
border: 1px solid #c0c0c0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.table-list {
border: 1px #c0c0c0;
border-style: none solid solid none;
/*    border-collapse: collapse;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.table-list .list-item {
display: inline-block;
border-left: 1px solid #c0c0c0;
}
.item-col2 .list-item {
    width: 50%;
}
.item-col3 .list-item {
    width: 33.3333%;
}
.table-list.sm-12 .list-item {
    width: 100%;
}
.box-contents .head,
.table-list .head {
border: 1px #c0c0c0;
border-style: solid none solid none;
display: block;
text-align: center;
letter-spacing: 1px;
font-weight: bold;
}

.box-contents .head {
background-color: #2d63a3;
color: #fff;
font-size: 1em;
padding: .6em 0;
}
.table-list .head {
background-color: #f1f1f1;
color: #333;
font-size: 1em;
padding: .5em 0;
}

.box-contents .inner-box,
.table-list .inner-box {
padding: 4%;
}
.inner-box img,
.img-box img {
align-self: center;
display: block;
max-width: 100%;
margin: auto;
}
.table-list .inner-box img {
margin: 0 auto 8px; 
}

.table-list .item-text,
.item-flex .text-box {
padding-bottom: 0;
font-size: 12px;
}
.inner-box > .item-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
.inner-box > .item-flex:not(.flex-column) {
margin-bottom: 20px;
}
.inner-box > .item-flex,
.item-flex.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.item-flex:not(.flex-column) .img-box {
border: 2px solid #e8e8e8;
    margin-bottom: 8px;
}
/*
.item-flex:not(.flex-column) .img-box {
width: 50%;
}
.item-flex:not(.flex-column) .text-box {
width: 48%;
}
*/
.comparison-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
    .bg-merit,
    .bg-demerit {
        height: 18px;
        text-align: center;
        position: relative;
        width: 100%;
    }
    .bg-merit .titile,
    .bg-demerit .titile {
        color: #fff;
        font-size: 12px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
.bg-merit {
background-color: #ed6b1d;
}
.bg-demerit {
background-color: #9f9f9f;
}
.box-merit,
.box-demerit {
padding: 4%;
width: 100%;
}
.box-merit {
background-color: #faf0df;
}
.box-demerit {
background-color: #f0f0f0;
}
    .comparison-box li {
        font-size: .94em;
        letter-spacing: .3px;
        line-height: 1.4;
        list-style: inside;
        padding-bottom: 5px;
    }
.comparison-box .small-font {
padding-bottom: 0;
}

.list-emphasis strong,
.list-emphasis.style-number li::before {
color: #d10002;
font-size: 1.1em;
font-weight: bold;
}
.style-number li {
counter-increment: number;
    padding-bottom: 6px;
}
.style-number li::before {
content: counter(number)".";
}

}