@charset "utf-8";

/* ------------------------------ 全体リセットと基本設定 ------------------------------ */
* {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    /* max-widthではなくwidthに変更して常に枠にフィット */
    height: auto;
    vertical-align: bottom;
}

iframe {
    vertical-align: bottom;
}

body {
    min-width: auto;
    /* 固定幅を解除して可変対応に */
    background-image: url(../images/bg.gif);
    background-size: cover;
    /* 画面全体に拡大・縮小 */
    background-position: center center;
    /* 中央に寄せる */
    background-repeat: no-repeat;
    /* 繰り返さない */
    /* 背景画像 */
}

dd {
    margin-bottom: 20px;
}

/* ------------------------------ コンテンツ全体の枠設定 ------------------------------ */
.contents {
    max-width: 600px;
    /* コンテンツ幅を固定 */
    margin: 0 auto;
    /* 中央寄せ */
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.467);
    /* 影で浮かせる */
    background-color: #fff;
    /* 背景を白に */
}

/* コンテナ（中身を中央にまとめるための枠） */
.container {
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------ ヘッダー部分 ------------------------------ */
h1 {
    width: auto;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav a {
    color: #000;
    text-decoration: none;
    padding: 20px;
    display: block;
}

nav a:hover {
    background-color: #9cf;
}

header {
    background-color: #cf9;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ------------------------------ メインビジュアル部分 ------------------------------ */
.main-visual img {
    width: 100%;
    height: auto;
    display: block;
}



.main-visual p {
    font-size: 20px;
    margin-bottom: 16px;
}





/* ------------------------------ セクション共通 ------------------------------ */
section h2 {
    font-size: 32px;
    margin-bottom: 10px;
    text-align: center;
}

/* ------------------------------ バナー部分 ------------------------------ */
.bnr {
    padding: 0;
}

.bnr ul {
    list-style-type: none;
}

/* ------------------------------ メディア（map）部分 ------------------------------ */
.media {
    background-color: #fff;
    padding: 20px 0;

}

.mediaCard__video {
    background-color: #fc6;
}

.map-address {
    width: 100%;
    max-width: auto;
    /* マップと揃える */
    margin: 0 20px;
    /* 上に余白、左右中央 */
    padding: 20px 0;
}

.map-address h1 {
    margin: 0;
    /* デフォルトの余白を削除 */
    font-size: 24px;
    /* 好きなサイズに調整 */
}

.map-address .btn {
    background-color: #8a288b;
    /* 茶系で温かみ */
    color: #fff;
    padding: 10px 28px;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-block;
}

/* ------------------------------ 施設概要（facility） ------------------------------ */
.facility {
    padding: 50px 0;
    background-color: #fff;
}

.facility .container {
    width: 90%;
    margin: 0 auto;
}

.facility h2 {
    font-size: 32px;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
}

.facility__row dt {
    width: 120px;
    font-weight: 700;
    color: #222;
}

/* CTAボタン */
.facility__cta {
    margin-top: 24px;
}

.facility__cta .btn {
    background-color: #b76b2f;
    /* 茶系で温かみ */
    color: #fff;
    padding: 10px 28px;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-block;
}

.facility__cta .btn:hover {
    background-color: #c5854a;
}

/* ------------------------------ フッター部分（修正版） ------------------------------ */
footer {
    max-width: 600px;
    /* contentsと同じ幅で統一 */
    margin: 0 auto;
    /* はみ出さないよう中央寄せ */
    background-color: rgb(248, 229, 167);
    /* 背景色 */
    padding: 60px 0;
    /* 上下の余白 */
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, .25);
    /* コンテンツと同じ影 */
    border-top: 1px solid #ddd;
    /* 上に区切り線 */
}

/* フッターロゴ中央寄せ */
.footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* フッターナビ */
footer ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* フッターリンク */
footer a {
    color: #000;
    text-decoration: none;
    padding: 0 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    margin-left: -1px;
}

footer a:hover {
    text-decoration: underline;
}

/* コピーライト */
footer p {
    text-align: center;
    margin: 20px 0 0;
}

/* フッターのリストの点を消す */
footer ul {
    list-style-type: none;
    /* デフォルトの黒い点を非表示にする */
    padding: 0;
    /* ul の余白もリセット */
    margin: 0;
    /* ul の余白もリセット */
    display: flex;
    /* 横並びにする場合 */
    justify-content: center;
    /* 中央揃え */
    gap: 20px;
    /* アイテム間の間隔 */
}