.product-condition .condition-addon {
	position: relative;
	padding-bottom: 1.3em;
}
.product-condition .condition-addon:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
}

.product-condition .grid--1 > .column > .condition-addon {
	margin-left:  -1.6%;
	margin-right: -1.6%;
	max-width: 104.2%;
}

.product-condition .condition-addon .search {
	float: right;
	display: inline-block;
	margin-left: 1.3em;
}
.product-condition .condition-addon .search:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
}

.product-condition .condition-addon .search .text-wrapper {
	float: left;
	display: inline-block;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	border-left: 7px solid #dcdcdc;
	width: 20em;
	height: 2.5em;
	overflow: hidden;
	background: #dcdcdc;
	vertical-align: middle;
	-webkit-transition: width .25s ease-out;
	transition: width .25s ease-out;
}
.product-condition .condition-addon .search .text-wrapper input {
	opacity: 0;
}
.product-condition .condition-addon .search .text-wrapper input {
	-webkit-appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
	width: 100%;
	height: 100%;
	padding: 0 0.2em 0 0.7em;
	background: #f5f5f5;
	font-size: 1em;
	opacity: 1;
}
.product-condition .condition-addon .search .search-icon {
	float: left;
	position: relative;
	display: inline-block;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border: 1px solid #dcdcdc;
	width: 3.2em;
	height: 2.5em;
	background: #f5f5f5;
	cursor: pointer;
}
.product-condition .condition-addon .search .search-icon .icon {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	margin: auto;
}

.product-condition .condition-addon .clear {
	float: right;
	display: inline-block;
	border-radius: 5px;
	border: 1px solid #dcdcdc;
	padding: 0 1.8em;
	background: #fff;
	line-height: 3.1em;
	text-decoration: none;
	font-size: .8em;
	color: #000;
	cursor: pointer;
}
.product-condition .condition-addon .clear > span {
	margin-right: .5em;
}

.product-condition .tab-2,
.product-condition .tab-3,
.product-condition .tab-4,
.product-condition .tab-5 {
	margin-left: -2.2%;
}
.product-condition [class*="tab-"] li.set:after {
	position: absolute;
	left: -1px;
	top: -1px;
	display: block;
	content: "";
	width: 1.33em;
	height: 1.33em;
	background: url('https://world.casio.com/theme/images/icons.svg') no-repeat -7.98em -122.36em;
	background-size: 22.6em 150.3em;
	z-index: 2;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.product-condition [class*="tab-"] li.current.set:after {
	top: -10px;
}

.product-condition .condition-area {
	display: none;
	border-right: 1px solid #d5d4d4;
	border-bottom: 1px solid #d5d4d4;
	border-left: 1px solid #d5d4d4;
	padding: 1.3em 0.675em 1.3em 1.3em;
}
.product-condition .condition-area:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
}
.product-condition .condition-area.current {
	display: block;
}

.product-condition .condition-area .form-title {
	display: none;
}
.product-condition .condition-area .form-contents .note {
	clear: left;
	margin: 0;
	padding-top: 10px;
}
.product-condition .condition-area .form-contents .note li {
	margin-bottom: 0;
}

.product-condition .grid--1 > .column > .condition-area {
	margin-left:  -1.6%;
	margin-right: -1.6%;
	max-width: 104.2%;
}

.product-condition .condition-area label {
	float: left;
	position: relative;
	margin-right: 0.625em;
	margin-bottom: 0.625em;
	cursor: pointer;
}
.product-condition .condition-area label input[type="checkbox"],
.product-condition .condition-area label input[type="radio"] {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	font-size: 16px;
}
.product-condition .condition-area label input[type="checkbox"] + span,
.product-condition .condition-area label input[type="radio"] + span{
	display: inline-block;
	border-radius: 6px;
	border: 1px solid #d5d4d4;
	padding: 2px;
	background: #eee;
}

.product-condition .condition-area label.checked input[type="checkbox"] + span,
.product-condition .condition-area label.checked input[type="radio"] + span {
	border: 3px solid #003295;
	padding: 0;
	background: #fff;
}

.product-condition .condition-area label input[type="checkbox"]:checked + span,
.product-condition .condition-area label input[type="radio"]:checked + span {
	border: 3px solid #003295;
	padding: 0;
	background: #fff;
}
.product-condition .condition-area label input[type="checkbox"] + span > span,
.product-condition .condition-area label input[type="radio"] + span > span {
	display: inline-block;
	padding: .4em 3em;
}

.product-condition .condition-area .range-selector {
	position: relative;
	margin: 0 2.425em 0 1.8em;
	padding-top: 4em;
}

.product-condition .condition-area .range-str {
	padding-top: 4.5em;
	padding-bottom: 1em;
}
.product-condition .condition-area .range-str .label:after {
	display: inline-block;
	margin: 0 .2em;
	content: ':';
}
.product-condition .condition-area .range-str .price {
	font-weight: bold;
	color: #013298;
}
.product-condition .condition-area .range-str .from {
	display: inline-block;
	margin: 0 .3em;
	font-weight: bold;
}
.product-condition .condition-area .range-str .from:before {
	display: inline;
	content: '\00301C';
}

.product-condition .hdnSearchBtn {
	display: none;
}


/* SP < 768px */
@media print, screen and (max-width: 47.9em) {

	.product-condition .condition-addon {
		position: relative;
		text-align: center;
		height: 5.5em;
	}

	.product-condition .condition-addon .search {
		position: absolute;
		right: 0;
		top: 3.5em;
		float: inherit;
		width: 100%;
		height: 2.5em;
	}

	.product-condition .condition-addon .search .text-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 3.2em;
		width: auto;
		box-sizing: border-box;
	}
	.product-condition .condition-addon .search .search-icon {
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
	}

	.product-condition .condition-addon .search .text-wrapper input {
		font-size: 16px;
	}

	.product-condition .condition-addon .clear {
		position: relative;
		float: inherit;
		z-index: 2;
	}

	.product-condition .condition-tab {
		display: none;
	}

	.product-condition .grid-1 > .column > .condition-area {
		margin-left:  -3.25%;
		margin-right: -3.25%;
		max-width: 106.5%;
	}

	.product-condition .condition-area {
		position: relative;
		display: block;
		margin-left: -3.25%;
		margin-right: -3.25%;
		max-width: 106.5%;
		border-top: 1px solid #d5d4d4;
		border-right: 1px solid #eaeaea;
		border-bottom: none;
		border-left: 1px solid #eaeaea;
		padding: 0;
	}
	.product-condition .condition-area:first-child {
		position: relative;
		border-top: none;
	}
	.product-condition .condition-area:first-child:before {
	}
	.product-condition .condition-area.set:before {
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		content: "";
		width: 20px;
		height: 20px;
		background: url(https://world.casio.com/assets/images/product/bg-tab-set.png) no-repeat left top;
		z-index: 2;
	}
	.product-condition .condition-area .form-title {
		position: relative;
		display: block;
		margin: 0 -1px 0 0;
		padding: 1em;
		background: #eaeaea;
		text-align: center;
		z-index: 1;
	}
	.product-condition .condition-area.current .form-title {
		background: #fff;
	}
	.product-condition .condition-area:first-child .form-title {
		border-top: 1px solid #eaeaea;
	}
	.product-condition .condition-area.current .form-title:after {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		content: "";
		width: 100%;
		height: 1px;
		background: #eaeaea;
		z-index: 1;
	}
	.product-condition .condition-area .form-contents {
		position: relative;
		display: none;
		padding: 1em 1em .5em 1em;
	}
	.product-condition .condition-area:last-child .form-contents {
		border-bottom: 1px solid #eaeaea;
	}
	.product-condition .condition-area .form-contents .frame > label {
		float: none;
		margin-right: 0;
		width: 100%;
	}
	.product-condition .condition-area .form-contents .frame > label input[type="checkbox"] + span,
	.product-condition .condition-area .form-contents .frame > label input[type="radio"] + span,
	.product-condition .condition-area .form-contents .frame > label input[type="checkbox"] + span > span,
	.product-condition .condition-area .form-contents .frame > label input[type="radio"] + span > span {
		display: block;
		text-align: left;
	}
	.product-condition .condition-area .form-contents .frame > label input[type="checkbox"] + span > span,
	.product-condition .condition-area .form-contents .frame > label input[type="radio"] + span > span {
		padding: .4em;
	}
	.product-condition .condition-area .form-contents .frame + .btn-area {
		display: none;
		border-right: 1px solid #d5d4d4;
		border-bottom: 1px solid #d5d4d4;
		border-left: 1px solid #d5d4d4;
		padding: 0 1em 1em;
		background: #fff;
	}

	.product-condition .condition-area .form-contents .frame + .btn-area [class*="button"] {
		width: 100%;
	}

	.product-condition .condition-area .form-contents .note {
		margin-bottom: 15px;
	}

	.product-condition .condition-area.current .form-contents {
		position: fixed;
		left: 0;
		right: 0;
		top: 30px;
		box-sizing: border-box;
		display: block;
		padding: 0;
		margin: 0 9% 30px 9%;
		z-index: 100;
	}

	.product-condition .condition-area .background {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, .7);
		z-index: 10;
	}
	.product-condition .condition-area .js-close {
		position: absolute;
		top: -25px;
		right: 0;
		padding: 0 .33em;
		background: #fff;
		z-index: 11;
	}
	.product-condition .condition-area.current .background {
		display: block;
	}

	.product-condition .condition-area.current .form-contents .frame {
		height: 100%;
		box-sizing: border-box;
		border-top: 1px solid #d5d4d4;
		border-right: 1px solid #d5d4d4;
		border-left: 1px solid #d5d4d4;
		background: #fff;
		padding: 1em;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		z-index: 11;
	}
	.product-condition .condition-area.current .form-contents .frame + .btn-area {
		display: block;
	}

	.product-condition .condition-area .range-selector {
		position: relative;
		margin: 0 auto;
		width: 245px;
		height: 390px;
		padding: 0;
	}
	.product-condition .condition-area .range-selector .range-bar {
		position: absolute;
		left: 135px;
		top: 20px;
	}

	.product-condition .condition-area .range-str {
		position: absolute;
		left: 0;
		top: 100px;
		width: 90px;
		padding: 0;
	}

	.product-condition .condition-area .range-str .label {
		display: block;
		margin-bottom: 15px;
		border-bottom: 1px solid #aeaeae;
		padding-bottom: 15px;
		text-align: center;
	}
	.product-condition .condition-area .range-str .label:after {
		display: none;
	}
	.product-condition .condition-area .range-str .label> span {
		display: block;
	}
	.product-condition .condition-area .range-str .price {
		display: block;
		padding: 10px 0;
		text-align: center;
		line-height: 1;
	}
	.product-condition .condition-area .range-str .from {
		position: relative;
		display: block;
		width: 90px;
		height: 42px;
		padding: 0
	}
	.product-condition .condition-area .range-str .from:before {
		position: absolute;
		left: 50%;
		top: 0;
		display: block;
		content: '';
		width: 1px;
		height: 42px;
		background: #013298;
	}
}

/* Counter */
.counter {
	margin: 0 auto;
	padding: 1em 0;
	font-size: 1.46em;
}
.search-attention {
	font-size: 1.46em;
	text-align: center;
}
.search-attention .icon {
	top: 0;
	margin-right: 1em;
}
.counter span {
	font-weight: bold;
	color: #003195;
}


/* PC > 768px */
@media print, screen and (min-width: 48em) {
	/* Pagenation */
	.pagination {
		padding: 0 0 2em;
	}
	section.bg-ultra-light-grey .pagination {
		padding-bottom: 2.67em;
	}
}

/* Range Selector */

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.noUi-target {
	position: relative;
	direction: ltr;
}
.noUi-base {
	position: relative;
	width: 100%;
	height: 100%;
}
.noUi-base:before {
	display: block;
	left: 0;
	top: 0;
	content: "";
	background: #e0e0e0;
}
.noUi-horizontal .noUi-base:before {
	width: 100%;
	height: 10px;
}
.noUi-vertical .noUi-base:before {
	width: 10px;
	height: 100%;
}

.noUi-origin {
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
}
.noUi-handle {
	position: relative;
	z-index: 1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
	 its values is > 50%. */
	z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
	 creates a new context for the origins. */
	*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
	transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
	cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base {
	position: relative;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	z-index: 2;
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
	height: 10px;
}
.noUi-horizontal .noUi-handle {
	width: 30px;
	height: 30px;
	left: -15px;
	top: -10px;
}
.noUi-vertical {
	width: 10px;
	height: 340px;
}
.noUi-vertical .noUi-handle {
	width: 20px;
	height: 20px;
	left: -5px;
	top: -10px;
	background: #414a7e;
}

/* Styling;
 */
.noUi-background {
	background: #e0e0e0;
}
.noUi-connect {
	background: #013195;
-webkit-transition: background 450ms;
	transition: background 450ms;
}
.noUi-origin {
}
.noUi-target {
}
.noUi-target.noUi-connect {
	box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}

/* Handles and cursors;
 */
.noUi-dragable {
	cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
	cursor: n-resize;
}
.noUi-handle {
	cursor: pointer;
}
.noUi-active {
}

/* Handle stripes;
 */
.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
	content: "";
	display: block;
	position: absolute;
	height: 30px;
	width: 6px;
	background: #013195;
	left: 12px;
	top: 0;
}
.noUi-horizontal .noUi-handle:after {
	display: none;
	left: 17px;
}

/* Handle Tooltip;
 */
.noUi-horizontal .noUi-handle .tooltip {
	position: absolute;
	left: 50%;
	top: -3.73em;
	display: table;
	margin-left: -35px;
	width: 70px;
	height: 30px;
	background: #e8e8e8;
	text-align: center;
	line-height: 2.2em;
	font-size: .93em;
}
.noUi-horizontal .noUi-handle .tooltip:before {
	position: absolute;
	left: 50%;
	bottom: -.5em;
	display: block;
	margin-left: -.4em;
	content: "";
	border-top: .6em solid #e8e8e8;
	border-left: .5em solid transparent;
	border-right: .5em solid transparent;
	width: 0;
}

.noUi-horizontal .noUi-handle .tooltip span {
	display: table-cell;
	height: 30px;
	line-height: 1.2;
	vertical-align: middle;
}

.noUi-vertical .noUi-handle .tooltip {
	display: none;
}

/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
	background: #B8B8B8;
}
[disabled] .noUi-handle {
	cursor: not-allowed;
}


/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.noUi-pips {
	position: absolute;
	font-size: .93em;
	color: #999;
}

/* Values;
 *
 */
.noUi-value {
	width: 60px;
	position: absolute;
	text-align: center;
	white-space: nowrap;
	line-height: 1em;
	color: #000;
}
.noUi-value-sub {
	font-size: 10px;
}

/* Markings;
 *
 */
.noUi-marker {
	position: absolute;
	background: #CCC;
	z-index: 1;
}
.noUi-marker-normal,
.noUi-marker-sub {
	display: none;
}
.noUi-marker-large {
	background: #AAA;
}

/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
	position: relative;
	padding: 0;
	height: 58px;
	top: -34px;
	left: 0;
	width: 100%;
	z-index: 1;
}
.noUi-pips-horizontal:before {
	position: absolute;
	left: -1px;
	top: 19px;
	display: block;
	content: "";
	width: 102%;
	height: 20px;
	background: #fff;
	z-index: 2;
}
.noUi-value-horizontal {
	top: 65px;
	margin-left: -40px;
	width: 80px;
	line-height: 1.2;
	white-space: inherit;
	word-break: break-word;
}

.noUi-value-horizontal span {
	white-space: nowrap;
}
.noUi-value-horizontal.noUi-value-sub {
	padding-top: 15px;
}


.noUi-marker-horizontal.noUi-marker {
	margin-left: 0;
	width: 1px;
	height: 5px;
	z-index: 0;
}
.noUi-marker-horizontal.noUi-marker-large {
	height: 58px;
}

/* Vertical layout;
 *
 */
.noUi-pips-vertical {
	position: relative;
	padding: 0 10px 0 0;
	width: 58px;
	height: 100%;
	top: -100%;
	left: 0;
	margin-left: -24px;
	z-index: 1;
}
.noUi-pips-vertical:before {
	position: absolute;
	left: 19px;
	top: 0;
	display: block;
	content: "";
	width: 20px;
	height: 102%;
	background: #fff;
	z-index: 2;
}

.noUi-value-vertical {
	width: 15px;
	margin-left: 70px;
	margin-top: -5px;
}

.noUi-marker-vertical.noUi-marker {
	width: 5px;
	height: 1px;
}
.noUi-marker-vertical.noUi-marker-large {
	width: 58px;
}

.search-loading .loading {
	position: relative;
	margin-bottom: 20px;
	padding: 100px 0;
	background: url('https://world.casio.com/assets/images/loading.gif') no-repeat center center;
	text-align: center;
	z-index: 8;
}