@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メイン
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* -------------------------------------------------------------------------------------------------
   * セクショニング
/* ---------------------------------------------------------------------------------------------- */

#main {}

#main-contents {}

#main-contents div.body {
  padding-left:20px;
  padding-right: 20px;
  margin: 0 auto;
}

#main-contents .column ~ .column {
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

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

 #main-contents div.body {
   max-width: 100%;
   padding-left:20px;
   padding-right: 20px;
   margin: 0 auto;
 }
}

/* :::::::: ブレイクポイント :::::::: */

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

#main-contents > .section {
  padding-top: 3em;
  padding-bottom: 3em;
}

#main-contents div.body {
  max-width: 100%;
  padding:0 1em;
  margin: 0 auto;
}

#main-contents .column ~ .column {
  margin-top: 20px;
}

}


/* ****************************************************************************************************
   * 下層ビジュアル
**************************************************************************************************** */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メインビジュアル
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body.layout-lower
#visual {
  position: relative;
}
body.layout-lower
#visual .body {
  min-height: 300px;
  background: url("../../_images/clinic/visual.png") no-repeat;
  background-position: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
/* */


/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:900px) {
  /*ブラウザの幅が736px以下の時*/
  body.layout-lower
  #visual .body {
    min-height: 100%;
    background: url("../../_images/clinic/visual-sp.jpg") no-repeat;
    background-position: center;
    background-size: cover;
  }
}


/* ****************************************************************************************************
   * 当院のご案内
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.clinic {
  position: relative;
  padding-top: 40px;
  background: var(--c-l-orange);
}

.clinic .body {
  max-width: 1240px;
  padding: 0 20px;
}

#hospital {
  padding-bottom: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .clinic:first-child {
    padding-top: 20px !important;
  }
  #hospital {
    padding-bottom: 0 !important;
  }
  
  .scroll-hint > .inner {
    min-width: 820px;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

.clinic .title-1 {
  font-size: 2.4rem;
  color: #fff;
  background: var(--c-orange);
  border-radius: 10px;
  padding: 0.2em 1.5em;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .clinic .title-1 {
    font-size: 1.8rem;
    line-height: 1.4;
    padding: 0.5em 1.5em;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * テキスト
/* ------------------------------------------------------------------------------------------------- */

.clinic .text {
  font-size: 1.8rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .clinic .text {
    font-size: 1.6rem;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * リスト（3カラム）
/* ------------------------------------------------------------------------------------------------- */

.clinic .layout-flex-3 {
  display: flex;
  justify-content: flex-start;
}

.clinic .layout-flex-3 li {
  width: 32%;
  padding: 0;
  margin-left: 2%;
  margin-bottom: 20px;
}
.clinic .layout-flex-3 li:first-child,
.clinic .layout-flex-3 li:nth-child(3n+1) {
  margin-left: 0;
}
.clinic .layout-flex-3 li .caption {
  text-align: center;
  margin-top: 0.5em;
  font-size: 2.0rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .clinic .layout-flex-3 {
    display: flex;
    justify-content: space-between;
  }

  .clinic .layout-flex-3 li {
    width: 48%;
    padding: 0;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .clinic .layout-flex-3 li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
  .clinic .layout-flex-3 li .caption {
    text-align: center;
    margin-top: 0.5em;
    font-size: 1.6rem;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * リスト（2カラム）
/* ------------------------------------------------------------------------------------------------- */

.clinic .layout-flex-2 {}

.clinic .layout-flex-2 li {
  margin-bottom: 20px;
}
.clinic .layout-flex-2 > * {
  width: 49%;
}

.clinic .layout-flex-2 li .caption {
  text-align: center;
  margin-top: 0.5em;
  font-size: 2.0rem;
  line-height: 1.4;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .clinic .layout-flex-2 li .caption {
    text-align: center;
    margin-top: 0.5em;
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .clinic .layout-flex-2 > * {
    width: 48%;
  }
  .clinic .layout-flex-2 > * ~ * {
    margin-top: 0;
  }
  .clinic .layout-flex-2 li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}


/* ****************************************************************************************************
   * リード文
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

#lead {
  padding-bottom: 0;
}
#lead .body {
  max-width: 1120px;
  padding: 0 20px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #lead {
    padding-bottom: 0 !important;
  }
}

/* ----------------------------------------------------------------------------------------------------
   * タイトル
/* ------------------------------------------------------------------------------------------------- */

#lead .title {
  font-size: 3.0rem;
  text-align: center;
  line-height: 1.4;
}
#lead .title span {
  color: var(--c-orange);
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #lead .title {
    font-size: 2.0rem;
    line-height: 1.4;
  }
  #lead .title span {
    color: var(--c-orange);
    display: block;
  }
}

/* ****************************************************************************************************
   * 機器のご紹介
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

#equipment {}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #equipment {
    padding-bottom: 0 !important;
  }
}

/* ****************************************************************************************************
   * アクセス
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

#access {
  padding-bottom: 100px;
}

#access .body {
  max-width: 1240px;
  padding: 0 20px;
}

#access .inner {
 margin-top: 20px;
}
#access picture {
  display: block;
  margin: 0 auto;
  text-align: center;
}

#access .inner .item .title-2 {
  position: relative;
  font-size: 2.2rem;
  color: var(--c-orange);
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #access .inner {
   margin-top: 1em;
  }
  #access .inner .item .title-2 {
    position: relative;
    font-size: 1.7rem;
    color: var(--c-orange);
  }
}

/* ----------------------------------------------------------------------------------------------------
   * リスト
/* ------------------------------------------------------------------------------------------------- */

#access .layout-flex-2 {}

#access ol.layout-flex-2 {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: li;
}

#access .layout-flex-2 li {
  position: relative;
}
#access .layout-flex-2 li:nth-child(n+3) {
  margin-top: 20px;
}
#access .layout-flex-2 li .text {
  position: relative;
  padding-left: 2.0em;
  line-height: 1.5;
}
#access .layout-flex-2 li .text::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 2px; /* 数字のY軸線上の位置を調整 */
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 2.0rem;
  color: var(--c-orange);
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--c-orange);
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  #access .layout-flex-2 li .text::before {
    line-height: 1.0;
  }
}