@charset "utf-8";
/* CSS Document */
/* zen-kaku-gothic-new-500 - japanese_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Zen Kaku Gothic New';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/zen-kaku-gothic-new-v17-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* zen-kaku-gothic-new-700 - japanese_latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Zen Kaku Gothic New';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/zen-kaku-gothic-new-v17-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

a {
	text-decoration: none;
}


.l-wrapper {
	overflow: clip;
	max-width: 1920px;
	margin: 0 auto;
	padding-top: 4em;
	position: relative;
	@media(max-width: 828px) {
		padding-top: 2em
	}
	&::before {
		content: '';
		width: 40vw;
		aspect-ratio: 1/1;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, #fff 100%);
		z-index: 0
	}
}
.l-header {
	position: absolute;
	z-index: 15;
	padding: 0 calc(6.25% / 2);
	width: 100%;
	left: -4px;
	margin-top: -1px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	.c-logo {
		display: inline-flex;
		text-align: center;
		font-size: 1.4em;
		font-weight: 500;
		background: #fff;
		border-radius: 0 0 1.429em 0;
		padding: 0 2.286em 1.6em;
		position: relative;
		img {
			margin-top: 1em;
			display: block;
			width: 11.24em;
			height: auto
		}
		@media(max-width:828px) {
			font-size: 2em;
			img {
				width: 12em;
				margin-top: .5em
			}
			padding-left:1em;
			padding-bottom:1.2em
		}
		a {
			color: #333
		}
	}
	.corner01 {
		position: absolute;
		right: -1.429em;
		top: 0;
		z-index: 2;
		width: 1.429em;
		aspect-ratio: 1/1
	}
	.corner02 {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 2;
		width: 1.429em;
		aspect-ratio: 1/1
	}
}
.c-menu-btn {
	@media(min-width: 829px) {
		display: none
	}
	position:fixed;
	z-index:20;
	right:1em;
	top:1.2em;
	padding:.8em .8em 0;
	z-index:2;
	background:none;
	border:none;
	cursor:pointer;
	span {
		display: flex;
		flex-direction: column;
		&::before {
			content: '';
			display: block;
			height: 1.6em;
			width: 100%;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2014%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_24%22%20data-name%3D%22%E3%83%91%E3%82%B9%2024%22%20d%3D%22M3%2C6H21M3%2C12H21M3%2C18H21%22%20transform%3D%22translate(-2%20-5)%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
			background-size: contain;
			margin-bottom: .4em
		}
		&::after {
			content: 'MENU';
			font-size: 1em;
			font-family: "Barlow", sans-serif;
			font-weight: 400
		}
	}
	&.is-open {
		span {
			&::before {
				content: '';
				background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Cross%22%3E%3Cpath%20d%3D%22M20%2020L4%204m16%200L4%2020%22%2F%3E%3C%2Fsvg%3E)
			}
			&::after {
				content: 'CLOSE'
			}
		}
	}
}
.c-menu-nav {
	position: fixed;
	background: #fff;
	z-index: 1;
	border-radius: 4.8em 0 0 4.8em;
	top: 0;
	right: 0;
	width: calc((736/828) * 100vw);
	box-sizing: border-box;
	scale: 0 1;
	padding: 15em 3em 8em;
	transition: .3s box-shadow, .3s scale;
	transform-origin: right top;
	.c-menu-list {
		font-size: 3.2em;
		font-weight: 500;
		margin-bottom: 1.6em;
		li {
			a {
				color: currentColor;
				display: flex;
				padding: 1em .8em;
				align-items: center;
				gap: .5em;
				justify-content: space-between;
				background: var(--color-light-gray);
				border-radius: .625em;
				&::after {
					content: '';
					display: block;
					padding-left: 1em;
					height: 1em;
					background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronDown%22%3E%3Cpath%20d%3D%22M4%209l8%208%208-8%22%2F%3E%3C%2Fsvg%3E) 50% 50% no-repeat;
					background-size: contain
				}
			}
			* + & {
				margin-top: .4em
			}
		}
	}
	p {
		font-size: 3em;
		font-weight: 500;
		text-align: center;
		* + & {
			margin-top: .8em
		}
		.c-btn-blk {
			font-size: 1.2em
		}
	}
	.is-open + & {
		box-shadow: 0 1em 8em rgba(0, 0, 0, .2);
		scale: 1 1
	}
}
.mv_img_wrap {
	margin: 0 auto;
	max-width: 1800px;
	width: 93.75%;
	height: 850px;
	position: relative;
	@media(max-width: 828px) {
		width: calc(100% - 4em);
		height: auto;
		aspect-ratio: 788/1000
	}
	.c-blk-btn {
		margin-top: 6em;
		@media(max-width:828px) {
			width: 100%;
		}
	}
	.c-text {
		position: absolute;
		z-index: 10;
		left: 50%;
		top: 46%;
		translate: -50% -50%;
		text-align: center;
		span {
			justify-content: center;
			display: flex;
			align-items: end;
			gap: 1em
		}
		h1 {
			*+span {
				margin-top: 3.2em;
				@media(max-width:828px) {
					margin-top: 1.6em;
				}
			}
			.ttl01 { height: 7.6em; width: auto;}
			.ttl02 { height: 5.4em; width: auto;}
			.ttl03 { height: 4.4em; width: auto;}
		}
		.hl-copy-sub {
			color: #000;
			font-size: 2em;
			font-weight: 500;
			margin-bottom: 2em;
			span {
				display: inline-block;
				padding: .4em .5em .6em 1em;
				border: 1px solid #555;
			}
		}
		@media(max-width:1140px) {
			.ttl01 {
				width: calc((594 / 1140) * 100vw);
				height: auto
			}
			.ttl02 {
				width: calc((548 / 1140) * 100vw);
				height: auto
			}
			.ttl03 {
				width: calc((310 / 1140) * 100vw);
				height: auto
			}
		}
		@media(max-width:828px) {
			width: 90%;
			top: 55%;
			h1 {
				display: flex;
				justify-content: center;
				flex-direction: column;
				gap: 1.6em;
				font-size: 1.6em;
				span {
					flex-direction: column;
					align-items: center;
					gap:2em
				}
				.ttl01 {
					width: 100%;
					height: auto
				}
				.ttl02 {
					width: 64%;
					height: auto
				}
				.ttl03 {
					width: 100%;
					height: auto
				}
			}
			.hl-copy-sub {
				font-size: 3em;
				margin-bottom: 1em;
			}
		}
	}
	.c-bg {
		position: absolute;
		z-index: 0;
		border-radius: 2em;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		width: 100%;
		height: 100%;
		overflow: hidden;
		img {
			width: 104%;
			height: 104%;
			object-fit: cover;
			animation: blur 24s ease infinite
		}
		&::before {
			content: '';
			display: block;
			background: linear-gradient(135deg, #b9eeea, #e5fdd4, #feee90);
			background-size: 400% 400%;
			animation: gradient 15s ease infinite;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			opacity: .4
		}
		@media(max-width:828px) {
			position: relative;
			left: auto;
			top: auto;
			height: auto;
			translate: unset
		}
	}
	.c-img-mv {
		position: absolute;
		z-index: 5;
		padding: 2em;
		aspect-ratio: 71/46;
		&.-img01 {
			bottom: 18em;
			right: 10em;
			width: min(calc((260 / 1240) * 100vw), 260px)
		}
		&.-img02 {
			top: 12em;
			left: -13em;
			width: min(calc((400 / 1240) * 100vw), 400px)
		}
		&.-img03 {
			bottom: 20em;
			left: 8em;
			width: min(calc((220 / 1240) * 100vw), 220px)
		}
		&.-img04 {
			top: 6em;
			right: -16em;
			width: min(calc((420 / 1240) * 100vw), 420px)
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover
		}
		@media(max-width:828px) {
			&.-img01 {
				display: none;
				bottom: -8vw;
				right: 4vw;
				width: calc((300 / 828) * 100vw)
			}
			&.-img02 {
				display: none;
			}
			&.-img03 {
				display: none;
				bottom: 3vw;
				left: -8vw;
				width: calc((400 / 828) * 100vw)
			}
			&.-img04 {
				display: none
			}
		}
		&::before, &::after {
			content: '';
			width: 4.5%;
			aspect-ratio: 1/1;
			border-top: 1px solid #ccc;
			border-left: 1px solid #ccc;
			position: absolute;
			left: 0;
			top: 0
		}
		&::after {
			rotate: -90deg;
			top: auto;
			bottom: 0
		}
		> div {
			border-radius: 1em;
			border: 1px solid #fff;
			filter: drop-shadow(0 0 10px rgba(243, 243, 211, .7));
			&::before, &::after {
				content: '';
				width: 4.5%;
				aspect-ratio: 1/1;
				border-top: 1px solid #ccc;
				border-right: 1px solid #ccc;
				position: absolute;
				right: -2em;
				top: -2em
			}
			&::after {
				rotate: 90deg;
				top: auto;
				bottom: -2em
			}
		}
		img {
			border-radius: 1em
		}
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
@keyframes blur {
	0% {
		filter: blur(0)
	}
	50% {
		filter: blur(2px)
	}
	100% {
		filter: blur(0)
	}
}
.c-blk-contact {
	padding: 2.4em 0 0 2.4em;
	border-radius: 2em 0 0 0;
	background: #fff;
	position: absolute;
	right: -1px;
	bottom: 0;
	> .inner {
		box-sizing: border-box;
		padding: 1em;
		border-radius: 1.6em;
		background: #f0f1f6;
		.c-img {
			border-radius: 1.2em;
			overflow: hidden;
			aspect-ratio: 25 / 12;
			@media(max-width: 828px) {
				display: none
			}
			img {
				width: 100%;
				height: auto
			}
		}
		p {
			font-size: 1.6em;
			margin: 0 auto;
			line-height: 1.6;
			text-align: center;
			font-weight: 500;
			* + & {
				margin-top: 1em
			}
		}
	}
	.corner03 {
		position: absolute;
		right: 0;
		top: -2em;
		z-index: 2;
		width: 2em;
		aspect-ratio: 1/1;
		rotate: 180deg
	}
	.corner04 {
		position: absolute;
		left: -2em;
		bottom: 0;
		z-index: 2;
		width: 2em;
		aspect-ratio: 1/1;
		rotate: 180deg
	}
	@media(max-width:828px) {
		position: static;
		padding: 19.2em 0 0;
		.corner03, .corner04 {
			display: none
		}
		> .inner {
			padding: 1px 3em 3em;
			p {
				font-size: 3.2em;
				br {
					display: none
				}
			}
			.c-btn-blk {
				font-size: 1.2em
			}
		}
	}
}



.c-btn-blk {
	background: var(--color-yellow);
	border-radius: .625em;
	padding: .5em;
	display: flex;
	justify-content:space-between;
	align-items: center;
	color: #000;
	&::before {
		content: '';
		display: block;
		width:2.4em;
		aspect-ratio: 1/1;
	}
	&::after {
		content: '';
		display: block;
		width: 2.4em;
		aspect-ratio: 1/1;
		border-radius: .5em;
		background: #ffe146 url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216.243%22%20height%3D%2227%22%20viewBox%3D%220%200%2016.243%2027%22%3E%20%3Cg%20id%3D%22_137_arr_hoso%22%20data-name%3D%22137_arr_hoso%22%20transform%3D%22translate(32.121%20-15.5)%20rotate(90)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_20%22%20data-name%3D%22%E3%83%91%E3%82%B9%2020%22%20d%3D%22M35%2C18l6%2C6-6%2C6%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_1%22%20data-name%3D%22%E7%B7%9A%201%22%20x2%3D%2224%22%20transform%3D%22translate(17%2024)%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
		background-size: .5em auto;
	}
}
.l-section-gray {
	background: rgba(226,230,238,.6);
	padding: 13.2em 0;
	margin-bottom: 13.2em;
	.inner {
		max-width: 1200px;
		margin: 0 auto;
	}	
}
.l-section-common {
	.inner {
		width: 92%;
		max-width: 1100px;
		margin: 0 auto;
	}
	&.sec-about {
		margin-top: 16em;
		padding-bottom: 8em;
		.c-img {
			max-width: 1500px;
			margin: 0 auto;
			border-radius: 2em;
			height: 490px;
			overflow: hidden;
			position: relative;
			z-index: 1;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			@media(max-width: 828px) {
				height: auto;
			}
		}
		.inner {
			border-radius: 2em;
			background: rgba(255,255,255,.64);
			backdrop-filter: blur(8px);
			padding: 6.4em 4.8em;
			margin-top: -24em;
			position: relative;
			z-index: 2;
			@media(max-width: 828px) {
				margin: -8.8em 2em 0;
				padding: 4em 3em 4em;
				box-sizing: border-box;
				width: auto;
			}
			@media(max-width: 828px) {
				p img {
					height: 5em;
					width: auto;
				}
			}	
		}
	}
}

.c-overvew-item {
	*+& {
		margin-top: 8em;
	}
	.inner {
		background: #fff;
		border-radius: 1.6em 0 1.6em 1.6em;
		position: relative;
		padding: 0 5.6em 5.6em;	
	}
	figure {
		display: block;
		text-align: center;
		margin: 0 auto;
		@media(min-width:829px) {
			width: 646px;
			padding: 1em 0;
		}
		img {
			max-width: 100%;
			height: auto;
		}
	}
	@media (max-width: 828px) {
		*+& {
			margin-top: 4em;
		}	
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		.inner {
			padding: 4em 2em;	
		}	
	}
}
.hl-overvew-item {
	display: grid;
	grid-template-columns: auto 1fr;
	font-size: 2.4em;
	font-weight: bold;
	letter-spacing: .04em;
	> span {
		background: #fff;
		span {
			display: flex;
			padding: .8em 2em 1.2em 1.2em;
			background: var(--color-light-gray);
			border-radius: 0 0 0.67em 0;	
			flex: 1;
			&::before {
				content: '・';
				color: var(--color-yellow);
			}
		}
	}
	&::after {
		content: '';
		display: block;
		background: #fff;
		border-radius: 0.67em 0.67em 0 0;
		height: 100%;
	}
	@media(max-width:828px) {
		font-size: 4em;
		> span {
			span {
				padding: .8em 1.2em 1.2em .6em;				
			}
		}
	}
}


.hl-section-common {
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1.6em;
	letter-spacing: .04em;
	position: relative;
	@media(max-width: 828px) {
		font-size: 6.4em;
		margin-bottom: 1em;
	}
	&::after {
		content: '';
		display: block;
		width: 1.25em;
		height: 2px;
		background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
		margin: .6em auto 0;		
	}
	&.-works {
		&::before {
			content: 'WORKS';
			font-family: "Barlow", sans-serif;
			font-weight: 100;
			color: #f7f8fc;
			font-size: 2.85em;
			position: absolute;
			z-index: 0;
			bottom: .2em;
			left: 50%;
			translate: -50% 0;	
		}
	}
	&.-faq {
		&::before {
			content: 'FAQ';
			font-family: "Barlow", sans-serif;
			font-weight: 100;
			color: #f7f8fc;
			font-size: 2.85em;
			position: absolute;
			z-index: 0;
			bottom: .2em;
			left: 50%;
			translate: -50% 0;	
		}
	}
	&.-overview {
		&::before {
			content: 'OVERVIEW';
			font-family: "Barlow", sans-serif;
			font-weight: 100;
			color: #fff;
			font-size: 2.85em;
			position: absolute;
			z-index: 01;
			bottom: .2em;
			left: 50%;
			translate: -50% 0;	
		}
	}
	span {
		position: relative;
		z-index: 2;
	}
}
.c-faq__item {
	background: var(--color-light-gray);
	border: 1px solid #c9cfe8;
	border-radius: 1.6em;
	padding: 2em 4.8em;
	dt {
		font-size: 1.8em;
		padding-bottom: 1em;
		border-bottom: 1px solid #c9cfe8;
		margin-bottom: 1em;
		font-weight: 700;
		display: flex;
		gap: .4em;
		&::before {
			content: '';
			display: block;
			padding-left: 1.2em;
			aspect-ratio: 1/1;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.522%22%20height%3D%2220.627%22%20viewBox%3D%220%200%2018.522%2020.627%22%3E%20%3Cg%20id%3D%22_1117_sy_m%22%20data-name%3D%221117_sy_m%22%20transform%3D%22translate(-14.695%20-13.613)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_21%22%20data-name%3D%22%E3%83%91%E3%82%B9%2021%22%20d%3D%22M32.46%2C23.18a8.506%2C8.506%2C0%2C1%2C0-17-.62%2C9.34%2C9.34%2C0%2C0%2C0%2C2%2C6.29%2C17.5%2C17.5%2C0%2C0%2C0%2C6.45%2C4.64l-.31-2.45c4.46.16%2C8.69-3.51%2C8.86-7.87Z%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_12%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2012%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_22%22%20data-name%3D%22%E3%83%91%E3%82%B9%2022%22%20d%3D%22M22.26%2C20.64a1.74%2C1.74%2C0%2C0%2C1%2C3.48.06%2C1.711%2C1.711%2C0%2C0%2C1-.48%2C1.17l.07-.07L24%2C23.2V24%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_1%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%201%22%20cx%3D%220.92%22%20cy%3D%220.92%22%20r%3D%220.92%22%20transform%3D%22translate(23.08%2025.86)%22%20fill%3D%22%23333%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
			background-size: contain;
		}
	}
	dd {
		font-size: 1.5em;
		p {
			line-height: 1.76;
		}
	}
	*+& {
		margin-top: 2em;
	}
	@media(max-width: 828px) {
		padding: 2.4em 3.2em;
		dt {
			font-size: 3.6em;
			line-height: 1.4;
		}
		dd {
			font-size: 3.2em;
			p {
				line-height: 1.6;
			}
		}
		*+& {
			margin-top: 2em;
		}
	}	
}
.c-list {
	margin: .64em 0;
	li {
		display: flex;
		span {
			flex: 1;
		}
		*+& {
			margin-top: .5em;
		}
	}
	&.-dot {
		li {
			&::before {
				content: '・';
			}
		}
	}
}

.c-grid-prices {
	display: grid;
	max-width: 82em;
	grid-template-columns: repeat(2, 1fr);
	gap: 4em;
	margin: 0 auto;
	@media(max-width:828px) {
		grid-template-columns: auto;
	}
}
.c-grid-prices__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
	background: #fff url(../img/bg_price_b.webp) 0 100% no-repeat;
	box-shadow: 2px 2px 2em #e1e4f1;
	border-radius: 1.6em;
	div {
		padding: 5.6em 6.4em;
		@media(max-width:828px) {
			padding: 4em 8em;
		}
	}
	.c-text-price {
		font-size: 4em;
		font-weight: 500;
		text-align: center;
		b {
			font-family: "Barlow", sans-serif;
			font-weight: 500;
			font-size: 2em;
		}
		span {
			position: relative;
			z-index: 1;
			display: inline-flex;
			align-items: baseline;
			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 92%;
				background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
				z-index: -1;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		@media(max-width:828px) {
			font-size: 7.6em;
		}				
	}
	.c-list {
		font-size: 1.8em;
		font-weight: 500;
		li {
			&::before {
				color: var(--color-yellow);
			}
			*+& {
				margin-top: .7em;
			}
		}
		*+& {
			margin-top: 1.6em;
		}
		@media(max-width:828px) {
			font-size: 3.6em;
		}		
	}
	&.-low {
		background-image: url(../img/bg_price_a.webp);
	}
}
.hl-grid-price {
	font-size: 2em;
	line-height: 1.56;
	font-weight: 500;
	background: linear-gradient(#ffeb74 0%, #fff7a3 100%);
	text-align: center;
	padding: .8em;
	border-radius: .8em .8em 0 0;
	.-low & {
		background: linear-gradient(#aaedf2 0%, #d6f8fc 100%);
	}
	@media(max-width:828px) {
		font-size: 4em;
		border-radius: .4em .4em 0 0;
	}
}
.c-blk-price-notice {
	max-width: 82em;
	margin: 0 auto;
	text-align: center;
	p:not(.c-text-priceoff) {
		font-size: 1.5em;
		line-height: 1.6;
		margin: 3em auto;
		@media(max-width:828px) {
			font-size: 2.6em;
			text-align: left;
			padding: 0 1em;
		}
	}
	.c-text-priceoff {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.2em;
		.-band {
			display: inline-flex;
			background: var(--color-yellow);
			padding: .5em 1em .6em;
			font-size: 1.6em;
			font-weight: 500;
			border-radius: 2px;
			letter-spacing: .04em;
			@media(max-width:828px) {
				font-size: 3em;
			}	
		}
		.-priceoff {
			font-family: "Josefin Sans", sans-serif;
			font-optical-sizing: auto;
			font-weight: 600;		
			font-size: 6em;
			position: relative;
			&::after {
				content: '総額';
				padding: 5px 2em 0;
				border: 1px solid #ccc;
				border-radius: 100vmax;
				position: absolute;
				top: .64em;
				right: 0;
				font-size: 18px;
				line-height: 1;
				letter-spacing: .2em;
				@media(max-width:828px) {
					font-size: .32em;
				}
			}
			b {
				font-size: 2em;
			}
			@media(max-width:828px) {
				font-size: 10em;
			}
		}
	}
}

.l-grid-content {
	display: grid;
	grid-template-columns: auto 1fr;
	.l-content-nav {
		order: -1;
		width: 360px;
	}
	@media(max-width: 1400px) {
		grid-template-columns: auto;
		.l-content-nav {
			display: none;
		}	
	}
}

.l-content-nav {
	position: sticky;
	top: 0;
	height: 100svh;
	z-index: 10;
	.c-content-nav {
		position: absolute;
		bottom: 16em;
		left: 4em;
		white-space: nowrap;
		p {
			margin-top: 2em;
		}
	}
}
.c-btn-yellow {
	font-size: 1.5em;
	font-weight: 500;
	background: var(--color-yellow);
	display: flex;
	justify-content:center;
	align-items: center;
	padding: .5em 2em .64em;
	border-radius: 100vmax;
	color: #000;
	.is-dark & {
		background: #fff;
		box-shadow: 0 0 8px rgba(0,0,0,.1);
	}
	&.is-active {
		background: #000;
		color: #fff;
	}
}
.c-content-nav-list {
	font-size: 1.5em;
	counter-reset: number 0; 
	li {
		counter-increment: number 1;
		a {
			color: #787878;
			display: flex;
			align-items: center;
			gap: 1em;
			color: currentColor;
			&::before {
				font-weight: 500;
				content: '0'counter(number);
				display: flex;
				width: 1.87em;
				aspect-ratio: 1/1;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background: #fff;
				box-shadow: 0 0 10px #ccd0e3;
			}	
			span {
				flex: 1;
			}
			&.is-active {
				color: #000;
				&::before {
					background: var(--color-yellow);
					box-shadow: none;
				}
			}
		}		
		*+& {
			margin-top: 1em;
		}
	}
	.is-dark &{
		li {
			a {
				&.is-active {
					color: #000;
					&::before {
						background: #000;
						color: #fff;
					}
				}
			}
		}
	}
}

.icon-feature {
	font-size: 14.5px;
	line-height: 1.2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 84px;
	aspect-ratio: 1/1;
	background: var(--color-yellow);
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
}

.l-section-article {
	position: relative;
	z-index: 2;
	> .inner {
		max-width: 110em;
		margin: 0 auto;
		position: relative;
		z-index: 2;
		width: 90%;
	}

	hgroup {
		position: relative;
		.hl-section-article {
			position: relative;
			z-index: 2;
		}
	}
	&.sec-question {
		padding: 16em 0 24em;
		@media(max-width: 828px) {
			padding: 8em 0 24em;
		}
		z-index: 2;
		hgroup {
			&::before {
				content: 'QUESTION';
				font-family: "Barlow", sans-serif;
				font-weight: 100;
				color: #f7f8fc;
				font-size: 11.4em;
				position: absolute;
				z-index: 0;
				top: -.25em;
				left: -.5em;
				@media(max-width: 828px) {
					font-size: 22.4em;
					left: 50%;
					translate: -50%;
				}
			}
		}
		@media(max-width: 828px) {
			p {
				br {
					display: none;
				}
			}
		}		
	}
	&.sec-answer {
		z-index: 1;
		margin: 4em auto 6em;
		padding: 4em 0;
		&::after {
			content: '';
			display: block;
			background: url(../img/bg_answer_1920.webp) 50% 50% no-repeat;
			background-attachment: fixed;
			background-size: cover;
			width: 100vw;
			height: 100svh;
			position: fixed;
			right: 0;
			top: 0;
			z-index: -1;
			opacity: 0;
			transition: .6s opacity;
		}
		&.is-active {
			&::after {
				opacity: .95;
			}			
		}
		hgroup {
			&::before {
				content: 'ANSWER';
				font-family: "Barlow", sans-serif;
				font-weight: 100;
				color: #fff;
				font-size: 11.4em;
				position: absolute;
				z-index: 0;
				top: -.25em;
				left: 50%;
				translate: -50% 0;
				@media(max-width: 828px) {
					font-size: 22.4em;
					left: 50%;
					translate: -50%;
				}
			}
		}
		@media(max-width: 828px) {
			.c-text-common {
				br {
					display: none;
				}
			}
		}		
	}
	&.sec-research {
		padding: 16em 0;
		@media(max-width: 828px) {
			padding: 0 0 8em;
		}		
		hgroup {
			&::before {
				content: 'RESEARCH';
				font-family: "Barlow", sans-serif;
				font-weight: 100;
				color: #f7f8fc;
				font-size: 11.4em;
				position: absolute;
				z-index: 0;
				top: -.25em;
				left: -.5em;
				@media(max-width: 828px) {
					font-size: 20em;
					left: 50%;
					translate: -50%;
				}	
			}
		}
		.hl-section-article {
			display: inline-block;
		}
		.icon-feature {
			position: absolute;
			left: calc(100% + 2em);
			bottom: -.8em;
			@media (max-width:828px) {
				display: none;			
			}
		}
	}
	&.sec-real {
		margin: 4em auto;
		padding: 16em 0;
		z-index: 1;
		&::after {
			content: '';
			display: block;
			background: var(--color-yellow);
			width: 110vw;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 0;
			opacity: 0;
			scale : 0 1;
			transition-delay: .4s;
			transition: 1s opacity, 1s scale;
			transform-origin: right center;
		}
		&.is-active {
			&::after {
				opacity: 1;
				scale: 1 1;
			}	
		}
		.inner {
			padding: 6em 0;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				z-index: -1;
				background: #fff;
				width: calc(100% + 20vw);
				height: 100%;
				top: 0;
				left: -4vw;
				border-radius: 1.6em;
				@media(max-width: 828px) {
					display: none;
				}
			}
			@media(max-width: 828px) {
				width: 96%;
				padding: 12em 3.2em;
				background: #fff;
				box-sizing: border-box;;
				border-radius: 1.5em;
			}
		}
		.c-blk-btn {
			position: relative;
			z-index: 2;
		}
		hgroup {
			&::before {
				content: 'REAL';
				font-family: "Barlow", sans-serif;
				font-weight: 100;
				color: #f7f8fc;
				font-size: 11.4em;
				position: absolute;
				z-index: 0;
				top: -.25em;
				left: -.5em;
				@media(max-width: 828px) {
					font-size: 22.4em;
					left: 50%;
					translate: -50%;
				}	
			}
		}
		figure {
			margin-top: 4em;
			padding-left: 6em;
			img {
				max-width: 100%;
				height: auto;
			}
			@media(max-width: 828px) {
				padding-left: 0;
			}
		}
	}
	&.sec-works {
		padding: 16em 0;
		@media(max-width: 828px) {
			> .inner {
				width: 94%;
			}
		}
	}
	&.sec-list-works {
		padding: 0 0 16em;
		padding-left: 360px;
		@media(max-width: 1400px) {
			padding-left: 0;
		}
		@media(max-width: 1000px) {
			> .inner {
				padding-top: 0;
				width: 100%;
			}
		}		
	}
}

.hl-section-article {
	margin-bottom: 4em;
	.c-chapter {
		color: var(--color-yellow);
		display: flex;
		align-items: baseline;
		gap: .2em;
		font-family: "Barlow", sans-serif;
		font-weight: 300;
		font-size: 1.6em;
		margin-bottom: 1em;
		b {
			font-size: 2em;
			font-weight: normal;
		}
		&::before {
			content: '●';
			scale: .35;
		}
		@media(max-width: 828px) {
			font-size: 3.2em;
			margin-bottom: .5em;
			justify-content: center;
		}
	}
	.c-main {
		font-size: 4em;
		letter-spacing: .04em;
		font-weight: 700;
		line-height: 1.6;
		.-band {
			display: inline-block;
			position: relative;
			z-index: 1;
			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 64%;
				background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
				z-index: -1;
				position: absolute;
				left: 0;
				bottom: 15%;
			}
			&.scr-trigger {
				&::after {
					scale: 0 1;
					transform-origin: left center;
					transition: .4s scale;
				}
				&.is-show {
					&::after {
						scale: 1 1;
					}
				}
			}
			@media(max-width: 828px) {
				display: inline;
				background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
			}	
		}
		&.-push {
			font-size: 2.7em;
			b {
				font-size: 2.2em;
			}
			@media(max-width:828px) {
				font-size: 4.8em;
				line-height: 1.4;
				margin-bottom: 1em;
				display: block;
				.is-sp {
					display: inline;
				}
			}
		}
		.-quotation {
			display: inline-flex;
			&::before {
				content: '❝';
				color: #bad3d9;
				font-weight: 500;
				scale: .9;
			}
			&::after {
				content: '❞';
				color: #bad3d9;
				font-weight: 500;
				scale: .9;
			}			
		}
		@media(max-width: 828px) {
			font-size: 6.3em;
			font-feature-settings: "palt";
			br {
				display: none;
			}
		}
	}
	&.-center {
		text-align: center;
		.c-chapter {
			justify-content: center;
		}
		.c-main {
			letter-spacing: .02em;
		}
		@media(max-width: 828px) {
			text-align: left;
		}
	}
}

.c-text-common {
	font-size: 1.8em;
	font-weight: 500;
	line-height: 1.9;
	@media(min-width: 829px) {
		&.-center {
			text-align: center;
		}	
	}
	*+& {
		margin-top: 1em;
	}
	.sec-about & {
		font-size: 1.6em;
		@media(max-width: 828px) {
			font-size: 3.2em;
		}	
	}
	.c-closing & {
		font-size: 2em;
		font-weight: 500;
		@media(max-width: 828px) {
			font-size: 3.2em;
			br {
				display: inherit!important;
			}
			text-align: center;
		}
	}
	@media(max-width: 828px) {
		font-size: 3.2em;
		line-height: 1.68;
		br:not(.is-sp) {
			display: none;
		}
	}
}
.-marker {
	background: linear-gradient(transparent 70%, #fee875 70%);
}
b {
	font-weight: 700;
}
.c-grid {
	display: grid;
	&.-features {
		grid-template-columns: auto auto;
		gap: 2em;
		align-items: center;
		margin-top: 6.4em;
		@media(max-width: 828px) {
			grid-template-columns: auto;
			gap: 4em;
		}
	}
	&.-question {
		grid-template-columns: auto auto;
		align-items:end;
		.hl-section-article {
			@media(min-width: 829px) {
				white-space: nowrap;
			}
		}
		.c-row {
			position: relative;
			&.-text {
				padding-bottom: 8em;
			}
			&.-img {
				text-align: center;
				img {
					position: relative;
					right: -25px;
					@media(max-width: 1400px) {
						right: 0;
						width: 100%;
						height: auto;
					}
					@media(max-width: 828px) {
						left: -1vw;
					}
				}
			}
		}
		@media(max-width: 828px) {
			grid-template-columns: auto;
		}
	}
	&.-works {
		grid-template-columns: 36em auto;
		gap: 4em;
		.c-row {
			&.-img {
				border-radius: .8em;
				aspect-ratio: 350 / 220;
				overflow: hidden;
				img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				@media(max-width: 828px) {
					display: none;
				}
			}
		}
		@media(max-width: 828px) {
			grid-template-columns: auto;
			gap: 2.4em;
			.c-row.-text { 
				padding: 3.6em 3em 0;
			}
		}
	}
}

.c-flow-make-grid {
	margin-top: 5em;
	@media(max-width: 828px) {
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap: 2em;
	}
	&.scr-trigger {
		.c-flow-make {
			transition: .3s opacity, .3s translate;
		}
		.c-flow-make:nth-of-type(1) { opacity: 0; translate: 0 -50px;}
		.c-flow-make:nth-of-type(2) { opacity: 0; translate: 0 -50px; transition-delay: .3s;}
		@media(max-width: 828px) {
			.c-flow-make:nth-of-type(1) { translate: -50px 0;}
			.c-flow-make:nth-of-type(2) { translate: -50px 0;}	
		}
		&.is-show {
			.c-flow-make:nth-of-type(1) { opacity: 1; translate: 0 0;}
			.c-flow-make:nth-of-type(2) { opacity: 1; translate: 0 0;}	
		}
	}
}

.c-flow-make {
	border: 2px solid var(--color-light-gray);
	display: grid;
	grid-template-columns: repeat(4,1fr);
	font-size: 1.6em;
	text-align: center;
	border-radius: 1em;
	line-height: 1.5;
	font-weight: 500;
	counter-reset: number -1;
	background: #fff;
	@media(max-width: 828px) {
		font-size: 3.2em;
		grid-template-columns: auto;
		grid-template-rows: subgrid;
		grid-row: span 4;
		gap: 0;
	}	
	dt {
		background: var(--color-light-gray);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.8em 0;
		flex-direction: column;
		border-radius: 1em 0 0 1em;
		@media(max-width: 828px) {
			padding: 1em 0;
			border-radius: .5em .5em 0 0;
		}	
	}
	dd {
		counter-increment: number 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.8em 0;
		position: relative;
		&:not(:first-of-type)::before {
			content: '';
			position: absolute;
			background: #dce0ef;
			@media(min-width: 829px) {
				width: 2px;
				height: 64%;
				left: 1px;
				top: 18%;
			}
			@media(max-width: 828px) {
				width: 86%;
				height: 1px;
				left: 7%;
				top: 0;
			}
		}
		&:not(:first-of-type)::after {
			content: '';
			display: block;
			width: 1.2em;
			aspect-ratio: 1 / .64;
			background: #dce0ef;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			position: absolute;
			@media(min-width: 829px) {
				rotate: -90deg;
				top: 50%;
				left: -1px;
				translate: 0 -50%;
			}
			@media(max-width: 828px) {
				left: 50%;
				top: 0;
				translate: -50% 0;
			}
		}
		span {
			&::before {
				content: 'STEP0'counter(number);
				font-size: 1.25em;
				background: var(--color-light-gray);
				border-radius: 100vmax;
				padding: .25em 1em;
				line-height: 1;
				@media(min-width: 829px) {
					position: absolute;
					left: 50%;
					top: -.8em;
					translate: -50% 0;
				}
				@media(max-width: 828px) {
					margin: 0 auto .5em;
					display: block;
				}
			}
		}
	}
	&.-before {
		dd:first-of-type span {
			&::before {display: none;}
			&::after {
				content: '';
				display: block;
				width: 1.6em;
				aspect-ratio: 1 / .64;
				background: currentColor;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				position: absolute;
				@media(min-width: 829px) {
					top: calc(100% + 1.6em);
					left: 50%;
					translate: 0 -50%;
				}
				@media(max-width: 828px) {
					left: calc(94%);
					top: 50%;
					translate: 0 -50%;
					rotate: -90deg;					
				}
			}
		}
	}
	&.-after {
		border-color: var(--color-yellow);
		dt {
			background: var(--color-yellow);
			span {
				background: #fff;
				font-weight: 700;
				font-size: 110%;
			}
		}
		dd:first-of-type {
			background: #fff9dc;
			color: #f44b57;
			font-weight: 700;
			span::before { background:#f44b57; color: #fff;}
		}
	}
	@media (min-width:829px) {
		*+& {
			margin-top: 4em;
		}
	}
}

.c-img-research_sample {
	figcaption {
		display: grid;
		grid-template-columns: auto 1fr;
		span {
			background: var(--color-light-gray);
			i {
				display: block;
				font-size: 1.8em;
				line-height: 1;
				padding: .4em 1em .8em;
				font-weight: 500;
				border-radius: 0 0 .86em 0;
				background: #fff;
				@media(max-width: 828px) {
					font-size: 3.5em;
				}
			}
		}
		&::after {
			content: '';
			display: block;
			border-radius: 1.6em 1.6em 0 0;
			height: 100%;
			background: var(--color-light-gray);
		}
	}
	.c-img {
		background: var(--color-light-gray);
		padding: 2em 2em 2em;
		border-radius: 1.6em 0 1.6em 1.6em;
		img {
			width: 100%;
			height: auto;
			border-radius: 1.2em;
		}
	}
}


.c-list-features {
	li {
		padding: 2.4em;
		border-radius: 1.6em;
		background: rgba(240,241,246,.3);
		border: 1px solid #c9cfe8;
		@media(max-width: 828px) {
			padding: 3.2em;
		}
		p {
			font-size: 1.6em;
			line-height: 1.7;
			@media(max-width: 828px) {
				font-size: 3.2em;
			}
		}
		.hl-point {
			display: flex;
			align-items: baseline;
			margin-bottom: .64em;
			gap: .25em;
			font-family: "Barlow", sans-serif;
			font-weight: 300;
			&::before {
				content: '';
				display: block;
				background: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22832.8%22%20height%3D%22910.22%22%20viewBox%3D%220%200%20832.8%20910.22%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_3%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%203%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_1%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%201%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1%22%20data-name%3D%22%E3%83%91%E3%82%B9%201%22%20d%3D%22M15%2C416.4H119.4%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2%22%20data-name%3D%22%E3%83%91%E3%82%B9%202%22%20d%3D%22M713.4%2C416.4H817.8%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_3%22%20data-name%3D%22%E3%83%91%E3%82%B9%203%22%20d%3D%22M626.41%2C206.39l73.82-73.82%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_4%22%20data-name%3D%22%E3%83%91%E3%82%B9%204%22%20d%3D%22M132.56%2C132.57l73.82%2C73.82%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_5%22%20data-name%3D%22%E3%83%91%E3%82%B9%205%22%20d%3D%22M416.39%2C15V119.4%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_2%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%202%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_6%22%20data-name%3D%22%E3%83%91%E3%82%B9%206%22%20d%3D%22M333.59%2C728.12H499.21%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2231.17%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_7%22%20data-name%3D%22%E3%83%91%E3%82%B9%207%22%20d%3D%22M333.59%2C782.59H499.21%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2231.17%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_8%22%20data-name%3D%22%E3%83%91%E3%82%B9%208%22%20d%3D%22M261.02%2C560.75a204.878%2C204.878%2C0%2C0%2C1-50.36-134.79c0-113.55%2C92.19-205.74%2C205.74-205.74s205.74%2C92.19%2C205.74%2C205.74a204.858%2C204.858%2C0%2C0%2C1-50.36%2C134.79c-13.35%2C17.47-57.64%2C60.07-72.57%2C112.9H333.59c-14.93-52.83-59.22-95.43-72.57-112.9Z%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_9%22%20data-name%3D%22%E3%83%91%E3%82%B9%209%22%20d%3D%22M476.39%2C835.22a59.99%2C59.99%2C0%2C1%2C1-119.98%2C0H476.39Z%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_10%22%20data-name%3D%22%E3%83%91%E3%82%B9%2010%22%20d%3D%22M558%2C443.26s-8.22%2C69.15-58.8%2C120.68%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_11%22%20data-name%3D%22%E3%83%91%E3%82%B9%2011%22%20d%3D%22M557.55%2C388.37s-.67-2.16-3-9.93%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2230%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')50% 50% no-repeat;
				background-size: contain;
				width: 1.6em;
				aspect-ratio: 1/1;
			}
		}
		*+& {
			margin-top: 2em;
			@media(max-width: 828px) {
				margin-top: 4em;
			}	
		}
	}
}

.hl-flow-answer {
	background: var(--color-yellow);
	font-size: 1.6em;
	padding: .5em;
	font-weight: 700;
	border-radius: 100vmax;
	text-align: center;
	max-width: 640px;
	margin: -2.4em auto 2.4em;
	@media (max-width:828px) {
		position: absolute;
		left: -.7em;
		top: 50%;
		padding: .5em .2em;
		translate: 0 -50%;
		writing-mode: vertical-rl;
		font-size: 3.2em;
		height: calc(100% - 3.6em);
		margin: 0;
	}	
}
.c-flow-answer {
	border: 2px solid var(--color-yellow);
	border-radius: 1.6em;
	padding: 2.4em;
	background: rgba(255,255,255,.9);
	margin-top: 6em;
	position: relative;
	.icon-feature {
		position: absolute;
		left: -2em;
		top:-2em;
		@media(max-width:828px) {
			left: auto;
			right: -1em;
		}
	}
	.c-modan-flow {
		position: absolute;
		width: 45%;
		padding: .4em 0;
		display: flex;
		align-items: center;
		justify-content:center;
		top: 2.4em;
		right: 2.4em;
		font-size: 1.5em;
		font-weight: 500;
		background: rgba(240,241,246,.9);
		border: 1px solid #B4BDDA;
		border-radius: 100vmax;
		@media (max-width:828px) {
			flex-direction: column;
			width: auto;
			height: 45%;
			right: auto;
			top: auto;
			bottom: 2em;
			left: 2em;
			writing-mode: vertical-rl;
			font-size: 2.4em;
			padding: 0 .3em;
		}
	}
	@media (max-width:828px) {
		padding: 4.8em 4em 4.8em 10em;		
	}
}
.c-list-flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.4em;
	counter-reset: number 0; 
	@media (max-width:828px) {
		grid-template-columns: auto;
		gap: 9.6em;
	}
	> li {
		position: relative;
		padding: 1em;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		gap: 0;
		counter-increment: number 1;
		figure {
			border-bottom: 1px solid #dce0ef;
			margin-bottom: 1em;
			.c-img {
				padding-top: 1.5em;
				text-align: center;
				img {
					height: 56px;
					width: auto;
				}
			}
			figcaption {
				font-size: 1.32em;
				text-align: center;
				line-height: 1.5;
				padding: 1em 0;
				@media (max-width:828px) {
					font-size: 2.8em;
					padding: .5em 0;
				}		
				b {
					font-size: 1.43em;
					display: block;
				}
				&::before {
					content: 'POINT'counter(number);
					font-family: "Barlow", sans-serif;
					background: #f0f4f7;
					border: 1px solid #c9cfe8;
					border-radius: 100vmax;
					padding: 0 1.6em;
					margin-bottom: .4em;
					display: inline-block;
					font-size: 12px;
				}
			}
		}
		p, ul {
			font-feature-settings: "palt";
			font-size: 1.5em;
			line-height: 1.73;
			margin: 0;
			@media (max-width:828px) {
				font-size: 2.8em;
				line-height: 1.5;
			}		
		}
		&:not(:first-of-type)::before {
			content: '';
			display: block;
			width: 1.4em;
			aspect-ratio: 1 / .84;
			background: #000;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			position: absolute;
			rotate: -90deg;
			top: 50%;
			left: -1.8em;
			translate: 0 -50%;
			@media (max-width:828px) {
				rotate: unset;
				width: 3.2em;
				top: -6.4em;
				left: 50%;
				translate: -50% 0 ;
			}		
		}
	}
}

.c-works__item {
	border: 1px solid #c9cfe8;
	border-radius: 1.6em;
	padding: 5.6em 4em 3.2em;
	position: relative;
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(4px);
	@media(max-width: 828px) {
		padding: 0;
	}
	.inner {
		max-height: 37em;
		position: relative;
		overflow: hidden;
		> p {
			font-size: 1.4em;
			line-height: 1.5;
			padding-left: .9em;
			*+& {
				margin-top: .5em;
			}
			@media(max-width: 828px) {
				font-size: 2.8em;
				margin-left: 1em;
				margin-right: 1em;	
			}
		}
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 25%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, #fff 90%);
			z-index: 2;
			transition: scale;
			transform-origin: center bottom;
			transition: .3s height;
		}
		@media(max-width: 828px) {
			padding-bottom: 3em;
		}
	}
	.c-btn-detail {
		font-size: 1.4em;
		border-radius: 100vmax;
		background: #333;
		color: #fff;
		padding: .2em 4em;
		position: absolute;
		bottom: -1em;
		left: 50%;
		translate: -50% 0;
		cursor: pointer;
		display: flex;
		justify-content: center;
		gap:.5em;
		border: none;
		transition: .2s padding;
		z-index: 2;
		&::before {
			content: '詳細を見る';			
		}
		@media(max-width: 828px) {
			font-size: 2.4em;
		}
	}
	*+& {
		margin-top: 4.8em;
		@media(max-width: 828px) {
			margin-top: 8em;
		}
	}
	&.is-open {
		.inner {
			max-height: none;
			&::after {
				height: 0;
			}
		}

		.c-btn-detail {
			padding: .2em .5em;
			font-size: 2.4em;
			&::before {
				content: '×';
			}	
		}
	}
	@media(max-width: 828px) {
		.c-list-portrait {
			margin-left: 3em;
			margin-right: 3em;
		}		
		.hl-works-sub {
			margin-left: 1em;
			margin-right: 1em;
		}		
	}
}
.hl-works-sub {
	display: flex;
	gap: .5em;
	font-size: 1.6em;
	font-weight: 700;
	span {
		font-size: .8em;
		font-weight: 500;
		margin-top: .2em;
	}
	&::before {
		content: '';
		display: block;
		width: 3px;
		background: #000;
		border-radius: 100vmax;
	}
	*+& {
		margin-top: 1.6em;
	}
	@media(max-width: 828px) {
		gap: .5em;
		font-size: 3.2em;
		*+& {
			margin-top: 1.6em;
		}	
	}
}
.hl-copy-works {
	font-size: 3.2em;
	font-weight: 700;
	line-height: 1.5;
	@media(max-width: 828px) {
		font-size: 3.9em;
		br {
			display: none;
		}
	}
}
.c-detail-works {
	margin-top: 1.6em;
	@media(max-width: 828px) {
		margin-top: 3em;
	}	
	> div {
		display: grid;
		grid-template-columns: 8em 1fr;
		padding: .64em 1em;
		font-size: 1.6em;
		*+& {
			border-top: 1px solid #c9cfe8;
		}
		@media(max-width: 828px) {
			font-size: 2.4em;
			padding: .64em 0;
		}	
	}
}
.c-list-portrait {
	margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 4em;
	> li {
		position: relative;
		border-radius: 2px;
		border: 1px solid #c9cfe8;
		background: #fafbfc;
		padding: 1em;
		font-weight: 500;
		p {
			font-size: 1.6em;
			text-align: center;
		}
		ul {
			margin-top: 1em;
			font-size: 1.4em;
			list-style: 1;
			display: flex;
			justify-content: center;
			gap: 4px;
			li {
				background: var(--color-yellow);
				border-radius: 100vmax;
				padding: .4em 2em .5em;
				border: none;
				
			}
		}
		&:not(:first-of-type)::before {
			content: '';
			display: block;
			width: 1.6em;
			aspect-ratio: 1 / .84;
			background: #000;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			position: absolute;
			rotate: -90deg;
			top: 50%;
			left: -2.9em;
			translate: 0 -50%;
		}		
	}
	@media(max-width: 828px) {
		grid-template-columns: auto;
		> li {
			padding: 1em;
			p {
				font-size: 3.2em;
			}
			ul {
				margin-top: 1em;
				font-size: 2.8em;
			}
			&:not(:first-of-type)::before {
				width: 2.4em;
				rotate: unset;
				top: -3em;
				left: 50%;
				translate: -50% 0;
			}		
		}	
	}
}

.hl-works__item {
	background: var(--color-yellow);
	font-size: 2em;
	font-family: "Barlow", sans-serif;
	font-weight: 300;
	display: flex;
	gap: .5em;
	align-items: center;
	position: absolute;
	z-index: 2;
	border-radius: 100vmax;
	padding: .2em 1em;
	position: absolute;
	margin-top: -3.6em;
	span {
		font-size: 1.5em;
		&::after {
			content: '/3';
			font-size: 0.64em;
		}
	}
	@media(max-width: 828px) {
		font-size: 3em;
		margin: -1em 0 0 .25em;
	}
}
.sec-result {
	margin-top: 8em;
	text-align: center;
	> p {
		font-size: 1.8em;
		margin: 1.6em auto 2.4em;
		font-weight: 500;
	}
	@media(max-width: 828px) {
		margin-top: 12em;
		p {
			font-size: 3.2em;
			line-height: 1.6;
		}
	}
}
.hl-result {
	font-size: 2.6em;
	font-weight: 500;
	letter-spacing: .05em;
	b {
		font-size: 1.4em;
	}
	.-band {
		display: inline-block;
		position: relative;
		z-index: 1;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 84%;
			background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
			z-index: -1;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		&.scr-trigger {
			&::after {
				scale: 0 1;
				transform-origin: left center;
				transition: .4s scale;
			}
			&.is-show {
				&::after {
					scale: 1 1;
				}
			}
		}
	}
	@media(max-width: 828px) {
		font-size: 4.8em;
		line-height: 1.4;
		b {
			font-size: 2em;
		}
		.-band {
			line-height: 1;
		}
	}
}

.scr-trigger.-slideup {
	opacity: 0;
	translate: 0 50px;
	transition: .3s opacity, .3s translate;
	&.is-show {
		opacity: 1!important;
		translate: 0 0;			
	}
}

.c-result-figure {
	position: relative;
	.c-img {
		img {
			max-width: 100%;
			height: auto;
		}
	}
}

.c-list-result {
	> li {
		font-weight: 700;
		background: #e8fcff;
		padding: .1em .2em;
		@media (min-width: 829px) {
			font-size: 1.8em;
			position: absolute;
			&:nth-of-type(1) { top: 69%; left: 1%;}
			&:nth-of-type(2) { top: 82%; left: 19%;}
			&:nth-of-type(3) { top: 99%; left: 39%;}
			&:nth-of-type(4) { top: 89%; right: 25%;}
			&:nth-of-type(5) { top: 72%; right: 11%; }				
		}
	}
	@media (max-width: 828px) {
		display: flex;
		flex-wrap: wrap;
		gap: .5em;
		justify-content: center;
		font-size: 3.4em;
		padding: .2em .4em;
	}	
}

.c-fixed-nav {
	position: fixed;
	right: 2vw;
	bottom: 2vw;
	background: #fff;
	padding: 1em;
	border-radius: 100vmax;
	display: grid;
	gap: 1em;
	box-shadow: 0 0 20px rgba(150,150,160,.5) ;
	opacity: 0;
	translate: 0 100px;
	z-index: -1;
	transition: .3s opacity, .3s translate;

	&.is-visible {
		z-index: 10;
		opacity: 1;
		translate: 0 0;	
	}

	@media(max-width:828px) {
		grid-template-columns: 1fr 1fr;
		gap: 1.5em;
		right: 0;
		border-radius: 100vmax 0 0 100vmax;
		translate: 100px 0;
	}

	.c-btn-circle {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 6em;
		aspect-ratio: 1/1;
		color: #000;
		@media(max-width:828px) {
			width: 11em;
		}
		span {
			font-size: 1.2em;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap:.5em;
			&::before {
				content: '';
				display: block;
				height: 1.1em;
				width: 3em;
			}
			@media(max-width:828px) {
				font-size: 2.3em;
			}
		}
		&.-contact {
			background: var(--color-yellow);
			span::before {
				background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240.405%22%20height%3D%2228.405%22%20viewBox%3D%220%200%2040.405%2028.405%22%3E%20%3Cg%20id%3D%22icon_data%22%20transform%3D%22translate(-3.725%20-10.725)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M43.13%2C20.13v18h-38v-26h38l-19%2C15-19-15%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		&.-top {
			background: var(--color-light-gray);
			span::before {
				background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronUp%22%3E%3Cpath%20d%3D%22M4%2015l8-8%208%208%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
				background-size: contain;
			}
		}
	}
}


/*#contact*/
#contact{
	position: relative;
}
.c-list-works {
	max-width: 100%;
	position: relative;
	.c-list-works__item {
		padding: 0 1.6em;
		> div {
			aspect-ratio: 367 / 427;
			border-radius: 10px;
			box-shadow: 0 0 5px rgba(0,0,0,.2);
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}	
		}
	}

	.slick-arrow {
		font-size: 0;
		width: 48px;
		border: none;
		aspect-ratio: 1/1;
		background: rgba(0,0,0,.64) url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ArrowLeft%22%3E%3Cpath%20d%3D%22M11%205l-7%207%207%207%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
		background-size: 50%;
		border-radius: 50%;
		position: absolute;
		top: 44%;
		translate: 0 -50%;
		z-index: 5;
		cursor: pointer;
		transition: .3s background-color;
		&.slick-prev {
			left: 0;
		}
		&.slick-next {
			right: 0;
			rotate: 180deg;
		}
		&:hover {
			background-color: rgba(0,0,0,.9);
		}
		
		@media(max-width: 828px) {
			width: 40px;
		}
		
		@media(max-width: 480px) {
			width: 36px;
		}
	}
	.slick-dots {
		margin-top: 3em;
		display: flex;
		justify-content: center;
		gap: 1em;
		button {
			font-size: 0;
			border: none;
			width: 10px;
			aspect-ratio: 1/1;
			background: #000;
			border-radius: 50%;
			opacity: .25;
			cursor: pointer;
			transition: .3s opacity;
			&:hover,
			.slick-active & {
				opacity: 1;
			}
		}
	}
}

.sec-conclusion {
	max-width: 1100px;
	margin: 0 auto 6em;
	width: 96%;
	padding: 0 0 8em;
	border-bottom: 3px solid #e2e2f1;
	position: relative;
	z-index: 2;
}

.hl-conclusion {
	font-size: 3.6em;
	line-height: 1.78;
	font-weight: 500;
	letter-spacing: .2em;
	text-align: center;
	position: relative;
	z-index: 2;
	&::before {
		content: '';
		display: block;
		width: 2.2em;
		aspect-ratio: 2 / 1;
		background: var(--color-yellow);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		margin: 0 auto 1.6em;
	}
	b {
		font-size: 1.2em;
		span {
			display: inline-flex;
			&::before {
				content: '❝';
				color: #bad3d9;
				font-weight: 500;
			}
			&::after {
				content: '❞';
				color: #bad3d9;
				font-weight: 500;
			}
		}
	}
	@media(max-width: 828px) {
		font-size: 6.4em;
		line-height: 1.6;
	}
	&.scr-trigger {
		translate: 0 -3em;
		opacity: 0;
		transition: .6s translate, .6s opacity;
		&.is-show {
			translate: 0 0;
			opacity: 1;
		}
	}
}


@media(min-width: 829px) {
	.is-sp {
		display: none!important;
	}
}
@media(max-width: 828px) {
	.is-pc {
		display: none!important;
	}
}



.hl-about {
	margin: 2em 0;
	padding-bottom: 2em;
	display: flex;
	border-bottom: 1px solid #c9cfe8;
	gap: 1em;
	align-items: center;
	> span:not(.-band) {
		font-size: 2.5em;
		font-weight: 700;
		margin-bottom: .4em;
	}
	> span.-band {
		font-size: 1.8em;
		font-weight: 500;
		display: inline-block;
		position: relative;
		z-index: 1;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 84%;
			background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
			z-index: -1;
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
	@media(max-width: 828px) {
		flex-direction: column;
		align-items: flex-start;
		> span:not(.-band) {
			font-size: 4.8em;
		}
		> span.-band {
			font-size: 3.6em;
			display: inline;
			background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
			margin-top: .2em;
			&::after {
				display: none;
			}
		}
	}
}

.c-list-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3em 0;
	margin-top: 4em;
	li {
		border-left: 1px solid #ccd0e3;
		padding: 0 4em;
		@media(min-width:829px) {
			&:nth-of-type(3n) {
				border-right: 1px solid #ccd0e3;			
			}
		}	
		a {
			color: currentColor;
			transition: .3s opacity;
			@media(hover: hover) {
				&:hover {
					opacity: .7;
				}
			}
		}
		img {
			display: block;
			margin: 0 auto 1em;
			height: 6.4em;
			width: auto;
		}
		h3 {
			font-size: 1.6em;
			font-weight: 700;
			display: flex;
			justify-content: center;
			gap: .5em;
			margin-bottom: 1em;
			&::after {
				content: '';
				width: .9em;
				aspect-ratio: 1/1;
				background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		p {
			font-size: 1.4em;
			line-height: 1.5;
		}
	}
	@media(max-width:828px) {
		grid-template-columns: repeat(2, 1fr);
		li {
			padding: 0 3em;
			&:nth-of-type(2n) {
				border-right: 1px solid #ccd0e3;			
			}
			img {
				display: block;
				margin: 0 auto 1em;
				height: 12em;
				width: auto;
			}
			h3 {
				font-size: 2.8em;
			}
			p {
				display: none;
			}	
		}
	}
}

.c-closing {
	margin-top: 12em;
	.-band {
		display: inline-block;
		position: relative;
		z-index: 1;
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 64%;
			background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
			z-index: -1;
			position: absolute;
			left: 0;
			bottom: 18%;
		}				
	}
	.c-btn-blk {
		font-size: 1.6em;
		font-weight: 700;
		max-width: 320px;
		margin: 3em auto;
		@media(max-width:828px) {
			font-size: 4em;
		}	
	}
	@media(max-width:828px) {
		margin-top: 8em;
	}
}


/* form */
.p-lp__sec08 {
    padding: 16em 0 12em;
    background: #edf2f8;
	.l-inner {
		z-index: 1;
		position: relative;
		max-width: 1100px;
		margin: 0 auto;
	}
}
.c-tit__m {
    position: relative;
    margin-bottom: 1.2em;
    padding-bottom: .8em;
    color: #1e50a2;
    font-size: 3.6em;
    font-weight: 700;
    text-align: center;
	@media (max-width: 828px) {
		font-size: 5em;		
	}
}
.c-tit__m:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 26px);
    width: 52px;
    height: 3px;
    background: #1e50a2;
    content: '';
}

.p-lp__sec08 p {
    text-align: center;
	margin: 2em auto 4em;
	font-size: 1.6em;
	line-height: 1.7;
}
.p-lp__sec08__form {
    padding: 4.8em 8em 8em;
    background: #fff;
	border-radius: 1.6em;
	@media(max-width:828px) {
		padding: 4em 3.2em 5em;
	}
}
.l-footer {
	padding: 0 0 4em;
    background: #edf2f8;
	text-align: center;
	small {
		font-size: 1.3em;
		margin-top: 1em;
		display: block;
	}
}

.c-tel-blk a[href*="tel:"] {
	text-decoration: none;
	color:#000;
	margin:0 auto 4em;
	background: linear-gradient(90deg, #9bebff 0%, #deffd2 65.26%, #ffeb84 100%);
	border-radius: 100vmax;
	display: flex;
	justify-content:center;
	align-items: center;
	padding: .8em 1em;
	gap: 1.6em;
	@media(min-width:829px) {
		pointer-events: none;
		cursor: default;
		}
	@media(max-width:828px) {
		flex-direction: column;
		gap: .5em;
		padding: 2em 1em;
	}
}
.c-tel-blk span {
	display: flex;
	gap:.2em;
	align-items: end;
	font-size: 4em;
	font-weight: 700;
	font-family: "Barlow", sans-serif;
	&::before {
		content: '';
		padding-left: .9em;
		height: .9em;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2248px%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M795.48-114.02q-117.44%200-239.01-56.48-121.58-56.48-225.3-160.2-103.95-103.95-160.55-225.65-56.6-121.69-56.6-238.89%200-21.39%2014.68-36.18%2014.67-14.8%2036.06-14.8h140q18.07%200%2030.34%2011.56%2012.27%2011.55%2016.99%2030.38l27%20122.17q2.48%2016.87-.74%2030.4-3.22%2013.54-13.13%2022.97l-100.96%2099.57q25.04%2042.08%2053.09%2078.65%2028.04%2036.56%2062.32%2069.61%2036.05%2037.28%2075.25%2067.46%2039.21%2030.19%2081.82%2052.75l96.19-98.71q11.68-12.68%2026.59-17.16%2014.91-4.47%2030.55-1.52l114.21%2025.29q18.83%205.19%2030.38%2019.1%2011.56%2013.92%2011.56%2032.5v136.44q0%2021.39-14.8%2036.06-14.79%2014.68-35.94%2014.68Z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
		background-size: contain;
	}
	@media(max-width:828px) {
		font-size: 6.4em;
	}	
}
.c-tel-blk em {
	font-size: 1.6em;
	font-weight: 500;
	@media(max-width:828px) {
		font-size: 3em;
	}	
}

.sec-push {
	text-align: center;
	position: relative;
	z-index: 3;
	margin-top: -14em;
	position: relative;
	.inner {
		padding: 4em 0;
		background: linear-gradient(#fff 40%, rgba(255, 255, 255, 0) 100%);
		border-radius: 16px 16px 0 0;
		@media(max-width:828px) {
			background: none;
		}
	}
	&.is-a
	.hl-section-article {
		margin-bottom: 0;
	}
	.c-text-common {
		margin-top: 0!important;
		margin-bottom: 2em;
	}
	@media(max-width:828px) {
		margin-top: 0;
	}
}

.c-list-push {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.4em;
	max-width: 912px;
	margin: 0 auto;
	li {
		&::marker {
			display: none;
		}
		figure {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			aspect-ratio: 1/1;
			border-radius: 50%;
			border: 1px solid #009cc9;
			img {
				display: block;
				margin: 0 auto 1em;
				height: 46px;
				width: auto;
			}
			figcaption {
				font-size: 1.8em;
				line-height: 1.2;
				color: #004f61;
				text-align: center;
			}
		}
	}
	@media(max-width:960px) {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
		li {
			width: calc((100% - 24px) / 3);
			figure {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				aspect-ratio: 1/1;
				border-radius: 50%;
				border: 1px solid #009cc9;
				img {
					display: block;
					margin: 0 auto 1em;
					height: calc((46 / 480) * 100vw);
					width: auto;
				}
				figcaption {
					font-size: calc((16 / 480) * 100vw);
					line-height: 1.2;
					color: #004f61;
					text-align: center;
				}
			}			
		}
	}
}

.c-blk-btn {
	margin: 4em auto 0;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75em;
	max-width: 840px;
	@media(max-width:828px) {
		grid-template-columns: 1fr;
		width: 84%;
	}
}
.c-btn-blk_wide {
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffea00;
	border: 5px solid #faff80;
	border-radius: 10px;
	width: 100%;
	color: #000;
	padding: 1em;
	position: relative;
	transition: .3s box-shadow;
	@media(hover: hover) {
		&:hover {
			box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
		}
	}
	@media(max-width:828px) {
		border: 3px solid #faff80;
		padding: .5em;
	}	
	> span {
		display: flex;
		align-items: center!important;
		gap: 0!important;
		font-size: min(calc(20 / 1140 * 100vw), 2em);
		font-weight: 700;
		height: 2.37em;
		padding-right: 2em;
		&::before {
			content: '';
			width: 1em;
			aspect-ratio: 1/1;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-PaperAirplane%22%3E%3Cpath%20d%3D%22M9.474%2016l9.181%203.284a1.1%201.1%200%200%200%201.462-.887L21.99%204.239c.114-.862-.779-1.505-1.567-1.13L2.624%2011.605c-.88.42-.814%201.69.106%202.017l2.44.868%201.33.467M13%2017.26l-1.99%203.326c-.65.808-1.959.351-1.959-.683V17.24a2%202%200%200%201%20.53-1.356l3.871-4.2%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
			background-size: contain;
			margin-right: .5em;
		}
		@media(max-width:828px) {
			font-size: 1rem;
		}
	}
	i {
		width: min(calc(44 / 1140 * 100vw), 4.4em);
		aspect-ratio: 1/1;
		background: #faff80;
		border: 2px solid #fff;
		border-radius: 5px;
		position: absolute;
		right: 1.2em;
		display: flex;
		align-items: center;
		justify-content: center;
		&::before {
			content: '';
			display: block;
			width: 2em;
			aspect-ratio: 1/1;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ArrowDown%22%3E%3Cpath%20d%3D%22M12%2020V4%22%2F%3E%3Cpath%20d%3D%22M5%2013l7%207%207-7%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
			background-size: 90% auto;
		}
		@media(max-width:828px) {
			width: min(calc(60 / 390 * 100vw), 6em);
		}
	}
	&.-white {
		background: #fff;
		color: #000;
		> span {
			color: #000;
		}
		i {
			background: #ffea00;
		}
	}
	&.-download {
		background: #3f90a3;
		border-color: #86daed;
		color: #fff;
		padding: 1em;
		position: relative;
		> span {
			&::before {
				background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%2219%22%20y1%3D%2223%22%20x2%3D%2229%22%20y2%3D%2223%22%2F%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%2219%22%20y1%3D%2230%22%20x2%3D%2229%22%20y2%3D%2230%22%2F%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%2219%22%20y1%3D%2237%22%20x2%3D%2225%22%20y2%3D%2237%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M10%2C39V9c0-2.21%2C1.79-4%2C4-4h14%22%2F%3E%20%3Cline%20class%3D%22st0%22%20x1%3D%2238%22%20y1%3D%2221%22%20x2%3D%2238%22%20y2%3D%2238.99%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M38%2C15h-7.27c-1.51%2C0-2.73-1.22-2.73-2.73v-7.27%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M28%2C5c5.52%2C0%2C10%2C4.48%2C10%2C10%22%2F%3E%3C%2Fsvg%3E');
			}
		}
		i {
			background: #287f93;
			border: 2px solid #3badc7;
			&::before {
				background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Download%22%3E%3Cpath%20d%3D%22M12%2015V3m0%2012l-4-4m4%204l4-4%22%2F%3E%3Cpath%20d%3D%22M2%2017l.621%202.485A2%202%200%200%200%204.561%2021H19.439a2%202%200%200%200%201.94-1.515L22%2017%22%2F%3E%3C%2Fsvg%3E');
			}
		}		
	}
}