/* SPメニュー：グローバルナビのアコーディオン（メガメニューの内容をSP用に展開したもの）
   ※ .sp-menu-nav / .sp-menu-nav-link の基本部分は共通.css（file003側）で定義されているため、
   　 レイアウトを上書きする箇所は #sp-menu を付与して詳細度で確実に勝たせている */
#sp-menu .sp-menu-nav {display: block; margin-top: 6rem; padding: 0 5rem;}
#sp-menu .sp-menu-nav > .sp-menu-nav-group,
#sp-menu .sp-menu-nav > .sp-menu-nav-link {border-top: 1px solid #e6e6e6;}
#sp-menu .sp-menu-nav > *:last-child {border-bottom: 1px solid #e6e6e6;}

#sp-menu .sp-menu-nav-link {display: block; padding: 1.9rem 0; font-family: var(--font-main); font-size: 1.3rem; color: var(--color-text);}
#sp-menu .sp-menu-nav-link--salon {font-size: 1.4rem;}

/* アコーディオンの開閉ボタン（PCの.header-nav-btnに相当） */
.sp-menu-nav-toggle {display: flex; align-items: center; justify-content: flex-start; width: 100% !important; padding: 1.9rem 0; background: none; border: 0; font-family: var(--font-main); font-size: 1.3rem; color: var(--color-text); text-align: left; cursor: pointer;}
.sp-menu-nav-toggle.is-open {color: #c40080; font-weight: 500;}

.sp-menu-nav-toggle-icon {position: relative; flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-left: 1rem;}
.sp-menu-nav-toggle-icon::after {position: absolute; content: ''; width: 1rem; height: 1rem; border-right: 1px solid #000; border-bottom: 1px solid #000; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
/* .sp-menu-nav-toggle-icon span {position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease;}
.sp-menu-nav-toggle-icon span:last-child {transform: translate(-50%, -50%) rotate(90deg);}
.sp-menu-nav-toggle.is-open .sp-menu-nav-toggle-icon span:last-child {transform: translate(-50%, -50%) rotate(0deg); opacity: 0;} */
.sp-menu-nav-toggle.is-open .sp-menu-nav-toggle-icon::after {top: calc(50% + 0.3rem); transform: translate(-50%, -50%) rotate(225deg); border-color: #c40080;}

/* アコーディオンの中身（PCの.header-dropdownをSP用の縦積みレイアウトに再構成） */
.sp-menu-nav-panel {display: none; margin: 0 -2rem; padding: 20px;/*0.5rem 2rem 2.7rem 3rem*/ background: #f9f9f9;}
/* .sp-menu-nav-panel--flat {padding: 1.8rem 2rem 2.2rem;} */

.sp-menu-nav-panel-col + .sp-menu-nav-panel-col {margin-top: 2.4rem;}
.sp-menu-nav-panel-heading {display: block; font-family: var(--font-main); font-weight: 500; font-size: 1.3rem; line-height: 1.6; color: var(--color-text); padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid #e6e6e6;}
.sp-menu-nav-panel-links {display: flex; flex-direction: column;}
.sp-menu-nav-panel-link {display: block; font-family: var(--font-main); font-weight: 300; font-size: 1.3rem; line-height: 2.5; color: var(--color-text);}
.sp-menu-nav-panel--flat .sp-menu-nav-panel-link {line-height: 2.6;}