@charset "UTF-8";
/******************************************************************
Site Name: ワークスペースいろは
******************************************************************/
/* スマホ・タブレット */
@media screen and (max-width: 1199px) {
    .follow-button {
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        text-align: center;
        z-index: 1000;
    }
    .follow-button[data-is-scroll="true"] {
        text-align: center;
    }
}
/* PC */
@media screen and (min-width: 1200px) {
    .follow-button {
        bottom: 0;
        left: 0;
        position: fixed;
        transition: 0.3s all;
        width: calc(204 / 1920 * 100vw);
        z-index: 1000;
    }
    .follow-button[data-is-scroll="true"] {
        left: calc(-90 / 1920 * 100vw);
    }
}
@media (hover: hover) {
    .follow-button__button {
        transition: all 0.2s;
    }
    .follow-button__button:hover {
        opacity: 0.8;
    }
}

/* スマホ・タブレット */
@media screen and (max-width: 1199px) {
    .section01 {
        margin: 0 auto;
        padding-top: 15px;
        text-align: center;
    }

    .section02 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding-top: 60px;
        text-align: center;
    }

    .section03 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding-top: 10px;
        text-align: center;
    }

    .section04 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding-top: 25px;
    }

    .section04__head {
        text-align: center;
    }

    .section04__box {
        padding-top: 30px;
    }

    .section04__list {
        text-align: center;
    }
    .section04__list:not(:last-child) {
        margin-bottom: 25px;
    }

    .section05 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding-top: 60px;
    }
    .section05__head {
        text-align: center;
    }
    .section05__box {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        padding-top: 25px;
        text-align: center;
    }

    .section06 {
        background-color: #17AA6C;
        border-radius: 50px 0 0 50px;
        margin-top: 60px;
        padding: 40px 0;
    }
    .section06__box {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        text-align: center;
    }

    .section07 {
        margin: 0 auto;
        max-width: calc(100% - 70px);
        padding-top: 60px;
        padding-bottom: 60px;
        position: relative;
        text-align: center;
    }

    .section07::after {
        background-image: url(../img/sp/bgimg_07.png);
        background-size: cover;
        bottom: -5px;
        content: '';
        height: 50px;
        left: -260px;
        right: 0;
        margin: auto;
        position: absolute;
        width: 50px;
    }

    .section08 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        text-align: center;
    }
    .section09 {
        margin: 0 auto;
        max-width: calc(100% - 30px);
        padding-top: 50px;
        text-align: center;
    }





    .section10 {
        padding-top: 60px;
        position: relative;
        z-index: 100;
    }

    .section10__title {
        margin: 0 auto 20px;
        max-width: calc(100% - 60px);
        text-align: center;
    }
    .section10__box {
        aspect-ratio: 355 / 440;
        background-image: url(../img/sp/bgimg_10.png);
        background-size: cover;
        margin: 0 auto;
        padding-top: 125px;
        width: 355px;
    }
    .section10__head {
        margin: 0 auto 25px;
        max-width: 178px;
    }
    .section10__intro {
        margin: 0 auto 30px;
        width: 290px;
        text-align: center;
    }
    .section10__link {
        height: 41px;
        margin: 0 auto;
        width: 186px;
    }

    .section10__button {
        align-items: center;
        background-color: #FFF;
        border-radius: 15px;
        color: #000;
        display: flex;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.08em;
        height: 100%;
        justify-content: space-between;
        padding: 10px 10px 10px 15px;
        width: 100%;
    }

    .section10__button:hover .section10__icon {
        background-color: rgba(246, 182, 47, 0.8);
    }

    .section10__button:hover .section10__icon i {
        margin-left: 5px;
    }

    .section10__icon {
        align-items: center;
        background-color: #F6B62F;
        border-radius: 5px;
        color: #FFF;
        font-size: 13px;
        display: inline-flex;
        height: 21px;
        justify-content: center;
        width: 21px;
    }

    .section10__icon i {
        transition: all 0.2s;
    }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .section10__box {
        padding-top: 250px;
        width: 700px;
    }
    .section10__head {
        margin: 0 auto 50px;
        max-width: 350px;
    }
    .section10__intro {
        margin: 0 auto 60px;
        width: 550px;
        text-align: center;
    }
    .section10__link {
        height: 68px;
        width: 348px;
    }

    .section10__button {
        border-radius: 15px;
        font-size: 20px;
        padding: 10px 10px 10px 30px;
    }

    .section10__icon {
        height: 48px;
        font-size: 20px;
        width: 48px;
    }
}


/* PC */
@media screen and (min-width: 1200px) {
    .section01 {
        margin: 0 0 0 auto;
        padding: 6rem 0 0 6rem;
        width: calc(1860 / 1920 * 100vw);
    }

    .section02 {
        margin-inline: auto;
        padding-top: 12rem;
        text-align: center;
        width: calc(1181 / 1920 * 100vw);
    }
    .section03 {
        margin-inline: auto;
        padding-top: 6rem;
        text-align: center;
        width: calc(1400 / 1920 * 100vw);
    }
    .section04 {
        padding-top: 9rem;
    }
    .section04__head {
        margin-inline: auto;
        text-align: center;
        width: calc(714 / 1920 * 100vw);
    }
    .section04__box {
        margin-inline: auto;
        padding-top: 5rem;
        width: calc(1200 / 1920 * 100vw);
    }
    .section04__list {
        text-align: center;
    }
    .section04__list:not(:last-child) {
        margin-bottom: 5rem;
    }
    .section05 {
        margin-inline: auto;
        padding-top: 11.8rem;
        width: calc(1200 / 1920 * 100vw);
    }
    .section05__box {
        display: grid;
        gap: 4rem 8rem;
        grid-template-columns: 1fr 1fr;
        padding-top: 7rem;
    }
    .section05__head {
        width: calc(761 / 1920 * 100vw);
    }
    .section06 {
        background-color: #17AA6C;
        border-radius: 10rem 0 0 10rem;
        margin-top: 12rem;
        padding: 8rem 0;
    }
    .section06__box {
        margin-inline: auto;
        width: calc(1200 / 1920 * 100vw);
    }
    .section07 {
        margin-inline: auto;
        padding-top: 12rem;
        padding-bottom: 7rem;
        position: relative;
        width: calc(1130 / 1920 * 100vw);
    }
    .section07::after {
        background-image: url(../img/pc/bgimg_07.png);
        background-size: cover;
        bottom: 0;
        content: '';
        height: 9.9rem;
        left: -9.9rem;
        position: absolute;
        width: 9.9rem;
    }
    .section08 {
        margin-inline: auto;
        padding-top: 3.2rem;
        text-align: center;
        width: calc(1200 / 1920 * 100vw);
    }
    .section09 {
        margin-inline: auto;
        padding-top: 11rem;
        text-align: center;
        width: calc(1136 / 1920 * 100vw);
    }
    .section10 {
        padding-top: 12.8rem;
        position: relative;
        z-index: 100;
    }

    .section10__title {
        margin-inline: auto;
        margin-bottom: 4.5rem;
        text-align: center;
        width: calc(1176 / 1920 * 100vw);
    }

    .section10__head {
        margin-inline: auto;
        text-align: center;
        width: calc(436 / 1920 * 100vw);
    }

    .section10__box {
        aspect-ratio: 1555 / 668;
        background-image: url(../img/pc/bgimg_10.png);
        background-size: cover;
        margin-inline: auto;
        padding-top: calc(210 / 1920 * 100vw);
        width: calc(1555 / 1920 * 100vw);
    }

    .section10__intro {
        margin-inline: auto;
        margin-bottom: calc(57 / 1920 * 100vw);
        padding-top: calc(52 / 1920 * 100vw);
        text-align: center;
        width: calc(436 / 1920 * 100vw);
    }


    .section10__link {
        height: 6.8rem;
        margin: 0 auto;
        width: 34.8rem;
    }

    .section10__button {
        align-items: center;
        background-color: #FFF;
        border-radius: 15px;
        color: #000;
        display: flex;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.08em;
        height: 100%;
        justify-content: space-between;
        padding: 10px 10px 10px 30px;
        width: 100%;
    }

    .section10__button:hover .section10__icon {
        background-color: rgba(246, 182, 47, 0.8);
    }

    .section10__button:hover .section10__icon i {
        margin-left: 5px;
    }

    .section10__icon {
        align-items: center;
        background-color: #F6B62F;
        border-radius: 10px;
        color: #FFF;
        font-size: 20px;
        display: inline-flex;
        height: 48px;
        justify-content: center;
        width: 48px;
    }

    .section10__icon i {
        transition: all 0.2s;
    }
}






/* スマホ・タブレット */
@media screen and (max-width: 1199px) {
    .footer {
        background-color: #FFF;
        border-radius: 50px 50px 0 0;
        margin-top: -175px;
        padding-bottom: 100px;
        padding-top: 150px;
        position: relative;
    }

    .footer__block {
        margin: 0 auto;
        width: calc(100% - 30px);
    }

    .footer__logo {
        max-width: 180px;
    }

    .footer__box {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 25px 22px;
        margin: 0 5px;
        padding-top: 30px;
    }
    .footer__list {
    }
    .footer__button {
        height: 13px;
        display: block;
    }
    .footer__button[data-number="04"] {
        height: 14px;
    }
    .footer__button[data-number="06"] {
        height: 10px;
    }
    .footer__list img {
        height: 100%;
        object-fit: contain;
    }

    .footer__button {
        transition: all 0.2s;
    }

    .footer__button:hover {
        opacity: 0.8;
    }

    .footer__bottom {
        padding-top: 28px;
    }

    .footer__back {
        height: 50px;
        margin: 0 0 0 auto;
        width: 50px;
    }

    .footer__back-button {
        align-items: center;
        background-color: #17AA6C;
        border-radius: 10px;
        color: #FFF;
        display: flex;
        font-size: 24px;
        height: 100%;
        justify-content: center;
        width: 100%;
    }
    .footer__copy {
        height: 11px;
        margin-top: 15px;
    }
    .footer__copy img {
        height: 100%;
        object-fit: contain;
    }
}

/* スマホ */
@media screen and (max-width: 767px) {
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .footer {
        margin-top: -300px;
        padding-bottom: 180px;
        padding-top: 270px;
    }
    .footer__logo {
        max-width: 240px;
    }
    .footer__button {
        height: 15px;
    }
    .footer__button[data-number="04"] {
        height: 16px;
    }
    .footer__button[data-number="06"] {
        height: 12px;
    }
    .footer__copy {
        height: 14px;
    }
}

/* PC */
@media screen and (min-width: 1200px) {
    .footer {
        background-color: #FFF;
        border-radius: 100px 100px 0 0;
        margin-top: -100px;
        padding: 20rem 0 5.5rem;
        position: relative;
    }

    .footer__block {
        margin-inline: auto;
        width: calc(1400 / 1920 * 100vw);
    }
    .footer__logo {
        width: calc(415 / 1920 * 100vw);
    }

    .footer__box {
        display: flex;
        justify-content: flex-end;
        gap: 3rem;
        padding-top: 5rem;
    }
    .footer__button {
        display: block;
        transition: all 0.2s;
    }
    .footer__button:hover {
        opacity: 0.8;
    }
    .footer__button[data-number="01"] {
        width: calc(176 / 1920 * 100vw);
    }
    .footer__button[data-number="02"] {
        width: calc(103 / 1920 * 100vw);
    }
    .footer__button[data-number="03"] {
        width: calc(103 / 1920 * 100vw);
    }
    .footer__button[data-number="04"] {
        width: calc(134 / 1920 * 100vw);
    }
    .footer__button[data-number="05"] {
        width: calc(227 / 1920 * 100vw);
    }
    .footer__button[data-number="06"] {
        width: calc(45 / 1920 * 100vw);
    }
    .footer__bottom {
        align-items: flex-end;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding-top: 50px;
    }

    .footer__back {
        height: calc(100 / 1920 * 100vw);
        width: calc(100 / 1920 * 100vw);
    }

    .footer__back-button {
        align-items: center;
        background-color: #17AA6C;
        border-radius: 10px;
        color: #FFF;
        display: flex;
        font-size: 36px;
        height: 100%;
        justify-content: center;
        width: 100%;
    }

    .footer__back-button:hover {
        background-color: rgba(23, 170, 108, 0.8);
    }

    .footer__back-button i {
        transition: all 0.2s;
    }

    .footer__back-button:hover i {
        margin-bottom: 10px;
    }

    .footer__copy {
        width: calc(396 / 1920 * 100vw);
    }

}