@charset "utf-8";

#inc02{padding-top:230px;padding-bottom:150px}
#inc02 ol{counter-reset:number}
#inc02 ol li:nth-child(odd){display:flex;align-items:center;gap:88px}
#inc02 ol li .thumb-box{width:100%}
#inc02 ol li .thumb-box img{width:100%;height:100%;object-fit:cover}
#inc02 ol li h2{position:relative}
#inc02 ol li h2::before{z-index:-1;position:absolute;top:-40px;left:0;content:counter(number, decimal-leading-zero);counter-increment:number;font-family:var(--sub-font);font-size:160px;line-height:1;color:#e1e1e1}

#inc02 ol li.natural{padding-left:90px}
#inc02 ol li.natural .thumb-box{max-width:590px;aspect-ratio:590 / 755}
#inc02 ol li.natural .text-box h2{padding-left:84px;padding-bottom:128px}

#inc02 ol li.story{padding-left:290px}
#inc02 ol li.story .thumb-box{max-width:450px;aspect-ratio:450 / 540}
#inc02 ol li.story .thumb-box img{transform:scaleX(-1)}
#inc02 ol li.story .text-box{padding-top:100px}
#inc02 ol li.story .text-box h2{padding-left:133px;padding-bottom:96px}

#inc02 ol li.mood{display:flex;flex-direction:column;align-items:flex-end;max-width:800px;width:100%;margin-left:auto;margin-top:-70px;padding-right:105px;padding-bottom:100px}
#inc02 ol li.mood .col-2{display:flex;flex-direction:row-reverse;align-items:center;gap:85px}
#inc02 ol li.mood .thumb-box{max-width:370px;aspect-ratio:370 / 310}
#inc02 ol li.mood .text-box{text-align:right}
#inc02 ol li.mood h2{padding-right:142px;padding-bottom:128px;transform:translateX(-225px)}
#inc02 ol li.mood h2::before{left:unset;right:0}
#inc02 ol li.mood .text-box h2{display: none;}

#inc02 ol li .text-box p.desc{font-family:var(--main-font);font-size:18px;line-height:1.6;color:#111;white-space:pre-line}
#inc02 ol li .text-box p.desc:first-of-type{padding-bottom:40px}

@media(max-width:1700px){
    #inc02{padding-top: 100px;}
    #inc02 ol li h2::before{top: -38px;font-size: 150px;}
    #inc02 ol li.natural .thumb-box{max-width:560px}
    #inc02 ol li.natural .text-box h2{padding-bottom: 105px;}

    #inc02 ol li.mood{margin-top: 40px;padding-bottom: 70px;}
    #inc02 ol li.mood .col-2{gap: 64px;}
    #inc02 ol li.mood h2{padding-right: 132px;padding-bottom: 80px;transform: translateX(-120px);}

    #inc02 ol li.story{padding-left: 180px;}
    #inc02 ol li.story .text-box h2{padding-left: 120px;padding-bottom: 88px;}
}
@media (max-width:1500px){
    #inc02 ol li:nth-child(odd){gap: 74px;}
    #inc02 ol li h2::before{top: -32px;font-size: 140px;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 32px;}

    #inc02 ol li.natural{}
    #inc02 ol li.natural .text-box h2{padding-bottom: 80px;padding-left: 76px;}
    #inc02 ol li.story{padding-left: 95px;}
    #inc02 ol li.story .text-box h2{padding-left: 112px;}
    #inc02 ol li.mood h2{padding-right: 128px;padding-bottom: 68px;}
}
@media (max-width:1400px){
    #inc02{padding-bottom: 120px;}
    #inc02 ol li:nth-child(odd){gap: 60px;}
    #inc02 ol li h2::before{top: -26px;font-size: 120px;}
    #inc02 ol li .text-box p.desc{font-size: 17px;}
    #inc02 ol li.natural{padding-left: 50px;}
    #inc02 ol li.natural .text-box h2{padding-bottom: 60px;padding-left: 58px;}
    #inc02 ol li.natural .thumb-box{max-width:525px}
    #inc02 ol li.mood{padding-right: 80px;padding-bottom: 60px;}
    #inc02 ol li.mood .col-2{gap: 60px;}
    #inc02 ol li.mood h2{padding-right: 102px;padding-bottom: 50px;transform: translateX(0);}
    
    #inc02 ol li.story{padding-left: 80px;}
    #inc02 ol li.story .thumb-box{max-width:410px}
    #inc02 ol li.story .text-box h2{padding-left: 92px;padding-bottom: 70px;}
}
@media (max-width:1200px){
    #inc02{padding-top: 80px;padding-bottom: 100px;}
    #inc02 ol li:nth-child(odd){gap: 45px;}
    #inc02 ol li h2::before{top: -22px;font-size: 105px;}
    #inc02 ol li.natural{padding-left: 20px;}
    #inc02 ol li.natural .thumb-box{max-width:490px}
    #inc02 ol li.natural .text-box h2{padding-bottom: 46px;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 25px;}
}
@media (max-width:1024px){
    #inc02 ol li:nth-child(odd){gap: 35px;}
    #inc02 ol li h2::before{top: -14px;font-size: 95px;}
    #inc02 ol li .text-box p.desc{font-size: 16px;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 18px;}
    #inc02 ol li.natural .thumb-box{max-width:400px}
    #inc02 ol li.natural .text-box h2{padding-left: 50px;}
    #inc02 ol li.mood{margin-top: 25px;padding-right: 20px;}
    #inc02 ol li.mood .col-2{gap: 35px;}
    #inc02 ol li.mood h2{padding-right: 80px;padding-bottom: 40px;}
    #inc02 ol li.story{padding-left: 20px;}
    #inc02 ol li.story .thumb-box{max-width:360px}
    #inc02 ol li.story .text-box{padding-top: 55px;}
    #inc02 ol li.story .text-box h2{padding-left: 64px;padding-bottom: 60px;}
}
@media (max-width:768px){
    #inc02{padding-top: 60px;padding-bottom: 80px;}
    #inc02 ol li:nth-child(odd){gap: 30px;}
    #inc02 ol li h2::before{font-size: 80px;}
    #inc02 ol li .text-box p.desc{font-size: 15px;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 14px;}
    #inc02 ol li.natural .thumb-box{max-width:310px}
    #inc02 ol li.natural .text-box h2{padding-left: 34px;padding-bottom: 32px;}
    #inc02 ol li.mood{margin-top: 0;}
    #inc02 ol li.mood .col-2{gap: 30px;}
    #inc02 ol li.mood .thumb-box{max-width:330px}
    #inc02 ol li.mood h2{padding-right: 52px;padding-bottom: 30px;}
    #inc02 ol li.story .thumb-box{max-width:270px}
    #inc02 ol li.story .text-box{padding-top: 40px;}
    #inc02 ol li.story .text-box h2{padding-left: 42px;padding-bottom: 36px;}
}
@media (max-width:650px){
    #inc02 ol li h2::before{left: -24px;top: -7px;font-size: 60px;}
    #inc02 ol li:nth-child(odd){flex-direction: column;align-items: center;width: max-content;text-align: center;}
    #inc02 ol li.mood .col-2{flex-direction: column;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 6px;}
    #inc02 ol li.natural{padding-bottom: 40px;}
    #inc02 ol li.natural .text-box h2{padding-left: 0;padding-bottom: 15px;}
    #inc02 ol li.mood{padding-bottom: 40px;}
    #inc02 ol li.mood > h2{display: none;}
    #inc02 ol li.mood .text-box{text-align: center;}
    #inc02 ol li.mood .text-box h2{display: block;}
    #inc02 ol li.mood h2{padding-right: 0;padding-bottom: 15px;}
    #inc02 ol li.story .text-box{padding-top: 0;}
    #inc02 ol li.story .thumb-box{max-width:330px}
    #inc02 ol li.story .text-box h2{padding-left: 0;padding-bottom: 15px;}

}
@media (max-width:480px){
    #inc02{padding: 45px 20px 65px;}
    #inc02 ol li .text-box h2{display: flex;flex-direction: column;gap: 2px;}
    #inc02 ol li h2::before{position:static;transform: translateY(5px);font-size: 38px;}
    #inc02 ol li.mood .text-box h2{display: flex;}
    #inc02 ol li.mood h2{padding-bottom: 10px;}
    #inc02 ol li.story .text-box h2{padding-bottom: 10px;}
    
    #inc02 ol li.natural{padding-left: 0;}
    #inc02 ol li.natural .text-box h2{padding-bottom: 10px;}
    #inc02 ol li .text-box p.desc:first-of-type{padding-bottom: 4px;}
    #inc02 ol li.mood{padding-right: 0;}
    #inc02 ol li.story{padding-left: 0;}
    #inc02 ol li:nth-child(odd){gap: 26px;width:100%}
    #inc02 ol li .text-box p.desc{font-size: 14px;}
    #inc02 ol li.mood{align-items: center;}
    #inc02 ol li .thumb-box{max-width:none !important}
}