.l-support__users {}
.l-support__users__header {
	background-color: #1366A1;
}
.l-support__users__header__inner {
	display: flex;
}
.l-support__users__header__title {
		font-style: normal;
		font-weight: 700;
		line-height: 150%;
}
.l-support__users__header__explain {
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.l-support__users__footer {
	background-color: #1366A1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.l-support__users__header__title {
	color: #FFF;
}
.l-support__users__header__explain {
	color: #FFF;
}
.l-support__users__main__nav__list {
	display: flex;
	justify-content: center;
	align-items: center;
}
.l-support__users__main__nav__item {
	background-color: #1D4383;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(2, 98, 165, 0.20);
	position: relative;
	width: 100%;
	text-align: center;
}
.l-support__users__main__nav__item:hover {
	opacity: 0.6;
}
.l-support__users__main__nav__item:before,
.l-support__users__main__nav__item:after {
	content: '';
	position: absolute;
	transition: all 0.3s ease-in-out;
}
.l-support__users__main__nav__item:before {
	background-size: contain;
}
.l-support__users__main__nav__item:nth-child(1):before {
	background-image: url('https://tp-img.imgix.net/s/support/users/heading01.svg');
}
.l-support__users__main__nav__item:nth-child(2):before {
	background-image: url('https://tp-img.imgix.net/s/support/users/heading02.svg');
}
.l-support__users__main__nav__item:nth-child(3):before {
	background-image: url('https://tp-img.imgix.net/s/support/users/heading03.svg');
}
.l-support__users__main__nav__item:after {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.l-support__users__main__nav__item__link {
	color: #FFF;
	display: block;
	padding: 10px;
}

.l-support__users__main__section__heading__wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
.l-support__users__contents--login__case {
	background-color: #FFF;
	border-radius: 20px;
	position: relative;
}

.l-support__users__main__section__heading__txt {
	color: #222;
	text-align: center;
	font-style: normal;
	font-weight: 700;
}
.l-support__users__main__section__explain {
	color: #222;
	text-align: center;
	font-size: var(--16px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-top: 15px;
}
.l-support__users__contents--login__case__heading {
	color: #CE1E54;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding-left: 11px;
	position: relative;
}
.l-support__users__contents--login__case__heading:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 3px;
	background-color: #CE1E54;
}
.l-support__users__contents--login__case__explain {
	color: #454545;
	font-size: var(--16px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}
.l-support__users__contents__caution {
	color: #454545;
	font-size: var(--12px);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.l-support__users__main__section__inner_contents {
	border-radius: 20px;
	background: #F0F4FC;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.l-support__users__main__section__inner__tag {
	position: absolute;
	background-color: #1D4383;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
.l-support__users__main__section__inner__tag__txt {
	color: #FFF;
	font-style: normal;
	font-weight: 700;
	text-align: center;
}
.l-support__users__main__section__inner__tag__txt:nth-child(1) {
	border-bottom: solid 1px #FFF;
}
.l-support__users__contents--how-to-use__contents__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}
.l-support__users__main__section__inner_heading {
	color: #222;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	padding-bottom: 4px;
	border-bottom: solid 3px #1D4383;
}
.l-support__users__contents--how-to-use__contents__txt__heading {
	color: #CE1E54;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}
.l-support__users__contents--how-to-use__contents__txt__explain {
	color: #222;
	font-size: var(--16px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-top: 10px;
}
.l-support__users__contents--how-to-use__contents__txt__caution {
	color: #454545;
	font-size: var(--12px);
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-top: 10px;
}
.l-support__users__contents--how-to-use__contents__cases {
	display: grid;
width: 100%;
}
.l-support__users__contents--how-to-use__contents__case {
background: #FFF;
box-shadow: 0 0 10px 0 rgba(19, 102, 161, 0.10);
}
.l-support__users__contents--how-to-use__contents__case__heading {
background: #1366A1;
color: #FFF;
text-align: center;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
}
.l-support__users__contents--how-to-use__contents__case__heading:after {
	content: '';
	position: absolute;
	clip-path: polygon(15% 0%, 60% 0, 0% 100%);
	background-color: #1366A1;
	height: 19px;
	width: 48px;
	left: 50%;
	transform: translate(-10px, 0%);
	bottom: -12px;
}
.l-support__users__contents--how-to-use__contents__case__body {
	color: #1366A1;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	border: 1px solid #1366A1;
}

.l-support__users__main__section__inner_contents__list {
	display: grid;
}
.l-support__users__main__section__inner_contents__item {
	border-radius: 20px;
	background: #FFF;
	box-shadow: 0 0 10px 0 rgba(19, 102, 161, 0.10);
	color: #1366A1;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.l-support__users__main__section__inner_contents__item__small {
	font-weight: 500;
	color: #1366A1;
}
.l-support__users__main__section__inner_contents__item__link {
	display: block;
	color: #1366A1;
	font-weight: 700;
	position: relative;
}
.l-support__users__main__section__inner_contents__item__link:before {
	content: '';
	position: absolute;
	border-radius: 50%;
	background-color: #1366A1;
}
.l-support__users__main__section__inner_contents__note {
	border: 2px solid #CE1E54;
	background: #FFF7F7;
	color: #222;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	font-size: var(--16px);
	font-weight: 400;

}
.l-support__users__main__section__inner_contents__note em {
	color: #CE1E54;
	font-weight: 700;
}
.l-support__users__contents--contact__contents__wrapper {
	display: grid;
	grid-template-rows: 1fr;
}
.l-support__users__contents--contact__contents {
	background: #FFF;
	box-shadow: 0 0 10px 0 rgba(19, 102, 161, 0.15);
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}
.l-support__users__contents--contact__contents:nth-child(1) .l-support__users__contents--contact__contents__body {
	background-image: url('https://tp-img.imgix.net/s/support/users/icon_contact01.svg');
	background-repeat: no-repeat;
	background-position: 90% 70%;
	background-size: 116px;
}
.l-support__users__contents--contact__contents:nth-child(2) .l-support__users__contents--contact__contents__body{
	background-image: url('https://tp-img.imgix.net/s/support/users/icon_contact02.svg');
	background-repeat: no-repeat;
	background-position: 90% 70%;
	background-size: 116px;
}

.l-support__users__contents--contact__contents__heading {
	background: #1366A1;
	color: #FFF;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	width: 100%;
	text-align: center;
}
.l-support__users__contents--contact__contents__body {
	color: #454545;
	text-align: center;
	font-style: normal;
	font-weight: 500;
	line-height: 170%;
	width: 100%;
}
.l-support__users__contents--contact__contents__body em {
	color: #CE1E54;
	font-weight: 700;
}
.l-support__users__contents--contact .l-support__users__main__section__inner_contents {
	background-color: #FFF;
}

.l-support_users__footer__link {
	color: #FFF;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration: underline;
}
.l-support__users__footer__copyright {
	color: rgba(255, 255, 255, 0.40);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
.l-support__users__main__section:nth-child(even) {
	background-color: #F0F4FC;
}
.l-support__users__main__section:nth-child(odd) {
	background-color: #FFF;
}

/* PC */
@media screen and (min-width: 767px) {
	.vSP {
		display: none;
	}
	.vPC {
		display: block;
	}

	.l-support__users__header__inner {
		justify-content: center;
		align-items: center;
		padding: 54px 0;
	}
	.l-support__users__header__logo__img {
		width: 253px;
		padding-right: 60px;
	}
	.l-support__users__header__title_wrapper {
		border-left: solid 1px #FFF;
		padding-left: 60px;
	}
	.l-support__users__header__title {
		font-size: var(--30px);
	}
	.l-support__users__header__explain {
		font-size: var(--20px);
		margin-top: 8px;
	}
	.l-support__users__main__nav {
		max-width: 1200px;
		margin: 151px auto 90px;;
	}
	.l-support__users__main__nav__list {
		gap: 5%;
	}
	.l-support__users__main__nav__item:before {
		width: 155px;
		height: 86px;
		top: -86px;
		left: 50%;
		transform: translateX(-50%);
	}
	.l-support__users__main__nav__item:after {
		background-color: #CE1E54;
		height: 19px;
		width: 48px;
		left: 50%;
		transform: translateX(-50%);
		bottom: -30px;
	}
	.l-support__users__main__section__explain {
		margin-bottom: 40px;
	}

	.l-support__users__main__section__heading__wrapper {
		gap: 54px;
	}
	.l-support__users__contents--login__case__wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr) 0fr;
		gap: 30px;
	}
	.l-support__users__contents--login__case {
		padding: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
	}
	.l-support__users__contents--login__case:nth-child(1) {
		grid-area: 1 / 1 / 2 / 3;
	}
	.l-support__users__contents--login__case:nth-child(1):after {
		bottom: 0;
		right: 77px;
		width: 426px;
		height: 182px;
	}
	.l-support__users__contents--login__case:nth-child(2) {
		grid-area: 2 / 1 / 3 / 2;
	}
	.l-support__users__contents--login__case:nth-child(3) {
		grid-area: 2 / 2 / 2 / 3;
	}
	.l-support__users__contents__caution {
		grid-area: 3 / 1 / 4 / 3;
	}
	img.l-support__users__main__section__heading__icon {
		width: 155px;
	}
	.l-support__users__main__section__heading__txt {
		font-size: var(--30px);
	}
	.l-support__users__contents--login__case__img {
		width: 428px;
		position: absolute;
		right: 77px;
		bottom: 0;
	}
	.l-support__users__contents--login__case__heading {
		font-size: var(--24px);
	}
	.l-support__users__contents--login__case__heading:before {
		height: 25px;
	}
	.l-support__users__main__section__wrapper {
		max-width: 1200px;
		margin: auto;
		padding: 50px 0 70px;
	}
	.l-support__users__contents--how-to-use picture {
		display: flex;
		width: 830px;
		margin: auto;
	}
	.l-support__users__main__section__inner_contents {
		gap: 40px;
		padding: 50px 60px;
	}
	.l-support__users__main__section__inner_contents + .l-support__users__main__section__inner_contents {
		margin-top: 40px;
	}
	.l-support__users__main__section__inner__tag {
		width: 202px;
		height: 202px;
		top: -40px;
		right: -20px;
		padding-top: 30px;
	}
	.l-support__users__main__section__inner__tag__txt {
		font-size: var(--20px);
		line-height: 36px;
	}
	.l-support__users__contents--how-to-use__contents__wrapper {
		gap: 60px;
	}
	.l-support__users__main__section__inner_heading {
		font-size: var(--28px);
	}
	.l-support__users__contents--how-to-use__contents__img {
		max-width: 510px;
	}
	.l-support__users__contents--how-to-use__contents__txt__heading {
		font-size: var(--24px);
	}
	.l-support__users__contents--how-to-use__contents__cases {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 6%;
		margin-top: 20px;
	}
	.l-support__users__contents--how-to-use__contents__case {
		border-radius: 16px;
		padding: 20px;
		position: relative;
		gap: 10px;
		display: flex;
		flex-direction: column;
	}

	.l-support__users__contents--how-to-use__contents__case + .l-support__users__contents--how-to-use__contents__case:before {
		content: '';
		position: absolute;
		top: 0;
		left: -10%;
		width: 1px;
		height: 100%;
		background-color: #FFF;
	}
	.l-support__users__contents--how-to-use__contents__case__heading {
		border-radius: 86px;
		font-size: var(--16px);
		padding: 8px;
		margin-bottom: -40px;
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(-50px);
	}
	.l-support__users__contents--how-to-use__contents__case__body {
		font-size: var(--16px);
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-support__users__main__section__inner_contents__list {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 45px;
		grid-row-gap: 30px;
		width: 100%;
		padding: 0 30px;
	}
	.l-support__users__main__section__inner_contents__item {
		font-size: var(--18px);
		padding: 34px 10%;
	}
	.l-support__users__main__section__inner_contents__item:has(> .l-support__users__main__section__inner_contents__item__link) {
		padding: 0;
	}
	.l-support__users__main__section__inner_contents__item__link {
		padding: 34px 10% 60px;
	}
	.l-support__users__main__section__inner_contents__note {
		border-radius: 16px;
		width: 100%;
		max-width: 1020px;
		padding: 24px;
		text-align: center;
	}
	.l-support__users__contents--contact__contents__wrapper {
		gap: 10%;
		max-width: 1000px;
		grid-template-columns: repeat(2, 1fr);
	}
	.l-support__users__contents--contact__contents {
		border-radius: 20px;
	}
	.l-support__users__contents--contact__contents:nth-child(1) .l-support__users__contents--contact__contents__body{
		background-position: 90% 70%;
		background-size: 116px;
	}
	.l-support__users__contents--contact__contents:nth-child(2) .l-support__users__contents--contact__contents__body{
		background-position: 90% 70%;
		background-size: 116px;
	}

	.l-support__users__contents--contact__contents__heading {
		font-size: var(--20px);
		padding: 18px;
	}
	.l-support__users__contents--contact__contents__body {
		font-size: var(--16px);
		padding: 36px 16px;
	}
	.l-support__users__contents--contact__contents__body em {
		font-size: var(--18px);
	}
	.l-support__users__footer {
		padding: 30px 0 25px;
	}
	.l-support_users__footer__link {
		font-size: var(--16px);
	}
	.l-support__users__footer__copyright {
		font-size: var(--12px);
		margin-top: 50px;
	}
	.l-support__users__main__section__inner_contents__item__link:before {
		width: 22px;
		height: 22px;
		bottom: 35px;
		left: 50%;
		transform: translateX(-50%);

	}
	.l-support__users__main__section__inner_contents__item__link:after {
		content: '';
		position: absolute;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		width: 6px;
		height: 6px;
		bottom: 40px;
		left: 50%;
		transform: rotate(45deg) translateX(-50%);
		margin-left: -2px;
	}
}

/* SP */
@media screen and (max-width: 768px) {
	.vSP {
		display: block;
	}
	.vPC {
		display: none;
	}
	.l-support__users__header__inner {
		flex-direction: column;
		align-items: center;
		padding: 4vw 2%;
	}
	.l-support__users__header__logo {
		max-width: 50%;
	}
	.l-support__users__header__title {
		font-size: var(--18px);
		text-align: center;
		margin-top: 2.5vw;
	}
	.l-support__users__header__explain {
		font-size: var(--16px);
		margin-top: 2.5vw;
	}
	.l-support__users__main__nav__list {
		flex-direction: column;
		gap: 4vw;
		margin: 7vw 4%;
	}
	.l-support__users__main__nav__item:before {
		width: 64px;
		height: 35px;
		top: 50%;
		left: 6px;
		transform: translateY(-50%);
	}
	.l-support__users__main__nav__item:after {
		background-color: #fff;
		height: 18px;
		width: 18px;
		top: 50%;
		right: 10px;
		transform: translateX(-50%);
		clip-path: polygon(0 0, 100% 0, 50% 50%);
	}
	.l-support__users__main__nav__item__link {
		padding-left: 20px;
	}

	.l-support__users__main__section__wrapper {
		padding: 15vw 4%;
	}
	.l-support__users__main__section__heading__wrapper {
		flex-direction: column;
	}
	img.l-support__users__main__section__heading__icon {
		width: 40%;
	}
	.l-support__users__main__section__heading__txt {
		font-size: var(--22px);
		margin-top: 2vw;
	}
	.l-support__users__main__section__explain {
		margin-bottom: 30px;
	}
	.l-support__users__contents--how-to-use picture {
		margin-bottom: 8vw;
		display: block;
	}

	.l-support__users__contents--login__case {
		padding: 16px;
		gap: 8px;
	}
	.l-support__users__contents--login__case + .l-support__users__contents--login__case {
		margin-top: 4vw;
	}

	.l-support__users__contents--login__case__heading {
		font-size: var(--18px);
	}
	.l-support__users__contents--login__case__heading:before {
		height: 19px;
	}
	.l-support__users__contents--login__case__img {
		margin: 4vw auto -16px;
		width: 90%;
		display: block;
	}
	.l-support__users__contents--login__case__explain {
		margin-top: 8px;
	}
	.l-support__users__contents__caution {
		margin-top: 20px;
	}

	.l-support__users__main__section__inner_contents {
		padding: 10vw 4% 10vw;
	}
	.l-support__users__main__section__inner_contents + .l-support__users__main__section__inner_contents {
		margin-top: 6vw;
	}
	.l-support__users__main__section__inner__tag {
		width: 118px;
		height: 118px;
		top: -25px;
		right: -30px;
		padding: 22px 26px 0 0;
	}
	.l-support__users__main__section__inner__tag__txt {
		font-size: var(--11px);
		line-height: 20px;
	}
	.l-support__users__contents--how-to-use__contents__cases {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 1fr);
		grid-row-gap: 40px;
		margin-top: 50px;
	}
	.l-support__users__contents--how-to-use__contents__case {
		border-radius: 10px;
		padding: 16px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.l-support__users__contents--how-to-use__contents__case__heading {
		border-radius: 46px;
		font-size: var(--14px);
		padding: 10px 0;
		width: 80%;
		transform: translateY(-40px);
	}
	.l-support__users__contents--how-to-use__contents__case__body {
		font-size: var(--14px);
		width: calc(50% - 10px);
		margin-top: -32px;
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.l-support__users__contents--how-to-use__contents__case:nth-child(3) .l-support__users__contents--how-to-use__contents__case__body:last-child {
		width: 100%;
	}
	.l-support__users__main__section__inner_contents__list {
		gap: 4vw;
		width: 100%;
		margin-top: 8vw;
	}
	.l-support__users__main__section__inner_heading {
		font-size: var(--20px);
	}
	.l-support__users__contents--how-to-use__contents__wrapper {
		flex-direction: column;
		gap: 4vw;
		margin-top: 8vw;
	}
	.l-support__users__contents--how-to-use__contents__img {
		width: 90%;
	}
	.l-support__users__contents--how-to-use__contents__txt__heading {
		font-size: var(--18px);
	}
	.l-support__users__main__section__inner_contents__item {
		font-size: var(--16px);
		padding: 16px 0;
	}
	.l-support__users__main__section__inner_contents__item__link {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.l-support__users__main__section__inner_contents__item__link .icon-arrow {
		display: inline-block;
		width: 19px;
		height: 19px;
		background: #1366A1;
		border-radius: 50%;
		margin-left: 6px;
		position: relative;
	}
	.l-support__users__main__section__inner_contents__item__link .icon-arrow:after {
		content: '';
		position: absolute;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		width: 6px;
		height: 6px;
		top: 50%;
		right: 10px;
		transform: rotate(45deg) translateY(-50%);
		margin-top: -1px;
	}
	.l-support__users__main__section__inner_contents__note {
		border-radius: 10px;
		margin: 40px auto 0;
		padding: 24px;
		text-align: center;
	}
	.l-support__users__contents--contact__contents {
		border-radius: 10px;
	}
	.l-support__users__contents--contact__contents:nth-child(1) .l-support__users__contents--contact__contents__body {
		background-position: 90% 70%;
		background-size: 86px;
	}
	.l-support__users__contents--contact__contents:nth-child(2) .l-support__users__contents--contact__contents__body {
		background-position: 90% 70%;
		background-size: 86px;
	}

	.l-support__users__contents--contact__contents__wrapper {
		gap: 4vw;
		margin-top: 8vw;
	}
	.l-support__users__contents--contact__contents__heading {
		font-size: var(--16px);
		padding: 3vw;
	}
	.l-support__users__contents--contact__contents__body {
		font-size: var(--14px);
		padding: 4vw;
	}
	.l-support__users__footer {
		padding: 10vw 0 6vw;
	}
	.l-support_users__footer__link {
		font-size: var(--14px);
	}
	.l-support__users__footer__copyright {
		font-size: var(--10px);
		margin-top: 10vw;
	}

}