@charset "UTF-8";

/* ************************************************************************************************
  1440px / pc-narrow
************************************************************************************************ */
@media screen and (max-width: 1440px) {
  /* グローバルナビゲーション */
  .header-nav__item {
    padding: .5em;
  }
}


/* ************************************************************************************************
  1280px / laptop-wide
************************************************************************************************ */
@media screen and (max-width: 1280px) {
  /* グローバルナビゲーション */
  .header-nav {
    display: none;
  }
  #nav-drawer {
    display: block;
  }

  /* メインビジュアル */
  .header-main .container2 {
    left: 0;
  }
  .header-main p {
    font-size: 1.5rem;
  }
  .header-main p span {
    font-size: 2rem;
  }
  .header-main h3 {
    font-size: 4rem;
  }

  /* フッター */
  .access__container {
    padding: 6rem 2rem;
  }


  /* 下層ページ */
  /* --------　保険診療ページ */
  li.p-menu__item2 {
    width: calc(51% - 2vw);
  }
  ol.p-menu__flow {
    gap: 1vw;
  }
  li.p-menu__item3 {
    width: calc(50% - 1vw);
    font-size: 1.4rem;
  }
  li.p-menu__item4 {
    width: calc(51% - 2vw);
  }

  /* --------　お知らせページ */
  .p-news__ttl {
    font-size: 2.5rem;
  }
}


/* ************************************************************************************************
  1024px / laptop-narrow
************************************************************************************************ */
@media screen and (max-width: 1023px) {
  /* トップページ */
  /* -------- コンセプト */
  .concept__contents {
    display: block;
  }
  .concept__contents--img,
  .concept__contents--txt {
    width: 100%;
  }
  .concept__contents--txt {
    padding: 12rem 0 0;
  }

  /* フッター */
  .access__clinic,
  .access__wrap {
    display: block;
  }
  .access__logo {
    margin-bottom: 3rem;
  }
  .access__map,
  .access__item {
    width: 100%;
  }


  /* 下層ページ */
  /* -------- クリニック紹介ページ */
  .p-message__img, .p-message__txt {
    width: calc(100% / 2 - 2rem);
  }

  /* -------- 保険診療ページ */
  h2.p-menu__summary__ttl {
    font-size: 4rem;
  }
}


/* ************************************************************************************************
  960px / tab-wide
************************************************************************************************ */
@media screen and (max-width: 959px) {
  /* 共通 */
  h2 {font-size: 3rem;}
  h4 {font-size: 2.3rem;}
  .btn1, .btn2 {
    font-size: 1.5rem;
  }

  /* 下層ページヘッダー */
  .header-sub {
    height: 60vh;
    margin-bottom: 8rem;
  }
  .header-sub__item {
    padding-top: 2rem;
  }
  .header-sub__ttl {
    font-size: 3.25rem;
  }


  /* トップページ */
  /* -------- お知らせ */
  .news {
    padding: 6rem 0;
  }
  .news__txt {
    display: block;
    text-align: left;
    margin-bottom: 1.5rem;
  }
  .news__item:last-child .news__txt {
    margin-bottom: 0;
  }
  .news__date::after {
    width: 100px;
    margin: 0 2rem;
  }

  /* -------- コンセプト */
  .concept {
    padding: 8rem 0 10rem;
  }

  /* -------- 診療内容 */
  .medical {
    padding: 8rem 0;
  }
  .medical__list {
    gap: 10px;
  }
  .medical__item {
    flex: 1 1 345px;
    max-width: 345px;
  }
  .medical__item a {
    max-width: 345px;
  }
  .medical__txt p {
    font-size: 1.7rem;
  }

  /* -------- クリニック紹介 */
  .col3 {
    padding: 8rem 0;
  }
  .col3__list {
    flex-wrap: wrap;
    gap: 10px;
  }
  .col3__item {
    width: calc(98% / 2);
  }

  /* -------- 採用情報 */
  .recruit {
    padding: 12rem 0;
  }

  /* -------- コラム */
  .breadcrumb > ul li,
  .breadcrumb > ul li a {
    font-size: 1.4rem;
  }
  .column {
    padding: 8rem 0 0;
  }
  .column__contents {
    flex-wrap: wrap;
  }
  .column__item {
    width: calc(98% / 2);
  }


  /* 下層ページ */
  /* -------- クリニック紹介ページ */
  .p-message {
    margin-bottom: 10rem;
  }
  .p-message__contents {
    display: block;
  }
  .p-message__txt {
    width: 100%;
    margin-top: 4rem;
  }
  .p-message__txt h2 {
    margin-bottom: 1.5rem;
  }
  .p-message__txt::after {
    top: -25%;
  }
  .p-facility ul li {
    width: calc(100% / 2 - 1rem);
  }
  .p-facility {
    padding: 8rem 0 10rem;
  }
  .p-clinic__bg-img img {
    height: 50vh;
  }
  .p-access {
    margin-bottom: 10rem;
  }

  /* -------- 診療案内ページ */
  .p-concept {
    padding: 0 0 0;
  }
  .p-concept__gallery ul li img {
    width: 300px;
    height: 300px;
  }
  .p-concept__gallery ul li > div {
    width: 100%;
    padding: 2.5rem;
  }
  .swiper-container {
    margin-bottom: 8rem;
  }

  /* -------- コラムページ(アーカイブ・カテゴリー・シングル) */
  .p-column__post {
    width: calc(100% / 2 - 1rem);
  }
  .p-column-single__ttl {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}

/* ************************************************************************************************
  781px / tab-narrow
************************************************************************************************ */
@media screen and (max-width: 781px) {
  /* 下層ページ */
  /* -------- クリニック紹介ページ */
  .p-message__img {
    width: 100%;
  }
  
  /* -------- 保険診療ページ */
  h2.p-menu__summary__ttl {
    font-size: 3rem;
  }
  .p-menu__item:nth-child(odd) h3.p-menu__ttl,
  .p-menu__item:nth-child(even) h3.p-menu__ttl {
    font-size: 3rem;
  }
  .p-menu__item:nth-child(odd) h3.p-menu__ttl::before,
  .p-menu__item:nth-child(even) h3.p-menu__ttl::before {
    width: 20px;
    height: 20px;
    margin: 0 auto 1rem;
  }
  .p-menu__summary {
    margin-bottom: 10rem;
  }
  .p-menu__bg {
    padding: 8rem 3rem;
  }
  li.p-menu__content > picture img {
    width: 95px;
    height: 95px;
  }
  li.p-menu__inner {
    width: calc(100% / 2 - 2vw);
    margin-bottom: 1.5rem;
  }
  li.p-menu__inner2 {
    display: block;
  }
  li.p-menu__inner2 > picture img {
    width: 200px;
    height: 200px;
    display: block;
    margin-left: auto;
    margin-right: 2rem;
  }
  .p-menu__desc2 {
    padding: 2.5rem;
  }
  li.p-menu__inner2:nth-child(odd) .p-menu__desc2 {
    margin-left: 0%;
    margin-top: -5%;
  }
  li.p-menu__inner2:nth-child(even) .p-menu__desc2 {
    margin-right: 0;
    margin-top: -5%;
  }
  li.p-menu__item5 {
    width: calc(50% - 1vw);
  }

  /* -------- 自由診療ページ */
  table.p-menu__table2 th,
  table.p-menu__table2 td {
    display: block;
    width: auto;
    padding: 1.5rem;
    font-size: 2rem;
  }
  .p-menu__txt2 {
    width: 95%;
  }

  /* -------- 採用情報ページ */
  .p-r_message__box ul {
    flex-wrap: wrap;
    gap: 20px;
  }
  .p-job-desc {
    padding: 10rem 3rem;
  }
  .p-job-desc .container {
    padding: 6rem 3rem;
  }
  .p-r_message__box ul li {
    width: 205px;
    height: 205px;
    font-size: 1.4rem;
  }

  /* -------- お知らせページ */
  .p-news__btn {
    width: 30px;
    height: 30px;
  }
  .p-news__btn::before {
    width: 30px;
    height: 30px;
  }
}


/* ************************************************************************************************
  600px / sp-wide
************************************************************************************************ */
@media screen and (max-width: 600px) {
  /* 共通 */
  h2 {font-size: 2.6rem;}
  h3 {font-size: 2.4rem;}
  h4 {font-size: 2rem;}
  h5 {font-size: 1.6rem;}
  p {font-size: 1.4rem;}
  a {font-size: 1.4rem;}
  img {max-width: 100%;}

  .btn1, .btn2 {
    font-size: 1.3rem;
    width: 171px;
    height: 45px;
    line-height: 45px;
  }

  #page_top, #page_top a {
    width: 50px;
    height: 50px;
  }

  .index__ttl {
    margin-bottom: 4rem;
  }
  .index__ttl::before {
    height: 45px;
  }
  .index__ttl span {
    font-size: 1.2rem;
  }

  /* ヘッダー */
  header, header .container {
    height: 80px;
  }
  header .container2 {
    height: 80px;
  }
  #nav-content {
    width: 50% !important;
  }
  .header-sp__list {
    margin-bottom: 3rem !important;
  }
  .header-sp__item {
    font-size: 1.2rem;
  }

  /* 下層ページヘッダー */
  .header-sub {
    height: 50vh;
    margin-bottom: 6rem;
  }
  .header-sub__ttl {
    font-size: 2.4rem;
  }
  .header-sub__item {
    padding-top: 4rem;
  }

  /* フッター */
  .access {
    padding: 8rem 0 0;
  }
  .access__contents iframe {
    width: 100%;
    height: 45vh;
  }
  .access__clinic {
    margin-bottom: 20px;
  }
  .access__tel a {
    font-size: 3.5rem;
  }
  small {
    font-size: 1.1rem;
  }

  /* ウィジェット */
  .footer__widget {
    display: block;
  }
  .widget-area {
    width: 100%;
    margin-bottom: 3rem;
  }
  .footer__widget h5 {
    font-weight: bold;
  }
  .footer__widget li {
    font-size: 1.2rem;
  }


  /* トップページ */
  /* -------- お知らせ */
  .news__date {
    font-size: 1.2rem;
  }

  /* -------- コンセプト */
  .concept__contents--txt::after {
    top: -5%;
    right: -30%;
    width: 395px;
  }
  .img-sub {
    right: 5%;
  }

  /* -------- クリニック紹介 */
  .col3__item {
    width: 100%;
    margin-bottom: 2.5rem;
  }

  /* -------- 採用情報 */
  .recruit::after {
    width: 545px;
  }

  /* -------- コラム */
  .column__ttl {
    font-size: 1.8rem;
  }


  /* 下層ページ */
  /* -------- クリニック紹介ページ */
  .p-message__img {
    width: 100%;
  }

  /* -------- 診療案内ページ */
  .p-concept__ttl {
    font-size: 2.4rem;
  }
  .p-concept__txt {
    font-size: 1.6rem;
  }
  .p-concept__gallery ul li {
    display: block;
  }
  .p-concept__gallery ul li > div h4 {
    font-size: 2.2rem;
  }
  .p-concept__gallery ul li img {
    width: 250px;
    height: 250px;
  }

  /* -------- 保険診療ページ */
  li.p-menu__summary__item a {
    font-size: 1.4rem;
    padding: 14px 40px 14px 5px;
  }
  .p-menu__btn a,
  .p-menu__btn2 a {
    width: 40px;
    height: 40px;
  }
  .p-menu__bg {
    padding: 6rem 1.5rem;
  }
  .p-menu__summary {
    margin-bottom: 8rem;
  }
  li.p-menu__summary__item {
    width: calc(100% / 2 - 2vw);
  }
  li.p-menu__content {
    padding: 2.5rem;
    margin-bottom: 5rem;
  }
  li.p-menu__content > h5 span {
    width: 35px;
    height: 35px;
    margin-right: 1rem;
  }
  li.p-menu__content > picture img {
    width: 85px;
    height: 85px;
    margin: 1.5rem;
    margin-top: -18%;
  }
  li.p-menu__content > p {
    font-size: 1.6rem;
  }
  h4.p-menu__subttl {
    font-size: 2rem;
  }
  li.p-menu__item2 {
    width: 100%;
    padding: 2rem;
  }
  li.p-menu__inner {
    width: 100%;
  }
  li.p-menu__item3 {
    width: 100%;
  }
  .p-menu__box2 > p {
    margin-bottom: 1.5rem;
  }
  li.p-menu__inner2 > picture img {
    width: 150px;
    height: 150px;
  }
  .p-menu__desc2 > h5,
  li.p-menu__item4 > h5,
  li.p-menu__inner3 > h6 {
    font-size: 1.8rem;
  }
  .p-menu__info2-i > h6 {
    font-size: 1.4rem;
  }
  .p-menu__detail2 > picture img {
    height: 40vh;
  }
  li.p-menu__item4 {
    width: 100%;
  }
  ol.p-menu__flow3 {
    padding: 2rem;
  }
  li.p-menu__item5 {
    width: 100%;
  }
  .p-menu__img2 img {
    height: 40vh;
  }
  .p-menu__txt2 {
    padding: 2.5rem;
  }

  /* -------- 自由診療ページ */
  .p-menu__gallery picture {
    width: calc(100% / 2 - 1rem);
  }

  /* -------- コラムページ(アーカイブ・カテゴリー・シングル) */
  .p-column__post {
    width: 100%;
    margin-bottom: 0;
  }
  .p-column-single__contents {
    padding: 2rem 0;
  }

  /* -------- お知らせページ(アーカイブ・タクソノミー・シングル) */
  .p-news {
    padding: 0 0 4rem;
  }
  .p-news__ttl {
    font-size: 2rem;
  }
  .p-news__excerpt {
    font-size: 1.2rem;
  }
  .p-news-single__ttl {
    font-size: 2rem;
  }
  .p-news-single__contents {
    width: 100%;
    margin: 3rem auto 0;
  }

  /* -------- 採用情報ページ */
  .p-r_message__txt {
    font-size: 1.8rem;
  }
  .p-job-desc__table {
    margin: 0 auto 4rem;
  }
  .p-job-desc__table th,
  .p-job-desc__table td {
    display: block;
    width: auto;
  }
}


/* ************************************************************************************************
  425px / sp-narrow
************************************************************************************************ */
@media screen and (max-width: 425px) {
  /* 共通 */
  h2 {font-size: 2.4rem;}
  h3 {font-size: 2.1rem;}
  h4 {font-size: 1.8rem;}
  h5 {font-size: 1.5rem;}
  p{font-size: 1.2rem;}

  .container {
    padding: 0 1.5rem;
  }

  /* グローバルメニュー */
  header .container2 {
    padding: 0 1.5rem;
  }

  /* ヘッダー */
  .header-main h3 {
    font-size: 3.5rem;
  }

  /* フッター */
  ul.access__txt li {
    font-size: 1.6rem;
  }
  .access__box {
    padding: 1.5rem;
  }
  .access__tel a {
    font-size: 2.4rem;
  }
  table.access__table th,
  table.access__table td {
    font-size: 1.4rem;
    padding: .5rem 0;
  }
  table.access__table th {
    width: 25%;
  }
  table.access__table caption {
    font-size: 1.4rem;
  }
  p.aceess__detail {
    font-size: 1.4rem;
  }
  p.aceess__detail span {
    font-size: 1.2rem;
  }

  /* トップページ */
  /* -------- コンセプト */
  .img-main {
    height: 350px;
  }
  .img-sub {
    width: 225px;
    height: 155px;
  }
  .concept__contents--txt {
    padding: 8rem 0;
  }
  .concept__contents--txt h2 {
    margin-bottom: 1.5rem;
  }
  .concept__contents--txt p {
    font-size: 1.4rem;
  }

  /* -------- 診療内容 */
  .medical__item {
    flex: 1 1 325px;
    max-width: 325px;
  }
  .medical__item a {
    max-width: 325px; 
  }
  .medical__item img {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
  }
  .medical__txt p::after {
    width: 250px;
  }

  /* -------- クリニック紹介 */
  .col3__img img {
    height: 425px;
  }
  .col3__txt h3 {
    font-size: 2rem;
  }

  /* -------- 採用情報 */
  .recruit {
    padding: 8rem 0;
  }
  .recruit::after {
    width: 425px;
  }

  /* -------- コラム */
  .column__item {
    width: 100%;
  }

  /* 下層ページ */
  /* -------- クリニック紹介 */
  .p-access__img img {
    height: 40vh;
  }
  table.p-access__table th,
  table.p-access__table td {
    display: block;
    width: auto;
    padding: 1rem;
  }
  .p-facility ul li {
    width: 100%;
  }

  /* -------- コラムページ(アーカイブ・カテゴリー・シングル) */ 
  .p-column-single__ttl {
    font-size: 2rem;
  }
  .p-column-single__cal {
    font-size: 1.4rem;
  }

    /* -------- お知らせページ */
  .p-news__item {
    padding: 5rem 0;
  }
  .p-news__btn {
    bottom: -35px;
  }
}