@charset "UTF-8";
/* CSS Document */

/* splash screen */
body{position: relative}


.artworks-wrap{max-width:1200px;width:calc(100% - 60px);margin:120px auto 80px;}
.artworks-wrap > li{display: inline-block;width:calc(33.33% - 20px);margin-left:30px;margin-bottom:30px;background:#fff;border-radius: 0.3rem;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);transition: all 0.3s cubic-bezier(.25,.8,.25,1);padding:30px 30px 15px 30px}
.artworks-wrap > li:nth-of-type(3n+1){margin-left:0;}
.artwork-ttl{font-size:21px;color:#4d4d4d;line-height: 0.7;margin-bottom: 10px;}
.artwork-number{font-size:12px;color:#4d4d4d}
.artwork-arrow{position:absolute;top:30px;right:30px;width:24px;transition:0.3s;}
.artwork-bottom-area{display: inline-block;width:100%;margin-top:60px;}
.thum-color{display: inline-block;width:40px;}
.thum-color li{display: inline-block;width:10px;height:10px}
.artwork01 .thum-color li:nth-of-type(1){background:#FFD2FF}
.artwork01 .thum-color li:nth-of-type(2){background:#005CFF}
.artwork01 .thum-color li:nth-of-type(3){background:#00FF96}
.artwork01 .thum-color li:nth-of-type(4){background:#FFFF65}

.artwork02 .thum-color li:nth-of-type(1){background:#0019DC}
.artwork02 .thum-color li:nth-of-type(2){background:#FF0000}
.artwork02 .thum-color li:nth-of-type(3){background:#FCF2C3}
.artwork02 .thum-color li:nth-of-type(4){background:#2D6A48}

.artwork03 .thum-color li:nth-of-type(1){background:#636363}
.artwork03 .thum-color li:nth-of-type(2){background:#FFE600}
.artwork03 .thum-color li:nth-of-type(3){background:#295EF5}
.artwork03 .thum-color li:nth-of-type(4){background:#FF0000}

.artwork04 .thum-color li:nth-of-type(1){background:#FF0000}
.artwork04 .thum-color li:nth-of-type(2){background:#F7CDD4}
.artwork04 .thum-color li:nth-of-type(3){background:#0600E9}
.artwork04 .thum-color li:nth-of-type(4){background:#EC6D2E}

.artwork05 .thum-color li:nth-of-type(1){background:#FF34F6}
.artwork05 .thum-color li:nth-of-type(2){background:#1E49F4}
.artwork05 .thum-color li:nth-of-type(3){background:#FFB387}
.artwork05 .thum-color li:nth-of-type(4){background:#69FFFA}

.artwork06 .thum-color li:nth-of-type(1){background:#1E49F4}
.artwork06 .thum-color li:nth-of-type(2){background:#000000}
.artwork06 .thum-color li:nth-of-type(3){background:#AB9531}
.artwork06 .thum-color li:nth-of-type(4){background:#FFBEFA}

.artwork07 .thum-color li:nth-of-type(1){background:#00A161}
.artwork07 .thum-color li:nth-of-type(2){background:#2457F5}
.artwork07 .thum-color li:nth-of-type(3){background:#FFE600}
.artwork07 .thum-color li:nth-of-type(4){background:#FF0000}

.artwork08 .thum-color li:nth-of-type(1){background:#FF5F00}
.artwork08 .thum-color li:nth-of-type(2){background:#A0A0A0}
.artwork08 .thum-color li:nth-of-type(3){background:#91823C}
.artwork08 .thum-color li:nth-of-type(4){background:#004BFF}

.artwork09 .thum-color li:nth-of-type(1){background:#326EFF}
.artwork09 .thum-color li:nth-of-type(2){background:#FFFF3C}
.artwork09 .thum-color li:nth-of-type(3){background:#A0A0A0}
.artwork09 .thum-color li:nth-of-type(4){background:#AAC8FA}

.color-code{display: inline-block;width:calc(100% - 40px);text-align: right}
.color-code li{font-size:10px;}
.artwork-season{border-top:1px solid #4d4d4d;margin-top: 15px;text-align: right;padding-top: 2px;}
/*---hover---*/
.artworks-wrap > li:hover{box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);background:transparent;}
.artworks-wrap > li:hover .artwork-arrow{transform:rotate(675deg)}

@media screen and (max-width:1100px) { 
	.artworks-wrap > li{display: inline-block;width:100%;margin-left:0px;}
	.artwork-bottom-area{margin-top:20px}
}

@media screen and (max-width:767px) { 
    .artwork-ttl{margin-bottom: 10px;margin-top: -3px;line-height: 1.2}
}




/*---ホバーで出てくる---*/

.circle {position: fixed;pointer-events: none;
display: flex;align-items: center;justify-content: center;width: 120px;border-radius: 50%;margin-top: 24px;margin-left: 8px;
transform: translate(0,0);transition-duration: 0.2s;transition-timing-function: ease-out;opacity: 0;top:0;left:0;z-index:50}
.circle06{width:80px}
.circle08{width:135px}

@media screen and (max-width:1024px) { 
	.circle {display: none}
}