@charset "utf-8";

@import "foundation/_setting.scss";
//==========================================================================
//customer.scss
//==========================================================================
.index {
    &__contentArea {
        padding: 50px 0 110px;
        background-color: #fff;
        @include smMax {
            padding: sm_vw(50) 0 sm_vw(200);
        }
    }
    &__box01 {
        &__inner {
            margin-top: 30px;
            @include smMax {
                margin-top: sm_vw(60);
            }
        }
    }
    .index__box01 + .index__box01 {
        margin-top: 65px;
        @include smMax {
            margin-top: sm_vw(80);
        }
    }
    &__ttl01 {
        margin-bottom: 30px;
        font-weight: 500;
        @include smMax {
            margin-bottom: sm_vw(30);
            .border02 {
                padding-bottom: sm_vw(20);
            }
        }
    }
    &__ttl02 {
        margin-bottom: 10px;
    }
    &__txt01 {
        font-size: 16px;
        margin-bottom: 10px;
        @include smMax {
            margin-bottom: sm_vw(18);
            font-size: sm_vw(30);
        }
    }
    &__txt02 {
        text-indent: -1em;
        padding-left: 1em;
        font-size: 14px;
        line-height: 2;
        color: #666;
        @include smMax {
            font-size: sm_vw(26);
            line-height: 1.8;
        }
    }
    &__txt03 {
        font-size: 14px;
        line-height: 2;
        color: #666;
        @include smMax {
            font-size: sm_vw(26);
            line-height: 1.8;
        }
    }
    &__txt04 {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.6;
        color: #014099;
        text-align: center;
        @include smMax {
            font-size: sm_vw(26);
            line-height: 1.5;
        }
        .border {
            margin-top: 30px;
            padding: 17px 85px;
            display: inline-block;
            border: 1px solid #014099;
            @include smMax {
                margin-top: sm_vw(40);
                padding: sm_vw(20) 0 sm_vw(20) sm_vw(10);
                display: block;
            }
        }
    }
    &__btn01 {
        margin: 45px auto 0;
        width: 440px;
        @include smMax {
            margin: sm_vw(50) auto 0;
            width: 100%;
        }
    }
}

.dfx {
    &__contentArea {
        padding: 60px 0 120px;
        background-color: #fff;
        @include smMax {
            padding: sm_vw(60) 0 sm_vw(190);
        }
    }
    &__tabs {
        display: flex;
        margin-bottom: 60px;
        @include smMax {
            margin-bottom: sm_vw(50);
            flex-wrap: wrap;
        }
        li {
            font-weight: 500;
            @include smMin {
                height: 72px;
                font-size: 16px;
                flex: 1;
                margin-right: 12px;
                &:last-child {
                    margin-right: 0;
                }
            }
            @include smMax {
                width: sm_vw(210);
                height: sm_vw(100);
                font-size: sm_vw(22);
                margin-right: sm_vw(20);
                &:nth-child(3n) {
                    margin-right: 0;
                }
                &:nth-child(n+4) {
                    margin-top: sm_vw(20);
                }
            }
            a {
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                border: 1px solid $colorBorder;
                &.current {
                    color: #fff;
                    background-color: $colorBlue;
                    border-color: $colorBlue;
                }
                @include hover {
                    color: #fff;
                    background-color: $colorBlue;
                    border-color: $colorBlue;
                }
            }
        }
    }
    &__ttl01 {
        font-weight: 500;
    }

    &__table01 {
        width: 100%;
        th {
            padding: 25px 0;
            width: 160px;
            font-size: 18px;
            font-weight: 500;
            text-align: left;
            border-bottom: 1px solid $colorBorder;
            @include smMax {
                display: block;
                border-bottom: none;
                padding: sm_vw(20) 0 sm_vw(15);
                font-size: sm_vw(30);
            }
        }
        td {
            padding: 25px 0;
            text-align: left;
            border-bottom: 1px solid $colorBorder;
            @include smMax {
                padding: 0 0 sm_vw(20);
                display: block;
            }
        }
    }
    &__list01 {
        font-size: 0;
        li {
            display: inline-block;
            margin: 3px 40px 3px 0;
            font-size: 16px;
            font-weight: 400;
            @include smMax {
                font-size: sm_vw(28);
                margin: sm_vw(17) sm_vw(30) sm_vw(17) 0;
            }
            a {
                color: $colorBlue;
                @include hover {
                    text-decoration: underline;
                }
                .ico {
                    position: relative;
                    display: inline;
                    padding-left: 15px;
                    @include smMax {
                        padding-left: sm_vw(25);
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        top: 0.45em;
                        left: 0;
                        width: 8px;
                        height: 12px;
                        transform: rotate(180deg);
                        background: transparent url("../images/ico_arrow01.svg") 0 0 no-repeat;
                        background-size: 100% 100%;
                        @include smMax {
                            top: 0.4em;
                            width: sm_vw(12);
                            height: sm_vw(20);
                        }
                    }
                }
            }
        }
    }

    .dfx__tabsBox + .dfx__tabsBox {
        margin-top: 50px;
        @include smMax {
            margin-top: sm_vw(60);
        }
    }

    &__btnBack {
        margin: 50px auto 0;
        width: 440px;
        @include smMax {
            margin-top: sm_vw(100);
            width: 100%;
        }
    }
    

    &__tabsOuter {
        position: relative;
    }
    &__tabsInner {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        display: none;
        &:nth-child(1) {
            position: relative;
            display: block;
        }
    }
}

.detail {
    &__contentArea {
        padding: 50px 0 90px;
        background-color: #fff;
        @include smMax {
            padding: sm_vw(50) 0 sm_vw(200);
        }
    }
    &__inner {
        position: relative;
    }
    .detail__box01 + .detail__box01 {
        margin-top: 30px;
        @include smMax {
            margin-top: sm_vw(30);
        }
    }
    .detail__box01 + .detail__ttl01 {
        margin-top: 40px;
        @include smMax {
            margin-top: sm_vw(40);
        }
    }
    &__ttl01 {
        margin-bottom: 30px;
        @include smMax {
            margin-bottom: sm_vw(20);
        }
    }
    &__ttl02 {
        margin-bottom: 15px;
        @include smMax {
            margin-bottom: sm_vw(15);
        }
    }
    &__txt01 {
        font-size: 16px;
        @include smMax {
            font-size: sm_vw(30);
            line-height: 1.8;
        }
    }
    &__list01 {
        margin-top: 10px;
        @include smMax {
            margin-top: sm_vw(20);
        }
        li {
            font-size: 14px;
            color: #666;
            @include smMax {
                font-size: sm_vw(26);
            }
        }
    }
    &__list02 {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        @include smMin {
            margin: 0 -10px;
        }
        li {
            line-height: 1.2;
            @include smMin {
                width: calc(100% / 4);
                padding: 0 10px;
                &:nth-child(n+5) {
                    margin-top: 20px;
                }
                @media screen and (max-width: 1140px) {
                    width: calc(100% / 3);
                    &:nth-child(n+4) {
                        margin-top: 20px;
                    }
                }
                @media screen and (max-width: 920px) {
                    width: calc(100% / 2);
                    &:nth-child(n+3) {
                        margin-top: 20px;
                    }
                }
            }
            @include smMax {
                margin-right: sm_vw(20);
                width: sm_vw(325);
                &:nth-child(2n) {
                    margin-right: 0;
                }
                &:nth-child(n+3) {
                    margin-top: sm_vw(20);
                }
            }
            .c-btn-01 {
                font-size: 18px;
                border-radius: 4px;
                @include smMax {
                    font-size: sm_vw(28);
                    border-radius: sm_vw(4);
                }
                &.is-large {
                    @include smMax {
                        height: sm_vw(120);
                    }
                }
                .ico {
                    &.is-arrow02 {
                        @include smMax {
                            padding-right: sm_vw(10);
                        }
                        &::before {
                            right: 20px;
                            @include smMax {
                                right: sm_vw(22);
                                width: sm_vw(9);
                                height: sm_vw(15);
                            }
                        }
                    }
                }
            }
        }
    }
}

.about_system {
    &__contentArea {
        padding: 50px 0 90px;
        background-color: #fff;
        @include smMax {
            padding: sm_vw(50) 0 sm_vw(200);
        }
    }
    &__inner {
        position: relative;
    }
    .about_system__box01 + .about_system__box01 {
        margin-top: 50px;
        @include smMax {
            margin-top: sm_vw(68);
        }
    }
    .about_system__box01 + .about_system__box02 {
        margin-top: 82px;
        @include smMax {
            margin-top: sm_vw(122);
        }
    }
    &__txt01 {
        font-size: 16px;
        @include smMax {
            font-size: sm_vw(30);
            line-height: 1.8;
        }
    }
    &__list01 {
        margin: 48px 0 0 -20px;
        display: flex;
        flex-wrap: wrap;
        width: 1120px;
        @include smMax {
            margin: sm_vw(56) 0 0 0;
            width: 100%;
        }
        li {
            position: relative;
            padding-top: 150px;
            width: 224px;
            text-align: center;
            @include smMax {
                padding-top: sm_vw(200);
                width: 50%;
                &:nth-child(n+3) {
                    margin-top: sm_vw(64);
                }
            }
            &::before {
                content: "";
                position: absolute;
                top: 0;
                right: 50%;
                transform: translateX(50%);
                width: 150px;
                height: 150px;
                border-radius: 100vh;
                border: 1px solid $colorBorder;
                @include smMax {
                    width: sm_vw(200);
                    height: sm_vw(200);
                }
            }
            &::after {
                content: "";
                position: absolute;
                top: 0;
                right: 50%;
                transform: translateX(50%);
                width: 150px;
                height: 150px;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                @include smMax {
                    width: sm_vw(200);
                    height: sm_vw(200);
                }
            }
            &.ico__speed {
                &::after {
                    background-image: url("../images/ico_speed.png");
                    background-size: 68px auto;
                    @include smMax {
                        background-size: sm_vw(94) auto;
                    }
                }
            }
            &.ico__note {
                &::after {
                    background-image: url("../images/ico_note.png");
                    background-size: 45px auto;
                    @include smMax {
                        background-size: sm_vw(63) auto;
                    }
                }
            }
            &.ico__truck {
                &::after {
                    background-image: url("../images/ico_truck.png");
                    background-size: 66px auto;
                    @include smMax {
                        background-size: sm_vw(82) auto;
                    }
                }
            }
            &.ico__box {
                &::after {
                    background-image: url("../images/ico_box.png");
                    background-size: 63px auto;
                    @include smMax {
                        background-size: sm_vw(74) auto;
                    }
                }
            }
            &.ico__free {
                &::after {
                    background-image: url("../images/ico_free.png");
                    background-size: 70px auto;
                    @include smMax {
                        background-size: sm_vw(82) auto;
                    }
                }
            }
            .ttl {
                margin-top: 28px;
                font-size: 22px;
                font-weight: 700;
                color: $colorBlue;
                line-height: 1.5;
                @include smMax {
                    margin-top: sm_vw(22);
                    font-size: sm_vw(30);
                }
            }
            .txt {
                margin-top: 8px;
                font-size: 16px;
                line-height: 1.87;
                @include smMax {
                    margin-top: sm_vw(6);
                    font-size: sm_vw(24);
                    line-height: 1.5;
                }
            }
        }
        @include smMin {
            @media screen and (max-width: 1120px) {
                width: 896px;
                margin: 48px auto 0;
                li {
                    &:nth-child(n+5) {
                        margin-top: 40px;
                    }
                }
            }
            @media screen and (max-width: 896px) {
                width: 672px;
                margin: 48px auto 0;
                li {
                    &:nth-child(n+4) {
                        margin-top: 40px;
                    }
                }
            }
        }
    }
    &__list02 {
        margin: 59px 13px 0;
        counter-reset: number 0;
        @include smMax {
            margin: sm_vw(68) sm_vw(12) 0;
        }
        li {
            position: relative;
            padding-left: 72px;
            font-size: 16px;
            line-height: 3.125;
            @include smMax {
                padding-left: sm_vw(85);
                font-size: sm_vw(30);
                line-height: 1.85;
            }
            &::before {
                content: "";
                position: absolute;
                top: 9px;
                left: 0;
                width: 36px;
                height: 36px;
                background-color: $colorBlue;
                @include smMax {
                    top: sm_vw(4);
                    width: sm_vw(50);
                    height: sm_vw(50);
                }
            }
            &::after {
                counter-increment: number 1;
                content: counter(number);
                position: absolute;
                top: 9px;
                left: 0;
                width: 36px;
                height: 36px;
                font-size: 19px;
                font-family: $font-en01;
                font-weight: 400;
                color: #fff;
                line-height: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                @include smMax {
                    top: sm_vw(4);
                    width: sm_vw(50);
                    height: sm_vw(50);
                    font-size: sm_vw(30);
                }
            }
            + li {
                margin-top: 36px;
                @include smMax {
                    margin-top: sm_vw(60);
                }
            }
            a {
                position: relative;
                color: $colorBlue;
                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background-color: $colorBlue;
                }
                @include hover {
                    &::before {
                        opacity: 0;
                    }
                }
            }
        }
    }
    &__btn {
        margin: 73px auto 0;
        width: 445px;
        @include smMax {
            margin: sm_vw(76) auto 0;
            width: sm_vw(670);
        }
    }
}