/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&family=Noto+Sans+JP:wght@400;700&display=swap');

/* カスタムプロパティ */
:root {
    --baystars-blue: #00377a;
    --baystars-yellow: #ffc107;
}

/* 基本スタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f0f4f8;
}

/* カスタムクラス */
.font-rounded {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.baystars-blue {
    background-color: var(--baystars-blue);
}

.baystars-yellow {
    color: var(--baystars-yellow);
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.box-shadow {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hero Section Background */
.hero-section {
    /* 背景画像はここに設定します。例: */
    background-image: url('./img/back.png');
    background-color: #0d47a1; /* fallback color */
    background-size: cover;
    background-position: center;
}


/* 星のアニメーション */
/*
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.star {
    position: absolute;
    background-color: white;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle 5s infinite;
}
*/

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* キャラクターアイコン */
.character-icon-container {
    position: relative;
    width: 140px; /* モバイル用のサイズ */
    height: 120px; /* モバイル用の高さを調整 */
}

.character-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115px; /* モバイル用のサイズ */
    height: 115px; /* モバイル用のサイズ */
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.character-icon-img {
    position: absolute;
    top: -15px; /* 上から配置して重なりを回避 */
    left: 50%;
    transform: translateX(-50%);
    height: 125%; /* モバイル用に調整 */
    width: auto;
    transition: transform 0.3s ease;
}

.character-icon-container:hover .character-icon-bg {
    transform: translate(-50%, -50%) scale(1.1);
}
.character-icon-container:hover .character-icon-img {
    transform: translateX(-50%) scale(1.05);
}

/* PC用のスタイル */
@media (min-width: 768px) { /* md breakpoint */
    .character-icon-container {
        width: 180px;
        height: 160px; /* PC用の高さを調整 */
    }
    .character-icon-bg {
        width: 170px;
        height: 170px;
    }
    .character-icon-img {
        top: -30px; /* PC用に上からの配置を調整 */
        height: 135%;
    }
}