/*================================
 縦画面
==================================*/
@media (orientation: portrait) {
	#Wrapper::before {
		background-image: var(--back-img-port);
	}
}

/*================================
	sp W320x x H640px
==================================*/
@media (max-width: 320px) and (max-height: 640px) {
	:root {
	/*----- area radius -----*/
	--borderR:75px;
	}
	
	/*========================
		Page Top: #p-top
	--------------------------*/
	#p-top {
		padding: var(--padding);
		font-size: 0.9rem;
	}
	#header h1 span {
		display: block;
		height: 75px;
	}
	#opHours h2 {
		font-size: 1rem;
	}
	.map-open #opHours {
		opacity: 0.1;
	}
	#iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 0.5);
	}
	
	/*========================
		Page Bottom: #p-bottom
	--------------------------*/
	#p-bottom {
		width: 92%;
		height: 150px;
		transition: 0.75s;
	}
	.map-open #p-bottom {
		height: calc(100vh - 75px - 3rem);
	}
	input#accordion + label {
		height: 3.5rem;
		font-size: 1.2rem;
		padding-top: 1rem;
	}
	input#accordion:checked + label + #accMap {
		height: calc(100vh - 75px - 8rem);
	}
}

/*================================
	sp W321x x H640px ~
==================================*/
@media (min-width: 321px) and (min-height: 641px) {
	:root {
	/*----- area radius -----*/
	--borderR:100px;
	}
	
	/*========================
		Page Top: #p-top
	--------------------------*/
	#p-top {
		padding-top: calc(var(--padding) * 1.5);
		padding-right: var(--padding);
		padding-bottom: var(--padding);
		padding-left: calc(var(--padding) * 1.5);
		font-size: 0.9rem;
	}
	#header h1 span {
		height: 75px;
	}
	.map-open #iconMenu {
		opacity: 0.1;
	}
	#iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 0.5);
	}

	/*========================
		Page Bottom: #p-bottom
	--------------------------*/
	#p-bottom {
		width: 92%;
		height: 150px;
		transition: 0.75s;
	}
	.map-open #p-bottom {
		height: calc(100vh - 200px - 3.5rem);
	}
	input#accordion + label {
		height: 5rem;
		font-size: 1.5rem;
		padding-top: 2rem;
	}
	input#accordion:checked + label + #accMap {
		height: calc(100vh - 200px - 10rem);
	}
}


/*================================
	tab W768x ~
==================================*/
@media (min-width: 768px) {
	:root {
	/*----- area radius -----*/
	--borderR:100px;
	}
	
	/*========================
		Page Top: #p-top
	--------------------------*/
	#p-top {
		max-width: 500px;
		padding: calc(var(--padding) * 2);
		font-size: 1rem;
	}
	#header h1 span {
		height: 100px;
	}
	.map-open #iconMenu {
		opacity: 0.1;
	}
	#iconMenu {
		margin-top: 1.5rem;
	}
	#iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 2);
	}
	/*========================
		Page Bottom: #p-bottom
	--------------------------*/
	#p-bottom {
		max-width: 650px;
		height: 150px;
		transition: 0.75s;
		animation-duration: 1.25s;
		animation-delay: 3s;
	}
	#p-bottom {
		height: 50vh;
	}
	.map-open #p-bottom {
		height: auto;
	}
	input#accordion + label {
		height: 5rem;
		font-size: 1.5rem;
		padding-top: 2rem;
		pointer-events: none;
	}
	input#accordion + label + #accMap {
		height: calc(50vh - 7rem);
	}
}


/*================================
 横画面
==================================*/
@media (orientation: landscape) {
	#Wrapper::before {
		background-image: var(--back-img-land);
	}
}
/*================================
	tab ~ W1194px x ~ H834px
==================================*/
@media (orientation: landscape) and (max-width: 1194px) and (max-height: 834px) {
	/*========================
		Page Top: #p-top
	--------------------------*/
	#p-top {
		max-width: 450px;
		padding: calc(var(--padding) * 2);
		font-size: 1rem;
	}
	#header h1 span {
		height: 100px;
	}
	.map-open #iconMenu {
		opacity: 1;
	}
	#iconMenu {
		margin-top: calc(var(--margin) * 2.5);
	}
	#iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 2);
	}
	/*========================
		Page Bottom: #p-bottom
	--------------------------*/
	#p-bottom {
		max-width: 550px;
		height: 125px;
	}
	.map-open #p-bottom {
		height: 75vh;
	}
	input#accordion + label {
		height: 5rem;
		font-size: 1.5rem;
		padding-top: 2rem;
		pointer-events: auto;
	}
	input#accordion + label + #accMap {
		height: 0;
	}
	input#accordion:checked + label + #accMap {
		height: calc(75vh - 7rem);
	}
}


/*================================
	pc ~
==================================*/
@media (orientation: landscape) and (min-width: 1195px) and (min-height: 835px) {
	/*========================
		Page Top: #p-top
	--------------------------*/
	#p-top {
		max-width: 560px;
		padding: calc(var(--padding) * 2);
		font-size: 1rem;
	}
	#header h1 span {
		height: 125px;
	}
	.map-open #iconMenu {
		opacity: 1;
	}
	#iconMenu {
		margin-top: calc(var(--margin) * 3);
	}
	#iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 2);
	}
	/*========================
		Page Bottom: #p-bottom
	--------------------------*/
	#p-bottom {
		max-width: 700px;
		height: 150px;
		padding-right: calc(var(--padding) * 2.5);
		padding-left: calc(var(--padding) * 2);
		transition: 0.75s;
		animation-duration: 1.25s;
		animation-delay: 3s;
	}
	#p-bottom {
		height: 60vh;
	}
	.map-open #p-bottom {
		height: auto;
	}
	input#accordion + label {
		height: 5rem;
		font-size: 1.5rem;
		padding-top: 2rem;
		pointer-events: none;
	}
	input#accordion + label + #accMap {
		height: calc(60vh - 7rem);
	}
}