@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap");

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, l, label, legend, li, mark, menu, nav, object, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    line-height: 2;
    letter-spacing: 0.06em;
    font-family: "Noto Sans JP", "メイリオ", Meiryo, MS PGothic, sans-serif, "ＭＳ Ｐゴシック";
    color: #2A2222;
    font-size: 1.5rem;
    font-weight: 400;
    border: 0;
    background: 0;
    -webkit-font-feature-settings: "palt"1;
    font-feature-settings: "palt"1
}

li {
    list-style: none
}

a {
    text-decoration: none
}

a img {
    border: none
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5rem;
    font-weight: inherit
}

.section-body {
    margin: auto;
    padding: 0 5vw
}

@media screen and (min-width:798px) {
    .section-body {
        padding: 0 3rem;
        max-width: 1000px
    }
}

@media screen and (min-width:1300px) {
    .section-body {
        max-width: 100rem
    }
}

.inner-s {
    margin: auto;
    padding: 0 5vw
}

@media screen and (min-width:798px) {
    .inner-s {
        padding: 0 3rem;
        max-width: 1160px
    }
}

.inner-ss {
    margin: auto;
    padding: 0 5vw
}

@media screen and (min-width:798px) {
    .inner-ss {
        padding: 0 3rem;
        max-width: 92rem
    }
}

html {
    font-size: 9.4px;
    background-color: #F9F6EE
}

@media screen and (min-width:640px) {
    html {
        font-size: 10px
    }
}

@media screen and (min-width:1400px) {
    html {
        font-size: 12px
    }
}

html strong {
    font-weight: 700
}

small {
    font-size: 0.8em
}

iframe {
    width: 100%
}

::-webkit-input-placeholder {
    opacity: 0.6
}

::-moz-placeholder {
    opacity: 0.6
}

:-ms-input-placeholder {
    opacity: 0.6
}

::-ms-input-placeholder {
    opacity: 0.6
}

::placeholder {
    opacity: 0.6
}

input[type=button], input[type=file], input[type=submit] {
    cursor: pointer
}

input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url] {
    /* border: 0; */
    width: 100%;
    border: 1px solid #CECECE;
    padding :0.5em;
}

input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus {
    border: 0;
    outline: 0
}

input[type=number] {
    width: 3.8em
}

input[type=file] {
    font-size: 0.88em;
    vertical-align: super
}

textarea {
    border: 0;
    vertical-align: bottom;
    display: block;
    width: 100%;
    border: 1px solid #CECECE;
    padding: 0.5rem 1rem;
    min-height: 6em
}

@media screen and (min-width:798px) {
    textarea {
        width: 100%
    }
}

textarea:focus {
    border: 1px solid #CECECE;
    outline: 0
}

select {
    border: 0;
    border: 1px solid #CECECE;
    padding: 0.5rem 1rem;
    font-size: 0.9em;
    cursor: pointer
}

input[type=checkbox], input[type=radio] {
    cursor: pointer
}

.chkbox-label, .radio-label {
    cursor: pointer
}

.radio-item input {
    display: none
}

.radio-label {
    position: relative;
    padding: 1.4rem 2rem;
    padding-left: 2.8em;
    border: 1px solid #CECECE;
    display: inline-block;
    line-height: 1
}

.radio-label:after, .radio-label:before {
    position: absolute;
    content: "";
    display: block;
    left: 1em;
    border-radius: 50%;
    top: calc(1.2em * .75)
}

.radio-label:after {
    width: 1.2em;
    height: 1.2em;
    background-color: #e8e8e8
}

.radio-label:before {
    width: 1.2em;
    height: 1.2em;
    background: #2565B7;
    z-index: 2;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s
}

input[type=radio]:checked+.radio-label {
    background-color: #f4f4f4
}

input[type=radio]:checked+.radio-label:after {
    background-color: #fff
}

input[type=radio]:checked+.radio-label:before {
    opacity: 1;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

input[type=checkbox] {
    cursor: pointer
}

.chkbox-label {
    cursor: pointer
}

.chkbox-item input {
    display: none
}

.chkbox-label {
    position: relative;
    padding: 1.4rem 2rem;
    padding-left: 2.8em;
    display: inline-block;
    line-height: 1
}

.chkbox-label small {
    line-height: 1
}

.chkbox-label:after, .chkbox-label:before {
    position: absolute;
    content: "";
    display: block
}

.chkbox-label:after {
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #CECECE;
    top: calc(1.2em * .75);
    left: 1em
}

.chkbox-label:before {
    width: calc(1.2em * .65);
    height: 1.2em;
    top: calc(1.2em * .6);
    left: 1.16em;
    z-index: 2;
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    border-right: 2px solid #2565B7;
    border-bottom: 2px solid #2565B7
}

input[type=checkbox]:checked+.chkbox-label:after {
    background-color: #fff
}

input[type=checkbox]:checked+.chkbox-label:before {
    opacity: 1;
    -webkit-transform: scale(0.6) rotate(45deg);
    transform: scale(0.6) rotate(45deg);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}
button {
    border:none;
}
.message {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
  }
  
  .message_inline {
    font-size: 1.6rem;
    padding: 0.5rem 0.75rem;
  }
  
  .success {
    color: #18603a;
    background-color: #d5f1de;
    border-color: #c4ebd1;
  }
  
  .error {
    color: #e85464;
    background-color: #fdf1f1;
    border-color: #e85464;
  }

.btn {
    display: inline-block;
    line-height: 1;
    padding: 1.4rem calc(1.4rem * 2);
    background-color: #2565B7;
    color: #fff;
    font-size: 0.9em;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
}

.btn:hover {
    color: #2565B7;
    background-color: #EEF0F4
}

.btn-w {
    display: block;
    text-align: center;
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
    -webkit-transition: background 0.2s;
    transition: background 0.2s
}

.btn-w:hover {
    background-color: rgba(240, 235, 231, 0.589)
}

.btn-w span {
    font-weight: bold;
    position: relative
}

.btn-w span:before {
    content: "";
    width: 1.6em;
    height: 1.6em;
    display: block;
    position: absolute;
    top: 50%;
    left: -2.2em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url("../img/arr-1r.svg");
    background-repeat: no-repeat;
    background-size: contain
}

.btn-w:before, .btn-w:after {
    background-image: linear-gradient(to right, #2A2222, #2A2222 3px, transparent 3px, transparent 8px);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    position: absolute;
    width: 100%;
    height: 2px;
    content: "";
    opacity: 0.4
}

.btn-w:before {
    top: 0;
    left: 0
}

.btn-w:after {
    bottom: 0;
    left: 0
}

.btn-bnr {
    text-align: center;
    position: relative;
    width: 100%;
    display: block;
    background-color: #333;
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 2rem;
    z-index: 1;
    overflow: hidden;
    line-height: 1;
    padding: 3em 1em;
    letter-spacing: 0.2em
}

@media screen and (min-width:798px) {
    .btn-bnr {
        font-size: 2.4rem
    }
}

.btn-bnr small {
    color: #fff;
    font-size: 1.4rem;
    display: block;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 0.5em
}

.btn-bnr:after {
    content: "";
    width: 0.55em;
    height: 0.55em;
    display: block;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0.65em
}

@media screen and (min-width:798px) {
    .btn-bnr:after {
        right: 2em
    }
}

.btn-bnr:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    z-index: -1;
    left: 0;
    top: 0;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-size: cover
}

.btn-bnr.bnr-1:before {
    background-image: url("../img/bnr-1.png");
    background-position: center center
}

.btn-bnr.bnr-2:before {
    background-image: url("../img/bnr-2.png")
}

.btn-bnr.bnr-3:before {
    background-image: url("../img/bnr-3.png")
}

.btn-bnr:hover:before {
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.8
}

.btn-line {
    text-align: center;
    position: relative;
    line-height: 1;
    padding: 1.3em 3em;
    padding-right: 4em;
    display: inline-block;
    -webkit-transition: all 0.1s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.1s cubic-bezier(0.47, 0, 0.745, 0.715);
    border: 1px solid #2A2222
}

.btn-line:after {
    content: "";
    width: 0.55em;
    height: 0.55em;
    display: block;
    border-right: 2px solid #2A2222;
    border-bottom: 2px solid #2A2222;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 1em;
    -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
    transition: all 0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75)
}

.btn-line:hover {
    background-color: #f0f0f0
}

.btn-line:hover:after {
    right: 0.8em
}

.breadcrumb {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-bottom: 1.1em;
    padding-left: 5vw
}

@media screen and (min-width:798px) {
    .breadcrumb {
        padding-left: 48px;
        padding-bottom: 1.6em
    }
}

.breadcrumb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.breadcrumb-list li+li {
    padding-left: 2em;
    position: relative
}

.breadcrumb-list li+li:before {
    content: "-";
    position: absolute;
    left: 0.8em
}

.breadcrumb * {
    font-size: 1.3rem;
    line-height: 1
}

.hidden-sm {
    display: none
}

@media screen and (min-width:798px) {
    .hidden-sm {
        display: inherit
    }
}

@media screen and (min-width:798px) {
    .only-sm {
        display: none
    }
}

.only-md {
    display: none
}

@media screen and (min-width:798px) {
    .only-md {
        display: inherit
    }
}

@media screen and (min-width:1300px) {
    .only-md {
        display: none
    }
}

@media screen and (min-width:1400px) {
    .only-md {
        display: none
    }
}

.only-lg {
    display: none
}

@media screen and (min-width:1300px) {
    .only-lg {
        display: inherit
    }
}

@media screen and (min-width:1400px) {
    .only-lg {
        display: none
    }
}

.only-xl {
    display: none
}

@media screen and (min-width:1400px) {
    .only-xl {
        display: inherit
    }
}

.link_underline {
    display: inline;
    will-change: background-size;
    background: url(../img/line-w.png) no-repeat right bottom;
    -webkit-transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
    transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
    background-size: 0 1px
}

.link_underline:hover {
    background-position: left bottom;
    background-size: 100% 1px
}

.link_color {
    color: #918553;
    text-decoration: underline
}

.table {
    width: 100%;
    display: block
}

.table tr {
    display: block;
    border-bottom: 1px solid #CECECE;
    padding: 3rem 0;
    width: 100%
}

@media screen and (min-width:798px) {
    .table tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.table tr.tr-first {
    padding-top: 0
}

.table tr.tr-last {
    border-bottom: 0
}

.table th {
    width: 100%;
    display: block;
    text-align: left
}

@media screen and (min-width:798px) {
    .table th {
        width: 30%
    }
}

.table td {
    width: 100%;
    display: block
}

@media screen and (min-width:798px) {
    .table td {
        width: 60%
    }
}

.table tbody {
    width: 100%;
    display: block
}

.list-maru li {
    padding-left: 1.2em;
    position: relative;
    line-height: 1.4;
    margin-bottom: 0.6em
}

.list-maru li:before {
    content: "●";
    color: #B4AA84;
    display: inline-block;
    margin-right: 0.1em;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    position: absolute;
    left: 0;
    top: 0.1em
}

.recipe-sozai li {
    font-size: 0.9em
}

.recipe-tejun li {
    position: relative;
    padding-left: 1.5em;
    font-size: 0.9em
}

.recipe-tejun li .recipe-num {
    position: absolute;
    left: 0;
    top: -0.1em
}

.bleed {
    background-color: #333;
    display: -ms-grid;
    display: grid;
    place-content: center;
    gap: 1ch;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    z-index: 0;
    position: relative;
    background-size: cover
}

@media screen and (min-width:798px) {
    .bleed {
        padding-top: 13rem;
        padding-bottom: 13rem
    }
}

@media screen and (min-width:1300px) {
    .bleed {
        padding-top: 15rem;
        padding-bottom: 15rem
    }
}

.bleed:before {
    opacity: 0;
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-size: cover
}

.bleed.bleed-policy:before {
    background-image: url("../img/farmer/hero-policy.png");
    background-position: center bottom
}

.bleed.bleed-furusatotax:before {
    background-image: url("../img/shop/hero-furusato.png");
    background-position: center bottom
}

.bleed.bleed-recipe:before {
    background-image: url("../img/recipe/hero-recipe.png");
    background-position: center
}

.bleed * {
    line-height: 1;
    color: #fff
}

.bleed-title {
    font-family: "Noto Serif JP", serif;
    font-size: 2.4rem
}

.bleed-small {
    font-family: "Noto Serif JP", serif;
    display: block;
    font-size: 1.3rem;
    margin-bottom: 1em
}

.bleed-small.y {
    color: #ffe342
}

.bleed-body {
    margin-top: 2em;
    line-height: 1.8
}

@media screen and (min-width:798px) {
    .bleed-body {
        padding-right: 8rem;
        padding-left: 8rem
    }
}

@media screen and (min-width:798px) {
    .furusatotax-content, .policy-flow {
        -webkit-transform: translateY(-4rem);
        transform: translateY(-4rem)
    }
}

.header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-left: 5vw
}

@media screen and (min-width:798px) {
    .header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 48px;
        padding-right: 48px
    }
}

.header-logo {
    width: 100px;
    position: relative;
    z-index: 1;
    margin-top: 2rem
}

@media screen and (min-width:798px) {
    .header-logo {
        margin-top: 22px;
        width: 80px;
        width: 230px
    }
}

@media screen and (min-width:798px) {
    .header-nav {
        margin-left: auto;
        margin-right: auto;
        padding-right: 80px
    }

    .header-nav li {
        margin-left: 1.1em;
        margin-right: 1.1em
    }
}

ul.header-list {
    display: none
}

@media screen and (min-width:798px) {
    ul.header-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-top: 30px
    }

    ul.header-list a {
        color: #fff;
        font-family: "游明朝体", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-weight: bold;
        display: block;
        will-change: background-size;
        background: url(../img/line-w.png) no-repeat right bottom;
        -webkit-transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
        transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
        background-size: 0 1px
    }

    ul.header-list a:hover {
        background-position: left bottom;
        background-size: 100% 1px
    }
}

.footer {
    background-color: #23211F;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1
}

@media screen and (min-width:798px) {
    .footer {
        margin-top: 6rem
    }
}

@media screen and (min-width:798px) {
    .footer-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.footer * {
    color: #fff
}

.footer-title {
    font-size: 2.1rem
}

.footer-copyright {
    font-size: 0.8em;
    opacity: 0.5;
    line-height: 1
}

@media screen and (min-width:798px) {
    .footer-head {
        width: 50%;
        text-align: center
    }

    .footer-info {
        font-size: 0.9em
    }
}

.footer-totop {
    text-align: center;
    background-color: #827a73;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    z-index: 1;
    cursor: pointer
}

.footer-totop:after {
    content: "";
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    bottom: 0em;
    left: 0%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background-image: url("../img/arr-1r.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2
}

.footer-totop a {
    display: block;
    font-size: 1.4rem;
    line-height: 1.4
}

.burger {
    top: 5vw;
    right: 5vw;
    cursor: pointer;
    width: 48px;
    position: fixed;
    display: block;
    height: 51px;
    z-index: 101;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center bottom 15px
}

@media screen and (min-width:798px) {
    .burger {
        margin-top: 20px;
        right: 50px;
        top: 0
    }
}

.burger span {
    position: absolute;
    right: 20%;
    width: 60%;
    height: 2px;
    background-color: #fff;
    border-radius: 0px;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1)
}

.burger span:first-of-type {
    top: 15px
}

.burger span:nth-of-type(2) {
    top: 23px
}

.burger span:nth-of-type(3) {
    top: 31px
}

.burger.is-visible {
    opacity: 1;
    pointer-events: auto;
    top: 20px;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1)
}

.burger.is-visible:before {
    content: "";
    display: block;
    background-color: #23211F;
    width: 106%;
    height: 100%;
    position: absolute;
    left: -1px;
    top: -2px;
    border-radius: 50px;
    -webkit-transform: scale(1.4);
    transform: scale(1.4)
}

body.js-menu-open .mordalnav {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translateY(0px);
    transform: translateY(0px)
}

body.js-menu-open .burger span:first-of-type {
    top: 25px;
    -webkit-transform: translateY(0px) rotate(-45deg);
    transform: translateY(0px) rotate(-45deg)
}

body.js-menu-open .burger span:nth-of-type(2) {
    top: 30px;
    width: 0
}

body.js-menu-open .burger span:nth-of-type(3) {
    top: 25px;
    -webkit-transform: translateY(0px) rotate(45deg);
    transform: translateY(0px) rotate(45deg)
}

.mordalnav {
    position: fixed;
    background-color: #23211f;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px)
}

.mordalnav-pic {
    display: block;
    width: 25%;
    background-color: #fff;
    height: 100vh;
    display: none
}

.mordalnav-pic img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width:798px) {
    .mordalnav-pic {
        display: block
    }
}

.mordalnav-nav {
    width: 100%;
    height: 100vh;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width:798px) {
    .mordalnav-nav {
        width: calc(65% - 50px);
        padding-top: 3rem;
        padding-left: 8rem;
        text-align: left
    }
}

.mordalnav-list {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 3.5rem;
    width: 100%
}

.mordalnav *, .mordalnav a {
    color: #fff
}

.mordalnav-item>a {
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1
}

.mordalnav-sublist {
    padding: 0;
    margin-top: 0.8rem;
    display: none
}

@media screen and (min-width:798px) {
    .mordalnav-sublist {
        display: block
    }
}

.mordalnav-sublist li a {
    line-height: 1;
    font-size: 1.3rem;
    font-weight: normal;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    padding-left: 0.2em
}

.mordalnav-sublist li a:before {
    content: "-";
    margin-right: 0.5em
}

.mordalnav-sublist li a:hover {
    opacity: 0.7
}

.hero {
    position: relative;
    background-color: black;
    padding-top: 15rem;
    padding-bottom: 15rem;
    z-index: 0
}

.hero:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-size: cover
}

@media screen and (min-width:798px) {
    .hero {
        padding-top: 18rem;
        padding-bottom: 15.5rem
    }
}

@media screen and (min-width:1300px) {
    .hero {
        padding-top: 28rem;
        padding-bottom: 25.5rem
    }
}

.hero * {
    color: #fff
}

.hero-title {
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1
}

@media screen and (min-width:798px) {
    .hero-title {
        font-size: 3.5rem;
        letter-spacing: 0.35em
    }
}

.hero-farmer:before {
    background-image: url("../img/hero-7.png")
}

.hero-about:before {
    background-image: url("../img/hero-1.png")
}

.hero-shop:before {
    background-image: url("../img/hero-2.png")
}

.hero-introduction:before {
    background-image: url("../img/hero-3.png")
}

.hero-recipe:before {
    background-image: url("../img/hero-4.png");
    background-position: center
}

@media screen and (min-width:798px) {
    .hero-recipe:before {
        background-position: 0 0
    }
}

.hero-contact:before {
    background-image: url("../img/hero-5.png");
    background-position: center
}

@media screen and (min-width:798px) {
    .hero-contact:before {
        background-position: 0 0
    }
}

.hero-news:before, .hero-single:before {
    background-image: url("../img/hero-6.png");
    background-position: center
}

.single-title {
    font-size: 2.4rem
}

.lede {
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(0%, rgba(194, 162, 2, 0.35)));
    background: linear-gradient(transparent 60%, rgba(194, 162, 2, 0.35) 0%);
    display: inline;
    padding: 0 1px 0px;
    font-size: 2.4rem
}

.lede+* {
    margin-top: 2rem
}

.min {
    font-family: "Noto Serif JP", serif
}

.pager {
    margin-top: 3rem
}

@media screen and (min-width:798px) {
    .pager {
        margin-top: 6rem
    }
}

.pager-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1em
}

.pager-item a {
    display: block;
    line-height: 1;
    padding: 0.9em 1.2em;
    border-radius: 3px;
    background-color: rgba(36, 36, 36, 0.05)
}

.pager-item a:hover {
    background-color: rgba(36, 36, 36, 0.1)
}

.pager-item.pager-current a {
    background-color: #2A2222;
    color: #fff;
    pointer-events: none
}

.paging {
    margin-top: 5rem;
    padding-left: 3rem;
    padding-right: 3rem
}

.paging-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.paging-list a:hover {
    text-decoration: underline
}

.paging-next, .paging-prev {
    position: relative
}

.paging-next:before, .paging-prev:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 0.6em;
    height: 0.6em;
    border-right: 2px solid #2A2222;
    border-bottom: 2px solid #2A2222
}

.paging-prev {
    padding-left: 2rem
}

.paging-prev:before {
    left: 0;
    -webkit-transform: translateY(-45%) rotate(135deg);
    transform: translateY(-45%) rotate(135deg)
}

.paging-next {
    padding-right: 2rem
}

.paging-next:before {
    right: 0;
    -webkit-transform: translateY(-45%) rotate(-45deg);
    transform: translateY(-45%) rotate(-45deg)
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.invisible:before {
    opacity: 0
}

.visible:before {
    opacity: 1
}

.red {
    color: #DD4050
}

.txt-pochi {
    position: relative
}

.txt-pochi:before {
    content: "●";
    color: #B4AA84;
    display: inline-block;
    margin-right: 0.1em;
    -webkit-transform: scale(0.6);
    transform: scale(0.6)
}

.only-sm {
    display: block
}

@media screen and (min-width:798px) {
    .only-sm {
        display: none
    }
}

.non-sm {
    display: none
}

@media screen and (min-width:798px) {
    .non-sm {
        display: block
    }
}

/*# sourceMappingURL=style.css.map */