@charset "utf-8";
:root {
	--scrollbar: 0;
}

.js-fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease-out, transform .8s ease-out;
}
@media screen and (min-width: 900px) {
	.js-fadein--delay {
		transition: opacity .8s ease-out .3s, transform .8s ease-out .3s;
	}
}
.js-fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

.c-dlbtn {
	width: 100%;
	max-width: 587px;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
	background-color: #FF0000;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 15px;
	cursor: pointer;
	transition: background-color .3s ease-out;
}
.c-dlbtn:hover {
	background-color: #FF8181;
}
.c-dlbtn__text {
	color: #FFF;
	font-size: 32px;
	font-weight: bold;
}
.c-dlbtn__icon {
	width: 40px;
	display: block;
}

.c-gradlb {
	margin: 0 calc(50% - 50vw - var(--scrollbar) / 2);
	width: 100vw;
	background-color: #EEF7F9;
}
.c-gradlb__inner {
	padding: 16px 0 40px;
	background: linear-gradient(122deg, #00A0C8 0%, #AC96C6 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px 30px;
	clip-path: polygon(100% 0, 100% 85%, 52% 85%, 50% 100%, 48% 85%, 0 85%, 0 0);
}
.c-gradlb__inner-img {
	display: block;
}
.c-gradlb__inner-img--1 {
	width: 100px;
}
.c-gradlb__inner-img--2 {
	width: 92px;
}
.c-gradlb__inner-text {
	margin: 0;
	color: #FFF;
	font-size: 46px;
	font-weight: bold;
	text-align: center;
}
.c-gradlb__inner-text span {
	font-size: 36px;
}
.c-gradlb__inner-text br {
	display: none;
}


.p-top {
	margin: 30px 0 60px;
	box-sizing: border-box;
	position: relative;
}

.p-top__mv {
	width: 100%;
	display: block;
}

.p-top__lead {
	width: 100%;
	position: absolute;
	top: 7.5%;
	left: 50%;
	transform: translateX(-50%);
}
.p-top__lead-head {
	margin: 0;
	font-size: min(5vw, 72px);
	font-weight: 900;
	text-align: center;
}
.p-top__lead-head br {
	display: none;
}
.p-top__lead-head-sub {
	font-size: min(3vw, 42px);
}
.p-top__lead-name {
	margin: min(2.2vw, 35px) 0 4px;
	font-size: min(1.4vw, 20px);
	font-weight: bold;
	text-align: center;
}
.p-top__lead-title {
	margin: 0;
	color: #FFF;
	font-size: min(5vw, 72px);
	font-weight: 900;
	text-align: center;
}

.p-top__box {
	margin: 0;
	padding: min(1.25vw, 18px) min(0.8vw, 12px);
	background-color: #FFF;
	box-shadow: 3px 3px 30px #00A0C8;
	color: #00A0C8;
	font-size: min(1.74vw, 25px);
	font-weight: bold;
	writing-mode: vertical-rl;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.p-top__box--1 {
	right: 9.5%;
}
.p-top__box--2 {
	left: 9.5%;
}

.p-top__foot {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 4.5%;
	transform: translateX(-50%);
}
.p-top__foot-pop {
	width: fit-content;
	margin: 0 auto min(1.4vw, 20px);
	font-size: min(2.8vw, 40px);
	font-weight: 900;
	color: #FFF;
	text-align: center;
	position: relative;
}
.p-top__foot-pop::before,
.p-top__foot-pop::after {
	width: min(3.86vw, 56px);
	height: 4px;
	content: '';
	background-color: #FFF;
	border-radius: 10px;
	position: absolute;
	top: 50%;
}
.p-top__foot-pop::before {
	rotate: 45deg;
	left: -15%;
}
.p-top__foot-pop::after {
	rotate: -45deg;
	right: -15%;
}

.p-top__foot .c-dlbtn {
	max-width: min(40.7vw, 587px);
	padding: min(2.1vw, 30px);
	gap: 0 min(1vw, 15px);
}
.p-top__foot .c-dlbtn__text {
	font-size: min(2.2vw, 32px);
}
.p-top__foot .c-dlbtn__icon {
	width: min(2.8vw, 40px);
}


.p-trouble {
	width: 100%;
	margin: 30px 0 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px 7.6%;
	position: relative;
}
.p-trouble__box {
	width: clamp(345px, 100%, 410px);
	position: relative;
}
.p-trouble__box-img {
	width: 100%;
	display: block;
}
.p-trouble__box-text {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
	line-height: 2.2;
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
}
.p-trouble__arrow {
	width: 130px;
	display: block;
	position: absolute;
	bottom: -105px;
	left: 50%;
	z-index: 5;
	transform: translate(-50%, 50%);
}


.p-solution {
	padding: 90px 0;
	background-color: #FFEDE1;
	box-shadow: 0 0 0 100vmax #FFEDE1;
	clip-path: inset(0 -100vmax);
	position: relative;
}
.p-solution__head {
	margin: 0 0 20px;
	text-align: center;
}
.p-solution__head-logo {
	width: 660px;
	display: inline-block;
}
.p-solution__head span {
	margin-left: 5px;
	font-size: 40px;
	font-weight: 900;
}
.p-solution__foot {
	margin: 0 0 40px;
	font-size: 45px;
	font-weight: 900;
	text-align: center;
}
.p-solution__foot span {
	display: none;
}
.p-solution__container {
	max-width: 880px;
	margin: 0 auto 50px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	gap: 17px 10px;
}
.p-solution__container-box {
	width: calc(50% - 5px);
}
.p-solution__container-box-img {
	width: clamp(345px, 100%, 450px);
	margin: 0 auto;
	display: block;
}
.p-solution__container-box-head {
	margin: 0 0 30px;
	color: #DC6F06;
	font-size: 28px;
	font-weight: bold;
}
.p-solution__container-box-body {
	margin: 0;
	font-size: 18px;
}

.p-example {
	padding: 70px 0 130px;
	background-color: #EEF7F9;
	box-shadow: 0 0 0 100vmax #EEF7F9;
	clip-path: inset(0 -100vmax);
}
.p-example__container {
	max-width: 1020px;
	margin: 0 auto;
	padding: 60px;
	background-color: #FFF;
	border-radius: 45px;
	box-shadow: 13px 2px 31px #00A0C833;;
}
.p-example__container:first-child {
	margin: 0 auto 60px;
}
.p-example__container-head {
	margin: 0 0 30px;
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.p-example__container-head span {
	color: #00A0C8;
}
.p-example__container-text {
	margin: 0 0 30px;
	font-size: 18px;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.p-example__container-img {
	width: 100%;
	margin: 0 auto;
	display: block;
}
.p-example__container-img--1 {
	max-width: 470px;
}
.p-example__container-img--2 {
	max-width: 190px;
}
.p-example__container-img--3 {
	max-width: 884px;
}
.p-example__container-img--4 {
	max-width: 780px;
}
.p-example__container-img--5 {
	max-width: 850px;
}
.p-example__container-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px 3%;
	flex-wrap: wrap;
}
.p-example__container-flex-arrow {
	width: 90px;
	margin-bottom: 43px;
	display: block;
}
.p-example__container-flex-box:first-child {
	width: 52%;
}
.p-example__container-flex-box:last-child {
	width: 21%;
	min-width: 154px;
}
.p-example__container-flex-box-tag {
	width: 154px;
	margin: 15px auto 0;
	padding: 6px 12px;
	background-color: #DEEFF5;
	border-radius: 24px;
	font-size: 15px;
	text-align: center;
	box-sizing: border-box;
	display: block;
}
.p-example__container-subhead {
	width: fit-content;
	min-width: 340px;
	margin: 50px 0 10px;
	padding: 10px 26px;
	background-color: #DEEFF5;
	border-radius: 24px;
	box-sizing: border-box;
	color: #00A0C8;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.p-example__container-subhead br {
	display: none;
}

.p-ctafooter {
	padding: 80px 0 100px;
}
.p-ctafooter__pop {
	width: fit-content;
	margin: 0 auto 40px;
	font-size: 46px;
	font-weight: 900;
	text-align: center;
	position: relative;
}
.p-ctafooter__pop::before,
.p-ctafooter__pop::after {
	width: 70px;
	height: 5px;
	content: '';
	background-color: #00A0C8;
	border-radius: 10px;
	position: absolute;
	top: 50%;
}
.p-ctafooter__pop::before {
	rotate: 45deg;
	left: -20%;
}
.p-ctafooter__pop::after {
	rotate: -45deg;
	right: -20%;
}

.p-caution {
	margin: 40px 0 20px;
}
.p-caution__head {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: bold;
}
.p-caution__text {
	margin: 0;
	font-size: 14px;
}


@media screen and (max-width: 800px) {
	.p-solution__head-logo {
		max-width: 600px;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.c-gradlb__inner {
		padding: 16px 0 30px;
	}
	.c-gradlb__inner-text {
		font-size: 32px;
	}
	.c-gradlb__inner-text span {
		font-size: 23px;
	}
	.c-gradlb__inner-img--1,
	.c-gradlb__inner-img--2 {
		width: 50px;
	}


	.p-solution__head span {
		display: none;
	}
	.p-solution__foot {
		font-size: 30px;
	}
	.p-solution__foot span {
		display: inline-block;
	}
	.p-solution__container-box {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.c-dlbtn {
		padding: 16px;
		max-width: 400px;
	}
	.c-dlbtn__text {
		font-size: 24px;
	}
	.c-dlbtn__icon {
		width: 30px;
	}

	.c-gradlb__inner {
		flex-direction: column;
	}
	.c-gradlb__inner--1 {
		padding: 16px 0 34px;
		clip-path: polygon(100% 0, 100% 88%, 54% 88%, 50% 100%, 46% 88%, 0 88%, 0 0);
	}
	.c-gradlb__inner--2 {
		padding: 16px 0 38px;
		clip-path: polygon(100% 0, 100% 90%, 54% 90%, 50% 100%, 46% 90%, 0 90%, 0 0);
	}
	.c-gradlb__inner-text br {
		display: block;
	}


	.p-top__lead {
		top: clamp(1.25rem, -3.9583rem + 22.2222vw, 4.375rem);
	}
	.p-top__lead-head {
		font-size: 50px;
		line-height: 1.2;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.p-top__lead-head br {
		display: block;
	}
	.p-top__lead-head-sub {
		font-size: 20px;
	}
	.p-top__lead-name {
		margin: 14px 0 4px;
		font-size: 14px;
	}
	.p-top__lead-title {
		font-size: 34px;
	}
	.p-top__box {
		width: 310px;
		padding: 7px 12px;
		font-size: 22px;
		text-align: center;
		box-sizing: border-box;
		writing-mode: horizontal-tb;
		transform: translateX(-50%);
	}
	.p-top__box--1 {
		top: 63%;
		left: 50%;
		right: 0;
	}
	.p-top__box--2 {
		top: 71%;
		left: 50%;
	}
	.p-top__foot {
		bottom: clamp(1.875rem, -4.8958rem + 28.8889vw, 5.9375rem);
	}
	.p-top__foot-pop {
		margin: 0 auto 10px;
		font-size: 24px;
	}
	.p-top__foot-pop::before,
	.p-top__foot-pop::after {
		width: 40px;
	}
	.p-top__foot-pop::before {
		left: -18%;
	}
	.p-top__foot-pop::after {
		right: -18%;
	}
	.p-top__foot .c-dlbtn {
		max-width: none;
		width: 310px;
		box-sizing: border-box;
		padding: 16px;
		gap: 0 15px;
	}
	.p-top__foot .c-dlbtn__text {
		font-size: 24px;
	}
	.p-top__foot .c-dlbtn__icon {
		width: 30px;
	}


	.p-solution__head-logo {
		max-width: 400px;
	}

	.p-example__container {
		padding: 60px 23px;
	}
	.p-example__container-head {
		font-size: 34px;
	}
	.p-example__container-flex-box:first-child,
	.p-example__container-flex-box:last-child {
		width: 100%;
	}
	.p-example__container-flex-arrow {
		margin-bottom: 0;
		width: 114px;
	}
	.p-example__container-text br {
		display: none;
	}
	.p-example__container-subhead {
		min-width: 300px;
		margin: 50px auto 10px;
		border-radius: 36px;
	}
	.p-example__container-subhead br {
		display: block;
	}

	.p-ctafooter__pop {
		font-size: 26px;
	}
	.p-ctafooter__pop::before,
	.p-ctafooter__pop::after {
		width: 50px;
	}
}

@media screen and (max-width: 500px) {
	.p-solution__foot {
		text-align: left;
	}
}