@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);

	#main {
		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;
	}

	#main h3,
	#main h4 {
		margin-bottom: 20px !important;
	}

	#main .txt,
	#main .lead {
		margin: 0 5%;
		display: block;
		font-size: 100%;
		padding: 0 !important;
		line-height: 1.5;
	}

	#main .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(/img/usr/freepage/brandimg/sp_sozaiback.jpg);
	}

	.balanceback {
		background-image: url(/img/usr/freepage/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;
	}

}