/* -------------------------------base(mobile)↓-------------------------------------- */
/* h1 start */
h1::before{
    content: "News";
    z-index: -1;
}
/* h1 end */

/* news start */
.main-wrap{
    margin-top: calc(calc(408 - 168 - 120) * var(--site-horizontal-ratio));
}
.news{
    display: flex;
    flex-wrap: wrap;
    gap: calc(30 * var(--site-horizontal-ratio));
}
.news>a{
    width: 100%;
    text-decoration: none;
    color: #ffffff;
}
.news>a>*{
    width: 100%;
}
.news>a>div:nth-of-type(1){
    height: calc(189 * var(--site-horizontal-ratio));
    position: relative;
    overflow: hidden;
}
.news>a>div:nth-of-type(1)>img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%);
}
.news>a>time{
    margin-top: calc(10 * var(--site-horizontal-ratio));
    display: block;
    font-family: var(--site-font-family-Bayon);
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(25.29 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.news>a>p{
    font-weight: 500;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(24 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.news-pages{
    margin-top: calc(30 * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: nowrap;
    gap: calc(3.5 * var(--site-horizontal-ratio));
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(20 * var(--site-horizontal-ratio));
    line-height: calc(24 * var(--site-horizontal-ratio));
    letter-spacing: 0.25em;
}
.news-pages>a{
    text-decoration: none;
    color: #ffffff;
}
.news-pages>a.current{
    color: #C01C1C;
    pointer-events: none;
}
/* news end */

/* pickup start */
.pickup{
    display: flex;
    flex-wrap: wrap;
    gap: calc(30 * var(--site-horizontal-ratio));
    position: relative;
    margin-top: calc(50 * var(--site-horizontal-ratio));
    padding-top: calc(calc(3021 - 2957 - 24) * var(--site-horizontal-ratio));
}
.pickup::before{
    content: "PICKUP";
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(24 * var(--site-horizontal-ratio));
    line-height: calc(24 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.pickup>a{
    width: 100%;
    color: #ffffff;
    text-decoration: none;
}
.pickup>a>*{
    width: 100%;
}
.pickup>a>div:nth-of-type(1){
    height: calc(189 * var(--site-horizontal-ratio));
    position: relative;
    overflow: hidden;
}
.pickup>a>div:nth-of-type(1)>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pickup>a>time{
    margin-top: calc(10 * var(--site-horizontal-ratio));
    display: block;
    font-family: var(--site-font-family-Bayon);
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(25.29 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.pickup>a>p{
    font-weight: 500;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(24 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
/* pickup end */

/*== landscape responsive ==*/
@media screen and (max-width: 767px) and (orientation: landscape){
}
/*== landscape responsive ==*/
/* -------------------------------base(mobile)↑-------------------------------------- */

/* ---------------------------desktop(include ipad)↓--------------------------------- */
@media screen and (min-width: 768px){
    /* news start */
    .main-wrap{
        margin-top: calc(calc(520 - 140 - 265) * var(--site-horizontal-ratio));
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: calc(calc(1031 - 171 - 800) * var(--site-horizontal-ratio));
    }
    .news{
        width: calc(800 * var(--site-horizontal-ratio));
    }
    .news>a{
        display: grid;
        grid-template-areas: 
            "news-img news-time"     
            "news-img news-p";
        grid-template-columns: calc(240 * var(--site-horizontal-ratio)) 1fr;
        column-gap: calc(30 * var(--site-horizontal-ratio));
    }
    .news>a:first-child~li{
        padding-top: calc(30 * var(--site-horizontal-ratio));
        border-top: 1px solid #666666;
    }
    .news>a>div:nth-of-type(1){
        grid-area: news-img;
        height: calc(135.2 * var(--site-horizontal-ratio));
    }
    .news>a>time{
        grid-area: news-time;
        margin-top: 0;
        align-self: flex-end;
    }
    .news>a>p{
        grid-area: news-p;
        line-height: calc(32 * var(--site-horizontal-ratio));
    }
    .news-pages{
        margin-top: calc(calc(2082 - 520 - 1501.6) * var(--site-horizontal-ratio));
        letter-spacing: 0.4em;
        gap: calc(8 * var(--site-horizontal-ratio));
    }
    .news-pages>a{
        cursor: pointer;
    }
    /* news end */

    /* pickup start */
    .pickup{
        width: calc(240 * var(--site-horizontal-ratio));
        margin-top: 0;
        gap: calc(calc(826 - 558 - 236) * var(--site-horizontal-ratio));
    }
    .pickup::before{
        transform: initial;
        left: 0;
        font-family: var(--site-font-family-Bison);
        font-weight: 400;
        font-size: calc(20 * var(--site-horizontal-ratio));
        line-height: calc(20 * var(--site-horizontal-ratio));
    }
    .pickup>a>div:nth-of-type(1){
        height: calc(135.2 * var(--site-horizontal-ratio));
    }
    .pickup>a>time{
        margin-top: calc(12 * var(--site-horizontal-ratio));
    }
    .pickup>a>p{
        line-height: calc(32 * var(--site-horizontal-ratio));
    }
    /* pickup end */
}

@media screen and (min-width: 1960px){

}
/* ---------------------------desktop(include ipad)↑--------------------------------- */