#leotive_top, #contact {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#leotive_top .top_content {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
}

#leotive_top .top_catch_copy,
#leotive_top h1 { position: absolute;}

#leotive_top .top_catch_copy {
    top: 3vh;
    right: 90px;
    width: 100%;
    text-align: end;
    font-size: clamp( 20px, 2vw, 40px);
    line-height: 1.8;
}

#leotive_top h1 {
    left: 95px;
    bottom: 0;
}

#leotive_top h1 p {
    text-align: start;
    width: 100%;
    word-break: break-all;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
    line-height: 1;
    text-transform: uppercase;
}

#leotive_top h1 p:first-of-type { font-size: clamp( 28px, 4vw, 80px);}

#leotive_top h1 p:last-of-type { font-size: clamp( 160px, 18vw, 350px);}

#leotive_top .deco {
    position: absolute;
    clip-path: circle(50% at 50% 50%);
    aspect-ratio: 1 / 1;
}

#leotive_top .yl01 {
    width: 45%;
    background: linear-gradient(90deg, rgba(255, 255, 0, 1) 0%, rgba(245, 191, 0, 1) 100%),url(../images/noize_yl.png);
    background-blend-mode: overlay;
    bottom: 0;
    left: 0;
}

#leotive_top .yl02 {
    width: 13%;
    background: linear-gradient(225deg, rgba(255, 255, 0, 1) 0%, rgba(245, 191, 0, 1) 100%),url(../images/noize_yl.png);
    background-blend-mode: overlay;
    right: 35px;
    bottom: 80px;
}

#leotive_top .gr01 {
    width: 65%;
    background: linear-gradient(270deg, rgba(255, 255, 0, 1) 0%, rgba(184, 255, 0, 1) 100%), url(../images/noize_gr.png);
    background-blend-mode: overlay;
    top: -65%;
    right: -25%;
}

#leotive_top .gr02 {
    width: 8%;
    background: linear-gradient(90deg, rgba(255, 255, 0, 1) 0%, rgba(184, 255, 0, 1) 100%), url(../images/noize_gr.png);
    top: 170px;
    left: 100px;
}

#leotive_top .gr03 {
    width: 8%;
    background: linear-gradient(310deg, rgba(255, 255, 0, 1) 0%, rgba(184, 255, 0, 1) 100%), url(../images/noize_gr.png);
    top: 450px;
    right: 760px;
}

#service .service_content {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 50px #ffce00;
}

#service .left {
    border-top-right-radius: 300px;
    border-bottom-right-radius: 300px;
    background: linear-gradient(90deg, rgba(184, 255, 0, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%), url(../images/noize_gray.png);
    background-blend-mode: overlay;
    margin-bottom: 80px;
    margin-right: auto;
    padding: 70px 180px 70px 95px;
}

#service .right {
    flex-direction: row-reverse;
    border-top-left-radius: 300px;
    border-bottom-left-radius: 300px;
    background: linear-gradient(270deg, rgba(184, 255, 0, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%), url(../images/noize_gray.png);
    background-blend-mode: overlay;
    margin-left: auto;
    padding: 70px 95px 70px 180px;
}

#service .left img { width: 30%;}

#service .right img { width: 22%;}

#service h3 {
    color: #60ce19;
    text-align: start;
    text-transform: uppercase;
    word-break: break-all;
    font-size: clamp( 50px, 6.25vw, 120px);
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
    margin-bottom: 20px;
    line-height: 1;
}

#service p {
    font-size: clamp( 18px, 1.3vw, 25px);
    line-height: 1.8;
}

#service .right h3,
#service .right p { text-align: end;}

#works .works_wrap {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 100px);
    gap: 30px;
}

#works .lg { height: 360px;}

#works .sm { height: 230px;}

#works .works_wrap div {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 15px #ffce00;
}

#works .works_wrap div a {
    display: block;
    height: 100%;
    position: relative;
}

#works .works_wrap div a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#works .works_txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(255, 255, 255, .8);
    transition: ease-in .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

#works .works_txt p { text-align: center;}

#works .category {
    text-transform: uppercase;
    word-break: break-all;
    font-size: clamp( 18px, 1vw, 16px);
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
}

#works .category span {
    display: inline-block;
    position: relative;
}

#works .category span::before,
#works .category span::after {
    position: absolute;
    display: block;
    width: 15%;
    height: 1px;
    top: calc(50% - 0.5px);
    background-color: #000;
}

#works .category span::before { left: -10%;}

#works .category span::after { right: -10%;}

#works .works_ttl {
    font-size: clamp( 18px, 1vw, 16px);
    line-height: 1.5;
}

#works .works_wrap div a:hover .works_txt { opacity: 1;}

.works01 {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
}

.works02 {
    grid-column: 1 / 3;
    grid-row: 4 / 7;
}

.works03 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

.works04 {
    grid-column: 3 / 4;
    grid-row: 3 / 5;
}

.works05 {
    grid-column: 3 / 4;
    grid-row: 5 / 7;
}

.works06 {
    grid-column: 4 / 6;
    grid-row: 1 / 4;
}

.works07 {
    grid-column: 4 / 6;
    grid-row: 4 / 7;
}

.works08 {
    grid-column: 6 / 7;
    grid-row: 1 / 3;
}

.works09 {
    grid-column: 6 / 7;
    grid-row: 3 / 5;
}

.works10 {
    grid-column: 6 / 7;
    grid-row: 5 / 7;
}

#about .wrapper {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#about .wrapper div { width: 50%;}

#about .wrapper img { width: 30%;}

#about h3 {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
      font-size: clamp( 45px, 3.125vw, 60px);
      line-height: 1;
      text-transform: uppercase;
      word-break: break-all;
      margin-bottom: 5px;
}

#about .wrapper div p {
    line-height: 1.6;
}

#about .wrapper div p:first-of-type {
    margin-bottom: 80px;
    font-size: clamp( 18px, 1.3vw, 25px);
}

#about .wrapper div p:last-of-type { font-size: clamp( 18px, 1vw, 20px);}

#skill .skill_list {
    width: 60%;
    margin: 0 auto;
}

#skill .skill_item {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#skill .skill_item:last-of-type { margin-bottom: 0;}

#skill .skill_item span {
  display: inline-block;
  width: 20%;
  font-size: clamp( 25px, 1.5625vw, 30px);
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

#skill .bar {
    display: inline-block;
    width: 79%;
    height: 50px;
    background: #eee;
    border-radius: 25px;
    overflow: hidden;
    vertical-align: middle;
    }

#skill .fill {
  height: 100%;
  width: 0;
  background: #b2f020;
  transition: width 1s ease-in-out;
}

#contact {
    padding-top: 100px;
    margin-top: -100px;
    padding-bottom: 20px;
}

#contact .deco { position: absolute;}

#contact .contact_txt,
#contact .form_wrap,
#contact h2 {
    position: relative;
    z-index: 1;
}

#contact .contact_txt {
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: clamp( 18px, 1vw, 16px);
    margin-bottom: 50px;
  }

#contact .form_wrap {
width: 40%;
margin: 0 auto;
}

#contact .form_wrap p {
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
font-size: clamp( 18px, 1vw, 16px);
}

#contact .form_wrap p:last-of-type { align-items: flex-start;}

#contact .form_wrap label {
display: block;
width: 20%;
}

#contact .form_wrap input,
#contact .form_wrap textarea {
width: 80%;
background-color: #fff;
box-shadow: 0 0 10px #ffce00;
padding: 15px;
}


#contact .form_wrap input {
    height: 50px;
    border-radius: 25px;
}

#contact .form_wrap textarea {
    height: 300px;
    border-radius: 20px;
}

#contact button {
    width: 90%;
    margin: 0 auto 100px auto;
    padding: 20px;
    text-align: center;
    font-size: clamp( 14px, 1vw, 16px);
    background-color: #b8ff00;
    box-shadow: 0 0 10px #ffce00;
    border-radius: 30px;
    transition: all .2s;
}

#contact button:hover { background-color: #fff;}

#contact .yl02, #contact .yl03,
#contact .gr01 {
    clip-path: circle(50% at 50% 50%);
    aspect-ratio: 1 / 1;
}

#contact .yl01 {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(0deg,rgba(244, 168, 0, 1) 0%, rgba(255, 255, 0, 1) 20%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
    background-blend-mode: overlay;
    left: 0;
    bottom: 0;
}

#contact .yl02 {
    width: 35%;
    background: linear-gradient(135deg,rgba(239, 113, 0, 1) 0%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
    background-blend-mode: overlay;
    right: -190px;
    bottom: -170px;
}

#contact .yl03 {
    width: 20%;
    background: linear-gradient(315deg,rgba(239, 113, 0, 1) 0%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
    background-blend-mode: overlay;
    top: 80px;
    left: 0;
}

#contact .gr01 {
    width: 53%;
    background: linear-gradient(225deg,rgba(115, 255, 0, 1) 0%, rgba(255, 255, 0, 1) 50%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
    background-blend-mode: overlay;
    left: -500px;
    bottom: -500px;
}


/* responsive */
@media (max-width: 1920px){

    #leotive_top h1 { left: 5vw;}

    #leotive_top .top_catch_copy { right: 4vw;}

    #service h3 { margin-bottom: 1.8vh;}

    #service .left {
        padding: 6.4vh 9.3vw 6.4vh 4.9vw;
        margin-bottom: 7.4vh;
    }

    #service .right { padding: 6.4vh 4.9vw 6.4vh 9.3vw;}

    #about .wrapper div p:first-of-type { margin-bottom: 7.4vh;}

    #skill .skill_item { margin-bottom: 3vh;}

    #contact .contact_txt, #contact .form_wrap p { margin-bottom: 4.6vh;}

    #contact button { margin-bottom: 9.2vh;}
}

@media (max-width: 1199px) {
    #works .works_wrap {
        grid-template-rows: repeat(6, 80px);
        gap: 20px;
    }

    #works .lg { height: 280px;}

    #works .sm { height: 180px;}

    #skill .bar { height: 40px;}

    #contact .form_wrap { width: 60%;}
}

@media (max-width: 767px) {
    #works .works_wrap {
        grid-template-rows: repeat(6, 45px);
        gap: 15px;
    }

    #works .lg { height: 165px;}

    #works .sm { height: 110px;}

    #skill .bar { height: 30px;}

    #skill .skill_list,
    #contact .form_wrap { width: 70%;}

    #contact .form_wrap input { height: 40px;}
}

@media (max-width: 600px) {
    #leotive_top .top_content,
    #contact .yl01 { aspect-ratio: 375 / 667;}

    #leotive_top .top_content { height: auto;}

    #leotive_top .top_catch_copy { top: 5vh;}

    #leotive_top .yl01 {
        width: 100%;
        left: -30%;
    }

    #leotive_top .yl02 {
        width: 20%;
        right: 10%;
        bottom: 55%;
    }

    #leotive_top .gr01 {
        width: 100%;
        top: -25%;
        right: -40%;
    }

    #leotive_top .gr02 {
        width: 25%;
        top: auto;
        bottom: 0;
        left: auto;
        right: -10%;
        background: linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(184, 255, 0, 1) 100%), url(../images/noize_gr.png);
    }

    #leotive_top .gr03 {
        width: 35%;
        background: linear-gradient(45deg, rgba(255, 255, 0, 1) 0%, rgba(184, 255, 0, 1) 100%), url(../images/noize_gr.png);
        top: 33%;
        left: -15%;
    }

    #service .left, #service .right {
        flex-direction: column-reverse;
        padding: 7vh 5vw;
    }

    #service .left {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        background: linear-gradient(90deg, rgba(184, 255, 0, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%), url(../images/noize_gray.png);
    }

    #service .right {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        background: linear-gradient(270deg, rgba(184, 255, 0, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%), url(../images/noize_gray.png);
    }

    #service .left img,
    #service .right img { margin-bottom: 25px;}

    #service .left img { width: 65%;}

    #service .right img { width: 45%}

    #service .service_content { width: 95%;}

    #service h3, #service .right h3 { text-align: center;}

    #service .right p { text-align: start;}

    #service p br { display: none;}

    #works .works_wrap {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(12, 70px);
    }

    #works .works01 {
        grid-column: 1 / 4;
        grid-row: 1 / 4;
    }

    #works .works02 {
        grid-column: 1 / 4;
        grid-row: 4 / 7;
    }

    #works .works03 {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #works .works04 {
        grid-column: 4 / 6;
        grid-row: 3 / 5;
    }

    #works .works05 {
        grid-column: 4 / 6;
        grid-row: 5 / 7;
    }

    #works .works06 {
        grid-column: 1 / 4;
        grid-row: 7 / 10;
    }

    #works .works07 {
        grid-column: 1 / 4;
        grid-row: 10 / 13;
    }

    #works .works08 {
        grid-column: 4 / 6;
        grid-row: 7 / 9;
    }

    #works .works09 {
        grid-column: 4 / 6;
        grid-row: 9 / 11;
    }

    #works .works10 {
        grid-column: 4 / 6;
        grid-row: 11 / 13;
    }

    #works .lg { height: 240px;}

    #works .sm { height: 155px;}

    #about .wrapper {
        flex-direction: column-reverse;
        align-items: center;
    }

    #about .wrapper div { width: 95%;}

    #about .wrapper img {
        width: 55%;
        margin-bottom: 30px;
    }

    #about h3 { text-align: center;}

    #skill .skill_item,
    #contact .form_wrap p { flex-direction: column;}

    #skill .skill_list, #contact .form_wrap { width: 90%;}

    #skill .bar,#skill .skill_item span,
    #contact .form_wrap input,
    #contact .form_wrap textarea,
    #contact button { width: 100%;}

    #skill .bar { height: 40px;}

    #skill_item span { margin-bottom: 5px;}

    #skill .skill_item { margin-bottom: 2vh;}

    #contact .form_wrap input { height: 50px;}

    #contact .form_wrap textarea { height: 200px;}

    #contact .form_wrap label {
        width: 100%;
        margin-bottom: 10px;
    }

    #contact .form_wrap p { margin-bottom: 2vh;}

    #contact .contact_txt { line-height: 1.5;}

    #contact button {
        padding: 25px;
        border-radius: 50px;
        margin-top: 20px;
    }

    #contact .yl01 {
        background: linear-gradient(0deg, rgba(244, 168, 0, 1) 0%, rgba(255, 255, 0, 1) 50%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
    }

    #contact .yl02 {
        width: 100%;
        right: -35%;
        bottom: -10%;
    }

    #contact .yl03 {
        width: 55%;
        top: 0;
        left: -15%;
    }

    #contact .gr01 {
        width: 53%;
        background: linear-gradient(90deg, rgba(115, 255, 0, 1) 0%, rgba(255, 255, 0, 1) 80%, rgba(255, 255, 0, 1) 100%), url(../images/noize_gr.png);
        background-blend-mode: overlay;
        left: auto;
        bottom: 52%;
        right: -20%;
    }

}