/* ============================================================================================
	WIDGET AB CUBE INFO / PATTERN
============================================================================================ */
.matsunaga-ab-cube-collection-header-wrapper {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #e8f6ff 30%),
	url(../images/bg.webp) top right /200% auto no-repeat
}
@media screen and (min-width: 1200px) {
	.matsunaga-ab-cube-collection-header-wrapper {
		background: linear-gradient(to top, #e8f6ff 0%, rgba(0,0,0,0) 30%),
	url(../images/bg.webp) top right /100% auto no-repeat
	}
}
.matsunaga-ab-cube-info-inner {
	flex-flow: column;
	gap: 2em !important
}
.matsunaga-ab-cube-info-content {
	flex: 1;
	min-width: 0
}
.matsunaga-ab-cube-info-content p {
	margin: 1em 0
}
.matsunaga-ab-cube-info-image-wrapper {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%
}
.matsunaga-ab-cube-info-image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.matsunaga-ab-cube-info-image:nth-of-type(1) {
	width: 40%;
	aspect-ratio: 16/9;
	margin-top: 4em
}
.matsunaga-ab-cube-info-image:nth-of-type(2) {
	width: 50%;
	aspect-ratio: 4/3
}
.matsunaga-ab-cube-info-image:nth-of-type(3) {
	width: 80%;
	aspect-ratio: 16/8;
	margin: 2em auto 0
}

/* buttons */
.matsunaga-ab-cube-info-inquiry-buttons {
	flex-flow: column
}
.matsunaga-ab-cube-info-inquiry-button {
	width: 100%;
	max-width: 500px
}

@media screen and (min-width: 768px) {
	.matsunaga-ab-cube-info-inner {
		flex-flow: row
	}
	.ab-cube-info-image {
		width: 50%;
		margin-bottom: 0 !important
	}
	.matsunaga-cube-info-content {
		flex: 1;
		min-width: 0
	}
	.matsunaga-ab-cube-info-inquiry-buttons {
		flex-flow: row nowrap
	}
	.matsunaga-ab-cube-info-inquiry-button {
		flex: 1;
		min-width: 0;
		max-width: initial
	}
}

@media screen and (min-width: 768px) {
	.matsunaga-ab-cube-info-inner {
		flex-flow: row nowrap;
		gap: 4% !important
	}
	.matsunaga-ab-cube-info-image-wrapper {
		width: 56%
	}
}

/* layout */
.matsunaga-layout-inner {
	flex-flow: column-reverse;
	gap: 2em
}

@media screen and (min-width: 768px) {
	.matsunaga-layout-inner {
		flex-flow: row nowrap;
		gap: 0
	}
	.matsunaga-layout-image-negative {
		margin-left: -9% !important
	}
}

.matsunaga-ab-cube-collection-header {
	flex-flow: column;
	gap: 40px 2% !important;
	width: 100%;
	max-width: 500px;
	margin: 0 auto
}
.matsunaga-ab-cube-collection-heading {
	font-size: clamp(30px, 6vw, 42px)
}
.matsunaga-ab-cube-collection-header-buttons {
	margin-left: auto !important
}

@media screen and (min-width: 768px) {
	.matsunaga-ab-cube-collection-header {
		flex-flow: row wrap;
		max-width: initial
	}
	.matsunaga-ab-cube-collection-header-title {
		width: 49%
	}
	.matsunaga-ab-cube-collection-header-desc {
		width: 49%
	}
}
@media screen and (min-width: 1201px) {
	.matsunaga-ab-cube-collection-header {
		flex-flow: row nowrap
	}
	.matsunaga-ab-cube-collection-header-title,
	.matsunaga-ab-cube-collection-header-desc {
		flex: 1;
		min-width: 0
	}
}
.matsunaga-ab-cube-info-content-wrapper {
	background: linear-gradient(to bottom, #e8f6ff 0%, rgba(0,0,0,0) 300px)
}