@charset "utf-8";

.anshin-ico {
        position: absolute;
        bottom: 0;
        right: 10%;
        width: 10%;
}

.anshin-system-ico {
        width: 100%;
}

.anshin-top-text {
        margin-bottom: 2rem;
}

.system-h {
        margin: 2rem auto;
}

#system h3 {
        padding: 1rem;
        font-family: 'Kiwi Maru', serif;
        font-weight: normal;
        color: #ffffff;
        background-color: #9cca54;
}

.system-flex {
        display: flex;
        justify-content: space-between;
}

.system-title-box {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 60%;
}

#system .step {
        width: 100%;
        padding: 12px;
        margin: 1rem auto;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.title-style {
        width: 30%;
        margin-left: 1rem;
}

.circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 11.5rem;
        height: 11.5rem;
        background-color: #9cca54;
        border: 1px solid #9cca54;
        border-radius: 50%;
        text-align: center;
}

#system .step h4 {
        color: #ffffff;
        font-size: 1.8rem;
        font-weight: bold;
}

.text-style {
        width: 70%;
}

#system .step span {
        color: #c93a40;
}

#system .arrow {
        text-align: center;
        font-size: 2em;
        color: #9cca54;
}

.system-img-box {
        width: 35%;
        margin: 1rem;
}

.system-img-style {
        width: 100%;
        object-fit: contain;
}

.point-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5rem;
}

.system-flex-point {
        width: 32.5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f1ffda;
        padding: 2rem;
        border-radius: 12px;
}

.point-img {
        width: 100%;
}

.point-number {
        font-family: 'Kiwi Maru', serif;
        font-size: 2.2rem;
        font-weight: bold;
        color: #f19143;
}

.point-box-title {
        margin-bottom: 1rem;
        font-family: 'Kiwi Maru', serif;
        color: #f19143;
        font-size: 1.8rem;
}

#system .check-box2 h4 {
        font-family: 'Kiwi Maru', serif;
        font-size: 1.8rem;
        font-weight: bold;
        color: #f19143;
        margin-top: 0;
}

.check-box2 {
        background-color: #f1ffda;
        padding: 2rem;
        border-radius: 12px;
}

.system-car {
        background-image: url(../images/matinami.png);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: 100% auto;
}

.system-wrap {
        justify-content: space-between;
}

.car-text-bgc {
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 5px;
}

#system .check-box2 .car-text-bgc h4 {
        color: #f19143;
}

.system-car-img,
.staff-wrap {
        text-align: center;
}

.car-img,
.staff-img {
        width: 60%;
}

.support-link-wrap {
        margin-top: 5rem;
}

.btn-copy {
        font-size: 1.5rem;
        font-weight: bold;
        position: relative;
        margin-bottom: .2em;
        text-align: center;
}

.btn-copy:before {
        margin-right: 1rem;
        content: '＼';
}

.btn-copy:after {
        margin-left: 1rem;
        content: '／';
}

.support-btn {
        text-align: center;
}

.btn-link {
        display: inline-block;
        padding: 1rem 6rem;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-family: 'Kiwi Maru', serif;
        font-size: 1.6rem;
        border-radius: 100vh;
        color: #9cca54;
        background-color: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.btn-link:hover {
        color: #fff;
        background: #9cca54;
        border: 2px solid #ffffff;
        transition: all 0.3s;
}

@media screen and (max-width:768px) {

        .pc {
                display: none;
        }

        .system-flex,
        .system-flex2,
        .system-title-box {
                display: block;
        }

        .system-title-box,
        .title-style,
        .text-style {
                width: 100%;
        }

        .system-title-box {
                margin-bottom: 1rem;
        }

        .title-style {
                margin: 1rem 0;
        }

        .circle {
                width: 100%;
                height: auto;
                padding: 1rem 2rem;
                border-radius: 12px;
        }

        .point-box {
                display: block;
                margin-bottom: 1rem;
        }

        .system-flex-point {
                width: 100%;
                margin-bottom: 1rem;
        }

        .system-img-box {
                width: 100%;
                margin: 0;
        }

        .system-img-box img {
                width: 100%;
        }

        .system-flex-car {
                padding: 2rem;
        }

        .system-car-img {
                width: 80%;
                margin: 0 auto;
        }

        .car-img {
                width: 70%;
        }

        .staff-img {
                width: 30%;
        }

        .system-flex-staff {
                padding: 1rem;
        }

        .staff-img {
                padding-left: 1rem;
        }

        .fa-arrow-right {
                transform: rotate(90deg);
        }

        .support-link-wrap {
                margin-top: 2rem;
        }
}