@charset "utf-8";
/* ----------------------------------------
 symptoms-list
------------------------------------------- */
.symptoms-list ul li{
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
.symptoms-list ul li .box{
  box-sizing: border-box;
  background-color: #f7faf9;
  padding: 50px;
}
.symptoms-list ul li:last-child{
  margin-bottom: 0;
}
.symptoms-list .box01{
  width: 30%;
}
.symptoms-list .box02{
  width: 65%;
}
.symptoms-list .box02 h2{
  color: #000;
  font-size: 3.0rem;
  line-height: 1.4;
  text-align: left;
  border-bottom: 1px solid #cde9d7;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.symptoms-list .box02 ul{
  margin-bottom: -20px;
}
.symptoms-list .box02 li{
  display: block;
  width: 31%;
  margin-right: 3.5%;
  margin-bottom: 20px;
}
.symptoms-list .box02 li:nth-child(3n){
  margin-right: 0;
}
.symptoms-list .box02 li a{
  display: block;
  position: relative;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  background-color: #14c590;
  border-radius: 40px;
  padding: 15px 30px;
}
.symptoms-list .box02 li a::after {
  display: none;
  position: absolute;
  font-family: 'FontAwesome';
  color: #cde9d7;
  content: "\f054";
  font-size: 1.4rem;
  top: 50%;
  right: 15px;
  margin-top: -1rem;
}


.symptoms-list .box02 li a.fade:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
/* ----------------------------------------
 symptoms
------------------------------------------- */
.symptoms .box01{
width: 40%;
}
.symptoms .box02{
width: 55%;
}
.symptoms h3{
position: relative;
font-size: 2.2rem;
line-height: 1.5;
vertical-align: middle;
margin-bottom: 15px;
}
.symptoms h3::before{
position: relative;
content: "";
display: inline-block;
width: 3px;
height: 1.5em;
vertical-align: middle;
background-color: #cde9d7;
margin-right: 10px;
}
.symptoms p{
padding-left: 10px;
}
.symptoms p span{
font-weight: 700;
}

.annotation {
  margin-top: 5rem;
  font-size: 90%;
}


/* =======================
  PC
======================== */
@media screen and (min-width: 1200px) {}
/* =======================
  TABLET
======================== */
@media screen and (max-width:1199px) {
/* ----------------------------------------
 symptoms-list
------------------------------------------- */
.symptoms-list ul li{
  margin-bottom: 4vw;
}
.symptoms-list ul li .box{
  padding: 4vw;
}
.symptoms-list .box02 h2{
  font-size: 2.5vw;
}
.symptoms-list .box02 ul{
  margin-bottom: 0;
}
.symptoms-list .box02 li{
  width: 48%;
  margin-right: 4%;
}
.symptoms-list .box02 li:nth-child(3n){
  margin-right: 4%;
}
.symptoms-list .box02 li:nth-child(2n){
  margin-right: 0;
}
.symptoms-list .box02 li a{
  font-size: 1.6vw;
  padding: 15px 2.5vw;
}

}
/* =======================
  SP
======================== */
@media screen and (max-width: 599px) {
/* ----------------------------------------
 symptoms-list
------------------------------------------- */
.symptoms-list ul li{
  margin-bottom: 30px;
}
.symptoms-list ul li .box{
  padding: 30px;
}
.symptoms-list ul li:last-child{
  margin-bottom: 0;
}
.symptoms-list .box01{
  width: 100%;
  margin-bottom: 15px;
}
.symptoms-list .box02{
  width: 100%;
}
.symptoms-list .box02 h2{
  font-size: 2.0rem;
  padding-bottom: 5px;
  margin-bottom: 15px;
}
.symptoms-list .box02 ul{
  margin-bottom: 0;
}
.symptoms-list .box02 li{
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-bottom: 15px;
}
.symptoms-list .box02 li:nth-child(3n){
  margin-right: 0;
}
.symptoms-list .box02 li a{
  font-size: 1.6rem;
  border-radius: 30px;
  padding: 10px 15px;
}
.symptoms-list .box02 li a::after {
  font-size: 1.0rem;
  top: 50%;
  right: 15px;
  margin-top: -0.7rem;
}
/* ----------------------------------------
 symptoms
------------------------------------------- */
.symptoms .box01{
width: 100%;
margin-bottom: 20px;
}
.symptoms .box02{
width: 100%;
}
.symptoms h3{
font-size: 1.7rem;
margin-bottom: 15px;
}
.symptoms p{
padding-left: 0;
}


}