@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

/* ===== ハンバーガー ===== */
.hamburger{
  position:fixed; top:25px; right:25px;
  width:30px; height:24px;
  cursor:pointer; z-index:100;
}
.hamburger span{
  position:absolute; width:100%; height:2px;
  background:#575757; left:0;
  transition:0.4s ease; /* アニメーション */
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }
/* ハンバーガーを×に変形 */
.hamburger.active span:nth-child(1){ transform:rotate(45deg); top:10px; }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg); top:10px; }


/* ===== メニュー ===== */
.menu{
  position:fixed; top:0; right:-260px; /* 最初は右外 */
  width:260px; height:100%;
  /*background:#e5e7eb;*/ /* グレー背景 */
  background-image: linear-gradient(to right top, #008793,#1198a7, #009c84,  #f1985e);
  padding:100px 30px;
  transition:0.4s;
  z-index:18;
}
/*.menu a:hover{
  border-bottom: 1px solid #fff;
}
*/

.menu a{
  display:block;
  margin-bottom:25px;
  padding-bottom:10px; /* ←余白追加 */

  text-decoration:none;
  color:#FFFFFF;
  font-size: 1.5em;
  font-weight: 600;
  transform: skewX(-7deg);
  letter-spacing: 0.05em;
border-bottom: 1px solid rgba(255,255,255,0.2); /* 線 */
	transition:0.3s;
	position:relative;
}


.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  border-bottom:1px solid #fff;
  transition:0.4s;
}

.menu a:hover::after{
  width:100%;
}


.menu.active{ right:0; } /* メニュー表示 */
.blur-overlay{
  position:fixed; inset:0;
  backdrop-filter:blur(8px); /* 背景ぼかし */
  background:rgba(0,0,0,0.3);
  opacity:0;
  transition:0.4s;
  pointer-events:none;
  z-index:17;
}
.blur-overlay.active{ opacity:1; pointer-events:auto; }


.logo_lead{padding:0 150px;}
.logo_lead img{width: 100%;
height: 100%;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));}