/* ==================================================================
 * T2-3 LP「レースと刺繍」専用CSS
 * 対象: 営業モック T2-3_LP_PC_v5.html / T2-3_LP_SP_v5.html の
 *       <style> から、このLPブロック固有のスタイルのみを抽出。
 *
 * スコープ: 全セレクタを .t2lp 配下に限定。
 *   .t2lp 外へ影響するグローバルタグセレクタ・body直下上書きは書かない。
 *
 * 色: CSS変数（var(--ink) 等）は使わず、すべて具体色（#161135 / #cc9d52 /
 *     #4b71ac / #f3f5f9）で直接記述する。理由: 本番環境で
 *     webroot/css/color.css の --t2lp-* トークン追記がデプロイ未反映のまま
 *     このファイルだけ先に配信され、var()が解決できずbackground等が
 *     transparent化して不可視になる事故が起きたため（2026-07 実機確認）。
 *     以後、このLPのCSSはデプロイ順序に依存しないよう具体色で書く。
 *
 * 除外したもの（このファイルには含めない）:
 *   - :root 直下の重複トークン定義（→ color.css の --t2lp-* に一本化）
 *   - *{box-sizing:border-box;} 等のリセットCSS（既存 head 側で担保）
 *   - body{...} の全体スタイル（既存 head 側で担保）
 *   - .font-bodoni（Tailwind fontFamily.bodoni ユーティリティで対応。
 *     見出しは font-bodoni クラスを .ctp 側で直接使用する）
 *   - .text-blue-2 / .text-gold / .bg-gray-2 / .bg-blue-main /
 *     .text-black-main-2（モック内コメントに「color.css 由来」と明記。
 *     既存 webroot/css/color.css のクラスをそのまま使う想定なので
 *     ここでは再定義しない）
 *
 * 共通化したもの（PC/SP で重複していたものを1箇所にまとめた）:
 *   - .eyebrow / .rule-gold（アイブロウ＋ゴールド極細罫）
 *   - .imgslot 系（画像スロットのフォールバック表示）
 *   - .btn-ink / .btn-out（ボタン）
 *   - .price b（価格の強調色。PC側 .item_box .price b と
 *     SP側 .overview .price b は最終的に同一の見た目のため
 *     .t2lp .price b に統合し、個別セレクタでの重複定義をやめた）
 * ================================================================ */

/* ---- 共通パーツ（PC/SP） ---- */

/* アイブロウ（英字ラベル）＋ゴールド極細罫 */
.t2lp .eyebrow{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  letter-spacing:.22em;
  color:#cc9d52;
  font-size:12px;
}
.t2lp .rule-gold{
  height:1px;
  width:40px;
  background:#cc9d52;
}

/* 画像スロット（droppable）: 画像が無ければグラデ＋ラベルにフォールバック */
.t2lp .imgslot{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1d1840,#161135 60%);
}
.t2lp .imgslot>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.t2lp .imgslot>.imgslot-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  letter-spacing:.18em;
  color:rgba(255,255,255,.45);
  font-size:13px;
  text-align:center;
  padding:0 1rem;
}

/* FV見出しH1（福さんフィードバック③）: Bodoni Modaはラテン文字専用フォントのため、
 * 和文（かな・漢字）には効かずブラウザ既定の明朝にフォールバックしていた
 * （野暮ったい見た目の原因）。.ctp 側で読み込んだ Shippori Mincho（和文明朝）を
 * 第一候補にし、欧文が混在しても崩れないよう Hiragino Mincho ProN / 游明朝を
 * フォールバックに並べる。結婚式LPらしい落ち着いたトーンに、字間をやや広げ、
 * 行間も詰めすぎず余裕を持たせる。 */
.t2lp .hero-h1{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:600;
  letter-spacing:.04em;
  color:#161135;
  /* サイズは具体値で明示（Tailwind任意値 text-[..] は現行distで効かないため。
   * 議事録A-1: 引きの強いタイトルは福さん再検討＝後工程だが、レイアウトとしての
   * 見出しサイズはここで確定させておく）。 */
  font-size:2.4rem;
  line-height:1.5;
}
@media(min-width:768px){
  .t2lp .hero-h1{
    font-size:2.2rem;
    line-height:1.5;
  }
}
/* ヒーロー本文リード（PC/SP共通・白文字。text-[15px]/text-white/85 の代替） */
.t2lp .hero-lead{
  font-size:15px;
  line-height:1.9;
  color:rgba(255,255,255,.85);
}
/* PC側は #hero .hero-copy 配下（.hero-copy はPC専用ラッパー）、
 * SP側は #page-body #hero 配下がそれぞれ画像フルブリード背景に白文字で乗る
 * （今回の単一画像ヒーロー差し替えでSP側も画像上にテキストを重ねる構成になったため、
 * PC/SPどちらも白文字にする。以前は「SP側は白背景セクション」だったが、
 * その前提が変わったことに伴う変更）。 */
.t2lp #hero .hero-copy .hero-h1,
.t2lp #page-body #hero .hero-h1{
  color:#fff;
}

/* ボタン */
.t2lp .btn-ink{
  background:#161135;
  color:#fff;
  transition:.2s;
}
.t2lp .btn-ink:hover{
  background:#2a2363;
}
.t2lp .btn-out{
  border:1px solid rgba(22,17,53,.3);
  color:#161135;
  transition:.2s;
}
.t2lp .btn-out:hover{
  background:#f3f5f9;
}

/* ヒーロー（PC）: 単一フルブリード画像（hero_pc_mame.webp／モデル右寄り構図）。
 * 旧3分割トリプティクは撤去。テキストは画像左の空きスペースに左寄せで重ねるため、
 * スクリムは左→右に薄くなる linear-gradient（左側だけ可読性を確保し、
 * 右のモデルには被せない）。福さん指示による構図変更（v5参考の
 * grid-cols-2「テキスト左/ビジュアル右」）。
 * 注: SP版 t2lp.ctp（Mobile）にも同じ id="hero" のセクションが存在するが、
 * 構造がまったく別物（DOM は #page-body 配下、画像は縦長 hero_sp_mame.webp）。
 * height指定はPC/SP兼用IDに漏れて事故るため、直後の「ヒーロー（SP）」ブロックで
 * #page-body #hero に対して height:auto 等の明示的な打ち消しを入れている。 */
.t2lp #hero{
  height:640px;
}
.t2lp #hero .imgslot>img{
  object-position:center;
}
.t2lp #hero .hero-scrim{
  background:linear-gradient(90deg, rgba(22,17,53,.72) 0%, rgba(22,17,53,.52) 32%, rgba(22,17,53,.18) 58%, rgba(22,17,53,.05) 75%, rgba(22,17,53,0) 100%);
}
.t2lp #hero .hero-copy{
  padding:2.25rem 2rem;
}
.t2lp #hero .hero-btn-out{
  border:1px solid rgba(255,255,255,.55);
  background:rgba(22,17,53,.12);
}
.t2lp #hero .hero-btn-out:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.75);
}
@media(max-width:640px){
  .t2lp #hero{
    height:520px;
  }
}

/* ヒーロー（SP）: 単一フルブリード画像（hero_sp_mame.webp／縦長・モデル中央）。
 * 旧「テキストのみブロック＋横帯トリプティク」の2セクション構成を撤去し、
 * 画像上にテキストを重ねる1セクション構成に統一（福さん指示）。
 * 上の「ヒーロー（PC）」ブロックの height:640px / (max-width:640px)height:520px は
 * PC用固定高さヒーロー向けのため、SP側 #page-body #hero では明示的に打ち消す。
 * element('new/masthead') が position:absolute のオーバーレイヘッダーのため、
 * ヒーロー本文がヘッダー（ロゴ・ハンバーガーボタン）の下に食い込まないよう
 * 上部に十分な余白を確保する（実測ヘッダー下端72pxに余裕を持たせ padding-top:6.5rem）。
 * この「ヘッダー被り回避の上余白」は今回の差し替えでも維持する。
 * テキストは画像上部に配置しスクリムで可読性を確保、画像下部（モデル部分）には
 * 被せない構図とするため高さは十分に確保する。 */
.t2lp #page-body #hero{
  height:520px;
}
.t2lp #page-body #hero .hero-scrim{
  background:linear-gradient(180deg, rgba(22,17,53,.82) 0%, rgba(22,17,53,.58) 26%, rgba(22,17,53,.22) 50%, rgba(22,17,53,0) 70%);
}
/* テキストは画像に absolute で重ねる（.imgslot が通常フローで520pxの高さを
 * 持つため、テキストブロックを position:static のままにすると画像の下に
 * 押し出されてしまう。Playwright実機検証で発見・修正）。
 * 旧#heroセクション自体に付けていた padding-top:6.5rem はabsolute要素には
 * 効かない（containing blockのedge基準になるため）ので、このテキストブロック
 * 自身に同じ量を top で指定し、ヘッダー被り回避の上余白を維持する。
 * 福さん第4弾FB①: top:6.5rem(104px)だとコンテンツ下端〜画像下端の空きが
 * 上の空きの約1.6倍あり「上寄りで下に空きが余る」とeng-qa実機診断。
 * 上下の空きがほぼ対称になる目安値 top:8.25rem(132px) に変更。
 * ハンバーガーボタン(position:fixed、bottom実測55px)との被り回避マージンは
 * 104px→132pxで49px→77pxに拡大するため、ヘッダー被りリスクはむしろ低下する。 */
.t2lp #page-body #hero .hero-copy-sp{
  top:8.25rem;
  text-shadow:0 1px 10px rgba(22,17,53,.6), 0 1px 2px rgba(22,17,53,.5);
}

/* 日程検索カード（SP）: #dates と直後の質感アクセント帯（.my-5）の
 * marginが積み上がって間延びして見えるため、上下マージンを詰める
 * （福さんフィードバック：「利用期間を選択」の下に無駄な余白）。
 * 見出し「利用期間を選択」（rental_period_search内 .m-rental-period-input の
 * placeholder文言）は中央寄せにする（福さんフィードバック：文言が左寄り）。
 * 注: 以前は .ctp 側に Tailwind my-4 も残したまま margin-bottom:.75rem を
 * 指定していたが、my-4 が tailwind.config.js の important:true により
 * !important 付きで出力され、!important無しのこのCSSが負けて余白が
 * 戻っていた（Playwright実機測定: computed margin-bottom が 16px のまま）。
 * .ctp 側の my-4 は外し、margin は必ずここで !important 付きに統一する。 */
.t2lp #page-body #dates{
  margin-top:1rem !important;
  margin-bottom:.75rem !important;
}
.t2lp #page-body #dates .m-rental-period-row{
  justify-content:center;
  text-align:center;
}
.t2lp #page-body #dates .m-rental-period-input{
  text-align:center;
  flex:0 1 auto;
  max-width:9.5em;
}

/* 「2着どちらかレンタル可」バッジ（福さんフィードバック②）: 共有element
 * twodresslabel.ctp の既存クラス（bg-blue-400/text-white、Tailwind important:true で
 * !important 付き）は .t2lp スコープ内でのみ上書きする。非LP（brandproducts等）の
 * 見た目は変えない。青ベースをやめ、LPの上質な配色＝ゴールド系（#cc9d52）に統一。
 * 背景ゴールド×濃インク文字（枠線は付けず、既存 rounded の角丸のみ活かす）。 */
.t2lp .twodress-label{
  background:rgba(204,157,82,.22) !important;
  color:#8a6a34 !important;
  font-family:"Bodoni Moda",serif;
  letter-spacing:.02em;
  font-weight:500;
  font-size:10px !important;
  padding:2px 8px !important;
}

/* 価格の強調色（PC: .item_box .price b / SP: .overview .price b 共通） */
.t2lp .price b{
  color:#4b71ac;
  font-weight:500;
}

/* 日程検索カード（PC/SP共通）: 実 element('rental_period_search') をそのまま
 * .dates-form-card 配下に流し込み、element自身が持つインラインstyleタグの
 * 素朴な見た目（幅80%の中央寄せバー等）をここで1枚のカードに整形し直す。
 * element自体（.ctp/JS/計測用クラス名）は無変更。 */
.t2lp .dates-form-card .rental-period-filter{
  background:#fff;
  width:100%;
  padding:0;
  border:1px solid rgba(22,17,53,.1);
  box-shadow:0 1px 0 rgba(22,17,53,.04);
}
.t2lp .dates-form-card .rental-period-filter__form{
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  padding:20px;
  font-size:13px;
}
.t2lp .dates-form-card .rental-period-filter__label{
  color:#161135;
  opacity:.6;
}
.t2lp .dates-form-card .rental-period-filter__input{
  border-color:rgba(22,17,53,.2);
  border-radius:4px;
  font-size:13px;
}
.t2lp .dates-form-card .rental-period-filter__button{
  display:inline-block;
  background:#4b71ac !important;
  color:#fff !important;
  border:none !important;
  min-width:88px;
  white-space:nowrap;
  border-radius:4px;
  padding:8px 22px;
}
.t2lp .dates-form-card .rental-period-filter__button:hover{
  background:#4b71ac !important;
  opacity:.9;
}
.t2lp .dates-form-card .rental-period-filter__clear{
  border-color:rgba(22,17,53,.2);
  color:#161135;
  opacity:.7;
  border-radius:4px;
}

/* ---- 商品グリッド：PC（流用 Itemlist/index.ctp 相当） ---- */
/* 福さんフィードバック（PCグリッド追加1件）: 商品カード画像サイズが不揃い。
 * 原因: webroot/css/productlist.css（.t2lpスコープ外・全ページ共通CSSで
 * t2lp.cssより前に読み込まれる）に非スコープの `.item_box{float:left}` が
 * 存在し、t2lp.css側の `.t2lp .item_box{position:relative}` は position しか
 * 上書きしていなかったため float:left が生き残っていた。float:left かつ
 * width未指定の要素は shrink-to-fit（内容物依存の幅）になり、画像の
 * aspect-ratio・商品名の文字数などカードごとの内容差でカード毎に
 * .item_pic（＝画像枠 .imgslot）の実効幅がバラついていた
 * （Playwright実測: 152px/125px/119px と不揃いを確認、aspect-ratio自体は
 * 3/4で全カード一致していたため aspect-ratio は無罪と判明）。
 * 同じく productlist.css の `#contents{display:inline-block}` も
 * shrink-to-fit の原因になり得るため合わせて明示的に打ち消す。
 * 修正後はPlaywright実測で在庫あり／入荷リクエスト(details内)の
 * 全カードにおいて .imgslot の width/height が完全一致することを確認済み。 */
.t2lp #contents{
  display:block;
}
.t2lp #itemlist{
  width:100%;
  padding-top:8px;
  padding-bottom:40px;
}
.t2lp #item_inner{
  width:100%;
  max-width:1180px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
}
/* 議事録 A-11/D-5: 画像を大きく見せるためPCは4列→3列に。SPは2列（後段@media）。
 * （厳密な「2列」はSPグリッドの決定。PC 2列は1枚が過大になるため3列で運用し、
 *  福さんレビューで最終確定する想定）。
 * → 福さん第2弾レビュー⑤: 3列は1枚あたりが大きすぎるため、元の4列に戻す。 */
.t2lp li.item_list{
  list-style:none;
  width:25%;
  padding:0 .9rem;
  margin-bottom:2.4rem;
}
.t2lp .item_box{
  position:relative;
  float:none;
  width:100%;
}
.t2lp .item_pic{
  position:relative;
}
.t2lp .item_pic .imgslot{
  aspect-ratio:3/4;
  background:linear-gradient(135deg,#f3f5f9,#e9ebf2);
}
.t2lp .item_pic .imgslot-label{
  color:rgba(22,17,53,.35);
  font-size:12px;
}
.t2lp .item_com{
  text-align:left;
  padding-top:.7rem;
}
.t2lp .item_name{
  font-family:"Bodoni Moda",serif;
  font-size:12px;
  letter-spacing:.08em;
  color:#161135;
  margin:0;
}
.t2lp .item_currency{
  font-size:12px;
  line-height:1.45;
  color:rgba(22,17,53,.55);
  margin:.25rem 0 0;
  min-height:2.6em;
}
.t2lp .item_box .price{
  display:block;
  font-size:11px;
  color:rgba(22,17,53,.5);
  margin-top:.25rem !important;
}
.t2lp .card-a{
  display:block;
}
.t2lp .card-a:hover .imgslot>img,
.t2lp .card-a:hover .imgslot{
  filter:brightness(.98);
}
@media(prefers-reduced-motion:no-preference){
  .t2lp .imgslot,
  .t2lp .imgslot>img{
    transition:transform .5s ease,filter .3s ease;
  }
  .t2lp .card-a:hover .imgslot{
    transform:translateY(-2px);
  }
}
@media(max-width:1024px){
  .t2lp li.item_list{
    width:33.33%;
  }
}
@media(max-width:640px){
  .t2lp li.item_list{
    width:50%;
  }
}

/* ---- 商品グリッド：SP（流用 Mobile/Itemlist/index.ctp 相当） ---- */
.t2lp .widget-item .row{
  display:flex;
  flex-wrap:wrap;
}
.t2lp .card-product{
  width:50%;
  padding:0 .35rem;
  margin-bottom:1.6rem;
}
.t2lp .image .imgslot{
  aspect-ratio:100/120;
  background:linear-gradient(135deg,#f3f5f9,#e9ebf2);
}
.t2lp .image .imgslot-label{
  color:rgba(22,17,53,.35);
  font-size:10px;
}
.t2lp .overview{
  padding-top:.5rem;
}
.t2lp .overview .name{
  line-height:1.3;
  margin:.15rem 0;
}
.t2lp .overview .brand{
  font-family:"Bodoni Moda",serif;
  font-size:12px;
  letter-spacing:.06em;
  color:#161135;
}
.t2lp .overview .pname{
  font-size:12px;
  color:rgba(22,17,53,.55);
}
.t2lp .overview .price{
  display:block;
  font-size:11px;
  color:rgba(22,17,53,.5);
  margin-top:.25rem !important;
}

/* ---- ブランドpill/区切り：PC/SP共通クラス名のため @media(max-width:640px) で分離 ----
 * .brand-pill / .brand-divider / .brand-pillnav は tagproducts.ctp(PC) と
 * t2lp.ctp(SP) の両方で同一クラス名を使用しているため、後勝ち事故を避けるべく
 * PC用は無条件（min-width:641px 相当）、SP用は既存ブレークポイント
 * @media(max-width:640px) でスコープする。
 */
.t2lp .brand-pillnav{scroll-margin-top:0;}
.t2lp .brand-pill{display:block;flex:1;text-align:center;border:1px solid rgba(22,17,53,.15);color:#161135;
  font-family:"Bodoni Moda",serif;font-size:13px;letter-spacing:.06em;padding:.8rem 1rem;background:#fff;transition:.2s;}
.t2lp .brand-pill:hover{background:#f3f5f9;border-color:rgba(22,17,53,.3);}
/* 福さんフィードバック（PCグリッド追加1件）: PC版で2ブランド目以降の区切り見出し
 * （MURRAL / YOKO CHAN）の上のスペースが無く、前ブランド最終行カードと接近して
 * 見える（1ブランド目=Mameは:first-childで問題なし）。
 * .brand-divider は li.item_list を兼ねるため、webroot/css/productlist.css の
 * 非スコープ `li.item_list{...}`（width:25%/padding-left:1rem 等）と
 * margin-top指定順で競合し得る。他LP箇所（#dates 等）と同じく、
 * Tailwind important:true や非スコープCSSとの競合に左右されず確実に
 * margin-topを効かせるため !important を付ける（PCのみ。SP側は現状で
 * 視認上問題ないため@media(max-width:640px)側は変更しない）。 */
.t2lp .brand-divider{scroll-margin-top:0;width:100%;text-align:center;margin:4rem 0 1.4rem !important;padding-top:2.4rem !important;border-top:1px solid rgba(22,17,53,.08);}
.t2lp .brand-divider:first-child{border-top:none;padding-top:0;margin-top:0 !important;}
.t2lp .brand-divider p{font-family:"Bodoni Moda",serif;font-size:13px;letter-spacing:.12em;color:rgba(22,17,53,.5);}

@media(max-width:640px){
  .t2lp .brand-pillnav-wrap,.t2lp .brand-divider{scroll-margin-top:68px;}
  .t2lp .brand-pillnav{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 1rem .3rem;}
  .t2lp .brand-pillnav::-webkit-scrollbar{display:none;}
  .t2lp .brand-pill{flex:0 0 auto;white-space:nowrap;border:1px solid rgba(22,17,53,.15);color:#161135;
    font-family:"Bodoni Moda",serif;font-size:12px;letter-spacing:.05em;padding:.6rem 1.1rem;background:#fff;border-radius:999px;}
  .t2lp .brand-divider{width:100%;text-align:center;margin:1.6rem 0 1rem;padding-top:1.2rem;border-top:1px solid rgba(22,17,53,.08);}
  .t2lp .brand-divider:first-child{border-top:none;padding-top:0;margin-top:0;}
  .t2lp .brand-divider p{font-family:"Bodoni Moda",serif;font-size:12px;letter-spacing:.1em;color:rgba(22,17,53,.5);}
}

/* 福さんフィードバック⑤: 各ブランド区切り(.brand-divider)直下のブランド説明文枠。
 * .brand-divider は li.item_list(PC) / w-full(SP) を兼ねるため、説明文はその
 * liの中の2つ目のpタグとして追加している（.ctp側）。ここでは見た目のみ整える。
 * プレースホルダのため中身はTODO(copy)。 */
.t2lp .brand-divider p.brand-blurb{
  margin-top:.4rem;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.02em;
  line-height:1.85;
  color:rgba(22,17,53,.6);
  max-width:32rem;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:640px){
  .t2lp .brand-divider p.brand-blurb{
    font-size:10.5px;
    padding:0 1rem;
  }
}

/* 福さんフィードバック④: 新設の訴求ブロック（なぜこのドレスたちを選んだか）。
 * ブランド固有の断定は書かず枠のみ。プレースホルダのため色は控えめに。 */
.t2lp .reason-block{
  border-top:1px solid rgba(22,17,53,.08);
  border-bottom:1px solid rgba(22,17,53,.08);
  padding-top:2rem;
  padding-bottom:2rem;
}

/* ---- 入荷リクエスト受付中の折りたたみ（PC/SP共通）：福さんフィードバック①。
 * メイングリッドの下に <details> で隔離する。summary はグリッド見出しと
 * 揃うトーン（明朝の家紋のような佇まいは付けず、既存 eyebrow/item_name と
 * 同系統のシンプルな装飾に留める）。開いた時の内側リストは既存
 * #item_inner / .row の余白ルールを流用するため個別の幅指定は追加しない。 */
.t2lp .backorder-details{
  border-top:1px solid rgba(22,17,53,.1);
  padding-top:1.75rem;
}
.t2lp .backorder-summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:"Bodoni Moda",serif;
  font-size:13px;
  letter-spacing:.06em;
  color:rgba(22,17,53,.6);
  text-align:center;
}
.t2lp .backorder-summary::-webkit-details-marker{
  display:none;
}
.t2lp .backorder-summary::after{
  content:"▾";
  font-family:inherit;
  color:#cc9d52;
  transition:transform .2s ease;
}
.t2lp details[open] .backorder-summary::after{
  transform:rotate(180deg);
}
.t2lp .backorder-details > summary.backorder-summary{
  display:flex;
  justify-content:center;
  width:100%;
  padding:.5rem 0;
}

/* ---- 質感アクセント帯 / 「借りられない日」補足：PC/SP共通クラス（福さんフィードバック：
 * 前後の余白が間延びして見える／無駄）。
 * PC: src/Template/Products/tagproducts.ctp、SP: plugins/Mobile/…/t2lp.ctp では
 * SP側の質感アクセント帯には元々 .my-5（Tailwind）のみで !important 競合が
 * 起きていなかったためクラスは変更していない。PC側は .accent-band / .supply-note
 * クラスに置き換え、Tailwind の my-14 / my-2 / py-12 を外した上でここに一本化した
 * （important:true の !important に負けて余白詰めが効かない事故を避けるため）。
 * SP側の #dates 同様、この2クラスの margin/padding は必ず !important を付ける。 */
.t2lp .accent-band{
  margin-top:2.5rem !important;
  margin-bottom:2.5rem !important;
}
.t2lp .supply-note{
  margin-top:.5rem !important;
  margin-bottom:.5rem !important;
  padding-top:2.5rem !important;
  padding-bottom:2.5rem !important;
}
@media(max-width:640px){
  /* SP: p-4(16px)ベースの補足ボックス自体は据え置き、外側マージンのみ詰める
   * （.ctp 側で my-6 を外し supply-note クラスに置き換え済み）。 */
  .t2lp .supply-note{
    margin-top:1.25rem !important;
    margin-bottom:1.25rem !important;
    padding-top:1rem !important;
    padding-bottom:1rem !important;
  }
}

/* ---- 2着同時レンタル案内ブロック: supply-note（借りられない日）と同様、
 * 見出し＋本文段落を持つしっかりした体裁の独立ブロック。PC/SP共通クラス。
 * supply-note の直後に置く。LPの上質なトーン（インク#161135・ゴールド#cc9d52）に閉じ、
 * 派手にしすぎない淡いゴールドの背景＋枠線のみで視認性を確保する。 */
.t2lp .twodress-block{
  background:rgba(204,157,82,.08);
  border:1px solid rgba(204,157,82,.35);
  border-radius:4px;
  padding:1.75rem 1.5rem;
}
.t2lp .twodress-block h3{
  letter-spacing:.03em;
}
@media(max-width:640px){
  .t2lp .twodress-block{
    padding:1.25rem 1rem;
  }
}
/* 確定コピー差し込み: 本文の淡色（text-ink/70 は現行distで無効なため具体色で補う）＋誘導リンク */
.t2lp .twodress-block p{
  color:rgba(22,17,53,.66);
}
.t2lp .twodress-link{
  color:#8a6a34;
  text-decoration:underline;
}

/* ==================================================================
 * 2026-07 LPレビュー議事録 反映で追加したコンポーネント群。
 * 既存方針どおり .t2lp スコープ・具体色のみ。Tailwind任意値(text-[..]/text-ink)は
 * 現行distで無効なため、色・サイズは全てここで具体値指定する。
 * （追従CTA .t2lp-sticky-cta のみ .t2lp 外に置くため非スコープ。t2lp.cssはLPでしか
 *  読み込まれないので他ページへは影響しない。）
 * ================================================================== */

/* --- ヒーロー直下CTA帯（議事録 D-4/A-3: ボタンを画像に被せず下へ）--- */
.t2lp .hero-cta{
  background:#fff;
  padding:1.9rem 1rem 1.35rem;
  text-align:center;
}
.t2lp .hero-cta-inner{
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
  max-width:640px;
  margin:0 auto;
}
.t2lp .hero-cta-btn{
  display:inline-block;
  min-width:236px;
  padding:.95rem 1.5rem;
  font-size:14px;
  letter-spacing:.04em;
  text-align:center;
}
.t2lp .hero-brands{
  margin-top:1rem;
  font-size:11px;
  letter-spacing:.15em;
  color:rgba(22,17,53,.5);
}
@media(max-width:640px){
  .t2lp .hero-cta{padding:1.25rem 1rem 1rem;}
  .t2lp .hero-cta-inner{flex-direction:column;gap:.6rem;}
  .t2lp .hero-cta-btn{width:100%;min-width:0;}
  .t2lp .hero-lead{font-size:13px;line-height:1.85;}
}
@media(max-width:640px){
  .t2lp #page-body #hero .hero-h1{font-size:1.6rem;line-height:1.55;}
}

/* --- なぜ選んだか（本文）--- */
.t2lp .reason-h2{font-size:1.5rem;color:#161135;letter-spacing:.03em;}
.t2lp .reason-lead{font-size:14px;line-height:1.9;color:rgba(22,17,53,.62);}
@media(max-width:640px){
  .t2lp .reason-h2{font-size:1.15rem;}
  .t2lp .reason-lead{font-size:12.5px;line-height:1.8;}
}

/* --- ブランドカード（議事録 D-8/A-10/A-11/A-13）---
 * PC: 2列（flex + justify-center。3ブランドの3枚目は中央寄せで1枚）。
 * SP: 横スクロールさせず縦に3枚（コンパクトな横並びカードで1画面に収める）。 */
.t2lp .brand-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.25rem;
  max-width:52rem;
}
.t2lp .brand-card{
  flex:0 0 calc(50% - .625rem);
  max-width:calc(50% - .625rem);
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(22,17,53,.1);
  border-radius:6px;
  overflow:hidden;
  text-align:left;
  transition:.2s;
}
.t2lp .brand-card:hover{
  border-color:rgba(204,157,82,.5);
  box-shadow:0 6px 20px rgba(22,17,53,.08);
}
.t2lp .brand-card-img{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#f3f5f9,#e9ebf2);
}
.t2lp .brand-card-body{padding:1rem 1.1rem 1.2rem;}
.t2lp .brand-card-name{
  font-family:"Bodoni Moda",serif;
  font-size:15px;
  letter-spacing:.08em;
  color:#161135;
}
.t2lp .brand-card-blurb{
  margin-top:.5rem;
  font-size:12px;
  line-height:1.8;
  color:rgba(22,17,53,.6);
}
.t2lp .brand-card-link{
  display:inline-block;
  margin-top:.75rem;
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-size:12px;
  letter-spacing:.06em;
  color:#8a6a34;
}
.t2lp .brand-card-link::after{content:" \2192";}
/* 「こういう方・シーンにおすすめ」per-brand化（福さん第2弾レビュー③）:
 * 旧・独立セクション.occasion-blockを廃止し、ブランドカード内の一言としてマイクロコピー化。
 * ブランド説明(.brand-card-blurb)と一覧リンク(.brand-card-link)の間に挟む1行。 */
.t2lp .brand-card-occasion{
  margin-top:.5rem;
  font-size:12px;
  letter-spacing:.02em;
  color:#8a6a34;
}
@media(max-width:640px){
  .t2lp .brand-cards-sp{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:.6rem;
  }
  .t2lp .brand-cards-sp .brand-card{
    flex:0 0 auto;
    max-width:none;
    flex-direction:row;
    align-items:stretch;
  }
  .t2lp .brand-cards-sp .brand-card-img{
    flex:0 0 36%;
    aspect-ratio:auto;
    min-height:100%;
  }
  .t2lp .brand-cards-sp .brand-card-body{
    flex:1;
    padding:.6rem .75rem;
  }
  .t2lp .brand-cards-sp .brand-card-name{font-size:14px;}
  /* 福さん第2弾レビュー②: SPのブランド説明は2行clampをやめて全文表示にする。
   * 横並びカードでテキストが伸びる分、上下の余白(padding/margin-top)は少し詰めて間延びを抑える。 */
  .t2lp .brand-cards-sp .brand-card-blurb{
    margin-top:.25rem;
    font-size:11px;
    line-height:1.55;
  }
  .t2lp .brand-cards-sp .brand-card-occasion{
    margin-top:.3rem;
    font-size:11px;
  }
  .t2lp .brand-cards-sp .brand-card-link{margin-top:.3rem;}
}

/* --- 日程CTA 見出し/注記（具体色）--- */
.t2lp .dates-h2{font-size:1.5rem;color:#161135;}
.t2lp .dates-note{font-size:12px;line-height:1.7;color:rgba(22,17,53,.55);}
@media(max-width:640px){
  .t2lp .dates-h2{font-size:.95rem;}
  .t2lp .dates-note{font-size:11px;}
  .t2lp #page-body #dates{border:1px solid rgba(22,17,53,.15);}
}

/* --- 借りられない日 / 2着（text-ink無効の代替。具体色）--- */
.t2lp .supply-h2{font-size:1.5rem;color:#161135;}
.t2lp .supply-p{font-size:14px;line-height:1.9;color:rgba(22,17,53,.65);}
.t2lp .twodress-h3{font-size:1.25rem;color:#161135;}
.t2lp .twodress-p{font-size:14px;line-height:1.9;color:rgba(22,17,53,.7);}
@media(max-width:640px){
  .t2lp .supply-h2{font-size:1rem;}
  .t2lp .supply-p{font-size:13px;line-height:1.85;}
  .t2lp .twodress-h3{font-size:1rem;}
  .t2lp .twodress-p{font-size:13px;line-height:1.85;}
  .t2lp .supply-note{border:1px solid rgba(22,17,53,.12);border-radius:6px;}
}

/* --- もっと見る（福さん第2弾レビュー④: ブランドごとに表示。data-more-group で対応付け）--- */
.t2lp .t2-extra{display:none !important;}
.t2lp .more-wrap{text-align:center;margin:.5rem 0 2.5rem;}
/* per-brandの「もっと見る」li。#item_inner(PC)/ul.row(SP)のflex子要素として
 * brand-dividerと同様に1行まるごと使う。list-style/paddingは自前で完結させ、
 * 既存 li.item_list / w-1/2 等の余白指定と競合しないようにする。 */
.t2lp li.more-wrap{
  list-style:none;
  width:100%;
  padding:0;
}
.t2lp .more-btn{
  display:inline-block;
  border:1px solid rgba(22,17,53,.3);
  background:#fff;
  color:#161135;
  font-family:"Bodoni Moda",serif;
  letter-spacing:.08em;
  font-size:13px;
  padding:.8rem 2.6rem;
  cursor:pointer;
  transition:.2s;
}
.t2lp .more-btn:hover{background:#161135;color:#fff;}
.t2lp .more-btn::after{content:" \2193";}

/* --- レンタルの流れ（議事録 A-8。トップ index.ctp「ご利用の流れ」から流用・簡略化）--- */
.t2lp .howflow{
  background:#f7f8fb;
  padding:3rem 0;
  margin-top:3rem;
}
.t2lp .howflow-title{font-size:1.5rem;color:#161135;}
.t2lp .howflow-steps{
  list-style:none;
  display:grid;
  /* 福さん確定コピーでSTEP数が6→5に減ったため列数を合わせる（5個のまま6列だと
     空白セルができて崩れるため）。 */
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
  padding:0;
  margin:0 auto;
  max-width:62rem;
  counter-reset:hf;
}
.t2lp .howflow-step{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  counter-increment:hf;
}
/* トップの横長挿絵は小さな工程アイコンに不向きなため、番号バッジ（CSSカウンター）で表現。
 * ゴールドの極細円＋明朝数字でLPトーンに揃える。 */
.t2lp .hf-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(204,157,82,.6);
  background:#fff;
  font-family:"Bodoni Moda",serif;
  font-size:17px;
  color:#8a6a34;
}
.t2lp .hf-num::before{content:counter(hf);}
.t2lp .hf-name{
  margin-top:.6rem;
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-size:13px;
  color:#161135;
}
.t2lp .hf-desc{
  margin-top:.3rem;
  font-size:11px;
  line-height:1.6;
  color:rgba(22,17,53,.55);
}
@media(max-width:640px){
  /* .howflow / .howflow-title はPC/SP共通クラス（見た目調整のみ）なのでそのまま残す。
   * .howflow-steps / .hf-num / .hf-desc の2列grid・丸バッジ縮小は、旧SP実装（トップの丸バッジ2列）
   * 用の上書きだった。福さん第3弾FB・designer指示によりSPは縦タイムライン
   * （.howflow-timeline系。下記）へ作り直したため、この2列grid上書きは削除する。
   * PC(tagproducts.ctp)側の .howflow-steps / .hf-num はこのメディアクエリの外にある
   * ベース定義（6列grid・丸バッジ）のまま変更していない。 */
  .t2lp .howflow{padding:1.75rem 0;margin-top:1.5rem;border-radius:8px;}
  .t2lp .howflow-title{font-size:1.1rem;}
}

/* --- SP: 縦タイムライン「ご利用の流れ」（福さん第3弾FB・designer指示書）---
 * .howflow-timeline / .howflow-track / .howflow-list / .howflow-item 系は
 * plugins/Mobile/.../t2lp.ctp（SP専用テンプレ）でのみ使用するクラス名で、
 * PC側 tagproducts.ctp の .howflow-steps / .hf-num とは完全に独立している
 * （同名クラスの奪い合いが起きないよう新規クラス名にした）ため、@mediaで
 * 囲わなくてもPC表示に影響しない。 */
.t2lp .howflow-timeline{
  display:flex;
  gap:1rem;
  align-items:stretch;
}
/* eng-qa実機バグ修正: line.png(番号バッジ焼き込み済み固定画像・object-fit:cover)は
 * ステップの説明文が可変長でコンテンツ高さが変わるとバッジ位置とSTEP見出しがズレる
 * ため廃止。番号は.howflow-step-labelが担うので、線はCSSのみのシンプルな縦線に統一
 * （designer指示書の「実際の絵柄・伸縮方法が不明な場合はborder-left/グラデーションの
 * フォールバックで可」に準拠。色はゴールド系トーン#cc9d52を使用）。 */
.t2lp .howflow-track{
  flex:0 0 auto;
  width:2px;
  background:rgba(204,157,82,.5);
  align-self:stretch;
}
.t2lp .howflow-list{
  flex:1 1 auto;
  min-width:0;
  list-style:none;
  padding:0;
  margin:0;
}
.t2lp .howflow-item{
  display:flex;
  flex-direction:column;
  margin-top:2.25rem;
}
.t2lp .howflow-item:first-child{margin-top:0;}
.t2lp .howflow-step-label{
  font-family:"Bodoni Moda",serif;
  letter-spacing:.12em;
  font-size:10px;
  color:#8a6a34;
}
.t2lp .howflow-item-name{
  margin-top:.3rem;
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-size:13px;
  color:#161135;
}
.t2lp .howflow-item-desc{
  margin-top:.3rem;
  font-size:11px;
  line-height:1.6;
  color:rgba(22,17,53,.55);
}
.t2lp .howflow-item-img{
  width:100%;
  height:auto;
  margin-top:.75rem;
  display:block;
  border-radius:4px;
}

/* --- 最下部 質感アクセント帯（議事録 D-2/A-8。まとめ画像は未用意＝当面グラデのみ）---
 * 既存 .t2lp .accent-band（margin 2.5rem）を上書きし、最下部（フッター上）用に調整する。 */
.t2lp .accent-band{
  position:relative;
  overflow:hidden;
  min-height:220px;
  /* テキストオーバーレイ（通常フローの .relative div）を帯の縦中央に置く。
   * <img> と .accent-scrim は position:absolute; inset:0 でflowから外れているため
   * flex子にならず影響を受けない。左右中央は既存の text-center を維持しつつ
   * justify-content:center でブロック幅ぶんも中央に寄せる。 */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:0 !important;
  /* 福さん第3弾FB: 前回 margin-bottom:0 !important でフッターと密着してしまっていたため、
   * PC/SPともに適切な余白を戻す（PC目安3rem/SP目安1.5rem）。
   * ここは.accent-bandに競合するTailwindユーティリティ（my-*等）が.ctp側に無いため
   * !importantは本来不要だが、線551〜のコメント通りこのファイルはimportant:trueの
   * Tailwindに常時競り勝つ運用にしているため、既存の書式に合わせてそのまま残す。 */
  margin-bottom:3rem !important;
}
.t2lp .accent-scrim{background:rgba(22,17,53,.35);}
.t2lp .accent-h{font-size:1.6rem;letter-spacing:.04em;}
.t2lp .accent-sub{font-size:13px;color:rgba(255,255,255,.75);}
@media(max-width:640px){
  .t2lp .accent-band{min-height:380px;margin-top:1.5rem !important;margin-bottom:1.5rem !important;}
  .t2lp .accent-h{font-size:1.25rem;}
  .t2lp .accent-sub{font-size:12px;}
}

/* --- 追従CTA（議事録 A-9: 上スクロールで出現・下で隠す。小さめ・高級感を保つ）---
 * .t2lp 外に配置するため非スコープ。t2lp.css はLPでのみ読込＝他ページ非影響。 */
.t2lp-sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  justify-content:center;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(255,255,255,.97), rgba(255,255,255,.8) 65%, rgba(255,255,255,0));
  transform:translateY(130%);
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
  pointer-events:none;
}
.t2lp-sticky-cta.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.t2lp-sticky-btn{
  display:inline-block;
  background:#161135;
  color:#fff;
  font-size:13px;
  letter-spacing:.06em;
  padding:.85rem 2rem;
  border-radius:2px;
  box-shadow:0 6px 20px rgba(22,17,53,.25);
  text-align:center;
}
.t2lp-sticky-btn:hover{background:#2a2363;}
@media(min-width:768px){
  .t2lp-sticky-btn{min-width:280px;}
}