/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body,main {min-width: 100%; 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; visibility: hidden; transition: opacity .7s ease;}
body.fadeout::after {opacity: 1; visibility: visible;}
main > div {display: block; padding-top: 85px; min-height: calc(100vh - 85px);}
main > div#front {padding-top: 155px; min-height: calc(100vh - 155px);}

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

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

/*コンティナ*/
.container {display: block; width: 960px; margin: 0 auto;}
.container.min {width: 800px;}

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

/*Googlemap*/
#googlemap {position: relative; margin: 0 auto; 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 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: 30px 0;}
#pagination span,#pagination a {display: inline-flex; justify-content: center; align-items: center; width: 18px; height: 18px; color: #fff; background: #684d3c; font-size: 1.2em; line-height: 1; margin: 0 4px; 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: 200px;}
#loader img.vis {display: block;}
/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: fixed; top: 0; width: 100%; padding: 0; background: #fff; z-index: 1000;}
header:after {content: ""; position: absolute; bottom: -28px; left: 0; display: block; width: 100%; height: 28px; background: url(../img/front/top_up.png) center 0/1428px 28px repeat-x; transition: .3s ease; z-index: 1000; -webkit-backface-visibility: hidden; z-index: 1000;}
header .logo {width: 192px;}
header .container {align-items: center; transition: .3s ease;}
header .g-navi {position: relative; display: flex; align-items: flex-end; margin: 15px 15px 0 0;}
header .g-navi a {display: block; position: relative; color: #684d3c; font-size: 1em; margin: 0 20px 0 0; opacity: 1;}
header .g-navi a:last-child {margin: 0;}
header .g-navi a:after {content: ""; position: absolute; display: block; bottom: -4px; left: 0; right: 0; width: 0; height: 2px; margin: auto; background: #684d3c; transition: .3s ease;}
header .g-navi a:hover:after {width: 100%;}
header .info {margin-bottom: 5px;}
header .info .add {display: block; font-size: .9em;}
header .info .tel {display: flex; align-items: center; font-family: DINCond-Bold,sans-serif; font-size: 2em; line-height: 1; color: #684d3c;}
header .info .tel img {width: 16px; margin-right: 6px;}
header .pennant {position: absolute; top: 0; transition: .5s ease; z-index: 1001;}
header .pennant.left {left: 0;}
header .pennant.right {right: 0; transform: scale(-1, 1);}
header .leaf {position: absolute; bottom: -40px; right: calc(50% - 604px); transform: translate(-50%,0); z-index: 1001;}

header.conversion_01 .container,
header.conversion_01.conversion_lower .container {padding: 55px 0 30px;}
header.conversion_01 .pennant {transform: translate(0,0);}
header.conversion_01 .pennant.right {transform: scale(-1, 1) translate(0,0);}

header.conversion_02 .container {padding: 30px 0 20px;}
header.conversion_02 .pennant {transform: translate(0,-100%);}
header.conversion_02 .pennant.right {transform: scale(-1, 1) translate(0,-100%);}

header.conversion_lower .container {padding: 20px 0 5px;}
header.conversion_lower .logo img {width: 160px;}
header.conversion_lower .g-navi {margin: 5px auto 0;}

header #full-navi,#nav-toggle,#overlay {display: none;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#front h2 {width: 950px; margin: 70px auto; background-image: url(../img/front/generic_left.png),url(../img/front/generic_right.png); background-size: 258px 69px,261px 78px; background-position: 0 50%,100% 50%; background-repeat: no-repeat;}
#front h2 img {display: block; margin: 0 auto;}
/*------------------------------------
TOP
------------------------------------*/
#front .top {position: relative; width: 100%; height: auto; margin-bottom: -80px;}
#front .top .main_image {position: relative; top: -43px; width: 100%; height: 562px; background: url(../img/front/top_back.jpg) 0 0/100% auto; background-attachment: fixed; overflow: hidden; z-index: 1;}
#front .top .main_image .yubi {position: absolute; bottom: -40%; right: 297px; width: 282px;}
#front .top .under_image {position: relative; top: -63px; width: 100%; height: 40px; background: url(../img/front/top_under.png) center 0/1457px 50px 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: 0; top: -55px;}
#front .top .under_image .bear {left: 205px; top: -86px;}
#front .top .under_image .cabbage {left: 405px; top: -30px;}
#front .top .under_image .cucumber {right: 230px; top: -45px;}
#front .top .under_image .sunflower {right: 10px; top: -80px;}
/*------------------------------------
ABOUT
------------------------------------*/
#front .about {position: relative; padding-top: 140px; background: url(../img/front/sec01_back.png);}
#front .about .motto img {margin: 170px auto 335px;}
#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: 900px; margin: -185px auto 0;}
#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: 313px; min-width: 313px; height: 313px; min-height: 313px; background: #fff; margin: 30px 0 0; border-radius: 50%; z-index: 2;}
#front .about .about_list li.agri .circle {left: -101px;}
#front .about .about_list li.pack .circle {left: -133px;}
#front .about .about_list li img {position: relative;}
#front .about .about_list li.goods img {right: 112px;}
#front .about .about_list li.pack img {left: -28px;}
#front .about .about_list li .circle h3 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.4em; line-height: 1.25; text-align: center; margin-bottom: 10px;}
#front .about .about_list li .circle p {font-size: 1.1em; text-align: center; margin-bottom: 14px;}
#front .about .about_list li .circle a {display: inline-block; color: #fff; padding: 4px 34px; background: #684d3c; border: 2px solid #684d3c; border-radius: 4px; opacity: 1;}
#front .about .about_list li .circle a:hover {color: #684d3c; background: #fff;}
#front .about .about_list .more {position: relative; display: flex; align-items: center; justify-content: space-between; margin: 100px auto; width: 535px; height: 98px; background: #fff; border-radius: 5px; box-shadow: 32px 32px 32px -32px 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: 2.25em; color: #684d3c; font-weight: 700; text-align: center;}
#front .about .about_list .more img {position: absolute;}
#front .about .about_list .more .bear {top: 18px; left: 12px; width: 47px; transform: rotate(-10deg);}
#front .about .about_list .more .sunflower {bottom: 4px; right: 4px; width: 68px;}

#front .about .butterfly {position: absolute; top:320px; left: calc(50% - 470px); transform: translate(-50%,0);}
#front .about .bee {position: absolute; top:821px; left: calc(50% + 487px); transform: translate(-50%,0);}
#front .about .sakura {position: absolute; bottom: 60px; left: calc(50% + 384px); transform: translate(-50%,0);}
/*------------------------------------
INFORMATION
------------------------------------*/
#front .info {position: relative; padding: 20px 0; background: url(../img/front/sec02_back.png),#eaecbd;}
#front .info .news {display: flex; flex-direction: column; justify-content: center; width: 1211px; height: 452px; margin: 0 auto 120px; background: url(../img/front/sec02_list.svg) no-repeat;}
#front .info .news .inner {width: 960px; margin: 0 auto;}
#front .info .news .discription {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.725em; margin: 25px 0;}
#front .info .news .discription br {display: none;}
#front .info .news .discription span {font-size: 1.05em; color: #f15a24; margin-right: -8px;}
#front .info .news ul li {padding: 14px 0; border-bottom: 1px solid #808080;}
#front .info .news ul li a {justify-content: flex-start; align-items: center;}
#front .info .news ul li a time {font-size: 1.15em; margin-right: 20px;}
#front .info .news ul li a .cat {display: inline-block; color: #fff; font-size: 1.05em; text-align: center; white-space: nowrap; height: auto; margin: 0 16px 0 0; padding: 3px 12px; background: #e95464;}
#front .info .news ul li a h3 {font-size: 1.15em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#front .info .news .more {font-size: 1.2em; margin-top: 10px; float: right;}
#front .info .insta {width: 960px; margin: 0 auto;}
#front .info .insta .follow {position: relative; top: 0; left: 0; display: block; width: 330px; height: 52px; background: rgba(0,0,0, .3); margin: 50px auto; opacity: 1; will-change: transform;}
#front .info .insta .follow span {position: relative; top: -4px; left: -4px; display: flex; justify-content: center; align-items: center; width: 330px; height: 52px; color: #fff; font-size: 1.1em; background: #101010; transition: .3s ease;}
#front .info .insta .follow:hover span {transform: translate(4px,4px);}
#front .info .insta .follow img {width: 28px; margin-right: 18px;}

#front .info .clover {position: absolute; bottom: 80px; left: calc(50% - 552px); transform: translate(-50%,0);}
/*------------------------------------
ACCESS
------------------------------------*/
#front .access {padding: 20px 0 200px; 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);}
#front .access #googlemap {width: 960px; height: 400px;}
/*------------------------------------
フッター
------------------------------------*/
footer {background: #000; margin-top: auto;}
footer .navi {justify-content: center; padding: 30px 0;}
footer .navi li {border-left: 1px solid #fff; padding: 0 20px;}
footer .navi li:last-child {border-right: 1px solid #fff;}
footer .navi li a {color: #fff;}
footer .about {justify-content: center; align-items: flex-end; padding: 20px 0 35px;}
footer .about .logo {width: 178px;}
footer .about address {margin-left: 50px;}
footer .about address .add {color: #fff;}
footer .about address a {display: flex; align-items: center; font-family: DINCond-Bold,sans-serif; font-size: 2em; line-height: 1; color: #fff; margin-right: 20px;}
footer .about address a img {width: 16px; margin-right: 6px;}
footer .copyright {text-align: center; padding: 14px 0; background: #fff;}
footer .copyright br {display: none;}

#scroll {display: none;}

#recruit_button {position: fixed; bottom: 30px; right: 20px; width: 159px; transform: scale(.5); filter: drop-shadow(5px 5px 8px rgba(0,0,0,.5)); opacity: 0; z-index: 1000;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#state {margin-top: 30px;}
#state h1 {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif!important; font-size: 2.8em; font-weight: 500; text-align: center; line-height: 1.25; width: 75%; margin: 0 auto; padding: 72px 0;}
#state .flex-box {justify-content: flex-end;}
#state time {display: flex; align-items: center; font-size: 1.15em; margin-right: 20px;}
#state time img {margin-right: 8px;}
#state .cat {display: inline-block; color: #fff; font-size: 1.05em; text-align: center; white-space: nowrap; height: auto; margin: 0 12px 0 0; padding: 3px 20px; background: #e95464;}

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

#single {font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif!important; font-size: 1.15em; font-weight: 500; margin: 60px 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: 1.15em; font-weight: 500;}

#single h2 {position: relative; left: -50px; width: 100%; font-size: 1.75em; line-height: 1.5; margin: 30px 0; padding: 12px 40px 12px 50px; 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.45em; font-weight: 700; line-height: 1.5; margin: 30px 0; 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.25em; font-weight: 700; line-height: 1.5; margin: 30px 0; padding-left: 10px; border-left: 5px solid #684d3c;}
#single h5 {position: relative; font-size: 1.1em; font-weight: 700; line-height: 1.5; margin: 30px 0; padding-left: 1em;}
#single h5:before {content: ""; display: block; position: absolute; top: 8px; 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.4em; font-weight: 700;}
#single blockquote {position: relative; margin: 30px 0; padding: 15px 30px; border: 1px solid #ddd;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 30px 0;}
#single code {display: block; color: #fff; margin: 30px 0; padding: 20px; background: #364549;}

#single ul, #single ol {margin: 30px 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 table {border-collapse: collapse; text-align: left; line-height: 1.5; margin: 30px 0; border: 1px solid #ddd;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {font-family: initial; background: #f3f3f3; font-weight: 700;}
#single table thead th, #single table thead td {padding: 0.75rem 0.5rem;}
#single table th, #single table td {font-family: initial; padding: 0.5rem; border: 1px solid #ddd;}
#single table th {font-family: initial; background: #fafafa;}

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

/*前後記事*/
#postlink {display: flex; margin: 80px 20px;}
#postlink a {width: 50%; display: flex; position: relative;}
#postlink a.prev {margin-left: auto;}
#postlink a.next {margin-right: auto;}
#postlink a .arrow {display: flex; align-items: center; font-size: 1.5em; background: #684d3c; padding: 0 12px;}
#postlink a .arrow img {max-width: 10px; min-width: 10px;}
#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: 1em;}
#postlink a.next h3 {margin-right: 15px;}
#postlink a.prev h3 {margin-left: 15px;}
#postlink a .image {min-width: 120px; max-width: 120px; height: 80px; margin: 15px; 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: 2.4em; letter-spacing: 0; margin-bottom: 20px;}
#more-posts .news-list .target {width: 31%!important;}
#more-posts .news-list .target .image {height: 200px!important;}
#more-posts .news-list .target .text .cat {font-size: .9em!important; padding: 8px 16px 6px!important;}
#more-posts .news-list .target .text h3 {font-size: 1.15em!important;}
/*--------------------------------------------------------------------------
固定ページ (page.php)
--------------------------------------------------------------------------*/
#page {padding: 85px 0 245px; 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(254,235,204, .76);}

#page h1.general-head {background-image: url(../img/page/h1_back.jpg);}

#page .container {width: 780px; margin: 85px auto 0; padding: 1px 40px; background: #fff; border-radius: 10px;}
/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
h1.general-head {position: relative; width: 100%; height: 350px; background-position: 50% 50%; background-size: 120%;}
h1.general-head span {position: absolute; top: 50%; left: calc(50% - 280px); transform: translate(-50%,-50%); font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #808080; font-size: 2.55em; line-height: 1.25; display: flex; justify-content: center; align-items: center; width: 405px; height: 172px; background: url(../img/general-head.svg) 0 0/405px 172px no-repeat; z-index: 2;}

.top_message {padding: 40px 0;}
.top_message h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.3em; letter-spacing: 0; text-align: center; margin: 30px 0;}
.top_message p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.35em; letter-spacing: 0; width: 800px; margin: 40px auto 30px;}

.sec-bottom {height: 280px; 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);}
/*--------------------------------------------------------------------------
らぽぉるってどんなところ？ (page-about.php)
--------------------------------------------------------------------------*/
#about h1.general-head {background-image: url(../img/about/h1_back.jpg)}

#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-wrap: wrap; align-items: flex-start; width: 750px; margin: 0 auto; padding: 50px 0;}
#about .provide .text {width: 373px;}
#about .provide .text h2 {margin: 10px 0 30px;}
#about .provide .text p {font-size: 1.05em;}
#about .provide .sub {justify-content: space-between; align-items: center; width: 100%; margin-top: 40px;}
#about .provide .sub img {width: 31%;}
/*--------------------------------------------------------------------------
利用者さん募集 (page-recruit.php)
--------------------------------------------------------------------------*/
#recruit h1.general-head {background-image: url(../img/recruit/h1_back.jpg);}

#recruit .top_message h2 {color: #684d3c;}
#recruit .landscape {padding: 60px 0 80px; background: url(../img/about/sec03_back.png);}
#recruit .landscape p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.15em; letter-spacing: 0; margin: 40px 0;}
#recruit .landscape figure {width: 386px;}
#recruit .landscape figure figcaption {margin-top: 15px;}

#recruit .flow {padding: 80px 0 100px; background: url(../img/recruit/sec02_back.jpg) top center/auto 115% no-repeat;}
#recruit .flow h2 {display: flex; justify-content: center; align-items: center; margin: 0 0 60px;}
#recruit .flow h2 img {margin-right: 5px;}
#recruit .flow h2 span {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 3.2em; letter-spacing: 0;}
#recruit .flow h2 span span.pink {color: #ff7bac; font-size: 1em;}
#recruit .flow .schedule {width: 640px; margin: 0 auto; padding: 40px; border-radius: 5px; background: rgba(255,255,255, .61);}
#recruit .flow .schedule li {position: relative; display: flex; align-items: center; margin-bottom: 78px; padding: 0 25px; background: #fff; border: 2px solid #ccc;}
#recruit .flow .schedule li:after {content: ""; position: absolute; bottom: -67px; left: 50%; transform: translate(-50%,0); display: block; width: 46px; height: 50px; background: url(../img/recruit/sec02_arrow.svg) center 0/46px 50px;}
#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: 2.6em; text-align: right; width: 94px; margin-right: 25px;}
#recruit .flow .schedule li p {font-size: 1.35em;}

#recruit .hanyou {background: #999; padding: 80px 0 100px;}
#recruit .hanyou h2 {justify-content: center; align-items: center; margin-bottom: 60px;}
#recruit .hanyou h2 img {margin-left: -40px;}
#recruit .hanyou h2 span {font-family: dejima-fonts,"游明朝",YuMincho,serif; color: #684d3c; font-size: 3.2em; letter-spacing: 0; margin-left: 20px;}
#recruit .hanyou .list {background: #fff; padding: 80px 60px; border-radius: 20px;}
#recruit .hanyou .list li {margin-bottom: 40px;}
#recruit .hanyou .list li:last-child {margin-bottom: 0;}
#recruit .hanyou .list li h3 {font-size: 1.9em; font-weight: 700; padding: 5px 25px; background: #e9e1d7; border-radius: 12px; margin-bottom: 20px;}
#recruit .hanyou .list li p {font-size: 1.1em; padding: 0 10px;}
#recruit .hanyou .list li img {margin: 10px;}

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

#recruit .require {padding: 80px 0 280px; 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 .list li ul {margin: 40px 0;}
#recruit .require .list li ul li {font-size: 1.1em; margin-bottom: 0;}
#recruit .require .list li table {width: 100%; margin-top: 40px; border: 1px solid #5f3712;}
#recruit .require .list li table th,#recruit .require .list li table td {font-size: 1.1em; font-weight: 700; padding: 20px 40px; border: 1px solid #5f3712;}
/*--------------------------------------------------------------------------
商品紹介 (page-service.php)
--------------------------------------------------------------------------*/
#service h1.general-head {background-image: url(../img/service/h1_back.jpg);}

#service .top_message h2 {display: flex; justify-content: center; align-items: center; color: #684d3c; font-size: 3.5em;}
#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: 7px;}
#service .top_message h2 img {margin-left: 40px;}

#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; width: 970px; height: 490px;}
#service .item .image,#service .item .text {position: absolute;}

#service .item .image {z-index: 1;}
#service .item.vegi .image {top: 92px; left: 0;}
#service .item.candle .image {top: 85px; right: 0;}
#service .item.aroma .image {top: -25px; left: 0;}
#service .item.basket .image {top: -38px; right: 0;}

#service .item .text {transform: translate(0,-50%); z-index: 2;}
#service .item.vegi .text {right: 60px; bottom: -20px;}
#service .item.candle .text {left: 76px; bottom: 31px;}
#service .item.aroma .text {right: 8px; bottom: 84px;}
#service .item.aroma .text p {display: inline-block; margin-left: 135px;}
#service .item.basket .text {top: 50%; left: 28px;}
#service .item .text h2 {margin-bottom: 16px;}
#service .item .text p {font-size: 1.6em;}

#service .link {padding: 75px 0;}
#service .link a {position:relative; top: 0; display: block; width: 480px; background: #f396aa; margin: 0 auto; padding: 25px 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 {margin: 0 auto;}
/*--------------------------------------------------------------------------
ブログ (page-blog.php)
--------------------------------------------------------------------------*/
#blog {padding: 85px 0 245px; 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(254,235,204, .76);}

#blog h1.general-head {background-image: url(../img/blog/h1_back.jpg);}
#blog h1.general-head span img {width: 224px;}

#blog .container {width: 860px; margin: 85px auto 0; padding: 40px; background: #fff; border-radius: 10px;}

#blog .news-list {flex-wrap: wrap;}
#blog .news-list .target {width: 48%; margin-bottom: 20px;}
#blog .news-list .target .image {width: 100%; height: 300px; 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 8px 10px; transition: .3s ease;}
#blog .news-list .target .text .flex-box {align-items: center; margin-bottom: 10px;}
#blog .news-list .target .text time {font-size: 1.1em; line-height: 1;}
#blog .news-list .target .text .cat {display: inline-block; color: #fff; font-size: 1em; line-height: 1; text-align: center; white-space: nowrap; height: auto; padding: 8px 16px; background: #e95464;}
#blog .news-list .target .text h3 {font-size: 1.25em; font-weight: 700;}

#blog .back {display: block; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2em; color: #684d3c; font-weight: 700; text-align: center; margin: 50px auto; padding: 16px 0; width: 520px; 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-company.php)
--------------------------------------------------------------------------*/
#company {padding: 85px 0 245px; 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);}

#company h1.general-head {background-image: url(../img/company/h1_back.jpg);}

#company .container {width: 780px; margin: 85px auto 0; padding: 40px 80px; background: url(../img/company/ribbon.jpg) top 30px right/auto no-repeat #fff; border-radius: 10px;}
#company img {width: auto;}

#company .wish {margin-bottom: 80px;}
#company .wish .flex-box {align-items: flex-end;}
#company .wish h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.7em; letter-spacing: 0; margin: 20px 0 25px;}
#company .wish p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.3em; line-height: 2.1; letter-spacing: 0; margin-right: 34px;}

#company .info {margin-bottom: 100px;}
#company .info .inner {width: 640px; margin: 80px auto 0;}
#company .info h2 {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 2.25em; letter-spacing: 0; margin: 0 0 15px;}
#company .info table {width: 100%;}
#company .info table th,#company .info table td {font-size: 1.2em; padding: 12px 24px; border-bottom: 1px solid #999; font-weight: 500; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#company .info table th {width: 170px; text-align: left; background: url(../img/front/sec01_back.png);}

#company .access h2 {justify-content: flex-start; align-items: center; font-size: 1.6em; margin-bottom: 20px; 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: 40px 0 30px; padding: 0 16px;}
#company .access ul li {margin-bottom: 20px;}
#company .access h3 {justify-content: flex-start; align-items: center; font-size: 1.3em; font-weight: 700;}
#company .access h3 img {margin-right: 8px;}
#company .access #googlemap {width: 100%; height: 400px;}
/*--------------------------------------------------------------------------
お問い合わせ (page-contact.php)
--------------------------------------------------------------------------*/
#contact {padding: 85px 0 245px; 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(254,235,204, .76);}

#contact h1.general-head {background-image: url(../img/contact/h1_back.jpg);}

#contact .container {width: 780px; margin: 85px auto 0; padding: 80px; background: #fff; border-radius: 10px;}

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

#contact .form {margin-top: 80px; text-align: center;}
#contact .form table {width: 100%; border: 1px solid #ccc;}
#contact .form table tr {border: 1px solid #ccc;}
#contact .form table tr th {padding: 20px 14px; min-width: 200px; height: 100%; font-size: 1em; font-weight: 700; text-align: left; vertical-align: top; background: #f5f5f5; border-right: 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%; padding: 10px 14px; 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% - 16px); 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; margin: 55px auto 50px; cursor: pointer;}
#contact .form .cheak .wpcf7-radio {display: flex; margin: 0 -35px 0 35px;}
#contact .form .cheak .wpcf7-radio .wpcf7-list-item-label {display: block; margin-right: 35px; 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;}
#contact .form .cheak span.wpcf7-list-item-label:before {content: ''; position: absolute; left: -34px; top: -2px; 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: 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.6em; letter-spacing: 0; width: 480px; 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: 40px!important;}
/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {position: relative; width: 100%; height: calc(100vh - 85px); background: url(../img/404.jpg) 0/100% 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: 810px; height: 516px;}
#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: 9em; z-index: 2;}
#notfound h1 span {font-family:inherit; font-size: .3em; font-weight: 700; line-height: 1.25; color: inherit; margin-left: 15px; z-index: 2;}
#notfound p {font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.5em; z-index: 2;}
#notfound a {display: block; width: 280px; font-family: dejima-fonts,"游明朝",YuMincho,serif; font-size: 1.25em; color: #fff; text-align: center; margin-top: 20px; padding: 8px 0; background: #684d3c; border: 2px solid #684d3c; opacity: 1; z-index: 2;}
#notfound a:hover {color: #684d3c; background: #fff;}
#notfound .bg {width: 810px; height: 516px; position: absolute; top: 0; left: 0; background: url(../img/general-head.svg) 0 0/810px 516px; opacity: .7;}