*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:#05070d;
color:white;
text-align:center;
overflow-x:hidden;
}

.bg{
position:fixed;
width:100%;
height:100%;
background:radial-gradient(circle at center,#0d1b2a,#05070d);
z-index:-1;
}

/* ヒーロー */
.hero{
padding:60px 20px;
}

/* ポートレート */
.portrait-wrapper{
position:relative;
width:220px;
height:220px;
margin:0 auto 30px;
}

.portrait{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
position:relative;
z-index:2;
}

/* ネオンリング */
.neon-ring{
position:absolute;
width:240px;
height:240px;
border-radius:50%;
top:-10px;
left:-10px;
background:conic-gradient(#00f0ff,#ff00e6,#00f0ff);
filter:blur(15px);
animation:rotate 8s linear infinite;
z-index:1;
}

@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

/* ロゴ */
.logo{
font-size:2.8rem;
letter-spacing:4px;
color:#fff;
text-shadow:
0 0 10px #00f0ff,
0 0 20px #ff00e6;
margin-bottom:10px;
}

.tag{
color:#aaa;
margin-bottom:40px;
font-weight:300;
letter-spacing:2px;
}

/* リンク */
.links a{
display:block;
margin:12px auto;
width:85%;
max-width:320px;
padding:14px;
border-radius:30px;
text-decoration:none;
color:white;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
transition:0.4s;
}

.links a:hover{
background:#00f0ff;
color:black;
box-shadow:0 0 20px #00f0ff;
}

/* 内部リンク */
.internal{
margin-top:40px;
}

.internal a{
margin:0 15px;
color:#ff00e6;
text-decoration:none;
}

.internal a:hover{
text-shadow:0 0 10px #ff00e6;
}

/* PC対応 */
@media(min-width:768px){
.hero{
padding-top:100px;
}
.logo{
font-size:3.5rem;
}
}