@charset "UTF-8";
/* A04708 MIESROHE 26AW2 PREORDER — 複製元 templates/feature_base.html（2026-10-08）
   寸法は「SPカンプ(750px幅)の実測px ÷ 10」の rem で1組だけ書く（PC/SPの縮尺差は html の font-size が持つ）。
   PCの左右レール（本文カラムの外）は --pcu（1 PCカンプpx・1920基準）で書く。 */
body { margin: 0; } /* プレビュー用 */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝案件で消さない ===== */
.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }
/* 掲載先CMSのシステム通知を隠す（人の指示 2026-10-09） */
.efs-system-notification {
  display: none !important;
}

/* ===== リキッド基準 ＝ SPカンプ(750px)の実測px ÷10 で書く（1rem = カンプ10px） ===== */
html { scroll-behavior: smooth; font-size: 1.3333333vw; } /* 1rem=5px@375（=カンプ10px） */

/* ===== 出現アニメ ＝ 目印 js-reveal・点火 is-inview（テンプレの宣言を案件の値へ直した）=====
   青＝下からフェードイン：参考 issue101 の実測＝opacity 0＋translateY(5rem・rem＝画面幅/210)→0・1.5s ease。
     移動量は画面幅に比例する（1400で33.33px・390で9.29px）＝vw で写す（5/210×100＝2.380952vw）。
   緑＝滲んだフェード（-blur）：要確認 2-1 の決着＝blur(10px)＋scale(1.02)→0・1.2s cubic-bezier(.25,.46,.45,.94)。 */
html.js-anim .js-reveal { opacity: 0; transform: translateY(2.380952vw); transition-property: opacity, transform; transition-duration: 1.5s; transition-timing-function: ease; }
html.js-anim .js-reveal.is-inview { opacity: 1; transform: none; }
html.js-anim .js-reveal.-blur { transform: scale(1.02); filter: blur(10px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.-blur.is-inview { transform: none; filter: none; }
/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-reveal { transition: none !important; opacity: 1 !important; }
.is-noanim .js-reveal.-blur { filter: none !important; }
.is-noanim .rail__body { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  html:not(.is-forceanim) .rail__body { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* ===== 特集共通枠（overflow は置かない＝中の sticky がスマホで震える・#1771） ===== */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;
  /* ライブ文字はクレジットの Times New Roman だけ（デザイン文字は指示どおり全部画像）＝和文の書体は持たない */
  font-family: "times-new-roman", "Times New Roman", Times, serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fffef8; /* ページ全体の地色＝layout.json の G レイヤー（SP・PCとも #FFFEF8） */
  --fv-top: 51px;      /* FVの貼り付き位置＝USAGI の SP 追従ヘッダー高（docs/brand-specs.md） */ }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; } /* 既定＝SP。PCブロックで反転する */
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は【PCだけ】（§8-7・値はテンプレの既定 .7 / .3s） */
@media (hover: hover) {
  .feature a img, .feature a:not(:has(img:not([alt=""]))), .feature button { transition: opacity .3s; }
  .feature a:has(img:not([alt=""])):hover img { opacity: .7; }
  .feature a:not(:has(img:not([alt=""]))):hover, .feature button:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

/* ============================================================
   ▼本文（SP/PC共用）
   ============================================================ */
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fffef8; }
/* 本文の直接子は全部 relative＝描画順をDOM順に固定（§8-2） */
.feature :where(.lk, .set, .end, .end__btn, .cover) { position: relative; }

/* 写真の器＝幅と高さを正値で持ち、写真はその箱いっぱい（丸めで縦横比がずれる36枚の対策＝要確認 2-6） */
.feature .lk > img, .feature .lk > a > img { width: 100%; height: 100%; object-fit: cover; }
/* 写真のリンク（構成書「指示書・LINK」）＝写真をそのまま包む器。切り替え写真は <a class="switch-img"> が切り替わる単位 */
.feature .lk > a { display: block; width: 100%; height: 100%; }
.feature .js-credit-photo { cursor: pointer; }

/* ===== FV＝貼り付き（マゼンタ＝競り上がり・正本 docs/recipes/fv-scroll-cover.md）=====
   FVは掲載先の追従ヘッダーの下で止まり、下の .cover（不透明）が上へ覆いかぶさる。
   ⚠ 手元では scroll 0 で FV が --fv-top ぶん下がって見える（罠5＝掲載先では上に静的ヘッダーがあるので起きない）。 */
.feature .mv { position: sticky; top: var(--fv-top); }
/* QA(?noanim)・reduced-motion は貼り付けを外す＝紙面の静止状態（カンプ）で撮る。
   relative に戻す＝中の絶対配置の基準を保つ。isolation で重なりの基準も保つ（罠8の注意）。
   ★top は 0 に戻す＝残すと relative の「ずらし」として効いて FV が 51/80px 下がる（実測で踏んだ） */
.is-noanim .mv { position: relative; top: 0; isolation: isolate; }
@media (prefers-reduced-motion: reduce) { html:not(.is-forceanim) .mv { position: relative; top: 0; isolation: isolate; } }
.feature .look01 { margin-top: 0rem; width: 75rem; height: 112rem; }
.feature .mv__logo { position: absolute; top: 13.23rem; left: 20.819rem; width: 33.275rem; }
.feature .mv__logo img { width: 100%; height: 4.632rem; }
.feature .mv__star { position: absolute; top: 20.8rem; left: 23.053rem; width: 28.699rem; }
.feature .mv__star img { width: 100%; height: 3.3rem; }
.feature .mv__ttl { position: absolute; top: 92.55rem; left: 13.328rem; width: 48.333rem; }
.feature .mv__ttl img { width: 100%; height: 4.277rem; }
.feature .mv__sub { position: absolute; top: 100.4rem; left: 26.842rem; width: 21.335rem; }
.feature .mv__sub img { width: 100%; height: 5.251rem; }

/* ===== 覆う側＝不透明の1枚（罠3・罠9）===== */
.feature .cover { background: #fffef8; display: flow-root; }
.feature .lead { margin-top: 15.745rem; margin-left: 13.553rem; width: 47.701rem; }
.feature .lead img { width: 100%; height: 33.623rem; }

/* ===== 写真（フロー要素は1id=1ルール＝flow-margins が margin-top を書き戻す）===== */
.feature .look02 { margin-top: 13.959rem; margin-left: 6.492rem; width: 62.017rem; height: 92.888rem; }
.feature .look03 { margin-top: 2.057rem; margin-left: 6.492rem; width: 62.017rem; height: 92.888rem; }
.feature .look04 { margin-top: 15.123rem; margin-left: 4.491rem; width: 66.018rem; height: 98.88rem; }
.feature .look05 { margin-top: 5.014rem; width: 75rem; height: 112.364rem; }
.feature .look06 { margin-top: 19.5rem; width: 75rem; height: 112.364rem; }
.feature .look07 { margin-top: 15.632rem; margin-left: 7.994rem; width: 59.011rem; height: 88.396rem; }
.feature .look08 { margin-top: 17.78rem; width: 75rem; height: 112.325rem; }
.feature .look09 { margin-top: 13.565rem; margin-left: 13.493rem; width: 48.013rem; height: 71.913rem; }
.feature .look10 { margin-top: 23.3rem; margin-left: 4.726rem; width: 65.547rem; height: 98.214rem; }
.feature .look11 { margin-top: 2rem; margin-left: 4.726rem; width: 65.547rem; height: 98.214rem; }
.feature .look12 { margin-top: 9.042rem; width: 75rem; height: 112.378rem; }
.feature .look13 { margin-top: 12.943rem; margin-left: 7.746rem; width: 59.508rem; height: 89.357rem; }
.feature .look14 { margin-top: 2rem; margin-left: 7.682rem; width: 59.636rem; height: 89.357rem; }
.feature .look15 { margin-top: 21.752rem; margin-left: 13.493rem; width: 48.013rem; height: 71.913rem; }
.feature .look16 { margin-top: 25.011rem; width: 75rem; height: 112.325rem; }
.feature .look17 { margin-top: 2.3rem; width: 75rem; height: 112.325rem; }
.feature .look19 { margin-top: 15.012rem; margin-left: 4.331rem; width: 66.018rem; height: 98.88rem; }
.feature .look20 { margin-top: 2.013rem; margin-left: 4.491rem; width: 66.018rem; height: 98.88rem; }
.feature .look18 { margin-top: 15.606rem; margin-left: 4.474rem; width: 66rem; height: 98.893rem; }
.feature .look21 { margin-top: 5.007rem; width: 75rem; height: 112.325rem; }
.feature .look22 { margin-top: 11.417rem; margin-left: 8rem; width: 59rem; height: 88.359rem; }
.feature .look23 { margin-top: 2.112rem; margin-left: 8.007rem; width: 58.996rem; height: 88.362rem; }
.feature .look24 { margin-top: 28.617rem; margin-left: 14.189rem; width: 48.013rem; height: 71.913rem; }
.feature .look25 { margin-top: 20.012rem; width: 75rem; height: 112.325rem; }
.feature .look26 { margin-top: 10.02rem; margin-left: 5.491rem; width: 64.017rem; height: 95.884rem; }
.feature .look27 { margin-top: 15.069rem; width: 75rem; height: 112.39rem; }
.feature .look28 { margin-top: 11.237rem; width: 75rem; height: 112.364rem; }

/* ルック番号（写真に重ねる画像）＝写真の器の中の座標（正値の差） */
.feature .lk-no { position: absolute; z-index: 2; width: 4.952rem; pointer-events: none; }
.feature .lk-no img { width: 100%; height: 3.801rem; }
.feature .lk-no06 { top: 1.99rem; left: 28.474rem; }
.feature .lk-no07 { top: 93.06rem; left: 30.494rem; }
.feature .lk-no08 { top: 2.6rem; left: 34.985rem; }
.feature .lk-no10 { top: 105.79rem; left: 35.016rem; }
.feature .lk-no11 { top: 2.85rem; left: 30.293rem; }
.feature .lk-no12 { top: 2.53rem; left: 27.273rem; }
.feature .lk-no13 { top: 105.99rem; left: 35.006rem; }
.feature .lk-no14 { top: 3.07rem; left: 30.334rem; }
.feature .lk-no16 { top: 92.3rem; left: 30.351rem; }
.feature .lk-no16 img { height: 3.812rem; }
.feature .lk-no19 { top: 82.49rem; left: 26.825rem; }
.feature .lk-no20 { top: 2.67rem; left: 35.006rem; }
.feature .lk-no20 img { height: 3.767rem; }
.feature .lk-no21 { top: 2.54rem; left: 35.006rem; }
.feature .lk-no21 img { height: 3.767rem; }

/* ===== 画像スイッチ（正本 docs/recipes/image-switcher.md）=====
   値は参考 issue101 の実測＝Swiper fade・3.0s 静止→1.2s で重ね替え（JS の FADE と対）。 */
.feature .switcher .switch-img { transition: opacity 1.2s ease; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; pointer-events: none; } /* 見えていない方のリンクを押させない */
.feature .switcher .switch-img.is-current { opacity: 1; }
/* ドット＝カンプの切り替えドット（asset 09・15・17・18・22＝30×10・写真の右下 20/20px・5か所とも同じ）。
   表示だけ（押せる大きさが取れない＝44px規定に届かない）＝写真のタップはクレジット表示→リンクに使う */
.feature .switch-dots { position: absolute; right: 2rem; bottom: 2rem; display: flex; gap: 1rem; z-index: 2; pointer-events: none; }
.feature .switch-dots span { width: 1rem; height: 1rem; border: .1rem solid #fff; border-radius: 50%; }
.feature .switch-dots .is-current { background: #fff; }

/* ===== クレジット(credit.inc相当・構造は §8-3 固定) =====
   書体＝キット nxo8oyx の Times New Roman Italic 18px（カンプ）・字送り .01em。
   ★タップで表示（指示＝画像タップで表示／画像外タップで非表示）＝既定は隠し、組に is-credit が付くと出る。
     隠しても場所は取る（visibility）＝カンプの縦の流れを保つ。値は参考 issue101 の実測（opacity/visibility・0.5s ease） */
.feature .credit { font-family: "times-new-roman", "Times New Roman", Times, serif; font-style: italic; font-weight: 400;
  font-size: 1.8rem; line-height: 3.528rem; letter-spacing: .01em; color: #8c8381;
  opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: .5s; transition-timing-function: ease; }
.feature .js-credit-set.is-credit .credit { opacity: 1; visibility: visible; }
.feature .credit .item { display: inline; white-space: nowrap; font-style: italic; } /* 掲載先の共通CSSが li に font-style: normal を当てる＝ul の italic が継承されない（テスト環境で実測 10/09） */
.feature .credit .item:not(:last-child)::after { content: " / "; }
.feature .credit .link { color: inherit; }
/* 写真の下に置くクレジット（フロー） */
.feature .credit01 { margin-top: 1.041rem; text-align: center; }
.feature .credit03 { margin-top: 0.853rem; padding-left: 2rem; }
.feature .credit04 { margin-top: 0.6rem; text-align: center; }
.feature .credit06 { margin-top: 0.769rem; text-align: center; }
.feature .credit07 { margin-top: 0.416rem; padding-left: 7.682rem; }
.feature .credit10 { margin-top: 0.864rem; padding-left: 4.5rem; }
.feature .credit11 { margin-top: 1.054rem; padding-left: 2rem; }
.feature .credit12 { margin-top: 1.188rem; padding-left: 8.005rem; line-height: 2.538rem; } /* この1件だけ行送り 1.41（正値） */
.feature .credit14 { margin-top: 1.418rem; padding-left: 18.805rem; }
/* 写真に重ねるクレジット（白）＝top は字面の上端 − 行ボックスから字面までの差（line-height 1）。
   組み立てでは差を約 0.41rem と見積もったが、照合（2026-10-08）でインクが6件とも 4〜5px 上だった＝実測で +0.45rem 下げた */
.feature .credit.-on { position: absolute; z-index: 2; line-height: 1; }
.feature .credit02 { top: 108.15rem; left: 0; right: 0; text-align: center; letter-spacing: -.01em; color: #fff; }
.feature .credit05 { top: 68.71rem; left: 1.737rem; color: #fffef8; }
.feature .credit08 { top: 68.46rem; left: 2.007rem; color: #fffef8; }
.feature .credit09 { top: 108.88rem; left: 2rem; color: #fff; }
.feature .credit13 { top: 68.466rem; left: 1.965rem; color: #fffef8; }
.feature .credit15 { top: 109.01rem; left: 2.353rem; color: #fff; }

/* ===== 末尾: ロゴ・Check All Items・スタッフ（効果なし）===== */
.feature .end__logo { margin-top: 12.76rem; margin-left: 21.096rem; width: 32.807rem; }
.feature .end__logo img { width: 100%; height: 4.567rem; }
.feature .end__ttl { margin-top: 3.602rem; margin-left: 25.565rem; width: 23.987rem; }
.feature .end__ttl img { width: 100%; height: 5.525rem; }
/* 丸と文字は別の素材（要確認 2-8）＝1つのリンクにまとめる */
.feature .end__btn { margin-top: 5.386rem; margin-left: 25.279rem; width: 24.442rem; height: 24.442rem; }
.feature .end__btn a { display: block; position: relative; width: 100%; height: 100%; }
.feature .end__circle { width: 100%; height: 100%; }
.feature .end__btntxt { position: absolute; top: 9.21rem; left: 4.638rem; width: 15.266rem; height: 7.539rem; }
.feature .end__staff { margin-top: 6.076rem; margin-left: 15.519rem; width: 43.804rem; }
.feature .end__staff img { width: 100%; height: 15.1rem; }
.feature .look28__ttl { position: absolute; top: 3.79rem; left: 28.553rem; width: 17.628rem; }
.feature .look28__ttl img { width: 100%; height: 1.56rem; }

/* ============================================================
   ▼PCブロック(751px以上) — 縮尺と、PC専用のレールだけを持つ
   ============================================================ */
@media screen and (min-width: 751px) {
  /* 縮尺＝本文カラム 650px@1920（PCカンプ PC1・PC3 の「SP共通」の幅＝PC2 の 640 も 650 に揃える・人の指示 10/09）÷75 → 8.6667px@1920 → 0.451389vw */
  /* ★基準はスクロールバーを除いた幅＝vw はスクロールバー（Windows で15px）を含むので、そのままだと
     見えている幅より約1%大きく組まれる（仕上げの指示 10/09）。--sbw は js/script.js が実測して入れる（無ければ0） */
  html { font-size: calc((100vw - var(--sbw, 0px)) * 0.00451389); }

  .feature .pc { display: block; }
  .feature .frame > .pc { display: contents; }
  .feature {
             --pcu: calc((100vw - var(--sbw, 0px)) / 1920); /* 1 PCカンプpx（カンプ幅1920・スクロールバー抜き） */
             --rail-top: 80px;   /* 両端レールの貼り付き位置＝USAGI の PC 追従ヘッダー高（固定値） */
             --fv-top: 80px; }

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

  /* --- 左右レール＝Look01 の頭から Look11 の終わりまで追従（PC指示書）---
     走路は .rail-run（その範囲の本文を包む器）＝起点を数字で書かない（§8-6-5）。
     レールの箱は窓の高さ − 追従ヘッダー（§8-6-2）・中身は天地中央（左右とも中心線が PCカンプ y1921 で同じ）。
     横は本文カラムの端から（左 143.41・右 192.09 PCカンプpx＝650幅の本文の端からカンプの絶対位置まで）＝本文との隙間が保たれる側へアンカー。 */
  .feature .rail-run { position: relative; }
  .feature .rail-run > .pc { display: contents; }
  .feature .rail-track { position: absolute; inset: 0; pointer-events: none; }
  .feature .rail { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top)); }
  .feature .rail__l { position: absolute; top: calc(50% - 86.215 * var(--pcu)); right: calc(100% + 143.41 * var(--pcu));
    width: calc(273.19 * var(--pcu)); height: calc(172.43 * var(--pcu)); }
  .feature .rail__r { position: absolute; top: calc(50% - 94.115 * var(--pcu)); left: calc(100% + 192.09 * var(--pcu));
    width: calc(188.23 * var(--pcu)); height: calc(188.23 * var(--pcu)); }
  /* 緑＝滲んで現れる（要確認 2-3 の決着＝貼り付いた瞬間に出す）。点火は script.js がレールの貼り付きを見て付ける */
  .feature .rail__body { position: relative; width: 100%; height: 100%; opacity: 0; filter: blur(10px); transform: scale(1.02);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .feature .rail.is-inview .rail__body { opacity: 1; filter: none; transform: none; }
  .feature .rail__logo { position: absolute; top: 0; left: calc(10.06 * var(--pcu)); width: calc(252.64 * var(--pcu)); }
  .feature .rail__logo img { width: 100%; height: calc(35.17 * var(--pcu)); }
  .feature .rail__sub { position: absolute; top: calc(62.91 * var(--pcu)); left: calc(44.47 * var(--pcu)); width: calc(184.72 * var(--pcu)); }
  .feature .rail__sub img { width: 100%; height: calc(42.55 * var(--pcu)); }
  .feature .rail__ttl { position: absolute; top: calc(148.25 * var(--pcu)); left: 0; width: calc(273.19 * var(--pcu)); }
  .feature .rail__ttl img { width: 100%; height: calc(24.18 * var(--pcu)); }
  .feature .rail__btn { display: block; position: relative; width: 100%; height: 100%; pointer-events: auto; }
  .feature .rail__circle { width: 100%; height: 100%; }
  .feature .rail__btntxt { position: absolute; top: calc(70.94 * var(--pcu)); left: calc(35.72 * var(--pcu));
    width: calc(117.56 * var(--pcu)); height: calc(58.06 * var(--pcu)); }
}