@charset "utf-8";

/*---------------------------------------------
Reset
---------------------------------------------*/
html {
  color: #19110f;
  overflow-y: scroll;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  font-size: 62.5%;
  line-height: 1.5;
  position: relative;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

/*html::after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

div,dl,dt,dd,form,input,ul,ol,li,p,select,textarea,span,th,td {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    
    .bg{
  background-image: url("../img/yuki_bg.webp"), url("../img/bottom_bg.webp");
  background-size: 90%, 100vw;
  background-position: top center, bottom center;
  background-repeat: no-repeat,no-repeat;
}
    
    h3+ul{
        text-align: left;
    }
}

/*---------------------------------------------
Style
---------------------------------------------*/
body {
  padding: 0;
  font-size: 1.8rem;
  margin:0;
}

@media only screen and (max-width: 768px) {
  body {
    margin: 0 auto;
    padding: 0;
    font-size: 1.2rem;
    max-width: 768px;
  }
}

.for_pc {
  display: block;
  margin: 0 auto;
}

.for_sp {
  display: none;
  margin: 0 auto;
}

/* sp */
@media screen and (max-width: 768px) {
  body {
    font-size: 1.5rem;
  }

  .for_pc {
    display: none;
    margin: 0 auto;
  }

  .for_sp {
    display: block;
    margin: 0 auto;
  }
}

.inner{
	/*max-width: 1200px;
	margin: 0 auto;*/
}

.note {
  font-size: 1.2rem;
}

.note_del {
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #D70C18;
}

.del {
  background-color: #CCC;
}

li{
	text-indent: -1em;
	padding-left: 1em;
}

/*---------------------------------------------
header
---------------------------------------------*/
header {
		width: 100%;
  padding: 0;
		background: #fff;
}
.box .note li{
		color: #000;
		list-style-type: none;
}
.box_logo{
		max-width: 1000px;
		width: 100%;
		height: 70px;
		padding: 10px;
		margin: 0 auto;
		text-align: left;
}
.box_logo img{
		width: 50px;
	}
.box_logo a{
		display: inline-block;
	}
	/*
.box_maintitle{
		position: relative;
		background: url("../img/fire02.webp");
		background-size: cover;
		background-repeat: no-repeat;
		height: 420px;
}
.box_maintitle img{
		position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
  width: 100%;
  max-width: 1100px;
  height: 100%;
		padding: 0 20px 20px 20px;
  pointer-events: none; 
}
*/
.box_maintitle{
		position: relative;
		background: url("../img/fire02.webp");
		background-size: cover;
		background-repeat: no-repeat;
		height: auto;
		width: 100%;
		display: inline-block;
		text-align: center;
}
.box_maintitle img{
		position: relative;
		display: inline-block;
		top: -15px;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  height: 100%;
		padding: 0 20px 0px 20px;
  pointer-events: none; 
}

.box_date{
		width: 940px;
		height: 110px;
		padding: 18px 0;
		margin: 0 auto;
		text-align: left;
}
.box_date img,
.box_date p{
		display: inline-block;
		vertical-align: middle;
}
.box_date img{
		padding-top: 2px;
		width: 190px;
}
.box_date p{
		margin-left: 10px;
		padding-bottom: 5px;
		font-size: 2.55em;
		font-weight: 900;
}
span.marker {
  background: linear-gradient(transparent 70%, rgba(246, 184, 0, 0.8) 70%);
}
.box_date p span span:nth-child(1),
.box_date p span span:nth-child(3){
		font-size: 0.8em;
		font-weight: 900;
		padding: 0 0.3em;
}

@media screen and (max-width:1280px) {
		header {
    width: 100%;
    padding: 0;
  }
		.box_logo{
				max-width: 1000px;
				height: 50px;
				padding: 5px 0 0 11px;
		}
		.box_logo img{
				width: 40px;
			}
		.box_maintitle{
				height: calc(100% - 20px);
		}
		.box_maintitle img{
				top: -8px;
				width: 100%;
				max-width: 800px;
				height: auto;
				padding: 0 10px 0px 10px;
		}
		.box_date{
				width: 710px;
				height: 85px;
				padding: 13px 0;
				margin: 0 auto;
				text-align: left;
		}
		.box_date img{
				padding-top: 2px;
				width: 140px;
		}
		.box_date p{
				margin-left: 10px;
				padding-bottom: 5px;
				font-size: 1.9em;
				font-weight: 900;
		}
		.box_date p span span:nth-child(1),
		.box_date p span span:nth-child(3){
				font-size: 0.8em;
				padding: 0 0.3em;
		}
}

@media only screen and (max-width: 768px) {
		.box_logo{
				height: 50px;
				padding: 5px 0 0 11px;
		}
		.box_logo img{
				width: 34px;
			}

.box_date{
		max-width: 317px;
		height: 80px;
		padding: 7px 0 5px 0;
		margin: 0 auto;
		}
		.box_date img,
		.box_date p{
				display: block;
		}
		.box_date img{
				padding-top: 2px;
				margin: 0 0 1px 1px;
				width: 70px;
		}
		.box_date p{
				margin-left: 0;
				padding-bottom: 3px;
				font-size: 1.5em;
		}
		.box_date p span span:nth-child(1),
		.box_date p span span:nth-child(3){
				font-size: 0.6em;
				padding: 0 0.3em;
		}

}


/*---------------------------------------------
section_subtitle
---------------------------------------------*/
.section_subtitle {
  position: relative;
		background: url("../img/fire03.webp");
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
}



/*.sectionsubtitle_inner {
  width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 40px 0 35px 0;
		
		display: flex;
  align-items: stretch;
  gap: 0px;
}
.box02_img img{
		width: 410px;
}
.box02_subtitle {
		margin-left: 20px;
}
.box02_subtitle img{
		width: 520px;
		padding: 25px 0px;
}
.box02_subtitle p{
		padding: 0 0 0px 25px;
		font-size: 1.2em;
		line-height: 1.9em;
		font-weight: 700;
		color: #fff;
}*/

/*.sectionsubtitle_inner {
  width: 100%;
		max-width: 980px;
		margin: 0 auto;
		padding: 50px 0 40px 0;
}
.box02_img,
.box02_subtitle{
	vertical-align: middle;
		display: inline-block;
		color: #fff;
}
.box02_img img{
		width: 430px;
}
.box02_subtitle{
		padding-left: 20px;
}
.box02_subtitle img{
		width: 520px;
		padding-bottom: 35px;
}
.box02_subtitle p{
		padding: 0 0 0px 25px;
		font-size: 1.2em;
		line-height: 1.9em;
		font-weight: 700;
}*/

.sectionsubtitle_inner {
  display: grid;
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		padding: 50px 0 40px 0;
  grid-template-columns: 0.72fr 1fr;
  grid-template-areas:
    "img right"
    "img right02";
  /*gap: 20px;*/
}
.box02_img {
  display: block;
  grid-area: img;
		max-width: 100%;
  height: auto;
		padding-right: 20px; 
}
.box02_img img{
  width: 100%;
		max-width: 440px;
}
.box02_subtitle {
  grid-area: right;
		padding: 7px 0 20px 0;
}
.box02_subtitle img{
  width: 100%;
		max-width: 540px;
}
.box02_subtitle02 {
  grid-area: right02;
		font-size: 1.25em;
		line-height: 1.9em;
		font-weight: 700;
		color: #fff;
  display: block;
		padding-left: 30px;
}

.h2_01{
		width: 1100px;
		margin: 0 auto 0 auto;
		text-align: center;
		background: #d31a1a;
		height: 80px;
		border-radius: 10px;
}
.h2_01 img{
	width: 540px;
		position: relative;
		top: -18px;
}

@media only screen and (max-width: 1280px) {
		/*.sectionsubtitle_inner {
				max-width: 850px;
				padding: 30px 10px 27px 10px;
		}
		.box02_img{
				width: 38%;
		}
		.box02_img img{
				width: 100%;
		}
		.box02_subtitle{
				width: calc(62% - 20px);
				padding-left: 20px;
		}
		.box02_subtitle img{
				width: 100%;
				max-width: 460px;
				padding-bottom: 25px;
		}
		.box02_subtitle p{
				padding: 0 0 0px 10px;
				font-size: 1em;
				line-height: 1.9em;
				font-weight: 700;
		}*/
	
	/*.sectionsubtitle_inner {
			width: calc(100% - 30px);
			max-width: 780px;
			padding: 28px 0 25px 0;
	}
	.box02_subtitle {
			margin-left: 15px;
	}
	.box02_subtitle img{
			padding: 20px 0 20px 0;
	}
	.box02_subtitle p{
			padding: 0 0 0px 23px;
			font-size: 1.05em;
			line-height: 1.9em;
	}*/
	.sectionsubtitle_inner {
			display: grid;
			width: calc(100% - 30px);
			max-width: 780px;
			padding: 25px 0 25px 0;
			grid-template-columns: 0.72fr 1fr;
			grid-template-areas:
					"img right"
					"img right02";
	}
	.box02_img {
				display: block;
				grid-area: img;
				max-width: 100%;
				height: auto;
				padding-right: 10px; 
		}
		.box02_img img{
				width: 100%;
				max-width: 440px;
		}
		.box02_subtitle {
				grid-area: right;
				padding: 7px 0 20px 0;
		}
		.box02_subtitle img{
				width: 100%;
				max-width: 540px;
		}
		.box02_subtitle02 {
				grid-area: right02;
				font-size: 1.05em;
				line-height: 1.9em;
				padding-left: 30px;
		}
		
		.h2_01{
				width: calc(100% - 40px);
				max-width: 1100px;
				margin: 0 auto 0 auto;
				padding: 5px 0px 0px 0px;
				height: auto;
				border-radius: 10px;
		}
		.h2_01 img{
			width: 600px;
			max-width: 550px;
				position: relative;
				top: -18px;
		}
}
@media only screen and (max-width: 768px) {
		/*.sectionsubtitle_inner {
				max-width: 550px;
				padding: 23px 10px 19px 7px;
		}
		.box02_img{
				width: 34%;
		}
		.box02_img img{
				width: 100%;
		}
		.box02_subtitle{
				width: calc(65% - 2px);
				padding-left: 2px;
		}
		.box02_subtitle img{
				width: 100%;
				max-width: 460px;
				padding-bottom: 10px;
		}
		.box02_subtitle p{
				padding: 0 0 0px 5px;
				font-size: 0.9em;
				line-height: 1.9em;
				font-weight: 600;
		}*/
		
		/*.box02_subtitle p span{
				display: block;
		}*/
		.sectionsubtitle_inner {
			display: grid;
			width: calc(100% - 30px);
			max-width: 580px;
			padding: 20px 0 17px 0;
			grid-template-columns: 0.45fr 1fr;
			grid-template-areas:
					"img right"
					"right02 right02";
	}
	.box02_img {
				display: block;
				grid-area: img;
				max-width: 100%;
				height: auto;
				padding-right: 0px; 
		}
		.box02_img img{
				width: 100%;
				max-width: 440px;
		}
		.box02_subtitle {
				grid-area: right;
				padding: 7px 0 20px 5px;
		}
		.box02_subtitle img{
				width: 100%;
				max-width: 540px;
		}
		.box02_subtitle02 {
				grid-area: right02;
				font-size: 0.85em;
				line-height: 1.9em;
				padding-left: 0px;
				font-weight: 500;
				text-align: center;
		}

		.h2_01{
				width: calc(100% - 3em);
				max-width: 1100px;
				margin: 0 auto 0 auto;
				padding: 5px 0px 0px 0px;
				text-align: center;
				background: #d31a1a;
				height: auto;
				border-radius: 10px;
		}
		.h2_01 img{
			width: 70%;
			max-width: 550px;
				position: relative;
				top: -10px;
		}
}
/*---------------------------------------------
section_list
---------------------------------------------*/
.section_list {
  background: url("../img/fire01.webp");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
  background-attachment: fixed;
		background-color: #232323;
		padding: 3.8em 0 3em 0;
}

.sectionlist_innner{
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}

.section_list p{
		margin: 1.5em 0;
		padding: 10px 20px;
		font-size: 0.8em;
  color: #fff;
		line-height: 1.8em;
		background: rgba(35,35,35,0.8);
		border-radius: 10px;
}

.table_title {
  text-align: left;
  font-size: 2rem;
  max-width: 1100px;
  /*background-color: #0079E5;*/
  background-color: #d41a1a;
  color: #FFF;
  padding: 1rem 2rem;
  margin: 0 auto;
}

table {
  text-align: left;
  font-size: 1.4rem;
  border-collapse: collapse;
  width: 1100px;
  margin: 0 auto 5rem auto;
}

/* sp~ipad */
@media screen and (max-width:1280px) {

  .scroll {
    width: 100%;
    padding-inline: 2rem;
    overflow-x: scroll;
  }

  table {
    overflow-y: hidden;
  }
}

th {
  border: solid 2px #282828;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  background-color: #db6936;
  color: #FFF;
  font-size: 1.8rem;
  text-align: center;
}


td {
  border: solid 2px #282828;
  background-color: #fff;
  padding: 0.6rem;
  line-height: 2.5rem;
}

tr:nth-child(n + 3) > th:nth-child(1) {
  width: 130px!important;
		background: #ffc83e;
		font-size: 1.4rem;
		font-weight: 700;
		text-align: left;
		letter-spacing: 0.5px;
}

td:nth-child(2) {
  width: 105px!important;
}

td:nth-child(3) {
  width: 80px!important;
}

td:nth-child(4) {
  
  width: 400px!important;
}

li {
  list-style-position: inside;
  list-style-type: disc;
  color: #e60012;
  margin-left: 0.6rem;
}

li span {
  color: #19110f;
}

h2 {
	font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 0;
}

a {
  color: #19110f;
}

a:hover {
  opacity: 0.6;
		transition: 0.1s;
}

a:visited {
  color: #19110f;
}

@media screen and (max-width:1280px) {
		.section_list {
				padding: 2.2em 0 1.5em 0;
		}

		.section_list p{
				margin: 1.3em 2em;
				padding: 10px 15px;
				font-size: 0.8em;
				line-height: 1.8em;
				background: rgba(35,35,35,0.8);
				border-radius: 10px;
		}

	table {
		 margin: 0 0 1rem 0;
	}
	.scroll {
		 margin: 0 0 6rem 0;
	}

  td:nth-child(1) {
    width: 100px;
  }

  td:nth-child(2) {
    width: 60px;
  }

  td:nth-child(3) {
    width: 200px;
  }

  td:nth-child(4) {
    width: 140px;
  }

  td:nth-child(5) {
    width: 120px;
  }
}

@media screen and (max-width:768px) {
		h2 {
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	th {
		padding: 0.2rem 0.5rem;
		font-size: 1.4rem;
	}
}

/* =========================================================
ユニーのブランド肉
========================================================= */
.section_brand{
		position: relative;
		background: #fff6ce;
}
.section_brand:before{
		position: absolute;
		content: "";
		background-image: url("../img/meat02.webp");
		background-repeat: repeat-x;
		background-size: contain;
		width: 100%;
		height: 21%;
		top: -5%;
		left: 0;
		animation: slideStripes02 20s linear infinite;
}
@keyframes slideStripes02 {
  from {
    background-position: -600px 0 ;
  }
  to {
    background-position: 0px 0px;
  }
}

.sectionbrand_inner{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 12em 0 5em 0;
}
.sectionbrand_inner h3{
	position: relative;
	margin-bottom: 1.5em;
	padding: 0.5em 0;
	color: #fff;
	font-size: 1.6em;
	font-weight: 900;
	text-shadow: 1px 1px 2px #000;
	text-align: center;
	background: #d31a1a;
	border-radius: 15px;
}
.sectionbrand_inner h3:before{
	position: absolute;
	content: '';
	background-image: url("../img/kawaiiapitan.webp");
	background-repeat: no-repeat;
	background-size: contain;
	width: 230px;
	height: 260px;
	top: -60px;
	left: 50px;
}
.sectionbrand_inner ul{
	font-size: 0;
}
.sectionbrand_inner ul li{
	display: inline-block;
	width: 32%;
	margin: 0 2% 0 0;
	padding: 20px;
	text-align: center;
	background: #fff;
	border-radius: 13px;
	box-shadow: 4px 4px 2px #9b9b9b;
}
.sectionbrand_inner ul li:last-child{
		margin-right: 0;
}
.sectionbrand_inner ul li a{
		display: inline-block;
		text-decoration: none;
}
.sectionbrand_inner ul li a:hover{
		opacity: 0.5;
		transition: 0.3s;
}
.sectionbrand_inner ul li img{
		width: 100%;
}
.sectionbrand_inner ul li h4{
	padding: 15px 0 7px 0;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #d31a1a;
	text-align: left;
	border-bottom: 2px solid #d31a1a;
}

.sectionbrand_inner ul li p{
	font-size: 15px;
	text-align: left;
}

@media screen and (max-width:1280px) {
	.section_brand:before{
		height: 15%;
		top: -5%;
	}
	.sectionbrand_inner{
		width: calc(100% - 2em);
		margin: 0 auto;
		padding: 6.5em 0 3em 0;
	}
	.sectionbrand_inner h3{
		margin-bottom: 1.3em;
		padding: 0.5em 0;
		font-size: 1.3em;
		border-radius: 15px;
	}
	.sectionbrand_inner h3:before{
		width: 150px;
		height: 190px;
		top: -35px;
		left: 10px;
	}
	.sectionbrand_inner ul li{
		margin: 0 2% 0 0;
		padding: 20px;
	}
	.sectionbrand_inner ul li h4{
		padding: 13px 0 7px 0;
		margin-bottom: 10px;
		font-size: 17px;
		letter-spacing: 0.5px;
	}
	.sectionbrand_inner ul li p{
		font-size: 14px;
	}
}

@media screen and (max-width:768px) {
	.section_brand:before{
		height: 6.3%;
		top: -2.8%;
	}
	.sectionbrand_inner{
		width: calc(100% - 2em);
		margin: 0 auto;
		padding: 6.5em 0 3em 0;
	}
	.sectionbrand_inner h3{
		margin-bottom: 0.9em;
		padding: 0.6em 0;
		font-size: 1.2em;
		border-radius: 10px;
	}
	.sectionbrand_inner h3:before{
		width: 95px;
		height: 190px;
		top: -50px;
		left: -7px;
	}
	.sectionbrand_inner ul{
		font-size: 0;
	}
	.sectionbrand_inner ul li{
		display: block;
		width: 100%;
		max-width: 600px;
		margin: 0 auto 17px auto;
		padding: 20px 25px 17px 25px;
		border-radius: 13px;
	}
	.sectionbrand_inner ul li:last-child{
		margin: 0 auto 0 auto;
	}
	.sectionbrand_inner ul li a{
		display: inline-block;
	}
	.sectionbrand_inner ul li img{
		width: 100%;
	}
	.sectionbrand_inner ul li h4{
		padding: 15px 0 7px 0;
		margin-bottom: 10px;
		font-size: 16px;
		letter-spacing: 1px;
	}
	.sectionbrand_inner ul li p{
		font-size: 14px;
	}
}

/* =========================================================
ページトップ リンク
========================================================= */
/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #D70C18;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all 0.3s;
}
#page-top a:hover {
  background: #777;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
  bottom: 10px;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

@media screen and (max-width: 960px) {
  #page-top.UpMove {
    animation: UpAnime 0.5s forwards;
    bottom: 10px;
  }
}

@media screen and (max-width:768px) {
	#page-top {
  right: 20px;
  bottom: 10px;
}
}

/*---------------------------------------------
フッター
---------------------------------------------*/
footer {
  padding: 20px 0;
  font: Arial, Helvetica, sans-serif;
  background: #000;
		text-align: center;
}
footer a {
  color: #fff;
  text-decoration: none;
}

footer address {
  color: #fff;
}

@media screen and (max-width:1280px) {
  footer {
    width: 100%;
  }
}

/* sp */
@media screen and (max-width: 520px) {
  footer {
    padding: 10px 0;
  }

  footer a {
    font-size: 0.5em;
  }

  #page-top a {
    margin: 0 -10px 0 0;
  }
}