/* ============================================================
   JC High Technology — shared stylesheet
   ============================================================ */

/* ------------------------------------------------------------
   Licensed display fonts (from the original PSD design)
   ------------------------------------------------------------
   These are paid/proprietary fonts, not bundled with this project.
   The site currently falls back to Cormorant Garamond (Google
   Fonts) wherever these are unavailable, so everything works with
   no files present. To use the real fonts once licensed for web
   embedding, drop the webfont files (.woff2 preferred, .woff as a
   fallback) into assets/fonts/ using these exact filenames — no
   other change is needed, the @font-face blocks below and the
   --ff-en-hero / --ff-en-about / --ff-en-contact-title /
   --ff-en-arrow variables will pick them up automatically:

     assets/fonts/IvyOraText-Thin.woff2        (Greeting / Solution /
                                                 News / Business Guide
                                                 headings — index.html)
     assets/fonts/CormorantInfant-Light.woff2  (“About us” heading)
     assets/fonts/Ogg-Light.woff2              (“Contact” CTA heading)
     assets/fonts/IvyOraDisplay-Regular.woff2  (“>  Learn More” link)

   Most foundries sell these under a "webfont" or "@font-face"
   license tier separate from the desktop-use license — make sure
   the license you buy covers web embedding before adding files.
   ------------------------------------------------------------ */

@font-face {
  font-family: "IvyOraText-Thin";
  src: url("../fonts/IvyOraText-Thin.woff2") format("woff2"),
       url("../fonts/IvyOraText-Thin.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CormorantInfant-Light";
  src: url("../fonts/CormorantInfant-Light.woff2") format("woff2"),
       url("../fonts/CormorantInfant-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ogg-Light";
  src: url("../fonts/Ogg-Light.woff2") format("woff2"),
       url("../fonts/Ogg-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IvyOraDisplay-Regular";
  src: url("../fonts/IvyOraDisplay-Regular.woff2") format("woff2"),
       url("../fonts/IvyOraDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-white: #ffffff;
  --c-black: #0a0a0a;
  --c-nav: #28546d;
  --c-navy: #091152;
  --c-navy-deep: #000072;
  --c-text: #333333;
  --c-blue-accent: #0972c1;
  --c-dark: #242424;
  --c-gray: #555555;
  --c-bright-blue: #2538da;
  --c-bg-1: #f4f4f4;
  --c-bg-2: #e5ebee;
  --c-bg-3: #f5f5f5;
  --c-frame-gray: #a8abb4;

  --ff-jp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --ff-en-display: "Cormorant Garamond", Georgia, serif;
  --ff-en-hero: "IvyOraText-Thin", "Cormorant Garamond", Georgia, serif;
  --ff-en-about: "CormorantInfant-Light", "Cormorant Garamond", Georgia, serif;
  --ff-en-contact-title: "Ogg-Light", "Cormorant Garamond", Georgia, serif;
  --ff-en-arrow: "IvyOraDisplay-Regular", "Cormorant Garamond", Georgia, serif;
  --ff-en-sans: "Jost", "Futura", var(--ff-jp-sans);

  --container: 1320px;
  --header-h: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-jp-sans);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* The 24px gutter sits outside the design's 1320px content column, so the
   column itself measures exactly 1320px at wide viewports — every
   percentage in this sheet is derived from that width. */
.container {
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.pc-only { display: block; }
.sp-only { display: none; }

/* ------------------------------------------------------------
   Buttons / common parts
   ------------------------------------------------------------ */

.btn {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding: 17px 30px;
  background: var(--c-blue-accent);
  color: var(--c-white);
  font-size: 15px;
  letter-spacing: 0.2em;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  background: var(--c-navy);
  transform: translateY(-2px);
}

/* The PSDs set every inline ">" in MS PGothic Bold, which draws a tall, narrow
   stroked chevron — measured off the reference at 8x14px for a 20px run and
   11x17px for a 25px run, i.e. 0.4em x 0.7em with a 0.125em stroke. MS PGothic
   is Windows-only, so the shape is drawn as SVG to render identically. */
.arrow-chevron {
  flex: none;
  display: inline-block;
  width: 0.4em;
  height: 0.7em;
  overflow: visible;
  color: currentColor;
}

/* About's "詳しくみる" is the one button with a ringed arrow
   (楕円形1 32x33 + Arrow44 10x11), not a chevron. */
.btn-arrow {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-arrow svg { display: block; width: 10px; height: 11px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--ff-en-arrow);
  /* IvyOra Display is heavier on the page than Cormorant's 400 fallback;
     500 matches the reference stroke weight (IvyOra itself only ships 400,
     so this is a no-op wherever the real face is installed). */
  font-weight: 500;
  /* IvyOra Display's cap height is ~0.75em against Cormorant's ~0.63em, so the
     PSD's 20px sets 15px caps where Cormorant sets 12px. 24px with the tracking
     dropped reproduces the reference's 15px caps and 104px word width. */
  font-size: 24px;
  letter-spacing: 0;
  color: var(--c-white);
  background: var(--c-navy);
  height: 72px;
  padding: 0 88px 0 84px;
  line-height: 1;
  transition: opacity 0.25s ease;
}

.link-more:hover { opacity: 0.82; }

/* Chevron stays at the PSD's 8x14 regardless of the compensated label size. */
.link-more .arrow-chevron { width: 8px; height: 14px; }

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head__sub {
  display: block;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.45em;
  color: var(--c-gray);
  margin-bottom: 14px;
}

/* When the English title leads (business / company / news), the Japanese
   line sits underneath it — PSD order is EN first, JP second. */
.section-head__en + .section-head__sub {
  margin-top: 14px;
  margin-bottom: 0;
}

.section-head__en {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.5vw, 60px);
  color: var(--c-navy);
  letter-spacing: 0;
  line-height: 1.2;
}

/* Hero-scale section titles (index.html: Greeting / Solution / News / Business Guide) */
.section-head--hero .section-head__sub {
  font-size: 22px;
  letter-spacing: 0.16em;
  margin-top: 10px;
  margin-bottom: 0;
}

.section-head--hero .section-head__en {
  display: block;
  font-family: var(--ff-en-hero);
  font-weight: 300;
  font-size: clamp(56px, 10.4vw, 150px);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.section-head--light .section-head__sub,
.section-head--light .section-head__en { color: var(--c-white); }

.eyebrow {
  font-family: var(--ff-jp-serif);
  font-size: 22px;
  letter-spacing: 0.24em;
  color: var(--c-white);
  background: var(--c-navy);
  display: inline-block;
  padding: 10px 34px;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 12px rgba(9, 17, 82, 0.08);
}

.site-header__inner {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 clamp(32px, 10.5vw, 202px);
}

.site-header__logo img { height: 60px; width: auto; }

.header-right {
  display: flex;
  align-items: center;
  /* Reference: 150px of clear space between お知らせ and the CONTACT plate. */
  gap: 147px;
}

.gnav {
  display: flex;
  align-items: center;
}

.gnav__list {
  display: flex;
  /* Reference header: the three labels sit on a 209px pitch. */
  gap: 117px;
}

.gnav__list a {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--c-text);
  position: relative;
  padding-bottom: 4px;
}

.gnav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--c-navy);
  transition: width 0.25s ease;
}

.gnav__list a:hover::after,
.gnav__list a.is-current::after { width: 100%; }

.header-contact {
  background: var(--c-navy);
  color: var(--c-white);
  height: var(--header-h);
  width: 300px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-en-sans);
  font-weight: 500;
  /* Reference plate: CONTACT sets a 94x15 cap box. */
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  gap: 10px;
  margin-right: calc(-1 * clamp(32px, 10.5vw, 202px));
  transition: background 0.25s ease;
}

.header-contact:hover { background: var(--c-blue-accent); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  position: relative;
  cursor: pointer;
  z-index: 600;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-navy);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -9px; }
.nav-toggle span::after { top: 9px; }

.nav-toggle.is-active span { background: transparent; }
.nav-toggle.is-active span::before,
.nav-toggle.is-active span::after { background: var(--c-white); }

/* While the drawer is open the header band would otherwise sit as a pale
   stripe across the navy panel. */
body.is-nav-open .site-header { background: transparent; box-shadow: none; }
body.is-nav-open .site-header__logo { opacity: 0; pointer-events: none; }
.nav-toggle.is-active span::before { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-active span::after { transform: translateY(-9px) rotate(-45deg); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  background: var(--c-white);
  color: var(--c-nav);
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 66px 24px 39px;
}

.footer-nav a {
  position: relative;
  /* PSD: 62px of clear space either side of each label, with the dotted rule
     centred in the 124px gutter. */
  padding: 0 57px;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.28em;
  color: #28546d;
}

.footer-nav a:first-child { padding-left: 0; }
.footer-nav a:last-child { padding-right: 0; }

.footer-nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 7px;
  bottom: 1px;
  width: 1px;
  /* The reference rule is a sparse dotted line: a ~2px dot every 15px. */
  background-image: repeating-linear-gradient(to bottom, #b7b9bd 0 2px, transparent 2px 15px);
}

.footer-nav__en {
  display: block;
  font-family: var(--ff-jp-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: #28546d;
  margin-top: 6px;
  text-align: center;
}

.footer-logo {
  display: flex;
  justify-content: center;
  padding: 65px 0 0;
}

.footer-logo img { height: 60px; }

/* On the contact page the map runs straight into the footer and the PSD opens
   the gap to 99px instead of the 65px used under the CTA band. */
.page-contact .footer-logo { padding-top: 99px; }

.footer-bottom {
  background: #000000;
}

.footer-copy {
  text-align: center;
  /* PSD: SourceHanSansJP-Medium 16px in a 41px black bar. */
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--c-white);
  padding: 9px 0 8px;
  margin: 0;
}

/* ------------------------------------------------------------
   Page hero (inner pages)
   ------------------------------------------------------------ */

.breadcrumb {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { margin: 0 8px; }

/* ------------------------------------------------------------
   Section base
   ------------------------------------------------------------ */

section { position: relative; }

.section-pad { padding: 120px 0; }

/* ============================================================
   TOP PAGE
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  color: var(--c-white);
  background: #040000;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 6px 6px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hero__ja {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.hero__scroll {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  writing-mode: vertical-rl;
  color: var(--c-white);
  font-family: var(--ff-en-sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 60px;
  background: var(--c-white);
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Greeting / Solution shared "photo + shadow card" component */

.photo-card {
  position: relative;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow:
    inset 0 0 0 20px rgba(255, 255, 255, 0.59),
    0 25px 45px -20px rgba(9, 17, 82, 0.35);
  pointer-events: none;
}

.photo-card__img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 612 / 434;
  object-fit: cover;
  display: block;
}

/* The photo plate matches the height of the copy column beside it, as in the
   comp (photo 369 / copy 340). */
#rubber .split--rubber-top { align-items: stretch; }
#rubber .photo-card { height: 100%; }
#rubber .photo-card__img {
  aspect-ratio: auto;
  height: 100%;
  object-fit: cover;
  /* The supplied shot is wider than the plate, so the crop is biased right:
     the vials stay whole and the trim comes off the tyre, which reads as a
     normal photographic crop. */
  object-position: 72% center;
}

/* The comp's copy column ends on the last checklist line; the trailing row
   padding was making it 26px taller than the plate. */
#rubber .feature-list li:last-child { padding-bottom: 0; }

/* PSD 長方形30: a plain 661x490 window with no frame, the photo dropped in at
   1206x589 and offset (-93,-63). */
#semiconductor .photo-card {
  overflow: hidden;
  aspect-ratio: 661 / 490;
}

#semiconductor .photo-card::after { display: none; }

#semiconductor .photo-card__img {
  position: absolute;
  left: -14.1%;
  top: -12.9%;
  width: 182.5%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.split__text {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.split__text p + p { margin-top: 1.4em; }

/* PSD id1910: the opening line is Regular 20px like the body — only the
   three middle lines are Bold 22px. */
.split__lead {
  font-weight: 400;
  color: var(--c-text);
}

.split__strong {
  font-weight: 700;
  font-size: 22px;
  line-height: 40px;
  color: var(--c-text);
}

.greeting { padding: 140px 0 120px; background: var(--c-white); }
.solution {
  position: relative;
  padding: 140px 0;
  background:
    radial-gradient(rgba(9, 17, 82, 0.05) 1px, transparent 1px) 0 0 / 6px 6px,
    var(--c-bg-1);
  overflow: hidden;
}

.solution::before,
.solution::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-bg-2);
  z-index: 0;
}

/* Diagonal facets measured directly from the reference JPG (pixel-scanned
   color-boundary coordinates on the flat background strip behind the
   Solution section), expressed as % of this section's box. */
.solution::before {
  /* large diagonal fill covering the right portion */
  clip-path: polygon(74.6% 0%, 100% 0%, 100% 100%, 27.4% 100%);
}

.solution::after {
  /* small wedge poking in from the left edge */
  clip-path: polygon(0% 29.1%, 14% 56.8%, 0% 84.5%);
}

.solution .container { position: relative; z-index: 1; }
.solution .split {
  grid-template-columns: 632fr 612fr;
  gap: 70px;
  align-items: start;
}

.solution-block h3 {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  color: var(--c-navy);
  margin-bottom: 9px;
}

.solution-block + .solution-block { margin-top: 31px; }
.solution-block p {
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  /* 約物半角, as in the comp — without it 「」 and ： eat a full em each. */
  font-feature-settings: "palt" 1;
  color: #333333;
}

/* Business Guide */

.business {
  position: relative;
  padding: 130px 0;
  color: var(--c-white);
  background:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 6px 6px,
    url("../img/index/business-guide-bg.jpg") center/cover no-repeat;
  overflow: hidden;
}

.business .section-head {
  position: relative;
  min-height: 180px;
  margin-bottom: -40px;
}

.business .section-head__sub {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  color: var(--c-white);
  font-size: 26px;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.business .section-head__en {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 17, 82, 0) 0%, rgba(9, 17, 82, 0.32) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(9, 17, 82, 0.2));
  white-space: nowrap;
  line-height: 1;
}

.business-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8.64%;
}

.b-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 600 / 610;
  box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.4);
}

.b-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.b-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s ease;
}

.b-card__bg--rubber { object-position: center bottom; }
.b-card__bg--semi { object-position: 18% center; }

.b-card:hover .b-card__bg { transform: scale(1.05); }

.b-card__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 24.8%;
  z-index: 2;
  padding: 0 8%;
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.b-card__catch-box {
  align-self: flex-start;
  background: var(--c-white);
  /* PSD: 504x72 box, text ink inset 25 left / 21 top / 22 bottom. */
  padding: 20px 12px 21px;
}

.b-card__catch {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(18px, 2.27vw, 30px);
  /* Photoshop sets 約物半角 on this run: the six 「」 take half an em, which is
     why 19 glyphs measure 460px at 30px. "halt" reproduces that (Noto Serif JP
     ships halt but not palt: measured 480px vs 570px). */
  font-feature-settings: "halt" 1;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: #091152;
}

.b-card__badge {
  align-self: flex-start;
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 45px);
  line-height: 1;
  padding: 13px 22px;
}

.b-card__desc {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.75;
  letter-spacing: 0.07em;
  color: #333333;
}

.b-card__desc--light,
.b-card__spec {
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.92);
  text-stroke: 3px rgba(255, 255, 255, 0.92);
}

.b-card__desc--onphoto {
  max-width: 480px;
  color: #333333;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.92);
  text-stroke: 3px rgba(255, 255, 255, 0.92);
}

.b-card__desc--light {
  color: var(--c-navy);
  font-family: var(--ff-jp-serif);
  font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: 0.04em;
}

.b-card__spec {
  font-family: var(--ff-jp-serif);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 25px);
  line-height: 1.76;
  letter-spacing: 0.21em;
  /* 約物半角 again: the ・ in 耐候・耐薬品性 is half-width in the reference. */
  font-feature-settings: "halt" 1;
  color: #091152;
  text-align: center;
}

.b-card__linkbar {
  position: absolute;
  /* Flush with the photo inside the card's 20px frame — the reference has no
     gap between the bar and the frame on any of its three edges. */
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  background: var(--c-navy);
  color: var(--c-white);
  text-align: center;
  min-height: 77px;
  padding: 10px 8px;
  font-weight: 500;
  font-size: clamp(15px, 1.75vw, 25px);
  /* The PSD run reports letterSpacing 90, but the rendered reference measures a
     24.8px glyph pitch at 25px — i.e. no effective tracking. Measured wins. */
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: background 0.25s ease;
}

.b-card:hover .b-card__linkbar { background: var(--c-blue-accent); }

/* News */

.news { padding: 130px 0; background: var(--c-white); }

.news-list { }

.news-list { padding: 0 7.8%; }

.news-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 41px;
  align-items: baseline;
  padding: 0 0 17px;
  transition: opacity 0.2s ease;
}

.news-item:hover { opacity: 0.6; }

.news-item__date,
.news-item__title {
  padding-bottom: 16px;
  border-bottom: 1px solid #adadad;
}

.news-item__date {
  font-family: var(--ff-en-sans);
  font-size: 15px;
  color: var(--c-navy);
  letter-spacing: 0.05em;
}

.news-item__title {
  font-size: 20px;
  letter-spacing: 0.09em;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-more { text-align: center; margin-top: 60px; }

/* About / Company teaser */

.about {
  position: relative;
  height: 942px;
  overflow: hidden;
}

.about__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 57%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.about__body {
  position: absolute;
  left: 44%;
  top: 16.2%;
  right: calc((100% - min(var(--container), 100% - 48px)) / 2);
  bottom: 0;
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 124px 113px 116px;
}

.about__head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 30px;
  padding-bottom: 26px;
}

.about__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-navy-deep) 0, var(--c-navy-deep) 30px, #c9c9c9 30px, #c9c9c9 100%);
}

.about__head-en {
  font-family: var(--ff-en-about);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 44px);
  color: var(--c-navy);
}

.about__head-ja {
  font-family: var(--ff-jp-serif);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--c-text);
}

.about-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 36px;
}

.about-table th,
.about-table td {
  text-align: left;
  padding: 16px 0;
  border-bottom: 1px solid #e3e3e3;
  font-size: 18px;
  letter-spacing: 0.09em;
  line-height: 1.72;
  vertical-align: middle;
}

.about-table tr:last-child th,
.about-table tr:last-child td,
.about-table th[rowspan] {
  border-bottom: none;
}

.about-table th {
  width: 200px;
  color: var(--c-text);
  font-weight: 500;
}

.about-table td { color: var(--c-text); line-height: 1.7; }

.btn--sm { align-self: flex-start; margin-left: 200px; width: 273px; min-width: 0; height: 57px; padding: 0 0 0 26px; gap: 22px; font-size: 18px; line-height: 1; letter-spacing: 0.15em; }

/* Map + Contact CTA */

.map-section { position: relative; }

.map-section img { width: 100%; height: 579px; object-fit: cover; }

.cta {
  background: var(--c-navy);
  padding: 74px 24px;
  text-align: center;
}

.cta__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(704px, 100%);
  height: 104px;
  margin: 0 auto;
  background: var(--c-white);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  transition: opacity 0.25s ease;
}

.cta__box:hover { opacity: 0.82; }

.cta__en {
  font-family: var(--ff-en-contact-title);
  font-weight: 300;
  font-size: 35px;
  letter-spacing: 0.15em;
  color: var(--c-navy);
}

/* ============================================================
   NEWS (list / detail)
   ============================================================ */

.news-hero {
  position: relative;
  min-height: 600px;
  padding-top: var(--header-h);
  display: flex;
  align-items: flex-start;
  color: var(--c-white);
  background:
    radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 6px 6px,
    #040000 url("../img/news/hero-bg.jpg") center/cover no-repeat;
}

.news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.15) 100%);
}

.news-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 94px clamp(24px, 10.36vw, 199px) 0;
}

/* PSD: "News" Georgia 60px / "お知らせ" NotoSerifJP-Medium 35px */
.news-hero__title {
  font-size: clamp(34px, 3.13vw, 60px);
  margin-bottom: 0;
  padding-left: 32px;
}

.news-hero__title .en {
  font-family: Georgia, serif;
  letter-spacing: 0.06em;
  margin-right: 64px;
}

.news-hero__title .ja {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 0.583em;
  letter-spacing: 0.14em;
}

.news-hero__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-top: 28px;
}

.news-hero__tags span {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-white);
  color: #091152;
  /* PSD plates: 74px tall, text ink inset 31 left / 20 top. */
  padding: 20px 22px 24px 31px;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "halt" 1;
}

.page-title {
  text-align: center;
  margin-bottom: 60px;
}

.page-title__en {
  font-family: var(--ff-en-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--c-navy);
}

.page-title__sub {
  margin-top: 10px;
  font-family: var(--ff-jp-serif);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--c-gray);
}

/* News list page. Measured from the reference: the list sits 120px inside
   the 1320 column, the date is 20px and the title 23px on 0.15em tracking,
   and rows are divided by a 1px-on / 4px-off dotted rule (no rule after
   the last row). */
.news-list--page { padding: 0 9.1%; }

.news-list--page .news-item {
  grid-template-columns: 100px 1fr;
  gap: 85px;
  padding: 31px 0;
}

.news-list--page .news-item__date,
.news-list--page .news-item__title {
  padding-bottom: 0;
  border-bottom: none;
}

.news-list--page .news-item + .news-item {
  background-image: repeating-linear-gradient(to right, #181818 0 1px, transparent 1px 5px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

.news-list--page .news-item__date {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: #14212d;
}

.news-list--page .news-item__title {
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: #14212d;
}

.pagination__count {
  text-align: center;
  margin-top: 100px;
  font-family: var(--ff-en-sans);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #181818;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 19px;
  margin-top: 34px;
}

.pagination a,
.pagination span.current {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-en-sans);
  font-size: 20px;
  border: 1px solid #dcdcdc;
  color: #181818;
  transition: background 0.2s ease, color 0.2s ease;
}

.pagination a:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* The current page is plain type in the design — no ring, no fill. */
.pagination span.current {
  background: none;
  color: #181818;
  border-color: transparent;
}

.pagination .pagination__next svg {
  width: 12px;
  height: 20px;
  display: block;
}

.pagination .pagination__next:hover svg { stroke: var(--c-white); }

/* Article detail */

.article { padding: 100px 0 40px; }

.article-head {
  text-align: left;
  max-width: calc(var(--container) + 48px);
  margin: 0 auto 40px;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  gap: 30px;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 24px;
}

.article-head__date {
  font-family: var(--ff-en-sans);
  font-weight: 600;
  color: var(--c-blue-accent);
  font-size: 18px;
}

.article-head__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-dark);
}

.article-hero {
  max-width: calc(var(--container) + 48px);
  margin: 0 auto 40px;
  padding: 0 24px;
}

.article-hero img { width: 100%; height: auto; }

.article-body {
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
  font-size: 15px;
  color: var(--c-text);
}

.article-body p + p { margin-top: 1.6em; }

.article-split {
  max-width: calc(var(--container) + 48px);
  margin: 50px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.966fr 1fr;
  gap: 30px;
  align-items: flex-start;
}

.article-split img { width: 100%; }

.article-split .article-body { max-width: none; padding: 0; }

/* PSD: three 275x76 pills, 64px apart, centred. The chevrons sit near the
   outer edge of the BACK / NEXT pills while the label stays centred. */
.article-nav {
  margin: 60px auto 0;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 64px;
}

.article-nav a {
  position: relative;
  width: 275px;
  height: 76px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-family: var(--ff-en-sans);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--c-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.article-nav__arrow {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 13px;
  transform: translateY(-50%);
}

.article-nav__back .article-nav__arrow { left: 47px; }
.article-nav__next .article-nav__arrow { right: 47px; }

.article-nav a:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* ------------------------------------------------------------
   Mobile nav drawer
   ------------------------------------------------------------ */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--c-navy);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transform: translateX(100%);
  /* Kept out of the a11y tree and off the scroll extent while closed. */
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s ease, visibility 0s;
}

.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: clamp(17px, 4.6vw, 21px);
  letter-spacing: 0.14em;
  padding: 6px 24px;
}

.mobile-nav__en {
  font-family: var(--ff-en-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0.65;
}

.mobile-nav__cta {
  margin-top: 14px;
  padding: 16px 40px;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Stops the page behind the drawer from scrolling on touch. */
body.is-nav-open { overflow: hidden; }

/* ============================================================
   BUSINESS PAGE
   ============================================================ */

.biz-hero {
  position: relative;
  min-height: 600px;
  padding-top: var(--header-h);
  color: var(--c-white);
  overflow: hidden;
  background:
    radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 6px 6px,
    #040000 url("../img/business/hero-bg.jpg") center/cover no-repeat;
}

.biz-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 0, 0.35);
}

.biz-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 92px clamp(24px, 10.36vw, 199px) 0;
}

.biz-hero__title {
  display: flex;
  align-items: baseline;
  gap: 64px;
  margin-bottom: 0;
  padding-left: 33px;
}

.biz-hero__en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.13vw, 60px);
  letter-spacing: 0.06em;
}

.biz-hero__ja {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.82vw, 35px);
  letter-spacing: 0.14em;
}

.biz-hero__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  margin-top: 35px;
}

.biz-hero__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-white);
  color: #091152;
  /* PSD plates: 75px tall, text ink inset 31 left / 20 top. */
  padding: 20px 22px 25px 31px;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "halt" 1;
}

.biz-intro {
  padding: 134px 0 0;
  text-align: center;
}

.biz-intro .eyebrow-plain {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.5vw, 60px);
  color: var(--c-navy);
  display: block;
}

.biz-intro .eyebrow-plain small {
  display: block;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.45em;
  color: var(--c-gray);
  margin-top: 14px;
}

.biz-intro p {
  margin-top: 101px;
  font-family: var(--ff-jp-serif);
  /* PSD id2223: NotoSerifJP-Regular 25px on 60px leading, 0.09em, #091152.
     Both lines are near-identical widths (629 / 646 in the reference). */
  font-weight: 400;
  font-size: 25px;
  line-height: 60px;
  letter-spacing: 0.09em;
  /* Noto Serif JP ships halt, not palt */
  font-feature-settings: "halt" 1;
  color: #091152;
}

.biz-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.biz-section > .container { position: relative; z-index: 1; }

.biz-section--alt {
  background:
    radial-gradient(rgba(9, 17, 82, 0.05) 1px, transparent 1px) 0 0 / 6px 6px,
    var(--c-bg-1);
}

.biz-section--alt::before,
.biz-section--alt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--c-bg-2);
}

/* The facet is a rotated-square corner: the edge runs in from the top
   at -45°, folds back at the vertex (~979px down), then runs back out
   to the right edge — same geometry as .solution's facet, pixel-scanned
   directly on this (taller) section instead of stretching Solution's
   percentages, which skips the fold entirely. */
.biz-section--alt::before {
  clip-path: polygon(75% 0, 26.6% 979px, 100% 2207px, 100% 4000px, 100% 0);
}

.biz-section--alt::after {
  clip-path: polygon(0 300px, 14% 540px, 0 780px);
}

.biz-index {
  font-family: var(--ff-jp-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1da0c6;
  margin-bottom: 36px;
}

.biz-section h3.biz-title {
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: 50px;
  letter-spacing: 0.09em;
  color: var(--c-navy);
  margin-bottom: 18px;
  line-height: 1.32;
}

.biz-lead {
  font-family: var(--ff-jp-serif);
  font-size: 18px;
  color: var(--c-text);
  margin-bottom: 48px;
}

/* Reference row: 488px photo + 25px gutter + 812px copy column, and the
   photo frame is 488x366 (not the 612x434 used elsewhere). */
.split--rubber-top {
  align-items: start;
  gap: 25px;
  margin-bottom: 0;
}

.split--rubber-top .photo-card__img { aspect-ratio: 488 / 366; }

.split--semi-top {
  align-items: start;
}

@media (min-width: 1025px) {
  .split--rubber-top { grid-template-columns: 0.6fr 1fr; }
}

.feature-list {
  display: grid;
  grid-template-columns: 0.79fr 1fr;
  gap: 32px 31px;
  margin-bottom: 36px;
}

.feature-list--split {
  margin-bottom: 0;
  align-self: center;
}

.feature-list li {
  position: relative;
  padding-left: 32px;
  padding-bottom: 26px;
  font-family: var(--ff-jp-sans);
  font-weight: 500;
  font-size: 18px;
  color: #181818;
  line-height: 1.7;
}

.feature-list li:nth-child(-n+3) {
  border-bottom: 1px solid #e3e3e3;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 18px;
  height: 18px;
  border: 2px solid #10bdff;
  transform: rotate(45deg);
}

.biz-body, .biz-body p {
  font-size: 20px;
  line-height: 40px;
  /* The comp's longest line runs 1119px inside a 1121px measure; our Noto Sans
     is a shade wider, so the tracking is trimmed to keep it on one line. */
  letter-spacing: 0.08em;
  font-feature-settings: "palt" 1;
  color: #333333;
  margin-top: 1.4em;
}
.biz-body p:first-child { margin-top: 0; }

.biz-body strong {
  display: block;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: 0.09em;
  color: #091152;
  /* PSD: lead-in line to its body line measures 44px. */
  margin-bottom: 7px;
}

/* In the rubber section the three copy blocks are divided by a full-width
   hairline (measured #afafaf at y=1695 / 1860 in the reference). */
/* Copy measures 1121px inside the 1320px column, but the rules span all of it. */
#rubber .biz-body p { padding-right: 15.1%; }

#rubber .biz-body p + p {
  border-top: 1px solid #afafaf;
  margin-top: 40px;
  padding-top: 41px;
}

/* This column sits beside a photo of similar height (unlike the rubber
   section's checklist column), so the PSD uses smaller 18px body copy
   with more breathing room between the two bullet blocks. */
#semiconductor .biz-body,
#semiconductor .biz-body p {
  font-size: 18px;
  margin-top: 2em;
}

#semiconductor .biz-body strong {
  font-size: 25px;
}

.biz-block + .biz-block {
  margin-top: 230px;
}

.biz-block--shaded {
  position: relative;
  z-index: 1;
}

.biz-block--shaded::before,
.biz-block--shaded::after,
.biz-block__wedge {
  content: "";
  position: absolute;
  z-index: -1;
  top: -99px;
  bottom: -155px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.biz-block--shaded::before {
  background:
    radial-gradient(rgba(9, 17, 82, 0.05) 1px, transparent 1px) 0 0 / 6px 6px,
    var(--c-bg-1);
}

/* Same rotated-square corner as the Power Semiconductor section: the edge
   runs in at -45°, folds back at the vertex (940px down, x=25.5%) and runs
   back out to the right edge. Pixel-scanned off the reference above and
   below the card, where the background is unobstructed. */
.biz-block--shaded::after {
  background: var(--c-bg-2);
  clip-path: polygon(74.5% 0, 25.5% 940px, 100% 2370px, 100% 4000px, 100% 0);
}

.biz-block__wedge {
  background: var(--c-bg-2);
  clip-path: polygon(0% 29.1%, 14% 56.8%, 0% 84.5%);
}

.spec-card {
  position: relative;
  color: var(--c-white);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 30px 60px -24px rgba(9, 17, 82, 0.4);
}

.spec-card { overflow: hidden; }

.spec-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec-card--light .spec-card__bg {
  inset: auto;
  left: -15.3%;
  top: -1.4%;
  width: 116.5%;
  /* beats the global img { max-width: 100% }, which was squeezing it back */
  max-width: none;
  height: auto;
  object-fit: fill;
}

/* dark variant (e.g. PIB card): translucent navy wash over a photo, light text */
.spec-card--dark::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 24, 38, 0.62) 0%, rgba(3, 24, 38, 0.32) 50%, rgba(3, 24, 38, 0.06) 100%);
}

.spec-card--dark .spec-card__title { color: #acecff; }

/* light variant (e.g. Regular Butyl Rubber card): the product photo is the
   background as-is — the studio backdrop supplies the pale grey field. */
.spec-card--light {
  color: var(--c-text);
}

.spec-card--light .spec-card__title { color: var(--c-navy); }

.spec-card__body {
  position: relative;
  z-index: 2;
  padding: 66px 67px 63px 103px;
}

.spec-card--dark .spec-card__body { padding: 125px 67px 60px 103px; }

.spec-card__row + .spec-card__row { margin-top: 26px; }

.spec-card__divider {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 41px 0 40px;
}

.spec-card--light .spec-card__divider { border-top-color: #e3e3e3; }

.spec-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.spec-card__top-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.spec-card__title {
  font-family: var(--ff-en-display);
  font-weight: 400;
  font-size: 45px;
}

.spec-card__label {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.16em;
}

.spec-btn-group { display: flex; gap: 19px; }

.spec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 202px;
  height: 53px;
  background: var(--c-white);
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
  font-family: var(--ff-jp-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* PDF list popup (SDS / 仕様書 / 技術資料 buttons) */
.spec-dropdown { position: relative; }

.spec-dropdown > summary.spec-btn {
  cursor: pointer;
  list-style: none;
}

.spec-dropdown > summary.spec-btn::-webkit-details-marker { display: none; }

.spec-dropdown[open] > summary.spec-btn {
  background: var(--c-navy);
  color: var(--c-white);
}

.spec-dropdown__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: 220px;
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  box-shadow: 0 16px 32px -12px rgba(9, 17, 82, 0.35);
}

.spec-btn-group .spec-dropdown:last-child .spec-dropdown__panel {
  left: auto;
  right: 0;
}

.spec-dropdown__title {
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-family: var(--ff-jp-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--c-navy);
  border-bottom: 1px solid var(--c-navy);
}

.spec-dropdown__list {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}

.spec-dropdown__list li { font-size: 13px; }

.spec-dropdown__list a {
  display: block;
  padding: 8px 16px;
  color: var(--c-text);
  transition: background 0.2s ease;
}

.spec-dropdown__list a:hover { background: var(--c-bg-1); }

.spec-dropdown__list .is-disabled {
  display: block;
  padding: 8px 16px;
  color: #b7b9bd;
  cursor: default;
}

.spec-card__codes { font-size: 20px; line-height: 1.55; letter-spacing: 0.12em; }

.spec-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 440px;
}

.spec-groups > div + div {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.spec-card--dark .spec-groups > div + div { border-top-color: rgba(255, 255, 255, 0.2); }

.spec-groups h4 {
  font-family: var(--ff-jp-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 0.12em;
  color: #091152;
  margin-bottom: 0;
}

.spec-groups h4 small {
  display: block;
  font: inherit;
  letter-spacing: 0;
  color: inherit;
}

.spec-card--light .spec-groups p {
  font-size: 18px;
  line-height: 31px;
  letter-spacing: 0.12em;
  color: #313233;
  /* PSD: 40px from the grade line to the first code. */
  margin-top: 9px;
}

.spec-card--light .spec-groups > div + div {
  margin-top: 11px;
  padding-top: 20px;
}

#semiconductor .spec-groups h4 {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: 0.09em;
  color: #091152;
  /* PSD: 46px from a heading line to its first list line. */
  margin-bottom: 7px;
}

#semiconductor .spec-groups p {
  font-size: 18px;
  line-height: 40px;
  letter-spacing: 0.09em;
  font-feature-settings: "palt" 1;
  color: #333333;
}

#semiconductor .spec-groups > div + div {
  /* PSD: 114px from the last list line to the next heading. */
  margin-top: 30px;
  padding-top: 31px;
}

#semiconductor .spec-groups {
  max-width: none;
}

.spec-groups p {
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.92;
}

.spec-card + .spec-card { margin-top: 24px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-hero {
  position: relative;
  min-height: 600px;
  padding-top: var(--header-h);
  display: flex;
  align-items: flex-start;
  color: var(--c-white);
  background-color: #040000;
  /* PSD places the photo at 2747x691, offset (-241,-10), under a 3px black
     dot mesh that covers the whole hero. */
  background-image:
    radial-gradient(circle at 0.5px 0.5px, #000 0.5px, transparent 0.5px),
    url("../img/contact/hero-bg.jpg");
  background-size: 3px 3px, 143.1% auto;
  background-position: 0 0, 29.1% 11%;
  background-repeat: repeat, no-repeat;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Alpha solved per-column against the source photo: 0.87 at the left edge,
     easing to a flat 0.32 from ~58% across. */
  background: linear-gradient(90deg,
    rgba(4, 0, 0, 0.872) 0%,
    rgba(4, 0, 0, 0.754) 16.7%,
    rgba(4, 0, 0, 0.611) 32.3%,
    rgba(4, 0, 0, 0.429) 47.9%,
    rgba(4, 0, 0, 0.326) 58.3%,
    rgba(4, 0, 0, 0.323) 100%);
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  z-index: 2;
  /* The comp insets the hero column 199px from the edge — further out than the
     1320px body column. A centred fixed column only hits that at exactly
     1920px wide, so the inset tracks the viewport like the header's does. */
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 94px clamp(24px, 10.36vw, 199px) 0;
}

.contact-hero__en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.13vw, 60px);
  letter-spacing: 0.06em;
  margin-left: 32px;
}

.contact-hero__ja {
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.82vw, 35px);
  letter-spacing: 0.14em;
  /* Every comp sets a 68-72px gap between the English and Japanese titles. */
  margin-left: 64px;
}

.contact-hero__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* PSD: 74px plates at y335 and y437 -> 28px between them. */
  gap: 28px;
  margin-top: 33px;
}

.contact-hero__badge {
  display: inline-block;
  background: var(--c-white);
  color: #091152;
  font-family: var(--ff-jp-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.56vw, 30px);
  letter-spacing: 0.05em;
  font-feature-settings: "halt" 1;
  line-height: 1;
  /* PSD plates: 355x74 and 498x74, text ink inset 33 left / 20 top. */
  padding: 20px 22px 24px 32px;
}

.section-head__lead {
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  color: #555555;
  letter-spacing: 0.09em;
  font-feature-settings: "palt" 1;
  margin-top: 86px;
  margin-bottom: 0;
}

/* PSD: "Contact Form" ink starts 138px below the hero; the form's last plate
   (the submit button) ends 136px above the map. */
.contact-form-section { padding: 121px 0 136px; background: var(--c-white); }

/* The row block is NOT centred in the PSD: it runs x405..1278, i.e. 105px in
   from the 1320 column's left edge. */
.contact-form { margin-top: 170px; }

/* PSD: EN cap-line 738..783, JP sub 828..843. */
.contact-form-section .section-head__en + .section-head__sub { margin-top: 26px; }

.cf-row {
  /* The row block is NOT centred in the PSD: it runs x405..1278, i.e. 105px in
     from the 1320 column's left edge. */
  width: 873px;
  max-width: 100%;
  margin-left: 105px;
  display: grid;
  /* 必須 plate | label | field, matching the PSD's 405 / 473 / 655 columns. */
  grid-template-columns: 48px 202px 1fr;
  align-items: center;
  min-height: 52px;
  margin-bottom: 12px;
}

.cf-label {
  display: contents;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: #333333;
}

.cf-label .cf-label__text {
  padding-left: 20px;
  font-feature-settings: "palt" 1;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.15em;
  color: #333333;
}

.cf-required {
  width: 48px;
  height: 25px;
  flex-shrink: 0;
}

.cf-input,
.cf-textarea {
  width: 100%;
  border: 1px solid #b0b0b0;
  border-radius: 0;
  padding: 0 26px;
  height: 52px;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
  font-family: var(--ff-jp-sans);
  color: var(--c-text);
  background: var(--c-white);
  transition: border-color 0.2s ease;
}

.cf-input::placeholder,
.cf-textarea::placeholder { color: #8e8e8e; }

.cf-input:focus,
.cf-textarea:focus {
  outline: none;
  border-color: var(--c-blue-accent);
}

.cf-textarea { height: 244px; padding: 16px 26px; line-height: 2; resize: none; }

.cf-row--area { align-items: stretch; }
.cf-row--area .cf-required,
.cf-row--area .cf-label__text { align-self: center; }

/* PSD: textarea bottom 1642 -> privacy heading ink 1763. */
.cf-privacy { margin-top: 112px; text-align: center; }

.cf-privacy__title {
  font-family: var(--ff-jp-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
  color: #333333;
  margin: 0 0 55px;
}

/* PSD: a plain 1052x173 scrolling block — no border, no fill, just a 10px
   navy scrollbar on the right. */
.cf-privacy__box {
  width: 1052px;
  max-width: 100%;
  margin: 0 auto;
  height: 173px;
  overflow-y: scroll;
  text-align: left;
  /* PSD: text column 440..1433, then 49px of clear space, then the 10px bar. */
  padding: 0 49px 0 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.05em;
  color: #333333;
  font-feature-settings: "palt" 1;
  background: transparent;
}

.cf-privacy__box::-webkit-scrollbar { width: 10px; }
.cf-privacy__box::-webkit-scrollbar-track { background: #dbdbdb; }
.cf-privacy__box::-webkit-scrollbar-thumb { background: var(--c-navy); }

.cf-privacy__box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  margin: 0;
}

.cf-privacy__box p { margin: 0; }

.cf-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  /* PSD: box bottom 2026 -> checkbox top 2083. */
  margin-top: 60px;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
  color: #333333;
}

.cf-agree input {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid #3f3f3f;
  background: var(--c-white);
  cursor: pointer;
}

.cf-agree input:checked { background: var(--c-navy); border-color: var(--c-navy); }

.cf-submit { text-align: center; margin-top: 59px; }

.cf-submit .btn { width: 377px; min-width: 0; height: 81px; padding: 0; gap: 20px; font-weight: 700; font-size: 20px; letter-spacing: 0.05em; background: var(--c-navy); }
.cf-submit .btn:hover { background: var(--c-blue-accent); }

/* Layout values lifted out of business.html's inline styles so the
   responsive tiers below can reach them. */
.biz-body--gap { margin-top: 100px; margin-bottom: 170px; }
.biz-section h3.biz-title.biz-title--sm { font-size: 30px; }
.biz-lead--narrow { max-width: 67%; margin-bottom: 80px; }
.biz-body--measure { margin-top: 2em; max-width: 860px; }
.biz-block--ruled { margin-top: 69px; border-top: 1px solid var(--c-navy); padding-top: 55px; }
.spec-groups { margin-top: 10px; }

/* Designed line breaks from the comps. They only hold at the measure the
   comp was drawn at, so they collapse once the column narrows. */
.br-pc { display: inline; }

@media (max-width: 1280px) {
  .br-pc { display: none; }
}

/* Avoid a single orphaned character on the last line of a heading.
   text-wrap-STYLE is used rather than the `text-wrap` shorthand: the shorthand
   also resets text-wrap-mode, which would cancel `white-space: nowrap` on the
   card catch line and the news titles. Unsupported browsers ignore it. */
h1, h2, h3, h4,
.b-card__catch,
.b-card__spec,
.b-card__badge,
.section-head__sub,
.contact-hero__badge,
.company-hero__badge,
.biz-hero__badge,
.news-hero__tags span,
.article-head__title,
.news-item__title,
.cf-privacy__box h3 {
  text-wrap-style: pretty;
  /* Japanese has no spaces, so the browser will otherwise break mid-phrase and
     strand a single character. auto-phrase breaks on phrase boundaries. */
  word-break: auto-phrase;
}

/* Same treatment for running copy. */
.biz-body p,
.biz-lead p,
.solution-block p,
.split__text p,
.b-card__desc,
.company-about__lead p,
.article-body p,
.cf-privacy__box p,
.spec-groups p,
.section-head__lead,
.biz-intro p,
.company-about__lead,
.hero__ja,
.news-item__title {
  word-break: auto-phrase;
}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   The comps are drawn on a 1920px canvas with a 1320px content
   column, so everything above 1440 renders at design size. Below
   that the column shrinks on its own; these blocks handle what
   cannot shrink by itself — fixed plate widths, absolute panels,
   the header nav, and the vertical rhythm.

   Tiers: 1440 / 1280 / 1024 (nav collapses) / 768 / 560 / 400
   ============================================================ */

/* ---------- 1440: laptop ---------- */
@media (max-width: 1440px) {
  .site-header__inner { padding: 0 clamp(24px, 10.36vw, 199px); }
  .header-contact { margin-right: calc(-1 * clamp(24px, 10.36vw, 199px)); }
  /* The three labels + CONTACT plate have to clear the logo; these vw values
     are the widest that still fit at each end of the tier. */
  .header-right { gap: clamp(30px, 10.2vw, 147px); }
  .gnav__list { gap: clamp(30px, 8.1vw, 117px); }

  .news-hero__inner,
  .biz-hero__inner,
  .contact-hero__inner,
  .company-hero__inner { padding-left: clamp(24px, 10.36vw, 199px); padding-right: clamp(24px, 10.36vw, 199px); }

  /* Contact's form column is offset 105px inside the grid in the comp;
     once the column narrows the offset has to go or the fields clip. */
  .cf-row { width: 100%; max-width: 873px; margin-left: min(105px, 6.5vw); }

  /* Keeps 「通さない」…「壊れない」 on one line as the card plate narrows. */
  .b-card__catch { font-size: clamp(21px, calc(2.4vw - 2.65px), 30px); }

  .about__body { padding: clamp(48px, 8.6vw, 124px) clamp(32px, 7.8vw, 113px) clamp(44px, 8vw, 116px); }
  .btn--sm { margin-left: clamp(0px, 13.9vw, 200px); }
}

/* ---------- 1280: the design's header gaps stop fitting ---------- */
@media (max-width: 1280px) {
  .header-right { gap: clamp(28px, 5vw, 100px); }
  .gnav__list { gap: clamp(28px, 4.6vw, 90px); }
}

/* ---------- 1180: the header band gives up the hero inset ---------- */
@media (max-width: 1180px) {
  .site-header__inner { padding: 0 clamp(24px, 3.4vw, 199px); }
  .header-contact { margin-right: calc(-1 * clamp(24px, 3.4vw, 199px)); }
}

/* ---------- 1280: small laptop ---------- */
@media (max-width: 1280px) {
  .section-pad { padding: 96px 0; }
  .biz-section h3.biz-title { font-size: 44px; }
  .greeting { padding: 110px 0 96px; }
  .solution { padding: 110px 0; }
  .business { padding: 104px 0; }
  .news { padding: 104px 0; }

  .news-hero,
  .biz-hero,
  .contact-hero,
  .company-hero { min-height: 520px; }

  .hero { min-height: 560px; }

  /* The photo and panel are still absolutely positioned at this tier, so the
     section keeps an explicit height — just a shorter one. */
  .about { height: 820px; }
  .about__body { top: 12%; }
  .about-table th { width: 168px; }

  .map-section img { height: 460px; }

  .article { padding: 80px 0 40px; }
  .article-nav { gap: 40px; }

  .contact-form-section { padding: 96px 0 104px; }
  .contact-form { margin-top: 120px; }
  .cf-privacy { margin-top: 88px; }

  .spec-card__body { padding: 52px 48px 50px 64px; }
  .spec-card--dark .spec-card__body { padding: 88px 48px 48px 64px; }
  .biz-body--gap { margin-top: 72px; margin-bottom: 110px; }
  .biz-lead--narrow { max-width: 80%; margin-bottom: 60px; }
  .biz-block--ruled { margin-top: 52px; padding-top: 44px; }

  .footer-nav a { padding: 0 clamp(18px, 4.4vw, 57px); }
}

/* ---------- 1024: nav collapses to the drawer ---------- */
@media (max-width: 1024px) {
  .pc-only { display: none; }
  .biz-section h3.biz-title { font-size: 38px; }
  .sp-only { display: block; }
  .nav-toggle { display: block; }

  :root { --header-h: 76px; }
  .site-header__inner { padding: 0 clamp(20px, 4vw, 40px); }
  .site-header__logo img { height: 44px; }

  .section-pad { padding: 80px 0; }
  .greeting { padding: 88px 0 76px; }
  .solution { padding: 88px 0; }
  .business { padding: 84px 0; }
  .news { padding: 84px 0; }

  .hero { min-height: 520px; }
  .news-hero,
  .biz-hero,
  .contact-hero,
  .company-hero { min-height: 440px; }
  .news-hero__inner,
  .biz-hero__inner,
  .contact-hero__inner { padding-top: var(--header-h); padding-bottom: 40px; }
  .news-hero,
  .biz-hero { display: flex; align-items: center; }
  .news-hero__title,
  .biz-hero__title { padding-left: 0; }
  .news-hero__tags,
  .biz-hero__badges { margin-top: 24px; gap: 14px; }
  /* The comp's 2747x691 placement only makes sense at the 1920x600 hero;
     below that the photo has to cover instead. */
  .contact-hero {
    align-items: center;
    background-size: 3px 3px, cover;
    background-position: 0 0, center;
  }
  .contact-hero::after {
    background: linear-gradient(100deg, rgba(4, 0, 0, 0.86) 0%, rgba(4, 0, 0, 0.52) 60%, rgba(4, 0, 0, 0.34) 100%);
  }
  .contact-hero__inner { padding-top: var(--header-h); }
  .contact-hero__en { margin-left: 0; }
  .contact-hero__ja { margin-left: 24px; }

  /* Two-column splits collapse; the photo leads. */
  .split,
  .split--rubber-top,
  .split--semi-top,
  .solution .split { grid-template-columns: 1fr; gap: 36px; }
  .split .photo-card { order: -1; }
  .business-grid { gap: 5.5%; }
  /* The catch line is set nowrap for the comp's 603px plate. */
  .b-card__catch { white-space: normal; font-size: clamp(16px, 2vw, 21px); }
  .b-card__catch-box { padding: 14px 16px; }
  .b-card__panel { padding: 0 7%; gap: 18px; }
  .b-card__badge { font-size: clamp(22px, 3vw, 32px); padding: 10px 16px; }
  .b-card__desc, .b-card__desc--onphoto { font-size: 15px; max-width: 100%; }
  .b-card__spec { font-size: 17px; letter-spacing: 0.12em; }
  .b-card__linkbar { font-size: 16px; min-height: 62px; gap: 14px; }
  .feature-list { grid-template-columns: 1fr; gap: 0; }
  .feature-list li:nth-child(-n+3) { border-bottom: 1px solid #e3e3e3; }
  .feature-list li:last-child { border-bottom: none; }

  /* Decorative diagonals are drawn from absolute px offsets that only
     read correctly at desktop proportions. */
  .solution::before,
  .solution::after,
  .biz-section--alt::before,
  .biz-section--alt::after,
  .biz-block--shaded::after { display: none; }

  .about { height: auto; overflow: visible; }
  .about__photo { position: static; width: 100%; height: 320px; }
  .about__body {
    position: static;
    width: auto;
    margin: 0;
    padding: 56px clamp(20px, 4vw, 40px) 48px;
  }
  .btn--sm { align-self: center; margin-left: 0; }

  .map-section img { height: 380px; }
  .cta__box { height: 88px; }
  .cta__en { font-size: 28px; }

  .news-list { padding: 0; }
  .news-list--page { padding: 0; }
  .news-item,
  .news-list--page .news-item { grid-template-columns: 108px 1fr; gap: 24px; }
  .news-list--page .news-item__date,
  .news-list--page .news-item__title { font-size: 16px; letter-spacing: 0.06em; }

  .article-split { grid-template-columns: 1fr; gap: 28px; }
  .article-nav { gap: 24px; }
  .article-nav a { width: min(240px, 30vw); height: 64px; }
  .article-nav__back .article-nav__arrow { left: 28px; }
  .article-nav__next .article-nav__arrow { right: 28px; }

  .contact-form-section { padding: 80px 0 88px; }
  .contact-form { margin-top: 72px; }
  .cf-row { margin-left: 0; max-width: 100%; }
  .cf-privacy { margin-top: 64px; }
  .cf-privacy__box { padding-right: 28px; }

  .spec-card__body { padding: 40px 32px; }
  .spec-card--dark .spec-card__body { padding: 48px 32px 40px; }
  /* The title row and the document buttons stop sharing a line. */
  .spec-card__top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .spec-btn-group { flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%; gap: 12px; }
  .spec-dropdown { flex: 0 1 auto; width: auto; }
  .spec-btn { width: auto; min-width: 140px; }
  .biz-body--gap { margin-top: 56px; margin-bottom: 72px; }
  .biz-lead--narrow { max-width: 100%; margin-bottom: 48px; }
  .biz-block--ruled { margin-top: 40px; padding-top: 34px; }
  .biz-section h3.biz-title.biz-title--sm { font-size: 26px; }

  .footer-nav { padding: 48px 20px 32px; }
  .footer-nav a { padding: 0 clamp(14px, 3.2vw, 34px); }
}

/* ---------- 768: tablet portrait ---------- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .biz-section h3.biz-title { font-size: 30px; }

  .section-pad { padding: 64px 0; }
  .greeting { padding: 64px 0 56px; }
  .solution { padding: 64px 0; }
  .business { padding: 64px 0; }
  .news { padding: 64px 0; }

  .hero { min-height: 460px; }
  .news-hero,
  .biz-hero,
  .contact-hero,
  .company-hero { min-height: 380px; }

  .section-head { margin-bottom: 36px; }
  .section-head__sub { font-size: 13px; letter-spacing: 0.28em; }
  /* The display titles are sized off the 1920 canvas; "Business Guide" is the
     longest and needs the floor dropped to stay on one line. */
  .section-head--hero .section-head__en { font-size: clamp(38px, 11vw, 150px); }
  .section-head--hero .section-head__sub { font-size: 13px; letter-spacing: 0.22em; }
  .business .section-head { min-height: 120px; margin-bottom: -20px; }
  .section-head__lead { font-size: 15px; letter-spacing: 0.04em; margin-top: 40px; }

  .split__text { font-size: 16px; }
  .split__strong { font-size: 18px; line-height: 32px; }
  .solution-block h3 { font-size: 18px; }

  /* The card catch copy is set nowrap for the comp's 603px plate. */
  .business-grid { grid-template-columns: 1fr; gap: 40px; }
  .b-card__catch { font-size: 19px; }
  .b-card__catch-box { padding: 12px 14px; }
  .b-card__panel { top: 18%; padding: 0 6%; gap: 14px; }
  .b-card__badge { font-size: 24px; padding: 8px 14px; }
  .b-card__desc,
  .b-card__desc--onphoto { font-size: 14px; line-height: 1.6; max-width: 100%; }
  .b-card__spec { font-size: 15px; letter-spacing: 0.1em; }
  .b-card__linkbar { left: 12px; right: 12px; bottom: 12px; min-height: 54px; font-size: 14px; gap: 12px; }
  .b-card::after { box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.5); }
  .b-card__linkbar .arrow-chevron { width: 7px; height: 12px; }

  .news-item,
  .news-list--page .news-item { grid-template-columns: 1fr; gap: 6px; padding-bottom: 14px; }
  .news-item__title,
  .news-list--page .news-item__title { white-space: normal; font-size: 15px; letter-spacing: 0.04em; line-height: 1.7; }
  .news-item__date,
  .news-list--page .news-item__date { font-size: 13px; }

  .about__photo { height: 240px; }
  .about__body { margin: 0; padding: 44px 20px 40px; }
  .about-table th,
  .about-table td { display: block; width: auto; font-size: 15px; padding: 0; letter-spacing: 0.04em; }
  .about-table th { font-weight: 700; padding-top: 16px; }
  .about-table td { padding: 4px 0 16px; }
  .btn--sm { align-self: center; width: 100%; max-width: 273px; padding: 0; justify-content: center; }

  .map-section img { height: 260px; }
  .cta__box { width: 100%; height: 76px; }
  .cta__en { font-size: 22px; }
  .link-more { height: 60px; padding: 0 40px; font-size: 19px; }

  .article { padding: 56px 0 32px; }
  .article-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 20px; padding-right: 20px; }
  .article-head__date { font-size: 15px; }
  .article-head__title { font-size: 17px; line-height: 1.7; }
  .article-hero,
  .article-body,
  .article-split { padding-left: 20px; padding-right: 20px; }
  .article-body p { font-size: 15px; }
  .article-nav { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .article-nav a { width: min(160px, 42vw); height: 54px; font-size: 13px; letter-spacing: 0.12em; }
  .article-nav__back .article-nav__arrow { left: 16px; }
  .article-nav__next .article-nav__arrow { right: 16px; }

  /* Contact form: label above field. */
  .cf-row { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; row-gap: 8px; align-items: center; min-height: 0; margin-bottom: 22px; }
  .cf-label .cf-label__text { padding-left: 12px; font-size: 15px; letter-spacing: 0.06em; }
  .cf-row > .cf-input,
  .cf-row > .cf-textarea { grid-column: 1 / -1; }
  .cf-input { height: 48px; padding: 0 14px; font-size: 15px; }
  .cf-textarea { height: 180px; padding: 12px 14px; font-size: 15px; }
  .cf-row--area { align-items: center; }
  .cf-privacy__title { font-size: 16px; margin-bottom: 24px; }
  .cf-privacy__box { height: 200px; font-size: 14px; line-height: 26px; padding-right: 20px; }
  .cf-agree { gap: 14px; font-size: 15px; margin-top: 32px; }
  .cf-agree input { width: 22px; height: 22px; }
  .cf-submit { margin-top: 36px; }
  .cf-submit .btn { width: 100%; max-width: 377px; height: 64px; font-size: 16px; }

  .biz-body--gap { margin-top: 40px; margin-bottom: 56px; }
  .biz-lead--narrow { margin-bottom: 36px; }
  .biz-section h3.biz-title.biz-title--sm { font-size: 22px; }
  .spec-card__title { font-size: 28px; }
  .spec-card__label { font-size: 18px; }
  .spec-card__codes { font-size: 15px; }
  .spec-btn { height: 48px; min-width: 132px; }

  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 4px 0; padding: 36px 20px 24px; }
  .footer-nav a,
  .footer-nav a:first-child,
  .footer-nav a:last-child { padding: 8px 16px; font-size: 14px; letter-spacing: 0.14em; }
  .footer-nav a:not(:last-child)::after { display: none; }
  .footer-nav__en { font-size: 11px; margin-top: 3px; }
  .footer-logo img { height: 44px; }
  .page-contact .footer-logo { padding-top: 56px; }
  .footer-logo { padding-top: 56px; }
  .footer-copy { font-size: 12px; padding: 12px 16px; }
}

/* ---------- 560: phone ---------- */
@media (max-width: 560px) {
  .hero { min-height: 420px; }
  .biz-section h3.biz-title { font-size: 25px; }
  .news-hero,
  .biz-hero,
  .contact-hero,
  .company-hero { min-height: 320px; }

  .contact-hero__ja,
  .news-hero__title .ja,
  .biz-hero__ja { display: block; margin-left: 0; margin-top: 6px; }
  .contact-hero__badge,
  .news-hero__tags span,
  .biz-hero__badge,
  .company-hero__badge { font-size: 15px; padding: 9px 12px; }
  .contact-hero__badges { gap: 10px; margin-top: 20px; }

  /* Give the copy block more room than the comp's 600:610 plate allows. */
  .b-card { aspect-ratio: 5 / 6; }
  .b-card__panel { top: 13%; gap: 10px; }
  .b-card__catch { font-size: 16px; }
  .b-card__badge { font-size: 19px; }
  .b-card__spec { font-size: 13px; }
  .b-card__linkbar { font-size: 12px; gap: 8px; padding: 8px; }

  .article-nav { gap: 8px; flex-wrap: nowrap; }
  .article-nav a { width: min(118px, 31vw); height: 48px; font-size: 11px; letter-spacing: 0.08em; }
  .article-nav__back .article-nav__arrow { left: 10px; }
  .article-nav__next .article-nav__arrow { right: 10px; }
  .map-section img { height: 200px; }
  .cta__en { font-size: 18px; letter-spacing: 0.1em; }
  .link-more { padding: 0 28px; font-size: 17px; }

  .cf-row { grid-template-columns: 44px 1fr; }
  .cf-required { width: 44px; height: 23px; }

  .spec-btn-group { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; }
  .spec-dropdown { flex: 0 0 auto; width: 100%; max-width: 202px; }
  .spec-btn { width: 100%; min-width: 0; max-width: 202px; }
}

/* ---------- 400: small phone ---------- */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .section-head__en { font-size: 30px; }
  .section-head--hero .section-head__sub { font-size: 12px; letter-spacing: 0.02em; }
  .b-card__linkbar { font-size: 11px; letter-spacing: 0; }
  .footer-nav a,
  .footer-nav a:first-child,
  .footer-nav a:last-child { padding: 8px 10px; font-size: 13px; }
}