@charset "utf-8";

/*　特定の場所にマウスカーソルをのせたとき、文字がスライドして出てくる　*/

/* ボタン式のテキストスクロール */
.btn__text_ {
  position: relative;
  display: inline-block;

	/* 背景のグラデーション */
  /* background-image: linear-gradient(135deg, #DD5E89, #F7BB97); */

  border-radius: 30px; /* 角丸をつける */
  width: 220px; /* 横幅 */
  height: 160px; /* 縦幅 */
  line-height: 20px; /* 行の高さ(heightと同じ値にする) */
  text-decoration: none; /* aタグのアンダーラインを消す */
  overflow: hidden; /* はみ出し部分を隠す */

	/* カーソルをポインターにする */
  /* cursor: pointer; */

}

/* テキスト共通スタイル */
.btn__text {
	margin-top: 5px;
  position: absolute;
  left: 0;
  display: block;
  height: 100%; /* 縦幅をボタンと同じにする */
  width: 100%; /* 横幅をボタンと同じにする */
  color: #3f3a39; /* 文字色 */
  font-size: 1.5rem; /* 文字サイズ */

	/* 文字の太さ */
  /* font-weight: bold; */

  text-align: center; /* テキストを中央揃え */
  transition: all 0.3s; /* アニメーション実行時間 */
}

.btn__text2 {
	/* margin-top: 5px; */
  position: absolute;
  left: 0;
  display: block;
  height: 100%; /* 縦幅をボタンと同じにする */
  width: 100%; /* 横幅をボタンと同じにする */
  color: #3f3a39; /* 文字色 */
	text-align: left;

	/* 行間サイズ */
	line-height: 20px;

  font-size: 13.7px; /* 文字サイズ */

	/* 文字の太さ */
  /* font-weight: bold; */

  text-align: center; /* テキストを中央揃え */
  transition: all 0.3s; /* アニメーション実行時間 */
}


/* 「あそび」のホバー設定 */
/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text:nth-child(1) {
  top: 1px;
}

@media screen and (max-width:768px) {
  .btn__text:nth-child(1) {

    top: -22px;
  }
}

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

.btn__text_:hover .btn__text:nth-child(1) {
  top: 100%;
}

.btn__text_:hover .btn__text:nth-child(2) {
  top: 0;
}

/* 「まことのほいく」のホバーテキスト */
/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text2:nth-child(1) {
  top: 0;
}

@media screen and (max-width:768px) {
  .btn__text2:nth-child(1) {

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

.btn__text_:hover .btn__text2:nth-child(1) {
  top: 100%;
}

.btn__text_:hover .btn__text2:nth-child(2) {
  top: 0;
}

.font_bold{
	color: #5394d0;
	font-size: 30px;
	font-weight: bold;
}

.font_bold_hovermae{
	color: #5394d0;
	font-size: 50px;
	font-weight: bold;
}



@media screen and (max-width: 480px) {


}