@charset "utf-8";
/*--------------------------------------------
  shoptop.css
  ショップトップの共通CSS
--------------------------------------------*/
/*--------------------------------------------------------
	レイアウト
-------------------------------------------------------*/
.contents {
	max-width: 100%;
	& section:not(:first-of-type) {
		margin: clamp(3.75rem, 0.000rem + 10vw, 6.25rem) 0;
	}
	& .include2 + section:not(:first-of-type) {
		margin-top: 0;
	}
	& .sectionInner {
		max-width: calc(1200px + var(--screen-pd-lr)*2);
		margin: 0 auto;
		padding: clamp(1.25rem, 0.313rem + 2.5vw, 1.875rem) var(--screen-pd-lr);
		&:has( .swiperWrap) {
			max-width: 1200px;
			padding: clamp(1.25rem, 0.313rem + 2.5vw, 1.875rem) 0;
		}
		& + .sectionInner {
			margin-top: 2em;
		}
	}
}

.swiperWrap {
	& .swiper-wrapper {
		width: calc(100% + 3em);
	}
}

/*--------------------------------------------------------
	メインスライダー
-------------------------------------------------------*/
#globalImage {
	position: relative;
	padding-bottom: 60px;
	overflow-x: hidden;
	& li {
		width: 400px;
		margin: 5px 5px 0;
		& a {
			display: block;
			width: 100%;
			border-bottom: none;
			& img {
				width: 100%;
			}
		}
	}
	& .swiper-pagination {
		z-index: 9;
	}
	@media (max-width: 600px) {
		padding-bottom: 2.5em;
		& li {
			margin: 0;
		}
	}
}

/*--------------------------------------------------------
	重要なお知らせ
-------------------------------------------------------*/
.include1 {
	max-width: calc(1200px + var(--screen-pd-lr) * 2);
	padding: 0 var(--screen-pd-lr);
	margin: 0 auto;
}
.importantNoticeListWrap {
	display: flex;
	gap: 0 calc(var(--screen-pd-lr)*1.5);
	margin: var(--screen-pd-lr) 0 calc(var(--screen-pd-lr)*-1);
	padding: var(--screen-pd-lr);
	border: 1px solid var(--color-border-pink);
	&::before {
		content: "重要なお知らせ";
		color: var(--color-alert);
	}
}
@media screen and (max-width: 600px) {
	.importantNoticeListWrap {
		display: block;
		&::before {
			font-size: var(--font-size-s);
		}
	}
}

/*--------------------------------------------------------
	お知らせ
-------------------------------------------------------*/
#info {
	& .infoList ul {
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border);
		padding: 1em 0;
		& li {
			padding: .25em 0;
			& a {
				display: grid;
				grid-template-columns: 8em 1fr;
				grid-template-rows: auto;
				grid-template-areas: 
					"date title";
				border-bottom-color: transparent;
				padding: .5em 0;
				&:hover {
					border-bottom: 1px dashed var(--color-border);
				}
				& .newsDate {
					grid-area: date;
				}
				& .newsTitle {
					grid-area: title;
				}
			}
		}
	}
	.newsListButtonItemWrap {
		margin-top: 1.5em;
		text-align: right;
	}
}
@media screen and (max-width: 600px) {
	#info {
		& .infoList ul {
			& li {
				& a {
					grid-template-columns: 100%;
					grid-template-rows: auto auto;
					grid-template-areas: 
						"date"
						"title";
					& .newsDate {
						color: var(--color-text-gray);
						font-size: var(--font-size-s);
						padding-bottom: .3em;
					}
				}
			}
		}
	}
}

/*--------------------------------------------------------
	トップバナー
-------------------------------------------------------*/
#topBannerArea1 {
	background-color: var(--color-background-pink);
	padding: clamp(2.5rem, -1.250rem + 10vw, 5rem) 0;
	& ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--screen-pd-lr);
		& picture {
			& img {
				width: 100%;
			}
		}
	}
}
@media screen and (max-width: 960px) {
	#topBannerArea1 {
		& ul {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}
@media screen and (max-width: 600px) {
	#topBannerArea1 {
		& ul {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}

.gallery-main {
	opacity: 0;
	&.is-initialized {
		opacity: 1;
	}
	& .swiper-button-next {
		z-index: 1;
		top: calc(50% - 30px);
		right: max(calc(50% - 638px), 5px);
		@media screen and (max-width: 600px) {
			top: calc(50% - 10px);
			right: 10px;
		}
	}
	& .swiper-button-prev {
		z-index: 1;
		top: calc(50% - 30px);
		left: max(calc(50% - 638px), 5px);
		@media screen and (max-width: 600px) {
			top: calc(50% - 10px);
			left: 10px;
		}
	}
}

/*--------------------------------------------------------
	新着商品
-------------------------------------------------------*/
.newArrivalItems {
	& li {
		&::before {
			content: "";
			display: block;
			width: clamp(2.5rem, 1.750rem + 2vw, 3rem);
			height: clamp(1.5rem, 1.125rem + 1vw, 1.75rem);
			border-bottom: 1px solid var(--color-border-pink);
			background: url(../images/icon/icon_new.svg) no-repeat center right;
			background-size: 75%;
			position: absolute;
			left: 5px;
			top: 0;
		}
	}
}

/*--------------------------------------------------------
	おすすめカテゴリ
-------------------------------------------------------*/
.recommendTitle {
	position: relative;
	text-align: center;
	font-size: clamp(1.125rem, 0.563rem + 1.5vw, 1.5rem);
	padding-bottom: .25em;
	margin-bottom: 1em;
	&::before {
		content: "";
		display: block;
		width: 10em;
		height: 1px;
		background-color: var(--color-border-pink);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------
	ランキング、セール商品
-------------------------------------------------------*/
#rankingIncludeArea,
#saleIncludeArea {
	background-color: var(--color-background-gray);
	padding: clamp(2.5rem, -1.250rem + 10vw, 5rem) 0;
}

.rankingItems.swiperWrap .rankingTitle {
	display: none;
}

/*--------------------------------------------------------
	キャンペーン
-------------------------------------------------------*/
#campaignArea {
	background: url(../images/background_pink_gradation.jpg) no-repeat top center;
	background-size: cover;
	padding: clamp(2.5rem, -1.250rem + 10vw, 5rem) 0;
	& .sectionTitle {
		color: var(--color-sub);
	}
}
.campaignListWrapper {
	position: relative;
	padding-bottom: 3em;
	& ul.campaignList {
		& li.swiper-slide {
			height: auto;
			display: flex;
			max-width: 370px;
			& a {
				display: grid;
				grid-template-columns: 100%;
				grid-template-rows: auto 1fr;
				border-bottom: none;
				width: 100%;
				& picture {
					grid-row: 1 / 2;
					width: 100%;
					& img {
						width: 100%;
					}
				}
				& .campaign_info {
					background-color: rgba(255, 255, 255, 0.7);
					width: 100%;
					padding: 1em 1.2em;
					& .title {
						grid-row: 2 / 3;
					}
					& .ex {
						grid-row: 3 / 4;
						padding-top: .5em;
						font-size: var(--font-size-s);
					}
				}
			}
		}
	}
	& .swiper-button-next,
	& .swiper-button-prev {
		top: calc((100% - 3em)/2);
	}
}
@media screen and (max-width: 960px) {
	.campaignListWrapper {
		& ul {
		}
	}
}

/*--------------------------------------------------------
	SNS
-------------------------------------------------------*/
.snsArea {
	background-color: var(--color-background-pink);
	padding: clamp(2.5rem, -1.250rem + 10vw, 5rem) 0;
	& p {
		border: 2px dashed var(--color-border2);
		text-align: center;
		padding: var(--screen-pd-lr);
	}
	& .snsList {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 var(--screen-pd-lr);
		margin-top: clamp(2.5rem, 0.625rem + 5vw, 3.75rem);
		& li {
			& a {
				display: block;
				width: clamp(2.25rem, 1.875rem + 1vw, 2.5rem);
				height: clamp(2.25rem, 1.875rem + 1vw, 2.5rem);
				border-radius: 50%;
				background: no-repeat center center;
				background-size: contain;
			}
			&.instagram a {background-image: url(../images/icon/icon_instagram.svg);}
			&.facebook a {background-image: url(../images/icon/icon_facebook.svg);}
			&.youtube a {background-image: url(../images/icon/icon_youtube.svg);}
		}
	}
}