/* =============================================================
    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
============================================================= */
.l-container-full{
	margin-inline: auto;
	padding-inline: var(--gutter-pc);
	width: var(--container-default);
}
.l-container-scroll{
	padding-inline: 0;
}
@media screen and (min-width: 768px) {
	[data-section="mv"] + .c-top-section{
		margin-top: 0;
	}
	.l-container-scroll{
		margin-inline: auto;
		width: var(--container-default);
	}
	/* .c-top-section{
		background-color: unset;
	} */
}
@media screen and (max-width: 767px) {
	.gutter-sp{
		padding-inline: var(--gutter-sp);
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.c-top-section{
		background-color: unset;
	}
}
/* =============================================================
    Swiper
============================================================= */
/* Swiperが暴走しないように */
.p-page-home .swiper {
	display: grid;
	width: 100%;
}
.p-page-home .swiper-wrapper {
	min-width: 0;
}

.common-slider{
	position: relative;
}

[data-item-list="slider"]:not(:has(.product-slider-item)){
	display: none;
}
@media screen and (max-width: 767px) {
}

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

/* =============================================================
	緊急時のお知らせ
============================================================= */
.emergency-notice-area {
  width: 100%;
  height: var(--header-height-upper);
  text-align: center;
  background-color: var(--color-red);
  display: flex;
  justify-content: center;
  align-items: center;
}

.emergency-notice-text {
  font-size: 1.4rem;
  letter-spacing: .03em;
  line-height: 1;
  text-align: center;
  color: var(--color-white);
  font-weight: var(--fw-medium);

  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =============================================================
	Mv
============================================================= */
[data-section="mv"]{
	position: relative;
	margin-bottom: 5rem;
}
[data-section="mv"] .swiper{
	padding-block: 0 2rem;
}
.c-mv-item{
}

[data-section="mv"] .slider-arrow__wrap {
	margin-top: 0;
}
.swiper-pagination{
	position: static;
	display: flex;
	justify-content: center;
	gap: 2rem;
}
.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: 1.3rem;
	height: 1.3rem;
	opacity: 1;
	background-color: var(--color-border);
	transition: background var(--transition-default);
	position: relative;
}
.swiper-pagination-bullet::after{
	position: absolute;
	top: -.65rem;
	left: -.65rem;
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28932%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028932%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26207%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026207%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81227%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081227%22%20d%3D%22M38.656%2C23.292a3.034%2C3.034%2C0%2C1%2C0%2C4.291%2C0%2C3.034%2C3.034%2C0%2C0%2C0-4.291%2C0m3.461%2C3.461a1.861%2C1.861%2C0%2C1%2C1%2C0-2.632%2C1.862%2C1.862%2C0%2C0%2C1%2C0%2C2.632%22%20transform%3D%22translate(-26.547%20-15.748)%22%20fill%3D%22%23004295%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81228%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081228%22%20d%3D%22M12%2C0A12%2C12%2C0%2C1%2C0%2C24%2C12%2C12.013%2C12.013%2C0%2C0%2C0%2C12%2C0m.755%2C21.863q-.374.029-.755.029A9.887%2C9.887%2C0%2C0%2C1%2C4.294%2C5.8L7.288%2C8.8H4.745a1.2%2C1.2%2C0%2C0%2C0-1.164.9%2C8.447%2C8.447%2C0%2C0%2C0-.19.888A8.727%2C8.727%2C0%2C0%2C0%2C12%2C20.707a6.025%2C6.025%2C0%2C0%2C0%2C.794-.041%2C7.039%2C7.039%2C0%2C0%2C0-.041%2C1.2m2.042-.376a.673.673%2C0%2C0%2C1-.018-.16%2C8.451%2C8.451%2C0%2C0%2C1%2C.3-1.961.826.826%2C0%2C0%2C0-.189-.846.875.875%2C0%2C0%2C0-.847-.188A6.634%2C6.634%2C0%2C0%2C1%2C5.415%2C11.25a.4.4%2C0%2C0%2C1%2C.4-.35h3.7a1.329%2C1.329%2C0%2C0%2C0%2C1.329-1.329V5.81a.4.4%2C0%2C0%2C1%2C.35-.4%2C6.7%2C6.7%2C0%2C0%2C1%2C5.519%2C1.893%2C6.629%2C6.629%2C0%2C0%2C1%2C1.625%2C6.738.826.826%2C0%2C0%2C0%2C.188.847.876.876%2C0%2C0%2C0%2C.846.188%2C7.011%2C7.011%2C0%2C0%2C1%2C2.023-.307.491.491%2C0%2C0%2C1%2C.1.011%2C9.943%2C9.943%2C0%2C0%2C1-6.689%2C6.7m5.876-8.736a8.707%2C8.707%2C0%2C0%2C0-8.84-9.46%2C10.759%2C10.759%2C0%2C0%2C0-1.3.136%2C8.21%2C8.21%2C0%2C0%2C0-.889.188%2C1.2%2C1.2%2C0%2C0%2C0-.9%2C1.163V7.251L5.795%2C4.3A9.883%2C9.883%2C0%2C0%2C1%2C21.887%2C12q0%2C.366-.027.726a6.636%2C6.636%2C0%2C0%2C0-1.187.026%22%20transform%3D%22translate(0%200)%22%20fill%3D%22%23004295%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81229%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081229%22%20d%3D%22M44.094%2C28.73a1.264%2C1.264%2C0%2C1%2C0%2C1.787%2C0%2C1.263%2C1.263%2C0%2C0%2C0-1.787%2C0%22%20transform%3D%22translate(-30.733%20-19.934)%22%20fill%3D%22%23004295%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81230%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081230%22%20d%3D%22M45.882%2C30.517a1.264%2C1.264%2C0%2C1%2C1%2C0-1.787%2C1.264%2C1.264%2C0%2C0%2C1%2C0%2C1.787%22%20transform%3D%22translate(-30.733%20-19.934)%22%20fill%3D%22%23004295%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	opacity: 0;
	transform: scale(0);
	transition: opacity var(--transition-default), transform var(--transition-default);
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
	background-color: transparent;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active::after{
	opacity: 1;
	transform: scale(1);
}

@media screen and (min-width: 768px) {
  [data-section="mv"]{
		margin-top: 0;
		margin-bottom: 5rem;
  }
  [data-section="mv"] .swiper{
		padding-block: 0 1.55rem;
  }

}

/* 
アンカーリンクがSwiperの下に隠れてしまう問題を解消するため、
Swiperが初期化されるまではpointer-eventsを無効化する 
*/
.mv-outer {
	pointer-events: none;
}
.mv-outer:has(.swiper-initialized) {
	pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .p-page-home [data-section="mv"] .swiper{
		padding-inline: 0;
  }
	.mv-outer{
		height: 39rem;
	}
	.mv-outer:has(.swiper-initialized){
		height: auto;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .mv-outer {
    height: 20rem;
		pointer-events: none;
  }
  .mv-outer:has(.swiper-initialized) {
    height: auto;
		pointer-events: auto;
  }
}

/* =============================================================
	重要なお知らせ
============================================================= */

/* =============================================================
	タイムセール
============================================================= */
.product-timesale-list__outer{
	padding-block: 4rem;
}
.product-timesale-list{
	display: grid;
	gap: 1rem 1.2rem;
	grid-template-rows: auto 1fr auto auto;
}
.c-product-head__link{
	display: block;
	width: 100%;
}
.c-product-head__picture{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.c-product-head__picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-section="timesale"] .product-item{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
}
[data-section="timesale"] .c-button{
	margin-top: 3rem;
}
.c-product-body__title{
	margin-top: 1.4rem;
}
@media screen and (min-width: 768px) {
	.product-timesale-list{
		grid-template-columns: repeat(6, minmax(0,1fr));
	}

}
@media screen and (max-width: 767px) {
	.product-timesale-list{
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter-sp);
    padding-bottom: 1rem;
	}
}
/* =============================================================
	売れ筋ランキング
============================================================= */

/* コンテンツ
------------------------------------------------------------- */
.ranking-tab-area{
	padding-top: 2rem;
}
.common-tab-buttons{
	padding-bottom: 1rem;
}
.p-ranking-tab-content .common-slider{
	padding-top: 1rem;
}

@media screen and (min-width: 768px) {
	.ranking-tab-area{
		padding-top: 4rem;
	}
	.common-tab-buttons{
		padding-bottom: 0;
	}
	[data-section="report"] .common-tab-buttons,
	[data-section="column"] .common-tab-buttons{
		justify-content: flex-start;
		padding-inline: 5rem;
		padding-bottom: 1rem;
	}
	.p-ranking-tab-content .common-slider{
		padding-top: 3.2rem;
	}
}
/* =============================================================
	バナーリスト
============================================================= */
.top-banner-area{
	margin-top: 4rem;
}
.banner-list{
	display: grid;
	gap: 1rem 1.5rem;
}
.banner-item{
	border-radius: 4px;
	overflow: hidden;
}
@media screen and (min-width: 768px) {
	.banner-list{
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
}


/* =============================================================
	カテゴリーリスト
============================================================= */
[data-section="category-list"]{
	margin-top: 4rem;
}
[data-section="category-list"] .category-list{
	padding-inline: var(--gutter-sp);
}
[data-section="category-list"] .c-top-sub-section-sub{
	border-radius: 0 0 1rem 1rem;
}
@media screen and (min-width: 768px) {
	[data-section="category-list"] .category-list{
		padding-inline: 3rem;
	}
}

/* =============================================================
	メーカーから探す
============================================================= */
[data-section="maker-list"]{
	margin-top: 4rem;
}
@media screen and (min-width: 768px) {

}
/* =============================================================
	専門から探す
============================================================= */
.grid-list-specialty{
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: .8rem .9rem;
	padding-inline: var(--gutter-sp);
}

.overlay-cover{
  position: relative;
}
.overlay-cover::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.4);
  z-index: 1;
}
.specialty-item{
	border-radius: 4px;
	overflow: hidden;
}
.specialty-item__text{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--color-white);
  font-size: 1.5rem;
  letter-spacing: .03em;
  line-height: 1;
	font-weight: var(--fw-semibold);
  text-align: center;
}


@media screen and (min-width: 768px) {
	[data-section="search-specialty"]{
		margin-top: 4rem;
	}
	.grid-list-specialty{
		grid-template-columns: repeat(9, minmax(0,1fr));
		gap: 1rem;
		padding-inline: 4.7rem;
	}
}
/* =============================================================
	お知らせ
============================================================= */
.p-homeNewsList{
	display: grid;
	gap: 1rem;
	padding-inline: var(--gutter-sp);
}
.p-homeNewsList__item{
	background-color: var(--color-white);
}
.p-homeNewsList-body {
	align-items: flex-start;
	flex-direction: column;
	gap: 1rem 0 ;
	background-color: var(--color-bg-gray);
	border-bottom: unset;
	padding: 0;
}
.p-homeNewsList-body__time {
	font-size: 1.6rem;
	line-height: 1;
	font-weight: var(--fw-semibold);
	font-family: var(--font-en);
	color: var(--color-blue-primary);
	display: grid;
	gap: 1rem;
}
.p-homeNewsList-body__time::after{
	content: '';
	width: 4rem;
	height: 2px;
	background-color: var(--color-yellow-accent);
}
.p-homeNewsList-body__title {
	padding: 2rem;
	font-size: 1.4rem;
	letter-spacing: .03em;
	line-height: 1.7;
	text-decoration: none;
	color: var(--color-text-default);
	width: 100%;
}
.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: 3rem;
}

@media screen and (min-width: 768px) {
	[data-section="news"]{
		margin-top: 4rem;
	}
	.p-homeNewsList{
		padding-inline: 6rem;
	}
	.p-homeNewsList__item{
	}
	.p-homeNewsList-body__time {
		width: 100%;
		margin-bottom: 1rem;
	}
	.p-homeNewsList-body__title{
		max-width: 100%;
		padding: 2rem 4rem;
	}
	.p-homeNewsList-body__title div{
		-webkit-line-clamp: 2;
	}
	.p-homeContentsUnderBtn{
		margin-top: 3rem;
	}
}

/* =============================================================
	サービスアイコン
============================================================= */
[ data-section="service-icons"]{
	margin-top: 4rem;
}
.service-icons-list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1.6rem .8rem;
	padding-inline: var(--gutter-sp);
}
.service-icons-item__image{
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--color-bg);
}
.service-icons-item figcaption{
	margin-top: .8rem;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.service-icons-list{
		grid-template-columns: repeat(9, minmax(0,1fr));
		gap: 1.6rem 2.3rem;
		padding-inline: var(--gutter-sp);
	}
}

/* =============================================================
	フッター上のマージン削除
============================================================= */
@media screen and (max-width: 991px) {
	.p-page-home {
		padding-bottom: 0rem;
	}
}


/* 拡大アニメーション
------------------------------------------------------------- */
.c-scale-up .c-scale-up__item-wrapper{
  width: 100%;
  overflow: hidden;
}
.c-scale-up .c-scale-up__item{
  width: 100%;
  height: auto;
  transition: transform var(--transition-default);
}


@media screen and (hover: hover) {
	.c-scale-up:hover{
		opacity: 1;
	}
	.c-scale-up .c-scale-up__item{
		transition: transform var(--transition-default);
	}
	.c-scale-up:hover .c-scale-up__item{
		transform: scale(1.1);
	}

	.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;
	}
}