@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Hyerin Lim. (Weaverloft Corp.)
 * 2. Production Date: 2023-09-26
 * 3. Client: (사)함께만드는세상 사회연대은행
 */

/*========== Base ==========*/
* {font-family: 'NanumSquareNeo', sans-serif;letter-spacing: -0.04em; } 
 *, ::before, ::after {box-sizing: border-box; } 
html {width: 100%;font-family: 'NanumSquareNeo', sans-serif;font-weight: 400;color: #111;letter-spacing: -0.04em;-webkit-tap-highlight-color: transparent;scroll-behavior: smooth; } 
body {width: 100%;margin: 0;font-size: 16px;color: #111;line-height: 1.25;letter-spacing: -0.04em; } 
a {display: inline-block; text-decoration: none;color: #111; -webkit-tap-highlight-color: transparent} 
h1, h2, h3, h4, h5, h6 {font-weight: 800;letter-spacing: -0.06em; } 
figure, picture{display: inline-block;}
img, figure img, picture img {width: 100%; vertical-align: middle;-webkit-user-drag: none; } 
video{width: 100%;}
.none {display: none; } 
.hidden {position: absolute;left: -9999px;display: none;visibility: hidden;opacity: 0;overflow: hidden; } 
.clearfix:before, .clearfix:after {display: block;content: '';line-height: 0;clear: both; } 

html, body{background-color: #fff !important;}
.seoul{font-family: 'SeoulHangang', sans-serif;}
.seoul-c{font-family: 'SeoulHangangC', sans-serif;}
.pretendard{font-family: 'Pretendard', sans-serif;}
:root { color-scheme: light only;}
@media (prefers-color-scheme: dark) {
    html, body { background: #fff !important; background-color: #fff !important; }
}

/*========== Common ==========*/
#wrap .wrap_inner { position: relative; overflow: hidden;}
#main{width: 1920px; margin: 0 auto; }
.section .sec-inner{width: 1200px; margin: 0 auto;}
.section .sec-title{position: relative; width: fit-content; text-align: center;}
.section .sec-title .point-tit{position: relative;}
.section .sec-title .point{ position: absolute; left: 0; font-size: 1rem; text-align: left; overflow: hidden;}
.section .sec-title .point img{ vertical-align: top; font-size: 1rem;}
.section .bold{font-weight: 700;}
.section .support-btn {font-size: 1.875rem; font-weight: 800; background-repeat: no-repeat; background-size: 100% auto; transition: all 300ms;}
.section .support-btn:hover{transition: all 300ms;}
.section .support-btn span{padding-right: 1.467em; background-image: url('../img/btn-arrow.svg'); background-repeat: no-repeat; background-position: right center; background-size: 1.067em auto; transition: background-image 300ms;}
.section .support-btn:hover span{background-image: url('../img/btn-arrow-w.svg'); transition: background-image 300ms;}
.section .chk-icon{display: inline-block; width: 20px; height: 20px; margin-right: 4px; background-image: url('../img/icon-check.svg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; vertical-align: middle;}
.section .path-wrap svg{width: 100%;}
video.blend {background-color: transparent !important; mix-blend-mode: multiply;}
.mo{display: none;}
@media (max-width: 1920px){
    #main{width: 100%; }
}
@media (max-width: 1240px){
    .section .sec-inner{width: 100%; padding: 0 32px;}
}
@media (max-width: 1080px){
    .section .support-btn {font-size: 2.778vw;}
}
@media (max-width: 960px){

}
@media (max-width: 720px){
    .section .sec-inner{padding: 0 16px;}
    .section .support-btn:hover span{background-image: url('../img/btn-arrow.svg');}
    .pc{display: none;}
    .mo{display: block;}
}
@media (max-width: 560px){
    .section .support-btn {font-size: clamp(1.063rem, 3.571vw, 1.250rem);}
    .section .chk-icon{display: none;}
}
@media (max-width: 340px){
    .section .sec-title{word-break: keep-all;}
    .section .sec-text{word-break: keep-all;}
    .section .support-btn {font-size: clamp(0.875rem, 4.444vw, 1rem);}
}

/*========== Animation ==========*/
.fadeup{opacity: 0; transform: translate3d(0, 100px, 0); }
.zoomin{opacity: 0; transform: scale(0.6);}
.fade-right{opacity: 0; transform: translate3d(-100px, 0, 0); }
.fade-left{opacity: 0; transform: translate3d(100px, 0, 0); }
.ani-on{ animation: ani-on 0.6s linear forwards;}
@keyframes ani-on{
    to{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.support-btn.ani-on{animation-duration: 1s;}

/*========== Section Main ==========*/
.sec-main {position: relative; z-index: 1; height: 112dvh; height: 112vh; height: calc(var(--vh, 1vh) * 112); max-height: 1214px;}
.sec-main .main-back { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; background-image: url('../img/main-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: right bottom;}
.sec-main .main-back::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("../img/ink-photo-frame.png"); background-size: 150% 150%; background-position: 50% 50%; }
.sec-main .main-back::after { content: ""; position: absolute; top: 0; left: 50%; width: 4000%; height: 100%; background-image: url("../img/ink-transition-sprite.png"); background-size: 100% 100%; transform: translateX(-1.25%); }
.sec-main .main-back.is-active::after { animation: ink-transition 2s steps(39) 0.5s forwards; }
@keyframes ink-transition {
    0% { transform: translateX(-1.25%); }
    99% { transform: translateX(-98.75%); opacity: 1; }
    100% { transform: translateX(-98.75%); opacity: 0; }
}
.sec-main .sec-inner{width: 1400px; padding-top: 46px; transition: padding 300ms;}
.sec-main .logo{ width: 30.000em; min-width: 300px; font-size: 1rem; }
.sec-main .logo img{aspect-ratio: 10 / 0.85;}
.sec-main .sec-title {width: 49.625em; margin: 17.500em 0 46px; transform: translateX(-30px); opacity: 0; font-size: 1rem;}
.sec-main .sec-title svg.title-svg text{width: 100%; font-family: 'NanumSquareNeo'; font-size: 104px; font-weight: 800; letter-spacing: -0.025em;}
.sec-main .sec-title.active{ animation: opacity 2s linear forwards; animation-delay: 0.6s; }
@keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.sec-main .sec-title .point{ top: 40%; left: -3.125em; width: 41.750em; height: 1.750em;}
.sec-main .sec-title .point img{ width: 41.750em; height: 1.750em;}
.sec-main .support-btn {padding: 0.711em 1.947em; background-image: url('../img/btn-w.png'); font-size: 2.375em;}
.sec-main .support-btn span{padding-right: 1.316em; background-size: 1.000em auto; }
.sec-main .support-btn:hover{ background-image: url('../img/btn-b.png'); color: #fff;}
@media (max-width: 1940px){

}
@media (max-width: 1540px){
    .sec-main {height: 97dvh; height: 97vh; height: calc(var(--vh, 1vh) * 97);}
    .sec-main .sec-inner{width: 100%; padding: 46px 32px 0;}
    .sec-main .sec-title {font-size: 1.039vw; transform: translateX(0); transition: transform 0.3s;}
    .sec-main .sec-title .point{left: -1.563em; font-size: 0.974vw;}
    .sec-main .sec-title .point img{font-size: 0.974vw;}
    .sec-main .support-btn { font-size: clamp(1.063rem, 2.468vw, 2.375em);}
}
@media (max-width: 1540px) and (max-height: 1000px){
    .sec-main .text-wrap{ display: flex; flex-flow: column; justify-content: center; align-items: flex-start; height: calc(100dvh - 100px); height: calc(100vh - 100px); height: calc(var(--vh, 1vh) * 100 - 100px); }
    .sec-main .sec-title {margin-top: 0;}
}
@media (max-width: 1240px){
    .sec-main .logo{ width: 15.000em; font-size: clamp(1rem, 2.5vw, 2rem);}

}
@media (max-width: 1080px) and (max-height: 1000px){
    .sec-main .text-wrap{ display: block; height: auto;}
    .sec-main .sec-title {margin-top: 14vh;}
}
@media (max-width: 960px){
    
}
@media (max-width: 720px){
    .sec-main {min-height: 680px;}
    .sec-main .sec-inner{width: auto; padding: 18px 16px 0;}
    .sec-main .logo{ width: 55%;}
    .sec-main .sec-title{width: 85%;margin: 86px 0 30px; font-size: 1rem; transition: width 300ms;}
    .sec-main .sec-title .point{top: 38%; left: -0.938em; font-size: 1.528vw;}
    .sec-main .sec-title .point img{ font-size: 1.528vw;}
    .sec-main .support-btn {padding: 0.667em 2.000em; background-image: url('../img/btn-w.png'); font-size: clamp(1.063rem, 4.722vw, 1.563rem);}
    .sec-main .support-btn span{padding-right: 25px; background-size: 19px auto;}
    .sec-main .support-btn:hover{ background-image: url('../img/btn-w.png'); color: #111;}
}
@media (max-width: 560px){
    .sec-main .main-back {background-image: url('../img/main-bg-mo.png'); background-size: cover; background-position: 80% 100%;}
    .sec-main .support-btn {padding: 0.853em 2.147em; font-size: clamp(1.063rem, 3.571vw, 1.250rem);}
    .sec-main .logo{ width: 20em; min-width: auto; font-size: 1rem;}
    .sec-main .sec-title{width: 100%;}
    .sec-main .sec-title .point{top: 40%;  font-size: 1.667vw;}
    .sec-main .sec-title .point img{ font-size: 1.667vw;}
}
@media (max-width: 340px){
    .sec-main .logo{ width: 92%; }
    .sec-main .sec-title {margin: 70px 0 20px;}
    .sec-main .sec-title .point{top: 35%;}
    .sec-main .support-btn {font-size: clamp(0.875rem, 4.444vw, 1rem);}
}

/*========== Section01 ==========*/
.section01 {margin-top: -180px; padding-top: 290px; background-image: url('../img/sec01-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center;}
.section01 .content-box {position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; overflow: hidden;}
.section01 .content-box .text-box {z-index: 1; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.section01 .content-box .text-box .sec-title{margin-bottom: 0.704em; font-size: 3.375rem; line-height: 1.444em; color: #000; text-align: left;}
.section01 .content-box .text-box .sec-text{font-size: 1.563rem; line-height: 1.600em; color: #000; text-align: left;}

/* con-box01 */
.section01 .con-box01 { align-items: flex-end;}
.section01 .con-box01 .sec-vis-wrap{z-index: 2; width: 37%; margin-right: -14.375em; font-size: 1rem;}
.section01 .con-box01 .sec-vis-wrap figure img{aspect-ratio: 1 / 1.32;}
.section01 .con-box01 .text-box{width: 75.375em; height: 49.000em; margin-bottom: 1.250em; background-image: url('../img/sec01-con01.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; font-size: 1rem;}
.section01 .con-box01 .text-box .text-wrap{margin-top: 2.500em;}
.section01 .con-box01 .path-wrap{position: absolute; top: 5.625em; right: -4.375em; z-index: 0; width: 36.250em; font-size: 1rem;}
.section01 .con-box01 .path-wrap .path{stroke-dasharray:1000; stroke-dashoffset:1000; }
.section01 .con-box01 .path-wrap .path.ani{ animation: path01 2s linear forwards; }
@keyframes path01 {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

/* con-box02 */
.section01 .con-box02 { align-items: flex-end; margin-top: 5.000em; padding-bottom: 31.250em; font-size: 1rem;}
.section01 .con-box02 .con-bg { width: 86.875em; font-size: 1rem;}
.section01 .con-box02 .con-bg img{ aspect-ratio: 1 / 0.775; mix-blend-mode: multiply;}
.section01 .con-box02 .bg-txt-box{position: relative; left: -18.750em; font-size: 1rem;}
.section01 .con-box02 .bg-txt-box .path-wrap{position: absolute; top: 8.750em; left: 3.750em; z-index: 0; width: 42.188em; font-size: 1rem;}
.section01 .con-box02 .bg-txt-box .path-wrap .path{stroke-dasharray:1500; stroke-dashoffset:-1500; }
.section01 .con-box02 .bg-txt-box .path-wrap .path.ani{animation: path02 1.5s linear forwards; }
@keyframes path02 {
    0% { stroke-dashoffset: -1500; }
    100% { stroke-dashoffset: 0; }
}
.section01 .con-box02 .bg-txt-box .text-box{position: absolute; top: 4.063em; left: 40%; width: 65.625em; height: 57.000em; background-image: url('../img/sec01-con02.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; font-size: 1rem;}
.section01 .con-box02 .bg-txt-box .text-box .text-wrap{margin: 10.313em 0 0 4.688em; font-size: 1rem;}
.section01 .con-box02 .sec-vis-wrap{z-index: 2; width: 42.75%; margin-left: -28.750em; margin-bottom: 5.000em; font-size: 1rem;}
.section01 .con-box02 .sec-vis-wrap figure img{aspect-ratio: 1 / 0.63;}
.section01 .con-box02 .bg-extra{position: absolute; bottom: 0; left: 24%; width: 41.625em; mix-blend-mode: multiply; font-size: 1rem;}
.section01 .con-box02 .bg-extra img{aspect-ratio: 1 / 1.34;}

/* con-box03 */
.section01 .con-box03 {z-index: 2; align-items: flex-start; gap: 4%; margin-top: -10.000em; font-size: 1rem;}
.section01 .con-box03 .text-box{align-items: flex-start; width: 46%;margin-top: 6.250em; font-size: 1rem;}
.section01 .con-box03 .sec-vis-wrap{width: 45%;}
.section01 .con-box03 .sec-vis-wrap figure img{aspect-ratio: 1 / 1.08;}

/* con-box04 */
.section01 .con-box04 {display: block; margin-top: -26.250em; padding-top: 7.500em;font-size: 1rem;}
.section01 .con-box04 .path-wrap{position: absolute; top: 0; right: -4.625em; z-index: 0; width: 36.875em; font-size: 1rem;}
.section01 .con-box04 .path-wrap .path{stroke-dasharray:2000; stroke-dashoffset:2000;  }
.section01 .con-box04 .path-wrap .path.ani{animation: path03 2s linear forwards; }
@keyframes path03 {
    0% { stroke-dashoffset: 2000; }
    100% { stroke-dashoffset: 0; }
}
.section01 .con-box04 .bg-txt-box{position: relative; z-index: 1; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; width: 100%; padding: 21.750em 0 8.750em 15.000em; background-image: url('../img/sec01-con04.png'); background-repeat: no-repeat; background-position: top left; background-size: 150% auto;font-size: 1rem;}
.section01 .con-box04 .bg-txt-box .text-box{margin-top: 10.000em;font-size: 1rem;}
.section01 .con-box04 .sec-vis-wrap{margin-left: -4.375em; width: 52%; font-size: 1rem;}
.section01 .con-box04 .sec-vis-wrap figure img{aspect-ratio: 1 / 0.96;}
@media (max-width: 1940px){

}
@media (max-width: 1540px){
    .section01 .content-box .text-box .sec-title{ font-size: 3.506vw; }
    .section01 .content-box .text-box .sec-text{font-size: 1.623vw;}

    /* con-box01 */
    .section01 .con-box01 .sec-vis-wrap {font-size: 1.039vw;}
    .section01 .con-box01 .text-box{font-size: 1.039vw;}
    .section01 .con-box01 .text-box .text-wrap{padding-left: 8%;}
    .section01 .con-box01 .path-wrap { font-size: 1.039vw;}
    
    /* con-box02 */
    .section01 .con-box02 { margin-top: 7em; padding-bottom: 24.25em; font-size: 1.039vw;}
    .section01 .con-box02 .con-bg { font-size: 1.039vw;}
    .section01 .con-box02 .bg-txt-box{left: -24%; font-size: 1.039vw;}
    .section01 .con-box02 .bg-txt-box .path-wrap{font-size: 1.039vw;}
    .section01 .con-box02 .bg-txt-box .text-box{ font-size: 1.039vw;}
    .section01 .con-box02 .bg-txt-box .text-box .text-wrap{font-size: 1.039vw;}
    /* .section01 .con-box02 .sec-vis-wrap{font-size: 1.039vw;} */
    .section01 .con-box02 .sec-vis-wrap{margin-left: -34%;}
    .section01 .con-box02 .bg-extra{font-size: 1.039vw;}

    /* con-box03 */
    .section01 .con-box03{gap: 2%; font-size: 1.039vw;}
    .section01 .con-box03 .sec-vis-wrap{width: 40%;}
    .section01 .con-box03 .text-box{width: 56%; margin-top: 5.000em; font-size: 1.039vw;}

    /* con-box04 */
    .section01 .con-box04{margin-top: -18.25em; font-size: 1.039vw;}
    .section01 .con-box04 .path-wrap{font-size: 1.039vw;}
    .section01 .con-box04 .bg-txt-box{padding: 20.75em 0 12.75em 15.000em; font-size: 1.039vw;}
    .section01 .con-box04 .bg-txt-box .text-box{    margin-top: 8em;font-size: 1.039vw;}
    .section01 .con-box04 .sec-vis-wrap{ width: 45%; margin-left: 0; font-size: 1.039vw;}

}
@media (max-width: 1280px){
    .section01 .content-box .text-box .sec-title{ font-size: 3.906vw; }
    .section01 .content-box .text-box .sec-text{font-size: 1.953vw;}

    /* con-box01 */
    .section01 .con-box01 .sec-vis-wrap{margin-right: -18%;}

    /* con-box04 */
    .section01 .con-box04 .bg-txt-box .text-box {margin-top: 4em;}
}
@media (max-width: 1080px){
    .section01 .con-box04 .path-wrap{top: -5vh;}
}
@media (max-width: 960px){
    
}
@media (max-width: 720px){
    .section01{margin-top: -240px;}
    .section01 .content-box {flex-flow: column; overflow: inherit; }
    .section01 .content-box .text-box .sec-title{ font-size: clamp(1.750rem, 5vw, 2.250rem); }
    .section01 .content-box .text-box .sec-text{font-size: clamp( 0.938rem, 3.611vw, 1.625rem);}

    /* con-box01 */
    .section01 .con-box01{ align-items: center;}
    .section01 .con-box01 .text-box{order: 1; position: relative; width: 39.500em; height: auto; aspect-ratio: 10 / 7.5; margin-bottom: 0; background-image: url('../img/sec01-con01-mo.png'); background-position: 0 50%; background-size: 110% auto; font-size: clamp( 1rem, 3.333vw, 1.750rem);}
    .section01 .con-box01 .text-box .text-wrap{ /*width: calc(100vw - 3.50em);*/margin: 0; margin-top: 1em; padding: 0 10%; word-break: keep-all;}
    .section01 .con-box01 .sec-vis-wrap{ order: 2; align-self: flex-start; width: 85%; max-width: 450px; margin: -20% 0 0 0; font-size: 1rem;}
    .section01 .con-box01 .path-wrap{ top: -18vh; right: inherit; left: -1.500em; width: 12.500em; font-size: clamp( 1rem, 4.167vw, 2rem);}

    /* con-box02 */
    .section01 .con-box02{align-items: center; margin-top: 3em; padding-bottom: 8.250em; font-size: 1rem;}
    .section01 .con-box02 .bg-txt-box{left: -14vw; font-size: 1rem;}
    .section01 .con-box02 .bg-txt-box .path-wrap{ left: initial; right: -30%; top: -3vh; width: 18em; font-size: clamp( 1rem, 4.167vw, 2rem);}
    .section01 .con-box02 .bg-txt-box .path-wrap .path{stroke-dasharray:1500; stroke-dashoffset:1500; }
    .section01 .con-box02 .bg-txt-box .path-wrap .path.ani{animation: path02-1 2s linear forwards; }
    @keyframes path02-1 {
        0% { stroke-dashoffset: 1500; }
        100% { stroke-dashoffset: 0; }
    }
    .section01 .con-box02 .con-bg{width: 30.125em; font-size: clamp( 1rem, 3.333vw, 1.750rem);}
    .section01 .con-box02 .bg-txt-box .text-box{top: 5%; left: 4%; width: 33.750em; height: auto; aspect-ratio: 10 / 9; padding-top: 5.000em; font-size: clamp( 1rem, 3.333vw, 1.750rem);}
    .section01 .con-box02 .bg-txt-box .text-box .text-wrap{margin: 0; font-size: 1rem; word-break: keep-all;}
    .section01 .con-box02 .sec-vis-wrap{align-self: flex-end; width: 95%; max-width: 580px; margin: 60px -10px 0 0;}

    /* con-box03 */
    .section01 .con-box03{align-items:center; gap: 80px;}
    .section01 .con-box03 .text-box{order: 1; align-items:center; width: 100%; padding: 0 16px;}
    .section01 .con-box03 .text-box .sec-text{text-align: center; word-break: keep-all;}
    .section01 .con-box03 .sec-vis-wrap{order: 3; width: 70%; margin-left: -20%;}
    .section01 .con-box03 .bg-extra{position: absolute; bottom: 35%; right: -6.750em; order: 2; width: 16.750em; font-size: clamp(1rem, 4.444vw, 1.5rem);}
    .section01 .con-box03 .bg-extra img{aspect-ratio: 1/ 1.34;}
    
    /* con-box04 */
    .section01 .con-box04{margin-top: -12.000em; padding: 0; font-size: 2.222vw;}
    .section01 .con-box04 .bg-txt-box{ flex-flow: column; align-items: center; padding: 9.375em 1em 5.000em; background-image: url('../img/sec01-con04-mo.png'); background-position: 75% 0; font-size: 3.889vw;}
    .section01 .con-box04 .bg-txt-box .text-box{align-self: flex-start; margin: 0; font-size: clamp( 1rem, 2.222vw, 1.750rem);}
    .section01 .con-box04 .sec-vis-wrap{align-self: flex-end;width: 100%; margin-right: -15%; font-size: 2.222vw;}
}
@media (max-width: 560px){
    /* con-box01 */
    .section01 .con-box01 .text-box .text-wrap{padding: 0 26%;}
    /* con-box02 */
    .section01 .con-box02 .bg-txt-box .path-wrap{top: -10vh;}
}
@media (max-width: 430px){
    /* con-box01 */
    .section01 .con-box01 .path-wrap{top: -190px;}
    .section01 .con-box01 .sec-vis-wrap{margin: -30% 0 0 0;}
    /* con-box02 */
    .section01 .con-box02{margin-top: 1em;}
    .section01 .con-box02 .bg-txt-box{left: -25vw;}
    .section01 .con-box02 .bg-txt-box .text-box{left: 20%;}
    .section01 .con-box02 .bg-txt-box .path-wrap{top: -10vh; right: -27%; width: 65%;}
    .section01 .con-box02 .bg-txt-box .text-box .text-wrap{width: 62%;}
    /* con-box03 */
    .section01 .con-box03 .bg-extra{width: 14.75em;}
}
@media (max-width: 340px){
    /* con-box01 */
    .section01 .con-box01 .text-box .text-wrap{width: calc(100vw - 1.5em); padding: 0;}
    /* con-box02 */
    .section01 .con-box02 .bg-txt-box .text-box{align-items: flex-start;}
    .section01 .con-box02 .bg-txt-box .text-box .text-wrap{width: 50%;margin-left: 15%;}
}

/*========== Section02 ==========*/
.section02{position: relative; z-index: 1; display: flex; align-items: center; width: 100%; height: 120.000em; /*aspect-ratio: 1 / 1;*/ margin-top: -15.625em; background-image: url('../img/sec02-bg.png'); background-size: auto 105%; background-repeat: no-repeat; background-position: 50% 0; font-size: 1rem;}
.section02 .sec-inner{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.section02 .text-wrap{width: calc(100% - 23.125em); margin-bottom: 12.250em; font-size: 1rem; color: #fff; }
.section02 .sec-title{ font-size: 4.063rem; line-height: 1.323em; text-align: left; white-space: nowrap;}
.section02 .sec-text{margin: 1.867em 0 1.800em; font-size: 1.875rem;}
.section02 .sec-txt{font-size: 1.375rem; line-height: 1.727em;}
.section02 .support-btn{margin-top: 2.667em; padding: 1.133em 1.867em; background-image: url('../img/btn-o.png'); color: #fff;}
.section02 .support-btn:hover{ background-image: url('../img/btn-o2.png'); }
.section02 .support-btn span{background-image: url('../img/btn-arrow-w.svg');}
.section02 .sec-vis-wrap{width: 23.125em;/* height: 740px;*/ font-size: 1rem;}
.section02 .sec-vis-wrap svg.girl{width: 270%; height: 100%; stroke-dasharray:6100; stroke-dashoffset:4100; font-size: 1rem; transform: translateY(20px);}
.section02 .sec-vis-wrap svg.girl.ani{animation: girlAni 3s linear forwards; }
@keyframes girlAni {
    0% { stroke-dashoffset: 4100; }
    100% { stroke-dashoffset: 0; }
}
@media (max-width: 1920px){

}
@media (max-width: 1540px){
    .section02{font-size: 1.039vw;}
    .section02 .sec-inner{gap: 8vw;}
    .section02 .text-wrap{width: auto; margin-bottom: 8.25em; font-size: 1.039vw;}
    .section02 .sec-title{ font-size: 4.221vw;}
    .section02 .sec-text{font-size: 1.948vw;}
    .section02 .sec-txt{font-size: 1.429vw;}
    .section02 .sec-vis-wrap{font-size: 1.039vw;}
    .section02 .support-btn {font-size: 1.948vw;}
}
@media (max-width: 1240px){

}
@media (max-width: 1080px){
    .section02 .sec-title{ font-size: clamp(2rem, 4.167vw, 2.875rem);}
    .section02 .sec-text{font-size: clamp(1.063rem, 1.944vw, 1.313rem);}
    .section02 .sec-txt{font-size: clamp(0.875rem, 1.481vw, 1rem)}
    .section02 .support-btn {font-size: clamp(1.063rem, 1.944vw, 1.313rem);}
}
@media (max-width: 960px){
    
}
@media (max-width: 720px){
    .section02{z-index: 10; height: 105dvh; height: 105vh; height: calc(var(--vh, 1vh) * 105); margin-top: -7.625em; background-image: url('../img/sec02-bg-mo.png'); background-size: cover; background-position: top center; font-size: 2.222vw;}
    /* .section02 .trigger{position: absolute; top: 0; width: 50%; background-color: red;} */
    .section02 .sec-inner{display: inline-block; padding-top: 20vh;}
    .section02 .text-wrap{position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100dvh; height: 100vh; height: calc(var(--vh, 1vh) * 100); background-color: rgba(0, 0, 0, 0.6); text-align: center; opacity: 0; }
    .section02 .sec-title{width: 100%; font-size: clamp(1.875rem, 8.333vw, 2.500rem); text-align: center;}
    .section02 .sec-text{font-size: clamp(1.063rem, 4.722vw, 1.563rem);}
    .section02 .sec-txt{font-size: clamp(0.875rem, 3.889vw, 1.313rem)}
    .section02 .support-btn {font-size: clamp(1.063rem, 4.722vw, 1.563rem);}
    .section02 .support-btn:hover{ background-image: url('../img/btn-o.png'); }
    .section02 .support-btn:hover span{background-image: url('../img/btn-arrow-w.svg');}
    .section02 .sec-vis-wrap{width: 40%; min-width: 230px; margin: 0 auto; font-size: 1rem;}
    .section02 .sec-vis-wrap svg.girl{transform: none;}
}
@media (max-width: 340px){
    .section02 .sec-title{font-size: clamp(1.625rem, 8.333vw, 1.875rem);}
    .section02 .sec-vis-wrap{min-width: 210px;}
    .section02 .support-btn  {font-size: clamp(0.875rem, 4.722vw, 1.063rem);}
}

/*========== Section03 ==========*/
.section03{position: relative; z-index: 11; margin-top: -32.500em; padding: 28.125em 0 12.500em; background-image: url('../img/sec03-bg.png'); background-size: cover; background-repeat: no-repeat; font-size: 1rem;}
.section03 .sec-title{ margin: 0 auto; font-size: 3.000rem; line-height: 1.354em;}
.section03 .sec-title .point{ bottom: -1.313em; left: -1.375em; width: 20.625em; height: 1.313em;}
.section03 .sec-title .point img{width: 20.625em; height: 1.313em;}
.section03 .sec-text-wrap{position: relative; min-height: 7.750em; margin-top: 3.500em; font-size: 1rem; transition: height 1s;}
.section03 .sec-text-wrap > div{position: absolute; opacity: 0; transition: opacity 1s ease-in-out; width: 100%; }
.section03 .sec-text-wrap > div.active{opacity: 1;}
.section03 .sec-text-wrap .sec-text-wrap01{padding-top: 1em; font-size: 1rem;}
.section03 .sec-text-wrap .sec-text-wrap01 .sec-text{font-size: 2.000rem; line-height: 1.438em;text-align: center;}
.section03 .sec-text-wrap .sec-text-wrap01 .sec-text span:not(.bold){font-size: 1.625rem;}
.section03 .sec-text-wrap .sec-text-wrap02 .sec-text{margin-bottom: 0.800em; padding: 0 3.500em; font-size: 1.250rem; line-height: 1.500em;text-align: center;}
.section03 .sec-text-wrap .sec-text-wrap02 .sec-text-dec{font-size: 0.875rem; color: #444; text-align: center;}

.graph-slide-wrap{width: 100%; margin: 5.000em 0 0; overflow: hidden; font-size: 1rem;}
.graph-slide-wrap .graph-swiper{position: relative;}
.graph-slide-wrap .graph-slide {position: relative; display: flex; flex-flow: column; align-items: center; justify-content: space-between; width: 62.500em; height: 34.375em; padding: 3.750em 7.250em 2.500em; border-radius: 16px; background-color: rgba(255,255,255,0.36); font-size: 1rem;}
.graph-slide .graph-tit{font-size: 2.125rem; line-height: 1; text-align: center;}
.graph-slide .graph-tit span{font-weight: 700;}
.graph-slide .graph-box{width: 100%;}
.graph-slide .graph-box .graph{width: 100%;}
.graph-slide01 .graph-box .graph img{aspect-ratio: 1 / 0.4;}
.graph-slide02 .graph-box .graph img{aspect-ratio: 1 / 0.66;}
.graph-slide03 .graph-box .graph img{aspect-ratio: 1 / 0.36;}
.graph-slide02 .graph-box{width: 60%;}
.graph-slide .sec-text-dec{ font-size: 0.875rem; line-height: 1.571em; color: #333; text-align: center;}

.graph-swiper-control{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 0.938em; width: fit-content; margin: 2.250em auto 0; font-size: 1rem;}
.graph-swiper-control .swiper-pagination, .graph-swiper-control .swiper-button-next, .graph-swiper-control .swiper-button-prev{ position: static; display: inline-block; margin: 0;}
.graph-swiper-control .swiper-pagination{width: 2.222em; font-size: 1.125rem; font-weight: 800; text-align: center;}
.graph-swiper-control .swiper-button-prev:after, .graph-swiper-control .swiper-button-next:after{ display: none;}
.graph-swiper-control .swiper-button-next, .graph-swiper-control .swiper-button-prev{ width: 52px; height: 52px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; transition: background-image 300ms;}
.graph-swiper-control .swiper-button-next{background-image: url('../img/swiper-next.svg');}
.graph-swiper-control .swiper-button-prev{background-image: url('../img/swiper-prev.svg');}
.graph-swiper-control .swiper-button-next:hover{background-image: url('../img/swiper-next-hover.svg');}
.graph-swiper-control .swiper-button-prev:hover{background-image: url('../img/swiper-prev-hover.svg');}
.graph-swiper-control .swiper-button-next:active{transform: rotate(10deg);}
.graph-swiper-control .swiper-button-prev:active{transform: rotate(-10deg);}
@media (max-width: 1940px){

}
@media (max-width: 1540px){
    .section03{margin-top: -30.5em;}
}
@media (max-width: 1240px){
    .section03{margin-top: -26.5em;}
}
@media (max-width: 1080px){
    .section03{margin-top: -22.5em; font-size: 1.481vw;}
    .section03 .sec-title{font-size: clamp(1.313rem, 4.444vw,3.000rem);}
    .section03 .sec-title .point{ font-size: 1.481vw; }
    .section03 .sec-title .point img{font-size: 1.481vw; }
    .section03 .sec-text-wrap{font-size: 1.481vw;}
    .section03 .sec-text-wrap .sec-text-wrap01 {font-size: 1.481vw;}
    .section03 .sec-text-wrap .sec-text-wrap01 .sec-text{font-size: clamp(1.125rem, 2.963vw, 2.000rem); word-break: keep-all; }
    .section03 .sec-text-wrap .sec-text-wrap01 .sec-text span:not(.bold){font-size: clamp(1rem, 2.407vw, 1.625rem); }
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text{padding: 0; font-size: clamp(0.875rem, 1.852vw, 1.250rem); }
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text-dec{font-size: clamp(0.625rem, 1.296vw, 0.875rem);}

    .graph-slide-wrap{ font-size: 1.481vw;}
    .graph-slide-wrap .graph-slide { font-size: 1.481vw;}
    .graph-slide .graph-tit{font-size: 3.148vw;}
    .graph-slide .sec-text-dec{ font-size: clamp(0.688rem, 1.296vw, 0.875rem);}

    .graph-swiper-control{font-size: 1.481vw;}
    .graph-swiper-control .swiper-pagination{ font-size: clamp(0.750rem, 1.667vw, 1.125rem);}
    .graph-swiper-control .swiper-button-next, .graph-swiper-control .swiper-button-prev{width: 4.815vw; min-width: 36px; height: 4.815vw; min-height: 36px;}
}
@media (max-width: 960px){
    .graph-slide-wrap .graph-slide{padding: 3.750em 5.000em 2.500em;}
}
@media (max-width: 720px){
    .section03{ margin-top: -16.5em; padding: 16.813em 0 6.250em; background-position: 54% top; font-size: 1rem;}
    .section03 .sec-title{font-size: clamp(1.313rem, 5.833vw,2.500rem);line-height: 1.381em;}
    .section03 .sec-title .point{ font-size:1.9vw; }
    .section03 .sec-title .point img{font-size:1.9vw; }
    .section03 .sec-text-wrap{min-height: 9.75em; margin-top: 1.875em; font-size: clamp(1rem, 5.556vw, 1.5rem);}
    .section03 .sec-text-wrap .sec-text-wrap01 {padding-top: 1.875em; font-size: 1rem;}
    .section03 .sec-text-wrap .sec-text-wrap01 .sec-text{font-size: clamp(1.125rem, 5.556vw, 1.625rem);}
    .section03 .sec-text-wrap .sec-text-wrap01 .sec-text span:not(.bold){font-size: clamp(1rem, 5vw, 1.5rem);}
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text{font-size: clamp(0.875rem, 5.556vw, 1.250rem); }
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text-dec{ font-size: clamp(0.625rem, 3.889vw, 0.938rem);}
    
    .graph-slide-wrap{ margin: 2.375em 0 0; font-size: 1rem;}
    .graph-slide-wrap .graph-slide {width: calc(100% - 32px); height: auto; padding: 28px 8px 18px; font-size: 1rem;}
    .graph-slide-wrap .graph-slide01{gap: 10px; padding: 28px 12px 18px;}
    .graph-slide .graph-tit{font-size: clamp(1rem, 4.444vw, 1.563rem);}
    .graph-slide01 .graph-box{width: 96%; margin: 8px auto;}
    .graph-slide02 .graph-box{width: 80%; margin: 8px auto;}
    .graph-slide03 .graph-box{width: 95%;}
    .graph-slide01 .graph-box .graph img{aspect-ratio: 9 / 5;}
    .graph-slide02 .graph-box .graph img{aspect-ratio: 23 / 15;}
    .graph-slide03 .graph-box .graph img{aspect-ratio: 150 / 67;}
    .graph-slide .sec-text-dec{ font-size: clamp(0.625rem, 3.333vw, 0.875rem);}
    .graph-slide03 .sec-text-dec{transform: translateY(-20px);}

    .graph-swiper-control{gap: 10px; margin: 14px auto 0;}
    .graph-swiper-control .swiper-pagination{ font-size: clamp(0.750rem, 3.333vw, 1.125rem);}
    .graph-swiper-control .swiper-button-next, .graph-swiper-control .swiper-button-prev{width: 8.056vw; height: 8.056vw; }
    .graph-swiper-control .swiper-button-next:hover{background-image: url('../img/swiper-next.svg');}
    .graph-swiper-control .swiper-button-prev:hover{background-image: url('../img/swiper-prev.svg');}
}
@media (max-width: 500px){
    .section03{ margin-top: -12.5em; padding: 12.813em 0 6.250em; }
    .section03 .sec-text-wrap {min-height: 13.50em; font-size: 3.833vw;}
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text{font-size: clamp(0.875rem, 3.556vw, 1.250rem); }
    .section03 .sec-text-wrap .sec-text-wrap02 .sec-text-dec{ font-size: clamp(0.625rem, 2.889vw, 0.938rem);}
    .graph-slide .sec-text-dec{ font-size: clamp(0.625rem, 2.778vw, 0.875rem) }
}
@media (max-width: 480px){
    .section03 .sec-title .point{ font-size: 1.667vw;}
    .section03 .sec-title .point img{ font-size: 1.667vw;}
}
@media (max-width: 340px){
    .section03 .sec-title{font-size: clamp(1.125rem, 5.833vw,1.313rem);}
    .section03 .sec-text-wrap{min-height: 23.50em;}
    .section03 .sec-text-wrap .sec-text-wrap01 {font-size: 9.200vw;}
}
@media (max-width: 300px){

    .graph-slide-wrap .graph-slide01{ padding: 28px 10px 18px;}
}

.section-wrap { background-image: url('../img/sec05-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center;}
/*========== Section04 ==========*/
.section04{position: relative; z-index: 11; display: flex; align-items: center; height: 36.250em; background-image: url('../img/sec04-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; font-size: 1rem;}
.section04 .sec-title{margin: 0 auto; font-size: 3.000rem; line-height: 1.354em;}
.section04 .sec-title .point01{ bottom: -1.375em; left: auto; right: -1.500em; width: 20.625em; height: 6.250em; text-align: right;}
.section04 .sec-title .point01 img{ width: 20.625em; height: 6.250em; }
.section04 .sec-title .point02{ bottom: -0.750em; left: -0.500em; width: 21.250em; height: 0.875em;}
.section04 .sec-title .point02 img{ width: 21.250em; height: 0.875em;}
@media (max-width: 1940px){

}
@media (max-width: 1240px){

}
@media (max-width: 1080px){
    .section04{font-size: clamp(0.750rem, 1.481vw, 1rem);}
    .section04 .sec-title{font-size: clamp(1.313rem, 4.444vw, 3.000rem);}
    .section04 .sec-title .point{font-size: 1.481vw;}
    .section04 .sec-title .point img{font-size: 1.481vw;}
}
@media (max-width: 960px){
    
}
@media (max-width: 720px){
    .section-wrap { background-image: url('../img/sec05-bg-mo.jpg'); }
    
    .section04{height: 60.417vw; min-height: 280px; background-image: url('../img/sec04-bg-mo.jpg'); }
}
@media (max-width: 470px){
    .section04 .sec-title .point{font-size: 0.42rem;}
    .section04 .sec-title .point img{font-size: 0.42rem;}
}
@media (max-width: 340px){
    .section04 .sec-title{font-size: clamp(18px, 5.833vw, 1.313rem);}
    .section04 .sec-title .point{font-size: 1.95vw;}
    .section04 .sec-title .point img{font-size: 1.95vw;}
}


/*========== Section05 ==========*/
.section05{position: relative; overflow: hidden;}
.section05 .bg-extra {position: absolute; z-index: 0; mix-blend-mode: multiply;}
.section05 .bg-extra img{aspect-ratio: 1 / 1.07;}
.section05 .bg-extra01{ top: 40.625em; right: -210px; width: 38.125em; font-size: 1rem;}
.section05 .bg-extra02{ bottom: 54.375em; left: -50px; width: 16.875em; font-size: 1rem;}
.section05 .text-wrap{text-align: center;}
.section05 .sec-title{ margin: 0 auto; font-size: 3.000rem; line-height: 1.354em;}
.section05 .sec-title .point{ bottom: -1em; left: -0.5em; width: 21.000em; height: 1rem;}
.section05 .sec-title .point img{ width: 21.000em; height: 1rem;}
.section05 .sec-text{font-size: 1.250rem; line-height: 1.500em; text-align: center; }
.section05 .sec-text-dec{margin-top: 1.143em; font-size: 0.875rem; text-align: center; line-height: 1.2;}

/* con-box01 */
.section05 .con-box01 {position: relative; z-index: 1;padding: 12.500em 0 15.000em; font-size: 1rem;}
.section05 .con-box01 .sec-title{margin-bottom: 1.167em;}
.section05 .con-box01 .fold-list{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 1.250em; margin-top: 5.000em; font-size: 1rem;}
.section05 .con-box01 .fold{ position: relative; display: flex; flex-flow: column; justify-content: space-between; align-items: center; width: calc((100% - 5.000em) / 5); /*height: 308px; */aspect-ratio: 2 / 2.75; padding: 4.000em 1.875em 3.125em; background-image: url('../img/sec05-fold01.svg'); background-size: cover; font-size: 1rem; transition: all ease .3s; }
.section05 .con-box01 .fold::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 1.250em 1.250em 0; border-color: #A19687 transparent; font-size: 1rem; transition: all ease .5s; }
.section05 .con-box01 .fold.ing{background-image: url('../img/sec05-fold02.svg'); }
.section05 .con-box01 .fold.ing::before { border-width: 0 2.500em 2.500em 0; border-color: #A19687 transparent; font-size: 1rem;}
.section05 .con-box01 .fold .fold-icon{width: 9.375em; font-size: 1rem;}
.section05 .con-box01 .fold .fold-icon img{aspect-ratio: 37 / 35;}
.section05 .con-box01 .fold .tit{font-size: 20px; font-weight: 800; text-align: center;}

/* con-box02 */
.section05 .con-box02{position: relative; z-index: 1;}
.section05 .con-box02 .circle-list{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin: 8.750em auto 5.000em; font-size: 1rem;}
.section05 .con-box02 .circle-box {display: flex; flex-flow: column; justify-content: center; align-items: center; font-size: 16px;}
.section05 .con-box02 .circle-box > div{font-size: 1rem;}
.section05 .con-box02 .circle-box .circle-mid{display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.section05 .con-box02 .circle-box .circle-mid .circle{display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 0.625em; width: 210px; height: 210px; border-radius: 50%;}
.section05 .con-box02 .circle-box .circle-mid .circle.brown{background-color: #A19687; color: #fff;}
.section05 .con-box02 .circle-box .circle-mid .circle.white{background-color: #fff;}
.section05 .con-box02 .circle-box .circle-mid .circle .sub-tit{ font-weight: 800;}
.section05 .con-box02 .circle-box .circle-mid .circle p{ line-height: 1.375em; text-align: center;}
.section05 .con-box02 .circle-box .circle-mid .circle-plus{z-index: 1; width: 1.875em; height: 1.875em;margin: 0 -0.938em; font-size: 1rem;}
.section05 .con-box02 .circle-box .circle-mid .circle-plus img{aspect-ratio: 1 / 1;}
.section05 .con-box02 .circle-box01 .circle-top{position: relative; overflow: hidden; width: 13.750em; padding: 0.813em 0.625em; border-radius: 2px; border: 2px solid #A19687; font-weight: 700; color: #333; text-align: center;}
.section05 .con-box02 .circle-bg{position:absolute; top:calc(50% - 1px); left:calc(50% - 1px); z-index:-10; display:inline-block; width:2px; height:2px; border-radius:50%; background:#333; transition: all 0.4s cubic-bezier(.86,.31,.55,.99);}
.section05 .con-box02 .circle-box01 .circle-top.active{animation: box-active 400ms linear forwards; animation-delay: 1.5s;}
.section05 .con-box02 .circle-box01 .circle-top.active .circle-bg{transform:scale(140); transition-delay: 1.5s;}
.section05 .con-box02 .circle-box01 .circle-mid {margin: 2.500em 0 1.875em;}
.section05 .con-box02 .circle-box01 .circle-bottom{width: 13.750em; font-weight: 700; text-align: center;}
.section05 .con-box02 .circle-box01 .circle-bottom .blank{display: block; width: 100%; height: 1.875em; margin-bottom: 0.750em; border: 2px solid #A19687; border-top: 0;}
.section05 .con-box02 .circle-box03 .circle-top{width: 13.750em; font-weight: 700; text-align: center;}
.section05 .con-box02 .circle-box03 .circle-top .blank{display: block; width: 100%; height: 1.875em; margin-top: 0.500em; border: 2px solid #A19687; border-bottom: 0;}
.section05 .con-box02 .circle-box03 .circle-mid {margin: 1.875em 0 3.750em;}
.section05 .con-box02 .circle-box03 .circle-bottom{position: relative; overflow: hidden; width: 13.750em; padding: 0.813em 0.625em; border-radius: 2px; border: 2px solid #A19687; font-weight: 700; color: #333; text-align: center;}
.section05 .con-box02 .circle-box03 .circle-bottom.active{  animation: box-active 400ms linear forwards; animation-delay: 2s;}
.section05 .con-box02 .circle-box03 .circle-bottom.active .circle-bg{transform:scale(140); transition-delay: 2s;}
@keyframes box-active{
    from{ border: 2px solid #A19687; color: #333; }
    to{ border: 2px solid #333; color: #fff; }
}
.section05 .con-box02 .circle-list li.mid{position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; width: 21.250em; height: 21.250em; margin: 0 -0.625em; font-size: 1rem;  color: #fff;}
.section05 .con-box02 .circle-list li.mid figure{animation: rotate 30s linear infinite;}
.section05 .con-box02 .circle-list li.mid figure img{aspect-ratio: 1 / 1;}
@keyframes rotate{
    from{ transform: rotate(0); }
    to{ transform: rotate(360deg); }
}
.section05 .con-box02 .circle-list li.mid .con-tit{position: absolute;  z-index: 1; font-size: 1.625rem; font-weight: 800; text-align: center; line-height: 1.385em;}
.section05 .con-box02 .support-btn {margin: 2.200em auto 6.667em; padding: 0.767em 2.100em; background-image: url('../img/btn-w.png');}
.section05 .con-box02 .support-btn:hover{background-image: url('../img/btn-b.png'); color: #fff;}

/* con-box03 */
.section05 .con-box03{display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.section05 .con-box03 .sec-title{width: auto; font-size: 6.250rem; line-height: 1.400em; text-align: left;}
.section05 .con-box03 .text-wrap{padding-left: 40px; text-align: left;}
.section05 .con-box03 .support-btn{margin: 2.000em 0; padding: 1.133em 1.867em; background-image: url('../img/btn-o.png'); color: #fff; white-space: nowrap;}
.section05 .con-box03 .support-btn:hover{background-image: url('../img/btn-o2.png');}
.section05 .con-box03 .support-btn span{background-image: url('../img/btn-arrow-w.svg');}
.section05 .con-box03 .sec-vis-wrap{ width: 530px;}
@media (max-width: 1940px){

}
@media (max-width: 1240px){
    .section05 .sec-inner{ padding: 0 24px;}

    /* con-box01 */
    .section05 .con-box01 {font-size: 1.290vw;}
    .section05 .con-box01 .fold-list{ font-size: 1.290vw;}
    .section05 .con-box01 .fold{justify-content: center; gap: 1em; padding: 6px 0 0; font-size: 1.290vw; }
    .section05 .con-box01 .fold::before {font-size: 1.290vw;}
    .section05 .con-box01 .fold.ing::before {font-size: 1.290vw;}
    .section05 .con-box01 .fold .fold-icon{font-size: 1.290vw;}
    .section05 .con-box01 .fold .tit{font-size: 1.613vw;}

    /* con-box02 */
    .section05 .con-box02 .circle-list {font-size: 1.290vw;}
    .section05 .con-box02 .circle-box .circle-mid .circle{ width: 16.935vw; height: 16.935vw;}

    /* con-box03 */
    .section05 .con-box03 .text-wrap{padding-left: 0; }
    .section05 .con-box03 .sec-vis-wrap{margin-left: -5%;}
}
@media (max-width: 1080px){
    .section05 .bg-extra01{font-size: 1.389vw;}
    .section05 .bg-extra02{ font-size: 1.481vw;}
    .section05 .sec-title{ font-size: clamp(1.313rem, 4.444vw, 3.000rem);}
    .section05 .sec-title .point{font-size: 1.481vw;}
    .section05 .sec-title .point img{font-size: 1.481vw;}
    .section05 .sec-text{font-size: clamp(0.875rem, 1.852vw, 1.250rem); word-break: keep-all; }
    .section05 .sec-text-dec{ font-size: clamp(0.625rem, 1.481vw, 0.875rem);}

    /* con-box01 */
    .section05 .con-box01 .fold .fold-icon{font-size: 1.481vw;}
    .section05 .con-box01 .fold .tit{font-size: 1.852vw;}

    /* con-box02 */
    .section05 .con-box02 .circle-list {font-size: 1.481vw;}
    .section05 .con-box02 .circle-box > div{font-size: clamp(0.75rem, 1.481vw, 1rem);}
    .section05 .con-box02 .circle-box .circle-mid .circle{ width: 11.500em; height: 11.500em; font-size: clamp(0.75rem, 1.481vw, 1rem);}
    .section05 .con-box02 .circle-box .circle-mid .circle-plus{font-size: 1.481vw;}
    .section05 .con-box02 .circle-list li.mid{width: 17.500em; height: 17.500em; font-size: 1.481vw;}
    .section05 .con-box02 .circle-list li.mid .con-tit{font-size: 2.407vw;}

    /* con-box03 */
    .section05 .con-box03 .sec-title{ font-size: 9.259vw;}
    .section05 .con-box03 .sec-vis-wrap{ width: 49.074vw; margin: 0;}
}
@media (max-width: 960px){
    
    /* con-box02 */
    .section05 .con-box02 .circle-list li.mid {margin: 0 -1em;}
    .section05 .con-box02 .circle-list li.mid .con-tit{font-size: 2.188vw;}

}
@media (max-width: 720px){
    .section05 .sec-inner{padding: 0 16px;}
    .section05 .sec-title .point{ bottom: -1.25em;}
    .section05 .bg-extra01{top: 46.625em; right: -130px; width: 25.000em; font-size: 2.083vw;}
    .section05 .bg-extra02{bottom: 25.375em; width: 15.000em; font-size: 2.222vw;}
    .section05 .sec-text{font-size: clamp(0.875rem, 4.444vw, 1.285rem); }
    .section05 .sec-text-dec{ font-size: clamp(0.625rem, 3.333vw, 1rem);}

    /* con-box01 */
    .section05 .con-box01 {padding: 6.250em 0; font-size: 2.222vw;}
    .section05 .con-box01 .fold-list{ flex-flow: row wrap; justify-content: center; gap: 0.688em; margin-top: 2.500em; font-size: clamp(1rem, 2.222vw, 1.250rem);}
    .section05 .con-box01 .fold{ width: 30%; min-width: auto; height: auto; aspect-ratio: auto; background: none; font-size: 1rem;}
    .section05 .con-box01 .fold.ing{background: none;}
    .section05 .con-box01 .fold::before, .section05 .con-box01 .fold.ing::before {display: none;}
    .section05 .con-box01 .fold .fold-icon{font-size: 2.222vw;}
    .section05 .con-box01 .fold .fold-icon img{aspect-ratio: 79 / 75;}
    .section05 .con-box01 .fold .tit{font-size: 2.778vw;}
    
    /* con-box02 */
    .section05 .con-box02 .circle-list {flex-flow: column; margin: 2.813em auto 2.500em; font-size: clamp(1rem, 2.222vw, 1.250rem);}
    .section05 .con-box02 .circle-box{width: 100%;}
    .section05 .con-box02 .circle-box > div{font-size:clamp(0.938rem, 4.167vw, 1.563rem);}
    .section05 .con-box02 .circle-box01{order: 1;}
    .section05 .con-box02 .circle-box .circle-mid{order: 2; flex-flow: column; width: 65%; min-width: 205px; margin: 0;}
    .section05 .con-box02 .circle-box .circle-mid .circle{gap: 0.5vh; width: 100%; height: auto; aspect-ratio: 1 / 1;  background-size: cover; background-position: center center;}
    .section05 .con-box02 .circle-box .circle-mid .circle.brown{ background-color: transparent; background-image: url('../img/sec05-circle-top.svg'); }
    .section05 .con-box02 .circle-box .circle-mid .circle.white{ background-color: transparent; background-image: url('../img/sec05-circle-bottom.svg');}
    .section05 .con-box02 .circle-box .circle-mid .circle .sub-tit{font-size: clamp(0.938rem, 4.167vw, 1.563rem);}
    .section05 .con-box02 .circle-box .circle-mid .circle.brown .sub-tit{margin-top: 1.458em;}
    .section05 .con-box02 .circle-box .circle-mid .circle.white .sub-tit{margin-top: -1.458em;}
    .section05 .con-box02 .circle-box .circle-mid .circle p{font-size: clamp(0.875rem, 3.889vw, 1.375rem);}
    .section05 .con-box02 .circle-box01 .circle-top{width: 100%; max-width: 480px; margin-bottom: 0.933em; padding: 0.740em 0.625em;}
    .section05 .con-box02 .circle-box01 .circle-top.active{animation-delay: 1s;}
    .section05 .con-box02 .circle-box01 .circle-top.active .circle-bg{transform: scale(300); transition-delay: 1s;}
    .section05 .con-box02 .circle-box01 .circle-bottom{display: none;}

    .section05 .con-box02 .circle-box .circle-mid .circle-plus{width: 4%; min-width: 10px; height: auto; margin: 0;}
    .section05 .con-box02 .circle-box .circle-mid .circle-plus img{aspect-ratio: 10 / 49;}
    .section05 .con-box02 .support-btn:hover{background-image: url('../img/btn-w.png'); color: #111;}
    
    .section05 .con-box02 .circle-box03{order: 2;}
    .section05 .con-box02 .circle-box03 .circle-bottom{width: 100%; max-width: 480px; margin: 0.933em auto; padding: 0.740em 0.625em;}
    .section05 .con-box02 .circle-box03 .circle-bottom.active{animation-delay: 1s;}
    .section05 .con-box02 .circle-box03 .circle-bottom.active .circle-bg{transform: scale(300); transition-delay: 1s;}
    .section05 .con-box02 .circle-box03 .circle-top{display: none;}
    .section05 .con-box02 .circle-box03 .circle-bottom{order: 1;}
    .section05 .con-box02 .circle-box02{order: 3;}
    .section05 .con-box02 .circle-list li.mid{position: relative; overflow: hidden;width: 100%; max-width: 480px; height: auto; margin: 1.063em auto 0; padding: 0.529em 0.625em; border-radius: 2px; border: 2px solid #A19687; font-size: clamp(1.063rem, 3.333vw, 1.500rem); font-weight: 700; color: #333; text-align: center;}
    .section05 .con-box02 .circle-list li.mid .circle-bg{background: #FF822E;}
    .section05 .con-box02 .circle-list li.mid.active{border-color: #FF822E; color: #fff; transition: 400ms; transition-delay: 1.2s;}
    @keyframes box-activeMid{
        from{ border-color: #A19687; color: #333; }
        to{ border-color: #FF822E; color: #fff; }
    }
    .section05 .con-box02 .circle-list li.mid.active .circle-bg{transform: scale(300); transition-delay: 1.2s;}
    .section05 .con-box02 .circle-list li.mid figure{display: none;}
    .section05 .con-box02 .circle-list li.mid .con-tit{ position: static; font-size: inherit; color: inherit;}
    .section05 .con-box02 .circle-list li.mid .con-tit br{display: none;}
    .section05 .con-box02 .support-btn{margin: 1.875em auto 5.882em;}
    
    /* con-box02 */
    .section05 .con-box03 .support-btn:hover{background-image: url('../img/btn-o.png');}
}
@media (max-width: 560px){
    .section05 .bg-extra01{right: -60px; width: 20em; font-size: 2.857vw;}
    .section05 .sec-text br{display: none;}
    .section05 .sec-text{font-size: clamp(0.875rem, 3.889vw, 1.285rem); }
    .section05 .sec-text-dec{ font-size: clamp(0.625rem, 2.857vw, 1rem); word-break: keep-all;}

    /* con-box01 */
    .section05 .con-box01 {font-size: 1rem;}
    /* .section05 .con-box01 .fold{ min-width: 102px; min-height: 140px;} */
    .section05 .con-box01 .fold .fold-icon{ width: 100%; max-width: 92px; min-width: 68px; font-size: 1rem;}
    .section05 .con-box01 .fold .tit{font-size: clamp(0.875rem, 3.214vw, 1.250rem);}
    
    /* con-box02 */

    /* con-box03 */
    .section05 .con-box03{flex-flow: column;}
    .section05 .con-box03 .text-wrap{ text-align: center;}
    .section05 .con-box03 .sec-title{ font-size: clamp(3.125rem, 10.714vw, 3.750rem); text-align: center;}
    .section05 .con-box03 .sec-vis-wrap{ width: 80%;}
}
@media (max-width: 480px){
    
}
@media (max-width: 470px){
    .section05 .sec-title .point{font-size: 0.45rem;}
    .section05 .sec-title .point img{font-size: 0.45rem;}
}
@media (max-width: 340px){
    .section05 .bg-extra01{top: 68.625em; }
    .section05 .sec-title{font-size: clamp(18px, 5.833vw, 21px); }
    .section05 .sec-title .point{font-size: 2vw;}
    .section05 .sec-title .point img{font-size: 2vw;}
    .section05 .sec-text{width: calc(100% + 8px); margin-left: -4px;}
    .section05 .text-wrap{width: calc(100% + 8px); margin-left: -4px;}

    /* con-box01 */
    .section05 .con-box01 .fold-list{gap: 10px; margin-top: 1.5em;}
    .section05 .con-box01 .fold{ width: 45%; height: auto;}
    .section05 .con-box01 .fold .fold-icon{ width: 65%;}
    .section05 .con-box01 .fold .tit{font-size: clamp(0.813rem, 3.611vw, 1.250rem);}

    /* con-box03 */
    .section05 .con-box03 .sec-title{font-size: clamp(42px, 13.889vw, 50px);}
    .section05 .con-box03 .support-btn{margin-left: -4px;}
}
@media (max-width: 300px){
    .section05 .sec-title .point{ font-size: 0.38rem;}
    .section05 .sec-title .point img{ font-size: 0.5rem;}
}

/*========== Section Foot ==========*/
.section-foot{display: flex; flex-flow: column; align-items: center; justify-content: flex-end; height: 18.750em; max-height: 400px; margin-top: -180px; padding-bottom: 30px; background-image: url('../img/sec-foot-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.section-foot .sec-title{margin-bottom: 8px; font-size: 16px; font-weight: 700; color: #333;}
.section-foot .copyright{ font-size: 12px; font-weight: 700; color: #666; text-align: center;}
@media (max-width: 720px){
    .section-foot{justify-content: center; margin-top: -100px; padding: 16px 16px 0; background-image: url('../img/sec-foot-bg-mo.png'); font-size: clamp(1rem, 3.333vw, 1.875rem);}
    .section-foot .sec-title{margin-bottom: 6px; font-size: 14px; word-break: keep-all;}
    .section-foot .copyright{ font-size: 10px; word-break: keep-all;}
}
@media (max-width: 560px){
    .section-foot {margin-top: -80px;}
}

/*========== Support ==========*/
#support{position: fixed; z-index: 1000; bottom: 0; right: 90px; width: 210px; height: 210px;background-image: url('../img/support-bg.png'); background-repeat: no-repeat; background-position: center center; background-size: auto; opacity: 0; transition: 300ms;}
#support:hover{background-image: url('../img/support-bg2.png'); transition: 300ms;}
#support.active{ animation: floating 1s linear forwards; animation-delay: 1s;}
@keyframes floating{
    from{ bottom: 0; opacity: 0; }
    to{ bottom: 50px; opacity: 1; }
}
#support .support-button{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-right: 5px; font-size: 26px; text-align: center; line-height: 1.1; color: #fff;}
#support .support-button.pc span{display: block; margin-bottom: 6px; font-size: 20px; font-weight: 700;}
#support .support-button.mo{display: none;}
@media (max-width: 1540px){
    #support{right: 3%; bottom: 25px;}
    @keyframes floating{
        from{ bottom: 0; opacity: 0; }
        to{ bottom: 25px; opacity: 1; }
    }
}
@media (max-width: 1280px){
    #support{right: 2%; }
}
@media (max-width: 1080px){
    #support{width: 160px; height: 160px; background-size: 122% auto;}
    #support .support-button{ font-size: 1.250rem;}
    #support .support-button.pc span{ font-size: 1rem;}
}
@media (max-width: 720px){
    #support{left: 0; right: 0; bottom: 0; width: 100%; height: 19.444vw; max-height: 110px; margin: 0 auto; border-radius: 0; background-image: none; background-color: #FF822E;}
    @keyframes floating{
        from{ bottom: -16px; opacity: 0; }
        to{ bottom: 0; opacity: 1; }
    }
    #support:hover{ background-image: none;}
    #support .support-button.mo { display: flex; padding: 0; font-size: clamp(20px, 4.167vw, 26px); font-weight: 800; line-height: 1;}
    #support .support-button.mo span{ padding-right: 32px; background-image: url('../img/btn-arrow-w.svg'); background-repeat: no-repeat; background-position: right center; background-size: 22px auto; font-weight: 800;}
    #support .support-button.pc{display: none;}
}
@media (max-width: 340px){
    #support{height: 50px;}
    #support .support-button.mo {font-size: 16px; line-height: 1.1; word-break: keep-all;}
    #support .support-button.mo span{ padding-right: 24px; background-size: 18px auto; }
}

/*========== Lodaer ==========*/
.loading-wrap{ position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0, 0, 0, 0.8);}
.loading-wrap .loading { width: 82px; height: 82px; }
.loading-wrap .loading div { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 8px solid #FF822E; animation: 1.5s ripple infinite; opacity: 0; }
.loading-wrap .loading div:nth-child(2) {
    animation-delay: 0.5s;
}
@keyframes ripple {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(1); opacity: 0; }
}