@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;
}



.logo{
	width: 40%;
	margin: 1vw 0 1vw 3vw;	
}

.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 #585858;
}
.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 :hover{
	opacity: 0.3;
}

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



footer{
	position: fixed !important;
	position:absolute;
	bottom:0px;
	right: 1vw;
	padding: 1vw;
	color: #3F3F3F;
	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%;
}

.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 :hover{
	opacity: 0.3;
}

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





footer{
	position: fixed !important;
	position:absolute;
	bottom:0px;
	right: 1vw;
	padding: 1vw;
	color: #3F3F3F;
	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%;
}


.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 :hover{
	opacity: 0.3;
}

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


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


	
	
}