/* link transition */
header#header a,
header#header button,
dialog#drawer a,
dialog#drawer button,
footer#footer a,
footer#footer button {
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.6;
  }
}
.lang-buttons a {
  transition: color 0.3s, background-color 0.3s !important;
  display: inline-block;
  font-size: 14px;
  line-height: 2;
  border: solid 1px #fff;
  width: 140px;
  text-align: center;
  color: #fff;
  &:hover {
    opacity: 1 !important;
    background-color: #fff;
    color: #000 !important;
  }
}

/* header */
:root {
  --header-height: 66px;
  --hedader-bottom: var(--header-height);
}
body.admin-bar {
  --hedader-bottom: calc(var(--header-height) + var(--wp-admin--admin-bar--height));
  &.has-announcement {
    --hedader-bottom: calc(var(--header-height) + var(--wp-admin--admin-bar--height) + var(--announcement-height));
  }
}
header#header {
  /* z-index: 10; 2024.07.14削除 */
  background-color: #000;
  min-height: var(--header-height);
  padding: 0 0 0 20px;
}
.header-container {
  min-height: var(--header-height);
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & .nav-global {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  & .sitename a {
    display: block;
    width: calc(var(--header-height) * 1.3);
    aspect-ratio: 1000 / 468;
    background-image: url(../nanga_header-footer_images/sitename.svg);
    background-position: center center;
    background-size: contain; /* 2024.07.14追加 */
    background-repeat: no-repeat; /* 2024.07.14追加 */
    overflow: hidden;
    text-indent: -2000px;
  }
  & .nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  & button.open-dialog {
    width: var(--header-height);
    height: var(--header-height);
    background: none;
    border: none;
    cursor: pointer;
  }
  & button.open-dialog img {
    width: 50%;
  }
}
#global_menu {
  display: none;
  flex-wrap: wrap;
  gap: 30px;
  & a {
    color: #fff;
  }
  & > .menu-item {
    /* 2024.07.14削除
    position: relative;
    &:after {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 0;
      background-color: #fff;
      transition: height 0.3s;
    }
    */
    & > a {
      height: var(--header-height);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      font-size: 18px;
      position: relative;
      & span {
        display: block;
        font-size: 10px;
      }
      /* 2024.07.14追加ここから↓↓↓ */
      &:after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0;
        background-color: #fff;
        transition: height 0.3s;
        opacity: 1;
      }
      &:hover {
        opacity: 1;
        &:after {
          height: 7px;
        }
      }
      /* 2024.07.14追加ここまで↑↑↑ */
    }
    & > .sub-menu {
      position: absolute; /* 2024.07.14変更 */
      z-index: 10; /* 2024.07.14追加 */
      top: var(--hedader-bottom);
      left: 0;
      width: 100vw;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(4px);
      transition: max-height 0.3s, opacity 0.3s;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      box-sizing: border-box;
      padding: 0 30px;
      & > .menu-item {
        & > a {
          display: block;
          font-size: 18px;
          padding: 30px 0;
        }
        & .sub-menu {
          padding-bottom: 30px;
          & a {
            font-size: 14px;
            display: block;
            line-height: 2;
          }
        }
      }
    }
    &:hover {
      /* 2024.07.14削除
      &:after {
        height: 7px;
      }
      */
      & > .sub-menu {
        max-height: 100vh;
        opacity: 1;
      }
    }
  }
}
@media (min-width: 1260px) {
  :root {
    --header-height: 100px;
  }
  header#header {
    padding-right: 20px;
  }
  #global_menu {
    display: flex;
    & > .menu-item > .sub-menu {
      padding: 0 calc(calc(calc(100vw - 1260px) / 2) + 30px);
    }
  }
  .header-container button.open-dialog {
    display: none;
  }
}

/* drawer */
dialog#drawer {
  border: none;
  width: 100vw;
  max-width: 900px;
  max-height: 100vh;
  height: 100vh;
  margin: 0 0 0 auto;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  color: #fff;
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
  }
  &[data-dialog-state="open"],
  &[data-dialog-state="open"]::backdrop {
    animation: fade-in ease 0.3s;
  }
  &[data-dialog-state="close"],
  &[data-dialog-state="close"]::backdrop {
    animation: fade-out ease 0.3s;
  }
  &[data-drawer] {
    height: 100vh;
    margin: 0 0 0 auto;
  }
  &[data-drawer="left"] {
    margin: 0 auto 0 0;
  }
  &[data-drawer]::backdrop {
    padding: 0;
  }
  &[data-drawer][data-dialog-state="open"] {
    animation: slide-in-from-right ease 0.3s;
  }
  &[data-drawer][data-dialog-state="close"] {
    animation: slide-out-to-right ease 0.3s;
  }
  &[data-drawer="left"][data-dialog-state="open"] {
    animation: slide-in-from-left ease 0.3s;
  }
  &[data-drawer="left"][data-dialog-state="close"] {
    animation: slide-out-to-left ease 0.3s;
  }
  & a {
    color: #fff;
  }
  & .dwawer-header {
    height: var(--header-height);
    display: flex;
    justify-content: end;
    background-color: #000;
    & button {
      width: var(--header-height);
      height: var(--header-height);
      background: none;
      border: none;
      cursor: pointer;
    }
    & button img {
      width: 50%;
    }
  }
  & .dwawer-body {
    padding: 15px 20px;
  }
  & .dwawer-footer {
    position: sticky;
    top: 100%;
    padding: 40px 20px;
  }
}
body[data-dialog-state="open"] {
  overflow: hidden;
}
body[data-dialog-state="close"] {
  overflow: auto;
}
#drawer_menu {
  & > .menu-item {
    border-top: solid 1px #666;
    & > a {
      padding: 15px 0;
      display: block;
      font-size: 24px;
      border: none;
      position: relative;
      &::after {
        content: url(../nanga_header-footer_images/icon_arrow-right.svg);
        width: 24px;
        height: 24px;
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        transition: transform 0.3s;
      }
      & span {
        display: block;
        font-size: 12px;
      }
    }
    &.menu-item-has-children {
      & > a:after {
        transform: translateY(-50%) rotate(90deg);
      }
      & > .sub-menu {
        max-height: 0;
        transition: max-height 0.3s;
        overflow: hidden;
        &:before {
          content: "";
          display: block;
          border-top: solid 1px #666;
        }
      }
      &[data-state="open"] {
        & > a:after {
          transform: translateY(-50%) rotate(-90deg);
        }
        & > .sub-menu {
          max-height: 300vh;
        }
      }
    }
    &:last-child {
      border-bottom: solid 1px #666;
    }
    & > .sub-menu {
      & > .menu-item {
        margin: 10px 0;
        & > a {
          padding: 5px 0;
          display: block;
          font-size: 24px;
        }
      }
      & .sub-menu {
        display: flex;
        flex-wrap: wrap;
        margin-top: 7px;
        gap: 10px 15px;
        & a {
          font-size: 18px;
        }
        padding: 5px 0 25px;
      }
    }
  }
}
#sns_menu,
#sns_drawer_menu {
  display: flex;
  gap: 18px;
  & a {
    display: block;
    width: 34px;
    height: 34px;
    overflow: hidden;
    background-position: center center;
    background-size: content;
    overflow: hidden;
    text-indent: -2000px;
  }
  & .facebook a {
    background-image: url(../nanga_header-footer_images/sns_facebook.svg);
  }
  & .x-twitter a {
    background-image: url(../nanga_header-footer_images/sns_x-twitter.svg);
  }
  & .instagram a {
    background-image: url(../nanga_header-footer_images/sns_instagram.svg);
  }
  & .youtube a {
    background-image: url(../nanga_header-footer_images/sns_youtube.svg);
  }
}
[id^="drawer_sub_menu"] {
  margin: 40px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  & .menu-item {
    display: inline;
    padding-right: 12px;
    border-right: solid 1px #fff;
    & a {
      display: inline-block;
      font-size: 12px;
      line-height: 1;
    }
  }
  & .menu-item:first-child a {
    padding-left: 0;
  }
  & .menu-item:last-child {
    border-right: none;
  }
}
#drawer_lang {
}

/* footer */
footer#footer {
  position: sticky;
  top: 100%;
  background-color: #000;
  color: #fff;
  gap: 30px;
}
.footer-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 30px;
  box-sizing: content-box;
  & a {
    color: #fff;
  }
  & .footer-content {
    margin-top: 30px;
    & .title {
      font-size: 22px;
      font-weight: 600;
    }
    & .text {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.8;
    }
    & .button {
      margin-top: 15px;
      & a {
        transition: color 0.3s, background-color 0.3s !important;
        display: inline-block;
        font-size: 14px;
        font-weight: 700;
        line-height: 2;
        border: solid 1px #fff;
        width: 180px;
        text-align: center;
        color: #000;
        background-color: #fff;
        &:hover {
          opacity: 1 !important;
          background-color: #000;
          color: #fff !important;
        }
      }
    }
  }
  & .footer-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    & a {
      display: block;
      font-size: 12px;
      line-height: 2.5;
    }
  }
}
#footer_lang {
  margin-top: 20px;
}
.footer-bottom {
  border-top: solid 1px #888;
  padding: 20px 30px;
}
.footer-bottom-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  & .copyright {
    font-size: 12px;
    color: #999;
  }
}
@media (min-width: 640px) {
  .footer-container {
    flex-direction: row;
  }
  .footer-bottom-container {
    flex-direction: row;
  }
}