/*****************************************************************************
CSS only for https://sumai.panasonic.jp/
*****************************************************************************/


#browsebar-name .name {
    color: #fff;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    padding: 17px 0 14px;
    text-align: center;
    width: 146px;
}
#browsebar-name .name>a {
    padding: 0;
}

/* mod_billboard
-----------------------------------------*/
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_billboard{
  }
  .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_menulink
-----------------------------------------*/
.mod_menulink{
 padding:12px 0 0 0;
 background-color:#e8e8e8;
}
.mod_menulink_in{
 margin:0 auto;
 width:967px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in{
   width:100%;
  }
}
.mod_menulink_in .menulinkTitle{
 margin:0 0 15px 0;
 color:#333;
 font-size:150%;
 line-height:1.5;
 font-weight:bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in .menulinkTitle{
   margin:0 0 10px 0;
   font-size:16px;
  }
}
/* mod_menulink_in_list */
.mod_menulink_in_list{
}
.mod_menulink_in_list ul{
}
.mod_menulink_in_list ul:after {
  content: "";
  clear: both;
  display: block;
}
.mod_menulink_in_list ul li{
 float:left;
 width:321px;
 border-right:solid 1px #FFF;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list ul li{
   float:left;
   width:50%;
   box-sizing:border-box;
  }
}
.mod_menulink_in_list ul li:nth-child(3n){
 border-right:none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list ul li:nth-child(3n){
   border-right:solid 1px #FFF;
  }
  .mod_menulink_in_list ul li:nth-child(even){
   border-right:none;
  }
}
.mod_menulink_in_list ul li a{
 position:relative;
 z-index:99;
 display:block;
 font-size:115%;
 line-height:1.5;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list ul li a{
   font-size:12px;
  }
}
.mod_menulink_in_list ul li a:link    {color:#666;}
.mod_menulink_in_list ul li a:visited {color:#666;}
.mod_menulink_in_list ul li a:hover   {color:#666;}
.mod_menulink_in_list ul li a:active  {color:#666;}

.mod_menulink_in_list ul li span{
 display:block;
 padding:11px 20px 25px 20px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list ul li span{
   padding:10px;
  }
}
/* mod_menulink_in_list_movie */
.mod_menulink_in_list_movie{
 height:210px;
 overflow:hidden;
}
.mod_menulink_in_list_movie object{
 position:relative;
 z-index:-1;
}

@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list_movie{
   display:none;
  }
}
/* mod_menulink_in_list_spmovie */
.mod_menulink_in_list_spmovie{
 display:none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_menulink_in_list_spmovie {
   display:block;
    position: relative;
    width: 100%;
    padding:9.17% 0 56.25% 0;
  }
  .mod_menulink_in_list_spmovie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/* mod_menulink
-----------------------------------------*/
.mod_category{
 margin:0 auto;
 width:967px;
 margin-top:22px;
 margin-bottom:40px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category{
   width:100%;
   margin-top:10px;
   margin-bottom:20px;
  }
}
.mod_category .categoryTitle{
 padding:9px 0 8px 0;
 width:966px;
 line-height:1.5;
 font-size:145%;
 color:#FFF;
 background-color:#000;
 text-align:center;
 font-weight:bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category .categoryTitle{
   padding:5px 0 4px 0;
   width:100%;
   font-size:14px;
  }
}
/* mod_category_link */
.mod_category_link ul{
 width:968px;
 margin:0 -1px 0 0;
 overflow:hidden;
 background-color:#efefef;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category_link ul{
   width:100%;
   margin:0;
   box-sizing:border-box;
   border-left:solid 1px #FFF;
  }
}
.mod_category_link ul li{
 position:relative;
 float:left;
 width:241px;
 border-right:solid 1px #FFF;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category_link ul li{
   float:left;
   width:50%;
   box-sizing:border-box;
   border-right:none;
   border-bottom:solid 1px #FFF;
   background: rgba(67, 67, 67, 0.5) none repeat scroll 0 0;
  }
  .mod_category_link ul li img{
   width:100%;
   height:auto;
  }
}

.mod_category_link ul li a{
 display:block;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category_link ul li a{
   border-right:solid 1px #FFF;
  }
}
.mod_category_link ul li span{
 position:absolute;
 bottom:0;
 left:0;
 width:241px;
 box-sizing:border-box;
 background: rgba(67, 67, 67, 0.5) none repeat scroll 0 0;
 background-color:#9d9d99\9;
 color: #fff;
 font-size:120%;
 font-weight: bold;
 height: 36px;
 padding: 10px 0 0 15px;
 display:block;
}
.mod_category_link ul li span.twolines{
  padding-top: 5px;
  height: 54px;
  line-height: 1.3;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_category_link ul li span,
  .mod_category_link ul li span.twolines{
  font-size:120%;
   position:static;
   display:table-cell;
   line-height:1.3;
   background-color:transparent;
   vertical-align:middle;
   box-sizing:border-box;
   font-size:14px;
   height:50px;
   padding:5px;
  }
}
.mod_category_link ul li:nth-child(4n) span{
 width:240px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.mod_category_link ul li:nth-child(4n) span{
 width:100%;
}
}
/* mod_category_link */
.mod_category_link p{
}

.mod_category_link p {
}

.mod_category_link 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_category_link 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;
   border-bottom:solid 1px #CCC;
  }
  .mod_category_link p a span{
   display:table-cell;
   vertical-align:middle;
  }
  .mod_category_link 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_splink
-----------------------------------------*/
.mod_splink{
  display: none;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_splink{
    display: block;
    border-bottom: 1px solid #e6e6e6;
  }
  .mod_splink .customerLink 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_splink .customerLink a span{
   display:table-cell;
   vertical-align:middle;
  }
  .mod_splink .customerLink a:after{
   display:table-cell;
   width: 20px;
   text-align: center;
   padding:0 0 0 5px;
   vertical-align:middle;
   content: " \f105";
   font-size:150%;
   font-family: FontAwesome;
   font-weight:normal;
  }
}

/* mod_splink
-----------------------------------------*/
.mod_message{
  margin: 0 auto;
  width: 967px;
  border:1px #CCC solid;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_message{
  margin: 0  10px 0 10px;
  width: auto;
  }
}
.mod_message p{
  padding:10px;
  text-align:center;
  line-height: 1.5;
}

/* mod_linkbtn
-----------------------------------------*/
.mod_linkbtn{
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: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_breadcrumb_inner h1
-----------------------------------------*/
.mod_breadcrumb_inner h1{
 display:table-cell;
 vertical-align:middle;
 font-size: 12px;
}
.mod_breadcrumb_inner h1 a:link    {color:#333;}
.mod_breadcrumb_inner h1 a:visited {color:#333;}
.mod_breadcrumb_inner h1 a:hover   {color:#707070;}
.mod_breadcrumb_inner h1 a:active  {color:#707070;}
@media only screen and (max-width:640px) and (max-device-width:1280px){
  .mod_breadcrumb_inner h1{
   display:table-cell;
   padding-left:10px;
   height: 42px;
   vertical-align: middle;
   font:inherit;
  }
  .mod_breadcrumb_inner h1 a:link    {color:#000; text-decoration:none;}
  .mod_breadcrumb_inner h1 a:visited {color:#000; text-decoration:none;}
  .mod_breadcrumb_inner h1 a:hover   {color:#000; text-decoration:none;}
  .mod_breadcrumb_inner h1 a:active  {color:#000; text-decoration:none;}
}

/* mod_menulink
-----------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.mod_menulink .pc-show{
	display:none;
}
}

/* Supportlink
-----------------------------------------*/
.Supportlink{
  margin: 0 auto;
  width: 967px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink{
  margin: 0 10px;
  width: auto;
}
}
.Supportlink .Supportlink__inner{
  margin:20px 12px 0 0;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner{
  margin:20px 0;
}
}

.Supportlink .Supportlink__inner:after {
content: "";
display: block;
clear: both;
}
.Supportlink .Supportlink__inner a:link    {color:#000; text-decoration: none;}
.Supportlink .Supportlink__inner a:hover   {color:#000; text-decoration: underline;}
.Supportlink .Supportlink__inner a:focus   {color:#000; text-decoration: underline;}
.Supportlink .Supportlink__inner a:active  {color:#000; text-decoration: underline;}

.Supportlink .Supportlink__inner dl{
  border:solid 1px #cccccc;
  padding: 13px 10px 15px 13px;
  float: left;
  width: 50%;
  box-sizing:border-box;
  margin-right: 12px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner dl{
  padding: 13px 10px 15px 13px;
  float: none;
  width:auto;
  margin-right: 0;
  margin-bottom: 10px;
}
}
.Supportlink .Supportlink__inner dl:nth-child(2n){
  margin-right: -12px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner dl:nth-child(2n){
  margin-right: 0;
}
}
.Supportlink .Supportlink__inner dl dt{
  background-color:#e8e8e8;
  font-size:16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 14px 14px 13px 14px;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner dl dt{
  padding: 14px;
}
}
.Supportlink .Supportlink__inner dl dt a{
  position: relative;
  padding-right: 20px;
}
.Supportlink .Supportlink__inner dl dt a::after {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 28px;
    color: #666666;
    content: " \f105";
    font-family: FontAwesome;
    margin-top: -16px;
    font-weight: normal;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner dl dt a::after {
    margin-top: -14px;
}
}
.Supportlink .Supportlink__inner dl dd ul li{
  position: relative;
  margin-top: 10px;
  padding-left: 28px;
}
.Supportlink .Supportlink__inner dl dd ul li::before {
    position: absolute;
    top:0;
    left:16px;
    font-size: 17px;
    margin-top: -3px;
    color: #000;
    content: " \f105";
    font-family: FontAwesome;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.Supportlink .Supportlink__inner dl dd ul li::before {
    margin-top: -2px;
}
}

/* FloatBnr
-----------------------------------------*/
.FloatBnr{
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 99;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.FloatBnr{
  bottom: 0px;
  left:0;
  right: 0px;
}
}
.FloatBnr p{
}
.FloatBnr p a{
  display: block;
  position: relative;
}
.FloatBnr p a span{
  display: inline-block;
  width: 30px;
  height: 30px;
  position:absolute;
  top:-15px;
  right: 5px;
}
.FloatBnr p a span span{
  display:block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.FloatBnr p a span i{
  font-size: 26px;
  color: #000;
  background-color: #FFF;
  border-radius: 15px;
}
.FloatBnr p img.pcimg{
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.FloatBnr p img.pcimg{
  display: none;
}
}
.FloatBnr p img.spimg{
  display: none;
}
@media only screen and (max-device-width: 1280px) and (max-width: 640px){
.FloatBnr p img.spimg{
  display: block;
  width: 100%;
  height: auto;
}
}