/*---------------------------------

medical.css

--------------------------------*/


/*---------------------------------
page_ttl
--------------------------------*/
/* スマホ用 750px以下に適用されるCSS */

#page_ttl .innr {
  background-color: #fff;
  background-image:
    url(../images/page_ttl_shadow_sp.webp),
    url(../images/medical_page_ttl_sp.webp);
  background-position: 0 top, 0 top;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}

/* PC用 751px以上に適用されるCSS */
@media (min-width: 751px) {

  #page_ttl .innr {
    background-color: #fff;
    background-image:
      url(../images/page_ttl_shadow.webp),
      url(../images/medical_page_ttl.webp);
    background-position: right 0, right 0;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
  }
}




/*---------------------------------
navi
--------------------------------*/
/* スマホ用 750px以下に適用されるCSS */

.two-column_wrap>div.navi ul li {
  border-bottom: 1px solid var(--main-color);
}

.two-column_wrap>div.navi ul li.n05,
.two-column_wrap>div.navi ul li.n06 {
  border-bottom: none;
}

/* PC用 751px以上に適用されるCSS */
@media (min-width: 751px) {

  .wrap {
    overflow: inherit;
  }

  .two-column_wrap .navi-sticky {
    position: sticky;
    top: 20px;
    /* スクロール時にビューポートの20px位置に達すると固定 */
  }

  .two-column_wrap>div.navi ul li {
    border-bottom: none;
  }
}





/*---------------------------------
contents
--------------------------------*/
/* スマホ用 750px以下に適用されるCSS */


.two-column_wrap .cnt section .img_area {
  margin: 0 -2.564vw;
}

.two-column_wrap .cnt section .img_area {
  height: 53.333vw;
}

.two-column_wrap .cnt section#n01 .img_area {
  background-image: url(../images/medical_img01_sp.webp);
  background-position: center middle;
  background-repeat: no-repeat;
  background-size: cover;
}

.two-column_wrap .cnt section#n02 .img_area {
  background-image: url(../images/medical_img02_sp.webp);
  background-position: center middle;
  background-repeat: no-repeat;
  background-size: cover;
}


.two-column_wrap .cnt section .txt_area {
  padding: 0 2.666vw;
}

.two-column_wrap .cnt section .txt_area .ttl_area {
  padding-left: 0;
}

.two-column_wrap .cnt section .txt_area .ttl_area h2 {
  font-size: 6.666vw;
  margin-bottom: 5.333vw;
}

.two-column_wrap .cnt section#n01 .txt_area .ttl_area h2,
.two-column_wrap .cnt section#n02 .txt_area .ttl_area h2 {
  font-size: 7.179vw;
}

.two-column_wrap .cnt section#n01.mb120 {
  margin-bottom: 10vw;
}

.two-column_wrap .cnt section#n03,
.two-column_wrap .cnt section#n04,
.two-column_wrap .cnt section#n05,
.two-column_wrap .cnt section#n06 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5.333vw;
  margin-bottom: 2.666vw;
}

.two-column_wrap .cnt section#n03 {
  border-top: 1px solid #ccc;
  padding-top: 2.666vw;
}

.two-column_wrap .cnt section#n06 {
  margin-bottom: 24vw;
}



.two-column_wrap .cnt section#n02 .txt .btn {
  margin-top: 5.333vw;
}

/* PC用 751px以上に適用されるCSS */
@media (min-width: 751px) {

  .two-column_wrap .cnt section .img_area {
    margin: 0;
    height: 280px;
    border-radius: 20px;
  }

  .two-column_wrap .cnt section#n01 .img_area {
    background-image: url(../images/medical_img01.webp);
    background-position: center middle;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .two-column_wrap .cnt section#n02 .img_area {
    background-image: url(../images/medical_img02.webp);
    background-position: center middle;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .two-column_wrap .cnt section .txt_area {
    display: flex;
    justify-content: space-between;
    padding: 0;
  }

  .two-column_wrap .cnt section .txt_area .ttl_area {
    width: 30%;
  }

  .two-column_wrap .cnt section .txt_area .ttl_area h2 {
    font-size: 1.875rem;
    margin-bottom: 20px;
  }

  .two-column_wrap .cnt section#n01 .txt_area .ttl_area h2,
  .two-column_wrap .cnt section#n02 .txt_area .ttl_area h2 {
    font-size: 2.25rem;
  }

  .two-column_wrap .cnt section .txt_area .txt {
    width: 70%;
    padding-top: 36px;
  }


  .two-column_wrap .cnt section#n01.mb120 {
    margin-bottom: 120px;
  }

  .two-column_wrap .cnt section#n03,
  .two-column_wrap .cnt section#n04,
  .two-column_wrap .cnt section#n05,
  .two-column_wrap .cnt section#n06 {
    padding-bottom: 50px;
    margin-bottom: 30px;
  }

  .two-column_wrap .cnt section#n03 {
    padding-top: 30px;
  }

  .two-column_wrap .cnt section#n06 {
    margin-bottom: 160px;
  }

  
  .two-column_wrap .cnt section .txt_area .ttl_area .btn.s-btn a {
    margin: 0 auto 0 0;
  }
}