@charset "UTF-8";

/*
Theme Name: wje
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 7.0
Requires PHP: 5.6
Version: 2.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/* Variables */
:root {

	--sidenavi--width: 222px;

	--weight--bold: 700;
	--weight--black: 900;

    --global--color--base: #333333;

    --global--color--beige: #fbf7e6;
    --global--color--brown: #2b170d;

    --global--color--green: #266b1f;

    --global--font--mincho: "BIZ UDMincho", serif;

	--global--color--green01: #003d33;
	--global--color--green02: #2ab06d;
	--global--color--green03: #2e6953;
	--global--color--green04: #1ebab3;
	--global--color--green05: #009264;
	--global--color--green06: #145e48;
	--global--color--green07: #8aced0;
	--global--color--green08: #becb50;

	--global--color--pink: #ef75a5;

	--global--color--beige01: #e4d8d1;
	--global--color--beige02: #e5d8d2;
	--gloabl--color--beige03: #cab9b5;
	--gloabl--color--beige04: #d4beb4;

	--global--color--orange01: #f08458;

	--global--color--skyblue: #33c8e7;
	--global--color--skyblue02: #76daef;

	

	--global--color--gray01: #e6e6e8;
	--global--color--gray02: #c4c4c4;
	--global--color--gray03: #787878;

	--global--color--purple: #b29dd1;


	--global--color--yellow01: #fcc92c;
	--global--color--yellow02: #fee278;
	--global--color--black: #000000;
	--global--color-white: #ffffff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	--global--color--black--70: rgba(0, 0, 0, 0.7);
	--global--color--black--30: rgba(0, 0, 0, 0.3);
	--global--color--hover: rgba(255, 255, 255, 0.4);

}

* {
    margin: 0;
    padding: 0;
    color: var(--global--color--base);
    font-weight: var(--weight--bold);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: .1em;
}

.eng{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.mincho{
  font-family: var(--global--font--mincho);
  font-weight: 900;
  font-style: normal;
}

body {
	font-family: "Zen Kaku Gothic New", sans-serif;
    position: relative;
}

main{
    width: calc(100% - var(--sidenavi--width));
    margin-left: auto;
}

body,html,main {width: 100%;}

img {display: block;}

a {
    display: block;
    text-decoration: none;
}

li {
    list-style: none;
}

section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

.jus-c {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jus-ad {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.jus-bn {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.al-c {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}



#r-main {
    width: calc(100% - 240px);
    margin-left: auto;
}

section#tops {
    height: 44vw;
    min-height: 600px;
    max-height: 100vh;
}

.slide__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center;
    background-size: cover;
    opacity: 0;
    z-index: -2;
    -webkit-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
}

.slide__bg.active,
.slide__bg[active="1"] {
    opacity: 1;
    z-index: -1;
}

.slide__bg--0 {
    background-image: url(./assets/images/home/top--1.jpg);
}

.slide__bg--1 {
    background-image: url(./assets/images/home/top--2.jpg);
}

.slide__bg--2 {
    background-image: url(./assets/images/home/top--3.jpg);
}

.top__text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-indent: .2em;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, .6);
    letter-spacing: .2em;
    line-height: 2.5em;
    white-space: nowrap;
}

.dotlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 40px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100px;
    cursor: pointer;
}

.dots {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
}

.dots.active,
.dots[active="1"] {
    background-color: #1c9628;
}


section#main-content {
    max-width: 1000px;
    margin: 0 auto;
}




.main-content__list {
    margin: 100px 0;
    padding: 0 40px;
}

.main-content__list h2 {
    position: relative;
    padding-bottom: 31px;
    margin-bottom: 30px;
    font-size: 26px;
    color: #2b7623;
    font-family: var(--global--font--mincho);
}

.main-content__list h2::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 1px;
    background-color: #2b7623;
}

.flexbox {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flexchild--left {
    width: 42%;
}

.flexchild--right {
    width: 56%;
    margin-left: 2%;
}

.main-content__text {
    font-size: 15px;
    line-height: 2.5em;
}


.main-content__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    background-color: #2b170d;
    color: #fff;
    font-size: 16px;
    margin-top: 20px;
}

.main-content__btn:hover {
    opacity: .8;
    -webkit-transition: .2s;
    transition: .2s;
}

.main-content__btn i {
    margin-right: 10px;
    color: #fff;
}

.main-content__text--contact {
    text-indent: .1em;
}








    .menu-btn.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) rotate(-45deg);
        transform: translateY(8px) rotate(-45deg);
        top: 33%;    top: 33%;
    margin: -1px 0;
    }
    
    .menu-btn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .menu-btn.active span:nth-of-type(3) {
        -webkit-transform: translateY(-9px) rotate(45deg);
        transform: translateY(-6px) rotate(45deg);
        bottom: 35%;
    margin: 0px 0;
    
    }


nav#Navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 222px;
    background-color: var(--global--color--beige);
}


.sp-head {
    display: none;
}

.nav__cnt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    height: 100vh;
}

.logo {
    display: block;
    /*width: calc(100% - 40px);*/
    margin: 0 auto;
}

.grobal-nav__list {
    position: relative;
    top: -40px;
    width: calc(100% - 40px);
    margin: 0 auto;
}
.grobal-nav__list a {
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-indent: .2em;
    letter-spacing: .2em;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.grobal-nav__list a:hover {
    opacity: .8;
    -webkit-transform: .2s ease;
    transform: .2s ease;
}

.grobal-nav__list a i {
    display: none;
}

.contact-box {
    width: calc(100% - 30px);
    padding: 20px 0 10px;
    text-align: center;
    margin: 0 15px;
}

.contact-box .copyright{
	font-size: 8px;
	background-color: transparent !important;
	font-weight: var(--weight--bold);
    display: block;
}



.contact-box__text {
    font-size: 10px;
    white-space: nowrap;
    text-align: left;
    font-style: normal !important;
}

.contact-box__text:nth-child(2) {
    margin: 10px 0;
}

.contact-box__text span {
    font-weight: bold;
}

.contact-btn {
    padding: 4px 0;
    background-color: #2b170d;
    color: #fff;
}

.contact-btn i {
    color: #fff;
}
.sp-crose {
    display: none;
}

main,
footer {
    width: calc(100% - var(--sidenavi--width));
    margin-left: auto;
}

.footer__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 0;
    background-color: #fbf7e6;
}

.footer__comp p {
    font-size: 14px;
    font-weight: bold;
}

.footer__address {
    margin-left: 100px;
    font-size: 14px;
    font-weight: bold;
}


p{
    line-height: 1.8;
}

footer .btn{
    position: fixed;
    bottom: 10px;
    right: 10px;
    /*background-color: var(--global--color--green);*/

    max-width: 400px;
    animation: bounce 0.8s ease infinite alternate;
    display: flex;
}
footer a{
    display: flex;
    position: relative;
    align-items: end;
}

footer a::after{
    content: "";
    position: absolute;
    width: calc(100% + 50px);
    height: 100px;
    background-color: var(--global--color--green);
    border-radius: 50px;
    z-index: -1;
    right: 0;
    bottom: 0;
}

footer a h3{
    background-color: transparent !important;
}
footer a span.t{
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 25px;
}
footer a span.p{
    width: 130px;
    margin-right: 30px;
}
footer a img{
    width: 100%;
}


/* -----

    

----- */

.page-header{
    width: 100%;
    height:251px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.page-title{
    font-family: var(--global--font--mincho);
    font-weight: var(--weight--black);
    color: #fff;
    font-size: 30px;
    text-shadow: 0 0 10px rgba(0, 0, 0, .6);
    letter-spacing: .2em;
    padding-left: .2em;
    white-space: nowrap;
}



#company .page-header{
    background-image: url('/image/company/img_hd_bg.png');
}

#contact .page-header{
    background-image: url('./assets/images/contact/img_hd_bg.png');
}

#blog .page-header{
    background-image: url('./assets/images/blog/img_hd_bg.png');
}

#shoplist .page-header{ background-image: url('./assets/images/shoplist/img_hd_bg.png'); }
#storeopen .page-header{ background-image: url('./assets/images/storeopen/img_hd_bg.png'); }




.tit01{
    display: flex;
    align-items: flex-end;
}
.tit01 span{
    font-size: 16px;
    margin-left: 20px;
    font-weight: var(--weight--black);
}






.business_box:not(:last-child){
    margin-bottom: 40px;
}


.business_box{
    display: flex;
    justify-content: space-between;
}

.business_box figure{
    width: 310px;
}
.business_box figure img{
    max-width: 100%;
}

.business_box p{
    width: calc(100% - 330px);
    margin-top: 0;
}



/*
  下層ページ共通CSS
*/
body{counter-reset:sample;}
section#top {
    height: 14vw;
    min-height: 300px;
    max-height: 14vh;
}

headder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat ;
    background-position: center;
    background-size: cover;
    background-image: url(../images/top/top--1.jpg);
    z-index: 1;
}
h1.top__text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 34px;
    font-weight: bold;
    text-indent: .2em;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, .6);
    letter-spacing: .2em;
    line-height: 2.5em;
    white-space: nowrap;
}

.top__text span{
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, .6);
    font-size: 16px;
}



/* ヘッダー画像 */
#company headder{
    background-image: url(../image/company/img_hd_bg.png);
}
#store_introduction headder{
    background-image: url(../image/store_introduction/img_hd_bg.png);
}
#yasounosato headder{
    background-image: url(../image/yasounosato/img_hd_bg.png);
}
#storeopen headder{
    background-image: url(../image/storeopen/img_hd_bg.png);
}
#contact headder{
    background-image: url(../image/contact/img_hd_bg.png);
}


/*文字*/
span.caution{
  color: #fff;
  background: #e98485;
  padding: .5em;
  margin-left: .5em;
}
/* ヘッダー文字 */
h4{
  color: var(--global--color--green);
  margin-bottom: 1em;
}

/* 画像関係 */
figure.wide_img{
  width: 100%;
  clear: both;
  margin-bottom: 1em;
}
/* ボタン */
.btncenter{
  text-align: center;
  padding: 1em;
}
input.btn{
  padding: 1em 4em;
  color: #000;
  background: #CCC;
  border: none;
}
input.btn_send ,
input#submit{
  font-size: 1rem;
  padding: 1em 4em;
  color: #fff;
  background: #3E9535;
  border: none;
  font-weight: bold;
}
a.btn{
  font-size: 1rem;
  padding: 1em 4em;
  color: #fff;
  background: #3E9535;
  border: none;
  font-weight: bold;
}


a.nml{
    display: inline-block;
    border-bottom: #000 1px dashed;
}

ul.normal {
  background: #fdfbf7;
  padding: 1em .5em;
}
ul.normal li{
  margin-bottom: 1em;
  color: #503939;
  padding-left: 1em;
}
ul.normal li::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f14a";
  margin-right: 1em;
}



ul.numberling li {
padding: 1em 0 1em 3.5em;
  counter-increment: title;
  background: #fdfbf7;
  font-size: 1.2rem;
    text-indent: -2.3em;
}
ul.numberling li h5{
}
ul.numberling li h5::before {
  content: counter(title);
  font-size: 1.3rem;
  margin-right: .5em;
  background: #c77004;
  color: #ffffff;
  padding: .3em .5em;
}
ul.numberling li p.down{
    text-align: center;
    margin: .5em 0;
}


/*----------------------------------------------
    開業
----------------------------------------------*/
dl.qa {
  clear: both;
  margin-bottom: 1.5em;
}
dl.qa dt{
  padding: 1em .5em;
  background: #fdfbf7;
  margin-bottom: .5em;
  color: #5a4141;
  font-weight: bold;
}
dl.qa dt::before{
  content:"Q";
  margin-right: 1em;
  color: #c77004;
}
dl.qa dd{
  padding: 1em .5em;
  text-indent: -2em;
  margin-left: 2em;
}
dl.qa dd::before{
  content:"A";
  margin-right: 1em;
  color: #133e6d;
}
/*----------------------------------------------
    会社概要
----------------------------------------------*/
#company .one_image figure{
  margin-bottom: 1em;
}

.nml_tbl table{
  width: 100%;
}
.nml_tbl table th{
  width: 200px;
  padding: 1em;
  background: #fdfcf8;
  border-bottom: 1px solid #c9bd8c;
}
.nml_tbl table td{
  width: calc(100% - 200px);
  padding: 1em;
  border-bottom: 1px solid #cdcdcd;
  padding: 15px 30px;
}
.map{
  padding: 1px;
}


.map iframe{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

/*----------------------------------------------
    野草の里
----------------------------------------------*/
.alert {
  margin-top: 50px;
  margin-bottom: 80px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--global--color--green);
  text-align: center;
}
.alert span {
  font-size: 1rem;
  font-weight: normal;
}
.grid-yasou {
    /*
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 430px));
  grid-template-rows: ;
    margin-bottom:3em;
  grid-gap: 47px 6.5%;
  justify-content: space-around;
  display:-ms-
  */
  display: flex;
  flex-wrap: wrap;
}

.grid-yasou .item{
    width: 48.5%;
    margin-bottom: 4%;
}

.grid-yasou .item:nth-child(odd){
    margin-right: 3%;
}

.grid-yasou img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  height: auto;
}
.pre_underline {
  font-size: 1.5rem;
  color: #2b170d;
  border-bottom: solid 2px var(--global--color--green);
  margin-bottom: 20px;
  padding-bottom: 10px;
}
 .under {
  margin-top: 100px;
}
.prefecture {
  display: inline-block;
  padding: 4px 10px;
  color: #fff;
  color: var(--global--color--green);
  font-size: 12px;
  line-height: 1;
  border: var(--global--color--green) 1px solid;
  border-radius: 20px;
  margin-right: 10px;

}

.store {
  margin-top: 20px;
  vertical-align: middle;
  color: #2b170d;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
}

.txt_store {
  display: block;
  height: auto;
  text-align: left;
}
/*----------------------------------------------
    店舗紹介
----------------------------------------------*/
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 240px));
  grid-template-rows: ;
  grid-gap: 47px 0%;
  justify-content: space-around;
  display:-ms-
}
h3 {
  display: table-cell;
  width: 430px;
  padding: 10px 0 10px 25px;
  background: #2b170d;
  color: #fff;
  font-size: 1rem;
}
.grid img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  height: auto;
}
.grid p {
  display: block;
  max-width: 430px;
  height: auto;
  text-align: left;
  font-size:.9rem;
}

/*----------------------------------------------
    お問い合わせ
----------------------------------------------*/
#enty  .nml_tbl textarea,
#contact .nml_tbl textarea{
  font-size: 1rem;
  border: 1px solid #cdcdcd;
  padding: .5em;
}

#entry p.anounce ,
#contact p.anounce{
  margin: .5em 0;
}
#entry .nml_tbl input ,
#contact .nml_tbl input{
  font-size: 1rem;
  padding: .5em;
}
#entry .nml_tbl input.fld_04 ,
#contact .nml_tbl input.fld_04{
  width: 100%;
  margin: .5em 0;
}
#entry input#submit,
#entry input#back ,
#contact input#submit,
#contact input#back{
  margin: 1em;
  padding: 1em 4em;
}
#contact select ,
#entry select{
  width: 100%;
  margin: .5em 0;
}














.article__list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}

.article__list a{
    width: 100%;
    max-width: 32%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.article__list a img{
    max-width: 100%;
}
.article__list a dl dt{
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.article__list a dl dt img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s ease;
}
.article__list a dl dd{
    margin-top: 7px;
}
.article__list a dl dd span{
    display: block;
    font-size: 12px;
}
.article__list a:hover img{
    transform: scale(1.05,1.05);
}



.blog_article p{
    min-height: 16px;
}


#blog h2{
    text-align: left !important;
    font-family: "Zen Kaku Gothic New", sans-serif;

}
#blog h2::after{
    left: 0 !important;
    -webkit-transform: translateX(0) !important;
        transform: translateX(0) !important;
}
#blog h2 span{
    display: block;
    line-height: 1.2;
    font-size: 16px;
}


.branch{
    margin-bottom: 20px;
    padding: 0 40px;
}
.branch ul{
    display: flex;
    align-items: center;
}
.branch ul *{
    font-size: 12px;
}
.branch ul li:not(:last-child){
    margin-right: 12px;
}


.visible{
    display: inline !important;
    margin-left: 5px !important;
    font-size: 12px;
}



.pager-article ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}
.pager-article ul li{
    width: 33.3%;
    flex-grow: 1;
    flex: 1 0 auto; /* fix IE11 */
}
.pager-article ul li:not(:last-child){
    border-right: #cccccc 1px solid;
}
.pager-article ul li a{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.pager-article ul li.prev a{
    align-items: flex-start;
}
.pager-article ul li.prev a span{
    font-size: 12px;
}
.pager-article ul li.next a{
    align-items: flex-end;
}
.pager-article ul li.next a span{
    font-size: 12px;
}

.pager-article ul li a:hover,
.pager-article ul li a:hover *{
    color: #1c9628;
}












/* ----- CONTACT -----*/
.contact-form{
    margin-top: 70px;
}

.contact-form dl{
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 25px;
}
.contact-form dl dt{
    width: 200px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 7px;
}
.contact-form dl dt span{
    font-size: 12px;
}
.contact-form dl dt span.n{
    color: #cc0000;
}
.contact-form dl dd{
    width: calc(100% - 200px);
}
.contact-form input,
.contact-form textarea{
    border: #999999 1px solid;
    padding: 10px 20px;
    width: 100%;
    font-size: 16px;
}

.contact-form .button input{
    border: none;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    line-height: 1;
    background-color: #009264;
    color: var(--global--color-white);
}


.privacy-button{
    text-align: center;
    margin-bottom: 40px;
}
.privacy-button label{
    display: flex;
}
.privacy-button input{
    width: 50px;
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    text-align: center;
    padding: 10px 0;
}



.privacy-text-wrapper{
	padding: 0.5rem 1rem;
    margin-bottom: 30px;
	background-color: var(--global--color-white);
    border: #999999 1px solid;
}

.privacy-text{
	border: none;
	height: 360px;
	padding: 1rem 1rem;
	overflow-y: scroll;
	font-size: 14px;
	font-weight: var(--font--weight-bold);
	letter-spacing: 0;
	font-family: var(--global--font-noto);

}.privacy-text::-webkit-scrollbar {
	background: var(--global--color--gray01);
	width: 5px;
	height: 15px;
	border-radius: 20px;
  }
  .privacy-text::-webkit-scrollbar-thumb {
	background-color: var(--global--color--yellow01);
	width: 3px;
	border-radius: 20px;
  }







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



    section#main-content {
        width: 100%;
    }
    .main-content__list .flexbox {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .main-content__list h2  {
        font-size: 22px;
    }
    /*
    .main-content__list h2::after {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    */
    .main-content__text {
        width: 100%;
        margin-top: 20px;
        font-size: 14px;
    }
    .main-content__image {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
    .main-content__btn {
        height: auto;
        padding: 20px 0;
    }
    .main-content__text--contact {
        text-align: center;
    }
    .main-content__image img{ display: initial; max-width: 100%; }
}
    .main-content__image img{ display: initial; max-width: 100%; }



.age input{ width: 100px; margin-right: 10px; }

.btnNext{ display: flex; justify-content: space-between; }
.btnNext span{ width: 35px; }

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


    .store{ flex-direction: column; align-items: baseline; }

}



@media screen and (min-width: 921px) {
        nav#Navigation a:hover{
            background-color: var(--global--color--brown);
            color: #ffffff;

        }


        @keyframes bounce {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-5px);
        }
        }

        nav#Navigation a:hover i{
            color: #ffffff;
        }
        
        .menu-arrow{ display: inline-block; }
        .sp{ display: none !important; }
}

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


    .contact-form dl{
        display: block;
    }
    .contact-form dl dt,
    .contact-form dl dd{ width: 100%; }
    .contact-form dl dt{ margin-bottom: 10px; padding-right: 0; }

    .contact-form input,
    .contact-form textarea{ padding: 20px 20px; }

    footer .btn{
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: initial;
    }

footer a {
    justify-content: space-between;
    width: 100%;
}
footer a::after {
    width: calc(100%);
    border-radius: 0;
}
footer a span.p{
    margin-right: 10px;
}
footer a span.t{
    width: calc(100% - 140px);
}
    .pc{ display: none !important; }

    
    main{
        width: 100%;
        margin-left: 0;
        padding-top: 42px;
        margin-bottom: 100px;
    }

    .main-content__list h2{
        flex-direction: column;
        align-items: center;
    }

    .tit01 span{
        margin: 10px 0 0 0;
    }

    .pre_underline.tit01{
        justify-content: space-between;
    }

    .main-content__list h2::after {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .page-header{
        height: 150px;
    }
    .page-title{
        font-size: 20px;
    }


    .footer__address i ,
    .footer__address a{
      color: #fff;
      display: initial;
    }
    .fa, .fas {
      display: initial;
    }

    nav#Navigation {
        width: 100%;
        height: auto;
        z-index: 100;
    }

    .sp-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        background-color: #499e40;
    }
    .sp-logo {
        width: 100%;
        height: 42px;
        background-color: #fff;
    }
    .sp-logo img {
        margin: 10px;
        line-height: 42px;
    }
    .menu-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 42px;
        height: 42px;
        background-color: #499e40;
        border: none;
        overflow: hidden;
        cursor: pointer;
    }
    .menu-btn span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 6px 0;
        background-color: #fff;
        -webkit-transition: .2s ease;
        transition: .2s ease;
    }
    nav#Navigation[menu="open"] .menu-btn span:nth-child(1) {
        -webkit-transform: translateY(6px) rotate(44deg);
        transform: translateY(8px) rotate(45deg);
    }
    nav#Navigation[menu="open"] .menu-btn span:nth-child(2) {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
    nav#Navigation[menu="open"] .menu-btn span:nth-child(3) {
        -webkit-transform: translateY(-6px) rotate(-44deg);
        transform: translateY(-8px) rotate(-45deg);
    }
    .sp-head i {
        margin: 10px;
        color: #fff;
    }
    .nav__cnt {
        display: none;
        position: relative;
        height: 100vh;
    }
.nav__cnt.active{
display: flex;
}
    nav#Navigation[menu="open"] .nav__cnt {
        display: block;
    }
    .nav__cnt::before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .6);
        z-index: -10;
    }
    .nav__cnt::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #499e40;
        z-index: -9;
    }
    .logo {
        display: none;
    }
    .grobal-nav__list a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        padding: 0;
        padding-left: 10px;
        font-size: 14px;
        color: #fff;
        text-align: left;
        border-top: none;
        height: 10vh;
    }
    .menu-arrow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 42px;
        height: 42px;
    }
    .grobal-nav__list{
        top:0px;
    }
    .grobal-nav__list a i {
        display: block;
        color: #fff;
        letter-spacing: 0;
    }
    .grobal-nav__list a.sp-btn {
        display: block;
        width: 80%;
        margin: 20px auto;
        padding: 10px;
        text-align: center;
        border: none;
        background-color: #6bad65;
    }
    .contact-box {
        padding: 0;
        padding-bottom: 20px;
        background-color: transparent;
    }
    .contact-box__text {
        display: none;
    }
    .contact-btn {
        padding: 0;
        background-color: transparent;
    }
    .sp-crose {
        display: block;
        width: 100%;
        padding: 10px 0;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #23681c;
        border: none;
    }
    .sp-crose i {
        margin-right: 8px;
        color: #fff;
    }
    #r-main {
        width: 100%;
    }
    section#tops {
        height: 70vw;
        min-height: 300px;
    }
    .top__text {
        font-size: 16px;
    }

    .top__text span{
        font-size: 13px;
    }

    .dotlist {
        bottom: 20px;
    }
    .main-content__list {
        margin: 50px 0;
        padding: 0 15px;
    }
    .main-content__list h2 {
        font-size: 18px;
        line-height: 1.4;
        text-align: center;
    }
    .main-content__text {
        font-size: 12px;
    }
    .main-content__btn {
        padding: 10px 0;
        font-size: 14px;
    }


    /*画像コンテンツ*/
    figure.wide_img img{
      width: 100%;
    }

    footer#r-footer {
        width: 100%;
    }
    .footer__top {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    .footer__comp p {
        font-size: 10px;
    }
    .footer__address {
        margin-left: 0;
    }
    .footer__address {
        padding: 10px;
        color: #fff;
        font-size: 12px;
        background-color: #2d170d;
    }
    .footer__address i {
        color: #fff;
    }
    .copyright {
        font-size: 10px;
        text-indent: .1em;
    }
}





@media screen and (min-width:769px) {
.article__list a:nth-child(3n){
    margin-right: 0;
}
}
/*----------------------------------------------------------------
    ipad
----------------------------------------------------------------*/
@media screen and (max-width:768px) {

    .article__list a{ max-width: 49%; }
    .article__list a:nth-child(even){ margin-right: 0; }


    .business_box{
        display: block;
    }
    .business_box figure{ text-align: center; }
    .business_box figure,
    .business_box p{ width: 100%; }

    .business_box figure img{ display: inline; }

  .grid {
      display: grid;
      grid-gap: 47px 0%;
      grid-template-columns: repeat(1, minmax(200px, 430px));
      justify-content: space-around;
  }
  /*
  .grid-yasou {
    display: grid;
    grid-gap: 47px 0%;
    grid-template-columns: repeat(1, minmax(200px, 430px));
    justify-content: space-around;
  }
    */
  .pre_underline {
    text-align: center;
  }
  .prefecture {
    margin-bottom: 5px;
  }
  .store {
    font-size: 1.0rem;
  }

  .txt_store{
    font-size: 14px;
  }

  
  .nml_tbl table th ,
  .nml_tbl table td{
    width: 100%;
    display: block;
    text-align: center;
    font-size: .9rem;
  }

  input.fld_02{
    width:40%;
  }
  input.fld_01{
    width: 20%;
  }
  #entry .nml_tbl textarea, #contact .nml_tbl textarea{
    width: 90%;
  }
}


@media screen and (max-width: 550px) {
  .grid-yasou .item{ width: 100%; margin-right: 0; }
  .under{ margin-top: 50px; }
}


/*----------------------------------------------------------------
    SmartPhone
----------------------------------------------------------------*/
@media screen and (max-width: 480px) {
    .main-content__list h4{
      text-align: center;
    }
    dl.qa dt{
      text-indent: -2em;
      padding: 1em 1em 1em 3em;
    }
    dl.qa dd{
      padding: 1em;
    }
    ul.normal li {
      padding-left: 3em;
      text-indent: -30px;
    }


}
/*----------------------------------------------------------------
    小さいブラウザ
----------------------------------------------------------------*/
@media screen and (max-height: 648px) {
  .logo {
    width: calc(100% - 60px);
    margin: 0 auto;
  }
  .grobal-nav__list{
    top:0px;
  }

  



}