@charset "UTF-8";

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	position: relative;
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: normal;
	color: #11100A;
}

a {
	color: #11100A;
}

h2.sec-title {
	text-align: center;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: .1em;
	margin-block-end: 2em;
}
h2.sec-title .subtitle {
	display: block;
	font-family: 'brandon-grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(2.25rem, 0.821rem + 2.86vw, 4.25rem);
	letter-spacing: .285em;
}

@media screen and (max-width:1200px) {
	body {
		font-size: 1rem;
	}
	.inner {
		padding-inline: 5vw;
	}
}
@media screen and (max-width:480px) {
	.inner {
		padding-inline: 3vw;
	}
	h2.sec-title {
		font-size: .9375rem;
	}
}


/*-----------------------------------------
 header
 ------------------------------------------*/
header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100px;
	font-weight: 500;
	line-height: 1.8;
}
header.fixed {
	height: 80px;
	background-color: #FFF;
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: 2vw;
	width: 100%;
	height: 100%;
}
header h1 {
	opacity: 0;
	transition: all .5s ease;
}
header.fixed h1 {
	opacity: 1;
}
header h1.show {
	opacity: 1;
}
.gnav ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.gnav ul li {
	display: flex;
	align-items: center;
	margin-inline: 1em;
}
.gnav a {
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-weight: 500;
	line-height: 1;
	padding-block: .5em;
}
.gnav a::before {
	content: '';
	position: absolute;
	left: -101%;
	bottom: .1em;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #11100A;
	transition: all .5s ease;
}
.gnav a:hover::before {
	left: 0;
}
@media screen and (max-width:800px) {
	header h1 {
		max-width: 360px;
	}
	.gnav ul li {
		margin-inline: .5em;
	}
}
@media screen and (max-width:700px) {
	header h1 {
		width: 50%;
	}
}
@media screen and (max-width:480px) {
	header,
	header.fixed {
		height: 60px;
	}
	header h1 {
		width: 55%;
	}
	.gnav ul li {
		margin-inline: .75em 0;
	}
	.gnav a { 
		font-size: .875rem;
	}
}

/*-----------------------------------------
 header
 ------------------------------------------*/
.hero picture img {
	width: 100%;
	height: calc( 100dvh - 140px );
	object-fit: cover;
}
.period {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	color: #FFF;
	width: 100%;
	height: 140px;
}
.period dt {
	font-weight: 500;
	font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
	margin-inline-end: 1em;
}
.period dd {
	font-weight: 500;
	font-size: clamp(1.625rem, 0.583rem + 1.39vw, 2.25rem);
}

@media screen and (max-width:1200px) {
	.hero picture img {
		height: calc( 80dvh - 120px );
	}
	.period {
		height: 120px;
	}
}
@media screen and (max-width:800px) {
	.hero picture img {
		height: calc( 80dvh - 120px );
	}
	.period {
		flex-direction: column;
		height: 120px;
		padding-inline: 5vw;
		line-height: 1.8;
	}
	.period dt {
		font-size: clamp(1.125rem, 0.958rem + 0.83vw, 1.375rem);
	}
	.period dd {
		font-size: clamp(1.25rem, 1rem + 1.25vw, 1.625rem);
	}
}
@media screen and (max-width:660px) {
	.hero picture img {
		width: 100%;
		height: calc( 85vh - 100px );
		object-fit: cover;
	}
	.period {
		height: 100px;
	}
}

/*-------------------------------------------------
 outline
 --------------------------------------------------*/
.outline-wrap {
	background-color: #F2EDEB;
	padding-block: 6vw;
}
.outline-wrap h2 {
	font-weight: 500;
	font-size: clamp(1.375rem, 1.018rem + 0.71vw, 1.875rem);
	line-height: 1.5;
	margin-block-end: 1.5em;
}
.outline-wrap h2 br { display: none; }
.outline-wrap h3 {
	font-weight: 500;
	font-size: clamp(clamp(1.25rem, 0.982rem + 0.54vw, 1.625rem));
	margin-block-end: 1.5em;
}
@media screen and (max-width:800px) {
	.outline-wrap {
		padding-block: 60px;
	}
	.outline-wrap h2 {
		font-size: clamp(1.25rem, 1.167rem + 0.42vw, 1.375rem);
	}
	.outline-wrap h3 {
		font-size: clamp(1.125rem, 1.042rem + 0.42vw, 1.25rem);
	}
}
@media screen and (max-width:480px) {
	.outline-wrap h2 br { display: inline-block; }
}

/*-------------------------------------------------
 products
--------------------------------------------------*/
.products-wrap {
	padding-block: 7.8vw;
}
.products-wrap h3 {
	margin-block-end: 1em;
}
.products-wrap h3 span {
	display: inline-block;
	border-bottom: 2px solid #11100A;
	padding-block-end: .2em;
	line-height: 1.5;
	margin-block-end: 1.5em;
	font-weight: 500;
	font-size: clamp(1.375rem, 1.196rem + 0.36vw, 1.625rem);
}
.products-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 3vw 2vw;
}
.products-list > li {
	display: flex;
	flex-direction: column;
}
.products-list .genre span {
	display: inline-block;
	font-weight: 500;
	background-color: #726D6B;
	color: #FFF;
	line-height: 1;
	padding: .3em .75em;
	border-radius: 20px;
}
.products-list figure {
	width: 100%;
	aspect-ratio: 440 / 294;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	overflow: hidden;
}
.products-list figure img {
	width: 100%;
	aspect-ratio: 440 / 294;
	object-fit: contain;
	text-align: center;
}
.products-list dl {
	margin-block-start: .5em;
}
.products-list dt {
	font-weight: 500;
	font-size: clamp(1.25rem, 1.161rem + 0.18vw, 1.375rem);
	line-height: 1.5;
	margin-block-end: 1em;
}
.products-list dd {
	line-height: 2;
}
.products-list dd ul li {
	position: relative;
	padding-inline-start: 1em;
}
.products-list dd ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .6em;
	width: 7px;
	aspect-ratio: 1 / 1;
	background-color: #11100A;
	border-radius: 50%;
}
@media screen and (max-width:1200px) {
	.products-list {
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width:800px) {
	.products-wrap {
		padding-block: 80px;
	}
}
@media screen and (max-width:700px) {
	.products-list {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
@media screen and (max-width:480px) {
	.products-list dt {
		font-size: 1.125rem;
	}
	.products-list .genre span {
		font-size: .9375rem;
	}
}

/*-------------------------------------------------
 contact
--------------------------------------------------*/
.contact-wrap {
	background-color: #DDD9D7;
	padding-block: 5.2vw;
}
.contact-wrap .inner {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;

}
.contact-wrap h2.sec-title .subtitle {
	font-size: clamp(1.75rem, 1.214rem + 1.07vw, 2.5rem);
}
.contact-wrap h3 {
	text-align: center;
	margin-block-end: 2.5em;
}
.contact-wrap h3 span {
	display: inline-block;
	font-weight: 700;
	font-size: clamp(1.375rem, 1.107rem + 0.54vw, 1.75rem);
	line-height: 1.8;
	border-bottom: 2px solid #11100A;
}
.contact-list {
	display: flex;
	justify-content: space-between;
}
.contact-list li {
	width: 49%;
}
.contact-list .phone {
	display: flex;
	align-items: center;
	font-family: 'brandon-grotesque', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 0.964rem + 1.07vw, 2.25rem);
	line-height: 1;
	letter-spacing: .2em;
	margin-block-end: .5em;
}
.contact-list .phone .title {
	display: inline-block;
	font-weight: 700;
	font-size: clamp(1.125rem, 0.857rem + 0.54vw, 1.5rem);
	margin-inline-end: 1em;
}
.contact-list .note {
	font-size: 1rem;
	line-height: 1.5;
}
.contact-list .btn {
	display: flex;
	justify-content: flex-end;
}
.contact-list .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 360px;
	width: 100%;
	height: 80px;
	background-color: #FFF;
	color: #11100A;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: .025em;
	border-radius: 40px;
	border: none;
}
.contact-list .btn a[target="_blank"]::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 17px;
	background: url(../images/icon_external01.svg) no-repeat center center;
	margin-inline-start: .5em;
}
@media screen and (max-width:800px) {
	.contact-wrap {
		padding-block: 60px;
	}
	.contact-list {
		flex-wrap: wrap;
	}
	.contact-list li {
		justify-content: center;
		width: 100%;
		text-align: center;
	}
	.contact-list .btn {
		justify-content: center;
		margin-block-start: 1.5em;
	}
	.contact-list .phone {
		justify-content: center;
	}
}
@media screen and (max-width:480px) {
	.contact-wrap h3 span {
		font-size: 1.25rem;
	}
	.contact-list .btn a {
		font-size: 1rem;
	}
}
/*-------------------------------------------------
 shop
--------------------------------------------------*/
.shops-wrap {
	padding-block: 7.8vw calc( 7.8vw - 60px );
}
.shop-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 2;
}
.shop-list > li {
	width: 46%;
	margin-block-end: 60px;
}
.js-slider {
	margin-block-end: 30px;
}
.my-unique-swiper {
    width: 100%;
    aspect-ratio: 3 / 2;
	background-color: #f2f2f2;
	margin-block-end: 2px;
}
.my-unique-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.swiper-button-prev,
.swiper-button-next {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid #11100A;
	border-radius: 50%;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  	content: none;
}
.swiper-button-prev svg,
.swiper-button-next svg {
	width: 20%;
	height: auto;
}
.swiper-navigation-icon path {
	fill: #11100A;
}
.my-thumbs-swiper {
	display: flex;
	height: 80px;
}
.my-thumbs-swiper .swiper-slide {
	flex: 1;
	width: 100%;
	height: 100%;
}
.my-thumbs-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shop-list em {
	font-style: normal;
	font-weight: 500;
	font-size: clamp(1.25rem, 1.161rem + 0.18vw, 1.375rem);
}
.shop-list em a[target="_blank"] {
	display: flex;
	align-items: center;
}
.shop-list em a[target="_blank"]::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 18px;
	background: url(../images/icon_external01.svg) no-repeat center center;
	margin-inline-start: .5em;
}
@media screen and (max-width:1200px) {
	.shop-list > li {
		width: 49%;
	}
}
@media screen and (max-width:800px) {
	.shops-wrap {
		padding-block: 80px 20px;
	}
}
@media screen and (max-width:700px) {
	.shops-wrap {
		padding-block: 80px;
	}
	.shop-list li {
		width: 100%;
		margin-block-end: 40px;
	}
	.shop-list li:last-child {
		margin-block-end: 0;
	}
}
@media screen and (max-width:480px) {
	.js-slider {
		margin-block-end: 20px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		width: 40px;
		height: 40px;
	}
}

/*-------------------------------------------------
 footer
--------------------------------------------------*/
footer {
	background-color: #000;
	padding-block: 7.8vw 2.6vw;
	padding-inline: 18.75vw;
	color: #FFF;
	text-align: center;
}
footer .banner {
	max-width: 1200px;
	width: 100%;
	text-align: center;
	margin-inline: auto;
	margin-block-end: 4vw;
}
/*footer .banner a img {
	transition: all .5s ease;
}
footer .banner a:hover img {
	opacity: .8;
}*/
footer .btn {
	max-width: 360px;
	width: 100%;
	height: 70px;
	margin: 0 auto 6.25vw;
}
footer .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 40px;
	background-color: #FFF;
	color: #11100A;
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: normal;
	padding-inline: 0;
	transition: all .5s ease;
}
footer .btn a[target="_blank"]::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 17px;
	background: url(../images/icon_external01.svg) no-repeat center center;
	margin-inline-start: .5em;
}
footer .copy {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: .875rem;
}
@media screen and (max-width:1200px) {
	footer {
		padding-block-start: 80px;
		padding-inline: 5vw;
	}
	footer .banner {
		margin-bottom: 40px;
	}
}
@media screen and (max-width:4800px) {
	footer {
		padding-block-start: 60px;
		padding-inline: 3vw;
	}
}