/*====================================
	縦画面（portrait）-- smartphone, tablet
======================================*/
@media (orientation: portrait) {
	:root .sp {
	--mapLabelH:3rem;
	--p-bottomH:67vh;
}
:root :is(.tab, .pc) {
	--mapLabelH:4rem;
	--p-bottomH:50vh;
}

	#Wrapper::before {
		background-image: var(--back-img-port);
	}
	#p-bottom {
		transition: 0.75s;
	}
	input#accordion + label::before {
		content: "";
		width: 1.5rem;
		height: 1.5rem;
		display: inline-block;
		mask-position: center center;
		-webkit-mask-position: center center;
		mask-size: contain;
		-webkit-mask-size: contain;
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-image:url("../images/mn-access.svg");
		mask-image: url("../images/mn-access.svg");
		margin-right: 0.3rem;
		background-color: var(--bottom-text);
		vertical-align: bottom;
	}

	/*--------------------------------
	smartphone (iPhone, Android)
	----------------------------------*/
	.sp	.modal-content-menu iframe {
		height: 85vh;
		border-radius: calc(50px + 0.5rem);
	}
	.sp #p-bottom {
		width: 90%;
		height: 100px;
	}
  #p-top {
  	padding: 1rem;
    padding-left: 1.5rem;
	}
  #opHours h2 {
		font-size: 0.9rem;
	}
  #opHours dl {
  	font-size: 1rem;
  }
	.map-open.sp #p-top #iconMenu {
		opacity: 0.25;
	}
  #iconMenu ul li:not(:last-child) {
	 margin-right: calc(var(--margin) * 1);
  }
	.map-open.sp #p-bottom {
		height: var(--p-bottomH);
	}
	.sp input#accordion + label {
		font-size: 1.2rem;
		padding-top: 1rem;
	}
	.sp input#accordion + label + #accMap {
		opacity: 0;
	}
	.sp input#accordion:checked + label + #accMap {
		opacity: 1;
		height: var(--iframeH);
		overflow: hidden;
	}

	/*--------------------------------
	tablet
	----------------------------------*/
	:is(.tab, .pc) #p-top {
		max-width: 500px;
		padding: calc(var(--padding) * 2);
		font-size: 1rem;
	}
	:is(.tab, .pc) #header h1 span {
		height: 100px;
	}
	:is(.tab, .pc) .map-open #iconMenu {
		opacity: 0.1;
	}
	:is(.tab, .pc) #iconMenu {
		margin-top: 1.5rem;
	}
	:is(.tab, .pc) #iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 2);
	}
	:is(.tab, .pc) #p-bottom {
		width: 90%;
		max-width: 650px;
		height: var(--p-bottomH);
		transition: 0.75s;
		animation-duration: 1.25s;
		animation-delay: 3s;
	}
	:is(.tab, .pc) input#accordion + label {
		height: var(--mapLabelH);
		font-size: 1.4rem;
		padding-top: 0;
		line-height: var(--mapLabelH);
		pointer-events: none;
	}
	:is(.tab, .pc) input#accordion + label::before {
		vertical-align: -0.2rem;
	}
	:is(.tab, .pc) input#accordion + label + #accMap {
		width: calc(100% - var(--margin) * 4);
		height: calc(var(--iframeH) + 20px);
	}
	:is(.tab, .pc) input#accordion + label + #accMap iframe {
		height: 100%;
	}
}
@media (max-height: 640px) {
	:root {
		--p-bottomH:75vh;
	}
	.map-open.sp #p-top #opHours {
		opacity: 0.25;
	}
}


/*====================================
	横画面（landscape）--tablet, pc
======================================*/
@media (orientation: landscape) {
:root .tab {
	--mapLabelH:3rem;
	--p-bottomH:67vh;
}
:root .pc {
	--mapLabelH:4rem;
	--p-bottomH:60vh;
}
	#Wrapper::before {
		background-image: var(--back-img-land);
	}
	#opHours dl dd span.hyphen {
		margin-left: 0.5rem;
	}

	/*--------------------------------
	smartphone
	----------------------------------*/
	.sp #Wrapper::before {
		background-size: 100% auto;
	}
	.sp #p-top {
		width: 50%;
		height: 95%;
		padding: var(--padding);
	}
	.sp #header h1 {
		margin: var(--margin) 0 calc(var(--margin) * 1.5) 0;
	}
	.sp #p-top #header h1 span {
		height: 50px;
	}
	.map-open.sp #p-top :is(#opHours, #iconMenu) {
		opacity: 1;
	}
	.sp #p-top #opHours dl {
		transform: scale(0.85) rotate(0.1deg);
		margin-bottom: 0;
	}
	
	.sp #p-bottom {
		width: 45%;
		height: 125px;
	}
	.sp.map-open #p-bottom {
		height: 90%;
	}
	.sp input#accordion + label + #accMap {
		border-width: 0;
	}

	.sp input#accordion:checked + label + #accMap {
		height: 100%;
		border-width: 5px;
	}
	.sp #accMap iframe {
		height: 100%;
	}

	/*--------------------------------
	tablet
	----------------------------------*/
	.tab #p-top {
		width: 450px;
	}
	.tab #p-bottom {
		width: 550px;
		height: 100px;
	}
	.map-.opentab #p-top #iconMenu {
		opacity: 0.25;
	}
	.map-open.tab #p-bottom {
		height: var(--p-bottomH);
	}
	.tab input#accordion + label {
		font-size: 1.2rem;
		padding-top: 1rem;
	}
	.tab input#accordion + label + #accMap {
		opacity: 0;
		width: calc(100% - var(--margin) * 4);
	}
	.tab input#accordion:checked + label + #accMap {
		opacity: 1;
		height: var(--iframeH);
		overflow: hidden;
	}

	/*--------------------------------
	pc
	----------------------------------*/
	.pc #p-top {
		max-width: 560px;
		padding: calc(var(--padding) * 2);
		font-size: 1rem;
	}
	.pc #header h1 span {
		height: 125px;
	}
	.pc .map-open #iconMenu {
		opacity: 0.1;
	}
	.pc #iconMenu {
		margin-top: 1.5rem;
	}
	.pc #iconMenu ul li:not(:last-child) {
		margin-right: calc(var(--margin) * 2);
	}
	.pc #p-bottom {
		width: 90%;
		max-width: 700px;
		height: var(--p-bottomH);
		transition: 0.75s;
		animation-duration: 1.25s;
		animation-delay: 3s;
	}
	.pc input#accordion + label {
		height: var(--mapLabelH);
		margin-top: var(--margin);
		padding-top: 0;
		font-size: 1.5rem;
		line-height: var(--mapLabelH);
		pointer-events: none;
	}
	.pc input#accordion + label::before {
		vertical-align: -0.2rem;
	}
	.pc input#accordion + label + #accMap {
		width: calc(100% - var(--margin) * 6);
		height: calc(var(--iframeH) + 20px - var(--margin));
	}
	.pc input#accordion + label + #accMap iframe {
		height: 100%;
	}
	/* Access close button */
	input#accordion + label .close {
		right: calc(var(--margin) * 1.5);
	}
}