.open-sans {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: "wdth"100;
}

body {
	--black: #333;
	--dark-gray: #384D74;
	--gradient-sky: #73acff, #175898;
	--gradient-button: #00317b, #1F92E8;

}

/*
 * 画像
*/
img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/*
 * 改行
*/
:is(br, wbr)[sp], .sp {
	display: none;
}

@media screen and (max-width: 767px) {
	:is(br, wbr)[pc], .pc {
		display: none;
	}

	:is(br, wbr)[sp] {
		display: inline;
	}

	.sp {
		display: block;
	}
}

/*
 * ボタン
 * /assets/common/css/pc.cssを継承１
*/
.btn {
	padding-inline: 60px;
	background: #00183b;
	margin-inline: auto;
	color: white;
	position: relative;
	z-index: 0;
}
.btn::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	background: linear-gradient(to right, var(--gradient-button));
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: -1;
}
@media (hover: hover) {
	.btn::after {
		transition: 0.3s 0s ease;
	}
	.btn:hover::after {
		opacity: 0;
	}
}
.btn.disabled {
	pointer-events: none;
	background: #6b6b6b;
}
.btn.disabled::after {
	display: none;
}

:is(.title, .headline) {
	line-height: 1.5;
}
.shear {
	background: var(--dark-gray);
	clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
	margin-inline: auto;
	color: white;
	text-align: center;
	letter-spacing: 0.1em;
}

.wrap {
	width: auto;
	max-width: 1280px;
	padding-inline: 40px;
	margin-inline: auto;
}
@media screen and (max-width: 767px) {
	.btn {
		padding-inline: 2ic;
	}
	.wrap {
		max-width: 100%;
		margin-inline: 0;
	}
}

main.main {
	color: var(--black);
	font-size: 1.6rem;
	line-height: 1.75;

	overflow-x: clip;
}
:where(main.main) > section {
	padding-block: 168px 90px;
}
:where(main.main) > section.slash {
	padding-block: 120px 90px;
	position: relative;
	z-index: 0;
}
section.slash::before {
	content: "";
	display: block;
	width: 100%;
	height: 540px;
	background: linear-gradient(to right, var(--gradient-sky));
	clip-path: polygon(0 0, 100% 28.88%, 100% 100%, 0 71.11%);

	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
section.slash .headings {
	color: white;
}

.headings {
	margin-bottom: 84px;
	text-align: center;
}

.headings .title {
	font-size: 6rem;
}

.headings .headline {
	font-size: 1.8rem;
	margin-bottom: 60px;
}

.headings .headline + p {}

@media screen and (max-width: 767px) {
	:where(main.main) > section {
		padding-block: 90px;
	}
	:where(main.main) > section.slash {
		padding-block: 120px 90px;
	}
	.headings {
		padding-inline: 40px;
	}
	.headings .headline {
		margin-bottom: 0.5lh;
	}
	.headings .headline + p {
		text-align: left;
	}
}


/* =======================================================
 * ABOUT
======================================================= */
section.about {}
section.about .container {
	padding-inline: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	position: relative;
}
section.about .block {
	width: 29.5%;
	text-align: center;
	
}
section.about .container::before,
section.about .container::after {
	content: "";
	display: block;
	width: 3.5%;
	aspect-ratio: 1 / 1;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:%23384d74;%7D%3C/style%3E%3C/defs%3E%3Cg id='c'%3E%3Cpolygon class='d' points='45 6.279 38.721 0 22.5 16.221 6.279 0 0 6.279 16.221 22.5 0 38.721 6.279 45 22.5 28.779 38.721 45 45 38.721 28.779 22.5 45 6.279'/%3E%3C/g%3E%3C/svg%3E");

	position: absolute;
	top: 30%;
}
section.about .container::before {
	left: 33.33%;
	translate: -79.5% -50%;
}
section.about .container::after {
	left: 66.66%;
	translate: -20.5% -50%;
}
section.about img.image {
	aspect-ratio: 1 / 1;
	border-radius: 100%;
}
section.about .label {
	width: 80%;
	margin-block: 0.75lh;
	font-size: 2.5rem;
}
section.about .block .headline {
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--dark-gray);
}
@media screen and (max-width: 767px) {
	section.about .container {
		padding-inline: 40px;
		display: block;
	}
	section.about .container::before,
	section.about .container::after {
		display: none;
	}
	section.about .block {
		width: 100%;
	}
	section.about .block:not(:last-child) {
		margin-bottom: 90px;
	}
	section.about .block:not(:last-child)::after {
		content: "";
		display: block;
		width: 10%;
		aspect-ratio: 1 / 1;
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cdefs%3E%3Cstyle%3E.d%7Bfill:%23384d74;%7D%3C/style%3E%3C/defs%3E%3Cg id='c'%3E%3Cpolygon class='d' points='45 6.279 38.721 0 22.5 16.221 6.279 0 0 6.279 16.221 22.5 0 38.721 6.279 45 22.5 28.779 38.721 45 45 38.721 28.779 22.5 45 6.279'/%3E%3C/g%3E%3C/svg%3E");
	
		position: absolute;
		left: 50%;
		top: calc(100% + 45px);
		translate: -50% -50%;
	}
	
}

/* =======================================================
 * SERVICE
======================================================= */
section.service {}
section.service .container {
	counter-reset: number;
}
section.service .block {
	height: max(calc(785 / 1600 * 100vw), 785px);

	counter-increment: number;
	color: white;
	position: relative;
	z-index: 0;
}
section.service .block:where(#service01) {
	margin-top: -100px;
	height: max(calc(820 / 1600 * 100vw), 820px);
}
section.service .block:where(#service02) {
	margin-top: -130px;
}
section.service .block .wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}
section.service .block:where(#service01) .wrap {
	align-items: stretch;
}
section.service .block:where(#service02) .wrap {
	align-items: center;
}
section.service .text {
	margin-top: calc(34rem * 0.35);
	flex: 0 1 45%;
	padding-left: 20px;
}

section.service .text::before {
	content: "0" counter(number);
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: "wdth"100;
	font-size: 34rem;
	letter-spacing: -0.05em;
	color: rgb(255 255 255 / 0.35);
	line-height: 1;

	position: absolute;
	left: -0.3em;
	top: -0.5lh;
	z-index: -1;
}
section.service .text .headline {
	font-size: calc(60 / 1600 * 100vw);
	font-weight: bold;
	margin-bottom: 0.5lh;
}

section.service .images {
	flex: 0 0 50%;
	display: flex;
}
section.service .block:where(#service01) .images {
	position: relative;
}
section.service .block:where(#service01) .images img {
	width: 60%;
	aspect-ratio: 520 / 380;
	position: absolute;
}
section.service .block:where(#service01) img.image01 {
	left: 25%;
	top: -55%;
	z-index: 3;
}
section.service .block:where(#service01) img.image02 {
	left: 12%;
	top: 5%;
	z-index: 2;
}
section.service .block:where(#service01) img.image03 {
	left: 0;
	top: 70%;
	z-index: 1;
}
section.service .block:where(#service02) .images {
	padding-block: 115px;
	padding-inline: 50px;
	background: linear-gradient(to right, var(--gradient-sky));
	clip-path: polygon(0 13%, 100% 0, 100% 87%, 0 100%);
	flex-direction: column;
	align-items: center;
	gap: 9px;
}



section.service img.background {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	z-index: -2;
}
@media screen and (max-width: 767px) {
	section.service .container {
		margin-top: -60px;
	}
	section.service .block {
		height: auto;
		padding-block: 90px;
	}
	section.service .block:where(#service01) {
		margin-top: 0;
	}
	section.service .block:where(#service02) {
		margin-top: 0;
	}
	section.service .block .wrap {
		display: block;
		position: static;
		translate: none;
	}
	section.service .text {
		margin-top: 0;
		padding-left: 0;
	}
	section.service .text::before {
		font-size: 21rem;
		color: rgb(255 255 255 / 0.2);
		left: auto;
		right: -0.2em;
		top: -90px;
		translate: 0 0;
	}
	section.service .text .headline {
		font-size: 3.6rem;
		text-align: center;
	}
	section.service .images {
		margin-top: 45px;
	}
	section.service .block:where(#service01) .images {
		width: 100%;
		flex-direction: column;
	}
	section.service .block:where(#service01) .images img {
		width: 100%;
		position: static;
	}
	section.service .block:where(#service02) .images {
		padding-block: 90px;
		padding-inline: 1ic;
		clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%);
	}
	section.service .block:where(#service02) .image01 {
		width: 60%;
	}
	section.service img.background {
		top: 0;
		translate: 0 0;
		clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%);
	}
}

/* =======================================================
 * MEDIA
======================================================= */
section.media {}
section.media .container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
section.media .block {
	width: 47.5%;
	text-align: center;
}
section.media img.image {
	border: 5px solid #d9d9d9;
	margin-bottom: 30px;
}
section.media .label {
	width: 30%;
	margin-bottom: 21px;
}
section.media .block .headline {
	font-size: 4rem;
}
section.media .block .headline::after {
	content: "";
	display: block;
	width: 45px;
	height: 1px;
	background: currentColor;
	margin-block: 21px;
	margin-inline: auto;
}
section.media .block .headline + p {
	width: 70%;
	margin-inline: auto;
	margin-bottom: 30px;
}
section.media .btn {
	width: 70%;
}

@media screen and (max-width: 767px) {
	section.media .container {
		display: block;
	}
	section.media .block {
		width: 100%;
	}
	section.media .block:not(:last-child) {
		margin-bottom: 90px;
	}
	section.media .label {
		width: 50%;
	}
	section.media .block .headline {
		font-size: 2.7rem;
	}
	section.media .block .headline + p {
		width: 100%;
		text-align: left;
	}
}

/* =======================================================
 * PARTNER
======================================================= */
section.partner {
	padding-block: 168px;
	color: white;
	position: relative;
	z-index: 0;
}
section.partner .block {
	display: flex;
	align-items: center;
}
section.partner .block:not(:first-child) {
	margin-top: 60px;
}
section.partner img.image {
	border: 5px solid white;
}
section.partner .text {
	padding-inline: 90px;
}
section.partner .text .headline {
	font-size: 4rem;
	font-weight: bold;

	margin-bottom: 0.5lh;
}
section.partner img.background {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

@media screen and (max-width: 767px) {
	section.partner {
		padding-block: 90px;
	}
	section.partner .block {
		display: block;
	}
	section.partner .block:not(:first-child) {
		margin-top: 90px;
	}
	section.partner .text {
		padding-inline: 0;
	}
	section.partner .text .headline {
		margin-top: 0.5lh;
		font-size: 3rem;
		text-align: center;
	}
}