@charset "utf-8";

a{text-decoration: none;outline: none;font-family: 'Oswald', sans-serif;}
main{text-align: center;position: absolute;
    top:50%;left:50%;width: 400px;
    transform: translate(-50%,-50%);}

/*bodyの色変化の時間設定*/
body{animation: bgchange 20s ease infinite;}
    /*backgroundの色を変化*/
    @keyframes bgchange{
    		 0%   {background:black;}/*0%lightpink*/
    		 30%  {background:black;}/*30%white*/
    		 50%  {background:darkblue;}/*30%white*/
    		 60% {background:darkred;}/*60%darkgoldenrod*/
    		 90% {background:darkgreen;}/*90%silver*/
       100%   {background:black;}/*100%lightpink*/}

/*====　　イメージ　　===============================================*/
.img_happy_base,.img_happy_hosi{width: 400px;}
.img_happy_hosi{position: absolute;bottom:50px;left: 5px;}
.rink{display: flex;justify-content: center;}
.btn_in{margin: 0 auto;width: 40px;height: 40px;
        border-radius: 50%;background: yellow;}
.btn_in h3{font-size: 20px;padding-top: 3px;color:black;}
.text_jyuliyan{font-size: 15px;color:tan;margin: 8px 5px 0 5px;}

/*====　　点滅　　===============================================*/
@keyframes fadeInAnime
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
.btn_in,.img_happy_hosi{
animation-name: fadeInAnime;
animation-duration: 2s;/*点滅の間隔*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;/*ループする　（infiniteを数字にするとその回数点滅）*/
opacity: 0;}


/*===========================================================*/
  /*レスポンシブ
/*===========================================================*/
@media screen and (max-width:1560px)
{
main{width: 350px;}
/*====　　イメージ　　=====================================*/
.img_happy_base,.img_happy_hosi{width: 350px;}
.img_happy_hosi{position: absolute;bottom:50px;left: 5px;}
/*====　　ボタン   "IN"　　       ===============*/
.btn_in{margin: 0 auto;width: 40px;height: 40px;
        border-radius: 50%;background: yellow;}
.btn_in h3{font-size: 20px;padding-top: 3px;color:black;}
.text_jyuliyan{font-size: 15px;color:tan;margin: 8px 5px 0 5px;}
}
/*===========================================================*/

@media screen and (max-width:400px)
{
main{width: 340px;}
/*====　　イメージ　　=========================================*/

.img_happy_base,.img_happy_hosi{width: 340px;}
.img_happy_hosi{position: absolute;bottom:65px;left: 5px;}
/*====　　ボタン   "IN"　　       ===============*/
.btn_in{margin: 9px auto;width: 40px;height: 40px;
        border-radius: 50%;background: yellow;}
.text_jyuliyan{font-size: 12px;margin: 17px 5px 0 5px;}
}

/*===========================================================*/
@media screen and (max-width:321px)
{
main{width: 300px;}
/*====　　イメージ　　=========================================*/
.img_happy{width: 300px;}
/*====　　ボタン   "IN"　　       ===============*/
.text_jyuliyan{font-size: 12px;margin: 10px 5px 0 5px;}
}