/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/* aikou */
body:not(.home) {background: url(../img/common/back.jpg) 0 0/100% auto repeat-y;}
/* aikou */

main {position: relative; display: block;}

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

/*明朝*/
.serif,
.serif * {font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif; font-weight: 500;}

/*縦書き*/
.v-txt {-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright;}

/*テーブルスクロール*/
.scroll-table {overflow: auto; white-space: nowrap;}
.scroll-table::-webkit-scrollbar {width: 5px; height: 5px;}
.scroll-table::-webkit-scrollbar-thumb {background: #9bcc50;}

/*ローディング*/
#loading {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #fff; opacity: 1; visibility: visible; transition: 1s; z-index: 9999;}
.loaded #loading {opacity: 0; visibility: hidden;}

/*--------------------------------------------------------------------------
パララックス＆ホバーアニメーション
--------------------------------------------------------------------------*/
/*------------------------------------
アンダーライン
------------------------------------*/
.u-l {position: relative; display: inline-block;}
.u-l:hover {opacity: 1;}
.u-l:after {content: ""; position: absolute; bottom: -4px; left: auto; right: 0; width: 0; height: 1px; background: #000; transition: .3s ease;}
.u-l:hover:after {width: 100%; left: 0; right: auto;}

.u-l.white:after {background: #fff;}

/*------------------------------------
フェード
------------------------------------*/
.fade {opacity: 0; transform: translateY(10%); will-change: transform;}
.fade.active {animation: fadein .5s ease-in-out forwards; opacity: 1;}

@keyframes fadein {0% {opacity: 0; transform: translateY(10%);} 100% {opacity: 1; transform: translateY(0);}}

/*------------------------------------
カバー
------------------------------------*/
.cover {position: relative; display: block; overflow: hidden;}
.cover:before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: #fff; transition: transform ease-out 1s; will-change: transform;}
.cover.active:before {transform: translate3d(100%, 0, 0);}

.fade.cover:before {transition-delay: .25s;}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*------------------------------------
汎用見出し
------------------------------------*/
.g-h {font-weight: 700; text-align: center;}

/*------------------------------------
汎用固定画像
------------------------------------*/

/* aikou */
.bg-main {background: url(../img/common/back.jpg) 0 0/100% auto repeat-y;}
/* aikou */

.g-fix-bg {width: 100%; background-size: contain; background-position: 50% 0%; background-repeat: no-repeat; background-attachment: fixed;}

/*------------------------------------
パンくず
------------------------------------*/
#breadcrumbs * {color: #888; letter-spacing: .1em;}
#breadcrumbs li {margin: 0 4px;}

/*------------------------------------
ページネーション
------------------------------------*/
.pagination {justify-content: center;}
.pagination * {font-weight: 700; line-height: 1; background: #fff; border: 1px solid #000;}
.pagination a:hover {color: #fff; background: #9bcc50; border-color: #9bcc50; opacity: 1;}
.pagination .current {color: #fff; background: #000; opacity: 1;}

/*------------------------------------
COMMING SOON
------------------------------------*/
.comingsoon {margin: 80px 0;}
.comingsoon h2 {margin-bottom: 0;}
.comingsoon p {font-weight: 700; text-align: center;}

/*------------------------------------
MORE
------------------------------------*/
.more {position: relative; display: flex; color: #000; background: #fff; margin: 0 auto; border: 1px solid #000; opacity: 1;}
.more:hover {opacity: 1;}

.more:before,
.more:after {content: ''; position: absolute; height: 1px; background: #000; transition: .5s ease; z-index: 3;}
.more:before {transform: translateY(-50%) rotate(50deg);}
.more:after {transform: translateY(-50%) rotate(-50deg);}
.more:hover:before,
.more:hover:after {background: #fff; transition: .3s ease;}

.more span {font-weight: 800; line-height: 1; letter-spacing: .2em; transition: .3s ease;}
.more > span {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; z-index: 2;}
.more > span:after {position: absolute; content: ''; display: block; bottom: 0; left: auto; right: 0; width: 0; height: 100%; background: #000; z-index: -1; transition: .5s ease;}
.more:hover span {color: #fff;}
.more:hover > span:after {left: 0; right: auto; width: 100%; transition: .3s ease;}

/*フォームへのリンク用*/
.more.form-link > span {flex-direction: row; font-weight: 700; letter-spacing: 1px; transition: .5s ease;}
.more.form-link > span:before {display: none;}
.more.form-link:hover > span:after {transition: .5s ease;}
.more.form-link > span .icon {}
.more.form-link > span .icon .st0 {fill: #000; transition: .2s ease;}
.more.form-link > span .icon .st1 {fill: #fff; stroke :#000; transition: .2s ease;}

.more.form-link:hover > span .icon .st0 {fill: #fff;}
.more.form-link:hover > span .icon .st1 {fill: #000; stroke: #fff;}

/*------------------------------------
お知らせリスト
------------------------------------*/
.post-headline h2 {font-weight: 700; border-bottom: 1px solid #000;}

/*------------------------------------
お知らせ固定ナビ
------------------------------------*/
.fix-info {position: fixed; justify-content: center; align-items: center; background: #000; z-index: 100;}
/* aikou2 */
.fix-info.eat {background: #80B739;}
/* aikou2 */
.fix-info span {color: #fff; font-weight: 700;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header .fix-logo {position: fixed; z-index: 1001;}

/*------------------------------------
トグル
------------------------------------*/
header #nav-toggle {position: fixed; top: 0; right: 0; justify-content: center; align-items: center; z-index: 1002;}
header #nav-toggle:hover {cursor: pointer;}

header #nav-toggle .border {position: absolute; width: 24px; height: 18px; padding: 12px; overflow: hidden;}
header #nav-toggle .border div {position: absolute; width: 24px; height: 2px; background: #fff; overflow: hidden; transition: all .5s ease;}

header #nav-toggle .border.closed div {transform: scale(1,1); transform-origin: top right;}
header #nav-toggle .border.closed div:nth-child(1) {top: 12px;}
header #nav-toggle .border.closed div:nth-child(2) {top: 20px;}
header #nav-toggle .border.closed div:nth-child(3) {top: 28px;}

header #nav-toggle .border.closed div:after {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; width: 24px; height: 2px; background: #000; transform: translateX(-24px); transform-origin: left;}
header #nav-toggle:hover .border.closed div:after {animation: barflash .5s ease forwards;}
header #nav-toggle:hover .border.closed div:nth-child(1):after {animation-delay: 0s;}
header #nav-toggle:hover .border.closed div:nth-child(2):after {animation-delay: 0.1s;}
header #nav-toggle:hover .border.closed div:nth-child(3):after {animation-delay: 0.2s;}

@keyframes barflash {
	0% {transform:translateX(-24px) scaleX(1);}
	100% {transform:translateX(24px) scaleX(.8);}
}

header #nav-toggle .border.opened div {top: 20px; transform: scale(0,1); transform-origin: center;}

header #nav-toggle.lower .border.closed div:after {background: #fff;}

/*------------------------------------
グローバルナビゲーション
------------------------------------*/
header #nav-drawer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; background: #000; transform-origin: center; visibility: hidden; overflow-y: auto; z-index: 1001; opacity: 0; transform: scale(1.05); transition: .3s ease-in-out;}
header #nav-drawer * {color: #fff;}
header #nav-drawer .drawer-top {justify-content: space-between;}
header #nav-drawer .drawer-top .nav-list li {border-bottom: 1px solid #fff;}
header #nav-drawer .drawer-top .nav-list li a {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 700; z-index: 2;}
header #nav-drawer .drawer-top .nav-list li a:after {position: absolute; content: ''; display: block; bottom: 0; left: auto; right: 0; width: 0; height: 2px; background: #fff; z-index: 3; transition: .5s ease;}
header #nav-drawer .drawer-top .nav-list li a:hover {opacity: 1;}
header #nav-drawer .drawer-top .nav-list li a:hover:after {left: 0; right: auto; width: 100%; transition: .3s ease;}
header #nav-drawer .drawer-top .nav-list .cat li a .thumb {background: #fff; margin-left: auto;}
header #nav-drawer .drawer-top .nav-list .cat li a .thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;'}
header #nav-drawer .drawer-bottom {white-space: nowrap;}
header #nav-drawer .drawer-bottom .info {align-items: center;}
header #nav-drawer .drawer-bottom .info .tel {font-weight: 700; line-height: 1;}
header #nav-drawer .drawer-bottom .copyright {font-weight: 700;}

/*------------------------------------
オープン時
------------------------------------*/
.open-menu header #nav-toggle .border div {background: #fff!important;}
.open-menu header #nav-toggle .border.closed div {transform: scale(0,1);}
.open-menu header #nav-toggle .border.opened div:nth-child(1) {transform: scale(1,1) rotate(45deg);}
.open-menu header #nav-toggle .border.opened div:nth-child(2) {transform: scale(1,1) rotate(-45deg);}

.open-menu header #nav-drawer {visibility: visible; opacity: 1; transform: scale(1);}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer {position: relative; margin-top: auto; background: transparent;}
footer .contact {text-align: center;}
footer .contact .inner .tel,
footer .contact .inner .mail {display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
footer .contact .inner .tel img {width: 23px; height: auto; margin-right: 5px;}
footer .contact .inner .tel span {font-size: 37.5px;}
footer .contact .inner .mail {color: #fff; background: #000; border: 2px solid #000;}
footer .contact .inner .mail img {width: 14.25px; height: auto; margin-right: 10px;}
footer .contact .inner .mail span {color: #fff; font-size: 18px;}
footer .info {background: #fff;}
footer .info .title {align-items: center;}
footer .copyright {color: #fff; text-align: center; background: #9bcc50;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/* aikou */
/*------------------------------------
背景パララックス
------------------------------------*/
body.home:before {
	width: 100%; height:100vh; background-size: cover; background-position: 50%; background-repeat: no-repeat; position: fixed; content:""; background-image: url(../img/front/fixed-img01.jpg);
}
body.home.back_change:before {
	background-image: url(../img/front/fixed-img02.jpg);
}
/* aikou */

#front .txt-set {flex-direction: column; margin: 0 auto;}
#front .txt-set h2 {line-height: 1.375;}

#front .news {background: #fff; padding-bottom: 36px;}
#front .news h2 {justify-content: center; align-items: center; padding: 28px 0;}
#front .news h2 img {height: auto;}
#front .news h2 .icon {width: 25px; margin-right: 16px;}
#front .news h2 .title {width: 98px;}
#front .news .top-news-list .entry a:hover {text-decoration: underline;}
#front .news .signature {justify-content: flex-end; align-items: center; margin-top: 14px;}
#front .news .signature span {font-size: 14px; line-height: 1; margin: 4px 18px 0 0;}
#front .news .signature .name {width: 100px; height: auto;}


/* aikou */
/* #front .fix-bg {width: 100%; background-size: cover; background-position: 50%; background-repeat: no-repeat; background-attachment: fixed;} */
/* #front .fix-bg.one {background-image: url(../img/front/fixed-img01.jpg);} */
/* #front .fix-bg.two {background-image: url(../img/front/fixed-img02.jpg);} */

/* aikou */

#front .intro {display: flex; justify-content: center; align-items: center;}
#front .intro .inner {position: relative;}
#front .intro .inner .melon {position: absolute;}
#front .intro .stamp {position: absolute;}

#front .top-slider {margin: 0 auto; overflow: hidden;}
#front .top-slider #top-slider {position: relative; margin: 0 auto; z-index: 1;}
#front .top-slider #top-slider .slick-list {overflow: visible;}
#front .top-slider #top-slider .slick-track {display: flex; justify-content: space-between; width: 100%;}
#front .top-slider #top-slider li {overflow: hidden;}
#front .top-slider #top-slider li a {display: block; width: 100%; height: 100%;}
#front .top-slider #top-slider li img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}

#front .about .inner.merit h3 {color: #424242; margin-bottom: .625em;}
#front .about .inner.merit p {margin-bottom: 1em;}

#front .melons {background: #9bcc50;}
#front .melons .container {position: relative; background: #fff; box-sizing: border-box; overflow: hidden;}
#front .melons h2 {text-align: center;}
#front .melons .melon-list li .txt p {text-align: justify;}
#front .melons .natural,
#front .melons .natural img,
#front .melons .icon {position: absolute; height: auto;}
#front .melons .natural {bottom: 0; right: 0;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
お知らせ (index.php)
--------------------------------------------------------------------------*/
#post .g-fix-bg {background-image: url(../img/front/fixed-img02.jpg);}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
お問い合わせ (contact.php)
--------------------------------------------------------------------------*/
#contact .g-fix-bg {background-image: url(../img/front/fixed-img01.jpg);}

#contact .contact {text-align: center;}
#contact .contact .tel {display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box;}
#contact .contact .tel img {height: auto;}

#contact .form {text-align: center; border: #9bcc50 1px solid; background: #fff; box-sizing: border-box;}
#contact .form dl {border-bottom: 1px solid #b0b0b0;}
#contact .form dl:last-of-type {border-bottom: none;}
#contact .form dl dt {font-size: .975rem; display: flex; justify-content: space-between;}
#contact .form dl dt span {display: inline-block; background: #9bcc50; color: #fff; padding: 1px 17px; border-radius: 4px;}
#contact .form dl dd {color: #666;}
#contact .form dl dd small {display: block; font-size: .8rem; line-height: 1.5;}

#contact .form .wpcf7-list-item {display: block!important; margin: 0!important;}
#contact .form input[type="text"],
#contact .form input[type="email"],
#contact .form input[type="tel"],
#contact .form textarea {background: #fff; border: 1px solid #b0b0b0; border-radius: 4px;}
#contact .form textarea {resize: vertical;}

#contact .form .wpcf7-list-item-label {font-weight: 700; font-style: normal; cursor: pointer;}
#contact .form input[type="radio"],
#contact .form input[type="checkbox"],
#contact .form input[type="acceptance"] {display: none;}
#contact .form input[type="radio"] + span.wpcf7-list-item-label,
#contact .form input[type="checkbox"] + span.wpcf7-list-item-label,
#contact .form input[type="acceptance"]+ span.wpcf7-list-item-label {display: inline-flex; align-items: flex-start; font-weight: 700; cursor: pointer;}
#contact .form input[type="radio"] + span.wpcf7-list-item-label:before,
#contact .form input[type="checkbox"] + span.wpcf7-list-item-label:before,
#contact .form input[type="acceptance"]+ span.wpcf7-list-item-label:before {position: relative; display: block; width: 19px; height: 19px; background: #fff; border: 1px solid #b0b0b0; border-radius: 3px; margin-right: 10px;}
#contact .form span.wpcf7-list-item-label {display: block; position: relative;}
#contact .form span.wpcf7-list-item-label:after {width: 12px; height: 6px; transform: rotate(-45deg); content: ''; position: absolute; left: 3px; border: 3px solid #9bcc50; border-top: none; border-right: none; transition: .3s ease; opacity: 0;}
#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"] {margin: 0 0 20px; color: #fff; background: #000; border: 1px solid #000; transition: .5s ease;}
#contact .form input[type="submit"]:hover {color: #333; background: #fff;}

#contact .consent {margin-top: 40px;}
#contact .consent h2 {font-size: 1.5rem; font-weight: 700; margin: 0 0 20px;}
#contact .consent p {font-size: .975rem; margin: 0 0 40px;}
#contact .consent a {text-decoration: underline;}

/*--エラーメッセージ--*/
#contact .wpcf7-not-valid-tip {color: #f00; font-size: .9rem;}
#contact .wpcf7-response-output {text-align: center; margin: 0 0 20px; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 5px;}
#contact .wpcf7-validation-errors {text-align: center; color: #b94a48; background-color: #f2dede; border: 1px solid #eed3d7;}
#contact .wpcf7-mail-sent-ok {text-align: center; color: #3a87ad; background-color: #d9edf7; border: 1px solid #bce8f1;}

#contact p.notice {text-align: center; margin: 50px 0 25px;}

/* aikou2 */
span.wpcf7-spinner,
.wpcf7 .ajax-loader {
	position: absolute !important;
}
/* aikou2 */


/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#notfound h1 span {display: block; font-weight: 700; text-align: center; line-height: 1.25;}

/*--------------------------------------------------------------------------
投稿汎用要素
--------------------------------------------------------------------------*/
#single {word-wrap: break-word;}
#single * {text-align: initial;}

#single h2,
#single h3,
#single h4,
#single h5,
#single h6 {position: relative; font-weight: 700;}

#single p {line-height: 1.75; margin: 0 0 30px 0;}
/* aikou2 */
#single a {color: #009a3e; text-decoration: underline #009a3e;}
/* aikou2 */
#single em {font-style: italic;}
#single strong {font-weight: 700;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single blockquote {position: relative; margin: 0 0 30px 0; padding: 30px; background: #eee;}
#single blockquote p {margin-bottom: 0;}
#single blockquote.wp-block-quote cite {display: block; text-align: right;}
#single .wp-block-pullquote {width: 100%;}
#single .wp-block-pullquote blockquote {padding: 30px;}
#single .wp-block-pullquote cite {display: block; text-align: right;}
#single code {display: block; color: #fff; margin: 0 0 30px 0; padding: 20px; background: #364549;}
#single hr {border-top-color: #000;}
#single pre {margin: 0 0 30px 0;}

#single ul,
#single ol {margin: 0 0 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;}
#single table thead th,
#single table thead td,
#single table tfoot th,
#single table tfoot td {background: #eee; font-weight: 700;}
#single table tr {border-bottom: 1px solid #000;}
#single table tr:last-child {border-bottom: none;}
#single table thead th,
#single table thead td {padding: 1rem 1rem;}
#single table th,
#single table td {font-family: initial; padding: 0.75rem 1rem;}
#single table th {background: #eee;}

#single .wp-block-table {width: 100%;}
#single .scroll-table {margin: 0 0 30px 0;}

#single .wp-caption {display: block; max-width: 100%; margin: 0 0 30px 0;}
#single .wp-caption img {display: block;}
#single .wp-caption-text {font-size: .95rem; line-height: 1.5; text-align: left; padding: 10px 15px;}

#single .aligncenter {display: block; margin: 0 0 30px 0;}
#single .alignright {float: right;}
#single .alignleft {float: left;}
#single img.aligncenter {margin: 0 auto;}
#single img.alignleft {margin-right: auto;}
#single img.alignright {margin-left: auto;}

#single figure {display: inline-block; margin: 0 0 30px 0;}
#single figcaption {font-size: .85rem; text-align: center;}
#single figure.wp-block-image figcaption {margin: 0; padding: 8px 0;}
#single .wp-block-gallery {margin: 0 0 30px 0;}
#single .wp-block-gallery .blocks-gallery-grid {margin-bottom: 0;}
#single .wp-block-gallery .blocks-gallery-item {margin: 10px 10px;}
#single .wp-block-gallery .blocks-gallery-item figure {margin: 0;}
#single .wp-block-gallery .blocks-gallery-item .blocks-gallery-item__caption {width: calc(100% - 20px); font-size: .85rem; text-align: left; background: rgba(0,0,0, .3); margin: 0; padding: 8px 10px;}

#single .wp-block-media-text {align-items: start; margin: 0 0 30px 0;}
#single .wp-block-media-text figure.wp-block-media-text__media {display: block; margin: 0; padding: 0;}
#single .wp-block-media-text figure.wp-block-media-text__media img {width: auto; max-width: 100%;}
#single .wp-block-media-text .wp-block-media-text__content {text-align: center; padding: 0 20px;}
#single .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding: 0 20px 0 0;}
#single .wp-block-media-text p.has-large-font-size {margin: 0!important;}

#single .wp-block-cover {margin: 0 0 30px 0;}

#single .wp-block-pullquote {position: relative; margin: 0 0 30px 0; padding: 20px 0;}
#single .wp-block-pullquote blockquote {background: #fff; margin: 0; padding: 30px 0; border: 2px solid #333!important; border-left: none!important; border-right: none!important;}
#single .wp-block-pullquote blockquote p {font-size: 1.35rem; margin: 0 0 20px 0;}

#single .wp-block-button {margin: 0 0 30px 0;}
#single .wp-block-button a {display: inline-block; color: #fff; background: #333; padding: 8px 20px; text-decoration: none!important; border-radius: 36px;}
#single .wp-block-button a:hover {color: #333; background: #fff; opacity: 1;}

#single .wp-block-file {margin: 0 0 30px 0;}
.wp-block-file__button,
.wp-block-button__link {display: inline-block; color: #fff; background: #333; padding: 8px 14px; text-decoration: none!important; border-radius: 36px;}
.wp-block-file__button:hover,
.wp-block-button__link:hover {color: #333; background: #fff; opacity: 1;}

#single .wp-block-columns {}
#single .wp-block-column {margin: 0 16px 20px 0;}
#single .wp-block-column:last-child {margin: 0 0 20px 0;}

#single .wp-block-embed {display: block;}

.wp-block-embed__wrapper {position: relative; width: 100%; height: 0; padding-top: 56.25%;}
.wp-block-embed__wrapper iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

/* aikou2 */
/*--------------------------------------------------------------------------
メロンの美味しい食べ方 (page-how-to-eat.php)
--------------------------------------------------------------------------*/
#how-to .g-fix-bg {
	background-image: url(../img/front/fixed-img02.jpg);
}

#how-to .intro {
	display: flex;
	justify-content: center;
	align-items: center;
}
#how-to .intro .wrap {
	position: relative;
}
#how-to .intro .img {
	position: absolute;
}

#how-to .sec-delivery {
	background: #9bcc50;
}
#how-to .sec-delivery .box {
	background: #fff;
}
#how-to .sec-delivery h2 {
	text-align: center;
}
#how-to .sec-delivery .container > .box p {
	color: #85B241;
	letter-spacing: .05em;
	line-height: 1.43;
}
#how-to .sec-delivery ol li {
	border-radius: 15px;
}
#how-to .sec-delivery ol li h3 {
	color: #85B241;
	position: relative;
	font-weight: 700;
	letter-spacing: 0.03em;
}
#how-to .sec-delivery ol li h3:before {
	content: "";
	position: absolute;
	border-radius: 50%;
	background-color: #70B667;
	transform: translateY(-50%);
	top: 50%;
	right: 27px;
}
#how-to .sec-delivery ol li h3:after {
	position: absolute;
	color: #fff;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
	font-weight: 700;
	top: 50%;
	transform: translateY(-50%);
}
#how-to .sec-delivery ol li:nth-child(1) h3:after {
	content: "1";
}
#how-to .sec-delivery ol li:nth-child(2) h3:after {
	content: "2";
}
#how-to .sec-delivery ol li:nth-child(3) h3:after {
	content: "3";
}
#how-to .sec-delivery ol li:nth-child(4) h3:after {
	content: "4";
}
#how-to .sec-delivery ol li .desc h4 {
	color: #85B241;
	letter-spacing: 0.034em;
	line-height: 1.2;
}

#how-to .sec-eat .container {
	background: #fff;
	border-radius: 25px;
	box-sizing: border-box;
}
#how-to .sec-eat h2 {
	text-align: center;
}
#how-to .sec-eat ol li .img-wrap .img {
	margin: 0 auto;
}
#how-to .sec-eat ol li .desc {
	box-sizing: border-box;
}
#how-to .sec-eat ol li .desc h3 {
	color: #85B241;
	letter-spacing: .05em;
	line-height: 1.5;
}
#how-to .sec-eat ol li .desc > p {
	line-height: 2;
}
#how-to .sec-eat .storage {
	border: 1px solid #85B241;
	border-radius: 28px;
	box-sizing: border-box;
}
#how-to .sec-eat .storage h3 {
	color: #85B241;
	letter-spacing: .05em;
	line-height: 1.5;
	text-align: center;
}
#how-to .sec-eat .storage > p {
	letter-spacing: .05em;
	line-height: 2;
}

#how-to .sec-maturity .container {
	background: #fff;
	border-radius: 25px;
	box-sizing: border-box;
	position: relative;
}
#how-to .sec-maturity h2 {
	text-align: center;
}
#how-to .sec-maturity ol li .img-wrap {
	position: relative;
}
#how-to .sec-maturity ol li .img-wrap .img {
	margin: 0 auto;
}
#how-to .sec-maturity ol li .desc-wrap {
	position: relative;
}
#how-to .sec-maturity ol li .desc-wrap .stage {
	text-align: center;
	font-weight: 700;
	line-height: 1;
}
#how-to .sec-maturity ol li .desc-wrap .desc {
	text-align: center;
	color: #85B241;
	letter-spacing: .1em;
	text-indent: .1em;
	line-height: 1;
}
#how-to .sec-maturity ol li .desc-wrap .desc2 {
	letter-spacing: .05em;
	line-height: 2;
}
#how-to .sec-maturity .best-time-wrap > p {
	text-align: center;
	color: #85B241;
	letter-spacing: .1em;
	text-indent: .1em;
}
#how-to .sec-maturity .illust-girl {
	position: absolute;
}