@charset "UTF-8";

/* ========================================
TOP VARIABLES 変数
======================================== */

.top {
	--top-main: #FF8900;
	--top-main-light: #fff2df;
	--top-text: #FF8900;
	--top-text-sub: #000;
	--top-bg: #ffffff;
	--top-content-width: 1520px;

	--top-service-support: #EE5827;
	--top-service-system: #109D64;
	--top-service-infra: #EB3535;

	--top-font-display: "Oswald", sans-serif;
}


/* ========================================
TOP COMMON INNER　共通コンテンツ幅
======================================== */

.top-about__inner,
.top-services__inner,
.top-ranking__inner,
.top-area__inner {
	max-width: var(--top-content-width);
	margin-inline: auto;
}

.top section {
	margin-bottom: 250px;
}

.top-section-heading {
	text-align: center;
	margin-inline: 0;
	display: flex;
	flex-direction: column;
}

/* ========================================
TOP COMMON TYPOGRAPHY　共通テキスト
======================================== */

.top-section-heading__title {
	width: 100%;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--top-text);
	text-align: center;
	margin-inline: 0;
	margin-bottom: 20px;
}

.top-section-heading__title span {
	font-size: 40px;
	color: var(--top-text-sub);
}

/* ========================================
TOP COMMON PARTS　共通パーツ
======================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 420px;
	max-width: 100%;
	height: 70px;
	padding: 16px 32px;
	border-radius: 15px;
	font-size: 21px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

.btn--consult {
	background-color: var(--top-main);
	transition: background-color 0.3s ease;
}

.btn--consult:hover {
	background-color: #d97800;
}

.btn--service {
	grid-area: button;
}

/* ========================================
TOP HERO
======================================== */

.top-hero {
	position: relative;
	width: 100%;
}

.top-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	width: 100%;
}

.top-hero__left {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-top: 80px;
	padding-left: max(
		24px,
		calc((100vw - var(--top-content-width)) / 2)
	);
	text-align: left;
}

.top-hero__right {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.top-hero__right::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	bottom: -20px;
	background-image: linear-gradient(90deg, #ffc200, #ff8900);
	border-radius: 0 0 0 70px;
	z-index: 0;
}

.top-hero__image-frame {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	border-radius: 0 0 0 50px;
}

.top-hero__image {
	display: block;
	width: 960px;
	max-width: none;
	height: auto;
}

.top-hero__cta {
	margin-bottom: 85px;
}


/* ========================================
TOP HERO TEXT
======================================== */

.top-hero .fv_previoustitle {
	margin: 0 0 8px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: var(--top-text-sub);
	white-space: nowrap;
}

.top-hero .fv_title {
	margin: 0;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--top-text-sub);
	white-space: nowrap;
}

.top-hero .fv_title__brand {
	margin: 0 0 70px;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--top-text);
	white-space: nowrap;
}

.top-hero .fv__list {
	margin-bottom: 60px;
	font-size: 21px;
}


/* ----------------------------------------
LAPTOP
---------------------------------------- */

@media screen and (max-width: 1520px) {

	.top-hero__left {
		padding-left: 60px;
	}

	.top-hero .fv_previoustitle {
		font-size: 30px;
	}

	.top-hero .fv_title {
		font-size: 52px;
	}

	.top-hero .fv_title__brand {
		margin-bottom: 56px;
		font-size: 52px;
	}

	.top-hero .fv__list {
		margin-bottom: 50px;
		font-size: 18px;
	}

}

/* ----------------------------------------
TABLET / SP
---------------------------------------- */
@media screen and (max-width: 960px) {

	.top-hero {
		width: 96%;
		margin-inline: auto;
	}

	.top-hero__inner {
		display: block;
	}

	.top-hero__right {
		display: none;
	}

	.top-hero__left {
		width: 100%;
		padding: 0;
		background: none;
		border-radius: 0;
		overflow: visible;
		text-align: center;
		color: var(--top-text-sub);
	}

	.top-hero__left::before {
		content: none;
	}

	.top-hero__visual {
		min-height: 620px;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		padding: 48px 32px 24px;

		background:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 40%,
				rgba(0, 0, 0, 0.12) 60%,
				rgba(0, 0, 0, 0.55) 100%
			),
			url("../images/top-hero.jpg")
			no-repeat
			35% center / cover;

		border-radius: 16px;
		overflow: hidden;
	}

	.top-hero .fv_previoustitle {
		margin: 0 0 12px;
		font-size: 24px;
		line-height: 1.5;
		color: #fff;
		white-space: normal;
	}

	.top-hero .fv_title {
		margin: 0;
		font-size: 42px;
		font-weight: 700;
		line-height: 1.35;
		color: #fff;
		white-space: normal;
	}

	.top-hero .fv_title__brand {
		margin: 6px 0 0;
		font-size: 44px;
		font-weight: 700;
		line-height: 1.35;
		color: var(--top-text);
		text-align: center;
	}

	.top-hero .fv__list {
		margin: 44px 0 32px;
		font-size: 18px;
		line-height: 1.8;
		color: var(--top-text-sub);
	}

	.top-hero .fv__list p {
		line-height: 1.8;
	}

	.top-hero__cta {
		margin-bottom: 36px;
	}

	.top-hero .btn--consult {
		width: 100%;
		max-width: 420px;
		height: 64px;
		font-size: 20px;
	}

	.top-hero__info {
		margin: 0;
		font-size: 13px;
		line-height: 1.7;
		color: var(--top-text-sub);
	}

}


/* ----------------------------------------
SMARTPHONE
---------------------------------------- */
@media screen and (max-width: 767px) {

	.top-hero__visual {
		min-height: 480px;

		padding: 40px 20px 16px;

		background:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 40%,
				rgba(0, 0, 0, 0.12) 60%,
				rgba(0, 0, 0, 0.55) 100%
			),
			url("../images/top-hero.jpg")
			no-repeat
			5% center / cover;

		border-radius: 12px;
	}

	.top-hero .fv_previoustitle {
		margin: 0 0 12px;
		font-size: 17px;
		line-height: 1.5;
	}

	.top-hero .fv_title {
		margin: 0;
		font-size: 30px;
		line-height: 1.35;
	}

	.top-hero .fv_title__brand {
		margin: 6px 0 0;
		font-size: 34px;
		line-height: 1.35;
	}

	.top-hero .fv__list {
		margin: 50px 0 32px;
		font-size: 15px;
		line-height: 1.8;
	}

	.top-hero .fv__list p {
		line-height: 1.8;
	}

	.top-hero__cta {
		margin-bottom: 36px;
	}

	.top-hero .btn--consult {
		width: 100%;
		max-width: none;
		height: 58px;
		font-size: 18px;
	}

	.top-hero__info {
		margin: 0;
		font-size: 12px;
		line-height: 1.7;
	}

}



/* ========================================
TOP INTRO
======================================== */
.top-intro {
	margin-bottom: 250px;
}

.top-intro__heading {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--top-text);
	margin-bottom: 50px;
}

.top-intro__heading span {
	color: var(--top-text-sub);
}

.top-intro__image {
	width: 60%;
}


/* ========================================
TOP ABOUT
======================================== */
.top-about__inner {
	margin-bottom: 50px;
}

.top-about__body {
	position: relative;
}

/* オレンジ背景 */
.top-about__body::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 200px;
	left: 0;
	background: var(--top-main);
	z-index: 0;
}

/* 装飾文字 About */
.top-about__decoration {
	position: absolute;
	top: 40%;
	left: -150px;
	z-index: 1;

	font-family: var(--top-font-display);
	font-size: 200px;
	font-weight: bolder;
	line-height: 1;
	color: #fff;
	opacity: 0.3;

	transform: translateY(-50%) rotate(-90deg);
	transform-origin: center;

	margin: 0;
}

/* リード文 */
.top-about__lead p {
	font-size: 21px;
	line-height: 2;
}

.top-about__lead span {
	font-size: 25px;
	font-weight: bold;
	color: var(--top-text);
}

/* カードエリア */
.top-about__cards-inner {
	position: relative;
	z-index: 1;
	padding-top: 100px;
}

/* カード一覧 */
.top-about__cards {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0;
	list-style: none;

	display: flex;
	flex-wrap: wrap;
	gap: 40px;

	text-align: left;
}

/* カード */
.top-about__card {
	flex: 1 1 320px;

	background-color: #fff;
	padding: 0 30px 30px;
	border-radius: 30px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);

	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* カード番号エリア */
.top-about__card-index {
	position: relative;
	display: inline-block;
	align-self: flex-start;

	font-family: var(--top-font-display);
	font-size: 70px;
	font-weight: 500;
	line-height: 1;
	color: var(--top-text);

	margin-bottom: 20px;
}

/* カード番号横のライン */
.top-about__card-index::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(100% + 20px);

	width: 2px;
	height: 100%;

	background-color: var(--top-main);
}

/* カード番号 */
.top-about__card-num {
	margin: 0;
	padding-top: 60px;
	line-height: 1;
}

/* カードタイトル */
.top-about__card-title {
	color: var(--top-text);
	font-size: 23px;
	font-weight: bold;
	line-height: 1.5;
}

/* カード画像 */
.top-about__card-image {
	margin-top: auto;
	width: 100%;
	height: auto;
}


/* ========================================
SERVICE
======================================== */
.top-services {
	position: relative;
}

/* 装飾文字 Services */
.top-services__decoration {
	position: absolute;
	top: -100px;
	right: 0;

	font-family: var(--top-font-display);
	font-size: 200px;
	font-weight: bolder;
	line-height: 1;
	color: color-mix(in srgb, var(--top-main) 5%, transparent);

	margin: 0;
	z-index: 0;
}

.top-services__inner {
	position: relative;
	z-index: 1;
}

.top-service {
	width: 90%;
	border-radius: 40px;
	padding: 50px;
	text-align: left;
	position: relative;
}

.top-services .top-section-heading__title {
	margin-bottom: 60px;
}

.top-service__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.top-service--support {
	background-color: color-mix(in srgb, var(--top-service-support) 5%, transparent);
	border: 2px solid var(--top-service-support);
}

.top-service--system {
	background-color: color-mix(in srgb, var(--top-service-system) 5%, transparent);
	border: 2px solid var(--top-service-system);
}

.top-service--infra {
	background-color: color-mix(in srgb, var(--top-service-infra) 5%, transparent);
	border: 2px solid var(--top-service-infra);
}

.top-service--support h3 {
	font-size: 30px;
	font-weight: bold;
	color: var(--top-service-support);
}

.top-service--system h3 {
	font-size: 30px;
	font-weight: bold;
	color: var(--top-service-system);
}

.top-service--infra h3 {
	font-size: 30px;
	font-weight: bold;
	color: var(--top-service-infra);
}

.top-service-articles {
	width: 70%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.top-service:nth-of-type(odd) {
	margin-right: auto;
}

.top-service:nth-of-type(even) {
	margin-left: auto;
}

.top-service--support .top-service__detail-title {
	color: var(--top-service-support);
}

.top-service--system .top-service__detail-title {
	color: var(--top-service-system);
}

.top-service--infra .top-service__detail-title {
	color: var(--top-service-infra);
}

.top-service--support .btn--service {
	background: linear-gradient(90deg,#FFC200 0%,#FF8900 100%);
}

.top-service--support .btn--service:hover {
	background: linear-gradient(90deg,#FFC200CC 0%,#FF8900CC 100%);
}

.top-service--system .btn--service {
	background: linear-gradient(90deg,#79EAC0 0%,#17C180 100%);
}

.top-service--system .btn--service:hover {
	background: linear-gradient(90deg,#79EAC0CC 0%,#17C180CC 100%);
}

.top-service--infra .btn--service {
	background: linear-gradient(90deg,#FF93EA 0%,#FF57B8 100%);
}

.top-service--infra .btn--service:hover {
	background: linear-gradient(90deg,#FF93EACC 0%,#FF57B8CC 100%);
}

.top-service__list {
	font-size: 15px;
	font-weight: 400;
	display: flex;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 4px;
	margin: 0 0 0 -5px;
	padding: 20px;
	list-style: none;
	background-color: #fff;
	border-radius: 20px;
}

.top-service__list li {
	position: relative;
	padding-left: 14px;
}

.top-service__list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transform: translateY(-50%);
}

.top-service--support .top-service__list {
	color: var(--top-service-support);
}

.top-service--system .top-service__list {
	color: var(--top-service-system);
}

.top-service--infra .top-service__list {
	color: var(--top-service-infra);
}

.top-service__lower {
	display: grid;
	grid-template-columns: 1fr 200px;
	grid-template-areas:
		"detail image"
		"button image";
	gap: 40px 20px;
	align-items: end;
}

.top-service__detail {
	grid-area: detail;
}

.top-service__image {
	grid-area: image;
	align-self: end;
}

.top-service__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ========================================
TOP RANKING
======================================== */
.top-ranking {
	position: relative;
	background-color: color-mix(in srgb, var(--top-main) 5%, transparent);
	padding-block: 120px;
	overflow: hidden;
}

/* 装飾文字 Ranking */
.top-ranking__decoration {
	position: absolute;
	top: 50%;
	right: -220px;

	font-family: var(--top-font-display);
	font-size: 180px;
	font-weight: bolder;
	line-height: 1;
	color: rgba(255, 255, 255, 0.7);

	transform: translateY(-50%) rotate(-90deg);
	transform-origin: center;

	margin: 0;
	z-index: 0;
}

.top-ranking__period {
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 80px;
}

.top-ranking__cards {
	position: relative;
	display: flex;
	gap: 40px;
	z-index: 1;
}

.top-ranking__card {
	flex: 1 1 0;
	min-width: 0;
	background-color: #fff;
	border-radius: 30px;
	text-align: left;
}

.top-ranking__card-title {
	border-radius: 30px 30px 0 0;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
	padding: 20px 30px;
}

.top-ranking__card--support .top-ranking__card-title {
	background: linear-gradient(90deg,#FF8900 0%,#FFC200 100%);
}

.top-ranking__card--system .top-ranking__card-title {
	background: linear-gradient(90deg,#17C180 0%,#79EAC0 100%);
}

.top-ranking__card--infra .top-ranking__card-title {
	background: linear-gradient(90deg,#FF57B8 0%,#FF93EA 100%);
}

.top-ranking__list {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.top-ranking__list li {
	display: flex;
}

.top-ranking__card--support .top-ranking__list {
	color: var(--top-service-support);
}

.top-ranking__card--system .top-ranking__list {
	color: var(--top-service-system);
}

.top-ranking__card--infra .top-ranking__list {
	color: var(--top-service-infra);
}

.top-ranking__item {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.top-ranking__rank {
	flex: 0 0 50px;
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.top-ranking__rank span {
	font-size: 20px;
}

.top-ranking__card--support .top-ranking__rank {
	color: var(--top-text);
}

.top-ranking__card--system .top-ranking__rank {
	color: var(--top-service-system);
}

.top-ranking__card--infra .top-ranking__rank {
	color: var(--top-service-infra);
}



.top-ranking__text {
	flex: 1;
	margin: 0;
}


/* ========================================
TOP AREA
======================================== */
.top-area {
	position: relative;
}

.top-area__inner {
	position: relative;
	z-index: 1;
}

/* 装飾文字 Area */
.top-area__decoration {
	position: absolute;
	top: -80px;
	left: 0;

	font-family: var(--top-font-display);
	font-size: 200px;
	font-weight: bolder;
	line-height: 1;
	color: color-mix(
		in srgb,
		var(--top-main) 5%,
		transparent
	);

	margin: 0;
	z-index: 0;
}

.top-area .top-section-heading__title {
	margin-bottom: 80px;
}

.top-area__content {
	max-width: 1000px;
	margin-inline: auto;
	text-align: left;
}

.top-area__list {
	margin: 0;
}

.top-area__item {
	margin-bottom: 60px;
}

.top-area__item dt {
	font-size: 20px;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 20px;
	border-bottom: 1px solid #707070;
}

.top-area__item dd {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;

	margin: 0;
}

.top-area__item dd span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 4px 20px;
	border: 1px solid #707070;
	border-radius: 9999px;

	font-size: 15px;
	line-height: 1.4;
	white-space: nowrap;

	background-color: #F7F7F7;
}

.top-area__note {
	margin: 20px 0 0;
	font-size: 16px;
	text-align: right;
}

/* ========================================
TOP RESPONSIVE　レスポンシブ
下層ページの 1200 / 1024 / 767px を基準に調整
======================================== */

/* ----------------------------------------
NOTEBOOK / LAPTOP
下層ページの 1365px 基準に合わせて余白と装飾文字を調整
---------------------------------------- */
@media screen and (max-width: 1365px) {

	.top-about__inner,
	.top-services__inner,
	.top-ranking__inner,
	.top-area__inner {
		width: calc(100% - 80px);
	}

	.top-about__decoration {
		left: -125px;
		font-size: 170px;
	}

	.top-services__decoration {
		top: -80px;
		font-size: 170px;
	}

	.top-ranking__decoration {
		right: -190px;
		font-size: 155px;
	}

	.top-area__decoration {
		top: -65px;
		font-size: 170px;
	}
}

/* ----------------------------------------
LAPTOP / SMALL DESKTOP
---------------------------------------- */
@media screen and (max-width: 1200px) {

	.top-about__inner,
	.top-services__inner,
	.top-ranking__inner,
	.top-area__inner {
		width: calc(100% - 64px);
	}

	.top section {
		margin-bottom: 180px;
	}

	.top-section-heading__title {
		font-size: 44px;
	}

	.top-section-heading__title span {
		font-size: 34px;
	}

	.top-intro {
		margin-bottom: 180px;
	}

	.top-intro__heading {
		font-size: 36px;
	}

	.top-intro__image {
		width: 70%;
	}

	.top-about__cards {
		max-width: 1000px;
		gap: 32px;
	}

	/* 2列時に3枚目だけ横いっぱいへ伸びないようにする */
	.top-about__card {
		flex: 0 1 calc((100% - 32px) / 2);
		min-width: 0;
	}

	.top-service-articles {
		width: 82%;
	}

	.top-service {
		width: 94%;
	}

	.top-ranking {
		padding-block: 100px;
	}

	.top-ranking__cards {
		width: 100%;
		gap: 24px;
	}

	.top-ranking__card-title {
		font-size: 21px;
		padding: 18px 24px;
	}

	.top-ranking__list {
		padding: 24px;
	}

	.top-area__content {
		width: calc(100% - 64px);
	}
}

/* ----------------------------------------
TABLET
---------------------------------------- */
@media screen and (max-width: 1024px) {

	.top-about__inner,
	.top-services__inner,
	.top-ranking__inner,
	.top-area__inner {
		width: calc(100% - 48px);
	}

	.top section {
		margin-bottom: 150px;
	}

	.top-section-heading__title {
		font-size: 40px;
	}

	.top-section-heading__title span {
		font-size: 31px;
	}

	.btn {
		width: 360px;
		height: 64px;
		font-size: 19px;
	}

	.top-intro__heading {
		font-size: 32px;
	}

	.top-intro__image {
		width: 78%;
	}

	.top-about__lead p {
		font-size: 18px;
	}

	.top-about__lead span {
		font-size: 22px;
	}

	.top-about__cards {
		max-width: 760px;
		gap: 32px;
	}

	/* 2列になった時、3枚目だけ横いっぱいに伸びないよう幅を固定 */
	.top-about__card {
		flex: 0 1 calc((100% - 32px) / 2);
		min-width: 0;
		padding: 0 24px 24px;
		border-radius: 24px;
	}

	.top-about__card-index {
		font-size: 60px;
	}

	.top-about__card-num {
		padding-top: 48px;
	}

	.top-about__card-title {
		font-size: 20px;
	}

	.top-about__decoration {
		left: -120px;
		font-size: 160px;
	}

	.top-service-articles {
		width: 88%;
		gap: 72px;
	}

	.top-service {
		width: 100%;
		padding: 40px;
		border-radius: 32px;
	}

	.top-service--support h3,
	.top-service--system h3,
	.top-service--infra h3 {
		font-size: 26px;
	}

	.top-service__lower {
		grid-template-columns: minmax(0, 1fr) 160px;
		gap: 32px 20px;
	}

	.top-service__list {
		font-size: 14px;
	}

	.top-services__decoration {
		top: -70px;
		font-size: 160px;
	}

	.top-ranking {
		padding-block: 90px;
	}

	.top-ranking__cards {
		flex-wrap: wrap;
		max-width: 760px;
		margin-inline: auto;
		gap: 28px;
	}

	/* ランキングも2列時の3枚目を1枚幅に固定 */
	.top-ranking__card {
		flex: 0 1 calc((100% - 28px) / 2);
	}

	.top-ranking__decoration {
		right: -180px;
		font-size: 150px;
	}

	.top-ranking__period {
		margin-bottom: 60px;
	}

	.top-area .top-section-heading__title {
		margin-bottom: 60px;
	}

	.top-area__content {
		width: calc(100% - 32px);
	}

	.top-area__decoration {
		font-size: 160px;
	}
}

/* ----------------------------------------
SMARTPHONE
---------------------------------------- */
@media screen and (max-width: 767px) {

	.top-about__inner,
	.top-services__inner,
	.top-ranking__inner,
	.top-area__inner {
		width: calc(100% - 32px);
	}

	.top section {
		margin-bottom: 110px;
	}

	.top-section-heading__title {
		font-size: 32px;
		line-height: 1.35;
	}

	.top-section-heading__title span {
		font-size: 26px;
	}

	.btn {
		width: 100%;
		height: 58px;
		padding: 12px 20px;
		border-radius: 12px;
		font-size: 17px;
	}

	/* HERO：既存のモバイル構造を活かし、はみ出しだけ抑える */
	.top-hero .fv_previoustitle,
	.top-hero .fv_title {
		white-space: normal;
	}

	.top-hero .fv__list {
		margin-bottom: 40px;
		font-size: 15px;
	}

	.top-hero__cta {
		margin-bottom: 40px;
	}

	.top-intro {
		margin-bottom: 120px;
	}

	.top-intro__heading {
		margin-bottom: 36px;
		font-size: 28px;
	}

	.top-intro__image {
		width: 100%;
	}

	.top-about__inner {
		margin-bottom: 36px;
	}

	.top-about__lead p {
		font-size: 16px;
		line-height: 1.8;
	}

	.top-about__lead span {
		font-size: 19px;
	}

	.top-about__cards-inner {
		padding-top: 64px;
	}

	.top-about__cards {
		max-width: 420px;
		gap: 24px;
	}

	.top-about__card {
		flex: 0 0 100%;
		padding: 0 22px 22px;
		border-radius: 22px;
		gap: 16px;
	}

	.top-about__card-index {
		font-size: 52px;
		margin-bottom: 8px;
	}

	.top-about__card-num {
		padding-top: 40px;
	}

	.top-about__card-title {
		font-size: 18px;
	}

	.top-about__card-text {
		font-size: 14px;
	}

	.top-about__body::before {
		bottom: 100px;
	}

	.top-about__decoration {
		top: 42%;
		left: -80px;
		font-size: 110px;
	}

	.top-service-articles {
		width: 100%;
		gap: 56px;
	}

	.top-service {
		width: 100%;
		padding: 24px;
		border-radius: 24px;
	}

	.top-service__body {
		gap: 16px;
	}

	.top-service--support h3,
	.top-service--system h3,
	.top-service--infra h3 {
		font-size: 22px;
		line-height: 1.4;
	}

	.top-service__lead {
		font-size: 14px;
	}

	.top-service__lower {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.top-service__detail,
	.top-service__image,
	.btn--service {
		width: 100%;
	}

	.top-service__image {
		max-width: 160px;
		margin-inline: auto;
	}

	.top-service__list {
		font-size: 13px;
		column-gap: 10px;
		row-gap: 4px;
		margin-left: 0;
		padding: 16px;
		border-radius: 16px;
	}

	.top-service__list li {
		padding-left: 12px;
	}

	.top-service__list li::before {
		width: 8px;
		height: 8px;
	}

	.top-services__decoration {
		top: -42px;
		font-size: 110px;
	}

	.top-ranking {
		padding-block: 72px;
	}

	.top-ranking__period {
		margin-bottom: 44px;
		font-size: 13px;
	}

	.top-ranking__cards {
		flex-direction: column;
		max-width: 420px;
		gap: 24px;
	}

	.top-ranking__card {
		flex: 0 0 auto;
		width: 100%;
		border-radius: 22px;
	}

	.top-ranking__card-title {
		padding: 18px 22px;
		border-radius: 22px 22px 0 0;
		font-size: 20px;
	}

	.top-ranking__list {
		padding: 22px;
		gap: 12px;
	}

	.top-ranking__rank {
		flex-basis: 46px;
		font-size: 27px;
	}

	.top-ranking__rank span {
		font-size: 17px;
	}

	.top-ranking__text {
		font-size: 14px;
	}

	.top-ranking__decoration {
		right: -120px;
		font-size: 110px;
	}

	.top-area__decoration {
		top: -45px;
		font-size: 110px;
	}

	.top-area .top-section-heading__title {
		margin-bottom: 48px;
	}

	.top-area__content {
		width: 100%;
	}

	.top-area__item {
		margin-bottom: 40px;
	}

	.top-area__item dt {
		padding-bottom: 10px;
		margin-bottom: 14px;
		font-size: 18px;
	}

	.top-area__item dd {
		gap: 8px;
	}

	.top-area__item dd span {
		padding: 4px 12px;
		font-size: 13px;
	}

	.top-area__note {
		margin-top: 8px;
		font-size: 14px;
		text-align: center;
	}
}