/*
 * 1. 親の<ul>をGridコンテナに変更
 */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc {
	display: grid;
	/* 4つの均等な列（=各25%）を定義 */
	grid-template-columns: repeat(4, 1fr);
	/* 2つの均等な行（=各50%）を定義 */
	grid-template-rows: 1fr 1fr;
	width: 100%;
	grid-gap: 1.5em 0;
}

/*
 * 2. Gridコンテナの直接の子(li)のスタイルを調整
 * (> li.menu-item で直接の子要素のみを指定)
 */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item {
	width: auto; /* 既存の width をリセット */
	height: 100%; /* Gridセルの高さ100%にする */
}

/*
 * 3. 各アイテムをグリッドに配置
 */

/* 列1: 採用情報 (1番目のli) (2行分またぐ) */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3; /* 1行目から3行目(の手前)まで */
}

/* 列2: 事業内容 (2番目のli) (2行分またぐ) */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item:nth-child(2) {
	grid-column: 2;
	grid-row: 1 / 3;
}

/* 列3 (上): 会社情報 (3番目のli) (1行目) */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
}

/* 列3 (下): 新着情報 (4番目のli) (2行目) */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item:nth-child(4) {
	grid-column: 3;
	grid-row: 2;
}

/* 列4: 特設サイト (5番目のli) (2行分またぐ) */
nav.vk-mobile-nav-menu-outer ul.vk-menu-acc > li.menu-item:nth-child(5) {
	grid-column: 4;
	grid-row: 1 / 3;
}


.vk-menu-acc ul.sub-menu ul.sub-menu {
	margin-left: 1em;
}

@media all and (max-width:1000px){
	nav.vk-mobile-nav-menu-outer ul.vk-menu-acc {
		display: block;
	}
}