@charset "utf-8";
/*  common
----------------------------------------------------------------------------------------------------------- */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//cdn.jsdelivr.net/npm/yakuhanjp@2.0.0/dist/css/yakuhanjp.min.css);

*{font-family:  YakuHanJP, 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif; font-size: 16px; word-break: normal; font-weight:normal; -webkit-font-smoothing:subpixel-antialiased;}


body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small; *font:x-small;  background-color: #fefef2;}


select,input,button,textarea,button{ font:99% arial,helvetica,clean,sans-serif;}
table{ font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{ font-family:monospace;*font-size:108%;line-height:100%;}


a{text-decoration: none;}
img{width: auto; max-width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
strong{font-weight: bold;}






/*  1000px固定
----------------------------------------------------------------------------------------------------------- */
.base-wp{width: 100%;}
@media only screen and (min-width: 701px) and (max-width: 1000px) { .base-wp{width: 1000px; margin: 0 auto;}}
@media screen and (max-width: 700px) {.base-wp{width: 100%;}}


/*  出しわけ
----------------------------------------------------------------------------------------------------------- */
.pc-only{display:block;}
.sp-only{display:none;}

@media screen and (max-width: 700px) {
.pc-only{display:none;}
.sp-only{display:block;}
}






/*  footer
----------------------------------------------------------------------------------------------------------- */

.base-footer-box{width: 100%;}
@media only screen and (min-width: 701px) and (max-width: 1000px) { .base-footer-box{width: 1000px; margin: 0 auto;}}
@media screen and (max-width: 700px) {.base-footer-box{width: 100%;}}


.base-footer-box{padding: 14px 0 48px 0; background:#3C3837; color: #b28778; }



.base-footer-box a:link { color: #b28778; text-decoration: none;}
.base-footer-box a:visited { color: #b28778; }
.base-footer-box a:hover { color: #b28778; text-decoration: underline;}
.base-footer-box a:active { color: #b28778; }

.footer-cont-logo{width: 80%; max-width: 337px; margin: 5% auto;}
.footer-cont-list{width: 98%; max-width: 1500px; margin: 0 auto;}

.footer-cont-list-appinfo{width: 25%; padding: 1% 5% 5% 5%;}
.footer-cont-list-megamenu-box{width: 62%; padding: 5% 1% 1% 1%;}

.footer-cont-list-megamenu1{width: 31%; padding: 1%;}
.footer-cont-list-megamenu2{width: 31%; padding: 1%;}
.footer-cont-list-megamenu3{width: 31%; padding: 1%;}

.footer-cont-list-title{font-size: 20px; font-weight: 600; background:url(/img/common/footer-line.png) bottom center repeat-x; padding-bottom: 20px; margin-bottom: 3%;}
.footer-cont-list-btn li{padding: 3% 0; font-size: 16px; color: #7c7472;}

.footer-cont-icon-box {padding-bottom: 3%;}
.footer-cont-icon-box li{padding: 1%;}


.base-footer-logo{width: 80%; max-width: 350px; margin: 0 auto 5% auto;}




.game_data_txt { width: 95%; max-width: 320px; margin: 0 auto; line-height:1.61; display: -webkit-flex; display: flex;}
.game_data_txt dt { width: 75px; text-align: left; padding: 5px 0;}
.game_data_txt dd { padding: 5px 0; -webkit-flex: 1; flex: 1;}




hr.hr-line {
	width: 95%;
	margin: 5% auto;
  border-width: 0 0 1px;
  border-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}
 



@media screen and (max-width: 700px) {

.footer-cont-icon-box {width: 80%; max-width: 400px; margin: 0 auto;}


.footer-cont-list-appinfo{width: 100%; padding: 2% 0;}
.footer-cont-list-megamenu-box{width: 100%; padding: 5% 0 1% 0;}

.footer-cont-list-megamenu1{width: 98%; padding: 1%;}
.footer-cont-list-megamenu2{width: 98%; padding: 1%;}
.footer-cont-list-megamenu3{width: 98%; padding: 1%;}


}



 /*  bus-loop
----------------------------------------------------------------------------------------------------------- */
.bus-loop{
	width: 111px;
    height: 58px;
    border-radius: 10px;
    background-image: url(/img/common/icon-bus.png);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    

}
.bus-loop.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}


.bus_stage{
    position: relative;
    width: 100%;
    height: 65px;
    top: 0px;
    display: block;
    background: url(/img/common/icon-bus-bg.png) bottom center no-repeat;
}


.bus_wrap{
	display: block;
    position: absolute;
    top: 10px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}


.bus_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.bus_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .bus-loop {
    transform: rotateY(180deg);
}


@keyframes GoLeft {
    0% {
        right: 10%;
    }
    100% {
        right: 90%;
    }
}
@keyframes GoRight {
    0% {
        right: 90%;
    }
    100% {
        right: 10%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}



/* anime */

@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


@keyframes fade-inanime2 {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}




@media screen and (max-width: 700px) {

.bus-loop{
	width: calc(111px/2);
    height: calc(58px/2);
}

.bus_stage{
    position: relative;
    width: 100%;
    height: calc(65px/2);
    top: 0px;
    display: block;
    background: url(/img/common/icon-bus-bg.png) bottom center no-repeat;
}



}



/*  footer -copyright
----------------------------------------------------------------------------------------------------------- */
.base-copyright{width: 95%; max-width: 1000px; margin: 0 auto; font-size: 12px; line-height:1.4; padding: 16px 0; text-align: center;}
.base-copyright span img{max-height: 16px;}
.base-copyright-win-txt{}
.base-copyright-ss-txt{padding-bottom: 16px;}
.base-copyright-txt{padding-top: 16px;}
.base-copyright img[src$=".gif"], .base-copyright img[src$=".png"] {
mage-rendering: -moz-crisp-edges;
image-rendering:   -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; 
}


/*  page-top
----------------------------------------------------------------------------------------------------------- */
#pageTop{ position: fixed; bottom: 20px; right: 20px; z-index:9997;}
#pageTop a { display: block; z-index: 997; width: 80px; height: 80px;}
#pageTop a:hover { text-decoration: none; opacity: 0.7;}


@media screen and (max-width: 700px) {
#pageTop{ bottom: 10px; right: 10px;}
#pageTop a { width: 40px; height: 40px;}
}



/* movie
----------------------------------------------------------------------------------------------------------- */
.movie_emb_box{width: 100%; max-width: 1000px; margin: 10px auto 0 auto;}
.movie_emb{ position: relative; width: 100%; padding-top: 56.25%;}
.movie_emb iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}