/* summary */

#summary {
    width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  }
  
  #summary .fv .inner {
  background-image: url(../img/qa/qa_main.jpg);
  position: relative;
  }
  
  #summary .fv .inner .image {
  position: absolute;
  -webkit-transition: 1s all 0s ease;
  transition: 1s all 0s ease;
  }
  
  #summary .fv .inner .bird {
  left: 0;
  top: 50px;
  width: 230px;
  }
  
  #summary .fv .inner .doctor {
  right: 50px;
  bottom: 0;
  width: 170px;
  }
  
  #summary .fv .inner h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  z-index: 1;
  }
  
  #summary .fv .inner h1 span {
  display: block;
  font-size: 1rem;
  }
  
  @media screen and (max-width: 767px) {
  #summary .fv .inner .bird {
      width: 150px;
  }
  #summary .fv .inner .doctor {
      right: 20px;
      width: 110px;
  }
  }
  
  #summary .wrapper {
  background-color: #fff;
  border-radius: 10px;
  padding: 50px 40px;
  }
  
  @media screen and (max-width: 767px) {
  #summary .wrapper {
      padding: 10px;
  }
  }
  
  #summary h2::after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 30px;
  font-size: 1rem;
  }
  
  #summary h2 {
  text-align: center;
  }
  
  #summary h3 {
  color: #3f2e16;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 0 20px 12px 20px;
  border-bottom: 3px solid #022a7f;
  display: inline-block;
  line-height: 1.3;
  }
  
  #summary .tre-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  border-radius: 5%;
  text-align: center;
  color: #fff;
  }
  
  #summary .disease {
  background-color: #022a7f;
  }
  
  #summary .symptom {
  background-color: #fcb900;
  }
  
  #summary .underline {
  position: relative;
  z-index: 1;
  display: inline-block;
  }
  
  #summary .underline::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 6px;
  background-color: #e7e391;
  z-index: -1;
  }
  
  #summary .ora {
  border-bottom: 3px solid #fcb900;
  }
  
  @media screen and (max-width: 767px) {
  #summary h3 {
      padding-left: 5px;
      padding-right: 0;
  }
  #summary .tre-icon {
      width: 120px;
  }
  #summary .disease {
      font-size: 0.8rem;
  }
  #summary .disease span {
      font-size: 1rem;
  }
  #summary .symptom {
      font-size: 0.8rem;
  }
  }
  
  #summary .tre_about {
  text-align: center;
  }
  
  #summary .tre_about h2::before {
  width: 200px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  }
  
  #summary .tre_about .txt {
  margin-top: 30px;
  }
  
  #summary .tre_about .to-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  
  #summary .tre_about .to-link li {
  padding: 10px 17px;
  }
  
  #summary .tre_about .disease_ul {
  margin-top: 30px;
  }
  
  @media screen and (max-width: 1024px) {
  #summary .tre_about .to-link li {
      padding: 7px 10px;
  }
  }
  
  @media screen and (max-width: 767px) {
  #summary .tre_about .to-link li {
      padding: 4px;
  }
  }
  
  #summary .tre-sec .tips {
  position: relative;
  display: flex;
  }
  
  #summary .tre-sec .tre-icon {
  position: absolute;
  }
  
  #summary .tips {
  position: relative;
  /* padding: 30px; */
  margin-top: 40px;
  background-color: #fff;
  }
  
  #summary .tips.tips-dis {
  /* border: 5px solid #022a7f; */
  /* max-width: 1000px; */
  /* margin: 0 auto; */
  }
  
  #summary .tips.tips-sym {
  border: 5px solid #fcb900;
  }
  
  #summary .tips.tips-sym .mb {
  margin-bottom: 40px;
  }
  
  #summary .tips.tips-sym h3 {
  border-bottom: 3px solid #fcb900;
  }
  
  #summary .tips.tips-sym .left ul li::before {
  background-color: #fcb900;
  }
  
  #summary .tips .left {
  width: calc(65% - 30px);
  margin-right: 30px;
  }
  
  #summary .tips .left ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 30px;
  margin-top: 15px;
  /* width: 80%; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  }
  
  #summary .tips .left ul li {
  margin-top: 20px;
  padding-left: 10px;
  margin-right: 30px;
  position: relative;
  font-size: 1.2rem;
  line-height: 1.3;
  }
  
  /* #summary .tips .left ul li::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  top: 7px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #00913a;
  border-radius: 50%;
  } */
  
  #summary .tips .left p {
  margin-top: 10px;
  }
  
  #summary .tips .right {
  width: 25%;
  }
  
  #summary .tips .right img {
  border-radius: 1em;
  }
  
  #summary .tips .tre-icon {
  position: absolute;
  top: -30px;
  right: 10px;
  }
  
  #summary .often_case {
  margin-top: 30px;
  width: 100%;
  }
  
  #summary .often_case img {
  /* width: 100%; */
  /* max-width: 150px; */
  margin: 0 auto;
  display: block;
  }
  
  #summary .often_case ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  }
  
  #summary .often_case ul li {
  margin-top: 50px;
  margin: 50px 1%;
  padding: 45px 30px 30px;
  border: 3px solid #022a7f;
  position: relative;
  /* min-width: 33%; */
  text-align: center;
  }
  
  #summary .often_case ul li p{
  /* display:inline; */
  padding:10px;
  }
  
  #summary .often_case ul li p{
  /* display:inline; */
  padding: 0;
  margin-top: 10px;
  }


  .rankNo1{
    color:#0d2870;
    padding:5px 15px;
    font-size:30px;
    font-weight: 600;
    background:#ffd400;
    border-radius:50%;
    margin:0 5px;
  }

  .rankNo2{
    color:#bb0000;
    padding:5px 15px;
    font-size:30px;
    font-weight: 600;
    background:#67a6bf;
    border-radius:50%;
    margin:0 5px;
  }

  .rankNo3{
    color: #fcb900;
    padding:5px 15px;
    font-size:30px;
    font-weight: 600;
    background:#022a7f;
    border-radius:50%;
    margin:0 5px;
  }

  
  #summary .effect {
  margin-top: 30px;
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  border: 2px dotted #022a7f;
  padding: 2%;
  border-radius: 1em;
  }
  
  #summary .effect .efect_txt {
  width: 55%;
  padding: 1%;
  /* justify-content: center; */
  justify-content: space-between;
  color: #000;
  }
  
  #summary .effect .efect_txt .title {
  font-size: 1.4em;
  line-height: 2;
  }
  
  #summary .effect .efect_txt .caption {
  line-height: 1.6;
  margin-bottom: 10px;
  }
  
  #summary .effect .efect_img {
  width: 40%;
  justify-content: center;
  }

  @media screen and (max-width: 500px) {

   #summary .effect {
      flex-flow: wrap;
    }
    #summary .effect .efect_txt {
    width: 100%;
    order:2;
    }

    #summary .effect .efect_img {
    width: 90%;
    margin:0 auto;
    order:1;
    }
   }
  #summary .effect .efect_img img{
  width:100%;
  max-width: 350px;
  }
  
  .box_flex{
  display:flex;
  flex-flow: wrap;
  justify-content: space-between;
  }
  
  
  .pla_col_1 {
  width: 98%
  }
  
  .pla_col_2 {
  width: 48%;
  }
  
  .pla_col_3 {
  width: 31%;
  }
  
  .pla_col_4 {
  width: 60%;
  }
  .pla_col_5 {
  width: 20%;
  }
  
  .pla_col_5 p{
  display:block;
  }
  .pla_col_5 img{
  display:block;
  }
  
  .pla_col_6 {
  width: 25%;
  }
  .pla_col_7 {
  width: 16.6%;
  padding: 2%;
  }
  
  .pla_col_8 {
  width: 14.2%;
  padding: 1%;
  border-right: 1px #ddd dotted;
  }
  
  .pla_col_8:last-child {
  border-right: none;
  }
  
  .pla_col_8 p{
  font-size: 14px;
  }
  
  .pla_col_1 img
  {width:100%;}
  
  /* .pla_col_1 img, */
  .pla_col_2 img,
  .pla_col_3 img,
  .pla_col_4 img,
  .pla_col_5 img,
  .pla_col_6 img
  {
  width:90%;
  max-width: 180px;
  padding:5px;
  }
  
  
  #summary .often_case ul li .title {
  top: -12px;
  left: 25px;
  min-width: 130px;
  padding: 8px 20px;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  background-color: #022a7f;
  position: absolute;
  }
  
  #summary .often_case ul li .green {
  font-weight: bold;
  display: inline-block;
  color: #8fc767;
  }
  
  #summary .pickup {
  padding: 30px 40px;
  background-color: #ffeab0;
  position: relative;
  }
  
  #summary .pickup.mt {
  margin-top: 30px;
  }
  
  #summary .pickup .img_pickup {
  width: 100px;
  margin-left: -50px;
  margin-bottom: 20px;
  }
  
  #summary .pickup .title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #3f2e16;
  margin-bottom: 20px;
  line-height: 1.5;
  }
  
  #summary .pickup .title:before {
  content: '\f4aa';
  font-family: 'Font Awesome 6 pro';
  padding-right: 5px;
  color: #009654;
  font-size: 1.2em
  }
  
  #summary .pickup .title .underline {
  font-weight: bold;
  }
  
  #summary .pickup .title .underline::before {
  height: 10px;
  }
  
  #summary .pickup .txt {
  background: #fff;
  padding: 10px;
  border-radius: 1em;
  margin-bottom: 1em;
  }
  
  #summary .pickup .name {}
  
  @media screen and (max-width: 1024px) {
  #summary .tips {
      padding: 15px;
  }
  #summary .tips.tips-dis {
      /* border: 5px solid #8fc767; */
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  }
  #summary .tips.tips-sym {
      border: 5px solid #fcb900;
  }
  #summary .tips.tips-sym .content {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  }
  #summary .tips .left {
      width: 100%;
      margin-right: 0;
      margin-top: 30px;
  }
  #summary .tips .left ul {
      width: 100%;
  }
  #summary .tips .right {
      width: 100%;
  }
  }
  
  @media screen and (max-width: 767px) {
  #summary .tips {
      padding: 10px;
  }
  #summary .tips .left ul {
      margin: 0 0 10px;
  }
  #summary .tips .left ul li {
      margin-right: 0;
  }
  #summary .tips .tre-icon {
      right: 10px;
  }
  #summary .often_case ul li {
      padding: 30px 10px 20px;
      margin-top: 30px;
      margin-bottom: 10px;
  }
  #summary .often_case ul li .title {
      left: 10px;
  }
  #summary .pickup {
      padding: 20px;
  }
  #summary .pickup .img_pickup {
      margin-left: -25px;
  }
  .medi_col_2 {
      width: 98%;
  }
  
  }
  
  .box{
  /* max-width:500px; */
  width:100%;
  /* margin: 130px auto; */
  padding: 20px;
  background:#fff;
  text-align: center;
  }
  
  .count-size{
  font-size: 6rem;
  font-weight: bold;
  color: #252C8C;
  }
  
  .count-size_1{
  font-size: 4rem;
  font-weight: bold;
  color: #252C8C;
  }
  
  
  .chart-area{/*グラフ¹*/
  position: relative;
  width:100%;
  height:50vh;
  }
  
  
  
  
  
  .lead{
  padding: 20px;
  text-align: center;
  }
  /* 
  .box{
  max-width:600px;
  width:100%;
  margin:100px auto 330px auto;
  padding: 20px;
  background:#fff;
  text-align: center;
  } */
  
  @media screen and (max-width: 500px) {
  
  
  .pla_col_1 {
  width: 98%
  }
  
  .pla_col_2 {
  width: 98%
  
  }
  
  .pla_col_3 {
  width: 98%
  
  }
  
  .pla_col_4 {
  width: 98%
  
  }
  .pla_col_5 {
  width: 98%
  
  }
  
  .pla_col_5 p{
  display:block;
  }
  .pla_col_5 img{
  display:block;
  }
  
  .pla_col_6 {
  width: 98%;
  
  }
  .pla_col_7 {
  width: 98%;
  padding: 2%;
  }
  
  .pla_col_1,.pla_col_2,.pla_col_3,.pla_col_4,.pla_col_5,.pla_col_6,.pla_col_7,.pla_col_8 {
  width: 98%;
  padding: 2% 1%;
  border-bottom: 1px #242e76 solid;
  }
  
  .pla_col_1 p,.pla_col_2 p,.pla_col_3 p,.pla_col_4 p,.pla_col_5 p,.pla_col_6 p,.pla_col_7 p,.pla_col_8 p {
  font-size:20px;
  }
  
  .pla_col_1 img,.pla_col_2 img,.pla_col_3 img,.pla_col_4 img,.pla_col_5 img,.pla_col_6 img,.pla_col_7 img,.pla_col_8 img {
  width: 150px;
  padding:2%;
  }
  }