/*
Theme Name: サンマルコ食品株式会社
Description: サンマルコ食品株式会社用オリジナルテーマ
Version: 1.1
Author: Manae Ohigashi
*/
/*当サイトで利用しているWEBフォントについて------------------------------------------------------------------------
* “ロゴたいぷゴシック” licensed under the * M+ (LICENSE_J,LICENSE_E)
* http://www.fontna.com/blog/1226/（“ロゴたいぷゴシック”配布元のURL）
/*
* “鉄瓶ゴシック” licensed under the Apache License 2.0
* http://fontna.com/freefont/?p=12（“鉄瓶ゴシック”配布元のURL）
* http://osdn.jp/projects/opensource/wiki/licenses%2FApache_License_2.0（Apache License 2.0のURL）
-----------------------------------------------------------------------------------------------------*/
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@font-face{ 
	font-family: 'logotypegothic';
	src: url('font/logotypegothic.eot'); /* IE9以上用 */
	src: url('font/logotypegothic?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/logotypegothic.woff') format('woff'), /* モダンブラウザ用 */
		url('font/logotypegothic.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
@font-face{ 
	font-family: 'tetsubin';
	src: url('font/tetsubin.eot'); /* IE9以上用 */
	src: url('font/tetsubin?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/tetsubin.woff') format('woff'), /* モダンブラウザ用 */
		url('font/tetsubin.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
.fontEN { font-family: 'Montserrat', sans-serif;}
.fontJP { font-family: 'logotypegothic', 'Noto Sans Japanese', sans-serif;}
.fontJP2 { font-family: 'tetsubin', 'Noto Sans Japanese', sans-serif; font-weight: bold;}
.fontMIN { font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;}
/*------------------------RESET--------------------*/

html, body { width: 100%; height: 100%;}
/*-- RESET STYLE --*/

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol,ul {
	list-style: none;
	}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
	}
h1,h2,h3,h4,h5,h6,strong,h1 em,h2 em, h3 em,h4 em,h5 em,h6 em,strong em,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
	font-weight: bold;
	}
        
* {
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
}

button:focus { outline: none;}

 input[type="button"],
 input[type="submit"] {
    -webkit-appearance: none;
     border-radius: 0;
  }

a, a:hover, a:active { text-decoration: none;}

/* clear */
ul:after,
ol:after {
    content: ".";
    clear: both;
    display: block;
    font-size: 0.1em;
    height: 0.1px;
    line-height: 0;
    visibility: hidden;
    width: 0.1px;
} 

.clear { clear:both;}
/* forIE clear */
.clear {
    clear: both;
    height: 0.1px;
    margin: 0px;
    padding: 0px;
    width: 0.1px;
}
/*------------------------BASE--------------------*/
html,
body {
	width: 100%;
	height: 100%;
	background-color: #FFF6EE!important;
	color: #1D1D1D;
	font-size: 13.5px;
	font-family: 'Noto Sans Japanese', sans-serif;
}
.mainCnt {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

a,
.fade,
.pageAnchor a li {
        -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.moreBtn:hover { background-color: #FCC800;}
.floatL { float: left!important;}
.floatR { float: right!important;}

/*------------------------ HEADER --------------------*/
.homeHeadLogo {
    background-color: #C83A1C;
    width: 200px;
    padding: 30px;
    display: block;
    position: absolute;
    z-index: 5;
}
.homeHeadLogo img { width: 100%;}
.homeSliderCatch {
    position: absolute;
    top: 250px;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    z-index: 2;
}
.homeSliderCatch strong {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
    display: block;
}
.potetoSlider {
    width: 100%;
    max-width: 1200px;
    max-height: 550px;
    margin: 0 auto;
    position: relative;
    background-image: url('images/hokkaido.png');
    background-repeat: no-repeat;
    background-size: auto 85%;
    background-position: right center;
}
.pogoSlider-slide {
    background-position: center top;
    width: 60%!important;
    height: 55%!important;
    left: 50%;
    margin-left: -30%;
}
.homeSliderCom {
    width: 280px!important;
    right: 0%!important;
    top: 50px!important;
    position: absolute;
    z-index: 2;
}
.pogoSlider-progressBar,
.pogoSlider-dir-btn { display: none;}
.potetoSlider h1 {
    font-size: 11px;
    color: #fff;
    position: absolute;
    right: 0;
}
.homeSliderCnt { width: 100%;}
#wrap{
    width: 100%;
    height: 555px;
    margin: 0 auto;
    position: relative;
    border-top: 5px #C83A1C solid;
}
#backillust{
	width:100%;
	height: 550px;
        bottom: 0;
	position: absolute;
	background:url('images/backPhoto.jpg');
	animation: cloudmove 80s linear infinite;
	-webkit-animation: cloudmove 80s linear infinite;
	-moz-animation: cloudmove 80s linear infinite;
}
@keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 595px 0;}
	50% {background-position: 1190px 0;}
	75% {background-position: 1785px 0;}
	100% {background-position: 2381px 0;}
}
@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 595px 0;}
	50% {background-position: 1190px 0;}
	75% {background-position: 1785px 0;}
	100% {background-position: 2381px 0;}
}
@-moz-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 595px 0;}
	50% {background-position: 1190px 0;}
	75% {background-position: 1785px 0;}
	100% {background-position: 2381px 0;}
}
.shareBpx {
    width: 200px;
    height: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: #532011;
    color: #FFF6EE;
    font-size: 12px;
    padding: 8px 20px;
    line-height: 33px;
}
.shareBpx p { float: left; margin-right: 15px;}
.shareBpx img { height: 100%; margin-right: 5px;}
header {
    width: 100%;
    height: 80px;
    border-top: 5px #C83A1C solid;
    border-bottom: 5px #C83A1C solid;
    background-color: #fff;
    z-index: 10;
}
.headerNav {
    width: 90%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.headNav {
    width: 100%;
    height: 100%;
}
.headNav a {
    width: 12.5%;
    height: 100%;
    border-right: 1px #E8E1DA solid;
}
.headNav a:nth-child(2) { border-left: 1px #E8E1DA solid;}
.headNav a:hover { background-color: #E0E0E0;}
.headNav a li {
    width: 100%;
    text-align: center;
    font-size: 17px;
    color: #532011;
    font-weight: bold;
    margin-top: 17px;
}
.headNav a li span {
    display: block;
    text-align: center;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #C83A1C;
}

/*-------PAGE HEADER-----*/
.pageHeader {
    background-color: #C83A1C;
    width: 100%;
    height: 120px;
    padding: 20px 0 10px;
    text-align: center;
}
.pageHeader img { height: 100%; width: auto; margin: 0 auto;}
.page header,
.archive header,
.single header,
.error404 header {
    width: 100%;
    height: 70px;
    background-color: #C83A1C;
    border: 0;
}
.page .headNav a li,
.archive .headNav a li,
.single .headNav a li,
.error404 .headNav a li { color: #fff; font-size: 14px;}
.page .headNav a:hover li,
.archive .headNav a:hover li ,
.single .headNav a:hover li,
.error404 .headNav a:hover li { color: #C83A1C;}
.page .headNav a li span,
.archive .headNav a li span,
.single .headNav a li span,
.error404 .headNav a li span { color: #532011; font-weight: bold;}
.page .headNav a,
.page .headNav a:nth-child(2),
.archive .headNav a,
.archive .headNav a:nth-child(2),
.single .headNav a,
.single .headNav a:nth-child(2),
.error404 .headNav a,
.error404 .headNav a:nth-child(2) { border: 0;}
/*------------------------ FOOTER --------------------*/
#footer {
    position: relative;
    line-height: 2;
    background-color: #C83A1C;
    font-size: 12px;
    margin-top: 0px;
    padding: 20px 0 0;
}
#footer a { color: #fff;}
.copyright {
    padding: 5px 0;
    text-align: center;
    font-size: 10px;
    color: white;
    background-color: #532011;
}
.footList {
	width: 16.66%;
	float: left;
}
.footList a li {
    text-align: center;
    color: #fff;
    height: 35px;
    line-height: 35px;
}

/*------------------------ HOME --------------------*/
#slick_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.slick-slider {
    margin: 0!important;
    padding: 30px 0;
    background-color: #FFF6EE;
}
.center p {
    color: #C83A1C;
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
}
.blockSection1 { width: 100%; background-color: #FFAF5F;}
.blockSection2 { width: 100%; background-color: #fff; border-bottom: 5px #C83A1C solid;}
.blockHalf {
    width: 50%;
    height: 400px;
    float: left;
}
.blockBox {
    display: table;
}
.blockBoxCnt {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
}
.boxColor1 { background-color: #C83A1C;}
.boxColor2 { background-color: #FFAF5F;}
.boxColor3 { background-color: #532011;}
.boxColor4 { background-color: #ffffff;}
a:hover .boxColor1 { background-image: url('images/wh20.png');}
a:hover .boxColor2,
a:hover .boxColor3 { background-image: url('images/bk20.png');}
a:hover .boxColor4 { background-image: url('images/bk10.png');}
.boxPhoto1 {
    background-image: url('images/boxPhoto1.jpg');
    background-repeat: no-repeat;
    background-position: center -30px;
}
a:hover .boxPhoto1 { background-position: center -502px;}
.boxPhoto2 {
    background-image: url('images/boxPhoto2.jpg');
    background-repeat: no-repeat;
    background-position: top center;
}
a:hover .boxPhoto2 { background-position: center -472px;}
.boxTitle {
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    margin-top: 30px;
    color: #FFF6EE;
}
.boxTitleJP {
    text-align: center;
    margin: 10px 0;
    color: #FFF6EE;
    font-size: 15px;
}
.boxText {
    font-size: 13px;
    line-height: 22px;
    color: #FFF6EE;
    text-align: center;
    margin: 20px auto;
}
.wideBoxCnt {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}
.moreBtn {
    width: 150px;
    border: 2px #fff solid;
    text-align: center;
    color: #fff;
    font-size: 12px;
    margin-top: 30px;
    padding: 5px;
}
.moreBtn:hover { background-image: url('images/wh20.png'); background-color: transparent;}

.blockBoxCnt img.image { width: 55%; max-width: 280px;}
.blockBoxCnt img.icon { width: 20%; max-width: 80px;}
.boxColor1 .boxTitle { color: #FFAF5F;}
.boxColor2 .boxTitle { color: #C83A1C;}
.boxColor2 .boxTitleJP { color: #532011;}
.boxPhoto2 .boxTitle { text-align: left; margin: 0 0 30px; font-size: 50px;}
.boxPhoto2 .boxTitleJP { text-align: left; font-size: 25px;}
.boxPhoto2 .boxText { text-align: left; margin: 0;}
.boxPhoto1 .boxTitle { color: #fff; margin: 0 0 30px; font-size: 50px;}
.boxPhoto1 .boxTitleJP { color: #fff; font-size: 20px;}
.boxPhoto1 .boxText { color: #fff;}
.boxPhoto1 .moreBtn { margin: 0 auto;}
.boxColor4 .boxTitle { color: #C83A1C; margin: 0;}
.boxColor4 .boxTitleJP { color: #C83A1C;}
.boxColor4 .boxText { color: #C83A1C;}
.boxColor4 .moreBtn,
.news-block .moreBtn { margin: 0 auto; color: #C83A1C; border: 2px #C83A1C solid;}
.news-block {
    display: inline-block;
    width: 100%;
    border: 0;
    margin: 0;
    background-color: #fff;
    padding: 40px 5%;
}
.news-block .boxTitle {
    margin: 0 auto 25px;
    color: #C83A1C;
    font-size: 35px;
}
.newslist {
    padding: 0;
    margin-bottom: 20px;
}
.newslist div {
	border-bottom: 1px #C83A1C solid;
}
.newslist dt {
    height: 40px;
    line-height: 40px;
    width: 10%;
    float: left;
    font-size: 18px;
    color: #C83A1C;
}
.newslist dd {
    height: 40px;
    line-height: 40px;
    width: 80%;
    color: #532011;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -mos-text-overflow: ellipsis;
    white-space: nowrap;
}
.newsMore {
    height: 40px;
    line-height: 40px;
    width: 10%;
    float: right;
    color: #C83A1C;
    margin: 0;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: right;
}
.reitouBana {
    margin: 30px auto 0;
    display: block;
    max-width: 100%;
}

/*------------------------ PAGE --------------------*/
.page #wrap,
.archive #wrap,
.single #wrap { height: 250px; border: 0;}
.page #backillust,
.archive #backillust,
.single #backillust {
	height: 250px;
	background-size: auto 130%;
	opacity: 0.7;
}
.page .mainCnt,
.archive .mainCnt,
.single .mainCnt { background-color: #fff; padding: 1% 5%;}
.page #footer .mainCnt,
.archive #footer .mainCnt,
.single #footer .mainCnt { background-color: transparent; padding: 0;}
.pageTitleHead {
    width: 100%;
    position: absolute;
    z-index: 10;
    text-align: center;
    top: 50%;
    margin-top: -35px;
    height: 70px;
}
.pageTitle {
    text-align: center;
    color: #C83A1C;
    font-size: 45px;
    letter-spacing: 5px;
    margin: 0;
    font-weight: bold;
}
.pageTitle span {
    display: block;
    text-align: center;
    margin: 5px 0 40px;
    font-size: 16px;
    font-weight: bold;
}
.breadcrumbs {
    text-align: right;
    width: 100%;
    box-sizing: border-box;
}
.pageCnt { width: 100%; padding: 5% 0 2%;}
.pageCntTitle {
    font-size: 30px;
    font-weight: bold;
    color: #C83A1C;
    border-bottom: 1px #C83A1C solid;
    margin: 0 0 4%;
}
.pageCntTitle span {
    font-family: 'logotypegothic', 'Noto Sans Japanese', sans-serif;
    font-size: 16px;
    font-weight: bold;
    display: block;
}
.pageCntText { width: 62%; float: left;}
.pageCntImg { width: 35%; float: right;}
.pageCntImg img {
    width: 100%;
    margin: 0 auto;
    display: block;
}
.pageCntImg p {
    margin: 10px auto;
    text-align: center;
    font-weight: bold;
    color: #1D1D1D;
    width: 80%;
    font-size: 13px;
}
.pageCnt h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    color: #1D1D1D;
    margin: 0 0 20px;
}
.pageCntText {
    color: #1D1D1D;
    font-size: 13.5px;
    line-height: 25px;
    margin: 0;
}
.pageCntText b,
.pageCntSub b { font-size: 15px; font-weight: bold;}
.pageCnt table {
    width: 100%;
    border-collapse: collapse;
}
.pageCnt table th,
.pageCntImglist .title {
    background-color: #FFF6EE;
    border: 1px solid #C83A1C;
    padding: 10px;
    line-height: 1.42857143;
    color: #C83A1C;
    font-weight: bold;
    text-align: center;
    min-width: 180px;
    margin: 20px auto 10px;
}
.pageCnt table td {
    border: 1px solid #C83A1C;
    padding: 15px;
    line-height: 1.42857143;
    vertical-align: top;
    color: #1D1D1D;
}
.pageCnt table.tableList { width: 50%; float: left;}
.pageCnt table.tableList th {
    background-color: transparent;
    border: 0;
    width: 110px;
    min-width: 100px;
    text-align: left;
    padding: 5px 0;
}
.pageCnt table.tableList td {
    border: 0;
    color: #1D1D1D;
    padding: 5px;
}
.pageCntSub {
    margin: 20px 0 30px;
    font-size: 13.5px;
    line-height: 22px;
    color: #1D1D1D;
}
.pageCnt .moreBtn,
.wrapConceptText .moreBtn {
    margin: 0 auto;
    color: #FFF;
    background-color: #532011;
    width: auto;
    padding: 10px 30px;
    font-size: 13px;
    font-weight: bold;
    max-width: 100%;
    display: inline-block;
    border: 0;
}
.pageCnt .moreBtn:hover,
.newsListBtn:hover,
.wrapConceptText .moreBtn:hover { background-color: #FFAF5F; color: #532011; text-decoration: none;}
.pageCntImglist li {
    width: 50%;
    float: left;
    padding: 0 2%;
    color: #1D1D1D;
    text-align: center;
}

.pageCntImglist img { width: 100%; margin-bottom: 10px;}
.pageAnchor {
    width: 100%;
    text-align: center;
    margin: 3% 0 1%;
}
.pageAnchor a li,
.newsListBtn {
    background-color: #532011;
    display: inline-block;
    padding: 10px 20px;
    min-width: 100px;
    text-align: center;
    margin: 0 1%;
    color: #FFF6EE;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 3px;
    border-radius: 3px;
}
.pageAnchor a:hover li { background-color: #FFAF5F; color: #532011;}
.pageCntLine {
    background-color: #ddd;
    margin: 4% 0;
    width: 100%;
    height: 1px;
    display: inline-block;
}
.pageCntSubtitle {
    background-color: #FFF6EE;
    font-size: 13px;
    font-weight: bold;
    border-left: 5px #C83A1C solid;
    color: #C83A1C;
    padding-left: 10px;
    margin-top: 20px;
}
.pageCntImpact {
    font-size: 25px;
    text-align: center;
    margin: 30px;
}
.phone {
    font-size: 45px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px #532011 dotted;
    margin: 20px 0;
}
.phone img { width: 40px; margin-right: 15px; vertical-align: middle;}
.imgList { width: 100%;}
.imgList li { width: 33.33%; padding: 1%; float: left;}
.imgList li img { width: 100%;}

.mainCntShoplist { padding: 1% 0!important;}
.mainCntShoplist .pageCnt { padding: 50px 5%;}
.shopTitle {
    width: 100%;
    height: 250px;
    margin-top: 50px;
}
#croquetteclub { background-color: #40220F;}
#toko { background-color: #211B11;}
.logoArea {
    width: 40%;
    height: 100%;
    float: left;
    display: table;
}
.logoArea div {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
}
.logoArea div img { width: 65%;}
.photoArea {
    width: 60%;
    height: 100%;
    float: left;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
#croquetteclub .photoArea { background-image: url('images/shopPhoto01.jpg');}
#toko .photoArea { background-image: url('images/shopPhoto02.jpg');}
.pageCntMap {
    width: 45%;
    height: 280px;
    padding: 10px;
    border: 1px #C83A1C solid;
}
.pageCntMap iframe { width: 100%; height: 100%;}
.mainCntShoplist .pageCnt table.tableList th { width: 80px; min-width: 80px;}

.howtoCnt { width: 100%; background-color: #fff;}
.howtoCnt .mainCnt { border-bottom: 2px #C83A1C dashed; padding: 3% 5%;}
.howtoCnt .mainCnt:last-child { border-bottom: 0; padding: 3% 5% 5%;}
.howtoCnt .mainCnt .pageCntText { width: 100%;}
.howtoImg { width: 50%;}
.pageCntHowto { width: 45%;}

#content_head h1 {
    font-size: 35px;
    margin: 0 0 0 0;
    text-align: center;
    color: #C83A1C;
}

#wrapConcept {
    width: 100%;
    height: auto;
    padding: 5% 0 3%;
}
#wrapConcept .pageTitle,
#wrapConcept .pageTitle span { text-align: left;}
.pageCatchImg { width: 43%; padding-left: 10%; text-align: right;}
.conceptCatch { text-align: center;}
.pageCatchImg img { width: 100%; max-width: 400px;}
.wrapConceptBox { width: 54%; float: right; padding-right: 10%;}
.wrapConceptText {
    color: #1D1D1D;
    font-size: 13.5px;
    line-height: 25px;
}
.wrapConceptText h2 {
    font-family: 'tetsubin', 'Noto Sans Japanese', sans-serif;
    font-size: 25px;
    margin: 40px 0 20px;
}

/*------------------------ PAGE-CONCEPT --------------------*/
.conceptTitle {
    font-size: 30px;
    margin: 0;
    text-align: center;
    color: #C83A1C;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.wrapConceptText h2,
.wrapper h2 {
    font-family: 'tetsubin', 'Noto Sans Japanese', sans-serif;
    font-size: 23px;
    margin: 0 0 20px;
}
.wrapper h2.conceptLast { font-size: 30px; line-height: 40px;}
span.k_title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}
#content_head .wrapper {
  background: url(images/koda1.jpg) left center no-repeat;
  padding: 8.33333% 4.16667% 8.33333% 36.66667%;
  background-size: 33.91667% auto; }

#oil .wrapper {
  background:  url(images/koda2.jpg) 4.16667% center no-repeat;
  padding: 10% 4.16667% 10% 50%;
  background-size: 41.66667% auto;
 }

#culinary .wrapper {
  background: url(images/koda3.jpg) 4.16667% center no-repeat;
  padding: 10% 4.16667% 10% 45.83337%;
  background-size: 37.5% auto;
 }

#dried .wrapper {
  background: url(images/koda4.jpg) 4.16667% center no-repeat;
  padding: 10% 4.16667% 10% 41.66667% ;
  background-size: 33.33333% auto; 
}

section:after, #content_head:after {
  content: "";
  display: block;
  height: 400px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    section:after, #content_head:after {
      background-attachment: scroll; } }

#content_head:after { background-image: url(images/kodawari01.jpg); }
#oil:after { background-image: url(images/kodawari02.jpg); }
#culinary:after { background-image: url(images/kodawari03.jpg); }
#dried:after { background-image: url(images/kodawari04.jpg); }
div.footer {
  background:#f1f1f1;
  padding: 8.33333% 3.33333%;
  text-align: center; 
  display: block;
}
@media only screen and (min-width: 1200px) {
.wrapper { width:1200px; }
#content_head .wrapper { padding: 100px 50px 130px 440px; }
#oil .wrapper { padding: 120px 50px 120px 600px;}
#culinary .wrapper { padding: 120px 50px 120px 550px;}
#dried .wrapper { padding: 120px 50px 120px 500px ; }
}

/*------------------------ ARCHIVE-PRODUCTS --------------------*/
#wrapProducts {
    width: 100%;
    height: auto;
    padding: 5% 0;
}
.wrapProductsBox {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.wrapProductsBox .wrapConceptText,
.wrapProductsBox .wrapConceptText h2 { text-align: center;}
.content section { width: 90%; margin: 0 auto; max-width: 1300px; padding: 5% 0 0;}
.productsList li {
	width: 33.33%;
	float: left;
	padding: 0 2%;
	min-height: 460px;
}
.productsList li .productImg { width: 100%; }
.productName {
    color: #C83A1C;
    font-size: 18px;
    text-align: center;
    margin: 10px 0;
}
.productSub { text-align: center; margin-bottom: 10px;}
.productIcon { text-align: center;}
.productIcon img { width: 50px;}


/*------------------------ ARCHIVE-NEWS --------------------*/
.archive .mainCnt,
.single .mainCnt { padding: 3% 5% 1%;}
.newsList { width: 100%; float: left;}
.single-news .newsList,.post-type-archive-news .newsList { width: 70%; float: left;}
@media screen and (max-width: 768px) {
	.single-news .newsList,.post-type-archive-news .newsList { width: 100%; float: none;}
}
.newsList li { margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px #C83A1C solid;}
.newsList li img { width: 25%; margin-right: 5%; float: left;}
.newsTitle {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #C83A1C;
}
.newsDate {
    background-color: #FFAF5F;
    color: #532011;
    font-size: 13px;
    font-weight: bold;
    display: block;
    width: 100px;
    text-align: center;
    padding: 3px 0 4px;
    border-radius: 3px;
    margin-bottom: 5px;
    margin-right: 10px;
    float: left;
}
.newsListText {
    color: #1D1D1D;
    margin: 20px 0;
    font-size: 13.5px;
    line-height: 22px;
}
.newsAside {
    width: 26%;
    float: right;
    margin-bottom: 30px;
}
.newsAsideTitle,
.newsAside h3 {
    background-color: #C83A1C;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 19px;
    line-height: 24px;
    font-family: 'Montserrat', sans-serif;
}
.newsAsideTitle span {
    font-size: 13px;
    font-weight: bold;
    display: block;
    text-align: center;
}
.newsRecent li {
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px #C83A1C dotted;
    clear: both;
    font-size: 12px;
    padding: 10px 0;
    display: table;
}
.newsRecent li a { color: #1D1D1D; font-weight: bold; display: table-cell; vertical-align: middle;}
.newsRecent img { width: 50px; float: left; margin: 0 10px 0 0;}
.newsList h1 {
    font-size: 20px;
    font-weight: bold;
    border-left: 5px #C83A1C solid;
    border-bottom: 1px #C83A1C solid;
    color: #C83A1C;
    padding: 10px;
    margin: 0;
}
.neasSingleDate { color: #C83A1C; font-weight: bold; text-align: right;}
.newsSingleText { font-size: 13.5px; line-height: 20px; color: #1D1D1D;}
.newsSingleText img { margin: 20px 0; max-width: 100%; height: auto;}

/**************************************** MINI PC (1200px↓) ****************************************/
@media screen and (max-width:1200px) {
.homeSliderCnt { width: 90%; margin: 0 auto;}
.headNav a li { font-size: 15px;}
.blockHalf { height: 300px;}
.boxTitle,
.boxPhoto1 .boxTitle,
.boxPhoto2 .boxTitle { margin: 0 0 20px; font-size: 38px;}
.boxPhoto2 .boxTitleJP { font-size: 20px;}

.phone { font-size: 40px; line-height: 50px;}
.phone img { width: 40px; margin-right: 15px;}

/*------------------------ PAGE-CONCEPT --------------------*/
.wrapConceptBox { width: 50%; padding-right: 5%;}
.blockConcept li .boxTitle { font-size: 24px;}
.blockConcept .wideBoxCnt { width: 90%;}
.reasonImg { height: 300px;}
.reasonTitleBox img { padding: 8%;}
.reasonTitleBox strong { margin: 5% 0 1%;}
.reasonTitleBox strong { font-size: 50px;}
.reason03 .reasonTitleBox strong { font-size: 40px; line-height: 45px;}

.productsList li { min-height: 415px;}

}

/**************************************** TABLET (1024px↓) ****************************************/
@media screen and (max-width:1024px) {
.headerNav { width: 100%;}
.headNav a li { font-size: 14px;}
.potetoSlider { max-height: 400px;}
#backillust { height: 400px;}
#wrap { height: 405px;}
.pogoSlider-slide {
    width: 70%!important;
    height: 70%!important;
    max-height: 400px!important;
    left: 50%;
    margin-left: -35%;
}
.homeSliderCatch strong {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 0;
}
.homeSliderCatch {
    top: 200px;
    font-size: 14px;
    line-height: 19px;
}
.homeSliderCom { width: 240px!important;}
.blockHalf { width: 100%;}
.blockHalf .blockHalf { width: 50%;}
.newslist dt { width: 15%;}
.newslist dd { width: 75%;}

.page .mainCnt, .archive .mainCnt, .single .mainCnt { width: 100%;}
.pageCntImg p { width: 100%;}

.phone { font-size: 33px; line-height: 50px;}
.phone img { width: 35px; margin-right: 10px;}
.pageCntImpact { font-size: 20px; margin: 30px 10px 20px;}
.imgList li { width: 50%;}
.imgList li:nth-child(2) { display: none;}

/*------------------------ PAGE-CONCEPT --------------------*/
.wrapConceptBox { width: 100%; padding: 0 5% 5%;}
.wrapConceptText,
.wrapConceptText h2,
#wrapConcept .pageTitle,
#wrapConcept .pageTitle span { text-align: center;}
.pageCatchImg {
    width: 100%;
    padding-left: 0;
    text-align: center;
    clear: both;
}
.blockConcept li { width: 50%;}
.reasonBlock li { width: 35%;}
.reasonBlock li.boxSub2 { width: 65%;}
.reasonImg { height: 155px;}
.reasonTitleBox img {
    width: 100%;
    max-width: 210px;
    margin: 0 auto;
    float: none;
    display: block;
}
.reasonTitleBox { padding: 5%; font-size: 17px; text-align: center;}
.reasonTitleBox strong {
    font-size: 35px;
    letter-spacing: 3px;
    text-align: center;
    display: block;
}
.reason03 .reasonTitleBox strong { font-size: 30px; line-height: 35px;}
.blockConcept, .reasonBlock { border-bottom: 1px #532011 solid;}

.productName { font-size: 15px; margin: 10px 0 5px;}
.productsList li { min-height: 330px;}
.productIcon img { width: 40px;}
.productSub { font-size: 13px;}
}

/**************************************** SMART PHONE (768px↓) ****************************************/
@media screen and (max-width:768px) {
.SPnone,
.productSub br { display: none;}
header {
    width: 100%;
    height: initial;
    border-top: none;
    background-color: initial;
}
.headNav {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.headNav a {
    width: 50%;
    height: initial;
    float: left;
    border-right: none;
}
.headNav a li,
.page .headNav a li,
.archive .headNav a li,
.single .headNav a li,
.error404 .headNav a li {
    color: #532011;
    margin: 10% 0;
    font-size: 17px;
}
.page .headNav a li span, .archive .headNav a li span, .single .headNav a li span, .error404 .headNav a li span { color: #C83A1C;}
.shareBpx { width: 100%; height: 50px;}
.shareBpx img { height: 30px; float: left;}
.homeHeadLogo { width: 100px; padding: 10px;}
.pogoSlider { padding-bottom: 100%!important;}
.pogoSlider-slide {
    width: 120%!important;
    height: 100%!important;
    left: 50%;
    margin-left: -60%;
}
.homeSliderCatch strong {
    font-size: 22px;
    text-align: center;
}
.homeSliderCatch {
    top: 155px;
    width: 90%;
    font-size: 13px;
    line-height: 17px;
    text-align: center;
}
#wrap { height: 340px; overflow: hidden;}
#backillust { height: 460px; background-size: auto 100%;}
.SPheadLogo {
    background-color: #C83A1C;
    width: 100%!important;
    padding: 2% 35%;
    margin-bottom: 3%;
}
.SPheadLogo img { width: 100%;}
.slick-slider { padding: 15px 0 10px;}
.slick-slide img { width: 80%!important;}
.blockHalf { height: 180px;}
.boxTitle, .boxPhoto1 .boxTitle, .boxPhoto2 .boxTitle {
    margin: 10px 0;
    line-height: 25px;
    font-size: 25px;
}
.boxTitleJP { margin: 10px; font-size: 11px; letter-spacing: -1px;}
.boxPhoto1 {
    background-image: url('images/boxPhoto1.jpg');
    background-repeat: no-repeat;
    background-position: center -130px;
}
a:hover .boxPhoto1 { background-position: center -602px;}
.boxPhoto1 .boxTitleJP, .boxPhoto2 .boxTitleJP { margin: 20px 0 0;}
.wideBoxCnt { width: 90%; margin: 0 auto 20px;}
.boxText {
    font-size: 11px;
    line-height: 15px;
    margin: 0px auto 10px;
}
.moreBtn { width: 100%!important;}
.blockBoxCnt img.image { width: 70%;}
.newsCnt { width: 100%;}
.news-block { padding: 20px 5%;}
.news-block .boxTitle { margin: 0 auto 10px; font-size: 23px;}
.newslist div { margin-bottom: 5px;}
.newslist dd,
.newslist dt {
    width: 100%;
    height: 22px;
    line-height: 30px;
}
/*------------------------ FOOTER --------------------*/
#footer { padding: 10px 0 20px;}
.footList {
    width: 33.33%;
    border-bottom: 1px #fff dashed;
    padding: 10px 0;
}
.footList a li { font-size: 13px;}
/*------------------------ PAGE --------------------*/
.pageHeader { height: 70px; padding: 10px 0 10px;}
.page header, .archive header, .single header, .error404 header  { height: 0;}
.page #wrap, .page #backillust,
.archive #wrap, .archive #backillust,
.single #wrap, .single #backillust { height: 150px;}
.pageTitle { font-size: 35px; letter-spacing: 3px;}
.pageCntTitle span { font-size: 15px;}
.pageCntTitle {
    font-size: 22px;
    line-height: 22px;
    padding-bottom: 10px;
    margin: 0 0 20px;
}
.pageCntTitle.fontJP { font-size: 17px;}
.pageCntText, .pageCntImg, .pageCnt table.tableList { width: 100%;}
.pageCnt h2 { font-size: 16px; line-height: 23px;}
.pageCnt table th, .pageCntImglist .title { padding: 10px 3px; min-width: 70px;}
.pageCnt table td { padding: 10px 10px;}
.pageCnt table.tableList th,
.pageCnt table.tableList td {
    display: block;
    width: 100%;
    max-width: inherit;
    padding: 0;
}
.pageCnt table.tableList td { margin-bottom: 10px;}
.pageCntSub { margin: 10px 0;}
.pageCntImglist li { width: 100%; padding: 0 0 20px;}
.pageAnchor a li {
    padding: 10px 5px;
    min-width: 90px;
    margin: 0 0 3px;
    font-size: 13px;
    letter-spacing: 1px;
}

.phone { font-size: 30px; line-height: 45px; color: #1D1D1D;}
.phone img { width: 30px; margin-right: 5px; vertical-align: middle;}
.imgList li { width: 100%;}

.shopTitle { margin-top: 30px;}
.logoArea { width: 100%; height: 30%;}
.logoArea div img { width: auto; height: 45px;}
.photoArea { width: 100%; height: 70%;}
.mainCntShoplist .pageCnt { padding: 20px 5%;}
.pageCntMap { width: 100%; margin-top: 10px;}
.mainCntShoplist .pageCnt table.tableList th { float: left;}

.howtoImg,
.pageCntHowto { width: 100%;}
.howtoCnt .mainCnt .pageCntTitle { border-bottom: 0; margin-bottom: 0;}
.mainCntShoplist .pageCnt table.tableList th { width: 100%; margin: 0 0 5px;}

/*------------------------ PAGE-CONCEPT --------------------*/
.conceptTitle { font-size: 20px; line-height: 27px;
}
.wrapConceptText { font-size: 13px; line-height: 22px; text-align: left;}
.wrapConceptText h2, .wrapper h2 {
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 0 0 10px;
}
#content_head .wrapper {
    background: url(images/koda1.jpg) left center no-repeat;
    padding: 150px 5% 10%;
    background-size: auto 150px;
    background-position: center 0;
}
#oil .wrapper {
    padding: 190px 5% 10%;
    background-size: auto 150px;
    background-position: center 5%;
}
#culinary .wrapper {
    padding: 190px 5% 10%;
    background-size: auto 120px;
    background-position: center 10%;
}
#dried .wrapper {
    padding: 190px 5% 10%;
    background-size: auto 150px;
    background-position: center 3%;
}
.wrapper h2.conceptLast { font-size: 20px; line-height: 28px;}

/*------------------------ ARCHIVE-NEWS --------------------*/
.newsList { margin: 10px 0 0;}
.newsList,
.newsAside { width: 100%;}
.newsList h1 { font-size: 15px; line-height: 20px; border-left: 0; padding: 0 0 5px 0;}
.newsList li { margin-bottom: 20px; padding-bottom: 10px;}
.newsTitle { font-size: 15px; line-height: 22px; clear: both; margin-bottom: 5px;}
.newsListText { margin: 0 0 5px; font-size: 12px; line-height: 20px;}
.newsAside { margin-top: 30px;}

.productsList li { min-height: inherit; width: 100%;}
.productIcon { margin-bottom: 20px;}

}

/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
table-layout: fixed;
}
 
.required-contactform7{
  padding: 5px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}
 
.unrequired-contactform7{
  padding: 5px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}
 
.table-contactform7 th{
  font-weight:bold;
}
 
.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}
 
.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}
 
.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}
 
@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
  }
    }
     
@media screen and (max-width: 900px){
.table-contactform7{
  display:block;
}     
       
  .table-contactform7 tbody,
  .table-contactform7 tr{
    display: block;
    width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:0;
  width: 100%;
  border-top: none !important;
}
}

/**************************************** OTHER THAN SMART PHONE (768px↑) ****************************************/
@media screen and (min-width: 768px) {
.PCnone { display: none!important;}
}



/*------------------------ 既存スタイルに上書き（リニューアル後消してよい） --------------------*/
.page-id-8,
.page-id-8 section { background-color: #fff!important;}
.col-md-2 {
    width: 16.66666667%;
    float: left;
}
#tabs section:after { display: none;}
@media screen and (max-width:768px) {
.col-md-2 {
    width: 50%;
}