@import "common.css";

/* 丹念仕込み特設サイト */
/* Top page */


/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/

/* head image */
#head {
    position:relative;
    width:100%;
    height:900px;
    margin-bottom:40px;
}


/* slide */
.bx-wrapper {
    position:relative;
    padding:0;
    *zoom:1;
    -ms-touch-action:pan-y;
    touch-action:pan-y;
}
.bx-wrapper img {
    max-width:100%;
    display:block;
}
.bxslider {
    margin:0;
    padding:0;
}
.bx-viewport {
    -webkit-transform:translatez(0);
}


#slide {
    position:absolute;
    top:0;
    width:100%;
}
#slide li.slide01,
#slide li.slide02 {
    position:relative;
    width:100%;
    height:900px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
}

#slide .slide01 {background-image:url("../images/top/main_img01.jpg");}
#slide .slide02 {background-image:url("../images/top/main_img02.jpg");}

/* package */
#slide .pkg_tannen {
    position:absolute;
    top:73.5%;
    right:50%;
    width:278px;
    transform: translateX(-200px);
}
#slide .pkg_tannen img {
    max-width: 100%;
    height:auto;
    -webkit-filter:drop-shadow(5px 5px 6px rgba(0,0,0,0.7));
    filter:drop-shadow(5px 5px 6px rgba(0,0,0,0.7));
}
#slide .pkg_yawamochi {
    position:absolute;
    top:70.0%;
    left:50%;
    width:390px;
    transform: translateX(80px);
}
#slide .pkg_yawamochi img {
    max-width: 100%;
    height:auto;
    transition: all .3s ease;
    opacity: 1;
}
#slide .pkg_yawamochi a:hover img {
    opacity: 0.8;
}

#slide .package {display: none;}


/* slide01 */
.slide01 ul.top_nav {
    position:absolute;
    top:6%;
    left:50%;
    width:230px;
    margin-left:-490px;
}
.slide01 ul.top_nav li {
    float:right;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    margin-left:6.52%;
    text-indent:-9999px;
}
.slide01 ul.top_nav li a {
    display:block;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    text-indent:-9999px;
}
.slide01 ul.top_nav li a:hover {
    opacity:0.7;
}

.slide01 ul.top_nav li.pride {
    width:26.95%;
}
.slide01 ul.top_nav li.method,
.slide01 ul.top_nav li.grandprix,
.slide01 ul.top_nav li.recipe {
    width:15.65%;
}

.slide01 ul.top_nav li.pride a {
    width:100%;
    background-image:url("../images/top/main_btn01.png");
    padding-top:564.516%;
}
.slide01 ul.top_nav li.method a {
    width:100%;
    background-image:url("../images/top/main_btn02.png");
    padding-top:972.222%;
}
.slide01 ul.top_nav li.grandprix a {
    width:100%;
    background-image:url("../images/top/main_btn03.png");
    padding-top:972.222%;
}
.slide01 ul.top_nav li.recipe a {
    width:100%;
    background-image:url("../images/top/main_btn04.png");
    padding-top:972.222%;
}

/* no link 
.slide01 ul.top_nav li.method {
    width:36px;
    background-image:url("../images/top/main_btn02.png");
    padding-top:972.222%;
}
.slide01 ul.top_nav li.grandprix {
    width:36px;
    background-image:url("../images/top/main_btn03.png");
    padding-top:972.222%;
}*/

.slide01 ul.top_nav li a.nolink {
    opacity:0.3;
    pointer-events:none;
}

/* slide02 */
.slide02 .package {
    position:absolute;
    left:0;
    right:0;
    bottom:5%;
    width:26.0%;
    max-width:314px;
    margin:auto;
}


/* yawamochi */
.yawamochi {display: none;}

/* banner */
ul.banner {
    width:100%;
    max-width:950px;
    margin:0 auto;
}
ul.banner li {
    margin-bottom:40px;
}

ul.banner li a,
ul.banner li span {
    display:block;
    width:100%;
    height:0;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    padding-top:27.05%;
    text-indent:-9999px;
}

ul.banner li.pride a {background-image:url("../images/top/btn_pride.jpg");}
ul.banner li.method a {background-image:url("../images/top/btn_method.jpg");}
ul.banner li.grandprix a {background-image:url("../images/top/btn_grandprix.jpg");}
ul.banner li.udonwave a {background-image:url("../images/top/btn_udonwave.jpg");}
ul.banner li.recipe a {background-image:url("../images/top/btn_recipe.jpg");}

ul.banner li a:hover {
    opacity:0.7;
}

/* no link */
ul.banner li span:hover {
    cursor:pointer;
}
ul.banner li.method span {background-image:url("../images/top/btn_method.jpg");}
ul.banner li.grandprix span {background-image:url("../images/top/btn_grandprix.jpg");}
ul.banner li.udonwave span {background-image:url("../images/top/btn_udonwave.jpg");}

ul.banner li.method span:hover {background-image:url("../images/top/btn_method_o.jpg");}
ul.banner li.grandprix span:hover {background-image:url("../images/top/btn_grandprix_o.jpg");}
ul.banner li.udonwave span:hover {background-image:url("../images/top/btn_udonwave_o.jpg");}




/* 949px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 949px) {

/* head image */
#head {
    height:0;
    padding-top:100%;
}

/* slide */
#slide {
}
#slide li.slide01,
#slide li.slide02 {
    width:100%;
    height:0;
    padding-top:100%;
}
/* package */
#slide .pkg_tannen {
    left:inherit;
    right: 3%;
    width:29.263%;
    transform: none;
}
#slide .pkg_yawamochi {
    left:0;
    right:inherit;
    width:41.052%;
    transform: none;
}

/* slide01 */
.slide01 ul.top_nav {
    top:6%;
    left:0;
    width:24.5%;
    margin-left:0;
}





}
/*-------------------------------------------------------------------------------------------*/
/* 949px以下 END */



/* 768px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {







}
/*-------------------------------------------------------------------------------------------*/
/* 768px以下 END */



/* 640px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

ul#sns_top {
    padding-top:1.5%;
    text-align:left;
}

/* head image */
#head {
    height:0;
    margin-bottom:0;
    padding-top:164.66%;
}


/* slide */
#slide li.slide01,
#slide li.slide02 {
    width:100%;
    height:0;
    background-size:contain;
    padding-top:164.66%;
}

#slide .slide01 {background-image:url("../images/top/main_img01_sp.jpg");}
#slide .slide02 {background-image:url("../images/top/main_img02_sp.jpg");}


.slide01 ul.top_nav {
    top:7%;
    left:0;
    width:41.0%;
    height:36.88%;
}
.slide01 ul.top_nav li {
    margin-left:5.5%;
}

.slide01 ul.top_nav li.pride {width:26.3%;}
.slide01 ul.top_nav li.method,
.slide01 ul.top_nav li.grandprix,
.slide01 ul.top_nav li.recipe {width:15.78%;}

.slide01 ul.top_nav li.pride a {
    width:100%;
    padding-top:540%;
}
.slide01 ul.top_nav li.method a,
.slide01 ul.top_nav li.grandprix a,
.slide01 ul.top_nav li.recipe a {
    width:100%;
    padding-top:900%;
}

/* no link
.slide01 ul.top_nav li.method,
.slide01 ul.top_nav li.grandprix {
    padding-top:900%;
}
 */

.slide01 ul.top_nav li.pride  a {background-image:url("../images/top/main_btn01_sp.png");}
.slide01 ul.top_nav li.method a {background-image:url("../images/top/main_btn02_sp.png");}
.slide01 ul.top_nav li.grandprix a {background-image:url("../images/top/main_btn03_sp.png");}
.slide01 ul.top_nav li.recipe a {background-image:url("../images/top/main_btn04_sp.png");}

/* no link
.slide01 ul.top_nav li.method {background-image:url("../images/top/main_btn02_sp.png");}
.slide01 ul.top_nav li.grandprix {background-image:url("../images/top/main_btn03_sp.png");}
 */

/* package */
#slide .pkg_tannen,
#slide .pkg_yawamochi {
    display: none;
}
#slide .package {
    display: block;
    position: absolute;
    width:42.842%;
    margin: auto;
}
#slide .package img {
    max-width: 100%;
    height:auto;
    -webkit-filter:drop-shadow(5px 5px 6px rgba(0,0,0,0.7));
    filter:drop-shadow(5px 5px 6px rgba(0,0,0,0.7));
}
#slide .slide01 .package {
    top:79%;
    right: 6%;
}
#slide .slide02 .package {
    top:73%;
    left: 0;
    right: 0;
}



/* yawamochi */
.yawamochi {
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../images/top/yawamochi_bg.jpg");
    margin-bottom: 10px;
}
.yawamochi a {
    position: absolute;
    right:0;
    bottom:11%;
    width: 20.842%;
}
.yawamochi a img {
    transition: all .3s ease;
}
.yawamochi a:hover img {
    opacity: 0.7;
}



/* banner */
ul.banner li {
    margin-bottom:10px;
}

ul.banner li a,
ul.banner li span {
    padding-top:54%;
}

ul.banner li.pride a {background-image:url("../images/top/btn_pride_sp.jpg");}
ul.banner li.method a {background-image:url("../images/top/btn_method_sp.jpg");}
ul.banner li.grandprix a {background-image:url("../images/top/btn_grandprix_sp.jpg");}
ul.banner li.udonwave a {background-image:url("../images/top/btn_udonwave_sp.jpg");}
ul.banner li.recipe a {background-image:url("../images/top/btn_recipe_sp.jpg");}

/* no link */
ul.banner li.method span {background-image:url("../images/top/btn_method_sp.jpg");}
ul.banner li.grandprix span {background-image:url("../images/top/btn_grandprix_sp.jpg");}
ul.banner li.udonwave span {background-image:url("../images/top/btn_udonwave_sp.jpg");}

ul.banner li.method span:hover {background-image:url("../images/top/btn_method_sp_o.jpg");}
ul.banner li.grandprix span:hover {background-image:url("../images/top/btn_grandprix_sp_o.jpg");}
ul.banner li.udonwave span:hover {background-image:url("../images/top/btn_udonwave_sp_o.jpg");}





}
/*-------------------------------------------------------------------------------------------*/
/* 640px以下 END */



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










}
/* - 375px end */



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










}
/* - 320px end */