@charset "UTF-8";




@media screen and (min-width: 769px) {
	#menu {
		position: fixed;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		z-index: 100001;
		font-family: "acumin-pro-semi-condensed", Helvetica, Arial, sans-serif;
		background: #fff;
		
		left: -101vw;
	}
	
	#menu-label {
		position: absolute;
		left: 64px;
		top: 35px;
		font-size: 6vh;
		margin-top: -2.75vh;
	}
	
	body.menu #menu {
		left: 0;
	}
	
	body.menu #menu-label {
		display: block;
	}
	
	
	body.menu #menu-button:before {
		margin-top: 0;
	}
	body.menu #menu-button:after {
		visibility: hidden;
	}
	
	
	body.menu #logo {
		display: none;
	}
	body.menu main {
		display: none;
	}
	
	
	
	
	
	#menu a {
		text-decoration: none;
		color: #000;
		cursor: pointer;
	}
	

	#menu .main strong {
		position: relative;
		display: inline-block;
		top: -0.15em;
		font-size: 12vh;
		font-weight: normal;
	}
	#menu .z strong,
	#menu .bag strong,
	#menu .essentials strong,
	#menu .column strong {
		font-style: italic;
	}
	
	#menu .main span {
		position: absolute;
		display: none;
		left: 0;
		bottom: 0.1em;
		text-transform: uppercase;
		font-size: 9vh;
		font-style: italic;
		white-space: nowrap;
	}
	
	
	#menu .main > div {
		position: relative;
		height: 10.75vh;
		opacity: 0;
		will-change: opacity;
		overflow: hidden;
	}
	
	body.menu #menu .main > div {
		opacity: 1;
		transition: opacity 0ms linear;
	}
	
	body.menu #menu .main > div:nth-child(1) {
		transition-delay: 800ms;
	}
	body.menu #menu .main > div:nth-child(2) {
		transition-delay: 700ms;
	}
	body.menu #menu .main > div:nth-child(3) {
		transition-delay: 600ms;
	}
	body.menu #menu .main > div:nth-child(4) {
		transition-delay: 500ms;
	}
	body.menu #menu .main > div:nth-child(5) {
		transition-delay: 400ms;
	}
	body.menu #menu .main > div:nth-child(6) {
		transition-delay: 300ms;
	}
	body.menu #menu .main > div:nth-child(7) {
		transition-delay: 200ms;
	}
	body.menu #menu .main > div:nth-child(8) {
		transition-delay: 100ms;
	}
	
	
	
	#menu .bag a:hover strong,
	#menu .column a:hover strong {
		visibility: hidden;
	}
	#menu .bag a:hover span,
	#menu .column a:hover span {
		display: inline-block;
	}
	
	
	
	
	#menu .container {
		position: relative;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		padding: 0 30px;
		display: table-cell;
		vertical-align: middle;
	}
	


	
	#menu .main {
		position: absolute;af
		width: 100vh;
		left: calc(-1.55vh - 0px);
		top: 9.0vh;
		
		-ms-transform: rotate(90deg) translateY(-100%);
		-ms-transform-origin: left top;
		
		-moz-transform: rotate(90deg) translateY(-100%);
		-moz-transform-origin: left top;
		
		-webkit-transform: rotate(90deg) translateY(-100%);
		-webkit-transform-origin: left top;
		
		transform: rotate(90deg) translateY(-100%);
		transform-origin: left top;
	}
	
	
	#menu .sub {
		position: absolute;
		left: 20px;
		bottom: 60px;
		font-size: 0;
		margin-left: -1px;
	}
	#menu .sub li {
		display: inline-block;
		font-size: 24px;
		font-style: italic;
	}
	#menu .sub li + li:before {
		content: "";
		display: inline-block;
		margin: 0 0.75em;
	}
	#menu .sub li a {
		padding-right: 0.15em;
	}
	
	
	#menu .sns {
		position: absolute;
		left: 20px;
		bottom: 20px;
		font-size: 0;
		text-transform: uppercase;
	}
	#menu .sns li {
		display: inline-block;
		font-size: 24px;
	}
	#menu .sns li + li:before {
		content: "";
		display: inline-block;
		margin: 0 0.75em;
	}
	
	

	#menu .home {
		position: absolute;
		right: 20px;
		bottom: 20px;
		font-size: 24px;
	}
	
	
	#menu .ans {
		position: absolute;
		right: -1px;
		bottom: 110px;
	}
	#menu .ans a {
		display: block;
		width: 140px;
		height: 82px;
		background: url(../img/30ans_logo.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	
	#menu strong {
		position: relative;
	}
	#menu a:hover strong:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 5px;
		left: 0;
		bottom: 0.05em;
		background: #000;
	}
	#menu .essentials a:hover strong:after {
		bottom: 0.085em;
	}
	
	#menu .sub a,
	#menu .sns a,
	#menu .home a {
		position: relative;
		display: inline-block;
	}
	
	#menu .sub a:hover:after,
	#menu .sns a:hover:after,
	#menu .home a:hover:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		left: 0;
		bottom: 2px;
		background: #000;
	}
	
}





@media screen and (max-width: 768px) {
	#menu {
		position: fixed;
		box-sizing: border-box;
		width: 100vw;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 100;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		font-family: "acumin-pro-semi-condensed", Helvetica, Arial, sans-serif;
		background: #fff;
		
		height: 0;
	}
	#menu-label {
		position: absolute;
		left: 40px;
		top: 20px;
		font-size: 4vh;
		margin-top: -1.25vh;
	}
	
	
	body.menu #menu {
		height: 100%;
	}
	body.menu #menu-label {
		display: block;
	}
	body.menu #content-title {
		display: none;
	}
	
	body.menu #menu-button:before {
		margin-top: 0;
	}
	body.menu #menu-button:after {
		visibility: hidden;
	}
	
	body.menu #logo {
		display: none;
	}
	body.menu main {
		display: none;
	}
	
	
	
	
	#menu a {
		text-decoration: none;
		color: #000;
	}
	#menu .main strong {
		position: relative;
		display: inline-block;
		top: -0.1em;
		font-size: 11.5vw;
		font-weight: normal;
	}
	#menu .z strong,
	#menu .bag strong,
	#menu .essentials strong,
	#menu .column strong {
		font-style: italic;
	}
	
	#menu .main span {
		position: absolute;
		display: none;
		left: 0;
		bottom: 0.05em;
		font-size: 9vw;
		font-style: italic;
		text-transform: uppercase;
		white-space: nowrap;
	}
	
	
	#menu .main a {
		display: inline-block;
	}
	#menu .main > div {
		position: relative;
		opacity: 0;
		will-change: opacity;
		width: 100vh;
		height: 10.75vw;
		overflow: hidden;
	}
	body.menu #menu .main > div {
		opacity: 1;
		transition: opacity 0ms linear;
	}
	
	body.menu #menu .main > div:nth-child(1) {
		transition-delay: 800ms;
	}
	body.menu #menu .main > div:nth-child(2) {
		transition-delay: 700ms;
	}
	body.menu #menu .main > div:nth-child(3) {
		transition-delay: 600ms;
	}
	body.menu #menu .main > div:nth-child(4) {
		transition-delay: 500ms;
	}
	body.menu #menu .main > div:nth-child(5) {
		transition-delay: 400ms;
	}
	body.menu #menu .main > div:nth-child(6) {
		transition-delay: 300ms;
	}
	body.menu #menu .main > div:nth-child(7) {
		transition-delay: 200ms;
	}
	body.menu #menu .main > div:nth-child(8) {
		transition-delay: 100ms;
	}
	
	
	
	
	#menu .bag a.touched strong,
	#menu .column a.touched strong {
		visibility: hidden;
	}
	#menu .bag a.touched span,
	#menu .column a.touched span {
		display: inline-block;
		width: 100vh;
	}
	
	
	
	
	#menu .container {
		position: relative;
		box-sizing: border-box;
		width: 100vw;
		height: 100%;
		left: 0;
		top: 0;
	}
	
	
	#menu .main {
		position: absolute;
		width: 100vh;
		left: -0.8vh;
		top: 8vh;
		transform: rotate(90deg) translateY(-100%);
		transform-origin: left top;
	}
	
	
	#menu .sub {
		position: absolute;
		left: 10px;
		bottom: 100px;
		font-size: 0;
		margin-left: -1px;
	}
	#menu .sub li {
		display: inline-block;
		font-size: 14px;
		font-style: italic;
	}
	#menu .sub li + li:before {
		content: "";
		display: inline-block;
		margin: 0 0.4em;
	}
	#menu .sub li a {
		padding-right: 0.1em;
	}
	
	
	#menu .sns {
		position: absolute;
		left: 10px;
		bottom: 75px;
		margin-top: 25px;
		font-size: 0;
		text-transform: uppercase;
	}
	#menu .sns li {
		display: inline-block;
		font-size: 14px;
	}
	#menu .sns li + li:before {
		content: "";
		display: inline-block;
		margin: 0 0.5em;
	}
	
	

	#menu .home {
		position: absolute;
		right: 10px;
		bottom: 20px;
		margin-top: 80px;
		font-size: 14px;
	}
	
	
	#menu .ans {
		position: absolute;
		left: 11px;
		bottom: 20px;
	}
	#menu .ans a {
		display: block;
		width: 64px;
		height: 38px;
		background: url(../img/30ans_logo.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	
	#menu strong {
		position: relative;
	}
	#menu a.touched strong:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 3px;
		left: 0;
		bottom: 0.05em;
		background: #000;
	}
	#menu .essentials a.touched strong:after {
		bottom: 0.1em;
	}
	
	#menu .sub a,
	#menu .sns a,
	#menu .home a {
		position: relative;
		display: inline-block;
	}
	
	#menu .sub a.touched:after,
	#menu .sns a.touched:after,
	#menu .home a.touched:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		left: 0;
		bottom: 0;
		background: #000;
	}
}



@media screen and (max-width: 374px) {
	#menu .sns li,
	#menu .sub li,
	#menu .home {
		font-size: 12px;
	}
}


@media screen and (max-width:1024px) and (orientation:portrait) {
	#menu .main strong {
		font-size: 10vw;
	}
	#menu .main > div {
		height: 9.5vw;
	}
	#menu strong {
		position: relative;
	}
	#menu a.touched strong:after {
		content: "";
		position: absolute;
		display: block !important;
		width: 100%;
		height: 4px;
		left: 0;
		bottom: 0.55vw;
		background: #000;
	}
	#menu .essentials a.touched strong:after {
		bottom: 0.1em;
	}
	#menu a:hover strong:after {
		display: none;
	}
	
	#menu-label {
		position: absolute;
		left: 65px;
		top: 30px;
		font-size: 5vh;
		margin-top: -2vh;
	}
}



@media screen and (min-width: 769px) {
	html.ipad #menu,
	html.ipad #menu .container {
		height: var(--zucca-height);
	}
	
	html.ipad #menu .main strong {
	}
	
}