/* ==========================
   ARTICLE
========================== */

.article-page{

    max-width:1200px;

    margin:140px auto 120px;

    padding:0 48px;

}

.back-link{

    display:inline-block;

    color:#fff;

    text-decoration:none;

    margin-bottom:80px;

    font-size:13px;

    letter-spacing:.12em;

    transition:.3s;

}

.back-link:hover{

    opacity:.6;

}


/* ==========================
   HEADER
========================== */

.article-header{

    margin-bottom:40px;

}

.article-category{

    font-size:12px;

    letter-spacing:.15em;

    color:#888;

    text-transform:uppercase;

    margin-bottom:16px;

}

.article-date{

    font-size:14px;

    color:#777;

    margin-bottom:24px;

}

.article-header h1{

    font-size:42px;

    line-height:1.25;

    font-weight:600;

    letter-spacing:.03em;


}


/* ==========================
   HERO IMAGE
========================== */

.article-hero{

    margin-bottom:80px;

}

.article-hero img{

    width:100%;

    display:block;

}


/* ==========================
   BODY
========================== */

.article-body{

    max-width:720px;

}

.article-body p{

    font-size:17px;

    line-height:2;

    color:#ddd;

    margin-bottom:28px;

}

.article-ja{

    margin-top:90px;

}

/* ==========================
   VIDEOS
========================== */

.article-videos{
    margin-top:20px;
}

.article-videos h2{
    font-size:20px;
    margin-bottom:16px;
    letter-spacing:.08em;
}

.video-wrap{
    width:100%;
    max-width:900px;
    margin:0 0 20px;
}

.video-wrap iframe{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    border:0;
}

.video-link{
    margin-bottom:20px;
}

.video-link a{
    display:inline-block;
    border:1px solid #fff;
    padding:12px 20px;
    transition:.3s;
}

.video-link a:hover{
    background:#fff;
    color:#000;
}

.video-wrap.video-vertical {
    max-width:400px;
    margin:0 auto 20px;
}

.video-wrap.video-vertical iframe {
    aspect-ratio:9 / 16;
}


/* ==========================
   GALLERY
========================== */

.article-gallery{
    margin-top:80px;
    margin-bottom:80px;
}

.article-gallery h2{
    font-size:20px;
    margin-bottom:20px;
    letter-spacing:.08em;
}

.gallery-main{
    width:100%;
    margin-bottom:12px;
}

.gallery-main img{
    display:block;
    width:100%;
    height:auto;
}

.gallery-thumbnails{
    display:flex;
    gap:10px;
    overflow-x:auto;
}

.gallery-thumb{
    flex:0 0 90px;
    width:90px;
    height:90px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    opacity:.6;
}

.gallery-thumb.active{
    opacity:1;
}

.gallery-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

.article-page{

    margin:120px auto 80px;

    padding:0 20px;

}

.back-link{

    margin-bottom:60px;

}

.article-header h1{

    font-size:30px;
    line-height:1.2;

}

.article-hero{

    margin-bottom:60px;

}

.article-body{

    max-width:100%;

}

.article-body p{

    font-size:16px;

    line-height:1.9;

}

.article-ja{

    margin-top:70px;

}

.article-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.article-date{

    font-size:14px;

    color:#777;

    margin:0;

}

.article-category{

    font-size:12px;

    letter-spacing:.15em;

    color:#888;

    text-transform:uppercase;

    margin:0;

}

.article-gallery{
    margin-top:60px;
    margin-bottom:60px;
}

.article-gallery h2{
    font-size:18px;
    margin-bottom:16px;
}

.gallery-thumbnails{
    gap:8px;
}

.gallery-thumb{
    flex:0 0 70px;
    width:70px;
    height:70px;
}

/* ==========================
   RELATED LINKS
========================== */

.article-links{
    margin-top:20px;
}

.article-links h2{
    font-size:20px;
    margin-bottom:16px;
    letter-spacing:.08em;
}

.article-link-list{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.article-link-button{
    display:inline-block;
    border:1px solid #fff;
    padding:12px 20px;
    transition:.3s;
}

.article-link-button:hover{
    background:#fff;
    color:#000;
}

}

/* ==========================
   TEXT LINK
========================== */

.article-text-link{
    color:#5aa9ff;
    text-decoration:underline;
    text-underline-offset:4px;
    transition:.3s;
}

.article-text-link:hover{
    opacity:.6;
}