/* リセットCSS */
@import url('reset.css');

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

/* 全体 */
body {
    background: #FFFFFF;
    color: #000000;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
}
p {
    line-height: 1.5;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 戻るボタン */
.back_button {
    font-size: 16px;
    font-family: "Orbitron", sans-serif;
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 20%;
    background: #FFDE59;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    opacity: 0; /* 非表示 */
    transform: translateY(20px);
    transition: all .5s ease;
}
.back_button a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: all .5s ease;
}
.back_button a:hover {
    opacity: .7;
}
.back_button.is-show {
    opacity: 1; /* 表示 */
    transform: translateY(0);
}

/* 画像角丸処理 */
.profile_image img {
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  200px;       /* ※縦横を同値に */
    height: 200px;       /* ※縦横を同値に */
}
.link img {
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  60%;       /* ※縦横を同値に */
    height: 60%;       /* ※縦横を同値に */
}

/* ヘッダー */
h1 {
    font-size: 30px;
    font-family: "Orbitron", sans-serif;
    font-weight: normal;
    padding-bottom: 10px;
}
.profile {
    background: #BDBDBD;
    color: #000000;
    padding: 0 15%;
}
.profile_box {
    width: 300px;
    margin: 0 auto;
}
.profile_image {
    text-align: center;
    padding-top: 30px;
}
.profile_text {
    padding: 30px 0;
}

/* メイン */
.sns_link {
    padding: 0 15%;
}
.portfolio {
    padding-top: 30px;
}
.sns_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
    padding: 30px 0;
}
.link {
    font-family: "Orbitron", sans-serif;
    background: #BDBDBD;
    aspect-ratio: 1 / 1;
}
.link a {
    color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.link a:hover, .portfolio a:hover {
    background: #FFFFFF;
    transition: background 1s;
    opacity: 0.7;
}

/* フッター */
footer {
    background: #FFDE59;
    color: #000000;
    font-size: 12px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    line-height: auto;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    /* ヘッダー */
    .profile {
        padding: 0 5%;
    }
    .profile_text {
        padding: 10px 0;
    }

    /* メイン */
    .sns_link {
        padding: 0 5%;
    }
}

@media screen and (max-width: 768px) {

    /* メイン */
    .sns_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    /* 戻るボタン */
    .back_button {
        right: 10px;
        bottom: 10px;
    }
}