body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  background: url('images/background.png') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

header {
  background: rgba(44, 62, 80, 0.7); /* 半透明 */
  color: #fff;
  padding: 15px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}


header h1 {
    font-size: 2.2em; /* PC版は大きめ */
    font-weight: bold;
    margin: 0;
    line-height: 1.15;
}

/* スマホ版（幅768px以下） */
@media (max-width: 768px) {
    header h1 {
        font-size: clamp(0.5em, 6vw, 1.2em); /* 最小1em～最大2emで自動調整 */
        white-space: nowrap; /* 改行を防ぐ */
    }
}

header h2 {
    font-size: 1.8em; /* サブタイトルは少し小さめ */
    margin: 4px 0 0 0;
    line-height: 1.2;
}

/* スマホ版（幅768px以下） */
@media (max-width: 768px) {
    header h2 {
        font-size: clamp(0.3em, 6vw, 0.8em); /* 最小0.3em～最大0.6emで自動調整 */
        white-space: nowrap; /* 改行を防ぐ */
    }
}

header h3 {
    font-size: 1.4em; /* サブサブタイトルはより小さめ */
    margin: 2px 0 0 0;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* スマホ版（幅768px以下） */
@media (max-width: 768px) {
    header h3 {
        font-size: clamp(0.1em, 6vw, 0.7em); /* 最小0.1em～最大0.6emで自動調整 */
        white-space: nowrap; /* 改行を防ぐ */
    }
}



.image-text {
    text-align: center; /* 中央揃え */
    margin-top: 15px; /* 画像との間隔 */
    color: #222; /* 濃い文字色 */
    font-family: 'BIZ UDP明朝 Medium', 'BIZ UDP明朝', serif; /* フォント指定 */
}

.image-text h2 {
    font-size: 2.2em; /* タイトルを大きめに */    
    margin: 0;
}

.image-text p {
    font-size: 1.0em; /* サブタイトル */
    margin: 5px 0 0;
}


.card, table {
  background: rgba(255, 255, 255, 0.95); /* ほぼ白で視認性UP */
  color: #222; /* 濃い文字色 */
  text-shadow: none; /* 影を消してクリアに */
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* ナビゲーションリンク */
nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}
nav a:hover {
  color: #1abc9c;
}

@media (max-width: 768px) {
    nav a {
    font-size: clamp(0.1em, 6vw, 0.7em); /* 最小0.1em～最大0.6emで自動調整 */
    font-size: 12px;
    margin: 0 5px;
    white-space: nowrap; /* 改行を防ぐ */

    }
}

section {
    scroll-margin-top: 200px; /* ヘッダー高さ分の余白 */
}


main {
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
}

html {
    scroll-behavior: smooth;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.image-grid img {
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
}

.completion-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.map-container {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}


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

.slideshow-wrapper {
    display: flex;
    transition: transform 1s ease-in-out;
}

.slideshow-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover; /* 縦潰れ防止 */
    flex-shrink: 0;
    border-radius: 10px;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
}

/* 工事概要 */
#about table {
    width: 100%;
    border-collapse: collapse;
}

#about th, #about td {
    padding: 8px;
    text-align: left;
    font-size: 1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    #about table {
        display: block;
        overflow-x: auto; /* 横スクロール可能に */
        white-space: nowrap; /* 折り返し防止 */
    }
}



/* お問い合わせ */
#contact table {
    width: 100%;
    border-collapse: collapse;
}

#contact th, #contact td {
    padding: 8px;
    text-align: left;
    font-size: 1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    #contact table {
        display: block;
        overflow-x: auto; /* 横スクロール可能に */
        white-space: nowrap; /* 折り返し防止 */
    }
}





/* リンク集 */

/* ボタンコンテナ */
.button-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* 横並びが崩れたら折り返し */
    margin-top: 20px;
}

/* 共通ボタンスタイル */
.btn-link {
    display: block;
    width: 250px;  /* PCでの横幅 */
    height: 90px; /* PCでの高さ */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.btn-link:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* 1つ目のボタン */
.btn-link.first {
    background-image: url('images/button-bg1.jpg');
}

/* 2つ目のボタン */
.btn-link.second {
    background-image: url('images/button-bg2.jpg');
}

/* 3つ目のボタン */
.btn-link.third {
    background-image: url('images/button-bg3.jpg');
}

/* 4つ目のボタン */
.btn-link.forth {
    background-image: url('images/button-bg4.jpg');
}

/* 5つ目のボタン */
.btn-link.fifth {
    background-image: url('images/button-bg5.jpg');
}

/* 6つ目のボタン */
.btn-link.sixth {
    background-image: url('images/button-bg6.jpg');
}


/* レスポンシブ対応（スマホ） */
@media (max-width: 768px) {
    .btn-link {
        width: 90%;  /* 画面幅に合わせる */
        height: 80px; /* 高さを少し縮小 */
    }
}



#prevBtn { left: 10px; }
#nextBtn { right: 10px; }