/* ----------------------------------------------------
	gl
---------------------------------------------------- */
.gl {
	font-family: var(--gothic);
}

.gl-bg {
	background-image: url(../img/bg-body.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

@media screen and (max-width: 768px) {
	.gl-bg {
		background-image: url(../img/bg-body_sp.webp);
	}
}

/* ----------------------------------------------------
	nav
---------------------------------------------------- */
.nav {
	background-color: rgba(210, 98, 120, 1);
	margin-bottom: min(6rem, 4.392vw);
}

.nav__list {
	margin: 0 auto;
	width: min(92rem, 67.35vw);
	height: min(8.5rem, 6.223vw);
	color: rgb(var(--wht));
	font-family: var(--base);
	font-size: min(2.4rem, 1.757vw);
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav__list--item {
	width: 50%;
	height: min(5.6rem, 4.1vw);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: solid 1px rgb(var(--wht));
	position: relative;
}

.nav__list--item:first-child {
	border-left: solid 1px rgb(var(--wht));
}

.nav__list--item a {
	background-image: url(../img/arrow-nav.svg);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: min(3.4rem, 2.489vw) auto;
	padding-right: min(4.5rem, 3.294vw);
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.nav__list--item a svg {
	margin-right: min(1.5rem, 1.098vw);
	width: min(2.5rem, 1.83vw);
	height: auto;
}

.nav__list--item a svg .icon-gl-path {
	fill: rgb(var(--wht));
}

@media screen and (max-width: 768px) {
	.nav {
		display: none;
	}
}

/* ----------------------------------------------------
	main
---------------------------------------------------- */
.main {
	position: relative;
}

.main::before,
.main::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 1;
	content: "";
}

.main::before {
	background-image: url(../img/gl-main-obj01.webp);
	width: min(24.4rem, 17.862vw);
	height: min(18.7rem, 13.69vw);
	top: min(11.1rem, 8.126vw);
	left: 0;
}

.main::after {
	background-image: url(../img/gl-main-obj02.webp);
	width: min(21rem, 15.373vw);
	height: min(16.1rem, 11.786vw);
	top: min(33.4rem, 24.451vw);
	right: 0;
}

@media screen and (max-width: 768px) {
	.main::before {
		background-image: url(../img/gl-main-obj01_sp.webp);
		width: 28.267vw;
		height: 22.4vw;
		top: 0;
	}

	.main::after {
		background-image: url(../img/gl-main-obj02_sp.webp);
		width: 28vw;
		height: 26.133vw;
		top: 80.533vw;
	}
}

/* ----------------------------------------------------
	gl-lead
---------------------------------------------------- */
.gl-lead {
	margin-bottom: min(5rem, 3.66vw);
	font-size: min(2.4rem, 1.757vw);
	font-weight: 400;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.gl-lead {
		margin-bottom: 15.467vw;
		padding-top: 19.2vw;
		font-size: 5.333vw;
	}
}

/* ----------------------------------------------------
	gl-color
---------------------------------------------------- */
.gl-color__title {
	margin: 0 auto min(2.6rem, 1.903vw);
	width: min(53.6rem, 39.239vw);
}

.gl-color .note {
	margin-bottom: min(3.8rem, 2.782vw);
	text-align: center;
}

.gl-color__content {
	margin: 0 auto min(3rem, 2.196vw);
	padding-bottom: min(4.4rem, 3.221vw);
	width: min(114rem, 83.455vw);
	border-bottom: solid 1px rgba(170, 146, 96, 1);
	display: flex;
	justify-content: space-between;
}

.gl-color__detail {
	width: min(54.6rem, 39.971vw);
}

.gl-color__detail--title {
	margin-bottom: min(1rem, 0.732vw);
}

.gl-color__list {
	display: flex;
	justify-content: space-around;
}

.gl-color__list--item {
	text-align: center;
}

.gl-color__list--item svg {
	width: min(8.2rem, 6.003vw);
}

.gl-color__list--item.pnk svg {
	fill: rgba(210, 98, 120, 1);
}

.gl-color__list--item.pur svg {
	fill: rgba(193, 152, 178, 1);
}

.gl-color__list--item.gre svg {
	fill: rgba(179, 213, 122, 1);
}

.gl-color__list--item.blu svg {
	fill: rgba(0, 76, 161, 1);
}

.gl-color__list--item.orn svg {
	fill: rgba(241, 143, 96, 1);
}

.gl-color__name {
	font-size: min(2rem, 1.464vw);
	font-weight: 400;
}

.gl-color__name .en {
	font-size: min(1.6rem, 1.171vw);
	display: block;
}

@media screen and (max-width: 768px) {
	.gl-color__title {
		margin-bottom: 6.4vw;
		width: 96.267vw;
	}

	.gl-color .note {
		margin-bottom: 6.4vw;
	}

	.gl-color__content {
		margin-bottom: 0;
		padding-bottom: 12.8vw;
		width: 100%;
		border: none;
		display: block;
	}

	.gl-color__detail {
		width: 100%;
	}

	.gl-color__detail--title {
		margin-bottom: 6.4vw;
	}

	.gl-color__detail:not(:last-of-type) {
		margin-bottom: 11.2vw;
	}

	.gl-color__list--item svg {
		width: 21.867vw;
	}

	.gl-color__name {
		font-size: 4.267vw;
	}

	.gl-color__name .en {
		font-size: 3.2vw;
	}
}

/* ----------------------------------------------------
	bgFixed
---------------------------------------------------- */
.bgFixed {
	position: relative;
}

.bgFixed .bg {
	width: 100%;
	height: min(78rem, 57.101vw);
	position: absolute;
	z-index: 0;
}

.bgFixed .bgObj1,
.bgFixed .bgObj2 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: min(22rem, 16.105vw);
	height: min(18.7rem, 13.69vw);
	position: absolute;
	z-index: -1;
	transition: all 0.3s ease;
}

.bgFixed .bgObj1 {
	background-image: url(../img/gl-bgFixed01.webp);
	top: min(12.2rem, 8.931vw);
	left: 0;
}

.bgFixed .bgObj2 {
	background-image: url(../img/gl-bgFixed02.webp);
	bottom: 0;
	right: 0;
}

@media screen and (max-width: 768px) {
	.bgFixed .bg {
		width: 100%;
		height: calc(100vh - 15.467vw);
		position: absolute;
		z-index: 0;
	}

	.bgFixed .bgObj1,
	.bgFixed .bgObj2 {
		width: 28.267vw;
		height: 26.667vw;
		position: absolute;
		z-index: -1;
		transition: all 0.3s ease;
	}

	.bgFixed .bgObj1 {
		background-image: url(../img/gl-bgFixed01_sp.webp);
		top: 15.467vw;
	}

	.bgFixed .bgObj2 {
		background-image: url(../img/gl-bgFixed02_sp.webp);
	}
}

/* ----------------------------------------------------
	gl__content
---------------------------------------------------- */
.gl__content {
	margin: 0 auto;
	padding-bottom: min(13rem, 9.517vw);
	width: min(114rem, 83.455vw);
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 768px) {
	.gl__content {
		padding-bottom: min(13rem, 9.517vw);
		width: 100%;
	}
}

/* ----------------------------------------------------
	gl-about
---------------------------------------------------- */
.gl-about {
	margin-bottom: min(9rem, 6.589vw);
}

.gl-about__content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.gl-about__content--image {
	width: min(35.8rem, 26.208vw);
}

.gl-about__content--detail {
	width: min(72.9rem, 53.367vw);
}

.gl-about__title {
	margin-bottom: min(2rem, 1.464vw);
	line-height: normal;
	color: rgba(170, 146, 96, 1);
	font-family: var(--base);
	font-size: min(3.2rem, 2.343vw);
	font-weight: 600;
}

.gl-about__text {
	font-size: min(1.8rem, 1.318vw);
	font-weight: 400;
}

.gl-about .ingredients {
	background-image: url(../img/bg-ingredients.webp);
	background-position: center;
	background-repeat: repeat-y;
	background-size: 100% auto;
	margin-top: min(4rem, 2.928vw);
	width: 100%;
	color: rgb(var(--wht));
}

.gl-about .ingredients::before,
.gl-about .ingredients::after {
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 100%;
	height: min(5rem, 3.66vw);
	display: block;
	content: "";
}

.gl-about .ingredients::before {
	background-image: url(../img/bg-ingredients-top.webp);
	background-position: center top;
}

.gl-about .ingredients::after {
	background-image: url(../img/bg-ingredients-bottom.webp);
	background-position: center bottom;
}

.gl-about .ingredients__title {
	margin-bottom: min(2rem, 1.464vw);
	line-height: normal;
	font-family: var(--base);
	font-size: min(3.2rem, 2.343vw);
	font-weight: 600;
	text-align: center;
}

.gl-about .ingredients__list {
	margin: 0 auto min(3rem, 2.196vw);
	width: min(81rem, 59.297vw);
	line-height: 1.5;
	text-align: left;
	display: grid;
	grid-template-columns: 50% 50%;
}

.gl-about .ingredients__list--item {
	font-size: min(2.6rem, 1.903vw);
	font-weight: 400;
	display: flex;
	align-items: center;
}

.gl-about .ingredients__list--item:nth-child(1) {
	grid-column: 1/2;
	grid-row: 1/2;
}

.gl-about .ingredients__list--item:nth-child(2) {
	grid-column: 1/2;
	grid-row: 2/3;
}

.gl-about .ingredients__list--item:nth-child(3) {
	grid-column: 1/2;
	grid-row: 3/4;
}

.gl-about .ingredients__list--item:nth-child(4) {
	grid-column: 2/3;
	grid-row: 1/2;
}

.gl-about .ingredients__list--item:nth-child(5) {
	grid-column: 2/3;
	grid-row: 2/3;
}

.gl-about .ingredients__list--item:nth-child(5) {
	grid-column: 2/3;
	grid-row: 3/4;
}

.gl-about .ingredients__list--item svg {
	margin-right: min(0.7rem, 0.512vw);
	width: min(2.5rem, 1.83vw);
	fill: rgb(var(--wht));
}

.gl-about .note {
	margin: 0 auto;
	width: min(76rem, 55.637vw);
}

@media screen and (max-width: 768px) {
	.gl-about {
		margin: 0 auto 8.8vw;
		padding-top: 6.667vw;
		width: 92.267vw;
		border-top: solid 1px rgba(170, 146, 96, 1);
	}

	.gl-about__content {
		display: block;
	}

	.gl-about__content--image,
	.gl-about__content--detail {
		width: 100%;
	}

	.gl-about__content--image {
		margin-bottom: 8vw;
	}

	.gl-about__title {
		margin-bottom: 8vw;
		font-size: 8.533vw;
		text-align: center;
	}

	.gl-about__text {
		font-size: 4.267vw;
	}

	.gl-about .ingredients {
		background-image: url(../img/bg-ingredients_sp.webp);
		background-size: 99.9% auto;
		margin-top: 5.6vw;
	}

	.gl-about .ingredients::before,
	.gl-about .ingredients::after {
		height: 12.8vw;
	}

	.gl-about .ingredients::before {
		background-image: url(../img/bg-ingredients-top_sp.webp);
	}

	.gl-about .ingredients::after {
		background-image: url(../img/bg-ingredients-bottom_sp.webp);
	}

	.gl-about .ingredients__title {
		margin: 5.333vw 0;
		font-size: 8.533vw;
	}

	.gl-about .ingredients__list {
		margin: 0 auto 8vw;
		width: 74.667vw;
		display: block;
	}

	.gl-about .ingredients__list--item {
		font-size: 4.8vw;
	}

	.gl-about .ingredients__list--item:not(:last-of-type) {
		margin-bottom: 2.667vw;
	}

	.gl-about .ingredients__list--item svg {
		margin-right: 1.6vw;
		width: 6.667vw;
	}

	.gl-about .note {
		margin-bottom: 5.333vw;
		width: 74.667vw;
	}
}

/* ----------------------------------------------------
	gl-menu
---------------------------------------------------- */
.gl-menu {
	position: relative;
}

.gl-menu__title {
	width: min(53.6rem, 39.239vw);
	position: absolute;
	top: max(-4.3rem, -3.148vw);
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
}

.gl-menu__content {
	background-color: rgba(var(--wht), 0.75);
	margin-bottom: min(9rem, 6.589vw);
	padding: min(1.1rem, 0.805vw);
	border: solid 1px rgba(170, 146, 96, 1);
}

.gl-menu__inner {
	padding: min(10rem, 7.321vw) 0;
	border: solid 1px rgba(170, 146, 96, 1);
	position: relative;
}

.gl-menu__inner::before,
.gl-menu__inner::after {
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: calc(100% + 2px);
	height: min(4rem, 2.928vw);
	position: absolute;
	left: -1px;
	content: "";
}

.gl-menu__inner::before {
	background-image: url(../img/gl-menu-bg-top.svg);
	background-position: center top;
	top: -1px;
}

.gl-menu__inner::after {
	background-image: url(../img/gl-menu-bg-bottom.svg);
	background-position: center bottom;
	bottom: -1px;
}

.gl-menu__date {
	margin-bottom: min(3.5rem, 2.562vw);
	font-family: var(--base);
	font-size: min(3.2rem, 2.343vw);
	font-weight: 500;
	text-align: center;
}

.gl-menu__date--inner {
	width: min(46rem, 33.675vw);
	color: rgba(210, 98, 120, 1);
	display: inline-block;
	position: relative;
}

.gl-menu__date--inner::before,
.gl-menu__date--inner::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	content: "◆";
}

.gl-menu__date--inner::before {
	left: 0;
}

.gl-menu__date--inner::after {
	right: 0;
}

.gl-menu__content--title {
	margin-bottom: min(1.5rem, 1.098vw);
	line-height: normal;
	font-family: var(--base);
	font-size: min(3.2rem, 2.343vw);
	font-weight: 600;
	text-align: center;
}

.gl-menu__content--title small {
	color: rgba(170, 146, 96, 1);
	font-size: min(2rem, 1.464vw);
	display: block;
}

.gl-menu__list {
	margin: 0 auto min(10rem, 7.321vw);
	padding-top: min(4rem, 2.928vw);
	border-top: solid 1px rgba(170, 146, 96, 1);
}

.gl-menu__list .gl-menu__list--item {
	margin-bottom: min(10rem, 7.321vw);
	font-family: var(--base);
	display: flex;
	justify-content: center;
	align-items: center;
}

.gl-menu__list .gl-menu__list--item.rev {
	flex-direction: row-reverse;
}

.gl-menu__list .gl-menu__image {
	width: min(44.5rem, 32.577vw);
}

.gl-menu__list--content {
	margin-right: min(2.4rem, 1.757vw);
	width: min(39.8rem, 29.136vw);
}

.rev .gl-menu__list--content {
	margin-right: 0;
	margin-left: min(2.4rem, 1.757vw);
}

.gl-menu__list--title {
	line-height: normal;
	font-size: min(2.4rem, 1.757vw);
	font-weight: 600;
}

.gl-menu__list--title .en {
	color: rgba(170, 146, 96, 1);
	font-size: min(2rem, 1.464vw);
	display: block;
}

.gl-menu .link-button {
	background-color: rgba(210, 98, 120, 1);
	background-image: url(../img/arrow01.svg);
	background-position: center right min(1.7rem, 1.245vw);
	background-repeat: no-repeat;
	background-size: min(6rem, 4.392vw) auto;
	margin: 0 auto;
	width: min(39.8rem, 29.136vw);
	height: min(8.5rem, 6.223vw);
	border-radius: min(8.5rem, 6.223vw);
	position: relative;
	z-index: 2;
}

.gl-menu__list--content .link-button {
	margin-top: min(5rem, 3.66vw);
}

/* column */
.gl-menu__list.column {
	margin-bottom: min(6rem, 4.392vw);
	display: flex;
	justify-content: center;
}

.gl-menu__list.column .gl-menu__list--item {
	margin: 0 min(1.5rem, 1.098vw);
	width: min(44.5rem, 32.577vw);
	display: block;
}

.gl-menu__list.column .gl-menu__image {
	margin-bottom: min(2rem, 1.464vw);
	width: 100%;
}

.gl-menu__list.column+.link-area {
	margin-bottom: min(10rem, 7.321vw);
}

@media screen and (max-width: 768px) {
	.gl-menu__title {
		margin: 0 auto 8vw;
		width: 84vw;
		position: static;
		transform: translateX(0);
	}

	.gl-menu__content {
		margin: 0 auto 16vw;
		padding: 2.933vw;
		width: 92vw;
	}

	.gl-menu__inner {
		padding: 18.667vw 0;
	}

	.gl-menu__inner::before,
	.gl-menu__inner::after {
		height: 10.667vw;
	}

	.gl-menu__inner::before {
		background-image: url(../img/gl-menu-bg-top_sp.svg);
	}

	.gl-menu__inner::after {
		background-image: url(../img/gl-menu-bg-bottom_sp.svg);
	}

	.gl-menu__date {
		margin-bottom: 6.4vw;
		font-size: 5.333vw;
	}

	.gl-menu__date--inner {
		width: 76.267vw;
	}

	.gl-menu__content--title {
		margin-bottom: 4.8vw;
		font-size: 5.867vw;
	}

	.gl-menu__content--title small {
		font-size: 4vw;
	}

	.gl-menu__list {
		margin-bottom: 13.333vw;
		padding-top: 8.533vw;
	}

	.gl-menu__list .gl-menu__list--item {
		margin-bottom: 13.333vw;
		flex-direction: column-reverse;
	}

	.gl-menu__list .gl-menu__list--item.rev {
		flex-direction: column-reverse;
	}

	.gl-menu__list .gl-menu__image {
		margin-bottom: 3.733vw;
		width: 76.267vw;
	}

	.gl-menu__list--content {
		margin-right: 0;
		width: 76.267vw;
	}

	.rev .gl-menu__list--content {
		margin-left: 0;
	}

	.gl-menu__list--title {
		margin-bottom: 6.933vw;
		font-size: 4.267vw;
		left: -0.005em;
	}

	.gl-menu__list--title .en {
		font-size: 3.733vw;
	}

	.gl-menu .link-button {
		background-position: center right 3.733vw;
		background-size: 11.467vw auto;
		width: 100%;
		height: 17vw;
		border-radius: 17vw;
	}

	.gl-menu__list--content .link-button {
		margin-top: 6.4vw;
	}

	/* column */
	.gl-menu__list.column {
		margin: 0 auto 6.4vw;
		display: block;
	}

	.gl-menu__list.column .gl-menu__list--item {
		margin: 0 auto;
		width: 76.267vw;
		display: block;
	}

	.gl-menu__list.column .gl-menu__image {
		margin-bottom: 3.733vw;
		width: 100%;
	}

	.gl-menu__list.column+.link-area {
		margin: 0 auto 13.333vw;
		width: 76.267vw;
	}
}