/**
 * 共通
 */
main.page{
	display: grid;
  grid-template-columns: 35% 65%;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

main.page .menu-wrapper {
  display: grid;
  grid-template-rows: auto 1fr; /* .main-left-menu, .main-right-menu を縦に並べる */
  /* overflow-y: auto; */
  max-height: 100vh;
}

main.page .content {
  grid-column-start: 2;
  grid-column-end: 3;
}

/**
 * 3カラム
 */
 @media (min-width: 901px) {
  main.page {
    grid-template-columns: 1fr 50% 1fr;
  }

	main.page .content {
    grid-column: 2;
  }

  main.page .menu-wrapper {
    display: contents; /* ラッパーを"透過"して.main-left-menuと.main-right-menuをgridの個別要素に戻す */
    overflow: visible;
    max-height: none;
  }

  main.page .menu-wrapper .main-left-menu {
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    max-height: 100vh;
  }
  main.page .menu-wrapper .main-right-menu {
    grid-column: 3;
    grid-row: 1;
  }
}

/**
 * 2カラム
 */
@media (max-width:900px){
	main.page{
		grid-template-columns: 35% 65%;
	}
	main.page > .content{
		order:3;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 4;
	}
	main.page .menu-wrapper .main-left-menu{
		order:1;
	}
	main.page .menu-wrapper .main-right-menu{
		order:2;
	}
}


/**
 * 1カラム
 */
@media (max-width:600px){
	main.page{
		display:flex;
		flex-direction:column;
		grid-template-columns: 1fr;
	}
	main.page .content{
		order:1;
	}
	main.page .menu-wrapper{
		order:2;
	}
}