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

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

.font-noto {
  font-family: 'Noto Sans Japanese';
}

html, body {
  height: 100%;
}
*, *::after, *::before {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

html{
    font-size:62.5%;
}


body {
  color: #000000;
  background: #FFFFFF;
  font-family: "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  overflow-x: hidden;
  font-size: 1.4em;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}

a {
    text-decoration:none;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity:1;
}

img{
    vertical-align:bottom;
}

div {
   text-align: center;
}

p {
   text-align: left;
   padding: 0 10px 0 10px;
}

ul{
    list-style-type: none;
}

h2,h3{
    background:#8572F5;
    color:#FFFFFF;
    padding:0.5em 1em;
    font-weight:normal;
    font-size:1.2em;
    letter-spacing:1px;
}

h2.stg, h3.stg{
    font-weight:bold;
}

h2.tb, h3.tb{
    font-size:180%;
}

h3{
    margin:1em auto 0.5em auto;
}





.full{
   width: 100%;
   height:auto;
}


.wrapper{
   max-width: 900px;
   margin: auto;
}


.logo_area{
   width: 20%;
   display: block;
 }

.logo{
   display: block;
    padding:15px 0 15px 15px;
   width: 100px;
}

main{
   background: #f2f2f2;
   margin:0;
   padding:0;
}

header{
   background: #ffffff;
}

footer{
    margin:0;
    padding:2em 1em;
    text-align:center;
    background:#8572F5;
    color:#FFFFFF;
    font-size:1.2em;
    letter-spacing:1px;
}

footer .fcbr{
    display: none;
}

.headtxt{
    text-align: center;
    padding:1em;
    color: #8572f5;
}

.headtxt a{
    color:#8572F5;
}

.headtxt a:hover{
    color:#FC8B92;
}

#introduction{
    padding:15px;
    display:flex;
    flex-wrap:wrap;
}

#introduction p{
    text-align: center;
    font-size:0.9em;
    flex-grow: 1;
}

#introduction .intLogo{
    display:flex;
    align-items: center;
    min-height:200px;
}


#introduction .intL{
    background: #fcd9db;
    color: #606060;
    width:50%;
    padding:20px 0;
    display:flex;
    flex-direction: column;
    align-items:center;

}

#introduction .intL .intLogo{
    max-width:295px;
}

#introduction .intL .intLink a{
    color: #606060;
    
}


#introduction .intR{
    background: #4c4c4c;
    color: #FFFFFF;
    width:50%;
    padding:20px 0;
    display:flex;
    flex-direction: column;
    align-items:center;
}

#introduction .intR .intLogo{
    max-width:185px;
}

#introduction .intR .intLink a{
    color: #FFFFFF;
}

#introduction .intLink{
    font-size:120%;
    padding:20px 0;
}

#introduction .intLink a:hover{
    color:#8572F5;
}

#maincontents{
    margin:0;
    padding:0;

}

.game{
    padding:1em 0;
}

.cafe{
    padding:2em 0;
    color:#FFFFFF;
}

.cinner{
    width:95%;
    margin:0 auto;
    text-align:left;
}

.tcent{
    text-align:center;
}

.tspace{
    margin-top:2em;
}

.game h3{
    background:#dfefff;
    font-weight:bold;
    font-size:1.4em;
    color:#8572F5;
    box-shadow::0px 0px 0px 5px #dfefff;
    -webkit-box-shadow:0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    width:95%;
    margin:1em auto;


}

.game h3 span{
    font-size:130%;
}

.game h4{
    border-bottom:3px solid #ff6597;
    margin:2em auto 1em auto;
}
.game h4 span{
    background:#ff6597;
    border-radius:10px 10px 0 0;
    color:#FFFFFF;
    padding:0.5em 2em;
    display:inline-block;
    font-size:1.4em;  
}

.game h4 .sp{
    display:none;
}

.game .subt{
    font-size:140%;
    font-weight:bold;
    line-height:1.4;
}

.game .clbprdtl{
    background:#666666;
    color:#FFFFFF;
    display:inline-block;
    border-radius:10px;
    padding:0.5em 1em;
    margin-top:2em;
    font-weight:bold;
}

.game .clbprd{
    width:90%;
    margin:1em auto;
}


.game .clbprd .slick-slide {
  margin: 0 5px;
}

.game .clbprd .slick-slide img{
    border:2px solid #666666;
    width: 100%;
  height: auto;
}

.game .clbprd .slick-prev:before,.game .clbprd  .slick-next:before {
  color: #666666;
}


.game .clbprdcm{
    width:90%;
    margin:0 auto;
    border-top: solid 1px #666;
    border-bottom: solid 2px #666;
    padding:0.5em 0;
}

.game .clbprdcm dt{
    font-weight:bold;
    font-size:120%;

}

.game .ght{
     border:1px solid #f8b7bb;
     background:#f9e2e3;
}

.game .ght dt{
     background:#fb8fb2;
     color:#FFFFFF;
     font-size:120%;
     font-weight:bold;
     padding:0.5em;
}

.game .ght dd{
     padding:1em;
}


.game .ght dd.gpt{
     font-weight:bold;
     font-size:120%;
}

.game .gpresent{
    display:flex;
}

.game .gpresent .obpimg {
    padding:0 0.5%;
    background:#666666;
    color:#FFFFFF;
    padding-bottom:0.5em;
}


.game .gpresent .obpimg img{
    
}

.game .gpresent_c{
    text-align:center;
    background:#666666;
    color:#FFFFFF;
    margin:2em auto 0 auto;
}

.game .twbt{
    max-width:300px;
    height:auto;
    margin:0 auto;
    padding-bottom: 1em;
}

.game .twbt img{
    max-width:100%;
    height:auto;
}

.game .twbt a:hover{
    opacity:.7;
}


.cafe p, .game p{
    padding:1em 0;
}

.cafe a, .game a{
    color:#7AF0FC;
}

.cafe .cafe_int{
    display:flex;
    flex-wrap: wrap;
    text-align:left;
}

.cafe .cafe_int dt{
    width:30%;
    border-bottom:1px solid #aaaaaa;
    padding:1em;
}

.cafe .cafe_int dd{
    width:70%;
     border-bottom:1px solid #aaaaaa;
     padding:1em;
}

.cafe .cafe_int dd:last-of-type, .cafe .cafe_int dt:last-of-type{
    border: none;
}


.cafe .cafe_food{
    display:flex;
    flex-flow: row-reverse;
    padding:15px 0;
}

.cafe .cafe_food .cfood-img{
    width:40%;
}

.caption{
    font-size: 80%;
    text-align:center;
    line-height:1.4;
}

.cafe .cafe_food img{
    max-width:100%;
    height:auto;
}

.cafe .cafe_food .cfood{
    width:60%;
    padding-left:1em;
    text-align:left;
}

.cfood_list li{
    text-indent:-1em;
    padding-left:1em;
}

.cafe .goods{

}

.cafe .goods li{
    padding-top:15px;
    padding-bottom:15px;
    text-align:center;
}

.cafe .goods li.dbl{
    display:flex;
}

.cafe .goods li.dbl .goodsL{
    padding-left:1%;
    padding-right:1%;
    width:60%;
    
}

.cafe .goods li.dbl .goodsS{
    padding-left:1%;
    padding-right:1%;
    width:40%;
    
}



.cafe .goods li h4{
    text-align:center;
    font-size:120%;
    font-weight:800;
    display:inline-block;
    border-top:1px solid #8572F5;
    border-bottom:5px double #8572F5;
    margin:10px auto;
    padding:0 1em;
}

.atten{
    text-indent:-1em;
    padding-left:1em;
}


.faq dd{
    padding-bottom:2em;
}



.plat_icon{
    width:90%;
    margin: 10px auto 30px auto;
    background:#FFFFFF;
    padding-bottom:10px;
}

.plat{
    width:auto;
    height:65px;
}





.plat_icon > li > p{
    text-align: center;
    font-weight: bold;
}




/****tab*****/
.demo {
    margin: 20px;
}
.demo__title{
    margin: 20px;
    font-size: 18px;
    background: linear-gradient(transparent 70%, #fbd1d2 30%);
}
.demo__sub-text{
    margin: 20px 20px 40px;
    font-size: 13px;
}
.tab__area{
    color: #333;
    margin: 30px 0 0 0;
    width: auto;
    font-size: 14px;
    line-height: 1.6;
}
.tab__list{
    margin:0 auto;
    width: 100%;
    max-width:920px;
    display:flex;
}
.tab__item{
    padding:0 1em;
}

.tab__item img {
    max-width:100%;
    height:auto;
}

.tab__item a:hover{
    opacity:.8;
}

.tab__inner #tab_1{
    background:#FCD9DB;
}

.tab__inner #tab_2{
    background:#4C4C4C;
}

/*****/

.pcent {
   text-align: center;
   font-size: 0.85em;
   margin-top:30px;
   color: #666666;
   }


@media screen and (max-width: 800px) {
    body{
        font-size:120%;
    }
    .plat_icon{
        width:100%;
    }
    .plat{
        height: 55px;
    }

    .game h4 .sp{
        display:block;
    }

    .game p.nmtxt{
        width:90%;
        margin:0 auto;
    }

    .game .ght{
        width:90%;
        margin:0 auto;
    }

    
}

@media screen and (max-width: 600px) {
    #introduction{
        padding:15px;
        display:block;
    }

    #introduction .intL, #introduction .intR{
        width:90%;
        margin:0 auto;
        padding:10px 0;
    }

    #introduction .intLogo{
        display:block;
        min-height:auto;
        padding-bottom:1em;
        text-align:center;
    }
    #introduction .intLink{
        padding:20px 0 0 0;
    }
    #introduction .intL .intLogo{
        width:90%;
        margin:0 auto;
    }
    #introduction .intR .intLogo{
        width:50%;
        margin:0 auto;
    }
    .cinner{
        width:90%;
    }
    .cafe .cafe_food{
        display:block;;
    }

    .cafe .cafe_food .cfood-img{
        width:100%;
        padding-top:10px;
    }
    .cafe .cafe_food .cfood{
        width:100%;
        padding-left:0;
    }

    footer .fcbr{
        display: block;
        
    }

    .plat_icon{
        margin: 20px auto 10px auto;
    }

    .plat{
        height: 43px;
    }

    .plat_icon > li > p{
        font-size: 13px;
    }

    .game .subt{
        font-size:120%;
        width:90%;
        margin:0 auto;
    }

    .game .clbprd{
        width:80%;
    }
}

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

    .plat_icon{
        margin: 10px auto 10px auto;
    }

    .plat{
        height: 34px;
    }

    h2.tb, h3.tb{
        font-size:130%;
    }
    .game h3{
        font-size:1.1em;
    }

    .game h4 span{
        font-size:1.1em;
        padding: 0.5em 1em;
    }

    .game .ght dd.gpt{
         font-size:100%;
    }
    .game .gpresent{
        display:block;
    }

}

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

    .plat{
        height: 30px;
    }

    .game .subt{
        font-size:110%;
    }

}