/* リセットと基本設定 */
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    /* 背景画像の設定 */
    /* ユーザーが背景画像を指定する場合はここを書き換えてください */
    background-color: #3b3061; /* 仮の背景色 */
    background-image: url('https://shop-ec.wakasa.jp/img/usr/freepage/2608-buruburu-hbd/bk.png'); /* 仮の背景画像パス */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 背景を固定 */
    min-height: 100vh;
}
.buruburu-hbd img{
    width: 100%;
}
/* 疑似的な背景の装飾（任意で調整） */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 暗くしたり色を重ねる場合はここで調整 */
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/* メインコンテンツのコンテナ */
.content-container {
    width: 100%;
    max-width: 600px; /* 参考画像の縦長コンテンツ幅に合わせる */
    /* 中央ではなく少し右寄りに配置（右側の固定バナー用のスペースを確保） */
    margin: 0 330px 0 auto; 
    padding: 40px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 1;
    position: relative;
}

/* 画像プレースホルダーの共通スタイル */
.image-placeholder {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px dashed #999;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
}

@keyframes buttonPulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
    100% { transform: translateX(-50%) scale(1); }
}

/* 画像の上に重ねるボタンのスタイル */
.overlay-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 77%;
    max-width: 500px;
    z-index: 5;
    transition: transform 0.2s, filter 0.2s;
    animation: buttonPulse 2s infinite ease-in-out;
}
.contents3-btn{
    bottom: 12%;
} 
.contents4-btn {
    bottom: 3%;
}
.contents5-btn {
    bottom: 6%;
}

.overlay-button:hover {
    animation: none; /* ホバー時は自動アニメーションを停止 */
    transform: translateX(-50%) scale(1.08); /* 少し大きく拡大 */
    filter: brightness(1.1); /* 少し明るくする */
}
.cart-btn1{
    top: 25.5%;
    max-width: 400px;
}
.cart-btn2{
    top: 32.3%;
    max-width: 400px;
}
.cart-btn3{
    top: 35.8%;
    max-width: 400px;
}
.cart-btn4{
    top: 45.8%;
    max-width: 400px;
}
.cart-btn5{
    top: 58.3%;
    max-width: 400px;
}
.cart-btn6{
    top: 68.5%;
    max-width: 400px;
}
.cart-btn7{
    top: 78.5%;
    max-width: 400px;
}
.cart-btn8{
    top: 88.8%;
    max-width: 400px;
}
.overlay-button img {
    width: 100%;
    height: auto;
    display: block;
}

/* メインビジュアル用のプレースホルダー */
.main-poster {
     /* 仮の高さ */
}

/* コンテンツ画像用のプレースホルダー */
.content-image {

}

/* 右上のハンバーガーメニュー */
.menu-button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.menu-button span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #d183b5; /* ピンク色 */
    border-radius: 3px;
    transition: transform 0.3s, opacity 0.3s;
}

/* ハンバーガーメニューを開いたとき（×印になる） */
.menu-button.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-button.active span:nth-child(2) {
    opacity: 0;
}
.menu-button.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ナビゲーションメニュー（右からスライドイン） */
.nav-menu {
    position: fixed;
    top: 0;
    right: -332px;
    width: 332px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 95;
    padding: 100px 20px 20px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.nav-menu.open {
    right: 0;
}

.nav-menu-link img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-menu-link:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 右側の固定バナー群 */
.side-banners {
    position: fixed;
    top: 50%;
    right: 66px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 90;
}

.banner-placeholder {
    width: 250px;
}

.banner-placeholder a {
    display: block;
    transition: transform 0.3s, opacity 0.3s;
}

.banner-placeholder a:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 左側の固定イメージ */
.left-fixed-image {
    background: url(https://shop-ec.wakasa.jp/img/usr/freepage/2608-buruburu-hbd/left-bk.png);
    background-size: contain;
    background-position-y: bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: -20px;
    width: calc(100vw - 925px);
    min-width: 100px;
    aspect-ratio: 350 / 400;
    height: auto;
    z-index: 10;
    pointer-events: none;
    /* 【絶対重ならない魔法の計算式】
       画面全体の幅(100vw) から、
       メインコンテンツの幅(600px) ＋ 右マージン(220px) ＋ 隙間用の余白(40px)
       を引いた残りのスペースだけを幅として使うようにします */

}

.fixed-image-placeholder {
    width: 100%;
    max-width: 530px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #666;
    text-align: center;
    font-weight: bold;
    margin: auto;
}

/* レスポンシブ対応（画面が小さい場合） */
@media (max-width: 1000px) {
    .content-container {
        margin: 0 auto; /* 狭い画面では中央に戻す */
    }
    .side-banners,
    .left-fixed-image {
        display: none; /* スマホなどの狭い画面では固定バナーや左の画像を隠す */
    }
}