@charset "UTF-8";

/* ==========================================================================
   create top
========================================================================== */
#create .content{
  background: url(../img/create/index_bg_illu.jpg) 50% 50% no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  min-height: 756px;
}
@media screen and (orientation: landscape) {
  .tabletmode #create .content{
    min-height: 756px;
  }
}
.ua-wiiu #create .content{
    min-height: 900px;
}

#create .contentbodywrapper{
  padding-top: 120px;
}
#create .contentbody{
  width: 960px;
  height: 500px;
  margin: 0 auto 0 auto;
  padding-top: 100px;
  position: relative;
}
@media screen and (min-width: 1280px) {
  #create .contentbodywrapper{
    padding-top: 0;
  }
  #create .contentbody{
    position: absolute;
    width: 960px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -480px;
  }
}
#create .contentbody_title{
  position: absolute;
  right: 0px;
  top: -58px;
}
#create .content_note{
  position: absolute;
  left: 503px;
  top: 471px;
}
#create .coontent_note_btn{
  display: block;
  position: absolute;
  left: 645px;
  top: 492px;
}
.no-touchevents #create .coontent_note_btn a:hover{
  opacity: 0.7;
}
#create .localnav_item a{
  display: block;
  width: 110px;
  height: 104px;
}
#create .item_lesson a{
  display: block;
  width: 458px;
  height: 67px;
}
#create .localnav_item{
  position: absolute;
}
#create .item_combi{
  left: 502px;
  top: 283px;
}
#create .item_stage{
  left: 618px;
  top: 283px;
}
#create .item_series{
  left: 734px;
  top: 283px;
}
#create .item_sound{
  left: 850px;
  top: 283px;
}
#create .item_lesson{
  left: 502px;
  top: 393px;
}

#create .localnav_item span{
  display: block;
  width: 110px;
  height: 104px;
  background-image: url(../img/create/index_sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

#create .item_lesson span{
  width: 458px;
  height: 67px;
}

#create .item_combi span{ background-position: 0 0;}
#create .item_stage span{ background-position: -110px 0;}
#create .item_series span{ background-position: -220px 0;}
#create .item_sound span{ background-position: -330px 0;}
#create .item_lesson span{ background-position: -440px 0;}

.no-touchevents #create .item_combi a:hover span{ background-position: 0 -104px;}
.no-touchevents #create .item_stage a:hover span{ background-position: -110px -104px;}
.no-touchevents #create .item_series a:hover  span{ background-position: -220px -104px;}
.no-touchevents #create .item_sound a:hover span{ background-position: -330px -104px;}
.no-touchevents #create .item_lesson a:hover  span{ background-position: -440px -104px;}

#create .moviearea{
  position: absolute;
  left: -38px;
  top: -19px;
  width: 493px;
  height: 532px;  
}
#create .moviearea:before{
  content: "";
  width: 493px;
  height: 532px;
  display: block;
  background: url(../img/create/index_hard.png) 0 0 no-repeat;
  position: absolute;
  z-index: 2;
}
.tabletmode #create .moviearea:before{
  display: none;
}


#create .videobody{
  width: 326px;
  height: 454px;
  position: absolute;
  left: 83px;
  top: 42px;
  background: #000;
}

/* ==========================================================================
  create page common
========================================================================== */

.content_createpage_left{
  width: 42%;
  min-height: 570px ;
  height: 100%;
  display: inline-block;
  background: url(../img/common/bg_chara_beige.png) 0 0;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}
.content_createpage_right{
  width: 58%;
  min-height: 570px ;
  height: 100%;
  display: inline-block;
  background: url(../img/common/bg_chara_yerrow.png) 0 0;
  vertical-align: top;
  position: relative;
}
.ua-wiiu .content_createpage_left,
.ua-wiiu .content_createpage_right{
    min-height: 900px;
}
.content_createpage_localnav{
  width: 100%;
  height: 56px;
  background: #692800;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
}
@media screen and (min-width: 1280px) {
 .content_createpage_left{
    min-height: 100%;
  }
  .content_createpage_right{
    min-height: 100%;
  }
}
.createpage_left_body{
  width: 354px;
  height: 560px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -280px 0 0 -177px; 
}
.talk_name_mashiko{
  position: absolute;
  left: 52px;
  bottom: -23px;
}
.talk_name_yamamura{
  position: absolute;
  left: 266px;
  bottom: -23px;
}
.talk_btn_kids{
  width: 225px;
  height: 29px;
  position: absolute;
  left: 68px;
  bottom: -70px;
}
.talk_btn_kids span{
  display: block;
  width: 225px;
  height: 29px;
  background-image: url(../img/create/talk_btn_kids.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.no-touchevents .talk_btn_kids a:hover span{
  background-position: 0 100%;
}
.talk_chara_mashiko{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 130px;
  height: 130px; 
}
.talk_chara_yamamura{
  position: absolute;
  left: 224px;
  bottom: 0;
  width: 130px;
  height: 130px; 
}
.talk_balloon_mashiko01{
  position: absolute;
  left: -10px;
  bottom: 110px;
}
.talk_balloon_mashiko02{
  position: absolute;
  left: -10px;
  bottom: 110px;
}
.talk_balloon_yamamura01{
  position: absolute;
  left: 96px;
  bottom: 110px;
}
.talk_balloon_yamamura02{
  position: absolute;
  left: 96px;
  bottom: 110px;
}
.balloon_l img,
.balloon_r img {
  opacity: 0;
          transform: scale(0.1);
  -webkit-transform: scale(0.1);
          transition:         transform 300ms ease-in, opacity 300ms ease-out;
  -webkit-transition: -webkit-transform 300ms ease-in, opacity 300ms ease-out;
}
.balloon_l.show img,
.balloon_r.show img {
  opacity: 1;
          transform: scale(1.0);
  -webkit-transform: scale(1.0);
          transition:         transform 500ms cubic-bezier(.16,.67,.5,1.21), opacity 300ms ease-in;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(.16,.67,.5,1.21), opacity 300ms ease-in;
}
.balloon_l img {
          transform-origin: 98px 100%;
  -webkit-transform-origin: 98px 100%;
}
.balloon_r img {
          transform-origin: 169px 100%;
  -webkit-transform-origin: 169px 100%;
}
.createpage_localnav_body{
  width: 816px;
  margin: 0 auto;
}
.createpage_localnav_item{
  display: inline-block;
  font-size: 0;
  line-height: 0;
  margin: -2px 4px 0 0;
  vertical-align: bottom;
}
.pagelocalnav_next{
  margin: 0;
}
.createpage_localnav_item span{ 
  display: block;
  width: 118px;
  height: 42px;
  background-image: url(../img/create/localnav_sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.pagelocalnav_lesson span{
  width: 118px;
  height: 52px;
}
.pagelocalnav_prev span,
.pagelocalnav_next span{
  width: 40px;
  height: 42px;
}
.pagelocalnav_prev span{background-position: 0 -10px;}
.pagelocalnav_top span{background-position: -40px -10px;}
.pagelocalnav_combi span{background-position: -158px -10px;}
.pagelocalnav_stage span{background-position: -276px -10px;}
.pagelocalnav_series span{background-position: -394px -10px;}
.pagelocalnav_sound span{background-position: -512px -10px;}
.pagelocalnav_lesson span{background-position: -630px 0;}
.pagelocalnav_next span{background-position: -748px -10px;}

.no-touchevents .pagelocalnav_prev a:hover span{background-position: 0 -64px;}
.no-touchevents .pagelocalnav_top a:hover span{background-position: -40px -64px;}
.no-touchevents .pagelocalnav_combi a:hover span{background-position: -158px -64px;}
.no-touchevents .pagelocalnav_stage a:hover span{background-position: -276px -64px;}
.no-touchevents .pagelocalnav_series a:hover span{background-position: -394px -64px;}
.no-touchevents .pagelocalnav_sound a:hover span{background-position: -512px -64px;}
.no-touchevents .pagelocalnav_lesson a:hover span{background-position: -630px -54px;;}
.no-touchevents .pagelocalnav_next a:hover span{background-position: -748px -64px;}

.pagelocalnav_combi.is-current span{background-position: -158px -120px;}
.pagelocalnav_stage.is-current span{background-position: -276px -120px;}
.pagelocalnav_series.is-current span{background-position: -394px -120px;}
.pagelocalnav_sound.is-current span{background-position: -512px -120px;}
.pagelocalnav_lesson.is-current span{background-position: -630px -110px;}

/* ==========================================================================
  combi
========================================================================== */
#combi .createpage_title{
  position: absolute;
  left: -45px;
  top: -27px;
}
#combi .content_createpage_right{
  background-image: url(../img/common/bg_grid_yerrow.png);
}
#combi .combiblock_top{
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 10;
}
#combi .combiblock_bottom{
  position: absolute;
  width: 100%;
  bottom: 53px;/* mn */
  z-index: 10;
}
#combi .combiblock li{
  width: 33.333%;
  display: inline-block;
  text-align: center;
  position: relative;
  cursor: pointer;
}



#combi .combiblock li img{ 
  width: 74.5%;
  height: auto;
}
.tabletmode #combi .combiblock li a{
  display: block;
}
#combi .combiblock li.is-active a {
  cursor: default;
}
#combi .combiblock li:before{
  content: "";
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: 0.25;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
#combi .combiblock li.is-active:before{
  display: inline-block;
}
.tabletmode #combi .combiblock li:before,
.tabletmode #combi .combiblock li.is-active:before{
  display: none;
}

#combi .combiblock li:after{
  content: "";
  width: 26px;
  height: 28px;
  background: url(../img/create/combi_btn_play.png) 0 0 no-repeat;
  display: block;
  position: absolute;
  left: 4px;
  top: 4px;
}
.no-touchevents #combi .combiblock li:hover:after{
  background-position: 0 -28px;
}
.no-touchevents #combi .combiblock li:hover:before{
  display: block;
}

#combi .combiblock.combiblock_top li:after{
  left: 4px;
  top: auto;
  bottom: 4px;
}
#combi .combiblock li.is-active:after{
  content: "";
  width: 80px;
  height: 24px;
  background: url(../img/create/combi_ico_playing.png) 0 0 no-repeat;
  display: block;
  position: absolute;
  left: 4px;
  top: 4px;
}
#combi .combiblock.combiblock_top li.is-active:after{
  left: 4px;
  top: auto;
  bottom: 4px;
}
.no-touchevents #combi .combiblock li.is-active:hover:after{
  background-position: 0 0;
}

.tabletmode #combi .combiblock li.is-active:after,
.tabletmode #combi .combiblock.combiblock_top li.is-active:after{
  display: block;
  width: 26px;
  height: 28px;
  background: url(../img/create/combi_btn_play.png) 0 0 no-repeat;
}

#combi .item_chara01,
#combi .item_chara03,
#combi .item_chara05{
  background: #fce680;
}
#combi .item_chara02,
#combi .item_chara04,
#combi .item_chara06{
  background: #facd00;
}

#combi .moviearea{
  width: 592px;
  height: 634px;
  position: absolute;
  left: 50%;
  top: 67.5%;
  margin: -317px 0 0 -296px;
}
@media screen and (orientation: portrait) {
  .tabletmode #combi .moviearea{
    top: 50%;
    width: 562px;
     margin: -317px 0 0 -281px;
  }
  .tabletmode #combi .moviearea img{
    width: 100%;
  }
}
@media screen and (orientation: landscape) {
  .tabletmode #combi .moviearea{
    width: 562px;
    top: 57.5%;
     margin: -317px 0 0 -281px;
  }
  .tabletmode #combi .moviearea img{
    width: 100%;
  }
}

#combi .moviearea:before{
  content: "";
  width: 592px;
  height: 634px;
  display: block;
  background: url(../img/create/combi_hard.png) 0 0 no-repeat;
  position: absolute;
  z-index: 2;
}
.tabletmode #combi .moviearea:before{
  display: none;
}

#combi .videobody{
  width: 392px;
  height: 454px;
  position: absolute;
  left: 100px;
  top: 50px;
  background: #000;
}
#combi .videobody video {
  position: absolute;
  top: 0;
  left: 0;
  width: 392px;
  opacity: 0;
}

/* ==========================================================================
  stage
========================================================================== */
#stage .createpage_title{
  position: absolute;
  left: -74px;
  top: -83px;
}
#stage .stageselectwrapper{
  width: 100%;
  height: 144px;
  position: absolute;
  background: url(../img/common/bg_dot_emerald.png) 0 0;
  left: 0;
  top: 50%;
  margin: -72px 0 0 0; 
}

#stage .stageselect{
  width: 458px;
  margin: 39px auto 0 auto;
}
#stage .stageselect_item{
  display: inline-block;
  width: 68px;
  height: 72px;
  margin: 0 10px 0 0;
}
#stage .stageselect_shiro{
  margin: 0;
}
#stage .stageselect_item a{
  display: block;
  width: 68px;
  height: 72px;
  position: relative;
}
#stage .stageselect_item .icon{
  display: block;
  width: 68px;
  height: 72px;
  background-image: url(../img/create/stage_sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
#stage .stageselect_chijo .icon{background-position: 0 0;}
#stage .stageselect_chika .icon{background-position: -68px 0;}
#stage .stageselect_suichu .icon{background-position: -136px 0;}
#stage .stageselect_hikousen .icon{background-position: -204px 0;}
#stage .stageselect_obakeyashiki .icon{background-position: -272px 0;}
#stage .stageselect_shiro .icon{background-position: -340px 0;}

.no-touchevents #stage .stageselect_chijo a:hover .icon{background-position: 0 -72px;}
.no-touchevents #stage .stageselect_chika a:hover .icon{background-position: -68px -72px;}
.no-touchevents #stage .stageselect_suichu a:hover .icon{background-position: -136px -72px;}
.no-touchevents #stage .stageselect_hikousen a:hover .icon{background-position: -204px -72px;}
.no-touchevents #stage .stageselect_obakeyashiki a:hover .icon{background-position: -272px -72px;}
.no-touchevents #stage .stageselect_shiro a:hover .icon{background-position: -340px -72px;}

#stage .stageselect_item .balloon{
  position: absolute;
  left: -22px;
  top: -45px;
  opacity: 0;

          transform: scale(0.5);
  -webkit-transform: scale(0.5);
          transition:         transform 100ms ease, opacity 100ms ease-out, z-index 0ms ease 100ms;
  -webkit-transition: -webkit-transform 100ms ease, opacity 100ms ease-out, z-index 0ms ease 100ms;
          transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}
#stage .stageselect_item.is-active .balloon,
#stage .stageselect_item a:hover .balloon {
  z-index: 1;
  opacity: 1;
          transform: scale(1);
  -webkit-transform: scale(1);
          transition:         transform 300ms cubic-bezier(0.175, 0.885, 0.32,  1.275), opacity 150ms ease-in, z-index 0ms;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32,  1.275), opacity 150ms ease-in, z-index 0ms;
}
#stage .stageselect_item a:hover .balloon {
  z-index: 10;
}
#stage .stageimg{
  width: 100%;
  position: absolute;
  left: 0;
}
#stage .stageimg ul {
  zoom: 1;
}
#stage .stageimg ul:after {
  content: '';
  display: block;
  clear: both;
}
#stage .stageimg_top{
  bottom: 50%;
  margin:0 0 72px 0;
}
#stage .stageimg_bottom{
  top: 50%;
  margin:72px 0 0 0;
}
#stage .stageimg_item{
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 28.125%;
}
#stage .stageimg_item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
#stage .stageimg_item ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  zoom: 1;
}
#stage .stageimg_item ul:after {
  display: block;
  content: '';
  clear: both;
}
#stage .stageimg_item li {
  position: relative;
  float: left;
  width: 12.5%;
  height: 16.6666%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease-in;
  -webkit-transition: opacity 300ms ease-in;
}
#stage .stageimg_item li img {
  position: absolute;
  width: 800%;
  height: 600%;
}
#stage .stageimg_item li.show {
  opacity: 1;
}

.use-matrix3d #stage .stageimg_item li {
  transform: perspective(300px) matrix3d(1, -1, -1, 0, -1, 1, -1, 0, 1, 1, 0, 0, 0, 0, 0, 1);
  transition: transform 300ms ease-out, opacity 200ms ease-in;
  transform-origin: -20% -20%;
  -webkit-transform: perspective(300px) matrix3d(1, -1, -1, 0, -1, 1, -1, 0, 1, 1, 0, 0, 0, 0, 0, 1);
  -webkit-transition: -webkit-transform 300ms ease-out, opacity 200ms ease-in;
  -webkit-transform-origin: -20% -20%;
}
.use-matrix3d #stage .stageimg_item li.show {
  transform: perspective(300px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
  -webkit-transform: perspective(300px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
}


/* ==========================================================================
  series
========================================================================== */
#series .createpage_title{
  position: absolute;
  left: -25px;
  top: -32px;
}
#series .seriesselectwrapper{
  width: 100%;
  height: 144px;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -72px 0 0 0;
  overflow: hidden;
}
#series .seriesselect_body{
  width: 100%;
  overflow: hidden;
}
#series .seriesselect_body{
  position: relative;
  width: 400%;
}
#series .seriesselect_body:after{
  content: "";
  display: block;
  clear: both;
}
#series .seriesselect_item{
  width: 25%;
  height: 144px;
  float: left;
  position: relative;
}

#series .seriesselect_mario{
  background-color: #dd5917;
}
#series .seriesselect_mario3{
  background-color: #93feff;
}
#series .seriesselect_world{
  background-color: #ffd9a8;
}
#series .seriesselect_mariou{
  background-color: #ffd800;
}
.series_logo{
  position: absolute;
  width: 312px;
  height: 102px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.seriesselect_prev span,
.seriesselect_next span{
  width: 68px;
  height: 72px;
  display: block;
  background: url(../img/create/series_sprite.png) 0 0;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.seriesselect_prev span{
  left: 38px;
  top: 37px;
}
.seriesselect_next span{
  right: 38px;
  top: 37px;
}
.seriesselect_prev a,
.seriesselect_next a{
  display: block;
}
.seriesselect_prev span{background-position: 0 0;}
.seriesselect_next span{background-position: -68px 0;}
.no-touchevents .seriesselect_prev a:hover span{background-position: 0 -72px;}
.no-touchevents .seriesselect_next a:hover span{background-position: -68px -72px;}


#series .seriesimg{
  width: 100%;
  position: absolute;
  left: 0;
}
#series .seriesimg ul {
  zoom: 1;
}
#series .seriesimg ul:after {
  content: '';
  display: block;
  clear: both;
}
#series .seriesimg_top{
  bottom: 50%;
  margin:0 0 72px 0;
}
#series .seriesimg_bottom{
  top: 50%;
  margin:72px 0 0 0;
}
#series .seriesimg_item {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 28.125%;
}
#series .seriesimg_item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
#series .seriesimg_item ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  zoom: 1;
}
#series .seriesimg_item ul:after {
  display: block;
  content: '';
  clear: both;
}
#series .seriesimg_item li {
  position: relative;
  float: left;
  width: 12.5%;
  height: 16.6666%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease-in;
  -webkit-transition: opacity 300ms ease-in;
}
#series .seriesimg_item li img {
  position: absolute;
  width: 800%;
  height: 600%;
}

#series .seriesimg_item li.show {
  opacity: 1;
}

.use-matrix3d #series .seriesimg_item li {
  transform: perspective(300px) matrix3d(1, -1, -1, 0, -1, 1, -1, 0, 1, 1, 0, 0, 0, 0, 0, 1);
  transition: transform 300ms ease-out, opacity 200ms ease-in;
  transform-origin: -20% -20%;
  -webkit-transform: perspective(300px) matrix3d(1, -1, -1, 0, -1, 1, -1, 0, 1, 1, 0, 0, 0, 0, 0, 1);
  -webkit-transition: -webkit-transform 300ms ease-out, opacity 200ms ease-in;
  -webkit-transform-origin: -20% -20%;
}
.use-matrix3d #series .seriesimg_item li.show {
  transform: perspective(300px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
  -webkit-transform: perspective(300px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);
}

/* ==========================================================================
  sound
========================================================================== */
#sound .createpage_title{
  position: absolute;
  left: -45px;
  top: -27px;
}
#sound .moviearea{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 592px;
  height: 638px;
  margin: -369px 0 0 -296px;
}
#sound .moviearea:before{
  content: "";
  width: 592px;
  height: 638px;
  display: block;
  background: url(../img/create/sound_hard.png) 0 0 no-repeat;
  position: absolute;
  z-index: 2;
}
.tabletmode #sound .moviearea:before{
  display: none;
}
@media screen and (orientation: portrait) {
  .tabletmode #sound .moviearea{
    top: 50%;
    width: 562px;
     margin: -317px 0 0 -281px;
  }
  .tabletmode #sound .moviearea img{
    width: 100%;
  }
}
@media screen and (orientation: landscape) {
  .tabletmode #sound .moviearea{
    width: 562px;
    top: 50%;
     margin: -317px 0 0 -281px;
  }
  .tabletmode #sound .moviearea img{
    width: 100%;
  }
}
#sound .videobody{
  width: 392px;
  height: 543px;
  position: absolute;
  left: 100px;
  top: 49px;
  background: #000;
}
#sound .videobody video,
#sound .videobody img {
  position: absolute;
  top: 0;
  left: 0;
  width: 392px;
  height: auto;
}
#sound .videobottomscreen{
  width: 313px;
  position: absolute;
  left: 39px;
  top: 308px;
  z-index: 2;
}
#sound .videobottomscreen img{
  width: 100%;
  height: auto;
}

#sound .soundselectwrapper{
  width: 100%;
  padding-top: 27%;
  min-height: 180px;
  position: absolute;
  background-image: url(../img/common/bg_grid_yerrow.png);
  bottom: 0;
  left: 0;
  z-index: 10;
}
@media screen and (orientation: portrait) {
  .tabletmode #sound .soundselectwrapper{
    padding-top: 50%;
  }
}
@media screen and (orientation: landscape) {
  .tabletmode #sound .soundselectwrapper{
    padding-top: 40%;
  }
}

#sound .volume_btn{
  width: 106px;
  height: 110px;
  position: absolute;
  left: 50%;
  top: -53px;
  margin: 0 0 0 195px;
}
.tabletmode #sound .volume_btn{
  display: none;
}

#sound .volume_btn span{
  display: block;
  width: 106px;
  height: 110px;
  background-image: url(../img/create/sound_sprite2.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.no-touchevents #sound .volume_btn a:hover span{ background-position: 0 -110px;}

#sound .volume_btn.is-volumeoff span{ background-position: 0 -220px;}
.no-touchevents #sound .volume_btn.is-volumeoff a:hover span{ background-position: 0 -330px;}

.soundselect_note{
  width: 404px;
  position: absolute;
  top: 270px;
  left: 50%;
  margin: 0 0 0 -202px;
}
.soundselect{
  width: 392px;
  position: absolute;
  top: 65px;
  left: 50%;
  margin: 0 0 0 -192px;
}
.soundselect_item{
  width:88px;
  height: 92px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 6px 5px;
}
.soundselect_item span{
  display: block;
  width:88px;
  height: 92px;
  background-image: url(../img/create/sound_sprite.png);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.soundselect_btn01 span{ background-position: 0 0;}
.soundselect_btn02 span{ background-position: -88px 0;}
.soundselect_btn03 span{ background-position: -176px 0;}
.soundselect_btn04 span{ background-position: -264px 0;}
.soundselect_btn05 span{ background-position: -352px 0;}
.soundselect_btn06 span{ background-position: -440px 0;}
.soundselect_btn07 span{ background-position: -528px 0;}
.soundselect_btn08 span{ background-position: -616px 0;}

.no-touchevents .soundselect_btn01 a:hover span{ background-position: 0 -92px;}
.no-touchevents .soundselect_btn02 a:hover span{ background-position: -88px -92px;}
.no-touchevents .soundselect_btn03 a:hover span{ background-position: -176px -92px;}
.no-touchevents .soundselect_btn04 a:hover span{ background-position: -264px -92px;}
.no-touchevents .soundselect_btn05 a:hover span{ background-position: -352px -92px;}
.no-touchevents .soundselect_btn06 a:hover span{ background-position: -440px -92px;}
.no-touchevents .soundselect_btn07 a:hover span{ background-position: -528px -92px;}
.no-touchevents .soundselect_btn08 a:hover span{ background-position: -616px -92px;}

.soundselect_btn01.is-active span{ background-position: 0 -184px;}
.soundselect_btn02.is-active span{ background-position: -88px -184px;}
.soundselect_btn03.is-active span{ background-position: -176px -184px;}
.soundselect_btn04.is-active span{ background-position: -264px -184px;}
.soundselect_btn05.is-active span{ background-position: -352px -184px;}
.soundselect_btn06.is-active span{ background-position: -440px -184px;}
.soundselect_btn07.is-active span{ background-position: -528px -184px;}
.soundselect_btn08.is-active span{ background-position: -616px -184px;}

.no-touchevents .soundselect_btn01.is-active a:hover span{ background-position: 0 -276px;}
.no-touchevents .soundselect_btn02.is-active a:hover span{ background-position: -88px -276px;}
.no-touchevents .soundselect_btn03.is-active a:hover span{ background-position: -176px -276px;}
.no-touchevents .soundselect_btn04.is-active a:hover span{ background-position: -264px -276px;}
.no-touchevents .soundselect_btn05.is-active a:hover span{ background-position: -352px -276px;}
.no-touchevents .soundselect_btn06.is-active a:hover span{ background-position: -440px -276px;}
.no-touchevents .soundselect_btn07.is-active a:hover span{ background-position: -528px -276px;}
.no-touchevents .soundselect_btn08.is-active a:hover span{ background-position: -616px -276px;}

/* ==========================================================================
  lesson
========================================================================== */
#lesson .createpage_title{
  position: absolute;
  left: 0px;
  top: -76px;
}
#lesson .content_createpage_right{
  background-image: url(../img/create/lesson_bg_chara01.png),url(../img/create/lesson_bg_chara02.png),url(../img/common/bg_grid_yerrow.png);
  background-repeat: no-repeat,no-repeat,repeat;
  background-position :0 0,100% 100%,0 0;
}


#lesson .moviearea{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 592px;
  height: 638px;
  margin: -319px 0 0 -296px;
}
#lesson .moviearea:before{
  content: "";
  width: 592px;
  height: 638px;
  display: block;
  background: url(../img/create/sound_hard.png) 0 0 no-repeat;
  position: absolute;
  z-index: 2;
}
#lesson .videobody{
  width: 392px;
  height: 543px;
  position: absolute;
  left: 100px;
  top: 49px;
  background: #000;
}
.tabletmode #lesson .moviearea:before{
  display: none;
}
@media screen and (orientation: portrait) {
  .tabletmode #lesson .moviearea{
    top: 50%;
    width: 472px;
    margin: -317px 0 0 -236px;
  }
  .tabletmode #lesson .moviearea img{
    width: 100%;
    height: auto;
  }
}
@media screen and (orientation: landscape) {
  .tabletmode #lesson .moviearea{
    top: 55%;
    width: 472px;
    margin: -317px 0 0 -236px;
  }
  .tabletmode #lesson .moviearea img{
    width: 100%;
  }
}



.modal{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  min-height: 750px;
}

.modal .modalbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 890px;
  background: url(../img/common/bg_chara_gray.png) 0 180px;
}

.ua-wiiu .modal .modalbg {
  min-height: 1080px;
}

@media screen and (min-width: 1280px) {
  .modal .modalbg {
      background-position: 200px 40px;
    }
}

.modal .modalcontent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 360px;
  margin: -180px 0 0 -280px;
}

.modal .modalclose{
  width: 80px;
  height: 94px;
  position: absolute;
  right: 40px;
  top: 30px;
  z-index: 1001;
}
.modal .modalclose a{
  display: block;
}
.modal .modalclose span{
  width: 80px;
  height: 94px;
  display: block;
  background-image: url(../img/exchange/modal_close.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}


.modal {
  left: -100%;
          transition: left 0ms linear 450ms;
  -webkit-transition: left 0ms linear 450ms;
}
.modal .modalbg {
  opacity: 0;
          transition: opacity 450ms ease-out;
  -webkit-transition: opacity 450ms ease-out;
}
.modal .modalcontent {
  opacity: 0;
          transition: opacity 300ms ease-out;
  -webkit-transition: opacity 300ms ease-out;
}
.modal .modalclose {
  top: -94px;
          transition: top 300ms ease-in 0ms;
  -webkit-transition: top 300ms ease-in 0ms;
}

.show-modal .modal {
  left: 0;
          transition: left 0ms linear 0ms;
  -webkit-transition: left 0ms linear 0ms;
}
.show-modal .modal .modalbg {
  opacity: 1;
          transition: opacity 300ms ease-in;
  -webkit-transition: opacity 300ms ease-in;
}
.show-modal .modal .modalcontent {
  opacity: 1;
          transition: opacity 350ms ease-in 320ms;
  -webkit-transition: opacity 350ms ease-in 320ms;
}
.show-modal .modal .modalclose {
  top: 30px;
          transition: top 320ms ease-out 320ms;
  -webkit-transition: top 320ms ease-out 320ms;
}