/* カスタマイズ用CSS */

body {
    background: #fff !important;
}

/* ============================================
   統合ヘッダー
   ============================================ */

/* ヘッダー全体 */
.ec-headerNaviRole--unified {
    max-width: 1500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #fff;
}

/* 左: ロゴ + ショップ名 */
.ec-headerNaviRole--unified .ec-headerNaviRole__left {
    width: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 中央: 検索 */
.ec-headerNaviRole--unified .ec-headerNaviRole__center {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

/* 右: ナビ + カート */
.ec-headerNaviRole--unified .ec-headerNaviRole__right {
    width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* SP用ナビ（PCでは非表示、SPで表示） */
.ec-headerNaviRole--unified .ec-headerRole__navSP {
    display: none;
}

/* ハンバーガーメニューアイコン: 統合ヘッダー内に配置（PCでは非表示） */
.ec-headerNaviRole--unified .ec-headerNavSP {
    display: none;
}

/* ============================================
   ロゴ
   ============================================ */

.ec-headerLogo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.ec-headerLogo:hover {
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

/* ロゴ画像エリア */
.ec-headerLogo__image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ec-headerLogo__image img {
    width: 300px;
    height: 90px;
    object-fit: contain;
    display: block;
}

/* ショップ名（PCでは非表示） */
.ec-headerLogo__shopname {
    display: none;
}

/* ============================================
   検索バー調整
   ============================================ */

/* 検索バーはEC-CUBEデフォルトを使用 */

/* ============================================
   レスポンシブ対応 (1080px)
   ============================================ */

/* 1080px以下: 2カラムレイアウト */
@media (max-width: 1080px) {
    .ec-headerNaviRole--unified {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 8px 20px;
        align-items: center;
    }

    /* 左カラム: ロゴ（2段分） */
    .ec-headerNaviRole--unified .ec-headerNaviRole__left {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    /* 右カラム上: ナビ */
    .ec-headerNaviRole--unified .ec-headerNaviRole__right {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    /* 右カラム下: 検索（ナビと同じ幅） */
    .ec-headerNaviRole--unified .ec-headerNaviRole__center {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ec-headerNaviRole--unified .ec-headerNaviRole__center .ec-headerSearch {
        width: 60%;
        margin-left: auto;
    }

    .ec-headerNaviRole--unified .ec-headerNaviRole__center .ec-headerSearch form {
        width: 100%;
    }

    .ec-headerLogo__image img {
        width: 300px;
        height: 90px;
    }
}

/* ============================================
   レスポンシブ対応 (880px)
   ============================================ */

/* 880px以下: ロゴ縮小 */
@media (max-width: 880px) {
    .ec-headerLogo__image img {
        width: 230px;
        height: auto;
    }
}

/* ============================================
   レスポンシブ対応 (810px)
   ============================================ */

/* 810px以下: ナビ非表示、ハンバーガー右に表示 */
@media (max-width: 810px) {
    .ec-headerNaviRole--unified {
        display: flex;
        flex-wrap: nowrap;
    }

    /* ナビを非表示（カートは表示） */
    .ec-headerNaviRole--unified .ec-headerNaviRole__nav {
        display: none;
    }

    /* 検索を非表示 */
    .ec-headerNaviRole--unified .ec-headerNaviRole__center {
        display: none;
    }

    /* ロゴ（左） */
    .ec-headerNaviRole--unified .ec-headerNaviRole__left {
        order: 1;
        flex-shrink: 0;
    }

    /* カート（右） */
    .ec-headerNaviRole--unified .ec-headerNaviRole__right {
        order: 2;
        margin-left: auto;
    }

    /* ハンバーガー（カートの横） */
    .ec-headerNaviRole--unified .ec-headerRole__navSP {
        order: 3;
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
        margin-left: 15px;
    }

    .ec-headerNaviRole--unified .ec-headerNavSP {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        border-radius: 50%;
        background: #f5f5f5;
        color: #333;
    }

    .ec-headerNaviRole--unified .ec-headerNavSP .fas,
    .ec-headerNaviRole--unified .ec-headerNavSP .fa-bars {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ============================================
   レスポンシブ対応 (770px)
   ============================================ */

/* 770px以下: SP表示 */
@media (max-width: 770px) {
    .ec-headerNaviRole--unified {
        display: flex;
        padding: 10px;
        gap: 10px;
        flex-wrap: nowrap;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* SP: 並び順を変更 - ロゴ(1) | カート(2) | ハンバーガー(3) */
    .ec-headerNaviRole--unified .ec-headerNaviRole__left {
        order: 1;
        flex-shrink: 0;
        width: auto !important;
    }

    .ec-headerNaviRole--unified .ec-headerNaviRole__right {
        order: 2;
        gap: 5px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .ec-headerNaviRole--unified .ec-headerRole__navSP {
        order: 3;
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
        margin-left: 15px;
    }

    /* SP: 検索を非表示 */
    .ec-headerNaviRole--unified .ec-headerNaviRole__center {
        display: none !important;
    }

    /* SP: ロゴを大きく */
    .ec-headerLogo__image {
        width: auto;
        flex-shrink: 0;
    }

    .ec-headerLogo__image img {
        width: 200px;
        height: auto;
    }

    .ec-headerLogo__shopname {
        display: none;
    }

    /* ハンバーガーメニューアイコン表示（EC-CUBEデフォルトを上書き） */
    .ec-headerNaviRole--unified .ec-headerNavSP {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        border-radius: 50%;
        background: #f5f5f5;
        color: #333;
    }

    /* アイコンを中央に配置 */
    .ec-headerNaviRole--unified .ec-headerNavSP .fas,
    .ec-headerNaviRole--unified .ec-headerNavSP .fa-bars {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ============================================
   TOPページブロック間のスペース
   ============================================ */

/* カテゴリーブロック */
.ec-categoryRole {
    margin-bottom: 40px;
    background: #FEFAF5;
}

/* おすすめ商品の上マージン */
.ec-shelfRole {
    margin-top: 20px;
}

/* セクション見出しの統一スペース */
.ec-secHeading {
    margin-bottom: 30px;
}

/* おすすめ商品ブロックの上マージン（下層ページ用） */
.ec-layoutRole__mainBottom .ec-recommendRole {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

/* TOPページではボーダーなし */
body.front_page .ec-layoutRole__mainBottom .ec-recommendRole {
    border-top: none;
    padding-top: 0;
}

/* おすすめ商品の画像サイズ（80%に縮小） */
.ec-recommendRole .ec-shelfGrid__item-image img {
    width: 80% !important;
    max-width: 80% !important;
    height: auto !important;
}

/* ============================================
   カテゴリナビ ドロップダウン
   ============================================ */

/* ドロップダウンメニューの背景を白に */
.ec-itemNav__nav li ul li a {
    background: #fff !important;
    color: #333 !important;
}

/* 子カテゴリホバー時も白背景を維持 */
.ec-itemNav__nav > li:hover li:hover > a {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* 孫カテゴリの背景も白に */
.ec-itemNav__nav li ul li ul li a {
    background: #fff !important;
    color: #333 !important;
}

/* 孫カテゴリホバー時 */
.ec-itemNav__nav li:hover ul li ul li a:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* 子→孫の矢印アイコンをグレーに */
.ec-itemNav__nav li ul li ul:before {
    color: #666 !important;
}

/* ============================================
   商品一覧 商品名の高さ統一
   ============================================ */

/* 商品名を2行固定、超過分は省略 */
.ec-shelfGrid__item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    line-height: 1.4;
    text-align: center;
    margin-top: 10px;
}

/* 価格も中央揃え */
.ec-shelfGrid__item-price {
    text-align: center;
    margin-top: 10px;
}

/* ============================================
   商品詳細ページ
   ============================================ */

.ec-layoutRole__contents {
    margin-top: 30px;
}

.ec-productRole__title h2.ec-headingTitle {
    font-size: 26px !important;
    color: #000;
}

/* 商品詳細ページのおすすめ商品（1カラム、上50px） */
.product_page .ec-shelfRole {
    margin-top: 50px;
    width: 100%;
    clear: both;
}

/* ============================================
   商品詳細 2カラムレイアウト
   ============================================ */

/* PC: 2カラムレイアウト（CSS Grid） */
@media (min-width: 768px) {
    .ec-product-layout {
        display: grid;
        grid-template-columns: 55% 1fr;
        grid-template-rows: auto auto;
        gap: 20px 40px;
    }

    /* 画像: 左上 */
    .ec-product-layout__images {
        grid-column: 1;
        grid-row: 1;
    }

    /* 説明: 左下 */
    .ec-product-layout__description {
        grid-column: 1;
        grid-row: 2;
    }

    /* 購入エリア: 右（2行分、スティッキー） */
    .ec-product-layout__right {
        grid-column: 2;
        grid-row: 1 / 3;
        position: sticky;
        top: 20px;
        align-self: start;
        height: fit-content;
    }

    /* 右カラム内のプロフィール */
    .ec-product-sticky {
        background: #fff;
        padding: 20px;
    }
}

/* SP: 1カラムレイアウト（画像 → 購入 → 説明） */
@media (max-width: 767px) {
    .ec-product-layout {
        display: flex;
        flex-direction: column;
    }

    /* 画像: 1番目 */
    .ec-product-layout__images {
        order: 1;
        width: 100%;
    }

    /* 購入エリア: 2番目（画像の直下） */
    .ec-product-layout__right {
        order: 2;
        width: 100%;
        margin-top: 20px;
    }

    /* 説明: 3番目 */
    .ec-product-layout__description {
        order: 3;
        width: 100%;
        margin-top: 30px;
    }

    .ec-product-sticky {
        background: #fff;
        padding: 15px;
    }
}

/* ============================================
   商品説明セクション（左カラム）
   ============================================ */

.ec-product-layout__description > .ec-product-about__title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c8a063;
}

.ec-product-description {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

.ec-product-freearea {
    margin-top: 30px;
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

/* ============================================
   アコーディオンセクション（説明文の下）
   ============================================ */

.ec-product-about {
    margin-top: 30px;
    padding: 25px;
    background: #fafafa;
    border-radius: 8px;
}

.ec-product-about__title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c8a063;
}

.ec-product-about__lead {
    margin-bottom: 25px;
    padding: 20px;
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    background: #fff;
    border-left: 4px solid #c8a063;
    border-radius: 0 6px 6px 0;
}

/* ============================================
   アコーディオン（PC/SP共通）
   ============================================ */

.product-detail-accordion {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #f8f8f8;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: #f0f0f0;
}

.accordion-icon {
    font-size: 20px;
    color: #666;
    font-weight: 300;
    transition: transform 0.2s;
}

.accordion-content {
    display: none;
    padding: 16px 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    background: #fff;
}

.accordion-item.open .accordion-content {
    display: block;
}

.accordion-item.open .accordion-icon {
    transform: rotate(45deg);
}

/* SP: アコーディオン微調整 */
@media (max-width: 767px) {
    .ec-product-about {
        margin-top: 30px;
        padding: 15px;
    }

    .ec-product-about__title {
        font-size: 16px;
    }

    .ec-product-about__lead {
        padding: 15px;
        font-size: 14px;
    }

    .accordion-header {
        padding: 14px 15px;
    }

    .accordion-content {
        padding: 14px 15px;
    }
}

/* おすすめ商品ブロックの上マージン（下層ページ用） */
.ec-layoutRole__mainBottom .ec-recommendRole {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

/* ============================================
   ヘッダーアイコン色
   ============================================ */

/* ナビゲーションアイコン（新規会員登録、お気に入り、ログイン） */
.ec-headerNav__itemIcon {
    color: #F9CB65 !important;
}


/* ============================================
   検索フォーム カテゴリドロップダウン
   ============================================ */

/* カテゴリ選択の背景色 */
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    background-color: #F9CB65 !important;
}

.ec-select_search select {
    background-color: #F9CB65 !important;
    color: #000 !important;
    border: 1px solid #F9CB65 !important;
}

.ec-select_search::before {
    background-color: #F9CB65 !important;
}

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
    border-top: 6px solid #191919 !important;
}

/* 検索エリア背景色 */
.ec-headerSearch {
    background-color: #FEFAF5 !important;
}

.ec-searchRole {
    padding: 40px 0;
    margin-bottom: 40px;
    background: #FEFAF5;
}

.ec-searchRole__button {
    background-color: #F9CB65 !important;
    border-color: #F9CB65 !important;
    color: #fff !important;
}

.ec-blockBtn--top {
    background-color: #F9CB65 !important;
    border: none !important;
    color: #fff !important;
}

.ec-topicRole {
    background: #FEFAF5;
}

@media only screen and (min-width: 768px) {
    .ec-topicRole .ec-topicRole__list {
        flex-wrap: wrap !important;
        gap: 20px 30px;
    }
    .ec-topicRole .ec-topicRole__listItem {
        width: calc((100% - 60px) / 3) !important;
        margin-right: 0 !important;
        margin-bottom: 0;
    }
}

.ec-newsRole .ec-newsRole__news {
    border: 16px solid #FEFAF5;
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
    background: #EC365C;
}

.ec-sidebarSearch__btn {
    background: #F9CB65 !important;
}

/* カートに入れるボタン */
.ec-blockBtn--action,
.ec-productRole__btn button.ec-blockBtn--action.add-cart {
    background: #EC365C !important;
    border-color: #EC365C !important;
    border-radius: 5px;
}

/* キャンセルボタン */
.ec-blockBtn.ec-cartNavi--cancel,
.ec-blockBtn--cancel,
.ec-inlineBtn {
    border-radius: 5px;
}

/* ============================================
   注文画面（Shopping）
   ============================================ */

/* 見出しの文字サイズ */
.ec-rectHeading h3 {
    font-size: 16px !important;
}

/* 見出しと入力欄の間隔 */
.ec-rectHeading {
    margin-bottom: 20px !important;
}

/* ============================================
   フッター
   ============================================ */

.ec-footerRole {
    border-top: none;
    margin-top: 30px;
    padding-top: 0 !important;
}

@media only screen and (min-width: 768px) {
    .ec-footerRole {
        margin-top: 100px;
    }
}

/* ナビゲーション部分（上部） */
.ec-footerNavi__wrapper {
    background: #F9CB65 !important;
    padding: 15px 0 !important;
}

.ec-footerNavi {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.ec-footerNavi .ec-footerNavi__link {
    border: none !important;
    padding: 0 !important;
}

.ec-footerNavi .ec-footerNavi__link a {
    color: #181818 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    display: inline !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .ec-footerNavi {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

/* メイン部分（下部） */
.ec-footerTitle {
    background: #EC365C !important;
    padding: 40px 0 !important;
    text-align: center !important;
}

.ec-footerTitle__logo {
    margin-bottom: 20px !important;
}

.ec-footerTitle__logo a {
    display: inline-block !important;
}

.ec-footerTitle__logo img {
    width: 300px !important;
    height: 90px !important;
    object-fit: contain !important;
}

.ec-footerTitle__copyright {
    color: #fff !important;
    font-size: 12px !important;
}

/* ============================================
   ページトップボタン
   ============================================ */

.ec-pageTopBtn {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 80px;
    right: -80px;
    bottom: calc(50% - 40px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    border: 0;
    background: #F9CB65;
    transition: .3s;
    letter-spacing: 2px;
    font-weight: bold;
    border-radius: 10px 0 0 10px;
    z-index: 9999;
}

.ec-pageTopBtn i {
    font-size: 24px;
    color: #fff;
    margin-bottom: 5px;
}

.ec-pageTopBtn span {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.ec-pageTopBtn:hover {
    background: #e8ba54;
}

.ec-pageTopBtn.is-active {
    opacity: 1;
    visibility: visible;
    right: 0;
}

/* 既存のページトップボタンを非表示 */
.ec-blockTopBtn.pagetop {
    display: none !important;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .ec-pageTopBtn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: -60px;
        border-radius: 50%;
    }

    .ec-pageTopBtn i {
        font-size: 18px;
        margin-bottom: 0;
    }

    .ec-pageTopBtn span {
        display: none;
    }

    .ec-pageTopBtn.is-active {
        right: 15px;
    }
}

/* ============================================
   角丸デザイン（ボタン・入力要素）
   ============================================ */

/* ボタン系 */
.ec-blockBtn,
.ec-blockBtn--top,
.ec-inlineBtn,
.ec-inlineBtn--action,
.ec-inlineBtn--cancel,
.ec-inlineBtn--primary,
.ec-login__actions button,
.ec-icon button,
.ec-searchRole__button {
    border-radius: 5px !important;
}

/* 入力系 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select,
.ec-input input,
.ec-select select,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input {
    border-radius: 5px !important;
}

/* 検索系 */
.ec-headerSearch__keyword input,
.ec-searchRole__keyword input,
.ec-sidebarSearch__keyword input {
    border-radius: 5px !important;
}

/* セレクトボックスのラッパー */
.ec-select,
.ec-select select,
.ec-birth select {
    border-radius: 5px !important;
}

/* ヘッダー検索カテゴリは除外 */
@media only screen and (min-width: 768px) {
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
        border-radius: 0 !important;
        border-top-left-radius: 50px !important;
        border-bottom-left-radius: 50px !important;
    }
}