@import url(
'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap'
);

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

margin:0;

background:#050510;

color:white;

font-family:
Inter,
"Noto Sans JP",
sans-serif;

overflow-x:hidden;

}

/* 背景 */

.background{

position:fixed;

inset:0;

z-index:-1;

background:

radial-gradient(
circle at 20% 20%,
#00d9ff55,
transparent 35%
),

radial-gradient(
circle at 80% 30%,
#8b5cf655,
transparent 40%
),

linear-gradient(
180deg,
#050510,
#11112b
);

/*radial-gradient(
circle at 20% 20%,
#00d9ff55,
transparent 35%
),

radial-gradient(
circle at 80% 30%,
#db75d355,
transparent 40%
),

linear-gradient(
180deg,
#cfcfcf,
#d6d6d6
);*/
}

/* CRTノイズ */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.08;

background:

repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgb(0, 0, 0) 3px
);

z-index:100;

}

header{

position:fixed;

top:0;

width:100%;

padding:25px 50px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:30;

}

.logo{

font-size:24px;

font-weight:900;

letter-spacing:3px;

}

.logo a{

color:#fff;

text-decoration: none;
}

.menu{

position:relative;

font-size:32px;

cursor:pointer;

z-index:40;

}

.menu-content a{

display:flex;

justify-content:space-between;

align-items:center;

width:400px;

padding:15px;


color:white;

text-decoration:none;


font-size:35px;


border-bottom:

1px solid rgba(255,255,255,.15);

}



.menu-content span{

font-size:14px;

opacity:.5;

}


.menu-content h4{

font-size:20px;

opacity:.6;

}

#closeButton{

display:none;

}


.menu.open #menuButton{

display:none;

}


.menu.open #closeButton{

display:block;

}


nav{

position:fixed;

inset:0;

/*background:;*/
background:#050510ee;


display:none;

align-items:center;

justify-content:center;

z-index:20;

}


nav.active{

display:flex;

}

nav a{

display:block;

color:white;

text-decoration:none;

font-size:50px;

margin:20px;

}

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.hero h1{

font-size:

clamp(
60px,
12vw,
160px
);

margin:0;

font-weight:900;

background:

linear-gradient(
90deg,
#fff,
#7ee8ff,
#c084fc
); 

-webkit-background-clip:text;

color:transparent;

}

.hero p{

font-size:20px;

opacity:.8;

}

.scroll{

margin-top:60px;

opacity:.6;

}

.scroll a{
display: inline-block;

color:#fff;

text-decoration: none;

transition: all 0.4s ease;
}



.scroll a:hover{

transform:

translateY(-5px);

}

section{
    min-height:auto;
    padding:100px 10%;
}

section h2{
    font-size:clamp(32px,5vw,48px);
    margin-bottom:32px;
}

@media (max-width:600px){
    section{
    min-height:auto;
    padding:100px 5%;
}

}

.profile{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:30px;
}

.profile img{
    width:100px;
    height:100px;
    flex-shrink:0;
    border-radius: 20%;
}

/* スマホ表示 */
@media (max-width:600px){

    .profile{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }


    .profile img{
        width:120px;
        height:120px;
    }

    .profile-text2{
    text-align: left;
}
}

.profile-text{
    display:block;
}



.glass{

background:

rgba(
255,
255,
255,
0.07
);

border:

1px solid
rgba(
255,
255,
255,
0.15
);

backdrop-filter:

blur(20px);

border-radius:30px;

padding:40px;

transition:.4s;

}

.glass:hover{

transform:

translateY(-10px);

background:

rgba(
255,
255,
255,
0.15
);

} 


.grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
250px,
1fr
)
);

gap:25px;

}

.project{

height:220px;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

font-weight:bold;

}

.link-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
280px,
1fr
)
);


gap:25px;

}



.link-card{

display:flex;

align-items:center;

gap:20px;


padding:25px;


background:

rgba(
255,
255,
255,
0.07
);



border:

1px solid
rgba(
255,
255,
255,
0.15
);


border-radius:25px;


color:white;

text-decoration:none;


backdrop-filter:blur(20px);


transition:.3s;

}




.link-card:hover{

transform:

translateY(-8px);


background:

rgba(
255,
255,
255,
0.15
);

}



.linkimg{

width:50px;

height:50px;

}

.banner{
    display: flex;

    width: 100%;
    height: auto;
}

.link-card h3{

margin:0 0 5px;

font-size:22px;

}



.link-card p{

margin:0;

opacity:.7;

}

footer{

padding:40px;

text-align:center;

opacity:.6;

}