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


html{
	font-size: 62.5%;/*16px × 2.5%=10px*/
}

body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #323232;
	font-size: 1.6rem;
	background-color: #000000;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1vw 1.5vw;
}

header li a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

header .logo {
	display: block;
	max-width: 350px;
	height: auto;
}

header ul.list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

header li {
	padding: 0 10px;
}
	
.shopping_txt{
	color:white;
	font-size:18px;
}

.list-menu .list li a:link .shopping_txt,
.list-menu .list li a:link .icon-cart:before{
	color:#ffffff;
}

.list-menu .list li a:visited .shopping_txt,
.list-menu .list li a:visited .icon-cart:before{
	color:#969696;
}

.list-menu .list li a:hover .shopping_txt,
.list-menu .list li a:hover .icon-cart:before{
	color:#e60013;
}

.box{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.box li{
	width: 50%;
}

.box img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}

.button{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #313131;
}




.button li{
    position: relative;
    margin: 2vw 0;
    padding: 0.3vw 0.2vw;
    border: solid 1px #5B5B5B;
}
.button .button_txt {
    position: absolute;
    display: inline-block;
    top: -0.4vw;
    left: -0.8vw;
    line-height: 1;
    font-size: 1.5vw;
    color: #ffffff;
	text-decoration: none;
}

.button p {
    margin: 0; 
    padding: 0;
}


.button li :link{
	color: #ffffff;
}

.button li :visited {
	color:#969696;
}

.button li :hover{
	opacity: 0.8;
}



footer{
	position: fixed !important;
	position:absolute;
	bottom:0px;
	right: 1vw;
	padding: 1vw;
	color: #ffffff;
	font-size: 0.7em;
}





/*    レスポンシブ    */
@media screen and (min-width: 0px) and (max-width: 480px) {
	#website a{font-size:2em;}
	#pricelist a{font-size:2em;}


	
/*.logo{
	width: 25%;
	margin: 3vw auto;
}

.logo img{
	width: 100%;
}*/
	
header .logo{
	display: block;
	max-width: 150px;
	height: auto;
	margin: 1.5vw 0;
}

header ul.list {
	display: flex;
	justify-content: flex-end;
	list-style: none;
}

header li {
	padding: 0 10px;
	margin-right:1.5vw;
}
	
.shopping_txt {
	display: none;
}

.box{
	display: block;
	width: 100%;
}

.box li{
	width: 100%;
}

.box img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}



.button{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 55vw;
	background-color: #313131;
}


.button li{
    position: relative;
	width: 60%;
    margin: 3.5vw 0;
    padding: 0.3vw 0.2vw;
    border: solid 1px #5B5B5B;
}
.button .button_txt {
    position: absolute;
    display: inline-block;
    top: -1.8vw;
    left: -2vw;
    line-height: 1;
    font-size: 4vw;
    color: #ffffff;
}

.button p {
    margin: 0; 
    padding: 0;
}

.button li :visited {
  	color:#969696;
}

.button li :hover{
	opacity: 0.3;
}





footer{
	position: fixed !important;
	position:absolute;
	bottom:0px;
	right: 1vw;
	padding: 1vw;
	color: #ffffff;
	font-size: 0.4em;
}
	
	
}







@media screen and (min-width: 481px) and (max-width: 768px) {
		#website a{font-size:2.5em;}
	#pricelist a{font-size:2.5em;}

	
	
/*.logo{
	width: 20%;
	margin: 3vw auto;	
}

.logo img{
	width: 100%;
}*/

header .logo{
	display: block;
	max-width: 250px;
	height: auto;
	margin: 1.5vw 0;
}

header ul.list {
	display: flex;
	justify-content: flex-end;
	list-style: none;
}

header li {
	padding: 0 10px;
	margin-right:1.5vw;
}

.shopping_txt {
	display: none;
}
	
.box{
	display: block;
	width: 100%;
}

.box li{
	width: 100%;
}

.box img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
	
	

.button{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40vw;
	background-color: #313131;
}


.button li{
    position: relative;
	width: 60%;
    margin: 3vw 0;
    padding: 0.3vw 0.2vw;
    border: solid 1px #5B5B5B;
}
	
.button .button_txt {
    position: absolute;
    display: inline-block;
    top: -1vw;
    left: -0.8vw;
    line-height: 1;
    font-size: 2.5vw;
    color: #ffffff;
}

.button p {
    margin: 0; 
    padding: 0;
}


.button li :visited {
	color:#969696;
}

.button li :hover{
	opacity: 0.3;
}
	
	
	


footer{
	position: fixed !important;
	position:absolute;
	bottom:0px;
	right: 1vw;
	padding: 1vw;
	color: #ffffff;
	font-size: 0.7em;
}


	
	
}