/* 共通カスタムCSS - EC-CUBEアップデート時に保護されます */

/* ==========================================================================
   レイアウト・コンテンツ幅調整（高優先度）
   ========================================================================== */

/* コンテナの最大幅設定 - 高詳細度セレクタ */
html body div.ec-layoutRole div.ec-layoutRole__contents,
html body div.ec-layoutRole div.ec-layoutRole__contentTop,
html body div.ec-layoutRole div.ec-layoutRole__contentBottom {
    max-width: 1200px;
    margin: 0 auto ;
    padding: 30px 0 0;
}

.ec-blockBtn--cancel {
    margin-bottom: 40px !important;
}

.slide-item {
    text-align: center;
}

/* メインコンテンツエリア - 高詳細度セレクタ */
html body div.ec-layoutRole main.ec-layoutRole__main,
html body div.ec-layoutRole main.ec-layoutRole__mainWithColumn,
html body div.ec-layoutRole main.ec-layoutRole__mainBetweenColumn {
    max-width: unset;
    margin: 0 20px 0 20px;
    padding: 0;
    min-width: 900px;
}

/* ヘッダーコンテンツ幅 - 高詳細度セレクタ */
html body div.ec-layoutRole header.ec-layoutRole__header .ec-headerRole {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}


/* フッターコンテンツ幅 - 高詳細度セレクタ */
html body div.ec-layoutRole footer.ec-layoutRole__footer .ec-footerRole {
    max-width: unset;
    margin: 0 auto;
    padding: 0 0px;
    background-color:#525252 ;
}



/* セクション共通 - 高詳細度セレクタ */
html body div.ec-layoutRole div.ec-role {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}

/* レイアウトロール全体 - 高詳細度セレクタ */
html body div.ec-layoutRole {
    max-width: none;
    width: 100%;
    background: #333;
    /* padding: 220px 0 0 0 ; */
}

/* iPad用レスポンシブ対応 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* メインコンテンツエリアの調整 */
    html body div.ec-layoutRole main.ec-layoutRole__main,
    html body div.ec-layoutRole main.ec-layoutRole__mainWithColumn,
    html body div.ec-layoutRole main.ec-layoutRole__mainBetweenColumn {
        margin: 0 15px 0 15px;
    }
    
    /* コンテナの調整 */
    html body div.ec-layoutRole div.ec-layoutRole__contents,
    html body div.ec-layoutRole div.ec-layoutRole__contentTop,
    html body div.ec-layoutRole div.ec-layoutRole__contentBottom {
        padding: 30px 0 0;
    }
    
    /* セクション共通の調整 */
    /* html body div.ec-layoutRole div.ec-role {
        padding: 0 10px;
    } */
    
    /* サイドバー領域の幅制限 */
    html body div.ec-layoutRole aside.ec-layoutRole__left,
    html body div.ec-layoutRole aside.ec-layoutRole__right {
        max-width: 220px;
        min-width: 200px;
    }
}

@media screen and (max-width: 768px) {
html body div.ec-layoutRole main.ec-layoutRole__main,
html body div.ec-layoutRole main.ec-layoutRole__mainWithColumn,
html body div.ec-layoutRole main.ec-layoutRole__mainBetweenColumn {
    margin: 0 auto;
}

html body div.ec-layoutRole div.ec-layoutRole__contents,
html body div.ec-layoutRole div.ec-layoutRole__contentTop,
html body div.ec-layoutRole div.ec-layoutRole__contentBottom {
    padding: 0px 0 0;
}
}




/* ==========================================================================
   フォーム・UI要素
   ========================================================================== */

/* 住所入力フォーム用（日本の郵便番号自動入力） */
.p-country-name {
    display: none;
}

/* ショッピングページの非表示要素 */
.non-customer-edit {
    display: none;
}

.mod-button {
    display: none;
}

/* 支払い方法選択 */
.payment-method-item {
    display: block;
}

/* 削除ボタンの初期状態（最初のアイテムは非表示） */
.delete-button-hidden {
    display: none;
}

/* カートへ移動ボタンのマージン */
.cart-action-button {
    margin-bottom: 3px;
}

/* カートレイアウト */
.ec-productRole{
    padding: 50px;
}
.ec-cartRole {
    margin-bottom: 30px !important;
}
.ec-forgotRole {
    margin-bottom: 30px !important;
}

.ec-reportDescription{
    padding: 8px;
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

/* テキスト中央揃え */
.text-center {
    text-align: center;
}

/* マージン調整 */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* パディング調整 */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* ==========================================================================
   スマホ表示時のサイドバー表示
   ========================================================================== */

/* スマホ表示時のサイドバーコンテナ */
.ec-layoutRole__sideForMobile {
    display: none; /* デフォルトは非表示 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #f8f9fa;
}

/* スマホ表示時のサイドバー左右 */
.ec-layoutRole__sideForMobile--left,
.ec-layoutRole__sideForMobile--right {
    margin-bottom: 20px;
}

.ec-layoutRole__sideForMobile--right:last-child {
    margin-bottom: 0;
}
/* スマホ表示 */
@media (max-width: 480px) {
    .ec-pageHeader h1, .ec-pageHeader .h1{
        background: #8f7a37;
        color: white;
        padding: 1rem;        
        margin: 0px ;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    } 
    .ec-role{
        padding: 0.5rem;
        margin: 1rem auto;
    }
    #page_homepage .ec-role{
        padding: unset;
        margin: unset;
    }
}
/* スマホサイズでのみ表示 */
@media screen and (max-width: 768px) {
    /* スマホ表示時はサイドバーを表示 */
    .ec-layoutRole__sideForMobile {
        display: block;
    }
    
    /* PC用のサイドバーは非表示 */
    .ec-layoutRole__left,
    .ec-layoutRole__right {
        display: none !important;
    }
    
    /* PC用のtop_side_bannerを非表示 */
    .top_side_banner {
        display: none !important;
    }
    
    /* カレンダーをスマホで100%幅に */
    .calendar {
        max-width: 100% !important;
    }
    
    /* メインコンテンツの幅を調整 */
    html body div.ec-layoutRole main.ec-layoutRole__main,
    html body div.ec-layoutRole main.ec-layoutRole__mainWithColumn,
    html body div.ec-layoutRole main.ec-layoutRole__mainBetweenColumn {
        min-width: 100%;
        max-width: none;
    }
}

/* タブレットサイズ以上では通常通り */
@media screen and (min-width: 769px) {
    .ec-layoutRole__sideForMobile {
        display: none !important;
    }
}
@media screen and (max-width: 768px){
.ec-progress .ec-progress__label{
    font-weight:normal;
    font-size: 10px !important;
}
}