@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: #ffffff;
}

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


.logo{
	width: 100%;
	margin: 0;
	padding: 2.5vw 0;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo img{
	width: 220px;
	max-width: 60%;
}

.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;
	gap: 1.5vw;
	width: 100%;
	height: 100%;
	background-color: #ede9dd;
}




.button li{
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}
.button .button_txt {
    display: inline-block;
    background-color: #f9423a;
    padding: 0.9vw 2.2vw;
    border-radius: 4px;
    line-height: 1;
    font-size: 1.3vw;
    font-weight: bold;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.button p {
    display: none;
}


.button_txt a:link,
.button_txt a:visited {
	color: #ffffff;
	text-decoration: none;
}


.button_txt:hover{
	background-color: #532c70;
}




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






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



.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;
	gap: 4vw;
	width: 100%;
	height: 55vw;
	background-color: #ede9dd;
}


.button li{
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}
.button .button_txt {
    display: inline-block;
    background-color: #f9423a;
    padding: 3vw 6vw;
    border-radius: 4px;
    line-height: 1;
    font-size: 4vw;
    font-weight: bold;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.button p {
    display: none;
}


.button_txt:hover{
	background-color: #532c70;
}





.copyright{
	text-align: center;
	margin:  2vw auto;
	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;}



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

.box li{
	width: 100%;
}


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




.button li{
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

.button .button_txt {
    display: inline-block;
    background-color: #f9423a;
    padding: 1.6vw 3.5vw;
    border-radius: 4px;
    line-height: 1;
    font-size: 2.2vw;
    font-weight: bold;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.button p {
    display: none;
}


.button_txt:hover{
	background-color: #532c70;
}
	
	
	


.copyright{
	text-align: center;
	margin:  2vw auto;
	color: #ffffff;
	font-size: 0.5em;
}	

	
	
}