/* 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;
}