/* Title:       Products Compare
   Theme URI:   http://www.casio.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* Console
─────────────────────────────────────────────────────────────────────────────────── */

.compare-head [class*="button"] {
	position: relative;
	display: block;
	width: 100%;
}
.compare-head .console .clear {
	display: block;
	border-radius: 5px;
	border: 1px solid #dcdcdc;
	margin: 0 1em;
	background: #fff;
	line-height: 3.1em;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	cursor: pointer;
}
.compare-head .console .clear > span {
	margin-right: .5em;
}
.compare-head [class*="icon-ah"] {
	position: absolute;
	top: 50%;
}
.compare-head [class*="icon-ah-t"] {
	margin-top: -1em;
}
.compare-head [class*="icon-ah-b"] {
	margin-bottom: -1em;
}
.compare-head ul[class*="tab-"] {
	margin-bottom: 1.5em;
}

.fixed-head{
	transition: all 300ms 0s ease;
}

.fixed-head.tableheadfixed .figure
,.fixed-head.tableheadfixed a
,.fixed-head.tableheadfixed .console > *
,.fixed-head.tableheadend .figure
,.fixed-head.tableheadend a
,.fixed-head.tableheadend .console > *{
	display: none;
}

.fixed-head.tableheadend{
	position: fixed;
}

.fixed-head.tableheadfixed .console{
	background: #f5f5f5;
}


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

	.compare-head .grid-1 {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.compare-head .grid-1 > .column {
		padding: 0;
	}
	.compare-head ul[class*="tab-"] {
		width: 100%;
		margin: 0;
	}



	.compare-head table td {
		margin: 0;
		padding: 0;
		clear: both;
	}
	.compare-head table td.console {
		padding: 0 3%;
	}
	.compare-head table td.console + td {
		border-top: 0 none;
	}

	/* button */
	.compare-head [class*="button"] {
		padding: 1em 1.5em 1em 3%;
		font-weight: normal;
		text-align: left;
	}
	[class*="icon-ah"] {
		right: 0;
	}

	/* console leyout */
	.compare-head table td.console {
		padding-top: 1em;
		padding-bottom: 1em;
		position: relative;
		border: 0 none;
		background: #f5f5f5;
	}
	.compare-head table td.console .t-size-large {
		margin: 0;
		padding: 0;
		font-weight: normal;
	}
	.compare-head table td.console .clear {
		position: absolute;
		top: .6em;
		right: 3%;
		padding: 0 2em;
		font-size: .8em;
		text-align: center;
		font-weight: normal;
	}
	.compare-head table td > div {
		clear: both;
	}

	/* figure */
	.compare-head:not(.fixed-head) table td > div > .figure {
		box-sizing: border-box;
		float: left;
		width: 31.333%;
		padding: 1em 3%;
		text-align: center;
	}
	.compare-head:not(.fixed-head) table td > div > .figure img {
		display: inline-block;
	}

	/* Console - data */
	.compare-head:not(.fixed-head) table td > div > .data {
		float: right;
		width: 68.667%;
	}

	.compare-head:not(.fixed-head) table td.is-empty > div > .data {
		clear: both;
		width: 100%;
	}

	.compare-head.fixed-head [class*="table-"]{
		overflow-x: scroll;
	}

	.compare-head.fixed-head table{
		min-width: 450px;
		width: 100%;
	}

	.compare-head.fixed-head.tableheadfixed table{
		display: table;
		table-layout: fixed;
	}

	.compare-head.fixed-head.tableheadfixed table tbody{
		display: table-row-group;
	}

	.compare-head.fixed-head.tableheadfixed table tr{
		display: table-row;
	}

	.compare-head.fixed-head td:not(.console){
		display: table-cell;
		vertical-align: top;
		min-width: calc(150px - 6.5%);
    width: 26%;
	}

	.compare-head table td > div > .figure{
		padding: 1em 3%;
		text-align: center;
	}

	.compare-head.tableheadfixed .console{
		display: none;
	}
	.compare-head.tableheadfixed .grid-1{
		padding-top: 0;
		padding-bottom: 0;
	}

}

/* PC > 768px */
@media print, screen and (min-width: 48em) {

	.compare-head .grid-1 > .column .table-s2 {
		margin: 0 -1.5%;
	}
	.compare-head table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
	}
	.compare-head [class*="table-s"] td {
		width: 25%;
		padding: 1.5%;
		padding: 1.5% 0;
		vertical-align: top;
		text-align: center;
		border: 1px solid #d5d4d4;
	}
	.compare-head table td.console {
		border: 0 none;
	}
	.compare-head table td.console .clear {
		margin-top: 1px;
	}
	.compare-head table td.console .clear:focus {
	}
	.compare-head table td.console .clear:hover {
		color: #696969;
		border-color: #e2e1e1;
	}

	/* Figure */
	.compare-head [class*="table-s"] .figure {
		position: relative;
		height: 12em;
		margin: 1em 6% 2.6em;
	}
	.compare-head .figure img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: inline-block;
		margin: auto;
		max-width: 100%;
		max-height: 9.5em;
		vertical-align: top;
	}

	/* Button */
	.compare-head [class*="button"] {
		width: 88%;
		margin: 0 auto;
		padding: .9em 3em;
	}
	.compare-head .select-set [class*="button"] {
		padding-left: 1.417em;
	}
	.compare-head [class*="icon-ah"] {
		right: .75em;
	}

	/* リンク */
	.compare-head table td {
		position: relative;
	}
	.compare-head table td > div > a {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2.417em;
		display: block;
		width: 80%;
		max-width: 10em;
		margin: 0 auto;
		padding-left: 10%;
		text-align: center;
		text-decoration: none;
	}
	.compare-head table td > div > a:hover {
		text-decoration: underline;
	}
	.compare-head table td div > a [class*="icon-ah"] {
		top: .2em;
		left: 0;
	}

	.compare-head.tableheadfixed .frame
	,.compare-head.tableheadfixed .column{
		background: transparent;
	}

}


/* Select
─────────────────────────────────────────────────────────────────────────────────── */
.sp-overlay-wrap {
	display: none;
}

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

	.sp-overlay-wrap {
		display: block;
		position: relative;
	}

	.sp-overlay-wrap.is-open > .background {
		position: fixed;
		left: 0;
		top: 0;
		display: block;
		content: attr(data-content);
		width: 100%;
		height: 120%;
		background: rgba(255, 255, 255, .7);
		z-index: 10;
	}

	.compare-head .select-set .select-body,
	.compare-head .select-set.is-open .select-body {
		display: none;
	}

	.sp-overlay-wrap .select-item {
		position: fixed;
		left: 30px;
		top: 40px;
		display: none;
		box-sizing: border-box;
		border: 1px solid #dbdbdd;
		width: 80%;
		height: 80%;
		background: #f4f4f4;
		z-index: 11;
	}

	.sp-overlay-wrap.is-open .select-item > .close {
		position: absolute;
		top: -25px;
		right: 0;
		display: inline-block;
		margin: 0;
		height: 1.6em;
		padding: 0 .33em;
		font-weight: bold;
		cursor: pointer;
		background: rgba(255, 255, 255, 1);
	}
	.sp-overlay-wrap.is-open .select-item:last-child {
		display: block;
	}

	.sp-overlay-wrap .select-item .select-title {
		box-sizing: border-box;
		padding: .5em 1em;
		background: #f4f4f4;
		text-align: center;
		font-weight: bold;
	}
	.sp-overlay-wrap .select-item .select-body {
		box-sizing: border-box;
		margin: 0 9px;
		height: 100%;
		background: #fff;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	/* Table */
	.sp-overlay-wrap .select-item .select-table {
		display: table;
		table-layout: fixed;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	.sp-overlay-wrap .select-item .select-table .select-row {
		display: table-row;
		text-decoration: none;
		border-bottom: 1px solid #d5d4d4;
	}
	.sp-overlay-wrap .select-item .select-table figure {
		display: table-cell;
		width: 30%;
		padding: 1%;
		text-align: center;
		vertical-align: middle;
		background: #fff;
	}
	.sp-overlay-wrap .select-item .select-table figure img {
		display: inline-block;
		max-height: 3em;
		vertical-align: top;
	}
	.sp-overlay-wrap .select-item .select-table .data {
		display: table-cell;
		width: 70%;
		padding: 1%;
		text-align: left;
		vertical-align: middle;
		word-wrap: break-word;
		color: #100d0d;
	}

}

/* PC > 768px */
@media print, screen and (min-width: 48em) {
	.compare-head .select-set {
		position: relative;
		min-height: 5.5em;
	}

	.compare-head .select-set .select-body {
		display: none;
	}
	.compare-head .select-set.is-open .select-body {
		position: absolute;
		z-index: 10;
		display: block;
		max-height: 18em;
		overflow-y: auto;
		padding: 0 6% 6%;
		background: #fff;
		border-bottom: 1px solid #d5d4d4;
	}

	.compare-head .select-set .select-title {
		display: none;
	}

	/* Table */
	.compare-head .select-set.is-open .select-table {
		display: table;
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
	}
	.compare-head .select-set.is-open .select-table .select-row {
		display: table-row;
		text-decoration: none;
		border-bottom: 1px solid #d5d4d4;
	}
	.compare-head .select-set.is-open .select-table figure {
		display: table-cell;
		width: 30%;
		padding: 3%;
		text-align: center;
		vertical-align: middle;
		background: #fff;
	}
	.compare-head .select-set.is-open .select-table figure img {
		display: inline-block;
		max-height: 3em;
		vertical-align: top;
	}
	.compare-head .select-set.is-open .select-table .data {
		display: table-cell;
		width: 70%;
		padding: 3%;
		text-align: left;
		vertical-align: middle;
		word-wrap: break-word;
		color: #100d0d;
		background: #f5f5f5;
	}

	/* hover */
	.compare-head .select-set.is-open .select-table .select-row:hover .data,
	.compare-head .select-set.is-open .select-table .select-row.current .data {
		background: #d5d4d4;
	}
}


/* compare-head
─────────────────────────────────────────────────────────────────────────────────── */
/* SP < 768px */
@media print, screen and (max-width: 47.9em) {
	.compare-datas-head + .compare-datas article:last-child {
		padding-bottom: 1em;
	}
	.fixed-body .compare-datas-head h2{
		margin-bottom: 0;
    padding: 1em 3%;
    font-size: 1.07em;
    font-weight: bold;
	}
}

/* PC > 768px */
@media print, screen and (min-width: 48em) {

	.compare-datas-head{
		margin-top: 0;
	}
}


/* Table
─────────────────────────────────────────────────────────────────────────────────── */

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

	/* Table */
	.compare-datas article:first-child {
		display: none;
	}
	.fixed-body .compare-datas article:first-child {
		display: block;
	}
	.compare-datas article + article {
		padding: .25em 2% 0;
	}
	.compare-datas article:first-child + article {
		padding-top: 0;
	}
	.fixed-body .compare-datas article:first-child + article {
		padding-top: .25em;
	}
	.compare-datas .column {
		padding: 0;
	}
	.compare-datas table th {
		margin: 0;
		padding: 1em 3%;
		font-size: 1.07em;
		font-weight: bold;
	}
	.compare-datas table td {
		margin: 0;
		padding: 0;
	}
	.compare-datas table td ~ td {
		margin: 0;
		border-top: 1px solid #d5d4d4;
	}
	.compare-datas table td.is-empty {
		border-top: 0 none;
	}
	.compare-datas hr {
		margin-bottom: 0;
		padding-top: 1.3em;
	}

	/* Product Name */
	.compare-datas .product-name {
		padding: .5em 3%;
		margin-bottom: 0;
		font-weight: bold;
		border-bottom: 1px solid #E8E8E8;
	}

	/* Data Table */
	.compare-datas .product-data {
		display: table;

		width: 100%;
	}
	.compare-head .product-data > .figure,
	.compare-datas .product-data > div {
		display: table-cell;
		vertical-align: top;
		padding: 1em 3%;
	}

	.compare-datas .product-data .figure {
		width: 31.333%;
		text-align: center;
	}
	.compare-datas .product-data .figure img {
		display: inline-block;
		max-width: 100%;
	}

	/* リンク */
	.compare-head table td div > a {
		display: none;
	}

	.compare-datas .product-data .data {
		font-size: .8em;
	}

}

/* PC > 768px */
@media print, screen and (min-width: 48em) {

	/* layout */
	.compare-datas .grid-1 > .column .table-s2
	,	.compare-datas .grid-1 > .column .table-m2 {
		margin: 0 -1.5%;
	}

	.compare-datas .grid-1 > .column .table-m2{
		width: auto;
	}

	/* table */
	/* .compare-datas article:first-child td {
		background: #f5f5f5;
		text-align: center;
	}
	.compare-datas article:first-child td.is-empty {
		background: transparent;
	} */
	.compare-datas .frame table {
		table-layout: fixed;
	}
	.compare-datas table th,
	.compare-datas table td {
		display: table-cell;
		border-bottom: 0 none;
		width: 25%;
	}
	.compare-datas table th {
		font-weight: normal;
		border-left: 0 none;
		text-align: center;
	}
	.compare-datas table td {
		vertical-align: top;
	}

	.compare-datas .frame:first-child table th,
	.compare-datas .frame:first-child table td {
		border-top: 1px solid #d5d4d4;
	}

	/* empty cell */
	.compare-datas table td.is-empty {
		border-top: 0 none;
	}

	/* border */
	.compare-datas {
		position: relative;
	}
	.compare-datas:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 82%;
		max-width: 65.75em;
		height: 1px;
		margin: 0 auto;
		background: #d5d4d4;
	}

	.compare-datas [class*="table-m"] table{
		margin-bottom: 0;
	}

}


/* Narrow Toggle
─────────────────────────────────────────────────────────────────────────────────── */

/* Color Variation */
.compare-datas [class*="table-s"].mark td{
	text-align: center;
}

.compare-datas [class*="table-s"] td .data {
	position: relative;
	vertical-align: middle;
}
.compare-datas [class*="table-s"] td .data ul.list-symbol {
	margin: .5em 0 0;
}

.fixed-body .compare-datas td .color-variation .count{
	font-size: 1.5em;
	font-weight: bold;
}

.compare-datas [class*="table-s"] td .color-variation .label {
	float: left;
	display: block;
}
.compare-datas [class*="table-s"] td .color-variation ul {
	display: block;
	list-style: none;
	margin: 0;
	overflow: hidden;
}
.compare-datas [class*="table-s"] td .color-variation li {
	float: left;
	list-style: none;
	display: table;
	margin: 0 1em 0 0;
}
.compare-datas [class*="table-s"] td .color-variation li span {
	display: table-cell;
	height: 1.6em;
	vertical-align: middle;
}
.compare-datas [class*="table-s"] td .color-variation span span {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px solid #d5d4d4;
}
/* PC > 768px */
@media screen and (min-width: 48em) {
	.sp-inner-table-header{
		display: none;
	}
	table.sp-inner-table th{
		display: block;
		width: calc(100% - 2.064em);
		padding: .4em .882em;
		background: #d7d7d7;
		color: #282828;
		border: 0;
    border-left: solid .3em #414a7e;
		font-size: 1.133em;
		font-weight: bold;
		margin-bottom: 0;
		text-align: left;
	}
	table.sp-inner-table td{
		display: table;
		table-layout: fixed;
		width: 100%;
		margin-bottom: 0;
		border-left: 0;
	}
	table.sp-inner-table dl{
		display: table-row;
	}
	table.sp-inner-table dd
	,	table.sp-inner-table dt{
		display: table-cell;
		border-right: solid 1px #ccc;
	}
	table.sp-inner-table dt{
		border-left: none;
		text-align: center;
		background: #f5f5f5;
		padding: 1.2em;
		font-size: 1em;
	}
	table.sp-inner-table dd{
		vertical-align: middle;
	}
}

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

	/* icon */
	.compare-datas [class*="table-s"],
	.compare-datas [class*="table-s"] th {
		position: relative;
		overflow-x: scroll;
	}
	.compare-datas [class*="table-s"] th .icon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 3%;
		margin: auto;
	}
	.fixed-body .compare-datas [class*="table-s"] th .icon {
		position: static;
	}

	/* close */
	.compare-datas [class*="table-s"] th{
		background-color: #100d0d;
		color: #fefefe;
	}
	.compare-datas [class*="table-s"] th .icon[class*="plus"] {
		display: block;
	}
	.fixed-body .compare-datas [class*="table-s"] th .icon[class*="plus"]
	,	.compare-datas-head h2 .icon[class*="plus"] {
		display: inline-block;
	}
	.compare-datas [class*="table-s"] th .icon[class*="minus"]
	,	.compare-datas-head h2 .icon[class*="minus"] {
		display: none;
	}


	.compare-datas [class*="table-s"] .is-close th .icon[class*="plus"]
	,	.compare-datas-head.is-close h2 .icon[class*="plus"] {
		display: none;
	}

	.compare-datas [class*="table-s"] .is-close th .icon[class*="minus"] {
		display: block;
	}
	.fixed-body .compare-datas [class*="table-s"] .is-close th .icon[class*="minus"]
	,	.compare-datas-head.is-close h2 .icon[class*="minus"] {
		display:inline-block;
	}

	.fixed-body .compare-datas-head .column{
		overflow-x: scroll;
	}

	.fixed-body table
	,.fixed-body .compare-datas-head .title-panel{
		min-width: 450px;
		width: 100%;
	}

	.fixed-body th{
		display: block;
		padding: 0;
		border: none;
		background: transparent;
		font-size: 1em;
	}

	.fixed-body .compare-datas .js-toggle-compare td{
		display: none !important;
	}
	.fixed-body .compare-datas .js-toggle-compare.is-close:not(.sp-inner-table) td{
		display: inline-block !important;
		float: left;
		min-width: calc(150px - 6%);
		width: 33%;
		border-right: solid 1px #ccc;
	}
	.fixed-body .compare-datas .js-toggle-compare.is-close:not(.sp-inner-table) td:last-child{
		border-right: 0;
	}
	.fixed-body .compare-datas .js-toggle-compare.is-close.sp-inner-table td{
		display: block !important;
		min-width: 450px;
		width: 100%;
		padding: 0;
		border-bottom: solid 1px #100d0d;
	}
	.fixed-body .compare-datas .js-toggle-compare.is-close.sp-inner-table td:last-child{
		border-bottom: 0;
	}
	.fixed-body .compare-datas .sp-inner-table dt{
		display: block;
		text-align: left;
		font-weight: bold;
		padding: 1em 3%;
		border-bottom: solid 1px #ccc;
	}
	.fixed-body .compare-datas .sp-inner-table dd{
		display: inline-block;
		padding: 1em 3%;
		width: 27%;
		border-right: solid 1px #ccc;
	}
	.fixed-body .compare-datas .sp-inner-table dl dd:last-child{
		border-right: 0;
	}
	.fixed-body .compare-datas .mark .js-toggle-compare.is-close:not(.sp-inner-table) td{
		padding: 1em 3%;
		min-width: calc(150px - 6.5%);
		width: 26%;
		border-top: 0;
	}

}

/* note
─────────────────────────────────────────────────────────────────────────────────── */

.grid-1 .list-symbol {
	margin: 1em 0;
}
.list-symbol li {
	margin: 0;
}

/* PC > 768px */
@media print, screen and (min-width: 48em) {
	.grid-1 .list-symbol {
		margin: 2em 0 0;
	}
}



@media print, screen and (min-width: 48em) {
	.t-size-small.title-side.title-panel{
		margin-top: 0;
		margin-bottom: 0;
	}
}