html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  transition: 0.3s;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

a{text-decoration:none;color:#333;}
a img {
  border: none;
}

body {
  font-family:'Noto Sans JP', "Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
  line-height: 1.4;
  position: relative;
  font-weight:400;
  color: #333333;
}

section{
padding:60px 20px;
max-width:1100px;
margin:auto;
}

h3{font-size:32px;font-weight:bold;}
h3.title{margin-bottom:50px;text-align:center;position: relative;}
h3.title:after{content:"";display: inline-block;background-color: #23ac0e;width:110px;height: 4px;position: absolute;bottom: -10px;left: calc(50% - 55px);}
h4{font-size:23px;margin-bottom:10px;}
h5{font-size:20px;background:#eee;padding:10px;margin-bottom:10px;}

 @media (max-width:768px){
 section{width:95%;padding:40px 0;font-size:13px;}
 
 h3{font-size:26px;}
 h4{font-size:20px;}
 }


/* =====================
  共通（PC）
===================== */
body {
  padding-top: 80px;
}

header {
  display: flex;
  align-items: stretch;
  height: 80px;
  background: #fff;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  margin-right: auto;
}

.logo h1, .logo .logo-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight:bold;
}

.logo img {
  max-width: 80px;
  margin-right: 5px;
}

/* ナビ（PC） */
.nav {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.nav ul {
  display: flex;
  align-items: center;
}

.nav ul li {
  margin: 0 5px;
  font-size: 15px;
}

.nav ul li a:hover {
  text-decoration: underline;
}

/* 電話 */
.tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  font-size: 30px;
  font-weight: bold;
  color: #ff0000;
}

.tel span {
  font-size: 12px;
  color: #000;
}

/* ボタン */
.btn-nav {
  display: flex;
}

.btn-nav p {
  display: flex;
}

.btn-nav p a {
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
}

.btn-nav p a:hover {
  opacity: 0.7;
}

.btn-nav .mail {
  background: #5ec84e;
}

.btn-nav .line {
  background: #23ac0e;
}

/* ハンバーガー（PCでは非表示） */
.hamburger {
  display: none;
}


/* =====================
  スマホ
===================== */
@media screen and (max-width: 768px) {

  body {
    padding-top: 70px;
  }

  header {
    height: 70px;
    align-items: center;
    padding: 0 10px;
  }

  h1 {
    font-size: 16px;
  }

  h1 img {
    max-width: 50px;
  }

/* ===== ハンバーガー ===== */
.hamburger {
display: block;
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 1001;
  margin-right: 30px;
}

.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #000;
  transition: 0.4s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ×変形 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}


/* ===== ナビ（全画面フェード） ===== */
.nav {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.95);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 1000;
}

/* 開いた状態 */
.nav.active {
  opacity: 1;
  visibility: visible;
}


/* ===== メニュー（遅れて出る） ===== */
.nav ul {
  display: flex;
  flex-direction: column;
  text-align: center;

  transform: translateY(20px);
  opacity: 0;
  transition: 0.5s ease;
}

/* 表示時 */
.nav.active ul {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.2s;
}

/* メニュー見た目 */
.nav li {
  margin: 15px 0;
}

.nav a {
  font-size: 20px;
  letter-spacing: 2px;
  text-decoration: none;
  color: #000;
}


/* =====（任意）背景ぼかしでそれっぽく ===== */
.nav {
  backdrop-filter: blur(5px);
}

  /* 電話は非表示（下に集約） */
  .tel {
    display: none;
  }

  /* 下固定ボタン */
  .btn-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    text-align:center;
  }

  .btn-nav p {
    flex: 1;
  }

  .btn-nav p a {
    justify-content: center;
    height: 100%;
    font-size: 16px;
  }
  
html {
  scrollbar-gutter: stable;
}
.no-scroll {
  overflow: hidden;
}
}



/* フッター */
footer{
margin:60px 0 0;border-top:1px solid #ccc;
}
footer section{
padding: 20px 0px 60px;
}

footer h4{display:flex;align-items: center;justify-content: center;}
footer h4 img{max-width:60px;}
footer h4 span{margin-left:10px;font-size:26px;font-weight:bold;}
footer p{font-size:15px;}
footer p.copy{
text-align:center;
font-size:13px;
background:#a6e39d;
padding:10px 0;
}
footer ul{display:flex;justify-content: center;margin-top:20px;}
footer ul li{margin:0 20px;}
footer ul li a:hover{text-decoration:underline;}

 @media (max-width:768px){
 footer ul{justify-content: space-around;}
 footer ul li{margin:0;}
 
 }








/* メインビジュアル */
/* 全体 */
.mainv {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 背景画像 */
.bg {
  position: absolute;
  inset: 0;
}

.bg img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  animation: fade 15s infinite;
}

/* 画像ごとの遅延 */
.bg img:nth-child(1) { animation-delay: 0s; }
.bg img:nth-child(2) { animation-delay: 5s; }
.bg img:nth-child(3) { animation-delay: 10s; }

/* フェード */
@keyframes fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }  /* ゆっくりフェードイン */
  50%  { opacity: 1; }  /* 長く表示 */
  65%  { opacity: 0; }  /* ゆっくりフェードアウト */
  100% { opacity: 0; }
}

/* テキスト */
.mainv-inner {
  position: relative;
  z-index: 1;
  margin-left: 50px;
  padding: 30px 20px 60px;
  color: #fff;
}

/* 見出し */
.mainv h2 {
  font-size: 42px;
  margin-bottom: 30px;
  font-weight: bold;
}

/* ボタン */
.btns {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.btns a {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  color: #23ac0e;
  font-size:18px;
  font-weight:bold;
  padding: 20px 30px;
  text-decoration: none;
  overflow: hidden; /* ←はみ出し隠す */
  z-index: 0;
}

.btns a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #23ac0e;

  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: -1;
}
.btns a:hover::before {
  transform: translateX(0);
}
.btns a:hover {
  color: #fff;
}

/* テキスト */
.mainv-text p {
  font-size: 14px;
}
.mainv-text-title {
  font-size: 18px !important;
  margin-bottom: 10px;
}
.mainv-text span {
  color: #ff0000;
}

 @media (max-width:768px){
 .mainv{margin-top: -40px;}
 .mainv-inner{padding: 0;margin: 0 auto;width:87%;}
 .mainv h2{font-size:28px;}
 .btns a{font-size: 16px;padding:20px 2%;width:50%;}
 .mainv-text-title {font-size: 16px !important;}
 }

/* 選ばれる理由 */
#reason{}
#reason ul li{background:#a6e39d;margin-bottom:15px;padding:20px;}

/* 料金 */
#price h5{font-size:20px;font-weight:bold;margin-bottom:5px;text-align:center;}
.price-box ul{display:flex;justify-content: space-around;}
.price-box ul li{width:43%;padding:40px;box-sizing: border-box;border:10px solid #314468;}
.price-box .price-menu{font-size:18px;text-align:center;margin-bottom:20px;}
.btn{display:block;width:40%;margin:30px auto 0;padding:15px 0;background:#23ac0e;border:1px solid #23ac0e;color:#fff;text-align:center;font-size:20px;border-radius:50px;}
.btn:hover{background:#fff;color:#23ac0e;}

 @media (max-width:768px){
 .price-box ul{flex-wrap: wrap;}
 .price-box ul li{width:100%;margin-bottom:20px;}
 .btn{width:70%;}
 }

/* 調査項目 */
#items img{width:100%;}

.items-main{display:flex;margin-bottom:20px;}
.items-main .image {width:48%;margin-right:2%;}
.items-main div {width: 50%;}
.items-main h4{font-size:23px;font-weight:bold;}

.items-sub ul{display:flex;justify-content: space-between;flex-wrap: wrap;}
.items-sub li{width:32%;}
.items-sub h4{font-size:18px;font-weight:bold;text-align:center;}


 @media (max-width:768px){
 .items-main {flex-wrap: wrap;}
 .items-main .image{width:100%;}
 .items-main div{width:100%;}
 .items-main h4{text-align:center;}
 .items-sub li{width:49%;}
 .items-sub h4{font-size:15px;}
 
 }

/* about */
#about{width:100%;
background:linear-gradient( rgba(255,255,255,0.8)),url("../img/bg.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;}
#about .text{margin-bottom:20px;}

 @media (max-width:768px){
 #about{}
 }

/* お知らせ */
.news-list{margin:30px auto;width:70%;}
.news-list li{border-bottom:1px solid #ccc;padding:12px 0;display:flex;}
.news-date{margin-right:30px;}
.news-list a{text-decoration:none;color:#333;}
.news-list a:hover{text-decoration:underline;}
 @media (max-width:768px){
 .news-list{width:90% !important;}
 }

/* 問い合わせ */
#contact{width:100%;
background:linear-gradient( rgba(0,0,0,0.4)),url("../img/con-image.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;}

#contact h3, #contact .text{color:#fff;}
#contact h3.title:after{background-color: #fff;}

#contact .text{text-align:center;font-size:18px;margin-bottom:20px;}
#contact ul{display:flex;justify-content: space-evenly;}
#contact li {text-align:center;padding:30px 0;width:30%;font-size:20px;background:#fff;}
#contact li a{display:block;}
#contact li p{width:80%;margin:10px auto 0;padding:10px 0;border-radius:50px;color:#fff;}
#contact li p.top-tel{border:0;color:#ff0000;font-weight:bold;font-size:32px;padding:0;}
#contact li span{display:block;font-size:14px;font-weight:normal;margin-bottom:5px;}
#contact li span.contact-title{font-size:17px;font-weight:bold;}

#contact li:nth-child(2) p{background:#00b900;}
#contact li:nth-child(3) p{background:#314468;}

 @media (max-width:768px){
 #contact{background-image:linear-gradient(rgba(0,0,0,0.4)),url("../img/con-image-mb.jpg");}
 #contact ul{flex-wrap: wrap;align-items:center;}
 #contact li{width:100%;margin:10px auto 0;padding:20px 5%;}
 #contact li a{width:70%;margin:0 auto;}
 }