@charset "utf-8";
/* CSS Document */

/****************************
ページ共通
****************************/
html{
	scroll-behavior: smooth;
}
.l-section__inner{
	max-width: 100%;
	width: 100%;
}
#gift{
	line-height: 1.4;
}
#gift img{
	width: 100%;
}
#gift a{
	color: #333;
	transition: 0.3s all;
}
#gift h2{
	display: inline-block;
	position: relative;
	padding-bottom: 7px;
	margin-bottom: 50px;
	font-size: 34px;
	font-weight: 500;
}
#gift h2::before{
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	background: #333;
	width: 50%;
	height: 2px;
	transform: translateX(-50%);
	display: block;
}

#gift section{
	padding: 80px 0 95px;
	text-align: center;
}
#gift .category-list::after,
#budget .budget-list::after,
#gift .topics-list::after{
	display: none;
}

#gift section.header{
	padding: 0;
}
#gift section,
#gift .nav-wrap,
#gift .topics-wrap{
	max-width: 1240px;
	margin: 0 auto;
}
#gift .bg-area{
	background: #f9f6f1;
}
/*フード*/
#gift.gift-food .bg-area{
	background: #fbf6f6;
}

@media screen and (min-width: 600px){
	#gift .sp-only{
		display: none;
	}
}

@media screen and (max-width: 599px){
	.p-special__contents{
		margin-inline: 0;
	}
	#gift .pc-only{
		display: none;
	}
	#gift h2{
		margin-bottom: 25px;
		font-size: 22px;
	}
	#gift section{
		padding: 40px 20px 50px;
	}
}


/****************************
ナビゲーション
****************************/
#gift .nav-area{
	background: #37190a;
}
#gift .nav-wrap{
	display: flex;
}
#gift .nav-wrap .nav-item{
	width: calc(100% / 3);
	border-right: 1px solid #fff;
}
#gift .nav-wrap .nav-item .menu-title{
	font-size: 20px;
	text-align: center;
	color: #fff;
	font-weight: 600;
}
#gift .nav-wrap .nav-item .menu-wrap{
	position: absolute;
	z-index: 10;
	left: 0;
	top: 68px;
	width: 100%;
	background: #fff;
	padding: 10px 15px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0px 4px 11px 2px rgba(69, 69, 69, 0.35);
	transition: 0.3s all;
}
#gift .nav-wrap .nav-item:hover .menu-wrap{
	opacity: 1;
	visibility: visible;
}
#gift .nav-wrap .nav-item .menu-wrap .menu-list:nth-of-type(n+2){
	border-top: 1px solid #3b1e1e;
}
#gift .nav-wrap .nav-item .menu-wrap .menu-list a{
	display: block;
	padding: 11px 25px 11px 10px;
	position: relative;
	color: #37190a;
}
#gift .nav-wrap .nav-item .menu-wrap .menu-list a:hover{
	background: #f7eeea;
	opacity: 1;
	font-weight: 500;
}
#gift .nav-wrap .nav-item .menu-wrap .menu-list a::after{
	position: absolute;
	content: '';
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #3b1e1e;
	border-right: solid 2px #3b1e1e;
	transform: rotate(45deg) translateY(-50%);
	transition: 0.3s all;
}
/*フード*/
#gift.gift-food .nav-area{
	background: #4f1212;
}
#gift.gift-food .nav-wrap .nav-item .menu-wrap .menu-list:nth-of-type(n+2){
	border-top: 1px solid #4f1212;
}
#gift.gift-food .nav-wrap .nav-item .menu-wrap .menu-list a{
	color: #4f1212;
}
#gift.gift-food .nav-wrap .nav-item .menu-wrap .menu-list a:hover{
	background: #fbf2f2;
}
#gift.gift-food .nav-wrap .nav-item .menu-wrap .menu-list a::after{
	border-top: solid 2px #4f1212;
	border-right: solid 2px #4f1212;
}

@media screen and (min-width: 600px){
	#gift .nav-wrap .nav-item{
		position: relative;
    padding: 20px 35px;
		transition: 0.3s all;
	}
	#gift .nav-wrap .nav-item:hover{
		background: #451d09;
	}
	#gift .nav-wrap .nav-item::after{
		position: absolute;
		content: "";
		bottom: 50%;
		right: 20px;
		width: 10px;
		height: 10px;
		border-bottom: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg) translateY(50%);
	}
	#gift .nav-wrap .nav-item:first-of-type{
		border-left: 1px solid #fff;
	}
	/*フード*/
	#gift.gift-food .nav-wrap .nav-item:hover{
		background: #671d1d;
	}
}

@media screen and (max-width: 599px){
	#gift .nav-wrap{
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}
	#gift .nav-wrap .nav-item{
		width: 100%;
	}
	#gift .nav-wrap .nav-item:last-of-type{
		border: none;
	}
	#gift .nav-wrap .nav-item .nav-link{
		padding: 12px 32px;
		display: block;
		font-size: 16px;
		color: #fff;
		font-weight: 600;
		text-align: center;
	}
}

/****************************
カテゴリ
****************************/
#gift .category-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#gift .category-list .category-item{
	width: calc((100% - 30px) / 2);
	position: relative;
}
#gift .category-list .category-item img{
	object-fit: cover;
}
#gift .category-list .category-item .category-title{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	background: #414141b5;
	font-size: 20px;
	color: #fff;
	font-weight: 500;
}

@media screen and (min-width: 600px){
	#gift .category-list .category-item:nth-of-type(n+3){
		width: calc((100% - 60px) / 3);
	}
	#gift .category-list .category-item img{
		max-height: 200px;
	}
	/*ギフト*/
	#gift.gift #oiwai .category-list .category-item:first-of-type img{
		object-position: center 80%;
	}
	#gift.gift #oiwai .category-list .category-item:nth-of-type(2) img{
		object-position: center 90%;
	}
	/*フード*/
	#gift.gift-food #chouji .category-list .category-item:nth-of-type(2) img{
		object-position: center 83%;
	}
}

@media screen and (max-width: 599px){
	#gift .category-list{
		gap: 20px;
	}
	#gift .category-list .category-item{
		width: calc((100% - 20px) / 2);
	}
	#gift .category-list .category-item img{
		aspect-ratio: 1 / 1;
	}
	/*ギフト*/
	#gift.gift #orei .category-list .category-item:nth-of-type(3) img{
		object-position: 32% center;
	}
	#gift.gift #orei .category-list .category-item:last-of-type img{
		object-position: 13% center;
	}
	#gift.gift #oiwai .category-list .category-item:first-of-type img{
		object-position: 78% center;
	}
	#gift.gift #oiwai .category-list .category-item:nth-of-type(2) img{
		object-position: 24% center;
	}
	#gift.gift #oiwai .category-list .category-item:nth-of-type(4) img{
		object-position: 76% center;
	}
	#gift.gift #oiwai .category-list .category-item:last-of-type img{
		object-position: 93% center;
	}
	#gift .category-list .category-item .category-title{
		font-size: 16px;
	}
	/*フード*/
	#gift.gift-food #orei .category-list .category-item:first-of-type img{
		object-position: 31% center;
	}
	#gift.gift-food #oiwai .category-list .category-item:nth-of-type(2) img{
		object-position: 100% center;
	}
}

/****************************
予算
****************************/
#budget .budget-list{
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	max-width: 1100px;
	margin: 0 auto;
}
#budget .budget-list .budget-item{
	width: calc((100% - 50px) / 3);
}
#budget .budget-list .budget-item a{
	display: flex;
	padding: 15px 25px;
	align-items: baseline;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #333;
	border-radius: 8px;
	font-weight: 500;
	font-size: 17px;
}
#budget .budget-list .budget-item a::after{
	position: absolute;
	content: '';
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	border-top: solid 2px;
	border-right: solid 2px;
	transform: rotate(45deg) translateY(-50%);
	color: #333;
}
#budget .budget-list .budget-item a span{
	font-size: 24px;
	margin: 0 3px;
}

@media screen and (min-width: 600px){
	#budget .budget-list .budget-item a:hover{
		background: #333;
		color: #fff;
		opacity: 1;
	}
	#budget .budget-list .budget-item a:hover::after{
		color: #fff;
	}
}

@media screen and (max-width: 599px){
	#budget .budget-list{
		gap: 15px;
	}
	#budget .budget-list .budget-item{
		width: 100%;
	}
	#budget .budget-list .budget-item a{
		padding: 12px 25px;
		font-size: 13px;
	}
	#budget .budget-list .budget-item a span{
		font-size: 18px;
	}
}

/****************************
バナー
****************************/
#gift .topics-wrap{
	padding-top: 50px;
}
#gift .topics-wrap .topics-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
#gift .topics-wrap .topics-list.four-column{
	margin-bottom: 30px;
}
#gift .topics-wrap .topics-list.four-column .topics-item{
	width: calc((100% - 90px) / 4);
}
#gift .topics-wrap .topics-list.two-column .topics-item{
	width: calc((100% - 30px) / 2);
}

@media screen and (max-width: 599px){
	#gift .topics-wrap{
		padding: 20px 20px 0;
	}
	#gift .topics-wrap .topics-list{
		gap: 20px;
	}
	#gift .topics-wrap .topics-list.four-column{
		margin-bottom: 15px;
	}
	#gift .topics-wrap .topics-list.four-column .topics-item{
		width: calc((100% - 15px) / 2);
	}
	#gift .topics-wrap .topics-list.two-column .topics-item{
		width: 100%;
	}
}