/*****************************************************************************
CSS only for /sumai_create/kitchen/
*****************************************************************************/

  /* mod_billboard
-----------------------------------------*/
.mod_billboard{
  margin: 0 auto;
  width: 967px;
  position: relative;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_billboard{
    width: 100%;
  }
  .mod_billboard .slick li{
    height:auto;
  }
  .mod_billboard .slick li a{
    position: static;
    left:0;
    width:auto;
 }
  .mod_billboard .slick li a img{
    height:auto;
    }
}
.mod_billboard_text{
  position: absolute;
  left:0;
  bottom: 0;
  padding: 20px 40px;
  width: 100%;
  box-sizing:border-box;
  background-color: rgba( 0, 0, 0, 0.5 );
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_billboard_text{
    padding: 10px;
    position: static;
    width: auto;
  }
}
.mod_billboard_text p{
  font-size: 95%;
  color: #FFF!important;
  line-height: 1.5;
}

/* mod_tab
-----------------------------------------*/
.mod_tab{
 margin-top:31px;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab{
   margin-top:10px;
  }
}
.mod_tab .resp-tabs-container{
 padding:20px 0 0 0;
 background-color:#efefef;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab .resp-tabs-container{
   padding:0;
  }
}
/* mod_tab_lead */
.mod_tab_lead{
 padding:20px 20px 20px 20px;
 background-color:#efefef;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_tab_lead{
    padding:20px;
  }
}
.mod_tab_lead p{
  line-height: 1.3;
}
/* mod_tab_menu */
.mod_tab_menu{
 padding:20px 0 0 0;
 background-color:#efefef;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_tab_menu{
  padding:0;
  }
}
.mod_tab_menu ul{
 width:968px;
 margin:0 0 0 -1px;
 overflow:hidden;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_menu ul{
   width:100%;
   margin:0;
  }
}
.mod_tab_menu ul li{
 float:left;
 width:483px;
 border-left:solid 1px #FFF;
}
.mod_tab_menu.mod_tab_menu-03 ul li{
 width:321px;
}
.mod_tab_menu.mod_tab_menu-03 ul li img{
 width:321px;
 height: auto;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_menu.mod_tab_menu-03 ul li img{
     width:100%;
  }
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_menu ul li,
  .mod_tab_menu.mod_tab_menu-03 ul li{
   float:none;
   width:100%;
   border-left:none;
  }
}
.mod_tab_menu ul li a{
 display:block;
 position:relative;
}
/* ex_tag */
.mod_tab_menu ul li a span {
    position: absolute;
    right: 0;
    top: 0;
}
#page .ex_tag{
 display:inline-block;
 color:#FFF;
 text-align:center;
  min-width:92px;
  width:auto!important;
  width:92px;
 box-sizing:border-box;
 padding:4px 10px 2px 10px;
 line-height:1;
}
#page .ex_tag.color01{
 background:#f0a8c0;
}
#page .ex_tag.color02{
 background:#b0d17a;
}
#page .ex_tag.color03{
 background:#79cff0;
}
#page .ex_tag.color04{
 background:#ae8547;
}
#page .ex_tag.color05{
 background:#f09056;
}
#page .ex_tag.color06{
 background:#dad168;
}
#page .ex_tag.color07{
 background:#fcc900;
}
#page .ex_tag.color08{
 background:#46a86b;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu ul li a img{
   width:100%;
   height:auto;
  }
}
.mod_tab_menu ul li a h3{
 display:block;
 position:absolute;
 bottom:0;
 left:0;
 width:483px;
 box-sizing:border-box;
 background: rgba(67, 67, 67, 0.5) none repeat scroll 0 0;
 background-color:#9d9d99\9;
 color: #fff;
 font-size:115%;
 font-weight: bold;
 height: 36px;
 padding: 10px 0 0 15px;
}
.mod_tab_menu.mod_tab_menu-03 ul li a h3{
 width:321px;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu ul li a h3,
  .mod_tab_menu.mod_tab_menu-03 ul li a h3{
   position:static;
   display:block;
   line-height:1.3;
   background-color:#9d9d99;
   vertical-align:middle;
   font-size:14px;
   width:auto;
   height:auto;
   padding:10px 5px 10px 10px;
  }
}
.mod_tab_menu ul li:nth-child(2n) a h3{
 width:482px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu ul li:nth-child(2n) a h3{
   width:100%;
  }
}
.mod_tab_menu.mod_tab_menu-03 ul li:nth-child(2n) a h3{
 width:321px;
}
.mod_tab_menu.mod_tab_menu-03 ul li:nth-child(3n) a h3{
 width:322px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu.mod_tab_menu-03 ul li:nth-child(2n) a h3,
  .mod_tab_menu.mod_tab_menu-03 ul li:nth-child(3n) a h3{
   width:100%;
  }
}
.mod_tab_menu_text{
 color:#666;
 padding: 12px 20px 14px 20px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu_text{
   padding:10px;
  }
}
.mod_tab_menu_text p{
 line-height:1.5;
 font-size:115%;
 margin:0 0 10px 0;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu_text p{
   font-size:12px;
   margin:0;
  }
}
.mod_tab_menu_text p strong{
 color:#333;
 display:inline-block;
 margin-bottom:10px;
}


/* mod_tab_jirei */
.mod_tab_jirei{
  margin: 10px 0 20px 0;
}
.mod_tab_jirei ul{
  margin: 0 0 0 23px;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
	.mod_tab_jirei{
	  margin: 0 0 20px 0;
	}
  .mod_tab_jirei ul{
    margin: 0 10px 0 10px;
  }
}
.mod_tab_jirei ul li{
  position: relative;
  float: left;
  width: 220px;
  margin: 0 5px 10px 5px;
  font-size: 90%;
  line-height: 1.3;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_jirei ul li{
    float: none;
    width: 100%;
    padding: 0 0 20px 0;
    margin: 0;
  }
}
.mod_tab_jirei ul li .kekkaThum img{
  width:220px;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_jirei ul li .kekkaThum{
    text-align: center;
    background-color: #FFF;
  }
  .mod_tab_jirei ul li .kekkaThum img{
    border: solid 10px #FFF;
  }
}
.mod_tab_jirei ul li .kekkaThum_txt{
  padding: 6px 0 0;
  font-size: 100%;
  line-height: 1.5;
  min-height:65px;
  height:auto!important;
  height:65px;
}

.mod_tab_jirei ul li .kekkaThum_txt img{
	margin:6px 0 0;
}

@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_jirei ul li .kekkaThum_txt{
    padding: 6px 0 0;
    min-height:inherit;
    height:autp;
  }
}
.mod_tab_jirei ul li .kekkaThum_txt a:link    {color:#333;}
.mod_tab_jirei ul li .kekkaThum_txt a:visited {color:#333;}
.mod_tab_jirei ul li .kekkaThum_txt a:hover   {color:#333;}
.mod_tab_jirei ul li .kekkaThum_txt a:active  {color:#333;}

.mod_tab_jirei ul li .kekkaThum_txt2 {
  display: none;
}
.mod_tab_jirei ul li .kekkaThum_txt2 img{
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 119px;
  height: auto;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_jirei ul li .kekkaThum_txt2 img{
    position: static;
    margin-top: 10px;
  }
}


/* mod_tab_detaillink */
.mod_tab_detaillink p {
}

.mod_tab_detaillink p a {
 background: #adadad none repeat scroll 0 0;
 color: #ffffff;
 display: block;
 font-size: 120%;
 font-weight: bold;
 padding:11px 0;
 text-align: center;
 line-height:1.3;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab_detaillink p a {
   display:table;
   width:100%;
   box-sizing:border-box;
   font-size: 14px;
   text-align:left;
   padding:12px 10px 10px 10px;
   position:relative;
   background-color:#FFF;
   color:#333;
  }
  .mod_tab_detaillink p a span{
   display:table-cell;
   vertical-align:middle;
  }
  .mod_tab_detaillink p a:after{
   display:table-cell;
   padding:0 0 0 5px;
   vertical-align:middle;
   content: " \f105";
   font-size:150%;
   font-family: FontAwesome;
   font-weight:normal;
  }
}

/* .mod_basecol.mod_basecol-four */
.mod_basecol.mod_basecol-four .mod_basecol_inner {
    width: auto;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_basecol.mod_basecol-four .mod_basecol_inner_box_img a span {
    line-height: 1.3;
  }
}
/* mod_basecol_inner_box_text */
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_basecol_inner_box_text p img{
    width: auto;
    height: auto;
  }
}

/* mod_linkbtn
-----------------------------------------*/
.mod_linkbtn{
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 30px;
  width: 967px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_linkbtn{
    width:auto;
    margin: 30px 10px 0 10px;
  }
}
/*  mod_tab_hiyou*/
.mod_linkbtn p{
  width: 478px;
  float: left;
  box-sizing:border-box;
  border: solid 1px #adadad;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_linkbtn p{
    width:100%;
    float: none;
  }
}
.mod_linkbtn p.faqlink{
  float: right;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_linkbtn p.faqlink{
    float: none;
    margin-top: 10px;
  }
}
.mod_linkbtn p a{
  display: block;
  background-color: #FFF;
  color: #000;
  font-weight: bold;
  font-size: 120%;
  padding: 34px 0px 34px 24px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_linkbtn p a{
    font-size: 120%;
    padding: 10px;
  }
}
.mod_linkbtn p a span{
  display: inline-block;
  padding: 20px 0 0 80px;
  box-sizing:border-box;
  min-height:50px;
  height:auto!important;
  height:50px;
  background:transparent url('/common/sumai2015/images/icon_yen.png') no-repeat top left;
}
.mod_linkbtn p.faqlink a span{
  background-image: url('/common/sumai2015/images/icon_faq.png');
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_linkbtn p a span{
    background-size:25px ;
    padding: 1px 0 0 30px;
    line-height: 1.5;
      min-height:25px;
      height:auto!important;
      height:25px;
  }
}



/* mod_pickup
-----------------------------------------*/
.mod_pickup{
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px 0 0 0;
  width: 967px;
  border-top: solid 1px #e6e6e6;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_pickup{
    width:auto;
    padding: 30px 10px 0 10px;
  }
}
.mod_pickup ul{
  width: 984px;
  margin: 0 -17px 0 0;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_pickup ul{
    width:auto;
    margin: 0;
  }
}
.mod_pickup ul li{
  float: left;
  text-align: center;
  font-size: 145%;
  line-height: 1.3;
  font-weight: bold;
  width:475px;
  margin: 0 17px 15px 0;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
  .mod_pickup ul li{
    float: none;
    font-size: 145%;
    width:100%;
    margin: 0 0 30px 0;
  }
}
.mod_pickup ul li img{
  margin-top: 6px;
}
.mod_pickup ul li a{
  display:block;
}
.mod_pickup a:link    {color:#000;}
.mod_pickup a:visited {color:#000;}
.mod_pickup a:hover   {color:#000;text-decoration: underline;}
.mod_pickup a:active  {color:#000;text-decoration: underline;}


/* mod_widebnr
-----------------------------------------*/
.mod_widebnr{
 margin:0 auto;
 width:967px;
 margin-top:40px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.mod_widebnr{
 margin:20px 10px 0 10px;
 width:auto;
}
}
.mod_widebnr p a{
 display:block;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.mod_widebnr p a img{
 width:100%;
 height:auto;
}
}


