@charset "utf-8";
/* ============================================================
   生産終了品（旧サイトからの移行分）専用スタイル
   brands タクソノミーのスラッグに "discon" を含む製品ページでのみ読み込む。
   読み込み条件は functions.php を参照。
   旧サイトの製品画像は白背景・低解像度のため、
   画像自体を加工せずコンテナ側に白を敷いて成立させる。
   ============================================================ */

/* メイン画像 */
.header .col-12.mb30.txt_center.wow.fadeIn {
    background: #fff;
    margin-top: 2rem;
    padding: 2rem;
}

.header .col-12.mb30.txt_center.wow.fadeIn > img.transform-5 {
    transform: none;
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* 色ごとの製品写真 */
.header .row figure.images {
    background: #fff;
    padding: 1rem;
    margin: 0;
    position: relative;
}

.header .row figure.images img.icn_zoom.transform-5 {
    transform: none;
    display: block;
    width: 100%;
    height: auto;
}

.header .row figure.images figcaption {
    padding-top: 0.5rem;
    color: #1c1a19;
}

/* DISCONTINUED ラベルを写真の枠内右上に収める */
.header .row figure.images .icn_comment {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    margin: 0;
}

.header .row figure.images .icn_comment_nla {
    font-size: 12px;
    line-height: 1.6;
    padding: 0 6px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 3px;
}

/* COLOR VARIATION の色見本は旧サイトの元サイズ（40x40）で表示 */
/* スウォッチは原寸で表示（EDWARDS 40×40 / GRASSROOTS 30×10 と縦横比が異なるため）*/
.color_variation figure img,
.color_variation img {
    width: auto;
    height: auto;
    max-width: 40px;
}

/* CONTROLS 図 */
.col-12.col-md-6.pd15 > .content.mb50.text-center {
    background: #fff;
    padding: 2rem;
}

/* 価格の注記（当時価格であることの明示） */
.detail_price_note {
    display: block;
    margin-top: 0.5em;
    color: red;
    font-size: 12px;
}

/* 生産終了品では販売店検索・お問い合わせを出さない */
#dealers,
#contactus {
    display: none;
}

/* ------------------------------------------------------------
   一覧（アーカイブ）のカード
   ------------------------------------------------------------ */
.items .legacy-card .fig .wrap {
    overflow: hidden;
}

.items .legacy-card .fig .wrap img.transform-5 {
    transform: none;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
}

/* カード内の DISCONTINUED バッジは右上へ小さく
   （移行分は白背景の写真なので、既存の中央グレー丸バッジだと読みにくいため） */
.items .legacy-card .fig .wrap .icn_circle.icn_circle_nla.icn_circle_nla_small {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    display: inline-block !important;
}

.items .legacy-card .fig .wrap {
    position: relative;
}

.items .legacy-card .fig .items_txt {
    margin: 0;
    padding: 10px 8px 14px;
}

/* ------------------------------------------------------------
   サイドメニュー（drawr）の製品画像
   ------------------------------------------------------------ */
#drawr_menu figure {
    margin: 0;
}

#drawr_menu figure img.transform-5 {
    transform: none;
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

/* ------------------------------------------------------------
   一覧のカラム数（この一覧のみ）
   スマートフォンでも 2 カラムにする
   ------------------------------------------------------------ */
.items > [class*="col-"] {
    /* スマートフォンでも 2 カラム（既定は 1 カラム） */
    flex: 0 0 50%;
    max-width: 50%;

    /* PC は既定どおり 3 カラムに戻す（.col-lg-4 と同値） */
    @media screen and (min-width: 992px) {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* ------------------------------------------------------------
   詳細ページ：色ごとの製品写真の並び
   カード同士が接して見えるため、間隔を確保する
   ------------------------------------------------------------ */
.header .row.row-eq-height > [class*="col-"] {
    padding: 8px;

    @media screen and (min-width: 768px) {
        padding: 10px;
    }
}

.header .row figure.images {
    height: 100%;
}

/* ------------------------------------------------------------
   セクションの並び順
   旧サイトの構成に合わせ SPECIFICATIONS を SPECIAL FEATURES より先に出す
   ------------------------------------------------------------ */
#main {
    display: flex;
    flex-direction: column;
}

#main > .drawr { order: 0; }
#main > .header { order: 1; }
#main > .social_icons { order: 2; }
#main > #specifications { order: 3; }
#main > #special_features { order: 4; }
#main > #content_area { order: 5; }
#main > #inner_content { order: 6; }
#main > .text-center { order: 7; }
#main > .pageUp { order: 8; }

/* ------------------------------------------------------------
   SPECIAL FEATURES の画像
   旧サイトの GIF は透過を含むため、背景を白で敷く
   ------------------------------------------------------------ */
#specialfeatures figure,
.special.features figure {
    background: #fff;
    padding: 2rem;
}

/* 仕様アイコン（旧サイトの透過GIF）にも背景を敷く */
.spec_icon img.brs5 {
    background: #fff;
}



/* ------------------------------------------------------------
   ギャラリー
   旧サイトの画像は小さく縦横比もまちまちなため、
   等幅・等高のグリッドに揃えて中央寄せで並べる
   ------------------------------------------------------------ */
#gallery .row.items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

#gallery .row.items > [class*="col-"] {
    flex: 0 0 auto;
    width: calc(50% - 8px);
    max-width: none;
    padding: 0;

    @media screen and (min-width: 768px) {
        width: calc(33.333% - 11px);
    }

    @media screen and (min-width: 1024px) {
        width: calc(25% - 12px);
    }
}

#gallery figure {
    margin: 0;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

#gallery figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ギャラリーは container-fluid のため、他セクションと同じ最大幅に揃える */
#gallery > .container-fluid {
    max-width: 1500px;
    margin-inline: auto;
}

/* ------------------------------------------------------------
   SPECIAL FEATURES の並び
   スマートフォンでは常に「画像 → テキスト」の順にする
   （HTML はテキストが先のため、縦積み時は反転させる）
   ------------------------------------------------------------ */
#specialfeatures .row,
.special.features .row {
    flex-direction: column-reverse;

    @media screen and (min-width: 992px) {
        flex-direction: row;
    }
}

#specialfeatures .row.flex-row-reverse,
.special.features .row.flex-row-reverse {
    flex-direction: column-reverse;

    @media screen and (min-width: 992px) {
        flex-direction: row-reverse;
    }
}

/* CONTROLS の説明文：白い図版ボックスと左右を揃え、前後に余白を取る */
.detail_controls_note {
    margin: 2rem 0 3rem;
    padding-inline: 2rem;
    line-height: 2;
}

/* CONTROLS 説明文の見出し */
.detail_controls_title {
    margin: 2rem 0 0.5rem;
    padding-inline: 2rem;
    font-size: 16px;
    font-weight: 700;
}

.detail_controls_title + .detail_controls_note {
    margin-top: 0;
}