/* レシピチャンネル */

/* common setting */

/* 画像リンク */
#main a:hover img {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter:"alpha( opacity=70 )";
}

#navHeader {
    margin-bottom:0 !important;
}




/* breadcrumb footer */
#breadcrumb_sp {display:none;}


/* common setting END */


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

/* main contents */
#main {
    overflow:hidden;
    width:100%;
    margin:0 auto 40px;
    padding:0;
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    text-align:center;
    line-height:1.8;
    font-size:1.2em;
    color:#000;
}


.img_sp {display:none;}


/* head */
#head {
    position:relative;
    width:100%;
    height:400px;
    background:url("../images/head_bg.jpg") no-repeat center 0;
    margin:0 auto;
}
#head_sp {display:none;}



/* icon ex */
#icon {
    width:950px;
    margin:0 auto 25px;
}
#icon ul {
    text-align:right;
    font-size:0;
}
#icon ul li {
    display:inline-block;
    margin:0 0 5px;
    padding:0 5px 5px;
    border-bottom:1px solid #ccc;
    box-sizing:border-box;
}



/* tab */
ul.tab {
    width:950px;
    margin:0 auto;
    text-align:center;
}
ul.tab li {
    float:left;
    width:48.8%;
    height:55px;
}
ul.tab li:first-child {
    background-color:#e8c4af;
    margin-right:2.4%;
    transition:background-color .5s ease-in;
}
ul.tab li:last-child {
    background-color:#a4c6ec;
    transition:background-color .5s ease-in;
}

input.tab_check {display:none;}

ul.tab li label {
    display:block;
    width:100%;
    height:100%;
    text-indent:-9999px;
    cursor:pointer;
    transition:background-image .5s ease-in;
}

ul.tab li:first-child label {
    background:url("../images/tab_udon_off.png") no-repeat center 0;
    background-size:contain;
}
ul.tab li:last-child label {
    background:url("../images/tab_gohan_off.png") no-repeat center 0;
    background-size:contain;
}
ul.tab li:first-child:hover {background-color:#eddacf;}
ul.tab li:first-child:hover label {background-image:url("../images/tab_udon.png");}
ul.tab li:last-child:hover {background-color:#d0e0f3;}
ul.tab li:last-child:hover label {background-image:url("../images/tab_gohan.png");}
#udon:checked ~ ul.tab li:first-child {background-color:#eddacf;}
#udon:checked ~ ul.tab li:first-child label {background-image:url("../images/tab_udon.png");}
#gohan:checked ~ ul.tab li:last-child {background-color:#d0e0f3;}
#gohan:checked ~ ul.tab li:last-child label {background-image:url("../images/tab_gohan.png");}

.content_tab {display:none;}
#udon:checked ~ #content_udon,
#gohan:checked ~ #content_gohan {
    display:block;
}


/* contents */
#content_udon {
    width:100%;
    background-color:#eddacf;
}
#content_gohan {
    width:100%;
    background-color:#d0e0f3;
}

.contentInner {
    width:950px;
    margin:0 auto;
    padding:45px 0;
}

/* card */
.card {
    float:left;
    width:220px;
    margin:0 0 50px 23px;
    box-sizing:border-box;
    box-shadow:2px 2px 3px 0px #3a2b22;
    box-shadow:2px 2px 3px 0px rgba(58,43,34,0.60);
}
.card:nth-child(4n+1) {
    margin:0 0 50px;
}
.card img {
    width:100%;
    height:auto;
}
.card .title {
    position:relative;
    width:100%;
    height:3.8em;
    background:#ffffff;
    text-align:center;
}
.card .title h3 {
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
    width:100%;
    padding:0.5em 0;
    line-height:1.4;
    font-size:1.0em;
    box-sizing:border-box;
}
.card .icon {
    background:#ffffff;
}
.card .icon ul {
    height:80px;
    font-size:0;
}
.card .icon ul li {
    display:inline-block;
    padding-top:7px;
}
.card ul.btn {
    
}
.card ul.btn li {
    float:left;
    width:50%;
}


/* fade in */
body.access .lazy {opacity:0;transition:ease-in 1.5s;transform:translate3d(0,0,0);}
body.access .card {opacity:0;transition:ease-in 1.0s;transform:translate3d(0,0,0);}
body.access .card:nth-child(4n+2) {transition-delay:.5s;}
body.access .card:nth-child(4n+3) {transition-delay:.8s;}
body.access .card:nth-child(4n+4) {transition-delay:1.0s;}
body.access .fade {opacity:1.0;}


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

img, object, embed, video {
    max-width:100%;
    height:auto;
}

/* main contents */
#main {
    margin-top:30px;
}


/* head */
#head {
    height:0;
    background-size:contain;
    padding-top:36.14%;
}
#head h1 {
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:31.76%;
    margin:auto;
}
#head h2 {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    width:49.91%;
    margin:auto;
}



/* icon ex */
#icon {
    width:90%;
}


/* tab */
ul.tab {
    width:90%;
}
ul.tab li {
    height:50px;
}
ul.tab li img {
    height:50px;
}


/* contents */
.contentInner {
    width:96%;
}

/* card */
.card {
    width:23.5%;
    margin:0 0 4% 2%;
}
.card:nth-child(4n+1) {
    margin:0 0 4%;
}
.card .title {
    position:relative;
    width:100%;
    height:3.8em;
    background:#ffffff;
    text-align:center;
}
.card .title h3 {
    font-size:0.8em;
}
.card .icon ul {
    height:70px;
}
.card .icon ul li {
    padding-top:10px;
}
.card .icon ul li img {
    width:auto;
    height:50px;
}











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



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

#main {
}

/* breadcrumb footer
#breadcrumb_sp {
    display:block;
    width:100%;
    padding:2em 5%;
    border-top:50px solid #eeeeee;
    border-bottom:50px solid #eeeeee;
    text-align:left;
    font-size:1.0em;
    box-sizing:border-box;
}

#breadcrumb_sp a:link {color:#1380cc;text-decoration:none;}
#breadcrumb_sp a:active {color:#1380cc;text-decoration:underline;}
#breadcrumb_sp a:visited {color:#1380cc;text-decoration:none;}
#breadcrumb_sp a:hover {color:#1380cc;text-decoration:underline;}

#pankuzu {display:none;} */







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



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


#main {
    font-size:1.2em;
}

.img_sp {display:block;}
.img_pc {display:none;}


/* head */
#head {display:none;}

#head_sp {
    display:block;
    width:100%;
    margin:0 auto 30px;
}

#head_sp h2 {
    width:100%;
    background:url("../images/head_bg_sp.jpg") no-repeat 0 0;
    background-size:contain;
    padding-top:37.33%;
}



/* icon ex */
#icon {
    width:100%;
}
#icon ul {
    border-bottom:1px solid #ccc;
    text-align:center;
}
#icon ul li {
    border-bottom:none;
}



/* tab */
ul.tab {
    width:100%;
}
ul.tab li {
    height:auto;
    padding:5px 0;
}
ul.tab li img {
    width:80%;
    height:auto;
}


/* contents */
.contentInner {
    width:94%;
}

/* card */
.card {
    width:48%;
    margin:0 0 4% 4%;
}
.card:nth-child(odd) {
    margin:0 0 4%;
}
.card .title {
}
.card .title h3 {
    padding:0.5em 5px;
}
.card .icon ul {
    height:auto;
    min-height:60px;
}
.card .icon ul li {
    width:24%;
    padding:10px 0;
}
.card .icon ul li img {
    width:auto;
    height:40px;
}


/* fade in */
body.access .card:nth-child(4n+2) {transition:none;}
body.access .card:nth-child(4n+3) {transition:none;}
body.access .card:nth-child(4n+4) {transition:none;}
body.access .card:nth-child(odd) {transition:ease-in 1.0s;}
body.access .card:nth-child(even) {transition:ease-in 1.0s;transition-delay:.5s;}








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



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





/* icon ex */
#icon ul li {
    width:18%;
}
#icon ul li img {
    width:auto;
    height:40px;
}


.card .title {
    height:3.2em;
}
.card .title h3 {
    font-size:0.7em;
}




}
/* - 320px end */