/* key */
#key-box .ttl {
    width: 51%;
    position: absolute;
    top: 22vw;
    left: 3%;
    z-index: 5;
}
#key-box .row {
    flex-direction: column;
}
#key-box .row .col {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
@media only screen and (min-width: 768px) {
    #key-box .ttl {
        top: 30px;
        width: auto;
        left: 30px;
    }
    #key-box .row .photo {
        width: calc(100% - 615px);
        height: 800px;
    }
    #key-box .row {
        flex-direction: row;
    }
    #key-box .row .col {
        flex-direction: column;
        width: 615px;
    }
}


/* sec1  */
#sec1 {
    position: relative;
    padding: 15vw 0 15vw;
}
#sec1 h2 {
    margin: 0 -6% 6vw;
    position: relative;
    z-index: 5;
}
#sec1 .txt {
    margin-bottom: 8vw;
    position: relative;
    z-index: 5;
}
#sec1 .group-photo {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    margin: 0 -5.6%;
    column-gap: 10px;
    flex-wrap: wrap;
}
#sec1 .group-photo .col {
    gap: 10px;
    align-items: flex-start;
    position: relative;
    margin-left: 8vw;
}
#sec1 .group-photo .col::before {
    content: "";
    position: absolute;
    background: url("../img/concept/sec1_deco2.jpg") no-repeat;
    top: 21vw;
    left: -16px;
    width: 28%;
    height: 42vw;
    background-size: cover;
}
#sec1 .group-photo .col .photo1 {
    width: 40%;
}
#sec1 .group-photo .col .photo2 {
    margin-top: 16vw;
    width: 46%;
    margin-bottom: 5vw;
}
#sec1 .group-photo .col2 {
    gap: 10px;
    justify-content: flex-end;
    position: relative;
}
#sec1 .group-photo .col2::before {
    content: "";
    position: absolute;
    background: url("../img/concept/sec1_deco2.jpg") no-repeat;
    top: 21vw;
    right: 0;
    width: 28%;
    height: 45vw;
    background-size: cover;
}
#sec1 .group-photo .col2 .photo3 {
    margin-top: 24vw;
    width: 48%;
    margin-right: 2%;
    z-index: 5;
    position: relative;
}
#sec1 .group-photo .col2 .photo4 {
    width: 41%;
    height: 56vw;
    margin-right: 5vw;
}
#sec1 .deco {
    position: absolute;
    top: -17vw;
    left: -38%;
    width: 160%;
}
@media only screen and (min-width: 768px) {
    #sec1 {
        padding: 38px 0 20px;
    }
    #sec1 h2 {
        margin: 0 auto 40px;
        text-align: center;
    }
    #sec1 .txt {
        margin-bottom: -147px;
        text-align: center;
    }
    #sec1 .group-photo {
        margin: 0 -150px;
        z-index: 5;
        position: relative;
        flex-wrap: nowrap;
    }
    #sec1 .group-photo .col {
        margin-top: -69px;
        width: 690px;
        gap: 9px;
        margin-left: 0;
    }
    #sec1 .group-photo .col::before {
        width: 284px;
        height: 338px;
        left: -99px;
        top: 177px;
    }
    #sec1 .group-photo .col .photo1 {
        width: 266px;
    }
    #sec1 .group-photo .col .photo2 {
        margin-top: 295px;
        width: 240px;
        margin-left: 78px;
        margin-bottom: 0;
    }
    #sec1 .group-photo .col2 {
        width: 770px;
    }
    #sec1 .group-photo .col2::before {
        right: -100px;
        top: 218px;
        width: 207px;
        height: 338px;
    }
    #sec1 .group-photo .col2 .photo3 {
        width: 412px;
        margin-right: -79px;
        margin-top: 263px;
    }
    #sec1 .group-photo .col2 .photo4 {
        width: 272px;
        height: 367px;
    }
    #sec1 .deco {
        top: -35px;
        left: -220px;
        width: 1458px;
    }
}

/* sec 2 */
#sec2 {
    position: relative;
    padding: 15vw 0 15vw;
}
#sec2 h2 {
    font-size: 7.5vw;
    text-align: center;
    margin-bottom: 6vw;
}
#sec2 h2 small {
    font-size: 6vw;
}
#sec2 h2 .red .big {
    font-size: 11vw;
}
#sec2 .group .inner {
    background: #f8f3e8;
    padding: 7vw 6vw;
    margin-bottom: 9vw;
    position: relative;
}
#sec2 .group .inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 100%;
    height: 60vw;
    background: url(../img/concept/sec2_deco1.png) no-repeat;
    background-size: 100%;
}
#sec2 .group .inner .slick-dots {
    position: relative;
}
#sec2 .group .left {
    margin-bottom: 12vw;
}
#sec2 .group .left h3 {
    font-weight: bold;
    text-align: center;
    font-size: 6vw;
    line-height: 1.6;
    margin-bottom: 5vw;
    letter-spacing: 0.15em;
}
@media only screen and (min-width: 768px) {
    #sec2 {
        padding: 97px 0 98px;
    }
    #sec2 .wrap {
        width: 100%;
    }
    #sec2 h2 {
        font-size: 64px;
        margin-bottom: 69px;
        letter-spacing: -6px;
    }
    #sec2 h2 .red {
        font-size: 71px;
        margin-right: 41px;
    }
    #sec2 h2 small {
        font-size: 54px;
    }
    #sec2 h2 .red .big {
        font-size: 95px;
    }
    #sec2 .group {
        display: flex;
        justify-content: space-between;
    }
    #sec2 .group .row {
        width: 44%;
    }
    #sec2 .group .inner {
        padding: 83px 64px 80px 92px;
        margin-bottom: 41px;
        position: absolute;
        top: 0;
        left: 0;
		height: 720px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
    }
	#sec2 .group .pc .js1, #sec2 .group .pc .js2{
		height: 720px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#sec2 .group .pc .js1 .slick-slide .ob,#sec2 .group .pc .js2 .slick-slide .ob{
		height: 560px;
	}
    #sec2 .group .inner::before {
        width: 924px;
        height: 552px;
        z-index: 0;
        top: 30px;
        left: -70px;
    }
	#sec2 .group .inner .photo{
		height: 560px;
	}
    #sec2 .slick-dots {
        position: relative;
    }
    #sec2 .group .left {
        width: 418px;
        margin: 90px auto 0;
        min-height: 680px;
        padding-left: 50px;
        position: relative;
        z-index: 5;
    }
    #sec2 .group .left h3 {
        font-size: 30px;
        margin-bottom: 20px;
        line-height: 50px;
        text-align: left;
        letter-spacing: 2px;
    }
    #sec2 .group .pc {
        width: 56%;
    }
    #sec2 .group .pc .js1, #sec2 .group .pc .js2 {
        padding: 87px 64px 30px 92px;
        margin-bottom: 30px;
        background: #f8f3e8;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }
    #sec2 .group .pc .js1.show {
        opacity: 1;
        visibility: visible;
    }
    #sec2 .group .pc .js2.show {
        opacity: 1;
        visibility: visible;
    }
    #sec2 .group .pc .js1::before, #sec2 .group .pc .js2::before {
        content: "";
        position: absolute;
        top: 0;
        left: -5%;
        width: 100%;
        height: 60vw;
        background: url(../img/concept/sec2_deco1.png) no-repeat;
        background-size: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1300px) {
	#sec2 .group .left{
		padding-left: 0;
	}
	#sec2 .group .inner{
		padding: 83px 24px 80px 42px;
	}
	#sec2 .group .pc .js1, #sec2 .group .pc .js2{
		padding: 83px 24px 80px 42px;
	}
}

/* sec 3 */
#sec3 {
    position: relative;
    padding: 15vw 0 15vw;
    background: url(../img/concept/sec3_bg.jpg) no-repeat;
    background-size: cover;
}
#sec3 h2 {
    margin-bottom: 5vw;
    margin-top: -25vw;
}
#sec3 h2 .row .t1 {
    display: inline-block;
    width: 50%;
    margin-left: 13%;
    margin-bottom: -8vw;
}
@media only screen and (min-width: 768px) {
    #sec3 {
        padding: 20px 0 82px;
    }
    #sec3 .wrap {
        width: 1200px;
        padding: 0 20px;
    }
    #sec3 h2 {
        margin-bottom: 14px;
        margin-top: -100px;
        text-align: center;
    }
    #sec3 h2 .row {
        display: flex;
        align-items: baseline;
        margin-bottom: -50px;
    }
    #sec3 h2 .row .t1 {
        margin-bottom: -20px;
        margin-left: 0;
        width: auto;
    }
    #sec3 .bnr {
        text-align: center;
        width: 1067px;
        margin: 0 34px;
    }

}


/* sec 4 */
#sec4 {
    position: relative;
    padding: 15vw 0 15vw;
    overflow: hidden;
}
#sec4 h2 {
    font-size: 8vw;
    text-align: center;
    letter-spacing: 0.15em;
    margin-bottom: 8vw;
    position: relative;
    z-index: 5;
}
#sec4 h2 .red .big {
    font-size: 12vw;
}
#sec4 .row {
    position: relative;
    z-index: 5;
}
#sec4 .row::before {
    content: "";
    position: absolute;
    left: 4px;
    width: 1px;
    bottom: -50px;
    background: #000;
    top: 13px;
    display: inline-block;
}
#sec4 .row dl {
    margin-bottom: 18px;
    letter-spacing: 1px;
    position: relative;
    margin-left: 23px;
}
#sec4 .row dl dt {
    font-size: 22px;
    margin-bottom: 3vw;
}
#sec4 .row dl dt small {
    font-size: 13px;
}
#sec4 .row dl::before {
    content: "";
    position: absolute;
    left: -23px;
    top: 12px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}
#sec4 .row dl dd {
    font-size: 16px;
}
#sec4 .deco {
    position: absolute;
    bottom: -15vw;
    left: 0;
    width: 25%;
}
#sec4 .deco2 {
    position: absolute;
    right: 0;
    top: -45vw;
    width: 50%;
}
@media only screen and (min-width: 768px) {
    #sec4 {
        padding: 130px 0 151px;
    }
    #sec4 .wrap {
        width: 1270px;
        padding: 0 20px;
    }
    #sec4 h2 {
        font-size: 74px;
        margin-bottom: 80.4px;
        text-align: left;
        letter-spacing: 0px;
    }
    #sec4 h2 .red {
        font-size: 71px;
    }
    #sec4 h2 .red .big {
        font-size: 95px;
    }
    #sec4 .row {
        margin-left: 140px;
    }
    #sec4 .row::before {
        transform: rotate(-31.5deg);
        left: 197px;
        top: -38px;
        bottom: -124px;
    }
    #sec4 .row dl {
        display: flex;
        align-items: baseline;
        margin-bottom: 38px;
        padding-left: 40px;
    }
    #sec4 .row dl dt {
        font-size: 41px;
        margin-bottom: 20px;
        margin-right: 21px;
    }
    #sec4 .row dl dt small {
        font-size: 20px;
    }
    #sec4 .row dl::before {
        width: 17px;
        height: 17px;
    }
    #sec4 .row dl dd {
        font-size: 20px;
    }
    #sec4 .row .row1 {
        padding-left: 40px;
    }
    #sec4 .row .row2 {
        margin-left: 85px;
        padding-left: 40px;
    }
    #sec4 .row .row3 {
        margin-left: 144px;
        padding-left: 40px;
    }
    #sec4 .row .row4 {
        margin-left: 206px;
        padding-left: 40px;
    }
    #sec4 .row .row5 {
        margin-left: 267px;
    }
    #sec4 .row .row6 {
        margin-left: 329px;
    }
    #sec4 .deco {
        bottom: -140px;
        left: 20px;
    }
    #sec4 .deco2 {
        top: -805px;
        width: auto;
        right: calc(50% - 50vw);
    }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    #sec4 .row {
        margin-left: 50px;
    }
}