@charset "UTF-8";

/* 全体の基本設定 */
body {
    /* フォントを可愛いものを優先に整理 */
    font-family: "Hachi Maru Pop", "ヒラギノ角ゴ Pro W3", cursive, sans-serif;
    /* 背景を単色から、少しリッチなグラデーションへ */
    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; /* チェックの大きさ */
}

/* メインビジュアル（高さを少し調整して見やすく） */
.main-visual {
    background-image: url(./assets/IMG_0567.PNG);
    background-size: contain;
    background-position: center;
    height: 600px; /* 960pxから少し調整（画面に収まりやすく） */
    background-repeat: no-repeat;
    margin: 20px 0;
}

/* デビュー日の文字（縁取りをピンクにして華やかに） */
.debut {
    font-family: "Cherry Bomb One", system-ui;
    font-size: 4rem;
    color: #ff69b4; /* 白からピンクに変更して目立たせる */
    /* 文字の縁取りをよりハッキリ */
    text-shadow: 3px 3px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 10px 20px rgba(255,105,180,0.3);
    margin: 40px 0;
    animation: fluffy 2s infinite ease-in-out;
}

/* メニュー全体の余白 */
.menu {
    margin: 60px 0;
}

/* ボタン（リンク）のデザイン */
.link {
    position: relative; /* ハートを表示する基準 */
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(to right, #ff9a9e 0%, #fecfef 100%);
    padding: 15px 60px; /* ハートの分、左右を少し広げた */
    border-radius: 50px;
    width: 200px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

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

/* --- ここからハートの魔法 --- */
.link::before, .link::after {
    content: "❤︎";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #fff;
    opacity: 0.8;
    animation: heartbeat 1.5s infinite;
}

.link::before { left: 20px; } /* 左のハート */
.link::after { right: 20px; } /* 右のハート */

/* マウスを乗せたらハートが赤くドキドキする */
.link:hover::before, .link:hover::after {
    color: #ff007f;
    opacity: 1;
}
/* --- ハートの魔法ここまで --- */

/* インスタアイコン */
.insta {
    margin: 30px 0;
    transition: transform 0.3s;
}
.insta:hover {
    transform: scale(1.2) rotate(5deg); /* 少し傾けて元気よく */
}

/* ロゴのホバー（前回直した大事な部分！） */
a.no {
    display: inline-block; /* アニメーションを正しく動かすために必要 */
    transition: transform 0.3s ease; /* 滑らかに大きくするための設定 */
}

a.no:hover {
    background-color: transparent !important;
    transform: scale(1.1); /* 1.1倍に大きくする */
}

a.no:hover img {
    opacity: 1 !important;
    filter: none !important;
}

/* フッター */
footer {
    padding: 150px 0 50px;
    color: #888;
    font-size: 0.9rem;
}

/* アニメーション：ふわふわ */
@keyframes fluffy {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

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

/* トップページのお知らせエリア */
.home-news {
    max-width: 600px; /* メニューボタンと同じくらいの幅にする */
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.7); /* チェック柄が見えるように半透明 */
    border-radius: 20px;
    padding: 20px;
    border: 3px solid #fff;
}

.home-news-item {
    padding: 10px 0;
    border-bottom: 1px dashed #ffb6c1; /* 可愛い点線の区切り */
    font-size: 0.9rem;
    display: flex;
    gap: 10px;
    align-items: center;
}

.home-news-item:last-child {
    border-bottom: none; /* 最後は線を消す */
}

/* 日付とタグ */
.news-date {
    color: #888;
    font-weight: bold;
    font-size: 0.8rem;
}

.news-tag {
    background: #ff69b4;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.news-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* 長いときに「...」にする */
}

/* お知らせのリスト部分 */
.home-news-list {
    text-align: left;
    max-height: 150px;    /* 👈 ニュースを表示するエリアの高さ */
    overflow-y: auto;    /* 👈 中身が高さえを超えたらスクロールを出す */
    padding-right: 10px;  /* スクロールバーとの隙間 */
}

/* スクロールバー自体のデザインを可愛くする（Google Chromeなど用） */
.home-news-list::-webkit-scrollbar {
    width: 8px;
}
.home-news-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
.home-news-list::-webkit-scrollbar-thumb {
    background: #ffb6c1; /* スクロールバーをピンクに */
    border-radius: 10px;
}

.home-news-title {
    /* 修正ポイント：日本語用のフォントを後ろに追加する */
    font-family: "Cherry Bomb One", "Hachi Maru Pop", cursive;
    color: #ff69b4;
    font-size: 2.2rem;
    margin-bottom: 15px;
    text-shadow: 3px 3px 0 #fff;
    letter-spacing: 0.1em;
}

/* SNSアイコンを横に並べる */
.sns-icons {
    display: flex;
    justify-content: center; /* 真ん中に寄せる */
    align-items: center;    /* 👈 これを追加！上下の真ん中で揃えます */
    gap: 45px;               /* アイコン同士の間隔 */
    margin: 40px 0;
}

.sns-link {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* インスタ：ふわっと回転（既存の動き） */
.insta-icon:hover {
    transform: scale(1.2) rotate(5deg);
}

/* X：少し鋭く拡大 */
.x-icon:hover {
    transform: scale(1.2) translateY(-5px);
}

/* TikTok：左右にピコピコ動く */
.tiktok-icon:hover {
    animation: tiktok-shake 0.5s infinite;
}

/* TikTok用の小刻みな揺れアニメーション */
@keyframes tiktok-shake {
    0% { transform: scale(1.2) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-5deg); }
    75% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1.2) rotate(0deg); }
}

/* --- スプラッシュ画面のスタイル（ふわふわ版） --- */
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #F6D3D6; 
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ここを調整！消える時間を長く（1.5s）して、動きを滑らか（ease-out）に */
    transition: opacity 1.5s ease-out, visibility 1.5s ease-out; 
}

.splash-logo img {
    width: 500px; 
    /* ロゴがゆっくり浮き沈みするアニメーション */
    animation: pulse 2.0s infinite ease-in-out; 
}

/* ロゴのふわふわアニメーションも少し滑らかに */
@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* スプラッシュが消える時の設定 */
.loaded {
    opacity: 0;
    visibility: hidden;
}

/* --- トップページのスマホ対応：絶対はみ出さない版 --- */
@media screen and (max-width: 768px) {
    /* 1. ページ全体が横に揺れるのを強制阻止 */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. 全ての要素が「枠線の内側」に収まるように計算させる魔法 */
    * {
        box-sizing: border-box;
    }

    /* 3. ロゴ（ヘッダー） */
    header img {
        max-width: 180px !important;
        height: auto;
    }

    /* 4. 【重要】メインビジュアル：幅を100%にして見切れ防止 */
    .main-visual {
        width: 100% !important;
        height: 300px !important; /* 高さはこれくらいが安全 */
        background-size: contain !important; /* 画像を枠内に収める */
        margin: 10px 0;
    }

    /* 5. 【最重要】デビュー日：文字が大きすぎてはみ出すのを防ぐ */
    .debut {
        font-size: 1.8rem !important; /* もっと思い切って小さく！ */
        width: 100%;
        margin: 20px 0;
        text-wrap: nowrap; /* 折り返さない */
    }

    /* 6. SNSアイコン：3つ横並びで画面内に収める */
    .sns-icons {
        display: flex;
        justify-content: center;
        gap: 15px !important; /* 間隔をギュッと詰める */
        width: 100%;
        padding: 0 10px;
    }
    .sns-icons a img {
        width: 45px !important; /* アイコンをさらに一回り小さく */
        height: auto;
    }

    /* 7. 新着情報：横幅を絶対超えさせない */
    .home-news {
        width: 90% !important; 
        max-width: 90%; 
        margin: 20px auto;
        padding: 10px;
    }
    .home-news-title {
        font-size: 1.5rem !important;
    }

    /* 8. メニューボタン：横幅を200pxから可変にする */
    .link {
        width: 250px !important; /* 少し細くする */
        max-width: 90% !important; /* でも画面の90%よりは大きくならない */
        padding: 12px 0 !important;
        font-size: 1rem !important;
    }
}