@charset "utf-8";

:root{
	--cl_orange: #f77a25;
	--cl_red: #DB0037;
	--cl_navy: #184E8E;
}

/* -------------------- reset -------------------- */
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, form, input, textarea {
  font-family: 'Noto Sans JP','Roboto',sans-serif;
}
li { list-style: none; }
.imgfit{ display:block; width:100%; height:auto; }
.cl_red{ color: var(--cl_red); }
.align_C{ text-align:center; }
.d_red{background-color: var(--cl_red);}
.d_grey{background-color:#efefef;}
.d_pink{background-color:#FFD9DA;}
.d_grid{background:url(../images/bg_grid.gif) repeat;}
.d_grid-grey{background:url(../images/bg_grid-grey.gif) repeat;}
.sr_only{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border:0;
  white-space: nowrap;
}

/* -------------------- structure -------------------- */
body {
  background-color: var(--cl_orange);
  color: #000;
  font-size: clamp(14px, 1.8vw, 30px);
  line-height:1.7;
  font-weight:500;
  font-feature-settings: "palt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.container{
	position:relative;
	width:100%;
	overflow:hidden;
}

.inner{ width:min(96%,850px); margin:0 auto; }



/* -------------------- layout -------------------- */
.hero{
  position: relative;
  width:min(100%,1024px);
  padding:min(6vw,60px) 0 min(4vw,60px);
  margin:0 auto;
  overflow: hidden;
}
	.m_pizzakoushien{
		position:absolute;
		left:3vw;
		top:3vw;
		width:min(45%,446px);
		height:40%;
		z-index: 1;
	}
	.img_hero{
		width:100%;
		margin:0 auto 1vw;
	 }

	.m_date{
		width:min(90%,763px);
		margin:0 auto 4vw;
	}
	.img_pizz{
		width:100%;
		margin:0 auto;
	}

.ft{
	position:relative;
	width:100%;
	padding:4vw 1vw;
	text-align: center;
	background:#fff;
}
	.ft img{
		display:inline-block;
		width:min(40%,325px);
		margin:0 15px;
	}
	
@media(max-width:768px){
	.m_pizzakoushien{
		position:absolute;
		left:20px;
		top:20px;
		width:min(60%,446px);
	}
	.img_hero{
		width:100%;
		margin:22vw auto 1vw;
	 }
}