@charset "utf-8";

#mainVisualArea{ position: relative;width: 100%;height:calc(100vh - 93px); min-height: 650px; max-height:850px;background: url(/asset/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
#mainVisualArea >.inner{ width: auto;max-width: 1400px; margin: 0 auto;display: flex; height: 100%;padding: 0 30px 0 0;}
#mainVisual{ width:700px;padding: 30px 0;}
#mvBnrArea{ width: 350px;}

@media(max-width:999px){
#mainVisualArea >.inner{ padding: 0 0 0 0;}
}

#mvBnrArea{ background: #b5263f url(/asset/images/top/bnrArea_bg.png) no-repeat center top -135px;background-size:350px; height: 100%;}
#mvBnrArea >.inner{ padding: 25px 23px 0 23px;}

#mvBnrArea header{ margin-bottom: 15px;}
#mvBnrArea ul li{ margin-bottom: 15px;}

@media(max-width:750px){

#mainVisualArea{ position: relative;width: 100%; height: 650px;min-height:auto; max-height:none;background: url(/asset/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
#mainVisualArea{ height: auto;background: url(/asset/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
#mainVisualArea >.inner{ width: auto;max-width:none; margin: 0 auto;display: block; height: 100%;padding: 0 0 0 0;}

#mvBnrArea{ width:auto; background: #b5263f url(/asset/images/top/bnrArea_bg.png) no-repeat center top -375px;background-size:750px; height: 100%;padding-bottom: 25px;}
#mvBnrArea >.inner{ padding: 25px 23px 0 23px;}

#mvBnrArea header{ margin-bottom: 15px; width: 70%; margin: 0 auto;}
#mvBnrArea ul{
    width: auto;
    margin: 0 auto ;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}
#mvBnrArea ul li{ margin-bottom: 0;}
}


#mainVisual{ height:calc(100%);position: relative; margin: 0 auto;}
#mainVisual h1,
#mainVisual div{
width:auto; height: 95.4%; position: absolute; top: 0;
  top: 50.5%;
  left: 52.5%;
  transform: translate(-50%, -50%);
}
#mainVisual h1 img,
#mainVisual div img{ height: 100% !important;width: auto !important;}

#mainVisual .message{ height: 100%; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#mainVisual .message img{ height: 100%; width: auto;}
#mainVisual .sanrio{ height: 100%; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#mainVisual .sanrio img{ height: 100%; width: auto;}

.openBnr{ width: 300px; position: absolute; top: -85px; margin: 0 auto; left: 0; right: 0;}

@media(max-width:750px){

#mainVisual{ height: 900px; position: relative; margin: 0 auto;}
#mainVisual div{
width:auto; height: 95.4%; position: absolute; top: 0;
  top: 50.5%;
  left: 51%;
  transform: translate(-50%, -50%);
}
#mvArea{ position: relative;width: 100%; height: 1100px; max-height:none; min-height: 600px;background: url(/asset/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
#subPage #mvArea{ position: relative;width: 100%; height: 150px; min-height:auto;}


#mainVisual .sanrio{ height: 100%; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.openBnr{ width: 500px; position: absolute; top: -85px; margin: 0 auto; left: 0; right: 0;}
}



#mainVisual .mrt img{ position: relative;transition: all  0.7s ease; top: 0; left: 0;}
#mainVisual .mrt.start img{ transform: scale(0.98);}

#mainVisual .mrt.nonScale.start img{ transform: scale(1);}


#mainVisual .message.start img{  opacity: 0;}
#mainVisual .sanrio.start img{  opacity: 0;}






@media(max-width:750px){

}

#mainVisual .b01.start img{ top:5px; opacity: 0;}
#mainVisual .b02.start img{ top:5px; opacity: 0;}
#mainVisual .b03.start img{ top:5px; opacity: 0;}
#mainVisual .b04.start img{ top:5px; opacity: 0;}
#mainVisual .b05.start img{ top:5px; opacity: 0;}
#mainVisual .b06.start img{ top:5px; opacity: 0;}
#mainVisual .b07.start img{ top:5px; opacity: 0;}

#mainVisual .c01.start img{ top:5px; opacity: 0;}
#mainVisual .c02.start img{ top:5px; opacity: 0;}
#mainVisual .c03.start img{ top:5px; opacity: 0;}
#mainVisual .c04.start img{ top:5px; opacity: 0;}
#mainVisual .c05.start img{ top:5px; opacity: 0;}
#mainVisual .c06.start img{ top:5px; opacity: 0;}
#mainVisual .c07.start img{ top:5px; opacity: 0;}

#mainVisual .i01.start img{ top:-10px; left: 5px; opacity: 0;}
#mainVisual .i02.start img{ top:5px; opacity: 0;}
#mainVisual .i03.start img{ top:0; left: 5px; opacity: 0;}
#mainVisual .i04.start img{ top:5px; left: 5px; opacity: 0;}
#mainVisual .i05.start img{ top:0; left: -5px; opacity: 0;}
#mainVisual .i06.start img{ top:0; left: -5px; opacity: 0;}
#mainVisual .i07.start img{ top:0; left:5px; opacity: 0;}

#mainVisual .k00.start img{ opacity: 0;}
#mainVisual .k01.start img{ opacity: 0;}
#mainVisual .t00.start img{ opacity: 0;}
#mainVisual .t01.start img{ opacity: 0;}
#mainVisual h1{display: block; position: absolute;}

.mvDate img{transition: all  0.7s ease;}
.mvDate.start img{ opacity: 0;transition: all  0.7s ease;}

.headerArea header{padding-top:0; width: 900px;margin:0 auto; position: relative;}
.ik00{ position: absolute; width: 60px; top: 5px; left:45px; display: none;}


@media(max-width:750px){

}

.whiteContBody{
  position: relative;
}

.whiteContBody > .frTable{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: 50px 1fr 50px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
  min-height: 0;
  max-height: none;
}

.whiteContBody > .frTable > .frRow{
  display: contents;
}

.whiteContBody > .frTable > .frRow > div{
  display: block;
  width: 100%;
  height: 100%;
  background-size: 50px 50px;
}

.whiteContBody > .frTable .cell01{ background: url(/asset/images/mv/frame/frame01.png) no-repeat left top; }
.whiteContBody > .frTable .cell02{ background: url(/asset/images/mv/frame/frame02.png) repeat-x center top; }
.whiteContBody > .frTable .cell03{ background: url(/asset/images/mv/frame/frame03.png) no-repeat right top; }
.whiteContBody > .frTable .cell04{ background: url(/asset/images/mv/frame/frame08.png) repeat-y left center; }
.whiteContBody > .frTable .cell05{ background: none; }
.whiteContBody > .frTable .cell06{ background: url(/asset/images/mv/frame/frame04.png) repeat-y right center; }
.whiteContBody > .frTable .cell07{ background: url(/asset/images/mv/frame/frame07.png) no-repeat left bottom; }
.whiteContBody > .frTable .cell08{ background: url(/asset/images/mv/frame/frame06.png) repeat-x center bottom; }
.whiteContBody > .frTable .cell09{ background: url(/asset/images/mv/frame/frame05.png) no-repeat right bottom; }

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

  .whiteContBody > .frTable{
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 50px 1fr 50px;
  }

  .whiteContBody > .frTable > .frRow > div{
    background-size: 50px 50px;
  }

  .whiteContBody > .frTable .cell01{ background: url(/asset/images/mv/frame/sp/frame01.png) no-repeat left top; }
  .whiteContBody > .frTable .cell02{ background: url(/asset/images/mv/frame/sp/frame02.png) repeat-x center top; }
  .whiteContBody > .frTable .cell03{ background: url(/asset/images/mv/frame/sp/frame03.png) no-repeat right top; }
  .whiteContBody > .frTable .cell04{ background: url(/asset/images/mv/frame/sp/frame08.png) repeat-y left center; }
  .whiteContBody > .frTable .cell05{ background: none; }
  .whiteContBody > .frTable .cell06{ background: url(/asset/images/mv/frame/sp/frame04.png) repeat-y right center; }
  .whiteContBody > .frTable .cell07{ background: url(/asset/images/mv/frame/sp/frame07.png) no-repeat left bottom; }
  .whiteContBody > .frTable .cell08{ background: url(/asset/images/mv/frame/sp/frame06.png) repeat-x center bottom; }
  .whiteContBody > .frTable .cell09{ background: url(/asset/images/mv/frame/sp/frame05.png) no-repeat right bottom; }

}