:root {
  --txt-color: #23861F;
}

header {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 1;
    background: white;
}

.top-message-wrapper {
    overflow: hidden;
    margin-top: 60px;
}

.top-message-wrapper > div.top-message {
    background: url(../img/bg_top.png?250328) top center / 100% no-repeat;
    aspect-ratio: 1600/626;
}

.top-message p {
    color: var(--txt-color);
    font-size: 50px;
}

.top-message-wrapper > div.top-comment {
    margin: 15px 0 30px;
    padding: 0 20px;
}

.top-comment p {
    font-size:14px;
    text-align: justify;
}

.top-comment p + p {
    margin-top: 1em;
}


@media screen and (max-width: 768px){
    .top-message p {
        font-size: 31px;
    }
}

@media screen and (max-width: 500px){
    .top-message-wrapper > div.top-message {
        background: url(../img/bg_top_sp.png?240122b) center top / 100% no-repeat;
        aspect-ratio: 750/423;
    }
    .top-message p {
        font-size: 26px;
    }
}

@media screen and (max-width: 414px){
    .top-message-wrapper {
    }
    .top-message p {
        font-size: 18px;
    }
    .top-message-wrapper > div.top-comment {
        /* margin-top:35px; */
    }
}

.top-sns {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    gap: 4px;
}

.top-sns li img {
    width: 38px;
}

.top-sns li:first-child {
    scale:.87;
}

.top-sns li:last-child {
    margin-left: 0.4em;
}

.top-summary dl {
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}

.top-summary dl dt {
    font-weight: normal;
    width: 210px;
    text-align: left;
}

.top-summary dl dt, .top-summary dl dd {
    padding: 18px;
    box-sizing: border-box;
}

.top-summary dl dt {
    border-top: 2px solid #ccc;
    width: 100%;
    background: #EEE;
}

.top-summary dl dd {
    border-width: 1px 0px 0px 1px;
}

.top-news {
    margin: 20px 20px 40px;
}

.top-news h2 {
    text-align:center;
    color:var(--txt-color);
    font-size: 18px;
    font-weight: normal;
    padding-top: 10px;
}

.top-news ul {
    border:solid var(--txt-color);
    border-width:1px 0;
    margin: 20px auto 0;
    max-width:700px;
}

.top-news ul li {
    display:flex;
    gap:15px;
    padding:15px;
}

.top-news ul li + li {
    border-top:1px solid var(--txt-color);
}

.top-news ul li .news-date {
    color:var(--txt-color);
}

@media screen and (max-width: 500px){
    .top-news ul li {
        flex-direction:column;
        gap:5px;
        padding:15px 0;
    }
}

.top-news ul li .news-date {
    color:var(--txt-color);
}

.top-news ul li .news-content a {
    color:black;
}

.top-news ul li .news-content a:hover {
    text-decoration: underline;
}


.pagination {

    padding:0 20px 0;
}

/*------------------------------------------------*/

.top-banner {
    display: flex;
    gap: 25px 35px;
    margin:auto;
    max-width: 1080px;
    padding: 0 20px;
    box-sizing: border-box;
}

.top-banner img {
    width:100%;
}

@media (max-width: 600px){
    .top-banner {
        flex-direction:column;
        max-width:340px;
    }
}