@charset "utf-8";

/*-----------------------------------------------
    secTop
-----------------------------------------------*/
.secTop {
    background: url(../img/news/bgTop.jpg) center bottom / cover no-repeat;
    height: 55rem;
    display: flex;
    justify-content: center;
    color: var(--whiteColor);
    align-items: center;
}

.secTop .cmnTopTopWrapper {
    padding-top: 6rem;
}

.secTop .engTit {
    font-size: var(--pcFontSize100);
    margin-bottom: 3rem;
}

.secTop .engTitSub {
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_200);
    margin-bottom: 2.7rem;
}

.secTop .jpTit {
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing18_150);
}


@media only screen and (max-width:1215px) {
    .secTop {
        background: url(../img/news/bgTop_sp.jpg) center bottom / cover no-repeat;
        height: 24rem;
    }

    .secTop .cmnTopTopWrapper {
        padding-top: 3.2rem;
    }

    .secTop .engTit {
        font-size: var(--spFontSize40);
        margin-bottom: 1.7rem;
    }

    .secTop .engTitSub {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_100);
        margin-bottom: 1.7rem;
    }

    .secTop .jpTit {
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing14_50);
    }
}

/*-----------------------------------------------
    secListNews
-----------------------------------------------*/
.secListNews .itemNews {
    border-bottom: 0.1rem solid var(--borderColor);
}

.secListNews .linkNews {
    padding: 5rem 0;
    display: flex;
    gap: 5rem;
    align-items: center;
    position: relative;
}

.secListNews .linkNews .boxLeft {
    flex-shrink: 0;
    width: 30rem;
    position: relative;
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 0 2rem 0.3rem rgba(0, 0, 0, 0.2);
}

.secListNews .linkNews .boxRight {
    position: relative;
    min-height: 30rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.secListNews .linkNews .imgNews {
    aspect-ratio: 300 / 300;
}

.secListNews .linkNews .txtTime {
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_26);
    letter-spacing: var(--pcLetterSpacing15_50);
}

.secListNews .linkNews .titNews {
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_34);
    letter-spacing: var(--pcLetterSpacing20_100);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: calc((var(--pcLineHeight20_34) * var(--pcFontSize20)) * 3);
}

.secListNews .linkNews .txtMore {
    font-size: var(--pcFontSize15);
    transition: 0.3s;
    position: absolute;
    bottom: 0;
    right: 11rem;
}

.secListNews .linkNews .txtMore::after {
    position: absolute;
    content: "";
    width: 10.2rem;
    height: 0.8rem;
    right: -11.2rem;
    top: calc(50% - 0.4rem);
}

.secListNews.lazyloaded .linkNews .txtMore::after {
    background: url(../img/common/iconMoreArrow.png) center right / cover;
}

.secListNews .iconNew {
    position: absolute;
    top: 4rem;
    left: 2rem;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--colorNewIcon);
    font-size: var(--pcFontSize10);
    color: var(--whiteColor);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.secListNews:not(:has(.secCmnIndexPager)) {
    padding-bottom: 7rem;
}

@media only screen and (max-width:1215px) {
    .secListNews .linkNews .boxLeft {
        width: 10.5rem;
        border-radius: 0rem;
        box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
    }

    .secListNews .linkNews {
        padding: 3rem 0;
        gap: 2rem;
    }

    .secListNews .linkNews .boxRight {
        min-height: 10.5rem;
        padding-bottom: 2rem;
    }

    .secListNews .linkNews .txtTime {
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing11_50);
    }

    .secListNews .linkNews .titNews {
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_26);
        letter-spacing: var(--spLetterSpacing13_50);
        -webkit-line-clamp: 2;
        max-height: calc((var(--spLineHeight13_26) * var(--spFontSize13)) * 2);
    }

    .secListNews .linkNews .txtMore {
        font-size: var(--spFontSize10);
        right: 3rem;
    }

    .secListNews .linkNews .txtMore::after {
        position: absolute;
        content: "";
        width: 2.1rem;
        height: 0.8rem;
        right: -3rem;
        top: calc(50% - 0.4rem);
    }
    .secListNews .iconNew {
        position: absolute;
        top: 1.8rem;
        left: 0.5rem;
        width: 3.4rem;
        height: 3.4rem;
    }
    .secListNews:not(:has(.secCmnIndexPager)) {
        padding-bottom: 5rem;
    }
}


/*-----------------------------------------------
    details
-----------------------------------------------*/
.dataTop{
    margin-bottom: 5rem;
    margin-top: 3rem;
}
.dataTop .txtTime {
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_26);
    letter-spacing: var(--pcLetterSpacing15_50);
    margin-bottom: 0.7rem;
}

.dataTop .titNews {
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_34);
    letter-spacing: var(--pcLetterSpacing20_100);
}
@media only screen and (max-width:1215px) {
    .dataTop{
        margin-bottom: 2.5rem;
        margin-top: 1.3rem;
    }
    .dataTop .txtTime {
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_24);
        letter-spacing: var(--spLetterSpacing11_50);
        margin-bottom: 0.7rem;
    }
    .dataTop .titNews {
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_26);
        letter-spacing: var(--spLetterSpacing14_100);
    }
}
/*-----------------------------------------------
    secSlider
-----------------------------------------------*/
.secSlider{
    margin-bottom: 9.5rem;
}
.sliderWrap {
    background: var(--bgNewsSlider);
    padding: 13rem;
    position: relative;
}

.sliderHero {
    max-width: 132rem;
    margin: 0 auto;
    position: relative;
}

/* 矢印 */
.swiper-button-next:after, 
.swiper-button-prev:after {
    display: none;
}
.secSlider .swiper-button-prev,
.secSlider .swiper-button-next {
    width: 5rem;
    height: 5rem;
}
.secSlider.lazyloaded .swiper-button-prev,
.secSlider.lazyloaded .swiper-button-next {
    background: url(../img/common/iconListArrow.png) center center / cover no-repeat;
}
.secSlider.lazyloaded .swiper-button-next {
    transform: rotate(180deg);
}

/* 左右位置 */
.secSlider .swiper-button-prev {
    left: 10.5rem;
}

.secSlider .swiper-button-next {
    right: 10.5rem;
}

/* ドット */
.secSlider .swiper-pagination {
    bottom: 5rem !important;
}

.secSlider .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    background: var(--colorPagenation);
    opacity: 1;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 1rem) !important;
}

.secSlider .swiper-pagination-bullet-active {
    background: var(--textColor);
}

.secSlider .swiper-slide{
    width: 100%;
    position: relative;
}
.secSlider .slideInner{
    aspect-ratio: 1320 / 880;
}
@media only screen and (max-width:1215px) {
    .sliderWrap {
        padding: 3rem 4rem 5.8rem;
    }
    .secSlider .swiper-button-prev, .secSlider .swiper-button-next {
        width: 3rem;
        height: 3rem;
    }
    .secSlider .swiper-button-next {
        right: 7%;
    }
    .secSlider .swiper-button-prev {
        left: 7%;
    }
    .secSlider .swiper-pagination-bullet {
        width: 0.8rem;
        height: 0.8rem;
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 0.5rem) !important;
    }
    .secSlider .swiper-pagination {
        bottom: 3rem !important;
    }
    .secSlider {
        margin-bottom: 2.3rem;
    }
}
/*-----------------------------------------------
    secContents
-----------------------------------------------*/
.secContents .contentsWrapper{
    display: flex;
    gap: 3.4rem;
    margin-bottom: 10rem;
}
.secContents .contentsWrapper .boxImg{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}
.secContents .contentsWrapper .boxTxt{
    position: relative;
    top: -1.5rem;
}
.secContents .contentsWrapper .boxTxt + .boxImg{
    width: 48.485%;
    max-width: 64rem;
}
.secContents .contentsWrapper .txtContents{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_50);
    letter-spacing: var(--pcLetterSpacing16_50);
}

@media only screen and (max-width:1215px) {
    .secContents .contentsWrapper .txtContents {
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_24);
        letter-spacing: var(--spLetterSpacing11_100);
    }
    .secContents .contentsWrapper .boxTxt {
        top: 0;
    }
    .secContents .contentsWrapper {
        gap: 1.5rem;
        margin-bottom: 3.5rem;
        flex-direction: column-reverse;
    }
    .secContents .contentsWrapper .boxTxt + .boxImg {
        width: 100%;
        max-width: unset;
    }
}

/*-----------------------------------------------
    secMovie
-----------------------------------------------*/
.secMovie{
    background: var(--bgNewsSlider);
    padding: 5rem 5rem 5rem 10rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11rem;
    color: var(--keyColor);
    margin-bottom: 10rem;
    margin-top: 10rem;
}
.secMovie .boxTxt{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.secMovie .titEnSub{
    font-size: var(--pcFontSize11);
    letter-spacing: var(--pcLetterSpacing11_50);
    margin-bottom: 0.5rem;
}
.secMovie .titEn{
    font-size: var(--pcFontSize80);
    margin-bottom: 2.4rem;
}
.secMovie .titMovie{
    font-size: var(--pcFontSize16);
    letter-spacing: var(--pcLetterSpacing16_100);
    color: var(--textColor);
}

.secMovie .boxMovie{
    width: 100%;
    max-width: 80rem;
    aspect-ratio: 560 / 315;
}
.secMovie iframe {
    width: 100%;
    height: 100%;
}
@media only screen and (max-width:1215px) {
    .secMovie {
        padding: 3rem 2rem;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem;
        width: 100%;
        margin-top: 4rem;
    }
    .secMovie .boxMovie{ 
        width: 100%;
        height: 0;
        padding-top: 56.12%;
        position: relative;
        max-width: unset;
    }
    .secMovie iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .secMovie .titEnSub {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_20);
        margin-bottom: 1rem;
    }
    .secMovie .titEn {
        font-size: var(--spFontSize30);
        margin-bottom: 1.5rem;
    }
    .secMovie .titMovie {
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing14_100);
    }
}

/*-----------------------------------------------
    secDetailsPager
-----------------------------------------------*/
.secDetailsPager{
    padding-top: 5rem;
    padding-bottom: 15rem;
    border-top: 0.1rem solid var(--borderColor);
}
.secDetailsPager .boxBtnPager{
    display: flex;
    align-items: center;
    gap: 18.2%;
    margin-bottom: 7rem;
}
.secDetailsPager .boxBtnPager:not(:has(.boxBtnPrev)){
    justify-content: flex-end;
}
.secDetailsPager .linkPager{
    display: flex;
    align-items: center;
    gap: 4rem;
}
.secDetailsPager .linkPager.btnNext{
    flex-direction: row-reverse;
}
.secDetailsPager .boxBtnBox{
    width: 40.9%;
    max-width: 54rem;
}
.secDetailsPager .imgBox{
    width: 15rem;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 0.8rem 0.2rem rgba(0, 0, 0, 0.2);
}
.secDetailsPager .imgBox .img{
    aspect-ratio: 150 / 150;
}
.secDetailsPager .deyTit{
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing12_100);
    margin-bottom: 1rem;
}
.secDetailsPager .tit{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_26);
    letter-spacing: var(--pcLetterSpacing16_100);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: calc((var(--pcLineHeight16_26) * var(--pcFontSize16)) * 2);
}
.secDetailsPager .txtMore{
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing12_60);
    transition: 0.3s;
    position: relative;
    display: inline-block;
}

.secDetailsPager .txtMore::after {
    position: absolute;
    content: "";
    width: 10.2rem;
    height: 0.8rem;
    right: -11.2rem;
    top: calc(50% - 0.4rem);
}

.secDetailsPager.lazyloaded .txtMore::after {
    background: url(../img/common/iconMoreArrow.png) center right / cover;
}


.secCmnDetailsBtn .btnInner {
    width: 70rem;
    height: 8rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    border:0.1rem solid var(--colorDetailsPager);
}

.secCmnDetailsBtn .btnInner .txtBtn{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_150);
    position: relative;
}
.secCmnDetailsBtn .btnInner .txtBtn::after {
    position: absolute;
    content: "";
    width: 10.2rem;
    height: 0.8rem;
    right: -11.2rem;
    top: calc(50% - 0.4rem);
}
.secCmnDetailsBtn.lazyloaded .btnInner .txtBtn::after {
    background: url(../img/common/iconMoreArrow.png) center right / cover;
}
@media only screen and (max-width:1215px) {
    .secDetailsPager .linkPager {
        gap: 2rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .secDetailsPager .linkPager.btnNext {
        flex-direction: column;
    }
    .secDetailsPager .deyTit {
        font-size: var(--spFontSize11);
        letter-spacing: var(--spLetterSpacing11_50);
        margin-bottom: 1rem;
    }
    .secDetailsPager .tit {
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_26);
        letter-spacing: var(--spLetterSpacing13_50);
        margin-bottom: 1rem;
        max-height: calc((var(--spLineHeight13_26) * var(--spFontSize13)) * 2);
    }
    .secDetailsPager .imgBox {
        width: 100%;
        box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
    }
    .secDetailsPager .txtMore {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_50);
    }
    .secDetailsPager .txtMore::after {
        position: absolute;
        content: "";
        width: 2.1rem;
        height: 0.8rem;
        right: -3rem;
        top: calc(50% - 0.4rem);
    }
    .secDetailsPager .boxBtnBox {
        width: 44.78%;
        max-width: 15rem;
        padding-top: 1.7rem;
        padding-bottom: 0.8rem;
    }
    .secDetailsPager .boxBtnPager {
        gap: 10.4%;
        margin-bottom: 3rem;
        position: relative;
        justify-content: space-between;
    }
    .secDetailsPager .boxBtnPager::before {
        position: absolute;
        content: '';
        height: 100%;
        width: 0.1rem;
        background: var(--borderColor);
        top: 0;
        left: 50%;
    }
    .secDetailsPager {
        padding-top: 0rem;
        padding-bottom: 8rem;
    }
    .secCmnDetailsBtn .btnInner {
        width: 91.05%;
        max-width: 30.5rem;
        height: 5rem;
    }
    .secCmnDetailsBtn .btnInner .txtBtn {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_50);
        padding-right: 6rem;
    }
    .secCmnDetailsBtn .btnInner .txtBtn::after {
        position: absolute;
        content: "";
        width: 6.1rem;
        height: 0.8rem;
        right: -1rem;
        top: calc(50% - 0.4rem);
    }
}

.txtNone{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_34);
    letter-spacing: var(--pcLetterSpacing20_100);
    text-align: center;
    padding: 14rem 0;
}
@media only screen and (max-width:1215px) {
    .txtNone{
        padding: 8rem 0;
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_26);
        letter-spacing: var(--spLetterSpacing13_50);
    }
}