/* General Resets and Base Styles */
@charset "UTF-8";


.godzilla_wrapper {
    background-image: url('/html/upload/user_data/shop/S084/godzilla/bgi.jpg?ver=20250922103520'); /* 背景 */
    background-size: cover;
    background-attachment: fixed; /* 背景画像を固定 */
    }
    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

.g-body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    font-size: 16px;
    min-width: 320px; /* 最小幅を設定 */
    min-height: auto;
}

.godzilla_wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: #ffffff;
}


/* Header Section */
.g-header {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: -60px; /* 各セクション間の余白 */
}

.header-full-image {
    min-width: 50%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    object-fit: cover; /* 画像がコンテナを埋めるように調整 */
    object-position: center top; /* 上部に寄せる */
}

/* Main Content Area */
.g-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.sub_visual {
    background-image: url(/html/upload/user_data/shop/S084/godzilla/sub.visual.png?ver=20250922103522);
    background-repeat: no-repeat;
    background-size: 1560px;
}

/* Section Intro */
.section-intro {
    min-width: 100%;
    height: 790px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 40px;
    margin: -30px;
    align-items: stretch;
}

.section-intro p{
writing-mode: vertical-rl;
text-align: justify;
}

.intro-left {
    min-width: 0;
    flex: 1;
    margin: 10px 0 0 30px;
    display: flex;
    flex-direction: column;
}

.poster-image {
    display: block; /* 画像下の余分な隙間をなくす */
    min-width: 299px; /* 親要素の幅いっぱいに広げる */
}

.text-container-vertical {
    flex: 1;
    /* ★★★ テキストを縦書きにし、右から左へ流す */
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-left: auto;
    /* ★★★ テキストを折り返させるために高さを指定 */
    height: 400px;
    padding-top: 24px; /* テキストエリアの内側の余白 */
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.1em;
}

.intro-right {
    /* flex: 1; */
    min-width: 0;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    position: relative;
}
.intro-right img {
    height: 720px;
}

.intro-title-image {
    width: 170px;
    min-height: auto;
    object-fit: contain;
    margin-left: 35px;
    position: absolute;
    right: 20px;
    position: relative;
    margin-top: -20px;
}

.intro-text-block p {
    text-orientation: upright;
    line-height: 3.3rem;
}

.text-block-bold {
    color: #333;
    line-height: 1.5;
    position: relative;
}

.text-block-bold p {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 3.3rem;
    margin-bottom: 10px;
}

.text-block-regular {
    margin-bottom: 1em;
    font-size: 1.8em;
    color: #333;
    line-height: 1.5;
    position: absolute;
}

.text-container-vertical p{
    font-weight: bold;
    margin-bottom: 20px;
}

.vertical-container {
    /* 親コンテナ */
    display: flex; /* 子要素を横並びにする（縦書きなので結果的に右から左へ並ぶ） */
    writing-mode: vertical-rl; /* ★★★ テキストを縦書きにし、ブロックを右から左へ配置する最重要プロパティ */
    padding: 0 10px;; /* コンテナの内側の余白 */
    margin-bottom: 10px;
}

.vertical-container p {
    font-size: 19px;
}

.text-block {
    /* 個別のテキストブロック */
    width: auto;
    font-size: 16px;
    line-height: 1.8;
}

/* ★★★ 1つ目のブロックの下に区切り線を設置 ★★★ */
.text-block:first-child {
    border-bottom: 2px solid #333; /* 水平の区切り線 */
    padding-bottom: 24px;          /* 1つ目のテキストと区切り線の間の余白 */
    margin-bottom: 24px;           /* 区切り線と2つ目のテキストの間の余白 */
}

.products-title-image {
    width: 100%;
    height: auto;
    margin: 0 auto 30px;
    object-fit: contain;
}

.parent {
    display: grid;
    /* 8つのカラム（列）と6つのロー（行）を定義 */
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px; /* アイテム間の余白を少し広めに調整 */
    height: auto; /* 高さは自動調整に */
    padding: 20px;
}

/* ✅ 以下のようにgrid-areaの値を修正 */
/* grid-area: 行の開始 / 列の開始 / 行の終了 / 列の終了 */

/* ガーゼタオル */
.g-div1 {
    grid-area: 1 / 1 / 4 / 3;
}

/* 合皮キーホルダー ブラック */
.g-div2 {
    grid-area: 1 / 3 / 4 / 6;
}

/* 合皮キーホルダー グレー */
.g-div5 { /* HTMLのクラス名がdiv5のため、それに合わせます */
    grid-area: 1 / 6 / 4 / 9;
}

/* フライトタグ */
.g-div4 {
    grid-area: 4 / 1 / 7 / 3;
}

/* 巾着 */
.g-div3 {
    grid-area: 4 / 3 / 7 / 5;
}

/* エコバッグ ブラック */
.g-div6 {
    grid-area: 4 / 5 / 7 / 7;
}

/* エコバッグ グレー */
.g-div7 {
    grid-area: 4 / 7 / 7 / 9;
}


/* アイテムの共通スタイル
   (価格とテキストの表示順を調整)
*/
.g-item {
    border: none; /* 枠線を削除 */
    background-color: #333; /* 背景色をダークグレーに */
    color: white;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.g-item a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.g-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    flex-grow: 1; /* 画像が余白を埋めるようにする */
    margin-bottom: 15px;
}

.item_detail {
    text-align: left;
}

.item_detail p {
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

.g-price { /* <span>タグにclass="g-price"を適用 */
    font-size: 18px;
    font-weight: bold;
    display: block; /* 改行させる */
    margin-top: 8px; /* 商品説明との間に余白を追加 */
}        
.parent img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.godzilla_pc { display: block !important; }
.godzilla_sp { display: none !important; }

.parent p {
    font-size: 21px;
    text-align: left;
    margin: 10px 13px;
}

.parent .g-price {
    display: block;
    font-size: 20px;
    text-align: right;
    /* position: absolute; */
    bottom: 10px;
    right: 10px;
}

/* アイテムの共通スタイル
   (価格とテキストの表示順を調整)
*/
.g-item {
    border: none; /* 枠線を削除 */
    background-color: #333; /* 背景色をダークグレーに */
    color: white;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.g-item a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.g-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    flex-grow: 1; /* 画像が余白を埋めるようにする */
    margin-bottom: 15px;
}

.item_detail {
    text-align: left;
}

.item_detail p {
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

.g-price { /* <span>タグにclass="g-price"を適用 */
    font-size: 18px;
    font-weight: bold;
    display: block; /* 改行させる */
    margin-top: 8px; /* 商品説明との間に余白を追加 */
}

.godzilla_pc { display: block !important; }
.godzilla_sp { display: none !important; }


/* Section Products */
.section-products {
    background-image: url('/html/upload/user_data/shop/S084/godzilla/sub.visual.png?ver=20250922103522');
    background-size: cover;
    padding: 30px;
    text-align: center;
}

.products-title-image {
    width: 100%;
    height: auto;
    margin: 0 auto 30px;
    object-fit: contain;
}

.parent {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    height: 1000px;
}
    

/* Section Stores */
.section-stores {
    background-size: cover;
    padding: 0 30px 30px 60px;;
    margin-bottom: 40px;
    text-align: center;
    display: flex;
    flex-direction: row; /* 要素を横に並べる */
}

.stores-title-image {
    width: 80px; /* デザインカンプに合わせて調整 (縦長の画像) */
    height: auto;
    object-fit: contain;
}

.stores-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 変更 */
    /* gap: 0.5rem; 追加 */
    justify-content: center;
    /* gap: 50px; */
    margin: 20px 0 20px 40px;
    flex-wrap: wrap;
    width: 100%; /* 幅を親要素に合わせる */
}

.store-column {
    flex: 1;
    min-width: 250px; /* 最小幅を設定 */
    text-align: left;
}

.store-column p {
    margin-bottom: 8px;
    font-size: 1.2em;
    font-weight: 700;
    color: #333;
}

.store-note {
    font-size: 0.85em;
    color: #666;
    margin-right: auto;
}

/* Footer */
.footer {
    color: #fff;
    text-align: right;
    padding: 20px;
    padding-right: 100px;
    font-size: 0.85em;
    margin-top: 50px;
}

/* =========================================
   レスポンシブデザイン (1101px以下に適用)
   ========================================= */
@media screen and (max-width: 1101px) {

    /* 基本スタイル調整 */
    .g-body {
        font-size: 14px;
    }

    .g-main {
        padding: 0 15px;
    }

    /* ▼▼▼【修正箇所】▼▼▼ */
    .sub_visual {
        background-image: url(/html/upload/user_data/shop/S084/godzilla/sub.visual.png?ver=20250922103522);
        background-size: cover; /* 画面に合わせて背景画像が全体を覆うように調整 */
        background-position: center top; /* 画像の表示位置を調整 */
        background-repeat: no-repeat;
    }
    /* ▲▲▲【修正箇所】▲▲▲ */


    /* ヘッダー */
    .g-header {
        margin-bottom: -20px; /* mainとの重なりを調整 */
    }


    /* イントロダクションセクション */

        /* --- イントロダクションセクション --- */
    .intro-title-image {
        /* この1行を追加することで、src属性の画像を上書きして表示します */
        content: url('/html/upload/user_data/shop/S084/godzilla/sp_title.png?ver=20250922103522'); 
        position: static;
        width: 100%;
        /* height: 720px; */
        margin: 0 0 20px 0;
    }
    .section-intro {
        height: auto; /* 高さを自動調整 */
        display: flex;
        flex-direction: column; /* 縦積みに変更 */
        padding: 20px 50px;
    }

    .section-intro p {
        writing-mode: horizontal-tb; /* 縦書きを横書きに戻す */
        text-align: left;
    }

    .intro-left {
        margin: 0;
        order: 2; /* 表示順を右側コンテンツの後に変更 */
    }

    .poster-image {
        min-width: 100%;
        width: 100%;
        margin-bottom: 20px;
    }

    .text-container-vertical {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        height: auto; /* 高さを自動調整 */
        padding-top: 0;
        margin-left: 0;
    }

    .intro-right {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        padding: 0;
        margin-bottom: 40px;
        order: 1; /* 表示順を先頭に変更 */
        min-width: 100%;
    }

    .intro-right img {
        height: auto;
    }

    .intro-title-image {
        position: static; /* absolute配置を解除 */
        width: 100%;
        margin: 0 0 20px 0;
    }

    .intro-text-block p {
        line-height: 1.8;
        font-size: 20px;
    }
    
    .text-block-bold {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    .text-block-bold p {
        line-height: 1.8;
        font-size: 20px;
    }

    .vertical-container {
        display: block; /* flexを解除 */
        writing-mode: horizontal-tb; /* 横書きに変更 */
        padding: 0;
    }

    .vertical-container p {
        font-size: 1em;
    }
    
    .text-block:first-child {
        border-bottom: 1px solid #333; /* 区切り線を横線に変更 */
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

        /* 商品一覧セクション */
    .section-products {
        padding-top: 20px;
        padding-bottom: 0px; /* ★ 下にも余白を設け、販売店舗セクションとの間隔を調整 */
        height: auto;         /* ★ 高さが中身の量に追従するように指定 */
    }

    .parent {
        display: grid; /* ★ displayをgridに変更 */
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr); /* ★ 2つの均等なカラムを作成 */
        gap: 15px; /* ★ アイテム間の余白を指定 */
        height: auto;
        padding: 10px;
        }
    
    /* すべての商品アイテムのスタイルを共通化・リセット */
    .parent > div[class^="g-div"] {
        display: block;
        grid-column: auto;
        grid-row: auto;
        /* margin-bottomはgapで指定するため不要に */
        background-color: #121212;
    }

    .parent img {
        width: 100%;
        min-width: 100%;
        height: auto;
    }

    .godzilla_pc { display: none !important; }
    .godzilla_sp { display: block !important; }

    .parent p {
        font-size: 1em;
    }

    .parent .g-price {
        font-size: 1.2em;
        position: static;
        text-align: right;
        padding: 0 10px 10px;
    }

    .item_detail {
        padding: 10px;
    }

    .g-item-2 {
      order: 4; /* 4番目に表示されるようにする */
    }

    .g-item-4 {
      order: 6; /* 2番目に表示されるようにする */
    }

    .g-item-5 {
      order: 5; /* 2番目に表示されるようにする */
    }

    /* 販売店舗セクション */
    .section-stores {
        flex-direction: row; /* 縦積みに変更 */
        padding: 50px 10px;
    }

    .section-stores img {
        width: 80px;
        margin-right: 30px;
        padding-top: 0;
    }

    .stores-title-image {
        width: 100%;
        height: auto;
        margin-left: 10px;
        margin-bottom: 20px;
    }
    
    .stores-content {
        display: block; /* gridを解除 */
        margin: 0;
    }
    
    .store-column {
        min-width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .store-column p {
        font-size: 1em;
    }

    .store-note {
        text-align: left;
    }


    /* フッター */
    .footer {
        text-align: center; /* 中央揃えに変更 */
        padding: 20px 15px;
        margin-top: 20px;
    }
}

/* =========================================
   レスポンシブデザイン (435px以下に適用)
   ========================================= */
@media screen and (max-width: 435px) {

    /* 基本スタイルをさらに調整 */
    .g-body {
        font-size: 14px; /* 全体のフォントサイズを少し小さく */
    }

    .g-main {
        padding: 0 10px; /* 左右の余白をさらに狭く */
    }

    /* イントロダクションセクション */
    .intro-title-image {
        background-image: url(/html/upload/user_data/shop/S084/godzilla/sp_title.png?ver=20250922103522);
    }

    .section-intro {
        padding: 20px 50px;
    }

    /* Section Products */
    .section-products {
        padding: 0;
        height: auto;         /* ★ 高さが中身の量に追従するように指定 */
    }

    .intro-right {
        margin-bottom: 30px;
    }

    .intro-right img {
        position: static;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        height: auto;
    }

    .text-block-bold {
        font-size: 1.1em; /* 太字テキストを少し小さく */
    }

    .text-block-bold p {
        font-size: 15px;
    }
    
    .vertical-container p {
        font-size: 0.95em;
    }

    /* 商品一覧セクション */
    /* .section-products {
        padding: 20px 5px;
    } */

    .item_detail {
        padding: 0;
    }

    .parent p {
        font-size: 0.9em; /* 商品名を調整 */
    }

    .parent .g-price {
        font-size: 1.15em; /* 価格を調整 */
    }

    .products-title-image {
        margin: 0;
    }


    /* 販売店舗セクション */
    .section-stores {
        padding: 20px 5px;
    }

    .store-column p {
        font-size: 0.95em;
    }
}