@charset "UTF-8";

/* 個別のカード全体 */
.profile-card-detail {
    max-width: 500px;
    margin: 40px auto 60px;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 40px;
    border: 8px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 個別用の大きな丸写真 */
.detail-photo img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.detail-name {
    font-family: "Hachi Maru Pop", cursive; /* 👈 ここを丸文字フォントに変更 */
    font-size: 2.2rem;
    margin-bottom: 20px;
    letter-spacing: 0.05em; /* 文字の間隔を少し広げてゆったり可愛く */
}

/* 英語の読み（span）の部分 */
.detail-name span {
    display: block;
    font-size: 1rem;
    font-family: "Cherry Bomb One", cursive; /* 👈 英語はこっちのフォントのままが可愛い！ */
    opacity: 0.7;
    margin-top: 5px;
}

/* プロフィール項目の並び */
.detail-list dl {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    max-width: 350px;
    margin: 0 auto 30px;
    font-family: "Hachi Maru Pop", cursive;
    border-top: 2px dotted #ccc;
    padding-top: 20px;
}

.detail-list dt {
    width: 35%;
    font-weight: bold;
    margin-bottom: 10px;
}

.detail-list dd {
    width: 65%;
    margin: 0 0 10px 0;
}

/* メッセージ部分 */
.detail-message {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 2px dashed #ccc;
}

.tag {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.text {
    font-family: "Hachi Maru Pop", cursive;
}

/* SNSボタン */
.sns-btn {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 12px;
    text-decoration: none;
    color: #fff;
    border-radius: 30px;
    font-family: "Hachi Maru Pop", cursive;
    font-weight: bold;
    transition: 0.3s;
}

/* SNSボタン全体の設定（インスタカラーで統一） */
.sns-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    margin: 5px;
    transition: all 0.3s ease;
    
    /* インスタ風の鮮やかなピンクに統一 */
    background: #e1306c; 
    box-shadow: 0 4px 0 #b02150; /* 少し濃い色で立体感を出す */
}

/* マウスオーバーした時の動き */
.sns-btn:hover {
    transform: translateY(-5px); /* ふわっと浮く */
    background: #ff3e7e;         /* 触った時に少し明るく光る */
    box-shadow: 0 8px 15px rgba(225, 48, 108, 0.4); /* 影もピンクに */
}

/* ---------------------------------
   ここから：メンバー別の色設定
   --------------------------------- */
/* ピンク担当（ひめめちゃん：さらに濃いピンク） */
.member-pink .detail-name, .member-pink .tag, .member-pink dt { color: #e91e63; } /* 濃いローズピンク */
.member-pink .sns-btn { background: #ff4081; } /* 鮮やかなピンク */
.member-pink .detail-message { border-color: #f48fb1; }
.member-pink { background-color: #f8bbd0 !important; } /* 背景もしっかりピンクと分かる濃さに */

/* ブルー担当 */
.member-blue .detail-name, .member-blue .tag, .member-blue dt { color: #1e90ff; }
.member-blue .sns-btn { background: #1e90ff; }
.member-blue .detail-message { border-color: #add8e6; }
.member-blue { background-color: #e0f2ff !important; }

/* 緑担当（パステルグリーン） */
.member-green .detail-name, .member-green .tag, .member-green dt { color: #2ecc71; }
.member-green .sns-btn { background: #2ecc71; }
.member-green .detail-message { border-color: #b3f3d2; }
.member-green { background-color: #eaffe6 !important; }

/* 紫担当（ラベンダー） */
.member-purple .detail-name, .member-purple .tag, .member-purple dt { color: #9b59b6; }
.member-purple .sns-btn { background: #9b59b6; }
.member-purple .detail-message { border-color: #e0c3fc; }
.member-purple { background-color: #f3e8ff !important; }

/* 赤担当（いちごレッド） */
.member-red .detail-name, .member-red .tag, .member-red dt { color: #ff4d4d; }
.member-red .sns-btn { background: #ff4d4d; }
.member-red .detail-message { border-color: #ffcccc; }
.member-red { background-color: #fff0f0 !important; }


/* --- プロフィール詳細：絶対はみ出さない版 --- */
@media screen and (max-width: 768px) {
    /* 1. 画面の横揺れを完全に防ぐ */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. カード全体の調整 */
    .profile-card-detail {
        width: 92% !important; /* 画面の左右に少しだけ余白を作る */
        margin: 20px auto !important;
        padding: 15px !important;
        display: block !important; /* 横並びを解除して縦並びに */
        box-sizing: border-box;
    }

    /* 3. 写真の調整 */
    .detail-photo img {
        width: 100% !important;
        max-width: 300px; /* 大きくなりすぎないように */
        height: auto !important;
        display: block;
        margin: 0 auto 20px !important; /* 真ん中に寄せて下に余白 */
    }

    /* 4. 名前の調整 */
    .detail-name {
        font-size: 1.6rem !important; /* 文字サイズをスマホ向けに */
        text-align: center !important;
        width: 100% !important;
    }

    /* 5. プロフィールリスト（ここが一番はみ出しやすい！） */
    .detail-list dl {
        display: block !important; /* 縦に並べる */
        width: 100% !important;
    }

    .detail-list dl dt, 
    .detail-list dl dd {
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* スマホは中央揃えが綺麗 */
        padding: 5px 0 !important;
    }

    .detail-list dl dt {
        background: rgba(255, 182, 193, 0.2); /* 項目名に薄く色をつけて見やすく */
        border-radius: 5px;
        font-size: 0.9rem;
    }

    .detail-list dl dd {
        margin-left: 0 !important; /* 左の余白を消す */
        margin-bottom: 15px !important;
        border-bottom: 1px dashed #ffb6c1; /* 項目ごとの区切り線 */
    }

    /* 6. SNSボタン */
    .detail-sns {
        display: flex !important;
        flex-direction: column !important; /* ボタンを縦に並べる */
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .sns-btn {
        width: 100% !important;
        max-width: 250px; /* 押しやすい幅に固定 */
        margin: 0 !important;
        padding: 12px 0 !important;
        text-align: center !important;
    }
}