/* misc header */
div.fixed-header {
  background-color: #ffffff; /* left right color */
}
header {
  padding:16px 16px 0 16px;
  background-color: #ffffff;
  color: #ff008c;
}
header a {
  color: #ff008c;
  display: block;
  width: 100%;
  text-decoration:none;
}
header a:hover, header a:focus {
  color: #ff008c;
}
header a.selected {
  text-decoration: underline;
}

header figure {
  color: #ff008c;
  margin-bottom: 12px;
}
/* show full header only if menu is open */
header figure .logo-one {
  display:none;
}
header.menu-open figure .logo-one {
  display: block;
}
header.menu-open figure .logo-two {
  display: none;
}


#mobile-menu {
  display: none;
  overflow: scroll;
  height: calc(100vh - 96px);
}
#mobile-menu .scrollable {
  padding-bottom: 32px;
}
#mobile-menu.show {
  display: block;
}
#mobile-menu.show ul.social {
  margin: 32px 0 0 0;
  padding: 0;
}
#mobile-menu.show ul.social li {
  display: inline-block;
  list-style: none;
  font-size: 24px;
  margin-right: 8px;
}

ul.social li .fa-substitute {
  width: 21px; 
  height: 22px; 
  background-color: #ff008c;
  border-radius: 5px;
  position: relative;
  top: 2px;
  padding: 3px;
}
ul.social li .fa-substitute img {
  display: block;
}
ul.social li .fa-substitute img.fa-bluesky {
  position:relative;
  top: 2px;
}


.from-tablet-menu {
  display: none;
}

#mm-trigger {
  position:absolute;
  top: 0;
  right:16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

#mm-trigger:not(.open)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 4px;
  background: #ff008c;
  box-shadow: 0 10px 0 0 #ff008c, 0 20px 0 0 #ff008c;
}
#mm-trigger.open {
  top: -6px;
}
#mm-trigger.open::before {
  content: '';
  height: 32px;
  left: 16px;
  border-left: 4px solid #ff008c;
  position: absolute;
  transform: rotate(-45deg);
}
#mm-trigger.open::after {
  content: '';
  height: 32px;
  left: 16px;
  border-left: 4px solid #ff008c;
  position: absolute;
  transform: rotate(45deg);
}

/* header nav */
header nav ul {
  display: block;
  padding:0;
  margin:0;
}
header nav ul li {
  display: block;
  font-size: 16px;
  font-family: "nippon_connectionbold";
  white-space: nowrap;
}
body.ja header nav ul li {
  font-family: 'noto_sans_jpbold', 'robotobold';
  font-weight: 700;
}
header nav ul.menu li {
  margin-top: 24px;
}

header nav ul.submenu {
  display: block;
  background-color:#ffffff;
  margin: 0;
  padding: 0;
}
header nav ul.submenu li {
  margin-top: 0;
  display: block;
  font-family: "robotobold";
  font-size: 13px;
}
body.ja header nav ul.submenu li {
  font-family: 'noto_sans_jpbold', 'robotobold';
}
header nav ul.submenu li a {
  padding:3px 0;
}

/* meta nav */
header nav.meta {
  display:block;
  margin-top: 24px;
}
header nav ul.lang-list, header nav ul.user-menu {
  display: block;
}
header nav ul.lang-list {
  text-transform: uppercase;
}
header nav ul.lang-list li, header nav ul.user-menu li  {
  display: inline-block;
}
header nav ul.lang-list li a, header nav ul.user-menu li a {
  display: inline;
  margin: 0 8px 0 0;
}
header nav ul.user-menu li button.user-menu-item {
  display: inline;
  margin: 0 8px 0 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
header nav ul.lang-list li a.grey, header nav ul.user-menu li a.grey  {
  font-weight: normal;
  color: grey;
}

header nav ul.lang-list li:last-child::after {
  content: "";
}

header #dropdown-specials {
  display:none;
}

/* TABLET */
@media (min-width: 768px) {
  #header-fixed {
    transition: transform 0.2s ease-out;
  }

  #header-fixed.minimal {
    transform: translate(0,-66px);
  }

  #mm-trigger {
    display: none;
  }
  #mobile-menu, #mobile-menu.show {
    display: none;
  }
  .from-tablet-menu {
    display: block;
  }

  header figure .logo-one {
    display: block;
  }
  header figure .logo-two {
    display: none;
  }

  header nav ul {
    display: flex;
    justify-content: space-between;
  }
  header nav ul li {
    /* flex: 1 1 0px; */
    display: inline-block;
    position: relative;
  }

  header nav.main {
    position: absolute;
    top: 64px;
    right: 16px;
    width: 100%;
  }
  header nav.main ul.menu {
  }

  header nav ul.menu li {
    margin-top: 0;
  }

  header nav ul.submenu {
    /* min-height: 270px; */
    margin: 32px 0 0 0;
    padding: 0;
    height: 0px;
    /* overflow: hidden; */
    display: none;
    /* position: absolute; */
    /* width: 100vw; */
    z-index: 2;
    transition: height 50ms ease-in;
  }
  header nav ul.submenu.show {
    margin: 0;
    padding: 32px 0 0 0;
    /* height: 270px; */
    display: block;
  }
  header nav ul.submenu li {
    margin-right: 0;
    line-height: 1.4;
    height: 24px;
  }
  header nav ul.submenu li a {
    position: absolute;
  }

  header nav.meta {
    display:flex;
    justify-content:flex-end;
    margin:0;
  }
  header nav.meta ul li {
    padding-left: 40px;
  }


  header nav ul.lang-list li, header nav ul.user-menu li  {
    display: block;
    z-index: 4;
  }
  header nav ul.lang-list li a, header nav ul.user-menu li a {
    display: none;
    text-decoration: none;
    background-color: #ffffff;
    padding-left: 0;
    margin: 0;
  }
  header nav ul.lang-list li a.selected, header nav ul.lang-list li a.show,
  header nav ul.user-menu li a.selected {
    display: block;
    cursor: pointer;
  }
  header nav ul.user-menu:hover li a:not(.selected) {
    display: block;
    white-space: nowrap;
    width: max-content;
    padding-right: 12px;
  }
  header nav ul.user-menu li:not(:first-child) {
    width: 0;
    overflow: visible;
  }
  header nav ul.user-menu li a:not(.grey):not(.selected):hover {
    text-decoration: underline;
  }
  header nav ul.lang-list li a.selected::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
  }
  header nav ul.lang-list li::after {
    content: "";
    margin: 0;
  }

  header #dropdown-specials {
    height: 0;
    left: 0;
    top: 114px;
    display: none;
    overflow: hidden;
    transition: none;
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #f8f8fb;
  }
  header #dropdown-specials.shown {
    display: block;
    transition: height 50ms ease-in;
    height: 320px;
    background-color: #ffffff;
    color: #ff008c;
  }
  header #dropdown-specials h3 {
    font-size: 12px;
    line-height: 16px;
    margin: 28px 0 0 16px;
  }
  header #dropdown-specials hr.dropdown-hr {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    z-index: 3;
    border-top-color: #f8f8fb;
  }
  header #dropdown-specials.shown ul.social {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 240px;
    left: 23.2%;
  }
  header #dropdown-specials.shown ul.social li {
    display: inline-block;
    list-style: none;
    font-size: 28px;
    margin-right: 28px;
  }
  ul.social li .fa-substitute {
    width: 24px; 
    height: 24px; 
    top: 1px;
    padding: 4px;
  } 
}

/* DESKTOP */
@media (min-width: 992px) {
  header {
    padding: 16px 42px 0 42px;
  }

  header #dropdown-specials.shown ul.social {
    left: 33%;
  }
  header #dropdown-specials h3 {
    margin: 28px 0 0 42px;
    font-size: 18px;
    line-height: 24px;
  }
}

@media (min-width: 1200px) {
  header nav ul li {
    font-size: 20px;
  }
  header nav ul.submenu li {
    font-size: 16px;
    height: 28px;
  }
  header nav ul.submenu.show {
    /* height: 350px; */
  }
  header #dropdown-specials.shown {
    height: 400px;
  }
  header #dropdown-specials.shown ul.social {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 320px;
  }
  header #dropdown-specials h3 {
    font-size: 20px;
  }
}