@charset "utf-8";

:root{
	--page-color: #66ccc5;
	--color-1: #ffe66b;
}

.worksAbout{
	background-color: var(--page-color);
}
.worksAbout_titles > h1 span{
	color: #b6f2ee;
}
.worksAbout_cate{
    background-color: var(--page-color);
}
.worksAbout_cate::after{
	background-color: var(--page-color);
}

.worksAbout_image{
	background: url("../img/img_worksAbout_01.jpg") no-repeat center center/cover;
}

@media screen and (max-width: 1440px) {
	.worksAbout_titles > h1 span{
		font-size: clamp(47px,4vw,64px);
	}
	.worksAbout_titles > p{
		font-size: clamp(20px,1.8vw,26px);
	}
}
@media screen and (max-width: 768px) {
	.worksAbout_titles > h1 span{
		font-size: 35px;
	}
	.worksAbout_titles > p{
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------------ */

/*  本文

/* ------------------------------------------------------------------------ */

#mainBlock .note{
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 20px;
}

.introduction{
	border-bottom: solid 1px #000;
}

.cnt-base{
	position: relative;
	margin-top: 110px;
	padding: 20px;
	border: 1px solid #000;
	border-radius: 10px;
	background-color: var(--color-1);
}

.cnt-ttl{
	font-size: 24px;
	font-weight: 500;
	background-color: var(--color-1);
	border-radius: 10px;
	border: 1px solid #000;
	border-bottom: none;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 440px;
	width: 100%;
	height: 80px;
	position: absolute;
	top: -67px;
	left: -1px;
	z-index: 1;
}
.cnt-ttl::before{
	content: "";
	display: block;
	background-color: var(--color-1);
	position: absolute;
	width: 101%;
	height: 13px;
	left: 0px;
	bottom: 0;
}

.cnt-inner{
	padding: 40px;
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 10px;
	overflow: hidden;
}

.cnt-inner .flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

.cnt-inner .txtBox{
	text-align: left;
}

.cnt-inner .hd02{
	text-align: left;
	border-color:  var(--color-1);
}

.cnt-inner .tblStyle01{
	width: auto;
	min-width: 620px;
}
.cnt-inner .tblStyle01 th{
	background: #fff3b8;
	font-weight: 900;
	width: 130px;
}
.cnt-inner .tblStyle01 th.th01{
	width: 233px;
}
.cnt-inner .tblStyle01 td{
	text-align: center;
	vertical-align: middle;
}

.cnt-inner .tblStyle01 td:first-child{
	text-align: left;
}


.cnt-lead .txtBox{
	font-size: 1.8rem;
	line-height: 1.889;
	margin-top: 1em;
}

.cnt-detail .cnt-table{
	width: 50%;
}
	.cnt-detail .cnt-table .scroll {
		padding-bottom: 20px;
	}

.cnt-detail .txtBox{
	line-height: 1.75;
	width: 49%;
}


.card-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 40px;
}
	.card-list li{
		display: grid;
		grid-template-rows:subgrid;
		grid-row:span 4;
		margin-bottom:50px;
	}
		.card-list figure{
			border-radius: 10px;
			overflow: hidden;
			aspect-ratio: 290/180;
			width: 100%;
		}
			.card-list figure img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		.card-list .hd03{
			text-align: left;
			color: #084d48;
			margin-top: 25px;
			margin-bottom: 10px;
		}
		.card-list .label{
			text-align: right;
		}
		.card-list .txtBox{
			margin-top: 20px;
			line-height: 1.75;
		}
		.card-list .sub-ttl{
			font-size: 1.8rem;
			font-weight: 900;
			margin-bottom: 5px;
		}
		.card-list .txtBox p{
			margin-bottom: 1.2em;
			text-align: justify;
		}


.sec_lang .cnt-lead figure{
	max-width: 400px;
	width: 100%;
}


.section{
	margin-top: 60px;
}

@media screen and (max-width: 1024px) {
	.card-list{
		grid-template-columns: repeat(3, 1fr);
		column-gap: 25px;
	}
	.card-list .hd03{
		margin-top: 15px;
	}
}
@media screen and (max-width: 1023px) {
	.cnt-inner{
		padding: 20px;
	}
	.cnt-inner .flex{
		flex-direction: column-reverse;
		gap: 0;
	}
	.cnt-inner figure{
		margin: 0 auto;
	}
	
	.cnt-detail{
		margin-top: 40px;
	}
	.cnt-inner .cnt-detail .flex{
		flex-direction: column;
	}
	.cnt-detail .cnt-table,
	.cnt-detail .txtBox{
		width: 100%;
	}
	
	.cnt-detail .cnt-table{
		margin-top: 20px;
	}
	
	.card-list{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 768px) {
	.worksAbout_titles > h1 span{
		
	}
	.cnt-base{
		font-size: 1.3rem;
		margin-top: 75px;
		border-radius: 5px;
		padding: 7px;
	}
	.cnt-inner{
		border-radius: 5px;
	}
	.cnt-ttl{
		max-width: 260px;
		height: 40px;
		font-size: 15px;
		top: -32px;
		border-radius: 5px;
	}
	.cnt-ttl::before{
		height: 8px;
	}
	.cnt-lead .txtBox{
		font-size: 1.3rem;
	}
	.card-list li{
		margin-bottom: 15px;
	}
	.card-list .sub-ttl{
		font-size: 1.6rem;
	}
	.card-list figure{
		border-radius: 5px;
	}
	.card-list .txtBox{
		margin-top: 10px;
	}
	
	#mainBlock .note{
		font-size: 1.3rem;
		margin-top: 10px;
	}
	.section{
		margin-top: 50px;
	}
}
@media screen and (max-width: 767px) {
	.card-list{
		grid-template-columns: 1fr;
	}
}