/* スマホ用設定 */

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

body,html {
height: 100%;
position: relative;
-webkit-text-size-adjust:none;
}

img.fit{
width: 100% !important;
}

.pc,
div.bana,
div.sfm,
#page_up
{display: none;}

.txcenter {
text-align: center !important;
}

#body{
position: relative;
width: 100%;
background: url(../img/sp/sp_back.png) repeat-y center top;
}

#head,
#navi,
#sub_menu,
#contents .block_l{
width: 100% !important;
}

#head img.udlogo{
width: 240px;
height: 34px;
}

#head div.left p{
padding: 5px 0 0 !important;
}
/*--------------
gnavi
-----------------*/
.menu_button {
position: absolute;
top: 33px;
right: 15px;
z-index: 1;
width: 25px;
height: 25px;
}

#gNav{
position: fixed;
top: 0;
right: -240px;
width: 240px;
height: 100%;
background: #fff;
z-index: 15;
}
#gNav li {
font-size: 12px;
border-bottom: 1px solid #cccccc;
margin-bottom: 1em;
margin: 0 10px;
padding: 1em;
background: url(../img/sp/icon_arrow_1.png) no-repeat right center;
background-size: 7px;
text-align: left;
}
#gNav a {
text-decoration: none;
width: 210px;
color: #666;
display: block;
}
#gNav a:hover{
text-decoration: underline;
}


#head{
border-top: none;
}
#navi h1{
padding: 0 10px 5px;
line-height: 1.4em;
float: none;
font-size: 14px;
}

#navi p{
text-align: left;
padding: 10px;
float: none;
}

#main_img{
background: #fff url(../img/sp/bg_main_img.png) no-repeat left center;
background-size: 7px;
padding: 5px 10px 5px 15px;
box-sizing: border-box;
border: 2px solid #e53f34;
border-radius: 5px;
overflow: hidden;
width: 100% !important;
min-width: 308px;
height: auto;
}

#main_img span{
color: #e53f34;
font-size: 14px;
font-weight: bold;
xpadding: 15px 10px;
}

#main_img h2{
padding: 5px 0;
font-size: 14px;
}

#head div.left {
width: 100%;
padding: 10px 0px 0px;
float: none;
text-align: center;
}

#contents {
width: 100%;
}

#left,
#right {
width: 96%;
margin: 0 2%;
float: none;
overflow: hidden;
}

#honmon{
background-image: none;
}
#honmon h2{
background-image: none;
background: #E53F34;
color: #fff;
padding: 10px 10px;
}
#honmon h2 span{
display: block;
background-image: none;
padding: 5px 0 0;

}
#honmon h3{
padding: 10px 10px 0px;
}

#honmon p {
padding: 10px 10px;
}
p.h2_bottom,p.ul_bottom{
display:none;
}

#honmon h4 {
margin: 10px 10px;
padding: 0px 0px 10px 30px !important;
border-bottom: 1px solid #E53F34;
background-repeat: no-repeat;
background-position: left 1px;
}

#honmon div.img {
width: 230px;
float: none;
margin: 0 auto;
}

#sub_menu{
background: #fff;
overflow: hidden;
margin: 0 0 15px;
padding: 5px 10px 5px;
box-sizing: border-box;
}
#sub_menu h2{
background: none;
background: #fff url(../img/sp/bg_side_h2.png) no-repeat left center;
background-size: 5px;
line-height: 30px;
height: 30px;
border-bottom: 2px solid #E53F34;
margin: 0 0 10px;
padding: 0 0 0 15px;
}
#sub_menu h2 span{
float: right;
text-align: right;
cursor: pointer;
padding: 7px 0 0 0;
}

#sub_menu ul{
width: 100%;
padding: 0;
margin: 0 0 10px;
list-style: none;
background: none;
font-size: 0;
}
#sub_menu ul li p{
font-size: 12px;
padding: 5px 5px 10px;
line-height: 1.4em;
}

#sub_menu ul li a{
display: block;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
padding: 14px;
width: 100%;
box-sizing: border-box;
font-size: 12px;
text-decoration: none;
background: #F2F2F2;
color: #333;
background: #fff url(../img/sp/icon_arrow_1.png) no-repeat 98% center;
background-size: 7px;
}
#sub_menu ul li a:hover{
background: #efefef url(../img/sp/icon_arrow_1.png) no-repeat 98% center;
background-size: 7px;
color: #999;
}
#sub_menu ul li:last-child{
border-bottom: 1px solid #999;
}

#check{
background: none;
margin: 0;
padding: 0 0 20px;
}
#check h2{
background: none;
margin: 0;
padding: 10px 0;
border-bottom: 1px dotted #999;
}
#check p.bottom{
display: none;
}

.ft_ckbox{
text-align: center;
padding: 10px 0;
}

div.sp_footer p{
padding: 0 0 5px;
font-size: 11px;
line-height: 1.4em;
text-align: center;
}
#honmon table{
width: 96%;
margin: 0px 10px !important;
}
#honmon table td{
xwidth: 30%;
vertical-align: top;
}
#honmon th {
padding: 0.3em 0.5em;
border: 1px solid #818181;
text-align: center;
white-space: normal;
width: 100px !important;
}

/* ================
index
================== */
a.white_sqare{
display: block;
border: 1px solid #ccc;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-size: 12px;
text-decoration: none;
background: #F2F2F2;
color: #333;
background: #fff url(../img/sp/icon_arrow_1.png) no-repeat 98% center;
background-size: 7px;
}

a.white_sqare:hover{
background: #efefef url(../img/sp/icon_arrow_1.png) no-repeat 98% center;
background-size: 7px;
}

.indl ul li a{
display: block !important;
border: 1px solid #ccc !important;
border-bottom: none !important;
padding: 14px !important;
width: 100% !important;
box-sizing: border-box !important;
font-size: 14px !important;
text-decoration: none !important;
background: #F2F2F2 !important;
color: #333 !important;
background: #fff url(../img/sp/icon_arrow_1.png) no-repeat 98% center !important;
background-size: 7px !important;
}

.indl ul li:last-child{
border-bottom: 1px solid #ccc !important;
}
.indl ul li a:hover{
background: #efefef url(../img/sp/icon_arrow_1.png) no-repeat 98% center !important;
background-size: 7px !important;
}

.ind_catch{
background: none !important;
background: #fff !important;
padding: 5px 10px 10px 15px !important;
box-sizing: border-box;
border: 1px solid #efefef !important;
border-radius: 5px;
height: 185px !important;
}

.ind_catch span{
/*
color: #e53f34;
font-size: 14px;
font-weight: bold;
xpadding: 15px 10px;
*/
font-size: 18px !important;
display: block;
background: none;
background: #fff url(../img/sp/bg_side_h2.png) no-repeat left center;
background-size: 5px;
line-height: 30px !important;
height: 30px !important;
margin: 0 0 0px;
padding: 0 0 0 15px;
}

.ind_catch h2{
padding: 5px 0;
line-height: 1.4em;
}

.inv{
display: block !important;
text-align: center !important;
}

div.ysr{
background: none !important;
margin: 10px auto !important;
}
div.ysr input[type="text"]{
width: 163px !important;
}

div.sbx{
overflow: hidden;
width: 224px;
margin: 0 auto;
}

p.fl{
position: relative;
float: left;
overflow: hidden;
margin: 3px 0px 10px 0 !important;
}
p.fl:nth-of-type(1){
margin: 5px 10px 10px 0 !important;
}

.index_main{
padding: 5px 5px 0px;
box-sizing: border-box;
border: 2px solid #e53f34;
border-radius: 5px;
overflow: hidden;
width: 100% !important;
min-width: 308px;
xheight: 47px;
background: #FFFDEC;
}

h2.main_title {
margin-left: -15px;
z-index: 100;
}

.main_content_inner {
padding: 10px 5px;
background-image: none;
}

.main_content_about {
float: none;
width: 100%;
}

.main_content_about h3,
.main_content_result h3{
font-size: 16px;
color: #E53F34;
padding: 4px 0px 6px 15px;
margin-bottom: 5px;
}

#all_menu .main_content ul {
width: 100%;
padding: 0px;
background-image: none;
list-style: inside none none;
background-color: #F2F2F2;
margin: 0 0 15px 0;
}
#all_menu li.last03{
padding: 0;
margin: 0;
}

.main_content_result {
float: none;
background-image: none;
width: 100%;
padding: 0px;
}

div.indl{
background: none;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}

div.indl h2{
background: none;
background: #E53F34 !important;
border: none !important;
color: #fff;
line-height: 30px !important;
height: 30px !important;
border-bottom: 1px solid #E53F34;
margin: 0px 0px 0px !important;
padding: 0px 6px 0 15px !important;
font-weight: normal;
font-size: 14px !important;
}

#all_menu .main_content h2 span {
padding: 2px 0 0 !important;
background-image: none !important;
line-height: 30px !important;
height: 30px !important;
}

#all_menu h2 span {
background-image: none !important;
}

#contents .block_l {
width: 257px;
padding: 11px 0px 0px;
float: left;
background-image: url("../img/h2_bg_01.gif");
background-repeat: no-repeat;
}

#info {
background-image: none !important;
background: #fff;
overflow: hidden;
margin: 0 0 15px;
padding: 5px 10px 15px !important;
box-sizing: border-box;
height: 230px !important;
}

#info h2{
text-align: center;
border-bottom: 2px solid #E53F34;
color: #E53F34;
padding: 0 0 10px !important;
margin: 10px 0 !important;
font-size: 20px !important;
}

#info h2 img{display: none;}

#info div {
width: 100%;
height: 150px;
overflow: auto;
xline-height: 24px !important;
}

span.style1{
background: #E53F34;
color: #fff;
font-weight: normal;
font-size: 12px;
padding: 2px;
margin: 0 5px 0 0 !important;
}

div#recipe_img{
width: 320px;
float: none;
margin: 0 auto;
}
div#recipe_img p{
text-align: center !important;
}
#material {
width: 300px;
float: none;
margin: 0 auto;
}

#recipe {
margin: 0px auto;
padding: 1.5em 0px;
width: 330px;
}