@charset "utf-8";

/* 全体のスタイル調整 */
* {
    box-sizing: border-box;
}

/* 初期スタイル */
body {
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Yomogi', cursive;
    font-weight: 400;
    color: #333;
    background-color: #fff;
}

a{
    text-decoration: none;
}

ul{
    margin: 1em 0;
    padding: 0;
    list-style: none;
}

.inner {
    padding: 0 15px;
    margin: 0 auto;
    max-width: 1200px;
}

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

@media screen and (max-width:959px) {
    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }
}

/* ヘッダー */
header{
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 10px;
    background-color: #313131;
    z-index: 1000;
}

.header-menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.logo-area {
    position: relative;
    width: 30%;
    height: 50px;
    font-size: 32px;
    font-family: 'RocknRoll One', sans-serif;
}

.logo-svg{
    position: absolute;
    max-width: 350px;
    overflow: visible;
    top: 50%;
    transform: translate(0, -50%);
}

.logo-outline{
    stroke: #5D0670;
    stroke-width: 8;
}

.logo-inline{
    fill: #fff;
}

@media screen and (max-width:480px) {
    .logo-area{
        width: 50%;
    }
}

/* 検索ボックス */
.search-area{
    margin: 0 auto;
    width: 70%;
}

.search-area input[type="text"]{
    display: block;
    margin: 0 auto;
    width: 40%;
    height: 40px;
    border-radius: 20px;
    border: 0px;
    font-family: 'RocknRoll One', sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;
    color: #333;
    text-align: center;
    transition: all 0.1s linear ;
}

@media screen and (min-width:480px) {
    .search-area input[type="text"]:hover{
    outline: 2px solid #FF0386;
    }
}

.search-area input[type="text"]:focus{
    outline: 2px solid #fff;
    border: 3px solid #FF0386;
}

@media screen and (max-width:480px) {
    .search-area{
        width: 40%;
    }
    .search-area input[type="text"]{
        font-size: 12px;
        width: 80%;
        height: 30px;
    }
}

/* スマホ用タグ検索ボタン */
.tag-btn{
    color: #fff;
    width: 10%;
    cursor: pointer;
}

.tag-btn::after{
    content: "タグ検索";
    font-size: .5em;
    position: absolute;
    top: 45px;
    right: 8px;
}

.tag-btn::before{
    content: "#";
    font-family: 'RocknRoll One', sans-serif;
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 15px; 
}

/* メイン */
main{
    display: flex;
    flex-direction: row;
}

/* サイドバー */
.side-area{
    flex: 20%;
    background-color: #A5FF2F;
    padding-top: 70px;
    padding-bottom: 100px;
}

.tag-area{
    padding-top: 20px;
    width: 100%;
}

.tag-area p{
    display: inline;
    font-size: 20px;
    color: #fff;
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
    background: linear-gradient(transparent 60%,#5FDE98 60%);
}

.tag-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: 0.5em;
    margin-bottom: 5em;
    line-height: 2em;
}

.tag-item{
    border-bottom: 2px dashed #fff;
    padding: 0 0.5em 0;
    cursor: pointer;
}

.tag-item::before{
    content: "○";
    font-size: 8px;
    margin-right: -3px;
}

@media screen and (min-width:480px) {
    .tag-item:hover{
        border-bottom: 2px dashed #B0028D;
        color: #B0028D;
        }
}

input[type="checkbox"] ~ label{
    transition: all 0.2s linear ;
}

input[type="checkbox"]:checked ~ label{
    border-bottom: 2px solid #B0028D;
    color: #B0028D;
}

input[type="checkbox"] ~ .tag-item::before{
    transition: all 0.5s linear ;
}

input[type="checkbox"]:checked ~ .tag-item::before{
    content: "●";
}

.checkbox-hidden{
    display: none;
}

@media screen and (max-width:959px) {
    .tag-closebtn{
        cursor: pointer;
    }

    .tag-closebtn::after{
        content: "閉じる";
        font-size: .5em;
        position: absolute;
        top: 45px;
        right: 11px;
    }
    
    .tag-closebtn::before{
        content: "×";
        font-family: 'RocknRoll One', sans-serif;
        font-size: 30px;
        position: absolute;
        top: 8px;
        right: 15px; 
    }
    
    .tag-area{
        position: absolute;
        top: 0;
        right: 0;
        width: 80vw;
        height: 100dvh;
        background-color: #A5FF2F;
        padding: 30px 10px 20px;
        }

    .tag-scroll{
        height: calc(100dvh - 31px);
        overflow-y: scroll;
    }
    
    .tag-content{
        font-size: 16px;
    }

    .tag-area-cover{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        background-color: #3131313b;
        transform: translateX(-100vw);
    }

    .slide-enter-active, .slide-leave-active{
        transition: transform .2s ease-in-out;
    }

    .slide-enter, .slide-leave-to{
        transform: translateX(100%);
    }
}

@media screen and (min-width:481px) and (max-width:959px) {
    .tag-area{
        width: 40vw;
    }
}

.site-note{
    font-size: 12px;
    margin-left: 1em;
    margin-bottom: 5em;
}

.site-note::before{
    content: "⚠︎";
    color: #FF0386;
    margin-left: -1em;
}

.profile-area{
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 50px 0px;
}

.profile-area p{
    font-family: 'RocknRoll One', sans-serif;
    font-size: 14px;
    color: #333;
    -webkit-text-stroke: 0px #fff;
    text-stroke: 0px #fff;
    background: none;
}

.profile-area > a img{
    display: block;
    width: 100px;
    border-radius: 50%;
    margin: 20px auto;
    cursor: pointer;
}

.profile-area span{
    display: block;
    font-family: 'RocknRoll One', sans-serif;
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
}

.sns-link{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.sns-link img{
    width: 25px;
    transition: all 0.1s;
}

.sns-link a:first-child img{
    margin-right: 15px;
}

@media screen and (min-width:480px) {
    .profile-area > a img:hover{
        animation: wenterme-link 0.7s infinite ease-in-out;
    }

    .sns-link img:hover{
        filter: drop-shadow(2px 2px 0px #473FA8);
        transform: translate(-2px, -2px);
    }
    
}

@keyframes wenterme-link{
    100%{
        transform: scale(1.07);
    }
}

/* コンテンツエリア */
.content-area{
    flex: 80%;
    margin-top: 70px;
    margin-bottom: .5em;
}

/* タブ */
#tab {
    display: flex;
}

.filter-icon{
    width: 36px;
    height: 36px;
    z-index: 200;
}

.filter-icon::before{
    content: "";
    position: absolute;
    top: 70px;
    margin-left: 27px;
    width: .5em;
    height: .75em;
    padding: 1px 0;
    border: 2px solid transparent;
    transform: skew(20deg);
    background-color: #313131;
}

.filter-icon::after{
    content: "";
    position: absolute;
    top: 88px;
    margin-left: -9px;
    width: .5em;
    height: .75em;
    padding: 1px 0;
    border: 2px solid transparent;
    transform: skew(-20deg);
    background-color: #313131;
}

.filter-icon svg{
    position: relative;
    background-color: #313131;
    z-index: 300;
}

.tab-button{
    border: none;
    font-size: 20px;
    line-height: 1.5;
    font-family: 'Yomogi', cursive;
    color: #fff;
    cursor: pointer;
    margin:0 .3em 0 0.5em;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.tab-button span{
    display: inline-block;
}

@media screen and (min-width:480px) {
    .tab-button:hover span{
        -webkit-text-stroke: 1px #fff;
        text-stroke: 1px #fff;
        letter-spacing: .15em;
        z-index: 100;
    }
}

.tab-button::before{
    content: "";
    position: absolute;
    top: 70px;
    margin-left: -13px;
    width: 1em;
    height: 1.5em;
    padding: 1px 0;
    border: 2px solid transparent;
    border-radius: 10% 0 0 10%;
    transform: skew(-8deg);
}

.tab-all::before{
    content: "";
    position: absolute;
    top: 70px;
    margin-left: -20px;
    width: 2em;
    height: 1.5em;
    padding: 1px 0;
    border: 2px solid transparent;
    transform: none;
}

.tab-button::after{
    content: "";
    position: absolute;
    top: 70px;
    margin-left: -5px;
    width: 1em;
    height: 1.5em;
    padding: 1px 0;
    border: 2px solid transparent;
    border-radius: 0 10% 20% 0;
    transform: skew(25deg);
}

.tab-all{background-color: #bbb; transition: all 0.1s ease-in, ;}
.tab-css{background-color: #aaa; transition: all 0.1s ease-in, ;}
.tab-java{background-color: #999; transition: all 0.1s ease-in, ;}
.tab-libra{background-color: #888; transition: all 0.1s ease-in, ;}
.tab-etc{background-color: #777; transition: all 0.1s ease-in, ;}

.tab-all span{position: relative; z-index: 52; transition: all 0.1s ease-in ;}
.tab-css span{position: relative; z-index: 42; transition: all 0.1s ease-in ;}
.tab-java span{position: relative; z-index: 32; transition: all 0.1s ease-in ;}
.tab-libra span{position: relative; z-index: 22; transition: all 0.1s ease-in ;}
.tab-etc span{position: relative; z-index: 12; transition: all 0.1s ease-in ;}

.tab-all::after, .tab-all::before{background-color: #bbb; z-index: 50; transition: all 0.1s ease-in, ;}
.tab-css::after, .tab-css::before{background-color: #aaa; z-index: 40; transition: all 0.1s ease-in, ;}
.tab-java::after, .tab-java::before{background-color: #999; z-index: 30; transition: all 0.1s ease-in, ;}
.tab-libra::after, .tab-libra::before{background-color: #888; z-index: 20; transition: all 0.1s ease-in, ;}
.tab-etc::after, .tab-etc::before{background-color: #777; z-index: 10; transition: all 0.1s ease-in, ;}

@media screen and (min-width:480px) {
    .tab-all:hover,
    .tab-all:hover::after,
    .tab-all:hover::before{background-color: #A5FF2F;}
    .tab-css:hover,
    .tab-css:hover::after,
    .tab-css:hover::before{background-color: #5FDE98;}
    .tab-java:hover,
    .tab-java:hover::after,
    .tab-java:hover::before{background-color: #FF0386;}
    .tab-libra:hover,
    .tab-libra:hover::after,
    .tab-libra:hover::before{background-color: #B0028D;}
    .tab-etc:hover,
    .tab-etc:hover::after,
    .tab-etc:hover::before{background-color: #5D0670;}
}

#tab .-active{
    z-index: 100;
}

#tab .-active .tab-all{background-color: #A5FF2F;}
#tab .-active .tab-css{background-color: #5FDE98;}
#tab .-active .tab-java{background-color: #FF0386;}
#tab .-active .tab-libra{background-color: #B0028D;}
#tab .-active .tab-etc{background-color: #5D0670;}

#tab .-active .tab-all::after,
#tab .-active .tab-all::before{background-color: #A5FF2F;}
#tab .-active .tab-css::after,
#tab .-active .tab-css::before{background-color: #5FDE98;}
#tab .-active .tab-java::after,
#tab .-active .tab-java::before{background-color: #FF0386;}
#tab .-active .tab-libra::after,
#tab .-active .tab-libra::before{background-color: #B0028D;}
#tab .-active .tab-etc::after,
#tab .-active .tab-etc::before{background-color: #5D0670;}

#tab .-active .tab-button span{
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
}

@media screen and (max-width:480px) {
    #tab{
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2%;
    }
    .filter-icon{
        display: none;
    }
    .tab-button{
        font-size: 14px;
        border: #ddd solid 1px;
        border-radius: 20px;
    }
    .tab-button::before{
        display: none;
    }
    .tab-button::after{
        display: none;
    }
    .tab-all{background-color: #888;}
    .tab-css{background-color: #888;}
    .tab-java{background-color: #888;}
    .tab-libra{background-color: #888;}
    .tab-etc{background-color: #888;}
}

/* アイテム */
.content{
    display: flex;
    flex-wrap: wrap;
    margin-top: .5em;
    margin-left: .5em;
}

/* transition-groupで付加されるspanタグ */
.content span{
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 24vw;
    height: 24vw;
    margin: .5em;
    z-index: 1;
}

@media screen and (min-width:480px) {
    .item:hover{
        animation: scaleup .3s forwards;
    }
}

@keyframes scaleup{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.08);
    }
    100%{
        transform: scale(1.05);
    }
}

.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.item-content a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.item-css{
    background-color: #5FDE98;
    width: 100%;
    height: 100%;
}

.item-java{
    background-color: #FF0386;
    width: 100%;
    height: 100%;
}

.item-libra{
    background-color: #B0028D;
    width: 100%;
    height: 100%;
}

.item-etc{
    background-color: #5D0670;
    width: 100%;
    height: 100%;
}

.item-window{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: 2vw;
    left: 2vw;
    width: 20vw;
    height: 14vw;
    background-color: #fff;
    font-size: 0.9em;
    row-gap: 1em;
}

.item-discription{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 2vw;
    width: 24vw;
    height: 8vw;
    padding: 1vw;
    color: #fff;
    font-size: 0.9em;
}

@media screen and (min-width:481px) and (max-width:959px) {
    .item {
        width: 44vw;
        height: 44vw;
        margin: 2%;
    }

    .item-window{
        top: 3vw;
        left: 3vw;
        width: 38vw;
        height: 28vw;
    }
    
    .item-discription{
        top: 3vw;
        width: 44vw;
        height: 13vw;
        padding: 2vw;
    }
    
}

@media screen and (max-width:480px) {
    .item {
        width: 80vw;
        height: 80vw;
        margin: 8%;
        margin-top: 2%;
    }

    .item-window{
        top: 5vw;
        left: 5vw;
        width: 70vw;
        height: 50vw;
    }
    
    .item-discription{
        top: 5vw;
        width: 80vw;
        height: 25vw;
        padding: 4vw;
        font-size: 0.8em;
    }
    
}

.item-enter-active{transition: opacity .3s linear , transform .3s ease-out .15s;}
.item-leave-active{transition: opacity .15s linear, transform .3s ease-out; position: absolute;}

.item-enter{opacity: 0; transform: perspective(800px) rotate3d(0, 1, 0, 180deg);}
.item-leave-to{opacity: 0;}

.item-move{transition: all .15s linear, transform .3s ease-out .15s;}


/* 各アイテム */
.window-css{
    font-size: 32px;
    color: #5FDE98;
    -webkit-text-stroke: 2px #5FDE98;
    text-stroke: 2px #5FDE98;
}

.window-java{
    font-size: 32px;
    color: #FF0386;
    -webkit-text-stroke: 2px #FF0386;
    text-stroke: 2px #FF0386;
}

.window-libra{
    font-size: 32px;
    color: #B0028D;
    -webkit-text-stroke: 2px #B0028D;
    text-stroke: 2px #B0028D;
}

.window-etc{
    font-size: 32px;
    color: #5D0670;
    -webkit-text-stroke: 2px #5D0670;
    text-stroke: 2px #5D0670;
}

.item1{
    position: relative;
    height: 50px;
    bottom: -5%;
    animation: scrolldown 1s infinite;
}

@keyframes scrolldown {
    0% {
        bottom: -5%;
    }
    50% {
        bottom: -10%;
    }
    70%{
        bottom: -10%;
    }
    100% {
        bottom: -5%;
    }
}

.item1:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #5FDE98;
    transform: skewX(-31deg) translateX(24px) translateY(30px);
}

.item1:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 50px;
    background-color: #5FDE98;
}

.item2{
    position: relative;
    height: 50px;
    bottom: -10%;
    animation: scrollup 1s infinite;
}

@keyframes scrollup {
    0% {
        bottom: -10%;
    }
    30% {
        bottom: -5%;
    }
    50%{
        bottom: -5%;
    }
    100% {
        bottom: -10%;
    }
}

.item2:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #5FDE98;
    transform: skewX(31deg) translateX(6px);
}

.item2:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 50px;
    background-color: #5FDE98;
}

.item14 span{
    display: inline-block;
    font-size: 32px;
    color: #5FDE98;
}

.item14 span:nth-of-type(1){animation: kurukuru 3s linear infinite;}
.item14 span:nth-of-type(2){animation: kurukuru 3s linear .5s infinite;}
.item14 span:nth-of-type(3){animation: kurukuru 3s linear 1s infinite;}
.item14 span:nth-of-type(4){animation: kurukuru 3s linear 1.5s infinite;}

@keyframes kurukuru{
    0%{
        transform: translateY(0px);
    }
    10%{
        transform: translateY(-8px) rotateY(0deg);
    }
    20%{
        transform: translateY(-8px) rotateY(360deg);
    }
    30%{
        transform: translateY(0px);
    }
}

.item15{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5FDE98;
    width: 100px;
    height: 100px;
}

.item15 p{
    font-size: 64px;
}

.item15 div{
    position: absolute;
    width: 70px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.item16{
    font-size: 64px;
    width: 100px;
    height: 100px;
    background: #5FDE98 url(/img/item16/virus.png) center/10%;
    -webkit-mask-image: url("/img/item16/gunyo.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url(/img/item16/gunyo.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.item19{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: wave infinite 1.5s ease-in-out;
}

@keyframes wave{
    0%{
        transform: scale(0);
        border: double 10px rgba(95, 222, 152, 1);
    }
    100%{
        transform: scale(1.5);
        border: double 10px rgba(95, 222, 152, 0);
    }
}

.item20 span{
    display: inline;
    font-size: 32px;
    color: #5FDE98;
    opacity: 0;
}

.item20 span:nth-child(1){animation: fadeIn1 4s infinite 1s;}
.item20 span:nth-child(2){animation: fadeIn2 4s infinite 1s;}
.item20 span:nth-child(3){animation: fadeIn3 4s infinite 1s;}
.item20 span:nth-child(4){animation: fadeIn4 4s infinite 1s;}

@keyframes fadeIn1 {
    0% {opacity: 0;}
    25%,100%{opacity: 1;}
}
@keyframes fadeIn2 {
    0% {opacity: 0;}
    25%{opacity: 0;}
    50%,100%{opacity: 1;}
}
@keyframes fadeIn3 {
    0% {opacity: 0;}
    50%{opacity: 0;}
    75%,100%{opacity: 1;}
}
@keyframes fadeIn4 {
    0% {opacity: 0;}
    75%{opacity: 0;}
    100%{opacity: 1;}
}

.item21 {
    font-size: 32px;
    color: #5FDE98;
}

.item23 img{
    width: 100px;
    filter: drop-shadow(3px 3px 0px #FF0386);
}

/* フッター */
.foot-area {
    position: relative;
    background-color: #5FDE98;
    padding-top: 20px;
}

.foot-text {
    color: #202020;
    -webkit-text-stroke: 1px #202020;
    text-stroke: 1px #202020;
    text-align: center;
    margin-bottom: 1em;
}

.email-text {
    font-family: 'RocknRoll One', sans-serif;
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding-bottom: 20px;
}

.email-text p{
    display: inline-block;
    padding: 0 .2em;
    background-color: #5D0670;
}

.foot-copy {
    display: inline-block;
    background-color: #313131;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 10px;
}