*{
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
}
.font-mincho{
    font-family: source-han-serif-japanese, serif;
    font-weight: 400;
}
.font-bold{
    font-weight: 700;
}

p{line-height: 1.7em;}
a:hover{color: #8cbe3c;}

html {
    scroll-behavior: smooth;
}
/*
*,*:before,*:after {
    outline: 2px solid red!important;
}
*/
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    opacity: 0.8;
/*
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
*/
    z-index: 9999;
}


/*-------- フェードイン ---------*/
/* 下から上に移動しながらフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translate(0,100px);
}
/* 上から下に移動しながらフェードイン */
.fadeInDown {
    opacity: 0;
    transform: translate(0,-100px);
}
/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform:  translate(-100px, 0);
}
/* 左から右に移動しながらフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translate(100px,0);
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}


header{
    max-width: 950px;
    margin: 0 auto;
    padding: 35px 0 ;
}
header h1{
    max-width:600px;
    margin: 0 auto 20px;
}

navi.pc{
    max-width: 950px;
    height: auto;
    margin: 30px auto 0;
}
navi ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}
navi li{
    display: inline-block;
}
navi li a{
    text-decoration: none;
    color: #000;
}
navi.pc a:hover{
    color: #8cbe3c;
}

.top-img{
    position: relative;
}
.top-img .logo-kome{
    position: absolute;
    z-index: 200;
    width: 220px;
    height: auto;
    bottom: -67px;
    left: 50%;
    transform: translateX(-50%);
}

/* slide */
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
    z-index: 100;
    position: relative;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-slide {
  transition: all ease-in-out .5s;
  opacity: 1;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}



section{
    margin: 50px auto;
    max-width: 900px;
    height: auto;
}
section#content1,
section#content2{margin-top: 75px;}

section#content1 h2,
section#content2 h2,
section#daikimai h2{text-align: center;}
section#content1 p,
section#content2 p,
section#daikimai p{
    margin: 30px auto 50px;
    text-align: center;
}
section#content1 .photo-line{
    margin-bottom: 50px;
    width: 100%;
}
section#content2 .text-box{
    width: 100%;
    padding: 20px 0;
    margin: 50px auto 100px;
    text-align: center;
    border: 1px solid #333;
    font-size: 1.2em;
}
section#content2 .text-box span{
    font-size: 1.4em;
    vertical-align: -2px;
}
section#content2 .box3{
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: top;
    position: relative;
}
section#content2 .box3 .box3-item{
    width: calc(100% / 3 - 50px);
    margin: 0;
    border: 1px solid #333;
    z-index: 100;
    position: relative;
}
section#content2 .box3 .box3-item h3{
    text-align: center;
    font-size: 1.2em;
    padding: 25px 0;
}
section#content2 .box3 .box3-item h3.colum1{background-color: #cecece;}
section#content2 .box3 .box3-item h3.colum2{background-color: #f9d953;}
section#content2 .box3 .box3-item h3.colum3{background-color: #a6d344;}
section#content2 .box3 .box3-item p{padding: 0 15px;text-align:left;margin: 15px 0;}
section#content2 .box3 .box3-item .arrow{
    width: 50px;
    height: auto;
    position: absolute;
    top: 35%;
    right: -65px;
}
section#content2 .box3 .box3-item .komemark{
    width: 85px;
    height: auto;
    position: absolute;
    top: -30px;
    left: -30px;
    z-index: 200;
}
.daikimaiImg{margin-top: -100px;}

section#daikimai{
    
}
section#daikimai img.daiki-lineImg{margin: 0 0 35px;}

.price{
    margin: 50px 0;
    padding: 30px 0;
    background-image: url("../images/kome/bg-img_price.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.price .box{
    max-width: 600px;
    margin: 50px auto;
    background-color: #FFFFFF;
    padding: 15px 50px;
    border: 1px solid #333;
}
.price .box h3{
    margin: 15px auto;
    text-align: center;
    font-size: 1.5em;
} 
.price .box p{
    text-align: left;
    margin-bottom: 15px;
}

#kome{padding-bottom: 70px;}
#kome h2{
    max-width: 750px;
    text-align: center;padding: 10px 0; 
    margin: 0 auto 30px; 
    border-bottom: 2px solid #333;
    font-weight: bold;
}
#kome .sake-list{
    max-width: 750px;
    margin: auto;
    margin-bottom: 50px;
}
#kome .sake-list h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
    display: inline-block;
    vertical-align: -3px;
}
#kome .sake-list .mark-munosyaku,
#kome .sake-list .mark-tokusai{
    font-size: 0.9em;
    padding: 3px 25px;
    border-radius: 35px;
    color: #fff;
    display: inline;
    /* line-height: 7px; */
    margin: 0 3px;
}
#kome .sake-list .mark-munosyaku{
    background-color: #ff5c00;
}
#kome .sake-list .mark-munosyaku::after{
    content: "無農薬";
}
#kome .sake-list .mark-tokusai{
    background-color: #7db900;
}
#kome .sake-list .mark-tokusai::after{
    content: "特別栽培";
}

#kome .sake-list .photo{margin: 25px auto;}
#kome .calendar{
    width: 100%;
    margin: 50px auto;
    padding: 45px 30px;
    background-color: #f4e9bd;
}
#kome .calendar div{
    margin-bottom: 15px;
    font-size: 1.7em;
    display: inline-block;
}
#kome .calendar span{
    font-size: 0.6em;
    padding-left: 10px;
    vertical-align: 3px;
}

#order{
    width: 100%;
    padding: 50px 0 100px;
    background-color:#efd66a ;
}
#order h2{
    max-width: 270px;
    margin: -108px auto 0;
    text-align: center;
}
#order h2 img{display: block;}
#order img.QRcode{
    display: block;
    max-width: 150px;
    margin: 30px auto;
}
#order h4,
#order p{
    text-align: center;
}
#order h4 span{font-size: 1.2em;font-weight: bold;}
#order .komesyurui{
    max-width: 800px;
    margin: 25px auto;
    border-radius: 20px;
    background-color: #FFFFFF;
    padding: 25px 25px;
}
#order .komesyurui p.text-title{margin-top: 20px;font-size: 1.1em;}
#order .komesyurui p span{
    font-size: 1.2em;
}
#order .komesyurui .komesyurui-box{
    max-width: 580px;
    margin: 25px auto;
    display: flex;
}
#order .komesyurui .komesyurui-box .komesyurui-text{
    padding-left: 20px;
}
#order .komesyurui .komesyurui-box .komesyurui-text h3{
    color: #fff;
    background-color: #000;
    padding: 3px 10px;
    border-radius: 25px;
    text-align: center;
    width: 100px;
    font-size: 1.1em;
    margin-bottom: 10px;
    margin-top: 10px;
}
#order .komesyurui .komesyurui-box .komesyurui-text p{
    text-align: left;
    line-height: 1.35em;
}

#order .komesyurui .komesyurui-box .image{
    width: 150px;
}
#order .komesyurui .komesyurui-box .image img{width: 90px;}
#order .postage,
#order .weight,
#order .pay{
    width: 100%;
    padding: 30px 0;
    border-bottom: 1px solid #fff;
    text-align: center;
}
#order .postage{border-top: 1px solid #fff;}

#order .postage h4,
#order .weight h4,
#order .pay h4{
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: bold;
}
#order .pay p{
    min-width: 300px;
    display: inline-block;
    text-align: left;
}

#sake{
    width: 100%;
    padding: 50px 0;
    background-image: url("../images/kome/bg-sake.jpg");
    background-repeat: repeat-y;
    background-size: contain;
    background-position: center;
    color: #fff;
}
#sake h2{
    text-align: center;
    margin-bottom: 30px;
}
#sake .sake-textinfo{
    text-align: center;
    font-size: 1.1em;
}
#sake .sake-list{
    max-width: 900px;
    margin: 50px auto 75px;
    padding: 0;
    display: block;
}
#sake .sake-list .photo{
     max-width:  600px;
    margin: 0 auto;
    flex-shrink: 0; 
}
#sake .sake-list .text{
    padding-left: 50px;
}
#sake .sake-list .text h3{
    width: 100%;
    padding: 10px 0;
    margin-bottom: 7px;
    text-align: center;
    border-bottom: 1px solid #FFF;
    font-weight: bold;
}
#sake .sake-list .text h4{
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
}
#sake .sake-list .text p.memo{font-size: 0.9em;line-height: 1.5em;margin: 15px 0 0;}

#kome-support{
    width: 100%;
    padding: 75px 0;
    background-color: #e8e8ca;
}
#kome-support .kome-support-box{
    max-width: 850px;
    margin: 0 auto;
    padding: 50px 70px;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
}
#kome-support h3{
    text-align: center;
    font-size: 2.0em;
    margin-bottom: 20px;
}
#kome-support h4{text-align: center;margin-bottom: 15px;font-size: 1.1em;}
#kome-support .photo{
    margin: 25px auto;
}
#kome-support p{
    text-align: center;
}
#kome-support p.support-contact{
    margin-top: 50px;
}
#kome-support .kome-support-box .photo-box1{
    position: absolute;
    width: 200px;
    top: -10px;
    right: -50px;
}
#kome-support .kome-support-box .photo-box2{
    position: absolute;
    width: 200px;
    top: 260px;
    left: -50px;
}
#kome-support .kome-support-box .photo-box3{
    position: absolute;
    width: 200px;
    bottom:10px;
    right: -60px;
}

.shoplist{padding: 50px 0;}
.shoplist h3{
    text-align: center;
    font-weight: bold;
}
.shoplist ul{
    display: flex;
    width: 100%;
    margin: 25px auto;
    flex-wrap : wrap;
    justify-content:space-between;
}

.shoplist li{
    width:23%;
    margin: 20px 0;
}

.shoplist ul::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
.shoplist ul::after{
  content:"";
  display: block;
  width:23%;
}

.shoplist p.shoplist-name{
    font-size: 1.1em;
    font-weight: bold;
    margin: 7px 0;
}
.shoplist p.shoplist-info{
    font-size: 0.9em;
    line-height: 1.2em;
}

#insta{
    padding: 50px 0;
}
#insta h3{    
    max-width: 300px;
    margin: 0 auto 25px;
}
#insta .insta-text{
    max-width: 500px;
    margin: 0 auto 20px;
}
#insta .insta-img{
    max-width: 130px;
    margin: 0 auto 15px
}
#insta .feed{max-width: 950px;margin: 30px auto;}
p.lead-text{line-height: 1.8em; font-weight: bold;}

.daikimai{
    position: relative;
    background-image: url("../images/kome/bg-daikimai.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 550px;
    margin-top: -120px;
}
.daikimai-text{
    position: absolute;
    top:30%;
    left: 47.5%;
    transform: translateX(-50%);
    width: 650px;
}
@media screen and (max-width: 1400px) {
    .daikimai{
        background-size: cover;
        height: 550px;
    }

}

@media screen and (max-width: 980px) {
    #kome-support {
        padding: 75px 70px;
    }
    #kome-support .kome-support-box .photo-box2 {
        width: 170px;
        top: 350px;
        left: -50px;
    }
    .shoplist, #insta {
        padding: 50px 30px;
    }
    #sb_instagram #sbi_images {
        padding: 12px 30px !important;
    }
    section#content2 .box3{padding-left: 30px; padding-right: 30px;}
    section#content2 .text-box {
        width: 92%;}


}

@media screen and (max-width: 480px) {
    .pc{display: none;}
    .sp{display: block;}
    
    header {
         padding: 70px 0 0;
    }
    header h1 {
        padding: 0 10%;
    }
    .top-img .logo-kome {
        width: 170px;
        bottom: -88px;
    }
    section#content1 h2, section#content2 h2, section#daikimai h2 {
        text-align: left;
        padding: 0 10%;
        font-size: 1.7em;
    }
    section#content1 p, section#content2 p, section#daikimai p {
        text-align: left;
        padding: 0 5%;
        line-height: 1.6em;
        font-family: source-han-sans-japanese, sans-serif;
        font-weight: 400;
        font-size: 0.9em;
    }
    section#content2 .text-box {
        width: 90%;
        padding: 20px 0;
        margin: 25px auto 50px;
        font-size: 0.9em;
    }
    section#content2 .box3 {
        width: 90%;
        display: block;
        justify-content: space-between;
        align-items: top;
        position: relative;
        margin: 0 auto;
    }
    section#content2 .box3 .box3-item {
        width: 100%;
        margin: 0 auto 70px;    
    }
    section#content2 .box3 .box3-item .arrow {display: none;}
    section#content2 {
        margin-top: 50px;
    }
    section#content2 .box3 .box3-item .arrowsp{
        width: 83px;
        height: auto;
        position: absolute;
        top: -82px;
        left: 38%;
        transform: translateX(-50%);
        z-index: 1000;
    }
    section#content2 .box3 .box3-item .komemark {
        width: 65px;
        height: auto;
        position: absolute;
        top: -15px;
        left: 6%;
        z-index: 200;
    }
    section#content2 .box3 .box3-item h3 {
        font-size: 1.6em;
        padding: 15px 0;
    }
    .daikimaiImg {margin-top: 0;}
    .price .box h3 {
        margin: 15px auto;
        font-size: 1.2em;
    }
    #kome .sake-list {
        padding: 0 5%;
    }
    #kome .sake-list h3 {
        margin-bottom: 5px;
    }
    #kome .sake-list .mark-munosyaku, #kome .sake-list .mark-tokusai {
        font-size: 0.8em;
    }
    #kome .sake-list p{
        margin-top: 10px;
        font-size: 0.9em;
    }
    #kome .calendar {
        width: 90%;
        margin: 20px auto;
        padding: 20px 10px;
    }
    #kome .calendar div {
        margin-bottom: 15px;
        font-size: 1.1em;
        display: block;
    }
    #order {
        padding: 50px 5% 100px;
    }
  #order .postage h4, #order .weight h4, #order .pay h4{
        font-size: 1.05em;
    }
    #order .komesyurui .komesyurui-box .image{
        width: 50px;
        flex-shrink: 0;
    }
    #order .komesyurui .komesyurui-box .image img {
        width: 100%;
    }
    #order .komesyurui .komesyurui-box .komesyurui-text {
        padding-left: 10px;
    }
    #order .komesyurui .komesyurui-box .komesyurui-text p {
        line-height: 1.35em;
        font-size: 0.9em;
    }
    #sake {
        width: 100%;
        padding: 50px 5%;
        background-repeat: repeat-y;
        background-size: contain;
        background-image: url("../images/kome/bg-sakeSP.jpg");
    }
    #sake h2 {
        font-size: 1.8em;
        text-align: left;
    }
    #sake .sake-textinfo {
        text-align: left;
        font-size: 1.0em;
    }
    #sake .sake-list {display: block;}
    #sake .sake-list .photo {
        width: 113%;
        margin: 0 auto;
        margin-left: -7%;
    }
    #sake .sake-list .text {padding-left: 0;}
    #sake .sake-list .text h3 {
        width: 100%;
        padding: 10px 5%;
        margin-bottom: 7px;
        font-weight: bold;
        font-size: 1.3em;
        text-align: left;
    }
    #sake .sake-list .text h4 {
        margin-bottom: 15px;
        font-weight: bold;
        padding: 0 5%;
        font-size: 1.1em;
        text-align: left;
    }
    #sake .sake-list .text p {
        font-size: 0.9em;
    }
    #sake .sake-list .text p.memo {
        font-size: 0.85em;
        line-height: 1.5em;
        margin: 15px 0 0;
    }
    #kome-support .kome-support-box {
        max-width: 100%;
        padding: 0 20px;
        background-color: transparent;
    }
    #kome-support h3 {
        font-size: 1.65em;
    }
    #kome-support p{
        text-align: left;
    }
    #kome-support p.support-contact{
        margin-top: 15px;
    }
    #kome-support .kome-support-box .photo-box1,
    #kome-support .kome-support-box .photo-box2,
    #kome-support .kome-support-box .photo-box3{
        display: none;
    }
    #kome-support .kome-support-box .photo{margin-top: 10px;}
    
    .shoplist h3{font-size: 1.4em;}
    .shoplist ul {
         display: flex;
         max-width: 800px;
         margin: auto;
         overflow-x: auto;
        flex-wrap: nowrap;
    }
    .shoplist li {
        width: 40%;
        margin: 20px 10px;
        flex-shrink: 0;
    }
    #insta h3 {
        max-width: 200px;
        margin: 0 auto 12px;
    }
    #insta .insta-text{
        width: 82%;
        margin: 10px auto 12px;
    }
    .toggle_btn {
         top: 15px;
    }
    #insta .feed {
        padding: 0 5%;
    }
    .daikimai{
        position: relative;
        background-image: url("../images/kome/bg-daikimaiSP.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 355px;
        margin-top: 0;
    }
    .daikimai-text{
        top: 8%;
        left: 100%;
        width: 95px;
        transform: translateX(-140px);
    }
    .price{
        margin: 50px 0;
        padding: 0;
        background-image:none;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #ddfcae;
    }
    .price .box{
        margin: 50px auto;
        background-color: #ddfcae;
        padding: 15px 5%;
        border: 0;
    }
    .map{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .price .box p {
        text-align: left;
        margin-bottom: 15px;
        font-size: 0.9em;
    }
    .shoplist p.shoplist-name {
        font-size: 1.0em;
        font-weight: bold;
        margin: 7px 0;
    }
    .shoplist-info{font-size: 0.9em;}
    .shoplist {padding: 0 0;}
    section#content1 p{
        font-size: 0.9em;
        font-family: source-han-sans-japanese, sans-serif;
        font-weight: 400;
        padding: 0px 5%;
        line-height: 1.7em;
    }
    section#content2 .box3 .box3-item p {
        padding: 0 15px;
        text-align: left;
        margin: 15px 0;
        font-size: 0.9em;
        font-weight: 400;
    }
    #kome h2 {font-size: 1.7em;}
    #order p {
        font-size: 0.9em;
    }
    .shoplist ul::before{
        display: none;
    }
    .shoplist ul::after{
      content:"";
      display: none;
      width:0;
    }

}