@charset "UTF-8";

/*
 * Summary:
 * 診療内容他、サイドに追従メニューがあるレイアウト
 * 胃カメラページ
 */

.medical-gastrocamera {
  background-image: url(../img/medicals_gastrocamera/mv_gastrocamera.webp);
}

.medical-colonoscopy {
  background-image: url(../img/medicals_colonoscopy/mv_colonoscopy.webp);
}

.medical-pylori {
  background-image: url(../img/medicals_pylori/mv_h.pylori-screening.webp);
}

#contents.gastrocamera {
  .categorySidebar .sidebar-sticky-content .js-sidebar-links {
    @media (min-width: 768px){
      li:before {transition: all .4s;}
      li:not(.current) {
        &:before {
          content: "";
          width: 0;
        }
        a {
          padding-left: 0;
        }
      }
    }
  }
  /* .categorySidebar .sidebar-sticky-content .js-sidebar-links */

  .sectionTitle {
    text-align: left;
  }
  /* sectionTitle */
}
/* #contents.gastrocamera */

/* END COMMON */




#contents.gastrocamera {


  .mt2em {margin-top: 2em;}
  .mt3050 {
    margin-top: 30px;
    @media (min-width: 768px){
      margin-top: 50px;
    }
  }

  .section_about {
    text-align: left;
    line-height: 1.625;


    picture {
      aspect-ratio: 250 / 180;

      @media (min-width: 768px){
        min-width: 250px;
        width: 250px;
      }
    }

    &.mt3050-1em {
      margin-top: 30px;
      @media (min-width: 768px){
        margin-top: calc(50px - 1em);
      }
    }

    .sentenceBody {
      font-size: 15px;
      line-height: 1.625;
      margin-top: 1em;

      @media (min-width: 768px){font-size: 16px;margin-top: 0;}
    }

  }
  /* .section_about */
  .sentence_subbody {
    font-size: 15px;
    line-height: 1.625;
    text-align: left;
    margin-top: 1em;

    @media (min-width: 768px){
      font-size: 16px;
    }
  }
  /* sentence_subbody */

  .boxRounded.gastrocamera {
    margin-top: 25px;
    @media (min-width: 768px){
      margin-top: 45px;
    }

    .roundedHeader {
      color: #334399;
      text-align: left;
      font-size: 16px;
      font-weight: bold;

      @media (min-width: 768px){font-size: 18px;}
    }
    .checkList {
      margin-top: 20px;
      gap: 14px;


      @media (max-width: 767px){li {width: 100%;}}

      @media (min-width: 768px){
        margin-top: 30px;

        li:nth-of-type(1),
        li:nth-of-type(4),
        li:nth-of-type(7),
        li:nth-of-type(10) {
          min-width: 292px;
          max-width: 292px;
        }

        li:nth-of-type(2),
        li:nth-of-type(5),
        li:nth-of-type(8),
        li:nth-of-type(11) {
          min-width: 256px;
          max-width: 256px;
        }

        .mb-2 {margin-bottom: -2em;}
      }
    }

    .sentenceNotice {
      margin-top: 1em;
      text-align: left;
      font-size: 15px;
      line-height: 1.625;

      @media (min-width: 768px){font-size: 16px;text-align: right;}
    }
  }
  /* .boxRounded.gastrocamera */

  .sectionSubTitle {
    color: #334399;
    font-size: 18px;
    font-weight: bold;
    margin-top: 1em;

    @media (min-width: 768px){
      font-size: 20px;
      margin-top: inherit;
    }
  }

  .sentenceBody.mt05 {margin-top: 0.5em;}



  /* FLOW */
  .list_flow {
    picture {
      aspect-ratio: 1 / 1;
      min-width: 150px;
      width: 150px;
      height: 100%;
    }

    li {
      @media (min-width: 768px){
        gap: 35px;
      }

      &:not(:first-child){
        margin-top: 20px;
      }
    }
    /* li */

    .f-bold {font-weight: bold;}

    .sentenceHeader {
      font-weight: bold;
      font-size: 18px;
      @media (min-width: 768px){font-size: 20px;}
    }

    .sentenceBody {
      margin-top: 1em;
      font-size: 15px;
      line-height: 1.625;

      @media (min-width: 768px){
        font-size: 16px;
      }
    }
    /* sentenceBody */
  }
  /* list_flow */
  /* END FLOW */

  .price_flow {



    li {
      &.boxRounded {
        border-radius: 4px;
        @media (min-width: 768px){border-radius: 8px;}


      }
      &:not(:first-child) {margin-top: 10px;}
      padding: 1.15em;

      .subject,.price {
        color: #334399;
        font-weight: bold;

        font-size: 16px;
        @media (min-width: 768px){font-size: 18px;}
      }


      .price {
        @media (max-width: 767px){text-align: right;}
      }

    }
    /* li */
  }
  /* price_flow */
  .note {
    margin-top: 1em;
    text-align: right;
  }


  .faq-list {
    .faq-item {
      position: relative;
      /* padding: 1.389em; */
      padding: 0;

      &:not(:first-child){margin-top: 10px;}
      border-radius: 4px;
      @media (min-width: 768px){border-radius: 8px;}
    }
    /* faq-item */

    .faq-title {
      cursor: pointer;

      font-size: 16px;
      font-weight: bold;
      line-height: 1.4;
      color: #334399;
      position: relative;
      padding: 1.389em;
      @media (min-width: 768px){font-size: 18px;}

      &:after {
        content: "";
        position: absolute;
        top: 0;
        right: 1.389em;
        bottom: 0;
        margin: auto;

        aspect-ratio: 7.6 / 15.2;
        width: 7px;
        height: fit-content;
        background: url("../img/common/drawer_arrow.svg") no-repeat center center;
        background-size: contain;

        transform: rotate(0deg);
        transition: all .4s;
      }

      &.is-open:after {
        transform: rotate(90deg);
      }
    }
    /* faq-title */

    .faq-content {
      display: none;
      font-size: 15px;
      line-height: 1.625;
      /* padding-top: 1.15em; */
      padding: 0 1.389em 1.389em;
      @media (min-width: 768px){font-size: 16px;}
    }
  }
  /* faq-list */


  /* list_cases */
  .list_cases {
    @media (min-width: 768px){
      flex-wrap: wrap;
      gap: 20px;
    }
    li {
      padding: 20px 15px;

      @media (max-width: 767px){
        &:not(:first-child){margin-top: 15px;}
      }
      @media (min-width: 768px){
        width: calc(950% / 30.0);
        padding: 35px 30px;
      }
    }
    /* li */



    .sentenceHeader {
      font-size: 18px;
      text-align: center;
      color: #334399;
      font-weight: 500;

      @media (min-width: 768px){
        font-size: 22px;
      }
    }
    picture {
      img {width: 100%;height: 100%;object-fit: cover;}
      margin-top: 15px;
      @media (min-width: 768px){
        margin-top: 20px;
      }
    }
    .sentenceBody {
      font-size: 15px;
      line-height: 1.625;
      margin-top: 1em;

      @media (min-width: 768px){
        font-size: 16px;
      }
    }
  }
  /* list_cases */

  #Cases.section {padding-bottom: 0;}



  @media (max-width: 767px){
    #Flow.section {
      .Rounded {
        margin: auto;
        margin-bottom: 2em;
      }
    }
    section.section {
      padding-bottom: 0;
    }
  }

  .section_flow {


    .Rounded {
      overflow: hidden;
      height: 100%;
      background-color: #fff;
      /* aspect-ratio: 350 / 180; */
      img {width: 100%;height: 100%;object-fit: cover;}
    }
  }
}
/* #contents.gastrocamera */


.relative {position: relative;}
.flow_no_wrap {
  width: 130px;
  color: #324298;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;

  position: absolute;
  top: 0.25em;
  left: 0.5em;

  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 1px;

  .number {
    font-size: 24px;
    line-height: 1;
  }
  .flow {
    font-size: 10px;
    font-weight: bold;
  }
}
/* flow_no_wrap */

.section_pylori {
  .section-title-sub {
    font-size: 20px;
    font-weight: 700;
    color: #324298;
    margin-top: 2em;
    margin-bottom: .5em;
    text-align: left;

    @media (min-width: 768px){font-size: 25px;margin-bottom: .75em;}
  }
  /* section-title-sub */

  /* ピロリ菌ページ */
  .text-wrap {
    line-height: 1.6;
    font-size: 14.5px;
    font-weight: bold;
    @media (min-width: 768px){text-align: center;}

    &.mt-offset {
      margin-top: 2em;
    }
  }

  #inspection {

    .inspection-list-box {
      padding: 8%;
      background-color: #F7F7F7;
      border-radius: 10px;
      margin-bottom: 30px;

      @media (min-width: 768px){
        margin-bottom: 30px;
        padding: 38px;
      }
    }
    /* inspection-list-box */
  }
  .inspection-list-box .title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 1.5em;
    text-align: center;

    @media (min-width: 768px){
      font-size: 20px;
    }
  }
  .inspection-item__text {
    line-height: 1.6;
    font-size: 16px;

    @media (min-width: 768px){
      /* font-size: 20px; */
    }
  }
  /* inspection */
}
/* section_pylori */
/* ピロリ菌ページ */




/* 自由診療ページ */
.vitamin_list_wrap {
  .vitamin_list_content {
   max-height: inherit!important;


   @media (min-width: 768px){
    padding: 25px;
  }
 }

 /* vitamin_list_content */

 .vitamin_item_title {
  line-height: 1.6;
 }
 /* vitamin_item_title */


 .vitamin_item_text {
  line-height: 1.6;
  margin-bottom: 2em;
  font-size: 16px;
 }
 /* vitamin_item_text */

 .vitamin_price {
  font-size: 16px;
 }
 /* vitamin_price */

}

.item_box_text {
  line-height: 1.6;
}
.item_box_note.last {margin-bottom: 0;}
/* vitamin_list_wrap */

.sectionPrivateMedicalCare {
  padding-bottom: 0;

  .item_box_note_text,
  .item_box_text,
  .vitamin_message {
    font-size: 16px;
    line-height: 1.6;
  }

  .list_header {
    font-size: 16px;
    @media (min-width: 768px){font-size: 20px;}
  }
  @media (max-width: 767px){padding-top: 10%;}
}
/* sectionPrivateMedicalCare */
/* END 自由診療ページ */