.sup1{ padding: 0 0 60px;}
.sup2{ margin: 0 0 -120px; padding: 0;}

@media screen and (max-width: 1024px){
    .sup1{ padding: 0 0 30px;}
    .sup2{ margin: 0 0 -60px; padding: 0;}
    .main{ padding: 16px 16px 0;}
}

.sec{ display: flex; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); width: 100vw; justify-content: center;}
.sec > div{ position: relative; padding: 110px 0; width: 50%;}
.sec > div:nth-child(even){ padding: 120px 0 120px 40px; border-left: 1px solid #F0F0F0;}
.sec + .sec{ border-top: 1px solid #F0F0F0;}
.sec h2{ font-weight: 600; font-size: 2.4rem;}
.sec h2 span{ display: block; margin: 0 0 40px;}
.sec h2 span img{ width: auto; height: 94px;}
.sec > div > ul{ padding: 60px 0 0 20px; font-size: 1.8rem;}
.sec > div > ul > li{ position: relative; margin: 20px 0 0;}
.sec > div > ul > li:after{ position: absolute; top: .8em; left: -.8em; width: 3px; height: 3px; border-radius: 100%; background: #000; content: "";}
.sec ul ul{ padding: 10px 0 0; font-weight: 400; font-size: 1.3rem;}
.sec ul ul > li{ margin: 10px 0 0;}
.sec figure{ position: absolute;}
.sec .cnt1 figure{ top: 191px; right: 57px; width: 121px;}
.sec .cnt2 figure{ top: 200px; right: 0; width: 146px;}
.sec .cnt3 figure{ top: 195px; right: 76px; width: 125px;}
.sec .cnt4 figure{ top: 200px; right: 0; width: 140px;}

@media screen and (max-width: 1024px){
    .sec{ flex-direction: column; margin: -50px 0 0; padding: 0 30px;}
    .sec > div{ padding: 120px 0 0; width: 100%;}
    .sec > div:nth-child(even){ padding: 120px 0 0; border-left: none;}
    .sec + .sec{ margin: 0; padding: 0 30px; border-top: none;}
    .sec h2{ font-size: 1.8rem;}
    .sec h2 span{ margin: 0 0 20px;}
    .sec h2 span img{ width: auto; height: 66px;}
    .sec > div > ul{ padding: 20px 0 0 15px; font-size: 1.5rem;}
    .sec > div > ul > li{ margin: 20px 0 0;}
    .sec ul ul{ padding: 0; font-size: 1.2rem;}
    .sec ul ul > li{ margin: 5px 0 0;}
    .sec figure{ position: absolute;}
    .sec .cnt1 figure{ top: auto; right: -6px; bottom: -10.6666vw; width: 27.4666vw;}
    .sec .cnt2 figure{ top: auto; right: -6px; bottom: -13.3333vw; width: 25.0666vw;}
    .sec .cnt3 figure{ top: auto; right: -6px; bottom: -17.3333vw; width: 25.0666vw;}
    .sec .cnt4 figure{ top: auto; right: -6px; bottom: -4.8vw; width: 25.3333vw;}
}

.sec1{ margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); width: 100vw;}
.sec1 .inner{ position: relative; display: flex; padding: 140px 0 0; width: 1100px; height: 700px; justify-content: space-between;}
.sec1 h2{ white-space: nowrap; font-weight: 600; font-size: 3.3rem;}
.sec1 h2 span{ display: block; margin: 0 0 50px;}
.sec1 h2 span img{ width: auto; height: 138px;}
.sec1 .detail h3{ font-weight: 600; font-size: 2.5rem;}
.sec1 .detail p{ text-align: justify; letter-spacing: .15em; font-size: 1.9rem; line-height: 2.3157;}
.sec1 .detail h3 + p{ margin: 30px 0 0;}
.sec1 figure{ position: absolute;}

@media screen and (max-width: 1024px){
    .sec1 .inner{ flex-direction: column; padding: 60px 30px 115px; width: 100%; height: auto;}
    .sec1 h2{ font-size: 1.8rem;}
    .sec1 h2 span{ margin: 0 0 20px;}
    .sec1 h2 span img{ width: auto; height: 66px;}
    .sec1 .detail h3{ font-size: 1.8rem;}
    .sec1 .detail p{ letter-spacing: .1rem; font-size: 1.4rem;}
    .sec1 .detail h3 + p{ margin: 10px 0 0;}
}

.cnt1 .sec1,
.cnt1 .sec1s{ background: #DCE3CF;}
.cnt2 .sec1{ background: #E9DFEA;}
.cnt3 .sec1{ background: #E6DCD7;}
.cnt4 .sec1{ background: #DCE1E6;}
.cnt1 .sec1 h2{ width: 481px;}
.cnt2 .sec1 h2{ width: 335px;}
.cnt3 .sec1 h2{ width: 340px;}
.cnt4 .sec1 h2{ width: 476px;}
.cnt1 .sec1 .detail{ width: 495px;}
.cnt2 .sec1 .detail{ width: 634px;}
.cnt3 .sec1 .detail{ width: 495px;}
.cnt4 .sec1 .detail{ width: 495px;}
.cnt1 .sec1 figure{ right: 110px; bottom: -43px; width: 317px;}
.cnt2 .sec1 figure{ right: -170px; bottom: -63px; width: 260px;}
.cnt3 .sec1 figure{ right: 90px; bottom: -113px; width: 322px;}
.cnt4 .sec1 figure{ right: 0; bottom: -90px; width: 373px;}

@media screen and (max-width: 1024px){
    .cnt1 .sec1 h2,
    .cnt2 .sec1 h2,
    .cnt3 .sec1 h2,
    .cnt4 .sec1 h2{ width: 100%;}
    .cnt1 .sec1 .detail,
    .cnt2 .sec1 .detail,
    .cnt3 .sec1 .detail,
    .cnt4 .sec1 .detail{ padding: 40px 0 0; width: 100%;}
    .cnt1 .sec1 figure{ right: 30px; bottom: -8.8vw; width: 45.8666vw;}
    .cnt2 .sec1 figure{ right: 30px; bottom: -9.6vw; width: 42.6666vw;}
    .cnt3 .sec1 figure{ right: 30px; bottom: -13.6vw; width: 37.8666vw;}
    .cnt4 .sec1 figure{ right: 30px; bottom: -9.0666vw; width: 42.6666vw;}
}

.sec1s{ margin: 0 calc(50% - 50vw); padding: 75px calc(50vw - 50% + 70px); width: 100vw; line-height: 1;}
.sec1s h2{ font-weight: 600; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .sec1s{ padding: 50px 30px;}
    .sec1s h2{ font-size: 2.2rem;}
}

.sec2{ padding: 0 0 240px;}
.sec2.w960{ margin: 0 auto; width: 960px;}
.cnt4 .sec2{ padding: 250px 0 270px;}

@media screen and (max-width: 1024px){
    .sec2{ padding: 60px 30px 90px;}
    .sec2.w960{ margin: 0; width: 100%;}
    .cnt4 .sec2{ padding: 80px 30px;}
}

.sec2 h3{ padding: 120px 0 0; font-weight: 600; font-size: 3rem;}
.cnt2 .sec2 > h3:last-of-type{ padding: 200px 0 0;}
.cnt1 .sec2 h3{ color: #809855;}
.cnt2 .sec2 h3{ color: #713D7B;}
.cnt3 .sec2 h3{ color: #D7B4AA;}
.cnt4 .sec2 h3{ font-weight: 600; font-size: 2.5rem;}
.cnt4 .sec2 h3 a{ position: relative; display: inline-block; padding: 0 50px 0 0; text-decoration: none;}
.cnt4 .sec2 h3 a:after{ position: absolute; top: .5em; right: 0; width: 20px; height: 20px; background: url("/img/support/index/arrow.png") no-repeat center / contain; content: "";}

@media screen and (max-width: 1024px){
    .sec2 h3{ margin: 80px 0 0; padding: 80px 0 0; border-top: 1px solid #DCE1E6; font-size: 2.2rem;}
    .sec2 > h3:first-child{ margin: 0; padding: 0; border: none;}
    .cnt2 .sec2 > h3:last-of-type{ padding: 80px 0 0;}
    .cnt4 .sec2 h3{ margin: 40px 0 0; padding: 0; border: none; font-size: 1.8rem;}
    .cnt4 .sec2 h3 a{ display: block; padding: 0;}
    .cnt1s .sec2 h3{ padding: 0; border: none; font-size: 1.8rem;}
}

.sec2 .list1{ display: flex; overflow: hidden; margin: 40px -22px 0;}
.sec2 .list1 > li{ padding: 0 22px; width: calc(100% / 3);}
.sec2 .list2{ display: flex; overflow: hidden; margin: 40px -22px 0;}
.sec2 .list2 > li{ padding: 0 22px; width: calc(100% / 3); border-left: 1px dashed #DCE1E6;}
.sec2 .list2 > li:first-child{ border: none;}
.sec2 .list3{ display: flex; overflow: hidden; margin: 40px -22px 0;}
.sec2 .list3 > li{ padding: 0 22px; width: calc(100% / 2);}
.sec2 .list4{ margin: 40px 0 0;}
.cnt1 .sec2 .flex{ display: flex; overflow: hidden; margin: 0 -22px;}
.cnt1 .sec2 .flex > div{ padding: 0 22px; width: calc(100% / 3 * 2);}
.cnt1 .sec2 .flex > div + div{ width: calc(100% / 3);}

@media screen and (max-width: 1024px){
    .sec2 .list1{ flex-direction: column; margin: -40px 0 0;}
    .sec2 .list1 > li{ padding: 80px 0 0; width: 100%;}
    .cnt3 .sec2 .list1 > li{ margin: 80px 0 0; padding: 80px 0 0; border-top: 1px solid #DCE1E6;}
    .cnt3 .sec2 .list1 > li:first-child{ margin: 0; border: none;}

    .sec2 .list2{ flex-direction: column; margin: 0;}
    .sec2 .list2 > li{ margin: 80px 0 0; padding: 80px 0 0; width: 100%; border-top: 1px dashed #DCE1E6; border-left: none;}
    .sec2 .list2 > li:first-child{ margin: 40px 0 0; padding: 0;}

    .cnt1 .sec2 .flex{ flex-direction: column; margin: 0;}
    .cnt1 .sec2 .flex > div{ padding: 0; width: 100%;}
    .cnt1 .sec2 .flex > div + div{ width: 100%;}

    .sec2 .list3{ flex-direction: column; margin: 40px 0 0;}
    .sec2 .list3 > li{ padding: 0; width: 100%;}
    .sec2 .list3 > li:last-child{ border-bottom: none;}
    
    .sec2 .list4{ margin: 40px 0 0;}
}

.sec2 h4{ font-weight: 600; font-size: 2.1rem;}
.sec2 figure + h4{ margin: 40px 0 0;}
.cnt2 .sec2 figure + h4{ margin: 70px 0 0;}
.cnt2 .sec2 p + h4{ margin: 90px 0 0;}
.sec2 h4 a{ position: relative; display: block; text-decoration: none;}
.sec2 h4 a:after{ position: absolute; top: .5em; right: 0; width: 20px; height: 20px; background: url("/img/support/index/arrow.png") no-repeat center / contain; content: "";}
.cnt3 .sec2 h4 a:after{ background: url("/img/support/index/arrow2.png") no-repeat center / contain;}
.cnt4 .sec2 p + h4{ margin: 150px 0 0;}
.cnt1s .sec2 h4{ position: relative;}
.cnt1s .sec2 h4:after{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #DCE1E6; content: "";}
.cnt1s .sec2 h4 span{ position: relative; z-index: 10; display: inline-block; padding: 0 60px 0 0; background: #fff; font-weight: 600; font-size: 2.1rem;}
.cnt1s .sec2 p + h4{ margin: 90px 0 0;}

@media screen and (max-width: 1024px){
    .sec2 h4{ font-size: 1.8rem;}
    .sec2 h4 a:after{ top: 50%; transform: translate(0,-50%);}
    .cnt2 .sec2 figure + h4{ margin: 50px 0 0;}
    .cnt2 .sec2 p + h4{ margin: 80px 0 0;}
    .cnt4 .sec2 p + h4{ margin: 80px 0 0;}
    .cnt1s .sec2 h4{ position: relative;}
    .cnt1s .sec2 h4:after{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #DCE1E6; content: "";}
    .cnt1s .sec2 h4 span{ padding: 0 20px 0 0; font-size: 1.4rem;}
    .cnt1s .sec2 p + h4{ margin: 80px 0 0;}
}

.cnt1 .sec2 h5{ margin: 40px 0 0; padding: 40px 0 0; border-top: 1px solid #DCE1E6; font-weight: 600; font-size: 2.1rem;}
.cnt1 .sec2 .list3 h5{ margin: 0; padding: 0; border: none;}
.cnt1 .sec2 .list3 p + h5{ margin: 60px 0 0; padding: 60px 0 0; border-top: 1px solid #DCE1E6;}
.cnt1s .sec2 h5{ margin: 50px 0 0; padding: 0; border: none; font-size: 1.7rem;}
.cnt1s .sec2 h5 span{ display: block; font-weight: 300; font-size: 1.7rem;}

@media screen and (max-width: 1024px){
    .cnt1 .sec2 h5{ margin: 90px 0 0; padding: 0; border-top: none; font-size: 1.8rem;}
    .cnt1 .sec2 .list3 h5{ margin: 80px 0 0;}
    .cnt1 .sec2 .list3 p + h5{ margin: 80px 0 0; padding: 0; border: none;}
    .cnt1s .sec2 h5{ margin: 40px 0 0; font-size: 1.4rem;}
    .cnt1s .sec2 h5 span{ font-size: 1.4rem;}
}

.sec2 p{ font-weight: 300; font-size: 1.7rem; line-height: 2.2;}
.sec2 h3 + p{ margin: 50px 0 0;}
.sec2 h4 + p{ margin: 30px 0 0;}
.sec2 h5 + p{ margin: 20px 0 0; font-size: 1.4rem;}
.cnt1 .sec2 .list3 p{ font-size: 1.7rem;}
.cnt4 .sec2 p{ margin: 30px 0 0;}
.cnt1s figure + p{ margin: 45px 0 0;}
.cnt1s .sec2 h5 + p{ margin: 10px 0 0; font-size: 1.5rem;}

@media screen and (max-width: 1024px){
    .sec2 p{ font-size: 1.4rem;}
    .sec2 h3 + p{ margin: 20px 0 0;}
    .sec2 h4 + p{ margin: 10px 0 0;}
    .sec2 h5 + p{ margin: 10px 0 0;}
    .cnt1 .sec2 .list3 p{ font-size: 1.4rem;}
    .cnt4 .sec2 p{ margin: 20px 0 0;}
    .cnt1s figure + p{ margin: 20px 0 0;}
    .cnt1s .sec2 h5 + p{ margin: 20px 0 0; font-size: 1.2rem;}
}

.sec2 h3 + figure{ margin: 60px 0 0;}
.cnt4 .sec2 p + figure{ margin: 120px 0 0; padding: 120px 0 0; border-top: 1px solid #DCE1E6;}
.cnt1s p + figure{ margin: 50px 0 0;}
.cnt1s .sec2 h4 + figure{ margin: 70px 0 0;}

@media screen and (max-width: 1024px){
    .sec2 h3 + figure{ margin: 40px 0 0;}
    .cnt4 .sec2 p + figure{ margin: 80px 0 0; padding: 80px 0 0;}
    .cnt1s p + figure{ margin: 20px 0 0;}
    .cnt1s .sec2 h4 + figure{ margin: 70px 0 0;}
}

.sec2 .link{ margin: 10px 0 0;}
.sec2 .link a{ font-weight: 300; font-size: 1.5rem;}

@media screen and (max-width: 1024px){
    .sec2 .link a{ font-size: 1.4rem;}
}

.sec2 dt{ position: relative; margin: 70px 0 0;}
.sec2 dd + dt{ margin: 100px 0 0;}
.sec2 dt:after{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #DCE1E6; content: ""; transform: translate(0,-50%);}
.sec2 dt span{ position: relative; z-index: 10; display: inline-block; padding: 0 1em 0 0; background: #fff; color: #713D7B; font-weight: 600; font-size: 2.2rem;}
.sec2 dd{ padding: 25px 0 0;}
.sec2 dd + dd{ padding: 90px 0 0;}
.sec2 dd h4{ font-weight: 600; font-size: 2.5rem;}
.sec2 dd p + figure{ margin: 60px 0 0;}
.sec2 dd.row{ display: flex; justify-content: space-between;}
.sec2 dd.row > div{ width: 380px;}
.sec2 dd.row > figure{ width: 550px;}
.sec2 dd.row > figure ul{ display: flex; width: 100%; justify-content: space-between;}
.sec2 dd.row > figure ul > li{ width: calc(50% - 10px);}

@media screen and (max-width: 1024px){
    .sec2 dt{ margin: 30px 0 0;}
    .sec2 dd + dt{ margin: 80px 0 0;}
    .sec2 dt:after{ content: none;}
    .sec2 dt span{ display: block; padding: 0; font-size: 1.4rem;}
    .sec2 dd{ padding: 10px 0 0;}
    .sec2 dd + dd{ padding: 80px 0 0;}
    .sec2 dd h4{ font-size: 1.8rem;}
    .sec2 dd p{ margin: 10px 0 0;}
    .sec2 dd p + figure{ margin: 30px 0 0;}
    .sec2 dd.row{ flex-direction: column;}
    .sec2 dd.row > div{ width: 100%;}
    .sec2 dd.row > figure{ margin: 40px 0 0; width: 100%;}
    .sec2 dd.row > figure ul > li{ width: calc(50% - 5px);}
}

.sec2s{ margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50%) 270px; width: 100vw; background: #F5F5F5;}
.sec2s h3{ color: #D7B4AA; font-weight: 600; font-size: 3rem;}
.sec2s .list4{ display: flex; overflow: hidden; margin: 130px -60px 0;}
.sec2s .list4 > li{ padding: 0 60px; width: 50%;}
.sec2s .list4 > li:nth-child(even){ border-left: 1px solid #DCE1E6;}
.sec2s .list4 h4{ font-weight: 600; font-size: 2.1rem;}
.sec2s .list4 p{ margin: 40px 0 0; min-height: 230px; font-weight: 300; font-size: 1.7rem; line-height: 2.2;}
.sec2s .list4 h5{ margin: 70px 0 0; font-weight: 600; font-size: 2.1rem;}
.sec2s .list4 h5 + figure{ margin: 40px 0 0;}
.sec2s .list4 figcaption{ margin: 40px 0 0; min-height: 60px; font-weight: 300; font-size: 1.5rem; line-height: 2;}
.sec2s .video{ margin: 60px auto 0; background: #E6E6E6;}
.sec2s .list4 + .video{ width: calc(50% - 60px);}
.sec2s .video figcaption{ padding: 30px; font-weight: 300; font-size: 1.7rem; line-height: 2.2;}
.youtube{ position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

@media screen and (max-width: 1024px){
    .sec2s{ padding: 80px 30px;}
    .sec2s h3{ font-size: 2.2rem;}
    .sec2s .list4{ flex-direction: column; margin: 0;}
    .sec2s .list4 > li{ margin: 80px 0 0; padding: 80px 0 0; width: 100%; border-top: 1px solid #DCE1E6;}
    .sec2s .list4 > li:nth-child(even){ border-left: none;}
    .sec2s > .list4:first-of-type > li:first-child{ margin: 0; padding: 40px 0 0; border: none;}
    .sec2s .list4 h4{ font-size: 1.8rem;}
    .sec2s .list4 p{ margin: 20px 0 0; min-height: 0; font-size: 1.4rem;}
    .sec2s .list4 h5{ display: none;}
    .sec2s .list4 figcaption{ margin: 20px 0 0; min-height: 0; font-size: 1.2rem;}
    .sec2s .video{ margin: 40px 0 0; background: none;}
    .sec2s .list4 + .video{ width:100%;}
    .sec2s .video figcaption{ padding: 20px 0 0; font-size: 1.2rem; line-height: 2;}
    .sec2s .video iframe{ width: 100%; height: auto;}
}

.list-recycle{ padding: 34px 0 0;}
.list-recycle > li{ position: relative; display: flex; margin: 6px 0 0;}
.list-recycle > li:after{ position: absolute; top: 50%; left: 50%; width: 22px; height: 17px; background: url("/img/support/index/arrow3.png") no-repeat center / contain; content: ""; transform: translate(-50%,-50%);}
.list-recycle > li > div{ display: flex; width: 50%; height: 100px; background: #DCE1E6; color: #9696A0; text-align: center; font-weight: 600; font-size: 1.7rem; align-items: center; justify-content: center;}

@media screen and (max-width: 1024px){
    .list-recycle{ padding: 20px 0 0;}
    .list-recycle > li{ margin: 2px 0 0;}
    .list-recycle > li:after{ width: 18px; height: 15px;}
    .list-recycle > li > div{ padding: 40px 0; height: auto; font-size: 1.2rem;}
}

.loop{ display: flex; margin: 130px 0 0; padding: 70px 80px; border: 1px solid #DCE1E6; justify-content: space-between;}
.loop > figure{ width: 460px;}
.loop > figure iframe{ width: 100%;}
.loop > .detail{ width: 260px;}
.loop > .detail h4{ margin: 0;}
.loop > .detail h4 img{ width: auto; height: 66px;}
.loop > .detail h5{ margin: 20px 0 0; padding: 0; border: none; font-weight: 600; font-size: 1.4rem;}
.loop > .detail p{ margin: 30px 0 0; font-weight: 300; font-size: 1.2rem; line-height: 2;}
.loop > .detail .link{ margin: 40px 0 0;}
.loop > .detail .link a{ position: relative; display: inline-block; padding: 0 30px 0 0; font-size: 1.2rem;}
.loop > .detail .link a:after{ position: absolute; top: 50%; right: 0; width: 20px; height: 20px; background: url("/img/support/index/arrow.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 1024px){
    .loop{ flex-direction: column-reverse; margin: 80px 0 0; padding: 35px 25px;}
    .loop > figure{ width: 100%;}
    .loop > .detail{ width: 100%;}
    .loop > .detail h5{ margin: 25px 0 0; font-size: 1.4rem;}
    .loop > .detail .video{ margin: 25px 0 0;}
    .loop > .detail p{ margin: 25px 0 0; font-size: 1.2rem; line-height: 2;}
    .loop > .detail .link{ margin: 25px 0 0; text-align: right;}
    .loop > .detail .link a{ padding: 0 30px 0 0; text-decoration: none;}
}

.sec3{ margin: 0 calc(50% - 50vw); padding: 80px calc(50vw - 50%); width: 100vw;}
.cnt1 .sec3{ background: #DCE3CF;}
.cnt2 .sec3{ background: #E9DFEA;}
.cnt3 .sec3{ background: #E6DCD7;}
.cnt4 .sec3{ background: #DCE1E6;}
.sec3 ul{ display: flex; overflow: hidden; margin: 0 -22px; justify-content: center;}
.sec3 ul > li{ padding: 0 22px; width: calc(100% / 3);}
.sec3 ul a{ display: flex; height: 50px; background: #fff; color: #9696A0; text-decoration: none; font-weight: 600; font-size: 1.5rem; align-items: center; justify-content: center;}
.cnt3 .sec3 ul a{ color: #AF8C8C;}
.sec3 ul > li:last-child a{ border: 1px solid; background: none;}
.sec3 ul p{ padding: 20px 0 0; font-weight: 300; font-size: 1.3rem;}

@media screen and (max-width: 1024px){
    .sec3{ padding: 80px 30px;}
    .sec3 ul{ flex-direction: column; margin: -40px 0 0;}
    .sec3 ul > li{ padding: 40px 0 0; width: 100%;}
    .sec3 ul a{ font-size: 1.4rem;}
    .sec3 ul p{ font-size: 1.2rem;}
}