@charset "UTF-8";

/* 共通部分 */
html {
    font-size: 100%;
}

body {
    background-color: #222034;
    font-family: 'DotGothic16', sans-serif;
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
}

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

a:visited {
    color: #ffffff;
    text-decoration: none;
}

h1, h2, h3 {
    font-family: 'DotGothic16', sans-serif;
}

.main-title a {
    color: #ffffff;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.main-nav li {
    margin: 10px 20px;
}

.main-nav a {
    color: #dddddd;
}

.main-nav a:hover {
    color: #ffffff;
}

.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0; /* ここで上部の余白を調整 */
}

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 50px; /* ここで背景画像の位置を調整 */
}

#home {
    background-image: url(../images/tamemascene_kari2.png);
    min-height: 55vh;
    background-size: cover;
    background-position: center;
}

#home .page-title {
    text-transform: none;
}

.news-item {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.news-item h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.news-item p {
    margin: 0;
}

.members {
    background-color: #808080;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.member-card {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

footer {
    background: #000000;
    text-align: center;
    padding: 26px 0;
}

footer p {
    color: #ffffff;
    font-size: 0.875rem;
}

@media screen and (max-width: 600px) {
    .main-nav {
        flex-direction: column;
    }

    .main-nav li {
        margin: 5px 0;
    }

    .page-header {
        align-items: center;
    }
}