/* 制作見本：株式会社汐見精機（架空の精密部品メーカー）。紺と鋼の色、直線の構成。 */
:root {
  --navy: #0f2340;
  --navy-deep: #0a1a30;
  --steel: #4d5d70;
  --steel-light: #e8eef5;
  --line: #cbd5e1;
  --ink: #142033;
  --muted: #4a5668;
  --accent: #18698a;
  --accent-light: #7fd3ec;
  --white: #ffffff;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --latin: "Helvetica Neue", Arial, var(--sans);
  --banner: 7rem;
}
@media (min-width: 768px) { :root { --banner: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--banner) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 見本の帯（架空であることを常に示す） */
.sample-banner { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: 0.375rem 1rem 0; background: #fff8d6; border-bottom: 1px solid #b89a2e; color: #3d3300; font-size: 0.75rem; line-height: 1.5; }
.sample-banner__text { flex: 1 1 28rem; }
.sample-banner__links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.sample-banner__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (min-width: 768px) { .sample-banner { padding-top: 0; } }

.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }

/* ヘッダー */
.header { border-bottom: 1px solid var(--line); background: var(--white); }
.header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; text-decoration: none; }
.brand__name { display: grid; color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; }
.brand__en { color: var(--steel); font-family: var(--latin); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; }
.nav { display: flex; gap: 0.25rem; max-width: 100%; overflow-x: auto; }
.nav a { display: inline-flex; flex: none; align-items: center; min-height: 44px; padding-inline: 0.75rem; color: var(--ink); font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.nav a:hover { color: var(--accent); }
.nav .nav__contact { background: var(--navy); color: var(--white); }
.nav .nav__contact:hover { background: var(--accent); color: var(--white); }
@media (max-width: 767px) { .header__inner { padding-bottom: 0; } .nav { width: calc(100% + 1.5rem); max-width: none; margin-inline: -0.75rem; } }

/* ファーストビュー */
.eyebrow { color: var(--accent); font-family: var(--latin); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; }
.hero { position: relative; padding-block: 3rem 2.5rem; background-color: var(--navy); background-image: linear-gradient(rgba(127, 211, 236, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 211, 236, 0.07) 1px, transparent 1px); background-size: 32px 32px; color: var(--white); }
.hero .eyebrow { color: var(--accent-light); }
.hero__inner { display: grid; gap: 2rem; align-items: center; }
.hero h1 { margin-top: 1rem; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.35; }
.phrase { display: inline-block; }
.hero__lead { max-width: 34em; margin-top: 1.25rem; color: #d3dcea; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__visual img { width: min(100%, 34rem); margin-inline: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.5rem; border: 2px solid transparent; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; }
.button--primary { background: var(--accent-light); color: var(--navy-deep); }
.button--primary:hover { background: var(--white); }
.button--ghost { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.button--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.button--disabled { border-color: var(--line); background: var(--steel-light); color: var(--muted); cursor: not-allowed; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.stats div { padding: 1.25rem 0.5rem 0; }
.stats dt { color: #b6c3d6; font-size: 0.8125rem; }
.stats dd { font-size: 0.875rem; }
.stats__value { margin-right: 0.125rem; color: var(--white); font-family: var(--latin); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); font-weight: 700; letter-spacing: 0.02em; }
.stats__note { margin-top: 1rem; color: #b6c3d6; font-size: 0.75rem; }

/* 区画 */
.section { padding-block: 4.5rem; }
.section--steel { background: var(--steel-light); }
.section--light { background: #f6f8fb; }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy .eyebrow { color: var(--accent-light); }
.heading { max-width: 44rem; margin-bottom: 2.5rem; }
.heading h2, .recruit h2 { margin-top: 0.5rem; padding-left: 1rem; border-left: 4px solid var(--accent); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 800; line-height: 1.35; }
.heading__lead { margin-top: 1rem; color: var(--muted); }

.products { display: grid; gap: 1.5rem; }
.product { display: grid; align-content: start; gap: 0.75rem; padding: 1.75rem; border: 1px solid var(--line); border-top: 4px solid var(--navy); background: var(--white); }
.product img { width: 72px; height: 72px; }
.product h3 { font-size: 1.25rem; }
.product p { color: var(--muted); font-size: 0.9375rem; }
.product .product__tag { padding-top: 0.75rem; border-top: 1px dashed var(--line); color: var(--navy); font-family: var(--latin); font-size: 0.875rem; font-weight: 700; }
.materials { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--steel-light); font-size: 0.875rem; }
.materials__label { display: inline-block; margin-right: 0.75rem; font-weight: 800; }

.tech { display: grid; gap: 2rem; }
.tech__figures { display: grid; gap: 1rem; }
.tech__figures li { display: grid; gap: 0.25rem; padding: 1.5rem; background: var(--navy); color: var(--white); }
.tech__number { font-family: var(--latin); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; }
.tech__number small { margin-left: 0.25rem; font-size: 0.45em; }
.tech__label { color: #c8d3e3; font-size: 0.875rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
caption { padding-bottom: 0.75rem; font-weight: 800; text-align: left; }
.equipment { background: var(--white); font-size: 0.9375rem; }
.equipment th, .equipment td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.equipment thead th { background: var(--navy); color: var(--white); font-size: 0.8125rem; }
.equipment tbody th { font-weight: 700; }

.quality { display: grid; gap: 2.5rem; align-items: center; }
.steps { display: grid; gap: 1rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.steps__number { color: var(--accent); font-family: var(--latin); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.steps h3 { font-size: 1.0625rem; }
.steps p { color: var(--muted); font-size: 0.9375rem; }
.quality__visual { width: 100%; }

.profile { max-width: 52rem; background: var(--white); }
.profile th, .profile td { display: block; padding: 0.75rem 1rem; text-align: left; }
.profile th { padding-bottom: 0; color: var(--steel); font-size: 0.8125rem; }
.profile tr { border-bottom: 1px solid var(--line); }
.profile tr:first-child { border-top: 2px solid var(--navy); }

.recruit { display: grid; gap: 2rem; }
.recruit h2 { border-color: var(--accent-light); }
.recruit p { margin-top: 1rem; color: #d3dcea; }
.recruit__jobs { display: grid; gap: 1rem; }
.recruit__jobs li { padding: 1.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.25); }
.recruit__jobs h3 { font-size: 1.0625rem; }
.recruit__jobs p { margin-top: 0.25rem; font-size: 0.875rem; }

.contact__box { display: grid; gap: 1rem; justify-items: start; padding: 2rem; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: #f6f8fb; }
.contact__tel { display: grid; gap: 0.25rem; }
.contact__label { color: var(--steel); font-size: 0.8125rem; font-weight: 700; }
.contact__number { color: var(--navy); font-family: var(--latin); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 700; }
.contact__hours { color: var(--muted); font-size: 0.875rem; }
.contact__notice { color: #8a2f1f; font-weight: 700; }
.contact__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700; }

.footer { padding-block: 2.5rem; background: var(--navy-deep); color: #c8d3e3; font-size: 0.875rem; }
.footer__inner { display: grid; gap: 0.5rem; }
.footer__name { color: var(--white); font-size: 1.125rem; font-weight: 800; letter-spacing: 0.08em; }
.footer__name span { margin-left: 0.5rem; color: #c8d3e3; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; }
.site-credit { margin-top: 1rem; }
.site-credit a { color: var(--white); }
.footer__copy { color: #9fb0c6; }

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 1.5rem; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tech__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile th, .profile td { display: table-cell; padding: 1rem 1.25rem; }
  .profile th { width: 10rem; padding-bottom: 1rem; }
  .recruit__jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero { padding-block: 5rem 3.5rem; }
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
  .quality { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .recruit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
  .recruit__jobs { grid-template-columns: 1fr; }
  .section { padding-block: 6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .button, .product, .contact__box { border: 1px solid CanvasText; } }
@media print { .sample-banner { position: static; } .hero, .section--navy, .footer { background: none; color: #000; } }