/* ==========================================================================
   BtoB Solution Common Components
   ========================================================================== */
/* --------------------------------------------------------------------------
ユーティリティ
-------------------------------------------------------------------------- */
.u-sp {
	display: block;
}

@media (min-width: 768px) {
	.u-sp {
		display: none;
	}
}

@media (max-width: 769px) {
	.u-pc {
		display: none;
	}
}

/* --------------------------------------------------------------------------
scroll hint
-------------------------------------------------------------------------- */
.scroll-hint-text {
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
セクション
-------------------------------------------------------------------------- */
.c-section {
	padding-block: 64px;
	position: relative;
}

._arrow-bg {
	background: var(--gray-grad);
}

._arrow-bg + .c-section {
	padding-top: 144px;
}

._arrow-bg::before {
	content: "";
	width: 100%;
	height: 80px;
	background-color: var(--light-gray);
	position: absolute;
	left: 0;
	bottom: -79px;
	padding-bottom: 80px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}

._bg-grad {
	background: var(--green-grad);
}

._bg-green {
	background-color: var(--light-green);
}

._bg-cta {
	background: var(--orange-grad);
}

._bg-note {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/bg-note.png) repeat left top /28px 28px;
}

.l-inner {
    max-width: calc(var(--inner) + var(--inner-padding));
	padding-inline: calc(var(--inner-padding) / 2);
    margin-inline: auto;
	position: relative;
	z-index: 1;
}

.section__item {
	margin-top: 84px;
}

.section__item__column2 {
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.section__item__column {
	flex: 1;
}

@media (min-width: 768px) {
    .c-section {
		 padding-block: 80px;
    }

	._arrow-bg::before {
		height: 120px;
		bottom: -119px;
		padding-bottom: 120px;
	}

	._arrow-bg + .c-section {
		padding-top: 200px;
	}

	.section__item {
		margin-top: 92px;
	}

	.section__item__column2 {
		flex-direction: row;
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
見出し
-------------------------------------------------------------------------- */
/* H2 Heading */
.heading__lv2 {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.heading__lv2 > .en {
	font-size: 1rem;
	color: var(--emerald);
	font-weight: 500;
	position: relative;
	padding-left: 13.5px;
}

.heading__lv2 > .en::before {
	content: "";
	width: 6px;
	height: 6px;
	background-color: var(--emerald);
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 10px;
}

.heading__lv2 > .text {
	font-size: 1.75rem;
}

/* H3 Heading */
.heading__lv3 {
	padding-left: 12px;
	border-left: 6px solid var(--emerald);
	font-size: 1.5rem;
}

.heading__lv3._white {
	color: var(--white);
}

/* H4 Heading */
.heading__lv4 {
	font-size: 1.125rem;
}


/* Section Lead Text */
.section__lead {
	margin-top: 24px;
	font-size: 1rem;
}

.section__lead._center {
	text-align: center;
}

.section__text {
	font-size: 1rem;
	text-align: justify;
}

@media (min-width: 768px) {
	.section__lead {
		margin-top: 32px;
	}
}

/* --------------------------------------------------------------------------
Note & Text
-------------------------------------------------------------------------- */
/* Text */
.c-note-text {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    display: block;
    line-height: 1.5;
}

/* note */
.c-note-text::before {
    content: "※";
    margin-right: 0.25em;
}

/* --------------------------------------------------------------------------
figure
-------------------------------------------------------------------------- */
/* figure */
.section__figure {
	overflow: hidden;
	border-radius: 4px;
}

.section__figure > .caption {
	text-align: center;
	font-size: 0.875rem;
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
list
-------------------------------------------------------------------------- */
/* チェックリスト */
.list__check > li {
	padding-left: 32px;
	font-size: 1rem;
	position: relative;
}

.list__check > li::before {
	content: "";
	width: 20px;
	height: 24px;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-check.svg) no-repeat left top /cover;
	position: absolute;
	left: 0;
	top: 2px;
}

.list__check > li:not(:first-child) {
	margin-top: 12px;
}

/* 丸アイコンリスト */
.list__circle > li {
	padding-left: 26px;
	font-size: 0.875rem;
	position: relative;
}

.list__circle > li::before {
	content: "";
	width: 18px;
	height: 24px;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
}

.list__circle._green > li::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/list-icon-green.svg) no-repeat left top /cover;
}

.list__circle._black > li::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/list-icon-gray.svg) no-repeat left top /cover;
}


.list__circle > li:not(:first-child) {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
リンク
-------------------------------------------------------------------------- */
/* 関連ソリューションリンク */
.list__link {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.list__link > li > a {
	color: var(--green);
	font-size: 0.875rem;
	font-weight: 500;
	padding-bottom: 4px;
	padding-left: 20px;
	position: relative;
	text-decoration: none;
}

.list__link > li > a::before,
.list__link > li > a::after {
	content: "";
	position: absolute;
}

.list__link > li > a::before {
	left: 3px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--green);
	border-bottom: 1px solid var(--green);
	rotate: -45deg;
	transition: var(--transition);
}

.list__link > li > a::after {
	width: 100%;
	height: 1px;
	background-color: var(--light-emerald);
	left: 0;
	bottom: 0;
	transform: scale(1, 1);
	transform-origin: left top; 
	transition: transform var(--transition);
}

@media (min-width: 768px) {
	.list__link {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media(any-hover: hover) {
	.list__link > li > a:hover::before {
		left: 6px;
	}

	.list__link > li > a:hover::after {
		transform-origin: right top;
		transform: scale(0, 1);
	}

}

/* 戻るリンク */
.back__link {
	margin-top: 24px;
}

.back__link > a {
	font-size: 1rem;
	color: var(--emerald);
	font-weight: 700;
	text-decoration: none;

	padding-bottom: 4px;
	padding-left: 20px;
	position: relative;
	transition: var(--transition);
    display: inline-block;
}

.back__link > a::before,
.back__link > a::after {
	content: "";
	position: absolute;
}

.back__link > a::before {
	left: 0;
	top: 50%;
    translate: 0 calc(-50% - 2px);
	width: 16px;
	aspect-ratio: 1/1;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-arrow-thin.svg) no-repeat left top /cover;
	transform: scale(-1, 1);
	transition: var(--transition);
}

.back__link > a::after {
	transform-origin: right top;
	width: 100%;
	height: 1px;
	background-color: var(--light-emerald);
	left: 0;
	bottom: 0;
	transform: scale(0, 1);
	transform-origin: right top; 
	transition: transform var(--transition);
}

@media (min-width: 768px) {
	.back__link {
		margin-top: 32px;
	}
}

@media(any-hover: hover) {
	.back__link > a:hover::before {
		left: -3px;
	}

	.back__link > a:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
}

/* --------------------------------------------------------------------------
ボタン
-------------------------------------------------------------------------- */
.button__round {
	width: 100%;
	display: flex;
    justify-content: center;
	text-decoration: none;
	border-radius: 100vmax;
	position: relative;
	padding: 18px;

	border: 1px solid transparent;
	overflow: hidden;
}

.button__round._small {
	padding: 12px 42px 12px 28px;
}

.button__round::before,
.button__round::after {
	content: "";
	position: absolute;
	transition: var(--transition);
}

.button__round::before {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	translate: -100% 0;
}

.button__round::after {
	width: 16px;
	aspect-ratio: 1/1;
	top: 50%;
	translate: 0 -50%;
	right: 16px;
	z-index: 1;

	mask-image: url(/cms/sc/img/solution/it/sccloud/design-template/icon-arrow.svg);
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: cover;
}

.button__round._white {
	background-color: var(--white);
	color: var(--orange);
	box-shadow: 0px 4px 6px 0px rgba(68, 78, 83, 0.2);
}

.button__round._white::after {
	background-color: var(--orange);
}

.button__round._border {
	border-color: var(--white);
	color: var(--white);
}

.button__round._border::after {
	background-color: var(--white);
}

.button__round > .text {
	font-size: 1.125rem;
	translate: -4px 0;
	font-weight: 700;
	transition: var(--transition);
	position: relative;
	z-index: 1;
}

.button__round._small > .text {
	font-size: 1rem;
	translate: 0 0;
}

@media(any-hover: hover) {
	.button__round:hover::before {
		translate: 0 0;
	}

	.button__round:hover::after {
		right: 13px;
	}

	.button__round._white:hover::before {
		background-color: var(--orange);
		border-color: var(--white);
	}

	.button__round._white:hover::after {
		background-color: var(--white);
	}

	.button__round._white:hover > .text {
		color: var(--white);
	}

	.button__round._border:hover::before {
		background-color: var(--white);
	}

	.button__round._border:hover::after {
		background-color: var(--orange);
	}

	.button__round._border:hover > .text {
		color: var(--orange);
	}
}

/* --------------------------------------------------------------------------
テーブル
-------------------------------------------------------------------------- */
.table__wrap .section__table {
	width: 800px;
}

.section__table {
	margin-top: 32px;
	width: 100%;
	border-collapse: collapse;
}

.section__table th,
.section__table td {
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 16px 12px;
	font-size: 0.875rem;
}

.section__table th {
	background-color: var(--dark-gray);
	font-weight: 700;
	color: var(--white);
}

.section__table td {
	background-color: var(--white);
}

.section__table th:last-child,
.section__table td:last-child {
	border-right: none;
}

.section__table._fixed {
	table-layout: fixed;
}

.section__table .wid25 {
	width: 25%;
}

.section__table ._center {
	text-align: center;
}

.section__table ._large {
	font-size: 1.125rem;
}

.section__table .bg__gray {
	background-color: var(--gray);
}

.section__table .bg__green {
	background: var(--grad-green);
}

.section__table .bg__purple {
	background: var(--purple-grad);
}

.section__table .bg__light {
	background-color: var(--light-green);
}

.section__table .icon__text {
	text-align: center;
	padding-top: 40px;
	position: relative;
}

.section__table .icon__text::before {
	content: "";
	width: 28px;
	aspect-ratio: 1/1;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin-inline: auto;
}

.section__table .icon__text._circle::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-circle.svg) no-repeat left top /cover;
}

.section__table .icon__text._triangle::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-triangle.svg) no-repeat left top /cover;
}

.section__table .icon__text._double::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-double-circle.svg) no-repeat left top /cover;
}

.section__table .icon__text._x::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-x.svg) no-repeat left top /cover;
}

@media (min-width: 768px) {
	.table__wrap .section__table {
		width: 1140px;
	}

	.section__table th,
	.section__table td {
		font-size: 1rem;
	}

	.section__table ._large {
		font-size: 1.25rem;
	}
	.section__table .icon__text {
		text-align: left;
		padding-top: 0;
		padding-left: 40px;
	}

	.section__table .icon__text::before {
		right: auto;
		top: 50%;
		translate: 0 -50%;
		margin-inline: 0;
	}
}


/* --------------------------------------------------------------------------
hero
-------------------------------------------------------------------------- */
.hero-section {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/hero-bg.png) no-repeat center top /cover;
	padding-block: 64px;
	position: relative;
	transition: var(--transition);
}

.hero-section._bg-green {
	background-color: var(--emerald);
}

.hero-section._bg-yellow {
	background-color: var(--yellow-green);
}
.hero-section._bg-purple {
	background-color: var(--purple);
}

.hero-section::after {
	content: "";
	width: 100%;
	height: 8px;
	background: linear-gradient(90deg, #90BE20 0%, #16A1B4 100%);
	position: absolute;
	left: 0;
	bottom: 0;
}

.hero__column {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.hero__lead {
	font-weight: 700;
	font-size: 1.25rem;
}

.hero__heading + .hero__heading {
	margin-top: 20px;
}

.hero__heading {
	font-weight: 700;
	font-size: 2.25rem;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--light-emerald);
}

.hero__heading + .hero__text {
	margin-top: 20px;
}

.hero__text {
	font-size: 1rem;
}

.hero__banner {
	width: fit-content;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
}

.hero__banner > img {
	width: 100%;
}

@media (min-width: 768px) {
	.hero-section {
		padding-block: 80px;
	}

	.hero__column {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.hero__content {
		width: 50.9%;
	}

	.hero__banner {
		width: 40%;
	}
}

/* --------------------------------------------------------------------------
課題
-------------------------------------------------------------------------- */
.assignment__card {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.assignment__card > li {
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
	padding: 48px 24px 32px;
	position: relative;
}

.assignment__card__icon {
	width: 52px;
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	top: -20px;
}

.assignment__card__heading {
	text-align: center;
	font-size: 1.125rem;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

.assignment__card__text {
	margin-top: 24px;
	font-size: 0.875rem;
	text-align: justify;
}

@media (min-width: 768px) {
	.assignment__card {
		margin-top: 52px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 44px 24px;
	}

	.assignment__card._column3 > li {
		flex: 1;
	}

	.assignment__card._column3:has(> li:nth-of-type(3)) > li {
		width: calc((100% / 3) - (24px * 2 / 3));
		flex: none;
	}
}

/* --------------------------------------------------------------------------
実績
-------------------------------------------------------------------------- */
.achievement__box {
	margin-top: 24px;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/box-bg.png) no-repeat center top /cover;
	border-radius: 4px;
	padding: 40px 27px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
}

.achievement__list {
	display: flex;
	flex-direction: column;
}

.achievement__list > li {
	padding-block: 56px 16px;
}

.achievement__list > li:not(:first-child) {
	border-top: 1px solid var(--border-green);
}

.achievement__list > li:first-child {
	padding-top: 0;
}

.achievement__list > li:last-child {
	padding-bottom: 0;
}

.achievement__list__heading {
	background-color: var(--white);
	text-align: center;
	font-size: 1rem;
	color: var(--green);
	border-radius: 4px;
	padding: 4px;
}

.achievement__list__number {
	color: var(--white);
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
}

.achievement__list__number .number {
	font-size: 3.75rem;
}

.achievement__list__text {
	font-size: 0.875rem;
	color: var(--white);
	font-weight: 500;
	text-align: center;
}

@media (min-width: 768px) {
	.achievement__box {
		margin-top: 32px;
		padding: 32px 42px;
	}

	.achievement__list {
		flex-direction: row;
	}

	.achievement__list > li {
		padding: 16px 43px;
		flex: 1;
	}

	.achievement__list > li:not(:first-child) {
		border-top: none;
		border-left: 1px solid var(--border-green);
	}

	.achievement__list > li:first-child {
		padding-top: 16px;
		padding-left: 0;
	}

	.achievement__list > li:last-child {
		padding-bottom: 16px;
		padding-right: 0;
	}
}


/* --------------------------------------------------------------------------
強み
-------------------------------------------------------------------------- */
.strengths__card {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.strengths__card > li {
	background-color: var(--white);
	border-radius: 4px;
	border-top: 4px solid var(--emerald);
	padding: 44px 20px 23px;
	overflow: hidden;
	position: relative;
	box-shadow: 0px 10px 30px 0px rgba(11, 34, 64, 0.05);

}

.strengths__card__number {
	width: 48px;
	aspect-ratio: 1/1;
    border-bottom-right-radius: 48px;
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--roboto);
	color: var(--white);
	font-size: 1rem;
	font-weight: 500;
    padding-top: 8px;
    padding-left: 8px;
	background-color: var(--emerald);
}

.strengths__card__heading {
	text-align: center;
	font-size: 1.125rem;
	color: var(--emerald);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.strengths__card__text {
	font-size: 0.875rem;
	margin-top: 20px;
	text-align: justify;
}

@media (min-width: 768px) {
	.strengths__card {
		margin-top: 32px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	.strengths__card._column3 > li {
		flex: 1;
	}

	.strengths__card._column3:has(> li:nth-of-type(3)) > li {
		width: calc((100% / 3) - (20px * 2 / 3));
		flex: none;
	}
}

/* --------------------------------------------------------------------------
2カラムコンテンツ
-------------------------------------------------------------------------- */
.column2 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.column2__content {
	flex: 1;
}

.column2__content > *:not(:first-child) {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.column2 {
		flex-direction: row;
		gap: 64px;
	}

	.column2__image {
		width: 45.43%;
	}
}

/* --------------------------------------------------------------------------
セクション CTA
-------------------------------------------------------------------------- */
.cta__column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cta__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cta__heading > .tag {
	width: fit-content;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 100vmax;
	color: var(--white);
	font-size: 0.875rem;
	border: 1px solid rgba(255, 255, 255, .2);
	padding: 4px 32px;

}

.cta__heading > .text {
	font-size: 1.75rem;
	text-align: center;
	color: var(--white);
}

.cta__heading > .text._left {
	text-align: left;
}

.cta__text {
	color: var(--white);
	font-size: 1rem;
	margin-top: 32px;
}

.cta__button {
	margin-inline: auto;
	max-width: 296px;
    width: 100%;
}

@media (min-width: 768px) {
	.cta__column {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.cta__content {
		width: 61.75%;
	}
	
	.cta__heading > .text {
		text-align: left;
	}

	.cta__button {
		max-width: 316px;
	}
}

/* --------------------------------------------------------------------------
サービス
-------------------------------------------------------------------------- */
.service__card {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 76px;
}

.service__card > li {
	background-color: var(--white);
	border-radius: 4px;
	border: 1px solid var(--light-emerald);
	position: relative;
	padding: 0 24px 24px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
}

.service__card__heading {
	background-color: var(--emerald);
	border-radius: 4px;
	text-align: center;
	color: var(--white);
	font-size: 1.125rem;
	padding: 4px 8px;
	margin-top: -15px;
}

.service__card__text {
	margin-top: 20px;
	font-size: 1rem;
	text-align: justify;
}

.boundary__box {
	margin-top: 64px;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/box-bg.png) no-repeat center top /cover;
	border-radius: 8px;
	padding: 40px 16px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
}

.boundary__list {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.boundary__list > li {
	background-color: var(--white);
	border-radius: 8px;
	padding: 24px 20px 32px;
	flex: 1;
}

.boundary__list > li:first-child {
	border: 4px solid var(--border-green);
	box-shadow: 0px 0px 12px 0px rgba(2, 129, 146, 1);
}

.boundary__list > li > * {
	margin-top: 15px;
}

.boundary__list > li > :first-child {
	margin-top: 0;
}

.boundary__list__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.boundary__list__heading > .sub {
	width: fit-content;
	font-size: 0.875rem;
	padding: 4px 28px;
	border-radius: 100vmax;
	color: var(--white);
	min-width: 128px;
}

.boundary__list__heading > .main {
	font-size: 1.125rem;
}

.boundary__list__heading > .sub._green {
	background-color: var(--emerald);
}

.boundary__list__heading > .sub._black {
	background-color: var(--body);
}

@media (min-width: 768px) {
	.service__card {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 36px 24px;
		margin-top: 87px;
	}

	.service__card._column4 > li {
		flex: 1;
	}

	.service__card._column4:has(> li:nth-of-type(4)) > li {
		width: calc((100% / 4) - (24px * 3 / 4));
		flex: none;
	}

	.boundary__box {
		margin-top: 72px;
		padding: 40px;
	}

	.boundary__list {
		flex-direction: row;
	}

	.boundary__list > li {
		padding-inline: 32px;
        border: 4px solid var(--border);
	}

	.boundary__list__heading > .sub {
		min-width: 170px;
	}
}


/* --------------------------------------------------------------------------
流れ
-------------------------------------------------------------------------- */
.flow__wrap .flow__list {
	width: 1140px;
	padding-bottom: 10px;
	padding-right: 10px;
}


.flow__list {
	margin-top: 32px;
	display: flex;
	gap: 42px;
}

.flow__list > li {
	background-color: var(--white);
	border-radius: 8px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
	padding: 20px;
	position: relative;
	flex: 1;
}

.flow__wrap .flow__list:has(> li:nth-of-type(5)) > li {
		width: calc((100% / 4) - (42px * 3 / 4));
		flex: none;
}

.flow__list > li:not(:last-child)::after {
	content: "";
	width: 18px;
	aspect-ratio: 1/1;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-arrow.svg) no-repeat left top /cover;
	position: absolute;
	top: 50%;
	right: -30px;
	translate: 0 -50%;
}

.flow__list__number {
	margin-inline: auto;
	width: 40px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: var(--emerald);
	font-size: 1.25rem;
	font-weight: 700;
	font-family: var(--roboto);
	text-align: center;
	color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.flow__list__heading {
	margin-top: 12px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--emerald);
	text-align: center;
}

.flow__list__text {
	font-size: 1rem;
	margin-top: 12px;
	text-align: justify;
}

.step__list {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.step__list > li {
	background-color: var(--white);
	border-radius: 4px;
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
	padding: 12px 24px 24px;
	position: relative;
	flex: 1;
}

.step__list > li:not(:last-child)::after {
	content: "";
	width: 18px;
	aspect-ratio: 1/1;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-arrow.svg) no-repeat left top /cover;
	position: absolute;
	left: 0;
	right: 0;
    bottom: -36px;
    rotate: 90deg;
	margin-inline: auto;
}

.step__list__number {
	font-family: var(--roboto);
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
}

.step__list__number > .number {
	font-size: 1.5rem;
	color: var(--green);
	margin-left: 3px;
}

.step__list__tag {
	margin-top: 4px;
	border-radius: 4px;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 4px 8px;
	color: var(--white);
}

.step__list__tag._orange {
	background-color: var(--orange);
}

.step__list__tag._green {
	background-color: var(--emerald);
}

.step__list__heading {
	margin-top: 12px;
	font-size: 1.25rem;
	text-align: center;
}

.step__list__text {
	margin-top: 20px;
	font-size: 1rem;
	text-align: justify;
}

.caution__box {
	margin: 16px auto 0;
	width: 89.55%;
	max-width: 800px;
	border-radius: 8px;
	border: 2px solid var(--orange);
	padding: 12px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: var(--white);
}

.caution__heading {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.caution__heading > .text {
	padding-top: 40px;
	position: relative;
	text-align: center;
	font-size: 1rem;
	display: block;
}

.caution__heading > .text::before {
	content: "";
	width: 32px;
	aspect-ratio: 1/1;
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-caution.svg) no-repeat left top /cover;
	position: absolute;
	left: 0;
	right: 0;
    top: 0;
	margin-inline: auto;
}

.caution__content {
	flex: 1;
}

.caution__text {
	font-size: 0.875rem;
	text-align: justify;
}

@media (min-width: 768px) {
	.step__list {
		flex-direction: row;
	}

	.step__list > li:not(:last-child)::after {
		left: auto;
		right: -36px;
		bottom: auto;
		rotate: 0deg;
		margin-inline: 0;
		top: 50%;
		translate: 0 -50%;
	}

	.caution__box {
		margin-top: 32px;
		padding-block: 20px;
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

	.caution__heading {
		padding-bottom: 0;
		border-bottom: none;
		padding-right: 32px;
		border-right: 1px solid var(--border);
	}
}

/* --------------------------------------------------------------------------
関連情報・事例・コラム
-------------------------------------------------------------------------- */
.case__card {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.case__card > li {
	background-color: var(--light-green);
	border-radius: 8px;
}

.case__card > li > a {
	color: inherit;
}

.case__card__vertical {
	display: flex;
	flex-direction: column;
}

.case__card__beside {
	display: flex;
}

.case__card__vertical .case__card__image {
	height: 152px;
	border-radius: 4px;
}

.case__card__beside .case__card__image {
	width: 120px;
	border-radius: 4px 0 4px 0;
}

.case__card__beside > .case__card__content {
    padding-bottom: 0;
}

.case__card__beside + .case__card__result {
	margin-top: 20px;
}

.case__card__image {
	overflow: hidden;
}

.case__card__image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}

.case__card__content {
	padding: 24px 18px 20px;
	flex: 1;
}

.case__card__company {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--green);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border);
}

.case__card__heading {
	margin-top: 20px;
	font-size: 1rem;
	font-weight: 700;
	text-align: justify;
}

.case__card__result {
	background-color: var(--emerald);
	border-radius: 4px;
	color: var(--white);
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	margin: 0 18px 24px;
	padding: 12px 16px;
}

@media (min-width: 768px) {
	.case__card {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.case__card._column2 {
		gap: 40px;
	}

	.case__card._column2 > li {
		width: calc((100% / 2) - (40px * 1 / 2));
	}

	.case__card._column3 {
		gap: 24px;
	}

	.case__card._column3 > li {
		width: calc((100% / 3) - (24px * 2 / 3));
	}

	.case__card__content {
		padding: 16px 24px 32px;
	}

	.case__card__beside + .case__card__result {
		margin: 20px 24px 24px;
	}

	.case__card__result {
		margin-inline: 24px;
	}
}

@media(any-hover: hover) {
	.case__card > li > a:hover .case__card__image img {
		scale: 1.1;
	}
}

.card__list {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card__list > li {
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow: hidden;
    background-color: var(--white);
	display: flex;
	flex-direction: column;
}

.card__list__image__download {
	background-color: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 16px;
}

.card__list__image__download > img {
	border: 1px solid var(--white);
	box-shadow: 4px 4px 8px 0px rgba(68, 78, 83, 0.2);
	max-height: 124px;
}

.card__list__image {
	height: 160px;
	overflow: hidden;
}

.card__list__image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__list__content {
	padding: 16px 20px;
	flex: 1;
}

.card__list__heading {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.card__list__heading > .tag {
	background-color: var(--emerald);
	color: var(--white);
	border-radius: 4px;
	font-size: 0.6875rem;
	padding: 2px 6px;
	width: fit-content;
}

.card__list__heading > .text {
	font-size: 1rem;
}

.card__list__text {
	margin-top: 10px;
	font-size: 0.875rem;
}

.card__list__link {
	margin-top: 10px;
}

.card__list__link > a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--green);
	padding-bottom: 4px;
	padding-right: 20px;
	position: relative;
	display: inline-block;
}

.card__list__link > a::before,
.card__list__link > a::after {
	content: "";
	position: absolute;
}

.card__list__link > a::before {
	width: 16px;
	aspect-ratio: 1/1;
	right: 0;
	top: 50%;
	translate: 0 calc(-50% - 2px);
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-arrow-thin.svg) no-repeat left top /cover;
	transition: var(--transition);
}

.card__list__link > a[download]::before {
	background: url(/cms/sc/img/solution/it/sccloud/design-template/icon-download.svg) no-repeat left top /cover;
}

.card__list__link > a::after {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--light-emerald);
	transform: scale(1, 1);
	transform-origin: left top; 
	transition: transform var(--transition);
}

@media (min-width: 768px) {
	.card__list > li {
		flex-direction: row;
	}

	.card__list__image__download,
	.card__list__image {
		width: 120px;
		height: auto;
	}

	.card__list__content {
		padding-inline: 24px;
	}
}

@media(any-hover: hover) {
	.card__list__link > a:hover::before {
    	right: -3px;
	}

	.card__list__link > a[download]:hover::before {
    	right: 0;
		top: calc(50% + 3px);
	}
	
	.card__list__link > a:hover::after {
		transform-origin: right top;
		transform: scale(0, 1);
	}
}

/* --------------------------------------------------------------------------
関連記事
-------------------------------------------------------------------------- */
.article__card {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.article__card > li {
	border-radius: 4px;
	border: 1px solid var(--border);
	overflow: hidden;
	background-color: var(--white);
}

.article__card > li > a {
	display: block;
	text-decoration: none;
	color: var(--body);
	transition: var(--transiton);
}

.article__card__image {
	height: 180px;
	overflow: hidden;
}

.article__card__image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}

.article__card__content {
	padding: 16px;
}

.article__card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.article__card__date {
	font-size: 0.75rem;
	font-weight: 500;
	font-family: var(--roboto);
}

.article__card__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.article__card__tag > li {
	background-color: var(--border-green);
	color: var(--emerald);
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	padding: 0 10px;
	border-radius: 2px;
}

.article__card__heading {
	margin-top: 12px;
	font-size: 1rem;
	text-align: justify;
}

@media (min-width: 768px) {
	.article__card {
		margin-top: 32px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.article__card > li {
		width: calc((100% / 3) - (24px * 2 / 3));
	}
}

@media(any-hover: hover) {
	.article__card > li > a:hover .article__card__image img {
		scale: 1.1;
	}
}


/* --------------------------------------------------------------------------
よくある質問 (FAQ) 
-------------------------------------------------------------------------- */
.faq__block {
	max-width: 920px;
	margin: 44px auto 0;
}

.faq__desc > div:not(:first-child) {
	margin-top: 40px;
}

.faq__desc > div > dt,
.faq__desc > div > dd {
	display: flex;
	gap: 16px;
}

.faq__desc > div > dt {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	align-items: center;
}

.faq__desc > div > dd {
	margin-top: 12px;
}

.faq__icon {
	font-size: 2rem;
	font-weight: 700;
	font-family: var(--roboto);
}

.faq__icon._q {
	color: var(--emerald);
}

.faq__icon._a {
	color: var(--orange);
}

.faq__heading {
	font-size: 1.25rem;
	font-weight: 700;
}

.faq__text {
	font-size: 1rem;
	padding-top: 12px;
}

.faq__list__note {

	padding-top: 10px;
}

.faq__list__note > li {
	font-size: 0.75rem;
	padding-left: 1em;
	text-indent: -1em;
}

.faq__list__note > li::before {
	content: "※";
}

/* --------------------------------------------------------------------------
ページ終端 CTA
-------------------------------------------------------------------------- */
.final-cta {
	position: relative;
}

.cta__final__block {
    padding-inline: calc(var(--inner-padding) / 2);
	padding-block: 48px;
	background: linear-gradient(180deg, #E85622 0%, #DB2102 100%);
	display: flex;
	align-items: center;
}

.cta__buttons {
	margin-top: 24px;
	width: fit-content;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cta__final__image {
	position: relative;
	height: 375px;
}

.cta__final__image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta__final__image::before {
	content: "";
	width: 100%;
	height: 277px;
	position: absolute;
	left: 0;
	top: -1px;
	background-color: var(--dark-orange);
	clip-path: polygon(0 0, 0% 100%, 100% 0);
}

@media (min-width: 768px) {
	.final-cta {
		display: flex;
	}

	.cta__final__block {
		flex: 1;
		padding-inline: 30px;
		background: linear-gradient(90deg, #E85622 0%, #DB2102 100%);
	}

	.cta__final__content {
		margin-inline: auto;
		max-width: 670px;
	}

	.cta__buttons {
		flex-direction: row;
	}

	.cta__final__image {
		width: 43%;
		height: auto;
	}

	.cta__final__image::before {
		width: 268px;
		height: 100%;
		left: -1px;
		top: 0;
		clip-path: polygon(0 0, 0% 100%, 100% 100%);
	}
}