.hamburger{
display: flex;
justify-content: center;
align-items: center;
background: var(--orange02);
position: fixed;
width: 60px;
height: 60px;
padding: 10px 10px;
z-index: 998;
top: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: manipulation;
touch-action: manipulation;
--HAMBURGER_LINE_COLOR: #070707;
--HAMBURGER_LINE_PS: 9px;
}
.hamburger__icon {
transform: translateY(-7px);
}
.hamburger--search{
top: 80px;
}
.hamburger:after{
content: var(--LABEL);
position: absolute;
top: 60%;
white-space: nowrap;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
min-width: 65px;
text-align: center;
}
.hamburger.active:after{
content: var(--ACTIVE_LABEL);
}
.hamburger__icon {
position: relative;
}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
display: block;
width: 30px;
height: 1px;
background-color: var(--DARK01);
-moz-transition-property: background-color, -moz-transform;
-o-transition-property: background-color, -o-transform;
-webkit-transition-property: background-color, -webkit-transform;
transition-property: background-color, transform;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.hamburger .hamburger__icon:before{
width: 100% !important;
}
.hamburger .hamburger__icon:after {
width: 100% !important;
}
.hamburger__icon:before, .hamburger__icon:after {
position: absolute;
content: "";
}
.hamburger__icon:before {
top: calc(0px - var(--HAMBURGER_LINE_PS));
}
.hamburger__icon:after {
top: var(--HAMBURGER_LINE_PS);
}
.hamburger.active .hamburger__icon {
background-color: transparent;
}
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after {
background-color: var(--HAMBURGER_LINE_COLOR);
}
.hamburger.active .hamburger__icon:before {
transform: translateY(var(--HAMBURGER_LINE_PS)) rotate(45deg);
background-color: var(--HAMBURGER_LINE_COLOR);
}
.hamburger.active .hamburger__icon:after {
transform: translateY(calc(0px - var(--HAMBURGER_LINE_PS))) rotate(-45deg);
background-color: var(--HAMBURGER_LINE_COLOR);
}

/* ───────────────────────────────
全体：右外側に隠しておいて open でスライドイン
──────────────────────────────── */
.fat-nav {
display: block !important;
visibility: hidden;
position: fixed;
top: 0; right: 0;
width: 95%;
max-width: 1100px;
height: 100%;
background: var(--orange02);
transform: translateX(100%);
transition: transform 0.5s ease, visibility 0s linear 0.5s;
z-index: 997;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.fat-nav.open {
visibility: visible;
transition-delay: 0s;
transform: translateX(0);
}

.fat-nav.animating {
pointer-events: none;
}

body.no-scroll {
overflow: hidden;
}

.fat-nav__wrapper {
width: 90%;
margin:0 auto;
background: var(--orange02);
height: 100%;
padding: 60px 0% 0px;
max-width:1100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.fat-nav.active {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}