/* カラーパレットと共通変数の定義 */
:root {
    --bg-color: #F5F5F7;
    --btn-bg: #FFFFFF;
    --text-main: #333333;
    --text-sub: #666666;
    --accent-color: #A3B18A;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 8px 20px rgba(163, 177, 138, 0.25);
    --transition-speed: 0.3s;
}

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    display: flex;
    justify-content: center; /* 画面中央に配置 */
    min-height: 100vh;
    padding: 40px 20px;
}

/* PCで見ても横に広がりすぎないよう、最大幅をスマホサイズに固定 */
.container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* ========== プロフィール部分 ========== */
.profile {
    margin-bottom: 24px;
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    border: 2px solid var(--btn-bg);
    box-shadow: var(--shadow);
}

.account-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.bio {
    font-size: 0.85rem;
    color: var(--text-sub);
}

/* ========== リンクボタン ========== */
.link-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1; /* フッターを一番下に押しやるための設定 */
}

.link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--btn-bg);
    color: var(--text-main);
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 16px; /* 丸みのある美しい角丸 */
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: var(--shadow);
    transition: all var(--transition-speed) ease;
    letter-spacing: 0.02em;
}

/* リンクボタン内のアイコンの余白とサイズ調整 */
.link-btn i {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* 各種アイコンのブランドカラー等設定 */
.link-btn .fa-line {
    color: #06C755; 
    transition: color var(--transition-speed) ease;
}
.link-btn .fa-instagram {
    color: #E1306C;
    transition: color var(--transition-speed) ease;
}
.link-btn .fa-x-twitter {
    color: #000000;
    transition: color var(--transition-speed) ease;
}
.link-btn .fa-envelope {
    color: #555555;
    transition: color var(--transition-speed) ease;
}

/* ホバー・タップ時の浮き上がるアニメーション */
.link-btn:hover,
.link-btn:active {
    transform: translateY(-4px); /* 上に4px浮き上がる */
    box-shadow: var(--shadow-hover);
    color: var(--accent-color);
}

/* ホバー時はすべてのアイコンをアクセントカラーに合わせる */
.link-btn:hover i,
.link-btn:active i {
    color: var(--accent-color);
}

/* ========== フッター (コピーライト) ========== */
.footer {
    margin-top: 40px;
    padding-bottom: 16px;
    font-size: 0.8rem;
    color: var(--text-sub);
    letter-spacing: 0.05em;
}