/* Style for PCs */
@media screen and (min-width: 1025px) {

.menubody {
display:none;
}
.menubn {
display: none;
}
.navmenu {
display:none;
}
.navmenu ul li {
display:none;
}
.navmenu ul li a {
display:none;
}
.navmenu ul li a:hover {
display:none;
}

}

/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

.pc-nav {
display:none!important;
}

/* Mobile Menu */
.menubody {
width:auto;
height:auto;
display: block;
}

.menubn {
display: block;
position: fixed;
z-index: 21500;
right: 13px;
top: 8px;
width: 42px;
height: 42px;
cursor: pointer;
text-align: center;
}

/* Menu botton*/
.menubn span {
display: block;
position: absolute;
width: 30px;
height: 2px;
left: 6px;
background: var(--color-black);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.menubn span:nth-child(1) {
top: 10px;
}

.menubn span:nth-child(2) {
top: 20px;
}

.menubn span:nth-child(3) {
top: 30px;
}
.menubn p.mbt01 {
  font-size:8px;
  font-weight: 400;
  text-align: center;
  line-height: 1em;
  letter-spacing: 0px;
  margin-top:36px;
}
.menubn p.mbt02 {
  display: none!important;
}

/* ナビ開いてる時のボタン */
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-white);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.menubn.active span:nth-child(2),
.menubn.active span:nth-child(3) {
top: 16px;
background: var(--color-white);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.menubn.active p.mbt01 {
  display: none!important;
}
.menubn.active p.mbt02 {
  display: block!important;
  font-size:8px;
  font-weight: 400;
  text-align: center;
  line-height: 1em;
  letter-spacing: 0px;
  color:var(--color-white);
  margin-top:36px;
}

nav[role=navigation] {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:-100%;
left:0;
z-index:20050;
clear: both;
padding: 20% 10% 60px 10%;
background-color:rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

nav[role=navigation].active {
top:0;
overflow-y:scroll;
}

.mobmenu {
width:100%;
height:auto;
display:block;
}
.mobmenu ul {
display: none;
}

.mobmenu span {
cursor: pointer;
width:100%;
height:50px;
display:block;
font-size:16px;
font-weight:400;
letter-spacing: 0px;
color:var(--color-white);
line-height:50px;
padding:0px 10px;
border-bottom:1px dotted var(--color-666);
background-position:96% center;
background-repeat:no-repeat;
background-size:auto 16px;
background-image: url("../img/header/ic-ar_vd_c.svg");
}
.mobmenu span.smact {
color:var(--color-white);
background-image: url("../img/header/ic-ar_vu_w.svg");
background-color: #3d0000a5;
border-bottom:1px dotted #3d0000a5;
}
.mobmenu ul {
overflow-y:auto;
background-color: #3d0000a5;
border-bottom:1px dotted var(--color-666);
padding:10px 10px;
}
.mobmenu ul li{
width:100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.mobmenu ul li:last-child {
border-bottom: none;
margin-bottom: 0px;
}
.mobmenu ul li a {
width:100%;
height: auto;
display:block;
font-size:14px;
font-weight: 700;
line-height: 1em;
color:var(--color-white);
justify-content: space-between;
text-decoration: none;
padding:15px 15px;
border:1px solid #935837;
border-radius: 5px;
background-image: url("../img/header/ic-ar_hr_c.svg");
background-repeat: no-repeat;
background-position: 98% center;
background-size: auto 16px;
}
.mobmenu ul li a strong {
  display: block;
  font-size:8px;
  font-weight: 400;
  color:var(--color-1st);
  font-family: var(--font-en);
  margin-top:8px;
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li:last-child {
border-bottom:none;
}
.mobmenu2 li a {
width:100%;
height:50px;
display:block;
font-size:16px;
text-decoration: none;
font-weight:400;
letter-spacing: 0px;
color:var(--color-white);
line-height:50px;
padding:0px 10px;
border-bottom:1px dotted var(--color-666);
background-image: url("../img/header/ic-ar_hr_c.svg");
background-repeat: no-repeat;
background-position: 98% center;
background-size: auto 16px;
}


}

/* Style for Smartphone */
@media screen and (max-width: 768px) {

  .pc-nav {
    display:none!important;
    }

    /* Mobile Menu */
    .menubody {
    width:auto;
    height:auto;
    display: block;
    }

    .menubn {
    display: block;
    position: fixed;
    z-index: 21500;
    right: 10px;
    top: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    }

    .menubn.mbactive {
      top: 5px;
    }

    /* Menu botton*/
    .menubn span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: var(--color-black);
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    }

    .menubn span:nth-child(1) {
    top: 10px;
    }

    .menubn span:nth-child(2) {
    top: 20px;
    }

    .menubn span:nth-child(3) {
    top: 30px;
    }
    .menubn p.mbt01 {
      font-size:8px;
      font-weight: 400;
      text-align: center;
      line-height: 1em;
      letter-spacing: 0px;
      margin-top:36px;
    }
    .menubn p.mbt02 {
      display: none!important;
    }

    /* ナビ開いてる時のボタン */
    .menubn.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background: var(--color-white);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

    .menubn.active span:nth-child(2),
    .menubn.active span:nth-child(3) {
    top: 16px;
    background: var(--color-white);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    }

    .menubn.active p.mbt01 {
      display: none!important;
    }
    .menubn.active p.mbt02 {
      display: block!important;
      font-size:8px;
      font-weight: 400;
      text-align: center;
      line-height: 1em;
      letter-spacing: 0px;
      color:var(--color-white);
      margin-top:36px;
    }

    nav[role=navigation] {
    width:100%;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top:-100%;
    left:0;
    z-index:20050;
    clear: both;
    padding: 20% 10% 60px 10%;
    background-color:rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }

    nav[role=navigation].active {
    top:0;
    overflow-y:scroll;
    }

    .mobmenu {
    width:100%;
    height:auto;
    display:block;
    }
    .mobmenu ul {
    display: none;
    }

    .mobmenu span {
    cursor: pointer;
    width:100%;
    height:50px;
    display:block;
    font-size:16px;
    font-weight:400;
    letter-spacing: 0px;
    color:var(--color-white);
    line-height:50px;
    padding:0px 10px;
    border-bottom:1px dotted var(--color-666);
    background-position:96% center;
    background-repeat:no-repeat;
    background-size:auto 16px;
    background-image: url("../img/header/ic-ar_vd_c.svg");
    }
    .mobmenu span.smact {
    color:var(--color-white);
    background-image: url("../img/header/ic-ar_vu_w.svg");
    background-color: #3d0000a5;
    border-bottom:1px dotted #3d0000a5;
    }
    .mobmenu ul {
    overflow-y:auto;
    background-color: #3d0000a5;
    border-bottom:1px dotted var(--color-666);
    padding:10px 10px;
    }
    .mobmenu ul li{
    width:100%;
    height: auto;
    display: block;
    margin-bottom: 5px;
    }
    .mobmenu ul li:last-child {
    border-bottom: none;
    margin-bottom: 0px;
    }
    .mobmenu ul li a {
    width:100%;
    height: auto;
    display:block;
    font-size:14px;
    font-weight: 700;
    line-height: 1em;
    color:var(--color-white);
    justify-content: space-between;
    text-decoration: none;
    padding:15px 15px;
    border:1px solid #935837;
    border-radius: 5px;
    background-image: url("../img/header/ic-ar_hr_c.svg");
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: auto 16px;
    }
    .mobmenu ul li a strong {
      display: block;
      font-size:8px;
      font-weight: 400;
      color:var(--color-1st);
      font-family: var(--font-en);
      margin-top:8px;
    }

    .mobmenu2 {
    width:100%;
    height:auto;
    display:block;
    }
    .mobmenu2 li {
    width:100%;
    height:auto;
    display:block;
    }
    .mobmenu2 li:last-child {
    border-bottom:none;
    }
    .mobmenu2 li a {
    width:100%;
    height:50px;
    display:block;
    font-size:16px;
    text-decoration: none;
    font-weight:400;
    letter-spacing: 0px;
    color:var(--color-white);
    line-height:50px;
    padding:0px 10px;
    border-bottom:1px dotted var(--color-666);
    background-image: url("../img/header/ic-ar_hr_c.svg");
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: auto 16px;
    }

}