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

/* common */
html{
    font-size: medium;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

/* border sizing : border box */
/* bootstrap default setting */
*,*::before,*::after,
.borderbox {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* basic */
.flt-dropshadow {
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.flt-innershadow {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) inset;
}
.bg-fixed {
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
    background-position: center center;
    -webkit-background-position: center center;
    background-size: cover;
    -webkit-background-size:cover;/*Android4*/
}
.bg-stretch {
    background-repeat: round;
    background-position: center center;
    background-size:100% 100%;
}
.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-xtile {
    background-repeat: repeat-x;
    background-size: auto,100%;
    background-position: center top;
}
.bg-ytile {
    background-repeat: repeat-y;
    background-size: 100%,auto;
    background-position: center top;
}
.bg-tile {
    background-repeat: repeat , repeat;
    background-size: auto,auto;
    background-position: center top;
}
.bg-center {
    background-position: center center; 
    background-repeat: no-repeat;   
    background-size: auto,auto;
}
.pos-fix {
    position: fixed;
}
.pos-rel{
    position: relative;
}
.pos-abs
{
    position: absolute;
}
.pos-zero{
    left : 0%;
    top : 0%;
}
.pos-left {
    left : 0%;
    right : auto;
}
.pos-right {
    left : auto;
    right : 0%;
}
.pos-top {
    top : 0%;
    bottom : auto;
}
.pos-bottom {
    top : auto;
    bottom : 0%;
}
.pos-all {
    top:0%;
    left:0%;
    right:0%;
    bottom:0%;
}
.size-zero {
    width : 0%;
    height : 0%;
}
.size-all {
    width : 100%;
    height : 100%;
}
.pos-centerx,
.margin-centerx {
    left : auto;
    right : auto;
    margin-left: auto;
    margin-right: auto;
}
.pos-centery,
.margin-centery {
    top : 0;
    bottom : 0;
    margin-top: auto;
    margin-bottom: auto;
}
.block-centerx {
    display : block;
    left : auto;
    right : auto;
    margin-left: auto;
    margin-right: auto;
}
.block-centery {
    display : block;
    top : 0;
    bottom : 0;
    margin-top: auto;
    margin-bottom: auto;
}

.nomargin {
    padding: 0px;
    margin: 0px;
}
.offsetmargin {
    overflow: hidden;
}
.cont-center {
    text-align: center;
}
.cont-left {
    text-align: left;
}
.cont-right {
    text-align: right; 
}
.clear {
    clear: both !important;
}

.align-left {
    transform: translateX(0%)
}
.align-right {
    transform: translateX(-100%)
}
.align-top {
    transform: translateY(0%)
}
.align-bottom {
    transform: translateY(-100%)
}
.align-centerx {
    transform: translateX(-50%);
}
.align-centery {
    transform: translateY(-50%)
}
.align-centerxy {
    transform: translate(-50%,-50%)
}

.list-none {
    list-style: none;
    padding-left: 0;    
}
.list-dot {
    list-style: disc;
    padding-left: 1em;
}
.event-pass {
    pointer-events: none;
}
.event-catch {
    pointer-events: auto;
}

/* anim */
.anim-out a,
.anim-out img,
.anim-out div{
    outline: none;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
.anim-in a,
.anim-in img,
.anim-in div{
    outline: none;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
}

.anim a,
.anim img,
.anim div{
    outline: none;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}


/* common */

/* text */

.text-shadow-dark{
    text-shadow: 0px 0px 10px rgba(14,42,69,1.00),0px 0px 10px rgba(14,42,69,1.00),0px 0px 10px rgba(14,42,69,1.00);
}
.text-shadow-light{
    text-shadow: 0px 0px 10px rgba(255,255,255,1.0) , 0px 0px 10px rgba(255,255,255,1.0);
}

a:link{
    color: #FF35D9;
    text-decoration:none;
}

.text-default {
    color: rgba(255,204,122,1.00);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: normal;
    font-size: 1.2em;
    text-decoration: none;
}

.text-black{
    color: rgba(15,51,74,1.00);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
}

.text-topic,
a.text-topic:link{
    color: #FF0057;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: bold;
    font-size: 2em;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    margin:0
}

/* frame */
div.frame-twitter{
    background-image: url("top/twitter_back.png");
    background-size: cover;
    padding:20px;
    width:100%; 
    height:600px; 
    display:inline-block; 
    position:relative;   
}

.frame-topic{
    text-align: center;
    background-color: rgba(58,46,27,1.00);
    margin-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    -webkit-box-shadow: inset 0px 0px 38px rgba(46,5,5,1.00);
    box-shadow: inset 0px 0px 38px rgba(46,5,5,1.00);
    border: 1px solid rgba(87,66,23,1.00);
}

/* line image */
.lineimage{
    background-image: url("top/slideimage01.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width : 100%;
    height : 150px;
    -webkit-box-shadow: inset 0px 15px 60px rgba(37,57,82,1.00);
    box-shadow: inset 0px 15px 60px rgba(37,57,82,1.00);
}

/* footer */
div.footer {
	background-color: rgba(133, 0, 0, 0.744);
	color: rgba(215,201,179,1.00);
	text-align: center;
	padding : 40px;
	padding-top: 100px;
	padding-bottom: 100px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5em;
}



/* button */
.button-image{
    outline : none;
    background-color: rgba(0,0,0,0.00);
    border : none;
}
.button-common{
    transform: scale(1.00,1.00);
    filter : brightness(100%);
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}
/*.button-common:active img,
.button-common:focus,*/
.button-common:hover{
    transform: scale(1.05,1.05);
    filter : brightness(120%);
}
.button-common:hover,
.button-common:active,
.button-common:focus{
    outline : none;
}

/* scroll top button */
.scrolltopbutton{
    outline : none;
    background-color: rgba(0,0,0,0.00);
    border : none;
    position : fixed;
    left : auto;
    top : auto;
    right : 30px;
    bottom : 20px;
    z-index : 500;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    opacity: 0.75;
    transform: scale(1.00,1.00);
    filter : brightness(100%);
}

.scrolltopbutton[data-visible="hide"]:hover,
.scrolltopbutton[data-visible="hide"]{
    transition-duration: 0.2s;
    bottom : -20px;
    opacity: 0.0;
}
.scrolltopbutton[data-visible="show"]{
    transition-duration: 0.2s;
    bottom : 20px;
    opacity: 0.75;
}

.scrolltopbutton:hover,
.scrolltopbutton[data-visible="show"]:hover{
    transition-duration: 0.2s;
    bottom : 20px;
    opacity: 1.0;
    transform: scale(1.05,1.05);
    filter : brightness(120%);
}

/* popup */
.popup {
    position: absolute;
    z-index: 10;
    overflow:visible;
}

.popup-title {
    font-size: 1.5em;
    text-align: center;
    display        : inline-block;
    color          : #95FF95;                    
    text-shadow    : 
       2px  2px 5px #990000,
      -2px  2px 5px #990000,
       2px -2px 5px #990000,
      -2px -2px 5px #990000,
       2px  0px 5px #990000,
       0px  2px 5px #990000,
      -2px  0px 5px #990000,
       0px -2px 5px #990000;
}
.popup-text {
    font-size : 1.2em;
    text-align: center;
    display: inline-block;
    color : white;
    text-shadow    : 
        -1px  0px 5px #000000,
        1px  0px 5px #000000,
        0px  -1px 5px #000000,
        0px  1px 5px #000000,
        0px  0px 5px #000000;
}

/* loading */

div.loading {
    position:fixed; 
    top:0%;
    left:-100%;
    width:300%;
    height:100%;
    background-color: rgba(0,0,0,1.00);
    z-index:5000;
}

div.loading[data-visible="start"]{
    top:0%;
}
div.loading[data-visible="end"]{
    animation-fill-mode: both;
    animation-name: loadingend;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
div.loading[data-visible="jump"]{
    animation-fill-mode: both;
    animation-name: loadingjump;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes loadingend{
    0% { top:0% }
    100% { top:-100% }
}

@keyframes loadingjump{
    0% { top:100% }
    100% { top:0% }
}

.spacer{
    height : 50px;
    padding: 0px;
    margin: 0px;
}

/*
    拡張、ページ固有
*/
.common-body{
	margin-left: auto;
	margin-right: auto;
    padding-top: 0px;
    min-width: 1280px;
    max-width: 1600px;
    text-align: center;
    background-color: rgba(50,50,50,1.00);
}

.common-container{
    background-color: white;
    background-image: url(common/bg.jpg);
    background-position: 50% 50%;
    background-attachment: fixed;
	background-size: cover;
    padding: 0px;
	overflow: hidden;
}

.section-base{
    width: 100%; 
    text-align: center;
    padding-top: 0px;
    padding-bottom: 30px;
}
.section-caption{
    font-size: 3.5em;
    padding-top: 20px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 20px;
    color : white;
    font-weight: bold;
    font-family: "Arial Black", Gadget, "sans-serif";
}
.section-captionback{
    position: relative; 
    width: 100%; 
    background-image: url("common/section.png");  
    background-size: cover;
	margin-top: 40px;
	margin-bottom: 40px;
}

.topic-frame{
    width: 90%;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    border-radius: 32px;
    background-color: #4b2336;
    height: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 20px;
    color: #dddddd;
    font-size: 1.4em;
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.70);
    box-shadow: 0px 0px 20px rgba(0,0,0,0.70);
}

.topic-frame h2{
    font-size: 1.2em;
	color : #ffffff;
	background-color: #c72525;
	padding-top: 10px;
	padding-bottom: 10px;
}

.topic-frame h3{
	color : rgb(218, 195, 23);
    padding:5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.topic-frame-textarea{
	padding-left: 20px;
	padding-right: 20px;
}

.topic-icon-text{
	font-size: 1.6em;
	color : rgb(255, 255, 255);
    font-weight: bold;
    font-family: "Arial Black", Gadget, "sans-serif";
}

em{
	color: rgb(233, 255, 67);
	font-weight: bold;
	padding : 5px;
	font-style: normal;	
}

/* mouse hover hidden */
.hidden-hover{
	opacity: 100%;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
.hidden-hover:hover{
	opacity: 0%;
}

/* scroll image */
.scroll-imageline{
    position : absolute;
	overflow-x: hidden;
	background-repeat: repeat-x;
    background-size: 100% auto;
	animation-iteration-count : infinite;
	animation-fill-mode: both;
	animation-name: animation-scroll;
	animation-duration: 240s;
    animation-timing-function: linear;
}

/* use pixel only.  */
@keyframes animation-scroll{
    0% { background-position: 0px 0px }
    50% { background-position: 2500px 0px  }
    0% { background-position: 0px 0px  }
}

/* item list table*/
.item-list-table{
	display: flex; 
    flex-wrap: wrap; 
}
.item-list-table dt{
	width: 200px;
	margin: 0px;
}
.item-list-table dd{
	width: calc(100% - 200px);
	margin: 0px;
}

/* page top space */
.page-top-space {
    background-color: rgba(128, 0, 0, 0.6);
}


/* special */
.special-image{
	width:75%;
    border-radius: 20px;
}

/* game */
.game-logo{
    position: absolute;
    width:100%;
    height:100px;
    left:0px;
    bottom:0px;
    z-index: 2;
    padding:5px;
    background-color: rgba(255, 255, 255, 0.6);
}
.game-frame{

}
.game-frame{
    position: relative;
    width: 450px;
    margin : 20px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    border-radius: 32px;
    border: 0px solid #000000;
    background-color: rgba(255,255,255,0.8);
    height: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    color: #333333;
    font-size: 1.4em;
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.70);
    box-shadow: 0px 0px 20px rgba(0,0,0,0.70);
}
.game-frame h2{
    font-size: 1.2em;
	color : rgba(255,255,255,1.00);
	background-color: rgba(208,34,66,1.00);
	padding-top: 10px;
	padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}