@charset "UTF-8";

/**********************************************
共立電気
ボタン用CSS
***********************************************/


/*  btn
----------------------------------------------------------------------*/

.btn {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
	padding: .5em 5px;
	line-height: 1;
	background: #00C7B1;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.btn:hover {
	background: #00C7B1;
}

.btnIcon {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}


/*** btn カラーバリエーション ***/

.btn_c-color01 {
	background-color: #29a9f4;
}

.btn_c-color02 {
	background-color: #74c7f8;
}

.btn_c-color03 {
	background-color: #29c7f4;
}

.btn_c-color04 {
	background-color: #81e2c3;
}

.btn_c-color05 {
	background-color: #77daa3;
}

.btn_c-color06 {
	background-color: #7eda77;
}

.btn_c-color07 {
	background-color: #ddd;
	color: #333;
}

.btn_c-color01:hover {
	background-color: #2598db;
}

.btn_c-color02:hover {
	background-color: #68b3df;
}

.btn_c-color03:hover {
	background-color: #25b3db;
}

.btn_c-color04:hover {
	background-color: #74cbaf;
}

.btn_c-color05:hover {
	background-color: #6bc492;
}

.btn_c-color06:hover {
	background-color: #71c46b;
}

.btn_c-color07:hover {
	background-color: #ccc;
}


/*** btn 幅バリエーション ***/

.btn_w-long {
	width: 500px;
}

.btn_w-middle {
	width: 300px;
}

.btn_w-short {
	width: 200px;
}

.btn_w-min {
	width: 100px;
}

.btn_w-max {
	width: 100%;
}

.btn_w-100p {
	display: block;
	width: 100%;
}


/*** btn 高さバリエーション ***/

.btn_h-big {
	line-height: 40px;
	font-size: 16px;
}

.btn_h-tall {
	line-height: 20px;
	font-size: 14px;
}

.btn_h-small {
	line-height: 10px;
	font-size: 100%;
}


/*** btn アイコンバリエーション ***/

.btnIcon_arrow01 {
	background: url(../images/icon/arrow01.png) 0 center no-repeat;
	padding-left: 8px;
}

.btnIcon_arrow02 {
	background: url(../images/icon/arrow02.png) 0 center no-repeat;
	padding-left: 8px;
}

.btnIcon_arrowDown01 {
	background: url(../images/icon/arrow_down01.png) 5px center no-repeat;
	padding-left: 20px;
	padding-right: 10px;
}

.btnIcon_arrowDown02 {
	background: url(../images/icon/arrow_down02.png) 5px center no-repeat;
	padding-left: 20px;
	padding-right: 10px;
}

.btnIcon_cross01 {
	background: url(../images/icon/cross01.png) 5px center no-repeat;
	padding-left: 15px;
	padding-right: 5px;
}


/*  ボタンレイアウト
----------------------------------------------------------------------*/

.btns {
	letter-spacing: -.4em;
	text-align: center;
}

.btns li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	letter-spacing: normal;
	margin: 0 10px;
}

@media screen and (max-width: 736px) {
	.btn_w-long {
		width: 100%;
	}
	.btn_w-middle {
		width: 100%;
	}
	.btn_w-short {
		width: 200px;
	}
	.btn_w-min {
		width: 100px;
	}
	.btn_w-max {
		width: 100%;
	}
	.btn_w-100p {
		display: block;
		width: 100%;
	}
}