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

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

.menubn {
display: block;
position: fixed;
z-index: 21500;
right: 30px;
top:25px;
width: 60px;
height: 60px;
cursor: pointer;
text-align: center;
background-image: url(../img/header/menu_txt_open.webp);
background-repeat: no-repeat;
background-position: center 85%;
background-size: auto 9px;
}
.menubn.pr_active {
top:5px;
z-index: 21500;
}

/* Menu botton*/
.menubn span {
display: block;
position: absolute;
width: 50px;
height: 2px;
left: 6px;
background: var(--color-1st);
-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/menu_txt_close.webp);
}
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-1st);
-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-1st);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.globalmenu {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0;
left:-100%;
z-index:18400;
padding:80px 5% 30px;
background-color:rgba(255,255,255,0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 140px 5% 60px 5%;
-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;
}
.globalmenu.gm_active {
width:100%;
height: 100%;
min-height: 100%;
z-index:18400;
left:0;
overflow-y:scroll;
}

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

.mobmenu p.sm_bn {
cursor: pointer;
width:100%;
height: auto;
display: block;
color:var(--color-black);
font-size:12px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_v_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
transition: .4s all;
margin-bottom: 2px;
}
.mobmenu p.sm_bn:hover {
  background-color: var(--color-5th);
}
.mobmenu p.sm_bn span {
display: block;
font-size:14px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-1st);
margin-bottom: 5px;
}

.mobmenu p.sm_bn.smact {
color:var(--color-2nd);
background-color:var(--color-black);
background-image: url("../img/header/ic-ar_v_menu_ro.webp");
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0px;
}
.mobmenu p.sm_bn.smact span {
color:var(--color-white);
}


.mobmenu ul.m_submenu {
overflow-y:auto;
padding:3px;
background-color:var(--color-black);
}
.mobmenu ul.m_submenu li {
width:100%;
height: auto;
display: block;
margin-bottom: 3px;
}
.mobmenu ul.m_submenu li:last-child {
border-bottom: none;
}
.mobmenu ul.m_submenu li a {
width:100%;
height: auto;
display: block;
color:var(--color-white);
font-size:12px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: var(--color-1st);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
transition: .4s all;
}
.mobmenu ul.m_submenu li  span {
display: block;
font-size:14px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-white);
margin-bottom: 5px;
}
.mobmenu ul.m_submenu li a:hover {
background-color: var(--color-4th);
background-image: url(../img/header/ic-ar_h_menu.webp);
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
margin-bottom: 2px;
}
.mobmenu2 li:last-child {
border-bottom:none;
}

.mobmenu2 li a {
width:100%;
height: auto;
display: block;
color:var(--color-black);
font-size:12px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_h_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
border-radius: 3px;
transition: .4s all;
}
.mobmenu2 li a span {
display: block;
font-size:14px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-1st);
margin-bottom: 5px;
}

.mobmenu2 li a:hover {
color:var(--color-2nd);
background-color:var(--color-black);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
}
.mobmenu2 li a:hover span {
color:var(--color-white);
}

}

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

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

.menubn {
display: block;
position: fixed;
z-index: 21500;
right: 30px;
top:25px;
width: 60px;
height: 60px;
cursor: pointer;
text-align: center;
background-image: url(../img/header/menu_txt_open.webp);
background-repeat: no-repeat;
background-position: center 85%;
background-size: auto 9px;
}
.menubn.pr_active {
top:5px;
z-index: 21500;
}

/* Menu botton*/
.menubn span {
display: block;
position: absolute;
width: 50px;
height: 2px;
left: 6px;
background: var(--color-1st);
-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/menu_txt_close.webp);
}
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-1st);
-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-1st);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.globalmenu {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0;
left:-100%;
z-index:18400;
padding:80px 5% 30px;
background-color:rgba(255,255,255,0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 140px 5% 60px 5%;
-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;
}
.globalmenu.gm_active {
width:100%;
height: 100%;
min-height: 100%;
z-index:18400;
left:0;
overflow-y:scroll;
}

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

.mobmenu p.sm_bn {
cursor: pointer;
width:100%;
height: auto;
display: block;
color:var(--color-black);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_v_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
transition: .4s all;
margin-bottom: 2px;
}
.mobmenu p.sm_bn span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-1st);
margin-bottom: 5px;
}

.mobmenu p.sm_bn.smact {
color:var(--color-2nd);
background-color:var(--color-black);
background-image: url("../img/header/ic-ar_v_menu_ro.webp");
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0px;
}
.mobmenu p.sm_bn.smact span {
color:var(--color-white);
}


.mobmenu ul.m_submenu {
overflow-y:auto;
padding:3px;
background-color:var(--color-black);
}
.mobmenu ul.m_submenu li {
width:100%;
height: auto;
display: block;
margin-bottom: 3px;
}
.mobmenu ul.m_submenu li:last-child {
border-bottom: none;
}
.mobmenu ul.m_submenu li a {
width:100%;
height: 50px;
display: block;
color:var(--color-white);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: var(--color-1st);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
transition: .4s all;
}
.mobmenu ul.m_submenu li  span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-white);
margin-bottom: 5px;
}
.mobmenu ul.m_submenu li a:hover {
background-color: var(--color-4th);
background-image: url(../img/header/ic-ar_h_menu.webp);
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
margin-bottom: 2px;
}
.mobmenu2 li:last-child {
border-bottom:none;
}

.mobmenu2 li a {
width:100%;
height: 50px;
display: block;
color:var(--color-1st);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_h_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 80px;
padding:10px 50px 8px 15px;
border-radius: 3px;
transition: .4s all;
}
.mobmenu2 li a span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 700;
line-height:16px;
color:var(--color-1st);
margin-bottom: 5px;
}

.mobmenu2 li a:hover {
color:var(--color-2nd);
background-color:var(--color-black);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
}
.mobmenu2 li a:hover span {
color:var(--color-white);
}

}

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

  .pcmenu {
    display:none!important;
    }

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

.menubn {
display: block;
position: fixed;
z-index: 21500;
right: 10px;
top:5px;
width: 60px;
height: 60px;
cursor: pointer;
text-align: center;
background-image: url(../img/header/menu_txt_open.webp);
background-repeat: no-repeat;
background-position: center 85%;
background-size: auto 9px;
}
.menubn.pr_active {
top:5px;
right: 10px;
z-index: 21500;
}

/* Menu botton*/
.menubn span {
display: block;
position: absolute;
width: 50px;
height: 2px;
left: 6px;
background: var(--color-1st);
-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/menu_txt_close.webp);
}
.menubn.active span:nth-child(1) {
top: 16px;
left: 6px;
background: var(--color-1st);
-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-1st);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.globalmenu {
width:100%;
height: 100%;
min-height: 100%;
position: fixed;
top:0;
left:-100%;
z-index:18400;
padding:80px 5% 30px;
background-color:rgba(255,255,255,0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 140px 5% 60px 5%;
-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;
}
.globalmenu.gm_active {
width:100%;
height: 100%;
min-height: 100%;
z-index:18400;
left:0;
overflow-y:scroll;
}

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

.mobmenu p.sm_bn {
cursor: pointer;
width:100%;
height: auto;
display: block;
color:var(--color-1st);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_v_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
padding:10px 50px 8px 15px;
border-radius: 3px;
transition: .4s all;
margin-bottom: 2px;
}
.mobmenu p.sm_bn span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-black);
margin-bottom: 4px;
}

.mobmenu p.sm_bn.smact {
color:var(--color-2nd);
background-color:var(--color-black);
background-image: url("../img/header/ic-ar_v_menu_ro.webp");
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0px;
}
.mobmenu p.sm_bn.smact span {
color:var(--color-white);
}
.mobmenu ul.m_submenu {
overflow-y:auto;
padding:3px;
background-color:var(--color-black);
}
.mobmenu ul.m_submenu li {
width:100%;
height: auto;
display: block;
margin-bottom: 3px;
}
.mobmenu ul.m_submenu li:last-child {
border-bottom: none;
}
.mobmenu ul.m_submenu li a {
width:100%;
height: 50px;
display: block;
color:var(--color-white);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
padding:0px 50px 0 15px;
text-decoration: none;
background-color:var(--color-1st);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
padding:10px 50px 10px 15px;
border-radius: 3px;
transition: .4s all;
}
.mobmenu ul.m_submenu li  span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-white);
margin-bottom: 4px;
}
.mobmenu ul.m_submenu li a:hover {
background-color:var(--color-4th);
}

.mobmenu2 {
width:100%;
height:auto;
display:block;
}
.mobmenu2 li {
width:100%;
height:auto;
display:block;
margin-bottom: 2px;
}
.mobmenu2 li:last-child {
border-bottom:none;
}

.mobmenu2 li a {
width:100%;
height: 50px;
display: block;
color:var(--color-1st);
font-size:8px;
font-weight: 400;
line-height: 12px;
text-decoration: none;
background-color: rgba(255,255,255,0.8);
background-image: url(../img/header/ic-ar_h_menu.webp);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
padding:10px 50px 10px 15px;
border-radius: 3px;
transition: .4s all;
}
.mobmenu2 li a span {
display: block;
font-size:12px;
font-family: var(--font-en);
font-weight: 400;
line-height:16px;
color:var(--color-black);
margin-bottom: 4px;
}

.mobmenu2 li a:hover {
color:var(--color-2nd);
background-color:var(--color-1st);
background-image: url(../img/header/ic-ar_h_menu_ro.webp);
}
.mobmenu2 li a:hover span {
color:var(--color-white);
}

}