/**
 *
 * page-products.scss
 *
 */
/* ------------------------------------------------------------
 products-list
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.products-list {
		--localnav-height: 5.2rem;
	}
}

/* ----------------------------------------
 products-list__localnav
---------------------------------------- */
.products-list__localnav {
	position: relative;
	z-index: 10;
	border-top: var(--dotted);
	border-bottom: var(--dotted);
}

@media screen and (min-width: 1024px) {
	.products-list__localnav {
		position: sticky;
		top: var(--header-height-sticky);
		height: var(--localnav-height);
	}
}

@media screen and (min-width: 1024px) {
	.products-list__localnav ul {
		display: flex;
		width: 100%;
		height: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.products-list__localnav li {
		flex-basis: 100%;
		height: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.products-list__localnav li + li {
		border-left: var(--dotted);
	}
}

@media screen and (max-width: 1023px) {
	.products-list__localnav li + li {
		border-top: var(--dotted);
	}
}

.products-list__localnav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg5);
	-webkit-backdrop-filter: var(--bg-filter2);
	backdrop-filter: var(--bg-filter2);
}

@media screen and (min-width: 1024px) {
	.products-list__localnav a {
		padding: 0 2rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__localnav a {
		padding: 0.5rem 1rem;
	}
}

.products-list__localnav__contents {
	display: flex;
	align-items: center;
}

.products-list__localnav__contents span {
	display: block;
}

.products-list__localnav__num {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
	margin-bottom: -0.2rem;
}

@media screen and (min-width: 1024px) {
	.products-list__localnav__num {
		font-size: var(--font-size10);
	}
}

@media screen and (min-width: 1441px) {
	.products-list__localnav__num {
		font-size: var(--font-size12);
	}
}

@media screen and (max-width: 1023px) {
	.products-list__localnav__num {
		font-size: var(--font-size12);
	}
}

.products-list__localnav__txt {
	line-height: var(--line-height-normal);
	margin-bottom: 0.1rem;
}

@media screen and (min-width: 1024px) {
	.products-list__localnav__txt {
		font-size: var(--font-size13);
		margin-left: 0.6rem;
	}
}

@media screen and (min-width: 1441px) {
	.products-list__localnav__txt {
		font-size: var(--font-size16);
		margin-left: 1rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__localnav__txt {
		font-size: var(--font-size14);
		margin-left: 1rem;
	}
}

/* ----------------------------------------
 products-list__item
---------------------------------------- */
.products-list__item {
	padding: var(--space-xs3) 0;
}

@media screen and (min-width: 1024px) {
	.products-list__item {
		--area-plus: var(--localnav-height);
	}
}

.products-list__item + .products-list__item {
	border-top: var(--solid2);
}

/* ---------- products-list__item__header ---------- */
@media screen and (min-width: 1024px) {
	.products-list__item__header {
		position: sticky;
		top: calc( var(--header-height-sticky) + var(--localnav-height) + var(--gap));
	}
}

@media screen and (min-width: 1024px) and (max-height: 500px) {
	.products-list__item__header {
		position: static;
	}
}

.products-list__item__header__num {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-list__item__header__num {
		font-size: var(--font-size14);
	}
}

@media screen and (max-width: 1023px) {
	.products-list__item__header__num {
		font-size: var(--font-size12);
	}
}

.products-list__item__header__en {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-list__item__header__en {
		font-size: var(--font-size48);
		margin-top: 4rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__item__header__en {
		font-size: var(--font-size36);
		margin-top: 2rem;
	}
}

.products-list__item__header__title {
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-list__item__header__title {
		font-size: var(--font-size20);
		margin-top: 1rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__item__header__title {
		font-size: var(--font-size15);
	}
}

@media screen and (min-width: 1024px) {
	.products-list__item__header__txt {
		margin-top: 4rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__item__header__txt {
		margin-top: 2rem;
	}
}

/* ---------- products-list__item__main ---------- */
@media screen and (max-width: 1023px) {
	.products-list__item__main {
		display: flex;
		margin-top: 4rem;
	}
}

/* ----- products-list__item__main__header ----- */
@media screen and (min-width: 1024px) {
	.products-list__item__main__header {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__item__main__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 4.4rem;
		padding-right: var(--gap);
	}
}

.products-list__item__main__header__inner {
	position: sticky;
	top: calc( var(--header-height) + var(--gap));
}

.products-list__item__main__num {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	font-size: var(--font-size12);
	line-height: var(--line-height-normal);
}

.products-list__item__main__en {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family: var(--font-sans-serif);
	font-weight: 400;
	font-size: var(--font-size16);
	line-height: var(--line-height-normal);
	margin-top: 2rem;
}

.products-list__item__main__title {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: var(--font-size12);
	line-height: var(--line-height-normal);
	margin-top: 2rem;
}

/* ----- products-list__item__main__column ----- */
@media screen and (max-width: 1023px) {
	.products-list__item__main__column {
		flex: 1;
	}
}

/* ---------- products-list__cell ---------- */
/* ----- products-list__cell__figure ----- */
.products-list__cell__figure {
	--aspect: 100%;
}

/* ----- products-list__cell__title ----- */
.products-list__cell__title {
	line-height: var(--line-height-normal);
	margin-top: 2rem;
}

@media screen and (min-width: 1024px) {
	.products-list__cell__title {
		font-size: var(--font-size32);
	}
}

@media screen and (max-width: 1023px) {
	.products-list__cell__title {
		font-size: var(--font-size24);
	}
}

/* ----- products-list__cell__txt ----- */
@media screen and (min-width: 1024px) {
	.products-list__cell__txt {
		margin-top: 2rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__cell__txt {
		margin-top: 1rem;
	}
}

/* ----- products-list__cell__table ----- */
.products-list__cell__table {
	margin-top: 2rem;
}

@media screen and (min-width: 1024px) {
	.products-list__cell__table dl {
		display: flex;
		align-items: baseline;
	}
}

.products-list__cell__table dl + dl {
	margin-top: 1rem;
}

.products-list__cell__table dt {
	color: var(--color-txt3);
	font-size: var(--font-size12);
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-list__cell__table dt {
		width: 7rem;
	}
}

@media screen and (min-width: 1024px) {
	.products-list__cell__table dd {
		flex: 1;
	}
}

@media screen and (max-width: 1023px) {
	.products-list__cell__table dd {
		margin-top: 0.5rem;
	}
}

/* ------------------------------------------------------------
 products-flow
------------------------------------------------------------ */
.products-flow {
	--length: 9;
	--cell-header-height: 3rem;
	border-top: var(--dotted);
}

@media screen and (min-width: 1024px) {
	.products-flow {
		margin-top: 8rem;
	}
}

/* ----------------------------------------
 products-flow__header
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.products-flow__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--gap);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__header {
		padding: 6rem var(--gap);
	}
}

.products-flow__title {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-flow__title {
		font-size: var(--font-size96);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__title {
		font-size: var(--font-size48);
	}
}

@media screen and (min-width: 1024px) {
	.products-flow__txt {
		margin-left: var(--gap);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__txt {
		margin-top: 4rem;
	}
}

/* ----------------------------------------
 products-flow__cell
---------------------------------------- */
.products-flow__cell {
	border-top: var(--dotted);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.products-flow__cell {
		position: sticky;
		top: var(--top);
		height: calc( var(--wh) - var(--top));
	}
	.products-flow__cell:nth-of-type(1) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 0 );
		z-index: 1;
	}
	.products-flow__cell:nth-of-type(2) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 1 );
		z-index: 2;
	}
	.products-flow__cell:nth-of-type(3) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 2 );
		z-index: 3;
	}
	.products-flow__cell:nth-of-type(4) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 3 );
		z-index: 4;
	}
	.products-flow__cell:nth-of-type(5) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 4 );
		z-index: 5;
	}
	.products-flow__cell:nth-of-type(6) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 5 );
		z-index: 6;
	}
	.products-flow__cell:nth-of-type(7) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 6 );
		z-index: 7;
	}
	.products-flow__cell:nth-of-type(8) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 7 );
		z-index: 8;
	}
	.products-flow__cell:nth-of-type(9) {
		--top: calc( var(--header-height-sticky) + var(--cell-header-height) * 8 );
		z-index: 9;
	}
}

@media screen and (min-width: 1024px) and (max-height: 600px) {
	.products-flow__cell {
		--top: var(--header-height-sticky) !important;
	}
}

@media screen and (min-width: 1024px) and (max-height: 500px) {
	.products-flow__cell {
		position: static;
		height: 50rem;
	}
}

/* ---------- products-flow__cell___header ----- */
.products-flow__cell___header {
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--cell-header-height);
	padding: 0 var(--gap);
}

@media screen and (max-width: 1023px) {
	.products-flow__cell___header {
		justify-content: space-between;
	}
}

@media screen and (min-width: 1024px) {
	.products-flow__cell___header > * {
		flex-basis: 100%;
	}
}

.products-flow__cell___header__heading {
	display: flex;
	align-items: center;
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
}

.products-flow__cell___header__heading span {
	display: block;
}

@media screen and (min-width: 1024px) {
	.products-flow__cell___header__num {
		font-size: var(--font-size12);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell___header__num {
		font-size: var(--font-size10);
	}
}

@media screen and (min-width: 1024px) {
	.products-flow__cell___header__en {
		font-size: var(--font-size14);
		margin-left: 1rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell___header__en {
		font-size: var(--font-size11);
		margin-left: 0.5rem;
	}
}

.products-flow__cell___header__title {
	line-height: var(--line-height-normal);
	margin-left: var(--gap);
}

@media screen and (min-width: 1024px) {
	.products-flow__cell___header__title {
		font-size: var(--font-size14);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell___header__title {
		font-size: var(--font-size11);
	}
}

/* ---------- products-flow__cell__flex ----- */
.products-flow__cell__flex {
	padding-bottom: 3rem;
}

@media screen and (min-width: 1024px) {
	.products-flow__cell__flex {
		display: flex;
		justify-content: space-between;
		height: calc( 100% - var(--cell-header-height));
	}
	.products-flow__cell__flex > * {
		flex-basis: 100%;
	}
}

/* ----- products-flow__cell__figure ----- */
.products-flow__cell__figure {
	position: relative;
}

@media screen and (max-width: 1023px) {
	.products-flow__cell__figure {
		max-height: 53.6rem;
	}
	.products-flow__cell__figure::after {
		content: '';
		display: block;
		padding-top: 100%;
	}
}

/* ----- products-flow__cell__contents ----- */
@media screen and (min-width: 1024px) {
	.products-flow__cell__contents {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: var(--gap);
		margin-left: var(--gap);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell__contents {
		margin-top: 2rem;
	}
}

/* --- products-flow__cell__contents__heading --- */
.products-flow__cell__contents__heading {
	display: flex;
	align-items: center;
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: var(--line-height-normal);
}

.products-flow__cell__contents__heading span {
	display: block;
}

@media screen and (min-width: 1024px) {
	.products-flow__cell__contents__num {
		font-size: var(--font-size12);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell__contents__num {
		font-size: var(--font-size10);
	}
}

.products-flow__cell__contents__en {
	margin-left: 1rem;
}

@media screen and (min-width: 1024px) {
	.products-flow__cell__contents__en {
		font-size: var(--font-size14);
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell__contents__en {
		font-size: var(--font-size12);
	}
}

/* --- products-flow__cell__contents__title --- */
.products-flow__cell__contents__title {
	line-height: var(--line-height-normal);
}

@media screen and (min-width: 1024px) {
	.products-flow__cell__contents__title {
		font-size: var(--font-size40);
		margin-top: 2rem;
	}
}

@media screen and (max-width: 1023px) {
	.products-flow__cell__contents__title {
		font-size: var(--font-size22);
		margin-top: 1rem;
	}
}

/* --- products-flow__cell__contents__txt --- */
.products-flow__cell__contents__txt {
	margin-top: var(--space-xs2);
}
/*# sourceMappingURL=sourcemaps/page-products.css.map */