/* === about.css の中身 === */

main {
    width: 90%;
    max-width: 1000px; /* 全体を広げる */
    margin: 40px auto; /* 上下に少し余白（40px）を入れて見やすく */
    /* 横並びさせるよ */
    display: flex;
    gap: 30px;
}

/* 左側（プロフィール）を広く */
.profile-card {
    flex: 1;               /* 残りのスペースをすべて使う */
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 右側（スキル＆趣味の袋）の幅を固定 */
.side-content {
    width: 320px;          /* 幅を320pxに固定 */
    flex-shrink: 0;
}

/* 右側の袋の中にある個々のセクションの装飾 */
.side-content section {
    background: white;
    padding: 25px;
    margin-bottom: 25px;   /* ボックスとボックスの間の縦の隙間 */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

h2 {
    border-left: 5px solid #0060ff;
    padding-left: 10px;
    margin-top: 0;            /* 上の余白をリセットして綺麗に揃える */
}

/* スキルリストの見た目を少し上品に */
.side-content ul {
    padding-left: 20px;
    margin: 0;
}

.side-content li {
    margin-bottom: 8px;
}

/* ==========================================
   📱 画面の横幅が 768px 以下（スマホ等）のときのスタイル
   ========================================== */
@media (max-width: 768px) {
    main {
        flex-direction: column; /* 横並びを「縦並び」に変更 */
        width: 100%;            /* 💡 幅90%を解除し、画面幅100%いっぱいに広げる */
        box-sizing: border-box; /* 💡 パディングが画面外にはみ出ないようにするお守り */
        margin: 0 auto;         /* 💡 上下の余白をリセットし、左右を中央寄せに */
        padding: 20px;          /* 💡 スマホの画面端に、窮屈にならないよう少し隙間（余白）を作る */
        gap: 20px;              /* 💡 プロフィールカードと趣味・スキルの間の縦の隙間 */
    }

    .profile-card {
        width: 100%;            /* 💡 プロフィールカードを横幅いっぱいに */
        box-sizing: border-box;
    }

    .side-content {
        width: 100%;            /* 幅320px固定を解除し、100%に広げる */
    }

    .side-content section {
        margin-bottom: 20px;    /* 💡 ボックス同士の隙間をスマホ用に少しスリムに */
    }
}