@charset "UTF-8";
@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);

:root {
  /*--base-color1: #38438b !important;
  --base-color2: #b7a414 !important;
  --base-rgb-color1: 73, 81, 144;
  --base-rgb-color2: 183, 164, 20;*/
}

/*------------------------------
    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: var(--base-color1);
  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 var(--base-color1);
  border: 1px solid var(--base-color1);
}
#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 var(--base-color1);
  border: 1px solid var(--base-color1);
}
@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 var(--base-color1);
  }
}
#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;
}

/* 20260327 追記　*/
/* TOPページ */
.top-medical .sub-items {
  padding: 70px 0;
}

.top-symptom .sub-items:after, .top-disease .sub-items:after {
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.624) 0%, rgb(224, 217, 185) 70%);
}

.top-symptom .sub-items:after {
  border-bottom: 0;
}

.top-symptom .sub-items .top-ttl01 span, .top-disease .sub-items .top-ttl01 span {
  display: inline-block;
  color: var(--base-color1);
}

.top-symptom .sub-items .top-ttl01 span.en:first-letter, .top-disease .sub-items .top-ttl01 span.en:first-letter {
  color: var(--base-color2);
}

.top-symptom .sub-items .top-ttl01 {
  margin-left: 120px;
}

.top-disease .sub-items .top-ttl01 {
  margin-right: 120px;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .top-symptom .sub-items .top-ttl01 {
    margin-left: 0;
    text-align: center;
  }
  .top-disease .sub-items .top-ttl01 {
    margin-right: 0;
    text-align: center;
  }
}
/* 症状から探す、病名から探す */
#symptom .flex01 .img img, #disease .flex01 .img img {
  border: none;
}

#symptom .flex02 .img img, #disease .flex02 .img img {
  border: none;
}

#symptom .anchor-list ul li.pd-th a, #disease .anchor-list ul li.pd-th a {
  padding: 0;
}

@media screen and (max-width: 768px) {
  footer .wrap .right dl dd ul li a {
    font-size: 12px;
  }
}

#page-top{
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(var(--base-rgb-color1), 0.9);
  /*background: url(../images/pagetop.png) no-repeat 50% 50% rgba(33, 38, 48, 0.9);
  background-size: 25px;*/
  height: 80px;
  width: 45px;
  z-index: 999;
  cursor: pointer;
  /*transition: 0.3s all ease-out;*/
  display: none;
}
#page-top span{
  display: block;
  background: url(../images/common/pagetop.png) no-repeat 50% 50%;
  background-size: 25px;
  height: 80px;
  width: 45px;
  transition: 0.3s all ease-out;
}
#page-top:hover span{
  background-position: 50% 42%;
}
@media screen and (max-width: 768px) {
  #page-top{
    bottom: 60px;
    height: 50px;
    width: 35px;
  }
  #page-top span{
    display: block;
    background: url(../images/common/pagetop.png) no-repeat 50% 50%;
    background-size: 20px;
    height: 50px;
    width: 35px;
  }
}