@charset "utf-8";

/*== 背景共通設定 */
body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("https://assets.codepen.io/6329135/img_06.jpg");
  object-fit: cover;
}

/*ボタンの配置*/
.btn-position {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*== ボタン共通設定 */
.btn {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  text-decoration: none;
  border: 1px solid #333;
  display: inline-block;
  margin: 3vw 0;
  text-align: center;
  background: transparent;
  outline: none;
  transition: all 0.2s ease; /*アニメーションの指定*/
  width: clamp(300px, 50vw, 500px); /*ボタンの横幅を全て統一*/

  box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
  -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;

  border-radius: 25px;
  -webkit-border-radius: 25px;
}

/*hoverをした後のボタンの形状*/
.btn:hover {
  border-color: transparent;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 2; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*テキストの形状*/
  display: block;
  padding: 15px 10px;
  background: rgb(90, 150, 255);
  border-radius: 25px;
  color: #333;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
  font-size: clamp(0.8rem, 2vw, 1rem);
}

/*== 下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushdown:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0;
  /*影の形状*/
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: #333;
}

/*hoverの際にY軸に4pxずらす*/
.pushdown:hover span {
  background-color: #333;
  color: #fff;
  transform: translateY(4px);
}

/*== 右下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushright:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  z-index: -1;
  top: 7px;
  left: 7px;
  /*影の形状*/
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: #333;
}

/*hoverの際にX・Y軸に7pxずらす*/
.pushright:hover span {
  background-color: #333;
  color: #fff;
  transform: translate(7px, 7px);
}

/*== 左下に押し込まれる（立体が平面に） */

/*影の設定*/
.pushleft:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  z-index: -1;
  top: 7px;
  right: 7px;
  /*影の形状*/
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: #333;
}

/*hoverの際にX軸に-4px・Y軸に4pxずらす*/
.pushleft:hover span {
  background-color: #333;
  color: #fff;
  transform: translate(-7px, 7px);
}

/*== 影がついて浮き上がる */

/*ボタンの形状*/
.float1 {
  border: 1px solid #ccc;
  color: #333;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  background: rgba(90, 150, 255, 0.5);
  outline: none;
  /*アニメーションの指定*/
  transition: all 0.3s;
}

/*hoverをしたらボックスに影がつく*/
.float1:hover {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
  border-color: transparent;
}

/*== 影が拡がって浮き上がる */

/*ボタンの形状*/
.float2 {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  background: rgba(90, 150, 255, 0.5);
  outline: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1);
  /*アニメーションの設定*/
  transition: all 0.3s;
}

/*hoverをしたらボックスの影が拡がり色が濃くなる*/
.float2:hover {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.3);
  border-color: transparent;
}

/*== 上に移動し影がついて浮き上がる */

/*ボタンの形状*/
.float3 {
  position: relative;
  top: 0;
  padding: 10px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  color: #333;
  background: rgba(90, 150, 255, 0.5);
  text-decoration: none;
  outline: none;
  /*アニメーションの設定*/
  transition: all 0.3s;
}

/*hoverをしたらボックスに影がつき、上に上がる*/
.float3:hover {
  top: -3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/*========= レイアウトのためのCSS ===============*/

body {
  vertical-align: middle;
  padding: 20px 0;
  text-align: center;
}
h2 {
  margin-top: 5%;
}
p {
  margin: 0 0 10px 0;
}