/*----------▽ 0px以上  */
@media screen and (min-width: 0px){

	#bgBlock{
		position: fixed;
		width: 100%;
		height: 100vh;
		background: url(/background-images/whiteRoomPortrait.jpg) no-repeat;
		background-size: cover;
		background-position: center top;
	}

	#header{
		position: fixed;
		width: 100vw;
		padding-left: 2vw;
		z-index: 1;
	}

	#menu{
		display: block;
		position: absolute;/*absolute*/
		top: 0.5rem;/*14vw;*//*42.48px*/
		background-color: rgba(255,255,255,0.7);
		width: 100%;
		transform-origin: right top;
		transform: rotate(180deg);
		transition: transform 0.5s 0s ease;
		border-radius: 10px 0 0 10px;
		z-index: 97;
	}
	#menu ul{
		align-items: center;
		text-align: left;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#menu li{
		padding: 0 0.7em;
		border-bottom: 1px solid #999;
		color: #000;
		height: 6vh;
	}

	#menu a{
		text-decoration: none;
		font-size: 1.2rem;
		letter-spacing: 0.5vw;
		line-height: 2.3;
		background-color: inherit;
	}
	#menu a:last-child li{
		border-bottom: none;
	}
	#menu.menu-show{
		transform: rotate(0deg);
		transition: transform 0.5s 0s ease;
	}

	#navToggle{
		position: absolute;
		top: 0;
		right: 0;
		width: 14vw;
		height: 14vw;
		z-index: 100;
	}
	#navToggle span{
		display: block;
		position: absolute;
		height: 2px;
		width: 56%;
		background-color: #fff;/*#e83e8c*/
		transition: 0.35s 0s ease-in-out;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 2px;
	}
	#navToggle.is_gray span{
		background-color: #666;
	}
	#navToggle span:nth-child(1){
		top: 15px;
	}
	#navToggle span:nth-child(2){
		top: 23px;
	}
	#navToggle span:nth-child(3){
		top: 31px;
	}
	#navToggle.open span{
		background-color: #666;
	}
	#navToggle.open span:nth-child(1){
		top: 28px;
		transform: rotate(315deg);
	}
	#navToggle.open span:nth-child(2){
		opacity: 0;
	}
	#navToggle.open span:nth-child(3){
		top: 28px;
		transform: rotate(-315deg);
	}


	#container{
		background-color: #fff;
		transform: translateX(0vw);
		transition: transform 1s 0s ease;
	}
	#container.open{
		transform: translateX(-98vw);
		transform-origin: left top 0;
		transition: transform 1s 0s ease;
	}
}
/*--▽ 768px超過 */
@media screen and (min-width: 769px){

	#bgBlock{
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: center;
		height: 100vh;
		background: url(/background-images/whiteRoom.jpg) no-repeat;
		background-size: cover;
		background-position: center top;
		z-index: -1;
	}

	#menu{
		top: 100px;
		height: 75vh;
		padding: 2em 2em 0em 2em;
		font-family: 'Noto Serif JP', serif;
		background-color: rgba(255,255,255,0.3);
		border-radius: 20px;
		writing-mode: vertical-rl;/* 縦書き */
		-ms-writing-mode: tb-rl;
	}
	.tcy{/* 縦中横 */
		text-combine-upright: all;
	}
	.material-icons.md-24 { vertical-align: baseline !important; }
	#menu a{
		font-size: 2vw;
		letter-spacing: 0.2vh;
		line-height: 3vw;
	}
	#menu li:hover{
		background-color: rgba(255,255,255,0.9);
		transform: translateY(-1rem);
		transition: all 0.5s 0s ease;
	}
	#menu li{
		color: #333;
		padding: 0.8em;
		border-bottom: none;
		height: auto;
	}

	#navToggle{
		top: 5px;
		width: 13vw;
		height: 9vw;
		cursor: pointer;
	}
	#navToggle span{
		width: 80px;
	}
	#navToggle span:nth-child(1){
		top: 20px;
	}
	#navToggle span:nth-child(2){
		top: 44px;
	}
	#navToggle span:nth-child(3){
		top: 68px;
	}

	#navToggle.open span{
		background-color: #666;
	}
	#navToggle.open span:nth-child(1){
		top: 40px;
		transform: rotate(315deg);
	}
	#navToggle.open span:nth-child(2){
		opacity: 0;
	}
	#navToggle.open span:nth-child(3){
		top: 40px;
		transform: rotate(-315deg);
	}


}