/* =============================================
   1. 共通パーツ・モーダル
============================================= */
.modal { 
    position: fixed; 
    background: #FFF; 
    display: none; 
    z-index: 9999; 
    top: 40%; 
    left: 50%; 
    width: 650px; 
    height: 350px; 
    margin: -116px 0 0 -321px; 
    padding: 20px; 
    text-align: center; 
    font-size: 13px; 
    border: 1px solid; 
    border-radius: 10px; 
}
.modal img { vertical-align: bottom; }
.modal p { margin-bottom: 10px; }
.modal a { cursor: pointer; }

/* =============================================
   2. ヘッダーSEO帯（ブラック背景）
============================================= */
.header-seo-bar {
    background-color: #000000 !important; /* 背景を真っ黒に */
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    display: block !important;
}

.header-seo-container {
    max-width: 1200px; /* サイトの最大幅に合わせる */
    margin: 0 auto;
    padding: 0 20px;
}

.header-seo-text {
    color: #ffffff !important;   /* 文字色を白に */
    font-size: 11px !important;  /* テキストサイズ */
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    text-align: left;
    /* 長い場合に一行で省略表示する設定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================
   3. ロゴエリアの調整
============================================= */
/* 帯と分離したので、ロゴ画像自体の余白を調整 */
.logo-text-h1, .logo-text-sub {
    margin: 10px 0;
}

.logo-text-h1 img, .logo-text-sub img {
    height: 80px; 
    width: auto;
    vertical-align: middle;
}

/* =============================================
   4. 商品詳細・カテゴリ・パンくず
============================================= */
/* 商品説明のH3カスタムデザイン */
h3.product_headword {
    font-size: 17px !important;
    font-weight: bold !important;
    color: #333 !important;
    padding: 8px 12px !important;
    margin: 20px 0 10px 0 !important;
    border-left: 5px solid #ff4500; /* アクセントカラーの縦線 */
    background-color: #f9f9f9;
    line-height: 1.4 !important;
}

/* 子カテゴリリストの装飾 */
.ec-categoryChildList {
    margin: 15px 0 25px 0;
    padding: 10px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
}
.ec-categoryChildList__ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
}
.ec-categoryChildList__li a {
    display: inline-block;
    padding: 6px 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}
.ec-categoryChildList__li a:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* パンくずリスト内のH1調整 */
.ec-topicpath__item h1 {
    display: inline;
    font-size: inherit;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
/* パンくずリスト内の調整（H1を消して h2 にした場合） */
.ec-topicpath__item h2 {
    font-size: inherit; 
    font-weight: bold;
    color: #333;
}
.ec-topicpath__item--active a {
    color: #333;
    text-decoration: none;
    pointer-events: none;
}

/* =============================================
   5. レスポンシブ設定（スマホ表示）
============================================= */
@media screen and (max-width: 768px) {
    /* SEOテキストをスマホで中央寄せにする */
    .header-seo-text {
        font-size: 10px !important;
        text-align: center;
    }
    /* スマホでロゴサイズを少し小さく */
    .logo-text-h1 img, .logo-text-sub img {
        height: 60px;
    }
    /* 商品見出しのサイズ調整 */
    h3.product_headword {
        font-size: 16px !important;
    }
    /* 子カテゴリボタンのサイズ調整 */
    .ec-categoryChildList__li a {
        font-size: 13px;
        padding: 5px 12px;
    }
}
/* =============================================
   6. ヘッダー・コンテンツ間の余白一括調整
============================================= */

/* ① header_seo.twig と logo.twig の間を詰める */
.header-seo-bar {
    margin-bottom: 0 !important;
}

/* ② logo.twig と header.twig の間を詰める */
.ec-headerRole {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.header-underbar {
    margin-bottom: 0 !important;
}

/* ③ header.twig (ec-headerNaviRole) 自体の余白を殺す */
.ec-headerNaviRole {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.ec-headerNaviRole__left,
.ec-headerNaviRole__right,
.ec-headerNaviRole__search,
.ec-headerNaviRole__nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ④ header.twig と #contents_top の間の巨大な隙間を消す */
/* #headerにマイナスマージンをかけて下のコンテンツを吸い上げる */
#header {
    margin-bottom: -35px !important; /* ここの数値で全体の詰まり具合を調整 */
    padding-bottom: 0 !important;
    height: auto !important;
}

/* ⑤ #contents_top (スライダー等) の上余白をゼロにする */
#contents_top, 
.ec-layoutRole__contents {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ⑥ 各ブロック（ec-blockRole）自体の上下マージンを最小化 */
.ec-blockRole {
    margin-top: 0 !important;
    margin-bottom: 15px !important; /* ブロックごとの間隔 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* スマホ版の微調整 */
@media screen and (max-width: 768px) {
    #header {
        margin-bottom: -20px !important;
    }
    .ec-blockRole {
        margin-bottom: 10px !important;
    }
}
/* =============================================
   7. 新着商品　（自動取得）
============================================= */

/* --- 新着商品ブロック全体の余白圧縮 --- */
.ec-newItemRole {
    margin-top: 0 !important;   /* 上のブロックとの隙間をゼロに */
    margin-bottom: 10px !important; /* 下のブロックとの隙間を最小限に */
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

/* 見出し（NEW ITEM）自体の上下余白も圧縮 */
.ec-newItemRole .ec-secHeading--tandem {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
color: #b3426e !important; /* 落ち着いた濃い目のピンク */
}

/* --- MOREボタンのカスタマイズ --- */
.ec-newItemRole .ec-inlineBtn--top {
    background: #b3426e !important; /* 背景を黒からピンクに */
    color: #fff !important;         /* 文字を白に */
    border: none !important;        /* 枠線を消してスッキリ */
    padding: 2px 12px !important;   /* ボタンのサイズ感調整 */
    border-radius: 2px;             /* わずかに角を丸く（お好みで） */
    font-size: 10px !important;
    text-transform: uppercase;
    transition: background 0.3s;
}

/* MOREボタンのホバー時（マウスを乗せた時） */
.ec-newItemRole .ec-inlineBtn--top:hover {
    background: #8e3256 !important; /* 少し暗いピンクにして反応を出す */
    opacity: 1;
}

/* --- （参考）見出しのラインもピンクにする場合 --- */
.ec-newItemRole .ec-secHeading__line {
    background: #eecad5 !important; /* ラインは少し薄めのピンクにすると上品です */
}

/* --- 商品名の文字数制限（2行で省略） --- */
.ec-newItemRole__listItemTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行で制限 */
    overflow: hidden;
    
    /* 行間と高さの固定（価格の位置を揃える） */
    line-height: 1.4;
    height: 2.8em; /* 1.4 × 2行分 */
    
    margin-top: 8px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

/* スマホ版のさらなる微調整 */
@media screen and (max-width: 768px) {
    .ec-newItemRole {
        margin-bottom: 5px !important;
    }
    .ec-newItemRole__listItemTitle {
        font-size: 11px;
        line-height: 1.3;
        height: 2.6em; /* スマホでも2行を維持 */
    }
    /* 商品一つ一つの下の余白も詰める */
    .ec-newItemRole__listItem {
        margin-bottom: 15px !important;
    }
}
/* =============================================
   7. 新着情報
============================================= */
/* --- 新着情報(news.twig)の上の余白を圧縮 --- */

/* ブロック全体の上の余白を削る */
.ec-newsRole {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important; 
    padding-bottom: 10px !important;
}

/* 見出し自体の上の余白と、内側の余白をリセット */
.ec-newsRole .ec-secHeading--tandem {
    margin-top: 5px !important;    /* 前のブロックとの間隔を最小限に */
    padding-top: 0 !important;
}

/* お知らせリストと見出しの間の隙間も少し詰める */
.ec-newsRole .ec-newsRole__list {
    padding-top: 10px !important;
}

/* スマホ版での微調整 */
@media screen and (max-width: 768px) {
    .ec-newsRole {
        margin-top: -10px !important; /* スマホでさらに詰める場合はマイナス値を指定 */
        margin-bottom: 30px !important; /* スマホは少し控えめに */
    }
}
/* =============================================
   8. トピックス
============================================= */
/* --- 特集(topic.twig) 枠内・全体の余白を徹底圧縮 --- */

/* 1. ブロック全体の巨大な上下余白を消す */
.ec-topicRole {
    padding-top: 30px !important;
    padding-bottom: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important; /* 次のブロックとの間隔だけ残す */
    display: block !important;
}

/* 2. 中のコンテナ(ec-role)が持っている余白をリセット */
.ec-topicRole .ec-role {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 3. 見出し(TOPICS)の上下の大きな空白を消す */
.ec-topicRole .ec-secHeading {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 5px !important;    /* 前のブロックとの最低限の隙間 */
    margin-bottom: 10px !important; /* 画像との隙間 */
}

/* 4. 特集の画像と文字を包んでいる「listItem」の枠内余白を消す */
.ec-topicRole .ec-topicRole__listItem {
    padding: 5px !important;  /* 30px近い余白を5pxまで一気に圧縮 */
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* 5. 画像直下のタイトル文字の余白を詰める */
.ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: 5px !important;
    padding: 0 !important;
}
/* =============================================
   9. カテゴリ
============================================= */
/* --- カテゴリ(category.twig) の上下余白を最小化 --- */

/* 1. ブロック全体の上下パディングをリセット */
.ec-categoryRole {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

/* 2. 中のコンテナ(ec-role)が持っている標準の余白を消す */
.ec-categoryRole .ec-role {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 3. 見出し(CATEGORY)の上下の大きな空白を消す */
.ec-categoryRole .ec-secHeading {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 5px !important;    /* 上のブロックとの最低限の隙間 */
    margin-bottom: 10px !important; /* 下の画像リストとの隙間 */
}

/* 4. 見出し内の英語と日本語の間の隙間を詰める */
.ec-categoryRole .ec-secHeading__en {
    margin-bottom: 0 !important;
}

/* 5. 画像リスト自体の上の余白を詰める */
.ec-categoryRole .ec-categoryRole__list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}