@charset "UTF-8";

/*=======================================================
MV
=======================================================*/
.el-lower-mv-ttl::before{
	content: 'What’s Atami Unso';
}
/*=======================================================
logi-ship
=======================================================*/
.bl-logi-ship{
	padding: 64px 0;
}
.bl-save {
	display: grid;
	grid-template: auto 1fr auto / 392px auto;
	grid-template-areas:
		"title imgWrapper"
		"sTitle imgWrapper"
		"btm_txt btm_txt";
	gap: 0 32px;
}
.bl-save-img-wrapper {
	grid-area: imgWrapper;
}
.bl-save hgroup{
	grid-area: title;
	margin-bottom: 42px;
}
.el-save-ttl {
	font-size: 80px;
	letter-spacing: 4.8px;
	line-height: 1.45;
	color: #FFDE38;
}
.el-save-ttl > span{
	font-size: 32px;
	letter-spacing: 1.92px;
	color: #309CEB;
	display: block;
}
.el-save-ttl.sub{
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
	margin: 8px 0 0;
	position: relative;
}
.el-save-ttl.sub::before{
	content: '';
	width: 100%;
	height: 2px;
	background: #222;
	margin-right: 8px;
}
.bl-save .el-label-ttl{
	grid-area: sTitle;
	width: 345px;
	margin-bottom: 0;
}
.bl-save .el-label-ttl.middle > span{
	padding: 0 8px;
}
.bl-save-txt-wrapper{
	grid-area: btm_txt;
	margin-top: 32px;
}
.el-save-txt:not(:first-of-type) {
	margin-top: 1.3em;
}
@media screen and (max-width: 750px) {
	.bl-logi-ship{
		padding: 64px 0;
	}
	.bl-save {
		grid-template: auto / auto;
		grid-template-areas: "sTitle" "imgWrapper" "title" "btm_txt";
	}
	.el-save-ttl {
		font-size: 165px;
		letter-spacing: 9.9px;
		line-height: 1.4;
		text-align: center;
		margin-top: -124px;
	}
	.el-save-ttl > span{
		font-size: 36px;
		letter-spacing: 2.16px;
		line-height: 1;
	}
	.el-save-ttl.sub{
		font-size: 30px;
		letter-spacing: 1.8px;
		margin: 16px 0 0;
	}
	.el-save-ttl.sub::before{
		width: 65px;
		height: 2px;
		background: #222;
		margin-right: 8px;
	}
	.el-save-ttl.sub::after{
		content: '';
		width: 65px;
		height: 2px;
		background: #222;
		margin-right: 8px;
	}
	.bl-save .el-label-ttl{
		width: 440px;
		margin-bottom: -25px;
	}
	.bl-save .el-label-ttl.middle > span{
		padding: 0 8px;
	}
	.bl-save-txt-wrapper{
		margin: 0;
	}
}

/*=======================================================
284-employee
=======================================================*/
.bl-284-employee{
	padding: 0 0 64px;
}
.bl-284-employee .el-label-ttl{
	width: 455px;
}
@media screen and (max-width: 750px) {
	.bl-284-employee .el-label-ttl{
		width: 690px;
	}
}
/*=======================================================
works
=======================================================*/
.bl-works{
	padding: 0 0 64px;
}
.bl-works .ly-cont-inner{
	border: 2px solid #222;
	padding: 56px 40px;
}
.bl-works-list{
	margin-top: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.bl-works-item{
	width: 300px;
	display: flex;
	flex-direction: column;
}
.el-works-ttl{
	text-align: center;
	margin-bottom: -22px;
	z-index: 2;
}
.bl-works-img-wrapper{
	margin-bottom: 16px;
}
@media screen and (max-width: 750px) {
	.bl-works .ly-cont-inner{
		padding: 56px 32px;
	}
	.bl-works .el-main-ttl{
		font-size: 40px;
	}
	.bl-works-list{
		gap: 56px;
	}
	.bl-works-item{
		width: 100%;
	}
	.el-works-ttl{
		margin-bottom: -30px;
	}
	.bl-works-img-wrapper{
		margin-bottom: 24px;
	}
}


/*=======================================================
culture
=======================================================*/
.bl-culture{
	padding: 56px 0;
	background: linear-gradient(to right, #50CFF5, #1C84D1, #145EB4);
	color: #fff;
}
.bl-culture .bl-media:not(:first-of-type){
	margin-top: 32px;
}
.bl-culture .el-media-ttl{
	color: #FFDE38;
	line-height: 1.5;
	letter-spacing: 1.56px;
	padding-bottom: 16px;
	border-bottom: 2px solid #fff;
}
@media screen and (max-width: 750px) {
	.bl-culture{
		padding: 64px 0;
	}
	.bl-culture .bl-media:has(.el-media-ttl) {
		grid-template: auto / auto;
		grid-template-areas:
			"imgWrapper"
			"title"
			"body";
	}
	.bl-culture .bl-media:not(:first-of-type){
		margin-top: 56px;
	}
	.bl-culture .el-media-ttl{
		padding-bottom: 24px;
	}
}


/*=======================================================
products
=======================================================*/
.bl-products{
	padding: 64px 0;
}
.bl-products-list{
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.bl-products-item{
	width: 320px;
}
.bl-products-item figcaption{
	color: #309CEB;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-top: 8px;
}
@media screen and (max-width: 750px) {
	.bl-products{
		padding: 64px 0;
	}
	.bl-products-item{
		width: 328px;
	}
	.bl-products-item figcaption{
		font-size: 28px;
	}
}