/* 
top CSS
Last Updated: 2019.04.
*/

svg{
    width: 100%;
    height: auto;
}

/* mv */
@keyframes mv-set{
    to{
        opacity: 1;
    }
}
.mv{
    width: calc(100% - 324px);
    margin-left: 324px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.swiper-container{
    opacity: 0;
    width: 100%;
    height: 100%;
    animation-name: mv-set;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    position: relative;
}
.mv.active .swiper-container{
    opacity: 1;
}
.mvBox-bg{
    width: 100%;
}
.mvBox-text-01,
.mvBox-text-02,
.mvBox-text-03{
    position: absolute;
    top: 0;
    left: 0;
}
.mvPrev,
.mvNext{
    position: absolute;
    top: 50%;
    left: 28px;
    z-index: 2;
    margin-top: -60px;
}
.mvNext{
    left: auto;
    right: 10px;
}
.mvPrev span,
.mvNext span{
    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;
}
.mvPrev span::after,
.mvNext span::after{
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    display: inline-block;
    top: 0;
    left: 0;
}
.mvPrev span::after{
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transform: rotate(45deg);
}
.mvNext span::after{
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(-45deg);
}
.stendMv{
    position: absolute;
    top: 0;
    z-index: 3;
    transition: right .3s ;
    right: -100%; 
}
.stendMv.active{
    right: 0;
}

/* second view */
.secondView{
    position: relative;
    overflow: hidden;
    z-index: 3;
    margin-top: -140px;
    width: 100%;
}
.secondBg img{
    width: 100%;
}
.secondBg img.secondShape01,
.secondBg img.secondShape02{
    position: absolute;
    transition-property: all;
    transition-duration: .3s;
}
.secondBg img.secondShape01{
    transition-delay: .2s;
    top: 0;
    left: -50%;
    width: 0;
    height: 0;
}
.secondBg img.secondShape01.active{
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.secondBg img.secondShape02{
    transition-delay: .4s;
    top: 50%;
    left: 130%;
    width: 0;
    height: 0;
}
.secondBg img.secondShape02.active{
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.secondCatch{
    position: absolute;
    margin: 18% 12% 0;
    color: white;
    font-size: 2rem;
    line-height: 2.5;
}
.secondBg img.secondViewBottom{
    width: 170%;
    bottom: -2px;
    left: -8%;
    z-index: 2;
    position: absolute;
}


/* kodawari */

.kodawari{
    position: relative;
    padding: 160px 0 180px;
    overflow: hidden;
}
.kodawari::before{
    content: '';
    display: inline-block;
    width: 200%;
    position: absolute;
    height: 300px;
    background-color: white;
    transform: rotate(5deg);
    top: -200px;
    left: -50%;
}
.kodawari::after{
    content: '';
    display: inline-block;
    width: 200%;
    position: absolute;
    height: 300px;
    background-color: white;
    transform: rotate(-5deg);
    bottom: -200px;
    left: -50%;
}
.kodawari ul{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    z-index: 2;
    position: relative;
}
.kodawari li{
    width: 492px;
    background-color: white;
    padding: 30px 30px 30px 45px;
    margin-right: 16px;
    margin-bottom: 16px;
}
.kodawari li:nth-child(even){
    margin-right: 0;
}
.kodawariHead{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}
.kodawariPoint{
    position: relative;
    min-width: 206px;
    height: 267px;
}
.kodawariPointNum{
    display: inline-block;
    margin: 8px 0 0 10px;
}
.kodawariPointTitle{
    position: absolute;
    bottom: 0;
    left: 0;
}
.kodawariPhoto{
    position: relative;
    width: 209px;
    height: 267px;
    overflow: hidden;
}
.kodawariWindow{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.kodawariWindowBg{
    position: relative;
}
.kodawari-01 .kodawariWindowBg{
    top: -134px;
    left: -28px;
}
.kodawari-02 .kodawariWindowBg{
    top: -75px;
    left: -67px;
}
.kodawari-03 .kodawariWindowBg{
    left: -130px;
}
.kodawari-04 .kodawariWindowBg{
    top: -30px;
    left: -14px;
}
.kodawari-05 .kodawariWindowBg{
    top: -38px;
    left: -10px;
}
.kodawari-06 .kodawariWindowBg{
    top: -100px;
    left: -75px;
}
.kodawari li p{
    font-size: 1.6rem;
    line-height: 1.75;
}

.kodawari_promise{
    background-color: #E5F3ED;
    border-radius: 10px;
    max-width: 1000px;
    margin: 0 auto 20px;
    padding: 30px 42px;
    z-index: 2;
    position: relative;
}
.kodawari_promise h3{
    margin-bottom: 28px;
    text-align: center;
}
.kodawari_promise li{
    padding: 0 0 0 32px;
    background: none;
    max-width: 440px;
    color: #52110F;
    position: relative;
}
.kodawari_promise li::before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    left: 0;
    top: 10px;
    background-color: #4ABA85;
}
.kodawari_promise li:nth-child(odd){
    margin-right: 35px;
}

/* product */
.product{
    padding: 0 0 30px;
}
.product ul{
    display: flex;
    flex-wrap: wrap;
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.product li{
    width: 260px;
    margin-right: 50px;
    margin-bottom: 70px;
    list-style: none;
    position: relative;
}
/*
.product .limit li {
  width: calc(50% - 25px);
}
.product .limit li:nth-of-type(2n) {
  margin-right: 0;
}
*/

.product ul.noflex{
    justify-content: center;
    margin-top: 50px;
}
.product ul.noflex li{
    margin-right: 0;
    width: 67%;
}
.product li .icoSeasonLabel{
    display: inline-block;
    position: absolute;
    top: -26px;
    right: 4px;
}
.product figure{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 252px;
    margin-bottom: 26px;
}
.product li:nth-child(3n){
    margin-right: 0;
}
.product h3{
    font-size: 2.6rem;
    line-height: 1.3;
    margin-bottom: 26px;
    text-align: center;
    height: 77px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.product p{
    line-height: 1.75;
    margin: 0 6px;
}
.product-01 figure img{
    position: relative;
    right: -24px;
}
.product-05 figure img{
    position: relative;
    right: -10px;
}

.productTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 860px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 2
}
.productTop figure{
    height: auto;
    margin-right: 50px;
}
.productTop .productTopInfo h3{
    display: block;
    text-align: left;
    height: auto;
}
.productTop .productTopInfo{
    width: 480px;
}

/* instagram */
.instagram{
    padding: 70px 0 80px;
}
.instagramList{
    position: relative;
    z-index: 2;
    max-width: 1000px;
    overflow: hidden;
    margin: 0 auto;
}
.instagramHash{
    color: #4ABA85;
    font-weight: normal;
}
.instagramHash:hover{
    opacity: .7;
}

/* media */
.media{
    padding: 70px 0 50px;
}
.mediaBox{
    max-width: 1000px;
    margin: 0 auto;
    max-height: 600px;
    overflow-y: scroll;
}
.mediaBox::-webkit-scrollbar{
    background: #eee;
    width: 10px;
}
.mediaBox::-webkit-scrollbar-thumb{
    background: #aaa;
}
.mediaBox article{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: #F8F8F8;
    margin-right: 10px;
}
.mediaBox article:last-child{
    margin-bottom: 0;
}
.mediaBox article figure{
    width: 320px;
    padding: 15px 15px 0 15px;
}
.mediaBox article figure img{
    display: block;
    max-width: 100%;
    height: auto;
}
.mediaBox article .mediaBody{
    width: calc(100% - 320px);
    padding: 15px;
}
.mediaBox time{
    display: inline-block;
    margin-bottom: 10px;
}
.mediaBox article h3{
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: normal;
}

/* shop */
.shop{
    padding: 70px 0 80px;
}
.shopInfo dl{
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #87CAAC;
    line-height: 1.4;
}
.shopInfo dt{
    width: 95px;
}
.shopInfo dd{
    width: calc(100% - 95px);
}
.shopInfo dl:first-child{
    align-items: center;
}
.shopInfo dd strong{
    font-weight: normal;
}
.shopInfoAccess p{
    padding-left: 0.5em;
}
_:-ms-lang(x), .shopInfoAccess p{
  padding-left: 1em;
}
.shopPhoto{
    width: 492px;
}
.shopBox,
.shopMap{
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.shopMap iframe{
    width: 100%;
}
.shopBox{
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}
.shopInfo{
    width: 474px;
}

/* contact */
.contact{
    padding: 55px 0;
}
.contactMail{
    font-size: 2.4rem;
}
.contactBox,
.contactSns{
    max-width: 960px;
    margin: 40px auto 0;
}
.contactBox .txt-pcolor{
    font-size: 2rem;
}
.contactBox p{
    line-height: 1.5;
    margin-bottom: 15px;
}
.contactProductTel{
    font-size: 2rem;
    line-height: 1.3;
}
.contactBox .contactCompany{
    margin: 30px 0;
}
.contactInfo{
    display: flex;
    justify-content: space-between;
}
.contactInfo li{
    width: 450px;
}
.contactSns{
    display: flex;
    justify-content: space-between;
}
.contactSns li{
    width: 460px;
}

/* stend */
.stend{
    position: absolute;
    display: inline-block;
    z-index: 3;
}
.stend01{
    top: 7.54%;
    right: 0;
    z-index: 3;
}
.stend02{
    top: 11.2%;
    left: 0;
    z-index: 3;
}
.stend03{
    top: 20%;
    left: 0;
    z-index: 1;
}
.stend04{
    top: 28.7%;
    right: 2%;
    z-index: 1;
}
.stend05{
    top: 39%;
    left: 0;
    z-index: 1;
}
.stend06{
    top: 41%;
    right: 0;
    z-index: 1;
}
.stend07{
    top: 44%;
    left: 0;
    z-index: 1;
}
.stend08{
    top: 50%;
    right: 0;
    z-index: 1;
}
.stend09{
    top: 63%;
    right: 0;
    z-index: 1;
}
.stend10{
    top: 56%;
    left: 0;
    z-index: 1;
}
.stend11{
    top: calc(62% + 445px);
    left: 0;
    z-index: 1;
}
.stend12{
    top: 70%;
    left: 0;
    z-index: 1;
}
.stend13{
    top: calc(70% + 40px);
    right: 0;
    z-index: 1;
}

/*
1558px - 
*/
@media screen and (min-width:1532px){
    .mv{
        height: 940px;
    }
    .secondView{
        margin-top: -165px;
    }
}

/*
836px - 1230px
*/
@media screen and (max-width:1250px){
    body{
        min-width: 1190px;
    }
    .headerInner{
        margin-top: 40px;
    }
    .headerInner h1{
        margin-bottom: 30px;
    }
}

/*
- 835px
*/
@media screen and (max-width:835px){
    .subTitle{  
        position: relative;
        z-index: 4;
    }
    .stend01{
        width: 80px;
    }
    .stend02{
        z-index: 1;
    }
    body{
        min-width: 0;
    }
    .headerInner{
        margin-top: 0;
    }
    .shopMap{
        width: 100%;
    }
    .mv{
        margin-left: 0;
        width: 100%;
    }
    .mv::after{
        height: 120px;
    }
    .mvPrev,
    .mvNext{
        display: none;
    }
    .swiper-container{
        animation-duration: .7s;
    }
    .secondView{
        margin-top: -80px;
    }
    .secondCatch{
        font-size: 1.6rem;
        line-height: 2.8;
        margin: 28% 0 0 18%;
    }
    .mvSp{
        position: relative;
        z-index: 2;
        width: 100%;
        overflow: hidden;
    }
    .newsOuter{
        z-index: 4;
        position: relative;
    }
    
    /*
    * kodawari
    */
    .kodawari{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .kodawari ul{
        display: block;
    }
    .kodawari li{
        width: auto;
        padding: 30px;
        margin: 15px;
    }
    .kodawari li:nth-child(even){
        margin: 15px;
    }

    .kodawariHead{
        justify-content: center;
    }
    .kodawariWindowBg{
        max-width: none;
    }
    .kodawari_promise{
        margin: 0 15px;
        padding: 10px;
    }
    .kodawari_promise h3{
        padding: 15px 15px 0;
    }
    .kodawari_promise li{
        max-width: none;
        padding: 0 10px 0 25px;
    }
    .kodawari_promise li:nth-child(odd){
        margin-right: 0;
    }
    .kodawari::before{
        top: -270px;
    }
    .kodawari::after{
        bottom: -270px;
    }

    /*
    * product
    */
    .product{
        padding-top: 20px;
    }
    .product h3{
        height: auto;
    }
    .product ul{
        display: block;
    }
    .product ul li{
        width: auto;
        margin: 30px 45px 70px;
    }
    .product li:nth-child(3n){
        margin: 30px 45px 70px;
    }
    .productTop figure img{
        right: -46px;
        position: relative;
        width: 200px;
    }
    .productTop{
        display: block;
        margin: 30px 45px 70px;
    }
    .product figure{
        height: auto;
    }
    .productTop .productTopInfo h3{
        text-align: center;
    }
    .productTop .productTopInfo{
        width: auto;
    }

    /*
    * instagram
    */
    .instagram{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .instagramList{
        height: auto;
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
    }
    .instagramList .sp{
        padding: 0 20px;
    }

    /* media */
    .media{
        padding: 40px 0 30px;
    }
    .mediaBox{
        margin: 0 15px;
        max-height: 400px;
    }
    .mediaBox article{
        display: block;
    }
    .mediaBox article figure{
        width: auto;
        padding: 10px 10px 0 10px;
        text-align: center;
    }
    .mediaBox article figure img{
        display: inline;
        max-width: 100%;
    }
    .mediaBox article .mediaBody{
        width: auto;
        padding: 20px;
    }
    .mediaBox article h3{
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    /* shop */
    .shop{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .shopBox{
        display: block;
        margin: 0 15px;
    }
    .shopPhoto,
    .shopInfo{
        width: auto;
    }
    .shopPhoto{
        text-align: center;
    }
    .shopMap{
        box-sizing: border-box;
        width: auto;
        margin: 15px;
    }
    .shopMap iframe{
        width: 100%;
    }
    .contactMail{
        font-size: 2rem;
    }
    .contactBox{
        margin: 30px;
        width: auto;
    }
    .contactSns{
        display: block;
        width: 100%;
        padding: 15px 30px;
    }
    .contactSns li{
        width: 100%;
        max-width: 460px;
        margin: 10px auto 0;
    }
    .contactInfo{
        display: block;
    }
    .contactInfo li{
        width: auto;
        margin-bottom: 10px;
    }
}
@media screen and (max-width:500px){
    .secondView{
        margin-top: -50px;
    }

    .kodawariHead{
        display: block;
    }
    .kodawariPoint{
        display: block;
        justify-content: left;
        min-width: 0;
        height: auto;
        margin-bottom: 20px;
    }
    .kodawari li p{
        padding-right: 0;
        padding-left: 0;
    }
    .kodawariPoint img{
        vertical-align: top;
    }
    .kodawariPointNum{
        margin-left: 10px;
    }
    .kodawariPointTitle{
        display: inline-block;
        position: static;
        margin-top: 10px;
        margin-left: 30px;
    }
    .kodawariPhoto{
        margin: 0 auto;
        left: 1px;
    }
}