/*-----font軽量版読み込み-----*/
@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: url("/common/font/NotoSansCJKJP-Light.eot");
  src: url("/common/font/NotoSansCJKJP-Light.eot?#iefix") format('embedded-opentype'), url("/common/font/NotoSansCJKjp-Light.woff") format('woff'), url("/common/font/NotoSansCJKjp-Light.ttf") format('truetype');
}

/*-----共通-----*/
#catalog h2 {
  width: 90%;
  margin: 0 auto;
}

#catalog .contents a:link {
  color: #555;
}

#catalog .contents a:hover {
  color: #2D91DA;
}

/*===============================================
	全体共通
===============================================*/
#catalog .contents section {
  width: 95%;
  margin: 1.5em auto 0;
  overflow: hidden;
}

#catalog .contents h3,
#catalog .contents section>h4 {
  color: #fff;
  margin: 0 0 1em;
  overflow: hidden;
  padding: 1% 2%;
  width: 100%;
  box-sizing: border-box;
}

#catalog .contents section>h5 {
  margin: 0 0 1em;
  overflow: hidden;
  padding: 1%;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px #B4C9D1 solid;
  font-weight: bold
}

/*■「カタログ閲覧・カタログ請求ページ」*/
/*見出し*/
#catalog .contents h3 {
  background: #004365 none repeat scroll 0 0;
}

/*sectionの各見出し*/
#catalog .contents section .h4 {
  overflow: hidden;
  margin-bottom: 1.14rem;
  background-color: #006699;
  padding: 0.285rem 2%;
}

#catalog .contents section .h4 h4 {
  color: #fff;
  width: 70%;
  float: left;
}

#catalog .contents section .h4 p {
  width: 35%;
  float: right;
  background-color: #c6d2d8;
  border-radius: 3.42rem;
  text-align: center;
}

#catalog .contents section .h4 p input {
  vertical-align: middle;
}

/*■カタログ部分*/
.clm3>li {
  border-bottom: 1px dotted #dcdcdc;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

#catalog .catalog_upper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#catalog .catalog_img {
  flex-basis: 30%;
}

#catalog .catalog_upright {
  flex-basis: 68%;
}

#catalog .catalog_img img {
  width: 100%;
  border: 1px solid #dcdcdc;
  border-right: none;
  box-shadow: 1px 1px 2px #696969;
}

#catalog .catalog_title {
  width: 100%;
  padding: 0 4px 4px 4px;
  border-bottom: 1px solid #dcdcdc;
  color: #386FA5;
  font-weight: bold;
}

#catalog .catalog_title span {
  font-weight: bold;
}

#catalog .catalog_info {
  padding: 6px;
  color: #696969;
}

#catalog .catalog_info {
  color: #696969;
}

#catalog .catalog_info li span {
  display: block;
  border: 1px solid #1F4FAE;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  background-color: #1F4FAE;
  color: #fff;
  text-align: center;
  margin-top: 0.2em;
  padding: 0.2em;
  width: 70px;
  font-weight: bold;
}

#catalog .catalog_link {
  display: flex;
  justify-content: space-between;
  padding: 10px 1% 0;
}

#catalog .catalog_link li {
  flex-basis: 49%;
}

#catalog .catalog_link li a {
  display: block;
  padding: 6px 4px;
  border: 1px solid #386FA5;
  background: #f5f5f5;
  color: #386FA5;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #a9a9a9;
}

#catalog .checkbox-icon a {
  width: 98%;
  margin: 7px auto 0;
  background-color: #186299;
  background-image: -moz-linear-gradient(top, #2D91DB, #186299);
  background-image: -ms-linear-gradient(top, #2D91DB, #186299);
  background-image: -webkit-linear-gradient(top, #2D91DB, #186299);
  background-image: linear-gradient(top, #2D91DB, #186299);
  color: #fff;
  display: block;
  text-align: center;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #a9a9a9;
  padding: 6px 4px;
  border: 1px solid #386FA5;
}

#catalog .catalog_link li a:hover,
#catalog .checkbox-icon a:hover {
  color: #386fa5;
  background: #c4dcf5;
}

#catalog .checkbox-icon a,
#catalog .checkbox-icon a:link,
#catalog .checkbox-icon a:visited {
  color: #fff;
  text-decoration: none;
}

#catalog .checkbox-icon a:hover {
  color: #386fa5;
}

#catalog .checkbox-icon:active {
  box-shadow: none;
}

/*===============================================
 iPad Portrait(縦) 768px以上～
===============================================*/
@media screen and (min-width: 768px) {
  /*■「カタログ閲覧・カタログ請求ページ」*/
  /*概要*/

  /*■カタログ部分*/
  #catalog .clm3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #catalog .clm3>li {
    flex-basis: 32%;
  }

  #catalog .clm3::after {
    content: "";
    display: block;
    width: 32%;
  }

  /* カタログ名が長い＋アイコンあり、の横のずれ対策要（店舗什器・内装事業） */
  #catalog .catalog_upper.vertical_space {
    height: calc(180px - 1vw);
  }

  /* カタログ名が長い＋アイコンあり、の横のずれ対策要（WEBカタログ） */
  #catalog .space {
    min-height: 116px;
  }
}

/*===============================================
 PC等 1024px以上～
===============================================*/
@media screen and (min-width: 1024px) {

  /*■カタログ部分*/
  #catalog .contents section .h4 p {
    width: 13%;
    margin-top: 2px;
  }

  /* カタログ名が長い＋アイコンあり、の横のずれ対策要（店舗什器・内装事業） */
  #catalog .catalog_upper.vertical_space {
    height: 150px;
  }
}