@charset "UTF-8";

/* =============================================== 
共通：サブページイントロ（パンくず・見出し）
=============================================== */
.subPageIntro { width: var(--content-wide-width); margin-inline: auto; padding-top: clamp(30px, 3vw, 50px);
 & ul { display: flex; font-size: clamp (12px, 4vw 15px); font-weight: 300;
 & li:nth-of-type(1) { position: relative; padding-left: 1.2857em; }
 & li:nth-of-type(1):before { content: ""; position: absolute; display: block; width: 0.85em; aspect-ratio: 1; background-color: var(--pri-color); border-radius: 100%; inset: 50% auto auto 0; translate: 0 -50%; }
 & li:not(:nth-of-type(1)) { margin-left: 1em; padding-left: 1em; border-left: solid 1px #707070; } }
 & h2 { margin-top: 1.75em; font-size: clamp(28px, 3vw, 48px); font-weight: bold; }
 & small { position: relative; margin-left: 0.55em; padding-left: 2.25em; color: var(--pri-color); font-size: clamp(15px, 3vw, 20px); }
 & small:before { content: ""; position: absolute; width: 1.85em; height: 1px; background-color: currentColor; inset: 50% auto auto 0; translate: 0 -50%; }
 & img { border-radius: calc(var(--img-radius) * 2); margin-top: clamp(20px, 3vw, 40px); min-height: 150px; object-fit: cover; }
}


@media screen and (max-width: 1080px) { 
  .subPageIntro { & h2 { display: flex; flex-direction: column; gap: 0.5em; margin-top: 30px;} }
}

/* h3スタイル（共通） */
h3 { margin-block: 0.7895em; font-size: clamp(22px, 3vw, 38px); font-weight: bold;
 & small { display: block; margin-bottom: clamp(0.5em, 3vw, 1em); color: var(--pri-color); font-size: clamp(13px, 3vw, 14px); font-weight: 400; }
}


/* =============================================== 
会社概要ページ
=============================================== */
main.company { 
    & section+section { margin-top: clamp(50px, 10vw, 220px); }
      & dl { display: grid; grid-template-columns: auto 1fr;
        & :is(dt, dd) { padding: 2.5em 0px; border-bottom: 1px solid #D3D3D3; font-size: clamp(14px, 3vw, 15px); line-height: 2.4;}
        & :is(dt, dd):first-of-type { border-top: 1px solid #D3D3D3;}
        & dt { padding-right: 3.7em; font-weight: bold;} 
  }
  /* 空白調整用の不可視要素 */ 
  & .zeroSpace { visibility: hidden;}


  /* 社長メッセージセクション */ 
  & .message { margin-top: clamp(60px, 3vw, 120px);
    & .box { display: grid; grid-template-columns: 50% 1fr; gap: 58px; }
    & p { line-height: 2.3125; letter-spacing: 0.05em; }
    & img { border-radius: var(--img-radius); }
    & .name { 
      font-size: clamp(25px, 3vw, 30px); font-weight: 300; margin-top: 2em; font-family: "Noto Serif JP", sans-serif; text-align: right;
      & .nameSub { display: block; font-size: 15px; } 
      } 
    }
    /* その他セクション（左右2カラム） */
    & .other { 
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    & p { line-height: 2.4666; } 
  }
}

@media screen and (max-width: 1080px) {
  main.company { 
      & dl { 
        grid-template-columns: 1fr;
        & :is(dt) { border-top: 1px solid #D3D3D3;}
        & :is(dt, dd) { border-bottom: unset; padding: unset;}
        & :is(dt, dd):first-of-type { border-top: none;} 
        & :is(dt):first-of-type { border-top: 1px solid #D3D3D3;}  
        & :is(dd):last-of-type { border-bottom: 1px solid #D3D3D3;} 

        & dt { padding-top: 2em;}
        & dd { padding-bottom: 2em;}
      }
      & .message { 
        & .box { display: block; }
        & .name {  display: flex; align-items: baseline; gap: 1em; margin-top: 0em; margin-bottom: 0.5em;
        & .nameSub { display: unset; } 
      } 
    }


      & .other { grid-template-columns: repeat(1, 1fr);}
  }
}


/* =============================================== 
お問い合わせページ
=============================================== */
main.contact { & section+section { margin-top: clamp(50px, 10vw, 220px); }
}

/* =============================================== 
庭づくりについてページ
=============================================== */
main.garden { 
  & section+section { margin-top: clamp(50px, 10vw, 220px);}
  /* リードセクション（見出し・リード文） */ 
  & .garden-lead { text-align: center;
  & .box { 
  & h1 { font-size: clamp(22px, 3vw, 48px); }
  & p { font-size: 17px; margin-top: 2em; margin-bottom: 5em;}
 }
}
 /* 会社沿革セクション（兼用されている可能性あり） */ 
 & .company-history-sec { & .company-history h2 { font-size: clamp(28px, 3vw, 48px); margin-bottom: 0.5em; }
 & .company-image { margin-top: 2em; } }
}

@media screen and (max-width: 1080px) { 
main.garden {
    & .garden-lead { text-align: left;
        & .box {
          & p { margin-bottom: 2em; }}
    }
  }
}

/* =============================================== 
私たちについてページ
=============================================== */
main.about { 
    & section+section { margin-top: clamp(50px, 10vw, 220px);}
    /* 契約の流れセクション */ 
    & .contract-sec { text-align: center;
      & ul { display: flex; gap: 2em; justify-content: center;} 
    }
  }

  & .company-history-sec { & .company-history h2 { font-size: clamp(22px, 3vw, 48px); margin-bottom: 0.5em; }
  & .company-image { margin-top: clamp(30px, 3vw, 55px); }
}

@media screen and (max-width: 1080px) {
    main.about { 
      & .contract-sec { text-align: left;
        & ul { flex-direction: column; gap: 0.5em;}
    }
  }
  & .company-history-sec {}
}


/* =============================================== 
施工フロー（flow）ページ
=============================================== */
main.flow {
  section + section { margin-top: clamp(50px, 10vw, 220px); }
  .other { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .other p { line-height: 2.4666; }

  /* 施工フロー本体セクション */
  .flow-sec {
    position: relative;

    & h3 { text-align: center; }

    & .content { width: 80%; }
    & .content p { padding: 1.5em 0; line-height: 1.8;}
    & .content img { border-radius: 10px; }

    & .in-line { position: absolute; top: 10em; bottom: 430px; left: 50%; transform: translateX(-50%); width: 0; border-left: 1px dashed #ccc;}
    & .in-line .circle { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #0b9845; border-radius: 50%; box-shadow: 0 0 0 10px rgba(11, 152, 69, 0.25); flex-shrink: 0;}


    & .title { 
      display: flex; align-items: center; font-size: clamp( 22px, 3vw, 38px); font-weight: bold; gap: 2px;
      .line { flex-grow: 1; height: 1.1px; background: linear-gradient(to right, #707070 0%, #707070 100%, transparent 100%);}
      .circle { width: 14px; height: 14px; background: #0b9845; border-radius: 50%; box-shadow: 0 0 0 10px rgba(11, 152, 69, 0.25); flex-shrink: 0; position: relative; top: 7px; right: -14px; transform: translate(-50%, -50%);}
    }

    & .step { position: relative; }
    & .step:not(:first-of-type) { margin-top: 3em;}
    & .step.first-step { padding-top: 10em;}

    & .step-left { 
      width: 50%;
      & .text { padding-right: 0.8em;}
    }
    & .step-right { 
        width: calc(50% + 0px); margin-left: auto; 
        & .text { padding-left: 0.8em;}
        & .content { margin-left: auto; }
        & .title { flex-direction: row-reverse;}
        & .circle { right: 0px; }
    }
  } 
   & .alC-text-line { text-align: center;}
}

@media screen and (max-width: 1080px) {
  main.flow {
    .other { grid-template-columns: repeat(1, 1fr); gap: 2em;}
    .flow-sec {
      & .in-line { left: 15px; top: 8em; bottom: 21em;}
      & .title { flex-direction: row-reverse; width: fit-content; gap: 6px;
        & .line { width: 30px; margin-left: 10px;}
        & .text { padding-left: 0em;}
      }
      h3 { text-align: left; }

      & .step:first-of-type { margin-top: 3em;}
      & .step.first-step { margin-left: 0em; width: 100%; }
      & .step-right { width: 100%;
        & .circle { right: -14px;}
      }
      & .step-left { width: 100%;}
      & .content { margin-left: auto; width: calc(100% - 65px);}
    }
    & .alC-text-line { text-align: left;}
  }
}


/* =============================================== 
お問い合わせフォーム詳細（contact form）
=============================================== */
main.contact { 
  #contactForm { width: 100%;
    .formTable { 
      width: 100%; border-collapse: collapse;
        & tr { border-top: 1px solid #d3d3d3; vertical-align: top;}
        & tr.vertical-align-middle { vertical-align: middle;}
        & th, & td { padding-block: 2.5em; text-align: left; }
        & th { width: 160px;}
        & th span.require { color: red;}
        & .flex-td { display: flex; gap: 2em; padding-left: 1em;
          & input[type="radio"] { position: relative; width: 1em !important;  accent-color: var(--pri-color); left: -0.3em; padding: unset !important;}
        }
        & .adjust { padding-bottom: 0.5em;}
        & input, & textarea { width: 100%; padding:  clamp(0.5em, 4vw, 1em); border: 1px solid #ccc; font-size: 16px; border-radius: 4px; }
        & textarea { resize: vertical; }
      }
        /* 送信ボタン */ 
      .link-button {
        & input[type="submit"] { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer;
        &:hover { background-color: #0056b3; 
        } 
      } 
    } 
  }
}

@media screen and (max-width: 1080px) {
  main.contact {
      & #contactForm {
          & .formTable {
              & th, & td { padding-block: .5em;}
              & tr { display: flex; flex-direction: column; padding: 1em 0;}
              & th { width: 100%;}
          }
      }
  }
}

.error-message { color: red; font-size: 0.9em; margin-top: 5px;}


#mainForm { 
      width: 100%;
          .formTable { width: 100%; border-collapse: collapse;
          & tr { border-top: 1px solid #d3d3d3; vertical-align: top; }
          & tr.vertical-align-middle { vertical-align: middle; }
          & th, & td { padding-block: 2.5em; text-align: left; }
          & th { width: 250px; }
          & th span.require { color: red; }
          & .flex-td { display: flex; gap: 2em; padding-left: 1em;
          & input[type="radio"] { position: relative; width: 1em !important;  accent-color: var(--pri-color); left: -0.3em; padding: unset !important;} }
          & .adjust { padding-bottom: 0.5em; }
          & input, & textarea { width: 100%; padding: clamp(0.5em, 4vw, 1em); border: 1px solid #ccc; font-size: 16px; border-radius: 4px; }
          & textarea { resize: vertical; } 
        }
          .link-button { 
              & input[type="submit"] { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; cursor: pointer;
              &:hover { background-color: #0056b3; } 
    } 
  } 
}

& .text-link-button {  color: #000; text-decoration: underline; font-size: 1em; margin-top: 2em; background: unset;  border: none;}

@media screen and (max-width: 1080px) {
    #mainForm { .formTable {
    th, td { padding-block: .5em; }
    tr { display: flex; flex-direction: column; padding: 1em 0; }
    th { width: 100%; } 
    } 
  } 
}

/* =============================================== 
プライバシーポリシーページ
=============================================== */
main.privacy {
  section + section { margin-top: clamp(50px, 10vw, 220px); }
    .personal-info { 
        & h4 {font-size: 1.2rem;  margin-top: 20px; margin-bottom: 10px;}
        & p {font-size: 1rem; margin-bottom: 15px;}
        & ul {list-style-type: disc; padding-left: 20px;}
        & ul li {margin-bottom: 10px;}
        & address {font-style: normal; margin-top: 15px;}
        & a {color: #005b7f; text-decoration: none;}
        & a:hover {text-decoration: underline;}
        & .cookie-info {font-size: 0.9rem; color: #555; margin-top: 10px; margin-bottom: 20px;}
    }
    @media (max-width: 600px) {
        .personal-info { margin: 10px; }
          & h4 {font-size: 1rem;} 
          & p,&  ul,& address {font-size: 0.9rem;} 
    }
}