@charset "utf-8";
/* CSS Document */


.test-smp-area{
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
	flex-wrap:wrap;
}


.tst-smp-h2{
	margin:0;
	text-align:center;
}
.come{
	font-size:0.8em;
	text-align:center;
	
	margin-top:10px;
	margin-bottom:30px ;
	}



.button_area a{
	margin:30px 20px;
}

/*::::::::::::　１列目　::::::::::::::::*/
/*-- 1 青 角丸ボタン--*/
.original-button-test {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #555555;
  font-size: 18px;
  border-radius: 20px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  border: 2px solid #555555;
  transition: 0.3s;
  box-shadow: 0px 6px 0px -2px rgba(67, 145, 209, 1);
  background-color: #90caf9;
}


/******* メディアクエリ での制御 *******/
@media (hover: hover) {
/* hover指定できるPCを想定したスタイル */
/* :hoverが使える端末を想定 */

.original-button-test:hover {
  box-shadow: 0 0 #fff;
  transform: translateY(1px);
}
}


@media (hover: none) {
/* hoverが使えないタッチ端末を想定した装飾 */
/* :hoverが使えない端末を想定 */

.original-button-test:active {
  box-shadow: 0 0 #fff;
  transform: translateY(1px);
}

}




/*-- 16 オレンジ 回転 角ボタン --*/

@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

/**,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}*/

/* 背景用*/
/*body {
  padding: 30px;
}
*/

.test16{
	margin:20px;
}


.btn16-test,
a.btn16-test/*,
button.btn */{
  font-size: 1rem;/*1.6rem*/
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0rem 0rem;/*1rem 4rem*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-3d-flip-test {
  display: block;

  width: 200px;/*200px*/
  margin: 0 auto;
  padding: 0;

  -webkit-perspective: 600px;

  perspective: 600px;
}

/*
a.btn-3d-flip-test:hover .btn-3d-flip-box-test {
  -webkit-transform: translateY(-50%) rotateX(90deg);
  transform: translateY(-50%) rotateX(90deg);
}

a.btn-3d-flip-test.btn-3d-flip2-test:hover .btn-3d-flip-box2-test {
  -webkit-transform: translateX(-50%) rotateY(-90deg);
  transform: translateX(-50%) rotateY(-90deg);
}
*/


.btn-3d-flip-box-test {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;
  margin: auto;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  text-decoration: none;
  text-transform: uppercase;

  color: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

.btn-3d-flip-box2-test {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;
  margin: auto;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  text-decoration: none;
  text-transform: uppercase;

  color: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

.btn-3d-flip-box-face-test {
  display: block;
  position: relative;

  width: 100%;/*100%*/
  padding: 1.5rem 0;/*1.5rem 0*/

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  color: #fff;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;
}

.btn-3d-flip-box-face--front-test {
  background: #eb6100;
}

.btn-3d-flip-box-face--back-test {
  position: absolute;
  top: 100%;
  left: 0;

  -webkit-transform: translateY(-1px) rotateX(-90deg);

  transform: translateY(-1px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;

  background: #dc5b00;
}

.btn-3d-flip-box-face--front2-test {
  color: #000;
  border: 2px solid #000;
  background: #fff;
}

.btn-3d-flip-box-face--back2-test {
  position: absolute;
  top: 0;
  left: 100%;

  -webkit-transform: translateX(-1px) rotateY(90deg);

  transform: translateX(-1px) rotateY(90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

  color: #fff;
  border: 2px solid #000;
  background: #000;
}

.fa-position-right-test {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}





/******* メディアクエリ での制御 *******/
@media (hover: hover) {

a.btn-3d-flip-test:hover .btn-3d-flip-box-test {
  -webkit-transform: translateY(-50%) rotateX(90deg);
  transform: translateY(-50%) rotateX(90deg);
}

a.btn-3d-flip-test.btn-3d-flip2-test:hover .btn-3d-flip-box2-test {
  -webkit-transform: translateX(-50%) rotateY(-90deg);
  transform: translateX(-50%) rotateY(-90deg);
}

}


@media (hover: none) {

a.btn-3d-flip-test:active .btn-3d-flip-box-test {
  -webkit-transform: translateY(-50%) rotateX(90deg);
  transform: translateY(-50%) rotateX(90deg);
}

a.btn-3d-flip-test.btn-3d-flip2-test:active .btn-3d-flip-box2-test {
  -webkit-transform: translateX(-50%) rotateY(-90deg);
  transform: translateX(-50%) rotateY(-90deg);

}