@charset "utf-8";

/*=================================================
 * PC
 * ================================================= */

#wrapper{
  width: 100%;
}

/* HEADER */
#index_header{
  background:#298fa6;
}

#header_inner{
  background:url(/ss/imagemeasure/im_jitan/index/images/header_main_bg.gif) no-repeat center top;
}

.header_contents {
  width: 990px;
  margin: 0 auto;
  position:relative;
}

#index_header_pc{
  display:block;
  }

#index_header_pc h1{
  float:left;
  padding:51px 0 0 15px;
  }

#index_header_pc p#im{
  position:absolute;
  top:32px;
  right:0;
  z-index:1;
  }

#index_header_pc p#keyence_pc{
  position:absolute;
  top:42px;
  right:15px;
  z-index:2;
  }

#index_header_sp{
  display:none;
}

p#intro{
  width: 990px;
  margin: auto;
  padding:30px 15px 20px;
}


/* CONTENTS */

.contents{
  width:960px;
  margin:0 auto;
  overflow:hidden;
  padding-bottom:60px;
  }

.indexCard{
  position:relative;
  margin:0 0 10px 15px;
  float:left;
  }

.indexCard.ml00{
  clear:left;
  }

.indexCard h2{
  color:#fff;
  font-weight:normal;
  font-size:30px;
  text-align:center;
  line-height:1;
  position:absolute;
  top:0;
  left:10px;
  background:url(/ss/imagemeasure/im_jitan/common/images/index_card.png) no-repeat left top;
  width:89px;
  height:58px;
  padding-top:31px;
  }

.indexCard h2.lines{
  font-size:25px;
  line-height:1.2;
  padding-top:15px;
  height:74px;
  }

.indexCard .indexBox{
  font-size:0.93em;
  background-color:#fff;
  margin-top:58px;
  padding:40px 0 10px;
  border:1px solid #3b8fa5;
  width:308px;
  }

.indexBox li{
  background:url(/ss/imagemeasure/im_jitan/common/images/blt_yellow.png) no-repeat 15px 4px;
  padding:0 10px 5px 28px;
  line-height:1.6;
  }

.indexBox li.upcoming{
  color:#c0c0c0;
  }

.indexBox li.null{
  color:#c0c0c0;
  background:none;
  padding:0 10px 5px 10px;
  }



/* SITEMAP */

#sitemap{
  display:block;
  }

/* download button
------------------------------- */
.ss_download_btn {
  display: table;
  position: relative;
  background: #e60012;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #cc1717), color-stop(0, #e24140));
  background: -webkit-linear-gradient(#e24140, #cc1717);
  background: -moz-linear-gradient(#e24140, #cc1717);
  background: linear-gradient(#e24140, #cc1717);
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  border-radius: 5px;
  box-sizing: border-box;
}

/* donwload type */
.ss_download_btn.type01,
.ss_download_btn.type02,
.ss_download_btn.type03,
.ss_download_btn.type04,
.ss_download_btn.type05 {
  width: 100%;
  padding: 6px 0 5px;
  text-align: center;
}

.ss_download_btn.type01,
.ss_download_btn.type02 {
  padding-left: 12px;
  padding-right: 12px;
}

.ss_download_btn.type01 {
  max-width: 340px;
  height: 45px;
}

.ss_download_btn.type02 {
  max-width: 380px;
  height: 60px;
}

.ss_download_btn.type03,
.ss_download_btn.type05 {
  max-width: 160px;
  height: 30px;
  padding-left: 8px;
  padding-right: 8px;
}

.ss_download_btn.type04 {
  max-width: 110px;
  height: 34px;
  padding-left: 4px;
  padding-right: 4px;
  color: #fff;
  font-weight: bold;
}

.ss_download_btn.type05 {
  border-radius: 0 0 5px 5px;
}

/* download icon */
.ss_download_btn.icon01 > span:first-child {
  background: url(/img/ss/common/bg_icon_dl_001.png) no-repeat left center;
}

.ss_download_btn.icon02 > span:first-child {
  background: url(/img/ss/common/bg_icon_dl_002.png) no-repeat left center;
}

/* download thunmbnail */
.ss_download_btn .img01,
.ss_download_btn .img02,
.ss_download_btn .img03 {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.ss_download_btn .img01 img,
.ss_download_btn .img02 img,
.ss_download_btn .img03 img {
  transition: none;
  border: solid 1px #ccc;
}

/* download text */
.ss_download_btn .txt01,
.ss_download_btn .txt02,
.ss_download_btn .txt03,
.ss_download_btn .txt04,
.ss_download_btn .txt05 {
  display: table-cell;
  color: #fff;
  font-weight: bold;
  vertical-align: middle;
  word-break: break-all;
}

.ss_download_btn .txt01,
.ss_download_btn .txt02,
.ss_download_btn .txt03,
.ss_download_btn .txt04 {
  width: calc(100% - 30px);
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.2;
}

.ss_download_btn .txt01 {
  padding-right: 60px;
}

.ss_download_btn .txt02 {
  padding-right: 79px;
}

.ss_download_btn .txt03 {
  padding-right: 77px;
}

.ss_download_btn .txt04 {
  padding-right: 104px;
}

.ss_download_btn .txt05 {
  padding-left: 20px;
  font-size: 12px;
  line-height: 1;
}

.ss_download_btn .in_txt1,
.ss_download_btn .in_txt2 {
  display: block;
}

.ss_download_btn .in_txt1 {
  font-size: 14px;
}

.ss_download_btn:hover {
  opacity: 0.7;
}

.ss_download_btn :hover img {
  opacity: 1;
}

.mainvs_download {
  padding: 32px 0 43px 100px;
}

.mainvs_download .ss_download_btn {
  transition: none;
}

.mainvs_download .ss_download_btn .txt02 {
  text-align: left;
}

/*=================================================
 * SMARTPHONE
 * ================================================= */
 @media screen and (max-width: 640px) {

body#index{
  background-image:none;
  background-color:#f8f8f8;
  }

img{
  width:100%;
  }



/* HEADER */
#header_inner{
  width:100%;
  }

  p#intro{
  width: 100%;
  padding:30px 15px 20px;
}

.header_contents {
  width: 100%;
}

#index_header_sp{
  display:block;
  background:url(/ss/imagemeasure/im_jitan/index/images/sp_header_bg.jpg) no-repeat center top;
  width:100%;
  height:auto;
  -moz-background-size:100% auto;
  background-size:100% auto;
  padding:0;
  position:relative;
  }

#index_header_sp:before{
  content:"";
  display: block;
  padding-top:61%;
  }

#index_header_pc{
  display:none;
  }

#index_header_sp h1{
  position:absolute;
  width:93.4%;
  top:0;
  left:0;
  z-index:1;
  }

#index_header_sp p#keyence_sp{
  position:absolute;
  width:16.5%;
  top:3%;
  left:3%;
  z-index:2;
  }

p#intro{
  font-size:1.2em;
  line-height:1.5;
  padding:5% 3%;
  box-sizing: border-box;
  }



/* CONTENTS */

.contents{
  width:94%;
  }

.indexCard{
  position:relative;
  margin:0 0 2%;
  clear:both;
  width:100%;
  }

.indexCard h2{
  color:#fff;
  font-weight:normal;
  font-size:30px;
  text-align:center;
  line-height:1;
  position:absolute;
  top:0;
  left:10px;
  background:url(/ss/imagemeasure/im_jitan/common/images/index_card.png) no-repeat left top;
  width:89px;
  height:58px;
  padding-top:31px;
  }

.indexCard h2.lines{
  font-size:25px;
  line-height:1.2;
  padding-top:15px;
  height:74px;
  }

.indexCard .indexBox{
  font-size:1.15em;
  background-color:inherit;
  margin-top:58px;
  padding:40px 0 10px;
  border-top:4px solid #3b8fa5;
  border-right:none;
  border-bottom:none;
  border-left:none;
  width:100%;
  }

.indexBox li{
  background:url(/ss/imagemeasure/im_jitan/common/images/sp_blt_yellow.png) no-repeat 15px 12px;
  padding:0 0 5px 35px;
  line-height:1.6;
  }

.indexBox li.upcoming{
  color:#c0c0c0;
  }

.indexBox li.null{
  color:#c0c0c0;
  background:none;
  padding:0 10px 5px 10px;
  }


/* SITEMAP */

#sitemap{
  display:none;
  }

  .mainvs_download {
    padding: 15px 0 45px;
  }

  .mainvs_download .ss_download_btn {
    margin: auto;
  }
}
