* {
	margin:0;
	padding:0;
}
html {
	max-width: 980px;
	margin: 0 auto;
	font-size: 16px;
}

body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	font-family: serif;
}
body > section	{
	width: 100%;
	align-items: center;
    justify-content: center;
}
/*message ----------------------------------------------------*/
#msg {
	width: 94%;
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
	background-color:rgb(126, 112, 77);
	color: white;
	height: 3rem;
	padding: 0 3%;
}


/*-----------------------------------------------------message*/

/*header----------------------------------------------------*/
header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
	margin: 0.5rem 0;
}
#h_logo {
	width:15%;
	text-align: center;
}
#h_logo > img {
	width: 80%;
	margin: auto;
	vertical-align: bottom;
}
#h_rContent {
	width: 85%;
	display: flex;
	flex-direction: column;
	align-items: left;
    justify-content: center;
}
.sankaku {
	list-style: none;
}
.sankaku > li {
	position: relative;
    padding: 0px 0px 0px 1rem;
}
.sankaku > li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(50%,-50%);
    width: 0px;
    height: 0px;
    border: 0.3rem solid transparent;
    border-left: 0.4rem solid #000;
    content: "";
}
#h_nav {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: start;
    justify-content: space-between;
	line-height: 2rem;
}
#h_nav > ul {
	width: 70%;
	margin:auto;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: start;
}
#h_nav > div {
	width: 30%;
	margin: 0 2%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}
#h_nav > div > div{
	color: white;
	vertical-align: middle;
}
#h_nav > div > div img{
	width: 1.4rem;	
	vertical-align: middle;
}
#h_nav > div > div a{
	color: white;
}
#h_nav > div > div:first-child {
	flex-grow: 1;
	background-color: rgb(126, 112, 77);
}
#h_nav > div > div:last-child {
	flex-grow: 1;
	background-color: rgb(130, 29, 29);
}
#h_rContent > div:last-child {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}
#h_rContent > div:last-child > p {
	line-height: 3rem;
	margin-right: 1rem;
}
#h_rContent > div:last-child > div {
	width:2rem;
}
#h_rContent > div:last-child > div > img{
	width: 100%;
}
.h_sr{
	color: red;
	font-size: 2rem;
	line-height: 3rem;
	font-weight: 800;
}

/* /header------------------------------------------------------*/

/* navigation--------------------------------------------------*/
.NV {
	width: 100%;
	text-align: center;
}
.NV > ul {
	list-style: none;
	width: 80%;
	margin:auto;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
    /*justify-content: center;*/
}
.NV > ul li {
	width: 100%;
	height: 2em;
	border-left: 1px solid rgb(201, 201, 201);
	text-align: center;
	font-weight: 800;
	line-height: 2rem;
}
.NV a {
	width: 20%;
}
.NV > ul > a:last-child {
	border-right: 1px solid rgb(201, 201, 201);
}
/*/navigation--------------------------------------------------*/

/*mainvisual-----------------------------------------------------*/
#MV {
	margin-top: 1rem;
}
#MV > .big {
	width: 100%;
}
.big_add {
	opacity:1 !important;
}
.big_remove {
	opacity:0;
}
#MV > .big > img {
	width: 100%;
	vertical-align: bottom;
	transition-property: all;
	transition-duration: 1s;
	transition-delay: 0;
	opacity: 0;
}
#MV > .m_sub {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	margin-top: 1rem;
}
#MV > .m_sub > div > img {
	width: 100%;
	vertical-align: bottom;
}
#MV > .m_sub > div {
	width: 22%;
	transition-property: all;
	transition-duration: 0.8s;
	transition-delay: 0;
}
.m_bselect {
	/*border:6px solid rgb(239, 100, 0);*/
	opacity: 0.2;
}

/*/mainvisual------------------------*/

/*content-common----------------------*/
.content {
	width: 95%;
	margin-top: 2rem;
}
.content > h1{
	font-size: 1.5rem;
	border-bottom: 2px solid rgb(126, 112, 77);
	/*display:inline-block;*/
	width:fit-content;
	margin: 0 auto;
}
.c_container {
	width: 100%;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	position: relative;
}
.c_name {
	font-size: 1.4rem;
	width: 100%;
	text-align: center;
	position:relative;
}
.c_30off {
	position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    height: 130% !important;
    width: auto !important;
}
.c_name + p{
	position: relative !important;
}
.r-cross{
	position: absolute !important;
    width: 80% !important;
    height: 2px !important;
    background-color: red !important;
    right: 0 !important;
    bottom: 0 !important;
	transform: rotate(8deg) !important;
    /*rotate: 10deg !important;*/
    transform-origin: 100% 0 !important;
	content: "";
}
.c_changed {
	position: absolute !important;
    bottom: -1.2rem !important;
    right: 0 !important;
    color: red !important;
}
.c_sr {
	color: red;
	font-weight: 800;
}
.c_container .item {
	margin-top: 1.2rem;
	/*border: 1px solid #000;*/
}
.content img {
	width: 100%;
	height:auto;
}
.seal {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40% !important;
}
a {
	
	text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
	color: #000;
}
a:hover{
	opacity: 0.7;
}
/*------------------------------common*/

/*ichiran-----------------------------*/
.ichiran a{
	width: 23%;
}

.ichiran > .c_container .item {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position:relative;
}
.ichiran > .c_container .item > div {
	position: relative;
}
/*-----------------------------ichiran*/

/*reccomend-----------------------------*/
.recommend  .c_container {
	width: 85%;
}
.recommend  .c_container>.item {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin: 1rem auto 0;
}
.recommend  .c_container>.item > p:last-child {
	width: 100%;
	text-align:right;
	font-size: 2rem;
}
.recommend img {
	width: 50%;
	height:auto;
}
/*-----------------------------reccomend*/

/*hot sell-----------------------------*/
.hot a {
	width: 30%;
}
.hot > .c_container {
	width: 85%;
}
.hot > .c_container .item {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.hot > .c_container .item > div {
	position: relative;
}
.rank {
	height: 2rem;
	width: 100%;
	
}
.rank > img {
	height: 100%;
	width: auto;
}
/*-----------------------------hot sell*/

/* prm ---------------------------*/

.prm {
	width: 90%;
	margin-top: 2rem;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #000;
}

.prm > .p_s {
	width: 57%;
	text-align: center;
}

.prm > .p_s > p {
	width: 90%;
	margin: 1rem auto 0;
	line-height: 1.5rem;
	font-size: 0.85rem;
	font-weight: 800;
}
.prm > div:last-child {
	width: 43%;
}
.prm > .p_s > h1{
	font-size: 1.5rem;
	border-bottom: 2px solid rgb(126, 112, 77);
	/*display:inline-block;*/
	width:fit-content;
	margin: 0 auto;
	letter-spacing: 0rem;
}
.scing {
	margin-top: 8rem;
}
.prm img{
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}
/*-----------------------------prm*/

/* footer ---------------------------*/

footer {
	width: 90%;
	padding: 0 5%;
	background-color: #222222;
	color: white;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
	/*background-image:url("./img/footer.png");
	background-position: bottom;*/
}
#f_U {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: start;
	justify-content: space-between;
	letter-spacing: 0.2rem;
	position: relative;
	padding-top: 0.5rem;
}
.f_lContent {
	width: 75%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
}
.f_lContent > div {
	flex-grow: 1;
}

.f_lMContent {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: start;
}
.f_lMContent > div {
	width: 2rem;
}
.f_lMContent > div > img {
	width: 100%;
}
.f_lMContent > p {
	margin-right: 1rem;
}
.f_lMContent > p:last-child {
	font-size: 0.5rem;
}
.f_lMContent > p:first-child{
	background-color: rgb(126, 112, 77);
}

.f_pi a{
	color: #fff;
}
.f_sr {
	color: red;
	font-weight: 800;
	font-size: 2rem;
}

#f_U > div:last-child {
	width: 25%;
	text-align: center;
	padding-top: 0.5rem;
	letter-spacing: 0;
	z-index: 10;
}
#f_U > div:last-child img{
	width: 60%;
}
.ellipse{
    width: 200px;
    height: 100px;
    border-radius: 50%;
	background-color: #222222;
	position: absolute;
	top:-2rem;
	z-index: 0;
	text-align: center;
}
.ellipse img{
	height: 2rem;
}


#totop {
	position: absolute;
	width: 100%;
	height: 2rem;
	left:0;top:-2rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}
#totop > img {
}
	
/*/footer-------------------------*/

/* footer navigation--------------------------------------------------*/
.f_NV {
	width: 100%;
	text-align: center;
	height: 3rem;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
}
.f_NV > ul {
	list-style: none;
	width: 100%;
	margin:auto;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
    /*justify-content: center;*/
}
.f_NV > ul li {
	width: 100%;
	height: 2em;
	border-left: 1px solid rgb(201, 201, 201);
	text-align: center;
	font-weight: 800;
	line-height: 2rem;
}
.f_NV > ul > a:last-child > li {
	border-right: 1px solid rgb(201, 201, 201);
}
.f_NV a {
	width: 22%;
	color: white;
}
/*footer navigation--------------------------------------------------*/

@media (max-width:900px) {
	.NV > ul {
		list-style: none;
		width: 97%;
	}
	.NV > ul li {
		font-size: 0.5rem;
		line-height: 1rem;
	}
	#h_rContent > div:last-child > p {
		font-size: 0.4rem;
		line-height: 1rem;
		margin-right: 0.1rem;
	}
	#h_nav > div > div {
		font-size: 0.5rem;
	}

	#h_nav > div > div img {
		width: 0.5rem;
	}
	#h_nav > ul {
		width: 60%;
		font-size:0.4rem;
	}
	#h_nav > div {
		width: 50%;
	}
	#h_rContent > div:last-child > div {
		width: 0.8rem;
	}
	.h_sr {
		font-size: 0.8rem;
		line-height: 1rem;
		font-weight: 800;
	}

	#MV > .m_sub > div {
		width: 46%;
		margin-top: 0.5rem;
	}
	#MV > .m_sub {
		justify-content: space-evenly;
		margin-top: 0;
	}

	.ichiran a{
		width: 48% !important;
	}
	.c_name {
		font-size: 1.2rem;
	}
	.c_name ~ p{
		font-size: 0.9rem;
	}
	.hot a {
		width: 100%;
	}
	.hot > .c_container {
		width: 50%;
	}

	.prm {
		width: 90%;
		margin-top: 2rem;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #000;
	}
	.prm > .p_s {
		width: 95%;
		text-align: center;
	}
	.prm > div:last-child {
		width: 100%;
	}

	.prm > .p_s > h1 {
		font-size: 1.2rem;
		margin: 0.5rem auto;
	}
	.prm > .p_s > p {
		width: 100%;
		font-size: 0.5rem;
		font-weight: 800;
	}

	.f_NV > ul li {
		width: 100%;
		font-size: 0.5rem;
		line-height: 1rem;
	}
	footer {
		width: 96%;
		padding: 0 2%;
	}
	.f_NV a {
		width: 21%;
	}
	.f_NV a:nth-child(3) {
		width: 36%;
	}
	#f_U > div:last-child > div:last-child {
		font-size: 0.5rem;
	}
	.f_lMContent > p {
		margin: 0;
	}
	.f_lMContent > p:first-child {
		font-size: 0.5rem;
	}
	.f_lMContent {
		flex-wrap: wrap;
	}
	.f_lMContent > div {
		width: 1rem;
	}
	.f_sr {
		font-size: 1.1rem;
	}
	.f_lMContent > p:last-child {
		width: 80%;
	}
	#cp {
		font-size: 0.5rem;
	}
	
 }