:root {
    --ink: #333333;
    --ink-2: #4b4b4b;
    --ink-3: #8f8f8f;
    --rule: #e8e8e8;
    --ground: #ffffff;
    --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --nav: "Raleway", "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--jp);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

  /* content column — headings sit flush, text indents slightly, as on the original */
  .wrap { max-width: 1060px; margin: 0 auto; padding-left: clamp(20px, 4vw, 26px); padding-right: clamp(20px, 4vw, 26px); }
  .indent { padding-left: clamp(0px, 2vw, 28px); }

  /* wide media band: hero and the photo dividers */
  .band { max-width: 1210px; margin: 0 auto; padding-left: clamp(16px, 3vw, 26px); padding-right: clamp(16px, 3vw, 26px); }

  /* centred media inside a section */
  .media { max-width: 800px; margin: 0 auto; }

  /* ---------- header ---------- */
  header { padding: clamp(26px, 3vw, 40px) 24px 0; text-align: center; }
  .logo { width: clamp(120px, 10vw, 150px); margin: 0 auto; }
  nav.top { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(26px, 5.6vw, 78px); margin-top: clamp(20px, 2.4vw, 32px); }
  nav.top a, footer nav a {
    font-family: var(--nav);
    font-size: 12.5px; font-weight: 500; letter-spacing: .2em;
    text-decoration: none; padding: 6px 0;
  }
  nav.top a:hover, footer nav a:hover { color: var(--ink-3); }

  /* ---------- hero ---------- */
  .hero { position: relative; margin-top: clamp(28px, 3.4vw, 52px); }
  .hero img { width: 100%; height: clamp(280px, 44vw, 660px); object-fit: cover; filter: grayscale(1); }
  .hero p {
    position: absolute; left: 0; right: 0; top: 36%;
    margin: 0; padding: 0 24px;
    font-size: clamp(15px, 1.55vw, 24px); font-weight: 400; letter-spacing: .14em;
    color: #262626; text-align: center;
  }

  /* ---------- sections ---------- */
  section { padding-top: clamp(84px, 11vw, 190px); padding-bottom: clamp(76px, 10vw, 170px); }
  h2 {
    font-size: clamp(46px, 6.6vw, 102px);
    font-weight: 700; letter-spacing: .012em; line-height: 1;
    margin: 0 0 clamp(40px, 5.4vw, 96px);
  }
  .divider { margin-top: clamp(24px, 4vw, 64px); margin-bottom: clamp(24px, 4vw, 64px); }
  .divider img { width: 100%; height: clamp(200px, 31vw, 500px); object-fit: cover; filter: grayscale(1); }

  /* ---------- about ---------- */
  .lead {
    font-size: clamp(18px, 1.85vw, 28px); font-weight: 700; letter-spacing: .04em;
    line-height: 1.7; margin: 0 0 22px;
  }
  .lead + hr { border: 0; border-top: 1px solid var(--rule); margin: 0 0 34px; }
  .prose p { font-size: clamp(12.5px, 0.94vw, 14px); line-height: 2.1; letter-spacing: .03em; color: var(--ink-2); margin: 0 0 30px; }
  .prose p:last-child { margin-bottom: 0; }

  /* ---------- news ---------- */
  .news-item { padding: 0 0 26px; border-bottom: 1px solid var(--rule); margin-bottom: 44px; }
  .news-item:last-child { margin-bottom: 0; }
  .news-date { font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
  .news-title { font-size: clamp(17px, 1.45vw, 22px); font-weight: 700; letter-spacing: .03em; margin: 10px 0 12px; line-height: 1.6; }
  .news-excerpt { font-size: 12.5px; line-height: 1.85; color: var(--ink-2); margin: 0; letter-spacing: .02em; }

  /* ---------- business ---------- */
  .sub { font-size: clamp(17px, 1.5vw, 23px); font-weight: 700; letter-spacing: .05em; margin: 0 0 clamp(34px, 4vw, 64px); }
  .media + .sub { margin-top: clamp(52px, 6vw, 104px); }
  .embed { position: relative; padding-top: 56.25%; }
  .map { position: relative; padding-top: 50%; }
  .embed iframe, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .stack { margin-top: clamp(52px, 6vw, 96px); }

  /* plain label / value rows — no rules (BUSINESS) */
  .info { max-width: 800px; margin: clamp(44px, 5vw, 84px) auto 0; }
  .info-row { display: grid; grid-template-columns: 128px 1fr; gap: 6px 0; margin-bottom: 30px; align-items: baseline; }
  .info-row:last-child { margin-bottom: 0; }
  .info-row dt { font-size: 13px; font-weight: 700; letter-spacing: .05em; }
  .info-row dd { margin: 0; font-size: 13.5px; line-height: 1.9; letter-spacing: .02em; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
  .info-row dd a.social { display: inline-flex; }
  .info-row dd svg { width: 19px; height: 19px; fill: var(--ink); display: block; }

  /* ruled label / value rows (COMPANY) */
  .spec { margin: 0; }
  .spec-row { display: grid; grid-template-columns: 128px 1fr; gap: 6px 0; padding: 0 0 20px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; align-items: baseline; }
  .spec-row:last-child { border-bottom: 0; }
  .spec-row dt { font-size: 13px; font-weight: 700; letter-spacing: .05em; }
  .spec-row dd { margin: 0; font-size: 13.5px; line-height: 1.95; letter-spacing: .02em; color: var(--ink-2); }

  /* ---------- contact ---------- */
  .contact-text { font-size: clamp(13px, 1vw, 15px); letter-spacing: .05em; color: var(--ink-2); margin: 0 0 26px; }
  .contact-mail {
    font-size: clamp(14px, 1.15vw, 18px); letter-spacing: .06em;
    text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 7px;
  }
  .contact-mail:hover { border-bottom-color: var(--ink); }

  /* ---------- footer ---------- */
  footer { padding: clamp(50px, 7vw, 110px) 24px clamp(40px, 4vw, 62px); text-align: center; }
  footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(24px, 5vw, 62px); margin-bottom: 22px; }
  .copyright { font-family: var(--nav); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); }

  @media (max-width: 700px) {
    .info-row, .spec-row { grid-template-columns: 1fr; }
    .indent { padding-left: 0; }
  }
  /* ---------- article (news sub-page) ---------- */
  .article { max-width: 1060px; margin: 0 auto; padding-left: clamp(20px, 4vw, 26px); padding-right: clamp(20px, 4vw, 26px); padding-top: clamp(70px, 8vw, 130px); padding-bottom: clamp(70px, 8vw, 140px); }
  .article-date { font-size: 13px; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 12px; }
  .article h1 {
    font-size: clamp(22px, 2.2vw, 34px); font-weight: 700; letter-spacing: .03em;
    line-height: 1.6; margin: 0 0 clamp(34px, 4vw, 56px);
  }
  .article h1 + hr { border: 0; border-top: 1px solid var(--rule); margin: 0 0 clamp(34px, 4vw, 56px); }
  .article-body p { font-size: clamp(12.5px, 0.94vw, 14px); line-height: 2.1; letter-spacing: .03em; color: var(--ink-2); margin: 0 0 30px; }
  .article-body p:last-child { margin-bottom: 0; }
  .article-body .heading { font-weight: 700; color: var(--ink); margin-top: 46px; }
  .article-body .sign { margin-top: 52px; }
  .back { display: inline-block; margin-top: clamp(46px, 5vw, 80px); font-family: var(--nav); font-size: 12px; letter-spacing: .18em; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 7px; }
  .back:hover { border-bottom-color: var(--ink); }

  /* news titles become links on the index */
  a.news-link { text-decoration: none; display: block; }
  a.news-link:hover .news-title { color: var(--ink-3); }