:root{
  --ink:#1b1a17;
  --paper:#f4f1ea;
  --paper-2:#e9e4d8;
  --brand:#010066;
  --brand-2:#1a1a8c;
  --accent:#bf5a22;
  --accent-text:#a14c1d;  /* 小さい文字に使う赤茶（背景との濃さの比を4.5以上にする） */
  --muted:#6b665c;
  --line:#cfc8b8;
  --white:#fff;
  --header-bg:rgba(244,241,234,.86);
  --hero-veil:linear-gradient(100deg,rgba(244,241,234,.94) 0%,rgba(244,241,234,.88) 36%,rgba(244,241,234,.58) 68%,rgba(244,241,234,.34) 100%);
  --hero-veil-sp:linear-gradient(180deg,rgba(244,241,234,.93) 0%,rgba(244,241,234,.86) 55%,rgba(244,241,234,.70) 100%);
  --card-shadow:rgba(0,0,0,.35);
  --foot-link:rgba(255,255,255,.75);
  --foot-copy:rgba(255,255,255,.65);
  --err-bg:#fff4f0;
  --err-line:#e6c3b5;
  /* 文字の大きさは6段だけ（見出しの大きい物は clamp で画面の幅に合わせる） */
  --fs-xs:.78rem;
  --fs-sm:.9rem;
  --fs-base:1rem;
  --fs-md:1.2rem;
  --fs-lg:1.5rem;
  --fs-xl:1.8rem;
  --display:"Shippori Mincho B1","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --body:"Zen Kaku Gothic New","Yu Gothic","YuGothic","Hiragino Sans","Meiryo",sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.9; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; }

.wrap{ width:min(1100px,90vw); margin-inline:auto; }
.accent{ color:var(--accent); }

/* 本文へ飛ぶリンク（キーボードで最初に出る） */
.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{ left:1rem; top:1rem; z-index:100; background:var(--brand); color:var(--white); padding:.6rem 1rem; border-radius:2px; }

.eyebrow{ font-size:var(--fs-xs); letter-spacing:.28em; color:var(--accent-text); font-weight:700; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent); display:inline-block; }

.section-title{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.4; margin-bottom:1.4rem; letter-spacing:.02em; }

/* Header */
header{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{ display:flex; align-items:center; }
.logo img{ height:42px; width:auto; display:block; }
.nav-links{ display:flex; gap:2.2rem; font-size:var(--fs-sm); font-weight:500; }
.nav-links a{ position:relative; padding:.2rem 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--accent); transition:width .3s; }
.nav-links a:hover::after{ width:100%; }
.nav-links .nav-sp{ display:none; }  /* スマホのメニューの中だけに出す「お問い合わせ」 */
.nav-cta{ background:var(--brand); color:var(--paper); padding:.6rem 1.3rem; border-radius:2px; font-size:var(--fs-sm); font-weight:700; transition:background .25s; }
.nav-cta:hover{ background:var(--accent); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:14px 9px; }
.burger span{ width:26px; height:2px; background:var(--ink); transition:.3s; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:clamp(4rem,11vw,8.5rem) 0 clamp(3.5rem,8vw,6rem); background:var(--paper) center / cover no-repeat;
  background-image:url("images/hero.jpg");
  background-image:image-set(url("images/hero.webp") type("image/webp"), url("images/hero.jpg") type("image/jpeg")); }
.hero::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.35; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 70% 30%,#000 0%,transparent 70%); }
.hero::after{ content:""; position:absolute; inset:0; z-index:0; background:var(--hero-veil); }
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,7vw,5rem); line-height:1.25; letter-spacing:.02em; margin-bottom:1.6rem; }
.hero h1 .line{ display:block; }
.hero p.lead{ font-size:clamp(1rem,1.6vw,1.18rem); color:var(--muted); max-width:34em; margin-bottom:2.4rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.8rem; border-radius:2px; font-weight:700; font-size:var(--fs-base); border:none; cursor:pointer; font-family:var(--body); transition:transform .2s,background .25s,color .25s; }
.btn-primary{ background:var(--brand); color:var(--white); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1.5px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.hero-stats{ display:flex; gap:clamp(1.5rem,5vw,4rem); margin-top:3.5rem; flex-wrap:wrap; }
.hero-stats .num{ font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; line-height:1; }
.hero-stats .lbl{ font-size:var(--fs-xs); color:var(--muted); letter-spacing:.1em; margin-top:.5rem; }

/* Sections */
section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.section-head{ max-width:46em; margin-bottom:3rem; }
.banner-img{ width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:3px; margin-bottom:2.8rem; }

/* About */
#about{ background:var(--paper-2); }
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about-text p{ margin-bottom:1.2rem; }
.about-photo{ aspect-ratio:4/3; border-radius:3px; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }

/* Message（代表挨拶） */
#message{ background:var(--paper); }
.message-grid{ max-width:760px; margin:0 auto; }
.message-body p{ margin-bottom:1.4rem; line-height:2; }
.message-body .signature{ font-family:var(--display); font-size:var(--fs-base); margin-top:2rem; color:var(--muted); text-align:right; }

/* Services（段の背景は paper-2 / paper を交互） */
#services{ background:var(--paper-2); }
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1.1rem; }
.service-card{ background:var(--white); border:1px solid var(--line); border-radius:3px; padding:1.7rem 1.6rem; }
.service-card .no{ font-family:var(--display); color:var(--accent-text); font-size:var(--fs-base); font-weight:700; letter-spacing:.1em; }
.service-card h3{ font-family:var(--display); font-size:var(--fs-md); margin:.5rem 0 .6rem; }
.service-card p{ font-size:var(--fs-sm); color:var(--muted); }

/* Strengths */
#strengths{ background:var(--paper); }
.strengths{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.strength .icon{ width:54px; height:54px; border:2px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; color:var(--accent); font-size:var(--fs-lg); margin-bottom:1.1rem; }
.strength h3{ font-family:var(--display); font-size:var(--fs-md); margin-bottom:.6rem; }
.strength p{ font-size:var(--fs-sm); color:var(--muted); }

/* Company */
#company{ background:var(--paper-2); }
.company-table{ width:100%; border-collapse:collapse; max-width:760px; }
.company-table th,.company-table td{ text-align:left; padding:1.1rem .4rem; border-bottom:1px solid var(--line); vertical-align:top; }
.company-table th{ width:9em; font-weight:700; white-space:nowrap; }
.company-table td{ color:var(--muted); }
.company-table .nowrap{ display:inline-block; }  /* 許可番号の途中で折り返さない */

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.contact-info p{ margin-bottom:.4rem; color:var(--muted); }
.contact-info .big{ font-family:var(--display); font-size:var(--fs-xl); color:var(--ink); margin:.3rem 0 1.4rem; }
.contact-info .tel-label{ margin-top:1.4rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:.4rem; }
.field .req{ font-size:var(--fs-xs); color:var(--accent-text); margin-left:.5rem; }
.field input,.field textarea{ width:100%; padding:.8rem .9rem; border:1px solid var(--line); border-radius:2px; font-family:var(--body); font-size:var(--fs-base); background:var(--white); }
.field input:focus,.field textarea:focus{ outline:2px solid var(--accent); border-color:transparent; }
.form-note{ font-size:var(--fs-xs); color:var(--muted); margin-top:.8rem; }
.form-note a{ text-decoration:underline; text-underline-offset:3px; }

/* Footer */
footer{ background:var(--brand); color:var(--paper); padding:3rem 0 2rem; }
.foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; align-items:center; }
.foot-logo{ font-family:var(--display); font-size:var(--fs-lg); letter-spacing:.06em; }
.foot-links{ display:flex; gap:1.6rem; font-size:var(--fs-sm); }
.foot-links a{ color:var(--foot-link); }
.foot-links a:hover,.foot-links a[aria-current]{ color:var(--white); }
.copy{ margin-top:2rem; font-size:var(--fs-xs); color:var(--foot-copy); letter-spacing:.05em; }

/* Reveal（JSが動くときだけ、画面に入ったら出す。JSが無ければ最初から見える） */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }

/* Responsive */
@media(max-width:820px){
  .nav-links,.nav-cta{ display:none; }
  .nav-links .nav-sp{ display:block; }
  .burger{ display:flex; }
  .about-grid,.contact-grid{ grid-template-columns:1fr; }
  .services,.strengths{ grid-template-columns:1fr; }
  .nav-links.open{ display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; background:var(--paper); padding:1.5rem 5vw; gap:1.2rem; border-bottom:1px solid var(--line); }
  .js .reveal{ opacity:1; transform:none; }
  .hero{ background-image:url("images/hero-800.jpg");
    background-image:image-set(url("images/hero-800.webp") type("image/webp"), url("images/hero-800.jpg") type("image/jpeg")); }
  .hero::after{ background:var(--hero-veil-sp); }
}

@media(max-width:540px){
  .logo img{ height:34px; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-stats{ gap:1.6rem 2.4rem; }
  .company-table tr{ display:block; padding:.7rem 0; border-bottom:1px solid var(--line); }
  .company-table th,.company-table td{ display:block; width:auto; padding:.15rem 0; border:none; white-space:normal; }
  .company-table th{ color:var(--accent-text); font-size:var(--fs-xs); }
  .foot-top{ flex-direction:column; align-items:flex-start; }
  .foot-links{ flex-wrap:wrap; gap:1rem 1.4rem; }
  .banner-img{ aspect-ratio:16/9; }
  .contact-info .big{ font-size:var(--fs-lg); }
  section{ padding:2.8rem 0; }
}

/* 動きを減らす設定のときは、なめらかなスクロールとふわっと出る動きを止める */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn,.btn-primary:hover{ transition:none; transform:none; }
  .nav-links a::after,.burger span{ transition:none; }
}

/* スパム避けハニーポット：画面外へ追い出して人間には見せない */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---- プライバシーポリシー（privacy.html） ---- */
.breadcrumb{ font-size:var(--fs-xs); color:var(--muted); margin-bottom:2rem; display:flex; gap:.6rem; align-items:center; }
.breadcrumb a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb a:hover{ color:var(--accent-text); }
.policy{ max-width:46em; }
.policy-lead{ margin-bottom:2.4rem; }
.policy h2{ font-family:var(--display); font-size:var(--fs-md); font-weight:700; margin:2.4rem 0 .8rem; padding-left:.9rem; border-left:3px solid var(--brand); letter-spacing:.02em; }
.policy p{ margin-bottom:.9rem; }
.policy ul{ list-style:none; margin:.4rem 0 1.2rem; }
.policy ul li{ position:relative; padding-left:1.3rem; margin-bottom:.4rem; }
.policy ul li::before{ content:""; position:absolute; left:.2rem; top:.85em; width:6px; height:2px; background:var(--accent); }
.policy .company-table{ margin-top:1.2rem; }
.policy-date{ margin-top:3rem; font-size:var(--fs-sm); color:var(--muted); }

/* ---- お問い合わせの結果の画面（contact.php） ---- */
.cf-wrap{ max-width:640px; margin:0 auto; padding:10vh 6vw; text-align:center; }
.cf-wrap h1{ font-family:var(--display); font-size:var(--fs-lg); line-height:1.5; margin-bottom:1.2rem; }
.cf-wrap p{ line-height:1.9; margin:.6rem 0; }
.cf-wrap .btn{ margin-top:1.8rem; }
.cf-err{ text-align:left; background:var(--err-bg); border:1px solid var(--err-line); padding:1rem 1.2rem; border-radius:8px; margin:1.4rem 0; list-style:disc inside; }
.cf-err li{ margin:.35rem 0; }
.cf-head{ border-bottom:1px solid var(--line); }
.cf-head .nav{ height:64px; }