@charset "utf-8";
/*--------------------------------------------
	memberRegist.common.css
	会員登録系 共通CSS
--------------------------------------------*/
/* レイアウト */
.topGroupName {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px) {
	.topGroupName {
		position: relative;
		padding-top: 70px;
	}
	.titleItemWrap {
		& .level_h1 {
			margin: 0;
			width: 100%;
			position: absolute;
			top: 0;
		}
	}
}
/* フロー */
[class*="ProgressBar" i] .stepFlow {
		display: flex;
		justify-content: center;
		font-size: var(--font-size-ss);
		font-weight: bold;
	text-align: center;
	padding: 0 var(--screen-pd-lr);
	& div, & p {
		font-weight: bold;
		line-height: 1.3;
	}
	& p {
		color: #666565;
		& span {
			font-weight: inherit;
			display: inline-block;
		}
	}
}
@media screen and (min-width: 768px) {
	[class*="ProgressBar" i] .stepFlow {
		gap: 0 28px;
		margin-bottom: 30px;		
		& li {
			width: 162px;
			position: relative;
			&:not(:last-child) {
				&:after {
					content: "▼";
					display: inline-block;
					transform: rotate(-90deg) translateY(-50%);
					scale: 0.8 1;
					font-size: 13px;
					color: #777;
					line-height: 0;
					position: absolute;
					top: 50%;
					right: -20px;
				}
			}
			& div {
				background-color: #c0c1c2;
				color: #fff;
				line-height: 1;
				padding: 5px 2px;
			}
			& p {
				background-color: #fff;
				border: 3px solid #c0c1c2;
				border-top: none;				
				padding: 9px 2px 8px;
			}
		}
		& .current {
			& div {
				background-color: var(--color-corporate);
			}
			& p {
				background-color: #8496ce;
				border-color: #8496ce;
				color: #fff;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	[class*="ProgressBar"i] .stepFlow {
		gap: 0 10px;
		margin-bottom: 15px;
		& li {
			border: 1px solid var(--color-corporate);
			border-radius: 2px;
			flex: 1 0 0%;
			position: relative;
			& div {
				display: none;
			}
			& p {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 44px;
			}
			&.current {
				background-color: #a6e0ff;
				color: var(--text-color-accent);
				border-right: 0;
				margin-right: 12px;
				z-index: 1;
				&::after {
					content: "";
					display: inline-block;
					position: absolute;
					background: url("../../img/common/member_register/bg_001.gif") no-repeat left center / contain;
					width: 18px;
					height: 44px;
					top: 0;
					right: -17px;
				}
				&:last-child {
					border-right: 1px solid var(--color-corporate);
					margin-right: 0;
					&::after {
						content: none;
					}
				}
			}
		}
	}
}

/* 完了メッセージ */
.completeMessageItemWrap {
	font-size: var(--font-size-s);
	& p {
		margin-bottom: 0;
	}
	& .messageTop {
		font-weight: bold;
	}
	& .messageAttention {
		color: var(--text-color-alert);
	}
}
@media screen and (max-width: 767px) {
	.completeMessageItemWrap, .errorGroup, .messageGroup {
		margin-top: 20px;
	}
}

@media screen and (max-width: 960px) {
	.completeMessageItemWrap {
		padding: 0 var(--screen-pd-lr);
	}
}