/* ============================================================ EGM "OUR STRENGTHS" — page 635 (organical-recycle2) 専用CSS 全ルールが .egm-scope スコープ。.egm-scope 要素が無いページには無効果。 ============================================================ */ /* ===== EGM "OUR STRENGTHS" — scoped under .egm-scope ===== */ .egm-scope{ --c-bg:#faf8f3; --c-bg-deep:#eee8da; --c-paper:#fdfcf8; --c-paper-shade:#f4f1e8; --c-ink:#121a13; --c-forest:#0e3324; --c-green:#2d6a4f; --c-moss:#7c956b; --c-cream:#f3eedd; --c-sage:#dde4d2; --c-accent:#3f5b3a; --c-ash:#7a7973; --c-rule:rgba(18,26,19,0.12); --c-rule-soft:rgba(18,26,19,0.07); --f-jp:"Shippori Mincho","Noto Serif JP","Yu Mincho",serif; --f-latin:"EB Garamond","Cormorant Garamond",serif; --f-sans:"Noto Sans JP",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --s-page-x:72px; --s-page-x-nav:56px; --s-section-y:64px; --s-section-y-b:52px; --s-hero-y:52px; --s-footer-y:56px; --s-footer-y-b:44px; --s-block-mt:56px; --s-section-mt:48px; --d-numeral:150px; --d-numeral-col:240px; --d-display:84px; --d-product:80px; --d-footer:64px; --d-h1:56px; --d-h2:40px; --d-h3:32px; --d-h4:22px; --d-body:16px; --d-small:13px; --max-content:1280px; color:var(--c-ink); font-family:var(--f-jp); font-size:var(--d-body); line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* full-bleed: 親のコンテンツ幅を無視して画面全幅に広げる（中身は .container で中央寄せ） */ display:block; width:auto; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } @media (max-width:1023px){ .egm-scope{ --s-page-x:40px; --s-page-x-nav:32px; --s-section-y:52px; --s-section-y-b:40px; --s-hero-y:44px; --s-footer-y:44px; --s-block-mt:40px; --s-section-mt:32px; --d-numeral:112px; --d-numeral-col:180px; --d-display:64px; --d-product:64px; --d-footer:48px; --d-h1:42px; --d-h2:32px; --d-h3:26px; --d-h4:20px; }} @media (max-width:767px){ .egm-scope{ --s-page-x:24px; --s-page-x-nav:20px; --s-section-y:40px; --s-section-y-b:32px; --s-hero-y:32px; --s-footer-y:36px; --s-block-mt:32px; --s-section-mt:24px; --d-numeral:80px; --d-numeral-col:100px; --d-display:44px; --d-product:44px; --d-footer:36px; --d-h1:28px; --d-h2:24px; --d-h3:20px; --d-h4:17px; --d-body:15px; }} .egm-scope *, .egm-scope *::before, .egm-scope *::after{ box-sizing:border-box; } .egm-scope img, .egm-scope svg{ display:block; max-width:100%; } .egm-scope button{ font:inherit; cursor:pointer; } .egm-scope a{ color:inherit; text-decoration:none; } .egm-scope h1, .egm-scope h2, .egm-scope h3, .egm-scope h4, .egm-scope p, .egm-scope ol, .egm-scope ul{ margin:0; } .egm-scope ol, .egm-scope ul{ padding:0; list-style:none; } .egm-scope .container{ max-width:var(--max-content); margin:0 auto; } /* utilities */ .egm-scope .chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-forest); border:1px solid var(--c-rule); border-radius:999px; white-space:nowrap; } .egm-scope .chip::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--c-green); } .egm-scope .chip.is-dark{ color:var(--c-cream); border-color:rgba(243,238,221,0.35); } .egm-scope .chip.is-dark::before{ background:var(--c-moss); } .egm-scope .stamp{ display:inline-flex; align-items:center; padding:6px 14px; border:1.5px solid var(--c-accent); color:var(--c-accent); font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; transform:rotate(-3deg); border-radius:2px; } .egm-scope .stamp.is-rotate-pos{ transform:rotate(3deg); } .egm-scope .ref-line{ display:flex; justify-content:space-between; gap:16px; font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em; color:var(--c-ash); text-transform:uppercase; padding:8px 0; border-top:1px solid var(--c-rule-soft); border-bottom:1px solid var(--c-rule-soft); } .egm-scope .label-en{ font-family:var(--f-latin); font-style:italic; font-size:14px; color:var(--c-accent); letter-spacing:0.18em; text-transform:uppercase; } /* placeholder figures */ .egm-scope .fig{ position:relative; width:100%; overflow:hidden; background:#2a3d2a; aspect-ratio:16/9; } .egm-scope .fig::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--fig-a,#3a4f38),var(--fig-b,#2a3d2a)),repeating-linear-gradient(35deg,transparent 0 4px,rgba(255,255,255,0.04) 4px 5px); background-blend-mode:overlay; } .egm-scope .fig::after{ content:attr(data-caption); position:absolute; left:16px; bottom:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; color:rgba(255,255,255,0.78); text-transform:uppercase; } .egm-scope .fig--forest{ --fig-a:#3a4f38; --fig-b:#2a3d2a; } .egm-scope .fig--river{ --fig-a:#5b7a7c; --fig-b:#3f5a5c; } .egm-scope .fig--moss{ --fig-a:#6e8259; --fig-b:#536a44; } .egm-scope .fig--sand{ --fig-a:#a09678; --fig-b:#7d7355; } .egm-scope .fig--ink{ --fig-a:#2a2a26; --fig-b:#1a1a18; } .egm-scope .fig--morning{ --fig-a:#c2cdb4; --fig-b:#9bab8e; } .egm-scope .fig--tall{ aspect-ratio:4/5; } .egm-scope .fig--wide{ aspect-ratio:16/9; } .egm-scope .fig--strip{ aspect-ratio:16/5; } .egm-scope .fig--square{ aspect-ratio:1/1; } .egm-scope .fig--auto{ aspect-ratio:auto; height:100%; } @media (max-width:767px){ .egm-scope .fig--tall, .egm-scope .fig--square{ aspect-ratio:4/3; } .egm-scope .fig--strip{ aspect-ratio:16/7; } } /* hero */ .egm-scope.hero, .egm-scope .hero{ padding:var(--s-hero-y) var(--s-page-x) var(--s-section-y); background:var(--c-bg); } .egm-scope .hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; } .egm-scope .hero__copy{ display:flex; flex-direction:column; justify-content:space-between; } .egm-scope .hero__heading{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h1); line-height:1.4; color:var(--c-forest); margin-top:28px; letter-spacing:0.005em; text-wrap:balance; } .egm-scope .hero__heading .mark{ background:linear-gradient(180deg,transparent 70%,var(--c-sage) 70%); padding:0 2px; } .egm-scope .hero__lead{ font-family:var(--f-jp); font-size:17px; line-height:2; color:var(--c-ink); opacity:0.78; margin-top:28px; max-width:520px; } .egm-scope .hero__lead strong{ color:var(--c-green); font-weight:500; } .egm-scope .hero__chiplist{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:36px; } .egm-scope .hero__chiplist > div{ padding:16px 12px 14px; background:var(--c-bg-deep); color:var(--c-forest); border-radius:6px; } .egm-scope .hero__chiplist > div:first-child{ background:var(--c-forest); color:var(--c-cream); } .egm-scope .hero__chiplist .n{ font-family:var(--f-latin); font-style:italic; font-size:26px; line-height:1; } .egm-scope .hero__chiplist .l{ font-family:var(--f-sans); font-size:11px; line-height:1.5; margin-top:10px; opacity:0.9; } .egm-scope .hero__visual{ position:relative; min-height:480px; } .egm-scope .hero__visual .fig{ height:100%; min-height:480px; } .egm-scope .hero__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .egm-scope .hero__visual .overlay{ position:absolute; left:20px; right:20px; bottom:20px; padding:18px 22px; background:rgba(14,51,36,0.88); color:var(--c-cream); display:flex; justify-content:space-between; align-items:center; gap:16px; backdrop-filter:blur(8px); } .egm-scope .hero__visual .overlay span{ font-family:var(--f-sans); font-size:11px; letter-spacing:0.16em; } .egm-scope .hero__visual .overlay em{ font-family:var(--f-latin); font-style:italic; font-size:20px; } @media (max-width:1023px){ .egm-scope .hero__visual, .egm-scope .hero__visual .fig{ min-height:380px; } .egm-scope .hero__chiplist .n{ font-size:22px; } .egm-scope .hero__chiplist .l{ font-size:10px; } } @media (max-width:767px){ .egm-scope .hero__grid{ grid-template-columns:1fr; gap:32px; } .egm-scope .hero__visual{ order:-1; min-height:260px; } .egm-scope .hero__visual .fig{ min-height:260px; } .egm-scope .hero__chiplist{ grid-template-columns:repeat(5,1fr); gap:4px; margin-top:28px; } .egm-scope .hero__chiplist > div{ padding:10px 6px; } .egm-scope .hero__chiplist .n{ font-size:16px; } .egm-scope .hero__chiplist .l{ font-size:9px; margin-top:6px; line-height:1.35; } .egm-scope .hero__visual .overlay em{ font-size:16px; } } /* about */ .egm-scope .about{ padding:var(--s-section-y) var(--s-page-x); background:var(--c-bg-deep); } .egm-scope .about__grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start; } .egm-scope .about__title{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h2); line-height:1.4; color:var(--c-forest); margin-top:20px; } .egm-scope .about__formula{ margin-top:24px; font-family:var(--f-latin); font-style:italic; font-size:22px; color:var(--c-green); } .egm-scope .about__diptych{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; } .egm-scope .about__diptych > div{ padding:24px 20px; background:var(--c-bg); border-radius:8px; } .egm-scope .about__diptych em{ font-family:var(--f-latin); font-style:italic; font-size:26px; color:var(--c-green); display:block; } .egm-scope .about__diptych span{ font-family:var(--f-sans); font-size:13px; color:var(--c-ink); opacity:0.7; margin-top:8px; display:block; } .egm-scope .about__body p{ font-family:var(--f-jp); font-size:17px; line-height:2.05; color:var(--c-ink); margin-top:16px; text-wrap:pretty; } .egm-scope .about__body p:first-of-type{ margin-top:0; } .egm-scope .about__badge{ margin-top:28px; display:inline-flex; align-items:center; gap:14px; padding:14px 20px; background:var(--c-bg); border-radius:999px; border:1px solid var(--c-rule); } .egm-scope .about__badge .seal{ width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--c-green); color:var(--c-cream); display:flex; align-items:center; justify-content:center; font-family:var(--f-latin); font-style:italic; font-size:18px; } .egm-scope .about__badge label{ font-family:var(--f-sans); font-size:11px; color:var(--c-ink); opacity:0.6; letter-spacing:0.12em; text-transform:uppercase; display:block; } .egm-scope .about__badge p{ font-family:var(--f-jp); font-size:14px; color:var(--c-forest); margin-top:2px; } @media (max-width:1023px){ .egm-scope .about__grid{ grid-template-columns:1fr 1.6fr; gap:40px; } } @media (max-width:767px){ .egm-scope .about__grid{ grid-template-columns:1fr; gap:28px; } .egm-scope .about__diptych em{ font-size:22px; } .egm-scope .about__body p{ font-size:15px; line-height:1.95; } .egm-scope .about__badge p{ font-size:13px; } } /* five-intro */ .egm-scope .five-intro{ padding:var(--s-section-y) var(--s-page-x) var(--s-section-y-b); border-top:1px solid var(--c-rule); background:var(--c-paper); } .egm-scope .five-intro__grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; } .egm-scope .five-intro__title{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h2); line-height:1.3; color:var(--c-ink); margin-top:14px; } .egm-scope .five-intro__display{ font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:var(--d-display); line-height:0.9; color:var(--c-ink); margin-top:10px; letter-spacing:-0.01em; } .egm-scope .five-intro__lead{ font-family:var(--f-jp); font-size:16px; line-height:2; color:var(--c-ink); text-wrap:pretty; } .egm-scope .five-intro__list{ margin-top:24px; border-top:1px solid var(--c-rule); } .egm-scope .five-intro__list li{ display:grid; grid-template-columns:50px 1fr auto; gap:20px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--c-rule-soft); } .egm-scope .five-intro__list .n{ font-family:var(--f-latin); font-style:italic; font-size:26px; color:var(--c-ink); } .egm-scope .five-intro__list .t{ font-family:var(--f-jp); font-size:15px; color:var(--c-ink); } .egm-scope .five-intro__list .e{ font-family:var(--f-latin); font-style:italic; font-size:13px; color:var(--c-ash); letter-spacing:0.06em; } @media (max-width:1023px){ .egm-scope .five-intro__grid{ gap:40px; } } @media (max-width:767px){ .egm-scope .five-intro__grid{ grid-template-columns:1fr; gap:28px; } .egm-scope .five-intro__list li{ grid-template-columns:40px 1fr; } .egm-scope .five-intro__list .e{ grid-column:2; } } /* zero item */ .egm-scope .zero{ padding:var(--s-section-y) var(--s-page-x); border-top:1px solid var(--c-rule); background:var(--c-paper); } .egm-scope .zero__grid{ margin-top:36px; display:grid; grid-template-columns:var(--d-numeral-col) 1fr; gap:48px; align-items:start; } .egm-scope .zero__numeral{ position:relative; font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:var(--d-numeral); line-height:0.85; color:var(--c-ink); letter-spacing:-0.02em; } .egm-scope .zero__numeral::after{ content:"· ZERO ·"; position:absolute; top:14px; right:-24px; transform:rotate(-90deg); transform-origin:top right; font-family:var(--f-mono); font-size:9px; color:var(--c-ash); letter-spacing:0.3em; } .egm-scope .zero__metric{ margin-top:24px; padding-top:20px; border-top:1px solid var(--c-rule-soft); } .egm-scope .zero__metric > small{ font-family:var(--f-mono); font-size:10px; color:var(--c-ash); letter-spacing:0.2em; text-transform:uppercase; display:block; margin-bottom:10px; } .egm-scope .zero__metric .num{ display:flex; align-items:baseline; gap:6px; } .egm-scope .zero__metric .num strong{ font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:56px; color:var(--c-accent); line-height:0.9; } .egm-scope .zero__metric .num span{ font-family:var(--f-jp); font-size:15px; color:var(--c-ink); } .egm-scope .zero__metric > p{ font-family:var(--f-jp); font-size:12px; color:var(--c-ash); font-style:italic; margin-top:6px; } .egm-scope .zero__body{ min-width:0; } .egm-scope .zero__title{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h2); line-height:1.3; color:var(--c-ink); margin-top:8px; letter-spacing:0.005em; } .egm-scope .zero__sub{ font-family:var(--f-latin); font-style:italic; font-size:20px; color:var(--c-ash); margin-top:6px; } .egm-scope .zero__lead{ font-family:var(--f-jp); font-size:var(--d-body); line-height:2.05; color:var(--c-ink); margin-top:28px; text-wrap:pretty; } .egm-scope .zero__lead::first-letter{ font-family:var(--f-latin); font-style:italic; font-size:3em; color:var(--c-accent); float:left; line-height:0.85; padding-right:8px; padding-top:4px; } .egm-scope .zero__note{ margin-top:28px; background:var(--c-paper-shade); padding:20px 24px; border:1px solid var(--c-rule-soft); display:grid; grid-template-columns:80px 1fr; gap:20px; align-items:center; } .egm-scope .zero__note .nlabel{ text-align:center; padding-right:20px; border-right:1px solid var(--c-rule-soft); font-family:var(--f-mono); font-size:9px; color:var(--c-ash); letter-spacing:0.2em; text-transform:uppercase; } .egm-scope .zero__note .nlabel em{ font-family:var(--f-latin); font-style:italic; font-size:28px; color:var(--c-ink); display:block; margin-top:4px; letter-spacing:0; } .egm-scope .zero__note p{ font-family:var(--f-jp); font-size:13px; line-height:1.95; color:var(--c-ink); opacity:0.85; text-wrap:pretty; } .egm-scope .zero__figure{ margin-top:24px; } .egm-scope .zero__figure .fig{ aspect-ratio:16/5; } .egm-scope .zero__figure video{ display:block; width:100%; aspect-ratio:3/1; object-fit:cover; } .egm-scope .zero__figure--pdf{ background:#f5f1e3; display:flex; align-items:center; justify-content:center; padding:24px 32px; box-sizing:border-box; text-align:center; } .egm-scope .zero__figure--pdf a{ color:var(--c-forest); font-family:var(--f-jp); font-size:13px; line-height:1.6; text-decoration:underline; text-underline-offset:4px; transition:opacity .2s; } .egm-scope .zero__figure--pdf a:hover{ opacity:.7; } .egm-scope .zero__figure .cap{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--f-mono); font-size:10px; color:var(--c-ash); letter-spacing:0.15em; } .egm-scope .zero__figure .cap em{ font-family:var(--f-latin); font-style:italic; font-size:12px; letter-spacing:0; text-transform:none; } @media (max-width:1023px){ .egm-scope .zero__grid{ gap:36px; } .egm-scope .zero__metric .num strong{ font-size:44px; } } @media (max-width:767px){ .egm-scope .zero__grid{ grid-template-columns:1fr; gap:20px; margin-top:24px; } .egm-scope .zero__numeral::after{ display:none; } .egm-scope .zero__metric{ margin-top:14px; padding-top:14px; } .egm-scope .zero__title{ font-size:var(--d-h3); } .egm-scope .zero__sub{ font-size:16px; } .egm-scope .zero__lead{ margin-top:20px; line-height:1.95; } .egm-scope .zero__note{ grid-template-columns:60px 1fr; padding:14px 16px; gap:12px; } .egm-scope .zero__note .nlabel{ padding-right:8px; } .egm-scope .zero__figure .fig{ aspect-ratio:16/7; } } /* certified */ .egm-scope .certified{ padding:var(--s-section-y) var(--s-page-x); border-top:1px solid var(--c-rule); background:var(--c-paper-shade); } .egm-scope .certified__head{ margin-top:36px; display:grid; grid-template-columns:1fr; gap:48px; align-items:end; } .egm-scope .certified__title{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h2); line-height:1.35; color:var(--c-ink); margin-top:14px; } .egm-scope .certified__en{ font-family:var(--f-latin); font-style:italic; font-size:56px; color:var(--c-ink); line-height:0.95; letter-spacing:-0.01em; } .egm-scope .certified__tabs{ margin-top:40px; display:flex; gap:0; border-bottom:1px solid var(--c-rule); overflow-x:auto; } .egm-scope .certified__tab{ background:transparent; border:0; padding:16px 24px; font-family:var(--f-jp); font-size:14px; display:flex; align-items:center; gap:12px; color:var(--c-ink); opacity:0.65; transition:all .2s; white-space:nowrap; } .egm-scope .certified__tab .n{ font-family:var(--f-latin); font-style:italic; font-size:20px; } .egm-scope .certified__tab.is-active{ background:var(--c-forest); color:var(--c-cream); opacity:1; } .egm-scope .certified__panel{ background:var(--c-paper); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; min-height:280px; } .egm-scope .certified__panel[hidden]{ display:none; } .egm-scope .certified__panel img{ width:100%; height:auto; display:block; } .egm-scope .certified__panel h3{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h3); line-height:1.4; color:var(--c-ink); margin-top:10px; } .egm-scope .certified__panel p{ font-family:var(--f-jp); font-size:15px; line-height:2; color:var(--c-ink); opacity:0.85; margin-top:18px; text-wrap:pretty; } .egm-scope .certified__tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:6px; } .egm-scope .certified__tags span{ font-family:var(--f-mono); font-size:10px; padding:4px 10px; border:1px solid var(--c-rule); color:var(--c-ink); letter-spacing:0.1em; } .egm-scope .certified__metric{ padding:32px; background:var(--c-forest); color:var(--c-cream); border-radius:8px; text-align:center; } .egm-scope .certified__metric small{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; opacity:0.7; display:block; } .egm-scope .certified__metric .num{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:16px; } .egm-scope .certified__metric .num strong{ font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:88px; line-height:0.85; } .egm-scope .certified__metric .num span{ font-family:var(--f-jp); font-size:18px; } .egm-scope .certified__metric p{ font-family:var(--f-jp); font-size:13px; margin-top:8px; opacity:1; color:#fff; } .egm-scope .certified__nav{ margin-top:14px; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10px; color:var(--c-ash); letter-spacing:0.1em; opacity:0.6; } @media (max-width:1023px){ .egm-scope .certified__head{ grid-template-columns:1fr; gap:16px; } .egm-scope .certified__en{ font-size:44px; text-align:left; } .egm-scope .certified__panel{ padding:28px; gap:28px; } .egm-scope .certified__metric .num strong{ font-size:68px; } } @media (max-width:767px){ .egm-scope .certified__tab{ padding:12px 14px; font-size:12px; gap:8px; } .egm-scope .certified__tab .n{ font-size:16px; } .egm-scope .certified__panel{ grid-template-columns:1fr; padding:22px; gap:24px; min-height:0; } .egm-scope .certified__metric{ padding:22px; } .egm-scope .certified__metric .num strong{ font-size:56px; } } /* regional */ .egm-scope .regional{ padding:var(--s-section-y) var(--s-page-x); border-top:1px solid var(--c-rule); background:var(--c-paper); } .egm-scope .regional__head{ margin-top:36px; display:grid; grid-template-columns:1fr; gap:48px; align-items:end; } .egm-scope .regional__title{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h2); line-height:1.35; color:var(--c-ink); margin-top:14px; } .egm-scope .regional__en{ font-family:var(--f-latin); font-style:italic; font-size:56px; color:var(--c-ink); line-height:0.95; letter-spacing:-0.01em; } .egm-scope .regional__local{ margin-top:var(--s-section-mt); } .egm-scope .regional__local-grid{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:44px; } .egm-scope .regional__local h3{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h3); line-height:1.4; color:var(--c-ink); } .egm-scope .regional__local p{ font-family:var(--f-jp); font-size:15px; line-height:2.05; color:var(--c-ink); margin:18px 0; text-wrap:pretty; } .egm-scope .regional__stats{ border-top:1px solid var(--c-rule); } .egm-scope .regional__stats > div{ padding:24px 0; border-bottom:1px solid var(--c-rule); display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:baseline; } .egm-scope .regional__stats strong{ font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:56px; color:var(--c-ink); line-height:0.85; } .egm-scope .regional__stats em{ font-family:var(--f-jp); font-size:14px; color:var(--c-accent); margin-left:4px; font-style:normal; } .egm-scope .regional__stats .lbl{ font-family:var(--f-jp); font-size:13px; color:var(--c-ink); line-height:1.65; } .egm-scope .regional__stats .en{ font-family:var(--f-latin); font-style:italic; font-size:12px; color:var(--c-ash); margin-top:4px; display:block; } .egm-scope .regional__product{ margin-top:var(--s-block-mt); } .egm-scope .regional__product-grid{ margin-top:28px; display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:start; } .egm-scope .regional__brand{ font-family:var(--f-latin); font-weight:500; font-size:var(--d-product); line-height:0.95; color:var(--c-ink); letter-spacing:0.02em; } .egm-scope .regional__brand em{ font-style:italic; color:var(--c-accent); } .egm-scope .regional__brand + small{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--c-ash); letter-spacing:0.2em; margin-top:6px; } .egm-scope .regional__product h3{ font-family:var(--f-jp); font-weight:500; font-size:var(--d-h3); line-height:1.5; color:var(--c-ink); margin-top:28px; } .egm-scope .regional__product p{ font-family:var(--f-jp); font-size:15px; line-height:2.05; color:var(--c-ink); margin-top:16px; text-wrap:pretty; } .egm-scope .regional__stamps{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; } .egm-scope .regional__spec{ margin-top:12px; padding:14px 18px; border:1px solid var(--c-rule); background:var(--c-paper-shade); display:grid; grid-template-columns:1fr 1fr; gap:12px; font-family:var(--f-mono); font-size:10px; color:var(--c-ash); letter-spacing:0.15em; } .egm-scope .regional__spec strong{ color:var(--c-ink); font-family:var(--f-jp); font-size:13px; letter-spacing:0; font-weight:500; display:block; margin-top:4px; } @media (max-width:1023px){ .egm-scope .regional__head{ grid-template-columns:1fr; gap:16px; } .egm-scope .regional__en{ font-size:44px; } .egm-scope .regional__local-grid{ grid-template-columns:1fr; gap:32px; } .egm-scope .regional__product-grid{ grid-template-columns:1fr; gap:32px; } } @media (max-width:767px){ .egm-scope .regional__stats > div{ grid-template-columns:1fr; gap:8px; } .egm-scope .regional__stats strong{ font-size:44px; } .egm-scope .regional__spec{ grid-template-columns:1fr; } } /* footer */ .egm-scope .egm-footer{ padding:var(--s-footer-y) var(--s-page-x) var(--s-footer-y-b); border-top:1px solid var(--c-rule); background:var(--c-paper-shade); } .egm-scope .footer__grid{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; } .egm-scope .footer__display{ font-family:var(--f-latin); font-style:italic; font-weight:400; font-size:var(--d-footer); line-height:0.95; color:var(--c-ink); letter-spacing:-0.01em; } .egm-scope .footer__meta{ font-family:var(--f-jp); font-size:14px; color:var(--c-ink); line-height:1.85; text-align:right; } .egm-scope .footer__cta{ margin-top:20px; display:inline-block; background:var(--c-forest); color:var(--c-cream); padding:14px 24px; border:0; border-radius:999px; font-family:var(--f-sans); font-size:13px; letter-spacing:0.08em; } @media (max-width:767px){ .egm-scope .footer__grid{ grid-template-columns:1fr; gap:28px; } .egm-scope .footer__meta{ text-align:left; } .egm-scope .footer__display br{ display:none; } } /* === organical-recycle3 (page 647) 専用: 全体ゴシック化 === recycle2 (page-id-635) には body セレクタが一致しないため非適用。 */ .egm-scope.is-gothic{ --f-jp: "Noto Sans JP", system-ui, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --f-latin: "Noto Sans JP", system-ui, sans-serif; } /* ============================================================ Gutenberg ラッパー正規化（.egm-scope 内のみ） コアブロックが付与する余白/レイアウトを無効化し、上記デザイン余白を活かす ============================================================ */ /* この環境のグループは子を .wp-block-group__inner-container でラップする。 透過させ本来の子要素を親のgrid/flexコンテキストに参加させる */ .egm-scope .wp-block-group__inner-container{display:contents} .egm-scope :where(.is-layout-flow) > *{margin-block-start:0;margin-block-end:0} .egm-scope :where(.is-layout-constrained) > *{margin-block-start:0;margin-block-end:0} .egm-scope .wp-block-image{margin:0} .egm-scope figure.wp-block-image{margin:0} .egm-scope figure.wp-block-image img{width:100%;height:auto} .egm-scope .wp-block-video{margin:0} .egm-scope figure.wp-block-video{margin:0} /* hero visual: figure を高さいっぱいに */ .egm-scope .hero__visual .wp-block-image{position:absolute;inset:0;height:100%;margin:0} .egm-scope .hero__visual .wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* zero figure 内 video（コアVideoブロック） */ .egm-scope .zero__figure .wp-block-video video{display:block;width:100%;aspect-ratio:3/1;object-fit:cover} /* certified パネルラッパー: 初期表示は先頭のみ（JS前のチラつき防止） */ .egm-scope:not(.egm-js) .certified__panels .certified__panel:not(:first-child){display:none} .egm-scope .certified__panel[hidden]{display:none} /* JSが生成するタブボタン（button要素）の体裁は既存 .certified__tab を継承 */ /* ============================================================ JA版ページ内インライン