@charset "utf-8";



/* ==================================================================================== */

body.color05,
html {
    color: var(--font05);
}

body.color05 .hd-line {
    border-bottom: 1px solid var(--spot05);
}



.fix-txt ul .color-box.box01 {
    background-color: var(--main01);

}

.fix-txt ul .color-box.box02 {
    background-color: var(--main02);
}

.fix-txt ul .color-box.box03 {
    background-color: var(--main03);
}

.fix-txt ul .color-box.box04 {
    background-color: var(--main04);
}

.fix-txt ul .color-box.box05 {
    background-color: var(--main05);
}




.fix-bubble {
    background-color: var(--spot01);
}

.fix-bubble::after {
    border-top: 20px solid var(--spot01);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

body.color02 .fix-bubble {
    background-color: var(--main02);

}

body.color02 .fix-bubble::after {
    border-top: 20px solid var(--main02);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

body.color03 .fix-bubble {
    background-color: var(--spot03);

}

body.color03 .fix-bubble::after {
    border-top: 20px solid var(--spot03);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

body.color04 .fix-bubble {
    background-color: var(--spot04);
    color: var(--main04);
}

body.color04 .fix-bubble::after {
    border-top: 20px solid var(--spot04);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

body.color05 .fix-bubble {
    background-color: var(--spot05);
    color: var(--main05);
}

body.color05 .fix-bubble::after {
    border-top: 20px solid var(--spot05);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

body.color02 .fix-bubble {

    background-color: var(--spot01);
}

body.color02 .fix-bubble::after {
    border-top: 20px solid var(--spot01);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}








body header {
    background: var(--main01);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);

}

body.color02 header {
    background: var(--main02);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4962359943977591) 100%);
}

body.color03 header {
    background: var(--main03);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4962359943977591) 100%);
}

body.color04 header {
    background: var(--main04);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4962359943977591) 100%);
}

body.color05 header {
    background: var(--main05);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.4962359943977591) 100%);
}



.back {
    
    background-image: url(/img/pexels_videos_1926295-_1080p_.gif);
}

body.color02 .back {
    background-color: var(--main02);
    background-image: none;
}

body.color03 .back {
    background-color: var(--main03);
    background-image: none;
}

body.color04 .back {
    background-color: var(--main04);
    background-image: none;
}

body.color05 .back {
    background-color: var(--main05);
    background-image: none;
}



.main-txt {
    color: var(--spot01);
}

body.color02 .main-txt {
    color: var(--spot02);
}

body.color03 .main-txt {
    color: var(--spot03);
}

body.color04 .main-txt {
    color: var(--spot04);
}

body.color05 .main-txt {
    color: var(--spot05);
}



.menu {
    background-color: var(--back01);
}

body.color02 .menu {
    background-color: var(--sub02);
}

body.color03 .menu {
    background-color: var(--sub03);
}

body.color04 .menu {
    background-color: var(--sub04);
}

body.color05 .menu {
    background-color: var(--sub05);
}





.menu-bg {
    -webkit-text-stroke: 1px var(--spot01);
}

body.color02 .menu-bg {
    -webkit-text-stroke: 1px var(--spot02);
}

body.color03 .menu-bg {
    -webkit-text-stroke: 1px var(--spot03);
}

body.color04 .menu-bg {
    -webkit-text-stroke: 1px var(--spot04);
}

body.color05 .menu-bg {
    -webkit-text-stroke: 1px var(--main05);
}




.me-box {
    background-color: var(--main01);
}

body.color02 .me-box {
    background-color: var(--main02);
}

body.color03 .me-box {
    background-color: var(--main03);
}

body.color04 .me-box {
    background-color: var(--main04);
}

body.color05 .me-box {
    background-color: var(--main05);
}





.me-box ul li:hover {
    color: var(--spot01);
}

body.color02 .me-box ul li:hover {
    color: var(--spot02);
}

body.color03 .me-box ul li:hover {
    color: var(--spot03);
}


body.color04 .me-box ul li:hover {
    color: var(--spot04);
}

body.color05 .me-box ul li:hover {
    color: var(--spot05);
}



.fix-bar {
    background-color: var(--back01);
    color: var(--font01);
}

body.color02 .fix-bar {
    background-color: var(--back02);
    color: var(--font02);
}

body.color03 .fix-bar {
    background-color: var(--back03);
    color: var(--font03);
}

body.color04 .fix-bar {
    background-color: var(--back04);
    color: var(--font04);
}

body.color05 .fix-bar {
    background-color: var(--back05);
    color: var(--font05);
}






.nav-right .nav-box {
    background-color: var(--main01);
    color: var(--sub01);
}

body.color02 .nav-right .nav-box {
    background-color: var(--main02);
    color: var(--sub02);
}

body.color03 .nav-right .nav-box {
    background-color: var(--main03);
    color: var(--sub03);
}

body.color04 .nav-right .nav-box {
    background-color: var(--main04);
    color: var(--sub04);
}

body.color05 .nav-right .nav-box {
    background-color: var(--main05);
    color: var(--sub05);
}



.graphic {
    background-color: var(--sub06);
}

body.color02 .graphic {
    background-color: var(--font02);
}

body.color03 .graphic {
    background-color: var(--spot03);
}

body.color04 .graphic {
    background-color: var(--back04);
}

body.color05 .graphic {
    background-color: var(--back05);
}


.graphic-bg span {
    -webkit-text-stroke: 1px var(--font-bg01);
    color: transparent;
}

body.color02 .graphic-bg span {
    -webkit-text-stroke: 1px var(--font-bg02);
    color: transparent;

}

body.color03 .graphic-bg span {
    -webkit-text-stroke: 1px var(--font-bg03);
    color: transparent;

}

body.color04 .graphic-bg span {
    -webkit-text-stroke: 1px var(--font-bg04);
    color: transparent;
}

body.color05 .graphic-bg span {
    -webkit-text-stroke: 1px var(--font-bg05);
    color: transparent;
}




.graphic-bg span:hover {
    -webkit-text-stroke: 1px var(--font-bg01);
    color: var(--font-bg01);
}

body.color02 .graphic-bg span:hover {
    -webkit-text-stroke: 1px var(--font-bg02);
    color: var(--font-bg02);
}

body.color03 .graphic-bg span:hover {
    -webkit-text-stroke: 1px var(--font-bg03);
    color: var(--font-bg03);
}


body.color04 .graphic-bg span:hover {
    -webkit-text-stroke: 1px var(--font-bg04);
    color: var(--font-bg04);
}

body.color05 .graphic-bg span:hover {
    -webkit-text-stroke: 1px var(--font-bg05);
    color: var(--font-bg05);
}


.web {
    background-color: var(--sub01);
}

body.color02 .web {
    background-color: var(--sub02);
}

body.color03 .web {
    background-color: var(--sub03);
}

body.color04 .web {
    background-color: var(--spot04);

}

body.color05 .web {
    background-color: var(--sub05);
}


.web-con-text {
    border-bottom: 1px solid var(--font01);
}

body.color02 .web-con-text {
    border-bottom: 1px solid var(--main02);
}

body.color03 .web-con-text {
    border-bottom: 1px solid var(--font03);
}

body.color04 .web-con-text {
    border-bottom: 1px solid var(--main04);
}

body.color05 .web-con-text {
    border-bottom: 1px solid var(--font06);
}



.web-con-text:last-child {
    border-bottom: 0px;

}




body.color04 .web-con-text h2 {
    color: var(--main04);
}


.web-con-text:hover h2,
.web-con-text:hover span {
    -webkit-text-stroke: var(--font01) 0px;
    color: var(--font01);
}

body.color02 .web-con-text:hover h2,
body.color02 .web-con-text:hover span {
    -webkit-text-stroke: var(--main02) 0px;
    color: var(--main02);
}

body.color03 .web-con-text:hover h2,
body.color03 .web-con-text:hover span {
    -webkit-text-stroke: var(--font03) 0px;
    color: var(--font03);
}

body.color04 .web-con-text:hover h2,
body.color04 .web-con-text:hover span {
    -webkit-text-stroke: var(--main04) 0px;
    color: var(--main04);
}

body.color05 .web-con-text:hover h2,
body.color05 .web-con-text:hover span {
    -webkit-text-stroke: var(--font06) 0px;
    color: var(--font06);
}


/* */

.w-text-l h2 {
    -webkit-text-stroke: var(--font01) 1px;
}

body.color02 .w-text-l h2 {
    -webkit-text-stroke: var(--main02) 1px;
}

body.color03 .w-text-l h2 {
    -webkit-text-stroke: var(--font03) 1px;
}

body.color04 .w-text-l h2 {
    -webkit-text-stroke: var(--font04) 1px;
}

body.color05 .w-text-l h2 {
    -webkit-text-stroke: var(--font06) 1px;
}




.w-text-l span {
    color: var(--font01);
}

body.color02 .w-text-l span {
    color: var(--main02);
}

body.color03 .w-text-l span {
    color: var(--font03);
}

body.color04 .w-text-l span {
    color: var(--main04);
}

body.color05 .w-text-l span {
    color: var(--font06);
}


.w-text-r {
    color: var(--font01);
}

body.color02 .w-text-r {
    color: var(--font02);
}

body.color03 .w-text-r {
    color: var(--font03);
}

body.color04 .w-text-r {
    color: var(--main04);
}

body.color05 .w-text-r {
    color: var(--font06);
}










.web-btn:hover {
    background-color: var(--spot01);
}

body.color02 .web-btn:hover {
    background-color: var(--spot02);
}

body.color03 .web-btn:hover {
    background-color: var(--spot03);
}

body.color04 .web-btn:hover {
    background-color: var(--spot04);
}

body.color05 .web-btn:hover {
    background-color: var(--spot05);
}



.w-p-bt span:hover {
    color: var(--spot01);
}

body.color02 .w-p-bt span:hover {
    color: var(--spot02);
}

body.color03 .w-p-bt span:hover {
    color: var(--font03);
}

body.color04 .w-p-bt span:hover {
    color: var(--spot04);
}

body.color05 .w-p-bt span:hover {
    color: var(--spot05);
}




.charactor {
    background-color: var(--sub01);
}

body.color02 .charactor {
    background-color: var(--back02);
}

body.color03 .charactor {
    background-color: var(--spot03);
}

body.color04 .charactor {
    background-color: var(--back04);
}

body.color05 .charactor {
    background-color: var(--back05);
}





body.color02 .char-main h2 {
    color: var(--spot02);
}

body.color03 .char-main h2 {
    color: var(--font03);
}

body.color04 .char-main h2 {
    color: var(--spot04);
}

body.color05 .char-main h2 {
    color: var(--spot05);
}




.char-main .round {
    border: 3px solid var(--spot01);
}

body.color02 .char-main .round {
    border: 3px solid var(--main02);
    color: var(--main02);
}

body.color03 .char-main .round {
    border: 3px solid var(--main03);
}

body.color04 .char-main .round {
    border: 3px solid var(--main04);
    color: var(--main04);
}

body.color05 .char-main .round {
    border: 3px solid var(--sub05);
    color: var(--sub05);
}



.char-main .round:hover {
    border: 3px solid #fff;
    color: #fff;
}

.char-main .round:hover .fix-bubble2 {
    color: var(--spot01);
}


body.color02 .char-main .round:hover {
    border: 3px solid var(--spot02);
    color: var(--spot02);
}

body.color03 .char-main .round:hover {
    border: 3px solid #fff;
    color: #fff;
}

body.color03 .char-main .round:hover .fix-bubble2 {
    color: var(--main03);
}

body.color04 .char-main .round:hover {
    border: 3px solid var(--sub05);
    color: var(--sub05);
}

body.color05 .char-main .round:hover {
    border: 3px solid var(--spot03);
    color: var(--spot03);
}





.char-main h3 {
    color: var(--spot01);
}


body.color02 .char-main h3 {
    color: var(--spot02);
}


body.color03 .char-main h3 {
    color: var(--font03);
}

body.color04 .char-main h3 {
    color: var(--spot04);
}

body.color05 .char-main h3 {
    color: var(--sub05);
}



body.color05 .hd-skill {
    border-bottom: 1px solid var(--sub01);
}




.me-box ul li:hover {
    color: var(--spot01);
    background-color: var(--back01);
}


body.color02 .me-box ul li:hover {
    color: var(--spot02);
    background-color: var(--back02);
}


body.color03 .me-box ul li:hover {
    color: var(--spot03);
    background-color: var(--back03);
}



body.color04 .me-box ul li:hover {
    color: var(--spot04);
    background-color: var(--back04);
}

body.color05 .me-box ul li:hover {
    color: var(--spot05);
    background-color: var(--back05);
}




.ft {
    background-color: var(--main01);
}

body.color02 .ft {
    background-color: var(--main02);
}

body.color03 .ft {
    background-color: var(--main03);
}

body.color04 .ft {
    background-color: var(--main04);
}

body.color05 .ft {
    background-color: var(--main05);
}


.ft-go-btn {
    border: 1px solid var(--spot01);
    background-color: var(--spot01);
}

body.color02 .ft-go-btn {
    border: 1px solid var(--spot02);
    background-color: var(--spot02);
}

body.color03 .ft-go-btn {
    border: 1px solid var(--spot03);
    background-color: var(--spot03);
}

body.color04 .ft-go-btn {
    border: 1px solid var(--spot02);
    background-color: var(--spot02);
}


body.color05 .ft-go-btn {
    border: 1px solid var(--sub05);
}


.ft-line {
    border-bottom: 1px solid #fff;
}

body.color05 .ft-line {
    border-bottom: 1px solid var(--sub05);
}

body.color05 .go-btn {
    color: #fff;
}
body.color05 .web-btn{
    color: #fff;
}




@media screen and (max-width:1024px) {


    body.color05 .hd-skill {
        border-bottom: 0px;

    }

    body.color05 .hd-skill .skill-line {
        border-bottom: 1px solid var(--sub05);
    }

}