@charset "utf-8";

/*==============================
    page top（NEWS）
==============================*/
.indexNews .secPageTop .pageTopBg,
.detailsNews .secPageTop .pageTopBg{
    background-image:url("../img/news/bgPageTop.jpg");
}
.indexNews .secPageTop .pageTopTit,
.detailsNews .secPageTop .pageTopTit{
    margin-top:6.6rem;
}

@media only screen and (max-width:1215px){
    .indexNews .secPageTop .pageTopBg,
    .detailsNews .secPageTop .pageTopBg{
        background-image:url("../img/news/bgPageTopSp.jpg");
    }
    .indexNews .secPageTop .pageTopTit,
    .detailsNews .secPageTop .pageTopTit{
        margin-top:0;
    }
}

/*==============================
    secNewsList
==============================*/
.indexNews main,
.detailsNews main{
    background:var(--bgColorBeigeLight2);
}
.secNewsList{
    padding:5.3rem 0 15rem;
}
.secNewsList .newsList{
    margin:0 0 8rem;
    padding:0;
    list-style:none;
}
.secNewsList .newsListItem{
    border-bottom:1px solid var(--borderColorBeige);
}
.secNewsList .newsItem{
    display:flex;
    align-items:center;
    gap:3.1rem;
    padding:3rem 0;
}
.secNewsList .newsItemImg{
    flex-shrink:0;
    overflow:hidden;
    width:18rem;
    aspect-ratio:180 / 120;
}
.secNewsList .newsItemImg img{
    transition:transform 0.4s ease-out;
}
.secNewsList .newsItem:hover .newsItemImg img{
    transform:scale(1.05);
}
.secNewsList .newsItemBody{
    flex:1 1 auto;
    min-width:0;
}
.secNewsList .newsItemMeta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.8rem 1.5rem;
    margin:0 0 0.9rem;
    font-size:var(--pcFontSize13);
    line-height:calc(20 / 13);
    letter-spacing:var(--pcLetterSpacing40);
    color:var(--bgColorDarkGray);
}
.secNewsList .newsItemCat{
    position:relative;
    padding:0 1.2rem 0 0;
}
.secNewsList .newsItemCat::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:1px;
    height:1em;
    margin:auto 0;
    background:var(--borderColor);
}
.secNewsList .newsItemTit{
    display:-webkit-box;
    overflow:hidden;
    margin:0;
    font-size:var(--pcFontSize15);
    font-weight:700;
    line-height:calc(24 / 15);
    letter-spacing:var(--pcLetterSpacing40);
    color:var(--textColor);
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.secNewsList .newsItemNew{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    min-width:4.4rem;
    height:2.4rem;
    padding:0 0.8rem;
    border-radius:0.3rem;
    background:var(--bgColorNew);
    font-size:var(--pcFontSize11);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--pcLetterSpacing20);
    color:var(--textColor);
}

@media only screen and (max-width:1215px){
    .secNewsList{
        padding:2.5rem 0 3rem;
    }
    .secNewsList .newsList{
        margin:0 0 4rem;
    }
    .secNewsList .newsItem{
        align-items:stretch;
        gap:1.5rem;
        padding:1.5rem 0;
    }
    .secNewsList .newsItemImg{
        align-self:flex-start;
        width:calc((120 / 375) * var(--widthBase));
    }
    .secNewsList .newsItemBody{
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .secNewsList .newsItem:hover .newsItemImg img{
        transform:none;
    }
    .secNewsList .newsItemMeta{
        gap:0.6rem 0.8rem;
        margin:0 0 0.8rem;
        font-size:var(--spFontSize11);
        line-height:calc(18 / 11);
        letter-spacing:0;
    }
    .secNewsList .newsItemCat{
        padding:0 0.8rem 0 0;
    }
    .secNewsList .newsItemTit{
        font-size:var(--spFontSize12);
        line-height:calc(20 / 12);
        letter-spacing:0;
        -webkit-line-clamp:3;
    }
    .secNewsList .newsItemNew{
        min-width:3rem;
        height:1.6rem;
        padding:0 0.5rem;
        font-size:var(--spFontSize8);
        letter-spacing:0;
    }
}

/*==============================
    secNewsDetail
==============================*/
.secNewsDetail{
    padding:8.4rem 0 15rem;
}
.newsDetailHead{
    margin:0 0 4.5rem;
    padding:0 0 2.9rem;
    border-bottom:1px solid var(--borderColorBeige);
}
.newsDetailMeta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.8rem 1.2rem;
    margin:0 0 2rem;
    font-size:var(--pcFontSize15);
    line-height:calc(24 / 15);
    letter-spacing:var(--pcLetterSpacing40);
    color:var(--bgColorDarkGray);
}
.newsDetailCat{
    position:relative;
    padding:0 1.2rem 0 0;
}
.newsDetailCat::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:1px;
    height:1em;
    margin:auto 0;
    background:var(--borderColor);
}
.newsDetailNew{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    min-width:4.4rem;
    height:2.4rem;
    padding:0 0.8rem;
    border-radius:0.3rem;
    background:var(--bgColorNew);
    font-size:var(--pcFontSize11);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--pcLetterSpacing20);
    color:var(--textColor);
}
.newsDetailTit{
    margin:0;
    font-size:var(--pcFontSize30);
    font-weight:500;
    line-height:calc(48 / 30);
    letter-spacing:var(--pcLetterSpacing40);
}
.newsDetailBody{
    margin:0 0 12rem;
}
.newsDetailMovie{
    margin:0 0 22rem;
}
.newsDetailMovieInner{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    width:100%;
    height: 66rem;
    padding: 7.1rem 0 0;
    max-width:100%;
    margin:0 auto;
    background:var(--btnCatalogBg);
}
.newsDetailMovieHead{
    text-align:center;
    color:var(--textColorWhite);
}
.newsDetailMovieHeadEn{
    display:block;
    font-size:var(--pcFontSize50);
    font-weight:bold;
    letter-spacing:var(--pcLetterSpacing40);
}
.newsDetailMovieHeadJa{
    display:block;
    margin:1rem 0 0;
    font-size:var(--pcFontSize18);
}
.newsDetailMovieFrame{
    position:relative;
    z-index:1;
    flex:0 0 56.3rem;
    flex-shrink:0;
    overflow:hidden;
    width:100rem;
    height:56.3rem;
    max-width:100%;
    margin:5rem auto -10rem;
    background:var(--bgColorDark);
}
.newsDetailMovieFrame p{
    margin:0;
    height:100%;
}
.newsDetailMovieFrame iframe{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
}
.newsDetailMovieFrame.isReady iframe{
    pointer-events:none;
}
.newsDetailMovieFrame.isPlaying iframe{
    pointer-events:auto;
}
.newsDetailMovieCover{
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    -webkit-appearance:none;
    appearance:none;
    background:transparent;
    cursor:pointer;
}
.newsDetailMovieCover::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:8.8rem;
    height:8.8rem;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    box-shadow:0 0 0 1.4rem rgba(255,255,255,0.28), 0 0.4rem 2.4rem rgba(0,0,0,0.18);
    transform:translate(-50%,-50%);
    transition:transform 0.3s ease, background 0.3s ease;
}
.newsDetailMovieCover::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-style:solid;
    border-width:1.4rem 0 1.4rem 2.4rem;
    border-color:transparent transparent transparent var(--bgColorDarkGray);
    transform:translate(-35%,-50%);
}
.newsDetailMovieCover:hover::before{
    background:#fff;
    transform:translate(-50%,-50%) scale(1.06);
}
.newsDetailMovieFrame.isPlaying .newsDetailMovieCover{
    display:none;
}
.newsDetailBack{
    text-align:center;
    padding:6rem 0 0;
    border-top:1px solid var(--borderColorBeige);
}
.newsDetailBackBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:28rem;
    height:6.5rem;
    padding:0 3rem;
    border:none;
    border-radius:10rem;
    background:var(--bgColor);
    color:var(--textColor);
    font-size:var(--pcFontSize15);
    letter-spacing:var(--pcLetterSpacing40);
    font-weight:bold;
    text-decoration:none;
}
.newsDetailBackIco{
    position:absolute;
    top:50%;
    left:3rem;
    width:1.7rem;
    height:auto;
    transform:translateY(-50%);
    filter:brightness(0);
}

@media only screen and (max-width:1215px){
    .secNewsDetail{
        padding:3rem 0 3rem;
    }
    .newsDetailHead{
        margin:0 0 3rem;
    }
    .newsDetailMeta{
        gap:0.6rem 0.8rem;
        margin:0 0 1.4rem;
        font-size:var(--spFontSize11);
        line-height:calc(18 / 11);
        letter-spacing:0;
    }
    .newsDetailCat{
        padding:0 0.8rem 0 0;
    }
    .newsDetailNew{
        min-width:3.4rem;
        height:1.6rem;
        padding:0 0.5rem;
        font-size:var(--spFontSize10);
        letter-spacing:0;
    }
    .newsDetailTit{
        font-size:var(--spFontSize16);
        line-height:calc(26 / 16);
        letter-spacing:0;
    }
    .newsDetailBody{
        margin:0 0 5rem;
    }
    .newsDetailMovie{
        margin:0 0 10.7rem;
    }
    .newsDetailMovieInner{
        width:auto;
        height:calc((250 / 375) * var(--widthBase));
        max-width:none;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        padding-top: 3.5rem;
    }
    .newsDetailMovieHead{
        margin:0;
        padding:0;
    }
    .newsDetailMovieHeadEn{
        font-size:var(--spFontSize30);
        letter-spacing:0;
    }
    .newsDetailMovieHeadJa{
        margin:0.8rem 0 0;
        font-size:var(--spFontSize14);
    }
    .newsDetailMovieFrame{
        flex-basis:calc((195 / 375) * var(--widthBase));
        width:calc((345 / 375) * var(--widthBase));
        height:calc((195 / 375) * var(--widthBase));
        margin:2.5rem auto 0;
    }
    .newsDetailMovieCover::before{
        width:5.6rem;
        height:5.6rem;
        box-shadow:0 0 0 0.8rem rgba(255,255,255,0.28), 0 0.2rem 1.2rem rgba(0,0,0,0.18);
    }
    .newsDetailMovieCover::after{
        border-width:0.9rem 0 0.9rem 1.5rem;
    }
    .newsDetailMovieCover:hover::before{
        transform:translate(-50%,-50%);
    }
    .newsDetailBack{
        padding:4rem 0 0;
    }
    .newsDetailBackBtn{
        width:100%;
        max-width:20.5rem;
        height:4.5rem;
        font-size:var(--spFontSize12);
        letter-spacing:0;
    }
    .newsDetailBackIco{
        left:2rem;
        width:1.3rem;
    }
}