@charset "utf-8";
/*-----------------------------------------------
    boxCmnTop
-----------------------------------------------*/
.boxCmnTop{
    height: 0;
}
.boxTopBg{
    background-color: var(--blackColor);
    padding: 13rem 0 3rem;
}
@media only screen and (max-width:1215px){
    .boxTopBg{
        padding: 4.5rem 0 2.5rem;
    }
}
/*-----------------------------------------------
    boxConcept
-----------------------------------------------*/
.boxConcept{
    color: var(--whiteColor);
    margin: -1rem auto 4rem;
}
.boxConcept .tit{
    font-size: var(--pcFontSize40);
    line-height: var(--pcLineHeight40_70);
    letter-spacing: var(--pcLetterSpacing40_40);
    font-weight: bold;
}
.boxConcept .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_34);
    letter-spacing: var(--pcLetterSpacing16_40);
    margin-top: 2rem;
}
@media only screen and (max-width:1215px){
    .boxConcept{
        margin: 1rem auto 2rem;
    }
    .boxConcept .tit{
        font-size: var(--spFontSize16);
        line-height: var(--spLineHeight16_24);
        letter-spacing: var(--spLetterSpacing16_0);
    }
    .boxConcept .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
        letter-spacing: var(--spLetterSpacing12_0);
        margin-top: 0.5rem;
    }

}

/*-----------------------------------------------
    secCmnTab
-----------------------------------------------*/
@media only screen and (max-width:1215px){
    .secCmnTab{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    .secCmnTab .boxTabNum {
        width: 30%;
    }
}

/*-----------------------------------------------
    boxPlanTop
-----------------------------------------------*/
.boxPlanTop {
    position: relative;
    color: var(--whiteColor);
    background: linear-gradient(to bottom, var(--blackColor) 21rem, transparent 21rem);
    margin-top: -0.1rem;
}
/* boxList */
.boxPlanTop .boxList{
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}
.boxPlanTop .boxList .item{
    width: calc((100% - 3.999rem) / 2);
    height: auto;
    background-color: var(--whiteColor);
}
.boxPlanTop .boxList .link{
    position: relative;
    display: block;
    height: 100%;
}
.boxPlanTop .boxTitPlan{
    height: 10rem;
    padding: 3.3rem 4rem;
    background-color: var(--black_000_Color);
}
.boxPlanTop .boxTitPlan .tit{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight22_33);
    letter-spacing: var(--pcLetterSpacing22_40);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boxPlanTop .boxPlan{
    position: relative;
    height: calc(100% - 10rem);
    display: flex;
    align-items: center;
}
/* boxImg */
.boxPlanTop .boxImg{
    text-align: center;
    width: 100%;
    padding: 10.5rem 0;
}
.boxPlanTop .boxImg .img{
    width: 40rem;
    height: 0;
    padding-top: 50%;
    margin: 0 auto;
}
/* boxInfo */
.boxPlanTop .boxInfo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray_6e6_Color);
    border-top: none;
}
.boxPlanTop .boxTsubo{
    position: relative;
    top: 3rem;
    left: 3rem;
    width: 9rem;
    height: 9rem;
    border-radius: 100%;
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border: 0.1rem solid var(--gray_cbc_Color);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}
.boxPlanTop .boxTsubo .txtTsuboNum{
    font-size: var(--pcFontSize24);
    line-height: var(--pcLineHeight24_20);
}
.boxPlanTop .boxTsubo .txtTsubo{
    font-size: var(--pcFontSize16);
}
.boxPlanTop .boxRank{
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 4.6rem;
    background-color: var(--rankColor);
    color: var(--blackColor);
    clip-path: polygon(100% 0, 100% 100%, 50% 70%, 0 100%, 0 0);
    z-index: 2;
}
.boxPlanTop .boxRank .txtRank{
    width: 100%;
    height: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--pcFontSize14);
    font-weight: bold;
}
/* cmnArrowCircle */
.boxPlanTop .cmnArrowCircle{
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    width: 4.7rem;
    height: 4.7rem;
    z-index: 0;
}
/* boxMember */
.boxPlanTop .boxMember{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black_000_80_Color);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.boxPlanTop .boxMember .tit{
    font-size: var(--pcFontSize26);
    font-weight: bold;
}
.boxPlanTop .boxMember .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    margin-top: 1.5rem;
}
.boxPlanTop .boxMember .listMember{
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.boxPlanTop .boxMember .item{
    width: 22rem;
}
.boxPlanTop .boxMember .btn{
    position: relative;
    width: 100%;
    height: 6.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxPlanTop .boxMember .isLogin{
    background-color: var(--loginColor);
    color: var(--blackColor);
}
.boxPlanTop .boxMember .isMember{
    background-color: var(--memberColor);
}
.boxPlanTop .boxMember .btnTit{
    font-size: var(--pcFontSize16);
    font-weight: bold;
}
.boxPlanTop .boxMember .btnTxt{
    position: absolute;
    top: -2rem;
    left: 0;
    background-color: var(--link_txtColor);
    color: var(--blackColor);
    font-size: var(--pcFontSize12);
    font-weight: bold;
    padding: 0.8rem 1rem;
}
@media only screen and (max-width:1215px){
    .boxPlanTop{
        background: linear-gradient(to bottom, var(--blackColor) 10.5rem, transparent 10.5rem)
    }
    /* boxList */
    .boxPlanTop .boxList{
        gap: 2rem;
    }
    .boxPlanTop .boxList .item{
        width: 100%;
    }
    .boxPlanTop .boxTitPlan{
        height: 6rem;
        padding: 2rem 1.5rem;
    }
    .boxPlanTop .boxTitPlan .tit{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_20);
        letter-spacing: var(--spLetterSpacing13_0);
    }
    .boxPlanTop .boxPlan{
        height: calc(100% - 6rem);
    }
    /* boxImg */
    .boxPlanTop .boxImg{
        padding: 4.3rem 0;
    }
    .boxPlanTop .boxImg .img{
        width: 20rem;
        padding-top: 50.85%;
    }
    /* boxInfo */
    .boxPlanTop .boxTsubo{
        top: 1rem;
        left: 1rem;
        width: 6rem;
        height: 6rem;
    }
    .boxPlanTop .boxTsubo .txtTsuboNum{
        font-size: var(--spFontSize16);
        line-height: var(--spLineHeight16_14);
    }
    .boxPlanTop .boxTsubo .txtTsubo{
        font-size: var(--spFontSize11);
    }
    .boxPlanTop .boxRank{
        width: 4.4rem;
        height: 2.6rem;
    }
    .boxPlanTop .boxRank .txtRank{
        height: 2rem;
        font-size: var(--spFontSize10);
    }
    /* cmnArrowCircle */
    .boxPlanTop .cmnArrowCircle{
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3.7rem;
        height: 3.7rem;
    }
    /* boxMember */
    .boxPlanTop .boxMember{
        padding-bottom: 3rem;
    }
    .boxPlanTop .boxMember .tit{
        font-size: var(--spFontSize16);
    }
    .boxPlanTop .boxMember .txt{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_17);
        margin-top: 1rem;
    }
    .boxPlanTop .boxMember .listMember{
        flex-direction: column;
        align-items: center;
        margin-top: 1.5rem;
        width: 100%;
        gap: 1.8rem;
    }
    .boxPlanTop .boxMember .item{
        width: 62.32%;
    }
    .boxPlanTop .boxMember .btn{
        height: 4rem;
    }
    .boxPlanTop .boxMember .btnTit{
        font-size: var(--spFontSize13);
    }
    .boxPlanTop .boxMember .btnTxt{
        top: -1.5rem;
        font-size: var(--spFontSize10);
        padding: 0.5rem;
    }
}

/*-----------------------------------------------
    boxDetailsTop
-----------------------------------------------*/
.boxDetailsTop .boxTopTit{
    color: var(--whiteColor);
    text-align: center;
}
/* boxTsubo */
.boxDetailsTop .boxTsubo{
    border: 0.1rem solid var(--gray_5a5_Color);
    width: auto;
    min-height: 5rem;
    padding: 2rem 1.9rem 1rem 1.9rem;
    margin: 0 auto;
    display: inline-block;
}
.boxDetailsTop .boxTsubo .num{
    font-size: var(--pcFontSize24);
    line-height: var(--pcLetterSpacing24_40);
}
.boxDetailsTop .boxTsubo .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLetterSpacing16_40);
}
/* tit */
.boxDetailsTop .boxTopTit .tit{
    font-size: var(--pcFontSize40);
    line-height: var(--pcLineHeight40_36);
    letter-spacing: var(--pcLetterSpacing40_40);
    margin-top: 2.5rem;
    font-weight: bold;
}
/* boxPrice */
.boxDetailsTop .boxPrice{
    margin-top: 2.2rem;
}
.boxDetailsTop .boxPrice .num{
    font-size: var(--pcFontSize40);
    letter-spacing: var(--pcLetterSpacing40_40);
}
.boxDetailsTop .boxPrice .txt{
    font-size: var(--pcFontSize18);
    line-height: var(--pcLetterSpacing18_40);
}
@media only screen and (max-width:1215px){
    .boxDetailsTop .boxTopTit{
        margin-top: 1rem;
        text-align: left;
    }
    /* boxTsubo */
    .boxDetailsTop .boxTsubo{
        min-height: 3rem;
        padding: 0.9rem 0.9rem 0.2rem 0.9rem;
        margin: 0 0 0 auto;
    }
    .boxDetailsTop .boxTsubo .num{
        font-size: var(--spFontSize16);
        line-height: var(--spLetterSpacing16_0);
    }
    .boxDetailsTop .boxTsubo .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLetterSpacing12_0);
    }
    /* tit */
    .boxDetailsTop .boxTopTit .tit{
        font-size: var(--spFontSize17);
        line-height: var(--spLineHeight17_25);
        letter-spacing: var(--spLetterSpacing17_0);
        margin-top: 1rem;
    }
    /* boxPrice */
    .boxDetailsTop .boxPrice{
        margin-top: 0.5rem;
    }
    .boxDetailsTop .boxPrice .num{
        font-size: var(--spFontSize20);
        letter-spacing: var(--spLetterSpacing20_0);
    }
    .boxDetailsTop .boxPrice .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLetterSpacing12_0);
    }
}

/*-----------------------------------------------
    boxDetailsSlider
-----------------------------------------------*/
.boxDetailsSlider{
    position: relative;
    margin-top: -0.1rem;
    background: linear-gradient(to bottom, var(--blackColor) 17rem, transparent 17rem);
}
.boxDetailsSlider .boxSlider{
    position: relative;
    background-color: var(--whiteColor);
}
.boxDetailsSlider .swiper-slide{
    height: auto;
}
.boxDetailsSlider .imgSlider{
    height: 100%;
    border: 0.1rem solid var(--gray_1f2_Color);
    background-color: var(--whiteColor);
    padding: 9.9rem 20rem;
    text-align: center;
}
.boxDetailsSlider .imgSlider img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}
/* swiper-button */
.boxDetailsSlider .swiper-button-prev,
.boxDetailsSlider .swiper-button-next{
    top: 0;
    bottom: 0;
    margin: auto;
    width: 9rem;
    height: 9rem;
    box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.15);
    background-color: var(--blackColor);
    border-radius: 50%;
    opacity: 1!important;
    pointer-events: auto !important;
}
.boxDetailsSlider .swiper-button-prev{
    left: -4.5rem;
}
.boxDetailsSlider .swiper-button-next{
    right: -4.5rem;
}
.boxDetailsSlider .swiper-button-prev::after,
.boxDetailsSlider .swiper-button-next::after{
    display: none;
}
.boxDetailsSlider .swiper-button-next.lazyloaded,
.boxDetailsSlider .swiper-button-prev.lazyloaded{
    background: url(../img/common/iconArrow_next_white.png) center center / 1.4rem auto no-repeat,var(--blackColor);
}
.boxDetailsSlider .swiper-button-prev.lazyloaded{
    transform: scaleX(-1);
}
@media only screen and (max-width:1215px){
    .boxDetailsSlider{
        margin-top: 1.5rem;
        background: none;
    }
    .boxDetailsSlider .imgSlider{
        border: none;
        width: 100%;
        height: 0;
        padding: 75.076% 0 0 0;
    }
    .boxDetailsSlider .imgSlider img{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
        display:block;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
    /* swiper-button */
    .boxDetailsSlider .swiper-button-prev,
    .boxDetailsSlider .swiper-button-next{
        width: 4rem;
        height: 4rem;
    }
    .boxDetailsSlider .swiper-button-prev{
        left: -2.5rem;
    }
    .boxDetailsSlider .swiper-button-next{
        right: -2.5rem;
    }
    .boxDetailsSlider .swiper-button-next.lazyloaded,
    .boxDetailsSlider .swiper-button-prev.lazyloaded{
        background: url(../img/common/iconArrow_next_white.png) center center / 0.8rem auto no-repeat,var(--blackColor);
    }
}

/*-----------------------------------------------
    boxDetailsData
-----------------------------------------------*/
.boxDetailsData{
    margin-top: 1rem;
    text-align: left;
}
/* boxTit */
.boxDetailsData .boxTit{
    margin-top: 6rem;
}
.boxDetailsData .boxTit .tit{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight22_33);
    font-weight: bold;
}
.boxDetailsData .boxTit .txt{
    margin-top: 1.5rem;
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_28);
    letter-spacing: var(--pcLetterSpacing14_40);
}
/* boxDataTxt */
.boxDetailsData .boxDataTxt{
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--gray_f7f_Color);
}
.boxDetailsData .boxDataTxt .tit{
    padding: 1.8rem 0 1.5rem 0;
    width: 12rem;
    background-color: var(--blackColor);
    color: var(--whiteColor);
    font-weight: 300;
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_36);
    letter-spacing: var(--pcLetterSpacing20_40);
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxDetailsData .boxDataTxt .txt{
    margin: 0 0 0 4rem;
}
@media only screen and (max-width:1215px){
    .boxDetailsData {
        margin-top: 0;
    }
    /* boxTit */
    .boxDetailsData .boxTit{
        margin-top: 2rem;
    }
    .boxDetailsData .boxTit .tit{
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_23);
    }
    .boxDetailsData .boxTit .txt{
        margin-top: 1rem;
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_22);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    /* boxDataTxt */
    .boxDetailsData .boxDataTxt{
        align-items: normal;
    }
    .boxDetailsData .boxDataTxt .tit{
        padding: 1.8rem 0 1.5rem 0;
        width: 6rem;
        height: auto;
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    .boxDetailsData .boxDataTxt .txt{
        margin: 0 0 0 2rem;
        padding: 1.3rem 0;
        line-height: var(--spLineHeight12_18);
    }
}

/*-----------------------------------------------
    boxCmnReserve
-----------------------------------------------*/
.boxCmnReserve{
    margin-top: 15rem;
    text-align: center;
}
.boxCmnReserve .tit{
    position: relative;
    display: inline-block;
    font-size: var(--pcFontSize20);
    color: var(--gray_1f2_Color);
    font-weight: bold;
}
.boxCmnReserve .tit::before,
.boxCmnReserve .tit::after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: -1.5rem;
    width: 0.1rem;
    height: 125%;
    background-color: var(--gray_1f2_Color);
    z-index: -1;
    transform: skewX(25deg);
}
.boxCmnReserve .tit::after{
    left: auto;
    right: -1.5rem;
    transform: skewX(-25deg);
}
/* link */
.boxCmnReserve .link{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50rem;
    margin-top: 6rem;
    color: var(--whiteColor);
    overflow: hidden;
}
.boxCmnReserve .link:before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    width: 100%;;
    height: 100%;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    z-index: -1;
}
.boxCmnReserve.lazyloaded .link:before{
    background: url(../img/plan/bgReserve_plan.jpg) center top / cover no-repeat;
}
.boxCmnReserve .link:hover:before{
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
.boxCmnReserve .link .titEng{
    font-size: var(--pcFontSize90);
    letter-spacing: var(--pcLetterSpacing90_20);
    font-weight: 300;
}
.boxCmnReserve .link .titJp{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_36);
    font-weight: bold;
}
.boxCmnReserve .link .boxCampaign{
    background-color: var(--reserveColor);
    color: var(--blackColor);
    font-weight: bold;
    padding: 1.3rem 1.5rem;
    margin-top: 2rem;
}
.boxCmnReserve .link .txtCampaign{
    font-weight: bold;
    font-size: var(--pcFontSize19);
    letter-spacing: var(--pcLetterSpacing19_40);
}
@media only screen and (max-width:1215px){
    .boxCmnReserve{
        margin-top: 6rem;
    }
    .boxCmnReserve .tit{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
    }
    .boxCmnReserve .tit::before,
    .boxCmnReserve .tit::after{
        top: auto;
        bottom: 0;
        height: 70%;
    }
    .boxCmnReserve .tit::before{
        left: -1.5rem;
        transform: skewX(15deg);
    }
    .boxCmnReserve .tit::after{
        right: -1.5rem;
        transform: skewX(-15deg);
    }
    /* link */
    .boxCmnReserve .link{
        height: 17.3rem;
        margin-top: 2.5rem;
    }
    .boxCmnReserve .link .titEng{
        font-size: var(--spFontSize30);
        letter-spacing: var(--spLetterSpacing30_0);
    }
    .boxCmnReserve .link .titJp{
        font-size: var(--spFontSize10);
        line-height: var(--spLineHeight10_17);
    }
    .boxCmnReserve .link .boxCampaign{
        padding: 0.8rem 1rem;
        margin-top: 1rem;
    }
    .boxCmnReserve .link .txtCampaign{
        font-weight: bold;
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_0);
    }
}

/*-----------------------------------------------
    boxBack
-----------------------------------------------*/
.boxBack{
    padding: 15rem 0 0;
}
.boxBack .aBtnBack{
    position: relative;
    width: 40rem;
    height: 7.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border: 1px solid var(--blackColor);
    font-size: var(--pcFontSize16);
    font-weight: bold;
    border-radius: 4rem;
}
.boxBack .aBtnBack::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 5rem;
    width: 1.5rem;
    height: 0.3rem;
    transform: scaleX(-1);
}
.boxBack .aBtnBack.lazyloaded::before{
    background: url(../img/common/iconArrow_right.png) center top / cover no-repeat;
}
@media only screen and (max-width:1215px){
    .boxBack{
        padding: 10rem 0 0;
    }
    .boxBack .aBtnBack{
        width: 24.5rem;
        height: 5.5rem;
        font-size: var(--spFontSize12);
        border-radius: 3rem;
    }
    .boxBack .aBtnBack::before{
        left: 3rem;
    }
}