@charset "UTF-8";
/* sp(320px) */

:root {
	--fcolor: #dcdcdc;
}
testtest {
	color: var(--fcolor);
}


.list li {
	border: 1px solid var(--fcolor);;
	padding: 1em;
	margin-bottom: 1.5em;
}
.list li figure {
	display: grid;
	place-items: center;
	height: 150px;
	border: 1px solid var(--fcolor);;
}
.list li .txt {
	margin-top: 1em;
}

.list li .btn a {
	display: block;
	border: 1px solid var(--fcolor);
	border-radius: .5em;
	text-align: center;
}

.list li .btn1.btn {
	margin-top: .6em;
}
.list li .btn2.btn {
	margin-top: .6em;
}
.list li .btn2 {
	display: flex;
	gap: 10px;
}
.list li .btn2 a {
	width: 100%;
}
.list li .debug {
	margin-top: .8em;
	text-align: center
}

.list li {
	container-type: inline-size;
	container-name: my-container;
}
@container my-container (width < 260px) {
	.list li .btn2 {
		display: block;
		gap: 0;
	}
	.list li .btn2 a:nth-of-type(1) {
		margin-bottom: .5em;
	}
}

.list li figure {
	/* ショートハンドで記述 */
	container: my-figure / inline-size;
}
@container my-figure (width < 200px) {
	.list li figure span {
		border: 10px solid red;
	}
}




@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */




	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */


/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 835px) {
/* pc */



/* end of media query(pc) */
}