@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
/* 初期化 */

*{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    scroll-behavior: smooth;
}
body{
    background-color: #ffffff;
}
/* Hero */
.hero{
    width: 100vw;
    height: 100vh;
}
.wrapper{
    height: 300vh;
}
.under{
    top: 0;
    margin-top: 60vh;
    position: sticky;
}
.over{
    margin-top: -100vh;
    position: relative;
}
.title{
    font-family: Noto Sans JP;
    font-size: 2em;
    display: inline-block;
    color: white;
    letter-spacing: 0.15em;
    padding-top: 5vh;
    padding-left: 5vw;
    border-bottom: solid white;
}
#hero2{
    margin-top: 200vh;
}
.profile-icon{
    width: 100px;
    height: auto;
    padding-left: 20vw;
    padding-top: 15vh;
    float: left;
}
.text{
    padding-left: 2vw;
    font-family: Noto Sans JP;
    font-size:2em;
    width: 100vw;
    height: auto;
    margin-top: 2vh;
}
.sub{
    font-family: Noto Sans JP;
    font-size: 1em;
}
.bg-yellow{
    background-color: rgb(77, 223, 209);
}
.bg-zenn{
    background-color: #4aaeff;
}
.bg-green{
    background-color: #92ffaa;
}
.bg-work{
    background-color: #ffffff;
    color: #39352d !important;
}
.bg-work .name{
    color: #39352d !important;
}
.bg-work .title{
    color: #39352d !important;
    border-color: #39352d;
}
.hero a{
    color: white;
    text-decoration: none;
}
.hero a:visited{
    color: white;
    text-decoration: none;
}
.icons{
    padding-top: 30px;
    
}
.bg-sky{
    background-color: #0099ff;
}
.icon{
    animation: icons 0.8s forwards ease-in-out;
    display: inline-block;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    border-radius: 50px;
    transition: all 0.5s ease-in-out;
}
.icons a:hover{
    transition: all 1s ease-in-out;
    background-color: rgb(255, 147, 253);
}
@keyframes icons {
    0%{
        /* opacity: 0; */
        transform: scale(0);
    }
    100%{
        /* opacity: 1; */
        transform: scale(1);
    }
}
.bg-note{
    background-color: #00dc8f;
}
.bg-dark{
    color: white;
    background-color: #3d362a;
}
.bg-orange{
    background-color: #ffc107;
}
.bg-red{
    background-color: #ff3333;
}
.icons img, i {
    display: inline-block;
    padding-top: 25%;
    width: 50px;
}
.name{
    font-family: Noto Sans JP;
    font-size: 4em;
    color: white;
    letter-spacing: 0.15em;
    padding-top: 30vh;
}
.center{
    text-align: center;
}
/* グローバルナビゲーション */

#pmenu{
    position: fixed;
    top: 0;
    opacity: 1;
    transition: all 1s ease-in-out;
    z-index: 9997;
    width: 100vw;
    font-family: Josefin Sans;
    font-size: 1.5em;
    height: 10vh;
    text-align: right;
    background-color: rgba(0, 0, 0, 0.261);
    backdrop-filter: blur(10px);
}
#pmenu ul li{
    display: inline-block;
    width: 10vw;
    margin-right: 3vw;
    margin-top: 3vh;
}

@keyframes slidein-from-under{
0%{
    opacity: 0;
    transform: translateY(150%);
}
100%{
    opacity: 1;
    transform: translateY(0px);
}
}
@keyframes slidein-from-left{
    0%{
        opacity: 0;
        transform: translateX(-10%);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
@keyframes slidein-from-right{
    0%{
        opacity: 0;
        transform: translateX(30%);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
/* メニュー */

li{
    list-style: none;
}
.burger {
    z-index: 9999;
    bottom: 50px;
    height: 80px;
    position: fixed;
    z-index: 9999;
    right: 50px;
    width: 75px;
}
#burger{
    display: none;
}
.slist{
    margin-top: 40px;
    text-align: center;
    font-size: xx-large;
}
.smsvg{
    width: 40px;
    height: auto;
}
.sitem{
    margin-top: 40px;
}
#menu{
    background: black;
    animation: bg 29s ease-in-out infinite;
    top: 0;
    font-family: Josefin Sans, roboto;
    left: 0;
    width: 100%;
    z-index: 9998;
    position: fixed;
    height: 100vh;
    transition: all 0.5s ease-in-out;
    transform: translateX(-200%);
}
#burger:checked ~ #menu{
    transform: translateZ(0px);
}
.z-9999{
    margin-top: 100vh;
}
@keyframes bg {
    0% {
        background-color: #dc3434;
    }

    5% {
        background-color: rgb(255, 115, 0);
    }

    10% {
        background-color: #faf200;
    }

    15% {
        background-color: #77d71d;
    }

    20% {
        background-color: #3498db;
    }

    25% {
        background-color: #9b59b6;
    }

    30% {
        background-color: #e73c3c;
    }

    35% {
        background-color: #3498db;
    }

    40% {
        background-color: #f1c40f;
    }

    50% {
        background-color: rgb(10, 248, 113);
    }

    55% {
        background-color: rgb(10, 216, 248);
    }

    60% {
        background-color: rgb(10, 141, 248);
    }

    65% {
        background-color: rgb(10, 10, 248);
    }

    70% {
        background-color: rgb(189, 10, 248);
    }

    75% {
        background-color: rgb(248, 10, 121);
    }

    80% {
        background-color: rgb(248, 10, 10);
    }

    85% {
        background-color: rgb(14, 140, 243);
    }

    90% {
        background-color: rgb(0, 255, 153);
    }

    95% {
        background-color: rgb(14, 140, 243);
    }

    100% {
        background-color: rgb(0, 0, 0);
    }
}
/* Menu */
.bar {
    background: #848383;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    transition: all 500ms;
    width: 120%;
}

.bun-top {
    transform: translate3d(0, 0, 0);
}

.lettuce {
    transform: translate3d(0, -25px, 0) scaleY(0);
    opacity: 0;
}

.mustard {
    transform: translate3d(-75px, 0, 0) scaleY(0);
    opacity: 0;
}

.ketchup {
    transform: translate3d(75px, 0, 0) scaleY(0);
    opacity: 0;
}

.patty {
    transform: translate3d(0, 15px, 0);
}

.bun-bot {
    transform: translate3d(0, 30px, 0);
}

.on .bar {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

.on .bun-top {
    background: #d7b48a;
    border-radius: 20px;
    transform: translate3d(0, 0, 0) scaleY(1.5);
}

.on .lettuce {
    background: #62c852;
    transform: translate3d(0, 20px, 0) scaleY(0.5);
    opacity: 1;
    transition-delay: 200ms;
}

.on .mustard {
    background: #e5e360;
    transform: translate3d(0, 30px, 0) scaleY(0.5);
    opacity: 1;
    transition-delay: 400ms;
}

.on .ketchup {
    background: #ce4a4a;
    transform: translate3d(0, 40px, 0) scaleY(0.5);
    opacity: 1;
    transition-delay: 600ms;
}

.on .patty {
    background: #3d362a;
    transform: translate3d(0, 50px, 0) scaleY(1);
}

.on .bun-bot {
    background: #d7b48a;
    border-radius: 20px;
    transform: translate3d(0, 65px, 0) scaleY(1.5);
}
#menu ul li a{
    text-decoration: none !important;
    color: white;
}
#pmenu ul li a{
    text-decoration: none !important;
    color: rgb(152, 255, 198);
}
/* 上に戻る */

.back-top{
    left: 20px;
    opacity: 0;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: fixed;
    text-align: center;
    bottom: 60px;
    background-color: #3498db;
}

.back-top img{
    padding-top: 25%;
    width: 50px;
}
.active-bt{
opacity: 1;
transition: all 1s;
transform: translateY(-20%);
}
.notactive-bt{
    opacity: 0;
    transition: all 1s;
    transform: translateY(20%);
}

/* Observer用 */

.under-active{
    animation: 2s slidein-from-under forwards ease-in-out;
}
.left-active{
    animation: 2s slidein-from-left forwards ease-in-out;
}
.right-active{
    animation: 2s slidein-from-right forwards ease-in-out;
}
.b{
    display: inline-block;
    font-size: 4em;
    font-family: Noto Sans JP;
}
.b-active{
    display: inline-block;
    animation: weakpoint 700ms forwards ease-in-out;
}
@keyframes weakpoint{
    0%{
        transform: skewX(200deg);
    }
    100%{
        transform: skewX(0deg);
    }
}