/* 基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;

    /* 修正ポイント：単色の指定を消して、グラデーションを指定します */
    background: linear-gradient(135deg, #fecfef 0%, #ffedf9 99%, #ffedf9 100%);

    /* 背景を画面全体に固定するための設定 */
    background-attachment: fixed;
    min-height: 100vh;

    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    color: #333;
}

.container {
    width: 100%;
    max-width: 480px; /* スマホサイズに最適化 */
    padding: 40px 20px;
    text-align: center;
}

/* プロフィール */
.avatar {
    width: 300px;  /* ここを 100px から 120px など好きな数字に */
    height:75px; /* widthと同じ数字にすると正円を保てます */
    border-radius: 20px;  /* 50% だと円、ピクセルだと角丸 */
    object-fit: contain; /* cover ＝ 切り取り contain ＝ 縮小 */
    padding: 5px;       /* 隙間の広さを指定（お好みで調整） */
    border: 2px solid rgba(255, 255, 255, 0.5); /* 外側の細い線 */
    margin-bottom: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3); /* 白い縁取りをつけるとさらにオシャレ！ */
}

h1 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

p {
    font-size: 0.9rem;
    margin-bottom: 32px;
    color: #666;
}

/* リンクボタン */
.links {
    display: flex;
    flex-direction: column;
    gap: 16px; /* ボタン同士の間隔 */
}

.link-card {
    display: block;
    background-color: #ffffff;
    color: #333;
    text-decoration: none;
    padding: 18px;
    border-radius: 8px;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ホバー(マウスを乗せた時)の動き */
.link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    background-color: #fafafa;
}

/* SNSリンクのレイアウト */
.sns-links {
    margin-top: 40px;
    display: flex;       /* 横に並べる */
    justify-content: center; /* 中央に寄せる */
    gap: 25px;           /* アイコン同士の間隔を少し広めに */
}

/* SNSアイコンのデザイン */
.sns-links a {
    color: #333;      /* アイコンの色を黒に */
    font-size: 28px;     /* アイコンのサイズ（少し大きめが今風です） */
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    display: inline-block;
}

/* ホバー（マウスを乗せた時）の演出 */
.sns-links a:hover {
    transform: scale(1.2); /* 少し大きくする */
    opacity: 0.8;          /* 少し透明にする */
}