@charset "utf-8";

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

  /* リセット */
  body, header, footer, nav, article, section, div, h1, h2, h3, h4, h5, h6, table, tr, td, ul, ol, li, p, a, span, img {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
  }

  body{
  	font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', verdana, Helvetica,Arial, sans-serif;
    font-size: 16px;
  }

  #main-780{
    width: 100%;
  }
  #side1 #s-c ul,
  #side1 #s-c ul li{
    background-image: none;
    padding: 0;
  }

  /* バナー */
  .banner a{
    width: 100% !important;
    background-repeat: no-repeat !important;
    background-size:cover !important;
    height: 31vw !important;
  }
  .banner a .bnr-price01,
  .banner a .bnr-price01-t,
  .banner a .bnr-price01-sale,
  .banner a .bnr-price01s,
  .banner a .bnr-price01-ecocute{
    font-size: .7em;
    top: 18vw;
    left: auto;
    right: 40vw;
  }

  .banner a .bnr-price01tax,
  .banner a .bnr-price01tax-t,
  .banner a .bnr-price01tax-sale,
  .banner a .bnr-price01stax,
  .banner a .bnr-price01tax-ecocute{
    font-size: .5em;
    top: 21vw;
    left: auto;
    right: 40vw;
    letter-spacing: -0.1em;
  }

  .banner a .bnr-off-t,
  .banner a .bnr-offs,
  .banner a .bnr-off-3,
  .banner a .bnr-off-sale{
    font-size: .9em;
    top: 17vw;
    left: auto;
    right: 30vw;
  }
  .banner a .bnr-off-3{
    right: 33vw;
  }

  .banner a .bnr-price02,
  .banner a .bnr-price02s,
  .banner a .bnr-price02-ecocute{
    font-size: 1.2em;
    top: 17vw;
    left: auto;
    right: 2vw;
  }

  .banner a .bnr-price02tax,
  .banner a .bnr-price02stax,
  .banner a .bnr-price02tax-ecocute{
    font-size: .5em;
    top: 21vw;
    left: auto;
    right: 2.6vw;
    letter-spacing: -0.1em;
  }



  /* 赤い背景のバナー */
  div.top-sale-bg {
    width: 100%;
    height: 33.8vw;
    background-size: cover ;
    padding:0;
    margin: 0 0 2vw 0;
    position: relative;

  }
  div.top-sale-bg .selling-price,
  div.top-sale-bg a.top-sale-btn-r-2,
  div.top-sale-bg a.top-sale-btn-g-2{
    position: absolute;
    padding: 0;
    margin: 0;
  }

  div.top-sale-bg a.top-sale-btn-r-2,
  div.top-sale-bg a.top-sale-btn-g-2{
    width: 20%;
    background-size: cover;
    height: 5.4vw;
    bottom: 2vw;
    right: 1.5vw;
  }
  div.top-sale-bg a.top-sale-btn-r-2 {
    width: 13%;
    right: 22.5vw;
  }
  div.top-sale-bg div.selling-price {
    bottom: 10.2vw;
    right: 7.5vw;
    font-size: 1.7em;
  }

  /* ランキング */
  #top-ranking{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-image: none;
  }
  #top-ranking ol li{
    width: 96%;
    height: auto;
    box-sizing: border-box;
    margin: 2%;
    padding: 0;
    border-bottom: 1px solid #cfcfcf;
    display: flex;
    justify-content: space-between;
    padding-bottom: 5vw;
    background-repeat: no-repeat;
    position:relative;
    z-index: 0;
  }
  #top-ranking ol li img{
    margin: 0;
    width: 40vw;
  }
  #top-ranking ol li:before {
    position: absolute;
    content: "";
    z-index: 1;
    width: 54px;
    height: 50px;
    right: 0;
    bottom: 5vw;
  }
  #top-ranking ol li:nth-child(1):before{
    background: url(/img/ranking/gold.png);
  }
  #top-ranking ol li:nth-child(2):before{
    background: url(/img/ranking/silver.png);
  }
  #top-ranking ol li:nth-child(3):before{
    background: url(/img/ranking/bronze.png);
  }


  /* ログイン*/
  #undercolumn_login{
    width: 100%;
  }

  #undercolumn_login input[type="text"],
  #undercolumn_login input[type="password"]{
    padding: 2% 2%;
    width: 96% !important;
    margin: 2%;
    box-sizing: border-box;
  }
  #undercolumn_login dt{
    background-color: #E8EAEB;
    border-bottom: 1px solid #C2C9CB;
    font-weight: bold;
    padding: 2.5% 2%;
    font-size: 1em;
    }


  /* エアコンサイドナビ*/
  #side1 .b10{
    margin: 0;
  }

  /* ガスコンロサイドナビ*/
  #side1 .sub-g-s-m-bg1,
  #side1 .sub-g-s-m-bg2{
    padding: 0;
    background-image: none;
  }
  #side1 .sub-g-s-m-bg1 li a,
  #side1 .sub-g-s-m-bg2 li a{
    margin: 0;
  }
  /* エコキュートサイドナビ*/
  #side1 .sub-ecocute-more{
    background-image: none;
  }

  /* 給湯器オンライン見積もり*/
  #gaisan3 #box2,
  #gaisan3 #box4,
  #gaisan3 #box5a,
  #gaisan3 #box12a,
  #gaisan3 #box10,
  #gaisan3 #box13,
  #gaisan3 .main-box-d,
  #gaisan3 .main-box-d ul,
  #gaisan3 .eco-info{
    width: 100%;
    background-size:100%;
  }

  #gaisan3 .box6{
    width: 100%;
    background-size:100%;
    padding: 0;
  }

  #gaisan3 .box6 img{
    width: 90%;
    margin-left: 5%;
  }
  #gaisan3 .box7,
  #gaisan3 .tbl1,
  #gaisan3 .tbl2{
    box-sizing: border-box;
    width: 90%;
    margin: 0 5% 3% 5%;
    padding: 0;
    border-spacing: 1px;
  }
  #gaisan3 .tbl1 th{
    display: none;
  }
  #gaisan3 .tbl1 td{
    display: block;
    box-sizing: border-box;
  }
  #gaisan3 .eco-info{
    padding: 0;
    height: 46vw;
    box-sizing: border-box;
    padding: 12% 0 0 28%;
    font-size: 1em;
    line-height: 2em;
  }
  #gaisan3 #box14{
    width: 90%;
    margin: 0 5%;
  }
  #gaisan3 #box15{
    box-sizing: border-box;
    width: 90%;
    margin: 0 5%;
  }
  #gaisan3 .tbl1 td.td1,
  #gaisan3 .tbl1 td.td5,
  #gaisan3 .tbl1 td.td6,
  #gaisan3 .tbl1 td.td7,
  #gaisan3 .tbl1 td.td8,
  #gaisan3 .tbl1 td.td11,
  #gaisan3 .tbl1 td.td12,
  #gaisan3 .tbl1 td.td13,
  #gaisan3 .tbl1 td.td14,
  #gaisan3 .tbl1 td.td15,
  #gaisan3 .tbl1 td.td16,
  #gaisan3 .tbl1 td.td17,
  #gaisan3 .tbl1 td.td18,
  #gaisan3 .tbl1 td.td19,
  #gaisan3 .tbl1 td.td20{
    background-image: none;
    text-indent: 0;
    background-color: #ffe5af;
    width: 100%;
    height: auto;
    padding: 2%;
    font-weight: bold;
  }
  #gaisan3 .tbl2 td.td9{
    /* background-image: none;
    text-indent: 0; */
    color: red;
    font-size: 4vw;
    font-weight: bold;
    width: 40%;
    height: 10vw;
  }
  #gaisan3 .tbl2 td.td10{
    font-size: 7vw;
    line-height: 100%;
    height: 10vw;
  }
  #gaisan3 .box8{
    width: 100%;
    padding: 0;
    text-align: center;
  }
  #gaisan3 .tbl2 td.td10 span.text-s{
    line-height: 95%;
  }
  #gaisan3 .tbl1 td.td2{
    width: 60%;
    float: left;
    height: 11vw;
    font-size: 3.5vw;
    font-weight: bold;
  }
  #gaisan3 .tbl1 td.td3{
    width: 10%;
    float: left;
    height: 11vw;
  }
  #gaisan3 .tbl1 td.td4{
    width: 30%;
    float: left;
    height: 11vw;
  }
  #gaisan3 .box7 li.img1{
    box-sizing: border-box;
    width: 30%;
  }
  #gaisan3 .box7 li.txt1{
    box-sizing: border-box;
    width: 70%;
  }
  #gaisan3 .box7 li.txt1 p{
    font-size: .8em;
  }
  #gaisan3 #box5a,
  #gaisan3 #box12a{
    height: 15vw;
  }
  #gaisan3 #box3{
    box-sizing: border-box;
    width: 100%;
    background-size:100%;
    padding: 2%;
  }
  #gaisan3 #box3 li{
    width: 23% !important;
    margin: 0 2% 0 0 !important;
    background-size:100% !important;
    height: 9.3vw !important;
  }

  #gaisan3 #box2{
    height: 8.5vw;
  }

  #gaisan2 .wh-3-btn,
  #gaisan2 .wh-e-btn{
    width: 100%;
    background-size: cover;
    height: 23.3vw;
  }
  #gaisan2 #box69,
  #gaisan2 #box42,
  #gaisan2 #box79,
  #gaisan2 #box58,
  #gaisan2 #box57,
  #gaisan2 #box50,
  #gaisan2 #box26,
  #gaisan2 #box2,
  #gaisan2 #box15{
    width: 100%;
    background-size:100%;
    height: 14.6vw;
  }

  #gaisan2 #box3,
  #gaisan2 #box4,
  #gaisan2 #box5,
  #gaisan2 .box8,
  #gaisan2 .box-title{
    width: 100%;
    background-size:100%;
  }
  #gaisan2 .box-title{
    height: 8.2vw;
  }
  #gaisan2 #box3{
    width: 95% !important;
    padding: 0 0 0 5% !important;
    background-size: 100% !important;
  }
  #gaisan2 #box4{
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
  }
  #gaisan2 .box-title + ul{
    width: 95% !important;
    padding: 0 !important;
    background-size: 100% !important;
    padding-left: 5% !important;
  }
  #gaisan2 .box-title + ul li strong{
    font-size: .9em;
  }
  #gaisan1 h2,
  #gaisan1 #box2,
  #gaisan1 #box3,
  #gaisan1 #box4,
  #gaisan1 #box5,
  #gaisan1 #box10{
    width: 100vw;
    background-size:100vw;
  }
  #gaisan1 #variableLink{
    border: none;
  }
  #gaisan1 h2{  height: 33vw;}
  #gaisan1 #box2{  height: 40vw;}
  #gaisan1 #box3{  height: 2vw;}
  #gaisan1 ul#box4{
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  #gaisan1 #box4 li{
    width: 48%;
    margin: 0 0 1% 1%;
  }
  #gaisan1 #box4 li a{
    width: 100% !important;
    background-size:cover !important;
    height: 13.1vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;

  }
  #gaisan1 #box5{  height: 2vw;}
  #gaisan1 #box6-tit{
    background-position: 50% top;
    background-size:cover;
    width: 100%;
  }
  #gaisan1 #box6{
    width: 100%;
  }
  #gaisan1 #box6 li{
    width: 76%;
    margin: 5% 12%;
    display: block;
  }
  #gaisan1 #box6 #left a,
  #gaisan1 #box6 #right a{
    width: 100%;
    margin: 0;
  }
  #gaisan1 #box7{
    display: none;
  }
  #gaisan1 #box8 form{
    width: 100vw;
  }
  #gaisan1 #box9 {
    background-size:cover;
    width: 95%;
    height: 43px;
    padding: 0;
  }
  #gaisan1 #box9 a {
    background-image: none;
  }
  #gaisan1 #box10{
    width: 100%;
    background-size: 100%;
    box-sizing: border-box;
    height: 15.5vw;
  }
  #gaisan1 #box16{
    width: 100%;
    background-size: 100%;
    box-sizing: border-box;
    height: 15.5vw;
  }

  #gaisan1 table.tbl1{
    width: 100vw;
  }

  #gaisan1 table.tbl1 td.tbl2{
    width: 5%;
    padding: 0;
  }

  #gaisan1 table.tbl1 td#box11{
    box-sizing: border-box;
    width: 18%;
    padding: 1%;
  }
  #gaisan1 table.tbl1 td#box12{
    box-sizing: border-box;
    width: 18.3%;
    padding: 1%;
  }
  #gaisan1 table.tbl1 td#box13{
    box-sizing: border-box;
    width: 18.2%;
    padding: 1%;
  }
  #gaisan1 table.tbl1 td#box14{
    box-sizing: border-box;
    width: 17.5%;
    padding: 1%;
  }

  #gaisan1 table td{
    font-size: .8em;
  }

  #gaisan1 td.tbl4{
    box-sizing: border-box;
    width: 28%;
    padding: 1%;
  }
  #gaisan1 td.tbl5{
    box-sizing: border-box;
    width: 29%;
    padding: 1%;
  }
  #gaisan1 td.tbl6{
    box-sizing: border-box;
    width: 35%;
    padding: 1%;
  }

  #gaisan1 #box21,
  #gaisan1 #box22{
    width: 100%;
    background-size: 100%;
    box-sizing: border-box;
    height: 19.5vw;
  }
  #gaisan1 #box8,
  #gaisan1 #box24{
    width: 100%;
  }
  #gaisan1 #box24 a{
    font-size: .7em;
    padding: 2%;
  }

  #gaisan2 h2,
  #gaisan3 h2{
    width: 100vw;
    background-size:100vw;
    height: 17vw;
  }

  /* カテゴリ一覧共通 */
  .main-box-c ul{
    margin-left: 3%;
  }
  .main-box-c ul li{
    width: 31%;
    margin: 0 1% 1% 0;
    font-size: .8em;
  }
  .main-box-c ul li img{
    width: 30vw;
  }


  /* サイドナビ トイレ */
  #side1 #sub-box-cate-p ul {
    background: none;
  }
  #side1 .sub-toilet-more{
    background-image: none;
  }
  #side1 .sub-toilet-more a{
    font-weight:normal;
    padding: 1rem;
  }
  #side1 #sub-box-cate-p ul{
    margin: 0;
    padding: 0;
  }
  #side1 #sub-box-acce ul,
  #sub-box-cate ul{
    background-image: none;
    margin: 0;
    padding: 0;
  }
  #side1 #sub-box-s-t-seat ul,
  #side1 #sub-box-series-t-seat ul{
    background-image: none;
    margin: 0
  }

  /* お問い合わせ */
  .step{
    width: 92%;
    padding: 4%;
  }

  #contents .step p,#contents .step table,.step table tbody,.step table tr,.step table td,.step textarea,.step input,.step a{
    display: block;
    width: 100%;
    margin: 0;
  }
  .step table tr{
    margin-bottom: 5%;
  }
  #contents .step p input{
    width: auto;
  }
  #contents .step p label{
    font-size: 1.5em;
  }
  #contents .step p input + label{

  }
  #contents .step .submit{
    width: 100%;
    height: auto;

  }
  #contents .step input{
    height: 36px;
    padding: 1px 5px;
    border: 1px solid #d4d4d7;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #FFF;
    box-sizing: border-box;
  }
  .p-text-box-2{
    width: 96%;
    padding: 2%;

  }


  /* 自分で取付 */
  .main-box-c table{
    width: 100% !important;
  }

  .main-box-c #netto,
  .main-box-c #nh031,
  .main-box-c #nh03111{
    width: 20%;
  }

  #kabejya,#wanjya,#tyujya,#kabetanjya,#senmen2,#akusetori,#senjyou,#futu_senbe,#kogaden
  {
    width: 20%;
  }


  /* 取付・取替工事のご案内 */
  .n-main-box{
    width: 100%;
  }
  #const-box-11,#const-box-12,#const-box-13{
    width: 157%;
    padding: 0 0 0 5%;
    background-size:cover;
    margin-bottom: 25%;
  }
  #contents #const-box-11 p,
  #contents #const-box-12 p,
  #contents #const-box-13 p{
    width: 55%;
    padding-top: 18%;
  }
  #contents #const-box-12 p + p,
  #contents #const-box-13 p + p{
      padding-top: 0;
  }


  .n-main-box h3,
  .main-box-c h3{
    position: relative;/*絶対位置*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    height: auto;
    background: none;
    border: 1px solid #bbb;
    border-radius: 3px;
    box-shadow: inset 0px 0px 3px 1px #ddd;
    padding: .5em .5em .5em 2em;
  }
  .n-main-box h3:before{
    position: absolute;
    content: "";
    background-color: #ff5904;
    width: .4em;
    height: 68%;
    left: .8em;
    top: 0.5em;
  }
  #construction-box-12{
    width: 100%;
    padding: 0;
  }
  #construction-box-12 p{
    background: rgba(255,255,255,0.4);
  }

  /* カテゴリ共通 */

  #first-box h3,
  .n-main-box h3,
  .main-box-c h3,
  .sp-h3{
    position: relative;/*絶対位置*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    height: auto;
    background: none;
    border: 1px solid #bbb;
    border-radius: 3px;
    box-shadow: inset 0px 0px 3px 1px #ddd;
    padding: .5em .5em .5em 2em;
  }
  #first-box h3:before,
  .n-main-box h3:before,
  .main-box-c h3:before,
  .sp-h3:before{
    position: absolute;
    content: "";
    background-color: #ff5904;
    width: .4em;
    height: 68%;
    left: .8em;
    top: 0.5em;
  }
  a.work-info-btn {
      width: 100vw;
      text-indent:100%;
      white-space:nowrap;
      overflow:hidden;
      padding: 0;
      display:block;
      background: url(/img/waterheater/work_info.gif);
      background-size:cover;
      height: 19.2vw;
  }
  a.work-info-btn + p {
    width: 96%;
    margin: 2% !important;
    padding: 0;
  }


  /* 初めての方へ */
  #first-box h3,#first-box li img{
    width:100%;
  }

  #first-box ul{
    width:100vw;
    clear: both;
    overflow: hidden;
  }
  #first-box li{
    width:46vw;
    float:left;
    margin:2vw;
    font-size: .8rem;
  }
  .first-box-li-r{
    margin-right: 0;
  }


  /* 共通部分 */
  #contents{
    height: auto;
    overflow: hidden;
  }

  #contents table,#contents p{
    width: 96%;
    margin: 2%;
    font-size: .8rem;
  }

  #footer-img-flow{
  	border-radius: 10px;
  	clear: both;
    margin-bottom: 10px;
  }

  #footer-img-flow .img-l img{
  	width: 100%;
  	border-radius: 10px 10px 0 0;
  	height: 4em;
  	object-fit:cover;
  	object-position: center;
  }

  #footer-img-flow ul{
  	width: 100%;
  	margin: 5%;
  	padding: 0;
  }

  #footer-img-flow li{
  	width: 25%;
  	float: left;
  	padding: 0 2%;
  }
  #footer-img-flow li a{
    display: block;
  }

  #copy{
  	color: #fff;
  	letter-spacing: .1em;
  	text-align: center;
  	background-color: #313131;
  	font-size: .5em;
  	width: 100%;
  	padding: 1em 0;
  }
  #footer-box .b20{
  		overflow: hidden;
  }

  #footer-nagano{
  	margin: 0;
  	padding: 5% 15%;
  	margin: auto;
  	font-size: 0.8em;
    text-align: center;
    width: auto;
  }
  #footer-box #nav{
    display: none;
  }


  #last-menu {
      clear: both;
      border: 1px solid #ccc;
      overflow: hidden;
      padding-top: 0;
      margin-top: 10px;
  }

  #last-menu div {
      width: 50%;
      float: left;
      text-align: center;
  }


  #last-menu a {
      color: #555;
      text-decoration: none;
  		display: block;
  		padding: 10px 0;
  }

  .border-right {
      border-right: 1px solid #ccc;
  }

  #footer-sitemap{
  	width: 100%;
  }

  #footer-sitemap ul{
  	margin: 0;
  	padding: 0;
  }

  #footer-sitemap li{
  }

  #footer-sitemap li a {
  		width: 100%;
      position: relative;
      display: block;
      padding: .8em 25px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-weight: 400;
  		text-decoration: none;
  		margin: 0;
  		font-size: .8em;
  }

  #footer-sitemap li a:before {
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 5px;
      width: 6px;
      height: 6px;
      margin: -4px 0 0 0;
      border-top: solid 2px #000;
      border-right: solid 2px #000;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }

  #footer-sitemap .sitemap-title{
  	display: block;
  	padding: .8em 25px;
  	border-bottom: 1px solid #ccc;
  	color: #fff;
  	font-weight: 400;
  	background-color: #666;
  }

  .footer-campaign{
  	width: 100%;
  /*	margin-bottom: .1em;*/
  }

  .footer-campaign img {
  	width: 100%;
  }

.zopim{
    top: auto !important;
    right: auto !important;
    /* bottom: 34vw !important; */
    bottom: 15.5vw !important;
    left: 0 !important;
    /* width: 33vw !important; */
    /* display: none !important; */
    position: fixed !important;
}

  #side1 {
      width:100%;
      margin:0;
  }
  #side1 div {
      margin:0;
  }
  #spFooterMenu {
      display: block;
      width: 100%;
      /* overflow: hidden; */
      position: fixed;
      bottom: 0;
      z-index: 14;
  }
  #spFooterMenu ul{
  	position: relative;
  }
  #spFooterMenu ul li{
  	/* position:absolute; */
  }
  #spFooterMenu ul li a {
  	position:absolute;
  	font-family: Verdana, Geneva, sans-serif !important;
  	/* background: #195696; */
  	color: #fff;
  	/* display: inline-block; */
  	box-sizing: border-box;
  	min-width: 0;
    /* max-width: 33vw; */
  	height: 36px;
  	vertical-align: text-top;
  	line-height: 36px;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    /* box-sizing: border-box; */
    /* padding: 2% 1%; */
  	/* padding-left: 36px; */
  	/* margin: 0 .3vw .3vw 0; */
  	text-align: center;
  	font-size: 1rem;
    border-radius: 5px;
    font-style: normal !important;
  	font-weight: normal !important;
  	/* text-shadow: 0 1px 0 rgba(0,0,0,0.4); */
  	transform: scale(1);
  	/* box-shadow: inset 0 2px 0 rgba(255,255,255,0.2); */
  	letter-spacing:.2em;
  	text-decoration: none;
  	/* height: auto; */
  	padding: 0 22px 0 55px;
  }

  #spFooterMenu ul li p {
  	font-size: .6em;
  	padding: 0;
  	line-height: .8em;
  	letter-spacing:.2em;

  }

  #spFooterMenu ul li a:hover {
  	text-decoration: none;
  }

  #spFooterMenu .footer_contact{
  	background: #de1b1b;
  	top: -30vw;
  	left:0;
  }
  #spFooterMenu .footer_estimates{
  	background: #0b9d0e;
  	top: -20vw;
  	left:0;
  }
  #spFooterMenu .footer_mail{
    background: #17b2ac;
    top: -10vw;
    left:0;
  }
  #spFooterMenu .chat{
  	background: #195696;
  }

  #spFooterMenu .business-off a.footer_contact {
    background-color: #999;
  }
   .business-off div{
    background-color: #888;
  }

  .footer-contact-cover{
    position: absolute;
    font-family: Verdana, Geneva, sans-serif;
  	color: #fff;
  	box-sizing: border-box;
  	min-width: 0;
    width: 70px;
  	height: 70px;
  	vertical-align: text-top;
    margin-bottom: 0;
  	text-align: center;
  	font-size: .6rem;
    line-height: .8rem;
    border-radius: 35px;
    font-style: normal;
  	font-weight: normal;
  	transform: scale(1);
  	text-decoration: none;
  	padding: 35px 0 0 0;
    background: #fff;
    top: -75px;
    left:5px;
    z-index: 10;
    color: #b61717;
    box-shadow: 1px 1px 4px gray;
    cursor:pointer;
    display: none;
  }
  #spFooterMenu ul{
    display:none;
  }

  @keyframes show{
      from{
          opacity: 0;
      }
      to{
          opacity: 1;
      }
  }
  @keyframes none{
      from{
          opacity: 1;
      }
      to{
          opacity: 0;
      }
  }

  #spFooterMenu ul.show,
  #spFooterMenu .close.show,
  #spFooterMenu .footer-contact-cover.show,
  .zopim:nth-child(3).show{
      display: block !important;
      animation: show 0.3s linear 0s;
  }
  #spFooterMenu ul.none,
  #spFooterMenu .close.none,
  #spFooterMenu .footer-contact-cover.none,
  .zopim:nth-child(3).none{
      display: none !important;
      animation: none 0.3s linear 0s;
  }

  .close{
    position:absolute;
    display:inline-block;
    bottom:57.5vw;
    left:-3vw;
    width:48px;
    height:48px;
    border:0;
    background-color:black;
    border-radius:48px;
    margin:0;
    padding:0;
    transform:scale(0.5);
    cursor:pointer;
    display: none;
  }
  .close:before{
    content:"";
    position:absolute;
    display:inline-block;
    top:7px;
    left:21px;
    width:6px;
    height:32px;
    border:0;
    margin:0;
    padding:0;
    background-color:white;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .close:after{
    content:"";
    position:absolute;
    display:inline-block;
    top:7px;
    left:21px;
    width:6px;
    height:32px;
    border:0;
    margin:0;
    padding:0;
    background-color:white;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }


  /* footer-info */
  .footer-info {background: #d3d3d3;border-radius:5px;padding-top:1px;}
  .footer-info h4 {
      text-align: center; margin: 3px;padding: 8px 0; font-size: 16px;color: #fff;text-shadow:0 -1px #1a6ea0;
      background-image:-moz-linear-gradient(top,#4bbaeb 0%,#4bbaeb 40%,#4bbaeb 52%,#02aeeb);
      background-image:-webkit-gradient(linear,left top,left bottom,from(#4bbaeb),color-stop(0.49,#4bbaeb),color-stop(0.52,#4bbaeb),to(#02aeeb));
      border-radius: 5px 5px 0 0 / 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0 / 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
  }
  .footer-info-box {width: 305px; background: #fff;border-radius:5px;margin: 0;padding: 5px;overflow: hidden;}
  #footer-info-vessel {width:970px;margin: 0 auto;padding: 5px 0 10px 10px;column-count: 3;column-gap: 0;}

  .footer-info li {margin:0 5px 5px 0;-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid;}
  .footer-info-box-line {width: 100%;padding: 0.7em 0.5em 0.5em 0.7em;border: 1px solid #e0dfde;box-sizing:border-box;position: relative;}
  .footer-info-box-line h5 {font-size: 14px;padding: 0.3em 0.6em;margin-bottom: 0.5em;border-left: solid 4px #02aeeb;}
  .footer-info-box-btn {
  width:40px;font-size:11px;font-weight:bold;text-decoration:none;display:block;text-align:center;padding:3px 0 2px 0;border-radius:5px;position: absolute;top: 10px;right: 11px;color: #fff;
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #474747 16%, #1c1c1c 80%, #131313 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#474747 16%,#1c1c1c 80%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #4c4c4c 0%,#474747 16%,#1c1c1c 80%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
  }
  .footer-info-box-btn a {width: 40px;height: 23px;}
  .footer-info-details-box a:hover, .footer-info-details-box a:visited {color: #fff !important;text-decoration:none;}
  .footer-info-box-line p {font-weight:bold;line-height: 1.7em;padding-bottom:4px;}
  .footer-info-box-line strong {font-weight:bold; font-size: 26px}
  .font-orange {color: #ff4100;}
  .font-gray {color: #656565;font-size: 11px;line-height:1.5em;}

      /* footer */
      .br-sp { display:none; }

      #footer-info-vessel {width:100%;margin: 0 auto;padding: 2% 0 2% 2%;column-count: 1;column-gap: 0;}
      .footer-info-box {width: 93.3%; background: #fff;border-radius:5px;margin: 0;padding: 5px;overflow: hidden;display: block;}
      .footer-info-box-line p {font-size: 3.5vw;font-weight: normal;line-height: 1.3em;padding-bottom:4px;}
      .footer-info-box-line strong {font-weight:bold;font-size: 3.5vw;}
      .font-gray {line-height:1.3em;}

  /*ページ内リンク上調整*/
  .top-mt7plus {
    margin-top: -7rem;
    padding-top: 7rem;
    display: block;
  }


  #w-baner a.s-cost-5:hover{
    background-position: unset;
  }

  #Smallchat iframe{
    bottom:15vw !important;
    max-height:90% !important;
  }

}