/* 基本スタイル */
body {
    font-family: '游明朝', 'MS Mincho', serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

/* ヘッダー専用スタイル */
header {
    background-color: #444;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/* メインコンテンツ */
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* セクションスタイル */
section {
    margin-bottom: 40px;
}

section h2 {
    font-size: 24px;
    color: #444;
    margin-bottom: 15px;
    text-align: center; /* 中央揃え */
}

section p {
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center; /* 中央揃え */
}

/* 戻るリンクボタンのスタイル */
.back-to-top {
    display: inline-block; /* ボタン風に表示 */
    margin: 10px auto; /* 上下の余白を追加 */
    padding: 10px 20px; /* ボタン内の余白を調整 */
    background-color: #444; /* 背景色 */
    color: #fff; /* 文字色 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* ボタンの角を丸くする */
    font-size: 14px; /* フォントサイズ */
    text-align: center; /* 中央揃え */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* ボタンに影を追加 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

.back-to-top:hover {
    background-color: #666;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5);
}

/* フッタースタイル */
footer {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

footer a.back-to-top {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
    font-size: 16px;
    transition: color 0.3s ease;
}

footer a.back-to-top:hover {
    color: #ddd;
}

/* スライドショースタイル */
.slideshow-container {
    position: relative;
    max-width: 100%; /* スライドショー全体の幅をページ幅に合わせる */
    height: auto; /* 高さを自動調整 */
    aspect-ratio: 16 / 9; /* 幅と高さの比率を設定（16:9の場合） */
    overflow: hidden; /* 枠外のコンテンツを隠す */
    margin: 20px auto; /* スライドショーを中央揃え */
}

.slide {
    display: none; /* 非表示状態 */
    width: 100%; /* スライドの幅を親コンテナに合わせる */
    height: auto; /* 高さをコンテンツに合わせる */
}

.slide img {
    width: 100%; /* 画像の幅をスライドコンテナに合わせる */
    height: auto; /* 縦横比を保持 */
    object-fit: contain; /* 画像全体を収める（余白が発生する場合あり） */
}

.slide:first-child {
    display: block; /* 最初のスライドを表示 */
}
.slideshow-container {
    position: relative;
    max-width: 100%;
    height: 400px; /* 必要に応じて高さを調整 */
    overflow: hidden;
    margin: 20px auto;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をスライド枠にぴったりフィット */
    object-position: center; /* 中央部分を表示 */
}

.slide:first-child {
    display: block; /* 最初のスライドを表示 */
}
#contact-info {
    text-align: center;
    margin-bottom: 40px;
}

#contact-info p {
    font-size: 16px;
    margin: 10px 0;
    color: #333;
}

#map {
    margin: 40px auto;
    max-width: 1200px;
    text-align: center;
}

#map iframe {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* サブCSS (construction.css) に追加する例 */
#contact-info {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

#map iframe {
    max-width: 100%; /* ページ幅に合わせる */
    height: 400px;   /* 高さを固定 */
    border: 0;       /* 枠線をなくす */
}