@charset "utf-8";

/* -----------------------------------------------------------
    工場＆サービスページ共通（factory、punch、mold、coating、heat-treatment）
-------------------------------------------------------------- */
/* -----------------------------------------------------------
    equipment-box
-------------------------------------------------------------- */
.equipment-box {
	display: flex;
	background: #fff;
	width: 100%;
}

.equipment-box .equipment-ttl {
	flex-shrink: 0;
	width: calc(180 / 1200 * 100%);
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
}

.equipment-box .equipment-machine-wrap {
	flex-grow: 1;
}

.equipment-box .equipment-pick {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.equipment-box .equipment-pick li {
	/*flex: 1;*/
    width: calc((100% - 30px) / 2);
	display: flex;
	align-items: center;
	gap: 15px;
}

.equipment-box .equipment-pick li a {
	position: relative;
	width: 270px;
}

.equipment-box .equipment-pick li a::before {
	content: '\f00e';
	position: absolute;
	font-family: var(--webicon);
	font-weight: 700;
	bottom: 10px;
	right: 10px;
	font-size: 1.5rem;
	color: var(--main);
}

.equipment-box .photo-item {
	width: 270px;
	aspect-ratio: 3/2.5;
}

.equipment-box .photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.equipment-box .equipment-box-note{
    flex: 1;
}

.equipment-box .equipment-box-ttl {
	font-size: 1.7rem;
	font-weight: bold;
    line-height: 1.5;
}

.equipment-box .equipment-box-txt {
	line-height: 1.375;
	margin: 5px 0 0;
}

.equipment-box .equipment-box-sub {
	color: #8394a0;
}

.equipment-box .equipment-other {
	display: flex;
	align-items: flex-start;
	padding: 25px 20px 10px;
	border: 1px solid var(--sub);
    margin: 30px 0 0;
}

.equipment-box .equipment-other > p {
	width: calc(70 / 960 * 100%);
	font-weight: 600;
	flex-shrink: 0;
	line-height: 1;
	color: var(--sub);
}

.equipment-box .other-wrap {
	flex-grow: 1;
}

.equipment-box .other-box {
	margin: 0 0 25px;
}

.equipment-box .other-ttl {
	margin: 0 0 15px;
	padding: 7px 10px;
	font-weight: 600;
	line-height: 1;
	background: var(--cmnbg2);
}

.equipment-box .other-machine {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 0;
}

.equipment-box .other-machine > li {
	display: flex;
	align-items: center;
	width: 50%;
	line-height: 1.3;
}

.equipment-box .other-machine > li::before {
	content: "";
	width: 5px;
	height: 5px;
	margin: 0 7px;
	border-radius: 50%;
	background: var(--sub);
}

@media screen and (max-width: 768px) {
	.equipment-box {
		flex-direction: column;
		gap: 15px;
	}

	.equipment-box .equipment-ttl {
		width: 100%;
	}

	/*--もっと見るボタン--*/
	.equipment-box .equipment-more-btn {
		position: relative;
		width: 100%;
		margin: -30px 0 30px;
		padding: 20px 0;
		background: #fff;
		font-size: 1.8rem;
		font-weight: 500;
		color: var(--cmnblack);
		border: none;
	}

	.equipment-box .equipment-more-btn.is-open {
		margintop: 10px;
	}

	.equipment-box .equipment-more-btn::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		width: 100%;
		height: 80px;
		background: -webkit-linear-gradient(transparent, #fff);
		transition: .2s;
	}

	.equipment-box .equipment-more-btn.is-open::before {
		height: 0;
	}

	.equipment-box .equipment-more-btn::after {
		content: "＋";
		position: absolute;
		top: 50%;
		right: 50px;
		display: block;
		transform: translateY(-50%);
		color: var(--main);
	}

	.equipment-box .equipment-more-btn.is-open::after {
		content: "－";
	}

	/*--/もっと見るボタン--*/
	.equipment-box .equipment-pick li {
		flex:unset;
		gap: 15px;
		width: 100%;
	}
    .equipment-box .equipment-pick li a::before {
        bottom: 5px;
        right: 5px;
    }
    
	.equipment-box .equipment-box-ttl {
		margin: 0 0 5px;
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.equipment-box .equipment-box-txt {
		font-size: 1.4rem;
	}

	.equipment-box .equipment-pick .equipment-box-sub {
		font-size: 1.4rem;
	}

	.equipment-box .equipment-other {
		flex-direction: column;
		max-height: 200px;
		padding: 15px 20px 5px;
		overflow-y: auto;
        margin: 20px 0 0;
	}

	.equipment-box .equipment-other > p {
		width: 100%;
		margin: 0 0 10px;
		line-height: 1.5;
	}

	.equipment-box .other-wrap {
		width: 100%;
	}

	.equipment-box .other-machine {
		flex-direction: column;
	}

	.equipment-box .other-machine > li {
		width: 100%;
	}
}