/*-------------------------------------------------------------------------
contents.css

/*
===== :: COMMON =============================================================*/

*{
  color: #fff;
  font-feature-settings : "palt";}
/*
  -webkit-transition: 0.3s ;
          transition: 0.3s ;}
*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'Vidaloka', 'Noto Sans JP', sans-serif;
  font-weight:400;
  text-align:left;}

a {
  color: #fff;
  text-decoration: none !important;}

a:hover {
  color: #f00;
  text-decoration: none !important;}

.gotopbox{
  z-index: 9999;
  position: fixed;
  bottom: 10px;
  right: 10px;}

.gotop {
  font-size: 40px;}

.txt12 {
  font-size: 12px !important;
  font-size: 1.2rem !important;}

.min{
  font-size: 1.0rem;
  font-weight: 100;
  margin-left: 3px;}

.fs10 { font-size: 1.0rem !important;}
.fs12 { font-size: 1.2rem !important;}
.fs14 { font-size: 1.4rem !important;}
.fs16 { font-size: 1.6rem !important;}
.fs18 { font-size: 1.8rem !important;}

.fw100{font-weight: 100;}
.fw400{font-weight: 400;}
.fw700{font-weight: 700;}

.red {color:#f00;}
.black{color:#000;}
.white{color:#fff;}

.bg-gray{background: #333;}

.t-c{
  text-align: center !important;
  display: inline-block;;}

.t-m{
  vertical-align: middle !important;}

.img-box {
  border: 1px solid #666;
  border-radius: 4px; }

/*
===== :: BACKGROUND =============================================================*/
html {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width:240px;
  font-size:62.5%;}

#bg{
  width: auto;
  height: auto;
  margin-bottom: 0px;
  background: url(https://secure01.blue.shared-server.net/www.warehousenet.jp/img/bg.jpg) repeat-x;}

@media screen and ( max-width:895px ){
	#bg{
   /* overflow: hidden;*/}
}

#bg_bg{
  width: auto;
  height: auto;
  margin-bottom: 0px;
  background: url(https://secure01.blue.shared-server.net/www.warehousenet.jp/img/bg_bg.jpg) repeat;}

/*
===== :: CONTENTS =============================================================*/
.contents{
  position: relative;
  top: 87px;
  width: auto;
  max-width: 896px;
  height: auto;
  margin: auto;
  padding: 0px;
  background: #000;
  text-align: center;}

/*
===== :: TOPICS =============================================================*/
.topics_row{
  width: 95%;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;}

.topics_date{
	background: #5F5D5E;
	color: #FFFFFF;
	font-size: 1.3rem;
	line-height: 1.7rem;
	text-align: center;
	padding: 2px 2px 0 2px;
          border-radius:5px;
     -moz-border-radius:5px;
  -webkit-border-radius:5px;}

.topics_contents{
  color: #FFFFFF;
  font-size: 1.3rem;
  line-height: 1.7rem;
  text-align: left;
  padding-top: 2px; }

@media screen and ( max-width:767px ){
	.topics_contents{
		text-align: center;}
}

/*
===== :: HEAD =============================================================*/
#site_head {
  position: fixed;
  top:0px;
  display: block;
  max-width: 896px;
  width: 100%;
  height: 87px;
  margin:0px;
  background: url(https://secure01.blue.shared-server.net/www.warehousenet.jp/img/head.jpg);
  z-index: 998;}

/* 上帯 */
#site_head #head_spc{
  display: block;
  max-width: 896px;
  height: 14px;}

/* ロゴ */
#site_head #head_link a#home_link{
  display: block;
  float: left;
  margin: 0 0 0 0px;
  width: 184px;
  height: 53px;
  text-indent: -9999px;}

#site_head #head_link:after { content: ".";  display: block; clear: both; height: 0; visibility: hidden;}

#twbtn {
  text-align: right;
  display: block;}

/*
===== :: MENU =============================================================*/
.menu_header {
  width: 100%;
  z-index: 3;}

.menu_header .menu_box {
  background: #000;
  position: absolute;
  width: 100%;
  z-index: 3; }

/* MENU項目 */
.menu_content {
  display:block;
  position: absolute;
  right: 20px;
  top: 36px;
  z-index: 2;
  -webkit-transition: 0.5s ;
          transition: 0.5s ;}

.menu_content ul {
	width: 100%;
	margin: auto;}

.menu_content ul li {
  display: block;
  float: left;
  font-size: 1.3rem;
  position: relative;}

.menu_content ul li ul{
  position: absolute;
  background-color: black;}

.menu_content ul li ul li{
  font-size: 1.3rem;
  display:block;
  top:100%;
  width: 100%;
  clear: both;
  margin-top:3px;
  margin-bottom:3px;}

.menu_content ul li:after { content: "\00a0|\00a0"; color: #eee;}
.menu_content ul li:last-child:after { content: none;}
.menu_content ul li ul li:after { content: none;}
.menu_content ul li a { color: #fff; text-decoration: none;}
.menu_content ul li a:hover { color: #f00; }

@media screen and ( max-width:768px ){
	.menu_content {
	  display:none;
	  width: 100%;
	  position: absolute;	}

	.menu_content ul {
		width: 80%;
		margin: auto;}

	.menu_content ul li {
    position: relative;
	  display: inline-block;
	  height: 45px;
	  border-bottom: solid 1px #fff;
	  width: 100%;
	  margin: auto;
	  text-align: left;
	  font-size: 18px;
	  font-size: 1.8rem; }

	.menu_content ul li a {
	  position: absolute;
	  bottom: 0;
	  text-align: left;
	  display: block;
	  padding-left:10px;
	  color: #fff; 	}

	.menu_content ul li a:hover {
	   text-decoration: none;}

	.menu_content ul li:after { content: "";}
}

.is-open .menu_content {
  display:block;
  position: absolute;
  right: 20px;
  top: 36px;
  z-index: 2;
  -webkit-transition: 0.5s ;
          transition: 0.5s ;
}

@media screen and ( max-width:768px ){
	.is-open .menu_content {
	  display: block;
	  right:0;
	  top: 87px;
	  z-index: 999;}
}

/* MENU表示時の目隠し */
#menu_cover {
  opacity: 0;
  width: 0;
  height: 0;
  display: none;
  z-index: 1;
  -webkit-transition: 0s ;
          transition: 0s ;}

@media screen and ( max-width:768px ){
	#menu_cover {
	  background: #000;
	  width: 100%;
	  height: 10px;
	  display: block;
	  position: absolute;
	  top: 87px;
	  opacity: 0;
	  z-index: 998; }
}

/* MENU表示のボタン */
.menu_button {
  width: 30px;
  height: 30px;
  display: none;
  position: absolute;
  right: 40px;
  top: 30px;
  -webkit-transition: 0.5s;
          transition: 0.5s;}

.menu_button:hover { cursor: pointer;}

.menu_button i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background: #fff;
  -webkit-transition: background 0.5s;
          transition: background 0.5s;
  position: relative;
  left: 5px;
  top: 14px; }

.menu_button i:before,
.menu_button i:after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.3s !important;
          transition: all 0.3s !important; }

  .menu_button i:before {
    -webkit-transform: translateY(8px);
        -ms-transform: translateY(8px);
            transform: translateY(8px); }

  .menu_button i:after {
    -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
            transform: translateY(-8px); }

.is-open .menu_button i {
  background: #000; }

.is-open .menu_button i:after {
  -webkit-transform: translateY(0px) rotate(-45deg);
      -ms-transform: translateY(0px) rotate(-45deg);
          transform: translateY(0px) rotate(-45deg); }

.is-open .menu_button i:before {
  -webkit-transform: translateY(0px) rotate(45deg);
      -ms-transform: translateY(0px) rotate(45deg);
          transform: translateY(0px) rotate(45deg); }

@media screen and ( max-width:768px ){
	.menu_button {
	  display: block;}
}

/*
===== :: TOP PICTURE =============================================================*/
#top img {
	margin-top: 0px;
  margin-bottom: 0px;
}
#topbottom{ max-width: 896px; height: 5px; background: #000000; }
#topbottom #line{ max-width: 896px; height: 3px; background: #9c1b15;}

/*
===== :: SECTION =============================================================*/

.txtspace {
  text-align: left;
  font-size: 14px;
  font-size: 1.4rem;}

.sec896{
  max-width:896px;
  margin:auto;}

.sec717{
  max-width:717px;
  margin:auto;}

.sec540{
  max-width:540px;
  margin:auto;}

.secbox{
  border: 1px #fff;
  padding: 5px;
  border-color: #666;
  border-style: solid;
          border-radius:5px;
     -moz-border-radius:5px;
  -webkit-border-radius:5px;
  margin: 5px;}

.secbox-nob{
  padding: 5px;
          border-radius:5px;
     -moz-border-radius:5px;
  -webkit-border-radius:5px;
  margin: 5px;}

.h4box{
  padding: 1px;
  border: 1px;
  border-color: #666;
  border-style: solid;
          border-radius:10px;
     -moz-border-radius:10px;
  -webkit-border-radius:10px;
  width: auto;}

.h4box .h4txt{
  text-align: left;
  color:#ffffff;
  background:#666666;
          border-radius:8px;
     -moz-border-radius:8px;
  -webkit-border-radius:8px;
  width:auto;
  padding:5px 10px;
  margin:0;}

.h5box{
  border-bottom: 1px;
  padding: 1px;
  border-color: #666;
  border-style: solid;}

.h5box .h5txt{
  font-weight: bold;
  text-align: left;
  width:auto;
  margin-left:5px;
  margin-top: 2px;
  margin-bottom: 2px;}

.h6box {
  padding: 1px;
  margin-top: 10px;}

@media screen and (max-width: 768px){
	.h6box {
	  margin-top: 3px;}
}

.h6box .h5txt {
    text-align: left;

    width: auto;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;}

.h6box:after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(to right, #cc0000 0%,#000000 80%);}

.quad{
  width: 5px;
  height: 16px;
  background: red;
  display: inline-block;
  margin-right: 5px;}

.linkbox {
  text-align:center;
  overflow: hidden;
  width: auto;
  margin: 0 5px;
  -webkit-transition: 1.5s ;
          transition: 1.5s ;}

.linkbox img {
  opacity: 1;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 1.0s !important;
          transition: all 1.0s !important; }

.linkbox img:hover {
  opacity: 0.6;}

.linkbox iframe{
  margin-top:8px;
  width:100%;
}

/*
===== :: FOOTER =============================================================*/
#footer{ max-width: 896px; height: 20px; background: #000000; }
#footer #line{ max-width: 896px; height: 1px; background: #9c1b15;}

#footlink ul li { display: inline;}
#footlink ul li:after { content: " | "; color: #fefefe;}
#footlink ul li:last-child:after { content: none;}

.credit{
  text-align: center;
  font-size: 12px;
  background: #000000;
  color: #FFFFFF;
  padding-bottom: 10px;}

.copyright {
  margin-bottom:0;}

@media screen and (max-width: 768px) {
	#footlink ul li {
	  display: block;
	  height: 30px;
	  font-size: 2.0rem;
	  border-bottom: solid 1px;
	  width: 80%;
	  margin: auto;
	  text-align: left;}

	#footlink ul li:after { content: none;}

	.copyright {
	  margin-bottom:87px;}
}

/*
===== :: GoogleMap =============================================================*/
.mapbox{
  margin-top:15px !important;
  text-align: center;}

.mapbox *{ color: black;}

.gmap {
  width: auto;
  height: 300px;
  margin: 0px;}

.gmap * {
  -webkit-transition: all 0s !important;
          transition: all 0s !important; }

@media screen and (max-width: 767px) {
	.gmap {
    width: 100%;
    margin: auto;}
}

/*
===== :: 店舗詳細 =============================================================*/
h4.shopname{
  text-align: center;}

.detailbox{
  margin: 0;
  margin-top: 5px;
  padding: 0;
  /*padding-right:15px;*/}

.detailbox div{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-size: 1.2rem;}

.detailbox div img{
  display:inline;}

.detailbox div.dh{
  text-align: right;}

.detailbox div.dc{
  text-align: left;}

h3[class~="t-c"]:after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(to right, #000000 0%,#cc0000 20%,#cc0000 80%,#000000 100%);}

.infobox{
  background: #333;
  margin-left: 0;
  margin-right: 0;
  padding-top: 5px;
  padding-bottom: 10px;
          border-radius:8px;
     -moz-border-radius:8px;
  -webkit-border-radius:8px;}

.store_icon1 { width: 31px; height: 31px; float: left; background: url(../img/store_icon1.jpg) no-repeat; margin-right: 2px;}
.store_icon2 { width: 31px; height: 31px; float: left; background: url(../img/store_icon2.jpg) no-repeat; margin-right: 2px;}
.store_icon3 { width: 31px; height: 31px; float: left; background: url(../img/store_icon3.jpg) no-repeat; margin-right: 2px;}
.store_icon4 { width: 31px; height: 31px; float: left; background: url(../img/store_icon4.jpg) no-repeat; margin-right: 2px;}
.store_icon5 { width: 31px; height: 31px; float: left; background: url(../img/store_icon5.jpg) no-repeat; margin-right: 2px;}
.store_icon6 { width: 31px; height: 31px; float: left; background: url(../img/store_icon6.jpg) no-repeat; margin-right: 2px;}
.store_icon7 { width: 31px; height: 31px; float: left; background: url(../img/store_icon7.jpg) no-repeat; margin-right: 2px;}
.store_icon8 { width: 31px; height: 31px; float: left; background: url(../img/store_icon8.jpg) no-repeat; margin-right: 2px;}
.store_icon9 { width: 31px; height: 31px; float: left; background: url(../img/store_icon13.jpg) no-repeat; margin-right: 2px;}
.store_icon10{ width: 31px; height: 31px; float: left; background: url(../img/store_icon14.jpg) no-repeat; margin-right: 2px;}
.store_icon11{ width: 31px; height: 31px; float: left; background: url(../img/store_icon9.jpg) no-repeat; margin-right: 2px;}
.store_icon12{ width: 31px; height: 31px; float: left; background: url(../img/store_icon10.jpg) no-repeat; margin-right: 2px;}
.store_icon13{ width: 31px; height: 31px; float: left; background: url(../img/store_icon11.jpg) no-repeat; margin-right: 2px;}
.store_icon14{ width: 31px; height: 31px; float: left; background: url(../img/store_icon12.jpg) no-repeat; margin-right: 2px;}
.store_icon15{ width: 31px; height: 31px; float: left; background: url(../img/store_icon15.jpg) no-repeat; margin-right: 2px;}

/*
===== :: slick-slider =============================================================*/
.slick-slider img {
  margin-top: 0;
  margin-bottom: 0;
  margin-right:3px;
  margin-left:2px;}

/*
===== :: coverage.php =============================================================*/

.coveTextBox{
	text-align: left;
	font-size: 1.4rem;
	padding: 20px 30px;}

/*
===== :: form parts =============================================================*/
input[type*="button"] {
	-webkit-appearance: none;
	color :black;
	background-color: lightgray;}

input[type*="reset"] {
	-webkit-appearance: none;
	color :black;
	background-color: lightgray;}

form input, form select, form option{
  color: black;
  text-align: center;
  font-weight: 400;}

form textarea{
  color: black;
  font-weight: 400;
  text-align:left;
  height: auto;
  min-height: 120px;}