@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media screen and (max-width: 750px) {
	#column {
		padding-bottom: calc(192 var(--remBase));
	}
}
@media print, screen and (min-width: 750.02px) {
	#column {
		display: grid;
		grid-template-columns: calc(730 var(--percentBase)) calc(
				220 var(--percentBase)
			);
		align-items: start;
		justify-content: space-between;
		padding-bottom: calc((198 - 2) var(--remBase));
	}
}

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar a {
	display: block;
	display: grid;
	align-content: start;
	align-items: center;
	color: white;
	letter-spacing: 0.1em;
	background-color: var(--blue);
	background-position: 0 0;
	background-size: 100% auto;
}
#sidebar a::after {
	display: block;
	font-size: 0;
	content: "";
	background: url("../images/ui/arrow/right01.svg") center / contain no-repeat;
}
@media screen and (max-width: 750px) {
	#sidebar {
		margin-top: calc((97 - 7) var(--remBase));
	}
	#sidebar a {
		grid-template-columns: auto calc(34 * 100% / 570);
		justify-content: space-between;
		height: calc(330 var(--remBase));
		padding-top: calc(269 var(--remBase));
		padding-left: calc(52 var(--percentBase));
		padding-right: calc(48 var(--percentBase));
		font-size: 2.8rem;
	}
	#sidebar a::after {
		height: calc(9 var(--remBase));
	}
	#sidebar a + a {
		margin-top: calc(50 var(--remBase));
	}
	#sidebar .about {
		background-image: url("../images/sidebar/about_sp.webp");
	}
	#sidebar .shop {
		background-image: url("../images/sidebar/shop_sp.webp");
	}
}
@media print, screen and (min-width: 750.02px) {
	#sidebar a {
		grid-template-columns: auto calc(23 * 100% / 220);
		column-gap: calc(11 * 100% / 220);
		justify-content: center;
		height: calc(200 var(--remBase));
		padding-top: calc(156 var(--remBase));
		font-size: 1.5rem;
	}
	#sidebar a::after {
		height: calc(6 var(--remBase));
	}
	#sidebar a + a {
		margin-top: calc(20 var(--remBase));
	}
	#sidebar .about {
		background-image: url("../images/sidebar/about_pc.webp");
	}
	#sidebar .shop {
		background-image: url("../images/sidebar/shop_pc.webp");
	}
}

/* --------------------------------------------
CATEGORY LINKS
--------------------------------------------- */
#categoryLinks .title {
	font-weight: 400;
	color: var(--blue);
	letter-spacing: 0.2em;
	border-bottom-color: currentColor;
	border-bottom-style: solid;
}
#categoryLinks a {
	display: grid;
	align-items: start;
	justify-content: start;
}
#categoryLinks a::before {
	grid-column: 1;
	content: "";
	background-color: var(--blue);
}
#categoryLinks a span {
	font-family: "Noto Sans JP", sans-serif;
	color: #666;
	letter-spacing: 0.2em;
}
#categoryLinks a span:nth-of-type(1) {
	grid-column: 3;
}
#categoryLinks a span:nth-of-type(2) {
	grid-column: 5;
}
@media screen and (max-width: 750px) {
	#categoryLinks {
		margin-top: calc(193 var(--remBase));
	}
	#categoryLinks .title {
		padding-bottom: calc(31 var(--remBase));
		font-size: 2.6rem;
		border-bottom-width: 1px;
	}
	#categoryLinks ul {
		margin-top: calc((65 - 7) var(--remBase));
	}
	#categoryLinks li + li {
		margin-top: calc(40 var(--remBase));
	}
	#categoryLinks a {
		grid-template-columns: calc(13 var(--percentBase)) calc(
				24 var(--percentBase)
			) auto calc(26 var(--percentBase)) auto 1fr;
	}
	#categoryLinks a::before {
		height: calc(2 var(--remBase));
		margin-top: calc(19 var(--remBase));
	}
	#categoryLinks a span {
		font-size: 2.6rem;
		line-height: calc(40 / 26);
	}
}
@media print, screen and (min-width: 750.02px) {
	#categoryLinks {
		margin-top: calc(120 var(--remBase));
	}
	#categoryLinks .title {
		padding-bottom: calc(24 var(--remBase));
		font-size: 2.4rem;
		border-bottom-width: 1px;
	}
	#categoryLinks ul {
		margin-top: calc((44 - 2) var(--remBase));
	}
	#categoryLinks li + li {
		margin-top: calc(20 var(--remBase));
	}
	#categoryLinks a {
		grid-template-columns: calc(13 var(--percentBase)) calc(
				24 var(--percentBase)
			) auto calc(16 var(--percentBase)) auto 1fr;
	}
	#categoryLinks a::before {
		height: calc(2 var(--remBase));
		margin-top: calc(9 var(--remBase));
	}
	#categoryLinks a span {
		font-size: 1.6rem;
		line-height: 1.25;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#toTop {
	position: absolute;
	display: block;
}
#toTop img {
	width: 100%;
	height: auto;
}
@media print, screen and (min-width: 750.02px) {
	#toTop {
		top: calc(-56 var(--remBase));
	}
}
@media screen and (min-width: 750.02px) and (max-width: 1400px) {
	#toTop {
		right: calc(31 var(--viewportBase));
		width: calc(72 var(--viewportBase));
	}
}
@media screen and (min-width: 1400.02px) {
	#toTop {
		right: 31px;
		width: 72px;
	}
}
#footer {
	position: relative;
	z-index: 2;
}
#footer .logo {
	display: block;
}
#footer .logo span {
	display: block;
}
#footer .logo span:nth-of-type(1) {
	font-size: 0;
}
#footer .logo span:nth-of-type(2) {
	line-height: 1;
	color: var(--blue);
	letter-spacing: 0.1em;
}
#footer .sns a {
	color: #666;
	letter-spacing: 0.1em;
}
#footer .sns a::before {
	display: block;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#footer .instagram::before {
	background-image: url("../images/ui/icon/sns/instagram.svg");
}
#footer .shop::before {
	background-image: url("../images/ui/icon/cart.svg");
}
#footer .line::before {
	background-image: url("../images/ui/icon/sns/line02.svg");
}
#footer .links a {
	color: #444;
	letter-spacing: 0.1em;
}
#footer .links > li > ul > li > a {
	display: grid;
	align-items: start;
	justify-content: start;
}
#footer .links > li > ul > li > a::before {
	display: block;
	aspect-ratio: 1;
	font-size: 0;
	content: "";
	background-color: var(--blue);
}
#footer .links li li li a {
	display: grid;
	align-items: start;
	justify-content: start;
}
#footer .links li li li a::before {
	display: block;
	font-size: 0;
	content: "";
	background-color: var(--blue);
}
#footer .box02 :where(a, p) {
	font-family: "Noto Sans JP", sans-serif;
	color: #666;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
	#footer .box {
		padding-top: calc(60 var(--remBase));
		background-color: var(--bgBlue);
	}
	#footer .logo {
		width: fit-content;
		margin-inline: auto;
	}
	#footer .logo span:nth-of-type(1) {
		text-align: center;
	}
	#footer .logo span:nth-of-type(1) img {
		height: calc(182 var(--remBase));
	}
	#footer .logo span:nth-of-type(2) {
		margin-top: calc(28 var(--remBase));
		font-size: 3rem;
		text-align: center;
		text-indent: 0.1em;
	}
	#footer p {
		margin-top: calc(40 var(--remBase));
		font-size: 2.6rem;
		line-height: calc(40 / 26);
	}
	#footer .sns {
		display: grid;
		grid-template-rows: calc(151 var(--remBase));
		grid-template-columns: repeat(3, calc(214 var(--percentBase)));
		column-gap: calc(14 var(--percentBase));
		margin-top: calc(54 var(--remBase));
	}
	#footer .sns a {
		display: block;
		width: 100%;
		height: 100%;
		font-size: 2.4rem;
		text-align: center;
		text-indent: 0.1em;
		background-color: white;
	}
	#footer .sns a::before {
		margin-inline: auto;
	}
	#footer .instagram {
		padding-top: calc(32 var(--remBase));
	}
	#footer .instagram::before {
		width: calc(44 * 100% / 214);
		aspect-ratio: 1;
		margin-bottom: calc(23 var(--remBase));
	}
	#footer .shop {
		padding-top: calc(33 var(--remBase));
	}
	#footer .shop::before {
		width: calc(46 * 100% / 214);
		height: calc(42 var(--remBase));
		margin-bottom: calc(22 var(--remBase));
	}
	#footer .line {
		padding-top: calc(30 var(--remBase));
	}
	#footer .line::before {
		width: calc(50 * 100% / 214);
		height: calc(48 var(--remBase));
		margin-bottom: calc(21 var(--remBase));
	}
	#footer .links {
		margin-top: calc((69 - 27) var(--remBase));
	}
	#footer .links > li > ul > li > a {
		grid-template-columns: calc(10 var(--percentBase)) auto;
		column-gap: calc(21 var(--percentBase));
		font-size: 2.6rem;
		line-height: calc(80 / 26);
	}
	#footer .links > li > ul > li > a::before {
		margin-top: calc(35 var(--remBase));
	}
	#footer .links li li li a {
		grid-template-columns: calc(7 * 100% / 635) auto;
		column-gap: calc(18 * 100% / 635);
		margin-left: calc(35 var(--percentBase));
		font-size: 2.6rem;
		line-height: calc(80 / 26);
	}
	#footer .links li li li a::before {
		height: calc(4 var(--remBase));
		margin-top: calc(38 var(--remBase));
	}
	#footer .box02 {
		display: contents;
	}
	#footer .box02 ul {
		padding-top: calc((84 - 27 - 19) var(--remBase));
		padding-bottom: calc((87 - 19) var(--remBase));
		background-color: var(--bgBlue);
	}
	#footer .box02 a {
		font-size: 2.2rem;
		line-height: calc(60 / 22);
	}
	#footer .box02 p {
		height: calc(160 var(--remBase));
		padding-top: calc((64 - 15) var(--remBase));
		font-size: 2rem;
		line-height: 2.5;
		text-align: center;
		text-indent: 0.1em;
		background-color: white;
	}
}
@media print, screen and (min-width: 750.02px) {
	#footer {
		background: url("../images/footer/bg_pc.webp") center top / auto
			calc(612 var(--remBase)) no-repeat;
	}
	#footer .box {
		display: grid;
		grid-template-rows: auto calc(40 var(--remBase)) auto calc(
				40 var(--remBase)
			) auto;
		grid-template-columns: calc(182 var(--percentBase)) 1fr;
		column-gap: calc(82 var(--percentBase));
		align-content: start;
		align-items: start;
		justify-content: start;
		height: calc(612 var(--remBase));
		padding-top: calc(98 var(--remBase));
	}
	#footer .logo {
		grid-row: 1;
		grid-column: 1;
	}
	#footer .logo span:nth-of-type(1) img {
		width: 100%;
		height: auto;
	}
	#footer .logo span:nth-of-type(2) {
		margin-top: calc(40 var(--remBase));
		font-size: 1.6rem;
	}
	#footer p {
		grid-row: 3;
		grid-column: 1;
		font-size: 1.2rem;
		line-height: calc(20 / 12);
		white-space: nowrap;
	}
	#footer .sns {
		grid-row: 5;
		grid-column: 1;
	}
	#footer .sns li + li {
		margin-top: calc(18 var(--remBase));
	}
	#footer .sns a {
		display: grid;
		align-items: center;
		justify-content: start;
		font-size: 1.2rem;
	}
	#footer .instagram {
		grid-template-columns: calc(22 * 100% / 182) auto;
		column-gap: calc(17 * 100% / 182);
	}
	#footer .instagram::before {
		aspect-ratio: 1;
	}
	#footer .shop {
		grid-template-columns: calc(23 * 100% / 182) auto;
		column-gap: calc(16 * 100% / 182);
	}
	#footer .shop::before {
		height: calc(21 var(--remBase));
	}
	#footer .line {
		grid-template-columns: calc(25 * 100% / 182) auto;
		column-gap: calc(16 * 100% / 182);
	}
	#footer .line::before {
		height: calc(24 var(--remBase));
	}
	#footer .links {
		display: grid;
		grid-template-columns: calc(308 * 100% / 736) auto;
		grid-row: 1/6;
		grid-column: 2;
		align-items: start;
		justify-content: start;
		padding-top: calc((31 - 17) var(--remBase));
	}
	#footer .links > li > ul > li > a {
		grid-template-columns: calc(5 var(--remBase)) auto;
		column-gap: calc(19 var(--remBase));
		font-size: 1.6rem;
		line-height: calc(50 / 16);
	}
	#footer .links > li > ul > li > a::before {
		margin-top: calc(22.5 var(--remBase));
	}
	#footer .links ul ul {
		padding-bottom: calc((36 - 17 - 7) var(--remBase));
	}
	#footer .links li li li a {
		grid-template-columns: calc(7 var(--remBase)) auto;
		column-gap: calc(16 var(--remBase));
		margin-left: calc(41 var(--remBase));
		font-size: 1.6rem;
		line-height: calc(30 / 16);
	}
	#footer .links li li li a::before {
		height: calc(2 var(--remBase));
		margin-top: calc(14 var(--remBase));
	}
	#footer .box02 {
		display: grid;
		grid-template-columns: auto auto;
		align-items: start;
		justify-content: space-between;
		height: calc(84 var(--remBase));
		padding-top: calc((32 - 19) var(--remBase));
		background-color: white;
	}
	#footer .box02 ul {
		display: grid;
		grid-auto-flow: column;
		column-gap: calc(24 var(--remBase));
	}
	#footer .box02 :where(a, p) {
		font-size: 1.2rem;
		line-height: calc(50 / 12);
	}
}