﻿@charset "UTF-8";
/* ===============================================
  * アニメーション関連の設定 *
=============================================== */
:root{
	--transition-default: 350ms ease;
	--transitionDuration-default: 350ms;
	--border-radius-tab: 1rem 1rem 0 0;
	
}
@-webkit-keyframes toggleVisibilityArticle {
	from {
	  visibility: hidden;
	  opacity: 0;
	}
	to {
	  visibility: visible;
	  opacity: 1;
	}
  }
  @keyframes toggleVisibilityArticle {
	from {
	  visibility: hidden;
	  opacity: 0;
	}
	to {
	  visibility: visible;
	  opacity: 1;
	}
}
@keyframes fade-in {
	0% {
		display: none;
		opacity: 0;
	}

	1% {
		display: block;
		opacity: 0;
	}

	100% {
		display: block;
		opacity: 1;
	}
}
.home__inner{
	margin: 0 auto 8rem;
}
.product__img img{
	object-fit: contain;
	aspect-ratio: 1;
}
/* ===============================================
  * 共通 *
=============================================== */
.img-icatch{
	background: #fff;
}
/* ランキング表示する時に元に戻す。 
[data-links="anchor"]{
	padding-top: var(--headerHeight);
	margin-top: calc(-1 * var(--headerHeight));
} */
/* ===============================================
  * キーワードリスト *
=============================================== */
/*  */
.keywordList{
	background: #f0f0f0;
}
.keywordList__inner{
	width: 100%;
	max-width: var(--container-default);
	padding: 0 2rem;
	margin: 0 auto;
}
.cardUnit-keywordList{
	display: flex;
	align-items: center;
	justify-content: center;
}
.cardUnit-keywordList dt{
	font-size: 1.4rem;
	line-height: 1;
	margin-right: 2rem;
}
.cardUnit-keywordList dd{
	width: 100%;
	max-width: 88rem;
    padding: 0.8rem 0 0.4rem;
    overflow-x: auto;
	scrollbar-width: thin;
}

.cardUnit-keywordList dd::-webkit-scrollbar{
	opacity: 0;
	transition: opacity 0.3s;
	border-radius: 10px;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .0);
	height: 4px;
}
.cardUnit-keywordList dd:hover::-webkit-scrollbar{
	opacity: 1;
 }
 .cardUnit-keywordList dd:hover::-webkit-scrollbar-track{
	background: rgba(0, 0, 0, .1);
	border-radius: 10px;
 }
 .cardUnit-keywordList dd:hover::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, .3);
	border-radius: 10px;
 }


.cardUnit-keyword{
	width: max-content;
	display: flex;
	align-items: center;
	gap: 1rem;
	/* position: relative; */
}
/* .cardUnit-keyword::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(240, 240, 240, 0) 80%, rgba(240, 240, 240, 1));
	pointer-events: none;
} */
.cardUnit-keyword::after{
	content: "";
	display: block;
	width: 10rem;
	height: 1px;
}
.cardUnit-keyword > a{
	height: 2.4rem;
	font-size: 1.2rem;
	line-height: 1;
	color: #000000;
	padding: 0 1rem ;
	border-radius: 2em;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cardUnit-keyword > a::before{
	content: "#";
	display: block;
}
/* ===============================================
  * 注意情報 *
=============================================== */
.alartList{
	width: 100%;
	max-width: var(--container-default);
	display: flex;
    align-items: center;
    justify-content: center;
	padding: 0 2rem;
	margin: 1rem auto;
}
.alart__contents{
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 500;
}
.alart__contents.alart__contents-icon{
	color: #CC1919;
	/* padding-left: 3rem; */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 0.5rem;
}
.alart__contents.alart__contents-icon::before{
	content: "";
	display: block;
	background-size: contain;
	width: 2.248rem;
	aspect-ratio: 1;
	/* height: 2.248rem; */
	background-image:  url("/Contents/ImagesPkg/home/Icon_alart.svg");
	margin: auto;
}
/* ===============================================
  * FVあたりのコンテンツ *
=============================================== */
/* 1枚バナー */
.features{}
.features__inner{
	width: 100%;
	max-width: var(--container-default);
	display: flex;
	gap: 0 1.83333%;
	flex-wrap: wrap;
	padding: 0 2rem;
	/* margin: 1rem auto 0; */
	margin: 0 auto;
}
.FeatureBnr{
	width: 51.5%;
}
.FeatureBnr img{
	object-fit: contain;
	height: 61.8rem;
}
.mvttl{
	font-size: 2rem;
	text-align: center;
	line-height: 1.4;
	padding: 0 2rem;
	margin: 1rem auto 0;
}
/* 送料無料バナー(PC追従 SP置き) */
.webLimitedBnr{
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	transition: opacity 0.6s;
	z-index: 99;
}
.webLimitedBnr.removeContents{
	opacity: 0;
	pointer-events: none;
}
.remove-button{
	width: 2.1rem;
	display: block;
	cursor: pointer;
	margin:0 0 2px auto;
}
.webLimitedBnr-bnr{
	width: 20rem;
}

.article__tab-list{
	display: none;
}
.article__content-wrapper{
	display: flex;
	flex-direction: column;
}
.article__content-inner{
	display: block;
	width: 100%;
}
.featureItemList{
	width: 46.66666%;
}
.featureList-top__inner{
	background: #FFFAF4;
	padding: 3rem;
}
.article__content-inner + .article__content-inner {
	margin-top: 1rem;
}
.featureList__contentsTtl{
	height: 4rem;
	background: var(--color-secondary);
	border-radius: 1rem 1rem 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.featureList__contentsTtl span{
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	font-weight: 400;
	margin-left: 1rem;
}
.featureList__contentsTtl span.doubleTitle{
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing:inherit;
	margin-left: 2rem;
}
.featureList-top__inner .swiper-container-featureList{
	padding: 1rem 0 ;
}

/* 追加 おすすめ(goo searchが入った場合)*/
@media (min-width: 768px) {
	.fvFratureList{
		width: 46.66666%;
		/* height: max-content; */
		height: max-content;
		/* height: 61.8rem; */
	}
	.fvFratureList .swiper {
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.fvFratureList .swiper:not(.swiper-initialized) {
		opacity: 0;
	}

	.fvFratureList .swiper-slide {
		/* text-align: center; */
		/* font-size: 18px; */
		/* height: calc((100% - 30px) / 2) !important; */
		/* height: max-content; */

		/* Center slide text vertically */
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center; */
		margin-top: 0!important;
		margin-bottom: 4rem;
	}
	
	.fvFratureList .swiper-slide img{
		object-fit: contain;
		aspect-ratio: 1;
		max-width: 180px !important;
	}
	.fvFratureList .swiper-grid-column >.swiper-wrapper{
		/* justify-content: space-between; */
		flex-direction: inherit;
	}
	.fvFratureList .swiper-button-next,
	.fvFratureList .swiper-rtl .swiper-button-prev{
		right: 0;
	}
	.fvFratureList .swiper-button-prev,
	.fvFratureList .swiper-rtl .swiper-button-next {
		left: 0;
	}

}

/* 
.fvFratureList{
	width: 46.66666%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.cardUnit-fvFratureList{
	display: flex;
}

.fvFratureList .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #ccc;
	height: calc((100% - 30px) / 2) !important;

	Center slide text vertically
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
} 
*/
.featureItemList{
	width: 100%;
	margin-top: 4rem;
}
.featureItemList .article__content-wrapper{
	gap:4rem 0;
	flex-direction: column;
}
.featureItemList .article__content-wrapper .article__content-inner{
	width: 100%;
}
.featureItemList .article__content-wrapper .article__content-inner + .article__content-inner{
	margin-top: 0;
}

.grid-featureList{
	display: grid;
    -ms-grid-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 2rem;
}


/* ===============================================
  * RECOMMENDED *
=============================================== */
.recommeend{
	position: relative;
}
.recommeend__inner{
	width: 100%;
	/* max-width: var(--container-default); */
	max-width: 138.8rem;
	padding: 0 2rem;
	margin: 7rem auto 0;
	position: relative;
}
.swiper-container-recommeendList {
		width: 100%;
		max-width: var(--container-default);
    overflow-x: hidden;
		/* position: relative; */
    /* padding: 0 1.5rem 2rem; */
		padding: 0 2rem 2rem;
    margin: 3rem auto 0;
}
.swiper-container-recommeendList .swiper-wrapper{
	/* position: relative; */
	/* z-index: 2; */
	width: 100%;
	/* max-width: var(--container-default); */
}
/* .unit-swiperBtn{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 138.8rem;
	padding: 0 2rem;
	margin: auto;
} */

.swiper-container-recommeendList .swiper-container-horizontal > .swiper-scrollbar,
.swiper-container-recommeendList .swiper-scrollbar{
	display: none;
}
/* ===============================================
  * CATEGORUICON *
=============================================== */
.contents-CategoryList{
	margin-top: 7rem;
}
.contents-CategoryList__inner{
	width: 100%;
	max-width: var(--container-default);
	padding: 0 2rem;
	margin: 0 auto;
}
/* ===============================================
  * STAFFCLIP *
=============================================== */
.staffClip{
	max-width: 1200px;
	margin: 7rem auto 0;
}
.staffClip_inner{
	width: 100%;
	max-width: var(--container-default);
	padding: 0 2rem;
	margin: 0 auto;
}
.staffClip-fv img{
	height: auto;
}

.staffClip__txt {
	text-align: center;
	font-size: 14px;
	margin-bottom: 1rem;
}

.staffClip__contens {
	margin-top: 1rem;
}
.staffClip__contens__list,
.staffClip__contens__list__brand-list {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.staffClip__contens__list__brand {
  width: 24%;
	border : solid 1px #ddd;
}
.staffClip__contens__list__brand__wrap {
	padding: 0.5rem;
}
.staffClip__contens__list__brand-logo {
	margin-bottom: 0.5rem;
}
.staffClip__contens__list__brand-list__img {
	width: 49%;
}

/* ===============================================
  * RANKINGLIST *
=============================================== */
.rankingList{
	background: var(--color-bg-lighthouse);
	padding: 7rem 0 8rem;
	margin: 7rem auto 0;
}
.rankingList__inner{
	width: 100%;
	max-width: var(--container-default);
	padding: 0 2rem;
	margin: 0 auto;
}

.select_menu {
	padding: 0 2rem;
	cursor: pointer;
	font-size: 1.6rem;
	outline: none;
	width: 36rem;
	height: 5rem;
	border: 1px solid var(--color-font);
	display: block;
	background: #fff;
	border-radius: 2em;
	margin: 2rem auto 0;
}
.select_menu_container {
	width: 36rem;
	height: 5rem;
	margin: 0 auto 3rem;
	position: relative;
}

.select_menu_container::after {
	content: "";
	display: block;
	position: absolute;
	right: 3rem;
	top: 0;
	bottom: 0;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.461%22%20height%3D%227.547%22%20viewBox%3D%220%200%2013.461%207.547%22%3E%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_5%22%20data-name%3D%22%E5%90%88%E4%BD%93%205%22%20d%3D%22M2798.139%2C857.941a.984.984%2C0%2C0%2C1-.866-.274l-5.575-5.576a.985.985%2C0%2C0%2C1%2C1.393-1.394l5.049%2C5.048%2C5.048-5.048a.986.986%2C0%2C1%2C1%2C1.394%2C1.394l-5.576%2C5.576a.986.986%2C0%2C0%2C1-.866.274Z%22%20transform%3D%22translate(-2791.409%20-850.408)%22%2F%3E%3C%2Fsvg%3E');
	width: 1.346rem;
	height: 0.755rem;
	margin: auto;
	background-repeat: no-repeat;
	background-size: 100%;
}
.panel .panel__ranking {
	display: none;
	opacity: 0;
}
.panel .button-ranking {
	display: none;
}
.panel.is-show .panel__ranking {
	display: block;
	opacity: 1;
}
.panel.is-show .button-ranking {
	display: flex;
	/* opacity: 1; */
}
.panel.is-show .panel__ranking {
	animation-duration: 1s;
	animation-name: fade-in;
}
.card-rankingItem {
	background: #fff;
	border-radius: 5px;
	filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.1));
	padding: 1.2rem 1.2rem 1.8rem;
}

/* ===============================================
  * CATALOG *
=============================================== */
.catalog {
	position: relative;
}

.catalog__inner {
	width: 100%;
	/* max-width: var(--container-default); */
	max-width: 138.8rem;
	padding: 0 2rem;
	margin: 7rem auto 0;
	position: relative;
}

.swiper-container-catalogList {
	width: 100%;
	max-width: var(--container-default);
	overflow-x: hidden;
	/* position: relative; */
	/* padding: 0 1.5rem 2rem; */
	padding: 0 2rem;
	margin: 3rem auto 0;
}

.swiper-container-catalogList .swiper-wrapper {
	/* position: relative; */
	/* z-index: 2; */
	width: 100%;
	/* max-width: var(--container-default); */
}
.swiper-container-catalogList img {
	width: 100%;
	height: auto;
	display: block;
}
.catalog .swiper-button-next,
.catalog .swiper-button-prev{
	top: calc(50% + 3rem);
}
.btn-catalogShowBox{
	display: none;
}
/* ===============================================
  * HISTORY *
=============================================== */
.historyList {
	background: var(--color-bg-lighthouse);
	padding: 7rem 0 8rem;
	margin: 7rem auto 0;
}

.historyList__inner {
	width: 100%;
	/* max-width: var(--container-default); */
	max-width: 138rem;
	position: relative;
	padding: 0 2rem;
	margin: 0 auto;
}

.swiper-container-historyList{
	overflow-x: hidden;
	max-width: var(--container-default);
	margin: 0 auto;
}
/* .card-historyList{
	width: 15%;
} */
/* @media (min-width: 768px) {
	.card-historyList:nth-child(n + 7){
		display: none;
	}
} */
.historyList img{
	object-fit: contain;
    aspect-ratio: 1;
}
.historyList .product__info--price .product__item--basepric{
	width: auto;
}
.product__info--price.salaPrice .product__item--baseprice,
.product__info--price.salaPrice .product__item--taxinprice{
	/* width: max-content; */
	max-width: 100%;
}
.swiper-container-historyList .swiper-button-next,
.swiper-container-historyList .swiper-button-prev {
    top: calc(50% - 3.5rem);
}
/* ===============================================
  * ARTICLE *
=============================================== */
.article__inner {
	width: 100%;
	max-width: 124rem;
	padding: 0 2rem;
	margin: 7rem auto 0;
}

.swiper-container-articleList {
	width: 100%;
	max-width: var(--container-default);
	padding: 0 0 2rem;
	margin: 3rem auto 0;
}
.card-articleList {
	width: 31.66666%;
}
.card-articleList > a{
	filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.1));
	display: block;
}

.card-articleList .img-icatch img {
	border-radius: 8px 8px 0 0;
}

.card-articleList .articleList__text {
	padding: 2rem;
	background: #fff;
	border-radius: 0 0 8px 8px;
}

.articleList__text-date {
	font-size: 1.6rem;
	line-height: 1;
	color: #888888;
	margin-bottom: 0.75rem;
}

.articleList__text-sentence {
	font-size: 1.6rem;
	line-height: 1.5;
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow-y: hidden;
}
/* ===============================================
  * SERVICE BNRAREA *
=============================================== */
.serviceBnr{}
.serviceBnr__inner{
	width: 100%;
	max-width: 124rem;
	padding: 0 2rem;
	margin: 7rem auto 0;
}
.cardUnit-serviceBnr{
	display: flex;
	align-items: center;
	justify-content: center;
	/* gap:0 1%; */
	/* gap:0 1.81818%; */
	gap:0 1.5%;
	margin-top: 3rem;
}
.card-serviceBnr{
	/* width: 19.16666%; */
	/* width: 23.63636%; */
	width: 18.8333%;
}
/* ===============================================
  * BNRAREA *
=============================================== */
.bnrListArea_inner{
	width: 100%;
	max-width: 124rem;
	padding: 0 2rem;
	margin: 0 auto;
}
[data-bnrType="pr"] .bnrArea__inner{
	margin-top: 3rem;
}
.bnrArea__inner{
	margin: 7rem auto 0;
}
.cardUnit-bnrList{
	flex-wrap: wrap;
	gap: 2rem 1.66666%;
	margin-top: 2rem;
}
.cardUnit-bnrList li{
	width: 49.16666%;
}
.bnrListArea_notice{
	font-size: 1.4rem;
	line-height: 1.6;
	margin-top: 1rem;
}
.bnrListArea_notice p{
	text-indent: -1.4rem;
	padding-left: 1.4rem;
}
/* ===============================================
  * INFORMATION *
=============================================== */
.information__inner{
	width: 100%;
	max-width: 84rem;
	padding: 0 2rem;
	margin: 7rem auto 0;
}

.cardUnit-information{
	margin-top: 3rem;
}
.card-information{
	border-bottom: 2px solid #EEEEEE;
}
.card-information:first-child{
	border-top: 2px solid #EEEEEE;
}
.card-information > dl > dt > a{
	display: block;
	padding: 2rem 2rem 1.4rem;
} 
.information__meta{
	display: flex;
	align-items: center;
	gap: 0 1rem;
	font-weight: 400;
	margin-bottom: 1rem;
}
.information__icons{
	display: flex;
	align-items: center;
	gap: 0 5px;
}

.card--infoIcon {
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
	border-radius: 4px;
	padding: 0 6px;
}
.infoIcon-campaign{
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.infoIcon-important {
	color: #CC1919;
	border: 1px solid #CC1919;
}
.information__date{
	font-size: 1.4rem;
	line-height: 1;
	color: #888888;
}
.information__ttl{
	font-size: 1.4rem;
	line-height: 1.6;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.information__detail{
	display: block;
	padding: 2rem 2rem 1.4rem;
}
.information__content,
.btn-information--more{
	display: none;
}




@media (max-width: 1340px) {
	.recommeend__inner,
	.historyList__inner {
		max-width: var(--container-default);
	}
	.swiper-container-recommeendList {
		max-width: var(--container-fluid);
		padding: 0;
	}
}












@media (min-width: 768px) {
	/* PC & Tablet */
	/* ===============================================
		* FEATURE LIST *
	=============================================== */
	/* ===============================================
		*  RANKING *
	=============================================== */
	/* .cardUnit-rankingContents{
		display: flex;
		flex-wrap: wrap;
		gap:2rem 1.35416%;
	} */
	.cardUnit-rankingContents {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		/* grid-template-rows: 1fr 1fr; */
		gap: 2rem 1.35416%;
		grid-auto-flow: row;
	}


	.gridItem-1 {
		grid-area: 1 / 1 / 2 / 2;
	}

	.gridItem-2 {
		grid-area: 1 / 2 / 2 / 3;
	}

	.gridItem-3 {
		grid-area: 1 / 3 / 2 / 4;
	}

	.gridItem-4 {
		grid-area: 1 / 4 / 2 / 5;
	}

	.gridItem-5 {
		grid-area: 1 / 5 / 2 / 6;
	}

	.gridItem-6 {
		grid-area: 2 / 1 / 3 / 2;
	}

	.gridItem-7 {
		grid-area: 2 / 2 / 3 / 3;
	}

	.gridItem-8 {
		grid-area: 2 / 3 / 3 / 4;
	}

	.gridItem-9 {
		grid-area: 2 / 4 / 3 / 5;
	}

	.gridItem-10 {
		grid-area: 2 / 5 / 3 / 6;
	}
	/* .card-rankingItem{
		width: 18.91666%;
	} */
	.rankingContents .unit-swiperBtn{
		display: none;
	}
	/* ===============================================
		* ARTICLE *
	=============================================== */
	.cardUnit-articleList {
		display: flex;
		gap: 0 2.5%;
	}
	
	/* ===============================================
		* HISTORYLIST *
	=============================================== */
	.cardUnit-historyList {
		/* display: flex;
		flex-wrap: wrap;
		gap: 2rem 2%; */
		margin-top: 3rem;
	}
	
	/* スワイパー共通 */
	/* .historyList .unit-swiperBtn, */
	.article .unit-swiperBtn,
	.swiper-scrollbar {
		display: none;
	}

}


@media (max-width: 767px) {
	/* ===============================================
	*  共通 swiperのスクロールバー調整 *
	=============================================== */
	.home .swiper-horizontal >.swiper-scrollbar,
	.home .swiper-scrollbar.swiper-scrollbar-horizontal{
		left: 0;
		right: 0;
		margin: auto;
		width: calc(100% - 3rem);
	}
	.home__inner {
		margin: 0 auto 3rem;
	}
	/* ランキング表示する時に元に戻す。
	[data-links="anchor"]{
		--headerHeight:4rem;
		padding-top: var(--headerHeight);
		margin-top: calc(-1 * var(--headerHeight));
	} */
	/* ===============================================
	* キーワードリスト *
	=============================================== */
	/* 非表示です */
	/* ===============================================
	* 注意情報 *
	=============================================== */
	.alartList{
		width: var(--container-fluid);
		max-width: inherit;
		padding: 1rem 1.5rem;
		margin: 0 auto;
	}
	.alart__contents{
		font-size: 1.6rem;
		line-height: 1;
		font-weight: 500;
	}
	.alart__contents.alart__contents-icon::before{
		background-size: 100%;
	}
	/* ===============================================
	* FVあたりのコンテンツ *
	=============================================== */
	/* 1枚バナー */
	.features{
		/* margin-top: 1rem; */
		margin-top: 0;
	}
	.features__inner{
		width: 100%;
		width: var(--container-fluid);
		display: inline;
		padding: 0;
		margin: 0 auto;
	}
	.FeatureBnr{
		width: 100%;
	}
	.FeatureBnr img{
		object-fit: inherit;
		height: inherit;
	}
	.mvttl{
		font-size: 1.8rem;
		padding: 0 1.5rem;
		line-height: 1.4;
	}
	/* 送料無料バナー(PC追従 SP置き) */
	.webLimitedBnr{
		position: static;
		margin-top: 2rem;
	}
	.remove-button{
		display: none;
	}
	.webLimitedBnr-bnr{
		width: 100%;
	}
	/* フューチャーリスト コンテンツ */
	.featureItemList{
		width: 100%;
		padding: 0 1.5rem;
		margin-top: 5rem;
	}
	.featureList-top__inner{
		padding: 1.5rem;
	}
	.featureItemList__contents{
		margin-top: 2rem;
	}
	.article__tab-wrapper {
		border-bottom: solid 4px var(--color-secondary);
	}
	.article__tab-list {
		display: flex;
		justify-content: center;
		gap: 0 0.5rem;
		padding: 0 1rem;
	}
	.article__tab-list-item {
		-webkit-user-select: none;
		-moz-user-select: none;
		position: relative;
		width: 17.5rem;
		border-radius: var(--border-radius-tab);
		background-color: #F2F2F2;
		color: #888888;
		transition: background var(--transitionDuration-default) linear;
				user-select: none;
	}
	.article__tab-list-item::before {
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: scaleY(1);
		transform-origin: bottom;
		border: solid 2px var(--color-primary);
		border-bottom: none;
		border-radius: var(--border-radius-tab);
		background-color: transparent;
		content: "";
		opacity: 0;
		transition: opacity var(--transitionDuration-default) linear, transform var(--transitionDuration-default) linear;
	}
	.article__tab-list-item button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 1.5rem 0 1.1rem;
		font-weight: 600;
		font-size: 1.8rem;
		line-height: 1;
	}
	.grid-featureList{
		-ms-grid-columns: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 1rem;
	}

	.featureItemList .article__content-wrapper{
		gap:2rem 0;
	}
	/* 記事内のスタイル */
	.featureList-top__inner .swiper-container-featureList{
		padding: 0 1.5rem 2rem;
	}

	/* 追加 おすすめ(goo searchが入った場合)*/
	.swiper-container-fvFratureList{
		padding: 0 1.5rem 2rem;
    	margin: 3rem auto 0;
	}
	.fvFratureList .swiper-slide img{
		object-fit: contain;
		aspect-ratio: 1;
	}
	/* ===============================================
	* RECOMMENDED *
	=============================================== */
	.recommeend__inner{
		width: 100%;
		max-width: var(--container-fluid);
		padding: 0 0;
		/* margin: 4rem auto 0; */
		margin: 3rem auto 0;
	}
	.swiper-container-recommeendList {
		padding: 0 1.5rem 2rem;
		/* margin: 3rem auto 0; */
		margin: 1.5rem auto 0;
	}
	.unit-swiperBtn{
		position: static;
		max-width: inherit;
		padding: 0 1rem;
		margin: auto;
	}
	
	.swiper-container-recommeendList .swiper-container-horizontal > .swiper-scrollbar,
	.swiper-container-recommeendList .swiper-scrollbar{
		display: block;
	}
	/* ===============================================
		* CATEGORUICON *
	=============================================== */
	.contents-CategoryList{
		/* margin-top: 4.5rem; */
		margin-top: 3rem;
	}
	.contents-CategoryList__inner{
		padding: 0 1.5rem;
	}
	.contents-CategoryList .cardUnit-categoryIcon{
		margin-top: 1.5rem;
	}
	/* ===============================================
	* STAFFCLIP *
	=============================================== */
	.staffClip{
		margin-top: 3rem;
	}
	.staffClip_inner{
		padding: 0 1.5rem;
	}
	.staffClip__txt {
		font-size: 7px;
	}
	.staffClip__contens__list {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 10px;
	}
	.staffClip__contens__list__brand {
		width: 48%;
	}
	/* ===============================================
		* RANKING *
	=============================================== */
	/* .historyList {
		padding: 4rem 0 5rem;
		margin: 0 auto 4.3rem;
	}

	.historyList__inner {
		max-width: var(--container-fluid);
		padding: 0;
		margin: 0 auto;
		position: relative;
	} */
	.rankingList{
		/* padding: 5rem 0;
		margin: 5rem auto 0; */
		/* padding: 3rem 0; */
		padding: 2rem 0 3rem;
		margin: 3rem auto 0;
	}
	.rankingList__inner{
		width: 100%;
		max-width: var(--container-default);
		padding: 0;
		margin: 0 auto;
	}

	.select_menu {
		padding: 0 1.5rem;
		cursor: auto;
		font-size: 1.3rem;
		width: 34.5rem;
	}
	.select_menu_container {
		width: 34.5rem;
		height: 5rem;
		margin: 0 auto 2rem;
	}

	.select_menu_container::after {
		right: 3rem;
		top: 0;
		bottom: 0;
		width: 1.3655rem;
		height: 0.7655rem;
	}
	.rankingContents{
		position: relative;
		padding: 0;
		margin: 0 auto;
	}
	.swiper-container-rankingContents{
		overflow-x: hidden;
		padding: 0 1.5rem 2rem;
		margin: 3rem auto 0;
	}
	.cardUnit-rankingContents {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0px;
		grid-auto-flow: row;
		grid-template-areas:
			"gridItem-01 gridItem-02 gridItem-03 gridItem-04 gridItem-05 . . . . .";
	}
	
	.gridItem-01 {
		grid-area: gridItem-01;
	}

	.gridItem-02 {
		grid-area: gridItem-02;
	}

	.gridItem-03 {
		grid-area: gridItem-03;
	}

	.gridItem-04 {
		grid-area: gridItem-04;
	}

	.gridItem-05 {
		grid-area: gridItem-05;
	}
	/* ===============================================
	  * CATALOG *
	=============================================== */
	.catalog {
		position: static;
	}

	.catalog__inner {
		max-width: var(--container-fluid);
		padding: 0 1.5rem;
		/* margin: 7rem auto 0; */
		margin: 3rem auto 0;
		position: static;
	}

	.swiper-container-catalogList {
		position: relative;
		width: 100%;
		max-width: var(--container-fluid);
		overflow-x: inherit;
		padding: 0;
		/* margin: 1.5rem auto 0; */
		margin: 1rem auto 3rem;
	}

	.swiper-container-catalogList .swiper-wrapper {
		/* position: relative; */
		/* z-index: 2; */
		width: 100%;
		/* max-width: var(--container-default); */
	}

	.swiper-container-catalogList img {
		width: 100%;
		height: auto;
		display: block;
	}

	.catalog .unit-swiperBtn {
		display: none;
	}

	.cardUnit-catalogList {
		flex-wrap: wrap;
		/* gap: 0 1rem; */
		gap: 0 2.89855%;
		transition: transform .5s;
		margin: 0 auto;
	}

	.card-catalogList {
		/* width: 16.75rem; */
		width: 48.55072%;
		margin-top: 1rem;
	}

	.btn-catalogShowBox {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
		z-index: 1;
		/* background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); */
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 40%);
		/* padding-top: 10rem; */
		/* height: 16.75rem; */
		height: 10.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-catalogShowBox.open {
		position: static;
		padding-top: 0;
		display: block;
		padding-top: 3rem;
		height: auto;
		/* margin-bottom: 6.5rem; */
		margin-bottom: 3rem;
	}

	.btn-catalogShowBox .btn--text-more {
		position: relative;
		height: 3.4rem;
	}

	.btn-catalogShowBox p {
		margin: 0 auto;
	}

	.btn-catalogShowBox .btn--text-more::before {
		display: flex;
		align-items: center;
		justify-content: center;
		content: 'もっと見る';
		/* width: 100%; */
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		/* right: 0; */
		/* bottom: 0; */
		/* margin: auto; */
	}

	.btn-catalogShowBox.open .btn--text-more::before {
		content: '閉じる';
	}
	.btn-catalogShowBox .btn--text-more::after{
		background: transparent url("/Contents/ImagesPkg/common/rect_more_more.svg") no-repeat center;
		background-size: 100%;
		width: 1.245rem;
		height: 2.221rem;
	}
	.btn-catalogShowBox.open .btn--text-more::after {
		background: transparent url("/Contents/ImagesPkg/common/rect_more_close.svg") no-repeat center;
		background-size: 100%;
		width: 1.245rem;
		height: 2.221rem;
	}
	/* ===============================================
		* HISTORY *
	=============================================== */
	.historyList {
		/* padding: 4rem 0 5rem;
		margin: 5rem auto 0; */
		padding: 3rem 0 1rem;
    	margin: 0 auto 3rem;
	}

	.historyList__inner {
		max-width: var(--container-fluid);
		padding: 0;
		margin: 0 auto;
		position: relative;
	}
	.swiper-container-historyList{
		overflow-x: hidden;
		padding: 0 1.5rem 2rem;
		/* margin: 3rem auto 0; */
		margin: 1.5rem auto 0;
	}
	.historyList .product__info--price .product__item--baseprice {
		/* width: auto; */
		font-size: 1.6rem;
		line-height: 1.2;
		display: flex;
		flex-wrap: wrap;
		margin-top: 1.3rem;
	}
	.historyList .product__info--price .product__item--taxinprice{
		margin-top: 0.2rem;
	}
	/* ===============================================
  		* ARTICLE *
	=============================================== */
	.article__inner {
		/* max-width: var(--container-default); */
		max-width: var(--container-fluid);
		padding: 0;
		position: relative;
		/* margin: 7rem auto 0; */
		margin: 0 auto;
	}
	.swiper-container-articleList{
		max-width: var(--container-fluid);
		overflow-x: hidden;
		padding: 0 1.5rem 2rem;
		/* margin: 3rem auto 0; */
		margin: 1.5rem auto 0;
	}
	.card-articleList{
		background: #fff;
		display: flex;
		height: auto;
		border-radius: 1rem;
		filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.1))
	}
	.card-articleList > a{
		filter: none;
	}
	.card-articleList figure{
		height: 100%;
	}
	.card-articleList .img-icatch{
		background: none;
	}
	.card-articleList .img-icatch img{
		border-radius: 1rem 1rem 0 0;
	}
	.card-articleList .articleList__text{
		padding: 1rem 1rem 1.5rem;
		border-radius: 0;
		background: none;
	}
	.articleList__text-date{
		font-size: 1.3rem;
		margin-bottom: 0.75rem;
	}
	.articleList__text-sentence{
		font-size: 1.4rem;
		-webkit-line-clamp: 3;
	}
	
	/* ===============================================
		* SERVICE BNRAREA *
	=============================================== */
	.serviceBnr{}
	.serviceBnr__inner{
		width: 100%;
		max-width: inherit;
		padding: 0 1.5rem;
		/* margin: 7rem auto 0; */
		margin: 3rem auto 0;
	}
	.cardUnit-serviceBnr{
		flex-direction: column;
		gap:1rem 0;
		/* margin-top: 3rem; */
		margin-top: 1.5rem;
	}
	.card-serviceBnr{
		width: 100%;
	}

	/* ===============================================
		* BNRAREA *
	=============================================== */
	.bnrListArea_inner{
		max-width: inherit;
		padding: 0 1.5rem;
	}
	.bnrArea__inner {
		/* margin: 7rem auto 0; */
		margin: 3rem auto 0;
	}
	[data-bnrType="pr"] .bnrArea__inner {
		margin-top: 2rem;
	}
	.cardUnit-bnrList {
		flex-direction: column;
		gap: 1rem 0;
		margin-top: 1.5rem;
	}
	.cardUnit-bnrList li {
		width: 100%;
	}
	.bnrListArea_notice{
		font-size: 1.2rem;
	}
	.bnrListArea_notice p{
		text-indent: -1.2rem;
		padding-left: 1.2rem;
	}
	/* ===============================================
		* INFORMATION *
	=============================================== */
	.information__inner{
		max-width: inherit;
		margin: 3rem auto 0;
	}
	.cardUnit-information {
		margin-top: 1.5rem;
	}

	/* ===============================================
		* スワイパー共通 *
	=============================================== */
	.article .swiper-button-next,
	.article .swiper-button-prev,
	.historyList .swiper-button-next,
	.historyList .swiper-button-prev{
		top: 50%;
	}
	.historyList .swiper-scrollbar,
	.rankingContents .swiper-scrollbar {
		background: rgba(255, 255, 255, 1);
	}
		



}

@media (max-width: 450px) {
	/* SP only */
}

@media (hover: hover) and (pointer: fine) {
	.cardUnit-keyword > a,
	.remove-button,
	.swiper-button-next,
	.swiper-button-prev,
	.card-categoryIcon::before{
		transition: all 0.6s;
	}
	.cardUnit-keyword > a:hover{
		opacity: 1;
		background: var(--color-primary);
		color: #fff;
	}
	.swiper-button-next:hover,
	.swiper-button-prev:hover,
	.remove-button:hover{
		opacity: 0.6;
	}
	.card-categoryIcon:hover{
		opacity: 1;
	}
	.card-categoryIcon:hover::before{
		filter: drop-shadow(0px 0px 6px rgba(32, 175, 201, 0.6));
	}

}


/* ==========================================
  Awoo調整
=========================================== */
/* タグ */
@media screen and (max-width: 767px) {
  .awoo-keyword-popular-tags:has(.popular-tags) {
    margin-top: 6rem;
  }
  .popular-tags-wrapper {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .popular-tags-wrapper .awoo-tag-wrapper {
    width: 100%;
    gap: 0.8rem !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .popular-tags-title {
    color: var(--color-font) !important;
    font-weight: 600;
    font-size: 2.4rem !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
  }
}
@media screen and (min-width: 768px) {
  .awoo-keyword-popular-tags:has(.popular-tags) {
    margin-top: 6rem;
  }
  .popular-tags-list-container {
    width: 100%;
    max-width: var(--container-default);
    padding: 0 2rem;
    margin: 0 auto;
  }
  .popular-tags-wrapper {
    padding: 4rem 0 6rem !important;
  }
  .popular-tags-wrapper .awoo-tag-wrapper {
    gap: 1rem !important;
  }
  .popular-tags-title {
    color: var(--color-font) !important;
    font-weight: 600;
    font-size: 3rem !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
  }
  .awoo-product-area.awoo-product-top .related-product-list .related-product:nth-child(n+11) {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .awoo-product-area.awoo-product-top:has(.rec) {
    margin-top: 4rem !important;
    padding: 2rem 0 4rem !important;
  }
}
@media screen and (min-width: 768px) {
  .awoo-product-area.awoo-product-top:has(.rec) {
    margin-top: 5rem !important;
    padding: 4rem 0 !important;
  }
}

/* ==========================================
  UI改善：SP検索窓常時表示
=========================================== */
#dvSearchBox {
  width: 34.5rem;
  margin: 5px auto;
  border: 1px solid #CFCFCF;
  display: none;
}

@media (max-width:767px) {
  #dvSearchBox {
    display: flex;
  }
}