@charset "UTF-8";
/* SCSSの読み込み */
@import url(all.css);
/*===============================
  カラー変数
=================================*/
/*===============================
  フォント変数
=================================*/
/* font-family */
/* font-weight */
/* 行間削除 */
/*===============================
  Bootstrap icon変数
=================================*/
:root {
  /* カラー */
  --color-text: #68563e;
  --color-orange: #ffaf31;
  --color-green: #b6cc8e;
  --color-purple: #8373b2;
  --color-border: #bfbbb8;
  --color-white: #fff;
  --color-beige: #fbf9f2;
  /* font-family */
  --font-family-noto: "Noto Sans JP", sans-serif;
  --font-family-maru: "Zen Maru Gothic", sans-serif;
  --font-family-quicksand: "Quicksand", sans-serif;
  --font-family-icon: "bootstrap-icons";
  /* font-weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semiBold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  /* フォントサイズ */
  --font-size-h1: 4.4rem;
  --font-size-h2: 3.8rem;
  --font-size-h3: 3.2rem;
  --font-size-h4: 2.5rem;
  --font-size-h5: 2rem;
  --font-size-h6: 1.8rem;
  --font-size-base: 1.5rem;
  --font-size-sm: 1.2rem;
  /* line-height */
  --line-height-h1: 1;
  --line-height-h2: 1;
  --line-height-h3: 1;
  --line-height-h4: 1.6;
  --line-height-h5: 1.25;
  --line-height-h6: 1.3888889;
  --line-height-base: 2;
  --line-height-sm: 1.66667;
  /* letter-spacing */
  --letter-spacing-sm: 0.05em;
  --letter-spacing-base: 0.1em;
  --letter-spacing-lg: 0.15em;
}
@media screen and (max-width: 767px) {
  :root {
    --font-size-h1: 4.2rem;
    --font-size-h2: 3.6rem;
    --font-size-h3: 3.2rem;
    --font-size-h4: 2.4rem;
    --line-height-h4: 1.25;
    --letter-spacing-lg: 0.12em;
  }
}

/*===============================================
  切り替え用
===============================================*/
html {
  font-size: clamp(8px, 2.2222222222vw, 10px);
}

.sp-none {
  display: none !important;
}

.com-table:not(.com-table--noblock) table,
.com-table:not(.com-table--noblock) table tbody,
.com-table:not(.com-table--noblock) table th,
.com-table:not(.com-table--noblock) table tr,
.com-table:not(.com-table--noblock) table td {
  display: block !important;
  width: 100% !important;
}

/*===============================================
  ページネーション
===============================================*/
/*===============================================
  詳細ページ前後
===============================================*/
/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 320px;
}

/*===============================================
  header
===============================================*/
#header .header__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 8rem;
}
#header .header__logo img {
  width: 14.3rem;
}

/*===============================================
  footer
===============================================*/
#footer {
  padding: 5rem 0 3rem;
}
#footer .footer__other {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: 2.4rem;
  padding-inline: 5%;
}
#footer .footer__logo {
  width: 24rem;
}
#footer .footer__logo img {
  width: 100%;
  aspect-ratio: 24/5;
  -o-object-fit: contain;
     object-fit: contain;
}
#footer .footer__info {
  text-align: center;
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-base);
  margin-block: calc((1em - 1lh) / 2);
}
#footer .footer__links {
  gap: 20px;
  padding-top: 3rem;
}
#footer .footer__btn {
  width: 21rem;
  margin-inline: 0;
}
#footer .footer__sns {
  width: 40px;
}
#footer .com-calendar {
  width: 100%;
  max-width: 46rem;
}

/*フッターナビ
-----------------------------*/
.footer-nav {
  padding-top: 4rem;
}
.footer-nav__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  padding-block: 1px;
}
.footer-nav__item {
  background: var(--color-white);
}
.footer-nav__link {
  font-family: var(--font-family-maru);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  padding: 1.5em 1em;
}

/*コピーライト
-----------------------------*/
.copy {
  padding-top: 3rem;
}
/*===============================================
  fixed固定
===============================================*/
/*ページトップ
-----------------------------*/
#pagetop {
  right: 8px;
  bottom: 8px;
}

/*サイドボタン
-----------------------------*/
#side {
  left: 8px;
  bottom: 8px;
}

/*===============================================
  visual
===============================================*/
/*メインビジュアル
-----------------------------*/
.visual__main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 60rem;
  padding-top: 5rem;
}
.visual__main::before {
  width: 100%;
  height: 28rem;
  top: inherit;
  bottom: 0;
}
.visual__main::after {
  width: 110%;
  height: 10rem;
  background-size: 100%;
  bottom: calc(25rem - 1px);
}
.visual__main-catch img {
  height: 16rem;
}
.visual__main-catch::after {
  height: 10rem;
  margin-top: 3rem;
}
.visual__main #season {
  width: 160%;
}

/*サブビジュアル
-----------------------------*/
.visual__sub {
  height: 20rem;
  padding-top: 6rem;
}
.visual__sub--symptom {
  background-position: 40% center;
}
.visual__sub--beginner {
  background-position: 60% center;
}
.visual__sub--news {
  background-position: 68% center;
}
.visual__sub--privacy {
  background-position: 36% top;
}
.visual__sub--site {
  background-position: 32% top;
}
.visual__sub--e404 {
  background-position: 64% center;
}
.visual__sub-catch {
  width: 40.5rem;
  max-width: 90%;
  height: 6.4rem;
  font-size: var(--font-size-h4);
}
.visual__sub-catch > span {
  letter-spacing: var(--letter-spacing-lg);
  margin-right: calc(var(--letter-spacing-lg) * -1);
}
.visual__sub-catch::before {
  height: 6rem;
  top: -4.8rem;
}

/*===============================================
  main#container
===============================================*/
/*===============================================
  パンくずリスト
===============================================*/
.breadcrumb {
  padding-top: 1em;
}
.breadcrumb__list {
  width: 90%;
}
.breadcrumb + .section {
  padding-top: 10rem;
}

/*===============================================
  main共通
===============================================*/
.inbox {
  width: 90%;
}

/*ボタン
-----------------------------*/
.com-btn {
  width: 32rem;
  height: clamp(50px, 13.3333333333vw, 60px);
  margin-inline: auto;
}
.com-btn--line {
  width: 38rem;
  height: 80px;
  -moz-column-gap: 20px;
       column-gap: 20px;
  font-size: var(--font-size-h6);
  padding-left: 1rem;
}
.com-btn--line::before {
  width: 40px;
}

/*テーブル
-----------------------------*/
.com-table--noblock tr th {
  width: 8em;
}
.com-table:not(.com-table--noblock) tr th {
  padding-bottom: 1.2rem;
}
.com-table:not(.com-table--noblock) tr td {
  padding-top: 0;
}

/* カレンダー
-----------------------------*/
.com-calendar table:has(+ .com-calendar__text) {
  margin-bottom: 1.2rem;
}
.com-calendar__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/*テキストボックス
-----------------------------*/
.com-text p {
  margin-right: calc(var(--letter-spacing-base) * -1);
}

/*お知らせ
-----------------------------*/
.com-post__heading {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2lh;
}

/* 背景
-----------------------------*/
.com-bg::before {
  width: 105%;
  background-size: 36%;
}

.com-wave::after {
  height: 5rem;
  background-size: 100%;
}
.com-wave + .section {
  padding-top: 6rem;
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
/*中タイトル
-----------------------------*/
/*小タイトル
-----------------------------*/
/*===============================================
  共通セクション
===============================================*/
/*お問い合わせ
-----------------------------*/
.com-contact::before {
  width: 100%;
  height: 32vw;
  position: absolute;
  bottom: 32rem;
  left: 0;
}
.com-contact::after {
  width: 15rem;
  aspect-ratio: 323/148;
  right: 1.2rem;
  bottom: 32vw;
}
.com-contact:has(.com-contact__map) {
  padding-bottom: 0;
}
.com-contact:has(.com-contact__map)::after {
  bottom: calc(32rem + 32vw);
}
.com-contact__inner {
  padding-bottom: calc(40vw + 4rem);
}
.com-contact__text {
  text-align: center;
}
.com-contact__text p {
  word-break: keep-all;
}
.com-contact__box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: 3rem;
  margin-top: 4rem;
}
.com-contact__memo {
  margin-top: -1rem;
}
.com-contact__map {
  width: 100%;
  height: 32rem;
}

/*セクション名
-----------------------------*/
/*===============================================
  トップページ
===============================================*/
/*お知らせ/診療時間/アクセス
-----------------------------*/
.top-info__inner::after {
  content: "";
  width: 32rem;
  aspect-ratio: 471/125;
  background: url(../img/index/deco_info.png) no-repeat left bottom/contain;
  position: absolute;
  left: -0.5rem;
  bottom: -8rem;
}
.top-info__box {
  background: var(--color-white);
  border-radius: 2rem;
  padding: 2rem 3rem 3rem;
  margin-bottom: 2rem;
}
.top-info__box:last-of-type {
  margin-bottom: 0;
}
.top-info__title {
  row-gap: 1rem;
}
.top-info__title img {
  height: 5rem;
  margin-bottom: -1rem;
}
.top-info__title .en {
  font-size: var(--font-size-h2);
}
.top-info__title .ja {
  font-size: var(--font-size-h6);
}
.top-info__text {
  text-align: center;
}
.top-info__list {
  padding-bottom: 3rem;
}
.top-info__btn {
  margin-top: auto;
}
.top-info .com-calendar table:has(+ .com-calendar__text) {
  margin-bottom: 1rem;
}

/*大切なご家族が、
ずっと元気でいられるように。
-----------------------------*/
.top-greeting {
  padding-bottom: 0;
}
.top-greeting::before {
  display: none;
}
.top-greeting__btn {
  margin-top: 4rem;
}
.top-greeting__image {
  width: 100vw;
  margin-left: -5vw;
  margin-top: 6rem;
}
.top-greeting__image img {
  width: 100%;
  aspect-ratio: 1.7777777778;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-greeting__image img {
  -o-object-position: right center;
     object-position: right center;
}
.top-greeting__image::after {
  width: 12rem;
  bottom: -1rem;
  left: 1rem;
}

/*ご利用案内
-----------------------------*/
.top-guide {
  background: linear-gradient(to top, transparent 4rem, var(--color-white) 4rem);
}
.top-guide__item {
  margin-bottom: 6.4rem;
}
.top-guide__item:last-of-type {
  margin-bottom: 0;
}
.top-guide__image img {
  width: 100%;
  aspect-ratio: 1.6666666667;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-guide__image img {
  border-radius: 2rem;
}
.top-guide__inner {
  padding: 3rem 2.4rem 0;
  margin: -2rem 2rem 0;
}
.top-guide__inner::before {
  width: 7.2rem;
  aspect-ratio: 4/3;
  border-radius: 3rem 3rem 0 0;
  top: -3.2rem;
}
.top-guide__heading {
  margin-bottom: 2rem;
}
.top-guide__btn {
  margin-top: 3rem;
}

/*こんな症状の時は…
-----------------------------*/
.top-symptom {
  padding-top: 25vw;
}
.top-symptom__images {
  width: 108%;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.top-symptom__image img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.5rem;
}
.top-symptom__inner {
  padding-top: 3rem;
  background: none;
}
.top-symptom__inner::before {
  width: 12rem;
  right: -1rem;
  top: 7.2rem;
}
.top-symptom__title {
  margin-bottom: 4rem;
}
.top-symptom__btn {
  margin-top: 4rem;
}

/*バナーリンクセクション
-----------------------------*/
.top-bnr {
  padding-block: 3rem !important;
}
.top-bnr__item {
  margin-bottom: 4rem;
  position: relative;
  z-index: 0;
}
.top-bnr__item:last-of-type {
  margin-bottom: 0;
}
.top-bnr__link {
  max-width: 48rem;
  height: 16rem;
  margin-inline: auto;
}
.top-bnr__inner {
  flex-direction: column;
  width: 20rem;
  row-gap: 1.6rem;
  padding-top: 1rem;
}
.top-bnr__balloon {
  padding: 3rem 2em;
  margin-top: 2rem;
}
.top-bnr__balloon::before {
  width: 10rem;
  top: 0;
  left: -0.5rem;
  pointer-events: none;
  z-index: 1;
}
.top-bnr__balloon::after {
  width: 6rem;
  right: -0.8rem;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.top-bnr__balloon p {
  text-align: center;
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  word-break: keep-all;
}

/*===============================================
  当院について
===============================================*/
/*当院の特徴
-----------------------------*/
.about-feature__item {
  grid-template-columns: 8rem;
  gap: 2.4rem 1.6rem;
  padding: 2.4rem;
  margin-bottom: 2rem;
}
.about-feature__item:last-of-type {
  margin-bottom: 0;
}
/*スタッフ紹介
-----------------------------*/
.about-staff__image {
  width: 24rem;
  margin-inline: auto;
}
.about-staff__inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: 3rem;
  padding-top: 2rem;
}
.about-staff__inner > * {
  width: 100%;
}
.about-staff__heading {
  margin-bottom: 0;
}
.about-staff__body {
  margin-top: calc(4rem + (1em - 1lh) / 2);
}

/*施設紹介
-----------------------------*/
.about-gallery {
  padding-block: 5rem;
}
.about-gallery__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.about-gallery__image img {
  width: 100%;
  aspect-ratio: 1.5;
  -o-object-fit: cover;
     object-fit: cover;
}
.about-gallery__image img {
  border-radius: 2rem;
}
.about-gallery__heading {
  margin-top: 1rem;
}

/*院情報
-----------------------------*/
.about-info__table {
  padding: calc(3rem + (1em - 1lh) / 2) 3rem;
}

/*===============================================
  診療案内
===============================================*/
/*診療対象動物
-----------------------------*/
.guide-animal__list::after {
  line-height: 1.6;
  margin: calc(2rem + (1em - 1lh) / 2) 0 calc((1em - 1lh) / 2) auto;
}
.guide-animal__item {
  border-radius: 2rem;
  padding: 2.4rem;
  padding-right: 5rem;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  margin-bottom: 2rem;
}
.guide-animal__item:last-of-type {
  margin-bottom: 0;
}
.guide-animal__image--dog img {
  height: 10rem;
}
.guide-animal__image--cat img {
  height: 9.8rem;
}

/*診療内容
-----------------------------*/
.guide-treatment__box {
  padding: 3rem;
}

/*費用について
-----------------------------*/
.guide-cost__table {
  padding: 1.6rem;
}
.guide-cost__table tr th {
  padding-inline: 1.5rem;
}
.guide-cost__table tr td {
  padding-inline: 1.5rem;
}

/*===============================================
  こんな症状の時は
===============================================*/
/*迷ったときは、どうぞご相談ください。
-----------------------------*/
.symptom-desc__image {
  order: 0;
  margin-top: 3rem;
}
.symptom-desc__image img {
  width: 100%;
  aspect-ratio: 1.7777777778;
  -o-object-fit: cover;
     object-fit: cover;
}
.symptom-desc__image img {
  border-radius: 2rem;
}
.symptom-desc__box {
  margin-top: 8rem;
}
.symptom-desc__list dt {
  row-gap: 1rem;
  margin-bottom: 2rem;
}
.symptom-desc__list dd {
  line-height: 1.6;
  padding-left: 3rem;
  margin-bottom: 3rem;
}
.symptom-desc__list dd:last-of-type {
  margin-bottom: 0;
}
.symptom-desc__list dd::before {
  width: 1rem;
  height: 2rem;
}
.symptom-desc__disease {
  padding: 3rem 2rem 2rem;
  margin-top: 4rem;
  border-radius: 0.8rem;
  background: var(--color-white);
}
.symptom-desc__disease-box {
  background: var(--color-beige);
  padding: 2rem;
  border-radius: 2rem;
  margin-bottom: 2rem;
}
.symptom-desc__disease-box:last-of-type {
  margin-bottom: 0;
}
.symptom-desc__disease-box--dog::before {
  width: 8rem;
  top: -3.2rem;
  left: -1rem;
}
.symptom-desc__disease-box--cat::before {
  width: 6rem;
  bottom: -4rem;
  right: 1rem;
}
.symptom-desc__disease-list {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

/*===============================================
  初めての方へ
===============================================*/
/*ご来院の際の注意事項
-----------------------------*/
.beginner-notes__box {
  padding: 3rem;
}

/*診察の流れ
-----------------------------*/
.beginner-flow__item {
  padding-left: 8rem;
  padding-bottom: 4rem;
}
.beginner-flow__item::before {
  width: 6.4rem;
  font-size: var(--font-size-h3);
}
.beginner-flow__item::after {
  left: 3.2rem;
}
.beginner-flow__image {
  margin-bottom: 2rem;
}
.beginner-flow__image img {
  width: 100%;
  aspect-ratio: 1.5;
  -o-object-fit: cover;
     object-fit: cover;
}
.beginner-flow__image img {
  border-radius: 2rem;
}
.beginner-flow__heading {
  margin-bottom: 2rem;
}

/*よくある質問
-----------------------------*/
.beginner-faq__list {
  padding: 1.6rem 1.6rem 4rem;
}
.beginner-faq__item {
  margin-bottom: 4rem;
}
.beginner-faq__heading {
  padding: 1.5rem 1.6rem;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.beginner-faq__body {
  padding-inline: 1.6rem;
}

/*===============================================
  お知らせ
===============================================*/
/* お知らせ 一覧
-----------------------------*/
.news-archive__list {
  padding: 2rem;
}
/* お知らせ 詳細
-----------------------------*/
.news-detail__box {
  padding: 3rem;
}

/*タグリスト
-----------------------------*/
/*===============================================
  お問い合わせ
===============================================*/
.contact-form__table {
  margin-bottom: 2.5em;
}
.contact-form__table tr td select,
.contact-form__table tr td textarea,
.contact-form__table tr td input[type=tel],
.contact-form__table tr td input[type=num],
.contact-form__table tr td input[type=text],
.contact-form__table tr td input[type=email],
.contact-form__table tr td input[type=url] {
  font-size: 1em;
  line-height: 1.5;
  padding: 0.5em 1em;
}
.contact-form .contact-submits-wrap > * {
  width: 32rem;
  max-width: 100%;
  height: 7rem;
  margin: 0 auto 1.25em;
}
.contact-form .contact-submits-wrap > *:last-child {
  margin-bottom: 0;
}

/*===============================================
  お問い合わせ完了
===============================================*/
/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-policy__box {
  padding: 3rem;
}

/*===============================================
  サイトマップ
===============================================*/
.sitemap-list__item {
  margin-bottom: 0.75em;
}
.sitemap-list__item:last-of-type {
  margin-bottom: 0;
}
.sitemap-list__link {
  padding: 1em;
}

/*===============================================
  404エラー
===============================================*/