@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.equipment-wrap{
	font-family: var(--font_min);
	font-weight: 400;
	padding: 72px 0 120px;
	@media (width < 810px) {
		padding: 40px 0 48px;
	}
}

.equipment-anchor{
	padding-bottom: 64px;
	@media (width < 810px) {
		padding-bottom: 40px;
	}
	.equipment-anchor__list{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px 4%;
		max-width: 1200px;
		margin-inline: auto;
		@media (width < 810px) {
			gap: 12px;
		}
	}
	.equipment-anchor__item{
		width: calc((100% - 16%) / 5);
		@media (width < 810px) {
			width: calc((100% - 24px) / 3);
		}
		@media (width < 500px) {
			width: calc((100% - 12px) / 2);
		}
	}
	.equipment-anchor__link{
		padding: 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: var(--main_c);
		color: #fff;
		font-size: clamp(10px, -7.053px + 2.105vw, 14px);/*14~10(1000~810)*/
		border-radius: 6px;
		width: 100%;
		height: 100%;
		@media (width < 810px) {
			padding: 12px;
			border-radius: 4px;
		}
		&:hover{
			text-decoration: none;
		}
	}
	.equipment-anchor__jp{
		word-break: keep-all;
		font-size: 1.4em;
		font-weight: 500;
		line-height: 1.4;
	}
	.equipment-anchor__en{
		font-family: var(--font_eb);
		letter-spacing: 0.04em;
		line-height: 1.2;
		margin-top: 0.2em;
	}
}

.equipment-detail{
	.equipment-detail__wrap{
		container-type: inline-size;
		padding: 64px 0 100px;
		border-top: 6px solid var(--point_c);
		@media (width < 810px) {
			padding: 32px 0 48px;
			border-top-width: 4px;
		}
	}
	.equipment-ttl{
		font-family: var(--font_eb);
		font-size: clamp(30px, -28.154px + 7.179vw, 58px);/*58~30(1200~810)*/
		font-weight: 400;
		line-height: 1.2;
		color: var(--main_c);
	}
	.equipment-catch{
		word-break: keep-all;
		font-size: clamp(16px, -0.615px + 2.051vw, 24px);/*24~16(1200~810)*/
		margin-top: 12px;
		@media (width < 810px) {
			margin-top: 10px;
		}
	}
	.equipment-img{
		margin-top: 32px;
		container-type: inline-size;
		position: relative;
		@media (width < 810px) {
			margin-top: 20px;
		}
	}
	.equipment-detail__list{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 8%;
		max-width: 760px;
		margin-inline: auto;
		margin-top: 64px;
		@media (width < 810px) {
			gap: 20px;
			margin-top: 24px;
		}
	}
	.equipment-detail__item{
		&.--two-row{
			grid-row: span 2;
			.equipment-detail__img{
				img{
					aspect-ratio: 348 / 533;
				}
			}
		}
	}
	.equipment-detail__img{
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			aspect-ratio: 348 / 192;
		}
		figcaption{
			font-family: var(--font_gothic);
			font-size: clamp(13px, 6.769px + 0.769vw, 16px);/*16~13(1200~810)*/
			line-height: 1.4;
			margin: 5px 0 0 auto;
			inline-size: fit-content;
			color: #65605b;
		}
		&.--long{
			img{
				aspect-ratio: 348 / 610;
			}
		}
		&.--square{
			img{
				aspect-ratio: 348 / 262;
			}
		}
	}
	.equipment-detail__ttl{
		word-break: keep-all;
		font-size: clamp(15px, 4.615px + 1.282vw, 20px);/*20~15(1200~810)*/
		font-weight: 600;
		line-height: 1.4;
		margin-top: 10px;
		text-align: left;
		color: #65605b;
		@media (width < 810px) {
			margin-top: 8px;
		}
	}
	.equipment-detail__txt{
		font-family: var(--font_gothic);
		font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
		line-height: 1.4;
		margin-top: 5px;
		text-align: left;
		color: #65605b;
		@media (width < 810px) {
			margin-top: 3px;
		}
	}
	.kitchen-storage{
		width: 18.58cqw;/*223/1200*/
		position: absolute;
		bottom: 12.33cqw;/*148/1200*/
		right: 1.67cqw;/*20/1200*/
		img{
			width: 100%;
			max-width: none;
		}
	}
	.equipment-powder{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 5%;
		margin-top: 32px;
		@media (width < 810px) {
			align-items: flex-start;
			gap: 20px;
			margin-top: 20px;
		}
		@media (width < 500px) {
			flex-direction: column;
			gap: 20px 16px;
		}
	}
	.equipment-powder__img{
		flex-grow: 1;
		container-type: inline-size;
		position: relative;
		@media (width < 500px) {
			width: 100%;
		}
	}
	.equipment-powder__detail{
		flex-shrink: 0;
		width: 30%;
		@media (width < 500px) {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}
	}
	.equipment-powder__detail__block{
		margin-top: 8px;
		@media (width < 500px) {
			margin-top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		>*{
			&:first-child{
				margin-top: 0;
			}
		}
	}
	.powder-storage{
		width: 28.96cqw;/*223/770*/
		position: absolute;
		bottom: 25.97cqw;/*200/770*/
		right: 2.6cqw;/*20/770*/
		img{
			width: 100%;
			max-width: none;
		}
	}
	.equipment-rest{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 5%;
		margin-top: 32px;
		@media (width < 810px) {
			align-items: flex-start;
			margin-top: 20px;
			gap: 20px;
		}
		@media (width < 500px) {
			flex-direction: column;
		}
	}
	.equipment-rest__img{
		flex-grow: 1;
		@media (width < 500px) {
			width: 100%;
		}
	}
	.equipment-rest__inner{
		flex-shrink: 0;
		width: 30%;
		@media (width < 500px) {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			align-items: flex-start;
		}
	}
	.equipment-rest__fukidashi{
		border: 4px solid var(--point_c);
		background: #fff;
		padding: 32px 20px;
		margin-bottom: 8cqw;/*96/1200*/
		position: relative;
		@media (width < 810px) {
			border-width: 3px;
			padding: 16px;
			margin-bottom: 20px;
		}
		&::before{
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 19px 24px 19px 0;
			border-color: transparent var(--point_c) transparent transparent;
			position: absolute;
			top: 50%;
			left: -26px;
			translate: 0 -50%;
			@media (width < 810px) {
				border-width: 12px 16px 12px 0;
				left: -18px;
			}
			@media (width < 500px) {
				border-width: 0 12px 16px 12px;
				border-color: transparent transparent var(--point_c) transparent;
				top: -18px;
				left: 50%;
				translate: -50% 0;
			}
		}
		>*{
			&:first-child{
				margin-top: 0;
			}
		}
	}
}

.equipment-summary{
	.equipment-summary__wrap{
		padding-top: 64px;
		border-top: 6px solid var(--point_c);
		position: relative;
		@media (width < 810px) {
			padding-top: 48px;
			border-top-width: 4px;
		}
		&::before{
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 40px 45px 0 45px;
			border-color: var(--point_c) transparent transparent transparent;
			position: absolute;
			top: 0;
			left: 50%;
			translate: -50% 0;
			@media (width < 810px) {
				border-width: 28px 32px 0 32px;
			}
		}
	}
	.equipment-summary__txt{
		word-break: keep-all;
		font-size: clamp(16px, -0.615px + 2.051vw, 24px);/*24~16(1200~810)*/
		margin-top: 12px;
		@media (width < 810px) {
			margin-top: 10px;
		}
	}
	.equipment-summary__btn{
		margin-top: 32px;
		margin-inline: auto;
		max-width: 640px;
		@media (width < 810px) {
			margin-top: 20px;
		}
		a{
			display: block;
			padding: 12px 20px;
			background: var(--main_c);
			border-radius: 9999px;
			color: #fff;
			word-break: keep-all;
			font-size: clamp(20px, -4.923px + 3.077vw, 32px);/*32~20(1200~810)*/
			font-weight: 600;
			line-height: 1.4;
			transition: all 0.3s ease-out;
			&:hover{
				text-decoration: none;
				opacity: 0.7;
			}
		}
	}
}