@charset "utf-8";

/* pc */
#atc02.pc{overflow:hidden;position:relative;width:100%;height:100vh;background-color:#fff}
#atc02.pc .bg{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%) scale(0);width:2150px;height:2150px;border-radius:50%;background-color:#0e0e0e}
#atc02.pc .btxt{position:absolute;left:60%;top:50%;z-index:2;transform:translate(-50%,-50%);width:100%;margin-top:-50px;font-size:150px;font-weight:700;text-align:center;line-height:1;color:#111;letter-spacing:-1px}
#atc02.pc .desc{position:absolute;left:50%;top:0;z-index:2;width:50%;height:100%;color:#222;word-break:keep-all;font-family:'AppleSDGothicNeo'}
#atc02.pc .desc > div{position:absolute;top:65%;width:100%;padding-left:25%;white-space:pre-line}

/* mobile */
#atc02.mo{display:flex;flex-direction:column;align-items:center;justify-content: center;position:relative;width:100%;height:100vh}
#atc02.mo .bg{display:none}
#atc02.mo:before{display:block;content:"";position:absolute;left:0;top:0;z-index:-1;width:0;height:100%;background-color:#0e0e0e;transition:all .4s}
#atc02.mo .btxt{font-size:150px;font-weight:700;line-height:1;color:#111;letter-spacing:-1px;transition:all .4s}
#atc02.mo .desc{margin-top:40px;white-space:pre-line;color:#222;text-align:center;transition:all .4s;font-family:'AppleSDGothicNeo'}
#atc02.mo.on:before{width:100%;transition:all 1.8s var(--ani)}
#atc02.mo.on .btxt{color:#fff;transition:all 1.2s var(--ani)}
#atc02.mo.on .desc{color:#fff;transition:all 1.2s var(--ani)}

@media(max-width:1400px){
#atc02.pc .btxt{font-size:120px}	
}
@media(max-width:1230px){
#atc02.mo .btxt{font-size:120px}
}
@media(max-width:1024px){
#atc02.pc .btxt{font-size:90px}	
#atc02.pc .desc > div{white-space:normal}
#atc02.mo{height:600px}
#atc02.mo .btxt{font-size:90px}
}
@media(max-width:768px){
#atc02.pc .bg{width:1200px;height:1200px}
#atc02.pc .btxt{top:45%;font-size:70px}	
#atc02.pc .desc{left:0;width:100%}
#atc02.pc .desc > div{top:50%;padding:0 20px;text-align:center}
#atc02.mo .btxt{font-size:70px}
#atc02.mo .desc{padding:0 30px;white-space:normal;word-break:keep-all}
}
@media(max-width:580px){
#atc02.pc .btxt{font-size:45px}	
#atc02.pc .desc > div{padding:0 40px}
#atc02.mo{height:400px}
#atc02.mo .btxt{font-size:60px}
}
@media(max-width:480px){
#atc02.mo .btxt{font-size:48px}
}
@media(max-width:380px){
#atc02.pc .desc > div{top:45%}
#atc02.pc .btxt{font-size:32px}	
#atc02.mo .btxt{font-size:36px}
}