@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: pochiintegrated
Theme URI: https://pochilog.jp
Description: SP Opt
Author: sada
Author URI: https://pochilog.jp
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-width, custom-header, custom-menu, editor-style,
Version: 20210704
---------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------
スマホ：374pxまで（iPhone12未満）
タブレット：600px以上
@media screen and (min-width: 600px) {
PC：1000px以上
@media screen and (min-width: 1000px) {
font-family: 'Hina Mincho', serif;
font-family: 'Kaisei Decol', serif;
font-family: 'Kaisei HarunoUmi', serif;
font-family: 'Kaisei Tokumin', serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Potta One', cursive;
font-family: 'RocknRoll One', sans-serif;
font-family: 'Sawarabi Gothic', sans-serif;
font-family: 'Sawarabi Mincho', serif;
font-family: 'Shippori Antique', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------
メインメニュー：gnav
スマホメニュー：mnav
--------------------------------------------------------------------------------------------------------------------*/
:root {
/*基本文字サイズ*/	--font-size : 16px;
/*基本行間*/		--line-height : 1.5em;
/*色*/
/*黒*/					--color-01 : #000;
/*白*/					--color-02 : #fff;
/*テーマカラー1*/		--color-03 : #000;
/*テーマカラー2*/		--color-04 : #666;
/*フッタ*/			--color-05 : #999;
/*フッタSEO*/	--color-06 : #ccc;
/*ヘッダ背景*/							--color-07 : #efefef;
/*必須・attention・require*/				--color-08 : #d00;
/*フロートメニュー*/							--color-09 : #377389;
/*モバイルメニュー背景色・mnav*/		--color-10 : #377389;
/*リンク色A*/										--color-a : #1d3993;
/*リンク色A:visited*/							--color-visited : #7f008b;
/*リンク色A:hover*/							--color-hover : #fd0000;
/*リンク色反転A:hover*/						--color-hover_rev : #fc0;
/*サイト名高さ*/									--size-sitename : 60px;
/*GNAV高さ*/										--size-gnav : 0px;
/*メニュー幅*/										--size-mnav : 240px;
/*foot_nav高さ*/									--size-foot_nav : 40px;
/*左右padding*/									--size-side : 10px;
/*content上下padding*/						--size-padding : 30px;
/*ブロックサイズ*/
	--w-large : 1000px;
	--w-medium : 640px;
	--w-half : 48%;
	--w-1-third : 32%;
	--w-quater : 24%;
	--w-small : 300px;
	--w-thumb : 150px;
}
@media screen and (min-width : 1000px) {
:root {
/*基本行間*/		--line-height : 2em;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■HTML・BODY
--------------------------------------------------------------------------------------------------------------------*/
html {
	margin : 0;
	padding : 0;
	height : 100%;
}
body {
	margin : 0;
	margin-top : 0!important;	/*scroll_fix.js対策*/
	padding : 0;
	background : var(--color-02);
	font-size : var(--font-size);
	line-height : var(--line-height);
	font-family : "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	/*font-family : "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	color : var(--color-01);
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
	table-layout : fixed;
	overflow-wrap : break-word;
	word-break : break-word;
}
@media screen and (min-width : 1000px) {
body {
	background : url(./images/bg.jpg) var(--color-02);
}
}
/*----------------------------------------------------------
■リンク
----------------------------------------------------------*/
a {
	color : var(--color-a);
	text-decoration : none;
}
a:visited {
	color : var(--color-visited);
}
a:hover {
	color : var(--color-hover);
	outline : 0;
}
a img {
	border : none;
}
a:hover img {
	opacity : 0.8;
}
b,
strong {
	font-weight : bold;
}
.color-spot {
	color : var(--color-04);
}
/*--------------------------------------------------------------------------------------------------------------------
■表示コントロール
--------------------------------------------------------------------------------------------------------------------*/
.w-large,
.w-half ,
.w-medium,
.w-small {
	width : 100%;
}
@media screen and (min-width : 1000px) {
.w-full {
	width : 100%;
}
.w-large {
	width : var(--w-large);
	margin : 0 auto;
}
.w-medium {
	width : var(--w-medium);
}
.w-half {
	width : var(--w-half);
}
.w-1-third {
	width : var(--w-1-third);
}
.w-quarter {
	width : var(--w-quarter);
}
.w-small {
	width : var(--w-small);
}
.w-thumb {
	width : var(--w-thumb);
}
}
/*--------------------------------------------------------------------------------------------------------------------
■grid2-1 2列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid2-1 {
	display : block;
	margin : 0;
	padding : 0;
}
.grid2-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid2-1 {
	display : grid;
	grid-template-columns : repeat(2, 48%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■3-1col 3列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid3-1 {
	display : block;
}
.grid3-1 div {
	margin : 0 0 20px 0;
}
@media screen and (min-width: 640px) {
.grid3-1 {
	display : grid;
	grid-template-columns : repeat(3, 30%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■3-2col 3列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid3-2 {
	display : grid;
	grid-template-columns : repeat(2, 48%);
	justify-content : space-between;
}
.grid3-2 div {
	margin : 0 0 20px 0;
}
@media screen and (min-width: 640px) {
.grid3-2 {
	display : grid;
	grid-template-columns : repeat(3, 30%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■4-1col 4列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid4-1 {
	display : block;
}
.grid4-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid4-1 {
	display : grid;
	grid-template-columns : repeat(4, 23%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■4-2col 4列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid4-2 {
	display : grid;
	grid-template-columns : repeat(2, 49%);
	justify-content : space-between;
	row-gap : 12px;
	margin : 20px 0;
}
@media screen and (min-width: 1000px) {
.grid4-2 {
	grid-template-columns : repeat(4, 24%);
}
}
/*--------------------------------------------------------------------------------------------------------------------
■全幅（w-large内で全幅表示）
--------------------------------------------------------------------------------------------------------------------*/
.full-width {
	margin-left : -10px!important;
	margin-right : -10px!important;
	padding-left : 10px!important;
	padding-right : 10px!important;
}
@media screen and (min-width: 1000px) {
.full-width {
	margin-left : calc(-1 * (100vw - var(--w-large)) / 2)!important;
	margin-right : calc(-1 * (100vw - var(--w-large)) / 2)!important;
	padding-left : calc((100vw - var(--w-large)) / 2)!important;
	padding-right : calc((100vw - var(--w-large)) / 2)!important;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■ブロック
--------------------------------------------------------------------------------------------------------------------*/
#wrapper {
	position : relative;
	padding : 60px 0 0 0;
}
header {
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	height : 60px;
	margin : 0;
	z-index : 9999;
	background : var(--color-02);
}
#header {
	position : relative;
	height : 60px;
	padding : 0;
	margin : 0;
}
#container_outer {
	clear : both;
	padding : 20px 0;
	margin : 0;
}
#container {
	padding : 0;
	background : #fff;
}
#content {
	padding : 10px;
}
#footer_outer {
	clear : both;
	background : #DEDDDA;
}
footer {
	padding : 10px;
	margin : 0 auto;
}
#footertitle_outer {
	clear : both;
	background : #4A4845;
}
#footertitle {
	padding : 10px 10px var(--size-foot_nav) 10px;	
}
@media screen and (min-width : 1000px) {
#wrapper {
}
header {
	height : 60px;
}
#container_outer {
}
#container {
	padding : 10px;
}
#content {
	padding : 20px;
}
main {
}
footer {
	padding : 10px 0;
}
#footertitle {
	padding : 10px 0;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■ヘッダ header
--------------------------------------------------------------------------------------------------------------------*/
#google_eyecatch {
	visibility : hidden;
	height : 0;
}
#header #sitename {
	padding : 2px 0 8px 0;
	margin : 0 0 0 10px
	font-weight : bold;
	line-height : 50px;
}
#header #sitename.sitelogo {
}
#header #sitename.sitelogo img {
	max-height : 50px;
}
#header_right {
	display : none;
}
#rndimage {
	display : none;
}
@media screen and (min-width: 1000px) {
#header #sitename {
	float : left;
	margin : 0 0 0 10px;
	padding : 0;
	line-height : 50px;
}
#header #sitename a {
	color : var(--color-01);
}
#header_right ,
#header_right h1.description,
#header_right p.description {
	display : block;
	float : left;
	padding : 0;
	margin : 0;
	font-size : 0.8em;/*1em*/
	line-height : 50px;
}
#header_right {
	margin : 0 0 0 20px;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■スマホボタン mobile_set
--------------------------------------------------------------------------------------------------------------------*/
button#mobile_menu_bttn {
	display : block;
	position : fixed;
	z-index : 1000;
	top : 0;
	right : 0;
	padding : 0;
	margin : 0;
	width : 60px;
	height : 60px;
	border : none;
	box-shadow : none;
	background : url(./images/menu.png);
	background-size : contain;
	text-indent : -9999px;
}
button#mobile_menu_bttn.close {
	background : url(./images/menu_off.png);
}
/*--------------------------------------------------------------------------------------------------------------------
■スマホメニュー Mobile_menu
--------------------------------------------------------------------------------------------------------------------*/
#mobile_menu {
	display : none;
}
#mobile_menu {
	position : fixed;
	align-items : center;
	-webkit-transform : translateZ(0);
	z-index : 500;
	top : 60px
	right : 0;
	bottom : 0;
	left : 0;
	width : 100%;
	height : calc(100vh - 60px);
	background : #fff;
}
#mobile_menu ul {
	position : relative;
	z-index : 500;
	width : 100%;
	height : 360px;
	overflow : auto;
	top : 50%;
	-webkit-transform : translate(0 , -180px);
	-moz-transform : translate(0 , -180px);
	transform : translate(0 , -180px);
	-webkit-overflow-scrolling : touch;
}
_::-webkit-full-page-media, _:future, :root #mobile_menu ul.menu {
}
#mobile_menu li {
	list-style : none;
	text-align : center;
}
#mobile_menu li a {
	display : block;
	padding : 0;
	line-height : 40px;
	color : var(--color-03);
}
#mobile_menu li li a {
	padding : 0;
}
#mobile_menu li a:hover {
	background : var(--color-02);
}
#mobile_menu li#mobile_searchform {
	padding : 0;
}
#mobile_menu li#mobile_searchform form#searchform {
	border : none;
}
/*--------------------------------------------------------------------------------------------------------------------
■コンテンツ
--------------------------------------------------------------------------------------------------------------------*/
p ,
ul ,
ol {
	margin : 0 0 10px 0;
}
ul ,
ol {
	padding : 0 0 0 2em;
}
ul li {
	list-style-type : disc;
}
ol li {
	list-style-type : decimal;
}
@media screen and (min-width: 1000px) {
}
/*----------------------------------------------------------
■必須・注意書き
----------------------------------------------------------*/
span.require,
span.caution {
	font-size : 1em;
	color : var(--color-08);;
}
p.attention {
	border : 2px solid var(--color-08);
	padding : 0.5em;
	color : var(--color-08);
}
/*--------------------------------------------------------------------------------------------------------------------
■フッター
--------------------------------------------------------------------------------------------------------------------*/
/*#footer02 table * {
	border : none;
}
#footer02 table {
	border-top : 1px solid #333;
}
#footer02 table td {
	border-bottom : 1px solid #333;
	padding : 5px 0;
}*/


#footer01 img{
	display:block;
	width:350px;
	margin:0 auto 10px auto;
	}
#footer01 img.f_logo{
	display:block;
	width:250px;
	margin:0 auto 10px auto;
	}


@media screen and (min-width: 1000px) {
footer {
	display : flex;
}
#footer01 {
	width : 30%;
}
#footer02 {
	width : 66%;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■フッターSEO対策
--------------------------------------------------------------------------------------------------------------------*/
#footertitle p,
#footertitle a,
#footertitle h1,
#footertitle h1 a {
	color : var(--color-02);;
	font-weight : normal;
	font-size : 70%;
	line-height : 1.2em;
}
#footertitle p.copy{
	width:100%;
	font-size:13px;
	line-height:1.2em;
	text-align:center;
	}

/*--------------------------------------------------------------------------------------------------------------------
■page_top　ページトップ
--------------------------------------------------------------------------------------------------------------------*/
#foot_nav {
	position : initial;
	display : block;
	bottom : auto;
	left : auto;
	right : auto;
	height : auto;
}
#foot_nav li {
	width : auto;
	list-style : none;
}
#foot_nav a#page_top {
	position : fixed;
	display : block;
	background : #71a423;
	text-align : center;
	color : #fff;
	font-size : 14px;
	width : 60px;
	right : 20px;
	bottom : 20px;
	border-radius : 6px;
	padding : 5px 0;
	line-height : 10px;
}
#foot_nav a i {
	margin : 0 0 0 0;
	font-size : 30px;
	line-height : 30px;
}
#foot_nav a:hover {
	background : #900;
}
/*--------------------------------------------------------------------------------------------------------------------
■テーブル
--------------------------------------------------------------------------------------------------------------------*/
table {
	width : 100%;
	margin : 0 0 20px 0;
	border-collapse : collapse;
	border-spacing : 0;
	font-size : 14px;
	line-height : 1.5;
}
table th,
table td {
	margin : 0;
	padding : 5px;
	border-collapse : collapse;
	border : 1px solid #999;
	border-spacing : 0;
	vertical-align : top;
	text-align : left;
}
table th {
	width : 25%;
}
table td {
	width : 75%;
}
table th p ,
table td p {
	margin : 0;
	font-size : 14px;
	line-height : 1.5;
}

@media screen and (min-width: 1000px) {
table th,
table td {
	padding : 8px;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■HOME ホーム　home_main　全画面動画/静止画
--------------------------------------------------------------------------------------------------------------------*/
#home_main {
	position : absolute;
	top : 60px;
	margin : 0;
	padding : 0;
	width : 100%;
	height : calc(100vh - 60px);
	overflow : hidden;
	display : flex;
	align-items : center;
}
_::-webkit-full-page-media, _:future, :root #home_main {
	height : calc(100dvh - 60px);
}
#home_main::after {
	clear : both;
}
#front_image_outer {
	position : relative;
	width : 100%!important;
	margin : 0;
	padding : 0;
	text-align : center;
}
#front_image {
}
#video {
	position : absolute;
	top : 50%;
	left : 50%;
	max-width : none!important;
	min-width : 100%!important;
	min-height : calc(100vh - 60px);
	-webkit-transform : translate(-50%, -50%);
	-moz-transform : translate(-50%, -50%);
	transform : translate(-50%, -50%);
}
#video_dot {
	position : absolute;
	top : 0;
	right : 0;
	left : 0;
	bottom : 0;
	max-width : none!important;
	min-height : calc(100vh - 60px);
	background : url(images/video_dot-black.png);
	text-indent : -9999px;
}
@media screen and (min-width: 1000px) {
}
/*--------------------------------------------------------------------------------------------------------------------
■vegas slider
--------------------------------------------------------------------------------------------------------------------*/
#vegasslider {
	position : absolute;
	width : 100%;
	height : 100vh;
}
/*--------------------------------------------------------------------------------------------------------------------
■サイト別レイアウト
--------------------------------------------------------------------------------------------------------------------*/
h1 {
	font-family: 'Shippori Antique', sans-serif;
	font-weight : 700;
	font-size : 2.2em;
	line-height : 1.5em;
	margin : 0 0 30px 0;
	text-align : center;
}
h2 {
	font-family : 'Kaisei Decol', serif;
	font-weight : 700;
	font-size : 1.8em;
	line-height : 1.5em;
	margin : 30px 0 20px 0;
	text-align : center;
}
h4 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight : 900;
	font-size : 1.2em;
	line-height : 1.5em;
	margin : 30px 0 20px 0;
	text-align : center;
}
#fax {
	border : 8px solid #c4b5a0;
	padding : 10px;
	margin : 30px 0 0 0;
}
#telnum {
	font-family: 'Potta One', cursive;
	font-weight : 700;
	font-size : 2.2em;
	line-height : 1.5em;
	margin : 0 0 30px 0;
}
@media screen and (min-width: 1000px) {
h1 {
}
h2 {
	margin : 40px 0 20px 0;
}
h4 {
	margin : 40px 0 20px 0;
}
h1 br,
h2 br,
h3 br,
h4 br {
	display : none;
}
#fax {
	border : 8px solid #c4b5a0;
	padding : 10px;
	margin : 40px 0 0 0;
}
#f-tel {
	float : left;
}
#f-fax {
	float : right;
}
}
#fax h2 {
	margin : 0 0 20px 0;
}
#intro-logo {
	float : left;
}
#intro-sig {
	margin : 0 0 0 220px;
}
.goods h3 {
	font-weight : bold;
	margin : 5px 0 0 0;
	line-height : 1.2em;
}
.goods p {
	margin : 0;
}
#ecomark {
	float : left;
}
#ecofarmer {
	margin : 0 0 0 130px;
}