*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,a{font:inherit}
/* Shared design tokens. Page CSS consumes these values and does not redeclare them. */
.fdkTop{
--red:#ed1740;
--ink:#202124;
--ink-backdrop:#202124b8;
--muted:#6e7277;
--line:#e2e4e7;
--paper:#f3f2f0;
--max:1180px;
--content-max:var(--max);
--content-gutter:30px;
--grade-cyan:#00afec;
--grade-max:#ba1b2b;
--grade-power:#ffe600;
--recharge-gold:#feaf1f;
--recharge-jis-orange:#fb9c02;
--recharge-notice:#ffeabe;
--grade-hearing:#009b4d;
--grade-silver:#e87722;
--grade-power-ink:var(--ink);
--grade-red:var(--grade-max);
--grade-yellow:var(--grade-power)
}
/* Canonical split-hero layout. Page CSS owns only columns, height, gap, and spacing. */
.fdkSplitHero{display:grid;align-items:center;min-width:0}
.fdkSplitHero>*{min-width:0;max-width:100%}
.fdkTop *{box-sizing:border-box}.fdkTop a{color:inherit;text-decoration:none}.fdkTop a[aria-disabled="true"]{pointer-events:none;cursor:default}.fdkHero{height:min(820px,82vw);min-height:650px;position:relative;color:#fff;background:#020d1d;overflow:hidden}.heroBackdrop{object-fit:cover;object-position:center;opacity:1}.fdkHeader{position:relative;z-index:5;height:94px;display:grid;grid-template-columns:210px 1fr 180px;align-items:center;max-width:1440px;margin:auto}.fdkBrand{height:94px;width:180px;background:#fff;display:flex;align-items:center;justify-content:center;align-self:start}.fdkBrand img{width:84px;height:auto}.fdkHeader nav{display:flex;align-items:center;gap:18px;font-size:14px;letter-spacing:.08em}.fdkHeader nav span{opacity:.45}.fdkHeader nav a{transition:opacity .25s}.fdkHeader nav a:hover{opacity:.58}.headerContact{justify-self:end;font-size:14px;letter-spacing:.08em;border:1px solid rgb(255 255 255/.9);padding:10px 18px;font-weight:700;line-height:1;transition:color .25s ease,background-color .25s ease,border-color .25s ease}.menuButton{display:none}.heroInner{position:relative;z-index:2;max-width:1280px;height:calc(100% - 94px);margin:auto}.heroCopy{position:absolute;left:44px;top:18%;z-index:2}.heroCopy h1{font-size:clamp(44px,4.2vw,70px);letter-spacing:.08em;margin:0 0 38px}.energizerLogo{width:340px;height:auto;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}.heroCopy>p{font-size:14px;line-height:2;letter-spacing:.08em;margin:64px 0 0}.heroProduct{position:absolute;width:min(760px,58vw);right:-40px;top:5%}.heroProduct img{width:100%;height:auto;filter:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.heroProduct.heroEnter{animation-delay:.14s}.fdkArrow{display:inline-block;color:var(--red);transition:transform .25s;font-size:0;line-height:0}.infoBar .fdkArrow,.supportAccent .fdkArrow,.redLink .fdkArrow{color:#fff}.infoBar:hover .fdkArrow,.featureGrid>a:hover .fdkArrow,.supportGrid>a:hover .fdkArrow,.newsList>a:hover .fdkArrow,.redLink:hover .fdkArrow{transform:translateX(7px)}
.fdkTop h1,.fdkTop h2,.fdkTop h3,.fdkTop h4{line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:balance}
.fdkTop p,.fdkTop figcaption,.fdkTop .productCopy>span,.fdkTop .productDetailScope,.fdkTop .productDetailNote{line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:var(--mobile-body-wrap,pretty)}
@supports(word-break:auto-phrase){.fdkTop h1,.fdkTop h2,.fdkTop h3,.fdkTop h4,.fdkTop figcaption{word-break:auto-phrase}.fdkTop p,.fdkTop .productCopy>span,.fdkTop .productDetailScope,.fdkTop .productDetailNote{word-break:var(--mobile-body-word-break,auto-phrase)}}.aboutInner{max-width:1120px;margin:auto;display:grid;grid-template-columns:46% 54%;align-items:center}.aboutVisual{height:520px;background:#f1f0ed;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.aboutVisual img{width:66%;height:92%;object-fit:contain;object-position:center bottom}.aboutCopy{padding:24px 0 24px 72px}.sectionLabel{color:var(--red);font-size:11px;font-weight:700;letter-spacing:.28em;margin:0 0 26px}.sectionLabel.dark{color:#555}.aboutCopy h2,.sectionHead h2,.featureSection h2,.supportSection h2,.newsSection h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;letter-spacing:.04em}.aboutCopy h2{font-size:38px;line-height:1.55;margin:0 0 30px}
.productsSection{padding:96px 30px 110px}.sectionHead h2{font-size:38px;margin:0}.productGrid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.1fr .8fr .8fr;grid-template-rows:260px 260px;gap:18px}.productCard{position:relative;background:#fff;border:1px solid #e6e4e1;overflow:hidden;padding:28px}.productCard.productMain{grid-row:1/3}.productCopy{position:relative;z-index:2}.productCard>img{position:absolute;width:68%;height:58%;object-fit:contain;right:8%;bottom:44px;transition:transform .45s cubic-bezier(.2,.75,.2,1)}.productMain>img{width:90%;height:64%;right:5%;bottom:48px}.cardNumber{position:absolute;right:var(--product-main-number-inset,18px);top:var(--product-main-number-inset,18px);color:#e3e3e3;font-size:28px;font-weight:700}.productMain .cardNumber{font-size:var(--product-main-number-size,44px)}
.featureSection,.supportSection{padding:100px 30px;border-bottom:1px solid var(--line)}.contentWidth{max-width:1180px;margin:auto}.featureSection h2,.supportSection h2{font-size:34px;margin:0 0 45px}.featureGrid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}.featureGrid>a{min-height:180px;padding:35px 42px;display:grid;gap:24px;align-items:center;position:relative}.featureGrid>a+a{border-left:1px solid var(--line)}.leafIcon:before{content:"";position:absolute;width:18px;height:29px;border:1.5px solid var(--red);border-radius:100% 0 100% 0;transform:rotate(-22deg);left:17px;top:11px}.leafIcon i{position:absolute;width:1px;height:25px;background:var(--red);transform:rotate(35deg);left:27px;top:17px}.shieldIcon:before{content:"";position:absolute;width:24px;height:29px;border:1.5px solid var(--red);border-radius:12px 12px 16px 16px;left:14px;top:10px}.shieldIcon i:before,.shieldIcon i:after{content:"";position:absolute;background:var(--red);left:26px;top:18px}.shieldIcon i:before{width:2px;height:15px}.shieldIcon i:after{width:15px;height:2px;left:19px;top:24px}.supportSection{padding-top:100px}.supportGrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.supportGrid>a{min-height:170px;padding:34px 38px;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.supportGrid .fdkArrow{position:absolute;left:38px;bottom:28px}.supportAccent{background:var(--red)}
.supportGrid>a:not(.supportAccent){background:#fff}
.newsSection{padding:90px 30px 110px;background:#fff}.newsInner{display:grid;grid-template-columns:280px 1fr;gap:50px}.newsSection h2{font-size:34px;margin:0}.newsList{border-top:1px solid var(--line)}.newsList time{color:#a2a5a9}
.siteBreadcrumb{max-width:1260px;min-height:46px;height:auto;margin:auto;display:flex;align-items:center;gap:9px;color:#85898e;font-size:10px;padding:0;border-top:1px solid var(--line);background:#fff}.siteBreadcrumb a{color:#5e666d}.featureSection+.siteBreadcrumb{border-top:0}.topicTemplate:has(#rolling-stock) .siteBreadcrumb{width:100%;max-width:none;box-sizing:border-box;margin:0;padding:0 max(20px,(100% - var(--content-max,1180px))/2);background:#fff}.fdkFooter{background:#f0f1f3;padding:70px 30px 25px;color:#000;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif}.footerInner{max-width:var(--content-max,1180px);margin:auto;display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:42px}.companyBlock img{width:118px;height:auto;margin-bottom:24px;display:block;margin-top:-10px;margin-left:-16.5px}.companyBlock p{font-size:11px;line-height:1.75;margin:0 0 16px}.companyBlock b{color:#000}.companyBlock a{color:#148b4c;font-size:13px;font-weight:700}.companyBlock small{font-size:9px}.footerGroup{font-size:11px}.footerGroup summary{list-style:none;color:#000;font-size:12px;font-weight:700;margin-bottom:22px;cursor:default}.footerGroup summary::-webkit-details-marker{display:none}.footerGroup div{display:flex;flex-direction:column;gap:13px}.footerGroup a:hover{text-decoration:underline}.footerBottom{max-width:var(--content-max,1180px);margin:50px auto 0;padding-top:22px;border-top:1px solid #dadddf;display:flex;justify-content:space-between;color:#000;font-size:9px}.footerBottom div{display:flex;gap:28px}[data-reveal].isVisible{opacity:1;transform:none}@keyframes hero-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:820px){.fdkHero{height:760px;min-height:0}.fdkHeader{height:70px;grid-template-columns:118px 1fr 48px;padding-right:14px}.fdkBrand{width:106px;height:70px}.fdkBrand img{width:58px}.headerContact{display:none}.menuButton{display:block;grid-column:3;position:relative;z-index:8;justify-self:end;width:44px;height:44px;border:0;background:transparent}.menuButton i{position:absolute;left:8px;width:23px;height:1px;background:#fff;transition:.25s}.menuButton i:first-child{top:14px}.menuButton i:last-child{top:23px}.fdkHeader nav{display:flex;position:absolute;z-index:7;inset:0 0 auto;height:240px;background:#464950;padding:86px 28px 24px;flex-direction:column;align-items:flex-start;gap:18px;font-size:14px;transform:translateY(-105%);visibility:hidden;transition:none}.fdkHeader nav span{display:none}.fdkHeader nav.isOpen{transform:none;visibility:visible;transition:transform .35s}.heroInner{height:calc(100% - 70px)}.heroCopy{left:26px;top:62px}.heroCopy h1{font-size:35px;line-height:1.35;margin-bottom:22px}.infoBar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aboutInner{grid-template-columns:1fr}.aboutVisual img{width:70%;height:94%}.aboutCopy{padding:0;order:1}.aboutCopy h2{font-size:27px}.productsSection{padding:68px var(--mobile-content-gutter,20px)}.sectionHead h2,.featureSection h2,.supportSection h2,.newsSection h2{font-size:27px}.sectionHead>p{margin-top:18px}.productCard,.productCard.productMain{grid-row:auto;min-height:220px;padding:20px}.productCard>img{width:82%;height:54%;right:3%;bottom:38px}.productMain>img{width:92%;height:62%;right:4%}.cardNumber{font-size:20px}.featureSection,.supportSection{padding:70px var(--mobile-content-gutter,20px)}.featureGrid{grid-template-columns:1fr}.featureGrid>a+a{border-left:0;border-top:1px solid var(--line)}.lineIcon{width:46px;height:46px}.leafIcon:before{left:14px;top:8px}.leafIcon i{left:23px;top:14px}.shieldIcon:before{left:10px;top:7px}.shieldIcon i:before{left:22px;top:15px}.shieldIcon i:after{left:15px;top:21px}.supportGrid{grid-template-columns:1fr}.supportGrid>a{min-height:145px;padding:28px 24px}.supportGrid .fdkArrow{left:auto;right:24px;bottom:24px}.newsSection{padding:70px var(--mobile-content-gutter,20px)}.newsInner{grid-template-columns:1fr;gap:28px}.fdkFooter{padding:55px var(--mobile-content-gutter,20px) 24px}.siteBreadcrumb{min-height:44px;height:auto;padding:10px var(--mobile-content-gutter,20px);flex-wrap:wrap}.footerInner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;max-width:none}.companyBlock{grid-column:1/-1;padding-bottom:8px}.companyBlock img{width:100px;height:auto;margin-bottom:24px;display:block;margin-top:-8px;margin-left:-14px}.footerGroup{min-width:0;border-top:1px solid #d8dade;font-size:13px}.footerGroup summary{position:relative;margin:0;padding:16px 20px 16px 0;min-height:44px;font-size:14px;line-height:1.6;text-wrap:balance;cursor:pointer}.footerGroup summary:after{content:"＋";position:absolute;right:0;font-weight:400}.footerGroup[open] summary:after{content:"−"}.footerGroup div{padding:0;gap:0}.footerGroup a{display:flex;align-items:center;min-height:44px;padding:8px 0;line-height:1.6;text-wrap:balance}.footerBottom{display:block;margin-top:24px;max-width:none}.footerBottom div{margin-top:18px;gap:18px;flex-wrap:wrap}}
@media(max-width:420px){.productCard{min-height:270px}.aboutVisual{height:320px}.featureSection h2{font-size:25px}}
/* Catalogue side-view products and TOP three-grade hero composition. */
.fdkTop .productSideRail{position:absolute;left:12%;right:12%;bottom:96px;display:flex;flex-direction:column;align-items:center;gap:12px}
.fdkTop .productSideRail img{display:block;width:min(100%,250px);height:auto;object-fit:contain;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.fdkTop .productCard.productSideProfile>img{width:74%;height:132px;right:13%;bottom:48px;object-fit:contain}
.fdkTop .heroProduct.heroFan{
left:auto;
top:auto;
right:8px;
bottom:34px;
width:min(555px,46vw);
height:min(540px,calc(100% - 42px));
aspect-ratio:auto
}
.fdkTop .heroProduct.heroFan .heroBatteryTrio{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center bottom;
filter:drop-shadow(0 20px 18px rgb(0 4 13/.5));
translate:none
}
.fdkTop .heroCta{
display:flex;
align-items:center;
justify-content:space-between;
width:252px;
min-height:54px;
margin-top:24px;
padding:0 18px 0 20px;
border:1px solid var(--red);
background:var(--red);
color:#fff;
font-size:13px;
font-weight:700;
letter-spacing:.04em;
transition:background-color .2s ease,color .2s ease
}
.fdkTop .heroCta .fdkArrow{color:#fff}
.fdkTop .heroCta:hover,.fdkTop .heroCta:focus-visible{background:#fff;color:var(--red)}
.fdkTop .heroCta:hover .fdkArrow,.fdkTop .heroCta:focus-visible .fdkArrow{color:var(--red);transform:translateX(5px)}
@media(min-width:821px){
.fdkTop .heroProduct.heroFan{right:6px;bottom:-12px;height:min(548px,calc(100% - 38px))}
}
@media(max-width:820px){
.fdkTop .fdkHero{height:100svh}
.fdkTop .heroInner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content minmax(0,1fr);height:calc(100% - 124px);gap:clamp(4px,calc(4.166667svh - 19.666667px),16px);padding:clamp(4px,calc(35.416667svh - 197.166667px),60px) var(--mobile-content-gutter,20px) clamp(4px,calc(8.333333svh - 43.333333px),12px);translate:0 36px}
.fdkTop .heroCopy{display:contents}
.fdkTop .heroCopy h1{position:relative;z-index:2;max-width:100%;margin:0;translate:0 -18px}
.fdkTop .heroCopy>p{position:relative;z-index:2;margin:0;translate:0 -18px}
.fdkTop .heroCta{display:none}
.fdkTop .heroProduct.heroFan{position:relative;grid-row:4;align-self:center;justify-self:center;width:320px;height:auto;aspect-ratio:1215/1295;inset:auto;margin:-50px 0 -16px;translate:none}
.fdkTop .productSideRail{bottom:58px;gap:12px}
.fdkTop .productCard.productMain{min-height:520px}
.fdkTop .productSideRail img{width:min(75%,280px)}
.fdkTop .productCard.productSideProfile>img{width:80%;height:145px;right:10%;bottom:52px}
}
@media(max-width:520px){
.fdkTop .heroCopy h1{max-width:100%;font-size:min(clamp(28px,calc(14.583333svh - 54.833333px),53px),calc((100vw - 2 * var(--mobile-content-gutter,20px)) / 6.1));line-height:1.12;margin:0}
.fdkTop .heroCopy>p{font-size:min(clamp(19px,calc(2.083333svh + 7.166667px),24px),calc((100vw - 2 * var(--mobile-content-gutter,20px)) / 15.5));line-height:1.4;margin:0}
.fdkTop .heroCta{width:210px;min-height:46px;margin-top:0;padding:0 14px 0 16px;border-color:#fff;background:rgb(0 8 24/.24);color:#fff;font-size:11px}
.fdkTop .heroCta:active{background:#fff;color:var(--red)}
.fdkTop .heroCta:active .fdkArrow{color:var(--red);transform:translateX(5px)}
.fdkTop .productSideRail img{width:min(78%,230px)}
.fdkTop .productCard.productSideProfile>img{height:115px}
}
@media(max-width:820px) and (max-height:560px){
.fdkTop .heroProduct.heroFan{width:min(320px,calc((100svh - 250px) * 1.09))}
}
/* Keep the source horizon at the same 79.7% line in every crop. */
.fdkTop .heroBackdrop{
object-position:58% 79.7%
}
.fdkTop .heroProduct.heroFan.heroEnter{
animation:none
}
.fdkTop .heroProduct.heroFan .heroBatteryTrio{
animation:hero-battery-fade 1.1s ease-out .75s both
}
@keyframes hero-battery-fade{
from{opacity:0}
to{opacity:1}
}
@media(prefers-reduced-motion:reduce){
.fdkTop .heroProduct.heroFan .heroBatteryTrio{animation:none;opacity:1}
}
.fdkTop .productsSection{
--product-side-img-width:62%;
--product-side-img-height:108px;
--product-side-img-bottom:55px
}
.fdkTop .productsSection .productSideRail img{width:min(100%,220px)}
.fdkTop .productsSection .productCard.productSideProfile>img,
.fdkTop .productsSection .productCard.productManganeseHorizontal>img{
width:var(--product-side-img-width);
height:var(--product-side-img-height);
left:50%;
right:auto;
bottom:var(--product-side-img-bottom);
object-fit:contain;
object-position:center;
aspect-ratio:auto;
transform:translateX(-50%)
}
@media(max-width:540px){
.fdkTop{--content-gutter:20px;--mobile-content-gutter:var(--content-gutter);--mobile-body-line-height:1.6;--mobile-body-wrap:wrap;--mobile-body-word-break:normal;--mobile-note-line-height:1.6;--mobile-cell-image-width:min(90%,210px);--mobile-cell-image-height:52px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
.fdkTop .productMain .productCopy>span>br{display:none}
.fdkTop .heroCopy{left:var(--mobile-content-gutter,20px);right:var(--mobile-content-gutter,20px)}
.fdkTop .heroCopy h1{max-width:100%}
.fdkTop .mpInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px));max-width:100%;margin-left:auto;margin-right:auto}
.fdkTop .productsSection .productCard.productMain{display:flex;flex-direction:column;min-height:0;padding:20px 20px 48px}
.fdkTop .productsSection .productMain .productSideRail{position:static;inset:auto;width:100%;margin:24px 0}
.fdkTop .productsSection .productCard:not(.productMain){--product-card-hover-x:0%;display:flex;flex-direction:column;min-height:0}
.fdkTop .productsSection .productCard:not(.productMain)>img{position:static;inset:auto;width:100%;height:170px;margin:20px auto 44px;transform:none;object-fit:contain}
.fdkTop .productsSection .productCard.productSideProfile>img,
.fdkTop .productsSection .productCard.productManganeseHorizontal>img{position:static;inset:auto;width:min(calc((100vw - 42px) * .608),210px);height:170px;margin:20px auto 44px;transform:none;object-fit:contain}
}
.fdkTop .productsSection .productCard:not(.productMain)>a{width:150px;height:36px;padding:0 12px;gap:12px;justify-content:space-between;font-size:11px}
.fdkTop .productsSection .productMain>a{width:264px;height:58px;padding:0 20px;column-gap:30px;font-size:14px}
.fdkTop .productsSection .productCard:not(.productMain)>a .fdkArrow{width:38px;flex:none}
.fdkTop .productsSection .productMain>a .fdkArrow{width:58px;flex:none}
@media(max-width:820px){
.fdkTop .productsSection{
--product-side-img-width:68%;
--product-side-img-height:96px;
--product-side-img-bottom:48px
}
.fdkTop .productsSection .productSideRail img{width:min(80%,210px)}
.fdkTop .productsSection .productCard:not(.productMain)>a{width:118px;height:32px;padding:0 9px;gap:9px;font-size:9px}
.fdkTop .productsSection .productMain>a{width:180px;height:48px;padding:0 12px;column-gap:18px;font-size:11px}
.fdkTop .productsSection .productCard:not(.productMain)>a .fdkArrow{width:28px}
.fdkTop .productsSection .productMain>a .fdkArrow{width:44px}
}
/* Shared desktop alignment: visible logo edge, contact edge and content rails. */
@media(min-width:821px){
.fdkTop .fdkHeader{
width:calc(100% - 2 * var(--content-gutter));
max-width:var(--content-max);
height:76px;
padding:0;
grid-template-columns:clamp(150px,18vw,226px) minmax(0,1fr) auto
}
.fdkTop .fdkHeader .fdkBrand{
width:97px;
height:76px;
justify-content:flex-start
}
/* The supplied SVG art starts at x=222.1875 in a 1596.91-wide viewBox. */
.fdkTop .fdkHeader .fdkBrand img{width:97px;display:block;margin-left:calc(-97px * 222.1875 / 1596.91)}
/* TOP's white logo panel is decorative, not the content-width container. */
.fdkTop .fdkHero .fdkBrand{position:relative;isolation:isolate;background:transparent}
.fdkTop .fdkHero .fdkBrand::before{
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:calc(-1 * max(var(--content-gutter),(100vw - var(--content-max))/2));
right:-24px;
background:#fff;
pointer-events:none
}
.fdkTop .fdkHeader nav{margin-left:0}
.fdkTop .fdkHeader .headerContact{padding:11px 19px;font-size:12px}
.fdkTop .heroInner,
.fdkTop .siteBreadcrumb,
.fdkTop .alkalineBreadcrumb,
.fdkTop .alkalineHeroInner,
.fdkTop .alkalineAnchorNav,
.fdkTop .alkalineIntro,
.fdkTop .alkalineSpecial,
.fdkTop .mpInner,
.fdkTop .mpAnchor,
.fdkTop .topicInner,
.fdkTop .topicAnchor{
width:calc(100% - 2 * var(--content-gutter));
max-width:var(--content-max);
margin-left:auto;
margin-right:auto
}
.fdkTop .heroInner{height:calc(100% - 76px)}
.fdkTop .heroCopy{left:0}
.fdkTop .productsSection,
.fdkTop .featureSection,
.fdkTop .supportSection,
.fdkTop .newsSection,
.fdkTop .fdkFooter,
.fdkTop .alkalineLineup,
.fdkTop .alkalineComparison{padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
.fdkTop .sectionHead,
.fdkTop .productGrid,
.fdkTop .contentWidth,
.fdkTop .footerInner,
.fdkTop .footerBottom,
.fdkTop .alkalineSectionHead,
.fdkTop .alkalineGradeGrid,
.fdkTop .alkalineCompareScroll,
.fdkTop .alkalineComparisonInner,
.fdkTop .tableScrollFrame{
width:100%;
max-width:var(--content-max);
margin-left:auto;
margin-right:auto
}
.fdkTop .alkalineCategoryNav,
.fdkTop .alkalineSupport{
padding-left:max(var(--content-gutter),calc((100% - var(--content-max))/2));
padding-right:max(var(--content-gutter),calc((100% - var(--content-max))/2))
}
}
/* Reuse the lower SUPPORT text-hover treatment on TOP NEWS rows. */
.newsList>a:hover,
.newsList>a:focus-visible{
padding-left:10px;
color:var(--red)
}
/* PSD-faithful KV geometry: 2277 × 1164 source frame. */
@media(min-width:821px){.heroProduct img:nth-child(2){translate:0 2px}.heroProduct img:nth-child(3){translate:0 4px}.fdkHero:hover .heroProduct img{transform:none;translate:0 -6px}}
@media(max-width:820px){.heroProduct{width:250px;height:330px;right:-24px;top:320px;display:flex;align-items:flex-start;gap:6px}.heroProduct img{width:auto;height:100%;min-width:0}.energizerLogo{position:relative;z-index:2;width:clamp(132px,calc(81.25svh - 329.5px),230px);translate:0 -18px}}
@media(max-width:420px){}
@media(prefers-reduced-motion:reduce){.fdkTop *{scroll-behavior:auto!important;animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}
.aboutCopy h2,.heroCopy h1{font-family:"Toppan Bunkyu Mincho","Hiragino Mincho ProN",serif;font-weight:400}.sectionHead h2,.featureSection h2,.supportSection h2,.newsSection h2{font-family:"A-OTF Gothic MB101 Pro","Hiragino Sans",sans-serif;font-weight:700;letter-spacing:.02em}[data-reveal]{opacity:1;transform:none;transition:none}.heroEnter{animation:none}.fdkHero:hover .heroProduct img{transform:none;translate:0 0}
@media(min-width:821px){
.fdkHero{height:min(698px,51.12vw);min-height:0}
.fdkHeader{height:76px;max-width:1366px;grid-template-columns:226px 1fr 183px;padding-right:46px}
.fdkBrand{width:226px;height:76px}
.fdkBrand img{width:97px}
.fdkHeader nav{margin-left:84px;gap:17px;font-size:11px;letter-spacing:.08em}
.heroInner{height:calc(100% - 76px);max-width:1366px}
.heroProduct img:nth-child(2),.heroProduct img:nth-child(3){translate:0 0}
.sectionLabel{font-size:9px;letter-spacing:.25em;margin-bottom:24px}
.aboutCopy h2{font-size:29px;line-height:1.55;letter-spacing:.035em;margin-bottom:22px;white-space:nowrap}
.sectionHead h2{font-size:28px;margin:0}
.sectionHead>p{font-size:10px;line-height:var(--mobile-body-line-height,1.8);margin:0 0 2px}
.cardNumber{right:17px;top:15px;font-size:23px}.productMain .cardNumber{font-size:31px}
.featureSection,.supportSection{padding-left:30px;padding-right:30px}
.contentWidth{max-width:1203px}
}
@media(min-width:821px){
.heroTexture{opacity:1;mix-blend-mode:normal}
.heroNetwork{width:1621px;max-width:none;left:calc(50% - 841px);right:auto;top:-10px;opacity:.2;mix-blend-mode:screen}
.heroCopy{left:76px;top:96px}
.heroCopy h1{font-size:60px;line-height:1.12;letter-spacing:.015em;margin-bottom:18px;white-space:nowrap}
.energizerLogo{width:300px;height:58px;object-fit:contain;object-position:left top;filter:none}
.heroProduct{align-items:flex-start;gap:11px;display:block;right:126px;top:135px;width:353px;height:409px}
.heroProduct img{min-width:0;transition:none;width:353px;height:409px;object-fit:contain;filter:none}
.aboutVisual::before,.aboutVisual::after{content:"";position:absolute;width:365px;height:367px;background:#f0f0ed}
.aboutVisual::before{left:0;top:0}
.aboutVisual::after{left:106px;top:108px;background:#e9e8e5}
.aboutCopy h2{font-size:29px;line-height:1.55;margin-bottom:20px}
.sectionHead,.productGrid{width:min(1203px,88.06vw);margin-left:max(7.03vw,calc(50% - 587px));margin-right:0}
}
/* Proportional 1366 px desktop reference. */
@media(min-width:821px) and (max-width:1366px){
.fdkHeader{height:5.57vw;grid-template-columns:16.56vw 1fr 13.4vw;padding-right:3.37vw}
.fdkBrand{width:16.56vw;height:5.57vw}.fdkBrand img{width:7.1vw}
.fdkHeader nav{margin-left:6.15vw;font-weight:300}.headerContact{font-weight:300}
.heroInner{height:calc(100% - 5.57vw)}
.heroCopy{left:5.58vw;top:7.3vw}
.heroCopy h1{font-size:4.35vw;letter-spacing:.015em;margin-bottom:1.5vw}
.energizerLogo{width:20.69vw;height:5.62vw}
.heroCopy>p{position:absolute;left:.22vw;top:14vw;margin:0;font-size:1.25vw;line-height:1.75}
.heroCopy>.heroCta{position:absolute;left:.22vw;top:26.4vw;margin:0}
.heroProduct{left:64.91vw;right:auto;top:9.84vw;width:25.82vw;height:29.95vw}
.heroProduct img{width:25.82vw;height:29.95vw}
.heroNetwork{width:118.67vw;left:-11.6vw;top:-.75vw}
}
.sharedLineArrow{position:relative;display:inline-block;flex:none;color:currentColor}.sharedLineArrow::before,.sharedLineArrow::after{content:"";position:absolute;right:0;height:1px;background:currentColor;transform-origin:right center}.sharedLineArrow::before{left:0}.lineArrow{width:37px;height:10px;transition:transform .25s ease}.lineArrow::before{top:5px}.lineArrow::after{top:5px;width:8px;transform:rotate(35deg)}.lineArrow i{display:none}.infoBar:hover .lineArrow,.redLink:hover .lineArrow{transform:translateX(5px)}.headerContact:hover{color:#fff;background:var(--red);border-color:var(--red);opacity:1}
.heroNetwork{position:absolute;width:min(1120px,72vw);height:auto;right:-5vw;top:-2vw;opacity:.34;mix-blend-mode:screen;animation:network-fade 1.65s cubic-bezier(.2,.75,.2,1) .25s both;transform-origin:72% 38%}@keyframes network-fade{from{opacity:0;transform:scale(1.018)}to{opacity:.2;transform:scale(1)}}
.infoBar{position:absolute;z-index:4;right:0;bottom:0;width:min(760px,62vw);height:56px;display:grid;grid-template-columns:180px 1fr 60px;align-items:center;padding-left:34px;font-size:13px;letter-spacing:.03em;background:#a7132e;color:#fff;font-weight:600}.infoTicker{display:block;min-width:0;height:1.4em;overflow:hidden;color:#fff}.infoTickerText{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:info-slide .55s cubic-bezier(.2,.75,.2,1) both}@keyframes info-slide{from{opacity:0;transform:translateY(65%)}to{opacity:1;transform:none}}
.aboutCopy h2{font-weight:600}.redLink .lineArrow{color:#fff}.productCopy p{color:#777;margin:0 0 8px;font-size:10px;font-weight:600;letter-spacing:.04em}.productCopy h3{margin:0 0 7px;font-size:18px;font-weight:700}.productCopy small{display:block;color:#70747a;font-size:9px;font-weight:500}.productCopy span{display:block;width:72%;color:#656970;margin-top:16px;font-size:11px;line-height:var(--mobile-body-line-height,1.75)}
.featureGrid h3,.supportGrid h3{margin:0 0 10px;font-size:18px;font-weight:700}.featureGrid p,.supportGrid p{margin:0;font-size:13px;line-height:var(--mobile-body-line-height,1.75);color:#7f858c}.supportAccent,.supportAccent h3,.supportAccent p,.supportAccent .fdkArrow{color:#fff}.supportAccent p{opacity:.82}
.phoneLink{display:inline-flex;align-items:center;gap:7px}.freeDialIcon{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%}.freeDialIcon svg{width:14px;height:14px;fill:currentColor}
@media(min-width:821px){
.headerContact{font-size:12px;letter-spacing:.08em;padding:11px 19px}
.heroCopy>p{letter-spacing:.08em;margin-top:30px;font-size:14px;font-weight:600;line-height:1.85}
.aboutCopy h2{font-size:31px;line-height:1.5;margin-bottom:22px}
.redLink{padding:0 24px;width:222px;height:46px;font-size:12px}
.productsSection{padding:52px 0 76px;height:auto;min-height:790px;padding-bottom:84px}
.sectionHead{max-width:1203px;grid-template-columns:493px 1fr;margin-bottom:35px}
.productCard{padding:24px 30px}
.productCard>img{width:250px;height:138px;right:24px;bottom:34px}
.featureGrid>a{min-height:196px;padding:38px 42px}
.supportGrid>a{min-height:184px;padding:36px 38px}
.featureSection h2,.supportSection h2{margin-bottom:40px}
.companyBlock img{width:104px;margin-bottom:22px}
}
@media(max-width:820px){
.fdkTop .heroBackdrop{object-position:60% 79.7%;translate:0 36px}
.heroNetwork{width:900px;right:-460px;top:95px;opacity:.3;animation-duration:1.35s}
.heroCopy h1{max-width:240px;white-space:normal}
.heroCopy>p{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;line-height:1.9;margin-top:6px;font-size:14px;font-weight:700;-webkit-text-stroke:.12px currentColor;text-shadow:0 2px 12px rgb(0 8 24/.45)}
.aboutCopy h2{font-weight:600}
.aboutCopy>p:not(.sectionLabel),.sectionHead>p,.featureGrid p,.supportGrid p{font-size:13px}
.productCopy p{font-size:9px}.productCopy h3{font-size:16px}.productCopy small{font-size:8px}.productCopy span{width:82%;font-size:11px}
.featureGrid h3,.supportGrid h3{font-size:17px}
}
@media(max-width:420px){
.heroProduct{width:220px;height:292px;right:6px;top:326px}
}
@media(prefers-reduced-motion:reduce){.heroNetwork{animation:none;opacity:.2}.infoTickerText{animation:none}}
/* Left-to-right red fill for the FEATURE and SUPPORT link panels. */
.featureGrid>a,.supportGrid>a{isolation:isolate;overflow:hidden;transition:color .22s ease}
.featureGrid>a::before,.supportGrid>a::before{content:"";position:absolute;z-index:0;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .48s cubic-bezier(.22,.72,.18,1)}
.featureGrid>a>* ,.supportGrid>a>*{position:relative;z-index:1}
.featureGrid h3,.featureGrid p,.supportGrid h3,.supportGrid p{transition:color .2s ease .08s}
.featureGrid .lineIcon{transition:border-color .2s ease .08s}
.featureGrid .lineIcon svg{width:30px;height:30px;stroke:var(--red);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .2s ease .08s}
.featureGrid>a:hover::before,.featureGrid>a:focus-visible::before,.supportGrid>a:hover::before,.supportGrid>a:focus-visible::before{transform:scaleX(1)}
.featureGrid>a:hover h3,.featureGrid>a:hover p,.featureGrid>a:focus-visible h3,.featureGrid>a:focus-visible p,.supportGrid>a:hover h3,.supportGrid>a:hover p,.supportGrid>a:focus-visible h3,.supportGrid>a:focus-visible p{color:#fff}
.featureGrid>a:hover .lineIcon,.featureGrid>a:focus-visible .lineIcon{border-color:#fff}
.featureGrid>a:hover .lineIcon svg,.featureGrid>a:focus-visible .lineIcon svg{stroke:#fff}
.featureGrid>a:hover .fdkArrow,.featureGrid>a:focus-visible .fdkArrow,.supportGrid>a:hover .fdkArrow,.supportGrid>a:focus-visible .fdkArrow,.supportAccent .fdkArrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--red);transform:none}
.supportGrid>a.supportAccent::before{background:#e6e7e9;transform:scaleX(0)}
.supportGrid>a.supportAccent:hover::before,.supportGrid>a.supportAccent:focus-visible::before{transform:scaleX(1)}
.supportAccent h3,.supportAccent p{color:#fff}
.supportAccent .fdkArrow{left:auto;right:38px;bottom:24px}
@media(max-width:820px){
.featureGrid>a:hover .fdkArrow,.featureGrid>a:focus-visible .fdkArrow,.supportGrid>a:hover .fdkArrow,.supportGrid>a:focus-visible .fdkArrow,.supportAccent .fdkArrow{width:38px;height:38px}
.supportAccent .fdkArrow{right:24px;bottom:22px}
}
@media(prefers-reduced-motion:reduce){.featureGrid>a::before,.supportGrid>a::before{transition:none}.featureGrid h3,.featureGrid p,.supportGrid h3,.supportGrid p,.featureGrid .lineIcon,.featureGrid .lineIcon svg{transition:none}}
.infoBar b{letter-spacing:.12em;font-weight:800;align-self:stretch;display:flex;align-items:center;background:var(--red);margin-left:-30px;padding-left:30px}.aboutVisual::before{background:#e8e8e4}.aboutVisual::after{background:#deded9}
.sectionHead{max-width:1180px;margin:0 auto 42px;display:grid;align-items:end;grid-template-columns:calc(43% + 30px) 1fr}.sectionHead>p{line-height:var(--mobile-body-line-height,1.9);margin:0 0 5px;font-weight:400;font-size:14px;color:#292c30}
.productCard:not(.productMain)>img{left:50%;right:auto;transform:translateX(-50%)}
.lineIcon{width:54px;height:54px;border:1px solid #c8cbd0;border-radius:50%;position:relative;display:grid;place-items:center}
@media(max-width:820px){
.aboutCopy>p:not(.sectionLabel),.sectionHead>p{font-size:13px}
.sectionHead{display:block;margin-bottom:28px;grid-template-columns:1fr}
}
@media(min-width:821px){
.infoBar{height:48px;font-size:12px;
width:624px;
grid-template-columns:160px minmax(0,1fr) 54px;
padding-left:0
}
.infoBar b{
justify-content:center;
margin:0;
padding:0 22px
}
.infoTicker{padding-left:24px}
.infoBar .lineArrow{
display:inline-block;
width:37px;
color:#fff;
justify-self:center
}
}
@media(min-width:821px) and (max-width:1366px){
.infoBar{left:54.24vw;right:auto;height:3.29vw;font-size:.73vw;
width:45.76vw;
grid-template-columns:11.71vw minmax(0,1fr) 3.95vw;
padding-left:0
}
.infoBar b{
margin:0;
padding:0 1.61vw
}
.infoTicker{padding-left:1.76vw}
}
@media(max-width:820px){
.infoBar{position:relative;inset:auto;width:calc(100% - 28px);height:54px;background:#a7132e;font-size:11px;
grid-template-columns:104px minmax(0,1fr) 40px;
padding-left:0
}
.infoBar b{margin-left:-14px;padding-left:14px;
justify-content:center;
margin:0;
padding:0 12px
}
.infoTicker{padding-left:14px}
.infoBar .lineArrow{width:25px;justify-self:center;display:inline-block;color:#fff}
}
@media(max-width:420px){
.infoBar{width:100%;font-size:9px;
grid-template-columns:84px minmax(0,1fr) 34px;
padding-left:0
}
.infoBar b{letter-spacing:.08em;margin:0;padding:0 8px}
.infoTicker{padding-left:10px}
}
/* All CTA arrows use the PSD's 61 × 13 px line-and-chevron construction, scaled to the 1366 px reference. */
.productCard>a .fdkArrow,.redLink .fdkArrow{color:#fff}
.featureGrid>a,.newsList>a{grid-template-columns:64px minmax(0,1fr) 42px}
.newsList>a{display:grid;gap:20px;align-items:center;min-height:74px;border-bottom:1px solid var(--line);font-size:12px;
padding-left:0;
transition:color .2s,padding-left .2s;grid-template-columns:140px minmax(0,1fr) 42px}
.featureGrid .fdkArrow,.newsList .fdkArrow{justify-self:end}
@media(max-width:820px){
.lineArrow{width:32px}
.featureGrid>a{min-height:155px;padding:26px 22px;gap:17px;grid-template-columns:max-content minmax(0,1fr) 38px}
.newsList>a{gap:12px;min-height:68px;font-size:12px;grid-template-columns:80px minmax(0,1fr) 28px}.newsList>a span{text-wrap:balance}
}
.supportGrid>a.supportAccent:hover h3,.supportGrid>a.supportAccent:focus-visible h3{color:#25282d}
.supportGrid>a.supportAccent:hover p,.supportGrid>a.supportAccent:focus-visible p{color:#70757c}
.aboutCopy .sectionLabel{letter-spacing:.12em}
.aboutCopy h2{letter-spacing:0}
.aboutCopy>p:not(.sectionLabel){margin:0 0 30px;color:#000;font-size:14px;line-height:var(--mobile-body-line-height,1.9);letter-spacing:-.01em}
.redLink::before{content:"";position:absolute;z-index:0;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .48s cubic-bezier(.22,.72,.18,1)}
.redLink>span,.redLink>.fdkArrow{position:relative;z-index:1}
.fdkTop .redLink .fdkArrow{color:var(--red)}
.fdkTop .redLink:hover,.fdkTop .redLink:focus-visible{color:#fff}
.redLink:hover::before,.redLink:focus-visible::before{transform:scaleX(1)}
.redLink:hover .fdkArrow,.redLink:focus-visible .fdkArrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--red);transform:none}
.productsSection .sectionLabel{color:var(--red);letter-spacing:.12em}
.productCard>a::before{content:"";position:absolute;z-index:0;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.22,.72,.18,1)}
.productCard>a>span,.productCard>a>.fdkArrow{position:relative;z-index:1}
.productCard>a .fdkArrow{color:var(--red)}
.productCard>a:focus-visible{color:#fff}
.productCard>a:focus-visible::before{transform:scaleX(1)}
.productCard>a:focus-visible .fdkArrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--red);transform:none}
.productCard>a:focus-visible .fdkArrow::before{left:6px;right:6px;top:13px}
.productCard>a:focus-visible .fdkArrow::after{right:5px;top:13px;width:6px}
@media(min-width:821px){
.fdkTop .redLink{font-size:13px}
.productCopy p{margin-bottom:7px;font-size:11px}
.productCopy h3{margin-bottom:6px;font-size:19px}
.productCopy small{font-size:10px}
.productCopy span{width:86%;margin-top:14px;font-size:12px;line-height:var(--mobile-body-line-height,1.75)}
.productMain>img{right:auto;width:380px;height:275px;left:57px;bottom:70px}
.featureGrid h3,.supportGrid h3{font-size:20px}
.featureGrid p,.supportGrid p{font-size:14px;line-height:var(--mobile-body-line-height,1.75)}
}
/* ABOUT stays white; only the central strip reveals from right to left on scroll. */
.aboutSection{padding:110px 30px;background:#fff;overflow:hidden}
.aboutBand{display:none}
@media(min-width:821px){
.aboutInner.isBandVisible .aboutBand{transform:scaleX(1)}
.aboutVisual,.aboutCopy{z-index:1}
}
@media(prefers-reduced-motion:reduce){
.aboutBand{transform:scaleX(1)}
}
.fdkTop .heroGlobeArrival,
.fdkTop .heroGlobeDrift{animation:none}
.mobileProductBreak{display:none}
@media(max-width:520px){
.mobileProductBreak{display:block}
.fdkTop .productCard:not(.productMain){min-height:244px}
.fdkTop .productCard:not(.productMain)>img{bottom:34px}
.fdkTop .productCard:nth-child(2)>img{width:128%;height:70%}
.fdkTop .productCard:nth-child(3)>img{
width:108%;
height:70%;
bottom:24px;
transform:translateX(-50%) scale(1.18)
}
.fdkTop .productCard:nth-child(4)>img{
--product-card-image-scale:1.35;
width:114%;
height:70%;
bottom:24px;
transform:translateX(-50%) scale(1.35)
}
.fdkTop .productCard:nth-child(5){min-height:270px}
.fdkTop .productCard:nth-child(5)>img{
--product-card-image-scale:1.45;
width:100%;
height:72%;
bottom:18px;
transform:translateX(-50%) scale(1.45)
}
}
.featureGrid>a:hover .fdkArrow::before,
.featureGrid>a:focus-visible .fdkArrow::before,
.supportGrid>a:hover .fdkArrow::before,
.supportGrid>a:focus-visible .fdkArrow::before,
.supportAccent .fdkArrow::before{
left:14px;
right:14px;
top:20px
}
.featureGrid>a:hover .fdkArrow::after,
.featureGrid>a:focus-visible .fdkArrow::after,
.supportGrid>a:hover .fdkArrow::after,
.supportGrid>a:focus-visible .fdkArrow::after,
.supportAccent .fdkArrow::after{
right:13px;
top:20px;
width:6px
}
.redLink:hover .fdkArrow::before,.redLink:focus-visible .fdkArrow::before{left:12px;right:12px;top:19px}
.redLink:hover .fdkArrow::after,.redLink:focus-visible .fdkArrow::after{right:11px;top:19px;width:6px}
@media(min-width:821px){
.productCard>a{font-size:8px;width:150px;height:44px;padding:0 12px 0 18px}
.productMain:hover>a .fdkArrow,.productMain:focus-within>a .fdkArrow{width:32px;height:32px}
.productMain:hover>a .fdkArrow::before,.productMain:focus-within>a .fdkArrow::before{left:9px;right:9px;top:16px}
.productMain:hover>a .fdkArrow::after,.productMain:focus-within>a .fdkArrow::after{right:8px;top:16px;width:6px}
}
@media(max-width:820px){
.productCard>a{width:112px;font-size:10px;height:40px;padding:0 10px 0 14px}
.featureGrid>a:hover .fdkArrow::before,
.featureGrid>a:focus-visible .fdkArrow::before,
.supportGrid>a:hover .fdkArrow::before,
.supportGrid>a:focus-visible .fdkArrow::before,
.supportAccent .fdkArrow::before{left:12px;right:12px;top:18px}
.featureGrid>a:hover .fdkArrow::after,
.featureGrid>a:focus-visible .fdkArrow::after,
.supportGrid>a:hover .fdkArrow::after,
.supportGrid>a:focus-visible .fdkArrow::after,
.supportAccent .fdkArrow::after{right:11px;top:18px;width:6px}
}
/* Keep the visible arrow length unchanged when a CTA gains its circular hover background. */
.redLink>.fdkArrow::after,
.featureGrid>a>.fdkArrow::after,
.supportGrid>a:not(.supportAccent)>.fdkArrow::after{width:6px}
.productCard>a>.fdkArrow{width:12px}
.productCard>a>.fdkArrow::after{width:5px}
.productMain>a>.fdkArrow{width:14px}
.productMain>a>.fdkArrow::after{width:6px}
@media(min-width:821px){
.aboutVisual::before,
.aboutVisual::after{display:none}
}
.productCard>a{position:absolute;z-index:3;right:0;bottom:0;width:138px;height:38px;padding:0 16px;display:flex;align-items:center;font-size:10px;font-weight:700;isolation:isolate;overflow:hidden;border:0;background:#fff;color:var(--red);transition:color .2s ease .08s;
justify-content:flex-start;
gap:14px
}
@media(min-width:821px){
.productGrid{max-width:1203px;gap:18px 30px;
grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
grid-template-rows:250px 250px
}
.productCard:not(.productMain){padding:20px 24px}
.productCard:not(.productMain)>img{width:230px;height:132px;bottom:31px}
.productCard:not(.productMain)>a{
width:124px;
height:36px;
padding:0 10px 0 14px;
gap:12px;
font-size:9px
}
.productMain>a{width:176px;height:50px;padding:0 14px 0 20px;justify-content:flex-start;gap:20px}
}
@media(max-width:820px){
.productGrid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto;
gap:10px
}
.productCard.productMain{
grid-column:1/-1;
min-height:390px;
padding:20px
}
.productCard:not(.productMain){
min-height:210px;
padding:14px 12px
}
.productCard:not(.productMain) .productCopy p{font-size:12px;margin-bottom:8px;max-width:calc(100% - 24px)}
.productCard:not(.productMain) .productCopy small{font-size:12px}
.productCard:not(.productMain)>img{width:76%;height:47%;bottom:30px}
.productCard:not(.productMain)>a{
width:92px;
height:30px;
padding:0 7px 0 10px;
gap:8px;
font-size:8px
}
.productCard:not(.productMain) .cardNumber{right:10px;top:10px;font-size:17px}
.productMain>a{width:132px;height:42px;gap:14px;font-size:10px}
}
@media(max-width:540px){
.footerGroup a:where(:has(>wbr)){flex-wrap:wrap}
.footerGroup a>span:where(:has(~wbr),wbr~*),.footerGroup summary>span:where(:has(~wbr),wbr~*),.fdkTop h1>span:where(:has(~wbr),wbr~*),.fdkTop h2>span:where(:has(~wbr),wbr~*,:has(~br)),.fdkTop h3>span:where(:has(~wbr),wbr~*),.fdkTop h4>span:where(:has(~wbr),wbr~*){white-space:nowrap}
.featureGrid>a{padding:26px 14px;gap:10px;grid-template-columns:max-content minmax(0,1fr) 38px}
.productGrid{grid-template-columns:minmax(0,1fr);gap:18px;--product-main-kicker-size:12px;--product-main-heading-size:18px;--product-main-heading-line:1.5;--product-main-heading-gap:8px;--product-main-number-size:17px;--product-main-number-inset:10px}
.productCard.productMain{grid-column:1/-1;min-height:380px}
.productCard:not(.productMain){min-height:300px;padding:20px}
}
.redLink{display:flex;width:200px;height:50px;padding:0 20px;align-items:center;background:var(--red);color:#fff;font-size:13px;font-weight:600;
justify-content:flex-start;
gap:16px
}
.redLink>.fdkArrow{
width:38px;
height:38px
}
.redLink>.fdkArrow::before{
left:12px;
right:12px;
top:19px
}
.redLink>.fdkArrow::after{
right:11px;
top:19px;
width:6px
}
@media(min-width:821px){
}
@media(min-width:821px){
.productCard:not(.productMain) .productCopy p{margin-bottom:6px;font-size:10px}
.productCard:not(.productMain) .productCopy h3{margin-bottom:5px;font-size:18px}
.productCard:not(.productMain) .productCopy small{font-size:9px}
.productMain .productCopy p{font-size:13px}
.productMain .productCopy h3{font-size:24px}
.productMain .productCopy small{font-size:11px}
.productMain .productCopy span{
color:#000;
font-size:14px;
line-height:1.75
}
}
.featureGrid>a>.fdkArrow,
.supportGrid>a>.fdkArrow{
display:grid;
place-items:center;
width:42px;
height:42px
}
.supportGrid>a:not(.supportAccent)>.fdkArrow,
.supportGrid>a.supportAccent>.fdkArrow{
width:42px;
height:42px
}
.featureGrid>a>.fdkArrow::before,
.featureGrid>a:hover>.fdkArrow::before,
.featureGrid>a:focus-visible>.fdkArrow::before,
.supportGrid>a>.fdkArrow::before,
.supportGrid>a:hover>.fdkArrow::before,
.supportGrid>a:focus-visible>.fdkArrow::before{
left:14px;
right:14px;
top:21px
}
.featureGrid>a>.fdkArrow::after,
.featureGrid>a:hover>.fdkArrow::after,
.featureGrid>a:focus-visible>.fdkArrow::after,
.supportGrid>a>.fdkArrow::after,
.supportGrid>a:hover>.fdkArrow::after,
.supportGrid>a:focus-visible>.fdkArrow::after{
right:13px;
top:21px;
width:6px
}
@media(max-width:820px){
.productCard:not(.productMain) .productCopy h3{line-height:1.5;margin-bottom:8px;font-size:18px}
.productMain .productCopy p{font-size:var(--product-main-kicker-size,13px)}
.productMain .productCopy h3{font-size:var(--product-main-heading-size,24px);line-height:var(--product-main-heading-line,normal);margin-bottom:var(--product-main-heading-gap,7px)}
.productMain .productCopy small{font-size:12px}
.productMain .productCopy span{width:100%;color:#000;font-size:14px}
.featureGrid>a>.fdkArrow,
.supportGrid>a>.fdkArrow,
.supportGrid>a:not(.supportAccent)>.fdkArrow,
.supportGrid>a.supportAccent>.fdkArrow{width:38px;height:38px}
.featureGrid>a>.fdkArrow::before,
.featureGrid>a:hover>.fdkArrow::before,
.featureGrid>a:focus-visible>.fdkArrow::before,
.supportGrid>a>.fdkArrow::before,
.supportGrid>a:hover>.fdkArrow::before,
.supportGrid>a:focus-visible>.fdkArrow::before{left:12px;right:12px;top:19px}
.featureGrid>a>.fdkArrow::after,
.featureGrid>a:hover>.fdkArrow::after,
.featureGrid>a:focus-visible>.fdkArrow::after,
.supportGrid>a>.fdkArrow::after,
.supportGrid>a:hover>.fdkArrow::after,
.supportGrid>a:focus-visible>.fdkArrow::after{right:11px;top:19px;width:6px}
}
.fdkTop .fdkHeader nav,
.fdkTop .headerContact,
.fdkTop .heroCopy>p,
.fdkTop .infoBar,
.fdkTop .productCopy p{letter-spacing:.02em}
.fdkTop .heroCopy h1{letter-spacing:.025em}
.fdkTop .aboutCopy h2,
.fdkTop .sectionHead h2,
.fdkTop .featureSection h2,
.fdkTop .supportSection h2,
.fdkTop .newsSection h2,
.fdkTop .aboutCopy>p:not(.sectionLabel),
.fdkTop .sectionHead>p,
.fdkTop .featureGrid h3,
.fdkTop .featureGrid p,
.fdkTop .supportGrid h3,
.fdkTop .supportGrid p,
.fdkTop .redLink{letter-spacing:0}
.fdkTop .infoBar b{letter-spacing:.04em}
.fdkTop .redLink{font-size:12px;position:relative;isolation:isolate;overflow:hidden;border:0;background:#fff;transition:color .2s ease .08s;
width:240px;
padding:0 18px 0 22px;
justify-content:space-between;
gap:0;
color:#1f2226;
font-weight:600;
-webkit-font-smoothing:antialiased
}
.fdkTop .redLink>.fdkArrow{margin-left:auto}
.fdkTop .redLink:hover .fdkArrow,
.fdkTop .redLink:focus-visible .fdkArrow{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:0;
background:transparent;
color:#fff;
transform:none
}
.fdkTop .redLink:hover .fdkArrow::before,
.fdkTop .redLink:focus-visible .fdkArrow::before{left:10px;right:0;top:19px}
.fdkTop .redLink:hover .fdkArrow::after,
.fdkTop .redLink:focus-visible .fdkArrow::after{right:0;top:19px;width:7px}
@media(min-width:821px) and (max-width:1279px){
.aboutSection{padding:96px 30px 108px}
.aboutInner{width:auto;max-width:1120px;height:auto;display:grid;grid-template-columns:1fr;gap:0}
.aboutCopy{padding:0;order:1}
.aboutVisual{position:relative;height:350px;order:2;margin-top:58px}
.aboutVisual img{width:66%;height:92%}
}
@media(min-width:1280px){
.aboutSection{padding:0;height:780px;min-height:780px}
.aboutInner{grid-template-columns:365px 1fr;gap:176px;align-items:start;position:relative;display:block;width:1366px;max-width:100%;margin:0 auto;height:780px}
.aboutBand{
position:absolute;
z-index:0;
display:block;
background:#f3f3f1;
transform:scaleX(0);
transform-origin:right center;
transition:transform .9s cubic-bezier(.22,.72,.18,1);
left:170px;
right:min(0px, calc((1366px - 100vw)/2));
top:104px;
height:548px
}
.aboutVisual{position:absolute;left:170px;width:471px;background:transparent;display:block;overflow:visible;
top:124px;
height:500px
}
.aboutVisual img{position:absolute;z-index:2;left:101px;width:269px;object-fit:contain;filter:none;
top:18px;
height:456px
}
.aboutCopy{position:absolute;padding:0;
width:478px;
top:205px;
left:718px
}
.aboutCopy>p:not(.sectionLabel){font-size:14px;line-height:var(--mobile-body-line-height,1.85);margin-bottom:22px}
}
@media(max-width:820px){
.aboutSection{padding:96px var(--mobile-content-gutter,20px) 108px}
.aboutVisual{height:350px;order:2;margin-top:58px}
}
.fdkTop{color:var(--ink);background:#fff;overflow:hidden;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
font-weight:400;
font-synthesis:none;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility
}
.fdkTop .isGray{background:var(--paper)}
.fdkTop .isGray{color:#000}
.fdkTop .isGray p:not(.alkalineEyebrow):not(.cellStoryCapNum),
.fdkTop .isGray li,
.fdkTop .isGray th,
.fdkTop .isGray td,
.fdkTop .isGray dt,
.fdkTop .isGray dd,
.fdkTop .isGray .topicNote,
.fdkTop .isGray .topicSource,
.fdkTop .isGray .topicCard small,
.fdkTop .isGray .productCategoryNote,
.fdkTop .isGray .productCategoryModel,
.fdkTop .isGray .productCategorySummary,
.fdkTop .isGray .productCategoryFacts dt,
.fdkTop .isGray .alkalineCompareScroll tbody th{
color:#000
}
.fdkTop .isGray .cellStory.isStandard .cellStoryCapNum,
.fdkTop .isGray .cellStory.isStandard .cellStoryIndex,
.fdkTop .isGray .cellStory.isStandard .cellStoryJisPoint.isCurrent strong{
color:var(--grade-hearing)
}
.fdkTop .isGray a.topicCta{color:var(--red)}
.fdkTop:not(.alkalineTemplate){--muted:#8d9299}
.fdkTop .aboutCopy h2{font-family:"Toppan Bunkyu Mincho","Hiragino Mincho ProN","Yu Mincho",serif}
.fdkTop .heroCopy h1{font-family:"Arial Black","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:900;letter-spacing:.005em;-webkit-text-stroke:.35px currentColor;text-shadow:0 3px 18px rgb(0 8 24/.35)}
.fdkTop .sectionHead h2,
.fdkTop .featureSection h2,
.fdkTop .supportSection h2,
.fdkTop .newsSection h2{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:600}
.fdkTop .heroBackdrop{opacity:.96;filter:none;transform:none}
.fdkTop .productCard>a{
display:grid;
grid-template-columns:max-content auto;
align-items:center;
justify-content:center;
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
font-weight:500;
font-synthesis:none;
letter-spacing:.015em;
line-height:1;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision
}
.fdkTop .productCard>a:focus-visible{color:#fff}
.fdkTop .productCard>a:focus-visible::before{transform:scaleX(1)}
.fdkTop .productCard>a:focus-visible .fdkArrow{
display:inline-block;
border-radius:0;
background:transparent;
color:#fff
}
@media(min-width:821px){
.fdkTop .heroProduct{left:auto;right:0;top:112px}
.fdkTop .productCard:not(.productMain)>a{
width:186px;
height:44px;
padding:0 14px;
column-gap:18px;
font-size:13px
}
.fdkTop .productMain>a{
width:264px;
height:58px;
padding:0 20px;
column-gap:30px;
font-size:14px
}
.fdkTop .productCard:not(.productMain)>a .fdkArrow{
width:46px;
height:14px
}
.fdkTop .productMain>a .fdkArrow{
width:58px;
height:14px
}
.fdkTop .productCard>a .fdkArrow::before{left:0;right:0;top:7px}
.fdkTop .productCard>a .fdkArrow::after{right:0;top:7px;width:8px}
}
@media(max-width:820px){
.fdkTop .productCard:not(.productMain)>a{
width:126px;
height:36px;
padding:0 8px;
column-gap:10px;
font-size:9px
}
.fdkTop .productMain>a{
width:180px;
height:48px;
padding:0 12px;
column-gap:18px;
font-size:11px
}
.fdkTop .productCard:not(.productMain)>a .fdkArrow{width:34px;height:12px}
.fdkTop .productMain>a .fdkArrow{width:44px;height:12px}
.fdkTop .productCard>a .fdkArrow::before{left:0;right:0;top:6px}
.fdkTop .productCard>a .fdkArrow::after{right:0;top:6px;width:7px}
}
.fdkTop .featureGrid .lineIcon{
display:grid;
place-items:center;
border-color:var(--red);
background:var(--red);
transition:background-color .2s ease .08s,border-color .2s ease .08s
}
.fdkTop .featureGrid .lineIcon svg{stroke:#fff}
.fdkTop .featureGrid>a:hover .lineIcon,
.fdkTop .featureGrid>a:focus-visible .lineIcon{
border-color:transparent;
background:transparent
}
.fdkTop .featureGrid>a:hover .lineIcon svg,
.fdkTop .featureGrid>a:focus-visible .lineIcon svg{stroke:#fff}
@media(min-width:821px){
.fdkTop .heroNetwork{
width:118vw;
max-width:none;
left:-12vw;
right:auto;
top:-8vw;
animation:network-fade-soft 2.8s cubic-bezier(.22,.72,.18,1) .2s both,
hero-earth-float 7.2s ease-in-out 3s infinite
}
.fdkTop .heroCopy.heroEnter{
animation:hero-copy-in-soft 2.25s cubic-bezier(.22,.72,.18,1) .25s both
}
.fdkTop .heroCopy>p{
font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
font-size:clamp(16px,1.875vw,24px);
line-height:1.7;
font-weight:700;
-webkit-text-stroke:.18px currentColor;
text-shadow:0 2px 14px rgb(0 8 24/.45)
}
.fdkTop .heroProduct.heroEnter{
animation:hero-product-in-soft 2.5s cubic-bezier(.22,.72,.18,1) .45s both
}
}
@keyframes network-fade-soft{
from{opacity:0;transform:scale(1.025)}
to{opacity:.24;transform:scale(1)}
}
@keyframes hero-copy-in-soft{
from{opacity:0;transform:translateY(clamp(0px,calc((100vw - 821px) * .04),18px))}
to{opacity:1;transform:translateY(0)}
}
@keyframes hero-product-in-soft{
from{opacity:0}
to{opacity:1}
}
@keyframes hero-earth-float{
0%,100%{translate:0 0}
50%{translate:0 -8px}
}
@media(prefers-reduced-motion:reduce){
.fdkTop .heroNetwork,
.fdkTop .heroCopy.heroEnter,
.fdkTop .heroProduct.heroEnter{animation:none}
}
/* Keep the PSD grain fine on wide and high-density displays instead of enlarging its pixels. */
@media(min-width:1920px){
.fdkTop .heroBackdrop{opacity:.96}
.fdkTop .fdkHero::before{
content:"";
position:absolute;
z-index:1;
inset:0;
pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:180px 180px;
mix-blend-mode:soft-light;
opacity:.07
}
.fdkTop .heroNetwork{z-index:2}
}
.fdkTop .sectionLabel{letter-spacing:.04em;margin-bottom:12px}
@media(max-width:820px){
.fdkTop .sectionLabel{margin-bottom:10px}
}
@media(max-width:820px){
.fdkTop .heroNetwork{
width:760px;
max-width:none;
left:auto;
right:-100px;
top:120px;
opacity:.24;
animation:network-fade-soft 2.8s cubic-bezier(.22,.72,.18,1) .2s both,
hero-earth-float 7.2s ease-in-out 3s infinite
}
.fdkTop .aboutVisual{
height:190px;
margin-top:28px;
padding-right:10px;
background:transparent;
align-items:flex-end;
justify-content:flex-end;
overflow:visible
}
.fdkTop .aboutVisual img{
width:auto;
height:180px;
object-fit:contain;
object-position:center bottom;
filter:none
}
.fdkTop .redLink{padding-left:18px;padding-right:14px;
width:190px;
height:50px;
margin-left:auto;
padding:0 14px 0 18px;
justify-content:flex-end;
gap:14px;
border:1px solid #c8cbd0
}
.fdkTop .redLink>.fdkArrow{margin-left:0}
}
@media(max-width:420px){
.fdkTop .heroProduct{
width:188px;
height:250px;
right:14px;
top:350px
}
}
@media(max-width:520px){
.fdkTop .heroBackdrop{object-position:60% 79.7%}
.fdkTop .heroNetwork{
width:900px;
left:-420px;
right:auto;
top:160px
}
.fdkTop .heroProduct{
width:172px;
height:auto;
right:10px;
top:286px
}
.fdkTop .heroProduct img{
width:100%;
height:auto;
object-fit:contain
}
.fdkTop .infoBar{grid-template-columns:104px minmax(0,1fr) 46px}
.fdkTop .infoBar b{padding:0 12px}
.fdkTop .infoTicker{padding-left:16px}
.fdkTop .aboutVisual{
margin-top:-60px;
padding-right:0;
padding-left:18px;
justify-content:flex-start
}
.fdkTop .aboutCopy h2{
font-size:clamp(20px,calc((100vw - 2 * var(--mobile-content-gutter,20px)) / 14),25px);
line-height:1.65;
letter-spacing:min(0px,calc((100vw - 334px)*.04))
}
.fdkTop .aboutCopy h2>span{white-space:nowrap}
.fdkTop .productMain>img{
height:55%;
bottom:18px
}
}
@media(max-width:520px){
.fdkTop .aboutSection{padding-left:var(--mobile-content-gutter,20px);padding-right:var(--mobile-content-gutter,20px)}
}
/* Preserve the globe's native aspect ratio; responsive cropping supplies the composition. */
.fdkTop .heroNetwork{scale:1}
.fdkTop .productsSection .productCard>.productCardLink{
position:absolute;z-index:3;inset:0;width:auto;height:auto;padding:0;
display:block;overflow:visible;background:transparent;color:var(--red)
}
.fdkTop .productsSection .productCard:not(.productMain)>.productCardLink,
.fdkTop .productsSection .productCard.productMain>.productCardLink{
inset:0;width:auto;height:auto;padding:0;display:block;background:transparent
}
.fdkTop .productsSection .productCard>.productCardLink::before{display:none}
.fdkTop .productsSection .productCardCta{
position:absolute;right:0;bottom:0;width:150px;height:36px;padding:0 12px;
display:grid;grid-template-columns:max-content auto;align-items:center;justify-content:space-between;gap:12px;
isolation:isolate;overflow:hidden;background:#fff;font-size:11px;font-weight:500;
transition:color .2s ease .08s
}
.fdkTop .productsSection .productCardCta::before{
content:"";position:absolute;z-index:-1;inset:0;background:var(--red);
transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.22,.72,.18,1)
}
.fdkTop .productsSection .productMain .productCardCta{width:264px;height:58px;padding:0 20px;font-size:14px}
@media(hover:hover){.fdkTop .productsSection .productCard:hover .productCardCta{color:#fff}}
.fdkTop .productsSection .productCard:where(:has(>.productCardLink:focus-visible)) .productCardCta{color:#fff}
@media(hover:hover){.fdkTop .productsSection .productCard:hover .productCardCta::before{transform:scaleX(1)}}
.fdkTop .productsSection .productCard:where(:has(>.productCardLink:focus-visible)) .productCardCta::before{transform:scaleX(1)}
.fdkTop .productsSection .productCard>.productCardLink:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.fdkTop .productsSection .productSideRail{transition:transform .45s cubic-bezier(.2,.75,.2,1)}
@media(hover:hover){.fdkTop .productsSection .productCard.productMain:hover .productSideRail{transform:scale(1.08)}}
.fdkTop .productsSection .productCard.productMain:where(:has(>.productCardLink:focus-visible)) .productSideRail{transform:scale(1.08)}
@media(hover:hover){.fdkTop .productsSection .productCard.productMain:hover .productSideRail img{transform:none}}
.fdkTop .productsSection .productCard.productMain:where(:has(>.productCardLink:focus-visible)) .productSideRail img{transform:none}
@media(hover:hover){.fdkTop .productsSection .productCard:hover>img{transform:translateX(var(--product-card-hover-x,-50%)) scale(calc(var(--product-card-image-scale,1) * 1.08))}}
.fdkTop .productsSection .productCard:where(:has(>.productCardLink:focus-visible))>img{transform:translateX(var(--product-card-hover-x,-50%)) scale(calc(var(--product-card-image-scale,1) * 1.08))}
@media(hover:hover){.fdkTop .productsSection .productCard.productSideProfile:hover>img,.fdkTop .productsSection .productCard.productManganeseHorizontal:hover>img{transform:translateX(var(--product-card-hover-x,-50%)) scale(1.08)}}
.fdkTop .productsSection .productCard.productSideProfile:where(:has(>.productCardLink:focus-visible))>img,.fdkTop .productsSection .productCard.productManganeseHorizontal:where(:has(>.productCardLink:focus-visible))>img{transform:translateX(var(--product-card-hover-x,-50%)) scale(1.08)}
@media(max-width:820px){
.fdkTop .productsSection .productCardCta{width:148px;height:44px;padding:0 12px;gap:10px;font-size:14px}
.fdkTop .productsSection .productMain .productCardCta{width:180px;height:48px;padding:0 12px;font-size:14px}
}
.productFeatures{--product-accent:var(--grade-cyan);padding:80px 0}
.productFeaturesVisual picture{display:flex;justify-content:center;align-items:center;width:auto;height:auto}
.productFeaturesInner{width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto}
.productFeatures h2{margin:0;font-size:32px;font-weight:600;line-height:1.5}
.productRatingNotice{display:inline-block;margin:16px 0 0;padding:8px 14px;background:#f3f5f6;color:#63696f;font-size:13px;line-height:1.7}
.productFeaturesGrid{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:center;margin:40px 0 30px}
.productFeaturesVisual{display:flex;flex-direction:column;align-items:center;gap:24px}
.productFeaturesVisual img{height:240px;width:auto;object-fit:contain}
.productFeaturesVisual>span{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--product-accent)}
.productRatingList{margin:0;border-top:1px solid #e3e6e8}
.productRatingRow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:19px 0;border-bottom:1px solid #e3e6e8}
.productRatingRow dt{font-size:16px;font-weight:600;line-height:1.6}
.productRatingRow dt small{display:block;font-size:13px;font-weight:400;color:#73777d}
.productRatingRow dd{margin:0;display:flex;gap:20px;align-items:center}
.productRatingRow dd>small{font-size:12px;color:#73777d;white-space:nowrap}
.productStars{display:flex;gap:5px;color:#a5adb3;font-size:27px;line-height:1;white-space:nowrap}
.productStars .isFilled{color:var(--product-accent)}
.productFeatureTags{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0;padding:0}
.productFeatureTags li{position:relative;overflow:hidden;border:1px solid #dfe3e6;background:#fff;color:var(--ink);line-height:1.6;transition:border-color .2s,background-color .2s}
.productFeatureTags li::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:5px;background:var(--feature-color)}
.productFeatureTags a{display:flex;position:relative;flex-direction:column;justify-content:center;align-items:flex-start;min-height:104px;padding:22px 64px 18px 22px;background:#fff;transition:background-color .2s}
.productFeatureTags li:hover{border-color:color-mix(in srgb,var(--feature-color) 48%,white)}
.productFeatureTags a:hover{background:color-mix(in srgb,var(--feature-color) 3%,white)}
.productFeatureTags strong{color:var(--feature-color);font-size:18px;font-weight:700;letter-spacing:.02em}.productFeatureTags small{color:#687078;font-size:12px;margin-top:4px}
.productFeatureArrow{position:absolute;right:18px;top:50%;width:36px;height:36px;border-radius:50%;background:var(--feature-color);transform:translateY(-50%);transition:transform .2s}
.productFeatureArrow::before{content:"";position:absolute;left:50%;top:9px;width:1px;height:13px;background:#fff;transform:translateX(-50%)}
.productFeatureArrow::after{content:"";position:absolute;left:50%;top:17px;width:7px;height:7px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:translateX(-50%) rotate(45deg)}
.productFeatureTags a:hover .productFeatureArrow{transform:translateY(-46%)}
.productFeatureTags a:focus-visible{outline:2px solid var(--feature-color);outline-offset:3px}
.productFeaturesNote{margin:18px 0 0;color:#73777d;font-size:12px;line-height:1.9}
@media(max-width:820px){.productFeaturesInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px))}.productFeaturesGrid{grid-template-columns:160px 1fr;gap:28px}.productRatingRow{grid-template-columns:1fr;gap:10px}.productStars{font-size:25px}.productFeatures h2{font-size:28px}}
@media(max-width:540px){.productFeatures{padding:60px 0}.productFeaturesGrid{grid-template-columns:1fr;margin-top:30px}.productFeaturesVisual img{height:180px}.productFeaturesVisual{gap:15px}.productRatingRow{grid-template-columns:1fr auto;gap:12px}.productRatingRow dt{font-size:14px}.productRatingRow dt small{font-size:12px}.productRatingRow dd{flex-direction:column;gap:6px;align-items:flex-end}.productStars{font-size:22px;gap:2px}.productFeatureTags{grid-template-columns:1fr 1fr}.productFeatureTags li{font-size:13px}}
.productFeatureDetails{padding:0 0 60px}
.productFeatureDetail{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px;padding:54px 0;border-top:1px solid #e3e6e8;scroll-margin-top:40px}
.productDetailKicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--feature-color);font-weight:600;font-size:15px}
.productDetailKicker>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--feature-color) 10%,white);font-size:13px}
.productFeatureDetail h3{margin:0 0 20px;font-size:25px;font-weight:600;line-height:1.65}
.productFeatureDetailCopy>p:not(.productDetailKicker){font-size:16px;line-height:var(--mobile-body-line-height,1.95);color:#666d73;margin:0 0 22px}
.productDetailScope{display:inline-block;padding:6px 12px;background:#f3f5f6;font-size:13px;color:#525c64;line-height:1.7}
.productFeatureDetailCopy>p.productDetailNote{font-size:12px;line-height:1.9;margin:14px 0 0;color:#737c84}
.productDetailVisual{margin:0}.productDetailVisual img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain}.productDetailVisual figcaption{font-size:12px;color:#88929a;text-align:center;margin-top:12px}
.recommendedDevices{margin-top:64px;padding-top:44px;border-top:1px solid #e3e6e8}
.recommendedDevices h3{margin:0;font-size:28px;font-weight:600;line-height:1.5}
.deviceGroups{display:grid;gap:14px;margin-top:30px}.deviceGroup{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:stretch;padding:14px 0;border-top:1px solid #e4e6e8;--device-color:#2c3136}.deviceGroup:last-child{border-bottom:1px solid #e4e6e8}
.deviceGroup h4{position:relative;display:flex;align-items:center;margin:0;padding:0 0 0 18px;color:#2c3136;font-size:14px;font-weight:600;line-height:1.6}.deviceGroup h4::before{content:"";position:absolute;left:0;width:3px;height:28px;background:var(--red)}
.deviceIcons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.deviceIcons figure{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;min-height:74px;margin:0;padding:12px 14px;border:1px solid #e4e6e8;border-radius:4px;background:#fff;color:var(--device-color);text-align:left}.deviceIcons svg{display:block;width:38px;height:38px}.deviceIcons figcaption{color:#444a50;font-size:12px;font-weight:500;line-height:1.5}
.deviceIcons.isReceived{grid-template-columns:repeat(5,minmax(0,1fr))}
.deviceIcons.isReceived figure{display:flex;align-items:center;justify-content:center;grid-template-columns:none;min-height:0;padding:8px;border:0}
.deviceIcons.isReceived img{display:block;width:66.67%;height:auto;object-fit:contain}
@media(max-width:820px){.productFeatureDetail{gap:32px}.productFeatureDetail h3{font-size:23px}.deviceGroup{grid-template-columns:110px 1fr;gap:16px}.deviceIcons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.deviceIcons.isReceived{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.productFeatureTags strong{font-size:15px}.productFeatureTags a{min-height:88px;padding:17px 46px 14px 14px}.productFeatureArrow{right:11px;width:30px;height:30px}.productFeatureArrow::before{top:7px;height:12px}.productFeatureArrow::after{top:14px}.productFeatureDetail{grid-template-columns:1fr;gap:28px;padding:40px 0}.productFeatureDetail h3{font-size:23px}.productDetailVisual{max-width:100%}.recommendedDevices h3{font-size:25px}.deviceGroup{grid-template-columns:1fr;gap:10px;padding:18px 0}.deviceGroup h4{min-height:28px;padding-left:14px}.deviceGroup h4::before{height:22px}.deviceIcons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.deviceIcons figure{grid-template-columns:36px 1fr;gap:8px;min-height:66px;padding:10px}.deviceIcons svg{width:30px;height:30px}.deviceIcons figcaption{font-size:11px}.deviceGroups{gap:0}.deviceIcons.isReceived{grid-template-columns:repeat(2,minmax(0,1fr))}.deviceIcons.isReceived figure{grid-template-columns:none;min-height:0;padding:8px}}
@media(prefers-reduced-motion:reduce){.productFeatureTags li,.productFeatureTags a,.productFeatureArrow{transition:none}}
.ecoPackGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ecoPackGrid figure{display:flex;min-width:0;min-height:300px;margin:0;padding:25px 20px 22px;flex-direction:column;background:transparent;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ecoPackGrid figcaption{margin:12px 0 0;font-size:14px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.ecoPackGrid button{display:flex;width:100%;min-height:235px;padding:18px 0 0;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;border:0;background:transparent;color:#565d63;cursor:zoom-in}
.ecoPackGrid button>img{display:block;width:100%;height:180px;object-fit:contain;transition:transform .3s}
.ecoPackZoomCaption,.mpZoomCaption{display:flex;margin-top:16px;align-items:center;justify-content:center;gap:14px;font-size:13px;color:#000}
.ecoPackMagnifier,.mpMagnifier{position:relative;display:inline-block;width:15px;height:15px;flex:0 0 15px;margin-right:4px;border:1.5px solid #16849f;border-radius:50%}
.ecoPackMagnifier::after,.mpMagnifier::after{content:"";position:absolute;right:-5px;bottom:-2px;width:7px;height:1.5px;background:#16849f;transform:rotate(45deg)}
.ecoPackGrid button:focus-visible{outline:2px solid var(--grade-cyan);outline-offset:4px}
/* アルカリ3グレード変種：虫眼鏡・グリッドfocusをブローシャ採色へ（非グレードは #16849f/cyan のまま）。 */
.maxPlusTemplate .ecoPackMagnifier,.grade-max .ecoPackMagnifier,.grade-power .ecoPackMagnifier{border-color:var(--grade-accent)}
.maxPlusTemplate .ecoPackMagnifier::after,.grade-max .ecoPackMagnifier::after,.grade-power .ecoPackMagnifier::after{background:var(--grade-accent)}
.maxPlusTemplate .ecoPackGrid button:focus-visible,.grade-max .ecoPackGrid button:focus-visible,.grade-power .ecoPackGrid button:focus-visible{outline-color:var(--grade-accent)}
@media(hover:hover){.ecoPackGrid button:hover>img{transform:scale(1.06)}}
.ecoPackDialog,.mpZoomDialog{position:fixed;inset:0;width:min(860px,94vw);max-width:94vw;max-height:90vh;margin:auto;padding:0;overflow:hidden;border:0;border-radius:4px;background:#fff;color:var(--ink)}
.ecoPackDialog::backdrop,.mpZoomDialog::backdrop{background:var(--ink-backdrop)}
.ecoPackDialog>div,.mpZoomDialog>div{padding:34px 38px 38px;overflow:auto}
.ecoPackDialogHeader,.mpZoomHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.ecoPackDialogHeader p,.mpZoomTitle{margin:4px 0 0;font-size:22px;font-weight:600;line-height:1.55}
.ecoPackDialogHeader button,.mpZoomClose{display:grid;width:48px;height:48px;flex:0 0 48px;margin:0;place-items:center;border:0;border-radius:2px;background:var(--grade-cyan);color:#fff;cursor:pointer;font:inherit;outline:none}
.ecoPackDialogHeader button span,.mpZoomClose span{font-size:32px;font-weight:300;line-height:1;transform:translateY(-1px)}
.ecoPackDialogHeader button:hover,.mpZoomClose:hover{background:#078cab}
.ecoPackDialogHeader button:focus-visible,.mpZoomClose:focus-visible{outline:2px solid var(--grade-cyan);outline-offset:2px}
.mpZoomDialog.isAccentMax .mpZoomClose,.mpZoomDialog.isAccentMax .mpZoomClose:hover,.ecoPackDialog.isAccentMax .ecoPackDialogHeader button,.ecoPackDialog.isAccentMax .ecoPackDialogHeader button:hover{background:var(--grade-max);color:#fff}
.mpZoomDialog.isAccentPower .mpZoomClose,.mpZoomDialog.isAccentPower .mpZoomClose:hover,.ecoPackDialog.isAccentPower .ecoPackDialogHeader button,.ecoPackDialog.isAccentPower .ecoPackDialogHeader button:hover{background:var(--grade-power);color:var(--grade-power-ink)}
.ecoPackDialog.isAccentHearing .ecoPackDialogHeader button,.ecoPackDialog.isAccentHearing .ecoPackDialogHeader button:hover{background:var(--grade-hearing);color:#fff}
.maxPlusTemplate .ecoPackDialogHeader button:hover,.maxPlusTemplate .mpZoomClose:hover{background:var(--grade-cyan)}
.ecoPackDialogImage,.mpZoomFull{display:block;width:auto;max-width:100%;height:auto;max-height:calc(90vh - 150px);margin:24px auto 0;object-fit:contain}
.ecoPackDialog.isDetailed,.mpZoomDialog.isDetailed{width:min(1080px,94vw)}
.ecoPackDialog.isDetailed>div,.mpZoomDialog.isDetailed>div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);column-gap:40px;align-items:start;overflow-x:hidden}
.ecoPackDialog.isDetailed .ecoPackDialogHeader,.mpZoomDialog.isDetailed .mpZoomHeader{grid-column:1/-1}
.ecoPackDialogHeading,.mpZoomHeading{min-width:0;flex:1}
.ecoPackDialogHeader .ecoPackDialogModel,.mpZoomModel{margin:4px 0 0;color:var(--ink);font-size:15px;font-weight:600;line-height:1.5}
.ecoPackDialog.isDetailed .ecoPackDialogImage,.mpZoomDialog.isDetailed .mpZoomFull{min-width:0;max-width:100%;margin:24px 0 0;justify-self:center;align-self:center;object-fit:contain;object-position:center}
.ecoPackDialog.isDetailed:not(.isGallery) .ecoPackDialogImage,.mpZoomDialog.isDetailed:not(.isGallery) .mpZoomFull{max-height:min(70vh,520px)}
.grade-max .ecoPackDialogHeading>p:first-child,.grade-max .mpZoomTitle{color:var(--grade-max)}
.maxPlusTemplate .ecoPackDialogHeading>p:first-child,.maxPlusTemplate .mpZoomTitle{color:var(--grade-cyan)}
.grade-power .ecoPackDialogHeading>p:first-child,.grade-power .mpZoomTitle{color:var(--grade-power-ink)}
.ecoPackDialog.isDetailed .ecoPackDialogStage{display:grid;place-items:center;overflow:hidden;width:100%;max-width:360px;height:360px;margin:24px auto 0;min-width:0;min-height:0;justify-self:center}
.ecoPackDialog.isDetailed .ecoPackDialogStage .ecoPackDialogImage{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;margin:0;object-fit:contain;object-position:center}
.ecoPackDialogDetails,.mpZoomDetails{min-width:0;margin-top:24px}
.ecoPackDialogFacts,.mpZoomFacts{margin:0;padding:0;border-top:1px solid var(--line)}
.ecoPackDialogFacts>div,.mpZoomFacts>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:10px 16px;margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.ecoPackDialogFacts dt,.mpZoomFacts dt{margin:0;color:var(--muted,#6e7277);font-size:12px;font-weight:700;line-height:1.6}
.ecoPackDialogFacts dd,.mpZoomFacts dd{margin:0;color:var(--ink);font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.ecoPackDialogNote,.mpZoomNote{margin:16px 0 0;color:var(--muted,#6e7277);font-size:12px;line-height:var(--mobile-note-line-height,1.8);white-space:pre-line}
.mpZoomDialog.isGallery,.ecoPackDialog.isGallery{width:min(1120px,94vw);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
.mpZoomDialog.isGallery>div,.ecoPackDialog.isGallery>div{overflow:auto;overflow-x:hidden;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
.mpZoomDialog.isGallery .mpZoomHeader,.ecoPackDialog.isGallery .ecoPackDialogHeader{position:sticky;top:0;z-index:5;background:#fff}
.mpZoomDialog.isGallery .mpZoomClose,.ecoPackDialog.isGallery .ecoPackDialogHeader button{position:relative;z-index:6}
.mpZoomDialog.isGallery .mpZoomStage{display:grid;place-items:center;overflow:hidden;width:100%;max-width:520px;height:360px;margin:24px auto 0;min-width:0;min-height:0;justify-self:center;touch-action:pan-x pan-y}
.mpZoomDialog.isGallery .mpZoomStage.isPending,
.ecoPackDialog.isGallery .ecoPackDialogStage.isPending,
.ecoPackDialog.isDetailed .ecoPackDialogStage.isPending{
background:var(--paper)
}
.mpZoomDialog.isGallery .mpZoomStage .mpZoomFull:not(.isReady),
.ecoPackDialog.isGallery .ecoPackDialogStage .ecoPackDialogImage:not(.isReady),
.ecoPackDialog.isDetailed .ecoPackDialogStage .ecoPackDialogImage:not(.isReady){
opacity:0
}
.ecoPackDialog.isGallery .ecoPackDialogStage{display:grid;place-items:center;overflow:hidden;width:100%;max-width:360px;height:360px;margin:24px auto 0;min-width:0;min-height:0;justify-self:center;touch-action:pan-x pan-y}
.mpZoomDialog.isGallery .mpZoomStage .mpZoomFull,.ecoPackDialog.isGallery .ecoPackDialogStage .ecoPackDialogImage{position:relative;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;margin:0;object-fit:contain;object-position:center}
.mpZoomDialog.isGallery .mpZoomPager,.mpZoomDialog.isGallery .mpZoomThumbs,.ecoPackDialog.isGallery .ecoPackDialogPager,.ecoPackDialog.isGallery .ecoPackDialogThumbs{grid-column:1/-1;min-width:0}
.mpZoomDialog.isGallery .mpZoomPager,.ecoPackDialog.isGallery .ecoPackDialogPager{display:flex;justify-content:center;gap:10px;margin:16px 0 0}
.mpZoomDialog.isGallery .mpZoomPrev,.mpZoomDialog.isGallery .mpZoomNext,.ecoPackDialog.isGallery .ecoPackDialogPrev,.ecoPackDialog.isGallery .ecoPackDialogNext{display:grid;width:36px;height:36px;margin:0;place-items:center;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);cursor:pointer;font:inherit}
.mpZoomDialog.isGallery .mpZoomPrev:disabled,.mpZoomDialog.isGallery .mpZoomNext:disabled,.ecoPackDialog.isGallery .ecoPackDialogPrev:disabled,.ecoPackDialog.isGallery .ecoPackDialogNext:disabled{color:#b0b4b8;cursor:default}
.mpZoomDialog.isGallery .mpZoomPrev:focus-visible,.mpZoomDialog.isGallery .mpZoomNext:focus-visible,.mpZoomDialog.isGallery .mpZoomThumb:focus-visible,.ecoPackDialog.isGallery .ecoPackDialogPrev:focus-visible,.ecoPackDialog.isGallery .ecoPackDialogNext:focus-visible,.ecoPackDialog.isGallery .ecoPackDialogThumb:focus-visible{outline:2px solid var(--grade-cyan);outline-offset:2px}
.mpZoomDialog.isGallery .mpZoomThumbs,.ecoPackDialog.isGallery .ecoPackDialogThumbs{display:flex;gap:8px;margin:14px 0 0;padding:12px 0 0;overflow-x:auto;border-top:1px solid var(--line)}
.mpZoomDialog.isGallery .mpZoomThumb,.ecoPackDialog.isGallery .ecoPackDialogThumb{flex:0 0 48px;width:48px;height:48px;padding:4px;border:1px solid var(--line);border-radius:2px;background:#fff;cursor:pointer}
.mpZoomDialog.isGallery .mpZoomThumb img,.ecoPackDialog.isGallery .ecoPackDialogThumb img{display:block;width:100%;height:100%;object-fit:contain}
.mpZoomDialog.isGallery .mpZoomThumb.isCurrent{border-color:var(--grade-accent,var(--grade-cyan))}
.mpZoomDialog.isAccentMax.isGallery .mpZoomThumb.isCurrent{border-color:var(--grade-max)}
.mpZoomDialog.isAccentPower.isGallery .mpZoomThumb.isCurrent{border-color:var(--grade-power)}
.ecoPackDialog.isGallery .ecoPackDialogThumb.isCurrent{border-color:var(--grade-cyan)}
.ecoPackDialog.isAccentHearing.isGallery .ecoPackDialogThumb.isCurrent{border-color:var(--grade-hearing)}
.ecoPackDialog.isAccentHearing.isGallery .ecoPackDialogPrev:focus-visible,.ecoPackDialog.isAccentHearing.isGallery .ecoPackDialogNext:focus-visible,.ecoPackDialog.isAccentHearing.isGallery .ecoPackDialogThumb:focus-visible{outline-color:var(--grade-hearing)}
.mpZoomDialog.isAccentMax.isGallery .mpZoomPrev:focus-visible,.mpZoomDialog.isAccentMax.isGallery .mpZoomNext:focus-visible,.mpZoomDialog.isAccentMax.isGallery .mpZoomThumb:focus-visible{outline-color:var(--grade-max)}
.mpZoomDialog.isAccentPower.isGallery .mpZoomPrev:focus-visible,.mpZoomDialog.isAccentPower.isGallery .mpZoomNext:focus-visible,.mpZoomDialog.isAccentPower.isGallery .mpZoomThumb:focus-visible{outline-color:var(--grade-power)}
@media(max-width:820px){.ecoPackGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ecoPackDialog.isDetailed>div,.mpZoomDialog.isDetailed>div{grid-template-columns:minmax(0,1fr);column-gap:0}.ecoPackDialog.isDetailed .ecoPackDialogStage{height:200px;margin-top:16px}.ecoPackDialog.isDetailed .ecoPackDialogStage .ecoPackDialogImage{max-height:200px}.mpZoomDialog.isGallery .mpZoomStage{max-width:100%;height:200px;margin-top:16px}.mpZoomDialog.isGallery .mpZoomStage .mpZoomFull{max-height:200px}.ecoPackDialog.isGallery .ecoPackDialogStage{height:200px;max-width:100%;margin-top:16px}.ecoPackDialog.isGallery .ecoPackDialogStage .ecoPackDialogImage{max-height:200px}.ecoPackDialog.isDetailed:not(.isGallery) .ecoPackDialogImage,.mpZoomDialog.isDetailed:not(.isGallery) .mpZoomFull{max-height:min(42vh,280px);margin-top:16px}}
@media(max-width:540px){.ecoPackGrid figure{min-height:240px;padding:16px 12px}.ecoPackGrid button{min-height:190px;padding-top:12px}.ecoPackGrid button>img{height:150px}.ecoPackZoomCaption,.mpZoomCaption{gap:10px;font-size:12px}.ecoPackDialog>div,.mpZoomDialog>div{padding:22px 20px 26px}.ecoPackDialogHeader p,.mpZoomTitle{font-size:17px}.ecoPackDialogHeader .ecoPackDialogModel,.mpZoomModel{font-size:14px}.ecoPackDialogHeader button,.mpZoomClose{width:44px;height:44px;flex-basis:44px}.ecoPackDialogHeader button span,.mpZoomClose span{font-size:28px}.ecoPackDialogImage,.mpZoomFull{max-height:calc(90vh - 120px);margin-top:18px}.ecoPackDialog.isDetailed .ecoPackDialogImage,.mpZoomDialog.isDetailed .mpZoomFull,.ecoPackDialogDetails,.mpZoomDetails{margin-top:18px}.ecoPackDialog.isDetailed .ecoPackDialogStage{height:160px;margin-top:14px}.ecoPackDialog.isDetailed .ecoPackDialogStage .ecoPackDialogImage{max-height:160px}.ecoPackDialogFacts>div,.mpZoomFacts>div{grid-template-columns:6.5em minmax(0,1fr);gap:8px 12px;padding:9px 0}.ecoPackDialogFacts dd,.mpZoomFacts dd{font-size:14px}.mpZoomDialog.isGallery .mpZoomStage{height:160px;margin-top:14px}.mpZoomDialog.isGallery .mpZoomStage .mpZoomFull{max-height:160px}.ecoPackDialog.isGallery .ecoPackDialogStage{height:160px;max-width:100%;margin-top:14px}.ecoPackDialog.isGallery .ecoPackDialogStage .ecoPackDialogImage{max-height:160px}.mpZoomDialog.isGallery .mpZoomThumb,.ecoPackDialog.isGallery .ecoPackDialogThumb{flex-basis:44px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.ecoPackGrid button>img{transition:none}}
.alkalineTemplate *{box-sizing:border-box}
.alkalineTemplate a{color:inherit;text-decoration:none}
.alkalineBrand{width:180px;height:94px;display:flex;align-items:center;justify-content:center;background:#fff}
.alkalineBrand img{width:84px;height:auto}
.alkalineMenu{display:none}
.alkalineCategoryNav{height:48px;padding:0 max(30px,calc((100% - 1260px)/2));display:flex;align-items:center;gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;font-size:11px;white-space:nowrap}
.alkalineCategoryNav span{font-weight:700}
.alkalineCategoryNav a{color:#7b7f84}
.alkalineCategoryNav a.isCurrent{position:relative;color:#fff;font-weight:700;background:var(--red);border-radius:999px;padding:7px 12px;line-height:1}
.alkalineCategoryNav a.isCurrent:hover,.alkalineCategoryNav a.isCurrent:focus-visible{color:#fff}
.alkalineCategoryNav .isCurrent:after{content:none}
.alkalineHero{position:relative;background:#f0f1f1}
.alkalineEyebrow{margin:0 0 12px;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.04em}
.alkalineHero h1{margin:0 0 21px;font-size:32px;line-height:1.5;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:600;letter-spacing:0}
.alkalineLead{margin:0;color:#000;font-size:14px;line-height:var(--mobile-body-line-height,1.85)}
.alkalinePrimaryLink{position:relative;isolation:isolate;overflow:hidden;width:240px;height:54px;margin-top:24px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--red);background:var(--red);color:#fff;font-size:13px;font-weight:700}
.alkalinePrimaryLink:before{content:"";position:absolute;z-index:-1;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .48s cubic-bezier(.22,.72,.18,1)}
.alkalinePrimaryLink:hover:before,.alkalinePrimaryLink:focus-visible:before{transform:scaleX(1)}
.alkalineGradeCard:hover .alkalineGradeCopy>a:before{transform:scaleX(1)}
.alkalineTemplate .alkalinePrimaryLink{color:#fff}
.alkalinePrimaryLink:hover,.alkalinePrimaryLink:focus-visible,.alkalineTemplate .alkalinePrimaryLink:hover,.alkalineTemplate .alkalinePrimaryLink:focus-visible{color:var(--red)}
.alkalineArrow{width:46px;height:13px}
.alkalineArrow:before{top:7px}
.alkalineArrow:after{top:7px;width:10px;transform:rotate(35deg)}
.alkalineHeroImage{height:340px;display:flex;align-items:center;justify-content:center;gap:24px}
.alkalineHeroImage img{width:auto;max-width:100%;height:auto;max-height:260px;object-fit:contain}
.alkalineAnchorNav{position:sticky;top:var(--header-offset);z-index:90;width:calc(100% - 60px);max-width:1180px;margin:-18px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--line)}
.alkalineAnchorNav a{--tone:var(--red);position:relative;isolation:isolate;width:100%;min-width:0;margin:0;justify-self:stretch;min-height:74px;height:auto;padding:10px 20px;display:grid;grid-template-columns:52px minmax(0,1fr) 46px;align-items:center;gap:12px;border-right:1px solid var(--line);font-size:15px;font-weight:700;background:#fff;transition:color .2s ease .08s}
.alkalineAnchorNav a:last-child{border-right:0}
.alkalineAnchorNav a.cyan{--tone:var(--grade-cyan)}
.alkalineAnchorNav a.red{--tone:var(--grade-red)}
.alkalineAnchorNav a.yellow{--tone:var(--grade-yellow)}
.alkalineAnchorNav a.chargeRapid{--tone:var(--grade-hearing)}
.alkalineAnchorNav a.chargeStandard{--tone:var(--ink)}
.alkalineAnchorNav a:before{content:"";display:block;position:absolute;z-index:0;inset:0;background:var(--tone);transform:scaleX(0);transform-origin:left center;transition:transform .46s cubic-bezier(.22,.72,.18,1)}
.alkalineAnchorNav a>img{position:relative;z-index:1;width:auto;height:42px;justify-self:center;object-fit:contain;transition:transform .32s cubic-bezier(.22,.72,.18,1)}
.alkalineAnchorNav a>span,.alkalineAnchorNav a>.alkalineArrow{position:relative;z-index:1}
.alkalineAnchorCopy{display:flex;min-width:0;flex-direction:column;gap:4px;line-height:1.2}
.alkalineAnchorCopy strong,.alkalineAnchorCopy small{overflow-wrap:anywhere}
.alkalineAnchorCopy strong{font-size:15px;text-wrap:balance}
.alkalineAnchorCopy small{color:#777c82;font-size:11px;font-weight:500;text-wrap:pretty;transition:color .2s ease .08s}
.alkalineAnchorNav a:hover .alkalineAnchorCopy small,.alkalineAnchorNav a:focus-visible .alkalineAnchorCopy small,.alkalineAnchorNav a:active .alkalineAnchorCopy small{color:rgb(255 255 255/.82)}
.alkalineAnchorNav a:hover>img,.alkalineAnchorNav a:focus-visible>img,.alkalineAnchorNav a:active>img{transform:translateY(-2px)}
.alkalineAnchorNav a:hover,.alkalineAnchorNav a:focus-visible,.alkalineAnchorNav a:active{color:#fff}
.alkalineAnchorNav a.yellow:hover,.alkalineAnchorNav a.yellow:focus-visible,.alkalineAnchorNav a.yellow:active{color:var(--ink)}
.alkalineAnchorNav a.yellow:hover .alkalineAnchorCopy small,.alkalineAnchorNav a.yellow:focus-visible .alkalineAnchorCopy small,.alkalineAnchorNav a.yellow:active .alkalineAnchorCopy small{color:var(--ink)}
.alkalineAnchorNav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.alkalineAnchorNav a:hover:before,.alkalineAnchorNav a:focus-visible:before,.alkalineAnchorNav a:active:before{transform:scaleX(1)}
.alkalineIntro h2,.alkalineSectionHead h2,.alkalineSpecTitle h2,.alkalineSupport h2,.alkalineBtoB h2{margin:0;font-size:38px;line-height:1.45;font-weight:600;letter-spacing:.01em}
.alkalineIntro>p{margin:30px 0 0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,2)}
.alkalineSectionHead{max-width:1160px;margin:0 auto 42px}
.alkalineSectionHead>p:last-child{color:var(--muted);font-size:13px;line-height:var(--mobile-body-line-height,1.8)}
.alkalineComparisonList{max-width:1160px;margin:auto;display:grid;gap:18px}
.alkalineComparisonList img{width:100%;height:auto;border:1px solid var(--line)}
.alkalineGradeGrid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.alkalineGradeCard:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grade-cyan)}
.alkalineGradeCard.red:before{background:var(--grade-max)}
.alkalineGradeCard.yellow:before{background:var(--grade-power)}
.alkalineGradeCopy{padding:27px 30px 0;border-top:1px solid #eceef0}
.alkalineGradeCopy>p{margin:0 0 6px;color:#74787d;font-size:11px}
.alkalineGradeCopy>span{display:block;min-height:62px;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.8)}
.alkalineGradeCopy>a:before{content:"";position:absolute;z-index:-1;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.22,.72,.18,1);background:var(--red)}
.alkalineGradeCard:hover .alkalineGradeCopy>a{color:#fff}
.alkalineSizes{padding:100px 30px 115px;background:#fff}
.alkalineTabs{max-width:1160px;margin:0 auto 28px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.alkalineTabs button{height:62px;border:0;border-right:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.alkalineTabs button:last-child{border-right:0}
.alkalineTabs button[aria-selected="true"]{background:var(--red);color:#fff}
.alkalinePackageRail{max-width:1160px;margin:auto;padding:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:var(--paper)}
.alkalinePackageRail figure{min-height:190px;margin:0;padding:22px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.alkalinePackageRail img{width:100%;height:126px;object-fit:contain}
.alkalinePackageRail figcaption{padding-top:12px;border-top:1px solid var(--line);color:#767a7f;font-size:10px}
.alkalinePackageRail .is9v img{height:120px}
.alkalinePackageRail b{color:var(--red)}
.alkalineSpecPreview{max-width:1220px;margin:auto;padding:110px 30px;display:grid;grid-template-columns:270px 1fr;gap:60px}
.alkalineSpecTitle h2{font-size:31px}
.alkalineSpecTitle>p:last-child{color:var(--muted);font-size:12px;line-height:1.85}
.alkalineSpecMeta{margin-bottom:12px;display:flex;justify-content:space-between;color:#666;font-size:11px}
.alkalineSpecMeta a{color:var(--red);font-weight:700}
.alkalineSpecScroll{overflow-x:auto;border-top:2px solid var(--ink)}
.alkalineSpecScroll table{width:1500px;border-collapse:collapse;font-size:11px}
.alkalineSpecScroll th,.alkalineSpecScroll td{height:44px;padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.alkalineSpecScroll th{height:48px;background:#f5f5f5;color:#333;font-size:11px}
.alkalineSpecScroll tbody tr:nth-child(odd){background:#fafafa}
.alkalineSpecScroll th:nth-child(2),.alkalineSpecScroll td:nth-child(2){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.alkalineSpecScroll em{padding:3px 7px;border-radius:2px;background:#f3e7e9;color:#a7132e;font-size:9px;font-style:normal;font-weight:700}
.alkalineSupportLinks{border-top:1px solid var(--line)}
.alkalineSupportLinks a{height:72px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;transition:color .2s,padding .2s}
.alkalineSupportLinks a:hover{padding-left:18px;color:var(--red)}
.alkalineBtoB{padding:72px 30px 80px;background:#2f3136;color:#fff}
.alkalineBtoBInner{max-width:1160px;margin:auto}
.alkalineBtoB .alkalineEyebrow{color:#ff4a68}
.alkalineBtoB h2{font-size:30px}
.alkalineBtoBGrid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.alkalineBtoBGrid>a{position:relative;min-height:190px;padding:24px;background:#3b3d42;transition:background .25s,transform .25s}
.alkalineBtoBGrid>a:hover{background:var(--red);transform:translateY(-3px)}
.alkalineBtoBGrid small{color:#aeb1b6;font-size:10px}
.alkalineBtoBGrid h3{margin:18px 0 10px;font-size:16px}
.alkalineBtoBGrid p{margin:0;color:#c6c8cb;font-size:11px;line-height:1.7}
.alkalineBtoBGrid>a>span{position:absolute;left:24px;right:24px;bottom:20px;display:flex;align-items:center;justify-content:space-between;color:#ff5570;font-size:11px;font-weight:700}
.alkalineBtoBGrid>a:hover>span{color:#fff}
.alkalineBtoBGrid .alkalineArrow{width:28px}
@media(max-width:820px){.alkalineBrand{width:106px;height:70px}
.alkalineBrand img{width:58px}
.alkalineMenu{display:block;position:relative;z-index:10;justify-self:end;width:44px;height:44px;border:0;background:transparent}
.alkalineMenu i{position:absolute;left:8px;width:23px;height:1px;background:var(--ink)}
.alkalineMenu i:first-child{top:14px}
.alkalineMenu i:last-child{top:23px}
.alkalineCategoryNav{height:42px;padding:0 18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;gap:22px}
.alkalineCategoryNav::-webkit-scrollbar{display:none}
.alkalineCategoryNav a{flex:none}
.alkalineCategoryNav span{display:none}
.alkalineCategoryNav a.isCurrent{padding:6px 11px}
.alkalineHero h1{font-size:28px}
.alkalineLead{font-size:13px}
.alkalineHeroImage{height:208px;margin-top:4px;gap:13px}
.alkalineHeroImage img{width:auto;max-width:100%;height:188px;object-fit:contain}
.alkalineAnchorNav{width:100%;margin:0;grid-template-columns:1fr;box-shadow:none}
.alkalineAnchorNav a{min-height:62px;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 22px;grid-template-columns:52px minmax(0,1fr) 42px}
.alkalineAnchorNav a>img{height:36px}
.alkalineAnchorCopy small{font-size:10px}
.alkalineIntro h2,.alkalineSectionHead h2,.alkalineSupport h2{font-size:28px}
.alkalineIntro>p{margin-top:30px}
.alkalineComparison,.alkalineLineup,.alkalineSizes{padding:72px var(--mobile-content-gutter,20px) 80px}
.alkalineComparisonList{gap:10px}
.alkalineGradeGrid{grid-template-columns:1fr}
.alkalineGradeCopy{display:flex;flex-direction:column;justify-content:center;padding:26px 22px 54px;border-left:1px solid #eceef0;border-top:0}
.alkalineGradeCopy>span{min-height:0}
.alkalineTabs{overflow-x:auto;grid-template-columns:repeat(3,180px)}
.alkalinePackageRail{padding:14px;grid-template-columns:1fr}
.alkalineSpecPreview{padding:80px var(--mobile-content-gutter,20px);display:block}
.alkalineSpecArea{margin-top:34px}
.alkalineSpecMeta{display:block}
.alkalineSpecMeta a{display:block;margin-top:8px}
.alkalineSupport{padding:76px 22px;display:block}
.alkalineSupportLinks{margin-top:38px}
.alkalineBtoB{padding:68px var(--mobile-content-gutter,20px)}
.alkalineBtoBGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.alkalineHero h1{font-size:28px}
.alkalineHeroImage{height:192px}
.alkalineHeroImage img{width:auto;max-width:100%;height:174px;object-fit:contain}
.alkalineGradeCopy{min-height:220px;border-left:0;border-top:1px solid #eceef0}
.alkalineBtoBGrid{grid-template-columns:1fr}
.alkalinePackageRail figure{min-height:170px}
.alkalineComparisonList img{min-height:180px;object-fit:cover;object-position:center}
}
@media(prefers-reduced-motion:reduce){.alkalineTemplate *{scroll-behavior:auto!important;transition:none!important}
}
/* TOP-compatible neutral header and equalized transparent hero products. */
.tableScrollFrame{position:relative;max-width:1160px;margin:auto}
.alkalineCompareScroll{overflow-x:auto}
.alkalineCompareScroll table{width:100%;min-width:760px;border-collapse:collapse;border-top:3px solid var(--ink);font-size:14px}
.alkalineCompareScroll th,.alkalineCompareScroll td{height:72px;padding:15px 22px;border-bottom:1px solid var(--line);text-align:left}
.alkalineCompareScroll thead th{background:var(--paper);font-weight:700}
.alkalineCompareScroll tbody th{width:22%;color:#666;font-weight:600}
.alkalineCompareScroll em{padding:5px 9px;background:#f3e7e9;color:#a7132e;font-size:12px;font-style:normal;font-weight:700}
.alkalineSpecial{max-width:1160px;margin:auto;padding:105px 0;display:grid;grid-template-columns:1fr 1.45fr;gap:80px;align-items:start}
.alkalineSpecial h2{margin:0;font-size:38px;line-height:1.45;font-weight:600}
.alkalineSpecial>div>p:last-child{color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,2)}
.alkalineSpecialGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.alkalineSpecialGrid a{position:relative;min-height:180px;padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s,color .25s}
.alkalineSpecialGrid img{display:block;width:auto;max-width:72%;height:64px;object-fit:contain;margin:0 0 16px}
.alkalineSpecialGrid a:hover:not([aria-disabled="true"]){background:var(--red);color:#fff}
.alkalineSpecialGrid strong{display:block;font-size:18px}
.alkalineSpecialGrid a:hover span{color:#fff}
.alkalineSpecialGrid .alkalineArrow{position:absolute;right:28px;bottom:26px;width:38px;color:var(--red)}
.alkalineSpecialGrid a:hover .alkalineArrow{color:#fff}
@media(max-width:820px){.alkalineSpecial h2{font-size:28px}
.alkalineSpecialGrid{margin-top:34px}
.alkalineCompareScroll table{font-size:13px}
}
@media(max-width:480px){.alkalineSpecialGrid{grid-template-columns:1fr}
.alkalineSpecialGrid a{min-height:150px}
}
.alkalineTemplate{--header-offset:124px;color:var(--ink);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow:visible;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
font-weight:400;
text-rendering:optimizeLegibility
}
.alkalineHeader{background:var(--paper)}
.alkalineSiteHeader{
color:var(--ink)
}
.alkalineSiteHeader .alkalineBrand{
height:76px;
background:transparent
}
.alkalineSiteHeader .alkalineBrand img{width:97px}
.alkalineSiteHeader .headerContact{
padding:10px 18px;
border:1px solid #b9bdc2
}
.alkalineSiteHeader .menuButton i{background:var(--ink)}
.alkalineIntro,
.alkalineSectionHead,
.alkalineGradeGrid,
.alkalineSpecial{
width:calc(100% - 60px);
max-width:1180px
}
.alkalineCategoryNav{
width:100%;
max-width:none;
margin:0;
padding:0 max(30px,calc((100% - 1180px)/2))
}
.alkalineBreadcrumb{max-width:1260px;height:46px;margin:auto;display:flex;align-items:center;gap:9px;color:#85898e;font-size:10px;padding:0}
.alkalineHeroInner{max-width:1260px;margin:auto;
min-height:380px;
padding:0;
grid-template-columns:48% 52%
}
.alkalineHeroCopy{padding:42px 0 56px}
.alkalineHeroImage picture{display:flex;align-items:center;justify-content:center;height:100%;min-width:0}
.fdkTop.alkalineTemplate h1{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.alkalineTemplate h2{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.alkalineTemplate p{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:var(--mobile-body-wrap,pretty)}
.alkalineIntro{max-width:1160px;margin:auto;display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch;padding:88px 0 40px}
.alkalineIntroPanel{display:grid;grid-template-columns:minmax(180px,32%) minmax(0,1fr);gap:28px;align-items:center;padding:28px 32px;border:1px solid var(--line);background:#fff;--tone:var(--grade-cyan)}
.alkalineIntroPanel.cyan{--tone:var(--grade-cyan);--eco-mark-columns:4;--eco-mark-width:100%;background:var(--grade-cyan);color:#fff;border-color:var(--grade-cyan)}
.alkalineIntroPanel.red{--tone:var(--grade-max);background:var(--grade-max);color:#fff;border-color:var(--grade-max)}
.alkalineIntroPanel.yellow{--tone:var(--grade-power);background:var(--grade-power);color:var(--ink);border-color:var(--grade-power)}
.alkalineIntroVisual{display:flex;align-items:center;justify-content:center;min-width:0}
.alkalineIntroVisual img{width:min(100%,320px);height:auto;max-height:72px;object-fit:contain}
.alkalineIntroCopy{min-width:0}
.alkalineIntroPanel .alkalineEyebrow{margin:0 0 8px}
.alkalineIntroPanel.cyan .alkalineEyebrow,.alkalineIntroPanel.red .alkalineEyebrow{color:#fff}
.alkalineIntroPanel.yellow .alkalineEyebrow{color:var(--ink)}
.alkalineIntroPanel h2,.alkalineIntroTitle{margin:0 0 12px;font-size:28px;line-height:1.35;font-weight:700}
.alkalineIntroCopy>p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.85)}
.alkalineIntroPanel.cyan .alkalineIntroCopy>p,.alkalineIntroPanel.red .alkalineIntroCopy>p{color:rgb(255 255 255/.92)}
.alkalineIntroPanel.yellow .alkalineIntroCopy>p{color:var(--ink)}
.alkalineIntroFeatures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:20px 0 0;padding:0;list-style:none}
.alkalineIntroFeatures li{position:relative;min-height:42px;padding:var(--feature-pill-padding,9px 16px 9px 20px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--feature-pill-gap,8px);border:2px solid currentColor;border-radius:999px;color:inherit;font-size:var(--feature-pill-font,14px);font-weight:700;line-height:1.35;background:transparent}
.alkalineIntroFeatures li sup{margin-left:auto;padding-left:var(--feature-pill-note-padding,8px);font-size:10px;font-weight:500}
.alkalineIntroNote{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:var(--mobile-note-line-height,1.7)}
.alkalineIntroPanel.cyan .alkalineIntroNote,.alkalineIntroPanel.red .alkalineIntroNote{color:rgb(255 255 255/.86)}
.alkalineIntroPanel.yellow .alkalineIntroNote{color:var(--ink)}
.alkalineIntroFooter{margin-top:18px;padding-top:14px;border-top:1px solid currentColor}
.alkalineEcoMarks{display:grid;grid-template-columns:repeat(var(--eco-mark-columns,2),minmax(0,1fr));gap:14px 16px;align-items:center;justify-items:start;width:min(100%,var(--eco-mark-width,420px));max-width:100%}
.alkalineEcoMarks img{display:block;width:auto;max-width:100%;height:auto;max-height:80px;object-fit:contain;object-position:left center}
.alkalineIntroNotes{margin-top:8px}
.alkalineIntroNotes .alkalineIntroNote{margin-top:3px}
.alkalineGradeSummary{width:100%;max-width:none;margin:0;padding:0;background:var(--grade-cyan)}
.alkalineGradeSummary.is-red{background:var(--grade-max)}
.alkalineGradeSummary.is-yellow{background:var(--grade-power)}
.alkalineGradeSummary .alkalineIntroPanel{width:calc(100% - 60px);max-width:1180px;margin:0 auto;grid-template-columns:minmax(240px,38%) minmax(0,1fr);min-height:0;padding:52px 0;gap:40px;border:0}
.alkalineGradeSummary .alkalineIntroVisual img{width:min(100%,400px);max-height:128px}
.alkalineGradeSummary .alkalineIntroNote{font-size:10px;line-height:1.55}
.alkalineIntro h2,
.alkalineSectionHead h2,
.alkalineSupport h2,
.alkalineSpecial h2{
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
font-size:32px;
font-weight:600;
letter-spacing:0
}
.alkalineLineup{padding:88px 30px 100px}
.alkalineGradeCard{position:relative;background:#fff;border:1px solid var(--line);overflow:hidden;
--tone:var(--grade-cyan);
min-height:500px
}
.alkalineGradeCard.red{--tone:var(--grade-red)}
.alkalineGradeCard.yellow{--tone:var(--grade-yellow)}
.alkalineGradeCard.yellow .alkalineGradeBadge,
.alkalineGradeCard.yellow .alkalineFormerName,
.alkalineGradeCard.yellow .alkalineGradeCopy>a{color:var(--ink)}
.alkalineGradeCard.yellow:hover .alkalineGradeCopy>a:not([aria-disabled="true"]),
.alkalineGradeCard.yellow:focus-within .alkalineGradeCopy>a:not([aria-disabled="true"]){color:var(--ink)}
.alkalineGradeCard::before{background:var(--tone)}
.alkalineGradeImage{display:flex;align-items:center;justify-content:center;position:relative;height:255px}
.alkalineGradeBadge{
position:absolute;
z-index:2;
top:24px;
left:24px;
display:inline-block;
padding:9px 15px;
border:0;
border-radius:999px;
background:var(--tone);
background-clip:border-box;
box-sizing:border-box;
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.02em;
line-height:1
}
.alkalineGradeImage img{object-fit:contain;
width:auto;
height:160px;
transition:transform .32s cubic-bezier(.22,.72,.18,1)
}
.alkalineGradeImage.isHorizontal img{
width:min(82%,300px);
height:auto;
max-height:112px;
filter:none
}
.alkalineGradeCard:hover .alkalineGradeImage img,
.alkalineGradeCard:focus-within .alkalineGradeImage img{transform:translateY(-4px)}
.alkalineGradeCopy>a{position:absolute;z-index:1;isolation:isolate;overflow:hidden;left:0;right:0;bottom:0;height:54px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;transition:color .2s ease .08s;color:var(--tone)}
.alkalineGradeCopy h3{margin:0 0 14px;font-weight:700;
font-size:18px;
line-height:1.55
}
.alkalineFormerName{
display:block;
margin-top:12px;
color:var(--tone);
font-size:9px;
font-weight:700;
text-align:right
}
.alkalineGradeCopy>a::before{background:var(--tone)}
.alkalineGradeCopy>a[aria-disabled="true"]{color:var(--muted);cursor:default}
.alkalineGradeCard:hover .alkalineGradeCopy>a:not([aria-disabled="true"]),
.alkalineGradeCard:focus-within .alkalineGradeCopy>a:not([aria-disabled="true"]){color:#fff}
.alkalineGradeCard:hover .alkalineGradeCopy>a:not([aria-disabled="true"])::before,
.alkalineGradeCard:focus-within .alkalineGradeCopy>a:not([aria-disabled="true"])::before{transform:scaleX(1)}
.alkalineComparison{padding:88px 30px 100px}
.alkalineComparisonInner{
width:100%;
max-width:min(var(--content-max,1180px),100%);
margin-left:auto;
margin-right:auto;
min-width:0
}
.fdkTop .alkalineComparisonInner .alkalineSectionHead,
.fdkTop .alkalineComparisonInner .tableScrollFrame,
.fdkTop .alkalineComparisonInner .cellTypeCompare,
.alkalineComparisonInner .alkalineSectionHead,
.alkalineComparisonInner .tableScrollFrame,
.alkalineComparisonInner .cellTypeCompare{
width:100%;
max-width:none;
margin-left:0;
margin-right:0
}
.alkalineComparisonInner .topicNote,
.cellStory .topicNote{
max-width:100%;
color:#000;
margin:6px 0 0;
line-height:1.65
}
.alkalineComparisonInner .topicNote + .topicNote,
.cellStory .topicNote + .topicNote{margin-top:4px}
.fdkTop .alkalineComparisonInner .alkalineSectionHead h2,
.fdkTop.alkalineTemplate #cell-types .alkalineSectionHead h2{
line-break:strict;
word-break:keep-all;
overflow-wrap:normal;
letter-spacing:0
}
.alkalineSupport{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;border-top:1px solid var(--line);
padding:88px max(30px,calc((100% - 1180px)/2));
}
.alkalineTemplate .companyBlock .phoneLink{color:#148b4c}
/* 本文セクション見出し共通ルール。eyebrowは .alkalineEyebrow。TOP .sectionHead とアルカリ一覧 .alkalineSectionHead は別用途。 */
.mpSectionHead,
.topicSectionHead{max-width:760px;margin-bottom:40px}
.mpSectionHead h2,
.topicSectionHead h2{margin:0;font-size:32px;font-weight:600;line-height:1.5}
.mpSectionHead>p:last-child:not(.alkalineEyebrow),
.topicSectionHead>p:last-child:not(.alkalineEyebrow){margin:18px 0 0;color:var(--muted);font-size:16px;line-height:var(--mobile-body-line-height,1.95)}
.alkalineSectionHead>p:last-child:not(.alkalineEyebrow){margin:14px 0 0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.8)}
/* 固定ヘッダー直下の追従アンカー共通ルール。列数・見た目・hoverはmodifier。stickyの有無は共通。 */
.mpAnchor,
.topicAnchor{
position:sticky;
top:var(--header-offset);
display:grid;
gap:0;
width:calc(100% - 2 * var(--content-gutter,30px));
max-width:min(var(--content-max,1180px),100%);
background:#fff;
border:1px solid var(--line)
}
/* カテゴリ一覧（アルカリ／充電器）。maxPlus/topic/productList/compactCategoryは各テンプレが固定ヘッダーとoverflowを持つ。 */
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate){
padding-top:var(--header-offset);
overflow:clip
}
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate) .alkalineHeader{
position:fixed;
z-index:100;
top:0;
left:0;
right:0
}
.mpAnchor a,
.topicAnchor a{
min-width:0;
min-height:74px;
border-right:1px solid var(--line);
font-size:15px;
font-weight:700
}
.mpAnchor a:last-child,
.topicAnchor a:last-child{border-right:0}
.mpAnchor a{position:relative;isolation:isolate;overflow:hidden}
.mpAnchor a::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--grade-accent,var(--grade-cyan));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.mpAnchor a:hover::before,.mpAnchor a:focus-visible::before{transform:scaleX(1)}
.mpAnchor a:hover,.mpAnchor a:hover small,.mpAnchor a:focus-visible,.mpAnchor a:focus-visible small{color:#fff}
.maxPlusTemplate{--grade-accent:var(--grade-cyan)}
.grade-max{--grade-accent:var(--grade-max)}
.grade-power{--grade-accent:var(--grade-power)}
.grade-hearing{--grade-accent:var(--grade-hearing)}
.maxPlusTemplate .alkalinePrimaryLink,
.grade-max .alkalinePrimaryLink,
.grade-power .alkalinePrimaryLink{
border-color:var(--grade-accent);
background:var(--grade-accent)
}
.maxPlusTemplate .alkalinePrimaryLink:hover,
.maxPlusTemplate .alkalinePrimaryLink:focus-visible,
.grade-max .alkalinePrimaryLink:hover,
.grade-max .alkalinePrimaryLink:focus-visible,
.grade-power .alkalinePrimaryLink:hover,
.grade-power .alkalinePrimaryLink:focus-visible{color:var(--grade-accent)}
.maxPlusTemplate .alkalineEyebrow{color:var(--grade-cyan)}
.grade-max .alkalineEyebrow{color:var(--grade-max)}
.grade-power .alkalineEyebrow{color:var(--grade-power-ink)}
.grade-power .alkalinePrimaryLink{color:var(--ink)}
.grade-power .alkalinePrimaryLink:hover,
.grade-power .alkalinePrimaryLink:focus-visible{color:var(--grade-power-ink)}
.grade-power .mpAnchor a:hover,.grade-power .mpAnchor a:hover small,.grade-power .mpAnchor a:focus-visible,.grade-power .mpAnchor a:focus-visible small{color:var(--ink)}
.maxPlusTemplate [id],
.topicTemplate [id],
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate) [id]{scroll-margin-top:var(--page-anchor-offset,200px)}
/* シアンpill番号バッジ共通ルール。利用: MAX PLUS連番、新環境パック3ポイント、新環境パック包装名、特集カード／手順、製品一覧サイズ見出し。非対象: .mpLineupBadge（14px継承の包装ラベル）、.topicChecklist span（28px丸）。 */
.mpTechIndex{
display:inline-block;
align-self:flex-start;
justify-self:start;
padding:5px 16px;
border-radius:999px;
background:var(--grade-cyan);
color:#fff;
font-size:13px;
font-weight:600;
line-height:1.5
}
@media(max-width:820px){
.alkalineTemplate{--header-offset:112px}
.alkalineSiteHeader{padding-right:14px}
.alkalineSiteHeader .alkalineBrand{width:106px;height:70px}
.alkalineSiteHeader .alkalineBrand img{width:58px}
.alkalineSiteHeader nav{top:0;color:#fff}
.alkalineSiteHeader nav.isOpen{transform:none}
.alkalineHeroInner,
.alkalineIntro,
.alkalineSectionHead,
.alkalineGradeGrid,
.alkalineCompareScroll,
.alkalineComparisonInner,
.tableScrollFrame,
.alkalineSpecial{width:100%}
.alkalineCategoryNav{width:100%;padding:0 20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x}
.alkalineBreadcrumb,
.topicBreadcrumb{display:none}
.alkalineHeroInner{display:block;grid-template-columns:1fr;
min-height:470px;
padding:38px 22px 28px
}
.alkalineHeroCopy{padding:0}
.alkalineHero .alkalinePrimaryLink,
.mpHero .alkalinePrimaryLink{
position:absolute;
right:20px;
bottom:16px;
z-index:2;
width:auto;
height:40px;
margin:0;
padding:0 14px 0 16px;
font-size:12px;
column-gap:12px
}
.alkalineHero .alkalinePrimaryLink .alkalineArrow,
.mpHero .alkalinePrimaryLink .alkalineArrow{width:28px}
.alkalineSupport{display:block;grid-template-columns:1fr;gap:0;padding:72px 22px}
.alkalineSupportLinks{margin-top:28px}
.alkalineSupportLinks a{height:64px}
.alkalineIntro h2,
.alkalineSectionHead h2,
.alkalineSupport h2,
.alkalineSpecial h2{font-size:28px}
.alkalineIntro{display:block;padding:78px 22px 40px}
.alkalineGradeSummary{padding:0}
.alkalineIntroPanel{grid-template-columns:1fr;gap:18px;padding:22px}
.alkalineGradeSummary .alkalineIntroPanel{width:100%;max-width:none;grid-template-columns:minmax(180px,38%) minmax(0,1fr);min-height:0;padding:32px 22px;gap:20px}
.alkalineGradeSummary .alkalineIntroVisual img{max-height:92px}
.alkalineIntroFeatures{grid-template-columns:1fr}
.alkalineEcoMarks{--eco-mark-columns:2;--eco-mark-width:420px;gap:12px 16px}
.alkalineEcoMarks img:where([src$="/fsc-190.png"],[src$="/siaa-190.png"]){grid-row:2;max-height:60px}
.alkalineLineup,.alkalineComparison{padding:72px var(--mobile-content-gutter,20px) 80px}
.alkalineSectionHead{width:100%}
.alkalineGradeCard{display:grid;min-height:390px;grid-template-columns:40% 60%}
.alkalineGradeImage{height:100%}
.alkalineGradeImage img{height:190px}
.alkalineGradeImage.isHorizontal img{width:min(82%,270px);height:auto;max-height:100px}
.alkalineGradeCopy h3{font-size:17px}
.alkalineSpecial{display:block;padding:76px 22px}
.mpAnchor,
.topicAnchor,
.alkalineAnchorNav{
top:var(--header-offset);
width:100%;
max-width:100%;
margin-top:0
}
.mpAnchor a,
.topicAnchor a{
min-height:58px;
font-size:12px
}
.mpSectionHead,
.topicSectionHead{max-width:100%}
.mpSectionHead h2,
.topicSectionHead h2{font-size:28px}
.maxPlusTemplate [id],
.topicTemplate [id]{scroll-margin-top:var(--page-anchor-offset,184px)}
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate) [id]{scroll-margin-top:var(--page-anchor-offset,300px)}
}
@media(max-width:480px){
.alkalineHeroInner{min-height:455px}
.alkalineGradeCard{display:block;min-height:430px}
.alkalineGradeImage{height:220px}
.alkalineGradeImage img{height:158px}
.alkalineGradeImage.isHorizontal img{width:min(82%,280px);height:auto;max-height:105px}
}
@media(max-width:540px){
/* この幅ではページ内メニューは追従しない。固定ヘッダーの実高さだけを着地余白に使う。 */
.maxPlusTemplate,
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate){--page-anchor-offset:var(--header-offset)}
.alkalineLead>br,.alkalineSupport h2>br{display:none}
.alkalineTemplate:not(.topicTemplate) .alkalineGradeCard{display:block;min-height:0}
.alkalineTemplate:not(.topicTemplate) .alkalineGradeImage{height:144px;padding-top:40px}
.alkalineTemplate:not(.topicTemplate) .alkalineGradeImage.isHorizontal img{width:min(82%,210px);height:auto;max-height:80px}
.alkalineTemplate:not(.topicTemplate) .alkalineGradeCopy{min-height:0;padding:20px 22px 70px}
.alkalineHeroInner,
.alkalineIntro,
.alkalineSupport,
.alkalineSpecial,
.alkalineGradeSummary .alkalineIntroPanel{padding-left:var(--mobile-content-gutter,20px);padding-right:var(--mobile-content-gutter,20px)}
.alkalineHeroInner:where(:has(>.alkalineHeroImage)){display:grid;grid-template-columns:minmax(0,1fr);min-height:0;row-gap:0}
.alkalineHeroCopy:where(.alkalineHeroInner:has(>.alkalineHeroImage)>*){display:contents}
:where(.alkalineHeroInner:has(>.alkalineHeroImage))>.alkalineHeroCopy>.alkalineEyebrow{grid-row:1}
:where(.alkalineHeroInner:has(>.alkalineHeroImage))>.alkalineHeroCopy>h1{grid-row:2}
:where(.alkalineHeroInner:has(>.alkalineHeroImage))>.alkalineHeroCopy>.alkalineLead{grid-row:3}
.alkalineHeroImage:where(.alkalineHeroInner>*){grid-row:4;height:auto;min-height:0;margin:24px 0}
.alkalineHero .alkalinePrimaryLink:where(.alkalineHeroInner:has(>.alkalineHeroImage) *){grid-row:5;position:static;justify-self:end;margin:0}
.mpSectionHead,
.topicSectionHead{margin-bottom:28px}
.mpTechIndex{font-size:12px;padding:5px 12px}
.alkalineTemplate:not(.maxPlusTemplate):not(.topicTemplate):not(.productListTemplate):not(.compactCategoryTemplate) .alkalineAnchorNav{
position:relative;
top:auto;
z-index:auto
}
.alkalineGradeSummary .alkalineIntroPanel{grid-template-columns:1fr;gap:16px}
.alkalineGradeSummary .alkalineIntroCopy{display:contents}
.alkalineGradeSummary .alkalineEyebrow{grid-row:1;margin:0}
.alkalineGradeSummary .alkalineIntroTitle{grid-row:2;margin:0}
.alkalineGradeSummary .alkalineIntroCopy>p:not(.alkalineEyebrow){grid-row:3;margin:0}
.alkalineGradeSummary .alkalineIntroVisual{grid-row:4;padding:18px 0}
.alkalineGradeSummary .alkalineIntroFeatures{grid-row:5;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;--feature-pill-font:12px;--feature-pill-padding:8px 6px;--feature-pill-gap:2px;--feature-pill-note-padding:0px}
.alkalineGradeSummary .alkalineIntroFooter{grid-row:6;margin:0}
.alkalineGradeSummary .alkalineIntroVisual img{width:var(--mobile-cell-image-width);max-height:var(--mobile-cell-image-height)}
}
@media(prefers-reduced-motion:reduce){
.mpAnchor a::before{transition:none}
}
/* Keep every anchor thumbnail inside its dedicated grid column. Horizontal cell
photographs must not expand over the adjacent title/copy column. */
.alkalineAnchorNav a>img{width:100%;max-width:52px}
/* Category-hub KV: use the supplied horizontal product photographs. */
.alkalineHeroImage.alkalineHeroImageSide{flex-direction:column;gap:8px;padding:18px 0}
.alkalineHeroImage.alkalineHeroImageSide img{width:min(75%,357px);height:auto;max-height:77px;object-fit:contain}
@media(max-width:820px){
.alkalineHeroImage.alkalineHeroImageSide{gap:6px;padding:8px 0}
.alkalineHeroImage.alkalineHeroImageSide img{width:min(86%,300px);height:auto;max-height:58px}
}
@media(max-width:480px){
.alkalineHeroImage.alkalineHeroImageSide{gap:4px;padding:6px 0}
.alkalineHeroImage.alkalineHeroImageSide img{width:var(--mobile-cell-image-width);height:auto;max-height:var(--mobile-cell-image-height)}
}
@media(max-width:390px){
.fdkTop.alkalineTemplate #cell-types .alkalineSectionHead h2{
font-size:22px;
letter-spacing:0;
line-break:strict;
word-break:keep-all;
overflow-wrap:normal
}
}
@media(max-width:320px){
.fdkTop.alkalineTemplate #cell-types .alkalineSectionHead h2{font-size:18px}
}
.alkalineSpecial{grid-template-columns:minmax(220px,.72fr) minmax(0,1.6fr);gap:54px}
.alkalineSpecialGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.alkalineSpecialGrid a{min-height:280px;padding:30px;display:grid;grid-template-columns:minmax(112px,42%) minmax(0,1fr);gap:24px;align-items:center}
.alkalineSpecialGrid .alkalineSpecialVisual{display:flex;align-items:center;justify-content:center;margin:0;color:inherit}
.alkalineSpecialGrid .alkalineSpecialVisual img{width:100%;max-width:170px;height:176px;margin:0;object-fit:contain}
.alkalineSpecialGrid .alkalineSpecialVisual img[alt="6LR61MX(S)"]{height:220px;transform:translateY(-10.65%)}
.alkalineSpecialGrid .alkalineSpecialCopy{display:block;min-width:0;margin:0;color:inherit}
.alkalineSpecialGrid .alkalineSpecialCopy strong{font-size:22px;line-height:1.45}
.alkalineSpecialGrid .alkalineSpecialCopy>span{display:block;margin-top:14px;color:#555b61;font-size:12px;line-height:1.75;text-wrap:pretty}
.alkalineSpecialGrid .alkalineSpecialCopy .alkalineArrow{right:30px;bottom:30px;margin:0;color:var(--red)}
.alkalineSpecialGrid a:hover .alkalineSpecialCopy>span,.alkalineSpecialGrid a:hover .alkalineSpecialCopy .alkalineArrow{color:#fff}
@media(max-width:820px){
.alkalineSpecial{grid-template-columns:1fr;gap:32px}
.alkalineSpecialGrid a{min-height:228px;padding:24px;grid-template-columns:minmax(100px,40%) minmax(0,1fr);gap:20px}
.alkalineSpecialGrid .alkalineSpecialVisual img{height:150px}
.alkalineSpecialGrid .alkalineSpecialVisual img[alt="6LR61MX(S)"]{height:180px}
.alkalineSpecialGrid .alkalineSpecialCopy .alkalineArrow{right:24px;bottom:24px}
}
@media(max-width:540px){
.alkalineSpecialGrid{grid-template-columns:1fr}
.alkalineSpecialGrid a{min-height:228px}
}
/* MAX PLUS: alkaline category typography and neutral surfaces. */
.maxPlusTemplate{background:#fff;padding-top:var(--header-offset);overflow:hidden}
.maxPlusTemplate .alkalineHeader{position:fixed;z-index:100;top:0;left:0;right:0}
.mpInner{width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto}
.mpHero{position:relative;z-index:0;isolation:isolate;background:#f0f1f1}
.mpHeroInner{min-height:0;grid-template-columns:1fr 1fr;gap:36px}
.mpHeroCopy{padding:28px 0 32px}
.mpProductName{margin:0 0 12px;font-size:32px;font-weight:700;line-height:1.2}
.mpHero h1{margin:0 0 18px;font-size:25px;line-height:1.6;font-weight:600}
.mpHeroCopy>p:last-of-type{max-width:min(520px,100%);font-size:15px;line-height:var(--mobile-body-line-height,1.9);color:#666b70;margin:0}
.mpHeroVisual{width:100%;height:340px;display:flex;justify-content:center;align-items:center;overflow:visible}
.mpHeroVisual picture{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-width:0;max-width:100%}
.mpHeroVisual img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;transform:none;clip-path:none;mask:none;-webkit-mask:none}
.maxPlusTemplate .mpHero .alkalinePrimaryLink{width:240px;height:54px}
.fdkTop.maxPlusTemplate h1,.fdkTop.maxPlusTemplate h2{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.maxPlusTemplate p{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:var(--mobile-body-wrap,pretty)}
.mpAnchor{z-index:90;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;margin:auto;margin-top:-18px}
.mpAnchor a{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere;text-wrap:wrap}
.mpAnchor a:last-child{border:0}
.mpAnchor small{margin-top:5px;color:#73777d;font-size:13px;font-weight:400}
.mpLineup .mpEco{padding-top:90px}
.mpSection{padding:90px 0}
.mpTechnologyRows{border-top:1px solid #dfe2e4}
.mpTechnologyRows article{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:52px 0;border-bottom:1px solid #dfe2e4}
.mpTechCopy h3{font-size:22px;line-height:1.6;margin:16px 0 20px}
.mpTechCopy p{font-size:16px;line-height:var(--mobile-body-line-height,2);color:#686d72;margin:0 0 20px}
.mpTechCopy small{font-size:12px;color:#73777d;line-height:1.8}
.mpTechnicalFigure{margin:0;padding:32px;background:transparent;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mpTechnicalFigure figcaption{margin-top:18px;color:#73777d;font-size:12px;line-height:1.8;text-align:center;text-wrap:pretty}
.mpAccelerator{display:flex;align-items:center;justify-content:center;gap:30px;width:100%}
.mpAccelerator img:first-child{width:160px;height:auto;max-width:44%}
.mpAccelerator img:last-child{width:180px;height:auto;max-width:48%}
.mpCapacity img{height:225px;width:auto;object-fit:contain}
.mpPassivation{display:flex;gap:24px;align-items:center;justify-content:center}
.mpPassivation>div{text-align:center}
.mpPassivation img{display:block;height:170px;width:auto;max-width:100%;object-fit:contain}
.mpPassivation span:not(.mpProcessArrow){display:block;margin-top:10px;font-size:13px;color:#666}
.mpProcessArrow{font-size:28px;color:var(--grade-cyan)}
.mpPerformanceGrid{max-width:680px;margin:auto}
.mpPerformanceGrid figure{margin:0;padding:24px;border:0}
.mpPerformanceGrid img{width:100%;height:auto;display:block}
.mpChartHeading{font-size:19px;font-weight:700;text-align:center;margin:0 0 18px}.mpChartTopAxis{font-size:14px;font-weight:600;text-align:center;margin:0 6% 8px 0}
.mpPerformanceGrid figcaption{font-size:12px;color:#73777d;margin-top:16px;line-height:1.8}
.mpEcoHead{max-width:850px}.mpEcoHead>small{display:block;margin-top:14px;color:#7a8085;font-size:12px;line-height:1.8}
.mpEcoPoints{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:-4px 0 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mpEcoPoints>div{padding:22px 26px;border-right:1px solid var(--line)}
.mpEcoPoints>div:last-child{border-right:0}.mpEcoPoints strong{display:block;font-size:15px;line-height:1.6}.mpEcoPoints small{display:block;margin-top:5px;color:#6e7479;font-size:12px;line-height:1.7}
.mpSpecScroll{overflow-x:auto;border-top:2px solid var(--ink);background:#fff}
.mpSpec table{width:1550px;border-collapse:collapse;font-size:13px}
.mpSpec th,.mpSpec td{height:55px;padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.mpSpec thead th{background:#ebedef}.mpSpec em,.mpLegacy em{font-style:normal;color:#8c6970;font-size:12px}.mpLegacy{font-size:13px;color:#73777d;margin-top:20px}
.maxPlusTemplate .companyBlock .phoneLink{color:#148b4c}
@media(min-width:821px){
.mpHeroInner{min-height:401px}
.mpHeroVisual{height:280px}
}
@media(prefers-reduced-motion:reduce){
.mpAnchor a::before{transition:none}
}
@media(max-width:820px){
.maxPlusTemplate{padding-top:var(--header-offset)}.mpInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px));max-width:100%}.mpHeroVisual{height:260px;overflow:visible}.mpHeroCopy{padding:35px 0 16px}.mpProductName{font-size:28px}.mpHero h1{font-size:22px}.maxPlusTemplate .mpHero .alkalinePrimaryLink{position:relative;right:auto;bottom:auto;z-index:auto;width:240px;height:54px;margin-top:0;padding:0 22px;font-size:13px}.maxPlusTemplate .mpHero .alkalinePrimaryLink .alkalineArrow{width:46px}.mpAnchor{grid-template-columns:repeat(3,minmax(0,1fr))}.mpAnchor a{padding:9px 6px;border-bottom:0;text-align:center}.mpAnchor a:nth-child(2){border-right:1px solid var(--line)}.mpAnchor small{display:none}.mpSection{padding:65px 0}.mpLineup .mpEco{padding-top:65px}.mpTechnologyRows article{gap:30px;padding:35px 0}.mpTechCopy h3{font-size:22px}.mpTechnicalFigure{padding:22px;min-height:260px}.mpPassivation{gap:12px}.mpPassivation img{height:120px}.mpPerformanceGrid{grid-template-columns:1fr}.mpEcoPoints{grid-template-columns:1fr}.mpEcoPoints>div{border-right:0;border-bottom:1px solid var(--line)}.mpEcoPoints>div:last-child{border-bottom:0}
}
@media(max-width:540px){
.mpSectionHead>p>br{display:none}
.mpHeroCopy{padding:32px 0 0}.mpHeroLead{display:none}.mpHeroVisual{position:relative;z-index:1;height:auto;max-height:260px;overflow:visible}.mpHeroVisual picture{height:auto;max-height:260px}.mpHeroVisual img{max-height:260px}.mpHeroLeadBreak{display:none}.maxPlusTemplate .mpHero .alkalinePrimaryLink{position:absolute;right:0;bottom:0;left:auto;z-index:2;width:50vw;height:40px;margin:0;padding:0 14px 0 16px;font-size:12px}.maxPlusTemplate .mpHero .alkalinePrimaryLink .alkalineArrow{width:28px}.maxPlusTemplate .mpAnchor{position:relative;top:auto;z-index:auto;margin-top:0;transform:none}.mpAnchor{grid-template-columns:repeat(3,minmax(0,1fr))}.mpAnchor a:nth-child(2n){border-right:1px solid var(--line)}.mpAnchor a:nth-child(-n+2){border-bottom:0}.mpAnchor a:last-child{border-right:0}.mpAnchor .mobileProductBreak{display:none}.mpTechnologyRows article{grid-template-columns:1fr;gap:24px}.mpTechCopy h3{font-size:22px}.mpPassivation img{height:155px}.mpPerformanceGrid figure{padding:12px}
}
.mpDiagramLegend{display:flex;gap:18px;margin-top:18px;font-size:13px;color:#555}.mpDiagramLegend span:last-child{color:#997619}
.mpCapacityFlow{list-style:none;margin:0;padding:0;width:100%;max-width:380px}
.mpCapacityFlow li{position:relative;padding:14px 20px;margin-bottom:22px;background:#f1f8fa;border-left:3px solid var(--grade-cyan)}
.mpCapacityFlow li:not(:last-child)::after{content:'↓';position:absolute;bottom:-23px;left:50%;font-size:18px;color:#16849f}
.mpCapacityFlow li:last-child{margin-bottom:0}.mpCapacityFlow small{display:block;font-size:12px;color:#16849f;margin-bottom:4px}.mpCapacityFlow strong{font-size:16px;font-weight:600}
/* Shared MAX PLUS packaging lineup. Grade pages only change --grade-accent. */
.mpLineup{padding:90px 0}
.mpPackageGrid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.mpPackageGrid figure{margin:0;padding:28px 0;background:transparent;border:0;border-bottom:1px solid var(--line)}
.mpPackageGrid figcaption{margin:0 0 24px;font-size:14px;font-weight:600}
/* シアンpill番号バッジ。font-sizeは figcaption 継承値(14px)を維持するため指定しない。 */
.mpLineupBadge{display:inline-block;padding:5px 16px;border:0;border-radius:999px;background:var(--grade-accent,var(--grade-cyan));background-clip:border-box;box-sizing:border-box;color:#fff;font-weight:600;line-height:1.6}
.grade-power .mpLineupBadge{color:var(--ink)}
.mpIndividualGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.mpIndividualGrid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.mpZoom{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;width:100%;padding:16px 8px;background:transparent;border:0;cursor:zoom-in;color:var(--ink)}
.mpPackageGrid .mpZoom img{display:block;width:auto;max-width:100%;height:150px;object-fit:contain;transition:transform .3s}
.mpLineupCopyBreak{display:block}
.mpPackageText{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:16px 8px;color:var(--ink);font-size:13px;font-weight:600;text-align:center;text-decoration:none}
.mpPackageText small{display:block;font-size:12px;font-weight:600}
.mpZoom .mpMagnifier{border-color:var(--ink)}
.mpZoom .mpMagnifier::after{background:var(--ink)}
/* アルカリ3グレード変種：虫眼鏡をブローシャ採色へ（非アルカリ=ニッケル等は --ink 維持）。 */
.maxPlusTemplate .mpZoom .mpMagnifier,.grade-max .mpZoom .mpMagnifier,.grade-power .mpZoom .mpMagnifier{border-color:var(--grade-accent)}
.maxPlusTemplate .mpZoom .mpMagnifier::after,.grade-max .mpZoom .mpMagnifier::after,.grade-power .mpZoom .mpMagnifier::after{background:var(--grade-accent)}
#cells-standard .mpPackageGrid,#cells-high .mpPackageGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:0}
#cells-standard .mpPackageGrid figure,#cells-high .mpPackageGrid figure{padding:24px 0 24px;border-top:1px solid var(--line)}
#cells-standard .mpIndividualGrid,#cells-high .mpIndividualGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#cells-standard .mpPackageGrid .mpZoom img,#cells-high .mpPackageGrid .mpZoom img{height:225px}
@media(hover:hover){.mpZoom:hover img{transform:scale(1.08)}}
.mpZoom:focus-visible,.mpPackageText:focus-visible{outline:2px solid var(--grade-accent,var(--grade-cyan));outline-offset:4px}
@media(max-width:820px){.mpLineup{padding:65px 0}.mpIndividualGrid,.mpIndividualGrid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}#cells-standard .mpPackageGrid,#cells-high .mpPackageGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#cells-standard .mpIndividualGrid,#cells-high .mpIndividualGrid{gap:12px}#cells-standard .mpPackageGrid .mpZoom img,#cells-high .mpPackageGrid .mpZoom img{height:180px}#cells-standard .mpPackageGrid figure,#cells-high .mpPackageGrid figure{padding:20px 0 24px}}
@media(max-width:540px){.mpPackageGrid{grid-template-columns:1fr}.mpPackageGrid figure{padding:20px 0}.mpPackageGrid figcaption{font-size:12px}.mpPackageGrid .mpZoom img,.mpPackageText{min-height:120px}.mpPackageGrid .mpZoom img{height:120px}.mpIndividualGrid{gap:16px}.mpZoom{padding:12px 2px}.mpLineupCopyBreak{display:none}#cells-standard .mpPackageGrid,#cells-high .mpPackageGrid{grid-template-columns:1fr;gap:0}#cells-standard .mpPackageGrid figure,#cells-high .mpPackageGrid figure{padding:20px 0}#cells-standard .mpIndividualGrid,#cells-high .mpIndividualGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#cells-standard .mpPackageGrid .mpZoom img,#cells-high .mpPackageGrid .mpZoom img{height:225px;max-width:100%}}
@media(prefers-reduced-motion:reduce){.mpZoom img{transition:none}}
/* Alkaline grade FAB + shared KV frame. Colors use existing --grade-* tokens only. */
.fdkTop.maxPlusTemplate,
.fdkTop.compactCategoryTemplate.grade-max,
.fdkTop.compactCategoryTemplate.grade-power{
overflow:visible;
}
.alkalineGradeHero{
position:relative;
overflow:visible;
}
.alkalineGradeFab{
display:block;
position:fixed;
top:calc(var(--header-offset, 124px) + 80px);
right:24px;
z-index:40;
width:56px;
height:auto;
margin:0;
overflow:visible;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-8px);
transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
}
.alkalineGradeFab.isVisible{
opacity:1;
visibility:visible;
transform:translateY(0);
transition-delay:0s;
}
.alkalineGradeFabStack{
display:flex;
flex-direction:column;
gap:10px;
width:56px;
pointer-events:none;
}
.alkalineGradeFab.isVisible .alkalineGradeFabStack{
pointer-events:auto;
}
.alkalineGradeFabItem{
display:flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
margin:0;
padding:7px;
box-sizing:border-box;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
background-clip:border-box;
box-shadow:none;
overflow:hidden;
}
.alkalineGradeFabItem.is-maxplus{
background:var(--grade-cyan);
border-color:var(--grade-cyan);
}
.alkalineGradeFabItem.is-max{
background:var(--grade-max);
border-color:var(--grade-max);
}
.alkalineGradeFabItem.is-power{
background:var(--grade-power);
border-color:var(--grade-power);
box-shadow:none;
}
.alkalineGradeFabMedia{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
min-width:0;
min-height:0;
overflow:hidden;
box-sizing:border-box;
}
.alkalineGradeFabMedia img{
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
min-width:0;
min-height:0;
object-fit:contain;
object-position:center;
position:static;
}
.alkalineGradeFabItem:focus{outline:none}
.alkalineGradeFabItem:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fdkTop:has(dialog[open]) .alkalineGradeFab{display:none}
.fdkTop.maxPlusTemplate .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor{
z-index:90;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:stretch;
margin:auto;
margin-top:-18px;
}
.fdkTop.maxPlusTemplate .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a{
white-space:nowrap;
}
.alkalineGradeHero .alkalineHeroCopy{
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:20px 42px 80px 96px 54px;
grid-template-areas:
"eyebrow"
"title"
"catch"
"lead"
"cta";
row-gap:10px;
align-content:start;
align-items:start;
padding:28px 0 32px;
box-sizing:border-box;
}
.alkalineGradeHero .alkalineEyebrow{
grid-area:eyebrow;
margin:0;
align-self:start;
line-height:1.2;
}
.alkalineGradeHero .alkalineHeroTitle{
grid-area:title;
margin:0;
font-size:32px;
font-weight:700;
line-height:1.2;
letter-spacing:0;
align-self:start;
overflow:hidden;
white-space:nowrap;
}
.alkalineGradeHero .alkalineHeroCatch{
grid-area:catch;
margin:0;
font-size:25px;
font-weight:600;
line-height:1.45;
letter-spacing:.04em;
align-self:start;
overflow:hidden;
}
.alkalineGradeHero .alkalineLead{
grid-area:lead;
margin:0;
max-width:min(520px,100%);
color:#666b70;
font-size:15px;
line-height:1.9;
align-self:start;
overflow:hidden;
}
.alkalineGradeHero .alkalinePrimaryLink{
grid-area:cta;
margin:0;
align-self:start;
}
.alkalineGradeHero .mpHeroVisual,
.alkalineGradeHero .alkalineHeroImage{
width:100%;
display:flex;
justify-content:center;
align-items:center;
overflow:visible;
}
.alkalineGradeHero .mpHeroVisual picture,
.alkalineGradeHero .alkalineHeroImage picture{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
min-width:0;
max-width:100%;
}
.alkalineGradeHero .mpHeroVisual img,
.alkalineGradeHero .alkalineHeroImage img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;
object-position:center;
}
@media(min-width:541px){
.alkalineGradeHero .alkalinePrimaryLink{
width:240px;
height:54px;
}
}
@media(min-width:821px){
.alkalineGradeHero,
.alkalineGradeHero .mpHeroInner,
.alkalineGradeHero .alkalineHeroInner{
height:401px;
min-height:401px;
}
.alkalineGradeHero .alkalineHeroInner,
.alkalineGradeHero .mpHeroInner{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:36px;
padding:0 30px;
max-width:min(var(--content-max,1180px),100%);
width:100%;
box-sizing:border-box;
}
.alkalineGradeHero .mpHeroVisual,
.alkalineGradeHero .alkalineHeroImage{
height:250px;
}
.alkalineGradeHero .alkalineHeroImage img{
max-height:250px;
}
}
@media(max-width:820px){
.alkalineGradeFab{
top:calc(var(--header-offset, 112px) + 80px);
right:12px;
width:50px;
}
.alkalineGradeFabStack{
width:50px;
gap:8px;
}
.alkalineGradeFabItem{
width:50px;
height:50px;
}
}
@media(max-width:820px) and (min-width:541px){
.alkalineGradeHero,
.alkalineGradeHero .mpHeroInner,
.alkalineGradeHero .alkalineHeroInner{
height:620px;
min-height:620px;
}
.alkalineGradeHero .alkalineHeroInner,
.alkalineGradeHero .mpHeroInner{
display:grid;
grid-template-columns:1fr;
align-content:start;
gap:0;
padding:22px;
box-sizing:border-box;
}
.alkalineGradeHero .alkalineHeroCopy{
padding:0 62px 0 0;
row-gap:6px;
}
.fdkTop.maxPlusTemplate .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor{
grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:-18px;
}
.fdkTop.maxPlusTemplate .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a{
padding:9px 6px;
border-bottom:0;
text-align:center;
}
.fdkTop.maxPlusTemplate .mpAnchor a:nth-child(2),
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a:nth-child(2),
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a:nth-child(2){
border-right:1px solid var(--line);
}
.fdkTop.maxPlusTemplate .mpAnchor small,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor small,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor small{
display:none;
}
.alkalineHero.alkalineGradeHero .alkalinePrimaryLink,
.mpHero.alkalineGradeHero .alkalinePrimaryLink,
.maxPlusTemplate .alkalineGradeHero .alkalinePrimaryLink{
position:relative;
right:auto;
bottom:auto;
left:auto;
z-index:auto;
width:240px;
height:54px;
margin:0;
padding:0 22px;
font-size:13px;
}
.alkalineGradeHero .mpHeroVisual,
.alkalineGradeHero .alkalineHeroImage{
height:230px;
}
.alkalineGradeHero .alkalineHeroImage img{
max-height:230px;
}
}
@media(max-width:540px){
.alkalineGradeHero .mpHeroInner,
.alkalineGradeHero .alkalineHeroInner{
display:grid;
grid-template-columns:1fr;
align-content:start;
gap:20px;
position:relative;
height:auto;
min-height:0;
padding:32px 0 52px;
box-sizing:border-box;
}
.alkalineGradeHero .mpHeroVisual,
.alkalineGradeHero .alkalineHeroImage{
align-self:start;
position:relative;
z-index:1;
height:auto;
max-height:210px;
margin-bottom:48px;
}
.alkalineGradeHero .mpHeroVisual img,
.alkalineGradeHero .alkalineHeroImage img{
max-height:210px;
}
.alkalineGradeHero .alkalineHeroCopy{
display:flex;
flex-direction:column;
grid-template-rows:none;
grid-template-areas:none;
row-gap:0;
padding:0 62px 0 0;
}
.alkalineGradeHero .alkalineEyebrow,
.alkalineGradeHero .alkalineHeroTitle,
.alkalineGradeHero .alkalineHeroCatch{
overflow:visible;
}
.alkalineGradeHero .alkalineHeroTitle{
margin:0 0 12px;
font-size:28px;
}
.alkalineGradeHero .alkalineHeroCatch{
margin:0 0 16px;
font-size:22px;
}
.alkalineGradeHero .alkalineLead,
.alkalineGradeHero .mpHeroLead{
display:none;
margin:0;
height:0;
padding:0;
overflow:hidden;
}
.alkalineHero.alkalineGradeHero .alkalinePrimaryLink,
.mpHero.alkalineGradeHero .alkalinePrimaryLink,
.maxPlusTemplate .alkalineGradeHero .alkalinePrimaryLink{
position:absolute;
right:0;
bottom:0;
left:auto;
z-index:2;
width:50vw;
height:40px;
margin:0;
padding:0 14px 0 16px;
font-size:12px;
}
.alkalineHero.alkalineGradeHero .alkalinePrimaryLink .alkalineArrow,
.mpHero.alkalineGradeHero .alkalinePrimaryLink .alkalineArrow,
.maxPlusTemplate .alkalineGradeHero .alkalinePrimaryLink .alkalineArrow{
width:28px;
}
.fdkTop.maxPlusTemplate .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor{
position:relative;
top:auto;
z-index:auto;
margin-top:0;
transform:none;
grid-template-columns:repeat(3,minmax(0,1fr));
}
.fdkTop.maxPlusTemplate .mpAnchor a:nth-child(2n),
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a:nth-child(2n),
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a:nth-child(2n){
border-right:1px solid var(--line);
}
.fdkTop.maxPlusTemplate .mpAnchor a:nth-child(-n+2),
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a:nth-child(-n+2),
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a:nth-child(-n+2){
border-bottom:0;
}
.fdkTop.maxPlusTemplate .mpAnchor a:last-child,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a:last-child,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a:last-child{
border-right:0;
}
.fdkTop.maxPlusTemplate .mpAnchor .mobileProductBreak,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor .mobileProductBreak,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor .mobileProductBreak{
display:none;
}
.fdkTop.maxPlusTemplate .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-max .mpAnchor a,
.fdkTop.compactCategoryTemplate.grade-power .mpAnchor a{
white-space:normal;
}
}
@media(prefers-reduced-motion:reduce){
.alkalineGradeFab,
.alkalineGradeFabItem{transition:none}
}
/* 特集ページ共通（サステナビリティ／防災）。色・余白・組版はアルカリ／MAX PLUSテンプレのトークンと同じ値へ揃える。 */
.topicTemplate{--topic-accent:var(--grade-cyan);background:#fff;padding-top:var(--header-offset);overflow:clip}
.topicHeader{position:fixed;z-index:100;top:0;left:0;right:0}
.topicCategoryNav{justify-content:flex-start}.topicCategoryNav a{min-width:0}
.topicInner{width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto}
.topicBreadcrumb{display:flex;align-items:center;gap:9px;width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto;padding:18px 0;color:#85898e;font-size:10px}.topicBreadcrumb a{color:#5e666d}
.topicHero{background:#f0f1f1}.topicHeroInner{min-height:370px;grid-template-columns:48% minmax(0,1fr);gap:36px;width:100%}.topicHeroCopy{padding:34px 0 42px}.topicHeroLead{max-width:min(650px,100%);margin:21px 0 0;color:#000;font-size:14px;line-height:var(--mobile-body-line-height,1.85)}.topicHeroVisual{position:relative;width:100%;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}.topicHeroVisual img{position:relative;width:100%;max-width:100%;height:auto;max-height:248px;object-fit:contain}
.topicHeroVisual.topicFan img{max-height:280px}
.fdkTop.topicTemplate h1{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.topicTemplate p{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:var(--mobile-body-wrap,pretty)}
.fdkTop.topicTemplate h2{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.topicAnchor{z-index:85;grid-template-columns:repeat(3,minmax(0,1fr));margin:-24px auto 0}.topicAnchor a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px}.topicAnchor a span{min-width:0;overflow-wrap:anywhere;text-wrap:balance}.topicAnchor .fdkArrow{width:44px}.topicAnchor a:hover,.topicAnchor a:focus-visible{color:var(--red)}
.topicSection{padding:90px 0}.topicHero h1{margin:0;font-size:32px;font-weight:600;line-height:1.5}
.topicCards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.topicCard{display:flex;flex-direction:column;margin:0;padding:30px;border-right:1px solid var(--line)}.topicCard:first-child{padding-left:0}.topicCard:last-child{padding-right:0;border-right:0}
.topicCard h3{margin:14px 0 12px;font-size:20px;line-height:1.6;overflow-wrap:anywhere}.topicCard p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9);overflow-wrap:anywhere}.topicCard small{display:block;margin-top:14px;color:#73777d;font-size:12px;line-height:1.8}
.topicSteps{border-top:1px solid var(--line)}.topicStep{display:grid;grid-template-columns:max-content 1fr 1fr;gap:36px;align-items:center;padding:38px 0;border-bottom:1px solid var(--line)}.topicStep h3{margin:0;font-size:22px;line-height:1.6}.topicStep p{margin:0;color:var(--muted);font-size:15px;line-height:var(--mobile-body-line-height,1.9)}
.topicChecklist{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.topicChecklist article{position:relative;min-height:170px;padding:28px 30px 28px 72px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.topicChecklist span{position:absolute;top:31px;left:28px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--topic-accent);color:#fff;font-size:12px;font-weight:700}.topicChecklist h3{margin:0 0 10px;font-size:19px;line-height:1.6}.topicChecklist p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9)}
a.topicCta{display:inline-flex;align-items:center;gap:22px;text-wrap:var(--mobile-body-wrap,balance);margin-top:32px;color:var(--red);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:5px}.topicCta .fdkArrow{width:58px}
.topicNote,.topicSource{margin:18px 0 0;color:#73777d;font-size:12px;line-height:var(--mobile-note-line-height,1.8)}.topicSource a{text-decoration:underline;text-underline-offset:3px}
.isGray .topicNote,.isGray .topicSource,.isGray .bousaiTenkiCopy p,.isGray .bousaiStockCount p{color:#000}
/* 防災ページ限定（原サイト防災の黄/青緑トーンを、既存topic系classだけで再構成）。 */
.topicTemplate:has(#rolling-stock){--page-anchor-offset:var(--header-offset);--bousai-frame-width:calc(100% - 2 * var(--mobile-content-gutter,20px));background:#ebf5ec}
.topicTemplate:has(#rolling-stock) .topicHero{background:#fff000}
.topicTemplate:has(#rolling-stock) .topicHeroInner{max-width:1000px;min-height:0;grid-template-columns:minmax(0,1fr) 270px;gap:20px;padding:56px 80px}
.topicTemplate:has(#rolling-stock) .topicAnchor,.topicTemplate:has(#rolling-stock) .topicSection>.topicInner{width:var(--bousai-frame-width);max-width:1000px;margin-left:auto;margin-right:auto}
.topicTemplate:has(#rolling-stock) .topicHeroCopy{width:100%;max-width:740px;margin:0;padding:0}
.topicTemplate:has(#rolling-stock) .topicHero h1{font-size:38.4px}.topicTemplate:has(#rolling-stock) .topicHeroCopy>h1>span:first-of-type{color:#00a499}.topicTemplate:has(#rolling-stock) .topicHeroCopy>h1>span~span{white-space:nowrap}
.topicTemplate:has(#rolling-stock) .topicHeroCopy>img{display:block;width:100%;max-width:522px;height:auto;margin-top:32px}
.topicTemplate:has(#rolling-stock) .topicHeroLead{max-width:740px;font-size:15px;line-height:1.85}
.topicTemplate:has(#rolling-stock) .topicHeroVisual{align-items:flex-start;justify-content:flex-end;overflow:visible}
.topicTemplate:has(#rolling-stock) .topicHeroVisual img{width:130%;max-width:351px;max-height:none}
.topicTemplate:has(#rolling-stock) .topicAnchor{position:relative;top:auto;grid-template-columns:repeat(5,minmax(0,1fr));margin:-20px auto 0;border:1px solid #c4ddd4;background:#e0efea;padding:8px;gap:6px;box-shadow:0 4px 14px rgb(0 82 69 / 6%)}
.topicTemplate:has(#rolling-stock) .topicAnchor a{justify-content:center;text-align:center;min-height:60px;padding:14px 8px;font-size:12px;gap:0;border:0;border-radius:4px;background:#f7fbf9;color:#24564d;font-weight:700;transition:background .2s,color .2s}
.topicTemplate:has(#rolling-stock) .topicAnchor a span{white-space:normal;overflow-wrap:normal}
.topicTemplate:has(#rolling-stock) .topicAnchor .fdkArrow{display:none}
.topicTemplate:has(#rolling-stock) .topicAnchor a:not(:last-child){border-right:0}
.topicTemplate:has(#rolling-stock) .topicAnchor a:hover,.topicTemplate:has(#rolling-stock) .topicAnchor a:focus-visible{background:#007b70;color:#fff}
.topicTemplate:has(#rolling-stock) .topicAnchor a:focus-visible{outline:2px solid #174c44;outline-offset:2px}
.topicTemplate:has(#rolling-stock) .topicSection{padding:0}
.topicTemplate:has(#rolling-stock) .topicSection>.topicInner{padding:0 130px 60px;border-left:4px solid #00a0e8;border-right:4px solid #00a0e8;border-bottom:4px solid #00a0e8;background:#fffde4}
.topicTemplate:has(#rolling-stock) .topicSection.isGray>.topicInner{background:#fffde4}
.topicTemplate:has(#rolling-stock) .topicSectionHead{max-width:none;margin:0 -130px 24px;padding:20px 20px 16px;border-bottom:0;background:transparent}
.topicTemplate:has(#rolling-stock) #rolling-stock .topicSectionHead,.topicTemplate:has(#rolling-stock) #products .topicSectionHead,.topicTemplate:has(#rolling-stock) #lights-intro .topicSectionHead{margin:0 -130px 20px;padding:20px;border-bottom:4px solid #00a0e8;background:#00a499}
.topicTemplate:has(#rolling-stock) #rolling-stock .topicSectionHead .alkalineEyebrow,.topicTemplate:has(#rolling-stock) #products .topicSectionHead .alkalineEyebrow,.topicTemplate:has(#rolling-stock) #lights-intro .topicSectionHead .alkalineEyebrow{color:#fff}
.topicTemplate:has(#rolling-stock) #rolling-stock .topicSectionHead h2,.topicTemplate:has(#rolling-stock) #products .topicSectionHead h2,.topicTemplate:has(#rolling-stock) #lights-intro .topicSectionHead h2{color:#fff000;line-height:1.3}
.topicTemplate:has(#rolling-stock) #rolling-stock .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #products .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #lights-intro .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #toku .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #check .topicInner>p:first-of-type{margin:0 0 24px;color:var(--ink);font-size:14px;line-height:var(--mobile-body-line-height,1.85)}
.topicTemplate:has(#rolling-stock) #toku .topicInner>h2,.topicTemplate:has(#rolling-stock) #check .topicInner>h2{margin:0;color:var(--ink);font-size:32px;line-height:1.35}
.topicTemplate:has(#rolling-stock) #check .topicInner>h2{padding-bottom:10px;border-bottom:3px solid #c8161d}
.topicTemplate:has(#rolling-stock) .topicSteps{margin-top:0}
.topicTemplate:has(#rolling-stock) .bousaiStockFigure{position:relative;max-width:100%;margin:40px 0 0;text-align:center}
.bousaiRollingStage{position:relative;width:100%;aspect-ratio:771/455}
.bousaiRollingStage .bousaiRollingArrow{position:absolute;top:2.2%;left:27.3%;width:45.4%;height:auto;z-index:0;animation:bousaiRollingSpin 18s linear infinite;transform-origin:center}
.bousaiRollingMain{display:block;position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.bousaiRollingHints img{position:absolute;bottom:0;height:auto;object-fit:contain}
.bousaiRollingHints .bousaiRollingStorage{left:-13%;width:34.6%;aspect-ratio:267/242}
.bousaiRollingHints .bousaiRollingSizes{right:-6.5%;width:27.1%;aspect-ratio:209/125}
.topicTemplate:has(#rolling-stock) .bousaiStockFigure>.bousaiRollingMobile{width:100%;min-width:0;max-width:480px;margin:0 auto;height:auto;object-fit:contain}
.topicTemplate:has(#rolling-stock) .bousaiRollingMobile{display:none}
@keyframes bousaiRollingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bousaiRollingStage .bousaiRollingArrow{animation:none}}
.bousaiGoods{margin:30px 0 0}
.bousaiGoods img{display:block;width:100%;max-width:589px;height:auto;object-fit:contain}
.bousaiGoods figcaption{margin:10px 0 0;color:#000;font-size:12px;line-height:1.8}
.topicTemplate:has(#rolling-stock) .bousaiGoods{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:34px}
.topicTemplate:has(#rolling-stock) .bousaiGoods img{max-width:589px}
.topicTemplate:has(#rolling-stock) .bousaiGoods img:where([src*="bousai-2.png"],[src*="bousai-3.png"]){max-width:320px}
.topicTemplate:has(#rolling-stock) .bousaiGoods figcaption{width:100%}
.topicTemplate:has(#rolling-stock) #rolling-stock .bousaiGoods{margin-top:72px;gap:32px}
.topicTemplate:has(#rolling-stock) #rolling-stock .bousaiGoods figcaption{margin:0;color:#00a499;font-size:22px;text-align:center;line-height:1.6}
.topicTemplate:has(#rolling-stock) #products .topicSectionHead{margin-bottom:28px}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeGrid{grid-template-columns:1fr}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeCard{display:grid;grid-template-columns:minmax(220px,34%) minmax(0,1fr);gap:24px;align-items:stretch;min-height:0}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeImage{box-sizing:border-box;height:auto;padding:72px 0 78px;align-items:flex-end}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeImage.isHorizontal img{max-height:100%;object-fit:contain}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeCopy{align-self:end;justify-content:flex-end;min-height:0;padding:24px 24px 78px;border-top:0;border-left:0}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeCopy>span{min-height:0}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeCopy>a{justify-content:center;gap:0;text-align:center}
.topicTemplate:has(#rolling-stock) #products .alkalineGradeCopy>a .fdkArrow{display:none}
.topicTemplate:has(#rolling-stock) #products .alkalineFormerName{margin-top:14px;padding-right:0}
.topicTemplate:has(#rolling-stock) .bousaiTenki{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:36px;align-items:center;margin-top:0;padding:22px;background:#fff000}
.topicTemplate:has(#rolling-stock) .bousaiTenkiLogo{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.topicTemplate:has(#rolling-stock) .bousaiTenkiLogo img{width:auto;max-width:320px;height:auto}
.topicTemplate:has(#rolling-stock) a.topicCta{justify-content:center;gap:0;padding:12px 20px;border:1px solid #84b7ac;border-radius:4px;background:#fff;color:#21665b;text-decoration:none;text-align:center;line-height:1.6;max-width:100%}
.topicTemplate:has(#rolling-stock) a.topicCta:hover,.topicTemplate:has(#rolling-stock) a.topicCta:focus-visible{background:#e0efea;text-decoration:underline}
.topicTemplate:has(#rolling-stock) .bousaiTenkiLogo .topicCta{margin-top:12px}
.topicTemplate:has(#rolling-stock) .bousaiTenkiCopy h3{margin:0 0 12px;font-size:20px;line-height:1.6}
.topicTemplate:has(#rolling-stock) .bousaiTenkiCopy p{margin:0;color:var(--ink);font-size:14px;line-height:var(--mobile-body-line-height,1.85)}
.topicTemplate:has(#rolling-stock) #toku .topicInner,.topicTemplate:has(#rolling-stock) #check .topicInner{padding-top:24px}
.topicTemplate:has(#rolling-stock) #check .topicInner{background:#fff}
.bousaiCheckCards .topicCard{align-content:start}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard:nth-child(1){background:#fffbd9}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard:nth-child(2){background:#fff4df}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard:nth-child(3){background:#e7f2dd}
.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard:nth-child(4){background:#e2f2fa}
.bousaiCheckFigure{margin:12px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bousaiCheckFigure img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain}
.bousaiCheckFigure figcaption{color:#000;font-size:11px;line-height:1.7}
.topicTemplate:has(#rolling-stock) #lights-intro>.topicInner{border-bottom:0;padding-bottom:0}
.topicTemplate:has(#rolling-stock) #lights-intro .topicInner>p:first-of-type{margin-bottom:0}
.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection{width:var(--bousai-frame-width);max-width:1000px;box-sizing:border-box;margin:0 auto;padding-top:24px;padding-bottom:24px;border-left:4px solid #00a0e8;border-right:4px solid #00a0e8;background:#fffde4}
.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection .productCategoryInner{max-width:1000px}
.topicTemplate:has(#rolling-stock) #lights .productCategoryCard,.topicTemplate:has(#rolling-stock) #lights .productCategoryImage,.topicTemplate:has(#rolling-stock) #lights .productCategoryImage button,.topicTemplate:has(#rolling-stock) #lights .productCategoryCopy{background:#fff}
.topicTemplate:has(#rolling-stock) #lights .productCategoryHead{margin:0 0 20px;padding:0;background:transparent;border:0}
.topicTemplate:has(#rolling-stock) #lights .productCategoryHead .alkalineEyebrow{display:none}
.topicTemplate:has(#rolling-stock) #lights .productCategoryHead h2{margin:0;color:#263b35;font-size:22px;line-height:1.5}
.topicTemplate:has(#rolling-stock) #lights .productCategoryHead>p{display:none}
.topicTemplate:has(#rolling-stock) #lights .productCategoryGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.topicTemplate:has(#rolling-stock) #lights .productCategoryCard{display:flex;flex-direction:column;min-height:0;border:1px solid #dce5e0;border-radius:8px;background:#fff}
.topicTemplate:has(#rolling-stock) #lights .productCategoryCard::before{display:none}
.topicTemplate:has(#rolling-stock) #lights .productCategoryImage{height:210px;min-height:0;padding:24px 16px 12px}
.topicTemplate:has(#rolling-stock) #lights .productCategoryImage img{max-height:170px;max-width:90%;object-fit:contain}
.topicTemplate:has(#rolling-stock) #lights .productCategoryCopy{flex:1;padding:16px 20px 20px;border-top:0}
.topicTemplate:has(#rolling-stock) #lights .productCategoryCopy h3{font-size:17px;line-height:1.55;margin:0 0 8px;white-space:normal;overflow-wrap:anywhere;letter-spacing:normal}
.topicTemplate:has(#rolling-stock) #lights .productCategoryModel{margin:0;color:#626c68;font-size:12px}
.bousaiLightAction{margin-top:auto;padding:0 20px 20px}
.bousaiLightDetails{display:block;width:100%;min-height:44px;padding:12px 16px;border:1px solid #84b7ac;border-radius:4px;background:#f1f7f4;color:#21665b;font:inherit;font-size:13px;font-weight:700;line-height:1.5;text-align:center;cursor:pointer;transition:background .2s,color .2s}
.bousaiLightDetails:hover{background:#007b70;color:#fff}
.bousaiLightDetails:focus-visible{outline:2px solid #007b70;outline-offset:3px}
.topicTemplate:has(#rolling-stock) .bousaiLightsFooter .topicNote{margin:0;font-size:12px;line-height:1.8;color:#555}
.topicTemplate:has(#rolling-stock) .bousaiLightsFooter .topicCta{display:flex;width:240px;margin:24px auto 0}
.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner{display:flow-root;width:var(--bousai-frame-width);max-width:1000px;box-sizing:border-box;margin:0 auto;padding:0 130px 40px;border-left:4px solid #00a0e8;border-right:4px solid #00a0e8;border-bottom:4px solid #00a0e8;background:#fffde4}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods{flex-wrap:nowrap;align-items:flex-start;margin-top:12px}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods img{width:auto;max-width:100%;height:auto;object-fit:contain}
.topicTemplate .productCategorySection{padding-top:48px;padding-bottom:72px}
@media(max-width:820px){.topicTemplate{padding-top:var(--header-offset)}.topicBreadcrumb,.topicInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px));max-width:100%}.topicHeroInner{grid-template-columns:1fr 1fr;gap:28px;min-height:380px}.topicHeroLead{font-size:13px;max-width:100%}.topicHeroVisual img{max-height:220px}.topicHeroVisual.topicFan img{max-height:240px}.topicAnchor a{padding:12px 14px}.topicAnchor a span{white-space:normal}.topicAnchor .fdkArrow{display:none}.topicSection{padding:65px 0}.topicHero h1{font-size:28px}.topicCards{grid-template-columns:1fr}.topicCard{padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}.topicCard:last-child{padding-right:0;border-bottom:0}.topicStep{grid-template-columns:max-content 1fr;gap:20px}.topicStep p{grid-column:2}.topicChecklist{grid-template-columns:1fr}.bousaiTenki{grid-template-columns:1fr;gap:24px}.topicTemplate .productCategorySection{padding-top:36px;padding-bottom:56px}.topicTemplate:has(#rolling-stock) .topicHeroInner{grid-template-columns:1fr;min-height:0;padding:40px 24px}.topicTemplate:has(#rolling-stock) .topicHeroVisual{min-height:240px;justify-content:center}.topicTemplate:has(#rolling-stock) .topicHeroVisual img{max-width:220px}.topicTemplate:has(#rolling-stock) .topicAnchor{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto}.topicTemplate:has(#rolling-stock) .topicAnchor a{min-height:52px;font-size:11px;padding:12px 8px;gap:0}.topicTemplate:has(#rolling-stock) .topicAnchor a span{white-space:normal}.topicTemplate:has(#rolling-stock) .topicAnchor .fdkArrow{width:22px}.topicTemplate:has(#rolling-stock) .topicSection>.topicInner{padding:0 20px 40px}.topicTemplate:has(#rolling-stock) .topicSectionHead,.topicTemplate:has(#rolling-stock) #rolling-stock .topicSectionHead,.topicTemplate:has(#rolling-stock) #products .topicSectionHead,.topicTemplate:has(#rolling-stock) #lights-intro .topicSectionHead{margin:0 -20px 22px;padding:16px}.topicTemplate:has(#rolling-stock) #products .alkalineGradeCard{grid-template-columns:1fr;gap:0;min-height:0}.topicTemplate:has(#rolling-stock) #products .alkalineGradeImage{height:auto;padding:72px 0 24px}.topicTemplate:has(#rolling-stock) #products .alkalineGradeCopy{padding:0 20px 78px;min-height:0;border-top:0;border-left:0}.topicTemplate:has(#rolling-stock) #toku .topicInner,.topicTemplate:has(#rolling-stock) #check .topicInner{padding-top:20px}.topicTemplate:has(#rolling-stock) .bousaiTenki{grid-template-columns:1fr;gap:20px}.topicTemplate:has(#rolling-stock) .bousaiCheckCards{grid-template-columns:repeat(2,minmax(0,1fr))}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner{padding:0 20px 30px}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods img{width:calc((100% - 20px)/2);min-width:0}}
@media(max-width:540px){.topicHeroInner{grid-template-columns:1fr;gap:0}.topicHeroCopy{padding:42px 0 16px}.topicHeroVisual{min-height:220px}.topicHeroVisual img{max-height:190px}.topicAnchor a{justify-content:center;text-align:center;padding:10px 6px;font-size:11px}.topicStep{gap:14px}.topicStep h3{font-size:19px}.topicChecklist article{padding:24px 20px 24px 58px}.topicChecklist span{top:27px;left:18px}.bousaiGoods{margin-top:22px}.bousaiTenki{margin-top:28px;padding-top:22px;gap:20px}.topicTemplate:has(#rolling-stock) .topicHeroInner{grid-template-columns:1fr;gap:24px}.topicTemplate:has(#rolling-stock) .topicHero h1{font-size:24px}.topicTemplate:has(#rolling-stock) .topicHeroVisual img{position:static;width:180px;margin:10px auto 0}.topicTemplate:has(#rolling-stock) .bousaiCheckCards{grid-template-columns:1fr}.topicTemplate:has(#rolling-stock) .bousaiCheckCards .topicCard{padding:20px}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods{flex-wrap:nowrap;flex-direction:column;align-items:center}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods img{width:auto}}
@media(max-width:820px){.topicTemplate:has(#rolling-stock) .topicHeroInner{grid-template-columns:minmax(0,1fr) clamp(76px,22vw,120px);gap:16px;padding:40px 24px}.topicTemplate:has(#rolling-stock) .topicHeroCopy{display:contents}.topicTemplate:has(#rolling-stock) .topicHeroCopy>.alkalineEyebrow{order:1;grid-column:1/-1}.topicTemplate:has(#rolling-stock) .topicHeroCopy>h1{order:2;grid-column:1/-1;font-size:33.6px}.topicTemplate:has(#rolling-stock) .topicHeroCopy>img{order:3;grid-column:1;align-self:center;margin-top:0}.topicTemplate:has(#rolling-stock) .topicHeroVisual{order:4;grid-column:2;min-height:0;align-self:center;justify-content:center}.topicTemplate:has(#rolling-stock) .topicHeroLead{order:5;grid-column:1/-1}.topicTemplate:has(#rolling-stock) .topicHeroVisual img{position:relative;right:auto;top:auto;width:140%;max-width:168px;margin:0 auto}.topicTemplate:has(#rolling-stock) .topicHeroCopy>img{max-width:100%}.topicTemplate:has(#rolling-stock) #toku .topicInner>h2,.topicTemplate:has(#rolling-stock) #check .topicInner>h2{font-size:26px}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods img{width:calc((100% - 20px)/2);min-width:0}.topicTemplate:has(#rolling-stock) .bousaiRollingStage{display:none}.topicTemplate:has(#rolling-stock) .bousaiRollingMobile{display:block}.bousaiRollingHints{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}.bousaiRollingHints .bousaiRollingStorage,.bousaiRollingHints .bousaiRollingSizes{position:static;width:calc(50% - 12px);max-width:240px;aspect-ratio:auto}.topicTemplate:has(#rolling-stock) .topicAnchor a:last-child{grid-column:1/-1}.topicTemplate:has(#rolling-stock) #rolling-stock .bousaiGoods{margin-top:40px;gap:20px}.topicTemplate:has(#rolling-stock) #rolling-stock .bousaiGoods figcaption{font-size:18px}.topicTemplate:has(#rolling-stock) #lights .productCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:540px){.topicTemplate:has(#rolling-stock) .topicHeroInner{grid-template-columns:minmax(0,1fr) clamp(76px,22vw,120px);padding:32px 20px}.topicTemplate:has(#rolling-stock) .topicHeroCopy>h1{font-size:28.8px}.topicTemplate:has(#rolling-stock) .topicHeroVisual img{max-width:168px}.topicTemplate:has(#rolling-stock) #toku .topicInner>h2,.topicTemplate:has(#rolling-stock) #check .topicInner>h2{font-size:24px}.topicTemplate:has(#rolling-stock) #rolling-stock .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #products .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #lights-intro .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #toku .topicInner>p:first-of-type,.topicTemplate:has(#rolling-stock) #check .topicInner>p:first-of-type{font-size:13px;line-height:var(--mobile-body-line-height,1.8)}.topicTemplate:has(#rolling-stock) #lights-intro+.productCategorySection+.topicInner .bousaiGoods img{width:auto}.topicTemplate:has(#rolling-stock) #lights .productCategoryGrid{grid-template-columns:1fr}.topicTemplate:has(#rolling-stock) #lights .productCategoryImage{height:190px}.topicTemplate:has(#rolling-stock) .topicSectionHead h2{font-size:24px;line-height:1.5}}
.sustainabilityHero{position:relative;overflow:hidden;background:#edf9d9}
.sustainabilityHeroBackground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.sustainabilityHero .sustainabilityHeroInner{position:relative;display:flex;flex-direction:column;align-items:center;gap:36px;min-height:0;padding:48px 0}
.sustainabilityHeroCopy{position:relative;isolation:isolate;width:100%;max-width:min(1080px,100%);margin:0 auto;padding:0 28px;text-align:center;color:#1d441f}
.sustainabilityHeroCopy::before{position:absolute;z-index:-1;inset:-48px 0;content:"";background:radial-gradient(ellipse closest-side at center,rgba(255,255,255,.9) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,0) 100%);pointer-events:none}
.sustainabilityHero .sustainabilityHeroCopy h1{font-size:clamp(32px,3.6vw,68px);font-weight:700;line-height:1.35}
.sustainabilityHeroCopy p{margin:20px auto 0;max-width:min(920px,100%);font-size:clamp(15px,1.35vw,22px);font-weight:700;line-height:var(--mobile-body-line-height,1.85)}
.sustainabilityHeroProducts{display:flex;align-items:flex-end;justify-content:center;gap:clamp(24px,5vw,100px);width:100%;min-height:300px}
.sustainabilityHeroProducts img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain}
.sustainabilityHeroProducts img:first-child{max-height:330px}
.sustainabilityHeroProducts img:last-child{max-width:min(500px,48vw);max-height:260px}
.sustainabilityAnchor{margin-top:0}
.sustainabilitySdgs>p,.sustainabilityPackageCopy>p{max-width:760px;margin:0;color:var(--muted);font-size:16px;line-height:var(--mobile-body-line-height,1.95)}
.sustainabilityPackageCopy>p+p{margin-top:18px}
@media(max-width:820px){
.sustainabilityHero .sustainabilityHeroInner{gap:26px;padding:38px 0}
.sustainabilityHero .sustainabilityHeroCopy h1{font-size:clamp(28px,5vw,40px)}
.sustainabilityHeroCopy p{font-size:clamp(13px,2vw,17px)}
.sustainabilityHeroProducts{min-height:250px}
.sustainabilityHeroProducts img:first-child{max-height:260px}
.sustainabilityHeroProducts img:last-child{max-width:48vw;max-height:200px}
.sustainabilitySdgs>p,.sustainabilityPackageCopy>p{font-size:14px;max-width:100%}
}
@media(max-width:540px){
.sustainabilityHero .sustainabilityHeroInner{gap:22px;padding:34px 0 32px}
.sustainabilityHero .sustainabilityHeroCopy h1{font-size:26px}
.sustainabilityHeroCopy p{margin-top:16px;font-size:12px;line-height:var(--mobile-body-line-height,1.7)}
.sustainabilityHeroCopy p br{display:none}
.sustainabilityHeroCopy{padding:0 18px}
.sustainabilityHeroCopy::before{inset:-28px 0}
.sustainabilityHeroProducts{gap:12px;min-height:180px}
.sustainabilityHeroProducts img:first-child{max-width:40%;max-height:200px}
.sustainabilityHeroProducts img:last-child{max-width:56%;max-height:150px}
.sustainabilityPackageCopy>p+p{margin-top:14px}
}
/* サポート固有レイアウトのみ。shell・KV・セクション・見出し・追従アンカー・本文レール・注記・CTAは
特集・アルカリページの共通ルールを再利用する（.supportTemplate はページ識別用）。 */
/* 画像を持たないサポートKVの本文ブロック。特集KVは画像列が高さを作るが、サポートは本文だけなので
.topicAnchor の -24px 引き上げ分をこのブロックの下余白で確保する（.topicHeroCopy は上書きしない）。 */
.supportHeroCopy{min-width:0;max-width:100%;padding:34px 0 48px}
/* 基本の使い方: 番号pill付き2列の区切り線グリッド。塗り箱は作らない。 */
.supportRules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.supportRules article{min-height:168px;margin:0;padding:26px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.supportRules .mpTechIndex{margin-bottom:14px}
.supportRules h3{margin:0 0 10px;font-size:19px;line-height:1.6}
.supportRules p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9)}
/* 液漏れ時の注意: 赤の細い上罫だけで注意喚起する。 */
.supportAlert{display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px;align-items:start;padding:30px 0;border-top:1px solid var(--red);border-bottom:1px solid var(--line)}
.supportAlert h3{margin:0;font-size:20px;line-height:1.6}
.supportAlert p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9)}
/* FAQ: details/summary の開閉。独自アコーディオンJSは持たない。 */
.faqList{border-top:1px solid var(--line)}
.faqList details{border-bottom:1px solid var(--line)}
.faqList summary{position:relative;padding:24px 54px 24px 48px;display:block;cursor:pointer;font-size:16px;font-weight:700;line-height:1.7;list-style:none}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary:before{content:"Q";position:absolute;left:0;top:23px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--grade-cyan);color:#fff;font-size:13px;font-weight:700;line-height:1}
.faqList summary:after{content:"＋";position:absolute;right:8px;top:25px;color:var(--red);font-size:20px;font-weight:400;line-height:1}
.faqList details[open] summary:after{content:"−"}
.faqList summary:hover,.faqList summary:focus-visible{color:var(--red)}
.faqAnswer{position:relative;padding:0 54px 26px 48px}
.faqAnswer:before{content:"A";position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:700;line-height:1}
.faqAnswer p{margin:0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9)}
@media(max-width:820px){
.supportHeroCopy{padding:34px 0 44px}
.supportRules{grid-template-columns:1fr}
.supportRules article{min-height:0;padding:24px 22px}
.supportRules h3{font-size:17px}
.supportAlert{grid-template-columns:1fr;gap:12px;padding:26px 0}
.supportAlert h3{font-size:18px}
.faqList summary{padding:20px 44px 20px 40px;font-size:15px}
.faqList summary:before,.faqAnswer:before{left:0;width:26px;height:26px;font-size:12px}
.faqList summary:before{top:20px}
.faqList summary:after{right:2px;top:21px;font-size:18px}
.faqAnswer{padding:0 8px 22px 40px}
}
@media(max-width:540px){
.supportHeroCopy{padding:42px 0 58px}
.faqList summary{text-wrap:balance}
.faqList summary>span{white-space:nowrap}
}
/* 小規模カテゴリの商品集約。固定ヘッダー・追従アンカー・サイズ別一覧・SKU表示のページ固有構成のみ。 */
.compactCategoryTemplate{background:#fff;padding-top:var(--header-offset);overflow:clip}
.compactCategoryTemplate .alkalineHeader{position:fixed;z-index:100;top:0;left:0;right:0}
.compactCategoryTemplate .mpInner{width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto}
.compactCategoryTemplate [id]{scroll-margin-top:200px}
.fdkTop.compactCategoryTemplate h1{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.compactCategoryTemplate h2,.fdkTop.compactCategoryTemplate p{line-break:auto;word-break:normal;overflow-wrap:anywhere}
.fdkTop.compactCategoryTemplate h2{text-wrap:wrap}
.fdkTop.compactCategoryTemplate p{text-wrap:var(--mobile-body-wrap,wrap)}
.compactCategoryTemplate .mpAnchor{z-index:90;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;margin:-18px auto 0}
.compactCategoryTemplate.grade-max .mpAnchor,
.compactCategoryTemplate.grade-power .mpAnchor,
.compactCategoryTemplate.compactSpecInLineup .mpAnchor{grid-template-columns:repeat(3,minmax(0,1fr))}
.compactCategoryTemplate .mpAnchor a{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere;text-wrap:wrap}
.compactCategoryTemplate .mpAnchor small{margin-top:5px;color:#73777d;font-size:13px;font-weight:400}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isCyan .mpTechIndex{background:var(--grade-cyan)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isSilver .mpTechIndex{background:var(--grade-silver)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isHearing .mpTechIndex{background:var(--grade-hearing)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isMax .mpTechIndex{background:var(--grade-max)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isPower .mpTechIndex{background:var(--grade-power);color:var(--grade-power-ink)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup.isInk .mpTechIndex{background:var(--ink)}
.compactSizeGroup.isCyan .mpTechIndex{background:var(--grade-cyan)}
.compactSizeGroup.isSilver .mpTechIndex{background:var(--grade-silver)}
.compactSizeGroup.isHearing .mpTechIndex{background:var(--grade-hearing)}
.compactSizeGroup.isMax .mpTechIndex{background:var(--grade-max)}
.compactSizeGroup.isPower .mpTechIndex{background:var(--grade-power);color:var(--grade-power-ink)}
.compactSizeGroup.isInk .mpTechIndex{background:var(--ink)}
.compactCategoryTemplate.grade-hearing .alkalineEyebrow{color:var(--grade-accent)}
.compactCategoryTemplate.grade-hearing .alkalinePrimaryLink{border-color:var(--grade-accent);background:var(--grade-accent)}
.compactCategoryTemplate.grade-hearing .alkalinePrimaryLink:hover,
.compactCategoryTemplate.grade-hearing .alkalinePrimaryLink:focus-visible{color:var(--grade-accent)}
/* 補聴器統合ページ: KVと一覧導入をPCの横幅に合わせる。 */
.compactCategoryTemplate.grade-hearing .alkalineHeroImage img{
width:min(100%,520px);
max-height:310px
}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,360px);
column-gap:48px;
max-width:100%
}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>.alkalineEyebrow,
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>h2,
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>p{grid-column:1}
.compactCategoryTemplate.grade-hearing #lineup p:not(.alkalineEyebrow){white-space:pre-line}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>.compactDocumentLink{
grid-column:2;
grid-row:2/4;
align-self:end;
width:100%;
margin-top:0;
background:var(--ink);
border-color:var(--ink);
color:#fff
}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>.compactDocumentLink:hover,
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>.compactDocumentLink:focus-visible{color:var(--ink)}
.compactCategoryTemplate.grade-hearing .compactSizeGroup,
.compactCategoryTemplate.grade-hearing .compactSizeGroup.hasProduct{
grid-template-columns:minmax(0,1fr)
}
.compactCategoryTemplate.grade-hearing .compactSizePacks{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
width:100%;
gap:28px;
align-items:start
}
.compactCategoryTemplate.grade-hearing .compactPack{
justify-items:center;
align-content:start;
width:100%;
min-width:0
}
.compactCategoryTemplate.grade-hearing .compactPack img{
max-width:150px;
max-height:200px;
object-fit:contain
}
.compactCategoryTemplate.grade-hearing .compactPack .compactPackSpec{
justify-content:center;
text-align:center;
text-wrap:balance
}
.compactCategoryTemplate.grade-hearing .compactProductShot img{
max-width:132px;
max-height:184px
}
/* マンガンは赤を見出し・pill、黒を製品名の基調に使う。 */
.compactManganese{--grade-accent:var(--red)}
.compactManganese .alkalineEyebrow{color:var(--red)}
.compactManganese .mpTechIndex{background:var(--red);color:#fff}
.compactManganese .alkalineHeroImage img{max-width:78%;max-height:210px}
.compactManganese #lineup .mpSectionHead{max-width:100%}
.compactManganese #lineup .mpSectionHead>p:not(.alkalineEyebrow){text-wrap:var(--mobile-body-wrap,pretty)}
@media(min-width:1280px){
.compactManganese #lineup .mpSectionHead>p:not(.alkalineEyebrow){white-space:pre-line}
}
.compactManganese .compactSizePacks{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
width:100%;
gap:28px
}
.compactManganese .compactPack{
align-content:end;
justify-items:center;
width:100%;
min-width:0;
min-height:190px;
padding:16px 8px
}
.compactManganese .compactPack img{max-width:100%;max-height:150px}
.compactManganese .compactPackSpec{justify-content:center;text-align:center;color:var(--ink)}
.compactSection{padding:90px 0}
.compactFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.compactFacts>div{min-width:0;padding:22px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.compactFacts dt{margin:0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.compactFacts dd{margin:8px 0 0;font-size:16px;font-weight:600;line-height:1.6}
.compactSizeGroups{display:grid;gap:0;border-top:1px solid var(--line)}
.compactSizeGroup{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:28px;align-items:start;justify-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.compactSizeGroup .mpTechIndex{margin-bottom:0}
.compactSizePacks{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 28px}
.compactSizePacks a,.compactPackSpec{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-size:14px;font-weight:600}
.compactSizePacks a:hover,.compactSizePacks a:focus-visible,.compactPackSpec:hover,.compactPackSpec:focus-visible{color:var(--red)}
.grade-max .compactSizePacks a:hover,.grade-max .compactSizePacks a:focus-visible{color:var(--grade-max)}
.grade-power .compactSizePacks a:hover,.grade-power .compactSizePacks a:focus-visible{color:var(--grade-power-ink)}
.compactSizeGroup.hasProduct{grid-template-columns:max-content 132px minmax(0,1fr);align-items:center}
.compactProductShot{margin:0;display:grid;justify-items:center;gap:8px}
.compactProductShot button,.compactPack button{display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--muted);cursor:zoom-in}
.compactPack .compactPackSpec{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.compactProductShot button:focus-visible,.compactPack button:focus-visible{outline:2px solid var(--grade-accent,var(--grade-cyan));outline-offset:4px}
.compactProductShot img{width:auto;height:auto;max-width:120px;max-height:168px;object-fit:contain}
.compactProductShot figcaption{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.compactPack{display:grid;justify-items:start;gap:8px;min-width:72px}
.compactPack img{width:auto;height:auto;max-width:72px;max-height:96px;object-fit:contain}
.compactSkuScroll{overflow-x:auto}
.compactSkuScroll table{width:100%;min-width:1080px;border-collapse:collapse;border-top:2px solid var(--ink);font-size:13px}
.compactSkuScroll th,.compactSkuScroll td{height:55px;padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.compactSkuScroll thead th{background:#ebedef;font-weight:700}
.compactSkuScroll tbody th{font-weight:600}
.compactJan,.compactModel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.compactSource{margin:18px 0 0;color:#73777d;font-size:12px;line-height:var(--mobile-note-line-height,1.8)}
.compactSection .mpSectionHead .alkalinePrimaryLink{margin-top:22px}
.compactSection .mpSectionHead .compactDocumentLink{
width:100%;
max-width:100%;
height:54px;
margin-top:22px;
padding:0 22px;
white-space:nowrap;
gap:16px
}
.compactDocumentLink span{min-width:0}
@media(max-width:390px){
.compactSection .mpSectionHead .compactDocumentLink{height:48px;padding:0 14px;font-size:12px}
.compactSection .mpSectionHead .compactDocumentLink .alkalineArrow{width:28px;flex:none}
}
.alkalineHeroImage .productNoImage{max-width:320px;min-height:220px;border:1px solid var(--line)}
.compactLineupNoImage{max-width:320px;min-height:180px;margin:0 0 28px;border:1px solid var(--line)}
@media(max-width:820px){
.compactCategoryTemplate{padding-top:var(--header-offset)}
.compactCategoryTemplate .mpInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px));max-width:100%}
.compactCategoryTemplate [id]{scroll-margin-top:var(--page-anchor-offset,var(--header-offset))}
.compactCategoryTemplate.grade-max,
.compactCategoryTemplate.grade-power{--page-anchor-offset:184px}
.compactCategoryTemplate .mpAnchor{margin-top:0}
.compactCategoryTemplate .mpAnchor a{padding:9px 6px;text-align:center}
.compactCategoryTemplate .mpAnchor small{display:none}
.compactSection{padding:65px 0}
.compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
.compactSizeGroup,.compactSizeGroup.hasProduct{grid-template-columns:1fr;gap:14px;padding:22px 0}
.compactProductShot img{max-width:96px;max-height:140px}
.compactCategoryTemplate.grade-hearing .alkalineHeroImage img{width:min(100%,420px);max-height:204px}
.compactCategoryTemplate.grade-hearing .alkalineHeroInner{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;gap:20px;padding:38px 22px 28px}
.compactCategoryTemplate.grade-hearing .alkalineHeroCopy{display:contents}
.compactCategoryTemplate.grade-hearing .alkalineHeroCopy>.alkalineEyebrow{grid-row:1;margin:0}
.compactCategoryTemplate.grade-hearing .alkalineHeroCopy>h1{grid-row:2;margin:0}
.compactCategoryTemplate.grade-hearing .alkalineHeroCopy>.alkalineLead{grid-row:3;margin:0}
.compactCategoryTemplate.grade-hearing .alkalineHeroImage{grid-row:4;height:auto;min-height:0;margin:4px 0;padding:0}
.compactCategoryTemplate.grade-hearing .alkalinePrimaryLink{grid-row:5;position:static;justify-self:start;margin:0}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead{display:block;max-width:100%}
.compactCategoryTemplate.grade-hearing #lineup .mpSectionHead>.compactDocumentLink{width:100%;margin-top:22px}
.compactCategoryTemplate.grade-hearing .compactSizePacks{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compactManganese .alkalineHeroImage img{max-width:74%;max-height:150px}
.compactManganese .compactSizePacks{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compactManganese .compactPack{min-height:168px}
.compactManganese .compactPack img{max-height:124px}
}
@media(max-width:540px){
.compactCategoryTemplate.grade-max,
.compactCategoryTemplate.grade-power{--page-anchor-offset:var(--header-offset)}
.compactCategoryTemplate.grade-hearing .alkalineHeroInner{padding-left:var(--mobile-content-gutter,20px);padding-right:var(--mobile-content-gutter,20px)}
.compactCategoryTemplate .mpAnchor{grid-template-columns:repeat(2,minmax(0,1fr))}
.compactCategoryTemplate .mpAnchor a:nth-child(2n){border-right:0}
.compactCategoryTemplate .mpAnchor a:nth-child(-n+2){border-bottom:1px solid var(--line)}
.compactCategoryTemplate.grade-max .mpAnchor,
.compactCategoryTemplate.grade-power .mpAnchor{position:relative;top:auto;z-index:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.compactCategoryTemplate.compactSpecInLineup .mpAnchor{grid-template-columns:repeat(3,minmax(0,1fr))}
.compactCategoryTemplate.grade-max .mpAnchor a:nth-child(2n),
.compactCategoryTemplate.grade-power .mpAnchor a:nth-child(2n),
.compactCategoryTemplate.compactSpecInLineup .mpAnchor a:nth-child(2n){border-right:1px solid var(--line)}
.compactCategoryTemplate.grade-max .mpAnchor a:nth-child(-n+2),
.compactCategoryTemplate.grade-power .mpAnchor a:nth-child(-n+2),
.compactCategoryTemplate.compactSpecInLineup .mpAnchor a:nth-child(-n+2){border-bottom:0}
.compactCategoryTemplate.grade-max .mpAnchor a:last-child,
.compactCategoryTemplate.grade-power .mpAnchor a:last-child,
.compactCategoryTemplate.compactSpecInLineup .mpAnchor a:last-child{border-right:0}
.compactFacts{grid-template-columns:1fr}
.compactCategoryTemplate.grade-hearing .alkalineHeroImage img{width:min(100%,340px);max-height:184px}
.compactCategoryTemplate.grade-hearing .compactSizePacks{gap:16px}
.compactCategoryTemplate.grade-hearing .compactPack img{max-width:120px;max-height:160px}
.compactManganese .alkalineHeroImage img{max-width:82%;max-height:132px}
.compactManganese .compactSizePacks{gap:16px}
.compactManganese .compactPack{min-height:148px;padding:12px 2px}
.compactManganese .compactPack img{max-height:108px}
}
/* 製品一覧。Header／Footer／矢印／本文見出し／サポートは既存共通ルールを再利用し、このファイルは一覧の構成だけを持つ。 */
.productListTemplate{background:#fff;padding-top:var(--header-offset);overflow:clip}
.productListTemplate .alkalineHeader{position:fixed;z-index:100;top:0;left:0;right:0}
.productListTemplate .mpInner{width:calc(100% - 2 * var(--content-gutter,30px));max-width:min(var(--content-max,1180px),100%);margin:auto}
.productListTemplate [id]{scroll-margin-top:200px}
.fdkTop.productListTemplate h1,.fdkTop.productListTemplate h2,.fdkTop.productListTemplate h3,.fdkTop.productListTemplate h4{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
.fdkTop.productListTemplate p{line-break:auto;word-break:normal;overflow-wrap:anywhere;text-wrap:var(--mobile-body-wrap,pretty)}
.productListTemplate .alkalineHeroInner{grid-template-columns:minmax(0,1fr);min-height:0}
.productListTemplate .alkalineHeroCopy{max-width:760px}
.productListSection{padding:90px 0}
.productListCats{display:flex;flex-wrap:wrap;gap:0;border-top:0;border-left:0;padding:1px 0 0 1px}
.productListCats a{flex:1 1 240px;min-width:0;padding:18px 21px 21px 20px;display:grid;justify-items:center;gap:12px;border-right:0;border-bottom:0;text-align:center}
.productListCats a[href="#cat-alkaline"]{--category-image-height:22px}
.productListCats img{width:auto;height:var(--category-image-height,72px);max-width:100%;object-fit:contain}
.productListCats a strong{display:block;font-size:16px;font-weight:600;line-height:1.6;text-wrap:balance}
.productListCats a span{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.productListCats a[href="#cat-alkaline"] span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:72px;max-width:100%;margin-top:0}
.productListCats a:hover,.productListCats a:focus-visible{color:var(--red)}
.productListCats a:hover span,.productListCats a:focus-visible span{color:var(--red)}
.productListFilter{display:grid;gap:22px;max-width:760px}
.productListFilter label{display:grid;gap:8px;min-width:0}
.productListFilter label span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.productListFilter input[type="search"],
.productListFilter select{
width:100%;
min-height:48px;
padding:10px 0;
border:0;
border-bottom:1px solid var(--line);
border-radius:0;
background:transparent;
color:inherit;
font:inherit
}
.productListFilter input[type="search"]::placeholder{color:#9aa0a6}
.productListFilter input[type="search"]:focus-visible,
.productListFilter select:focus-visible,
.productListFilter button:focus-visible{
outline:2px solid var(--ink);
outline-offset:3px
}
.productListFilter input[type="search"]:focus,
.productListFilter select:focus{border-bottom-color:var(--red)}
.productListFilterRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:22px 28px;align-items:end}
.productListFilter button{
min-height:48px;
padding:0;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
color:var(--red);
font:inherit;
font-weight:700;
cursor:pointer;
text-align:left
}
.productListFilter button:hover,.productListFilter button:focus-visible{border-bottom-color:var(--red)}
.productListCount{margin:0;color:var(--muted);font-size:13px}
.productListNoscript,.productListEmpty{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.9)}
.productListEmpty[hidden],.productListCategory[hidden],.productListSeries[hidden],.productListSizeBlock[hidden],.productListSku[hidden]{display:none}
.productListCategory{padding:56px 0 8px;border-top:1px solid var(--line)}
.productListCategory:first-of-type{border-top:0;padding-top:0}
.productListCategory + .productListCategory{border-top:0}
.productListCategoryHead{margin:0 0 28px;max-width:760px}
.productListCategoryHead h3{margin:0;font-size:32px;font-weight:600;line-height:1.5}
.productListCategoryHead>p:last-child{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:var(--mobile-body-line-height,1.8)}
.productListSeries{padding:28px 0;border-bottom:1px solid var(--line)}
.productListSeriesHead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:end;margin:0 0 18px}
.productListSeriesHead h4{margin:0;font-size:22px;font-weight:600;line-height:1.5}
.productListSeriesHead p{margin:8px 0 0;color:var(--muted);font-size:13px}
.productListSeriesHead a,.productListPending{display:inline-flex;align-items:center;gap:10px;min-height:32px;color:var(--red);font-size:13px;font-weight:700}
.productListSeriesHead a:hover,.productListSeriesHead a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.productListPending{color:var(--muted);font-weight:600;cursor:default}
.productListSizeBlock{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px 28px;align-items:start;padding:8px 0}
.productListSizeBlock.isSizeless{grid-template-columns:minmax(0,1fr)}
.productListSizeLabel{margin:0}
.productListSizeLabel.isCyan{background:var(--grade-cyan)}
.productListSizeLabel.isMax{background:var(--grade-max)}
.productListSizeLabel.isPower{background:var(--grade-power);color:var(--grade-power-ink)}
.productListSizeLabel.isHearing{background:var(--grade-hearing)}
.productListSizeLabel.isSilver{background:var(--grade-silver)}
.productListSizeLabel.isInk{background:var(--ink)}
.productListSkuMain.isSizeless{grid-template-columns:repeat(4,minmax(0,1fr))}
.productListSkuMain.isSizeless .productListSkuSize{display:none}
.productListSkuFrame,.productListSkuDetail{display:contents}
.productListSkuScroll{min-width:0}
.productListSkuHeader,.productListSkuFrame>.scroll-hint-icon-wrap{display:none}
.productListSku{min-width:0;padding:14px 0;border-top:1px solid var(--line)}
.productListSku:first-child{border-top:0;padding-top:4px}
.productListSkuMain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 20px}
.productListSkuMain p{margin:0;font-size:14px;font-weight:400;line-height:1.7}
.productListSkuMain span{display:block;margin-bottom:2px;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:0;line-height:1.7}
.productListSkuModel,.productListSkuJan{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.productListSkuMore{margin-top:10px}
.productListSkuMore summary{display:inline;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600}
.productListSkuMore summary:hover,.productListSkuMore summary:focus-visible{color:var(--red)}
.productListSkuMore dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:12px 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.productListSkuMore div{min-width:0;padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.productListSkuMore dt{margin:0;color:var(--muted);font-size:11px;font-weight:400}
.productListSkuMore dd{margin:6px 0 0;font-size:14px;line-height:1.7;text-wrap:pretty}
.productListSkuNote{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:var(--mobile-note-line-height,1.8)}
@media(max-width:820px){
.productListTemplate{padding-top:var(--header-offset)}
.productListTemplate .mpInner{width:calc(100% - 2 * var(--mobile-content-gutter,20px));max-width:100%}
.productListTemplate [id]{scroll-margin-top:var(--header-offset)}
.productListTemplate .alkalineHeroInner{min-height:0;padding:38px 22px 72px}
.productListTemplate .alkalineHeroCopy{padding:0;max-width:100%}
.productListSection{padding:65px 0}
.productListCats a{flex:1 1 50%;padding:18px 16px}
.productListCats a strong{font-size:15px}
.productListFilterRow{grid-template-columns:1fr;gap:18px}
.productListCategory{padding:42px 0 4px}
.productListCategoryHead h3{font-size:28px}
.productListSeriesHead{grid-template-columns:1fr;gap:10px}
.productListSeriesHead h4{font-size:20px}
.productListSizeBlock{grid-template-columns:1fr;gap:8px;padding:12px 0}
.productListSkuMain,.productListSkuMain.isSizeless{grid-template-columns:1fr 1fr;gap:12px 16px}
.productListSkuMore dl{grid-template-columns:1fr}
}
@media(max-width:540px){
.productListTemplate .alkalineHeroInner{padding-left:var(--mobile-content-gutter,20px);padding-right:var(--mobile-content-gutter,20px)}
.productListCats a{flex:0 0 50%;padding:18px 8px}
.productListSkuFrame{display:block;min-width:0}
.productListSkuScroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.productListSkuHeader,.productListSku{display:grid;grid-template-columns:80px 180px 160px 170px 120px 240px;min-width:950px;gap:0;align-items:start}
.productListSkuHeader{font-size:14px;font-weight:600;background:var(--paper);border-bottom:1px solid var(--line)}
.productListSkuHeader>span,.productListSkuMain p,.productListSkuDetail{padding:12px 10px}
.productListSku{padding:0}
.productListSku:first-child{padding:0}
.productListSkuMain,.productListSkuMain.isSizeless{display:contents}
.productListSkuMain.isSizeless .productListSkuSize{display:block}
.productListSkuMain p{margin:0;white-space:nowrap}
.productListSkuMain p>span{display:none}
.productListSkuDetail{display:block;min-width:0}
.productListSkuMore{margin-top:0}
.productListSkuMore dl{grid-template-columns:minmax(0,1fr)}
.productListSkuFrame>.scroll-hint-icon-wrap{display:block}
}
/* 製品カテゴリ一覧の商品グリッド。Header／Footer／矢印／拡大dialog／比較表／サポートは既存共通ルールを再利用し、このファイルはグループ構成とカード差分だけを持つ。 */
.productCategorySection{
padding:88px var(--content-gutter,30px) 40px
}
.productCategorySection + .productCategorySection{padding-top:48px;padding-bottom:100px}
.productCategoryHead,
.productCategoryGrid{
width:100%;
max-width:min(var(--content-max,1180px),100%);
margin-left:auto;
margin-right:auto
}
.productCategoryGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
align-items:stretch
}
.productCategoryGrid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.productCategoryGrid.isLineup{align-items:start}
.productCategoryGrid.isLineup[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.productNoImage{
display:flex;
width:100%;
min-height:255px;
align-items:center;
justify-content:center;
padding:24px 20px;
color:var(--muted);
font-size:13px;
font-weight:700;
letter-spacing:.04em;
background:transparent
}
.productCategoryNote{margin:12px 0 0;color:#73777d;font-size:12px;line-height:var(--mobile-note-line-height,1.8)}
.productCategorySizeRow{
width:100%;
max-width:min(var(--content-max,1180px),100%);
margin:0 auto 28px
}
.productCategorySizeHead{
width:100%;
margin:0 0 14px
}
.productCategorySizeHead .productCategoryFacts{margin-top:8px}
.productCategoryCard{
--tone:var(--red);
position:relative;
display:flex;
flex-direction:column;
min-height:500px;
border:1px solid var(--line)
}
.productCategoryCard.isTextOnly{min-height:0}
.productCategoryCard:before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:4px;
background:var(--tone)
}
.productCategoryImage{
display:flex;
min-height:255px;
align-items:center;
justify-content:center
}
.productCategoryImage button{
display:flex;
width:100%;
min-height:255px;
padding:24px 20px 12px;
flex-direction:column;
align-items:center;
justify-content:center;
border:0;
background:transparent;
color:var(--muted);
cursor:zoom-in
}
.productCategoryImage img{
width:auto;
height:auto;
max-width:min(72%,220px);
max-height:200px;
object-fit:contain
}
.productCategoryImage img:where([src$="/HGN3310FXI-W-B.png"]){
translate:-16.9849931787% 0;
clip-path:inset(0 0 0 17%)
}
.productCategoryImage.isPair{gap:12px;padding:24px 16px}
.productCategoryImage.isPair img{max-width:min(42%,150px)}
.productCategoryImage button:focus-visible{outline:2px solid var(--grade-cyan);outline-offset:4px}
.productCategoryCopy{
display:flex;
flex:1;
flex-direction:column;
padding:27px 30px 24px;
border-top:1px solid var(--line)
}
.productCategoryCard.isTextOnly .productCategoryCopy{border-top:0;padding-top:28px}
.productCategoryCopy h3{
margin:0 0 8px;
font-size:18px;
font-weight:700;
overflow-wrap:anywhere;
line-height:1.55
}
.productCategoryModel{
margin:0 0 10px;
color:var(--muted);
font-size:11px;
font-weight:700;
letter-spacing:.02em;
overflow-wrap:anywhere
}
.productCategoryCard.isLineup{min-height:0}
.productCategoryCard.isLineup .productCategoryCopy{flex:none;padding-bottom:22px}
.productCategoryCard.isLineup .productCategoryModel{margin-bottom:0}
.productCategorySummary{
margin:0 0 16px;
color:var(--muted);
font-size:12px;
line-height:1.8;
overflow-wrap:anywhere
}
.productCategoryFacts{
display:grid;
gap:8px;
margin:0
}
.productCategoryFacts>div{
display:grid;
grid-template-columns:minmax(5.5em,7em) minmax(0,1fr);
gap:10px;
align-items:baseline
}
.productCategoryFacts dt{
margin:0;
color:var(--muted);
font-size:11px;
font-weight:700;
overflow-wrap:anywhere
}
.productCategoryFacts dd{
margin:0;
font-size:12px;
line-height:1.7;
overflow-wrap:anywhere
}
.productCategoryCta{
z-index:1;
isolation:isolate;
overflow:hidden;
flex:none;
width:calc(100% + 60px);
margin:16px -30px -24px;
height:54px;
padding:0 28px;
display:flex;
align-items:center;
justify-content:space-between;
border-top:1px solid var(--line);
color:var(--tone);
font-size:13px;
font-weight:700
}
.productCategoryCta:before{
content:"";
position:absolute;
z-index:-1;
inset:0;
background:var(--tone);
transform:scaleX(0);
transform-origin:left;
transition:transform .42s cubic-bezier(.22,.72,.18,1)
}
.productCategoryCard:hover .productCategoryCta:not([aria-disabled="true"]),
.productCategoryCard:focus-within .productCategoryCta:not([aria-disabled="true"]){color:#fff}
.productCategoryCard:hover .productCategoryCta:not([aria-disabled="true"]):before,
.productCategoryCard:focus-within .productCategoryCta:not([aria-disabled="true"]):before{transform:scaleX(1)}
.productCategoryCompare table{min-width:960px}
.productCategoryCompare :is(th,td){height:auto;padding:12px 14px;text-wrap:pretty}
.productCategoryCompare tbody th{width:12%;min-width:7em;white-space:nowrap}
.productCategoryCompare td>span{white-space:nowrap}
.chargerTimeTables article+article{margin-top:40px}
.chargerTimeTables .productCategoryCompare table{min-width:720px}
.chargerTimeTables .productCategoryCompare[data-columns="5"] table{min-width:540px}
.chargerTimeTables h2 sup{font-size:12px}
.cellStory{
--cell-accent:var(--grade-hearing);
width:100%;
max-width:min(var(--content-max,1180px),100%);
margin:0 auto 12px;
min-width:0
}
.cellStoryInner{min-width:0}
.cellStory.isStandard .cellStoryBoard{
background:#fff
}
.cellStoryBoard{min-width:0}
.cellStoryBoardLink{
display:block;
min-width:0;
color:inherit;
text-decoration:none;
cursor:pointer
}
.cellStoryHead{
display:grid;
grid-template-columns:minmax(0,42fr) minmax(0,58fr);
align-items:stretch
}
.cellStoryBand,
.fdkTop .cellStory .cellStoryBand{
margin:0;
padding:16px 20px;
display:flex;
align-items:center;
justify-content:center;
border:0;
background:var(--red);
color:#fff;
font-size:19px;
font-weight:700;
line-height:1.3;
letter-spacing:.02em;
text-align:center;
line-break:strict;
word-break:keep-all;
overflow-wrap:normal
}
.cellStoryLead{
--mobile-body-wrap:pretty;
display:flex;
min-width:0;
flex-direction:column;
justify-content:center;
gap:6px;
padding:18px 24px
}
.cellStoryLead p{
margin:0;
font-size:16px;
font-weight:600;
line-height:var(--mobile-body-line-height,1.7);
line-break:strict;
word-break:var(--mobile-body-word-break,keep-all);
overflow-wrap:anywhere
}
.cellStoryBody{
display:grid;
grid-template-columns:minmax(0,28fr) minmax(0,42fr) minmax(0,30fr);
gap:10px;
align-items:center;
padding:16px;
border-top:1px solid var(--line)
}
.cellStoryVisual{
display:flex;
min-width:0;
align-items:center;
justify-content:flex-start
}
.cellStoryVisual img{
width:100%;
height:auto;
max-width:100%;
aspect-ratio:auto;
object-fit:contain;
object-position:left center;
transform:none
}
.cellJisNotice{
display:grid;
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
gap:28px;
align-items:start;
width:100%;
max-width:min(var(--content-max,1180px),100%);
margin:28px auto 0;
padding:28px 32px;
background:var(--recharge-notice);
color:var(--ink)
}
.cellJisNotice h3{margin:0 0 12px;font-size:20px;font-weight:800;line-height:1.45}
.cellJisNotice :where(p){margin:0;font-size:14px;line-height:var(--mobile-body-line-height,1.85)}
.cellJisNoticeCopy{min-width:0}
.cellJisNoticeCopy figure{display:grid;justify-content:end;justify-items:center;gap:8px;margin:18px 0 0;max-width:100%}
.cellJisNoticeCopy figcaption{font-size:12px;font-weight:700;line-height:1.5}
.cellJisNoticeCopy figure>span{position:relative;display:block;flex:none;width:38px;height:132px}
.cellJisNoticeCopy figure img{position:absolute;top:47px;left:-47px;width:132px;max-width:none;height:38px;object-fit:contain;transform:rotate(90deg)}
.cellJisDefinition{margin-top:14px;font-size:11px;line-height:var(--mobile-note-line-height,1.7)}
.cellJisNoticeVisualGroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;min-width:0}
.cellJisNoticeVisualGroup>h4{grid-column:1/-1;margin:0;font-size:15px;font-weight:700;line-height:1.5;text-wrap:balance}
.cellJisNoticePanel{position:relative;min-width:0;padding:0;background:transparent}
.cellJisNoticePanel+ .cellJisNoticePanel::before{content:"";position:absolute;top:45%;left:-30px;border-top:24px solid transparent;border-bottom:24px solid transparent;border-left:24px solid var(--ink)}
.cellJisNoticePanel h4{margin:0;font-size:13px;font-weight:700;line-height:1.45}
.cellJisNoticePanel>p{margin-top:2px;font-size:12px;line-height:1.6}
.cellJisNoticePanel>p:last-child{margin-top:10px;font-size:12px;font-weight:700;line-height:1.5;text-align:center}
.cellJisNoticePanel>p:last-child strong{color:var(--recharge-jis-orange);font-family:Arial,sans-serif;font-size:36px;font-weight:900;line-height:1;white-space:nowrap}
.cellJisNoticePanel>p:last-child span{display:inline-block}
.cellJisNoticeVisual{position:relative;min-width:0;margin-top:18px}
.cellJisNoticeVisual img{display:block;width:100%;height:auto;object-fit:contain}
.cellJisNoticePanel dl{position:absolute;right:0;bottom:8%;left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.cellJisNoticePanel dl>div{min-width:0;padding-left:50%}
.cellJisNoticePanel dt{margin:0;font-size:11px;font-weight:700;line-height:1.45;white-space:nowrap}
.cellJisNoticePanel dd{margin:2px 0 0;font-size:11px;font-weight:700;line-height:1.45;white-space:nowrap}
.cellJisNoticePanel dd strong{color:var(--recharge-jis-orange);font-family:Arial,sans-serif;font-size:24px;font-weight:900;line-height:1}
.cellJisNoticePanel sup{font-size:10px;font-weight:600}
.cellJisNotice>footer{grid-column:1/-1;display:grid;gap:4px}
.cellJisNotice>footer p{font-size:11px;line-height:1.6}
.cellStoryJis{margin:0;min-width:0}
.cellStoryJisAxis{
display:grid;
grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
gap:8px;
align-items:center
}
.cellStoryJisPoint{min-width:0}
.cellStoryJisKicker{
display:block;
font-size:11px;
font-weight:700;
letter-spacing:.08em
}
.cellStoryJisPoint strong{
display:block;
margin:6px 0 4px;
color:var(--cell-accent);
font-size:14px;
font-weight:700;
line-height:1.2;
line-break:strict;
word-break:keep-all;
overflow-wrap:normal;
white-space:nowrap
}
.cellStoryJisPoint.isBefore strong{color:inherit}
.cellStoryJisPoint span:last-child{
display:block;
font-size:9px;
line-height:1.5;
line-break:strict;
word-break:keep-all;
overflow-wrap:anywhere
}
.cellStoryJisArrow{
position:relative;
display:block;
height:2px;
background:currentColor
}
.cellStoryJisArrow:after{
content:"";
position:absolute;
top:50%;
right:-1px;
width:8px;
height:8px;
border-top:2px solid currentColor;
border-right:2px solid currentColor;
transform:translateY(-50%) rotate(45deg)
}
.cellStoryCapTable{
width:100%;
margin:0;
border-collapse:collapse
}
.cellStoryCapTable th,
.cellStoryCapTable td{
padding:8px 0;
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:baseline;
white-space:nowrap
}
.cellStoryCapTable th{
width:30%;
font-size:11px;
font-weight:700;
line-break:strict;
word-break:keep-all;
overflow-wrap:normal
}
.cellStoryCapPrefix,
.cellStoryCapUnit{
margin-right:4px;
font-size:9px;
font-weight:600;
letter-spacing:.04em
}
.cellStoryCapNum{
color:var(--cell-accent);
font-size:14px;
font-weight:700;
line-height:1;
letter-spacing:-.03em;
line-break:strict;
word-break:keep-all
}
/* Board footnote markers (※1/※2/※3): keep each marker+digit together and small,
smaller than the JIS/容量 figures. Scoped to the cellStory board only. */
.cellStoryJisPoint strong sup,
.cellStoryCapUnit sup{
display:inline-block;
margin-left:1px;
font-size:9px;
font-weight:600;
line-height:1;
vertical-align:super;
white-space:nowrap
}
.cellStoryPoints{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px 20px;
margin:18px 0 0;
padding:16px 0 0;
padding-inline-start:0;
border-top:1px solid var(--line);
list-style:none
}
.cellStoryIndex{
display:block;
color:var(--cell-accent);
font-size:18px;
font-weight:700;
line-height:1;
letter-spacing:.04em
}
.cellStoryPoint h3{
margin:6px 0 6px;
font-size:15px;
font-weight:700;
line-height:1.45;
overflow-wrap:anywhere
}
.cellStoryPoint p{
margin:0;
font-size:13px;
line-height:var(--mobile-body-line-height,1.7);
overflow-wrap:anywhere
}
.cellStory .topicNote{max-width:100%;color:#000;margin:6px 0 0;line-height:1.65}
.cellTypeCompare{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
min-width:0
}
.cellTypeCol{
min-width:0;
padding:18px 18px 16px;
border:1px solid var(--line);
background:#fff;
color:#000
}
.cellTypeCol.isStandard{border-top:4px solid var(--red)}
.cellTypeCol.isHigh{border-top:4px solid var(--recharge-gold)}
.cellTypeCol figure{
display:grid;
justify-items:center;
gap:10px;
margin:0 0 14px
}
.cellTypeCol img{
width:100%;
height:auto;
max-height:72px;
object-fit:contain;
transform:none
}
.cellTypeCol figcaption{margin:0;color:#000;font-size:15px;font-weight:700;line-height:1.4}
.cellTypeCol dl{display:grid;gap:0;margin:0}
.cellTypeCol dl > div{display:grid;gap:4px;padding:10px 0 0;border-top:1px solid var(--line)}
.cellTypeCol dt{margin:0;color:#000;font-size:11px;font-weight:700;letter-spacing:.04em}
.cellTypeCol dd{margin:0;color:#000;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.productCategorySpecZoom{
display:inline-flex;
margin-top:12px;
padding:0;
border:0;
background:transparent;
color:var(--muted);
cursor:zoom-in
}
.cellStory.isHigh{
--cell-accent:var(--recharge-gold)
}
.cellStory.isHigh .cellStoryBoard{
color:#000;
background:#fff
}
.cellStory.isHigh .cellStoryBand,
.fdkTop .cellStory.isHigh .cellStoryBand{
background:var(--ink);
color:var(--cell-accent)
}
.cellStory.isHigh .cellStoryBody{border-top-color:var(--line)}
.cellStory.isHigh .cellStoryCapTable th,
.cellStory.isHigh .cellStoryCapTable td{border-bottom-color:var(--line)}
.cellStory.isHigh .cellStoryLead p,
.cellStory.isHigh .cellStoryJisPoint span,
.cellStory.isHigh .cellStoryCapPrefix,
.cellStory.isHigh .cellStoryCapUnit,
.cellStory.isHigh .cellStoryCapTable th{color:#000}
.cellStory.isHigh .cellStoryCapNum,
.cellStory.isHigh .cellStoryJisPoint.isCurrent strong{color:var(--cell-accent)}
.cellStory.isHigh .cellStoryIndex{color:var(--cell-accent)}
.cellStory.isHigh .cellStoryJisBar.isBefore{background:var(--ink);opacity:.28}
.cellStory + .productCategorySizeRow{
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--line)
}
/* ==========================================================================
RECHARGE: スタンダードタイプ・高容量タイプ比較
- 背景装飾は使わず、公式の横向き電池画像とHTMLテキストで構成
- 820px以下は1列、540px以下はカード内も1列
========================================================================== */
.rechargeTypeOverview{
padding:88px max(20px,calc((100% - var(--content-max,1180px))/2)) 44px;
background:#fff
}
.rechargeTypeOverview>.productCategoryHead{width:100%;margin:0 0 38px}
.rechargeTypeGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
width:100%;
max-width:var(--content-max,1180px);
margin:0 auto
}
.rechargeTypeGrid>.productCategorySection{
min-width:0;
padding:0;
background:transparent
}
.rechargeTypeGrid .cellStory{height:100%;margin:0}
.rechargeTypeGrid .cellStoryInner,
.rechargeTypeGrid .cellStoryBoardLink,
.rechargeTypeGrid .cellStoryBoard{height:100%}
.rechargeTypeGrid .cellStoryBoard{
display:flex;
flex-direction:column;
border:0;
border-left:1px solid var(--line);
border-bottom:1px solid var(--line)
}
.rechargeTypeGrid .cellStoryBody{flex:1;align-content:center}
.rechargeTypeNotes{
max-width:var(--content-max,1180px);
margin:10px auto 0
}
.rechargeTypeNotes .topicNote,
#features .topicNote{margin:3px 0;color:#000;font-size:11px;line-height:1.6}
#features .topicNote:where(.topicCards + .topicNote){margin-top:16px}
#features .topicCard{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;align-content:start;padding:24px 20px}
#features .topicCard .mpTechIndex{align-self:start;margin-top:4px}
#features .topicCard h3{margin:0;text-wrap:balance}
#features .topicCard p{grid-column:1/-1;text-wrap:var(--mobile-body-wrap,pretty)}
#features .topicCard sup{
display:inline-block;
margin-left:1px;
font-size:9px;
line-height:1;
vertical-align:super;
white-space:nowrap
}
.rechargeFeatureHead{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(180px,220px);
column-gap:24px;
align-items:end
}
.rechargeFeatureHead>.alkalineEyebrow,
.rechargeFeatureHead>h2,
.rechargeFeatureHead>p{grid-column:1}
.rechargeFeatureHead>h2,
.rechargeFeatureHead>p{max-width:none}
.rechargeFeatureMark{
grid-column:2;
grid-row:1/4;
display:flex;
justify-content:flex-end;
justify-self:end;
align-self:end
}
.rechargeFeatureMark img{
display:block;
width:min(220px,100%);
height:auto;
object-fit:contain
}
/* ==========================================================================
RECHARGE: 急速充電器・標準充電器比較
- 機能カードと6つの安心機能はすべてHTMLテキスト
- 画像差し替えは .chargerTypeHead img が対象
========================================================================== */
.chargerTypeGrid{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:20px;
width:100%;
max-width:var(--content-max,1180px);
margin:0 auto
}
.chargerTypePanel{
min-width:0;
padding:28px;
border:1px solid var(--line);
background:#fff
}
.chargerTypePanel.isRapid{padding:34px}
.chargerTypeHead{
display:grid;
grid-template-columns:minmax(0,1fr) 128px;
gap:20px;
align-items:center;
margin-bottom:24px
}
.chargerTypeHead>div{
display:grid;
grid-template-columns:minmax(0,3fr) minmax(0,7fr);
gap:8px 24px;
align-items:end
}
.chargerTypeHead .chargerTypeKicker,
.chargerTypeHead h3{grid-column:1}
.chargerTypeHead p:not(.chargerTypeKicker),
.chargerTypeHead strong{grid-column:2}
.chargerTypeHead img{width:100%;height:170px;object-fit:contain}
.chargerTypePanel.isRapid .chargerTypeHead{grid-template-columns:minmax(0,1fr) 180px}
.chargerTypePanel.isRapid .chargerTypeHead img{height:210px}
.chargerTypeKicker{
margin:0 0 8px;
color:var(--grade-hearing);
font-size:11px;
font-weight:700;
letter-spacing:.08em
}
.chargerTypePanel.isStandard .chargerTypeKicker{color:var(--ink)}
.chargerTypeHead h3{margin:0;font-size:28px;line-height:1.35}
.chargerTypeHead p:not(.chargerTypeKicker){margin:0;font-size:22px;font-weight:700;line-height:1.45}
.chargerTypeHead strong{display:block;margin:0;color:#4c5157;font-size:16px;font-weight:600;line-height:1.6}
.chargerFunctionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chargerFunctionGrid>div{
min-width:0;
padding:16px;
background:var(--paper)
}
.chargerTypePanel.isRapid .chargerFunctionGrid>div{border-top:0}
.chargerFunctionGrid h4{margin:0;color:#000;font-size:20px;font-weight:700;line-height:1.35}
.chargerTypePanel.isRapid .chargerFunctionGrid h4{color:var(--recharge-gold);font-weight:900;-webkit-text-stroke:0.35px currentColor}
.chargerFunctionGrid p{margin:8px 0 0;font-size:13px;line-height:var(--mobile-body-line-height,1.7)}
.chargerTypePanel>.topicNote{margin:16px 0 0;color:#000}
.chargerSafety{
width:100%;
margin:28px auto 0;
padding-top:0;
border-top:0;
background:transparent
}
.chargerSafety h3{margin:0 0 16px;font-size:22px;line-height:1.4}
.chargerSafety ol{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:0;
padding:0;
list-style:none
}
.chargerSafety li{
display:flex;
min-width:0;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:12px;
background:var(--grade-hearing)
}
.chargerSafety li span{color:#fff;font-size:12px;font-weight:700}
.chargerSafety li strong{min-width:0;color:#fff;font-size:14px;line-height:1.55;text-wrap:balance}
#features{padding-top:44px}
/* 防災のライトシリーズは、同じ行の商品カードの下端を揃える。 */
#lights .productCategoryGrid.isLineup{align-items:stretch}
#lights .productCategoryCard.isLineup{height:100%}
#quick .productCategoryCard.isLineup,
#standard .productCategoryCard.isLineup,
#lantern .productCategoryCard.isLineup,
#aluminium .productCategoryCard.isLineup,
#flashlight .productCategoryCard.isLineup{border:0}
#quick .productCategoryCard.isLineup:before,
#standard .productCategoryCard.isLineup:before,
#lantern .productCategoryCard.isLineup:before,
#aluminium .productCategoryCard.isLineup:before,
#flashlight .productCategoryCard.isLineup:before{content:none}
#quick .productCategoryCard.isLineup .productCategoryCopy,
#standard .productCategoryCard.isLineup .productCategoryCopy,
#lantern .productCategoryCard.isLineup .productCategoryCopy,
#aluminium .productCategoryCard.isLineup .productCategoryCopy,
#flashlight .productCategoryCard.isLineup .productCategoryCopy{
align-items:center;
border-top:0;
padding-top:18px;
text-align:center
}
#quick .productCategoryCard.isLineup .productCategoryModel,
#standard .productCategoryCard.isLineup .productCategoryModel,
#lantern .productCategoryCard.isLineup .productCategoryModel,
#aluminium .productCategoryCard.isLineup .productCategoryModel,
#flashlight .productCategoryCard.isLineup .productCategoryModel{
width:100%;
text-align:center
}
@media(max-width:1100px){
.cellJisNotice{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:820px){
.productCategorySection{padding:72px var(--mobile-content-gutter,20px) 32px}
.productCategorySection + .productCategorySection:where(:not(.rechargeTypeGrid > *)){padding-top:36px;padding-bottom:80px}
.productCategoryHead,
.productCategoryGrid,
.productCategoryGrid[data-count="2"]{width:100%}
.productCategoryGrid,
.productCategoryGrid[data-count="2"],
.productCategoryGrid[data-count="4"]{grid-template-columns:1fr}
.productCategoryCard{min-height:0}
.productCategoryImage,
.productCategoryImage button,
.productNoImage{min-height:220px}
.productCategoryImage img{max-width:min(100%,500px);max-height:300px}
.productCategoryImage.isPair img{max-width:min(42%,130px)}
.productCategoryCopy{padding:26px 22px 22px}
.productCategoryCopy h3{font-size:17px;overflow-wrap:anywhere}
.productCategoryCta{width:calc(100% + 44px);margin:16px -22px -22px}
.cellStoryBand,
.fdkTop .cellStory .cellStoryBand{font-size:17px;padding:14px 16px}
.cellStoryLead{padding:14px 18px}
.cellStoryLead p{font-size:15px}
.cellStoryBody{padding:16px 18px 18px;gap:14px 16px}
.cellStoryCapNum{font-size:14px}
.cellStoryPoints{gap:14px 16px}
.cellJisNotice{margin-top:22px;padding:22px 20px}
.rechargeTypeOverview{padding:72px var(--mobile-content-gutter,20px) 36px}
.rechargeTypeOverview>.productCategoryHead{margin-bottom:30px}
.rechargeTypeGrid{grid-template-columns:minmax(0,1fr)}
.rechargeTypeGrid .cellStoryBoard{border-right:1px solid var(--line)}
.rechargeTypeGrid .cellStoryBody{grid-template-columns:minmax(0,28fr) minmax(0,42fr) minmax(0,30fr)}
.rechargeTypeNotes{margin-top:28px}
.cellJisNoticeVisualGroup{grid-template-columns:repeat(2,minmax(0,1fr))}
.rechargeFeatureHead{grid-template-columns:minmax(0,1fr) 110px;column-gap:16px;align-items:start}
.rechargeFeatureHead>.alkalineEyebrow{grid-column:1;grid-row:1}
.rechargeFeatureHead>h2{grid-column:1;grid-row:2}
.rechargeFeatureHead>p{grid-column:1/-1;grid-row:3}
.rechargeFeatureMark{grid-row:1/3;margin-top:0;align-self:center}
.rechargeFeatureMark img{width:110px;max-width:100%}
.chargerTypeHead>div{display:block}
.chargerTypeHead p:not(.chargerTypeKicker){margin-top:10px;font-size:20px}
.chargerTypeHead strong{margin-top:8px;font-size:15px}
.chargerFunctionGrid h4{font-size:20px}
#features{padding-top:36px}
#features .topicCard{padding:24px 0}
.chargerSafety ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.cellJisNoticeVisualGroup{grid-template-columns:minmax(0,1fr)}
.cellJisNotice h3{font-size:18px}
.cellJisNoticeVisualGroup>h4{font-size:14px}
.cellJisNoticePanel{width:min(360px,100%);justify-self:center}
.cellJisNoticePanel+ .cellJisNoticePanel{margin-top:24px}
.cellJisNoticePanel+ .cellJisNoticePanel::before{top:-25px;left:calc(50% - 12px);border-top:16px solid var(--ink);border-bottom:0;border-left:12px solid transparent;border-right:12px solid transparent}
.cellJisNoticeCopy figure{justify-content:center}
.cellJisNoticeCopy figure>span{width:29px;height:100px}
.cellJisNoticeCopy figure img{top:35.5px;left:-35.5px;width:100px;height:29px}
.cellJisNoticeVisual{width:calc(100% - 12px);margin-left:24px}
.cellJisNotice>footer{margin-right:-12px}
.cellJisNoticePanel>p:last-child strong{font-size:32px}
.cellJisNoticePanel dd strong{font-size:22px}
}
@media(max-width:540px){
@supports (container-type:inline-size) and (font-size:1cqi){
:where(.productCategoryCard:has([data-zoom-label^="LEDアルミニライト "])) .productCategoryCopy{container-type:inline-size}
:where(.productCategoryCard:has([data-zoom-label^="LEDアルミニライト "])) .productCategoryCopy h3{font-size:clamp(13px,6.45cqi,17px);letter-spacing:-.065em;white-space:nowrap}
}
.productCategorySection>.topicInner{width:100%}
.cellTypeCompare{grid-template-columns:minmax(0,1fr)}
.productCategoryGrid.isLineup[data-count="2"]{grid-template-columns:1fr}
.cellStoryHead,
.cellStoryBody,
.cellStoryPoints{grid-template-columns:minmax(0,1fr)}
.cellStoryBand,
.fdkTop .cellStory .cellStoryBand{font-size:18px;padding:16px 16px}
.cellStoryLead,
.cellStoryBody{padding-left:16px;padding-right:16px}
.cellStoryJisArrow{width:28px;justify-self:start}
.cellStoryCapTable{margin-top:4px}
.cellStoryCapNum{font-size:15px}
.cellStoryVisual img{width:min(70%,210px);margin-inline:auto;object-position:center}
.rechargeTypeOverview{padding:56px var(--mobile-content-gutter,20px) 28px}
.rechargeFeatureHead{grid-template-columns:minmax(0,1fr) 80px;column-gap:12px}
.rechargeFeatureMark img{width:80px}
.rechargeTypeGrid{grid-template-columns:minmax(0,1fr)}
.rechargeTypeGrid .cellStoryHead,
.rechargeTypeGrid .cellStoryBody{grid-template-columns:minmax(0,1fr)}
.chargerTypePanel{padding:20px}
.chargerTypePanel.isRapid{padding:20px}
.chargerTypeHead{grid-template-columns:minmax(0,1fr) 88px;gap:14px}
.chargerTypePanel.isRapid .chargerTypeHead{grid-template-columns:minmax(0,1fr) 88px}
.chargerTypeHead>div{display:contents}
.chargerTypeHead .chargerTypeKicker{grid-column:1;grid-row:1;margin:0}
.chargerTypeHead h3{grid-column:1;grid-row:2;margin:0}
.chargerTypeHead>img{grid-column:2;grid-row:1/3}
.chargerTypeHead p:not(.chargerTypeKicker),.chargerTypeHead strong{grid-column:1/-1;margin:0}
.chargerTypeHead img{height:130px}
.chargerTypePanel.isRapid .chargerTypeHead img{height:130px}
.chargerTypeHead h3{font-size:24px}
.chargerTypeHead p:not(.chargerTypeKicker){font-size:18px}
.chargerTypeHead strong{font-size:14px}
.chargerFunctionGrid h4{font-size:18px}
.chargerFunctionGrid{grid-template-columns:minmax(0,1fr)}
#features{padding-top:36px}
.chargerSafety ol{grid-template-columns:minmax(0,1fr)}
.chargerSafety li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;padding:14px 8px;justify-items:center}
.chargerSafety li span,.chargerSafety li strong{font-size:clamp(11px,3.5vw,12px);line-height:1.55;font-weight:700;white-space:nowrap;text-wrap:nowrap}
}
@media(max-width:360px){
.cellJisNoticeVisual{width:100%;margin-left:12px}
.rechargeFeatureHead>h2{font-size:20px}
.productCategoryFacts>div{grid-template-columns:minmax(0,1fr);gap:2px 0}
.productCategoryCopy{padding:22px 16px 18px}
.productCategoryCta{width:calc(100% + 32px);margin:14px -16px -18px;padding:0 16px}
.cellStoryBand,
.fdkTop .cellStory .cellStoryBand{font-size:18px}
.cellStoryLead p{font-size:14px}
.cellStoryCapNum{font-size:15px}
}
@media(max-width:480px){
.productCategoryImage,
.productCategoryImage button,
.productNoImage{min-height:200px}
.productCategoryImage img{max-width:100%;max-height:280px}
}
@media(prefers-reduced-motion:reduce){
.productCategoryCta:before{transition:none}
}
@keyframes scroll-hint-appear {
0% {
transform: translateX(40px);
opacity: 0;
}
10% {
opacity: 1;
}
50%,
100% {
transform: translateX(-40px);
opacity: 0;
}
}
.scroll-hint-icon {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 60px);
box-sizing: border-box;
width: 120px;
height: auto;
border-radius: 5px;
transition: opacity .3s;
opacity: 0;
background: rgba(0, 0, 0, .7);
text-align: center;
padding: 20px 10px 10px 10px;
}
.scroll-hint-icon-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
pointer-events: none;
}
.scroll-hint-text {
font-size: 10px;
color: #FFF;
margin-top: 5px;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
opacity: .8;
}
.scroll-hint-icon:before {
display: inline-block;
width: 40px;
height: 40px;
color: #FFF;
vertical-align: middle;
text-align: center;
content: "";
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon:after {
content: "";
width: 34px;
height: 14px;
display: block;
position: absolute;
top: 10px;
left: 50%;
margin-left: -20px;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
opacity: 0;
transition-delay: 2.4s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
opacity: 1;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
animation: scroll-hint-appear 1.2s linear;
animation-iteration-count: 2;
}
.scroll-hint-icon-white {
background-color: #FFF;
box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.scroll-hint-icon-white:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon-white:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}
.scroll-hint-icon-white .scroll-hint-text {
color: #000;
}
.scroll-hint-shadow-wrap {
position: relative;
}
.scroll-hint-shadow-wrap::after {
content: "";
width: 20px;
height: 100%;
background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
right: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.scroll-hint-shadow-wrap::before {
content: "";
width: 20px;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
.scroll-hint-shadow-wrap.is-right-scrollable::after
{
opacity: 1;
visibility: visible;
}
.scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
.scroll-hint-shadow-wrap.is-left-scrollable::before
{
opacity: 1;
visibility: visible;
}
/* FDK restyle of vendored ScrollHint. Dark pill + white hand. No box-shadow. */
.scroll-hint-icon{
width:auto;
min-width:148px;
height:auto;
left:calc(50% - 80px);
top:calc(50% - 52px);
border-radius:6px;
background:rgb(32 33 36 / .32);
box-shadow:none;
padding:18px 22px 12px;
border:1px solid rgb(255 255 255 / .28)
}
.tableScrollFrame .scroll-hint-icon-wrap{
position:absolute;
inset:0;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
max-height:none;
pointer-events:none;
opacity:1;
visibility:visible;
transition:opacity .4s ease,visibility 0s
}
.tableScrollFrame .scroll-hint-icon-wrap.is-active .scroll-hint-icon,
.tableScrollFrame .scroll-hint-icon{
position:relative;
left:auto;
top:auto;
opacity:1;
border-radius:6px;
background:rgb(32 33 36 / .32)
}
.tableScrollFrame .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before,
.tableScrollFrame .scroll-hint-icon:before{
animation:fdk-scroll-hint-hand 1.4s ease-in-out infinite;
opacity:1
}
.tableScrollFrame.is-scrolled .scroll-hint-icon-wrap{
opacity:0;
visibility:hidden;
transition:opacity .4s ease,visibility 0s linear .4s
}
@media(min-width:821px){
.alkalineComparison .tableScrollFrame .scroll-hint-icon-wrap,
.compactSection .tableScrollFrame .scroll-hint-icon-wrap{visibility:hidden}
}
@keyframes fdk-scroll-hint-hand{
0%{transform:translateX(10px)}
50%{transform:translateX(-10px)}
100%{transform:translateX(10px)}
}
.scroll-hint-text{
margin-top:8px;
color:#fff;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:.1em;
white-space:nowrap
}
@media(prefers-reduced-motion:reduce){
.tableScrollFrame .scroll-hint-icon:before{animation:none}
}
/* Charger lineup headings above the product images. */
#quick .productCategoryCard.isLineup > .productCategoryCopy:first-child,
#standard .productCategoryCard.isLineup > .productCategoryCopy:first-child{padding-bottom:0}
#quick .productCategoryCard.isLineup > .productCategoryCopy:first-child h3,
#standard .productCategoryCard.isLineup > .productCategoryCopy:first-child h3{margin-bottom:0}
/* Keep recharge lineup spacing local to this page's charger sections. */
#quick.productCategorySection,
#standard.productCategorySection{padding-top:48px;padding-bottom:48px}
#quick > .productCategorySizeRow,
#standard > .productCategorySizeRow{margin-bottom:0}
#quick .productCategoryCard.isLineup > .productCategoryCopy:first-child,
#standard .productCategoryCard.isLineup > .productCategoryCopy:first-child{padding-top:0}
#compare[hidden] + #charging-times{padding-top:48px}
@media(max-width:820px){
#quick.productCategorySection,
#standard.productCategorySection{padding-top:36px;padding-bottom:36px}
#quick .productCategoryGrid.isLineup,
#standard .productCategoryGrid.isLineup{row-gap:32px}
#compare[hidden] + #charging-times{padding-top:36px}
}
/* Keep the NI-MH series title on one line above the mobile breakpoint. */
@media(min-width:821px){
#type-overview > .rechargeFeatureHead > h2{white-space:nowrap}
#type-overview > .rechargeFeatureHead > h2 > br{display:none}
}
/* Desktop recharge overview: give the copy room without forcing single lines. */
@media(min-width:821px){
#type-overview > .rechargeFeatureHead > h2 + p{margin:14px 0 0}
#type-overview .rechargeTypeGrid .cellStoryHead{grid-template-columns:minmax(0,1fr)}
#type-overview .rechargeTypeGrid .cellStoryLead p{
word-break:normal;
overflow-wrap:normal
}
}
/* Let rechargeable battery lineup descriptions use the full desktop content width. */
@media(min-width:821px){
#cells-standard > .mpInner > .mpSectionHead,
#cells-high > .mpInner > .mpSectionHead{width:100%;max-width:none}
}
/* Separate specialty battery uses while allowing natural wrapping. */
.grade-hearing .alkalineLead > .hearingUsageLine{display:block}
/* Light lineup names precede images, with the same spacing as chargers. */
:is(#lantern,#aluminium,#flashlight) .productCategoryCard.isLineup > .productCategoryCopy:first-child{padding-top:0;padding-bottom:0}
:is(#lantern,#aluminium,#flashlight) .productCategoryCard.isLineup > .productCategoryCopy:first-child h3{margin-bottom:0}
@media(max-width:820px){
:is(#lantern,#aluminium,#flashlight) .productCategoryGrid.isLineup{row-gap:32px}
}
/* The hint sits outside the scroller so it stays at the visible right edge. */
.categoryNavFrame{display:contents}
.categoryNavScrollHint{display:none;pointer-events:none}
@media(max-width:820px){
.categoryNavFrame{display:block;position:relative;width:100%;min-width:0}
.categoryNavFrame.has-scroll-right > .categoryNavScrollHint{
position:absolute;inset:0 0 0 auto;width:40px;
display:flex;align-items:center;justify-content:flex-end;padding-right:10px;
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92) 72%);
color:#7b7f84
}
.categoryNavScrollHint::after{
content:"";width:6px;height:6px;border-top:1px solid currentColor;
border-right:1px solid currentColor;transform:rotate(45deg)
}
}
/* Use the shared red treatment for the specialty hero lineup CTA. */
.compactCategoryTemplate.grade-hearing .alkalineHero .alkalinePrimaryLink{border-color:var(--red);background:var(--red)}
.compactCategoryTemplate.grade-hearing .alkalineHero .alkalinePrimaryLink:hover,
.compactCategoryTemplate.grade-hearing .alkalineHero .alkalinePrimaryLink:focus-visible{color:var(--red)}
/* Safety guide introduction uses the available desktop section width. */
@media(min-width:821px){
.supportTemplate #basic > .topicInner > .topicSectionHead{width:100%;max-width:none}
}
/* Shared support subfooter: same white surface and spacing on every page. */
.fdkTop .siteSupport{background:#fff;color:var(--ink);margin:0}
.fdkTop .siteSupport .alkalineEyebrow{color:var(--red)}
/* Slightly larger desktop main-navigation labels; mobile menu stays unchanged. */
@media(min-width:821px){
.fdkTop .fdkHeader > nav > a{font-size:13px}
}
/* Preserve hidden items even though .infoTickerText uses display:block. */
.infoBar .infoTickerText[hidden] { display: none !important; }