/* CSS Document */

/* --- menu本体：50pxから80pxへ拡大 --- */
.menu {
    height: 80px;      /* 拡大 */
    width: 80px;       /* 拡大 */
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 99;
    background: #053C8C; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

/* --- 三本線のサイズと位置の調整 --- */
.menu__line {
    background: #FFF;
    display: block;
    height: 3px;       /* 線も少し太くして視認性をアップ */
    position: absolute;
    transition: transform .3s, top .3s;
    width: 40px;       /* 線の幅も拡大 */
    left: 50%;
    transform: translateX(-50%);
}

/* 三本線の間隔を広げてバランスを調整 */
.menu__line--top {
    top: 22px;
}
.menu__line--center {
    top: 34px;
}
.menu__line--bottom {
    top: 46px;
}

/* --- 「MENU」テキストのサイズアップ --- */
.menu::after {
    content: "MENU";
    position: absolute;
    bottom: 8px;       /* 位置を微調整 */
    left: 0;
    width: 100%;
    color: #FFF;
    font-size: 14px;   /* 文字を大きく */
    font-weight: bold;
    text-align: center;
    font-family: sans-serif;
    letter-spacing: 0.05em;
}

/* --- Active時（×印）の交差位置を中央に固定 --- */
.menu__line--top.active {
    top: 34px; 
    transform: translateX(-50%) rotate(45deg);
}
.menu__line--center.active {
    transform: translateX(-50%) scaleX(0);
}
.menu__line--bottom.active {
    top: 34px; 
    transform: translateX(-50%) rotate(135deg);
}

/* スマホ */
@media (max-width: 769px) {
  .menu {
    /*width: 60px;
    height: 60px;*/
    width: 14vw;
    height: 14vw;	
  }

  .menu__line {
    width: 7vw; /*30px*/
    height: 0.47vw; /*2px*/
  }

  .menu__line--top { top: 3.73vw; } /*16px*/
  .menu__line--center { top: 6.07vw; } /*26px*/
  .menu__line--bottom { top: 8.40vw; } /*36px*/

  .menu::after {
    font-size: 2.57vw; /*11px*/
    bottom: 1.17vw; /*5px*/
  }
  .menu:has(.active)::after {
    display: none !important;
  }
  
	/* --- Active時（×印）の交差位置を中央に固定 --- */
	.menu__line--top.active {
		top: 7.0vw; 
	}
	.menu__line--bottom.active {
		top: 7.0vw; 
	}
  
}