@charset "UTF-8";

/* --- 1. 基本設定（背景・フォント） --- */
body {
    font-family: "Hachi Maru Pop", cursive, sans-serif !important;
    background-color: #F6D3D6;
    background-attachment: fixed;
    text-align: center;
    color: #333;
    margin: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%),
                      linear-gradient(rgba(255,255,255,.5) 50%, transparent 50%);
    background-size: 50px 50px;
}

.page-title {
    font-family: "Hachi Maru Pop", cursive !important;
    color: #ff69b4;
    margin: 40px 0;
    font-size: 3rem;
    text-shadow: 2px 2px 0 #fff;
}

/* --- 2. レイアウト（メンバー一覧コンテナ） --- */
.member-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* --- 3. カードの共通デザイン --- */
.member-card {
    width: 260px;
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 5px solid transparent; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.member-photo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.member-info {
    padding: 20px 15px;
    text-align: center;
}

.member-name {
    font-family: "Hachi Maru Pop", cursive !important;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    line-height: 1.2;
}

.intro, .view-more {
    font-family: "Hachi Maru Pop", cursive !important;
    font-size: 0.9rem;
    color: #666;
}

/* --- 4. メンバー別カラー（ホバー設定） --- */
/* 聖のあ：緑 */
.color-noa .member-name, .color-noa .view-more { color: #2ecc71 !important; }
.color-noa:hover { border-color: #2ecc71; box-shadow: 0 0 20px rgba(46, 204, 113, 0.4); transform: translateY(-10px); }

/* 白鼬うなぎ：水色 */
.color-unagi .member-name, .color-unagi .view-more { color: #1e90ff !important; }
.color-unagi:hover { border-color: #1e90ff; box-shadow: 0 0 20px rgba(30, 144, 255, 0.4); transform: translateY(-10px); }

/* 夜城きにゃ：赤 */
.color-kinya .member-name, .color-kinya .view-more { color: #ff4d4d !important; }
.color-kinya:hover { border-color: #ff4d4d; box-shadow: 0 0 20px rgba(255, 77, 77, 0.5); transform: translateY(-10px); }

/* 望月ひめめ：ピンク */
.color-himeme .member-name, .color-himeme .view-more { color: #e91e63 !important; }
.color-himeme:hover { border-color: #e91e63; box-shadow: 0 0 20px rgba(233, 30, 99, 0.4); transform: translateY(-10px); }

/* 霞澄なずな：紫 */
.color-nazuna .member-name, .color-nazuna .view-more { color: #9b59b6 !important; }
.color-nazuna:hover { border-color: #9b59b6; box-shadow: 0 0 20px rgba(155, 89, 182, 0.4); transform: translateY(-10px); }

/* --- 5. 戻るボタン（全ページ共通・幅固定デザイン） --- */
.back-home {
    text-align: center;
    margin: 60px 0;
}

/* --- 戻るボタン：デザインと幅を100%固定する --- */
.link {
    /* 1. 【重要】ただの文字にしないための基本設定 */
    display: inline-block !important; /* 文字ではなく「箱」として扱う */
    text-align: center !important;
    text-decoration: none !important;
    
    /* 2. 【重要】サイズを絶対に固定する */
    width: 280px !important;    /* 横幅 */
    height: 55px !important;    /* 高さ */
    line-height: 55px !important; /* 文字を上下の真ん中に持ってくる */
    padding: 0 !important;      /* 余計な隙間をゼロにする */
    
    /* 3. 見た目の魔法（背景・形） */
    background: linear-gradient(to right, #ff9a9e 0%, #fecfef 100%) !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-family: "Hachi Maru Pop", cursive !important;
    
    /* 4. 影と位置 */
    position: relative !important;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* マウスを乗せた時の動き */
.link:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.5) !important;
    background: linear-gradient(to right, #fecfef 0%, #ff9a9e 100%) !important;
}

/* ハートを絶対位置で配置 */
.link::before, .link::after {
    content: "❤︎" !important;
    position: absolute !important;
    top: 0 !important; /* line-heightで中央に来るので0でOK */
    font-size: 1.2rem !important;
    color: #fff !important;
    opacity: 0.8 !important;
    animation: heartbeat 1.5s infinite !important;
}

.link::before { left: 25px !important; }
.link::after { right: 25px !important; }

/* ドキドキアニメーション */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15%, 45% { transform: scale(1.3); }
}