@charset "utf-8";

/* 共通スタイル */
/* .navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
color: #fff;
box-sizing: border-box;
background: #4CAF50;
background-size: cover;
background-image: url(../images/header_bg.png);
} */


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #4CAF50;
  color: #fff;
  box-sizing: border-box;
  z-index: 3;
  position: relative;
}

.navbar::after {
    background-position: left bottom;
    background-repeat: repeat-x;
    background-image: url(../images/header_bg_half.svg);
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 6px;
    z-index: 1;
}
  

.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: 175px;
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: #ccf6cf;
}
/* サブメニュー ↑↑↑ */


/* @media screen and (max-width: 1150px) {
.nav-links{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
} */




@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;
}
ul.nav-links > li > a {
color: #fff;
text-decoration: none;
position: relative;
padding: 10px;
background:#4CAF50;
}

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

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


/* 追加分 */
.navbar::after {
    content: none;
}
/* サブメニュー ↑↑↑ */

}