@charset "UTF-8";

.compare{
	font-size:min(1.6rem,16px);
	word-break: normal;
}
.compare h1 {
	text-align: center;
	font-weight:400;
	font-size:2.375em;
	margin:2em auto 1.5em;
}
.compare p.lead {
	max-width:min(115rem,1150px);
	margin: auto;
	text-align: center;
	margin-bottom: 3em;
}
/* 比較 */
.compare dl {
	max-width: min(115rem,1150px);
	margin: auto;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.compare > dl:last-of-type {
	margin-bottom:min(12rem,120px);
	border-bottom: none;
}
.compare dl > dt {
	width: 15%
}
.compare dl > dd {
	width: 25%
}
.compare dl > dd span {
	display: inline-block;
	font-size: 0.75em;
	background-color: #ddd;
	margin: 2px 3px 0 0;
	padding: 0 2px;
	border-radius: 2px;
}

/* 機種選択 */
.compare dl#model {
	border-bottom: none;
	margin-bottom: 0.3em;
}
.compare dl#model dd {
	position: relative;
}
.compare dl#model dd h3 {
	margin:0;
	font-size:0.875em;
	font-weight:400;
	color:#666;
}
.compare dl#model select {
	position: absolute;
	left:0;
	/*top:24px;*/
	bottom:0;
	height:2em;
	width: 100%;
	border: none;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	z-index: 5;
}
.compare dl#model select:focus {
	outline: none
}
.compare dl#model select::-ms-expand {
	display: none;
}
.compare dl#model select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.compare dl#model p {
	height:2em;
	padding-left:0.3em;
	display: flex;
	align-items: center;
	border:0.15em solid #ddd;
	position:relative;
	transition: 0.3s;
	z-index: 4;
}

.compare dl#model p::after {
	content:"";
	position: absolute;
	width:0.4em;
	height:0.4em;
	border-bottom:0.125em solid #999;
	border-right:0.125em solid #999;
	right:0.5em;
	top:0.625em;
	transform: rotate(45deg)
}

/* カラバリ */
.compare dl#colorVari dd .color {
	text-align: center;
	position: relative;
	overflow: hidden;
}
.compare dl#colorVari dd .color .color_img{
	display: inline-block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
	min-height: min(28rem,280px);
}
.compare dl#colorVari dd .color .color_img img{
	max-width:124px;
	width:45%;
	display:inline-block;
}
.compare dl#colorVari dd .color .color_img .colorname {
	display:block;
	font-size:0.875em;
	margin-top:0.3em;
}
.compare dl#colorVari dd .color .color_img .colorcarrier span{
	display:inline-block;
	font-size:0.75em;
	background-color: #888;
	color:#fff;
	margin:1px;
	padding:0 2px;
	border-radius:2px;
}
.compare dl#colorVari dd .color .color_img:first-child {
	opacity: 1;
    position: relative;
    top: 0;
    left: 0;
}
.compare dl#colorVari dd .color_btn {
	margin-top: 5px;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
}
.compare dl#colorVari dd .color_btn li {
	width:1em;
	height:1em;
	margin: 0.3em;
	border:1px solid #bbb;
	cursor: pointer;
}
@media screen and (min-width: 769px) {
	.compare dl#model select:hover + p {
		cursor: pointer;
		border-color:#0071E3;
	}
	.compare dl#colorVari dd .color .color_img img{
		transition: 0.3s;
	}
	.compare dl#colorVari dd .color .color_img a:hover img{
		opacity:0.8;
	}
}
@media screen and (max-width: 768px) {
	.compare {
		font-size: 1.1rem;
	}
	.compare h1 {
		font-size:2.4rem;
	}
	.compare p.lead {
		max-width: 90%;
		font-size:1.2rem;
	}
	/* 比較 */
	.compare dl {
		margin: 0 1rem 1rem;
	}
	.compare dl > dt {
		width: 15%;
		font-size: 0.77em
	}
	.compare dl > dd {
		width: 40%;
	}
	.compare dl > dd:nth-of-type(3) {
		display: none;	/*3列目非表示*/
	} 
	.compare dl > dd span {
		font-size:0.8em;
	}
	/* 機種選択 */
	.compare dl#model dd h3 {
		font-size:1em;
	}
	.compare dl#model select {
		height:2.4rem;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.compare dl#model p {
		border: 0.1rem solid #ccc;
	}
	.compare dl#model select:focus + p{
		/*background-color:#D3E6F5;*/
	}
	.compare dl#model p {
		min-height:2.2rem;
		height:auto;
		padding-left:0.3rem;
		padding-right:1.5rem;
	}
	.compare dl#model p::after {
		top:0.6rem;
		right:0.6rem;
	}

	/* カラバリ */
	.compare dl#colorVari dd .color .color_img {
		min-height: 20rem;
	}
	.compare dl#colorVari dd .color .color_img img {
		width: 8.5rem;
	}
	.compare dl#colorVari dd .color .color_img .colorname {
		font-size:inherit;
	}
	.compare dl#colorVari dd .color .color_img .colorcarrier span {
		font-size:0.8rem;
	}
	.compare dl#colorVari dd .color_btn {
		margin-top: 0.5rem;
	}
	.compare dl#colorVari dd .color_btn li {
		width:1.5rem;
		height:1.5rem;

	}
}



/*--------------------------------------------------
	＜ブラウザ出し分け＞
--------------------------------------------------*/
@media screen and (min-width: 641px) {
	.forSP {
		display: none !important;
	}
}

@media screen and (max-width: 640px) {
	.forPC {
		display: none !important;
	}
	.forSP {
		display: block !important;
	}
}