/* 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: 4%;
top: 10px;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
background-image: url(../img/header/ic-menu_op.png);
background-repeat: no-repeat;
background-position: center 90%;
background-size: auto 9px;
}

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

.menubn span {
display: block;
position: absolute;
width: 40px;
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.active {
  background-image: url(../img/header/ic-menu_cl.png);
}
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-black);
-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-black);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

nav[role=navigation] {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0;
left:-100%;
z-index:19000;
clear: both;
padding:20% 10%;
background-color: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-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 {
left: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-black);
line-height:50px;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin-bottom: 3px;
}
.mobmenu span strong {
  width:100%;
  height: 50px;
  display: block;
padding:0px 10px;
font-weight:400;
background-position:96% center;
background-repeat:no-repeat;
background-size:auto 20px;
border-radius: 5px;
background-image: url("../img/header/ic-ar_v_b.png");
}
.mobmenu span.smact strong {
color:var(--color-white);
background-color:var(--color-4th);
background-image: url(../img/header/ic-ar_v_w_t.png);
}
.mobmenu ul {
overflow-y:auto;
}
.mobmenu ul li{
width:97%;
height: 50px;
display: block;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin:0 0 3px auto;
}
.mobmenu ul li a {
width:100%;
height:50px;
display:block;
font-size:16px;
text-decoration: none;
font-weight:400;
letter-spacing: 0px;
color:var(--color-4th);
line-height:50px;
padding:0px 10px 0 10px;
background-image: url("../img/header/ic-ar_b.png");
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 20px;
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin-bottom: 3px;
}
.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-black);
line-height:50px;
padding:0px 10px;
background-image: url("../img/header/ic-ar_b.png");
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 20px;
}


}

/* 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: 4%;
top: 10px;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
background-image: url(../img/header/ic-menu_op.png);
background-repeat: no-repeat;
background-position: center 90%;
background-size: auto 9px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.menubn.avix_active {
display: block;
position: fixed;
z-index: 21500;
right:4%;
top: 5px;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
}

.menubn span {
display: block;
position: absolute;
width: 40px;
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.active {
  background-image: url(../img/header/ic-menu_cl.png);
}
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-black);
-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-black);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

nav[role=navigation] {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0;
left:-100%;
z-index:19000;
clear: both;
padding:20% 10%;
background-color: rgba(255,255,255,0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-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 {
left: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-black);
line-height:50px;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin-bottom: 3px;
}
.mobmenu span strong {
  width:100%;
  height: 50px;
  display: block;
padding:0px 10px;
font-weight:400;
background-position:96% center;
background-repeat:no-repeat;
background-size:auto 20px;
border-radius: 5px;
background-image: url("../img/header/ic-ar_v_b.png");
}
.mobmenu span.smact strong {
color:var(--color-white);
background-color:var(--color-4th);
background-image: url(../img/header/ic-ar_v_w_t.png);
}
.mobmenu ul {
overflow-y:auto;
}
.mobmenu ul li{
width:97%;
height: 50px;
display: block;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin:0 0 3px auto;
}
.mobmenu ul li a {
width:100%;
height:50px;
display:block;
font-size:16px;
text-decoration: none;
font-weight:400;
letter-spacing: 0px;
color:var(--color-4th);
line-height:50px;
padding:0px 10px 0 10px;
background-image: url("../img/header/ic-ar_b.png");
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 20px;
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
border-radius: 5px;
background: #F0F0F0;
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(250, 250, 250, 1) 100%);
box-shadow:0px 1px 3px rgba(0,0,0,0.3);
margin-bottom: 3px;
}
.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-black);
line-height:50px;
padding:0px 10px;
background-image: url("../img/header/ic-ar_b.png");
background-repeat: no-repeat;
background-position: 96% center;
background-size: auto 20px;
}

}