/* =============================================================
    Module
============================================================= */
@media screen and (min-width: 992px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}

/* =============================================================
    Common
============================================================= */
.c-common-section{
	margin-top: 5rem;
}
[data-section="mv"] + .c-common-section{
	margin-top: 0;
}
@media screen and (min-width: 768px) {
	.c-common-section{
		margin-top: 8rem;
	}
}

/* =============================================================
    Swiper
============================================================= */
/* Swiperが暴走しないように */
.p-page-home .swiper {
    display: grid;
    width: 100%;
}
.p-page-home .swiper-wrapper {
    min-width: 0;
}

.top-product-slider{
    position: relative;
}
.slider-arrow{
    margin-block: auto;
    padding: 0;
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 99%;
    overflow: hidden;
    background-color: rgba(255,255,255,.7);
    border: 1px solid #fff;
    transition: background var(--transition-default), opacity var(--transition-default);

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: var(--zindex-hamburgermenu-contents);

		display:grid;
		place-items: center;
}
[data-section="feature"] .slider-arrow{
    top: 7.3rem;
    bottom: unset;
    margin-block: unset;
}
.slider-arrow.js-arrow-prev{
    left: 0;
}
.slider-arrow.js-arrow-next{
    right: 0;
}
.slider-arrow[aria-disabled="true"]{
    opacity: 0;
    pointer-events: none;
}

.slider-arrow__wrap{
    margin-top: 2rem;
}

.swiper-scrollbar {
    background: #EDEDED; /* スクロールバーの背景色 */
    height: 6px; /* スクロールバーの高さ */
}
.swiper-scrollbar .swiper-scrollbar-drag {
    background: var(--color-secondary); /* スクロールドラッグの色 */
    border-radius: 4px; /* 角を丸くする */
}
    
@media screen and (max-width: 767px) {
    .top-product-slider.l-container{
        padding-inline: 0;
    }
    .p-page-home .swiper,
    .slider-arrow__wrap{
        padding-inline: 2rem;
    }
    .slider-arrow{
        display: none;
    }
}

@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}



/* =============================================================
	Mv
============================================================= */
[data-section="mv"]{
	position: relative;
	margin-top: .5rem;
	margin-bottom: 6rem;
}
[data-section="mv"] .swiper{
	padding-block: 0 1rem;
}
.c-mv-item{
}
.c-mv-item__link{
	border-radius: 1rem;
	overflow: hidden;
}
[data-section="mv"] .slider-arrow__wrap {
	margin-top: 0;
}
.swiper-pagination{
	position: static;
	display: flex;
	justify-content: center;
	gap: 1rem;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
	margin-inline: 0;
}
.swiper-pagination-bullet{
	content: '';
	display: block;
	width: .7rem;
	height: .7rem;
	opacity: 1;
	background-color: var(--color-project-bg-high);
	transition: background var(--transition-default);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active{
	background-color: var(--color-project-primary);
}
[data-section="mv"] .slider-arrow{
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-default),background var(--transition-default);
}
[data-section="mv"]:has(.swiper-initialized) .slider-arrow{
	opacity: 1;
	pointer-events: all;
}
@media screen and (min-width: 768px) {
  [data-section="mv"]{
		margin-top: 0;
		margin-bottom: 5rem;
  }
  [data-section="mv"] .swiper{
		padding-block: 0 2rem;
  }
  [data-section="mv"] .slider-arrow{
		top: calc(50% - 2.5rem);
		bottom: unset;
  }
	[data-section="mv"] .swiper-pagination{
		gap: 1.5rem;
	}
	[data-section="mv"] .slider-arrow{
		z-index:1;
	}
}
@media screen and (max-width: 991px) {
	[data-section="mv"] .slider-arrow{
		display: none;
	}
}
@media screen and (max-width: 1200px) {
  [data-section="mv"] .slider-arrow.js-arrow-next{
		/* right:calc(50% - 2rem - 43rem); */
		right:16svw;
  }
  [data-section="mv"] .slider-arrow.js-arrow-prev{
		/* left:calc(50% - 2rem - 43rem); */
		left:16svw;
  }
}
@media screen and (min-width: 1201px) {
  [data-section="mv"] .slider-arrow.js-arrow-next{
		/* right:calc(50% - 2rem - 43rem); */
		right:16svw;
  }
  [data-section="mv"] .slider-arrow.js-arrow-prev{
		/* left:calc(50% - 2rem - 43rem); */
		left:16svw;
  }
}
@media screen and (max-width: 767px) {
  .p-page-home [data-section="mv"] .swiper,
  [data-section="mv"] .slider-arrow__wrap {
		padding-inline: 0;
  }
	.c-mv-item{
		padding-inline: .5rem;
	}
}


/* =============================================================
	CategoryList
============================================================= */
.c-category-item__caption{
	margin-top: 1rem;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: .1em;
}
@media screen and (min-width: 768px) {
	.category-list{
		display: grid;
		grid-template-columns: repeat(5, minmax(0,1fr));
		gap: 3rem;
	}
	.category-list__item{
		padding-inline: 0.5rem;
	}
	.c-category-item__caption{
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 767px) {
	.category-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.5rem 4.34782%;
	}
	.category-list__item{
		width: 30.43478%;
	}

}

/* =============================================================
	おすすめ商品・ランキング
============================================================= */
/* タブ切り替え
------------------------------------------------------------- */
@keyframes fadeInTabContent {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tab-wrappers {
  width: 100%;
}
.p-ranking-tab-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 1.1rem;
}


.tab-button {
  width: 100%;
	padding: 1.2rem 1rem .9rem;
	border: 1px solid var(--color-project-bg-high);
	border-radius: 4em;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	letter-spacing: .1em;
	line-height: 1;
	font-weight: var(--fw-semibold);
	background-color: #fff;
	color: var(--color-project-text);
}
.tab-button.active {
  color: #fff;
  border-color: var(--color-project-text);
	background-color: var(--color-project-text);
}


.tab-content {
  display: none;
  animation: fadeInTabContent var(--transition-default);
}
.tab-content.active {
  display: block;
}

.p-ranking-tab-contents{
	margin-top: 2rem;
}
.p-ranking-tab-button.active{
	pointer-events: none;
}
@media screen and (min-width: 768px) {
	.p-ranking-tab-buttons {
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		gap: 1.5rem;
	}
	.p-ranking-tab-button{
		width:21rem;
	}
	.p-ranking-tab-contents {
			margin-top: 2.5rem;
	}
}



[data-section="recommended"] .c-product-head__rank{
	display: none;
}
.c-product-body__title-name{
	font-size: 1.4rem;
	letter-spacing: .1em;
	line-height: 1.5;
	margin-top: 0.8rem;
	overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.c-product-head__rank {
	top: 0;
	left: 0;
	min-width: unset;
	width: 3rem;
	height: 3rem;
	padding: 0;
	font-size: 1.4rem;
	font-weight: var(--fw-medium);
	background-color: var(--color-project-text);
	color: #fff;
}
.c-product-head__rank[data-ranking-numeric="1"]{
	background-color: #A79044;
}
.c-product-head__rank[data-ranking-numeric="2"]{
	background-color: #8B8B8B;
}
.c-product-head__rank[data-ranking-numeric="3"]{
	background-color: #7E4F25;
}
@media screen and (min-width: 768px) {
	.c-product-body__title-name{
		margin-top: 0.5rem;
	}
	.c-product-head__rank {
		width: 3.4rem;
		height: 3.4rem;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 767px) {
	.c-product-head__rank[data-ranking-numeric="1"]{
		width: 4.5rem;
		height: 4.5rem;
		font-size: 2rem;
	}
}
/* 価格部分
------------------------------------------------------------- */
/* 価格ベース */
.c-product-body__price,
.c-product-body__price-subsc,
.c-product-body__price-prime,
.c-product-body__price-default {
  width: 100%;
	font-size: 1.5rem;
	margin-top: 0.6rem;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: .1em;
}

.c-product-body__price--num,
.c-product-body__price-subsc--num,
.c-product-body__price-prime--num,
.c-product-body__price-default--num {
  width: 100%;
  white-space: normal;
}
.c-product-body__price + .c-product-body__price-subsc,
.c-product-body__price-subsc + .c-product-body__price-subsc,
.c-product-body__price-prime + .c-product-body__price-subsc,
.c-product-body__price-default + .c-product-body__price-subsc {
  margin-top: 0.5rem;
}

/* 特別価格 */
.c-product-body__price-prime {
  color: var(--color-red);
}

/* 割引価格 */
.c-product-body__price--sale .c-product-body__price-default--num {
  font-size: 1.4rem;
}
.c-product-body__price--sale .c-product-body__price-default {
  margin-top: -0.5rem;
}

/* 定期価格大枠 */
.c-product-body__price-subsc {
  column-gap: 0;
}

.c-product-body__price-subsc-icon {
  display: grid;
  place-content: center;
  color: var(--color-main);
  font-weight: var(--fw-regular);
  border: 0.1rem solid var(--color-border);
  border-radius: 0;
  padding: 0 0.2rem;
  margin-right: 0.5rem;
}
@media screen and (min-width: 768px) {
  .c-product-body__price-subsc-icon {
    height: 2.1rem;
    font-size: 1.2rem;
  }
}

.c-product-body__price-value:has(del), .c-product-body__price-subsc-price:has(del) {
  color: #807670;
  font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
  .c-product-body__price-value:has(del), .c-product-body__price-subsc-price:has(del) {
    margin-left: 0.5rem;
  }
}

.c-product-body__price-subsc-price {
  color: var(--color-red-price);
}

/* 定期初回価格 */
.c-product-body__price-subsc--first {
  width: 100%;
  text-align: center;
  color: var(--color-red-price);
  border: 0.1rem solid var(--color-red-price);
  border-radius: 0.2rem;
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .c-product-body__price-subsc--first {
    font-size: 1.3rem;
    padding: 0.1rem 1rem;
  }
}
@media screen and (max-width: 767px) {
  .c-product-body__price-subsc--first {
    font-size: 1.2rem;
    margin-top: 0.4rem;
    padding: 0.15rem 1rem;
  }
  .c-product-body__price-subsc--first .c-product-body__price-subsc-price {
    font-size: 1.3rem;
  }
  .c-product-body__price-subsc--first .c-product-body__price--yen {
    font-size: 1rem;
  }
}

/* 定期通常価格 */
.c-product-body__price-subsc--regular {
  color: var(--color-main);
}
@media screen and (max-width: 767px) {
  .c-product-body__price-subsc--regular {
    align-items: flex-start;
  }
  .c-product-body__price-subsc--regular .c-product-body__price-subsc-icon {
    position: relative;
    top: 0.5rem;
  }
}

/* 「税込」表記 */
.c-product-body__price--tax {
  font-size: 1.1rem;
  color: var(--color-sub);
  margin-left: 0.4rem;
}

/* 「¥」もしくは「円」表記 */
.c-product-body__price--yen {
  margin-left: 0.2rem;
}
@media screen and (max-width: 767px) {
  .c-product-body__price--yen {
    font-size: 1.1rem;
  }
}

/* ▲ランキング価格部分▲ */

/* 画像のアスペクト比調整、必要ならcommonへ移動 */
.c-product-head__image{
	position: static;
	object-fit: unset;
}
.c-product-head__picture::before{
	display:none;
}


/* =============================================================
	お知らせ
============================================================= */
.p-homeNewsList {
	border-top: 1px solid var(--color-project-bg-high);
}
.p-homeNewsList__item{
	position: relative;
}
.p-homeNewsList__item::after{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin-block: auto;
	width: 2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88_23_20%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%2023%20%E2%80%93%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_611%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%20611%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_32336%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2032336%22%20transform%3D%22translate(-769.569%20-2574.539)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_70928%22%20data-name%3D%22%E3%83%91%E3%82%B9%2070928%22%20d%3D%22M7.851%2C4.248a.747.747%2C0%2C0%2C1-.5-.19L3.925%2C1%2C.5%2C4.058A.75.75%2C0%2C0%2C1-.56%2C4%2C.75.75%2C0%2C0%2C1-.5%2C2.938L3.925-1%2C8.35%2C2.938a.75.75%2C0%2C0%2C1-.5%2C1.31Z%22%20transform%3D%22translate(784.727%202580.539)%20rotate(90)%22%20fill%3D%22%23ff6c37%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_70929%22%20data-name%3D%22%E3%83%91%E3%82%B9%2070929%22%20d%3D%22M0%2C11.179a.75.75%2C0%2C0%2C1-.75-.75V0A.75.75%2C0%2C0%2C1%2C0-.75.75.75%2C0%2C0%2C1%2C.75%2C0V10.429A.75.75%2C0%2C0%2C1%2C0%2C11.179Z%22%20transform%3D%22translate(783.997%202584.465)%20rotate(90)%22%20fill%3D%22%23ff6c37%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}
.p-homeNewsList-body {
	padding: 1.5rem 3rem 1.5rem 0;
	border-bottom: 1px solid var(--color-project-bg-high);
	align-items: flex-start;
}
.p-homeNewsList-body__time {
	margin-bottom: .5rem;
	letter-spacing: .075em;
	line-height: 1.4;
	font-weight: var(--fw-regular);
	color: rgba(51,40,32,.7);
}
.p-homeNewsList-body__title {
	font-size: 1.4rem;
	letter-spacing: .1em;
	line-height: 1.5;
}
.p-homeNewsList-body__title div{
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.p-homeNewsList__item:has(a) .p-homeNewsList-body{
	pointer-events: none;
}
.p-homeNewsList__item:has(a) .p-homeNewsList-body a{
	pointer-events: all;
}
.p-homeContentsUnderBtn{
	margin-top: 1.5rem;
	text-align: right;
}
@media screen and (min-width: 768px) {
	[data-section="news"] .l-container-sm{
		--container-small:89rem;
		max-width: var(--container-small);
	}
	.p-homeNewsList-body__time {
		margin-block: .3ch 0;
		width: 12rem;
	}
	.p-homeNewsList-body__title{
		font-size: 1.5rem;
	}

	.p-homeNewsList__item::after{
		right: .9rem;
	}
}

@media screen and (hover: hover) {
	[data-section="mv"] .slider-arrow-prev img,
	[data-section="mv"] .slider-arrow-next img{
		transition: transform var(--transition-default);
	}
	[data-section="mv"] .slider-arrow-prev:hover img{
		transform: translateX(-5px);
	}
	[data-section="mv"] .slider-arrow-next:hover img{
		transform: translateX(5px);
	}
	.p-ranking-tab-button,
	.p-homeNewsList-body__title{
		transition: opacity var(--transition-default);
		cursor: pointer;
	}
	.p-ranking-tab-button:not(.active):hover,
	.p-homeNewsList-body__title:hover{
		opacity: var(--hover-opacity);
	}

	.p-homeNewsList-body--link:hover{
		opacity: 1;
	}
	.p-homeNewsList-body__title:hover{
		opacity: 0.7;
	}
	.p-homeNewsList__item::after{
		transition: right var(--transition-default);
	}
	.p-homeNewsList__item:has(.p-homeNewsList-body__title:hover).p-homeNewsList__item::after{
		right: 0;
	}
}