/* ==================================================================
 * 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;
}

/* ボタン */
.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）: 中央オーバーレイの座り・スクリム濃度を調整。
 * 画像の明暗に左右されないよう縦方向グラデに加えて中央へ向けた
 * radial-gradient を重ね、テキスト直下のコントラストを底上げする。
 * 3枚は等価（幅を偏らせない）・Tier表記は出さない。
 * 注: SP版 t2lp.ctp（Mobile）にも同じ id="hero" のセクションが存在するが、
 * 構造がまったく別物（トリプティク画像は無く、eyebrow/H1/本文のみのブロック）。
 * SP側 DOM は #page-body 配下、PC側は #page-body を持たない。
 * height指定はPC/SP兼用IDに漏れて事故るため、直後の「ヒーロー（SP）」ブロックで
 * #page-body #hero に対して height:auto 等の明示的な打ち消しを入れている。 */
.t2lp #hero{
  height:640px;
}
.t2lp #hero .hero-scrim{
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(22,17,53,.58) 0%, rgba(22,17,53,.34) 60%, rgba(22,17,53,.30) 100%),
    linear-gradient(180deg, rgba(22,17,53,.32) 0%, rgba(22,17,53,.28) 40%, rgba(22,17,53,.46) 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）: FVヒーロー（eyebrow/H1/本文のみ、画像トリプティクは無し）。
 * 上の「ヒーロー（PC）」ブロックの height:640px / (max-width:640px)height:520px は
 * PC用固定高さヒーロー向けのため、SP側 #page-body #hero では明示的に打ち消す
 * （SPの高さはコンテンツに応じた auto でよい）。
 * element('new/masthead') が position:absolute のオーバーレイヘッダーのため、
 * ヒーロー本文がヘッダー（ロゴ・ハンバーガーボタン）の下に食い込まないよう
 * 上部に十分な余白を確保する。
 * 注: 以前 padding-top:5.5rem（88px）を指定していたが、.ctp 側で Tailwind の
 * pt-6（!important付き。tailwind.config.js の important:true）を併用していたため
 * そちらが優先され実質 padding-top が 24px しか効かず被りが再発した
 * （Playwright実機測定: iPhone13幅375でヘッダー .u-fixed-wrapper 実高さ
 * top16px/bottom72px、h1のtopが68pxでヘッダー下端72pxより上＝被り）。
 * .ctp 側の pt-6 クラスを外しこのCSSに一本化した上で、実測ヘッダー下端72pxに
 * 余裕を持たせ padding-top:6.5rem（104px）に引き上げる。
 * サブコピー直下・次セクション(意匠intro)との間隔は詰めて無駄な余白を無くす
 * （福さんフィードバック：ヒーロー直下の余白過多）。 */
.t2lp #page-body #hero{
  height:auto;
  padding-top:6.5rem;
  padding-bottom:.5rem;
}

/* ヒーロー画像帯（SP）: FVヒーロー下の3分割トリプティク帯。高さはJS/inlineに頼らずCSSで固定。 */
.t2lp .hero-strip{
  height:240px;
}
.t2lp .hero-strip-scrim{
  background:linear-gradient(180deg,rgba(22,17,53,.12) 0%,rgba(22,17,53,.3) 100%);
}

/* 日程検索カード（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;
}

/* 価格の強調色（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 相当） ---- */
.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;
}
.t2lp li.item_list{
  list-style:none;
  width:25%;
  padding:0 .9rem;
  margin-bottom:2.4rem;
}
.t2lp .item_box{
  position:relative;
}
.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:13px;
  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:12px;
  color:rgba(22,17,53,.5);
  margin-top:.5rem;
}
.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:13px;
  letter-spacing:.06em;
  color:#161135;
}
.t2lp .overview .pname{
  font-size:12px;
  color:rgba(22,17,53,.55);
}
.t2lp .overview .price{
  display:block;
  font-size:12px;
  color:rgba(22,17,53,.5);
  margin-top:.4rem;
}

/* ---- ブランド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);}
.t2lp .brand-divider{scroll-margin-top:0;width:100%;text-align:center;margin:2.2rem 0 1.4rem;padding-top:1.6rem;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: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);}
}

/* ---- 質感アクセント帯 / 「借りられない日」補足：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;
  }
}