@charset "UTF-8";


.profile_logo {
    display: block;
    width: 150px;
    margin-inline: auto;
    margin-bottom: var(--sp-6xl);
}
#profile {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-lg);
}
figure.myphoto {
    flex: 1;
}
.circle {
    border-radius: 50%;
    border: 2px solid var(--color-lightgreen);
}
.profile_innner {
    flex : 4;
}
.profile_innner h1 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-sm);
}
.profile_innner h1 small {
    display: block;
    color: var(--color-font_dgray);
    font-size: var(--fs-xs);
}
@media (width < 768px) {
    #profile {
        flex-flow: column;
    }
    figure.myphoto {
        margin-inline: auto;
    }
    .profile_innner h1{
        text-align: center;
    }
}
#outline {
    display: flex;
    margin-top: var(--sp-7xl);
    gap: var(--sp-6xl);
    margin-bottom: var(--sp-8xl);
}
#outline h1 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-md);
}
@media (width < 768px) {
    #outline {
        flex-flow: column;
    }
}
#social_media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4xl);
    margin-bottom: var(--sp-8xl);
}
#social_media h1 {
    font-size: 1rem;
}
.social_media_x {
    background-color: #000;
    background-image: url(images/logo_x.svg);
    display: block;
    width: 3em;
    height: auto;
    aspect-ratio: 1;
    background-size: auto 50%;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
a:hover i.social_media_x {
    opacity: .7;
}
footer {
    background-color: var(--color-black);
    padding: var(--sp-5xl) 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
footer img {
    width: 380px;
}
footer small {
    color: var(--color-white);
}
@media (width < 768px) {
    footer {
        flex-flow: column;
        align-items: center;
    }
    footer img {
        margin-bottom: var(--sp-lg);
    }
}