/* ===================================
   ご当地Barbie01 共通スタイル
   =================================== */

/* 共通設定 */
#barbie01-wrapper,
#barbie01-detail-wrapper {
    width: 100%;
    min-height: 100vh;
    padding-top: 120px;     /* ヘッダーとの距離（ヘッダー高さに応じ調整可） */
    padding-bottom: 120px; /* フッターとの距離 */
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* 背景（ピンクグラデーション）は疑似要素に配置。
   これにより装飾リボンを「背景より前・ヘッダーを含む全コンテンツより後ろ」 */
#barbie01-wrapper::before,
#barbie01-detail-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #f9d7e6;
    background-image: url('barbie01_images/top/bg01.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: -2;
    pointer-events: none;
}

/* 詳細ページ：エリアごとの背景色（TOPのグラデーションを単色で上書き） */
#barbie01-detail-wrapper.detail-area-tokyo::before   { background-image: none; background-color: #EECFCD; } /* 東京 */
#barbie01-detail-wrapper.detail-area-fujisan::before { background-image: none; background-color: #D3D6E0; } /* 富士山 */
#barbie01-detail-wrapper.detail-area-osaka::before   { background-image: none; background-color: #EFDFCD; } /* 大阪 */


/* ===================================
   トップページ
   =================================== */

.barbie01-top {
    padding-left: 20px;
    padding-right: 20px;
}

/* 装飾：ご当地リボン（左上）。ヘッダーより下のレイヤー（背景より前）に表示 */
.deco-ribbon {
    position: absolute;
    top: 80px;
    left: 0;
    width: 300px;   /* リボンの大きさ */
    height: auto;
    z-index: -1;    /* ヘッダー等の全コンテンツより後ろ、背景(-2)より前 */
    pointer-events: none;
}

/* ヒーロー */
.hero-wrapper {
    position: relative;
    max-width: 1800px;   /* ヒーロー画像の最大幅 */
    margin: 40px auto 50px; /* 上=余白 / 下=エリア画像との間隔 */
    text-align: center;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* エリアカード（3枚横並び・押下でラインナップへスクロール） */
.area-card-wrapper {
    max-width: 1800px;    /* カード行全体の幅（ラインナップパネルと一致） */
    margin: 0 auto 70px;
    display: flex;
    gap: 32px;            /* カード間の余白 */
    justify-content: center;
}

.area-card {
    flex: 1 1 0;
    display: block;
    text-decoration: none;
    border-radius: 16px;   /* 選択枠を角丸で表示するため保持 */
    transition: transform 0.2s ease;
}

.area-card:hover {
    transform: translateY(-3px);
}

/* 選択中のエリアカード（フォーカスは残す） */
.area-card.active {
    outline: 4px solid #e5388a;   /* 選択中カードの強調色 */
    outline-offset: -2px;
    border-radius: 16px;
}

.area-card-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ラインナップ一覧（パネルは塗り1枚＝wrapperで描画） */
.lineup-wrapper {
    max-width: 1800px;      /* パネルの最大幅 */
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);   /* パネルの塗り */
    border-radius: 32px;
    overflow: hidden;       /* 塗りを角丸にクリップ */
    box-sizing: border-box;
}

.lineup-title {
    line-height: 0;         /* 画像下の余白を除去 */
}

.lineup-title-image {
    width: 100%;            /* パネル幅 */
    height: auto;
    display: block;
}

/* タイトル下のパネル本体（表示中の1エリアを内包） */
.lineup-body {
    padding: 50px 30px 50px;   /* 中身の余白 */
    box-sizing: border-box;
}

/* エリアごとのセクション */
.lineup-area {
    margin-bottom: 60px;   /* エリア間の余白 */
    scroll-margin-top: 120px;
}

.lineup-area:last-child {
    margin-bottom: 0;
}

/* エリア見出し（画像） */
.lineup-heading {
    text-align: center;
    margin-bottom: 14px;
}

.lineup-heading-image {
    max-width: 450px;   /* 見出し画像の最大表示幅 */
    width: 80%;
    height: auto;
    display: inline-block;
}

/* クリック誘導ラベル */
.lineup-guide {
    margin-bottom: 16px;
    padding-left: 6px;
}

.lineup-guide-image {
    width: 220px;    /* ラベルの幅 */
    max-width: 60%;
    height: auto;
    display: block;
}

/* 商品グリッド（PC：5列） */
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 1行に並べる商品数 */
    gap: 18px;
}

.product-item {
    transition: transform 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
}

.product-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.product-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;                              /* サムネ画像の角丸 */
    box-shadow: 0 3px 10px rgba(198, 40, 110, 0.15);  /* カード風の影（不要なら削除可） */
    transition: box-shadow 0.3s ease;
}

.product-item:hover .product-image {
    box-shadow: 0 6px 16px rgba(198, 40, 110, 0.25);
}

/* 商品名（サムネイル下部・itemName画像） */
.product-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;          /* 商品名エリアの高さ */
    padding: 10px 8px 14px;    /* 商品名の上下左右の余白 */
    box-sizing: border-box;
}

.product-name-image {
    height: 20px;              /* 商品名の表示サイズ */
    width: auto;
    max-width: 100%;           /* はみ出し防止 */
    display: block;
}

.no-products-inline {
    grid-column: 1 / -1;
    text-align: center;
    color: #b03a68;
    font-weight: bold;
}

/* コピーライト */
.copyright-wrapper {
    max-width: 1800px;
    margin: 30px auto 0;
    text-align: right;
    padding: 0 10px;
}

.copyright-image {
    width: 180px;    /* コピーライト画像の幅 */
    max-width: 60%;
    height: auto;
    display: inline-block;
}

/* ===================================
   詳細ページ
   =================================== */

.barbie01-detail {
    padding-left: 20px;
    padding-right: 20px;
}

/* 詳細トップ（エリアタイトル） */
.detail-title-wrapper {
    max-width: 700px;   /* タイトル画像の最大幅 */
    margin: 0 auto 30px;
    text-align: center;
}

.detail-title-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 商品ポスター */
.poster-section {
    max-width: 700px;      /* ポスターの最大幅 */
    margin: 0 auto 40px;   /* ポスター間の余白 */
    scroll-margin-top: 120px;
}

.poster-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);   /* ニュートラルグレーの影 */
}

/* エラー・該当なし */
.error-message,
.no-products {
    max-width: 600px;
    margin: 60px auto;
    padding: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
}

.error-message p,
.no-products p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    color: #7a2b4b;
}

.error-message a,
.no-products a {
    color: #cf1d3f;
    text-decoration: underline;
}

/* ===================================
   レスポンシブ対応
   =================================== */

/* タブレット（768px - 1023px） */
@media (max-width: 1023px) {
    #barbie01-wrapper,
    #barbie01-detail-wrapper {
        padding-top: 80px;
    }

    .deco-ribbon {
        width: 100px;
    }

    /* 商品グリッド：3列 */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .lineup-heading-image {
        max-width: 380px;
    }
}

/* スマートフォン（767px以下） */
@media (max-width: 767px) {
    #barbie01-wrapper,
    #barbie01-detail-wrapper {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .barbie01-top {
        padding-left: 10px;
        padding-right: 10px;
    }

    .deco-ribbon {
        top: 60px;   /* スマホでのリボン縦位置（小さいほど上へ） */
        width: 76px;
    }

    .hero-wrapper {
        max-width: none;
        width: 100vw;                   /* 画面の端いっぱい（親の左右余白を無視して全幅に） */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: 24px;
        margin-bottom: 30px;
        overflow: hidden;               /* はみ出したキラキラを切る（切れてOK） */
    }

    .hero-image {
        width: 126%;           /* 🔧 中央寄せで拡大。バッジは切れず、外側のキラキラははみ出して切れる */
        max-width: none;
        margin-left: -12.2%;   /* バッジを左右対称に中央寄せ（左が切れないよう微調整） */
    }

    /* エリアカード：縦積み */
    .area-card-wrapper {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 40px;
    }

    .lineup-wrapper {
        border-radius: 20px;
    }

    .lineup-body {
        padding: 30px 12px 30px;
    }

    .lineup-area {
        margin-bottom: 45px;
    }

    .lineup-heading-image {
        max-width: 300px;
        width: 85%;
    }

    .lineup-guide-image {
        width: 180px;
        max-width: 70%;
    }

    /* 商品グリッド：2列 */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-name-image {
        height: 18px;   /* スマホでの商品名サイズ */
    }

    /* コピーライト：スマホは中央寄せ＋小さく（PC版は変わりません） */
    .copyright-wrapper {
        text-align: center;
    }

    .copyright-image {
        width: 120px;   /* 🔧 スマホでのコピーライト幅（小さめ） */
    }

    /* 詳細ページ */
    .barbie01-detail {
        padding-left: 10px;
        padding-right: 10px;
    }

    .poster-section {
        margin-bottom: 24px;
        scroll-margin-top: 60px;   /* スマホ：ヘッダー高さ相当 */
    }

    .poster-image {
        border-radius: 8px;
    }
}

/* 極小スマートフォン（480px以下） */
@media (max-width: 480px) {
    .lineup-heading-image {
        max-width: 260px;
    }

    /* 商品グリッド：必要なら1列にする場合は下記を有効化
    .product-grid { grid-template-columns: 1fr; }
    */
}