@charset "utf-8";

#main section {
	margin: 0 calc(10 * 100vw / 750);
	padding: calc(20 * 100vw / 750);
	border: var(--color-sub-base) solid 1px;
	background: #fff8e7;
}
#main section + section {
	margin-top: calc(32 * 100vw / 750);
}
#main .designer_head {
	margin: initial;
	display: flex;
	gap: calc(16 * 100vw / 750);
}
#main .designer_head img {
	width: calc(200 * 100vw / 750);
	border: 1px solid #ccc;
}
#main .designer_head-text {
	padding-top: calc(20 * 100vw / 750);
}
#main .designer_head h2 {
	margin: initial;
	padding: initial;
	font-size: calc(44 * 100vw / 750);
	background:none;
	border:none;
	color: #444;
}
#main .designer_head-text p {
	font-size: calc(28 * 100vw / 750);
}
#main .designer_head-text a {
	padding: calc(4 * 100vw / 750);
	display: inline-flex;
	font-size: calc(24 * 100vw / 750);
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	border-radius: calc(4 * 100vw / 750);
	background: #09C;
	color: #fff;
}
#main .designer_head a:before {
	font: calc(28 * 100vw / 750) "Typicons";
	content:'C';
}
#main .designer_body dt {
	margin: calc(20 * 100vw / 750) 0 calc(16 * 100vw / 750);
	padding: calc(4 * 100vw / 750) calc(8 * 100vw / 750);
	font-size: calc(32 * 100vw / 750);
	font-weight:bold;
  border-radius: calc(2 * 100vw / 750);
	background:var(--color-sub-base);
	color:#FFF;
}
#main .designer_body dd {
	padding: 0 calc(8 * 100vw / 750);
}
#main .designer_detail-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: calc(8 * 100vw / 750);
	align-items: center;
}
#main .designer_detail-item img {
	border:#CCC solid 1px;
	box-sizing:border-box;
}


@media screen and (min-width: 920px) {
#main section {
	margin: 0 8px;
	padding: 16px;
}
#main section + section {
	margin-top: 28px;
}
#main .designer_head {
	margin: initial;
	display: flex;
	gap: 12px;
}
#main .designer_head img {
	width: 160px;
}
#main .designer_head-text {
	padding-top: 16px;
}
#main .designer_head h2 {
	font-size: 36px;
}
#main .designer_head-text p {
	font-size: 22px;
}
#main .designer_head-text a {
	padding: 4px;
	font-size: 20px;
	border-radius: 4px;
}
#main .designer_head a:before {
	font: 22px "Typicons";
}
#main .designer_body dt {
	margin: 16px 0 12px;
	padding: 4px 6px;
	font-size: 26px;
  border-radius: 2px;
}
#main .designer_body dd {
	padding: 0 6px;
}
#main .designer_detail-list {
	grid-template-columns: repeat(3,1fr);
	gap: 6px;
}
}