/* FDK-TOKUOKA-MEETING-87 — TOP SNS section + unified eyebrows (TOP-only, loaded by TOP index.html only). */

/* Unified English section eyebrows: ABOUT ENERGIZER / PRODUCTS / FEATURE / SUPPORT / NEWS / SNS ACCOUNT.
   Specificity (0,5,1) via class repetition deliberately beats the shared gray-section rule
   .fdkTop .isGray p:not(.alkalineEyebrow):not(.cellStoryCapNum) (0,4,1) which forces PRODUCTS to #000.
   No !important, no shared-CSS edit. */
.fdkTop p.topEyebrow.topEyebrow.topEyebrow.topEyebrow{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--red,#ed1740);
}
/* TOP product-card English labels in brand red (TOP-only owner; loaded after the shared gray rule, wins at equal specificity). */
.fdkTop .productsSection .productCard .productCopy>p{color:var(--red,#ed1740)}

/* ---- NEWS section (TOP-only, light gray background) ---- */
.fdkTop .newsSection{background:#f5f5f5}

/* ---- SNS section ---- */
.fdkTop .snsSection{background:#fafafa;padding:84px 30px 92px}
.fdkTop .snsInner{max-width:600px;margin:0 auto}
/* SNS layout: Instagram feature (left) + FB/X/YouTube right rail (desktop). */
.fdkTop .snsLayout{display:flex;flex-direction:column;gap:24px;margin:30px 0 0}
.fdkTop .snsSection h2{margin:6px 0 10px}
/* Heading phrase groups: each group unbreakable; the line breaks only between them (at the space).
   Responsive size so both "FDK Battery" and "公式SNSアカウント" fit at 320 without auto-phrase. */
.fdkTop .snsSection h2.snsHeading{font-size:clamp(20px,5.2vw,28px)}
.fdkTop .snsHeadingGroup{display:inline-block;white-space:nowrap}

/* Instagram feature: centered single native profile embed + a small permanent profile text link. */
.fdkTop .snsInstagram{
  margin:0 auto;max-width:600px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.fdkTop .snsInstagramCard{
  width:100%;box-sizing:border-box;
  background:#fff;border:1px solid #e0ddd7;border-radius:16px;padding:10px;overflow:hidden;
}
.fdkTop .snsInstagramFrame{display:block;width:100%;height:clamp(390px,calc(66.667vw + 150px),560px);border:0;border-radius:8px;background:#fff}
.fdkTop .snsInstagramProfile{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--red,#ed1740);font-size:13px;font-weight:700;text-decoration:none;
}
.fdkTop .snsInstagramProfile:hover{text-decoration:underline}
.fdkTop .snsInstagramProfile .snsInstagramHandle{color:#5e666d;font-weight:400}
.fdkTop .snsInstagramProfile:focus-visible{outline:2px solid var(--red,#ed1740);outline-offset:3px}

/* Facebook / X / YouTube: small understated icon+name links, one row, subordinate to the Instagram feature. */
.fdkTop .snsLinks{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.fdkTop .snsLinkCard{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  min-width:0;min-height:56px;box-sizing:border-box;padding:10px 8px;
  background:#fff;border:1px solid #e0ddd7;border-radius:12px;
  text-decoration:none;color:#202124;
}
.fdkTop .snsLinkCard:hover{border-color:var(--red,#ed1740)}
.fdkTop .snsLinkIcon{width:22px;height:22px;display:block;margin:0}
.fdkTop .snsLinkCard .snsLinkIcon{width:18px;height:18px}
.fdkTop .snsLinkName{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap}
.fdkTop .snsLinkCard:focus-visible{outline:2px solid var(--red,#ed1740);outline-offset:3px}

/* ABOUT h2: keep "Energizer" and "（エナジャイザー）とは" each unbreakable; break only between them (the <wbr>). */
.fdkTop .aboutBrandPhrase{white-space:nowrap}

/* ---- Footer brand icon links (TOP only), beneath company text ---- */
.fdkTop .topSnsFooterLinks{
  list-style:none;margin:4px 0 16px;padding:0;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.fdkTop .topSnsFooterLinks a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid #d7d2ca;color:#202124;
}
.fdkTop .topSnsFooterLinks a:hover{border-color:var(--red,#ed1740)}
/* Reset the inherited .companyBlock img margins (which otherwise displace the icons). */
.fdkTop .topSnsFooterLinks img{width:16px;height:16px;display:block;margin:0}

.fdkTop .topSnsFooterLinks a:focus-visible{
  outline:2px solid var(--red,#ed1740);outline-offset:3px;
}

@media(max-width:480px){
  .fdkTop .snsLinkCard{gap:6px;padding:8px 5px}
  .fdkTop .snsLinkCard .snsLinkIcon{width:16px;height:16px}
  .fdkTop .snsLinkName{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .fdkTop .snsLinkCard,.fdkTop .topSnsFooterLinks a{transition:none}
}