@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.mainBox {
    margin: 0 auto 98px;
    max-width: 1146px;
}
.mainBox h2 {
    margin: 0 auto;
    max-width: 724px;
    position: relative;
    z-index: 5;
}
.mainBox .mainImg {
    margin-top: -191px;
}
.mainBox .listUl li {
    color: #00397A;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    border: 5px solid #0D4380;
    box-sizing: border-box;
    border-radius: 38px;
    background-color: #fff;
}
.mainBox .listUl .list01 {
    transition: all 1s;
}
.mainBox .listUl .list02 {
    transition: all 2s;
}
.mainBox .listUl li:nth-child(3n) {
    margin-right: 0;
}
@media all and (min-width: 897px) {
    .mainBox .listUl {
        margin: -99px auto 0;
        padding: 0 20px;
        max-width: 1010px;
        display: flex;
        flex-wrap: wrap;
        z-index: 23;
        position: relative;
    }
    .mainBox .listUl li {
        padding: 35px 5px 27px;
        margin-right: 32px;
        width: calc(100%/3 - 22px);
    }
}
@media all and (max-width: 896px) {
    .mainBox {
        margin-bottom: 56px;
    }
    .mainBox .mainImg {
        margin: -61px 0 22px;
    }
    .mainBox h2 {
        margin: 0 auto;
        max-width: 362px;
    }
    .mainBox .listUl {
        margin: 0 22px;
    }
    .mainBox .listUl li {
        margin-bottom: 11px;
        padding: 13px 10px 11px;
        font-size: 2rem;
        border-width: 3px;
        border-radius: 20px;
    }
    .mainBox .listUl br {
        display: none;
    }
}
.trouble {
    margin-bottom: 90px;
}
.trouble .phoUl {
    margin: 0 auto 69px;
    max-width: 982px;
    display: flex;
    flex-wrap: wrap;
}
.trouble .phoUl li {
    width: calc(100%/3);
}
.service {
    margin-bottom: 174px;
}
.service .innBox {
    margin-top: 10px;
    text-align: center;
}
.differ {
    margin-bottom: 165px;
}
.differ .comList {
    margin-bottom: 70px;
}
.differ .comList h3 {
    margin: 0 -30px 25px;
    padding-bottom: 7px;
    color: #00397a;
    font-size: 3.6rem;
    text-align: center;
    border-bottom: 5px solid #00397a;
}
.differ .comList .image {
    margin: 0 2px 20px;
}
.differ .comList .textDl {
    margin-bottom: 25px;
    padding: 18px 10px 20px;
    display: flex;
    color: #00397a;
    text-align: center;
    font-weight: bold;
    background: #EAEEF4;
    border: 1px solid #F3F3F3;
}
.differ .comList .textDl dt {
    width: 90px;
    font-size: 2.2rem;
    text-align: center;
}
.differ .comList .textDl dd {
    width: calc(100% - 100px);
    font-size: 1.4rem;
    text-align: left;
    line-height: 1.71;
}
.differ .txtUl li {
    text-indent: -1em;
    padding-left: 1.2em;
}
.differ .arrTxt {
    padding-left: 100px;
    color: #db002a;
    font-weight: bold;
    font-size: 2.4rem;
    line-height: 1.167;
    text-align: left;
    background: url(../img/index/arrow02.png) no-repeat left 22px center / 57px auto;
}
@media all and (min-width: 897px) and (max-width: 1024px) {
    .differ .comList .textDl dd {
        font-size: 1.3rem;
    }
    .differ .arrTxt {
        background-position: left center;
        padding-left: 75px;
        font-size: 2.2rem;
    }
}
@media all and (max-width: 896px) {
    .trouble {
        margin-bottom: 58px;
    }
    .trouble .phoUl {
        margin-bottom: 47px;
        max-width: 72%;
    }
    .trouble .phoUl li {
        margin-bottom: 35px;
        width: 100%;
        text-align: center;
    }
    .trouble .phoUl li:last-child {
        margin-bottom: 0;
    }
    .trouble .phoUl li img {
        max-width: 500px;
        width: 100%;
    }
    .service {
        margin-bottom: 86px;
    }
    .differ {
        margin-bottom: 77px;
    }
    .differ .headLine01 {
        margin-bottom: 55px;
    }
    .differ .comList {
        margin-bottom: 50px;
    }
    .differ .comList h3 {
        margin: 0 -25px 18px;
        font-size: 2.45rem;
        border-width: 2px;
        padding-bottom: 6px;
    }
    .differ .comList > li:not(:last-child) {
        margin-bottom: 40px;
    }
    .differ .comList .image {
        margin: 0 -2px 15px;
        text-align: center;
    }
    .differ .comList .image img {
        max-width: 500px;
        width: 100%;
    }
    .differ .comList .textDl {
        margin: 0 -2px 15px;
        padding: 12px 5px 20px;
    }
    .differ .comList .textDl dt {
        width: 64px;
        font-size: 1.45rem;
    }
    .differ .comList .textDl dd {
        width: calc(100% - 60px);
        font-size: 1.2rem;
        line-height: 1.25;
    }
    .differ .arrTxt {
        padding-left: 65px;
        font-size: 1.6rem;
        line-height: 1.1875;
        background-size: 39px auto;
        background-position: left 12px center;
    }
}
.mind {
    margin-bottom: 180px;
}
.mind .list {
    margin: 125px auto 0;
    max-width: 1128px;
    display: flex;
    justify-content: space-between;
}
.mind .list > li {
    width: calc(50% - 14px);
}
.mind .list h3 {
    margin-bottom: 46px;
    padding: 10px 10px 8px;
    color: #000;
    font-weight: bold;
    font-size: 3.6rem;
    text-align: center;
    background: #dce6f1;
}
.mind .list .image {
    margin: 0 55px 30px 45px;
}
.mind .txtUl {
    margin-left: 60px;
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.45;
}
.mind .list p {
    margin: 0 45px;
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    line-height: 30px;
    text-align: left;
    color: #000;
}
@media all and (max-width: 896px) {
    .mind {
        margin-bottom: 41px;
    }
    .mind .list {
        margin: 54px 22px 0;
        flex-wrap: wrap;
    }
    .mind .list > li {
        margin-bottom: 39px;
        width: 100%;
    }
    .mind .list h3 {
        margin-bottom: 20px;
        padding: 5px 10px;
        font-size: 1.8rem;
    }
    .mind .list .image {
        margin: 26px 43px 22px;
        text-align: center;
    }
    .mind .list .image img {
        max-width: 500px;
        width: 100%;
    }
    .mind .txtUl {
        margin: 27px 10px 0;
        font-size: 1.4rem;
        line-height: 1.428;
        display: flex;
        flex-wrap: wrap;
    }
    .mind .txtUl li {
        width: 50%;
    }
    .mind .list p {
        margin: 0 30px;
        font-size: 1.3rem;
        line-height: 1.38;
        letter-spacing: 0.03em;
    }
}
.flow {
    margin-bottom: 180px;
}
.flowList {
    margin: 127px auto 0;
    max-width: 1048px;
    display: flex;
    flex-wrap: wrap;
}
.flowList li {
    margin: 0 20px 28px;
    padding: 15px;
    width: calc((100% - 165px)/3);
    min-height: 135px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 38px;
    border: 5px solid #00397a;
    box-sizing: border-box;
}
.flowList li:nth-child(4) {
    margin-left: 70px;
}
.flowList li:nth-child(3n) {
    margin-right: 0;
}
.flowList li::after {
    right: -35px;
    top: 50%;
    position: absolute;
    width: 20px;
    height: 32px;
    background: url(../img/index/arrow03.png) no-repeat right center / 20px auto;
    transform: translateY(-50%);
    content: '';
}
.flowList li::after {
    right: -35px;
    top: 50%;
    position: absolute;
    width: 20px;
    height: 32px;
    background: url(../img/index/arrow03.png) no-repeat right center / 20px auto;
    transform: translateY(-50%);
    content: '';
}
.flowList li:last-child::after {
    display: none;
}
.flowList li:nth-child(4):before {
    left: -35px;
    top: 50%;
    position: absolute;
    width: 20px;
    height: 32px;
    background: url(../img/index/arrow03.png) no-repeat right center / 20px auto;
    transform: translateY(-50%);
    content: '';
}
.flowList .num {
    width: 40px;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
}
.flowList .num::after {
    position: absolute;
    left: 60px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background-color: #000;
    content: '';
}
.flowList .txt {
    width: calc(100% - 65px);
    font-weight: bold;
    font-size: 2.6rem;
    line-height: 1.54;
    text-align: left;
    color: #000;
}
.flowList .txt01 {
    line-height: 1.23;
}
@media all and (min-width: 897px) and (max-width: 1024px) {
    .flowList li {
        padding: 15px 10px;
    }
    .flowList .txt {
        width: calc(100% - 45px);
        font-size: 2.3rem;
    }
    .flowList .num::after {
        left: 50px;
    }
}
@media all and (max-width: 896px) {
    .flow {
        margin-bottom: 37px;
    }
    .flowList {
        margin: 44px 23px 0;
    }
    .flowList li {
        margin: 0 0 27px;
        padding: 12px;
        width: 100%;
        min-height: 68px;
        border-width: 3px;
        border-radius: 18px;
    }
    .flowList li:nth-child(4) {
        margin-left: 0;
    }
    .flowList li:nth-child(4)::before {
        display: none;
    }
    .flowList li::after {
        top: calc(100% + 2px);
        right: inherit;
        left: 50%;
        width: 16px;
        transform: translate(-50%, 0) rotate(90deg);
    }
    .flowList .num {
        width: 30px;
        font-size: 1.8rem;
    }
    .flowList .num::after {
        left: 53px;
        top: 8px;
        bottom: 7px;
    }
    .flowList .txt {
        width: calc(100% - 62px);
        font-size: 1.8rem;
        line-height: 1.11;
        text-align: left;
        color: #000;
    }
}
.faq {
    margin-bottom: 160px;
}
.faqDl {
    margin: 140px auto 90px;
    max-width: 1008px;
}
.faqDl dt {
    margin-top: 52px;
    padding: 15px 20px 10px 140px;
    position: relative;
    min-height: 105px;
    display: flex;
    align-items: center;
    color: #00397a;
    font-size: 2.8rem;
    line-height: 1.07;
    font-weight: bold;
    border-radius: 26px;
    border: 5px solid #0d4380;
    border-left: none;
    box-sizing: border-box;
    cursor: pointer;
}
.faqDl dt:nth-of-type(n+5) {
    display: none;
}
@media all and (min-width: 897px) {
    .faqDl dt:hover {
        opacity: 0.7;
    }
}
.faqDl dt::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 105px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "Q";
    font-weight: bold;
    font-size: 4rem;
    text-align: left;
    color: #fff;
    border-radius: 20px 0 0 20px;
    background-color: #0d4380;
}
.faqDl dt::after {
    content: '';
    min-height: inherit;
    font-size: 0;
}
.faqDl dd {
    padding: 18px 20px 15px 137px;
    position: relative;
    min-height: 105px;
    display: none;
    align-items: center;
    font-size: 2.4rem;
    font-weight: bold;
    border-left: none;
    box-sizing: border-box;
}
.faqDl dd::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 105px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "A";
    font-weight: bold;
    font-size: 4rem;
    text-align: left;
    color: #00397A;
    border-radius: 26px 0 0 26px;
    background-color: #DCE6F1;
}
.faqDl dd.on {
    display: flex;
}
@media all and (min-width: 897px) and (max-width: 1024px) {
    .faqDl dt {
        font-size: 2.56rem;
    }
}
@media all and (max-width: 896px) {
    .faq {
        margin-bottom: 70px;
    }
    .faqDl {
        margin: 50px 17px 48px;
    }
    .faqDl dt {
        margin-top: 22px;
        padding: 7px 5px 7px 65px;
        min-height: 34px;
        font-size: 1.3rem;
        line-height: 1.1;
        border-width: 2px;
        border-radius: 15px;
        box-sizing: border-box;
    }
    .faqDl dd {
        margin-bottom: 20px;
        padding: 10px 10px 9px 69px;
        min-height: 53px;
        font-size: 1.2rem;
        line-height: 1.25;
    }
    .faqDl dd::before, .faqDl dt::before {
        width: 53px;
        font-size: 2rem;
        border-radius: 13px 0 0 13px;
    }
    .differ .txtUl li {
        font-size: 1.15rem;
    }
}
@media all and (max-width: 374px) {
    .mind .txtUl li {
        font-size: 1.1rem;
    }
    .flowList .txt {
        font-size: 1.7rem;
    }
    .mainBox h2 {
        padding: 0 10px;
    }
}
@media all and (-ms-high-contrast:none) {
    .faqDl dt {
        min-height: 70px;
    }
}