/* =========================================================
   HSK Co., Ltd. - Top Page Stylesheet
   Design: Dark navy / charcoal base, generous whitespace,
           English labels + Japanese headings (INFINITO inspired)
========================================================= */

/* ---------- Reset & Tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  color: var(--c-text);
  background: #fff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease, color .25s ease; }
a:hover { opacity: .7; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }

:root {
  --c-ink:        #0A0E1A;
  --c-navy:       #11192A;
  --c-navy-2:     #1A2434;
  --c-charcoal:   #2A2D33;
  --c-text:       #2A2D33;
  --c-text-sub:   #5B6270;
  --c-line:       #E5E7EC;
  --c-light:      #F6F6F8;
  --c-light-2:    #FAFAFB;
  --c-accent:       #4A6FA5;   /* trust blue */
  --c-accent-soft:  #7B92B5;   /* soft slate */
  --c-accent-deep:  #1F2D45;   /* deep navy */
  --c-accent-2:     #5B7FB3;   /* mid blue */
  --c-grad:         linear-gradient(135deg, #1F2D45 0%, #4A6FA5 60%, #7B92B5 100%);
  --c-grad-soft:    linear-gradient(135deg, #4A6FA5 0%, #7B92B5 100%);
  --c-grad-deep:    linear-gradient(135deg, #0F1A2D 0%, #1F2D45 50%, #2F4A6E 100%);
  --c-white:      #FFFFFF;

  --font-en: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  --max:    1200px;
  --gutter: clamp(20px, 5vw, 48px);

  --pad-y:  clamp(80px, 10vw, 140px);
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.en-label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
}
.en-label-dark { color: var(--c-accent); }
.pc-only { display: inline; }
.sp-only { display: none; }
@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  transition: background .3s ease, padding .3s ease;
}
.site-header.is-scrolled { background: rgba(10, 14, 26, 0.98); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.logo-mark {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--c-accent);
}
.logo-text { font-size: 13px; font-weight: 500; color: #fff; letter-spacing: 0.08em; }

.gnav { display: flex; align-items: center; gap: 32px; }
.gnav-list {
  display: flex;
  gap: 24px;
  align-items: center;
}
.gnav-list a {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  position: relative;
  padding: 8px 0;
}
.gnav-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-accent);
  transition: width .3s ease;
}
.gnav-list a:hover { opacity: 1; color: var(--c-accent); }
.gnav-list a:hover::after { width: 100%; }
.gnav-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
}
.gnav-tel .en-label {
  margin: 0;
  font-size: 9px;
  color: var(--c-accent);
}
.gnav-tel .tel-num {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.gnav-tel:hover { opacity: 1; background: rgba(255,255,255,0.05); }

.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s ease, opacity .25s ease, top .3s ease;
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .gnav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
    background: var(--c-ink);
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 32px;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 99;
    overflow-y: auto;
    gap: 0;
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .gnav-list li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .gnav-list a { display: block; padding: 18px 0; font-size: 15px; }
  .gnav-cta { width: 100%; margin-top: 24px; }
  .gnav-tel { width: 100%; align-items: center; padding: 16px; }
  .hamburger { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  min-width: 200px;
  text-align: center;
}
.btn:hover { opacity: 1; transform: translateY(-2px); }
.btn-en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: .7;
}
.btn-primary { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn-primary:hover { background: var(--c-navy-2); border-color: var(--c-navy-2); }
.btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-outline:hover { background: var(--c-ink); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }
.btn-dark { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn-dark:hover { background: var(--c-navy-2); }
.btn-blue {
  background: var(--c-grad);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px rgba(74,111,165,0.55);
}
.btn-blue:hover {
  background: var(--c-grad-soft);
  box-shadow: 0 12px 28px -8px rgba(74,111,165,0.7);
}
.btn-text {
  background: transparent;
  color: var(--c-ink);
  border: none;
  padding: 12px 0;
  min-width: 0;
  border-bottom: 1px solid var(--c-ink);
  border-radius: 0;
}
.btn-text:hover { transform: none; opacity: .6; }
.btn-large { min-width: 260px; padding: 22px 40px; font-size: 15px; }

/* ---------- Section base ---------- */
.section {
  padding: var(--pad-y) 0;
  position: relative;
}
.section-light { background: var(--c-light); }
.section-dark { background: var(--c-ink); color: #fff; }
.section-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 72px;
}
.section-head-left { text-align: left; max-width: none; }
.section-title {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin-bottom: 28px;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
.hero-copy {
  word-break: keep-all;
  line-break: strict;
}
.section-title-dark { color: #fff; }
.section-lead {
  color: var(--c-text-sub);
  font-size: 15px;
  line-height: 2;
  margin-top: 0;
}
.section-lead-dark { color: rgba(255,255,255,0.75); }
.section-lead + .section-lead { margin-top: 20px; }
.section-cta {
  text-align: center;
  margin-top: 72px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding: 120px 0 80px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    /* photo */
    url("../img/hero-bg.jpg") center/cover no-repeat,
    /* fallback gradient (shown if photo missing) */
    linear-gradient(135deg, #0A1224 0%, #142038 45%, #1F2D45 100%);
  z-index: 0;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(91,127,179,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 72%, rgba(31,45,69,0.35) 0%, transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* placeholder pattern that suggests a "site/control room" feel */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .6;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,14,26,0.78) 0%, rgba(10,14,26,0.55) 45%, rgba(10,14,26,0.35) 100%),
    linear-gradient(180deg, rgba(10,14,26,0.35) 0%, rgba(10,14,26,0.55) 100%);
  z-index: 1;
}
@media (max-width: 768px) {
  .hero-bg { background-position: 65% center; }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(10,14,26,0.82) 0%, rgba(10,14,26,0.72) 50%, rgba(10,14,26,0.88) 100%);
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-en { color: var(--c-accent); margin-bottom: 32px; }
.hero-copy {
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin: 0 0 32px;
}
.hero-sub {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 2;
  color: rgba(255,255,255,0.8);
  margin-bottom: 56px;
  max-width: 680px;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-ctas .btn-primary {
  background: var(--c-grad);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 14px 30px -10px rgba(74,111,165,0.55);
}
.hero-ctas .btn-primary:hover {
  background: var(--c-grad-soft);
  box-shadow: 0 18px 36px -10px rgba(74,111,165,0.7);
}
.hero-ctas .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero-ctas .btn-outline:hover { background: #fff; color: var(--c-ink); }
.hero-scroll {
  position: absolute;
  left: var(--gutter); bottom: 32px;
  z-index: 3;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
}
.hero-scroll::after {
  content: "";
  display: block;
  width: 1px; height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  margin-left: 16px;
  animation: scrollLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: .3; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 768px) {
  .hero { padding: 100px 0 120px; }
  .hero-copy { font-size: clamp(28px, 9vw, 44px); }
  .hero-ctas .btn { width: 100%; min-width: 0; }
  .hero-scroll { display: none; }
}

/* ---------- CONCERNS ---------- */
.concern-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--c-line);
}
.concern-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 8px;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
  color: var(--c-charcoal);
}
.concern-list li:nth-child(odd) { border-right: 1px solid var(--c-line); padding-right: 32px; }
.concern-num {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .concern-list { grid-template-columns: 1fr; }
  .concern-list li { padding: 22px 4px; }
  .concern-list li:nth-child(odd) { border-right: none; padding-right: 4px; }
}

/* ---------- WHY HSK ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 16px;
}
.why-card {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 40px;
}
.why-num {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: 24px;
}
.why-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.why-text {
  font-size: 14px;
  line-height: 2;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- SERVICE ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.service-card {
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10,14,26,0.08); }
.service-img {
  aspect-ratio: 4 / 3;
  background: var(--c-navy) center/cover no-repeat;
  position: relative;
  overflow: hidden;
  display: block;
}
.service-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,36,0.10) 0%, rgba(10,18,36,0.38) 100%);
}
.service-img[data-img="machine"]  { background-image: url("../img/service-machine.jpg");  background-position: 60% 40%; }
.service-img[data-img="facility"] { background-image: url("../img/service-facility.jpg"); background-position: center 30%; }
.service-img[data-img="traffic"]  { background-image: url("../img/service-traffic.jpg");  background-position: center 55%; }
.service-img[data-img="fire"]     { background-image: url("../img/service-fire.jpg");     background-position: center 32%; }
.service-img[data-img="camera"]   { background-image: url("../img/service-camera.jpg");   background-position: center 45%; }
.service-img[data-img="env"]      { background-image: url("../img/service-env.jpg");      background-position: center 60%; }
.service-card > .service-num,
.service-card > .service-title,
.service-card > .service-text {
  padding-left: 28px;
  padding-right: 28px;
}
.service-card .service-num {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-top: 28px;
  margin-bottom: 16px;
}
.service-card .service-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.service-card .service-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text-sub);
  padding-bottom: 32px;
}
@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---------- CLIENTS ---------- */
.clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.client-card {
  overflow: hidden;
  background: #fff;
}
.client-img {
  aspect-ratio: 16 / 9;
  background: #1A2434 center/cover no-repeat;
  position: relative;
}
.client-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,36,0.15) 0%, rgba(10,18,36,0.42) 100%);
}
.client-card-business .client-img { background-image: url("../img/client-business.jpg"); background-position: center 55%; }
.client-card-personal .client-img { background-image: url("../img/client-personal.jpg"); background-position: center 45%; }
.client-body {
  padding: 40px 36px;
}
.client-card-business {
  background: var(--c-ink);
  color: #fff;
}
.client-card-business .client-title { color: #fff; }
.client-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin: 16px 0 12px;
}
.client-copy {
  font-size: 14px;
  margin-bottom: 24px;
  opacity: .8;
}
.client-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 32px;
  font-size: 14px;
}
.client-list li {
  position: relative;
  padding-left: 18px;
}
.client-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 1px;
  background: var(--c-accent);
}
@media (max-width: 768px) {
  .clients-grid { grid-template-columns: 1fr; }
  .client-body { padding: 32px 24px; }
  .client-list { grid-template-columns: 1fr; }
}

/* ---------- CAMERA ---------- */
.section-camera { overflow: hidden; }
.camera-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.camera-points {
  margin: 32px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.camera-points li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,0.85);
}
.camera-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 16px; height: 1px;
  background: var(--c-accent);
}
.camera-visual {
  aspect-ratio: 4 / 5;
  background: #142038 url("../img/camera-hero.jpg") center/cover no-repeat;
  position: relative;
  border: 1px solid rgba(123,146,181,0.18);
}
.camera-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,36,0.20) 0%, rgba(10,18,36,0.55) 100%);
}
.camera-visual::after {
  content: "CAMERA SYSTEM";
  position: absolute;
  bottom: 24px; left: 24px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 900px) {
  .camera-inner { grid-template-columns: 1fr; gap: 48px; }
  .camera-visual { aspect-ratio: 4 / 3; }
}

/* ---------- AREA ---------- */
.area-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.area-note {
  font-size: 13px;
  color: var(--c-text-sub);
  background: var(--c-light);
  padding: 20px 24px;
  margin-top: 24px;
  border-left: 2px solid var(--c-accent);
  line-height: 1.9;
}
.area-info {
  margin-top: 40px;
  border-top: 1px solid var(--c-line);
}
.area-info > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}
.area-info dt {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  text-transform: uppercase;
  align-self: center;
}
.area-info dd { font-size: 14px; line-height: 1.8; }
.area-map-visual {
  aspect-ratio: 4 / 5;
  background: #E5E7EC url("../img/area-office.jpg") center/cover no-repeat;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.area-map-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,36,0.12) 0%, rgba(10,18,36,0.45) 100%);
}
.map-label {
  position: absolute;
  bottom: 24px; left: 24px;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.9);
}
@media (max-width: 900px) {
  .area-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- GALLERY ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 16px;
}
.gallery-item {
  background: #1A2434 center/cover no-repeat;
  position: relative;
  overflow: hidden;
  transition: transform .4s ease;
}
.gallery-item:hover { transform: scale(0.99); }
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,36,0.10) 35%, rgba(10,18,36,0.62) 100%);
}
.gallery-item[data-img="g1"] { background-image: url("../img/gallery-01.jpg"); background-position: center 25%; }
.gallery-item[data-img="g2"] { background-image: url("../img/gallery-02.jpg"); background-position: center 45%; }
.gallery-item[data-img="g3"] { background-image: url("../img/gallery-03.jpg"); background-position: center 55%; }
.gallery-item[data-img="g4"] { background-image: url("../img/gallery-04.jpg"); background-position: center 40%; }
.gallery-item[data-img="g5"] { background-image: url("../img/gallery-05.jpg"); background-position: center 50%; }
.gallery-item[data-img="g6"] { background-image: url("../img/gallery-06.jpg"); background-position: center 60%; }
.gallery-cap {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.7);
  z-index: 2;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}

/* ---------- RECRUIT ---------- */
.section-recruit {
  padding: clamp(100px, 14vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.recruit-bg {
  position: absolute;
  inset: 0;
  background: #0A1224 url("../img/recruit-bg.jpg") center/cover no-repeat;
}
.recruit-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(10,18,36,0.88) 0%, rgba(31,45,69,0.80) 100%);
}
.recruit-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}
.recruit-title { font-size: clamp(28px, 4.5vw, 48px); margin-bottom: 32px; }
.recruit-lead { margin-bottom: 48px; }

/* ---------- NEWS ---------- */
.news-list {
  border-top: 1px solid var(--c-line);
}
.news-item { border-bottom: 1px solid var(--c-line); }
.news-item a {
  display: grid;
  grid-template-columns: 140px 120px 1fr;
  gap: 32px;
  padding: 28px 8px;
  align-items: center;
}
.news-item a:hover { opacity: 1; background: var(--c-light-2); }
.news-date {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--c-accent);
}
.news-cat {
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  display: inline-block;
  text-align: center;
  letter-spacing: 0.1em;
  color: var(--c-text-sub);
  border-radius: 100px;
}
.news-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
}
@media (max-width: 768px) {
  .news-item a {
    grid-template-columns: auto auto;
    grid-template-areas: "date cat" "title title";
    gap: 8px 16px;
    padding: 22px 4px;
  }
  .news-date { grid-area: date; }
  .news-cat { grid-area: cat; justify-self: start; }
  .news-title { grid-area: title; margin-top: 8px; }
}

/* ---------- SOCIAL ---------- */
.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}
.social-card {
  display: block;
  background: #fff;
  padding: 40px;
  border: 1px solid var(--c-line);
  transition: all .25s ease;
}
.social-card:hover { opacity: 1; transform: translateY(-4px); border-color: var(--c-ink); }
.social-card .en-label { margin-bottom: 16px; }
.social-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.social-text {
  font-size: 13px;
  color: var(--c-text-sub);
}
@media (max-width: 600px) {
  .social-grid { grid-template-columns: 1fr; }
  .social-card { padding: 28px 24px; }
}

/* ---------- CONTACT ---------- */
.section-contact {
  background: var(--c-light);
}
.contact-tel {
  text-align: center;
  padding: 48px 24px;
  background: var(--c-ink);
  color: #fff;
  margin-bottom: 64px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -16px;
}
.contact-tel .en-label { margin-bottom: 12px; }
.contact-tel-num {
  font-family: var(--font-en);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-bottom: 12px;
}
.contact-tel-note {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.contact-form {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  padding: 56px clamp(24px, 5vw, 56px);
}
.form-row { margin-bottom: 28px; }
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  margin-bottom: 10px;
}
.required {
  display: inline-block;
  background: var(--c-ink);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  margin-left: 6px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.optional {
  display: inline-block;
  background: transparent;
  color: var(--c-text-sub);
  font-size: 10px;
  padding: 2px 8px;
  margin-left: 6px;
  letter-spacing: 0.1em;
  border: 1px solid var(--c-line);
  border-radius: 2px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font: inherit;
  background: #fff;
  color: var(--c-ink);
  transition: border-color .2s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--c-ink);
}
.form-row textarea { resize: vertical; min-height: 160px; }
.form-check label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  cursor: pointer;
}
.form-check input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; }
.form-check a { text-decoration: underline; }
.form-submit { text-align: center; margin-top: 40px; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--c-ink);
  color: rgba(255,255,255,0.7);
  padding-top: 80px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 64px;
}
.footer-logo {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-tag {
  font-size: 13px;
  margin-bottom: 32px;
  line-height: 1.9;
}
.footer-info { display: grid; gap: 14px; font-size: 13px; }
.footer-info > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.footer-info dt {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-accent);
}
.footer-info a { color: #fff; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col-title {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--c-accent);
  margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 14px; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: 13px; }
.footer-col a:hover { color: #fff; opacity: 1; }
.footer-bottom {
  margin-top: 80px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-privacy { font-size: 12px; color: rgba(255,255,255,0.6); }
.copyright {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 48px; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

/* ---------- MOBILE FIXED CTA ---------- */
.sp-fixed-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--c-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 24px rgba(10,14,26,0.2);
}
.sp-fixed-cta a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sp-fixed-cta a + a { border-left: 1px solid rgba(255,255,255,0.1); }
.sp-cta-tel { background: var(--c-grad); color: #fff !important; }
.sp-cta-en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: .7;
  margin-bottom: 2px;
}
.sp-cta-label { font-size: 14px; font-weight: 600; }
@media (max-width: 768px) {
  .sp-fixed-cta { display: flex; }
  body { padding-bottom: 76px; }
}

/* =========================================================
   SUBPAGES / ADDITIONS (2026-09 client revision)
========================================================= */
.service-card { display:block; color:inherit; }
.service-card:hover { opacity:1; }

/* ---------- page hero ---------- */
.page-hero { position:relative; background:var(--c-ink); color:#fff; padding:160px 0 88px; overflow:hidden; }
.page-hero-bg { position:absolute; inset:0; background:center/cover no-repeat; opacity:.5; }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,14,26,.94) 0%, rgba(10,14,26,.74) 55%, rgba(10,14,26,.42) 100%); }
.page-hero-inner { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(30px,4.2vw,50px); font-weight:700; line-height:1.4; letter-spacing:.04em; margin:0 0 20px; word-break:keep-all; line-break:strict; }
.page-hero-lead { color:rgba(255,255,255,.82); font-size:15px; line-height:2; max-width:720px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:rgba(255,255,255,.55); margin-bottom:28px; font-family:var(--font-en); letter-spacing:.12em; text-transform:uppercase; }
.breadcrumb a { color:rgba(255,255,255,.55); }
.breadcrumb span + span::before { content:"/"; margin-right:10px; opacity:.5; }
@media (max-width:768px){ .page-hero{ padding:120px 0 64px; } .page-hero::after{ background:linear-gradient(180deg, rgba(10,14,26,.85), rgba(10,14,26,.78)); } }

/* ---------- intro / lists ---------- */
.intro-text { max-width:860px; margin:0 auto; text-align:center; font-size:16px; line-height:2.1; color:var(--c-charcoal); }
.intro-text strong { color:var(--c-ink); font-weight:700; }
.intro-text + .intro-text { margin-top:20px; }
.check-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; max-width:900px; margin:40px auto 0; }
.check-list li { position:relative; padding-left:30px; font-size:15px; line-height:1.8; color:var(--c-charcoal); }
.check-list li::before { content:""; position:absolute; left:0; top:.5em; width:16px; height:16px; border-radius:50%; background:var(--c-grad); }
.check-list li::after { content:""; position:absolute; left:5px; top:calc(.5em + 4px); width:6px; height:3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
@media (max-width:640px){ .check-list{ grid-template-columns:1fr; } }
.notice-box { background:var(--c-light); border-left:2px solid var(--c-accent); padding:24px 28px; font-size:14px; line-height:1.9; color:var(--c-charcoal); max-width:960px; margin:40px auto 0; }
.notice-box.is-dark { background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); }

/* ---------- feature rows ---------- */
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.feature-row + .feature-row { margin-top:96px; }
.feature-row.is-reverse .feature-img { order:2; }
.feature-img { aspect-ratio:4/3; background:#1A2434 center/cover no-repeat; overflow:hidden; }
.feature-num { font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--c-accent); margin-bottom:16px; }
.feature-title { font-size:clamp(20px,2.2vw,26px); font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--c-ink); margin-bottom:12px; }
.feature-sub { font-size:15px; font-weight:600; color:var(--c-accent); margin-bottom:16px; line-height:1.7; }
.feature-text { font-size:15px; line-height:2; color:var(--c-text-sub); }
.feature-text + .feature-text { margin-top:12px; }
.section-dark .feature-title { color:#fff; }
.section-dark .feature-text { color:rgba(255,255,255,.75); }
@media (max-width:900px){ .feature-row{ grid-template-columns:1fr; gap:28px; } .feature-row + .feature-row{ margin-top:64px; } .feature-row.is-reverse .feature-img{ order:0; } }

/* ---------- steps ---------- */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.step { background:#fff; padding:32px 24px; border-top:2px solid var(--c-accent); }
.step-num { font-family:var(--font-en); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--c-accent); margin-bottom:14px; }
.step-title { font-size:16px; font-weight:700; color:var(--c-ink); margin-bottom:10px; line-height:1.5; }
.step-text { font-size:13px; line-height:1.9; color:var(--c-text-sub); }
@media (max-width:1000px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- info table ---------- */
.info-table { border-top:1px solid var(--c-line); max-width:960px; margin:0 auto; }
.info-table > div { display:grid; grid-template-columns:200px 1fr; gap:24px; padding:20px 8px; border-bottom:1px solid var(--c-line); }
.info-table dt { font-size:14px; font-weight:600; color:var(--c-ink); }
.info-table dd { font-size:14px; line-height:1.9; color:var(--c-charcoal); }
.info-table dd a { text-decoration:underline; }
@media (max-width:640px){ .info-table > div{ grid-template-columns:1fr; gap:6px; } }

/* ---------- CTA band ---------- */
.cta-band { background:var(--c-ink); color:#fff; padding:96px 0; text-align:center; }
.cta-band .section-title { color:#fff; margin-bottom:16px; }
.cta-band .section-lead { color:rgba(255,255,255,.75); }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.cta-band .contact-tel-num { color:#fff; }

/* ---------- greeting ----------
   Mirrors the old site (client request): full-width photo with the motto,
   then serif body text at 1140px measure, signature right-aligned. */
#greeting .container { max-width: calc(1140px + var(--gutter) * 2); }
.greeting-visual { position:relative; }
.greeting-visual img { width:100%; }
.greeting-quote { margin:0; font-family:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size:30px; font-weight:800; line-height:normal; letter-spacing:normal; color:#333; }
.greeting-quote span { position:absolute; white-space:nowrap; }
.greeting-quote span:first-child { top:30%; left:2%; }
.greeting-quote span:last-child { top:40%; left:30%; }
.greeting-body { margin-top:125px; font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; color:#333; letter-spacing:2px; }
.greeting-body p { margin:0; font-size:20px; line-height:normal; text-wrap:wrap; line-break:auto; }
/* signature: bold serif, right-aligned block, em-space indents in the markup */
.greeting-body .greeting-sign { width:fit-content; margin:60px 0 0 auto; font-size:24px; font-weight:700; letter-spacing:normal; white-space:nowrap; }
@media (max-width:1140px){ .greeting-quote { font-size:18px; } }
@media (max-width:767px){
  .greeting-visual { margin:0 calc(var(--gutter) * -1); }
  .greeting-quote { font-size:min(16px, calc((100vw - 22px) / 22)); }
  .greeting-quote span:first-child { top:calc(100% + 18px); left:3%; }
  .greeting-quote span:last-child { top:calc(100% + 43px); left:48%; }
  .greeting-body p { font-size:16px; }
  .greeting-body .greeting-sign { font-size:16px; }
}

/* ---------- certification ---------- */
.section-cert { background:var(--c-light); }
.cert-wrap { display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center; }
.cert-frame { background:#fff; padding:clamp(16px,2.5vw,32px); box-shadow:0 30px 60px -24px rgba(10,14,26,.3); border:1px solid var(--c-line); }
.cert-frame img { width:100%; height:auto; display:block; }
.cert-title { font-size:24px; font-weight:700; color:var(--c-ink); letter-spacing:.04em; margin-bottom:8px; }
.cert-facts { display:grid; gap:12px; margin:24px 0 32px; }
.cert-facts > div { display:grid; grid-template-columns:110px 1fr; gap:16px; font-size:14px; padding-bottom:12px; border-bottom:1px solid var(--c-line); }
.cert-facts dt { font-family:var(--font-en); font-size:11px; letter-spacing:.2em; color:var(--c-accent); font-weight:700; align-self:center; }
.badges { display:flex; flex-wrap:wrap; gap:24px 32px; align-items:center; }
.badge { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; color:var(--c-ink); }
.badge img { width:64px; height:64px; object-fit:contain; }
.badge small { display:block; font-size:11px; font-weight:400; color:var(--c-text-sub); margin-top:2px; }
@media (max-width:900px){ .cert-wrap{ grid-template-columns:1fr; gap:40px; } }
.sdgs-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:10px; max-width:960px; margin:32px auto 0; }
.sdgs-grid img { width:100%; height:auto; display:block; }
.sdgs-kumamon { max-width:220px; margin:36px auto 0; }
.sdgs-kumamon img { width:100%; height:auto; }
@media (max-width:800px){ .sdgs-grid{ grid-template-columns:repeat(5,1fr); } }

/* ---------- maps ---------- */
.map-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.map-card h3 { font-size:20px; font-weight:700; color:var(--c-ink); margin-bottom:6px; }
.map-card p { font-size:14px; color:var(--c-text-sub); margin-bottom:16px; }
.map-embed { aspect-ratio:4/3; border:1px solid var(--c-line); background:var(--c-light); }
.map-embed iframe { width:100%; height:100%; border:0; display:block; }
@media (max-width:800px){ .map-grid{ grid-template-columns:1fr; } }

/* ---------- Color24 ---------- */
.c24-badge { display:inline-block; background:var(--c-grad); color:#fff; font-size:12px; font-weight:700; letter-spacing:.12em; padding:8px 16px; border-radius:100px; margin-bottom:20px; }
.c24-hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.c24-products { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.c24-product { background:#fff; padding:20px; text-align:center; border:1px solid var(--c-line); }
.c24-product img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; display:block; }
.c24-product h4 { font-family:var(--font-en); font-size:15px; letter-spacing:.06em; color:var(--c-ink); margin:14px 0 4px; }
.c24-product p { font-size:12px; color:var(--c-text-sub); line-height:1.7; }
.c24-compare { margin-top:56px; }
.c24-compare img { width:100%; height:auto; display:block; }
.spec-list { display:grid; gap:12px; margin-top:28px; }
.spec-list li { display:grid; grid-template-columns:140px 1fr; gap:16px; font-size:14px; padding-bottom:10px; border-bottom:1px solid var(--c-line); color:var(--c-charcoal); }
.spec-list li span:first-child { color:var(--c-accent); font-weight:600; }
.section-dark .spec-list li { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.section-dark .spec-list li span:first-child { color:var(--c-accent-soft); }
.credit { font-size:12px; color:var(--c-text-sub); margin-top:16px; line-height:1.8; }
.credit a { text-decoration:underline; }
.section-dark .credit { color:rgba(255,255,255,.55); }
.top-c24 { display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:16px 20px; margin:28px 0 8px; }
.top-c24 img { width:96px; height:72px; object-fit:contain; flex-shrink:0; }
.top-c24 strong { display:block; font-size:15px; color:#fff; margin-bottom:2px; }
.top-c24 span { font-size:12px; color:rgba(255,255,255,.7); }
.camera-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
@media (max-width:900px){ .c24-hero{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:520px){ .c24-products{ grid-template-columns:1fr; } }

/* ---------- planner ---------- */
.planner { display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:center; }
.planner-img { aspect-ratio:1; background:center/cover no-repeat; }
.planner-tags { display:flex; gap:12px; flex-wrap:wrap; margin:20px 0; }
.planner-tags span { border:1px solid var(--c-accent); color:var(--c-accent); font-weight:700; padding:10px 18px; font-size:15px; }
@media (max-width:900px){ .planner{ grid-template-columns:1fr; } .planner-img{ max-width:420px; } }

/* ---------- icon grid / price ---------- */
.icon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.icon-card { background:#fff; padding:32px 28px; border:1px solid var(--c-line); text-align:center; }
.icon-card img { width:96px; height:96px; object-fit:contain; margin:0 auto 20px; display:block; }
.icon-card h3 { font-size:17px; font-weight:700; color:var(--c-ink); margin-bottom:10px; line-height:1.5; }
.icon-card p { font-size:13px; line-height:1.9; color:var(--c-text-sub); text-align:left; }
@media (max-width:900px){ .icon-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .icon-grid{ grid-template-columns:1fr; } }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card { background:#fff; padding:32px 28px; border:1px solid var(--c-line); }
.price-card h3 { font-size:18px; font-weight:700; color:var(--c-ink); margin-bottom:8px; }
.price-card .price { font-family:var(--font-en); font-size:26px; font-weight:700; color:var(--c-accent); margin-bottom:12px; }
.price-card p { font-size:13px; line-height:1.9; color:var(--c-text-sub); }
@media (max-width:800px){ .price-grid{ grid-template-columns:1fr; } }

/* ---------- camera lineup ---------- */
.lineup-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.lineup-item { background:#fff; border:1px solid var(--c-line); padding:24px 16px; text-align:center; font-size:13px; font-weight:600; color:var(--c-ink); }
.lineup-item .lineup-ico { width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--c-grad); opacity:.9; }
@media (max-width:800px){ .lineup-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- legal ---------- */
.legal { max-width:860px; margin:0 auto; }
.legal > p { font-size:14px; line-height:2; color:var(--c-charcoal); margin-bottom:16px; }
.legal h3 { font-size:20px; font-weight:700; color:var(--c-ink); margin:56px 0 16px; padding-bottom:12px; border-bottom:1px solid var(--c-line); }
.legal h4 { font-size:16px; font-weight:700; color:var(--c-ink); margin:32px 0 10px; }
.legal ol { list-style:decimal; padding-left:1.6em; display:grid; gap:10px; }
.legal li { font-size:14px; line-height:2; color:var(--c-charcoal); }
.legal table { width:100%; border-collapse:collapse; font-size:14px; margin-top:10px; }
.legal th, .legal td { border:1px solid var(--c-line); padding:10px 14px; text-align:left; vertical-align:top; line-height:1.8; }
.legal th { background:var(--c-light); font-weight:600; width:42%; }
.legal .sign { margin-top:32px; line-height:2; font-size:14px; color:var(--c-charcoal); }
.legal .pmark { display:flex; align-items:center; gap:16px; margin:24px 0; }
.legal .pmark img { width:80px; height:80px; }

.client-body > .client-list:last-child { margin-bottom: 0; }

/* ---------- header logo (SVG) ---------- */
.logo-img { display:block; height:48px; width:auto; }
.logo .logo-text { padding-left:14px; border-left:1px solid rgba(255,255,255,.22); line-height:1.2; }
@media (max-width:768px){ .logo-img{ height:40px; } .logo{ gap:10px; } .logo .logo-text{ font-size:12px; padding-left:10px; } }
.logo { flex-shrink:0; }
.logo-text, .gnav-list a, .gnav-tel .tel-num { white-space:nowrap; }
@media (min-width:1025px){
  .gnav { gap:24px; }
  .gnav-list { gap:20px; }
}
@media (min-width:1025px) and (max-width:1320px){
  .logo .logo-text { display:none; }
  .gnav-list { gap:16px; }
  .gnav-list a { font-size:12.5px; }
  .gnav-tel { padding:8px 14px; }
}

/* ---------- social (Instagram only) ---------- */
.social-grid.is-single { grid-template-columns:1fr; max-width:520px; }
.social-grid.is-single .social-card { text-align:center; }
.social-follow { display:inline-block; margin-top:20px; font-size:13px; font-weight:600; color:var(--c-accent); letter-spacing:.06em; }

/* ---------- certification strip (above footer) ---------- */
.cert-strip { background:#fff; border-top:1px solid var(--c-line); padding:44px 0; }
.cert-strip-inner { display:flex; align-items:center; justify-content:center; gap:clamp(24px,5vw,64px); flex-wrap:wrap; }
.cert-marks { display:flex; align-items:center; gap:clamp(20px,3.5vw,44px); flex-wrap:wrap; justify-content:center; }
.cert-marks img { height:76px; width:auto; object-fit:contain; }
.cert-marks li:first-child img { height:92px; }
.cert-pdf-btn {
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--c-grad); color:#fff; font-size:15px; font-weight:700; letter-spacing:.06em;
  padding:18px 34px; border-radius:4px; text-align:center;
  box-shadow:0 10px 26px -12px rgba(31,45,69,.6); transition:transform .25s ease, box-shadow .25s ease;
}
.cert-pdf-btn:hover { opacity:1; transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(31,45,69,.75); }
.cert-pdf-note { font-size:11px; font-weight:500; letter-spacing:.04em; opacity:.85; }
.cert-pdf-link { margin-top:14px; font-size:13px; font-weight:600; color:var(--c-accent); }
.cert-pdf-link a { text-decoration:underline; }
@media (max-width:768px){
  .cert-strip { padding:32px 0; }
  .cert-marks img { height:58px; }
  .cert-marks li:first-child img { height:72px; }
  .cert-pdf-btn { width:100%; max-width:340px; padding:16px 24px; font-size:14px; }
}

/* ---------- point cards (photo-less service items) ---------- */
.point-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.point-card { background:#fff; border:1px solid var(--c-line); border-top:2px solid var(--c-accent); padding:36px 32px; }
.point-num { font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--c-accent); margin-bottom:14px; }
.point-title { font-size:20px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--c-ink); margin-bottom:10px; }
.point-sub { font-size:14px; font-weight:600; color:var(--c-accent); line-height:1.7; margin-bottom:12px; }
.point-text { font-size:14px; line-height:2; color:var(--c-text-sub); }
.recruit-lead-box { max-width:860px; }
.section-dark .recruit-lead-box .feature-title { color:#fff; }
@media (max-width:860px){ .point-grid{ grid-template-columns:1fr; gap:20px; } .point-card{ padding:28px 24px; } }

/* ---------- legal: customer harassment policy ---------- */
.legal h3.legal-first { margin-top:0; }
.legal-table-cat th { width:30%; white-space:nowrap; }
.legal-bullets { display:grid; gap:10px; margin:0 0 20px; }
.legal-bullets li { position:relative; padding-left:1.4em; }
.legal-bullets li::before { content:"○"; position:absolute; left:0; color:var(--c-accent); }
@media (max-width:640px){ .legal-table-cat th { width:auto; white-space:normal; } }
/* footer bottom: policy links */
.footer-policies { display:flex; flex-wrap:wrap; gap:8px 24px; }
.footer-col a.nowrap-phrase { word-break:keep-all; }

/* =========================================================
   Japanese line breaking (2026-10 mobile fix)
   Headings / leads / cells carry BudouX <wbr> phrase breaks;
   keep-all makes the browser break only at those points.
========================================================= */
h1, h2, h3, h4, dd, td, th, li,
.section-lead, .hero-sub, .intro-text, .page-hero-lead, .footer-tag, .client-copy,
.social-text, .contact-tel-note, .feature-sub, .point-sub, .greeting-sign,
.notice-box, .cert-pdf-link, .map-card p, .legal .sign {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
.section-title, .hero-copy, .page-hero h1 { overflow-wrap: anywhere; text-wrap: balance; }
h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.legal li { word-break: normal; }   /* legal body text: standard wrapping */

/* grid/flex children must be allowed to shrink below their content width */
.camera-inner > *, .area-inner > *, .feature-row > *, .c24-hero > *, .planner > *,
.greeting > *, .cert-wrap > *, .map-grid > *, .clients-grid > *, .service-grid > *,
.why-grid > *, .point-grid > *, .steps > *, .icon-grid > *, .price-grid > *,
.footer-inner > *, .footer-nav > *, .cert-strip-inner > * { min-width: 0; }

@media (max-width: 768px) {
  .section-title { font-size: 23px; letter-spacing: .02em; line-height: 1.6; }
  .recruit-title { font-size: 24px; }
  .page-hero h1 { font-size: 26px; letter-spacing: .02em; line-height: 1.5; }
  .section-head { margin-bottom: 48px; }
  .section-lead { font-size: 14px; letter-spacing: .02em; line-height: 1.95; }
  .hero-sub { font-size: 14px; letter-spacing: .02em; }
  .page-hero-lead { font-size: 14px; }
  .intro-text { font-size: 15px; }
  .feature-title { font-size: 19px; }
  .why-title { font-size: 18px; }
  .footer-tag { font-size: 12.5px; }
}

/* grid column variants (replaces inline styles so mobile rules can apply) */
.lineup-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.lineup-grid.cols-5 { grid-template-columns: repeat(5,1fr); }
.lineup-grid.cols-2-narrow { grid-template-columns: repeat(2,1fr); max-width:600px; margin:0 auto 48px; }
.steps.cols-3 { grid-template-columns: repeat(3,1fr); }
.icon-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.why-grid.cols-2-narrow { grid-template-columns: 1fr 1fr; max-width:900px; margin:0 auto; }
@media (max-width: 1000px) {
  .lineup-grid.cols-5, .lineup-grid.cols-4 { grid-template-columns: repeat(3,1fr); }
  .icon-grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .steps.cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .lineup-grid.cols-5, .lineup-grid.cols-4, .lineup-grid.cols-2-narrow { grid-template-columns: repeat(2,1fr); }
  .icon-grid.cols-4, .steps.cols-3, .why-grid.cols-2-narrow { grid-template-columns: 1fr; }
  .lineup-item { padding: 20px 12px; font-size: 12.5px; }
  /* spec list: label above value on phones */
  .spec-list li { grid-template-columns: 1fr; gap: 2px; }
}
/* body text: no line may start with ー, small kana, closing brackets */
p, li, dd, td, th { line-break: strict; }

.btn { word-break: keep-all; overflow-wrap: anywhere; }
.btn .btn-en { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .legal table { font-size: 13px; }
  .legal th, .legal td { padding: 8px 10px; }
  .legal th { width: 40%; }
  /* category table: stack label above examples */
  .legal-table-cat, .legal-table-cat tbody, .legal-table-cat tr, .legal-table-cat th, .legal-table-cat td { display: block; width: auto; }
  .legal-table-cat td { border-top: none; margin-bottom: 10px; }
}

/* ---------- contact form states ---------- */
.hp-field { position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.field-error { margin-top:8px; font-size:13px; color:#B03A3A; }
.form-row [aria-invalid="true"] { border-color:#B03A3A; }
.form-status { margin-top:8px; text-align:center; font-size:14px; color:var(--c-accent); }
.form-status.is-error { color:#B03A3A; }
.contact-form button[disabled] { opacity:.6; cursor:wait; transform:none; }
.form-done { max-width:720px; margin:0 auto; background:#fff; padding:56px clamp(24px,5vw,56px); text-align:center; border-top:2px solid var(--c-accent); }
.form-done:focus { outline:none; }
.form-done-title { font-size:22px; font-weight:700; color:var(--c-ink); margin:4px 0 16px; }
.form-done p { font-size:14px; line-height:2; color:var(--c-charcoal); }
.form-done-note { margin-top:12px; font-size:13px !important; color:var(--c-text-sub) !important; }
.news-item .news-row { display:grid; grid-template-columns:140px 120px 1fr; gap:32px; padding:28px 8px; align-items:center; }
@media (max-width:768px){
  .news-item .news-row { grid-template-columns:auto auto; grid-template-areas:"date cat" "title title"; gap:8px 16px; padding:22px 4px; }
}