@charset "UTF-8";

/* CSSリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {

  line-height: 1.5;
  color: rgb(0, 58, 23);
  background-color: rgb(13, 117, 53);
  font-family: "M PLUS 1", sans-serif;
}

/* 記事 */
article {
  width: 80%;
  background-color: #ffffff;
}

/* サイド */
aside {
  width: 20%;
  background-color: #213b29;
}

/* 700まで非表示※スマホメニュー */
@media (min-width: 700px) {
  #menuhan {
    display: none;
  }

  #mobilemenu {
    display: none;
  }
}

/* サイド追従 */
.sidebox {
  position: sticky;
  top: 20px;
  /* 上の距離*/

}

/* 先頭に戻る */
#scrollbtn {
  position: fixed;
  bottom: 20px;
  /* 画面の下から20pxの位置 */
  right: 20px;
  /* 画面の右端から20pxの位置 */
  padding: 10px 15px;
  background: linear-gradient(to right, #1e7608, #b8a544);
  color: white;
  font-weight: 600;
  border: 1px solid #d0e27e;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  /* 常に表示 */
}


/*index menu*/
.index-header {
  background-color: rgb(13, 117, 53);
  height: 60px;
}

.logo {
  width: 250px;
}

.index-nav {
  display: flex;
  justify-content: flex-end;
  /*左配置*/
  font-size: 1.25rem;
  text-transform: uppercase;
  /*大文字*/
  list-style-type: none;
  /*○消*/
  margin-right: 30px;
}

.index-nav li {
  margin-left: 20px;
  margin-top: -50px;
}

.index-nav a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  /*下線消*/
}

.index-nav a:hover {
  color: #e9dd76;
}

/*index スライドショー*/
.slideshow-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-background {
  position: absolute;
  top: 40%;
  /* 垂直中央に配置 */
  left: 50%;
  /* 水平中央に配置 */
  transform: translate(-50%, -50%);
  z-index: 10;
  /* スライドの上に表示 */
  text-align: center;
  pointer-events: none;


}

/*index 見出し*/
.midashi-h2 {
  font-family: "Alfa Slab One", serif;
  font-size: 2rem;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 2px #00000034;
  margin-top: 4%;
  font-family: "Monoton", sans-serif;
  font-weight: 400;
}

.midashi-p {
  font-size: 1rem;
  color: white;
  text-shadow: 2px 2px 2px #000000;

}

.midashi a {
  position: absolute;
  z-index: 10;
  /* スライドの上に表示 */
  top: 50%;
  /* 垂直中央に配置 */
  left: 50%;
  /* 水平中央に配置 */
  transform: translate(-50%, -50%);
  text-decoration: none;
  /*下線消*/
  text-align: center;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(to right, #32a80e, #d8cc5e);
  /* グラデーション */
  padding: 10px 40px;
  border-radius: 10px;
  border-left: 5px solid #7ae976;
  border-bottom: 5px solid #e9dd76;
  cursor: pointer;
  /*指アイコンに変える*/
  transition: 0.3s;
}

.midashi a:hover {
  color: #ffffff;
  background: linear-gradient(to right, #1e7608, #b8a544);
  /* ホバー時に暗めのグラデーション */
}

/*お知らせ*/

.index-h3 {
  font-family: "Notable", sans-serif;
  text-align: center;
  font-weight: 200;
  color: #ffffff;
  font-size: 2rem;
  margin-top: 1%;
}

/* 線 */
.line {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.line::before,
.line::after {
  content: "";
  flex-grow: 1;
  /* 他の要素と均等に伸びる */
  height: 5px;
  background: linear-gradient(to right, #32a80e, #e9dd76);
  /* グラデーション */
  margin: 1% 6% 1% 6%;
  /* 白枠と調整する*/
  border-radius: 10px;
}

.news {
  margin: 0% 10% 1% 10%;
  /* 枠 */
  padding: 2%;
}

.news li {
  padding-top: 1%;
  list-style: none;
  padding: 15px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(219, 0, 0, 0.1);
  margin-bottom: 10px;
  font-size: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* tranceform0.3秒かけてなめらかに変化する/box-shadow影の変化0.3秒かけてなめらかに変化/ease動きの加速・減速が自然なカーブになるよう調整*/
}


.news li:hover {
  transform: scale(1.05);
  /* 拡大 */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

.news li::before {
content: "🚧";
  /* アイコン */
  margin-right: 10px;
}

.news a {

  color: rgb(13, 117, 53);
  text-decoration: none;
  /*下線消*/
  font-size: 1rem;
}

.news a:hover {
  color: rgb(67, 30, 202);
  /*クリックした時の色*/

}

/*工事実績*/
.topix {

  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
}

.topix img {
  max-width: 30%;
  max-height: 100%;
  object-fit: cover;
  /* 縦横比維持　*/
  border-radius: 40% 70% 50% 40%;
  margin-left: 10%;
  box-shadow: 20px 20px 0 #a9b94d;
  margin: 50px 50px 50px 150px;
}

.topix h3 {
  margin-top: 4%;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 4% 0% 0% 10%;


}

.topix p {
  width: 75%;
  text-align: left;
  padding: 2% 0% 2% 10%;
  font-size: 1rem;

}

.topix a {
  display: inline-block;
  text-decoration: none;
  /*下線消*/
  margin: 0 10% 4% 10%;
  background: linear-gradient(to right, #32a80e, #d8cc5e);
  /* グラデーション */
  border-left: 5px solid #96d642;
  border-bottom: 5px solid #2ea709;
  padding: 0.5% 2% 0.5% 2%;
  /*枠内幅*/
  color: rgb(3, 51, 22);
  font-weight: bold;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  /*指アイコンに変える*/
  transition: 0.3s;
}

/* 工事実績ボタン */
.topix a:hover {
  background: #e9dd76;
  transform: translateY(5px);
  /* 下に下げる */
}

.topix a::before {
  font-weight: bold;
  content: "▶";
  font-size: 1rem;
  margin-right: 10px;
  color: rgb(3, 51, 22);
}

.hp {
  margin: 2% 10% 1% 10%;
  /* 枠 */
  padding: 20px;
  border-left: 5px solid #ffffff;
}

.hp h3 {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.hp p {
  color: #ffffff;
  font-size: 1rem;
}

/* ホームページボタン */
.btn {
  text-align: center;
  background: linear-gradient(to right, #32a80e, #d8cc5e);
  /* グラデーション */
  width: 30%;
  margin-top: 2%;
  padding: 10px 20px;
  border-radius: 10px;
  border-left: 5px solid #7ae976;
  border-bottom: 5px solid#e9dd76;
  cursor: pointer;
  /*指アイコンに変える*/
  transition: 0.3s;
}

.btn:hover {
  background: #e9dd76;
  transform: translateY(5px);
  /* 下に下げる */
}

.btn::before {
  font-weight: bold;
  content: "▶";
  font-size: 1rem;
  margin-right: 10px;
  color: #ffffff;
}

.hp a {
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
  /*下線消*/

}

.footer {
  margin: 6% 6% 0 6%;
  padding: 2%;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #ffffff;
}

.kouzi {
  background-image: url(pic/002.jpg);
  width: 100%;
  height: 200px;
  background-size: cover;
  /* 画像全体を表示（切れない） */
}

.kouzi h1 {
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.76);
  text-align: left;
  font-weight: bold;
  padding: 80px 0px 0px 80px;

}

.kouzi2 {
  background-image: url(pic/006.jpg);
  width: 100%;
  height: 200px;
  background-size: cover;
  /* 画像全体を表示（切れない） */
}

.kouzi2 h1 {
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.76);
  text-align: left;
  font-weight: bold;
  padding: 80px 0px 0px 80px;

}

.kouzi3 {
  background-image: url(pic/004.jpg);
  width: 100%;
  height: 200px;
  background-size: cover;
  /* 画像全体を表示（切れない） */
}

.kouzi3 h1 {
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.76);
  text-align: left;
  font-weight: bold;
  padding: 80px 0px 0px 80px;

}

.kouzi-main {
  display: flex;
  justify-content: space-between;
}

/* 線 */
.line2 {
  display: flex;
  align-items: center;
}

.line2::before,
.line2::after {
  content: "";
  flex-grow: 1;
  /* 他の要素と均等に伸びる */
  height: 5px;
  background: linear-gradient(to right, #32a80e, #e9dd76);
  /* グラデーション */
  margin: 4% 6% 0 6%;
  /* 白枠と調整する*/
  border-radius: 10px;
}

.line2 h3 {
  margin-top: 20px;
  color: rgb(0, 58, 23);
  font-family: "Notable", sans-serif;
  font-weight: 400;
}

/* 線 */
.line3 {
  display: flex;
  align-items: center;
  margin: 10% 8% 0 8%;

}

.line3::before,
.line3::after {
  content: "";
  flex-grow: 1;
  /* 他の要素と均等に伸びる */
  height: 2px;
  background: linear-gradient(to right, #32a80e, #e9dd76);
  /* グラデーション */
  margin: 10% 6% 0 6%;
  /* 白枠と調整する*/
  border-radius: 10px;
}

.line3 h3 {
  color: #ffffff;
  margin-top: 10%;
  font-size: 1rem;
}

/*工事実績年代*/
.year {
  text-align: center;
  margin: 2% 20% 0% 20%;
  font-weight: 400;

}

.year a:hover {
  color: #e9dd76;
}

.year li {
  border-bottom: 1px #ffffff75 solid;
  padding-top: 2%;
  list-style-type: none;
}

.year a {
  color: #ffffff;
  text-decoration: none;
  ext-decoration: none;
  /*下線消*/
}

.current-year {
  position: relative;
  font-weight: bold;
  color: #e9dd76;
  padding-left: 10px;
}

.current-year::after {
  content: "★";
  /* 星アイコン */
  position: absolute;
  right: 100%;
  animation: wobble 1.5s infinite ease-in-out;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(10deg);
  }

  /* 傾ける */
  100% {
    transform: rotate(0deg);
  }
}

/*説明文*/
.kouzi-topix {
  width: 80%;
  margin: 1% 0 0 10%;
  font-size: 0.8rem;
}

.keyword {
  font-weight: bold;
  padding: 2px;
  position: relative;
  display: inline-block;
}

.keyword::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background-color: #e9dd76;
}

.keyword2 {
  font-weight: bold;
  border-bottom: 4px solid #e9de76bd;
}

.bana {
  background: linear-gradient(to right, #1c862d, #e9dd76);
  /* グラデーション */
  width: 80%;
  height: 40px;
  margin: 4% 0 2% 10%;
  text-align: center;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
}

/*モーダルの配置*/
.modal-center {
  width: 90%;
  /* コンテナの幅を広げる */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px auto;
  /* 全体を中央揃え */
}

/*モーダル画像設定*/
.modal-img img {
  width: auto;
  height: 200px;
  object-fit: cover;
  /* 画像を全体に表示 */
  border-radius: 10px;
  cursor: pointer;
  /* マウスカーソルを指のアイコンに変更 */
  border-radius: 10px;
  /* 角を少し丸くする */
  border: 1px solid#435749;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  /* 影 */
}

.modal-img:hover {
  transform: scale(1.05);
  /* 拡大 */
}

/*画像文字*/

.overlay-text {
  position: absolute;
  width: 100%;
  top: 50%;
  /* 縦方向の中央 */
  left: 50%;
  /* 横方向の中央 */
  transform: translate(-50%, -50%);
  /* 完全な中央揃え */
  background: linear-gradient(to right, rgba(25, 92, 36, 0.7), rgba(216, 205, 107, 0.7));

  color: white;
  font-size: 0.8rem;
  text-align: center;
  padding: 10px 20px;
  /* 四角枠の枠が影響 */
  border-radius: 5px;
}

.overlay-text2 {
  position: absolute;
  width: 20%;
  height: 20px;
  top: 70%;
  /* 縦方向の中央 */
  left: 50%;
  /* 横方向の中央 */
  transform: translate(-50%, -50%);
  /* 完全な中央揃え */
  text-shadow: 1px 1px 4px rgb(10, 24, 9);
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

.img-container {
  position: relative;
  /* 画像を基準に絶対配置 */
  display: inline-block;
  max-width: 600px;
  opacity: 0;
  transition: opacity 0.8s ease;

}

.all-loaded .img-container {
  opacity: 1;
}

/*モーダル*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  /* 他の要素より前面に表示 */
  width: 60%;
  /*幅*/
  top: 50%;
  left: 50%;
  /*top: 50%; left: 50%; 要素を親要素の50%の位置に配置する。これだけだと要素の 左上の角 が中央に。
    transform: translate(-50%, -50%); を追加し、要素全体の中心が画面の中央 に来るように調整すること。*/
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;

}

.modal img {
  display: inline-block;
  width: 300px;
  height: auto;
  margin: 2% 0% 2% 0%;
  padding: 2px;
}

.modal h2 {
  border-bottom: 2px solid #213b29;
}

.modal h3 {
  font-weight: bold;
  margin-top: 2%;
}

#zoomModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
}

/* MOVIEボタン */

.movie {
  text-align: center;

}

.movie a {
  padding: 4px 10px 4px 10px;
  text-decoration: none;
  font-weight: bold;
  color: #1c862d;
  border: 1px solid #1c862d;
  border-radius: 10px;
  background: #e9dd76;
}

.movie a:hover {
  background: #1c862d;
  color: #e9dd76;
}

/*工事概要表*/
.kouzi-table {
  width: 80%;
  border-collapse: collapse;
  margin: 2% 10% 0;
  font-size: 1rem;
  text-align: left;
  border: 2px solid #1c862d;
  /* 枠線を追加 */
}

.kouzi-table th,
.kouzi-table td {
  padding: 12px;
  border-bottom: 1px solid #b3b3b3;
  /* 下線を追加 */
}

.kouzi-table td {
  font-weight: 500;
}

.kouzi-table th {
  background: linear-gradient(to right, #1c862d, #e9dd76);
  /* グラデーション */
  color: white;
  font-weight: bold;
  text-align: center;
}

.kouzi-table tr:nth-child(even) {
  background-color: #f8f9fa;
  /* 偶数行の背景色を変更 */
}

.kouzi-table tr:hover {
  background-color: #f4f5c2;
  /* ホバー時の背景色 */
}

/*モーダル影*/
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  /* モーダルより一段後ろ */
  background: rgba(0, 0, 0, 0.5);

}

.closebtn2 {
  margin-top: 2%;
  padding: 4px 10px 4px 10px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(to right, #1c862d, #e9dd76);
  /* グラデーション */
  border: 1px solid #1c862d;
  border-radius: 10px;
}

.closebtn2:hover {
  color: #1c862d;
  background: #e9dd76;
  transform: translateY(5px);
  /* 下に下げる */
}




/* 記事 */

.blog-page article {
  width: 70%;
  background-color: rgb(233, 233, 233);
}

/* サイド */
.blog-page aside {
  width: 30%;
  background-color: #213b29;
}

.side2 {
  background-color: #213b29;
}

.blog h3 {
  font-family: "Notable", sans-serif;
  text-align: center;
  font-weight: 200;
  color: #ffffff;
  margin-top: 1%;
}

/* ブログ枠*/
.blog {
  background-color: #ffffff;
  width: 70%;
  margin: 20px auto;
  /* 中央寄せ */
  padding: 30px 60px 30px 60px;
  border-radius: 10px;
  /* 角を丸くする */
  border: 1px solid #0000002d;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  /* 影を追加して立体感を出す */
}

.speech-bubble {
  position: relative;
  width: 80px;
  background: #007b5e;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(95, 124, 97, 0.15);
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: #ffffff;
  text-align: center;
  margin-bottom: 10px;
}

/* 下向きの吹き出し（しっぽ） */
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #007b5e;
}

.blog h2 {
  font-size: 1.25rem;
}

.blog h6 {
  font-size: 1.25rem;
  padding: 4px;
  margin-top: 20px;
  background-color: #007b5e;
  border-radius: 5px;
  color: #ffffff;
}

.blog h4 {
  font-size: 1rem;
  margin: 10px 0 10px 0px;
}

.blog p {
  margin: 10px 0 20px 0;
}

.blog figure {
  font-size: 0.8rem;
  font-weight: 600;
}

.bana2 {
  background-color: rgb(13, 117, 53);
  width: 80%;
  margin: 4% 0 2% 10%;
  text-align: center;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  border: 2px solid #ffffffa4;
  border-radius: 10px;
}

/* 区切り線 */
.title-border {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #1c862d, #e9dd76);
  /* グラデーション */
  border-radius: 3px;
  margin-bottom: 20px;
}

/* 区切り線 */
.title-border2 {
  width: 100%;
  height: 2px;
  border-bottom: 1px dashed #1c862d;
  /* 破線のボーダー */
  margin: 20px 0 20px 0;
}

/* 区切り線 */
.title-border3 {
  width: 90%;
  height: 2px;
  border-bottom: 1px dashed #ffffff;
  /* 破線のボーダー */
  margin: auto;
}

/* 進捗バー*/
.progress-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 800px;
  margin: 20px auto;
}

.progress-info {
  flex: 1;
}

.progress-bars {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar {
  width: 100%;
  height: 15px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #007b5e;
  transition: width 0.5s ease-in-out;
}

/* ブログ画像 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 必ず2列 */
  gap: 10px;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.photo-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* 角を少し丸く */
  object-fit: cover;
}

/* ブログ画像２ */
.photo-grid2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* 必ず2列 */
  gap: 10px;
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.photo-grid2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* 角を少し丸く */
  object-fit: cover;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.photo-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 20px;
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.photo-card:hover img {
  transform: scale(1.05);
}

.photo-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background: linear-gradient(to right, rgba(28, 134, 45, 0.8), rgba(233, 221, 118, 0.5));
  padding: 12px;
  font-size: 1rem;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ブログ選択幅・ドロップダウンメニュー */
.select-blog {
  position: relative;
  width: 20%;
  margin-bottom: 30px;
}

/* ドロップダウンメニュー */
.blog-select2 {
  width: 100%;
  margin-top: 10px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}



/* 工事選択幅・ドロップダウンメニュー */
.select-container {
  position: relative;
  width: 70%;
  margin-left: 15%;
}

/* 工事選択幅・ドロップダウンメニュー */
.blog-side {
  font-family: "Monoton", sans-serif;
  width: 80%;
  font-size: 2rem;
  margin: 14% 0 2% 10%;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  margin-top: 80px;
}

/* ドロップダウンメニュー */
.blog-select {
  width: 100%;
  margin-top: 10px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  /* デフォルト矢印を非表示 */
}


/* サイドメニュー */
.bana3 {
  background: linear-gradient(to right, #1c862ec9, #e9de76cc);
  width: 80%;
  margin: 14% 0 2% 10%;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  border-radius: 5px;
  margin-top: 80px;
}

.blog-box {
  margin: 2em 0 1em 0;
  background-color: #ebebeb;
  border: 2px solid #007b5e;
  border-radius: 5px;
}

.blog-box h1 {
  font-size: 16px;
  position: absolute;
  margin-top: -31px;
  margin-left: -2px;
  background-color: #007b5e;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px 10px;
}

.blog-box h2 {
  margin: auto;
  font-size: 1rem;
  padding: 10px;
}

.blog-box p {
  font-size: 1rem;
  margin: auto;
  padding: 0 20px 10px 20px
}

/* ブログ選択１ */
.blog-green {
  width: 100%;
  background-color: rgb(13, 117, 53);
  background: repeating-linear-gradient(45deg,
      #ffffff21,
      #ffffff21 10px,
      rgb(13, 117, 53) 10px,
      rgb(13, 117, 53) 20px);
}

.blog-home {
  width: 75%;
  margin: 0 auto;
  background-color: rgb(13, 117, 53);
}

.blog-home p {
  color: #ffffff;
  margin: 20px 0 0px 0;
  text-align: center;
}

.blog-home a {
  color: #ffffff;
}

.blog-home h2 {
  font-size: 2.5rem;
  color: #ffffff;
  padding: 30px;
  text-align: center;
  font-family: "Monoton", sans-serif;
  font-weight: 400;
}

/* ブログ選択２ */
.blog-white {
  width: 100%;
  background-color: #ffff;
  background: repeating-linear-gradient(45deg,
      #ffffff,
      #ffffff 10px,
      #f0f0f0 10px,
      #f0f0f0 20px);
}

.blog-home2 {
  width: 75%;
  margin: 0 auto;
  background-color: #ffffff;
}

.blog-home2 h2 {
  font-size: 2.5rem;
  padding: 30px;
  color: rgb(13, 117, 53);
  text-align: center;
  font-family: "Monoton", sans-serif;
  font-weight: 400;
}

/* お問い合わせ */
.tell-flex {
  display: block;
}

.tell {
  width: 80%;
  margin: 0 auto;
  background-color: #ffff;
}

.tell p {
  width: 80%;
  padding-top: 20px;
  margin: 0 auto;
  text-align: center;
}

.map {
  width: 60%;
  margin: 30px auto;
  padding: 10px;
  background: linear-gradient(to right, #1c862ec9, #d6c636cc);
  border: 2px solid #1c862e71;
  border-radius: 10px;
}

.map h4 {
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
  color: #ffffff;
}

.map-frame {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.map-frame iframe {
  width: 80%;
  height: 400px;
  max-width: 700px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border: none;
}

.btn-tell a {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 4px;
  color: #ffff;
  font-weight: 600;
  text-decoration: none;
  /*下線消*/
  background: linear-gradient(to right, #32a80e, #d8cc5e);
  /* グラデーション */
  cursor: pointer;
  /*指アイコンに変える*/
  transition: 0.3s;
}

.btn-tell:hover {
  transform: translateY(5px);
  /* 下に下げる */
}

.tell-isami {
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
}

.tell-isami img {
  max-width: 30%;
  max-height: 100%;
  object-fit: cover;
  /* 縦横比維持　*/
  border-radius: 40% 70% 50% 40%;
  margin-left: 10%;
  margin-top: 20px;
  box-shadow: 20px 20px 0 #a9b94d;
  margin: 50 50 50 150;
}

.tell-isami p {
  margin: auto;
  padding: 80px;
  text-align: left;
  font-size: 1rem;
}

.video-container {
  max-width: 800px;
  margin: 10px auto;
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

/* Xのボタン */
.x-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background-color: #000;
  /* Xのイメージに合わせて黒背景 */
  color: #fff;
  padding: 8px 12px;
  border-radius: 50px;
  font-weight: bold;
  font-family: sans-serif;
  transition: background-color 0.3s;
}

.x-btn:hover {
  transform: scale(1.05);
}

/* 画像クリック */
.click-to-view {
  cursor: pointer;
  /*指アイコンに変える*/
}

.image-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;

}

.image-overlay img {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

}

.image-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

@media (max-width:1300px) {
  .index-nav {
    margin-top: 10px;
  }

  .tell-isami img {
    display: none;
  }

  .tell-isami p {
    padding: 20px;
  }

  .tell p {
    font-size: 0.9rem;
  }
}

@media (min-width: 1050px) {
  .side2 {
    display: none;
  }


}

@media (max-width: 1050px) {

  #scrollbtn {
    font-size: 0.8rem;
  }

  /*index menu*/
  .index-header {
    height: 30px;
  }

  .logo {
    width: 130px;
  }

  .index-nav {
    font-size: 1rem;
  }

  /* サイド追従 */
  .sidebox {
    position: sticky;
    top: 60px;
    /* 上の距離*/

  }

  /*index menu　スマホ*/
  #mobilemenu {
    display: none;
    /* 初期状態は非表示 */

  }

  #menuhan {
    display: none;
  }

  .midashi-h2 {
    font-size: 1.25rem;
    font-weight: 200;
  }

  .midashi-p {
    font-size: 0.8rem;
  }
  .index-background {
    top: 40%;
    left: 50%;
  }

  /*index スライドショー*/
  .slideshow-container {
    height: 900px;
  }

  .midashi a {
    top: 50%;
    /* 垂直中央に配置 */
    padding: 6px 30px;
  }

  .news a {
    color: rgb(13, 117, 53);
    text-decoration: none;
    font-size: 0.8rem;
  }

  .news li {
    font-size: 0.8rem;
  }

  /*工事実績*/
  .topix {
    display: inline-table;
  }

  .topix img {
    display: none;
  }

  .topix h3 {
    font-size: 1.25rem;
  }

  .topix p {
    width: 90%;
    font-size: 1rem;
  }

  .topix a {
    padding: 0.5% 2% 0.5% 2%;
    /*枠内幅*/
    font-size: 1rem;
  }

  .topix a::before {
    font-size: 0.8rem;
  }

  .hp {
    margin: 2% 4% 1% 4%;
    padding: 20px;
    border-left: 5px solid #ffffff;
  }

  .hp h3 {
    font-size: 1.25rem;
  }

  .hp p {
    font-size: 1rem;
  }

  .btn {
    width: auto;
  }

  .hp a {
    font-size: 1rem;
    font-weight: 600;
  }

  /*お知らせ*/
  .index-h3 {
    font-size: 1.25rem;
  }

  .year a {
    font-size: 1rem;
  }

  .kouzi {
    width: 100%;
    height: 80px;
    margin-top: 20px;

  }

  .kouzi h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 20px 0px 0px 0px;
  }

  .kouzi2 {
    width: 100%;
    height: 80px;
    margin-top: 20px;

  }

  .kouzi2 h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 20px 0px 0px 0px;
  }

  .kouzi3 {
    width: 100%;
    height: 80px;
    margin-top: 20px;

  }

  .kouzi3 h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 20px 0px 0px 0px;
  }

  /*説明文*/
  .bana {
    height: 30px;
    font-size: 1rem;
  }

  /*モーダル画像設定*/
  .modal-img img {
    height: 150px;
  }

  /*画像文字*/
  .overlay-text {
    color: white;
    font-size: 0.8rem;
    padding: 5px 10px;
    /* 四角枠の枠が影響 */
  }

  .overlay-text2 {
    height: 10px;
    font-size: 1rem;
  }

  /*モーダル*/
  .modal {
    width: 90%;
    /*幅*/
  }

  .modal img {
    width: 150px;
  }

  .modal h3 {
    font-size: 1rem;
  }

  /* MOVIEボタン */
  .movie a {
    font-size: 1rem;
  }

  /*工事概要表*/
  .kouzi-table {
    font-size: 1rem;
  }

  .closebtn2 {
    font-size: 1rem;
  }

  .kouzi-topix {

    font-size: 1rem;
  }

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

  footer {
    font-size: 0.8rem;
  }

  .line2 h3 {
    font-size: 1.5rem;
  }

  /* 記事 */
  .blog-page article {
    width: 100%;
  }

  /* サイド */
  .blog-page aside {
    display: none;
  }

  .blog {
    width: 90%;
    padding: 30px 20px 30px 30px;
  }

  .bana2 {
    font-size: 1.25rem;
  }

  .speech-bubble {
    font-size: 1.2rem;
  }

  .blog h2 {
    font-size: 1.25rem;
  }

  .blog p {
    font-size: 1rem;
    padding: 10px;
    margin: 0;
  }

  .blog h6 {
    font-size: 1.25rem
  }

  .blog-side {
    padding-top: 10px;
    font-size: 2rem;
    margin-top: 30px;
  }

  .blog-select {
    margin-top: 0;
    margin-bottom: 30px;
    height: 50px;
  }

  .progress-section {
    display: flex;
  }

  /* ブログ選択幅・ドロップダウンメニュー */
  .select-blog {
    position: relative;
    width: 20%;
    margin-bottom: 30px;
  }

  /* ブログ選択幅・ドロップダウンメニュー */
  .select-blog {
    width: 40%;
  }

  .tell p {
    font-size: 0.9rem;
  }

  .tell-isami img {
    display: none;
  }

  .tell-isami p {
    padding: 30px;
  }

}

@media (max-width: 700px) {
  #scrollbtn {
    font-size: 0.8rem;
  }

  /*index menu*/
  .index-header {
    height: 30px;
  }

  .logo {
    width: 130px;
  }

  .index-nav {
    display: none;
  }

  /* サイド追従 */
  .sidebox {
    position: sticky;
    top: 60px;
    /* 上の距離*/
  }

  /*index menu　スマホ*/
  #mobilemenu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 58, 23, 0.842);
    z-index: 4500;
  }

  #mobilemenu.active {
    display: flex;
    /* メニューが開いたときに適用 */
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    background: transparent;
  }

  #mobilemenu a:hover {
    color: #e9dd76;
  }

  #mobilemenu ul {
    list-style: none;
    padding: 0;
    text-align: center;
    line-height: 50px;
  }

  #mobilemenu ul li a {
    color: white;
    text-decoration: none;
  }

  #mobilemenu a:hover {
    color: #e9dd76;
  }

  #menuhan {
    display: block;
    /* 700px以下で表示 */
    position: fixed;
    z-index: 2400;
    right: 10px;
    top: 20px;
    background: rgb(0, 58, 23);
    border: 1px solid #d0e27e;
    border-radius: 40px;
    color: white;
    font-size: 1rem;
    padding: 5px 10px;
    cursor: pointer;
  }

  .index-background {
    top: 30%;
    left: 50%;
  }

  /*index スライドショー*/
  .slideshow-container {
    height: 500px;
  }

  .midashi-h2 {
    font-size: 1.25rem;
    font-weight: 200;
  }

  .midashi-p {
    font-size: 0.8rem;
  }


  .midashi a {
    top: 41%;
    /* 垂直中央に配置 */
    padding: 6px 30px;
  }

  .news a {
    color: rgb(13, 117, 53);
    text-decoration: none;
    font-size: 0.8rem;
  }

  .news li {
    font-size: 0.8rem;
  }

  /*工事実績*/
  .topix {
    display: inline-table;
  }

  .topix img {
    display: none;
  }

  .topix h3 {
    font-size: 1.25rem;
  }

  .topix p {
    width: 90%;
    font-size: 0.9rem;
  }

  .topix a {
    padding: 0.5% 2% 0.5% 2%;
    /*枠内幅*/
    font-size: 1rem;
  }

  .kouzi-topix {
    font-size: 0.9rem;
  }

  .line2 h3 {
    font-size: 1rem
  }

  .topix a::before {
    font-size: 0.8rem;
  }

  .hp {
    margin: 2% 4% 1% 4%;
    padding: 20px;
    border-left: 5px solid #ffffff;
  }

  .hp h3 {
    font-size: 1.25rem;
  }

  .hp p {
    font-size: 0.9rem;
  }

  .btn {
    width: auto;
  }

  .hp a {
    font-size: 1rem;
    font-weight: 600;
  }

  /*お知らせ*/
  .index-h3 {
    font-size: 1.25rem;
  }

  .year a {
    font-size: 1rem;
  }

  .kouzi {
    width: 100%;
    height: 50px;
  }

  .kouzi h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 10px 0px 0px 0px;
  }

  .kouzi2 {
    width: 100%;
    height: 50px;
  }

  .kouzi2 h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 10px 0px 0px 0px;
  }

  .kouzi3 {
    width: 100%;
    height: 50px;
  }

  .kouzi3 h1 {
    font-size: 1.25rem;
    text-align: center;
    font-weight: 500;
    padding: 10px 0px 0px 0px;
  }

  /*説明文*/
  .bana {
    height: 30px;
    font-size: 1rem;
  }

  /*モーダル画像設定*/
  .modal-img img {
    height: 150px;
  }

  /*画像文字*/
  .overlay-text {
    color: white;
    font-size: 0.8rem;
    padding: 5px 10px;
    /* 四角枠の枠が影響 */
  }

  .overlay-text2 {
    height: 10px;
    font-size: 0.5rem;
  }

  /*モーダル*/
  .modal {
    width: 90%;
    /*幅*/
  }

  .modal img {
    width: 150px;
  }

  .modal h3 {
    font-size: 0.5rem;
  }

  /* MOVIEボタン */
  .movie a {
    font-size: 0.5rem;
  }

  /*工事概要表*/
  .kouzi-table {
    font-size: 0.5rem;
  }

  .closebtn2 {
    font-size: 0.5rem;
  }

  footer {
    font-size: 0.8rem;
  }

  /* 記事 */
  .blog-page article {
    width: 100%;
  }

  /* サイド */
  .blog-page aside {
    display: none;
  }

  .blog {
    width: 90%;
    padding: 30px 20px 30px 30px;
  }

  .bana2 {
    font-size: 1.25rem;
  }

  .speech-bubble {
    font-size: 1.2rem;
  }

  .blog h2 {
    font-size: 1rem;
  }

  .blog p {
    font-size: 0.9rem;
    padding: 10px;
    margin: 0;
  }

  .blog h6 {
    font-size: 1rem
  }

  .blog-side {
    padding-top: 10px;
    font-size: 2rem;
    margin-top: 30px;
  }

  .blog-select {
    margin-top: 0;
    margin-bottom: 30px;
  }

  .progress-section {
    display: block;
  }

  .blog figure {
    font-size: 0.5rem;
  }

  /* ブログ選択幅・ドロップダウンメニュー */
  .select-blog {
    width: 60%;
  }

  .blog-home2 h2 {
    font-size: 2rem;
  }

  .blog-home h2 {
    font-size: 2rem;
  }

  .photo-text {
    padding: 1px;
    font-size: 0.9rem;
  }

  .blog-home p {
    margin: 10px 0 0px 0;
    font-size: 0.8rem;
  }

  .tell p {
    font-size: 0.9rem;
  }

  .tell-isami img {
    display: none;
  }

  .tell-isami p {
    padding: 10px;
  }

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

  .map {
    width: 90%;
  }
}