/* common.cssから移植したcss いずれ整理したい */

.hamburger-inner {
  display: none;
}

@media all and (max-width: 767px) {
  .hamburger-inner {
    display: block;
  }

  html.body-fixed,
  html.body-fixed body {
    width: 100%;
    height: 100%;
  }

  #g-nav,
  #g-nav * {
    box-sizing: content-box;
  }

  .hamburgerMenu #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    background: #FFF;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    /*ナビの高さ*/
    /*動き*/
    transition: all 0.6s;
  }

  .hamburgerMenu #g-nav::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 52px;
    background: #F7F0E8;
    top: 0;
    right: 0;
    z-index: 1000;
  }

  .hamburgerMenu #g-nav.g-nav::before {
    background: #f6f6f6;
  }

  /*アクティブクラスがついたら位置を0に*/
  .hamburgerMenu #g-nav.panelactive {
    right: 0;
  }

  /*ナビゲーションの縦スクロール*/
  .hamburgerMenu #g-nav #g-nav-list {
    height: calc(100% - 108px);
    /*表示する高さ*/
    padding: 52px 0 56px;
    width: 100%;
    position: fixed;
    overflow-y: scroll;
  }

  .hamburgerMenu #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    height: calc(100% - 52px);
    /*表示する高さ*/
    z-index: 999;
    width: 100%;
    padding-top: 52px;
    -webkit-overflow-scrolling: touch;
  }

  /*ナビゲーション*/
  .hamburgerMenu #g-nav #g-nav-list a {
    text-decoration: underline;
    position: relative;
  }

  .hamburgerMenu #g-nav #g-nav-list a::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: calc(50% - 3.5px);
    right: 20px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .hamburgerMenu #g-nav #g-nav-list a,
  #g-nav #g-nav-list p {
    width: calc(100% - 30px);
    display: inline-block;
  }

  .hamburgerMenu #g-nav #g-nav-list a {
    font-size: 1.4rem;
    padding: 15px;
  }

  #g-nav #g-nav-list p {
    background: #F7F0E8;
    font-size: 1.6rem;
    padding: 10px 15px;
  }

  #g-nav #g-nav-list p.subTtl {
    background: #f7f4ef;
    font-size: 1.4rem;
  }

  .hamburgerMenu #g-nav #g-nav-list .navBox .toggle-contents a:not(.pl15) {
    padding: 15px 15px 15px 25px;
    width: calc(100% - 40px);
  }

  .hamburgerMenu #g-nav #g-nav-list .navBox li,
  .hamburgerMenu #g-nav #g-nav-list .btn {
    background: #FFF;
  }

  .hamburgerMenu #g-nav #g-nav-list .navBox .toggle-contents li {
    background: #f6f6f6;
  }

  .hamburgerMenu #g-nav #g-nav-list .navBox ul li+li {
    border-top: solid 1px #cdcdcd;
  }

  .hamburgerMenu #g-nav #g-nav-list .header-link-list .navBox ul li+li {
    border-top: solid 1px #FFF;
  }

  .hamburgerMenu #g-nav #g-nav-list .header-link-list .navBox dd ul li+li {
    border-top: none;
  }

  .hamburgerMenu #g-nav #g-nav-list .header-link-list .navBox dd ul li:not(.sub-ttl)+li:not(.sub-ttl) {
    border-top: solid 1px #cdcdcd;
  }

  .hamburgerMenu #g-nav ul {
    z-index: 999;
  }

  /*========= ボタンのためのCSS ===============*/
  .hamburgerMenu .btn-wrapper {
    position: absolute;
    width: 28px;
    right: 15px;
    top: 17px;
  }

  .hamburgerMenu .openbtn {
    position: absolute;
    z-index: 9999;
    /*ボタンを最前面に*/
    cursor: pointer;
    width: 28px;
    height: 20px;
  }

  .hamburgerMenu .openbtn.active {
    top: -3px;
    height: 24px;
  }

  /*×に変化*/
  .hamburgerMenu .openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    border-radius: 2px;
    width: 100%;
    height: 2px;
    background-color: #000;
  }

  .hamburgerMenu .openbtn span:nth-of-type(1) {
    top: 0;
    left: 0;
  }

  .hamburgerMenu .openbtn span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .hamburgerMenu .openbtn span:nth-of-type(3) {
    width: 18px;
    bottom: 0;
    left: 0;
  }

  .hamburgerMenu .openbtn.active span:nth-of-type(1) {
    width: 100%;
    height: 2px;
    top: 5px;
    background-color: #000;
    transform: translateY(6px) rotate(-45deg);
  }

  .hamburgerMenu .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .hamburgerMenu .openbtn.active span:nth-of-type(3) {
    width: 100%;
    height: 2px;
    top: 17px;
    background-color: #000;
    transform: translateY(-6px) rotate(45deg);
  }

  .hamburgerMenu .toggle-title {
    position: relative;
    padding: 15px;
    cursor: pointer;
    font-size: 1.4rem;
  }

  .hamburgerMenu .toggle-title::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    right: 16px;
    bottom: 0;
    margin: auto;
    width: 13.5px;
    height: 2px;
    background-color: #999;
    transition: .2s;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }

  .hamburgerMenu .toggle-title.selected::before {
    display: none;
  }

  .hamburgerMenu .toggle-title::after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    margin: auto;
    width: 13.5px;
    height: 2px;
    background-color: #999;
    transition: .3s;
  }

  .hamburgerMenu .header-link-list .toggle-title {
    background-color: #F7F0E8;
  }

  .hamburgerMenu #g-nav #g-nav-list .header-link-list .navBox .toggle-contents li {
    background-color: #FFF;
  }

  .hamburgerMenu .header-link-list .navBox {
    border-bottom: solid 1px #FFF;
  }

  #g-nav #g-nav-list .header-link-list dd p {
    background-color: #f7f4ef;
    font-size: 1.4rem;
  }

  #g-nav #g-nav-list .header-link-list dd ul li.sub-ttl:first-of-type {
    border-top: solid 1px #FFF;
  }

  .hamburgerMenu .toggle-contents dd {
    display: none;
  }

  #g-nav #g-nav-list .btn-bottom {
    background: #F7F0E8;
    padding: 15px;
    display: flex;
  }

  #g-nav #g-nav-list .btn-bottom p {
    padding: 0 0 0 20px;
    font-size: 1.4rem;
    text-align: center;
    position: relative;
    display: inline-block;
  }

  #g-nav.g-nav #g-nav-list .btn-bottom,
  #g-nav.g-nav #g-nav-list .btn-bottom * {
    background: #f6f6f6;
  }

  #g-nav #g-nav-list .btn-bottom p::before,
  #g-nav #g-nav-list .btn-bottom p::after {
    content: "";
    display: inline-block;
    width: 14px;
    /*バツ線の長さ*/
    height: 1px;
    /*バツ線の太さ*/
    background: #000;
    transform: rotate(45deg);
    transform-origin: 0% 50%;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 33px);
  }

  #g-nav #g-nav-list .btn-bottom p::after {
    transform: rotate(-45deg);
    transform-origin: 100% 50%;
    left: calc(50% - 37px);
  }
}