@charset "UTF-8";
/* CSS Document */

.dtl-wrap {  }
.dtl { position: relative; display: flex; }

.dtl__label { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: #fff100; font-size: 1.5rem; font-weight: 700; line-height: 1; text-align: center; color: #22ac38; }
.dtl__ttl { display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; line-height: 1; color: #fff; }
.dtl__ttl--it { background: #4488b7; }
.dtl__ttl--game { background: #b23926; }
.dtl__ttl--cg { background: #c4750c; }
.dtl__ttl--design { background: #b74875; }
.dtl__exp {  }
.dtl__exp__img {  }
.dtl__exp__txt { margin-top: 4px; font-size: 1.3rem; font-weight: 700; line-height: 1.384; text-align: justify; }
.dtl-spacer {  }
@media screen and (min-width: 681px) {
	
}
@media screen and (max-width: 1099px) {
	.dtl { align-items: stretch; padding-left: 50px; }
	.dtl:not(:last-of-type) { margin-bottom: 10px; }
	.dtl__label { width: 40px; height: 100%; writing-mode: vertical-lr; }
	.dtl__label--double { height: calc(200% + 10px); }
	.dtl__ttl { width: 30px; margin-right: 10px; padding: 10px 0; writing-mode: vertical-lr; }
	.dtl__exp { flex: 1; display: flex; flex-direction: column; }
	.dtl__exp__img { flex: 1; }
	.dtl__exp__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
	.dtl ._vert { text-combine-upright: all; }
	.dtl-spacer { width: 100%; height: 0; border-bottom: 1px solid #000; padding-top: 5px; margin-bottom: 15px; }
}
@media screen and (min-width: 1100px) {
	.dtl-wrap { display: flex; justify-content: space-between; }
	.dtl__label { width: 100%; height: 40px; }
	.dtl__label--double { width: calc(200% + 15px); }
	.dtl { flex-direction: column; padding-top: 50px; }
	.dtl:not(:last-of-type) { margin-right: 15px; }
	.dtl__ttl { height: 36px; margin-bottom: 10px; font-size: 1.3rem; }
	.dtl-spacer { width: 0; border-right: 1px solid #000; margin-right: 15px; }
}