.c-gp__h2 {
	margin-bottom: 1.4em;
}
.is-sp {
	@media(min-width: 768px) {
		display: none;
	}
}
.is-pc {
	@media(max-width: 767px) {
		display: none!important;
	}
}
.l-wrapper {
	padding-top: 92.5px;
	@media(max-width: 767px) {
		padding-top: 58px;
	}
}
.l-bannerHeader {
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 500;
	width: 100%;
	padding: 0 40px;
	background: #fff;
	> div {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.l-bannerHeader__lg {
			img {
				width: 180px;
				height: auto;
			}
		}
		ul {
			display: flex;
			gap: 1em;
		}
	}
	@media(max-width: 767px) {
		padding: 0 8px;
		> div {
			width: 100%;
			padding: 15px 0;
			.l-bannerHeader__lg {
				img {
					height: 28px;
					width: auto;
				}
				margin-right: 20px;
			}
			ul {
				gap: 4px;
			}
		}
	}
}

.c-gp__h2__tt {
	@media (min-width: 768px) {
		font-size: 3.2em;
	}
}

.hl-effect {
	text-align: center;
	span {
		font-feature-settings: "palt";
		padding-left: .24em;
		font-weight: bold;
		color: #0086d1;
		display: flex;
		justify-content: center;
		align-items: end;
		gap:.5em;
		font-size: 2em;
		&::before,
		&::after {
			content: '';
			display: block;
			background: url('/banner/hng/sw/img/hl_effect.svg') 50% 50% no-repeat;
			aspect-ratio: 285 / 388;
			width: 2.2em;
		}
		&::after {
			transform: scale(-1, 1);
		}
		@media(max-width: 767px) {
			gap: .1em;
			font-size: calc((18 / 390) * 100vw);
			&::before,
			&::after {
				aspect-ratio: 285 / 388;
				width: 1.5em;
			}	
		}
	}
}
.hl-effect2 {
	text-align: center;
	> span {
		font-feature-settings: "palt";
		padding-left: .24em;
		font-weight: bold;
		font-size: 1.4em;
		line-height: 1.2;
		@media(max-width: 767px) {
			font-size: calc((16 / 390) * 100vw);
		}
	}
	.-effect {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: .25em;
		&::before,
		&::after {
			content: '';
			display: block;
			background: url('/banner/hng/sw/img/hl_effect3.svg') 50% 50% no-repeat;
			aspect-ratio: 4 / 5;
			width: .9em;
		}
		&::after {
			transform: scale(-1, 1);
		}
		&.-pink {
			&::before,
			&::after {
				background: url('/banner/hng/sw/img/hl_effect4.svg') 50% 50% no-repeat;
			}
		}
	}
}


.w-scroll {
	overflow-x: auto;
	padding-bottom: 1em;
	margin-top: 2em;
	@media screen and (max-width: 767px) {
		margin-top: 0;
	}
}
.p-list-voices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px 28px;
	padding-top: 2em;
	margin: 0 auto 2em;
	max-width: 800px;

	@media screen and (max-width: 767px) {
		gap: 1em;
		grid-template-columns: 1fr;
	}
}
.p-list-voices__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
	background: #dcf2f6;
	padding: 0 1em 1em;
	border-radius: .48em;
	position: relative;
	&::before {
		content: '';
		display: block;
		background: #dcf2f6;
		width: 25%;
		aspect-ratio: 1/1;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		translate: -50% 0;
		top: -10%;
	}
	.c-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;
		span {
			text-align: center;
			min-width: 6em;
			font-size: .96em;
			font-weight: bold;
		}
		@media screen and (max-width: 767px) {
			width: 80%;
			margin: 0 auto;
			span {
				line-height: 1.2;
				font-size: calc((12 / 390) * 100vw);
			}
			img {
				height: calc((56 / 390) * 100vw);
			}
		}
	}
	.c-text {
		padding: .4em .8em;
		background: #fff;
		border-radius: .4em;
		z-index: 1;
		font-feature-settings: "palt";
		h3 {
			color: #0086d1;
			font-size: 1.25em;
			font-weight: bold;
			text-align: center;
			margin-bottom: .25em;
			@media screen and (max-width: 767px) {
				font-size: calc((17 / 390) * 100vw);
			}
		}
	}
	@media screen and (min-width: 768px) {
		&:nth-of-type(2),
		&:nth-of-type(3) {
			background: #fce8e7;
			&::before {
				background: #fce8e7;
			}	
			h3 {
				color: #bf4da4;
			}
		}
	}
	@media screen and (max-width: 767px) {
		&:nth-of-type(2n) {
			background: #fce8e7;
			&::before {
				background: #fce8e7;
			}	
			h3 {
				color: #bf4da4;
			}
		}
	}
}

.c-text-lead {
	font-size: 1.32em;
	line-height: 1.4;
	font-weight: bold;
	@media screen and (min-width: 768px) {
		&.-center {
			text-align: center;
		}	
		&.-larger {
			font-size: 1.6em;
			line-height: 1.2;
		}			
	}
	@media screen and (max-width: 767px) {
		font-size: calc((15 / 390) * 100vw);
	}
}
.c-img {
	&.-center {
		text-align: center;
	}
	@media screen and (max-width: 767px) {
		img {
			width: 100%;
			height: auto;
		}
	}
}

.p-grid-soudan {
	margin-top: 4em;
	display: grid;
	grid-template-columns: repeat(3, auto);
	.c-row {
		position: relative;
		&:nth-of-type(1) {
			padding-right: 2em;
			img {
				width: 100%;
				height: auto;
			}
			@media(max-width: 767px) {
				padding-right: 0;
			}
		}
		&.-eyecatch {
			img {
				position: relative;
				top: 4.5em;
				@media(max-width: 767px) {
					top: 3em;
				}
			}
		}
		&.-info {
			color: #fff;
			padding: 2.5em 2em 0;
			text-align: center;
			&::before {
				content: '';
				display: block;
				background: url('/banner/hng/sw/img/img_soudankai01_03.webp') 50% 50% no-repeat;
				background-size: cover;
				z-index: -1;
				width: 42px;
				aspect-ratio: 42/63;
				position: absolute;
				left: -22px;
				top: 44px;
				z-index: 1;
				@media(max-width: 767px) {
					width: 28px;
					left: -15px;
					top: 24px;
				}	
			}			
			&::after {
				content: '';
				display: block;
				background: #0086d1;
				z-index: -1;
				width: 100vw;
				height: 98%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			> h3 {
				margin-bottom: 1.6em;
			}
			> p {
				margin-top: 2em;
				> span {
					font-size: 1.8em;
					line-height: 1.6;
					text-decoration: underline;
					@media(max-width: 767px) {
						font-size: calc((17 / 390) * 100vw);
					}
				}
				> a {
					margin: 1.3em 0 0;
					text-decoration: none;
					font-size: 1.4em;
					line-height: 1.4;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					padding: .64em 1em;
					text-align: left;
					color: #bf4da4;
					border: 1px solid #bf4da4;
					border-radius: 4px;
					background: #fff;
					transition: .3s background, .3s color;
					&::after {
						content: '';
						display: block;
						padding: .8em;
						aspect-ratio: 1/1;
						transition: .3s background-image;
						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%22%23bf4da4%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
						background-size: contain;
					}
					@media(hover:hover) {
						&:hover {
							background: #bf4da4;
							color: #fff;
							&::after {
								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%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');
							}
						}
					}
					@media(max-width: 767px) {
						font-size: calc((16 / 390) * 100vw);
					}
				}
			}
		}
	}
	@media(max-width: 767px) {
		margin-top: 2em;
		display: flex;
		flex-wrap: wrap;
		grid-template-columns: auto;
		gap: 0;
		box-sizing: border-box;
		.c-row:nth-of-type(1) {
			width: 100%;
			text-align: center;
			margin-bottom: 1em;
			img {
				width: 80%;
				height: auto;
			}
			.c-blk-btn {
				padding: 0 15px;
			}
		}
		.c-row.-eyecatch {
			box-sizing: border-box;
			width: 24%;
			img {
				width: 100%;
				height: auto;
			}
		}
		.c-row.-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			width: 76%;
			padding: 1em 0 2em ;
			> h3 {
				margin-bottom: 1em;
				text-align: center;
				img {
					width: 90%;
					height: auto;
				}
			}
		}		
	}
}

.hl-cm_movie {
	text-align: center;
	padding-bottom: 1.6em;
	span {
		font-weight: bold;
		position: relative;
		display: inline-flex;
		color: #fff;
		font-size: 1.4em;
		padding: .24em 1.2em .32em;
		align-items: center;
		justify-content: center;
		background: #bf4da4;
		&::after {
			content: '';
			display: block;
			width: .6em;
			aspect-ratio: 14/19;
			background: #bf4da4;
			clip-path: polygon(0 0, 100% 0, 80% 100%);
			position: absolute;
			top: 99%;
			left: 1em;
		}
	}
	@media(max-width: 767px) {
		span {
			font-size: calc((15 / 390) * 100vw);
		}
	}

}

.c-gp__s {
	line-height: 1.4;
	&.-indent {
		text-indent: -1em;
		padding-left: 1em;
	}
	&.-center {
		text-align: center;
		@media(max-width: 767px) {
			text-align: left;
		}
	}
}
*+.c-gp__s {
	margin-top: .64em;
}

.p-table-plan1 {
	margin-top: 2em;
	@media(max-width: 767px) {
		margin-top: 1em;
		> div {
			img {
				width: 100%;
				height: auto;
			}
		}
	}
}


.p-grid-half {
	display: grid;
	grid-template-columns: 50% auto;
	gap: 4em;
	.c-row {}
	*+& {
		margin-top: 2.4em;
		@media(max-width: 767px) {
			margin-top: 2em;	
		}
	}
	&.-area {
		grid-template-columns: auto auto;
		align-items: end;
		.-text {
			>*+p {
				margin-top: 1.6em;
			}
		}
		a {
			color: #0086d1;
		}
		@media(max-width: 767px) {
			grid-template-columns: auto;
			gap: 2em;
		}
		figure {
			text-align: center;
			@media(max-width: 767px) {
				img {
					width: 50%;
					height: auto;
				}
			}
		}
	}
	&.-payment {
		gap: 2em;
		max-width: 760px;
		margin: 3em auto 0;
		@media(max-width: 767px) {
			gap: 1em;
			margin: 2.4em auto 0;
			width: 90%;
		}
	}
	&.-plan1 {
		grid-template-columns: repeat(2, 1fr);
		gap: 2em;
		> div {
			display: flex;
			align-items: end;
			img {
				width: 100%;
				height: auto;
			}
		}
		@media(max-width: 767px) {
			grid-template-columns: 1fr;
			gap: 1em;
			margin-bottom: 1em;
			> div {
				padding: 0 1em;
			}
		}
	}
	@media(max-width: 767px) {
		grid-template-columns: 1fr;
		img {
			width: 100%;
			height: auto;
		}
	}
	&.-movie {
		grid-template-columns: 1fr;
		iframe {
			display: block;
			margin: 0 auto;
		}
		@media(max-width: 767px) {
			iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;
			}
			img {
				display: none;
			}
		}
	}
	&.grid-reason {
		@media(max-width: 767px) {
			.hl-common {
				margin-top: 2em;
			}
		}
	}
	&.-btns {
		gap: 1em;
		align-items: end;
		@media(max-width: 767px) {
			gap: 1em;
		}
	}
}
.hl-common {
	display: flex;
	font-size: 20px;
	gap:.75em;
	&::before {
		content: '';
		display: block;	
		width: 5px;
		border-radius: 2.5px;
		background: linear-gradient(180deg, #0086d2, #00cae5);			
	}
	span {
		font-weight: bold;
	}
	*+& {
		margin-top: 2em;
		@media(max-width: 767px) {
			margin-top: 1em;
		}	
	}
	@media(max-width: 767px) {
		font-size: calc((16 / 390) * 100vw);
		gap: .5em;
	}
}
.c-txt-freedial {
	margin-top: 1.6em;
	border: 1px solid #0086d1;
	padding: .6em 1em .5em;
	> a {
		color: #0086d1;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap:.5em;
		font-weight: bold;
		font-size: 2em;
		b {
			line-height: 0;
			font-size: 1.4em;
		}
		&::before {
			content: '';
			display: block;
			height: 1.1em;
			aspect-ratio: 7/4;
			background: url('/banner/hng/sw/img/icon_freedial.webp') 50% 50% no-repeat;
			background-size: contain;
		}
		@media(min-width: 768px) {
			pointer-events: none;
		}
	}
}
.c-address {
	> div {
		display: grid;
		grid-template-columns: 6em auto;
		padding: 1em 0;
		border-bottom: 1px dotted #ccc;
		@media(max-width: 767px) {
			grid-template-columns: auto;
			gap:.5em
		}
	}
	dt {
		font-weight: bold;
	}
	*+& {
		margin-top: 1em;
	}
}

.l-sec-reason {
	margin-top: 6em;
	padding-bottom: 5em;
	position: relative;
	overflow: clip;
	.c-inner {
		box-sizing: border-box;
		width: 1000px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		text-align: center;
		*+p {
			margin-top: 2em;
		}
		> p {
			position: relative;
			/* &::after {
				content: '';
				display: block;
				width: 50%;
				aspect-ratio: 324/46;
				background: #4ac9e3;
				z-index: -3;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				position: absolute;
				left: 50%;
				translate: -50% 0;
				top: 10px;
			} */
		}
		@media(max-width: 767px) {
			width: 100%;
			padding: 0 15px;
		}
	}
	&::after {
		content: '';
		display: block;
		width: 2800px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		background: #0086d1;
		position: absolute;
		z-index: -1;
		left: 50%;
		translate: -50% 0;
		bottom: 1em;
		@media(max-width: 767px) {
			width: calc((1200 / 390) * 100vw);
			bottom: 0;
		}
	}
	.c-img {
		text-align: center;
		img {
			width: 100%;
			max-width: 640px;
			height: auto;	
		}
	}	
	@media(max-width: 767px) {
		margin-top: 3em;
		padding: 0 15px 4em;
		.c-img img {
			width: 100%;
			height: auto;
		}
		p img {
			width: 90%;
		}
	}
	.c-copy {
		font-size: 3em;
		font-weight: bold;
		color: #fff;
		line-height: 1.6;
		padding-top: .6em;
		margin-bottom: 1em;
		@media(max-width: 767px) {
			font-size: calc((26 / 390) * 100vw);
			line-height: 1.4;
		}
	}
	.c-gp__h2 {
		color: #fff;
		padding-top: 3em;
		max-width: 1000px;
		margin: 0 auto;
		.c-gp__h2__ln {
			background: rgba(255, 255, 255, 0.2);
			&::before {
				background: #fff;
			}
		}
	}
}
.c-dl-area {
	dd {
		margin-top: .5em;
		font-size: 1.1em;
		padding-left: 1.2em;
	}
}
.p-gird-payment_item {
	border-radius: 1.6em 1.6em 0 0;
	padding: 5px;
	background: #00a499;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap:0;
	.hl-payment_item {
		font-size: 1.6em;
		font-weight: bold;
		text-align: center;
		position: relative;
		color: #fff;
		padding: .1em 0 .32em;
		.obj-baloon {
			position: absolute;
			width: 130px;
			top: -32px;
			left: -72px;
		}
		@media(max-width: 767px) {
			font-size: calc((18 / 390) * 100vw);
			.obj-baloon {
				width: calc((80 / 390) * 100vw);
				left: calc((-20 / 390) * 100vw);
				top: calc((-15 / 390) * 100vw);
			}
		}
	}
	.c-text {
		padding: .8em 1em;
		background: #fff;
		font-size: 1.1em;
		> *+* {
			margin-top: .64em;
		}
		@media(max-width: 767px) {
			font-size: calc((14 / 390) * 100vw);
		}
	}
	&.-credit {
		background: #0086d1;
	}
}

.-marker {
	background: linear-gradient(transparent 70%, #F09491 70%, #F09491 95%, transparent 95%);
}

.is-w1000 {
	@media(min-width: 768px) {
		width: 1000px;
		margin: 0 auto;
	}
	@media(max-width: 767px) {
		margin: 0 15px;
	}
}
.hl-procedure {
	text-align: center;
	margin-bottom: 4em;
	img {
		width: 480px;
		height: auto;
	}
	@media(max-width: 767px) {
		img {
			width: 72%;
		}
		margin-bottom: 1em;
	}
}
.l-sec-flow {
	padding: 2.4em 0;
	background: #dbf4f9;
	h2 {
		margin-bottom: 1.6em;
	}
	*+p {
		margin-top: 2em;
	}
	@media(max-width: 767px) {
		img {
			width: 100%;
			height: auto;
		}
	}
}
.p-grid-procedure {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.6em;
	@media(max-width: 767px) {
		grid-template-columns: auto;
		gap: .8em;
	}
}
.p-grid-procedure__item {
	background: #fff;
	border-radius: 1em;
	font-weight: bold;
	padding: 2.2em 0 1em;
	position: relative;
	@media screen and (min-width: 768px) {
		&:not(.-wide) {
			text-align: center;
			.c-icon {
				position: absolute;
				top: -44px;
				left: 50%;
				translate: -50% 0;
			}
		}			
	}
	h4 {
		font-size: 2.2em;
		color:#595757;
		line-height: 1.25;
		@media(min-width: 768px) {
			font-feature-settings: "palt";
		}
		@media(max-width: 767px) {
			font-size: calc((18 / 390) * 100vw);
			.-marker {
				font-size: 1.1em;
			}
		}
	}
	p {
		font-size: 1.2em;
		line-height: 1.4;
		*+& {
			margin-top: .64em;
		}
		@media(max-width: 767px) {
			font-size: calc((13 / 390) * 100vw);
			br {
				display: none;
			}
		}
	}
	&.-wide {
		align-items: flex-start;	
		div {
			padding-right: 11em;
		}
		@media(min-width: 768px) {
			margin-top: 3.6em;
			display: flex;
			gap: 2.5em;
			padding-left: 2.4em;
			h4 {
				letter-spacing: .05em;
			}	
		}
		.c-obj {
			position: absolute;
			right: 2em;
			top: 50%;
			translate: 0 -50%;
		}
	}
	@media(max-width: 767px) {
		display: flex;
		gap: 1em;
		padding: 1em;
		.c-icon {
			width: calc((40 / 390) * 100vw);
		}
		&.-wide {
			margin-top: .8em;
			div {
				padding-right: 0;
			}
			.c-obj {
				display: none;
			}
		}
	}
}

.w-procedure {
	position: relative;
	overflow: clip;
	padding: 30px 0 4em;
	margin: -10px auto 0;
	&::before {
		content: '';
		display: block;
		width: 2800px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		background: #4ac9e3;
		position: absolute;
		z-index: -1;
		left: 50%;
		translate: -50% 0;
		top: 0;
		@media(max-width: 767px) {
			width: calc((1200 / 390) * 100vw);
		}
	}
	@media(max-width: 767px) {
		padding: 1.6em 0 2em;
	}
}
.c-blk-btn {
	margin: 2.4em 0;
	text-align: center;
}
.c-btn-border {
	display: inline-flex;
	border: 1px solid #0086d1;
	border-radius: 4px;
	color: #0086d1;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.6em;
	padding: .5em 1em;
	transition: .3s background, .3s color;
	span {
		display: flex;
		gap: 1em;
		&::after {
			content: '';
			display: block;
			width: .9em;
			aspect-ratio: 1/1;
			transition: .3s background-image;
			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%22%230086d1%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
			background-size: contain;
			@media(max-width: 767px) {
				width: 1.2em;
			}			
		}
	}
	@media(hover:hover) {
		&:hover {
			background: #0086d1;
			color: #fff;
			span {
				&::after {
					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%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');
				}
			}
		}
	}
	&.-pink {
		color: #bf4da4;
		border-color: #bf4da4;
		span {
			&::after {
				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%22%23bf4da4%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');				
			}
		}
		@media(hover:hover) {
			&:hover {
				background: #bf4da4;
				color: #fff;
				span {
					&::after {
						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%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E');
					}
				}
			}
		}
	}
	@media(max-width: 767px) {
		font-size: calc((16 / 390) * 100vw);
		padding: .6em .8em;
		text-align: left;
		line-height: 1.2;
	}
}
.c-btn-block {
	display: inline-flex;
	border-radius: 4px;
	align-items: center;
	text-decoration: none;
	font-size: 1.5em;
	padding: 1em 1em;
	color: #fff;
	font-weight: bold;
	transition: .3s background;
	> span {
		display: flex;
		align-items: center;
		gap:.64em;
		&::before {
			content: '';
			display: block;
			width: 1.2em;
			aspect-ratio: 1/1;
			background-size: contain;
		}
		&::after {
			content: '';
			display: block;
			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%22%23fff%22%20stroke-width%3D%222%22%20class%3D%22ai%20ai-CircleChevronRightFill%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C5.925%201%201%205.925%201%2012s4.925%2011%2011%2011%2011-4.925%2011-11S18.075%201%2012%201zM9.793%208.707a1%201%200%200%201%201.414-1.414l4%204a1%201%200%200%201%200%201.414l-4%204a1%201%200%200%201-1.414-1.414L13.086%2012%209.793%208.707z%22%2F%3E%3C%2Fsvg%3E')50% 50% no-repeat;
			background-size: contain;
		}
	}
	&.-application {
		background: #0084cf;
		span {
			&::before {
				background: url('/banner/hng/sw/img/icon_application.svg') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		@media(hover:hover) {
			&:hover {
				background: #127cb9;
			}
		}		
	}
	&.-exchange {
		background: #0084cf;
		span {
			&::before {
				background: url('/banner/hng/sw/img/icon_change.svg') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		@media(hover:hover) {
			&:hover {
				background: #127cb9;
			}
		}		
	}	
	&.-simulation {
		background: #f08c88;
		span {
			&::before {
				background: url('/banner/hng/sw/img/icon_simulation.svg') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		@media(hover:hover) {
			&:hover {
				background: #c4716e;
			}
		}
	}
	&.-moving {
		background: #4fbfd3;
		span {
			&::before {
				background: url('/banner/hng/sw/img/icon_house.svg') 50% 50% no-repeat;
				background-size: contain;
			}
		}
		@media(hover:hover) {
			&:hover {
				background: #2f96a8;
			}
		}
	}
	&.-small {
		font-size: 1.2em;
		padding: .4em .8em;
		span {
			gap: 0;
			&::before {
				margin-right: .64em;
			}			
			&::after {
				display: none;
			}
		}
		.-freedial {
			margin-left: .5em;
			display: flex;
			gap: 0;
			align-items: center;
			&::before {
				content: '';
				display: block;
				width: 2em;
				height: auto;	
				aspect-ratio: 7/4;
				background: url('/banner/hng/sw/img/icon_freedial.webp') 50% 50% no-repeat;
				background-size: contain;
				margin-right: .5em;
			}
			span {
				@media (max-width:1200px) {
					display: none;
				}				
				&::before {
					display: none;
				}
			}
		}
		@media(max-width: 767px) {
			font-size: 12px;
			line-height: 1.1;
			padding: .5em;
			span {
				&::before {
					width: 1.2em;
				}
			}
		}
	}
	@media(max-width: 767px) {
		font-size: calc((16 / 390) * 100vw);
		padding: 1em;
		span {
			&::before {
				width: 1.2em;
			}
			&::after {
				width: 1.2em;
			}
		}
	}
	.p-grid-half & {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
	}
}
#panel2 {
	.hl-price_table {
		text-align: center;
		background-color: #bf4da4;
		margin-bottom: 1em;
		@media(max-width: 767px) {
			margin-bottom: 1em;
			img {
				width: 72%!important;
			}
		}
	}
	.is-center {
		text-align: center;
		margin: 1em auto;
	}
	.p-grid-half {	
		gap: 0;
		align-items: end;
		margin: 0 auto;
		gap: 1em;
		figure:nth-of-type(2) {
			text-align: right;
		}
		@media(max-width: 767px) {
			margin-top: 1em;
			gap: 0;
		}
		@media(min-width: 768px) {
		}
	}
	*+& {
		margin-top: 2em;
		@media(max-width: 767px) {
			margin-top: 1em;
		}
	}
}



.c-list-checkbox {
	li {
		display: flex;
		gap: .25em;
		align-items: flex-start;
		&::before {
			content: '';
			display: block;
			width: 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%20viewBox%3D%220%200%2048%2048%22%3E%3Ctitle%3E849_ch_f%3C%2Ftitle%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22none%22%2F%3E%3Cpolyline%20points%3D%2219.37%2019.53%2023.92%2024.08%2034%2014%22%20fill%3D%22none%22%20stroke%3D%22%23bf4da4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%2F%3E%3Cpolyline%20points%3D%2236%2020%2036%2036%2012%2036%2012%2012%2028%2012%22%20fill%3D%22none%22%20stroke%3D%22%23bf4da4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
			background-size: 120%;
			position: relative;
			top: .2em;
		}
		span {
			flex:1;
		}
		*+& {
			margin-top: .5em;
		}
	}
}
.p-list-anchor {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3.2em;
	li {
		width: calc((100% - 3.2em * 3) / 4);
		a {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			aspect-ratio: 140 /111;
			font-size: 2.2em;
			font-weight: bold;
			color: #0084cf;
			text-decoration: none;
			line-height: 1.2;
			background: url('/banner/hng/sw/img/bg_anchor.svg') 50% 50% no-repeat;
			background-size: cover;
			transition: .3s opacity;
			> span {
				display: inline-block;
				padding-bottom: .6em;
			}
			@media(hover:hover) {
				&:hover {
					opacity: .6;
				}
			}
		}
	}
	@media(max-width: 767px) {
		gap: 1em;
		width: 96%;
		margin: 0 auto;
		li {
			width: calc((100% - 1em * 3) / 3);
			a {
				font-size: calc((17 / 390) * 100vw);
			}
		}
	}
}

.sec01-plan {
	@media(max-width: 767px) {
		h3 {
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	&:nth-of-type(2) {
		@media(min-width: 768px) {
			.c-gp__s.-indent {
				max-width: 720px; 
				margin: 1em auto 0; 
				position: relative; left:3em
			}
		}
	}
}

#sec02 {
	.l-hero-sub {
		text-align: center;
		position: relative; z-index: -1; 
		@media(max-width: 767px) {
			img {
				width: 100%;
				height: auto;
			}
		}
	}
}

.accordion {
	border-radius: 4px;
	border: 2px solid #0086d1;
	padding: 0 0 1.2em 0;
	margin: 0 auto 2em;
	figure {
		margin-bottom: 1.2em;
		text-align: center;
		img {
			width: 100%;
			max-width: 720px;
			height: auto;
		}
	}
	ul {
		margin-bottom: 1.2em;
		font-size: 13px;
	}
	#panel2 &,
	#panel3 & {
		max-width: none;
		border-color: #bf4da4;
		strong {
			color: #bf4da4;
			span i::after {
				background: #bf4da4;
			}
			span i::before {
				background: #bf4da4;
			}
		}
	}
	#panel3 & {
		margin: 1em auto 0;
		border-color: transparent;
		strong {
			padding: 0;
			text-align: center;
		}
		strong span {
			display: inline-block;
		}
	}
}
.accordion .l-article {
	overflow: hidden;
}
.accordion strong {
	display: block;
	cursor: pointer;
	position: relative;
	padding: 18px 0 0 0;
	text-align: center;
	color: #0086d1;
	font-family: 'AxisProN-Medium';
	font-size: 1.5em;
	font-weight: bold;
}
.accordion strong span {
	position: relative;
    padding: 0 34px 0 0;
    box-sizing: border-box;
	display: inline-block;
    margin: auto;
}
.accordion strong span i {
	position: absolute;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-left: 20px;
	right: 0;
	top: calc(50% - 8px);
}
.accordion strong span i:after {
	content: '';
	display: block;
	width: 2px;
	height: 16px;
	background: #0086d1;
	position: absolute;
	left: 7px;
	top: 0;
}
.accordion strong span i:before {
	content: '';
	height: 2px;
	width: 16px;
	background: #0086d1;
	position: absolute;
	left: 0px;
	top: 7px;
	display: block;
}
.accordion strong.is-active span i:after {
	display: none;
}
.accordion_more {
	padding: 24px 30px 0 30px;
}
.accordionwrap {}

.js-scrollable{
	margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
	.accordion {
		padding: 0 0 15px 0;
		margin-bottom: 13px;
	}
	.accordion strong {
		padding: 15px 0 0 0;
		font-size: 15px;
		text-align: left;
	}
	.accordion strong span {
		padding-right: 26px;
		max-width: 90%;
		display: block;
    	margin: auto;
	}
	.accordion strong span i {
		width: 12px;
		height: 12px;
		margin-left: 20px;
		top: calc(50% - 6px);
	}
	.accordion strong span i:after {
		width: 2px;
		height: 12px;
		left: 5px;
		top: 0;
	}
	.accordion strong span i:before {
		height: 2px;
		width: 12px;
		left: 0px;
		top: 5px;
	}
	.accordion_more {
		padding: 20px 15px 0 15px;
	}
	.js-scrollable {
		position: relative;
		overflow-x: auto;
		margin-bottom: 2em;
	}
	.js-scrollable table {
		width: max-content;
		max-width: 1200px;
		margin-bottom: 0;
	}
	/* .accordion .l-article .js-scrollable {
		width: 283px;
	} */
    .scroll-hint-icon {
        top: 16vw;
        padding: 0;
        width: 95px;
        height: 97px;
        background: url(/sw/hng/common/img/scroll_hint.png) center bottom / cover no-repeat;
		left: calc(50% - 48px);
		&::before,
		&::after {
			display: none;
		}
    }
    .scroll-hint-text {
        display: none;
    }	
	.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
        opacity: 1;
    }	
}

.table_cell {
	width: 100%;
	font-size: 13px;
}
.table_cell td,
.table_cell th {
	padding: 1.2em 1em;
	border: 1px solid #e5e5e5;
	vertical-align: middle;
}
.table_cell td.-graycell,
.table_cell th.-graycell {
	background: #f2f2f2;
}
.table_cell td.-bluecell,
.table_cell th.-bluecell {
	background: #0086d1;
	color: #fff;
}
.table_cell td.-lightbluecell,
.table_cell th.-lightbluecell {
	background: #cfe3f6;
}
.table_cell td.-pinkcell,
.table_cell th.-pinkcell {
	background: #bf4da5;
	color: #fff;
}
.table_cell td.-lightpinkcell,
.table_cell th.-lightpinkcell {
	background: #f4d7ed;
}
.table_cell td.-blackcell,
.table_cell th.-blackcell {
	background: #646464;
	color: #fff;
}
.table_cell td:first-child,
.table_cell th:first-child {
	max-width: 204px;
}
.table_cell th {
	font-weight: 600;
	background: #f2f2f2;
}
.table_cell .-bgwhite {
	background: #fff;
}
.table_cell ul:not([class]):last-child {
	margin-bottom: 0;
}

.u-aC {
    text-align: center;
}

ul.-note > li {
    padding-left: 1.5em;
    position: relative;
    line-height: 1.3;
    margin-bottom: 6px;
}
ul.-note > li::before {
    position: absolute;
    left: 0;
    content: '※';
    display: block;
    top: 0.2em;
}

.hl-price_table {
	font-size: 1.6em;
	background: #0C9B87;
	border-radius: 8px;
	color: #fff;
	padding: .5em 0;
	text-align: center;
	font-weight: bold;
	#panel1 & {
		max-width: 720px;
		margin: 0 auto .25em;
	}
	@media(max-width: 767px) {
		font-size: calc((17 / 390) * 100vw);
	}
}

.hl-price_table-sub {
	font-size: 1.6em;
	margin: 1em auto .5em;
	text-align: center;
	font-weight: bold;
	@media(max-width: 767px) {
		font-size: calc((16 / 390) * 100vw);
	}
}