@charset "UTF-8";
/* CSS Document */


header {
	padding: 2.4rem 0;
	position: relative;
}

#corpLogo {
	/* 「◯A」マークの直径を 70px にする */
	width: 44.115rem;
	margin-left: 1rem;
}

.scrolling #corpLogo a::after {
	content: url("/common/images/aw-logo-vertical.svg");
	width: 10.6rem;
	position: fixed;
	top: 0;
	opacity: 0;
	left: calc(3vw - 0.8rem);
	transition: all ease-in-out 0.2s;
}

.scrolling.scrolled #corpLogo a::after {
	top: 3.4rem;
	opacity: 1;
}

#navToggle {
	display: none;
}

#globalNav {
	position: fixed;
	left: 3vw;
	top: 10.8rem;
	font-size: 2.1rem;
	font-weight: 300;
	padding-top: 1em;
	width: 9rem;
	text-align: center;
	font-family: alternate-gothic-atf, 'Hiragino Sans', YuGothic, "kozuka-gothic-pro", Meiryo, 'sans-serif';
	transition: all ease-in-out 0.2s;
}

@media screen and (min-width: 1001px) {

	.scrolled #globalNav {
	top: 15rem;
	}
}



#globalNav li {
	margin: 0.25em 0;
	position: relative;
}

#globalNav a {
	display: block;
	height: 1.7em;
	padding-top: 0.4em;
}

#globalNav a span {
	display: block;
	line-height: 1;
	z-index: 1;
	position: relative;
	bottom: 0;
	transition: all ease-out 0.3s;
}

#globalNav a:hover {
	opacity: 1;
}

#globalNav a:hover span {
	opacity: 1;
	bottom: 0.25em;
}

#drawerBaseLayer {
	display: none;
	animation: 0.4s forwards darklayer;
}

@keyframes darklayer {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* 現在位置マーカー（帯） */

#globalNav a span::after {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.65em;
	background: rgba(212,112,78,0.55);
	background: linear-gradient(to right, rgba(212,112,78,0) 0%,rgba(212,112,78,0.55) 20%,rgba(212,112,78,0.55) 80%,rgba(212,112,78,0) 100%);
	transition: all ease-out 0.3s;
	z-index: -1;
}

#home #globalNav a[href="/"] span::after, 
#about #globalNav a[href="/about/"] span::after,
#info #globalNav a[href="/info/"] span::after,
#shop #globalNav a[href="/shop/"] span::after,
#event #globalNav a[href="/event/"] span::after,
#contact #globalNav a[href="/contact/"] span::after {
	content: "";
}

#home #globalNav a[href="/"]:hover span::after, 
#about #globalNav a[href="/about/"]:hover span::after,
#info #globalNav a[href="/info/"]:hover span::after,
#shop #globalNav a[href="/shop/"]:hover span::after,
#event #globalNav a[href="/event/"]:hover span::after,
#contact #globalNav a[href="/contact/"]:hover span::after {
	height: 1px;
	background: rgb(212, 112, 78);
	background: linear-gradient(to right, rgba(212,112,78,0) 0%,rgb(212,112,78) 20%,rgb(212,112,78) 80%,rgba(212,112,78,0) 100%);
}


/* hover で現れる日本語（タッチデバイスの場合は常時表示） */

#globalNav li small {
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.65em;
	font-weight: 400;
	color: #000;
	top: 1.3em;
	opacity: 0;
	z-index: -2;
	transition: all ease-out 0.3s;
}

#globalNav li:has(a:hover) small {
	top: 1.9em;
	opacity: 1;
}


/* hover で現れる横線（タッチデバイスの場合は常時表示） */

#globalNav a span::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 0;
	height: 5px;
	background: rgb(212, 112, 78);
	background: linear-gradient(to right, rgba(212,112,78,0) 0%,rgb(212,112,78) 20%,rgb(212,112,78) 80%,rgba(212,112,78,0) 100%);
	opacity: 0.5;
	z-index: -1;
	transition: all ease-out 0.3s;
}

#globalNav a:hover span::before {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	opacity: 1;
}

#home #globalNav a[href="/"] span::before,
#about #globalNav a[href="/about/"] span::before,
#info #globalNav a[href="/info/"] span::before,
#shop #globalNav a[href="/shop/"] span::before,
#event #globalNav a[href="/event/"] span::before,
#contact #globalNav a[href="/contact/"] span::before {
	content: none;
}



@media screen and (max-width: 1000px) {

	header {
		padding: 2rem 0;
	}

	#corpLogo {
		width: 30rem;
		margin-left: 1.1rem;
	}

	#globalNav {
		top: 8.2rem;
		left: 2vw;
		padding-top: 0;
		font-size: 1.9rem;
		width: 7.4rem;
	}

	#globalNav a {
		height: 1.5em;
	}

	.scrolling #corpLogo a::after {
		width: 7.4rem;
		left: 2vw;
	}

	.scrolling.scrolled #corpLogo a::after {
		top: 2rem;
	}

	#main {
		margin-left: 8.6rem;
	}
}


@media screen and (min-width: 641px) and (max-width: 1000px) {

	.scrolling.scrolled #globalNav {
		top: 11.4rem;
	}
}


@media screen and (min-width: 641px) {
	.touch #globalNav li {
		margin: 0.5em 0;
	}

	.touch #globalNav a span {
		opacity: 1;
		bottom: 0.25em;
	}

	.touch #globalNav li small {
		top: 1.9em;
		opacity: 1;
	}

	.touch #globalNav li small {
		top: 2.1em;
		font-size: 0.57em;
		color: #777;
	}

	.touch #globalNav a span::before {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		opacity: 1;
	}

	.touch #globalNav a span::before {
		width: 70%;
		left: 50%;
		margin-left: -35%;
	}
}


@media screen and (max-width: 640px) {

	body {
		padding: 0;
	}

	header {
		padding: 1.6rem 0;
	}

	#corpLogo {
		width: auto;
		margin-left: 3.8vw;
		position: relative;
		font-size: 0;
	}

	#corpLogo img {
		height: 5.4vw;
		min-height: 3.3rem;
	}

	.scrolling #corpLogo a::after {
		content: none;
	}


	/*-- Hamburger Icon --*/

	#navToggle {
		position: fixed;
		top: 0;
		right: 1.7vw;
		width: 3rem;
		height: 3rem;
		padding: 1.7rem;
		border-radius: 0 0 0.5em 0.5em;
		z-index: 200;
		background: rgb(255 255 255 / 65%);
		backdrop-filter: blur(1rem);
		text-align: center;
		cursor: pointer;
		display: flex;
		align-content: center;
		transition: box-shadow 0.2s ease-out;
	}

	.scrolling #navToggle {
		box-shadow: 0 0 0.4rem 0 #00000052;
	}

	#navToggle span {
		display: block;
		font-family: alternate-gothic-atf;
		font-weight: 400;
		font-size: 1.6rem;
		line-height: 2.8rem;
		width: 100%;
		height: 100%;
		position: relative;
		transition: all 0.1s ease-in;
		z-index: 1;
	}

	#navToggle::before,
	#navToggle::after {
		content: "";
		width: 1.5rem;
		height: 2px;
		background: #000;
		position: absolute;
		z-index: 2;
		transition: all ease-out 0.2s;
	}

	#navToggle::before {
		top: calc(50% - 1.3rem);
		right: 50%;
	}

	#navToggle::after {
		bottom: calc(50% - 1.3rem);
		left: 50%;
	}

	#navToggle span::before,
	#navToggle span::after {
		content: "";
		position: absolute;
		width: 1.5rem;
		height: 2px;
		background: #000;
		z-index: 2;
		transition: all ease-out 0.2s;
	}

	#navToggle span::before {
		left: 50%;
		top: 0.2rem;
	}

	#navToggle span::after {
		right: 50%;
		bottom: 0.2rem;
	}

	#globalNav.openNav + #drawerBaseLayer {
		display: block;
		opacity: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgb(0 0 0 / 0.5);
		z-index: 90;
	}

	header:has(.openNav) #navToggle {
		box-shadow: 0 0 0.4rem 0 #00000000;
	}

	header:has(.openNav) #navToggle span {
		font-size: 0;
		color: #fff;
	}

	header:has(.openNav) #navToggle::before {
		transform: rotate(45deg);
		width: 2rem;
		top: calc(50% - 0.8rem);
		right: calc(50% - 0.3rem);
	}

	header:has(.openNav) #navToggle::after {
		transform: rotate(45deg);
		width: 2rem;
		bottom: calc(50% - 0.8rem);
		left: calc(50% - 0.3rem);
	}

	header:has(.openNav) #navToggle span::before {
		transform: rotate(-45deg);
		width: 2rem;
		top: calc(50% - 0.8rem);
		left: calc(50% - 0.3rem);
	}

	header:has(.openNav) #navToggle span::after {
		transform: rotate(-45deg);
		width: 2rem;
		bottom: calc(50% - 0.8rem);
		right: calc(50% - 0.3rem);
	}

	/*---------//---------*/


	#globalNav {
		left: 0;
		top: calc(-12em - 6rem - 0.5em);
		font-size: 2rem;
		z-index: 100;
		background: #fff;
		box-sizing: border-box;
		width: 100vw;
		padding: 6rem 4vw 0.6em;
		-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
	}

	#globalNav.openNav {
		top: 0;
	}

	#globalNav::before {
		content: url(../images/aw-logo-horizontal.svg);
        position: absolute;
        left: calc(50% - 9rem);
        top: 1.2rem;
        width: 18rem;
        height: 4.6rem;
        line-height: 5.4rem;
        z-index: 110;
        border-bottom: solid 1px #999;
        border-image: linear-gradient(to right, #fff, #999, #fff) 1;
    }

	#globalNav a {
		display: inline-block;
		padding-top: 0;
	}

	#home #globalNav a[href="/"]::after, 
	#about #globalNav a[href="/about/"]::after,
	#info #globalNav a[href="/info/"]::after,
	#shop #globalNav a[href="/shop/"]::after,
	#event #globalNav a[href="/event/"]::after,
	#contact #globalNav a[href="/contact/"]::after {
		content: "";
		display: block;
		position: absolute;
		left: -2em;
		bottom: 0.25em;
		width: calc(100% + 4em);
		height: 0.65em;
		background: rgba(212,112,78,0.55);
		background: linear-gradient(to right, rgba(212,112,78,0) 0%,rgba(212,112,78,0.55) 20%,rgba(212,112,78,0.55) 80%,rgba(212,112,78,0) 100%);
		transition: all ease-out 0.3s;
		z-index: -3;
	}

	#globalNav a span,
	#globalNav a small {
		display: inline-block;
	}

	#globalNav a span {
		padding-right: 0.4em;
	}

	#globalNav a span::after {
		content: none !important;
	}

	#globalNav a small {
		opacity: 1;
		position: relative;
		top: auto;
		width: auto;
		padding-left: 0.75em;
		font-size: 0.7em;
		font-weight: 400 !important;
	}

	#globalNav a small::before {
		content: "";
		position: absolute;
		left: -0.3em;
		top: calc(50% - 0.3em);
		width: 0.6em;
		height: 0.6em;
		border-radius: 50%;
		background: rgba(212, 112, 78, 0.8);
	}

	#globalNav a:hover span {
		bottom: auto;
	}

	#globalNav a:hover small,
	#globalNav li:has(a:hover) small {
		top: auto;
	}

	#globalNav a span::before {
		content: none;
	}

	#main {
		padding: 0 4vw;
		margin-left: 0;
	}

	#topImage {
		left: -4vw;
		width: 100vw;
	}
}