@charset "utf-8";

/* bodyのデフォルトを定義 */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', YuGothic, 'Yu Gothic', sans-serif;
}

/* デフォルトのmarginを削除 */
body, h1, h2, h3, p, ul, li {
    margin: 0;
}

/* デフォルトのpaddingを削除 & 要素のリストスタイルを削除 */
ul, ol {
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

/* ここまでリセットCSS */

/* ここからヘッダー関係 */
header {
    height: 70px;
    line-height: 70px;
    position: relative;
    z-index: 3;
    /* .menuをマップや#menu-black-closeよりも上位に配置するため。 */
    background-color: #9EC2C2;
}

#logo {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 100px;
}

#logo img {
    width: 100px;
    height: 70px;
}


/* ここまでヘッダー関係 */

#head {
    text-align: center;
}

#description-h1 {
    display: inline-block;
    text-align: center;
     /*background-color: #f0ede2;*/
}

#description-h2 {
    display: inline-block;
    text-align: center;
    margin-bottom: 70px;
    font-size: 52px;
     /*background-color: #f0ede2;*/
}

.description-box {
    text-align: center;
    margin: 0 20px;
}

.description-box ul {
    margin: 10px 0px 30px 0px;
}


.description-box p {
    display: inline-block;
    text-align: left;
}

#to-map {
    display: block;
    margin: 30px auto;
    width: 100px;
    text-align: center;
    position: relative;
    z-index: 0;
    /* #menu-black-closeと同じ階層に配置するため。 */
    padding: 20px;
    color: white;
    background-color: #E4C1B5;
    border-radius: 22px;
}


/* テーブル全体のスタイル */
table {
    width: 80%;                /* テーブル幅をページの80%に設定 */
    margin: 20px auto;         /* テーブルを中央揃えに */
    border-collapse: collapse; /* セルの間の境界線を消す */
    background-color: #f9f9f9; /* テーブル背景色 */
    font-size: 16px;           /* フォントサイズ */
}

/* テーブルのヘッダー (th) */
table th {
    background-color: #E4C1B5; /* ヘッダーの背景色 */
    color: white;              /* ヘッダーの文字色 */
    padding: 15px;             /* セル内の余白 */
    text-align: center;        /* 中央揃え */
    font-size: 18px;           /* ヘッダーのフォントサイズ */
    border-bottom: 3px solid white; /* セル間にボーダーを設定 */
}

/* テーブルのデータセル (td) */
table td {
    padding: 15px;               /* セル内の余白 */
    text-align: left;             /* 左揃え */
    background-color: #ffffff;    /* データセルの背景色 */
    border-bottom: 1px solid #ddd;/* 下部に細い線を引く */
}

/* テーブル内の画像スタイル */
table td img {
    width: 100%;               /* 画像をセルの幅いっぱいに表示 */
    height: auto;              /* 画像の縦横比を保つ */
    max-width: 300px;          /* 画像の最大幅を300pxに制限 */
    display: block;            /* 画像がブロック要素として表示 */
    margin: 0 auto;            /* 画像を中央に配置 */
}

.btn {
    border-radius: 100vh;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
    margin: 30px
}

.btn a {
display: block;
}

.btn-list {
    display: inline;
    color: white;
    background-color: #E4C1B5;
    font-size: 18px;
    font-weight: 500;
    margin: 2px;
    margin-bottom: 10px;
    text-align: center;
    width: 160px;
    border-radius: 100vh;
}

.btn-list a {
    color: #fff;
    display: block;
}


/* テーブルのレスポンシブ対応 (画面幅が768px以下の場合) */
@media (max-width: 768px) {
    table {
        width: 100%;           /* テーブル幅を100%に */
        font-size: 14px;        /* フォントサイズを少し小さく */
    }

    table th, table td {
        padding: 10px;         /* セルの余白を縮小 */
    }

    table td img {
        max-width: 100%;       /* 画像の幅を親要素に収める */
    }
}


footer {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 10px;
    color: white;
    background-color: #8F6140;
}

@media (min-width: 768px) {


    #description-h1 {
        font-size: 30px;
        margin: 50px 50px;
    }

    .description-box {
        margin: 0 100px;
    }

    .description-box ul {
        margin: 10px 0px 30px 0px;
    }

}

@media (min-width: 1200px) {
    .description-box {
        margin: 0 200px;
    }

    .description-box ul {
        margin: 10px 0px 30px 0px;
    }

    .description-box ul .syurui-icon {
        width: 170px;
        height: 110px;
        margin-right: 11px;
    }

    #modal-content{
        max-height: 500px;
    }

}