@charset "utf-8";

@-webkit-keyframes shine {
0%{left:-75%; opacity: 0;}
10%{left:-25%; opacity: 1;}
  100% {
    left: 145%;
  }
}
@keyframes shine {
0%{left:-75%; opacity: 0;}
10%{left:-25%; opacity: 1;}
  100% {
    left: 145%;
  }
}
@-webkit-keyframes shinesp {
0%{left:-75%; opacity: 0;}
5%{left:-55%; opacity: 1;}
20% {left: 145%;}
100% {left: 145%;}
}
@keyframes shinesp {
0%{left:-75%; opacity: 0;}
5%{left:-55%; opacity: 1;}
20% {left: 145%;}
100% {left: 145%;}
}
@media screen and (min-width:641px){

#soaHeader nav ul li.top a:before{opacity:0;}
#soaHeader nav ul li.top a:after {opacity:1;}

#soaContents main {padding-top:115px;}

#soaContents main .collabo {position: relative; z-index: 10;}
#soaContents main .collabo span{position: absolute; width: 226px; height: 211px; display: block; z-index: 20; left: 178px; top: 42px;}
#soaContents main .collabo i{width: 226px; height: 211px; display: block;} 
#soaContents main .collabo a{width: 226px; height: 211px; display: block; background: url("/soa/images/collabo_card_hover.png") left top no-repeat;}
#soaContents main .collabo b{width: 226px; height: 211px; display: block; position: relative; z-index: 100;}
#soaContents main .collabo div{width: 226px; height: 175px; display: block; position: relative; z-index: 110; transform-style:preserve-3d;perspective:500px;transform: rotate(-27deg) translate(3px,-10px); overflow: hidden;}
#soaContents main .collabo em{width: 226px; height: 175px; display: block; overflow: hidden; position: relative; z-index: 110;
 transform:scaleX(0.82) scaleY(0.67) scaleZ(1) rotateY(24deg) rotateX(11deg)  skewX(0deg);}
#soaContents main .collabo em img {position: relative; opacity: 0;}
#soaContents main .collabo b::before {content: ''; background: url("/soa/images/collabo_card.png") left top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; backface-visibility: hidden;}
#soaContents main .collabo b::after {content: ''; background: url("/soa/images/collabo_card_shadow.png") left top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; backface-visibility: hidden;}
#soaContents main .collabo a div em::before{
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 200;
  display: block;
  content: '';
  width: 40%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  opacity: 0;
}
/*animate*/
#soaContents main .collabo i {opacity: 0; filter: brightness(0);}
.windowloaded #soaContents main .collabo i {opacity: 1; transition: 0.35s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); filter: brightness(1);}
#soaContents main .collabo span{transform: translate(480px,-80px) rotate(180deg) scale(1.0); opacity: 0; filter: brightness(3);}
.ie11 #soaContents main .collabo span{opacity: 0;}
.windowloaded #soaContents main .collabo span{transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; transition: 0.35s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); filter: brightness(1);}
.ie11.windowloaded #soaContents main .collabo span {opacity: 1;}
#soaContents main .collabo b::before{opacity: 1;}
#soaContents main .collabo b::after{opacity: 0;}
.windowloaded #soaContents main .collabo b::before{opacity:0; transition: 0.1s 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.windowloaded #soaContents main .collabo b::after{opacity: 1; transition: 0.1s 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
/* hover */
#soaContents main .collabo a:hover div em::before {-webkit-animation: shine .5s;animation: shine .5s;}
#soaContents main .collabo a{transition: 0.4s;}
#soaContents main .collabo a:hover{filter: brightness(1.3);}

#soaContents h1 {position:relative; z-index:10; left:-39px; top:-6px; margin-bottom:12px; text-align:left; width:450px;}
#soaContents h1 img {width:auto; height:299px;}
#soaContents .text {position:relative; z-index:11; width:352px; text-align:center; left:6px;}

.visualarea {min-height:445px; padding-bottom: 56px;}

#spvoice {display:none;}
#soaContents .voice p.chara {position:absolute; left:271px; top:-17px; margin:0; z-index:0;}
#soaContents .voice p.chara2 {left:660px; top:580px;}
#soaContents .voice img {position:relative; z-index:0;}
#soaContents .voice img + img {display:none;}

#soaContents ul.playlist{position:absolute; left:0; top:0; z-index:10;}
#soaContents ul.playlist li {position:absolute; z-index:10;left:546px; top:267px; display:none;}
#soaContents ul.playlist.chara2 li { left:548px; top:438px;}
#soaContents ul.playlist li a.voice {position:fixed; left:9999px; top:9999px;}
#soaContents ul.playlist li a img {width:552px; height:auto; opacity:0;}
#soaContents ul.playlist li a.close {display:block; position:relative; height:184px; overflow:hidden;}
#soaContents ul.playlist li a.close:before{content:''; background:url(/soa/images/voice_close.png) left bottom no-repeat; position:absolute; left:0; bottom:0; width:552px; height:100%; transition:opacity 0.5s; background-size:100% auto;}
#soaContents ul.playlist li a.close:hover:before{content:''; opacity:0.5;}
#soaContents ul.playlist li a + img {display:none;}
#soaContents ul.playlist.chara2 li:nth-child(1) a{background:url(/soa/images/voice02.png) left top no-repeat; width:552px; height:184px;}
/*
#soaContents ul.playlist.chara2 li:nth-child(2) a{background:url(/soa/images/voice02.png) left top no-repeat; width:552px; height:184px;}
#soaContents ul.playlist.chara1 li:nth-child(1) a{background:url(/soa/images/voice03.png) left top no-repeat; width:552px; height:184px;}
*/
/* bgm */
#bgm {position:relative; ext-align:center; width:305px; height:53px; background:url(/soa/images/bgm.png) left top no-repeat; font-size:0; line-height:1; position:absolute; top:81px; right:-11px; margin-top:0; background-size:auto 53px; margin-bottom:0; z-index:100;}
#bgm .ui {text-align:center;}
#bgm .ui .status{display:inline-block; position:absolute; left:108px; top:0;}
#bgm .ui .status a + a{display:none;}
#bgm .ui .status.play a {display:none;}
#bgm .ui .status.play a + a {display:block;}
#bgm .ui .status a img {height:53px; width:auto;}
#bgm .ui .bgmIndex {font-size:0; position:absolute; left:153px; top:0;}
#bgm .ui .bgmIndex a{display:inline-block; width:53px; height:53px; vertical-align:top; position:relative;}
#bgm .ui .bgmIndex a:before {content:''; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; transition:opacity 0.5s; opacity:0; position:absolute; left:0; top:0;}
#bgm .ui .bgmIndex a + a {margin-left:10px;}
#bgm .ui .bgmIndex a:nth-child(1) {background:url(/soa/images/btn_bgm01.png) center center no-repeat; background-size:auto 53px;}
#bgm .ui .bgmIndex a:nth-child(2) {background:url(/soa/images/btn_bgm02.png) center center no-repeat; background-size:auto 53px;}
#bgm .ui .bgmIndex a:nth-child(1):before {background:url(/soa/images/btn_bgm01active.png) center center no-repeat; background-size:auto 53px;}
#bgm .ui .bgmIndex a:nth-child(2):before {background:url(/soa/images/btn_bgm02active.png) center center no-repeat; background-size:auto 53px;}
#bgm .ui .bgmIndex a:nth-child(1).active:before,
#bgm .ui .bgmIndex a:nth-child(2).active:before {opacity:1;}
#bgm .ui .bgmIndex a {transition:0.5s;}
#bgm .ui .bgmIndex a:hover {opacity:0.5;}
#bgm .ui .bgmIndex a.active {opacity:1;}

.movie{position:relative; z-index:10; width:310px; height:174px; margin:22px 0 -8px 28px; opacity:0; transition:opacity 0.3s;}
.windowloaded .movie{opacity:1;}
.soundon {position:absolute; left:0; top:0; cursor:pointer; width:100%; height:100%; opacity:0; transition:opacity 0.3s;}
.windowloaded .soundon{opacity:1;}
.soundon:after{content:''; background:url(/soa/images/movie_mask.png) center center no-repeat; width:100%; height:100%; transition:0.5s; opacity:1; position:absolute; left:0; top:0;}
.soundon:hover:after {opacity:0.5;}
.soundon img {display:none;}
	
.movie .movietxt{font-size: 22px; color:#FFFFFF; padding:10px 0 20px; text-shadow: 0 0 10px #00ff8a,0 0 15px #00ff8a;}


/* スマホタブレットではポスター画像 */
.uamobile .movie {background:url(/soa/images/movie.png) center center no-repeat; background-size:310px auto; height: 218px;}
.uamobile .soundon:after{display:none;}
.uamobile .playlist + .text {display: none;}

#soaContents p.campaign {text-align:left; margin:50px 0 34px; position:relative; z-index:100; width:364px;}
#soaContents p.campaign img {width:373px; height:auto; transition:0.5s;}
#soaContents p.campaign + p.campaign {margin-top:-30px;}
#soaContents p.campaign.twitter img {width:384px; position:relative; left:-12px;}
#soaContents p.campaign.anniversary img {width: 373px; position:relative;}
#soaContents p.campaign.anniversary img {width:373px; position:relative;}
#soaContents p.campaign.million img {width:360px; position:relative; margin-bottom:5px; margin-top:10px;}
#soaContents p.campaign a:hover img { opacity:0.7;}

#soaContents ul.campaign {margin-top: 40px; position: relative; z-index: 10; text-align: left;}
#soaContents ul.campaign li:nth-child(1){margin-top:-2px;} 
#soaContents ul.campaign li:nth-child(2){margin-top:-2px;} 
#soaContents ul.campaign li:nth-child(3){margin-top:-2px;}
#soaContents ul.campaign li{ display: inline-block; vertical-align: top;} 
#soaContents ul.campaign li + li{margin-left:10px;}
#soaContents ul.campaign li img {width:360px; height:auto; transition:0.5s;}
#soaContents ul.campaign li a:hover img { opacity:0.7;}
	
#soaContents p.devices {text-align:left; margin:45px 0 34px; position:relative; z-index:100; width:364px;}
#soaContents p.devices img {width:360px; height:auto; transition:0.5s;}
#soaContents p.devices + p.devices {margin-top:-26px;}
#soaContents p.devices a:hover img { opacity:0.7;}


/* 事前登録受付中 */
#entry {height:199px; padding:14px 0 0; position:relative;}
#entry:before{content:''; width:500%; height:199px; background:rgba(0,0,0,0.7); position:absolute; left:50%; top:0; z-index:0; margin-left:-250%;}
#entry h2 {background:url(/soa/images/h2_entry.png) center center no-repeat; height:74px; text-indent:200%; overflow:hidden; white-space:nowrap; position:relative; z-index:10;}
#entry ul li {display:inline-block; position:relative; top:9px; overflow:hidden; vertical-align:top;}
#entry ul li + li {padding-left:10px;}
#entry ul li a{display:block; width:360px; height:72px; overflow:hidden; position:relative; z-index:10; transition:0.5s;}
#entry ul li a:hover {opacity:0.5;}
#entry ul li.line a {background:url(/soa/images/btn_line_entry.png) center top no-repeat; background-size:auto 72px;} 
#entry ul li.twitter {background:url(/soa/images/btn_twitter_entry.png) center top no-repeat; background-size:auto 72px; width:360px; height:72px; margin-left:10px; transition:0.5s; cursor:pointer; text-align:center; position:relative;} 
#entry ul li.twitter.hover {opacity:0.7;}

#entry ul li.twitter iframe {opacity:0;
transform: scale(15,15);
-moz-transform: scale(15,15);
-webkit-transform: scale(15,15);
-o-transform: scale(15,15);
-ms-transform: scale(15,15);
}
.ie9 #entry ul li.twitter iframe,
.ie10 #entry ul li.twitter iframe
.ie11 #entry ul li.twitter iframe{ position:relative; left:-100px; top:0; zoom:3; -ms-transform: scale(1,1);}

#entry ul li.mail a {background:url(/soa/images/btn_mail_entry.png) center top no-repeat; background-size:auto 72px;} 

/* tokuten */
#tokuten {position:relative; z-index:10; text-align:center;}
#tokuten:before{content:''; background:url(/soa/images/bg_tokuten.png) center top repeat-x; width:500%; height:100%; position:absolute; left:50%; top:0; margin-left:-250%; z-index:0;}
#tokuten img {position:relative; z-index:10; margin:0 0 0 -410px;}
#tokuten img + img {display:none;}

#soaFooter .sns {margin:50px 0 0;}

/* download */
ul.download {font-size:0; line-height: 1; width: 366px; padding: 19px 0 0; margin-bottom: 8px; position: relative; z-index: 100;}
ul.download li {display: inline-block; vertical-align: top; padding: 0 3px;}
ul.download li img {width: 176px; height: auto; transition: 0.5s;}
ul.download li a:hover img {opacity: 0.7;}
	
/* notice */
ul.notice {font-size:0; line-height: 1; width: 366px; padding: 19px 0 0; margin-bottom: 8px; position: relative; z-index: 100;}
ul.notice li { vertical-align: top; padding: 7px 3px;}
ul.notice li img {width: 310px; height: auto; transition: 0.5s;}
ul.notice li a:hover img {opacity: 0.7;}

/* archives */
.archives {height:433px; width:630px; float:left; text-align:left; margin-bottom:60px;}
#tokuten + .archives {margin-top:80px; margin-bottom:0;}
.archives header {height:55px; background:rgba(17,17,17,0.8); border-bottom:1px solid #ababab;}
.archives header:after{content:''; clear:both; display:block;}
.archives header h2 {display:inline-block; vertical-align:top; position:relative; left:20px; top:12px;}
.archives header h2 img {width:220px; height:auto;}
.archives header p {display:inline-block; vertical-align:top; float:right; position:relative; top:11px; right:17px;}
.archives header p img {width:110.84px; transition:0.5s;}
.archives header p a:hover img {opacity:0.7;}
.archives .entry {display:block; color:#fff; text-decoration:none; background:url(/soa/images/info/pc.png) left top no-repeat; height:73px; position:relative; padding:40px 50px 0 20px;}
.archives .entry:after{content:''; clear:both; display:block;}
.archives .entry p {position:absolute; left:20px; top:5px;}
.archives .entry p.category img {width:112px; height:auto;}
.archives .entry p.date {top:10px; font-size:13px; left:144px;}
.archives .entry h2 {font-size:14px; line-height:24px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.archives .entry:hover h2 {text-decoration:underline;}
nav.category  {background:rgba(193,193,193,0.80); display: none;}
nav.category.pc {display: block;}
nav.category ul{font-size:0; line-height:1; padding:3px 0 11px 20px;}
nav.category ul li span {background:#3c7fa3; display:block;}
nav.category ul li {display:inline-block; vertical-align:top; padding:8px 4px 0;}
nav.category ul li img {width:140px; height:auto; transition:0.5s;}
nav.category ul li a:hover img{opacity:0.7;}

/**/
#soaContents .twitter-widget {background:url(/soa/images/timeline2.png) left top no-repeat; height:435px; position:relative; width:434px; padding:20px; z-index:20; float:right; margin-bottom:60px;}
#tokuten + .archives + .twitter-widget{margin-top:80px; margin-bottom:0;}
#soaContents .twitter-widget:after {content:''; width:410px; height:3px; background:#fff; position:absolute; left:10px; top:19px; z-index:20;}
#soaContents .twitter-widget:before{content:''; width:410px; height:3px; background:#fff; position:absolute; left:10px; bottom:19px; z-index:20;}
#soaContents .twitter-widget.sp{display:none !important;}


/* beta */
.beta {height:367px; overflow:hidden; position:relative; z-index:10; font-size:0; line-height:1; margin-top:218px;}
.beta:before{content:''; background:rgba(29,90,182,0.8); height:337px; width:500%; position:absolute; left:50%; margin-left:-250%; top:0; z-index:-1;}
.beta section {position:relative; z-index:30; background:url(/soa/images/beta.png) center top no-repeat; height:367px; padding-top:226px;}
.beta section p{position:relative;}
.beta section p img {width:460px; height:auto; transition:0.5s;}
.beta section p a:hover img {opacity:0.7;}
.beta h2,
.beta h3 {text-indent:300%; overflow:hidden; white-space:nowrap; position:absolute; left:0; top:0;}
.beta + .archives,
.beta + .archives + .twitter-widget {margin-top:12px;}
	
	.m30 {margin-top: 30px!important;}
	

/* soaFooter */
#soaFooter {clear:both; zoom:1;}
#soaFooter .spec {color:#fff; width:1100px; margin:0 auto; background:rgba(0,0,0,0.4); border:1px solid #fff; padding:40px; padding-bottom:30px; position:relative; top:0; left:-95px;}
#soaFooter .spec .left {width:390px; float:left;}
#soaFooter .spec .right {width:620px; float:right;}
#soaFooter .spec h2 {margin:0 auto 10px;}
#soaFooter .spec dl {font-size:14px; line-height:26px; letter-spacing:0.2em; padding:0 0.2em; display:inline-block; float:none; width:630px;}
#soaFooter .spec dl dt {font-weight:bold; float:left; background:#b3b3b3; width:115px; text-align:center; color:#3f3f3f; margin-bottom:10px;}
#soaFooter .spec dl dd { float:left; text-align:left; margin-bottom:10px;padding-left: 20px;}
#soaFooter .spec .icon{}
#soaFooter .spec ul{ position:absolute; left:200px; top:40px;}
#soaFooter .spec ul li img{width:200px;}
	
#soaFooter .bnr{padding-top: 0px;}
	
.wallpaper-top img{transition: 0.5s;}
.wallpaper-top a:hover{opacity:0.8; transition: 0.5s;}
	
	
}


@media screen and (max-width:640px){
#soaHeader nav ul li.top a:before{opacity:0;}
#soaHeader nav ul li.top a:after {opacity:1;}

#soaContents main {}
#soaContents .voice{display:none;}

#soaContents h1,
#soaContents p.text {position:fixed; left:-9999px; top:-9999px; width:10px; height:10px; overflow:hidden;}

#soaContents main .collabo {position:absolute; z-index: 100; height: calc(211 / 640 * 100vw); left: 0; top: calc(730 / 640 * 100vw); width: 100%;}
#soaContents main .collabo span{position: absolute; width: calc(226 / 640 * 100vw); height: calc(211 / 640 * 100vw); display: block; z-index: 20; left: calc(310 / 640 * 100vw); top: calc(10 / 640 * 100vw);}
#soaContents main .collabo i,
#soaContents main .collabo a,
#soaContents main .collabo b{width:calc(226 / 640 * 100vw); height:calc(211 / 640 * 100vw); display: block;}
#soaContents main .collabo a {background: url("/soa/images/collabo_card_hover.png") left top no-repeat; background-size: 100% auto;}
#soaContents main .collabo b::before {content: ''; background: url("/soa/images/collabo_card.png") left top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; backface-visibility: hidden; background-size: cover;}
#soaContents main .collabo b::after {content: ''; background: url("/soa/images/collabo_card_shadow.png") left top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; backface-visibility: hidden;
background-size: cover;}

#soaContents main .collabo div{width: calc(226 / 640 * 100vw); height: calc(175 / 640 * 100vw); display: block; position: relative; z-index: 110; transform-style:preserve-3d;perspective: calc(500 / 640 * 100vw);transform: rotate(-27deg) translate(3px,-10px); overflow: hidden;}
#soaContents main .collabo em{width: calc(226 / 640 * 100vw); height: calc(175 / 640 * 100vw); display: block; overflow: hidden; position: relative; z-index: 110;
 transform:scaleX(0.82) scaleY(0.67) scaleZ(1) rotateY(24deg) rotateX(11deg)  skewX(0deg);}
#soaContents main .collabo em img {position: relative; opacity: 0;}
#soaContents main .collabo a div em::before{
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 200;
  display: block;
  content: '';
  width: 40%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  opacity: 1;
}

/*animate*/
#soaContents main .collabo i {opacity: 0; filter: brightness(0);}
.windowloaded #soaContents main .collabo i {opacity: 1; transition: 0.3s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); filter: brightness(1);}
#soaContents main .collabo span{transform: translate(120vw,-20vw) rotate(180deg) scale(1.0); opacity: 0; filter: brightness(3);}
.windowloaded #soaContents main .collabo span{transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; transition: 0.3s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86); filter: brightness(1);}
#soaContents main .collabo b::before{opacity: 1;}
#soaContents main .collabo b::after{opacity: 0;}
.windowloaded #soaContents main .collabo b::before{opacity:0; transition: 0.05s 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.windowloaded #soaContents main .collabo b::after{opacity: 1; transition: 0.05s 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.windowloaded #soaContents main .collabo a div em::before {-webkit-animation: shinesp 3.2s infinite;animation: shinesp 3.2s infinite;}



#spvoice {position:relative; z-index:10; margin-bottom:20px; margin-bottom:3.3125vw;}
#spvoice img {width:100%; height:auto;}
#spvoice {position:relative;}
#spvoice p.chara1 {position:absolute; left:0; bottom:40%; width:100%; height:30%; z-index:10;}
#spvoice p.chara2 {position:absolute; left:40%; bottom:43%; width:30%; height:15%; z-index:20;}
#spvoice a{display:block; height:100%;}
#spvoice p.chara1,#spvoice p.chara2 {background:url(/soa/images/iemask.png);}

#soaContents ul.playlist{position:absolute; left:0; top:0; z-index:100; width:100%;}
#soaContents ul.playlist li {display:block; width:100%; position:absolute; z-index:10; left:0; top:0; display:none;}
#soaContents ul.playlist li a.voice {position:fixed; left:9999px; top:9999px;}
#soaContents ul.playlist li img {width:100%;}
#soaContents ul.playlist li a.close {display:block; position:relative; width:100%; position:absolute; top:6.666%; height:100%; z-index:100;}
#soaContents ul.playlist.chara2 li a.close {top:20%;}
#soaContents ul.playlist li a + img {opacity:0; position:relative; z-index:0;}

.movie{position:relative; z-index:20; background:none !important;}
.movie iframe {display:none !important;}
.soundon {cursor:pointer; width:100%; height:100%;}
.soundon img {width:100%; height:auto; max-width:320px; max-width:100vw;}
	
.movie .movietxt{font-size: 28px; color: #FFFFFF; padding: 10px 0;  text-shadow: 0 0 10px #00ff8a,0 0 15px #00ff8a;}
.movie{margin-bottom: 20px;}

/* bgm */
#bgm {position:relative; ext-align:center; width:320px; height:53px; background:url(/soa/images/bgm.png) left top no-repeat; margin:50px auto 30px; background-size:100% auto;
width:100vw; height:16.40625vw; background-size:100vw auto; margin:6.5625 auto 9.375vw;}
#bgm .ui {text-align:center;}
#bgm .ui .status{display:inline-block; position:absolute; left:108px; top:0; left:33.75vw;}
#bgm .ui .status a + a{display:none;}
#bgm .ui .status.play a {display:none;}
#bgm .ui .status.play a + a {display:block;}
#bgm .ui .status a img {height:53px; width:auto; height:16.40625vw;}
#bgm .ui .bgmIndex {font-size:0; position:absolute; left:150px; top:0; left:46.875vw}
#bgm .ui .bgmIndex a{display:inline-block; width:53px; width:16.40625vw; height:53px; height:16.40625vw; vertical-align:top; position:relative;}
#bgm .ui .bgmIndex a:before {content:''; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; transition:opacity 0.5s; opacity:0; position:absolute; left:0; top:0;}
#bgm .ui .bgmIndex a + a {margin-left:12px; margin-left:3.75vw;}
#bgm .ui .bgmIndex a:nth-child(1) {background:url(/soa/images/btn_bgm01.png) center center no-repeat; background-size:auto 53px; background-size:auto 16.40625vw;}
#bgm .ui .bgmIndex a:nth-child(2) {background:url(/soa/images/btn_bgm02.png) center center no-repeat; background-size:auto 53px; background-size:auto 16.40625vw;}
#bgm .ui .bgmIndex a:nth-child(1):before {background:url(/soa/images/btn_bgm01active.png) center center no-repeat; background-size:auto 53px; background-size:auto 16.40625vw;}
#bgm .ui .bgmIndex a:nth-child(2):before {background:url(/soa/images/btn_bgm02active.png) center center no-repeat; background-size:auto 53px; background-size:auto 16.40625vw;}
#bgm .ui .bgmIndex a:nth-child(1).active:before,
#bgm .ui .bgmIndex a:nth-child(2).active:before {opacity:1;}
#bgm .ui .bgmIndex a {transition:0.5s;}
#bgm .ui .bgmIndex a.active {opacity:1;}

#soaContents p.campaign a{display:block; width:300px; width:96.75vw; margin:-11px auto 25px; margin:-1.4375vw 0 5vw 3vw;}
#soaContents p.campaign.anniversary  a{width:96.75vw; margin:-1.4375vw 0 5vw 3vw;}
#soaContents p.campaign.anniversary  a{width:96.75vw; margin:3.4375vw 0 5vw 3vw;}
#soaContents p.campaign img {width:100%; height:auto;}

#soaContents p.campaign.twitter a{width:320px; width:100vw; margin-top:-4.4vw;}
#soaContents p.campaign.million  a{width:94vw; margin:6.4375vw 0 2vw 3vw;}

#soaContents ul.campaign {width: 90.625vw;margin: 0 auto;}
#soaContents ul.campaign li img {width:100%; height:auto;}
#soaContents ul.campaign li + li {margin-top: 3vw;}
#soaContents ul.campaign li:nth-child(3) {margin-top: 7vw;}
	
	
	
	#soaContents p.devices a{display:block; width:300px; width:93.75vw; margin:-11px auto 25px; margin:3.4375vw auto 7.8125vw;}
#soaContents p.devices img {width:100%; height:auto;}

#soaContents p.devices.twitter a{width:320px; width:100vw; margin-top:-4.4vw;}


/* 事前登録受付中 */
#entry {position:relative; z-index:20; margin:0 0 36px; margin-bottom:11.25vw;}
#entry img {width:100%; height:auto; max-width:320px; max-width:100vw;}
#entry h2 {margin:0 0 27px; margin-bottom:8.21875vw;}
#entry ul li {display:block; text-align:center;}
#entry ul li a{display:block; width:320px; height:60px; width:100vw; height:18.75vw; overflow:hidden; position:relative; z-index:10; margin:0 auto;}
#entry ul li.line a {background:url(/soa/images/btn_line_entry.png) center top no-repeat; background-size:100% auto;} 

/*#entry ul li.twitter a{background:url(/soa/images/btn_twitter_entry.png) center top no-repeat; background-size:100% auto;} */

#entry ul li.twitter {margin:5px auto 0; margin-top:1.5625vw; background:url(/soa/images/btn_twitter_entry.png) center top no-repeat; background-size:100% auto; width:320px; height:60px; cursor:pointer; width:100vw; height:18.75vw; overflow:hidden;} 
#entry ul li.twitter iframe {-moz-transform: scale(15,15); -webkit-transform: scale(15,15); -o-transform: scale(15,15); -ms-transform: scale(15,15); opacity:0;}
#entry ul li.mail a {background:url(/soa/images/btn_mail_entry.png) center top no-repeat; background-size:100% auto;} 
#entry ul li + li {margin-top:5px; margin-top:1.5625vw;}

/* tokuten */
#tokuten {position:relative; z-index:10; max-width:320px; max-width:100vw; margin:0 auto 30px; margin-bottom:9.375vw;}
#tokuten img {width:100%; height:auto; position:relative; z-index:0; display:none;}
#tokuten img + img {display:block;}

#soaContents p.text01 {background:url(/soa/images/sp/text.png) center top no-repeat; background-size:320px 68px; background-size: 100vw auto;text-indent:200%; overflow: hidden; white-space: nowrap; height: 68px; height: 9.09375vw; margin:0 auto 10px; margin:0 auto 4vw; width:320px; width: 100vw; position: static;}
/* download */
ul.download {font-size:0; line-height: 1; margin-bottom: 20px; margin-bottom:6.25vw;}
ul.download li {display: inline-block; vertical-align: top; padding: 0 5px; padding: 0 1.5625vw;}
ul.download li img {width: 128px; height: auto; width:40.15625vw;}
	
/* notice */
ul.notice {font-size:0; line-height: 1; margin-bottom:6.25vw;}
ul.notice li { vertical-align: top; padding: 1.5vw 1.5625vw;}
ul.notice li img { width: 80%; height: auto;}

.archives header {height:51px; height:15.9375vw; background:rgba(17,17,17,0.8); border-bottom:2px solid #ababab; margin:5px 0 0; margin:1.5625 0 0; display: none;}
.archives header:after{content:''; clear:both; display:block;}
.archives header h2 {display:inline-block; vertical-align:top; position:relative; left:13px; left:4.0625vw; top:11.5px; top:3.59375vw;}
.archives header h2 img {width:183px; width:57.1875vw; height:auto;}
.archives header p {display:inline-block; vertical-align:top; float:right; position:relative; padding:12.5px 12.5px 0 0; padding:3.90625vw 3.90625vw 0 0;}
.archives header p img {width:81.5px; width:25.46875vw; transition:0.5s;}
.archives {text-align:left; margin-bottom:34.5px; margin-bottom:12.03125vw;}
.archives .entry {display:block; color:#fff; text-decoration:none; background:url(/soa/info/images/sp/archive.png) left top no-repeat; min-height:85px; min-height:26.5625vw; border-bottom:2px solid #ababab; position:relative; background-size:100% auto;}
.archives .entry:before {content:''; background:url(/soa/info/images/arr.png) right center no-repeat; width:100%; height:85px; height:26.5625vw; background-size:100% auto; position:absolute; right:0; top:50%; margin-top:-42.5px; margin-top:-13.28125vw;}
.archives .entry:after{content:''; clear:both; display:block;}
.archives .entry p {position:absolute; left:15px; top:5px; left:4.6875vw; top:0.55875vw;}
.archives .entry p.category img {width:75px; height:auto; width:23.4375vw;}
.archives .entry p.date {top:5px; top:1.5625vw; font-size:9px; font-size:2.8125vw; left:107px; left:33.4375vw;}
.archives .entry h2 {font-size:12px; font-size:3.75vw; line-height:15px; line-height:4.6875vw; display:table; height:85px; height:26.5625vw; width:100%; padding:20px 40px 5px 15px; padding:6.25vw 12.5vw 1.5625vw 4.6875vw}
.archives .entry h2 span {display:table-cell; vertical-align:middle; padding:5px 0; padding:1.5625vw 0;}
.archives .entry:hover h2 {text-decoration:underline;}
nav.category {background:rgba(255,255,255,0.55); border-bottom:2px solid #ababab; display: none;}
nav.category.sp {display: block;}
nav.category ul{font-size:0; line-height:1; text-align:center; padding:10.5px 0 6px; padding:3.28125vw 0 1.875vw;}
nav.category ul li {display:inline-block; vertical-align:top; padding:0 3px 4.5px; padding:0 0.9375vw 1.40625vw}
nav.category ul li img {width:97.5px; height:auto; width:30.46875vw;}

/* beta */
.beta {position:relative; z-index:10; font-size:0; line-height:1; overflow:hidden; width:100%; margin:0 0 33px; margin:0 0 10.3125vw; padding:10px 0 0; padding:3.125vw 0 0;}
.beta section {width:100%; height:auto; overflow:hidden;}
.beta section h2 {position:absolute; left:200%; top:0;}
.beta section h3 img {width:100%; height:auto;}
.beta section p {position:absolute; left:0; bottom:6.5875%; bottom:6.5875vw; text-align:center; width:100%;}
.beta section p img {width:93.75%; width:93.75vw;}

/**/
#soaContents .twitter-widget {background:url(/soa/images/sp/timeline.png) center top no-repeat; position:relative; width:320px; margin:0 auto 30px; height:260px; background-size:100% auto; padding:15px 20px; width:100vw; height:81.25vw; padding:4.6875vw 6.25vw; display:none; margin-bottom:9.375vw; display:none;}
#soaContents .twitter-widget.sp{display:block;}
#soaContents .twitter-widget iframe {width:280px !important; width:100vw !important; height:72vw !important;}


#soaFooter {clear:both; zoom:1;}
#soaFooter .spec {color:#fff; width:100vw; margin:0 auto 10.25vw; background:rgba(0,0,0,0.4);  padding:6.25vw 3.125vw; padding-bottom:4.6825vw; position:relative; text-align: left;}
#soaFooter .spec .left{margin-bottom:6.75vw;}
#soaFooter .spec dl {font-size:3.125vw; line-height:5.6875vw; letter-spacing:0.2em; padding:0 0.2em; display:inline-block; float:none; }
#soaFooter .spec dl dt {font-weight:bold; float:left; background:#b3b3b3; width:24vw; text-align:center; color:#3f3f3f; margin-bottom:1.5625vw;}
#soaFooter .spec dl dd { float:left; text-align:left; margin-bottom:1.5625vw; padding-left: 3.125vw; width: 68vw;}
#soaFooter .spec .icon{ width:37vw;}
#soaFooter .spec .icon img{ width:36vw;}
#soaFooter .spec ul{ position:absolute; left:43vw; top:6.25vw;}
#soaFooter .spec ul li{padding-bottom:3.125vw;}
#soaFooter .spec ul li img{width:53vw;}
#soaFooter .spec .pc { display:none;}
	
	

.m30 {margin-top: 10vw;}

	
		
	.wallpaper-top{text-align: center; margin: 0 auto 7vw;}
	.wallpaper-top img{width: 96%;}
}


#modalContent div.mc:before{display:none;}

#soaContents .ie11btn{display: none;}
.ie11 #soaContents .twitter-widget {background: none; border: none; margin: 0;}
.ie11 #soaContents .twitter-widget::after,
.ie11 #soaContents .twitter-widget::before{display: none;}
.ie11 #soaContents .twitter-widget iframe{display: none;}
.ie11 #soaContents .ie11btn {display: inline-block !important; display: inline-block; transition: opacity 0.3s;}
.ie11 #soaContents .ie11btn:hover  {opacity: 0.7;}