@charset "UTF-8";

body{
    background: url(../images/news_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    min-height:100vh;
}
#menu{
    top: 6%;
}
header{
    background: #000;
    /*border-bottom: 1px solid #fff;*/
}
header h1 img{
    width:60px;
}
main.content{
    max-width: 1020px;
    width: 100%;
    margin: 30px auto 0;
    padding: 3rem 6rem 6rem;
    overflow: hidden;
    z-index: 2;
    position: relative;
}
main h2.maintitle{
    color:#fff;
    font-family: "aptos",sans-serif;
    font-size: 3.2em;
    width:100%;
    text-align:center;
    margin:0 auto 6%;
    padding:0 0 20px;
}
/*main h2.maintitle span{
    font-size: 0.4em;
    margin: 40px auto 0;
}*/
main .main_inner{
    background:#fff;
    display:flex;
    flex-wrap:wrap;
    margin:0 auto 5%;
}
main .main_inner dt{
    background:#ccc;
    border-bottom:1px solid #666;
    width:20%;
    padding:20px;
}
main .main_inner dd{
    border-bottom:1px solid #666;
    width:80%;
    padding:20px;
}
main .main_inner .end{
    border-bottom:0;
}
main .map{
    height:420px;
    width:100%;
}
#newsList{
    background: #fff;
    padding: 3rem 2rem;
    line-height: 1.8em;
}
#newsList h2{
    color:#333;
    /*background: #eee;*/
    border-bottom: 1px solid #eee;
    width: 100%;
    margin: 0px auto 1%;
    padding: 10px 20px;
    font-size: 1.2em;
    text-align: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#newsList #up_ymd{
    /*border-bottom: 1px solid #eee;*/
    font-size: 0.9em;
    text-align: right;
    padding: 0 0 10px;
    margin: 0 0 2em;
}
#newsList .backORcloseBtn{
    text-align: center;
    width: 100%;
    margin: 3% auto 1%;
}
#newsList .backORcloseBtn a{
    font-size: 0.9em;
    background: #eee;
    padding: 3px 10px;
}
#newsList ul{
    border-bottom: 1px solid #eee;
    display:flex;
    flex-wrap:wrap;
    width: 100%;
    padding: 0px;
}
#newsList ul:not(:last-child){
    margin: 0 auto 3%;
    padding:0 0;
}
#newsList ul li.up_ymd{
    width:20%;
    margin: 0px auto 1%;
    padding:10px;
}
#newsList ul li.title{
    width:80%;
    margin: 0px auto 1%;
    padding:10px;
    transition: all ease 0.8s;
    position: relative;
    display:inline-flex;
    flex-wrap:wrap;
    align-items: center;
}
#newsList ul li.title a:hover{
    font-weight:500;
    text-decoration:underline;
}
#newsList ul li.comment{
    width:100%;
    padding: 10px 20px;
}
#newsList ul li.title .newMark,
#newsList h2 .newMark{
    font-size: 0.7em;
    background: #ccc;
    padding: 10px 10px;
    margin: 0 0 0 10px;
    width: fit-content;
    height: 10px;
    display: flex;
    align-items: center;
}


@media all and (min-width:769px){

}
@media all and (max-width:768px){
    main h2.maintitle{
        font-size: 1.8em;
        display: block;
    }
    main.content{
        padding: 3rem 1rem 3rem;
    }
    main .main_inner dt{
        width:16%;
    }
    main .main_inner dd{
        width:84%;
    }
    #newsList{
        padding: 2rem 1rem;
    }
    #newsList .backORcloseBtn{
        margin:12% auto 1%;
    }
    #newsList ul li.up_ymd,
    #newsList ul li.title{
        margin:0 auto;
        width:100%;
    }
    #newsList ul li.up_ymd{
        padding: 10px 10px 0 10px;
    }
    #newsList ul li.comment{
        padding:10px 0;
    }
    footer{
        padding: 8% 0;
    }
    #newsList ul li.title{
        padding: 10px 10px 10px 10px;
    }
    #newsList h2{
        display: block;
    }
    #newsList h2 .newMark{
        display: inline-flex;
    }
}