/*****************************************************************************
CSS only for http://sumai.panasonic.jp/dressing/
*****************************************************************************/

/* mod_tab
-----------------------------------------*/
.mod_tab{
}
@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_menu */
.mod_tab_menu{
}
.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.mod_tab_menu-04 ul{
    border-left:solid 1px #FFF;
  }
}
.mod_tab_menu ul li{
 float:left;
 width:483px;
 border-left:solid 1px #FFF;
}
.mod_tab_menu ul li.line{
 border-right:solid 1px #FFF;
}
.mod_tab_menu.mod_tab_menu-03 ul li{
 width:321px;
}
.mod_tab_menu.mod_tab_menu-04 ul li{
 width:241px;
}
@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,
  .mod_tab_menu.mod_tab_menu-04 ul li,
  .mod_tab_menu ul li.line{
   float:none;
   width:100%;
   border-left:none;
  }
  .mod_tab_menu.mod_tab_menu-04 ul li{
   float:left;
   width:50%;
  }
}

.mod_tab_menu ul li a{
 display:block;
 position:relative;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu.mod_tab_menu-04 ul li a{
   border-right:solid 1px #FFF;
  }
  .mod_tab_menu ul li a img{
   width:100%;
   height:auto;
  }
}
.mod_tab_menu ul li a span{
 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 span{
 width:321px;
}
.mod_tab_menu.mod_tab_menu-04 ul li a span{
 width:241px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu ul li a span,
  .mod_tab_menu.mod_tab_menu-03 ul li a span,
  .mod_tab_menu.mod_tab_menu-04 ul li a span{
   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.mod_tab_menu-04 ul li a span{
   font-size:12px;
  }
}
.mod_tab_menu ul li:nth-child(2n) a span{
 width:482px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu ul li:nth-child(2n) a span{
   width:100%;
  }
}
.mod_tab_menu.mod_tab_menu-03 ul li:nth-child(2n) a span{
 width:321px;
}
.mod_tab_menu.mod_tab_menu-03 ul li:nth-child(3n) a span{
 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 span,
  .mod_tab_menu.mod_tab_menu-03 ul li:nth-child(3n) a span{
   width:100%;
  }
}
.mod_tab_menu.mod_tab_menu-04 ul li:nth-child(2n) a span{
 width:241px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_menu.mod_tab_menu-04 ul li:nth-child(2n) a span{
   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.mod_tab_menu-04 .mod_tab_menu_text br{
   display:none;
  }
}
.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.mod_tab_menu-04 .mod_tab_menu_text p{
 font-size:100%;
}
.mod_tab_menu_text p strong{
 color:#333;
 display:inline-block;
 margin-bottom:10px;
}

/* mod_tab_conceptlink */
.mod_tab_conceptlink{
}

.mod_tab_conceptlink{
 margin:0 20px 0 20px;
 border-top:solid 1px #FFF;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.mod_tab_conceptlink{
 margin:0;
 border-top:none;
 background-color:#FFF;
}
}
.mod_tab_conceptlink ul{
 width:945px;
 margin:0 -20px 0 0;
 overflow:hidden;
 }
 @media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_conceptlink ul{
   width:100%;
   margin:0;
   border-top:solid 1px #CCC;
   }
}
.mod_tab_conceptlink ul li{
 float:left;
 width:295px;
 margin:20px 20px 20px 0;
}
 @media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab_conceptlink ul li{
   float:none;
   width:100%;
   margin:0;
   border-bottom:solid 1px #CCC;
  }
  .mod_tab_conceptlink ul li br{
   display:none;
  }
}
.mod_tab_conceptlink ul li a{
 display:table;
 line-height:1.5;
}
.mod_tab_conceptlink ul li  a:link    {color:#333;}
.mod_tab_conceptlink ul li  a:visited {color:#333;}
.mod_tab_conceptlink ul li  a:hover   {color:#333;}
.mod_tab_conceptlink ul li  a:active  {color:#333;}

.mod_tab_conceptlink ul li a span{
 display:table-cell;
 vertical-align:middle;
}
.mod_tab_conceptlink ul li a span.conceptlinkImg{
 width:80px;
 padding:0 13px 0 0;
}

/* 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 ul{
    margin: 0 10px 0 10px;
  }
}
.mod_tab_jirei ul li{
  position: relative;
  float: left;
  width: 220px;
  /*padding: 0 0 50px 0;*/
  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:210px;
  border: solid 5px #FFF;
}
@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 5px #FFF;
  }
}
.mod_tab_jirei ul li .kekkaThum_txt{
  margin: 10px 0 10px 0;
}
.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_hiyou */
.mod_tab_hiyou {
    border: 1px solid #adadad;
    box-sizing: border-box;
    margin: 0 auto 20px;
    width: 800px;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
.mod_tab_hiyou {
    margin: 0 10px 20px;
    width: auto;
}
}
.mod_tab_hiyou p a {
    background-color: #ffffff;
    color: #000000;
    display: block;
    font-size: 120%;
    font-weight: bold;
    padding: 14px 0;
    text-align: center;
    vertical-align: middle;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
.mod_tab_hiyou p a {
    padding: 10px;
    text-align: left;
}
}
.mod_tab_hiyou p a span {
    background: rgba(0, 0, 0, 0) url("/common/sumai2015/images/icon_yen.png") no-repeat scroll left top;
    box-sizing: border-box;
    display: inline-block;
    height: auto !important;
    min-height: 50px;
    padding: 20px 0 0 60px;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
.mod_tab_hiyou p a span {
    background-size: 25px auto;
    height: auto !important;
    line-height: 1.5;
    min-height: 25px;
    padding: 1px 0 0 30px;
}
}
/* 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;
  }
}

/* boxlink */
.mod_tab .boxlink {
 position:absolute;
 top:2px;
 left:484px;
 width:240px;
 height:50px;
 display:table;
 margin:0 2px 0 0;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_tab .boxlink {
   position:static;
   top:0;
   left:0;
   width:100%;
   height:auto;
   display:block;
   margin:0 2px 0 0;
  }
  .mod_tab .boxlink br{
   display:none;
  }
}
.mod_tab .boxlink a{
 display:table-cell;
 vertical-align:middle;
 width:240px;
 height:50px;
 color:#666;
 text-align:center;
 font-family: Ryumin Medium KL;
 font-weight:bold;
 font-size:120%;
 background-color:#d7d7d7;
}
@media only screen and (max-width: 640px) and (max-device-width: 1280px) {
  .mod_tab .boxlink a {
   display:table;
   width:100%;
   box-sizing:border-box;
   font-size: 16px;
   text-align:left;
   padding:10px 10px 10px 10px;
   position:relative;
  }
  .mod_tab .boxlink a span{
   display:table-cell;
   vertical-align:middle;
  }
  .mod_tab .boxlink a:after{
   display:table-cell;
   padding:0 0 0 5px;
   text-align:right;
   vertical-align:middle;
   content: " \f105";
   font-size:150%;
   font-family: FontAwesome;
   font-weight:normal;
  }
}
.mod_tab .boxlink a small{
 font-size:90%;
}

/* 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;
}
}