@import url('sub.css');
.basic_cont:has(.capa_cont) {width: 100%; max-width: 100%;}
.capa_cont .sub_cont_top {margin-bottom: 80px;}
.page-stack-list {width: 100%; position: relative; border-top:1px solid var(--border);}
.page-stack-list .stack-item {padding:60px 0; border-bottom:1px solid var(--border); overflow:hidden; will-change: height, padding; box-sizing: border-box; height:auto !important;}
.page-stack-list .stack-item:last-child {border-bottom:none; padding-bottom:0;}

.page-stack-list .stack-item .basic_in {display:flex; gap:0 60px; align-items:flex-start;}
.page-stack-list .stack-item .num {flex-shrink: 0; will-change: transform;}
.page-stack-list .stack-item dl {flex:1; display:flex; gap:0 60px; align-items:center;}
.page-stack-list .stack-item dl dt {overflow:hidden; max-width:800px; width:55%; flex-shrink: 0;}
.page-stack-list .stack-item dl dt img {display: block; width: 100%; height: auto; object-fit: cover;}
.page-stack-list .stack-item dl dd {flex:1;}
.page-stack-list .stack-item dl dd h4 {font-family: var(--eng); transform-origin:left center; will-change:transform, font-weight; font-weight: 800;}
.page-stack-list .stack-item dl dd p {margin-top: 20px;}
.page-stack-list .stack-item dl dt, .page-stack-list .stack-item dl dd p {transform-origin: top left; will-change: height, opacity, margin;}


/*******************************************************************************
    @media ~1920px
*******************************************************************************/
@media all and (max-width:1920px){

}

/*******************************************************************************
    @media ~1766px
*******************************************************************************/
@media all and (max-width:1766px){
.page-stack-list .stack-item dl dd h4 {font-size: 2.3rem;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
.page-stack-list .stack-item dl dd h4 {font-size: 1.9rem;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
.page-stack-list .stack-item .basic_in {gap: 30px;}
.page-stack-list .stack-item dl {gap: 30px; width: 100%;}
.page-stack-list .stack-item dl dt {width: 45%;}
.page-stack-list .stack-item dl dd p {margin-top: 15px;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
.capa_cont .sub_cont_top {margin-bottom: 50px;}
 
.page-stack-list .stack-item {padding: 30px 0;}
.page-stack-list .stack-item dl dd h4 {font-size: 1.7rem;}
}

/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){
.page-stack-list .stack-item .basic_in {flex-wrap: wrap; gap: 20px;}
.page-stack-list .stack-item dl {flex-wrap: wrap; width: 100%; flex: unset; gap: 10px;}
.page-stack-list .stack-item dl dt {width: 100%; max-width: 100%;}
.page-stack-list .stack-item dl dd {flex: initial; width: 100%;}
.page-stack-list .stack-item dl dd p {margin-top: 5px;}

.page-stack-list .stack-item:last-child {padding-bottom: 0;}
}


/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){
.capa_cont .sub_cont_top {margin-bottom: 40px;}
}