/*ーーーー*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
 
  }
  .cp_cssslider {
    padding-top: 45%; /* 画像の高さ */
    position: relative;
    margin: 2em auto;
    /*text-align: center;*/
    width:100%;
    margin-left: 4%;
  }

  .cp_cssslider > img {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
    border-radius: 3px;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
  }
  .cp_cssslider input[name='cp_switch1'],
  .cp_cssslider input[name='cp_switch2'],
  .cp_cssslider input[name='cp_switch3'],
  .cp_cssslider input[name='cp_switch4'],
  .cp_cssslider input[name='cp_switch5'],
  .cp_cssslider input[name='cp_switch6'],
  .cp_cssslider input[name='cp_switch7'],
  .cp_cssslider input[name='cp_switch8'],
  .cp_cssslider input[name='cp_switch9']{    
    display: none;
  }
 
  /* サムネイル */
  .cp_cssslider label {
    margin: 15px 5px 0 5px;
    border: 2px solid #535151;
    display: inline-block;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.6;
    border-radius: 3px;
  }
  .cp_cssslider label:hover {
    opacity: 0.9;
  }
  .cp_cssslider label img {
    display: block;
    width: 40px;
    border-radius: 2px;
  }
  
/*1*/
  .cp_cssslider input[name='cp_switch1']:checked + label {
    border: 2px solid #2d2436;
    opacity: 1;
  }
  .cp_cssslider input[name='cp_switch1'] ~ img {
    opacity: 0;
  }
  .cp_cssslider input[name='cp_switch1']:checked + label + img {
    opacity: 1;
  }

/*2*/
  .cp_cssslider input[name='cp_switch2']:checked + label {
    border: 2px solid #2d2436;
    opacity: 1;
  }
  .cp_cssslider input[name='cp_switch2'] ~ img {
    opacity: 0;
  }
  .cp_cssslider input[name='cp_switch2']:checked + label + img {
    opacity: 1;
  }
/*3*/
  .cp_cssslider input[name='cp_switch3']:checked + label {
    border: 2px solid #2d2436;
    opacity: 1;
  }
  .cp_cssslider input[name='cp_switch3'] ~ img {
    opacity: 0;
  }
  .cp_cssslider input[name='cp_switch3']:checked + label + img {
    opacity: 1;
  }
/*4*/
 .cp_cssslider input[name='cp_switch4']:checked + label {
  border: 2px solid #2d2436;
  opacity: 1;
}
.cp_cssslider input[name='cp_switch4'] ~ img {
  opacity: 0;
}
.cp_cssslider input[name='cp_switch4']:checked + label + img {
  opacity: 1;
}
/*5*/
.cp_cssslider input[name='cp_switch5']:checked + label {
  border: 2px solid #2d2436;
  opacity: 1;
}
.cp_cssslider input[name='cp_switch5'] ~ img {
  opacity: 0;
}
.cp_cssslider input[name='cp_switch5']:checked + label + img {
  opacity: 1;
}

/*6*/
.cp_cssslider input[name='cp_switch6']:checked + label {
  border: 2px solid #2d2436;
  opacity: 1;
}
.cp_cssslider input[name='cp_switch6'] ~ img {
  opacity: 0;
}
.cp_cssslider input[name='cp_switch6']:checked + label + img {
  opacity: 1;
}
/*7*/
.cp_cssslider input[name='cp_switch7']:checked + label {
  border: 2px solid #2d2436;
  opacity: 1;
}
.cp_cssslider input[name='cp_switch7'] ~ img {
  opacity: 0;
}
.cp_cssslider input[name='cp_switch7']:checked + label + img {
  opacity: 1;
}
/*8*/
.cp_cssslider input[name='cp_switch8']:checked + label {
border: 2px solid #2d2436;
opacity: 1;
}
.cp_cssslider input[name='cp_switch8'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch8']:checked + label + img {
opacity: 1;
}
/*9*/
.cp_cssslider input[name='cp_switch9']:checked + label {
border: 2px solid #2d2436;
opacity: 1;
}
.cp_cssslider input[name='cp_switch9'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch9']:checked + label + img {
opacity: 1;
}