@charset "UTF-8";

#header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #666;
	height: 200px;
}
#header a {
	display: block;
	max-width: 350px;
}
.m-container {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 50px 0;
	color: #111;
	font-size: 18px;
	font-weight: 400;
	font-family: "Paperlogy", sans-serif;
}
.m-container h2 {
	margin-bottom: 50px;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
}
.m-container .sample-list + h2 {margin-top:70px;}
.m-container .sample-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 30px;
}

.m-container .sample-list .sample-box {
	border-radius: 20px;
	max-width: 250px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.m-container .sample-list .sample-box > a {
	display: block;
	width: 100%;
	max-height: 300px;
	overflow: hidden;
}
.m-container .sample-list .sample-box p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	border-top: 1px solid #eee;
	padding: 10px 15px;
	font-weight: 500;
}
.m-container .sample-list .sample-box [class^="ico"] {
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 40px;
	height: 40px;
}
.m-container .sample-list .sample-box .ico-pc {
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='6' width='30' height='20' rx='2.5' stroke='black' stroke-width='2.8'/%3E%3Cline x1='15' y1='30' x2='25' y2='30' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cline x1='18' y1='26' x2='17' y2='30' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cline x1='22' y1='26' x2='23' y2='30' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.m-container .sample-list .sample-box .ico-tablet {
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='4' width='22' height='32' rx='3' stroke='black' stroke-width='2.8'/%3E%3Crect x='13' y='9' width='14' height='18' stroke='black' stroke-width='2.8'/%3E%3Ccircle cx='20' cy='31' r='1.5' fill='black'/%3E%3C/svg%3E");
}
.m-container .sample-list .sample-box .ico-mobile {
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='11' y='4' width='18' height='32' rx='3' stroke='black' stroke-width='2.8'/%3E%3Crect x='14' y='10' width='12' height='16' stroke='black' stroke-width='2.8'/%3E%3Cline x1='17' y1='8' x2='23' y2='8' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='31' r='1.5' fill='black'/%3E%3C/svg%3E");
}