@charset "utf-8";

html {
    overflow-x: hidden;
}

body {
    background:#0C0C0C url(../img/btm_bg.png) left bottom /contain no-repeat;
}

a {

}

img {
    width:100%;
}

.area__top {
    background:url(../img/top_bg.png) top /cover no-repeat;
}
.area__top .inner {
    margin:0 auto;
    padding:0;
    text-align:center;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    padding:17px 81px;
    background:#1E1E1E;
    border-bottom:1px solid #6A6A6A;
}
.header__inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    width:100%;
}
header .header__inner>div:first-child {
    min-width:242px;
}

header a {

}

header img.logo {
    height:56px;
}

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

header .time {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:32px;
    font-weight:800;
}
.date__time {
    text-align:right;
}
.gradient-text {
    background: linear-gradient(92.52deg, #BF922F -0.07%, #FBF3C1 49.93%, #C59030 99.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.banners {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:7px 0;
    max-width:1200px;
    margin:0 auto;
}
.banners:nth-of-type(1) {
    padding-top:58px;
}
.banners:nth-of-type(3) {
    padding-bottom:58px;
}

.area__mid {
    border-top: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;
    font-weight:800;
}

.area__mid p {
    font-size:38px;
    font-weight:800;
}

.area__btm {
    padding:10px 10px 27px;
}

.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;
    max-width:1420px;
    margin:0 auto;
}

.links {
    border:1px solid rgb(59, 59, 59);
    padding:13px;
    border-radius:4.82px;
    background: linear-gradient(180deg, #202020 0%, #0C0C0C 100%);
}

.links__title {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:20px;
    gap:10px;
    border-bottom:1px solid rgb(59, 59, 59);
    padding-bottom:15px;
}

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

.links__title b {
    font-size:17px;
    background: linear-gradient(92.52deg, #BF922F -0.07%, #FBF3C1 49.93%, #C59030 99.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size:22px;
    font-weight:800;
}

.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:18px;
    font-weight:700;
}


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;
    }
    header .header__inner>div:first-child{
        min-width:200px;
    }
}


@media screen and (max-width: 768px) {
    header .header__inner>div:first-child{
        min-width:auto;
    }
    header>div:first-child{
        min-width:auto;
    }
    header img.logo{
        height:40px;
    }
    header .date{
        font-size:12px;
    }
    header .time{
        font-size:14px;
    }
    header{
        padding:20px 10px;
    }
    .banners:nth-of-type(1){
        padding-top:28px;
    }
    .banners:nth-of-type(3){
        padding-bottom:28px;
    }
    .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:14px;
    }
    .links__title img{
        height:24px;
    }
    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:12px;
    }
    .links a img{
        max-width:24px;
    }
}