@import url( "./_generated-icon.css" );
@import url( "./_fonts.css?ver=250807" );
@import url( "./_base.css" );
@import url( "./_utils.css" );

html {
	scroll-padding-top: 16px;
	scroll-behavior: smooth;
}

@media (max-width: 940px) and (min-width: 681px) {}
@media (max-width: 680px) {}

/*
/* -------------------------------------------------------------------------- */
.Hero {
	--progress: 0;
	height: 100lvh;
}

.Hero__Inner {
	position: fixed;
	inset: 0 0 auto;
	overflow: hidden;
	height: 100lvh;
	opacity: calc( 1 - var( --progress, 0 ) );
	background-image: linear-gradient(182deg, #ccc8c5, #d4d3cf);
	pointer-events: none;

	& video,
	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	& img {
		display: none;
		object-fit: contain;
	}
}

@media ( max-width: 680px ) {
	.Hero__Inner video {
		display: none;
	}
	.Hero__Inner img {
		display: block;
	}
}

.Hero__ScrollIndicator {
	position: absolute;
	right: 48px;
	bottom: 0;
	width: 14px;
	height: 180px;
	background: url( "../img/hero/bg_001.svg" ) no-repeat 50% 0 / 100% auto;

	&::before,
	&::after {
		content: '';
		position: absolute;
		inset: auto 0 0;
		margin: 0 auto;
		width: 2px;
		height: 100px;
	}

	&::before {
		background: #ddd;
	}

	&::after {
		background: #000;
		animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
	}
}

@keyframes sdl01 {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


/*
/* -------------------------------------------------------------------------- */
.Intro {
	margin-top: -100lvh;
	color: #000;
	background: #fff;
}

/* .Intro__ScrollSpacer {} */

.Intro__ScrollContent {
	opacity: var( --progress, 0 );
}

.Intro__Inner {
	box-sizing: border-box;
	padding-top: 96px;
	padding-bottom: 128px;

	@media ( max-width: 680px ) {
		padding: calc( 240 / 375 * 100% ) 20px 64px;
		min-height: 100lvh;
	}
}


.Intro__Title {
	font-weight: 400;
	font-family: "Cinzel", serif;
	font-size: 48px;
	letter-spacing: 0.05em;
	text-align: center;

	@media ( max-width: 680px ) {
		font-size: 24px;
	}
}

.Intro__Lead {
	font-family: "Noto Serif JP", serif;
/* 	font-family: var( --font-serif ); */
	margin: 48px 0 0;
	font-size: 18px;
	line-height: 1.8;
	text-align: center;

	@media ( max-width: 680px ) {
		margin-top: 24px;
		font-size: 14px;
	}
}

.Intro__Logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	padding: 0;
	margin-top: 48px;
	list-style: none;

	@media ( max-width: 680px ) {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		margin-top: 32px;
	}

	li {
		width: 200px;
		background: #fff;

		@media ( max-width: 680px ) {
			width: auto;
		}
	}

	img {
		display: block;
		width: 100%;
	}
}

/*
/* -------------------------------------------------------------------------- */
.Section {
	margin-bottom: 80px;

	@media ( max-width: 680px ) {
		margin-bottom: 40px;
	}
}

.Section__Header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 500px;
	padding: 0 20px;
	clip-path: inset( 0 );

	@media ( max-width: 680px ) {
		height: 230px;
	}

	& img {
		position: fixed;
		z-index: -1;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.Section__HeaderInner {
	color: #fff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);

	& h2 {
		width: fit-content;
		margin: 0 auto;
		font-family: "Cinzel", serif;
		font-size: 72px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.1em;
		text-align: center;

		mask-image: url( "../img/shop-item/bg_001.png" );
		mask-size: 7100% 100%;
		/* mask-size: 100% 7100%; */
		mask-repeat: repeat;

		&:where( .-outView * ) {
			filter: blur( 8px );
		}

		&:where( .-inView * ) {
			animation: indwxw 0.5s steps( 70 ) 1 forwards;
			transition: filter 0.5s ease;
		}

		@media ( max-width: 680px ) {
			font-size: 32px;
		}
	}

	& p {
		margin: 32px 0 0;
		font-size: 24px;
		font-family: "Noto Serif JP", serif;
/* 		font-family: var( --font-serif ); */
		text-align: center;

		&:where( .-outView * ) {
			filter: blur( 8px );
			opacity: 0;
		}

		&:where( .-inView * ) {
			transition: filter 0.5s ease, opacity 0.5s ease;
		}

		@media ( max-width: 680px ) {
			margin-top: 10px;
			font-size: 16px;
		}
	}
}

@keyframes indwxw {
	from {
		mask-position: 0 0;
	}

	to {
		mask-position: 100% 0;
	}
}

/* @keyframes indwxw {
	from {
		mask-position: 0 0;
	}

	to {
		mask-position: 0 100%;
	}
} */

.Section__Body {
	box-sizing: border-box;
	max-width: 1280px;
	padding: 0 40px;
	margin: 0 auto;
	background: #fff;

	@media ( max-width: 680px ) {
		padding-inline: 20px;
	}
}


/*
/* -------------------------------------------------------------------------- */
.Icon {
	flex-shrink: 0;
	display: inline-block;
	height: 1em;
	aspect-ratio: 1;
	background: no-repeat 50% 50% / contain;

	/* レディース */
	&.-ladies { background-image: url( "../img/icon/bg_001.png" ) }
	/* メンズ */
	&.-mens { background-image: url( "../img/icon/bg_002.png" ) }
	/* ユニセックス */
	&.-unisex { background-image: url( "../img/icon/bg_003.png" ) }
	/* アクセサリー */
	&.-accessories { background-image: url( "../img/icon/bg_004.png" ) }
	/* ファッション雑貨 */
	&.-fashionGoods { background-image: url( "../img/icon/bg_005.png" ) }
	/* バッグ */
	&.-bag { background-image: url( "../img/icon/bg_006.png" ) }
}

/*
/* -------------------------------------------------------------------------- */
.IconInfoList {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 64px 0;
	padding: 0;
	gap: 32px;
	font-family: "Noto Serif JP", serif;
/* 	font-family: var(--font-serif); */
	list-style: none;

	@media ( max-width: 680px ) {
		gap: 13px;
		margin: 48px 0;
		font-size: 13px;
	}

	li {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.Icon {
		font-size: 20px;
	}
}

/*
/* -------------------------------------------------------------------------- */
.ShopList {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 48px;
	padding: 0;
	margin: 80px 0 0;
	list-style: none;

	@media ( max-width: 680px ) {
		gap: 32px;
		grid-template-columns: repeat( 1, 1fr );
		margin-top: 32px;
	}
}

/*
/* -------------------------------------------------------------------------- */
.ShopItem {
	container-type: inline-size;
	font-family: "Noto Serif JP", serif;
/* 	font-family: var( --font-serif ); */
}

.ShopItem__Thumb {
	margin: 0;

	&.-outView {
		clip-path: circle( 0 at 50% 50% );

		& img {
			transform: scale( 1.1 );
		}
	}

	&.-inView {
		clip-path: circle( 100% at 50% 50% );
		transition: clip-path .8s ease-in-out;

		& img {
			transition: transform .8s ease-in-out
		}
	}

	& img {
		display: block;
		width: 100%;
		height: auto;
		border: 1px solid #eee;
	}
}

.ShopItem__Date {
	padding: 4px 0;
	margin: 16px 0 0;
	text-align: center;
	color: #fff;
	background: #000;

	&.-outView {
		clip-path: inset( 0 100% 0 0 );
	}

	&.-inView {
		clip-path: inset( 0 );
		transition: clip-path .3s ease-in-out;
	}

	@media ( max-width: 680px ) {
		margin-top: 10px;
		font-size: 14px;
	}
}

.ShopItem__Name {
	margin: 8px 0 0;
	font-size: min( 32px, 32 / 370 * 100cqw );
/* 	letter-spacing: 0.08em; */

	@media ( max-width: 680px ) {
		font-size: 20px;
	}
}

.ShopItem__Name2 {
	margin: 0;

	@media ( max-width: 680px ) {
		font-size: 14px;
	}
}

.ShopItem__Tel {
	margin: 4px 0 0;
	font-size: 14px;
	letter-spacing: 0.08em;
}

.ShopItem__Lead {
	margin: 8px 0 0;
	font-weight: bold;
}

.ShopItem__Text {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.8;
}

/* inview anim */
.ShopItem__Name,
.ShopItem__Name2,
.ShopItem__Tel,
.ShopItem__Lead,
.ShopItem__Text {
	position: relative;
	overflow: hidden;
	width: fit-content;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		display: block;
		background: #000;
		clip-path: inset( 0 0 0 100% );
	}

	&.-outView {
		clip-path: inset( 0 100% 0 0 );

		&::before {
			clip-path: inset( 0 );
		}
	}

	&.-inView {
		clip-path: inset( 0 );
		transition: clip-path .3s ease-in-out;

		&::before {
			transition: clip-path .3s .3s ease-in-out;
		}
	}
}

.ShopItem__Link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	height: 45px;
	margin: 32px auto 0;
	font-size: 16px;
	text-decoration: none;
	border: 1px solid #000;
	border-radius: 999px;
	color: #000;
	background: #fff;
	transition: background 0.3s, color 0.3s;

	@media ( max-width: 680px ) {
		margin-top: 16px;
		width: 100%;
	}

	&:hover {
		background: #000;
		color: #fff;
	}
}

.ShopItem__Icons {
	display: flex;
	gap: 4px;
	margin: 16px 0 0;
	padding: 0;
	font-size: 32px;
	list-style: none;

	@media (max-width: 640px) {
		margin-top: 10px;
	}

	&.-outView li {
		scale: 0;
		opacity: 0;
	}

	&.-inView li {
		transition: scale 0.3s, opacity 0.3s;
	}

	li:nth-child( 1 ) {transition-delay: calc( 0.02 * 0s + .1s ) }
	li:nth-child( 2 ) {transition-delay: calc( 0.02 * 1s + .1s ) }
	li:nth-child( 3 ) {transition-delay: calc( 0.02 * 2s + .1s ) }
	li:nth-child( 4 ) {transition-delay: calc( 0.02 * 3s + .1s ) }
	li:nth-child( 5 ) {transition-delay: calc( 0.02 * 4s + .1s ) }
	li:nth-child( 6 ) {transition-delay: calc( 0.02 * 5s + .1s ) }
}

.ShopItem__Shtn {
display: inline-block;
margin: 14px 0 0 0;
padding: 2px 4px;
background: #eee;
}


/*
/* -------------------------------------------------------------------------- */

.PageFooter {
	position: relative;
	padding: 74px 20px;
	background: #000;
	color: #fff;
}

.PageFooter__SocialLinks {
	display: flex;
	gap: 28px;
	justify-content: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.PageFooter__SocialLinks a {
	text-decoration: none;
}

.PageFooter__SocialLinks .Icon {
	position: static;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	display: flex;
	width: 33px;
	height: 33px;
	font-size: 18px;
	text-decoration: none;
	color: #000;
	background: #fff;
}

.PageFooter__Logo {
	display: flex;
	justify-content: center;
	margin-top: 56px;

	& img {
		display: block;
	}
}

.PageFooter__Copyright {
	margin-top: 35px;
	font-size: 12px;
	text-align: center;
}




/* VISUAL CONCEPT ----------------------------------------------------- */

.Visual {
	&.-outView {
		opacity: 0;
		transform: translateY(50px);
	}

	&.-inView {
		transition: opacity 1s ease-out, transform 1s ease-out;
	}
}

@media (max-width: 767px) {

	.Visual {
	margin: 100px 20px;
	padding: 20px;
	width: auto;
	background-color: #e6e6e6;
	}
	
	.VisualMds {
	color: #000;
	font-family: "Cinzel", serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-align: center;
	}
	
    .container {
    flex-direction: column;
    }

    .image-wrapper {
    margin: 20px 0;
    }

    .image-wrapper img {
    width: 100%;
    }

    .text-content .VisualName {
	font-size: 18px;
	font-weight: bold;
	font-family: "Noto Serif JP", serif;
    }
    
    .text-content p {
	font-size: 14px;
    line-height: 1.5;
    margin: 0 !important;
    font-family: "Noto Serif JP", serif;
    }
   
}

@media (min-width: 768px) {
	
	.Visual {
	margin: 100px 20px;
	padding: 40px;
	width: auto;
	background-color: #e6e6e6;
	}
	
	.VisualMds {
	color: #000;
	font-family: "Cardo", serif;
	font-size: 52px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-align: center;
	}

	.container {
    display: flex; /* Flexboxを使ってカラムを作成 */
    flex-direction: row; /* デフォルトでは行方向に要素を配置（PC向け） */
    margin: 30px auto 0 auto; /* 中央寄せ */
	}

	.image-wrapper {
    width: 300px; /* 画像エリアの最小幅を設定（任意） */
    margin-right: 30px; /* 画像とテキストの間にスペース */
    display: flex; /* 画像を中央寄せするためにflexboxを使用 */
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: flex-start; /* 垂直方向の上寄せ */
	}

	.image-wrapper img {
    width: 100%; /* 親要素の幅に合わせて画像をリサイズ */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 画像の下にできる余白をなくす */
	}

	.text-content {
    flex: 1;
	}

    .text-content .VisualName {
	font-size: 24px;
	font-weight: bold;
    margin: 20px 0 !important;
    font-family: "Noto Serif JP", serif;
    }
    
    .text-content p {
	font-size: 16px;
    line-height: 1.6;
    margin:0 !important;
    font-family: "Noto Serif JP", serif;
    }

}

@media (min-width: 1110px) {

	.Visual {
	margin: 100px auto;
	padding: 50px;
	max-width: 1100px;
	}
	
	.VisualMds {
	font-size: 72px;
	}

}


/* Laforet HOME ----------------------------------------------------- */

.Home {
width: 100%;
text-align: center;
}

.HomeBtn {
display: block;
margin: 3rem auto;
}
	
.HomeBtn img {
width: 20rem;
}