@charset "utf-8";


@media (hover: hover) {
    .main-visual a:hover img { transform: translateX(5px);}
}

.main-visual { position: relative; width: auto; padding: 210px 80px 140px; background: url('../images/main/main_visual-bg.png')no-repeat top left; overflow: hidden; }
/* .main-visual:before { position: absolute; top: -214px; left: 15%; display: block; content: ''; clear: both; width: 302px; height: 302px; background: #ededed; border-radius: 100%; }  */
.main-visual:after { position: absolute; bottom: -356px; right: 7.35%; display: block; content: ''; clear: both; width: 448px; height: 448px; background: #ff5a00; border-radius: 100%; }
.main-visual .inner { position: relative; width: 100%; }
.main-visual .inner:before { position: absolute; top: 152px; right: 0; display: block; content: ''; clear: both; width: 60px; height: 60px; background: #ffd13c; border-radius: 100%;} 
.main-visual .inner:after { position: absolute; bottom: 86px; right: 6.885%; display: block; content: ''; clear: both; width: 90px; height: 90px; background: #1e10ca; border-radius: 100%; }
.main-visual h3 { width: auto; font-size: 120px; font-weight: bold; line-height: 1.1; letter-spacing: -0.048em; background: linear-gradient(to right, #ff5a00, #1e0fcb, #ff5a00) 0 0 / var(--bg-size) 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; --bg-size: 400%; animation: move-bg 16s infinite linear; } 
/* .main-visual h3 { width: fit-content; font-size: 160px; font-weight: bold; line-height: 1.1; letter-spacing: -0.048em; background: linear-gradient(to right, #ff5a00, #1e0fcb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */
.main-visual p { margin: 36px 0 54px; color: #333; font-size: 32px; font-weight: bold; line-height: 1.25; }
.main-visual a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 240px; padding: 10px 32px; background: #fff; font-size: 16px; font-weight: bold; line-height: 2.75; letter-spacing: -0.05em; border-radius: 32px; border: 1px solid #222; }
.main-visual a img { transition: .2s; }

.main-portfolio { width: auto; padding: 0 80px 55px; } 
.main-portfolio .inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.main-portfolio .client { width: auto; margin-bottom: 58px; }
.main-portfolio .client a { display: block; cursor: auto; }
.main-portfolio .client-large { width: calc(50% - 32px); }
.main-portfolio .client-small { width: calc(33.33% - 26px); }
.main-portfolio .image-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; max-height: 560px; margin-bottom: 20px; overflow: hidden; }
.main-portfolio .image-wrap img { width: 100%; height: 100%; max-height: 560px; margin: 0 auto; }
.main-portfolio p { color: #333; font-size: 28px; font-weight: bold; line-height: 36px; letter-spacing: -0.056em;} 
.main-portfolio small { color: #aaa; font-size: 16px; line-height: 1.875; letter-spacing: -0.056em; }
.portfolio-cjon { width: 100%; padding: 29.24% 0; background: #640faf; } 
.portfolio-daol { width: 100%; padding: 29.24% 0; background: #1765c3; } 

@media (max-width: 1680px) {
    .main-visual { background: url('../images/main/main_visual-bg.png')no-repeat top left/ 100% auto; } 
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .main-visual { background: url('../images/main/main_visual-bg.png')no-repeat top right/ auto 100%; } 
    .main-visual h3 {font-size: 96px;}
    .main-portfolio .client-large { width: calc( 50% - 16px); }
    .main-portfolio .client-small { width: calc(33.33% - 16px); }
    .main-portfolio p { font-size: 20px; }
}
@media (min-width: 1024px) and (max-width: 1120px) { 
    .main-visual .inner:before { right: -8%; }
    .main-visual .inner:after { right: -4%; }
}


@media (max-width: 1023px) {
    .main-visual { padding: 240px 56px 21.4%; background: url('../images/main/mob_main-visual-bg.png')no-repeat bottom left /cover;  }
    /* .main-visual:before { top: -134px; left: auto; right: -154px; width: 340px; height: 340px; }  */
    .main-visual:after { display: none; }
    .main-visual .inner:before { position: absolute; top: 32px; right: 13.47%; width: 40px; height: 40px; } 
    .main-visual .inner:after { position: absolute; bottom: auto; top: 105px; right: 0; width: 64px; height: 64px; }
    .main-visual h3 { font-size: 86px; line-height: 1.2333; letter-spacing: -0.056em; } 
    /* .main-visual h3 { width: fit-content; font-size: 160px; font-weight: bold; line-height: 1.1; letter-spacing: -0.048em; background: linear-gradient(to right, #ff5a00, #1e0fcb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */
    .main-visual p { margin: 24px 0 68px; font-size: 36px; line-height: 1.5556; }
    .main-visual a { justify-content: center; align-items: center; width: 128px; padding: 40px 0; text-indent: -9999px; border-radius: 64px; border: 2px solid #222; }
    .main-visual a img { height: 28px; transition: .2s; }
    
    .main-portfolio { padding: 0 0 55px; } 
    .main-portfolio .inner { max-width: 640px; margin: 0 auto; }
    .main-portfolio .client { width: auto; margin-bottom: auto; }
    .main-portfolio .client-large { width: 100%; margin-bottom: 60px; }
    .main-portfolio .client-large .image-wrap { margin-bottom: 32px;}
    .main-portfolio .client-small { width: 100%; margin-bottom: 60px; }
    .main-portfolio .client-small .image-wrap { margin-bottom: 32px; }
    .main-portfolio .image-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-height: 640px; margin-bottom: auto; }
    .main-portfolio .image-wrap img { height: 100%; max-height: 640px; }
    .main-portfolio p { padding-left: 40px; font-size: 28px; line-height: 50px; } 
    .main-portfolio small { padding-left: 56px; font-size: 28px; line-height: 36px; }
    .portfolio-cjon { width: 100%; padding: 29.24% 0; background: #640faf; } 
    .portfolio-daol { width: 100%; padding: 29.24% 0; background: #1765c3; } 
}


@media (min-width: 319px) and (max-width: 719px) {
    .main-visual { padding: 33.325% 28px 21.4%; background: url('../images/main/mob_main-visual-bg.png')no-repeat bottom left /cover;  }
    /* .main-visual:before { top: -67px; left: auto; right: -77px; width: 170px; height: 170px; }  */
    .main-visual:after { display: none; }
    .main-visual .inner:before { position: absolute; top: -15px; right: 13.47%; width: 20px; height: 20px; } 
    .main-visual .inner:after { position: absolute; bottom: auto; top: -10px; right: -16; width: 32px; height: 32px; }
    .main-visual h3 { font-size: 50px; line-height: 1.2333; letter-spacing: -0.056em; } 
    /* .main-visual h3 { width: fit-content; font-size: 160px; font-weight: bold; line-height: 1.1; letter-spacing: -0.048em; background: linear-gradient(to right, #ff5a00, #1e0fcb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */
    .main-visual p { margin: 12px 0 34px; font-size: 18px;  }
    .main-visual a { justify-content: center; align-items: center; width: 64px; padding: 9px 0; text-indent: -9999px; border-radius: 32px; border: 1px solid #222; }
    .main-visual a img { height: 14px; transition: .2s; }
    
    .main-portfolio { padding: 0 0 28px; } 
    .main-portfolio .inner { max-width: 640px; margin: 0 auto; }
    .main-portfolio .client { width: auto; margin-bottom: auto; }
    .main-portfolio .client-large { width: 100%; margin-bottom: 38px; }
    .main-portfolio .client-large .image-wrap { margin-bottom: 25px;}
    .main-portfolio .client-small { width: 100%; margin-bottom: 48px; }
    .main-portfolio .client-small .image-wrap { margin-bottom: 17px; }
    .main-portfolio .image-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: auto; }
    .main-portfolio p { padding-left: 28px; font-size: 20px; line-height: 25px; } 
    .main-portfolio small { padding-left: 28px; font-size: 14px; line-height: 18px; }
    .portfolio-cjon { width: 100%; padding: 29.24% 0; background: #640faf; } 
    .portfolio-daol { width: 100%; padding: 29.24% 0; background: #1765c3; } 
}


@media  (max-width: 360px) { 
    .main-visual { padding: 33.325% 28px 21.4%; background: url('../images/main/mob_main-visual-bg.png')no-repeat bottom left /contain; }
}