@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Dancing+Script:wght@400;500;600&family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');

.sashie img{
width: 100%
}
/*===============================================
●PCレイアウト設定 
===============================================*/
@media print, screen and  (min-width: 651px){
.subtitle{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 50px;
width: 1265px;
max-width: 90%;
margin: 0 auto 50px auto
}
.subtitle .com{
width: 37%;
}
.subtitle .com .flex_title{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 30px
}
.subtitle .com .flex_title .icon{
width: 22%;
}
.subtitle .com .flex_title .text1{
color: #81512c;
font-size: clamp(1.6rem,2.0vw,4.0rem);
width: 75%;
font-family: 'Noto Serif JP';
letter-spacing: 0.5rem
}
.subtitle .com .text2{
font-size: clamp(1.6rem,2.5vw,4.3rem);
padding-bottom: 50px;
font-weight: 600;
font-family: 'Noto Serif JP';
letter-spacing: 0.8rem
}
.subtitle .com .text3{
font-size: clamp(1.3rem,1.7vw,2.1rem);
line-height: 250%;
letter-spacing: 0.5rem
}
.subtitle .photo{
width: 60%
}
/*メイン画像ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.index{
position: relative;
font-family: 'Noto Sans JP';
}

.index .main{
margin: 0;
padding: 0;
}
.index .main img{
width: 100%
}
.index .box_lead{
margin: 0;
padding: 10px 0 30px 0;
background-image: url("../images/index/bg_lead.jpg");
background-repeat: no-repeat;
background-position: top center;
background-color: #4ab281
}
.index .box_lead .com{
width: 910px;
max-width: 90%;
margin: 0 auto;
color: #FFF;
line-height: 250%;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight: 300;
letter-spacing: 0.5rem
}
.index .box_lead .com p{
margin-bottom: 4%
}
.index .box_lead .com .bt{
width: 400px;
max-width: 100%;
margin: 0 auto
}
.index .box_lead .com .bt a{
display: block;
background-color: #FFF;
color: #81512c;
text-align: center;
padding: 13px 0;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box_lead .com .bt a:hover{
background-color:#f1dfd1 
}
.index .box1{
margin: 0;
padding: 0
}
.index .box1 img{
width: 100%
}
.index .box2{
background-color: #FFF;
padding-bottom: 100px
}
.index .box2 img{
width: 100%
}
.index .box2 .bunner{
width: 1265px;
max-width: 90%;
margin: 0 auto 80px auto;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-weight: 500
}
.index .box2 .bunner a{
display: block;
margin-bottom: 30px;
}
.index .box2 .flex_shop{
width: 1265px;
max-width: 90%;
margin: 0 auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box2 .flex_shop a{
display: block;
width: 45%;
margin-bottom: 2px;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-weight: 500
}
.index .box2 .flex_shop a img{
display: block;
margin-bottom: 20px
}
.index .box2 .bt{
width: 400px;
max-width: 100%;
margin: 0 auto;

}
.index .box2 .bt a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
padding: 13px 0;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box2  .bt a:hover{
background-color:#6f431f 
}
.index .box3{
background-color: #ffffbf;
}
.index .box3 img{
width: 100%
}
.index .box3 .img_box3{
margin-bottom: 300px
}
.index .box3 .flex_shop{
width: 1265px;
max-width: 90%;
margin: 0 auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box3 .flex_shop a{
display: block;
width: 45%;
margin-bottom: 100px;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-weight: 500
}
.index .box3 .flex_shop a img{
display: block;
margin-bottom: 20px
}
.index .box3 .bt{
width: 400px;
max-width: 100%;
margin: 0 auto;

}
.index .box3 .bt a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
padding: 13px 0;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box3  .bt a:hover{
background-color:#6f431f 
}
.index .box4{
background-color: #4ab281;
padding-top: 345px;
color: #FFF!important
}
.index .box4 img{
width: 100%
}
.index .box4 .subtitle .com .flex_title .text1{
color: #FFF;
}
.index .box4 .flex_recipe{
width: 1265px;
max-width: 90%;
margin: 0 auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box4 .flex_recipe a{
display: block;
width: 45%;
margin-bottom: 100px;
color: #FFF;
}
.index .box4 .flex_recipe a img{
display: block;
margin-bottom: 30px
}
.index .box4 .flex_recipe a .com{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box4 .flex_recipe a .com .photo2{
width: 33%;
}
.index .box4 .flex_recipe a .com .photo2 {
width: 33%;
}
.index .box4 .flex_recipe a .com .photo2 .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.index .box4 .flex_recipe a .com .photo2 .facephoto img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.index .box4 .flex_recipe a .com .data{
width: 65%
}
.index .box4 .flex_recipe a .com .data .name{
border: #FFF 1px solid;
border-radius: 40px;
text-align: center;
padding: 15px 0;
font-size: clamp(1.2rem,1.5vw,2.0rem);
font-weight: 400;
width: 85%;
margin-bottom: 5%;
}
.index .box4 .flex_recipe a .com .date{
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight: 300;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.index .box4 .flex_recipe a .com .text1{
font-size: clamp(1.3rem,1.7vw,2.3rem);
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
.index .box4 .bt{
width: 400px;
max-width: 100%;
margin: 0 auto 200px auto
}
.index .box4 .bt a{
display: block;
background-color: #FFF;
color: #81512c;
text-align: center;
padding: 13px 0;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box4 .bt a:hover{
background-color:#f1dfd1 
}
.index .box5{
background-color: #FFF;
padding-top: 300px;
}
.index .box5 .flex_news{
width: 1265px;
max-width: 90%;
margin: -50px auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box5 .flex_news a{
display: block;
width: 28%;
margin-bottom: 100px;
}
.index .box5 .flex_news a img{
display: block;
margin-bottom: 30px;
width: 100%
}
.index .box5 .flex_news a .flex_cat{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 20px;
}
.index .box5 .flex_news a .cat{
width: 47%;
border: #81512c 1px solid;
color: #81512c;
border-radius: 40px;
text-align: center;
padding: 2px 0;
font-size: clamp(1.2rem,1.5vw,2.0rem);
font-weight: 500;
}
.index .box5 .flex_news .date{
width: 50%;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight: 500;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.index .box5 .flex_news .text1{
font-size: clamp(1.3rem,1.7vw,2.3rem);
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
.index .box5 .bt{
width: 400px;
max-width: 100%;
margin: 0 auto 200px auto
}
.index .box5 .bt a{
display: block;
background-color: #81512c;
color: #fff;
text-align: center;
padding: 13px 0;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box5 .bt a:hover{
background-color:#6f431f 
}
.index .box5 .slider img{
display: block;
margin-right: 4%
}
.box_slider{
background-image: url("../images/index/bg_slider.png");
background-repeat: repeat-x
}
.slider {
    display: flex;
    overflow: hidden;
}

.slider-list {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    animation: slideShow 40s infinite linear;
    list-style: none;
}

.slider-item {
    width: 800px;
    height: 470px;
    margin-right: 20PX
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 0.5rem;
}


@keyframes slideShow {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }

}
.document{
width: 1265px;
max-width: 90%;
margin: 0 auto;
}
/*十石みそとは-----------------------------------------*/
.about{
padding: 50px 0;
}
.about img{
width: 100%
}
.about .subtitle{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 50px;
width: 100%;
margin: 0 auto 150px auto;
padding: 100px;
}
.about .subtitle .com{
width: 35%;
}
.about .subtitle .photo{
width: 55%
}
.about .box_lead{
width: 1265px;
max-width: 90%;
margin: 0 auto;
padding-top: 100px;
position: relative;
}
.about .box_lead img{
margin-bottom: 100px
}
.about .box_lead .com{
width: 50%;
position: absolute;
left: 50%;
top:52%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
line-height: 240%;
letter-spacing: 0.1rem
}
.about .box_lead .com p{
padding: 8% 0
}
.about .box2{
background-color: #4ab281;
background-image: url("../images/about/cg3.jpg");
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
color: #FFF
}
.about .box2 .subtitle{
color: #FFF!important;
padding-top: 25%;
padding-bottom: 200px
}
.about .box2 .box_point{
border: #FFFFBE 2px solid;
border-radius: 20px;
margin-bottom: 50px
}
.about .box2 .box_point .title_point{
width: 40%;
margin:-15% auto 5% auto;
}
.about .box2 .box_point .title_point img{
width: 100%
}
.about .box2 .box_point .flex_point{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
width: 80%;
margin: 0 auto 7% auto
}
.about .box2 .box_point .flex_point .photo{
width: 50%
}
.about .box2 .box_point .flex_point .com{
width: 48%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: clamp(1.4rem, 2.2vw, 3.0rem);
font-family: 'Noto Serif JP';
line-height: 230%;
font-weight: 400
}
.about .box2 .box_point .flex_point2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 85%;
margin: 0 auto 7% auto
}
.about .box2 .box_point .flex_point2 .photo{
width: 50%
}
.about .box2 .box_point .flex_point2 .com{
width: 48%;
font-size: clamp(1.2rem,1.3vw,2.0rem);
line-height: 250%;
font-weight: 300
}
.about .box2 .image_bottom{
padding-top: 17%
}
.about .box2 .sashie{
margin-bottom: 150px;
}
.about .box3{
background-color: #FFF;
padding-top: 100px;

}
.about .box3 .flex_secret{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 200px
}
.about .box3 .com{
width: 45%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
line-height: 240%;
letter-spacing: 0.1rem
}
.about .box3 .com .title_secret{
width: 70%;
padding-bottom: 20px
}
.about .box3 .com .subtitle_secret{
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-family: 'Noto Serif JP';
line-height: 200%;
color: #81512c;
padding-bottom: 25px;
font-weight: 500
}
.about .box3 .flex_secret .photo{
width: 48%
}
.about .box3 .flex_secret2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
padding-bottom: 200px
}
.about .box3 .flex_secret2 .photo{
width: 48%
}
/*ここで買える-----------------------------------------*/
.buy{
padding: 50px 0;
}
.buy img{
width: 100%
}
.buy .box_lead{
width: 1265px;
max-width: 90%;
margin: 0 auto;
padding-top: 100px;
position: relative;
}
.buy .box_lead img{
margin-bottom: 100px
}
.buy .box_lead .com{
width: 50%;
position: absolute;
left: 50%;
top:65%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
line-height: 240%;
letter-spacing: 0.1rem
}
.buy .box_lead .com p{
padding: 8% 0
}
.buy .box_lineup{
background-color:#FFFFBE;
padding: 200px 0;
}
.buy .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.buy .title_item .icon{
width: 5%;
}
.buy .title_item .text1{
width: 94%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
}
.buy .title_item .text1 .en{
display: inline-block;
padding-right: 3%;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.buy .box_lineup .flex_lineup{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 150px
}
.buy .box_lineup .flex_lineup .inner{
width: 45%;
margin-bottom: 50px;
}
.buy .box_lineup .flex_lineup .inner .photo{
padding-bottom: 30px;
}
.buy .box_lineup .flex_lineup .inner .text1{
font-size: clamp(1.2rem,1.6vw,2.2rem);
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text2{
font-size: clamp(1.2rem,1.2vw,1.6rem);
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text3{
font-size: clamp(1.2rem,1.7vw,2.3rem);
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text4{
font-size: clamp(1.2rem,1.5vw,1.8rem);
line-height: 200%
}
.buy .box_shop{
background-image: url("../images/buy/bg_shop.jpg");
background-repeat: no-repeat;
background-size: 100%;
padding-top: 15%;
padding-bottom: 10%
}
.buy .bunner{
width: 1265px;
max-width: 90%;
margin: 0 auto 80px auto;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-weight: 500;
padding-top: 150px
}
.buy .box_shop .flex_shop{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 150px;
width: 1265px;
max-width: 90%;
margin: 0 auto;
}
.buy .box_shop .flex_shop a{
width: 45%;
margin-bottom: 50px;
display: block;
font-size: clamp(1.2rem,1.7vw,2.3rem);
}
.buy .box_shop .flex_shop a i{
color: #49B281;
}
.buy .box_shop .flex_shop a .photo{
padding-bottom: 30px;
}
/*ここで食べられる-----------------------------------------*/
.eat{
padding: 50px 0;
}
.eat img{
width: 100%
}
.eat .box_lead{
width: 1265px;
max-width: 90%;
margin: 0 auto;
padding-top: 100px;
position: relative;
}
.eat .box_lead img{
margin-bottom: 100px
}
.eat .box_lead .com{
width: 50%;
position: absolute;
left: 50%;
top:65%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
line-height: 240%;
letter-spacing: 0.1rem
}
.eat .box_lead .com p{
padding: 8% 0
}
.eat .box_menu{
background-color:#FFFFBE;
padding: 200px 0;
}
.eat .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.eat .title_item .icon{
width: 5%;
}
.eat .title_item .text1{
width: 94%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
}
.eat .title_item .text1 .en{
display: inline-block;
padding-right: 3%;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.eat .box_menu .title_menu{
background-color: #49B281;
color: #FFF;
font-family: 'Noto Serif JP';
font-weight: 400;
font-size: clamp(1.3rem,1.7vw,2.5rem);
text-align: center;
padding: 10px 0;
border-radius: 25px;
margin-bottom: 50px
}
.eat .box_menu .flex_menu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 150px
}
.eat .box_menu .flex_menu .inner{
width: 45%;
margin-bottom: 100px;
}
.eat .box_menu .flex_menu .inner .photo{
padding: 0 10% 30px 10%;
}
.eat .box_menu .flex_menu .inner .photo2{
padding-top: 50px;
padding-bottom: 30px
}
.eat .box_menu .flex_menu .inner .text1{
font-size: clamp(1.2rem,1.6vw,2.2rem);
padding-bottom: 3%
}
.eat .box_menu .flex_menu .inner .text2{
font-size: clamp(1.2rem,1.2vw,1.6rem);
padding-bottom: 3%
}
.eat .box_menu .flex_menu .inner .text3{
font-size: clamp(1.2rem,1.7vw,2.3rem);
padding-bottom: 3%;
color: #49B281
}
.eat .box_menu .flex_menu .inner .text4{
font-size: clamp(1.2rem,1.5vw,1.8rem);
line-height: 200%
}
.eat .box_menu .flex_menu .inner a{
display: block;
font-size: clamp(1.2rem,1.2vw,1.6rem);
}
.eat .box_menu .flex_menu .inner a i{
font-size: clamp(1.2rem,1.6vw,2.2rem);
}
.eat .box_shop{
background-image: url("../images/eat/bg_shop.jpg");
background-repeat: no-repeat;
background-size: 100%;
padding-top: 15%;
padding-bottom: 10%
}
.eat .box_shop .flex_shop{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 150px;
width: 1265px;
max-width: 90%;
margin: 0 auto;
}
.eat .box_shop .flex_shop .inner{
width: 45%;
margin-bottom: 50px;
display: block;
font-size: clamp(1.2rem,1.7vw,2.3rem);
}
.eat .box_shop .flex_shop .inner .photo{
padding-bottom: 30px
}
.eat .box_shop .flex_shop .inner .text1{
font-size: clamp(1.2rem,1.6vw,2.2rem);
padding-bottom: 3%
}
.eat .box_shop .flex_shop .inner .text2{
font-size: clamp(1.2rem,1.2vw,1.6rem);
padding-bottom: 3%
}
.eat .box_shop .flex_shop .inner .text3{
font-size: clamp(1.2rem,1.7vw,2.3rem);
padding-bottom: 3%;
color: #49B281
}
.eat .box_shop .flex_shop .inner .text4{
font-size: clamp(1.2rem,1.5vw,1.8rem);
line-height: 200%
}
.eat .box_shop .flex_shop .inner a{
display: block;
font-size: clamp(1.2rem,1.2vw,1.6rem);
}
.eat .box_shop .flex_shop .inner a i{
font-size: clamp(1.2rem,1.6vw,2.2rem);
}
/*十石みそレシピ-----------------------------------------*/
.recipe{
padding: 50px 0;
}
.recipe img{
width: 100%
}
.recipe .box_lead{
width: 1265px;
max-width: 90%;
margin: 0 auto;
padding-top: 100px;
position: relative;
}
.recipe .box_lead img{
margin-bottom: 100px
}
.recipe .box_lead .com{
width: 50%;
position: absolute;
left: 50%;
top:65%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
line-height: 240%;
letter-spacing: 0.1rem
}
.recipe .box_lead .com p{
padding: 8% 0
}
.eat .box1{
padding: 200px 0;
}
.recipe .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .title_item .icon{
width: 5%;
}
.recipe .title_item .text1{
width: 94%;
font-size: clamp(1.2rem,1.5vw,2.0rem);
}
.recipe .title_item .text1 .en{
display: inline-block;
padding-right: 3%;
font-size: clamp(1.3rem,1.7vw,2.8rem);
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.recipe .box1 .flex_recipe{
width: 1265px;
max-width: 90%;
margin:100px auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .box1 .flex_recipe a{
display: block;
width: 45%;
margin-bottom: 100px;
}
.recipe .box1 .flex_recipe a img{
display: block;
margin-bottom: 30px
}
.recipe .box1 .flex_recipe a .com{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .box1 .flex_recipe a .com .photo2{
width: 33%;
}
.recipe .box1 .flex_recipe a .com .photo2 {
width: 33%;
}
.recipe .box1 .flex_recipe a .com .photo2 .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.recipe .box1 .flex_recipe a .com .photo2 .facephoto img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.recipe .box1 .flex_recipe a .com .data{
width: 65%
}
.recipe .box1 .flex_recipe a .com .data .name{
background-color: #4ab281;
color: #fff;
border-radius: 40px;
text-align: center;
padding: 15px 0;
font-size: clamp(1.2rem,1.5vw,2.0rem);
font-weight: 400;
width: 85%;
margin-bottom: 5%;
}
.recipe .box1 .flex_recipe a .com .date{
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight: 300;
letter-spacing: 0.4rem;
margin-bottom: 2%;
font-weight: 500;
}
.recipe .box1 .flex_recipe a .com .text1{
font-size: clamp(1.2rem,1.5vw,1.8rem);
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 500
}
/*レシピ個別ページ-----------------------------------------*/
.recipe .recipetitle{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 150px
}
.recipe .recipetitle .photo {
width: 22%;
}
.recipe .recipetitle .photo .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.recipe .recipetitle .photo img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.recipe .recipetitle .com{
width: 75%;
font-weight: 600;
padding-top: 2%
}
.recipe .recipetitle .com .subtitle_recipe{
display: inline-block;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: clamp(1.2rem,1.7vw,2.3rem);
padding: 1% 5%;
margin-right: 3%;
border-radius: 30px
}
.recipe .recipetitle .com .date{
display: inline-block;
color: #81512c;
font-weight: 500;
font-size: clamp(1.2rem,1.5vw,2.0rem);
}
.recipe .recipetitle .com .title_recipe{
font-size: clamp(1.3rem,1.8vw,3.0rem);
font-weight: 600;
padding-top: 5%;
padding-bottom: 3%
}
.recipe .recipetitle .com .name{
font-weight: 600;
font-size: clamp(1.2rem,1.7vw,2.2rem);
}
.recipe .flex_recipepoint{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 50px
}
.recipe .flex_recipepoint .photo{
width: 60%;
}
.recipe .flex_recipepoint .com{
width: 35%
}
.recipe .flex_recipepoint .com dt{
font-size: 2.2rem;
font-weight: 600;
color: #81512c;
padding-bottom: 20px;
}
.recipe .flex_recipepoint .com dd{
font-size: 2.0rem;
line-height: 200%;
margin-bottom: 50px;
margin-left: 0
}
.recipe .time{
padding-top: 30px;
font-size: 1.6rem;
font-weight: 600;
}
.recipe .time i{
color: #479DBC;
font-size: 2.0rem;
}
.recipe .box2{
padding: 100px 0
}
.recipe .flex_box2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .flex_box2 .left{
width: 13%;
}
.recipe .flex_box2 .right{
width: 82%;
}
.recipe .flex_box2 .flex_zairyo{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
} 
.recipe .flex_box2 .flex_zairyo .com{
border-bottom: #4ab281 1px solid;
border-top: #4ab281 1px solid;
padding: 30px 0;
width: 60%
}
.recipe .flex_box2 .flex_zairyo .com table{
width: 100%;
}
.recipe .flex_box2 .flex_zairyo .com td{
border-bottom: 1px #DDD dotted;
padding: 2% 0;
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(1){
width: 40%;
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(3){
width: 18%;
padding-left:2% 
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(2){
overflow: hidden;
}
.recipe .flex_box2 .flex_zairyo .photo{
width: 35%
}
.recipe .flex_box2 .flex_zairyo .photo .misoname{
font-size: clamp(1.2rem,1.7vw,2.3rem);
color: #81512c;
 font-weight: 600;
margin-bottom: 20px
}
.recipe .flex_box2 .flex_zairyo .photo .misoname2{
font-size: clamp(1.2rem,1.7vw,2.3rem);
font-weight: 500;
padding-top: 20px
}
.recipe .box3{
padding: 100px 0
}
.recipe .flex_box3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .flex_box3 .left{
width: 13%;
}
.recipe .flex_box3 .right{
width: 82%;
border-bottom: #4ab281 1px solid;
border-top: #4ab281 1px solid;
padding: 0 0 30px 0;
}
.recipe .flex_box3 .right ol{
padding-left: 20px
}
.recipe .flex_box3 .right ol li{
padding: 30px;
border-bottom: 1px #DDD dotted;
margin-left: 20px
}
.recipe .box4{
padding: 100px 0
}
.recipe .flex_box4{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .flex_box4 .left{
width: 13%;
}
.recipe .flex_box4 .right{
width: 82%;
border: #4ab281 1px solid;
padding:4%;
box-sizing: border-box
}
.recipe .flex_box4 .right .flex_sippitsu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recipe .flex_box4 .right .flex_sippitsu .photo_sippitsu{
width: 20%
}
.recipe .flex_box4 .right .flex_sippitsu .com{
width: 75%;
line-height: 200%
}
.recipe .flex_box4 .right .flex_sippitsu .com .name{
font-size: clamp(1.2rem,1.7vw,2.3rem);
font-weight: 600;
padding-bottom: 20px;
border-bottom: 1px #DDD dotted;
margin-bottom: 30px;
line-height: 200%
}
.recipe .flex_box4 .right .text1{
font-size: clamp(1.2rem,1.5vw,1.8rem);
padding-top: 50px;
padding-bottom: 20px;
border-bottom: #4ab281 1px solid;
font-weight: 600;
}
.recipe .flex_box4 .right a{
display: block;
padding: 20px 0;
border-bottom: 1px #DDD dotted;
}
/*お知らせ-----------------------------------------*/
.news{
padding: 50px 0;
}
.news img{
width: 100%
}
.news .flex_news{
width: 1265px;
max-width: 90%;
margin: 100px auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news .flex_news::after{
  content:"";
  display: block;
  width:28%;
}
.news .flex_news a{
display: block;
width: 28%;
margin-bottom: 100px;
}
.news .flex_news a img{
display: block;
margin-bottom: 30px;
width: 100%
}
.news .flex_news a .flex_cat{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 20px;
}
.news .flex_news a .cat{
width: 47%;
background-color: #81512c;
color: #FFF;
border-radius: 40px;
text-align: center;
padding: 2px 0;
font-size: clamp(1.2rem,1.5vw,2.0rem);
font-weight: 500;
}
.news .flex_news .date{
width: 50%;
font-size: clamp(1.2rem,1.5vw,2.2rem);
font-weight: 500;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.news .flex_news .text1{
font-size: clamp(1.3rem,1.7vw,2.3rem);
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
.news .detail_news{
width: 1100px;
max-width: 90%;
margin: 100px auto 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news .detail_news .article{
width: 70%;
}
.news .detail_news .title_news{
padding-bottom: 10px;
margin-bottom: 100px;
border-bottom: #4ab281 1px solid;
}

.category{
display: inline-block;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: clamp(1.2rem,1.7vw,2.3rem);
padding: 1% 5%;
margin-right: 3%;
border-radius: 30px
}
.news .detail_news .date{
display: inline-block;
color: #81512c;
font-weight: 500;
font-size: clamp(1.2rem,1.5vw,2.0rem);
}
.news .detail_news  .newstitle{
font-size: clamp(1.3rem,1.6vw,2.5rem);
font-weight: 600;
padding-top: 5%;
padding-bottom: 3%
}
.news .detail_news .com{
line-height: 200%
}
.news .detail_news .com .photo{
margin: 20px 0
}
.news .detail_news .aside{
width: 25%
}
.news .detail_news .aside h3{
color: #81512c;
}
.news .detail_news .aside h3 img{
width: 40px;
height: auto
}
.news .detail_news .aside li{
display: block;
margin-bottom: 20px;
}
.news .detail_news .aside li a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: clamp(1.2rem,1.5vw,2.0rem);
padding: 1% 0;
border-radius: 30px;
transition: 0.5s
}
.news .detail_news .aside li a:hover{
background-color: #5A3A0D
}
.news .termname{
border-bottom: #4ab281 1px solid;
color:#4ab281;
font-size: 2.5rem;
font-weight: 600;
padding-bottom: 3px;
width: 1265px;
max-width: 90%;
margin: 100px auto 0 auto;
}
/*お問い合わせ-----------------------------------------*/
.contact{
padding: 50px 0;
}
.contact img{
width: 100%
}
.contact .box1{
	width:1100px;
	max-width: 90%;
	margin-left:auto;
	margin-right:auto;
	font-size:1.8rem; 
    font-weight: 400;
	padding:20px 0 100px 0; 
    line-height: 180%
}
.contact .box1 .text_red{
color: #C00
}
.contact .box_form{
width:1100px;
	max-width: 90%;
	margin-left:auto;
	margin-right:auto;
}
.contact table{
width: 100%;
border-collapse: collapse;
border-bottom: #4ab281 1px solid;
}
.contact table tr{
border-top: #4ab281 1px solid;
}
.contact table td{
padding: 30px 0;
font-size: 1.6rem;
text-align: left
}
.contact table td:nth-child(1){
width: 20%;
text-align: left!important
}

.contact table textarea {
width: 80%;
height: 10em;
background-color: #EEE;
border: none
    
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width:50%;
	background-color: #EEE;
	height: 20px;
    height: 35px;
    border: none
}
.contact table input[type="number"]{
	width:10%;
	height: 20px;
}
.contact table input[type="email"]{
	width:50%;
	background-color: #EEE;
	height: 20px;
    height: 35px;
    border: none
}
.contact .chieck{
text-align: center;
}
.contact .chieck a{
color: #4ab281
}
.contact .chieck a:hover{
text-decoration: underline
}
.contact input[type="submit"]{
	width:280px;
	border-radius: 25px;
    border: none;
	background-color:#81512c;
	text-align:center;
	font-size:16px;
	color:#FFF;;
	padding:15px 0;
	margin-top:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
}
.contact input[type="submit"]:hover{
	background-color:#4284c0;
}
.response{
text-align: center;
font-size: 2.0rem;
font-weight: 600;
color: #4ab281;
padding: 30px 0
}
.screen-reader-response{
text-align: center;
font-size: 2.0rem;
font-weight: 600;
color: #4ab281;
}
.hissu{
color: #C00;
display: inline-block;
border: #C00 1px solid;
padding: 0 5px;
margin-left: 2%
}
#wpcf7-f189-p157-o1-ve-your-name{
display: none
}
#wpcf7-f189-p157-o1-ve-furigana{
display: none
}
#wpcf7-f189-p157-o1-ve-your-email{
display: none
}
#wpcf7-f189-p157-o1-ve-your-message{
display: none
}
.wpcf7-not-valid-tip{
display: none;
width: 1px
}
/*個人情報-----------------------------------------*/
.privacy{
padding: 100px 0 0 0;
font-family: 'Noto Serif JP';
width: 1000px;
max-width: 90%;
margin: 0 auto
}

.privacy dl{
margin-bottom: 100px;
border: #666 1px solid;
padding: 2%
}
.privacy dt{
font-size: 1.8rem;
font-weight: 600;
margin: 30px 0;
position: relative;
}
.privacy dd{
margin-left: 0;
font-size: 1.6rem;
margin-bottom: 50px;
padding-bottom: 2px;
border-bottom: #666 1px dashed;
}


}
/*===============================================
●スマホれいあうと設定 画面の横幅が650px以下
===============================================*/
@media screen and  (max-width: 650px){
.subtitle{
width: 85%;
margin: 0 auto 50px auto;
}
.subtitle .com{
padding-bottom: 20px
}
.subtitle .com .flex_title{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 20px
}
.subtitle .com .flex_title .icon{
width: 20%;
}
.subtitle .com .flex_title .text1{
color: #81512c;
font-size:2.0rem;
width: 78%;
font-family: 'Noto Serif JP';
letter-spacing: 0.5rem;
padding-top: 5px;
font-weight: 500
}
.subtitle .com .text2{
font-size: 2.8rem;
padding-bottom: 30px;
font-weight: 600;
font-family: 'Noto Serif JP';
letter-spacing: 0.6rem
}
.subtitle .com .text3{
font-size: 1.8rem;
line-height: 250%;
letter-spacing: 0.2rem
}
.subtitle .photo{
}
/*メイン画像ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.index{
position: relative;
font-family: 'Noto Sans JP';
}

.index .main{
margin: 0;
padding: 0;
}
.index .main img{
width: 100%
}
.index .box_lead{
margin: 0;
padding: 10px 0 30px 0;
background-color: #3eae78
}
.index .box_lead .com{
width: 85%;
margin: 0 auto;
color: #FFF;
line-height: 250%;
font-size: 1.7rem;
font-weight: 400;
}
.index .box_lead .com p{
margin-bottom: 4%
}
.index .box_lead .com .bt{
width: 70%;
max-width: 100%;
margin: 50px auto 0 auto
}
.index .box_lead .com .bt a{
display: block;
background-color: #FFF;
color: #81512c;
text-align: center;
padding: 5px 0;
font-size: 1.6rem;
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box_lead .com .bt a:hover{
background-color:#f1dfd1 
}
.index .box1{
margin: 0;
padding: 0
}
.index .box1 img{
width: 100%
}
.index .box2{
background-color: #FFF;
padding-bottom: 50px
}
.index .box2 img{
width: 100%
}
.index .box2 .bunner{
width: 85%;
margin: 0 auto 80px auto;
font-size: 1.8rem;
font-weight: 500
}
.index .box2 .bunner a{
display: block;
margin-bottom: 15px;
}
.index .box2 .flex_shop{
width: 85%;
margin: 0 auto 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box2 .flex_shop a{
display: block;
width: 100%;
margin-bottom: 30px;
font-size: 2.0rem;
font-weight: 500
}
.index .box2 .flex_shop a img{
display: block;
margin-bottom: 10px
}
.index .box2 .bt{
width: 70%;
max-width: 100%;
margin: 50px auto 0 auto
}
.index .box2 .bt a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
padding: 5px 0;
font-size: 1.6rem;
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}

.index .box3{
background-color: #fefac4;
}
.index .box3 img{
width: 100%
}
.index .box3 .img_box3{
margin-bottom: 70px
}
.index .box3 .flex_shop{
width: 85%;
margin: 0 auto 50px auto;
}
.index .box3 .flex_shop a{
display: block;
margin-bottom: 50px;
font-size: 2.0rem;
font-weight: 500
}
.index .box3 .flex_shop a img{
display: block;
margin-bottom: 10px
}
.index .box3 .bt{
width: 70%;
max-width: 100%;
margin: 50px auto 0 auto
}
.index .box3 .bt a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
padding: 5px 0;
font-size: 1.6rem;
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box4{
background-color: #4ab281;
padding-top: 100px;
color: #FFF!important
}
.index .box4 img{
width: 100%
}
.index .box4 .subtitle .com .flex_title .text1{
color: #FFF;
}
.index .box4 .flex_recipe{
width: 85%;
margin: 0 auto 50px auto;
}
.index .box4 .flex_recipe a{
display: block;
margin-bottom: 100px;
color: #FFF;
}
.index .box4 .flex_recipe a img{
display: block;
margin-bottom: 30px
}
.index .box4 .flex_recipe a .com{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.index .box4 .flex_recipe a .com .photo2{
width: 60%;
margin: 0 auto 20px auto
}

.index .box4 .flex_recipe a .com .photo2 .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.index .box4 .flex_recipe a .com .photo2 .facephoto img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.index .box4 .flex_recipe a .com .data{
width: 90%;
margin: 0 auto
}
.index .box4 .flex_recipe a .com .data .name{
border: #FFF 1px solid;
border-radius: 40px;
text-align: center;
padding: 10px 0;
font-size:1.6rem;
font-weight: 400;
margin-bottom: 5%;
}
.index .box4 .flex_recipe a .com .date{
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.index .box4 .flex_recipe a .com .text1{
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
.index .box4 .bt{
width: 70%;
max-width: 100%;
margin: 50px auto 0 auto
}
.index .box4 .bt a{
display: block;
background-color: #FFF;
color: #81512c;
text-align: center;
padding: 5px 0;
font-size: 1.6rem;
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box4 .bt a:hover{
background-color:#f1dfd1 
}
.index .box5{
background-color: #FFF;
padding-top: 100px;
}
.index .box5 img{
width: 100%
}
.index .box5 .flex_news{
width: 85%;
margin: -50px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.index .box5 .flex_news a{
display: block;
width: 45%;
margin-bottom: 50px;
}
.index .box5 .flex_news a img{
display: block;
margin-bottom: 20px;
width: 100%
}
.index .box5 .flex_news a .flex_cat{

}
.index .box5 .flex_news a .cat{
border: #81512c 1px solid;
color: #81512c;
border-radius: 40px;
text-align: center;
padding: 0 0;
font-size: 1.4rem;
font-weight: 300;
margin: 0 auto
}
.index .box5 .flex_news .date{
font-size: 1.4rem;
font-weight: 400;
letter-spacing: 0.4rem;
margin-bottom: 2%;;
text-align: center
}
.index .box5 .flex_news .text1{
font-size: 1.4rem;
font-weight: 500;
line-height: 160%;
font-weight: 400
}
.index .box5 .bt{
width: 70%;
max-width: 100%;
margin: 0 auto 0 auto
}
.index .box5 .bt a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
padding: 5px 0;
font-size: 1.6rem;
font-weight:500;
transition: 0.5s;
border-radius: 45px;
letter-spacing: 0.3rem
}
.index .box5 .slider img{
display: block;
margin-right: 4%
}
.box_slider{
background-image: url("../images/index/bg_slider.png");
background-repeat: repeat-x;
padding-top: 100px
}
.slider {
    display: flex;
    overflow: hidden;
}

.slider-list {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    animation: slideShow 40s infinite linear;
    list-style: none;
}

.slider-item {
    width: 350px;
    height: auto;
    margin-right: 20PX
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 0.5rem;
}


@keyframes slideShow {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }

}
.document{
width: 90%;
margin: 0 auto;
}
/*十石みそとは-----------------------------------------*/
.about{
padding: 0 0 50px 0;
}
.about img{
width: 100%
}
.about .text_catch img {
display: block;
width: 40%;
margin: 0 auto;
}
.about .subtitle{
padding-bottom: 50px;
width: 100%;
margin: 0 auto 150px auto;
}
.about .subtitle .com{

}
.about .subtitle .photo{

}
.about .box_lead{
width: 85%;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
.about .box_lead img{
margin-bottom: 50px
}
.about .box_lead .com{
font-size: 1.8rem;
line-height: 200%;
padding-bottom: 50px
}
.about .box_lead .com p{
padding: 2% 0
}
.about .box2{
background-color: #4ab281;
background-image: url("../images/about/cg3-sp.jpg");
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
color: #FFF
}
.about .box2 .subtitle{
color: #FFF!important;
padding-top: 25%;
padding-bottom: 200px;
width: 85%;
margin: 0 auto
}
.about .box2 .box_point{
border: #FFFFBE 2px solid;
border-radius: 20px;
width: 90%;
margin: 0 auto 20px auto
}
.about .box2 .box_point .title_point{
width: 90%;
margin:-35% auto 5% auto;
}
.about .box2 .box_point .title_point img{
width: 100%
}
.about .box2 .box_point .flex_point{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
margin: 0 auto 7% auto
}
.about .box2 .box_point .flex_point .photo{

}
.about .box2 .box_point .flex_point .com{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: 4.5vw;
font-family: 'Noto Serif JP';
line-height: 230%;
font-weight: 400;
padding: 10% 0
}
.about .box2 .box_point .flex_point2{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 85%;
margin: 0 auto 7% auto
}
.about .box2 .box_point .flex_point2 .photo{

}
.about .box2 .box_point .flex_point2 .com{
font-size: 1.6rem;
line-height: 250%;
padding-bottom: 20px
}
.about .box2 .image_bottom{
padding-top: 17%
}
.about .box2 .sashie{
margin-bottom: 35%
}
.about .box3{
background-color: #FFF;
padding-top: 50px;

}
.about .box3 .subtitle .com .flex_title .text1{
color: #81512c;
}
.about .box3 .subtitle{
margin-bottom: 0
}
.about .box3 .flex_secret{
padding-bottom: 100px
}
.about .box3 .com{
width: 90%;
margin: 0 auto 20px auto;
font-size: 1.6rem;;
line-height: 240%;
letter-spacing: 0.1rem
}
.about .box3 .com .title_secret{
width: 70%;
margin: 0 auto;
padding-bottom: 20px
}
.about .box3 .com .subtitle_secret{
font-size: 2.0rem;
font-family: 'Noto Serif JP';
line-height: 200%;
color: #81512c;
padding-bottom: 25px;
font-weight: 600
}
.about .box3 .flex_secret .photo{
width: 80%;
margin: 0 auto
}
.about .box3 .flex_secret2{
padding-bottom: 100px
}
.about .box3 .flex_secret2 .photo{
width: 80%;
margin: 0 auto
}
/*ここで買える-----------------------------------------*/
.buy{
padding: 0 0 50px 0;
}
.buy img{
width: 100%
}
.buy .text_catch {
margin: -150px 0
}
.buy .box_lead{
width: 90%;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
.buy .box_lead img{
margin-bottom: 50px
}
.buy .box_lead .com{
font-size: 1.8rem;
line-height: 200%;
padding-bottom: 50px
}
.buy .box_lead .com p{
padding: 2% 0
}
.buy .box_lineup{
background-color:#FFFFBE;
padding: 100px 0 50px 0;
}
.buy .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.buy .title_item .icon{
width: 15%;
}
.buy .title_item .text1{
width: 82%;
font-size: 1.6rem;
}
.buy .title_item .text1 .en{
display: block;
padding-right: 3%;
padding-bottom: 20px;
font-size: 3.0rem;
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.buy .box_lineup .flex_lineup{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
width: 90%;
margin: 0 auto;
}
.buy .box_lineup .flex_lineup .inner{
margin-bottom: 100px;
}
.buy .box_lineup .flex_lineup .inner .photo{
padding-bottom: 30px;
}
.buy .box_lineup .flex_lineup .inner .text1{
font-size: 2.2rem;
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text2{
font-size: 1.6rem;
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text3{
font-size: 2.0rem;
padding-bottom: 3%
}
.buy .box_lineup .flex_lineup .inner .text4{
font-size: 2.0rem;
line-height: 200%
}
.buy .box_shop{
padding-top: 15%;
padding-bottom: 10%
}

.buy .bunner{
width: 90%;
margin: 0 auto 80px auto;
font-size: 2.5rem;
font-weight: 400;
padding-top: 20px
}
.buy .box_shop .flex_shop{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 50px;
width:  90%;
margin: 0 auto;
}
.buy .box_shop .flex_shop a{
margin-bottom: 50px;
display: block;
font-size: 2.5rem;
}
.buy .box_shop .flex_shop a i{
color: #49B281;
}
.buy .box_shop .flex_shop a .photo{
padding-bottom: 15px;
}
/*ここで食べられる-----------------------------------------*/
.eat{
padding: 0 0 50px 0;
}
.eat img{
width: 100%
}
.eat .text_catch {
margin: -150px 0
}
.eat .box_lead{
width: 90%;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
.eat .box_lead img{
margin-bottom: 50px
}
.eat .box_lead .com{
font-size: 1.8rem;
line-height: 200%;
padding-bottom: 50px
}
.eat .box_lead .com p{
padding: 2% 0
}
.eat .box_menu{
background-color:#FFFFBE;
padding: 100px 0 0 0;
}
.eat .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.eat .title_item .icon{
width: 15%;
}
.eat .title_item .text1{
width: 82%;
font-size: 1.6rem;
}
.eat .title_item .text1 .en{
display: block;
padding-right: 3%;
padding-bottom: 20px;
font-size: 3.0rem;
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.eat .box_menu .flex_menu{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
width: 90%;
margin: 0 auto;
}
.eat .box_menu .flex_menu .inner{
margin-bottom: 100px;
}
.eat .box_menu .title_menu{
background-color: #49B281;
color: #FFF;
font-family: 'Noto Serif JP';
font-weight: 500;
font-size: 2.2rem;
text-align: center;
padding: 10px 0;
border-radius: 25px;
margin-bottom: 50px
}
.eat .box_menu .flex_menu .inner .photo{
padding: 0 10% 30px 10%;
}
.eat .box_menu .flex_menu .inner .photo2{
padding-top: 50px;
padding-bottom: 30px
}
.eat .box_menu .flex_menu .inner .text1{
font-size: 2.2rem;
padding-bottom: 3%
}
.eat .box_menu .flex_menu .inner .text2{
font-size: clamp(1.2rem,1.2vw,1.6rem);
padding-bottom: 3%
}
.eat .box_menu .flex_menu .inner .text3{
font-size: 2.3rem;
padding-bottom: 3%;
color: #49B281
}
.eat .box_menu .flex_menu .inner .text4{
font-size: 1.8rem;
line-height: 200%
}
.eat .box_menu .flex_menu .inner a{
display: block;
font-size: 1.6rem;
}
.eat .box_menu .flex_menu .inner a i{
font-size: 2.2rem;
}
.eat .box_shop{
background-image: url("../images/eat/bg_shop-sp.png");
background-repeat: no-repeat;
background-size: 100%;
padding-top: 40%;
padding-bottom: 10%
}
.eat .box_shop .flex_shop{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 50px;
width: 90%;
margin: 0 auto;
}
.eat .box_shop .flex_shop .inner{
margin-bottom: 50px;
display: block;
font-size: 2.3rem;
}
.eat .box_shop .flex_shop .inner .photo{
padding-bottom: 10px
}
.eat .box_shop .flex_shop .inner .text1{
font-size: 2.2rem;
padding-bottom: 3%
}
.eat .box_shop .flex_shop .inner .text2{
font-size: 1.6rem;
padding-bottom: 3%
}
.eat .box_shop .flex_shop .inner .text3{
font-size: 2.3rem;
padding-bottom: 3%;
color: #49B281
}
.eat .box_shop .flex_shop .inner .text4{
font-size: 1.8rem;
line-height: 200%
}
.eat .box_shop .flex_shop .inner a{
display: block;
font-size: 1.6rem;
}
.eat .box_shop .flex_shop .inner a i{
font-size: 2.2rem;
}
/*十石みそレシピ-----------------------------------------*/
.recipe{
padding: 0 0 50px 0;
}
.recipe img{
width: 100%
}
.recipe .text_catch {
margin: -120px 0
}
.recipe .box_lead{
width: 90%;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
.recipe .box_lead img{
margin-bottom: 50px
}
.recipe .box_lead .com{
font-size: 1.8rem;
line-height: 200%;
padding-bottom: 50px
}
.recipe .box_lead .com p{
padding: 2% 0
}
.recipe .box1{
padding: 50px 0;
}
.recipe .title_item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
.recipe .title_item .icon{
width: 15%;
}
.recipe .title_item .text1{
width: 82%;
font-size: 1.6rem;
}
.recipe .title_item .text1 .en{
display: block;
padding-right: 3%;
padding-bottom: 20px;
font-size: 3.0rem;
font-family: 'Noto Serif JP';
font-weight: 500;
letter-spacing: 0.3rem
}
.recipe .box1 .flex_recipe{
width: 90%;
margin:100px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .box1 .flex_recipe a{
display: block;
margin-bottom: 100px;
}
.recipe .box1 .flex_recipe a img{
display: block;
margin-bottom: 30px
}
.recipe .box1 .flex_recipe a .com{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .box1 .flex_recipe a .com .photo2{
width: 60%;
margin: 0 auto 20px auto
}

.recipe .box1 .flex_recipe a .com .photo2 .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.recipe .box1 .flex_recipe a .com .photo2 .facephoto img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.recipe .box1 .flex_recipe a .com .data{
width: 90%;
margin: 0 auto
}
.recipe .box1 .flex_recipe a .com .data .name{
background-color:  #49B281;
color: #FFF;
border-radius: 40px;
text-align: center;
padding: 10px 0;
font-size:1.6rem;
font-weight: 400;
margin-bottom: 5%;
}
.recipe .box1 .flex_recipe a .com .date{
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.recipe .box1 .flex_recipe a .com .text1{
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
/*レシピ個別ページ-----------------------------------------*/
.recipe .recipetitle{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px
}
.recipe .recipetitle .photo {
width: 50%;
margin: 0 auto
}
.recipe .recipetitle .photo .facephoto{
width: 100%;
padding-top: 100%;
overflow: hidden;
border-radius: 50%;
position: relative
}
.recipe .recipetitle .photo img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)
}
.recipe .recipetitle .com{
padding-top: 20px;
font-weight: 600;
}
.recipe .recipetitle .com .subtitle_recipe{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: 2.0rem;
padding: 4% 5%;
margin-right: 3%;
border-radius: 30px
}
.recipe .recipetitle .com .date{
display: block;
color: #81512c;
font-weight: 500;
font-size: 2.0rem;
}
.recipe .recipetitle .com .title_recipe{
font-size: 2.5rem;
font-weight: 600;
padding-top: 5%;
padding-bottom: 3%
}
.recipe .recipetitle .com .name{
font-weight: 600;
font-size: 2.0rem;
}
.recipe .flex_recipepoint{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px
}
.recipe .flex_recipepoint .photo{
padding-bottom: 40px
}
.recipe .flex_recipepoint .com{
}
.recipe .flex_recipepoint .com dt{
font-size: 2.2rem;
font-weight: 600;
color: #81512c;
padding-bottom: 20px;
}
.recipe .flex_recipepoint .com dd{
font-size: 2.0rem;
line-height: 200%;
margin-bottom: 50px;
margin-left: 0
}
.recipe .time{
font-size: 2.0rem;
font-weight: 600;
}
.recipe .time i{
color: #479DBC;
font-size: 2.5rem;
}
.recipe .box2{
padding: 50px 0 25px 0
}
.recipe .flex_box2{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .flex_box2 .left{
display: none
}
.recipe .flex_box2 .right{

}
.recipe .flex_box2 .flex_zairyo{
display: flex;
flex-wrap: wrap;
justify-content: center;
} 
.recipe .flex_box2 .flex_zairyo .com{
border-bottom: #4ab281 1px solid;
border-top: #4ab281 1px solid;
padding: 30px 0;
width: 100%

}
.recipe .flex_box2 .flex_zairyo .com img{
display: block;
width: 35%;
margin: 0 auto 20px auto
}
.recipe .flex_box2 .flex_zairyo .com table{
width: 100%;
font-size: 1.6rem
}
.recipe .flex_box2 .flex_zairyo .com td{
border-bottom: 1px #999 dotted;
padding: 2% 0;
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(1){
width: 65%;
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(3){
text-align: right
}
.recipe .flex_box2 .flex_zairyo .com td:nth-child(2){
display: none
}
.recipe .flex_box2 .flex_zairyo .photo{
width: 65%;
margin: 0 auto;
padding-bottom: 50px
}
.recipe .flex_box2 .flex_zairyo .photo .misoname{
font-size: 2.1rem;
color: #81512c;
 font-weight: 600;
margin-bottom: 20px
}
.recipe .flex_box2 .flex_zairyo .photo .misoname2{
font-size: 2.1rem;
font-weight: 500;
padding-top: 20px
}
.recipe .box3{
padding: 50px 0 25px 0
}
.recipe .flex_box3{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .flex_box3 .left{
width: 35%;
margin: 0 auto;
margin-bottom: 30px
}
.recipe .flex_box3 .right{
border-bottom: #4ab281 1px solid;
border-top: #4ab281 1px solid;
padding: 0 0 30px 0;
}
.recipe .flex_box3 .right ol{
padding-left: 20px
}
.recipe .flex_box3 .right ol li{
padding: 30px;
border-bottom: 1px #DDD dotted;
margin-left: 20px;
font-size: 1.8rem
}
.recipe .box4{
padding: 50px 0
}
.recipe .flex_box4{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .flex_box4 .left{
width: 35%;
margin: 0 auto;
margin-bottom: 30px
}
.recipe .flex_box4 .right{
border: #4ab281 1px solid;
padding:4%;
box-sizing: border-box
}
.recipe .flex_box4 .right .flex_sippitsu{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.recipe .flex_box4 .right .flex_sippitsu .photo_sippitsu{
width: 45%;
margin: 0 auto;
margin-bottom:20px
}
.recipe .flex_box4 .right .flex_sippitsu .com{
line-height: 200%
}
.recipe .flex_box4 .right .flex_sippitsu .com .name{
font-size: 2.3rem;
font-weight: 600;
padding-bottom: 20px;
border-bottom: 1px #DDD dotted;
margin-bottom: 30px;
line-height: 200%
}
.recipe .flex_box4 .right .text1{
font-size: 1.8rem;
padding-top: 50px;
padding-bottom: 20px;
border-bottom: #4ab281 1px solid;
font-weight: 600;
}
.recipe .flex_box4 .right a{
display: block;
padding: 20px 0;
border-bottom: 1px #DDD dotted;
font-size: 1.8rem
}
/*お知らせ-----------------------------------------*/
.news{
padding: 0;
}
.news img{
width: 100%
}
.news .flex_news{
width: 90%;
margin: 50px auto 50px auto;
display: flex;
flex-wrap: wrap;
justify-content:  space-between;
}

.news .flex_news a{
display: block;
width: 45%;
margin-bottom: 100px;
}
.news .flex_news a img{
display: block;
margin-bottom: 30px;
width: 100%
}
.news .flex_news a .flex_cat{
padding-bottom: 20px;
}
.news .flex_news a .cat{
background-color: #81512c;
color: #FFF;
border-radius: 40px;
text-align: center;
padding: 2px 0;
font-size:1.6rem;
font-weight: 500;
}
.news .flex_news .date{
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.4rem;
margin-bottom: 2%;
}
.news .flex_news .text1{
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.2rem;
line-height: 180%;
font-weight: 400
}
.news .detail_news{
width: 90%;
margin: 30px auto 50px auto;
}
.news .detail_news .article{
margin-bottom: 100px
}
.news .detail_news .title_news{
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: #4ab281 1px solid;
}

.category{
display: block;
width: 70%;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: 1.8rem;
padding: 1% 5%;
margin-right: 3%;
border-radius: 30px
}
.news .detail_news .date{
display: inline-block;
color: #81512c;
font-weight: 500;
font-size: 1.4rem;
}
.news .detail_news  .newstitle{
font-size: 2.0rem;
font-weight: 600;
padding-top: 5%;
padding-bottom: 3%
}
.news .detail_news .com{
line-height: 200%
}
.news .detail_news .com .photo{
margin: 20px 0;
}
.news .detail_news .aside{

}
.news .detail_news .aside h3{
color: #81512c;
}
.news .detail_news .aside h3 img{
width: 40px;
height: auto
}
.news .detail_news .aside li{
display: block;
width: 80%;
margin:0 auto 20px auto;
}
.news .detail_news .aside li a{
display: block;
background-color: #81512c;
color: #FFF;
text-align: center;
font-size: 2.0rem;
padding: 1% 0;
border-radius: 30px;
transition: 0.5s
}
.news .detail_news .aside li a:hover{
background-color: #5A3A0D
}
.news .termname{
border-bottom: #4ab281 1px solid;
color:#4ab281;
font-size: 2.5rem;
font-weight: 600;
padding-bottom: 3px;
width: 1265px;
max-width: 90%;
margin: 20px auto 0 auto;
}
/*お問い合わせ-----------------------------------------*/
.contact{
padding: 0 0 50px 0;
}
.contact img{
width: 100%
}
.contact .box1{
	width:1100px;
	max-width: 90%;
	margin-left:auto;
	margin-right:auto;
	font-size:1.8rem; 
    font-weight: 400;
	padding:20px 0 100px 0; 
    line-height: 180%
}
.contact .box1 .text_red{
color: #C00
}
.contact .box_form{
width:1100px;
	max-width: 90%;
	margin-left:auto;
	margin-right:auto;
}
.contact table{
width: 100%;
border-collapse: collapse;
border-bottom: #4ab281 1px solid;
}
.contact table tr{
border-top: #4ab281 1px solid;
}
.contact table td{
padding:0%;
font-size: 1.8rem;
text-align: left;
display: block
}
.contact table td:nth-child(1){
text-align: left!important;
font-weight: 500;
line-height: 100%;
}

.contact table textarea {
width: 90%;
height: 10em;
background-color: #EEE;
border: none
    
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width: 90%;
	background-color: #EEE;
	height: 20px;
    height: 35px;
    border: none
}
.contact table input[type="number"]{
	width:10%;
	height: 20px;
}
.contact table input[type="email"]{
	width: 90%;
	background-color: #EEE;
	height: 20px;
    height: 35px;
    border: none
}
.contact .chieck{
text-align: center;
}
.contact .chieck a{
color: #4ab281
}
.contact .chieck a:hover{
text-decoration: underline
}
.contact input[type="submit"]{
	width:70%;
	border-radius: 25px;
    border: none;
	background-color:#81512c;
	text-align:center;
	font-size:16px;
	color:#FFF;;
	padding:15px 0;
	margin-top:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
}
.contact input[type="submit"]:hover{
	background-color:#4284c0;
}
.response{
text-align: center;
font-size: 2.0rem;
font-weight: 600;
color: #4ab281;
padding: 30px 0
}
.hissu{
color: #C00;
display: inline-block;
border: #C00 1px solid;
padding: 0 5px;
margin-left: 2%
}
#wpcf7-f189-p157-o1-ve-your-name{
display: none
}
#wpcf7-f189-p157-o1-ve-furigana{
display: none
}
#wpcf7-f189-p157-o1-ve-your-email{
display: none
}
#wpcf7-f189-p157-o1-ve-your-message{
display: none
}
/*個人情報-----------------------------------------*/
.privacy{
padding: 100px 0 0 0;
font-family: 'Noto Serif JP';
width: 1000px;
max-width: 90%;
margin: 0 auto
}

.privacy dl{
margin-bottom: 100px;
border: #666 1px solid;
padding: 2%
}
.privacy dt{
font-size: 1.8rem;
font-weight: 600;
margin: 30px 0;
position: relative;
}
.privacy dd{
margin-left: 0;
font-size: 1.6rem;
margin-bottom: 50px;
padding-bottom: 2px;
border-bottom: #666 1px dashed
}


}
/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}