@charset "UTF-8";

/* Works page styles
   Extracted from the former monolithic styles.css.
   Keep page-only rules here; shared layout stays in /styles.css. */

.worksBody {
	background-image: none;
	margin: auto;
}

@media (min-width: 960px) {
	.worksBody {
		width: 960px;
	}
}

@media (max-width: 960px) {
	.worksBody {
		width: auto;
	}
}

.works__hugeHeader {
	height: auto;
	width: 100%;
	background-image: url("/mt-static/images/businessHeading.png");
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	font-weight: bold;
	color: white;
	padding: 5% 0;
}

.works__urlUnderline {
    text-decoration: underline;
}

@media (min-width: 960px) {
	.works__hugeHeader {
		font-size: 48px;
	}
}

@media (max-width: 960px) {
	.works__hugeHeader {
		font-size: 48px;
	}
}

@media (max-width: 540px) {
	.works__hugeHeader {
		font-size: 28px;
	}
}

.works__middleHeader {
	font-size: 24px;
	font-weight: bold;
}

@media (max-width: 540px) {
	.works__middleHeader {
		margin: 3% 0;
	}
}

.works__text {
	width: 100%;
	font-size: 16px;
	font-weight: 400;
}

.works__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.works__list li {
	position: relative;
	padding-left: 1em;
}

.works__list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

@media (max-width: 540px) {
	.works__text {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
}

.works__titleArea {
	font-weight: bold;
	padding: 5%;
	margin-top: 100px;
	text-align: center;
}

@media (min-width: 960px) {
	.works__titleArea {
		font-size: 46px;
	}
}

@media (max-width: 960px) {
	.works__titleArea {
		font-size: 46px;
	}
}

@media (max-width: 540px) {
	.works__titleArea {
		font-size: 32px;
	}
}

.works__topImgArea {
	width: 100%;
	display: flex;
	margin-bottom: 5%;
	flex-direction: column;
	align-items: center;
}

.works__topImgArea__contentsArea {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 960px) {
	.works__topImgArea__contentsArea {
		flex-direction: row;
	}
}

@media (max-width: 960px) {
	.works__topImgArea__contentsArea {
		flex-direction: row;
	}
}

@media (max-width: 540px) {
	.works__topImgArea__contentsArea {
		flex-direction: column-reverse;
	}
}

@media (min-width: 960px) {
	.works__topImgArea__contentsArea__detail {
		width: 40%;
	}
}

@media (max-width: 960px) {
	.works__topImgArea__contentsArea__detail {
		width: 40%;
	}
}

@media (max-width: 540px) {
	.works__topImgArea__contentsArea__detail {
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.works__topImgArea__contentsArea__imgArea {
	width: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 960px) {
	.works__topImgArea__contentsArea__imgArea {
		background-image: url("/nsysimages/works_first_view.png");
		height: 270px;
		width: 550px;
	}
}

@media (max-width: 960px) {
	.works__topImgArea__contentsArea__imgArea {
		background-image: url("/nsysimages/works_first_view_small.png");
		height: 200px;
		width: 410px;
	}
}

@media screen and (min-width: 540px) {
	.works__topImgArea__contentsArea__imgArea {
		background-image: url("/nsysimages/works_first_view_small.png");
		height: 200px;
		width: 410px;
		background-size: contain;
		transform: scale(0.8);
	}
}

@media (max-width: 540px) {
	.works__topImgArea__contentsArea__imgArea {
		background-image: url("/nsysimages/works_first_view_small.png");
		height: 200px;
		width: 410px;
		transform: scale(0.6);
	}
}

.works__contentsArea {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.works__contentsArea__content {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

@media (min-width: 960px) {
	.works__contentsArea__content {
		flex-direction: row;
		margin: 0;
	}
}

@media (max-width: 540px) {
	.works__contentsArea__content {
		flex-direction: column;
		margin: 5% 0;
	}
}

.works__contentsArea__content__img {
	width: 40%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 540px) {
	.works__contentsArea__content__img {
		transform: scale(0.7);
	}
}

.works__contentsArea__content__detail {
	height: auto;
	display: flex;
	flex-direction: column;
}

@media (min-width: 960px) {
	.works__contentsArea__content__detail {
		width: 50%;
	}
}

@media (max-width: 960px) {
	.works__contentsArea__content__detail {
		width: 50%;
	}
}

@media (max-width: 540px) {
	.works__contentsArea__content__detail {
		width: 90%;
		align-items: center;
	}
}

.works__lastArea {
	display: flex;
	flex-direction: column;
}