/*インライン用*/
.class {
	position: relative;
	margin:10px auto;
	max-width: 500px;
	background: #fff;
	padding: 20px;
}
.class h1 {
	font-weight: bold;
	font-size: 18px;
	margin: 0 0 10px;
}
.class .popup-modal-dismiss {
	text-align: center;
}
/*表示のエフェクト*/
      .mfp-fade.mfp-bg {
        opacity: 0.001; /* Chrome opacity transition bug */
        -webkit-transition: all 0.15s ease-out;
        -moz-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-bg.mfp-ready {
        opacity: 0.8;
      }
      .mfp-fade.mfp-bg.mfp-removing {
        opacity: 0;
      }
      .mfp-fade.mfp-wrap .mfp-content {
        opacity: 0;
        -webkit-transition: all 0.15s ease-out;
        -moz-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
      }
      .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
        opacity: 1;
      }
      .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
        opacity: 0;
      }

table.classtable{
border-collapse:collapse;
margin:5px auto 15px auto;
}

table.classtable td{
border-collapse:collapse;
background-color:#F9F9F9;
text-align:left;
padding:5px;
line-height:20px;
}

table.classtable th{
color: #151515;
font-size:13px;
font-weight:normal;
letter-spacing:1px;
background-repeat:repeat-x;
background-position:top;
}

.area {
	padding:5px;
	background-color:#a7b1be;
	text-align:center;
	color:white;
	font-size:16px;
	font-weight:bold;
	}

.tr .td {
  border-bottom: #ccc 1px solid; }

.th {
background-color:#F5F5F5;
padding:5px;
  border-bottom: #ccc 1px solid;
 }

.classname {
  text-align:left;
  color:#006699;
  font-weight:bold;
 }

.classgroup1 {
  background-color:#d6dfe2;
  padding:8px;
 }

.classgroup2 {
  background-color:#d3ddd2;
  padding:8px;
 }

.classgroup3 {
  background-color:#c7c1d5;
  padding:8px;
 }

.classgroup4 {
  background-color:#d3d3be;
  padding:8px;
 }

.classgroup5 {
  background-color:#f8f88a;
  padding:8px;
 }

.classgroup6 {
  background-color:#d88080;
  padding:8px;
 }

.classgroup {
  text-align:center;
  font-weight:bold;
 }

img.icon {
  vertical-align:bottom;
 }

.entry {
  background-color:#c8979e;
  text-align:center;
  font-size:20px;
  border-radius:15px;
  color:white;
  padding:15px 30px;
  margin:10px 0 40px 0;
  font-weight:bold;
  width:80%;
 }

.kit {text-align: center;}
.kit .inner {display: none;}
.kit div.kit-border{cursor: pointer; padding: 10px;}
.kit div.kit-border{cursor: pointer; padding: 10px;background: #white;border: double 5px #d6dfe2;margin:10px 0 0 0;}
.kit .inner li{padding: 10px; position: relative;width: 637px;background: #d6dfe2;text-align:left;}
.kit  li .open{padding: 4px 5px ;background: #f0f0f0;border:1px solid #fff; border-radius: 10px;font-size: 14px; cursor: pointer;margin:20px 40% 0 40%;text-align:center;}
.kit .inner li .close{padding: 4px 5px ;background: #fff;border:1px solid #f0f0f0; border-radius: 10px;font-size: 14px; cursor: pointer;margin:20px 40% 0 40%;text-align:center;}
.kit-cap{font-size:14px;}
.kit-name-big{font-size:24px;font-weight:bold;color:#4682b4;}
.kit-name{font-size:18px;font-weight:bold;color:#4682b4;}
.kit-info{font-size:11px;}
.kit-products-cap{font-size:13px;color:#006699;}
.kit-products-cap2{font-size:16px;color:#006699;}
.kit-home{font-size:16px;color:#fff;background-color:#33cc33;padding:0 10px;}
.kit-pro{font-size:16px;color:#fff;background-color:#333399;padding:0 10px;}

.kit-step {
  text-align:left;
  color:#006699;
  font-weight:bold;
 }

.kit-bold {
  text-align:center;
  font-weight:bold;
 }


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


.kit .inner li{padding: 10px; position: relative;width: 100%;background: #d6dfe2;}



 }



@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
.entry {
  background-color:#c8979e;
  text-align:center;
  font-size:20px;
  border-radius:15px;
  color:white;
  padding:15px 20px;
  margin:10px 0 60px 0;
  font-weight:bold;
  width:90%;
 }

.kit .inner li{padding: 10px; position: relative;width: 100%;background: #d6dfe2;}


 }