/*=================================================================
             理念與願景 & 建築設計 & 建築空間 & 數位學院
                      BY STANLEY @ NTT
==================================================================*/

/*版面重新設定*/

body[class*='TARGET'] .main-content,
body[class*='BUILDING1'] .main-content{background: transparent !important;width: 100% !important; padding: 0 !important; max-width: 100% !important;padding: 0 !important; margin: 0 !important;}
body[class*='INFO'] .main-content{background: transparent !important;width: 100% !important; padding: 0 !important; max-width: 100% !important;padding: 0 !important; margin: 0 !important; max-height: calc(100vh - 160px) !important; min-height: calc(100vh - 160px) !important;}

body[class*='TARGET'] main > nav,
body[class*='TARGET'] .jumbotron,
body[class*='BUILDING1'] main > nav,
body[class*='BUILDING1'] .jumbotron{display: none !important;}
body[class*='INFO'] main > nav,
body[class*='INFO'] .jumbotron{display: none !important;}

h3.hyphenate{width: auto;}
.break br{display: none;}

/*排版*/
/*------結構基礎設定*/
.parallax, .parallax div {position: relative;}
.parallax img {width: 100%;}
.parallax h2 {border: none 0 transparent;font-size: 1.6rem;line-height: 1.5;transition: all 1s ease-in-out;}
.parallax h3 {border: none 0 transparent;font-size: .95rem;line-height: 1.6rem;font-weight: 400;transition: all 1s ease-in-out;text-shadow: 1px 1px 2px rgba(0, 0, 0, .2)}

/*------英文版文字控制與對齊*/
.ENTARGET .parallax h3,
.ENBUILDING1 .parallax h3{text-align: justify;text-justify:inter-ideograph;}
.ENBUILDING1 .design #about1 .info .hyphenate{width: 60% !important;max-width: 640px !important;margin: 0 auto;text-align: justify;}

/*------前言*/
#slogan {position: fixed;color: #FFF;bottom: 20vh;margin: 0 0 0 4rem;text-shadow: 2px 2px 3px rgba(0, 0, 0, .4);width: 40%;    max-width: 420px;transition: all 0.5s ease-in-out;}
.fixSlogan #slogan {opacity: 0;}


/*------引言*/
.talk {display: inline-block;position: absolute;right: -20px;top: 50%;transform: translateY(-50%);padding: 0 6rem 0 3rem;margin: 0 !important;width: auto;opacity: 0;transition: all 1s ease-in-out;font-size: 1.2rem !important;line-height: 1.8 !important;}
.talk span {float: right;font-size: 0.9rem;padding: 0.9rem 0 0 0;}
.show .talk {right: 0;opacity: 1;text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);}
.ENTARGET .show .talk {padding: 0 3rem 0 3rem;width: 960px;max-width: 55%;}
.ENBUILDING1 .show .talk.hyphenate,
.JPBUILDING1 .show .talk{width: 60% !important;}

/*------段1*/
.design #about1{background: url("../../../images/img-build-new-01.jpg");background-size: cover;background-position: bottom center;background-attachment: fixed;min-height: 100vh;}
.design #about1 .info{width: 100%;padding: 100vh 0 8rem;background-color: rgba(255, 255, 255, .8);text-align: center;text-shadow: 2px 2px 3px rgba(0, 0, 0, .3);opacity: 0;transition: all 1s ease-in-out;
}
.design.fixed #about1 .info{opacity: 1;}

.ENBUILDING1 .design #about1 .info .hyphenate{width: 60% !important;max-width: 640px !important;margin: 0 auto;}
.JPBUILDING1 .design #about1 .info h3{width: 60% !important;max-width: 640px !important;margin: 0 auto;text-align: left;}

/*------段2*/
#about2 {text-align: right;height: 100vh;}

.about #about2 .pimg {position: absolute;width: 50vw;top: 50%;transform: translateY(-50%);}
.design #about2 .pimg {bottom: 0;right: 60%;width: 360px;position: absolute;}
.design #about2{background-color: #E3E5E4;}
.ENTARGET .about #about2 .pimg {width: 40vw;top: 50%;}

/*------段3-6*/
.design #about3,.design #about4,.design #about5,.design #about6{background-image: none;text-align: center;position: relative;    display: none;}

/*------段3*/
#about3 h2 {position: absolute;left: 0;opacity: 0;text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);}
#about3.show h2 {opacity: 1;left: 3rem;}
#about3 h3 {margin: 0 0 6rem 40%;padding: 6rem 6rem 3rem 3rem;opacity: 0;text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);}
#about3.show h3 {margin: 0 0 6rem 40%;padding: 3rem 6rem 3rem 3rem;opacity: 1;}

.design #about3{display: block;padding: 3rem 0 6rem 0;text-align: center;}
.design #about3 img.titleImg{width: 480px;margin:2rem auto;}

/*------段4*/
#about4 {height: 100vh;background-image: url('../../../../images/mission-04b.jpg');background-size: auto 100%;background-repeat: no-repeat;background-position: right top;text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);}
#about4 .info {position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 40%;opacity: 0;transition: all 1s ease-in-out;}
#about4.show .info {left: 3rem;opacity: 1;}

/*------段5*/
#about5 {height: 100vh;background-color: #000;background-image: url('../../../../images/mission-05b.jpg');background-size: auto 90%;    background-repeat: no-repeat;background-position: left top;}
#about5 h2,
#about5 h3 {color: #FFF;text-shadow: 1px 1px 2px rgba(255, 255, 255, .2);}
#about5 .info {position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 40%;opacity: 0;transition: all 1s ease-in-out;}
#about5.show .info {right: 3rem;opacity: 1;}

.ENTARGET #about5 h3 {line-height: 1.5;font-size: 0.9rem;}
.ENTARGET #about5 .info {width: 50%;}

/*------段6*/
#about6 {background-color: #000;color: #FFF;background-image: url('../../../../images/mission-06b.jpg');background-size: cover;    background-position: center center;background-attachment: fixed;}
#about6 .info {width: 100%;height: 100%;min-height: 100vh;transition: all 1s ease-in-out;padding: 0 0 4rem 0;}
#about6 .info.show {background-color: rgba(0, 0, 0, .6);}
#about6 h2 {padding: 100vh 0 0 0;margin: 0 !important;text-shadow: 3px 3px 6px rgba(255, 255, 255, .6);}
#about6 h3 {line-height: 1 !important;}
#about6 h3 span {border-bottom: solid 1px #FFF;padding: 0.5rem 3rem; margin-bottom: .5rem;display: inline-block;}

.INFO #about6 {background-image: url('https://www.npac-ntt.org/dispUploadBox/PJ-/Ckeditor/20230407112526333.jpg');background-position: center 100px;}
.INFO #about6 .info{padding: 40vh 0 0 0}
.INFO #about6 .info.show{background:none;}

/*------建築空間介紹*/
.designCard{display: inline-block;width: 40%;margin:1rem 1rem 3rem 1rem;z-index: 1;vertical-align: top;background: #FFF;}
.designCard h2,.designCard h3{position: relative !important;top: auto !important;left: auto !important;margin: 0 !important;    text-align: left;padding: 1rem !important;}
.designCard h2 span{font-family: inherit;font-size: 1.2rem;}

/*------三系列介紹*/
h3.series {display: inline-block;text-align: center !important;vertical-align: middle;margin: 3rem 1rem !important;}
h3.series a {position: relative;width: 280px;height: 280px;border: 1px solid #FFF;border-radius: 99em;padding: 90px 0 0 0;display: block;font-family: inherit;color: #FFF;}
h3.series a:hover {text-decoration: none;box-shadow: 0 0 20px rgba(255, 255, 240, .8);background-color: rgba(255, 255, 240, .8);
    color: #000;}
h3.series a:after {display: inline-block;border: solid 1px #FFF;padding: 0.5rem 1rem;content: '了解更多';position: absolute;bottom: 3rem;left: 50%;transform: translateX(-50%);}
.ENTARGET h3.series a:after {content: 'More';}
.JPTARGET h3.series a:after {content: '詳しく見る';}

.INFO h3.series a {
    background: rgba(255, 255, 255, .4);
    border: 1px solid #FFF;
    color: #000;
    backdrop-filter: blur(5px);
    font-size: 1.2rem;
    line-height: 1.5;
}
.INFO h3.series a:after{content: '';display: none;}
.INFO h3.series a:hover {
    background: rgba(255, 255, 255, .7);
}


@media only screen and (max-width: 959px){
    .break{font-size: 0;color: transparent;padding: 0;margin: 0;}
    .break br{display: block;}

	.parallax h2 {font-size: 1.4rem;line-height: 1.5;letter-spacing: -1px;}
	.parallax h3 {border: none 0 transparent;font-size: 1rem;line-height: 1.5rem;text-shadow: none !important;}

	.about #about1{background: url(../../../images/mission-02.jpg);background-size: cover;background-position: bottom center;background-attachment: fixed;min-height: 100vh;}
	.about #about1 .pimg{display: none;}
	.about #about1:after{white-space: pre;display: block;text-align: center;font-size: 1.2rem;text-shadow: 2px 2px 4px rgba(0,0,0,0.5);font-weight: 600;}
    
    .about #about2{height: calc(100vh - 6rem);}
	.about #about2 .pimg{position: relative;width: 100% !important;top: 0 !important;}
	.about #about2 .talk{font-size: 1rem !important;padding: 1rem !important;width: 100%;}
    .ENTARGET .show .talk{margin: 4rem 0 0 0;}
	.about #about2 #slogan{width: calc(90% - 3rem);max-width: calc(90% - 3rem);margin: 0;}
    .about #about2.show #slogan{opacity: 0;}

    .about #about3 .bg-img-b:first-child{display:none;}
    .about #about3 .bg-img-b:last-child{display:block;}
    .about #about3 h2{width: 100%;left:0;text-align: center;}
    .about #about3 h3{width: 100%;left:0;text-align: left;margin: 6rem 0;padding: 1rem;text-align: justify !important;}

    .about #about4{background-size:100% auto;}
    .about #about4 .info{display: block;width: 100%;padding: 1rem;transform: translateY(0);left: 0;}
    .about #about4 h2{width: 100%;left:0;text-align: center;}
    .about #about4 h3{width: 100%;left:0;text-align: left;padding: 0 0 6rem 0;text-align: justify !important;}

    .about #about5{background-size:100% auto;padding: 100vw 0 0 0;height: auto;}
    .about #about5 .info{position: relative;width: 100%;top: 0;right: 0;transform: translateY(0);}
    .about #about5 h2{width: 100%;left:0;text-align: center;}
    .about #about5 h3{width: 100%;left:0;text-align: left;padding: 1rem 1rem 6rem;text-align: justify !important;}

     #about6 h3 span {border-bottom: solid 1px #FFF;padding: 0 .5rem 0 0; display: block;}

    h3.series{margin: 1rem !important;}

    h3.series a {position: relative;width: 100%;min-width: 240px;height: auto;border: 1px solid #FFF;border-radius: 1rem;padding: 1rem 2rem;display: block;font-family: inherit;color: #FFF;}
    h3.series a:after{content: 0;display: none;}

    .design #about1{background: url("../../../images/img-build-new-01.jpg");background-size: 100% auto;background-position: 0 0;background-attachment: scroll;background-repeat: no-repeat;min-height: 100vh;}

    .design #about1 .info{width: 100%;text-align: left;padding: 70vw 0 6rem 0;opacity: 1;background: none;}

    .design #about1 br{display: none;}

    .design #about1 h3{padding: 1rem;width: auto;max-width: 100% !important;
    }

    .JPBUILDING1 .design #about1 .info h3 {width: auto !important;}

    .design #about2{height: calc(100vh - 3rem);}

    .ENBUILDING1 .design #about2,
    .JPBUILDING1 .design #about2{height: 100vh;}

    .design #about2 .talk br{display: none;}
    .design #about2 .talk br:nth-child(2n){display: block;}
    .design #about2 .pimg {bottom: 0;right: auto;left: auto;width: 60%;position: absolute;}

    .design #about3 .designCard {display: block;width: auto;}

    .design .talk{font-size: 1rem !important;padding: 1rem !important;width: 100%;top: 6rem;transform: translateY(0);text-align: justify !important;
    }
    .ENBUILDING1 .design .show .talk.hyphenate,
    .JPBUILDING1 .design .show .talk {width: 100% !important;}
 
}