@charset "utf-8";

html {
    overflow-x: hidden;
}

body {
    background: linear-gradient(90deg, #0B1120 0%, #232632 50%, #0B1120 100%);
}

a {

}

img {
    width:100%;
}

.area__top {
    background:url(../img/top_bg_center.png) top /contain no-repeat,
    url(../img/top_bg.png) top /cover no-repeat;
}
.area__top .inner {
    max-width:1200px;
    margin:0 auto;
    padding:27px 0;
    text-align:center;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    padding:0 20px;
}

header>div:first-child {
    min-width:230px;
}

header a {

}

header img.logo {
    height:100px;
}

header .date {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:21px;
}

header .time {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:30px;
}

.area__top > a {

}

.banners {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5px;
    margin-bottom:5px;
    padding:0 10px;
}

.banners a {
    width:100%;
}

.banners img {
}

.area__mid {
    border-top:1px solid #757575;
    border-bottom:1px solid #757575;
    padding:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.area__mid img {
    max-width:70px;
}

.area__mid span {
    font-size:25px;
}

.area__mid p {
    color:#FFE033;
    font-size:37px;
}

.area__btm {
    max-width:1420px;
    margin:0 auto;
    padding:27px 10px;
}

.sns {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin-bottom:40px;
}

.sns a {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}

.sns img {
    max-width:52px;
}

.sns span {
    font-size:18px;
}

.wrapper__links {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:40px 20px;
}

.links {
    border:2px solid #757575;
    padding:17px 16px;
    border-radius:4.82px;
}

.links__title {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:20px;
    gap:10px;
}

.links__title img {
    height:28px;
    width:auto;
}

.links__title b {
    font-size:24px;
}

.links a {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    margin-bottom:16px;
}
.links a:last-child {
    margin-bottom:0;
}
.links a img {
    min-width:28px;
    max-width:28px;
    height:auto;
}

.links a span {
    font-size:20px;
    font-family: 'Freesentation', sans-serif;
}


footer {
    text-align:center;
    padding:20px 0 100px;
}
footer a {}
footer a img {
    max-width:158px;
}
footer p {
    display:flex;
    justify-content:center;
    align-tiems:center;
    gap:5px;
    margin-top:5px;
}
footer p span {
    font-size:18px;
}
footer p img {
    height:20px;
    min-width:20px;
    max-width:20px;
}

.br__footer{
    display:none;
}


@media screen and (max-width:1400px) {
    .sns {
        gap:1%;
    }
    .wrapper__links{
        gap:20px 1%;
    }
}

@media screen and (max-width:1200px) {
    .sns img{
        max-width:30px;
    }
    .links a span{
        font-size:17px;
    }
}

@media screen and (max-width:991px) {
    .sns img{
        max-width:20px;
    }
    .links a span{
        font-size:14px;
    }
    .wrapper__links{
        grid-template-columns:repeat(4, 1fr);
    }
    .sns span{
        font-size:12px;
    }
    .links__title img{
        height:24px;
    }
}


@media screen and (max-width: 768px) {
    header>div:first-child{
        min-width:auto;
    }
    header img.logo{
        height:50px;
    }
    header .date{
        font-size:12px;
    }
    header .time{
        font-size:14px;
    }
    header{
        padding:0 10px;
    }
    .banners{
        padding:0;
        flex-wrap:wrap;
    }
    .area__mid{
        display:block;
    }
    .area__mid img{
        display:block;
    }
    .area__mid span{
        font-size:20px;
    }
    .area__mid p{
        font-size:24px;
    }
    .sns{
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:10px;
    }
    .sns a{
        width:calc(33.3333% - 10px);
        justify-content:flex-start;
        gap:6px;
    }
    .wrapper__links{
        grid-template-columns:repeat(2, 1fr);
        gap:20px 10px;
    }
    .links{
        padding:10px 5px;
    }
    .links__title{
        justify-content:flex-start;
    }
    .links__title b{
        font-size:17px;
    }
    .links__title img{
        height:14px;
    }
    footer a img {
        max-width:120px;
    }
    footer p{
        flex-wrap:wrap;
        margin-top:20px;
    }
    footer p span{
        font-size:12px;
        display:block;
    }
    footer p span:first-child {
        width:100%;
    }
    .br__footer {
        display:block;
    }
    footer p img{
        height:14px;
        min-width:14px;
        max-width:14px;
    }
    .links a span{
        font-size:14px;
    }
    .links a img{
        max-width:24px;
    }
}