/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   ヘッダー: ロゴ左 + アイコンメニュー右 の1段構成
   (ロゴブロックとヘッダーナビブロックを flex で横並びにする)
   -------------------------------------------------------------------------- */
.ec-layoutRole__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1150px;
    width: 100%;
    margin: 0 auto;
    padding: 14px 20px;
    background: #fff;
}

.ec-layoutRole__header .ec-headerRole {
    order: 1;
    width: auto;
    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 {
    order: 2;
    width: auto;
    padding: 0;
}

.ec-headerRole__title .ec-headerTitle .ec-headerTitle__title h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .05em;
}

.ec-headerTitle .ec-headerTitle__title a {
    color: var(--gj-black);
}

.ec-headerTitle .ec-headerTitle__title a:hover {
    opacity: .7;
    text-decoration: none;
}

/* アイコンメニュー(マイページ/お気に入り/ログイン系): アイコンの下に小ラベル */
.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);
}

/* カートナビ: アイコン+「カート」ラベル */
.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-sliderRole {
    position: relative;
    padding: 0 20px;
}

.main_visual {
    position: relative;
}

.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 {
    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-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;
}

.gj-sideCat__child {
    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;
}

/* --------------------------------------------------------------------------
   新着情報(トップ): 日付+タイトルのハアライン区切りリスト
   -------------------------------------------------------------------------- */
.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-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;
}

/* --------------------------------------------------------------------------
   ボタン/価格の全体トーン(商品一覧・詳細・カート等にも波及)
   -------------------------------------------------------------------------- */
.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);
}

/* --------------------------------------------------------------------------
   フッター: ダーク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;
    }
}