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

:root {
  --main-color: #aa8f4c;
  --sub-color1: #ac8320;
  --sub-color2: #f2eadc;
}

.sysItemCategoryForm,.sysItemList{
    display: none;
}

#bestitem_wrap {
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #2e2e2e;
	max-width: 800px;
	text-align: center;
	margin: 0 auto;
	font-size: clamp(1.58rem, 0.352rem + 2.56vw, 2.4rem);
}

#bestitem_wrap .left {
	text-align: left;
	line-height: 1.8;
}

#bestitem_wrap h2 {
	color: var(--main-color);
	font-weight: normal;
	font-size: 50px;
}

#bestitem_wrap h2 span {
	display: block;
	font-size: 20px;
	letter-spacing: 0.2em;
}


#bestitem_wrap #main {
	background: url(https://www.forcise.jp/img/item/bestitem/bk.jpg) no-repeat;
	background-size: cover;
	padding: 3.0em 0;
}

#bestitem_wrap #main img {
	mix-blend-mode: darken;
	display: block;
}

#bestitem_wrap #main h1 {
	color: var(--main-color);
	font-weight: normal;
	font-size: 165%;
	border-bottom: 2px solid;
	display: inline-block;
	padding: 0 1.0em 0.5em;
	margin-bottom: 0.8em;
	letter-spacing: 0.1em;
}

#bestitem_wrap #main p {
	line-height: 1.8;
}

#bestitem_wrap #intro {
	padding-bottom: 2.0em;
}

#bestitem_wrap #intro #kensho {
	margin-top: 2.0em;
}

#bestitem_wrap #intro .box {
	padding: 2.0em 0;
}

#bestitem_wrap .box img {
	margin: 1.5em auto;
	width: 100%;
}

#bestitem_wrap #intro .box p,#bestitem_wrap #rank_box .box p {
	line-height: 1.8;
}

#bestitem_wrap .btn p {
	background: var(--sub-color1);
	padding: 0.7em 0;
	border-radius: 40px;
	margin-bottom: 1.0em;
	position: relative;
}

#bestitem_wrap .btn p:after{
	content: "＞";
    display: inline-block;
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1.0em;
	font-size: 18px;
}

#bestitem_wrap .btn a {
	color: #FFFFFF;
}

#bestitem_wrap #ranking_item {
	background: var(--sub-color2);
}

#bestitem_wrap #rank_box,#bestitem_wrap #rank_box2,#bestitem_wrap #rank_box3 {
	padding: 2.0em 0;
}

#bestitem_wrap #rank_box2 .box {
	background: #FFFFFF;
	padding: 2.0em 0;
}

#bestitem_wrap .item_box {
	background: #FFFFFF;
	padding: 3.0em 5% 1.5em;
	position: relative;
	margin: 4.0em auto auto;
}

#bestitem_wrap .rank_01 {
	margin-top: 2.5em;
}

#bestitem_wrap .item_box:before{
	content: "";
        display: inline-block;
        background-size: 100%;
        height: auto;
        width: 50%;
       aspect-ratio: 360 / 60;
	position: absolute;
	top: -1.3em;
	transform: translateX(-50%);
	left: 50%;
	/*mix-blend-mode: darken;*/
}

#bestitem_wrap .rank_01:before{
        background: url(https://www.forcise.jp/img/item/bestitem/ribbon_1.png) no-repeat top;
	background-size: cover;
}

#bestitem_wrap .rank_02:before{
        background: url(https://www.forcise.jp/img/item/bestitem/ribbon_2.png) no-repeat top;
	background-size: cover;
}

#bestitem_wrap .rank_03:before{
        background: url(https://www.forcise.jp/img/item/bestitem/ribbon_3.png) no-repeat top;
	background-size: cover;
}

#bestitem_wrap .item_box h3 {
	font-weight: 500;
	/*line-height: 2.0;*/
}

#bestitem_wrap .item_box h3 span {
	display: block;
	font-size: 35px;
	margin: 0.5em auto;
}

#bestitem_wrap .item_box h3 .span2 {
	font-size: 20px;
}

#bestitem_wrap .item_box .img_box {
	width: 40%;
}

#bestitem_wrap .item_box .text_box {
	width: 55%;
}

#bestitem_wrap .item_box .text_box .btn {
	font-size: 80%;
}

#bestitem_wrap .item_box .text_box .btn p {
	background: #000000;
	text-align: left;
	padding: 0.4em 1.0em;
	margin-bottom: 0.8em;
}

#bestitem_wrap .item_box .text_box .btn p:after{
	font-size: 12px;
}

#bestitem_wrap .item_box .text_box .price {
	text-align: right;
	font-size: 80%;
	margin-bottom: 1.5em;
}

#bestitem_wrap .item_box .comm_flex {
	margin: 2.0em auto;
	align-items: flex-start;
}



#bestitem_wrap #rank_box2 .box ul {
	flex-wrap: wrap;
}

#bestitem_wrap #rank_box2 .box li {
	width: 48%;
	background: var(--sub-color2);
	border-radius: 40px;
	margin-top: 1.0em;
}

#bestitem_wrap #rank_box2 .box li:last-child {
	font-size: 95%;
}

#bestitem_wrap #rank_box2 .box li a {
	display: flex;
	align-items: center;
}

#bestitem_wrap #rank_box2 .box li .icon {
	background: var(--sub-color1);
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
	width: 20%;	
    padding: 0.5em;
    box-sizing: border-box;
}

#bestitem_wrap #rank_box2 .box li .icon img {
	margin: auto;
	margin-left: 0.2em;
}

#bestitem_wrap #rank_box2 .box li .btn_cate {
	/*background: var(--sub-color2);*/
	width: 80%;
	text-align: left;
	padding: 0.5em;
}

#bestitem_wrap #rank_box2 .box li .btn_cate p {
	position: relative;
}

#bestitem_wrap #rank_box2 .box li .btn_cate p:after{
	content: "＞";
    display: inline-block;
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	font-size: 18px;
}


#bestitem_wrap .category_intro h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--sub-color1);
	color: #FFFFFF;
	font-weight: normal;	
	position: relative;
	padding: 1.0em 2.0em;
}

#bestitem_wrap .category_intro h3 .span1 {
	font-size: 120%;
	padding-left: 3.0em;
}

#bestitem_wrap .category_intro h3:before {
	content: "";
        display: inline-block;        
        height: auto;
        width: 8%;
       aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 2.0em;
	}

#bestitem_wrap .category_intro .cate_h3_01:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_1.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro .cate_h3_02:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_2.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro .cate_h3_03:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_3.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro .cate_h3_04:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_4.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro .cate_h3_05:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_5.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro .cate_h3_06:before {
	background: url(https://www.forcise.jp/img/item/bestitem/icon_png_6.png) no-repeat left;
	background-size: 100%;
}

#bestitem_wrap .category_intro h3 .span2 {
	font-size: 85%;
	letter-spacing: 0.2em;
}

#bestitem_wrap .category_intro img {
	margin: 1.5em auto;
}

#bestitem_wrap .cate_box {
	padding-bottom: 3.0em;
}

#bestitem_wrap .cate_box dl {
	margin: 1.5em auto;
	line-height: 1.8;
	font-size: 120%;
}

#bestitem_wrap .cate_box dt {
	color: var(--sub-color1);
	border-bottom: 2px solid;
	border-top: 2px solid;
	margin-bottom: 0.8em;	
}

#bestitem_wrap .sp_only {
	display: none;
}



@media only screen and (max-width: 798px) {
	#bestitem_wrap .item_box h3 span {
    font-size: 32px;
}
}

@media only screen and (max-width: 480px) {
	#bestitem_wrap h2 {
    font-size: 26px;
}
	    #bestitem_wrap .item_box h3 span {
        font-size: 20px;
    }
	
	#bestitem_wrap .item_box h3 .span2 {
    font-size: 11px;
}
	#bestitem_wrap .item_box .comm_flex {
    flex-direction: column;
}
	#bestitem_wrap .item_box .img_box {
		width: 100%;
	}
	
	#bestitem_wrap .item_box:before {
    width: 65%;
}
	
	#bestitem_wrap .item_box .text_box {
    width: 100%;
}
	#bestitem_wrap .item_box .text_box .price {
    font-size: 100%;
    margin: 1.0em auto;
}
	#bestitem_wrap #rank_box2 .box li {
    width: 100%;
}
	#bestitem_wrap #rank_box2 .box li .icon {
    width: 15%;
}
	#bestitem_wrap #rank_box2 .box li .btn_cate p:after {
    font-size: 12px;
}
	#bestitem_wrap #rank_box2 .box li .btn_cate {
    padding: 0.5em 0.5em 0.5em 1.0em;
}
	#bestitem_wrap .category_intro h3 {
    padding: 1.0em;
}
	#bestitem_wrap .category_intro h3:before {
    left: 1.0em;
}
	#bestitem_wrap .category_intro h3 .span1 {
    padding-left: 2.2em;
}
	#bestitem_wrap .category_intro h3 .span2 {
    letter-spacing: 0.1em;
}
	
	#bestitem_wrap .category_intro h3.life_app .span1 {
		font-size: 115%;
	}
	
	#bestitem_wrap .category_intro h3.life_app .span2 {
		letter-spacing: normal;
	}
	
	#bestitem_wrap .sp_only {
	display: block;
}
	#bestitem_wrap .item_box .text_box .btn p {
    padding: 1.0em;
}
}