
/* ハンバーガーメニュー */
.burger {
    width: 30px;
    height: 21px;
    cursor: pointer;
    position: relative;
    z-index: 100;
   }
.burger > div {
      width: 100%;
      height: 3px;
      background-color: #808080;
      border-radius: 6px;
      position: absolute; }
.normal:first-child {
  top: 0;
  left: 0;
  -webkit-transition: 0.2s;
          transition: 0.2s; }

.normal:nth-child(2) {
  top: 9px;
  left: 0; }

.normal:last-child {
  top: 18px;
  left: 0;
  -webkit-transition: 0.2s;
          transition: 0.2s; }



.topline {
  -webkit-animation: top 0.5s;
          animation: top 0.5s;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 10px; }

.bottomline {
  -webkit-animation: bottom 0.5s;
          animation: bottom 0.5s;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 10px; }

@-webkit-keyframes top {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  0% {
    top: 0; }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  100% {
    top: 10px; } }

@keyframes top {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  0% {
    top: 0; }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  100% {
    top: 10px; } }

@-webkit-keyframes bottom {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  0% {
    top: 21px; }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  100% {
    top: 10px; } }

@keyframes bottom {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  0% {
    top: 21px; }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  100% {
    top: 10px; } }

    .menu-container {
      display: none;
      position: absolute;
width: 100%;
z-index: 99;
left: 0;
padding-top: 58px;
background: rgba(0,0,0,0.5);
bottom: 0;
top: 0;
height: 120%;
    }
.menu{
      display: flex;
      flex-flow: column;
      align-items: flex-end;
      width: 48%;
      margin-left: 52%;
      background: #111;
      margin-top: -58px;
      height: calc(100% + 58px);
      padding-top: 75px;
    }
.menu h3.section{
  text-align: center;
  width: 100%;
  color: white;
  margin: 20% auto 10%;
}
    .menu .menu-item{
      width: 100%;
      text-align: center;
      color: #FFF!important;
      font-weight: bold;
      font-size: 1em;
    }
.menu .menu-item a{
  display: block;
  color: white!important;
  padding: 5% 5% 5%;
}
.sns {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.sns a img{
  display: block;
  padding: 0 0 20%;
  width: 60%;
  margin: 0 auto 20%;
}
.sns a{
  display: block;
}
.closed_menu{
  display: none!important;
}
.icon-lang span.arrow{
top: 2px;
background: url(../../img/service/icon_arrow.png);
width: 13px;
height: 8px;
background-size: contain;
color: #AEAEAE;
background-repeat: no-repeat;
left: 6px;
}
.icon-lang p{
  padding: .5vh 2vw;
  border: 1px solid #AEAEAE;
  display: inline-block;
  width: 25vw;
  position: relative;
  z-index: 100;
  left: -20%;
  margin: 0!important;
}
.lang_selected{
  border: none!important;
color: white!important;
}
.rot_arrow{
  background: url(../../img/service/icon_arrow_selected.png)!important;
transform: rotate(180deg)!important;
top: 1px;
}
.lang_list ul li{
    width: 100%;
    text-align: center;
}

.lang_inner{
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  width: 48%;
  margin-left: 52%;
  background: #111;
  margin-top: 38px;
  height: calc(94.5%);
  padding-top: 50px;
}
.lang_list ul li a{
  display: block;
color: white!important;
padding: 10% 5% 10%;
}
