@charset "UTF-8";
/* JUKI PARTS WEBSITE
--------------------------------*/


/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 1000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 90%;
  max-width: 740px;
  margin-top:40px;
  background-color: #fff;
  
}

.closeModal {
  position: absolute;
  
    top: -1em;
	line-height:1;
  right: 0;
  cursor: pointer;
  font-size:3em;
  
   color:#fff;
}

.modalWrapper h1{
  background: linear-gradient(90deg, #0e57a2, #007ac5);
  color: #FFFFFF;
  padding: 10px 20px;
  font-weight: bold;
  margin-bottom:10px;}
.modalWrapper h1 + p{ margin-bottom:10px; font-size:1.4rem}

.modalWrapper h2{ margin-bottom:10px; padding-left:10px; color:#0e57a2; border-left:4px solid #0e57a2; font-weight:bold; line-height:1.2;}
.modalWrapper table{ width:100%;    border-collapse: collapse; margin-bottom:40px;}
.modalWrapper table td{ padding:3px 0; text-align:left; vertical-align:top; font-size:1.2rem; margin-bottom:5px}
.modalWrapper table td:first-child{ width:100px;}
.modalWrapper table td:last-child{ width:96px;}
.modalWrapper .partslist-modal-buhin-btn{ text-align:right}
.modalWrapper .partslist-modal-buhin-btn a{ display:inline-block; padding:3px 5px; background:#007ac5; color:#fff; font-size:1.2rem}

#openModal {

}
@media screen and (max-width: 2500px) {
	.modalWrapper { height:50%}
	.modalContents{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
	}
@media screen and (max-width: 767px) {
	.modalWrapper { height:50%}
	.modalContents{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
	}
@media screen and (min-width: 768px) {
.modalWrapper table tr:hover{ background: #c7e7fa;}
.modalWrapper table td:first-child{ width:200px;}

.modalWrapper { padding:10px;
}
}




/* サムネイルモーダルCSS */
.modalArea2 {
  display: none;
  position: fixed;
  z-index: 1000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg2 {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 90%;
  max-width: 740px;
  margin-top:40px;
  background-color: #fff;
  
}

.closeModal2 {
  position: absolute;
  
    top: -1em;
	line-height:1;
  right: 0;
  cursor: pointer;
  font-size:3em;
  
   color:#fff;
}

.modalWrapper2 h1{
  background: linear-gradient(90deg, #0e57a2, #007ac5);
  color: #FFFFFF;
  padding: 10px 20px;
  font-weight: bold;
  margin-bottom:10px;}
.modalWrapper2 h1 + p{ margin-bottom:10px; font-size:1.4rem}

.modalWrapper2 h2{ margin-bottom:10px; padding-left:10px; color:#0e57a2; border-left:4px solid #0e57a2; font-weight:bold; line-height:1.2;}
.modalWrapper2 table{ width:100%;    border-collapse: collapse; margin-bottom:40px;}
.modalWrapper2 table td{ padding:3px 0; text-align:left; vertical-align:top; font-size:1.2rem; margin-bottom:5px}
.modalWrapper2 table td:first-child{ width:100px;}
.modalWrapper2 table td:last-child{ width:96px;}
.modalWrapper2 .partslist-modal-buhin-btn{ text-align:right}
.modalWrapper2 .partslist-modal-buhin-btn a{ display:inline-block; padding:3px 5px; background:#007ac5; color:#fff; font-size:1.2rem}

#openModal2 {

}
@media screen and (max-width: 767px) {
	.modalWrapper2 { height:70%}
	.modalContents2{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
	}
@media screen and (min-width: 768px) {
	.modalWrapper2 { height:70%}
	.modalContents2{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
.modalWrapper2 { padding:10px;
}
}


/* サムネイルモーダルCSS */
.modalArea3 {
  display: none;
  position: fixed;
  z-index: 1000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg3 {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 90%;
  max-width: 740px;
  margin-top:40px;
  background-color: #fff;
  
}

.closeModal3 {
  position: absolute;
  
    top: -1em;
	line-height:1;
  right: 0;
  cursor: pointer;
  font-size:3em;
  
   color:#fff;
}

.modalWrapper3 h1{
  background: linear-gradient(90deg, #0e57a2, #007ac5);
  color: #FFFFFF;
  padding: 10px 20px;
  font-weight: bold;
  margin-bottom:10px;}
.modalWrapper3 h1 + p{ margin-bottom:10px; font-size:1.4rem}

.modalWrapper3 h2{ margin-bottom:10px; padding-left:10px; color:#0e57a2; border-left:4px solid #0e57a2; font-weight:bold; line-height:1.2;}
.modalWrapper3 table{ width:100%;    border-collapse: collapse; margin-bottom:40px;}
.modalWrapper3 table td{ padding:3px 0; text-align:left; vertical-align:top; font-size:1.2rem; margin-bottom:5px}
.modalWrapper3 table td:first-child{ width:100px;}
.modalWrapper3 table td:last-child{ width:96px;}
.modalWrapper3 .partslist-modal-buhin-btn{ text-align:right}
.modalWrapper3 .partslist-modal-buhin-btn a{ display:inline-block; padding:3px 5px; background:#007ac5; color:#fff; font-size:1.2rem}

.openModal3 {

}
@media screen and (max-width: 767px) {
	.modalWrapper3 { height:70%}
	.modalContents3{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
	}
@media screen and (min-width: 768px) {
	.modalWrapper3 { height:70%}
	.modalContents3{
    height: 100%;
    padding: 10px;
    overflow-y: auto;}
.modalWrapper3 { padding:10px;
}
}