@charset "UTF-8";

/* 1. 全体のベースデザイン */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    background-color: #f9f6f0; /* 温かみのあるオフホワイト */
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* 2. 全体の囲み（コンテナ） */
#container {
    width: 100%;
    max-width: 650px; /* 画像の横幅（252px）に合わせて、全体の幅を少し広げました */
}

#container h2 {
    color: #8c7b6e; /* チョコっぽいマイルドなブラウン */
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 1px;
}

/* 3. テーブル全体のスタイル */
table {
    background-color: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 12px; /* 角を丸くして優しい印象に */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* ほんのり浮き出る影 */
    overflow: hidden;
}

/* マウスを乗せたときにふわっと色が変わる演出（画像セル以外） */
tr {
    transition: background-color 0.2s ease;
}
tr:hover {
    background-color: #fdfbf7;
}

/* 下線（ボーダー）を引く */
tr:not(:last-child) th,
tr:not(:last-child) td {
    border-bottom: 1px solid #eeebe4;
}

/* 4. セルの共通設定（ここが読みやすさの肝です！） */
th, td {
    padding: 14px 20px; /* 余白を少し詰めて、縦に広がりすぎるのを防ぎました */
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    vertical-align: middle; /* 文字がセルの上下中央に配置されるようにします */
}

/* 左側の列（th: 見出し部分） */
th {
    font-weight: bold;
    color: #8c7b6e;
    background-color: #fdfaf2; /* 左側だけ少し色を変えてアクセントに */
    width: 25%; /* 列の幅をキュッと引き締めました */
    white-space: nowrap; /* 途中で変に改行されるのを防ぎます */
}

/* 中央の列（td: 内容部分） */
td:not(.p_img) {
    color: #4a4a4a;
}

/* 5. 右側の列（td.p_img: プロフィール画像部分） */
td.p_img {
    background-color: #ffffff;
    text-align: center;
    vertical-align: middle;
    width: 270px; /* 画像の横幅（252px）＋左右の余白 */
    padding: 10px; /* 画像セルの余白を狭くしてテーブルにフィットさせます */
    border-left: 1px solid #eeebe4; /* 画像の左側にうっすら線を引いて区切る */
}

/* 画像そのものの調整 */
td.p_img img {
    border-radius: 8px; /* 画像の角もちょっと丸くして馴染ませる */
    display: block;
    margin: 0 auto;
    max-width: 100%; /* 念のためテーブルからはみ出さないようにガード */
    height: auto;
}