:root{
  /* --- Color 案1 Natural White --- */
  --bg:#FFFFFF;        /* 背景・主色 */
  --surface:#FAF9F4;   /* 面（セクション地） */
  --pale:#F4F0DF;      /* 淡い黄色（点・気配で使用） */
  --grey:#B8B8B2;      /* 薄いグレー（整え） */
  --accent:#A8B39A;    /* 自然色アクセント */
  --cta:#8E9C82;       /* 主ボタン */
  --cta-hover:#7d8b72;
  --cta-ink:#FFFFFF;
  --ink:#33352F;       /* 本文 */
  --muted:#5E6058;     /* 補助文字（白背景でAA≥4.5:1を確保） */
  --line:#E7E5DB;      /* 罫線 */
  --dark:#2F312C;      /* フッター地 */
  --dark-ink:#CFD0C9;

  --maxw:1080px;
  --gutter:24px;
  --radius:8px;
  --ease:.25s ease;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);line-height:1.2;}
.brand-logo{height:38px;width:auto;display:block;}
.brand-name{font-size:20px;font-weight:700;letter-spacing:.12em;}
.brand small{display:block;font-size:9px;letter-spacing:.3em;color:var(--muted);font-weight:400;}
.gnav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.gnav a{text-decoration:none;font-size:13px;letter-spacing:.08em;color:var(--ink);transition:color var(--ease);padding:6px 0;}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--accent);}
.nav-toggle{display:none;background:none;border:0;font-size:27px;line-height:1;cursor:pointer;color:var(--ink);padding:8px 10px;}

/* ---------- Hero (FV) ---------- */
.hero{
  position:relative;min-height:78vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#c7ccbf 0%,#e9e6d7 45%,#cfd3c6 100%); /* 動画読込前/非対応時のフォールバック */
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(45,47,42,.34),rgba(45,47,42,.5)); /* 文字可読性のための暗幕 */
}
/* 動きを減らす設定では動画を止め、フォールバック背景を見せる */
@media(prefers-reduced-motion:reduce){ .hero__video{display:none;} }
.hero__inner{position:relative;z-index:2;padding:0 20px;}
.hero__name{font-size:14px;letter-spacing:.5em;margin-bottom:22px;opacity:.92;}
.hero__catch{font-size:clamp(26px,4.4vw,46px);font-weight:600;line-height:1.6;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.25);}
.hero__sub{margin-top:18px;font-size:12px;letter-spacing:.18em;opacity:.82;}

/* ---------- Section commons ---------- */
.block{padding:100px 0;}
.block--surface{background:var(--surface);}
.eyebrow{font-size:11px;letter-spacing:.35em;color:var(--accent);text-align:center;margin:0 0 20px;}
.lead{font-size:clamp(20px,2.6vw,28px);font-weight:600;text-align:center;line-height:2;margin:0 auto;max-width:22em;text-wrap:balance;}
.hero__catch,.page-head h1,.company-title,.greeting h2,.contact-cta h2{text-wrap:balance;}
.lead .mark{background:linear-gradient(transparent 62%,var(--pale) 62%);padding:0 .1em;}
.body-copy{max-width:34em;margin:28px auto 0;text-align:center;color:var(--muted);font-size:15px;}

/* ---------- Business ---------- */
.biz-head{text-align:center;margin-bottom:56px;}
.biz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.biz-card{border:1px solid var(--line);border-radius:10px;padding:30px 14px;text-align:center;background:var(--bg);}
.biz-ico{width:44px;height:44px;border-radius:50%;background:var(--pale);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#9a8f3f;}
.biz-ico svg{width:22px;height:22px;display:block;}
.biz-card h3{font-size:14px;font-weight:600;margin:0;letter-spacing:.04em;}

/* ---------- Bridge (about teaser) ---------- */
.bridge{text-align:center;}
.bridge .lead{margin-bottom:40px;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-size:14px;letter-spacing:.08em;padding:15px 40px;border-radius:6px;transition:all var(--ease);cursor:pointer;border:0;font-family:inherit;}
.btn--line{border:1.5px solid var(--grey);color:var(--ink);background:transparent;}
.btn--line:hover{border-color:var(--accent);color:var(--accent);}
.btn--cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 6px 18px rgba(142,156,130,.35);}
.btn--cta:hover{background:var(--cta-hover);}
.btn--cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}

/* ---------- Contact CTA band ---------- */
.contact-cta{text-align:center;}
.contact-cta h2{font-size:clamp(20px,2.6vw,26px);font-weight:600;margin:0 0 12px;}
.contact-cta p{color:var(--muted);font-size:14px;margin:0 0 34px;}

/* ---------- Page header (下層) ---------- */
.page-head{padding:120px 0 40px;text-align:center;background:var(--surface);border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(24px,3.4vw,34px);font-weight:600;margin:0;letter-spacing:.08em;}
.page-head p{color:var(--muted);font-size:13px;margin:12px 0 0;letter-spacing:.1em;}

/* ---------- About ---------- */
.about-photo{max-width:400px;margin:64px auto 0;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(45,47,42,.08);}
.about-photo img{width:100%;height:auto;display:block;}
.company-title{font-size:20px;font-weight:600;text-align:center;margin:72px 0 32px;}
.company-table{width:100%;border-collapse:collapse;max-width:720px;margin:0 auto;}
.company-table th,.company-table td{text-align:left;padding:18px 8px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;}
.company-table th{width:180px;font-weight:600;color:var(--ink);}
.company-table td{color:var(--muted);}
.greeting{max-width:720px;margin:0 auto;}
.greeting h2{font-size:20px;font-weight:600;text-align:center;margin:0 0 32px;}
.greeting p{font-size:15px;margin:0 0 20px;}
.greeting .sign{text-align:right;color:var(--muted);font-size:14px;margin-top:28px;}

/* ---------- Contact（Googleフォーム埋め込み） ---------- */
.form-embed{max-width:720px;margin:0 auto;}
.form-embed iframe{width:100%;min-height:1020px;border:0;display:block;} /* フォーム実高さ958px＋エラー表示余裕（2026-07 計測） */
.form-fallback{text-align:center;font-size:13px;color:var(--muted);margin:20px 0 0;}
.form-fallback a{color:var(--accent);}
/* モバイル（640px以下）は埋め込みをやめてフォーム直リンクに切り替え */
.form-open{display:none;text-align:center;}
.form-open p{color:var(--muted);font-size:13px;margin:20px 0 0;}
@media(max-width:640px){
  .form-embed{display:none;}
  .form-open{display:block;}
}

/* ---------- Legal（プライバシーポリシー） ---------- */
.legal{max-width:760px;margin:0 auto;}
.legal h2{font-size:17px;font-weight:600;margin:40px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.legal h2:first-child{margin-top:0;}
.legal p,.legal li{font-size:14px;color:var(--muted);}
.legal ul{padding-left:1.2em;}

/* ---------- 404 ---------- */
.notfound{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;}
.notfound h1{font-size:56px;margin:0;color:var(--accent);letter-spacing:.05em;}
.notfound p{color:var(--muted);margin:12px 0 32px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:var(--dark-ink);font-size:12px;margin-top:0;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:48px var(--gutter) 20px;}
.footer-brand{font-size:17px;font-weight:700;letter-spacing:.12em;color:#fff;text-align:center;}
.footer-brand small{display:block;font-size:9px;letter-spacing:.3em;color:#8a8c83;font-weight:400;margin-top:4px;}
.site-footer a{color:var(--dark-ink);text-decoration:none;}
.site-footer a:hover{color:#fff;}
.footer-nav a{margin-left:20px;}
.footer-copy{width:100%;border-top:1px solid #43453e;padding:16px 0 0;color:#8a8c83;font-size:11px;text-align:center;}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav-toggle{display:block;}
  .gnav{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height var(--ease);}
  .gnav.open{max-height:340px;}
  .gnav ul{flex-direction:column;gap:0;padding:8px var(--gutter);}
  .gnav li{border-bottom:1px solid var(--line);}
  .gnav li:last-child{border-bottom:0;}
  .gnav a{display:block;padding:14px 0;}
  .biz-grid{grid-template-columns:repeat(2,1fr);}
  .block{padding:72px 0;}
  .hero{min-height:70vh;}
  .footer-inner{flex-direction:column;gap:16px;}
  .footer-nav a{margin:0 16px 0 0;}
  .company-table th{width:120px;}
}
@media(max-width:480px){
  .biz-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- A11y: focus-visible（キーボード操作時のフォーカス明示） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--cta);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- A11y: 動きを減らす設定への配慮 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}