@charset "UTF-8";
/* ==========================================================================
   nogami-shop トップCSS（カラーミーショップ TOP）
   - nogami-farm.jp とデザインを統一
   - 配色: #465902（key）/ #1a1a1a（ink）/ #fffcf0（off-white）
   - 横書きフォーマット
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ヒーロー
   -------------------------------------------------------------------------- */
.top-hero                                   { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0 60px; }
.top-hero__copy                             { padding: 20px; }
.top-hero__romaji                           { font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0.22em; color: var(--nf-color-key); text-transform: uppercase; margin: 0 0 14px; }
.top-hero__title                            { font-family: "Zen Old Mincho", serif; font-size: 32px; font-weight: 600; line-height: 1.55; letter-spacing: 0.04em; color: var(--nf-color-ink); margin: 0 0 18px; }
.top-hero__lead                             { font-size: 14px; line-height: 1.95; color: var(--nf-color-ink); margin: 0 0 22px; }
.top-hero__cta .btn                         { min-width: 220px; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.top-hero__slider                           { list-style: none; padding: 0; margin: 0; }
.top-hero__slider img                       { display: block; width: 100%; height: auto; }

@media (max-width: 768px) {
    .top-hero                               { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 40px; }
    .top-hero__copy                         { padding: 0 8px; text-align: center; }
    .top-hero__title                        { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   2. スライダー（bxslider 既存指定の上書き）
   -------------------------------------------------------------------------- */
.slider                                     { margin: 0 auto; display: block; }
.bx-pager                                   { margin: 0; padding: 0; }
.bx-wrapper                                 { margin-bottom: 0 !important; box-shadow: none !important; border: 0 !important; }
.bx-wrapper .bx-viewport                    { left: 0 !important; border: 1px solid var(--nf-color-line) !important; margin: 0 auto !important; background: #fff; box-shadow: var(--nf-shadow); }
.bx-pager-item                              { visibility: hidden; }

/* --------------------------------------------------------------------------
   3. セクション共通
   -------------------------------------------------------------------------- */
.top-section                                { padding: 64px 0; }
.top-section__head                          { text-align: center; margin: 0 auto 32px; max-width: 760px; }
.top-section__romaji                        { font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0.22em; color: var(--nf-color-key); text-transform: uppercase; margin: 0 0 10px; }
.top-section__title                         { font-family: "Zen Old Mincho", serif; font-size: 26px; font-weight: 600; letter-spacing: 0.08em; color: var(--nf-color-ink); margin: 0 0 16px; position: relative; padding-bottom: 14px; display: inline-block; }
.top-section__title::after                  { content: ""; position: absolute; left: 50%; bottom: 0; width: 40px; height: 2px; background-color: var(--nf-color-key); transform: translateX(-50%); }
.top-section__lead                          { font-size: 14px; line-height: 1.9; color: var(--nf-color-ink); margin: 0; }
.top-section__more                          { text-align: center; margin-top: 32px; }

/* --------------------------------------------------------------------------
   4. お知らせ（news）
   -------------------------------------------------------------------------- */
.news                                       { border-top: 1px solid var(--nf-color-line); border-bottom: 1px solid var(--nf-color-line); border-left: 0; border-right: 0; max-width: 960px; padding: 24px 24px; margin: 0 auto; background-color: var(--nf-color-bg-soft); }
.news-inner                                 { max-width: 960px; padding: 0; color: var(--nf-color-ink); font-size: 14px; line-height: 1.9; }
.news-inner a                               { color: var(--nf-color-key); }

/* --------------------------------------------------------------------------
   5. フリースペース
   -------------------------------------------------------------------------- */
.nogami-freespace                           { background-color: var(--nf-color-bg-soft); }
.free-space                                 { max-width: 960px; padding: 8px 24px 0; margin: 0 auto; color: var(--nf-color-ink); font-size: 14px; line-height: 1.95; }

/* --------------------------------------------------------------------------
   6. おすすめ・新着商品リスト
   -------------------------------------------------------------------------- */
.recommend-items                            { margin-top: 0; }
.new_item-items                             { margin-top: 0; }
.top-prd-lst                                { list-style: none; padding: 0; margin: 0; }
.top-prd-lst .prd-lst-unit                  { margin-bottom: 36px; padding: 0 10px; }
.top-prd-lst .unit-box                      { margin: 0; background-color: #fff; padding: 16px; border: 1px solid var(--nf-color-line); transition: box-shadow .25s ease, transform .25s ease; }
.top-prd-lst .unit-box:hover                { box-shadow: var(--nf-shadow); transform: translateY(-2px); }
.top-prd-lst .prd-lst-img                   { width: 100%; height: auto; }
.top-prd-lst .prd-lst-name                  { font-size: 15px; font-weight: 500; color: var(--nf-color-ink); margin-top: 8px; }
.top-prd-lst .prd-lst-price                 { color: var(--nf-color-ink); font-size: 13px; }

/* --------------------------------------------------------------------------
   7. 公式サイトへの導線（クロスセクション）
   -------------------------------------------------------------------------- */
.top-cross                                  { background-color: var(--nf-color-bg-soft); padding: 72px 0; margin-top: 32px; text-align: center; }
.top-cross__inner                           { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.top-cross__romaji                          { font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 0.22em; color: var(--nf-color-key); text-transform: uppercase; margin: 0 0 12px; }
.top-cross__title                           { font-family: "Zen Old Mincho", serif; font-size: 24px; font-weight: 600; letter-spacing: 0.06em; color: var(--nf-color-ink); margin: 0 0 18px; }
.top-cross__lead                            { font-size: 14px; line-height: 1.9; color: var(--nf-color-ink); margin: 0 0 24px; }
.top-cross__cta .btn                        { min-width: 220px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
    .top-section                            { padding: 40px 0; }
    .top-section__title                     { font-size: 22px; }
    .top-cross                              { padding: 48px 0; }
    .top-cross__title                       { font-size: 20px; }
}