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

/* contents */
#must-buy-items {
	overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
	width: 100%;
    color: #562415;
    font-size: 16px;
    line-height: 160%;
	background: #FFF;
}
#must-buy-items * {
    box-sizing: border-box;
}
#must-buy-items a {
    text-decoration: none;
}
#must-buy-items .pc {
    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: 7.5% 5%;
	background: #846151;
	color: #fff;
}

#must-buy-items .intro h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2.5%;
	font-size: 20px;
	line-height: 150%;
}

#must-buy-items .intro p {
	font-size: 15px;
	line-height: 160%;
	letter-spacing: 0.05em;
	text-align: center;
}

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

#must-buy-items .item li {
	list-style: none;
	width: 90%;
	margin: 8% auto;
	padding: 0 6.25% 6.25%;
	border-radius: 15px;
}

#must-buy-items .item .staff-name {
	display: inline-block;
	position: relative;
	margin-top: -10px;
	margin-left: 35%;
	padding: 10px 20px;
	border: 1px solid #562415;
	border-radius: 25px;
	background-color: #ffffff;
	font-size: 15px;
	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: column;
	justify-content: center;
	margin: -50px 0 3%;
	text-align: center;
}

#must-buy-items .item .title img {
	width: 22%;
	height: auto;
	margin-left: 10%;
}

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

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

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

#must-buy-items .item .contents img {
	margin: 0 auto 3%;
}

#must-buy-items .item .detail p {
	width: 100%;
	margin-bottom: 5%;
	font-size: 15px;
	line-height: 180%;
}

#must-buy-items .item .btn_detail {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	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;
}

#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 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%;
	margin-bottom: 8%;
	padding: 6% 0;
	background: #846151;
	color: #fff;
	font-size: 20px;
} 

#must-buy-items .recommend ul {
	display: flex;
	align-items: center;
	flex-direction:column;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 8%;
}

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