@charset "UTF-8";
/* ================================================================
 * ブランド棚（brandproducts）導入テキストブロック
 * 対象element: src/Template/Element/brand_intro.ctp（PC/SP共用）
 * 仕様の正本: content/proposals/2026-07-27-brand-intro-text-design.md
 *
 * 設計上の約束:
 *  - 全セレクタを .brand-intro 配下に閉じる（他ページ・他ブロックへ漏らさない）
 *  - タグセレクタ（h2{} p{} a{} button{}）は書かない。要素は必ずクラスで指す
 *  - var(--t2lp-*) を参照せず具体色で書く（color.css の配布順に依存させない）
 *      #161135 ink（.bg-blue-main と同値） / #cc9d52 gold（.text-gold と同値）
 *      #f3f5f9 mist（.bg-blue-2 と同値）   / #454545 本文（.text-black-main-2 と同値）
 *      #ECECEC 罫  / #ababab 仕切り（.bg-gray-2 と同値）
 *      #434f98 リンク（.text-blue-1 と同値） / #3a3550 カード枠（ink をわずかに明るく）
 *  - 金（#cc9d52）を使ってよいのは ABOUT行（eyebrow＋罫）だけ。
 *    カード・区切り・矢印へ広げない（アクセントが散ると落ち着かない・2026-08-04）
 *  - Tailwindの任意値クラス（text-[13px] 等）は現行 dist/tailwind.css に無いため使わず、
 *    サイズ・字間はここに手書きする
 *  - SP側レイアウト（Mobile productlist_layout）は section.text-3xl の継承が効くため、
 *    テキストを持つ要素には必ず font-size を明示する
 *
 * 記述はモバイルファースト（既定=SP 375px幅）＋ @media(min-width:768px) でPC。
 * SPの折りたたみは display:none を使わず、-webkit-line-clamp と max-height の
 * 視覚制御のみで行う（DOM常在＝クロール時に①②③が読める）。
 * ================================================================ */

/* ---- ブロック外枠（SP・top/bottom 共通の見た目） ----
 * 2026-08-04（H005-1）: ②③を商品グリッドの下へ移したため、ブロックは
 *   .brand-intro--top   … ABOUT＋①紹介文（グリッドの上）
 *   .brand-intro--bottom … ②取扱の実態＋③2着試着/案内行（グリッドの下）
 * の2つに分かれる。共通の余白・罫をここに置くと両方へ二重に効いて崩れるため、
 * ここでは色・字送りだけを持ち、外周の margin/padding/罫はモディファイア側で作る。 */
.brand-intro {
    color: #161135;
    text-align: left;
    /* SPレイアウトの section.text-3xl（30px/36px）を継承したままだと、
     * 子要素の間の空白テキストノードが 36px の行ボックスを作って折りたたみ時の
     * 高さが約17px膨らむ。ブロック直下で基準値へ上書きしておく。 */
    font-size: 12px;
    line-height: 1.5;
}
/* 上段: 左右16px＝SPのh1（mx-4）と同じ位置に揃える。
 * 下端の罫は①の終わりを閉じる線（この下に検索枠が続く）。 */
.brand-intro--top {
    margin: 14px 16px 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid #ECECEC;
}
/* 下段: 商品グリッド＋ページャの直後に来る。上に罫＋十分な余白を置いて
 * 「商品の続き」に見えないよう切り分ける（グリッド直下で唐突に始まらないため）。
 * 罫は上段と同じ #ECECEC で、ページ内の区切りの太さを揃える。 */
.brand-intro--bottom {
    margin: 20px 16px 22px;
    padding: 14px 0 0;
    border-top: 1px solid #ECECEC;
}
/* 下段の先頭要素（②が無いブランドでは③-aまたは③-b）が持つ上マージンを打ち消し、
 * 罫からの距離を padding だけで決める（先頭が何になっても間隔が変わらない）。
 * :first-child を足して詳細度を 0,3,0 にしてある。後段（PC側 @media を含む）の
 * .brand-intro .brand-intro__facts 等（0,2,0）に負けないため。 */
.brand-intro--bottom > .brand-intro__facts:first-child,
.brand-intro--bottom > .brand-intro__twodress:first-child,
.brand-intro--bottom > .brand-intro__service:first-child {
    margin-top: 0;
}
/* 横はみ出しの保険: 親幅を絶対に超えない。padding付きの子（②バー・③カード）が
 * width:100% 指定を受けても膨らまないよう border-box を明示し、長い英数字の連なりでも
 * 折り返す。既存の共有CSSが box-sizing を content-box に戻していても効く。 */
.brand-intro,
.brand-intro * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
}
.brand-intro .brand-intro__lead,
.brand-intro .brand-intro__facts,
.brand-intro .brand-intro__twodress,
.brand-intro .brand-intro__service {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---- 見出し行: eyebrow「ABOUT」＋ 行末まで伸びる金の極細罫（H2は出さない） ---- */
.brand-intro .brand-intro__head {
    display: flex;
    align-items: center;
    margin: 0 0 7px;
}
.brand-intro .brand-intro__eyebrow {
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .2em;
    color: #cc9d52;
    flex: none;
}
.brand-intro .brand-intro__rule {
    /* 見出しを置かないため、罫はeyebrowの右から行末まで伸ばす
     * （短い罫が宙に浮くと未完成に見えるため）。 */
    display: block;
    height: 1px;
    margin: 0 0 0 8px;
    /* 右へいくほど薄くなる金の罫（2026-08-04 福さん指示）。
     * グラデ非対応の環境では下の単色が残るだけでデグレしない。 */
    background: #cc9d52;
    background: linear-gradient(to right, #cc9d52, rgba(204, 157, 82, 0));
    flex: 1 1 auto;
}

/* ---- ① ブランド紹介本文（SPは3行クランプ＋最終行フェード） ---- */
.brand-intro .brand-intro__lead {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .01em;
    color: #454545;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* 最終行を下へ向かって透明にフェードさせ「まだ続きがある」ことを示す
     * （スパッと切れているだけだと続きの存在が伝わらない・2026-07-31 福さん指摘）。
     * 背景色に依存しないマスク方式にしているので、棚の背景が白以外になっても破綻しない。
     * mask未対応の古いブラウザでは従来どおり3行で切れるだけでデグレしない。
     * 62% ＝ 3行のうち上2行は完全不透明のまま、3行目だけが薄くなる位置。 */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
}
.brand-intro.is-open .brand-intro__lead {
    display: block;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
/* 3行に収まりきっている＝隠れている続きが無い場合（JSが判定して付与）。
 * フェードも「続きを読む」も出さない（続きが無いのに薄くなるのを防ぐ）。 */
.brand-intro.is-untruncated .brand-intro__lead {
    -webkit-mask-image: none;
    mask-image: none;
}
.brand-intro.is-untruncated .brand-intro__toggle {
    display: none;
}

/* ---- ② 取扱の実態（mistバー・折りたたみの外＝常時可視） ---- */
.brand-intro .brand-intro__facts {
    margin: 10px 0 0;
    padding: 9px 12px;
    background: #f3f5f9;
    border-radius: 2px;
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: .01em;
    color: #161135;
}
.brand-intro .brand-intro__facts-num {
    /* SPは本文と同じ11px（サイズを上げると行ボックスが広がり折りたたみ高さが増える）。
     * 強調は太さと字間で付け、PCだけ13pxに上げる。 */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #161135;
}

/* ---- ③-a 2着試着カード（ドレス系ブランドのみ。黒系の細枠で区切る） ----
 * 枠と煽り文を金にしていたが「落ち着かない」（2026-08-04 福さん指摘）ため黒系へ。
 * 金はABOUT行（eyebrow＋罫）だけに残し、ページ内のアクセントを一箇所に集約する。
 * 枠は ink(#161135) そのものだと1pxでも重く見えたため、わずかに明度を上げた
 * #3a3550（ink寄りの紫みグレー）を採用（ft実機の390px描画で比較して決定）。 */
.brand-intro .brand-intro__twodress {
    margin: 9px 0 0;
    padding: 8px 12px 9px;
    border: 1px solid #3a3550;
    border-radius: 2px;
    background: #fff;
    text-align: center;
}
.brand-intro .brand-intro__twodress-catch {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .02em;
    /* 本文と同系統の黒（.text-black-main-2 と同値）。サイズは維持 */
    color: #454545;
}
.brand-intro .brand-intro__twodress-main {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #161135;
}
.brand-intro .brand-intro__twodress-name {
    font-weight: 600;
    letter-spacing: .01em;
}
.brand-intro .brand-intro__twodress-link {
    margin-left: 6px;
    font-size: 11px;
    white-space: nowrap;
    /* サイト既存のリンク色（.text-blue-1 と同値）。枠と煽り文を黒系にしたことで
     * ink のままだと本文に埋もれてリンクに見えなくなるため、既存トークンに合わせる */
    color: #434f98;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- ③-b 共通案内行（中央揃え・2026-08-04 福さん指示） ---- */
.brand-intro .brand-intro__service {
    margin: 9px 0 0;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .01em;
    color: #454545;
    text-align: center;
}
.brand-intro .brand-intro__service-item {
    white-space: nowrap;
}
.brand-intro .brand-intro__service-sep {
    margin: 0 2px;
    /* 区切り記号は装飾ではなく仕切り。金をやめて静かなグレーに（2026-08-04） */
    color: #ababab;
    font-size: 10px;
}

/* ---- 開閉ボタン（SPのみ・PCでは非表示） ---- */
.brand-intro .brand-intro__toggle {
    /* inline-flex にすると匿名行ボックスの分だけ高さが増えるためブロックレベルのflexにする
     * （タップ領域が横いっぱいになるのはSPでは利点）。 */
    display: flex;
    align-items: center;
    /* 右寄せ（2026-08-04 福さん指示）。<button> は display:flex でも width:auto が
     * shrink-to-fit になり中身が寄らないため、width:100% を明示してから flex-end で寄せる
     * （タップ領域は横いっぱいのまま・文字だけが右端に来る）。 */
    justify-content: flex-end;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #161135;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.brand-intro .brand-intro__toggle-label {
    font-size: 11px;
}
.brand-intro .brand-intro__toggle::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    margin: -3px 0 0 6px;
    /* 矢印はラベル「続きを読む」と一体のUI。金だと文字だけ黒・矢印だけ金で浮くため
     * ラベルと同じ ink に揃える（金はABOUT行のみ・2026-08-04） */
    border-right: 1px solid #161135;
    border-bottom: 1px solid #161135;
    transform: rotate(45deg);
}
.brand-intro.is-open .brand-intro__toggle::after {
    margin: 2px 0 0 6px;
    transform: rotate(-135deg);
}

/* ================================================================
 * PC（productlist_pc_layout / .pc-itemlist-main 内）
 * 折りたたみは行わず全文表示。商品グリッドを押し下げすぎないよう
 * ブロック全体で 250px 以内に収まる寸法にする。
 * ================================================================ */
@media (min-width: 768px) {
    .brand-intro--top {
        margin: 4px 0 20px;
        padding-bottom: 14px;
    }
    /* 下段はページャ（.pc-itemlist-pagination が margin-bottom:24px を持つ）の直後。
     * 二重に空きすぎないよう上マージンは詰め、罫からの距離を padding で取る。 */
    .brand-intro--bottom {
        margin: 8px 0 24px;
        padding-top: 18px;
    }
    .brand-intro .brand-intro__head {
        margin: 0 0 8px;
    }
    .brand-intro .brand-intro__eyebrow {
        font-size: 11px;
        letter-spacing: .22em;
    }
    .brand-intro .brand-intro__rule {
        margin: 0 0 0 12px;
    }
    .brand-intro .brand-intro__lead {
        /* PCはクランプしないためフェードも要らない（マスクを明示的に外す） */
        display: block;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        font-size: 13px;
        line-height: 1.9;
    }
    .brand-intro .brand-intro__facts {
        margin-top: 10px;
        padding: 9px 14px;
        font-size: 12px;
        line-height: 1.7;
    }
    .brand-intro .brand-intro__facts-num {
        font-size: 13px;
    }
    /* PCは寸法だけを上書きし、色は上のSP側の指定をそのまま継承する
     * （枠 #3a3550・煽り文 #454545・リンク #434f98。ここで色を再指定しない） */
    .brand-intro .brand-intro__twodress {
        margin-top: 10px;
        padding: 8px 14px 9px;
    }
    .brand-intro .brand-intro__twodress-catch {
        font-size: 11px;
    }
    .brand-intro .brand-intro__twodress-main {
        margin-top: 2px;
        font-size: 14px;
    }
    .brand-intro .brand-intro__twodress-link {
        margin-left: 10px;
        font-size: 12px;
    }
    .brand-intro .brand-intro__service {
        margin-top: 8px;
        font-size: 12px;
    }
    .brand-intro .brand-intro__service-sep {
        margin: 0 6px;
        font-size: 12px;
    }
    /* PCは常時全文表示のためボタン自体が不要（中身の非表示ではないので display:none で可） */
    .brand-intro .brand-intro__toggle {
        display: none;
    }
}