/* カスタマイズ用CSS */
@media screen and (min-width: 769px) {
    
    /* 1130px の固定制限を解除して、横幅を100%に広げます */
    .ec-headerNaviRole,
    [class*="ec-headerNaviRole"] {  /* クラス名の一部に ec-headerNaviRole という文字が含まれている要素すべて対象 */
        max-width: 100% !important;
        width: 100% !important;
        justify-content: space-between !important;
        padding-left: 40px !important;  /* 画面端に密着しすぎないよう左右に少し余白を作ります */
        padding-right: 40px !important;  /* 画面端に密着しすぎないよう左右に少し余白を作ります */
    }
    .ec-headerNaviRole__left {
        max-width: 580px !important;
        width: 60% !important;
        margin-right:auto !important;
        padding: 0 !important;
    }
    .ec-headerNav__itemLink {
        display: inline !important;   /* 「お問い合せ」を表示にする */
    }
}
@media screen and (max-width: 767px) {

}
/* トップページ（ページID:1）のメインエリアの余白と高さをゼロにして隙間を消します */
.ec-headerNaviRole {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.ec-headerRole {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important; /* 数値はお好みで変更してください */
}
.ec-headerTitle__title a{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*   ヘッダー「検索」（カテゴリー枠）の調整 */
.ec-select_search {
    height: 46px !important;         /* 高さを指定 */
    border-radius: 4px !important;   /* 角の丸みを指定（0で四角になります） */
    overflow: hidden !important;     /* 丸みからはみ出る要素を隠す */
    display: flex !important;
    align-items: center !important;
    padding-left: 4px !important;
}
/*  ヘッダー「検索」（カテゴリー）文字を大きくする */
.ec-headerSearch__category .category_id,
.ec-headerSearch__category .ec-select_search select {
    font-size: 18px !important; /* お好みに応じて 18px などに調整してください */
    height: auto !important;     /* 文字が大きくなった分、枠線の高さも自動で広げる設定 */
    height: 100% !important;
}
/*   ヘッダー「キーワードを入力」（カテゴリー枠）の調整 */
/*  ヘッダー「キーワードを入力」文字を大きくする */
.ec-headerSearch__keyword,
.search-name {
    font-size: 18px !important;
    height: auto !important;     /* 文字が大きくなった分、枠線の高さも自動で広げる設定 */
    border-radius: 4px !important;   /* 角の丸みを指定（0で四角になります） */
    overflow: hidden !important;     /* 丸みからはみ出る要素を隠す */
    display: flex !important;
    align-items: center !important;
    padding-left: 4px !important;
}
/*  ヘッダー「新規会員登録」「ログイン」文字を大きくする */
.ec-headerNav__item,
.ec-headerNav__itemLink {
    font-size: 18px !important; 
}
.fa-shopping-cart {
    margin-right: 8px !important;
}
/* ヘッダーのカート部分の文字サイズ調整 */
.ec-cartNavi__badge {
    font-size: 16px !important; /* 数字の大きさ */
    width: 24px !important;     /* 文字が大きくなった分、丸の幅も少し広げる */
    height: 24px !important;    /* 丸の高さ */

    /* 以下で数字を上下左右の「ど真ん中」に固定します */
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 12px !important;
    padding-left: 4px !important;
    margin-left: 8px !important;
}

/* 3. 「カート」の文字や「合計金額」の文字 */
.ec-cartNavi__price {
    font-size: 18px !important; 
    font-weight: bold; /* 金額などを少し太字にして目立たせる場合 */
}
.ec-headerNav__itemLink {
    flex-shrink: 0 !important; /* フレックスボックスの中で絶対に自分を縮めさせない */
    white-space: nowrap !important;
}

/* ==フッター領域の表示レイアウト調整== */
/* トップページにある ec-footerNAvi の上の余白を調整します */
.ec-footerNavi {
    margin: 5px 0 !important;
}
/* トップページにある ec-footerNAvi の上の余白を調整します */
.ec-footerTitle {
    padding: 8px 0 !important;
}
/* トップページにある ec-footerRole の上の余白を完全にゼロにします */
.ec-footerRole {
    margin-top: 0;
    padding-top: 0;
}

/* プライバシーポリシーのメッセージ */
.ec-pageHeader h1{
    margin-bottom: 20px;
}
.ec-heading-bold {
    margin-bottom: 4px;
}
.ec-off1Grid__cell {
    color: black;
    padding-bottom: 10px;
}
.ec-off1Grid__cell p {
    padding-left: 10px;
}
.ec-off1Grid__cell li {
    list-style-position: inside;
    margin-left: 0px;
    padding-top: 6px;
    padding-left: 40px; 
    text-indent: -20px; /* 1行目だけ左に戻す */
}

/* 配送方法のセレクトボックスを完全に操作禁止にする */
.ec-select select[name*="[Delivery]"] {
    pointer-events: none !important; /* クリックやタップを完全に無効化 */
    appearance: none !important;  /* ブラウザ固有のプルダウンのデザインを強制消去 */
}