@charset "utf-8";

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--df-color-bg);
  color: var(--df-color-text);
  font-family: var(--df-font-sans);
  font-size: var(--df-font-size-body);
  line-height: var(--df-line-height-body);
  overflow-wrap: anywhere;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--df-color-primary);
  outline-offset: 3px;
}

html.df-header-menu-open {
  overflow: hidden;
}

html.df-motion-ready .df-motion {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}

html.df-motion-transition-ready .df-motion {
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.df-motion-ready .df-motion.df-motion-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Elements return to their starting state after they leave the viewport. */
html.df-motion-ready .df-motion:not(.df-motion-visible) {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.df-motion-ready .df-motion {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.df-motion-ready .lively-index2 .pest-grid .lively-item.df-motion .pest-photo,
  html.df-motion-ready .lively-index2 .pest-grid .lively-item.df-motion h3,
  html.df-motion-ready .lively-index2 .pest-grid .lively-item.df-motion p {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.lower-page { background: #f3f7f8; }
.lower-hero { padding: clamp(54px, 8vw, 104px) var(--df-gutter); background: var(--df-color-primary); color: #fff; }
.lower-hero__inner, .lower-section__inner { width: calc(100% - (var(--df-gutter) * 2)); max-width: var(--df-content-max); margin: 0 auto; }
.lower-hero__eyebrow, .lower-eyebrow { margin: 0; color: #f7ad69; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.lower-hero h1 { max-width: 1000px; margin: 12px 0 0; font-size: 23px; line-height: 1.32; text-wrap: balance; word-break: keep-all; }
.lower-hero h1 br { display: block; }
.lower-page--strengths .lower-hero h1 { font-size: 19px; letter-spacing: -.05em; }
.lower-hero p:last-child { max-width: 720px; margin: 18px 0 0; color: #dcebed; }
.lower-section { padding: clamp(54px, 8vw, 100px) var(--df-gutter); background: #fff; }
.lower-section--surface { background: var(--df-color-surface); }
.lower-section--dark { background: var(--df-color-primary); color: #fff; }
.lower-section h2 { max-width: 24em; margin: 10px 0 0; color: var(--df-color-primary); font-size: clamp(23px, 3.6vw, 42px); line-height: 1.4; text-wrap: balance; word-break: keep-all; }
.lower-section--dark h2 { color: #fff; }
.lower-lead { max-width: 780px; margin: 18px 0 0; color: var(--df-color-muted); }
.lower-section--dark .lower-lead { color: #dcebed; }
.lower-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
.lower-item { padding: 24px; border-top: 5px solid var(--df-color-accent); background: #fff; box-shadow: var(--df-shadow-card); }
.lower-item h3 { margin: 0; color: var(--df-color-primary); font-size: 21px; line-height: 1.45; }
.lower-item p { margin: 12px 0 0; color: var(--df-color-muted); font-size: 16px; }
.lower-item--pest { padding: 18px; }
.lower-item__photo { width: 100%; aspect-ratio: 1 / 1; margin: 0 0 16px; overflow: hidden; }
.lower-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.lower-list { padding: 0; margin: 28px 0 0; list-style: none; border-top: 1px solid var(--df-color-line); }
.lower-list li { padding: 18px 0 18px 34px; border-bottom: 1px solid var(--df-color-line); position: relative; }
.lower-list li::before { position: absolute; left: 0; color: var(--df-color-accent); content: "—"; font-weight: 800; }
.lower-media { margin: 32px 0 0; }
.lower-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lower-media--service-inspection { width: 100%; }
.lower-media--staff { width: min(100%, 480px); }
.lower-media--staff img { aspect-ratio: 3 / 4; object-position: center top; }
.lower-media--faq, .lower-media--contact { width: 100%; }
.lower-media figcaption { margin-top: 8px; color: var(--df-color-muted); font-size: 12px; }
.lower-cta { padding: clamp(42px, 6vw, 74px) var(--df-gutter); background: #0b3d43; color: #fff; text-align: center; }
.lower-cta h2 { margin: 0; font-size: clamp(27px, 4vw, 42px); }
.lower-cta p { margin: 14px auto 0; max-width: 640px; color: #dcebed; }
.lower-cta .lower-cta-phone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 18px; color: #dcebed; }
.lower-cta .lower-cta-phone .site-phone-text { min-height: 44px; color: inherit; }
.lower-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 13px 24px; margin-top: 24px; background: var(--df-color-accent); box-shadow: var(--df-shadow-btn-rest); color: #fff; font-weight: 800; text-decoration: none; transition: transform var(--df-transition-duration) ease, background var(--df-transition-duration) ease; }
.lower-button:hover, .lower-button:focus-visible { background: var(--df-color-accent-hover); color: #fff; transform: translateY(2px); }
.lower-button:active { transform: translateY(5px); }
.lower-note { margin-top: 20px; color: var(--df-color-muted); font-size: 13px; }
.lower-faq { margin-top: 32px; border-top: 1px solid var(--df-color-line); }
.lower-faq details { border-bottom: 1px solid var(--df-color-line); }
.lower-faq summary { padding: 20px 42px 20px 0; color: var(--df-color-primary); cursor: pointer; font-weight: 800; list-style: none; position: relative; }
.lower-faq summary::-webkit-details-marker { display: none; }
.lower-faq summary::after { position: absolute; right: 4px; content: "+"; color: var(--df-color-accent); font-size: 24px; }
.lower-faq details[open] summary::after { content: "−"; }
.lower-faq p { margin: 0; padding: 0 42px 22px 0; color: var(--df-color-muted); }
.lower-empty { padding: clamp(34px, 6vw, 68px); border-left: 8px solid var(--df-color-accent); background: #fff; box-shadow: var(--df-shadow-card); }
.lower-empty h2 { margin-top: 8px; }
.lower-contact-form { margin-top: 34px; padding: clamp(22px, 4vw, 48px); background: #fff; box-shadow: var(--df-shadow-card); }
.lower-contact-form .formRow { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 16px 0; border-bottom: 1px solid var(--df-color-line); }
.lower-contact-form .formTh { color: var(--df-color-primary); font-weight: 800; }
.lower-contact-form .formTd { min-width: 0; }
.lower-contact-form .formInput { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #aebfc2; background: #fff; }
.lower-contact-form .formTextArea { min-height: 150px; resize: vertical; }
.lower-contact-form .requiredText, .lower-contact-form .anyText { display: inline-block; padding: 1px 6px; margin: 0 0 0 8px; background: #fce8dc; color: #9a3e08; font-size: 12px; }
.lower-contact-form .anyText { background: #edf1f2; color: var(--df-color-muted); }
.lower-contact-form .formBtnTd { padding-top: 28px; text-align: center; }
.lower-contact-form .formBtn { min-width: min(100%, 320px); min-height: 54px; border: 0; background: var(--df-color-accent); box-shadow: var(--df-shadow-btn-rest); color: #fff; cursor: pointer; font-weight: 800; }
@media (min-width: 700px) { .lower-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lower-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lower-contact-form .formRow { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; } .lower-contact-form .formBtnTd { grid-column: 1 / -1; } }
@media (min-width: 700px) { .lower-media--service-inspection { width: 75%; } }
@media (min-width: 1000px) { .lower-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 620px) { .lower-hero h1, .lower-page--strengths .lower-hero h1 { font-size: clamp(32px, 5vw, 58px); } }

/* 下層ページ共通：トップと同じ色・余白・フラットな面構成。 */
.lower-page,.thanks-main{background:#fff9e6;color:#153d43}
.lower-page .lower-hero{display:flex;align-items:center;min-height:380px;padding:40px 28px;background:#174f57;color:#fff}
.lower-page .lower-hero::after{content:none}
.lower-page .lower-hero__inner,.lower-page .lower-section__inner{width:100%;max-width:1100px;margin:0 auto}
.lower-page .lower-eyebrow{color:#c35400;font-size:12px;font-weight:900;letter-spacing:.14em}
.lower-page .lower-hero__eyebrow,.lower-page .lower-section--dark .lower-eyebrow{color:#ffe75b;font-size:12px;font-weight:900;letter-spacing:.14em}
.lower-page .lower-section p.lower-eyebrow{color:#c35400}
.lower-page .lower-section--dark p.lower-eyebrow{color:#ffe75b}
.lower-page .lower-hero h1{width:100%;max-width:1000px;margin-top:8px;font-size:clamp(28px,3.6vw,46px);font-weight:900;line-height:1.32;letter-spacing:normal;text-wrap:balance;word-break:normal;word-break:auto-phrase;line-break:strict}
.lower-page .lower-hero p:last-child{text-wrap:balance}
.lower-page .lower-hero__inner{padding-bottom:12px;border-bottom:5px solid #ffe75b}
.lower-page .lower-section{padding:clamp(48px,7vw,84px) 28px;background:#fff}
.lower-page .lower-section--surface{background:#fff9e6}
.lower-page .lower-section--dark,.lower-page .lower-cta{background:#174f57;color:#fff}
.lower-page .lower-section h2{margin-top:8px;color:#153d43;font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.35;text-wrap:balance}
.lower-page .lower-section--dark h2,.lower-page .lower-cta h2{color:#fff}
.lower-page .lower-lead,.lower-page .lower-section p{color:#315d63}
.lower-page .lower-section--dark .lower-lead,.lower-page .lower-cta p{color:#dcebed}
.lower-page .lower-cta-socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:360px;gap:10px;margin-top:16px;margin-right:auto;margin-bottom:0;margin-left:auto}
.lower-page .lower-cta-social{display:flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-top-width:1px;border-top-style:solid;border-top-color:#fff;border-right-width:1px;border-right-style:solid;border-right-color:#fff;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#fff;border-left-width:1px;border-left-style:solid;border-left-color:#fff;color:#fff;font-size:14px;font-style:normal;font-weight:800;line-height:1;text-decoration:none}

.lower-page .lower-cta-social{border-top-width:0;border-top-style:none;border-top-color:transparent;border-right-width:0;border-right-style:none;border-right-color:transparent;border-bottom-width:0;border-bottom-style:none;border-bottom-color:transparent;border-left-width:0;border-left-style:none;border-left-color:transparent}
.lower-page .lower-cta-social img{width:22px;height:22px}
.lower-page .lower-item,.lower-page .lower-case-item,.lower-page .lower-review-item,.lower-page .lower-empty{border:2px solid #174f57;border-radius:0;background:#fff;box-shadow:none}
.lower-page .lower-grid .lower-item,.lower-page .lower-grid .lower-case-item,.lower-page .lower-grid .lower-review-item{border:2px solid #174f57;border-radius:0;box-shadow:none}
.lower-page .lower-item:nth-child(2n),.lower-page .lower-case-item:nth-child(2n),.lower-page .lower-review-item:nth-child(2n){background:#fff9e6}
.lower-page .lower-item h3,.lower-page .lower-case-item h3,.lower-page .lower-review-item h3{color:#153d43;font-weight:900}
.lower-page .lower-cta{padding:clamp(44px,7vw,76px) 28px;text-align:center}
.lower-page .lower-contact-form{border:2px solid #174f57;background:#fff;box-shadow:none}
.lower-page .lower-contact-form .formTh{color:#174f57}
.thanks-main{min-height:50vh;padding:clamp(40px,7vw,72px) 28px;display:grid;place-items:center}
.thanks-main .thanks-card{width:100%;max-width:680px;padding:clamp(36px,6vw,72px);border:2px solid #174f57;border-radius:0;background:#fff;box-shadow:none}
.thanks-main .thanks-card h1{font-size:clamp(28px,3.6vw,46px);font-weight:900;line-height:1.32}
.thanks-main .thanks-link.df-button{box-shadow:none;transform:none}
.lower-page .lower-section h2,.lower-page .lower-cta h2{word-break:normal;word-break:auto-phrase;line-break:strict}
.lower-page .lower-cta h2{margin:0;font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.35;text-wrap:balance}
.site-phone-text{display:inline-flex;min-height:44px;align-items:center;color:inherit;font-size:16px;font-weight:900;line-height:1.3;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.site-phone-icon{display:inline;font-size:1em;font-style:normal;line-height:1}
.site-phone-text:hover,.site-phone-text:focus-visible{color:#c35400}
.lower-page .lower-section h2 br,.lower-page .lower-cta h2 br{display:none}
@media (min-width:620px){.lower-page .lower-section h2 br,.lower-page .lower-cta h2 br{display:initial}}
@media (min-width:760px){.lower-page .lower-hero{min-height:400px}.lower-page .lower-hero,.lower-page .lower-section,.lower-page .lower-cta{padding-right:max(28px,calc((100vw - 1100px)/2));padding-left:max(28px,calc((100vw - 1100px)/2))}}

/* セクションの大見出しは、デスクトップでページ種別をまたいで統一する。 */
@media (min-width:760px){.lower-page .lower-section h2,.lower-page .lower-cta h2{font-size:48px}}

.lower-page .lower-item,.lower-page .lower-case-item,.lower-page .lower-review-item,.lower-page .lower-empty,.lower-page .lower-contact-form,.thanks-main .thanks-card{box-shadow:8px 8px 0 #ffe75b}

.lower-page .lower-item:nth-child(2n),.lower-page .lower-case-item:nth-child(2n),.lower-page .lower-review-item:nth-child(2n){box-shadow:8px 8px 0 #174f57}

.lower-page .lower-media img,.lower-page .lower-item__photo img,.lower-page .works-case-link img,.detail-page .lower-section__inner>img,.lower-page .representative-profile__portrait img{box-shadow:8px 8px 0 #174f57}

.lower-page .lower-section--dark .lower-item,.lower-page .lower-section--dark .lower-case-item,.lower-page .lower-section--dark .lower-review-item{box-shadow:8px 8px 0 #ffe75b}

/* 全ページ共通：見出し・数値の強調・注記を除く通常テキストを20px基準にそろえる。 */
.lower-page :where(p, li, summary, label, .formTh, .formTd, .lower-list, .lower-lead):not(.lower-eyebrow):not(.lower-note){font-size:20px;line-height:1.7}

.lower-page :where(.lower-eyebrow, .lower-hero__eyebrow, .lower-note, .lower-media figcaption, .requiredText, .anyText){font-size:inherit}

/* CMS記事と施工事例の掲載日 */
.lower-page .works-case-date,.lower-page .review-published-date{display:block;margin-top:14px;color:#c35400;font-size:14px;font-weight:800;letter-spacing:.08em;line-height:1.4}
.lower-page .review-published-date{margin-top:0}
.reviews-page .webgene-blog>.webgene-item .review-published-date{width:100%}

.lively-index2 p:not(.eyebrow),
.lively-index2 .lively-list-item,
.lively-index2 .lively-small,
.lively-index2 .faq-summary{font-size:20px;line-height:1.7}

.lively-index2 .eyebrow,
.lively-index2 .section-title>p:first-child,
.lively-index2 .price-card .lively-small,
.lively-index2 .photo-credits{font-size:12px}

.lively-index2 .top-contact-form__required,
.lively-index2 .top-contact-form__optional{font-size:12px}

.lively-index2 .top-contact-form__upload-note{font-size:14px}

/* 共通の面構成：情報カードは濃緑枠＋黄色影、カード内写真は無装飾に統一する。 */
.lower-page .lower-item,.lower-page .lower-case-item,.lower-page .lower-review-item,.lower-page .lower-empty,.lower-page .lower-contact-form,.thanks-main .thanks-card{border-top-width:2px;border-top-style:solid;border-top-color:#174f57;border-right-width:2px;border-right-style:solid;border-right-color:#174f57;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#174f57;border-left-width:2px;border-left-style:solid;border-left-color:#174f57;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:8px 8px 0 #ffe75b}

.lower-page .lower-item:nth-child(2n),.lower-page .lower-case-item:nth-child(2n),.lower-page .lower-review-item:nth-child(2n){background-color:#fff9e6;box-shadow:8px 8px 0 #ffe75b}

.lower-page .lower-item__photo img,.lower-page .lower-case-item .works-case-link img{border-top-width:0;border-top-style:none;border-top-color:transparent;border-right-width:0;border-right-style:none;border-right-color:transparent;border-bottom-width:0;border-bottom-style:none;border-bottom-color:transparent;border-left-width:0;border-left-style:none;border-left-color:transparent;box-shadow:none}

/* 単独写真だけは細い濃緑枠を使用し、影は付けない。 */
.lower-page .lower-media img,.lower-page .works-case-link img,.detail-page .lower-section__inner>img,.lower-page .representative-profile__portrait img,.lower-page .staff-slideshow,.lower-page .service-before-after-media{border-top-width:2px;border-top-style:solid;border-top-color:#174f57;border-right-width:2px;border-right-style:solid;border-right-color:#174f57;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#174f57;border-left-width:2px;border-left-style:solid;border-left-color:#174f57;box-shadow:none}

.lower-page .service-before-after-media img{border-top-width:0;border-top-style:none;border-top-color:transparent;border-right-width:0;border-right-style:none;border-right-color:transparent;border-bottom-width:0;border-bottom-style:none;border-bottom-color:transparent;border-left-width:0;border-left-style:none;border-left-color:transparent;box-shadow:none}

/* 開閉式の情報面と手順面も、情報カードと同じ境界にそろえる。 */
body .lower-page .lower-faq>div,body .lower-page .lower-consult-flow>div{border-top-width:2px;border-top-style:solid;border-top-color:#174f57;border-right-width:2px;border-right-style:solid;border-right-color:#174f57;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#174f57;border-left-width:2px;border-left-style:solid;border-left-color:#174f57;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:8px 8px 0 #ffe75b}

body .lower-page.faq-page .lower-faq>div:nth-child(even){box-shadow:8px 8px 0 #ffe75b}

/* 下層CTAの電話・SNS導線を、白文字かつ内容幅のまとまりとして表示する。 */
.lower-page .lower-cta .lower-cta-phone,
.lower-page .lower-cta .lower-cta-phone span,
.lower-page .lower-cta .lower-cta-phone .site-phone-text,
.lower-page .lower-cta .lower-cta-phone .site-phone-text:hover,
.lower-page .lower-cta .lower-cta-phone .site-phone-text:focus-visible{color:#fff}

.lower-page .lower-cta .lower-cta-socials{display:inline-flex;width:auto;max-width:none;gap:14px}

.lower-page .lower-cta .lower-cta-social{width:auto;padding-right:0;padding-left:0}

.lower-page .lower-cta .lower-button{display:flex;width:fit-content;margin-right:auto;margin-left:auto}

/* CTA本文も濃緑背景で判読できる白に統一し、3段の導線を保つ。 */
.lower-page .lower-cta p{color:#fff}

.lower-page .lower-cta .lower-cta-socials{display:inline-flex;margin-right:auto;margin-left:auto}

.lower-page .lower-cta .lower-button{display:flex;margin-top:20px;margin-right:auto;margin-left:auto}

/* CTAの電話・SNS導線は、デスクトップでは等幅の3列にそろえる。 */
@media (min-width:760px){
  .lower-page .lower-cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;align-items:center}
  .lower-page .lower-cta>h2,.lower-page .lower-cta>p:not(.lower-cta-phone),.lower-page .lower-cta>.lower-button{grid-column:1 / -1}
  .lower-page .lower-cta>.lower-cta-phone{grid-column:1;margin-top:18px;margin-right:0;margin-bottom:0;margin-left:0;justify-content:center}
  .lower-page .lower-cta>.lower-cta-socials{display:contents}
  .lower-page .lower-cta>.lower-cta-socials .lower-cta-social{width:100%;min-height:44px;margin-top:18px}
}

@media (min-width:760px){.lower-page .lower-cta{padding-right:max(28px,calc((100vw - 900px)/2));padding-left:max(28px,calc((100vw - 900px)/2))}}