@charset "UTF-8";

/* html,body */
html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
body { margin: 0 auto; padding: 0; height: 100%; background: url(/img/common/bg-main.jpg) center top repeat #000; color: #fff; font: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; *font-size:small;*font:x-small; text-align: center; word-break: break-all; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: 13px;}

/* link- */
a { outline: none; color:#999; text-decoration: none; opacity:1; transition:all 0.3s; }
a:hover { color:#999; opacity:0.5; transition:all 0.3s; }
a:focus { outline:none; }
.link-auto:after{ content:" "; display:inline-block; width:14px; height:12px; background:url(/img/common/icon-newwindow.png) 2px 0 no-repeat;vertical-align:top;}
.hidden{ text-indent:100%; white-space:nowrap; overflow:hidden; font-size: 0; height:0;}

.btn-link a{ position: relative; padding: .6em 3em; border:1px solid #fff;  color:#fff; letter-spacing: .3em;}
.btn-link a::after {border-right: 2px solid #fff;border-top: 2px solid #fff;content: "";display: block;height: 8px; margin: -4px 0 0;position: absolute;right: 10px;top: 45%; transform: rotate(45deg); width: 8px;}

/*- IMG  */
img { border:none; -ms-interpolation-mode: bicubic; vertical-align: top; font-size:0; line-height: 0;}
a img { border: 0; text-decoration:none; }
.float-r { float: right; margin: 8px 0 0 8px; }
.float-l { float: left; margin: 8px 8px 0 0; }

/*font*/
#global-nav,.sub-tit,.sub-tit-icon,.page-tit,.staffcast-area h3, .new,.share-buttons,.next,.prev, .signup-area dt,.role, .back-btn,.tab-items{ font-family: 'Oswald', sans-serif; letter-spacing: .2em !important;}
.intro-area,.band-area .member, .band-area .text-about, .btn-buy{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased;}
em { color: #3cc;}
.center { text-align: center;}
.red { color: #a7122e; }
.gray { color: #999; }
.yellow { color: #F89406; }
.font-sn14 { font-size: 14px !important; }
.bold,b { font-weight: bold !important; }

/* highlight */
::selection { background: #666; }
::-moz-selection { background: #666; }

/* z-index */
#overlay { z-index: 9999;}
#global-nav, header .share-buttons { z-index: 1000;}
#logo, .index-catch { z-index: 100;}
.key-list { z-index: 10;}
#wrap { z-index: 10;}

/* castam */
#overlay { position: fixed; width: 100%; height: 100%; text-align: center; z-index: 9999; background: url(/img/common/bg-main.jpg) center top repeat #101010;}

.apli-list li{ display: inline-block; margin: 0 4px; }

#wrap{ margin: 0 auto; padding: 0; line-height: 1.4em;}
.contents { position: relative; margin: 0 auto; width: 1000px; text-align: left;}
#global-nav { position: relative; margin: 0 auto; padding-top: 18px; width: 1000px; height: 72px; letter-spacing: .1em; font-size: 14px; overflow: hidden;}
  #header-logo{ float: left;}
  #index-area #global-nav #header-logo{ display: none;}
  #global-nav ul{ float: right; margin: 0 auto; width: 600px; display: table; color: #999; text-align: right;}
  #global-nav li{ height: 32px; position: relative; display: inline-block; margin: 0 10px;}
  #global-nav li a{ color: #fff; position: relative; display: inline-block; transition: .3s;}
  #global-nav li a:hover{ opacity: 1 !important; }
  #global-nav li a::before { position: absolute; left: 50%; content: ''; width: 0; height: 1px; background-color: #666; transition: .3s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
  #index-area #global-nav li a::before { background-color: #ccc;}
  #global-nav li a::before { top: -4px;}
  #global-nav li a:hover::before, #global-nav li a:hover::after {width: 100%; }
  #global-nav .point{ position: absolute; top: 0px; right: -18px; content:" "; display:inline-block; width:20px; height:18px; background:url(/img/common/icon-thunder.png); background-size:contain; vertical-align:middle;}

.twitter-area, .game-spec,.signup-area dd { display: block; padding: 10px 20px; background: url(/img/common/bg-darkgray.gif); border: 1px solid #000; -moz-box-shadow: 0px 0px 3px #000; -webkit-box-shadow: 0px 0px 3px #000; }
.block1 { display: inline-block; margin-right: 10px; width: 320px; vertical-align: top;}
.block2 { display: inline-block; margin-right: 10px; width: 486px; vertical-align: top;}
.block3 { display: inline-block; margin-right: 10px; width: 653px; vertical-align: top;}
.block4 { display: inline-block; margin-right: 10px; width: 245px; vertical-align: top;}

/* title */
.sub-tit{ margin: 0 auto 8px; padding: 0; font-size: 18px; letter-spacing: .1em; text-shadow: 0px 0px 3px #000;}
.sub-tit-icon{ margin: 0 auto 8px; padding: 0; font-size: 18px; letter-spacing: .1em; text-shadow: 0px 0px 3px #000;}
  /*.sub-tit-icon:before{ margin-right: 4px; content:" "; display:inline-block; width:18px; height:18px; background:url(/img/common/icon-symbol.png); background-size:contain; vertical-align:middle; }*/
.color-line { width: 100%; animation: bg-color 30s ease 1s infinite forwards; height: 1px;}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
.page-tit { margin: 80px auto; padding: 0; font-size: 56px; letter-spacing: .1em; }

.balloon-tit { position: relative; padding-bottom: .8em;}
  .balloon-tit::before,.balloon-tit::after { position: absolute; bottom: -2px; left: 0; content: ''; height: 2px;}
.balloon-tit::before { z-index: 2; width: 2%; background-color: #ccc;}
.balloon-tit::after { width: 100%; background: -webkit-repeating-linear-gradient(45deg, #666, #666 2px, #333 2px, #333 4px); background: repeating-linear-gradient(45deg, #666, #666 2px, #333 2px, #333 4px);
}
.thumb-btn { position: relative; margin-bottom: 16px; min-height: 160px;}
  .thumb-btn a { position: absolute; top:0; left: 0; display: block; z-index: 2; }
  .thumb-btn p{ position: absolute; top:40%; left: 12%;  z-index: 5; text-align: center; font-weight: bold; font-size: 22px; line-height: 1em}
  .thumb-btn img{ position: relative;}

/*form*/
form { font-size: 18px; }
textarea { overflow: auto;}
input,select{ margin: 4px 8px 16px 0; padding: 5px; font-size: 18px; border:0; border:solid 1px #ccc; width:400px;}
input:focus, select:focus{ border:solid 1px #ffcc00;}
.judge-btn,.dowmload-list li, input[type="submit"], .contact-btn-list li { margin: 30px auto 0; padding: 15px 20px; border:1px solid #ccc;  background: url(/img/common/bg-btn.gif); color: #fff; font-size: 20px; font-weight: bold; -webkit-appearance: none; width: 410px; cursor: pointer;}
  .judge-btn:hover,.dowmload-list li:hover, input[type="submit"]:hover, .contact-btn-list li:hover { border:1px solid #fff; background: #666; color: #000; opacity: 1;}
.attention-text{ margin-bottom: 32px; }
  .attention-text li{ font-size: 14px; line-height: 1.4em; color: #999; margin-bottom: 3px;}
  .attention-text li:before {content:"※";}
.sample-img { margin: 20px auto;}


/* footer */
footer { position: relative; margin-top: -2px !important; background: #000; font-size: 12px; font-size: 1.2rem; color: #fff; }
  footer a{ color: #ff9900;}
  footer .contents{ padding: 60px 0; overflow: hidden; text-align: center;}
  .official-link { margin: 4rem auto; padding-right: 4rem;}
  #pageTop { clear: both; margin: 0; padding: 0; text-align: center; }
  #pageTop a:hover { opacity:1; }
  
.site-info{ margin-top: 50px; font-size: 12px; text-align: center;}
  .txt-copyright{ margin: 16px auto 0; }

/* share-buttons */
.share-buttons{ margin: 0 auto; display: table; border-collapse: separate; border-spacing: 24px 0; color: #999; font-size: 12px; }
  .share-buttons li{ display: table-cell; vertical-align: middle; }
.share-buttons-text { margin: 40px auto;}
.share-buttons-text li { display: inline-block;}
/*header { position: relative; }
  header .share-buttons{ position: absolute; top: 8px; right: 8px; border-collapse: separate; border-spacing: 4px 0 !important; font-size: 11px;}*/
.menu-share { vertical-align: middle;}
.menu-share a::before{ display: none !important; }

.facebook-btn a, .twitter-btn a, .line-btn a{ margin: 10px; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;  color: #fff;}
.facebook-btn a{ background: #3b5998;}
  .facebook-btn a:hover{ animation: gradation-fc 1s; background-color: #41d5ff; }
    @keyframes gradation-fc { 0% { background-color: #3b5998; } 100% { background-color: #41d5ff; } }
.twitter-btn a{ background: #6cadde;}
  .twitter-btn a:hover{ animation: gradation-tw 1s; background-color: #9fbaff; }
    @keyframes gradation-tw { 0% { background-color: #6cadde; } 100% { background-color: #9fbaff; } }
.line-btn a{ background: #00c300;}
  .line-btn a:hover{ animation: gradation-line 1s; background-color: #2adc93; }
    @keyframes gradation-line { 0% { background-color: #00c300; } 100% { background-color: #2adc93; } }

/* animation*/
@-webkit-keyframes slidein-l {
    from { margin-left: -100%; width: 300% }
    to { margin-left: 0%; width: 100%; }
}
@keyframes slidein-l {
    from { margin-left: -100%; width: 300% }
    to { margin-left: 0%; width: 100%; }
}
@-webkit-keyframes slidein-r {
    from { margin-right: 100%; width: 300% }
    to { margin-right: 0%; width: 100%; }
}
@keyframes slidein-r {
    from { margin-right: 100%; width: 300% }
    to { margin-right: 0%; width: 100%; }
}


/* GDN */
iframe[name="google_conversion_frame"] {
	position: absolute;
	height: 0;
}