/* key */
#key-box .img img {
    object-position: right 33% top 0;
}
@media only screen and (min-width: 768px) {
    #key-box .img img {
        object-position: center;
    }
}



/* sec1 */
#sec1 {
    position: relative;
    padding: 20vw 0 0;
	background-color: #605757;
}
#sec1::before {
    content: "";
    position: absolute;
    top: -24vw;
    border-radius: 50%;
    border: 1px solid #fff;
    left: -50px;
    width: 40vw;
    height: 40vw;
    z-index: 0;
}
#sec1 .row {
    flex-direction: column;
}
#sec1 .row .left h2 {
    font-size: 6vw;
    margin-bottom: 8vw;
}
#sec1 .row .left .catch {
    font-size: 6.5vw;
    line-height: 1.5;
    margin-bottom: 13vw;
}
#sec1 .row .txt li {
    margin-bottom: 6vw;
}
#sec1 .spacer {
    height: 120vw;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}
#sec1 .horizontal-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #605757;
    background: linear-gradient(180deg, #605757 38%, rgba(136, 128, 126, 1) 64%, rgba(180, 173, 169, 1) 84%);
}
#sec1 .horizontal-section .horizontal-inner {
    display: flex;
    height: 100%;
    width: max-content;
}
#sec1 .horizontal-section .horizontal-inner .h-item {
    align-items: flex-start;
    padding-left: 20vw;
    width: auto;
    padding-top: 35vw;
    padding-right: 100px;
}
#sec1 .horizontal-section .horizontal-inner .h-item p {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    width: 77vw;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo1 {
    margin-right: 120px;
    width: 92vw;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo2 {
    align-self: flex-start;
    width: 12%;
    margin-top: 48vw;
    margin-right: 120px;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo3{
	
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo4 {
    margin-top: 66vw;
    margin-left: -30px;
    margin-right: 80px;
    width: 161vw;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo5 {
    width: 8%;
    margin-right: 5%;
    margin-top: -9vw;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo6 {
    width: 12%;
    margin-top: 38vw;
    margin-right: 5%;
}
#sec1 .horizontal-section .horizontal-inner .h-item .photo7 {
    width: 179vw;
    margin-top: 0;
}
@media only screen and (min-width: 768px) {
    #sec1 {
        padding: 255px 0 0;
    }
    #sec1 .wrap {
        padding: 0 20px;
        width: 1200px;
    }
    #sec1::before {
        width: 390px;
        height: 390px;
        top: -22px;
        left: calc(50% - 58vw);
    }
    #sec1 .row {
        margin-bottom: 120px;
        flex-direction: row;
        justify-content: space-between;
    }
    #sec1 .row .left {
        width: 450px;
        margin-left: 79px;
    }
    #sec1 .row .left h2 {
        font-size: 27px;
        margin-bottom: 55px;
        letter-spacing: 1px;
    }
    #sec1 .row .left .catch {
        font-size: 30px;
        margin-bottom: 55px;
        letter-spacing: 1px;
    }
    #sec1 .row .txt {
        width: 557px;
        margin-top: -112px;
        margin-right: 20px;
        letter-spacing: 0.1em;
    }
    #sec1 .row .txt li {
        margin-bottom: 32px;
    }
    #sec1 .spacer {
        height: 100vh;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item {
        padding-left: 100px;
        margin-top: 0;
        padding-top: 90px;
        width: auto;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo1 {
        width: 458px;
        margin-right: 235px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo2 {
           margin-top: 280px;
           width: 348px;
           margin-right: 205px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo3 {
        margin-top: 30px;
        width: 308px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo4 {
        margin-left: -20px;
        margin-right: 197px;
        width: 597px;
        margin-top: 337px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo5 {
        margin-top: 0px;
        width: 325px;
        margin-right: 220px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo6 {
        margin-top: 325px;
        width: 252px;
        margin-right: 348px;
    }
    #sec1 .horizontal-section .horizontal-inner .h-item .photo7 {
        margin-top: 30px;
        width: 746px;
    }
}
@media only screen and (min-width: 768px) and (max-height: 800px) {
	#sec1 .horizontal-section .horizontal-inner .h-item{
		padding-top: 0;
	}
	#sec1 .horizontal-section .horizontal-inner .h-item .photo4{
		margin-top: 377px;
	}
	#sec1 .horizontal-section .horizontal-inner .h-item .photo7{
		width: 610px;
	}
}

/* sec 2 */
#sec2 {
    position: relative;
    padding: 15vw 0 15vw;
    color: #000;
    background-color: #b4ada9;
    background-size: 4%;
}
#sec2 h2 {
    font-size: 7vw;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 13vw;
    letter-spacing: 0.05em;
}
#sec2 h2 span {
    font-size: 4vw;
    display: block;
}
#sec2 .row {
    flex-direction: column;
    margin-bottom: 15vw;
}
#sec2 .row .photo {
    margin-bottom: 8vw;
}
#sec2 .row .col {
    border-left: 1px solid #898481;
}
#sec2 .row .col h3 {
    font-size: 5vw;
    padding-bottom: 5%;
    border-bottom: 1px solid #898481;
    padding-left: 5%;
    margin-bottom: 6vw;
    padding-top: 3vw;
}
#sec2 .row .col .txt {
    padding-left: 5%;
}
#sec2 .row .col .txt span {
    background: #D2CECB;
    padding: 0 5px;
}
#sec2 .row2 .video {
    margin-bottom: 8vw;
}
#sec2 .row2 .video #leadVideo {
    width: 100%;
    height: 70vw; /* 縦幅を大きく調整（元: 70vw） */
}
#sec2 .row2 .video #leadVideo video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (min-width: 768px) {
    #sec2 {
        padding: 100px 0 154px;
        background-size: auto;
    }
    #sec2 .wrap {
        padding: 0 20px;
        width: 1240px;
    }
    #sec2 h2 {
        font-size: 35px;
        margin-bottom: 85px;
        line-height: 58px;
    }
    #sec2 h2 span {
        font-size: 20px;
        letter-spacing: 0px;
    }
    #sec2 .row {
        flex-direction: row;
        margin-bottom: 90px;
        justify-content: space-between;
    }
    #sec2 .row .photo {
        margin-bottom: 0;
		margin-left: -2px;
		margin-right: 0;
		max-width: 601px;
		height: 489px;
    }
	#sec2 .row.row3 .photo {
		height: 441px;
	}
    #sec2 .row .col {
        width: 576px;
        border-width: 2px;
        align-self: flex-start;
        min-height: 490px;
    }
    #sec2 .row .col h3 {
        font-size: 25px;
        margin-bottom: 30px;
        padding-top: 67px;
        padding-left: 77px;
        letter-spacing: 1px;
        border-width: 2px;
    }
    #sec2 .row .col .txt {
        padding-left: 68px;
    }
    #sec2 .row2 {
        flex-direction: row-reverse;
        justify-content: flex-start;
        margin-bottom: 80px;
    }
    #sec2 .row2 .video {
        margin-bottom: 30px;
        width: 690px;
        align-self: flex-start;
    }
    #sec2 .row2 .col {
        width: 442px;
        border-left: 0;
        border-right: 2px solid #898481;
        margin-right: 16px;
    }
    #sec2 .row2 .col h3 {
        padding-left: 0;
        line-height: 40px;
    }
    #sec2 .row2 .col .txt {
        padding-right: 49px;
        padding-left: 0;
    }
    #sec2 .row2 .video #leadVideo {
        height: 470px; /* 縦幅を大きく調整（元: 497px） */
    }
    #sec2 .row2 .video #leadVideo video{
        width: 100%;
        height: 104%;
        object-fit: cover;
    }
    #sec2 .row3 .col {
        min-height: 444px;
    }
    #sec2 .row3 .col h3 {
        padding-top: 80px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1300px) {
    #sec2 .row .photo {
        max-width: calc(100% - 610px);
        height: 489px;
    }
    #sec2 .row .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* sec 3 */
#sec3 {
    position: relative;
    padding: 0;
}
#sec3 .bg {
    min-height: 100vh;
}
#sec3 .bg img {
    height: 100vh;
    object-position: right 72% top 0;
}
#sec3 .bg::before {
    content: "";
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5;
    transition: all 0.5s ease-in-out;
}
#sec3 .bg.active::before {
    opacity: 1;
    visibility: visible;
}
#sec3 .bg.active img {
    filter: blur(2px)
}
#sec3 .content-text {
    padding: 10vw 0 10vw;
    position: relative;
    z-index: 6;
}
#sec3 .content-text h2 {
    text-align: center;
    font-size: 7vw;
    margin-bottom: 13vw;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: #fffcf0;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7);
}
#sec3 .content-text h2 span {
    font-size: 4vw;
    letter-spacing: 1px;
}
#sec3 .content-text .txt {
    margin-bottom: 10vw;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7), 0px 0px 10px rgba(0, 0, 0, 0.7);
}
#sec3 .content-photo {
    padding-bottom: 16vw;
}
#sec3 .content-photo .photo1 {
    width: 42%;
    margin-bottom: -8vw;
}
#sec3 .content-photo .photo2 {
    width: 48%;
    margin-left: auto;
    margin-bottom: 8vw;
}
#sec3 .content-photo .photo3 {
    width: 67%;
    margin-bottom: 13vw;
    margin-left: 5%;
}
#sec3 .content-photo .photo4 {
    width: 43%;
    margin-bottom: -34vw;
}
#sec3 .content-photo .photo5 {
    width: 46%;
    margin-bottom: 11vw;
    margin-left: auto;
}
#sec3 .content-photo .photo6 {
    width: 60%;
    margin-left: auto;
    margin-bottom: 4vw;
}
#sec3 .content-photo .photo7 {
    width: 48%;
    margin-bottom: 8vw;
    margin-left: 23%;
}
#sec3 .content-photo .photo8 {
    width: 76%;
}
@media only screen and (min-width: 768px) {
    #sec3 .wrap {
        padding: 0 20px;
        width: 1200px;
    }
    #sec3 .bg img {
        object-position: center
    }
    #sec3 .content-text {
        padding: 30px 0 30px;
        color: #fffcf0;
    }
    #sec3 .content-text h2 {
        font-size: 35px;
        margin-bottom: 51px;
        text-shadow: none;
    }
    #sec3 .content-text h2 span {
        font-size: 22px;
    }
    #sec3 .content-text .txt {
        margin-bottom: 30px;
        text-align: center;
    }
    #sec3 .content-photo {
        padding-bottom: 161px;
    }
    #sec3 .content-photo .photo1 {
        margin-bottom: -118px;
        width: 338px;
        margin-left: 30px;
    }
    #sec3 .content-photo .photo2 {
        margin-bottom: -19px;
        width: 339px;
        margin-right: -50px;
    }
    #sec3 .content-photo .photo3 {
        margin-bottom: 228px;
        margin-left: 100px;
    }
    #sec3 .content-photo .photo4 {
        margin-bottom: -448px;
        margin-left: 30px;
    }
    #sec3 .content-photo .photo5 {
        margin-bottom: 148px;
        margin-right: -53px;
    }
    #sec3 .content-photo .photo6 {
        margin-bottom: -60px;
        width: 357px;
        margin-right: calc(50% - 46vw);
    }
    #sec3 .content-photo .photo7 {
        margin-bottom: -100px;
        width: 225px;
        margin-left: 528px;
    }
    #sec3 .content-photo .photo8 {
        width: 545px;
        margin-left: -71px;
    }
}


/* sec 4 */
#sec4 {
    position: relative;
    padding: 16vw 0 9vw;
    color: #000;
    background: #b4ada9;
}
#sec4::before {
    content: "";
    position: absolute;
    top: -9vw;
    border-radius: 50%;
    border: 1px solid #fff;
    right: -50px;
    width: 40vw;
    height: 40vw;
    z-index: 0;
}
#sec4 h2 {
    font-size: 4vw;
    text-align: center;
    margin-bottom: 8vw;
}
#sec4 h2 span {
    font-size: 7vw;
}
#sec4 .row {
    flex-direction: column;
    margin-bottom: 6vw;
}
#sec4 .row .photo {
    margin-bottom: 6vw;
}
#sec4 .row .col .txt {
    margin-bottom: 8vw;
}
#sec4 .row .col .note {
    margin-bottom: 6vw;
}
#sec4 .row .col .note li {
    position: relative;
    padding-left: 20px;
}
#sec4 .row .col .note li span {
    position: absolute;
    top: 0;
    left: 0;
}
#sec4 .row2 {
    flex-direction: column;
}
#sec4 .row2 .photo2 {
    margin-bottom: 6vw;
}
#sec4 .row2 .txt2 {
    margin-bottom: 6vw;
}
@media only screen and (min-width: 768px) {
    #sec4 {
        padding: 165px 0 69px;
    }
    #sec4 .wrap {
        padding: 0 20px;
        width: 1222px;
    }
    #sec4::before {
        width: 390px;
        height: 390px;
        left: calc(50% + 138px);
        top: -77px;
    }
    #sec4 h2 {
        font-size: 25px;
        margin-bottom: 86px;
        line-height: 45px;
    }
    #sec4 h2 span {
        font-size: 55px;
    }
    #sec4 .row {
        margin-bottom: 60px;
        flex-direction: row;
        justify-content: space-between;
    }
    #sec4 .row .photo {
        margin-bottom: 30px;
        margin-left: -120px;
    }
    #sec4 .row .col {
        width: 489px;
        margin-top: 25px;
    }
    #sec4 .row .col .txt {
        margin-bottom: 18px;
    }
    #sec4 .row .col .note {
        margin-bottom: 30px;
    }
    #sec4 .row2 {
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-left: 210px;
    }
    #sec4 .row2 .photo2 {
        margin-bottom: 30px;
        margin-top: -84px;
        margin-right: -44px;
    }
    #sec4 .row2 .txt2 {
        margin-bottom: 30px;
        width: 379px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1300px) {
    #sec4 .row .photo {
        max-width: 57%;
        height: 500px;
    }
    #sec4 .row .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* sec 5 */
#sec5 {
    position: relative;
    padding: 5vw 0 15vw;
    background: #b4ada9;
}
#sec5 .box {
    padding: 10% 5%;
    background: #605757;
    color: #e4e1e0;
}
#sec5 .box h2 {
    font-size: 6vw;
    margin-bottom: 8vw;
    text-align: center;
    line-height: 1.5;
}
#sec5 .box .txt {
    border-bottom: 1px solid #e4e1e0;
    padding-bottom: 7vw;
    margin-bottom: 9vw;
}
#sec5 .box h3 {
    font-size: 5vw;
    text-align: center;
    margin-bottom: 6vw;
}
#sec5 .box .btn-instagram {
    margin-bottom: 8vw;
}
#sec5 .box .tel {
    margin-bottom: 6vw;
    text-align: center;
}
#sec5 .box .tel dt .tel-icon {
    font-size: 6vw;
}
#sec5 .box .tel dt .tel-icon span {
    font-size: 4vw;
	font-style: italic;
}
#sec5 .box .tel dd {
    font-size: 13px;
}
@media only screen and (min-width: 768px) {
    #sec5 {
        padding: 30px 0 130px;
    }
    #sec5 .box {
        padding: 68px 68px 29px;
    }
    #sec5 .box h2 {
        font-size: 30px;
        margin-bottom: 34px;
    }
    #sec5 .box .txt {
        padding-bottom: 21px;
        text-align: center;
        width: 495px;
        margin: 0 auto 42px;
    }
    #sec5 .box h3 {
        font-size: 25px;
        margin-bottom: 30px;
    }
    #sec5 .box .btn-instagram {
        margin-bottom: 23px;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    #sec5 .box .btn-instagram a {
        font-size: 20px;
        padding: 7px 88px;
        letter-spacing: 0;
    }
    #sec5 .box .btn-instagram a::before {
        width: 31px;
        left: 47px;
        top: 27px;
    }
    #sec5 .box .btn-instagram a::after {
        top: 40px;
    }
    #sec5 .box .tel {
        margin-bottom: 30px;
    }
    #sec5 .box .tel dt .tel-icon {
        font-size: 30px;
    }
    #sec5 .box .tel dt .tel-icon span {
        font-size: 18px;
    }
    #sec5 .box .tel dd {
         font-size: 16px;
		line-height: 26px;
		margin-top: 7px;
    }
}

#leadVideo iframe{
    position: absolute;
    z-index: 0;
    width: 164% !important;
    height: 150% !important;
    top: -80px !important;
    left: -80px !important;
    overflow: hidden;
    opacity: 1;
    user-select: none;
    margin-top: 0px;
    margin-left: 0px;
    max-width: initial;
}
@media only screen and (min-width: 768px) {
#leadVideo iframe{
    position: absolute;
    z-index: 0;
    width: 156% !important;
    height: 151% !important;
    top: -76px !important;
    left: -200px !important;
    overflow: hidden;
    opacity: 1;
    user-select: none;
    margin-top: 0px;
    margin-left: 0px;
    max-width: initial;
}
}

.mail_icon_conc{
    width: 10% !important;
    margin: 0 auto 5vw;
    display: block;
}
@media only screen and (min-width: 768px) {
    .mail_icon_conc{
        width: 4% !important;
        margin: 0 auto 20px;
        display: block;
    }
}