@charset "UTF-8";
/* CSS Document */
/*---default----*/
html { font-size: 62.5%;}
body{background-color:#f5f5f5;position:relative;height: 100vh;}
h1,h2,h3,h4,h5,p,a,li,div { color: #333; text-decoration: none; letter-spacing: .05em; line-height: 1.4;}
img.full-img { width: 100%;}
a:hover,
a:focus { color:#000; text-decoration: none;}
sup { font-size: 10px; vertical-align: super;}
.al {text-align: left !important;}
.ar {text-align: right !important;}
.ac {text-align: center !important;}
.pos-relative {position: relative;}
.hidden-xs{display: block}
.visible-xs{display: none}

.other-link{position:fixed;bottom:30px;right:30px;}
.other-link li{position:relative;cursor:pointer;}
.other-link li::before{content:"";position:absolute;background:#ddd;    left: -25px;bottom: 4px;width: 10px;height: 10px;border-radius:50%;transition:0.3s ease;}
.other-link li:hover::before{border-radius: 0;transform:rotate(135deg)}
.other-link li a {color:#A7A7A7;font-size:1.2rem;}
@media screen and (max-width:1100px) { 
	.works {width: calc(53.34% - 60px);margin-left:5%}
}

@media (hover: none) {
	#cursor{display: none}
	#stalker{display: none;}
}

body{overflow: scroll}
.works-img{max-width:820px;width:95%;margin:auto;padding-top:120px}
.kv{margin-bottom:15px}
.works-text h2{font-size:2.2rem;margin-bottom:2px}
.works-text h2 span{font-size:1.6rem;display:block;position: relative;padding-left:30px;color:#333;margin-top: -15px;margin-bottom: 10px;}
.works-text h2 span::before{content: "";display: inline-block;background:#333;width:20px;left:0;top:50%;transform:translateY(-50%);height:1px;position: absolute}
.works-text h3 {font-size:1.1rem;color:#999;margin-bottom:15px}
.works-text p {font-size:1.4rem;color:#444;line-height: 1.75; margin-bottom:20px}
.works-text p.caption-text{margin-top:-30px}
.works-text a{text-decoration: underline;font-size:18px;color:#eee}
.works-text a:hover{color:#eee}
.contact{position: fixed}
#wrap.appear{transform: unset;}
#wrap {opacity: 0;;transition: 0.3s ease-in;transform: unset;}
.garelly{margin:60px auto;}
.garelly li{display: inline-block;width:calc(33.33% - 20px);margin-left:30px;}
.garelly li:nth-of-type(1){margin-left:0;}
.back{text-align: center;margin-top:60px;padding-bottom:80px}
.back p{position: relative;display: inline-block;font-size:1.48rem}
.back p::after{content: "";position: absolute;bottom:-1px;left:0;width:100%;height:1px;background:rgba(0,0,0,.4)}
.back p::before{content: "";position: absolute;bottom:-1px;left:0;width:15px;height:1px;background:rgba(0,0,0,1);transition:0.3s;}
.back p:hover::before{width:100%;}
.yt-wrapper {position: relative;width: 100%;}
.yt-wrapper:before { content:"";display: block; padding-top: 56.25%;}
.yt-wrapper iframe { position: absolute; top: 0;  left: 0;  width: 100%;  height: 100%;}

.youtube_movie{position:relative;width:100%;padding-top:56.25%; }
.player {position: absolute;top: 0;left: 0;z-index: 1;}
.thumb{position:absolute;top:0;left:0;z-index:1;}
.youtube_movie iframe{position:absolute;top: 0;left: 0;width:100% ;height:100% ;}
.youtube img{;cursor: pointer;}
.caption-text{display: none}
@media screen and (max-width:767px) { 
    .caption-text{display: block}
	.artworks-wrap > li{display: inline-block;width:100%;margin-left:0px;}
	.artwork-bottom-area{margin-top:20px}
}

@media screen and (max-width:767px) { 
	footer{display: none!important}
	.works-img{width:calc(100% - 40px)}
	.works-text h2{font-size:1.8rem}
	.garelly li{display: inline-block;width:calc(100%);margin-left:0;margin-bottom:30px}
	.garelly li:nth-of-type(3){margin-bottom:0;}
}

.caption-text{font-size:11px!important;color:#666;margin-top:-10px}