/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body,main {max-width: 767px; min-width: 320px; min-height: 100%;}
body::after {content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .7s ease;}
body.fadeout::after {opacity: 1;}
main > div {display: block; padding-top: 64px!important; min-height: calc(100vh - 64px);}

/*sp限定*/
.pc {display: none!important;}

/*clearfix*/
.clearfix::after {display: block; clear: both; content: "";}

/*コンティナ*/
.container {display: block; padding: 0 20px;}

/*汎用flex*/
.flex-box {display: flex; justify-content: space-between;}

/*Googlemap*/
#googlemap {width: calc(100% - 40px); height: 300px; margin: 0 auto; position: relative; overflow: hidden;}
#googlemap iframe,#googlemap object,#googlemap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#googlemap img {max-height: none;}

/*パンくず*/
#breadcrumbs {padding: 16px 0; border-top: 1px solid #ddd; overflow: scroll; white-space: nowrap;}
#breadcrumbs ul {display: flex;}
#breadcrumbs ul li {display: inline-block; font-size: .9em; margin-right: 1em;}
#breadcrumbs ul li a {display: inline-block;}
#breadcrumbs ul li i {font-size: 1em;}

/*ページャー*/
#pagination {display: flex; justify-content: center; align-items: center; margin: 20px 0;}
#pagination span,#pagination a {display: inline-flex; justify-content: center; align-items: center; width: 17px; height: 17px; color: #fff; background: #684d3c; font-size: 1.2em; line-height: 1; margin: 0 2px; padding: 12px; border: 1px solid #684d3c; border-radius: 50%; opacity: 1;}
#pagination a {color: #684d3c; background: #fff;}
#pagination a:hover {color: #fff; background: #684d3c;}
/*--------------------------------------------------------------------------
ローディング
--------------------------------------------------------------------------*/
#loader {position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; background: #fff; opacity: 1; visibility: visible; overflow: hidden; z-index: 9999; transition: .5s ease;}
#loader.fade {opacity: 0; visibility: hidden;}
#loader img {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 175px;}
#loader img.vis {display: block;}
/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: fixed; top: 0; width: 100%; background: #fff; padding: 12px 0 8px; z-index: 1000;}
header:after {content: ""; position: absolute; bottom: -1.9608vw; left: 0; display: block; width: 100%; height: 28px; width: 100vw; height: 1.9608vw; background: url(../img/front/top_up.png) center 0/100% repeat-x;}

header .flex-box {position: relative;}
header .logo {width: 120px; margin: 0 auto;}
header .pennant {display: none;}
header .container .g-navi,header .container .info {display: none;}

header #full-navi {position: fixed; top: 0; right: 25px; opacity: 0; height: 100%; visibility: hidden; transition: .5s ease; z-index: 1002;}
header #full-navi .g-navi {position: relative; margin-bottom: 30px;}
header #full-navi .g-navi ul {flex-direction: column; align-items: flex-end; margin-top: 10px;}
header #full-navi .g-navi li {display: inline-block; position: relative; line-height: 1.25; margin: 10px 0; padding-bottom: 4px; overflow: hidden; transition: .3s ease;}
header #full-navi .g-navi li:after {content: ""; position: absolute; display: inline-block; bottom: 0; left: 0; width: 0; height: 2px; margin: auto; background: #fff; transition: .3s ease;}
header #full-navi .g-navi li:hover:after {width: 100%;}
header #full-navi .g-navi li a {font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #fff; font-size: 1.6em; opacity: 1;}
header #full-navi address {justify-content: flex-end; flex-wrap: wrap;}
header #full-navi address .add {display: block; width: 100%; font-size: .9em; color: #fff; text-align: right; margin-bottom: 10px;}
header #full-navi address a {display: inline-flex; align-items: center; font-family: DINCond-Bold,sans-serif; font-size: 1.8em; color: #fff; line-height: 1; margin-left: 20px;}
header #full-navi address a img {width: 16px; margin-right: 6px;}
.open header #full-navi {visibility: visible; opacity: 1;}

header #full-navi-back {position: fixed; top: -75px; left: -75px; transition: 0s; transform: scale(0,0); transform-origin: 75px 75px; background: #785d4c; border-radius: 50%; visibility: hidden; z-index: 1001;}
.open header #full-navi-back {width: 350px; height: 350px; visibility: visible; animation: full-navi-back-open 1.2s linear both;}
.close header #full-navi-back {width: 350px; height: 350px; visibility: visible; animation: full-navi-back-close .8s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;}
@keyframes full-navi-back-open {0% {transform: scale(1,1);} 3.4% {transform: scale(1.316,1.407);} 4.7% {transform: scale(1.45,1.599);} 6.81% {transform: scale(1.659,1.893);} 9.41% {transform: scale(1.883,2.168);} 10.21% {transform: scale(1.942,2.226);} 13.61% {transform: scale(2.123,2.332);} 14.11% {transform: scale(2.141,2.331);} 17.52% {transform: scale(2.208,2.239);} 18.72% {transform: scale(2.212,2.187);} 21.32% {transform: scale(2.196,2.069);} 24.32% {transform: scale(2.151,1.96);} 25.23% {transform: scale(2.134,1.938);} 29.03% {transform: scale(2.063,1.897);} 29.93% {transform: scale(2.048,1.899);} 35.54% {transform: scale(1.979,1.962);} 36.74% {transform: scale(1.972,1.979);} 41.04% {transform: scale(1.961,2.022);} 44.44% {transform: scale(1.966,2.032);} 52.15% {transform: scale(1.991,2.006);} 59.86% {transform: scale(2.006,1.99);} 63.26% {transform: scale(2.007,1.992);} 75.28% {transform: scale(2.001,2.003);} 85.49% {transform: scale(1.999,2);} 90.69% {transform: scale(1.999,1.999);} 100% {transform: scale(2,2);}}
@keyframes full-navi-back-close {0% {transform: scale(2,2);} 100% {visibility: hidden; transform: scale(0,0);}}

header #overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0, .5); visibility: hidden; transition: all .5s ease; opacity: 0; z-index: 999;}
.open header #overlay {opacity: 1; visibility: visible;}

header #nav-toggle {position: absolute; display: block; top: -16px; left: 0; width: 72px; height: 72px; z-index: 2001; padding: 0; transition: .5s cubic-bezier(0.68, -0.43, 0.265, 1.55);}
header #nav-toggle span {position: absolute; left: 20px; display: block; width: 32px; height: 4px; border-radius: 8px; margin: 0 auto; background: #684d3c; transition: all ease .5s;}
header #nav-toggle span:nth-child(1) {top: 26px;}
header #nav-toggle span:nth-child(2) {top: 34px;}
header #nav-toggle span:nth-child(3) {top: 42px;}
header #nav-toggle:hover {cursor: pointer;}

.open header #nav-toggle span {background: #fff;}
.open header #nav-toggle span:nth-child(1) {width: 13px; transform: rotate(45deg); top: 27px; left: 22px;}
.open header #nav-toggle span:nth-child(2) {transform: rotate(-45deg); top: 34px;}
.open header #nav-toggle span:nth-child(3) {width: 13px; transform: rotate(45deg); top: 41px; right: 7px;}

header .leaf {display: none;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#front h2 {width: calc(100% - 20px); margin: 30px auto 40px; background-image: url(../img/front/generic_left.png),url(../img/front/generic_right.png); background-size: 65px 17px,65px 20px; background-position: 0 50%,100% 50%; background-repeat: no-repeat;}
#front h2 img {display: block; margin: 0 auto;}
/*------------------------------------
トップ
------------------------------------*/
#front .top {position: relative; width: 100%; background: #999; margin-bottom: -7vw;}
#front .top .main_image {position: relative; top: -3.071vw; width: 100vw; height: 66.667vw; background: url(../img/front/top_back.jpg) 0 0/100% auto; overflow: hidden; z-index: 1;}
#front .top .main_image .yubi {position: absolute; bottom: -12.25vw; right: 15vw; width: 90px;}
#front .top .under_image {position: relative; top: -4.8vw; width: 100vw; height: 3.286vw; background: url(../img/front/top_under.png) center 0/100% auto repeat-x; z-index: 2;}
#front .top .under_image .container {position: relative;}
#front .top .under_image .container img {position: absolute; transform: scale(0);}
#front .top .under_image .beetle {left: 6%; top: -25px; width: 41px;}
#front .top .under_image .bear {left: 24%; top: -39px; width: 36px;}
#front .top .under_image .cabbage {left: 44%; top: -16px; width: 38px;}
#front .top .under_image .cucumber {right: 26%; top: -29px; width: 29px;}
#front .top .under_image .sunflower {right: 3%; top: -40px; width: 59px;}
/*------------------------------------
ABOUT
------------------------------------*/
#front .about {position: relative; padding-top: 20px; background: url(../img/front/sec01_back.png);}
#front .about h2 img {width: 118px;}
#front .about .motto {padding: 0 20px;}
#front .about .motto img {margin: 50px auto 135px;}
#front .about .about_list {padding: 1px 0; background-image: url(../img/front/sec01_back.png),url(../img/front/sec01_back2.png); background-blend-mode: multiply;}
#front .about .about_list ul {width: 100%; margin: -85px auto 130px; padding: 0 16px;}
#front .about .about_list li {display: flex; align-items: flex-start; position: relative;}
#front .about .about_list li.goods {margin-bottom: 38px;}
#front .about .about_list li .circle {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; min-width: 200px; height: 200px; min-height: 200px; background: #fff; margin: 30px 0 0; border-radius: 50%; z-index: 2;}
#front .about .about_list li.agri .circle {top: 50px; right: 190px;}
#front .about .about_list li.goods .circle {top: 90px; left: -5px;}
#front .about .about_list li.pack .circle {top: 98px; right: 230px;}
#front .about .about_list li img {position: relative; width: calc(100% - 32px);}
#front .about .about_list li.goods img {top: 10px; right: 54%;}
#front .about .about_list li.pack img {top: 10px; right: -8px;}
#front .about .about_list li .circle h3 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.4em; line-height: 1.25; text-align: center; margin-bottom: 5px;}
#front .about .about_list li .circle p {font-size: .8em; text-align: center; margin-bottom: 10px;}
#front .about .about_list li .circle a {display: inline-block; font-size: .8em; color: #fff; padding: 2px 16px; background: #684d3c; border: 1px solid #684d3c; border-radius: 4px; opacity: 1;}
#front .about .about_list li .circle a:hover {color: #684d3c; background: #fff;}
#front .about .about_list .more {display: block; width: 90%; margin: 50px auto; padding: 10px 0; background: #fff; border-radius: 5px; box-shadow: 6px 6px 6px -6px rgba(0,0,0, .3); opacity: 1;}
#front .about .about_list .more:hover {box-shadow: 5px 5px 5px -5px rgba(0,0,0, .3);}
#front .about .about_list .more span {display: block; width: 100%; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.3em; color: #684d3c; font-weight: 700; text-align: center;}
#front .about .about_list .more img {display: none;}
#front .about .butterfly,#front .about .bee,#front .about .sakura {display: none;}
/*------------------------------------
INFORMATION
------------------------------------*/
#front .info {position: relative; padding: 20px 0; background: url(../img/front/sec02_back.png),#eaecbd;}
#front .info h2 img {width: 197px;}
#front .info .news {padding: 0 20px;}
#front .info .news .inner {padding: 15px; background: #fff; border-radius: 5px;}
#front .info .news .discription {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: .95em; margin: 15px 0 20px; text-align: center;}
#front .info .news .discription span {font-size: 1em; color: #f15a24; margin-right: -4px;}
#front .info .news ul li {padding: 8px 0; border-bottom: 1px solid #808080;}
#front .info .news ul li a {justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 0 6px;}
#front .info .news ul li a time {font-size: .9em; margin: 2px 12px 0 0;}
#front .info .news ul li a .cat {display: inline-block; color: #fff; font-size: .7em; text-align: center; white-space: nowrap; height: auto; margin: 0 6px 0 0; padding: 1px 6px; background: #e95464;}
#front .info .news ul li a h3 {font-size: .9em; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 8px;}
#front .info .news .more {font-size: 1.1em; margin-top: 10px; float: right;}
#front .info .insta {width: calc(100% - 40px); margin: 40px auto 0;}
#front .info .insta .follow {position: relative; top: 0; left: 0; display: block; width: 96%; height: 48px; background: rgba(0,0,0, .3); margin: 20px auto; opacity: 1; will-change: transform;}
#front .info .insta .follow span {position: relative; top: -3px; left: -3px; display: flex; justify-content: center; align-items: center; width: 100%; height: 48px; color: #fff; font-size: 1.1em; background: #101010; transition: .3s ease;}
#front .info .insta .follow:hover span {transform: translate(3px,3px);}
#front .info .insta .follow img {width: 28px; margin-right: 18px;}

#front .info .clover {display: none;}
/*------------------------------------
ACCESS
------------------------------------*/
#front .access {padding: 20px 0 120px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(152,209,250, .76);}
#front .access h2 img {width: 115px;}
/*------------------------------------
フッター
------------------------------------*/
footer {background: #000; margin-top: auto;}
footer .navi {display: none;}
footer .about {justify-content: center; align-items: flex-end; padding: 30px 0;}
footer .about .logo {width: 120px;}
footer .about address {display: none;}
footer .copyright {font-size: .9em; text-align: center; padding: 14px 0; background: #fff;}

#scroll {display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; bottom: -90px; right: 16px; z-index: 999;}
#scroll img {width: 55px; margin-bottom: 6px;}
#scroll .arrow {font-size: .8em; color: #fff; line-height: 1; background: #ac3600; padding: 4px 6px; border-radius: 4px;}
#scroll .arrow span {font-size: 1em; color: #fff100; line-height: 1; margin-right: 2px;}

#recruit_button {display: none;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#state {margin-top: 20px;}
#state h1 {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif!important; font-size: 2em; font-weight: 500; text-align: center; line-height: 1.25; width: 100%; margin: 0 auto; padding: 48px 0 42px;}
#state .flex-box {justify-content: flex-end;}
#state time {display: flex; align-items: center; font-size: 1em; line-height: 1; margin-right: 12px;}
#state time img {height: 1em; margin-right: 8px;}

#state .cat {display: inline-block; color: #fff; font-size: .85em; text-align: center; white-space: nowrap; height: auto; margin: 0; padding: 1px 10px; background: #e95464;}

#blog .container.single {background: url(../img/blog/leaf.png) 20px 15px/60px auto no-repeat #fff;}

#single {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif!important; font-size: 1em; font-weight: 500; margin: 30px auto; padding: 0;}
#single h2,#single h3,#single h4,#single h5,#single p,#single a,#single em,#single strong,#single blockquote,#single sup,#single sub,#single pre,#single pre,#single del,#single span,#single ul,#single ol,#single li {font-family: inherit; font-size: inherit; font-weight: inherit;}
#single table thead th, #single table thead td,#single table tfoot th, #single table tfoot td,#single table th, #single table td {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif!important; font-size: 1em; font-weight: 500;}

#single h2 {position: relative; left: -30px; width: 100%; font-size: 1.6em; line-height: 1.5; margin: 30px 0; padding: 12px 20px 12px 30px; background: url(../img/front/sec01_back.png); box-shadow: 0 8px 8px -4px rgba(0,0,0, .2);}
#single h2:before {content: ""; display: block; position: absolute; left: 0; bottom: -10px; width: 0; height: 0; border-style: solid; border-width: 10px 0px 0 10px; border-color: #b3b3b3 transparent transparent transparent;}
#single h3 {position: relative; font-size: 1.35em; font-weight: 700; line-height: 1.5; margin: 30px 0 25px; padding: 9px 20px 8px; background: #f3f3f3; border-radius: 5px;}
#single h3:before {content: ""; display: block; position: absolute; bottom: -12px; left: 25px; width: 0; height: 0; border-style: solid; border-width: 12px 15px 0 15px; border-color: #f3f3f3 transparent transparent transparent;}
#single h4 {font-size: 1.15em; font-weight: 700; line-height: 1.5; margin: 30px 0 20px; padding-left: 10px; border-left: 5px solid #684d3c;}
#single h5 {position: relative; font-size: 1.05em; font-weight: 700; line-height: 1.5; margin: 30px 0 20px; padding-left: 1em;}
#single h5:before {content: ""; display: block; position: absolute; top: 6px; left: 0; width: .6em; height: .6em; background: #684d3c;}
#single p {line-height: 2; margin: 20px 0;}
#single p::after {display: block; clear: both; content: "";}
#single img {margin: 5px 10px 5px 0;}
#single a {color: #0075c2;}
#single em {font-style: italic;}
#single strong {color: #906; font-size: 1.3em; font-weight: 700;}
#single blockquote {position: relative; margin: 20px 0; padding: 0 20px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 20px 0;}
#single code {display: block; color: #fff; margin: 20px 0; padding: 20px; background: #364549;}

#single ul, #single ol {margin: 20px 0;}
#single ul li, #single ol li {margin-left: 1.5em; line-height: 2.5;}
#single ul {list-style-type: disc;}
#single ul li {list-style-type: inherit;}
#single ol {list-style-type: decimal;}
#single ol li {list-style-type: inherit;}
#single ul ul, #single ol ol, #single ul ol, #single ol ul {margin: 0 0 0 1.75em;}

#single .scroll-table {overflow: auto; white-space: nowrap; margin: 30px 0;}
#single table {border-collapse: collapse; text-align: left; line-height: 1.5; border: 1px solid #ddd;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {background: #f3f3f3; font-weight: 700;}
#single table thead th, #single table thead td {padding: 0.75rem 0.5rem;}
#single table th, #single table td {padding: 0.5rem; border: 1px solid #ddd;}
#single table th {background: #fafafa;}

#single .aligncenter {display: block; margin: 20px auto;}
#single .alignright {float: right;}
#single .alignleft {float: left;}

/*前後記事*/
#postlink {display: block; margin: 40px 0 20px;}
#postlink a {width: 100%; display: flex; position: relative;}
#postlink a.next {margin-bottom: 10px;}
#postlink a .arrow {display: flex; align-items: center; font-size: 1.25em; background: #684d3c; padding: 0 8px;}
#postlink a .arrow img {max-width: 6px; min-width: 6px;}
#postlink a.next .arrow {border-radius: 4px 0 0 4px;}
#postlink a.prev .arrow {border-radius: 0 4px 4px 0;}
#postlink a .text {display: flex; align-items: center; width: 100%; box-shadow: 0 0 0 1px #e0e0e0 inset;}
#postlink a.prev .text {justify-content: flex-end;}
#postlink a.next .text {justify-content: flex-start;}
#postlink a h3 {font-size: .9em;}
#postlink a.next h3 {margin-right: 10px;}
#postlink a.prev h3 {margin-left: 10px;}
#postlink a .image {min-width: 80px; max-width: 80px; height: 60px; margin: 10px; border-radius: 4px; overflow: hidden;}
#postlink a .image img {width: 100%; height: 100%; transition: .5s ease; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#postlink a:hover img {transform: scale(1.05) rotate(0.01deg);}

/*おすすめの記事*/
#more-posts h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.9em; letter-spacing: 0; margin-bottom: 15px;}
#more-posts .news-list .target {display: flex; align-items: flex-start; width: 100%!important;}
#more-posts .news-list .target .image {min-width: 95px!important; max-width: 95px!important; height: 75px!important; border-radius: 5px!important;}
#more-posts .news-list .target .text {padding: 5px 0 5px 10px!important;}
#more-posts .news-list .target .text .flex-box {justify-content: flex-start;}
#more-posts .news-list .target .text .cat {font-size: .75em!important; margin-left: 10px; padding: 5px 6px 4px!important;}
#more-posts .news-list .target .text h3 {font-size: .9em!important;}

#blog .back {display: block; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.5em; color: #684d3c; font-weight: 700; text-align: center; margin: 40px auto; padding: 12px 0; width: 96%; background: url(../img/front/sec01_back.png); border-radius: 5px; box-shadow: 32px 32px 32px -32px rgba(0,0,0, .3); opacity: 1;}
#blog .back:hover {box-shadow: 5px 5px 5px -5px rgba(0,0,0, .3);}
/*--------------------------------------------------------------------------
固定ページ (page.php)
--------------------------------------------------------------------------*/
#page {padding-bottom: 120px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(254,235,204, .76);}

#page h1.general-head {background: url(../img/page/h1_back.jpg) 25% 0/auto 280px;}

#page .container {width: calc(100% - 80px); margin: 30px auto 0; padding: 1px 20px; background: #fff; border-radius: 10px;}
/*--------------------------------------------------------------------------
ヘッダー汎用
--------------------------------------------------------------------------*/
h1.general-head {position: relative; width: 100%; height: 240px;}
h1.general-head span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #808080; font-size: 2em; line-height: 1.25; display: flex; justify-content: center; align-items: center; width: 300px; height: 127px; background: url(../img/general-head.svg) 0 0/300px 127px no-repeat; z-index: 2;}

.top_message {padding: 30px 20px;}
.top_message h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #3da0ba; font-size: 1.75em; text-align: center; margin: 20px 0;}
.top_message p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.1em; margin: 30px auto 10px;}

.sec-bottom {height: 150px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(152,209,250, .76);}
/*--------------------------------------------------------------------------
らぽぉるってどんなところ？ (page-about.php)
--------------------------------------------------------------------------*/
#about h1.general-head {background: url(../img/about/h1_back.jpg) 75% 0/auto 240px;}
#about .top_message h2 {color: #3da0ba;}

#about .provide.agri {background: url(../img/about/sec01_back.png);}
#about .provide.pack {background: url(../img/about/sec03_back.png);}
#about .provide .inner {flex-direction: column; margin: 0 auto; padding: 20px;}
#about .provide .inner > img {height: 220px; object-fit: cover; object-position: 50% 20%; font-family: 'object-fit: cover; object-position: 50%;';}
#about .provide .text {width: 100%;}
#about .provide .text h2 {width: 80%; margin: 10px auto 30px;}
#about .provide .text h2 img {margin: 0 auto;}
#about .provide .text p {font-size: .95em; margin-bottom: 20px;}
#about .provide .sub {justify-content: space-between; align-items: center; width: 100%; margin-top: 10px;}
#about .provide .sub img {width: 31%;}
#about .provide.goods .inner .text {order: 1;}
#about .provide.goods .inner > img {order: 2;}
#about .provide.goods .inner .text h2 {width: 70%;}
#about .provide.goods .inner .sub {order: 3;}
/*--------------------------------------------------------------------------
利用者さん募集 (page-recruit.php)
--------------------------------------------------------------------------*/
#recruit h1.general-head {background: url(../img/recruit/h1_back.jpg) 50% 0/auto 280px;}
#recruit .top_message h2 {color: #684d3c; margin-left: -15px;}
#recruit .landscape {padding: 45px 0 35px; background: url(../img/about/sec03_back.png);}
#recruit .landscape p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.1em; letter-spacing: 0; margin: 35px 0 30px;}
#recruit .landscape .flex-box {display: block;}
#recruit .landscape figure {display: flex; align-items: flex-start; margin-bottom: 15px;}
#recruit .landscape figure img {width: 52%; height: 120px; object-fit: cover; object-position: 50% 20%; font-family: 'object-fit: cover; object-position: 50%;';}
#recruit .landscape figure figcaption {font-size: .9em; margin-left: 4%;}

#recruit .flow {padding: 40px 0 50px; background: url(../img/recruit/sec02_back.jpg) top center/auto 115% no-repeat;}
#recruit .flow h2 {margin: 0 0 25px; text-align: center;}
#recruit .flow h2 img {margin: 0 auto 10px;}
#recruit .flow h2 span {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.25em; letter-spacing: 0; margin-left: -8px;}
#recruit .flow h2 span span.pink {color: #ff7bac; font-size: 1em;}
#recruit .flow .schedule {margin: 0 auto; padding: 20px; border-radius: 5px; background: rgba(255,255,255, .61);}
#recruit .flow .schedule li {position: relative; margin-bottom: 50px; padding: 10px 15px; background: #fff; border: 2px solid #ccc;}
#recruit .flow .schedule li:after {content: ""; position: absolute; bottom: -42px; left: 50%; transform: translate(-50%,0); display: block; width: 28px; height: 30px; background: url(../img/recruit/sec02_arrow.svg) center 0/28px 30px;}
#recruit .flow .schedule li:last-child {margin-bottom: 0;}
#recruit .flow .schedule li:last-child:after{display: none;}
#recruit .flow .schedule li .time {font-family: 'Century Gothic','Avenir-Light',sans-serif; font-size: 2em; line-height: 1.5;}
#recruit .flow .schedule li p {font-size: 1.10em;}

#recruit .hanyou {background: #999; padding: 50px 0 40px;}
#recruit .hanyou h2 {justify-content: center; align-items: center; margin-bottom: 45px;}
#recruit .hanyou h2 span {font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #684d3c; font-size: 2.5em; letter-spacing: 0; margin-left: 20px;}
#recruit .hanyou .list {background: #fff; padding: 20px; border-radius: 20px;}
#recruit .hanyou .list li {margin-bottom: 20px;}
#recruit .hanyou .list li:last-child {margin-bottom: 0;}
#recruit .hanyou .list li .flex-box {display: block;}
#recruit .hanyou .list li h3 {font-size: 1.5em; font-weight: 700; padding: 5px 25px; background: #e9e1d7; border-radius: 12px; margin-bottom: 15px;}
#recruit .hanyou .list li p {font-size: .95em; padding: 0 5px;}
#recruit .hanyou .list li img {max-width: 35%; margin: 20px 0 0 auto;}

#recruit .work {background: url(../img/front/sec02_back.png),url(../img/about/sec03_back.png);}
#recruit .work h2 img {width: 91px; margin-left: -35px;}

#recruit .require {padding: 50px 0 250px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(152,209,250, .76);}
#recruit .require h2 img {width: 49px; margin-left: -10px;}
#recruit .require .list li ul {margin: 20px 0;}
#recruit .require .list li ul li {font-size: .95em; margin-bottom: 0; padding-left: 0.95em; text-indent: -0.95em;}
#recruit .require .list li table {width: 100%; margin-top: 20px; border: 1px solid #5f3712;}
#recruit .require .list li table th,#recruit .require .list li table td {display: block; font-size: 1.05em; padding: 10px 20px;}
#recruit .require .list li table th {color: #fff; font-weight: 700; background: #7f5732;}
/*--------------------------------------------------------------------------
商品紹介 (page-service.php)
--------------------------------------------------------------------------*/
#service h1.general-head {background: url(../img/service/h1_back.jpg) 50% 0/auto 280px;}

#service .top_message h2 {display: flex; justify-content: center; align-items: center; color: #684d3c; font-size: 2.25em;}
#service .top_message h2 span {font-family: serif; color: #684d3c; font-size: 1em; font-style: italic; font-weight: 700; line-height: 1; letter-spacing: 8px; margin-top: 5px;}
#service .top_message h2 img {display: none;}

#service .item.vegi {background: url(../img/service/sec01_back.png);}
#service .item.candle {background: url(../img/service/sec02_back.png);}
#service .item.aroma {background: url(../img/service/sec03_back.png);}
#service .item.basket {background: url(../img/service/sec04_back.png);}
#service .item .container {position: relative; height: 330px;}
#service .item .image,#service .item .text {position: absolute;}

#service .item .image {z-index: 1;}
#service .item.vegi .image {width: 344px; top: -20px; left: -75px;}
#service .item.candle .image {width: 291px; top: -24px; right: -30px;}
#service .item.aroma .image {width: 326px; top: -41px; left: -30px;}
#service .item.basket .image {width: 331px; top: -23px; right: -35px;}

#service .item .text {z-index: 2;}
#service .item.vegi .text {bottom: 38px; right: 16px; text-align: right;}
#service .item.candle .text {bottom: 42px; left: 16px;}
#service .item.aroma .text {bottom: 38px; right: 16px; text-align: right;}
#service .item.basket .text {bottom: 32px; left: 16px;}

#service .item .text h2 {margin: 0 0 10px auto;}
#service .item.vegi .text h2 {width: 99px;}
#service .item.candle .text h2 {width: 263px;}
#service .item.aroma .text h2 {width: 317px;}
#service .item.basket .text h2 {width: 263px;}
#service .item .text p {font-size: 1.1em;}

#service .link {padding: 50px 0;}
#service .link a {position:relative; top: 0; display: block; width: 90%; background: #f396aa; margin: 0 auto; padding: 20px 0;  border-radius: 10px; box-shadow: 0 5px 0 #a86876; opacity: 1; transition: .3s cubic-bezier(.09,1.17,.51,.98);}
#service .link a:hover {background: #ffa5b8;}
#service .link a:active{top: 5px; box-shadow: none;}
#service .link a img {width: 197px; margin: 0 auto;}
/*--------------------------------------------------------------------------
ブログ (page-blog.php)
--------------------------------------------------------------------------*/
#blog {padding-bottom: 120px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(254,235,204, .76);}

#blog h1.general-head {background: url(../img/blog/h1_back.jpg) 25% 0/auto 280px;}
#blog h1.general-head span img {width: 179px;}

#blog .container {width: calc(100% - 80px); margin: 40px auto 0; padding: 20px 20px; background: #fff; border-radius: 10px;}

#blog .news-list {flex-wrap: wrap;}
#blog .news-list .target {width: 100%; margin-bottom: 10px;}
#blog .news-list .target .image {width: 100%; height: 200px; border-radius: 10px; overflow: hidden;}
#blog .news-list .target .image img {width: 100%; height: 100%; transition: .5s ease; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#blog .news-list .target:hover img {transform: scale(1.05) rotate(0.01deg);}
#blog .news-list .target .text {padding: 15px 5px 5px; transition: .3s ease;}
#blog .news-list .target .text .flex-box {align-items: center; margin-bottom: 5px;}
#blog .news-list .target .text time {font-size: .95em; line-height: 1;}
#blog .news-list .target .text .cat {display: inline-block; color: #fff; font-size: .85em; line-height: 1; text-align: center; white-space: nowrap; height: auto; padding: 5px 10px; background: #e95464;}
#blog .news-list .target .text h3 {font-size: 1.2em; font-weight: 700;}
/*--------------------------------------------------------------------------
会社概要 (page-company.php)
--------------------------------------------------------------------------*/
#company {padding-bottom: 120px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(152,209,250, .76);}

#company h1.general-head {background: url(../img/company/h1_back.jpg) 25% 0/auto 280px;}

#company .container {width: calc(100% - 80px); margin: 40px auto 0; padding: 20px; background: url(../img/company/ribbon.jpg) top 15px right/314px auto no-repeat #fff; border-radius: 10px;}
#company img {width: auto;}

#company .wish {margin: 170px 0 40px;}
#company .wish .flex-box {display: block;}
#company .wish h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.1em; letter-spacing: 0; margin: 20px 0;}
#company .wish p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.1em; line-height: 2.1; letter-spacing: 0;}
#company .wish img {display: none;}

#company .info {margin-bottom: 40px;}
#company .info .inner {margin: 20px auto 0;}
#company .info img {height: 180px; object-fit: cover; object-position: 100% 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#company .info h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2em; letter-spacing: 0; margin: 0 0 15px;}
#company .info table {width: 100%;}
#company .info table th,#company .info table td {display: block; font-size: 1em; padding: 8px 12px; font-weight: 500; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#company .info table th {text-align: left; background: url(../img/front/sec01_back.png);}

#company .access h2 {justify-content: flex-start; align-items: center; font-size: 1.5em; margin-bottom: 10px; font-weight: 500; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#company .access h2 img {margin-right: 12px;}
#company .access ul {margin: 20px 0; padding: 0 8px;}
#company .access ul li {margin-bottom: 20px;}
#company .access h3 {justify-content: flex-start; align-items: center; font-size: 1.2em; font-weight: 700;}
#company .access h3 img {margin-right: 6px;}
#company .access #googlemap {width: 100%; height: 400px;}
/*--------------------------------------------------------------------------
お問い合わせ (page-contact.php)
--------------------------------------------------------------------------*/
#contact {padding-bottom: 120px; background-image: url(../img/front/sec03_back_bottom.png),url(../img/front/sec02_back.png); background-position: 50% 100%,0 0; background-size: 150% auto,200px 200px; background-repeat: repeat-x,repeat; background-color: rgba(254,235,204, .76);}

#contact h1.general-head {background: url(../img/contact/h1_back.jpg) 25% 0/auto 280px;}

#contact .container {width: calc(100% - 80px); margin: 40px auto 0; padding: 20px; background: #fff; border-radius: 10px;}

#contact section {margin: 20px 0 40px;}
#contact h3 {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-size: 1.5em; line-height: 1.2; font-weight: 500; letter-spacing: 0; margin-bottom: 25px; padding-left: 6px; border-left: solid 5px #b3b3b3;}
#contact p {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-size: 1em; font-weight: 500; letter-spacing: 0;}
#contact a ~ p {margin-bottom: 0px;}
#contact a {display: inline-flex; color: #025576; font-size: 1em; font-weight: 700; margin-bottom: 25px;}
#contact a img {width: 16px; margin-right: 4px;}
#contact dl {margin: 20px 0;}
#contact dl dt {color: #4d4d4d; font-size: 1em; font-weight: 700;}
#contact dl dd {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-size: 1em; font-weight: 500; letter-spacing: 0;}
#contact .notice {margin: 40px 0; padding: 15px; border: 1px solid #666;}

#contact .form {margin-top: 50px; text-align: center;}
#contact .form table {border: 1px solid #ccc; border-top: none;}
#contact .form table tr {display: block;}
#contact .form table tr th,#contact .form table tr td {display: block; padding: 10px 14px;}
#contact .form table tr th {height: 100%; font-size: 1em; font-weight: 700; text-align: left; vertical-align: top; background: #f5f5f5; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#contact .form table tr th span {display: flex; justify-content: space-between; align-items: center;}
#contact .form table tr th small {display: inline-block!important; color: #f00; font-size: .9em; line-height: 1; background: #fff; padding: 3px 3px 2px; border: 1px solid #f00;}
#contact .form table tr td {width: 100%; text-align: left; vertical-align: middle;}
#contact .form input[type="text"],#contact .form input[type="email"],#contact .form input[type="tel"],
#contact .form textarea {display: block; width: calc(100% - 46px); background: #fff!important; padding: 6px 8px; border: 1px solid #e6e6e6; border-radius: 5px; resize: vertical;}
#contact .form textarea {height: 180px;}
#contact .form .cheak {position: relative; display: inline-block; width: 100%; margin: 45px auto 40px; cursor: pointer;}
#contact .form .cheak input[type="radio"],#contact .form .cheak input[type="checkbox"] {display: none;}
#contact .form .cheak span.wpcf7-list-item-label {display: block; position: relative; padding-top: 30px;}
#contact .form .cheak span.wpcf7-list-item-label:before {content: ''; position: absolute; left: 50%; top: -4px; transform: translate(-50%,-50%); width: 21px; height: 21px; border: 2px solid #ccc;}
#contact .form .cheak span.wpcf7-list-item-label:after {width: 12px; height: 6px; border: 3px solid #684d3c; content: ''; position: absolute; transform: rotate(-45deg); left: -29px; top: 4px; border-top: none; border-right: none; transition: all 0.3s ease; opacity: 0;}
#contact .form .cheak span.wpcf7-list-item-label:before {top: -32px; left: 50%; transform: translate(-50%,0);}
#contact .form .cheak span.wpcf7-list-item-label:after {top: -26px; left: calc(50% - 8px); transform: translate(-50%,0),rotate(-45deg);}
#contact .form .cheak span.wpcf7-list-item-label:before {top: 0px;}
#contact .form .cheak span.wpcf7-list-item-label:after {top: 6px;}
#contact .form input[type="checkbox"]:checked + span.wpcf7-list-item-label:after,
#contact .form input[type="radio"]:checked + span.wpcf7-list-item-label:after {opacity: 1;}
#contact .form input[type="submit"] {position:relative; top: 0; display: block; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.5em; letter-spacing: 0; width: 100%; background: url(../img/front/sec01_back.png); margin: 0 auto; padding: 15px 0;  border-radius: 10px; box-shadow: 0 5px 0 #e5d8d1; opacity: 1; transition: .3s cubic-bezier(.09,1.17,.51,.98);}
#contact .form input[type="submit"]:active {top: 5px; box-shadow: none;}
#contact .form input[type="submit"]:hover {color: #684d3c;}
.wpcf7-response-output {border: 1px solid #0075c2!important; color: #0075c2!important; text-align: center!important; background: transparent!important; margin-top: 10px!important;}
/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {position: relative; width: 100%; height: calc(100vh - 64px); background: url(../img/404.jpg) 0/auto 100% no-repeat;}
#notfound .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 96vw; height: 80vw;}
#notfound h1 {display: flex; justify-content: center; align-items: center; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-weight: 500; line-height: 1; color: #684d3c; font-size: 5.5em; z-index: 2;}
#notfound h1 span {font-family:inherit; font-size: .3em; font-weight: 700; line-height: 1.25; color: inherit; margin-left: 12px; z-index: 2;}
#notfound p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.1em; text-align: center; z-index: 2;}
#notfound a {display: block; width: 240px; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1em; color: #fff; text-align: center; margin-top: 15px; padding: 8px 0; background: #684d3c; border: 2px solid #684d3c; opacity: 1; z-index: 2;}
#notfound a:hover {color: #684d3c; background: #fff;}
#notfound .bg {width: 96vw; height: 80vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../img/general-head.svg) 0 0/96vw 80vw; opacity: .7;}