@charset "euc-jp";
/* CSS Document */



/********************************************************

 【スマートフォン】トップページ
 
 ********************************************************/
@media screen and (min-width: 0px) and (max-width: 767px){
#container {
    width: 100%;
	max-width:100%;
	margin:0;
	padding-top: 14.5vw;
}

/*slider*/
#index .slider{
	position:relative;
}
#index .slider .bx-viewport{
	border:none;
	background:none;
    box-shadow: none;

}
#index .slider .bx-viewport img{
	height:99vw;
	margin:0 auto;
	object-fit: cover;
}
#index .slider #slider div{
	width:100% !important;
}
#index .slider .txt-main{
	position: absolute;
	top:50%;
	left:50%;
	margin:-9.3vw 0 0 -32vw;
	
}
#index .slider .txt-main{
	width:64vw;
}
#index .slider .txt-main img{
	width:100%;
}

/*グローバルナビ*/
#index .nav{
	padding:3vw 0;
}
#index .nav ul{
	display:flex;
	justify-content: center;
	list-style:none;
	margin:0;
	padding:0;
}
#index .nav ul:first-child{
	margin:0 0 2vw;
}
#index .nav ul li a{
	color:#ffffff;
	display:inline-block;
	font-size:4.4vw;
}
#index .nav ul li:first-child a:before{
	content:"|";
	color:#ffffff;
	padding:0 3vw;
}
#index .nav ul li a:after{
	content:"|";
	color:#ffffff;
	padding:0 3vw;
}


/*お知らせ*/
#index .information{
	background:#eeeeee;
}
#index .information .information-wrapper{
	margin:0 auto;
	padding:5vw 5vw 3vw;
}
#index .information .information-wrapper ul{
	list-style:none;
}
#index .information .information-wrapper ul li{
	font-size:4vw;
	color:#000000;
	margin:0 0 3vw;
}
#index .information .information-wrapper ul li a{ 
	font-size:4vw;
	color:#000000;
}
#index .information .information-wrapper ul li .datetime{
	display:block;
	margin:0 0 1vw;
}
#index .information .information-wrapper ul li .title{
	display:block;
}


/*トピックス*/
#index .topics{
	color: #000;
	background:#ffffff;
	text-align: center;
	font-size: 6vw;
	padding: 8vw 0 2vw;
}
#index .topics .mark1{
	text-align: center;
	font-size: 4.6vw;
}

/*おすすめ商品*/
#index .recommend{
	background:#ffffff;
}
#index .recommend-inner{
	margin:0 auto;
	padding:9vw 3vw 7vw;
}
#index .recommend h2{
	font-size:6vw;
	border-bottom:1px solid #000000;
	color:#000000;
	margin:0 0 5vw;
	text-align:left;
}
#index .recommend ul{
	list-style:none;
	margin:0 2vw;
	padding:0;
}
#index .recommend ul li{
	display:flex;
	justify-content: space-between;
	margin:0 0 3.5vw;
}
#index .recommend ul li .thumb{
	width:50%;
}
#index .recommend ul li .thumb img{
	width:100%;
}
#index .recommend ul li .name-price{
	width:47%;
}
#index .recommend ul li .name{
	font-size:4vw;
	color:#000000;
}
#index .recommend ul li .price{
	font-size:4vw;
	color:#c80000;
	text-align:right;
}
#index .recommend ul li .price .tax{
	font-size:4vw;
}

/*ランキング*/
#index .ranking{
	background:#ffffff;
}
#index .ranking-inner{
	margin:0 auto;
	padding:0 3vw 7vw;
}
#index .ranking h2{
	font-size:6vw;
	border-bottom:1px solid #000000;
	color:#000000;
	margin:0 0 5vw;
	text-align:left;
}
#index .ranking ul{
	list-style:none;
	margin:0 2vw;
	padding:0;
}
#index .ranking ul li{
	display:flex;
	justify-content: space-between;
	margin:0 0 3.5vw;
}

#index .ranking ul li .thumb{
	width:50%;
	position: relative;
}
#index .ranking ul li .thumb img{
	width:100%;
}
#index .ranking ul li:nth-child(1) .thumb:after{
	content:"1";
	color: #ffffff;
	background-color: #E3A43E;
	font-size: 4.2vw;
	position: absolute;
	top: 1.5vw;
	left: 1.5vw;
	border-radius: 50%;
	width: 9vw;
	height: 9vw;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li:nth-child(2) .thumb:after{
	content:"2";
	color: #ffffff;
	background-color:#636363;
	font-size: 4.2vw;
	position: absolute;
	top: 1.5vw;
	left: 1.5vw;
	border-radius: 50%;
	width: 9vw;
	height: 9vw;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li:nth-child(3) .thumb:after{
	content:"3";
	color: #ffffff;
	background-color: #7A4406;
	font-size: 4.2vw;
	position: absolute;
	top: 1.5vw;
	left: 1.5vw;
	border-radius: 50%;
	width: 9vw;
	height: 9vw;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li .name-price{
	width:47%;
}
#index .ranking ul li .name{
	font-size:4vw;
	color:#000000;
}
#index .ranking ul li .price{
	font-size:4vw;
	color:#c80000;
	text-align:right;
}



/*一志SPポークについて*/
#index .about_ichishi_sp_pork{
	width:100%;
}
#index .about_ichishi_sp_pork .img-txt{
}

#index .about_ichishi_sp_pork .img-txt .txt-box{
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box{
	padding:13vw 5vw 16vw;
}


#index .about_ichishi_sp_pork .img-txt .txt-box .box h2{
	font-size:6vw;
	padding:0;
	margin:0 0 4vw;
	text-align:left;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box .txt{
	font-size:4vw;
	line-height:1.75;
	margin:0 0 9vw;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box .btn-details{
	width:89%;
	margin:0 auto;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box .btn-details a{
	font-size:3.6vw;
	color:#ffffff;
	background:#977a48;
	display:block;
	padding:3vw 0;
	text-align:center;
}
#index .about_ichishi_sp_pork .img-txt .img-box{
	width:100%;
	position:relative;
}
#index .about_ichishi_sp_pork .img-txt .img-box .img img{
	max-width: none !important;
	width: 100%;
	
}
#index .about_ichishi_sp_pork .txt-on{
	position: absolute;
	top: -11vw;
	right:2vw;
	font-size: 12vw;
	color:#535353;
	line-height:0.9;
	text-align:right;
	white-space: nowrap;
}






/*まるとも荒木田商店について*/
#index .about_marutomo_arakida_store{
	width:100%;
	background:#ffffff;
}
#index .about_marutomo_arakida_store .img-txt{
}

#index .about_marutomo_arakida_store .img-txt .txt-box{
	width:100%;
	color:#000000;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box{
	padding:13vw 5vw 16vw;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box h2{
	font-size:6vw;
	padding:0;
	margin:0 0 4vw;
	text-align:left;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box .txt{
	font-size:4vw;
	line-height:1.75;
	margin:0 0 9vw;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box .btn-details{
	width:89%;
	margin:0 auto;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box .btn-details a{
	font-size:3.6vw;
	color:#ffffff;
	background:#977a48;
	display:block;
	padding:3vw 0;
	text-align:center;
}
#index .about_marutomo_arakida_store .img-txt .img-box{
	width:100%;
	position:relative;
}
#index .about_marutomo_arakida_store .img-txt .img-box .img img{
	max-width: none !important;
	width: 100%;
	
}
#index .about_marutomo_arakida_store .txt-on{
	position: absolute;
    top: -11vw;
	left:2vw;
	font-size: 12vw;
	color:#dcdcdc;
	line-height:0.9;
	white-space: nowrap;
}



/*バナー*/
#index .bnrs{
	background:#eeeeee;
	padding:9vw 5vw 4vw;
}
#index .bnrs ul{
    margin: 0 auto;
}
#index .bnrs ul li{
	margin:0 0 5vw;
}

#index .bnrs ul li img{
	width:100%;
}

}





/********************************************************

【PC】トップページ

********************************************************/
@media screen and (min-width: 768px){
#container {
    width: 100%;
	max-width:100%;
	padding-top: 95px;
}

/*slider*/
#index .slider{
	position:relative;
}
#index .slider .bx-viewport{
	border:none;
	background:none;
    box-shadow: none;

}
#index .slider .bx-viewport img{
	width:100%;
	max-width:100%;
	height:45vw;
	margin:0 auto;
	object-fit: cover;
}
#index .slider #slider div{
	width:100% !important;
}
#index .slider .txt-main{
	position: absolute;
	top:50%;
	left:50%;
	margin:-30px 0 0 -600px;
	
}


/*グローバルナビ*/
#index .nav{
	padding:15px 0;
}
#index .nav .nav-inner{
	display:flex;
	margin: 0 auto;
    width: 977px;
}
#index .nav ul{
	display:flex;
	justify-content: center;
	list-style:none;
	margin:0;
	padding:0;
}
#index .nav ul li a{
	color:#ffffff;
	display:inline-block;
}
#index .nav ul:first-child li:first-child a:before{
	content:"|";
	color:#ffffff;
	padding:0 50px;
}
#index .nav ul li a:after{
	content:"|";
	color:#ffffff;
	padding:0 50px;
}


/*お知らせ*/
#index .information{
	background:#eeeeee;
	width:100%;
}
#index .information .information-wrapper{
	width:1200px;
	margin:0 auto;
	padding:35px 0;
}
#index .information .information-wrapper ul{
	list-style:none;
}
#index .information .information-wrapper ul li{
	display:flex;
	font-size:16px;
	color:#000000;
}
#index .information .information-wrapper ul li a{ 
	font-size:16px;
	color:#000000;
}
#index .information .information-wrapper ul li .datetime{
	width: 120px;
}
#index .information .information-wrapper ul li .title{
	width: 1080px;
}

/*トピックス*/
#index .topics{
	color: #000;
	background:#ffffff;
	text-align: center;
	font-size: 30px;
	padding: 50px 0 0;
}
#index .topics .mark1{
	text-align: center;
	font-size: 22px;
}


/*おすすめ商品*/
#index .recommend{
	width:100%;
	background:#ffffff;
}
#index .recommend-inner{
	margin:0 auto;
	padding:60px 0 80px;
	width:1200px;
}
#index .recommend h2{
	font-size:30px;
	border-bottom:1px solid #000000;
	color:#000000;
	margin:0 0 30px;
	text-align:left;
}
#index .recommend ul{
	list-style:none;
	display:flex;
	justify-content: space-between;
	margin:0;
	padding:0;
}
#index .recommend ul li{
	width:360px;
}
#index .recommend ul li .thumb{
	margin:0 0 10px;
}
#index .recommend ul li .name{
	font-size:18px;
	color:#000000;
}
#index .recommend ul li .price{
	font-size:18px;
	color:#c80000;
	text-align:right;
}
#index .recommend ul li .price .tax{
	font-size:18px;
}

/*ランキング*/
#index .ranking{
	width:100%;
	background:#ffffff;
}
#index .ranking-inner{
	margin:0 auto;
	padding:0 0 80px;
	width:1200px;
}
#index .ranking h2{
	font-size:30px;
	border-bottom:1px solid #000000;
	color:#000000;
	margin:0 0 30px;
	text-align:left;
}
#index .ranking ul{
	list-style:none;
	display:flex;
	justify-content: space-between;
	margin:0;
	padding:0;
}
#index .ranking ul li{
	width:360px;
}
#index .ranking ul li .thumb{
	margin:0 0 10px;
	position: relative;
}
#index .ranking ul li .thumb img{
	width: 360px;
}
#index .ranking ul li:nth-child(1) .thumb:after{
	content:"1";
	color: #ffffff;
	background-color: #E3A43E;
	font-size: 24px;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li:nth-child(2) .thumb:after{
	content:"2";
	color: #ffffff;
	background-color:#636363;
	font-size: 24px;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li:nth-child(3) .thumb:after{
	content:"3";
	color: #ffffff;
	background-color: #7A4406;
	font-size: 24px;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 2;
}
#index .ranking ul li .name{
	font-size:18px;
	color:#000000;
}
#index .ranking ul li .price{
	font-size:18px;
	color:#c80000;
	text-align:right;
}


/*一志SPポークについて*/
#index .about_ichishi_sp_pork{
	width:100%;
	min-width: 1200px;
	position:relative;
}
#index .about_ichishi_sp_pork .img-txt{
	display:flex;
	flex-flow: row-reverse;
	height:625px;
}
#index .about_ichishi_sp_pork .img-txt .img-box{
	width:50%;
	height:625px;
	object-fit: cover; 
}
#index .about_ichishi_sp_pork .img-txt .img-box .img img{
	max-width: none !important;
	width: 100%;
    height: 625px;
    object-fit: cover;
	
}
#index .about_ichishi_sp_pork .img-txt .txt-box{
	width:50%;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box{
	padding:6% 0 0 15%;
	width:580px;
}


#index .about_ichishi_sp_pork .img-txt .txt-box .box h2{
	font-size:32px;
	padding:0;
	margin:0 0 20px;
	text-align:left;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box .txt{
	font-size:16px;
	line-height:1.875;
	margin:0 0 50px;
}
#index .about_ichishi_sp_pork .img-txt .txt-box .box .btn-details a{
	font-size:15px;
	color:#ffffff;
	background:#977a48;
	display:block;
	width:400px;
	padding:19px 0;
	text-align:center;
}
#index .about_ichishi_sp_pork .txt-on{
	position: absolute;
	bottom:30px;
	right:20px;
	font-size: 6.5vw;
	color:#535353;
	line-height:1;
	white-space: nowrap;
}






/*まるとも荒木田商店について*/
#index .about_marutomo_arakida_store{
	width:100%;
	min-width: 1200px;
	position:relative;
	background:#ffffff;
}
#index .about_marutomo_arakida_store .img-txt{
	display:flex;
	height:625px;
}

#index .about_marutomo_arakida_store .img-txt .txt-box{
	width:50%;
	color:#000000;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box{
	width:580px;
	margin: 6% auto 0;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box h2{
	font-size:32px;
	padding:0;
	margin:0 0 20px;
	text-align:left;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box .txt{
	font-size:16px;
	line-height:1.875;
	margin:0 0 50px;
}
#index .about_marutomo_arakida_store .img-txt .txt-box .box .btn-details a{
	font-size:15px;
	color:#ffffff;
	background:#977a48;
	display:block;
	width:400px;
	padding:19px 0;
	text-align:center;
}
#index .about_marutomo_arakida_store .img-txt .img-box{
	width:50%;
	height:625px;
	object-fit: cover; 
}
#index .about_marutomo_arakida_store .img-txt .img-box .img img{
	max-width: none !important;
	width: 100%;
    height: 625px;
    object-fit: cover;
	
}
#index .about_marutomo_arakida_store .txt-on{
	position: absolute;
	bottom:30px;
	left:20px;
	font-size: 6.5vw;
	color:#dcdcdc;
	line-height:1;
	white-space: nowrap;
}



/*バナー*/
#index .bnrs{
	background:#eeeeee;
	padding:60px 0;
}
#index .bnrs ul{
	display:flex;
	flex-wrap: wrap;
	width:1200px;
    margin: 0 auto;
}
#index .bnrs ul li{
	width:580px;
	margin:0 40px 0 0;
}
#index .bnrs ul li:nth-child(2n){
	margin:0;
}
#index .bnrs ul li img{
	width:100%;
}
}

/********************
【PC】トップページ
********************/
/*一志SPポークについて*/
@media screen and (min-width: 768px) and (max-width: 1300px){
	
	#index .about_ichishi_sp_pork .img-txt .txt-box .box{
		padding:6% 0 0 5%;
		width:580px;
	}

}