@charset "UTF-8";

#mid_area {
	padding:0px 20px;
	background-color:#000;
}

#area_a {
	width: 95%;
	margin:0px auto 30px auto;
	color:#fff;
/* border:1px solid #fff; */
}

.shop_box {
/* border:1px solid #555; */
	padding:0px ;
	width:100%;
	margin:5px auto;
}

h2 {
	color:#fff;
	font-weight:100;
	font-size:18px;
	padding:2px 0px;
	margin:0px;
	text-align:center;
	background-color:#222;
	border-radius:5px;
	margin-bottom:5px;
	background-color:#420;

}

h3 {
	font-size:14px;
	font-weight:100;
	text-align:center;
	padding:5px 1em
}

.shop_img {
	display:block;
	margin:auto;
	width:98%;
}

.msg1 {
	text-align:center;
	font-size:16px;
	line-height:2em;
	background-color:#333;
	padding-top:10px;
	padding-bottom:10px;
	background-image: url("../images/wbg.jpg");
}

#area_a li {
	font-size:16px;
	line-height:2em;
}

.official_hp {
	padding:2px;
	background-color:#555;
	color:#fff;
	padding:5px 10px;
	text-align:center;
	display:block;
	margin-left:10px;
	margin-right:10px;
	margin-top:15px;
	margin-bottom:0px;
	border-radius:10px;

}

.other_links {
	display:inline-block;
	padding:2px;
	background-color:#555;
	color:#fff;
	line-height:1em;
	padding:8px 10px;
	width:19%;
	text-align:center;
	border-radius:10px;

}

.other_links2 {
	display:inline-block;
	padding:2px;
	background-color:#106;
	color:#fff;
	line-height:1em;
	padding:8px 10px;
	text-align:center;
	border-radius:10px;
}

.official_hp:hover , .other_links:hover {
	background-color:#500;

}

.pic {
	background-image: url("../images/logo_blank.png");
	border-radius:10px;

}

.sp1, .sp2, .sp3, .sp4 {
	display: none; /* 初期状態で非表示 */
	border-radius:10px;
	margin:auto;
	margin-bottom:10px;
	margin-top:5px;
	margin-left:5px;
}


.kumiko {
	margin:30px auto 50px auto;
	display:block;
	background-color:#eee;
	width:100px;
}

.kumiko2 {
	margin:220px auto 20px auto;
	display:block;
	background-color:#eee;
	width:100px;
}


.left {
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
}

.right {
	margin-top:250px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
}


.official_hp:hover , .other_links2:hover {
	background-color:#500;
}





.cont {
	width: 100%;
	overflow: hidden; /* floatのためのclearfix */
	padding: 5px;
	box-sizing: border-box;
}

.other_links {
	float: left;
	width: calc(25% - 10px); /* 4分割するために25%から各エリアの左右の間隔5pxずつ（合計10px）を引く */
	margin: 5px;
	box-sizing: border-box;
}

.other_links2 {
	float: left;
	width: calc(25% - 10px); /* 4分割するために25%から各エリアの左右の間隔5pxずつ（合計10px）を引く */
	margin: 5px;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	.other_links {
		width: calc(50% - 10px); /* 画面が狭い場合は2分割に変更 */
	}
	.other_links2 {
		width: calc(50% - 10px); /* 画面が狭い場合は2分割に変更 */
	}
}

@media screen and (max-width: 480px) {
	.other_links {
		width: calc(100% - 10px); /* さらに狭い場合は1列に変更 */
	}
	.other_links2 {
		width: calc(100% - 10px); /* さらに狭い場合は1列に変更 */
	}
}




.yoyaku {
	display:block;
	margin:20px auto;
	width:90%;
}