/* CSS Document */




/* base custom */
html, body{
	width: 100%;
}




@keyframes kf-fadein{
	from	{ opacity: 0; }
	to		{ opacity: 1; }
}

@keyframes kf-spinner{
	to{
		transform: rotate(360deg);
	}
}

/* 謎バグ発生のため断念 */
@keyframes kf-cond_open{
	from{
		/*transform: scaleY(0);*/
	}
	to{
		/*transform: scaleY(1);*/
	}
}




@media print, screen and (min-width:769px){
	.s-sitewidth{
		box-sizing: border-box;
		padding-left: 1%;
		padding-right: 1%;
	}
}

@media print, screen and (max-width:768px){
	.s-sitewidth{
		box-sizing: border-box;
		padding-left: 1%;
		padding-right: 1%;
	}
}




.s-gallery{
	max-width: 65vw;
	max-height: 65vh;
}



.s-scroll{
	overflow-x: auto;
	box-sizing: border-box;
	
	transform: scaleY(-1);
}
@media print, screen and (max-width:768px){
	.s-scroll{
		margin-right: -5%;
		padding-right: 5%;
		box-sizing: content-box;
	}
}






.s-input{
	cursor: pointer;

	color: inherit;
	background-color: inherit;

	width: 100%;
	padding: .5em 1.25em;
	box-sizing: border-box;

	border: 1px solid;
	border-image: linear-gradient(to right, #ccc, #fff, #ccc);
	border-image-slice: 1;

	background-color: #000;
}
label.s-input{
	display: block;
	box-sizing: border-box;
}
@media print, screen and (min-width:769px){
	.s-input[multiple]:focus{
		min-height: 9em;
	}
}




/* modal */
.s-modal__is_open{
	position: fixed;
	visibility: hidden;
}
.s-modal{
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;


	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;


	transition-property: opacity visibility;
	transition-duration: 270ms;
}

.s-modal__is_open:not(:checked) ~ .s-modal{
	visibility: hidden;
	opacity: 0;
}
.s-modal__is_open:checked ~ .s-modal{

}
.s-modal__bg{
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(0, 0, 0, .5);
}
.s-modal__window{
	position: relative;
	z-index: 1;

	padding: 1em 2em;


	max-width: 80vw;
	max-height: 80vh;
	box-sizing: border-box;

	overflow-y: auto;

	color: #000;
	background-color: #fff;
}
.s-modal__closebt{
	position: absolute;
	top: 0;
	right: 0;

	cursor: pointer;


	color: #000;
	background-color: #fff;
	border: 1px solid;

	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	border-radius: 9999px;

	padding: .25em;

	transform: translate(-20%, 20%);
}





/* ajax */
.js-search_result__trigger{
	color: inherit;
	background-color: inherit;
	border: 1px solid;


	display: block;

	width: 100%;

	padding: .5em 1em;
	box-sizing: border-box;



	cursor: pointer;
}
.js-search_result__form:not(.js-search_result__form--connecting) .js-search_result__loading,
.js-search_result__form.js-search_result__form--connecting .js-search_result__trigger{
	display: none;
}


.js-search_result__loading{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	margin-top: 1em;
	margin-bottom: 1em;
}
.js-search_result__loading:before{
	content: "";
	display: block;

	border-style: dotted;
	border-width: 3px 3px 3px 3px;
	border-color: transparent;
	border-bottom-color: inherit;

	width: 3em;
	height: 3em;
	border-radius: 3em;
	animation: kf-spinner 360ms linear infinite;
}








/* wrap */
.s-search{
	color: #fff;

	font-size: .875rem;
	line-height: 2em;
}






/* cond */
.s-cond{
	margin-bottom: 3em;

	counter-reset: formStep__count;
}
.s-cond__item{
	border-top: 1px solid #000;

	/*background-image: radial-gradient(#333, #333 50%, #000 50%);
	background-size: 4px 4px;
	background-repeat: repeat;*/

	counter-increment: formStep__count;
}
.s-cond_header__is_open{
	display: none;
}
.s-cond_header{
	cursor: pointer;

	display: flex;
	align-items: center;

	background-color: #666;

	font-size: 1.25em;
	font-weight: bold;
}
.s-cond_header__is_open ~ .s-cond_header:after{
	content: "";

	display: block;

	margin-left: auto;
	margin-right: 1em;

	font-size: .5em;
	width: 1em;
	height: 1em;

	border-style: solid;
	border-width: .25em;
	border-top-color: transparent;
	border-left-color: transparent;

	transform: translateY(-25%) rotate(45deg);
}
.s-cond_header__is_open:checked ~ .s-cond_header:after{
	transform: scaleY(-1) translateY(-25%) rotate(45deg) ;
}
.s-cond_header__label{
	color: #000;
	background-color: #fff;

	box-sizing: border-box;
	padding: 1em;
	margin-right: 2em;

	font-size: .9375em;

	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;
}
.s-cond_header__label:after{
	content: counter(formStep__count);

	width: 1em;
	height: 1em;
	line-height: 1em;
	padding: .25em;

	text-align: center;
	font-weight: bold;

	color: #fff;
	background-color: #e00;

	margin-left: .5em;
}
.s-cond_header__heading{}
.s-cond__explain{
	padding: 1em;
	
	
	background-color: #4C4C4C;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMjgvMTmiviAwAAAAH3RFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyA4tWjSeAAAAAxJREFUCJljaGBwAAABxADBzXsYoAAAAABJRU5ErkJggg==);
	
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;

	font-size:17.5px;
}

.s-cond__explain_2{
	padding-left: calc(2% + 1em);
	padding-right: calc(2% + 1em);
}

@media print, screen and (min-width: 769px){
	.s-cond__explain{
		padding-left: calc(10% + 2em);
	}
}
.s-cond_fields{
	/*padding-top: 3em;*/
	padding-bottom: 3em;

	transform-origin: center top;

	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;

	background-color: #4C4C4C;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMjgvMTmiviAwAAAAH3RFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyA4tWjSeAAAAAxJREFUCJljaGBwAAABxADBzXsYoAAAAABJRU5ErkJggg==);
}
.s-cond_fields__inner{}
.s-cond_header__is_open:not(:checked) ~ .s-cond_fields{
	position: fixed;
	visibility: hidden;
}
.s-cond_header__is_open:checked ~ .s-cond_fields{
	position: static;
	visibility: visible;

	animation:
			kf-cond_open 480ms ease-in-out both,
			kf-fadein 320ms ease-in-out both;
}
.s-cond__field{
	box-sizing: border-box;

	flex: 1 1 auto;

	margin-left: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.s-cond__field--stock{}

.s-cond__list{}
.s-cond__list_item{
	margin-top: .25em;
	margin-bottom: .25em;
}
.s-cond__list_item input{
	margin-left: .5em;
	margin-right: .5em;
}

@media print, screen and (min-width:769px){
	.s-cond{}
	.s-cond__item{}
	.s-cond_header{}
	.s-cond_header__label{
		flex-basis: auto;
		min-width: 10%;
	}
	.s-cond_header__heading{}
	.s-cond_fields{}
	.s-cond_fields__inner{
		flex-wrap: wrap;
		align-items: center;

		margin-left: -2em;
	}
	.s-cond_fields__inner-flex{
		display: flex;
	}
	.s-cond__field{}
	.s-cond__field--stock{
		text-align: right;
	}
}

@media print, screen and (max-width:768px){
	.s-cond{}
	.s-cond__item{}
	.s-cond_header{}
	.s-cond_header__label{}
	.s-cond_header__heading{}
	.s-cond_fields{}
	.s-cond__field{}
	.s-cond__field--stock{
		text-align: center;
	}
}






/* cond command */
.s-cond_cmd{
	display: flex;
	flex-wrap: wrap;

	margin-left: -1em;
	margin-bottom: -1em;
}
.s-cond_cmd__item{
	margin-left: 1em;
	margin-bottom: 1em;
}
.s-cond_cmd__label{
	cursor: pointer;
}
.s-cond_cmd__flag{
	display: none;
}
.s-cond_cmd__button{
	display: block;

	padding: .25em 1em;
	border: 1px solid;
}
.s-cond_cmd__button:before,
.s-cond_cmd__button:after{
	content: "";
	display: inline-block;
	vertical-align: middle;

	width: 1em;
	line-height: 1em;
}
.s-cond_cmd__button:before{
	margin-right: .25em;
}

/* state */
.s-cond_cmd__flag:checked ~ .s-cond_cmd__button{
	color: #F8C5AC;
}
.s-cond_cmd__flag:checked ~ .s-cond_cmd__button:before{
	content: "✔";
}






/* result */
.s-result{
	margin-top: 3em;
	margin-bottom: 3em;
}
.s-result__items{
	margin-top: 3em;
	margin-bottom: 3em;
}
.s-result__item{
	margin-top: 3em;
	margin-bottom: 3em;
	animation: kf-fadein 360ms ease-out;
}

@media print, screen and (min-width:769px){}
@media print, screen and (max-width:768px){}






.s-result__header{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.s-result_score{
	font-size: 1.125em;
	font-weight: bold;
}
.s-result_score__number{
	font-size: 1.5em;
}
.s-result_cmd{}
.s-result_cmd__items{
	display: flex;
	justify-content: flex-end;
}
.s-result_cmd__item{}
.s-result_cmd__item:not(:first-child){
	margin-left: 1em;
}
.s-result_cmd__button{
	display: flex;
	align-items: center;
	justify-content: center;

	text-decoration: inherit;

	padding: .25em 1em;
	border: 1px solid;
}
button.s-result_cmd__button{
	cursor: pointer;
	color: inherit;
	background-color: transparent;
}
button.s-result_cmd__button:hover{
	color: #F8C5AC;
}
.s-result_cmd__button > i{
	margin-right: .5em;
}
.s-icon{
	vertical-align: middle;
}

@media print, screen and (min-width:769px){
	.s-result__header{

	}
	.s-result_score{}
	.s-result_score__number{}
	.s-result_cmd{}
	.s-result_cmd__items{}
	.s-result_cmd__item{}
	.s-result_cmd__button{}
}

@media print, screen and (max-width:768px){
	.s-result__header{}
	.s-result_score{}
	.s-result_score__number{}
	.s-result_cmd{}
	.s-result_cmd__items{}
	.s-result_cmd__item{}
	.s-result_cmd__item--print{
		display: none;
	}
	.s-result_cmd__button{}

}





@keyframes kf-appearance{
	from	{ opacity: 0; transform: scaleY(-1) translateX(-50%); }
	to		{ opacity: 1; transform: scaleY(-1) translateX(0%); }
}


.s-table1{
	min-width: 100%;
	border-collapse: collapse;
	border: 1px solid;

	font-size: .875em;
	line-height: 1.5em;

	transform: scaleY(-1);
	animation: kf-appearance 960ms ease-in-out;
}
.s-table1__thead{
	background-color: #333;
}
.s-table1__tbody{}
.s-table1__head,
.s-table1__body{
	padding: .5em 1em;
	text-align: center;
	vertical-align: middle;
	border-left: 1px dotted;
	border-bottom: 1px solid;

	white-space: nowrap;
}
.s-table1__head{
	white-space: nowrap;
}
.s-table1__body{}
.s-table1__tbody .s-table1__head,
.s-table1__tbody .s-table1__body{
	vertical-align: top;
}

@media print, screen and (min-width:769px){}
@media print, screen and (max-width:768px){}



.s-comment{}
.s-comment__item{
	padding-left: 1em;
	text-indent: -1em;

	margin-bottom: .25em;
	padding-bottom: .25em;
	border-bottom: 1px solid;
}

@media print, screen and (min-width:769px){}
@media print, screen and (max-width:768px){}



.s-annot{}
.s-annot__item{
	padding-left: 1em;
	text-indent: -1em;
}

@media print, screen and (min-width:769px){}
@media print, screen and (max-width:768px){}

















@media print, screen and (min-width:769px){}
@media print, screen and (max-width:768px){}








/* 印刷用 */
@media print{
	.s-search{
		color: #000;
	}
	.s-scroll{
		overflow: visible;
	}
	.s-table1{
		border: 1px solid #000;
	}
	.s-table1__head,
	.s-table1__body{
		white-space: normal;
		word-break: break-all;
		border: 1px solid #000;
	}
	.s-annot{
		list-style: none;
	}
	
	/* 印刷時：不要 */
	.s-cond_header__label,
	.s-cond__explain,
	.s-cond__explain_2,
	.s-cond_addInfo,
	.s-result_cmd,
	.sp_social,
	footer{
		display: none;
	}

}