@charset "UTF-8";
@media screen and (min-width: 1250px) {
  .sr-only {
    display: none !important; } }
#menu {
  background-color: #2491CC;
  color: #fff;
  height: inherit;
  width: 45rem;
  position: fixed; }
  #menu ul {
    margin: 7vw auto 0 auto;
    width: 90%;
    text-align: center; }
    #menu ul li {
      font-size: clamp(16px, 2.5vw, 20px);
      font-weight: bold;
      text-align: left;
      margin: 0 auto 2.5vw auto;
      padding-left: 50px;
      position: relative;
      width: 80%; }
      #menu ul li:before {
        position: absolute;
        display: block;
        content: "";
        width: 30px;
        height: 2px;
        background-color: #80D2FF;
        top: calc(50% - 1px);
        left: 0; }
      #menu ul li a {
        transition: 0.5s;
        display: block; }
        #menu ul li a:hover {
          transform: translatey(-10px); }

/*メニューオープン時の位置指定*/
.drawer--right .drawer-nav {
  right: -100vw;
  bottom: 0;
  transition: 1s; }

.drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 20vw; }

/*ハンバーガーボタンの設定*/
.drawer-hamburger {
  z-index: 4;
  top: 30px;
  width: 4rem;
  padding-top: 0; }

.drawer-hamburger-icon:before {
  top: -15px; }

.drawer-hamburger-icon:after {
  top: 15px; }

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  background-color: #2491CC;
  transition: all 1s; }

/*ハンバーガーボタンオープン時の設定*/
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
  background-color: #FFF;
  transition: 1s; }

.drawer--right.drawer-open .drawer-hamburger {
  right: calc(20vw + 10px); }

@media screen and (max-width: 960px) {
  #menu {
    background-color: rgba(36, 145, 204, 0.9);
    height: fit-content;
    width: 85%;
    position: fixed; }
    #menu ul {
      margin: 7vw auto 0 auto;
      width: 95%;
      text-align: center; }
      #menu ul li {
        font-size: clamp(16px, 2.5vw, 20px);
        margin: 0 auto 4vw auto;
        width: 80%; }
        #menu ul li:before {
          width: 25px; }

  /*メニューの位置指定*/
  .drawer--right .drawer-nav {
    right: -150vw;
    bottom: 0; }

  .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: -2vw; }

  /*ハンバーガーボタンの設定*/
  .drawer-hamburger {
    z-index: 4;
    top: 30px;
    width: 4rem;
    padding-top: 0; }

  .drawer-hamburger-icon:before {
    top: -15px; }

  .drawer-hamburger-icon:after {
    top: 15px; }

  .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #2491CC; }

  /*ハンバーガーボタンオープン時の設定*/
  .drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
    background-color: #FFF; }

  .drawer--right.drawer-open .drawer-hamburger {
    right: 0; } }