/* ============================================
   ナチュラル造園サイト | 共通スタイル
   1. 色の変更 → :root
   2. トップの写真 → .hero の background-image
   3. 各写真 → .about-image など
============================================ */
:root {
   --green: #426a50;
   --green-dark: #30523c;
   --green-light: #a0b9a1;
   --text: #33483a;
   --muted: #66766a;
   --cream: #fdfbf6;
   --warm: #f6f7f0;
   --pale: #edf4e9;
   --line: #dce7db;
   --serif: 'Noto Serif JP', serif;
   --sans: 'Noto Sans JP', sans-serif;
}

*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
}

body {
   margin: 0;
   background: var(--cream);
   color: var(--text);
   font: 15px/1.95 var(--sans);
   -webkit-font-smoothing: antialiased
}

a {
   color: inherit;
   text-decoration: none
}

a:focus-visible {
   outline: 3px solid #8cab90;
   outline-offset: 4px
}

h1,
h2,
h3,
p {
   margin: 0
}

h1,
h2 {
   font-family: var(--serif);
   font-weight: 500
}

.container {
   width: min(1120px, calc(100% - 48px));
   margin-inline: auto
}

/* ナビゲーション */
.site-header {
   position: sticky;
   top: 0;
   z-index: 30;
   background: rgba(253, 251, 246, .97);
   border-bottom: 1px solid rgba(66, 106, 80, .1);
   backdrop-filter: blur(12px)
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   min-height: 88px
}

.logo {
   flex-shrink: 0;
   display: block;
   color: var(--green);
   font: 600 25px/1.35 var(--serif);
   letter-spacing: .09em;
   white-space: nowrap
}

.logo span {
   display: block;
   font: 500 10px/1.7 var(--sans);
   letter-spacing: .2em
}

.main-nav {
   display: flex;
   gap: 25px;
   align-items: center;
   font-size: 12px;
   font-weight: 600
}

.main-nav>a:not(.nav-contact) {
   transition: color .2s
}

.main-nav>a:not(.nav-contact):hover {
   color: #789780
}

.nav-contact,
.contact-button,
.recruit-button {
   display: inline-flex;
   gap: 28px;
   align-items: center;
   justify-content: center;
   background: var(--green);
   color: white;
   border-radius: 999px;
   transition: background .25s, transform .25s
}

.nav-contact {
   padding: 12px 23px;
   white-space: nowrap
}

.nav-contact:hover,
.contact-button:hover,
.recruit-button:hover {
   background: var(--green-dark);
   transform: translateY(-2px)
}

/* HERO: 選んだ草の写真を images/hero.jpg に保存すると自動で表示されます。
   まだファイルがない場合は代替の緑の写真が表示されます。 */
.hero {
   position: relative;
   isolation: isolate;
   display: flex;
   align-items: center;
   min-height: clamp(570px, 78vh, 780px);
   color: #fff;
   background-color: #4f8a43;
   background-image: url('images/hero.jpg');
   background-position: center 54%;
   background-size: cover;
   background-repeat: no-repeat
}

.hero-shade {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background: linear-gradient(90deg, rgba(20, 48, 29, .48) 0%, rgba(20, 48, 29, .25) 38%, rgba(20, 48, 29, .04) 75%, transparent 100%)
}

.hero-content {
   position: relative;
   z-index: 1;
   padding: 100px 0 115px
}

.hero-sub {
   margin-bottom: 28px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .23em;
   text-shadow: 0 1px 7px #173a2d40
}

.hero h1 {
   max-width: 900px;
   font-size: clamp(42px, 4.5vw, 72px);
   line-height: 1.45;
   letter-spacing: .06em;
   text-shadow: 0 2px 12px rgba(0, 0, 0, .2)
}

.hero-description {
   margin-top: 29px;
   font-size: 14px;
   font-weight: 500;
   line-height: 2.4;
   letter-spacing: .07em;
   text-shadow: 0 1px 9px rgba(0, 0, 0, .27)
}

.hero-link {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 36px;
   margin-top: 42px;
   padding: 15px 27px;
   border: 1px solid rgba(255, 255, 255, .85);
   border-radius: 999px;
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(4px);
   font-size: 13px;
   font-weight: 600;
   transition: background .3s, transform .3s
}

.hero-link:hover {
   background: rgba(255, 255, 255, .25);
   transform: translateY(-2px)
}

.hero-caption {
   position: absolute;
   right: 5%;
   bottom: 27px;
   font-size: 10px;
   letter-spacing: .22em;
   text-shadow: 0 1px 8px #0006
}

.hero-caption span {
   font-size: 19px;
   margin-left: 12px
}

/* =========================
   共通セクション
========================= */

.section {
   padding: 112px 0;
}

.section-label {
   margin-bottom: 23px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.23em;
   color: #658d6e;
}

.section-label span {
   margin-left: 15px;
   color: #738779;
   font-weight: 400;
   letter-spacing: 0.08em;
}

h2 {
   font-size: clamp(28px, 3vw, 39px);
   line-height: 1.75;
   letter-spacing: 0.065em;
   margin-bottom: 26px;
}

h3 {
   line-height: 1.65;
}

/* =========================
   会社紹介 ABOUT
========================= */

.about-section,
.works-section {
   background: var(--cream);
}

.about-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9%;
   align-items: center;
}

/* 会社紹介の写真 */
.about-image {
   min-height: 520px;
   border-radius: 20px;
   background: url("images/company.webp") center / cover no-repeat;
}

/* 会社紹介の見出し */
.about-copy h2 {
   font-size: clamp(32px, 3vw, 46px);
   line-height: 1.45;
   letter-spacing: 0.04em;
   margin-bottom: 30px;
}

/* 会社紹介の説明文 */
.about-copy>p:not(.section-label) {
   margin-bottom: 20px;
   font-size: 15px;
   line-height: 2;
   letter-spacing: 0.02em;
   color: #526557;
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 50px;
   margin-top: 22px;
   padding-bottom: 10px;
   border-bottom: 1px solid #b7cbb8;
   color: var(--green);
   font-size: 13px;
   font-weight: 600
}

.section-heading {
   display: flex;
   justify-content: space-between;
   gap: 35px;
   align-items: end;
   margin-bottom: 38px
}

.section-heading h2 {
   margin-bottom: 0
}

.section-heading>p {
   max-width: 330px;
   margin-bottom: 5px;
   color: var(--muted);
   font-size: 13px;
   line-height: 2.1
}

.services-section {
   background: var(--warm)
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px
}

.service-card {
   overflow: hidden;
   background: #fff;
   border: 1px solid #e8eee5;
   border-radius: 18px;
   box-shadow: 0 13px 33px rgba(44, 79, 52, .045);
   transition: transform .25s, box-shadow .25s
}

.service-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 35px rgba(44, 79, 52, .1)
}

.service-image {
   height: 240px;
   background-size: cover;
   background-position: center
}

.service-image-1 {
   background-image: url('images/service1.png');
   background-position: 35% center;
}

.service-image-2 {
   background-image: url('images/service2.png')
}

.service-image-3 {
   background-image: url("images/service3.png")
}

.service-content {
   padding: 26px 26px 30px
}

.service-content>span,
.feature-number {
   font-size: 11px;
   color: #7c9e80;
   letter-spacing: .15em
}

.service-content h3 {
   margin: 8px 0 10px;
   font-size: 18px;
   font-weight: 600
}

.service-content p {
   color: #526557;
   font-size: 15px;
   line-height: 1.9;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.work-image {
  height: 240px;
  border-radius: 17px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.work-image-1 {
   background-image: url('images/work1.png')
}

.work-image-2 {
   background-image: url("images/work2.png")
}

.work-image-3 {
   background-image: url("images/work3.png")
}

.work-category {
   margin-top: 19px;
   color: #6b8a71;
   font-size: 11px;
   letter-spacing: .15em
}

.work-item h3 {
   margin-top: 6px;
   font-size: 17px;
   font-weight: 500
}

.sample-note,
.recruit-note,
.recruit-footnote {
   font-size: 11px;
   color: #7e8d80;
   margin-top: 20px
}

.recruit-section {
   background: var(--pale)
}

.recruit-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 8%
}

.recruit-photo {
  min-height: 485px;
  border-radius: 20px;
  background: url("images/recruit.jpg")
    center / cover no-repeat;
}

.recruit-body h2 {
  color: var(--green);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.recruit-lead {
   font-weight: 600;
   margin-bottom: 14px
}
.recruit-description {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: #526557;
}

.recruit-button {
   margin-top: 19px;
   padding: 15px 28px;
   font-size: 13px;
   font-weight: 600
}

.company-section {
   background: var(--warm)
}

.company-layout {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 9%
}

.company-layout>div>p:last-child {
   font-size: 14px;
   color: var(--muted);
   line-height: 2.25
}

.company-info {
   margin: 0;
   font-size: 13px
}

.company-info>div {
   display: grid;
   grid-template-columns: 115px 1fr;
   gap: 15px;
   padding: 19px 0;
   border-bottom: 1px solid var(--line)
}

.company-info dt {
   font-weight: 600
}

.company-info dd {
   margin: 0;
   color: var(--muted)
}

.contact-section {
   padding: 105px 0;
   background: #e9f1e5;
   color: var(--text);
   text-align: center
}


/* 電話・メールの表示エリア */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 850px;
  margin: 40px auto 0;
}

/* 電話・メールの共通デザイン */
.contact-method {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 30px 18px;
  background: #ffffff;
  border: 1px solid #dce7db;
  border-radius: 18px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.contact-method:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(44, 79, 52, 0.1);
}

.contact-method-label {
  font-size: 13px;
  color: #66766a;
}

.contact-method-value {
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  color: #426a50;
  overflow-wrap: anywhere;
}

/* スマートフォンでは縦並び */
@media (max-width: 680px) {
  .contact-methods {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-method {
    padding: 25px 15px;
  }
}


.contact-section h2 {
   color: var(--green)
}

.contact-inner>p:not(.section-label) {
   font-size: 14px;
   line-height: 2.2;
   color: #637566
}

.contact-button {
   padding: 16px 34px;
   margin-top: 25px;
   font-size: 14px;
   font-weight: 600
}

.contact-inner .contact-caution {
   margin-top: 20px;
   font-size: 11px !important;
   color: #79887b !important
}

.site-footer {
   background: var(--cream);
   padding: 35px 0
}

.footer-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 22px
}

.footer-logo {
   font-size: 19px
}

.site-footer p {
   font-size: 11px;
   color: #879487
}

/* 採用ページ */
.subpage-hero {
   background: linear-gradient(120deg, #edf5ea, #fbfaf5);
   padding: 86px 0
}

.subpage-hero h1 {
   font-size: clamp(35px, 4.5vw, 55px);
   line-height: 1.5;
   color: var(--green);
   margin-bottom: 17px
}

.subpage-hero-inner>p:last-child {
   color: var(--muted)
}

.breadcrumb {
   padding-top: 26px;
   color: var(--muted);
   font-size: 12px
}

.breadcrumb a {
   text-decoration: underline;
   text-underline-offset: 4px
}

.recruit-intro {
   max-width: 720px;
   margin: 0 auto 58px;
   text-align: center
}

.recruit-intro>p:last-child {
   color: var(--muted)
}

.job-feature-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-bottom: 105px
}

.job-feature {
   background: var(--warm);
   border-radius: 17px;
   padding: 34px 28px
}

.job-feature h3 {
   margin: 10px 0;
   font-size: 17px
}

.job-feature p {
   color: var(--muted);
   font-size: 13px
}

.requirements {
   max-width: 940px;
   margin: 0 auto
}

.requirements>.section-label,
.requirements>h2,
.requirements-lead {
   text-align: center
}

.requirements-lead {
   margin-bottom: 36px;
   color: var(--muted);
   font-size: 13px
}

.job-table {
   margin: 0;
   border-top: 2px solid var(--green)
}

.job-table>div {
   display: grid;
   grid-template-columns: 180px 1fr;
   gap: 30px;
   padding: 22px 18px;
   border-bottom: 1px solid var(--line)
}

.job-table dt {
   font-weight: 600;
   font-size: 13px
}

.job-table dd {
   margin: 0;
   color: #526658;
   font-size: 13px
}

.job-table small {
   display: block;
   margin-top: 7px;
   color: #879288;
   font-size: 11px
}

.pending {
   font-weight: 600;
   color: #ab7649
}

.apply-panel {
   max-width: 940px;
   margin: 100px auto 35px;
   padding: 64px 30px;
   border-radius: 22px;
   text-align: center;
   background: var(--pale)
}

.apply-panel h2 {
   color: var(--green)
}

.apply-panel>p:not(.section-label) {
   color: var(--muted)
}

.back-to-home {
   display: block;
   width: fit-content;
   margin: 0 auto;
   color: var(--green);
   font-size: 13px;
   text-decoration: underline;
   text-underline-offset: 5px
}



/* 画面幅に応じてレイアウト変更 */
@media(max-width:980px) {
   .header-inner {
      padding: 13px 0;
      flex-wrap: wrap;
      justify-content: center
   }

   .main-nav {
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 21px
   }

   .section {
      padding: 90px 0
   }

   .about-layout,
   .recruit-layout {
      gap: 6%
   }

   .about-image {
      min-height: 430px
   }
}

@media (min-width: 681px) and (max-width: 980px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:680px) {
   html {
      scroll-padding-top: 140px
   }

   .container {
      width: calc(100% - 36px)
   }

   .header-inner {
      min-height: auto;
      gap: 12px
   }

   .logo {
      text-align: center;
      font-size: 21px
   }

   .main-nav {
      font-size: 11px;
      gap: 9px 14px
   }

   .nav-contact {
      padding: 8px 13px
   }

   .hero {
      min-height: 620px;
      background-position: 58% center
   }

   .hero-shade {
      background: linear-gradient(90deg, rgba(20, 48, 29, .59), rgba(20, 48, 29, .27) 100%)
   }

   .hero-content {
      padding: 75px 0 90px
   }

   .hero-sub {
      font-size: 10px;
      margin-bottom: 23px
   }

   .hero h1 {
      font-size: clamp(36px, 8.3vw, 48px);
      line-height: 1.5;
      letter-spacing: .025em
   }

   .hero-description {
      margin-top: 23px;
      font-size: 12px
   }

   .hero-link {
      margin-top: 30px
   }

   .hero-caption {
      bottom: 17px
   }

   .section {
      padding: 76px 0
   }

   .section-heading {
      display: block
   }

   .section-heading>p {
      margin-top: 18px
   }

   .about-layout,
   .recruit-layout,
   .service-grid,
   .works-grid,
   .company-layout {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .about-image,
   .recruit-photo {
      min-height: 320px
   }

   .recruit-photo {
      order: 0
   }

   .recruit-body {
      order: 1
   }

   .service-image {
      height: 250px
   }

   .work-image {
      height: 265px
   }

   .company-info>div {
      grid-template-columns: 92px 1fr
   }

   .job-feature-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-bottom: 75px
   }

   .job-table>div {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 18px 8px
   }

   .apply-panel {
      margin-top: 70px;
      padding: 44px 20px
   }

   .footer-inner {
      flex-direction: column;
      text-align: center
   }

   .contact-section {
      padding: 75px 0
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      transition: none !important
   }
}