@charset "utf-8";

#mvArea{ position: relative;width: 100%; height: 100vh;max-height:none; min-height: 600px;background: url(/common/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
.frTable{ width: 100%; height: 100vh;max-height:none; min-height: 600px; display: table;  pointer-events: none; position: absolute; top: 0;}

#subPage #mvArea{ position: relative;width: 100%; height: 120px; min-height:auto;}


.headerArea{ height: 50px;  z-index: 3; position: relative;padding-top:8px;}
.mvInner{ height: calc(100% - 170px); padding-top: 20px;}
.titleBnrArea{ height:90px; }

@media(max-width:750px){
.headerArea{ height: 140px;padding-top: 30px; }
.mvInner{ height: calc(100% - 300px);padding-top: 0;}
.titleBnrArea{ height:220px;}
}

.titleBnrArea{ }
.titleBnrArea h1{ width: 350px; text-align: center; margin: 0 auto;padding-top:10px; padding-bottom: 12px;}
.titleBnrArea .mvDate{ width: 280px; text-align: center; margin: 0 auto; position: relative; top: -3px;}

@media(max-width:750px){
.titleBnrArea h1{ width: 450px; text-align: center; margin: 0 auto;padding-top: 10px; padding-bottom: 20px;}
.titleBnrArea .mvDate{ width: 400px; text-align: center; margin: 0 auto;top: 0;}
}


#mainVisual{ height:calc(100%); position: relative; margin: 0 auto;}
#mainVisual h1,
#mainVisual div{
width:auto; height: 100%; position: absolute; top: 0;
  top: 50%;
  left: 50%;
  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){

#mvArea{ position: relative;width: 100%; height: 1100px; max-height:none; min-height: 600px;background: url(/common/images/mv/mv_bg.png) repeat center center; background-size: 80px auto;}
#subPage #mvArea{ position: relative;width: 100%; height: 150px; min-height:auto;}

.frTable{ width: 100%; height: 1100px;  max-height:none;min-height: 600px; display: table;  pointer-events: none; position: absolute; top: 0;}

#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;}



#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 h1{display: block; position: absolute;}

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

/*
#mainVisual .k00 img{}
#mainVisual .k01 img{transition: all  1.0s ease;}
#mainVisual .message img{transition: all  1.0s ease;}
#mainVisual .t00 img{transition: all  1.0s ease;}
*/


.headerArea header h1{ text-align: center;margin-bottom: 10px;}
.headerArea header h1 img{ width: 250px;}
.headerArea nav{ background: #e7aeba; border: 3px double #a46965; box-sizing: border-box; width: 700px; margin:0 auto; border-radius: 30px;}
.headerArea nav ul{
    width: 700px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 5px;
    row-gap: 5px;
}



@media(max-width:750px){

.headerArea nav{ background: #e7aeba; border: 3px double #a46965; box-sizing: border-box; width: 680px; margin:0 auto; border-radius: 50px;}

.headerArea header{padding-top: 30px; position: relative; width: auto;}
#subPage .headerArea header{padding-top: 0; }
.headerArea header h1 img{ width: 400px;}

.ik00{ position: absolute; width: 80px; top: 5px; left:45px}

.headerArea nav ul{
    width: auto;
    margin: 0 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 5px;
    row-gap: 5px;
}

}

.frTable .frRow{ display: table-row;}

.frTable .cell01{background:url(/common/images/mv/frame/frame01.png) no-repeat;}
.frTable .cell02{background:url(/common/images/mv/frame/frame02.png) repeat-x;}
.frTable .cell03{background:url(/common/images/mv/frame/frame03.png) no-repeat;}
.frTable .cell04{background:url(/common/images/mv/frame/frame08.png) repeat-y;}
.frTable .cell06{background:url(/common/images/mv/frame/frame04.png) repeat-y;}
.frTable .cell07{background:url(/common/images/mv/frame/frame07.png) no-repeat;}
.frTable .cell08{background:url(/common/images/mv/frame/frame06.png) repeat-x;}
.frTable .cell09{background:url(/common/images/mv/frame/frame05.png) no-repeat;}

.frTable .cell01,
.frTable .cell03,
.frTable .cell07,
.frTable .cell09{ width: 100px; height: 100px; background-size:100px 100px;}

.frTable .frRow div{ display: table-cell; text-align: center; vertical-align: middle;background-size:100px 100px;}

@media(max-width:750px){


.frTable .cell01{background:url(/common/images/mv/frame/sp/frame01.png) no-repeat;}
.frTable .cell02{background:url(/common/images/mv/frame/sp/frame02.png) repeat-x;}
.frTable .cell03{background:url(/common/images/mv/frame/sp/frame03.png) no-repeat;}
.frTable .cell04{background:url(/common/images/mv/frame/sp/frame08.png) repeat-y;}
.frTable .cell06{background:url(/common/images/mv/frame/sp/frame04.png) repeat-y;}
.frTable .cell07{background:url(/common/images/mv/frame/sp/frame07.png) no-repeat;}
.frTable .cell08{background:url(/common/images/mv/frame/sp/frame06.png) repeat-x;}
.frTable .cell09{background:url(/common/images/mv/frame/sp/frame05.png) no-repeat;}

}