@charset "UTF-8";
/*!
 * くらしの雑貨特集 (shop.g6--shopping--home_kitchen__html.htm)
 * PC / SP 共通スタイル
 *
 * 読み込み元: g6/shopping/home_kitchen.html (PC) / smart/shopping/home_kitchen.html (SP)
 * 本体マークアップ: smart/shopping/include/inc_home_kitchen.jsp
 *
 * 色・角丸は css/design-tokens.css の CSS 変数を参照する。
 * 特集固有のパレット (#73b496 / #508c78 / #eb9664 など) は意図的な一点物のため生値のまま。
 */

.item__list--offer{
	background: var(--surface-basic);
	margin: 10px 0;
}
.feature{
  margin: 0 auto;
  height: auto;
  background-image: url("/g6/feature/image/sp_250109_kurashi_bg_img.jpg");
}
/*画像top imegeアニメーション*/
.top-image__wrap{
  position: relative;
  overflow: hidden;
  width: 100%;
}
.top-image__title{
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
}
.top-image__carousel{
  overflow: hidden;
  width: 100%;
  position: relative;
}
.top-image__carousel_item{
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: anime 24s 0s infinite;
  animation: anime 24s 0s infinite;
}
.top-image__carousel_item:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.top-image__carousel_item:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
.top-image__carousel_item:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}
@keyframes anime {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% { opacity: 0 }
}
/*安心宣言*/
.feature__lead{
	margin-bottom: 0px;
}
.feature__lead_wrap{
  background-image: url("/g6/feature/image/sp_250109_kurashi_safety_bg.png");
	text-align: right;
	background-position: bottom;
}
.feature__lead_link{
	color: var(--text-neutral-primary) !important;
	text-decoration: underline !important;
	padding: 10px;
	margin-right: 0px;
}
/*注記*/
.offer-item__caution{
  font-size: small;
  color: var(--text-neutral-primary);
  line-height: 1.8;
}
/*コンテンツ周り*/
.offer-item__head{
	background: inherit;
}
.feature__cart__push{
	color: var(--text-neutral-primary);
}
.offer-item__appeal--accent{
	flex-direction: column-reverse;
}
.offer-item__appeal--accent__img{
	margin-left: 0;
	width: 100%;
}
.layout-compact .offer-item__appeal--accent__img {
	margin-left: 0;
	width: 90%;
}
.offer-item__appeal--accent__desc{
	margin: 20px 0;
}
.offer-item__appeal--accent__title{
	text-align: center;
}
.offer-item__appeal__title span{
	color: #508c78;
}
.offer-item__appeal__title:after, .offer-item__appeal__title:before{
	background: #508c78;
}
.offer-item__contents{
	margin: 40px 10px;
}
.shouhintableT{
	margin: 0 !important;
}
.offer-item__buyer__desc{
	background: inherit;
	margin-left: 0;
}
.offer-item__buyer__desc:after{
	display: none;
}
/*追従ナビゲーション*/
.navMagnet{
  position: fixed;
  top: -100px;
  overflow-x: scroll;
  background: #73b496;
  z-index: 3;
  transition: top 0.4s;
}
.navMagnet .navList{
  display: flex;
}
.navMagnet .navList li{
  position: relative;
  white-space: nowrap;
  font-weight: 500;
}
.navMagnet .navList li.active{
  font-weight: bold;
  border-bottom: 3px solid var(--object-inverse);
}
.navMagnet .navList li:not(:last-child)::before{
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 16px;
  background: var(--object-inverse);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.navMagnet .navList li a{
  display: inline-block;
  padding: 14px;
  font-family: 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", serif;
  color: var(--text-inverse);
  font-size: 16px;
  transition: all 0.3s;
}
@media (hover: hover) {
	.navMagnet .navList li a:hover{
		opacity: 0.6;
		text-decoration: none;
	}
}
/*ナビゲーション*/
.offer__nav__list{
	background: #73b496;
}
.offer__nav__link{
	padding: 20px 0px;
	display: flex;
	align-items: center;
}
.offer__nav__link__num,
.offer__nav__link__textTitle{
	font-size: 16px;
	color: var(--text-inverse);
}
.offer__nav__link:before{
	background: var(--object-inverse);
}
.offer__nav__link:after{
	border-right: 3px solid var(--object-inverse);
  border-bottom: 3px solid var(--object-inverse);
}
/*スライド*/
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev{
  width: 45px;
  height: 45px;
	background-image: none;
	background: rgba(51, 51, 51, 0.2);
	border-radius: 50%;
}
.swiper-container .swiper-button-next{
  right: 10px;
}
.swiper-container .swiper-button-prev{
  left: 10px;
}
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after{
	position: absolute;
  display: block;
	content: "";
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 2px;
}
.swiper-container .swiper-button-next::after{
	left: 45%;
	border-top: 2px solid var(--object-inverse);
	border-right: 2px solid var(--object-inverse);
	transform: translate(-54%,-50%) rotate(45deg);
}
.swiper-container .swiper-button-prev::after{
	left: 55%;
	border-bottom: 2px solid var(--object-inverse);
	border-right: 2px solid var(--object-inverse);
	transform: translate(-54%,-50%) rotate(135deg);
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
	display: none;
}
.swiper-container .swiper-pagination{
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	width: auto;
	padding: 0 10px;
	line-height: 1.8;
	font-size: 12px;
	background: rgba(51, 51, 51, 0.2);
	border-radius: 5px;
	color: var(--text-inverse);
}
.swiper-container .swiper-pagination span{
	color: var(--text-inverse);
}
/* お客様の声 */
.c-voice{
	border-radius: 10px !important;
	background-color: rgba(255, 255, 255, 0.6) !important;
}
.c-voice__border{
	border: 1px solid #73b496 !important;
	border-radius: 10px !important;
}
.c-voice__user-name{
  color: #508c78;
}
.c-voice.--staff .c-voice__border::before{
	border-color: #73b496 transparent transparent !important;
}
.c-voice.--staff .c-voice__border::after{
	border-color: var(--object-inverse) transparent transparent !important;
}
/* ホーム&キッチンのアンケート */
.home_kitchen__request {
	margin-bottom: 40px;
	padding: 20px 20px 50px;
	background-color: #71B397;
}
.home_kitchen__request__title {
	margin-bottom: 10px;
	line-height: 1.3;
	text-align: center;
	color: var(--text-inverse);
	font-size: 1.833rem;
}
.home_kitchen__request__lead {
	margin-bottom: 20px;
	line-height: 1.6;
	text-align: center;
	color: var(--text-inverse);
}
.home_kitchen__request__form__input--textarea, .home_kitchen__request input[type=text].home_kitchen__request__form__input--text {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	margin: 35px 0 0;
	padding: 13px 10px 10px;
	width: 100%;
	font-size: 13px;
	line-height: 1;
	background: var(--surface-basic);
	border-radius: var(--radius-small);
	border: none;
}
.home_kitchen__request__form__input--textarea {
  min-height: 5em;
}
.home_kitchen__request__form__button{
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	padding: 0;
	width: 280px;
	font-size: 1.416rem;
	font-weight: 700;
	text-align: center;
	line-height: 50px;
	color: var(--text-inverse);
	background: #eb9664;
	border: 1px solid #eb9664;
	border-radius: 10px;
	margin: 50px 0 0;
	width: 100%;
	cursor: pointer;
}
.offer-item__sale-push{
	position: relative;
	width: 50%;
	background: #73b496;
	color: var(--text-inverse);
	margin: -30px auto 0;
	text-align: center;
	padding: 15px 0;
	font-size: 20px;
	font-weight: bold;
}
.wappen{
	position: relative;
}
.wappen::after{
	position: absolute;
	content: "";
	display: block;
	top: 15px;
	left: 15px;
	width: 124px;
	height: 138px;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}
.wappen--rangking1::after{
	background-image: url("/g6/feature/image/sp_250703_kurashi_wappen_01.png");
}
.wappen--rangking2::after{
	background-image: url("/g6/feature/image/sp_250703_kurashi_wappen_02.png");
}
.wappen--rangking3::after{
	background-image: url("/g6/feature/image/sp_250703_kurashi_wappen_03.png");
}
.wappen--new::after{
	background-image: url("/g6/feature/image/sp_250703_kurashi_wappen_new_balck.png");
	width: 160px;
	height: 96px;
}
.wappen--restock::after{
	background-image: url("/g6/feature/image/icon_restock_orange.png");
	width: 160px;
	height: 96px;
}
.wappen--ninki::after{
	background-image: url("/g6/feature/image/home_wappen_uretemasu.png");
	background-size: cover;
	width: 185px;
	height: 185px;
}
.category_2__caution{
	margin: 0 20px;
}
.feature__bnr{
	padding: 20px 40px 40px;
}
.offer-item__chuki{
	background: var(--surface-basic);
	width: 90%;
	color: #cc0000;
	font-size: 14px;
	line-height: 1.6;
	border: 1px solid #cc0000;
	padding: 16px;
	margin: 0 auto;
	box-sizing: border-box;
}
.close_text {
    text-align: center;
    margin: 60px 30px;
    border: 1px solid #E17E00;
    color: #E17E00;
    border-radius: var(--radius-medium);
    font-size: 1.166rem;
    padding: 20px;
    line-height: 1.6;
}