@charset "UTF-8";

/* ==========================================================================
   株式会社中村造園 専用見本
   配色は現行サイトの実測値をもとに、白文字が読める濃さへ調整したもの
   花=ピンク / みどり=緑 / エクステリア=茶 は、会社が自ら掲げている3本柱の色
   ========================================================================== */

:root {
  color-scheme: only light; /* ブラウザの自動ダークモードで配色が反転するのを防ぐ */

  /* 色 */
  --midori:        #315a35; /* 主色（みどり） */
  --midori-light:  #7bb841; /* 現行の黄緑。文字を載せない */
  --hana:          #b13a95; /* 花 */
  --exterior:      #6b4e33; /* エクステリア */
  --bg:            #faf9f5; /* 温かい白 */
  --bg-tint:       #f2f6ed; /* 淡い緑 */
  --ink:           #252825; /* 本文 */
  --ink-sub:       #55605a; /* 補足 */
  --line:          #d9ddd2;

  /* 文字サイズ（本文18px基準） */
  --fs-body:       18px;
  --fs-lead:       20px;
  --fs-card-title: 21px;
  --fs-section:    30px;
  --fs-hero:       40px;
  --fs-caption:    15px;
  --fs-note:       14px;

  /* 余白 */
  --pad-section:   72px;
  --wrap:          1100px;
}

/* 配色2案：はな（花のピンクを主役にした明るい案） */
:root[data-theme="hana"] {
  --midori:       #8c2f78;
  --midori-light: #e07cc6;
  --hana:         #b13a95;
  --bg:           #fdf8fb;
  --bg-tint:      #f9eef5;
  --line:         #e5d5df;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--midori); }

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* 丸ゴシックは見出しだけ。全体の1〜2割に留める */
.round {
  font-family: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   提案専用の注釈
   -------------------------------------------------------------------------- */
.proposal-bar {
  margin: 0; /* p の初期余白が body の外に出て上に隙間ができるのを防ぐ */
  background: var(--midori);
  color: #fff;
  font-size: var(--fs-note);
  line-height: 1.6;
  padding: 10px 20px;
  text-align: center;
}

.proposal-bar--foot {
  background: #22301f;
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   ヘッダー
   PC＝上段にロゴ＋電話／下段にナビ全幅（18pxナビと電話を1段に詰めない）
   -------------------------------------------------------------------------- */
.header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}

.header__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header__logo img.mark { width: 44px; height: 44px; }
.header__logo img.wordmark { width: 230px; }

.header__contact { text-align: right; line-height: 1.4; }
.header__tel {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  color: var(--midori);
  text-decoration: none;
  letter-spacing: .02em;
}
.header__tel small { font-size: var(--fs-caption); font-weight: 400; }
.header__hours { font-size: var(--fs-caption); color: var(--ink-sub); }

.nav { background: var(--midori); }
.nav__list {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  display: block;
  padding: 14px 22px;
  color: #fff;
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap;
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { background: rgba(255,255,255,.16); }

.nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   第一画面
   写真に文字を重ねない（写真が暗くならず、文字も読みやすい）
   -------------------------------------------------------------------------- */
.hero__photo {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center 62%;
}

.hero__body {
  background: var(--bg-tint);
  padding: 46px 0 50px;
  text-align: center;
}
.hero__catch {
  margin: 0 0 14px;
  font-size: var(--fs-hero);
  line-height: 1.5;
  color: var(--midori);
  letter-spacing: .04em;
}
.hero__sub {
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.hero__sub .hana { color: var(--hana); font-weight: 700; }
.hero__sub .midori { color: var(--midori); font-weight: 700; }
.hero__sub .exterior { color: var(--exterior); font-weight: 700; }

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.section { padding: var(--pad-section) 0; }
.section--tint { background: var(--bg-tint); }
.section--white { background: #fff; }

.section__head { text-align: center; margin-bottom: 40px; }
.section__title {
  margin: 0 0 10px;
  font-size: var(--fs-section);
  line-height: 1.5;
  color: var(--midori);
}
.section__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px auto 0;
  background: var(--midori-light);
  border-radius: 2px;
}
.section__lead { margin: 0; font-size: var(--fs-body); color: var(--ink-sub); }

/* --------------------------------------------------------------------------
   3本柱のカード
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 6px solid var(--pillar-color, var(--midori));
  border-radius: 10px;
  padding: 26px 24px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.pillar:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pillar--hana     { --pillar-color: var(--hana); }
.pillar--midori   { --pillar-color: var(--midori-light); }
.pillar--exterior { --pillar-color: var(--exterior); }

.pillar__label {
  font-size: 26px;
  color: var(--pillar-color);
  margin: 0 0 6px;
}
.pillar__title { margin: 0 0 12px; font-size: var(--fs-card-title); }
.pillar__text { margin: 0 0 16px; font-size: var(--fs-body); flex: 1; }
.pillar__more { font-size: var(--fs-caption); color: var(--midori); font-weight: 700; }

/* --------------------------------------------------------------------------
   施工事例
   -------------------------------------------------------------------------- */
.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.work {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.work:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work__body { padding: 18px 20px 20px; }
.work__title { margin: 0 0 8px; font-size: var(--fs-card-title); color: var(--midori); }
.work__text { margin: 0; font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   年間管理・選ばれる理由
   -------------------------------------------------------------------------- */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px 34px 30px;
}
.panel__title { margin: 0 0 12px; font-size: 26px; color: var(--midori); }

.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reason {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px;
  text-align: center;
}
.reason__num {
  display: inline-block;
  font-size: var(--fs-caption);
  color: #fff;
  background: var(--midori);
  border-radius: 999px;
  padding: 2px 14px;
  margin-bottom: 12px;
}
.reason__title { margin: 0 0 8px; font-size: var(--fs-card-title); color: var(--midori); }
.reason__text { margin: 0; font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
.news { list-style: none; margin: 0; padding: 0; }
.news li {
  display: flex;
  gap: 20px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.news time { color: var(--ink-sub); white-space: nowrap; font-size: var(--fs-body); }

.note {
  margin: 16px 0 0;
  font-size: var(--fs-note);
  color: var(--ink-sub);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   会社概要の表
   -------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  border-bottom: 1px solid var(--line);
  padding: 16px 10px;
  text-align: left;
  font-size: var(--fs-body);
  vertical-align: top;
}
.table th { width: 190px; color: var(--midori); font-weight: 700; white-space: nowrap; }

.map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   問い合わせ
   -------------------------------------------------------------------------- */
.contact { background: var(--midori); color: #fff; text-align: center; }
.contact .section__title { color: #fff; }
.contact .section__title::after { background: var(--midori-light); }
.contact__lead { margin: 0 0 26px; font-size: var(--fs-lead); }
.contact__tel {
  display: inline-block;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
  line-height: 1.3;
}
.contact__hours { margin: 6px 0 26px; font-size: var(--fs-caption); }
.btn {
  display: inline-block;
  background: #fff;
  color: var(--midori);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 999px;
}
.btn:hover { background: var(--bg-tint); }

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.footer {
  background: #22301f;
  color: #e6ebe2;
  padding: 42px 0 100px;
  font-size: var(--fs-caption);
}
.footer a { color: #e6ebe2; }
.footer__name { font-size: var(--fs-body); font-weight: 700; margin: 0 0 8px; }
.footer__links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* スマホ下部の固定電話ボタン */
.callbar { display: none; }

/* --------------------------------------------------------------------------
   ギミック1：ビフォーアフターのスライダー
   つまみを左右に動かすと、施工前と施工後が切り替わる
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* 上に重ねた「施工前」を、つまみの位置で切り出す */
.compare__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

.compare__tag {
  position: absolute;
  top: 14px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: #fff;
  padding: 4px 14px;
  border-radius: 4px;
  pointer-events: none;
}
.compare__tag--before { left: 14px; background: rgba(37,40,37,.86); }
.compare__tag--after  { right: 14px; background: var(--midori); }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.5);
  pointer-events: none;
}
.compare__handle::after {
  content: "◀ ▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--midori);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -1px;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* 実際に操作する入力。見た目は透明にして、上の飾りと重ねる */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare__note {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--ink-sub);
}

/* --------------------------------------------------------------------------
   ギミック2：水琴窟の波紋（1か所だけ・音は鳴らさない）
   -------------------------------------------------------------------------- */
.suikinkutsu {
  max-width: 420px;
  margin: 0 auto 26px;
  padding: 22px 20px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
.suikinkutsu__stage {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 0 auto;
}
.suikinkutsu__drop {
  position: absolute;
  left: 50%;
  margin-left: -7px;
  top: 6px;
  width: 14px;
  height: 20px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--midori);
  animation: drop 3.6s ease-in infinite;
}
.suikinkutsu__jar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 150px;
  margin-left: -75px;
  height: 78px;
  border: 8px solid var(--midori);
  border-bottom: 0;
  border-radius: 150px 150px 0 0;
}
.suikinkutsu__ripple {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 34px;
  margin-left: -17px;
  height: 12px;
  border: 3px solid var(--midori-light);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 3.6s ease-out infinite;
}
.suikinkutsu__ripple:nth-of-type(3) { animation-delay: .5s; }
.suikinkutsu__ripple:nth-of-type(4) { animation-delay: 1s; }

.suikinkutsu__caption {
  margin: 10px 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-sub);
  line-height: 1.7;
}

@keyframes drop {
  0%        { top: 2px;  opacity: 0; }
  6%        { opacity: 1; }
  26%       { top: 66px; opacity: 1; }
  32%, 100% { top: 80px; opacity: 0; }
}
@keyframes ripple {
  0%, 30%  { transform: scale(.6); opacity: 0; }
  36%      { opacity: 1; }
  72%,100% { transform: scale(2.6); opacity: 0; }
}

/* 動きを控えたい人の設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .suikinkutsu__drop,
  .suikinkutsu__ripple { animation: none; }
  .suikinkutsu__drop { opacity: 1; top: 40px; }
  .suikinkutsu__ripple { opacity: 1; }
}

/* --------------------------------------------------------------------------
   配色の切り替え
   -------------------------------------------------------------------------- */
.themebar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: var(--fs-caption);
}
.themebar__inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.themebar__label { color: var(--ink-sub); }
.themebar button {
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.themebar button[aria-pressed="true"] { background: var(--midori); border-color: var(--midori); color: #fff; }

/* --------------------------------------------------------------------------
   下層ページ
   -------------------------------------------------------------------------- */
.pagehead {
  background: var(--midori);
  color: #fff;
  text-align: center;
  padding: 34px 0;
}
.pagehead h1 { margin: 0; font-size: var(--fs-section); }
.pagehead p { margin: 6px 0 0; font-size: var(--fs-caption); }

.block { margin-bottom: 56px; }
.block:last-child { margin-bottom: 0; }
.block__title {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 7px solid var(--block-color, var(--midori));
  font-size: 26px;
  line-height: 1.4;
  color: var(--block-color, var(--midori));
}
.block--hana     { --block-color: var(--hana); }
.block--midori   { --block-color: var(--midori); }
.block--exterior { --block-color: var(--exterior); }

.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.menu li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 21px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--block-color, var(--midori));
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

.case { margin-bottom: 58px; }
.case:last-child { margin-bottom: 0; }
.case__title { margin: 0 0 10px; font-size: 26px; color: var(--midori); }
.case__text { margin: 0 0 20px; }

.blank {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  background: #fff;
  font-size: var(--fs-note);
  color: var(--ink-sub);
  line-height: 1.7;
}

.markcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.markcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.markcard img { width: 128px; height: 128px; }
.markcard h3 { margin: 16px 0 8px; font-size: var(--fs-card-title); color: var(--midori); }
.markcard p { margin: 0; font-size: var(--fs-body); text-align: left; }
.markcard__mono {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.markcard__mono img { width: 46px; height: 46px; }
.markcard__mono span { font-size: var(--fs-note); color: var(--ink-sub); }

/* --------------------------------------------------------------------------
   スマホ・タブレット
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --fs-hero: 28px;
    --fs-section: 24px;
    --pad-section: 48px;
  }

  .header__top { padding: 12px 0; }
  .header__logo img.wordmark { width: 180px; }
  .header__logo img.mark { width: 38px; height: 38px; }
  .header__contact { display: none; } /* 下部固定ボタンが常時出るため */

  /* ハンバーガー：三本線だけにせず「メニュー」の文字を必ず出す */
  .nav__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--midori);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: var(--fs-body);
    font-family: inherit;
    padding: 9px 16px;
    cursor: pointer;
  }
  .nav__toggle span {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #fff;
    box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff;
  }

  .nav__list {
    display: none;
    flex-direction: column;
  }
  .nav__list.is-open { display: flex; }
  .nav__list a {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    text-align: center;
  }

  .hero__photo { max-height: 240px; }

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

  .panel { padding: 24px 20px 22px; }

  .table th, .table td { display: block; width: auto; }
  .table th { border-bottom: 0; padding-bottom: 0; }
  .table td { padding-top: 4px; }

  .news li { flex-direction: column; gap: 2px; }

  .contact__tel { font-size: 32px; }

  /* 下部固定の電話ボタン */
  .callbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0,0,0,.18);
  }
  .callbar a {
    flex: 1;
    padding: 15px 8px;
    text-align: center;
    font-size: var(--fs-body);
    font-weight: 700;
    text-decoration: none;
    color: #fff;
  }
  .callbar__tel  { background: var(--midori); }
  .callbar__form { background: var(--exterior); }
}


@media (max-width: 900px) {
  .menu,
  .gallery,
  .markcards { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare__handle::after { padding: 6px 8px; }
  .block__title { font-size: 22px; }
  .case__title { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   シンボルマークの使い方（3通りの見え方）
   -------------------------------------------------------------------------- */
.markuse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.markuse__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 130px;
  padding: 18px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}
.markuse__item p {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-sub);
}
.markuse__item img { width: 56px; height: 56px; }
.markuse__item img.markuse__wordmark { width: 150px; height: auto; }
.markuse__item--dark { background: var(--midori); border-color: var(--midori); }
.markuse__item--dark p { color: #fff; }
.markuse__item--dark img { filter: invert(1); }

@media (max-width: 900px) {
  .markuse { grid-template-columns: minmax(0, 1fr); }
}