@charset "UTF-8";

/* ------------------------------------------------
  カラー color
------------------------------------------------ */

/* #af1e24  和研薬RED */


/* ------------------------------------------------
  比較表リスト
------------------------------------------------ */

main .compare input[type=text],
main .compare input[type=button],
main .compare input[type=submit],
main .compare button,
main .compare select {
  position: relative;
  box-sizing: border-box;
  padding:.3em;
  background-color: #fff;
  border: solid 1px #ccc;
  border-radius: .3em;
  line-height: 1em;
  vertical-align: middle;
}

main .compare input[type=button],
main .compare input[type=submit],
main .compare button {
  cursor: pointer;
}

main .btn-pdf-dl a {
  display: inline-block;
  background-color: #CDEBF5;
  padding: 0.25em 0.5em;
  border: 1px solid #ABC1C7;
  border-radius: 0.3em;
  font-size: 90%;
  text-decoration: none;
}

main .btn-pdf-dl a:hover {
  background-color: #CDEBF5;
}

main button.btn-pdf-dl,
button.btn-pdf-dl {
  background-color: #CDEBF5;
  padding:  0.5em;
  border: 1px solid #ABC1C7;
  border-radius: 0.3em;
}

main button.btn-pdf-dl {
  font-size: 90%;
}


main .comp-table { 
  /* overflow-x: auto; */
}

main .comp-table table {
  margin: 0 auto;
  padding: 0;
  border-collapse: collapse;
}

main .comp-table td {
  min-width: 300px;
}

main .comp-table th, .comp-table td {
  border: 1px solid #999;
  padding: 0.5em;
}

main .comp-table tr:first-child th,
main .comp-table tr th:first-child {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #CDEBF5;
}

main .comp-table tr:first-child th:first-child {
  z-index: 2;
}

main .comp-table tr:first-child th:before,
main .comp-table tr th:first-child:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #999;
  z-index: 1;
}

main .comp-table table.bordered th,
main .comp-table table.bordered td { 
  border: 1px solid #999;
//  vertical-align: top;
}

.extra th, .extra td { vertical-align: top; }

/*
main .comp-table::after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 100%;
  border-left: 1px solid #999;
}
*/

main .comp-table table td:nth-of-type(2n) {
  background: #f6f6f6;
}

main .comp-table table .delete button,
main .comp-table table .inq button {
  padding: 0;
  font-size: 1.2em;
  border: none;
  line-height: 1em;
  vertical-align: middle;
  z-index: 0;
}

main .comp-table table .delete button:hover,
main .comp-table table .inq button:hover {
  color: #af1e24;
}

main .comp-table table .delete td,
main .comp-table table .inq td {
  padding: 0.25em;
  text-align: center;
}

main .comp-table table .photo td {
  vertical-align: middle;
  text-align: center;
}

main .comp-table table .photo td img {
  max-width: 150px;
  line-height: 1;
}

main section .compare-title > h2 {
  padding-bottom: 0.25em;
  padding-left: 0.3em;
  margin-bottom: 10px;
  border-bottom: 5px solid #af1e24;
  vertical-align: middle;
  font-size: 1.4em;
}

main section .compare-title > h2 i {
  font-size: 1.2em;
  vertical-align: bottom;
}

main section .compare-title > h2 + span {
  position: absolute;
  bottom: 0.7em;
  right: 0;
  display: inline-block;
  width: 50%;
  text-align: right;
}

@media screen and (max-width:640px) {

  main section .compare-title > h2 + span {
    position: relative;
    width: 100%;
    margin-top: 0.5em;
    text-align: left;
  }

}/*end @media(max-width:640px)*/

main section .compare-title + div.res-flex > div{
  width: 50%;
  
}

main section .compare-title + div.res-flex > div select {
  width: 50%;
  
}

@media screen and (max-width:640px) {

  main section .compare-title + div.res-flex > div,
  main section .compare-title + div.res-flex > div select {
    width: 100%;
  }

}/*end @media(max-width:640px)*/

main .btn-empty {
  width: 14em;
  min-height: 2.5em;
  background-color: #CDEBF5;
  margin: 0 5px;
  border: 1px solid #ABC1C7;
  border-radius: .3em;
/*  color: #fff;*/
  cursor: pointer;
}

main .note-double {
  border: 3px double #ccc;
  padding: 10px 10px 0.4em;
}


/* ------------------------------------------------
  PDFモーダル  #modal-pdf-dl
------------------------------------------------ */

#modal-pdf-dl .btn-pdf-dl a {
  display: inline-block;
  background-color: #CDEBF5;
  padding: 0.25em 0.5em;
  border: 1px solid #ABC1C7;
  border-radius: 0.3em;
/*  font-size: 90%;*/
  text-decoration: none;
}

@media screen and (max-width: 640px) {

  .remodal  span,
  .remodal  input::placeholder {
    font-size: 84%;
  }

}/*end @media(max-width:640px)*/