@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 … ②取扱の実態（グリッドの下）
 *   .brand-intro--promo … ③-a 2着試着カード＋③-b 案内行
 *                         （SHARE_CLO-532 で --bottom から切り出し、利用期間を選択するUIの上へ。
 *                          PCは検索サイドバー内・SPは①の下）
 * の3つに分かれる。共通の余白・罫をここに置くと両方へ二重に効いて崩れるため、
 * ここでは色・字送りだけを持ち、外周の 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 2着試着カード＋③-b 案内行）: SHARE_CLO-532 で
 * 「ページネーションの下」から「利用期間を選択するUIの上」へ移動した。
 * SPでは①の下（ABOUTブロックと期間選択枠の間）に入るため、罫は持たせず
 * 左右16px（h1 の mx-4 と同じ位置）と上下の余白だけで独立させる
 * （①の下端に既に #ECECEC の罫があり、二重の線にすると帯が混み合う）。 */
.brand-intro--promo {
    margin: 12px 16px 14px;
    padding: 0;
}
/* 下段の先頭要素（②が無いブランドでは③-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,
.brand-intro--promo > .brand-intro__twodress:first-child,
.brand-intro--promo > .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;
}

/* PC（SHARE_CLO-532）: PCの「利用期間を選択するUI」は左の検索サイドバー最上段にあるため、
 * 案内段はサイドバー内（.pc-sb-body の先頭＝「レンタル期間」セクションの直上）に入る。
 * サイドバーの各セクション（.pc-sec）と同じ 14px/16px の内側余白・同じ #ECECEC の
 * 区切り罫に合わせ、サイドバーのリズムから浮かないようにする。 */
.pc-search-sidebar .brand-intro--promo {
    margin: 0;
    /* 上18px: 案内段が入る前は「レンタル期間」セクションが .pc-sb-body の先頭で、
     * pc_search_sidebar.ctp の .pc-sec:first-child{padding-top:18px} が
     * サイドバー見出しの gold 下辺罫との密着を避けていた。案内段が先頭に入って
     * その指定が効かなくなったため、同じ 18px をこちらで引き継ぐ（下は .pc-sec と同じ14px）。 */
    padding: 18px 16px 14px;
    border-bottom: 1px solid #ECECEC;
}

/* ---- 見出し行: 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行で切れるだけでデグレしない。
     * H013-3: PR#337で受入テスト表の記載に合わせ2行/46%へ変更したが、
     * そのテスト表記載自体が独自根拠のない誤記（brand_intro.ctpの旧コメントを
     * そのまま引き写しただけ）と判明したため、元の3行/62%へ差し戻す（2026-08-13）。
     * 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;
    /* タップ領域の確保（44px以上・design-system.md）。文字は11pxのままで、
     * 上下パディングで当たり判定だけを広げる。パディング分と同じ負のマージンを
     * 上下に当てているのは、行ボックスの高さ（＝カードの高さ）を変えずに
     * 当たり判定だけを伸ばすため（inline-block は margin box で行の高さが決まる）。
     * 左右は 0（横に広げると名前との間隔が変わりPCサイドバーの詰めが崩れる）。 */
    display: inline-block;
    padding: 14px 0;
    margin-top: -14px;
    margin-bottom: -14px;
    /* サイト既存のリンク色（.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;
}
/* 区切り「｜」は2件目以降の項目の ::before で出す（独立spanだと折り返し時に
 * 「…最短翌日発送 ｜」で切れて記号だけが行末に残る）。項目は nowrap なので
 * 「｜＋項目」が1つの折り返し単位になり、記号は必ず後続項目と同じ行に乗る。 */
.brand-intro .brand-intro__service-item--sep::before {
    content: "｜";
    margin: 0 2px;
    /* 区切り記号は装飾ではなく仕切り。金をやめて静かなグレーに（2026-08-04） */
    color: #ababab;
}

/* ---- 開閉ボタン（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) {
    /* パンくず下の区切り罫の直下に ABOUT が来る。上マージン 4px（8スケール外・要素間
     * 16px の下限割れ）だと罫との間が実質7pxで詰まって見えた（SHARE_CLO-524）。
     * 16px にすると右カラムの内容開始が左サイドバー（SEARCH見出し）の内容開始と
     * 同じ高さに揃う（実測: ABOUT字面上端 y=226.8 / SEARCH y=225.8）。
     * SP側（既定値 margin:14px 16px）は直上がh1で詰まりが無いため変更しない。 */
    .brand-intro--top {
        margin: 16px 0 24px;
        padding-bottom: 16px;
    }
    /* 下段はページャ（.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-item--sep::before {
        margin: 0 6px;
    }
    /* PCは常時全文表示のためボタン自体が不要（中身の非表示ではないので display:none で可） */
    .brand-intro .brand-intro__toggle {
        display: none;
    }
}

/* ================================================================
 * 取扱の実態バー（②）の中央揃え（SHARE_CLO-525）
 *
 * 上のページャ「全◯件中〜」も下の案内行も中央揃えのため、この1行だけ左詰めだと
 * 帯が途中で切れて見える。ただし中央寄せは折り返しの最終行（孤立行）を帯の
 * 真ん中に置いて最も目立たせるため、「1行に収まることが保証できる幅」でだけ効かせる。
 *
 * 閾値を 1280px にした理由:
 *   この文言が出るのは ft 全86ブランド中9ブランド（B025/B031/B032/B040/B041/B044/
 *   B047/B050/B064）。最長は B031 の 859.1px で、1280px 以上はコンテナ内寸が
 *   908px で固定されるため9ブランドすべてが1行に収まる（最悪ケースの余裕 48.9px）。
 *   1240px を閾値にすると内寸868pxで B031 の余裕は 8.9px しか残らず、文言
 *   （DB集計＝取扱点数・料金レンジ）が少し伸びただけで2行に割れて孤立行が中央に
 *   ぶら下がる。1280px 未満は既定の左揃えのまま＝孤立行は行頭に付いて段落として読める。
 *
 * 横 padding を 14px から動かさないこと:
 *   16px にすると内寸が 908→904px に縮み、B025 @1024px（文言 649.7px / 内寸 652px）が
 *   1.7px 足りずに新たに2行へ割れる。8スケール化の見た目上の利得より折り返しの害が大きい。
 *
 * SP（既定の左揃え）は変更しない。同じ文言が2〜3行に折り返して幅を埋めるため、
 * 中央寄せにすると和文のラグド両端になり読みにくい。
 * ================================================================ */
@media (min-width: 1280px) {
    .brand-intro .brand-intro__facts {
        text-align: center;
    }
}

/* ================================================================
 * 案内段の PC サイドバー内の寸法（SHARE_CLO-532）
 *
 * PCの案内段は幅280px（内寸248px）のサイドバーに入るため、PC既定
 * （@media min-width:768px の 14px / 12px）のままだと
 *   ・「2着届いてどちらかレンタルサー / ビス」と語の途中で改行される
 *   ・案内行が「最短翌日発送 ｜」で折り返し、区切り記号が行末に残る
 * という崩れ方をする（1280px幅のPC実描画で確認）。
 * サービス名は nowrap にして途中改行を禁じ、入りきらない場合は
 * 「詳細＞」だけが次行へ落ちるようにする。
 * 区切り記号の取り残しは font-size ではなく「｜を後続項目の ::before に含める」
 * （上の .brand-intro__service-item--sep）で解いた。
 *
 * 案内行（③-b）を10pxまで落とさない理由（designer 判定・2026-08-16）:
 *   この行は発送・返却という約束を述べる「本文」であり、記号的バッジ（チップ12px）とは
 *   性質が違う。PC小14px・SP小12px のどちらも下回る値を本文に使うと、正本の下限が
 *   実質10pxに書き換わる前例になる。1行厳守より可読性を採り、14pxのまま2行折返しを許容する。
 *   （実測: 10px時の行内容量221.7px / 内寸246px → 14pxで約310px＝2行）
 *
 * この節は @media(min-width:768px) より後に置くことで、同じ詳細度(0,2,0)の
 * PC既定値を後勝ちで上書きする（!important も詳細度の水増しもしない）。
 * セレクタは .pc-search-sidebar 配下に限定しているので、SPと
 * ページャ下の②バーには一切影響しない。
 * ================================================================ */
.pc-search-sidebar .brand-intro__twodress {
    padding: 8px 10px 9px;
}
.pc-search-sidebar .brand-intro__twodress-main {
    font-size: 12px;
}
.pc-search-sidebar .brand-intro__twodress-name {
    white-space: nowrap;
}
.pc-search-sidebar .brand-intro__twodress-link {
    margin-left: 6px;
    font-size: 11px;
}
.pc-search-sidebar .brand-intro__service {
    /* PC小の下限14px（design-system.md）を守る。2行に折り返してよい */
    font-size: 14px;
}
.pc-search-sidebar .brand-intro__service-item--sep::before {
    /* 狭い幅では区切りの左右余白を詰める（記号の前後で行が割れやすくなるのを防ぐ） */
    margin: 0 2px;
}