@charset "utf-8";

@media screen and (max-width: 1200px) {
	.console_fv {
		background-image: url("../images/fv_sp.webp");
	}

	.console_fv_inner {
		min-height: auto;
		display: block;
		padding: 80px 5%;
	}

	.console_fv_body,
	.cta_purchase_body {
		width: 52%;
		max-width: none;
	}

	.cta_purchase {
		background-image: url("../images/cta_sp.webp");
	}

	.console_fv_points {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.console_fv_points li:not(:last-child)::after {
		content: none;
	}

	.scenes_list {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.solution,
	.scenes,
	.product_spec_section,
	.color_variation {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.product_spec_section .section_title,
	.color_variation .section_title {
		margin-bottom: 30px;
	}

	.color_variation_lead {
		margin-bottom: 30px;
	}

	.color_variation_list {
		gap: 24px;
	}

	.about_hobalis_image {
		width: 60%;
		margin-right: 0;
	}

	.solution_body {
		flex-direction: column;
		align-items: stretch;
	}

	.solution_text {
		width: 100%;
		order: 0;
	}

	.solution_image {
		width: 100%;
		margin-left: 0;
		height: auto;
		order: 1;
		border-radius: 12px;
	}

	.lp_console .quality .inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.lp_console .quality_head {
		display: contents;
		position: static;
		min-height: 0;
	}

	.lp_console .quality_text {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
	}

	.lp_console .quality_list {
		grid-template-rows: 1fr 1fr;
		grid-column: 1 / -1;
		grid-row: 2 / 4;
	}

	.lp_console .quality_image {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		display: block;
		width: 100%;
		height: 100%;
		min-height: 0;
		padding: 0;
		overflow: visible;
		background: transparent;
		grid-column: 2;
		grid-row: 3;
		z-index: 1;
		align-self: stretch;
	}

	.lp_console .quality_image img {
		position: absolute;
		width: 100%;
		max-width: 300px;
		height: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.lp_console .quality_image img.reveal,
	.lp_console .quality_image img.reveal.is-in {
		transform: translate(-54%, -72%);
	}

	.product_spec {
		padding: 20px;
	}
}

@media screen and (max-width: 1024px) {
	.console_fv,
	.cta_purchase {
		min-height: auto;
	}

	.console_fv_body,
	.cta_purchase_body,
	.about_hobalis_image {
		width: 100%;
		max-width: none;
		margin-right: 0;
		margin-left: 0;
		height: auto;
	}

	.cta_purchase_inner {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.product_spec_content {
		gap: 24px;
	}

	.product_spec_row {
		grid-template-columns: 6.5em minmax(0, 1fr);
	}
}