.main-content.bg {
    background: url(../images/modelroom/bg.webp) repeat top center / contain;
}
.tab-area .general-section .inner {
    margin: 0 auto;
    padding: 60px 0 30px;
    width: 100%;
    max-width: 1100px;
}
.note{
    letter-spacing: .06em;
}
.equipment .secondary-heading{
    letter-spacing: .06em;
    color: #4A3628;
}
.equipment .img-wrapper{
    height: fit-content;
}
@media screen and (max-width: 767px) {
    .tab-area .general-section .inner {
        padding: 32px 0;
    }
}
/* キャプション */
.section-caption{
    padding: 80px 0 0px;
}
@media screen and (max-width: 767px) {
    .section-caption{
        padding: 32px 0 0px;
    }
}
/* タブ */
.tab-area {
    margin: 0 auto;
    padding: 80px 0;
    width: calc(100% - 32px);
    max-width: 1100px;
}

.tab-list {
  display: flex;
}

.tab {
  cursor: pointer;
  font-size: 2rem;
  flex: 1;
  padding: 12px 0;
  background: url(../images/equipment/bg-tabWhite.webp) top center / cover;
  color: #000;
  letter-spacing: .06em;
  line-height: 1.3;
}

.tab.-active {
    color: #fff;
  background: url(../images/equipment/bg-tabBlack.webp) top center / cover;
}

.tab-panel {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  pointer-events: none;
}

.tab-panel.-active {
  opacity: 1;
  visibility: visible;
  position: static;
  pointer-events: auto;
  height: auto;
}

.tab .is-small{
    font-size: 60%;
    display: inline-block;
    position: relative;
}
.tab .is-small::before{
    position: absolute;
    width: 30px;
    height: 1px;
    background: #000;
    top: 50%;
    left: -30px;
    translate: -50% 0%;
    content: "";
}
.tab .is-small::after{
    position: absolute;
    width: 30px;
    height: 1px;
    background: #000;
    top: 50%;
    right: -60px;
    translate: -50% 0%;
    content: "";
}
.tab.-active .is-small::before{
    background: #fff;
}
.tab.-active .is-small::after{
    background: #fff;
}

.contents-ttl .is-small{
    font-size: 60%;
    display: inline-block;
    position: relative;
    line-height: 1.2;
}
.contents-ttl .is-small::before{
    position: absolute;
    width: 30px;
    height: 1px;
    background: #4A3628;
    top: 50%;
    left: -30px;
    translate: -50% 0%;
    content: "";
}
.contents-ttl .is-small::after{
    position: absolute;
    width: 30px;
    height: 1px;
    background: #4A3628;
    top: 50%;
    right: -60px;
    translate: -50% 0%;
    content: "";
}
.contents-ttl.secondary-heading{
    line-height: 1.4;
}
@media screen and (max-width: 767px) {
    .tab-list {
        flex-direction: column;
        height: 125px;
    }
    .tab {
        cursor: pointer;
        font-size: 1.5rem;
        flex: 1;
        padding: 12px 0;
    }
    .tab-area {
        padding: 32px 0;
    }
    .tab .is-small{
        font-size: 70%;
    }
}

/* equipment //////////////////////////*/
.section-nav-list{
    margin-top: 10px;
    

}
.section-nav-item{
    width: 20%;
    position: relative;
    border-right: 1px solid #333;
}
.section-nav-item:first-child{
    border-left: 1px solid #333;
}
.section-nav-link{
    display: block;
    padding: 12px 0;
    color: #4A3628;
    font-size: 1.6rem;
    transition: .8s;
    letter-spacing: .06em;
}
.section-nav-link:hover{
    background: rgba(193,161,112,.4);
}
@media screen and (max-width: 767px) {
    .section-nav-list{
        row-gap: 8px;
    }
    .section-nav-item{
        width: 50%;
        border-left: 1px solid #333;
    }
    .section-nav-link {
        padding: 12px 0;
        font-size: 1.4rem;
    }
    .section-nav-item:last-child{
        width: 100%;
    }
    .section-nav-item:nth-child(2n){
        border-left: none;
    }
}

.equipment-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    /* grid-template-rows: 1fr; */
    gap: 40px;
}

.equipment-item.thumb{
    grid-column: 1/3;
    grid-row: 1/3;
}
.equipment-itemFlex{
    gap: 20px;
}
.equipment-itemFlex .equipment-image{
    width: calc(50% - 10px);
}
.equipment-item.second-column{
    grid-column: 1/3;
}
.note.mt--20{
    margin-top: -20px;
}
.equipment-item-ttl.mt--20{
    margin-top: -24px;
}
.equipment-image{
    margin-bottom: 24px;
}
.equipment-item-ttl{
    margin-bottom: 22px;
    line-height: 1.5;
    font-size: 1.7rem;
    letter-spacing: .06em;
    color: #333;
}
.equipment-item .note{
    line-height: 1.6;
    letter-spacing: .06em;
    color: #333;
}
.equipment-contents-grid{
    gap: 0 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.equipment-contents-in{
    width: 100%;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
    .equipment-grid{
        gap: 20px;
    }
    .note.mt--20{
        margin-top: 0px;
    }
    .equipment-item-ttl.mt--20{
        margin-top: -40px;
    }
    .equipment-item .note{
        font-size: 1.3rem;
    }
     .equipment-item .equipment-item-ttl{
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 767px) {
    .equipment-grid{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .equipment-image{
        margin-bottom: 18px;
    }
    .equipment-item-ttl{
        margin-bottom: 14px;
    }
    .equipment-contents-grid{
        gap: 20px;
        display: flex;
        flex-direction: column;
    }
    .equipment-itemFlex{
        gap: 10px;
        flex-direction: column;
    }
    .equipment-itemFlex .equipment-image{
        width: 100%;
    }
    .equipment-itemFlex .equipment-image:nth-child(1){
        margin-bottom: 0;
    }
    .note.mt--20{
        margin-top: 0px;
    }
    .equipment-item-ttl.mt--20{
        margin-top: 0px;
    }
}
/* premium */
.equipment-premium{
    width: fit-content;
    max-width: 100%;
    background: rgba(193,161,112,.5);
    padding: 40px 50px 50px 70px;
    position: relative;
    margin-top: 45px;

}
.equipment-premium::before{
    position: absolute;
    content: "";
    top: 0%;
    left: 0;
    width: 50px;
    height: 335px;
    translate: 0 0%;
    background: url(../images/equipment/premium-txt.svg) no-repeat top center / contain ;
    
}
.equipment-premium-container{
    gap: 40px;
    margin-top: 24px;
}
.equipment-premium-item{
    width: calc(50% - 20px);
    height: fit-content;
    gap: 22px;
}
.equipment-premium-image{
    width: 54%;
    height: fit-content;
}
.equipment-premium-txtWrap{
    width: calc(100% - 54% - 22px);
}

.equipment-premium.premium-half{
    max-width: 66%;

}
.premium-half .equipment-premium-container{
    display: block;
}
.premium-half  .equipment-premium-item{
    width: 100%;
}

@media screen and (max-width: 1100px) and (min-width: 768px) {
    .equipment-premium-item{
        flex-direction: column;
    }
    .equipment-premium-image{
        width: 100%;
    }
    .equipment-premium-txtWrap{
        width: 100%;
    }
    
}

@media screen and (max-width: 767px) {

    .equipment-premium{
        padding: 20px;
        position: relative;
        margin-top: 45px;
        width: 100vw;
        margin: 45px calc(50% - 50vw) 0;
        max-width: 100vw;
    }
    .equipment-premium-container{
        gap: 24px;
        margin-top: 24px;
        flex-direction: column;
    }
    .equipment-premium-item{
        width: 100%;
        height: fit-content;
        gap: 22px;
        flex-direction: column;
    }
    .equipment-premium-image{
        width: 100%;
        height: fit-content;
    }
    .equipment-premium-txtWrap{
        width: 100%;
    }
    .equipment-premium.premium-half{
        max-width: 100vw;
    }
    .equipment-premium::before{
        position: absolute;
        content: "";
        top: 0%;
        left: 0;
        width: 205px;
        height: 50px;
        translate: 0 0%;
        background: url(../images/equipment/premium-txt-sp.svg) no-repeat top center / contain ;
        
    }
    .premium-caption{
        text-align: right;
    }
}



/* Security・Structure・Amenity //////////////////////////*/
.security-ttl.secondary-heading{
    margin-bottom: .2em;
    letter-spacing: .06em;
}
.equipment .lead{
    margin: .8em 0;
    letter-spacing: .06em;
}
.specification-container-in{
    margin: 60px 0 20px;
}
@media screen and (max-width: 767px) {
    .specification-container-in{
        margin: 32px 0 ;
    }
}
.equipment-grid02{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 1fr;
    gap: 40px;
}
.equipment-grid02 .equipment-item{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
}
.equipment-item.wide{
    grid-column: 2/4;
    display: block;

}
.equipment-item.wide02{
    display: grid;
}

.equipment-item.wide02.wide3-5{
    grid-column: 3/5;
}

@media screen and (max-width: 1100px) and (min-width: 768px) {
    .equipment-grid02{
        gap: 20px;
    }
}

.security-flow{
    background: #fff;
    padding: 30px 140px;
}

.security-flow-lead{
    font-size: 2rem;
    color: #003C31;
    margin-bottom: 24px;
}
.security-flow .side-scrollWrap{
    margin: 32px 0 5px;
}

.tertiary-imageWrap{
    margin: 40px 0 80px;
}
.triple-security-flex{
    gap: 60px;
    margin-bottom: 80px;
}

.triple-security-item{
    width: calc(50% - 30px);
}

.triple-security-flex02{
    gap: 20px;
}
.triple-security-flex02 .triple-security-item{
    width: calc(50% - 10px);
}

.equipment-item.thumb-other{
    grid-column: 1/3;
    grid-row: 2/5;
}
@media screen and (max-width: 767px) {
    .security-flow-lead{
        font-size: 1.5rem;
        line-height: 1.5;
        letter-spacing: .06em;
        margin-bottom: 12px;
    }
    .security-flow{
        background: #fff;
        padding: 36px 16px;
    }
    .security-flow .side-scrollWrap{
        margin-top: 30px;
    }
    .security-flow .side-scroll-image {
        width: 185%;
    }
    /* トリプルセキュリティ */
    .tertiary-imageWrap{
        overflow: hidden;
        margin: 32px 0;
    }
    .side-scrollWrap{
        overflow-x: auto;
        padding: 0px 0px 16px;
        position: relative;
    }
    .side-scroll-image{
        width: 220%;
    }
    .scroll-hint-image{
        width: 35%;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: 1;
    }
    .triple-security-flex{
        flex-direction: column;
        gap: 32px;
        margin-bottom: 32px;
    }
    .triple-security-item{
        width: 100%;
    }
    .triple-security-flex02{
        gap: 20px;
        flex-direction: column;
    }
    .triple-security-flex02 .triple-security-item{
        width: 100%;
    }
    .equipment-grid02{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .equipment-item.wide{
        grid-column: 2/4;
    }
    .equipment-item.wide.wide3-5{
        grid-column: 3/5;
    }

}

/* side-scroll */
.scroll-hint-image img{
    transition: .8s 10s opacity;
}
.scroll-hint-image.is_active img{
    animation: swipeIcon 6s ease-in-out 0.4s both infinite ;
    opacity: 0;
}
@keyframes swipeIcon {
	0%{
	transform: translateX(0);
	}
	10%{
	transform: translateX(-20px);
	}
	20%{
	transform: translateX(0);
	}
	30%{
	transform: translateX(-20px);
	}
	40%{
	transform: translateX(0);
	}
	50%{
	transform: translateX(-20px);
	}
	60%,100%{
	transform: translateX(0);
	}
}