@charset "utf-8";

/* ---------------------------------------------------
 * base
/* ---------------------------------------------------*/

html {
    font-size: 62.5%;	/*適宜変更お願いします*/
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: min(1.64vw, 1.8rem);
    font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    color: #1D2022;
    line-height: 2;
    width: 100%;
    background-color: #fff;
    font-weight: 400;	/*適宜変更お願いします*/
    font-feature-settings: "palt" 1;	/*自動カーニング*/
    overflow-x: hidden;
}

@media screen and (min-width: 1200px) {
    body { 
        font-size: clamp(1.2rem, 0.8vw, 1.8rem);
    }
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition: all .2s;
}

a:hover {
    filter: brightness(130%);
    ;
    text-decoration: none;
}
@media screen and (max-width: 767px) {
    a:hover {
        filter: unset;
    }

    img {
        width: 100%;
    }
}

.ul-gr {
    position: relative;
    z-index: 0;
}

.ul-gr::before {
    content: '';
    width: 100%;
    height: min(1.09vw, 1.2rem);
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #C0EFE9;
    z-index: -1;
}

.col-wt {
    color: #fff;
}

.col-gr {
    color: #1CBAA6;
}

.col-pp {
    color: #93387F;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 999;
    top: 0;
    left: 0;
}

.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw,40rem);
}

.loaded {
    animation-duration: 1s;
    animation-name : after-loading;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes after-loading {
    0% {
        opacity: 1;
    } 
    99% {
        opacity: 0;
    }
    100% {
        z-index: -1;
    }
}

/* ---------------------------------------------------
 * common（PC　min-width: 1023px）
/* ---------------------------------------------------*/
.wrap {
	width: 2000px;
	max-width: 100%;
    overflow: hidden;
}

.container {
    position: relative;
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (min-width: 1200px) {
    .container  {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: min(55vw, 110rem);
    }
}

.text-box {
    width: min(100%, 110rem);
    margin: 0 auto;
    position: absolute;
    line-height: 2;
}


.sp {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}

/*背景画像を指定*/
section#section-01 {
	background:url(../img_pc/section_01.webp)no-repeat top center;
    position: relative; 
}

section#section-01 .container {
    overflow: visible;
    height: min(90.9vw, 100rem);

}

.p-navSwitch {
    display: none;
    position: absolute;
    z-index: 30;
    background-color: rgba(0,0,0,0.6);
    width: 12vw;
    height: 10vw;
}

.p-navSwitch__bar {
    position: absolute;
    background-color: white;
    width: 80%;
    height: 6%;
    transition: .5s all;
    left: 10%;
}

.p-navSwitch__bar--top {
    top: 20%;
}

.p-navSwitch__bar--mid {
    top: 50%;
    transform: translateY(-50%);
}

.p-navSwitch__bar--bottom {
    bottom: 20%;
}

.p-navSwitch.is-active .p-navSwitch__bar--top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
}

.p-navSwitch.is-active .p-navSwitch__bar--mid {
    opacity: 0;
    transform: translate(100%, -50%);
}

.p-navSwitch.is-active .p-navSwitch__bar--bottom {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

.p-nav {
    position: fixed;
    top: 16vw;
    left: 0;
    color: white;
    z-index: 20;
    background: rgba(0,0,0,.8);
    transition: .5s all;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.4rem 3.2rem;
    border-radius: 0 1rem 1rem 0;
}

.p-nav__item>a {
    color: white;
    z-index: 10;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-nav__item>a:hover {
    opacity: .6;
}

.p-nav__ruby {
    font-size: 1.2rem;
}

.p-nav.is-active {
    opacity: 1;
    transition: all .5s;
    transform: translateX(0);
}

.fv-slider01 {
    position: absolute;
    height: 100%;
    aspect-ratio: 1 / 2.381;
    overflow: hidden;
    top: 0;
    right: max(-1.45vw,-2.9rem);
    z-index: 0;
    display: none;
    opacity: 0;
} 

.fv-slider01.display {
    display: block;
    animation-name: opacity;
    animation-duration: .3s;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;

}

@keyframes opacity {
    0% {
        opacity: 0;
    } 
    100% {
        opacity: 1;
    }
}

.fv-sliderUp {
    animation-name: vertical-Up;
    animation-duration: 20.0s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



@keyframes vertical-Up {
    0% {
        transform: translateY(0);
    } 
    100% {
        transform: translateY(-50%);
    }
}

@keyframes horizontal-to-left {
    0% {
        transform: translateX(0);
    } 
    100% {
        transform: translateX(-50%);
    }
}

.fv-slider02 {
    position: absolute;
    height: 100%;
    aspect-ratio: 1 / 2.381;
    overflow: hidden;
    top: 0;
    right: min(-36.6vw, -43.8rem);
} 

.fv-sliderDown {
    animation-name: vertical-Down;
    animation-duration: 30.0s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes vertical-Down {
    0% {
        transform: translateY(-50%);
    } 
    100% {
        transform: translateY(0%);
    }
}



.fv-image {
    position: absolute;
    z-index: 0;
}

.add-black {
    width: 2.1rem;
    height: min(23.6vw, 26rem);
    background-color: #1d2022;
    position: absolute;
    top: min(23.6vw, 26rem);
    left: 99.8%;
}

section#section-01 .cta-button-creator {
    position: absolute;
    bottom: min(19.1vw, 21rem);
    width: min(32.73vw, 36rem);
    left: min(15.45vw, 17rem);
}

section#section-01 .cta-button-customer {
    position: absolute;
    bottom: min(3.6vw, 4rem);
    width: min(32.73vw, 36rem);
    left: min(15.45vw, 17rem);
}

section#section-01 .cta-button-creator img,
section#section-01 .cta-button-customer img {
    height: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-01 {
        background-size: contain;
        width: 100vw;
        height: min(50vw, 100rem);
    }
    section#section-01 .container  {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: min(55vw, 110rem);
        height: 100%
    }
    .fv-slider01,
    .fv-slider02 {
        width: min(21.1vw, 42rem);
    } 
    .fv-slider02 {
        right: max(-22.55vw, -45rem);
    } 
    .fv-slider02.display {
        display: block;
        animation-name: opacity;
        animation-duration: .3s;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    section#section-01 .cta-button-customer {
        bottom: min(2vw, 4rem);
        width: min(18vw, 36rem);
        left: min(9vw, 18rem);
    }
    section#section-01 .cta-button-creator {
        bottom: min(10.5vw, 21rem);
        width: min(18vw, 36rem);
        left: min(9vw, 18rem);
    }
    .add-black {
        height: min(13vw, 26rem);
        top: min(13vw, 26rem);
        width: calc(1px + min(1.5vw, 3rem));
        left: calc(100% - 1px);

    }
}


@media screen and (max-width: 1199px) {
    .p-navSwitch {
        display: inline-block;
        position: fixed;
        top: 0;
        right: 0;
    }

    .p-nav {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000000;
        transform: translateX(100vw);
        opacity: 0;
        display: flex;
        gap: 3.2rem;
        border-radius: 0;
    }

    .p-nav__item>a:hover {
        opacity: unset;
    }
    
}

@media screen and (max-width: 767px) {
    section#section-01 .container {
        height: 210vw;
    }

    section#section-01 .cta-button-creator {
        width: 75vw;
        height: 27vw;
        left: 50vw;
        bottom: 40vw;
        transform: translateX(-50%);
    }

    section#section-01 .cta-button-customer {
        width: 75vw;
        height: 27vw;
        left: 50vw;
        bottom: 9vw;
        transform: translateX(-50%);
    }

    .fv-slider01 {
        position: absolute;
        height: 26vw;
        width: 100vw;
        aspect-ratio: unset;
        overflow: hidden;
        top: 89vw;
        left: 0;
        z-index: 2;
    } 

    .fv-sliderUp {
        animation-name: horizontal-to-left;
        animation-duration: 40.0s;
        animation-direction: normal;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: flex;
        height: 100%;
        width: 672vw;
    }

    .fv-slider02 {
        display: none;
    }

    .add-black {
        display: none;
    }

    .p-nav {
        font-size: 4.2vw;
    }

    .p-nav__ruby {
        font-size: 2.8vw;
    }
}

section#section-02 {
	background:url(../img_pc/section_02.webp)no-repeat top center;
    height: px;
}

@media screen and (min-width: 1200px) {
    section#section-02 {
        background-size: contain;
        width: 100vw;
        height: min(41vw, 82rem);
    }
}

section#section-03 {
	background:url(../img_pc/section_03.webp)no-repeat top center;
    height: px;
    position: relative;
}

@media screen and (min-width: 1200px) {
    section#section-03 {
        background-size: contain;
        width: 100vw;
        height: min(26vw, 52rem);
    }
}

section#section-04 {
	background:url(../img_pc/section_04.webp)no-repeat top center;
    height: px;
    position: relative;
}

section#section-04 .text-box {
    padding-left: min(54.9vw, 60.4rem);
    bottom: min(20.2vw, 22.2rem);
    font-weight: 500;
}

section#section-04 .button-lp img {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-04 {
        background-size: contain;
        width: 100vw;
        height: min(44vw, 88rem);
    }
    section#section-04 .text-box {
        padding-left: min(30.2vw, 60.4rem);
        bottom: min(11.1vw, 22.2rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-04 .text-box {
        padding-left: 11.5vw;
        bottom: 5.3vw;
        letter-spacing: .05em;

    }
}

section#section-05 {
	background:url(../img_pc/section_05.webp)no-repeat top center;
    height: px;
    position: relative;
}

section#section-05 .text-box {
    padding-left: min(3.64vw, 4rem);
    bottom: min(15.6vw, 17.2rem);
    font-weight: 500;
}


@media screen and (min-width: 1200px) {
    section#section-05 {
        background-size: contain;
        width: 100vw;
        height: min(25vw, 50rem);
    }
    section#section-05 .text-box {
        padding-left: min(2vw, 4rem);
        bottom: min(8.6vw, 17.2rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-05 .text-box {
        padding-left: 11.5vw;
        bottom: 5.3vw;
        letter-spacing: .05em;
    }
}

section#section-06 {
	background:url(../img_pc/section_06.webp)no-repeat top center;
    height: px;  
    position: relative;
}

section#section-06 .text-box {
    padding-left: min(54.9vw, 60.4rem);
    bottom: min(10.4vw, 11.4rem);
    font-weight: 500;
}

@media screen and (min-width: 1200px) {
    section#section-06 {
        background-size: contain;
        width: 100vw;
        height: min(25vw, 50rem);
    }
    section#section-06 .text-box {
        padding-left: min(30.2vw, 60.4rem);
        bottom: min(5.7vw, 11.4rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-06 .text-box {
        padding-left: 11.5vw;
        bottom: 5.3vw;
        letter-spacing: .05em;
    }
}

section#section-07 {
	background:url(../img_pc/section_07.webp)no-repeat top center;
    height: px;
    position: relative;
}

section#section-07 .text-box {
    padding-left: min(3.64vw, 4rem);
    bottom: min(8.7vw, 9.6rem);
    font-weight: 500;
}

@media screen and (min-width: 1200px) {
    section#section-07 {
        background-size: contain;
        width: 100vw;
        height: min(25vw, 50rem);
    }
    section#section-07 .text-box {
        padding-left: min(2vw, 4rem);
        bottom: min(4.8vw, 9.6rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-07 .text-box {
        padding-left: 11.5vw;
        bottom: 5.3vw;
        letter-spacing: .05em;
    }
}

section#section-08 {
	background:url(../img_pc/section_08.webp)no-repeat top center;
    height: px;
    position: relative;
}

section#section-08 .text-box {
    padding-left: min(54.9vw, 60.4rem);
    bottom: min(20.5vw, 22.6rem);
    font-weight: 500;
}

@media screen and (min-width: 1200px) {
    section#section-08 {
        background-size: contain;
        width: 100vw;
        height: min(27vw, 54rem);
    }
    section#section-08 .text-box {
        padding-left: min(30.2vw, 60.4rem);
        bottom: min(11.3vw, 22.6rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-08 .text-box {
        padding-left: 11.5vw;
        bottom: 16vw;
        letter-spacing: .05em;
    }
}

section#section-09 {
	background:url(../img_pc/section_09.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-09 {
        background-size: cover;
        width: min(100vw, 200rem);
        margin: 0 auto;
        height: min(24.2vw, 48.3rem);
    }
}

section#section-10 {
	background:url(../img_pc/section_10.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-10 {
        background-size: cover;
        width: min(100vw, 200rem);
        margin: 0 auto;
        height: min(21.0vw, 42rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-10 {
        margin-top: -1px;
    }
}

/*背景画像を指定*/
section#section-11 {
	background:url(../img_pc/section_11.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-11 {
        background-size: cover;
        width: min(100vw, 200rem);
        margin: 0 auto;
        height: min(20.9vw, 42rem);
    }
}

@media screen and (max-width: 767px) {
    section#section-11 {
        margin-top: -1px;
    }
}

section#section-12 {
	background:url(../img_pc/section_12.webp)no-repeat top center;
    height: px;  
}

#section-12 .button-box {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: min(12.4vw, 13.6rem);
    padding-top: min(43.3vw, 47.6rem);
}

#section-12 .button-box .cta-button-creator,
#section-12 .button-box .cta-button-customer {
    width: min(32.9vw, 36.2rem);
}

#section-12 .button-box .cta-button-creator img,
#section-12 .button-box .cta-button-customer img {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-12 {
        background-size: cover;
        width: min(100vw, 200rem);
        margin: 0 auto;
        height: min(36.1vw, 72.2rem);
    }
    #section-12 .button-box {
        gap: min(6.8vw, 13.6rem);
        padding-top: min(23.8vw, 47.6rem);
    }
        #section-12 .button-box .cta-button-creator,
        #section-12 .button-box .cta-button-customer {
        width: min(18.1vw, 36.2rem);
    }
}

@media screen and (max-width: 767px) {
    #section-12 .button-box {
        flex-direction: column;
        align-items: center;
        gap: 10.7vw;
        padding-top: 132vw;
    }
    #section-12 .button-box .cta-button-creator,
    #section-12 .button-box .cta-button-customer {
        width: 82.7vw;
    }
}

section#section-13 {
	background:url(../img_pc/section_13.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-13 {
        background-size: contain;
        width: 100vw;
        height: min(40.3vw, 80.6rem);
    }
}

section#section-13 .text-box {
    top: min(10.9vw, 12rem);
}

section#section-13 .text-box-2 {
    top: min(78.2vw, 86rem);
}
section#section-13 .text-box-sp {
    top: min(12.7vw, 14rem);
}
@media screen and (max-width: 767px) {
    section#section-13 .text-box-2 {
        top: min(156vw, 117rem);
    }
}

section#section-14 {
	background:url(../img_pc/section_14.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-14 {
        background-size: contain;
        width: 100vw;
        height: min(37.35vw, 74.7rem);
    }
}

section#section-15 {
	background:url(../img_pc/section_15.webp)no-repeat top center;
    height: px;  
}

.text-wrapper-01 {
    padding-left: min(19.9vw, 21.9rem);
    margin: 0 auto;
    position: absolute;
    font-size: clamp(1.2rem, 1.56vw, 1.8rem);
    width: min(90vw, 99rem);
}

.text-wrapper-01 p {
    line-height: 1.8;
    letter-spacing: .02em;
    position: absolute;
}

.text-wrapper-01 .row-01 {
    top: min(13.5vw, 14.8rem);
}

.text-wrapper-01 .row-02 {
    top: min(30vw, 33rem);
}

.text-wrapper-01 .row-03 {
    top: min(46.5vw, 51.2rem);
}

.text-wrapper-01 .row-04 {
    top: min(61.5vw, 67.7rem);
}

.text-wrapper-01 .row-05 {
    top: min(78.2vw, 86rem);
}

#section-15 .cta-button-creator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: min(92vw, 102rem);
    width: min(43.6vw, 46rem);
}

#section-15 .cta-button-creator img {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-15 {
        background-size: contain;
        width: 100vw;
        height: min(65vw, 130rem);
    }

    .text-wrapper-01 {
        padding-left: min(10.95vw, 21.9rem);
        width: min(50vw, 100rem);
        font-size: clamp(1.16rem, .8vw, 1.8rem);
    }

    .text-wrapper-01 p {
        line-height: 1.5;
        letter-spacing: 0;
        position: absolute;
    }
    
    .text-wrapper-01 .row-01 {
        top: min(7.4vw, 14.8rem);
    }
    
    .text-wrapper-01 .row-02 {
        top: min(16.5vw, 33rem);
    }
    
    .text-wrapper-01 .row-03 {
        top: min(25.6vw, 51.2rem);
    }
    
    .text-wrapper-01 .row-04 {
        top: min(33.85vw, 67.7rem);
    }

    .text-wrapper-01 .row-05 {
        top: min(43vw, 86rem);
    }
    
    #section-15 .cta-button-creator {
        top: min(51vw, 102rem);
        width: min(23vw, 46rem);
    }
}

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

    .text-wrapper-01 {
        padding-left: 27.5vw;
        width: 92.8vw;
        font-size: 4vw;
    }

    .text-wrapper-01 p {
        line-height: 1.8;
        letter-spacing: 0.08em;
        position: absolute;
    }
    
    .text-wrapper-01 .row-01 {
/*         top: 17.5vw; */
        top: 92vw;
    }
    
    .text-wrapper-01 .row-02 {
/*         top: 82vw; */
        top: 156.5vw;
    }
    
    .text-wrapper-01 .row-03 {
 /*        top: 146vw; */
        top: 220.5vw;
    }
    
    .text-wrapper-01 .row-04 {
/*         top: 189vw; */
        top: 263.5vw;
    }

    .text-wrapper-01 .row-05 {
/*         top: 253vw; */
        top: 327.5vw;
    }
    
    #section-15 .cta-button-creator {
/*         top: 314vw; */
        top: 388.5vw;
        width: 82.7vw;
    }
}

section#section-16 {
	background:url(../img_pc/section_16.webp)no-repeat top center;
    height: px;  
}

.text-wrapper-02 {
    padding-left: min(19.9vw, 21.9rem);
    font-size: clamp(1.2rem, 1.56vw, 1.8rem);
    width: min(90vw, 99rem);
    margin: 0 auto;
    position: absolute;

}

.text-wrapper-02 p {
    line-height: 1.8;
    letter-spacing: .02em;
    position: absolute;
}

.text-wrapper-02 .row-01 {
    top: min(47.8vw, 52.6rem);
}

.text-wrapper-02 .row-02 {
    top: min(64.4vw, 70.8rem);
}

@media screen and (min-width: 1200px) {
    section#section-16 {
        background-size: contain;
        width: 100vw;
        height: min(39.8vw, 79.6rem);
    }
    .text-wrapper-02 {
        padding-left: min(10.95vw, 21.9rem);
        width: min(50vw, 100rem);
        font-size: clamp(1.16rem, .8vw, 1.8rem);
    }
    
    .text-wrapper-02 p {
        line-height: 1.5;
        letter-spacing: 0;
    }
    
    .text-wrapper-02 .row-01 {
        top: min(26.3vw, 52.6rem);
    }
    
    .text-wrapper-02 .row-02 {
        top: min(35.4vw, 70.8rem);
    }
}

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

    .text-wrapper-02 {
        padding-left: 27.5vw;
        width: 92.8vw;
        font-size: 4vw;
    }

    .text-wrapper-02 p {
        line-height: 1.8;
        letter-spacing: 0.08em;
        position: absolute;
    }
    
    .text-wrapper-02 .row-01 {
        top: 82vw;
    }
    
    .text-wrapper-02 .row-02 {
        top: 152vw;
    }
}


section#section-17 {
	background:url(../img_pc/section_17.webp)no-repeat top center;
    height: px;  
}

.text-wrapper-03 {
    padding-left: min(19.9vw, 21.9rem);
    font-size: clamp(1.2rem, 1.56vw, 1.8rem);
    width: min(90vw, 99rem);
    margin: 0 auto;
    position: absolute;
}

.text-wrapper-03 p {
    line-height: 1.8;
    letter-spacing: .02em;
    position: absolute;
}

.text-wrapper-03 .row-01 {
    top: min(8.55vw, 9.4rem);
}

.text-wrapper-03 .row-02 {
    top: min(23.6vw, 26rem);
}

.text-wrapper-03 .row-03 {
    top: min(40.2vw, 44.2rem);
}

#section-17 .cta-button-customer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: min(50.9vw, 56rem);
    width: min(43.6vw, 46rem);
}

#section-17 .cta-button-customer img {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-17 {
        background-size: contain;
        width: 100vw;
        height: min(43.25vw, 86.5rem);
    }
    .text-wrapper-03 {
        padding-left: min(10.95vw, 21.9rem);
        width: min(50vw, 100rem);
        font-size: clamp(1.16rem, .8vw, 1.8rem);
    }
    
    .text-wrapper-03 p {
        line-height: 1.5;
        letter-spacing: 0;
        position: absolute;
    }
    
    .text-wrapper-03 .row-01 {
        top: min(4.7vw, 9.4rem);
    }
    
    .text-wrapper-03 .row-02 {
        top: min(13vw, 26rem);
    }
    
    .text-wrapper-03 .row-03 {
        top: min(22.1vw, 44.2rem);
    }
    
    #section-17 .cta-button-customer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: min(28vw, 56rem);
        width: min(23vw, 46rem);
    }
}

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

    .text-wrapper-03 {
        padding-left: 27.5vw;
        width: 92.8vw;
        font-size: 4vw;
    }

    .text-wrapper-03 p {
        line-height: 1.8;
        letter-spacing: 0.08em;
        position: absolute;
    }
    
    .text-wrapper-03 .row-01 {
        top: 14.5vw;
    }
    
    .text-wrapper-03 .row-02 {
        top: 50vw;
    }
    
    .text-wrapper-03 .row-03 {
        top: 114.5vw;
    }
    
    #section-17 .cta-button-customer {
        top: 153vw;
        width: 82.7vw;
    }
}

section#section-18 {
	background:url(../img_pc/section_18.webp)no-repeat top center;
    height: px;  
}

.text-box-02 {
    padding-left: min(6.55vw, 7.2rem);
    padding-right: min(6.55vw, 7.2rem);
    font-size: clamp(1.2rem, 1.56vw, 1.6rem);
    width: min(100%, 110rem);
    margin: 0 auto;
    line-height: 1.8;
    letter-spacing: .1em;
    position: absolute;
    top: min(78.2vw, 86rem);
    color: #1D2022;
}

.text-box-02 .text-large {
    font-size: clamp(1.2rem, 1.95vw, 2rem);
    font-weight: 700;
}

@media screen and (min-width: 1200px) {
    section#section-18 {
        background-size: contain;
        width: 100vw;
        height: min(70.6vw, 141.2rem);
    }
    .text-box-02 {
        padding-left: min(3.6vw, 7.2rem);
        padding-right: min(3.6vw, 7.2rem);
        font-size: clamp(1.2rem, 1vw, 2rem);
        width: min(55vw, 110rem);
        line-height: 1.5;
        letter-spacing: 0;
        top: min(43vw, 86rem);
    }
    .text-box-02 .text-large {
        font-size: clamp(1.4rem, 1.2vw, 2.4rem);
    }
}

@media screen and (max-width: 767px) {
    .text-box-02 {
        padding-left: 4vw;
        padding-right: 4vw;
        font-size: 4vw;
        line-height: 1.8;
        letter-spacing: .1em;
        position: absolute;
        top: 110vw;
    }
    .text-box-02 .text-large {
        font-size: 4.4vw;
    }
}
section#section-19 {
	background:url(../img_pc/section_19.webp)no-repeat top center;
    height: px;  
}

.text-box-03 {
    padding-left: min(6.55vw, 7.2rem);
    padding-right: min(6.55vw, 7.2rem);
    font-size: clamp(1.2rem, 1.56vw, 1.6rem);
    width: min(100%, 110rem);
    margin: 0 auto;
    line-height: 1.8;
    letter-spacing: .1em;
    position: absolute;
    top: min(38.2vw, 42rem);
    color: #1D2022;
}

.text-box-03 .text-large {
    font-size: clamp(1.2rem, 1.95vw, 2rem);
    font-weight: 700;
}

@media screen and (min-width: 1200px) {
    section#section-19 {
        background-size: contain;
        width: 100vw;
        height: min(51.2vw, 102.4rem);
    }
    .text-box-03 {
        padding-left: min(3.6vw, 7.2rem);
        padding-right: min(3.6vw, 7.2rem);
        font-size: clamp(1.2rem, 1vw, 2rem);
        width: min(55vw, 110rem);
        margin: 0 auto;
        line-height: 1.5;
        letter-spacing: 0;
        position: absolute;
        top: min(21vw, 42rem);
    }
    .text-box-03 .text-large {
        font-size: clamp(1.4rem, 1.2vw, 2.4rem);
    }
}

@media screen and (max-width: 767px) {
    .text-box-03 {
        padding-left: 4vw;
        padding-right: 4vw;
        font-size: 4vw;
        line-height: 1.8;
        letter-spacing: .1em;
        position: absolute;
        top: 63vw;
    }
    .text-box-03 .text-large {
        font-size: 4.4vw;
    }
}

section#section-20 {
	background:url(../img_pc/section_20.webp)no-repeat top center;
    height: px;  
}

@media screen and (min-width: 1200px) {
    section#section-20 {
        background-size: contain;
        width: 100vw;
        height: min(29.1vw, 58.2rem);
    }
}

section#section-20 .cta-button {
    position: absolute;
    bottom: min(9.09vw, 10rem);
    width: min(56vw, 62rem);
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    section#section-20 .cta-button {
        bottom: min(14vw, 15.4rem);
        width: min(89vw, 98rem);
    }
}

/*背景画像を指定*/
section#section-21 {
	background:url(../img_pc/section_21.webp)no-repeat top center;
    height: px;  
}

#section-21 .button-box {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: min(12.4vw, 13.6rem);
    padding-top: min(58.2vw, 64rem);
}

#section-21 .button-box .cta-button-creator,
#section-21 .button-box .cta-button-customer {
    width: min(32.9vw, 36.2rem);
}

#section-21 .button-box .cta-button-creator img,
#section-21 .button-box .cta-button-customer img {
    width: 100%;
}

@media screen and (min-width: 1200px) {
    section#section-21 {
        background-size: contain;
        width: 100vw;
        height: min(47.5vw, 94.6rem);
    }
    #section-21 .button-box {
        gap: min(6.8vw, 13.6rem);
        padding-top: min(34vw, 68rem);
    }
    #section-21 .button-box .cta-button-creator,
    #section-21 .button-box .cta-button-customer {
        width: min(18.1vw, 36.2rem);
    }
}

@media screen and (max-width: 767px) {
    #section-21 .button-box {
        flex-direction: column;
        align-items: center;
        gap: 10.7vw;
        padding-top: 126vw;
    }
    #section-21 .button-box .cta-button-creator,
    #section-21 .button-box .cta-button-customer {
        width: 82.7vw;
    }
}

section#section-22 {
	background:url(../img_pc/section_22.webp)no-repeat top center;
    height: px;  
}

section#section-23 {
	background:url(../img_pc/section_23.webp)no-repeat top center;
    height: px;  
}

section#section-24 {
	background:url(../img_pc/section_24.webp)no-repeat top center;
    height: px;
    position: relative;
}

section#section-25 {
	background:url(../img_pc/section_25.webp)no-repeat top center;
    height: px;  
}
section#section-26 {
	background:url(../img_pc/section_26.webp)no-repeat top center;
    height: px;  
}
section#section-27 {
	background:url(../img_pc/section_27.webp)no-repeat top center;
    height: px;  
}
section#section-28 {
	background:url(../img_pc/section_28.webp)no-repeat top center;
    height: px;  
}
section#section-29 {
	background:url(../img_pc/section_29.webp)no-repeat top center;
    height: px;  
}
section#section-30 {
	background:url(../img_pc/section_30.webp)no-repeat top center;
    height: px;
    position: relative;
}

/*背景画像を指定*/
section#section-31 {
	background:url(../img_pc/section_31.webp)no-repeat top center;
    height: px;  
}
section#section-32 {
	background:url(../img_pc/section_32.webp)no-repeat top center;
    height: px;  
}
section#section-33 {
	background:url(../img_pc/section_33.webp)no-repeat top center;
    height: px;  
}
section#section-34 {
	background:url(../img_pc/section_34.webp)no-repeat top center;
    height: px;  
}
section#section-35 {
	background:url(../img_pc/section_35.webp)no-repeat top center;
    height: px;  
}
section#section-36 {
	background:url(../img_pc/section_36.webp)no-repeat top center;
    height: px;  
}
section#section-237 {
	background:url(../img_pc/section_37.webp)no-repeat top center;
    height: px;  
}
section#section-38 {
	background:url(../img_pc/section_38.webp)no-repeat top center;
    height: px;  
}
section#section-39 {
	background:url(../img_pc/section_39.webp)no-repeat top center;
    height: px;  
}
section#section-40 {
	background:url(../img_pc/section_40.webp)no-repeat top center;
    height: px;  
}


/*背景画像を指定*/
section#section-41 {
	background:url(../img_pc/section_41.webp)no-repeat top center;
    height: px;  
}
section#section-42 {
	background:url(../img_pc/section_42.webp)no-repeat top center;
    height: px;  
}
section#section-43 {
	background:url(../img_pc/section_43.webp)no-repeat top center;
    height: px;  
}
section#section-44 {
	background:url(../img_pc/section_44.webp)no-repeat top center;
    height: px;  
}
section#section-45 {
	background:url(../img_pc/section_45.webp)no-repeat top center;
    height: px;  
}
section#section-46 {
	background:url(../img_pc/section_46.webp)no-repeat top center;
    height: px;  
}
section#section-47 {
	background:url(../img_pc/section_47.webp)no-repeat top center;
    height: px;  
}
section#section-48 {
	background:url(../img_pc/section_48.webp)no-repeat top center;
    height: px;  
}
section#section-49 {
	background:url(../img_pc/section_49.webp)no-repeat top center;
    height: px;  
}
section#section-50 {
	background:url(../img_pc/section_50.webp)no-repeat top center;
    height: px;  
}

.-pc {
    display: block;
}

.-sp {
    display: none;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;	/*親要素のbox-sizingを継承*/
}

footer {
    text-align: center;
    padding: 1.2rem;
    font-size: 1.2rem;
}

footer p {
    text-align: center;
    margin-top: 1.2rem
}

@media screen and (max-width: 767px) {
    footer,
    footer p {
        font-size: 3.1vw;
    }
}

/*-----------------タブレットサイズ-----------------------
@media (min-width: 600px) and (max-width: 1023px) {
    body {
        font-size: 3.2rem;
    }
    .-pc {
        display: none;
    }
    .-sp {
        display: block;
    }
    .wrap {
        max-width: 100%;
        width: 100%;
    }
}
----------------------------------------*/

/*-----------------スマホサイズ-----------------------*/

@media screen and (max-width:767px) {
    .-pc {
        display: none;
    }
    .-sp {
        display: block;
    }
    body {
        font-size: 4.2vw;
    }
    .wrap {
        max-width: 100%;
        width: 100%;
    }
    
    #footer {
        text-align: center;
        font-size: 0.8em;
        padding: 1em;
    }
    #footer a{
        color: #000000;
    } 
    section#section-01,
    section#section-02,
    section#section-03,
    section#section-04,
    section#section-05,
    section#section-06,
    section#section-07,
    section#section-08,
    section#section-09,
    section#section-10,
    section#section-11,
    section#section-12,
    section#section-13,
    section#section-14,
    section#section-15,
    section#section-16,
    section#section-17,
    section#section-18,
    section#section-19,
    section#section-20,
    section#section-21,
    section#section-22,
    section#section-23,
    section#section-24,
    section#section-25,
    section#section-26,
    section#section-27,
    section#section-28,
    section#section-29,
    section#section-30,
    section#section-31,
    section#section-32,
    section#section-33,
    section#section-34,
    section#section-35,
    section#section-36,
    section#section-37,
    section#section-38,
    section#section-39,
    section#section-40,
    section#section-41,
    section#section-42,
    section#section-43,
    section#section-44,
    section#section-45,
    section#section-46,
    section#section-47,
    section#section-48,
    section#section-49,
    section#section-50{
    background: none !important;
  }
}
/*----------------------------------------*/