@charset "UTF-8" ;


/* ヘッダー読み込み */
#headerroadSP{
	display:none;
}

/* フッター読み込み */
#footerroadSP{
	display:none;
}
#SPfooterOG{
	display:none;
}
.SPfooterBTN{
	display:none;
}

.OGfeed h2 img{
	margin-bottom:20px;
}

.OGfeed .feedmenu1{
	margin-top:1em;
	padding:0 3em;
	border-right:1px solid #000;
}
.OGfeed .feedmenu2{
	margin-top:1em;
	padding:0 3em;
}


.dishSP{
	display:none;
}

.btnscrollR li{
		float:left;
		margin:0 20px 10px 0px;
	}
	
.btnscrollR li img{
		width:240px;
		height:auto;
	
	}
.btnscrollTXT{margin:20px 0 0 0;}	
.btnscrollTXT li{
		margin:5px 0 0 0;
	}



/* スマホだけに適用するCSS */
@media screen and (max-width:768px)
{
	/* ヘッダー読み込み */
	#headerroadPC{
		display:none;
	}
	#headerroadSP{
		display:inherit;
	}
	/* フッター読み込み */
	#footerroadPC{
		display:none;
	}
	#footerroadSP{
		display:inherit;
	}
	.SPfooterBTN{
		display:inherit;
	}

	.dishSP{
		display:inherit;
	}
	/* スマホ非表示部分 */
	#breadcrumbs{
		display:none;
	}
	#campaignList{
		display:none;
	}
	#breadcrumbs{
		display:none;
	}
	.feature{
		display:none;
	}
	.merit{
		display:none;
	}
	.view{
		display:none;
	}
	.OGfeedBTN{
		display:none;
	}
	.SPOGfeedBTN{
		display:inherit;
	}
	.dishPC{
		display:none;
	}


		
	/* スマホ用に整形 */
	@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

	
	body{
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
	line-height:1.4em;
	}
	h3,h4{
		margin-bottom:20px!important;
	}
	
	.txt,
	.lead{
		margin:0 5%;
		display: block;
		font-size: 100%;
		padding:0!important;
		line-height: 1.5;
	}
	.lead{
		font-size:120%;
		font-weight:bold;
		border-bottom:1px solid #000;
	}
	
	footer {
    	padding-top: 20px!important;
	}
	#main #article h2{
		background:none!important;
		padding:0!important;
	}
	
	#main #article_no h2{
		background:none!important;
		padding:0!important;
	}
	#main #article h2 img{
		width: 100%;
		height: auto;
	}
	#main #article_no h2 img{
		width: 100%;
		height: auto;
	}
	.section{
		margin: 0 0 40px;
	}
	.section .img img{
		display:block;
		margin:0 auto 20px;
		width: 90%;
		height: auto;
	}
	.btn .hoveropacity img{
		display:block;
		margin:20px auto;
	}
	#article .imgArea img{
		display: block;
		margin: 0 auto 20px;
		width: 90%;
		height: auto;
	}
	#article_no .imgArea img{
		display: block;
		margin: 0 auto 20px;
		width: 90%;
		height: auto;
	}
	.itemDetail{
    	display: flex;
		flex-direction: column;
	}
	.itemDetail .lead{
		order: -2;
		margin-bottom:20px;
	}
	.imgArea{
		order: -1;
	}
	.itemDetail h3{
		order: -4;
	}
	.itemDetail h4{
		order: -3;
	}
	.itemDetail .txtArea h4{
		order:0;
	}


	
	.itemRelation ul li .img img{
		border: #dcdddf 1px solid!important;
		width: 100%!important;
		height: auto!important;
	}
	.itemRelation ul{
		padding: 0!important;
	}
	.itemRelation ul li{
		display: inline-block;
		width:43%!important;
		margin-right:3%;
		margin-left:3%;
		margin-bottom: 20px;
		padding: 0!important;
		vertical-align: top;
		float:none!important;
	}
	.itemRelation ul li .btn{
		display:none!important;
	}
	.itemRelation ul li .txt{
		line-height:!important;
		font-size:!important;
	}
	
	.itemDetail .img img{
		display: block;
		margin: 0 auto;
	}
	.btnscrollR{
		margin-top:10px;
		margin-bottom:10px;
	}
	
	.btnscrollR li{
		margin-left:40px;
	}

	
	.btnscrollL{
		margin-bottom:20px;
	}
	.imgwide{
		order:-3;
		margin-bottom: 20px;
	}
	.imgwide img{
		width:100%!important;
		height:auto!important;
		display: block;
	}
	
	
	/* ページ送り */
.pageNav_area{
	margin:30px 0;
	padding: 10px 10px 5px;
	text-align: center;
	background:#EFEFEF;
}


.pageNav01 {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	text-align: center;
}

.pageNav01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}

.pageNav01 li span,
.pageNav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}

.pageNav01 li a:hover {
	background: #F8E6EE;
	border-color: #CF0058;
}
	
	/* 以下ポチオリジナル用SPレスポンシブ部分 */
	
	/* フッター読み込み */
	#footerOG{
		display:none;
	}
	#SPfooterOG{
		display:inherit;
	}
	.align-right{
		text-align:right;
	}
	.align-center{
		text-align:center;
	}
	#SPfooterOG{
		margin-top:20px;
	}
	#SPfooterOG .imgArea img{
		display: block;
		margin: 0 auto 20px;
		width: 65%;
		height: auto;
	}
	#SPfooterOG .lead{
		font-size:140%;
	}
	.textred{
		color:#9f1a1a;
	}
	.SPtrialOG {
		background-color:#ebeae6;
		margin:30px 0 0;
		padding:20px 0;
	}
	.SPtrialOG .price{
		font-size:140%;
		font-weight:bold;
	}
	.SPtrialOG .lead{
		font-size:140%;
		border:none;
		margin-bottom: 20px;
	}
	.SPfooterBTN{
	}

	.SPfooterBTN .imgwide{
		margin-bottom: 0px;
	}
	.SPfooterBTN .footerBTN{
		margin: 0 ;
		background-color: #ffcd3e;
		font-size: 120%;
		border-bottom:1px solid #000;
	}
	.faColorBTN {
		color: #ffcd3e;
	}
	.SPfooterBTN .fa{
		margin-right:10px;
	}
	.SPfooterBTNtxt{
		text-align:center;
	}
	#SPfooterOG .SPcampaignBN .imgwide img{
		margin:0;
	}	
	#SPfooterOG .SPcampaignBN .imgwide{
		margin:0;
	}
	.footerBTN a{
		text-decoration:none;
		display: block;
		padding: 20px;
	}
	
	/* the-dogfood.xhtml */
	.sectiontopbox {
    	width: 100%;
    	height: 100%;
	}
	#main .ttltxt,
	#main .ttltxt3 {
    	padding: 0;
    	text-align: center;
	}
	#main .ttltxt2{
		padding: 30px;
		margin:0;
		text-align: center;
	}
	#main .ttltxt2 a:link,
	#main .ttltxt2 a:visited,
	#main .ttltxt4 a:link,
	#main .ttltxt4 a:visited{
		color: #333;
	}
	#main .mainpochiback .ttltxt{
		font-size: 120%;
		color: #333;
		text-shadow:1px 0px 10px rgba(255, 255, 255, 1),
					1px 0px 15px rgba(255, 255, 255, 1),
					1px 0px 20px rgba(255, 255, 255, 1),
					1px 0px 30px rgba(255, 255, 255, 1);
	}
	#main .mainpochiback .ttltxt3{
		margin: 30px 0;
		color: #333;
		font-size: 180%;
		text-shadow:1px 0px 10px rgba(255, 255, 255, 1),
					1px 0px 15px rgba(255, 255, 255, 1),
					1px 0px 20px rgba(255, 255, 255, 1),
					1px 0px 30px rgba(255, 255, 255, 1);
	}	
	#main .mainpochiback .ttltxt2,
	#main .mainpochiback .ttltxt4{
		padding: 20px;
		margin: 0;
		text-align: center;
		background-color: #ffcd3e;
		font-size:120%;
		border-bottom:1px solid #000;
	}
	.mainpochiback{
		margin:0;
		background-size: 160%;
	}
	.sectionbox,
	.sectionbox2 {
		width: 100%;
	}
	.redback{
		margin:0;
	}
	#main .redback .ttltxt,
	#main .redback .txt16,
	#main .section .txt16 {
		padding: 20px;
		font-size:100%;
	}
	.sectionimgbox {
    	width: 100%;
    	height: 250px;
	}
	.freshmeatback,
	.recipe2back,
	.ourkitchenback {
	    background-position: center;
	}
	#main .section .subttl16{
		display: block;
		padding: 0 20px;
		margin: 0;
	}
	.sozaiback {
	    background-image: url(/client_info/POCHI/view/userweb/ext/pochi/brandimg/sp_sozaiback.jpg);
	}
	.balanceback {
	    background-image: url(/client_info/POCHI/view/userweb/ext/pochi/brandimg/sp_balanceback.jpg);
	}
	.spcomment1,
	.spcomment2{
		margin: 0 5%!important;
		padding:0 5%!important;
		width:80%!important;
		font-size: 100%!important;
		line-height: 1.2em!important;
	}
	
	/* feed */
	.OGfeed #table3col tbody th,
	.OGfeed #table2col tbody th{
		text-align:center;
		background-color:#c1bcb3;
	}
	.OGfeed #table3col tbody td{
		padding: 5px;
	}	
	.OGfeed .feedmenu1,
	.OGfeed .feedmenu2{
		display: block;
		background-color: #f1f3f6;
		padding: 1em 10px;
		border-bottom: 1px solid #3e5a89;
		margin: 0;
		border-right: none;
		font-weight: normal;
	}
	.OGfeed .feedmenu1 a:link,
	.OGfeed .feedmenu2 a:link{
		text-decoration: none;
	}
	#main .OGfeed .txt{
		font-size:100%;
	}
	.table8col{
		font-size:80%;
		margin: 0 5%!important;
	}
	#table3col,
	#table2col {
		margin: 0 auto!important;
	}
	.OGfeed h2 img {
    	margin-bottom: 0!important;
	}
	.scroll table{
		width:100%;
	}
	.scroll{
		overflow: auto;　　　　/*tableをスクロールさせる*/
		white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
	}
	.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
		height: 5px;
	}
	.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
		background: #F1F1F1;
	}
	.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
		background: #BCBCBC;
	}
	.scroll table td{
		border: 1px solid #d9d8d8;
		padding:1em;
		white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
	}
	/* thedogfood_campaign.xhtml */
	#main .OGCPmain{
		margin:0;
		background-position: center;
	}
	#main .OGCPmain .sectiontopbox{
		width: 90%;
		margin: 0 5% ;
		padding-bottom: 20px;
	}
	#main .OGCPmain .ttltxt{
		font-size:120%;
		padding: 20px 0;
		margin: 0 5%;
	}
	#main .OGCPmain .txtb{
		font-size: 80%;
		text-align: center;
	}
	#main .OGCPmain .ttltxt3{
		margin: 30px 0;
		font-size:180%;
		color: #333;
		text-shadow: 1px 0px 10px rgba(255, 255, 255, 1),
					 1px 0px 15px rgba(255, 255, 255, 1),
					 1px 0px 20px rgba(255, 255, 255, 1),
					 1px 0px 30px rgba(255, 255, 255, 1);
	}
	#main .OGCPmain .OGCPnone{
		display: none;
	}
	#main .OGCPmain .section{
		margin: 0;
	}
	
	#main .OGCPmain .sectionbox{
	    width: 90%;
    	margin: 0 5%;
	}
	#main .OGCPmain .txt16,
	#main .OGCPmain .txt16onimg{
		line-height: 1.4;
	}
	#main .campaingredback .txt16{
		padding:0;
	}
	
	#main .OGCPmain .dogfoodback{
		
	}
	.OGCPmain .sectionimgbox{
		height:auto;
		margin:0;
		padding-bottom:20px;
	}
	#main .section .txt16onimg {
    	font-size: 100%;
    	line-height: 1.4;
    	margin: 0 5%;
	}
	.OGCPmain .imgleft img,
	.OGCPmain .imgright img{
		width: 100%;
		height: auto;
		float:none;
		margin:0;
	}
	#main .section .OGSPbtn{
		margin-top:-30px!important;
	}
	#main .section .OGSPtxt17{
		margin:0!important;
	}
	
	
	/* dish_menu.xhtml */
	.OGSPdishttl img{
		width: 90%;
		margin: 0 5%;
	}
	
	
	/* TOPスクロール */
	#pageTop {
		bottom: 20px;
		right: 20px;
	}
	#pageTop a {
		display: block;
		position: fixed;
		z-index: 999999;
		padding: 10px;
		border-radius: 30px;
		width: 35px;
		height: 35px;
		background-color: #ea5b7a;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
	}
	#pageTop a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
	
	/* 要素の表示/非表示 */
	.openBtn {
		cursor: pointer;
		padding: 15px;
		margin-bottom: 15px;
		border: 1px solid #ffcd3e;
		color: #666;
		font-size: 90%;
	}

	.openBtn:hover {
		opacity: 0.7;
	}

	/* 説明文 */
	.textArea {
		display: none;
		padding: 10px 10px 30px !important;
		color: #666;
		font-size: 90%;
	}

	/* 表示ボタン ー 逆三角アイコン */

	.faColor {
		color: #ffcd3e;
	}
	
	/* dish00.html */
	#article .SPdish .ttltxt{
		color:#333!important;
		text-align: left;
		font-size: 120%;
		margin: 10px 5% 0;
	}

	/* dish02.html */
	.dishpage .section{
		margin:0;
	}	
	
	#main .sectionbox .ttlfix{
		font-size: 150%;
	}
	
	/*ランキング用追加　*/
	#article .item3 ul .rankinglist1,
	#article .item3 ul .rankinglist2,
	#article .item3 ul .h380{
		height:auto !important;
	}
	
		/*ページイメージ3列　*/
	#main #article .SPtopimg3 img{
		width:33%;
		height:auto !important;
	}


  	
  .cat_slider img{
	      width:260px;
		  margin:auto;
		  display: block;

	}
.colum_comment01{
		margin:0 5%;
		display: block;
		font-size: 100%;
		padding:0!important;
		line-height: 1.5;
	}
	
.colum_comment02{
		margin:0 5%;
		display: block;
		font-size: 100%;
		padding:0!important;
		line-height: 1.5;
	}
.colum_h4{
	font-weight: bold;
    font-size: 20px!important;
    line-height: 1.5;
	border-left:5px #ea5b7a solid!important;
	border-bottom:none!important;
	padding:0 0 0 8px!important;
	margin:50px 0 0 0!important;}
	
}