/* CSS Document */

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
}



/*　ここからPC　*/

@media screen and (min-width: 769px) {

.all {
	width:100%;
	height: 100%;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
}

.shoparea {
	width: 80%;
	height: auto;
	/*max-height: 700px;*/
	margin: 0 auto;
	top:100%;

  /* 横並びに表示する */
  flex-direction: row;
}

.imagearea {
	width:100%;
	margin: 0 auto;
	height: 520px;
	max-width: 100%;
    max-height: 520px;
	object-fit: content;
	object-position: center top;
	font-family: 'object-fit: content; object-position: center top;';
}

.imagearea img {
	position: relative;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
  	object-fit: contain;
	margin: 0 auto;
	text-align: center;
}

	.bottombox {
		
	}	
	
.shopname {
	width: 100%;
	height: auto;
	padding-top: 10px;
	
	color: white;
	font-size: 1em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
	
	box-sizing: border-box;
}

.postbox {
	width:70%;
	height: auto;
	padding-top:10px;
	margin: 10px auto;
	color: white;
	font-size: 1em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
	
	box-sizing: border-box;
}

.postbutton {
	display: block;
	width:100%;
	height: auto;
	padding: 10px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 0.9em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}

.postbutton div{
	display: block;
	width:100%;
	height: auto;
	padding: 10px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 0.9em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}
	
.postbutton2 {
	display: block;
	width:100%;
	height: auto;
	padding: 10px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 0.9em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}

.postbutton2 div{
	display: block;
	width:100%;
	height: auto;
	padding: 10px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 0.9em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}

}

@media screen and (min-width: 800px) and (max-height: 768px) {
	
.imagearea {
	height: 400px !important;
}
	
}
	
	@media all and (-ms-high-contrast: none) {
		
			.imagearea img {
				display: block;
				position:static !important;
				height:auto;
				width:auto !important;
				max-width:auto !important;
				max-height:auto !important;
				object-fit: cover !important;
				margin: 0 auto;
				text-align: center;
			}
		
	}



/*　ここからスマホ（大画面）　*/


@media screen and (max-width: 768px) {
	

.all {
	/*width:100%;
	height: 100vh;*/
}

.shoparea {
	width: 90%;
	min-height: 100vh;
	/*max-height: 95%;*/
	margin: 0 auto;
	position: relative;
}

.imagearea {
	width:100%;
	margin: 0 auto;
	height: auto;
	max-width: 100%;
    max-height: 700px;
	text-align: center;
}

.imagearea img {
	position: relative;
    height:auto;
    max-width:100%;
    max-height:100%;
  	object-fit: contain;
	margin: 0 auto;
	text-align: center;
}

	.bottombox {
		position: absolute;
		bottom: 15%;
		height: auto;
		width: 100%;
		background-color:rgba(0,0,0,0.30);
		z-index: 100;
	}		
	
.shopname {
	width: 100%;
	height: auto;
	padding-top: 0;
	
	color: white;
	font-size: 1.2em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
	
	box-sizing: border-box;
	font-size:1.16em;
	line-height:1.3;
}

.postbox {
	width:100%;
	height: auto;
	padding-top:10px;
	
	color: white;
	font-size: 1.0em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
	
	box-sizing: border-box;
}

.postbutton {
	display: block;
	width:100%;
	height: 50px;
	padding: 6px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 1.5em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}

.postbutton div{
	display: block;
	width:100%;
	height: auto;
	padding: 6px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 1.5em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}
	
.postbutton2 {
	display: block;
	width:100%;
	height: auto;
	padding: 6px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 1.6em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}

.postbutton2 div{
	display: block;
	width:100%;
	height: auto;
	padding: 6px;
	background-color: #EA5504;
	border-radius: 10px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	color: white;
	font-size: 1.6em;
	font-family: "Rounded Mplus 1c";
	font-weight: 600;
}	
	
}