.fn-detail-page { background: #fcf7f5; }
.fn-detail-page *, .fn-detail-page *::before, .fn-detail-page *::after { box-sizing: border-box; }
.fn-detail-page a:focus-visible, .fn-detail-page button:focus-visible { outline: 3px solid #d82616; outline-offset: 5px; }
.fn-detail-page .fn-brand img { width: 100px; margin: 20px 0; }
.fn-detail-page .headerBox { max-width: 1600px; margin: auto; }
.fn-detail-page .menuBtn { border: 0; padding: 0; background: transparent; }
.fn-skip { position: fixed; top: -80px; left: 20px; z-index: 10000; padding: 12px 20px; background: white; color: #d82616; }
.fn-skip:focus { top: 10px; }
.fn-detail-main { min-height: 70vh; background: url('../image/fanfannews-jpg.webp') center top / 100% auto no-repeat; padding: 0 28px 88px; }
.fn-detail-wrap { width: min(1200px, 100%); margin: auto; }
.fn-detail-hero { min-height: 210px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 0 40px; }
.fn-detail-hero .maintitle { margin: 0; }
.fn-detail-hero .maintitle .span1 { font: 22px Georgia, 'Times New Roman', serif; letter-spacing: 1px; color: rgba(255,255,255,.6); }
.fn-detail-hero .maintitle .span2 { margin-top: 5px; font-size: 38px; letter-spacing: 2px; line-height: 1.4; }
.fn-detail-hero .maintitle .span2::after { top: 9px; right: -135px; width: 120px; }
.fn-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: rgba(255,255,255,.7); font-size: 13px; }
.fn-breadcrumb a { color: #fff; }
.fn-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fn-article { position: relative; padding: 58px 82px 42px; background: #fff; border-top: 4px solid #d82616; box-shadow: 0 14px 48px rgba(79,37,26,.07); }
.fn-article-head { padding-bottom: 30px; border-bottom: 1px solid #eaeaea; }
.fn-article-eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; color: #999; font-size: 12px; letter-spacing: 1px; }
.fn-article-eyebrow span { padding: 6px 10px; background: #fdf0ed; color: #d82616; font-size: 12px; letter-spacing: 1px; }
.fn-article h1 { margin: 0 0 20px; font-size: clamp(27px, 3vw, 40px); font-weight: 700; line-height: 1.45; letter-spacing: .5px; color: #252525; }
.fn-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: #999; font-size: 13px; line-height: 1.8; }
.fn-article-meta a { margin-left: auto; color: #777; }
.fn-article-meta a:hover { color: #d82616; }
.fn-article-meta .fn-meta-divider { width: 1px; height: 12px; background: #ddd; }
.fn-article-body { padding-top: 32px; }
.fn-article-body p { font-size: 16px; color: #555; line-height: 2; margin-bottom: 22px; text-align: justify; overflow-wrap: anywhere; }
.fn-article-body .fn-lead { padding-left: 20px; margin-bottom: 34px; border-left: 3px solid #d82616; font-size: 18px; line-height: 1.9; color: #444; }
.fn-article-body figure { margin: 28px 0 44px; }
.fn-article-body figure img { display: block; width: 100%; height: auto; }
.fn-article-body figcaption { padding-top: 13px; text-align: center; font-size: 12px; line-height: 1.8; color: #999; }
.fn-section-title { display: flex; align-items: center; gap: 16px; margin: 36px 0 20px; }
.fn-section-title span { font: italic 38px Georgia, serif; color: #d82616; line-height: 1; }
.fn-section-title h2 { font-size: 23px; font-weight: 700; line-height: 1.5; color: #252525; }
.fn-dates { margin-bottom: 22px; padding: 19px 24px; background: #faf7f5; border: 1px solid #f1ebe8; }
.fn-dates p { font-size: 14px; line-height: 1.9; margin: 0; }
.fn-dates strong { color: #333; font-weight: 600; }
.fn-endmark { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 42px 0; color: #bbb; font-size: 11px; letter-spacing: 3px; }
.fn-endmark::before, .fn-endmark::after { content: ''; width: 48px; height: 1px; background: #e5e5e5; }
.fn-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid #eee; }
.fn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fn-tags span { padding: 5px 10px; color: #777; background: #f6f6f6; font-size: 12px; }
.fn-list-link { display: inline-flex; align-items: center; gap: 20px; padding: 13px 22px; border: 1px solid #d82616; color: #d82616; font-size: 14px; transition: background .2s, color .2s; }
.fn-list-link:hover { background: #d82616; color: white; }
.fn-related { margin-top: 46px; }
.fn-related-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.fn-related-head h2 { color: #333; font-size: 23px; font-weight: 700; }
.fn-related-head span { font: 13px Georgia, serif; letter-spacing: 2px; color: #aaa; }
.fn-related-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fn-related-link { display: flex; align-items: center; gap: 20px; padding: 22px; background: #fff; border-bottom: 2px solid transparent; transition: border-color .2s; }
.fn-related-link:hover { border-color: #d82616; }
.fn-related-link img { width: 120px; height: 86px; object-fit: cover; flex-shrink: 0; }
.fn-related-link small { color: #999; font-size: 12px; }
.fn-related-link h3 { margin-top: 8px; font-size: 16px; line-height: 1.6; color: #333; }
.fn-related-link b { margin-left: auto; color: #d82616; font-size: 24px; font-weight: 400; }
.fn-menu-close { display: block; margin: 16px 16px 0 auto; padding: 9px 14px; color: #555; background: #f5f5f5; border: 0; font-size: 14px; cursor: pointer; }
.fn-top { position: fixed; right: 22px; bottom: 24px; z-index: 60; width: 46px; height: 46px; border: 1px solid #e5d0cb; background: #fff; color: #d82616; font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px #00000008; }
.fn-top:hover { background: #d82616; color: #fff; }
@media (max-width: 1199px) {
  .fn-detail-page .fn-brand img { margin: 10px 0; }
  .fn-article { padding: 42px 48px 32px; }
  .fn-detail-hero { min-height: 190px; }
}
@media (max-width: 767px) {
  .fn-detail-main { padding: 0 16px 44px; background-size: auto 1550px; }
  .fn-detail-hero { min-height: 174px; padding: 29px 0 24px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .fn-detail-hero .maintitle .span1 { font-size: 17px; }
  .fn-detail-hero .maintitle .span2 { font-size: 29px; }
  .fn-detail-hero .maintitle .span2::after { width: 92px; right: -104px; top: 6px; }
  .fn-breadcrumb { font-size: 12px; gap: 8px; }
  .fn-article { padding: 28px 20px 26px; }
  .fn-article h1 { font-size: 27px; }
  .fn-article-head { padding-bottom: 23px; }
  .fn-article-eyebrow { flex-wrap: wrap; gap: 8px; font-size: 10px; margin-bottom: 14px; }
  .fn-article-meta { gap: 7px 12px; font-size: 12px; }
  .fn-article-meta a { margin-left: 0; }
  .fn-article-meta .fn-meta-divider { display: none; }
  .fn-article-body { padding-top: 25px; }
  .fn-article-body p { font-size: 15px; line-height: 1.95; }
  .fn-article-body .fn-lead { font-size: 16px; padding-left: 14px; margin-bottom: 26px; }
  .fn-section-title { gap: 12px; margin-top: 30px; }
  .fn-section-title span { font-size: 32px; }
  .fn-section-title h2 { font-size: 20px; }
  .fn-dates { padding: 15px; }
  .fn-dates p { font-size: 13px; }
  .fn-article-body figure { margin: 23px 0 32px; }
  .fn-article-foot { gap: 22px; }
  .fn-list-link { justify-content: center; width: 100%; }
  .fn-related { margin-top: 32px; }
  .fn-related-list { grid-template-columns: 1fr; gap: 12px; }
  .fn-related-link { padding: 16px; gap: 14px; }
  .fn-related-link img { width: 92px; height: 74px; }
  .fn-related-head h2 { font-size: 21px; }
  .fn-related-link h3 { font-size: 15px; }
  .fn-related-link b { font-size: 20px; }
  .fn-top { width: 38px; height: 38px; right: 12px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-detail-page *, .fn-detail-page *::before, .fn-detail-page *::after { scroll-behavior: auto !important; transition: none !important; }
}