@charset "UTF-8";

/*
  植鉄光華園 見本
  現行サイトの世界観（やわらかい丸ゴシック・黄色のマーカー・若草色）を引き継ぐ。
  色は先方の自作画像から採った。
*/

:root {
  --sumi: #2b2a26; /* 本文の墨 */
  --sumi-usu: #5c5a52; /* 補足文 */
  --kinari: #fbfaf5; /* 背景の生成り */
  --marker: #fff06a; /* 先方の黄色いマーカー */
  --wakakusa: #c9e1a0; /* 先方のボタンの若草色 */
  --wakakusa-koi: #a8c877;
  --take: #6e7b4f; /* 竹・苔の緑（罫と見出し） */
  --sen: #e3e0d5; /* 罫線 */
  --shiro: #ffffff;
}

html {
  color-scheme: only light;
}

body {
  margin: 0;
  background: var(--shiro);
  color: var(--sumi);
  font-family:
    "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium",
    system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: inherit;
}

/* 単語の泣き別れを防ぐ */
.nw {
  display: inline-block;
  white-space: nowrap;
}

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

/* ------------------------------------------------------------------
   提案用の注釈
------------------------------------------------------------------ */

.chui {
  background: #3d3b34;
  color: #f4f2ea;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  padding: 10px 16px;
}

.chui strong {
  color: var(--marker);
}

/* ------------------------------------------------------------------
   ヘッダー
------------------------------------------------------------------ */

.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--sen);
}

.head-in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

.head-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.head-logo img {
  width: 46px;
  height: auto;
}

.head-logo span {
  font-size: 19px;
  letter-spacing: 0.08em;
}

.nav {
  display: flex;
  gap: 22px;
  font-size: 16px;
}

.nav a {
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--marker);
}

.head-tel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wakakusa);
  border-radius: 999px;
  padding: 8px 20px;
  text-decoration: none;
  font-size: 17px;
  white-space: nowrap;
}

.head-tel:hover {
  background: var(--wakakusa-koi);
}

/* ------------------------------------------------------------------
   第一画面
------------------------------------------------------------------ */

.kanban {
  padding: 40px 0 10px;
}

/* ------------------------------------------------------------------
   先方お手製の画像の「電話番号のところ」を押せるようにする仕掛け

   画像はそのまま表示し、番号の上に透明なリンクを重ねる。
   位置は画像の中の文字を1ピクセルずつ機械で測り、%に直したもの。
------------------------------------------------------------------ */

.atari-box {
  position: relative;
  margin-inline: auto;
}

.atari-box img {
  width: 100%;
}

.atari-box a {
  position: absolute;
  display: block;
  border-radius: 8px;
}

.atari-box a:hover {
  background: rgba(110, 123, 79, 0.16);
  outline: 2px solid var(--take);
}

/* 第一画面の看板（元画像 1024×414） */
.kanban .atari-box {
  width: min(760px, 100%);
}

.kanban .atari-mobile {
  left: 25.7%;
  top: 64%;
  width: 49.2%;
  height: 13%;
}

.kanban .atari-tel {
  left: 30.2%;
  top: 80.4%;
  width: 40.2%;
  height: 12.6%;
}

/* 電話バナー（元画像 1024×1024） */
.banner {
  width: min(520px, 100%);
}

.banner .atari-mobile {
  left: 7.6%;
  top: 8.8%;
  width: 84.5%;
  height: 8.2%;
}

.banner .atari-tel {
  left: 18.8%;
  top: 18.5%;
  width: 69%;
  height: 8.2%;
}

.atari-ko {
  margin: 12px 0 34px;
  text-align: center;
  font-size: 15px;
  color: var(--sumi-usu);
}

/*
  画面が狭いと画像の中の番号は小さくなり、指で押しにくい。
  そのため狭い画面でだけ、大きな電話ボタンを出す（下の media を参照）。
*/
.dosen {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0 0 34px;
}

.tel-btn {
  display: block;
  text-decoration: none;
  background: var(--shiro);
  border: 2px solid var(--take);
  border-radius: 14px;
  padding: 10px 24px;
  text-align: center;
}

.tel-btn .ko {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sumi-usu);
}

.tel-btn .dai {
  display: block;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.tel-btn.mobile {
  background: var(--take);
  color: var(--shiro);
  border-color: var(--take);
}

.tel-btn.mobile .ko {
  color: #e6ebd8;
}

/* 先方お手製の「お問い合わせはこちら」ボタン画像 */

.btn-toiawase {
  display: block;
  width: min(560px, 100%);
  margin: 0 auto 44px;
}

.btn-toiawase img {
  width: 100%;
}

/* ------------------------------------------------------------------
   見出し
------------------------------------------------------------------ */

.midashi {
  text-align: center;
  margin: 0 0 34px;
  font-size: 30px;
  line-height: 1.6;
  font-weight: 600;
}

.midashi span {
  background: linear-gradient(transparent 62%, var(--marker) 62%);
  padding: 0 6px;
}

.midashi-ko {
  text-align: center;
  margin: -22px 0 34px;
  font-size: 16px;
  color: var(--sumi-usu);
}

.section {
  padding: 60px 0;
}

.section.usu {
  background: var(--kinari);
}

/* ------------------------------------------------------------------
   お悩み9つ
------------------------------------------------------------------ */

.nayami {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.nayami-item {
  background: var(--shiro);
  border: 1px solid var(--sen);
  border-radius: 16px;
  padding: 24px 22px 26px;
}

.nayami-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--take);
}

.nayami-item p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.85;
}

.nayami-item .tsuyo {
  background: linear-gradient(transparent 64%, var(--marker) 64%);
}

.chui-chiiki {
  margin: 26px 0 0;
  font-size: 15px;
  color: var(--sumi-usu);
  text-align: center;
}

/* ------------------------------------------------------------------
   作業前・完成後
------------------------------------------------------------------ */

.zengo {
  display: grid;
  gap: 40px;
}

.zengo-kumi {
  background: var(--shiro);
  border: 1px solid var(--sen);
  border-radius: 18px;
  padding: 24px;
}

.zengo-midashi {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--take);
}

.zengo-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.zengo-koma figure {
  margin: 0;
}

.zengo-koma img {
  width: 100%;
  border-radius: 12px;
  background: var(--kinari);
}

.zengo-koma figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}

.zengo-koma .fuda {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 16px;
  font-size: 15px;
}

.zengo-koma.mae .fuda {
  background: #ece9dd;
}

.zengo-koma.ato .fuda {
  background: var(--marker);
}

.zengo-yaji {
  font-size: 30px;
  color: var(--wakakusa-koi);
  text-align: center;
}

.motto {
  margin: 44px 0 0;
  text-align: center;
}

.motto a {
  display: inline-block;
  text-decoration: none;
  border: 2px solid var(--take);
  border-radius: 999px;
  padding: 12px 40px;
  font-size: 18px;
}

.motto a:hover {
  background: var(--wakakusa);
}

/* ------------------------------------------------------------------
   施工事例ページ
------------------------------------------------------------------ */

.jirei-kumi {
  margin: 0 0 56px;
}

.jirei-midashi {
  margin: 0 0 20px;
  font-size: 23px;
  line-height: 1.6;
  border-left: 6px solid var(--wakakusa);
  padding-left: 14px;
}

.jirei-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.jirei-grid img {
  width: 100%;
  border-radius: 12px;
  background: var(--kinari);
}

/* ------------------------------------------------------------------
   電話バナー（先方お手製の画像に、押せる場所を重ねる）
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   会社概要
------------------------------------------------------------------ */

.gaiyo {
  width: min(720px, 100%);
  margin-inline: auto;
  border-collapse: collapse;
  font-size: 17px;
}

.gaiyo th,
.gaiyo td {
  border-bottom: 1px solid var(--sen);
  padding: 16px 10px;
  text-align: left;
  vertical-align: top;
}

.gaiyo th {
  width: 150px;
  font-weight: 600;
  color: var(--take);
  white-space: nowrap;
}

.gaiyo ol {
  margin: 0;
  padding-left: 1.4em;
}

.gaiyo a {
  text-decoration: none;
  border-bottom: 2px solid var(--marker);
}

/* ------------------------------------------------------------------
   お問い合わせ
------------------------------------------------------------------ */

.form {
  width: min(640px, 100%);
  margin-inline: auto;
}

.form label {
  display: block;
  margin: 0 0 22px;
  font-size: 17px;
}

.form input,
.form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: inherit;
  background: var(--shiro);
  border: 1px solid #c9c5b6;
  border-radius: 10px;
  box-sizing: border-box;
}

.form textarea {
  min-height: 170px;
  resize: vertical;
}

.form button {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 16px;
  font: inherit;
  font-size: 19px;
  color: var(--sumi);
  background: var(--wakakusa);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.form button:hover {
  background: var(--wakakusa-koi);
}

.form-ko {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--sumi-usu);
  text-align: center;
}

/* ------------------------------------------------------------------
   フッター
------------------------------------------------------------------ */

.foot {
  background: #3d3b34;
  color: #f4f2ea;
  padding: 40px 0 30px;
  margin-top: 20px;
}

.foot a {
  color: #f4f2ea;
}

.foot-mei {
  font-size: 21px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.foot p {
  margin: 0 0 6px;
  font-size: 16px;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 22px 0 0;
  font-size: 16px;
}

/* スマホ下部に出る電話バー */

.telbar {
  display: none;
}

/* ------------------------------------------------------------------
   画面が狭いとき
------------------------------------------------------------------ */

@media (max-width: 860px) {
  .nayami {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 700px) {
  body {
    font-size: 17px;
  }

  .head-in {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .head-tel {
    display: none;
  }

  .nav {
    order: 3;
    width: 100%;
    gap: 16px;
    justify-content: space-between;
    font-size: 15px;
  }

  .head-logo span {
    font-size: 17px;
  }

  .midashi {
    font-size: 24px;
  }

  .section {
    padding: 46px 0;
  }

  .nayami {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .dosen {
    display: flex;
  }

  .tel-btn {
    width: 100%;
    box-sizing: border-box;
  }

  .kanban .atari-ko {
    margin-bottom: 20px;
  }

  .zengo-kumi {
    padding: 18px;
  }

  /* 作業前・完成後は狭い画面でも横に並べたまま見比べられるようにする */
  .zengo-pair {
    gap: 10px;
  }

  .zengo-yaji {
    font-size: 20px;
  }

  .zengo-koma figcaption {
    font-size: 14px;
  }

  .jirei-grid {
    gap: 12px;
  }

  /* 画面の下に電話バーを出す */
  .telbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
  }

  .telbar a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 14px 4px;
    font-size: 17px;
    line-height: 1.4;
  }

  .telbar .den {
    background: var(--take);
    color: var(--shiro);
  }

  .telbar .mail {
    background: var(--marker);
    color: var(--sumi);
  }

  .foot {
    padding-bottom: 90px;
  }
}

@media (max-width: 420px) {
  .jirei-grid {
    grid-template-columns: 1fr;
  }
}