/*pcメニュー~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media print, screen and (min-width: 768px) {
    #header .sp{
        display: none;
    }
    #header{
        background-color: #000000;
        border-bottom: #B6121B 2px solid;
    }
    #header .pc{
        width: 900px;
        margin: 0 auto;
        display:block;
    }
    #header .pc h1{
        width: 100%;
        margin: 0 auto;
        padding-left: 24px;
    }
    #header .pc ul{
        width: fit-content;
        margin: 0 auto;
        list-style: none;
    }
    #header .pc ul::after{
        clear: both;
        content: "";
        display: block;
    }
    #header .pc ul li{
        float: left;
    }
    #header .pc ul li a{
        color: #ffffff;
        font-weight: bold;
        font-size: 16px;
        padding: 8px 16px;
        display: inline-block;
    }
    #header .pc ul li a:hover{
        background-color: #B6121B;
        opacity: 1;
    }
    /*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
    #header.HeightMin{
        position: fixed;
          z-index: 999;/*最前面へ*/
        height:110px;
        width: 100%;
        animation: DownAnime 0.5s forwards;
      }
      #header.HeightMin h1{
        width: 260px;
        margin: 0 auto;
      }
      
      @keyframes DownAnime{
        from {
          opacity: 0;
        transform: translateY(-170px);
        }
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }

    
    }
    
/*spメニュー~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media print, screen and (max-width: 767px) {
    #header .pc{
        display: none;
    }

    #header .sp{
        background-color: #000000;
        border-bottom:#B6121B 2px solid;
        width: 100%;
        position: block;
        z-index: 998;
        padding-bottom: 2%;
    }
    #header .sp h1{
        width: 90%;
        height:auto;
        display: block;
        margin: 0 auto;
        text-align: left;
        padding: 2.5% 0 2.5% 10%;
    }
    #header .sp h1 img{
        width: 70%;
    }
    #header .sp .hamburger_outer #nav{
        position: absolute;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background-color: rgba(63,63,63,0.95);
        transition: .7s;
        z-index: 1000;
    }
    #header .sp .hamburger_outer #nav ul{
        padding: 80px 0 0;
        width: 100%;
    }
    #header .sp .hamburger_outer #nav ul li{
        list-style-type: none;
        font-size: 20px;
        border-bottom: #ffffff 1px solid;
    }
    #header .sp .hamburger_outer #nav a{
        display: block;
        text-decoration: none;
        color: #ffffff;
        margin: 0 15px;
        padding: 10px;
        transition: .5s;
    }
    #header .sp .hamburger_outer #nav li a:hover{
        color: #ffffff;
        background: #B6121B;
        border-bottom: none;
    }
    #header .sp .hamburger_outer{
        position: fixed;
        width: 100%;
        z-index: 1001;
    }
    #header .sp .hamburger_outer #hamburger {
        display: block;
        position: absolute;
        top: 13px;
        right: 15px;
        width: 30px;
        height: 25px;
        cursor: pointer;
        transition: 1s;
        z-index: 1002;
        background-color:#B6121B;
        border-radius: 6px;
        padding: 10px;
    }
    #header .sp .inner_line {
        display: block;
        position: absolute;
        left: 10;
        width: 29px;
        height: 3px;
        background-color: #ffffff;
        transition: 1s;
        border-radius: 4px;
    }
    #header .sp #line1 {
        top: 10px;
    }
    #header .sp #line2 {
        top: 21px;
    }
    #header .sp #line3 {
        bottom: 10px;
    }
    #header .sp  h2 {
        display: none;
    }
    #header .sp .in{
        transform: translateX(100%);
    }
    #header .sp .line_1,.line_2,.line_3{
        background: #000000;
    }
    #header .sp .line_1 {
        transform: translateY(11px) rotate(-45deg);
        top: 0;
    }
    #header .sp .line_2 {
        opacity: 0;
    }
    #header .sp .line_3 {
        transform: translateY(-11px) rotate(45deg);
        bottom: 0;
    }
    
}