:root {
	--product-blue: #216284;
	--product-red: #e40026;
	--product-pale: #f1f7fa;
	--product-orange: #eb633e;
	--product-peach: #fdefeb;
	--product-gray: #f8f8f8;
	--product-arrow: #c4e0ef;
}

.product-page {
	color: #080808;
	background: #fff;
}

.text-nowrap {
	white-space: nowrap;
}

.product-page .site-header {
	z-index: 20;
}

.product-page em {
	font-weight: 700;
}

.product-content {
	width: min(1200px, calc(100% - 64px));
	margin-inline: auto;
}

.product-hero {
	position: relative;
	height: 770px;
	margin: 25px 25px 0;
}

.product-hero__media {
	position: relative;
	height: 600px;
	overflow: hidden;
}

.product-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-hero__media img:last-child {
	opacity: 0.8;
}

.product-hero__title {
	position: absolute;
	z-index: 2;
	/* top: 467px; 260818 */
	top: 500px;
	left: max(32px, calc((100vw - 1200px) / 2 - 32px));
}

.product-hero__title h1 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: clamp(72px, 9.375vw, 150px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.product-hero__title p {
	margin: 33px 0 0 10px;
	font-size: 25px;
	/* font-weight: 400; */
  font-weight: 700; /* 260818 */
	line-height: 32px;
	letter-spacing: 2.5px;
}

.product-intro {
	min-height: 462px;
	padding-top: 51px;
	text-align: center;
}

.product-intro h2 {
	margin: 0;
	font-size: 28px;
	/* font-weight: 400; 260818 */
	font-weight: 700;
	line-height: 1.85;
	letter-spacing: 0.05em;
}

.product-intro > span {
	display: block;
	width: 120px;
	height: 1px;
	margin: 41px auto 35px;
	background: var(--product-red);
}

.product-intro p,
.reason-block__lead p,
.other-feature > p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 2.13;
	letter-spacing: 0.05em;
}

.product-heading {
	display: flex;
	align-items: flex-start;
	gap: 33px;
}

.product-heading i {
	flex: 0 0 35px;
	height: 4px;
	margin-top: 63px;
	background: var(--product-red);
}

.product-heading h2 {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 72px;
	font-weight: 700;
	line-height: 1.55;
}

.product-heading p {
	margin: -10px 0 0;
	font-size: 18px;
  font-weight: 500; /* 260818 */
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.product-panel {
	margin-inline: 25px;
	background: var(--product-pale);
}

.problem-section,
.reasons-section,
.other-section,
.flow-section {
	scroll-margin-top: 130px;
}

.problem-section {
	height: 776px;
	padding-top: 98px;
	overflow: hidden;
	background: var(--product-pale);
}

.problem-section__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.problem-section__top > p {
	margin: 0 197px 0 0;
	font-size: 25px;
  font-weight: 700; /* 260818 */
	letter-spacing: 0.05em;
}

.problem-carousel {
	position: relative;
	height: 430px;
	margin-top: 107px;
}

.problem-carousel__track {
	position: absolute;
	left: 0;
	display: flex;
	gap: 50px;
	width: max-content;
	transform: translate3d(calc(50vw - 527px - var(--carousel-offset, 1054px)), 0, 0);
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.problem-carousel__track.is-jumping {
	transition: none;
}

.problem-card {
	display: grid;
	grid-template-columns: 230px 1fr;
	align-items: center;
	gap: 70px;
	flex: 0 0 1004px;
	height: 301px;
	padding: 44px 70px;
	background: #fff;
}

.problem-card > img {
	width: 180px;
	height: 180px;
	object-fit: contain;
}

.problem-card h3 {
	margin: 0 0 20px;
	font-size: 25px;
	/* font-weight: 400; */
  font-weight: 700; /* 260818 */
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.problem-card p {
	margin: 0;
	font-size: 16px;
	line-height: 2.13;
	letter-spacing: 0.05em;
}

.problem-card em,
.reason-block em {
	color: var(--product-red);
	font-style: normal;
}

.problem-carousel__button {
	position: absolute;
	z-index: 2;
	top: 119px;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: var(--product-arrow);
	font:
		300 42px/1 'Inter',
		sans-serif;
	cursor: pointer;
}

.problem-carousel__button--prev {
	left: calc(50% - 534px);
}
.problem-carousel__button--next {
	right: calc(50% - 534px);
}

.reasons-section {
	padding-top: 98px;
}

.reasons-section__heading {
	height: 247px;
}

.reason-block {
	position: relative;
	min-height: 1383px;
	margin: 0 25px 153px;
	padding: 127px 0 130px;
	background: var(--product-pale);
}

.reason-block:nth-of-type(3) {
	min-height: 1586px;
}

.reason-block--last {
	min-height: 2027px;
	margin-bottom: 96px;
	background: var(--product-pale);
}

.reason-block__number {
	position: absolute;
	top: -144px;
	left: 50%;
	width: 317px;
	height: 234px;
	transform: translateX(-50%);
	text-align: center;
}

.reason-block__number span {
	display: block;
	width: 100%;
	height: 125px;
	font-size: 35px;
	font-weight: 500;
	line-height: 125px;
}

.reason-block__number b {
	position: absolute;
	top: 83px;
	left: 9px;
	display: block;
	width: 299px;
	color: var(--product-red);
	font-family: 'DIN Alternate', 'DIN Condensed', 'Arial Narrow', sans-serif;
	font-size: 130px;
	font-weight: 700;
	line-height: normal;
}

.reason-block__lead {
	text-align: center;
}

.reason-block__lead h3 {
	margin: 0 0 69px;
	font-size: 50px;
	/* font-weight: 400; 260818 */
	font-weight: 700;
	line-height: 52px;
	letter-spacing: 2.5px;
}

.reason-board {
	width: min(1200px, calc(100% - 110px));
	margin: 78px auto 0;
	padding: 54px;
	background: #fff;
}

.reason-board > h4 {
	margin: 0;
	padding: 13px 20px;
	color: #fff;
	background: var(--product-blue);
	font-size: 23px;
	/* font-weight: 400; */
  font-weight: 700; /* 260818 */
	line-height: 1.45;
	text-align: center;
	letter-spacing: 0.05em;
}

.reason-board > p {
	margin: 34px 0 40px;
	text-align: center;
	line-height: 2;
	letter-spacing: 0.05em;
}

.compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

.compare-card {
	min-height: 530px;
	padding: 38px;
	text-align: center;
}

.compare-card--old {
	color: var(--product-blue);
	background: var(--product-pale);
}
.compare-card--new {
	color: var(--product-orange);
	background: var(--product-peach);
}

.compare-card h5 {
	margin: 0 0 30px;
	padding-block: 12px;
	border-block: 1px solid currentColor;
	font-size: 23px;
	/* font-weight: 400; */
	font-weight: 700; /* 260818 */
}

.compare-card p {
	min-height: 72px;
	color: #111;
	line-height: 1.8;
}

.old-steps {
	display: grid;
	grid-template-columns: 126px 1fr;
	min-height: 224px;
	margin-top: 18px;
	color: #111;
	background: #fff;
	text-align: left;
}

.old-steps b {
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--product-blue);
	text-align: center;
}

.old-steps span {
	padding: 26px 24px;
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0.05em;
}
.compare-card small {
	display: block;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.8;
}

.reason-01-folders {
	width: 100%;
	height: 224px;
	object-fit: contain;
	background: #fff;
}

/* PC Reason 01: Figma 1600px frame (520 x 580px cards / 442px inner width) */
@media (min-width: 1001px) {
	.compare-card {
		height: 580px;
		min-height: 0;
		padding: 50px 39px 0;
	}

	.compare-card h5 {
		display: grid;
		place-items: center;
		height: 62px;
		margin: 0;
		padding: 0;
		line-height: 1.4;
	}

	.compare-card p {
		height: 56px;
		min-height: 0;
		margin: 25px 0 0;
		font-size: 16px;
		line-height: 28px;
	}

	.old-steps,
	.reason-01-folders {
		margin-top: 31px;
	}

	.compare-card small {
		font-size: 16px;
		font-weight: 400;
		line-height: 28px;
	}

	.compare-card--old small {
		margin-top: 20px;
	}

	.compare-card--new small {
		margin-top: 35px;
		font-size: 23px;
	}
}

.reason-board--features {
	margin-top: 58px;
}

/* PC Reason 02: align the feature board with Figma's body-to-board spacing. */
@media (min-width: 1001px) {
	.reason-board--features {
		margin-top: 0;
	}
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
}

.feature-grid article {
	min-height: 463px;
	background: var(--product-peach);
}

.feature-grid h5 {
	display: flex;
	align-items: center;
	min-height: 50px;
	margin: 0;
	color: #fff;
	background: var(--product-orange);
	font-size: 20px;
	/* font-weight: 400; */
	font-weight: 700; /* 260818 */
}

.feature-grid h5 b {
	display: grid;
	place-items: center;
	align-self: stretch;
	width: 50px;
	margin-right: 15px;
	border: 1px solid var(--product-orange);
	color: var(--product-orange);
	background: #fff;
	font-size: 24px;
	/* font-weight: 400; */
	font-weight: 700; /* 260818 */
}

.feature-grid img {
	width: calc(100% - 60px);
	height: 178px;
	margin: 30px;
	object-fit: contain;
	background: #fff;
}

.feature-grid article > p {
	margin: -6px 30px 0;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0.8px;
}

.reason-board__caption {
	margin: 42px 0 28px !important;
	font-size: 20px;
  font-weight: 700; /* 260818 */
}

.layout-samples,
.display-types {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}

.layout-samples img,
.display-types img {
	width: 100%;
	height: auto;
}

.reason-board--modes {
	margin-top: 52px;
}

.mode-list {
	display: grid;
	gap: 20px;
	margin-top: 40px;
}

.mode-list article {
	display: grid;
	grid-template-columns: 458px 1fr;
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: 42px;
	row-gap: 0;
	align-items: center;
	min-height: 321px;
	padding: 38px 50px 38px 36px;
	background: var(--product-peach);
}

.mode-list img {
	grid-column: 1;
	grid-row: 1 / 5;
	width: 100%;
	height: 243px;
	object-fit: contain;
	background: #fff;
}

.mode-list h5 {
	grid-column: 2;
	grid-row: 2;
	margin: 0 0 30px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--product-orange);
	font-size: 23px;
	/* font-weight: 400; */
	font-weight: 700; /* 260818 */
}

.mode-list p {
	grid-column: 2;
	grid-row: 3;
	margin: 0;
	line-height: 1.8;
}

.other-section {
	padding-top: 0;
}

.other-section > .product-content {
	height: 247px;
	padding-top: 0;
}

.other-panel {
	margin: 0 25px 97px;
	padding: 153px 175px 130px;
	background: var(--product-gray);
}

.other-feature {
	padding-bottom: 79px;
}

.other-feature + .other-feature {
	margin-top: 78px;
}

.other-feature h3 {
	margin: 0 0 34px;
	padding-block: 18px;
	border-block: 1px solid var(--product-blue);
	font-size: 32px;
	/* font-weight: 400; 260818 */
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.05em;
}

.other-feature > p {
	margin-bottom: 44px;
	text-align: center;
}

.other-feature > img {
	width: 100%;
	height: auto;
	max-height: none;
	padding: 0;
	background: #fff;
}

.flow-section {
	min-height: 847px;
	padding-top: 0;
}

.flow-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 25px;
	margin: 46px 0 0;
	padding: 0;
	list-style: none;
}

.flow-list li {
	position: relative;
	padding-top: 116px;
}

.flow-list li > span,
.flow-list li > b {
	position: absolute;
}

.flow-list li > span {
	top: 0;
	left: 38px;
	width: 145px;
	height: 125px;
	font-family: 'Inter', sans-serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 125px;
	text-align: center;
}

.flow-list li > b {
	top: 52px;
	left: 47px;
	z-index: 2;
	width: 127px;
	height: 125px;
	color: var(--product-red);
	font-family: 'DIN Alternate', 'DIN Condensed', 'Arial Narrow', sans-serif;
	font-size: 70px;
	font-weight: 700;
	line-height: 125px;
	text-align: center;
}

.flow-list li > div {
	position: relative;
	min-height: 298px;
	padding: 0;
	background: var(--product-gray);
}

.flow-list img {
	position: absolute;
	left: 50%;
	top: 96px;
	object-fit: contain;
	transform: translateX(-50%);
}

.flow-list p {
	position: absolute;
	top: 207px;
	left: 0;
	width: 100%;
	margin: 0;
	font-size: 20px;
	line-height: 52px;
	letter-spacing: 1px;
	text-align: center;
	font-weight: 700;　/* 260818 追加 */
}

.flow-list li:nth-child(1) img {
	top: 92px;
	width: 75px;
	height: 78px;
}
.flow-list li:nth-child(2) img {
	width: 88px;
	height: 68px;
}
.flow-list li:nth-child(3) img {
	width: 114px;
	height: 73px;
}
.flow-list li:nth-child(4) img {
	width: 85px;
	height: 73px;
}
.flow-list li:nth-child(5) img {
	width: 105px;
	height: 73px;
}

@media (max-width: 1000px) {
	.product-hero {
		height: 610px;
		margin: 12px;
	}
	.product-hero__media {
		height: 470px;
	}
	.product-hero__title {
		top: 400px;
		left: 28px;
	}
	.product-hero__title h1 {
		font-size: clamp(56px, 11vw, 90px);
	}
	.product-intro {
		padding-top: 55px;
	}
	.product-intro h2 {
		font-size: 23px;
	}
	.problem-section {
		height: auto;
		padding: 80px 0;
	}
	.problem-section__top {
		display: block;
	}
	.problem-section__top > p {
		margin: 35px 0 0 68px;
	}
	.problem-carousel {
		height: auto;
		margin-top: 65px;
		overflow-x: auto;
	}
	.problem-carousel__track {
		position: static;
		transform: none !important;
		padding-inline: 32px;
	}
	.problem-card[data-carousel-clone] {
		display: none;
	}
	.problem-card {
		flex-basis: min(780px, calc(100vw - 90px));
		grid-template-columns: 150px 1fr;
		gap: 36px;
	}
	.problem-card > img {
		width: 135px;
		height: 135px;
	}
	.problem-carousel__button {
		display: none;
	}
	.reason-block {
		margin-inline: 12px;
	}
	.reason-board {
		width: calc(100% - 64px);
		padding: 34px;
	}
	.compare-grid,
	.feature-grid {
		gap: 24px;
	}
	.mode-list article {
		grid-template-columns: 42% 1fr;
	}
	.other-panel {
		margin-inline: 12px;
		padding-inline: 50px;
	}
}

@media (max-width: 720px) {
	.product-content {
		width: min(327px, calc(100% - 48px));
	}

	.product-hero {
		height: 271px;
		margin: 75px 12px 0;
	}

	.product-hero__media {
		height: 179px;
	}

	.product-hero__title {
		top: 151px;
		left: 12px;
	}

	.product-hero__title h1 {
		font-size: 47px;
		line-height: 55px;
		white-space: nowrap;
	}

	.product-hero__title p {
		margin: 7px 0 0 2px;
		font-size: 13px;
		line-height: 16px;
		letter-spacing: 0.65px;
	}

	.product-intro {
		display: grid;
		grid-template-rows: 96px 23px 1px 18px 156px;
		row-gap: 0;
		width: min(327px, calc(100% - 48px));
		height: 396px;
		min-height: 0;
		padding-top: 26px;
	}

	.product-intro h2 {
		grid-row: 1;
		font-size: 18px;
		line-height: 32px;
		letter-spacing: 0.05em;
	}

	.product-intro > span {
		grid-row: 3;
		width: 120px;
		margin: 0 auto;
	}

	.product-intro p,
	.reason-block__lead p,
	.other-feature > p {
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.05em;
	}

	.product-intro > p {
		grid-row: 5;
		text-align: left;
	}

	.product-heading {
		gap: 7px;
	}

	.product-heading i {
		flex-basis: 15px;
		height: 3px;
		margin-top: 60px;
	}

	.product-heading h2 {
		font-size: 35px;
		line-height: 125px;
	}

	.product-heading p {
		margin: -37px 0 0 -22px;
		font-size: 13px;
		line-height: normal;
		letter-spacing: 0.05em;
	}

	.problem-section {
		height: 729px;
		margin-inline: 0;
		padding: 30px 0 0;
	}

	.problem-section__top {
		display: block;
		width: min(327px, calc(100% - 48px));
	}

	.problem-section__top > p {
		height: 52px;
		margin: 28px 0 0;
		font-size: 13px;
		line-height: 52px;
		letter-spacing: 0.65px;
	}

	.problem-carousel {
		height: 463px;
		margin-top: 14px;
		overflow: visible;
	}

	.problem-carousel__track {
		position: absolute;
		left: calc(50% - 139.5px);
		gap: 48px;
		width: max-content;
		padding: 0;
		transform: translate3d(calc(0px - var(--carousel-offset, 327px)), 0, 0) !important;
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.problem-card,
	.problem-card[data-carousel-clone] {
		display: block;
		flex: 0 0 279px;
		width: 279px;
		height: 417px;
		min-height: 0;
		padding: 28px 37px 30px;
		text-align: center;
	}

	.problem-card > img {
		width: 110px;
		height: 110px;
		margin-inline: auto;
	}

	.problem-card h3 {
		margin: 35px 0 22px;
		font-size: 15px;
		line-height: 22px;
		letter-spacing: 0.75px;
	}

	.problem-card p {
		margin: 0;
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.65px;
		text-align: left;
	}

	.problem-carousel__button {
		display: block;
		top: 186px;
		width: 46px;
		height: 46px;
		padding: 0;
		font-size: 0;
	}

	.problem-carousel__button::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 9px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		content: '';
	}

	.problem-carousel__button--prev {
		left: 15px;
	}
	.problem-carousel__button--next {
		right: 15px;
	}
	.problem-carousel__button--prev::before {
		transform: translate(-35%, -50%) rotate(135deg);
	}
	.problem-carousel__button--next::before {
		transform: translate(-65%, -50%) rotate(-45deg);
	}

	.reasons-section {
		padding-top: 30px;
	}

	.reasons-section__heading {
		height: 220px;
	}

	.reason-block {
		height: 1479px;
		min-height: 0 !important;
		margin: 0 0 108px;
		padding: 73px 0 0;
	}

	.reason-block:nth-of-type(2) {
		height: 2161px;
	}

	.reason-block--last {
		height: 1845px;
		margin-bottom: 0;
		background: var(--product-pale);
	}

	.reason-block__number {
		top: -119px;
	}

	.reason-block__number span {
		font-size: 20px;
		font-weight: 500;
	}

	.reason-block__number b {
		top: 55px;
		font-size: 80px;
		line-height: 125px;
	}

	.reason-block__lead h3 {
		height: 22px;
		margin: 0 0 38px;
		font-size: 22px;
		line-height: 22px;
		letter-spacing: 0.05em;
	}

	.reason-block__lead p {
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	.reason-board {
		width: min(327px, calc(100% - 48px));
		margin: 28px auto 0;
		padding: 0;
	}

	.reason-block:nth-of-type(2) .reason-board,
	.reason-block--last .reason-board {
		margin-top: 85px;
	}

	.reason-block--last .reason-board {
		margin-top: 33px;
	}

	.reason-board > h4 {
		display: grid;
		place-items: center;
		min-height: 45px;
		padding: 0 24px;
		font-size: 13px;
		line-height: 22px;
		letter-spacing: 0.05em;
	}

	.reason-board > p {
		margin: 20px 24px 0;
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	.reason-board--compare {
		height: 1108px;
	}

	.compare-grid,
	.feature-grid {
		grid-template-columns: 1fr;
		gap: 25px;
		margin: 23px 24px 0;
	}

	.compare-card {
		min-height: 0;
		padding: 32px 18px 15px;
	}

	.compare-card--old {
		height: 511px;
	}
	.compare-card--new {
		height: 401px;
	}

	.compare-card h5 {
		display: grid;
		place-items: center;
		height: 32px;
		margin: 0;
		padding: 0;
		font-size: 14px;
		line-height: 32px;
		letter-spacing: 0.7px;
	}

	.compare-card p {
		min-height: 0;
		height: 78px;
		margin: 18px 0 0;
		font-size: 13px;
		line-height: 26px;
		text-align: left;
	}

	.old-steps {
		display: block;
		height: 223px;
		min-height: 0;
		margin-top: 18px;
	}

	.old-steps b {
		height: 40px;
		font-size: 13px;
		font-weight: 400;
		line-height: 28px;
		letter-spacing: 0.65px;
	}

	.old-steps span {
		display: block;
		height: 183px;
		padding: 12px 16px;
		font-size: 13px;
		line-height: 26px;
	}

	.compare-card small {
		margin-top: 15px;
		font-size: 13px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0.65px;
		text-align: center;
	}

	.reason-01-folders {
		height: 147px;
		margin-top: 18px;
	}

	.reason-board--features {
		height: 1668px;
	}

	.reason-board--features .feature-grid article:last-child {
		height: 401px;
	}

	.reason-board--features > h4 {
		min-height: 65px;
		font-size: 15px;
		line-height: 22px;
		letter-spacing: 0.75px;
	}

	.reason-board--features .feature-grid {
		gap: 20px;
	}

	.feature-grid article {
		height: 383px;
		min-height: 0;
	}

	.feature-grid h5 {
		min-height: 40px;
		height: 40px;
		font-size: 15px;
		line-height: 22px;
	}

	.feature-grid h5 b {
		width: 40px;
		margin-right: 15px;
		font-size: 22px;
	}

	.feature-grid img {
		width: calc(100% - 36px);
		height: 161px;
		margin: 18px;
	}

	.feature-grid article > p {
		margin: -5px 17px 0;
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.05em;
	}

	.reason-board__caption {
		margin: 24px 24px 0 !important;
		font-size: 13px;
		line-height: 22px;
		text-align: left !important;
	}

	.layout-samples,
	.display-types {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px 10px;
		margin: 27px 24px 0;
	}

	.reason-board--modes {
		height: 1469px;
	}

	.reason-board--modes > h4 {
		min-height: 86px;
		font-size: 15px;
		line-height: 22px;
		letter-spacing: 0.75px;
	}

	.mode-list {
		gap: 20px;
		margin: 26px 24px 0;
	}

	.mode-list article {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: 340px;
		min-height: 0;
		padding: 6px 18px 15px;
		box-sizing: border-box;
	}

	.mode-list h5 {
		order: 1;
		grid-column: auto;
		grid-row: auto;
		display: grid;
		place-items: center;
		flex: 0 0 52px;
		width: 100%;
		height: 52px;
		margin: 0;
		padding: 0;
		border-top: 0;
		border-bottom: 1px solid var(--product-orange);
		box-sizing: border-box;
		font-size: 15px;
		line-height: 22px;
	}

	.mode-list img {
		order: 2;
		grid-column: auto;
		grid-row: auto;
		flex: 0 0 129px;
		width: 100%;
		height: 129px;
		margin-top: 15px;
	}

	.mode-list p {
		order: 3;
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		margin: 13px 0 0;
		font-size: 13px;
		line-height: 26px;
		letter-spacing: 0.05em;
	}

	.reason-board--modes .reason-board__caption {
		margin-top: 24px !important;
		text-align: center !important;
	}

	.reason-board--modes .display-types {
		margin-top: 27px;
	}

	.other-section > .product-content {
		height: 187px;
		padding-top: 30px;
	}

	.other-panel {
		height: 1340px;
		margin: 0;
		padding: 55px 24px 80px;
	}

	.other-feature {
		padding: 0;
	}

	.other-feature + .other-feature {
		margin-top: 46px;
	}

	.other-feature h3 {
		display: grid;
		place-items: center;
		height: 64px;
		margin: 0;
		padding: 0;
		font-size: 22px;
		line-height: 22px;
	}

	.other-feature > p {
		margin: 20px 0 0;
		font-size: 13px;
		line-height: 26px;
		text-align: left;
	}

	.other-feature > img {
		margin-top: 28px;
		object-fit: contain;
	}

	.other-feature:nth-child(1) > p {
		height: 104px;
	}
	.other-feature:nth-child(1) > img {
		height: 139px;
	}
	.other-feature:nth-child(2) > p {
		height: 78px;
	}
	.other-feature:nth-child(2) > img {
		height: 181px;
	}
	.other-feature:nth-child(3) > p {
		height: 104px;
	}
	.other-feature:nth-child(3) > img {
		height: 159px;
	}

	.flow-section {
		width: min(327px, calc(100% - 48px));
		height: 1044px;
		min-height: 0;
		padding: 30px 0 80px;
	}

	.flow-list {
		grid-template-columns: repeat(2, 152px);
		column-gap: 23px;
		row-gap: 0;
		margin-top: 4px;
	}

	.flow-list li {
		height: 268px;
		padding-top: 90px;
	}

	.flow-list li:last-child {
		height: 296px;
	}

	.flow-list li > span {
		top: 0;
		left: 4px;
		width: 145px;
		height: 125px;
		font-size: 18px;
		line-height: 125px;
	}

	.flow-list li > b {
		top: 28px;
		left: 14px;
		width: 127px;
		height: 125px;
		font-size: 45px;
		line-height: 125px;
	}

	.flow-list li > div {
		width: 152px;
		min-height: 206px;
		height: 206px;
		background: var(--product-gray);
	}

	.flow-list img {
		top: 59px;
		height: 60px;
	}

	.flow-list p {
		top: 139px;
		width: 151px;
		font-size: 13px;
		line-height: 52px;
		letter-spacing: 0.65px;
	}

	.flow-list li:nth-child(1) img {
		top: 59px;
		width: 62px;
		height: 64px;
	}
	.flow-list li:nth-child(2) img {
		top: 63px;
		width: 72px;
		height: 57px;
	}
	.flow-list li:nth-child(3) img {
		top: 59px;
		width: 94px;
		height: 60px;
	}
	.flow-list li:nth-child(4) img {
		top: 59px;
		width: 70px;
		height: 60px;
	}
	.flow-list li:nth-child(5) img {
		top: 56px;
		width: 86px;
		height: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.problem-carousel__track {
		transition: none;
	}
}