@charset "utf-8";

.structure_tabs{
    width: 100%;
    max-width: 700px;
    margin: 145px auto 90px;
    display: flex;
    justify-content: space-between;
}
.structure_tab{
    text-align: center;
    width: 47.143%;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 0.1em;
}
.structure_tab--gold{
    border: 1px solid #604c3f;
    background: #684315;
    background: linear-gradient(90deg, rgba(104, 67, 21, 1) 0%, rgba(145, 122, 72, 1) 25%, rgba(145, 122, 72, 1) 75%, rgba(104, 67, 21, 1) 100%);
}
.structure_tab--green{
    background: #405826;
    background: linear-gradient(90deg, rgba(64, 88, 38, 1) 0%, rgba(86, 142, 83, 1) 25%, rgba(86, 142, 83, 1) 75%, rgba(64, 88, 38, 1) 100%);
}
@media screen and (max-width: 768px) {
    .structure_tabs{
        margin: 70px 0 40px;
    }
    .structure_tab{
        width: 49%;
        font-size: min(4vw, 1.8rem);
    }
}
.info_row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.info_row:nth-child(1) .info-card:nth-child(1){
    width: 56.356%;
}
.info_row:nth-child(1) .info-card:nth-child(2){
    width: 41.016%;
}
.info_row:nth-child(2) .info-card:nth-child(1){
    width: 52.119%;
}
.info_row:nth-child(2) .info-card:nth-child(2){
    width: 45.255%;
}
.info_row:nth-child(2) .info-card:nth-child(2) figcaption.caption{
    right: 10px;
}
.info_row:nth-child(2) .info-card:nth-child(1) figcaption.caption--left{
    left: min(2.5vw, 30px);
}
.info-card{
    background: #ebf0ee;
}
.info-card_title{
    font-size: 2.9rem;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff;
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #252122;
    background: linear-gradient(90deg, rgba(37, 33, 34, 1) 0%, rgba(90, 89, 91, 1) 25%, rgba(117, 117, 117, 1) 36%, rgba(117, 117, 117, 1) 64%, rgba(90, 89, 91, 1) 75%, rgba(37, 33, 34, 1) 100%);
}
.info-card_desc{
    padding: 25px;
    font-size: min(2vw, 1.5rem);
    line-height: 2;
    display: flex;
    align-items: center;
    height: 130px;
}
@media screen and (max-width: 768px) {
    .info_row{
        flex-direction: column;
        gap: 25px;
        margin-bottom: 25px;
    }
    .info-card{
        width: 100% !important;
    }
    .info-card figure{
        text-align: center;
    }
    .info-card_desc{
        height: unset;
        padding: 15px 20px;
        font-size: 1.4rem;
    }
    .info-card_title {
        font-size: 2rem;
        height: 45px;
    }
}

.building{
    padding-top: 100px;
}
.building-title{
    font-size: min(2.4vw, 2.4rem);
    line-height: 1.67;
    letter-spacing: 0.05em;
    color: #fff;
    background: #3093c5;
    padding: 5px 0;
    text-align: center;
}
.building-list{
    padding: clamp(20px, 5vw, 50px);
    background: #ebf0ee;
    display: flex;
    justify-content: space-between;
}
.building-list li{
    width: 31.482%;
}
.building-tit{
    text-align: center;
    font-size: min(3vw, 3rem);
    color: #004f99;
    margin-top: 3px;
}
@media screen and (max-width: 768px) {
    .building{
        padding-top: 50px;
    }
    .building-title{
        font-size: min(4.1vw, 2rem);
        line-height: 1.4;
    }
    .building-list{
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    .building-list li{
        width: 100%;
        max-width: 340px;
    }
    .building-tit{
        font-size: 2rem;
    }
}

.youtube-iframe{
    margin: 140px auto 114px;
    text-align: center;
    width: 100%;
    max-width: 900px; 
    position: relative;
    aspect-ratio: 16 / 9;
}
.youtube-iframe iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media screen and (max-width: 768px) {
    .youtube-iframe{
        margin: 100px auto 70px;
    }
}

.diagram-img{
    text-align: center;
    margin: min(4vw, 40px) 0 min(3vw, 35px);
}
.earthquake-diagram .caption{
    max-width: 600px;
    margin: 0 auto;
}
.earthquake-stats{
    margin-top: min(10vw, 110px);
}
.stats-img{
    text-align: center;
    margin: min(6vw, 35px) 0 min(5vw, 22px) 75px;
}
.earthquake-stats .caption{
    max-width: 522px;
    margin: 0 auto;
}
.earthquake-stats .caption p{
    /* max-width: 522px; */
}

.topic-box{
    max-width: 900px;
    margin: 72px auto;
    background: #fff;
    border-radius: 8px;
    padding-bottom: 30px;
    
    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5), 
    -0.25px -0.25px 5px 0px rgba(3, 1, 1, 0.5); 
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5), 
    -0.25px -0.25px 5px 0px rgba(0,0,0,0.5);
    overflow: hidden;
}
.topic-box .m-tit-sm:nth-child(1){
    margin-bottom: 0;
}
.topic-box .m-tit-sm:nth-of-type(2){
    margin-bottom: 10px;
}
.topics-box__line{
    width: 1000px;
    margin: -10px auto 5px;
    text-align: center;
}
.topics-box__line img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: -10%;
}
.topic-box .m-desc{
    text-align: center;
    padding: 0 10px;
}
@media screen and (max-width: 768px) {
    .stats-img{
        margin: min(6vw, 35px) 0 min(5vw, 18px) 0;
    }
    .earthquake-stats .caption{
        max-width: 600px;
    }
    .topic-box{
        margin: 40px auto;
        padding: 5px 0 10px;
    }
}

.collab figure{ 
    text-align: center;
    margin: min(8vw, 79px) 0 min(12vw, 79px);
}
.collab .m-tit-sm{
    margin-bottom: 10px;
}
.collab .m-desc sup{
    transform: translateY(0.2em);
    display: inline-block;
    font-size: 0.7em;
}
.detail-title{
    font-size: 5.4rem;
    color: #004f99;
    line-height: 1;
    text-align: center;
    margin: 40px auto 50px;
    letter-spacing: 0.02em;
}
.detail-title span{
    display: block;
    font-size: 1.5rem;
    margin-top: 1.2em;
    letter-spacing: -0.2em;
}
.detail-row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.detail-row:nth-of-type(2){
    margin: 115px 0 140px;
}
.detail-item{
    width: 48.31%;
}

.zeh-benefit:nth-of-type(1) figure{
    text-align: right;
}
.zeh-benefit:nth-of-type(2) figure{
    text-align: left;
    width: fit-content;
    margin-left: 13px;
}

.zeh-benefit .caption{
    bottom: -43px;
}
.zeh-card figure{
    text-align: center;
}
.zeh-bels:nth-of-type(1) figure{
    text-align: right;
    margin-right: 23px;
}
.zeh-bels:nth-of-type(2) figure{
    text-align: left;
}

@media screen and (max-width: 768px) {
    .detail-title{
        font-size: min(9vw, 4rem);
        margin: 20px auto 25px;
    }
    .detail-title span {
        font-size: 1.3rem;
        margin-top: 8px;
    }
    .detail-row{
        gap: 60px;
    }
    .detail-item{
        width: 100%;
    }
    .detail-item figure{
        text-align: center !important;
        margin: 0 auto !important;
    }
    .zeh-benefit .caption {
        bottom: -20px;
    }
    .detail-row:nth-of-type(2) {
        margin: 70px 0 80px;
    }
}