@charset "utf-8";
/* CSS Document */
.cate_wrap .txt-color1,.pagetitle .txt-color1{
	color: #CC220C;
}
.cate_wrap .yellow_line2 span{
	background: linear-gradient(#FAAC5D, #FAAC5D) no-repeat;
    background-size: 100% 10px;
    background-position: 0 82%;
}
.pagetitle .bg_img_wrap2::before,.pagetitle .bg_img_wrap2::after,.footer_top:not(.gym_footer_top),.fix_bt:not(.gym_fix_bt){
	display: none;
}
.fix_bt .bt1{
	background-color: #FAAC5D;
}
.fix_bt .bt2,.menu-wrap.burgermenu_e .mene_box .nav_box{
	background-color: #CC220C;
}
/* ---------- cate1 ---------- */
.cate1 .box_wrap{
	gap: 100px;
}
.cate1 .box_wrap:nth-of-type(even){
	flex-direction: row-reverse;
}
.cate1 .box_wrap .imgbox{
	position: relative;
	width: calc(50% - 50px);
}
.cate1 .box_wrap .imgbox img{
	border-radius: 20px;
}
.cate1 .box_wrap .txtbox{
	position: relative;
	width: calc(50% - 50px);
	flex-direction: column;
	gap: 50px;
	align-items: flex-start;
}
.cate1 .box_wrap .txtbox .titlebox{
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}

.cate2{
	flex-direction: column;
}
.cate2 .boxwrap{
	width: 100%;
	max-width: 1280px;
	gap: 50px;
	align-items: flex-start;
}
.cate2 .boxwrap .box{
	width: calc(100% / 3 - 100px / 3);
}
.cate2 .boxwrap .box .titlebox{
	position: relative;
	margin-bottom: 20px;
}
body:not(.gjs-dashed) .cate2 .boxwrap .box .titlebox{
	aspect-ratio: 3 / 1;
	border-radius: 10px;
	overflow: hidden;
}
body:not(.gjs-dashed) .cate2 .boxwrap .box .titlebox::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #000000;
	opacity: 0.2;
}
body:not(.gjs-dashed) .cate2 .boxwrap .box .titlebox h3{
	color: #fff;
	position: relative;
	z-index: 3;
}
.cate2 .boxwrap .box .titlebox h3{
	font-size: clamp(16px, 2.0vw, 24px);
}
.cate2 .boxwrap .box > p{
	font-size: clamp(14px, 1.8vw, 18px);
}
.cate2 .more a{
	background-color: #CC220C;
}

.shoplist_wrap{
	background: linear-gradient(155deg,rgba(204, 34, 12, 0.4) 0%, rgba(250, 172, 93, 0.4) 100%);
}
.shoplist_wrap .width-1280-max .box_wrap .boxitem::after{
	background: #CC220C url(https://peacebodycare.com/system_panel/uploads/images/more_arrow2.svg) no-repeat center center / 7px auto;
}
.label_box .shop_label{
	background-color: #CC220C;
}
.label_box .shop_label.shop_label3{
	background-color: #333333;
}
.label_box .shop_label p{
	color: #fff;
}
.footer_top .footer_top_item1{
	background-color: #CC220C;
}
.footer_top .footer_top_item1 .more a{
	background-color: #fff;
}
.footer_top .footer_top_item1 .more a .arrow{
	background-color: #333333;
}
.footer_top .txt-color1,.footer_top h2,.footer_top p{
	color: #fff;
}
.footer_top .footer_top_item2{
	background-color: #FAAC5D;
}
.footer_top .footer_top_item2 .more a .arrow{
	background-color: #FAAC5D;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate2 .boxwrap{
		gap: 40px;
	}
	.cate2 .boxwrap .box{
		width: calc(100% / 3 - 80px / 3);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .box_wrap {
		gap: 50px;
		flex-direction: column;
	}
	.cate1 .box_wrap .imgbox {
		width: 60%;
	}
	.cate1 .box_wrap .txtbox {
		width: 60%;
	}
	.cate1 .box_wrap .imgbox img{
		border-radius: 30px;
	}
	.cate1 {
		padding-left: 60px;
	}

	.cate2 .boxwrap{
		gap: 30px;
	}
	.cate2 .boxwrap .box{
		width: calc(100% / 3 - 60px / 3);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap .imgbox {
		width: 80%;
	}
	.cate1 .box_wrap .txtbox {
		width: 80%;
		gap: 30px;
	}
	.cate1 .box_wrap .txtbox .titlebox {
		gap: 20px;
	}
	.cate1 {
		padding-left: 50px;
	}
	.cate2 .boxwrap{
		gap: 20px;
	}
	.cate2 .boxwrap .box{
		width: calc(100% / 3 - 40px / 3);
	}

}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .box_wrap .imgbox {
		width: 80%;
	}
	.cate1 .box_wrap .txtbox {
		width: 100%;
	}
	.cate1 {
		padding-left: 20px;
	}
    .cate1 .box_wrap .imgbox img {
        border-radius: 10px;
	}
	.cate2 .boxwrap{
		gap: 30px;
	}
	.cate2 .boxwrap .box{
		width: 100%;
	}

}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}

