@charset "utf-8";
@import url("reset.css");
@import url("perfect-scrollbar.min.css");

/*FIX用 CSSここから*/


/*--------------------------------------------------ページャー*/

.gg_pager {
    position: absolute;
    width: 266px;
    bottom: 37px;
    padding: 10px 10px 10px 38px;
}

.paginationjs {
    text-align: center;
}

.paginationjs-pages>ul>li>a {
    position: absolute;
    top: 14px;
    margin-left: -8px;
    font-size: 20px;
    color: white;
    text-decoration: none;
}

/*
.paginationjs-pages>ul>li>a:hover {
      color: black;
      background-color: white;
}
*/

td {
    border: 1px #000 solid;
    padding: 2px;
}


/*
.paginationjs-pages>ul>li.active {
  width: 20px;
  height: 20px;
  background-image: url(../img/footer/bg_pagerPage_active.png);
  background-size: 20px, 20px;
  background-repeat: no-repeat;
}
*/

.paginationjs-pages>ul>li.active>a {
    color: black;
}

.paginationjs-pages>ul>li.disabled>a {
    color: black;
}


/*前ページャー箇所*/

.paginationjs-prev {
    width: 40px;
    height: 40px;
    background-image: url(../img/footer/bg_pagerTran_L.png);
    background-size: 40px, 40px;
    background-repeat: no-repeat;
    margin: 0 6px 0 0;
    text-align: center;
}


/*次ページャー箇所*/

.paginationjs-next {
    width: 40px;
    height: 40px;
    background-image: url(../img/footer/bg_pagerTran_R.png);
    background-size: 40px, 40px;
    background-repeat: no-repeat;
    margin: 0 0 0 6px;
    text-align: center;
}


/*数字ページャー箇所*/


/*
.paginationjs-page {
  margin: 0 2px;
  width: 20px;
  height: 20px;
  background-image: url(../img/footer/bg_pagerPage.png);
  background-size: 20px, 20px;
  background-repeat: no-repeat;
  text-align: center;
}

.paginationjs-pages {
  text-align: center;
  align-items: baseline;
}
*/

.paginationjs-pages>ul {
    display: inline-flex;
    align-items: baseline;
}

.paginationjs-pages>ul>li.paginationjs-ellipsis.disabled>a {
    border: none;
    color: black;
    margin: 0 4px;
    padding: 0;
}


/*--------------------------------------------------メイン*/

.gg_contents {
    position: relative;
    width: 1280px;
    height: 630px;
    margin: 0 auto;
    font-weight: bold;
}

.gg_footer_contents {
    position: absolute;
    top: 640px;
    width: 1200px;
    height: auto;
}

.gg_guide_area {
    position: absolute;
    width: 1000px;
    height: 726px;
    font-weight: bold;
    text-align: center;
    background: url(../img/footer/window_frame.png) no-repeat;
}

.gg_original_scrollbar {
    position: relative;
    overflow: hidden;
}

img {
    user-select: none;
    vertical-align: bottom;
}


/*--------------------------------------------------バナー*/

.gg_banner {
    text-align: center;
}


/*--------------------------------------------------タブ*/

.gg_tab {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-box;
    box-pack: justify;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -o-box-pack: justify;
    -ms-box-pack: justify;
    padding: 34px 3px 12px 30px;
}

.gg_tab li {
    width: 200px;
    height: 66px;
    background-repeat: no-repeat;
}

.gg_tab li:nth-of-type(1) {
    width: 200px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -20px -6px;
    margin-left: 80px;
}

.gg_tab li:nth-of-type(1).gg_tab_selected {
    width: 200px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -20px -79px;
    margin-left: 80px;
}

.gg_tab li:nth-of-type(2) {
    width: 190px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -30px -153px;
}

.gg_tab li:nth-of-type(2).gg_tab_selected {
    width: 190px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -30px -227px;
}

.gg_tab li:nth-of-type(3) {
    width: 170px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -30px -301px;
}

.gg_tab li:nth-of-type(3).gg_tab_selected {
    width: 170px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -30px -375px;
}

.gg_tab li:nth-of-type(4) {
    width: 240px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -5px -449px;
    margin-right: 50px;
}

.gg_tab li:nth-of-type(4).gg_tab_selected {
    width: 240px;
    height: 66px;
    background: url("../img/footer/button_tab.png") -5px -523px;
    margin-right: 50px;
}


/*マウスオーバー*/

.gg_tab li:hover {
    cursor: pointer;
    opacity: 0.9;
}


/*--------------------------------------------------ツイッタータイムライン*/

.gg_timeline {
    position: absolute;
    right: 0;
    width: 280px;
    height: 710px;
    text-align: center;
}

.gg_timeline_bg {
    position: absolute;
    top:9px;
    width: 280px;
    height: 710px;
    background-image: url(../img/footer/timeline_bg.png);
}

.gg_timeline_wrapper {
    position: absolute;
    top: 45px;
    left: 5px;
    width: 270px;
    height: 640px;
    border-radius: 10px;
    overflow: hidden;
}

.gg_timeline a {
    display: inline-block;
    /*マウスオーバーの範囲*/
}


/*マウスオーバー*/

.gg_timeline a:hover {
    cursor: pointer;
    opacity: 0.8;
}


/*--------------------------------------------------フレーム*/

.gg_contents>li {
    width: 1000px;
    height: 588px;
}

.gg_wrapper {
    background-image: url(../img/footer/inner_window.png);
    background-repeat: no-repeat;
    height: 600px;
    width: 1000px;
}


/*見出し*/

.gg_contents h2 {
    padding-top: 4px;
}

.gg_contents h2 span {
    display: block;
    height: 40px;
}

.gg_contents li:nth-child(1) h2 span {
    background: url(../img/footer/header01.png) no-repeat;
}

.gg_contents li:nth-child(2) h2 span {
    background: url(../img/footer/header02.png) no-repeat;
}

.gg_contents li:nth-child(3) h2 span {
    background: url(../img/footer/header03.png) no-repeat;
}

.gg_contents li:nth-child(4) h2 span {
    text-align: center;
    background: url(../img/footer/header04.png) no-repeat;
}


/*--------------------------------------------------サイドメニュー*/

.gg_sidebar {
    /*スクロールバーの対象*/
    float: left;
    width: 274px;
    height: 490px;
    margin-top: 30px;
    margin-left: 38px;
    padding: 0px 12px 4px 0;
    text-align: left;
}

.gg_sidebar li {
    position: relative;
    border-bottom: 1px solid #0b0401;
    text-align: left;
}

.gg_sidebar span {
    display: block;
}

.gg_icon_news,
.gg_icon_maintenance,
.gg_icon_event,
.gg_icon_important,
.gg_icon_gacha {
    width: 131px;
    height: 35px;
}

.gg_icon_news {
    background: url(../img/footer/icon_news.png) no-repeat;
}

.gg_icon_maintenance {
    background: url(../img/footer/icon_maintenance.png) no-repeat;
}

.gg_icon_event {
    background: url(../img/footer/icon_event.png) no-repeat;
}

.gg_icon_important {
    background: url(../img/footer/icon_important.png) no-repeat;
}

.gg_icon_gacha {
    background: url(../img/footer/icon_gacha.png) no-repeat;
}

.gg_sidebar span:nth-child(2) {
    position: absolute;
    top: 0;
    right: -10px;
    width: 126px;
    height: 20px;
    font-size: 11px;
    color: #eee;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    text-shadow: #260e04 2px 0px, #260e04 -2px 0px, #260e04 0px -2px, #260e04 0px 2px, #260e04 2px 2px, #260e04 -2px 2px, #260e04 2px -2px, #260e04 -2px -2px, #260e04 1px 2px, #260e04 -1px 2px, #260e04 1px -2px, #260e04 -1px -2px, #260e04 2px 1px, #260e04 -2px 1px, #260e04 2px -1px, #260e04 -2px -1px;
    letter-spacing: 0.075em;
}

.gg_today_color {
    color: #ffee31 !important;
}

.gg_sidebar span:nth-child(3) {
    display: block;
    margin: 9px 0 9px 10px;
    font-size: 14px;
    color: #FFFFFF;
}

.gg_sidebar li:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.3);
}


/*--------------------------------------------------スクロールバー*/

.ps>.ps__scrollbar-y-rail {
    width: 10px;
    background-color: rgba(0, 0, 0, 0.6) !important;
    opacity: 1 !important;
}

.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
    background-color: rgb(0, 30, 197);
    opacity: 1;
}

.ps:hover>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y {
    width: 6px;
    background-color: rgb(39, 163, 234);
    opacity: 1;
}


/*--------------------------------------------------アコーディオン*/

ul.gg_accordion_menu {
    float: left;
    width: auto;
    height: 532px;
    margin: 33px 0 0px 37px;
    padding: 1px 12px 0px 4px;
    text-align: left;
    overflow: auto;
}

ul.gg_accordion_menu h4 {
    display: inline-block;
    width: 274px;
    height: 47px;
    background: url(../img/footer/sidemenu_base.png) no-repeat;
    background-size: 274px 47px;
    background-position: -4px 0;
    user-select: none;
}

ul.gg_accordion_menu h4 span {
    /*  padding-left: 64px;*/
    padding-left: 36px;
    font-size: 16px;
    color: #fff;
    text-shadow: #260e04 2px 0px, #260e04 -2px 0px, #260e04 0px -2px, #260e04 0px 2px, #260e04 2px 2px, #260e04 -2px 2px, #260e04 2px -2px, #260e04 -2px -2px, #260e04 1px 2px, #260e04 -1px 2px, #260e04 1px -2px, #260e04 -1px -2px, #260e04 2px 1px, #260e04 -2px 1px, #260e04 2px -1px, #260e04 -2px -1px;
    line-height: 47px;
    letter-spacing: 0.3em;
}

ul.gg_accordion_menu ul li span {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.073em;
    color: #97b6e4;
}

ul.gg_accordion_menu>li h4:hover {
    opacity: 0.8;
    cursor: pointer;
}

ul.gg_accordion_menu>li>ul>li {
    padding-left: 8px;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

ul.gg_accordion_menu>li>ul>li:first-child {
    margin-top: 8px;
}

ul.gg_accordion_menu>li>ul>li:last-child {
    margin-bottom: 8px;
}

ul.gg_accordion_menu>li>ul>li:hover {
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

ul.gg_accordion_menu h4 span .small_font_style {
    display: inline;
    padding-left: 0;
    font-size: 8px;
    line-height: 0;
}


/*--------------------------------------------------記事部分*/


/*全体*/

.gg_articles {
    width: 654px;
    height: 566px;
    margin-left: 238px;
    padding: 20px 0 0 12px;
    text-align: left;
    overflow: hidden;
}


/*見出し*/

.gg_articles h3 {
    width: 626px;
    height: 36px;
    text-align: center;
}

.gg_articles h3 span {
    font-size: 24px;
    color: #fff;
    line-height: 80px;
    text-shadow: #260e04 2px 0px, #260e04 -2px 0px, #260e04 0px -2px, #260e04 0px 2px, #260e04 2px 2px, #260e04 -2px 2px, #260e04 2px -2px, #260e04 -2px -2px, #260e04 1px 2px, #260e04 -1px 2px, #260e04 1px -2px, #260e04 -1px -2px, #260e04 2px 1px, #260e04 -2px 1px, #260e04 2px -1px, #260e04 -2px -1px;
    letter-spacing: 0.08em;
}


/*本文*/

.gg_articles .gg_original_scrollbar {
    /*スクロールバーの対象*/
    width: 620px;
    height: 506px;
    margin-top: 50px;
}

.gg_block {
    padding: 15px 30px 0px 25px;
    margin-bottom: 6px;
}

.gg_block li {
    font-size: 18px;
}


/*小見出し*/

.gg_articles h4 {
    margin-bottom: 4px;
    padding-left: 4px;
    height: 24px;
    border-left: 6px solid #F22020;
    font-size: 18px;
    color: #FFF;
    line-height: 26px;
}

.gg_articles h5 {
    height: 20px;
    font-size: 18px;
    color: #FFF;
}

.gg_articles p {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.073em;
    color: #FFF;
}

.gg_help_close {
    position: relative;
    width: 1000px;
    height: 588px;
    margin-top: 30px;
}

.gg_slide {
    position: relative;
    zoom: 80%;
    width: 1200px;
    height: 588px;
    margin-top: 24px;
}

.main_slide {
    right: 0;
    left: 0;
    margin: auto;
}

.sub_slide {
    width: 816px;
    right: 0;
    left: 0;
    margin: auto;
}

.slider img {
    width: 100%;
    vertical-align: bottom;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.appear {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes fadeIn {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.slider i.fas {
    color: rgba(25, 25, 25, 0.7);
    font-size: 2.5em;
    position: absolute;
    top: 50%;
    bottom: 50%;
}

.slider i.fa-arrow-circle-right {
    right: 2%;
}

.slider i.fa-arrow-circle-left {
    left: 2%;
}

.thumbnail ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.thumbnail ul li {
    margin: 10px 0;
    width: 23.5%;
    margin-right: 2%;
    cursor: pointer;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}

.thumbnail ul li:nth-child(4n) {
    margin-right: 0;
}

.thumbnail ul li:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.thumbnail ul li.selected {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.thumbnail ul li img {
    width: 100%;
}


/*FIX用 CSSここまで*/