@charset "utf-8";
#navTgl:checked ~ .contents { transform: translateX(250px); }
#navTgl { display: none; }
label { cursor: pointer; position: fixed; top: 0; left: 0; }
.open {
  z-index: 2;
  width: 48px;
  height: 48px;
  background: #04c5ef;
  transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  border: 2px solid #FFF;
}
.open::before,.open::after { content: ""; }
.open span,.open::before,.open::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 30%;
  width: 40%;
  border-bottom: 2px solid white;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before { transform: translateY(-8px); }
.open::after { transform: translateY(8px); }
.close {
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: background .6s;
}
#navTgl:checked + .open { background: #ff297f; transform: translateX(250px); z-index: 4;}
#navTgl:checked + .open span { transform: scaleX(0); }
#navTgl:checked + .open::before { transform: rotate(45deg); }
#navTgl:checked + .open::after { transform: rotate(-45deg); }
#navTgl:checked ~ .close { pointer-events: auto; background: rgba(0,0,0,.3); z-index:2;}
.menu {
  z-index: 1;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border-right: 5px solid #FFF;
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index:3;
  background:
  url(/dreaming/lp/marui_2019/assets/img/00_memu_bg.png) no-repeat bottom left,
  url(/dreaming/lp/marui_2019/assets/img/sp/menu_background.jpg) repeat-y;
  background-size: contain,auto;
}

.menu a {
  display: block;
  padding: .5em;
  text-decoration: inherit;
  transition: background .6s;
  font-size: 3vh;
}

#navTgl:checked ~ .menu { transform: none; }

header {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background: rgb(118,225,224);
  background: -moz-linear-gradient(left,  rgb(118,225,224) 0%, rgb(125,185,232) 100%);
  background: -webkit-linear-gradient(left,  rgb(118,225,224) 0%,rgb(125,185,232) 100%);
  background: linear-gradient(to right,  rgb(118,225,224) 0%,rgb(125,185,232) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76e1e0', endColorstr='#7db9e8',GradientType=1 );
}

header nav ul {
  max-width: 1100px;
  display: flex;
  width: 100%;
  margin: 0;
  font-size: .8em;
  text-align: center;
  white-space: nowrap;
  margin:0 auto;
}

header nav{
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

header nav .logo{
  width: 11.85%;
  position: absolute;
  top: 0;
  left: 0;
}
header nav .logo img{ width: 100%; }
header nav.goods ul { max-width: 800px; }
header nav.goods ul li img{ height: 80%; }
header nav li {
  display: flex;
  flex-basis: 25%;
}
header nav li a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.1em 1em 0.9em 1em;
  color: white;
  text-decoration: inherit;
}

header nav.goods li a {padding: 0.7em 1em;}


.ani { opacity: 0; transition: all .5s ease; }
.ani.show { opacity: 1; transform: none; }
.ani-lr { transform: translate(-100px, 0); }
.ani-rl { transform: translate(100px, 0); }
.ani-up { transform: translate(0, 100px); }
.ani-down {transform: translate(0, -100px); }
.ani-scaleUp { transform: scale(.5); }
.ani-scaleDown { transform: scale(1.5); }
.ani-rotateL { transform: rotate(180deg); }
.ani-rotateR { transform: rotate(-180deg); }

h2{
  text-align: center;
  margin-bottom: 3em;
}

#page-top {
  position: fixed;
  bottom: 1%;
  right: 0;
  z-index: 2;
}
#page-top a {
  display: block;
  text-decoration: none;
}

#page-top a img{ width: 100px; }

@media screen and (min-width: 768px) {
  .open {
    display: none;
  }
}

/*==========================================
SP
==========================================*/
@media screen and (max-width: 768px) {
  header nav { display: none; }

  h2{
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 3em;
  }

  #page-top a {width: 80px;}
  #page-top img{ width: 90%;}

  #sns { padding: 6em 0 2em; }

}