@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+1p:wght@300;400;500;700;800;900&display=swap');
/* ********************************************************************************************************************************************** */
/* ◆Add Style */
/* ********************************************************************************************************************************************** */
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* ◆Common */
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
	h1 {
		font-weight : 800;
		text-align  : center;
		margin      : 0px auto 0px auto;
	}
	
			h1 span {
				font-size   : 90%;
				font-weight : 800;
				font-family : 'M PLUS 1p', sans-serif;
				display     : block;
			}
			
	
	div.Step {
		text-align  : center;
		padding     : 4px  4px 4px  4px;
		margin      : 0px auto 0px auto;
	}
	
			div.Step span {
				min-width   : 200px;
				font-size   : 3em;
				font-family : 'M PLUS 1p', sans-serif;
				font-weight : 700;
				color       : #ffffff;
				background  : #e60012;
				display     : inline-block;
				padding     : 4px 10px 4px 10px;
				margin      : 0px auto 0px auto;
			}
			
	
	* { font-family: 'Kosugi Maru', sans-serif; }
	
	h1, h2, h3, h4, h5, h6 { 
		font-family : 'M PLUS 1p', sans-serif;
		color       : #353535;
		text-shadow : 1px -1px 0px #ffffff, 1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #dddddd, -1px 1px 0px #dddddd, -1px 1px 0px #dddddd;
		transform   : rotate(0.05deg);
	}
	
	h2 { font-weight : 700; }
	h3 { font-weight : 700; }
	h4 { font-weight : 400; }
	h5 { font-weight : 400; }
	h6 { font-weight : 300; }
	
	a,
	input.btn { transition : all 0.3s ease !important; }
	
	span.note {
		color   : #339933;
		display : inline-block    !important;
		margin  : 0px 3px 0px 3px !important;
	}
	
	
	.row {
		display       : -ms-flexbox;
		display       : flex;
		-ms-flex-wrap : wrap;
		flex-wrap     : wrap;
		align-items   : center;
		margin-right  : -15px;
		margin-left   : -15px;
	}
	
	div.col-sm-9 {
		padding-top    : calc(0.375rem + 1px) !important;
		padding-bottom : calc(0.375rem + 1px) !important;
		margin-bottom  : 0;
		font-size      : inherit;
		line-height    : 1.5;
	}
	
	#EntryStyle div[class^="col-sm"] {
		padding-top    : 3px !important;
		padding-bottom : 3px !important;
	}
	
	.badge-danger {
		line-height      : 1.2     !important;
		color            : #fff;
		background-color : #ff6600 !important;
	}
	
	.badge {
		position       : relative;
		top            : -1px;
		line-height    : 1;
		font-size      : 75%;
		font-weight    : 300;
		text-align     : center;
		vertical-align : baseline;
		white-space    : nowrap;
		border-radius  : 0.25rem;
		transition     : color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		display        : inline-block;
		padding        : 0.15em 0.4em 0.25em 0.4em !important;/* 0.25em 0.4em */
	}
	
	
	div.container {
		display    : block;
	}
	
	
	



/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* ◆h2
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
	main h2 {
		font-size  : 1.75em;
		text-align : center;
		margin     : 50px auto 0px auto;
	}
	
	section h2 {
		font-size  : 1.5em;
		text-align : left;
		margin     : 0px auto 0px auto;
	}
	
	
	



/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* ◆form
/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
	form section {
		width         : 98%;
		overflow      : hidden;
		display       : block;
		border        : 1px solid #cccccc;
		border-radius : 16px;
		padding       :  0px  0px 10px  0px;
		margin        : 50px auto 50px auto;
	}
	
			
			form section h2 {
				vertical-align : middle;
				background     : #efefef;
				border-bottom  : 1px solid #cccccc;
				padding        : 10px 14px 10px 14px !important;
			}
			
					form section h2::before {
						content : '● ';
						color   : #777777;
					}
					
					form section h2 span {
						font-size      : 75%;
						font-weight    : normal;
						color          : #cc0000;
						display        : inline-block;
						margin         : 0 5px;
					}
					
					span.attention {
						font-size      : 96%;
						font-weight    : normal;
						color          : #cc0000;
						display        : inline-block;
						margin         : 0 5px;
					}
			
			form section h3 {
				width         : 98%;
				font-size     : 1.25em !important;
				text-align    : left;
				border-bottom : 1px solid #cccccc;
				border-radius : 30px;
				padding       : 10px 14px 10px 14px;
				margin        : 50px auto 10px auto !important;
			}
			
			form section h3:first-of-type {
				margin        : 10px auto 0px auto;
			}
			
			form section p {
				width  : 97%;
				margin : 25px auto 5px auto;
			}
			
			
			form section div.IndustryContainer {
				padding : 15px 10px 15px 10px !important;
			}
			
					form section div.IndustryInnerContainer {
						width  : 93%;
						margin : 5px auto 5px auto !important;
					}
					
							form section div.IndustryContainer h3 {
								margin : 5px auto 5px auto !important;
							}
							
		
		div.TypeRadio label {
			background    : #ffffff;
			display       : inline-block;
			border-radius : 1em;
			border        : 1px solid #cccccc;
			transition    : all 0.3s ease;
			padding       :  4px 10px  2px 8px;
			margin        : 10px  3px 10px 3px;
		}
		
		div.TypeRadio label.LabelOn {
			background : #ffff00 !important;
		}
		
		label.col-sm-3 img {
			max-width      : 100%;
			height         : auto;
		}
		
		label.col-sm-3:has(img) {
			cursor         : default;
			pointer-events : none;
		}
		
		
		@media (min-width: 576px) {
			
			.col-sm-3 {
				-ms-flex: 0 0 25%;
				flex: 0 0 25%;
				max-width: 25%;
			}
			
			.col-sm-9 {
				-ms-flex: 0 0 75%;
				flex: 0 0 75%;
				max-width: 75%;
			}
			
		}
		
		.ChangeGroup {
			position   : relative;
		}
		
		#KeizokuAlert {
			position      : absolute;
			top           : 10px;
			color         : #ffffff;
			background    : #ff6600;
			display       : inline-block;
			border-radius : 4px;
			padding       : 2px 4px 2px 6px;
			margin        : 0px 5px 0px 0px;
		}
		
		
		



/* ------------------------------------------------------------------------------- */
/* ◆div.form-group  */
/* ------------------------------------------------------------------------------- */
	div.form-group {
		width      : 98%;
		border-top : 1px solid #cccccc;
		padding    : 6px 2px;
		margin     : 0px auto 0px auto !important;
	}
	
	div.form-group > label::before {
		position  : relative;
		right     : 5px;
		content   : '▲';
		color     : #33cc00;
		display   : inline-block;
		transform : rotate(90deg);
	}
	
	.w50p { width : 50% !important; }
	.w75p { width : 75% !important; }
	.w97p { width : 98% !important; }
	
			div.form-group:first-of-type {
				border-top : 0px;
			}
			
			div.form-group label {
				color : #29660e;
			}
	
	div.form-group:nth-of-type(even) {
		background-color : #f7f7f7;
	}
	
	div.form-group.alert-warning,
	div.form-group:nth-of-type(even).alert-warning {
		background-color : #fff3cd !important;
	}
	
			div.form-group label {
				font-size : 94%;
			}
	
	@media only screen and (max-width: 574px) {
		
		div.form-group {
			background     : #f5f5f5;
			border         : 1px solid #cccccc;
			border-radius  : 4px;
			padding-bottom : 10px;
			margin         : 10px auto 10px auto !important;
		}
		
	}
	/* #ff00cc */
	div.StrLength,
	div.StrLength span {
		color         : #66ff00;
		background    : #353535;
		border-radius : 2px;
		padding       : 2px 4px;
	}
	
	
	div.StrLength {
		margin : 2px auto 2px auto !important;
	}
	
	
	.form-control.OverSTR,
	.OverSTR {
		color : #ff00cc !important;/* ピンク */
	}
	
	.form-control.PurchaseNumber {
		display      : inline-block;
		margin-right : 10px;
	}
	
	
	div.TypeRadio label {
		background    : #ffffff;
		display       : inline-block;
		border-radius : 1em;
		border        : 1px solid #cccccc;
		transition    : all 0.3s ease;
		user-select   : none;
		padding       :  4px 10px  2px 8px;
		margin        : 10px  3px 10px 3px;
	}
	
	div.TypeRadio label.LabelOn {
		background : #ffff00 !important;
	}
	
	
	



/* ------------------------------------------------------------------------------- */
/* ◆input  */
/* ------------------------------------------------------------------------------- */
	input.PurchaseNumber {
		width     : 98%;
		max-width : 100px;
	}
	
	input[type="radio"] {
		margin  : 0px 5px 0px 0px !important;
	}
	
	
	



/* ------------------------------------------------------------------------------- */
/* ◆div.BtnContainer  */
/* ------------------------------------------------------------------------------- */
	div.BtnContainer {
		flex-basis       : 98%    !important;
		text-align       : center !important;
		/*
		background-color : #f5f5f5;
		border-top       : 1px solid #cccccc;
		border-bottom    : 1px solid #cccccc;
		*/
		display          : block  !important;
		padding          : 8px  4px 8px  4px;
		margin           : 8px auto 8px auto;
	}
	
			
			
			
			input.btn {
				border  : 0px !important;
				padding : 8px 12px 8px 12px;
				margin  : 0px auto 0px auto;
			}
			
			input.btn.btn-primary {
				color      : #ffffff;
				background : #007bff;
				margin     : 5px auto 5px auto;
			}
			
					input.btn.btn-primary:hover {
						color      : #ffffff;
						background : #33cc33;
					}
					
					
					



/* ------------------------------------------------------------------------------- */
/* ◆div.BackToTopContainer  */
/* ------------------------------------------------------------------------------- */
	div.BackToTopContainer {
		position      : relative;
		top           : 0px;
		text-align    : center;
		border-top    : 1px solid #cccccc;
		padding       : 8px  4px 8px  4px;
		margin        : 0px auto 8px auto;
	}
	
			div.BackToTop {
				position   : relative;
				top        : 0px;
				text-align : right;
				padding    : 8px  4px 8px  4px;
				margin     : 0px auto 8px auto;
			}
			
					div.BackToTop a {
						position        : relative;
						top             : 0px;
						text-align      : center;
						text-decoration : none;
						display         : inline-block;
						border-radius   :  6px;
						padding         : 8px 12px 8px 12px;
						margin          : 5px auto 5px auto;
					}
					
					div.BackToTop a {
						color      : #ffffff;
						background : #353535;
					}
					
					div.BackToTop a:hover {
						color      : #ffffff;
						background : #33cc33;
					}
					
					div.BackToTop a::after {
						position    : relative;
						top         : 4px;
						left        : 3px;
						position    : relative;
						top         : 0px;
						font-family : 'Material Icons';
						content     : '\e5ce';
					}
					
					
					
	label,
	input[type="radio"],
	input[type="submit"],
	input[type="file"] {
		cursor        : pointer;
	}
	
	label.Disabled {
		opacity : 0.3;
		cursor  : default;
	}
	
	
	ul.Attention {
		width         : 97.5%;
		background    : #ffffcc;
		border-radius : 6px;
		border        : 3px solid #ffaa00;
		box-shadow    : inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff, inset 0px 0px 5px #ffffff;
		padding       : 4px;
		margin        : 5px auto;
	}
	
			ul.Attention li {
				font-size : 0.95em;
				color     : #003399;
				margin    : 2px 0px 2px 26px;
			}
			
			strong {
				font-size   : 120%;
				font-weight : 500;
			}
			
			
			



/* ------------------------------------------------------------------------------- */
/* ◆スライダー認証  */
/* ------------------------------------------------------------------------------- */
	#captchaMessage {
		text-align : center;
		display    : block;
		padding    : 10px  0px 10px  0px;
		margin     : 35px auto 55px auto;
	}
	
			#captchaMessage span {
				text-shadow : 0px 0px 1px;
			}
			
			#submitButton] {
				cursor       : pointer;
				background   : #007bff;
				border-color : #007bff;
			}
			
			#submitButton[disabled] {
				cursor       : default;
				background   : #cccccc;
				border-color : #999999;
			}
	
	
	.ui-slider-handle {
		cursor    : pointer;
		transform : scale(1.1,1.5);
	}
	
	#slider {
		width       : 90%;
		max-width   : 960px;
		min-width   : 400px;
		margin      : 25px auto 25px auto;
	}
	
	.slider-label {
		position    : absolute;
		top         : -30px;
		font-size   : 16px;
		font-weight : bold;
	}
	
	
	



/* ------------------------------------------------------------------------------- */
/* ◆Information  */
/* ------------------------------------------------------------------------------- */
	div.Information {
		text-align : center;
		padding    : 4px  4px 4px  4px;
		margin     : 5px auto 25px auto;
	}
	
			div.Information p,
			div.Information div {
				text-align : left;
				display    : inline-block;
				padding    : 4px  4px 4px  4px;
				margin     : 5px auto 5px auto;
			}
			
			
			



/* ------------------------------------------------------------------------------- */
/* ◆個人情報保護方針関連  */
/* ------------------------------------------------------------------------------- */
	div.InfoSetContainer {
		width         : 100%;
		text-align    : center;
		border-bottom : 1px dashed #cccccc;
		padding       : 4px  4px 4px  4px;
		margin        : 5px auto 25px auto;
	}
	
			ul.InfoSet {
				display       : inline-block;
				padding       : 4px  4px 4px  4px;
				margin        : 5px auto 25px auto;
			}
					ul.InfoSet li {
						width      : 98%;
						text-align : left;
						padding    : 2px  4px 2px  4px;
						margin     : 2px auto 2px 30px;
					}
	
	#PrivacyPolicy {
		width      : 100%;
		max-width  : 960px;
		border-top : 1px solid #cccccc;
		padding    :  4px  4px 4px  4px;
		margin     : 35px auto 5px auto;
	}
	
	#PrivacyPolicy.DspBlock {
		display : block !important;
	}
	
	#BtnPP {
		display : inline-block;
	}
	
	#PrivacyPolicy.DspNone {
		display : none !important;
	}
	
		#PrivacyPolicy h2 {
			width          : 98%;
			text-align     : center;
			letter-spacing : 2px;
			padding        : 20px  4px 10px  4px;
			margin         :  5px auto 20px auto;
		}
		
				#PrivacyPolicy h2 span {
					border-bottom : 5px solid #fcb73e;
					display       : inline-block;
					border-radius : 6px  6px 0px  0px;
					padding       : 4px  8px 4px  8px;
					margin        : 0px auto 0px auto;
				}
		
		#PrivacyPolicy h3 {
			width          : 98%;
			font-size      : 1.15em;
			text-align     : left;
			letter-spacing : 1.5px;
			border-bottom  : 1px solid #cfd3d8;
			padding        :  0px  0px 0px  0px;
			margin         : 25px auto 3px auto;
		}
		
				#PrivacyPolicy h3 span {
					background    : #e9ecef;
					display       : inline-block;
					border-radius : 6px  6px 0px  0px;
					padding       : 4px  8px 4px  8px;
					margin        : 0px auto 0px auto;
				}
		
		#PrivacyPolicy h4 {
			font-size  : 1.00em;
			text-align : left;
			letter-spacing : 1px;
			padding    : 4px  4px 4px  4px;
			margin     : 5px auto 5px auto;
		}
			
		#PrivacyPolicy p {
			width          : 98%;
			font-size      : 0.9em;
			text-align     : left;
			letter-spacing : 0px;
			padding        : 4px  4px 4px  4px;
			margin         : 3px auto 3px auto;
		}
		
		#PrivacyPolicy div.Signature {
			width      : 98%;
			text-align : right;
			padding    : 4px  4px 4px  4px;
			margin     : 5px auto 5px auto;
		}
		
				#PrivacyPolicy div.Signature p {
					text-align : right;
				}
				
		
		div.BackToForm {
			width      : 98%;
			text-align : center;
			padding    : 4px  4px 4px  4px;
			margin     : 5px auto 5px auto;
		}
		
				div.BackToForm a {
					width           : 90%;
					max-width       : 240px;
					text-align      : center;
					text-decoration : none;
					border          : 1px solid #0062cc;
					border-radius   : 6px;
					display         : block;
					padding         : 14px  4px 14px  4px;
					margin          :  5px auto  5px auto;
				}
				
				div.BackToForm a {
					color            : #ffffff;
					background-color : #007bff;
				}
				
				div.BackToForm a:hover {
					color            : #ffffff;
					background-color : #0069d9;
				}
				
				
				



/* ------------------------------------------------------------------------------- */
/* ◆footer */
/* ------------------------------------------------------------------------------- */
	footer {
		text-align    : center;
		background    : #e9ecef;
		border-top    : 1px solid #cfd3d8;
		border-bottom : 1px solid #cfd3d8;
		display       : block;
		padding       :  2px 2px;
		margin        : 10px auto 0px auto;
	}
	
	
			footer small {
				text-align : center;
				display    : block;
			}
			
			
			



/* ------------------------------------------------------------------------------- */
/* ◆modal */
/* ------------------------------------------------------------------------------- */
.modal_overlay, .modal_content {
	display : none; position : fixed;
}


.modal_overlay.close {
	animation : fadeOut1 ease-out 0.5s forwards;
}
@keyframes fadeOut1 {
	  0% {opacity : 0.6; display   : block}
	 99% {opacity : 0.0;}
	100% {display : none; position : fixed;}
}


.modal_content.close {
	animation : fadeOut2 ease-out 0.5s forwards;
}
@keyframes fadeOut2 {
	  0% {opacity : 1.0; display : block}
	 99% {opacity : 0.0;}
	100% {display : none;}
}


.modal_overlay.open {
	display   : block;
	animation : fadeIn1 ease-in 0.5s forwards;
}
@keyframes fadeIn1 {
	from {
		opacity: 0.0;
	}
	to {
		opacity : 0.6;
	}
}


.modal_content.open {
	display   : block;
	animation : fadeIn2 ease-in 0.5s forwards;
}
@keyframes fadeIn2 {
	from {
		opacity: 0.0;
	}
	to {
		opacity : 1.0;
	}
}


.modal_content {
	width            : 90%;
	max-width        : 500px;
	top              : 50%;
	left             : 50%;
	background-color : rgba(255, 255, 255, 0.8);
	border-radius    : 6px;
	text-align       : center;
	padding          : 10px;
	margin           : 0px auto 0px auto;
	transform        : translate(-50%,-50%);
	z-index          : 101;
}

		.modal_content p {
			width       : 90%;
			font-size   : 12pt   !important;
			font-weight : normal !important;
			line-height : 1.6    !important;
			text-align  : left;
			padding     : 10px;
			margin      : 0px auto 0px auto;
		}
		
		.modal_content button {
			text-align       : center;
			display          : inline-block;
			color            : #ffffff;
			background-color : #007bff;
			border-color     : #007bff;
			border-radius    : 6px;
			transition       : all 0.3s ease;
			padding          : 6px;
			margin           : 0px auto 0px auto;
		}
		
		.modal_content button:hover {
			background-color : #0069d9;
			border-color     : #0062cc;
		}

.modal_overlay {
	width      : 100%;
	height     : 100%;
	background : grey;
	opacity    : .6;
	top        : 0;
	left       : 0;
	right      : 0;
	z-index    : 100;
}