body {
        margin: 0; font-family: sans-serif; background: #fffdf8;
        
   /*     font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', '游ゴシック', YuGothic, sans-serif; */
        font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
    }
.xx-small{
font-size: xx-small;
}
.topAbout{
    font-size: large;
    text-shadow: 1px 1px 10px greenyellow;
}
    /* ヘッダー（ハンバーガー） */
    .navbar-brand { cursor: pointer; }

    /* ヒーローセクション */
    .hero-section {
      position: relative;
      background: url('../imgs/bg.jpg') center/cover no-repeat;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: white;
      text-align: center;
      overflow: hidden; /* 光がはみ出さないように */
    }


    .hero-overlay {
      position: absolute; top:0; left:0;
      width:100%; height:100%;
      background-color: rgba(0,0,0,0.2);
      z-index: 1;
    }
    .hero-content { position: relative; z-index:3; }



/* 光線エフェクト全体コンテナ */
.hero-rays {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index: 2;
  pointer-events: none; /* クリックに干渉しない */
  overflow: hidden;
}

/* 一本の光線 */
.hero-rays::before,
.hero-rays::after {
  content:"";
  position: absolute;
  top: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  transform: rotate(25deg);
  animation: shineMove 6s linear infinite;
}

.hero-rays::after {
  transform: rotate(-25deg);
  animation-delay: 7s;
}

/* 光線の動き */
@keyframes shineMove {
  0%   { transform: translateX(-100%) rotate(var(--rotate,20deg)); }
  100% { transform: translateX(100%) rotate(var(--rotate,20deg)); }
}




.shiny-text {
  font-weight: bold;
  font-family: 'Noto Sans', 'Helvetica', sans-serif;
  background: linear-gradient(135deg, #a8e6a3, #b4ffd1, #bbdf91);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;      /* 折り返し禁止 */
  font-size: clamp(24px, 6vw, 60px); /* 画面幅に応じて自動調整 */
  width: 100%;              /* 横幅いっぱい */
  text-align: center;       /* 中央揃え */
  box-shadow: 0px 1px 17px white;
}

/* 光のハイライト */
.shiny-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
    
    
  );
  transform: skewX(-20deg);
  animation: shine 8s infinite;
}

@keyframes shine {
  0%   { left: -50%; }
  100% { left: 100%; }
}





    .img-text{
        
        position: absolute;
            bottom: 0px;
            color: white;
            text-shadow: 3px 2px 3px black;
    }
    .container-img{
        width: 100%;
            box-shadow: 1px 1px 4px black;
    }
      
 
      .full-width-tel{
          white-space: nowrap;      /* 折り返し禁止 */
          font-size: clamp(24px, 6vw, 60px); /* 画面幅に応じて自動調整 */
          width: 80%;              /* 横幅80% */
          text-align: center;       /* 中央揃え */
          overflow: hidden;         /* はみ出す場合に隠す */
      }
      .full-width-tel a{
          text-decoration: none;
              color: white;
      }

      h2.title-back-green {
        border-bottom: solid 3px #c5e8c9;
        position: relative;
      }

      h2.title-back-green:after {
        position: absolute;
        content: " ";
        display: block;
        border-bottom: solid 3px #78a477;
        bottom: -3px;
        width: 20%;
      }
      
      
    /* 作業写真＋文字のロード時アニメ */
    .service-items {
      display: flex; gap: 1rem;
      justify-content: center; flex-wrap: wrap;
      margin-bottom: 2rem;
    }
    .service-item {
      width: 150px; height: 150px;
      border-radius: 12px; overflow: hidden;
      background: #fff; color:#333;
      font-weight: bold;
      display: flex; justify-content:center; align-items:center;
      font-size: 1.2rem;
      transform: scale(0.5); opacity:0;
      animation: zoomIn 3s forwards;
    }
    .service-item:nth-child(1){ animation-delay:0.3s; }
    .service-item:nth-child(2){ animation-delay:0.6s;}
    .service-item:nth-child(3){ animation-delay:0.9s;}
    .service-item:nth-child(4){ animation-delay:1.2s;}
    .service-item:nth-child(5){ animation-delay:1.5s;}
    /*@keyframes zoomIn {
      from { opacity: 1; transform: scale(1) rotate(45deg); }
      to { opacity:1; transform: scale(1); }
    }*/

      /* 1個目 → 45度 */
      .service-item:nth-child(1){
        animation: zoomRotate1 1s forwards, floatUpDown1 3s ease-in-out infinite;
        animation-delay: 0.5s, 1.5s; /* 出現後にフワフワが始まるよう調整 */
      }
      @keyframes zoomRotate1 {
        from { opacity: 0;  transform: translate(-20px, 20px) scale(0.5) rotate(0deg); }
        to   { opacity: 1;  transform: translate(0px, 0px) scale(1) rotate(-10deg); }
      }
      @keyframes floatUpDown1 {
        0%, 100% { transform: translateY(0) rotate(-10deg); }
        50%      { transform: translateY(-10px) rotate(-10deg); }
      }

      /* 2個目 → -30度 */
      .service-item:nth-child(2){
        animation: zoomRotate2 1s forwards, floatUpDown2 4s ease-in-out infinite;
        animation-delay: 0.5s, 1.4s; /* 出現後にフワフワが始まるよう調整 */
      }
      @keyframes zoomRotate2 {
        from { opacity: 0; transform: translate(20px, 10px) scale(0.5) rotate(0deg); }
        to   { opacity: 1; transform: translate(-20px, -10px) scale(1) rotate(-18deg); }
      }
      @keyframes floatUpDown2 {
        0%, 100% { transform: translate(-20px, -10px) rotate(-18deg); }
        50%      { transform: translate(-20px, 0px) rotate(-18deg); }
      }

      /* 3個目 → 60度 */
      .service-item:nth-child(3){
        animation: zoomRotate3 1s forwards, floatUpDown3 3.5s ease-in-out infinite;
        animation-delay: 0.5s, 1.6s; /* 出現後にフワフワが始まるよう調整 */
      }
      @keyframes zoomRotate3 {
        from { opacity: 0; transform: translate(0px, -50px) scale(0.5) rotate(0deg); }
        to   { opacity: 1; transform: translate(-20px, 0px) scale(1) rotate(10deg); }
      }
      @keyframes floatUpDown3 {
        0%, 100% { transform: translate(-20px, 0px) rotate(10deg); }
        50%      { transform: translate(-20px, -10px) rotate(10deg); }
      }

      /* 4個目 → -15度 */
      .service-item:nth-child(4){
        animation: zoomRotate4 1s forwards, floatUpDown4 4.5s ease-in-out infinite;
        animation-delay: 0.5s, 2.0s; /* 出現後にフワフワが始まるよう調整 */
      }
      @keyframes zoomRotate4 {
        from { opacity: 0; transform: translate(40px, 60px) scale(0.5) rotate(0deg); }
        to   { opacity: 1; transform: translate(0px, -20px) scale(1) rotate(-25deg); }
      }
      @keyframes floatUpDown4 {
        0%, 100% { transform: translate(0px, -20px) rotate(-25deg); }
        50%      { transform: translate(0px, -30px) rotate(-25deg); }
      }

      /* 5個目 → 90度 */
      .service-item:nth-child(5){
  
        animation: zoomRotate5 1s forwards, floatUpDown5 3.5s ease-in-out infinite;
        animation-delay: 0.5s, 1.5s; /* 出現後にフワフワが始まるよう調整 */
      }
      @keyframes zoomRotate5 {
        from { opacity: 0; transform: translate(-60px, -20px) scale(0.5) rotate(0deg); }
        to   { opacity: 1; transform: translate(40px, 0px) scale(1) rotate(30deg); }
      }
      @keyframes floatUpDown5 {
        0%, 100% { transform: translate(40px, 0px) rotate(30deg); }
        50%      { transform: translate(40px, -10px) rotate(30deg); }
     }

 
      
    /* セクション */
    section { padding: 80px 15px; }

    /* フッター */
    footer { background:#333; color:#fff; text-align:center; padding:40px 15px; }
    footer a { color:#fff; margin:0 10px; text-decoration:none; }

    /* ハンバーガーメニューのスライド */
    #sideMenu {
      position: fixed; top:0; left:-250px;
      width:250px; height:100%; background:#222; color:white;
      transition: left 0.3s ease; padding:20px; z-index:1500;
    }
    #sideMenu a { display:block; margin:15px 0; color:white; text-decoration:none; }
    #sideMenu.show { left:0; }
    
    /* オーバーレイ */
    #overlay {
      position: fixed;
      top:0; left:0;
      width:100%; height:100%;
      background: rgba(0,0,0,0.5);
      display:none;
      z-index:1000;
    }
    #overlay.show { display:block; }
    
    .bg-dark {
        --bs-bg-opacity: 1;
        background-color: rgb(0 47 6) !important;
    }
    .maxWidth-500{
        display:block;
        width: 95%;
    }
      .maxWidth-500 p{
          margin:1em;
      }
      
      .change-LR {
       /* display: flex;*/
        flex-wrap: wrap; /* 狭い画面では縦並び */
        gap: 10px;       /* 要素間の隙間 */
      }

      .change-LR .maxWidth-500 {
        flex: 1 1 400px; /* 幅調整 */
      }


.btn-green {
  background-color: #6fbf73;   /* 優しい緑 */
  color: white;
  border: none;
  border-radius: 8px;         /* 柔らかさ */
  padding: 10px 20px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.btn-green:hover {
  background-color: #5aa563;  /* 少し濃い緑に */
}

.btn-green-light{
  background-color:#a8d5ba; /* 薄いグリーン */
  color:#2f4f2f;            /* 濃いめの文字色で視認性UP */
  border:none;
  transition:background-color .25s ease, transform .15s ease, box-shadow .25s ease;
  font-size: large;
}

.btn-green-light:hover{
  background-color:#91c7a7; /* hoverで少し濃く */
  transform:translateY(-1px);
}
.btn-green-light:focus-visible{
  outline:0;
  box-shadow:0 0 0 .25rem rgba(168,213,186,.45); /* 優しいフォーカスリング */
}

.btn-top {
  background-color: white;
  color: green;
  border: none;
  border-radius: 8px;        /* 柔らかさ */
  padding: 10px 20px;
  font-size: 2rem;
  transition: background-color 0.3s ease;
}
.btn-top:hover {
  background-color: #5aa563;  /* 少し濃い緑に */
}

.btn-conect {
  background-color: white;
  color: green;
  border: solid green 2px;
  border-radius: 8px;        /* 柔らかさ */
  padding: 10px 20px;
  font-size: 2rem;
  transition: background-color 0.3s ease;
}
.btn-conect:hover {
  background-color: #5aa563;  /* 少し濃い緑に */
}
      
      .btn-soft-green {
        background-color: #019860;;   /* 優しいグリーン */
        color: #fff;                 /* 文字色は白 */
        border-radius: 30px 0px;         /* 角丸で柔らかく */
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 1px 2px 3px black;
        border: solid white 3px;
            border-right: solid gray 3px;
            border-bottom: solid gray 3px;
      }

      .btn-soft-green:hover {
        background-color: #7fd8a6;   /* ホバーで少し濃い緑 */
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0,0,0,0.15);
      }
.img-wide{
    width: 100%;
    height: 80px;
    object-fit: cover;
}

      @media (min-width: 800px) {
        /* ここに800px以上のときだけ適用するスタイル */
        .maxWidth-500{
            display:inline-block;
        /*    max-width:390px; */
            width: 45%;
            text-align: center;
            vertical-align: text-top;
        }
        .maxWidth-500 p{
            text-align: left;
            padding-top: 2em;
        }
        .change-LR {
          display: flex;
          }
        .change-LR .maxWidth-500 {
           flex: 1 1 calc(50% - 10px); /* 横並びの幅を半分に（gapの半分を引く） */
           max-width: calc(50% - 10px);
         }
        .change-LR .maxWidth-500:first-child {
           order: 2; /* 元は左だった要素を右に */
         }
         .change-LR .maxWidth-500:last-child {
           order: 1; /* 元は右だった要素を左に */
         }
         
         .img-wide{
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
      }


/*サブページ用*/
 
.title-subpage{
    text-align: center;
        color: #006300;
        margin-bottom: 0px;
}
.title-subtitle{
    text-align: center;
    font-size: small;
}

h2.title-back-darkgreen {
  border-bottom: solid 3px #749d78;
  position: relative;
}

h2.title-back-darkgreen:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #003006;
  bottom: -3px;
  width: 20%;
}

#contactForm{
    display: flex;
     justify-content: center; /* 中身を横方向中央寄せ */
}
.contactArea{
    text-align: left; /* 中身の文字は左寄せ */
    width: 100%;      /* フォーム全体の幅を使う場合 */
    max-width: 600px; /* 必要なら幅制限 */
}
.area_input{
    margin: 1em 10px;
}
#nameh{
    width: 14em;
}
#tel{
    width: 14em;
}
#email{
    width: 20em;
}
#message{
    width: 100%;
    height: 20em;
}
#btnSubmit{
    margin: 0px 20px 20px;
}
.infoArea{
    margin: 2em;
        background-color: #e6f8e2;
        padding: 0.5em 1em;
}
.my-5 {
    padding:0px;
}
.container h3{
    margin-top: 1em;
    border-bottom: solid seagreen 1px;
}

.conect-tel{
    font-size: 2rem;
    text-align: center;
}

.btn-tel {
    background-color: white;
        color: black;
        border: solid green 2px;
        border-radius: 8px;
        padding: 10px 20px;
        font-size: 2rem;
        transition: background-color 0.3s ease;
        text-decoration: none;
}
.btn-tel:hover {
    color: white;
  background-color: #5aa563;
}
.left{
text-align: left;
}
.center{
    text-align: center;
}

@media print {
  .no-print {
    display: none !important;
  }
}