@charset "utf-8";
/* CSS Document */


/*------------------基本 start------------------*/
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

body {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: #fff !important;
	font-size: 14px;
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, arial;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
h1 {
	margin-top: 0;
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */
body {
	font-size: 13px;
	line-height: 1.4;
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, arial;
}
}
/*------------------基本 end------------------*/

/*------------------メインビジュアル start------------------*/

.mainvis {
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background-color: #fff;
}

.mainvis h1{
	max-width: 960px;
	margin: 0 auto;
}
.mainvis picture {
	width: 100%;
}

@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */
	
.mainvis {
	width: 100%;
	background-color: #000;
}
}
/*------------------メインビジュアル end------------------*/

/*------------------メインコンテンツ start------------------*/
.main {
	width: auto;
	margin: 0 0 -15px 0;
	padding: 0 0 55px 0;
	background: url(../img/bkg-pc.jpg);
	background-repeat: no-repeat;
	background-size: 960px;
	background-position: center 0%;
	background-color: #fff;
}
.innerwrap {
	max-width: 960px;
	height: auto;
	margin: 0 auto;
	padding: 0 40px 0 40px;
}
.navi {
	margin: 0 auto;
	max-width: 960px;
}
.navi ul {
	width: 100%;
	height: auto;
	display: inline-block;
	margin: 50px 0 45px 0;
	padding: 0 40px 0 40px;
}
.navi li {
	list-style: none;
	float: left;
	width: 33.333%;
	padding: 0;
	font-size: 15px;
}
.navi li:last-child {
	letter-spacing: -2px;
}


.navi li a {
	color: #fff;
	background-image: url(../img/btn-navi-pc.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 294px;
	height:79px;
	padding-top: 30px;
}
.navi li a:hover {
	color: #fff;
	background-image: url(../img/btn-navion-pc.png);
	text-shadow: 0 0 8px #5ec4ff;
}
.navi li a img.arrow {
	width: 11px;
	height:auto;
	margin-top: 4px;
	margin-left: 15px;
	position: absolute;
}

.cv{
	width: 100%;
	margin: 0 0 50px 0;
}
.cv ul {
	width: 100%;
	height: auto;
	display: inline-block;
	font-size: 16px;
	margin: 50px 0 0 0;
	padding: 0;
}
.cv li {
	list-style: none;
	float: left;
	width: 50%;
	padding: 0;
}
.cv li a {
	color: #fff;
	background-image: url(../img/btn-cv.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 445px;
	height: 103px;
	padding-top: 30px;
}
.cv li a:hover {
	color: #fff;
	background-image: url(../img/btn-cvon.png);
	text-shadow: 0 0 8px #5ec4ff;
}
.cv li.txtred{
	padding: 30px 50px;
}
.cv li a:hover::after {
	position: absolute;
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -5px;
	margin-left: 70px;
	background: url(../img/arrow_02.png) top no-repeat;
	background-size: 9px 9px;
}

.cv-cap {
	list-style: none;
	float: left;
	width: 100%;
	padding: 0;
	text-shadow: 0 0 8px #5ec4ff;
	font-size: 15px;
		text-align: center ;
}

.cv-cap span {
font-size: 14px;	
}

.slidein-line {
	display: inline-block;
	width: 58%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.slidein-line01 {
		width: 40%;
}

.slidein-line02 {
		width: 63%;
}
.slidein-line03 {
		width: 50%;
}



#intro, #plugin, #package {
	text-align: center;
	margin-top: 35px;
	margin-bottom: 130px;
	clear: both;
}

#package {
	margin-bottom: 0;
}


#intro p, #intro h2, #plugin p, #plugin h2, #package p, #package h2 {
	margin: 0;
}
#intro p {
	margin-top: 20px;
}

#plugin p, #package p {
	margin-top: 35px;
}


#intro p.sub, #plugin p.sub, #package p.sub {
	margin-top: 0;
	padding-bottom: 8px;
}
#intro p a, #plugin p a, #package p a, #story dd p a, .smoj dd a {
	text-decoration: underline;
	color: #92e1ef;
}
#intro p a:hover, #plugin p a:hover, #package p a:hover, #story dd p a:hover {
	opacity: 0.9;
}
#intro img, #plugin img, #package img {
	width: auto;
}



#intro .detail, #plugin .detail {
	margin: 35px 0 0 0;
}

#intro .btn a, #plugin .btn a {
	color: #fff;
	background-image: url(../img/btn-plugin.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 280px;
	height: 85px;
	padding-top: 33px;
	font-size: 14px;
}
#intro .btn a:hover, #plugin .btn a:hover {
	color: #fff;
	background-image: url(../img/btn-pluginon.png);
	text-shadow: 0 0 8px #5ec4ff;
}
#intro .btn a:hover::after, #plugin .btn a:hover::after {
	position: absolute;
	content: "";
	width: 9px;
	height: 9px;
	margin-top: 5px;
	margin-left: 20px;
	background: url(../img/arrow_02.png) top no-repeat;
	background-size: 9px 9px;
}




#plugin .detail ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 410px;
}

#plugin .detail li {
	list-style: none;
	float: left;
	width: 30%;
	margin-right: 5%;

	box-sizing: border-box;
}

#plugin .detail li:nth-child(3) {
margin-right: 0;	
}

#plugin .detail li a {
	color: #497178;
	background-image: url(../img/plugin_01.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
	cursor: pointer;
}
#plugin .detail li a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_01on.png);
}

#plugin .detail li:nth-child(2) a {
	color: #497178;
	background-image: url(../img/plugin_02.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
}
#plugin .detail li:nth-child(2) a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_02on.png);
}


#plugin .detail li:last-child a {
	color: #497178;
	background-image: url(../img/plugin_03.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
}
#plugin .detail li:last-child a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_03on.png);
}



.caution ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: left;
}

.caution ul li {
	list-style: none;
	line-height: 150%;
	float: none;
}


#package .detail {
	margin: 45px auto 0 auto;
	background-image: url(../img/package-pc_01.png);
	background-repeat: no-repeat;
	width: 644px;
	height: 422px;
}

#package .hexagon01{
	width: 200px;
	float: left;
}

#package .hexagon01 img{
	display: block;
	padding-left: 90px;
    padding-top: 50px;
}

#package .hexagon01 a{
	display: block;
	margin: 0 ;
}

#package .hexagon01 a:hover{
	background-image: url(../img/hexagon_big.png);
	background-repeat: no-repeat;
	background-position: 0 15px;
	width: 295px;
	height: 279px;
}

#package .hexagon02{
	width: 220px;
	float: left;
}

#package .hexagon02 img{
	display: block;
	padding-left: 110px;
    padding-top: 180px;
}

#package .hexagon02 a{
	display: block;
	margin: 0 ;
}

#package .hexagon02 a:hover{
	background-image: url(../img/hexagon_big.png);
	background-repeat: no-repeat;
	background-position: 18px 141px;
	width: 313px;
	height: 405px;
}

#package .hexagon03{
	width: 200px;
	float: left;
}

#package .hexagon03 img{
	display: block;
	padding-left: 50px;
    padding-top: 85px;
}

#package .hexagon03 a{
	display: block;
	margin: 0 ;
}

#package .hexagon03 a:hover{
	background-image: url(../img/hexagon_small.png);
	background-repeat: no-repeat;
	background-position: 18px 55px;
	width: 225px;
	height: 237px;
}



#story {
	margin-bottom: 25px;
}
#story h3 {
	font-size: 24px;
	color: #92e1ef;
	text-shadow: 0 0 10px #96efff;
	margin: 0 0 25px 0;
	font-weight: bolder;
}
#story dl {
	margin-bottom: 30px;
}

.smoj dl {
	margin-bottom: 70px;
}

#story dt, .smoj dt {
	font-size: 18px;
	font-weight: bolder;
	color: #92e1ef;
	text-shadow: 0 0 10px #96efff;
	margin: 0 0 25px 0;
}
#story dd, .smoj dd {
	font-size: 14px;
	line-height: 150%;
}
#story dd p {
	margin-top: 25px;
}
#story dd p a {
	margin-left: 1em;
}

.copyright, .caution01{
	font-size: 10px;
	margin-bottom: 20px;
}

.bnr{
	margin-bottom: 35px;
}

.btn-back {
	display: block;
	text-align: right;
	margin: 0;
	padding: 0;
	background: url(../img/btn-backon-pc.png) right no-repeat;
}
.btn-back img {
	width: 100%;
	height: auto;
}
.btn-back a {
	display: inline-block;
}
.btn-back a:hover {
	background-color: transparent;
}
.btn-back a:hover img {
	visibility: hidden;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
/* 768px-959px用（画面幅小さい用）の記述 */

.navi li a {
	color: #fff;
	background-image: url(../img/btn-navi-pc.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: auto;
	height:79px;
	padding-top: 10%;
}

.navi li a img.arrow {
	width: 9px;
	height:auto;
	margin-top: 4px;
	margin-left: 2px;
	position: absolute;
}

.cv li a {
	color: #fff;
	background-image: url(../img/btn-cv.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: auto;
	height:103px;
	padding-top: 7%;
	line-height: 120%;
}
	.cv li.txtred{
		padding: 20px 30px;
	}
}



@media screen and (max-width: 767px) {
.innerwrap {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 15px 0 15px;
}
.main {
	width: 100%;
	height: 100%;
	margin: 0 auto -15px auto !important;
	padding: 0 0 50px 0;
	background: url(../img/bkg-sp.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #000;
}
.navi {
	margin: 0 auto;
	width: 100%;
}
.navi ul {
	width: 100%;
	height: auto;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
.navi li {
	list-style: none;
	width: 100%;
	padding: 0;
}
.navi li a {
	color: #fff;
	background-image: url(../img/btn-navion-sp.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 80px;
	padding-top: 7%;
	text-shadow: 0 0 8px #96efff;
}
.navi li a:hover {
	color: #fff;
	background-image: url(../img/btn-navion-sp.png);
	background-repeat: no-repeat;
	background-size: 100%;
	text-shadow: 0 0 8px #96efff;
}
	
.navi li a img.arrow {
	width: 12px;
	height: auto;
	margin-top: 3px;
	margin-left: 25px;
	position: absolute;
}

.cv {
	width: 100%;
	margin-bottom: 20px;
}
.cv ul {
	width: auto;
	height: auto;
	display: inline-block;
	margin: 0;
	padding: 0 5px 0 5px;
}
.cv li {
	list-style: none;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
}
.cv li a {
	color: #fff;
	background-image: url(../img/btn-cvon.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 103px;
	padding-top: 7%;
	line-height: 110%;
	font-size: 14px;
	text-shadow: 0 0 8px #5ec4ff;
}
.cv li.txtred{
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
}
.cv li a:hover {
	color: #fff;
	background-image: url(../img/btn-cvon.png);
	background-repeat: no-repeat;
	background-size: 100%;
	text-shadow: 0 0 8px #5ec4ff;
}
.cv li.txtxred a:hover {
	background-image: url(../img/btn-cvon.png);
	text-shadow: none;
}
.cv li a:hover::after {
	position: absolute;
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -5px;
	margin-left: 45px;
	background: none;
}
	
.cv-cap {
	list-style: none;
	float: left;
	width: 100%;
	padding: 0;
	text-shadow: 0 0 8px #5ec4ff;
	font-size: 13px;
	text-align: center ;
	margin-top: -25px;
}

.cv-cap span {
font-size: 10px;	
}

	.slidein-line {
	display: inline-block;
	margin: 0 auto;
	padding: 0 0 6px 0;
	text-align: center;
}

.slidein-line01 {
		width: 45%;
}

.slidein-line02 {
		width: 82%;
}
.slidein-line03 {
		width: 70%;
}

#intro, #plugin, #package {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 75px;
}

#package {
	margin-bottom: 0;
}
	

#intro p, #plugin p, #package p {
	text-align: left;
}
	
	
#intro p {
	margin-top: 0;
}

#plugin p {
	margin-top: 20px;
}
	
	
#intro p.sub img, #plugin p.sub img, #package p.sub img {
	width:90%;
}

#intro h2 img, #plugin h2 img, #package h2 img {
	width: 90%;
}

#plugin .btn, #intro .btn{
	padding: 0;
	margin: 8% 0 0 0;
	}

#intro .btn a, #plugin .btn a {
	color: #fff;
	background-image: url(../img/btn-plugin.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 280px;
	padding-top: 33px;
	font-size: 16px;
}
#intro .btn a:hover, #plugin .btn a:hover {
	color: #fff;
	background-image: url(../img/btn-pluginon.png);
	text-shadow: 0 0 8px #5ec4ff;
}
#intro .btn a:hover::after, #plugin .btn a:hover::after {
	position: absolute;
	content: "";
	width: 9px;
	height: 9px;
	margin-top: 5px;
	margin-left: 25px;
	background: none;
	background-size: 9px 9px;
}

	
#plugin .detail ul {
	margin: 0 auto;
	padding: 0 5% 0 10%;
	width: 100%;
	height: auto;
}

#plugin .detail li {
	list-style: none;
	float: none;
	width: 100%;
	margin-top: 50px;
}

#plugin .detail li a {
	color: #92e1ef;
	background-image: url(../img/plugin_01on.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
}
#plugin .detail li a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_01on.png);
}

#plugin .detail li:nth-child(2) a {
	color: #92e1ef;
	background-image: url(../img/plugin_02on.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
}
#plugin .detail li:nth-child(2) a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_02on.png);
}


#plugin .detail li:last-child a {
	color: #92e1ef;
	background-image: url(../img/plugin_03on.png);
	background-repeat: no-repeat;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 268px;
	height: 378px;
	padding-top: 338px;
	padding-left: 20px;
	margin-bottom: 17px;
}
#plugin .detail li:last-child a:hover {
	color: #92e1ef;
	background-image: url(../img/plugin_03on.png);
}

	
.caution ul {
	margin: 30px auto 0 auto;
	padding: 0;
	width: 100%;
	text-align: left;
}

	
#package .detail {
	margin: 45px auto 0 auto;
	background-image: url(../img/package-sp_01.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 480px;
	margin-bottom: -70px;
}

#package .hexagon01{
	width: 25%;
	float: none;
	margin-left: 15%;
	margin-top: 8%;
	position: absolute;
}

#package .hexagon01 img{
	display: block;
    padding-left: 0;
    padding-top: 0;
    width: 85%;
}

#package .hexagon01 a{
	display: block;
	margin: 0 ;
}

#package .hexagon01 a:hover{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0 0;
	width: auto;
	height: auto;
}

#package .hexagon02{
	width: 25%;
	float: none;
	margin-left: 55%;
	margin-top: 32%;
	position: absolute;
}

#package .hexagon02 img{
	display: block;
    padding-left: 0;
    padding-top: 0;
    width: 85%;
}

#package .hexagon02 a{
	display: block;
	margin: 0 ;
}

#package .hexagon02 a:hover{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0 0;
	width: auto;
	height: auto;
}

#package .hexagon03{
	width: 30%;
	float: none;
	margin-left: 23%;
	margin-top: 63%;
	position: absolute;
}

#package .hexagon03 img{
	display: block;
    padding-left: 0;
    padding-top: 0;
    width: 85%;
}

#package .hexagon03 a{
	display: block;
	margin: 0 ;
}

#package .hexagon03 a:hover{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0 0;
	width: auto;
	height: auto;
}

.smoj dl {
	margin-top: 30px;
	margin-bottom: 50px;
}

#story h3 {
	text-shadow: 0 0 18px #96efff;
}

#story dd {
	font-size: 13px;
	line-height: 150%;
}
.btn-back {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
	background: url(../img/btn-backon-pc.png) center no-repeat;
}
}

@media screen and (min-width: 480px) and (max-width: 767px)  {
/* 480px-766px用の記述 */

	
.navi li a {
	color: #fff;
	background-image: url(../img/btn-navion-sp.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 145px;
	padding-top: 9%;
	text-shadow: 0 0 8px #96efff;
}
	
.cv li a {
	color: #fff;
	background-image: url(../img/btn-cvon.png);
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 123px;
	padding-top: 8%;
	line-height: 130%;
	font-size: 14px;
	text-shadow: 0 0 8px #5ec4ff;
}

.cv-cap {
	list-style: none;
	float: left;
	width: 100%;
	padding: 0;
	text-shadow: 0 0 8px #5ec4ff;
	font-size: 13px;
	text-align: center ;
	margin-top: 0px;
}
	#package .detail {
	margin: 45px auto 0 auto;
	background-image: url(../img/package-sp_01.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 650px;
	margin-bottom: -30px;
}
	
}

#package .txtred,
.cv li.txtred{
	color: #f00;
    font-size: 16px;
	text-align: center;
}

/*------------------メインコンテンツ end------------------*/


/*------------------footer start------------------*/
  /* _res/css/style.cssの記述を打ち消し*/

#footer {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */
#footer {
	border-top: none;
}
}

/*------------------footer end------------------*/
/*------------------Title Animation start------------------*/

	.titleAnimation{
		min-height: 70px;
	}
	
	.fadein01, .fadein02, .fadein03, .fadein04, .fadein05, .fadein06, .fadein-line, .fadein-line01, .fadein-line02 {
		display:none;
		margin: 0 auto;	
	}
	.brightparent, .brightparent01, .brightparent02{
		position:relative;
		display: none;	
	}
	.fadeinAnimation{
		display:block;
	}
	.brightDot01 {
	   	position: absolute;
       	width: 11px;
       	height: 11px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 11px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move01 1s infinite linear;
   }
	.brightDot02 {
       	position: absolute;
       	width: 11px;
       	height: 11px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 11px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move02 2s infinite linear;
   }
	.brightDot03 {
	   	position: absolute;
       	width: 11px;
       	height: 11px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 11px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move03 1.5s infinite linear;
   }
	.brightDot04 {
       	position: absolute;
       	width: 11px;
       	height: 11px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 11px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move04 2.5s infinite linear;
   }
	.brightDot05 {
	   	position: absolute;
       	width: 9px;
       	height: 9px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 9px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move05 3s infinite linear;
   }
	.brightDot06 {
       	position: absolute;
       	width: 9px;
       	height: 9px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 9px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move06 1s infinite linear;
   }
	.brightDot07 {
	   	position: absolute;
       	width: 9px;
       	height: 9px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 9px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move07 2s infinite linear;
   }
	.brightDot08 {
       	position: absolute;
       	width: 9px;
       	height: 9px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 9px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move08 1.5s infinite linear;
   }
	.brightDot09 {
	   	position: absolute;
       	width: 7px;
       	height: 7px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 7px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move09 2.5s infinite linear;
   }
	.brightDot10 {
       	position: absolute;
       	width: 7px;
       	height: 7px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 7px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move10 3s infinite linear;
   }
	.brightDot11 {
	   	position: absolute;
       	width: 7px;
       	height: 7px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 7px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move11 1s infinite linear;
   }
	.brightDot12 {
       	position: absolute;
       	width: 7px;
       	height: 7px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 7px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move12 2s infinite linear;
   }
	.brightDot13 {
	   	position: absolute;
       	width: 4px;
       	height: 4px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 4px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move13 1.5s infinite linear;
   }
	.brightDot14 {
       	position: absolute;
       	width: 4px;
       	height: 4px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 4px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move14 2.5s infinite linear;
   }
	.brightDot15 {
	   	position: absolute;
       	width: 4px;
       	height: 4px;
       	background-color: rgba(127, 184, 195, 0.8);
       	border-radius: 4px;
       	box-shadow: 0 0 5px rgba(127, 184, 195, 0.8), 0 0 8px rgba(127, 184, 195, 0.8), 0 0 15px rgba(127, 184, 195, 0.9);
       	opacity: 1;
		animation: move15 3s infinite linear;
   }
	.brightDot16 {
       	position: absolute;
       	width: 4px;
       	height: 4px;
       	background-color: rgba(120, 126, 127, 0.8);
       	border-radius: 4px;
       	box-shadow: 0 0 5px rgba(120, 126, 127, 0.8), 0 0 8px rgba(120, 126, 127, 0.8), 0 0 15px rgba(120, 126, 127, 0.9);
       	opacity: 1;
		animation: move16 1s infinite linear;
   }
	.brightness01 {
	   	position: absolute;
       	height: 10px;
       	opacity: 0.7;
		animation: bright01 3s infinite linear;
   }
	.brightness02 {
       	position: absolute;
       	height: 6px;
       	opacity: 0.7;
		animation: bright02 2s infinite linear;
   }
	.brightness03 {
       	position: absolute;
       	height: 3px;
       	opacity: 0.7;
		animation: bright03 4s infinite linear;
   }

@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */

	.titleAnimation{
		min-height: 60px;
	}
}

	@keyframes bright01 {
	0% {top:0px;opacity:0; transform:scale(0.0);}
	40% {top:0px; opacity:0; transform:scale(0.0);}
	50% {top:-60px; opacity:0.6; transform:scale(1.0);}
	60% {top:-120px; opacity:0; transform:scale(0.0);} 
	100% {top:-120px; opacity:0; transform:scale(0.0);}
}
	@keyframes bright02 {
	0% {top:0px;opacity:0; transform:scale(0.0);}
	40% {top:0px; opacity:0; transform:scale(0.0);}
	50% {top:-60px; opacity:0.5; transform:scale(1.0);}
	60% {top:-120px; opacity:0; transform:scale(0.0);} 
	100% {top:-120px; opacity:0; transform:scale(0.0);}
}
	@keyframes bright03 {
	0% {top:0px;opacity:0; transform:scale(0.0);}
	40% {top:0px; opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.5; transform:scale(1.0);}
	60% {top:-120px; opacity:0; transform:scale(0.0);} 
	100% {top:-120px; opacity:0; transform:scale(0.0);}
	}
	@keyframes move01 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-30px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move02 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-20px; opacity:0.8; transform:scale(1.0);}
	100% {top:-60px; opacity:0; transform:scale(0.0);}
}
	@keyframes move03 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-10px; opacity:0.8; transform:scale(1.0);}
	100% {top:-40px; opacity:0; transform:scale(0.0);}
}
	@keyframes move04 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move05 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-30px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move02 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-20px; opacity:0.8; transform:scale(1.0);}
	100% {top:-60px; opacity:0; transform:scale(0.0);}
}
	@keyframes move03 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-10px; opacity:0.8; transform:scale(1.0);}
	100% {top:-40px; opacity:0; transform:scale(0.0);}
}
	@keyframes move04 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move05 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-30px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move06 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-20px; opacity:0.8; transform:scale(1.0);}
	100% {top:-60px; opacity:0; transform:scale(0.0);}
}
	@keyframes move07 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-10px; opacity:0.8; transform:scale(1.0);}
	100% {top:-40px; opacity:0; transform:scale(0.0);}
}
	@keyframes move08 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move09 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-30px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move10 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-20px; opacity:0.8; transform:scale(1.0);}
	100% {top:-60px; opacity:0; transform:scale(0.0);}
}
	@keyframes move11 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-10px; opacity:0.8; transform:scale(1.0);}
	100% {top:-40px; opacity:0; transform:scale(0.0);}
}
	@keyframes move12 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move13 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-30px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	@keyframes move14 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-20px; opacity:0.8; transform:scale(1.0);}
	100% {top:-60px; opacity:0; transform:scale(0.0);}
}
	@keyframes move15 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-10px; opacity:0.8; transform:scale(1.0);}
	100% {top:-40px; opacity:0; transform:scale(0.0);}
}
	@keyframes move16 {
	0% {top:10px;opacity:0; transform:scale(0.0);}
	50% {top:-50px; opacity:0.8; transform:scale(1.0);}
	100% {top:-90px; opacity:0; transform:scale(0.0);}
}
	
   
/*------------------Title Animation end------------------*/