@import url(//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700);
@import url(//fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap);
/*------------------------------
    top
-------------------------------*/
.top-symptom, .top-disease {
  background-color: #C7CBD2;
}
.top-symptom .col4,
.top-symptom .col4-col2, .top-disease .col4,
.top-disease .col4-col2 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.top-symptom .sub-items, .top-disease .sub-items {
  background: url(../images/symptom/mv.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.top-symptom .sub-items:after, .top-disease .sub-items:after {
  content: "";
  background: #212630;
  background: linear-gradient(180deg, rgba(199, 203, 210, 0.6) 0%, rgb(199, 203, 210) 70%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 1;
}
.top-symptom .sub-items .wrap, .top-disease .sub-items .wrap {
  gap: 10px;
}
.top-symptom .sub-items .wrap .item .box, .top-disease .sub-items .wrap .item .box {
  height: 100px;
}
@media screen and (max-width: 767px) {
  .top-symptom .sub-items .wrap .item .box, .top-disease .sub-items .wrap .item .box {
    height: 80px;
  }
}
.top-symptom .sub-items .wrap .item .box h4, .top-disease .sub-items .wrap .item .box h4 {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 0px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .top-symptom .sub-items .wrap .item .box h4, .top-disease .sub-items .wrap .item .box h4 {
    font-size: 16px;
    margin-top: 0px;
  }
}

.top-disease .sub-items {
  background: url(../images/disease/mv.jpg) no-repeat 50% 50%;
  background-size: cover;
}

/*------------------------------
    symptom / disease
-------------------------------*/
#symptom #mv, #disease #mv {
  background: url(../images/symptom/mv.jpg) no-repeat 50% 50%;
  background-size: cover;
}
#symptom .anchor-list ul, #disease .anchor-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}
#symptom .anchor-list ul li, #disease .anchor-list ul li {
  display: flex;
  align-items: center;
}
#symptom .anchor-list ul li a, #disease .anchor-list ul li a {
  width: 100%;
  line-height: 1.4;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #symptom .anchor-list ul, #disease .anchor-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  #symptom .anchor-list ul li, #disease .anchor-list ul li {
    display: flex;
    align-items: center;
    height: 54px;
  }
  #symptom .anchor-list ul li a, #disease .anchor-list ul li a {
    width: 100%;
    line-height: 1.4;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
#symptom h2.ttl01 small, #disease h2.ttl01 small {
  font-size: 70%;
}
@media screen and (max-width: 767px) {
  #symptom h2.ttl01 small, #disease h2.ttl01 small {
    font-size: 70%;
    display: block;
  }
}
#symptom .flex01, #disease .flex01 {
  margin-bottom: 40px;
}
#symptom .flex01 .img, #disease .flex01 .img {
  width: 34%;
}
#symptom .flex01 .img img, #disease .flex01 .img img {
  display: block;
  box-shadow: -15px 15px 0 #212630;
  border: 1px solid #212630;
}
#symptom .flex02, #disease .flex02 {
  margin-bottom: 40px;
}
#symptom .flex02 .img, #disease .flex02 .img {
  width: 34%;
  box-sizing: border-box;
}
#symptom .flex02 .img img, #disease .flex02 .img img {
  display: block;
  box-shadow: 15px 15px 0 #212630;
  border: 1px solid #212630;
}
@media screen and (max-width: 767px) {
  #symptom .flex01, #symptom .flex02, #disease .flex01, #disease .flex02 {
    flex-direction: column-reverse;
    margin-bottom: 20px;
  }
  #symptom .flex01 .img, #symptom .flex02 .img, #disease .flex01 .img, #disease .flex02 .img {
    width: 100%;
    margin: 0px 0 20px 0;
  }
  #symptom .flex01 .img img, #symptom .flex02 .img img, #disease .flex01 .img img, #disease .flex02 .img img {
    box-shadow: -10px 10px 0 #212630;
  }
}
#symptom .check-list, #disease .check-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -15px;
}
#symptom .check-list li, #disease .check-list li {
  margin-right: 2em;
  display: inline-block;
  padding-left: 45px;
  position: relative;
  margin-bottom: 15px;
}
#symptom .check-list li:before, #disease .check-list li:before {
  content: "";
  background: url(../images/common/check.png) no-repeat 0 0;
  background-size: 32px;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0;
  left: 0;
}
#symptom .check-list li a, #disease .check-list li a {
  color: #333;
  display: inline-block;
  position: relative;
}
#symptom .check-list li a:after, #disease .check-list li a:after {
  content: "";
  background-color: #333;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.2s all;
}
#symptom .check-list li a:hover:after, #disease .check-list li a:hover:after {
  opacity: 0;
}

#disease #mv {
  background: url(../images/disease/mv.jpg) no-repeat 50% 50%;
  background-size: cover;
}