@charset "UTF-8";

/* ====================== 
■プロパティの順番
1. レイアウト position, margin, padding, width, height
2. ボックスモデル box-sizing, overflow, border, box-shadow
3. テキスト・フォント font-family, font-size, line-height, color, text-align
4. 背景・装飾 background, background-image, border, opacity
5. トランジション・アニメーション transition, hover, z-index
6. その他
======================== */

html {
    /* Setting base font size 10px相当にする */
    font-size: 62.5%;
}
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: "Hiragino Mincho ProN W3", "Yu Mincho", "serif";
    font-size: 1.6rem; /* rem = root em */
    color:#333333;
    background-image: url("../images/b102.jpg");
    background-repeat: repeat;
    background-color: #fffffc;
}

.page-wrapper {
    margin: 0 auto;
    width: 60%;
    max-width: 1000px;
    min-width: 700px;
    min-height: 100vh;
    box-shadow: 0 0 15px #e2ecec;
    background-color: #fffffb;
}

/* ヘッダー */
.site-logo {
    background-image: url("../images/logo-cat.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 72px auto;
    text-align: right;
    padding: 1rem 0;
    line-height: 0;
    width: 100%;
    height: 72px;
}

.site-title {
    font-size: 2.5rem;
    font-family: "Hiragino Mincho ProN W3", "Yu Mincho", "serif";
    white-space: nowrap;
    margin-top: 30px;
    margin-right: 24px;
}

/* メイン全体 */

main p{
    margin: 16px 32px;
    line-height: 1.6;
}

/* トップ */

.top-image {
    width: 100%;
}

/* メニュー */

.menu-title {
    font-size: 2.2rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: #555555;
}

.menu-description {
    font-size: 1.4rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.4rem;
    color: #777777;
}

.menu-box {
    width: 60%;
    margin: 0 auto;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 80%;
    line-height: 1.8;
}

/* フッター */

footer {
    text-align: center;
    padding: 1rem 0;
    font-size: 1.2rem;
    color: #666666;
}

/* スマホ・タブレット対応 */

@media (max-width: 600px) {
    header {
        font-size: 1.2rem;
        padding: 0.7rem;
    }
    nav {
        font-size: 0.95rem;
        padding: 0.5rem 0.2rem;
    }
    main {
        margin: 1rem 0.2rem;
        padding: 0.7rem;
    }
}