/******************** kv ********************/

#kv {
    background: linear-gradient(90deg, #3f6647 0%, #3f6647 50%, #fcf6e1 50%, #fcf6e1 100%);
}

#kv .bg{
    background:url(../img/top/kv_bg.jpg)no-repeat center top;
    background-size:1800px;
}

#kv .inner{
    max-width:1280px;
    height:720px;
    position: relative;
}

#kv h1{
    max-width:700px;
    width:60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

 #kv img.wasabi{
    max-width:780px;
    width:65%;
    position: absolute;
    top:0;
    left:-4%;
 }

 #kv img.karashi{
    max-width:840px;
    width:70%;
    position: absolute;
    bottom:0;
    right:-4%;
 }

/******************** about ********************/

#about {
    text-align: center;
}
#about img{
    max-width:1140px;
    width:100%;
    margin:30px auto ;
}

/******************** prod_wasabi ********************/

#prod_wasabi{
    background: url(../img/top/prod_wasabi_bg.png)no-repeat top right #3f6647;
    background-size: 55%;
}

#prod_wasabi .inner{
    padding:70px 0;
    display: flex;
    justify-content: space-between;
}

#prod_wasabi .text p{
    color:#fff;
}

#prod_wasabi .text .deco01{
    max-width:145px;
    width:30%;
    position: absolute;
    top:-60%;
    left:-10%;
    z-index:-1;
}

#prod_wasabi .text .deco02{
    max-width:200px;
    width:38%;
    position: absolute;
    top:-88%;
    right:-10%;
    z-index:-1;
}

#prod_wasabi .text ul li a{
    border:3px solid #000;
    background: #eedf15;
    border-radius: 50px;
    padding:10px 0;
    display: block;
    text-align: center;
    font-size:1.8rem;
}

#prod_wasabi .package p{
    font-size:4rem;
    font-family: "BIZ UDMincho", serif;
    color:#fff;
    font-weight: 400;
    line-height: 1;
}


/******************** prod_karashi ********************/

#prod_karashi{
    background: url(../img/top/prod_karashi_bg.png)no-repeat bottom left;
    background-size: 60%;
}

#prod_karashi .inner{
    padding:70px 0 250px;
    display: flex;
    justify-content: space-between;
}

#prod_karashi .text ul li a{
    border:3px solid #000;
    background: #ed491f;
    color:#fff;
    border-radius: 50px;
    padding:10px 0;
    display: block;
    text-align: center;
    font-size:1.8rem;
}

#prod_karashi .text .deco01{
    max-width:145px;
    width:30%;
    position: absolute;
    top:-40%;
    left:-10%;
    z-index:-1;
}

#prod_karashi .text .deco02{
    max-width:200px;
    width:38%;
    position: absolute;
    top:-110%;
    right:-20%;
    z-index:-1;
}

#prod_karashi .package p{
    font-size:4rem;
    font-family: 'Dela Gothic One', sans-serif;
    font-weight: 400;
    line-height: 1;
}


/******************** product_common ********************/

.product .text{
    width:50%;
}

.product .text h2{
    margin:20% 0 2%;
    position: relative;
    z-index:1;
}

.product .text ul{
    margin:5% 0 0;
    display: flex;
    justify-content: space-between;
}

.product .text ul li{
    width:48%;
}

.product .package{
    width:40%;
    text-align: center;
}

.product .package img{
    width:100%;
    margin:5% auto 0;
}


/******************** recipe ********************/

#recipe{
    background:#fff;
    padding:50px 0 150px;
}

#recipe .inner{
    max-width:100%;
    width:100%;
    margin:0 auto;
}

#recipe h2 {
    max-width:900px;
    margin:-220px auto 0;    
}

#recipe ul{
    margin:1% auto;
}

#recipe ul li{
    text-align: center;
}

#recipe ul li p{
    height:6rem;
    font-size:3rem;
    line-height: 1;
    display:flex;
    justify-content: center;
    align-items: flex-end;
}

#recipe ul li img{
    width:85%;
    margin:2% auto 3%;
    border-radius: 50px;
}

#recipe ul li a{
    width:230px;
    margin:0 auto;
    border:3px solid #000;
    background: #ed491f;
    color:#fff;
    border-radius: 50px;
    padding:10px 0;
    display: block;
    text-align: center;
    font-size:1.8rem;
}

.slick-slide {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    transform: scale( .75 );
  }
.is--active {
    transform: scale( 1 );
}




/**************************************** sp ****************************************/
@media only screen and (max-width: 767px) {

/******************** sp_kv ********************/


#kv {
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#kv .inner{
    background:none;
    width:100%;
    height:100%;
}

#kv h1{
    max-width:100%;
    width:100%;
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0, 0);
 }

 #kv img.wasabi{
    max-width:100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;
 }

 #kv img.karashi{
    max-width:100%;
    width:100%;
    position: absolute;
    bottom:-2%;
    right:0;
 }


/******************** sp_about ********************/

#about img{
    margin:20px auto ;
}


/******************** sp_prod_wasabi ********************/

#prod_wasabi{
    background: url(../img/top/prod_wasabi_bg.png)no-repeat top right #3f6647;
    background-size: contain;
}

#prod_wasabi .inner{
    padding:10px 0 100px;
    display: block;
}

#prod_wasabi .text ul li a{
    font-size:1.6rem;
}

#prod_wasabi .package p{
    font-size:3rem;
    text-shadow: 3px 3px 3px #000, -3px -3px 3px #000,
  -3px 3px 3px #000,  3px -3px 3px #000,
  3px 0 3px #000, -3px  0 3px #000,
  0 3px 3px #000,  0 -3px 3px #000;
}


/******************** sp_prod_karashi ********************/

#prod_karashi{
    background: url(../img/top/prod_karashi_bg.png)no-repeat bottom left;
    background-size: contain;
}

#prod_karashi .inner{
    padding:10px 0 120px;
    display: block;
}

#prod_karashi .text ul li a{
    font-size:1.6rem;
}

#prod_karashi .text .deco01{
    max-width:145px;
    width:30%;
    position: absolute;
    top:-50%;
    left:-10%;
    z-index:-1;
}

#prod_karashi .text .deco02{
    max-width:200px;
    width:38%;
    position: absolute;
    top:-130%;
    right:-10%;
    z-index:-1;
}

#prod_karashi .package p{
    font-size:3rem;
}


/******************** sp_product_common ********************/

.product .text{
    width:100%;
}

.product .text h2{
    margin:20% 0 2%;
    position: relative;
    z-index:1;
}

.product .text ul{
    margin:5% 0 0;
    display: block;
}

.product .text ul li{
    width:100%;
    margin:3% 0 0
}

.product .package{
    width:100%;
    text-align: center;
    margin:0 0 5%;
}

.product .package img{
    width:60%;
}


/******************** sp_recipe ********************/

#recipe{
    padding:50px 0 100px;
}

#recipe .inner{
    width:100%;
    margin:0 auto;
}

#recipe h2 {
    width:95%;
    margin:-120px auto 0;    
}


#recipe ul li p{
    height:6rem;
    font-size:1.8rem;
}

#recipe ul li img{
    width:100%;
    margin:3% auto 5%;
    border-radius: 50px;
}

#recipe ul li a{
    width:100%;
    margin:0 auto;
    font-size:1.6rem;
}




}