@charset "utf-8";

/* -------------------------------------------- *
 *  ボタン
 * -------------------------------------------- */

/* = ui-btn
----------------------------------------------- *
 * ボタン基本定義
 * [構造]
 * <a href="#" class="ui-btn">テキスト</a>
 *
 * <a href="#" class="ui-btn"><span class="ui-icon ui-icon-xxx"></span> テキスト</a>
 *
 * [参考]
 * <a href="#" class="ui-btn ui-btn-primary ui-btn-medium">
 *   <span class="ui-btn-icon"><span class="ui-icon ui-icon-mail ui-fs22"></span></span>
 *   <span class="ui-btn-text">メールでお問合せ</span>
 * </a>
----------------------------------------------- */
.ui-btn {
	display: block;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	width: 100%;
	padding: .8em .8rem;
	border: 1px solid;
	border-radius: 5px;
	line-height: 1;
	color: inherit;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/* ui-btn-text */
.ui-btn-text {
	display: inline-block;
	line-height: 1.2;
	text-align: left;
	vertical-align: middle;
	white-space: normal;
}
.ui-btn-checkbox + .ui-btn-text {
	padding-right: 1.6rem;
}
/* ui-btn-icon */
.ui-btn-icon {
	display: inline-block;
	vertical-align: middle;
}
/* ui-btn-checkbox */
.ui-btn-checkbox {
	display: inline-block;
	vertical-align: middle;
}

/* -------------------------------------------- *
 *  ボタンタイプ
 * -------------------------------------------- */
.ui-btn-inline {
	display: inline-block;
	width: auto;
	padding: .8rem 1.4rem;
}

/* -------------------------------------------- *
 *  ボタンサイズ
 * -------------------------------------------- */
.ui-btn-small {
	font-size: 1.4rem;
}
.ui-btn-medium {
	font-size: 1.8rem;
}
.ui-btn-large {
	font-size: 2.4rem;
}

/* -------------------------------------------- *
 *  ボタン内アイテム位置
 * -------------------------------------------- */
.ui-btn-item-left {
	text-align: left;
}
.ui-btn-item-right {
	text-align: right;
}



/* -------------------------------------------- *
 *  ボタンスキン
 * -------------------------------------------- */

/* = ui-btn
----------------------------------------------- *
 * デフォルトグレー
----------------------------------------------- */
.ui-btn {
	border-color: #c4c4c4;
	color: #333;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#ededed));
	background: -webkit-linear-gradient(top, #fefefe 0%, #ededed 100%);
	background:    -moz-linear-gradient(top, #fefefe 0%, #ededed 100%);
	background:      -o-linear-gradient(top, #fefefe 0%, #ededed 100%);
	background:         linear-gradient(to bottom, #fefefe 0%, #ededed 100%);
	text-shadow: 0 1px 0 rgba(255,255,255,1);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255,.6);
	        box-shadow: inset 0 0 1px 1px rgba(255,255,255,.6);
}
.ui-btn.is-selected {
	background: #fffea4;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

/* = ui-btn-primary
----------------------------------------------- *
 * オレンジ
----------------------------------------------- */
.ui-btn-primary {
	border-color: #fff;
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3852b), color-stop(100%,#ed6103));
	background: -webkit-linear-gradient(top, #f3852b 0%, #ed6103 100%);
	background:    -moz-linear-gradient(top, #f3852b 0%, #ed6103 100%);
	background:      -o-linear-gradient(top, #f3852b 0%, #ed6103 100%);
	background:         linear-gradient(to bottom, #f3852b 0%, #ed6103 100%);
	text-shadow: 0 1px 0 rgba(168,168,168,.65);
	-webkit-box-shadow: none;
	        box-shadow: none;
}

/* = ui-btn-done
----------------------------------------------- *
 * 済み（凹み）
----------------------------------------------- */
.ui-btn-done {
	border-color: #c4c4c4;
	color: #333;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#f2f2f2));
	background: -webkit-linear-gradient(top, #ededed 0%, #f2f2f2 100%);
	background:    -moz-linear-gradient(top, #ededed 0%, #f2f2f2 100%);
	background:      -o-linear-gradient(top, #ededed 0%, #f2f2f2 100%);
	background:         linear-gradient(to bottom, #ededed 0%, #f2f2f2 100%);
	text-shadow: 0 1px 0 rgba(255,255,255,1);
	-webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.2);
	        box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.2);
}

/* = ui-btn-cancel
----------------------------------------------- *
 * ブラック
----------------------------------------------- */
.ui-btn-cancel {
	border-color: #424242;
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#6b6b6b));
	background: -webkit-linear-gradient(top, #b2b2b2 0%, #6b6b6b 100%);
	background:    -moz-linear-gradient(top, #b2b2b2 0%, #6b6b6b 100%);
	background:      -o-linear-gradient(top, #b2b2b2 0%, #6b6b6b 100%);
	background:         linear-gradient(to bottom, #b2b2b2 0%, #6b6b6b 100%);
	text-shadow: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

/* = ui-btn[disabled]
----------------------------------------------- *
 * disabled
----------------------------------------------- */
.ui-btn[disabled],
.ui-btn.disabled {
	border-color: transparent;
	color: #999;
	background: #ebebeb;
	text-shadow: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* Android でタップ時の枠線を消すため */
	pointer-events: none;
}
.ui-btn[disabled] .able,
.ui-btn.disabled .able,
.ui-btn .disabled {
	display: none;
}
.ui-btn[disabled] .disabled,
.ui-btn.disabled .disabled {
	display: inline-block;
}