@charset "UTF-8";

.print-box {
	margin-top: 16px;
	padding: 8px;
	width: 100%;
}

	.print-box .title {
		width: 100%;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}

	.print-box .area-box {
		display: flex;
		justify-content: center
	}

	.print-box .front-box,
	.print-box .back-box {
		width: 50%;
		margin-bottom: 16px;
	}

		.print-box .bg {
			width: 276px;
			height: 214px;
			margin: 22px auto 0 auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			position: relative
		}
			.print-box .front-box>.bg {
				background-image: url('../images/contact/form/print/bg-front.svg');
			}
			.print-box .back-box>.bg {
				background-image: url('../images/contact/form/print/bg-back.svg');
			}

			.print-box label {
				display: flex;
				height: 100%;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				border-radius: 3px;
			}
			.print-box .bg div:not(.front_collar) > label{
				background: #EFEFEF;
				border: 1px solid #BFBEBE;
			}
			.print-box .bg div:not(.front_collar) > label.active,
			.print-box .bg div.front_collar > label.active span:nth-of-type(n+2) {
				background-color: #ffdf8e;
				border-color: #ffb700;
			}


			@media only screen and (max-width: 750px) {
				.print-box .area-box {
					flex-wrap: wrap
				}
				.print-box .front-box,
				.print-box .back-box {
					width: 100%
				}
				.print-box .bg {
					margin: 0 auto;
				}
			}

	.print-box .bg > div
	{
		position: absolute;
		text-align: center;
	}
		.print-box .bg > div span
		{
			display: block;
			margin: 0;
		}

	.print-box .right_sleeve,
	.print-box .left_sleeve,
	.print-box .right_chest,
	.print-box .left_chest,
	.print-box .right_hem,
	.print-box .left_hem
	{
		width: 52px;
		height: 52px;
	}

		/*全面*/
		.print-box .right_sleeve {
			top: -10px;
			left: 24px;
		}
		.print-box .left_sleeve {
			top: -10px;
			right: 24px;
		}
		.print-box .right_chest {
			top: 46px;
			left: 56px;
		}
		.print-box .left_chest {
			top: 46px;
			right: 56px;
		}
		.print-box .right_hem {
			bottom: 10px;
			left: 56px;
		}
		.print-box .left_hem {
			bottom: 10px;
			right: 56px;
		}
		/*背中すそ*/
		.print-box .back_hem {
			margin: auto;
			width: 131px;
			height: 30px;
			left: 0;
			right: 0;
			bottom: 17px;
		}
			.print-box .back_hem label{
				flex-direction: row
			}

		/*背中肩*/
		.print-box .back_kata {
			margin: auto;
			width: 131px;
			height: 30px;
			left: 0;
			right: 0;
			top: 28px;
		}
			.print-box .back_kata label{
				flex-direction: row
			}

		/*背中大*/
		.print-box .back {
			margin: auto;
			width: 131px;
			height: 103px;
			top: 61px;
			left: 0;
			right: 0;
		}

		/*背中丸*/
		.print-box .back_round {
			margin: auto;
			width: 79px;
			height: 79px;
			top: 28px;
			left: 0;
			right: 0;
		}
			.print-box .back_round label{
				border-radius: 50%
			}

		/*両衿*/
		.print-box .front_collar {
			width: 53px;
			top: 66px;
			left: 111px;
			right: 0;
		}
			.print-box .bg .front_collar
			{
				background: none;
				border: 0;
			}
				.print-box .bg .front_collar label
				{
					display: block;
				}
				.print-box .bg .front_collar span
				{
					margin: auto;
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
				}
				.print-box .bg .front_collar span:nth-of-type(n+2)
				{
					position: absolute;
					width: 15px;
					height: 85px;
					top: 0px;
					border: 1px solid #ccc;
					background: #EFEFEF;
					border-radius: 1px;
				}
				.print-box .bg .front_collar span:nth-of-type(2)
				{
					left: 1px;
				}
				.print-box .bg .front_collar span:nth-of-type(3)
				{
					right: 0px;
				}
				.print-box .bg .front_collar span:nth-of-type(n+2) em
				{
					display: none;
				}