/* ============================================ */
/* index.css ― トップ分岐ページ 専用             */
/* 見た目維持＋レスポンシブ対応（B方針）           */
/* ============================================ */

/* ===== 全体土台 ===== */
body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: #333;
}

/* リンク色（元の指定を踏襲） */
a:link    { color: #666666; }
a:visited { color: #666666; }
a:active  { color: #666666; }
a:hover   { color: #557da9; }

/* 中央寄せの土台 */
.top-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 10px;
    box-sizing: border-box;
    text-align: center;
}

/* ===== 文字サイズ（元の font-size:150%/120% を踏襲） ===== */
.big150 { font-size: 150%; }
.big120 { font-size: 120%; }

/* 緑色（ログインの「こちら」） */
.green  { color: #00cc00; }
/* 緑色（予約日付） */
.green2 { color: #009900; }

/* ===== タイトル画像 ===== */
.top-title {
    margin-bottom: 30px;
}
.top-title img {
    width: 100%;
    max-width: 756px;   /* 元画像サイズ */
    height: auto;
}

/* ===== 洲本／五色 分岐 ===== */
.branch {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 600px;       /* 元のtable幅600pxを踏襲 */
    margin: 0 auto 30px;
}
.branch-item {
    flex: 1;
    min-width: 250px;
    max-width: 300px;       /* 元のtd幅300pxを踏襲 */
}
.branch-item a {
    display: block;
    text-decoration: none;
}
.branch-item img {
    width: 100%;
    height: auto;
    border: 0;
}
.branch-text {
    display: block;
    margin-top: 8px;
}

/* ===== ログイン案内 ===== */
.login-info {
    margin: 20px auto;
    line-height: 1.8;
}
.login-info p {
    margin: 12px 0;
}

/* ===== テレホン・ライブラリー ===== */
.tel-info {
    margin: 30px auto;
}

/* ===== 予約について ===== */
.yoyaku-info {
    margin: 40px auto;
    line-height: 1.7;
}
.yoyaku-head {
    margin-bottom: 12px;
}
.yoyaku-body {
    margin: 0 0 15px 0;
}
.yoyaku-date {
    margin: 15px 0;
    font-weight: bold;
}

/* ===== メニューボタン（グリッド） ===== */
.top-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* PC：2列（元と同じ） */
    gap: 12px;
    justify-items: center;
    max-width: 540px;       /* 250px×2＋gap 相当 */
    margin: 30px auto;
}
.top-menu-grid a {
    display: block;
    width: 100%;
    max-width: 250px;
}
.top-menu-grid img {
    width: 100%;
    max-width: 250px;       /* 元画像サイズ */
    height: auto;
    border: 0;
}
/* 7個目（リンク集）を左寄せに（元レイアウト：左下に単独） */
.menu-last {
    grid-column: 1;         /* 左列に配置 */
}

/* ===== 下部の区切り線 ===== */
.bottom-line {
    width: 100%;
    max-width: 800px;       /* 元の width="800" を踏襲 */
    margin: 40px auto 20px;
    border: 0;
    border-top: 1px solid #ccc;
}

/* ============================================ */
/* スマホ対応                                     */
/* ============================================ */
@media (max-width: 600px) {
    /* 分岐を縦並びに */
    .branch {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .branch-item {
        width: 100%;
        max-width: 300px;
    }
    /* メニューボタンを1列に */
    .top-menu-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
    }
    /* 7個目も通常の流れに戻す */
    .menu-last {
        grid-column: auto;
    }
    /* 文字を少し控えめに（150%→130%相当） */
    .big150 { font-size: 130%; }
    .big120 { font-size: 110%; }
}