@charset "utf-8";
#postingflow{
	.pageCnt{
		@media (width > 767px) {/* PC */
			margin-top: 10.5rem;
			padding-bottom: 16rem;
		}
		@media (width <= 767px) {/* SP */
            padding-bottom: 7.5rem;
		}
	}
	.secHead{
		text-align: center;
		margin-bottom: 10rem;
		@media (width <= 767px) {/* SP */
			margin-bottom: 6rem;
		}

		.secHead__ttl{
			font-weight: 400;
			font-family: var(--ff-zen);
			letter-spacing: .12em;
			line-height: 1;
			font-size: 3.2rem;
			@media (width <= 767px) {/* SP */
				font-size: 2.4rem;
			}
		}
		.secHead__enTxt{
			letter-spacing: .1em;
			font-weight: 500;
			color: var(--cc-red);
			font-family: var(--ff-avenir);
			line-height: 1;
			font-size: 1.4rem;
			margin-top: 2.4rem;
			@media (width <= 767px) {/* SP */
				font-size: 1.6rem;
				margin-top: 2.2rem;
			}
		}
	}
	.howtoSec{
		padding-top: 21.5rem;
		@media (width <= 767px) {/* SP */
			padding-top: 9rem;
		}
		.stepBlock{
			display: flex;
			justify-content: center;
			@media (width <= 767px) {/* SP */
				flex-direction:column;
				align-items: center;
				padding-top: 1.8rem;
			}
			.stepItem{
				text-align: center;
				width: 36.8rem;
				@media (width <= 767px) {/* SP */
					width: 33rem;
					margin-left: auto;
					margin-right: auto;
				}
				.stepItem__head{
					display: flex;
					flex-direction: column;
					align-items: center;
					letter-spacing: .12em;
					line-height: 1;
					margin-bottom: 4rem;
					@media (width <= 767px) {/* SP */
						flex-direction: row;
						gap: 2.4rem;
						margin-left: 2.4rem;
						margin-bottom: 3rem;
					}
					.enTxt{
						font-family: var(--ff-zen);
						color: var(--cc-red);
						font-size: 1.5rem;
						margin-bottom: .5rem;
					}
					.num{
						font-family: var(--ff-zen);
						color: var(--cc-red);
						border-bottom: 2px dashed var(--red, #FF000A);
						font-size: 4rem;
						padding-bottom: .8rem;
						@media (width <= 767px) {/* SP */
							font-size: 3.2rem;
						}
					}
					.txt{
						font-size: 1.8rem;
						@media (width > 767px) {/* PC */
							margin-top: 2.7rem;
						}
						@media (width <= 767px) {/* SP */
							padding-top: .5rem;
						}
					}
				}
				.stepItem__imgBlock{
					position: relative;
					height:36.8rem;
					@media (width <= 767px) {/* SP */
						height: 33.3rem;
					}
					&:before{
						content: '';
						background: var(--cc-back-gray);
						position: absolute;
						left: 0;
						top: 1rem;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.img{
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: -1rem;
						width: 24rem;
						@media (width <= 767px) {/* SP */
							width: 21.7rem;
						}
					}
					.txtarea{
						width: 100%;
						color: var(--cc-gray-text);
						position: absolute;
						bottom: 4rem;
						line-height: 1.8;
						letter-spacing: .12em;
						font-size: 1.4rem;

						@media (width <= 767px) {/* SP */
							font-size: 1.6rem;
							bottom: 4rem;
						}
						.-red{
							color: var(--cc-red);
						}
						.account{
							font-weight: 500;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #fff;
							color: var(--cc-red);
							letter-spacing: .12em;
							border-radius: 40rem;
							border: solid 1px var(--cc-red);
							width: 16.4rem;
							height: 3.6rem;
							font-size: 1.5rem;
							margin: .8rem auto -.3rem;
							@media (width <= 767px) {/* SP */
								margin-bottom: -1.3rem;
							}
						}
					}
				}
			}
			.stepArw{
				display: flex;

				@media (width > 767px) {/* PC */
					align-items: flex-end;
					padding: 0 1.6rem;
				}
				@media (width <= 767px) {/* SP */
					height: 7rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				img{
					width: 1.6rem;
					@media (width > 767px) {/* PC */
						margin-bottom: 17rem;
					}
					@media (width <= 767px) {/* SP */
						width: 1.3rem;
						transform: rotate(90deg);
					}
				}
			}
		}
		.txtBottom{
			font-family: var(--ff-zen);
			text-align: center;
			line-height: 2;
			letter-spacing: .1em;
			font-size: 2.2rem;
			margin-top: 8.5rem;
			@media (width <= 767px) {/* SP */
				margin-top: 4rem;
			}
		}
	}
	.termsSec{
		padding-top: 21rem;
		padding-bottom: 16rem;
		@media (width <= 767px) {/* SP */
			padding-top: 9rem;
			padding-bottom: 8rem;
		}
		.list{
			margin: 0 auto;
			display: flex;
			flex-direction: column;

			width: 96rem;
			gap:.8rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
			}
			li{
				color: var(--cc-gray-text);
				position: relative;
				line-height: 1.8;
				text-align: justify;
				letter-spacing: .12em;
				font-size:1.6rem;
				padding-left: 1.8rem;
				&:before{
					content: '';
					background: var(--cc-red);

					position: absolute;
					left: 0;
					top: 1rem;
					border-radius: 50%;
					width: 1rem;
					height: 1rem;
				}
			}
		}
	}
}