body {
    margin: 0;
    padding: 0;

    background-color: #ffc6dc;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", Meiryo, sans-serif;
}


/* プロフィールカード */
#container {
    background-color: white;

    border-radius: 30px;
    border: 5px dotted #ff8fba;

    padding: 40px;
    width: 700px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(255, 105, 150, 0.3);

    transition: 0.3s;

    position: relative;
}


/* カードにカーソルを合わせた時 */
#container:hover {
    transform: scale(1.03);
}


/* カードの周りの音符 */
#container::before {
    content: "♩  ♪  ♫";
    position: absolute;

    top: -45px;
    left: 50%;

    transform: translateX(-50%);

    color: #ff4f91;
    font-size: 35px;
    font-weight: bold;
}

#container::after {
    content: "♫  ♪  ♩";
    position: absolute;

    bottom: -45px;
    left: 50%;

    transform: translateX(-50%);

    color: #ff4f91;
    font-size: 35px;
    font-weight: bold;
}


/* タイトル */
h2 {
    font-size: 45px;
    color: #ff4f91;
    font-weight: bold;

    margin-bottom: 35px;
}

h2::before {
    content: "♩ ";
}

h2::after {
    content: " ♩";
}


/* 表 */
table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 8px;

    font-size: 25px;
    font-weight: bold;
}


th {
    background-color: #ffd9e8;
    color: #ff4f91;

    border-radius: 15px;
    padding: 15px;

    transition: 0.3s;
}


td {
    background-color: #fff5fa;
    color: black;

    border-radius: 15px;
    padding: 15px;

    transition: 0.3s;
}


/* カーソルを合わせた時 */
th:hover,
td:hover {
    background-color: #ff69a5;
    color: white;

    transform: scale(1.05);
}


/* 写真部分 */
.p_img {
    position: relative;
    text-align: center;
}


/* ピンクの♡フレーム */
.p_img::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #ff8fba;

    clip-path: path("M105 195 L25 105 C-20 35 55 -15 105 45 C155 -15 230 35 185 105 Z");

    z-index: 1;
}


/* ♡型の写真 */
.p_img img {
    width: 180px;
    height: 180px;

    object-fit: cover;

    clip-path: path("M90 170 L20 90 C-20 30 50 -10 90 40 C130 -10 200 30 160 90 Z");

    position: relative;

    z-index: 2;

    filter: drop-shadow(0 5px 8px rgba(255, 80, 140, 0.3));
}