html{background: #000;}

body{overflow: hidden;width: 100%;}

img{width: 100%}

#head{position: fixed;top:0;left:0;width: 100%;display: flex;justify-content: space-between;z-index: 9;padding:20px;}
#head h1{width: 350px}

#content ul {display: flex;width: 118%;margin-left: -9%}
#content li {display: block;width:33%;}
#content li a{display: flex;height: 80vh;justify-content: center;align-items: center;width: 100%;transform: skewX(-10deg);overflow: hidden;color:#fff;text-decoration: none}
#content li .ph{transform: skewX(10deg) ;height: 80vh;width: 100%;overflow: hidden;min-width: 136%;display: flex;justify-content: center;align-items: center;flex-direction: column;position: revert;}

#content li:nth-child(1) .ph {background: url(/img/img01.png) center center no-repeat;background-size: cover;padding-left:12%}
#content li:nth-child(2) .ph {background: url(/img/img03.png) center center no-repeat;background-size: cover;padding-right:12%}
#content li:nth-child(3) .ph {background: url(/img/img02.png) center center no-repeat;background-size: cover;padding-right:12%}

.fashion a h2,
#content li h2{display: block;font-size: 3vw;position: relative;z-index: 9}
.fashion a .name,
#content li .name{display: block;font-size: 1vw;position: relative;z-index: 9}
#content li .mask{background: rgba(0,0,0,0.4);width: 100%;height: 80vh;position: absolute;top:0;left:0;transition: 1s;}
#content li a:hover .mask{opacity: 0}

.arrow {display: block;position: relative;content: '';width: 30px;height: 30px;border-radius: 50%;border: solid 1px rgba(255,255,255,0.3);transition: 1s;zoom: 150%;margin-top: 1vw}
.arrow::after {position: absolute;content: '';width: 8px;height: 8px;border-top: solid 1px #fff;border-right: solid 1px #fff;-webkit-transform: rotate(45deg);transform: rotate(45deg);top: 50%;left: 8px;margin-top: -4px;}
#content li a:hover .arrow {border: solid 1px rgba(255,255,255,0.5);background:  rgba(255,255,255,0.3);}

.fashion {text-align: center;background: #333;padding:1vh 0}
.fashion a{height: 18vh;display: flex;margin:0 auto;width: 50vw;background: #000;color:#fff;text-decoration: none;align-items: center;justify-content: space-between;}
.fashion a .ph{position: relative;}
.fashion a .mask{background: rgba(0,0,0,0.4);width: 100%;height: 18vh;position: absolute;top:0;left:0;transition: 1s;}
.fashion a .ph img{height: 18vh;}
.fashion a:hover .mask{opacity: 0}
.fashion a div{padding:0;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.fashion a .arrow{margin:0 20px 0 0}
.fashion a:hover .arrow {border: solid 1px rgba(255,255,255,0.5);background:  rgba(255,255,255,0.3);}



@media screen and (max-width: 1100px) {

body{ height: 100svh;}
#content li a{height: 80svh;}
#content li a{transform: skewX(-3deg);}
#content li .ph{transform: skewX(3deg);height: 80svh;}
#head h1{width: 40vw}
.fashion a h2,
#content li h2{font-size: 4vw;}
.fashion a .name,
#content li .name{font-size: 2vw;}
#content li .mask{height: 100%;}
.arrow {margin-top: 3vw}
.fashion a{width: 90vw;}


#content li:nth-child(1) .ph {background: url(/img/img01s.png) center center no-repeat;background-size: cover;padding-left:15%}
#content li:nth-child(2) .ph {background: url(/img/img03s.png) center center no-repeat;background-size: cover;padding-right:15%}
#content li:nth-child(3) .ph {background: url(/img/img02s.png) center center no-repeat;background-size: cover;padding-right:15%}

}

@media screen and (max-width: 500px) {

#content li a{height: 84svh;}
#content li .ph{height: 84svh;}
.fashion {padding:2svh 0}
.fashion a{height: 12svh}
.fashion a .ph img{height: 12svh;width: auto}
.fashion a .mask{height: 12svh;}

}