@charset "UTF-8";
/* Hero */
.hero-bg{background: url("../imgs/hero.webp") no-repeat center center/cover;}
@media screen and (max-width: 768px) {
.hero-bg{background: url(../imgs/hero_sp.webp) no-repeat center center/cover;}
}

@media screen and (max-width: 768px) {
    .hero-tit{width: 100%;}
}
.cap-bottom{margin-top: 0;}
.cap-left{ font-size: 11px; line-height: 1.4; text-align: left; padding-top: 5px;}
.cap-left.cap-f10{font-size: 10px;}
.contents{ margin-bottom: clamp( 80px , 12.3vw, 130px);}

.txt-middle{ margin-bottom: clamp( 20px , 4.7vw , 50px); line-height: 1.8;}
.txt-normal{ line-height: 2.3;}

.copyBox{ margin-bottom: 0;}

.border-tit{border-bottom: 1px solid #000; padding-bottom: 0.5em; margin-bottom: 0.5em; font-size: clamp( 16px , 1.9vw , 20px); line-height: 1.8;}
.border-tit + .txt{ font-size: clamp( 14px , 1.5vw , 16px);  line-height: 1.8;}


.facade .box01 { position: relative; }
.facade .box01::before{ position: absolute; content: ""; display: block; width: 100%; height: 100%; background: url(../imgs/bg-architect.webp) no-repeat; background-size: contain; z-index: 1; left: -26px;top: 17%;}
.facade .box01 .txtBox{ position: absolute; top: 9.5vw;}
.facade .box01 .tit{ border-bottom: 1px solid #000; padding-bottom: 0.5em; margin-bottom: 0.5em; font-size: clamp( 16px , 1.9vw , 20px); line-height: 1.8;}
.facade .box01 .txt{ line-height: 1.8; font-size: clamp( 14px , 1.5vw , 16px);  }
.facade .box01 figure{ position: relative; text-align: right; margin-top: -20px; z-index: 2;}

.facade .box02 { border: 1px solid #000; padding: 30px clamp( 10px , 3.8vw , 40px);}
.facade .box02 .designer-tit{ flex-basis: 100%; font-family: "Castoro", serif; font-weight: 400; text-align: center; margin: 0 auto; margin-bottom: 20px;}
.facade .box02 .left{ flex-basis: 19.58%; }
.facade .box02 .right{ flex-basis: 75.5%; align-content: center;}
.facade .box02 .right .designer{ font-size: 20px;}
.facade .box02 .right .txt{ line-height: 1.8; font-size: 14px;}
.facade .box02 .right .affiliation{ display: inline-block; font-size: 16px; padding-bottom: 0.5em; margin: 0 1em 0.5em 0; text-align: left;}
.facade .box02 .right .role{ display: inline-block; margin-right: 0.5em; font-size: 75%; text-align: left;}
.facade .box02 .works{ margin-top: 25px;}
.facade .box02 .works li{ flex-basis: calc((100% - 40px)/3);}

@media screen and (max-width: 768px) {
    .facade .box01 .txtBox{ position: static; margin-top: 40px; }
    .facade .box01::before{ bottom: -30px; width: 190px; height: 368px;top: 50%;}
    .facade .box02 { background: #fff;}
    .facade .box02 .left, .facade .box02 .right{ flex-basis: 100%; text-align: center;}
    .facade .box02 .left{ margin-bottom: 15px;}
    .facade .box02 .left .designer{ grid-column: 1; grid-row: 1; margin-bottom: 0; border-top: 1px solid #000; text-align: center; font-size: 20px;}
    .facade .box02 .right .affiliation{ display: inline;}
    .facade .box02 .right .txt{ margin-top: 15px;}
    .facade .box02 .left .affiliation, .facade .box02 .left .role{ text-align: left;}
    .facade .box02 .right figure {display: inline-block;}
    .facade .box02 .works li{ flex-basis: 100%;}
    .facade .box02 .works li:not(:last-of-type){ margin-bottom: 15px;}
}

.material{ margin-top: 70px;align-items: flex-end;}
.material .material-box{ width: 41.524%;}
.material .material-box .imgBox{width: fit-content;margin-top: 25px;}
.material .material-img{ width: 52.571428%; position: relative;}
/* .material .imgBox .cap{ flex-basis: 43.4%; position: absolute; bottom: 0; left: -8em;} */
@media screen and (max-width: 768px) {
    .material .imgBox{ margin-top: 15px;}
    .material .imgBox .cap{ position: static;}
   .material .material-img{width: 100%;order: -1;margin: 0 0 20px;}
   .material .material-box{width: 100%;}
}

.residence .txt-middle{ margin-bottom: 0;}
.residence .txt-middle::after{ display: block; content:""; width: 43px; height: 1px; background: #000; margin: 1em auto;}
.residence .gate .txtBox{ margin-top: 25px;}
.residence .gate .gate-tit{ font-size: clamp( 16px , 1.9vw , 20px);}
.residence .gate .gate-img{ margin-top: clamp( 20px , 4.7vw , 50px);}
.residence .entrance{ align-items: center; margin-top: clamp( 20px , 13.3vw , 140px);flex-wrap: nowrap;align-items: flex-start;}
.residence .entrance .txtBox{ flex-basis: 42%;margin-right: -50%;padding-top: 60px;}
.residence .entrance .entrance-img{ flex-basis: 62.190476%; position: relative;}
.residence .entrance .entrance-img .cap{bottom: 15px;position: absolute;right:20%;}
/* .residence .entrance .entrance-img::after {content: ''; width: 40px; height: 47px; background: url(../imgs/img-entrance-ic.webp) no-repeat center center / 100% 100%; position: absolute; bottom: 37px; left: -50px;} */
@media screen and (max-width: 768px) {
    .residence .gate .txtBox{ order: 1;}
    .residence .gate .gate-img{ order: 2;}
    .residence .entrance{flex-wrap: wrap;}
    .residence .entrance .txtBox{margin-right: 0;padding-top: 0;}
    .residence .entrance .txtBox{ flex-basis: 100%; order: 2; margin-top: 30px;}
    .residence .entrance .entrance-img{ flex-basis: 100%; order: 1;}
    .residence .entrance .entrance-img::after {width: 25px; height: 29px; left: 0; bottom: -10px;}
    .residence .entrance .entrance-img .cap{bottom: 1.8vw;}
}