@charset "utf-8";

/* ============================================================
   株式会社 トコデン（No.131）見本サイト
   配色・寸法はすべてこの :root で管理する。
   ここを変えれば全体が変わる。個別に数値を書かないこと。
   ============================================================ */

:root{
  /* 色 */
  --base:#FFFFFF;
  --base-tint:#E6EFF7;
  --main:#14486E;
  --accent:#F5A623;
  --sub:#3D8DBF;
  --line:#DCE7EF;
  --ink:#14486E;
  --ink-soft:#3E5F79;

  /* 見出しブロックの確定ルール（DESIGN.md 3-2） */
  --label-size:15px;
  --gap-label:6px;      /* 英字ラベル → 日本語見出し */
  --gap-head:38px;      /* 見出し → 説明文 */

  /* 余白 */
  --sec-pc:120px;
  --sec-sp:80px;
  --wrap:1200px;

  /* 角丸 */
  --r-photo:12px;
  --r-btn:4px;
  --r-pill:24px;

  /* ヒーロー画像（★あとでAI生成版に差し替える。指定はここ1箇所だけ） */
  --hero-image:url("images/hero-main.webp");

}

/* ---------- 土台 ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:18px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button,input,textarea{ font:inherit; }
.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }

/* ---------- デモの断り書き ---------- */
.demo-notice{
  background:var(--main); color:#fff;
  font-size:15px; line-height:1.7;
  padding:12px 24px;
}

/* ---------- ヘッダー（上に横並び） ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  /* メニューパネルの基準にする */
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(220,231,239,.8);
}
.header-inner{
  width:min(1400px, calc(100% - 64px)); margin-inline:auto;
  min-height:82px; display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap; }
.brand-mark{ flex:0 0 auto; width:auto; height:38px; display:block; }
.brand-copy{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-size:22px; font-weight:700; letter-spacing:.08em; }
.brand-sub{ font-size:10.5px; font-weight:600; color:var(--sub); letter-spacing:.16em; }

.header-nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav-recruit{ display:none; }
.header-nav a{
  position:relative; padding:6px 0;
  color:var(--ink); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.header-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sub); transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease;
}
.header-nav a:hover::after,.header-nav a:focus-visible::after,.header-nav a[aria-current]::after{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; gap:12px; }

/* 採用ボタン：ピル型・常時表示（オーナー要望） */
.btn-recruit{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  min-height:42px; padding:9px 22px;
  border:2px solid transparent; border-radius:var(--r-pill);
  background:#fff;
  color:#3A2400;
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease;
}
/* 塗り。ホバーでこれが消えて、白地＋枠線に反転する */
.btn-recruit::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(118deg, #FFC155 0%, #F5A623 46%, #E08A0C 100%);
  transition:opacity .3s ease;
}
.btn-recruit::after{
  content:"→";
  font-size:15px; font-weight:700; line-height:1;
  transition:transform .3s ease;
}
.btn-recruit:hover,.btn-recruit:focus-visible{
  border-color:#E08A0C;
  color:#C87A08;
}
.btn-recruit:hover::before,.btn-recruit:focus-visible::before{ opacity:0; }
.btn-recruit:hover::after,.btn-recruit:focus-visible::after{ transform:translateX(4px); }

/* 採用セクションの大きいボタン */
.btn-recruit--lg{
  min-height:66px; padding:19px 34px;
  font-size:17.5px; gap:16px;
}
.btn-recruit--lg::after{ font-size:17px; }
.header-tel{
  display:inline-flex; align-items:center; min-height:48px; padding:12px 20px;
  border:1px solid var(--main); border-radius:var(--r-btn);
  font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.header-tel:hover,.header-tel:focus-visible{ background:var(--main); color:#fff; }


/* ---------- ヘッダーのナビ：狭い画面では横スクロールの帯にする ---------- */
/* ヘッダーの電話ボタン（狭い画面のみ表示） */
.header-tel-btn{
  display:none;
  align-items:center; gap:7px;
  min-height:46px; padding:8px 16px;
  border:1px solid var(--main); border-radius:8px;
  background:#fff; color:var(--main);
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.header-tel-btn svg{ flex:0 0 auto; }
.header-tel-btn:hover,.header-tel-btn:focus-visible{ background:var(--main); color:#fff; }

/* ハンバーガーボタン（狭い画面のみ表示） */
.nav-toggle{
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:52px; min-height:46px; padding:6px 4px;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer;
}
.nav-toggle__bars{ display:flex; flex-direction:column; gap:4px; }
.nav-toggle__bars span{
  display:block; width:22px; height:2.5px; border-radius:2px;
  background:var(--main);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle__label{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--sub); line-height:1;
}

@media (max-width:1000px){
  .header-tel-btn{ display:inline-flex; margin-left:auto; }
  .nav-toggle{ display:flex; }
  .header-actions{ display:none; }
  .nav-recruit{ display:block; color:var(--accent) !important; }
  .header-inner{ min-height:64px; gap:12px; }

  /* メニュー本体は、開いたときだけ表示するパネル */
  .header-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(20,72,110,.10);
    max-height:76vh; overflow-y:auto;
    animation:navDrop .22s ease both;
  }
  @keyframes navDrop{
    from{ opacity:0; transform:translateY(-8px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .header-nav a{
    padding:16px 24px; font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .header-nav a::after{ display:none; }
  .header-nav a:last-child{ border-bottom:0; }

  body.nav-open .header-nav{ display:flex; }
  body.nav-open .nav-toggle__bars span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle__bars span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle__bars span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

/* ---------- 右の縦メニュー（大坪電気型） ---------- */
.side-nav{
  position:fixed; right:20px; top:172px; z-index:30;
  display:flex; flex-direction:column; gap:8px;
}
.side-nav a{
  min-width:150px; padding:11px 16px;
  border:1px solid var(--line); border-radius:var(--r-btn);
  background:rgba(255,255,255,.92);
  color:var(--main); font-size:14px; font-weight:700; text-align:right; text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.side-nav a:hover,.side-nav a:focus-visible{
  background:var(--main); color:#fff; transform:translateX(-3px);
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:16px 32px;
  border:1px solid var(--main); border-radius:var(--r-btn);
  font-weight:700; text-decoration:none; cursor:pointer; line-height:1.3;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn--fill{ background:var(--accent); border-color:var(--accent); color:#3A2A00; }
.btn--fill:hover,.btn--fill:focus-visible{ background:#FFB63C; transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--main); }
.btn--line:hover,.btn--line:focus-visible{ background:var(--main); color:#fff; transform:translateY(-2px); }

/* ---------- 見出しブロック（全セクション共通・例外を作らない） ----------
   英字ラベルを大きな“背景文字”として使い、日本語見出しを重ねる。
   日本語見出しの左には、アクセント色の短い縦棒を置く。            */
.sec-head, .about-head{ position:relative; }
.sec-head{ margin-bottom:72px; }

.eyebrow{
  display:block;
  margin:0 0 -0.26em;
  color:var(--sub);
  opacity:.17;
  font-size:clamp(44px, 6.4vw, 76px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  user-select:none;
}
.sec-title{
  position:relative;
  margin:0 0 var(--gap-head);
  padding-left:20px;
  font-size:clamp(28px,4vw,34px); line-height:1.45; font-weight:700;
}
.sec-title::before{
  content:"";
  position:absolute; left:0; top:.34em;
  width:5px; height:1.1em;
  border-radius:3px;
  background:linear-gradient(var(--accent), var(--sub));
}
section{ padding:var(--sec-pc) 0; }

/* ---------- ファーストビュー（全面写真＋文字を重ねる） ---------- */
.hero{
  position:relative;
  min-height:min(76vh, 680px);
  display:flex; align-items:flex-end;   /* 文字を下寄せ */
  overflow:hidden;
  isolation:isolate;
}
/* 背景写真 */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--hero-image) center 42%/cover no-repeat;
  animation:heroZoom 16s ease-out both;
}
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.05); } }

/* 左からの白いかすみ。これがあるので濃い文字が読める */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.90) 26%,
      rgba(255,255,255,.60) 46%,
      rgba(255,255,255,.16) 66%,
      rgba(255,255,255,0) 84%),
    linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.10));
}

.hero-inner{
  width:min(1400px, calc(100% - 64px)); margin-inline:auto;
  padding:72px 0 88px;
}
.hero-copy{ max-width:min(780px, 58%); }

.hero h1{
  margin:0 0 26px;
  font-size:clamp(30px,4.2vw,52px); line-height:1.6; font-weight:700;
  letter-spacing:.14em;
  text-wrap:balance;
}
.hero-lead{
  margin:0 0 36px;
  color:var(--ink-soft); font-size:clamp(15px,1.2vw,17px); line-height:2.05;
  letter-spacing:.02em; text-wrap:pretty;
}

@keyframes cue{ 0%,100%{ transform:scaleX(.4); transform-origin:left; } 50%{ transform:scaleX(1); transform-origin:left; } }

/* ---------- 私たちについて ---------- */
.about{
  position:relative; overflow-x:clip;
  padding-top:calc(var(--sec-pc) + 48px);
  padding-bottom:0;
  /* 上端は水色 → すぐ白へ。ファーストビューとの境目をはっきりさせる */
  background:linear-gradient(180deg,
    var(--base-tint) 0px,
    var(--base-tint) 52px,
    #F1F6FB 150px,
    var(--base) 300px,
    var(--base) 100%);
  text-align:center;
}
/* 下端に所沢の街並み。上へいくほど白く消し、文章に重ならないようにする */
.about::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:min(46%, 420px);
  background:
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.18)),
    url("images/about-town.webp") center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent 0%, #000 55%, #000 100%);
          mask-image:linear-gradient(transparent 0%, #000 55%, #000 100%);
}
.about > .wrap{ position:relative; z-index:1; padding-bottom:280px; }
.about-head{ max-width:none; margin-bottom:88px; text-align:center; }
.about .sec-title{ padding-left:0; margin-bottom:46px; }
.about .sec-title::before{ display:none; }
.about-lead{
  margin:0 0 40px;
  font-size:clamp(24px,3vw,32px); line-height:1.6; font-weight:700;
  color:var(--main);
}
.about-body{
  max-width:860px; margin-inline:auto;
  padding:0; border:0; background:none; box-shadow:none;
  text-align:center;
}
.about-body p{ margin:0 0 34px; text-wrap:pretty; }
.about-body p:last-child{ margin-bottom:0; }


/* ---------- モーダル ---------- */
.demo-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,30,45,.55);
}
.demo-modal[hidden]{ display:none; }
.demo-modal__box{
  width:min(420px,100%); padding:30px 26px;
  border-radius:8px; background:#fff; text-align:center;
}
.demo-modal__box p{ margin:0 0 22px; font-size:16px; line-height:1.8; white-space:pre-line; }
.demo-modal__box button{
  min-height:48px; padding:12px 34px;
  border:0; border-radius:var(--r-btn);
  background:var(--main); color:#fff; font-size:16px; font-weight:700; cursor:pointer;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* 縦メニューは幅が足りないと本文に重なるので、1280px未満で隠す */
@media (max-width:1279px){
  .side-nav{ display:none; }
}

/* 縦メニューが出る幅では、本文を左に寄せて重なりを避ける。
   1560px以上は本文の外側にメニューが収まるので、余白は不要（写真を大きく見せる） */
@media (min-width:1280px) and (max-width:1559px){
  .wrap,.hero-inner,  .hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:900px){

}

@media (max-width:720px){
  body{ font-size:16px; }
  .wrap,.hero-inner{ width:min(100% - 32px, var(--wrap)); }
  .header-inner{ width:calc(100% - 20px); }
  .demo-notice{ padding:12px 16px; font-size:14px; }

  .header-inner{ min-height:62px; gap:10px; }
  .brand-name{ font-size:18px; }
  .brand-sub{ display:none; }
  .header-tel{ min-height:42px; padding:10px 14px; font-size:14px; }
  .btn-recruit{ display:none; }   /* 下の固定バーにあるので重複を避ける */

  section{ padding:var(--sec-sp) 0; }
  .hero{ padding:0; align-items:flex-end; min-height:min(82vh, 680px); }
  .hero-copy{ max-width:100%; }
  .hero-inner{ padding:0 0 52px; }
  /* 手元が上のほうに写る位置で切り取る */
  .hero::before{ background-position:70% 22%; }
  /* かすみを下に。上は写真をそのまま見せ、下の文字だけ読めるようにする */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 30%,
      rgba(255,255,255,.72) 52%,
      rgba(255,255,255,.95) 70%,
      rgba(255,255,255,.98) 100%);
  }
  .hero h1{ font-size:27px; line-height:1.5; margin-bottom:18px; }
  .hero-lead{ margin-bottom:0; line-height:1.95; }
  
  .about-lead{ font-size:21px; margin-bottom:28px; }
  .about-body{ padding-left:16px; }

}

/* ============================================================
   セクション共通の見出しブロック
   ============================================================ */
.sec-head{ max-width:760px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-lead{ margin:0; color:var(--ink-soft); font-size:18px; text-wrap:pretty; }

/* ---------- 事業内容 ---------- */
.business{ background:var(--base-tint); }
.biz-list{ display:grid; gap:56px; }
.biz{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px; align-items:center;
}
.biz:nth-child(even) .biz-photo{ order:2; }
.biz-photo{
  aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-photo); background:#E6EEF5;
}
.biz-photo img{ width:100%; height:100%; object-fit:cover; }
.biz-photo--none{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed #B7CBDB; background:#EEF4F9;
  color:#8AA5BA; font-size:14px; font-weight:700;
}
.biz-body h3{ margin:0 0 14px; font-size:25px; font-weight:700; line-height:1.45; }
.biz-body p{ margin:0; font-size:17px; }

/* ---------- 施工実績 ---------- */
.works{ background:var(--base); }
.flow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px;
  margin:0 0 88px; padding:0; list-style:none;
  counter-reset:none;
}
.flow-step figure{ margin:0 0 16px; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-photo); background:#E6EEF5; }
.flow-step img{ width:100%; height:100%; object-fit:cover; }
.flow-body{ display:flex; gap:14px; align-items:flex-start; }
.flow-num{
  flex:0 0 auto; color:var(--accent); font-size:20px; font-weight:700; letter-spacing:.04em;
  line-height:1.7;
}
.flow-body p{ margin:0; font-size:17px; line-height:1.8; }

.works-list h3{ margin:0 0 8px; font-size:22px; font-weight:700; }
.works-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; margin-top:24px; }
.works-cols h4{
  margin:0 0 12px; padding-bottom:10px;
  border-bottom:2px solid var(--sub);
  font-size:17px; font-weight:700; color:var(--sub);
}
.works-cols ul{ margin:0; padding:0; list-style:none; }
.works-cols li{
  padding:12px 0 12px 20px; position:relative;
  border-bottom:1px solid var(--line); font-size:16px; line-height:1.75;
}
.works-cols li::before{
  content:""; position:absolute; left:2px; top:21px;
  width:6px; height:6px; border-radius:50%; background:var(--sub);
}

/* ---------- 社員紹介 ---------- */
/* 働く人を知る：上端にカーブ（採用セクションと同じあしらい） */
.members{
  position:relative; overflow-x:clip;
  padding-top:calc(var(--sec-pc) + 40px);
  background:var(--base-tint);
}
.members::before{
  content:""; position:absolute; left:-6%; right:-6%; top:-72px; height:150px;
  border-radius:0 0 52% 52%; background:var(--base);
}

/* 横に流れる社員カード（CSSのみ・外部ライブラリ不使用） */
.member-marquee{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.member-marquee::-webkit-scrollbar{ display:none; }
/* 左右の端をやわらかく消す */
.member-marquee{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.member-track{
  display:flex; gap:24px;
  width:max-content; margin:0; padding:4px 24px;
  list-style:none;
  animation:memberFlow 60s linear infinite;
}
@keyframes memberFlow{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 12px)); }  /* 2セットの半分＝1周 */
}
/* マウスを乗せている間、または指でなぞっている間は止める */
.member-marquee:hover .member-track,
.member-marquee:focus-within .member-track,
.member-marquee:active .member-track{ animation-play-state:paused; }

/* 動きを減らす設定の人には流さない（アクセシビリティ） */
@media (prefers-reduced-motion:reduce){
  .member-track{ animation:none; }
}

.member{ flex:0 0 244px; }


.member-photo{
  aspect-ratio:1/1; margin-bottom:14px; overflow:hidden;
  border-radius:var(--r-photo); background:#fff;
}
.member-photo img{ width:100%; height:100%; object-fit:cover; }
.member-photo--initial{
  display:flex; align-items:center; justify-content:center;
  background:var(--main);
}
.member-photo--initial::after{
  content:attr(data-initial); color:#fff; font-size:48px; font-weight:700;
}
.member-photo--initial span{ color:#fff; font-size:48px; font-weight:700; }
.member-photo--initial[data-initial] span{ display:none; }
.member-role{ margin:0 0 3px; color:#C87A08; font-size:14px; font-weight:700; letter-spacing:.04em; }
.member-name{ margin:0 0 12px; font-size:19px; font-weight:700; }
.member-word{ margin:0; font-size:16px; line-height:1.85; color:var(--ink-soft); }

/* ---------- 会社概要 ---------- */
.company{ background:var(--base); }
.company-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
.company-table{ width:100%; border-collapse:collapse; }
.company-table th,.company-table td{
  padding:15px 0; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; font-size:17px; line-height:1.9;
}
.company-table th{ width:32%; color:var(--sub); font-weight:700; }
.company-sub{ margin:40px 0 12px; font-size:20px; font-weight:700; }
.history{ margin:0; }
.history div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.history dt{ color:var(--sub); font-weight:700; font-size:16px; }
.history dd{ margin:0; font-size:17px; }
.company-photo{ margin:0 0 20px; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-photo); }
.company-photo img{ width:100%; height:100%; object-fit:cover; }
.map-frame{ border-radius:var(--r-photo); overflow:hidden; border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:300px; border:0; display:block; }
.map-link{ display:inline-block; margin-top:16px; color:var(--sub); font-weight:700; font-size:16px; }

/* ---------- 採用への導線 ---------- */
.recruit-cta{
  position:relative; padding-top:calc(var(--sec-pc) + 40px);
  background:var(--base-tint);
  overflow-x:clip;   /* 曲線シェイプのはみ出しを封じる */
}
/* 上端の曲線シェイプ（2つめ・最後） */
.recruit-cta::before{
  content:""; position:absolute; left:-6%; right:-6%; top:-72px; height:150px;
  border-radius:0 0 52% 52%; background:var(--base);
}
.recruit-inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.recruit-word{
  max-width:700px; margin:0; padding-left:20px;
  border-left:3px solid var(--sub); color:var(--ink-soft); font-size:17px; line-height:1.95;
}


/* ---------- お問い合わせ ---------- */
.contact{ background:var(--base); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.contact-left .sec-head{ margin-bottom:56px; }
.contact .form{ margin-top:0; }
.contact-info{ display:grid; gap:20px; justify-items:start; }
.contact-item{
  display:flex; align-items:center; gap:14px;
  min-height:64px; padding:14px 22px;
  border:1px solid var(--line); border-radius:var(--r-photo);
  background:#fff;
  color:var(--ink); font-size:17px; font-weight:700; text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.contact-item svg{ flex:0 0 auto; color:var(--sub); }
.contact-item__text{ overflow-wrap:anywhere; }
.contact-item:hover,.contact-item:focus-visible{ border-color:var(--sub); background:#F7FAFD; }
/* 電話だけ大きく、主役として扱う */
.contact-item--tel{
  min-height:76px;
  border-color:var(--sub);
}
.contact-item--tel .contact-item__text{
  font-size:clamp(26px,3vw,32px); letter-spacing:.02em; line-height:1.2;
}
.contact-item--tel svg{ width:26px; height:26px; }
.contact-item{ width:100%; }

/* Instagram は枠なしのリンク */
.contact-sns{
  display:inline-flex; align-items:center; gap:10px;
  padding:0; border:0; background:none;
  color:var(--sub); font-size:16px; font-weight:700; text-decoration:none;
}
.contact-sns .ig-mark{ flex:0 0 auto; }
.contact-sns:hover span,.contact-sns:focus-visible span{ text-decoration:underline; text-underline-offset:4px; }
.form{ padding:32px; border:1px solid var(--line); border-radius:var(--r-photo); background:var(--base-tint); }
.field{ display:grid; gap:8px; margin-bottom:20px; }
label{ font-weight:700; font-size:16px; }
input,textarea{
  width:100%; padding:13px 14px;
  border:1px solid #A9C2D3; border-radius:var(--r-btn); background:#fff;
  color:var(--ink); font-size:16px; line-height:1.6;
}
input:focus,textarea:focus{ outline:3px solid rgba(61,141,191,.25); border-color:var(--sub); }
textarea{ min-height:140px; resize:vertical; }
.form .btn{ width:100%; border:0; }

/* ---------- フッター ---------- */
.site-footer{ padding:56px 0 72px; background:var(--main); color:#fff; }
.footer-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.footer-name{ margin:0 0 10px; font-size:21px; font-weight:700; letter-spacing:.06em; }
.footer-info{ margin:0 0 16px; font-size:16px; line-height:1.95; color:#D6E6F2; }
.footer-info a{ color:#fff; }
.footer-sns{
  display:inline-flex; align-items:center; gap:9px;
  color:#9FD0EE; font-size:16px; font-weight:700; text-decoration:none;
}
.footer-sns:hover span,.footer-sns:focus-visible span{ text-decoration:underline; text-underline-offset:4px; }
.copyright{ margin:0; color:#A9C9DE; font-size:14px; white-space:nowrap; }

/* ============================================================
   レスポンシブ（追加分）
   ============================================================ */
@media (max-width:960px){
  .biz{ grid-template-columns:1fr; gap:20px; }
  .biz:nth-child(even) .biz-photo{ order:0; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .member{ flex:0 0 220px; }
  .company-grid,.contact-grid{ grid-template-columns:1fr; gap:40px; }
  .recruit-inner{ display:block; }
  .recruit-inner .btn-recruit--lg{ display:flex; justify-content:center; margin-top:32px; }
}

@media (max-width:720px){
  .sec-head{ margin-bottom:44px; }
  .about-head{ margin-bottom:56px; }
  .about{ padding-top:calc(var(--sec-sp) + 24px); }
  .about > .wrap{ padding-bottom:190px; }
  .about .sec-title{ margin-bottom:32px; }
  .sec-lead{ font-size:16px; }
  .biz-list{ gap:40px; }
  .biz-body h3{ font-size:21px; }
  .flow{ grid-template-columns:1fr; gap:28px; margin-bottom:56px; }
  .works-cols{ grid-template-columns:1fr; gap:28px; }
  .member{ flex:0 0 168px; }
  .member-track{ gap:16px; padding:4px 16px; animation-duration:46s; }
  @keyframes memberFlow{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }
  .member-photo--initial::after,.member-photo--initial span{ font-size:36px; }
  .company-sub{ margin-top:32px; }
  .form{ padding:22px 18px; }
  .footer-inner{ display:block; }
  .copyright{ margin-top:22px; white-space:normal; }
  .members::before,.recruit-cta::before{ top:-46px; height:100px; border-radius:0 0 40% 40%; }
  .members,.recruit-cta{ padding-top:calc(var(--sec-sp) + 28px); }
}

/* PC専用の改行。狭い画面では自然に折り返させる */
.br-pc{ display:inline; }
@media (max-width:720px){ .br-pc{ display:none; } }