/* ══════════════════════════════════════════════════════════════
   FOR YOU ── 16タイプで選ぶ（各店舗ページの中の1コンテンツ）
   🔴 色とフォントは各ページの :root の変数をそのまま使う。
      ここで新しい色を持ち込まない（店舗ページとトップで見え方が割れる）。
   ══════════════════════════════════════════════════════════════ */
.fy{display:grid;gap:clamp(16px,3vh,28px)}
.fy-pick{display:grid;gap:clamp(14px,2.6vh,24px)}
.fy-fam{display:grid;gap:9px}
.fy-fl{display:flex;align-items:center;gap:12px}
.fy-fl b{font-family:var(--mincho);font-size:12.5px;letter-spacing:.16em;color:var(--silver);font-weight:500}
.fy-fl span{font-family:var(--serif);font-size:9.5px;letter-spacing:.22em;color:var(--gold-line,var(--gold))}
.fy-fl i{flex:1;height:1px;background:var(--line)}
.fy-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

.fy-pick button{position:relative;background:var(--sumi2,#0C0A11);border:1px solid var(--line);
  color:var(--silver);font-family:var(--sans);padding:15px 12px;cursor:pointer;border-radius:5px;
  text-align:left;overflow:hidden;transition:all .4s var(--ease,cubic-bezier(.16,1,.3,1))}
.fy-pick button em{display:block;font-family:var(--serif);font-style:normal;font-size:11px;
  letter-spacing:.2em;color:var(--gold-line,var(--gold));margin-bottom:6px;transition:color .4s}
.fy-pick button b{display:block;font-family:var(--mincho);font-size:13.5px;letter-spacing:.04em;
  font-weight:500;color:var(--fg);line-height:1.5}
.fy-pick button:hover{border-color:var(--gold-line,var(--gold));transform:translateY(-2px)}
/* 押した手応え。指を離す前に沈む */
.fy-pick button:active{transform:translateY(0) scale(.97);transition-duration:.06s}
.fy-pick button.on{background:var(--hi);border-color:var(--hi)}
.fy-pick button.on em,.fy-pick button.on b{color:#fff}

.fy-result{display:grid;place-items:center;min-height:1px}
.fy-deal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,18px);max-width:820px;width:100%}
.fy-c{position:relative;aspect-ratio:5/7;overflow:hidden;border:1px solid var(--line);
  background:#0C0A11;opacity:0;transform:translateY(30px) scale(.96);text-decoration:none;
  transition:opacity .8s var(--ease,cubic-bezier(.16,1,.3,1)),transform .8s var(--ease,cubic-bezier(.16,1,.3,1))}
.fy-c.in{opacity:1;transform:none}
.fy-c img{width:100%;height:100%;object-fit:cover;object-position:24% 20%;
  transition:transform 1.1s var(--ease,cubic-bezier(.16,1,.3,1))}
a.fy-c:hover img{transform:scale(1.05)}
.fy-meta{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;
  background:linear-gradient(transparent,rgba(5,4,6,.95))}
.fy-j{font-family:var(--mincho);font-size:clamp(13px,1.9vw,18px);letter-spacing:.16em;color:var(--fg)}
.fy-sc{font-family:var(--serif);font-size:11px;color:var(--hi);letter-spacing:.16em;margin-top:5px}
.fy-ar{font-size:9.5px;color:var(--mute);letter-spacing:.14em;margin-top:6px;line-height:1.6}
.fy-hint{text-align:center;font-family:var(--mincho);font-size:11.5px;letter-spacing:.16em;
  color:var(--mute);margin-top:6px;line-height:2}
.fy-hint b{color:var(--silver);font-weight:400}

@media (max-width:820px){ .fy-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .fy-pick button{padding:13px 11px} .fy-pick button b{font-size:12.5px} }
@media (prefers-reduced-motion:reduce){
  .fy-c{opacity:1;transform:none;transition:none}
  .fy-pick button:hover,.fy-pick button:active{transform:none}
}