@charset "UTF-8";
/* =========================================================
   新作コレクション動線
   各下層ページのフッター上部に設置する共通ブロック。
   Figma: ajour LP / Collection   PC 683:756 (990幅) / SP 683:757 (375幅)
   ボタンはテーマ既存の .c-button_reversal を流用し、ここでは幅だけ足す。
   ========================================================= */

.nc__inner {
    width: 990px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    /* Figma: pt40 / pb60 */
    padding: 40px 0 60px;
}

/* 見出し＋下罫線（Figma: テキスト → 8px → 1px #836723 の線）
   text-align は css/style.css の SP 用 h2 { text-align:center } を打ち消すために明示する */
.nc__ttl {
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid #836723;
    color: #836723;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
}

/* カード列（Figma: 322x214.667 = 3:2 / gap 12 / 見出しから20px） */
.nc__list {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.nc__item {
    display: block;
    flex: none;
    width: 322px;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    transition: opacity .3s ease;
}

.nc__item:hover {
    opacity: .7;
}

.nc__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 「コレクション一覧はこちら」（Figma: 幅240 / 字間1px / カード列から40px） */
.nc__btnwrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.nc__btn {
    width: 240px;
    letter-spacing: 1px;
}

/* =========================================================
   SP (375px 基準)
   ========================================================= */
@media screen and (max-width: 767px) {

    .nc__inner {
        width: 100%;
        max-width: none;
        padding: 40px 20px 60px;
    }

    .nc__ttl {
        font-size: 16px;
        line-height: 29px;
    }

    /* Figma 683:757 は「中央のカードを中心に前後が見切れる」カルーセル。
       コンテナ335pxの内訳は 62.5 + 8 + 194 + 8 + 62.5 = 335。
       左右に (335 - 194) / 2 = 70.5px の余白を持たせ、
       scroll-snap-align:center で中央スナップさせるとこの配置になる。
       PCは3枚で990pxちょうどに収まる静的な横並びのままとする。 */
    .nc__list {
        gap: 8px;
        margin-top: 20px;
        padding-left: 70.5px;
        padding-right: 70.5px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .nc__list::-webkit-scrollbar {
        display: none;
    }

    .nc__item {
        width: 194px;
        scroll-snap-align: center;
    }

    .nc__btnwrap {
        margin-top: 30px;
    }

    .nc__btn {
        width: 100%;
        letter-spacing: normal;
    }
}

/* =========================================================
   TOPページ コレクションカルーセル
   お客様レポート（.customer_swiper）と同じ部品を流用しているが、
   コレクションでは以下が不要なため打ち消す。
   ・.c-articlelist2 の上罫線（カード右側に線として見えてしまう）
     ※ margin-top（PC40 / SP15）は活かしたいので border だけ消す
   ========================================================= */
.collection_swiper .c-articlelist2 {
    border-top: none;
}

/* =========================================================
   リフォーム特集LPへのバナー動線 (get_template_part('lp-banner'))
   Figma: ajour LP / Collection
     PC 683:714 (1440x266) にバナー画像 824x206（上下30の余白）
     SP 683:801 (335x334)  にバナー画像 335x274（上下30の余白）
   同じ動線ブロックのため new-collection.css に同居させる。
   ========================================================= */
.lp-bn {
    /* PC/SP 共通で上下30pxの余白。SPは左右20pxのページ余白も足す */
    padding: 30px 20px;
    text-align: center;
}

.lp-bn__link {
    display: inline-block;
    max-width: 100%;
    /* inline-block はベースライン下の余白（line-height 由来）で
       img より数px 大きくなり Figma のコンテナ高さ 266/334 を
       超えるため、vertical-align で潰す */
    vertical-align: top;
    transition: opacity .3s ease;
}

.lp-bn__link:hover {
    opacity: .7;
}

.lp-bn__link img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .lp-bn__link {
        width: 824px;
    }
    /* img 属性の aspect-ratio 予約を PC 表示寸法 824:206 で明示する。
       この指定が無いと、picture で SP 画像に切り替わっても
       width/height 属性の 824x206（4:1）の比率が固定されたままになる。 */
    .lp-bn__link img {
        aspect-ratio: 824 / 206;
    }
}

@media screen and (max-width: 767px) {
    .lp-bn__link {
        width: 335px;
    }
    /* SP は Figma の表示寸法 335x274（bn_lp_sp.jpg 670x548 の @2x） */
    .lp-bn__link img {
        aspect-ratio: 335 / 274;
    }
}