/* ━ｩ奐ｏ暉???策?ｲ攣 */
a {
text-decoration: none;
}
ul,
li {
list-style: none;
padding: 0;
}
button {
background-color: transparent;
border-color: transparent;
}
/* 擶愆栫抽ｸｨ */
/* main {
background-color: #f1f1f1;
height: 1000px;
display: flex;
align-items: center;
justify-content: center;
} */
/* 擱搗搦條 */
.header {
background-color: white;
width: 100%;
height: 70px;
position: fixed; /* ｭ躍ヲ幾?ｻ?帥 */
top: 0;
left: 0;
box-shadow: 0px 4px 4px #f5f5f5;
z-index: 1000;
}
.header-inner {
padding: 0 30px;
display: flex; /* 筈ｭ裂?ｾ○｣ｲ悗ｶ迩?ｭｪ怎 */
align-items: center; /* 患?ｭｰ敢 */
justify-content: space-between; /* ○｣ｲ悗小 ?＊懼?ｾ档ｾ 活崕ｨｨ屐 */
height: inherit;
}
/* 繝倥ャ繝?繝ｼ繝ｭ繧ｴ驛ｨ蛻? */
.header-title {
width: 60px;
font-size: 20px;
}
/* 擱搗搦條崟攪擅抽ｸｨ */
.header-nav {
width: 50%;
}


@media screen and (max-width: 960px) {
.header-nav {
background-color: rgb(255 255 255 / .9);
position: absolute; /* ｾ琢?ｭ躍ン?おｨ崕岔悍 */
right: 0;
top: 0;
width: 80%;
height: 100vh; /* 惷愕栫摎惷揀愆揶ｦｪ万對峙怐對 */
transform: translateX(100%); /* X壕 ?↑廻?ｾ･崕100%屮ｺｷ屶岫悍 ??ｾ琢?ｴ??ｻ档岔 ?*/
transition: ease 0.4s; /* 屮ｺｷ屶岫悍ｫｬ崟樵利嶌愆條揉栫慇｣ｦ帥 */
}
}
/* 繝倥ャ繝?繝ｼ 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ蜈ｨ菴? */
.nav-items {
    display: flex; /* 讓ｪ荳ｦ縺ｳ */
    justify-content: space-between;
    margin-right: 15px; /* 蜿ｳ縺ｫ菴咏區 */
    margin-left: auto; /* 蜿ｳ縺ｫ菴咏區 */
    width: 400px;
}
@media screen and (max-width: 960px) {
.nav-items {
flex-direction: column; /* ｦｪｭｪ怎 */
height: inherit;
justify-content: center; /* 患?ｭｰ敢 */
}
}

/* 繝倥ャ繝?繝ｼ 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ蛟倶ｽ? */
.nav-items-item a {
color: rgb(48, 48, 48);
display: block;
text-align: center;
font-size: 14px;
margin-bottom: 0px;
letter-spacing: 0.2em;
}
@media screen and (max-width: 960px) {
.nav-items-item a {
margin-bottom: 25px;
}
}
/* 撈栫撼條惻條擶撕攀條 */
.hamburger {
display: none; /* PC崟ｫｬ崛档岔 */
}
@media screen and (max-width: 960px) {
.hamburger {
display: block; /* SP崟ｫｬ崕ｾｲ勞 */
width: 48px;
}
}
/* 撈栫撼條惻條擶撕攀條崟･ｺ */
.hamburger span {
width: 100%;
height: 1px;
background-color: #000;
position: relative;
display: block;
transition: ease 0.5s;
}
/* 栖ｰ暉?ｽ攅插悗ｱ琢ｏ暉?ｧ1ｮ畳ｔ ｡?3ｮ畳ｔ 恷峭悗｣ｦ帥 */
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
margin: 8px 0;
}
.hamburger span:nth-child(3) {
top: 0;
}
/* 撈栫撼條惻條擶撕攀條搓搗擂嚥崟插搓愆攣 */
.header-nav.active {
transform: translateX(0%); /* active崟ｫｬ攪擅屆ｸ滬ｌｧ */
}
/* 3ｮ畳ぇｺ崛1ｮ畳ｔ 嶌3ｮ畳ｔ 悗?諺屶岫垪2ｮ畳ｔ 悗△尨崋屐岌峺ﾃ裂?ｬ條愎崕岔悍垰 */
.hamburger.active span:nth-child(1) {
top: 5px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: -13px;
transform: rotate(-45deg);
}