/*---------------------------------------------

menu

---------------------------------------------*/
@media screen and (min-width : 769px) {
  
  #menuPlate {
    background: #000;
    width: 100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
  }
  #menuBtn, #menuBtn2 {
    display: none;
    pointer-events: none;
  }
  #menuAll {
    width: 100%;
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    display: block;
  }
  
  #logo_nav{
    width: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    z-index: 12;
    line-height: 0;
  }
  
  #menu {
    width: 100%;
    height: 85px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  #menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    float: left;
    left: 50%;
  }
  #menu ul li {
    height: 86px;
    padding: 22.5px 17px;
    margin: 0;
    text-align: center;
    position: relative;
    float: left;
    left: -50%;
  }
  #menu ul li img{
    height: 40px;
    transition: all 0.3s ease;
  }
  #menu ul li img:hover {
    opacity: 0.8;
  }
    
  
  /*---------------------------------------------

sns

----------------------------------------------*/
  #snsAll {
    width: 120px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: 10px;
    z-index: 45;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
  }
  #snsAll2{ display: none;}
  .iX {
    background: url("../images/sns/i_x.png") no-repeat center;
    background-size: contain;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    margin-right: -2px;
  }
  .iInstagram {
    background: url("../images/sns/i_instagram.png") no-repeat center;
    background-size: contain;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    margin-right: -2px;
  }
  .iTiktok {
    background: url("../images/sns/i_tiktok.png") no-repeat center;
    background-size: contain;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
    margin-right: -2px;
  }
  .iX a, .iInstagram a, .iTiktok a {
    width: 100%;
    height: 100%;
    display: block;
  }
  .iX:hover, .iInstagram:hover, .iTiktok:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width : 768px) {

  #menuBtn {
    background: url("../images/nav/btn_menu01.png") no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
  }
  #menuBtn2 {
    background: url("../images/nav/btn_menu02.png") no-repeat;
    background-size: 100% 100%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
    display: none;
  }
  #menuPlate {
    background: #000;
    width: 100%;
    height: 60px;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 35;
  }
  #menuAll {
    background: #000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 52;
    overflow-y: auto;
    display: none;
  }
  #logo_nav{
    width: 100%;
    text-align: center;
    margin: 0 auto 20px;
  }
  #logo_nav img{ width: 180px;}
  
  #menu {
    width: 80%;
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    left: 10%;
    z-index: 2;
  }
  #menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  #menu ul li {
    width: 100%;
    padding: 10px 0;
    margin: 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid #8c0a0b;
  }
  #menu ul li img{ height: 36px;}
  
  #menu ul li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #05364d;
  }
  /*---------------------------------------------

sns

----------------------------------------------*/
  #snsAll {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid #8c0a0b;
  }
  #snsAll2 {
    width: 120px;
    height: 40px;
    position: fixed;
    top: 12px;
    right: 2px;
    z-index: 51;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform: scale(0.9);
  }
  .iX {
    background: url("../images/sns/i_x.png") no-repeat center;
    background-size: contain;
    width: 36px;
    height: 36px;
    margin: 0 2px;
  }
  .iInstagram {
    background: url("../images/sns/i_instagram.png") no-repeat center;
    background-size: contain;
    width: 36px;
    height: 36px;
    margin: 0 2px;
  }
  .iTiktok {
    background: url("../images/sns/i_tiktok.png") no-repeat center;
    background-size: contain;
    width: 36px;
    height: 36px;
    margin: 0 2px;
  }
  .iX a, .iInstagram a, .iTiktok a {
    width: 100%;
    height: 100%;
    display: block;
  }
}