@import url("../../css/cssreset.css");
@import url("../../css/base.css");
@import url("../../css/navigation.css");
@import url("../../css/contents.css");


/*--------------------------------------*/
/* products top */
/*--------------------------------------*/
/* styles.css */
/*--------------------------------------*/

/* section title */
#section_title {
    background:url("../images/h1_tile_bg.png");
    margin-bottom:8px;
}
#section_title_inner {
    background:url("../images/h1_bg.jpg") no-repeat center top;
}
#section_title_inner h1 {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:1.0em;
    margin:auto;
    padding-top:0;
}


/* package */
/*--------------------------------------*/
.section_inner .package {
    position:absolute;
    margin:auto;
}
.section_inner  .package img {
    width:100%;
    height:auto;
}
.udon .section_inner .package {
    right:33.5%;
    bottom:30.5%;
    width:234px;
}
.rice .section_inner .package {
    right:38.5%;
    bottom:24.0%;
    width:130px;
}


/* seciton */
.section {
    position:relative;
    background-color:#000004;
    margin-bottom:8px;
    color:#ffffff;
}
.section_inner {
    position:relative;
    width:100%;
    max-width:1200px;
    height:575px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    padding:0 50px;
    color:#ffffff;
}
.section.rice {
    margin-bottom:0;
}

/* section link */
.section a.cover {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
.section.hover:hover {
    opacity:0.8;
}

.section.udon .section_inner {background-image:url("../images/top_udon_bg.jpg");}
.section.various .section_inner {background-image:url("../images/top_various_bg.jpg");}
.section.rice .section_inner {background-image:url("../images/top_rice_bg.jpg");}

.section_inner .icon {
    max-width:307px;
    padding:15px 0;
}

.section_inner .text_area {
    width:38%;
    margin-left:4%;
}
.section .section_inner .text_area h2 {
    margin-bottom:0;
    font-size:2.2em;
    font-weight:bold;
}

.section.udon .section_inner .text_area h2,
.section.various .section_inner .text_area h2 {color:#d6e0ff;}
.section.rice .section_inner .text_area h2 {color:#ffe7db;}

.section_inner .details {
    position:absolute;
    bottom:8%;
}
.section_inner .details a {
    display:block;
    background:#e94709 url("../../images/common/arrow.png") no-repeat right center;
    padding:0.5em 90px;
    text-align:center;
    line-height:1.8;
    font-size:1.5em;
    color:#ffffff;
}
.section_inner .details a:hover {
    background-color:#f07e52;
    text-decoration:none;
}



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

/* seciton */
.section_inner {
    height:500px;
    padding:0 2%;
}


/* package */
/*--------------------------------------*/
.udon .section_inner .package {
    right:31.5%;
    bottom:28.5%;
    width:19.5%;
}
.rice .section_inner .package {
    right:38.5%;
    bottom:20.0%;
    width:10.83%;
}


.section_inner .icon {
    padding:15px 0 0;
}

.section_inner .text_area {
    width:42%;
}

.section .section_inner .text_area h2 {
    font-size:2.0em;
}


}
/* - 1200px end */



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

/* seciton */
.section_inner {
    height:430px;
    padding:0 2%;
}



.section_inner .icon {
    width:118px;
    padding:10px 0 0;
}
.rice .section_inner .icon {
    width:184px;
}
.section_inner .icon img {
    width:100%;
    height:auto;
}


.section_inner .text_area {
    width:42%;
}

.section .section_inner .text_area h2 {
    font-size:1.8em;
}
.section .section_inner .text_area p {
    font-size:0.9em;
}

.section_inner .details {
    bottom:4%;
}


}
/* - 900px end */



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

/* section title */
#section_title_inner {
    background:url("../images/h1_bg_sp.jpg") no-repeat center bottom 40%;
    background-size:cover;
}


/* seciton */
.section {
}
.section_inner {
    width:100%;
    height:auto;
    background-size:contain;
    padding:0 0 70%;
}

.section.udon .section_inner,
.section.rice .section_inner {
    background-position:right bottom;
}
.section.udon .section_inner {background-image:url("../images/top_udon_bg_sp.jpg");}
.section.rice .section_inner {background-image:url("../images/top_rice_bg_sp.jpg");}
.section.various .section_inner {
    background-position:center bottom;
    background-image:url("../images/top_various_bg_sp.jpg");
}


/* package */
/*--------------------------------------*/
.udon .section_inner  .package {
    right:60.3%;
    bottom:22.5%;
    width:31.2%;
}
.rice .section_inner  .package {
    right:68.7%;
    bottom:18.0%;
    width:17.3%;
}


.section_inner .icon {
    max-width:307px;
    margin-left:auto;
    margin-right:2%;
    padding:15px 0;
}

.section_inner .text_area {
    width:86%;
    margin:0 auto;
}
.section .section_inner .text_area h2 {
    line-height:1.4;
    font-size:2.0em;
}
.section .section_inner .text_area p {
    font-size:1.1em;
}

.section_inner .details {
    left:0;
    bottom:4%;
}
.section_inner .details a {
    padding:0.5em 90px;
}






}
/* - 768px end */





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

/* section title */
#section_title_inner {
    padding:50% 0;
}





}
/* - 750px end */




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






}
/* - 640px end */




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


/* package */
/*--------------------------------------*/
.udon .section_inner .package {
    right:59.0%;
    bottom:17.0%;
    width:33.0%;
}
.rice .section_inner .package {
    right:66.0%;
    bottom:14.0%;
    width:20.0%;
}







}
/* - 375px end */




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






}
/* - 320px end */