/* sc1 */
.sc1 .fleur {
    position: absolute;
    left: 5%;
    z-index: 2;
    top: 3.3rem;
    width: min(7rem,15vw);
}
.sc1 #stroke {--dashOffset: 0;}
.sc1 .thumb > div {overflow: hidden;}
.sc1 .thumb > div .next-step {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.sc1 .thumb .svg-line {
    position: absolute;
    scale: 1.3;
    bottom: 20%;
    height: 100%;
    width: 200vw;
    right: -97vw;
    pointer-events: none;
    transform-origin: 30% center;
}
.sc1 .logo {
    position: relative;
    width: min(295px,35vw);
}
.sc1 h1 > div {
    position: relative;
    max-width: 100%;
    width: max-content;
    display: inline-block;
}
.sc1 h1 > div [class^="linear-"] {transform-origin: left bottom;}
.sc1 h1 > div:nth-of-type(1) {left: calc(min(100px,5vw) * -1);}
.sc1 h1 > div:nth-of-type(2) {left: calc(min(100px,5vw) * 1);}
.sc1 h1 > div:nth-of-type(3) {left: calc(min(180px,0vw) * -1);}
.sc1 h1 > div:nth-of-type(4) {left: 0;}
.sc1 h1 > div .linear-green {rotate: -2deg !important;}
.sc1 h1 > div .linear-purple {rotate: 2deg !important;}
.sc1 .tab-nav {
    position: relative;
    gap: 1rem 1%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.sc1 .tab-nav ul {
    padding: 0;
    list-style: none;
}
.sc1 .tab-nav > li {
    position: relative;
    row-gap: 0;
    display: flex;
    flex: 1 1 200px;
    align-items: center;
    transition: all .2s;
    flex-direction: column;
}
.sc1 .tab-nav li {padding-left: 0;}
.sc1 .tab-nav > li > ul {
    height: 0;
    overflow: hidden;
    transition: height .4s;
}
.sc1 .tab-nav li.active > ul {
    margin-top: 1rem;
    justify-content: center;
    height: calc(var(--h) + .5rem);
}
.sc1 .tab-nav > li a, .sc1 .tab-nav > li span {
    position: relative;
    line-height: 1;
    max-width: 100%;
    font-weight: 700;
    width: max-content;
    padding: .7rem 1rem;
    transition: all .3s;
    border-radius: 2rem;
    font-family: inherit;
    display: inline-block;
    text-transform: initial;
    font-size: min(20px,4vw);
    min-width: min(200px,100%);
    background: linear-gradient(90deg, rgba(73,155,185,1) 0%, rgba(107,196,168,1) 100%);
}
.sc1 .tab-nav > li a:hover, .sc1 .tab-nav > li span:hover  {color: var(--cLwhite);}
.sc1 .tab-nav > li a:hover, .sc1 .tab-nav > li span:hover {background: linear-gradient(90deg, rgba(107,196,168,1) 0%, rgba(73,155,185,1) 100%);}
.sc1 .tab-nav > li li a, .sc1 .tab-nav > li li span {
    font-weight: inherit;
    font-size: min(16px,4vw);
    padding: .4rem 1rem .5rem;
    background: #dedede!important;
}
.sc1 .tab-nav > li li a, .sc1 .tab-nav > li li span:hover{color:#000;}
.sc1 .tab-nav > li a:hover, .sc1 .tab-nav > li span:hover {background: linear-gradient(90deg, rgba(107,196,168,1) 0%, rgba(73,155,185,1) 100%);}
.sc1 ul.tab-nav li::before{content: none;}
.sc1 .tab-nav > li > a::before, .sc1 .tab-nav > li > span::before  {
    position: absolute;
    top: 50%;
    display: block;
    padding: .9rem;
    content: '' !important;
    background-size: contain;
    right: calc(100% + 0.6rem);
    transform: translateY(-50%);
    background-repeat: no-repeat;
}
.sc1 .tab-nav > li:nth-child(1) > a::before {
    background-size: 50%;
    background-position: center;
    background-image: url(../images/1.svg);
}
.sc1 .tab-nav > li:nth-child(2) > a::before {
    background-position: center;
    background-image: url(../images/2.svg);
}
.sc1 .tab-nav > li:nth-child(3) > a::before {
    background-position: center;
    background-image: url(../images/3.svg);
}
.sc1 .tab-nav > li:nth-child(4) > a::before {
    background-position: center;
    background-image: url(../images/4.svg);
}
.sc1 .tab-nav > li li a:hover {transform: rotate(0deg);}
.sc1 .tab-nav > li:nth-child(2) a {background: linear-gradient(90deg, #A6B73F 0%, #CFD98D 100%);}
.sc1 .tab-nav > li:nth-child(2) a:hover {background: linear-gradient(90deg, #CFD98D 0%, #A6B73F 100%);}
.sc1 .tab-nav > li:nth-child(3) a {background: linear-gradient(90deg, #7BC7DE 0%, #7869C6 100%);}
.sc1 .tab-nav > li:nth-child(3) a:hover {background: linear-gradient(90deg, #7869C6 0%, #7BC7DE 100%);}
.sc1 .tab-nav > li:nth-child(4) a {background: linear-gradient(90deg, #AA5DBC 0%, #FF9DB3 100%);}
.sc1 .tab-nav > li:nth-child(4) a:hover {background: linear-gradient(90deg, #FF9DB3 0%, #AA5DBC 100%);}
.sc1 .tab-nav li > ul {row-gap: 1rem;}
.sc1 .tab-nav > li > a {
    display: flex;
    column-gap: 1rem;
    align-items: center;
    justify-content: center;
}
.sc1 .tab-nav > li > a::after {
    position: relative;
    width: 0;
    height: 0;
    z-index: 1;
    content: '';
    rotate: 90deg;
    display: block;
    padding: .8rem;
    transition: all .2s;
    background-color: var(--cLblack);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../images/arrow.svg);
    mask-image: url(../images/arrow.svg);
}
.sc1 .tab-nav > li.active > a::after {rotate: -90deg;}
.sc1 img.leaf {
    position: relative;
    z-index: 1;
    margin-top: -5rem;
    margin-inline: auto;
    width: min(130px,40vw);
}
/* sc2 */
.sc2 {pointer-events: none;}
@media (min-width:768px) {
    .sc1 .tab-nav > li::before {
        position: relative;
        display: block;
        padding: .9rem;
        content: '' !important;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .sc1 .tab-nav > li:nth-child(1)::before {
        background-size: 50%;
        background-position: center;
        background-image: url(../images/1.svg);
    }
    .sc1 .tab-nav > li:nth-child(2)::before {
        background-position: center;
        background-image: url(../images/2.svg);
    }
    .sc1 .tab-nav > li:nth-child(3)::before {
        background-position: center;
        background-image: url(../images/3.svg);
    }
    .sc1 .tab-nav > li:nth-child(4)::before {
        background-position: center;
        background-image: url(../images/4.svg);
    }
    .sc1 .tab-nav > li> a::before {content:none !important;}
    /* .sc1 .tab-nav li:hover > ul {margin-top: 0;} */
    .sc1 .tab-nav {row-gap: 3rem;}
    .sc1 .tab-nav > li {row-gap: 1.7rem;}
}
@media (min-width:1024px) {
}
@media (min-width:1200px) {
    h1 {font-size: min(48px,2.6vw);}
    h2 {font-size: min(34px,2vw);}
    .ttl-28 {font-size: min(26px,1.5vw);}
    header .primary {column-gap: 1rem;}
    .sc1 .wp-thumb {
        overflow: hidden;
        position: relative;
    }
    .sc1 .thumb {display: flex;}
    .sc1 .thumb > div {
        position: relative;
        width: 100vw;
        height: 100%;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }
    .sc1 .thumb > div:first-of-type .container-xxl {
        position: relative;
        margin-bottom: auto;
    }
    .sc1 .thumb > div:last-child .container-xxl {
        position: relative;
        height: 100%;
        row-gap: 26vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .sc1 .thumb > div:first-child ~ div .container-xxl {
        height: 100%;
        display: flex;
        row-gap: 5rem;
        flex-direction: column;
        justify-content: space-between;
    }
    .sc1 .fleur {
        top: 10%;
        left: 5%;
    }
    .sc1 .logo {
        width: 220px;
        margin-bottom: 1rem;
    }
    .sc1 .tab-nav {justify-content: space-between;}
    .sc1 h1 > div:nth-of-type(4) {left: calc(min(155px,9vw) * 1);}
    .sc1 .tab-nav > :is(li.active,li) > ul {
        height: auto;
        overflow: visible;
        justify-content: inherit;
    }
    .sc1 .tab-nav li > ul {row-gap: .5rem;}
    .sc1 .tab-nav > li {
        position: relative;
        flex: inherit;
        max-width: 28%;
    }
    .sc1 .tab-nav > li a {font-size: inherit;}
    .sc1 .tab-nav > li > a::after {
        position: absolute;
        top: 110%;
        width: 0;
        height: 0;
        left: 45%;
        z-index: 1;
        content: '';
        rotate: 90deg;
        display: block;
        padding: .8rem;
        transition: all .2s;
        transform: translateX(-50%);
        background-color: var(--cLblack);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-image: url(../images/arrow.svg);
        mask-image: url(../images/arrow.svg);
    }
    .sc1 .tab-nav > li:hover > a::after {top: 120%;}
    .sc1 .thumb > div:nth-child(2) .svg-line {top: -7%;}
    .sc1 .tab-nav > li:nth-child(1) {left: 3%;}
    .sc1 .tab-nav > li:nth-child(3) {left: -3%;}
    .sc1 .tab-nav > li:nth-child(4) {left: -8%;}
    .sc1 .tab-nav > li::before {
        position: absolute;
        content: '';
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .sc1 .tab-nav > li::before {
        position: absolute;
        left: 50%;
        padding: .9rem;
        content: '' !important;
        background-size: contain;
        bottom: calc(100% + .5rem);
        transform: translateX(-50%);
        background-repeat: no-repeat;
    }
    .sc1 .thumb .svg-line {
        scale: 1;
        bottom: 6%;
        transform-origin: inherit;
    }
}
@media (min-width:1366px) {
    header .primary {column-gap: 3rem;}
    .sc1 .fleur {
        top: 10%;
        left: 0;
        width: min(176px,10vw);
    }
    .sc1:not(:has( .wp-thumb.scrolled)) + .sc2 {margin-top: -7rem;}
    .sc1 + .sc2 {margin-top: -7rem;transition:all .5s}
}
@media (min-width:1660px) {
    header .primary {column-gap: 4rem;}
    .sc1 .tab-nav > li a {
        font-size: min(20px,4vw);
    }
}
@media (min-width:1920px) {
    .sc1 .fleur {left: -5rem;}
    .next-step {
        right: inherit;
        left: min(100% + 6vw);
    }
    .sc1 .logo {
        width: min(295px,35vw);
        margin-bottom: 2.5rem;
    }
    .sc1 .tab-nav li > ul {row-gap: 1rem;}
    .sc1:not(:has( .wp-thumb.scrolled)) + .sc2 {margin-top: -7rem;}
}