@charset "utf-8";

body{
  /*font-family: 'Oswald', sans-serif;*/
  text-transform: uppercase;
  letter-spacing: 0.1em;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}
a{text-decoration: none;outline: none;}

#wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	color: #fff;
}

/*========= body に　星キラキラ　 ===============*/
html,body{height: 100%;}/*高さを100%にして描画エリアをとる*/
#particles-js{
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#020E34;/*背景色*/}
#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;height: 100%;}

section{position: relative;
       text-align: center;position: absolute;
       top:50%;left:50%;width: 340px;
       transform: translate(-50%,-50%);}
/*image*/
.img_back{width: 430px;margin-top:50px;}
.img_line{position: absolute;
  left:0px;top:50px;width: 430px;opacity: 30%;}
/* ●秒で一周 */
.img_kaiten{position: absolute;
  left:180px;top:49px;width: 70px;opacity: 50%;}
.img_kaiten{animation: rotation-s2 30s linear infinite; /* ●秒で一周 */;}

.music{position: absolute;right:-120px;top:450px;}
.music,h3{font-size: 12px;color:gray;}/*文字「きらきらにひかる」*/
audio{width: 250px;height: 35px;margin-top: 5px;}

.jyuliyancom{margin-top: 5px;margin-left: 100px;}
/*文字「jyuliyancom」*/
.jyuliyancom,h2{font-family: 'Oswald', sans-serif;
                color:tan;font-size: 15px;}

/*ボタン   "IN"*/
.in{margin-top: 10px;}
a{text-decoration: none;outline: none;}
a{font-family: 'Oswald', sans-serif;font-size: 20px;}
.btnripple2  /*波紋の形状*/
 {position: relative;display:inline-block;
	background:darkred;/*"IN"のバック*/
	width:40px;height:40px;border-radius: 50%;
	color:tan;/*"IN"の色*/
  outline: none;
  transition: all .3s;}
/*hover*/
.btnripple2:hover{background:tan;color:tan;}
/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before
   {content: '';
    position: absolute;left: -25%;top: -25%;
    /*波形の形状*/
    border: 1px solid tan;/*"波形"の線の色*/
    width: 150%;height: 150%;
    border-radius: 50%;opacity: 1;
    animation:1s circleanime linear infinite;}
.btnripple2::before {animation-delay:.5s;}
/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.68);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}

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