@charset "utf-8";
/* CSS Document */
@import url("layout_sp.css");
@media screen and (max-width: 959px) {
  /* **************************************************************

 * wrapper

*************************************************************** */
  #wrapper {}
  /* ------------------------------ category */
  #category {
    padding: 40px 0 30px 0;
    background-position: center 45%;
  }
  #category p {
    font-size: 2.0rem;
  }
  /* **************************************************************

 * container

*************************************************************** */
  #container {
    display: block;
  }
  /* **************************************************************

 * main

*************************************************************** */
  #main {
    padding: 40px 0;
  }
  /* ------------------------------ pnkz */
  #pnkz {
    display: none;
  }
  /* ------------------------------ contents */
  #main .contents {}
  /* ------------------------------ ｈ要素*/
  #main h1 {
    font-size: 2.4rem;
    margin: 40px 0;
  }
  #main h2 {
    font-size: 2.1rem;
    margin: 30px 0;
  }
  #main h2::before {
    border-top: 3px solid var(--accent);
    width: 15px;
  }
  #main h3 {
    font-size: 1.9rem;
    margin: 30px 0 20px 0;
  }
  #main h4 {
    font-size: 1.7rem;
    margin: 20px 0 10px 0;
  }
  #main h5 {
    font-size: 1.7rem;
  }
  #main .red {}
  /* ------------------------------ 囲み枠　ベージュ*/
  #main .lead {
    margin: 20px 0;
    padding: 15px 20px;
    border-radius: 20px;
  }
  #main .lead h2 {
    font-size: 2.0rem;
  }
  #main .lead h2::before {}
  #main .lead h3 {
    font-size: 1.7rem;
  }
  #main .lead h4 {
    font-size: 1.5rem;
  }
  #main .lead h5 {
    font-size: 1.5rem;
  }
  #main .lead p, #main .lead span {
    font-size: 1.5rem;
  }
  #main .lead strong {}
  /* ------------------------------ 囲み枠　青枠*/
  #main .baloon {
    margin: 20px 0;
    padding: 15px 20px;
  }
  #main .baloon h2 {
    font-size: 2.0rem;
  }
  #main .baloon h2::before {}
  #main .baloon h3 {
    font-size: 1.7rem;
  }
  #main .baloon h4 {
    font-size: 1.5rem;
  }
  #main .baloon h5 {
    font-size: 1.5rem;
  }
  /* ------------------------------ 囲み枠　重要*/
  #main .important {
    margin: 20px 0;
    padding: 15px 20px;
  }
  #main .important h2 {
    font-size: 2.0rem;
  }
  #main .important h3 {
    font-size: 1.7rem;
  }
  #main .important h4 {
    font-size: 1.5rem;
  }
  #main .important h5 {
    font-size: 1.5rem;
  }
  /* ------------------------------ table*/
  /* ------------------------------ scroll*/
  #main .scroll .sp {
    display: none;
  }
  @media screen and (max-width: 560px) {
    #main .scroll {
      width: 100%;
      margin: 0 auto;
      overflow-x: scroll;
    }
    #main .scroll table {
      width: 100%;
      min-width: 600px;
      margin: 0;
    }
    #main .scroll .sp {
      display: block;
    }
  }
  /* ------------------------------ link_btn*/
  #main .contents a.btn {
    padding: 8px 30px;
  }
  #main .contents a.btn:hover {}
  /* ------------------------------ indexnav*/
  @media screen and (max-width: 414px) {
    #main .indexnav {
      display: block;
    }
  }
  #main .indexnav ul {
    margin: 10px 0 0 20px;
  }
  @media screen and (max-width: 414px) {
    #main .indexnav ul {
      margin: 10px auto;
    }
  }
  /* ------------------------------ anker*/
  /* ------------------------------ 当院について*/
  #main .flexbox.feature {
    margin: 0 0 40px 0;
  }
  @media screen and (max-width: 560px) {
    #main .flexbox.feature {
      display: block;
    }
  }
  #main .flexbox.feature div {
    margin: 0 0 0 20px;
  }
  @media screen and (max-width: 560px) {
    #main .flexbox.feature div {
      margin: 0 0 20px 0;
    }
  }
  #main .flexbox.feature h3 {
    font-size: 1.7rem;
    margin: 0 0 10px 0;
  }
  #main .flexbox.feature div p {
    font-size: 100%;
    /*font-size: 1.5rem;*/
  }
  /**/
  @media screen and (max-width: 560px) {
    #main .flexbox.feature .pict {
      margin: 0 auto;
    }
  }
  /*ごあいさつ*/
  #main .f_right.greeting {}
  @media screen and (max-width: 560px) {
    #main .f_right.greeting {
      width: 150px;
      margin: 0 0 20px 20px !important;
    }
  }
  #main .f_right.greeting img {}
  /* ------------------------------ 診察について*/
  /*初診・再診*/
  #main .flexbox.guide .box .baloon {
    font-size: 90%;
    padding: 5px 15px;
  }
  #main .icon-arrow {
    margin: 10px 0;
    width: 12px;
    height: 12px;
    border-width: 3px 3px 0 0;
  }
  /*予約方法*/
  #main .flexbox.appoint {}
  @media screen and (max-width: 560px) {
    #main .flexbox.appoint {
      display: block;
    }
  }
  @media screen and (max-width: 560px) {
    #main .flexbox.appoint .box {
      margin: 20px 0;
    }
  }
  #main .flexbox.appoint .box a {
    font-size: 1.5rem;
    padding: 20px 0;
  }
  @media screen and (max-width: 640px) {
    .safe_delivery .inner {
      padding: 10px 0;
    }
    .safe_delivery .inner p {
      font-size: 90%;
    }
    /**/
    .safe_delivery .intro {
      width: 85%;
    }
    .safe_delivery .intro .f_left img {
      margin: 0 20px 0 0;
    }
    .safe_delivery .intro .f_right img {
      margin: 0 0 0 20px;
    }
    /**/
    .safe_delivery .baby {
      width: 90%;
    }
    .safe_delivery .baby img {
      margin: 0 20px 0 40px;
    }
    .safe_delivery .baby .f_left img {
      margin: 0 20px 0 0;
    }
  }
  @media screen and (max-width: 480px) {
    .safe_delivery .inner p {
      font-size: 90%;
    }
    .safe_delivery .f_left {
      float: none;
      text-align: center;
    }
    .safe_delivery .f_left img {
      margin: 20px 0;
    }
    .safe_delivery .f_right {
      float: none;
      text-align: center;
    }
    .safe_delivery .f_right img {
      margin: 20px 0;
    }
  }
  /* ------------------------------ お食事*/
  #main .meal {}
  #main .meal .menu {
    margin: 0 0 0 30px;
  }
  #main .meal .pict {
    margin: 0 auto;
    max-width: 350px;
  }
  @media screen and (max-width: 560px) {
    #main .meal {
      display: block;
      margin: 40px 0;
    }
    #main .meal .pict {
      margin: 0 auto;
    }
    /**/
    #main .meal .menu {
      margin: 20px 0;
    }
  }
  /*季節のメニュー例*/
  #main .season {}
  #main .season .top {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
  #main .season .oneday {
    margin: 20px 0 40px 0;
  }
  @media screen and (max-width: 640px) {
    #main .season .oneday {
      margin: 20px 0 30px 0;
    }
  }
  @media screen and (max-width: 640px) {
    #main .season .oneday .box {
      width: calc((100% - 40px) / 3);
      padding: 15px;
    }
  }
  @media screen and (max-width: 414px) {
    #main .season .oneday .box {
      padding: 10px;
    }
  }
  @media screen and (max-width: 640px) {
    #main .season .oneday .memo h4 {
      background-size: 20px;
    }
  }
  /* ------------------------------ こんにちは赤ちゃん*/
  #main .contents .baby {
    width: calc(100% - 40px);
  }
  @media screen and (max-width: 560px) {
    #main .contents .baby {
      width: 100%;
    }
  }
  #main .formessage {
    width: calc(100% - 50px);
    padding: 80px 30px 20px 30px;
  }
  @media screen and (max-width: 560px) {
    #main .formessage {
      width: 100%;
      left: 0;
    }
  }
  #main .formessage.mom::before {
    top: 55px;
    background-size: 80%;
  }
  #main .formessage.dad::before {
    top: 55px;
    background-size: 80%;
  }
  #main .formessage.parents::before {
    top: 55px;
    background-size: 80%;
  }
  /* ------------------------------ コラム*/
  /*健康応援　頼れる街の先生*/
  @media screen and (max-width: 560px) {
    #main .flexbox.chokatsu {
      display: block;
      text-align: center;
    }
    #main .flexbox.chokatsu .title {
      margin: 0;
    }
  }
  /* ------------------------------ アプリ紹介*/
  #main .flexbox.app {}
  #main .flexbox.app ul {
    margin: 20px 0;
  }
  #main .flexbox.app ul li img {
    width: 100px;
  }
  /* **************************************************************

 * side

*************************************************************** */
  #side {
    width: calc(100% - 40px);
    max-width: 100%;
    margin: 0 auto;
  }
  /* ------------------------------ カテゴリ名*/
  #side .subnav .side_top {
    font-size: 2.0rem;
  }
  /* ------------------------------ メニュー*/
  /* ------------------------------ メニュー（サブ）*/
  #side .subnav > ul li > ul li a {
    font-size: 1.2rem;
  }
}