/* ******************************************************************
 *	File name		: style.css
 *	Summary			: css base
 * ******************************************************************
 */

 :root {
	--primary-color: #00ABEB;
}



/* -----------------------------------------------------------------
   header
----------------------------------------------------------------- */

#wrapper{
	padding-top:90px;
}

/* --- responsive --- */
@media only screen and (max-width:960px){
	#wrapper{
		padding-top:60px;
	}
}

header{
	height:90px;
	background:#FFF;
	}
	header h1::before{
		background-color: #000;
	}
	header h1 a{
		color:#000 !important;
	}
	header nav{
		top:0px;
		height:100%;
	}
	header nav > ul > li > a{
		color:#000;
	}
	header nav > ul > li.active a,
	header nav > ul > li > a:hover{
		color:#00ABEB;
	}
	header nav > ul > li > a::after{
		background:#00ABEB;
}
header #nav_icon::before,
header #nav_icon::after,
header #nav_icon span{
	background:#000;
}

/* -----------------------------------------------------------------
   page_head
----------------------------------------------------------------- */

#page_head{
	position:relative;
	height:450px;
	margin:0 0 80px;
	}
	#page_head:has(#page_menu){
		height:480px;
}

/* -----------------------------------------------------------------
   title
----------------------------------------------------------------- */

#page_title{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:450px;
	background:#555;
	color:#FFF;
}
#page_title h1{
	display:inline-block;
	position:relative;
	font-size:4.5rem;
	line-height:1.35;
	text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.35);
	z-index: 6;
	}
	#page_title h1 span{
		display:block;
		font-weight:400;
		font-size:1.4rem;
		letter-spacing:5px;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#page_title h1{
		font-size:2.4rem;
		text-align: center;
		}
		#page_title h1 span{
			font-size:1.0rem;
	}
}

/* -----------------------------------------------------------------
   pnkZ
----------------------------------------------------------------- */

#pnkz{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	bottom:0px;
	left:50%;
	width:940px;
	height:45px;
	padding:0 20px;
	max-width:100%;
	text-align:left;
	background:none;
	list-style:none;
	transform:translate(-50%,0);
	z-index:100;
	overflow:hidden;
	}
	#page_head:has(#page_menu) #pnkz{
		bottom:70px;
	}
	#pnkz *{
		font-size:0.87rem;
		color:#FFF;
	}
	#pnkz ul{
		position:relative;
		width:900px;
		max-width:100%;
		margin:0 auto;
		list-style:none;
	}
	#pnkz ul li{
		display:inline-block;
		position:relative;
		padding-left:30px;
		}
		#pnkz ul li::before{
			content:" ";
			position:absolute;
			top:calc(50% - 5px);
			left:0px;
			border: 6px solid transparent;
			border-left: 6px solid #FFF;
			margin:0 12px;
		}
		#pnkz ul li:first-child{
			padding-left:0px;
		}
		#pnkz ul li:first-child::before{
			display:none;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#pnkz{
		display:none;
	}
}

/* -----------------------------------------------------------------
   page_menu
----------------------------------------------------------------- */

#page_menu{
	position:relative;
	max-width:100%;
	height:70px;
	background-color: #fff;
	}
	#page_menu ul{
		width:100%;
		margin:0 auto;
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		height:100%;
	}
	#page_menu ul li{
		position:relative;
		width:100%;
		height:100%;
	}
	#page_menu ul li a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		height:100%;
		padding-right:10px;
		font-size:1.0rem;
		font-weight: 400;
		color:#000;
		transition-duration:0.5s;
		}
		#page_menu ul li a::after{
			content:" ";
			position:absolute;
			top:calc(50% - 3px);
			right:10px;
			border: 6px solid transparent;
			border-top:6px solid rgba(0,0,0,1);
			transition-duration:0.5s;
		}
		#page_menu ul li a:hover{
			text-decoration:none;
			background:rgba(0,0,0,0.05);
			color:#00ABEB;
			}
			#page_menu ul li a:hover::after{
				border-top:6px solid #00ABEB;
}

/* --- responsive --- */
@media only screen and (min-width:1080px){
	#page_menu ul{
		width: 900px;
	}
}
@media only screen and (max-width:767px){
	#page_menu{
		height:auto;
		/* padding:20px; */
		overflow: auto;
		}
		#page_menu ul{
			/* flex-wrap:wrap; */
			flex-wrap: inherit;
			white-space: nowrap;
			width: 100%;
			margin-inline: calc(50% - 50vw);
			padding-inline: 3%;
			overflow: auto;
		}
		#page_menu ul li{
			/* width:49%; */
			/* height:50px; */
			/* margin:0 0 10px; */
			/* border:1px solid rgba(0,0,0,0.2); */
			margin-left: -1.1rem;
			width: auto;
		}
		#page_menu ul li a{
			position: relative;
			font-size:0.87rem;
			letter-spacing: 0;
			padding: 1rem 1.7rem 1rem 1rem;
			position: relative;
			width: auto;
			line-height: 2rem;
	}
}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

section.fadein{
	transition:0.8s ease-in-out;
	transform:translateY(30px);
	opacity:0;
}
section.fadein.active{
	transform:translateY(0px);
	opacity:1;
}

section{
	position:relative;
	width:940px;
	max-width:100%;
	margin:0 auto;
	padding:20px 20px 90px;
}
.contents{
	position:relative;
	width:940px;
	max-width:100%;
	margin:0 auto;
	padding:20px 20px 90px;
}

/* --- responsive --- */
@media screen and (max-width:767px){
}

/* ----- */

.section_title{
	position:relative;
	left:-20px;
	width:900px;
	max-width: 100%;
	/* max-width:calc(100% + 80px); */
	margin:0 auto 20px;
	padding:20px;
	text-align:left;
	line-height:1.5;
	}
	.section_title h2{
		font-weight:600;
		font-size:2.8rem;
	}
	.section_title p{
		font-weight:400;
		font-size:1.2rem;
		letter-spacing:2px;
		padding-left: 6px;
}

/* --- responsive --- */
@media screen and (max-width:1040px){

/* --- responsive --- */
@media screen and (max-width:640px){
	.section_title{
		left:0px;
		width:100%;
		max-width:100%;
		padding:20px 0px;
	}
}	.section_title h2{
		font-size:1.7rem;
		letter-spacing: 0;
	}
	.section_title p{
		font-size:1.0rem;
	}
}

/* ----- */


/* -----------------------------------------------------------------
   minchou h
----------------------------------------------------------------- */

.minchou{
	width:100%;
	margin:0 0 40px;
	font-weight:normal;
	font-size:2.3rem;
	font-family: 'Noto Serif JP', sans-serif;
	text-align:left;
	line-height:1.35;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	.minchou{
		font-size:1.7rem;
	}
}
@media only screen and (max-width:640px){
	.minchou{
		font-size:1.5rem;
	}
}

/* -----------------------------------------------------------------
   table
----------------------------------------------------------------- */

table{
	position:relative;
	width:100%;
	border-collapse:collapse;
	border-spacing:0px;
	border:1px solid #DDD;
	line-height:2;
}
table th,
table td{
	min-width:120px;
	padding:10px;
	text-align:left;
	font-size:1.0rem;
}
table th{
	background:#00ABEB;
	border:1px solid #FFF;
	color:#FFF;
	width: 220px;
}
table td{
	border:1px solid #DDD;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	table th,
	table td{
		font-size:0.87rem;
	}
}
/* --- responsive --- */
@media screen and (max-width:500px){
	table th,
	table td{
		font-size:0.9rem;
	}
	table th {
		width: auto;
	}
}

/* -----------------------------------------------------------------
   whats_tozawabuta
----------------------------------------------------------------- */

#whats_pork{
	position:relative;
	padding:120px 0 1px;
	background:#FFF;
	}
	#whats_pork section{
		width:1260px;
		line-height:1.5;
	}
	#whats_pork section h2{
		position:relative;
		width:100%;
		margin:0 0 50px;
		font-weight:normal;
		font-size:3.5rem;
		font-family:'Noto Serif JP', sans-serif;
		text-align:left;
}

#pork_contents{
	width:100%;
	}
	#pork_contents ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:center;
		flex-wrap:wrap;
		height:450px;
		margin:0 0 80px;
	}
	#pork_contents ul li{
		width:33.3333%;
		background:url(../../image/top/pork_contents_01.jpg) no-repeat 0 0;
		background-size:cover;
	}
	#pork_contents ul li:nth-child(2){background:url(../../image/top/pork_contents_02.jpg) no-repeat 0 0;
		background-size:cover;
	}
	#pork_contents ul li:nth-child(3){background:url(../../image/top/pork_contents_03.jpg) no-repeat 0 0;background-size:cover;
	}
	#pork_contents ul li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		padding:185px 60px 0;
		color:#FFF;
		background:rgba(0,0,0,0.3);
		transition-duration:0.5s;
		}
		#pork_contents ul li a:hover{
			text-decoration:none;
			background:rgba(0,0,0,0.6);
	}
	#pork_contents ul li a::before{
		content:"01";
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:140px;
		font-weight:normal;
		font-size:2.8rem;
		text-align:center;
		color:#FFF;
		}
		#pork_contents ul li:nth-child(2) a::before{content:"02";}
		#pork_contents ul li:nth-child(3) a::before{content:"03";}

	#pork_contents ul li a::after{
		content:" ";
		position:absolute;
		left:calc(50% - 24px);
		bottom:30px;
		width:48px;
		height:48px;
		background:url(../../image/top/next.png) no-repeat 0 0;
	}
	#pork_contents ul li a h3{
		margin:0 0 20px;
		font-weight:bold;
		font-size:1.7rem;
		text-align:center;
	}
	#pork_contents ul li a p{
		font-size:1.0rem;
		text-align:left;
		line-height:1.75;
}

.top_pork_photo{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	margin:0 0 100px;
	}
	.top_pork_photo.reverse{
		flex-direction:row-reverse;
		margin:0px;
	}
	.top_pork_photo figure{
		width:750px;
		}
		.top_pork_photo figure img{
			-moz-border-radius:10px;
			-webkit-border-radius:10px;
			border-radius:10px;
	}
	.top_pork_photo > div{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		width:calc(100% - 810px);
		text-align:left;
	}
	.top_pork_photo > div > div{
		display:inline-block;
}

.top_pork_photo h3{
	margin:0 0 25px;
	font-weight:600;
	font-size:2.5rem;
	line-height:1.5;
	}
	.top_pork_photo h3 + p{
		margin:0 0 25px;
		font-weight:400;
		font-size:1.1rem;
		text-align:justify;
		line-height:1.8;
}

#viewmore{
	position:absolute;
	top:140px;
	right:0px;
	}
	#viewmore a::before,
	#viewmore a::after{
		content:" ";
		position:absolute;
		transition-duration:0.5s;
	}
	#viewmore a::before{
		top:calc(50%);
		left:-30px;
		width:16px;
		height:1px;
		background:#0061B1;
	}
	#viewmore a::after{
		top:calc(50% - 5px);
		left:-26px;
		width:10px;
		height:10px;
		border-top:1px solid #0061B1;
		border-right:1px solid #0061B1;
		transform:rotate(45deg);
	}

.spbr {
	display: none;
}
@media screen and (max-width: 480px) {
	.spbr {
		display: block;
	}
}