@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

html,body{  -webkit-text-size-adjust: none;}

body {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center;}
.w100{width:100%;}
.w90{width: 90%; margin: 0 auto;}


.tdu{border-bottom:4px solid #FFF600;}
.fcr{color: #FF0000;}
.fcw{color: #fff;}
.fwb{font-weight: bold;}
.bgb{background-color: #000;}
.bgy{background-color: #FFF600;}
.bgr{background-color: #FF0000;}
.fts150{font-size: 150%;}
.fts180{font-size: 180%;}
.att{color: #999; font-size: 70%;}
.footer{background-color: #F3F3F3; font-size: 80%;}

/*sp*/

.sp{display: inherit;}
.pc{display: none;}
.w100{width: 100%;}

#pagebody{
	width:100%;
}

p{font-size: 110%; padding: 40px 0;}




@media screen and (min-width: 768px) {
/*PC*/

.sp{display: none;}
.pc{display: inherit;}

#pagebody{
	width:600px;
	margin: 0 auto;
}

p{font-size: 110%; padding: 20px 0;}

}

.btnarea{
  background-color: #B6D8DA;
  padding: 20px 0 10px 0;
}

.btn_bounce {
  display: inline-block;
  animation: boing 2.0s infinite ease-in-out;
  transform-origin: center bottom;
  width:90%;
}

/* 位置固定：下中央。装飾なしで画像のみ見せる */
.floating-banner{
  position: fixed;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  z-index: 9999;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

/* 画像サイズはここで調整（必要なら） */
.floating-banner img{
  display: block;
  width: min(92vw, 500px);
  height: auto;
}

/* ====== 控えめボヨン設定（値だけ変えれば強弱が簡単） ====== */
:root{
  --boing-scale: 1.03;   /* ふくらみ量（1.01〜1.03程度） */
  --boing-lift:  2px;     /* 持ち上がり量（1〜3px） */
  --boing-speed: 2.0s;    /* 速度（長く=落ち着く） */
}

/* アニメーションはラッパーに掛ける（buttonのtransformと分離） */
.boing{
  display: block;
  transform-origin: center bottom;
  will-change: transform;
  animation: boing var(--boing-speed) ease-in-out infinite;
  backface-visibility: hidden;
}

/* 控えめボヨン：派手さを抑えた比率 */
@keyframes boing{
  0%, 100% { transform: translateY(0) scale(1); }
  20%      { transform: translateY(calc(var(--boing-lift) * -1)) scale(var(--boing-scale)); }
  45%      { transform: translateY(0) scale(1); }
  65%      { transform: translateY(calc(var(--boing-lift) * -0.6)) scale(calc(1 + (var(--boing-scale) - 1) * 0.6)); }
  85%      { transform: translateY(0) scale(1); }
}

/* 触れた時だけ少しだけ強調（任意） */
.floating-banner:hover .boing{
  animation-duration: 1.8s;
}

/* モーション弱め設定のユーザー配慮（自動で静止） */
@media (prefers-reduced-motion: reduce){
  .boing{ animation: none; }
}

/* スマホの下余白ちょい詰め（任意） */
@media (max-width: 768px){
  .floating-banner{ bottom: 15px; }
}

button{background: none; box-shadow: none; border:none; cursor: pointer;}