@charset "utf-8";

@media screen and (max-width: 750px) {

    .pc {
        display: none !important;
    }

    html{
        font-size: 2.6vw;
    }

    body {
        line-height: 1.75;
        font-size: 1.4rem;
        border:solid 1vw;
        border-image-source:url('images/pattern_green.png');
        border-image-slice:30;
    }

    body.home{
        background: #FFFFF8 url('images/sp/home/bg_home.png') no-repeat center 148vw;
        background-size: contain /*1398px 1589px*/;
    }

    section {
        margin: 0 auto;
        position: relative;
    }

    img {
        vertical-align: top;
        width: 100%;
    }

    main {
        min-width: auto;
        background: none;
        padding-bottom: 0;
        margin-bottom: -6vw;
    }

    .inner {
        max-width: 92vw;
        margin: 0 auto;
        padding: 0;
    }

/*************
header
*************/
    header {
        width: 100%;
        height: auto;
        margin-top: 6vw;
    }

    header .inner {
        height: auto;
    }

    header .logo_nav {
        display: block;
    }
    
    header .logo {
        width: 55vw;
        margin: 0 auto;
    }


/*************
searchform
*************/

.search{
    width: 100%;
}

.searchform {
    position: relative;
    width: 100%;
}
.searchform label{
    width: 100%;
}
.searchform input[type="search"] {
    height: 8vw;
    border-radius: 4vw;
    padding: 0 5px;
    margin-right: 0;
    width: 100%;
}

.searchform input[type="search"]:focus {
    border: none;
    outline: 0;
}

.searchform input[type="submit"],
.searchform button[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    background: url('images/icon_search.svg') no-repeat center center #72A851;
    background-size: contain;
    border: none;
    box-sizing: border-box;
    width: 6vw;
    height: 6vw;
    border-radius: 3vw;
    text-indent: 4vw;
    position: absolute;
    top: calc(50% - 3vw);
    right: 1.2vw;
}


/*************
nav → megamenu.css
*************/


/*************
footer
*************/

    footer {
        background: url('images/sp/footer_bg.png') no-repeat center bottom;
        background-size: cover;
        height: 42vw;
        margin-top: 0;
    }

    footer .inner {
        background: none;
        position: static;
        height: auto;
        width: auto;
    }
    footer .inner::after {
        content: "All Rights Reserved, Copyright(C)Gunma prefecture.";
        position: absolute;
        bottom: 0;
        left: 0;
        height: auto;
        font-size: 2.6vw;
        margin-bottom: 6vw;
    }

    footer #to_top {
        width: 12vw;
        position: fixed;
        bottom: 12vw;
        right: 4vw;
        z-index: 10;
    }


/*************
共通パーツ
*************/

p.btn_more{
    width: 66.7vw;
    height: 10.6vw;
    line-height: 10.6vw;
    border-radius: 5.3vw;
    position: relative;
    font-size: 4.2vw;
}

p.btn_more::after{
    content: "";
    width: 1.6vw;
    height: 3.2vw;
    background: url('images/arrow.svg') no-repeat;
    background-size: contain;
    position: absolute;
    top: 3.8vw;
    right: 4.4vw;
}
p.btn_more a{
}

p.btn_farmer{
    width: 100%;
    height: 10.6vw;
    line-height: 10.6vw;
    border-radius: 5.3vw;
    background: url('images/pattern_blue.png');
    background-size: 620px 459px;
    position: relative;
    font-size: 4.2vw;
}

p.btn_farmer::after{
    content: "";
    width: 1.6vw;
    height: 3.2vw;
    background: url('images/arrow.svg') no-repeat;
    background-size: contain;
    position: absolute;
    top: 3.8vw;
    right: 4.4vw;
}
p.btn_farmer a{
}

/*************
Slick slider
*************/
#mv .slick-list{
}

#mv .slick-slide{
    margin-top: 0;
}

#mv .slick-current{
}

.slick-slide {
    margin: 0;
}

.slick-dots{
    bottom: -6vw !important;
}

.slick-dots li{
    width: 3.2vw !important;
    height: 3.2vw !important;
}
.slick-dots li button{
    width: 3.2vw !important;
    height: 3.2vw !important;
}
.slick-dots li button:before{
    content: "" !important;
    border-radius: 1.6vw;
    border: 1px solid #63A814;
    width: 3.2vw !important;
    height: 3.2vw !important;
}

.slick-dots li.slick-active button:before{
    border: 1px solid #fff;
}


/*************
トップページ
*************/
.home #mv {
    margin-top: 5vw;
    margin-bottom: 12vw;
}

.home #mv .inner{
    max-width: 92vw;
}

.home h2{
    font-size: 4.5vw;
    text-align: center;
}

.home h2.lively{
    letter-spacing: 2.55px;
}

.home h2.lively::before,
.home h2.lively::after,
.home #link h2.lively::before,
.home #link h2.lively::after{
    content: "";
    width: 5.8vw;
    height: 5.8vw;
    margin: 0 3vw 3vw 3vw;
}
.home h2.lively::before{
    background: url('images/deco_left.png') no-repeat;
    background-size: contain;

}
.home h2.lively::after{
    background: url('images/deco_right.png') no-repeat;
    background-size: contain;
}

.home #phrase{
    margin-top: 7.4vw;
}
.home #phrase .inner{
    height: auto;
    margin-top: 0;
    background: url('images/sp/home/phrase.png') no-repeat center bottom;
    background-size: contain;
    padding-bottom: 24vw;
}

.home #phrase .inner::before{
    content: none;
}
.home #phrase .inner::after{
    content: none;
}

.home #phrase .inner p{
    line-height: 1.6;
    color: #325A64;
    font-size: 4vw;
    position: static;
}

.home #infomation{
    margin-top: 10vw;
}
.home #infomation .flex{
    display: flex;
    flex-direction: column;
}
.home #infomation .flex > div{
    width: 100%;
}
.home #infomation .news dl dt{
    border-left: 0.8vw solid #EDE473;
    padding: 1vw 0 0 2vw;
    margin-top: 2vw;
}

.home #infomation .news dl dd{
    border-left: 0.8vw solid #EDE473;
    padding: 0 0 1vw 2vw;
}

.home #infomation .news {
}

.home #infomation .news .btn_more{
    margin-top: 6vw;
}
.home #infomation .news .btn_farmer{
    margin-top: 4vw;
    
}
.home #infomation .event{
    margin-top: 15vw;
}
.home #infomation .event div{
    background: url('images/sp/home/frame.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 106vw;
    padding: 8vw 4vw 12vw;
    float: none;
}
.home #infomation .event div .date{
    margin-top: 3.4vw;
}
.home #infomation .event div .thumbnail{
    width: 100%;
    height: 44vw;
    object-fit: contain;
}
.home #infomation .event div .btn_more{
    margin-top: 5.4vw;
}

.home #special {
    margin-top: 2.2vw;
}

.home #special .recipe_search{
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 2.1vw;
    margin-top: 3.2vw;
}

.home #special .recipe_search .search {
    margin-left: 0;
}

.home #special .recipe_search p{
    letter-spacing: 0.9px;
    color: #325A64;
    font-size: 1.4rem;
}

.home #special .content_banner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}

.home #special .content_banner::after,
.home #special .content_banner::before {
    content: none;
}

.home #special .content_banner::before {
}

.home #special .content_banner div{
    width: 47.8%;
    margin-bottom: 2.8vw;
}

.home #special .social{
    display: flex;
    flex-direction: column;
    margin-top: 6.6vw;
    margin-bottom: -3.7vw;
    width: 100%;
}

.home #special .social div{
    width: 100%;
    margin-bottom: 3.7vw;
}
.home #special .social div a {
    width: 100%;
}

.home #link {
    margin-top: 8.8vw;
}

.home #link .link_banner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3vw 0 6vw;
}
.home #link .link_banner div{
    width: 32.2%;
    margin-bottom: 2.2vw;
    margin-right: 0;
}
.home #link .link_banner::after {
    content: "";
    display: block;
    width: 32.2%;
    height: 0;
}

/*************
下層ページ 共通
*************/

.mv{
    max-width: 92vw;
    height: 52vw;
    background: url('images/sp/mv/mv_other.png') no-repeat;
    background-size: contain;
    margin: 30px auto 0;
}

.page-id-24 .mv,
.layer-24 .mv{ 
    background: url('images/sp/mv/mv_know.png') no-repeat;
    background-size: contain;
}

.page-id-54 .mv,
.layer-54 .mv,
.tax-local_restaurant .mv,
.tax-gourmet .mv{
    background: url('images/sp/mv/mv_taste.png') no-repeat;
    background-size: contain;
}

.page-id-56 .mv,
.layer-56 .mv{ 
    background: url('images/sp/mv/mv_shopping.png') no-repeat;
    background-size: contain;
}

.page-id-58 .mv,
.layer-58 .mv{
    background: url('images/sp/mv/mv_cooking.png') no-repeat;
    background-size: contain;
}

.page-id-60 .mv,
.layer-60 .mv{
    background: url('images/sp/mv/mv_experience.png') no-repeat;
    background-size: contain;
}

.page-id-62 .mv,
.layer-62 .mv{ 
    background: url('images/sp/mv/mv_grow.png') no-repeat;
    background-size: contain;
}
.page-id-76 .mv,
.layer-76 .mv{ 
    background: url('images/sp/mv/mv_farmer.png') no-repeat;
    background-size: contain;
}

.mv div{
    font-size: 4.8vw;
    color: #325A64;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mv div span{
    background: url('images/title_box.svg') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 16.8vw;
    max-width: 90%;
    line-height: normal;
    padding: 5vw 12vw 3vw;
        position: relative;
}

.mv div span::before,
.mv div span::after{
    content: "";
    display: inline-block;
    width: 4.8vw;
    height: 4.8vw;
    margin: 0 3vw 3vw 3vw;
}

.mv div span::before{
    background: url('images/deco_left.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 4vw;
    left: 3vw;

}
.mv div span::after{
    background: url('images/deco_right.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 4vw;
    right: 3vw;
}

#contents .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

#contents .breadcrumb{
    margin: 6vw 0 5vw;
    width: 100%;
}
#contents .breadcrumb .current-item{
}

#contents aside{}

#contents aside h2{}

#contents aside ul{}
#contents aside ul li{}
#contents aside ul li::before{}
#contents aside ul li a{}

#contents article{
    max-width: 100%;
    width: 100%;
    margin-left: 0;
}
#contents article .thumbnail{
    margin: 0 auto 7vw;
}

#contents article h1.pagetitle{
    font-size: 4vw;
    padding: 2vw;
    min-height: 13vw;
}

#contents article h2.underline{
    font-size: 5.3vw;
    padding: 3.2vw;
    margin-bottom: 5.3vw;
}

#contents article h2.boxtitle{
    font-size: 4.8vw;
    padding: 1.2vw;
    margin: 16vw 0 6.6vw;
}

#contents article h3.underline{
    font-size: 4.8vw;
    padding: 3vw 0;
    margin-bottom: 4vw;
}

#contents article p{
    line-height: 1.7;
}

#contents article p.accent{
    font-size: 4.2vw;
}

#contents article .flex_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}

#contents article .flex_list > div{
    width: 100%;
    margin-bottom: 10.6vw;
}

#contents article .flex_list > div.no_thumbnail{
    width: 100%;
    margin: 1vw 0;
}

#contents article .flex_list .title{
    font-size: 5.3vw;
    color: #63A814;
    margin-top: 4.3vw;
}
#contents article .flex_list .content{
    margin-top: 2.2vw;
}

#contents article .tax_list{
    margin-bottom: 2vw;
}
#contents article .tax_list span{
    margin: 0 0 2vw 2vw;
}
#contents article .tax_list a{
    padding: 2vw 4vw;
    border-radius: 10vw;
}
#contents article .tax_list a:hover,
#contents article .tax_list a.current{
}

#contents article .pager {
    margin: 16vw auto auto;
}

#contents article .pager .pagination {
    font-size: 4.8vw;
}

#contents article .pager .pagination li {
    width: 11.6vw;
    height: 11.6vw;
    border-radius: 6vw;
    margin: 0 1.8vw;
}

#contents article .pager .pagination li.m-pagenation__prev,
#contents article .pager .pagination li.m-pagenation__next{
    margin: 0;
    width: 6vw;
}

/*************
詳細ページ
*************/
.single #contents article .article_inner{
    width: 100%;
    margin: 8vw auto 0;
}

/*************
ひめラボ
*************/

body.hime_labo #contents .profile{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(10.6vw - 1em);
    margin-bottom: 10.6vw;
    flex-direction: column;
}

body.hime_labo #contents .profile .pf_photo{
    width: 54%;
}

body.hime_labo #contents .profile .pf_text{
    width: 100%;
}

body.hime_labo #contents .profile .pf_text .pf_tltle{
    background-color: #EDEDED;
    margin: 8vw 0 0 0;
    text-align: center;
    padding: 3.2;
}

/*************
生産者向け
*************/

body.agricultural{
}

body.agriculturals #contents h1.pagetitle{
    font-size: 4vw;
    padding: 4vw;
}
body.agriculturals #contents h1.pagetitle + p{
    margin-top: 5.3vw;
}

.agriculturals .info_flex{
    display: flex;
    flex-direction: column;
    margin-top: 7.2vw;
}

.agriculturals .info_flex > div{
    width: 100%;
}
.agriculturals .info_flex > div + div{
    margin-top: 10.4vw;
}

.agriculturals .info_flex > div .info_title{
    font-size: 5.3vw;
    margin: 4.4vw 0;
}
.agriculturals .info_flex > div .info_title + p{
    min-height: auto;
}

.agriculturals .info_flex .btn_more{
    margin-top: 6vw;
}

.agriculturals .sub_flex{
    display: flex;
    flex-direction: column;
    margin-top: 14vw;
}

.agriculturals .sub_flex > div{
    width: 100%;
}

.agriculturals .sub_flex h2{
    font-size: 4.5vw;
    text-align: center;
}

.agriculturals .sub_flex .news{
    padding-right: 0;
    border-right: none;
}

.agriculturals .sub_flex .news dl dt{
    border-left: 0.8vw solid #EDE473;
    padding: 1vw 0 0 2vw;
    margin-top: 2vw;
}

.agriculturals .sub_flex .news dl dd{
    border-left: 0.8vw solid #EDE473;
    padding: 0 0 1vw 2vw;
}

.agriculturals .sub_flex .news .btn_more{
    margin-top: 6vw;
}

.agriculturals .sub_flex .bnr{
    margin-top: 13.2vw;
}

.agriculturals .sub_flex .bnr div{
    width: 100%;
}

.agriculturals .sub_flex .bnr div a {
    width: 100%;
}

/*************
お知らせ
*************/

.post-type-archive-news .news_list,
.tax-newscat .news_list{
    margin-top: 8.8vw;
}
.post-type-archive-news .news_list div,
.tax-newscat .news_list div{
    padding-bottom: 5vw;
    margin-bottom: 5vw;
}

.post-type-archive-news .news_list .title,
.tax-newscat .news_list .title{
    font-size: 4.8vw;
}

.single-news .thumbnail{
    width: 100%;
    margin: 0 auto;
}


/*************
イベント
*************/

.post-type-archive-event .event_list{
    margin-top: 8.8vw;
}
.post-type-archive-event .event_list div{
    padding-bottom: 5vw;
    margin-bottom: 5vw;
}

.post-type-archive-event .event_list a{
}
.post-type-archive-event .event_list p{
}
.post-type-archive-event .event_list .title{
    font-size: 4.8vw;
}

.single-event .thumbnail{
    width: 100%;
    margin: 0 auto;
}

/*************
サイトマップ
*************/

.site_map  #contents article h2.boxtitle {
    margin: 4vw 0 0;
}

.site_map  #contents article > ul{
    max-width: 92%;
    margin: 4vw auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.site_map  #contents article ul li{
    list-style: none;
    margin-bottom: 2vw;
    text-indent: -1.3em;
    padding-left: 1.3em;
}
.site_map  #contents article > ul > li{
    width: 100%;
}
.site_map  #contents article > ul > li:before {
    content:  "";
    width:  0.7em;
    height:  0.7em;
    display:  inline-block;
    margin-right: 0.7em;
    background-color: #63A814;
    border-radius:  50%;
}

.site_map  #contents article > ul > li ul{
    padding-left: 8vw;
    margin: 0;
}

.site_map  #contents article > ul > li > ul li{
    width: 100%;
}

.site_map  #contents article > ul > li > ul li::before{
    content:  "";
    width:  0.4em;
    height:  0.7em;
    display:  inline-block;
    margin-right: 0.7em;
    background: url('images/arrow_green.svg') no-repeat;
    background-size: contain;
}


/*************
ぐんま食材辞典・検索
*************/

.dictionary .conditions .category_title{
    font-size: 4.2vw;
    padding-bottom: 1vw;
    margin: 5vw 0 2vw;
}

.dictionary .conditions {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 4vw;
}

.dictionary .conditions div{
}

.dictionary .conditions div.half{
    width: 100%;
}

.dictionary .conditions div .row_2{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.dictionary .conditions div .area{
    height: auto;
}
.dictionary .conditions div .kind{
    height: auto;
}

.dictionary .conditions div .row_2 div{
    width: 100%;
}
.dictionary .conditions div .row_2 div p{
    font-size: 2rem;
    font-weight: bold;
    margin: 2vw 0 1vw;
}

.dictionary .conditions label{
    position:relative;
    padding: 1vw 0.5em 1vw 1.5em;
}
.dictionary .conditions div .row_2 p{
    text-align: center;
}
.dictionary .conditions div .row_2 span::after{
    content: "";
    display: inline-block;
    margin-bottom: -2vw;
}
.dictionary .conditions .keyword input[type="search"] {
    height: 12vw;
    width: 100%;
    border: 2px solid #74AF51;
    margin: 5vw auto 0;
    -webkit-appearance: none; 
}

.dictionary .conditions .form_btn{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    margin: 6vw auto 0;
}

.dictionary .conditions  input[type="reset"],
.dictionary .conditions  input[type="submit"]{
    width: 100%;
    height: 12vw;
    text-align: center;
    border-radius: 6vw;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 12vw;
    margin-bottom: 4vw;
}
.dictionary .conditions  input[type="reset"] {
    background: url('images/search/icon_clear.svg') no-repeat 92% center;
    background-size:  4.5vw 4.5vw;
    letter-spacing: 3px;
}
.dictionary .conditions  input[type="submit"] {
    background: url('images/search/icon_search.png') no-repeat 92% center #FB9C46;
    background-size:  6vw 6vw;
    letter-spacing: 3px;
}

/*************
レシピ検索
*************/

.recipe #contents article h2.underline{
    margin-top: 8vw;
}
.recipe #contents article  .flex_list {
    flex-direction: row;
}
.recipe #contents article .flex_list > div {
    margin-top: -3.3vw;
}
.recipe #contents article  .flex_list .title{
    font-size: 3.2vw;
}

.recipe .category{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: -6.6vw;
}
.recipe .category div{
    width: 100%;
}
.recipe .category_title{
    font-size: 4.8vw;
    padding-bottom: 2vw;
    margin: 5vw 0 3vw;
}

.recipe label{
    position:relative;
    margin: 1vw;
}
.recipe label input{
}

.recipe label span {
    border-radius: 6vw;
    padding: 2.5vw 5vw;
}
.recipe label input:checked + span {
}

.recipe .keyword input[type="search"] {
    height: 12vw;
    width: 100%;
    border: 2px solid #74AF51;
    margin: 5vw auto 0;
    -webkit-appearance: none; 
}

.recipe .form_btn{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    margin: 6vw auto 0;
}

.recipe  input[type="reset"],
.recipe  input[type="submit"]{
    width: 100%;
    height: 12vw;
    text-align: center;
    border-radius: 6vw;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 12vw;
    margin-bottom: 4vw;
}
.recipe input[type="reset"] {
    background: url('images/search/icon_clear.svg') no-repeat 92% center;
    background-size:  4.5vw 4.5vw;
    letter-spacing: 3px;
}
.recipe input[type="submit"] {
    background: url('images/search/icon_search.png') no-repeat 92% center #FB9C46;
    background-size:  6vw 6vw;
    letter-spacing: 3px;
}


/*************
レシピ検索結果
*************/

.recipe_list .flex_list{
    margin: 40px 0;
}


}