/* =============================================================
   株式会社エス・エス・ティ（SST）公式サイト
   1ページ完結。節へのリンクはアンカー（#理念 など）で、
   作り直す前のURLをそのまま引き継いでいます。

   見た目の考え方:
     ・地は墨。写真と白い文字を主役にして、色数を絞ります
     ・差し色は1色だけ。SST様のマークに添えられていた緑（#5f8774）
     ・英字の大きなラベルと通し番号で、図面のような規律を出します
   緑は3段階を用途で使い分けます。混ぜると読めない文字が生まれます。
     --green        … 線・塗り・飾り（マークの色そのまま）
     --green-bright … 墨地の上の文字・数字（墨地で 8.6:1）
     --green-deep   … 白地の上の文字・リンク（白地で 5.6:1）
   ============================================================= */

:root {
  --ink: #0f1214;
  --ink-2: #161a1d;
  --ink-3: #1f2529;
  --paper: #f3f4f1;
  --white: #ffffff;
  --text: #22272b;
  --text-mute: #5b6369;
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-mute: rgba(255, 255, 255, 0.64);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: #dcdfd9;

  --green: #5f8774;
  --green-bright: #93c4ad;
  --green-deep: #46695a;

  --w: 1160px;
  --header-h: 64px;
  --radius: 4px;   /* 角は立てぎみに。丸いとやわらかく見えすぎます */
  --t: 0.25s ease;

  --ff: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic UI", sans-serif;
  /* 英字の見出し用。細身で字間を開けて使います */
  --ff-en: "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
}

/* 社名の書体。作り直す前のサイトと同じ「XANO明朝U32」です。
   106字しか入っていないので、社名以外には使わないでください（assets/fonts/README.md） */
@font-face {
  font-family: "XANO Mincho U32";
  src: url(/assets/fonts/xano-mincho-u32-subset.woff) format("woff");
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--ff);
  /* 本文は18px。元のサイトの大きさに合わせています。小さい字は使いません
     （2026-09-19 ユーザー指示）。このファイルの最小は15pxです */
  font-size: 18px;
  line-height: 1.9;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* height:auto を付けないと、HTMLのheight属性がそのまま高さになり、
   aspect-ratio が効きません */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.4; }
li { list-style: none; }

.container { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 22px; }
.u-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.u-pc { display: none; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--green); color: #fff; transition: top var(--t);
}
.skip:focus { top: 0; }

/* ---- ヘッダー ----------------------------------------------
   元のサイトと同じ、白い帯に右寄せのメニューです */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--line-light);
}
.header__inner { display: flex; align-items: center; height: 100%; max-width: none; }
.nav { margin-left: auto; }
.nav__list { display: none; }
.nav__list a {
  position: relative; display: block; padding: 8px 0;
  color: var(--text); font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
  transition: color var(--t);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav__list a:hover, .nav__list a.is-current { color: var(--green-deep); }
.nav__list a:hover::after, .nav__list a.is-current::after { transform: scaleX(1); }

.nav__toggle {
  display: grid; gap: 6px; width: 48px; height: 48px;
  padding: 14px 10px; border: 0; background: transparent; cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); transition: transform var(--t), opacity var(--t); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
  max-height: 0; overflow: hidden; background: #fff;
  transition: max-height 0.35s ease;
}
.drawer.is-open { max-height: 80vh; border-bottom: 1px solid var(--line-light); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.drawer ul { padding: 8px 22px 24px; }
.drawer a {
  display: block; padding: 17px 0; color: var(--text); text-decoration: none;
  font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--line-light);
}

/* ---- ファーストビュー --------------------------------------
   元のサイトのトップを写した構図です。
     ・社名は左。筆文字で、白い字に濃い縁取り
     ・文言は中央に1行
     ・マークは右下
     ・下端に緑の帯（次の「理念」の緑へつながります）
   夜の映像は明るい所と暗い所の差が大きいので、字の縁取りと影で読ませます */
.hero {
  position: relative; display: grid; align-items: center;
  min-height: 100svh; padding-top: var(--header-h);
  background: var(--ink); color: #fff; overflow: hidden;
  border-bottom: 8px solid var(--green);
}
.hero__media { position: absolute; inset: var(--header-h) 0 0 0; background: url(/assets/img/hero/hero-poster.jpg?v=20260919) center / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__video:not([src]) { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(8, 12, 20, 0.22); }
/* 寸法は、元のサイトを幅1360pxで実測した値を vw に直したものです */
.hero__inner { position: relative; width: 100%; padding-inline: 4.8vw; }
.hero__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.85em;
  font-family: "XANO Mincho U32", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400; line-height: 1.3; color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  /* 元のサイトは、細い明朝を白く太らせ、その外に濃い茶色のふちを付けていました。
     text-stroke はこの書体だと角にとげが出るので、影を輪の形に重ねて同じ見た目を作っています。
     先に書いた影ほど手前に描かれます。白い輪（太らせる）→ 茶色の輪（ふち）→ ぼかした影、の順です */
  text-shadow:
    0.030em 0.000em 0 #fff, 0.028em 0.011em 0 #fff, 0.021em 0.021em 0 #fff, 0.011em 0.028em 0 #fff, 0.000em 0.030em 0 #fff, -0.011em 0.028em 0 #fff, -0.021em 0.021em 0 #fff, -0.028em 0.011em 0 #fff, -0.030em 0.000em 0 #fff, -0.028em -0.011em 0 #fff, -0.021em -0.021em 0 #fff, -0.011em -0.028em 0 #fff, -0.000em -0.030em 0 #fff, 0.011em -0.028em 0 #fff, 0.021em -0.021em 0 #fff, 0.028em -0.011em 0 #fff,
    0.075em 0.000em 0 #3a2a22, 0.069em 0.029em 0 #3a2a22, 0.053em 0.053em 0 #3a2a22, 0.029em 0.069em 0 #3a2a22, 0.000em 0.075em 0 #3a2a22, -0.029em 0.069em 0 #3a2a22, -0.053em 0.053em 0 #3a2a22, -0.069em 0.029em 0 #3a2a22, -0.075em 0.000em 0 #3a2a22, -0.069em -0.029em 0 #3a2a22, -0.053em -0.053em 0 #3a2a22, -0.029em -0.069em 0 #3a2a22, -0.000em -0.075em 0 #3a2a22, 0.029em -0.069em 0 #3a2a22, 0.053em -0.053em 0 #3a2a22, 0.069em -0.029em 0 #3a2a22,
    0.05em 0.1em 0.14em rgba(0, 0, 0, 0.75);
}
/* 社名は途中で折り返しません。狭い画面で「テ／ィ」と割れるのを防ぎます */
/* この書体はカナの字面が小さいので、元のサイトと同じ見た目にするには漢字より大きい指定が要ります。
   そのぶん字送りは詰めています（実測: 1字あたり58px / 幅1360px） */
.hero__name { font-size: 1.12em; letter-spacing: -0.13em; transform: skewX(-12deg); display: inline-block; white-space: nowrap; }
/* 文言は読点の位置でだけ折り返します */
.hero__lead span { display: inline-block; }
.hero__lead {
  margin-top: clamp(24px, 3.6vw, 56px); text-align: center;
  /* 元のサイトに合わせてゴシック体。白い字に濃いふちで読ませます */
  font-weight: 600; letter-spacing: 0.02em;
  /* 下限16pxは、幅390pxの画面で前半の21文字が1行に収まる大きさです */
  font-size: clamp(1rem, 2.24vw, 2rem); line-height: 1.7; color: #fff;
  text-shadow: 1.5px 1.5px 0 #2a2320, -1.5px 1.5px 0 #2a2320, 1.5px -1.5px 0 #2a2320, -1.5px -1.5px 0 #2a2320, 2px 0 0 #2a2320, -2px 0 0 #2a2320, 0 2px 0 #2a2320, 0 -2px 0 #2a2320, 0 3px 8px rgba(0,0,0,0.8);
}
.hero__mark { position: absolute; right: 5vw; bottom: 4vh; width: clamp(96px, 9vw, 130px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }

/* ---- ボタン ------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px; font-size: 17px; font-weight: 700;
  letter-spacing: 0.08em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background var(--t), color var(--t), border-color var(--t);
}
.btn::after { content: "→"; font-family: var(--ff-en); transition: transform var(--t); }
.btn:hover::after { transform: translateX(5px); }
.btn--primary { background: var(--green-bright); color: var(--ink); }
.btn--primary:hover { background: #fff; }
.btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn--ghost:hover { border-color: var(--green-bright); color: var(--green-bright); }

/* ---- 節の共通 ---------------------------------------------- */
.section { padding-block: 88px; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--paper { background: var(--paper); color: var(--text); }
/* 理念は黒の地（2026-09-19 ユーザー指示。それまでは緑でした）。
   トップ下端の緑の帯が、黒との境目の線として残ります。
   クラス名は section--green のままですが、色は黒です */
.section--green { background: #000; color: #fff; }
.section--green .sec-head__title { color: rgba(255,255,255,0.75); }
.section--green .prose p { color: rgba(255,255,255,0.9); }
/* 図面の方眼。目立たせると煩いので、ほぼ見えない濃さにしています */
.section--grid {
  background-color: var(--ink-2);
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
.section--contact { background: var(--ink-3); color: var(--on-dark); border-top: 1px solid var(--line-dark); }

.sec-head { margin-bottom: 44px; }
.sec-head__en {
  margin-top: 0; font-family: var(--ff-en); font-size: 2.5rem; font-weight: 300;
  letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; color: #fff;
}
.section--paper .sec-head__en { color: var(--ink); }
.sec-head__title { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: 0.22em; color: var(--on-dark-mute); }
.section--paper .sec-head__title { color: var(--text-mute); }
.sec-head__lead { margin-top: 24px; max-width: 40em; font-size: 18px; }

.prose p + p { margin-top: 22px; }
.prose p { font-size: 18px; color: var(--on-dark-mute); }
.prose .prose__lead {
  margin-bottom: 32px; font-size: 1.5rem; font-weight: 700; line-height: 1.6;
  letter-spacing: 0.04em; color: #fff;
}
.note { margin-top: 36px; font-size: 15px; color: var(--text-mute); }

/* ---- 業務内容 ----------------------------------------------- */
.services { display: grid; gap: 56px; }
.service { display: grid; gap: 22px; }
.service__img { overflow: hidden; border-radius: var(--radius); }
.service__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.service:hover .service__img img { transform: scale(1.04); }
.service__title { margin-top: 10px; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--ink); }
.service__en { margin-top: 2px; font-family: var(--ff-en); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--green-deep); }
.service__text { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-light); font-size: 18px; color: var(--text-mute); }

/* ---- 施工実績 ----------------------------------------------- */
.works { display: grid; gap: 14px; }
.work { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-3); }
.work img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.work:hover img { transform: scale(1.05); }
.work__cap {
  position: absolute; inset: auto 0 0 0; padding: 56px 22px 20px;
  background: linear-gradient(to top, rgba(15,18,20,0.92), rgba(15,18,20,0));
}
.work__client { font-size: 15px; letter-spacing: 0.06em; color: var(--green-bright); }
.work__title { margin-top: 2px; font-size: 1.25rem; letter-spacing: 0.04em; color: #fff; }

/* ---- 会社概要 ----------------------------------------------- */
.company { display: grid; gap: 36px; }
.spec { border-top: 1px solid var(--line-light); }
.spec > div { display: grid; gap: 4px; padding: 18px 2px; border-bottom: 1px solid var(--line-light); }
.spec dt { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; color: var(--green-deep); }
.spec dd { font-size: 18px; }
.spec a { color: var(--green-deep); }
.spec--onDark { border-top-color: var(--line-dark); }
.spec--onDark > div { border-bottom-color: var(--line-dark); }
.spec--onDark dt, .spec--onDark a { color: var(--green-bright); }
.company__photo { position: relative; }
.company__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.company__photo figcaption {
  position: absolute; left: 0; bottom: 0; padding: 8px 14px;
  background: var(--ink); color: #fff;
  font-family: var(--ff-en); font-size: 15px; letter-spacing: 0.3em;
}

/* ---- SSTに込めた思い ----------------------------------------
   作り直す前のサイトと同じ組み方です。黄色いトラスの写真を暗く敷き、
   白い丸見出しの下に、文章を左寄せで並べます */
.omoi {
  position: relative; color: #fff;
  background: #000 url(/assets/img/bg/truss.webp) center / cover no-repeat;
}
/* 写真の上の黒い膜。白い本文を読ませるための濃さです */
.omoi::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.omoi__inner { position: relative; }
.omoi__title { text-align: center; margin-bottom: 40px; }
.omoi__title span {
  display: inline-block; padding: 6px 26px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 1.375rem; font-weight: 500; letter-spacing: 0.04em;
}
.omoi__lead { letter-spacing: 0.06em; }
.omoi__list { margin-top: 36px; display: grid; gap: 32px; }
.omoi__list dt { font-weight: 500; letter-spacing: 0.08em; }
.omoi__list dd { margin-top: 8px; padding-left: 1em; letter-spacing: 0.06em; }
.omoi__close { margin-top: 40px; letter-spacing: 0.06em; }

/* ---- アクセス ----------------------------------------------- */
.contact { display: grid; gap: 8px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- フッター ----------------------------------------------- */
.footer { padding-block: 56px 40px; background: var(--ink); color: var(--on-dark-mute); border-top: 1px solid var(--line-dark); }
.footer__inner { display: grid; gap: 24px; }
.footer__mark { width: 120px; height: auto; opacity: 0.92; }
.footer__name { font-size: 17px; font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.footer__addr { margin-top: 6px; font-size: 16px; }
.footer__copy { font-family: var(--ff-en); font-size: 15px; letter-spacing: 0.2em; }

/* ---- 画面幅ごとの上書き ------------------------------------- */
@media (min-width: 768px) {
  .u-pc { display: inline; }
  .section { padding-block: 128px; }

  .sec-head__en { font-size: 4rem; }
  .split { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 72px; align-items: start; }
  .split .sec-head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
  .sec-head--row { display: grid; grid-template-columns: 0.9fr 1.3fr; column-gap: 72px; align-items: end; }
  .sec-head--row .sec-head__en, .sec-head--row .sec-head__title { grid-column: 1; }
  .sec-head--row .sec-head__lead { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
  .prose .prose__lead { font-size: 2rem; }

  .services { gap: 96px; }
  .service { grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
  /* 左右を入れ替える行は、列の幅も入れ替えます。入れ替えないと
     写真が狭いほうの列に入って、奇数番の行より小さくなります */
  .service--flip { grid-template-columns: 1fr 1.35fr; }
  .service--flip .service__img { order: 2; }
    .service__title { font-size: 1.875rem; }

  .works { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .work--wide { grid-column: 1 / -1; }
  .work--wide img { aspect-ratio: 21 / 9; }
  .work__cap { padding: 80px 30px 26px; }
  .work--wide .work__title { font-size: 1.5rem; }

  .company { grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
  .spec > div { grid-template-columns: 170px 1fr; gap: 24px; align-items: baseline; }


  .contact { grid-template-columns: 0.9fr 1.3fr; gap: 72px; align-items: start; }
  .contact .sec-head { margin-bottom: 0; }
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
}
@media (min-width: 1040px) {
  :root { --header-h: 60px; }
  .nav__toggle, .drawer { display: none; }
  .nav__list { display: flex; align-items: center; gap: 34px; }
}

/* ---- 動き ---------------------------------------------------
   本文を JavaScript で出し入れする方式は使っていません。JavaScriptが
   動かないと本文が消えるためです。ここにあるのはCSSだけで完結する動きで、
   対応していないブラウザでは単に最初から見えているだけになります */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero__inner > :nth-child(2) { animation-delay: 0.25s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }


  /* スクロールに連動して出る動き。ブラウザ自身が進み具合を決めるので、
     JavaScript に頼りません。未対応のブラウザでは何も起きません */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
  }
}