@charset "utf-8";

/* #################################
###  生地・部材シミュレーター共通スタイル
################################# */

/* 選択中シート */
  .simNowsheet {
    display: flex;
  }
  .simNowsheet > span {
    width: calc(28% - 5px);
    margin-right: 5px;
  }
  .simNowsheet > table {
    width: calc(72% - 5px);
    padding-right: 0px;
  }
  .simColorSquare {
    border: 1px solid #ccc;
  }
  .simNowsheet table {
    padding: 0px;
    font-size: 14px;
  }
  .simNowsheet table tbody {
    display: block;
  }
  .simNowsheet .selected-color {
    white-space: nowrap;
    vertical-align: top;
  }
  .simNowsheet table td span {
    margin-right: 5px;
  }
  .simNowsheet caption {
    line-height: 1.5em;
    margin-bottom: 5px;
  }
  .simsheetreset {
    padding-top: 10px !important;
    text-align: center !important;
  }

/*生地セット誘導ボタン*/
.simsheetBtn a {
  display: block;
  width: 40%;
  margin: 20px auto;
  text-align: center;
  text-decoration: none;
  padding: 15px;
  background: #447ff6;
  border: 0 none transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1em;
  color: #fff;
  cursor: pointer;
}
.simsheetBtn a:link, .simsheetBtn a:visited {
  direction: none;
}
.simsheetBtn i {
  margin-top: -11px;
  text-align: left;
  font-size: 19px;
}
.fa-sheet:before {
  content: "\f0a8";
}


/* #################################
###  生地専用スタイル
################################# */


.simHeaderGuide_sheet h3 {
  position: relative;
  padding: 25px 0 5px 0;
  font-size: 21px;
  font-weight: normal;
  line-height: 1.6em;
  color: #006699;
  z-index: 1;
}
.simHeaderGuide_sheet p {
  position: relative;
  font-size: 14px;
  z-index: 1;
}
.simHeaderGuide_sheet {
  position: relative;
  min-height: 135px;
  margin: 0;
  background: url(/laravel/images/simulator/sheet_header.jpg) no-repeat 0 0;
  padding: 0 0 0 182px;
  background-size: 180px auto;
  border: 1px solid #006799;
}

.kinoulist-s {
  display: flex;
  margin-top: 5px;
  gap: 5px 3px;
  flex-wrap: wrap;
}
.kinoulist-s img {
  width: 24px;
  height: 24px;
  border: none;
}

/*その他お問い合わせボタン*/
.simProjectBtnSheet {
  margin: 15px 8px 8px 8px;
  text-align: center;
}
.contactBtn {
  padding: 12px 10px;
  background: #FFFFFF;
  border: 2px #C8C8C8 solid;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1em;
  text-align: left;
  color: #333;
  cursor: pointer;
}
.contactBtn a {
  color: #333;
}
.railBtn {
  background: url(/laravel/images/simulator/railbnr_bk.png) no-repeat;
  padding: 12px 6px;
  /*background: #FFFFFF;*/
  border: 2px #C8C8C8 solid;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1em;
  text-align: left;
  color: #e60012;
  cursor: pointer;
  text-shadow: white 1px 1px 0px, white 1px -1px 0px, white -1px 1px 0px, white -1px -1px 0px;
}
.sheetBtn {
  background: url(/laravel/images/simulator/sheetbnr_bk.png) no-repeat;
  padding: 12px 6px;
  /*background: #FFFFFF;*/
  border: 2px #C8C8C8 solid;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1em;
  text-align: left;
  color: #e60012;
  cursor: pointer;
  text-shadow: white 1px 1px 0px, white 1px -1px 0px, white -1px 1px 0px, white -1px -1px 0px;
}
.railBtn a, .sheetBtn a {
  color: #e60012;
}
.simProjectBtnSheet li {
  margin: 10px auto;
}
.contactBtn span {
  display: inline-block;
  font-size: 10px;
  line-height: 1em;
  font-weight: normal;
}
.contactBtn i {
  display: block;
  float: right;
  margin-top: -11px;
  text-align: right;
  font-size: 21px;
}
.railBtn span, .sheetBtn span {
  display: inline-block;
  color: #333;
  font-size: 10px;
  line-height: 1.5em;
  font-weight: 900;
  padding-top: 5px;
  text-shadow: white 1px 1px 0px, white 1px -1px 0px, white -1px 1px 0px, white -1px -1px 0px;
}
.railBtn i, .sheetBtn i {
  display: block;
  float: right;
  /*margin-top: -11px;*/
  text-align: right;
  font-size: 21px;
}
/* カラー */
.colBoxOpt {
  margin-left: 0px;
}
.colBoxOpt h5, .railBoxOpt h5, .rimoBoxOpt h5 {
  margin: 50px 0 15px;
  padding: 8px;
  background: #efefef;
  border-left: 4px solid #006699;
  border-bottom: 1px solid #006699;
  font-size: 16px;
  line-height: 1.3em;
  font-weight: bold;
}
/* 次のステップ */
.sheetmenuBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}
.sheetmenuBtn li {
  margin-top: 10px;
  width: 324px;
  height: 100%;
}
.sheetmenuBtn li img {
  padding: 0 5px 5px 5px;
  width: 100%;
}
.simOptInputLabel {
  width: 90px;
  padding: 10px 12px;
  font-size: 14px;
}
.simProjectBtnSheet li:hover {
  opacity: .8;
}
.simSheetTable {
  font-size: 13px;
}
.simSheetTable h6 {
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
  background: #006699;
  color: #fff;
}
.simSheetTableWrap {
  display: -ms-flexbox;
  display: flex;
  margin-top: 25px;
}
.simSheetTableCont {
  margin-right: 25px;
}
.simSheetTableTtl {
  font-weight: bold;
}
.simSheetTableData {
  margin-top: 10px;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.simSheetTableData th {
  padding: 4px 12px;
  border: 1px solid #ccc;
  background: #ffffeb;
}
.simSheetTableData tr:first-child th {
  background: #efefef;
  text-align: center;
}
.simSheetTableData td {
  padding: 4px 12px;
  border: 1px solid #ccc;
}
/*気温室温イメージ*/
.temperature_image {
  margin: 20px 0;
  border: 4px #E3E0E0 solid;
  border-radius: 8px;
}
.temperature_image img {
  width: 100%;
}
/*大型サイズ誘導ボタン*/
.simSubmitWideBtn {
  margin: 10px auto;
  text-align: center;
}
.simSubmitWideBtn button {
  padding: 20px 60px;
  background: #447ff6;
  border: 0 none transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1em;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
}
/* #################################
###  media query
################################# */
/* Small devices (480px and down) */
@media (max-width: 480px) {
  .simHeaderGuide_sheet {
    padding: 15px;
    border: 0;
    background-size: cover;
  }
  .simHeaderGuide_sheet h3 {
    padding: 10px 10px 5px 10px;
    border-radius: 5px 5px 0 0;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.4em;
    font-weight: bold;
  }
  .simHeaderGuide_sheet p {
    padding: 0 10px 10px 10px;
    position: static;
    font-size: 13px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 5px 5px;
    line-height: 1.4;
  }
  /*次のステップバナーボタン*/
  .sheetmenuBtn li {
    margin: 0 0 10px 0;
    width: 100%;
  }
}