@media screen and (min-width: 768px) {
 #secret1, #secret2, #secret3, #secret4, #secret5, #secret6 { display:none !important; }
 #about #trigger {display:none;}

 #header {
  width:100%;
  min-width:1100px;
  overflow: hidden;
  background-image: url('light.jpg');
  background-repeat: no-repeat;
  background-position:center top;
  background-size:max(1300px, 100vw) auto;
 }
 #header .header {
  position:relative;
  width:1100px;
  height:50px;
  margin:0 auto;
  padding-top:5px;
  z-index:100;
 }
 #header .icon.osanpo {
  position:absolute;
  top:6px;left:5px;
  height:45px;
 }
 #header .icon.room {
  position:absolute;
  top:15px;left:250px;
  height:30px;
 }
 #header .icon.nyanko {
  position:absolute;
  top:15px;left:277px;
  height:30px;
 }
 #header .logo {
  position:relative;
  top:3px;left:52px;
  height:40px;
 }
 #header .menu {
  display:flex;
  position:absolute;
  top:8px;right:0;
  flex-direction:row;
  list-style:none;
  width:775px;
  margin:6px 10px;
  padding:0;
 }
 #header .menu li {
  position:relative;
  text-align:center;
  font-size:12pt;
  font-weight:bold;
 }
 #header .menu li a {
  display:block;
  cursor:pointer;
  color:white;
  transition:0.2s;
 }
 #header .menu li a:hover:not(#header .menu li.login a:hover) {
  background:#1e90ff;
  color:#FFFFFF;
  border-radius:5px;
 }
 #header .menu li .mainmenu {
  margin:0 2px;
  padding:3px 11px 0 11px;
 }
 #header .menu li .membership {
  height:14px;
  margin-right:3px;
 }
 #header .menu .login {
  margin-left:5px;
  border-radius:20px;
  background: linear-gradient(135deg,  white , rgb(218, 202, 255) , white);
  background-size: 600% 600%;
  transition: background-position 1.0s ease;
 }
 #header .menu .login div {
  width:120px;
  margin:0 auto;
  border-radius:20px;
  background: linear-gradient(45deg, purple, violet , pink);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
 }
 #header .menu .login:hover {
  background-position: right center;
 }
 #header .menu .login_icon {
  position:relative;
  top:-1px;
  height:16px;
  vertical-align:middle;
  margin-left:5px;
 }
 #header .menu .member_icon {
  position:relative;
  top:-1px;
  height:16px;
  vertical-align:middle;
  margin-right:-5px;
  margin-right:5px;
 }
 #header_space { display:none; }

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

 /*jolly*/
 @keyframes shake {
   0%   { transform: translateX(0); }
   25%  { transform: translateX(-5px); }
   50%  { transform: translateX(5px); }
   75%  { transform: translateX(-5px); }
   100% { transform: translateX(0); }
 }
 .shake {
  animation: shake 0.3s;
 }
 /*jolly*/

 #header {
  position:fixed;
  width:100%;height:50px;
  background-image: url('light.jpg');
  background-repeat: no-repeat;
  background-position:top;
  background-size:1000px;
  z-index:100;
 }
 #header .icon.osanpo {
  position:absolute;
  top:5px;left:10px;
  height:40px;
 }
 #header .icon.room {
  position:absolute;
  top:6px;left:233px;
  height:40px;
 }
 #header .icon.nyanko {
  position:absolute;
  top:7px;left:270px;
  height:38px;
 }
 #header .logo {
  position:absolute;
  top:7px;left:55px;
  height:35px;
 }
 #header .menu {
  display:none;
 }
 #header_space {
  height:50px;
  max-height:10vh;
 }

}


@media screen and (min-width: 768px) {

 #header .hamburger { display:none; }
 #mobilemenu { display:none; }
 #mobilemenu_back { display:none; }

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

 #header .hamburger {
  position:absolute;
  top:0;right:0;
  width:15vw;height:50px;
  max-height:10vh;
  max-width:10vh;
 }
 #header .hamburger div {
  position:relative;
  width:100%;height:100%;
  pointer-events:none;
 }
 #header .hamburger span {
  position:absolute;
  right:15px;
  display:inline-block;
  width:30px;
  border-bottom:solid 3px white;
  transition:.3s;
 }
 #header .hamburger span:nth-of-type(1) { top:15px; }
 #header .hamburger span:nth-of-type(2) { top:25px; }
 #header .hamburger span:nth-of-type(3) { top:35px; }
 #header .hamburger.open span:nth-of-type(1) { transform:translate(0, 10px) rotate(-315deg); }
 #header .hamburger.open span:nth-of-type(2) { opacity: 0; }
 #header .hamburger.open span:nth-of-type(3) { transform:translate(0, -10px) rotate(315deg); }
 #mobilemenu {
  position:fixed;
  top:50px;right:-70%;
  width:70%;height:calc(100vh - 50px);
  background-image: url('light.jpg');
  background-repeat: no-repeat;
  background-position: -1000px -70px;
  background-size:2000px 130%;
  transition:.1s ease-out;
  z-index:100;
  overflow-y:scroll;
 }
 #mobilemenu .login_container {
  position:relative;
  width:100%;max-height:70px;
  margin:10px 0 0 0;
  text-align:center;
 }
 #mobilemenu .login {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:50%;
  margin-left:20px;
  padding:5px 0;
  background:white;
  border-radius:20px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
 }
 #mobilemenu .login div {
  width:130px;
  margin:0 auto;
  border-radius:20px;
  background: linear-gradient(45deg, purple, violet , pink);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
 }
 #mobilemenu .icon {
  vertical-align:middle;
  border-radius:10px;
  height:70px;
 }
 #mobilemenu .login_icon {
  position:relative;
  top:-2px;
  height:16px;
  vertical-align:middle;
  margin-left:5px;
  margin-right:-5px;
 }
 #mobilemenu .member_icon {
  position:relative;
  top:-2px;
  height:16px;
  vertical-align:middle;
  margin-left:-6px;
  margin-right:3px;
 }
 #mobilemenu .menu,
 #mobilemenu .submenu {
  position:relative;
  padding:10px;
  font-size:12pt;
  font-weight:bold;color:#fff485;
  text-shadow:-1px -1px 0 #999,1px -1px 0 #999,-1px  1px 0 #999,1px  1px 0 #999;
 }
 #mobilemenu .menu {
  padding-left:30px;
  border-top:solid transparent;
 }
 #mobilemenu .menu::before {
  content:"・";
  position:absolute;
  top:7px;left:5px;
  font-size:20px;
  font-weight:bold;
 }
 #mobilemenu a .menu::after {
  content:"";
  position:absolute;
  top:17px;right:20px;
  width:7px;height:7px;
  border-top:solid 2px;
  border-right:solid 2px;
  transform:rotate(45deg);
 }
 #mobilemenu_back {
  position:fixed;
  top:50px;left:0;
  display:none;
  width:100%;height:calc(100vh - 50px);
  background:black;
  opacity:0.6;
  z-index:99;
 }
 #mobilemenu .membership {
  height:14px;
  margin-left:5px;
 }
}

@media screen and (min-width: 768px) {

 #footer {
  width:100%;min-width:1100px;
  background-image: url('light.jpg');
  background-repeat: no-repeat;
  background-position: top;
  background-size:cover;
  color:white;
  font-size:10pt;
 }
 #footer .footer {
  width:1070px;
  margin:0 auto;
  padding:10px;
  text-align:right;
 }

} @media screen and (max-width: 767px) {
 #footer {
  width:100%;
  background-image: url('light.jpg');
  background-repeat: no-repeat;
  background-position: top;
  background-size:cover;
  color:white;
  font-size:10px;
 }
 #footer .footer {
  width:calc(100% - 20px);
  margin:0 auto;
  padding:5px 10px;
  text-align:right;
 }

}