@charset "UTF-8";

/* =========================================================================
   調整パネル：ここの数字を変えて保存 → ブラウザを再読み込みすれば見た目が変わります
   ========================================================================= */
:root{
  /* --- 余白 --- */
  --sec-pc:      88px;   /* セクションの上下の余白（PC） */
  --sec-sp:      56px;   /* セクションの上下の余白（スマホ） */
  --gap-label:    6px;   /* 英字の背景文字 → 日本語見出し */
  --gap-head:    24px;   /* 見出し → 本文 */
  --card-gap:    24px;   /* カードどうしの間隔 */
  --case-gap:    48px;   /* 施工事例どうしの間隔 */
  --wrap:      1120px;   /* 本文の最大幅 */

  /* --- 文字 --- */
  --eng-min:     44px;   /* 背景の英字（最小） */
  --eng-max:     76px;   /* 背景の英字（最大） */
  --eng-alpha:    .17;   /* 背景の英字の薄さ（0〜1） */
  --h-min:       28px;   /* 日本語見出し（最小） */
  --h-max:       34px;   /* 日本語見出し（最大） */

  /* --- 色（青を基調に、ヒーローと主CTAだけ緑を添える） --- */
  --main:    #10527D;    /* 濃い青：見出し・ヘッダー・フッター */
  --sub:     #3D8DBF;    /* 明るい青：英字の背景文字・アイコン・グラデ棒 */
  --cta:     #0066CC;    /* 鮮やかな青：電話ボタン・主CTA */
  --green:   #27845F;    /* 緑：ヒーローの強調語・お問い合わせCTA */
  --green-tint:#EEF8F2;  /* 薄い緑：各セクションに添える背景色 */
  --green-tint-soft:#F8FCFA; /* さらに淡い緑：白背景のセクション用 */
  --tint:    #EAF3F9;    /* 淡い水色：セクション背景 */
  --ink:     #333333;    /* 本文 */
  --ink-soft:#46515A;    /* 補足の文字 */
  --line:    #DCE7EF;    /* 罫線 */

  /* --- 動き --- */
  --hero-fade:   1.2s;   /* ヒーローの切り替えにかかる時間 */
  --marquee-sec:  60s;   /* 施工事例が1周する秒数 */
  --bubble-base:  10s;   /* 泡の速さ。小さくすると速く、大きくするとゆっくり */
  --bubble-rise:1600px;  /* About Usからヒーローまで上がる距離 */
  --hero-bubble-lift:-660px; /* 泡レイヤーをヒーローまで伸ばす高さ */
}
/* ===================== 調整パネルここまで ===================== */


/* ---------- 土台 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:17px; line-height:1.9; color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.4; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
section{ padding:var(--sec-pc) 0; }

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

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  transition:padding .25s;
}
.header-inner{
  width:min(100% - 32px, 1280px); margin-inline:auto;
  display:flex; align-items:center; gap:20px;
  padding:14px 0; transition:padding .25s;
}
.site-header.is-small .header-inner{ padding:8px 0; }
.brand{ text-decoration:none; flex:0 0 auto; }
.brand-copy{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{ font-size:19px; font-weight:700; color:var(--main); letter-spacing:.04em; white-space:nowrap; }
.brand-sub{ font-size:9.5px; font-weight:600; color:var(--sub); letter-spacing:.14em; }

.header-nav{ display:flex; gap:22px; margin-left:auto; }
.header-nav a{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-decoration:none; color:var(--main); white-space:nowrap;
}
.header-nav a span{ font-size:14px; font-weight:700; }
.header-nav a small{ font-size:9px; font-weight:600; color:var(--sub); letter-spacing:.1em; }
.header-nav a:hover span{ color:var(--cta); }

.header-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.header-tel{
  display:flex; align-items:center; gap:8px;
  color:var(--main); text-decoration:none;
}
.header-tel__num{ font-size:26px; font-weight:800; letter-spacing:.02em; }
.site-header.is-small .header-tel__num{ font-size:22px; }
.btn-contact{
  background:linear-gradient(120deg, var(--green), var(--cta)); color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:4px; font-size:15px; font-weight:700;
  white-space:nowrap; transition:opacity .2s;
}
.btn-contact:hover{ opacity:.86; }

.nav-toggle{ display:none; }

/* ---------- 見出しブロック（全セクション共通・例外を作らない） ---------- */
.sec-head{ position:relative; margin-bottom:56px; }
/* フェードインは JS が動く環境でだけ。JSが無ければ最初から見える */
.js .sec-head{ opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.js .sec-head.is-in{ opacity:1; transform:none; }
.eyebrow{
  display:block; margin:0 0 calc(var(--gap-label) - 0.3em);
  color:var(--green); opacity:var(--eng-alpha);
  font-size:clamp(var(--eng-min), 6.4vw, var(--eng-max));
  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(var(--h-min), 4vw, var(--h-max)); line-height:1.45; font-weight:700;
  color:var(--main);
}
.sec-lead{ margin:0; color:var(--ink-soft); font-size:17px; }
.sec-head--center{ text-align:center; }
.sec-head--center .sec-title{ padding-left:0; }

/* ---------- ファーストビュー ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:min(78vh, 660px);
  display:flex; align-items:flex-end;
  padding:0;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center right;
  opacity:0; transition:opacity var(--hero-fade) ease-in-out;
}
.hero-slide.is-active{ opacity:1; }
/* 主役が右寄りなので、スマホで縦に切っても残るよう切り取り位置を右へ寄せる */
.hero-slide[data-slide="1"]{ background-image:url("images/hero-1-kurashi.webp"); background-position:72% center; }
.hero-slide[data-slide="2"]{ background-image:url("images/hero-2-jaguchi.webp"); background-position:70% center; }
.hero-slide[data-slide="3"]{ background-image:url("images/hero-3-genba.webp");  background-position:60% center; }

.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 34%, rgba(255,255,255,.18) 62%, rgba(255,255,255,0) 100%);
}
.hero-inner{
  position:relative; z-index:2; width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  padding-bottom:104px;
}
.hero-copy{ max-width:min(660px, 92%); }
.hero-eng{
  margin:0 0 12px; color:var(--sub);
  font-size:14px; font-weight:800; letter-spacing:.18em;
}
.hero h1{
  margin:0 0 22px;
  font-size:clamp(27px, 3.9vw, 46px); line-height:1.5; font-weight:800;
  background:linear-gradient(120deg, var(--green), var(--cta));
  -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.02em;
  /* 指定した位置以外で折り返させない（「を、」だけ落ちるのを防ぐ） */
  white-space:nowrap;
}
.hero-keyword{
  padding:0; color:inherit; background:transparent;
  border-bottom:0;
}
.hero-lead{ margin:0; color:var(--ink); font-size:clamp(15px,1.2vw,17px); line-height:2; }

.hero-dots{ position:absolute; z-index:3; left:0; right:0; bottom:26px; display:flex; justify-content:center; gap:10px; }
.hero-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(16,82,125,.28); cursor:pointer; transition:background .25s, transform .25s;
}
.hero-dots button.is-active{ background:var(--main); transform:scale(1.25); }

/* ---------- 私たちについて（背景で水の泡が上がる） ---------- */
.about{ position:relative; overflow:visible; background:#fff; }
.about .wrap{ position:relative; z-index:2; }

.about-bubbles{
  position:absolute; top:var(--hero-bubble-lift); right:0; bottom:0; left:0;
  overflow:hidden; pointer-events:none; z-index:0;
}
.about-bubbles span{
  position:absolute; bottom:-180px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 50%, rgba(61,141,191,.06) 55%, rgba(61,141,191,.30) 88%, rgba(61,141,191,.10) 100%);
  box-shadow:inset 0 -6px 14px rgba(16,82,125,.10);
  animation:bubbleUp linear infinite;
}
/* 大小を織り交ぜて配置。速さは --bubble-base の倍数で決めている */
/* 開始をマイナスにして、読み込んだ瞬間から途中の高さに散らばって見えるようにする */
.about-bubbles span:nth-child(1) { left:-1%; width:120px; height:120px; animation-duration:calc(var(--bubble-base) * 1.34); animation-delay:-0.4s; }
.about-bubbles span:nth-child(2) { left:9%;  width:30px;  height:30px;  animation-duration:calc(var(--bubble-base) * 0.96); animation-delay:-2.1s; }
.about-bubbles span:nth-child(3) { left:18%; width:75px;  height:75px;  animation-duration:calc(var(--bubble-base) * 1.18); animation-delay:-3.3s; }
.about-bubbles span:nth-child(4) { left:27%; width:21px;  height:21px;  animation-duration:calc(var(--bubble-base) * 0.92); animation-delay:-1.0s; }
.about-bubbles span:nth-child(5) { left:35%; width:140px; height:140px; animation-duration:calc(var(--bubble-base) * 1.44); animation-delay:-4.6s; }
.about-bubbles span:nth-child(6) { left:45%; width:40px;  height:40px;  animation-duration:calc(var(--bubble-base) * 1.04); animation-delay:-2.7s; }
.about-bubbles span:nth-child(7) { left:54%; width:90px;  height:90px;  animation-duration:calc(var(--bubble-base) * 1.25); animation-delay:-0.9s; }
.about-bubbles span:nth-child(8) { left:63%; width:160px; height:160px; animation-duration:calc(var(--bubble-base) * 1.50); animation-delay:-5.2s; }
.about-bubbles span:nth-child(9) { left:73%; width:35px;  height:35px;  animation-duration:calc(var(--bubble-base) * 1.00); animation-delay:-1.7s; }
.about-bubbles span:nth-child(10){ left:82%; width:67px;  height:67px;  animation-duration:calc(var(--bubble-base) * 1.12); animation-delay:-3.8s; }
.about-bubbles span:nth-child(11){ left:92%; width:128px; height:128px; animation-duration:calc(var(--bubble-base) * 1.38); animation-delay:-2.4s; }

/* まっすぐ上へ。全部の泡が同じ距離（--bubble-rise）を上がる。
   ⚠️ translateY を % で書くと「その泡自身の大きさ」が基準になり、
      大きさごとに移動距離が変わって不自然になる。必ず px で指定する。 */
@keyframes bubbleUp{
  from{ transform:translateY(0) scale(.92); opacity:0; }
  6%  { opacity:1; }
  93% { opacity:1; }
  to  { transform:translateY(calc(var(--bubble-rise) * -1)) scale(1.04); opacity:0; }
}

.about-body{ max-width:760px; margin-inline:auto; text-align:center; }
.about-body p{
  margin:0 0 20px; color:var(--main); font-size:clamp(18px,1.45vw,20px);
  font-weight:700; line-height:2.05; letter-spacing:.02em;
}
.about-body p + p{ color:var(--main); }
.about-body p:last-child{ margin-bottom:0; }

/* ---------- 事業内容 ---------- */
.service{ position:relative; background:var(--tint); padding-top:calc(var(--sec-pc) + 56px); }
/* ゆるやかな2重の波でつなぐ（半円のお皿型はやめた） */
.service .wave{
  position:absolute; top:-1px; left:0;
  width:100%; height:78px; display:block;
}
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--card-gap); }
.svc-card{ background:#fff; border-radius:8px; padding:0 20px 26px; text-align:center; }
.js .svc-card{ opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s; }
.js .svc-card.is-in{ opacity:1; transform:none; }
.svc-card:hover{ transform:translateY(-2px); }
.svc-photo{ position:relative; margin:0 -20px 0; }
.svc-photo__ph{
  aspect-ratio:3/4; border-radius:8px 8px 0 0;
  background:linear-gradient(150deg,#CFE3F0,#8FBBD9);
}
/* 「>」で直下の写真だけに当てる。バッジの中のアイコンに効かせない */
.svc-photo > img{ aspect-ratio:3/4; object-fit:cover; border-radius:8px 8px 0 0; width:100%; }
.svc-badge{
  position:absolute; left:50%; bottom:-36px; transform:translateX(-50%);
  width:84px; height:84px; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.svc-badge img{ width:52px; height:52px; object-fit:contain; }
.svc-card h3{ margin:56px 0 14px; font-size:19px; font-weight:700; color:var(--main); }
.svc-list li{ font-size:15px; font-weight:600; line-height:2; color:var(--ink-soft); }

/* ---------- 施工事例 ---------- */
/* 1つの工事＝写真4枚を1セットで見せる（現行サイトと同じまとめ方） */
.works{ background:#fff; }
.work-cases{ display:flex; flex-direction:column; gap:var(--case-gap); }
.work-case__title{
  position:relative; margin:0 0 6px; padding-left:16px;
  font-size:20px; font-weight:700; color:var(--main);
}
.work-case__title::before{
  content:""; position:absolute; left:0; top:.3em;
  width:4px; height:1.1em; border-radius:2px;
  background:linear-gradient(var(--sub), var(--main));
}
.work-case__note{ margin:0 0 16px; padding-left:16px; font-size:15px; color:var(--ink-soft); }
.work-case__photos{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  max-width:976px;   /* 写真の実寸235px×4＋隙間。引き伸ばして粗くしない */
}
.work-case__photos img{
  width:100%; aspect-ratio:235/176; object-fit:cover;
  border-radius:6px; background:var(--tint);
}

/* ---------- 工事の流れ ---------- */
.flow{ background:var(--tint); }
.flow-list--vertical{
  position:relative; display:flex; flex-direction:column; gap:0;
  width:min(100%, 820px); margin-inline:auto;
}
.flow-list--vertical::before{
  content:""; position:absolute; left:31px; top:30px; bottom:30px; width:2px;
  background:linear-gradient(var(--sub), rgba(61,141,191,.22));
}
.flow-list--vertical li{
  position:relative; display:grid; grid-template-columns:64px 1fr; gap:26px;
  align-items:start; padding:0 0 32px; background:transparent;
}
.flow-list--vertical li:last-child{ padding-bottom:0; }
.js .flow-list li{ opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s; }
.js .flow-list li.is-in{ opacity:1; transform:none; }
.flow-num{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border:2px solid var(--sub); border-radius:50%; background:var(--tint);
  color:var(--main); font-size:18px; font-weight:800; line-height:1; letter-spacing:.04em;
}
.flow-step-content{ min-height:64px; padding:5px 0 26px; border-bottom:1px solid rgba(61,141,191,.35); }
.flow-list--vertical li:last-child .flow-step-content{ border-bottom:0; padding-bottom:0; }
.flow-step-label{ margin:0 0 5px; color:var(--sub); font-size:12px; font-weight:800; letter-spacing:.12em; line-height:1.2; }
.flow-list h3{ margin:0 0 8px; font-size:20px; color:var(--main); }
.flow-list p:not(.flow-step-label){ margin:0; font-size:16px; font-weight:600; color:var(--ink-soft); line-height:1.9; }
.flow-after{
  margin-top:32px; background:#fff; border-left:5px solid var(--sub);
  border-radius:0 8px 8px 0; padding:26px 28px;
}
.flow-after h3{ margin:0 0 8px; font-size:19px; color:var(--main); }
.flow-after p{ margin:0; font-size:16px; line-height:1.95; }

/* ---------- 会社概要 ---------- */
.company{ background:#fff; }
.company-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start; }
.company-table{ width:100%; border-collapse:collapse; }
.company-table th,.company-table td{
  border-bottom:1px solid var(--line); padding:14px 8px;
  font-size:15.5px; line-height:1.85; text-align:left; vertical-align:top;
}
.company-table th{ width:132px; color:var(--main); font-weight:700; white-space:nowrap; }
.company-side h3{
  margin:0 0 14px; padding-left:12px; font-size:16px; color:var(--main);
  border-left:4px solid var(--sub);
}
.company-side h3:not(:first-child){ margin-top:32px; }
.plain li{ font-size:15px; line-height:1.85; padding:9px 0; border-bottom:1px solid var(--line); }
.plain small{ color:var(--ink-soft); font-size:13px; }
.qual li{ display:flex; justify-content:space-between; gap:12px; }
.qual b{ color:var(--main); white-space:nowrap; }
.company-map{ margin-top:48px; }

/* ---------- 採用情報 ---------- */
.recruit{ background:var(--tint); }
.recruit-inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:44px; align-items:start; }
.recruit-copy-wrap{ max-width:760px; padding-left:22px; border-left:3px solid var(--sub); }
.recruit-copy{ margin:0; color:var(--ink-soft); font-size:17px; font-weight:600; line-height:2; }
.recruit-copy + .recruit-copy{ margin-top:18px; }
.recruit-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:20px;
  min-width:240px; padding:20px 30px; background:linear-gradient(120deg, var(--green), var(--cta)); color:#fff;
  font-size:18px;
}
.recruit-cta span{ font-size:20px; line-height:1; }
.recruit-dl{ display:grid; grid-template-columns:132px 1fr; margin-bottom:28px; }
.recruit-dl dt{ padding:11px 0; color:var(--main); font-weight:700; font-size:15px; border-bottom:1px solid var(--line); }
.recruit-dl dd{ padding:11px 0; font-size:15px; border-bottom:1px solid var(--line); }

/* ---------- 採用ページ ---------- */
/* 採用ページの上部：緑 → 青のグラデーション（濃い文字が乗るので淡めに保つ） */
.sub-hero{
  padding:74px 0 68px;
  background:linear-gradient(120deg, #E2F4EA 0%, #E5F2F1 42%, #DCEBF8 100%);
}
.sub-hero__eyebrow{ margin:0 0 12px; color:var(--main); font-size:14px; font-weight:800; letter-spacing:.16em; }
.sub-hero h1{ color:var(--main); font-size:clamp(32px,4vw,46px); font-weight:800; }
.sub-hero__lead{ margin:14px 0 0; color:var(--ink-soft); font-size:17px; font-weight:600; }
.sub-hero__message{ margin:28px 0 0; max-width:720px; }
.sub-hero__message p{ margin:0 0 18px; color:var(--ink); font-size:16.5px; line-height:2.05; }
.sub-hero__message p:last-child{ margin-bottom:0; font-weight:700; color:var(--main); }
/* 採用ページ：採用情報と募集要項の境目をまたいで右側に写真を置く */
.recruit-page{ position:relative; display:flex; flex-direction:column; }
.recruit-page > .sub-hero{ order:1; }
.recruit-page > .recruit-photo{ order:2; }
.recruit-page > .recruit-detail{ order:3; }
.recruit-photo{
  position:absolute; z-index:2;
  top:212px;   /* 境目より下へ約115px はみ出す位置 */
  right:max(20px, calc(50% - (var(--wrap) / 2)));
  width:clamp(280px, 27vw, 366px);
  height:auto;
  border-radius:10px;
  box-shadow:0 18px 40px rgba(16,82,125,.16);
}
/* 写真の下に文章が潜らないよう、左側の幅を抑える */
.recruit-page .sub-hero__message{ max-width:min(100%, 620px); }
/* 写真がここまで下りてくるので、募集要項の始まりを下げる */
.recruit-detail{ background:#fff; padding-top:calc(var(--sec-pc) + 56px); }
.recruit-detail__inner{ width:min(100%, 820px); margin-inline:auto; }
.recruit-detail .recruit-lead{ margin-bottom:28px; }
.recruit-detail .recruit-dl{ margin-bottom:36px; }
.recruit-back{ display:inline-flex; align-items:center; gap:10px; color:var(--main); font-size:15px; font-weight:700; text-decoration:none; }
.recruit-back::before{ content:"←"; font-size:18px; }

/* ---------- お問い合わせ ---------- */
.contact{ background:#fff; }
.contact-layout{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.contact .sec-head{ margin-bottom:40px; }
.contact .sec-title{ margin-bottom:56px; }
.contact-intro{ padding:0 8px 24px 0; }
.contact-card__label{ margin:0 0 10px; font-size:15px; color:var(--main); font-weight:800; }
.contact-tel{
  display:inline-flex; align-items:center; gap:16px; min-width:min(100%, 360px); padding:18px 22px;
  border:2px solid var(--sub); border-radius:8px; background:#fff; color:var(--main);
  font-size:clamp(27px,3vw,36px); font-weight:800; text-decoration:none; letter-spacing:.02em;
  transition:background .2s, color .2s, transform .2s;
}
.contact-tel:hover,.contact-tel:focus-visible{ background:var(--main); color:#fff; transform:translateY(-1px); }
.contact-tel__prefix{ font-size:13px; font-weight:800; letter-spacing:.12em; }
.contact-guide{ margin:0; color:var(--ink-soft); font-size:17px; font-weight:600; line-height:2; }
.form{ display:flex; flex-direction:column; gap:16px; }
.form-panel{ padding:32px; background:var(--tint); border:0; border-top:0; border-radius:8px; }
.form label{ display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:700; color:var(--main); }
.form input,.form textarea{
  font:inherit; font-weight:400; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:4px; background:#fff;
}
.form input:focus,.form textarea:focus{ outline:2px solid var(--sub); outline-offset:1px; }

.btn{
  display:inline-block; padding:16px 32px; border-radius:4px;
  font-size:16px; font-weight:700; text-decoration:none; text-align:center;
  border:2px solid transparent; cursor:pointer; font-family:inherit;
  transition:opacity .2s, transform .2s;
}
.btn--fill{ background:var(--cta); color:#fff; }
.btn--fill:hover{ opacity:.88; transform:translateY(-1px); }
.form-panel .btn--fill{ background:linear-gradient(120deg, var(--green), var(--cta)); }

.map{ position:relative; }
.map iframe{ width:100%; height:340px; border:0; border-radius:8px; display:block; }
.map-link{
  position:absolute; top:14px; left:14px; background:#fff; color:var(--cta);
  padding:9px 15px; border-radius:4px; font-size:14px; font-weight:700; text-decoration:none;
}

/* ---------- フッター ---------- */
.site-footer{ background:var(--main); color:#fff; padding:48px 0 36px; }
.foot-name{ margin:0 0 12px; font-size:20px; font-weight:700; }
.foot-addr,.foot-tel{ margin:0 0 6px; font-size:15px; opacity:.92; }
.site-footer a{ color:#fff; }
.foot-copy{ margin:24px 0 0; font-size:13px; opacity:.7; }

/* ---------- デモ用モーダル ---------- */
.demo-modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,40,60,.55); padding:24px;
}
.demo-modal[hidden]{ display:none; }
.demo-modal__box{
  background:#fff; border-radius:10px; padding:36px 32px 30px;
  max-width:460px; width:100%; text-align:center;
}
.demo-modal__box p{ margin:0 0 22px; font-size:16px; line-height:1.85; white-space:pre-line; color:var(--main); }

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .header-nav{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    margin-left:auto; background:none; border:1px solid var(--line); border-radius:4px;
    padding:7px 10px; cursor:pointer; font-family:inherit;
  }
  .nav-toggle__bars{ display:flex; flex-direction:column; gap:4px; }
  .nav-toggle__bars span{ display:block; width:22px; height:2px; background:var(--main); }
  .nav-toggle__label{ font-size:9px; font-weight:700; color:var(--sub); letter-spacing:.08em; }
  .header-actions .btn-contact{ display:none; }
  body.nav-open .header-nav{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 0;
  }
  body.nav-open .header-nav a{ flex-direction:row; align-items:baseline; gap:10px; padding:13px 24px; }
  body.nav-open .header-nav a small{ font-size:10px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .work-case__photos{ grid-template-columns:repeat(2,1fr); max-width:none; }
  .company-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-layout{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  section{ padding:var(--sec-sp) 0; }
  .demo-notice{ padding:12px 16px; font-size:13px; }
  .brand-name{ font-size:15px; }
  .brand-sub{ display:none; }
  .header-tel__num{ font-size:0; }
  .site-header.is-small .header-tel__num{ font-size:0; }
  .header-tel{ border:1px solid var(--line); border-radius:4px; padding:9px 11px; }
  .hero{ min-height:min(74vh, 540px); }
  .hero-inner{ padding-bottom:76px; }
  :root{ --hero-bubble-lift:-540px; }
  /* 文字は下端にあるので、スモークも下ほど濃くする（上下を逆にすると文字が読めない） */
  .hero-veil{
    /* 文字の帯（37〜86%）だけ白をのせ、上下は写真を透けさせる */
    background:linear-gradient(180deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,.05) 18%,
      rgba(255,255,255,.46) 32%,
      rgba(255,255,255,.72) 44%,
      rgba(255,255,255,.78) 62%,
      rgba(255,255,255,.74) 80%,
      rgba(255,255,255,.46) 90%,
      rgba(255,255,255,.24) 100%);
  }
  .hero-copy{ max-width:100%; }
  /* スマホはスモークを薄くして写真を見せるぶん、小さい英字は濃い青にして読めるようにする */
  .hero-eng{ color:var(--main); }
  .hero h1{ white-space:normal; }
  .sec-head{ margin-bottom:36px; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc-card{ padding-bottom:22px; }
  .flow-list--vertical{ width:100%; }
  .flow-list--vertical li{ grid-template-columns:52px 1fr; gap:18px; padding-bottom:26px; }
  .flow-list--vertical::before{ left:25px; }
  .flow-num{ width:52px; height:52px; font-size:16px; }
  .flow-step-content{ min-height:52px; padding-top:1px; padding-bottom:22px; }
  .flow-list h3{ font-size:18px; }
  .flow-list p:not(.flow-step-label){ font-size:15px; }
  .recruit-inner{ grid-template-columns:1fr; gap:28px; }
  .recruit-copy-wrap{ padding-left:18px; }
  .recruit-copy{ font-size:16px; }
  .recruit-cta{ width:100%; min-width:0; }
  .sub-hero{ padding:56px 0 52px; }
  /* スマホは重ねずに、文章の下へ普通に並べる */
  .recruit-photo{
    position:static; display:block;
    width:min(100% - 40px, 420px); margin:28px auto 0;
    box-shadow:0 12px 28px rgba(16,82,125,.14);
  }
  .recruit-page .sub-hero__message{ max-width:100%; }
  .recruit-detail{ padding-top:var(--sec-sp); }
  .sub-hero__lead{ font-size:16px; }
  .form-panel{ padding:26px 20px; }
  .contact-layout{ grid-template-columns:1fr; gap:32px; }
  .recruit-dl{ grid-template-columns:1fr; }
  .recruit-dl dt{ padding-bottom:0; border-bottom:0; }
  .recruit-dl dd{ padding-top:4px; }
  .company-table th{ width:104px; font-size:14px; }
  .company-table td{ font-size:14.5px; }
  .map iframe{ height:280px; }
}

/* ---------- 動きを減らす設定の人には流さない ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .sec-head,.svc-card,.flow-list li{ opacity:1; transform:none; }
}