@charset "utf-8";

/*-----------------------------------------------
    index
-----------------------------------------------*/
/* secHero */
.secHero .boxSlider{
    position: relative;
}
.secHero .swiper-button-prev,
.secHero .swiper-button-next{
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: url(../img/common/iconArrow.png) center center no-repeat rgba(32,50,60,0.3);
    position: absolute;
    top: 50%;
    margin-top: -2.3rem;
}
.secHero .swiper-button-prev{
    left: 3rem;
    transform: scale(-1, 1);
}
.secHero .swiper-button-next{
    right: 3rem;
}
.secHero .swiper-button-prev::after,
.secHero .swiper-button-next::after{
    display: none;
}
.secHero .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 5rem;
    right: 6rem;
    left: auto;
    width: auto;
}
.secHero .swiper-pagination-bullet{
    width: 1rem;
    height: 1rem;
    background: #b3b3b3;
    opacity: 1;
}
.secHero .swiper-pagination-bullet-active{
    background: var(--linkColor);
}
.secHero .boxBar{
    color: #fff;
    font-size: var(--pcFontSize30);
    letter-spacing: 0.08em;
    display: flex;
    justify-content: center;
    gap: 0 10rem;
    position: relative;
}
.secHero .boxBar.isAccess{
    background: linear-gradient(to bottom, #024702 0%,#006600 100%);
}
.secHero .boxBar.isAccess::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 0;
}
.secHero .boxBar.isAccess::after{
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 0;
}
.secHero .boxBar.isPlan{
    background: #b19f90;
}
.secHero .boxBar .boxTxt{
    position: relative;
    z-index: 1;
    height: 13rem;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    display: flex;
    align-items: flex-end;
    padding: 0 0 5rem;
}
.secHero .boxBar .boxTxt + .boxTxt::before{
    content: '';
    display: block;
    width: 1px;
    height: 7.2rem;
    background-color: rgba(255,255,255,0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5rem;
    margin: auto 0;
    transform: rotate(17deg);
}
.secHero .boxBar .num{
    font-size: var(--pcFontSize50);
    font-weight: 600;
    position: relative;
    bottom: -0.1em;
    margin: 0 0.5rem;
    letter-spacing: 0;
}
.secHero .boxBar .kara{
    font-size: var(--pcFontSize50);
    position: relative;
    bottom: -0.1em;
    margin: 0 0.5rem;
}
.secHero .boxBar .fYellow{
    color: #e7ff46;
}
.secHero .boxBar .boxTxt .txtWalk{
    display: block;
    position: relative;
    bottom: -0.25em;
    padding: 0 0 0 1.5rem;
}
@media only screen and (max-width:1215px){
    .secHero .swiper-button-prev,
    .secHero .swiper-button-next{
        display: none;
    }
    .secHero .swiper-pagination-bullets.swiper-pagination-horizontal{
        bottom: 2rem;
        right: 0;
        left: 0;
    }
    .secHero .swiper-pagination-bullet{
        width: 0.8rem;
        height: 0.8rem;
    }
    .secHero .boxBar{
        font-size: var(--spFontSize15);
        letter-spacing: 0;
        gap: 0 4rem;
    }
    .secHero .boxBar .boxTxt{
        height: 7.5rem;
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .secHero .boxBar.isPlan .boxTxt{
        display: block;
        height: auto;
        line-height: 1.3;
        padding: 1rem 0 1.5rem;
    }
    .secHero .boxBar .boxTxt + .boxTxt::before{
        height: 4.2rem;
        left: -2rem;
    }
    .secHero .boxBar .num{
        font-size: var(--spFontSize26);
        bottom: -0.1em;
        margin: 0 0.5rem;
    }
    .secHero .boxBar .kara{
        font-size: var(--spFontSize15);
        bottom: -0.1em;
        margin: 0 0.5rem;
    }
    .secHero .boxBar.isPlan{
        font-size: var(--spFontSize13);
    }
    .secHero .boxBar.isPlan .num{
        font-size: var(--spFontSize23);
        margin-bottom: 0.4rem;
    }
    .secHero .boxBar.isPlan .boxTxt{
        flex-direction: row;
    }
    .secHero .boxBar .boxTxt .txtWalk{
        bottom: 1rem 0 0;
        padding: 0;
    }
    .secHero .boxBar .boxTxt .txtWalk img{
        width: auto;
        height: 7vw;
    }
}

/* secPlan */
.secPlan{
    position: relative;
    margin-bottom: 9rem;
}
.secPlan::before{
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: 15rem;
    left: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(21,133,143,1) 0%,rgba(21,133,143,0) 60%,rgba(21,133,143,0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secPlan .bgWrap{
    position: relative;
    z-index: 1;
}
.secPlan .titRoman{
    color: #4c4e50;
    opacity: .1;
    font-size: 20rem;
    position: absolute;
    top: 9rem;
    left: 0;
    z-index: -1;
}
.secPlan .boxPlan{
    display: flex;
    justify-content: center;
    gap: 0 10rem;
    position: relative;
    z-index: 1;
    margin-bottom: 14rem;
    padding: 22rem 0 0;
}
.secPlan .txtPlan{
    font-size: var(--pcFontSize22);
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
}
.secPlan .txtName{
    font-size: var(--pcFontSize50);
    letter-spacing: 0.06em;
    margin-bottom: 4rem;
    font-weight: 600;
}
.secPlan .txtInfo{
    font-size: var(--pcFontSize16);
    letter-spacing: 0.06em;
    margin-bottom: 6rem;
}
.secPlan .pointItem{
    display: flex;
    gap: 0 3rem;
}
.secPlan .pointItem + .pointItem{
    margin-top: 4rem;
}
.secPlan .boxPlanTxt{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 0 0;
}
.secPlan .titPoint{
    font-size: var(--pcFontSize13);
    letter-spacing: 0.02em;
    border-radius: 100rem;
    color: #fff;
    background-color: #a5b0b2;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
}
.secPlan .pointItem:nth-child(2) .titPoint{
    background-color: #b19f90;
}
.secPlan .txtPoint{
    font-size: var(--pcFontSize28);
    letter-spacing: 0.1em;
    line-height: 1.64;
    font-weight: 600;
    padding-left: 0.25em;
}
.secPlan .bnrVr{
    display: block;
    max-width: 60rem;
    margin: 0 auto 15rem;
    padding: 2.5rem;
    color: var(--textColor);
    border: 1px solid var(--textColor);
    font-size: var(--pcFontSize16);
    letter-spacing: 0.06em;
}
.secPlan .bnrVrIn{
    display: flex;
    justify-content: center;
    gap: 0 0.8rem;
}
.secPlan .bnrVrIn::before{
    content: '';
    display: block;
    width: 2.2rem;
    height: 1.4rem;
    background: url(../img/common/iconVr.png) center center / 100% no-repeat;
}
a.hoverMore.isBlack:hover .bnrVrIn::before{
    background-image: url(../img/common/iconVr_w.png);
}
.secPlan .boxEntry{
    text-align: center;
}
.secPlan .titEntry{
    font-size: var(--pcFontSize60);
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 3.5rem;
}
.secPlan .txtEntry{
    font-size: var(--pcFontSize16);
    letter-spacing: 0.06em;
    margin-bottom: 6rem;
}
.secPlan .btnEntry{
    display: block;
    max-width: 60rem;
    margin: 0 auto;
    color: #fff;
    background-color: var(--linkColor);
    border: solid 1px var(--linkColor);
    font-size: var(--pcFontSize24);
    letter-spacing: 0.06em;
    padding: 2.7rem;
    text-align: center;
    position: relative;
}
.secPlan .btnEntry::after{
    content: '';
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    background: url(../img/common/iconLink_w.png) center center / 100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5rem;
    margin: auto 0;
}
@media only screen and (max-width:1215px){
    .secPlan{
        margin-bottom: 7.5rem;
    }
    .secPlan::before{
        display: none;
    }
    .secPlan .titRoman{
        font-size: 16vw;
        top: 8vw;
        width: 100%;
        text-align: center;
    }
    .secPlan .boxPlan{
        flex-direction: column;
        gap: 4rem 0;
        margin-bottom: 4rem;
        padding: 5rem 0 0;
        text-align: center;
    }
    .secPlan .imgPlan{
        width: 47.77%;
        margin: 0 auto 4rem;
    }
    .secPlan .boxTxt{
        padding: 0;
    }
    .secPlan .txtPlan{
        font-size: var(--spFontSize14);
        letter-spacing: 0;
        margin-bottom: 1rem;
    }
    .secPlan .txtName{
        font-size: var(--spFontSize28);
        letter-spacing: 0.06em;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    .secPlan .txtInfo{
        font-size: var(--spFontSize11);
        letter-spacing: 0;
        line-height: 1.8;
        margin-bottom: 2rem;
    }
    .secPlan .pointItem{
        gap: 0 2rem;
        text-align: left;
    }
    .secPlan .pointItem + .pointItem{
        margin-top: 2rem;
    }
    .secPlan .imgPoint{
        width: 32.84%;
    }
    .secPlan .boxPlanTxt{
        padding: 0;
        justify-content: center;
    }
    .secPlan .titPoint{
        font-size: var(--spFontSize10);
        letter-spacing: 0;
        padding: 0.5rem 1rem;
        margin-bottom: 0.5rem;
    }
    .secPlan .txtPoint{
        font-size: 3.5vw;
        letter-spacing: 0;
        line-height: 1.57;
        padding-left: 0;
    }
    .secPlan .bnrVr{
        max-width: 24.5rem;
        margin: 0 auto 8rem;
        padding: 1.8rem;
        font-size: var(--spFontSize12);
        letter-spacing: 0;
    }
    .secPlan .bnrVrIn{
        gap: 0 0.5rem;
    }
    .secPlan .bnrVrIn::before{
        width: 2rem;
        height: 1.2rem;
    }
    .secPlan .titEntry{
        font-size: var(--spFontSize22);
        letter-spacing: 0.04em;
        margin-bottom: 1.5rem;
    }
    .secPlan .txtEntry{
        font-size: var(--spFontSize12);
        letter-spacing: 0;
        line-height: 2;
        margin-bottom: 1.5rem;
    }
    .secPlan .btnEntry{
        max-width: 24.5rem;
        font-size: var(--spFontSize15);
        letter-spacing: 0.04em;
        padding: 2rem;
    }
    .secPlan .btnEntry::after{
        right: 2rem;
    }
}

/* secInfo */
.secInfo{
    margin-bottom: 14rem;
    position: relative;
    z-index: 1;
}
.secInfo .titTop{
    font-size: var(--pcFontSize40);
    font-weight: 600;
    margin-bottom: 4.5rem;
}
.secInfo .infoItem + .infoItem{
    border-top: 1px solid #b0b0b0;
}
.secInfo .linkInner{
    display: flex;
    color: var(--textColor);
    font-size: var(--pcFontSize16);
    line-height: 1.875;
}
.secInfo .txtDate{
    border-right: 1px solid #b0b0b0;
    width: 17.2rem;
    text-align: center;
    padding: 3rem 0;
}
.secInfo .txtTitle{
    padding: 3rem 0 3rem 3.5rem;
    letter-spacing: 0.06em;
    flex: 1;
}
.secInfo .infoItem:nth-child(n+4){
    display: none;
}
.secInfo .boxInfo{
    position: relative;
    margin-bottom: 1rem;
}
.secInfo:not(.isNoMore) .boxInfo::after{
    content: '';
    display: block;
    width: 100%;
    height: 14rem;
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
}
.secInfo .boxInfo.isOpen::after{
    display: none;
}
.secInfo .btnMore{
    display: block;
    max-width: 20rem;
    background-color: #fff;
    border: 1px solid var(--textColor);
    font-size: var(--pcFontSize14);
    text-align: center;
    margin: 0 auto;
    padding: 1.7rem;
    font-weight: 600;
}
.secInfo.isNoMore .btnMore{
    display: none;
}
.secInfo .btnMoreIn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 0.5rem;
}
.secInfo .btnMoreIn::before{
    content: '';
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    background: url(../img/common/iconLink.png) center center / 100% no-repeat;
    transform: rotate(90deg);
}
@media only screen and (min-width:1216px){
    .secInfo .hoverMore:hover .btnMoreIn::before{
        background-image: url(../img/common/iconLink_w.png);
    }
}
@media only screen and (max-width:1215px){
    .secInfo{
        margin-bottom: 8rem;
    }
    .secInfo .titTop{
        font-size: var(--spFontSize22);
        margin-bottom: 2rem;
    }
    .secInfo .linkInner{
        display: block;
        font-size: var(--spFontSize13);
        padding: 1.8rem 0;
        line-height: 1.5;
    }
    .secInfo .txtDate{
        border-right: none;
        width: 100%;
        text-align: left;
        padding: 0;
    }
    .secInfo .txtTitle{
        padding: 0;
        letter-spacing: 0;
    }
    .secInfo .boxInfo{
        margin-bottom: 1rem;
        border-top: 1px solid #b0b0b0;
    }
    .secInfo .btnMore{
        max-width: 12.5rem;
        font-size: var(--spFontSize12);
        padding: 1.3rem;
    }
}

/* secContents */
.secContents{
    margin-bottom: 15rem;
}
.secContents::before{
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: -30rem;
    right: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(0,105,52,1) 0%,rgba(0,105,52,0) 60%,rgba(0,105,52,0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secContents .bgWrap{
    position: relative;
    z-index: 1;
}
.secContents .titTop{
    font-size: var(--pcFontSize40);
    font-weight: 600;
    text-align: center;
    margin-bottom: 7.5rem;
}
.secContents .contentsItem{
    display: flex;
}
.secContents .contentsItem + .contentsItem{
    margin-top: 0.5rem;
}
.secContents .linkInner{
    color: #fff;
    position: relative;
}
.secContents .boxTxt{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
.secContents .txtTop{
    font-size: var(--pcFontSize22);
    letter-spacing: 0.06em;
    margin-bottom: 2.3rem;
}
.secContents .txtRoman{
    font-size: var(--pcFontSize60);
    margin-bottom: 1.5rem;
}
.secContents .txtJp{
    font-size: var(--pcFontSize20);
    letter-spacing: 0.06em;
    margin-bottom: 2.8rem;
}
.secContents .btnMore{
    display: flex;
    justify-content: center;
    padding: 1.7rem;
    gap: 0 0.5rem;
    width: 20rem;
    border: 1px solid #fff;
    font-size: var(--pcFontSize14);
    font-weight: 600;
    text-align: center;
    position: relative;
}
.secContents .btnMore:not(.isNoLink)::after{
    content: '';
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    background: url(../img/common/iconLink_w.png) center center / 100% no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.9rem;
    margin: auto 0;
}
.secContents .bg{
    position: relative;
    z-index: 0;
}
@media only screen and (max-width:1215px){
    .secContents{
        margin-bottom: 8rem;
    }
    .secContents::before{
        display: none;
    }
    .secContents .titTop{
        font-size: var(--spFontSize22);
        margin-bottom: 3rem;
    }
    .secContents .contentsItem + .contentsItem{
        margin-top: 0.2rem;
    }
    .secContents .boxTxt{
        align-items: flex-start;
        padding: 0 2rem;
    }
    .secContents .txtTop{
        font-size: var(--spFontSize16);
        letter-spacing: 0;
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }
    .secContents .txtRoman{
        font-size: var(--spFontSize28);
        margin-bottom: 1rem;
    }
    .secContents .txtJp{
        font-size: var(--spFontSize13);
        letter-spacing: 0;
        margin-bottom: 1.6rem;
    }
    .secContents .btnMore{
        padding: 0.9rem;
        width: 11.4rem;
        font-size: var(--spFontSize12);
        text-align: left;
        justify-content: flex-start;
    }
    .secContents .btnMore::after{
        right: 0.9rem;
    }
}

/* secBnr */
.secBnr::before{
    content: '';
    display: block;
    width: 137rem;
    height: 137rem;
    position: absolute;
    top: -44rem;
    right: -60rem;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(223,108,148,1) 0%,rgba(223,108,148,0) 60%,rgba(223,108,148,0) 100%);
    opacity: 0.2;
    pointer-events: none;
}
.secBnr .bgWrap{
    position: relative;
    z-index: 1;
}
.secBnr .boxReno{
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 15rem;
    margin-bottom: 10rem;
}
.secBnr .bnrList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 6rem;
}
.secBnr .bnrItem{
    max-width: 22rem;
    width: calc((100% - 9rem) / 4);
}
.secBnr .note{
    font-size: var(--pcFontSize11);
    letter-spacing: 0.04em;
    line-height: 1.8;
    color: #666;
    margin-bottom: 4.5rem;
}
@media only screen and (max-width:1215px){
    .secBnr::before{
        display: none;
    }
    .secBnr .boxReno{
        padding-bottom: 8rem;
        margin-bottom: 4rem;
    } 
    .secBnr .bnrList{
        display: flex;
        justify-content: center;
        gap: 2rem 1.3rem;
        margin-bottom: 5rem;
        padding: 0 1.5rem;
    }
    .secBnr .bnrItem{
        width: calc((100% - 1.3rem) / 2);
    }
    .secBnr .note{
        font-size: var(--spFontSize11);
        letter-spacing: 0;
        line-height: 1.55;
        margin-bottom: 10rem;
    }
}