/* =====================================================================
   4 つの特集ページの相互リンク（割れチョコ・アーモンドチョコシリーズ・3CLAP! CHOCOLATE・クーベルティグレ。D-206）
   build.py の feature_links() が、特集ページの本文の終わりに入れる枠（中身は src/data/features.json）。
   見た目は、渡されたクーベルティグレ特集の「おいしい寄り道も、どうぞ。」のカードにそろえた
   ===================================================================== */
.fx{background:var(--paper-deep);border-top:1px solid var(--line);padding:clamp(64px,8vw,104px) 0 clamp(64px,8vw,100px)}
.fx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(26px,3vw,38px)}
.fx-head .eyebrow{margin-bottom:14px}
.fx-head h2{font-size:clamp(24px,3vw,41px);line-height:1.6;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.fx-intro{font-size:14px;line-height:2;color:var(--muted);margin:0}
.fx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--fx-cols,3),minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.fx-card{position:relative;display:block;min-height:clamp(400px,36vw,470px);height:100%;overflow:hidden;border-radius:4px;background:var(--cacao-700);color:#fff9ed;isolation:isolate}
.fx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease)}
.fx-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(24,12,8,.97) 0%,rgba(24,12,8,.9) 34%,rgba(24,12,8,.62) 56%,rgba(24,12,8,.12) 82%,rgba(24,12,8,.04))}
.fx-kicker,.fx-lead,.fx-body h3{text-shadow:0 1px 10px rgba(24,12,8,.55)}
.fx-card:hover img{transform:scale(1.04)}
.fx-arrow{position:absolute;right:20px;top:20px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,249,237,.6);border-radius:50%;background:rgba(36,19,13,.18);font-size:16px;transition:transform .35s var(--ease),background .35s}
.fx-card:hover .fx-arrow{transform:translateX(4px);background:rgba(36,19,13,.42)}
.fx-body{position:absolute;left:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);bottom:clamp(20px,2.2vw,26px)}
.fx-kicker,.fx-lead,.fx-desc{display:block}
.fx-kicker{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--sand);margin:0}
.fx-lead{font-size:14px;line-height:1.8;margin:12px 0 0;color:#fff9ed}
.fx-body h3{font-size:clamp(21px,1.75vw,25px);line-height:1.55;letter-spacing:.03em;margin:4px 0 10px;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.fx-desc{font-size:14px;line-height:1.9;color:rgba(255,249,237,.86);margin:0}
.fx-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,249,237,.34);margin-top:18px;padding-top:12px;font-size:14px;letter-spacing:.06em}
.fx-card:focus-visible{outline:3px solid var(--ohama-red);outline-offset:4px}

@media (max-width:1100px){
  .fx-body h3{font-size:21px}
}
@media (max-width:860px){
  .fx-head{display:block}
  .fx-intro{margin-top:14px}
  /* 狭い画面では横に送るカードにする（次のカードの端を見せて、送れることを伝える） */
  .fx-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,360px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin}
  .fx-grid>li{scroll-snap-align:start}
  .fx-card{min-height:420px}
}
@media (max-width:600px){
  .fx-grid{grid-auto-columns:84%;gap:14px}
  .fx-card{min-height:400px}
  .fx-body h3{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .fx-card img,.fx-arrow{transition:none}
  .fx-card:hover img{transform:none}
}