@charset "utf-8";

body{background: #CC3366;}/*くすんだピンク*/
a{text-decoration: none;outline: none;font-family: 'Oswald', sans-serif;}
main{text-align: center;position: absolute;
    top:50%;left:50%;width: 350px;
    transform: translate(-50%,-50%);}

/*====　　イメージ　　===============================================*/
.img_happy_a,.img_happy_b{width: 400px;}
.img_mikan{width: 46px;}
.happy_a_fluts{position: absolute;top:120px;left: 35px;width: 335px;}
.happy_b_mikan{position: absolute;top:280px;left: 265px;width: 40px;}

/*==============　　●   はつはる「表」　みけねこ「裏」===========*/
/* ------ はつはる「表」● 大きさ ------------*/
.maru_omote,.maru_ura{position: absolute;top:460px;left: 40px;
      width: 38px;height: 38px;border-radius: 50%;
      z-index: 99;cursor: pointer;}
/* ------ はつはる「表」● 色 ------------*/
.maru_omote{background: #c06;}
/*------------- みけねこ「裏」● 色 ----------------*/
.maru_ura{background: #f30;}
/* ---- 「表」「裏」　の　文字指定　（共通指定）-----*/
.maru_omote h3,.maru_ura h3{font-family: 'Oswald', sans-serif;color:white;
      font-size: 20px;margin-top: 2px;}

/* ---- ●　の　波紋の形状-------------------------------------------*/
/*「表」*/
.maru_omote::after,
.maru_omote::before
   {content: '';
    position: absolute;left: -25%;top: -25%;
    /*波形の形状*/
    border: 1px solid #c06;/*"波形"の線の色*/
    width: 150%;height: 150%;
    border-radius: 50%;opacity: 1;cursor: default;
    animation:1s circleanime linear infinite;}
/*「裏」*/
.maru_ura::after,
.maru_ura::before
    {content: '';
    position: absolute;left: -25%;top: -25%;
    /*波形の形状*/
    border: 1px solid #f30;/*"波形"の線の色*/
    width: 150%;height: 150%;
    border-radius: 50%;opacity: 1;cursor: default;
    animation:1s circleanime linear infinite;}
/* ---- 波紋のスピード-----*/
.maru_omote::before {animation-delay:.5s;}
.maru_ura::before {animation-delay:.5s;}

/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.68);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}

/*====　　下の文字　「裏」「表」　　=============================================*/
.moji_omote h3,.moji_ura h3{
  position: absolute;top:516px;left: 40px;
  width: 38px;height: 38px;border-radius: 50%;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;padding-top: 2px;}
/*moji_omote h3 色*/
.moji_omote h3{background: #f30;color:#fc6;}
/*moji_ura h3 色*/
.moji_ura h3{background: #c06;color:#f9c;}

.moji_omote h3:hover{opacity: 50%;}
.moji_ura h3:hover{opacity: 50%;}

/*====　　点滅させる　　===============================================*/
.happy_a_fluts,.happy_b_mikan,.in_img{
animation-name: fadeInAnime;
animation-duration: 3s;/*点滅の間隔*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;/*ループする　（infiniteを数字にするとその回数点滅）*/
opacity: 0;}

@keyframes fadeInAnime
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
/*====　　ページ移動　　indexに戻る　　===============================================*/
.rink{display: flex;position: absolute;top:516px;left: 75px;}
.in_img{width: 38px;margin-top: -9px;}/* ← 白の矢印*/
.modoru_img{width: 38px;height: 38px;margin-left: 67px;}
.modoru_img:hover{opacity: 50%;}

/*=================== 「裏」 の内容 =======================================*/
#data-nav{position:fixed;z-index: 999;
    	top:-150%;left:0;width:350px;height: 350px;/*ナビの高さ*/
    	background:black;transition: all 0.6s;}
#data-nav.panelactive{top: 0;}
#data-nav.panelactive #data-nav-list{
      position: fixed;z-index: 999;
      width: 350px;height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;}