@charset "utf-8";

/* 共通スタイル */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #223d7d;
  color: #fff;
  box-sizing: border-box;
  background-size: cover;
  position: relative;  /* 擬似要素が親要素に対して絶対的に配置されるように設定 */
  text-align: left!important;
}


.nav-links {
display: flex;
list-style: none;
}

.nav-links > li {
box-sizing: border-box;
position: relative;
}

.nav-links > li > a {
color: #fff;
text-decoration: none;
position: relative;
transition: all 0.3s;
display: block;
padding: 10px;
}

.hamburger {
display: none;
font-size: 30px;
cursor: pointer;
}



/* 追加分 */

.header-wrapper.scrolled {
transform: translateY(-5px);
}
.header-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100;
}

ul.nav-links > li >a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #fff;
bottom: 2px;
transform: scale(0, 1);
transform-origin: center top;
transition: all 0.3s;
}

.nav-links li a:hover::after {
transform: scale(1, 1);
}
.logo img{
width:100%;
height: auto;
vertical-align: bottom;
max-width:275px;
}
 ul.header-sublist > li > a {
padding-left: 25px;
display: block;
padding: 10px 25px;
font-weight: 400;
position: relative;
transition: all 0.3s;
}

.sublist-r{
  right: 0;;
}


/* サブメニュー ↓↓↓ */
 ul.header-sublist {
visibility: hidden;
opacity: 0;
position: absolute;
top: 45px;
list-style: none;
width: 260px;
background: #fff;
padding: 10px 10px 10px;
backdrop-filter: blur(5px);
box-shadow: 0 3px 3px #eee;
transition: all 0.3s;
z-index: 10;
}
ul.nav-links li:hover > ul.header-sublist {
visibility: visible;
opacity: 1;
}
 ul.header-sublist > li > a:hover {
background: #a3b6e4;
}
 ul.header-sublist > li > a{
  color: #333;
}




@media screen and (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background-color: #fff;
width: 100%;
position: absolute;
top: 70px;
left: 0;
}

/* クリックすると .nav-links の display: none; に
　　.active クラスを追加して（こちらが優先）display: flex; に変更させる */
.active {
display: flex;
}

.hamburger {
display: block;
}
.nav-links li a::after {
content: none !important;
}
.nav-links > li > a {
color: #fff;
text-decoration: none;
position: relative;
padding: 10px;
background:#223d7d;
}

.nav-links > li > a:hover{
padding: 10px;
background: #0a1c46;
}
.logo img{
width:50%;
}

/* サブメニュー ↓↓↓ */
 ul.header-sublist {
position: static;
background:#223d7d;

visibility: visible;
opacity: 1;           /* 不透明 */
position: static;     /* 必要に応じて位置を変更 */
transition: none;     /* アニメーションを無効化（オプション） */
width: 100%;
}
 ul.header-sublist > li > a{
  color: #fff;
padding:10px 10px 10px 25px;
position: relative;
}
 ul.header-sublist > li > a:hover {
background: #0a1c46;
}
 ul.header-sublist > li > a::before{
  position: absolute;
  content: "";
  top: 50%;
  /* left: 50%; */
  transform: translateY(-50%);
          left: 10px;
        width: 8px;
  height: 1px;
  background-color: #fff;
}


/* 追加分 */
.navbar::after {
    content: none;
}
 ul.header-sublist {
    padding: 0;
}
/* サブメニュー ↑↑↑ */

}