@charset "UTF-8";

/* hamburger */
.hamburger {
  position:fixed;
  right: 3vw;
  top: 4.4vw;
  width: 50px;
  height: 40px;
  cursor: pointer;
  z-index: 9999;
}

  .hamburger__line {
    position: absolute;
    width: 50px;
    height: 1px;
    right: 0;
    background-color: #999;
    transition: all 0.3s;
  }

  .hamburger__line--1 {
    top: 1px;
  }

  .hamburger__line--2 {
    top: 18px;
  }

  .hamburger__line--3 {
    top: 36px;
  }

  /*ハンバーガーがクリックされたら*/
  .open .hamburger__line--1 {
    transform: rotate(-45deg);
    top: 18px;
  }

  .open .hamburger__line--2 {
    opacity: 0;
  }

  .open .hamburger__line--3 {
    transform: rotate(45deg);
    top: 18px;
  }


  /* nav menu-container
  =================================== */
  .menu-container {
    position: fixed;
    right: -100%;
    /*ハンバーガーがクリックされる前はWindow右側に隠す*/
    top: 0;
    width: 88%;
    /* 出てくるスライドメニューの幅 */
    height: 100vh;
    transition: all 0.5s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */
    padding: 12vw 0 0 0;
    background: #fff4e8;
  }

  /*ハンバーガーがクリックされたら右からスライド*/
  .open .menu-container {
    right: 0;
  }


  /* black-bg(ハンバーガーメニュー解除用bg) */
  .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0.5;
    visibility: hidden; 
    transition: all 0.5s;
    cursor: pointer;
    z-index: 100;
  }

  /*ハンバーガーメニューが開いたら表示*/
  .open .black-bg {
    visibility: visible;
    opacity: 0.8;
  }


  /* ------------ nav style ------------ */

  nav#globalNav > ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2rem;
  }
  nav#globalNav ul li {
    width: 100%;
    height: auto;
    list-style: none;
    font-weight: 300;
  }
    nav#globalNav ul li:first-child {
      border: none;
    }



    nav#globalNav ul > li a {
      display: block;
      padding: 1rem;
      color: #d87e24;
      border: 1px solid #fecc99;
      background: #fff;
      text-decoration: none;
    }
        nav#globalNav ul li ul li a {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }





/*------------------ footerSubNav ------------------*/

aside.forMo h1 {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

nav#footerSubNav01,
nav#footerSubNav02 {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 3rem;
  color: #fff;
}
  nav#footerSubNav01 ul,
  nav#footerSubNav02 ul {
    display: block;
  }
  nav#footerSubNav01 a,
  nav#footerSubNav02 a {
    display: block;
    max-width: 500px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    padding: 0.5rem;
    background: #e59b5b;
    border-radius: 0.3rem;
  }

    nav#footerSubNav01 ul#menu-footersubnav01,
    nav#footerSubNav02 ul#menu-footersubnav02 {
      width: 100%;
      padding: 0;
    }
      nav#footerSubNav01 ul#menu-footersubnav01 li,
      nav#footerSubNav02 ul#menu-footersubnav02 li {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem;
        font-size: 1rem;
      }


/*------------------------------ breadcrumbs on yoast seo------------------------------ */

p#breadcrumbs {
	padding: 0 0 3rem;
	font-size: 0.8rem;
}
  p#breadcrumbs span:not(:first-child) {
      padding-left: 20px;
  }