.top-images{opacity:0;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.top-images.show{opacity:1}.pagetitle-text{line-height:1}.pagetitle .en{font-size:.875rem}.pagetitle .tw{font-size:1.5rem}.work-wrap{position:relative}.work-content{display:flex;margin:0 calc(10vw + 100px) 100px}.work-subtitle{position:relative;padding:15px 15px 0 12vw;margin-top:auto;text-align:end;font-family:"Neuton",serif;z-index:1}.work-subtitle p{white-space:nowrap;letter-spacing:.5em;opacity:0;-moz-transform:translateX(20px);-ms-transform:translateX(20px);-webkit-transform:translateX(20px);transform:translateX(20px);-moz-transition:-moz-transform .6s,opacity .6s;-o-transition:-o-transform .6s,opacity .6s;-webkit-transition:-webkit-transform .6s,opacity .6s;transition:transform .6s,opacity .6s}.show .work-subtitle p{opacity:1;-moz-transform:translateX(0);-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}.work-subtitle span{position:absolute;display:block;width:0;height:1px;top:0;right:0;background:#333;-moz-transition:width 1s;-o-transition:width 1s;-webkit-transition:width 1s;transition:width 1s}.show .work-subtitle span{width:calc(100% + 10px)}.work-list{position:relative;border:solid 50px #222;overflow:hidden;opacity:0;-moz-transform:translateX(-30px);-ms-transform:translateX(-30px);-webkit-transform:translateX(-30px);transform:translateX(-30px);-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.work-list:before{content:"";position:absolute;width:100%;height:100%;background:#222;z-index:1;-moz-transition:width .6s;-o-transition:width .6s;-webkit-transition:width .6s;transition:width .6s}.work-list.show{-moz-transform:translateX(0);-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0);border:solid 50px #333;opacity:1}.work-list.show:before{width:0}.work-list-in{-moz-transform:scale(1.25, 1.25);-ms-transform:scale(1.25, 1.25);-webkit-transform:scale(1.25, 1.25);transform:scale(1.25, 1.25)}.work-list-in img{width:100%;-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.work-information{position:relative;padding:80px calc(10vw + 100px)}.work-information.show:before{width:100%}.work-information:before{content:"";position:absolute;width:0;height:100%;top:0;left:0;background:#1a1a1a;z-index:-1;-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.work-information p,.work-information h3{margin:0 50px 20px;opacity:0;-moz-transform:translateY(20px);-ms-transform:translateY(20px);-webkit-transform:translateY(20px);transform:translateY(20px);-moz-transition:opacity .6s,-moz-transform .6s;-o-transition:opacity .6s,-o-transform .6s;-webkit-transition:opacity .6s,-webkit-transform .6s;transition:opacity .6s,transform .6s}.work-information p:last-child,.work-information h3:last-child{margin-bottom:0}.work-information p.en,.work-information h3.en{font-size:.75em;color:#666}.work-information p.show,.work-information h3.show{opacity:1;-moz-transform:translateY(0px);-ms-transform:translateY(0px);-webkit-transform:translateY(0px);transform:translateY(0px)}.work-information p{font-size:.875em}.work-line-t,.work-line-b{width:30px;height:30px;border:solid 1px #404040;opacity:0;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.show .work-line-t,.show .work-line-b{opacity:1}.work-line-t{border-right:unset !important;border-bottom:unset !important}.work-line-b{margin-left:auto;border-left:unset !important;border-top:unset !important}.work-title{margin:20px 50px;color:#FFF;font-size:1.25em;opacity:0;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.work-title.show{opacity:1}.work-back{text-align:center;margin-top:80px;opacity:0;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.work-back.show{opacity:1}.work-back a{display:inline-block;width:60px;margin:0 30px;font-size:.875em}.work-back a:after{content:"";display:block;height:5px;width:150%;margin-left:-25%;background:#1a1a1a}.col2{display:-ms-flexbox;display:flex}.col2-l{margin-right:10px}.col2-r{margin-left:10px}@media screen and (max-width: 1300px){.work-subtitle{padding:15px 15px 0 5vw}}@media screen and (max-width: 1100px){.work-content{-webkit-flex-flow:column;flex-flow:column;width:70%;margin:0 auto}.work-subtitle{padding:0;display:flex;-webkit-flex-flow:column-reverse;flex-flow:column-reverse}.work-subtitle span{position:relative;margin:10px 0;background:#ccc}.show .work-subtitle span{width:100%}.work-list{border:solid 50px #ccc}.work-list:before{background:#FFF}.work-list.show{border:solid 50px #f6f6f6}.work-information{width:70%;margin:auto;padding:50px 0}.work-information:before{background:transparent}.work-information p.en{color:#999}.work-title{color:#000}.work-line-t,.work-line-b{border:solid 1px #ddd}.work-back{margin-top:30px}.work-back a:after{background:#ddd}}@media screen and (max-width: 800px){.work-wrap{margin:0 50px}.work-content{width:auto}.work-information{width:auto}}@media screen and (max-width: 640px){.pagetitle .tw{font-size:1.25rem}.work-wrap{margin:0 20px}.work-list{border:unset}.work-list.show{border:unset}.work-back{margin-top:40px}}@media screen and (max-width: 420px){.work-title{margin:10px;text-align:center}.work-information p{margin:10px}}
