@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: "メイリオ", "ヒラギノ角ゴ Pro W3";}
#main-780{width: 100%;}
#side1 #s-c ul,#side1 #s-c ul li{background-image: none;padding: 0;}
.sub-title {font-size: 1em;text-align: center;color: #fff;background-color: #2d62a3;padding: 15px;margin: 20px 0 10px;font-weight: bold;}
.sub-title-columns {font-size: 1em;text-align: center;color: #fff;background-color: #2d62a3;padding: 15px;margin: 20px 0 10px;font-weight: bold;}
/* バナー */
.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 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: 1rem;background-repeat: no-repeat;position:relative;z-index: 0;}
#top-ranking .product-detail {padding-top: 30px;}
#contents #top-ranking .product-detail > p {font-size: .75rem;line-height: 1.4;}
#contents #top-ranking .red.price {display: block;font-size: 1.2rem;font-weight: bold;text-align: right;}
#top-ranking .red.price .small-font {font-size: 12px;}
#top-ranking .tax-included {color: #f12f2f;display: block;font-size: .55em;line-height: 1.4;text-align: right;}
#top-ranking ol li img{margin: 0 5px 0 0;width: 35vw;}
#top-ranking ol li:before {background-size: contain;background-repeat: no-repeat;position: absolute;content: "";z-index: 1;width: 45px;height: 45px;right: 0;top: 0;}
#top-ranking ol li:nth-child(1):before{background-image: url(/img/ranking/gold.png);}
#top-ranking ol li:nth-child(2):before{background-image: url(/img/ranking/silver.png);}
#top-ranking ol li:nth-child(3):before{background-image: 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;}
/* カテゴリ一覧共通 */
.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%;}
/* maker video */
.maker-video-img {margin: 0 auto;}
.maker-video-img img {width: 100%!important;}
.maker-video-btn {padding: 8px;border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;text-align: center;}
.maker-video-btn img {width: 100%!important;}
.maker-video-btn ul {display: flex;justify-content: center;}
.maker-video-btn li {margin: 0 3px;}
/* 自分で取付 */
.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;}
body #contents table, body #contents p {width: 96%;margin: 2%;font-size: 0.8rem;}
#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;}
.zopim{top: auto !important;right: auto !important;bottom: 15.5vw !important;left: 0 !important;position: fixed !important;}
#side1 {width:100%;margin:0;}
#side1 div {margin:0;}
.business-off div{background-color: #888;}
@keyframes show{
from{opacity: 0;}
to{opacity: 1;}
}
@keyframes none{
from{opacity: 1;}
to{opacity: 0;}
}
.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);}
.font-orange {color: #ff4100;}
.font-gray {color: #656565;font-size: 11px;line-height:1.5em;}
/*ページ内リンク上調整*/
.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;}
#contents p.return-top {border-top: 1px dotted #adadad;display: block;text-align: right;margin: 1.5em auto 2em !important;}
.return-top a {color: #565656;clear: both;display: inline-block;font-size: 13px;font-weight: bold;letter-spacing: .6px;padding-top: 5px;}
#main.mt-top,#main-1colum {margin-top: 44px;}
#sp-c-menu {box-sizing: border-box;width: 100%;z-index: 11;}
#sp-c-menu * {box-sizing: border-box;}
#sp-c-menu .accordion-list {background-color: #f5f5f5;box-shadow: 0 1px 2px #00000030;overflow: hidden;width: 100%;}
#sp-c-menu .accordion-list > .accordion-contents {border: 1px solid #e6e6e6;max-height: 68vh;overflow-y: scroll;}
#sp-c-menu .accordion-contents:not(.wrap) {background-color: #fff;text-indent: .8rem;}
#sp-c-menu .accordion-contents:not(.wrap) .accordion-contents {text-indent: 1.4rem;}
#sp-c-menu .accordion-contents:not(.wrap) .accordion-contents .accordion-contents {text-indent: 2rem;}
#sp-c-menu .item {color: #333;display: block;height: 44px;letter-spacing: .6px;line-height: 44px;padding: 0;padding-left: 1rem;position: relative;width: 100%;}
#sp-c-menu .item:hover {background-color: #fffdec;}
#sp-c-menu .item a {color: #333;display: block;}
#sp-c-menu .item a:hover {text-decoration: none;}
#sp-c-menu .accordion-contents .item {border-bottom: 1px solid #f5f5f5;box-shadow: none;font-size: .86rem;}
#sp-c-menu .item.second,#sp-c-menu .item.second a {font-size: .9rem;font-weight: 600;}
#sp-c-menu .item.first::before,#sp-c-menu .item::after {content: '';background-size: contain;background-repeat: no-repeat;display: block;position: absolute;top: 50%;transform: translateY(-50%);z-index: 5;}
#sp-c-menu .item::after {right: 1rem;}
#sp-c-menu .item:not(.first)::after {background-color: #0192d1;}
#sp-c-menu .item.icon-arrow::after {height: 16px;width: 16px;-webkit-mask-image: url(/svg/icon_sp_arrow.svg);mask-image: url(/svg/icon_sp_arrow.svg);}
#sp-c-menu .item.icon-plus::after {height: 18px;width: 18px;-webkit-mask-image: url(/svg/icon_minus.svg);mask-image: url(/svg/icon_minus.svg);}
#sp-c-menu .item.icon-plus.open::after {-webkit-mask-image: url(/svg/icon_plus.svg);mask-image: url(/svg/icon_plus.svg);}
#sp-c-menu .item.first {background-color: #0192d1;color: #fff;font-size: .92rem;font-weight: 600;padding-left: 3.2rem;}
#sp-c-menu .item.first::before {background-color: #fff;left: 1rem;height: 20px;width: 20px;-webkit-mask-image: url(/svg/icon_sp_menu.svg);mask-image: url(/svg/icon_sp_menu.svg);}
#sp-c-menu .item.first.icon-plus::after {background-color: #fff;}
#sp-c-menu .item.second {background-color: #f5f5f5;border-bottom: 1px solid #fff;color: #333;}
#sp-c-menu .item.estimate {background-color: #398806;border-radius: 10px;margin: 10px auto;width: 90%;}
#sp-c-menu .item.estimate::after {background-color: #fff;}
#sp-c-menu .item.estimate a {color: #fff;margin: 0 auto;width: 96%;}
#sp-c-menu .item .logo-img {display: block;height: 60%;position: absolute;top: 50%;transform: translateY(-50%);}
#sp-c-menu .item .logo-img img {height: 100%;}
}