/* ============================================================
   株式会社章建 公式HP / styles.css
   系列ベース: 株式会社JGS(端正コーポレートの骨格)
   差別化: 自作ロゴ由来の 黄緑×オレンジ×チャコール / 暖色オフホワイト地
   方針: 構造はJGS譲りの堅実さ、体温はロゴ由来の温かみ・安心感
   ============================================================ */

:root {
  /* === ベース面 === */
  --base:   #ffffff;   /* ページ背景 */
  --sub:    #faf7f1;   /* セクション切替・カード副背景(暖色オフホワイト) */

  /* === ブランド3色(自作ロゴ由来) === */
  --ink:    #2d2d2d;   /* チャコール:構造色。見出し・フッター・ナビ・主要CTA */
  --green:  #6fa82e;   /* 黄緑(明):アイコン・下線・ドット・装飾。白地の文字には使わない */
  --green-bright: #8cc152; /* 明るい黄緑:ウォーターマーク・濃色地ラベル・装飾 */
  --green-deep: #4a8420; /* 黄緑(濃):白地のテキスト・白文字ボタン用(白文字 4.55:1 ✓ AA) */
  --orange: #ef8200;   /* オレンジ(明):アイコン・下線・帯などの装飾。白地の文字には使わない */
  --orange-deep: #b85c00; /* オレンジ(濃):白地のテキスト・大きな数字・白文字ボタン用(白文字 4.6:1 ✓ AA) */
  --orange-dk: #9c4e00; /* オレンジ最濃:濃色ボタンのホバー用 */

  /* === テキスト === */
  --text:        #2b2b29;   /* 本文 */
  --text-muted:  #6f6b62;   /* 弱文字(暖色グレー) */
  --text-on-ink: #ffffff;   /* チャコール背景上 */
  --border:      #e9e4da;   /* 罫線(暖色グレー) */

  /* === 派生色 === */
  --ink-hover:    color-mix(in srgb, var(--ink), black 12%);
  --green-soft:   color-mix(in srgb, var(--green), white 86%);
  --orange-soft:  color-mix(in srgb, var(--orange), white 88%);
  --ink-soft:     color-mix(in srgb, var(--ink), white 92%);

  /* === フォント(JGS系列) === */
  --font-heading: 'Noto Serif JP', serif;
  --font-body:    'Noto Sans JP', sans-serif;

  /* === レイアウト === */
  --container:        1200px;
  --container-narrow: 940px;
  --gap-section:      108px;
  --radius:           10px;
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--base);
  line-height: 1.85;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  line-break: strict;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.serif { font-family: var(--font-heading); }

/* 日本語の改行を自然に */
h1, h2, h3, .section-title, .access-address, .biz-title, .hero h1 {
  overflow-wrap: break-word; line-break: strict;
}
@supports (word-break: auto-phrase) {
  .hero-sub, .lead, .biz-desc, .about-body p, .section-desc,
  .recruit-lead, .access-note {
    word-break: auto-phrase;
  }
}

/* ============ HEADER / NAV ============ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--base) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.logo {
  display: flex; align-items: center; gap: 11px;
  color: var(--text);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), opacity 0.3s;
}
.logo:hover { transform: translateY(-1px); opacity: 0.92; }
.logo-mark { height: 42px; width: 42px; flex-shrink: 0; }
.logo-full { height: 54px; width: auto; display: block; }
.logo-words { display: flex; flex-direction: column; line-height: 1.05; }
.logo-corp { font-size: 10px; letter-spacing: 0.22em; color: var(--text-muted); font-weight: 700; }
.logo-name {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--ink);
  border-top: 2px solid var(--orange);
  padding-top: 1px; margin-top: 1px;
}

.nav-links { display: flex; gap: 22px; list-style: none; align-items: center; }
.nav-links a {
  color: var(--text); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; transition: color 0.2s;
  position: relative; padding: 4px 0;
}
.nav-links a:not(.nav-cta):not(.nav-tel)::after {
  content: ''; position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 2px; background: var(--green);
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:not(.nav-cta):not(.nav-tel):hover::after { width: 100%; left: 0; }
.nav-links a:hover { color: var(--green-deep); }
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; color: var(--ink) !important; letter-spacing: 0.02em;
}
.nav-tel svg { width: 15px; height: 15px; fill: var(--orange); }
.nav-links a.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff !important;
  padding: 12px 28px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  border-radius: 8px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-cta svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.25s; }
.nav-cta:hover {
  background: #1b1b19; transform: translateY(-2px);
  box-shadow: 0 12px 22px -10px rgba(28,28,26,0.5);
}
.nav-cta:hover svg { transform: translateX(3px); }

/* ハンバーガー */
.nav-toggle {
  display: none; background: transparent; border: none;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; z-index: 101;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 130% at 85% -10%, color-mix(in srgb, var(--green-bright), transparent 78%) 0%, transparent 55%),
    radial-gradient(110% 120% at -10% 110%, color-mix(in srgb, var(--orange), transparent 84%) 0%, transparent 50%),
    var(--sub);
  padding: 96px 32px 80px;
}

/* ============ BUTTONS ============ */
.btn {
  padding: 15px 28px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.22s; border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--green-deep), black 14%); transform: translateY(-2px); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--green-deep), transparent 40%); }
.btn-orange { background: var(--orange-deep); color: #fff; }
.btn-orange:hover { background: var(--orange-dk); transform: translateY(-2px); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--orange), transparent 40%); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-hover); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 15px; }

/* ============ SECTION COMMON ============ */
section { padding: var(--gap-section) 32px; scroll-margin-top: 72px; }
section.tight { padding: 76px 32px; }
section.surface-sub { background: var(--sub); }
section.surface-ink { background: var(--ink); color: var(--text-on-ink); }
.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--green-deep); letter-spacing: 0.28em;
  margin-bottom: 16px; font-weight: 700;
}
.section-label::before, .section-label::after {
  content: ''; width: 22px; height: 2px; background: var(--orange);
}
.section-title {
  font-family: var(--font-heading); font-size: 33px; font-weight: 900;
  color: var(--ink); letter-spacing: 0.01em; line-height: 1.45;
}
.surface-ink .section-title { color: #fff; }
.surface-ink .section-label { color: var(--green-bright); }
.section-title .accent { color: var(--orange-deep); }
.section-desc {
  color: var(--text-muted); font-size: 15px; line-height: 2;
  max-width: 680px; margin: 20px auto 0;
}
.surface-ink .section-desc { color: rgba(255,255,255,0.82); }
.section-cta { text-align: center; margin-top: 48px; }

/* ============================================================
   ★ 札幌営業所アクセス(最重点・ヒーロー直下)
   ============================================================ */
.access {
  padding: 84px 32px;
  background:
    linear-gradient(180deg, var(--base) 0%, var(--sub) 100%);
}
.access-inner { max-width: var(--container); margin: 0 auto; }
.access-head { text-align: center; margin-bottom: 40px; }
.access-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange-deep); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  padding: 7px 18px; border-radius: 999px; margin-bottom: 18px;
}
.access-badge svg { width: 15px; height: 15px; fill: #fff; }
.access-head h2 {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900;
  color: var(--ink); line-height: 1.4;
}
.access-head p { color: var(--text-muted); font-size: 15px; margin-top: 14px; }

.access-card {
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 26px 60px -36px rgba(45,45,45,0.32);
}
.access-info { padding: 44px 42px; }
.access-office-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--green-deep); margin-bottom: 18px;
}
.access-office-label::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px var(--green-soft);
}
.access-zip { font-size: 14px; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 6px; }
.access-address {
  font-family: var(--font-heading); font-size: 27px; font-weight: 900;
  color: var(--ink); line-height: 1.55; letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.access-bldg { font-size: 18px; font-weight: 700; color: var(--ink); }
.access-tel-block {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 28px; padding-top: 22px; border-top: 1px dashed var(--border);
}
.access-tel-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.1em; font-weight: 700; }
.access-tel-num {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900;
  color: var(--orange-deep); letter-spacing: 0.02em; line-height: 1;
}
.access-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.access-btns .btn-map { grid-column: 1 / -1; }
.access-note {
  margin-top: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.8;
}
.access-map { position: relative; min-height: 340px; background: var(--sub); }
.access-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ヒーロー直下の簡易アクセスバー */
.access-bar {
  background: var(--ink); color: #fff;
  padding: 16px 32px;
}
.access-bar-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 14px 26px; flex-wrap: wrap; text-align: center;
}
.access-bar-pin { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.access-bar-pin svg { width: 18px; height: 18px; fill: var(--green-bright); flex-shrink: 0; }
.access-bar-addr { font-size: 14px; color: rgba(255,255,255,0.9); }
.access-bar a {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--orange-deep); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; transition: background 0.2s, transform 0.2s;
}
.access-bar a:hover { background: var(--orange-dk); transform: translateY(-1px); }
.access-bar a svg { width: 15px; height: 15px; fill: #fff; }

/* トースト */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 999px; z-index: 3000;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
  display: inline-flex; align-items: center; gap: 9px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 17px; height: 17px; fill: var(--green-bright); }

/* ============ ABOUT(章建について) ============ */
.about-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.about-visual {
  aspect-ratio: 4 / 4.4; border-radius: var(--radius); position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--green-soft), var(--orange-soft));
  border: 1px solid var(--border);
}
.about-visual::before {
  content: attr(data-kanji); position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); font-family: var(--font-heading);
  font-size: 230px; font-weight: 900; color: var(--ink); opacity: 0.1;
}
.about-visual-tag {
  position: absolute; left: 22px; bottom: 22px;
  background: rgba(255,255,255,0.9); border-radius: 8px; padding: 12px 18px;
  font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.6;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.3);
}
.about-text .section-label { margin-bottom: 14px; }
.about-heading {
  font-family: var(--font-heading); font-size: 28px; font-weight: 900;
  line-height: 1.55; color: var(--ink); margin-bottom: 24px;
}
.about-heading .mark {
  background: linear-gradient(transparent 64%, var(--orange-soft) 64%, var(--orange-soft) 92%, transparent 92%);
  padding: 0 3px;
}
.about-body { color: var(--text); font-size: 15px; line-height: 2.1; }
.about-body p + p { margin-top: 16px; }
.about-points {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px;
}
.about-points span {
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--sub); border: 1px solid var(--border); border-left: 3px solid var(--green);
  padding: 9px 15px; border-radius: 6px;
}

/* ============ 事業紹介(BIZ) ============ */
.biz-stack { display: flex; flex-direction: column; gap: 30px; }
.biz-card {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 0;
  background: var(--base); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.biz-card:hover { box-shadow: 0 24px 50px -32px rgba(45,45,45,0.3); transform: translateY(-3px); }
.biz-card.featured { border-color: color-mix(in srgb, var(--green), transparent 55%); }
.biz-visual {
  position: relative; min-height: 320px; overflow: hidden;
  background: linear-gradient(150deg, var(--ink) 0%, #3b3b38 100%);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.biz-card.featured .biz-visual { background: linear-gradient(150deg, #2f3a24 0%, var(--ink) 100%); }
.biz-visual::after {
  content: attr(data-num); position: absolute; right: 14px; top: 6px;
  font-family: var(--font-heading); font-size: 120px; font-weight: 900;
  color: rgba(255,255,255,0.06); line-height: 1;
}
.biz-visual-ico {
  width: 76px; height: 76px; color: var(--green-bright); position: relative; z-index: 1;
}
.biz-card.featured .biz-visual-ico { color: var(--green-bright); }
.biz-visual-en {
  position: absolute; left: 26px; bottom: 22px; z-index: 1;
  font-size: 11px; letter-spacing: 0.24em; color: rgba(255,255,255,0.7); font-weight: 700;
}
.biz-body { padding: 40px 42px; }
.biz-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: #fff; background: var(--green-deep); padding: 5px 13px; border-radius: 999px;
  margin-bottom: 16px;
}
.biz-card:not(.featured) .biz-tag { background: var(--ink); }
.biz-tag.main { background: var(--orange-deep); }
.biz-title {
  font-family: var(--font-heading); font-size: 24px; font-weight: 900;
  color: var(--ink); line-height: 1.45; margin-bottom: 16px;
}
.biz-desc { color: var(--text); font-size: 14.5px; line-height: 2; margin-bottom: 22px; }
.biz-sub { font-size: 12px; font-weight: 700; color: var(--green-deep); letter-spacing: 0.1em; margin-bottom: 10px; }
.biz-tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.biz-tags-row span {
  font-size: 12.5px; color: var(--ink); background: var(--sub);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px;
}
.biz-scope {
  background: var(--sub); border-radius: 8px; padding: 18px 20px; margin-bottom: 20px;
}
.biz-scope-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--green-deep); margin-bottom: 10px; }
.biz-scope-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.biz-scope-flow .arr { color: var(--orange-deep); font-weight: 900; }
.biz-points { list-style: none; display: grid; gap: 10px; }
.biz-points li {
  position: relative; padding-left: 26px; font-size: 14px; line-height: 1.75; color: var(--text);
}
.biz-points li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green-soft);
}
.biz-points li::after {
  content: ''; position: absolute; left: 5px; top: 11px;
  width: 4px; height: 7px; border: solid var(--green); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============ 採用(RECRUIT) ============ */
.recruit-box {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
  max-width: var(--container); margin: 0 auto;
}
.recruit-lead { font-size: 15px; line-height: 2.1; color: var(--text); margin-bottom: 26px; }
.recruit-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.recruit-points div {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.recruit-points div svg { width: 22px; height: 22px; color: var(--green-deep); flex-shrink: 0; }
.recruit-visual {
  border-radius: var(--radius); aspect-ratio: 4/3.4; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--orange-soft), var(--green-soft));
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.recruit-visual-ico { width: 80px; height: 80px; color: var(--ink); opacity: 0.5; }

/* ============ 会社概要(COMPANY) ============ */
.company-table { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--border); }
.company-row {
  display: grid; grid-template-columns: 220px minmax(0,1fr);
  padding: 24px 22px; border-bottom: 1px solid var(--border); align-items: start;
}
.company-row dt {
  font-family: var(--font-heading); font-size: 14px; color: var(--green-deep);
  font-weight: 700; letter-spacing: 0.08em;
}
.company-row dd { color: var(--text); font-size: 15px; line-height: 1.9; overflow-wrap: break-word; }
.company-row dd .em { color: var(--ink); font-weight: 700; }
.company-row dd .tbc { color: var(--text-muted); font-size: 13px; }
.company-map-mini {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--orange-deep);
}
.company-map-mini svg { width: 15px; height: 15px; fill: var(--orange); }

/* ============ お問い合わせ(CONTACT) ============ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; }
.contact-card {
  background: var(--base); border: 1px solid var(--border); border-top: 4px solid var(--orange);
  border-radius: var(--radius); padding: 36px 34px;
}
.contact-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.contact-card p { font-size: 14px; color: var(--text-muted); line-height: 1.9; margin-bottom: 20px; }
.contact-tel-big {
  display: block; font-family: var(--font-heading); font-size: 32px; font-weight: 900;
  color: var(--orange-deep); letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 4px;
}
.contact-tel-hours { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; }
.contact-card .btn { width: 100%; }
.contact-card .access-mini {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.85; color: var(--text);
}
.contact-card .access-mini strong { color: var(--ink); }

.contact-form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 6px; }
.form-row.two-col { grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { font-size: 12px; color: var(--green-deep); letter-spacing: 0.1em; font-weight: 700; }
.form-label .req { color: var(--orange-deep); margin-left: 6px; font-size: 10px; }
.form-input, .form-textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--text);
  background: var(--base); border: 1px solid var(--border); border-radius: 7px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: var(--green-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green), transparent 84%);
}
.form-textarea { resize: vertical; min-height: 130px; line-height: 1.8; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.form-consent input { margin-top: 4px; flex-shrink: 0; }
.form-submit-row { margin-top: 6px; }
.form-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.7; }

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: var(--text-on-ink); padding: 56px 32px 22px; }
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px;
  padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-brand-name {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.footer-brand-name .logo-mark { height: 40px; width: 40px; background: #fff; border-radius: 9px; padding: 0; object-fit: cover; }
.footer-brand-name span {
  font-family: var(--font-heading); font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 0.05em;
}
.footer-tagline { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.95; max-width: 320px; }
.footer-head { font-family: var(--font-heading); font-size: 13px; color: #fff; margin-bottom: 16px; letter-spacing: 0.12em; font-weight: 700; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a, .footer-links span { color: rgba(255,255,255,0.72); font-size: 13px; transition: color 0.2s; line-height: 1.7; }
.footer-links a:hover { color: #fff; }
.footer-office-addr { color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.85; margin-bottom: 12px; }
.footer-office-addr strong { color: #fff; display: block; font-size: 14px; margin-bottom: 4px; }
.footer-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s; font-family: inherit;
}
.footer-mini-btn svg { width: 14px; height: 14px; fill: currentColor; }
.footer-mini-btn.is-orange { background: var(--orange-deep); border-color: var(--orange-deep); }
.footer-mini-btn.is-orange:hover { background: var(--orange-dk); border-color: var(--orange-dk); }
.footer-mini-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-nav a { color: rgba(255,255,255,0.72); font-size: 13px; transition: color 0.2s; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: center; padding-top: 16px; color: rgba(255,255,255,0.5); font-size: 12px; }

/* ============ ANIMATIONS ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .access-card { grid-template-columns: 1fr; }
  .access-map { min-height: 280px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-visual { max-width: 460px; margin: 0 auto; width: 100%; aspect-ratio: 16/11; }
  .biz-card { grid-template-columns: 1fr; }
  .biz-visual { min-height: 200px; }
  .recruit-box { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .logo-full { height: 44px; }
  .header-inner { padding: 10px 18px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--base);
    border-top: 1px solid var(--border); flex-direction: column; gap: 0;
    padding: 6px 0 14px; max-height: calc(100vh - 64px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform 0.25s ease-out, opacity 0.2s; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12);
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a:not(.nav-cta) { display: block; padding: 15px 22px; font-size: 15px; }
  .nav-links a:not(.nav-cta):not(.nav-tel)::after { display: none; }
  .nav-tel { display: flex; align-items: center; padding: 16px 22px; font-size: 17px; }
  .nav-tel svg { width: 17px; height: 17px; }
  .nav-links a.nav-cta {
    display: flex; align-items: center; justify-content: center;
    margin: 12px 18px 6px; padding: 15px 22px; font-size: 15px;
  }

  section { padding: 60px 20px; }
  section.tight { padding: 52px 20px; }
  .hero { padding: 64px 20px 56px; }
  .hero h1 { font-size: 29px; line-height: 1.55; }
  .hero-sub { font-size: 15px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .access { padding: 56px 20px; }
  .access-bar { padding: 14px 20px; }
  .access-bar-inner { flex-direction: column; gap: 10px; }
  .access-info { padding: 32px 24px; }
  .access-address { font-size: 22px; }
  .access-tel-num { font-size: 25px; }
  .access-btns { grid-template-columns: 1fr; }
  .access-head h2 { font-size: 23px; }
  .section-title { font-size: 24px; line-height: 1.5; }
  .section-head { margin-bottom: 38px; }
  .about-heading { font-size: 22px; }
  .biz-body { padding: 30px 24px; }
  .biz-title { font-size: 20px; }
  .company-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 8px; }
  .form-row.two-col { grid-template-columns: 1fr; gap: 16px; }
  .footer { padding: 48px 20px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .contact-tel-big { font-size: 28px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 25px; }
  .access-address { font-size: 20px; }
  .section-title { font-size: 21px; }
}

/* ============================================================
   写真スロット(差し込み式)
   img/ に対応ファイルを置くと自動で写真表示。無い時は下のグラデ装飾に
   フォールバックするため、画像が無くても崩れない(背景画像の404は無害)。
   差し込むファイル名・サイズ・生成プロンプトは _素材ストック/画像指示書.md 参照。
   ── 暗いオーバーレイ付きスロット(白文字・アイコンが乗るため): hero / 事業①② ──
   ── オーバーレイ無しスロット(明るい面): about / recruit ──
   ============================================================ */

/* ① ヒーローのチーム写真は HTML の <img src="img/hero.jpg"> で直接表示(末尾「ヒーロー刷新」ブロック参照) */

/* ② 章建について 左ビジュアル: img/about.jpg(明るい面・オーバーレイ無し) */
.about-visual {
  background:
    url('img/about.jpg') center/cover no-repeat,
    linear-gradient(150deg, var(--green-soft), var(--orange-soft));
}
/* 写真が入った時に巨大な「章」ウォーターマークが主張しすぎないよう薄める */
.about-visual::before { opacity: 0.08; }

/* ③ 事業① 医療機器搬出入 左ビジュアル: img/business-medical.jpg */
.biz-visual[data-num="01"] {
  background:
    linear-gradient(150deg, rgba(31,38,24,0.52) 0%, rgba(36,36,34,0.80) 100%),
    url('img/business-medical.jpg') center/cover no-repeat,
    linear-gradient(150deg, #2f3a24 0%, var(--ink) 100%);
}

/* ④ 事業② 建設現場業務請負 左ビジュアル: img/business-construction.jpg */
.biz-visual[data-num="02"] {
  background:
    linear-gradient(150deg, rgba(36,36,34,0.50) 0%, rgba(36,36,34,0.78) 100%),
    url('img/business-construction.jpg') center/cover no-repeat,
    linear-gradient(150deg, var(--ink) 0%, #3b3b38 100%);
}

/* ⑤ 採用案内 右ビジュアル: img/recruit.jpg(明るい面・オーバーレイ無し) */
.recruit-visual {
  background:
    url('img/recruit.jpg') center/cover no-repeat,
    linear-gradient(150deg, var(--orange-soft), var(--green-soft));
}
/* 写真が入った時にアイコンが目立ちすぎないよう薄める */
.recruit-visual .recruit-visual-ico { opacity: 0.28; }

/* ============================================================
   REFINEMENT パス(2026-06-16)
   構成・配色は維持し、テンプレ感の出る装飾を上質に作り替える。
   ・見出しの対称バー → エディトリアルな単線+番号
   ・ボタンのピル → 建築/B2Bらしい角丸6pxの端正なボタン
   ・余白/罫線/ホバーの精緻化
   ============================================================ */

/* --- セクション見出し: 対称バーをやめ、単線+トラッキングの端正な体裁に --- */
.section-label {
  position: relative;
  font-size: 11px; letter-spacing: 0.34em; font-weight: 700;
  color: var(--green-deep); text-transform: uppercase;
  gap: 0;
}
.section-label::before { width: 26px; height: 1px; background: var(--orange); margin-right: 12px; opacity: 1; }
.section-label::after { content: none; }
.surface-ink .section-label { color: var(--green-bright); }
.surface-ink .section-label::before { background: var(--green-bright); opacity: 0.7; }

.section-title { letter-spacing: 0.015em; line-height: 1.5; }
.section-desc { color: var(--text-muted); }

/* --- ボタン: 端正な角丸6px・落ち着いた字間・上質なホバー --- */
.btn {
  border-radius: 6px; letter-spacing: 0.02em; gap: 9px;
  padding: 15px 26px; transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.btn svg { width: 16px; height: 16px; opacity: 0.92; }
.btn-lg { padding: 17px 30px; border-radius: 7px; }
.btn-primary:hover, .btn-orange:hover, .btn-ink:hover { transform: translateY(-1px); }
.btn-outline { border-color: color-mix(in srgb, var(--ink), transparent 78%); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* アクセス3ボタン: 端正な角丸・分かりやすさは維持しつつ上質に */
.access-btns .btn { border-radius: 7px; font-size: 14.5px; padding: 16px 24px; }

/* --- カード/罫線/余白: ヘアライン化と余白の精緻化 --- */
.access-card { border-radius: 12px; box-shadow: 0 30px 80px -52px rgba(45,45,45,0.4); }
.biz-card { border-radius: 12px; }
.biz-card:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -40px rgba(45,45,45,0.28); }

/* --- about のポイントチップ: 角丸を締め、ブランドの細線アクセントで端正に --- */
.about-points span {
  background: transparent; border: 1px solid var(--border); border-left: 2px solid var(--orange);
  border-radius: 4px; font-weight: 700; color: var(--ink); font-size: 12.5px; padding: 8px 14px;
}

/* --- 採用ポイント: チェックの線アイコンをやめ、ブランドの細い縦線+太字に --- */
.recruit-points div {
  position: relative; padding: 9px 0 9px 18px; gap: 0; align-items: flex-start;
  border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.6;
}
.recruit-points div:last-child { border-bottom: none; }
.recruit-points div svg { display: none; }
.recruit-points div::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  background: linear-gradient(var(--green), var(--orange)); border-radius: 2px;
}

/* --- 事業カードの番号を主役に、線アイコンは控えめに --- */
.biz-visual::after { font-size: 150px; right: 18px; top: -6px; opacity: 1; color: rgba(255,255,255,0.07); }
.biz-visual-ico { width: 58px; height: 58px; opacity: 0.85; stroke-width: 1.3; }
.biz-visual-en { letter-spacing: 0.3em; }

/* --- ヘッダー: ロゴ拡大に合わせ高さ・余白を最適化 --- */
.header-inner { padding: 14px 32px; }

/* --- フッターのミニボタンを端正に --- */
.footer-mini-btn { border-radius: 6px; }

/* --- 安全・品質: 番号主役のエディトリアル一覧(線アイコン廃止) --- */
.safety-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  max-width: 1000px; margin: 0 auto;
}
.safety-row {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 4px; border-bottom: 1px solid rgba(255,255,255,0.13);
}
.safety-num {
  font-family: var(--font-heading); font-size: 19px; font-weight: 900;
  color: var(--green-bright); line-height: 1; flex-shrink: 0; min-width: 34px; padding-top: 3px;
}
.safety-body h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.5; }
.safety-body p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.85; }
@media (max-width: 760px) {
  .safety-list { grid-template-columns: 1fr; }
  .safety-row { padding: 20px 2px; }
}

/* --- お問い合わせ: 電話番号を主役にした端正なパネル --- */
.contact-card { border-top: 1px solid var(--border); padding: 38px 36px; }
.contact-kicker {
  display: inline-block; font-family: var(--font-heading);
  font-size: 18px; font-weight: 900; color: var(--ink); margin-bottom: 12px; letter-spacing: 0.02em;
}
.contact-card-lead { font-size: 14px; color: var(--text-muted); line-height: 1.95; margin-bottom: 26px; }
.contact-tel-big { font-size: 35px; margin-bottom: 6px; }
.contact-tel-hours { font-size: 12.5px; color: var(--text-muted); margin-bottom: 24px; letter-spacing: 0.02em; }
.contact-call-btn { width: 100%; }
.contact-addr {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.contact-addr-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--green-deep); }
.contact-addr-text { font-size: 14px; color: var(--ink); line-height: 1.85; }
.contact-addr-link {
  align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--orange-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--orange-deep), transparent 55%); padding-bottom: 2px;
  transition: border-color 0.2s, opacity 0.2s;
}
.contact-addr-link::after { content: ' →'; }
.contact-addr-link:hover { opacity: 0.78; }

/* フォーム入力も角丸を本体ボタンと揃え、フォーカスを上質に */
.form-input, .form-textarea { border-radius: 6px; }
.form-submit-row .btn { border-radius: 7px; }

/* --- アクセス情報: 社名+住所を均一・控えめサイズで(電話・案内文は撤去) --- */
.access-info { align-content: center; }
.access-office-name {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.02em; margin-bottom: 14px;
}
.access-addr-lines {
  font-size: 15px; line-height: 2; color: var(--ink); margin-bottom: 26px;
}
.access-btns.access-btns-2 { grid-template-columns: 1fr; gap: 12px; }

/* --- 事業カード: 画像+短い解説のみ。本文を縦中央に --- */
.biz-body { display: flex; flex-direction: column; justify-content: center; }
.biz-desc { margin-bottom: 0; }
@media (max-width: 980px) { .biz-body { justify-content: flex-start; } }

/* --- ステートメント・バンド(全幅シネマティック) --- */
.statement-band {
  position: relative; padding: 132px 32px; overflow: hidden; color: #fff;
  background:
    linear-gradient(95deg, rgba(28,28,26,0.90) 0%, rgba(28,28,26,0.66) 46%, rgba(28,28,26,0.30) 100%),
    url('img/band.jpg') center 38%/cover no-repeat,
    var(--ink);
}
.statement-band-inner { max-width: var(--container); margin: 0 auto; }
.statement-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.32em; font-weight: 700; text-transform: uppercase;
  color: var(--green-bright); margin-bottom: 24px;
}
.statement-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--orange); }
.statement-title {
  font-family: var(--font-heading); font-size: 40px; font-weight: 900;
  line-height: 1.5; letter-spacing: 0.02em; margin-bottom: 26px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.statement-text {
  font-size: 16px; line-height: 2.05; color: rgba(255,255,255,0.9);
  max-width: 560px; text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
@media (max-width: 760px) {
  .statement-band {
    padding: 88px 20px;
    background:
      linear-gradient(180deg, rgba(28,28,26,0.78) 0%, rgba(28,28,26,0.62) 100%),
      url('img/band.jpg') center/cover no-repeat, var(--ink);
  }
  .statement-title { font-size: 27px; line-height: 1.6; }
  .statement-text { font-size: 15px; }
}

/* ============================================================
   ヒーロー(2026-06-16): 画像オーバーレイ型・シネマティック
   画像を薄暗く加工し、その上にキャッチ+サブ+2 CTA を重ねる。
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 78vh;
  padding: 132px 32px;
  background: var(--ink);          /* 画像未読込時のフォールバック */
  scroll-margin-top: 0;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.hero::after {                     /* 薄暗いオーバーレイ(影) */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18,18,16,0.46) 0%, rgba(18,18,16,0.56) 52%, rgba(18,18,16,0.70) 100%),
    radial-gradient(125% 95% at 50% 42%, transparent 0%, rgba(18,18,16,0.30) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto; text-align: center; color: #fff;
  animation: fadeUp 0.8s ease-out both;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: 46px; font-weight: 900; line-height: 1.55; letter-spacing: 0.06em;
  color: #fff; margin: 0 auto 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.hero-sub {
  font-size: 17px; line-height: 2; color: rgba(255,255,255,0.94);
  max-width: 660px; margin: 0 auto 36px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { min-width: 250px; box-shadow: 0 16px 34px -16px rgba(0,0,0,0.55); }

@media (max-width: 760px) {
  .hero { min-height: 84vh; padding: 104px 22px 92px; }
  .hero h1 { font-size: 23px; line-height: 1.7; letter-spacing: 0.01em; margin-bottom: 18px; }
  .hero-sub { font-size: 14.5px; line-height: 1.95; margin-bottom: 28px; }
  .hero-cta { flex-direction: column; gap: 12px; }
  .hero-cta .btn { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 19.5px; letter-spacing: 0; }
}

/* ============================================================
   お問い合わせフォーム: 単列・中央寄せ(指定の簡素フォーム)
   ============================================================ */
.contact-form-single { max-width: 620px; margin: 0 auto; }
.contact-form-single .form-label { font-size: 13px; }
.sp-only { display: none; }
@media (max-width: 760px) { .sp-only { display: inline; } }

/* ============================================================
   採用: 強みは「タグ」/ 面接案内は独立カードに分離
   ============================================================ */
.recruit-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.recruit-tags span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--green-soft);
  border: 1px solid color-mix(in srgb, var(--green), transparent 62%);
  border-radius: 999px; padding: 9px 17px;
}
.recruit-tags span svg { width: 15px; height: 15px; color: var(--green-deep); flex-shrink: 0; }

.recruit-interview {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--base);
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 30px;
}
.recruit-interview svg { width: 22px; height: 22px; fill: var(--orange); flex-shrink: 0; margin-top: 1px; }
.recruit-interview p { font-size: 14px; line-height: 1.75; color: var(--text); margin: 0; }
.recruit-interview strong { color: var(--ink); font-weight: 700; }