@charset "utf-8";


.drawer--navbarTopGutter{
	padding-top: 0;
}

/* スマホ用 */
@media screen and (max-width: 560px) {


	h1, #side2 {
	  display:none;
	}

	#contents {
		padding-top: 7rem;
	}
	.drawer-navbar--fixed {
		transition: .4s;
		background: #fff;
	}


	.drawer-navbar--fixed.hide{
    transform: translateY(-100%);
	}
	/* スマホ専用クラス */
	.pc{
		display: none !important;
	}

	.sp-pm{
		padding-bottom: 4rem;
	}

	.sub_drawer-menu{
		background-color: #eee;
		color: #333;
		font-size: .7rem;
    padding: .7rem 1rem .2rem !important;
		overflow: hidden;
	}


	.drawer-navbar-header {
	    text-align: left;
			/* padding-left: 10px; */
	}

	.picup-menu-item,
	.top-menu-item{
		background-image: none !important;
		padding: 1rem !important;
		width: 100% !important;
		height: auto !important;
		background-color: #db46a3 !important;
		color: #fff !important;
		font-weight:bold !important;
		font-size: 1.4em !important;
		text-shadow: 0 1px 0 rgba(0,0,0,0.4);
	}
	.picup-menu-item img,
	.top-menu-item img{
		display: none;
	}
	.top-menu-item{
		background-color: #999 !important;
		color: #fff !important;
		/* position: relative;
		z-index: 0; */
	}
	/* .top-menu-item:before{
		content: "";
	  display: block;
	  position: absolute;
	  top: 1.3vw;
	  left: 1.3vw;
	  width: 85%;
	  min-height: 80%;
	  border: 1px solid #fff;
		border-radius: 12px;
	  z-index: 1;
	} */

	/* ログインボタン */
	.drawer-navbar-header .login-btn,.drawer-navbar-header .cart-btn{
		position: relative;
		bottom:1.9em;
		left:.2em;
	}
	.drawer-navbar-header .login-btn span,.drawer-navbar-header .cart-btn span{
		font-size: 1.2em;
	}

	.drawer-navbar-header .login-btn{
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	}

	.drawer-navbar-header .login-btn:active{
		border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
	}

	.drawer-navbar-header .cart-btn{
		display: inline-block;
		padding: 0.25em 0.5em;
		text-decoration: none;
		color: #FFF;
		background: #e63131;/*色*/
		border: solid 1px #e31313;/*線色*/
		border-radius: 4px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
		text-shadow: 0 1px 0 rgba(0,0,0,0.2);
		margin-left: 6px;
	}

	.drawer-navbar-header .cart-btn:active{
		border: solid 1px #03A9F4;
		box-shadow: none;
		text-shadow: none;
	}



	/* #### drawerクラス #### */
	/* drawer.js のスクロールできない問題への対処 */
	.drawer--right.drawer-open .drawer-nav,
	.drawer--right .drawer-hamburger,
	.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	  right: 0;
	  overflow: auto;
	  -webkit-overflow-scrolling: touch;
	}

	.drawer-navbar,.drawer-navbar-header,#searchArea {
		z-index: 14 !important;
	}

	.drawer-nav{
		z-index: 13 !important;
	}

	.drawer-brand {
		padding-left: 0;
	}


	.drawer-brand img {
		height: 3.7rem;
	}

	.drawer-navbar-header{
		height: 3.75rem;
	}

	.drawer-navbar .drawer-nav{
    padding-top: 7rem;
	}


	.drawer-navbar .drawer-navbar-header{
		border-bottom: none;
	}

	.drawer-menu{
		overflow: hidden;
		padding-bottom: 12rem !important;
	}

	.drawer-menu ul {
	    position:relative !important;
			width: 100% !important;
			height: auto !important;
			top: 0 !important;
	}

	.drawer-menu li {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
	}

	.drawer-menu ul li a {
		width: 100% !important;
		height: auto !important;
	}

	.drawer-menu ul li a:link {
		background-image:none !important;
	}

	.drawer-menu img {
		display: none;
	}

	.drawer-menu-item{
		font-size: .8rem !important;
    padding: 1rem !important;
		text-indent: 0 !important;
		border-bottom:1px solid #ddd;
		background-image: none;
	}

	.drawer-menu-sp-item{
		display: block;
		text-decoration: none;
		font-size: .8rem !important;
		padding: 1rem !important;
		text-indent: 0 !important;
		border-bottom:1px solid #ddd;
		background-image: none;
	}
	a.drawer-menu-sp-item {
		font-weight: normal;
		color: #222;
	}

	.s-info-menu a:link{
		background-image:none !important;
	}

	.s-info-menu a{
		width: 100% !important;
		height: auto !important;
		border-bottom:1px solid #ddd;
	}

	.w-info-menu a:link{
		background-image:none !important;
	}

	.w-info-menu a{
		width: 100% !important;
		height: auto !important;
		border-bottom:1px solid #ddd;
		color: #fff;
		background-color: #fe6d00;
	}

	/* .s-cost-5{
		position: absolute;
		left: 0;
		width: 47% !important;
		margin: 2%;
		background-image: url(/waterheater/img/sp/side_a_cost_5.gif) !important;
		background-repeat: no-repeat !important;
		background-size: 100% !important;
		display: inline-block;
	}

	.s-cost-f{
		position: absolute;
		right: 0;
		width: 47% !important;
		margin: 2%;
		background: url(/waterheater/img/sp/side_a_cost_f.gif) !important;
		background-repeat: no-repeat !important;
		background-size: 100% !important;
		display: inline-block;
	} */

	.drawer-menu-box{
		background-color: #666;
		color: #eee;
		cursor:none;
		font-size: .7rem !important;
		padding: .7rem 1rem .2rem !important;
	}


	/* 共通クラス */
	#container{
		margin-bottom: 9.2em !important;
	}

	#container,#header,#header-btn,#header-guide,#nav,#category-nav{
		width:100% !important;
		overflow: hidden;
		height: auto !important;
		margin: 0;
	}

	#header-guide a,#header-btn a,#nav a{
		background-color: #2c63a7;
		color: #fff;
		border-bottom:1px solid #4270a8;
	}




	#category-nav li a {
		text-indent: 0;
	}



	#searchArea{
		width: 100%;
    background: #f4f4f4;
		height: 3.25rem;
    z-index: 3;
		position: relative;
	}

	#searchArea .searchInner {
    width: 100% !important;
    padding: 10px 0;
	}

	#searchArea p {
		padding-bottom: 0;
	}

	#searchArea .searchInner .searchInput {
    width: auto;
    height: 2em;
    border: 1px solid #cccccc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fff;
		position: relative;
    margin: 0 10px;
	}

	#searchArea .searchInner .searchInput .searchText {
    border: none;
    background: none;
    padding: 0.5em 0 0 1em;
    outline: none;
    float: left;
    width: 82%;
    font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', verdana, Helvetica,Arial, sans-serif;
	}

	#searchArea .searchInner .searchInput .searchBtn {
    width: 18px;
    height: 18px;
    float: right;
    display: block;
    margin: 0.5em 1em 0 0;
	}


	/*タブ切り替え全体のスタイル*/
	#tabs {
	/* margin-top: 50px;
	padding-bottom: 40px; */
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
	}

	/*タブのスタイル*/
	a.tab_item {
	width: calc(97%/4) !important;
	height: 9vw;
	border-bottom: 3px solid #5ab4bd;
	background-color: #d9d9d9;
	line-height: 9vw;
	font-size: .6em;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	border-right: 1.5px solid #ededed;
	cursor: pointer;
	text-decoration: none;
	}
	.tab_item:hover {
	opacity: 0.75;
	}
	/*タブ切り替えの中身のスタイル*/
	.tab_content {
	transition: all 0.3s ease;
	}

	/*選択されているタブのスタイルを変える*/
	.tab-checked {
	background-color: #5ab4bd !important;
	color: #fff !important;
	}



}




/* PC用 */
@media screen and (min-width: 561px) {

		/* PC非表示用 */
		.sp{
			display: none !important;
		}

		.drawer--right .drawer-nav{
			right: 0;
		}

		.drawer-navbar .drawer-menu {
		    padding-bottom: 0;
		}

		.drawer-hamburger{
			display: none;
		}

		.drawer-navbar-header{
			height: auto;
		}

		/* 表示のテキストを飛ばす */
		.drawer-menu-item
		{
			text-indent: 100%;
			white-space:nowrap;
			overflow:hidden;
			padding: 0;
			font-size: 1em;
			line-height: 0;
		}
		.drawer-menu-box{
			white-space:nowrap;
			overflow:hidden;
			padding: 0;
			font-size: 1em;
			line-height: 0;
		}
		.text-indent-none{
			text-indent: 0;
		}

		.drawer-navbar .drawer-nav{
			height: 100%;
			position: relative;
			width: 100%;
			background-color:transparent;
			padding-top: 0;
		}

		.drawer-navbar{
				height: auto;
				border-bottom:none;
				background-color:transparent;
		}

		.drawer-navbar--fixed{
				position: relative;
		}

		.drawer-navbar .drawer-dropdown-menu{
				position:relative;
				display: block;
				border:0 !important;
		}



}