@charset "utf-8";

.content{
	width: var(--wid-1024);
	margin: auto;

	.common_title{
		display: flex;
		align-items: center;
		flex-direction: row;
		white-space: nowrap;
		&::after{
			content: "";
			height: 2px;
			width: 100%;
			background: var(--main-color);
		}
	}

	hgroup{
		display: flex;
		flex-direction: column;
		gap: 4rem;
		margin-bottom: 6rem;
	}

	.cont_tt{
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.8;
	}
}
.work_text .common_title .en_title{
	line-height: 1;
}
@media screen and (max-width: 767px){
	.content{
		margin: 4rem auto;
		hgroup{
			gap: 2rem;
			margin-bottom: 3rem;
		}
		.cont_tt{
			font-size: 1.6rem;
		}
		.common_title .en_title{
			font-size: 3.2rem;
		}
		.common_title .jp_title{
			font-size: 1.6rem;
		}
	}
}


.sub {
	display: flex;
	flex-wrap: wrap;
	gap: 5rem;
	justify-content: center;
	margin-bottom: 10rem;
  @media print {
    margin-bottom: 0;
    padding-bottom: 10rem;
  }
}
.sub_box{
	max-width: 304px;
	width: 100%;
	position: relative;
	background: var(--gradeD);
	left: 1rem;
	top: 1rem;
	padding: 21rem 2rem 2rem;

	figure{
		position: absolute;
		top: -1rem;
		left: -1rem;
	}

	h3{
		font-size: 2.4rem;
		margin-bottom: 1rem;
		font-weight: bold;
	}
  @media screen and (max-width: 767px) {
    padding-top: 20rem;
  }
}

@media screen and (max-width: 374px){
	.sub{
		gap: 3rem;
		margin-bottom: 7rem;
	}
	.sub_box{
		max-width: 280px;
		padding-bottom: 3rem;
		position: relative;
		left: .5rem;

		figure{
			width: 100%;
		}
	}
}