/* ==========================================================================
   gajumaru カスタマイズCSS
   白基調 / 赤アクセント(#e60012) / 黒ボタン のクリーンなECデザイン
   style.css の後に読み込まれるため、同詳細度ならこちらが優先される
   ========================================================================== */

:root {
    --gj-red: #e60012;
    --gj-black: #111;
    --gj-text: #333;
    --gj-muted: #777;
    --gj-border: #ddd;
    --gj-bg-gray: #f0f0f0;
    --gj-footer-bg: #1a1a1a;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
body {
    background: #fff;
    color: var(--gj-text);
}

/* --------------------------------------------------------------------------
   ヘッダー: ロゴ / 検索 / 会員操作 / カテゴリナビ
   -------------------------------------------------------------------------- */
/* ヘッダー2段構成(gj-header)が全幅を使うため、旧3ブロック用グリッドは廃止 */
.ec-layoutRole__header {
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

.ec-layoutRole__header .ec-headerRole {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

/* PCではSP用ハンバーガー領域を隠す */
@media only screen and (min-width: 768px) {
    .ec-headerNaviRole .ec-headerRole__navSP {
        display: none;
    }
}

.ec-layoutRole__header .ec-headerNaviRole {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* EC-CUBE標準の33%/66%レイアウトを、今回のヘッダー構成では解除する */
.ec-layoutRole__header .ec-headerNaviRole__left {
    width: auto;
    flex: 0 0 auto;
}

.ec-layoutRole__header .ec-headerNaviRole__right {
    width: auto;
    flex: 0 0 auto;
}

.gj-brand--placeholder {
    min-height: 42px;
}

.gj-brand {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
}

.gj-brand__image {
    display: block;
    max-width: 190px;
    max-height: 46px;
    object-fit: contain;
}

/* アイコンメニュー(マイページ/お気に入り/ログイン系): アイコンの下に小ラベル */
.ec-headerNaviRole__right {
    display: flex;
    align-items: flex-start;
}

.ec-headerNaviRole__nav {
    width: auto;
}

.ec-headerNav {
    display: flex;
    align-items: flex-start;
}

.ec-headerNav .ec-headerNav__item {
    margin-left: 22px;
    font-size: 10px;
    white-space: nowrap;
}

.ec-headerNav .ec-headerNav__item a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--gj-text);
    text-decoration: none;
}

.ec-headerNav .ec-headerNav__itemIcon {
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 20px;
    color: var(--gj-text);
}

.ec-headerNav .ec-headerNav__itemLink {
    display: block;
    font-size: 10px;
    color: var(--gj-text);
}

/* ヘッダー検索窓(マルシェ風) */
.gj-headerSearch {
    flex: 1;
    min-width: 0;
    max-width: 470px;
    margin-right: 30px;
}

.gj-headerSearch form {
    display: flex;
    border: 2px solid var(--gj-black);
}

.gj-headerSearch__input {
    flex: 1;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    border: none;
    outline: none;
    background: #fff;
}

.gj-headerSearch__btn {
    width: 44px;
    border: none;
    background: var(--gj-black);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.gj-headerSearch__btn:hover {
    background: #444;
}

.gj-headerSearch__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #888;
    font-size: 11px;
    white-space: nowrap;
}

.gj-headerSearch__meta a {
    color: var(--gj-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gj-headerSearch__meta a:hover {
    color: var(--gj-red);
}

.ec-headerNaviRole__right {
    margin-left: auto;
}

@media only screen and (max-width: 767px) {
    .gj-headerSearch {
        display: none;
    }
}

/* カートナビ: アイコン+「カート」ラベル */
.ec-headerRole__cart {
    margin-left: 22px;
}

.ec-cartNavi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    min-width: 0;
    height: auto;
}

.ec-cartNavi .ec-cartNavi__icon {
    font-size: 20px;
    color: var(--gj-text);
}

.ec-cartNavi .ec-cartNavi__badge {
    background-color: var(--gj-red);
}

.ec-cartNavi .ec-cartNavi__label {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--gj-text);
    border-left: none;
    padding-left: 0;
}

.ec-cartNavi .ec-cartNavi__price {
    display: none;
}

/* --------------------------------------------------------------------------
   カテゴリメガメニュー(ヘッダー下段)
   -------------------------------------------------------------------------- */
.ec-layoutRole__header {
    position: relative;
}

.gj-megaMenu {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 16px;
    border-top: 1px solid var(--gj-border);
    border-bottom: 1px solid var(--gj-border);
}

.gj-megaMenu__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gj-megaMenu__item > a {
    display: block;
    padding: 13px 14px;
    font-size: 13px;
    font-weight: bold;
    color: var(--gj-text);
    text-decoration: none;
    white-space: nowrap;
}

.gj-megaMenu__item:hover > a {
    color: var(--gj-red);
}

.gj-megaMenu__item:first-child > a {
    padding-left: 4px;
}

.gj-megaMenu__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    background: #fff;
    border-top: 2px solid var(--gj-black);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .10);
}

.gj-megaMenu__item:hover .gj-megaMenu__panel {
    display: block;
}

.gj-megaMenu__panelInner {
    max-width: 1150px;
    margin: 0 auto;
    padding: 22px 24px 26px;
    column-count: 5;
    column-gap: 28px;
}

.gj-megaMenu__group {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
}

.gj-megaMenu__midLink {
    display: block;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--gj-border);
    font-size: 13px;
    font-weight: bold;
    color: var(--gj-black);
    text-decoration: none;
}

.gj-megaMenu__midLink:hover {
    color: var(--gj-red);
}

.gj-megaMenu__smallList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gj-megaMenu__smallList a {
    display: block;
    padding: 3px 0;
    font-size: 12px;
    color: #555;
    text-decoration: none;
}

.gj-megaMenu__smallList a:hover {
    color: var(--gj-red);
    text-decoration: underline;
}

@media only screen and (max-width: 767px) {
    .gj-megaMenu {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   メインビジュアル(スライダー)
   -------------------------------------------------------------------------- */
.gj-homeHero {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.main_visual {
    position: relative;
    overflow: hidden;
    background: #f4f5f6;
}

.main_visual .item,
.main_visual picture {
    display: block;
}

.main_visual img {
    display: block;
    width: 100%;
    aspect-ratio: 2048 / 864;
    object-fit: cover;
}

.main-visual__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background: rgba(40, 40, 40, .65);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

.main-visual__arrow:hover {
    background: rgba(40, 40, 40, .9);
}

.main-visual__arrow--prev {
    left: 14px;
}

.main-visual__arrow--next {
    right: 14px;
}

/* --------------------------------------------------------------------------
   左サイドバー
   -------------------------------------------------------------------------- */
.ec-layoutRole__left {
    flex: 0 0 250px;
    padding: 0 24px 40px 20px;
}

/* サイドバー内の ec-role の余白をリセット(カレンダーなど) */
.ec-layoutRole__left .ec-role {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 検索パネル */
.gj-sideSearch {
    background: var(--gj-bg-gray);
    padding: 16px 14px;
}

.gj-sideSearch__group {
    margin-bottom: 14px;
}

.gj-sideSearch__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: bold;
    color: var(--gj-text);
}

.gj-sideSearch .ec-input input,
.gj-sideSearch .search-name {
    width: 100%;
    height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
}

.gj-sideSearch .ec-select {
    margin-bottom: 0;
}

.gj-sideSearch .ec-select select,
.gj-sideSearch .category_id {
    width: 100%;
    max-width: 100%;
    height: 38px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
}

.gj-sideSearch__btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--gj-black);
    background: #fff;
    border: 2px solid var(--gj-black);
    border-radius: 0;
    cursor: pointer;
    transition: all .2s;
}

.gj-sideSearch__btn:hover {
    color: #fff;
    background: var(--gj-black);
}

/* カテゴリリスト(縦・罫線区切り) */
.gj-sideCat {
    margin-top: 24px;
}

.gj-sideSectionTitle {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gj-black);
}

.gj-sideSectionTitle__en {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--gj-black);
}

.gj-sideSectionTitle__ja {
    font-size: 11px;
    color: var(--gj-muted);
}

.gj-sideCat__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gj-border);
}

.gj-sideCat__item {
    border-bottom: 1px solid var(--gj-border);
}

.gj-sideCat__item > a {
    display: block;
    padding: 12px 4px;
    font-size: 13px;
    color: var(--gj-text);
    text-decoration: none;
}

.gj-sideCat__item > a:hover {
    opacity: .7;
}

/* サイドバーは大カテゴリのみ表示(147カテゴリ全展開は長すぎるため。参考2サイトも同方式)
   中・小カテゴリへの導線はカテゴリ一覧ページ側で提供する */
.gj-sideCat__child {
    display: none;
    margin: 0;
    padding: 0 0 4px 14px;
    list-style: none;
}

.gj-sideCat__child .gj-sideCat__item {
    border-bottom: none;
}

.gj-sideCat__child .gj-sideCat__item > a {
    padding: 6px 4px;
    font-size: 12px;
    color: #555;
}

/* 営業日カレンダー */
.ec-layoutRole__left .ec-calendar {
    display: block;
    margin-top: 28px;
}

.ec-layoutRole__left .ec-calendar__month {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
    font-size: 12px;
}

.ec-layoutRole__left .ec-calendar__title {
    padding: 6px;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background: #767676;
}

.ec-layoutRole__left .ec-calendar th,
.ec-layoutRole__left .ec-calendar td {
    padding: 5px 0;
    text-align: center;
}

.ec-layoutRole__left .ec-calendar__sun {
    color: var(--gj-red);
}

.ec-layoutRole__left .ec-calendar__sat {
    color: #06c;
}

.ec-layoutRole__left .ec-calendar__holiday {
    color: var(--gj-red);
}

.ec-layoutRole__left .ec-calendar__today {
    color: #fff;
    background: var(--gj-red);
}

/* デフォルトの「今日」装飾(クリーム色の丸)を無効化 */
.ec-layoutRole__left .ec-calendar__today::before {
    display: none;
}

/* 日曜=赤 / 土曜=青(オーバーライドしたcalendar.twigが付与するクラス) */
.ec-layoutRole__left .gj-cal-sun {
    color: var(--gj-red);
}

.ec-layoutRole__left .gj-cal-sat {
    color: #06c;
}

/* サイドバー内カレンダーの見出し(CALENDAR)は非表示、注記は残す */
.ec-layoutRole__left .ec-secHeading {
    display: none;
}

/* トップスライダー */
.slick-slider {
    margin-bottom: 24px;
}

.slick-dots {
    position: absolute;
    bottom: -22px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    content: " ";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    opacity: .3;
    background-color: var(--gj-black);
    border-radius: 50%;
}

.slick-dots li.slick-active button:before {
    opacity: .85;
}

/* --------------------------------------------------------------------------
   新着情報(トップ): 日付+タイトルのハアライン区切りリスト
   -------------------------------------------------------------------------- */
.gj-news {
    padding: 4px 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--gj-border);
}

.gj-news .ec-newsRole__news {
    padding: 0;
    border: none;
}

.gj-news .ec-newsRole__newsItem {
    padding: 5px 0;
    margin-bottom: 0;
    border-bottom: none;
}

.gj-news .ec-newsRole__newsHeading {
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

.gj-news .ec-newsRole__newsDate {
    flex-shrink: 0;
    width: 90px;
    font-size: 12px;
    color: var(--gj-muted);
}

.gj-news .ec-newsRole__newsColumn {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: baseline;
}

.gj-news .ec-newsRole__newsTitle {
    margin: 0;
    font-size: 13px;
    font-weight: normal;
    color: var(--gj-text);
}

.gj-news .ec-newsRole__newsDescription {
    padding: 8px 0 8px 90px;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   セクション見出し + 商品カードグリッド(NEW ARRIVAL等)
   -------------------------------------------------------------------------- */
.gj-section {
    padding: 8px 0 26px;
}

.gj-section__heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 16px 0 20px;
}

.gj-section__en {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--gj-black);
    line-height: 1.2;
}

.gj-section__ja {
    font-size: 13px;
    color: var(--gj-text);
}

.gj-section__more {
    margin-left: auto;
    font-size: 12px;
    color: var(--gj-muted);
    text-decoration: none;
}

.gj-section__more:hover {
    text-decoration: underline;
}

.gj-section__more i {
    margin-left: 4px;
    font-size: 10px;
}

.gj-productGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 20px;
}

@media only screen and (max-width: 767px) {
    .gj-productGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
}

.gj-productGrid__item a {
    display: block;
    color: var(--gj-text);
    text-decoration: none;
}

.gj-productGrid__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f6f6;
}

.gj-productGrid__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gj-productGrid__title {
    margin: 10px 0 6px;
    font-size: 13px;
    line-height: 1.5;
}

.gj-productGrid__price {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-productGrid__tax {
    font-size: 11px;
    font-weight: normal;
}

.gj-productGrid__btn {
    display: block;
    margin-top: 10px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: var(--gj-black);
    transition: background .2s;
}

.gj-productGrid__item a:hover .gj-productGrid__btn {
    background: #444;
}

/* --------------------------------------------------------------------------
   ポイント制の価格表示(参考価格/最大利用ポイント/差額)
   -------------------------------------------------------------------------- */
.gj-pointPrice__reference {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--gj-muted);
}

.gj-pointPrice__reference .price01-default {
    text-decoration: line-through;
}

.gj-pointPrice__point {
    margin: 2px 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-pointPrice__diff {
    margin: 2px 0 6px;
    font-size: 15px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-pointPrice__diffLabel {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: normal;
    color: #fff;
    background: #333;
    vertical-align: 2px;
}

.gj-pointPrice__tax {
    font-size: 11px;
    font-weight: normal;
}

/* マイページ: ポイント通帳 */
.gj-pointHistory__balance {
    font-size: 15px;
    font-weight: bold;
}

.gj-pointHistory__balance span {
    color: var(--gj-red);
    font-size: 18px;
}

.gj-pointHistory__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.gj-pointHistory__table th,
.gj-pointHistory__table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--gj-border);
    text-align: left;
}

.gj-pointHistory__table thead th {
    border-bottom: 2px solid #333;
    font-size: 12px;
}

.gj-pointHistory__num {
    text-align: right !important;
    white-space: nowrap;
}

.gj-pointHistory__num.is-plus {
    color: var(--gj-red);
    font-weight: bold;
}

.gj-pointHistory__reason {
    display: block;
    font-size: 11px;
    color: var(--gj-muted);
}

/* 購入手続き: ポイント自動充当の表示 */
.gj-autoPoint__use {
    font-size: 15px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-autoPoint__shortage {
    font-size: 13px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-autoPoint__note {
    font-size: 12px;
    color: var(--gj-muted);
}

/* 商品詳細ページ用(少し大きめ) */
.gj-pointPriceDetail__reference .price01-default {
    text-decoration: line-through;
}

.gj-pointPriceDetail__point {
    margin: 6px 0;
    font-size: 15px;
    font-weight: bold;
    color: var(--gj-red);
}

.gj-pointPriceDetail__point .gj-point-value {
    font-size: 20px;
}

/* --------------------------------------------------------------------------
   トップ: 特集バナー / ランキング (#30)
   -------------------------------------------------------------------------- */
.gj-topBanners__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media only screen and (max-width: 767px) {
    .gj-topBanners__grid {
        grid-template-columns: 1fr;
    }
}

.gj-topBanners__item {
    display: block;
    overflow: hidden;
}

.gj-topBanners__item img {
    width: 100%;
    height: auto;
    transition: opacity .2s;
}

.gj-topBanners__item:hover img {
    opacity: .85;
}

.gj-rankItem {
    position: relative;
}

.gj-rankItem__badge {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: #9e9e9e;
    border-radius: 50%;
}

.gj-rankItem__badge--1 { background: #c9a227; }
.gj-rankItem__badge--2 { background: #8e9aa5; }
.gj-rankItem__badge--3 { background: #a9714b; }

/* --------------------------------------------------------------------------
   ボタン/価格の全体トーン(商品一覧・詳細・カート等にも波及)
   -------------------------------------------------------------------------- */
.ec-blockBtn--action,
.ec-inlineBtn--action {
    background-color: var(--gj-black);
    border-color: var(--gj-black);
    border-radius: 0;
}

.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus {
    background-color: #444;
    border-color: #444;
}

.ec-blockBtn,
.ec-inlineBtn {
    border-radius: 0;
}

/* 価格の赤アクセント(一覧: price02-default / 詳細: ec-price__price) */
.price02-default,
.ec-price .ec-price__price {
    color: var(--gj-red);
    font-weight: bold;
}

.ec-price .ec-price__tax {
    color: var(--gj-red);
}

/* --------------------------------------------------------------------------
   SERVICEセクション / フッター多カラム (#33)
   -------------------------------------------------------------------------- */
.gj-serviceCards__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media only screen and (max-width: 767px) {
    .gj-serviceCards__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gj-serviceCards__list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 10px;
    border: 1px solid var(--gj-border);
    color: var(--gj-text);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: border-color .2s;
}

.gj-serviceCards__list a:hover {
    border-color: var(--gj-black);
}

.gj-serviceCards__list i {
    font-size: 28px;
    color: var(--gj-black);
}

.gj-footerCols {
    align-items: flex-start;
}

.gj-footerCols__col {
    min-width: 150px;
}

.gj-footerCols__brand {
    max-width: 260px;
}

.gj-footerCols__brand .ec-footerInfo {
    margin-top: 12px;
    text-align: left;
}

.gj-footerCols__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}

.gj-footerCols__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gj-footerCols__list a {
    display: block;
    padding: 3px 0;
    font-size: 12px;
    color: #bbb;
    text-decoration: none;
}

.gj-footerCols__list a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   トップ: ABOUT MARCHE
   -------------------------------------------------------------------------- */
.gj-homeAbout {
    padding: 8px 0 34px;
}

.gj-homeAbout__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.gj-homeAbout__grid a {
    position: relative;
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    padding: 18px 42px 18px 18px;
    color: var(--gj-black);
    border: 1px solid var(--gj-border);
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}

.gj-homeAbout__grid a:hover {
    background: #fafafa;
    border-color: var(--gj-black);
}

.gj-homeAbout__label {
    margin-bottom: 8px;
    color: var(--gj-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.gj-homeAbout__grid strong {
    font-size: 14px;
    font-weight: 700;
}

.gj-homeAbout__grid i {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   フッター: ダーク3ゾーン(ショップ名 / リンク / コピーライト・住所)
   -------------------------------------------------------------------------- */
.ec-footerRole {
    margin-top: 60px;
    padding: 40px 0;
    background: var(--gj-footer-bg);
    border-top: none;
}

.ec-footerRole__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

.ec-footerTitle__logo a {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.ec-footerNavi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ec-footerNavi .ec-footerNavi__link {
    display: block;
    margin: 0;
}

.ec-footerNavi .ec-footerNavi__link a {
    display: block;
    padding: 0;
    font-size: 13px;
    color: #ddd;
    text-decoration: none;
}

.ec-footerNavi .ec-footerNavi__link a:hover {
    text-decoration: underline;
}

.ec-footerInfo {
    font-size: 12px;
    line-height: 1.9;
    color: #aaa;
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .ec-footerRole__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ec-footerInfo {
        text-align: left;
    }
}

/* ==== #34 商品一覧マルシェ化 ==== */

/* パンくず */
.gj-topicpath {
    border: none;
    padding: 8px 0;
    font-size: 12px;
}

.gj-topicpath .ec-topicpath__divider {
    color: #999;
}

/* カテゴリタイトル+子カテゴリチップ */
.gj-catHead {
    margin: 4px 0 16px;
}

.gj-catHead__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: 0.05em;
}

.gj-catChips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
}

.gj-catChips a {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid #111;
    border-radius: 18px;
    font-size: 12px;
    color: #111;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.gj-catChips a:hover {
    background: #111;
    color: #fff;
}

/* 商品カード */
.product_page .ec-shelfGrid__item {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 12px 12px 16px;
    margin-bottom: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.product_page .ec-shelfGrid__item-image {
    background: #f7f7f5;
    margin-bottom: 10px;
}

.product_page .ec-shelfGrid__item .ec-productRole__btn {
    margin-top: auto;
}

.product_page .ec-shelfGrid__item .ec-blockBtn--action {
    background: #111;
    border-color: #111;
    border-radius: 3px;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

.product_page .ec-shelfGrid__item .ec-blockBtn--action:hover:not(:disabled) {
    opacity: 0.75;
}

/* 丸ページネーション */
.ec-pagerRole .ec-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.ec-pagerRole .ec-pager__item,
.ec-pagerRole .ec-pager__item--active {
    margin: 0;
}

.ec-pagerRole .ec-pager__item a,
.ec-pagerRole .ec-pager__item--active a {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    color: #111;
    font-size: 13px;
    text-decoration: none;
    background: #fff;
}

.ec-pagerRole .ec-pager__item a:hover {
    border-color: #111;
}

.ec-pagerRole .ec-pager__item--active a {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* サイドバー: カテゴリ件数 */
.gj-sideCat__count {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
}

/* ==== #36 人気ランキングページ ==== */

.gj-rankTabs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
}

.gj-rankTabs a {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #111;
    border-radius: 20px;
    font-size: 13px;
    color: #111;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.gj-rankTabs a:hover,
.gj-rankTabs li.is-active a {
    background: #111;
    color: #fff;
}

.gj-rankEmpty {
    padding: 40px 0;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* ==== #35 商品詳細マルシェ化 ==== */

.gj-productSections {
    margin: 48px 0 24px;
}

.gj-productSection {
    margin-bottom: 40px;
}

.gj-productSection__body {
    font-size: 14px;
    line-height: 2;
    color: #333;
}

.gj-specTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.gj-specTable th,
.gj-specTable td {
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}

.gj-specTable th {
    background: #f7f7f5;
    width: 180px;
    font-weight: 600;
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .gj-specTable th {
        width: 110px;
        white-space: normal;
    }
}

.gj-detailRanking {
    margin-top: 24px;
}

/* サイドバー: 価格帯検索 */
.gj-sideSearch__price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gj-sideSearch__price input {
    width: 80px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

.gj-sideSearch__priceSep,
.gj-sideSearch__priceUnit {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .ec-layoutRole__header {
        padding: 0;
    }

    .ec-layoutRole__header .ec-headerRole {
        grid-column: 1;
        grid-row: 1;
    }

    .ec-layoutRole__header .ec-headerNaviRole {
        grid-column: 2;
        grid-row: 1;
        width: auto;
    }

    .ec-layoutRole__header .ec-headerNaviRole__left {
        order: 2;
    }

    .ec-layoutRole__header .ec-headerNaviRole__right {
        order: 1;
    }

    .ec-layoutRole__header .ec-headerNaviRole__nav {
        display: none;
    }

    .ec-layoutRole__header .ec-headerRole__navSP {
        display: block;
    }

    .ec-layoutRole__header .ec-headerRole__navSP .ec-headerNavSP {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--gj-border);
        color: var(--gj-black);
    }

    .ec-layoutRole__header .ec-headerRole__navSP .ec-headerNavSP i {
        font-size: 17px;
    }

    .ec-layoutRole__header .ec-headerRole__cart {
        margin-left: 0;
    }

    .ec-layoutRole__header .ec-cartNavi {
        min-width: 38px;
    }

    .ec-layoutRole__header .ec-cartNavi__label {
        display: none;
    }

    .gj-headerSearch__meta {
        display: none;
    }

    .gj-megaMenu {
        display: none;
    }

    .gj-homeHero {
        padding: 0;
    }

    .main_visual img {
        aspect-ratio: 750 / 820;
    }

    .main-visual__arrow {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .main-visual__arrow--prev {
        left: 8px;
    }

    .main-visual__arrow--next {
        right: 8px;
    }

    .gj-homeAbout__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gj-homeAbout__grid a {
        min-height: 96px;
        padding: 14px 32px 14px 12px;
    }

}

/* ===== RECOMMEND & NEWS ダイジェスト(トップ) ===== */
.gj-recommendNews__products {
    margin-bottom: 18px;
}

.gj-newsDigest {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
}

.gj-newsDigest__item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 10px 4px;
    border-bottom: 1px solid #eee;
}

.gj-newsDigest__date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.gj-newsDigest__title {
    font-size: 13px;
    color: #333;
    text-decoration: none;
}

.gj-newsDigest__title:hover {
    text-decoration: underline;
}

/* ===== ヘッダー2段構成(参考サイト再現・front-design.md) ===== */
.gj-header {
    background: #fff;
}

.gj-header__top {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 20px 10px;
}

.gj-header__logo {
    flex: 0 0 auto;
}

.gj-header__top .gj-headerSearch {
    flex: 1 1 auto;
    max-width: 640px;
    margin: 0 auto;
}

.gj-header__siteSwitch {
    flex: 0 0 160px; /* さくら⇔まもーる相互リンク枠(REQ-029確定後に実装) */
}

.gj-popularWords {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 0;
}

.gj-popularWords dt {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
}

.gj-popularWords dd {
    margin: 0;
}

.gj-popularWords ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
}

.gj-popularWords a {
    font-size: 11.5px;
    color: #7a8a5a;
    text-decoration: none;
}

.gj-popularWords a:hover {
    text-decoration: underline;
}

.gj-header__nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.gj-header__nav.is-fixed {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.gj-header__navInner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 48px;
}

.gj-header__navLogo {
    display: none;
    flex: 0 0 auto;
}

.gj-header__nav.is-fixed .gj-header__navLogo {
    display: block;
}

.gj-header__navLogo img {
    max-height: 32px;
    width: auto;
}

.gj-header__navLogoPlaceholder {
    display: inline-block;
    width: 90px;
    height: 28px;
    background: #f1f1ef;
    border-radius: 4px;
}

.gj-header__navInner .gj-megaMenu {
    flex: 0 1 auto;
    border: none;
}

.gj-headerNavMenu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.gj-headerNavMenu a {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.gj-headerNavMenu a:hover {
    color: #7a8a5a;
}

.gj-headerNavRight {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.gj-headerLogin {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.gj-headerLogin__name {
    font-size: 12px;
    color: #666;
}

.gj-headerLogin__btn {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #7a8a5a;
    border-radius: 4px;
    padding: 5px 12px;
    text-decoration: none;
}

.gj-headerLogin__btn:hover {
    background: #64744a;
    color: #fff;
}

.gj-header__registerBtn {
    display: none;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #7a8a5a;
    border-radius: 4px;
    padding: 5px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.gj-header__nav.is-fixed .gj-headerLogin {
    display: none;
}

.gj-header__nav.is-fixed .gj-header__registerBtn {
    display: inline-block;
}

.gj-headerIcons {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.gj-headerIcons li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}

.gj-headerIcons li a i {
    font-size: 17px;
}

.gj-headerIcons li a:hover {
    color: #7a8a5a;
}

.gj-headerIcons__cart .ec-cartNavi {
    padding: 0;
}

@media only screen and (max-width: 767px) {
    .gj-header__top {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px 8px;
    }

    .gj-header__siteSwitch {
        display: none;
    }

    .gj-header__top .gj-headerSearch {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .gj-popularWords {
        display: none;
    }

    .gj-header__navInner {
        gap: 10px;
        padding: 0 12px;
    }

    .gj-headerNavMenu,
    .gj-headerLogin {
        display: none;
    }
}

/* ===== ヘッダー2段構成: 行内調整(グリッド廃止後) ===== */
.gj-header__spNav {
    display: none;
}

.gj-header__navInner .gj-megaMenu {
    width: auto;
    min-width: 0;
    margin: 0;
    border: none;
}

.gj-header__navInner .gj-megaMenu__nav {
    flex-wrap: nowrap;
}

.gj-header__navInner .gj-megaMenu__item > a {
    padding: 14px 9px;
    font-size: 12.5px;
}

.gj-headerNavMenu {
    gap: 12px;
}

.gj-headerNavMenu a {
    font-size: 12.5px;
}

@media only screen and (max-width: 1420px) {
    .gj-headerLogin__name {
        display: none;
    }

    .gj-headerIcons li a span {
        display: none;
    }

    .gj-headerIcons li a i {
        font-size: 19px;
    }
}

@media only screen and (max-width: 767px) {
    .gj-header__spNav {
        display: block;
    }

    .gj-header__spNav .ec-headerNavSP {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--gj-border);
        color: var(--gj-black);
    }

    .gj-header__spNav .ec-headerNavSP i {
        font-size: 17px;
    }

    .gj-header__navInner .gj-megaMenu {
        display: none;
    }

    .gj-headerIcons li a span {
        display: none;
    }
}

/* ===== ヘッダー下段: カテゴリ列とナビの重なり防止 ===== */
/* カテゴリ列は残り幅を使い、収まらない分は内部横スクロール(バー非表示)。右側の固まりは常に確保 */
.gj-header__navInner .gj-megaMenu {
    flex: 1 1 auto;
    overflow: visible;
}

.gj-header__navInner .gj-megaMenu__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.gj-header__navInner .gj-megaMenu__nav::-webkit-scrollbar {
    display: none;
}

.gj-headerNavMenu,
.gj-headerNavRight {
    flex: 0 0 auto;
}

/* ロゴ未設定時はテキストロゴを表示(ブランド差し替えまでの仮) */
.gj-brand--placeholder {
    min-width: 0;
}

.gj-brand__text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--gj-black);
    white-space: nowrap;
}

.gj-header__navLogoText {
    font-size: 15px;
    font-weight: 800;
    color: var(--gj-black);
    white-space: nowrap;
}

/* ===== ヘッダー下段: スクロール追従(fixed方式) =====
   position:stickyは親(.gj-header)の高さ内でしか効かないため、fixedで実装 */
.gj-header__nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* ===== ヘッダー3段構成(参考サイト正確再現) =====
   2段目=薄グレー帯(メニュー/会員/アイコン)、3段目=黒帯カテゴリ。
   スクロール固定時は2段目が1行に収束(小ロゴ+カテゴリ一覧DD+メニュー+会員登録+アイコン)。 */

/* --- 1段目: 検索まわり --- */
.gj-headerSearch__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.gj-headerSearch__row form {
    flex: 1 1 auto;
}

.gj-headerSearch__detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--gj-border);
    background: #fff;
    font-size: 12.5px;
    color: var(--gj-text);
    text-decoration: none;
    white-space: nowrap;
}

.gj-headerSearch__detail:hover {
    border-color: var(--gj-black);
}

.gj-popularWords a {
    display: inline-block;
    padding: 1px 12px;
    border: 1px solid #ccc;
    border-radius: 999px;
    font-size: 11.5px;
    color: #555;
    text-decoration: none;
}

.gj-popularWords a:hover {
    border-color: var(--gj-black);
    color: var(--gj-black);
    text-decoration: none;
}

/* --- 2段目: メニュー帯 --- */
.gj-header__menuRow {
    background: #f6f6f6;
    border-top: 1px solid #eee;
}

.gj-header__menuRowInner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 46px;
}

.gj-headerNavMenu li {
    display: flex;
    align-items: center;
}

.gj-headerNavMenu li + li {
    border-left: 1px solid #ccc;
    padding-left: 14px;
}

.gj-headerNavMenu a {
    font-size: 13px;
}

.gj-headerLogin__sub {
    background: #8d7b5c;
}

.gj-headerLogin__sub:hover {
    background: #77684e;
}

/* --- カテゴリ一覧ドロップダウン(固定時のみ表示) --- */
.gj-headerCatAll {
    position: relative;
    display: none;
}

.gj-headerCatAll__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gj-text);
    cursor: pointer;
    padding: 12px 0;
}

.gj-headerCatAll__panel {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 110;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--gj-border);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .10);
}

.gj-headerCatAll:hover .gj-headerCatAll__panel {
    display: block;
}

.gj-headerCatAll__panel a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    color: var(--gj-text);
    text-decoration: none;
}

.gj-headerCatAll__panel a:hover {
    background: #f5f5f5;
    color: var(--gj-red);
}

/* --- 3段目: 黒帯カテゴリ --- */
.gj-header__catRow {
    position: relative;
    background: #1a1a1a;
}

.gj-header__catRow .gj-megaMenu {
    width: auto;
    margin: 0;
    border: none;
}

.gj-header__catRow .gj-megaMenu__nav {
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.gj-header__catRow .gj-megaMenu__nav::-webkit-scrollbar {
    display: none;
}

.gj-header__catRow .gj-megaMenu__item {
    flex: 1 0 auto;
    border-left: 1px solid #3a3a3a;
}

.gj-header__catRow .gj-megaMenu__item:last-child {
    border-right: 1px solid #3a3a3a;
}

.gj-header__catRow .gj-megaMenu__item > a {
    padding: 14px 16px;
    font-size: 13px;
    color: #fff;
    text-align: center;
}

.gj-header__catRow .gj-megaMenu__item:first-child > a {
    padding-left: 16px;
}

.gj-header__catRow .gj-megaMenu__item:hover {
    background: #3a3a3a;
}

.gj-header__catRow .gj-megaMenu__item:hover > a {
    color: #fff;
}

/* --- スクロール固定時: 2段目が1行に収束 --- */
.gj-header.is-fixed .gj-header__menuRow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.gj-header.is-fixed .gj-header__catRow {
    display: none;
}

.gj-header.is-fixed .gj-header__navLogo,
.gj-header.is-fixed .gj-headerCatAll {
    display: block;
}

.gj-header.is-fixed .gj-headerLogin__name,
.gj-header.is-fixed .gj-headerLogin__sub {
    display: none;
}

@media only screen and (max-width: 767px) {
    .gj-header__catRow {
        display: none;
    }

    .gj-header__menuRowInner {
        gap: 10px;
        padding: 0 12px;
        min-height: 44px;
    }
}

/* 固定バーはスライドインで滑らかに出す */
.gj-header.is-fixed .gj-header__menuRow {
    animation: gjHeaderSlideDown .18s ease-out;
}

@keyframes gjHeaderSlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ===== 商品一覧: 公式合わせ(サイドバー+カード) ===== */
.gj-plist {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    max-width: 1280px;
    margin: 24px auto 0;
    padding: 0 20px;
}

.gj-plist__side {
    flex: 0 0 240px;
    min-width: 0;
}

.gj-plist__main {
    flex: 1 1 auto;
    min-width: 0;
}

.gj-sideCount {
    border: 1px solid var(--gj-border);
    text-align: center;
    padding: 18px 10px;
    margin-bottom: 22px;
}

.gj-sideCount__label {
    display: block;
    font-size: 12px;
    color: var(--gj-text);
    margin-bottom: 4px;
}

.gj-sideCount__num {
    font-size: 26px;
    font-weight: 800;
}

.gj-sideCount__unit {
    font-size: 12px;
    margin-left: 4px;
}

.gj-sideHeading {
    font-size: 14px;
    font-weight: 800;
    color: #8d7b5c;
    border-bottom: 2px solid #8d7b5c;
    padding-bottom: 8px;
    margin: 0 0 14px;
}

.gj-sideGroup {
    margin-bottom: 24px;
}

.gj-sideGroup__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
}

.gj-condList {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gj-condList a {
    display: inline-block;
    border: 1px solid var(--gj-border);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    color: var(--gj-text);
    text-decoration: none;
}

.gj-condList a:hover {
    border-color: var(--gj-black);
}

.gj-condClear {
    font-size: 11.5px;
    color: #888;
    text-decoration: none;
}

.gj-condClear:hover {
    color: var(--gj-red);
}

.gj-catTree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.gj-catTree ul {
    list-style: none;
    margin: 0;
    padding-left: 14px;
}

.gj-catTree li {
    padding: 4px 0;
}

.gj-catTree a {
    color: var(--gj-text);
    text-decoration: none;
}

.gj-catTree a:hover {
    color: var(--gj-red);
}

.gj-catTree a.is-active {
    color: var(--gj-red);
    font-weight: 700;
}

.gj-catTree__count {
    font-size: 11px;
    color: #999;
    margin-left: 4px;
}

.gj-priceBands {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 13px;
}

.gj-priceBands li {
    padding: 4px 0;
}

.gj-priceBands a {
    color: var(--gj-text);
    text-decoration: none;
}

.gj-priceBands a:hover,
.gj-priceBands a.is-active {
    color: var(--gj-red);
}

.gj-priceBands a.is-active {
    font-weight: 700;
}

.gj-priceInput__row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 8px;
}

.gj-priceInput__row input {
    width: 76px;
    padding: 6px 8px;
    border: 1px solid var(--gj-border);
    font-size: 12px;
}

.gj-priceInput button {
    width: 100%;
    padding: 8px 0;
    font-size: 12.5px;
    border: 1px solid var(--gj-border);
    background: #f2f2f2;
    border-radius: 999px;
    cursor: pointer;
}

.gj-priceInput button:hover {
    background: #e8e8e8;
}

.gj-condBar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #f5f5f5;
    padding: 12px 16px;
    margin: 0 0 8px;
}

.gj-condBar__chip {
    display: inline-block;
    background: #8d7b5c;
    color: #fff;
    font-size: 12px;
    padding: 5px 14px;
    text-decoration: none;
}

.gj-condBar__chip:hover {
    background: #77684e;
    color: #fff;
}

.gj-plistToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 6px;
}

.gj-plistToolbar__label {
    font-size: 12.5px;
    margin-right: 6px;
}

.gj-plistCard {
    position: relative;
}

.gj-plistCard__name {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 6px;
}

.gj-plistCard__soldout {
    display: inline-block;
    background: #999;
    color: #fff;
    font-size: 11px;
    padding: 2px 10px;
    margin-top: 6px;
}

/* 一覧内RANKING帯: ブロックのec-roleの余白を詰める */
.gj-plist__main .ec-role {
    padding: 0;
    margin: 0 0 10px;
}

@media only screen and (max-width: 767px) {
    .gj-plist {
        display: block;
        padding: 0 12px;
    }

    .gj-plist__side {
        display: none;
    }
}

/* 一覧カード画像の保険(コアの.ec-shelfRoleスコープに依存しない) */
.gj-plistGrid .ec-shelfGrid__item-image img {
    width: 100%;
    height: auto;
}

.gj-plist__main .ec-shelfRole {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* ===== 商品詳細: 公式合わせ ===== */
.gj-detailCrumb {
    margin: 18px 0 14px;
}

.gj-sellingPoints {
    border: 1px solid var(--gj-border);
    padding: 18px 22px;
    margin: 0 0 26px;
}

.gj-sellingPoints__title {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--gj-border);
}

.gj-sellingPoints__badge {
    display: inline-block;
    background: var(--gj-black);
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
    margin-left: 6px;
    transform: rotate(-2deg);
}

.gj-sellingPoints__body {
    font-size: 14px;
    font-weight: 700;
    line-height: 2;
}

.gj-stockLine {
    font-size: 13px;
    margin: 14px 0 10px;
}

.gj-stockLine__in {
    color: var(--gj-red);
    font-weight: 700;
}

.gj-stockLine__out {
    color: #888;
    font-weight: 700;
}

/* 数量とカートボタンを横並びに(参考サイトの購入列) */
.ec-productRole #form1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.ec-productRole #form1 .ec-productRole__actions {
    margin: 0;
}

.ec-productRole #form1 .ec-productRole__btn {
    margin: 0;
    flex: 1 1 220px;
}

.gj-detailLinks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 13px;
}

.gj-detailLinks a {
    color: var(--gj-text);
    text-decoration: none;
}

.gj-detailLinks a:hover {
    color: var(--gj-red);
}

.gj-detailLinks__share {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 12px;
}

.gj-detailLinks__share a {
    font-size: 15px;
}

/* 下部固定の購入バー */
.gj-buyBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #fff;
    border-top: 1px solid var(--gj-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
}

.gj-buyBar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
}

.gj-buyBar__info {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
}

.gj-buyBar__name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.gj-buyBar__price {
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.gj-buyBar__tax {
    font-size: 11px;
    font-weight: 400;
    color: #888;
}

.gj-buyBar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gj-buyBar__qty {
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gj-buyBar__qty input {
    width: 64px;
    padding: 8px;
    border: 1px solid var(--gj-border);
    text-align: center;
}

.gj-buyBar__cart {
    background: var(--gj-black);
    color: #fff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 36px;
    border-radius: 3px;
    cursor: pointer;
}

.gj-buyBar__cart:hover {
    background: #333;
}

@media only screen and (max-width: 767px) {
    .gj-buyBar__name {
        display: none;
    }
}

/* ==== #64 コラム(読み物) ==== */

.gj-columnGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    margin-top: 20px;
}

@media only screen and (max-width: 767px) {
    .gj-columnGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
}

.gj-columnCard {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gj-columnCard:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.gj-columnCard__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: #f4f4f4;
    margin-bottom: 10px;
}

.gj-columnCard__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gj-columnCard__noimage {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 12px, #ececec 12px, #ececec 24px);
}

.gj-columnCard__date {
    font-size: 11px;
    color: #999;
    margin: 0 0 4px;
}

.gj-columnCard__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 6px;
}

.gj-columnCard__excerpt {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.gj-columnPager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
    font-size: 13px;
}

.gj-columnPager__link {
    color: var(--gj-black);
    text-decoration: underline;
}

.gj-columnEmpty {
    text-align: center;
    color: #999;
    padding: 48px 0;
}

.gj-columnDetail {
    max-width: 760px;
    margin: 0 auto;
}

.gj-columnDetail__date {
    font-size: 12px;
    color: #999;
    margin: 16px 0 6px;
}

.gj-columnDetail__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 20px;
}

.gj-columnDetail__eyecatch {
    margin: 0 0 24px;
}

.gj-columnDetail__eyecatch img {
    width: 100%;
    border-radius: 4px;
}

.gj-columnDetail__body {
    font-size: 15px;
    line-height: 1.9;
}

.gj-columnDetail__body img {
    max-width: 100%;
    height: auto;
}

.gj-columnDetail__body h2 {
    font-size: 20px;
    font-weight: 700;
    border-left: 4px solid var(--gj-black);
    padding-left: 12px;
    margin: 32px 0 14px;
}

.gj-columnDetail__body h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 26px 0 10px;
}

.gj-columnDetail__back {
    text-align: center;
    margin: 40px 0 20px;
}

/* ==== デバッグモードバナー非表示 ====
   ローカル開発(APP_DEBUG=1)で毎ページ先頭に出る赤帯を消す。
   pre/本番は APP_DEBUG=0 のため元々表示されない */
.ec-debugModeAlert {
    display: none;
}

/* ==== #69 Phase2: item集約表示 ==== */

/* 一覧カード: 賞味期限・バリエーション */
.gj-plistCard__expiry {
    font-size: 11px;
    color: #b45309;
    margin: 2px 0 0;
}

.gj-plistCard__variations {
    font-size: 11px;
    color: #666;
    margin: 2px 0 0;
}

/* 詳細: 賞味期限行 */
.gj-expiryLine {
    font-size: 13px;
    margin: 6px 0 0;
}

.gj-expiryLine__date {
    font-weight: 700;
    color: #b45309;
}

/* 詳細: 入数・ロット選択カード */
.gj-itemLineup {
    margin: 14px 0 4px;
}

.gj-itemLineup__title {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px;
}

.gj-itemLineup__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gj-itemLineup__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 128px;
    padding: 10px 12px;
    border: 1px solid var(--gj-border);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    position: relative;
}

.gj-itemLineup__card:hover {
    border-color: var(--gj-black);
    color: inherit;
    text-decoration: none;
}

.gj-itemLineup__card.is-current {
    border: 2px solid var(--gj-black);
}

.gj-itemLineup__unit {
    font-size: 13px;
    font-weight: 700;
}

.gj-itemLineup__expiry {
    font-size: 10.5px;
    color: #b45309;
}

.gj-itemLineup__price {
    font-size: 12.5px;
    font-weight: 700;
}

.gj-itemLineup__soldout {
    font-size: 10.5px;
    color: #c0392b;
    font-weight: 700;
}