@charset "UTF-8";

#visual.sections.section_01{ overflow: hidden; margin: 0; height:100%; background: var(--color-main);}
#visual.sections.section_01:before{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/bg_1.webp) no-repeat 50% 50% / cover;}
#visual.sections.section_01 > .width_con{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.box.ball_1{position: fixed; border-radius: 50%;}
.box.ball_1:after{ position: fixed; content: ""; top: -50%; left: -50%; aspect-ratio: 1/1; width: 100%; background: url(../img/img_ball_1.webp) no-repeat 50% 0% / cover; animation: star 2500ms infinite cubic-bezier(.5,0,.5,1); transition: all 600ms linear; margin-top: -50%;}
.box.ball_2{position: fixed; border-radius: 50%;}
.box.ball_2:after{ position: fixed; content: ""; top: -50%; left: -50%; aspect-ratio: 1/1; width: 100%; background: url(../img/img_ball_2.webp) no-repeat 50% 0% / cover; animation: star 2000ms infinite cubic-bezier(.5,0,.5,1); transition: all 500ms linear; margin-top: -50%;}

@keyframes needle {
    0% {
        top : 0;
    }

    50% {
        top : -10px;
    }

    100% {
        top : 0;
    }
}
.box.ball_1.a{ margin: 251px 0 0 -731px; width: 791px; rotate: 25deg; scale: 80%; height: 791px; z-index: 2;}
.box.ball_1.b{ margin: 894px 0 0 406px; width: 791px; rotate: 25deg; height: 791px; scale: 95%; z-index: 2;}
.box.ball_2.c{ margin: 640px 0 0 999px; width: 516px;  height: 516px; z-index: 2; scale: 100%; }
.box.ball_1.d{ margin: 705px 0 0 -202px; width: 791px; rotate: 25deg; scale: 70%; height: 791px; }
.box.ball_1.e{ margin: 264px 0 0 1017px; width: 791px; rotate: 25deg;  scale: 80%; height: 791px; }
.box.ball_2.f{ margin: 322px 0 0 -778px; width: 516px; scale: 95%; height: 516px;}

#visual.sections.section_01 > .distort{position: absolute;width: 200vw;aspect-ratio: 1/1;z-index: 2;transform: translate(-50%, -50%);background: radial-gradient(circle, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .15) 35%);-webkit-backdrop-filter: blur(.4vw);backdrop-filter: blur(.4vw);-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 35%);mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 35%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#visual.sections.section_01 > .width_con .title_con h3{}
#visual.sections.section_01 > .width_con .title_con h2{}
#visual.sections.section_01 > .width_con .title_con h4{}
#visual.sections.section_01 > .width_con .title_con h5{}

#about.sections.section_02{ background: linear-gradient(var(--color-w-015) 0%, var(--color-main) 20%, var(--color-main) 68%, var(--color-main) 80%); backdrop-filter: blur(20px); z-index: 2;}
#about.sections.section_02 .star{animation: star_1 5000ms infinite cubic-bezier(.6,0,.6,1); transition: all 200ms linear; pointer-events: none;}
@keyframes star_1 {
    0% { rotate : 0; }

    30% { rotate : 1deg; left: 10px; }

    55% { rotate : 0; }

    60% { rotate : 3deg; left: 20px; }

    100% { rotate : 0; }
}
#about.sections.section_02 .star > img{ position: absolute; bottom: 0; left: 50% ; margin: -166px 0 0 -666px; scale: 70%; animation: star_2 4000ms infinite cubic-bezier(.5,0,.5,1); transition: all 300ms linear; pointer-events: none;}
@keyframes star_2 {
    0% { top : 0; }
    
    25% { top : -35px; }

    50% { top : 0; }

    75% { top : -15px; }

    100% { top : 0; }
}
#about.sections.section_02 > .width_con{}
#about.sections.section_02 > .width_con > ul.v_con.two_con{}
#about.sections.section_02 > .width_con > ul.v_con.two_con > li.cells{}
#about.sections.section_02 > .width_con > ul.v_con.two_con > li.cells > .title_con{}

#skills.sections.section_03{ z-index: 2;}
#skills.sections.section_03:before,
#skills.sections.section_03::after{position: absolute; content: ""; bottom: 0; left: 0; width: 100%; }
#skills.sections.section_03:before{height: 1920px; background: url(../img/bg_2_3.webp) no-repeat 50% 50% / cover; pointer-events: none;}
#skills.sections.section_03:after{height: 1681px; background: url(../img/bg_2_3_ball.webp) no-repeat 50% 50% / cover; pointer-events: none;}
#skills.sections.section_03 .width_con{}
#skills.sections.section_03 .width_con > ul.v_con.two_con{}
#skills.sections.section_03 .width_con > ul.v_con.two_con > li.cells{}
#skills.sections.section_03 .width_con > ul.v_con.two_con > li.cells >.title_con{}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con{}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells{}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells > h3{}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells > h3 > i{padding-right: var(--mrgn); color: var(--color-point-1);}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells.list{}
#skills.sections.section_03 > .width_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells.list > h4{margin-bottom: var(--mrgn);}

#portfolio.sections.section_04{ background: #dadde1; z-index: 2;}
#portfolio.sections.section_04:before,
#portfolio.sections.section_04:after{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%;}
#portfolio.sections.section_04:before{ background: url(../img/bg_portfolio.webp) no-repeat 50% 50% / cover;}
#portfolio.sections.section_04:after{background: url(../img/bg_portfolio_ball.webp) no-repeat 50% 50% / cover;}
#portfolio.sections.section_04 > .width_con{}
#portfolio.sections.section_04 > .width_con .title_con{}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con{margin-bottom: 36px;}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con{}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells{}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells > a{}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells > a > i{ position: absolute; top: 0; right: 0; margin: var(--mrgn) var(--mrgn)  0 0; font-size: var(--mrgn);}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells > a > img{}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells > .title_con{ margin-top: var(--mrgn-x4);}
#portfolio.sections.section_04 > .width_con > ul.v_con.two_con > li.cells > .title_con > h3{margin-bottom: var(--mrgn-x2); color: var(--color-point-2);}
#portfolio.sections.section_04 > .width_con > ul.v_con.four_con{}
#portfolio.sections.section_04 > .width_con > ul.v_con.four_con > li.cells{}
#portfolio.sections.section_04 > .width_con > ul.v_con.four_con > li.cells > a{}
#portfolio.sections.section_04 > .width_con > ul.v_con.four_con > li.cells:active > a{box-shadow: 0 1px 3px -1px var(--color-k); filter: brightness(.9); transition: all 100ms ease-in-out;}
#portfolio.sections.section_04 > .width_con > ul.v_con.four_con > li.cells > a > img{}

#attitude.sections.section_05{ z-index: 2;}
#attitude.sections.section_05 img{ position: absolute; bottom: 0; left: 50% ; margin: -100px 0 0 -182px; scale: 85%; rotate: 30deg; animation: star 1450ms infinite cubic-bezier(.5,0,.5,1); transition: all 300ms linear; pointer-events: none; }
@keyframes star {
    0% {
        top : 0;
    }

    50% {
        top : -20px;
    }

    100% {
        top : 0;
    }
}
#attitude.sections.section_05 > .width_con{}
#attitude.sections.section_05 > .width_con > ul.v_con.two_con{ margin-bottom: var(--mrgn-x4);}
#attitude.sections.section_05 > .width_con > ul.v_con.two_con > li.cells{}
#attitude.sections.section_05 > .width_con > ul.v_con.two_con > li.cells > .title_con{}
#attitude.sections.section_05 > .width_con > ul.v_con.three_con{}
#attitude.sections.section_05 > .width_con > ul.v_con.three_con > li.cells{ background: var(--color-k-005); backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
#attitude.sections.section_05 > .width_con > ul.v_con.three_con > li.cells > i{padding: var(--mrgn-x2); font-size: var(--mrgn-x2);}
#attitude.sections.section_05 > .width_con > ul.v_con.three_con > li.cells > .text_con{}


#contact.sections.section_06{ z-index: 2;}
#contact.sections.section_06::before{position: absolute; content : ""; top: 0; left: 0; width: 100%; height: 1263px; background: url(../img/bg_contact.webp)no-repeat 50% 50% / cover;}
#contact.sections.section_06 > .width_con{}
#contact.sections.section_06 > .width_con > ul.v_con{}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells{ width: 1200px; height: 480px; background: var(--color-k-005); backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px); padding-bottom: 36px;}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > .title_con{ margin-top: var(--mrgn-x4);}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.four_con{}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.four_con > li.cells{ background: var(--color-k-000);}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.four_con > li.cells > i{ position: absolute; top: 0;left: 50%;font-size: var(--mrgn-x2); margin-left: calc(var(--mrgn)* -1)}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.four_con > li.cells > .text_con{ top: 0; margin-top: var(--mrgn);}
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.four_con > li.cells:nth-child(3),
#contact.sections.section_06 > .width_con > ul.v_con > li.cells > ul.v_con.six_con > li.cells:nth-child(4){}
#contact.sections.section_06 > .width_con > img{height: var(--mrgn-x4); margin: 0 0 0 calc(50% - 74.5px)}
#contact.sections.section_06 > .width_con > .text_con{margin-bottom: var(--mrgn-half); position: relative;}