@charset "UTF-8";

/*

    Aflac CSS
    家族に毎月届く生命保険 ＧＩＦＴ - 保障内容＆保険料例

*/


.txHighLightCase {
    color: #ae0011;
}


/* 共有スタイルのオーバーライド
----------------------------------------------- */
.description .list {
    padding-left: 1.4em;
}

/* .tableVariable
----------------------------------------------- */
.tableVariable {
    border-top: 1px solid #d9d9d9;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}
.tableVariable > .tableColumn > .tableHead {
    border-bottom: 1px solid #d9d9d9;
    background: #f6f6f6;
    font-weight: bold;
    text-align: center;
}
@media print, screen and (min-width: 768px) {   /* PC */
    .tableVariable {
        display: flex;
        font-size: 15px;
    }
    .tableVariable > .tableColumn {
        flex-grow: 1;

        display: flex;
        flex-flow: column nowrap;
    }
    .tableVariable > .tableColumn.modNotShrink {
        flex-shrink: 0;
    }
    .tableVariable > .tableColumn:not(:last-child) {
        border-right: 1px solid #d9d9d9;
    }
    .tableVariable > .tableColumn > .tableHead {
        padding: 10px 5px 5px;
    }
    .tableVariable > .tableColumn > .tableData {
        flex-grow: 1;

        display: flex;
        align-items: center;

        border-bottom: 1px solid #d9d9d9;
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {     /* SP */
    .tableVariable {
        font-size: 15px;
    }
    .tableVariable > .tableColumn > .tableHead {
        padding: 5px;
        font-size: 17px;
    }
    .tableVariable > .tableColumn > .tableData {
        border-bottom: 1px solid #d9d9d9;
        padding: 10px;
        text-align: center;
    }
}


/* .bloAccordion
----------------------------------------------- */
.bloAccordion {
    border-top: 1px solid #bfbfbf;
}
.bloAccordion.modBorderBottom {
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 15px;
}
.bloAccordion > .bloAccordionButton {
    position: relative;
    display: flex;
}
.bloAccordion > .bloAccordionButton::after {
    content: "";
    position: absolute;
    display: block;
    border-top: 2px solid #b1b1b1;
    border-right: 2px solid #b1b1b1;
    transform: rotate(135deg);
}
.bloAccordion > .bloAccordionButton.open::after {
    transform: rotate(-45deg);
}
@media print, screen and (min-width: 768px) {   /* PC */
    .bloAccordion > .bloAccordionButton {
        padding: 20px 45px 20px 55px;
        font-size: 22px;
        font-weight: bold;
    }
    .bloAccordion > .bloAccordionButton::after {
        top: calc(50% - 8px);
        right: 15px;
        width: 18px;
        height: 16px;
    }
    .bloAccordion > .bloAccordionBody {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {     /* SP */
    .bloAccordion > .bloAccordionButton {
        padding: 20px 40px 20px 20px;
        font-size: 18px;
    }
    .bloAccordion > .bloAccordionButton::after {
        top: calc(50% - 7px);
        right: 7px;
        width: 14px;
        height: 14px;
    }
    .bloAccordion > .bloAccordionBody {
        padding: 20px 10px;
    }
}


/* .imgExamples
----------------------------------------------- */
.imgExample {
    padding: 30px 0;
}
.imgExample img {
    display: block;
    margin: 0 auto;
}

/* .tableExamples
----------------------------------------------- */
.tableExamples {
    border-collapse: collapse;
    margin: 0 auto 30px;
}
.tableExamples > thead th {
    background: #aaabab;
    color: #ffffff;
}
.tableExamples > thead th.tableExamplesHeadMen {
    background: #579ed7;
}
.tableExamples > thead th.tableExamplesHeadWomen {
    background: #ed7a9b;
}
.tableExamples > tbody {
    text-align: center;
}
.tableExamples > tbody tr:nth-child(2n + 1) {
    background: #f2fcfc;
}
.tableExamples > tbody tr:nth-child(2n) {
    background: #e5f6f6;
}
.tableExamples tr > * {
    border: 1px solid #ffffff;
}

@media print, screen and (min-width: 768px) {   /* PC */
    .tableExamples {
        width: 568px;
    }
    .tableExamples > thead tr {
        height: 47px;
    }
    .tableExamples > tbody tr {
        height: 39px;
    }
}
@media only screen and (max-width: 767px) {     /* SP */
    .tableExamples {
        width: 100%;
    }
    .tableExamples tr > .tableColumnFirst {
        width: 132px;
        padding: 5px;
    }
    .tableExamples tr > * {
        padding: 5px 15px;
    }
}