/* ===============================================
	global
================================================== */
:root {
	--font-base : "Optimized Noto", "Noto Sans JP", sans-serif;
	--font-avenir : "Avenir", "Roboto", "Trebuchet MS", sans-serif;
}

* {
	margin : 0;
	padding : 0;
	box-sizing : border-box;
}
*::before, *::after {
	box-sizing : border-box;
}

html {
	scroll-behavior : smooth;
	font-size : 62.5%;
}
body {
	font-family : var(--font-base);
	font-size : clamp(1.3rem, 0.375rem + 2.463vw, 2.6rem);
	font-weight : 900;
	line-height : 1.8;
	-webkit-text-size-adjust : 100%;
	-webkit-font-smoothing : antialiased;
}
@media (min-width : 912px) {
	body {
		font-size : clamp(1.6rem, 1.254rem + 0.379vw, 1.8rem);
	}
}

input,button,select,textarea {
	font : inherit;
}
a {
	transition : background .5s;
	text-decoration : none;
	color : inherit;
}
ul,ol,summary {
	list-style : none;
}
img {
	margin : 0 auto;
	vertical-align : middle;
	max-width : 100%;
	height : auto;
}
button,summary {
	cursor : pointer;
}
button {
	border : none;
	background : none;
}
summary {
	position : relative;
}
summary::-webkit-details-marker {
	display : none;
}

video {
	display : block;
	filter : drop-shadow(0 0 rgba(0,0,0,0));
	outline : none;
	border : none;
}

/* ===============================================
	definition
================================================== */

header,main,footer {
	width : 100%;
}
header > h1,
header > section,
main {
	margin : 0 auto;
	max-width : 1440px;
	min-width : 375px;
}
footer {
	min-width : 375px;
}

/* _______________________________________ link icons */

header > section > p > a,
header :is(h2 > a, summary),
footer > p > a[href="https://zasshu.jp/"],
footer > p > a[href*="instagram.com"] {
	display : block;
	overflow : hidden;
	text-indent : 100%;
	white-space : nowrap;
}

/* _______________________________________ logo */

header h2 {
	overflow : hidden;
}
header h2 > a,
footer > p > a[href="https://zasshu.jp/"] {
	-webkit-mask : url("../images/logo.svg") 0 0 / contain no-repeat;
	mask : url("../images/logo.svg") 0 0 / contain no-repeat;
}

/* _______________________________________ instagram */

header nav a[href*="instagram.com"] {
	display : block;
	padding : 0;
}

header nav a[href*="instagram.com"]::before {
	display : inline-block;
	flex : 0 0 auto;
	margin-right : min(3.2vw, 24px);
	background : url("../images/instagram_global.png") no-repeat center / contain;
	content : "";
	width : clamp(3.0rem, 8vw, 6.0rem);
	height : clamp(3.0rem, 8vw, 6.0rem);
}
footer > p > a[href*="instagram.com"] {
	background : url("../images/instagram.png") no-repeat center / contain;
}

/* _______________________________________ store & time */

header > section > p > a {
	background : url("../images/store.png") 0 0 / contain no-repeat;
	width : clamp(4.5rem, 12vw, 9.0rem);
	aspect-ratio : 90 / 84;
}

header nav aside p > a[href*="shop.zasshu.jp"],
footer > p > a[href*="shop.zasshu.jp"],
time {
	font-family : var(--font-avenir);
	font-weight : 900;
	font-style : italic;
}
time {
	color : #9F9F9F;
}

@media (min-width : 912px) {
	header > section > p > a {
		background : url("../images/store.png") 0 0 / contain no-repeat;
	}
}

/* _______________________________________ headline */

header > h1 {
	display : none;
}

/* ===============================================
	header
================================================== */

header {
	position : sticky;
	top : 0;
	background : #ffffff;
	z-index : 50;
}
header:has(details[open]) {
	z-index : 120;
}

header > section {
	display : flex;
	align-items : center;
	justify-content : space-between;
	padding : 1.5rem clamp(2.0rem, 5.333vw, 4.0rem);
	gap : 1.5rem;
	height : 100%;
}

/* _______________________________________ logo */

header h2 { 
	order : 1;
}
header h2 > a {
	background : #000000;
	width : clamp(16rem, 42.667vw, 32rem);
	aspect-ratio : 320 / 48;
}

@media (min-width : 912px) {
	header h2 > a {
		width : clamp(28rem, 7.58vw + 21.091rem, 32rem);
	}
}

/* _______________________________________ store */

header > section > p {
	flex-shrink : 0;
	margin-left : auto;
	order : 2;
}

/* _______________________________________ details > summary */

header details {
	flex-shrink : 0;
	order : 3;
}
header summary {
	display : flex;
	position : relative;
	align-items : center;
	justify-content : center;
	border : 1px solid #000000;
	border-radius : 50%;
	background : #ffffbd;
	color : transparent;
	font-size : 0;
	line-height : 0;
	user-select : none;
	width : clamp(40px, 12.015px + 7.463vw, 80px);
	aspect-ratio : 80 / 80;
	z-index : 130;
}

header summary::before {
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	background : url("../images/accessories/open.png") no-repeat center / contain;
	content : "";
	width : clamp(2.0rem, 5.333vw, 4.0rem);
	height : clamp(1.1rem, 2.933vw, 2.2rem);
}
header details[open] summary {
	position : fixed;
	top : min(2.133vw, 16px);
	right : min(5.333vw, 40px);
	width : min(10.667vw, 80px);
}
header details[open] summary::before {
	background-image : url("../images/accessories/close.png");
	width : min(3.96vw, 29.7px);
	height : min(3.96vw, 29.7px);
}

/* _______________________________________ nav */

header > section > nav {
	position : fixed;
	overflow-y : auto;
	overscroll-behavior-y : contain;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : flex-start;
	inset : 0 0 0 auto; 
	padding : min(21.867vw, 164px) min(13.333vw, 100px) min(5.333vw, 40px);
	transform : translateX(100%);
	transition : transform .5s ease;
	background : #ffffff;
	width : 100vw; 
	height : 100vh;
	z-index : 110;
}
header:has(details[open]) > section > nav {
	transform : translateX(0);
}

header nav ul {
	display : flex;
	flex-direction : column;
	gap : min(10.533vw, 79px);
	margin-inline : auto;
	background : url("../images/accessories/illust_07.png") no-repeat right bottom;
	background-size : clamp(14rem, 37.333vw, 28rem) auto;
	font-size : clamp(1.7rem, 4.533vw, 3.4rem);
	line-height : 1;
	width : 100%;
	max-width : min(73.333vw, 550px);
}
header nav ul a {
	position : relative;
	padding-bottom : 1.0rem;
}
header nav ul a::after {
	position : absolute;
	left : 0;
	bottom : 0;
	background : #000000;
	transform : scaleX(0);
	transform-origin : left center;
	transition : transform .3s ease;
	content : "";
	width : 100%;
	height : 0.2rem;
}

@media (hover: none) {
	header nav ul a:active::after {
		transform : scaleX(1);
	}
}
@media (hover: hover) {
	header nav ul a:hover::after {
		transform : scaleX(1);
	}
}


header nav aside {
	display : flex;
	flex-direction : column;
	align-items : flex-start;
	margin-top : min(12vw, 90px);
	gap : min(9.333vw, 70px);
	width : min(73.333vw, 550px);
}
header nav aside a {
	color : #000000;
}

header nav aside p:has(> a[href*="shop.zasshu.jp"]) {
	width : min(73.333vw, 550px);
	max-width : 100%;
}
header nav aside p > a[href*="shop.zasshu.jp"] {
	position : relative;
	overflow : hidden;
	display : flex;
	align-items : center;
	justify-content : center;
	padding : min(5.2vw, 39px) 2.0rem;
	transition : color .25s ease;
	border : min(.534vw, 4px) solid #000000;
	font-size : clamp(1.7rem, 4.533vw, 3.4rem);
	letter-spacing : .10em;
	line-height : 1;
	width : 100%;
	z-index : 0;
}
header nav aside p > a[href*="shop.zasshu.jp"]::before {
	position : absolute;
	inset : 0;
	transform : scaleX(0);
	transform-origin : left center;
	transition : transform .25s cubic-bezier(0.45, 0, 0.55, 1);
	background : #000000;
	content : "";
	z-index : -1;
}
@media (hover : none) {
	header nav aside p > a[href*="shop.zasshu.jp"]:active {
		color : #ffffff;
	}
	header nav aside p > a[href*="shop.zasshu.jp"]:active::before {
		transform : scaleX(1);
	}
}
@media (hover : hover) {
	header nav aside p > a[href*="shop.zasshu.jp"]:hover {
		color : #ffffff;
	}
	header nav aside p > a[href*="shop.zasshu.jp"]:hover::before {
		transform : scaleX(1);
	}
}

header nav aside p:has(> a[href*="instagram.com"]) {
	display : flex;
	justify-content : flex-start;
	width : 100%;
}
header nav aside p > a[href*="instagram.com"] {
	display : flex;
	align-items : center;
	font-family : var(--font-avenir);
	font-size : min(4vw, 30px);
	font-weight : 900;
	font-style : italic;
	line-height : min(4.533vw, 34px);
	letter-spacing : .04em;
	padding-block : 0;
}
@media (min-width : 912px) {
	header:has(details[open]) {
		z-index : 50;
	}
	header > section {
		margin : auto;
		padding : 1.2rem clamp(3.2rem, calc(16.667vw - 12rem), 12rem);
		gap : 0;
	}

	header h2 {
		margin-right : auto;
		order : 1;
	}

	header > section > nav {
		position : static;
		overflow : visible;
		display : flex;
		align-items : center;
		margin : 0 clamp(1.6rem, calc(3.03vw - 1.164rem), 3.2rem) 0 0;
		padding : 0;
		order : 2;
		transform : none;
		transition : none;
		background : transparent;
		width : auto;
		height : auto;
	}
	header nav ul {
		flex-direction : row;
		align-items : center;
		gap : clamp(1.2rem, calc(3.788vw - 2.255rem), 3.2rem);
		margin : 0;
		padding-bottom : 0;
		background : none;
		font-size : clamp(1.2rem, 0.855rem + 0.379vw, 1.4rem);
		line-height : 1.3;
		white-space : nowrap;
		width : auto;
		max-width : none;
	}

	header > section > p {
		margin-left : 0;
		order : 3; 
	}
	header > section > p > a {
		background-size : 100% 100%;
		width : 9.6rem;
		height : auto;
		aspect-ratio : 96 / 90;
	}

	header nav aside,
	header details {
		display : none;
	}
}


/* ===============================================
	main
================================================== */

main {
	display : flex;
	flex-flow : column;
	justify-content : space-between;
}

/* ===============================================
	article
================================================== */

main > article {
	margin : 0 auto;
}

main::after {
	display : block;
	flex : 0 0 auto;
	width : 100%;
	height : calc(
		min(27.333333vw, 20.5rem)
		+ min(20.666667vw, calc(31.703704rem - 21.604938vw))
	);
	content : "";
}

@media (min-width : 912px) {
	main::after {
		height : calc(min(21.685824vw, 28.3rem) + 12.0rem);
	}
}


/* ===============================================
	footer
================================================== */

footer,
footer nav,
footer nav ul {
	display : grid;
}

footer {
	position : relative;
	grid-template-columns : minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items : start;
	padding : clamp(4.0rem, 10.667vw, 8.0rem) 5% clamp(4.0rem, 10.667vw, 8.0rem);
	background-color : #3A2F28;
	color : #F4F2EB;
}

footer::before {
	position : absolute;
	left : 0;
	bottom : 100%;
	width : 100%;
	height : max(clamp(14rem, 25vw, 28rem), 20.5rem);
	background-image :
		url("../images/accessories/bottom.png"),
		url("../images/accessories/background.png");
	background-position : center bottom, center bottom;
	background-repeat : repeat-x, no-repeat;
	background-size : auto clamp(2.4rem, 3.467vw, 2.6rem), min(100%, 75rem) auto;
	pointer-events : none;
	content : "";
}

/* _______________________________________ brand message */

footer > p:not(:has(a)) {
	grid-column : 1 / -1;
	grid-row : 1;
	justify-self : center;
	margin-bottom : clamp(0.8rem, 2.133vw, 1.6rem);
	font-size : clamp(1.2rem, 3.2vw, 2.4rem);
	font-weight : 900;
	letter-spacing : .04em;
	text-align : center;
	width : 53.333%;
	max-width : 40rem;
}

/* _______________________________________ logo */

footer > p:has(> a[href="https://zasshu.jp/"]:only-child) {
	grid-column : 1 / -1;
	grid-row : 2;
	justify-self : center;
	width : min(53.333vw, 40rem);
}
footer > p > a[href="https://zasshu.jp/"] {
	background : #F4F2EB;
	width : 100%;
	aspect-ratio : 320 / 48;
}

/* _______________________________________ store */

footer > p:has(> a[href*="shop.zasshu.jp"]:only-child) {
	grid-column : 1 / -1;
	grid-row : 3;
	justify-self : center;
	margin : clamp(2.0rem, 5.333vw, 4.0rem) 0 clamp(5.0rem, 13.333vw, 10.0rem);
	width : min(53.333vw, 40rem);
}
footer > p > a[href*="shop.zasshu.jp"] {
	display : flex;
	align-items : center;
	justify-content : center;
	padding : clamp(1.2rem, 3.2vw, 2.4rem);
	border : 1px solid #F4F2EB;
	font-size : clamp(1.45rem, 3.867vw, 2.9rem);
	line-height : 1.2;
	letter-spacing : .04em;
	width : 100%;
}

/* _______________________________________ navigation */

footer nav {
	grid-template-columns : repeat(2, max-content);
	grid-column : 1 / 3;
	grid-row : 4;
	align-self : start;
	column-gap : clamp(3.6rem, 9.6vw, 7.2rem);
	width : max-content;
}
footer nav ul:first-child {
	justify-self : start;
}
footer nav ul:last-child {
	justify-self : start;
}
footer nav ul {
	grid-auto-flow : row;
	align-content : start;
	row-gap : clamp(1.2rem, 3.2vw, 2.4rem);
	height : auto;
}
footer nav li {
	font-size : clamp(1.1rem, 2.933vw, 2.2rem);
	line-height : 1.35;
	white-space : nowrap;
}
footer nav li > a[href*="shop.zasshu.jp"] {
	font-size : clamp(1.0rem, 2.667vw, 2.0rem);
}

/* _______________________________________ instagram */

footer > p:has(> a[href*="instagram.com"]:only-child) {
	grid-column : 3 / 4;
	grid-row : 4;
	align-self : start;
	justify-self : end;
	margin-left : clamp(2.0rem, 5.333vw, 4.0rem);
}
footer > p > a[href*="instagram.com"] {
	width : clamp(2.75rem, 7.333vw, 5.5rem);
	height : clamp(10.3rem, 27.467vw, 20.6rem);
}

/* _______________________________________ copyright */

footer > small {
	grid-column : 1 / -1;
	grid-row : 5;
	margin-top : clamp(3.0rem, 8vw, 6.0rem);
	text-align : center;
	color : #938D79;
	font-size : clamp(1.0rem, 2.133vw, 1.6rem);
	width : 100%;
}

@media (min-width : 912px) {
	footer {
		grid-template-columns : min(19.444vw, 28rem) minmax(0, 1fr) minmax(3.5rem, 5.5rem);
		padding : clamp(8.0rem, 9.028vw, 13rem)
			max(
				clamp(5.9rem, 14.236vw, 20.5rem),
				calc((100% - 144rem) / 2 + 20.5rem)
			)
			6.5rem;
		column-gap : 0;
	}

	footer::before {
		height : max(clamp(24rem, 20vw, 28.8rem), 28.3rem);
		background-image :
			url("../images/accessories/bottom.png"),
			url("../images/accessories/background_large.png");
		background-size : auto 3.7rem, min(100%, 130.5rem) auto;
	}

	footer > p:not(:has(a)) {
		grid-column : 1 / 2;
		grid-row : 1;
		justify-self : start;
		margin-bottom : clamp(0.2rem, 0.278vw, 0.4rem);
		max-width : 28rem;
		font-size : clamp(1.2rem, 0.972vw, 1.4rem);
		text-align : center;
		width : min(19.444vw, 28rem);
	}

	footer > p:has(> a[href="https://zasshu.jp/"]:only-child) {
		grid-column : 1 / 2;
		grid-row : 2;
		justify-self : start;
		width : min(19.444vw, 28rem);
	}

	footer > p:has(> a[href*="shop.zasshu.jp"]:only-child) {
		grid-column : 1 / 2;
		grid-row : 3;
		justify-self : start;
		margin : clamp(1.6rem, 1.736vw, 2.5rem) 0 0;
		width : min(19.444vw, 28rem);
	}
	footer > p > a[href*="shop.zasshu.jp"] {
		padding : clamp(0.8rem, 0.833vw, 1.2rem) 2.0rem;
		font-size : clamp(1.27rem, 1.389vw, 2.0rem);
	}

	footer nav {
		grid-template-columns : repeat(2, max-content);
		grid-column : 2 / 3;
		grid-row : 1 / 4;
		align-self : start;
		justify-self : start;
		margin-left : clamp(7.0rem, calc(12.5vw - 7.0rem), 11.0rem);
		column-gap : clamp(7.0rem, calc(12.5vw - 7.0rem), 11.0rem);
		width : max-content;
	}
	footer nav ul:first-child {
		justify-self : start;
	}
	footer nav ul:last-child {
		justify-self : start;
	}
	footer nav ul {
		row-gap : clamp(1.2rem, 1.667vw, 2.4rem);
	}
	footer nav li {
		font-size : clamp(1.14rem, 1.25vw, 1.8rem);
	}
	footer nav li > a[href*="shop.zasshu.jp"] {
		font-size : clamp(0.89rem, 0.972vw, 1.4rem);
	}

	footer > p:has(> a[href*="instagram.com"]:only-child) {
		grid-column : 3 / 4;
		grid-row : 1 / 4;
		align-self : start;
		justify-self : end;
		margin-left : 0;
	}
	footer > p > a[href*="instagram.com"] {
		width : clamp(3.48rem, 3.819vw, 5.5rem);
		height : clamp(10.58rem, 11.597vw, 16.7rem);
	}

	footer > small {
		grid-column : 1 / -1;
		grid-row : 4;
		margin-top : clamp(8rem, 9.028vw, 13rem);
		font-size : 1.1rem;
	}
}