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

/* contents */
#must-buy-items {
	overflow-x: hidden;
	float: right;
	width: 800px;
	color: #562415;
	font-size: 18px;
    line-height: 160%;
	background: #FFF;	
}
#must-buy-items * {
    box-sizing: border-box;
}
#must-buy-items a {
	text-decoration: none;
}
#must-buy-items .sp {
    display: none !important;
}
#must-buy-items img,
#must-buy-items p {
	border: 0;
	margin: 0;
	vertical-align: top;
}
#must-buy-items h2,h3,h4 {
    margin: 0;
    padding: 0;
}
#must-buy-items dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

/*------ イントロ ------*/
#must-buy-items .intro {
	padding: 60px 40px;
	background: #846151;
	color: #fff;
}

#must-buy-items .intro h3 {
	margin-bottom: 20px;
	font-size: 28px;
}

#must-buy-items .intro p {
	font-size: 18px;
	line-height: 180%;
	letter-spacing: 0.05em;
}

/*------ アイテム紹介（共通パーツ）------*/
#must-buy-items .item ul {
	display: flex;
	align-items: center;
	flex-direction:column;
}

#must-buy-items .item li {
	list-style: none;
	width: 720px;
	margin: 50px auto;
	padding: 0 50px 50px;
	border-radius: 20px;
}

#must-buy-items .item .staff-name {
	display: inline-block;
	position: relative;
	margin-top: -10px;
	margin-left: 140px;
	padding: 10px 30px;
	border: 1px solid #562415;
	border-radius: 25px;
	background-color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

#must-buy-items .item .staff-name::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50px;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color: #562415 transparent transparent;
	translate: -50% 100%;
}

#must-buy-items .item .staff-name::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50px;
	border-style: solid;
	border-width: 17.6px 17.6px 0 0;
	border-color: #ffffff transparent transparent;
	translate: calc(-50% - 0.2px) 100%;
}

#must-buy-items .item .staff-name span {
	color: #cb4837;	
}

#must-buy-items .item .title {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0 0 24px;
}

#must-buy-items .item .title h3 {
	margin-top: 20px;
	margin-left: 20px;
	font-size: 24px;
	font-feature-settings: "palt";
	line-height: 180%;
	letter-spacing: 0.05em;
}

#must-buy-items .item h3 strong {
	font-size: 32px;
}

#must-buy-items .item .contents {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

#must-buy-items .item .contents img {
	margin: -14px 20px 0 -21px;
}

#must-buy-items .item .detail p {
	width: 320px;
	margin-bottom: 25px;
	font-size: 16px;
	line-height: 180%;
}

#must-buy-items .item .btn_detail {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 320px;
	height: 60px;
	color: #fff;
	font-size: 20px;
	border-radius: 30px;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	transition: 0.3s;	
}

#must-buy-items .item .btn_detail::before, .btn_detail::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 30px;
	transform-origin: 100% 50%;
	width: 11px;
	height: 2px;
	background-color: #fff;
	will-change: transform;
	transition: .3s;
}

#must-buy-items .item .btn_detail::before {
	transform: translateY(-50%) rotate(45deg);
}

#must-buy-items .item .btn_detail::after {
	transform: translateY(-50%) rotate(-45deg);
}

#must-buy-items .item .btn_detail:hover::before {
	transform: translate(5px, -50%) rotate(45deg);
}

#must-buy-items .item .btn_detail:hover::after {
	transform: translate(5px, -50%) rotate(-45deg);
}

/*------ アイテム紹介（個別カラー設定）------*/
#must-buy-items li.item01 {
	background: #f5f1e4;
}

#must-buy-items .item01 h3 strong {
	color: #a98552;
}

#must-buy-items .item01 .detail span {
	background-color: #a98552ff;
}

#must-buy-items li.item02 {
	background: #f6eae5;
}

#must-buy-items .item02 h3 strong {
	color: #bf6b60;
}

#must-buy-items .item02 .detail span {
	background-color: #bf6b60;
}

#must-buy-items li.item03 {
	background: #f8ebe1;
}

#must-buy-items .item03 h3 strong {
	color: #b07544;
}

#must-buy-items .item03 .detail span {
	background-color: #b07544;
}

#must-buy-items li.item04 {
	background: #f4edf0;
}

#must-buy-items .item04 h3 strong {
	color: #a06b82;
}

#must-buy-items .item04 .detail span {
	background-color: #a06b82;
}

/*------ その他のおすすめ商品 ------*/
#must-buy-items .recommend h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	margin-bottom: 60px;
	background: #846151;
	color: #fff;
	font-size: 30px;
} 

#must-buy-items .recommend ul {
	display: flex;
	align-items: center;
	flex-direction:column;
	padding-bottom: 20px;
}

#must-buy-items .recommend li {
	list-style: none;
	margin-bottom: 40px;
}