@charset "UTF-8";

/* about */
.about {
    padding: 85px 0 25px;
    text-align: center;
}

.about .inner {
    width: 880px;
}

.about-box-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 830px;
    margin: 70px auto 0;
}

.about-box {
    width: 260px;
    margin-bottom: 65px;
}

.scroll-anime-start .about-box:nth-child(1) {
    animation: fade-in-bottom 0.5s 0.5s forwards;
}

.scroll-anime-start .about-box:nth-child(2) {
    animation: fade-in-bottom 0.5s 0.7s forwards;
}

.scroll-anime-start .about-box:nth-child(3) {
    animation: fade-in-bottom 0.5s 0.9s forwards;
}

.about-box-img {
    width: 168px;
    margin: 0 auto;
}

.about-box-txt-area {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 20px;
}

.about-box-head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.about-box-txt {
    height: 110px;
    margin-top: 20px;
    text-align: left;
    line-height: 1.7;
}

.about-box-btn {
    width: 172px;
    height: 42px;
    margin: 30px auto;
}

.about-box-btn-inner {
    font-size: 14px;
}

.about-box-btn-inner::after {
    top: 13px;
    transform: rotate(135deg);
}

.about-box-btn-inner:hover:after {
    top: 16px;
    right: 25px;
}

@media (max-width: 1100px) {
    .about {
        padding: calc(85vw / 1100 * 100) 0 calc(25vw / 1100 * 100);
    }

    .about .inner {
        width: calc(880vw / 1100 * 100);
    }

    .about-box-list {
        width: calc(830vw / 1100 * 100);
        margin: calc(70vw / 1100 * 100) auto 0;
    }

    .about-box {
        width: calc(260vw / 1100 * 100);
        margin-bottom: calc(65vw / 1100 * 100);
    }

    .about-box-img {
        width: calc(168vw / 1100 * 100);
    }

    .about-box-txt-area {
        margin-top: calc(20vw / 1100 * 100);
    }

    .about-box-head {
        font-size: calc(20vw / 1100 * 100);
    }

    .about-box-txt {
        height: calc(110vw / 1100 * 100);
        margin-top: calc(20vw / 1100 * 100);
    }

    .about-box-btn {
        width: calc(172vw / 1100 * 100);
        height: calc(42vw / 1100 * 100);
        margin: calc(30vw / 1100 * 100) auto;
    }

    .about-box-btn-inner {
        font-size: calc(14vw / 1100 * 100);
    }

    .about-box-btn-inner::after {
        top: calc(13vw / 1100 * 100);
    }

    .about-box-btn-inner:hover:after {
        top: calc(16vw / 1100 * 100);
        right: calc(25vw / 1100 * 100);
    }
}

@media (max-width: 750px) {
    .about {
        padding: calc(105vw / 750 * 100) 0 calc(45vw / 750 * 100);
    }

    .about .inner {
        width: calc(660vw / 750 * 100);
    }

    .about-box-list {
        display: block;
        width: 100%;
        margin: calc(100vw / 750 * 100) auto 0;
    }

    .about-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: calc(65vw / 750 * 100);
    }

    .about-box-img {
        width: calc(199vw / 750 * 100);
        margin: calc(30vw / 750 * 100) 0 0;
    }

    .about-box-txt-area {
        display: block;
        width: calc(430vw / 750 * 100);
        margin-top: calc(20vw / 750 * 100);
    }

    .about-box-head {
        display: block;
        font-size: calc(35vw / 750 * 100);
        text-align: left;
    }

    .about-box-txt {
        height: calc(110vw / 750 * 100);
        margin-top: calc(20vw / 750 * 100);
        font-size: calc(27vw / 750 * 100);
    }

    .about-box-btn {
        width: 100%;
        height: calc(95vw / 750 * 100);
        margin: calc(105vw / 750 * 100) auto 0;
    }

    .about-box-btn-inner {
        font-size: calc(26vw / 750 * 100);
    }

    .about-box-btn-inner::after {
        top: calc(30vw / 750 * 100);
        right: calc(89vw / 750 * 100);
    }

    .about-box-btn-inner:hover:after {
        top: calc(16vw / 750 * 100);
        right: calc(25vw / 750 * 100);
    }
}

/* intro */
.intro {
    background-color: #fff8f3;
    padding: 80px 0 125px;
}

.intro .inner {
    width: 870px;
}

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

.intro-box+.intro-box {
    margin-top: 85px;
}

.intro-box-txt-area {
    width: 390px;
}

.intro-box-sub-head {
    font-size: 20px;
    font-weight: bold;
    color: #6c6c6c;
}

.intro-box-head {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #ed582d;
}

.intro-box-txt {
    margin-top: 15px;
    line-height: 1.7;
}

.intro-box-notes {
    margin-top: 20px;
    font-size: 12px;
}

.intro-box-img {
    width: 386px;
    margin: 35px auto 0;
}

.intro-box:nth-child(2) .intro-box-img {
    width: 326px;
    margin: 5px auto 0;
}

@media (max-width: 1100px) {
    .intro {
        padding: calc(80vw / 1100 * 100) 0 calc(125vw / 1100 * 100);
    }

    .intro .inner {
        width: calc(870vw / 1100 * 100);
    }

    .intro-box+.intro-box {
        margin-top: calc(85vw / 1100 * 100);
    }

    .intro-box-txt-area {
        width: calc(390vw / 1100 * 100);
    }

    .intro-box-sub-head {
        font-size: calc(20vw / 1100 * 100);
    }

    .intro-box-head {
        margin-top: calc(10vw / 1100 * 100);
        font-size: calc(24vw / 1100 * 100);
    }

    .intro-box-txt {
        margin-top: calc(15vw / 1100 * 100);
    }

    .intro-box-notes {
        margin-top: calc(20vw / 1100 * 100);
        font-size: calc(12vw / 1100 * 100);
    }

    .intro-box-img {
        width: calc(386vw / 1100 * 100);
        margin: calc(35vw / 1100 * 100) auto 0;
    }

    .intro-box:nth-child(2) .intro-box-img {
        width: calc(326vw / 1100 * 100);
        margin: calc(5vw / 1100 * 100) auto 0;
    }
}

@media (max-width: 750px) {
    .intro {
        padding: calc(120vw / 750 * 100) 0 calc(125vw / 750 * 100);
    }

    .intro .inner {
        width: calc(660vw / 750 * 100);
    }

    .intro-box {
        position: relative;
        display: block;
    }

    .intro-box+.intro-box {
        margin-top: calc(105vw / 750 * 100);
    }

    .intro-box-txt-area {
        width: 100%;
    }

    .intro-box-sub-head {
        font-size: calc(32vw / 750 * 100);
        text-align: center;
    }

    .intro-box-head {
        margin: calc(15vw / 750 * 100) auto calc(550vw / 750 * 100);
        font-size: calc(38vw / 750 * 100);
        text-align: center;
    }

    .intro-box:nth-child(2) .intro-box-head {
        margin: calc(15vw / 750 * 100) auto calc(520vw / 750 * 100);
    }

    .intro-box:nth-child(3) .intro-box-head {
        margin: calc(15vw / 750 * 100) auto calc(605vw / 750 * 100);
    }

    .intro-box-txt {
        margin-top: calc(10vw / 750 * 100);
        font-size: calc(28vw / 750 * 100);
    }

    .intro-box-notes {
        margin-top: calc(20vw / 750 * 100);
        font-size: calc(20vw / 750 * 100);
    }

    .intro-box-img {
        position: absolute;
        top: calc(190vw / 750 * 100);
        left: 0;
        right: 0;
        width: 100%;
        margin: calc(35vw / 750 * 100) auto 0;
    }

    .intro-box:nth-child(2) .intro-box-img {
        width: 100%;
        margin: calc(35vw / 750 * 100) auto 0;
    }
}

/* example */
.example {
    background-color: #f5f5f5;
    padding: 60px 0;
}

.example .inner {
    width: 870px;
}

.example-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.example-box-img {
    width: 300px;
}

.example-box-txt-area {
    width: 510px;
}

.example-box-head {
    font-size: 24px;
    font-weight: bold;
}

.example-box-name {
    margin-top: 10px;
    font-weight: bold;
}

.example-box-txt {
    margin-top: 30px;
    line-height: 1.7;
}

.example-btn {
    width: 235px;
    margin: 50px auto 0;
}

.example-btn-inner::after {
    right: 20px;
}

.example-btn-inner:hover:after {
    right: 15px;
}

@media (max-width: 1100px) {
    .example {
        padding: calc(60vw / 1100 * 100) 0;
    }

    .example .inner {
        width: calc(870vw / 1100 * 100);
    }

    .example-box-img {
        width: calc(300vw / 1100 * 100);
    }

    .example-box-txt-area {
        width: calc(510vw / 1100 * 100);
    }

    .example-box-head {
        font-size: calc(24vw / 1100 * 100);
    }

    .example-box-name {
        margin-top: calc(10vw / 1100 * 100);
    }

    .example-box-txt {
        margin-top: calc(30vw / 1100 * 100);
    }

    .example-btn {
        width: calc(235vw / 1100 * 100);
        margin: calc(50vw / 1100 * 100) auto 0;
    }

    .example-btn-inner::after {
        right: calc(20vw / 1100 * 100);
    }

    .example-btn-inner:hover:after {
        right: calc(15vw / 1100 * 100);
    }
}

@media (max-width: 750px) {
    .example {
        padding: calc(50vw / 750 * 100) 0 calc(130vw / 750 * 100);
    }

    .example .inner {
        width: calc(630vw / 750 * 100);
    }

    .example-box {
        display: block;
    }

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

    .example-box-txt-area {
        width: 100%;
        margin-top: calc(50vw / 750 * 100);
    }

    .example-box-head {
        font-size: calc(34vw / 750 * 100);
    }

    .example-box-name {
        margin-top: calc(30vw / 750 * 100);
        font-size: calc(30vw / 750 * 100);
    }

    .example-box-txt {
        margin-top: calc(20vw / 750 * 100);
        font-size: calc(26vw / 750 * 100);
        line-height: 1.8;
    }

    .example-btn {
        width: calc(545vw / 750 * 100);
        margin: calc(70vw / 750 * 100) auto 0;
    }

    .example-btn-inner::after {
        right: calc(60vw / 750 * 100);
    }

    .example-btn-inner:hover:after {
        right: calc(55vw / 750 * 100);
    }
}