@charset "UTF-8";
/* 260925_A04677_TODAYFUL_LOOK ／ 掲載先: USAGI ONLINE ／ ブランド: TODAYFUL
   土台は templates/feature_base.html を複製して外部化したもの（規約 §7-1）。
   紙面の寸法は src/text/layout.json の正値 ÷10 の rem（1rem = SPカンプ10px）。
   モーダルと出現アニメは前回制作ページ（usagi-online.com/s/260717TDF/）の実測を写している
   ＝根拠は src/text/reports/phase1-reference.md、現物のCSSは src/text/reference/。 */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝案件で消さない =====
   当てる相手はLP本体でなく**CMS側の器**なので .feature で包まない（包むと一致しない）。 */
.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
/* 掲載先は normalize.css を読んでいる＝`sub,sup{position:relative}` が LP の vertical-align と二重に効く */
sup, sub { position: static; top: auto; }

body { margin: 0; }

/* ===== リキッド基準 ＝ SPカンプ(750px)の実測px ÷10 で書く（1rem = カンプ10px） =====
   ここはSP側の定義。PCの縮尺は下の「PCブロック」の html{font-size} 1行だけが持つ。 */
html { scroll-behavior: smooth; font-size: 1.3333333vw; } /* 1rem=5px@375（=カンプ10px） */

/* ===== フェードイン(inview) =====
   ★秒数 .4s と点火の境目（画面高×0.75）は**参考ページの実測**（phase1-reference.md §6）＝
     規約§2 の既定 1s ではなくこちらが正（指示書が「踏襲」と名指ししている）。
     目印は当社標準の js-fade、点火は is-inview（掲載先の共通JSが触らない名前）。 */
.js-fade { opacity: 0; transition: opacity .4s; }
.js-fade.is-inview { opacity: 1; }
/* QA検証用フック(?noanim)＝全アニメを完了状態で固定。transform は触らない（センタリング用の
   translate まで殺すと要素が跳ぶ＝テンプレのコメントと同じ理由）。 */
.is-noanim .js-fade { transition: none !important; opacity: 1 !important; }
/* reduced-motion フォールバック＝OSの「視差効果を減らす」設定では完了状態で見せる（a11y）。
   :not(.is-forceanim) は実機切り分け用フック ?anim=1 のため（Issue #228）。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-fade { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* ===== 特集共通枠 ===== */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;
  /* --spu＝1 SPカンプpx（750px幅カンプ）。--pcu＝1 PCカンプpx（1400px幅カンプ）。
     ★モーダルは本文カラムの外（画面基準）なので rem で書かない＝この2つで書く（規約§8-1・#440）。 */
  --spu: 0.1333333vw;
  --pcu: 0.0714286vw;
  /* 書体＝構成書 FONT シートの指定（Adobe Fonts キット lmt7zjr）。
     FONT名が "Open Sans Condensed Light" ＝ condensed の weight 300。同シートの貼り付け行
     `"open-sans"` とは食い違うが、支給 .ai の同梱フォント・キット収載・カンプの字形の3つで
     condensed 側を採った（要確認リスト A-1）。後ろの和文はクレジット流し込み後の受け皿。 */
  font-family: "open-sans-condensed", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  font-weight: 300; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff; /* カンプ読み起こし §3＝地色はページ全体が白 */ }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
/* 見出しと strong/b を .feature の font-weight の継承へ戻す（ブラウザ既定の太字は継承より強い） */
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は【PCだけ】＝@media (hover: hover) で必ず包む（§8-7）。transition も同じ中に入れる。
   値 .7 / .3s は参考ページの実測（`[class^=img_] { transition:.3s } :hover { opacity:.7 }`）と
   規約§8-7 の既定が一致している。 */
@media (hover: hover) {
  .feature a img { transition: opacity .3s; }
  .feature a:hover img { opacity: .7; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

/* ============================================================
   ▼本文（SP/PC共用）。寸法は SPカンプpx ÷10 の rem で1組だけ書く
   ============================================================ */
.feature .frame { display: block; width: 100%; }
/* display:flow-root＝マージン相殺を止める（#565）。overflow は持たせない（#1771） */
.feature .frame-main { width: 100%; }
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }
/* 本文の器＝66rem（SP 88vw／PC 1051.35px）。器の名前は参考ページの `.center-inner-content` に合わせた。
   SP＝カンプ x45〜705＝660/750＝88%（参考ページの 88vw と一致）。
   PC＝カンプ実測 x174.31〜1225.66＝1051.35px（参考ページは 1046px・こちらはカンプを採る）。 */
.feature .center-inner-content { width: 66rem; margin-inline: auto; }

/* ===== 見出し =====
   ⚠ 縦の余白（margin-top）は draft-measure の flow-margins が書く＝**手で直さない**（規約§8-6）。
      直したい残差は src/text/draft-measure.json の corrections へ入れる。 */
.feature .sec01__ttl { margin-top: 6.499rem; font-size: 3.6rem; line-height: 1.75; letter-spacing: 0; color: #000; text-align: left; }

/* ===== ルックのグリッド =====
   PC も SP も1行2枚（参考ページ実測・カンプ実測とも）。隙間はカンプ実測4px。
   19番だけ2列ぶち抜き（660×409）。 */
.feature .lookgrid { margin-top: 6.327rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.feature .lookgrid__cell { position: relative; }
.feature .lookgrid__cell.-wide { grid-column: 1 / -1; }
/* 写真の器は正値の高さで固定する＝画像の縦横比任せにすると20行で十数px積もる。
   参考ページと同じ object-fit: fill（cover ではない＝器に合わせて伸ばす）。 */
.feature .look { display: block; height: 40.9rem; }
.feature .look img { width: 100%; height: 100%; object-fit: fill; }
/* モーダルを開く写真＝カーソルと透過で押せることを示す（参考ページ実測: cursor:pointer / .3s / .7） */
.feature .look.thumbnail { cursor: pointer; }
@media (hover: hover) {
  .feature .look.thumbnail { transition: opacity .3s; }
  .feature .look.thumbnail:hover { opacity: .7; }
}
/* ★クレジットが1件も出なかったルックの写真＝押せなくする（クラスは script.js が付ける）。
   スライドは作ったまま一覧の引き金だけ殺す＝前後送りでは行き着くが、そこは写真だけになる。
   ⚠ thumbnail より後に置く＝cursor と hover を上書きするため（詳細度は同じなので順番で決まる）。 */
.feature .look.is-noclick { pointer-events: none; cursor: default; }

/* ===== 末尾のボタン2つ =====
   look-41.png / look-42.png は貼らず、枠線＋ライブテキストで組む（引き継ぎ ③-3）。
   枠線の色 #232323・中身は透明（塗り無し）は書き出しPNGの画素実測。
   太さは実測 0.5カンプpx＝SP実機で0.25pxと画素格子を下回るので、髪の毛線の標準実現 1px を採る。 */
/* 紙面の末尾の余白＝カンプの版面の一部（規約§8-18）＝落とさない。
   値はカンプ正値＝フッターモックの上端 9264.68 − 最後の要素の下端 9122.47 ＝ 142.21px。 */
.feature .foot { padding-bottom: 14.221rem; }
.feature .foot__btn { width: 49.95rem; height: 7.95rem; margin-inline: auto; }
.feature .foot__btn01 { margin-top: 15.058rem; }
.feature .foot__btn02 { margin-top: 8.026rem; }
.feature .foot__btn a { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border: 1px solid #232323; color: #232323;
  font-size: 3rem; line-height: 1; white-space: pre; }
@media (hover: hover) {
  .feature .foot__btn a { transition: opacity .3s; }
  .feature .foot__btn a:hover { opacity: .7; }
}

/* ============================================================
   ▼モーダル（写真をタップすると開く商品情報の窓）
   出どころ＝前回制作ページ（usagi-online.com/s/260717TDF/）の実測。
   数値・クラス名・ミリ秒は src/text/reference/usagi-modal.css の写し（#feature → .feature）。
   ★カンプには1枚も描かれていない領域＝実測が正本（正値ゼロ領域・Issue #95）。
   ============================================================ */
/* 開いている間だけ背後を止める（参考ページと同じ）。html 側は触らないので実際には背後が
   スクロールできてしまうが、参考2本とも同じ挙動＝初稿は踏襲する（要確認リスト A-3）。 */
body.s-modal-open { overflow: hidden; height: 100%; }

/* ★ fixed禁止の例外（docs/cms-embed.md §1 例外①のローディング画面と同型）＝
   画面全体を一時的に覆うUIで、掲載先のヘッダー／フッターごと隠すのが意図。
   掲載先の公開実物がこの形で動いており、指示書が「モーダルの仕様も同様に」と名指ししている。
   lint:allow-fixed */
.feature .s-wrap_modal {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* ★z-index も遷移させる＝参考ページの実物と同値。これが無いとクラスが外れた瞬間に
     z-index が -200 へ飛んで背面に回り、opacity のフェードが走っていても見えない
     （閉じるボタンも覆いクリックも「パッと消える」）。 */
  transition: opacity .3s ease, z-index .3s ease, visibility .3s ease;
  position: fixed; /* lint:allow-fixed ＝上のコメントの理由 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5019607843);
  z-index: -200;
}
.feature.is-modal-active .s-wrap_modal {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 900;
}
.feature .s-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 90.13333vw; /* SP＝676 SPカンプpx */
}
.feature .s-modal__slides { position: relative; }
.feature .s-modal__slide {
  display: none;
  padding-inline: 5.33333vw; /* SP＝40 SPカンプpx */
  padding-block: 5.33333vw;
  height: 60vh;
  overflow-y: auto;
}
.feature .s-modal__slide.is-current { display: block; }
.feature .s-modal__photo { display: block; }
.feature .s-modal__photo img { width: 100%; height: auto; }

/* 前後の矢印＝参考ページは Swiper 4 の `swiper-button-white`。同じ白いシェブロンを描く。
   当たり判定は器（.s-modal__nav）を素通りさせ、ボタンだけで受ける（参考ページと同じ）。 */
.feature .s-modal__nav { position: absolute; top: 0; height: 100%; width: 100%; z-index: 800; pointer-events: none; }
.feature .s-modal__prev, .feature .s-modal__next {
  position: absolute; top: 50%; margin-top: -22px;
  width: 27px; height: 44px;
  background-position: center; background-repeat: no-repeat;
  background-size: calc(20 * var(--spu)) calc(37 * var(--spu));
  pointer-events: auto; cursor: pointer; border: 0; padding: 0; background-color: transparent;
}
.feature .s-modal__prev {
  left: calc(-40 * var(--spu));
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.feature .s-modal__next {
  right: calc(-40 * var(--spu));
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0l22,22L27,22L27,22z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* 閉じる＝窓の下・中央。参考ページ（前回制作の 260717TDF）が敷いている img/modal_close.png の
   現物をそのまま使う（27x27 の透過PNG）。敷き方も本番と同値＝no-repeat・contain。
   ⚠ 本番は 27px の画像を 33px の枠へ contain で広げている＝拡大されるのは本番も同じ。 */
.feature .s-modal__close {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
  background-image: url(../img/modal_close.png);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -4.53333vw;   /* SP＝-34 SPカンプpx */
  width: 5.33333vw;     /* SP＝40 SPカンプpx */
  height: 5.33333vw;
  z-index: 500;
  cursor: pointer;
  border: 0; padding: 0; background-color: transparent;
}

/* モーダルの中のクレジット（商品カード）。
   ★入れ物の構造は規約§8-3 の全案件固定（ul.credit > li.item > a.link > span.txt + span.price）。
   参考ページはクラス名が違う（credit_item / credit_link / credit_txt）が、こちらは credit.inc への
   差し替え口なので構造を優先し、見た目だけ実測に合わせる。 */
.feature .wrap_credit { width: 100%; }
/* ★クレジットが1件も描かれなかったら、ITEM の見出しごと消す。
   CMSはTSVを読んで描くが、**マスターに商品が無ければ1行も出さない**＝
   クレジット表に行があっても出ないことがあり、見出しだけが宙に浮く。
   ⚠ 手元の作業HTMLには仮のクレジットが入っているので、ここは効かない＝効くのは貼ったあと。 */
.feature .wrap_credit:not(:has(.credit .item)) { display: none; }
.feature .credit__head {
  margin-block: min(43px, calc(43 * var(--pcu)));
  font-size: calc(36 * var(--spu));
  font-weight: 300;
  letter-spacing: .1em;
}
.feature .credit { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(35 * var(--spu)); }
/* ★折り返しは**アイテムの中で起こす**（§8-3・#670 の「明示する」側）＝カードは幅が決まった枡目で、
   長い商品名はカードの中で複数行になるのが参考ページの見た目。アイテムの間では折り返さない。 */
.feature .credit .item { white-space: normal; }
/* ★余白の作り方は参考ページの実物どおり＝写真・商品名・価格を **flex の gap** で離し、
   商品名だけに padding-top を足す（PC 10px ＋ 4px／SP 10・4 SPカンプpx）。行間は 1。
   ⚠ 行間（line-height）で余白を作らない＝商品名が2行になったとき、
     行と行の隙間まで一緒に広がって、写真との間隔と釣り合わなくなる。 */
.feature .credit .link {
  display: flex; flex-direction: column; align-items: start; gap: calc(10 * var(--spu));
}
.feature .credit .thumb { display: block; width: 100%; aspect-ratio: 188.33 / 251.09; }
.feature .credit-img { width: 100%; height: 100%; object-fit: cover; }
.feature .credit .txt, .feature .credit .price {
  display: block; font-size: calc(22 * var(--spu)); line-height: 1; color: #000;
}
.feature .credit .txt { padding-top: calc(4 * var(--spu)); }

/* ============================================================
   ▼PCブロック（752px以上）— 縮尺と、PC専用の寸法だけを持つ
   ★切替点は参考ページの実測どおり1本（あちらは max-width: 751px ＝ 752px から PC）。
   ★寸法の二重管理をしない＝SPと同じ比率で伸びるものはここに書かない（上の1組がそのまま縮尺される）。
   ★ここに書いてあるのは「PC支給データの実測がSPと違った所」だけ＝二重管理ではなく**別のデザイン**。
     出どころ＝PC紙面の実測 src/text/pc-scan.json（pc-side-build の scan.js・AB 1400×14932.14）。
     カンプPC面には**デザイナーが置いた寸法マーカー（青い正方形）**があり、100 / 40 / 174 / 7 / 240 / 125 が
     そのまま余白の指定になっている。参考ページのCSSの実測値とも全部一致した。
   ============================================================ */
@media screen and (min-width: 752px) {
  /* 縮尺はこの1行＝本文の器 66rem が 1051.35px@1400 になる値（1rem=15.9295px）。
     1051.35 の出どころ＝PC実測の写真の窓 x174.31〜1225.66（左右余白とも 174.3 で対称・マーカー 174×174）。
     参考ページは 1046px だが、こちらはこのカンプの正値を採る（意匠はカンプ・差 5px）。
     1400px 以上で止めるのは参考ページと同じ（規約§8-1「指示書に指定があればそう作る」）。 */
  html { font-size: min(1.137821vw, 15.9295px); }

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }

  /* ▼PC面だけ値が違うもの（SPの比例では合わない＝PC実測から起こす・Issue #20） */
  /* 見出し＝PC実測 fs24（SPは36）。字送りもPCだけ広い（同じ文字列の字面幅 SP 7.98em / PC 8.48em）。
     上の余白＝ヘッダーモック下端 224.41 → 文字枠上端 322.51（マーカー 100×100）から半leading 9px を引く。 */
  .feature .sec01__ttl { margin-top: 5.594rem; font-size: 1.507rem; letter-spacing: .024em; }
  /* 見出し下＝文字枠下端 349.07 → グリッド上端 383.48（マーカー 40×40）から半leading を引く。
     隙間＝PC実測 7.35px（マーカー 7×7）。SPの4pxを比例させると 6.4px で足りない。 */
  /* 1.756rem = (文字枠下端→グリッド上端 34.41px − 行ボックス下端のずれ 6.44px) ÷ 15.9295
     ＝SPと同じ理由の ink-offset 補正（PC は級数24なので差が 2.56px）。実ブラウザ実測で確かめた。 */
  .feature .lookgrid { margin-top: 1.756rem; gap: .43943rem; }
  /* ボタン＝PC実測 528.21×82.21・文字 fs35（参考ページの min(528px,…) と同値）。
     SPの 499.5×79.5 を比例させると 795×127 になる＝ここは面ごとに別のデザイン。 */
  .feature .foot__btn { width: 33.159rem; height: 5.161rem; }
  .feature .foot__btn a { font-size: 2.197rem; }
  .feature .foot__btn02 { margin-top: 7.878rem; } /* PC実測 125.49（マーカー 125×125） */
  /* 紙面の末尾＝PC実測 237.53（マーカー 240×240）。SP側の正値 142.21 とは面ごとに食い違う
     ＝どちらもそのフッターモックの上端までの実測なので、面ごとの値をそのまま使う。 */
  .feature .foot { padding-bottom: 14.911rem; }

  /* モーダル＝参考ページのPC実測（1400基準で可変・1400以上で張り付く） */
  .feature .s-modal { width: min(770px, calc(770 * var(--pcu))); }
  .feature .s-modal__slide {
    padding-inline: min(65px, calc(65 * var(--pcu)));
    padding-block: min(65px, calc(65 * var(--pcu)));
  }
  .feature .s-modal__prev, .feature .s-modal__next {
    background-size: min(27px, calc(27 * var(--pcu))) min(44px, calc(44 * var(--pcu)));
  }
  .feature .s-modal__prev { left: max(-60px, calc(-60 * var(--pcu))); }
  .feature .s-modal__next { right: max(-60px, calc(-60 * var(--pcu))); }
  .feature .s-modal__close {
    bottom: max(-44px, calc(-44 * var(--pcu)));
    width: min(33px, calc(33 * var(--pcu)));
    height: min(33px, calc(33 * var(--pcu)));
  }
  .feature .credit__head { font-size: min(38.6px, calc(38.6 * var(--pcu))); }
  .feature .credit {
    grid-template-columns: repeat(3, 1fr);
    gap: min(37.5px, calc(37.5 * var(--pcu)));
  }
  .feature .credit .txt, .feature .credit .price { font-size: min(11px, calc(11 * var(--pcu))); }
  /* 余白はPCだけ実測が別（SPと同じ比率では縮まない）＝参考ページの実物と同値 */
  .feature .credit .link { gap: min(10px, calc(10 * var(--pcu))); }
  .feature .credit .txt { padding-top: min(4px, calc(4 * var(--pcu))); }
}