a:hover {
  opacity: 1;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-duration: 1s;
  animation-name: flash;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
.ques1{
	content: '';
    position: absolute;
    top: 18px;
    left: 305px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    width: 10px;
    height: 10px;
    transform: rotate(135deg);
    transition: all 0.2s;
}
.ques1.add{
    /* 2個目の表示で下向きの矢印作成*/
    content: '';
    /* 親要素（border1の背景）からポジショニングする */
    top: 18px;
    left: 305px;
    /* 線の書式 */
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    /* 線の長さ */
    width: 10px;
    height: 10px;
    /* 回転度 */
    transform: rotate(-135deg);
    /* 回転スピード */
    transition: all 0.2s;
}
.ques2{
	content: '';
    position: absolute;
    top: 10px;
    left: 305px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    width: 10px;
    height: 10px;
    transform: rotate(135deg);
    transition: all 0.2s;
}
.ques2.add{
    /* 2個目の表示で下向きの矢印作成*/
    content: '';
    /* 親要素（border1の背景）からポジショニングする */
    top: 10px;
    left: 305px;
    /* 線の書式 */
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    /* 線の長さ */
    width: 10px;
    height: 10px;
    /* 回転度 */
    transform: rotate(-135deg);
    /* 回転スピード */
    transition: all 0.2s;
}
.ques3{
	content: '';
    position: absolute;
    top: 10px;
    left: 305px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    width: 10px;
    height: 10px;
    transform: rotate(135deg);
    transition: all 0.2s;
}
.ques3.add{
    /* 2個目の表示で下向きの矢印作成*/
    content: '';
    /* 親要素（border1の背景）からポジショニングする */
    top: 10px;
    left: 305px;
    /* 線の書式 */
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    /* 線の長さ */
    width: 10px;
    height: 10px;
    /* 回転度 */
    transform: rotate(-135deg);
    /* 回転スピード */
    transition: all 0.2s;
}
.ques4{
	content: '';
    position: absolute;
    top: 10px;
    left: 305px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    width: 10px;
    height: 10px;
    transform: rotate(135deg);
    transition: all 0.2s;
}
.ques4.add{
    /* 2個目の表示で下向きの矢印作成*/
    content: '';
    /* 親要素（border1の背景）からポジショニングする */
    top: 10px;
    left: 305px;
    /* 線の書式 */
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    /* 線の長さ */
    width: 10px;
    height: 10px;
    /* 回転度 */
    transform: rotate(-135deg);
    /* 回転スピード */
    transition: all 0.2s;
}
.ques5{
	content: '';
    position: absolute;
    top: 10px;
    left: 305px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    width: 10px;
    height: 10px;
    transform: rotate(135deg);
    transition: all 0.2s;
}
.ques5.add{
    /* 2個目の表示で下向きの矢印作成*/
    content: '';
    /* 親要素（border1の背景）からポジショニングする */
    top: 10px;
    left: 305px;
    /* 線の書式 */
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    /* 線の長さ */
    width: 10px;
    height: 10px;
    /* 回転度 */
    transform: rotate(-135deg);
    /* 回転スピード */
    transition: all 0.2s;
}
.wap1{
  opacity: 0;	
}
.wap1.img-wrap {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1);
  transition-delay: 0s; 
  opacity: 1;  
}
@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}