@charset "UTF-8";
/* ------------------------------------------------------------------
   株式会社Playgreen（No.115）刷新案（B案）
   様式：写真主役×力強さ。濃い土の色（現行の#391d01を引き継ぐ）に
        生成りの文字、若葉のアクセント。太いゴシックで「腕と装備」を立てる。
   設計理由：この会社の核は「技能グランプリ第1位の腕」と
            「庭から山・クレーンまで届く守備範囲」。写真636枚が資産なので
            モザイクヒーロー＋絞り込みギャラリーの写真主役構成にする。
   配色2案：山（初期＝現行の焦茶を引き継ぐ）／森（深緑）
------------------------------------------------------------------ */

:root {
  color-scheme: only light;
  --deep: #6a5b4b; /* 灰みの土（明度を上げ彩度を落とした 2026-07-30 CEO指示） */
  --deep2: #57493c;
  --base: #f6f3ec; /* 生成り */
  --paper: #fffdf8;
  --ink2: #38322a;
  --leaf: #8aa578; /* くすみ若葉（枠・チップ用） */
  --leaf-deep: #5c7452; /* ボタン用（白文字とのコントラスト4.9:1） */
  --leaf-text: #d6e3ca; /* 濃色地の上の文字用 */
  --line: #ddd6c8;
  --tint: #eeeade;
}

html[data-theme="mori"] {
  --deep: #5c6b5e;
  --deep2: #4a584d;
  --leaf: #94ab8c;
  --leaf-deep: #5c7452;
  --leaf-text: #d9e4d2;
  --tint: #eaeee5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink2);
  background: var(--base);
  padding-bottom: 78px; /* スマホの電話バーのぶん */
}

a {
  color: var(--leaf-deep);
}

.nw {
  display: inline-block;
  white-space: nowrap;
}

/* ---- 注釈 ---- */
.note {
  background: #fdf9ee;
  border: 1px solid #9c8f77;
  color: #4f3a14;
  font-size: 13px;
  line-height: 1.7;
  padding: 9px 12px;
  margin: 8px 10px;
}

.note strong {
  font-weight: 700;
}

/* ---- ヘッダー ---- */
.head {
  background: var(--deep);
  color: #fff;
  position: relative;
}

.head-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

.head-name a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  line-height: 1.2;
}

.head-en {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.14em;
}

.head-ja {
  font-size: 12.5px;
  opacity: 0.85;
  letter-spacing: 0.08em;
}

.head-tel {
  display: none;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  text-align: right;
}

.head-tel span {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.85;
}

.menu-btn {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--deep);
  background: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
}

/* スマホのメニューは「固定パネル」にしない（ヘッダー直下の全幅ドロップダウン） */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--deep);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 4px solid var(--leaf);
  z-index: 60;
}

.nav.is-open {
  display: block;
}

.nav ul {
  list-style: none;
  padding: 4px 14px 12px;
}

.nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  padding: 11px 4px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}

.theme {
  display: flex;
  gap: 6px;
}

.theme-btn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: #fff;
  cursor: pointer;
}

.theme-btn.is-on {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink2);
  font-weight: 700;
}

/* ---- ヒーロー ---- */
.hero {
  background: var(--deep);
  color: #fff;
}

.hero-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 18px 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 480px;
}

.hero-lead {
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--leaf-text);
  font-weight: 700;
}

.hero-title {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin: 8px 0 12px;
}

.hero-sub {
  font-size: 17px;
  max-width: 30em;
  opacity: 0.92;
}

.hero-badge {
  margin-top: 14px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--leaf);
  padding: 8px 14px;
  font-size: 14.5px;
}

.hero-badge em {
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
  color: var(--leaf-text);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  color: var(--leaf-deep);
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
  padding: 12px 22px;
  border-radius: 6px;
}

.btn-tel span {
  font-size: 13.5px;
  font-weight: 700;
}

.btn-tel.big {
  font-size: 30px;
  padding: 16px 30px;
}

.btn-sub {
  display: inline-flex;
  align-items: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 700;
  padding: 12px 20px;
}

/* 写真モザイク */
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.hero-grid figure {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  margin: 0;
}

.hero-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-grid figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(62, 54, 45, 0.82);
  color: #fff;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 0 6px 0 0;
}

.hg-a {
  grid-row: 1 / 3;
}

/* ---- セクション共通 ---- */
.sec {
  padding: 54px 0 60px;
}

.sec-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.sec-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding-left: 16px;
  border-left: 6px solid var(--leaf);
  color: var(--deep2);
}

.sec-lead {
  margin: 10px 0 26px;
  max-width: 46em;
}

.sec-dark {
  background: var(--deep);
  color: #fff;
}

.sec-dark .sec-title {
  color: #fff;
}

.sec-tint {
  background: var(--tint);
}

/* ---- できること ---- */
.svc {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.svc li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 10px;
}

.svc img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.svc h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--deep2);
  margin-top: 8px;
  padding: 0 6px;
  line-height: 1.5;
}

/* ---- 施工の記録 ---- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-btn {
  font-size: 15px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: #fff;
  cursor: pointer;
}

.filter-btn.is-on {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink2);
}

.works {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.works li {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
}

.works li.is-hide {
  display: none;
}

.works img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.works p {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 8px 10px 10px;
}

.works-note {
  margin-top: 18px;
  font-size: 13.5px;
  opacity: 0.8;
}

/* ---- 技能と装備 ---- */
.skill-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.skill-prize {
  font-size: 15px;
  font-weight: 700;
  color: var(--deep2);
}

.skill-prize em {
  display: block;
  font-style: normal;
  font-size: 27px;
  font-weight: 900;
  color: var(--leaf-deep);
  line-height: 1.4;
}

.skill-text {
  max-width: 40em;
}

.skill-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-chips li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  padding: 7px 16px;
  white-space: nowrap;
}

.skill-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: #6f6653;
}

/* ---- 庭師について ---- */
.person {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.person-photo {
  flex: 0 0 300px;
}

.person-photo img {
  border-radius: 8px;
}

.person-role {
  font-size: 14px;
  color: var(--leaf-deep);
  font-weight: 700;
}

.person-name {
  font-size: 30px;
  font-weight: 900;
  color: var(--deep2);
  margin-bottom: 10px;
}

.person blockquote {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--deep2);
  border-left: 5px solid var(--leaf);
  padding: 4px 0 4px 16px;
  margin-bottom: 12px;
}

.person-text {
  font-size: 16px;
  max-width: 40em;
}

/* ---- 会社案内 ---- */
.company-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
}

.company-table th,
.company-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

.company-table th {
  width: 9em;
  background: var(--tint);
  font-weight: 700;
  white-space: nowrap;
}

.company-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.company-links a {
  font-size: 15.5px;
  font-weight: 700;
}

/* ---- ご相談 ---- */
.contact-tel {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.contact-fax {
  font-size: 16px;
}

.form {
  background: var(--paper);
  color: var(--ink2);
  border-radius: 8px;
  padding: 20px;
  max-width: 640px;
}

.form dt {
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 4px;
}

.form dt em {
  color: #c0392b;
  font-style: normal;
}

.form dd {
  margin-bottom: 14px;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  font-size: 16px;
  font-family: inherit;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.form-btn {
  text-align: center;
}

.form-btn button {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--leaf-deep);
  border: none;
  border-radius: 6px;
  padding: 14px 40px;
  cursor: pointer;
}

.form-note {
  font-size: 13.5px;
  color: #6f6653;
  margin-top: 10px;
  text-align: center;
}

/* ---- フッター ---- */
.foot {
  background: var(--deep2);
  color: #fff;
  text-align: center;
  padding: 30px 16px 26px;
}

.foot-name {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.foot-addr {
  font-size: 14px;
  margin-bottom: 10px;
}

.foot-copy {
  font-size: 12.5px;
  opacity: 0.75;
}

/* ---- スマホの電話バー ---- */
.telbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 8px 10px;
  background: rgba(255, 253, 247, 0.96);
  border-top: 1px solid #9c8f77;
}

.telbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 6px;
  background: var(--leaf-deep);
  color: #fff;
  text-decoration: none;
  font-size: 21px;
  font-weight: 900;
}

.telbar a span {
  font-size: 13.5px;
  font-weight: 700;
}

/* ================================================================
   PC（900px以上）
================================================================ */
@media screen and (min-width: 900px) {
  body {
    padding-bottom: 0;
  }

  .telbar {
    display: none;
  }

  .head-tel {
    display: block;
    margin-left: auto;
  }

  .menu-btn {
    display: none;
  }

  .nav {
    display: block;
    position: static;
    background: none;
    border: none;
    flex: 1 1 100%;
    order: 10;
  }

  .nav ul {
    display: flex;
    gap: 2px;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .nav a {
    border-bottom: none;
    font-size: 15.5px;
    padding: 10px 14px;
  }

  .nav a:hover {
    color: var(--leaf-text);
  }

  .hero-in {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .hero-text {
    flex: 1 1 46%;
  }

  .hero-grid {
    flex: 1 1 54%;
    align-self: stretch;
  }

  .sec-title {
    font-size: 34px;
  }
}

/* ================================================================
   スマホ（899px以下）：段組みをたたむ
================================================================ */
@media screen and (max-width: 899px) {
  .hero-title {
    font-size: 33px;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .hg-a {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .hg-a img {
    aspect-ratio: 16 / 9;
  }

  .svc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person {
    flex-direction: column;
  }

  .person-photo {
    flex: none;
    align-self: center;
  }

  .company-table th {
    width: 7.5em;
    white-space: normal;
  }

  .btn-tel.big {
    font-size: 24px;
    padding: 14px 22px;
  }

  .sec {
    padding: 40px 0 46px;
  }

  .sec-title {
    font-size: 25px;
  }
}

/* ================================================================
   枝ナビ（追従ナビ）：固定ヘッダーの代わり。
   右端に幹＝スクロールの進み、葉＝各節。今いる節の葉が灯る。
   スクロールを始めると現れ、先頭付近では消えている。
   ※ヘッダーのメニュー（ドロップダウン）とは別物。すりガラスは使わない
================================================================ */

.twig {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: stretch;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.twig.is-shown {
  opacity: 1;
  visibility: visible;
}

.twig-trunk {
  width: 4px;
  border-radius: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

/* 樹液：スクロールの進みぶんだけ下から上へ満ちる */
.twig-sap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(to top, var(--leaf-deep), var(--leaf));
  transition: height 0.15s linear;
}

.twig ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.twig a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 26px;
  min-width: 22px;
}

/* 葉：丸の一角を尖らせた形。今いる節は濃い緑で大きく */
.twig-leaf {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--line);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.twig li.is-active .twig-leaf {
  background: var(--leaf-deep);
  transform: rotate(-45deg) scale(1.45);
}

/* ラベルは葉の左に浮かせる（絶対配置＝場所を取らない。
   透明のまま幅を確保して内容に食い込む事故があった 2026-07-30） */
.twig-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(6px, -50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.twig a:hover .twig-label,
.twig a:focus-visible .twig-label,
.twig li.is-active .twig-label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* 濃色の節（施工の記録・ご相談）の上でも読めるよう、ラベルは常に明るい下地 */

@media screen and (max-width: 768px) {
  .twig {
    right: 6px;
  }

  .twig ul {
    gap: 12px;
  }

  /* スマホは今いる節のラベルだけ出す（他はタップで移動できれば足りる） */
  .twig a:hover .twig-label {
    opacity: 0;
  }

  .twig li.is-active .twig-label {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .twig-label {
    font-size: 12px;
    padding: 2px 8px;
  }
}