@charset "utf-8";
/* ----------------------------------------------
	Base
---------------------------------------------- */
html {
    font-size: 62.5%;
}
body {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
    background-color: #000;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    touch-callout: none;
    user-select: none;
    touch-action: manipulation; /*ダブルタップによるパンやズーム無効*/
}
html, body {
    height: 100%;
    position: relative;
}
img {
    width: 100%;
    height: auto;
}
img.csImg {
    opacity: 0.8;
}
img.opImg:hover {
    opacity: 0.7;
}
@media (max-width:992px) {
    img.opImg:hover {
        opacity: 1;
    }
}
/* ----------------------------------------------
	a
---------------------------------------------- */
a {
    color: #333;
}
a:hover {
    color: #333;
}
.content__sp {
    display: none;
}
@media (max-width:992px) {
    .content__pc {
        display: none;
    }
    .content__sp {
        display: block;
    }
}
/* ----------------------------------------------
  load
---------------------------------------------- */
.loading {
    width: 100%;
    height: 100%;
    transition: all 1s;
    background-color: #000;
    position: fixed;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}
.loading.is-active {
    opacity: 0;
    visibility: hidden;
}
.loading-animation {
    width: 100%;
    height: 100%;
    transition: all 1s;
    background: url("../img/top/load_bg.jpg") center center no-repeat #000;
    background-size: cover;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}
.loading-animation.is-active {
    opacity: 1;
    visibility: visible;
}
#l_box {
    position: absolute;
    left: 50.5%;
    top: 50.5%;
    width: 44.79%;
    transform: translate(-50%, -50%);
    /*top: 0;
	left: 0;
	transform: translate(0,0);
    opacity: 0.0;
	width: 100%;*/
}
.loading-copyright {
    position: absolute;
    bottom: 0;
    right: 1vw;
    width: 35%;
}
@media (max-width:992px) {
    .loading-animation {
        width: 100%;
        height: 100%;
        transition: all 1s;
        background: url("../img/top/load_bg_sp.jpg") center center no-repeat #000;
        background-size: cover;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
    }
    #l_box {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 69.46%;
        transform: translate(-50%, -50%);
    }
    .loading-copyright {
        right: 3%;
        width: 94%;
    }
}
/*
.loading.is-active {
	opacity: 1;
	visibility: visible;
}
.loading-animation {
	opacity: 1;
	visibility: visible;
}
#l_box {
	opacity: 1;
}
*/
/* ----------------------------------------------
	Page Layout
---------------------------------------------- */
#document {
    position: relative;
    overflow: hidden;
    width: 100%;
    /*display: none;*/
    display: block;
    opacity: 0;
}
.pc_view.pc_view_true #document {
    opacity: 1;
    transition: all 2s ease;
}
.sp_view #document {
    display: block;
    opacity: 1;
}
#document.article {
    display: block;
}
@media (max-width:992px) {
    #document {
        display: block;
        min-width: inherit;
        min-width: initial;
    }
}
.atari, #atari_sp {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}
/* ----------------------------------------------
	mainNav
---------------------------------------------- */
#to_header_base {
    position: absolute;
    z-index: -10;
}
#mainNav {
    position: fixed;
    left: 0px;
    top: 0%;
    /*background: url("../img/top/to_header_base.png");*/
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    /*メニューアンカーの位置調整*/
    height: 8.0vw;
    margin-top: 0%;
}
#mainNavInr {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#mainNav #header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    width: 71%;
}
#mainNav #header #headerLogo {
    position: absolute;
    width: 16.92%;
    left: 1.35%;
    top: 10%;
}
#mainNav #header #to_logo_base {
    position: absolute;
    width: 21.1%;
    left: 0%;
    top: 0%;
}
#mainNav .to_menu_new1 {
    position: absolute;
    width: 4.427%;
    left: 25.0%;
    top: 1.77vw;
}
#mainNav .to_menu_new2 {
    position: absolute;
    width: 4.427%;
    left: 38.7%;
    top: 1.77vw;
}
#mainNav .to_menu_new3 {
    position: absolute;
    width: 4.427%;
    left: 53.6%;
    top: 1.77vw;
}
#mainNav .to_menu_new4 {
    position: absolute;
    width: 4.427%;
    left: 65.2%;
    top: 1.77vw;
}
@media (max-width:992px) {
    #mainNav {
        /*メニューアンカーの位置調整*/
        /*height: 14vw;仕切り分のマイナス*/
        height: 7.5vw;
    }
    #to_header_base_sp {
        position: absolute;
        z-index: -10;
    }
    #mainNavInr {
        -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
        align-items: flex-start;
    }
    #mainNav #header {
        height: 100%;
        width: 100%;
    }
    #mainNav #header #headerLogo {
        width: 25.33%;
        top: 8%;
        left: 2%;
    }
    #mainNav #header #to_logo_base_sp {
        position: absolute;
        width: 24%;
        top: 0;
        left: 0;
    }
}
/* ----------------------------------------------
	gnav
---------------------------------------------- */
#mainNav #headerGnav {
    position: absolute;
    /*display: -webkit-box; 
    display: -ms-flexbox; 
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;*/
    width: 100%;
    height: 8vw;
    /*left: 25.364%;
    top: 0vw;*/
}
#to_menu1, #to_menu2 {
    height: auto;
    position: absolute;
    /*bottom: 18%;*/
}
#to_menu1 {
    width: 18.38%;
    top: 0;
    left: 26.40%;
}
#to_menu2 {
    width: 26.82%;
    top: 0;
    left: 46.56%;
}
#mainNav #headerGnav li:nth-of-type(n+2) {
    opacity: 0;
}
#mainNav #header #headerMenu {
    display: none;
}
@media (max-width:992px) {
    #mainNav #header #headerGnav {
        display: none;
    }
    #mainNav #header #headerMenu {
        display: block;
        width: 11%;
        position: absolute;
        left: 86.93%;
        top: 0.8vw;
    }
}
/* ----------------------------------------------
	btnSnsWrap,companyBtn
---------------------------------------------- */
#btnSnsWrap {
    position: absolute;
    width: 13.95%;
    left: 75.72%;
    top: 1.2vw;
}
#btnSnsWrap .btnSns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
#btnSnsWrap .btnSns li {
    width: calc(100% / 3 - 3.5%);
    margin-right: 3%;
}
#btnSnsWrap .btnSns li:last-of-type {
    margin-right: 0;
}
#btnSnsWrap .btnSns li a {
    /*box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);*/
    display: block;
}
#btnSnsWrap .btnSns li a img {
    height: auto;
    width: 100%;
}
#btnSnsWrap .btnSns li a:hover img {
    box-shadow: 0px 0px 5px 3px rgba(253, 239, 120, 1), 0px 0px 5px 3px rgba(253, 239, 120, 0);
}
.companyBtn {
    position: absolute;
    width: 5.98%;
    left: 92%;
    top: 1.8vw;
}
.companyBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.companyBtn a {
    width: 100%;
    display: block;
}
.companyBtn .logoDaito {
    padding-top: 5px;
}
.companyBtn ul li img {
    height: auto;
    pointer-events: none;
    width: 100%;
}
@media (max-width:992px) {
    #btnSnsWrap {
        width: 22.4%;
        left: 46%;
        /*left: 35.2%;*/
        top: 2vw;
        height: auto;
    }
    #btnSnsWrap .btnSns li {
        width: calc(100% / 3 - 3%);
    }
    #btnSnsWrap .btnSns li a {
        box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
    }
    #btnSnsWrap .btnSns li img {
        pointer-events: none;
    }
    .companyBtn {
        width: 11.6%;
        left: 72%;
        top: 2.0vw;
        height: auto;
    }
    /*.companyBtn {
        width: 25%;
        left: 60%;
        top: 1.5vw;
        height: auto;
    }*/
    .companyBtn .logoPaondp {
        margin-right: 8%;
        margin-left: 3%;
        width: 38%;
    }
    .companyBtn ul {
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
    }
    .companyBtn ul li img {
        pointer-events: none;
    }
}
/* ----------------------------------------------
	areaMain/top
---------------------------------------------- */
#areaMain {
    position: relative;
    width: 100%;
}
#areaMain #sectionTop {
    position: relative;
}
#areaMain .sectionContents {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: url("../img/top/to_main.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    height: 60.83vw; /* 1920/1168 */
}
#to_chara {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 0%;
    z-index: 10;
}
@media (max-width:992px) {
    #areaMain .sectionContents {
        background: none;
        height: auto;
    }
}
/*スマホトップサイズ*/
/*750×1301*/
#to_word1 {
    position: absolute;
    width: 3.28%;
    left: 3.85%;
    top: 19.349%;
}
#to_bnr_link {
    position: absolute;
    width: 30.364%;
    left: 69.01%;
    top: 72.688%;
    z-index: 30;
}
@media (max-width:992px) {
    #to_bnr_link {
        position: absolute;
        width: 91.733%;
        left: 3.6%;
        top: 82.321%;
    }
}
/* ----------------------------------------------
	mainNews
---------------------------------------------- */
#mainNews {
    background: url("../img/top/to_news.png");
    background-size: 100% auto;
    position: absolute;
    /*z-index: 1;*/
    left: 1%;
    top: 21.6%;
    width: 35.8%;
    height: 7.5vw;
    background-repeat: no-repeat;
    z-index: 11;
}
#mainNews .newsTxt {
    position: relative;
    width: 95%;
    height: 100%;
    left: 0;
    overflow: hidden;
}
#mainNews .newsTxt p {
    white-space: nowrap;
    font-size: 1.1vw;
    font-weight: 700;
    color: #fff;
    position: absolute;
    left: 12%;
    top: 75%;
    transform: translateY(-50%);
    /*text-align: center;
  text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;*/
}
#mainNews .newsTxt p .date {
    margin-right: 0.5em;
}
#mainNews .newsTxt p a {
    color: #f6f662;
}
#mainNews .newsTxt p a:hover {
    color: #f60000;
}
@media (max-width:992px) {
    #mainNews {
        background: url("../img/top/to_news_sp.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 107.46%;
        height: 10vw;
        left: 6%;
        top: 55%;
    }
    #mainNews .newsTxt {
        position: relative;
        width: 64%;
        height: 100%;
        top: -19%;
        left: 19%;
        overflow: hidden;
    }
    #mainNews .newsTxt p {
        font-size: 2.4vw;
        left: 0%;
        top: 76%;
    }
}
/* ----------------------------------------------
	slider
---------------------------------------------- */
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 24.583%;
    position: absolute;
    left: 72.187%;
    top: 21.147%;
    z-index: 20;
}
.slider a {
    cursor: pointer;
}
.slider img {
    width: 24.7vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
    height: auto;
    z-index: -10;
}
.slider .slick-slide {
    transform: scale(1.0); /*左右の画像のサイズを80%に*/
    transition: all .5s; /*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0.0; /*透過50%*/
}
.slider .slick-slide.slick-center {
    transform: scale(1); /*中央の画像のサイズだけ等倍に*/
    opacity: 1; /*透過なし*/
}
.slick-prev {
    background-image: url("../img/common/top_arr01_pc_off.png?success-before"), url("../img/common/top_arr01_pc_on.png?success-after");
    background-size: contain, 0 0;
    &::before, &::after {
        content: "";
        /*要素にbefore及びafterが指定されている*/
    }
    &:hover {
        background-size: 0 0, contain;
    }
    background-repeat: no-repeat;
    position: absolute; /*絶対配置にする*/
    cursor: pointer; /*マウスカーソルを指マークに*/
    width: 19.5%;
    height: 16.0%;
    left: -1.5%;
    top: 42.7%;
    z-index: 10;
}
.slick-next {
    background-image: url("../img/common/top_arr02_pc_off.png?success-before"), url("../img/common/top_arr02_pc_on.png?success-after");
    background-size: contain, 0 0;
    &::before, &::after {
        content: "";
        /*要素にbefore及びafterが指定されている*/
    }
    &:hover {
        background-size: 0 0, contain;
    }
    background-repeat: no-repeat;
    position: absolute; /*絶対配置にする*/
    cursor: pointer; /*マウスカーソルを指マークに*/
    width: 19.5%;
    height: 16.0%;
    right: -1.5%;
    top: 42.7%;
    z-index: 10;
}
.slick-dots {
    display: none !important;
    text-align: center;
    margin: 20px 0 0 0;
}
.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px; /*ドットボタンのサイズ*/
    height: 8px; /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #ccc; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
    background: #333; /*ドットボタンの現在地表示の色*/
}
/*スマホ_slider*/
@media (max-width:992px) {
    .slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
        width: 77.066%;
        position: absolute;
        left: 12.4%;
        top: 54.419%;
        z-index: 20;
    }
    .slider a {
        cursor: pointer;
    }
    .slider img {
        width: 77.3vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
        height: auto;
        z-index: -10;
    }
    .slick-prev {
        width: 19.0%;
        height: 25.0%;
        left: -4.5%;
        top: 34.7%;
        z-index: 10;
    }
    .slick-next {
        width: 19.0%;
        height: 25.0%;
        right: -4.5%;
        top: 34.7%;
        z-index: 10;
    }
}
/* ----------------------------------------------
	top_footer/footer
---------------------------------------------- */
#top_footer, #footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7.447vw;
    box-sizing: border-box;
    background-image: url("../img/common/to_footer_base.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    /*padding-top: 0.28%;*/
    z-index: 20;
}
#top_footer.active {
    display: none;
}
#top_footerInr, #footerInr {
    position: relative;
    width: auto;
    overflow: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    /*padding: 0 0.76% 0 1.39%;*/
    top: 1.0vw;
}
/*indexBanner*/
.indexBanner {
    position: absolute;
    /*display: -webkit-box; 
    display: -ms-flexbox; 
	display: flex;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;*/
    left: 74.11%;
    top: 2.2vw;
    width: 25.41%;
}
/*storeBlk*/
.indexBanner .storeBlk {
    position: relative;
}
.indexBanner .storeBlk .ttl {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}
.indexBanner .storeBlk select {
    position: absolute;
    top: 0;
    left: 42%;
    width: 29.0%;
    height: 36.62%;
    padding: 0 0 0 1.99%;
    margin-top: 3.8%;
    border-radius: 2px;
    border: none;
    outline: none;
    outline-offset: 0;
    font-size: 0.9vw;
    font-weight: 600;
    color: #000;
    background-color: #fff;
    background-image: url("../img/common/store_arw.png");
    background-position: 89.52% center;
    background-repeat: no-repeat;
    background-size: 7.5% auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2); */
    /* -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2); */
    /*box-shadow: 0 0 3px 3px rgba(209,118,203,1);*/
    box-sizing: border-box;
}
.indexBanner .storeBlk select::-ms-expand {
    display: none;
}
.indexBanner .storeBlk select:focus, .indexBanner .storeBlk select option, .indexBanner .storeBlk select:focus option {
    border: 0;
    outline: none;
    outline-offset: 0;
}
.indexBanner .storeBlk input {
    display: block;
    position: absolute;
    top: 0;
    left: 75%;
    width: 18.8%;
    height: 41.5%;
    margin-top: 3.8%;
    /*
	padding-top: 9.97%;*/
    /* border: 0; */
    border: none;
    outline: none;
    outline-offset: 0;
    overflow: hidden;
    vertical-align: top;
    background-color: transparent;
    background-image: url("../img/common/to_search_btn.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    /*box-shadow: 0 0 3px 3px rgba(209,118,203,1);*/
}
/* ----------------------------------------------
		sectionInfo
---------------------------------------------- */
#sectionInfo {
    padding-top: 7.5vw;
    padding-bottom: 6vw;
    position: relative;
}
@media (max-width:992px) {
    #sectionInfo {
        padding-top: 11.5vw;
        padding-bottom: 0;
    }
}
#sectionInfo .infoBg {
    background-attachment: fixed;
    background-image: url("../img/info/info_bg.jpg");
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: cover;
    height: calc(100% - 7.5vw);
    position: fixed;
    top: 7.5vw;
    left: 0;
    width: 100%;
    z-index: -1;
}
@media (max-width:992px) {
    #sectionInfo .infoBg {
        height: calc(100% - 11.5vw);
        top: 11.5vw;
        background-image: none;
        background-color: #000;
    }
}
#sectionInfo .main {
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px;
    width: 76%;
}
#sectionInfo .mainShadow {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 1%, rgba(255, 255, 255, 1) 2%, rgba(255, 255, 255, 1) 98%, rgba(255, 255, 255, .3) 99%, rgba(255, 255, 255, 0) 100%);
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1440px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 79%;
    z-index: -1;
}
@media (max-width:992px) {
    #sectionInfo .main {
        width: 100%;
        background-color: #000;
    }
    #sectionInfo .mainShadow {
        background: none;
    }
}
/* ----------------------------------------------
	page-top
---------------------------------------------- */
#page-top {
    position: relative;
    z-index: 100;
}
#page-top a img {
    width: 5.533vw;
    max-width: 112px;
    min-width: 56px;
    height: auto;
}
#page-top a {
    width: 5.533vw;
    max-width: 112px;
    min-width: 56px;
    right: .5vw;
    bottom: .5vw;
}
#page-top a:hover {
    opacity: .8;
}
@media (max-width:992px) {
    #page-top a {}
}
@media (max-width:750px) {
    #page-top a img {
        width: 100%;
        max-width: 46px;
        min-width: inherit;
        height: auto;
    }
    #page-top a {
        width: 12.26vw;
        max-width: 40px;
        min-width: inherit;
        right: .5vw;
        bottom: 0vw;
        margin-bottom: -.5vw;
    }
    #page-top a:hover {
        opacity: 1;
    }
}
/* ----------------------------------------------
	スマホフッター
---------------------------------------------- */
@media (max-width:992px) {
    #top_footer {
        display: none;
    }
    #footer {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 61.333vw;
        /*box-sizing: border-box;*/
        background-image: url("../img/common/to_footer_base_sp.png");
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% auto;
        margin-top: -2vw;
        padding-top: 0.0%;
    }
    #footerInr {
        width: 100%;
        height: 100%;
        top: 0
    }
    #footer .indexBanner {
        position: absolute;
        left: 1.5%;
        top: 6vw;
        width: 98.5%;
    }
    #footer .indexBanner li {
        margin-right: 0;
        width: 48.46%;
    }
    #footer .indexBanner li:nth-child(1) {
        width: 100%;
        margin: 0 auto;
    }
    #footer .indexBanner li:nth-of-type(n+2) {
        margin-top: 1.83%;
    }
    #footer .indexBanner li:nth-child(even) {
        margin-right: 2.11%;
    }
    .indexBanner .storeBlk select {
        width: 29.477%;
        height: 35.833%;
        font-size: 3.7vw;
        background-size: 8.05% auto;
    }
    .indexBanner .storeBlk input {
        left: 74.5%;
        width: 19.5%;
        height: 41.5%;
        margin-top: 3.5%;
        box-shadow: none;
    }
}
/* ----------------------------------------------
	complete
---------------------------------------------- */
#top_footer .to_complete, #footer .to_complete {
    position: absolute;
    width: 7.91%;
    left: 55.72%;
    top: 2.5vw;
}
@media (max-width:992px) {
    #footer .to_complete {
        position: absolute;
        width: 32.666%;
        left: 14.93%;
        top: 22.5vw;
    }
}
background-color: aqua;
/* ----------------------------------------------
	smaslo
---------------------------------------------- */
#top_footer .to_smaslo, #footer .to_smaslo {
    position: absolute;
    width: 4.5%;
    left: 69.531%;
    top: 1.77vw;
}
#top_footer .to_smapachi, #footer .to_smapachi {
    position: absolute;
    width: 4.531%;
    left: 69.114%;
    top: 2.3vw;
}
@media (max-width:992px) {
    #footer .to_smaslo {
        position: absolute;
        width: 18.133%;
        left: 67.46%;
        top: 24.133vw;
    }
    #footer .to_smapachi {
        position: absolute;
        width: 16.8%;
        left: 67.46%;
        top: 23vw;
    }
}
/* ----------------------------------------------
	bonus_trigger
---------------------------------------------- */
#top_footer .to_bonus_trigger, #footer .to_bonus_trigger {
    position: absolute;
    width: 4.4%;
    left: 64.21%;
    top: 2vw;
}
@media (max-width:992px) {
    #footer .to_bonus_trigger {
        position: absolute;
        width: 16.133%;
        left: 49.866%;
        top: 22.133vw;
    }
}
/* ----------------------------------------------
	caution
---------------------------------------------- */
#top_footer .to_caution, #footer .to_caution {
    position: absolute;
    width: 25.52%;
    left: 29.32%;
    top: 2.9vw;
}
@media (max-width:992px) {
    #footer .to_caution {
        position: absolute;
        width: 91.2%;
        left: 4.4%;
        top: 39.5vw;
    }
}
/* ----------------------------------------------
	copyright
---------------------------------------------- */
#top_footer .to_copyright, #footer .to_copyright {
    position: absolute;
    width: 27.18%;
    left: 1.19%;
    top: 3.6vw;
}
@media (max-width:992px) {
    #footer .to_copyright {
        position: absolute;
        width: 90.4%;
        left: 4.8%;
        top: 50.5vw;
    }
}
/* ----------------------------------------------
	modal
---------------------------------------------- */
.modal {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../img/common/mv_modal_bg_pc.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
@media (max-width:992px) {
    .modal {
        /*background-image: url("../img/common/mv_modal_bg_sp.jpg");
        background-repeat: no-repeat !important;
        background-position: cover !important;*/
        background-image: url("../img/common/mv_modal_bg_sp.jpg");
        background-size: cover;
        background-position: center;
    }
    #modalGnav {
        background-image: url("../img/common/gnav_bg_sp.jpg");
    }
}
.nonScroll {
    background-color: transparent;
    height: calc(100vh + 1px);
    width: 1px;
}
/* ----------------------------------------------
	modalGnav
---------------------------------------------- */
#modalGnav {
    display: none;
}
/*#modalGnav .gnavHead {
	width: 69.73%;
	margin: 9.2% auto 0;
}*/
#modalGnav .gnavLogo {
    position: absolute;
    top: 6%;
    left: 26%;
    width: 47.56%;
}
#modalGnav .gnavBlock {
    padding-top: 53%;
    width: 100%;
    /*position: absolute;
    top: 59%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);*/
    /*max-width: 60%;*/
    /*padding: 30.0% 0 0;*/
}
#modalGnav ul#gnav li {
    position: relative;
    padding-bottom: 5%;
}
#modalGnav ul#gnav li a, #modalGnav ul#gnav li p {
    display: block;
    padding-left: 10%;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
#modalGnav ul#gnav li a img, #modalGnav ul#gnav li p img {
    height: 23vw;
    margin: 0 auto;
    width: auto;
}
#modalGnav ul#gnav .gnavTop img {}
#modalGnav ul#gnav .gnavTokucho img {}
#modalGnav ul#gnav .gnavChara img {}
#modalGnav .gnavBtn {
    margin: 0vw auto 0;
    width: 20%;
}
#modalGnav .to_menu_new_sp1 {
    position: absolute;
    width: 25.111%;
    left: -2.666%;
    top: 52px;
    z-index: -1;
}
#modalGnav .to_menu_new_sp2 {
    position: absolute;
    width: 25.111%;
    left: -2.666%;
    top: 170px;
    z-index: -1;
}
#modalGnav .to_menu_new_sp3 {
    position: absolute;
    width: 25.111%;
    left: 1.7%;
    top: 272px;
    z-index: -1;
}
#modalGnav .to_menu_new_sp4 {
    position: absolute;
    width: 25.111%;
    left: 10.5%;
    top: 370px;
    z-index: -1;
}
/* ----------------------------------------------
	modalMovie
---------------------------------------------- */
#modalMovie {
    overflow: auto;
}
#modalMovie .movieBlock {
    position: absolute;
    width: 66.5%;
    /*margin-top: 5%;
	background-color: #000;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: translateX(-50%);*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: -3%
}
#modalMovie .movieBlock .movieBox {
    box-shadow: 0px 0px 5px 5px rgba(252, 251, 151, 1), 0px 0px 5px 5px rgb(252, 251, 151, 1);
    position: relative;
    height: 0px;
    padding-bottom: 56.37%;
    overflow: hidden;
}
#modalMovie .movieBlock::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 0;
}
#modalMovie .movieBlock::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgb(0,151,73);*/
    /*background: linear-gradient(175deg,  rgb(0,180,255) 20%,rgb(245,0,202) 50%,rgb(255,7,0) 81%);*/
    filter: blur(10px);
    z-index: -1;
}
#modalMovie .movieBlock .movieBox iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#modalMovie .movieBtn {
    position: absolute;
    width: 15%;
    left: 50%;
    margin-left: -5.5%;
    margin-top: 0%;
    /*top: 0;
	width: 6.666%;
	transform: translateX(-50%);
	margin-top: 44%;*/
}
#modalMovie .movieBtn a {
    display: block;
}
@media (max-width:992px) {
    #modalMovie .movieBlock {
        position: absolute;
        width: 92%;
        margin-top: -10%
    }
    #modalMovie .movieBtn {
        position: absolute;
        width: 24%;
        margin-left: -12%;
        margin-top: 4%;
        /*top: 0;
        width: 6.666%;
        transform: translateX(-50%);
        margin-top: 44%;*/
    }
    /*
    #modalMovie .movieBlock {
        width: 90.75vw !important;
        margin-top: 30%;
    }

    #modalMovie .movieBtn {
        width: 19vw;
        margin-top: 84%;
    */
}
/* ----------------------------------------------
	z-index
---------------------------------------------- */
#load {
    z-index: 1000;
}
.modal {
    z-index: 999;
}
#pageToTop {
    z-index: 998;
}
#mainNav {
    z-index: 997;
}
#footer {
    z-index: 995;
}
#areaMain #contents .sectionTtl {
    /*z-index: 10;*/
}
#mainNav #header #headerLogo {
    z-index: 800;
}
#mainNav #header #to_logo_base {
    z-index: 700;
}
#mainNavInr::after {
    z-index: 799;
}
/* ----------------------------------------------
	mainSlide
---------------------------------------------- */
#mainSlide {
    position: absolute;
    left: 9.8%;
    top: 16%;
    width: 19.6%;
    margin-top: 13.2%;
}
.slide-button {
    aspect-ratio: 1 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    z-index: 10;
    position: absolute;
    margin-top: 48%;
    cursor: pointer;
    width: 37%;
}
#mainSlide .prev.slide-button {
    background-image: url("../img/top/top_arr_prev_off.png");
    left: -39%;
}
#mainSlide .prev.slide-button:hover {
    background-image: url("../img/top/top_arr_prev_on.png");
}
#mainSlide .next.slide-button {
    background-image: url("../img/top/top_arr_next_off.png");
    right: -39%;
}
#mainSlide .next.slide-button:hover {
    background-image: url("../img/top/top_arr_next_on.png");
}
#mainSlide a {
    display: block;
    cursor: pointer;
}
#mainSlide ul li {
    position: relative;
    padding: 2% 0;
}
#mainSlide ul li {
    position: absolute;
    width: 100%;
    top: 0;
    line-height: 0;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-property: z-index, transform;
    transform: scale(0.5);
    z-index: -1;
}
@media all and (-ms-high-contrast: none) {
    #mainSlide ul li {
        transition-property: transform;
    }
}
#mainSlide ul li.neighbor {
    z-index: 2;
    /*filter: grayscale(60%);*/
}
#mainSlide ul .neighbor .slide-mask {
    background: rgba(0, 0, 0, .3);
    height: 100%;
    mix-blend-mode: darken;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#mainSlide ul li.current {
    transform: scale(1);
    z-index: 3;
}
#mainSlide ul li.neighbor.next {
    transform: scale(0.825) translateX(50%);
}
#mainSlide ul li.neighbor.prev {
    transform: scale(0.825) translateX(-50%);
}
#mainSlide ul li a, #mainSlide ul li div {
    position: relative;
    box-shadow: 0px 0px 5px 0px #000000;
}
#mainSlide ul li .bnrDummy {
    box-shadow: none;
}
#mainSlide ul li.current a:hover {
    /*box-shadow: 0px 0px 5px 5px rgba(252, 251, 151, 1), 0px 0px 5px 5px rgb(252, 251, 151, 0);*/
    /*box-shadow: 0px 0px 5px 5px rgba(249, 122, 230, 1), 0px 0px 5px 5px rgb(249, 122, 230, 0);*/
    box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 1), 0px 0px 5px 5px rgb(255, 255, 255, 0);
    /*filter: brightness(120%);*/
}
#mainSlide ul li.current a::after {
    position: absolute;
    background: url(../img/top/main_slide_frame01.png);
    background-size: 100% 100%;
    content: "";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
@media (max-width:992px) {
    #mainSlide {
        left: 27.5%;
        width: 45%;
        margin-top: 81%;
    }
    .slide-button {
        margin-top: 47%;
        width: 36%;
    }
    .slide-button img {
        pointer-events: none;
    }
    #mainSlide .prev.slide-button {
        background-image: url("../img/top/top_arr_prev_on.png");
        left: -39%;
    }
    #mainSlide .next.slide-button {
        background-image: url("../img/top/top_arr_next_on.png");
        right: -39%;
    }
    #mainSlide ul li {
        padding: 0;
    }
    #mainSlide ul li.current a:hover {
        box-shadow: 0px 0px 5px 0px #000000;
    }
    #mainSlide ul li.neighbor.prev {
        transform: scale(0.79) translateX(-70%);
    }
    #mainSlide ul li.neighbor.next {
        transform: scale(0.79) translateX(70%);
    }
}
/* ----------------------------------------------
	mainBanner
---------------------------------------------- */
#mainBanner {
    position: absolute;
    left: 2.73%;
    top: 60.5%;
    width: 19.2%;
}
#mainBanner a {
    display: block;
}
@media (max-width:992px) {
    #mainBanner {
        left: 5.4%;
        top: 41%;
        width: 42%;
    }
    #mainBanner a img {
        pointer-events: none;
    }
}