@charset "UTF-8";

/*mv
----------------------------------------*/
.mv_img {
	width: 100%;
	height: 100vh;
}
.mv_img img,
.mv_img video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media only screen and (max-width: 768px) {
}

/*concept
----------------------------------------*/
.concept {
	padding-bottom: 11.8rem;
}
.concept_main {
	padding: 21.6rem 0 0;
	max-width: 136.6rem;
	margin: 0 auto;
}
.concept_main::before {
	content: '';
	display: block;
	width: 33.1rem;
	height: 32.5rem;
	background: url(../../img/index/logo_01.svg) no-repeat left top / 100% auto;
	position: absolute;
	left: 0;
	right: 2.7rem;
	top: 16.2rem;
	margin: 0 auto;
}
.concept_main figure {
	max-width: 34.7rem;
	position: absolute;
	top: 30rem;
	left: 0;
	right: 2.3rem;
	margin: 0 auto;
}
.concept_main p:first-child {
	z-index: 3;
}
.concept_main p + p {
	width: 69.3rem;
	position: absolute;
	right: -1rem;
	top: 43.5rem;
}
.concept_ttl {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10.5rem;
}
.concept_ttl h2 {
	width: 50%;
	padding-right: 9.4rem;
	text-align: right;
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: .1em;
	margin-top: 1.5rem;
}
.concept_ttl h3 {
	width: 50%;
	font-size: 3.8rem;
	letter-spacing: .15em;
	line-height: 1.6842;
	font-weight: 400;
}
.concept_ttl p {
	width: 50%;
	padding-right: 9.4rem;
	text-align: right;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.35;
	letter-spacing: .1em;
	margin-top: -.8rem;
}
.concept_txt {
	display: flex;
}
.concept_txt > p {
	width: 50%;
}
.concept_txt p:first-child img {
	width: 40.2rem;
	margin: 2.8rem 9.4rem 0 auto;
}
.concept_txt_box {
	font-size: 1.5rem;
	line-height: 2.0667;
	letter-spacing: .15em;
	margin-top: .5rem;
}
.concept_txt_box p + p {
	margin-top: 2rem;
}
.concept_txt_box p + p:nth-child(3) {
	margin-top: 1.5rem;
}
.concept_txt_box h4 {
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: .15em;
	margin: 3.4rem 0 1rem;
}
.concept_img_01 {
	position: absolute;
	right: calc(50% + 9.4rem);
	bottom: -28.9rem;
	width: 37rem;
	z-index: 1100;
}
@media only screen and (max-width: 768px) {
	.concept {
		padding-bottom: 35.7rem;
	}
	.concept_main {
		padding: 6.8rem 0 0;
	}
	.concept_main::before {
		width: 13rem;
		height: 12.7rem;
		right: 8rem;
		top: 3.7rem;
	}
	.concept_main figure {
		max-width: 14.55rem;
		top: 8.1rem;
		right: 1.4rem;
	}
	.concept_main p:first-child {
		z-index: 0;
	}
	.concept_main p + p {
		display: none;
	}
	.concept_ttl {
		display: block;
		margin: 3.7rem 3rem 0;
	}
	.concept_ttl h2 {
		width: auto;
		padding-right: 0;
		text-align: left;
		margin: 0 0 1.5rem;
	}
	.concept_ttl h3 {
		width: auto;
		font-size: 2.8rem;
		letter-spacing: .1em;
		line-height: 1.61;
		margin-right: -1rem;
	}
	.concept_ttl p {
		width: auto;
		padding-right: 0;
		text-align: left;
		margin: 1.4rem 0 0 -.2rem;
	}
	.concept_txt {
		display: block;
		margin: 2.5rem 3rem 0;
	}
	.concept_txt > p {
		width: auto;
	}
	.concept_txt > p:first-child {
		display: none;
	}
	.concept_txt_box {
		font-size: 1.3rem;
	}
	.concept_txt_box p + p {
		margin-top: 1rem;
	}
	.concept_txt_box p + p:nth-child(3) {
		margin-top: 1rem;
	}
	.concept_txt_box h4 {
		margin: 1.3rem 0 1.2rem;
		letter-spacing: .1em;
	}
	.concept_img_01 {
		right: 3rem;
		bottom: -12.2rem;
		width: 33rem;
	}
	.concept_img_01 img {
		width: 100%;
		height: 40.6rem;
		object-fit: cover;
	}
}

/*brand
----------------------------------------*/
.brand_main img {
	width: 100%;
	min-height: 81.5rem;
	max-height: 100dvh;
	object-fit: cover;
}
.brand_main_bg {
	overflow: hidden;
	background: #151515;
}
.brand_main_bg figure {
	width: 100%;
	float: left;
}
.brand_main h2 {
	color: #fff;
	font-weight: 400;
	font-size: 11.8rem;
	letter-spacing: .05em;
	position: static;
	z-index: 1200;
}
.brand_main h2 span:nth-child(1) {
	transform: rotate(-90deg);
	position: absolute;
	left: calc(50% - 31.1rem);
	bottom: 23.6rem;
	z-index: 1200;
}
.brand_main h2 span:nth-child(2) {
	position: absolute;
	left: calc(50% - 22.3rem);
	bottom: 7rem;
	z-index: 1200;
}
.brand_main p {
	font-size: 1.5rem;
	line-height: 2.0667;
	letter-spacing: .15em;
	color: #fff;
	position: absolute;
	left: calc(50% - 1.8rem);
	bottom: 23.6rem;
	z-index: 1200;
}
.brand_hugh,
.brand_shiroe {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
}
/*.brand_hugh_bg::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .25);
}
.brand_vanilla_bg::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .25);
	backdrop-filter: blur(1rem);
}*/
.brand_hugh_bg img,
.brand_hugh_bg video,
.brand_shiroe_bg img,
.brand_shiroe_bg video,
.brand_vanilla_bg img,
.brand_vanilla_bg video {
	height: 100dvh;
	width: 100%;
	object-fit: cover;
}
.brand_hugh_inner,
.brand_shiroe_inner,
.brand_vanilla_inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 110.8rem;
	margin: auto;
	display: flex;
	align-items: center;
}
.brand_hugh h3 {
	font-size: 9.2rem;
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #fff;
	margin: 0 -17.8rem 1.9rem 0;
	z-index: 2;
}
.brand_shiroe h3 {
	font-size: 8rem;
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	line-height: 1.19;
	margin: 2.4rem 5.3rem 0 0;
	z-index: 2;
}
.brand_shiroe h3 span {
	display: block;
	font-size: 1.7rem;
	letter-spacing: .05em;
	padding-right: .3rem;
	text-align: right;
}
.brand_vanilla h3 {
	font-size: 8rem;
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #fff;
	line-height: 1;
	margin: 6.5rem -23.1rem 0 0;
	z-index: 2;
}
.brand_vanilla h3 span {
	display: block;
	font-size: 1.7rem;
	letter-spacing: .05em;
	margin: 1.3rem 0 0 .2rem;
}
.brand_hugh_img,
.brand_shiroe_img,
.brand_vanilla_img {
	width: 33.9rem;
}
.brand_hugh_txt,
.brand_shiroe_txt,
.brand_vanilla_txt {
	width: 28.5rem;
	min-height: 45.9rem;
	margin-left: 9.6rem;
	color: #fff;
	top: 19.7rem;
}
.brand_shiroe_txt {
	color: inherit;
}
.brand_hugh_txt h4,
.brand_shiroe_txt h4,
.brand_vanilla_txt h4 {
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: .15em;
	margin-bottom: 1rem;
}
.brand_hugh_txt h4 span,
.brand_shiroe_txt h4 span,
.brand_vanilla_txt h4 span {
	display: block;
	font-size: 2rem;
	letter-spacing: .15em;
	line-height: 1.7;
	margin-top: 1.1rem;
}
.brand_shiroe_txt h4 span,
.brand_vanilla_txt h4 span {
	display: block;
	font-size: 2rem;
	letter-spacing: .15em;
	line-height: 1.7;
	margin-top: 1.1rem;
}
.brand_hugh_txt p,
.brand_shiroe_txt p,
.brand_vanilla_txt p {
	font-size: 1.3rem;
	letter-spacing: .1em;
	line-height: 1.9231;
	margin: 0 -.2rem 1.5rem 0;
}
.brand_store {
	display: block;
	width: fit-content;
	font-size: 1.3rem;
	letter-spacing: .1em;
	padding-left: 2.5rem;
	margin-top: 2.6rem;
}
.brand_store::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 1.4rem;
	background: url(../../img/common/icon_store.svg) no-repeat left top / 100% auto;
	position: absolute;
	top: .4rem;
	left: 0;
	filter: brightness(0) invert(1);
}
.brand_shiroe_txt .brand_store {
	color: #A99D5D;
}
.brand_shiroe_txt .brand_store::before {
	filter: none;
}
@media only screen and (max-width: 768px) {
	.brand_main img {
		min-height: 63rem;
	}
	.brand_main h2 {
		font-size: 7rem;
	}
	.brand_main h2 span:nth-child(1) {
		left: 2.4rem;
		bottom: 18.2rem;
	}
	.brand_main h2 span:nth-child(2) {
		left: 6.6rem;
		bottom: 8.4rem;
	}
	.brand_main p {
		font-size: 1.3rem;
		letter-spacing: .1em;
		line-height: 2.0769;
		left: 12.8rem;
		bottom: 17.5rem;
	}
	.brand_hugh,
	.brand_shiroe {
		position: static;
	}
	.brand_hugh_bg,
	.brand_shiroe_bg,
	.brand_vanilla_bg {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
	}
	.brand_hugh_inner,
	.brand_shiroe_inner,
	.brand_vanilla_inner {
		position: relative;
		top: auto;
		left: auto;
		display: block;
		margin-top: calc(-100dvh);
		padding: 20.8rem 0 8rem;
	}
	.brand_shiroe_inner {
		padding: 26.4rem 0 8.9rem;
	}
	.brand_vanilla_inner {
		padding: 24.2rem 0 11.2rem;
	}
	.brand_hugh h3 {
		font-size: 7rem;
		line-height: 1.0286;
		margin: 0 0 1.9rem 3rem;
	}
	.brand_shiroe h3 {
		font-size: 7rem;
		line-height: 1.0286;
		margin: 0 0 1.9rem 3rem;
	}
	.brand_shiroe h3 span {
		padding: .3rem 0 0 .3rem;
		text-align: left;
	}
	.brand_vanilla h3 {
		font-size: 4.3rem;
		line-height: 1.1628;
		margin: 0 0 1.9rem 3rem;
	}
	.brand_vanilla h3 span {
		margin: .4rem 0 0 .3rem;
	}
	.brand_hugh_img,
	.brand_shiroe_img,
	.brand_vanilla_img {
		width: 29rem;
		position: absolute;
		top: 10rem;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.brand_shiroe_img::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, .42);
	}
	.brand_vanilla_img::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2);
	}
	.brand_hugh_txt,
	.brand_shiroe_txt,
	.brand_vanilla_txt {
		width: auto;
		min-height: 0;
		margin: 15.5rem 5rem 0;
		top: auto;
	}
	.brand_shiroe_txt {
		margin-top: 15rem;
	}
	.brand_hugh_txt h4,
	.brand_shiroe_txt h4,
	.brand_vanilla_txt h4 {
		margin-bottom: .7rem;
	}
	.brand_hugh_txt h4 span,
	.brand_shiroe_txt h4 span,
	.brand_vanilla_txt h4 span {
		margin-top: .7rem;
	}
	.brand_shiroe_txt h4 span,
	.brand_vanilla_txt h4 span {
		margin-top: .4rem;
	}
	.brand_hugh_txt p,
	.brand_shiroe_txt p,
	.brand_vanilla_txt p {
		line-height: 1.7692;
		margin: 0 -.2rem 2.3rem 0;
	}
	.brand_store {
		border: .1rem solid #fff;
		width: auto;
		font-size: 1.8rem;
		text-align: center;
		padding: 1.5rem;
		margin-top: 1.6rem;
		font-family: "EB Garamond", serif;
	}
	.brand_store::before {
		top: 0;
		bottom: 0;
		left: 2.1rem;
		margin: auto 0;
	}
	.brand_shiroe_txt .btn_more {
		border-color: #151515;
		color: #151515;
	}
	.brand_shiroe_txt .btn_more::before,
	.brand_shiroe_txt .btn_more::after {
		background: #151515;
	}
	.brand_shiroe_txt .brand_store {
		color: #151515;
		border-color: #151515;
	}
	.brand_shiroe_txt .brand_store::before {
		filter: brightness(0);
	}
}

/*journal
----------------------------------------*/
.journal {
	display: flex;
	gap: 8.6rem;
	padding: 16.1rem 0 0;
}
.journal::before {
	content: '';
	display: block;
	width: 79.6rem;
	height: 35.3rem;
	background: url(../../img/index/journal_bg_01.png) no-repeat left top / 100% auto;
	position: absolute;
	right: calc(50% + 10.2rem);
	bottom: -15rem;
}
.journal h2 {
	flex: 1;
	text-align: right;
	font-size: 1.5rem;
	letter-spacing: .15em;
	font-weight: 400;
	margin-top: -.3rem;
}
.journal_list {
	width: calc(50% + 18.5rem);
}
.journal_list ul {
	margin-bottom: 3.8rem;
}
.journal_list li {
	border-bottom: .1rem solid rgba(21, 21, 21, .5);
	margin-bottom: 1.65rem;
	padding-bottom: 1.65rem;
}
.journal_list a {
	display: flex;
	align-items: center;
	gap: 6.1rem;
}
.journal_list a figure {
	width: 15rem;
}
.journal_list a figure img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.journal_txt {
	flex: 1;
	padding-bottom: .7rem;
}
.journal_txt time {
	font-size: 1.5rem;
	letter-spacing: .1em;
}
.journal_category {
	font-size: 1.3rem;
	letter-spacing: .1em;
	color: #A99D5D;
	margin: .5rem 0 .9rem;
}
.journal h3 {
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: .1em;
	text-decoration: underline;
	text-underline-offset: .2rem;
}
@media only screen and (max-width: 768px) {
	.journal {
		display: block;
		padding: 7rem 0 0 2rem;
	}
	.journal::before {
		width: 39rem;
		height: 20.7rem;
		right: 0;
		bottom: -12.5rem;
		background-image: url(../../img/index/journal_bg_01-sp.png);
	}
	.journal h2 {
		text-align: left;
		margin-left: .3rem;
	}
	.journal_list {
		width: auto;
		margin-top: 4.5rem;
	}
	.journal_list li {
		margin-bottom: 2.6rem;
		padding-bottom: 2.6rem;
	}
	.journal_list a {
		gap: 2.9rem;
	}
	.journal_list a figure {
		width: 12.5rem;
	}
	.journal_txt {
		padding: .8rem 2rem 0 0;
		margin-bottom: -.4rem;
	}
	.journal_category {
		margin: .4rem 0 .2rem;
	}
	.journal h3 {
		line-height: 1.8462;
	}
	.journal .btn_more {
		margin-left: 1rem;
	}
}

/*shop
----------------------------------------*/
.shop {
	max-width: calc(50% + 54.6rem);
	margin: 7.2rem 0 0 auto;
	padding: 2.4rem 0 13.2rem;
}
.shop h2 {
	font-weight: 400;
	color: #A99D5D;
	font-size: 1.3rem;
	letter-spacing: .15em;
	padding-bottom: 3rem;
	border-bottom: .1rem solid rgba(21, 21, 21, .2);
	margin-bottom: 5.5rem;
}
.shop h2 span {
	display: block;
	font-size: 6rem;
	letter-spacing: .05em;
	line-height: 1;
	margin-bottom: 1rem;
}
.shop_img {
	max-width: calc(100% - 80.6rem);
	position: absolute;
	top: 0;
	right: 0;
}
.shop_box {
	display: grid;
	grid-template-columns: 22.3rem auto;
	gap: 3.2rem 0;
}
.shop_box dt {
	font-size: 1.8rem;
	line-height: 1.3889;
	font-weight: 400;
	color: #A99D5D;
	letter-spacing: .1em;
}
.shop_box dt span {
	display: block;
	font-size: 1.3rem;
	letter-spacing: .1em;
	margin-top: .5rem;
}
.shop_box dd {
	margin-top: -.3rem;
}
.shop_box dt:nth-of-type(2),
.shop_box dd:nth-of-type(2) {
	padding-bottom: 1rem;
}
.shop_box h3 {
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: .15em;
	line-height: 2;
	margin: 1.4rem 0 .4rem;
}
.shop_box h3:first-child {
	margin-top: 0;
}
.shop_box dd p {
	font-size: 1.3rem;
	line-height: 1.6923;
	letter-spacing: .1em;
}
.shop_map {
	display: inline-block;
	font-size: 1.4rem;
	letter-spacing: .1em;
	margin-left: 2.4rem;
	padding-left: 2rem;
	border-bottom: .1rem solid rgba(21, 21, 21, .5);
	vertical-align: .3rem;
}
.shop_map::before {
	content: '';
	display: block;
	width: 1rem;
	height: 1.3rem;
	background: url(../../img/common/icon_map.svg) no-repeat left top / 100% auto;
	position: absolute;
	left: 0;
	top: .8rem;
}
.shop_store {
	display: block;
	width: fit-content;
	font-size: 1.3rem;
	letter-spacing: .1em;
	color: #A99D5D;
	border-bottom: .1rem solid rgba(169, 157, 93, .5);
	padding: 0 0 .5rem 2.6rem;
	margin-top: 1.4rem;
}
.shop_store:first-child {
	margin-top: .2rem;
}
.shop_store::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 1.4rem;
	background: url(../../img/common/icon_store.svg) no-repeat left top / 100% auto;
	position: absolute;
	top: .4rem;
	left: .1rem;
}
@media only screen and (max-width: 768px) {
	.shop {
		max-width: none;
		margin: 3.6rem 0 0 auto;
		padding: 2.4rem 0 4.2rem;
	}
	.shop h2 {
		border-bottom: .1rem solid rgba(169, 157, 93, .5);
		margin-bottom: 4rem;
		padding: 0 0 2rem 3rem;
	}
	.shop h2 span {
		font-size: 4rem;
		margin-bottom: .1rem;
	}
	.shop_img {
		max-width: 33rem;
		position: relative;
		top: auto;
		right: auto;
		margin: 0 auto;
	}
	.shop_box {
		display: block;
		margin: 4.5rem 3rem 0;
	}
	.shop_box dt {
		font-size: 2rem;
		margin-bottom: 1.2rem;
		padding-bottom: 0 !important;
	}
	.shop_box dt span {
		margin-top: -.2rem;
	}
	.shop_box dd {
		margin-bottom: 4.8rem;
		padding-bottom: 0 !important;
	}
	.shop_box h3 {
		margin: 2.2rem 0 .5rem;
	}
	.shop_box h3:first-child {
		margin-top: 0;
	}
	.shop_map {
		display: block;
		width: fit-content;
		margin: 1.2rem 0 0;
		padding-bottom: .3rem;
	}
	.shop_map::before {
		left: .2rem;
	}
	.shop_store {
		width: auto;
		padding: 0 0 1.6rem 2.6rem;
		margin-top: 2.6rem;
	}
	.shop_store:first-child {
		margin-top: 3rem;
	}
}