/*reset css */
@import url("font.css");

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
    padding:0;
    margin:0;
}
table{
    border-collapse: collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-weight:normal;
    font-style:normal;
}
ol,ul{
    list-style:none;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
    font-size:100%;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}


/*smart novel original css */

.vertical_text{

    font-family:'@ＭＳ 明朝';
    /*color:white;*/
    writing-mode:tb-rl;
    writing-mode:vertical-rl ;
    -webkit-writing-mode:vertical-rl ;
    float:right;
    height:100%;

}


.layer_menu {
    display:none;
    font-size:1.3em;
    font-weight:bold;
    position:absolute;
    width:100%;
    height:100%;
}



/*メニュ－ボタン系*/
.menu_item {position:relative;margin-top:3%;text-align:center;cursor:pointer}
.menu_item img {width:auto;max-width:80%;max-height:10%;}
.display_menu .button:first-child {margin-top:0;}
.display_menu{
    overflow:visible;padding:0;
    z-index: 10000;
    width:100%;
    height:100%;
    position: absolute;
    display:block;
    /*overflow:visible;padding:2%;display:table-cell;vertical-align:middle*/
}

/* セーブ時の画面の設定
--------------------------*/
/* セーブデータリスト全体の設定 */
.save_list {
	display: table;
	table-layout: fixed;
	width: 70%;
	height:76px;
	font-size: 14px;
	font-weight: normal;
	border-top: 1px dotted #CCC;
}

/* セーブデータの設定 */
.save_list_item {
	display: table-row;
	cursor: pointer;
}

/* セーブデータのサムネイル部分の設定 */
.save_list_item_thumb {
	display: table-cell;
	width: 96px;
	height:72px;
	padding-top:5px;
	padding-left:10px;
	border-bottom: 1px dotted #CCC;

}

.save_list_item_thumb img {
	width: 96px;
	height: 72px;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* セーブデータのテキスト部文の設定 */
.save_list_item_area {
	display: table-cell;
	vertical-align: top;
	padding: 0 10px;
	border-bottom: 1px dotted #CCC;
}
/* セーブデータの日付の設定 */
.save_list_item_date {
	display: block;
	padding: 5px 0;
	line-height: 1;
	color:#48D1CC;
}
/* セーブデータのテキストの設定 */
.save_list_item_text {
	display: block;
	line-height: 1.3;
	height: 48px;
	overflow: hidden;
	color:#666;
}



.layer_event_click{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
}

.layer{
	background-size:100% 100%;
}

.button_menu{
    position:absolute;
    z-index:99999;
    top:20px;
    cursor:pointer;
}

/*
 CSSを修正することで、ゲーム画面をカスタマイズすることが可能です
 * */

/*ゲーム枠の外側の色を指定します*/

body{
    background-color:black;
    -webkit-tap-highlight-color: transparent;
    overflow:hidden;
    touch-action: manipulation;

}

/*次へのクリックを促すアイコン*/

.img_next{
    padding-left:3px;
}

/*テキストボックスの共通スタイル*/
.text_box{

}

.tyrano_base{
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -webkit-text-size-adjust:none;
    /*
	position: absolute;
	*/
	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
   
}

/* button 
---------------------------------------------- */
.glink_button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.glink_button:hover {
	text-decoration: none;
}
.glink_button:active {
	position: relative;
	top: 1px;
}


.button_graphic {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	/*margin: 0 2px;*/
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	
	padding: 1em 2em 1em;
	color:white;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	
	
}
.button_graphic:hover {
	text-decoration: none;
}
.button_graphic:active {
	position: relative;
	top: 1px;
}



.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

/* color styles 
---------------------------------------------- */

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}

/* 反転 */
.reflect{
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
	filter: FlipH;
}

/*ダイアログボックス*/
#alertify{
    z-index:9999999;
}

/* CSS ts01
------------------------*/

/* 通常時 */
.ts01 {
color: #ccc; /* 文字色 */
background: #1f1f1f; /* 背景色（グラデ未対応のブラウザ用） */
background: -webkit-gradient(linear, left top, left bottom, from(#515357), to(#1f1f1f)); /* 背景グラデーション */
background: -moz-linear-gradient(lefttop, #515357, #1f1f1f); /* 同上 */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#515357', endColorstr='#1f1f1f'); /* 同上 */
border: 1px solid #000; /* ボーダーライン */
-webkit-border-radius: 5px; /* 角丸 5px */
-moz-border-radius: 5px; /* 同上 */
border-radius: 5px; /* 同上 */
}

/* ホバー時 */
.ts01:hover {
color: #fad43c;
background:-webkit-gradient(linear, left top, left bottom, from(#515357), to(#1f1f1f));
background: -moz-linear-gradient(lefttop, #515357, #1f1f1f);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#515357', endColorstr='#1f1f1f');
}

/* クリック時 */
.ts01:active {
color: #fad43c;
background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#515357));
background: -moz-linear-gradient(top,  #1f1f1f,  #515357);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f1f1f', endColorstr='#515357');
}

/* CSS ts02
------------------------*/

.ts02 {
opacity:.8; /* 不透明度80％ */
color: #fff; /* 文字色 */
background: #666; /* 背景色 */
background: -webkit-gradient(linear, left top, right bottom, from(#777), color-stop(0.5, #aaa), to(#777)); /* 背景グラデーション */
background: -moz-linear-gradient(lefttop, #777, #aaa 50%, #777); /* 同上 */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#777777'); /* 同上 */
border: solid 3px #bfbfbf; /* ボーダーライン */
-webkit-border-radius: 1.5em; /* 角丸 1.5文字分 */
-moz-border-radius: 1.5em; /* 同上 */
border-radius: 1.5em; /* 同上 */
}

/* ホバー時 */
.ts02:hover {
opacity:1;
color: #fff;
background: #00d2e5;
background:-webkit-gradient(linear, left top, right bottom, from(#005d7d), color-stop(0.5, #00d2e5), to(#005d7d));
background: -moz-linear-gradient(lefttop, #005d7d, #00d2e5 50%, #005d7d);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d2e5', endColorstr='#005d7d');
}

/* クリック時 */
.ts02:active {
opacity:1;
color: #fff;
background: #00d2e5;
background:-webkit-gradient(linear, left top, right bottom, from(#00d2e5), color-stop(0.5, #005d7d), to(#00d2e5));
background: -moz-linear-gradient(lefttop, #00d2e5, #005d7d 50%, #00d2e5);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d7d', endColorstr='#00d2e5');
}

/* color styles 
---------------------------------------------- */


/* button 
---------------------------------------------- */
.glink_button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.glink_button:hover {
	text-decoration: none;
}
.glink_button:active {
	position: relative;
	top: 1px;
}


.button_graphic {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	/*margin: 0 2px;*/
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	
	padding: 1em 2em 1em;
	color:white;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	
	
}

.button_graphic:hover {
	text-decoration: none;
}
.button_graphic:active {
	position: relative;
	top: 1px;
}



.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}


/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}


/*----------------------------------
 btn_01 stagger_frame ずらしフレーム
------------------------------------*/
/* red */
.btn_01_red {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #c9536b;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_red::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #8C3143;
  transition: .2s ease-out;
}

.btn_01_red:hover { background-color: #d76886; }

.btn_01_red:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_red:active {
  background-color: #bb3e50;
  color: #eee;
  transform: scale(.98);
}


/* yellow */
.btn_01_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #F6AD3A;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_yellow::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #946315;
  transition: .2s ease-out;
}

.btn_01_yellow:hover { background-color: #F8C249; }

.btn_01_yellow:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_yellow:active {
  background-color: #F4982B;
  color: #eee;
  transform: scale(.98);
}


/* lime */
.btn_01_lime {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #A9CF52;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_lime::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #59731D;
  transition: .2s ease-out;
}

.btn_01_lime:hover { background-color: #BFDB67; }

.btn_01_lime:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_lime:active {
  background-color: #93C33D;
  color: #eee;
  transform: scale(.98);
}


/* green */
.btn_01_green {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #00ADA9;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_green::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #006664;
  transition: .2s ease-out;
}

.btn_01_green:hover {
  background-color: #00C2BF;
}

.btn_01_green:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_green:active {
  background-color: #009893;
  color: #eee;
  transform: scale(.98);
}


/* blue */
.btn_01_blue {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #2B71B8;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_blue::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #10457A;
  transition: .2s ease-out;
}

.btn_01_blue:hover { background-color: #368DCA; }

.btn_01_blue:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_blue:active {
  background-color: #2055A6;
  color: #eee;
  transform: scale(.98);
}

/* purple */
.btn_01_purple {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #6C4AA4;
  border-radius: 0px;
  border: none;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_purple::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #4C2D80;
  transition: .2s ease-out;
}

.btn_01_purple:hover { background-color: #875DBB; }

.btn_01_purple:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_purple:active {
  background-color: #51378D;
  color: #eee;
  transform: scale(.98);
}

/* white */
.btn_01_white {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #fefefe;
  border-radius: 0px;
  border: none;
  color: #333;
  text-shadow: 1px 1px 2px #999;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_white::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #333;
  transition: .2s ease-out;
}

.btn_01_white:hover { background-color: #fff; }

.btn_01_white:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_white:active {
  background-color: #ddd;
  color: #222;
  transform: scale(.98);
}

/* black */
.btn_01_black {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: #333;
  border-radius: 0px;
  border: none;
  color: #eee;
  text-shadow: 1px 1px 2px #333;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_01_black::after {
  position: absolute;
  content: "";
  top: -6px;
	right: 6px;
	bottom: 6px;
	left: -6px;
  background: none;
  border: 2px solid #fefefe;
  transition: .2s ease-out;
}

.btn_01_black:hover { background-color: #444; }

.btn_01_black:hover::after {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn_01_black:active {
  background-color: #222;
  color: #ccc;
  transform: scale(.98);
}

/*------------------------------------------------------------------------------
 btn_02 simple シンプルグラデーション
--------------------------------------------------------------------------------*/
/* red */
.btn_02_red {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#F1CCD6, #D76886);
  background-image: linear-gradient(#F1CCD6, #D76886);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50,
    0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50,
    0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50,0 0 3px #bb3e50;
  border-radius: 16px;
  border: 2px solid #BB3E50;
  box-shadow: 0 4px 0 #BB3E50;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_red:hover { color: #FF0; }

.btn_02_red:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* yellow */
.btn_02_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#FCEAC2, #F8C249);
  background-image: linear-gradient(#FCEAC2, #F8C249);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b,
    0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b,
    0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b,0 0 3px #f4982b;
  border-radius: 16px;
  border: 2px solid #F4982B;
  box-shadow: 0 4px 0 #F4982B;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_yellow:hover { color: #FF0; }

.btn_02_yellow:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* lime */
.btn_02_lime {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#EAF3CC, #BFDB67);
  background-image: linear-gradient(#EAF3CC, #BFDB67);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D,
    0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D,
    0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D,0 0 3px #93C33D;
  border-radius: 16px;
  border: 2px solid #93C33D;
  box-shadow: 0 4px 0 #93C33D;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_lime:hover { color: #FF0; }

.btn_02_lime:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* green */
.btn_02_green {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#AAEAE9, #00C2BF);
  background-image: linear-gradient(#AAEAE9, #00C2BF);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #009893,0 0 3px #009893,0 0 3px #009893,0 0 3px #009893,
    0 0 3px #009893,0 0 3px #009893,0 0 3px #009893,0 0 3px #009893,
    0 0 3px #009893,0 0 3px #009893,0 0 3px #009893,0 0 3px #009893;
  border-radius: 16px;
  border: 2px solid #009893;
  box-shadow: 0 4px 0 #009893;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_green:hover { color: #FF0; }

.btn_02_green:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* blue */
.btn_02_blue {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#BCD9ED, #368DCA);
  background-image: linear-gradient(#BCD9ED, #368DCA);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6,
    0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6,
    0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6,0 0 3px #2055A6;
  border-radius: 16px;
  border: 2px solid #2055A6;
  box-shadow: 0 4px 0 #2055A6;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_blue:hover { color: #FF0; }

.btn_02_blue:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* purple */
.btn_02_purple {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#D7C9E8, #875DBB);
  background-image: linear-gradient(#D7C9E8, #875DBB);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D,
    0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D,
    0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D,0 0 3px #51378D;
  border-radius: 16px;
  border: 2px solid #51378D;
  box-shadow: 0 4px 0 #51378D;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_purple:hover { color: #FF0; }

.btn_02_purple:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* white */
.btn_02_white {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#fefefe, #ddd);
  background-image: linear-gradient(#fefefe, #ddd);
  color: #fefefe;
  font-weight: bold;
  text-shadow:
    0 0 3px #999,0 0 3px #999,0 0 3px #999,0 0 3px #999,
    0 0 3px #999,0 0 3px #999,0 0 3px #999,0 0 3px #999,
    0 0 3px #999,0 0 3px #999,0 0 3px #999,0 0 3px #999;
  border-radius: 16px;
  border: 2px solid #999;
  box-shadow: 0 4px 0 #999;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_white:hover { color: #FF0; }

.btn_02_white:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* black*/
.btn_02_black {
  position: relative;
  display: inline-block;
  padding: .75em .5em;
  background-color: none;
  background-image: -webkit-linear-gradient(#444, #333);
  background-image: linear-gradient(#444, #333);
  color: #eee;
  font-weight: bold;
  text-shadow:
    0 0 3px #222,0 0 3px #222,0 0 3px #222,0 0 3px #222,
    0 0 3px #222,0 0 3px #222,0 0 3px #222,0 0 3px #222,
    0 0 3px #222,0 0 3px #222,0 0 3px #222,0 0 3px #222;
  border-radius: 16px;
  border: 2px solid #222;
  box-shadow: 0 4px 0 #222;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_02_black:hover { color: #FF0; }

.btn_02_black:active {
  box-shadow: none;
  transform: translateY(4px);
}


/*------------------------------------------------------------------------------
 btn_03 white_edge 白ふちラウンド
--------------------------------------------------------------------------------*/
/* red */
.btn_03_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #eee;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_red:hover {
  background-color: #D76886;
  color: #fff;
  text-shadow: none;
}

.btn_03_red:active {
  background-color: #BB3E50;
  color: #eee;
  transform: scale(.96);
}

/* yellow */
.btn_03_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_yellow:hover {
  background-color: #F8C249;
  color: #fff;
  text-shadow: none;
}

.btn_03_yellow:active {
  background-color: #F4982B;
  color: #eee;
  transform: scale(.96);
}


/* lime */
.btn_03_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_lime:hover {
  background-color: #BFDB67;
  color: #fff;
  text-shadow: none;
}

.btn_03_lime:active {
  background-color: #93C33D;
  color: #eee;
  transform: scale(.96);
}


/* green */
.btn_03_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_green:hover {
  background-color: #00C2BF;
  color: #fff;
  text-shadow: none;
}

.btn_03_green:active {
  background-color: #009893;
  color: #eee;
  transform: scale(.96);
}


/* blue */
.btn_03_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_blue:hover {
  background-color: #368DCA;
  color: #fff;
  text-shadow: none;
}

.btn_03_blue:active {
  background-color: #2055A6;
  color: #eee;
  transform: scale(.96);
}


/* purple */
.btn_03_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_purple:hover {
  background-color: #875DBB;
  color: #fff;
  text-shadow: none;
}

.btn_03_purple:active {
  background-color: #4C2D80;
  color: #eee;
  transform: scale(.96);
}


/* white */
.btn_03_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #999;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_white:hover {
  background-color: #bbb;
  color: #fff;
  text-shadow: none;
}

.btn_03_white:active {
  background-color: #777;
  color: #eee;
  transform: scale(.96);
}


/* black */
.btn_03_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #ddd;
  text-shadow: none;
  border-radius: 1.5em;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_03_black:hover {
  background-color: #555;
  color: #eee;
  text-shadow: none;
}

.btn_03_black:active {
  background-color: #222;
  color: #ccc;
  transform: scale(.96);
}

/*------------------------------------------------------------------------------
 btn_04 broken_line  破線つき角丸
--------------------------------------------------------------------------------*/
.btn_04 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #888;
  color: #eee;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 4px 0 #666;
  box-sizing: border-box;
  transition: .3s;
}

.btn_04::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #ccc;
}

.btn_04:hover {
  background-color: #999;
  box-shadow: 0 4px 0 #777;
}

.btn_04:active {
  background-color: #666;
  box-shadow: none;
  transform: translateY(4px);
}

/* red */
.btn_04_red {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #8C3143;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_red::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_red:hover {
  background-color: #D76886;
}

.btn_04_red:active {
  background-color: #BB3E50;
  box-shadow: none;
  transform: translateY(4px);
}

/* yellow */
.btn_04_yellow {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #be6f12;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_yellow::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_yellow:hover {
  background-color: #F8C249;
}

.btn_04_yellow:active {
  background-color: #F4982B;
  box-shadow: none;
  transform: translateY(4px);
}


/* lime */
.btn_04_lime {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #63831a;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_lime::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_lime:hover {
  background-color: #BFDB67;
}

.btn_04_lime:active {
  background-color: #93C33D;
  box-shadow: none;
  transform: translateY(4px);
}

/* green */
.btn_04_green {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #006664;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_green::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_green:hover {
  background-color: #00C2BF;
}

.btn_04_green:active {
  background-color: #009893;
  box-shadow: none;
  transform: translateY(4px);
}

/* blue */
.btn_04_blue {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #114e8b;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_blue::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_blue:hover {
  background-color: #368DCA;
}

.btn_04_blue:active {
  background-color: #2055A6;
  box-shadow: none;
  transform: translateY(4px);
}

/* purple */
.btn_04_purple {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #573196;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_purple::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #eee;
}

.btn_04_purple:hover {
  background-color: #875DBB;
}

.btn_04_purple:active {
  background-color: #51378D;
  box-shadow: none;
  transform: translateY(4px);
}

/* white */
.btn_04_white {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #eee;
  color: #666;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #999;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_white::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #999;
}

.btn_04_white:hover {
  background-color: #fff;
}

.btn_04_white:active {
  background-color: #dcdcdc;
  box-shadow: none;
  transform: translateY(4px);
}


/* black */
.btn_04_black {
  position: relative;
  display: inline-block;
  padding: .9em .6em;
  background-color: #333;
  color: #eee;
  text-shadow: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #222;
  box-sizing: content-box;
  transition: .2s;
}

.btn_04_black::after {
  position: absolute;
  content: "";
  background-color: none;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 12px;
  border: 2px dashed #999;
}

.btn_04_black:hover {
  background-color: #444;
}

.btn_04_black:active {
  background-color: #191919;
  box-shadow: none;
  transform: translateY(4px);
}

/*------------------------------------------------------------------------------
 btn_05 translucent 半透明
--------------------------------------------------------------------------------*/
/* red */
.btn_05_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(201, 85, 108, .5);
  color: #fff;
	text-shadow: 0 2px 5px #8C3143;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_red:hover {
  background-color: rgba(201, 85, 108, .8);
}

.btn_05_red:active {
  box-shadow: none;
  transform: translateY(3px);
}


/* yellow */
.btn_05_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(246, 173, 58, .5);
  color: #fff;
	text-shadow: 0 2px 5px #946315;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_yellow:hover {
  background-color: rgba(246, 173, 58, .8);
}

.btn_05_yellow:active {
  box-shadow: none;
  transform: translateY(3px);
}

/* lime */
.btn_05_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(169, 207, 82, .5);
  color: #fff;
	text-shadow: 0 2px 5px #59731D;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_lime:hover {
  background-color: rgba(169, 207, 82, .8);
}

.btn_05_lime:active {
  box-shadow: none;
  transform: translateY(3px);
}

/* green */
.btn_05_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(0, 173, 169, .5);
  color: #fff;
	text-shadow: 0 2px 5px #006664;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_green:hover {
  background-color: rgba(0, 173, 169, .8);
}

.btn_05_green:active {
  box-shadow: none;
  transform: translateY(3px);
}

/* blue */
.btn_05_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(43, 113, 184, .5);
  color: #fff;
	text-shadow: 0 2px 5px #10457A;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_blue:hover {
  background-color: rgba(43, 113, 184, .8);
}

.btn_05_blue:active {
  box-shadow: none;
  transform: translateY(3px);
}


/* purple */
.btn_05_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(108, 74, 164, .5);
  color: #fff;
	text-shadow: 0 2px 5px #4C2D80;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_purple:hover {
  background-color: rgba(108, 74, 164, .8);
  color: #fff;
  text-shadow: none;
}

.btn_05_purple:active {
  box-shadow: none;
  transform: translateY(3px);
}


/* white */
.btn_05_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .4);
  color: #fff;
	text-shadow: 0 2px 5px #000;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_white:hover {
  background-color: rgba(255, 255, 255, .7);
}

.btn_05_white:active {
  box-shadow: none;
  transform: translateY(3px);
}


/* black */
.btn_05_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
	text-shadow: 0 2px 5px #000;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_05_black:hover {
  background-color: rgba(0, 0, 0, .8);
}

.btn_05_black:active {
  box-shadow: none;
  transform: translateY(3px);
}

/* ------------------------------------------------------------------------------
　btn_06 skew 傾斜
-------------------------------------------------------------------------------- */
/* red */
.btn_06_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #fefefe;
  text-shadow:
    0 0 3px #8C3143,0 0 3px #8C3143,0 0 3px #8C3143,
    0 0 3px #8C3143,0 0 3px #8C3143,0 0 3px #8C3143,
    0 0 3px #8C3143,0 0 3px #8C3143,0 0 3px #8C3143,
    0 0 3px #8C3143,0 0 3px #8C3143,0 0 3px #8C3143;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_red::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #C9536B;
  border-bottom: 4px solid #8C3143;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_red:hover::before {
  background-color: #D76886;
  transform: skewX(0deg);
}

.btn_06_red:active {
  transform: translateY(4px);
}


/* yellow */
.btn_06_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #fefefe;
  text-shadow:
    0 0 3px #945e09,0 0 3px #945e09,0 0 3px #945e09,
    0 0 3px #945e09,0 0 3px #945e09,0 0 3px #945e09,
    0 0 3px #945e09,0 0 3px #945e09,0 0 3px #945e09,
    0 0 3px #945e09,0 0 3px #945e09,0 0 3px #945e09;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_yellow::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #F6AD3A;
  border-bottom: 4px solid #946315;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_yellow:hover::before {
  background-color: #F8C249;
  transform: skewX(0deg);
}

.btn_06_yellow:active {
  transform: translateY(4px);
}


/* lime */
.btn_06_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #fefefe;
  text-shadow:
    0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D,
    0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D,
    0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D,0 0 3px #59731D;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_lime::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #A9CF52;
  border-bottom: 4px solid #59731D;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_lime:hover::before {
  background-color: #BFDB67;
  transform: skewX(0deg);
}

.btn_06_lime:active {
  transform: translateY(4px);
}


/* green */
.btn_06_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #fefefe;
  text-shadow:
    0 0 3px #006664,0 0 3px #006664,0 0 3px #006664,0 0 3px #006664,
    0 0 3px #006664,0 0 3px #006664,0 0 3px #006664,0 0 3px #006664,
    0 0 3px #006664,0 0 3px #006664,0 0 3px #006664,0 0 3px #006664;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_green::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00ADA9;
  border-bottom: 4px solid #006664;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_green:hover::before {
  background-color: #00C2BF;
  transform: skewX(0deg);
}

.btn_06_green:active {
  transform: translateY(4px);
}


/* blue */
.btn_06_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #fefefe;
  text-shadow:
    0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A,
    0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A,
    0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A,0 0 3px #10457A;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_blue::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #2B71B8;
  border-bottom: 4px solid #10457A;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_blue:hover::before {
  background-color: #368DCA;
  transform: skewX(0deg);
}

.btn_06_blue:active {
  transform: translateY(4px);
}


/* purple */
.btn_06_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #eee;
  text-shadow:
    0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80,
    0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80,
    0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80,0 0 3px #4C2D80;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_purple::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #6C4AA4;
  border-bottom: 4px solid #4C2D80;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_purple:hover::before {
  background-color: #875DBB;
  transform: skewX(0deg);
}

.btn_06_purple:active {
  transform: translateY(4px);
}


/* white */
.btn_06_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #444;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_white::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #eee;
  border-bottom: 4px solid #bbb;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_white:hover::before {
  background-color: #fff;
  transform: skewX(0deg);
}

.btn_06_white:active {
  transform: translateY(4px);
}

/* black */
.btn_06_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  color: #ddd;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_06_black::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #333;
  border-bottom: 4px solid #141414;
  box-sizing: border-box;
  transform: skewX(-20deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_06_black:hover::before {
  background-color: #444;
  transform: skewX(0deg);
}

.btn_06_black:active {
  transform: translateY(4px);
}

/* -----------------------------------------------------------------------------
　btn_07  double_border 二重枠
-------------------------------------------------------------------------------- */
/* red */
.btn_07_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_red::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_red:hover {
  background-color: #D76886;
}

.btn_07_red:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_red:active {
  background-color: #BB3E50;
  transform: scale(.95);
}


/* yellow */
.btn_07_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_yellow::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_yellow:hover {
  background-color: #F8C249;
}

.btn_07_yellow:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_yellow:active {
  background-color: #F4982B;
  transform: scale(.95);
}

/* lime*/
.btn_07_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_lime::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_lime:hover {
  background-color: #BFDB67;
}

.btn_07_lime:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_lime:active {
  background-color: #93C33D;
  transform: scale(.95);
}


/* green */
.btn_07_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_green::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_green:hover {
  background-color: #00C2BF;
}

.btn_07_green:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_green:active {
  background-color: #009893;
  transform: scale(.95);
}


/* blue */
.btn_07_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_blue::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_blue:hover {
  background-color: #368DCA;
}

.btn_07_blue:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_blue:active {
  background-color: #2055A6;
  transform: scale(.95);
}


/* purple */
.btn_07_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_purple::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_purple:hover {
  background-color: #875DBB;
}

.btn_07_purple:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_purple:active {
  background-color: #51378D;
  transform: scale(.95);
}

/* white */
.btn_07_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #f5f5f5;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #555;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_white::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #555;
  transition: .2s ease-in-out;
}

.btn_07_white:hover {
  background-color: #fff;
}

.btn_07_white:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #555;
}

.btn_07_white:active {
  background-color: #ddd;
  transform: scale(.95);
}


/* black */
.btn_07_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: 2px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_07_black::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: none;
  border-radius: 0px;
  border: 1px solid #fefefe;
  transition: .2s ease-in-out;
}

.btn_07_black:hover {
  background-color: #444;
}

.btn_07_black:hover::after {
  top:-8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border: 2px solid #fefefe;
}

.btn_07_black:active {
  background-color: #222;
  transform: scale(.95);
}


/* -----------------------------------------------------------------------------
 btn_08 balloon 吹き出し
-------------------------------------------------------------------------------- */
/* red */
.btn_08_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #BB3E50;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_red::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #BB3E50;
  transition: .2s ease-out;
}

.btn_08_red:hover {
  background-color: #C9536B;
}

.btn_08_red:hover::before {
  border-top: 15px solid #C9536B;
}

.btn_08_red:active {
  transform: translateY(4px);
}


/* yellow */
.btn_08_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F4982B;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_yellow::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #F4982B;
  transition: .2s ease-out;
}

.btn_08_yellow:hover {
  background-color: #F6AD3A;
}

.btn_08_yellow:hover::before {
  border-top: 15px solid #F6AD3A;
}

.btn_08_yellow:active {
  transform: translateY(4px);
}


/* lime */
.btn_08_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #93C33D;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_lime::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #93C33D;
  transition: .2s ease-out;
}

.btn_08_lime:hover {
  background-color: #A9CF52;
}

.btn_08_lime:hover::before {
  border-top: 15px solid #A9CF52;
}

.btn_08_lime:active {
  transform: translateY(4px);
}


/* green */
.btn_08_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #009893;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_green::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #009893;
  transition: .2s ease-out;
}

.btn_08_green:hover {
  background-color: #00ADA9;
}

.btn_08_green:hover::before {
  border-top: 15px solid #00ADA9;
}

.btn_08_green:active {
  transform: translateY(4px);
}


/* blue */
.btn_08_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2055A6;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_blue::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #2055A6;
  transition: .2s ease-out;
}

.btn_08_blue:hover {
  background-color: #2B71B8;
}

.btn_08_blue:hover::before {
  border-top: 15px solid #2B71B8;
}

.btn_08_blue:active {
  transform: translateY(4px);
}


/* purple */
.btn_08_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #51378D;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_purple::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #51378D;
  transition: .2s ease-out;
}

.btn_08_purple:hover {
  background-color: #6C4AA4;
}

.btn_08_purple:hover::before {
  border-top: 15px solid #6C4AA4;
}

.btn_08_purple:active {
  transform: translateY(4px);
}


/* white */
.btn_08_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #eee;
  color: #555;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_white::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #eee;
  transition: .2s ease-out;
}

.btn_08_white:hover {
  background-color: #fefefe;
}

.btn_08_white:hover::before {
  border-top: 15px solid #fefefe;
}

.btn_08_white:active {
  transform: translateY(4px);
}


/* black */
.btn_08_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fff;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_08_black::before {
  position: absolute;
  content: "";
  margin-left: -15px;
  top: 100%;
  left: 50%;
  border: 15px solid transparent;
  border-top: 15px solid #333;
  transition: .2s ease-out;
}

.btn_08_black:hover {
  background-color: #444;
}

.btn_08_black:hover::before {
  border-top: 15px solid #444;
}

.btn_08_black:active {
  transform: translateY(4px);
}


/* -----------------------------------------------------------------------------
 btn_09 outer_frame  外フレーム ラウンド
-------------------------------------------------------------------------------- */
/* red */
.btn_09_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #BB3E50;
  color: #fefefe;
  text-shadow: 0 2px 2px #8C3143;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_red::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #BB3E50;
  transition: .2s ease-out;
}

.btn_09_red:hover {
  background-color: #C9536B;
}

.btn_09_red:hover::after {
  border: 2px solid #C9536B;
}

.btn_09_red:active {
  transform: scale(.96);
}


/* yellow */
.btn_09_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F4982B;
  color: #fefefe;
  text-shadow: 0 2px 2px #946315;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_yellow::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #F4982B;
  transition: .2s ease-out;
}

.btn_09_yellow:hover {
  background-color: #F6AD3A;
}

.btn_09_yellow:hover::after {
  border: 2px solid #F6AD3A;
}

.btn_09_yellow:active {
  transform: scale(.96);
}


/* lime */
.btn_09_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #93C33D;
  color: #fefefe;
  text-shadow: 0 2px 2px #59731D;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_lime::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #93C33D;
  transition: .2s ease-out;
}

.btn_09_lime:hover {
  background-color: #A9CF52;
}

.btn_09_lime:hover::after {
  border: 2px solid #A9CF52;
}

.btn_09_lime:active {
  transform: scale(.96);
}


/* green */
.btn_09_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #009893;
  color: #fefefe;
  text-shadow: 0 2px 2px #006664;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_green::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #009893;
  transition: .2s ease-out;
}

.btn_09_green:hover {
  background-color: #00ADA9;
}

.btn_09_green:hover::after {
  border: 2px solid #00ADA9;
}

.btn_09_green:active {
  transform: scale(.96);
}


/* blue */
.btn_09_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #10457A;
  color: #fefefe;
  text-shadow: 0 2px 2px #10457A;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_blue::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #10457A;
  transition: .2s ease-out;
}

.btn_09_blue:hover {
  background-color: #2B71B8;
}

.btn_09_blue:hover::after {
  border: 2px solid #2B71B8;
}

.btn_09_blue:active {
  transform: scale(.96);
}


/* purple */
.btn_09_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #51378D;
  color: #fefefe;
  text-shadow: 0 2px 2px #4C2D80;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_purple::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #51378D;
  transition: .2s ease-out;
}

.btn_09_purple:hover {
  background-color: #6C4AA4;
}

.btn_09_purple:hover::after {
  border: 2px solid #6C4AA4;
}

.btn_09_purple:active {
  transform: scale(.96);
}


/* white */
.btn_09_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #eee;
  color: #555;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_white::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #eee;
  transition: .2s ease-out;
}

.btn_09_white:hover {
  background-color: #fff;
}

.btn_09_white:hover::after {
  border: 2px solid #fff;
}

.btn_09_white:active {
  transform: scale(.96);
}


/* black */
.btn_09_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_09_black::after {
  position: absolute;
  content: "";
  background-color: none;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 1.5em;
  border: 2px solid #333;
  transition: .2s ease-out;
}

.btn_09_black:hover {
  background-color: #444;
}

.btn_09_black:hover::after {
  border: 2px solid #444;
}

.btn_09_black:active {
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_10  two_corner ２隅ラウンド
-------------------------------------------------------------------------------- */
.btn_10 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #666;
  color: #eee;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #eee;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10:active {
  background-color: #eee;
  color: #666;
  border: 4px solid #666;
}

/* red */
.btn_10_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #BB3E50;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_red:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_red:active {
  background-color: #fefefe;
  color: #BB3E50;
  border: 4px solid #BB3E50;
}


/* yellow */
.btn_10_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F4982B;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_yellow:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_yellow:active {
  background-color: #fefefe;
  color: #F4982B;
  border: 4px solid #F4982B;
}

/* lime */
.btn_10_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #93C33D;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_lime:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_lime:active {
  background-color: #fefefe;
  color: #93C33D;
  border: 4px solid #93C33D;
}

/* green */
.btn_10_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #009893;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_green:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_green:active {
  background-color: #fefefe;
  color: #009893;
  border: 4px solid #009893;
}

/* blue */
.btn_10_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2055A6;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_blue:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_blue:active {
  background-color: #fefefe;
  color: #2055A6;
  border: 4px solid #2055A6;
}


/* purple */
.btn_10_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #51378D;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_purple:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_purple:active {
  background-color: #fefefe;
  color: #51378D;
  border: 4px solid #51378D;
}

/* white */
.btn_10_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #999;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_white:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_white:active {
  background-color: #fefefe;
  color: #999;
  border: 4px solid #999;
}

/* black */
.btn_10_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: none;
  border-radius: 1.5em 0 1.5em 0;
  border: 4px solid #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-in;
}

.btn_10_black:hover {
  border-radius: 0;
  transition: .2s ease-out;
}

.btn_10_black:active {
  background-color: #fefefe;
  color: #333;
  border: 4px solid #333;
}


/* -----------------------------------------------------------------------------
 btn_11  bottom_line 太下線
-------------------------------------------------------------------------------- */
.btn_11 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #777;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  border-radius: 0;
  border-bottom: solid 7px #555;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #222;
}

.btn_11:hover {
  background-color: #888;
}

.btn_11:active {
  transform: translateY(4px);
}

/* red */
.btn_11_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #8C3143,0 2px 2px #8C3143;
  border-radius: 0;
  border-bottom: solid 7px #BB3E50;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #8C3143;
}

.btn_11_red:hover {
  background-color: #D76886;
}

.btn_11_red:active {
  transform: translateY(4px);
}


/* yellow */
.btn_11_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #946315,0 2px 2px #946315;
  border-radius: 0;
  border-bottom: solid 7px #F4982B;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #946315;
}

.btn_11_yellow:hover {
  background-color: #F8C249;
}

.btn_11_yellow:active {
  transform: translateY(4px);
}


/* lime */
.btn_11_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #59731D,0 2px 2px #59731D;
  border-radius: 0;
  border-bottom: solid 7px #93C33D;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #59731D;
}

.btn_11_lime:hover {
  background-color: #BFDB67;
}

.btn_11_lime:active {
  transform: translateY(4px);
}


/* green */
.btn_11_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #006664,0 2px 2px #006664;
  border-radius: 0;
  border-bottom: solid 7px #009893;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #006664;
}

.btn_11_green:hover {
  background-color: #00C2BF;
}

.btn_11_green:active {
  transform: translateY(4px);
}


/* blue */
.btn_11_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #10457A,0 2px 2px #10457A;
  border-radius: 0;
  border-bottom: solid 7px #2055A6;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #10457A;
}

.btn_11_blue:hover {
  background-color: #368DCA;
}

.btn_11_blue:active {
  transform: translateY(4px);
}


/* purple */
.btn_11_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #4C2D80,0 2px 2px #4C2D80;
  border-radius: 0;
  border-bottom: solid 7px #51378D;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #4C2D80;
}

.btn_11_purple:hover {
  background-color: #875DBB;
}

.btn_11_purple:active {
  transform: translateY(4px);
}


/* white */
.btn_11_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #eee;
  color: #555;
  font-weight: bold;
  text-shadow: 0 2px 2px #fff,0 2px 2px #fff;
  border-radius: 0;
  border-bottom: solid 7px #bbb;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_white::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #999;
}

.btn_11_white:hover {
  background-color: #fefefe;
}

.btn_11_white:active {
  transform: translateY(4px);
}


/* black */
.btn_11_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0 2px 2px #222,0 2px 2px #222;
  border-radius: 0;
  border-bottom: solid 7px #222;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_11_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #141414;
}

.btn_11_black:hover {
  background-color: #444;
}

.btn_11_black:active {
  transform: translateY(4px);
}


/* -----------------------------------------------------------------------------
 btn_12  brackets カギ括弧 ※whiteなし
-------------------------------------------------------------------------------- */
/* red */
.btn_12_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #BB3E50;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_red::before, .btn_12_red::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_red::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #C9536B;
  border-top: solid 2px #C9536B;
}

.btn_12_red::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #C9536B;
  border-bottom: solid 2px #C9536B;
}

.btn_12_red:hover {
  letter-spacing: 2px;
}

.btn_12_red:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_red:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_red:active {
  transform: scale(.97);
  transform: translateY(4px);
}

/* yellow */
.btn_12_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #F4982B;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_yellow::before, .btn_12_yellow::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_yellow::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #F6AD3A;
  border-top: solid 2px #F6AD3A;
}

.btn_12_yellow::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #F6AD3A;
  border-bottom: solid 2px #F6AD3A;
}

.btn_12_yellow:hover {
  letter-spacing: 2px;
}

.btn_12_yellow:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_yellow:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_yellow:active {
  transform: scale(.97);
  transform: translateY(4px);
}

/* lime */
.btn_12_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #93C33D;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_lime::before, .btn_12_lime::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_lime::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #A9CF52;
  border-top: solid 2px #A9CF52;
}

.btn_12_lime::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #A9CF52;
  border-bottom: solid 2px #A9CF52;
}

.btn_12_lime:hover {
  letter-spacing: 2px;
}

.btn_12_lime:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_lime:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_lime:active {
  transform: scale(.97);
  transform: translateY(4px);
}


/* green */
.btn_12_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #009893;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_green::before, .btn_12_green::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_green::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #00ADA9;
  border-top: solid 2px #00ADA9;
}

.btn_12_green::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #00ADA9;
  border-bottom: solid 2px #00ADA9;
}

.btn_12_green:hover {
  letter-spacing: 2px;
}

.btn_12_green:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_green:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_green:active {
  transform: scale(.97);
  transform: translateY(4px);
}


/* blue */
.btn_12_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #10457A;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_blue::before, .btn_12_blue::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_blue::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #2B71B8;
  border-top: solid 2px #2B71B8;
}

.btn_12_blue::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #2B71B8;
  border-bottom: solid 2px #2B71B8;
}

.btn_12_blue:hover {
  letter-spacing: 2px;
}

.btn_12_blue:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_blue:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_blue:active {
  transform: scale(.97);
  transform: translateY(4px);
}


/* purple */
.btn_12_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #51378D;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_purple::before, .btn_12_purple::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_purple::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #6C4AA4;
  border-top: solid 2px #6C4AA4;
}

.btn_12_purple::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #6C4AA4;
  border-bottom: solid 2px #6C4AA4;
}

.btn_12_purple:hover {
  letter-spacing: 2px;
}

.btn_12_purple:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_purple:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_purple:active {
  transform: scale(.97);
  transform: translateY(4px);
}


/* black */
.btn_12_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .94);
  color: #555;
  text-shadow:none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_12_black::before, .btn_12_black::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 20px;
  transition: .2s ease-out;
}

.btn_12_black::before {
  top: 6px;
  left: 6px;
  border-left: solid 2px #777;
  border-top: solid 2px #777;
}

.btn_12_black::after {
  bottom: 6px;
  right: 6px;
  border-right: solid 2px #777;
  border-bottom: solid 2px #777;
}

.btn_12_black:hover {
  letter-spacing: 2px;
}

.btn_12_black:hover::before {
  width: 36px;
  height: 26px;
  top: 4px;
  left: 4px;
}

.btn_12_black:hover::after {
  width: 36px;
  height: 26px;
  bottom: 4px;
  right: 4px;
}

.btn_12_black:active {
  transform: scale(.97);
  transform: translateY(4px);
}

/* -----------------------------------------------------------------------------
 btn_13  stripe ストライプ
-------------------------------------------------------------------------------- */
.btn_13 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #666;
  color: #fff;
  text-shadow: none;
  border-radius: 10px;
  border: solid 2px #444;
  box-shadow: 0 4px 0 #444;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13::before, .btn_13::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
}

.btn_13::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(180, 180, 180, .2) 10px, rgba(180, 180, 180, .2) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(180, 180, 180, .2) 10px, rgba(180, 180, 180, .2) 20px );
}

.btn_13::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(180, 180, 180, .2) 10px, rgba(180, 180, 180, .2) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(180, 180, 180, .2) 10px, rgba(180, 180, 180, .2) 20px );
  opacity: 0;
}

.btn_13:hover::before { opacity: 0; }
.btn_13:hover::after { opacity: 1; }

.btn_13:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* red */
.btn_13_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: 0 2px 2px #8C3143,0 2px 2px #8C3143;
  border-radius: 10px;
  border: solid 2px #8C3143;
  box-shadow: 0 4px 0 #8C3143;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_red::before, .btn_13_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_red::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
}

.btn_13_red::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  opacity: 0;
}

.btn_13_red:hover::before { opacity: 0; }
.btn_13_red:hover::after { opacity: 1; }

.btn_13_red:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* yellow */
.btn_13_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: 0 2px 2px #946315,0 2px 2px #946315;
  border-radius: 10px;
  border: solid 2px #946315;
  box-shadow: 0 4px 0 #946315;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_yellow::before, .btn_13_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_yellow::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
}

.btn_13_yellow::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  opacity: 0;
}

.btn_13_yellow:hover::before { opacity: 0; }
.btn_13_yellow:hover::after { opacity: 1; }

.btn_13_yellow:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* lime */
.btn_13_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: 0 2px 2px #59731D,0 2px 2px #59731D;
  border-radius: 10px;
  border: solid 2px #59731D;
  box-shadow: 0 4px 0 #59731D;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_lime::before, .btn_13_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_lime::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
}

.btn_13_lime::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  opacity: 0;
}

.btn_13_lime:hover::before { opacity: 0; }
.btn_13_lime:hover::after { opacity: 1; }

.btn_13_lime:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* green */
.btn_13_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: 0 2px 2px #006664,0 2px 2px #006664;
  border-radius: 10px;
  border: solid 2px #006664;
  box-shadow: 0 4px 0 #006664;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_green::before, .btn_13_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_green::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
}

.btn_13_green::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px );
  opacity: 0;
}

.btn_13_green:hover::before { opacity: 0; }
.btn_13_green:hover::after { opacity: 1; }

.btn_13_green:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* blue */
.btn_13_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: 0 2px 2px #10457A,0 2px 2px #10457A;
  border-radius: 10px;
  border: solid 2px #10457A;
  box-shadow: 0 4px 0 #10457A;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_blue::before, .btn_13_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_blue::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
}

.btn_13_blue::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  opacity: 0;
}

.btn_13_blue:hover::before { opacity: 0; }
.btn_13_blue:hover::after { opacity: 1; }

.btn_13_blue:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* purple */
.btn_13_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: 0 2px 2px #4C2D80,0 2px 2px #4C2D80;
  border-radius: 10px;
  border: solid 2px #4C2D80;
  box-shadow: 0 4px 0 #4C2D80;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_purple::before, .btn_13_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_purple::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
}

.btn_13_purple::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px );
  opacity: 0;
}

.btn_13_purple:hover::before { opacity: 0; }
.btn_13_purple:hover::after { opacity: 1; }

.btn_13_purple:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* white */
.btn_13_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #eee;
  color: #555;
  text-shadow: 0 2px 2px #fff,0 2px 2px #fff;
  border-radius: 10px;
  border: solid 2px #999;
  box-shadow: 0 4px 0 #999;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_white::before, .btn_13_white::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_white::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,.07) 10px, rgba(0,0,0,.07) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,.07) 10px, rgba(0,0,0,.07) 20px );
}

.btn_13_white::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.07) 10px, rgba(0,0,0,.07) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.07) 10px, rgba(0,0,0,.07) 20px );
  opacity: 0;
}

.btn_13_white:hover::before { opacity: 0; }
.btn_13_white:hover::after { opacity: 1; }

.btn_13_white:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* black */
.btn_13_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: 0 2px 2px #222,0 2px 2px #222;
  border-radius: 10px;
  border: solid 2px #222;
  box-shadow: 0 4px 0 #222;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_13_black::before, .btn_13_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: none;
  border-radius: 10px;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_13_black::before {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.07) 10px, rgba(255,255,255,.07) 20px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.07) 10px, rgba(255,255,255,.07) 20px );
}

.btn_13_black::after {
  background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.07) 10px, rgba(255,255,255,.07) 20px );
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.07) 10px, rgba(255,255,255,.07) 20px );
  opacity: 0;
}

.btn_13_black:hover::before { opacity: 0; }
.btn_13_black:hover::after { opacity: 1; }

.btn_13_black:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* -----------------------------------------------------------------------------
 btn_14 arrow1 矢印１
----------------------------------------------------------------------------- */
/* red */
.btn_14_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_red::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_red:hover {
  color: #fefefe;
  background-color: #C9536B;
}

.btn_14_red:hover::after {
  border-color: transparent transparent transparent #fefefe;
}

.btn_14_red:active {
  transform: scale(.96);
}

/* yellow */
.btn_14_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_yellow::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_yellow:hover {
  color: #FEFEFE;
  background-color: #F4982B;
}

.btn_14_yellow:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_yellow:active {
  transform: scale(.96);
}

/* lime */
.btn_14_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_lime::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_lime:hover {
  color: #FEFEFE;
  background-color: #93C33D;
}

.btn_14_lime:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_lime:active {
  transform: scale(.96);
}

/* green */
.btn_14_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_green::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_green:hover {
  color: #FEFEFE;
  background-color: #00ADA9;
}

.btn_14_green:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_green:active {
  transform: scale(.96);
}

/* blue */
.btn_14_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_blue::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_blue:hover {
  color: #FEFEFE;
  background-color: #2B71B8;
}

.btn_14_blue:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_blue:active {
  transform: scale(.96);
}

/* purple */
.btn_14_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_purple::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_purple:hover {
  color: #FEFEFE;
  background-color: #6C4AA4;
}

.btn_14_purple:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_purple:active {
  transform: scale(.96);
}

/* black */
.btn_14_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fefefe;
  color: #555;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_14_black::after {
  position: absolute;
  content: "";
  left: 16px;
  background: none;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #666;
  transition: .2s ease-out;
}

.btn_14_black:hover {
  color: #FEFEFE;
  background-color: #333;
}

.btn_14_black:hover::after {
  border-color: transparent transparent transparent #FEFEFE;
}

.btn_14_black:active {
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_15  arrow2 矢印２
----------------------------------------------------------------------------- */
/* red */
.btn_15_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #8C3143;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_red::before, .btn_15_red::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_red::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_red::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #C9536B;
  border-right: solid 2px #C9536B;
  transform: rotate(45deg);
}

.btn_15_red:hover {
  background-color: #fefefe;
  color: #C9536B;
}

.btn_15_red:hover::before {
  background-color: #C9536B;
}

.btn_15_red:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_red:active {
  transform: scale(.96);
}

/* yellow */
.btn_15_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #946315;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_yellow::before, .btn_15_yellow::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_yellow::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_yellow::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #F6AD3A;
  border-right: solid 2px #F6AD3A;
  transform: rotate(45deg);
}

.btn_15_yellow:hover {
  background-color: #fefefe;
  color: #F4982B;
}

.btn_15_yellow:hover::before {
  background-color: #F6AD3A;
}

.btn_15_yellow:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_yellow:active {
  transform: scale(.96);
}

/* lime */
.btn_15_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #93C33D;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #59731D;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_lime::before, .btn_15_lime::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_lime::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_lime::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #93C33D;
  border-right: solid 2px #93C33D;
  transform: rotate(45deg);
}

.btn_15_lime:hover {
  background-color: #fefefe;
  color: #8cbd35;
}

.btn_15_lime:hover::before {
  background-color: #93C33D;
}

.btn_15_lime:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_lime:active {
  transform: scale(.96);
}


/* green */
.btn_15_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #006664;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_green::before, .btn_15_green::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_green::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_green::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #00ADA9;
  border-right: solid 2px #00ADA9;
  transform: rotate(45deg);
}

.btn_15_green:hover {
  background-color: #fefefe;
  color: #00ADA9;
}

.btn_15_green:hover::before {
  background-color: #00ADA9;
}

.btn_15_green:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_green:active {
  transform: scale(.96);
}

/* blue */
.btn_15_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #10457A;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_blue::before, .btn_15_blue::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_blue::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_blue::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #2B71B8;
  border-right: solid 2px #2B71B8;
  transform: rotate(45deg);
}

.btn_15_blue:hover {
  background-color: #fefefe;
  color: #2B71B8;
}

.btn_15_blue:hover::before {
  background-color: #2B71B8;
}

.btn_15_blue:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_blue:active {
  transform: scale(.96);
}

/* purple */
.btn_15_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #4C2D80;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_purple::before, .btn_15_purple::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_purple::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_purple::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #6C4AA4;
  border-right: solid 2px #6C4AA4;
  transform: rotate(45deg);
}

.btn_15_purple:hover {
  background-color: #fefefe;
  color: #6C4AA4;
}

.btn_15_purple:hover::before {
  background-color: #6C4AA4;
}

.btn_15_purple:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_purple:active {
  transform: scale(.96);
}


/* black */
.btn_15_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 0 #222;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_15_black::before, .btn_15_black::after {
  position: absolute;
  content: "";
  top: 50%;
  transition: .2s ease-out;
}

.btn_15_black::before {
  margin-top: -9px;
  width: 18px;
  height: 18px;
  left: 16px;
  background-color: #fefefe;
  border-radius: 50%;
}

.btn_15_black::after {
  margin-top: -3px;
  width: 5px;
  height: 5px;
  left: 20px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
}

.btn_15_black:hover {
  background-color: #fefefe;
  color: #333;
}

.btn_15_black:hover::before {
  background-color: #333;
}

.btn_15_black:hover::after {
  border-top: solid 2px #fefefe;
  border-right: solid 2px #fefefe;
}

.btn_15_black:active {
  transform: scale(.96);
}

/* -----------------------------------------------------------------------------
 btn_16  stripe_shadow ボーダー影
----------------------------------------------------------------------------- */
.btn_16 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #333;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16::before, .btn_16::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #333;
  z-index: -1;
}

.btn_16::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(51,51,51,.8) 8px, rgba(51,51,51,.8) 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(51,51,51,.8) 8px, rgba(51,51,51,.8) 16px );
  z-index: -2;
}

.btn_16:hover {
  color: #fefefe;
}

.btn_16:hover::before {
  background-color: #333;
  border: solid 3px #fefefe;
}

.btn_16:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.8) 8px, rgba(255,255,255,.8) 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.8) 8px, rgba(255,255,255,.8) 16px );
}

.btn_16:active {
  transform: translateY(4px);
}


/* red */
.btn_16_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #C9536B;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_red::before, .btn_16_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_red::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #C9536B;
  z-index: -1;
}

.btn_16_red::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #C9536B 8px, #C9536B 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #C9536B 8px, #C9536B 16px );
  border: solid 2px #C9536B;
  z-index: -2;
}

.btn_16_red:hover {
  color: #fefefe;
}

.btn_16_red:hover::before {
  background-color: #C9536B;
  border: solid 3px #fefefe;
}

.btn_16_red:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_red:active {
  transform: translateY(4px);
}

/* yellow */
.btn_16_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #F4982B;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_yellow::before, .btn_16_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_yellow::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #F6AD3A;
  z-index: -1;
}

.btn_16_yellow::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #F6AD3A 8px, #F6AD3A 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #F6AD3A 8px, #F6AD3A 16px );
  border: solid 2px #F6AD3A;
  z-index: -2;
}

.btn_16_yellow:hover {
  color: #fefefe;
}

.btn_16_yellow:hover::before {
  background-color: #F6AD3A;
  border: solid 3px #fefefe;
}

.btn_16_yellow:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_yellow:active {
  transform: translateY(4px);
}

/* lime */
.btn_16_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #93C33D;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_lime::before, .btn_16_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_lime::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #A9CF52;
  z-index: -1;
}

.btn_16_lime::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #A9CF52 8px, #A9CF52 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #A9CF52 8px, #A9CF52 16px );
  border: solid 2px #A9CF52;
  z-index: -2;
}

.btn_16_lime:hover {
  color: #fefefe;
}

.btn_16_lime:hover::before {
  background-color: #A9CF52;
  border: solid 3px #fefefe;
}

.btn_16_lime:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_lime:active {
  transform: translateY(4px);
}

/* green */
.btn_16_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #009893;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_green::before, .btn_16_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_green::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #00ADA9;
  z-index: -1;
}

.btn_16_green::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #00ADA9 8px, #00ADA9 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #00ADA9 8px, #00ADA9 16px );
  border: solid 2px #00ADA9;
  z-index: -2;
}

.btn_16_green:hover {
  color: #fefefe;
}

.btn_16_green:hover::before {
  background-color: #00ADA9;
  border: solid 3px #fefefe;
}

.btn_16_green:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_green:active {
  transform: translateY(4px);
}

/* blue */
.btn_16_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #2055A6;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_blue::before, .btn_16_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_blue::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #2055A6;
  z-index: -1;
}

.btn_16_blue::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #2055A6 8px, #2055A6 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #2055A6 8px, #2055A6 16px );
  border: solid 2px #2055A6;
  z-index: -2;
}

.btn_16_blue:hover {
  color: #fefefe;
}

.btn_16_blue:hover::before {
  background-color: #2055A6;
  border: solid 3px #fefefe;
}

.btn_16_blue:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_blue:active {
  transform: translateY(4px);
}


/* purple */
.btn_16_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #6C4AA4;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_purple::before, .btn_16_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_purple::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #6C4AA4;
  z-index: -1;
}

.btn_16_purple::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #6C4AA4 8px, #6C4AA4 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #6C4AA4 8px, #6C4AA4 16px );
  border: solid 2px #6C4AA4;
  z-index: -2;
}

.btn_16_purple:hover {
  color: #fefefe;
}

.btn_16_purple:hover::before {
  background-color: #6C4AA4;
  border: solid 3px #fefefe;
}

.btn_16_purple:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_purple:active {
  transform: translateY(4px);
}

/* black */
.btn_16_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #333;
  text-shadow: none;
  box-shadow: none;
  box-sizing: border-box;
}

.btn_16_black::before, .btn_16_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.btn_16_black::before {
  top: 0px;
  left: 0px;
  background-color: #fefefe;
  border-radius: 0px;
  border: solid 3px #333;
  z-index: -1;
}

.btn_16_black::after {
  top: 6px;
  left: 6px;
  background: none;
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #333 8px, #333 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #333 8px, #333 16px );
  border: solid 2px #333;
  z-index: -2;
}

.btn_16_black:hover {
  color: #fefefe;
}

.btn_16_black:hover::before {
  background-color: #333;
  border: solid 3px #fefefe;
}

.btn_16_black:hover::after {
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, #fefefe 8px, #fefefe 16px );
  border: solid 2px #fefefe;
}

.btn_16_black:active {
  transform: translateY(4px);
}


/* -----------------------------------------------------------------------------
 btn_17 two_point ２角ポイント
----------------------------------------------------------------------------- */
.btn_17 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #333;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #333;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17::before, .btn_17::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #333;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17::before {
  top: -18px;
  left: -18px;
}

.btn_17::after {
  bottom: -18px;
  right: -18px;
}

.btn_17:hover {
  color: #fefefe;
}

.btn_17:hover::before, .btn_17:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17:hover::before {
  top: 0;
  left: 0;
}

.btn_17:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17:active {
  transform: scale(.96);
}

/* red */
.btn_17_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #C9536B;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #C9536B;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_red::before, .btn_17_red::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #C9536B;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_red::before {
  top: -18px;
  left: -18px;
}

.btn_17_red::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_red:hover {
  color: #fefefe;
}

.btn_17_red:hover::before, .btn_17_red:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_red:hover::before {
  top: 0;
  left: 0;
}

.btn_17_red:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_red:active {
  transform: scale(.96);
}

/* yellow */
.btn_17_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #F4982B;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #F6AD3A;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_yellow::before, .btn_17_yellow::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #F6AD3A;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_yellow::before {
  top: -18px;
  left: -18px;
}

.btn_17_yellow::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_yellow:hover {
  color: #fefefe;
}

.btn_17_yellow:hover::before, .btn_17_yellow:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_yellow:hover::before {
  top: 0;
  left: 0;
}

.btn_17_yellow:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_yellow:active {
  transform: scale(.96);
}


/* lime */
.btn_17_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #93C33D;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #A9CF52;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_lime::before, .btn_17_lime::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #A9CF52;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_lime::before {
  top: -18px;
  left: -18px;
}

.btn_17_lime::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_lime:hover {
  color: #fefefe;
}

.btn_17_lime:hover::before, .btn_17_lime:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_lime:hover::before {
  top: 0;
  left: 0;
}

.btn_17_lime:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_lime:active {
  transform: scale(.96);
}


/* green */
.btn_17_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #00ADA9;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #00ADA9;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_green::before, .btn_17_green::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #00ADA9;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_green::before {
  top: -18px;
  left: -18px;
}

.btn_17_green::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_green:hover {
  color: #fefefe;
}

.btn_17_green:hover::before, .btn_17_green:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_green:hover::before {
  top: 0;
  left: 0;
}

.btn_17_green:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_green:active {
  transform: scale(.96);
}


/* blue */
.btn_17_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #2B71B8;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #2B71B8;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_blue::before, .btn_17_blue::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #2B71B8;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_blue::before {
  top: -18px;
  left: -18px;
}

.btn_17_blue::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_blue:hover {
  color: #fefefe;
}

.btn_17_blue:hover::before, .btn_17_blue:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_blue:hover::before {
  top: 0;
  left: 0;
}

.btn_17_blue:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_blue:active {
  transform: scale(.96);
}


/* purple */
.btn_17_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #6C4AA4;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #6C4AA4;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_purple::before, .btn_17_purple::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #6C4AA4;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_purple::before {
  top: -18px;
  left: -18px;
}

.btn_17_purple::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_purple:hover {
  color: #fefefe;
}

.btn_17_purple:hover::before, .btn_17_purple:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_purple:hover::before {
  top: 0;
  left: 0;
}

.btn_17_purple:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_purple:active {
  transform: scale(.96);
}


/* black */
.btn_17_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #fff;
  color: #333;
  text-shadow: none;
  border-radius: 0px;
  border: solid 1px #333;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: .2s ease-out;
}

.btn_17_black::before, .btn_17_black::after {
  position: absolute;
  content:"";
  width: 36px;
  height: 36px;
  background-color: #333;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s ease-out;
  z-index: -1;
}

.btn_17_black::before {
  top: -18px;
  left: -18px;
}

.btn_17_black::after {
  bottom: -18px;
  right: -18px;
}

.btn_17_black:hover {
  color: #fefefe;
}

.btn_17_black:hover::before, .btn_17_black:hover::after {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.btn_17_black:hover::before {
  top: 0;
  left: 0;
}

.btn_17_black:hover::after {
  bottom: 0;
  right: 0;
}

.btn_17_black:active {
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_18  translucent_round 半透明角丸
----------------------------------------------------------------------------- */
.btn_18 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(255, 255, 255, .65);
  color: #333;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  border-radius: 16px;
  border: solid 1px rgba(255, 255, 255, .5);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18:hover {
  background: rgba(255, 255, 255, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* red */
.btn_18_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(201, 83, 107, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #8C3143,0 1px 2px #8C3143;
  border-radius: 16px;
  border: solid 1px rgba(201, 83, 107, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_red:hover {
  background: rgba(201, 83, 107, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_red:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* yellow */
.btn_18_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(246, 173, 58, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #946315,0 1px 2px #946315;
  border-radius: 16px;
  border: solid 1px rgba(246, 173, 58, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_yellow:hover {
  background: rgba(246, 173, 58, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_yellow:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* lime */
.btn_18_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(147, 195, 61, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #59731D,0 1px 2px #59731D;
  border-radius: 16px;
  border: solid 1px rgba(147, 195, 61, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_lime:hover {
  background: rgba(147, 195, 61, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_lime:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}


/* green */
.btn_18_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(0, 173, 169, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #006664,0 1px 2px #006664;
  border-radius: 16px;
  border: solid 1px rgba(0, 173, 169, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_green:hover {
  background: rgba(0, 173, 169, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_green:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}


/* blue */
.btn_18_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(43, 113, 184, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #10457A,0 1px 2px #10457A;
  border-radius: 16px;
  border: solid 1px rgba(43, 113, 184, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_blue:hover {
  background: rgba(43, 113, 184, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_blue:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* purple */
.btn_18_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(108, 74, 164, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #4C2D80,0 1px 2px #4C2D80;
  border-radius: 16px;
  border: solid 1px rgba(108, 74, 164, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_purple:hover {
  background: rgba(108, 74, 164, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_purple:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* white */
.btn_18_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(255, 255, 255, .6);
  color: #333;
  text-shadow: 0 1px 2px #fff;
  border-radius: 16px;
  border: solid 1px rgba(255, 255, 255, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_white:hover {
  background: rgba(255, 255, 255, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_white:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}

/* black */
.btn_18_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: rgba(0, 0, 0, .6);
  color: #fefefe;
  text-shadow: 0 1px 2px #141414,0 1px 2px #141414;
  border-radius: 16px;
  border: solid 1px rgba(0, 0, 0, .7);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .3s;
}

.btn_18_black:hover {
  background: rgba(0, 0, 0, .8);
  box-shadow: 2px 4px 20px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_18_black:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
  transform: translateY(2px);
}


/* -----------------------------------------------------------------------------
 btn_19  metal 質感
----------------------------------------------------------------------------- */
.btn_19 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, rgb(119,119,119) 0%, rgb(107,107,107) 50%, rgb(136,136,136) 51%);
  background-image: linear-gradient( top, rgb(119,119,119) 0%, rgb(107,107,107) 50%, rgb(136,136,136) 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  border-radius: 8px;
  border: solid 2px #444;
  box-shadow: 0 4px #444;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19::before, .btn_19::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fff;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19::before {
  top: 50%;
  left: 0;
}

.btn_19::after {
  bottom: 50%;
  left: 0;
}

.btn_19:hover {
  color: #333;
}

.btn_19:hover::before, .btn_19:hover::after {
  height: 50%;
}

.btn_19:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* red */
.btn_19_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #C9536B 0%, #BB3E50 50%, #D76886 51%);
  background-image: linear-gradient( top, #C9536B 0%, #BB3E50 50%, #D76886 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #8C3143,0 1px 2px #8C3143;
  border-radius: 8px;
  border: solid 2px #8C3143;
  box-shadow: 0 4px #8C3143;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_red::before, .btn_19_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_red::before {
  top: 50%;
  left: 0;
}

.btn_19_red::after {
  bottom: 50%;
  left: 0;
}

.btn_19_red:hover {
  color: #BB3E50;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_red:hover::before, .btn_19_red:hover::after {
  height: 50%;
}

.btn_19_red:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* yellow */
.btn_19_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #F6AD3A 0%, #F4982B 50%, #F8C249 51%);
  background-image: linear-gradient( top, #F6AD3A 0%, #F4982B 50%, #F8C249 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #946315,0 1px 2px #946315;
  border-radius: 8px;
  border: solid 2px #946315;
  box-shadow: 0 4px #946315;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_yellow::before, .btn_19_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_yellow::before {
  top: 50%;
  left: 0;
}

.btn_19_yellow::after {
  bottom: 50%;
  left: 0;
}

.btn_19_yellow:hover {
  color: #F4982B;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_yellow:hover::before, .btn_19_yellow:hover::after {
  height: 50%;
}

.btn_19_yellow:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* lime */
.btn_19_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #A9CF52 0%, #93C33D 50%, #BFDB67 51%);
  background-image: linear-gradient( top, #A9CF52 0%, #93C33D 50%, #BFDB67 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #59731D,0 1px 2px #59731D;
  border-radius: 8px;
  border: solid 2px #59731D;
  box-shadow: 0 4px #59731D;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_lime::before, .btn_19_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_lime::before {
  top: 50%;
  left: 0;
}

.btn_19_lime::after {
  bottom: 50%;
  left: 0;
}

.btn_19_lime:hover {
  color: #93C33D;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_lime:hover::before, .btn_19_lime:hover::after {
  height: 50%;
}

.btn_19_lime:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* green */
.btn_19_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #00ADA9 0%, #009893 50%, #00C2BF 51%);
  background-image: linear-gradient( top, #00ADA9 0%, #009893 50%, #00C2BF 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #006664,0 1px 2px #006664;
  border-radius: 8px;
  border: solid 2px #006664;
  box-shadow: 0 4px #006664;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_green::before, .btn_19_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_green::before {
  top: 50%;
  left: 0;
}

.btn_19_green::after {
  bottom: 50%;
  left: 0;
}

.btn_19_green:hover {
  color: #009893;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_green:hover::before, .btn_19_green:hover::after {
  height: 50%;
}

.btn_19_green:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* blue */
.btn_19_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #2B71B8 0%, #2055A6 50%, #368DCA 51%);
  background-image: linear-gradient( top, #2B71B8 0%, #2055A6 50%, #368DCA 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #10457A,0 1px 2px #10457A;
  border-radius: 8px;
  border: solid 2px #10457A;
  box-shadow: 0 4px #10457A;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_blue::before, .btn_19_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_blue::before {
  top: 50%;
  left: 0;
}

.btn_19_blue::after {
  bottom: 50%;
  left: 0;
}

.btn_19_blue:hover {
  color: #2B71B8;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_blue:hover::before, .btn_19_blue:hover::after {
  height: 50%;
}

.btn_19_blue:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* purple */
.btn_19_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #6C4AA4 0%, #4C2D80 50%, #875DBB 51%);
  background-image: linear-gradient( top, #6C4AA4 0%, #4C2D80 50%, #875DBB 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #4C2D80,0 1px 2px #4C2D80;
  border-radius: 8px;
  border: solid 2px #4C2D80;
  box-shadow: 0 4px #4C2D80;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_purple::before, .btn_19_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_purple::before {
  top: 50%;
  left: 0;
}

.btn_19_purple::after {
  bottom: 50%;
  left: 0;
}

.btn_19_purple:hover {
  color: #6C4AA4;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_purple:hover::before, .btn_19_purple:hover::after {
  height: 50%;
}

.btn_19_purple:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* white */
.btn_19_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #aaa 0%, #ccc 50%, #eee 51%);
  background-image: linear-gradient( top, #aaa 0%, #ccc 50%, #eee 51%);
  color: #444;
  text-shadow: 0 1px 2px #fff,0 1px 2px #fff;
  border-radius: 8px;
  border: solid 2px #777;
  box-shadow: 0 4px #777;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_white::before, .btn_19_white::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_white::before {
  top: 50%;
  left: 0;
}

.btn_19_white::after {
  bottom: 50%;
  left: 0;
}

.btn_19_white:hover {
  color: #444;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_white:hover::before, .btn_19_white:hover::after {
  height: 50%;
}

.btn_19_white:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* black */
.btn_19_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #666;
  background-image: -webkit-linear-gradient( 90deg, #444 0%, #333 50%, #666 51%);
  background-image: linear-gradient( top, #444 0%, #333 50%, #666 51%);
  color: #fefefe;
  text-shadow: 0 1px 2px #222,0 1px 2px #222;
  border-radius: 8px;
  border: solid 2px #141414;
  box-shadow: 0 4px #141414;
  box-sizing: border-box;
  transition: .2s ease-out;
  overflow: hidden;
}

.btn_19_black::before, .btn_19_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  background: #fefefe;
  transition: .2s ease-in;
  z-index: -1;
}

.btn_19_black::before {
  top: 50%;
  left: 0;
}

.btn_19_black::after {
  bottom: 50%;
  left: 0;
}

.btn_19_black:hover {
  color: #444;
  text-shadow: 0 1px 2px #fefefe,0 1px 2px #fefefe;
}

.btn_19_black:hover::before, .btn_19_black:hover::after {
  height: 50%;
}

.btn_19_black:active {
  box-shadow: none;
  transform: translateY(4px);
}


/* -----------------------------------------------------------------------------
 btn_20  gloss_round ハイライト角丸
----------------------------------------------------------------------------- */
/* red */
.btn_20_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #C9536B;
  color: #fefefe;
  text-shadow: 0 1px 2px #8C3143,0 1px 2px #8C3143;
  border-radius: 8px;
  border: solid 2px #8C3143;
  box-shadow: inset 0 2px 0 #F1CCD6;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_red:hover {
  background-color: #D76886;
  box-shadow: inset 0 2px 0 #F1CCD6, 0 4px 0 #8C3143;
  transform: translateY(-4px);
}

.btn_20_red:active {
  background-color: #BB3E50;
  transform: scale(.96);
}


/* yellow */
.btn_20_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #F6AD3A;
  color: #fefefe;
  text-shadow: 0 1px 2px #946315,0 1px 2px #946315;
  border-radius: 8px;
  border: solid 2px #946315;
  box-shadow: inset 0 2px 0 #FCEAC2;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_yellow:hover {
  background-color: #F8C249;
  box-shadow: inset 0 2px 0 #FCEAC2, 0 4px 0 #946315;
  transform: translateY(-4px);
}

.btn_20_yellow:active {
  background-color: #F4982B;
  transform: scale(.96);
}


/* lime */
.btn_20_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #A9CF52;
  color: #fefefe;
  text-shadow: 0 1px 2px #59731D,0 1px 2px #59731D;
  border-radius: 8px;
  border: solid 2px #59731D;
  box-shadow: inset 0 2px 0 #EAF3CC;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_lime:hover {
  background-color: #BFDB67;
  box-shadow: inset 0 2px 0 #EAF3CC, 0 4px 0 #59731D;
  transform: translateY(-4px);
}

.btn_20_lime:active {
  background-color: #93C33D;
  transform: scale(.96);
}

/* green */
.btn_20_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #00ADA9;
  color: #fefefe;
  text-shadow: 0 1px 2px #006664,0 1px 2px #006664;
  border-radius: 8px;
  border: solid 2px #006664;
  box-shadow: inset 0 2px 0 #AAEAE9;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_green:hover {
  background-color: #00C2BF;
  box-shadow: inset 0 2px 0 #AAEAE9, 0 4px 0 #006664;
  transform: translateY(-4px);
}

.btn_20_green:active {
  background-color: #009893;
  transform: scale(.96);
}

/* blue */
.btn_20_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #2B71B8;
  color: #fefefe;
  text-shadow: 0 1px 2px #10457A,0 1px 2px #10457A;
  border-radius: 8px;
  border: solid 2px #10457A;
  box-shadow: inset 0 2px 0 #BCD9ED;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_blue:hover {
  background-color: #368DCA;
  box-shadow: inset 0 2px 0 #BCD9ED, 0 4px 0 #10457A;
  transform: translateY(-4px);
}

.btn_20_blue:active {
  background-color: #2055A6;
  transform: scale(.96);
}


/* purple */
.btn_20_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #6C4AA4;
  color: #fefefe;
  text-shadow: 0 1px 2px #4C2D80,0 1px 2px #4C2D80;
  border-radius: 8px;
  border: solid 2px #4C2D80;
  box-shadow: inset 0 2px 0 #D7C9E8;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_purple:hover {
  background-color: #875DBB;
  box-shadow: inset 0 2px 0 #D7C9E8, 0 4px 0 #4C2D80;
  transform: translateY(-4px);
}

.btn_20_purple:active {
  background-color: #51378D;
  transform: scale(.96);
}

/* white */
.btn_20_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #e5e5e5;
  color: #444;
  text-shadow: 0 1px 2px #fff,0 1px 2px #fff;
  border-radius: 8px;
  border: solid 2px #666;
  box-shadow: inset 0 2px 0 #fff;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_white:hover {
  background-color: #f1f1f1;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #666;
  transform: translateY(-4px);
}

.btn_20_white:active {
  background-color: #ddd;
  transform: scale(.96);
}

/* black */
.btn_20_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #333;
  color: #fefefe;
  text-shadow: 0 1px 2px #222,0 1px 2px #222;
  border-radius: 8px;
  border: solid 2px #141414;
  box-shadow: inset 0 2px 0 #666;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_20_black:hover {
  background-color: #444;
  box-shadow: inset 0 2px 0 #666, 0 4px 0 #141414;
  transform: translateY(-4px);
}

.btn_20_black:active {
  background-color: #222;
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_21 gloss_circle ハイライトラウンド
----------------------------------------------------------------------------- */
/* red */
.btn_21_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #C9536B;
  color: #fefefe;
  text-shadow: 0 1px 2px #8C3143,0 1px 2px #8C3143;
  border-radius: 1.5em;
  border: solid 2px #8C3143;
  box-shadow: inset 0 -2px 0 #F1CCD6;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_red:hover {
  background-color: #D76886;
  box-shadow: inset 0 -2px 0 #F1CCD6, 0 4px 0 #8C3143;
  transform: translateY(-4px);
}

.btn_21_red:active {
  background-color: #BB3E50;
  transform: scale(.96);
}

/* yellow */
.btn_21_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #F6AD3A;
  color: #fefefe;
  text-shadow: 0 1px 2px #946315,0 1px 2px #946315;
  border-radius: 1.5em;
  border: solid 2px #946315;
  box-shadow: inset 0 -2px 0 #FCEAC2;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_yellow:hover {
  background-color: #F8C249;
  box-shadow: inset 0 -2px 0 #FCEAC2, 0 4px 0 #946315;
  transform: translateY(-4px);
}

.btn_21_yellow:active {
  background-color: #F4982B;
  transform: scale(.96);
}

/* lime */
.btn_21_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #A9CF52;
  color: #fefefe;
  text-shadow: 0 1px 2px #59731D,0 1px 2px #59731D;
  border-radius: 1.5em;
  border: solid 2px #59731D;
  box-shadow: inset 0 -2px 0 #EAF3CC;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_lime:hover {
  background-color: #BFDB67;
  box-shadow: inset 0 -2px 0 #EAF3CC, 0 4px 0 #59731D;
  transform: translateY(-4px);
}

.btn_21_lime:active {
  background-color: #93C33D;
  transform: scale(.96);
}

/* green */
.btn_21_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #00ADA9;
  color: #fefefe;
  text-shadow: 0 1px 2px #006664,0 1px 2px #006664;
  border-radius: 1.5em;
  border: solid 2px #006664;
  box-shadow: inset 0 -2px 0 #AAEAE9;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_green:hover {
  background-color: #00C2BF;
  box-shadow: inset 0 -2px 0 #AAEAE9, 0 4px 0 #006664;
  transform: translateY(-4px);
}

.btn_21_green:active {
  background-color: #009893;
  transform: scale(.96);
}

/* blue */
.btn_21_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #2B71B8;
  color: #fefefe;
  text-shadow: 0 1px 2px #10457A,0 1px 2px #10457A;
  border-radius: 1.5em;
  border: solid 2px #10457A;
  box-shadow: inset 0 -2px 0 #BCD9ED;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_blue:hover {
  background-color: #368DCA;
  box-shadow: inset 0 -2px 0 #BCD9ED, 0 4px 0 #10457A;
  transform: translateY(-4px);
}

.btn_21_blue:active {
  background-color: #2055A6;
  transform: scale(.96);
}

/* purple */
.btn_21_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #6C4AA4;
  color: #fefefe;
  text-shadow: 0 1px 2px #4C2D80,0 1px 2px #4C2D80;
  border-radius: 1.5em;
  border: solid 2px #4C2D80;
  box-shadow: inset 0 -2px 0 #D7C9E8;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_purple:hover {
  background-color: #875DBB;
  box-shadow: inset 0 -2px 0 #D7C9E8, 0 4px 0 #4C2D80;
  transform: translateY(-4px);
}

.btn_21_purple:active {
  background-color: #51378D;
  transform: scale(.96);
}

/* white */
.btn_21_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #e5e5e5;
  color: #444;
  text-shadow: 0 1px 2px #fff,0 1px 2px #fff;
  border-radius: 1.5em;
  border: solid 2px #666;
  box-shadow: inset 0 -2px 0 #fff;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_white:hover {
  background-color: #f1f1f1;
  box-shadow: inset 0 -2px 0 #fff, 0 4px 0 #666;
  transform: translateY(-4px);
}

.btn_21_white:active {
  background-color: #ddd;
  transform: scale(.96);
}

/* black */
.btn_21_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: #333;
  color: #fefefe;
  text-shadow: 0 1px 2px #222,0 1px 2px #222;
  border-radius: 1.5em;
  border: solid 2px #141414;
  box-shadow: inset 0 -2px 0 #666;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_21_black:hover {
  background-color: #444;
  box-shadow: inset 0 -2px 0 #666, 0 4px 0 #141414;
  transform: translateY(-4px);
}

.btn_21_black:active {
  background-color: #222;
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_22 outline アウトラインのみ
----------------------------------------------------------------------------- */
.btn_22 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(201, 84, 108, .2);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  border-radius: 1.5em;
  border: solid 3px #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}

.btn_22:active {
  background-color: rgba(0, 0, 0, .4);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* red */
.btn_22_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(201, 84, 108, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B,
    0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B,
    0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B,0 1px 2px #C9536B;
  border-radius: 1.5em;
  border: solid 3px #C9536B;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_red:hover {
  background: rgba(201, 84, 108, .5);
  border-color: #C9536B;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_red:active {
  background-color: rgba(140, 49, 67, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* yellow */
.btn_22_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(246, 173, 58, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,
    0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,
    0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A,0 1px 2px #F6AD3A;
  border-radius: 1.5em;
  border: solid 3px #F6AD3A;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_yellow:hover {
  background: rgba(246, 173, 58, .5);
  border-color: #F6AD3A;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_yellow:active {
  background-color: rgba(148, 99, 21, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* lime */
.btn_22_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(169, 207, 82, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D,
    0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D,
    0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D,0 1px 2px #93C33D;
  border-radius: 1.5em;
  border: solid 3px #A9CF52;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_lime:hover {
  background: rgba(169, 207, 82, .5);
  border-color: #A9CF52;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_lime:active {
  background-color: rgba(89, 115, 29, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* green */
.btn_22_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(0, 173, 169, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893,
    0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893,
    0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893,0 1px 2px #009893;
  border-radius: 1.5em;
  border: solid 3px #00ADA9;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_green:hover {
  background: rgba(0, 173, 169, .5);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_green:active {
  background-color: rgba(0, 102, 100, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* blue */
.btn_22_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(43, 113, 184, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A,
    0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A,
    0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A,0 1px 2px #10457A;
  border-radius: 1.5em;
  border: solid 3px #2B71B8;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_blue:hover {
  background: rgba(43, 113, 184, .5);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_blue:active {
  background-color: rgba(16, 69, 122, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* purple */
.btn_22_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(108, 74, 164, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,
    0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,
    0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4,0 1px 2px #6C4AA4;
  border-radius: 1.5em;
  border: solid 3px #6C4AA4;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_purple:hover {
  background: rgba(108, 74, 164, .5);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_purple:active {
  background-color: rgba(76, 45, 128, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* white */
.btn_22_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(255, 255, 255, .2);
  color: #fff;
  text-shadow:
    0 1px 2px #666,0 1px 2px #666,0 1px 2px #666,0 1px 2px #666,
    0 1px 2px #666,0 1px 2px #666,0 1px 2px #666,0 1px 2px #666,
    0 1px 2px #666,0 1px 2px #666,0 1px 2px #666,0 1px 2px #666;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_white:hover {
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_white:active {
  background-color: rgba(200, 200, 200, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}

/* black */
.btn_22_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: rgba(10, 10, 10, .2);
  color: #fefefe;
  text-shadow:
    0 1px 2px #333,0 1px 2px #333,0 1px 2px #333,0 1px 2px #333,
    0 1px 2px #333,0 1px 2px #333,0 1px 2px #333,0 1px 2px #333,
    0 1px 2px #333,0 1px 2px #333,0 1px 2px #333,0 1px 2px #333;
  border-radius: 1.5em;
  border: solid 3px #333;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_22_black:hover {
  background: rgba(10, 10, 10, .5);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

.btn_22_black:active {
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 6px 2px rgba(0, 0, 0, .2);
  transform: translateY(2px) scale(.98);
}


/* -----------------------------------------------------------------------------
 btn_23  shadow_grd 影グラデーション
----------------------------------------------------------------------------- */
.btn_23 {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #4f1b7f;
  text-shadow: none;
  border: none;
  border-radius: 1.5em;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_23::before, .btn_23::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: .2s ease-out;
}

.btn_23::before {
  top: 0;
  left: 0;
  background-color: #fefefe;
  border-radius: 1.5em;
  border: solid 3px #4f1b7f;
  box-sizing: border-box;
  z-index: -1;
}

.btn_23::after {
  top: 5px;
  left: 5px;
  background: -webkit-linear-gradient(right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  background: linear-gradient(to right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  border-radius: 1.5em;
  z-index: -2;
}

.btn_23:hover::after {
  top: -5px;
  left: -5px;
}

.btn_23:active {
  color: #fefefe;
  transform: scale(.96);
}

.btn_23:active::before {
  background-color: #4f1b7f;
}

.btn_23:active::after {
  top: 0;
  left: 0;
}

/* purple */
.btn_23_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #4f1b7f;
  text-shadow: none;
  border: none;
  border-radius: 1.5em;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_23_purple::before, .btn_23_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: .2s ease-out;
}

.btn_23_purple::before {
  top: 0;
  left: 0;
  background-color: #fefefe;
  border-radius: 1.5em;
  border: solid 3px #4f1b7f;
  box-sizing: border-box;
  z-index: -1;
}

.btn_23_purple::after {
  top: 5px;
  left: 5px;
  background: -webkit-linear-gradient(right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  background: linear-gradient(to right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  border-radius: 1.5em;
  z-index: -2;
}

.btn_23_purple:hover::after {
  top: -5px;
  left: -5px;
}

.btn_23_purple:active {
  color: #fefefe;
  transform: scale(.96);
}

.btn_23_purple:active::before {
  background-color: #4f1b7f;
}

.btn_23_purple:active::after {
  top: 0;
  left: 0;
}

/* green */
.btn_23_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #4f1b7f;
  text-shadow: none;
  border: none;
  border-radius: 1.5em;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_23_green::before, .btn_23_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: .2s ease-out;
}

.btn_23_green::before {
  top: 0;
  left: 0;
  background-color: #fefefe;
  border-radius: 1.5em;
  border: solid 3px #4f1b7f;
  box-sizing: border-box;
  z-index: -1;
}

.btn_23_green::after {
  top: 5px;
  left: 5px;
  background-image: -webkit-linear-gradient( right, rgb(93,12,173) 0%, rgb(75,101,127) 28%, rgb(57,189,81) 50%, rgb(255,226,82) 100%);
  background-image: linear-gradient( to right, rgb(93,12,173) 0%, rgb(75,101,127) 28%, rgb(57,189,81) 50%, rgb(255,226,82) 100%);
  border-radius: 1.5em;
  z-index: -2;
}

.btn_23_green:hover::after {
  top: -5px;
  left: -5px;
}

.btn_23_green:active {
  color: #fefefe;
  transform: scale(.96);
}

.btn_23_green:active::before {
  background-color: #4f1b7f;
}

.btn_23_green:active::after {
  top: 0;
  left: 0;
}


/* blue */
.btn_23_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #4f1b7f;
  text-shadow: none;
  border: none;
  border-radius: 1.5em;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_23_blue::before, .btn_23_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transition: .2s ease-out;
}

.btn_23_blue::before {
  top: 0;
  left: 0;
  background-color: #fefefe;
  border-radius: 1.5em;
  border: solid 3px #4f1b7f;
  box-sizing: border-box;
  z-index: -1;
}

.btn_23_blue::after {
  top: 5px;
  left: 5px;
  background-image: -webkit-linear-gradient( right, rgb(93,12,173) 0%, rgb(67,54,189) 28%, rgb(41,95,204) 50%, rgb(82,255,111) 100%);
  background-image: linear-gradient( to right, rgb(93,12,173) 0%, rgb(67,54,189) 28%, rgb(41,95,204) 50%, rgb(82,255,111) 100%);
  border-radius: 1.5em;
  z-index: -2;
}

.btn_23_blue:hover::after {
  top: -5px;
  left: -5px;
}

.btn_23_blue:active {
  color: #fefefe;
  transform: scale(.96);
}

.btn_23_blue:active::before {
  background-color: #4f1b7f;
}

.btn_23_blue:active::after {
  top: 0;
  left: 0;
}


/* -----------------------------------------------------------------------------
 btn_24  dogear ドッグイヤー
----------------------------------------------------------------------------- */
/* red */
.btn_24_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: 0 1px 3px #8C3143,0 1px 3px #8C3143;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_red::before, .btn_24_red::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_red::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #C9536B;
}

.btn_24_red::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_red:hover, .btn_24_red:hover::before {
  background-color: #D76886;
}

.btn_24_red:hover {
  transform: translateY(-3px);
}

.btn_24_red:active, .btn_24_red:active::before {
  background-color: #BB3E50;
}

.btn_24_red:active {
  background-color: #BB3E50;
  box-shadow: none;
  transform: translateY(0px);
}



/* yellow */
.btn_24_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #F6AD3A;
  color: #fefefe;
  text-shadow: 0 1px 3px #946315, 0 1px 3px #946315;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_yellow::before, .btn_24_yellow::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_yellow::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #F6AD3A;
}

.btn_24_yellow::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_yellow:hover, .btn_24_yellow:hover::before {
  background-color: #F8C249;
}

.btn_24_yellow:hover {
  transform: translateY(-3px);
}

.btn_24_yellow:active, .btn_24_yellow:active::before {
  background-color: #F4982B;
}

.btn_24_yellow:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* lime */
.btn_24_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: 0 1px 3px #59731D, 0 1px 3px #59731D;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_lime::before, .btn_24_lime::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_lime::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #A9CF52;
}

.btn_24_lime::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_lime:hover, .btn_24_lime:hover::before {
  background-color: #BFDB67;
}

.btn_24_lime:hover {
  transform: translateY(-3px);
}

.btn_24_lime:active, .btn_24_lime:active::before {
  background-color: #93C33D;
}

.btn_24_lime:active {
  box-shadow: none;
  transform: translateY(0px);
}



/* green */
.btn_24_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: 0 1px 3px #006664, 0 1px 3px #006664;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_green::before, .btn_24_green::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_green::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #00ADA9;
}

.btn_24_green::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_green:hover, .btn_24_green:hover::before {
  background-color: #00C2BF;
}

.btn_24_green:hover {
  transform: translateY(-3px);
}

.btn_24_green:active, .btn_24_green:active::before {
  background-color: #009893;
}

.btn_24_green:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* blue */
.btn_24_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: 0 1px 3px #10457A, 0 1px 3px #10457A;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_blue::before, .btn_24_blue::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_blue::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #2B71B8;
}

.btn_24_blue::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_blue:hover, .btn_24_blue:hover::before {
  background-color: #368DCA;
}

.btn_24_blue:hover {
  transform: translateY(-3px);
}

.btn_24_blue:active, .btn_24_blue:active::before {
  background-color: #2055A6;
}

.btn_24_blue:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* purple */
.btn_24_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: 0 1px 3px #4C2D80, 0 1px 3px #4C2D80;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_purple::before, .btn_24_purple::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_purple::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #6C4AA4;
}

.btn_24_purple::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_purple:hover, .btn_24_purple:hover::before {
  background-color: #875DBB;
}

.btn_24_purple:hover {
  transform: translateY(-3px);
}

.btn_24_purple:active, .btn_24_purple:active::before {
  background-color: #51378D;
}

.btn_24_purple:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* white */
.btn_24_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #eee;
  color: #444;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_white::before, .btn_24_white::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_white::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #eee;
}

.btn_24_white::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #999 #999;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_white:hover, .btn_24_white:hover::before {
  background-color: #fefefe;
}

.btn_24_white:hover {
  transform: translateY(-3px);
}

.btn_24_white:active, .btn_24_white:active::before {
  background-color: #ddd;
}

.btn_24_white:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* black */
.btn_24_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em .74em 1.6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_24_black::before, .btn_24_black::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_24_black::before {
  width: 16px;
  height: -webkit-calc(100% - 16px);
  height: calc(100% - 16px);
  bottom: 0;
  right: -16px;
  background-color: #333;
}

.btn_24_black::after {
  top: 0;
  right: -16px;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: transparent transparent #fefefe #fefefe;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

.btn_24_black:hover, .btn_24_black:hover::before {
  background-color: #444;
}

.btn_24_black:hover {
  transform: translateY(-3px);
}

.btn_24_black:active, .btn_24_black:active::before {
  background-color: #222;
}

.btn_24_black:active {
  box-shadow: none;
  transform: translateY(0px);
}


/* -----------------------------------------------------------------------------
 btn_25  broken_circle 破線ラウンド
----------------------------------------------------------------------------- */
/* red */
.btn_25_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fefefe;
  text-shadow: 0 1px 3px #8C3143, 0 1px 2px #8C3143;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_red::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #F1CCD6;
  transition: .2s ease-out;
}

.btn_25_red:hover {
  background-color: #D76886;
  box-shadow: 0 4px 0 #BB3E50;
  transform: translateY(-4px);
}

.btn_25_red:hover::after {
  border-style: solid;
}

.btn_25_red:active {
  background-color: #BB3E50;
  box-shadow: none;
  transform: translateY(0px);
}


/* yellow */
.btn_25_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fff;
  text-shadow: 0 1px 3px #946315, 0 1px 3px #946315;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_yellow::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #FCEAC2;
  transition: .2s ease-out;
}

.btn_25_yellow:hover {
  background-color: #F8C249;
  box-shadow: 0 4px 0 #F4982B;
  transform: translateY(-4px);
}

.btn_25_yellow:hover::after {
  border-style: solid;
}

.btn_25_yellow:active {
  background-color: #F4982B;
  box-shadow: none;
  transform: translateY(0px);
}


/* lime */
.btn_25_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fefefe;
  text-shadow: 0 1px 3px #59731D, 0 1px 3px #59731D;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_lime::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #EAF3CC;
  transition: .2s ease-out;
}

.btn_25_lime:hover {
  background-color: #BFDB67;
  box-shadow: 0 4px 0 #93C33D;
  transform: translateY(-4px);
}

.btn_25_lime:hover::after {
  border-style: solid;
}

.btn_25_lime:active {
  background-color: #93C33D;
  box-shadow: none;
  transform: translateY(0px);
}


/* green */
.btn_25_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fefefe;
  text-shadow: 0 1px 3px #006664, 0 1px 3px #006664;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_green::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #AAEAE9;
  transition: .2s ease-out;
}

.btn_25_green:hover {
  background-color: #00C2BF;
  box-shadow: 0 4px 0 #009893;
  transform: translateY(-4px);
}

.btn_25_green:hover::after {
  border-style: solid;
}

.btn_25_green:active {
  background-color: #009893;
  box-shadow: none;
  transform: translateY(0px);
}


/* blue */
.btn_25_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fefefe;
  text-shadow: 0 1px 3px #10457A, 0 1px 3px #10457A;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_blue::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #BCD9ED;
  transition: .2s ease-out;
}

.btn_25_blue:hover {
  background-color: #368DCA;
  box-shadow: 0 4px 0 #2055A6;
  transform: translateY(-4px);
}

.btn_25_blue:hover::after {
  border-style: solid;
}

.btn_25_blue:active {
  background-color: #2055A6;
  box-shadow: none;
  transform: translateY(0px);
}


/* purple */
.btn_25_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fefefe;
  text-shadow: 0 1px 3px #4C2D80, 0 1px 3px #4C2D80;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_purple::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #D7C9E8;
  transition: .2s ease-out;
}

.btn_25_purple:hover {
  background-color: #875DBB;
  box-shadow: 0 4px 0 #51378D;
  transform: translateY(-4px);
}

.btn_25_purple:hover::after {
  border-style: solid;
}

.btn_25_purple:active {
  background-color: #51378D;
  box-shadow: none;
  transform: translateY(0px);
}


/* white */
.btn_25_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #eee;
  color: #444;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_white::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #999;
  transition: .2s ease-out;
}

.btn_25_white:hover {
  background-color: #fefefe;
  box-shadow: 0 4px 0 #777;
  transform: translateY(-4px);
}

.btn_25_white:hover::after {
  border-style: solid;
}

.btn_25_white:active {
  background-color: #ddd;
  box-shadow: none;
  transform: translateY(0px);
}


/* black */
.btn_25_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #333;
  color: #fefefe;
  text-shadow: 0 1px 3px #222, 0 1px 3px #222;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_25_black::after {
  position: absolute;
  content: "";
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 1.5em;
  border: dashed 1px #666;
  transition: .2s ease-out;
}

.btn_25_black:hover {
  background-color: #444;
  box-shadow: 0 4px 0 #141414;
  transform: translateY(-4px);
}

.btn_25_black:hover::after {
  border-style: solid;
}

.btn_25_black:active {
  background-color: #222;
  box-shadow: none;
  transform: translateY(0px);
}

/* -----------------------------------------------------------------------------
 btn_26  metal_frame フレーム切り替え
----------------------------------------------------------------------------- */
/* red */
.btn_26_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #BB3E50;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_red::before, .btn_26_red::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_red::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_red::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #C9536B 0%, #BB3E50 50%, #D76886 51%);
  background-image: linear-gradient( top, #C9536B 0%, #BB3E50 50%, #D76886 51%);
  z-index: -2;
}

.btn_26_red:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #8C3143;
}

.btn_26_red:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_red:active {
  transform: scale(.96);
}

.btn_26_red:active::after {
  background-image: -webkit-linear-gradient(90deg, #a14256 0%, #963240 50%, #ac536b 51%);
  background-image: linear-gradient(top, #a14256 0%, #963240 50%, #ac536b 51%);
}


/* yellow */
.btn_26_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #F6AD3A;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_yellow::before, .btn_26_yellow::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_yellow::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_yellow::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #F6AD3A 0%, #F4982B 50%, #F8C249 51%);
  background-image: linear-gradient( top, #F6AD3A 0%, #F4982B 50%, #F8C249 51%);
  z-index: -2;
}

.btn_26_yellow:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #946315;
}

.btn_26_yellow:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_yellow:active {
  transform: scale(.96);
}

.btn_26_yellow:active::after {
  background-image: -webkit-linear-gradient(90deg, #c58a2e 0%, #c37a22 50%, #c69b3a 51%);
  background-image: linear-gradient(top, #c58a2e 0%, #c37a22 50%, #c69b3a 51%);
}


/* lime */
.btn_26_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #93C33D;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_lime::before, .btn_26_lime::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_lime::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_lime::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #A9CF52 0%, #93C33D 50%, #BFDB67 51%);
  background-image: linear-gradient( top, #A9CF52 0%, #93C33D 50%, #BFDB67 51%);
  z-index: -2;
}

.btn_26_lime:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #59731D;
}

.btn_26_lime:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_lime:active {
  transform: scale(.96);
}

.btn_26_lime:active::after {
  background-image: -webkit-linear-gradient(90deg, #87a642 0%, #769c31 50%, #99af52 51%);
  background-image: linear-gradient(top, #87a642 0%, #769c31 50%, #99af52 51%);
}


/* green */
.btn_26_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #009893;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_green::before, .btn_26_green::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_green::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_green::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #00ADA9 0%, #009893 50%, #00C2BF 51%);
  background-image: linear-gradient( top, #00ADA9 0%, #009893 50%, #00C2BF 51%);
  z-index: -2;
}

.btn_26_green:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #006664;
}

.btn_26_green:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_green:active {
  transform: scale(.96);
}

.btn_26_green:active::after {
  background-image: -webkit-linear-gradient(90deg, #008a87 0%, #007a76 50%, #009b99 51%);
  background-image: linear-gradient(top, #008a87 0%, #007a76 50%, #009b99 51%);
}


/* blue */
.btn_26_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #2B71B8;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_blue::before, .btn_26_blue::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_blue::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_blue::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #2B71B8 0%, #2055A6 50%, #368DCA 51%);
  background-image: linear-gradient( top, #2B71B8 0%, #2055A6 50%, #368DCA 51%);
  z-index: -2;
}

.btn_26_blue:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #10457A;
}

.btn_26_blue:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_blue:active {
  transform: scale(.96);
}

.btn_26_blue:active::after {
  background-image: -webkit-linear-gradient(90deg, #225a93 0%, #1a4485 50%, #2b71a2 51%);
  background-image: linear-gradient(top, #225a93 0%, #1a4485 50%, #2b71a2 51%);
}


/* purple */
.btn_26_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #6C4AA4;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_purple::before, .btn_26_purple::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_purple::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_purple::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #6C4AA4 0%, #51378D 50%, #875DBB 51%);
  background-image: linear-gradient( top, #6C4AA4 0%, #51378D 50%, #875DBB 51%);
  z-index: -2;
}

.btn_26_purple:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #4C2D80;
}

.btn_26_purple:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_purple:active {
  transform: scale(.96);
}

.btn_26_purple:active::after {
  background-image: -webkit-linear-gradient(90deg, #563b83 0%, #412c71 50%, #6c4a96 51%);
  background-image: linear-gradient(top, #563b83 0%, #412c71 50%, #6c4a96 51%);
}


/* white */
.btn_26_white {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #444;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_white::before, .btn_26_white::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_white::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_white::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #ccc 0%, #bbb 50%, #eee 51%);
  background-image: linear-gradient( top, #ccc 0%, #bbb 50%, #eee 51%);
  z-index: -2;
}

.btn_26_white:hover {
  color: #444;
  text-shadow: 0 2px 2px #fff;
}

.btn_26_white:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_white:active {
  transform: scale(.96);
}

.btn_26_white:active::after {
  background-image: -webkit-linear-gradient(90deg, #bbb 0%, #aaa 50%, #ddd 51%);
  background-image: linear-gradient(top, #bbb 0%, #aaa 50%, #ddd 51%);
}


/* black */
.btn_26_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background: none;
  color: #444;
  text-shadow: 0 2px 2px #fefefe;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_26_black::before, .btn_26_black::after {
  position: absolute;
  content: "";
  transition: .2s ease-out;
}

.btn_26_black::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fefefe;
  z-index: -1;
}

.btn_26_black::after {
  width: -webkit-calc(100% + 8px);
  width: calc(100% + 8px);
  height: -webkit-calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #444 0%, #333 50%, #555 51%);
  background-image: linear-gradient( top, #444 0%, #333 50%, #555 51%);
  z-index: -2;
}

.btn_26_black:hover {
  color: #fefefe;
  text-shadow: 0 2px 2px #222;
}

.btn_26_black:hover::before {
  width: 0;
  left: 50%;
}

.btn_26_black:active {
  transform: scale(.96);
}

.btn_26_black:active::after {
  background-image: -webkit-linear-gradient(90deg, #333 0%, #222 50%, #444 51%);
  background-image: linear-gradient(top, #333 0%, #222 50%, #444 51%);
}


/* -----------------------------------------------------------------------------
 btn_27　grd_frame  フレームグラデ
----------------------------------------------------------------------------- */
.btn_27_purple {
  position: relative;
  display: inline-block;
  padding: .7em .6em;
  background: none;
  color: #4f1b80;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_27_purple::before, .btn_27_purple::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  transition: .2s ease-out;
}

.btn_27_purple::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: -1;
}

.btn_27_purple::after {
  width: -webkit-calc(100% + 10px);
  width: calc(100% + 10px);
  height: -webkit-calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  background-image: -webkit-linear-gradient(right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  background-image: linear-gradient(to right, rgb(79,27,127) 0%, rgb(219,36,88) 51%, rgb(255,249,78) 100%);
  z-index: -2;
  overflow: hidden;
}

.btn_27_purple:hover {
  color: #fefefe;
  transform: translateY(-3px);
}

.btn_27_purple:hover::before {
  background: none;
  border: solid 1px rgba(255, 255, 255, .5);
  box-sizing: border-box;
}

.btn_27_purple:active {
  color: #fff94e;
  transform: translateY(0px);
}

.btn_27_purple:active::before {
  border: solid 1px #fff94e;
}


/* green */
.btn_27_green {
  position: relative;
  display: inline-block;
  padding: .7em .6em;
  background: none;
  color: #4f1b80;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_27_green::before, .btn_27_green::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  transition: .2s ease-out;
}

.btn_27_green::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: -1;
}

.btn_27_green::after {
  width: -webkit-calc(100% + 10px);
  width: calc(100% + 10px);
  height: -webkit-calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  background-image: -webkit-linear-gradient( right, rgb(93,12,173) 0%, rgb(75,101,127) 28%, rgb(57,189,81) 50%, rgb(255,226,82) 100%);
  background-image: linear-gradient( to right, rgb(93,12,173) 0%, rgb(75,101,127) 28%, rgb(57,189,81) 50%, rgb(255,226,82) 100%);
  z-index: -2;
  overflow: hidden;
}

.btn_27_green:hover {
  color: #fefefe;
  transform: translateY(-3px);
}

.btn_27_green:hover::before {
  background: none;
  border: solid 1px rgba(255, 255, 255, .5);
  box-sizing: border-box;
}

.btn_27_green:active {
  color: #fff94e;
  transform: translateY(0px);
}

.btn_27_green:active::before {
  border: solid 1px #fff94e;
}


/* blue */
.btn_27_blue {
  position: relative;
  display: inline-block;
  padding: .7em .6em;
  background: none;
  color: #4f1b80;
  text-shadow: none;
  border-radius: 1.5em;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_27_blue::before, .btn_27_blue::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  transition: .2s ease-out;
}

.btn_27_blue::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: -1;
}

.btn_27_blue::after {
  width: -webkit-calc(100% + 10px);
  width: calc(100% + 10px);
  height: -webkit-calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  background-image: -webkit-linear-gradient( right, rgb(93,12,173) 0%, rgb(67,54,189) 28%, rgb(41,95,204) 50%, rgb(82,255,111) 100%);
  background-image: linear-gradient( to right, rgb(93,12,173) 0%, rgb(67,54,189) 28%, rgb(41,95,204) 50%, rgb(82,255,111) 100%);
  z-index: -2;
  overflow: hidden;
}

.btn_27_blue:hover {
  color: #fefefe;
  transform: translateY(-3px);
}

.btn_27_blue:hover::before {
  background: none;
  border: solid 1px rgba(255, 255, 255, .5);
  box-sizing: border-box;
}

.btn_27_blue:active {
  color: #fff94e;
  transform: translateY(0px);
}

.btn_27_blue:active::before {
  border: solid 1px #fff94e;
}


/* -----------------------------------------------------------------------------
 btn_28  side_grd 横グラデ
----------------------------------------------------------------------------- */
/* red */
.btn_28_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #dd7fa0;
  background-image: -webkit-linear-gradient( right, rgb(229,80,80) 0%, rgb(255,113,97) 50%, rgb(252,177,151) 100%);
  background-image: linear-gradient( to right, rgb(229,80,80) 0%, rgb(255,113,97) 50%, rgb(252,177,151) 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #993636, 0 1px 3px #993636;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_red::before, .btn_28_red::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_red::before {
  background-image: -webkit-linear-gradient( right, rgb(229,80,80) 0%, rgb(252,177,151) 50%, rgb(229,80,80) 100%);
  background-image: linear-gradient( to right, rgb(229,80,80) 0%, rgb(252,177,151) 50%, rgb(229,80,80) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}

.btn_28_red::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #fcd2c5;
}

.btn_28_red:hover::before {
  opacity: 1;
}

.btn_28_red:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_red:active::before {
  background-image: -webkit-linear-gradient( right, #e03939 0%, #fc9474 50%, #e03939 100%);
  background-image: linear-gradient( to right, #e03939 0%, #fc9474 50%, #e03939 100%);
}

.btn_28_red:active::after {
  border-color: #fff94e;
}


/* yellow */
.btn_28_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #f48a3e 0%, #ffb833 50%, #fcec65 100%);
  background-image: linear-gradient( 90deg, #f48a3e 0%, #ffb833 50%, #fcec65 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #c26f30, 0 1px 3px #c26f30;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_yellow::before, .btn_28_yellow::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_yellow::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient( 90deg, #f48a3e 0%, #fcec65 50%, #f48a3e 100%);
  background-image: linear-gradient( 90deg, #f48a3e 0%, #fcec65 50%, #f48a3e 100%);
  z-index: -1;
  opacity: 0;
}

.btn_28_yellow::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #fcf095;
}

.btn_28_yellow:hover::before {
  opacity: 1;
}

.btn_28_yellow:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_yellow:active::before {
  background-image: -webkit-linear-gradient( right, #f1692b 0%, #fbe244 50%, #f1692b 100%);
  background-image: linear-gradient( to right, #f1692b 0%, #fbe244 50%, #f1692b 100%);
}

.btn_28_yellow:active::after {
  border-color: #fff94e;
}


/* green */
.btn_28_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #00736f 0%, #26bf87 50%, #79f2a1 100%);
  background-image: linear-gradient( 90deg, #00736f 0%, #26bf87 50%, #79f2a1 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #01423f, 0 1px 3px #01423f;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_green::before, .btn_28_green::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_green::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient( 90deg, #00736f 0%, #79f2a1 50%, #00736f 100%);
  background-image: linear-gradient( 90deg, #00736f 0%, #79f2a1 50%, #00736f 100%);
  z-index: -1;
  opacity: 0;
}

.btn_28_green::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #8aebac;
}

.btn_28_green:hover::before {
  opacity: 1;
}

.btn_28_green:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_green:active::before {
  background-image: -webkit-linear-gradient( right, #01524e 0%, #50ea83 50%, #01524e 100%);
  background-image: linear-gradient( to right, #01524e 0%, #50ea83 50%, #01524e 100%);
}

.btn_28_green:active::after {
  border-color: #fff94e;
}


/* blue */
.btn_28_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #1f5099 0%, #3098d9 50%, #5ccfe6 100%);
  background-image: linear-gradient( 90deg, #1f5099 0%, #3098d9 50%, #5ccfe6 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #01423f, 0 1px 3px #01423f;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_blue::before, .btn_28_blue::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_blue::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient( 90deg, #1f5099 0%, #5ccfe6 50%, #1f5099 100%);
  background-image: linear-gradient( 90deg, #1f5099 0%, #5ccfe6 50%, #1f5099 100%);
  z-index: -1;
  opacity: 0;
}

.btn_28_blue::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #6dd7ee;
}

.btn_28_blue:hover::before {
  opacity: 1;
}

.btn_28_blue:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_blue:active::before {
  background-image: -webkit-linear-gradient( 90deg, #163a7e 0%, #3fbddd 50%, #163a7e 100%);
  background-image: linear-gradient( 90deg, #163a7e 0%, #3fbddd 50%, #163a7e 100%);
}

.btn_28_blue:active::after {
  border-color: #fff94e;
}


/* purple */
.btn_28_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #51378e 0%, #8d5bd9 50%, #c291f2 100%);
  background-image: linear-gradient( 90deg, #51378e 0%, #8d5bd9 50%, #c291f2 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #36255c, 0 1px 3px #36255c;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_purple::before, .btn_28_purple::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_purple::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient( 90deg, #51378e 0%, #c291f2 50%, #51378e 100%);
  background-image: linear-gradient( 90deg, #51378e 0%, #c291f2 50%, #51378e 100%);
  z-index: -1;
  opacity: 0;
}

.btn_28_purple::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #e2c7fc;
}

.btn_28_purple:hover::before {
  opacity: 1;
}

.btn_28_purple:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_purple:active::before {
  background-image: -webkit-linear-gradient( 90deg, #3a276e 0%, #ac6ded 50%, #3a276e 100%);
  background-image: linear-gradient( 90deg, #3a276e 0%, #ac6ded 50%, #3a276e 100%);
}

.btn_28_purple:active::after {
  border-color: #fff94e;
}


/* black */
.btn_28_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: none;
  background-image: -webkit-linear-gradient( 90deg, #262626 0%, #666666 100%);
  background-image: linear-gradient( 90deg, #262626 0%, #666666 100%);
  color: #fefefe;
  text-shadow: 0 1px 3px #222, 0 1px 3px #222;
  border-radius: 1.5em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_black::before, .btn_28_black::after {
  position: absolute;
  content: "";
  border-radius: 1.5em;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_28_black::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient( 90deg, #262626 0%, #666666 50%, #262626 100%);
  background-image: linear-gradient( 90deg, #262626 0%, #666666 50%, #262626 100%);
  z-index: -1;
  opacity: 0;
}

.btn_28_black::after {
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: solid 1px #999;
}

.btn_28_black:hover::before {
  opacity: 1;
}

.btn_28_black:active {
  color: #fff94e;
  transform: translateY(2px) scale(.96);
}

.btn_28_black:active::before {
  background-image: -webkit-linear-gradient( 90deg, #161616 0%, #555 50%, #161616 100%);
  background-image: linear-gradient( 90deg, #161616 0%, #555 50%, #161616 100%);
}

.btn_28_black:active::after {
  border-color: #fff94e;
}


/* -----------------------------------------------------------------------------
 btn_29  slip ふせん
----------------------------------------------------------------------------- */
/* red */
.btn_29_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #BB3E50;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_red::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #C9536B;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_red:hover {
  color: #fefefe;
}

.btn_29_red:hover::after {
  width: 100%;
}

.btn_29_red:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_red:active::after {
  background-color: #BB3E50;
}


/* yellow */
.btn_29_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #F4982B;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_yellow::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F6AD3A;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_yellow:hover {
  color: #fefefe;
}

.btn_29_yellow:hover::after {
  width: 100%;
}

.btn_29_yellow:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_yellow:active::after {
  background-color: #F4982B;
}


/* lime */
.btn_29_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #93C33D;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_lime::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #A9CF52;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_lime:hover {
  color: #fefefe;
}

.btn_29_lime:hover::after {
  width: 100%;
}

.btn_29_lime:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_lime:active::after {
  background-color: #93C33D;
}


/* green */
.btn_29_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #009893;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_green::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #00ADA9;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_green:hover {
  color: #fefefe;
}

.btn_29_green:hover::after {
  width: 100%;
}

.btn_29_green:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_green:active::after {
  background-color: #009893;
}


/* blue */
.btn_29_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #2055A6;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_blue::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #2B71B8;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_blue:hover {
  color: #fefefe;
}

.btn_29_blue:hover::after {
  width: 100%;
}

.btn_29_blue:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_blue:active::after {
  background-color: #2055A6;
}


/* purple */
.btn_29_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #51378D;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_purple::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #6C4AA4;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_purple:hover {
  color: #fefefe;
}

.btn_29_purple:hover::after {
  width: 100%;
}

.btn_29_purple:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_purple:active::after {
  background-color: #51378D;
}


/* black */
.btn_29_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #333;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_29_black::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #333;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_29_black:hover {
  color: #fefefe;
}

.btn_29_black:hover::after {
  width: 100%;
}

.btn_29_black:active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: translateY(3px);
}

.btn_29_black:active::after {
  background-color: #222;
}


/* -----------------------------------------------------------------------------
 btn_30  line 上下ライン
----------------------------------------------------------------------------- */
/* red */
.btn_30_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #BB3E50;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_red::before, .btn_30_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #BB3E50;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_red::before {
  top: 4px;
  left: 0;
}

.btn_30_red::after {
  bottom: 4px;
  left: 0;
}

.btn_30_red:hover {
  color: #fff;
}

.btn_30_red:hover::before, .btn_30_red:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_red:active {
  transform: scale(.96);
}


/* yellow */
.btn_30_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #F4982B;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_yellow::before, .btn_30_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #F4982B;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_yellow::before {
  top: 4px;
  left: 0;
}

.btn_30_yellow::after {
  bottom: 4px;
  left: 0;
}

.btn_30_yellow:hover {
  color: #fff;
}

.btn_30_yellow:hover::before, .btn_30_yellow:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_yellow:active {
  transform: scale(.96);
}



/* lime */
.btn_30_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #93C33D;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_lime::before, .btn_30_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #93C33D;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_lime::before {
  top: 4px;
  left: 0;
}

.btn_30_lime::after {
  bottom: 4px;
  left: 0;
}

.btn_30_lime:hover {
  color: #fff;
}

.btn_30_lime:hover::before, .btn_30_lime:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_lime:active {
  transform: scale(.96);
}


/* green */
.btn_30_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #009893;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_green::before, .btn_30_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #009893;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_green::before {
  top: 4px;
  left: 0;
}

.btn_30_green::after {
  bottom: 4px;
  left: 0;
}

.btn_30_green:hover {
  color: #fff;
}

.btn_30_green:hover::before, .btn_30_green:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_green:active {
  transform: scale(.96);
}


/* blue */
.btn_30_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #2055A6;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_blue::before, .btn_30_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2055A6;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_blue::before {
  top: 4px;
  left: 0;
}

.btn_30_blue::after {
  bottom: 4px;
  left: 0;
}

.btn_30_blue:hover {
  color: #fff;
}

.btn_30_blue:hover::before, .btn_30_blue:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_blue:active {
  transform: scale(.96);
}


/* purple */
.btn_30_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #51378D;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_purple::before, .btn_30_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #51378D;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_purple::before {
  top: 4px;
  left: 0;
}

.btn_30_purple::after {
  bottom: 4px;
  left: 0;
}

.btn_30_purple:hover {
  color: #fff;
}

.btn_30_purple:hover::before, .btn_30_purple:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_purple:active {
  transform: scale(.96);
}


/* black */
.btn_30_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #444;
  text-shadow: none;
  border-radius: 0px;
  border: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_30_black::before, .btn_30_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #444;
  transition: .2s ease-out;
  z-index: -1;
}

.btn_30_black::before {
  top: 4px;
  left: 0;
}

.btn_30_black::after {
  bottom: 4px;
  left: 0;
}

.btn_30_black:hover {
  color: #fff;
}

.btn_30_black:hover::before, .btn_30_black:hover::after {
  width: -webkit-calc(100% - 8px);
  width: calc(100% - 8px);
  height: 50%;
  left: 4px;
}

.btn_30_black:active {
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_31 check 左右チェック
----------------------------------------------------------------------------- */
/* red */
.btn_31_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #BB3E50;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #C9536B;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_red::before, .btn_31_red::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #C9536B;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(241, 204, 214, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(241, 204, 214, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(241, 204, 214, .3) 50%, transparent 50%), linear-gradient(rgba(241, 204, 214, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_red::before { left: 0; }
.btn_31_red::after { right: 0; }

.btn_31_red:hover {
  background-color: #BB3E50;
  color: #fff;
}

.btn_31_red:active {
  transform: scale(.96);
}


/* yellow */
.btn_31_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #F4982B;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #F6AD3A;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_yellow::before, .btn_31_yellow::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #F6AD3A;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(252, 234, 194, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(252, 234, 194, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(252, 234, 194, .3) 50%, transparent 50%), linear-gradient(rgba(252, 234, 194, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_yellow::before { left: 0; }
.btn_31_yellow::after { right: 0; }

.btn_31_yellow:hover {
  background-color: #F4982B;
  color: #fff;
}

.btn_31_yellow:active {
  transform: scale(.96);
}


/* lime */
.btn_31_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #93C33D;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #A9CF52;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_lime::before, .btn_31_lime::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #A9CF52;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(235, 244, 205, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(235, 244, 205, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(235, 244, 205, .3) 50%, transparent 50%), linear-gradient(rgba(235, 244, 205, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_lime::before { left: 0; }
.btn_31_lime::after { right: 0; }

.btn_31_lime:hover {
  background-color: #93C33D;
  color: #fff;
}

.btn_31_lime:active {
  transform: scale(.96);
}


/* green */
.btn_31_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #009893;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #00ADA9;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_green::before, .btn_31_green::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #00ADA9;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(170, 235, 234, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(170, 235, 234, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(170, 235, 234, .3) 50%, transparent 50%), linear-gradient(rgba(170, 235, 234, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_green::before { left: 0; }
.btn_31_green::after { right: 0; }

.btn_31_green:hover {
  background-color: #009893;
  color: #fff;
}

.btn_31_green:active {
  transform: scale(.96);
}


/* blue */
.btn_31_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #2055A6;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #2B71B8;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_blue::before, .btn_31_blue::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #2B71B8;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(189, 217, 237, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(189, 217, 237, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(189, 217, 237, .3) 50%, transparent 50%), linear-gradient(rgba(189, 217, 237, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_blue::before {
  left: 0;
}

.btn_31_blue::after {
  right: 0;
}

.btn_31_blue:hover {
  background-color: #2055A6;
  color: #fff;
}

.btn_31_blue:active {
  transform: scale(.96);
}


/* purple */
.btn_31_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #51378D;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #6C4AA4;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_purple::before, .btn_31_purple::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #6C4AA4;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(215, 201, 232, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(215, 201, 232, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(215, 201, 232, .3) 50%, transparent 50%), linear-gradient(rgba(215, 201, 232, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_purple::before { left: 0; }
.btn_31_purple::after { right: 0; }

.btn_31_purple:hover {
  background-color: #51378D;
  color: #fff;
}

.btn_31_purple:active {
  transform: scale(.96);
}


/* black */
.btn_31_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #fefefe;
  color: #333;
  text-shadow: none;
  border-radius: 0px;
  border: solid 2px #444;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_31_black::before, .btn_31_black::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 100%;
  top: 0;
  background-color: #444;
  background-size: 10px 10px;
  background-image: -webkit-linear-gradient(right, rgba(200, 200, 200, .3) 50%, transparent 50%), -webkit-linear-gradient(rgba(200, 200, 200, .3) 50%, transparent 50%);
  background-image: linear-gradient(right, rgba(200, 200, 200, .3) 50%, transparent 50%), linear-gradient(rgba(200, 200, 200, .3) 50%, transparent 50%);
  transition: .2s ease-out;
}

.btn_31_black::before {
  left: 0;
}

.btn_31_black::after {
  right: 0;
}

.btn_31_black:hover {
  background-color: #333;
  color: #fff;
}

.btn_31_black:active {
  transform: scale(.96);
}


/* -----------------------------------------------------------------------------
 btn_32 dot　ドット柄
----------------------------------------------------------------------------- */
/* red */
.btn_32_red {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #C9536B;
  color: #fff;
  text-shadow: 0 2px 3px #8C3143, 0 2px 3px #8C3143;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_red::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.2) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.2) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.2) 20%, transparent 0), radial-gradient(rgba(255,255,255,.2) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_red:hover::before {
  opacity: 1;
}

.btn_32_red:active{
  transform: scale(.96) translateY(3px);
}


/* yellow */
.btn_32_yellow {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #F6AD3A;
  color: #fff;
  text-shadow: 0 2px 3px #946315, 0 2px 3px #946315;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_yellow::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_yellow:hover::before {
  opacity: 1;
}

.btn_32_yellow:active{
  transform: scale(.96) translateY(3px);
}


/* lime */
.btn_32_lime {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #A9CF52;
  color: #fff;
  text-shadow: 0 2px 3px #59731D, 0 2px 3px #59731D;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_lime::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_lime:hover::before {
  opacity: 1;
}

.btn_32_lime:active{
  transform: scale(.96) translateY(3px);
}


/* green */
.btn_32_green {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #00ADA9;
  color: #fff;
  text-shadow: 0 2px 3px #006664, 0 2px 3px #006664;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_green::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.3) 20%, transparent 0), radial-gradient(rgba(255,255,255,.3) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_green:hover::before {
  opacity: 1;
}

.btn_32_green:active{
  transform: scale(.96) translateY(3px);
}


/* blue */
.btn_32_blue {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #2B71B8;
  color: #fff;
  text-shadow: 0 2px 3px #10457A, 0 2px 3px #10457A;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_blue::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.2) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.2) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.2) 20%, transparent 0), radial-gradient(rgba(255,255,255,.2) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_blue:hover::before {
  opacity: 1;
}

.btn_32_blue:active{
  transform: scale(.96) translateY(3px);
}


/* purple */
.btn_32_purple {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #6C4AA4;
  color: #fff;
  text-shadow: 0 2px 3px #4C2D80, 0 2px 3px #4C2D80;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_purple::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.15) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.15) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.15) 20%, transparent 0), radial-gradient(rgba(255,255,255,.15) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_purple:hover::before {
  opacity: 1;
}

.btn_32_purple:active{
  transform: scale(.96) translateY(3px);
}


/* black */
.btn_32_black {
  position: relative;
  display: inline-block;
  padding: .75em .6em;
  background-color: #444;
  color: #fff;
  text-shadow: 0 2px 3px #222, 0 2px 3px #222;
  border-radius: 1.5em;
  border: solid 3px #fefefe;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_32_black::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  background-image: -webkit-radial-gradient(rgba(255,255,255,.1) 20%, transparent 0), -webkit-radial-gradient(rgba(255,255,255,.1) 20%, transparent 0);
  background-image: radial-gradient(rgba(255,255,255,.1) 20%, transparent 0), radial-gradient(rgba(255,255,255,.1) 20%, transparent 0);
  border-radius: 1.5em;
  border: none;
  transition: .2s ease-out;
  z-index: -1;
  opacity: 0;
}

.btn_32_black:hover::before {
  opacity: 1;
}

.btn_32_black:active{
  transform: scale(.96) translateY(3px);
}


/* -----------------------------------------------------------------------------
 btn_33 bottom_stripe　下線ストライプ
----------------------------------------------------------------------------- */
/* red */
.btn_33_red {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #BB3E50;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_red::before, .btn_33_red::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_red::before {
  background: -webkit-repeating-linear-gradient(-45deg, #C9536B, #C9536B 5px, #D76886 0, #D76886 10px);
  background: repeating-linear-gradient(-45deg, #C9536B, #C9536B 5px, #D76886 0, #D76886 10px);
  opacity: 0;
}

.btn_33_red::after {
  background: -webkit-repeating-linear-gradient(-45deg, #D76886, #D76886 6px, #F1CCD6 0, #F1CCD6 12px);
  background: repeating-linear-gradient(-45deg, #D76886, #D76886 6px, #F1CCD6 0, #F1CCD6 12px);
}

.btn_33_red:hover {
  background-color: #D76886;
  color: #fefefe;
}

.btn_33_red:active {
  background-color: #BB3E50;
  transform: scale(.96);
}

.btn_33_red:active::before {
  opacity: 1;
}

.btn_33_red:active::after {
  opacity: 0;
}


/* yellow */
.btn_33_yellow {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #F4982B;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_yellow::before, .btn_33_yellow::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_yellow::before {
  background: -webkit-repeating-linear-gradient(-45deg, #F4982B, #F4982B 5px, #F6AD3A 0, #F6AD3A 10px);
  background: repeating-linear-gradient(-45deg, #F4982B, #F4982B 5px, #F6AD3A 0, #F6AD3A 10px);
  opacity: 0;
}

.btn_33_yellow::after {
  background: -webkit-repeating-linear-gradient(-45deg, #F6AD3A, #F6AD3A 6px, #FCEAC2 0, #FCEAC2 12px);
  background: repeating-linear-gradient(-45deg, #F6AD3A, #F6AD3A 6px, #FCEAC2 0, #FCEAC2 12px);
}

.btn_33_yellow:hover {
  background-color: #F6AD3A;
  color: #fefefe;
}

.btn_33_yellow:active {
  background-color: #F4982B;
  transform: scale(.96);
}

.btn_33_yellow:active::before {
  opacity: 1;
}

.btn_33_yellow:active::after {
  opacity: 0;
}


/* lime */
.btn_33_lime {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #93C33D;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_lime::before, .btn_33_lime::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_lime::before {
  background: -webkit-repeating-linear-gradient(-45deg, #93C33D, #93C33D 5px, #A9CF52 0, #A9CF52 10px);
  background: repeating-linear-gradient(-45deg, #93C33D, #93C33D 5px, #A9CF52 0, #A9CF52 10px);
  opacity: 0;
}

.btn_33_lime::after {
  background: -webkit-repeating-linear-gradient(-45deg, #A9CF52, #A9CF52 6px, #EAF3CC 0, #EAF3CC 12px);
  background: repeating-linear-gradient(-45deg, #A9CF52, #A9CF52 6px, #EAF3CC 0, #EAF3CC 12px);
}

.btn_33_lime:hover {
  background-color: #A9CF52;
  color: #fefefe;
}

.btn_33_lime:active {
  background-color: #93C33D;
  transform: scale(.96);
}

.btn_33_lime:active::before {
  opacity: 1;
}

.btn_33_lime:active::after {
  opacity: 0;
}


/* green */
.btn_33_green {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #009893;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_green::before, .btn_33_green::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_green::before {
  background: -webkit-repeating-linear-gradient(-45deg, #009893, #009893 5px, #00ADA9 0, #00ADA9 10px);
  background: repeating-linear-gradient(-45deg, #009893, #009893 5px, #00ADA9 0, #00ADA9 10px);
  opacity: 0;
}

.btn_33_green::after {
  background: -webkit-repeating-linear-gradient(-45deg, #00ADA9, #00ADA9 6px, #AAEAE9 0, #AAEAE9 12px);
  background: repeating-linear-gradient(-45deg, #00ADA9, #00ADA9 6px, #AAEAE9 0, #AAEAE9 12px);
}

.btn_33_green:hover {
  background-color: #00ADA9;
  color: #fefefe;
}

.btn_33_green:active {
  background-color: #009893;
  transform: scale(.96);
}

.btn_33_green:active::before {
  opacity: 1;
}

.btn_33_green:active::after {
  opacity: 0;
}


/* blue */
.btn_33_blue {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #2055A6;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_blue::before, .btn_33_blue::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_blue::before {
  background: -webkit-repeating-linear-gradient(-45deg, #2055A6, #2055A6 5px, #2B71B8 0, #2B71B8 10px);
  background: repeating-linear-gradient(-45deg, #2055A6, #2055A6 5px, #2B71B8 0, #2B71B8 10px);
  opacity: 0;
}

.btn_33_blue::after {
  background: -webkit-repeating-linear-gradient(-45deg, #2B71B8, #2B71B8 6px, #BCD9ED 0, #BCD9ED 12px);
  background: repeating-linear-gradient(-45deg, #2B71B8, #2B71B8 6px, #BCD9ED 0, #BCD9ED 12px);
}

.btn_33_blue:hover {
  background-color: #2B71B8;
  color: #fefefe;
}

.btn_33_blue:active {
  background-color: #2055A6;
  transform: scale(.96);
}

.btn_33_blue:active::before {
  opacity: 1;
}

.btn_33_blue:active::after {
  opacity: 0;
}


/* purple */
.btn_33_purple {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #51378D;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_purple::before, .btn_33_purple::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_purple::before {
  background: -webkit-repeating-linear-gradient(-45deg, #51378D, #51378D 5px, #6C4AA4 0, #6C4AA4 10px);
  background: repeating-linear-gradient(-45deg, #51378D, #51378D 5px, #6C4AA4 0, #6C4AA4 10px);
  opacity: 0;
}

.btn_33_purple::after {
  background: -webkit-repeating-linear-gradient(-45deg, #6C4AA4, #6C4AA4 6px, #D7C9E8 0, #D7C9E8 12px);
  background: repeating-linear-gradient(-45deg, #6C4AA4, #6C4AA4 6px, #D7C9E8 0, #D7C9E8 12px);
}

.btn_33_purple:hover {
  background-color: #6C4AA4;
  color: #fefefe;
}

.btn_33_purple:active {
  background-color: #51378D;
  transform: scale(.96);
}

.btn_33_purple:active::before {
  opacity: 1;
}

.btn_33_purple:active::after {
  opacity: 0;
}

/* black */
.btn_33_black {
  position: relative;
  display: inline-block;
  padding: .6em;
  background-color: #fefefe;
  color: #444;
  text-shadow: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: .2s ease-out;
}

.btn_33_black::before, .btn_33_black::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 6px;
  left: 0;
  bottom: -6px;
  transition: .2s ease-out;
  z-index: 1;
}

.btn_33_black::before {
  background: -webkit-repeating-linear-gradient(-45deg, #333, #333 5px, #444 0, #444 10px);
  background: repeating-linear-gradient(-45deg, #333, #333 5px, #444 0, #444 10px);
  opacity: 0;
}

.btn_33_black::after {
  background: -webkit-repeating-linear-gradient(-45deg, #444, #444 6px, #999 0, #999 12px);
  background: repeating-linear-gradient(-45deg, #444, #444 6px, #999 0, #999 12px);
}

.btn_33_black:hover {
  background-color: #444;
  color: #fefefe;
}

.btn_33_black:active {
  background-color: #333;
  transform: scale(.96);
}

.btn_33_black:active::before {
  opacity: 1;
}

.btn_33_black:active::after {
  opacity: 0;
}

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.zoomIn2 {
  -webkit-animation-name: zoomIn2;
  animation-name: zoomIn2;
}

@keyframes zoomIn2 {
  from {
    opacity: 1;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
  }

  40% {
    -webkit-transform: scale(3.3) ;
    transform: scale(3.3) ;
    opacity: 1;
  }


  to {
    -webkit-transform: scale3d(3.3, 3.3, 3.3);
    transform: scale3d(3.3, 3.3, 3.3);
    opacity: 1;
  }
  
}


@-webkit-keyframes puffIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2,2);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1,1);
    filter: blur(0px);
  }
}

@keyframes puffIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2,2);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1,1);
    filter: blur(0px);
  }
}

.puffIn {
  animation-name: puffIn;
  -webkit-animation-name: puffIn;
}

@-webkit-keyframes puffOut {
  from {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1,1);
    filter: blur(0px);
  }

  to {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2,2);
    filter: blur(2px);
  }
}


@keyframes puffOut {
  from {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1,1);
    filter: blur(0px);
  }

  to {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2,2);
    filter: blur(2px);
  }
}


.puffOut {
  animation-name: puffOut;
  -webkit-animation-name: puffOut;
}

@-webkit-keyframes vanishIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}


@keyframes vanishIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}


.vanishIn {
  animation-name: vanishIn;
  -webkit-animation-name: vanishIn;
}

@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}


@keyframes vanishOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }

  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(20px);
  }
}

.vanishOut {
  animation-name: vanishOut;
  -webkit-animation-name: vanishOut;
}


@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}


/* テキスト表示の演出 頭にtをつける */

@keyframes tfadeIn { /*animetion-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}

@keyframes tfadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes tfadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes tfadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes tfadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}



@keyframes trotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes tzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 1;
  }
}

@keyframes tslideIn {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	opacity:1;
	
  }
}


@keyframes tbounceIn {
  from, 20%, 40%, 60%, 80%, to {
	opacity:0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@keyframes tvanishIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

@keyframes tpuffIn {
  from {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2,2);
    filter: blur(2px);
  }

  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1,1);
    filter: blur(0px);
  }
}

@keyframes trollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}