@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap");

/* common------------------------------*/
.spOnly {
  display: none;
}

@media screen and (max-width: 428px) {
  .spOnly {
    display: block;
  }
}

body#conf {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #55575c;
  letter-spacing: 0.07em;
  transform: rotate(0.03deg);
  /*webフォント ジャギー対策 */
  background-color: #ebf8fa;
}

body#conf #wrapper {
  width: 70vw;
  margin: 5vw auto 0 auto;
}

/* header------------------------------*/
body#conf #wrapper header {
  margin: 0 0 2vw 0;
}

body#conf #wrapper header p {
  font-size: 1.6vw;
  line-height: 160%;
  font-weight: 600;
  text-align: center;
  color: #5397cd;
}

/* main------------------------------*/
body#conf #wrapper main {
  margin: 0 0 3vw 0;
  padding: 7vw 0vw;
  border-radius: 2vw;
  background-color: #fff;
}

body#conf #wrapper main p {
  margin: 0 0 3vw 0;

  font-size: 2.4vw;
  line-height: 160%;
  font-weight: 800;
  /* color: #e76f86; */
  text-align: center;
}

body#conf #wrapper main ul {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 42vw;
  margin: 0 auto;
}

body#conf #wrapper main ul li {
  width: 20vw;
  text-align: center;
}

body#conf #wrapper main ul li span {
  display: block;
  padding: 2vw;

  border-radius: 1vw;
  font-size: 1.8vw;
  font-weight: 800;
  letter-spacing: 0.2em;

  cursor: pointer;
}

body#conf #wrapper main ul li:nth-child(1) span:hover {
  animation: .8s forwards btn1;
}

body#conf #wrapper main ul li:nth-child(2) span:hover {
  animation: .8s forwards btn2;
}

body#conf #wrapper main ul li:nth-child(1) span {
  background-color: #e76f86;
  color: #fff;
}

/*Yes*/
body#conf #wrapper main ul li:nth-child(2) span {
  color: #e76f86;
  background-color: #fff;
  outline: 0.5vw solid #e76f86;
  outline-offset: -0.5vw;
}



@keyframes btn1 {
  0% {
    background-color: #e76f86;
  }

  100% {
    background-color: #cf1b3c;
  }
}

/*No*/

@keyframes btn2 {
  0% {
    outline: 0.5vw solid #e76f86;
    background-color: #fff;
  }

  100% {
    outline: 0.5vw solid #cf1b3c;
    background-color: #fcd1d9;
  }
}


/* footer------------------------------*/
body#conf footer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 58vw;
  margin: 0 auto;
}

body#conf footer ul li:nth-child(1) {
  width: 30vw;
}

/*ギリアド*/
body#conf footer ul li:nth-child(2) {
  width: 24vw;
}

/*エーザイ*/

/* Mobile------------------------------*/
@media screen and (max-width: 428px) {
  body#conf #wrapper {
    width: 90vw;
  }

  body#conf #wrapper header {
    margin: 0 0 3vw 0;
  }

  body#conf #wrapper header p {
    font-size: 2.8vw;
    line-height: 140%;
  }

  /* body#conf #wrapper header p br {
    display: none;
  } */
  body#conf #wrapper main {
    padding: 8vw 7vw 10vw 7vw;
    border-radius: 5vw;
  }

  body#conf #wrapper main p {
    margin: 0 0 3vw 0;
    font-size: 3.8vw;
  }

  body#conf #wrapper main ul {
    width: 100%;
  }

  body#conf #wrapper main ul li {
    width: 49%;
    text-align: center;
  }

  body#conf #wrapper main ul li span {
    padding: 3vw 0vw;
    font-size: 3.8vw;
  }

  body#conf footer ul {
    width: 82vw;
  }

  body#conf footer ul li:nth-child(1) {
    width: 42vw;
  }

  /*ギリアド*/
  body#conf footer ul li:nth-child(2) {
    width: 36vw;
  }

  /*エーザイ*/
}