@charset "utf-8";
/* CSS Document */
*{
	text-decoration: none;
	text-align: center;
}

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 330px;
	height: 145px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/


/*ここから実装CSS*/
div#wrapper {
	width: 1200px;
	height: auto;
	margin: 0 auto;
	display: flex;
}

div#button{
	width: 300px;
	margin: 0 auto;
}

div#link{
	width: 300px;
	margin: 0 auto;
}

div#clic{
	width: 300px;
	margin: 0 auto;
}

/*----------------
　　button　
-----------------*/
/*button背景色が反転する*/
.btn1 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #109A91;
  border:1px solid #109A91;
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 30px;
}
.btn1:hover {
  color: #fff;
  border:1px solid #fdab3c;
  background-color: #fdab3c;
}

/*button背景色が半透明になる*/
.btn2 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #FFFFFF;
  background-color: #109A91;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 30px;
}
.btn2:hover {
  color: #FFFFFF;
  background-color: #FDAB3C;
  opacity: 0.7;
}

/*buttonサイズが少し大きくなる*/
.btn3 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #F6A79A;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 30px;
}

.btn3:hover {
  transform: scale(1.1,1.1);
}

/*buttonサイズが少し小さくなる*/
.btn4 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #D5642A;
  -webkit-transition: all .3s;
  transition: all .3s;
  margin: 30px;
}

.btn4:hover {
  transform: scale(0.9,0.9);
}

/*button押し込み（上→下）*/
.btn5 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  color: #fff;
  background-color: #f7b150;
  box-shadow: 0px 5px 0px #5298b2;
  transition: .3s;
  margin: 30px;
}

.btn5:hover {
  box-shadow: unset;
  transform: translateY(4px);
}

/*button押し込み（左上→右下）*/
.btn6 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  color: #fff;
  background-color: #2ebcb7;
  box-shadow: 5px 5px 0px #9e7460;
  transition: .3s;
  margin: 30px;
}

.btn6:hover {
  box-shadow: unset;
  transform: translate(4px,4px);
}


/*button押し込み（右上→左下）*/
.btn7 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  color: #fff;
  background-color: #f6a79a;
  box-shadow: -5px 5px 0px #8f7664;
  transition: .3s;
  margin: 30px;
}

.btn7:hover {
  box-shadow: unset;
  transform: translate(-4px,4px);
}


/*背景が左から右に流れる*/
.btn8 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #7d1841;
  position: relative;
  transition: color 0.5s ease;
  margin: 30px;
}
.btn8:hover {
  color: #fff;
}
.btn8:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btn8::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #D3C085;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/*button背景が右から左に流れる*/
.btn9 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #809664;
  background-color: #fff;
  position: relative;
  transition: color 0.5s ease;
  margin: 30px;
}
.btn9:hover {
  color: #fff;
}
.btn9:hover::before {
  transform: scaleX(1);
  transform-origin: right;
}
.btn9::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #dfb834;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/*背景が中央から上下に流れる*/
.btn10 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #ED520A;
  position: relative;
  transition: color 0.5s ease;
  margin: 30px;
}
.btn10:hover {
  color: #ED520A;
}
.btn10:hover::before {
  transform: scaleY(1);
}
.btn10::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #f8f47b;
  transform: scaleY(0);
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}


/*button背景が中央から左右に流れる*/
.btn11 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #809664;
  background-color: #fff;
  position: relative;
  transition: color 0.5s ease;
  margin: 30px;
}
.btn11:hover {
  color: #fff;
}
.btn11:hover::before {
  transform: scaleY(1);
}
.btn11::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #809664;
  transform: scaleX(0);
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}


/*----------------
こちらからクリック　
-----------------*/

/* 下線が左から右に流れる */
#btn12 {
  display: inline-block;
  color: #5298b2;
  border-bottom:　2px;
  margin: 30px;
}

a#btn12:hover{
  color: #5298b2;
}

a#btn12 {
  position: relative;
}

a#btn12::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f7b150;
  bottom: -10px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.5s;
}

a#btn12:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}

/* 下線が現れる */
#btn14 {
  display: inline-block;
  color: #5298b2;
  border-bottom:　2px;
  margin: 30px;
}

#btn14:hover{
  color: #5298b2;
}

a#btn14 {
  position: relative;
}

a#btn14::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f7b150;
  bottom: -10px;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

a#btn14:hover::after {
  visibility: visible;
  opacity: 1;
  transition: 0.5s;
}

/* 下線が右から左に流れる */
#btn15 {
  display: inline-block;
  color: #5298b2;
  border-bottom:　2px;
  margin: 30px;
}

#btn15:hover{
  color: #5298b2;
}

a#btn15 {
  position: relative;
}

a#btn15::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f7b150;
  bottom: -10px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.5s;
}

a#btn15:hover::after {
  transform: scale(1, 1);
  transform-origin: right top;
}

/* 下線が中央から左右に伸びる */
#btn16 {
  display: inline-block;
  color: #5298b2;
  border-bottom:　2px;
  margin: 30px;
}

#btn16:hover{
  color: #5298b2;
}

a#btn16 {
  position: relative;
}

a#btn16::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f7b150;
  bottom: -10px;
  transform: scale(0, 1);
  transition: transform 0.5s;
  transform-origin: center top;
}

a#btn16:hover::after {
  transform: scale(1, 1)
}

/* 文字間が広がる */
.sample_btn {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #5298b2;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.sample_btn:hover {
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

/* グラデーションの色が流れる */
.btn13 {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  outline: none;
  color: #FFFFFF;
  background: linear-gradient(to right, #1B85FB, #FB4D8A);
  background-position: 0% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out;
  margin: 30px;
}
.btn13:hover {
  color: #fff;
  background-position: 100% 51%;
}