@charset "utf-8";

/*----------------------------------------*/
/*カラバリスライド スライド数に併せて指定*/
/*----------------------------------------*/
.thumbnail {
	width:calc(92px * 5); /*スライドの数に合わせる*/
}
@media screen and (max-width: 640px) {
	.thumbnail {
		width:96%;
		max-width:calc((82px + 6px) * 5); /*スライドの数に合わせる*/
	}
}

/*----------------------------------------*/
/* カラーボタンの色指定*/
/*----------------------------------------*/
/*（背景との境界が不明瞭な場合：border: 1px solid #ddd;）*/

.color_btn li.green::before { background-color: #324337;}
.color_btn li.white::before { background-color: #dad4cd;}


/*----------------------------------------*/
/* 内側裏地画像のレイアウト*/
/*----------------------------------------*/
@media screen and (min-width: 641px) {
	.case_inside {
		max-width:960px;
		margin:40px auto 0;
	}
	.case_inside::after {
		content:"";
		display:block;
		clear:both;
	}
	.case_inside > div {
		background-color: #F2F2F2;
	}
	.case_inside > div:nth-child(1){
		float:left;
		width:620px;
		padding:30px 0;
	}
	.case_inside > div:nth-child(1) img{
		height:500px;
	}
	.case_inside > div:nth-child(2){
		float:right;
		width:320px;
		padding:0;
	}
	.case_inside > div:nth-child(2) img{
		height:560px;
	}
}
@media screen and (max-width: 640px) {
	.case_inside > div:nth-child(1) img {
		width:55%;
		max-width:250px;
		margin-top:20px;
	}
	.case_inside > div:nth-child(2) img {
		background-color: #F2F2F2;
		max-width: 100%;
		max-height: 400px;
		margin-top: 40px;
	}
}
.other .feature {
	max-width:750px;
	margin:0 auto;	
}
.other .feature li{
	text-align: left;
	margin-top:2em;
	font-size:22px;
	font-weight:500;
	padding-left: 1.5em;
	position: relative;
}
.other .feature li::before{
	content:"";
	position:absolute;
	width:1em;
	height:1em;
	top:0.3em;
	left:0;
	background-color: #324337;
	border-radius:50%;
}
@media screen and (max-width: 640px) {
	.other .feature {
		width:94%;
		font-size:18px;
	}
}