/* A A A : A : A : A : */ #artist_view { width : 100%; height : auto; margin : 2em 0 5em; font-size : min(1.5vw,20px); } #artist_view .wrap { width : 90%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 3em; max-width : 1200px; } #artist_view .wrap .referer { line-height : 1em; color : #666; display : flex; align-items : center; justify-content : flex-start; gap : 0.1em; margin-bottom : 1em; font-size : max(14px,0.85em); transition : .2s;} #artist_view .wrap .referer:hover { color : #333; transition : .2s;} #artist_view .wrapTit { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; margin-bottom : 1em;} #artist_view .wrapTit p { line-height : 1em; font-weight : 600; color : #333;} #artist_view .artist_infoWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : space-between; gap : 5em; } #artist_view .artist_infoWrap .introWrap { width : 60%; flex-grow : 1; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start;} #artist_view .artist_infoWrap .introTextWrap { width : 100%; height : auto; flex-grow : 1;} #artist_view .artist_infoWrap .fieldWrap { width : 100%; height : auto; max-height : 10em; margin-top : 2em;} #artist_view .artist_infoWrap .fieldWrap .swiper { width : 100%; height : 100%;} #artist_view .artist_infoWrap .fieldWrap .swiper-slide { aspect-ratio : 1 / 0.7;} #artist_view .artist_infoWrap .fieldWrap .swiper-slide a { cursor: zoom-in; } #artist_view .artist_infoWrap .fieldWrap .swiper-slide img { width : 100%; height : 100%; object-fit : cover;} #artist_view .artist_infoWrap .infoWrap { width : auto; height : auto; display : flex; align-items : flex-start; justify-content : flex-end;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap { width : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : center; } #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .name { font-size : 1.4em; line-height : 1em; font-weight : 600; color : #333; margin-bottom : 0.4em;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .subName { line-height : 1em; } #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .loc { font-size : max(14px,0.9em); line-height : 1em; color : #999; margin : 1.5em 0;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .email { font-size : max(14px,0.9em); line-height : 1em; } #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .snsWrap { width : 100%; height : auto; display : grid; gap : 0.7em; margin : 1em 0; grid-template-columns : repeat(4,calc(calc(100% - calc(0.7em * 3)) / 4)); } #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .snsWrap a { width : 1.5em; height : 1.5em; display : flex; align-items : center; justify-content : center;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .snsWrap a img { width : 100%; height : 100%; object-fit : contain; transition : .2s;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .snsWrap a:hover img { filter : drop-shadow(0px 0px 3px #555); transition : .2s; } #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .homepage { font-size : max(14px,0.9em); line-height : 1em; color : green; display : flex; align-items : center; gap : 0.3em;} #artist_view .line { width : 100%; height : 1px; background : #ddd;} #artist_view .artworkWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; } #artist_view .artworkWrap .artworkListWrap { width : 100%; height : auto; display : flex; flex-wrap : wrap; gap : 2em 1em; align-items : flex-start; justify-content : flex-start;} #artist_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em * 3)) / 4); height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em; transition : .2s;} #artist_view .artworkWrap .artworkListWrap .artworkBox:hover { filter: drop-shadow(2px 4px 6px #ababab); transition : .2s;} #artist_view .artworkWrap .artworkListWrap .artworkBox .imgWrap { width : 100%; height : auto; background : #f7f7f7; aspect-ratio : 1 / 1;} #artist_view .artworkWrap .artworkListWrap .artworkBox .imgWrap img { width : 100%; height : 100%; object-fit : contain;} #artist_view .artworkWrap .artworkListWrap .artworkBox .infoWrap { width : 100%; height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; gap : 0.5em; } #artist_view .artworkWrap .artworkListWrap .artworkBox .infoWrap .title { line-height : 1em; font-weight : 500; color : #333;} #artist_view .artworkWrap .artworkListWrap .artworkBox .infoWrap .year { font-size : max(14px,0.9em); line-height : 1em; color : #999;} @media (max-width : 1024px){ /* A A A : A : A : A : */ #artist_view { font-size : min(2.2vw,18px); margin : 2.5em 0;} } @media (max-width : 820px){ /* A A A : A : A : A : */ #artist_view .wrap { gap : 2em;} #artist_view .wrapTit { margin-bottom : 1em; font-size : 1.2em;} #artist_view .artist_infoWrap { flex-direction : column-reverse; gap : 2em;} #artist_view .artist_infoWrap .introWrap { width : 100%; padding-top : 2em; border-top : 1px solid #ddd;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap { width : 100%;} #artist_view .artist_infoWrap .infoWrap .infoInnerWrap .snsWrap { width : auto;} #artist_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em * 2)) / 3); } } @media (max-width : 640px){ /* A A A : A : A : A : */ #artist_view { margin : 1.5em 0 4em;} #artist_view { font-size : max(14px, 4vw);} #artist_view .wrap .referer { margin-bottom : 2em;} #artist_view .artworkWrap .artworkListWrap .artworkBox { width : calc(calc(100% - calc(1em)) / 2); } }