@charset "UTF-8";

/*----------------------------------------------------
	☆PC
----------------------------------------------------*/

/*--- mainTitle --*/
#mainTitle .title .en::before{
    content: "WELLBEING";
}
#mainTitle .title::before{
    background: url("../images/wellbeing/icon_mainTitle.png") center center / contain no-repeat;
}

#mainTitle .deco01{
    width: 250px;
    left: 15%;
    top: 50px;
    z-index: 0;
}
#mainTitle .deco02{
    width: 250px;
    right: 17%;
    top: 50px;
    z-index: 0;
}

/*--- common --*/
#contents .inrWhiteBox {
    max-width: 1200px;
    padding-top: 0;
}
#contents .inrWhiteBox .head08{
    transform: translate(0,-50%);
}
#contents .inrWhiteBox .column{
    border: 1px solid #adb7e8;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}
#contents .inrWhiteBox .column dt{
    width: 100px;
    margin-right: 20px;
}
#contents .inrWhiteBox .column dd{
    max-width: 550px;
}

/*--- intro --*/
#contents .intro{
    padding-bottom: 100px;
}

/*--- wlb --*/

#contents .wlb{
    padding-bottom: 0;
}
#contents .time,
#contents .facilities,
#contents .benefits .support,
#contents .benefits .health,
#contents .benefits .child,
#contents .benefits .other{
    margin-top: 120px;
}

/*--- time --*/
#contents .time{
    position: relative;
}

#contents .wlbList{
    position: relative;
    z-index: 1;
}
#contents .wlbList ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px 35px;
    position: relative;
    padding-top: 30px;
}
#contents .wlbList li{
    width: calc(33.333% - 27px);
    position: relative;
}
#contents .wlbList li.green{
    background: #66dd9f;
}
#contents .wlbList li .inner{
    padding: 70px 30px 40px;
    height: 100%;
}
#contents .wlbList li.green .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #d9f6e7;
}
#contents .wlbList li .icon{
    width: 100px;
    background: #66dd9f;
    border: 2px solid #000;
    padding: 3px;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-50%);
}
#contents .wlbList li.green .icon{
    background: #66dd9f;
}
#contents .wlbList li .icon img{
    background: #fff;
    border: 2px solid #000;
    border-radius: 100px;
    display: block;
}
#contents .wlbList li.green .title{
    color: #00893e;
}
#contents .wlbList li .title{
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#contents .wlbList li .text{
    line-height: 1.75;
}

#contents .wlbList:not(.pattern02) li::after {
    width: 16px;
    height: 90%;
    content: "";
    display: block;
    background: url(../images/common/pipe_parts_tate.png) center top / contain repeat-y;
    position: absolute;
    z-index: -1;
    bottom: -150px;
    left: calc(50% - 8px);
}
#contents .wlbList.pattern03 li::after{
    display: none;
}

#contents .wlbList .deco01 {
    width: 100%;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}
#contents .wlbList .deco02 {
    width: 187px;
    bottom: -50px;
    right: -140px;
    z-index: 1;
}

#contents .wlbList li.yellow{
    background: #e9651f;
}
#contents .wlbList li.yellow .inner{
    background: url("../images/common/bg_check.png") left top / 72px repeat #ffeecc;
}
#contents .wlbList li.yellow .title{
    color: #e9651f;
    line-height: 1.6;
}
#contents .wlbList li.yellow .icon{
    background: #e9651f;
}
#contents .wlbList li.large{
    width: 100%;
}
#contents .wlbList li.large .text{
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}


/*--- facilities --*/

#contents .facilities{
    position: relative;
    background: #66dd9f;
}
#contents .facilities .inner{
    padding: 80px 65px;
}
#contents .facilities .facilityList{
    display: flex;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}
#contents .facilities .facilityList li{
    width: calc(50% - 30px);
}
#contents .facilities .facilityList li .image{
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 15px;
}
#contents .facilities .facilityList li .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #00893e;
    margin-bottom: 15px;
    line-height: 1.5;
}
#contents .facilities .facilityList li .text{
    text-align: center;
    line-height: 1.75;
}

#contents .facilities .leadToTour{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #e9651f;
    margin-bottom: 15px;
}
#contents .facilities .btn01{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

#contents .facilities .deco01 {
    width: 209px;
    left: -132px;
    top: -90px;
}
#contents .facilities .deco02{
    width: 209px;
    right: -120px;
    bottom: -200px;
}

#contents .facilities .deco03,
#contents .benefits .health .deco05{
    width: 60%;
    max-width: 211px;
    top: -5px;
    right: 20px;
    transform: translate(0,-100%);
}

/*--- benefits --*/
#contents .benefits{
    padding-top: 100px;
}

#contents .benefits .anchorLinkList li {
    width: calc(33% - 12px);
}
#contents .benefits .anchorLinkList li a{
    color: #e9651f;
}
#contents .benefits .anchorLinkList li a::after{
    background: #e9651f;
}

#contents .benefits .head01::after{
    background: #e9651f;
}
#contents .benefits .head01 .en{
    color: #ffbb33;
}
#contents .benefits .head01 .jp{
    color: #e9651f;
}

#contents .benefits .vacation .wlbList ul{
    padding-top: 0;
}
#contents .benefits .vacation .wlbList ul li .inner{
    padding-top: 40px;
}
#contents .benefits .vacation .wlbList ul li .title{
    margin-bottom: 0;
}
#contents .benefits .vacation .wlbList ul li .image{
    max-width: 200px;
    margin: 0 auto 10px;
}
#contents .benefits .vacation .wlbList .deco02 {
    width: 230px;
    top: -200px;
    left: -160px;
    z-index: -1;
}



#contents .wlbList .pipe {
    width: 16px;
    height: 99%;
    background: url(../images/common/pipe_parts_tate.png) center top / contain repeat-y;
    position: absolute;
    z-index: -1;
    top: 1%;
    transform: translateX(-8px);
}
#contents .wlbList .pipe:nth-child(1 of .pipe){
    left: 15%;
}
#contents .wlbList .pipe:nth-child(2 of .pipe){
    left: 50%;
}
#contents .wlbList .pipe:nth-child(3 of .pipe){
    left: 85%;
}

#contents .benefits .support .wlbList .deco03 {
    width: 201px;
    bottom: -50px;
    right: -140px;
    z-index: 2;
}

#contents .benefits .health.frameBox.frameBoxPattern02.yellow > .inner{    
    background: url(../images/common/bg_check.png) left top / 72px repeat #ffbb33;
}
#contents .benefits .health.frameBox.frameBoxPattern02.yellow .frameBox .inner{    
    background: #fff;
}

#contents .benefits .health .deco04{
    width: 250px;
    left: -94px;
    top: -58px
}

#contents .benefits .health.frameBox.frameBoxPattern02.yellow .head01 .en,
#contents .benefits .health.frameBox.frameBoxPattern02.yellow .head01 .jp{
    color: #fff;
}
#contents .benefits .health.frameBox.frameBoxPattern02.yellow .head01::after{
    background: #fff;
}

#contents .wlbList.pattern04 li {
    width: calc(50% - 27px);
}
#contents .wlbList.pattern04 li::after{
    content: "";
    display: block;
    background: #adb7e8;
    border: 2px solid #000;
    width: 40px;
    left: calc(50% - 22px);
    bottom: -120px;
}
#contents .wlbList.pattern04 li::before{
    content: "";
    display: block;
    width: 60px;
    aspect-ratio: 60 / 16;
    background: url( "../images/common/parts_pipeEnd_top.svg") center center / contain no-repeat;
    position: absolute;
    left: calc(50% - 30px);
    bottom: 0;
    margin-bottom: calc(-50px - 16.5%);
    z-index: 1;
}

#contents .benefits .child .columnContainer{
    position: relative;
    margin-bottom: 80px;
}
#contents .benefits .child .deco07{
    width: 206px;
    top: -106px;
    right: -106px;
}
#contents .benefits .other .deco06 {
    width: 200px;
    right: -100px;
    bottom: -130px;
    z-index: 2;
}



/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/



/*----------------------------------------------------
	☆901以上　PCのみ & HOVER
----------------------------------------------------*/

@media screen and (min-width:901px) {
}


/*----------------------------------------------------
	☆UNDER 1240
----------------------------------------------------*/

@media screen and (max-width:1240px) {
    #contents .wlbList:not(.pattern02) li::after {
        bottom: -50px;
        margin-bottom: -32%;
    }
    
    #contents .wlbList.pattern04 li::after {
        bottom: -50px;
        margin-bottom: -21%;
    }
    
    #contents .wlbList ul,
    #contents .facilities .facilityList{
        gap: 60px 0;
    }
    #contents .wlbList li {
        width: calc(33.333% - 10px);
    }
    #contents .facilities .facilityList li {
        width: calc(50% - 12px);
    }
    #contents .health.frameBoxPattern02{
        width: 100%;
    }
    
    #contents .wlbList.pattern04 li::before {
        margin-bottom: calc(-50px - 17.5%);
    }
    
}

/*----------------------------------------------------
	☆UNDER 1100
----------------------------------------------------*/

@media screen and (max-width:1100px) {  
    
    #contents .wlbList li,
    #contents .wlbList.pattern03 li{
        width: 100%;
    }
    #contents .wlbList:not(.pattern02) li{
        position: relative;
    }
    #contents .wlbList:not(.pattern02) li::after{
        bottom: 0;
        margin-bottom: -19%;
    }
    
    #contents .wlbList .deco02 {
        width: 140px;
        right: -70px;
        bottom: -65px;
    }
    
    #contents .facilities .deco01 {
        width: 157px;
        left: -111px;
        top: -70px;
    }
    #contents .facilities .deco02 {
        width: 157px;
        right: -70px;
        bottom: -70px;
    }
    
    
    
    #contents .vacation .wlbList ul{
        gap:  20px;
    }
    #contents .vacation .wlbList ul li::after {
        bottom: 0;
        margin-bottom: -18%;
    }
    #contents .wlbList .pipe:nth-child(2 of .pipe){
        display: none;
    }
    #contents .wlbList .pipe{
        left: 15%;
        height: calc(100% - 50px);
        top: 50px;
    }
    
    #contents .benefits .vacation .wlbList .deco02 {
        width: 168px;
        top: -200px;
        left: -70px;
        z-index: -1;
    }
    #contents .benefits .support .wlbList .deco03 {
        width: 190px;
    }
    
    #contents .benefits .child .deco07 {
        width: 200px;
        top: -156px;
        right: -160px;
    }
    
    #contents .child .wlbList.pattern04 li::after {
        bottom: -50px;
        margin-bottom: -21%;
    }
    
    #contents .benefits .other .deco06 {
        width: 170px;
        right: -90px;
        bottom: -120px;
    }
    
    #contents .benefits .support .wlbList .deco03 {
        width: 160px;
        right: -83px;
        bottom: -170px;
    }
    
    #contents .benefits .health .deco04 {
        width: 206px;
    }
    
    
}

/*----------------------------------------------------
	☆UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {  
    
    
    #mainTitle .deco01,
    #mainTitle .deco02 {
        width: 175px;
        top: 20px;
    }
    
    #contents .inrWhiteBox .column{
        flex-direction: column;
    }
    #contents .inrWhiteBox .column dt{
        margin-right: 0;
        margin-bottom: 15px;
        max-width: 150px;
    }
    #contents .inrWhiteBox .column dd{
        width: 100%;
    }
    
    #contents .wlbList.pattern03 li{
        width: 100%;
    }
    
    #mainTitle .deco01{
        left: 0;
    }
    #mainTitle .deco02{
        right: 0;
    }
    
    
    
}


/*----------------------------------------------------
	☆UNDER 768
----------------------------------------------------*/

@media screen and (max-width:768px) {
    
    #contents .wlbList.pattern04 li{
        width: 100%;
    }
    #contents .wlbList.pattern04 li:nth-child(1)::before{
        display: none;
    }
    
    
    #contents .facilities .facilityList{
        margin-bottom: 40px;
    }
    #contents .facilities .facilityList {
        gap: 30px 0;
    }
    #contents .facilities .facilityList li{
        width: 100%;
    }
    #contents .facilities .facilityList li .image{
        margin-bottom: 12px;
    }
    
    #contents .child .wlbList.pattern04 li::after {
        bottom: 0;
        margin-bottom: -19%;
    }
    #contents .child .wlbList.pattern04 li::before {
        margin-bottom: -54px;
    }
    
    
}

/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    #mainTitle .deco01, #mainTitle .deco02 {
        width: 110px;
        top: 10px;
    }
    
    .lead01{
        text-align: justify;
    }
    .lead01 br{
        display: none;
    }
    
    
    
    #contents .intro {
        padding-bottom: 50px;
    }
    
    #contents .time, #contents .facilities, #contents .benefits .support, #contents .benefits .health, #contents .benefits .child, #contents .benefits .other {
        margin-top: 70px;
    }
    
    #mainTitle .deco01 {
        left: 0;
    }    
    #mainTitle .deco02 {
        right: 0;
    }
    
    /*--- wlb ---*/
    #contents .wlbList ul {
        gap: 50px 0;
    }    
    #contents .wlbList li .icon {
        width: 80px;
    }
    #contents .wlbList li .inner {
        padding: 50px 30px 30px;
    }
    #contents .wlbList li .title {
        font-size: 18px;
        margin-bottom: 7px;
    }
    #contents .wlb .wlbList .deco02 {
        width: 103px;
        right: -33px;
        top: auto;
        bottom: -40px;
    }
    
    #contents .facilities .facilityList {
        gap: 30px 0;
    }    
    #contents .facilities .inner {
        padding: 40px 25px;
    }
    #contents .facilities .facilityList li .image {
        border-radius: 15px;
    }
    #contents .facilities .facilityList li .title {
        font-size: 16px;
        margin-bottom: 5px;
    }
    #contents .facilities .facilityList li .text{
        line-height: 1.5;
    }
    
    #contents .facilities .deco01 {
        width: 110px;
        left: -67px;
        top: -118px;
        z-index: 1;
    }
    #contents .facilities .deco02 {
        width: 110px;
        right: -54px;
        bottom: 150px;
    }
    
    #contents .facilities .leadToTour {
        font-size: 15px;
    }
    
    #contents .benefits {
        padding-top: 70px;
        margin-top: 40px;
    }
    
    #contents .benefits .anchorLinkList li{
        width: 100%;
    }
    #contents .benefits .anchorLinkList li:nth-child(3),
    #contents .benefits .anchorLinkList li:nth-child(4) {
        width: calc(50% - 10px);
    }
    
    
    #contents .benefits .vacation .wlbList .deco02 {
        width: 115px;
        top: -115px;
        left: auto;
        right: -37px;
    }
    #contents .benefits .vacation .wlbList ul li .image {
        max-width: 140px;
    }
    #contents .vacation .wlbList ul li::after {
        margin-bottom: -20%;
    }
    #contents .benefits .support .wlbList .deco03 {
        width: 110px;
        right: -31px;
        bottom: -85px;
        left: auto;
    }
    #contents .facilities .deco03, #contents .benefits .health .deco05 {
        width: 50%;
        max-width: 200px;
        top: -7px;
        right: 0px;
    }
    #contents .benefits .health.frameBox.frameBoxPattern02.yellow > .inner{
        padding: 40px 20px;
    }
    #contents .benefits .health .deco04 {
        width: 140px;
        left: -58px;
        top: -58px;
    }
    #contents .health .wlbList li .inner {
        padding: 50px 20px 30px;
    }
    #contents .benefits .child .deco07 {
        width: 125px;
        top: -126px;
        right: -55px;
    }
    #contents .benefits .child .columnContainer {
        margin-bottom: 40px;
    }
    #contents .benefits .other .deco06 {
        width: 118px;
        right: -35px;
        bottom: -67px;
    }
}