@charset "UTF-8";

/* base */
*, :after, :before {
            box-sizing: border-box;

    -webkit-box-sizing: border-box;
}

html {
    font-size: 24px;
    font-family: "Noto Sans JP", sans-serif;

    scroll-behavior: smooth;
}

main {
    overflow: clip;
}

/* common */
.sp {
    display: none;
}

h2 {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 9.5rem;
    background-position: center center;
    background-size: auto 100%;
    background-repeat: repeat-x;
    text-align: center;
}

#problem h2, #flow h2 {
    background-image: url(../img/h2-bg-a.png);
}
#about h2 {
    background-image: url(../img/h2-bg-b.png);
}
#price h2 {
    background-image: url(../img/h2-bg-c.png);
}
h2 img {
    transform: translateY(-1.5rem);
    width: auto;
    height: 100%;
}
.section-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.bg-object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    content: "";
}

.section-txt {
    color: #ffffff;
    font-weight: bold;
    letter-spacing: .025rem;
    text-align: center;
}

.spacer {
    width: auto;
    height: 1rem;
}

.spacer-half {
    width: auto;
    height: .5rem;
}

/* 固定ボタン */
.fixed-btn {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    margin: auto;
    padding: .5rem 0;
    text-align: center;
}
.fixed-btn img {
    display: inline-block;
    width: auto;
    height: 5rem;
    margin: 0 .2rem;
}

/* title */
#title {
    position: relative;
    width: 100%;
    height: calc(100lvh + 6rem);
    padding: 0 0 6rem;
    background-image: url(../img/bg-grass.png);
    background-position: center center;
    background-size: 100px auto;
    background-color: #62d337;
}
.title-img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.title-gif {
    position: absolute;
    top: 5%;
    right: 8.5%;
    left: auto;
    width: 28.5%;

    filter: drop-shadow(5px 5px 0 rgba(0,0,0,.3));
}

/* problem */
#problem {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 7rem 0 12rem;
    background-image: url(../img/bg-stone-a.png);
    background-position: center center;
    background-size: 70px auto;
}

#problem .bg-object {
    background-image: url(../img/problem-bg-01.png),url(../img/problem-bg-02.png);
    background-position: center top 16rem,center bottom 9rem;
    background-size: 1400px auto;
}
.problem-sub {
    width: 100%;
}
.problem-point {
    text-align: center;
}
.problem-point img {
    display: inline-block;
    width: auto;
    height: 8.5rem;
    margin: .25rem;
}
.problem-txt {
    margin: 2rem auto;
    font-size: 1.5rem;
    text-align: center;
}
/* about */
#about {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 6rem 0 10rem;
    background-image: url(../img/bg-grass.png);
    background-position: center center;
    background-size: 100px auto;
    background-color: #62d337;
}

#about .bg-object {
    background-image: url(../img/about-bg-01.png),url(../img/about-bg-02.png);
    background-position: center top 6rem,center bottom 11rem;
    background-size: 1400px auto;
}

.about-title {
    position: relative;
    width: 40%;
    margin: 0 auto;
}
.about-title-logo {
    width: 100%;
}
.about-title-human-01, .about-title-human-02 {
    position: absolute;
    width: auto;
    height: 50%;
}
.about-title-human-01 {
    right: calc(100% + 4rem);
    bottom: -1.8rem;
}
.about-title-human-02 {
    bottom: -1.8rem;
    left: calc(100% + 2rem);
}

.about-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2rem -.5rem 1rem;
}
.about-item {
    width: calc(100% / 3 - .5rem);
}
.about-item img {
    width: 100%;
}
.about-txt {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.4rem;
    letter-spacing: .025rem;
    text-align: center;
}
.about-suggestion {
    width: 100%;
}

/* flow */
#flow {
    position: relative;
    width: 100%;
    background-image: url(../img/bg-stone-b.png);
    background-position: center center;
    background-size: 70px auto;
}

.flow {
    background-image: url(../img/arrow-vertical.png);
    background-position: center top;
    background-size: min(100%,1200px) auto;
    background-repeat: no-repeat;
}

.flow-title {
    width: 100%;
}
/* flow:flow-1 */
.flow-1 {
    padding: 6rem 0 3rem;
    background-image: none;
    background-color: rgba(255,255,255,.3);
}
.flow-1-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 75%;
    margin: 0 auto;
}
.flow-1-item {
    width: calc(100% / 4 - .25rem);
}
.flow-1-item img {
    width: 100%;
}


/* flow:flow-2 */
.flow-2 {
    padding: 3rem 0 3rem;
}

.flow-2-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flow-2-flex:nth-child(1) {
    background-image: url(../img/arow-horizontal.png);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.flow-2-flex:nth-child(2) {
    justify-content: center;
}
.flow-2-item {
    width: calc(100% / 2 - 2rem);
}

.flow-2-item img {
    width: 100%;
}

/* flow:flow-3 */
.flow-3 {
    padding: 3rem 0 3rem;
    background-color: rgba(255,255,255,.3);
}
/* flow:flow-4 */
.flow-4 {
    padding: 3rem 0 9rem;
    background-repeat: no-repeat;
}

.flow-4-flex {
    display: flex;
    flex-wrap: wrap;
}
.flow-4-item {
    align-self: flex-end;
    width: calc(100% / 2);
    padding: 0 .5rem;
}
.flow-4-item img {
    width: 100%;
}

/* price */
#price {
    position: relative;
    z-index: 0;
    width: 100%;
    padding: 8rem 0 10rem;
    background-image: url(../img/footer-bg.png),url(../img/bg-grass.png);
    background-position: center bottom,center center;
    background-size: auto 6rem,100px auto;
    background-repeat: repeat-x,repeat;
    background-color: #62d337;
}

#price .bg-object {
    background-image: url(../img/price-bg-01.png);
    background-position: center top 5rem;
    background-size: 1400px auto;
}

.price-title {
    width: 100%;
}
.price-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}
.price-item {
    width: calc(100% / 3 - .75rem);
}
.price-item img {
    width: 100%;
}
.manen {
    width: 100%;
}

.copy {
    margin: 3rem auto;
    color: #ffffff;
    font-weight: bold;
    font-size: .7rem;
    text-align: center;
}

/* 動画 */
body.fixed {
    overflow: hidden;
}
.modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100lvh;
    background-color: rgba(0,0,0,.75);
    transition: .3s;

    pointer-events: none;
}
.modal.open {
    opacity: 1;

    pointer-events: visible;
}
.iframe-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 960px;
    margin: auto;

    aspect-ratio: 16 / 9;
}
.iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: solid 3px #ffffff;
    box-shadow: 0 0 1rem #000000;
}

/* 装飾 */

/* 装飾：フォントサイズ */
.fs-05 {
    font-size: .5em;
}
.fs-06 {
    font-size: .6em;
}
.fs-07 {
    font-size: .7em;
}
.fs-08 {
    font-size: .8em;
}
.fs-09 {
    font-size: .9em;
}

.fs-11 {
    font-size: 1.1em;
}
.fs-12 {
    font-size: 1.2em;
}
.fs-13 {
    font-size: 1.3em;
}
.fs-14 {
    font-size: 1.4em;
}
.fs-15 {
    font-size: 1.5em;
}
.fs-16 {
    font-size: 1.6em;
}
.fs-17 {
    font-size: 1.7em;
}
.fs-18 {
    font-size: 1.8em;
}
.fs-19 {
    font-size: 1.9em;
}
.fs-20 {
    font-size: 2em;
}
.fs-21 {
    font-size: 2.1em;
}
.fs-22 {
    font-size: 2.2em;
}
.fs-23 {
    font-size: 2.3em;
}
.fs-24 {
    font-size: 2.4em;
}
.fs-25 {
    font-size: 2.5em;
}

/* 装飾：文字色 */
.white {
    color: #ffffff;
}
.black {
    color: #000000;
}
.txtBase {
    color: #0096df;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #ffe100;

    text-decoration-skip-ink: none;
    text-decoration-thickness: 1.4em;
    text-underline-offset: -1.1em;
}
@media screen and (max-width: 1025px) {
    /* common */
    .pc {
        display: none;
    }

    .sp {
        display: unset;
    }
    h2 {
        height: 8rem;
    }

    /* 固定ボタン */
    .fixed-btn {
        background-color: rgba(0,0,0,.5);

        backdrop-filter: blur(.5rem);
    }
    .fixed-btn img {
        height: 8.8vw;
        margin: 0;
    }
    /* title */
    #title {
        height: auto;
        padding: 0 0 6rem;
    }
    .title-img {
        height: auto;
    }

    .title-gif {
        top: 35.5%;
        right: 0;
        left: 0;
        width: 85%;
        margin: auto;

        filter: drop-shadow(1vw 1vw 0 rgba(0,0,0,.3));
    }

    /* problem */
    #problem {
        padding: 7rem 0 10rem;
    }
    #problem .bg-object {
        background-image: url(../img/sp/sp-problem-bg-01.png),url(../img/sp/sp-problem-bg-02.png);
        background-position: center top 9rem,center bottom 7rem;
        background-size: 100% auto;
    }

    .problem-point img {
        width: 100%;
        height: auto;
        margin: 0 auto .5rem;
    }
    /* about */

    #about {
        padding: 5rem 0 7rem;
    }

    #about .bg-object {
        background-image: url(../img/sp/sp-about-bg-01.png);
        background-position: center top 2.5rem;
        background-size: 100% auto;
    }

    .about-title {
        width: 100%;
        margin: 0 auto;
    }
    .about-flex {
        margin: 0 auto;
    }
    .about-item {
        width: 100%;
        margin: 0 auto .5rem;
    }

    /* flow */
    .flow {
        background-image: url(../img/sp/sp-arrow-vertical.png);
    }

    .flow-1 {
        padding: 5rem 0 2rem;
    }

    .flow-1-item {
        width: calc(100% / 2 - .25rem);
        margin: 0 0 .5rem;
    }

    .flow-2 {
        padding: 4rem 0 3rem;
    }
    .flow-img {
        width: 100%;
    }
    .arrow-spacer {
        transform: scale(.8);
        width: 100%;
    }

    .flow-4 {
        padding: 3rem 0 8rem;
    }

    /* price */
    #price {
        padding: 5rem 0 4.5rem;
    }

    #price .bg-object {
        background-image: url(../img/sp/sp-price-bg-01.png);
        background-position: center top 2.5rem;
        background-size: 100% auto;
    }

    .price-title {
        margin: 0 auto 0;
    }

    .price-flex {
        width: calc(100% - 1rem);
    }
    .price-item {
        width: calc(100% / 2 - .25rem);
        margin: 0 0 .5rem;
    }
    .price-item:nth-child(3) {
        margin: 0 auto .5rem;
    }

    .copy {
        margin: 1rem auto 3rem;
        font-size: .4rem;
    }
}