@charset "UTF-8";
/* ------------------------------------------------------------------
   1920px アートボード基準の値を、コンテナ幅に対する比率（cqw）に変換する。
   .ffh に container-type: inline-size を敷いているので
   「1920px 時に指定px ちょうど」になり、それ未満の幅では等比で縮む。
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   SP 用。390px アートボード（iPhone 14/13/12）基準の値を
   コンテナ幅に対する比率（cqw）に変換する。
   下限は 320px 幅相当（0.82倍）、上限は $cap 倍で頭打ちにして、
   小さい端末で潰れず、タブレット寄りの幅で膨らみすぎないようにする。
   ------------------------------------------------------------------ */
.box-wrapper {
  /* フォント指定済 */
}
.box-wrapper * {
  font-family: sicnews, sans-serif; /* フォント指定済 */
}
.box-wrapper .pc {
  display: none;
}
@media screen and (min-width: 750px) {
  .box-wrapper .pc {
    display: block;
  }
}
.box-wrapper .sp {
  display: block;
}
@media screen and (min-width: 750px) {
  .box-wrapper .sp {
    display: none;
  }
}
.box-wrapper {
  /* ==================================================================
     FAR FROM HOME ― TAYLOR TOYO × JOURNAL STANDARD
     PC（1920px アートボード基準 / cqw で等比追従）
     ================================================================== */
  /* --------------------------------------------------------------
     ページ用フォント。
     カンプの欧文は Helvetica Bold 系の字形（横 85% 程度に詰めたもの）。
     サイト既定の sicnews は 300 / 400 のみでウエイトが足りないため、
     このページ配下だけ下記スタックで上書きしている。
     ※採用フォントが確定したら $ffh-font の 1 行を差し替えるだけでよい。
     -------------------------------------------------------------- */
}
.box-wrapper .ffh,
.box-wrapper .ffh * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.box-wrapper .ffh {
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
}
.box-wrapper {
  /* --- 画像枠 -------------------------------------------------------
     画像は後入れ。未挿入でもレイアウトが確認できるよう下地を敷く。
     比率は枠側の aspect-ratio で確保し、画像は object-fit に委ねる。 */
}
.box-wrapper .ffh-frame {
  display: block;
  margin: 0;
  overflow: hidden;
  background: #ececec;
}
.box-wrapper .ffh-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box-wrapper .ffh-frame--kv {
  aspect-ratio: 860/1080;
}
.box-wrapper .ffh-frame--pair {
  aspect-ratio: 750/1000;
}
.box-wrapper .ffh-frame--tall {
  aspect-ratio: 800/1069;
}
.box-wrapper .ffh-frame--wide {
  aspect-ratio: 1920/1080;
}
.box-wrapper .ffh-frame--lg {
  aspect-ratio: 740/987;
}
.box-wrapper .ffh-frame--sm {
  aspect-ratio: 460/614;
}
.box-wrapper .ffh-frame--sq {
  aspect-ratio: 1/1;
}
.box-wrapper {
  /* 親の高さを分け合う枠（比率は指定しない） */
}
.box-wrapper .ffh-frame--fill {
  flex: 1 1 0;
  min-height: 0;
}
.box-wrapper {
  /* --- 段組みの器 --------------------------------------------------- */
}
.box-wrapper .ffh-content {
  width: 79.1666666667cqw;
  margin-inline: auto;
}
.box-wrapper .ffh-narrow {
  width: 63.5416666667cqw;
  margin-inline: auto;
}
.box-wrapper {
  /* --- キービジュアル ----------------------------------------------- */
}
.box-wrapper .ffh-kv {
  display: flex;
  align-items: flex-start;
}
.box-wrapper .ffh-kv__visual {
  /* 画像2枚とタイトルを同じグリッドセルに重ねる（position を使わない） */
  flex: 0 0 89.5833333333cqw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.box-wrapper .ffh-kv__figs {
  grid-area: 1/1;
  display: flex;
}
.box-wrapper .ffh-kv__figs > * {
  flex: 1 1 0;
}
.box-wrapper .ffh-kv__title {
  grid-area: 1/1;
  align-self: end;
  justify-self: center;
  margin: 0 0 14.4270833333cqw;
  color: #fff;
  font-size: 4.84375cqw;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.box-wrapper .ffh-kv__meta {
  flex: 1 1 auto;
  margin-left: 0.9375cqw;
  padding: 1.5625cqw 0.8854166667cqw 0 0;
  writing-mode: vertical-rl;
  font-size: 2.2916666667cqw;
  font-weight: 700;
  line-height: 1.25;
}
.box-wrapper .ffh-kv__meta p {
  margin: 0;
  white-space: nowrap;
}
.box-wrapper {
  /* --- リードコピー -------------------------------------------------- */
}
.box-wrapper .ffh-lead {
  margin: 18.0729166667cqw 0 18.90625cqw;
  font-size: 3.90625cqw;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  letter-spacing: -0.05em;
}
.box-wrapper {
  /* --- 2枚並び（750 + 750） ----------------------------------------- */
}
.box-wrapper .ffh-pair {
  display: flex;
  gap: 1.0416666667cqw;
}
.box-wrapper .ffh-pair > * {
  flex: 1 1 0;
}
.box-wrapper {
  /* --- 縦長1枚 + 横長2枚積み（800 | 700） --------------------------- */
}
.box-wrapper .ffh-split {
  display: flex;
  gap: 1.0416666667cqw;
}
.box-wrapper .ffh-split__main {
  flex: 0 0 41.6666666667cqw;
}
.box-wrapper .ffh-split__stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.0416666667cqw;
}
.box-wrapper {
  /* --- 大小ずらし並び（740 + 460／小は上下中央） --------------------- */
}
.box-wrapper .ffh-offset {
  display: flex;
  align-items: center;
  gap: 1.0416666667cqw;
}
.box-wrapper .ffh-offset__lg {
  flex: 0 0 38.5416666667cqw;
}
.box-wrapper .ffh-offset__sm {
  flex: 0 0 23.9583333333cqw;
}
.box-wrapper {
  /* --- 商品クレジット ------------------------------------------------ */
}
.box-wrapper .ffh-credit {
  margin-top: 0.8333333333cqw;
  padding-bottom: 0.78125cqw;
  font-size: max(11px, 0.7291666667cqw);
  line-height: 1.4285714286;
}
.box-wrapper .ffh-credit ul {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.box-wrapper .ffh-credit li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.box-wrapper .ffh-credit--left ul {
  justify-content: flex-start;
}
.box-wrapper .ffh-credit__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6em;
  height: 1.43em;
  border: 1px solid currentColor;
  border-radius: 0.72em;
  color: inherit;
  line-height: 1;
  text-decoration: none;
}
.box-wrapper {
  /* --- フッター ------------------------------------------------------ */
}
.box-wrapper .ffh-footer {
  display: flex;
  margin-top: 18.28125cqw;
}
.box-wrapper .ffh-footer__visual {
  flex: 0 0 48.9583333333cqw;
  align-self: flex-start;
}
.box-wrapper .ffh-footer__body {
  /* 画像（正方形）の高さいっぱいに伸ばし、最下段を margin-top:auto で下寄せ */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0 1.0416666667cqw 0 2.0833333333cqw;
  font-size: max(15px, 1.4583333333cqw);
  font-weight: 700;
  line-height: 1.5714285714;
}
.box-wrapper .ffh-footer__staff {
  margin: 8.1770833333cqw 0 0;
  padding-left: 1.0416666667cqw;
  list-style: none;
}
.box-wrapper .ffh-footer__line {
  height: max(1px, 0.1041666667cqw);
  margin: 4.7916666667cqw 0 0;
  border: 0;
  background: currentColor;
}
.box-wrapper .ffh-footer__links {
  margin: 4.5833333333cqw 0 0;
  padding-left: 1.0416666667cqw;
  list-style: none;
}
.box-wrapper .ffh-footer__links a {
  color: inherit;
  text-decoration: none;
}
.box-wrapper .ffh-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.0416666667cqw;
  margin-top: auto;
  padding: 0 0.625cqw 2.96875cqw 1.0416666667cqw;
}
.box-wrapper .ffh-footer__copy {
  margin: 0;
  font-size: max(11px, 1.0416666667cqw);
  font-weight: 400;
  line-height: 1.5;
}
.box-wrapper .ffh-footer__totop {
  writing-mode: vertical-rl;
  color: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.box-wrapper {
  /* ==================================================================
     スクロール連動アニメーション
     ------------------------------------------------------------------
     JS が要素に .fadeIn を付けると、ぼかし（blur）が晴れながら
     下からふわっと立ち上がる。画像は枠内で微ズームして定位置に収まり、
     並んだ画像・クレジット・フッターの各行は時間差で追従する。
     初期状態は .js-fade（JS が起動できたときだけ付与）配下に限定し、
     JS が動かない環境ではコンテンツがそのまま表示されるようにしている。
     ================================================================== */
  /* FV 用。加速感を抑えた素直なイーズアウトで「じわっと」滲ませる */
  /* 初期状態を「アニメーションさせずに」適用するための一時クラス。
     これを挟まないと、js-fade を付けた瞬間に
     「表示(1) → 非表示(0)」という逆向きのトランジションが走り出し、
     直後に .fadeIn を付けても値が動かず＝アニメーションしない。 */
}
.box-wrapper.no-anim, .box-wrapper.no-anim * {
  transition: none !important;
}
.box-wrapper.js-fade {
  /* --- 基本：ブロック単位のふわっと表示 ------------------------- */
}
.box-wrapper.js-fade .fadeInTrigger {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 56px, 0);
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, filter, transform;
}
.box-wrapper.js-fade .fadeInTrigger.fadeIn {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.box-wrapper.js-fade {
  /* リードコピーはブロックより少し強めにぼかして抜く */
}
.box-wrapper.js-fade .ffh-lead.fadeInTrigger {
  filter: blur(18px);
  transform: translate3d(0, 40px, 0);
}
.box-wrapper.js-fade .ffh-lead.fadeInTrigger.fadeIn {
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
.box-wrapper.js-fade {
  /* --- 画像：枠の中で微ズームしながら定位置へ -------------------- */
}
.box-wrapper.js-fade .fadeInTrigger .ffh-frame img,
.box-wrapper.js-fade .fadeInTrigger.ffh-frame img {
  transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-frame img,
.box-wrapper.js-fade .fadeInTrigger.fadeIn.ffh-frame img {
  transform: scale(1);
}
.box-wrapper.js-fade {
  /* --- 横並びの画像は 2枚目以降を少し遅らせる -------------------- */
}
.box-wrapper.js-fade .fadeInTrigger .ffh-pair > *,
.box-wrapper.js-fade .fadeInTrigger .ffh-offset > *,
.box-wrapper.js-fade .fadeInTrigger .ffh-split > *,
.box-wrapper.js-fade .fadeInTrigger .ffh-split__stack > * {
  transform: translate3d(0, 24px, 0);
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.box-wrapper.js-fade .fadeInTrigger .ffh-pair > *:nth-child(2),
.box-wrapper.js-fade .fadeInTrigger .ffh-offset > *:nth-child(2),
.box-wrapper.js-fade .fadeInTrigger .ffh-split > *:nth-child(2),
.box-wrapper.js-fade .fadeInTrigger .ffh-split__stack > *:nth-child(2) {
  transition-delay: 0.14s;
}
.box-wrapper.js-fade .fadeInTrigger .ffh-pair > *:nth-child(2) img,
.box-wrapper.js-fade .fadeInTrigger .ffh-offset > *:nth-child(2) img,
.box-wrapper.js-fade .fadeInTrigger .ffh-split > *:nth-child(2) img,
.box-wrapper.js-fade .fadeInTrigger .ffh-split__stack > *:nth-child(2) img {
  transition-delay: 0.14s;
}
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-pair > *,
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-offset > *,
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-split > *,
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-split__stack > * {
  transform: translate3d(0, 0, 0);
}
.box-wrapper.js-fade {
  /* --- ファーストビュー（KV）：読み込み後のオープニング ----------
     スクロール用の「ブロックごと持ち上げる」動きは FV には使わない。
     位置は動かさず、ぼかしと透明度だけでじわっと滲み出させる。
     文字（タイトル・縦組みメタ）も写真とまったく同じ見せ方で、
     写真が結像しはじめた頃に重ねて浮かび上がらせる。
     JS 側は KV 画像の読み込み完了を待って .fadeIn を付ける。 */
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger {
  /* 親のブロック単位アニメーションは打ち消す */
  opacity: 1;
  filter: none;
  transform: none;
  /* 写真：ぼけた白場からゆっくり結像し、わずかに引く */
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__figs > * {
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-frame img {
  filter: blur(28px);
  transform: scale(1.06);
  transition: filter 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger {
  /* 2枚目をわずかに遅らせて、左から右へ滲む流れをつくる */
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__figs > *:nth-child(2),
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__figs > *:nth-child(2) img {
  transition-delay: 0.35s;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger {
  /* 文字：写真と同じく、ぼけから透明度だけで浮かび上がらせる */
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__title,
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__meta {
  opacity: 0;
  filter: blur(16px);
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger .ffh-kv__meta {
  transition-delay: 1.25s;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger.fadeIn .ffh-kv__figs > * {
  opacity: 1;
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger.fadeIn .ffh-frame img {
  filter: blur(0);
  transform: scale(1);
}
.box-wrapper.js-fade .ffh-kv.fadeInTrigger.fadeIn .ffh-kv__title,
.box-wrapper.js-fade .ffh-kv.fadeInTrigger.fadeIn .ffh-kv__meta {
  opacity: 1;
  filter: blur(0);
}
.box-wrapper.js-fade {
  /* --- 商品クレジットは画像のあとから ---------------------------- */
}
.box-wrapper.js-fade .fadeInTrigger .ffh-credit {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;
}
.box-wrapper.js-fade .fadeInTrigger.fadeIn .ffh-credit {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.box-wrapper.js-fade {
  /* --- フッターは行ごとに時間差で ------------------------------- */
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li,
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__links li,
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__bottom {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li:nth-child(1) {
  transition-delay: 0.1s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li:nth-child(2) {
  transition-delay: 0.2s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li:nth-child(3) {
  transition-delay: 0.3s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li:nth-child(4) {
  transition-delay: 0.4s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__staff li:nth-child(5) {
  transition-delay: 0.5s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__links li:nth-child(1) {
  transition-delay: 0.9s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__links li:nth-child(2) {
  transition-delay: 1s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__links li:nth-child(3) {
  transition-delay: 1.1s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger .ffh-footer__bottom {
  transition-delay: 1.2s;
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger.fadeIn .ffh-footer__staff li,
.box-wrapper.js-fade .ffh-footer.fadeInTrigger.fadeIn .ffh-footer__links li,
.box-wrapper.js-fade .ffh-footer.fadeInTrigger.fadeIn .ffh-footer__bottom {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
.box-wrapper.js-fade .ffh-footer.fadeInTrigger.fadeIn .ffh-footer__line {
  transform: scaleX(1);
}
.box-wrapper.js-fade {
  /* --- モーション低減の設定を尊重する ---------------------------- */
}
@media (prefers-reduced-motion: reduce) {
  .box-wrapper.js-fade .fadeInTrigger,
  .box-wrapper.js-fade .fadeInTrigger * {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
.box-wrapper {
  /* --- リンクのホバー ------------------------------------------------ */
}
.box-wrapper .ffh-credit__buy,
.box-wrapper .ffh-footer__links a,
.box-wrapper .ffh-footer__totop {
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .box-wrapper .ffh-footer__links a:hover,
  .box-wrapper .ffh-footer__totop:hover {
    opacity: 0.5;
  }
  .box-wrapper .ffh-credit__buy:hover {
    background: #000;
    color: #fff;
  }
}
.box-wrapper {
  /* ==================================================================
     SP（390px アートボード基準 / 幅に追従）
     ------------------------------------------------------------------
     PC は 1920px 基準の d() で組んでいるため、SP では
     「縦積み・全幅化」と文字サイズをこのブロックでまとめて上書きする。
     値は 390px カンプの実測 px を sp() に通したもの。
     ================================================================== */
}
@media screen and (max-width: 749.98px) {
  .box-wrapper {
    /* --- キービジュアル ---------------------------------------------
       画像は縦2枚積み。縦組みメタは横組みにして1枚目の左上へ、
       タイトルは1枚目の左下へ、それぞれ写真に白抜きで重ねる。
       重ねはPCと同じくグリッドの同一セルで行う（position は使わない）。 */
  }
  .box-wrapper .ffh-kv {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .box-wrapper .ffh-kv__visual {
    grid-area: 1/1;
    /* 画像2枚が同じ高さなので 1fr 1fr で 1枚目の下端を取り出せる */
    grid-template-rows: 1fr 1fr;
  }
  .box-wrapper .ffh-kv__figs {
    grid-row: 1/span 2;
    flex-direction: column;
    /* PC は横並びで幅を分け合う指定。縦積みでは高さが潰れるので解除する */
  }
  .box-wrapper .ffh-kv__figs > * {
    flex: none;
  }
  .box-wrapper .ffh-frame--kv {
    aspect-ratio: 78/67;
  }
  .box-wrapper {
    /* 1枚目は縦位置写真を横長に詰めるため、カンプに合わせて下寄せで抜く */
  }
  .box-wrapper .ffh-kv__figs > figure:first-child img {
    object-position: center bottom;
  }
  .box-wrapper .ffh-kv__title {
    grid-area: 1/1; /* = 1枚目の画像の領域 */
    justify-self: start;
    margin: 0 0 clamp(11.48px, 3.5897435897cqw, 18.9px) clamp(13.12px, 4.1025641026cqw, 21.6px);
    font-size: clamp(28.7px, 8.9743589744cqw, 40.25px);
  }
  .box-wrapper .ffh-kv__meta {
    grid-area: 1/1;
    align-self: start;
    justify-self: start;
    margin: 0;
    padding: clamp(108.24px, 33.8461538462cqw, 178.2px) clamp(13.12px, 4.1025641026cqw, 21.6px) 0;
    writing-mode: horizontal-tb;
    color: #fff;
    font-size: clamp(13.53px, 4.2307692308cqw, 18.975px);
    line-height: 1.3333333333;
  }
  .box-wrapper {
    /* --- リードコピー ---------------------------------------------- */
  }
  .box-wrapper .ffh-lead {
    margin: clamp(103.32px, 32.3076923077cqw, 170.1px) 0 clamp(106.6px, 33.3333333333cqw, 175.5px);
    font-size: clamp(19.68px, 6.1538461538cqw, 28.8px);
    line-height: 1.0708333333;
  }
  .box-wrapper {
    /* --- 段組みの器：PC の固定幅を解いて左右 15px の余白にする ---- */
  }
  .box-wrapper .ffh-content {
    width: auto;
    margin-inline: 0;
    padding-inline: clamp(12.3px, 3.8461538462cqw, 20.25px);
  }
  .box-wrapper .ffh-narrow {
    width: auto;
    margin-inline: 0;
  }
  .box-wrapper {
    /* --- 2枚並び → 縦積み（左右 45px 空け / 幅 300） -------------- */
  }
  .box-wrapper .ffh-pair {
    flex-direction: column;
    gap: clamp(8.2px, 2.5641025641cqw, 13.5px);
    padding-inline: clamp(24.6px, 7.6923076923cqw, 40.5px);
    /* 同上。縦積みでは flex-basis:0 で高さが潰れる */
  }
  .box-wrapper .ffh-pair > * {
    flex: none;
  }
  .box-wrapper {
    /* 縦積みにしたペアのクレジットは画像の右端に合わせる */
  }
  .box-wrapper .ffh-pair ~ .ffh-credit {
    padding-inline: clamp(24.6px, 7.6923076923cqw, 40.5px);
  }
  .box-wrapper {
    /* --- 縦長1枚 + 横長2枚 → 縦積み（左寄せ → 右寄せ） ----------- */
  }
  .box-wrapper .ffh-split {
    flex-direction: column;
    gap: clamp(57.4px, 17.9487179487cqw, 94.5px);
  }
  .box-wrapper .ffh-split__main {
    flex: none;
    align-self: flex-start;
    width: 83.3333333333%;
  }
  .box-wrapper .ffh-split__stack {
    flex: none;
    align-self: flex-end;
    width: 69.4444444444%;
    gap: clamp(8.2px, 2.5641025641cqw, 13.5px);
  }
  .box-wrapper {
    /* PC は親（縦長画像）の高さを分け合う指定。
       SP は縦積みで親に高さが無いので、比率で自立させる。 */
  }
  .box-wrapper .ffh-frame--fill {
    flex: none;
    aspect-ratio: 700/524;
  }
  .box-wrapper {
    /* --- フルブリードの横位置はSPだけ少し縦長にトリミング --------
       16:9 の写真を 13:9 に詰めるため左右が切れる。既定は中央だが、
       カンプで見せ場が寄っているカットだけ注視点をずらす。 */
  }
  .box-wrapper .ffh-frame--wide {
    aspect-ratio: 13/9;
  }
  .box-wrapper .ffh-frame--focus-l img {
    object-position: left center;
  }
  .box-wrapper {
    /* --- 大小ずらし並び：全幅のまま左右に振り分ける --------------- */
  }
  .box-wrapper .ffh-offset {
    gap: clamp(8.2px, 2.5641025641cqw, 13.5px);
  }
  .box-wrapper .ffh-offset__lg {
    flex: 230 1 0;
  }
  .box-wrapper .ffh-offset__sm {
    flex: 150 1 0;
  }
  .box-wrapper .ffh-narrow > .ffh-credit {
    padding-inline: clamp(12.3px, 3.8461538462cqw, 20.25px);
  }
  .box-wrapper {
    /* --- 商品クレジット：品名／それ以外の2行に折り返す -----------
       グリッドにすると箱が「2行目の幅」に縮むので、
       右端（＝画像の右端）に揃えたまま行頭は左揃えにできる。 */
  }
  .box-wrapper .ffh-credit {
    margin-top: clamp(9.02px, 2.8205128205cqw, 14.85px);
    padding-bottom: 0;
    font-size: clamp(8.2px, 2.5641025641cqw, 12px);
    line-height: 1.2;
  }
  .box-wrapper .ffh-credit li {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 0 0.6em;
  }
  .box-wrapper .ffh-credit li > span:first-child {
    grid-column: 1/-1;
  }
  .box-wrapper .ffh-credit__buy {
    min-width: 4.5em;
  }
  .box-wrapper {
    /* --- フッター：画像を全幅にして下にクレジットを積む ---------- */
  }
  .box-wrapper .ffh-footer {
    flex-direction: column;
    margin-top: clamp(106.6px, 33.3333333333cqw, 175.5px);
  }
  .box-wrapper .ffh-footer__visual {
    flex: none;
    width: 100%;
  }
  .box-wrapper .ffh-footer__body {
    margin: 0;
    padding: 0 clamp(12.3px, 3.8461538462cqw, 20.25px) clamp(28.7px, 8.9743589744cqw, 47.25px);
    font-size: clamp(12.3px, 3.8461538462cqw, 17.25px);
    line-height: 1.3333333333;
  }
  .box-wrapper .ffh-footer__staff {
    margin: clamp(20.5px, 6.4102564103cqw, 33.75px) 0 0;
    padding-left: clamp(12.3px, 3.8461538462cqw, 20.25px);
  }
  .box-wrapper .ffh-footer__line {
    margin: clamp(22.14px, 6.9230769231cqw, 36.45px) 0 0;
  }
  .box-wrapper .ffh-footer__links {
    margin: clamp(18.86px, 5.8974358974cqw, 31.05px) 0 0;
    padding-left: clamp(12.3px, 3.8461538462cqw, 20.25px);
  }
  .box-wrapper {
    /* コピーライトは左下。BACK TO TOP は縦組みのまま右下に置く。
       （フェード演出で .ffh-footer__bottom に transform / filter が
         かかるため、この行自身を絶対配置の基準にしておく） */
  }
  .box-wrapper .ffh-footer__bottom {
    position: relative;
    display: block;
    margin-top: clamp(13.94px, 4.358974359cqw, 22.95px);
    padding: 0 0 0 clamp(12.3px, 3.8461538462cqw, 20.25px);
  }
  .box-wrapper .ffh-footer__copy {
    font-size: clamp(8.2px, 2.5641025641cqw, 12px);
  }
  .box-wrapper .ffh-footer__totop {
    position: absolute;
    right: clamp(11.48px, 3.5897435897cqw, 18.9px);
    bottom: 0;
    font-size: 11px;
  }
}