@charset "utf-8";

/* =========================================================
   Gideon Sonic - Group Menu
   Line Navigation Style
========================================================= */
#groupmenu{position:relative;z-index:20;width:100%;background:#fff;border-bottom:1px solid #e8edf1}
#groupmenu *{box-sizing:border-box}
#groupmenu .groupmenu_inner{width:calc(100% - 80px);max-width:1440px;margin:0 auto}
#groupmenu .groupmenu_list{margin:0;padding:0;list-style:none}

/* Depth 2 */
#groupmenu .groupmenu_depth2_list{display:flex;align-items:stretch;justify-content:center;min-height:96px}
#groupmenu .groupmenu_depth2_list .groupmenu_item{position:relative;min-width:180px;margin:0;padding:0 34px}
#groupmenu .groupmenu_depth2_list .groupmenu_item>a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:96px;color:#555;text-decoration:none;transition:color .25s ease}
#groupmenu .groupmenu_depth2_list .groupmenu_item>a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:3px;background:#961016;transition:width .3s ease}
#groupmenu .groupmenu_depth2_list .groupmenu_num{display:block;margin-bottom:7px;color:#a9b1b8;font-size:12px;font-weight:700;line-height:1;letter-spacing:.08em;transition:color .25s ease}
#groupmenu .groupmenu_depth2_list .groupmenu_name{display:block;font-size:17px;font-weight:600;line-height:1.35;white-space:nowrap}
#groupmenu .groupmenu_depth2_list .groupmenu_item>a:hover,#groupmenu .groupmenu_depth2_list .groupmenu_item>a.on{color:#961016}
#groupmenu .groupmenu_depth2_list .groupmenu_item>a:hover::after,#groupmenu .groupmenu_depth2_list .groupmenu_item>a.on::after{width:100%}
#groupmenu .groupmenu_depth2_list .groupmenu_item>a:hover .groupmenu_num,#groupmenu .groupmenu_depth2_list .groupmenu_item>a.on .groupmenu_num{color:#e46465;}

/* Depth 3 */
#groupmenu .groupmenu_depth3_list{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;min-height:76px;margin-left:calc((100vw - min(100vw - 80px, 1440px)) / -2);margin-right:calc((100vw - min(100vw - 80px, 1440px)) / -2);padding:0 max(40px,calc((100vw - 1440px)/2));border-top:1px solid #edf1f4;background:#f6f8fa}
#groupmenu .groupmenu_depth3_list .groupmenu_item{position:relative;margin:0;padding:0 24px}
#groupmenu .groupmenu_depth3_list .groupmenu_item+.groupmenu_item::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;background:#dfe5e9;transform:translateY(-50%)}
#groupmenu .groupmenu_depth3_list .groupmenu_item>a{position:relative;display:flex;align-items:center;gap:9px;min-height:76px;color:#626a70;text-decoration:none;transition:color .25s ease}
#groupmenu .groupmenu_depth3_list .groupmenu_num{color:#e46465;font-size:11px;font-weight:800;line-height:1;letter-spacing:.04em}
#groupmenu .groupmenu_depth3_list .groupmenu_name{font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap}
#groupmenu .groupmenu_depth3_list .groupmenu_item>a::after{content:"";position:absolute;left:0;right:0;bottom:17px;height:1px;background:#961016;opacity:0;transform:scaleX(.35);transition:opacity .25s ease,transform .25s ease}
#groupmenu .groupmenu_depth3_list .groupmenu_item>a:hover,#groupmenu .groupmenu_depth3_list .groupmenu_item>a.on{color:#961016}
#groupmenu .groupmenu_depth3_list .groupmenu_item>a:hover .groupmenu_name,#groupmenu .groupmenu_depth3_list .groupmenu_item>a.on .groupmenu_name{font-weight:700}
#groupmenu .groupmenu_depth3_list .groupmenu_item>a:hover::after,#groupmenu .groupmenu_depth3_list .groupmenu_item>a.on::after{opacity:1;transform:scaleX(1)}
#groupmenu .groupmenu_mobile{display:none}

@media all and (max-width:1100px){
 #groupmenu .groupmenu_inner{width:calc(100% - 48px)}
 #groupmenu .groupmenu_depth2_list .groupmenu_item{min-width:0;flex:1 1 0;padding:0 20px}
 #groupmenu .groupmenu_depth2_list .groupmenu_name{font-size:16px}
 #groupmenu .groupmenu_depth3_list{margin-left:-24px;margin-right:-24px;padding:0 24px}
 #groupmenu .groupmenu_depth3_list .groupmenu_item{padding:0 15px}
 #groupmenu .groupmenu_depth3_list .groupmenu_name{font-size:13px}
}

@media all and (max-width:767px){
 #groupmenu .groupmenu_pc{display:none}
 #groupmenu .groupmenu_mobile{position:relative;display:block;width:100%;background:#fff}
 #groupmenu .groupmenu_select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:62px;margin:0;padding:0 22px 0 27px;border:0;background:#fff;color:#222;font-size:16px;font-weight:700;text-align:left;cursor:pointer}
 #groupmenu .groupmenu_select::before{content:"";position:absolute;left:16px;top:50%;width:3px;height:20px;border-radius:2px;background:#e46465;transform:translateY(-50%)}
 #groupmenu .groupmenu_select>span{display:block;overflow:hidden;padding-right:20px;text-overflow:ellipsis;white-space:nowrap}
 #groupmenu .groupmenu_select i{flex:0 0 auto;color:#961016;font-size:17px;transition:transform .3s ease}
 #groupmenu .groupmenu_mobile.is_open .groupmenu_select i{transform:rotate(180deg)}
 #groupmenu .groupmenu_mobile_list{position:absolute;left:0;top:100%;z-index:30;display:none;width:100%;margin:0;padding:8px 20px 14px;border-top:1px solid #edf1f4;border-bottom:1px solid #e4e9ed;background:rgba(255,255,255,.98);box-shadow:0 15px 30px rgba(12,65,115,.08);list-style:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
 #groupmenu .groupmenu_mobile_list li{width:100%;margin:0;padding:0}
 #groupmenu .groupmenu_mobile_list li+li{border-top:1px solid #f0f2f4}
 #groupmenu .groupmenu_mobile_list a{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 8px;color:#646b70;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s ease}
 #groupmenu .groupmenu_mobile_bar{display:block;flex:0 0 auto;width:12px;height:1px;background:#ccd3d8;transition:width .2s ease,background .2s ease}
 #groupmenu .groupmenu_mobile_list a:hover,#groupmenu .groupmenu_mobile_list a.on{color:#961016;font-weight:700}
 #groupmenu .groupmenu_mobile_list a:hover .groupmenu_mobile_bar,#groupmenu .groupmenu_mobile_list a.on .groupmenu_mobile_bar{width:22px;height:2px;background:#e46465}
}