@charset "UTF-8";




/* login-area */
#login-area {
	padding: 60px 0 120px 0
}
	#login-area .contents {
		border-radius: 12px;
		padding-top: 50px;
	}
		#login-area .contents .pagetitle {
			text-align: center;
			padding: 0 130px;
		}
			#login-area .contents .pagetitle h1 {
				font-size: 2.8rem;
				font-weight: 700;
				text-align: center;
				line-height: 1.3em;
			}
			#login-area .contents .pagetitle h1.thema-color-tit-border {
				padding-bottom: 30px;
				border-bottom: solid 2px;
				position: relative;
			}
			#login-area .contents .pagetitle h1.thema-color-tit-border:before {
				content: "";
				width: 60px;
				height: 2px;
				position: absolute;
				bottom: -2px;
				left: 0;
			}
			#login-area .contents .pagetitle h1.c-red {
				display: inline-block;
				background: url("../img/common/icon_alerts_big.svg") no-repeat left center / 28px;
				padding-left: 40px;
			}

		#login-area .contents .row {
			padding: 50px 130px;
		}
		#login-area .contents .row.border-top {
			border-top: solid 1px #ddd;
		}
			#login-area .contents .row h3 {
				font-size: 1.8rem;
				font-weight: 700;
				line-height: 1.3em;
			}
			#login-area .contents .row h3.mb0 {
				margin-bottom: -10px;
			}

			#login-area .contents .row .time {
				border-radius: 8px;
				padding: 6px 0;
			}

			#login-area .contents .row .contact-box {
				border-radius: 8px;
				padding: 20px 25px;
			}


			#login-area .contents .row .user-mail {
				padding: 15px 20px;
				border-radius: 8px;
				margin-bottom: 20px;
			}
				#login-area .contents .row .user-mail .mail {
					font-weight: 700;
					padding-left: 10px;
				}


			#login-area .contents .row .not-reaching {
				padding: 30px 40px;
				border-radius: 8px;
			}
				#login-area .contents .row .not-reaching h2 {
					font-size: 1.8rem;
					font-weight: 700;
					line-height: 1.3em;
					text-align: center;
					margin-bottom: 20px;
				}


			#login-area .contents .row .privacy-area {
				height: 600px;
				padding: 60px 40px 40px 40px;
				overflow: auto;
				margin-bottom: 50px;
				border: solid 1px #ddd;
				border-radius: 8px;
			}
			#login-area .contents .row .privacy-area.height-none {
				height: auto;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar {
				width: 5px;
				height: 5px;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar-track {
				background: none;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar-thumb {
				background: #888888;
				overflow: hidden;
				border-radius: 2.5px;
			}
				#login-area .contents .row .privacy-area h2 {
					font-size: 2.4rem;
					font-weight: 700;
					line-height: 1.3em;
					text-align: center;
				}

				#login-area .contents .row .privacy-area .cell {
					margin-top: 35px;
				}
				#login-area .contents .row .privacy-area .cell.mt0 {
					margin-top: 0;
				}
					#login-area .contents .row .privacy-area .cell h3 {
						font-size: 1.6rem;
						font-weight: 700;
						margin-bottom: 12px;
					}

					#login-area .contents .row .privacy-area .cell a.external-link {
						display: inline-block;
						text-decoration: underline;
						padding-right: 20px;
						background: url("../../assets/img/common/icon_external_gray.svg") no-repeat right center / 14px;
					}
					#login-area .contents .row .privacy-area .cell a.external-link:hover {
						text-decoration: none;
					}

					#login-area .contents .row .privacy-area .cell .txt-16 {
						margin-bottom: 12px;
					}
					#login-area .contents .row .privacy-area .cell .txt-16:nth-last-child(1) {
						margin-bottom: 0;
					}

					#login-area .contents .row .privacy-area .cell .list-number {
						padding-left: 20px;
					}
						#login-area .contents .row .privacy-area .cell .list-number li {
							margin-bottom: 5px;
						}
						#login-area .contents .row .privacy-area .cell .list-number li:nth-last-child(1) {
							margin-bottom: 0;
						}


			#login-area .contents .row .flow {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 370px;
				margin: 0 auto 40px auto;
				position: relative;
			}
			#login-area .contents .row .flow:before {
				content: "";
				width: 50%;
				height: 1px;
				background: #ddd;
				position: absolute;
				top: 14px;
				left: 0;
				z-index: 0;
			}
			#login-area .contents .row .flow:after {
				content: "";
				width: 50%;
				height: 1px;
				background: #ddd;
				position: absolute;
				top: 14px;
				right: 0;
				z-index: 0;
			}
				#login-area .contents .row .flow .step {
					text-align: center;
					padding: 0 10px;
					background: #fff;
					position: relative;
					z-index: 2;
				}
					#login-area .contents .row .flow .step .number {
						display: block;
						width: 28px;
						height: 28px;
						background: #ddd;
						border-radius: 50%;
						font-size: 1.4rem;
						line-height: 28px;
						color: #fff;
					}
					#login-area .contents .row .flow .step .number.check {
						color: transparent;
						background-image: url("../img/common/icon_check_white.svg");
						background-repeat: no-repeat;
						background-position: center;
						background-size: 11px;
					}


			#login-area .contents .row .step-box {
				margin-bottom: 40px;
				border-radius: 8px;
			}
				#login-area .contents .row .step-box .s-tit {
					padding: 35px 100px 30px 100px;
					border-bottom: solid 1px #fff;
					text-align: center;
				}
					#login-area .contents .row .step-box .s-tit .number {
						display: block;
						width: 100px;
						height: 26px;
						border-radius: 4px;
						line-height: 26px;
						margin: 0 auto 12px auto;
					}

					#login-area .contents .row .step-box .s-tit h2 {
						font-size: 2.4rem;
						font-weight: 700;
						line-height: 1.3em;
					}

				#login-area .contents .row .step-box .text {
					padding: 30px 100px 35px 100px;
				}
					#login-area .contents .row .step-box .text h3 {
						font-size: 1.8rem;
						font-weight: 700;
						line-height: 1.3em;
						margin-bottom: 15px;
					}

					#login-area .contents .row .step-box .text ul.pht {
						margin-top: 30px;
					}
						#login-area .contents .row .step-box .text ul.pht.column2 li {
							width: 48%;
							margin-right: 4%;
						}
						#login-area .contents .row .step-box .text ul.pht.column2 li:nth-child(2n) {
							margin-right: 0;
						}
@media screen and (max-width: 1024px) {
	#login-area {
		padding: 6vw 0 12vw 0
	}
		#login-area .contents {
			border-radius: 1.2vw;
			padding-top: 5vw;
		}
			#login-area .contents .pagetitle {
				padding: 0 13vw;
			}
				#login-area .contents .pagetitle h1 {
					font-size: 2.8vw;
				}
				#login-area .contents .pagetitle h1.thema-color-tit-border {
					padding-bottom: 3vw;
				}
				#login-area .contents .pagetitle h1.thema-color-tit-border:before {
					width: 6vw;
				}
				#login-area .contents .pagetitle h1.c-red {
					background: url("../img/common/icon_alerts_big.svg") no-repeat left center / 2.8vw;
					padding-left: 4vw;
				}

			#login-area .contents .row {
				padding: 5vw 13vw;
			}
				#login-area .contents .row h3 {
					font-size: 1.8vw;
				}
				#login-area .contents .row h3.mb0 {
					margin-bottom: -1vw;
				}

				#login-area .contents .row .time {
					border-radius: 0.8vw;
					padding: 0.6vw 0;
				}

			#login-area .contents .row .contact-box {
				border-radius: 0.8vw;
				padding: 2vw 2.5vw;
			}


			#login-area .contents .row .user-mail {
				padding: 1.5vw 2vw;
				border-radius: 0.8vw;
				margin-bottom: 2vw;
			}
				#login-area .contents .row .user-mail .mail {
					padding-left: 1vw;
				}


			#login-area .contents .row .not-reaching {
				padding: 3vw 4vw;
				border-radius: 0.8vw;
			}
				#login-area .contents .row .not-reaching h2 {
					font-size: 1.8vw;
					margin-bottom: 2vw;
				}


			#login-area .contents .row .privacy-area {
				height: 60vw;
				padding: 6vw 4vw 4vw 4vw;
				margin-bottom: 5vw;
				border-radius: 0.8vw;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar {
				width: 0.5vw;
				height: 0.5vw;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar-thumb {
				border-radius: 2.5vw;
			}
				#login-area .contents .row .privacy-area h2 {
					font-size: 2.4vw;
				}

				#login-area .contents .row .privacy-area .cell {
					margin-top: 3.5vw;
				}
					#login-area .contents .row .privacy-area .cell h3 {
						font-size: 1.6vw;
						margin-bottom: 1.2vw;
					}

					#login-area .contents .row .privacy-area .cell .txt-16 {
						margin-bottom: 1.2vw;
					}

					#login-area .contents .row .privacy-area .cell a.external-link {
						padding-right: 2.5vw;
						background: url("../../assets/img/common/icon_external_gray.svg") no-repeat right center / 1.5vw;
					}
	
					#login-area .contents .row .privacy-area .cell .list-number {
						padding-left: 2vw;
					}
						#login-area .contents .row .privacy-area .cell .list-number li {
							margin-bottom: 0.5vw;
						}


			#login-area .contents .row .flow {
				width: 37vw;
				margin: 0 auto 4vw auto;
			}
			#login-area .contents .row .flow:before,
			#login-area .contents .row .flow:after {
				top: 1.4vw;
			}
				#login-area .contents .row .flow .step {
					padding: 0 1vw;
				}
					#login-area .contents .row .flow .step .number {
						width: 2.8vw;
						height: 2.8vw;
						font-size: 1.4vw;
						line-height: 2.8vw;
					}
					#login-area .contents .row .flow .step .number.check {
						background-size: 1.1vw;
					}


			#login-area .contents .row .step-box {
				margin-bottom: 4vw;
				border-radius: 0.8vw;
			}
				#login-area .contents .row .step-box .s-tit {
					padding: 3.5vw 6vw 3.0vw 6vw;
				}
					#login-area .contents .row .step-box .s-tit .number {
						width: 10vw;
						height: 2.6vw;
						border-radius: 0.4vw;
						line-height: 2.6vw;
						margin: 0 auto 1.2vw auto;
					}

					#login-area .contents .row .step-box .s-tit h2 {
						font-size: 2.4vw;
					}

				#login-area .contents .row .step-box .text {
					padding: 3.0vw 6vw 3.5vw 6vw;
				}
					#login-area .contents .row .step-box .text h3 {
						font-size: 1.8vw;
						margin-bottom: 1.5vw;
					}

					#login-area .contents .row .step-box .text ul.pht {
						margin-top: 3vw;
					}
}
@media screen and (max-width: 767px) {
	#login-area {
		padding: 0.5vw 0 0 0;
	}
		#login-area .contents {
			border-radius: 0;
			padding-top: 10vw;
		}
			#login-area .contents .pagetitle {
				padding: 0 6vw;
			}
				#login-area .contents .pagetitle h1 {
					font-size: 6.4vw;
				}
				#login-area .contents .pagetitle h1.thema-color-tit-border {
					padding-bottom: 6vw;
				}
				#login-area .contents .pagetitle h1.thema-color-tit-border:before {
					width: 12vw;
				}
				#login-area .contents .pagetitle h1.c-red {
					background: url("../img/common/icon_alerts_big.svg") no-repeat left center / 6vw;
					padding-left: 9vw;
				}

			#login-area .contents .row {
				padding: 10vw 6vw;
			}
				#login-area .contents .row h3 {
					font-size: 4.2vw;
				}
				#login-area .contents .row h3.mb0 {
					margin-bottom: -2vw;
				}

				#login-area .contents .row .time {
					border-radius: 1.6vw;
					padding: 2vw 0;
				}

				#login-area .contents .row .contact-box {
					border-radius: 1.6vw;
					padding: 4vw 5vw;
				}


			#login-area .contents .row .user-mail {
				display: block;
				padding: 3vw 4vw;
				border-radius: 1.6vw;
				margin-bottom: 6vw;
			}
				#login-area .contents .row .user-mail .head {
					display: block;
				}
				#login-area .contents .row .user-mail .mail {
					display: block;
					padding-left: 0;
				}


			#login-area .contents .row .not-reaching {
				padding: 6vw 6vw;
				border-radius: 0.8vw;
			}
				#login-area .contents .row .not-reaching h2 {
					font-size: 4.8vw;
					margin-bottom: 4vw;
				}


			#login-area .contents .row .privacy-area {
				height: 80vw;
				padding: 8vw 6vw 6vw 6vw;
				margin-bottom: 10vw;
				border-radius: 0.8vw;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar {
				width: 2vw;
				height: 2vw;
			}
			#login-area .contents .row .privacy-area::-webkit-scrollbar-thumb {
				border-radius: 1vw;
			}
				#login-area .contents .row .privacy-area h2 {
					font-size: 4.8vw;
				}

				#login-area .contents .row .privacy-area .cell {
					margin-top: 6vw;
				}
					#login-area .contents .row .privacy-area .cell h3 {
						font-size: 3.7vw;
						margin-bottom: 2vw;
					}

					#login-area .contents .row .privacy-area .cell a.external-link {
						padding-right: 5vw;
						background: url("../../assets/img/common/icon_external_gray.svg") no-repeat right center / 3.5vw;
					}

					#login-area .contents .row .privacy-area .cell .txt-16 {
						font-size: 3.7vw;
						margin-bottom: 2vw;
					}
	
					#login-area .contents .row .privacy-area .cell .list-number {
						padding-left: 4.2vw;
					}
						#login-area .contents .row .privacy-area .cell .list-number li {
							margin-bottom: 1vw;
						}


			#login-area .contents .row .flow {
				width: 74vw;
			}
			#login-area .contents .row .flow:before,
			#login-area .contents .row .flow:after {
				top: 4vw;
			}
				#login-area .contents .row .flow .step {
					padding: 0 3vw;
				}
					#login-area .contents .row .flow .step .number {
						width: 8vw;
						height: 8vw;
						font-size: 3.8vw;
						line-height: 8vw;
					}


			#login-area .contents .row .step-box {
				margin-bottom: 4vw;
				border-radius: 1.6vw;
			}
				#login-area .contents .row .step-box .s-tit {
					padding: 5vw 5vw 5vw 5vw;
				}
					#login-area .contents .row .step-box .s-tit .number {
						width: 20vw;
						height: 6.6vw;
						font-size: 3.6vw;
						border-radius: 0.8vw;
						line-height: 6.6vw;
						margin: 0 auto 2.5vw auto;
					}
					#login-area .contents .row .flow .step .number.check {
						background-size: 3vw;
					}

					#login-area .contents .row .step-box .s-tit h2 {
						font-size: 5.0vw;
					}

				#login-area .contents .row .step-box .text {
					padding: 5vw 5vw 5vw 5vw;
				}
					#login-area .contents .row .step-box .text h3 {
						font-size: 4.2vw;
						line-height: 1.6em;
						margin-bottom: 3vw;
					}

					#login-area .contents .row .step-box .text ul.pht {
						display: block;
						margin-top: 5vw;
					}
						#login-area .contents .row .step-box .text ul.pht.column2 li {
							width: 100%;
							margin-right: 0;
							margin-bottom: 4vw;
						}
						#login-area .contents .row .step-box .text ul.pht.column2 li:nth-last-child(1) {
							margin-bottom: 0;
						}
}