@charset "utf-8";


.pic_lt_v2 ul { display:flex; gap:1.5em; font-size: min(4.57vw, 20px); }
.pic_lt_v2 ul > li {
flex:1; position: relative; aspect-ratio:3/2; 
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05), 
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(255,255,255,0.5);
border-radius:0.75em;
}
.pic_lt_v2 ul > li > .box1 { 
position: absolute; inset: 1em; background: #f4f4f4; box-shadow:0 0.5em 1em rgba(0,0,0,0.1); border-radius:0.75em; transition:0.5s;
display:grid; align-items:center; justify-content:center;  color: #000;
}
.pic_lt_v2 ul > li > .box1 > .content { padding: 1em; text-align: center; display: block; }
.pic_lt_v2 ul > li > .box1 > .content > .num {
position: absolute; right: 10px; top: -10px; font-size: 8em; color: rgba(0,0,0,0.02); transition:0.5s; font-family: Roboto; font-weight: bold; transition:0.5s;
}
.pic_lt_v2 ul > li > .box1 > .content > p.type { 
color: #fff; display: inline-block; padding: 0.4em 1em; border-radius:3em; box-shadow:0 0.5em 1em rgba(0,0,0,0.2); margin-bottom: 0.3em;
}
.pic_lt_v2 ul > li > .box1 > .content > p.type1 { background: #000; }
.pic_lt_v2 ul > li > .box1 > .content > p.type2 { background: var(--main-color);}
.pic_lt_v2 ul > li > .box1 > .content > h3 { font-weight: bold; font-size: 1.3em; padding: 0.4em 0; }
.pic_lt_v2 ul > li > .box1 > .content > p.text1 { color: #777; font-size: 0.9em; line-height: 1.4; transition:0.5s; }

/* hover */
.pic_lt_v2 ul > li:hover > .box1  { 
box-shadow:0 0.5em 2em rgba(0,0,0,0.2); transform:translateY(-2.5em); background: linear-gradient(45deg,var(--main-color),#333); color: #fff;
}
.pic_lt_v2 ul > li:hover > .box1 > .content > .num { color: rgba(0,0,0,0.05); }
.pic_lt_v2 ul > li:hover > .box1 > .content > p.text1 { color: #fff; }

@media (max-width:1200px) {
	.pic_lt_v2 ul > li { aspect-ratio:1/1;  }
}
@media (max-width:991px) {
	.pic_lt_v2 ul { flex-wrap:wrap; }
	.pic_lt_v2 ul > li { aspect-ratio:3/1; width: 100%; flex:auto;  }
}
@media (max-width:768px) {
	.pic_lt_v2 ul > li { aspect-ratio:4/2; }
}
@media (max-width:480px) {
	.pic_lt_v2 ul > li { aspect-ratio:3/2; }
}