:root{
  --brand:#2e7d32;        /* 上部帯/アクセント */
  --ink:#1b1f23;          /* 文字色 */
  --muted:#6b7280;        /* サブ文字 */
  --bg:#ffffff;           /* 背景 */
  --line:#e5e7eb;         /* 罫線 */
  --max:1100px;           /* コンテンツ幅 */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  letter-spacing: .02em;
}

.nowrap{ white-space:nowrap; }

.container{
  width:min(100% - 32px, var(--max));
  margin-inline:auto;
}

/* ===== Topbar ===== */
.topbar{
  height:8px;
  background:#416a18;
}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--line);
  border-top: 10px solid #416a18;
}

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:16px;
  padding-block:14px;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
  font-weight:900;
}
.brand-line1{ font-size:14px; letter-spacing:.1em; }
.brand-line2{ font-size:18px; }

.nav{
  display:flex;
  gap:24px;
}
.nav-link{
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
  position:relative;
}
.nav-link:is(:hover,:focus-visible){ opacity:.7; }
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px; background:#416a18;
}

.tel{
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .15em .9em;
    border: 2px solid #416a18;
    border-radius: 999px;
    text-decoration: none;
    color: #416a18;
    font-weight: 700;
    font-size: 26px;
}
.tel:focus-visible{ outline:3px solid #cde9cf; outline-offset:2px; }
.tel-icon{ filter:grayscale(1) contrast(1.1); }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:52svh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%),
    url("images/hero.jpg") center/cover no-repeat;
}
.hero-overlay{
  position:absolute; inset:0;
  display:grid; place-content:center;
  text-align:left;
  padding:clamp(16px, 3vw, 40px);
}
.hero-kicker{
  color:#eaf5ff;
  font-weight:700;
  font-size:clamp(28px, 3.5vw, 35px);
  margin:0 0 .25em;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  font-family:serif;
  text-align:center;
}
.hero-title{
  color:#fff;
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.25;
  font-size:clamp(35px, 6.2vw, 65px);
  text-shadow:0 2px 14px rgba(0,0,0,.45);
  font-family:serif;
  text-align:center;
}

/* ===== News ===== */
.news{ padding:48px 0; background:#fff; }
.sec-title{
  font-size:22px;
  margin:0 0 18px;
  font-weight:700;
  letter-spacing:.08em;
}
.news .container {
	display:flex;
	flex-wrap:wrap;}
.news .sec-title {
	width:20%;}
.news .news-list {
	width:80%;}
.news-list{
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.news-item{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.news-date{
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}
.news-text{ color:#333; }

/* ===== Cards ===== */
.cards{ padding:28px 0 48px; background:#fff; }
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.card{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  isolation:isolate;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.card > img{
  width:100%; height:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  display:block;
  filter:saturate(1.02);
  transition: transform .5s ease;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  z-index:1;
}
.card:hover > img{ transform:scale(1.04); }

.card-overlay{
  position:absolute; inset:0;
  z-index:2;
  display:grid; place-content:center;
  text-align:center;
  font-family:serif;
}
.card-ja{
  margin:0 0 6px;
  font-weight:700;
  font-size:clamp(18px, 2.2vw, 22px);
  letter-spacing:.12em;
}
.card-en{
  margin:0;
  font-weight:600;
  opacity:.9;
}

/* ===== Company ===== */
.company{
  background:#fff;
  padding:28px 0 0;
  border-top:1px solid var(--line);
}
.company-inner{
  text-align:center;
  padding-bottom:18px;
}
.company-name{
  margin:.2em 0 .2em;
  font-size:32px;
  font-weight:400;
}
.company-address{
  margin:0 0 10px;
  color:#374151;
  font-size:22px;
}

.map-wrap{
  width:100%;
  border-top:1px solid var(--line);
}
.map-wrap iframe{
  width:100%; height:30vw; border:0;margin-bottom:-8px;
}

/* ===== Footer ===== */
.site-footer{
  background:#416a18;
  color:#e9f5ea;
  text-align:center;
  padding:14px 0;
  font-size:14px;
}

.wrap {
	max-width:1100px;
	margin:0 auto;
	padding:20px 0 50px 0;}

.breadcrumb {
	margin:20px 0 0 0;}

.breadcrumb a {
	color:#416a18;}

.breadcrumb a:hover {
	color:#83a95d;}

.wrap h2 {
	text-align:center;
	}

.wrap h2+p {
	text-align:center;
	}

.about_tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border:1px solid #f2f2f2;
	margin-top:40px;}

thead th {
	background: #f3f4f6;
	color: #374151;
	font-weight: 600;
	text-align: left;
	padding: 14px 24px;
	border-bottom: 1px solid var(--line);
	font-size: .95rem;
	}


tbody th, tbody td {
	padding: 14px 24px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	background: #fff;
	}


tbody tr:last-child th,
tbody tr:last-child td { border-bottom: none; }


tbody th {
	width: 28%;
	color: #374151;
	font-weight: 600;
	background: #fafafa;
	}


tbody td { color: #111827; }

body.about #about {
	padding:0;}

form { padding: 24px; display: flex; flex-direction: column; gap: 20px; }


label { font-weight: 600; margin-bottom: 6px; display: block; }
.req { color: var(--accent); margin-left: 4px; font-size: .9rem; }


input[type="text"], input[type="email"], input[type="tel"], textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
font-size: 1rem;
background: #fff;
box-sizing: border-box;
}


textarea { min-height: 140px; resize: vertical; }


button[type="submit"] {
appearance: none; border: none; cursor: pointer;
background: rgb(65 106 24);
color: #fff;
font-weight: 700; font-size: 1rem;
padding: 12px 18px; border-radius: 999px;
box-shadow: 0 8px 18px rgba(37,99,235,.25);
}
.req {
	color:red;
	font-size:80%;}


.error { color: var(--danger); font-size: .9rem; display: none; }

.sec h2{font-size:1.4rem;margin:0 0 12px}
.muted{color:var(--muted)}
.grid{display:grid;gap:18px}


/* Service cards */
.box_area{grid-template-columns:repeat(3,minmax(0,1fr))}
.box01{background:var(--box01);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.box01 h3{margin:.2em 0 .4em;font-size:1.1rem}
.chip{display:inline-block;background:#eff6ff;color:#1e3a8a;padding:2px 8px;border-radius:999px;font-size:.8rem;margin-left:6px}
.box01 ul{margin:0 0 0 18px}


/* Flow */
.flow{counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:flex-start}
.no{counter-increment:step;background:var(--accent);color:#fff;border-radius:999px;min-width:36px;height:36px;display:inline-grid;place-items:center;font-weight:900}
.step+.step{margin-top:14px}


/* Price */
.price-note{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px}


/* FAQ */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
details+details{margin-top:10px}
summary{font-weight:700;cursor:pointer}

.sec h2 {
	border-bottom:2px dotted #416a18;
	color:#416a18;
	padding-bottom:5px;
	margin:20px 0;}

.greeting_box {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;}

.greeting_box img {
	width:28%;}

.greeting_txt {
	width:70%;}

.greeting_txt p:first-child {
	margin:0;}

.no {
    background-color: #416a18;}

.error { color:#b00020; font-size:.9em; margin-top:4px; display:block; }
.field-error input, .field-error textarea { border:1px solid #b00020; }
.req { color:#d00; }
.global-error { background:#ffecec; border:1px solid #ffb3b3; padding:.75em; margin:0 0 1em; }
form { max-width: 640px; margin: 2rem auto; padding: 1rem; }
label { display:block; font-weight:600; margin-top:1rem; }
input, textarea, button { width:100%; padding:.6rem; font-size:1rem; }
button { margin-top: 1.25rem; }
.sr-only { position:absolute; left:-9999px; }




/* ===== Responsive ===== */
@media (max-width: 980px){
  .header-inner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand tel"
      "nav nav";
  }
  .brand{ grid-area:brand; }
  .tel{ grid-area:tel; }
  .nav{ grid-area:nav; justify-content:center; flex-wrap:wrap; row-gap:10px; padding-top:6px; }
  .nav-link.is-active::after{ bottom:-6px; }
}

@media (max-width: 768px){
  .news-item{ grid-template-columns: 110px 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  .card > img{ aspect-ratio: 16/9; }
  .news .container {display:block;}
  .news .sec-title,.news .news-list {
    width: 100%;}
  .tel {font-size:19px;}
  .map-wrap iframe {height:100vw;}

.greeting_box {
	display:block;}

.greeting_box img,
.greeting_txt {
	width: 100%;
    object-fit: cover;
    aspect-ratio: 100 / 90;
    margin-bottom: 20px;}

.brand img {
	max-width:170px;}

a.tel {
	font-size:16px;}

a.tel img {
	max-width:30px;}

.forpc {display:none;}

.grid.box_area {
	display:block;
	margin-bottom:30px;}

.grid.box_area .box01 {
	margin-bottom:20px;}

tbody td {
    display: block;
    width: 100%;
    text-align: center;
}

tbody th {
    display: block;
    width: 100%;}

.nav a {
    width: 45%;
    text-align: center;}










}
@media (min-width: 769px){
.forsp {display:none;}
}