/* --- 全体の設定 --- */
body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #fff0f5 0%, #e6e6fa 100%);
    color: #333;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: 0;
}

/* --- 1. ヘッダー --- */
.site-header {
    text-align: center;
    padding: 20px;
    color: #6a5acd;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    position: relative;
    z-index: 100;
}
.site-header h1 { margin: 0; font-size: 2.5rem; }

/* --- 2. タブエリア --- */
.tab-container {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    padding-top: 10px;
    border-bottom: 2px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
    z-index: 100;
    flex-wrap: wrap; /* 折り返しを有効にする */
}

.tab {
    /* 1行2つのための設定 */
    box-sizing: border-box; /* paddingを幅計算に含める */
    flex-grow: 0;   /* 伸びない */
    flex-shrink: 0; /* 縮まない */
    /* 100%幅 ÷ 2 から、左右のマージン(5px * 2 = 10px)を引いた幅 */
    flex-basis: calc(50% - 10px);

    /* 元のスタイル */
    padding: 5px;
    margin: 0 5px;
    margin-bottom: 7px; /* 折り返し時の縦の余白 */
    background: #f0f0f0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    font-weight: bold;
    color: #888;
    transition: all 0.3s ease;
    text-align: center; /* テキスト中央揃え */
}

.tab span {
    font-size: 0.9rem;
}

/* アクティブ（選択中）のタブのスタイル */
.tab.active {
    background: #fff;
    color: #ff69b4;
    border-bottom: 3px solid #ff69b4;
    transform: translateY(2px);
}

/* --- 3. メインコンテンツ (バブルエリア) --- */
.bubble-area {
    width: 100%;
    height: 150vh;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 10;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.bubble-area.hidden {
    display: none;
}

.bubble-playground {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

.bubble {
    position: absolute;
    background: rgba(255, 192, 203, 0.4);
    border-radius: 50%;
    width: 420px;
    height: 420px;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.5), inset 0 0 10px rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s linear;
    will-change: transform;
    z-index: 10;
}
.bubble:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
.bubble > a {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
}
.bubble > a > img {
    display: block;
    border-radius: 0;
}

.bubble-link {
    width: 210px;
    height: 210px;
    padding: 10px;
}

.tracking-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --- 4. 猫が動くフッター --- */
.cat-footer {
    /* 猫がいなくなったので高さを 0 に */
    position: relative;
    width: 100%;
    height: 0;
}

/* ▼▼▼ スタイル修正 ▼▼▼ */
.walking-cat {
    font-size: 50px;
    position: absolute; /* 基準は .site-header */
    bottom: 5px; /* ヘッダーの下から5px */
    left: 0;

    transition: transform 1.5s ease-in-out;
    will-change: transform;
    transform: translateX(-60px);
    pointer-events: auto;

    /* ヘッダーの文字(100)より手前に表示 */
    z-index: 101;
}

/* --- フッターのコピーライト --- */
.copyright {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #888;
    padding: 10px 0;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .bubble-playground {
        min-width: 1920px;
    }
}