html{
  background-color: #000000;
}
header{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
header .icon{
  width: 200px;
  height: 200px;
  object-fit: contain;
  top: 50%;
  border-radius: 50%; 
}
h1{
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
  font-size: 1.5em;
}
p{
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: #fff;
  font-size: 1em;
}
a{
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_continer{
  margin: 50px 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.btn_continer{
  margin: 5px 0;
}
/* ボタン本体 */
.btn {
  position: relative;
  display: inline-block;
  background-color: #DD5E89;
  /* background-image: linear-gradient(135deg, #DD5E89, #F7BB97); 背景のグラデーション */
  border-radius: 30px; /* 角丸をつける */
  width: 300px; /* 横幅 */
  height: 120px; /* 縦幅 */
  line-height: 120px; /* 行の高さ(heightと同じ値にする) */
  text-decoration: none; /* aタグのアンダーラインを消す */
  overflow: hidden; 
  cursor: pointer; /* カーソルをポインターにする */
}

/* ボタンのテキスト */
.btn__text {
  position: absolute;
  left: 0;
  display: block;
  height: 100%; /* 縦幅をボタンと同じにする */
  width: 100%; /* 横幅をボタンと同じにする */
  /*color: #fff; /* 文字色 */
  color: #000000; /* 文字色 */
  text-align: center; /* テキストを中央揃え */
  transition: all 0.3s; /*アニメーション実行時間*/
}
/* pixivのみ */
.btn__text1 {
  position: absolute;
  left: 0;
  display: block;
  height: 100%; /* 縦幅をボタンと同じにする */
  width: 100%; /* 横幅をボタンと同じにする */
  /*color: #fff; /* 文字色 */
  color: #000000; /* 文字色 */
  text-align: center; /* テキストを中央揃え */
  transition: all 0.3s; /*アニメーション実行時間*/
}

/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text:nth-child(1) {
  top: 0;
  font-family: "Mea Culpa", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 50px; /* 文字サイズ */
}

/* pixivのみ */
.btn__text1:nth-child(1) {
  top: -10%;
  font-family: "Mea Culpa", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 50px; /* 文字サイズ */
}

/* ボタンのテキスト(隠れているテキスト) */
.btn__text:nth-child(2) {
    top: -100%;
    line-height: 1.5;
}

/* pixivのみ */
.btn__text1:nth-child(2) {
  top: -100%;
    line-height: 1.5;

}

/* ボタンホバーアクション */
.btn:hover .btn__text:nth-child(1) {
  top: 100%;
}

.btn:hover .btn__text:nth-child(2) {
  top: 30%;
}

/* pixivのみ */
.btn:hover .btn__text1:nth-child(1) {
  top: 100%;
}
/* pixivのみ */
.btn:hover .btn__text1:nth-child(2) {
  top: 30%;
}
.text_continer{
  margin-top: 10px;
}
small{
  font-size: 0.7em;
}