/* ======================================================
   山下脳神経外科医院
   医院紹介・医師紹介
====================================================== */

.yclinic-page {
  --green: #54B087;
  --green-dark: #348a65;
  --green-deep: #237253;
  --green-pale: #eef8f3;
  --green-ultra-pale: #f7fbf9;

  --text: #343f3a;
  --gray: #65706b;
  --border: #d8e8e0;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px 100px;

  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif;
}

.yclinic-page *,
.yclinic-page *::before,
.yclinic-page *::after {
  box-sizing: border-box;
}


/* ======================================================
   共通見出し
====================================================== */

.yclinic-section-heading {
  max-width: 760px;
  margin: 0 auto;
  padding: 75px 20px 60px;
  text-align: center;
}

.yclinic-section-heading > span {
  display: block;

  margin-bottom: 8px;

  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.yclinic-section-heading h2 {
  position: relative;

  margin: 0 0 28px !important;
  padding: 0 0 20px !important;

  border: 0 !important;
  background: none !important;

  color: var(--text) !important;

  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.yclinic-section-heading h2::before {
  display: none !important;
}

.yclinic-section-heading h2::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 50%;

  width: 40px;
  height: 2px;

  background: var(--green);

  transform: translateX(-50%);
}

.yclinic-section-heading p {
  margin: 0;

  color: var(--gray);

  font-size: 14px;
  line-height: 2;
}


/* ======================================================
   医院紹介
====================================================== */

.yclinic-about {
  padding-bottom: 80px;
}


/* メイン */

.yclinic-about-main {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: stretch;

  margin-bottom: 85px;

  background: var(--green-pale);
}

.yclinic-about-main__image {
  min-height: 440px;
  overflow: hidden;
}

.yclinic-about-main__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.yclinic-about-main__content {
  padding: 55px;
}

.yclinic-en-label {
  display: block;

  margin-bottom: 15px;

  color: var(--green);

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.yclinic-about-main__content h3 {
  margin: 0 0 28px !important;
  padding: 0 !important;

  border: none !important;
  background: none !important;

  color: var(--text) !important;

  font-size: 27px !important;
  font-weight: 500 !important;

  line-height: 1.7;
}

.yclinic-about-main__content h3::before,
.yclinic-about-main__content h3::after {
  display: none !important;
}

.yclinic-about-main__content p {
  margin: 0 0 1.3em;

  color: #53605a;

  font-size: 14px;
  line-height: 2;
}


/* ======================================================
   医院特徴
   画像と文章を必ず同じ行に固定
====================================================== */

.yclinic-feature-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;

  width: 100% !important;
  margin: 0 0 70px !important;
  padding: 0 !important;
}

/* 2番目も順番を変えない */
.yclinic-feature-row--reverse {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* 以前のorder指定を完全に解除 */
.yclinic-feature-row--reverse .yclinic-feature-image,
.yclinic-feature-row--reverse .yclinic-feature-content {
  order: initial !important;
}


/* 写真 */

.yclinic-feature-image {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

.yclinic-feature-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
}


/* テキスト */

.yclinic-feature-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 45px 55px !important;

  background: #f7fbf9 !important;
}

.yclinic-feature-content > span {
  display: block !important;

  margin: 0 0 12px !important;

  color: #54B087 !important;

  font-size: 10px !important;
  font-weight: 600 !important;

  letter-spacing: 0.18em !important;
}

.yclinic-feature-content h3 {
  position: relative !important;

  margin: 0 0 25px !important;
  padding: 0 0 17px !important;

  border: none !important;
  background: none !important;

  color: #343f3a !important;

  font-size: 24px !important;
  font-weight: 500 !important;

  line-height: 1.6 !important;
}

.yclinic-feature-content h3::before {
  display: none !important;
}

.yclinic-feature-content h3::after {
  content: "" !important;

  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 36px !important;
  height: 2px !important;

  background: #54B087 !important;
}

.yclinic-feature-content p {
  margin: 0 0 1.2em !important;

  color: #59655f !important;

  font-size: 14px !important;
  line-height: 2 !important;
}


/* ======================================================
   2つ目だけ左右反転
   PCでは文章左・画像右
====================================================== */

@media screen and (min-width: 701px) {

  .yclinic-feature-row--reverse
  .yclinic-feature-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .yclinic-feature-row--reverse
  .yclinic-feature-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

}


/* ======================================================
   スマホ
====================================================== */

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

  .yclinic-feature-row,
  .yclinic-feature-row--reverse {
    display: flex !important;
    flex-direction: column !important;

    margin-bottom: 50px !important;
  }

  /* スマホでは必ず 写真→文章 */
  .yclinic-feature-row--reverse
  .yclinic-feature-image {
    order: 1 !important;
  }

  .yclinic-feature-row--reverse
  .yclinic-feature-content {
    order: 2 !important;
  }

  .yclinic-feature-image {
    min-height: 0 !important;
  }

  .yclinic-feature-image img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 4 / 3 !important;

    object-fit: cover !important;
  }

  .yclinic-feature-content {
    padding: 28px 22px !important;
  }

  .yclinic-feature-content h3 {
    font-size: 21px !important;
  }

}
/* 方針 */

.yclinic-policy {
  margin-top: 80px;
  padding: 55px;

  background: var(--green-pale);
}

.yclinic-policy-heading {
  margin-bottom: 40px;

  text-align: center;
}

.yclinic-policy-heading span {
  display: block;

  margin-bottom: 7px;

  color: var(--green);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.2em;
}

.yclinic-policy-heading h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  background: none !important;

  color: var(--text) !important;

  font-size: 25px !important;
  font-weight: 500 !important;
}

.yclinic-policy-heading h3::before,
.yclinic-policy-heading h3::after {
  display: none !important;
}

.yclinic-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.yclinic-policy-card {
  padding: 30px 25px;

  border-top: 3px solid var(--green);

  background: #fff;
}

.yclinic-policy-card > span {
  color: var(--green);

  font-size: 11px;
  font-weight: 600;
}

.yclinic-policy-card h4 {
  margin: 12px 0;

  color: var(--text);

  font-size: 17px;
  font-weight: 500;
}

.yclinic-policy-card p {
  margin: 0;

  color: var(--gray);

  font-size: 13px;
  line-height: 1.9;
}


/* ======================================================
   タブレット
====================================================== */

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

  .yclinic-page {
    padding-right: 22px;
    padding-left: 22px;
  }

}

/* ======================================================
   スマートフォン
====================================================== */

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

  .yclinic-page {
    padding: 0 16px 70px;
  }

  .yclinic-section-heading {
    padding: 45px 8px;
  }

  .yclinic-section-heading h2 {
    font-size: 26px !important;
  }

  .yclinic-section-heading p {
    font-size: 13px;
    text-align: left;
  }

  .yclinic-section-heading p br {
    display: none;
  }

  .yclinic-about-main {
    display: block;
    margin-bottom: 60px;
  }

  .yclinic-about-main__image {
    min-height: 0;
  }

  .yclinic-about-main__image img {
    aspect-ratio: 4 / 3;
  }

  .yclinic-about-main__content {
    padding: 30px 22px;
  }

  .yclinic-about-main__content h3 {
    font-size: 21px !important;
  }

  .yclinic-policy {
    margin-top: 45px;
    padding: 38px 18px;
  }

  .yclinic-policy-grid {
    display: block;
  }

  .yclinic-policy-card {
    margin-bottom: 12px;
  }

}